“蓝雯”通过精心收集，向本站投稿了5篇关于网站易用性的全面解读交互设计，以下是小编帮大家整理后的关于网站易用性的全面解读交互设计，欢迎大家收藏分享。
篇1：关于网站易用性的全面解读交互设计
最近在3Wcoffee参加了一个“网站运营优化沙龙”活动，受到些“网站易用性”方面的小启发，于是乎继续发扬刨根问底和分享的精神，在博客里做个深入的小总结，
再解读网站易用性之前，我们首先说说网站的“用户体验”。
当一个网站呈现在用户面前时，无论它是属于什么类型，它都是一个“自助式”的产品。没有可以事先阅读的说明书，没有来自厂家的任何操作培训，也没有客服代表来帮助用户了解这个网站，用户所能依靠的只有自己的智慧和经验，来独立面对这个网站。所以说，在网站中，“用户体验”甚至比任何产品都更重要！
伴随着网站用户体验的关注度普遍上升，网站易用性建设（usability）已经不是一个新鲜的话题。
作为网站运营人员，一般都很清楚网站易用性在用户体验中的重要性，但运营结果却常常不令人满意，甚至造成用户使用网站的不畅。这最主要的原因并非运营人员的不重视，而更多是因为运营人员往往会沉溺于自己的思维习惯所致，而忽视了用户感受（体验）。
因此说，网站易用性这个课题不仅仅应是专业UI/UE人员需要研究的，对于网站运营人员更应该了解一定的方式方法去检验和提升网站的易用性。
什么是网站易用性？
引用维基百科上对易用性的解释：易用性（usability）是一种以使用者为中心的设计概念，易用性设计的重点在于让产品的设计能够符合使用者的习惯与需求。以因特网网站的设计为例，希望让使用者在浏览的过程中不会产生压力或感到挫折，并能让使用者在使用网站功能时，能用最少的努力发挥最大的效能，
简要来说，可以对“网站易用性”做如下理解：
1.易理解：单单凭观察，用户能否在几秒内就知道网站是做什么的，以及知道如何采取行动。
2.易操作：用户初次接触网站时，是否可以很轻松的完成任务，是否可不用帮助文档就能使用网站。
3.易学习：通过简单的帮助文件，用户能否顺利解决遇到的问题。
4.效率性：用户熟悉网站功能或界面后，是否可以快速完成任务。
5.出错率：在使用网站过程中，用户操作出现的错误有多少，这些错误有多严重，用户从错误中恢复是否容易。
6.满意度：用户使用这个网站（功能、设计等），是否有较高的满意度。
7.易分享：网站是否具备一键分享功能，便于用户分享信息。
概念清晰后，我们来看看提高网站易用性的方法。
简要来说，提高网站易用性可以从如下几点入手：
了解用户想要的，并让信息清晰可见。
知道用户可能有哪些疑问，并给予有效、真诚且全面的解答。如，可通过QA、在线客服来实现。
告诉用户用户想知道的，如，运费、送货周期、包装清单、购买流程、退换货流程等。
不向用户询问（索要）不必要的信息。如，当用户注册时，只要求用户填写姓名、地址、电话等必要信息即可，比如职业、性别等可不必要求，否则容易流失。
尽量减少步骤，并清晰告知。如，当用户下订单时，要尽量简化步骤（甚至可以支持不注册也可购买的功能），并要清晰告知用户完成订单需要几步（建议采用流程图的方式）。
让用户容易从错误中恢复。当用户出现错误操作时，请提供友好、清楚的方法让用户从错误中恢复。
对于如何提高网站的易用性，当然还有一个方法必不可少，那就是：测试。下一篇文章，我们重点说说“网站易用性测试”的方式方法，敬请关注。
篇2：网站易用性的设计技巧
伴随着对网站用户体验的关注度普遍上升，网站易用性建设(usability)已经不是一个新鲜的话题。欧美电子商务网站普遍重视网站易用性建设，已开始系统研究易用性思想。而国内领先、成功的网站也均重视网站用户体验，那么网站易用性的设计技巧有哪些呢?
给你的logo添加替代文本
这样有两个好处：屏幕阅读器能识别logo图片代表的含义，图片未加载到时，也能告诉非视障用户那里是你的logo。
添加基本的Landmarks
ARIA Landmark是W3C定义的一套网站可用性规则，对于网站不同的模块添加描述性的Landmark或者直接叫role，有利于读屏软件更好的理解你的网页，从而让视障用户更好的使用你的网站。
增强focus定义
其实很多网站会用尽一切办法去掉浏览器的:focus样式，特别是对于IE浏览器，其实，浏览器默认带上:focus样式是有道理的，它能指示用户当前的鼠标焦点位置是在哪里。这个对于键盘流特别重要。
所以请不要去掉:focus样式，甚至，你觉得默认的样式不好看或者不统一(IE是虚线框，Webkit是高亮的实线框，并且，Safari是蓝色，Chrome是橙色)也可以自己给定义一个高亮色：
a:focus{ outline:1px solid red; background:yellow;}
如果你的产品经理或者视觉设计师坚持要去掉focus状态的话，把TA的鼠标拿走一天并告诉TA只能用Tab切换链接就好了。。。
定义必填表单项
用aria-required属性可以定义表单中的必填项嗯，主要还是告诉读屏软件：
给你的页面添加一个h1
原因很简单，不只是有利于SEO，对网站整体的可用性和可读性都很有帮助。另外，你没有代码洁癖么?
定义表格的表头
通常很多人习惯表格全部使用td标签，其实，表格不止有hd标签，还有th、col、scope等。
所以简单来说，表头换成th标签吧：
Date
定义表格描述
不要简单的在表格前面/后面加个p了事了，表格有专用的caption标签可用，就像图片一样。
……Class Schedule
避免“点击此处”
虽然这样的链接描述对普通人都无所谓，但是对读屏软件来说，是相当糟糕的，它其实是对视障用户的一种干扰。
所以，直接把链接用到正地方吧。
去掉tabindex
曾经，很多人用tabindex来“增强”用户体验，但是这个属性却会打乱页面的正常阅读顺序，对视障用户是灾难性的，对普通用户也未必是友善的。
所以千万不要滥用tabindex属性。
[网站易用性的设计技巧]
篇3：网站导航设计浅析交互设计
一说到导航每个人都不陌生，如amazon的Tab式导航、网站地图、软件中的菜单导航、索引表等等，导航设计看上去非常的简单：无非是页面上放置一些链接，通过这些链接用户可浏览和使用整个网站。事实并非如此，导航设计是非常复杂和严谨的。 下面我们以网站导航为例粗浅的分析一下导航设计的复杂性：
任务：设计一个网站导航
目标：1、提供给用户方便的网页间跳转的方法
2、能够表达出页面之间、页面与内容之间的关系
分析：人本能的具有空间感。想象一下你现在坐在家中的沙发上看电视，突然有访客，你起身会向哪个方向走去？高中时的挚友是坐在你的前面还是后面？——不用问大家都能会快的回答出来。
同样我们在设计网站导航的时候一定要清晰地告诉访问者“他们在那哪儿”和“他们能去哪儿”
用户需要知道他们在网站信息空间当前所处的位置，我们也希望能帮助用户建立网站空间感，通过我们设计的导航系统。(之所以称为导航系统，是因为仅仅靠某一种导航模式是无法完成目标的)
设计方案：提供一个完整的导航系统，其中包括全局导航、局部导航、辅助导航、上下文导航、远程导航
全局导航：
从网站的最终页面到达其他页面的一组关键点，无论你想去哪里，都可以在全局导航中最终到达，
局部导航：
提供一个页面的父、兄、子级别的通路，是用户在网站信息空间中到附近地点的通路。局部导航的设计好坏会直接影响到整个导航系统的质量。
辅助导航：
提供了全局导航和局部导航不能快速到达的相关内容的快捷途径。用户转移浏览方向，而不需要从头开始。
上下文导航：
用户在阅读文本的时候，恰恰是他们需要上下文辅助信息的时候。准确的理解用户的需求，在他们阅读的时候提供一些链接(例如：文字链接)，要比用户使用搜索和全局导航更高效。上下文导航的示意图与辅助导航类似，这里就不再画了。
友好导航：
一些用户通常不会使用的链接，确实需要时又能快速有效的帮助用户。例如：联系信息、反馈表单和法律声明等。
远程导航：
独立方式存在的导航。如，网站地图：简明的、单页网站整体结构展示。在用户被你的其他导航搞得晕头转向时，很多时候他会选择网站地图。
通过上面这些导航的设计，可以看出一个完整的导航系统设计是非常复杂的和严谨的。
本文来自：导航设计浅析
篇4：网站交互设计:网站交互设计的几个原则
文章描述：网站首页需要和每一个下级页面保持一致的风格，导航都要放在屏幕的左上角，具有高度一致性的界面能给人清晰整洁的感觉，
一、力求一致性
例如网站首页需要和每一个下级页面保持一致的风格，导航都要放在屏幕的左上角，具有高度一致性的界面能给人清晰整洁的感觉。
二、允许频繁使用快捷键
快捷键表示产品使用的灵活性和有效性，想想每次我们使用搜索引擎的时候是鼠标点击的搜索还是按的回车？
三、提供明确的反馈
出现错误时要明确说出错误的含义，而且需要考虑用户能否理解，比如我们基本上都遇到过HTTP404错误，但绝大多数人能看懂么？
四、设计对话，告诉用户任务已完成
要在用户完成某项任务或操作后进行提示，
如果他们在做了很多操作后却得不到反馈，他们就无法知道自己是否达成目标。
五、提供错误预防和简单的纠错功能
例如把某些当前不能点击的按钮设置为灰色，在系统执行时让用户在确认一下。
六、应该方便用户取消某个操作
大多数的应用软件都有撤销和恢复的功能，如果用户总是惧怕一失足成千古恨，那样的用户体验可想而知。
七、用户应掌握控制权
一般而言用户希望自己去控制系统交互，在执行任务中，用户应该可以随时中止或退出，而不是无奈的看着系统继续。
八、减轻用户记忆负担
我们应该尽可能帮助用户避免要求他们记住各种信息，例如各个菜单项之间的逻辑关联，更好的分类就会帮助用户找出哪个功能按钮在什么地方。
篇5：一些网站设计原型图交互设计
看到了一些非常棒的网站产品的原型图设计，分享给大家看看，任何一个伟大的互联网产品设计都是从这些看似简单，粗糙的线框图开始的，
有时候用纸和笔来进行快速的创意描绘会得到更迅捷的成果，你可以在一个简单的模式中速写你的结构设计与交互细节，而后期还能够继续在此基础上迭代，直到形成最后的低保真原型，老外们叫这个过程为top-down process，
希望这些原型图可以帮助你迅速找到设计的灵感。
本文来自：lytous.ucdchina.com/?p=2013
