第一步:登录Pixso
进入Pixso网站,登入Pixso账号,新建一个Pixso文件。
第二步:导入素材
可以使用Pixso绘制UI界面图,Pixso在精细化矢量设计、自动布局等UI所需的核心功能都已成熟,使用起来很方便。另外,也可以使用Pixso资源社区的素材。Pixso资源社区提供海量设计模板和素材,本地化字体资源,极大的提升了设计师的工作效率。同时,设计师可以选择每天花时间浏览Pixso社区学习基础知识,了解最新设计趋势,探索各种设计风格,为自己的项目收集大量视觉灵感和创意。
第三步:制作交互原型
选择Pixso右侧属性面板中的“原型”,进行原型制作,如下图所示。鼠标选择“Recom”文本,在右侧属性面板选择点击交互事件右侧的“+"图标,在弹出的弹窗里点击触发下拉框,下拉框显示触发事件包括单击、双击、悬停时、按下时、鼠标移入、鼠标移出、按下、松开,Pixso设计师在这里选择“单击”为触发条件。在操作下拉框包括无(默认)、跳转到、变体切换、打开弹窗、返回、关闭弹窗,这里选择“跳转到”,跳转目标页为“Home”页。选择动画下拉框,可选择即时、溶解、移入、移出、推、滑入、滑出多种动画,这里选择即时。选择底部导航“order”灰色图标,按照以上操作,设置触发为“单击”,操作为“跳转到”,跳转目标页面为“order”,动画效果为“即时”。选择底部导航“Home”灰色图标、“Community”灰色图标,“Me”灰色图标,设置参数同上。
第四步:预览交互原型
如下图所示,通过以上步骤设置好参数后以后,点击顶部导航栏的演示三角形图标,进行原型演示查看。