界面设计新理念 从用户界面谈用户体验.pptVIP

从用户界面谈用户体验 镇元子 用户界面的价值 伟大的用户界面会遵从用户界面设计原则，这些原则基于用户思考和工作的方式，而非基于设备的能力。一个费解的、逻辑混乱的、不诱人的界面会让原本很伟大的程序变成一团浆糊。但是一个优美的、符合直觉的界面能够与程序的功能相辅相成，给用户留下良好的印象。 ——《iOS Human Interface Guidelines》 来看一个案例 如何到达这个结果 我判断用户体验高低的小技巧 一个功能足够的产品区分使用者水平的差异有多大，差异越小，用户体验越好。 你听说过电视机高手吗？ 但你一定听说过搜索高手 插入一个广告 下一次我会分享找在互联网中用户体验 找一部电影 找一段话出处 鉴别新闻真假 找流出的你懂的 鉴别妹纸头像是不是她自己 …… 人机界面设计原则 美 一致性 直接控制 反馈 暗喻 用户控制 ——《iOS Human Interface Guidelines》 美 美不是一个衡量程序好不好看，而是程序的外观和与其功能是否相衬。 网站界面创造美的“3”原则 基于网格设计内容布局的尺寸、对齐、间距，使用不超过3种字体大小、3个对齐基准线、3种间距尺寸、3种颜色。 “3”原则的具体 1）文字 - 设置正确的font family以保证在不同操作系统中都能以最优的字体显示中文、字母、数字、标点。 - 针对以中文为主和以英文为主的内容、字体大小不同的内容，设置不同的行间距。 - 在Windows、宋体为主的环境下，字体不要小于12px，不要使用斜体，避免使用粗体。 2）内容尺寸 - 对于文字内容为主的页面，往往可以利用最小文字的尺寸（或接近这个尺寸）、并且能整除标准页面宽度的尺寸，作为网格的单元尺寸。 - 使用网格设计法规范内容的尺寸，让布局看起来整洁有序。 - 设置内容宽度是固定还是可以延展。可延展的内容宽度能充分利用屏幕空间，但是过宽的内容反而妨碍阅读。 3）对齐 - 使用网格设计法规范内容的对齐，让布局看起来整洁有序。 - 在横向上不要使用过多的对齐基准线。如果横向有5、6个对其基准线，几乎等于没有规范对齐。 - 英文在左对齐或右对齐的时候、另一侧参差不齐，居中对齐的时候两侧参差不齐，有一种美感。中文则往往更欣赏整体接近方块化的布局，尤其是对于高密度内容，需要慎用参差不齐的形式。 4）间距 - 间距单元尺寸的制定，由网格单元尺寸、字体单元尺寸共同决定。 - 尽量少使用几种不同的间距尺寸，间距类型过多让布局显得凌乱。 - 间距是非常有效的形成内容区块的方式，并且微妙而不强烈。相比使用背景色、间隔线，用间距形成区块往往更具品质感。 5）颜色 - 主体颜色尽可能不超过3种（黑色和白色如果作为背景色和文字色，不包括在内），主色、强调色、辅助色。 - 在同一种颜色上，可以根据需要发展出同色系的辅助色。 - 如果使用过浅的颜色，有可能在某些显示器上看不见。同一颜色在不同的显示设备上显示效果往往不同，往往绿色的偏色尤其严重。 一致性 界面一致性能够让人们沿用以往学会的知识和技能。 一致性的范畴很广 命令行 图形 WEB 语音 手势 体感 看一个正面案例 看一个中间案例 看一个反面案例 看我们的一个正面案例 之前算一个反例 必须说明一点 一致性被滥用的场合也很多 现实本身是非常复杂的 一致性是在一个有限范畴里的 比如亚马逊和淘宝商城的商品最终页 哪些地方是一致的 哪些地方是不应该一致的 直接控制 当用户直接控制屏幕上的物体，而非通过各种控件时，他们会更深地沉浸在任务中，也更清楚地理解他们行为的结果。 几个典型案例 WORD的所见即所得 WEB上的一个典型案例 反馈 反馈告知用户他们的行为有何结果，使用户确信程序正在运行中。人们操纵控件时期待即刻的反馈，也期待在较长的流程中能提供状态提示。 轻专区的案例 YY游戏大全的案例 不好的反馈 暗喻 当虚拟的物体和动作是真实世界中物体和动作的暗喻时，用户会立刻明白该如何使用这个程序。 苹果是这方面的极致 谷歌喜欢科幻一点 微软的Metro风格 用户控制 应该由用户出发和控制操作，而非程序。 轻专区的两个案例 轻专区的两个案例