全国咨询热线:18720358503

《网页设计综合指南》(三):移动适配、无障

类别:企业动态 发布时间:2021-01-12 浏览人次:

您的位置: > 新闻资讯 > 网站设计 > 《网页设计综合指南》(三):移动适配、无障 发表日期:   文章编辑:admin    浏览次数: <)。对于正文文本和图像文本,建议使用以下对比度比率:

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

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

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

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

你可以使用WebAIM的[色彩对比度检测器](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](speed/pagespeed/insights/)这样的工具可以帮助您找出加载缓慢的原因。

5.3 A/B测试

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

(Image credit: VWO)

六、 开发交接

[UX设计流程](creativecloud/ux-process-what-it-is-what-it-looks-like-and-why-its-important/)有两个重要的步骤 :

设计原型和开发。

设计完成并准备好进入开发阶段后,设计人员需要制定一份规范,该规范是描述设计应如何实现的文档。规范确保开发不会偏离初衷。

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

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

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

七、结论

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

前两篇:

《网页设计综合指南》(一):网站地图优化篇

《网页设计综合指南》(二):内容布局、页面结构等

标签:  

如没特殊注明,文章均为聚网网络原创,转载请注明来自news/wangzhansheji/2019/;   部分内容来源于网络,如果侵权请联系QQ立即删除。
下一篇:没有了

推荐阅读

《网页设计综合指南》(三):移动适配、无障

您的部位: > 新闻报道新闻资讯 > 网站制作 > 《网页页面设计方案综合性手册》(三):移动兼容、无障大字号的文字比照度最少要 4.5:1。最好的比照度是7:1。字体大小很大的文字(...

2021-01-12
农村电商网站建设需不需要做推广

提到乡村电子商务,许多人都是想起电子商务下乡,包含淘宝网村、京东商城等大中型电子商务服务平台,而很少有乡村电子商务网站被网友所熟识,它是是什么原因呢?一名被马云爸爸...

2021-01-12
广州凡科互联网科技股份有限公司招聘客服专员

招聘人数:8职位信息岗位职责: 1、 负责网站的售后维护工作;2、 负责域名、主机、邮箱、备案等业务;3、 维护老客户关系,定期回访,提升客户满意度和增值率。任职要求: 1、大...

2021-01-12
阿克苏企业网站建设-益阳网站建设

【鹊起高新科技_做提升完全免费建设网站_手机微信:179900】十多年易阳技术专业网站建设企业,融合网站seo编码,有利于搜索引擎排名提升,易阳网站建设企业哪个好?找鹊起高新科技!鹊起...

2021-01-12
广州凡科互联网科技股份有限公司招聘天猫审单

招聘人数:14职位信息岗位职责: 1、负责及时审核后台订单信息,选择最适合的配送快递,满足顾客的个性化需求; 2、核对客户姓名、电话、地址信息的详细性、完整性、有效性;...

2021-01-12
广州凡科互联网科技股份有限公司招聘销售专员

招聘人数:11职位信息职位要求:大专或以上学历,年龄20-30岁,有电商及互联网电话销售经验优先,优秀应届生亦可;口齿清晰,普通话流利,语音富有感染力,形象气质佳者优先考虑...

2021-01-11
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信