国产精一区二区_午夜视频99_免费白白视频_中文字幕一区免费

pixso怎么做交互

我來回答
共3個回答
磨旎
回答
第一步:登錄Pixso 進入Pixso網站,登入Pixso賬號,新建一個Pixso文件。 第二步:導入素材 可以使用Pixso繪制UI界面圖,Pixso在精細化矢量設計、自動布局等UI所需的核心功能都已成熟,使用起來很方便。另外,也可以使用Pixso資源社區的素材。Pixso資源社區提供海量設計模板和素材,本地化字體資源,極大的提升了設計師的工作效率。同時,設計師可以選擇每天花時間瀏覽Pixso社區學習基礎知識,了解最新設計趨勢,探索各種設計風格,為自己的項目收集大量視覺靈感和創意。 第三步:制作交互原型 選擇Pixso右側屬性面板中的“原型”,進行原型制作,如下圖所示。鼠標選擇“Recom”文本,在右側屬性面板選擇點擊交互事件右側的“+"圖標,在彈出的彈窗里點擊觸發下拉框,下拉框顯示觸發事件包括單擊、雙擊、懸停時、按下時、鼠標移入、鼠標移出、按下、松開,Pixso設計師在這里選擇“單擊”為觸發條件。在操作下拉框包括無(默認)、跳轉到、變體切換、打開彈窗、返回、關閉彈窗,這里選擇“跳轉到”,跳轉目標頁為“Home”頁。選擇動畫下拉框,可選擇即時、溶解、移入、移出、推、滑入、滑出多種動畫,這里選擇即時。選擇底部導航“order”灰色圖標,按照以上操作,設置觸發為“單擊”,操作為“跳轉到”,跳轉目標頁面為“order”,動畫效果為“即時”。選擇底部導航“Home”灰色圖標、“Community”灰色圖標,“Me”灰色圖標,設置參數同上。 第四步:預覽交互原型 如下圖所示,通過以上步驟設置好參數后以后,點擊頂部導航欄的演示三角形圖標,進行原型演示查看。 收起
2023-02-06
羅東紫
回答
切換右側屬性面板為“設計”,在頂部導航欄選擇矩形工具,快捷鍵為【R】,繪制尺寸為169x88,填充色值為#C4C4C4、透明度為100%,圓角為100的圓角矩形,如下圖所示。使用頂部導航欄圓形工具,快捷鍵為【O】,繪制尺寸為68x68的圓形,填充色值為#FFFFFF、透明度100%,并將其放在圓角矩形圖層上,垂直方向居中對齊,左側間距為13px,如下圖所示。點擊頂部導航欄創建組件,快捷鍵【command+option+K】,選中圓形與圓角矩形,將圓形與圓角矩形設置為一個組件,獲得切換開關的“關”狀態。選中之前創建的組件,在右側屬性面板的“變體”模塊,點擊右側的“+”圖標,創建一個變體,修改變體的圓角矩形填充色值為#40B0FF,透明度為100%。圓形移動到圓角矩形右側,距離右邊間距為13px,獲得切換開關的“開”狀態,如下圖所示:鼠標點擊切換右側屬性面板至“原型”,選中“關”狀態組件,在右側屬性面板的“交互事件”模塊,點擊“+”圖標,新增一個交互操作事件。鼠標點擊“無”,在彈出的彈窗中進行原型設置,設置觸發條件為“單擊”,操作為“變體切換”,切換為“開”狀態,設置“開”狀態切換,方法步驟同上面的步驟6。切換右側屬性面板為“設計”,在頂部導航欄選擇矩形工具,快捷鍵為【R】,繪制尺寸為169x88,填充色值為#C4C4C4、透明度為100%,圓角為100的圓角矩形。使用頂部導航欄圓形工具,快捷鍵為【O】,繪制尺寸為68x68的圓形,填充色值為#FFFFFF、透明度100%,并將其放在圓角矩形圖層上,垂直方向居中對齊,左側間距為13px。點擊頂部導航欄創建組件,快捷鍵【command+option+K】,選中圓形與圓角矩形,將圓形與圓角矩形設置為一個組件,獲得切換開關的“關”狀態。選中之前創建的組件,在右側屬性面板的“變體”模塊,點擊右側的“+”圖標,創建一個變體,修改變體的圓角矩形填充色值為#40B0FF,透明度為100%。圓形移動到圓角矩形右側,距離右邊間距為13px,獲得切換開關的“開”狀態。鼠標點擊切換右側屬性面板至“原型”,選中“關”狀態組件,在右側屬性面板的“交互事件”模塊,點擊“+”圖標,新增一個交互操作事件。鼠標點擊“無”,在彈出的彈窗中進行原型設置,設置觸發條件為“單擊”,操作為“變體切換”,切換為“開”狀態,設置“開”狀態切換,方法步驟同上面的步驟6。 收起
2023-02-06
陸雪薇
回答
步驟一:在Pixso中新建文件 在 Pixso 中創建一個項目,以創建「WeUI淺色組件庫」為例。點擊左側的「資源」選項卡,打開「WeUI淺色組件庫」。WeUI 組件庫提供了兩個處于不同狀態的按鈕,分別將它們從左側拖拽添加到編輯界面。 步驟二:創建多個組件 鼠標框選兩個按鈕,點擊頂部工具欄「組件」右側的下拉小三角,選擇「創建多個組件」,將兩個按鈕轉換為組件。 步驟三:創建組件變體 按鈕圖標轉化為組件之后,在同時選中兩個組件的狀態下,點擊右側的「創建組件變體」,將兩個組件放到一個組件集中。 步驟四:添加交互事件 點擊右側的「原型」選項卡,接下來我們要給兩個組件添加交互事件,把鼠標移動到組件的右側,會出現一個隱藏的控點。 步驟五:單擊觸發變體切換 長按鼠標,從控點拖拽出一條線段,將其連接到下面的組件,這樣就在兩個組件之間快速添加了一個「單擊觸發變體切換」的交互動效。單向添加一個交互事件,并不能實現最終點擊按鈕來回切換的效果,因此也要給下面的組件添加同樣的交互事件,從組件右側拖拽出線段連接到上面的組件。 步驟六:進行演示 添加完交互動效,從左側的組件面板,拖拽添加一個按鈕組件到畫板中,點擊右上角的「演示」進入演示視圖,點擊按鈕就能實現切換開關的交互動效了。 收起
2023-01-31
其它產品問答
打開Pixso官網,直接下載客戶端,自動下載對應系統的版本。Pixso 是一款云端協同設計平臺,支持多人 實時協作、在線設計和鏈接交付,具備白板、原型、 設計、交付、協作、資源管理等多種功能,為產研團隊提供產品設計一體化解決方案,重新定義設計方式,重塑產品設計工作流程,全面提高工作效率,為數字化時代創意需求提供先進生產力。 Pixso 不僅為產品經理、設計師們提供了一個多人協同的產品設計平臺,更提供了一套設計行為規范:項目成員以實現資源共享,設計套件、品牌規范可以同步使用,文件自動更新,團隊成員可以直接在一個文件中同時進行設計和創作, 提升產設研團隊的合作效率。組件和樣式可以在團隊共享,設計師共用設計資源,減少重復設計,形成產品統一的設計規范和視覺效果。
2023-01-17
3 個回答
Pixso是一款集設計、原型、交付于一體的新一代實時設計協作工具,涵蓋原型交互、專業UI設計、自動切圖標注、云端自動備份等功能,通過跨設備的協同、實時云同步內容,打通產品、設計到研發的工作鏈路,全面覆蓋原型、設計、交付全流程,即開即用,較海內外其他同類工具,Pixso的協作更高效,設計更流暢。可以用Pixso,設計資源,快速開啟原型制作,模擬最終產品形態和交互效果。 直接在原型基礎上,快速邀請團隊成員開啟設計協作。自動生成切圖標注,打開瀏覽器就能獲取 CSS、iOS、Android代碼片段。
2023-01-17
3 個回答
查看更多
消息通知
咨詢入駐
商務合作