线框图是在纸或者软件工具中创建的描绘未来界面样式的低保真可视化图。线框图的目的是帮助设计师理解内容和功能元素应该如何放置在界面具体的位置上。
在本文中,小摹将分享 8 个技巧,助大家充分了解线框图。
在开始线框图之前,需要清楚地了解需要设计多少个屏幕以及用户将如何与它们交互。
当拥有这种可以用作参考的用户流程草图后,再画线框就会容易得多。
可以使用简单的对象(例如框和箭头)来可视化流程。例如,下面看到的这个英文版结账体验用户流程。
选择对用户流程最重要的界面作为主体,将会让整体设计变得更加容易。
先主体框架,再分支框架,最后填充内容。
高保真度适用于保存精细复杂的UI设计图。而线框图则通常以低保真和中等保真度创建。低保真线框只需要包含最少的设计细节即可。
低保真线框
而中等保真线框看起来更像是模型。
决策应用程序的中保真线框
在设计过程的早期阶段,当探索不同的设计方向并希望尽可能多地可视化想法时,低保真线框可能会很好
而当要深入研究特定解决方案时,设计师应创建中等保真线框。在与其他设计师和开发人员讨论时,中等保真线框也非常有用。
线框图传统上应该由黑白或灰度创建,但同时也可以使用一种或两种对比色来体现视觉差异化并将观看者的注意力引导到特定对象(例如特定按钮)。以下示例使用对比色来突出显示交互式元素。
移动应用程序的线框
在设计过程的早期阶段,设计师的目标是创建结构清晰的布局界面。而在创建了一个像样的视觉层次结构界面之后,就需要在产品中使用的实际内容文本替换之前设置的虚拟文本。
避免使用虚拟文本为的是防止他人审查线框图时,看不明白设计的内容和使用场景。
尽量将虚拟文本改成真实文本
线框图通常是静态设计的。虽然可以将它设计为很多单图的集合发布,但最好能为它们创建一个流程,甚至是一个可点击的线框图版本。
考虑到产品功能,可点击的线框图能让团队更容易理解场景的各种细节。例如,在浏览流程时,使用可点击线框可以注意到在某些界面之间具体的交互动作。
作为产品设计师,需要向团队成员提供线框图信息并传达设计决策。如果线框图需要分享给团队其他人,最好添加上注释。注释有助于帮助他人理解图中内容并快速传达设计师的关键想法。
线框图里通常只需要使用短注释即可。如果需要更详细地讨论一些具体的内容(例如,需要写一段几百字的描述),最好在设计文档中添加,而不是在线框图上注释。
带注释的线框
虽然画线框门槛很低,用电脑自带的画图软件甚至是直接用笔都可以画线框,但是这样效率不高,表达效果也不好。而专门的工具能达到高效快速制作线框图,更可以保存组件后批量迭代改动。
这里给大家分享两个常用的线框图工具
Axure是一款老牌原型设计工具,我们可以直接使用Axure丰富的组件来创建APP或网站的线框图。作为专业的原型设计工具,它也支持将静态的线框图转换为可交互的原型。同时支持多人协作和版本管理。
在国内的同类型工具中,只有摹客拥有强大的矢量绘图功能,在制作线框图时,我们可以利用摹客的矢量绘图工具和无边界画布,让灵感创意快速具象化。同时,摹客作为一款强大的高保真设计利器,产品经理和设计师也可以使用摹客快速绘制高保真,轻量设计还可以直接使用摹客交付给开发。
以上就是小摹和大家分享的一些关于画线框图的技巧,希望能够对你有所帮助。