《网页设计综合指南》（三）：移动适配、无障碍设计等

2017-11-02 20:01:22 阅读：649 作者：子龙 来源：巨推传媒 分类：SEO优化

设计师和开发人员在构建网站时，需要考虑很多事情，从视觉外观到功能设计。为了简化这个过程，我们准备了这个指南。限于篇幅限制，将这一指南分为三部分，此为第三部分内容。

注：设计师和开发人员在构建网站时，需要考虑很多事情，从视觉外观到功能设计。为了简化这个过程，我们准备了这个指南。限于篇幅限制，将这一指南分为三部分，此为第三部分内容。

前两篇：

《网页设计综合指南》（一）：网站地图优化篇

《网页设计综合指南》（二）：内容布局、页面结构等

本篇包含内容

三、移动端适配

• 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 可帮助您生成及管理图像的不同尺寸。

更多资讯关注巨推传媒:http://www.jutui360.com/list-8/ 联系电话:400-606-5558 qq/微信:shijianyingxiao8

上一篇：突发！微博屏蔽iPhone关键词：啥都发不出 下一篇：贝索斯的蓝色起源又发射可回收火箭了，这次送了个假人上天

更多推荐

• 
  SEO优化 长尾关键词对seo优化的影响 什么是长尾关键词？如何挖掘长尾关键词？相信这是大多seo站长都非常想要知道的事情，长尾关键词能够给网站带来一定的流量，通常由两到三个词所组成，经常会出现在网站标...

  2019-08-09 12:37:59 1274

  SEO优化

• 
  SEO优化 seo优化网站关键词布局的方法技巧 对于seo优化人员来说，掌握关键词布局是将网站做到首页的重要一步，一个网站有多个相关的关键词，我们需要将这些关键词平均分布到网站上，但切记千万不要造成关键词堆砌...

  2019-08-09 12:32:54 1351

  SEO优化

• 
  SEO优化 制作手机网站这几点很重要 随着智能手机不断的普及，移动互联网时代的到来，PC端的用户大多都转移到了手机端，因为使用手机比起电脑来说要方便很多。企业建设一个手机网站的目的无非就是给自己的企...

  2019-08-09 12:25:30 1150

• 
  SEO优化 网站首页不被搜索引擎收录的原因 网站收录情况是网站优化过程中一项非常重要的指标，如果网站没有收录，那就说明网站没有机会展现给用户，当然了也不能为广大网民提供价值；尤其是新网站，很多站长在优化一...

  2019-08-09 12:23:27 1331

• 
  SEO优化 网站被降权的解决措施 站内优化过度主要体验在关键词布局标题上关键词堆砌，相同的关键词重复好几遍，seo在不觉得这样操作会导致降权的情况慢慢的优化过度，那么当遇到网站被降权的情况我们应...

  2019-08-09 12:21:55 1168