在我们的启动页制作中我们提供了三种样式的启动页页面,其实从中不难看出,里面运用了一些简单的元素的重新组合,再加上一些不一样的元素的构成就可以形成新的页面形式,达成了不一样的展示效果。
顶部状态栏
logo
标语
页面本身的制作并不是很难,难点在于从产品入手,本产品更需要启动页展示怎样的内容,再通过其内容分析页面需要具备怎样的元素,再把元素进行重组。
下面通过优酷视频播放的案例来展示"拆"字诀"合"字诀与的组合运用。
将需要制作的目标进行拆解,尤其在层次分布上的先后顺序一定要分明白。
广告播放流程拆解分析:
前置条件:进入播放页面
触发条件:倒计时事件
过程动效:倒计时
结果反馈:倒计时完毕后进入播放主页
视频播放流程拆解分析:
前置条件:倒计时后进入此页面
触发条件:点击事件
过程动效:弹幕控制。上下操作栏缓入,右侧操作区显示,截图/GIF页面跳转
结果反馈:出现对应模块操作模块
拆解完毕后从原有的组件库中调用了广告标签、倒计时组件、播放操作栏组件进行页面的组合。
动态效果的预览地址:https://uedart.com/demo/templatesMobileKit/index.html#g=1&p=视频播放_video
何为"移"?——借用解决其他事情的思路来解决当前的问题。
我们从书中获得的知识,将其应用到实际工作的场景中就是"移"字诀的很好体现。在我们的产品工作中,我们也经常去找"参考",分析其他产品是如何解决相近问题,并将其解决问题的思路转移到自己产品的问题解决上来。
找参考产品的两个维度:
从大的层面:研究产品相关的业务,有竞争关系的产品;
从小的层面:研究产品的某个功能,能提供参考意义的产品功能。
无论是借用竞品产品的参考,还是借用相似功能的参考都是"移"字诀的很好运用。在我的产品设计过程中,我更趋向于运用相似功能的参考,简化成一个一个的功能模块,你会发现这样的参考产品十分之多,我们可以从不同业务模式下的同类进行类比,找到最适合当前产品此功能的交互形式。
他山之石可以攻玉,合理利用其它方面的知识,加以利用,变成好的方法去解决当下的问题。这种能力转移的处理方式是很好的处理事务的方式,同样在制作原型中也十分适用。
原型组件库的运用同样也是"移"字诀的实际运用。我们在日常的产品工作中,将一些产品经验转化为实际的原型组件产物,方便自己在其他产品设计中的复用,这种组件化的思维复用正是"移"字诀的的精髓。
图片选择,参考产品"微信"和"闲鱼"。
选择-查看-编辑:
手势解锁,参考产品"京东金融"。
解锁前-解锁正确-解锁失败:
聊天窗口,参考产品"淘宝"。
历史消息-语音消息-发送操作:
到此关于原型制作的四字诀方法体系就介绍完了,大家可以从四字诀中发现"合"字诀与"移"字诀中都提到了组件库。我喜欢组件库中运用的组件化思维,这种思维如果能够很好地运用起来,相信大家的工作效率一定能够得到很大的提升。希望大家能够快速掌握应用到自己的工作当中去,四字诀不仅适用于原型制作,在很多方面都是适用的。
笔者一直以来都希望能够给大家输出一些有用的知识,在此感谢大家的关注与支持。正是你们一路以来的支持,我才有坚持不懈努力写下去的动力,希望能够在设计研究这条道路上一直走下去。
推荐书籍:这边推荐三本相关书籍给大家,希望大家能有所收获。
FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/
飞特游客
委托设计