新手小白的web端设计入门攻略

对于很多新手交互设计师来说，在刚开始进行web端设计时，往往不知从何下手，或者对自己做出来的稿件完全没有概念，象征性的拉几个模块，在后期对接视觉和前端时，一脸茫（meng）然（bi）。

本篇将从几个常见问题出发：【网页设计尺寸怎么定／设计标准是什么】、【网页设计如何规范布局】、【新手如何避免网页设计低级错误／网页设计注意事项】、【网页设计适配方案怎么做】，帮助新手设计师快速了解web端网页设计，输出一份比较规范的交互方案。

全篇一共三部分：

第一部分设计前-尺寸&标准

第二部分设计时-布局&交互

第三部分设计后-适配

可根据需求选择阅读（绿色加粗文字为敲黑板必读）

第一部分设计前-尺寸&标准

web端设计最终的展现，受操作系统／浏览器影响，会有各自不同的特点，比如浏览器的头部的操作高度和信息的展示都会有所不同。在做web端设计时，设计师可以在了解基本数据的情况下，针对产品的特点选择合适的尺寸，也可选择更常用兼容的尺寸。

2017.6.1-2017.11.30操作系统和浏览器的市场分布状况

2017.6.1-2017.11.30常用分辨率市场占有率

整体来看，安全分辨率为1024*768px

浏览器首屏高度：即电脑屏幕除掉任务栏、浏览器菜单栏以及状态栏后剩下的网页第一屏显示高度。

常见分辨率1024×768下的网页首屏高度平均值是584px

综合分辨率及浏览器统计数据，安全高度580 px

常见分辨率1440×900下的网页首屏高度平均值是716px

综合分辨率及浏览器统计数据，安全高度710 px

常见分辨率1920×1080下的网页首屏高度平均值是905px

综合分辨率及浏览器统计数据，安全高度900 px

常见分辨率1920×1080下的网页首屏高度平均值是905px

综合分辨率及浏览器统计数据，安全高度900 px

但是，国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。国内尺寸设置比较保守，一般网站宽为996px，这样可以保证大部分用户舒适的浏览网页。

综上，我们可选择的安全网页尺寸是996*710px（一屏）

第二部分 设计时-布局&交互

1、布局

在进行网页设计时，有一个词出现频率很高，那就是“栅格”。网页栅格系统是从平面栅格系统中发展而来，是指：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

对于网页设计来说，栅格系统的使用，可以让网站各页面布局保持一致，增加页面相似度，提升用户体验。而且，对于前端开发来说，页面所有组件尺寸都是有规律的，能提高网页的规范性，降低开发和维护成本。

在网页设计中，把宽度为“W”的页面分割成n个网格单元“a”，每个单元之间的间隙为“i”，此时把“a+i”定义为“A”，他们之间的关系如下：

（A*n）- i = W

960px的网格是比较常用的，大型的比较复杂的门户网站会采用，960可以有3种分割方式：12列、16列、24列，比较灵活。

12列

16列

24列

基于基本栅格，可以对网页进行基本的布局规划，如下：

栅格系统更多的是一种布局思想。很多数值都不是固定死的，设计师灵活运用栅格，也可以做出很多优秀、独特的设计。

对于web页面来说，页面布局是和web页面的功能区相对应的，基本的功能区如下，在设计时需要考虑用户在浏览web页面时视觉移动的特点，将合适的内容放在合适的位置，合理布局。（功能不复杂的网页通常没有sidebar，只包含内容区整体信息向下）

2、交互

相比于触摸交互，鼠标在页面中对事件进行处理时，根据交互操作不同主要可分为：移入、点击、滑动／滚动、拖拽。

当进行鼠标操作时，页面元素获得焦点、被点击、失去焦点时，则需要控件本身在颜色、大小或形状上的变化给与响应，亦可以添加声音响应。如：

1）鼠标移入／点击时，页面元件获取焦点：元件颜色/大小/字体改变

获取焦点前

获取焦点后

2）鼠标移入／点击时，页面元素以浮窗的形式显

相比于移动设备，web端的网页，用户有时候还需要结合键盘进行操作，所以页面需要提供一些简单的键盘支持：

例如：“Esc”、“Enter”、“Tab”“Space”，系统应对这些键值作出响应。

第三部分 设计后-适配

设计初步方案完成后，很多新手交互设计师可能对后续的适配问题一头雾水，也无从下手，直接丢给了前端（如果前端也小白的话，那么最后你的设计有可能以千奇百怪的方式出现在不同的屏幕上）。

其实对设计影响比较大的主要是屏幕分辨率、尺寸、屏幕方向这些因素。解决的办法可以通过响应式网站的设计方法来提升在不同分辨率下的兼容性。

响应式设计：指的是在不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸）所影响的不同环境下，保证信息的表现一致性，保证可交互可操作。比如：由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。

在这里，需要把握好一个关键，就是临界点。

当页面宽度发生变化引起信息结构变化时的尺寸节点就是临界点的概念。所以做响应式设计时需要知道每一个尺寸的宽度范围是多少，就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度位于哪一个点的时候，页面信息该如何展示。

以上，基本可以比较规范的开始一个web网页的交互设计～

———欢迎来撩———