纸面原型
目的:快速表达想法、节省时间、提高效率,沟通、测试、尽快解决不确定的问题。
可快速修改,尽早否定不靠谱想法。
确定纸面原型后,可以每细化一个界面就交付给视觉,缩短项目周期。
使用工具:草图使用铅笔和纸张。逻辑使用马克笔、双头画笔等。交互效果用便签纸和小卡片,当提示气泡、弹出层、模态窗口等,贴在绘图本上,也可以作为页面标注工具,说明产品功能。
若会用到很多可复用的标准交互组件,可以网上找到标准交互原型组件库,打印出来,剪裁成模块贴到页面框架中,与受贿草图配合使用。
若为团队合作,可利用白板进行绘制,拍照留存文档。
需要表达什么:框架、流程、基本功能和内容,可以忽略细节。
逻辑关系,可以用深浅颜色表现。
第七章 设计标准
什么是原型
它是产品功能与内容的示意图,既包含静态页面样式(线框图),也包含动态的操作效果(交互说明)。
设计师要在考虑商业性、各种限制的基础上,从用户角度出发,把需求文档“翻译”成设计目标,在一定程度上弥补因流程不合理导致的问题,充分发挥体现自身价值的设计决策过程。
eg:产品经理发现市场需要果汁,而自己手上刚好有苹果,就急忙让设计师榨苹果汁,但设计师经过思考、分析,发现用户更喜欢橙汁,在与产品经理沟通后,把苹果汁换成了橙汁。
标准的原型应该包含什么内容
简要说明与信息结构:
- 变更日志:方便项目成员看到每次更改的内容。
- 版本说明:此版本变了哪些地方。
- 信息结构:产品内容、组织、页面层级等。主要是产品的逻辑结构和用户习惯,与需求文档不同。
任务流程&页面流程:
- 任务流程:用户如何操作、界面如何反馈等。
- 页面流程:从一个页面跳转到另一个页面的完整过程。
线框图&交互说明:
- 限制:范围值(数据取值范围)、极限值(数据的显示限制)等。
- 状态:默认、常见、特殊(非正常使用时)状态等。
- 操作:常见、特殊、手势操作及误操作等。
- 反馈:提示、跳转、动画等。
总之,除静态页面外,还需要考虑各种动态情况;除正常情况外,还需考虑特殊和错误情况。
绘制线框图
通过明暗对比表达:突出页面元素的优先级,但是,深色并不意味着比浅色重要,要看色块之间的对比关系。
不使用截图与颜色:不要拼凑各种竞品的截图来组成页面;不要在线框图上使用色彩,会对视觉设计形成干扰,告诉视觉设计需要营造的感觉和氛围即可,不需要太过具体。
合理的布局:尽量保持简单的结构,最好不要出现2列、3列混排的结构。确定界面布局时,提前和视觉设计师沟通。
遵守栅格规范:保证交互稿中的字号、间距尽量符合视觉要求。提前和视觉设计师沟通商量好。
标记第一屏高度:1024*768情况下,极限情况可定为 570 或者 600