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