广州网站建设走在互联网行业的前列。网络商务需求，网站产品需求，网站建设者网站建设需求，都体现了互联网商务的重要性。本期主要介绍网站设计的视觉冲击和功能设计，从适应功能开发、无障碍设计、移动端移动设备测试的效果来引导和描述网页的功能。这个问题将包括移动端的适配、无障碍设计、页面测试和开发移交。

　　第三，移动终端被适配

　　3.1响应性设计

　　3.2手势操作

　　第四，无障碍设计

　　4.1弱视用户

　　4.2色盲用户

　　4.3盲人用户

　　4.4键盘适配

　　动词（verb的缩写）测试

　　5.1连续测试

　　5.2页面加载测试

　　5.3甲乙测试

　　不及物动词开发移交

　　七.总结

　　第三，移动终端被适配

　　如今，大约50%的网站用户通过移动设备访问。这对网页设计师意味着什么？这意味着移动网站的建设需求很大，因此我们必须为网站设计移动适配。

　　3.1响应性设计

　　PC和手机屏幕分辨率不同，优化适配尤为重要。

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

　　使用优先导航模式。优先级由Michael  Scharnagl提出，显示重要的导航选项，不重要的导航选项聚集在“更多”按钮。它可以充分利用可用的屏幕空间。随着屏幕的增加，导航选项也增加了，可以提高可视性和吸引力。这种模式对于有很多不同模块和页面的网站特别有用，比如新闻网站或者电子商务网站。

　　确保图像适合PC和手机。网站必须适应所有不同的设备和分辨率，每英寸像素和方向。图像适配是建立一个响应性网站的主要挑战之一。为了简化此任务，可以使用响应图像断点生成器等工具来处理图像。

　　3.2手势操作

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

　　交互元素的大小要合适。所有交互元素(如链接、按钮和菜单)都应该是手势可操作的。PC端网站适合小而精准的交互区域(点击)，而移动网页需要大的触发区域，用拇指就可以轻松完成。当网站经常需要用户操作时，请参考麻省理工触摸实验室的研究，为你的按钮选择合适的尺寸。发现手指表面平均尺寸在10 ~ 14mm之间，指尖在8 ~ 10mm之间，1010 mm是较好的尺寸。画

　　交互需要更明显的视觉表现。在PC端，当鼠标悬停在一个元素上时，用户可以提供额外的视觉反馈(如显示下拉菜单)；在移动端，没有悬停状态，移动用户将必须点击才能查看响应。所以要保证用户能够正确预测界面元素所代表的意义。

　　第四，无障碍设计

　　产品必须能被任何人使用。为有生理缺陷的用户设计，是设计师练习共情、体验世界的一种方式。

　　4.1弱视用户

　　很多网站的文字采用低对比模式。虽然低对比度可能很时尚，但很难识别。低对比度对视力低、对比度敏感的用户不友好。

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

　　永远不要为了美观而牺牲可用性。网站上的文字和其他重要元素最重要的是可读性。可读性要求文本和背景之间有足够的对比度。建议正文文本和图像文本使用以下对比度：

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

　　字体较大的文字(14 #粗体，18 #字体以上)至少要有3: 1的对比度。

　　4.2色盲用户

　　据估计，全球4.5%的人口是色盲(每12名男性中有1人，每200名女性中有1人)，4%的人口视力低下(每30人中有1人)，0.6%的人口是盲人(每188人中有1人)。很容易忘记为这个用户群体设计，因为大部分设计师都没有遇到过这样的问题。

　　为了让用户有正常的访问，请避免只用颜色来传达意思。正如W3C所说，颜色“不应作为唯一的视觉传递信息，用于指示动作、提示响应或区分视觉元素。”。"

　　在表单中只通过颜色来表示提示信息是一种常见的方式。成功和错误消息分别以绿色和红色显示。然而，红盲和绿盲是最常见的色盲群体。在大多数情况下，您可能会收到错误消息，如“此文本被标记为红色”。好像没什么问题，但是色盲的用户是收不到这种形式的错误信息的。颜色应该突出或补充已经可见的信息。

　　4.3盲人用户

　　图片和插图是网页的重要组成部分。但是盲人需要屏幕阅读器等辅助技术来翻译网站。屏幕阅读器依靠图像的替代文本来“阅读”图像。如果文本不存在或者描述不清楚，他们就不会得到预期的信息。

　　为图像创建替代文本时，请遵循以下准则：所有“有意义”的图像都需要描述性的替代词。(“有意义的”照片指上下文的补充信息)

　　如果图片纯粹是装饰性的，没有提供有用的信息来帮助用户理解页面的内容，就不需要替换文字。

　　4.4键盘适配

　　有些用户用键盘代替鼠标浏览网站。例如，运动障碍患者很难使用精细动作，如鼠标。通过使交互元素适应Tab键并显示键盘指示器，这些用户可以容易地访问交互和导航元素。

　　键盘导航的基本规则：

　　检查键盘指示器是否可见和明显。有些网页设计师会删除键盘指示器，因为他们认为它不漂亮。但这妨碍了键盘用户与网站的正确互动。如果不喜欢浏览器提供的默认指标，请不要全部删除；而是设计成让你满意。

　　动词（verb的缩写）测试

　　5.1连续测试

　　测试是用户体验设计过程的重要组成部分。像设计周期的其他部分一样，这是一个连续的过程。从早期信息收集开始到整个过程都需要测试。

　　5.2页面加载测试

　　用户讨厌加载慢的网站。这就是为什么响应时间是网站的一个重要因素。根据尼尔森诺曼集团的说法，有三个响应时间限制：

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

　　一秒钟可以保持用户的思维流畅，但会感觉到轻微的延迟。

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

　　显然，我们不应该让用户在网站上等待10秒钟。然而，往往会出现几秒钟的延迟，这也让人感到不愉快。用户将不得不等待操作完成。通常是什么原因导致加载缓慢？

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

　　后端代码没有优化

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

　　5.3甲乙测试

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

　　不及物动词开发移交

　　有两个重要步骤：原型设计和开发。设计完成并准备进入开发阶段后，设计人员需要制定一个规范，这是一个描述设计应该如何实现的文档。规范保证开发不会偏离初衷。

　　规范的准确性非常重要，因为在规范不准确的情况下，开发人员不得不依靠猜测或者让设计人员来回答他们的问题。但是手工编写规范是一件令人头疼的事情，通常需要很长时间。借助Adobe  XD的设计规范功能(beta)，设计师可以为开发者发布一个开放的链接。通过链接，开发人员可以检查、测量和复制样式。设计师不再需要花时间写规范来向开发者解释位置、文字样式或字体。

　　七.结论

　　网站建设是一个工程，网页设计是内容之一。只有充分保证每个界面的可用性，才能更好的保证网站的视觉开发。当思想和实践结合起来，效果才能体现出来。通过不断的设计和测试，我们可以不断的改进网站的缺点，为用户带来更美观、更有用的网站内容。