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