网页中的交互设计

网页中的交互设计从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。可用性指的是一个产品可以被特定的用户在特定的使用情况中，有效、高效并且满意得达成特定目标的程度有效性：有效性是指用户完成特定任务和达到特定目标时所具有的正确和完整度。高效性：高效性是指用户在完成特定任务和达到特定目标的容易程度和时间长短。满意度：满意度是指用户在使用软件产品过程中所感受到的主观满意度和接受程度。标准化：在进行与交互设计的相关工作，我们需要满足相关的标准和规范。可行性：在设计交互的过程中，应考虑到技术上是否可行。创新性：技术驱动创新交互设计所追求的既是可用性，这也是交互设计的目的所在.如何提高网页的可用性？一、操作入口明确二、可及三、适时帮助四、简洁清晰，自然易懂五、标签明晰、有效六、避免迷路七、深广度平衡八、别让我思考一、操作入口明确“操作入口明确”——网页任何一个功能都要有明确、合理的入口。“操作入口”——网页内部不同模块之间的转接元素，例如按钮控件、输入框、文字链等都属于操作入口；“明确”——入口的视觉感是清晰的、可识别的；“合理”——入口的出现是符合用户操作逻辑的，适时的。1、强化重点，弱化周边•即在视觉上将入口模块凸显出来，采用精妙的布局，并适当弱化周边的信息展示，加大二者的权重对比，客观上增加用户识别的准确性。•反面例子2、入口信息明确易识别•增加入口数量虽然在一定程度上有助于提高功能模块的使用率，但也存在致命的缺陷——入口信息不明确。因为“入口”等同于用户的“选择”，入口越多，选择越多，“过多的选择等于没有选择”，这势必会造成用户使用产品时的疑惑：这几个链接和按钮好像都一样啊，该选哪个呢？改版前：改版后：•eBay首页的注册区，通过按钮文字和辅助文本信息，新手用户也能够很清楚地了解眼前这两个Button代表的意义。所以，要根据页面本身的信息量严格控制同功能入口的数量，保证有效的识别性，让用户迅速找到正确的入口。3、根据用户定制合适的入口•交互设计离开用户研究便是闭门造车，在设计产品操作入口的同时，要充分考虑到不同用户的需求。•如：Html︱flash中文版︱英文版二、可及“可及”就是“信息可及”。具体解释为在网页设计过程中，应当考虑到特殊人群的使用状况，让这部分用户享受无障碍设计带来的便捷，在浏览，使用网页时能很顺畅的使用该网页所提供的相关资源。交互设计主要考虑的几种特殊人群：•色盲•肢体残疾•老人，儿童（5～12岁）•文盲•其他对信息使用不擅长的人可借鉴的设计方法：1.使用形状+色彩的信息提示•在使用设计元素时，要尽量使用形状+色彩的方式来表现信息，或者使用文字的提示。这样对于正常用户和对颜色识别有障碍的特殊用户，都不影响他们的识别。2.简化操作方式•无论是老人还是文盲对于网络产品的操作都有信心不足的情况，一个简便的操作方式，令他们快速实现目标，对于增长信心非常有帮助。对于肢体残疾人士，他们的困难在于使用交互输入设备，如鼠标和键盘比正常人更不容易，也需要简化操作方式。3.使用视觉、听觉，触觉等多元化的手法传达必要的资讯•对于重要的操作及信息提示可以使用语音提示来配合视觉样式来提示用户操作的状态。•比如在一些智能手机产品上，点击触摸屏数字键盘时，不但被选中的数字键的底色会发生变化，而且屏幕还有震动的触感提示。4.使用辅助性的工具•以目前的技术，语音识别可以解决部分单纯的输入问题，比如Windows7的语音指令功能，在操作者说出“打开Word”这句话时，电脑就可以自动启动该软件，也可以为视力不好的老年使用者逐字逐句地朗读电脑上显示的任意文章.谷歌手机中文语音搜索的界面•Windows7新的功能，叫做OSK，即屏幕键盘。不习惯使用键盘的人可以用鼠标来点这个屏幕键盘，肢体不是很方便的使用者，可以把屏幕键盘上的按键放大从而提高准确性；视力不好的老年使用者，可以把按键上的字放大，以便阅读。5.容易浏览及合理的信息架构•对于老年人来说，看互联网会觉得眼花，他们感觉所有的字都太小，不容易浏览。所以在设计时要考虑到，能切换到可以适合老年人查看的字体和网页样式。•百度推出的老年搜索•随着社会文明的提高，交互设计对特殊人群的关注度也越来越高，可及即无障碍设计的理念也越来越得到绝大多数设计师的提倡。•据联合国经济和社会事务部发表的研究报告，目前全球100家主要网站中只有3家能够满足残障人士的需要，这方面要走的路还有很长。三、适时帮助•在用户使用流程中，在需要的时候能及时地得到帮助；反之，在不需要帮助的时候,不要出现信息干扰。帮助“师者，所以传道授业解惑也”•传道：主要是理论上的帮助，告诉别人这是什么，主要指一些名词解释，规则说明等等。•授业：主要是操作上的帮助，告诉用户怎么作才能完成整个流程。很多当前操作提示，流程示意图等都属于这个范畴。•解惑：解惑主要是在用户迷惑不解的时候提供解决方案，比如对用户操作出错的建议，某分流程结束后的帮助提示等等。适时用户在什么时候需要帮助？•在用户第一次使用某产品功能的时候•在用户已经出错或者将要出错的时候•在用户遇到不明白的问题的时候我们怎样提供帮助？1.帮助信息明显，提示方式灵活google文档的新功能帮助信息2.及时反馈操作，防止用户出错；分析错误原因，给出合理建议。反面案例3.及时补充，信息完整QQ会员页面，在开通会员的大按钮下有一个“QQ会员是什么”的帮助信息，这个帮助就是为了让用户首先在理论上对QQ会员有一个认知。对用户不了解的信息给出了通往答案的道路。只有及时而不多余的帮助信息才能更好地帮助用户，从而完成一个具有“有效性”的交互设计。四、简洁清晰，自然易懂•信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。1.什么是“简洁清晰，自然易懂”•简洁清晰：使信息最简化“少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。•自然易懂：使用用户语言用户获取信息的方式多样，并且对信息的理解程度也各有不同，所以使用用户平时使用和理解的表达方式去传递信息，更可以被用户所接受。2.信息表述的种类与设计原则•在网页交互设计中，用于传达给用户以有效信息的方式有多种，其中包括：页面布局，交互文本，界面色彩，图像与图标，声音等。（1）页面布局界面中的信息布局，会直接影响用户获取信息的效率。所以，一般界面的布局因功能不同考虑的侧重点不同，并且会让用户有一种“区块感”，方便用户对信息的扫描性浏览。（2）交互文本交互文本指界面涉及交互操作中需要用户理解并反馈的所有的文字：包括标题、按钮文字、链接文字，对话框提示、各种提示信息、帮助等。这些文字直接影响用户在交互过程中对预期的理解，好的交互文本设计，可以提高用户完成任务的效率。①表述的信息尽量口语化，不用或少用专业术语②表述语气柔和、礼貌，避免使用被动语态，否定句等③简洁、清楚的表达，文字较多要适当断句，尽量避免左右滚屏④对于同种操作的交互文本，文字保持统一性⑤字体使用默认/标准的字体，大小以用户的视觉清晰分辨为主（3）界面色彩人眼一共约能区分一千万种颜色，所以用户与界面中颜色的关注度非常的高，有效的使用色彩区分信息的级别，分类等，有助于用户对信息和操作产生关联，有效减少用户的记忆负担。(4)图像图标相对于单纯的文本，图像以及符号化的图标更加符合用户的认知习惯。往往表述一种信息，一张图片或者一个标识更能让不同用户理解与接受。适当的使用图片与符号化的图标，会让用户很自然的建立起认知习惯。（5）声音在网页的交互设计中，用于声音的信息表述方式相对与视觉来说不是很多。一般应用于提示，提醒，帮助等信息的表述。此类信息表述让用户通过听觉获取反馈，更加的直接与有效。•对于不同的信息表述方式，我们都要求设计师在表达信息的时候做到简洁清晰，自然易懂，尽量让用户觉得这是自然而然，而且又是清晰明了的信息。就像小溪流水一样自然，就像军人命令一样明确。这样才会让用户快速，准确的完成任务。五、标签明晰、有效站在用户的角度，导航标签代表的是整个网站的内容、产品的结构，他们必须依靠标签的内容和组织方式来寻找网站中的信息。设计标签的过程，实际上就是对信息分类的过程，我们应当坚持MECE原则，也就是彼此独立、完全穷尽（MutallyExclusive,CollectivelyExhaustive）。这是一种客观的角度。你也可以站在主观的角度进行分类，但必须做到标准清晰、在目标群体中能获得充分共识。六、避免迷路•在网站上迷失方向，会带来许多负面影响，如：用户体验下降、任务不能完成，用户流失等。我们可以通过良好的导航系统来避免这个情况发生。为什么会迷路？1、当人们不能理解信息时，会产生迷惑2、人们在查询过程中迷失，不知道下一步该做什么3、人们可能会在网站中失去方向感，无法回到以前的页面，甚至是首页我们应该怎样做，才能保证用户不在网站中迷失？首先，我们要帮助用户定向，也就是确定“当前位置”1、重视网站的品牌信息2、细节创建情景3、面包屑4、逃生舱模式其次，根据用户需求，确定导航机制。七、深广度平衡在网站的信息架构中，有一种组织结构叫做树形结构：网站首页视为链接层级中第一级，与其有从属关系的页面视为链接层级中的第二级，一般称其为二级页面。通过二级页面又可以继续得到第三级页面，依此类推可以得到一个完整的树形链接结构。八、别让我思考•我在什么位置？•我该从哪里开始？•他们把××放在什么地方了？•这个页面上最重要的是什么？•为什么他们给它取这个名字？