你真的会画线框图吗？201587

1、你真的会画线框图吗？什么是线框图 线框图是产品设计的低保真呈现方式。它有三个简单直接而明确的目标： 1、呈现主体信息群 2、勾勒出结构和布局 3、用户交互界面的主视觉和描述 正确地创建了线框图之后，它将作为产品的骨干而存在。 它就像一幢建筑的蓝图一样，将细节规定地明明白白。画好线框图的几件小事 通过明暗对比表达 不使用截图与颜色 合理的布局及间距 遵守栅格规范 标记第一屏高度 了解视觉趋势 表达清楚UI逻辑 使用真实、符合逻辑数据内容 不遗漏特殊状态的描述 避免流水账式的说明 关于重复出现的模块透过明暗对比表达优点： 透过明暗对比之后，界面元素的重要级关系更直观，能有效的提 高团队的工作效率。

2、缺点： 容易因颜色深浅来判定模块的重要性，深色并不意味着比浅色更重 要，要看色块之间的对比关系。因此要和视觉沟通清楚。 透过明暗对比表达线框图案例：不使用截图与颜色优点： 制作的线框图更规范，不会对视觉设计师产生设计干扰使用截图与颜色线框图案例： 说明：这样虽然能表达产品的想法，但是会对视觉设计师造成干扰，整体感觉让人觉得很不规范。合理的布局及间距优点： 保持简单合理的布局结构，符合用户的使用习惯，能减少视觉设 计的时间。布局要点： 考虑布局标准及美观程度 不出现2列3列混排的布局 避免文字使用密集 符合用户使用习惯 遵守栅格规范什么是栅格？ 栅格设计系统，是一种平面设计的方法与风格，运用固定

3、的格子设 计版面布局，风格工整简洁，是当今出版物设计的主流风格之一。使用栅格规范的优点： 用栅格原理确定网站布局及具体尺寸，减少了思考宽度或高度的烦 恼；页面规范可重用，节约开发成本。 遵守栅格规范用栅格布局的网站案例：注意事项：1、左图中每个粉红矩形宽30px;2、每个矩形间的间距是10px;标记第一屏高度为什么要标记第一屏高度？ 我们都知道，最重要的内容，重要的操作按钮一定要在第一屏内完全显示，否则用户第一眼看不到，就会放弃这个页面，从而影响转化率。第一屏应该多高？详情看下图： 说明：在1024*768的分辨率下第一屏的高度可以用570px,有时候也可600px.了解视觉趋势近年视觉趋势：

4、 宽度变宽，留白增大 渐变减少，视觉风格更扁平化，整体感觉更清爽 通过空隙和留白来分割区域，而不是用线来分割 布局更规则 去掉不必要的视觉元素 融入最新UI风格的线框图亮点：留白增多、通过空隙和留白分隔区域，布局更规整表达清楚UI逻辑如何表达清楚UI逻辑？-制作下图表： 说明：在设计一个内容元素较多、逻辑层级较复杂的页面时，为了避免混乱，我们需要提前整理左侧图表这些内容，以保证文字、链接、操作等内容的样式符合它们所代表的重要程度，并把各种复杂的情况归类成有限的几种形式，以给用户一个合理的视觉引导。（字号尽量控制在3-5种，根据情况匹配颜色） 使用真实、符合逻辑数据内容优点： 使用真实、符合逻辑

5、的数据内容能有效的减少沟通本， 让人一目 了然。 图1图2通过下图1，图2对比，图1的优势不言而喻。不遗漏特殊状态的描述 在设计过程中我们更多地考虑正常情况的状态，而忽略了特殊状态。但这往往对后续的工作很重要，因此不遗漏特殊状态的描述对线框图设计过程是十分重要的。解决方案看下图：避免流水账式的说明避免流水账式的三种解决方案：流程图代替文字巧妙组织文字说明制作动态效果 避免流水账式的说明 流程图代替文字说明 用流程图表述更清晰，更有条理性避免流水账式的说明 巧妙组织文字说明 利用“if、else、case”逻辑性强的文字表述 在订单确认满足以下条件，返回购物车页面案例： case1：库存下降，且少于用户购买量 case2：价格变动 case3：case1&case2 else：跳转到订单成功页面 制作动态效果 很多复杂的动态效果文字难以描述清楚，所以最好制