绘制线框原型的注意事项

很多产品经理或者交互设计师在进行线框原型绘制的时候往往会把大部分注意力放在原型本身所传达出来的功能和布局上，这样做非常正确，但是如果从视觉层面，特别是从UI设计师的角度来考虑，产品经理或者交互设计师要给一份完美的原型图给UI，以下事项是需要注意的。

1.导航菜单的样式

一般最常见的导航菜单的样式有两种——经典的底部标签菜单以及侧滑菜单。如下图所示。我建议从一开始便确定好采用哪种菜单，这对后续页面的设计会有很大的影响，一般来说，决定使用何种菜单会从几个方面综合考虑。

1、操作系统习惯。iOS系统下导航菜单一般使用底部标签菜单。而安卓系统特别采用Material Design的采用侧滑菜单样式较多。

2、导航菜单的数量。底部标签菜单最多不应超过5个标签，也就是说数量在5个及以下菜单的可以采用底部标签菜单，菜单数量在5个以上的建议采用侧滑菜单。

3、用户使用频次。如果页面之间用户需要频繁切换且功能权重差不多的情况下建议使用底部标签菜单，如果该应用某一页面的功能占据才应用大部分功能，且用户菜单之间切换不频繁的话，建议使用侧滑菜单。

其他的考虑还有核心用户的年龄层，操作习惯，以及设备硬件相关的比如屏幕尺寸等，但是这些很难准确把握。

2.线框原型中的层次

很多人绘制线框原型的时候，往往只是把线框内容往上面一堆，这样虽然表达出了该页面的内容以及布局，但是无法看出层次。设计人员在拿到没有层次的线框图后进行设计会有可能走偏，无法达到最好的用户体验。

虽然现在是扁平化设计趋势，但是扁平化设计也是有层次的，特别是采用Material

Design设计——所有的元素都是有1dp厚度的。如果没有层次体现，设计人员便可能无法分清前后关系。如下图所示，这是Material Design的封面图，这样能很清楚的表达出层次的关系。

层次不经包括板块之间的关系，在同一板块之间也会有层次关系，如下图所示，在列表的第一行能很清楚看到按钮、姓名、时间之间的层次关系。

但是需要注意的是，线框原型应尽量避免用颜色去表现层次，这样会对设计人员产生干扰，如下图所示，对比上图，若把按钮用颜色来体现层次，设计人员会有可能认为该按钮只能使用此颜色，或改颜色为产品希望设置的主题色。

线框图应该是无色的，或者是同一颜色的。层次的体现应该通过同一颜色的alpha值的不同来进行标示，字体之间可通过粗细和大小来体现。

另外还需要注意的是，灰度的不同有时候不一定代表重要程度的不同，而只是元素之间的顺序不同，顶部标题栏和列表底色的不同，标示标题栏在列表上方，向上滑动的时候标题栏会遮住列表。

3.线框原型风格对设计的影响

虽然线框原型重点是解释上一节中所说的五个问题，但除非是在纸上或白板上手绘线框原型，否则线框原型图在一定程度上还是会对设计有一些影响的。绘制线框原型的人也应该持续关注设计趋势，避免出现风格过分落后的情况出现。最典型的是很多线框原型的绘制者是产品经理，基本上使用组件模板进行快速原型制作，但是可能软件中内置iOS7以前的系统组件，这就导致绘制出来的原型图还具备一定的写实风格。如下图所示，按钮上面的渐变，很难相信这是一款“现代”设计风格的应用程序。

以上是对线框原型的一些简单介绍，希望大家有了一些大致的感觉。但是需要注意的是，我们毕竟是设计师，我们使用原型的目的是为了更好的设计，我们参与原型的绘制也是可以帮助我们更快的理清系统逻辑实现设计。在进行原型绘制的时候，也需要注意平衡好实用性和设计感之间的关系，线框原型是功能远大于视觉的工具，我们使用Sketch进行线框原型的绘制，可以绘制出更加专业美观的线框原型，但是也不必花太多时间在细节上。在原型这里我们应跳出来，从全局宏观方面把握软件整体，等需求和原型确定了再从细节处思考，设计力求完美的UI界面。

以上内容载自《动静之美——Sketch移动UI与交互动效设计详解》一书。