你真的会画线框图吗？2015.8.7课件_第1页
你真的会画线框图吗？2015.8.7课件_第2页
你真的会画线框图吗？2015.8.7课件_第3页
你真的会画线框图吗？2015.8.7课件_第4页
你真的会画线框图吗？2015.8.7课件_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

制作的线框图更规范，不会对视觉设计师产生设计干扰使用截图与颜色线框图案例：

说明：这样虽然能表达产品的想法，但是会对视觉设计师造成干扰，整体感觉让人觉得很不规范。合理的布局及间距优点：保持简单合理的布局结构，符合用户的使用习惯，能减少视觉设计的时间。布局要点：

考虑布局标准及美观程度不出现2列3列混排的布局避免文字使用密集符合用户使用习惯

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

标记第一屏高度为什么要标记第一屏高度？

我们都知道，最重要的内容，重要的操作按钮一定要在第一屏内完全显示，否则用户第一眼看不到，就会放弃这个页面，从而影响转化率。第一屏应该多高？详情看下图：

说明：在1024*768的分辨率下第一屏的高度可以用570px,有时候也可600px.融入最新UI风格的线框图亮点：留白增多、通过空隙和留白分隔区域，布局更规整使用真实、符合逻辑数据内容优点：

使用真实、符合逻辑的数据内容能有效的减少沟通本，让人一目了然。

图1图2通过下图1，图2对比，图1的优势不言而喻。不遗漏特殊状态的描述

在设计过程中我们更多地考虑正常情况的状态，而忽略了特殊状态。但这往往对后续的工作很重要，因此不遗漏特殊状态的描述对线框图设计过程是十分重要的。解决方案看下图：避免流水账式的说明避免流水账式的三种解决方案：流程图代替文字巧妙组织文字说明制作动态效果

避免流水账式的说明流程图代替文字说明

用流程图表述更清晰，更有条理性避免流水账式的说明巧妙组织文字说明

利用“if、else、case”逻辑性强的文字表述在订单确认满足以下条件，返回购物车页面案例：case1：库存下降，且少于用户购买量case2：价格变动case3：case1&case2

人人文库> 全部分类> 行业资料 > 医学制药

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论