线框图的制作

2019-05-28    来源:flyalone.net

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

本文主要内容包括线框图定义、目的、制作概要、注意问题等,现阶段笔者处于学习阶段,待有了更多实践之后,将添加更多细节。

一、什么是线框图(wireframe)?

线框图是对最终产品各页面内容的简单呈现,通过简单线条展示现产品框架和主体内容模块,通常不做页面细节(颜色/字体/图片等)描述。

线框图提供了一个供讨论、供评审、供确认的承载物。

二、为什么需要线框图?

团队内部沟通设计思想,从而对产品框架得到一致的理解。

用于向公司上层和客户展示设计想法。

如果进行初期可用性测试的话,线框图(或扩展为Lo-Fi Prototype)可作为用户测试工具。

作为最终网站的初级设计蓝图(blueprint),给设计师和工程师一个清晰的产品构架。

三、构建wireframe之前需要思考以下几点?

时机: 产品不同的开发阶段,团队需要的线框图的重点内容和详细程度是不同的。

受众:不同场合,不同的受众,对线框图的需求亦有不同。

目标:希望线框图此时产生什么作用?

内容:准备好要展示的内容列表,才能正确的做事。

四、不同时期的线框图设计概要图示

五、需要注意的问题:

1. 效率

快速制作,快速讨论并达成共识,该效率下的线框图才有真正的价值。

2. 越简略,越利于讨论

线框图需要经过反复讨论、确认、修改,因此初期的线框图不要增加过多细节,便于激发想象和随时修改

3. 时刻体现优先级顺序

在确定功能需求之后,一定要确定功能需求的优先级,并体现在线框图上,甚至可以将优先级顺序注释在旁边,讨论过程中用于提醒参会者。如果线框图用于展示,那么优先级的体现会让受众一目了然。

4. 不添加颜色

灰度有助于把注意力集中在产品功能层面和布局层面,如果直接加图片和颜色,容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。

5. 版本历史

随时将各种版本的线框图编号、存档,并记录增量,便于恢复设计过程中的一些失误,追根溯源。

作者:书生wilson

文章来源:flyalone.net

标签: wireframe 交互设计 产品 

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:QQ空间技术架构之深刻揭秘

下一篇:项目经理要有5个产品基本能力