pixso怎么做交互

作者：幸勝豪

時間：2023-01-17

我來回答

共3個回答

磨旎

回答

第一步：登錄Pixso 進入Pixso網(wǎng)站，登入Pixso賬號，新建一個Pixso文件。第二步：導(dǎo)入素材可以使用Pixso繪制UI界面圖，Pixso在精細化矢量設(shè)計、自動布局等UI所需的核心功能都已成熟，使用起來很方便。另外，也可以使用Pixso資源社區(qū)的素材。Pixso資源社區(qū)提供海量設(shè)計模板和素材，本地化字體資源，極大的提升了設(shè)計師的工作效率。同時，設(shè)計師可以選擇每天花時間瀏覽Pixso社區(qū)學(xué)習(xí)基礎(chǔ)知識，了解最新設(shè)計趨勢，探索各種設(shè)計風(fēng)格，為自己的項目收集大量視覺靈感和創(chuàng)意。第三步：制作交互原型選擇Pixso右側(cè)屬性面板中的“原型”，進行原型制作，如下圖所示。鼠標選擇“Recom”文本，在右側(cè)屬性面板選擇點擊交互事件右側(cè)的“+"圖標，在彈出的彈窗里點擊觸發(fā)下拉框，下拉框顯示觸發(fā)事件包括單擊、雙擊、懸停時、按下時、鼠標移入、鼠標移出、按下、松開，Pixso設(shè)計師在這里選擇“單擊”為觸發(fā)條件。在操作下拉框包括無（默認）、跳轉(zhuǎn)到、變體切換、打開彈窗、返回、關(guān)閉彈窗，這里選擇“跳轉(zhuǎn)到”，跳轉(zhuǎn)目標頁為“Home”頁。選擇動畫下拉框，可選擇即時、溶解、移入、移出、推、滑入、滑出多種動畫，這里選擇即時。選擇底部導(dǎo)航“order”灰色圖標，按照以上操作，設(shè)置觸發(fā)為“單擊”，操作為“跳轉(zhuǎn)到”，跳轉(zhuǎn)目標頁面為“order”，動畫效果為“即時”。選擇底部導(dǎo)航“Home”灰色圖標、“Community”灰色圖標，“Me”灰色圖標，設(shè)置參數(shù)同上。第四步：預(yù)覽交互原型如下圖所示，通過以上步驟設(shè)置好參數(shù)后以后，點擊頂部導(dǎo)航欄的演示三角形圖標，進行原型演示查看。收起

2023-02-06

羅東紫

回答

切換右側(cè)屬性面板為“設(shè)計”，在頂部導(dǎo)航欄選擇矩形工具，快捷鍵為【R】，繪制尺寸為169x88，填充色值為#C4C4C4、透明度為100%，圓角為100的圓角矩形，如下圖所示。使用頂部導(dǎo)航欄圓形工具，快捷鍵為【O】，繪制尺寸為68x68的圓形，填充色值為#FFFFFF、透明度100%，并將其放在圓角矩形圖層上，垂直方向居中對齊，左側(cè)間距為13px，如下圖所示。點擊頂部導(dǎo)航欄創(chuàng)建組件，快捷鍵【command+option+K】，選中圓形與圓角矩形，將圓形與圓角矩形設(shè)置為一個組件，獲得切換開關(guān)的“關(guān)”狀態(tài)。選中之前創(chuàng)建的組件，在右側(cè)屬性面板的“變體”模塊，點擊右側(cè)的“+”圖標，創(chuàng)建一個變體，修改變體的圓角矩形填充色值為#40B0FF，透明度為100%。圓形移動到圓角矩形右側(cè)，距離右邊間距為13px，獲得切換開關(guān)的“開”狀態(tài)，如下圖所示：鼠標點擊切換右側(cè)屬性面板至“原型”，選中“關(guān)”狀態(tài)組件，在右側(cè)屬性面板的“交互事件”模塊，點擊“+”圖標，新增一個交互操作事件。鼠標點擊“無”，在彈出的彈窗中進行原型設(shè)置，設(shè)置觸發(fā)條件為“單擊”，操作為“變體切換”，切換為“開”狀態(tài)，設(shè)置“開”狀態(tài)切換，方法步驟同上面的步驟6。切換右側(cè)屬性面板為“設(shè)計”，在頂部導(dǎo)航欄選擇矩形工具，快捷鍵為【R】，繪制尺寸為169x88，填充色值為#C4C4C4、透明度為100%，圓角為100的圓角矩形。使用頂部導(dǎo)航欄圓形工具，快捷鍵為【O】，繪制尺寸為68x68的圓形，填充色值為#FFFFFF、透明度100%，并將其放在圓角矩形圖層上，垂直方向居中對齊，左側(cè)間距為13px。點擊頂部導(dǎo)航欄創(chuàng)建組件，快捷鍵【command+option+K】，選中圓形與圓角矩形，將圓形與圓角矩形設(shè)置為一個組件，獲得切換開關(guān)的“關(guān)”狀態(tài)。選中之前創(chuàng)建的組件，在右側(cè)屬性面板的“變體”模塊，點擊右側(cè)的“+”圖標，創(chuàng)建一個變體，修改變體的圓角矩形填充色值為#40B0FF，透明度為100%。圓形移動到圓角矩形右側(cè)，距離右邊間距為13px，獲得切換開關(guān)的“開”狀態(tài)。鼠標點擊切換右側(cè)屬性面板至“原型”，選中“關(guān)”狀態(tài)組件，在右側(cè)屬性面板的“交互事件”模塊，點擊“+”圖標，新增一個交互操作事件。鼠標點擊“無”，在彈出的彈窗中進行原型設(shè)置，設(shè)置觸發(fā)條件為“單擊”，操作為“變體切換”，切換為“開”狀態(tài)，設(shè)置“開”狀態(tài)切換，方法步驟同上面的步驟6。收起

2023-02-06

陸雪薇

回答

步驟一：在Pixso中新建文件在 Pixso 中創(chuàng)建一個項目，以創(chuàng)建「WeUI淺色組件庫」為例。點擊左側(cè)的「資源」選項卡，打開「WeUI淺色組件庫」。WeUI 組件庫提供了兩個處于不同狀態(tài)的按鈕，分別將它們從左側(cè)拖拽添加到編輯界面。步驟二：創(chuàng)建多個組件鼠標框選兩個按鈕，點擊頂部工具欄「組件」右側(cè)的下拉小三角，選擇「創(chuàng)建多個組件」，將兩個按鈕轉(zhuǎn)換為組件。步驟三：創(chuàng)建組件變體按鈕圖標轉(zhuǎn)化為組件之后，在同時選中兩個組件的狀態(tài)下，點擊右側(cè)的「創(chuàng)建組件變體」，將兩個組件放到一個組件集中。步驟四：添加交互事件點擊右側(cè)的「原型」選項卡，接下來我們要給兩個組件添加交互事件，把鼠標移動到組件的右側(cè)，會出現(xiàn)一個隱藏的控點。步驟五：單擊觸發(fā)變體切換長按鼠標，從控點拖拽出一條線段，將其連接到下面的組件，這樣就在兩個組件之間快速添加了一個「單擊觸發(fā)變體切換」的交互動效。單向添加一個交互事件，并不能實現(xiàn)最終點擊按鈕來回切換的效果，因此也要給下面的組件添加同樣的交互事件，從組件右側(cè)拖拽出線段連接到上面的組件。步驟六：進行演示添加完交互動效，從左側(cè)的組件面板，拖拽添加一個按鈕組件到畫板中，點擊右上角的「演示」進入演示視圖，點擊按鈕就能實現(xiàn)切換開關(guān)的交互動效了。收起

2023-01-31

其它產(chǎn)品問答

提問

pixso下載方法是什么？

唐有歡

回答

打開Pixso官網(wǎng)，直接下載客戶端，自動下載對應(yīng)系統(tǒng)的版本。Pixso 是一款云端協(xié)同設(shè)計平臺，支持多人實時協(xié)作、在線設(shè)計和鏈接交付，具備白板、原型、設(shè)計、交付、協(xié)作、資源管理等多種功能，為產(chǎn)研團隊提供產(chǎn)品設(shè)計一體化解決方案，重新定義設(shè)計方式，重塑產(chǎn)品設(shè)計工作流程，全面提高工作效率，為數(shù)字化時代創(chuàng)意需求提供先進生產(chǎn)力。 Pixso 不僅為產(chǎn)品經(jīng)理、設(shè)計師們提供了一個多人協(xié)同的產(chǎn)品設(shè)計平臺，更提供了一套設(shè)計行為規(guī)范：項目成員以實現(xiàn)資源共享，設(shè)計套件、品牌規(guī)范可以同步使用，文件自動更新，團隊成員可以直接在一個文件中同時進行設(shè)計和創(chuàng)作，提升產(chǎn)設(shè)研團隊的合作效率。組件和樣式可以在團隊共享，設(shè)計師共用設(shè)計資源，減少重復(fù)設(shè)計，形成產(chǎn)品統(tǒng)一的設(shè)計規(guī)范和視覺效果。

2023-01-17

3 個回答

提問

pixso是什么軟件

畢琪

回答

Pixso是一款集設(shè)計、原型、交付于一體的新一代實時設(shè)計協(xié)作工具，涵蓋原型交互、專業(yè)UI設(shè)計、自動切圖標注、云端自動備份等功能，通過跨設(shè)備的協(xié)同、實時云同步內(nèi)容，打通產(chǎn)品、設(shè)計到研發(fā)的工作鏈路，全面覆蓋原型、設(shè)計、交付全流程，即開即用，較海內(nèi)外其他同類工具，Pixso的協(xié)作更高效，設(shè)計更流暢。可以用Pixso，設(shè)計資源，快速開啟原型制作，模擬最終產(chǎn)品形態(tài)和交互效果。直接在原型基礎(chǔ)上，快速邀請團隊成員開啟設(shè)計協(xié)作。自動生成切圖標注，打開瀏覽器就能獲取 CSS、iOS、Android代碼片段。

2023-01-17

3 個回答

問答提及產(chǎn)品