你真的会画线框图吗？2015.8.7.ppt

你真的会画线框图吗？

什么是线框图线框图是产品设计的低保真呈现方式。它有三个简单直接而明确的目标：1、呈现主体信息群2、勾勒出结构和布局3、用户交互界面的主视觉和描述正确地创立了线框图之后，它将作为产品的骨干而存在。它就像一幢建筑的蓝图一样，将细节规定地明明白白。

画好线框图的几件小事通过明暗比照表达不使用截图与颜色合理的布局及间距遵守栅格标准标记第一屏高度了解视觉趋势表达清楚UI逻辑使用真实、符合逻辑数据内容不遗漏特殊状态的描述防止流水账式的说明关于重复出现的模块

透过明暗比照表达优点：透过明暗比照之后，界面元素的重要级关系更直观，能有效的提高团队的工作效率。缺点：容易因颜色深浅来判定模块的重要性，深色并不意味着比浅色更重要，要看色块之间的比照关系。因此要和视觉沟通清楚。

透过明暗比照表达线框图案例：

不使用截图与颜色优点：制作的线框图更标准，不会对视觉设计师产生设计干扰使用截图与颜色线框图案例：说明：这样虽然能表达产品的想法，但是会对视觉设计师造成干扰，整体感觉让人觉得很不标准。

合理的布局及间距优点：保持简单合理的布局结构，符合用户的使用习惯，能减少视觉设计的时间。布局要点：考虑布局标准及美观程度不出现2列3列混排的布局防止文字使用密集符合用户使用习惯

遵守栅格标准什么是栅格？栅格设计系统，是一种平面设计的方法与风格，运用固定的格子设计版面布局，风格工整简洁，是当今出版物设计的主流风格之一。使用栅格标准的优点：用栅格原理确定网站布局及具体尺寸，减少了思考宽度或高度的烦恼；页面标准可重用，节约开发本钱。

遵守栅格标准用栅格布局的网站案例：本卷须知：1、左图中每个粉红矩形宽30px;2、每个矩形间的间距是10px;

标记第一屏高度为什么要标记第一屏高度？我们都知道，最重要的内容，重要的操作按钮一定要在第一屏内完全显示，否那么用户第一眼看不到，就会放弃这个页面，从而影响转化率。第一屏应该多高？详情看以下图：说明：在1024*768的分辨率下第一屏的高度可以用570px,有时候也可600px.

了解视觉趋势近年视觉趋势：宽度变宽，留白增大渐变减少，视觉风格更扁平化，整体感觉更清爽通过空隙和留白来分割区域，而不是用线来分割布局更规那么去掉不必要的视觉元素

融入最新UI风格的线框图亮点：留白增多、通过空隙和留白分隔区域，布局更规整

表达清楚UI逻辑如何表达清楚UI逻辑？---制作以下图表：说明：在设计一个内容元素较多、逻辑层级较复杂的页面时，为了防止混乱，我们需要提前整理左侧图表这些内容，以保证文字、链接、操作等内容的样式符合它们所代表的重要程度，并把各种复杂的情况归类成有限的几种形式，以给用户一个合理的视觉引导。〔字号尽量控制在3-5种，根据情况匹配颜色〕

使用真实、符合逻辑数据内容优点：使用真实、符合逻辑的数据内容能有效的减少沟通本，让人一目了然。图1图2通过以下图1，图2比照，图1的优势不言而喻。

不遗漏特殊状态的描述在设计过程中我们更多地考虑正常情况的状态，而忽略了特殊状态。但这往往对后续的工作很重要，因此不遗漏特殊状态的描述对线框图设计过程是十分重要的。解决方案看以下图：

防止流水账式的说明防止流水账式的三种解决方案：流程图代替文字巧妙组织文字说明制作动态效果

防止流水账式的说明流程图代替文字说明用流程图表述更清晰，更有条理性

防止流水账式的说明巧妙组织文字说明利用“if、else、case”逻辑性强的文字表述在订单确认满足以下条件，返回购物车页面案例：case1：库存下降，且少于用户购置量case2：价格变动case3：case1case2else：跳转到订单成功页面制作动态效果很多复杂的动态效果文字难以描述清楚，所以最好制作出演试效