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