相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

原型制作四字诀:整、拆、合、移

轮回LH发布于:2019-9-11 07:59 |原作者: 時光若刻|
轮回LH
重庆市 铜梁县 GUI设计师
发私信 + 关注
简介: 将原型制作归纳为“整”“拆”“合”“移”,并且给出了实际案例,非常具有参考性。


三、"拆"字诀

"拆"字诀介绍

何为"拆"?——将复杂事务进行拆分变为更为简单的小事件。

通常我们要进行一件复杂度比较高的事情的时候,往往会有一种不知如何下手的感觉,但是当我们把复杂的事物进行分解,拆成一个一个的小目标时,这个时候再去实行这个大的目标就更为简单了。

"拆"在产品构思过程中的运用

我们在构思产品的时候,使用的产品结构图和产品信息图将"拆"字诀运用地恰到好处,对产品结构进行各个模块的功能拆解。

例如,我在进行PRD文档规范2.0的产品构思时运用到的产品结构图:

原型制作四字诀:整、拆、合、移  飞特网 设计理论

"拆"在流程分解过程中的运用

我们通常在设计产品流程的过程中,先会根据用户需求,把产品内部的主流程确立下来,后续逐步根据用户在不同场景下的不同情况,构建产品的子流程,从而将整个产品的所有流程完善起来。

在进行产品文档交付的时候,我们也经常将产品内部的流程进行拆分,形成子流程,来阐述各个流程的相对关系,这样便于开发的理解。

例如,产品文档中各流程的拆解阐述:

原型制作四字诀:整、拆、合、移  飞特网 设计理论

"拆"在产品原型制作中的运用

同样我们在进行原型制作时,也能够很好的运用"拆"字诀来辅助我们的制作。往往我们在设计一个流程的过程中,里面会有很多组成部分,我们要从中把它们拆解出来。

譬如微信的朋友圈中的拍照功能,里面包含了诸多复杂变化的效果,通过"拆"来将各个步骤环节进行拆解,会一下子清晰明朗很多。

拍照流程拆解分析:

  • 前置条件:点击拍摄进入拍照页面;

  • 触发条件:点击事件;

  • 过程动效:提示文字隐藏,捕捉面部焦点,点击按钮缩放;

  • 结果反馈:拍照完成展开照片处理功能。

这样一来,我们所有的流程节点都一清二楚。我这边模拟了一个微信拍照的动效效果展示给大家看一下:

原型制作四字诀:整、拆、合、移  飞特网 设计理论

动态效果预览地址:https://uedart.com/demo/templatesMobileKit/index.html#g=1&p=拍照_视频_页面__photo_video

四、"合"字诀

"合"字诀介绍

何为"合"?——将信息重新组合形成新的模式。

在我们进行页面布局过程中,很多复杂的页面其实就是简单组件的重组。

和"拆"字诀很像的是,拆字诀将复杂的东西简单化后,实现最终的制作目标,"合"字诀是将简单的东西进行重组,实现复杂页面的重组。

组件化思维制作组件库

组件化思维在"合"字诀上运用地淋漓尽致,我们将一些常见的元素、组件进行组件化。当我们进行新产品的策划时,进行产品分析、确定好所有产品流程后,进入到原型绘制阶段,构建新页面时我们不需要再重新制作这一类的组件,只需从通用组件库中调取,进行重组即可快速构成页面。

我们根据手机交互中的各个场景应用拆分出了很多组件,这些组件为后续的产品制作提供了一个很强大的库,我们在重组页面时可以很好的应用组件库进行原型页面的重组。

例如,我们制作的组件中有:

顶部元素

原型制作四字诀:整、拆、合、移  飞特网 设计理论

底部元素

原型制作四字诀:整、拆、合、移  飞特网 设计理论

21

好评
16

差评

刚表态过的朋友 (37 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

轮回LH
重庆市 铜梁县 GUI设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计