从原型到设计稿.pptVIP

* * * * * * * * * * * * * * * * * * * 视觉设计中的可用性-尽量避免使用装饰性的图标，一些图标有特定的含义 叉子图标可以表示“删除”，也可以表示“关闭”。 “删除”尽量避免使用叉子图标，而使用垃圾桶。 “取消”避免使用叉子图标。 不要使用叉子图标作为用户操作错误的提示，不够友好。 叉子： 重要信息，特别的提示。 惊叹号： 视觉设计中的可用性-尽量避免使用装饰性的图标，一些图标有特定的含义 视觉设计中的可用性-尽量避免使用装饰性的图标，一些图标有特定的含义 “醒目”，希望吸引用户注意的信息，但没有警示作用，不是必须要看的。 灯泡： 视觉设计中的可用性-尽量避免使用装饰性的图标，一些图标有特定的含义 收藏，我的最爱，“加星”---特别关注 五角星： 视觉设计中的可用性-尽量避免使用装饰性的图标，一些图标有特定的含义 “可拖动”： 视觉设计中的可用性-尽量避免使用装饰性的图标，一些图标有特定的含义 “可拖动”： 视觉设计中的可用性-尽量避免使用装饰性的图标，一些图标有特定的含义 “可拖动”： 不好的例子 视觉设计中的可用性-Tab需要有三种状态而不是两种 视觉设计中的可用性-Tab需要有三种状态而不是两种 当前栏目与备选栏目无区别会降低使用效率。 完 * * * * * * * * * * * * * * * * * * * * * * 从原型到设计稿 原型视觉规范 还原原型的要求 视觉设计中的可用性 目录 原型视觉规范 规范是一个约定，我们适用共同的语言交流效率会更高。 无论那种沟通语言，对其缺少共识的时候都会给交流带来麻烦。 解释原型视觉规范 背景为白色。 正常情况下，页面中内容的背景也为白色。 表现上需要区分的内容，可使用的另外一种背景色为：#ccc。 解释原型视觉规范-背景色 文字分为两种：普通文字 和 图形化文字 解释原型视觉规范-文字 无链接的正文 解释原型视觉规范-文字 辅助性的说明文字或“暂时无效”的文字 解释原型视觉规范-文字 有链接的文字 解释原型视觉规范-文字 在图形化文字 解释原型视觉规范-文字 解释原型视觉规范-图片 解释原型视觉规范-基本内容单元 解释原型视觉规范-基本内容单元 解释原型视觉规范-基本内容单元 解释原型视觉规范-基本内容单元 解释原型视觉规范-基本内容单元 解释原型视觉规范-基本内容单元 解释原型视觉规范-特殊表现的内容 解释原型视觉规范-按钮 还原原型的要求 怎样才算还原了原型？和原型一模一样最好？ 还原原型的要求 1. 界面内的文字以界面原型为准，视觉设计阶段要删改其中的文字请与交互设计师和产品经理协商。 还原原型的要求 2. 使用按钮还是文字链接，以界面原型为准。 还原原型的要求 3. 界面原型的依据“更大更突出”原则。通常使用使用12px、14px、16px三种字号区分是否文字内容的重要性。 视觉设计只要正确反映这种需求即可，不需要严格照搬原型中文字字号。 （但是根据中文在电脑中显示的实际情况，只有12-16px，18px字号的宋体是可以清晰显示的……） 还原原型的要求 4. 有链接的文字应可识别，同一产品的界面中，链接的样式不宜过多。 （通常不宜超过三种。） 视觉设计中的可用性 视觉设计本身会很大的影响可用性… 视觉设计中的可用性-滚动条看上去应该象滚动条 不好的例子 视觉设计中的可用性-滚动条看上去应该象滚动条 好的例子 视觉设计中的可用性-按钮的形状、颜色、质感 ● 按钮应该是规则的形状：圆型，矩形，带圆角的矩形 ● 按钮上的文字能很容易辨识 ● 按钮应有立体感。电脑上的按钮来源于对现实生活的模拟，在现实中，按钮是突起的，以此表示可点击。? 视觉设计中的可用性-按钮的形状、颜色、质感 好的例子 视觉设计中的可用性-按钮的形状、颜色、质感 不好的例子 视觉设计中的可用性-表单的对齐方式 表单的项目标题右对齐 按钮与表单原件左对齐 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *