SCI论文（www.lunwensci.com）:
摘要：网页的视觉设计是伴随互联网产生而形成的视觉传达设计课题，本文将会介绍可用性设计原则的内涵与意义以及Web界面设计的视觉元素，并从用户的角度来探讨可用性设计原则在网站设计中的应用和发展趋势。
关键词：可用性设计；WEB界面设计；应用
Apply and Explore Usability Heuristics to WEB User Interface Design
ZHEN Xin
(College of Art and Design,Zhejiang Sci-Tech University,Hangzhou Zhejiang 310018)
【Abstract】：The visual design of Website is a design subject for visual transmission that is generated with the emergence of the Internet.The paper is an introduction for the connotation,significance of usability design principles as well as the visual elements of Web user interface design:Discuss the application and development trend of usability heuristics design for the website interface design in regard to the view of users.
【Key words】：usability heuristics;WEB user interface design;application
0前言
Web（万维网）的迅速发展为世界通信领域提供了史无前例的便捷渠道，并且深刻改变着我们生活的各个方面。在信息和服务不断发展的新时代，网页的数目也在以爆炸式的速度急速增加。面对当前十分复杂的环境，人机交互过程中界面的可用性是用户使用的体验感主要评价指标。据Jakob Nielsen研究发现[1]，网站的设计上普遍存在着不同程度的可用性问题，而当用户首次访问一个网站产生较差的体验感时，将近会有40%的用户选择不再进行访问。由此可见，想要提高网页的体验感[2]，就需要找出克服和验证可用性问题的方法，设计出具有较高可用性的网页，本论文分研究意义在于为WEB界面设计者提供一个简单有效的网站设计应用方法，通过应用可用性设计原则提高网页界面的体验感。
1可用性
1.1可用性的概念
“可用性Usability”是指我们可以访问/使用产品或网站上的难易程度。WEB界面设计的可用性影响着用户在网站完成任务是否有效、完成效率和整个流程的满意度。了解如何衡量一个WEB界面设计的可用性可以帮助我们为用户创造一个更加良好的浏览体验。
随着数字产品形态的发展和升级，可用性（Usability）在1990年的早期去掉了“用户友好（User friendly）”过时的标签。从这时起当在我们使用“可用性”一词时并且寻找其定义的时候遇到了困难。因为时代的发展，当网站提供信息数字化服务，也称为一种“产品”的时候，产品的“可用性”不再是仅仅单纯考虑产品的外观（即这个产品是否是一个符合人体工程学的产品），或者这个产品是否满足了功能性的需要，而是从用户的角度来看，用户在使用过程中的心理感受，是满意还是沮丧的完成使用的体验。
1.2可用性设计原则
ISO/IEC 25010:2011软件质量模型是由国际标准化组织（International Standard Organization，ISO）提出的评价软件质量的国际标准[3]。这个标准从8个维度来评价软件质量。在可用性（Usability）方面，就提及到了产品的设计需要满足适当性与可识别性（Appropriateness recognizably）可操作性（Operability）用户界面美学（Userinterfaceaesthetics以及无障碍（Accessibility）[4]。
设计一款可用性好的网站，可能要综合在不同的使用环境背景下，网页的设计能够体现出产品的特征属性。为了保证用户能够无障碍使用网站的界面，那就有必要通过对用户使用时的操作表现和满意度做出测量，来验证WEB界面设计的可用性。
从用户、任务特点和使用背景这三者之间的交互复杂性的角度看[5]，可用性的测量就显得尤为的重要，毕竟即使是相同的网页，在完成不同的任务目标时，其可用性也可能存在明显的差距。设计的本身并没有可用和不可用一说；但是WEB界面设计的功能是否匹配用户的需要以及满足用户完成目标任务的环境决定了这个WEB界面设计的可用性程度。
2适当性和可识别性
哥本哈根的丹麦技术大学人机互动博士[6]，Jakob Nielsen在1995发表的《十大可用性原则》提到“Match between system and the real world（匹配系统与真实世界）”。网站设计的环境要与用户贴切，即网页的外在表现和表述[7]，需要尽可能的贴近用户所处的环境（年龄、学历、文化、时代背景），而不要使用系统术语。在进行设计时需要遵循现实世界的习惯让信息的展现更契合人们在自然情况下原始的思考逻辑。
（1）根据使用背景来制定产品语言在进行WEB界面设计时，要了解网站设计的用户人群，使用相对应的用户群体所熟悉的文字语言、图形语言、板式结构和配色手法。
（2）创造模拟真实的环境产品可以通过模仿真实环境的外观以及行为。例如除了静态的外在形象模仿，还可以通过模拟真实物品的动态效果和声音给用户创造出良好的使用体验。
3用户界面美学
通过WEB界面设计分析用户的表现和关注点很重要，我们可以通过一些设计原则和标准提高WEB界面设计的界面美感，比方说在尺寸、菜单布局等方面。影响用户体验的视觉因素往往是设计师最能控制的一些元素，在控制网页的界面设计中需要遵守一下几点来保证WEB界面设计的优美且简约。
3.1界面清晰的板块划分
（1）字体的大小与颜色选择一些便于识别的字体。选择足以让使用者轻松阅读和高对比度背景以及字体大小。如果你的某些用户群年龄较大或有视觉障碍，尝试增大字号。
（2）标题栏―通过使用标题，子标题等我们可以将内容组织模块化，这就意味着设计师需要统一标准，使得整个网站上一致地显示每种标题，从而确保用户在网页浏览时获得一致的体验。
（3）段落―使段落更加清晰易于辨别，能够有助于防止用户被“文字墙”淹没。可以使用格式塔原理应用于段落以便于更好说明内容之间的层级关系。
例如图1之中某环保社区的网站设计上使用了数字作为设计布局的一部分，这种方式提升了用户对重要数据的关注度。
对于用户而言，在进行长篇大论的文本的阅读性是存在困难的，而结构化的文本布局设计在这方面就强了许多。
在进行版式设计的时候，需要考虑到即使文本的内容不多，也需要分段清晰，那么带有明确主题总结的小标题总能让用户能够立刻抓住段落的核心信息，不至于在阅读走神的时候，找不到内容。
使用成体系的小标题系统对于使用屏幕阅读器的视力障碍用户而言，也更加一目了然，让人们能够更加快速地定位到不同的内容。如图2所示，想要更好契合屏幕阅读器的使用，标题和正文之间一定要通过不同的标签区分开，这样才会发挥作用。同样的，标题除了具有总结性之外，最好也使用表述性的语句，方便用户理解内容的功能，保证标题和内容的相关度足够高。例如图3 Bang2Joom将付费计划漂亮地视觉化的例子。用户可以一目了然地对比出不同的付费计划的差异，选择匹配自己的套餐，整个界面十分清晰和简单。
3.2色彩设计的组织性
WEB界面设计的颜色必须有组织性，来方便传达网站形象以及展现审美上的吸引力，另外，他们必须具备可读性，通常设计师会应用不同的颜色来传达信息的层次结构。例如图4所示的某幼儿园的登陆界面，设计师通过俏皮和强烈的撞色来区分不一样区块，通过高明度、高纯度的色彩对比让所有的信息能更清晰的展示出来。
根据W3C的规定，高于4.5:1的色彩对比度，能够带来更清晰的轮廓，更加便于用户分辨不同的元素和控件的边界。确保色彩对比度正确的工具有很多（如图5），比如WebAIM这款色彩对比检测工具。视力较差、色盲、对比度敏感度较低的用户在阅读和查看低色彩对比度内容的时候，会明显感觉到更多的困难。提高对比度对于降低视觉疲劳有直接的效果。
3.3网页的品牌化
品牌化，特别指公司的标志，帮助用户知道他在线上的位置并建立记忆点。基于眼部基本的运动模式，网页的左上角是放置标志最为理想的位置，这个位置是大部分有从左到右阅读习惯的用户最初浏览网站会最先观察到的位置。强化品牌设计是提升网站气质和特色的有效设计方式。如果网站品牌自身有识别系统或者风格系统，那么我们可以合理的运用加上适当的优化。（图6）例：HeadOfffice的界面所采用的特色字体在这个网站的设计上，可以正好体现出网站充沛而富有激情的特征。
3.4背景色的设计
数字界面中背景颜色对阅读和区分交互元素和内容的能力有很大的影响。错误的背景方案可能会导致界面的可用性，进而导致用户体验不佳；用户无法浏览数据，甚至更多。（图7）Travel Planner应用使用浅色的背景，这样的话用户即使在旅途中也便于阅读文字内容。
对于深色模式的控制，Twitter和其他的平台略有一点不同（图8）。他们在原有的亮色、和深色模式下所设计的深色模式包括「昏暗（Dim）」和「熄灯（Light out）」两种，前者的背景色是深灰，而后者则几乎是全黑。这告诉我们在进行WEB界面设计时多数的状况不能简单用一刀切的方式来解决。推特通过对四种背景模式设计来提升整个产品在视觉效果上的可用性。
4无障碍的设计
无论是硬件、位置、年龄、语言或能力如何，访问互联网几乎改变了我们生活的方方面面。然而，并不是每个人都以他们应有的方式体验数字世界。无障碍WEB界面设计和开发的概念可以确保各种能力的人都可以轻松地在线访问。
无障碍设计（Accessibility）法则的定义是：“一个好的产品设计不需要特别调整和修改，就能很好地服务于各种有需求的用户”。无障碍设计是保证任何人在任何情况下都能平等地、方便地、无障碍地获取信息和使用信息。优秀的无障碍设计，不仅能让特殊群体（低视力、听力障碍、认知障碍和运动障碍）正常地与产品交互；还会为所有人提供更好的使用体验。
满足无障碍设计需要具备的四大要素：易读性、易操作性、简易性、容错性。
4.1易读性
易读性是指使用者在感官能力上存在不同差别下，保证设计的内容是可以被所有使用者所理解的，这就需要设计师通过添加线索，引导用户发现网站的功能和使用方法。通过多种不通的标注设计来呈现信息（例如文字、icon、图像）。
对视障用户来说，是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛，它的原理是直接读出界面里的文字，如果icon按钮未加无障碍标签读屏会读为“无法发音”，那么视障者就无法获取这些信息，自然也就无法使用你设计的功能。
4.2易操作性
易操作性是指无论用户的身体状态如何，都可以顺利的使用设计并完成想要达到的目标任务。例如通过导航栏的设计，最大限度的减少用户的重复性操作和不必要的体力消耗；例如可以为导航和方向创建一致的提示。一致性可以确保用户在使用辅助设备时顺利的从一个页面跳转到另一个页面[8]。为了最大的满足用户对网站的需求，他们需要尽快并且轻松地从A点（入口点）到达B点（想要的位置）。这就意味设计师需要提供有用的导航栏，包括搜索栏的设计也是为了满足这个需要，同时导航栏在每个页面上的格式与位置需要是一致的。
4.3简易性
简易性，在网站设计的过程之中简化流程和保证提示的数量。通过减去一些不必要的复杂装饰设计，降低访客的学习成本理解该产品的使用方法。采用清楚明了、持续统一的提示符号和操作信息来标注操作方式并且循序渐进地说明和标注相关信息和操作方式来减去一些无关的信息干扰。
（1）颜色的对比以满足法律无障碍要求，网页需要4.5:1或更高的对比度（例如，黑白的对比度为21:1）。否则，有视觉障碍的人可能难以区分文本和背景。
（2）清晰可辨的链接为了提高效率，通过设计“点击这里”或“阅读更多”来清楚标识用户所在的位置以及对未来动作的简短说明，来保证每一个人都以轻易的完成操作任务。
4.4容错性
容错性，是指当用户操作错误时以及其导致的最小化后果的设计。在设计支付流程和删除功能时需要提示用户确认提高容错性的基本方式如下：（1）用健全的功
能可见性和可操作性来预防差错的发生；（2）通过预设确认和警告的提示来预防差错的发生；（3）通过加入设计的自正性（设计自我调整）的操作功能和安全，最大化的降低或避免因错误所引发的后果。
5 WEB界面设计的可用性测试评估
可用性直接关系着网站界面的设计是否能满足用户功能性的需要。可用性的测试是在网站或网站设计原型阶段实施并通过观察或访谈的方法，发现其存在的问题，来为设计的迭代改进提供依据。
网站设计的可用性需要考量的主要内容：适当性与可识别性，用户界面美学和无障碍设计。通过上述研究，归纳出可用性设计原则在WEB界面设计中的具体应用方法是：考虑设计的适当性和可识别性并通过划分板块、有组织性的色彩设计、网页的品牌化以及背景色的设计来满足用户界面在表现层的基础需求，同时在页面设计上通过对易读性、易操作性、简易性、容错性的考量满足无障碍设计要求。
最后，Web界面设计中可用性原则是以其是否实现用户目标为标准[9]，同时设计师需要注意网站设计的目标与用户任务目标是统一的，无论是“以人为中心的设计”还是“以活动为中心”都是在“以目标为导向”为目的对Web界面的设计进行更新迭代。
参考文献
[1]Jakob N.Designing Web Usability:The practice of Simplicity[M].Indianapolis,New Riders.2000.
[2]鄢沛,郭皎,应宏.Web可用性设计方法研究[J].重庆三峡学院学报,2010(03):72-75.
[3]J.Nielse.Usability engineering[M].Academic Press,San Diego.1993.
[4]赵伟.基于可用性的WEB用户界面视觉设计研究[D].天津:天津工业大学,2009.
[5]马鹏.基于用户体验的产品设计方案研究医疗器械软件界面设计初探[D].上海:东华大学,2009.
[6]Jakob Nielsen.Nielsen 10 Usability Heuristics for User Interface Design[M].Usability Inspection Methods,John Wiley&Sons.1994.
[7]许芯.隐喻设计在图形用户界面中的可用性研究[D].杭州:浙江工商大学,2011.
[8]戴仕明,杨雪.论网页的设计思路[J].江西农业大学学报,2001(05):28-31.
[9]黄未之.WEB界面设计语义及可用性研究[D].上海:东华大学,2007.
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！
文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/jisuanjilunwen/37223.html
