第二讲：网页的人性化设计.ppt

网页的人性化设计 一、操作入口明确 就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”，指的是产品内部不同模块之间的转接元素，例如在Web产品中，按钮控件、输入框、文字链等都属于操作入口；“明确”指的是入口的视觉感是清晰的、可识别的；“合理”是指入口的出现是符合用户操作逻辑的，适时的。 如何做到操作入口明确 1、强化重点，弱化周边 2.入口信息明确易识别 3、根据用户定制合适的入口 二、可及 “可及”是一个狭义的概念，是放在有效性下面的，具体解释为“色盲、肢体残疾等特殊人士可以完成基本操作”。更扩展一下，这个特殊人群应该还包括老人儿童，文盲等对信息使用不擅长的人。 主要考虑的几个特殊人群 1.色盲 2.肢体残疾 3.老人，儿童（5～12岁） 4.文盲 5.其他（其他对信息使用不擅长的人） 1.使用形状+色彩的信息提示 2.简化操作方式 4.使用视觉、听觉，触觉等多元化的手法传达必要的资讯 5.使用辅助性的工具 6.容易浏览及合理的信息架构 什么是适时帮助 “适时帮助”是一个偏正结构，首先是帮助，然后制约条件是适时。 如何帮助 1.传道传道主要是理论上的帮助，告诉别人这是什么，主要指一些名词解释，规则说明等等。2.授业授业主要是操作上的帮助，告诉用户怎么作才能完成整个流程。很多当前操作提示，流程示意图等都属于这个范畴。3.解惑解惑主要是在用户迷惑不解的时候提供解决方案，比如对用户操作出错的建议，某分流程结束后的帮助提示等等。 什么是适时 A.在用户第一次使用某产品功能的时候。 B.在用户已经出错或者将要出错的时候。 C.在用户遇到不明白的问题的时候。 1.帮助信息明显，提示方式灵活。  2.及时反馈操作，防止用户出错；分析错误原因，给出合理建议。 3.及时补充，信息完整 信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。 4、简洁清晰，自然易懂 4、简洁清晰，自然易懂 2.信息表述的种类与设计原则 1）页面布局 2）交互文本 3）界面色彩 4）图像图标 5）声音 5、突出重点，一目了然 6、标签明晰、有效 什么样是好的标签 1、好的标签，应该使用客户的语言，避免使用术语、行话、缩写词等用户难以理解的词语； 2、采用描述性的标签，避免使用“信息”、“细节”等过于宽泛的词语，尽量以某种方式加以限定,如：“给买家的信息”、“交易细节”。 3、标签之间的互斥性要强，尽可能地寻找差异化； 4、使用聚焦地标签，如，能把猫、狗、仓鼠等归纳为“宠物”，就不要用“动物”。 5、在粒度、语法、展现、用法等方面保持标签的一致性； 6、较长的标签往往比短标签更好，但并非越长越好，请尽量控制在12个字以内（这不是一个硬性规定）。 案例 标签设计方法 1、招募志愿者，大部分项目适当的卡片分类志愿者人数是 15 人，大型项目可以达到 30 人。个人觉得如果只是想对自己想法进行验证的话，5-10 人即可。 2、 准备卡片，写上你预先设定好的标签（这些标签必须是你们内部讨论或请教过专家的结果）。 3、 让用户进行分类，你可以观察用户的分类过程，以及对标签的理解。 7、避免迷路 设计目标 任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？” 设计目标 任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？” 这个网站的导航标签比较极端，首先标签之间的互斥性差，“淘宝潮流榜”、“爱物秀场”、“败家俱乐部”等，含义和实际内容都非常接近；其次是一致性差，标签的粒度不同、长度不同、语气不同，甚至还有英文出现，可谓五花八门； 最糟糕的是，在标签的选择上，用了很多自作聪明的词语，如“爱骚谈资”，用户很难预测到链接背后是什么内容。 * * 网页UI设计 主讲:孙握瑜 一 1.什么是“简洁自然，清晰易懂”？ 简洁清晰：使信息最简化“少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。 自然易懂：使用用户语言用户获取信息的方式多样，并且对信息的理解程度也各有不同，所以使用用户平时使用和理解的表达方式去传递信息，更可以被用户所接受。 ①界面布局尽量有秩序，排列整齐，防止过紧或过松，有明显的“区块感”。切忌混乱。②布局要充分表现其功能性，对于每个区域所代表的功能应有所区别。如：标题区，工作区，提示/帮助区等③页面中最重要的信息所在的模块将是在屏幕中最明显的位置上。并且，应该是最大的。④布局中的信息需要有明显的标志和简单介绍，比如标题栏和标题等。⑤信息的位置保证一致性，让用户可以无需重新建立对页面信息分布的理解。 ①表述的信息尽量口语化，不用或少用专业术语；②表述语