交互说明写的具体一些，减少不必要的沟通成本
交互说明 – 避免过长的流水账式说明
提高交互说明的易读性，让前端和开发人员快速的 理解页面操作逻辑关系
交互说明 – 如原型有修改，要更新说明并告诉大家
可以通过邮件或其他方便的形式通知大家，避免团队成员信息的不对称，减少不必要的沟通成本
为什么要有设计规范
线框图 - 遵守栅格规范
• • • 使页面布局更标准、合理 提高页面模块可重用性 提高产品质量
线框图 - 标记第一屏高度
让视觉设计师进行视觉设计时明确首屏区域
线框图 - 表达清楚UI逻辑
减少页面样式的混乱，给用户一个清晰的引导
线框图 - 考虑视觉实现后的效果
原型设计要预见到元素布局对视觉设计会产生的影响，占位符毕竟不是真实的图片
考虑视觉实现后的效果
为内容创建清楚的格式，以便扫描
线框图 - 通过明暗对比表达
加入明暗对比之后，界面元素的优先级关系更直观，方便视觉设计师更好的理解设计
补妆（光）前
补妆（光）后
线框图 - 不使用截图与颜色
• • 不规范 对视觉设计师做设计有干扰
线框图 - 合理的布局
• • 美观、易懂 更符合设计规则和用户习惯
版本号：V1.0 2016.3.11 1.修改了我的收藏和播放记录列表 2.新增了抽奖活动 版本号：V1.1 2016.3.04
1.增加了订阅功能 2.修改了“课表”中“已翻译”无数据的说明
线框图 - 制作方法
通过明暗对比表达 不使用截图与颜色 合理的布局 遵守栅格规范 标记第一屏高度 表达清楚UI逻辑 了解视觉趋势 利用习惯用法 建立有效的视觉层次 把页面划分明确定义的区域 明显标识可以点击的地方 降低视觉噪声
好的设计需要表达
原型制作的方法
QQ：120517012
理想原型要素
变更日志
版本说明
信息结构
任务流程
页面流程
线框图
交互说明
原型核心要素
变更日志 OR 版本说明
线框图
交互说明
变更记录、线框图、交互说明的“意义”
变更日志/版本说明：方便项目成员看到每次更改的内容，然后重点关注更改部分就可以 线框图：是业务流程的页面呈现形式，是业务规则的载体，是产品的骨架 交互说明： • 让团队成员清晰、快速的看到全部动态说明，减少重复的沟通成本
线框图 - 明显标识可以点击的地方
让开发、设计人员除了关注内容展示之外，更关注哪些是可点击的地方
线框图 - 降低视觉噪声
我们的时间和注意力都很有限，把无谓的部分统统去掉，让用户更集中于他关注的信息和主要操作上
线框图 - 为内容创建清楚的格式，以便扫描
清楚的文本格式可以让用户更易读 可使用方法： • • • • 突出关键词语 充分使用标题 保持段落简短 使用符号列表
线框图 - 了解视觉趋势
有助于我们在审美上和视觉设计师站在较为一致的立场，使大家沟通更顺畅
线框图 - 了解视觉趋势
我们可以把发现的设计趋势应用到线框图的设计中
线框图 - 利用习惯用法
• • • 页面上什么内容在什么位置 视觉元素的外观 尽量保持页面的一致性
线框图 - 建立有效的视觉层次
让页面一瞬间明白哪些是重要的，哪些是类 似的，哪些是另一些的组成部分Fra bibliotek让页面更 易懂
原型制作规范的执行及注意事项
对于原型规范应该什么样，行内并没有非常统一的标准。规范不可能面面俱到， 也不可能涵盖到所有情况，我们更需要的是培养设计师的规范意识，而不是过 于教条。规范的目的是为了更好的完成项目需求，所以设计师可以根据项目情 况及自己的习惯灵活做局部的特色处理。
谢谢
THANKS
不好的设计
更好的设计
交互说明 – 制作方法
尽量使用真实、符合逻辑的数据内容 不遗漏特殊状态的描述 避免过长的流水账式说明 如原型有修改，要更新说明并告诉大家
交互说明 – 尽量使用真实、符合逻辑的数据内容
避免增加开发人员的困扰，让开发人员少一些纠结
交互说明 – 不遗漏特殊状态的描述
•
重要部分越突出
•
逻辑上相关部分视觉上相关
这四列位 于同一个 标题之下， 明确表示 它们是同 一个新闻 故事的组 成部分
这个标题 字体大小 让人一眼 就能看出 它是最重 要的新闻 故事
•
逻辑上包含部分在视觉上进行嵌套
线框图 - 把页面划分明确定义的区域
让开发、设计人员明确自己在哪，并且关注的是 什么区域
• 提高设计、开发质量和工作效率
• 加深记忆，方便后续查阅
变更日志or版本说明 – 制作方法
变更日志：一般包含日期，变更内容变更原因、备注等内容
日期 2016-03-28 2016-03-27 变更内容 增加侧边栏 搜索关键词加粗展示 变更原因 需求的拓展 之前未考虑到 交互规范修改 备注
版本说明：一般包含版本号，日期、更改内容等
设计规范是对设计具体细节、技术的要求、是设计工作的规则和界限，是一种模板化应用的方法 没有规范容易出现什么问题呢？
• • • • 不同频道/模块各自设计独立，导致风格不统一 共用功能组件多种样式重复设计，导致时间大量浪费 设计效率低下 设计质量难以把控
为什么要有设计规范
规范解决了什么问题？
• • • • • • “一致性“形成鲜明的产品特征，增强用户粘度 提高易用性 满足团队协作的需求 减少重复劳动，提高工作效率 提升设计质量 降低培训和支持成本