Vegeta 发表于 2014-8-3 16:02:20

16、用户体验设计之线框图


线框图(Wireframe)是软件或者网站设计过程中非常重要的一个环节。线框图是整合在结构层的全部三种要素的方法:

[*]通过安排和选择界面元素来整合界面设计;
[*]通过识别和定义核心导航系统来整合导航设计;
[*]通过放置和排列信息组成部分的优先级来整合信息设计。

通过把这三者放到一个文档中,线框图可以确定一个建立在基本概念结构上的架构,同时指出了视觉设计应该前进的方向。

【案例】创建线框图
创建线框图需要完成以下三个层次的工作:

[*]明确线框图的基本要素。线框图的基本要素包括内容区域、内容描述、内容优先权层级、辨识信息、管理信息。
[*]填写故事。内容包括场景、链接和窗体元素、注释、目标和基本原理、版本历史。
[*]增加可选细节。包括排布和视觉设计、整个设计中的背景信息和内容举例。

下面给各位朋友分享一下,一位德国用户体验专家所做的线框图(节选)。
这是一段可用性测试软件的线框图的节选,这个可用性测试软件给出的是一个可用性测试项目,从制定项目计划,到执行测试,最后到撰写可用性测试报告的解决方案。节选部分是查看一个测试计划:


[*]选定一个在项目中承担的角色。






[*]选择某一个项目。



3. 查看细节。

这三张图,已经可以完美诠释线框图的各种组成要素。内容区域划分明确、内容优先权层级划分得当、场景、链接等页面元素表达丰富、排布和视觉设计接近实际、使用颜色区分。朋友们可以仔细体会。


页: [1]
查看完整版本: 16、用户体验设计之线框图