产品邦

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[复制链接]
Vegeta 发表于 2014-8-3 16:02:20 | 显示全部楼层 |阅读模式

立即注册,下载精品资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
sketchedwireframe-550x250.jpg

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


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

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



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


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

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



  • 选定一个在项目中承担的角色。

12.png



  • 选择某一个项目。


22.png


3. 查看细节。


32.png


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




您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|产品经理之家 ( 粤ICP备12078725号 )

GMT+8, 2024-10-4 10:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表