好的设计需要表达(原型制作方法)

1、好的设计需要表达原型制作的方法QQ：120517012理想原型要素变更日志版本说明信息结构任务流程页面流程线框图交互说明原型核心要素线框图交互说明变更日志OR版本说明变更记录、线框图、交互说明的“意义”变更日志/版本说明：方便项目成员看到每次更改的内容，然后重点关注更改部分就可以线框图：是业务流程的页面呈现形式，是业务规则的载体，是产品的骨架交互说明： 让团队成员清晰、快速的看到全部动态说明，减少重复的沟通成本 提高设计、开发质量和工作效率 加深记忆，方便后续查阅变更日志or版本说明 制作方法日期日期变更内容变更内容变更原因变更原因备注备注2016-03-28增加侧边栏需求的拓展2016-03

2、-27搜索关键词加粗展示之前未考虑到交互规范修改n 变更日志：一般包含日期，变更内容变更原因、备注等内容版本号：版本号：V1.0 2016.3.111.修改了我的收藏和播放记录列表2.新增了抽奖活动n 版本说明：一般包含版本号，日期、更改内容等版本号：版本号：V1.1 2016.3.041.增加了订阅功能2.修改了“课表”中“已翻译”无数据的说明线框图 - 制作方法n 通过明暗对比表达n 不使用截图与颜色n 合理的布局n 遵守栅格规范n 标记第一屏高度n 表达清楚UI逻辑n 考虑视觉实现后的效果n 了解视觉趋势n 利用习惯用法n 建立有效的视觉层次n 把页面划分明确定义的区域n 明显标识可以点

3、击的地方n 降低视觉噪声n 为内容创建清楚的格式，以便扫描线框图 - 通过明暗对比表达补妆（光）前补妆（光）后加入明暗对比之后，界面元素的优先级关系更直观，方便视觉设计师更好的理解设计线框图 - 不使用截图与颜色不规范对视觉设计师做设计有干扰线框图 - 合理的布局美观、易懂更符合设计规则和用户习惯线框图 - 遵守栅格规范使页面布局更标准、合理提高页面模块可重用性提高产品质量线框图 - 标记第一屏高度让视觉设计师进行视觉设计时明确首屏区域线框图 - 表达清楚UI逻辑减少页面样式的混乱，给用户一个清晰的引导线框图 - 考虑视觉实现后的效果原型设计要预见到元素布局对视觉设计会产生的影响，占位符毕竟不

4、是真实的图片线框图 - 了解视觉趋势有助于我们在审美上和视觉设计师站在较为一致的立场，使大家沟通更顺畅线框图 - 了解视觉趋势我们可以把发现的设计趋势应用到线框图的设计中线框图 - 利用习惯用法页面上什么内容在什么位置视觉元素的外观尽量保持页面的一致性线框图 - 建立有效的视觉层次重要部分越突出逻辑上相关部分视觉上相关逻辑上包含部分在视觉上进行嵌套这四列位于同一个标题之下，明确表示它们是同一个新闻故事的组成部分这个标题字体大小让人一眼就能看出它是最重要的新闻故事让页面一瞬间明白哪些是重要的，哪些是类似的，哪些是另一些的组成部分，让页面更易懂线框图 - 把页面划分明确定义的区域让开发、设计人员明

5、确自己在哪，并且关注的是什么区域线框图 - 明显标识可以点击的地方让开发、设计人员除了关注内容展示之外，更关注哪些是可点击的地方线框图 - 降低视觉噪声我们的时间和注意力都很有限，把无谓的部分统统去掉，让用户更集中于他关注的信息和主要操作上线框图 - 为内容创建清楚的格式，以便扫描清楚的文本格式可以让用户更易读可使用方法：突出关键词语充分使用标题保持段落简短使用符号列表不好的设计更好的设计交互说明 制作方法n 尽量使用真实、符合逻辑的数据内容n 不遗漏特殊状态的描述n 避免过长的流水账式说明n 如原型有修改，要更新说明并告诉大家交互说明 尽量使用真实、符合逻辑的数据内容避免增加开发人员的困扰，

6、让开发人员少一些纠结交互说明 不遗漏特殊状态的描述交互说明写的具体一些，减少不必要的沟通成本交互说明 避免过长的流水账式说明提高交互说明的易读性，让前端和开发人员快速的理解页面操作逻辑关系交互说明 如原型有修改，要更新说明并告诉大家可以通过邮件或其他方便的形式通知大家，避免团队成员信息的不对称，减少不必要的沟通成本为什么要有设计规范设计规范是对设计具体细节、技术的要求、是设计工作的规则和界限，是一种模板化应用的方法没有规范容易出现什么问题呢？不同频道/模块各自设计独立，导致风格不统一共用功能组件多种样式重复设计，导致时间大量浪费设计效率低下设计质量难以把控为什么要有设计规范规范解决了什么问题？“一致性“形成鲜明的产品特征，增强用户粘度提高易用性满足团队协作的需求减少重复劳动，提高工作效率提升设计质量降低培训和支持成本原型制作规范的执行及注意事项对于原型规范应该什么样，行内并没有非常统一的标准。规范不可