当前位置:厦门网站建设 > 网站设计 > 网页设计入门:网页制作入门教程

网页设计入门:网页制作入门教程

厦门网站建设
2018-03-12 阅读 专题:

设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计。为了简化这个过程,我们准备了这个网页设计入门指南教程。

网页设计入门

本文将重点介绍创建出色用户体验的主要原则、方法和具有启发性的案例;从用户体验地图等整体结构开始,到单个页面的设计;还将介绍网页设计中其他重要的方面,例如移动端适配和测试。


(注:网页设计入门教程视频)

目录(加粗部分为本文内容)

一、设计用户体验地图

1.1 信息架构 1.2 全局导航 1.3 链接和导航选项 1.4 浏览器的返回键 1.5 面包屑式导航 1.6 搜索

二、页面设计

三、移动端适配

四、无障碍设计

五、测试

六、开发交接

七、总结

一、设计用户体验地图 1.1 信息架构

人们经常将网站上的内容列表作为“信息架构”。不对, 虽然它是信息架构的一部分,但它们只是其中的一个方面。

信息架构是以一种清晰和合乎逻辑的方式组织信息。信息架构有一个明确的目的:帮助用户浏览一组复杂的信息。好的信息架构会创建一个符合用户期望的层次结构。但良好的内容层级和直观的导航并不容易,需要通过用户研究和测试才能实现。

有很多方法可以研究用户需求。通常情况下,信息架构师会采用用户访谈或卡片分类的方式来获知用户的期望,或者找出潜在用户是如何进行信息分类。信息架构师还需要了解可用性测试的结果,以便查看是否能够高效导航。

网页设计入门

卡片分类是一种简单的方法,可以根据用户信息找出内容分类的最佳方式。信息架构师喜欢卡片分类的原因之一就是能清晰地得到架构模式。(Image credit: FosterMilo)

对用户访谈的结果进行分类,然后检验卡片分类是否满足用户的心理模型。UX还会使用“Tree Testing”的方法来检验它的作用。信息架构要在设计具体页面之前完成。

网页设计入门

e Tesg是一种确定用户是否能够通过所提议的信息结构解决需求的可靠方法。(Image credit: Nielsen Norman Group)

1.2 全局导航

导航是可用性的基石。如果用户在网站迷失了方向,那你的网站内容有多好也无用。因此网站的导航应该遵循几个原则:

简单的导航。导航应该让用户以最少点击的方式来访问期望内容。 清晰。不应该让用户猜测导航选项的意义;每个导航选项都应该是明确的。 一致性:导航系统对网站上的所有页面都应该是一致的。

在设计导航时需要考虑的一些事情:

根据用户的需求选择导航模式。导航应该满足大多数用户的大多数需求。若目标群体期望与网站进行某种类型的互动,那么就满足他们的期望。例如,如果大多数用户不熟悉图标的含义,请避免使用汉堡菜单导航。 设置优先的导航选项。对导航选项进行优先排序的一种简单方法——将不同的优先级选项分配给用户测试,然后将高优先级和频繁使用的路径在导航中突出。 导航要一直可见。正如Jakob Nielsen说,见到什么比记得什么更容易。通过让所有重要的导航选项可见,可以最小化用户的记忆作用。最重要的导航选项应该随时可见可用,而不只是当我们期望用户使用它们时才可见。 显示当前位置。“我在哪里?“这是一个基本问题,用户需要一个答案,以便有效地导航。不显示当前位置是许多网站常见的问题。 1.3 链接和导航选项

链接和导航选项是导航过程中的关键因素,直接影响用户的体验。遵循这些交互元素的规则:

认识内部和外部链接的区别。用户期望内部和外部链接有不同的行为。所有内部链接应该在同一个标签页中打开(这样,用户就可以使用“后退”按钮)。如果想在新标签页中打开外部链接,则应在打开之前告知用户,比如添加一段文本到链接文本中,显示“(在新标签页中打开)”。 更改访问链接的颜色。当已访问的链接不改变颜色时,用户可能无意中重新访问同一页面。让用户知道哪些链接已访问过,避免无意中重新访问。

网页设计入门

检查所有链接。点击链接后获得一个错误页面,会损害用户体验。当访问者正在搜索内容,他们希望每个链接都应该时准确有效,而不是404页面或他们不希望看到的页面。

网页设计入门

1.4 浏览器的返回键

“后退”按钮可能是浏览器中使用率第二高的按键(在输入地址之后)。确保“后退”按钮按用户期望运行。当用户访问页面上的链接,然后单击“后退”按钮时,他们希望返回到原始页面上的退出位置。避免点击“后退”将用户带到原始页面的顶部,而不是在页面关闭的地方。如此一来,用户需要滚动他们已经看过的内容,用户会因为没有合适的“返回位置”功能而感到失望。

1.5 面包屑式

面包屑式导航是一组上下文链接,可以辅助网站导航。这是一个次要导航方案,通常显示用户在网站上的位置。

虽然这个元素不需要很多解释,但有几件事值得一提:

不要用来作为主要导航方案。主导航应该导航选项引导用户,而面包屑是用户引导导航选项。将面包屑导航作为主要方法,而不是辅助的功能,通常会是一个失败的导航。 使用箭头作为分隔符,而不是斜杠(/)。为了清晰分开每一层,推荐(>)或(→),因为这些符号的指向能辅助用户理解。斜杠(/)不建议作为电子商务网站的分隔符。如果您打算使用它,请确保产品类别将不会采用斜线:

网页设计入门

对于上面的类别,面包屑导航区分不同的层级是比较难的。

1.6 搜索

有些用户来到一个网站寻找某个特定的内容。他们不会想使用导航选项。他们希望在搜索框中输入文本,提交他们的搜索请求,然后找到他们要找的页面内容。

在设计搜索框时要考虑到这些基本规则:

把搜索框放在用户期望找到它的地方。下面的图表是基于A. Dawn Shaikh和Keisi Lenz研究。根据对142名参与者的调查,搜索框的用户预期位置。研究发现,最便捷的位置是网页的左上角或右上角。用户使用F形浏览模式,可以很容易地找到搜索框。

网页设计入门

在内容丰富的网站上,搜索框一定要醒目。如果搜索是网站的一个重要功能,那么就突出显示它,因为它能降低用户发现的难度。 输入框的大小要合适。搜索框输入区域太短是设计中常见的错误。当然,用户可以在短字段中输入一个长查询,但只有部分文本可见,可用性不好,因为无法立即看到整个查询。事实上,当搜索框太短时,用户被迫使用短的、不精确的查询。Nielsen Norman Group建议 27字符长度,这能覆盖90%的查询。

网页设计入门

将搜索框加到每个页面。在每个页面上显示搜索框,因为不管用户处在网站上的哪个页面,当他们不能导航到正在寻找的内容,他们会尝试使用搜索。

二、设计页面

2.1 内容策略 2.2 页面结构 2.3 视觉层次 2.4 滚动操作 2.5 内容加载 2.6 按钮 2.7 图像化 2.8 视频 2.9 行为响应按钮 2.10 网页表单 2.11 交互动画 二、设计页面 2.1 内容策略

内容策略最重要的一点就是聚焦在页面目标上。理解页面的目标,并根据目标安排内容。

下面是一些提高用户对内容理解的实用技巧:

防止信息超载。信息超载是一个严重的问题。用户觉得有太多信息需消化,从而无法下决定或采取行动。有一些简单的方法能最小化信息超载。一个常用的方法就是分块——将内容分成几个模块,帮助用户更好的理解和处理。结账单就是最好的例子。每次最多显示五到七个输入字段,将结帐单拆分到多个页面,必要时才逐步公开字段。

网页设计入门

(Image credit: Witteia)

避免行话和行业术语。页面上出现的每个未知术语或短语都会增加用户的认知负荷。一个安全的方式就是为所有读者编辑内容,并选择所有用户都清楚易懂的词。 最大限度地减少长内容。根据信息过载的观点,如果网站不是以信息消费为主,尽量避免长文本块。 例如,如果您需要提供有关服务或产品的详细信息,请尝试逐步展开详细信息。 将文本块写的短一些,更方便理解。根据罗伯特·盖宁(Robert Gunning)的“How to Take the Fog Out of Business Writing”这本书,为了舒适的阅读,大多数的句子应该是20个字以内。

网页设计入门

(Image credit: The Daily Rind)

避免所有字母采用大写。全部大写的文本(也就是所有字母都是大写的文本)对于字符量较少的文本是可以的,比如缩略词和图标;但是,请避免在字符量比较大的地方使用(例如段落,表格标签,错误,通知)。正如Miles Tinker在“Legibility of Print”一书中提到的,全部大写会降低阅读速度。另外,大多数读者会觉得全部大写的文本不能快速清晰的理解。

网页设计入门

全部采用大写,用户比较难以理解。

2.2 页面结构

一个结构合理的页面清楚地显示了每个用户界面元素位于布局中的位置。虽然没有一个适合所有页面的规则,但是有一些指导性原则可以帮助你创建一个坚固的结构:

使结构可预测。使您的设计符合用户期望。可以参考同类网站来找出在页面上需要哪些元素以及位置。使用目标用户熟悉的模式。 使用布局网格。布局网格将页面划分为几块主要区域,并根据大小和位置定义区域之间的关系。在网格的帮助下,能更轻松地将不同部分组合在一起,形成一个有凝聚力的页面。

网页设计入门

网格和布局是设计的一部分,且能适应不同屏幕尺寸的设计场景。Adobe XD的布局网格使设计人员能够针对不同的屏幕尺寸实现一致设计及管理网格中元素之间的比例。

使用低保真线框模拟,避免界面杂乱不清晰。混乱会增加理解的难度——每添加一个按钮,图像或文本都会使页面更加复杂。在用真实元素构建页面之前,先创建一个线框图,分析它,然后去掉那些不是绝对必要的东西。

网页设计入门

Adobe XD中创建的低保真线框图(Image credit: Tim Hykes)

2.3 视觉层次

人们大多数情况是快速浏览网页,而不是阅读所有内容。 因此,如果访客想要查找内容或完成任务,他们将快速浏览网页、找到需要的地方。作为一名设计师,你应该通过设计良好的视觉层次来帮助他们。视觉层次是指以重要性(即应该首先关注哪些、再关注哪些等等)呈现元素。一个适当的视觉层次结构可以让用户更快速地浏览页面。

使用自然的浏览模式。 作为设计师,我们可以控制人们浏览页面的时,关注的位置。为了给访问者的眼睛设定合适的浏览路径,我们可以使用两种模式:F形模式 和Z形图案。对于重文本的页面(如文章和搜索结果),F模式更好,而Z模式适用于不以文字为中心的页面。

网页设计入门

CNN采用的F形模式

网页设计入门

Basecamp采用的Z形模式

优先考虑重要元素。要让页面标题,登录表单,导航选项和其他重要内容成为视觉焦点,以便游客立即看到它们。

网页设计入门

“Learn More About Brains” 按钮就是视觉焦点。

创建模型来阐明视觉层次结构。当拥有真实数据后,设计原型能够看到真实页面。在原型中重新排列元素要比技术人员开发网页时更方便,如此来避免开发过程中再修改。

网页设计入门

使用Adobe XD创建的原型。(Image credit: Coursetro)

2.4 滚动操作

网页设计师中流传着一个谎言——用户不会使用滚动。重申:今天,每一个人都在使用滚动!

用户进行滚动操作时,提升用户体验的一些提示:

鼓励用户滚动。 尽管页面加载后人们通常会开始滚动。但页面顶部的内容仍然非常重要。顶部的内容给观众带来了第一印象和期待。只有在内容有吸引力的时候,用户才会进行滚动。因此,把你最引人注目的内容放在页面顶部: 提供一个优秀的介绍。 一个优秀的介绍为内容铺设了背景,并回答了用户的问题:“这个网页是关于什么的? 使用有吸引力的图像。 用户会密切关注包含相关信息的图像。 坚持导航。当您创建冗长的页面时,请记住用户仍然需要方向感(当前位置)和导航(其他可能的路径)。长页面可能会出现导航问题;如果顶部导航栏在用户向下滚动时不可见,则当他们在页面底部时,他们将不得不一直向上滚动。最简单的解决方案是悬浮菜单——显示当前位置,并一直悬浮在页面中。

滚动后的导航 (Image: Zenman)

加载新内容时提供视觉反馈。 这对于动态加载内容的网页尤为重要(如新闻)。由于滚动过程中的内容加载是快速的(基本都在2到10秒),你可以使用循环动画来表示系统正在工作。

网页设计入门

加载动画(如Tumblr的加载指示器)告诉用户正在加载更多的内容。

不要劫持滚动(即不要将滚动操作限定死)。劫持滚动是最恼人的事情之一,因为它将控制权从用户手中带走,并使滚动行为完全不可预知。 当你设计一个网站,应该让用户控制他们的浏览行为。

网页设计入门

Tumbler登录页面劫持了滚动操作。滚动的页面时固定的,而不是自由的。

2.5 内容加载

内容加载值得进一步强调。即时响应是最好的,但有时候你的网站需要更多的时间向访问者传递内容。一个糟糕的网络连接可能导致一个缓慢的反应,或者一个操作可能需要更长的时间才能完成。但是不管原因是什么,你的网站都应该快速加载。

确保常规加载不需要很长时间。网民的注意力和耐心是非常低的。根据Nielsen Norman Group research,用户保持注意力的极限是10秒。当访问者不得不等待一个网站加载,如果网站加载速度不够快,他们会感到沮丧并可能离开。如果加载时间过长,即使设计了最漂亮的加载指示,用户仍然会离开。 加载过程中使用Skeleton Screens。许多网站使用进度指示器显示数据正在加载。虽然进度指标背后的意图是好的(提供视觉反馈),但结果可能是负面的。正如Luke Wroblewski所述,“按照定义,进度指标是对有人需要等待的响应。这就像看着时钟滴答下来 – 当你这样做,时间似乎变慢。”有一个很好的替代进展指标:Skeleton Screens。这些容器本质上是一个暂时空白的页面版本,信息逐渐加载到容器中。设计师可以使用Skeleton Screens将用户的注意力集中在实际进展上,并为即将到来的事物预测。这意味着事情正在立即发生,因为信息在屏幕上逐渐显示,人们看到网站在等待的时候正在采取行动。

网页设计入门

当内容被加载时,Facebook使用Skeleton Screens来填充UI。

2.6 按钮

按钮对于创建流畅的交互流程至关重要。 这有一些地方值得关注:

确保可点击的元素看起来像可点击的。使用按钮和其他交互元素,考虑如何传递可用性信息。用户是如何将元素理解为一个按钮?表单应该遵循以下功能:元素的表现形式要传递使用方式。看起来像链接或按钮但不可点击的可视元素(如带有下划线的单词不是链接或具有矩形背景但不是按钮的元素)会让用户懵逼。

网页设计入门

左上角的橙色框是按钮吗? 不,但形状和标签文本使其看起来像一个按钮。

标签按钮要符合用户的期望。可操作的界面元素上的文本标签应该与实际作用相关联。如果用户明白按钮的作用,用户使用起来会更舒适。像下面例子中的“提交”的文本标签(Awesome!),这样的模糊标签不能让用户快速明白按钮的作用。

网页设计入门

不要让用户对按钮的作用困惑。(Image credit: UX Matters)

遵循一致的按钮规范。无论是否有意识,用户都会记住网站细节。浏览网站时,他们会将特定形状与按钮功能联系起来。因此,一致性不仅有利于设计的美观,而且增强了用户的熟悉感。下面的图片完美地说明了这一点。 在应用程序的一部分(如系统工具栏)中使用三种不同的形状不仅令人困惑,而且糟糕。

网页设计入门

保持一致。

2.7 图像化

一张图片胜过千言万语。人类是视觉生物,几乎能立即处理完视觉信息;我们所感知并被传达到大脑的90%信息是可视化的。图像是捕捉用户注意力并区分产品的有效方式。与一段精心设计的文本相比,图像更能被浏览者接收。此外,图像能跨语言障碍。

以下原则,可以帮助您将图像应用到网页中:

确保图像是相关的。设计中最大的危险之一是图像传达了错误信息。选择最符合您的产品目标的图像,并确保它们与上下文相关。

网页设计入门

与主题无关的图像会使用户困惑。

避免通用的人物照。在设计中使用人脸是吸引用户的有效方式。看到别人的脸能让观众觉得与他们联系在一起,而不仅仅是在销售产品。然而,许多企业网站使用通用的照片来建立信任感是非常糟糕的。可用性测试表明,这样的照片不会增加设计的价值,更是经常损害用户体验。

网页设计入门

不真实的图像给用户带来一种虚伪的感觉。

使用高质量、不失焦的资源。网站使用资源的质量会对用户印象和对服务的期望产生巨大的影响。此外,确保图像大小适合在各平台显示。图像不应该出现像素化,因此要测试各种比例和分辨率大小。要以原始高宽比显示图像。

网页设计入门

同尺寸不同质量的照片 (Image credit: Adobe)

2.8 视频

随着网速的提高,视频正变得越来越流行,特别是它们延长了用户在网站的时间。今天,视频无处不在。 我们在台式机,平板电脑和手机上观看视频。当有效地使用视频时,能非常有效的吸引用户 – 它传递更多的情感,真正给人一种产品或服务的感觉。

将音频设置为默认关闭。当用户到达一个页面,不会希望它发出任何声音。大多数用户不会使用耳机,这种情况下,他们需要快速关闭声音,会受到压力。而大多数情况下,用户会离开网站。

网页设计入门

Facebook的视频会在用户进入时自动播放,但默认不会播放声音。

促销视频尽可能短。根据D-Mak Productions的研究,短片对大多数用户更有吸引力。因此,将商业视频保持在两到三分钟的范围内。

网页设计入门

(Image credit: Dmakproductions)

提供另一种内容的展示方式。如果视频是消费内容的唯一方式,那么看不懂或听不明白的人则无法获取内容。为了用户更便捷获取内容,提供字幕和完整的视频。

网页设计入门

字幕和视频将使内容更容易获取。(Image credit: TED)

2.9 Call-to-Action(CTA)按钮

Call-to-Action(CTA)是指引导用户实现预期目标的按钮。 CTA的重点在于引导用户进行我们所期望的行动。 一些常见的CTA的例子是:

“Start a trial” “Download the book” “Sign up for updates” “Get a consultation”

设计CTA按钮时需要考虑以下几点:

CTA应该足够大,稍远距离也能看见;但不能太大。要确认CTA是不是页面上最显著的元素,请尝试五秒钟的测试:浏览网页五秒钟,然后记录您记得的内容。 如果CTA在清单上,它的大小适当! 在视觉上突出。CTA的颜色是引起用户注意的重要因素。通过颜色,可以让某些按钮比其他按钮更突出,更具视觉冲击力。对比色非常适合用于CTA,使其更加醒目。

网页设计入门

火狐网站上绿色的CTA非常醒目,能马上得到用户关注。

负空间。CTA周围的空间也很重要。白色(或消极色)空间为了按钮创建了留白空间,将按钮与界面中的其他元素分割开。

网页设计入门

以前的Dropbox主页有一个很好的例子,使用负空间来创建主CTA。蓝色的“免费注册”CTA与背景的淡蓝色相映成辉。

面向行动的文本。为按钮编写文本,推动用户采取行动。从使用“开始”,“获取”或“加入”等动词开始。

网页设计入门

Evernote为CTA提供了最常见且有效的文本。

提示:您可以通过模糊效果快速测试CTA。模糊测试是确定用户的眼睛是否会到达您想要的位置的便捷方法。将网页截图在Adobe XD中应用模糊效果(请参阅下面的示例)。看看页面的模糊版本,哪些元素会脱颖而出?如果您不是正在预测的内容,那就修改。

网页设计入门

模糊测试是一种检验设计焦点和视觉层次的技术。

2.10 网页表单

填写表单仍然是网页最重要的互动类型之一。事实上,表单通常被认为是完成目标的最后一步。用户在填写表单时,应该避免出现困惑、尽快完成表单。表单就像一个对话,双方之间(用户和网站)应该有逻辑的沟通。

只留需要的。只要求填写真正需要的东西。添加到表单的每个额外字段都将影响转换率。总之想清楚为什么需要这些信息,以及将如何使用它。 按照逻辑顺序排列表单。问题应该按照用户逻辑而不是按应用或数据库的逻辑来提出。例如,在名字之前询问地址是不正确的。 将相关信息集合在一起。将相关信息按逻辑进行分组。从一组问题到下一组问题的流程更像一个对话。且将相关字段分组在一起还有助于用户理解信息。

网页设计入门

将相关信息集合在一起。(Image: Nielsen Norman Group)

2.11 动画

越来越多的设计师将动画作为功能元素来加强用户体验。动画不只是为了乐趣,它是提高交互效率的重要方式之一。但是,动画只有在合适的时间和位置才能提高用户体验。好的交互动画有一个目标:它是有意义、有作用的。

以下是动画增强用户体验的一些场景:

对用户行为的视觉反馈。良好的交互设计应该提高视觉反馈。当您需要告知用户操作的结果时,视觉反馈是有帮助的。如果操作没有成功执行,通过动画,用户可以快速地了解相关的信息。例如,输入错误的密码时可以使用摇动效果。这很容易理解,摇一摇在日常沟通中意味着“不”,因此摇动效果也能传递相同信息。

网页设计入门

用户看到动画后,能立即了解问题。 (Image credit: The Kinetic UI)

系统状态的可见性。Jakob Nielsen的可用性的10个启发式中,系统状态的可见性是用户界面设计中最重要的原则之一。用户在任何时候都想知道当前的上下文,而不应该让他们猜测——应该通过适当的视觉反馈告诉用户发生了什么事情。数据上传和下载操作是功能性动画的常用场景。例如,一个动画加载栏显示了任务的完成进度,并展示了对任务速度的预估。

网页设计入门

(Image credit: xjw)

导航式切换。导航式切换是指网站上各个模块之间的切换——例如从概述视图到详细视图。模块切换往往涉及到大块面积切换,用户思维难以跟上。动画能使用户在这些的时刻变得舒适,在切换上下文之间平滑地过渡,并通过创建模块之间的可视化连接来解释页面的变化。

 

(Image credit: Ramotion)

品牌。假设你有几十个相同功能的网站,帮助用户完成相同的任务。它们都能提供良好的用户体验,但人们真正喜欢的不仅仅是良好的用户体验。网站应该建立与用户的情感联系。品牌动画在吸引用户方面起着关键作用。它会形成公司的品牌价值,突出产品的优势,使用户真正感到愉快和难忘。

 

(Image credit Heco)

三、移动端适配

3.1 响应式设计

3.2 手势操作

四、无障碍设计

4.1 弱视用户

4.2 色盲用户

4.3 盲人用户

4.4 键盘适配

五、测试

5.1 持续测试

5.2 页面加载测试

5.3 A/B测试

六、开发交接

七、总结

三、移动端适配

如今,网站用户中有50%左右的用户通过移动设备访问。这对网页设计师意味着什么?意味着我们必须为网站进行移动端适配设计。

3.1 响应式设计

PC端和移动端有着不同的屏幕分辨率,进行适配优化尤为重要。

采用单列布局。手机屏幕上单列布局基本效果都不错。单列不仅可以管理小屏幕上的有限空间,还可以轻松地在不同屏幕分辨率之间以及纵横比之间进行缩放。

 

使用 Priority+ 导航模式。Priority+是Michael Scharnagl提出的,展示重要的导航选项, 不重要的导航选项集合在“更多”按钮。它能充分利用可用的屏幕空间。随着屏幕的增加,展示的导航选项也随之增加,从而可以提高可视性和吸引力。这种模式对于有很多不同的模块和页面的网站(如新闻网站或电商网站)特别有用。

确保图像适合PC端和移动端。网站必须适应所有不同的设备和分辨率,像素密度和方向。图像适配是构建响应式网站时面临的主要挑战之一。为了简化这个任务,您可以使用诸如Responsive Image Breakpoints Generator这样的工具地处理图像。

网页设计入门

Responsive Image Breakpoints Generator 可帮助您生成及管理图像的不同尺寸。

3.2 手势操作

移动端的交互是通过手指完成的,而不是鼠标点击。这意味着当您设计交互时要应用不同的规则。

交互元素的大小要合适。所有的交互元素(如链接,按钮和菜单)应该都是可以手势操作的。PC端网站适合交互区域(点击)较小且精确的方式,但移动网页需要较大的触发区,可以用拇指轻松完成。当网站经常需要用户操作时,请参考MIT Touch Lab的研究为您的按钮选择合适的尺寸。研究发现,手指面的平均尺寸在10到14毫米之间,指尖在8到10毫米之间,10×10毫米是一个很好的尺寸。

网页设计入门

按钮越大,点击越轻松。(Image credit: Apple)

交互需要更明显的视觉表达。PC端,用户将鼠标悬停在某个元素上(如显示下拉菜单)时,可以提供额外的视觉反馈;移动端,没有悬停状态,移动用户将不得不点击以查看该响应。因此,应该确保用户能够正确预测界面元素代表的含义。

四、无障碍设计

产品必须能够被任何人使用。针对有生理缺陷的用户进行设计是设计师去实践同理心和体验世界的一种方式。

4.1 弱视用户

许多网站的文本采用低对比度模式。虽然低对比度可能比较新潮的,但是难以识别。低对比度对于视力低下和对比度敏感的用户不友好。

网页设计入门

浅灰色背景上的灰色文字很难阅读。体验会很不好,或者说设计的毫无意义。

低对比度文本在PC端很难阅读,在移动设备上变得更加困难。想象一下,你在明亮的阳光下行走时,需要在移动设备上阅读低对比度的文本。这提醒我们,设计要确保信息能传递给用户。

永远不要为了美观牺牲可用性。网站上的文本和其他重要元素的最重要的是可读(用)性。可读性要求文本和背景之间有足够的对比。为确保视觉障碍人士能够阅读文本,W3C的网页内容无障碍设计指南(WCAG)有一个[对比度建议](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual- audio-to-对比contrast.html)。对于正文文本和图像文本,建议使用以下对比度比率:

小字号的文本对比度至少要 4.5:1。最好的对比度是7:1。

字号较大的文本(14号粗体、18号字体以上)应该至少有3:1的对比度。

网页设计入门

不好:这些文本行不符合对比度的建议,难以阅读。

网页设计入门

好:这些文本行遵循对比度的建议,清晰可辨。

你可以使用WebAIM的[色彩对比度检测器](http://webaim.org/resources/contrastchecker/)来确定是否处于最佳范围内。

网页设计入门

4.2 色盲用户

据估计,全球人口中有4.5%出现色盲(12名男性中有1名,200名女性中有1名),4%患有低视( 30人中有1名),0.6%是盲人(188人中有1人)。我们很容易忘记为这个用户群设计,因为大多数设计师都没有遇到这样的问题。

为了让用户可以正常访问,请避免仅使用颜色来传达意义。 正如W3C声明,不应该使用颜色“作为唯一可视的传输方式 信息,指示行动,提示回应,或区分视觉元素。“

表单中仅使用颜色表达提示信息是常见的方式。成功和错误消息分别以绿色和红色显示。但是红色盲和绿色盲是色盲群体中最多的。大多数情况下,你能接收到错误信息,比如“这段文字被标红”。看起来没什么问题,但是对色盲用户在这种形式下无法接收到错误信息。颜色应该是突出或补充已经看得见的信息。

网页设计入门

不好:这种形式仅仅依靠红色和绿色来表示字段有没有错误。色盲用户是无法识别的。

在上面的表格中,设计师应该给出更具体的说明,比如“您输入的电子邮件地址无效”或者在需要注意的地方显示图标。

网页设计入门

好:图标和标签显示哪些字段无效,更好地将信息传递给色盲用户。

4.3 盲人用户

图片和插图是网页的重要组成部分。但盲人需要屏幕阅读器等辅助技术来翻译网站。屏幕阅读器依靠于图像的替代文本来“读取”图像。如果该文本不存在或者描述不清晰,他们将无法按照预期获取信息。

考虑两个例子 – 第一,Threadless,一个流行的T恤店。这个页面并没有多少关于正在销售的商品的信息 。唯一可用的文本信息是价格和大小的组合。

网页设计入门

第二个例子来自ASOS。同样销售T恤的页面为该商品提供了准确的替代文字。 这有助于使用屏幕阅读器的人想象商品的外观。

网页设计入门

为图像创建替代文本时,请遵循以下指南:

所有“有意义”的图像都需要描述性的替代文字。(“有意义”的照片指为上下文提供补充性信息)

如果图像纯粹是装饰性的,没有提供帮助用户理解页面内容的有用信息,则不需要代替文本。

4.4 键盘适配

某些用户使用键盘而不是鼠标浏览网站。例如,运动障碍的人在使用鼠标这类精细的运动时有困难。通过将交互式元素适配Tab键,并显示键盘指示符,使交互式和导航元素可以被这类用户轻松访问。

键盘导航的基本规则:

检查键盘指示符是否可见和明显。 一些网页设计师会删除键盘指示符,因为他们认为不美观。但这阻碍了键盘用户正确地与网站交互。如果您不喜欢浏览器提供的默认指示符,请不要全删了它; 相反,设计它来满足你。

所有的交互元素都应该可以通过键盘访问,而不仅仅是主要的导航选项或主要的CTA。

您可以在W3C的“WAI-ARIA Authoring Practices”的文件中“设计模式和小工具”部分中找到有关键盘交互的详细要求。

五、测试

5.1 持续测试

测试是用户体验设计过程的重要组成部分。和设计周期的其他部分一样,这是一个持续的过程。在早期收集信息开始,到整个过程都需要进行测试。

网页设计入门教程

(Image credit: Extreme Uncertainty)

5.2 页面加载测试

用户讨厌加载慢的网站。这就是为什么响应时间是网站的重要因素。根据Nielsen Norman Group,有三个响应时间限制:

0.1秒对用户来说是即时的。

1秒能保存用户的思想流畅,但是会感觉到轻微的延迟。

10秒是用户保持注意力集中在操作上的极限。10秒的延迟通常会让用户立即离开网站。

显然,我们不应该让用户在网站上等待10秒钟。但是经常发生几秒钟的延迟,也会让人感觉不愉快。用户将不得不等待操作完成。

通常是什么导致加载缓慢?

体量大的内容(如嵌入的视频和幻灯片小部件),

后端代码未进行优化

硬件问题(基础设施性能有限)。

像[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)这样的工具可以帮助您找出加载缓慢的原因。

5.3 A/B测试

当您在两个版本(如现有版本和重新设计版本的页面)之间进行选择时,A/B测试是理想的选择。这种测试方法包括将两个版本中的一个随机显示给相同数量的用户,然后分析哪个版本下用户更有效地完成了目标。

网页设计入门教程

(Image credit: VWO)

六、 开发交接

[UX设计流程](https://blogs. adobe. com/creativecloud/ux-process-what-it-is-what-it-looks-like-and-why-its-important/)有两个重要的步骤 :设计原型和开发。设计完成并准备好进入开发阶段后,设计人员需要制定一份规范,该规范是描述设计应如何实现的文档。规范确保开发不会偏离初衷。

规范中的精确性是至关重要的,因为在规范不准确的情况下,开发人员在开发时不得不依赖猜测,或者让设计人员解答他们的问题。但是人工编写规范是一个头痛的问题,通常需要很长的时间。

借助Adobe XD的设计规范功能(测试版),设计人员可以为开发人员发布一个公开的链接。通过链接,开发人员可以检查,测量和复制样式。设计师不再需要花时间编写规范来向开发者阐述位置,文本样式或字体。

网页设计入门教程

Adobe XD的设计规范功能(测试版)

七、结论

这里分享的技巧只是一个开始。将这些想法与您自己的想法融合,才能达到最佳效果。将您的网站视为一个不断发展的项目,并分析用户反馈来不断改进体验。请记住,设计不只是为了设计师 – 而是为了用户。

预约建站专员添加QQ:63820 领取建站内部课程
著作权归作者所有
简介
满山红 创始人
8年建站实战经验(如:个人网站建设,企业网站建设及大型门户网站建设)并深度研究搜索引擎算法,熟悉大型网站SEO优化。
曾操作某大型门户网站日IP达100万(纯SEO流量),拥有上千网站提供SEO友情链接资源(参加培训免费赠送100个单向友情链接),免费赠送满山红SEO内部VIP课程