如何设计高质量的线框图

  • A+
所属分类:经验思维

本文来源: WellDesign艺术设计, 共 400 字

线框图需不需要好看?当然需要,毋庸置疑。但好看的线框图并不只是要做到外观的精美,更重要的一点是它应该是容易被读懂的。一个高质量的线框图通常需要做到以下几点:页面的布局和元素一目了然;原型表达准确到位;页面重点突出。

今天,小编就给大家介绍一些设计高质量线框图的小窍门。
1、使用颜色和阴影区分模块
使用颜色区分模块在视觉上比线条区分更直观,也更容易观察出页面布局。

如何设计高质量的线框图

如何设计高质量的线框图
2、使用真实数据表现元素
使用真实数据可以更好展现页面元素信息,传递页面功能。

如何设计高质量的线框图

如何设计高质量的线框图

如何设计高质量的线框图

如何设计高质量的线框图
3、标注
标注更详细地解释了线框的各个部分。这些标注可能会解释图标、内容策略,甚至用户操作。

如何设计高质量的线框图

如上图所示,虽然界面呈现了页面想要表达的所有内容,但标注可以用于解释图标的含义以及信息的重要性。底部还有一些标注,说明了不同操作手势的不同作用。

如何设计高质量的线框图

如果将标注纳入线框流程,你的设计将变得更加清晰。
4、样本库
线框图最终输出的样子。

a、草图框架

如何设计高质量的线框图

如何设计高质量的线框图

如何设计高质量的线框图

如何设计高质量的线框图

b、线框图+备注

如何设计高质量的线框图

如何设计高质量的线框图

c、体验地图

如何设计高质量的线框图d、用户流程

如何设计高质量的线框图

如何设计高质量的线框图

如何设计高质量的线框图

如何设计高质量的线框图

如何设计高质量的线框图



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: