浅谈网页设计与开发

谈一谈我在网页设计过程中的一些经验与小技巧。分享在网页排版、设计的过程中经常遇到的问题的一些解决办法。推荐在掌握了前端基础后阅读。

字体

通用的字体家族

在网页设计中使用系统默认的界面字体能保证用户观感的统一性，同时也一定程度上提升了页面的加载速度，使得页面在不同平台都获得较好的观感和可读性。下面列出的 font-family 仅供参考，需与时俱进更新字体列表及排列顺序。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

等宽数字

在一些展示大量数字的页面中，非等宽的数字表示会使列表宽度不一导致排版混乱，同时也不利于数字比较，使用 font-variant-numeric 属性将数字等宽表示。

body {
  font-variant-numeric: tabular-nums;
}

字体的尺寸

字体的尺寸中的各项参数应符合一定规律，行高一般控制在字号的 1.5 至 1.8 倍之间。在同一页面中应避免出现5种以上的字体尺寸，推荐使用简约风格。

尺寸	12	14	16	20	24	30	38	46	……
行高	22	24	26	28	32	38	46	54	……

表中数据仅供参考，应根据实际情况制定。

色彩

在颜色运用上要尽可能的克制，减少色彩使用的种类。首先选择主色，然后选择小于四种的辅助色，运用好颜色的饱和度突出要表达的主体，每种辅助色最好有固定的应用场景，使整个产品体系的色彩体系化，提高用户的视觉效率，避免出现“五彩缤纷”的状态。色彩选择上尽量选择 Web 标准颜色。

选取颜色的饱和度不应过高，字体颜色参考 WCAG 的标准，将文本和背景色之间保持在了 7:1 以上的 AAA 级对比度，不然会让用户很容易产生视觉疲劳。

样式表

全局默认样式

*, ::after, ::before {
  box-sizing: border-box;
}

body {
  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

去除浏览器默认样式

大多数情况浏览器的默认样式会妨碍我们网页的外观设计，不利于各设备间的视觉统一。故在添加自定义样式之前可以先去除这些浏览器自带的默认样式。

输入框标签 input

input {
  background: none;
  outline: none;
  border: none;
}

按钮标签 button

button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

列表标签 li

ul,li { 
  padding:0;
  margin:0;
  list-style:none;
}

代码规范

代码在满足页面需求的同时，为了页面持续高效运行与后期维护，最好拥有统一规范的代码书写规则。下面提到的一些是行业惯例，一些事个人习惯，请根据实际情况灵活设置。你可使用 Unicorn 工具来验证自己的页面是否符合 W3C规范。

相关站点： W3C 官网、 W3C 中国、 W3C 统一验证工具 Unicorn

代码结构

在 HTML 页面代码结构中，通常 CSS 文件在前，JavaScript 代码则放在页面底部，因为加载 JavaScript 代码会影响页面的整体加载速度。

在 <script> 标签中可根据需要使用 async 和 defer 属性，defer 设置为 true,则意味着此 JavaScript 文件滞后执行,不影响页面 HTML 的渲染，async 是 Html5 中新引入的属性，已经得到了大多数现代浏览器的支持，此属性设置为 true 意味着文件异步加载和执行。两个属性的区别是 async 下载完成后就会执行，而 efer 则会还是按照在页面的的次序来执行，所以下载和执行不一定会连续。

应最大限度精简代码，比如删除多余的 <div> 标签，这样做能有效提升页面加载速度。

命名规则

属性和标签名通常使用W3c的规范建议，采用小写字母表示，属性值用双引号包括。重要元素同时给定 id 和 class 标签，其中 id 名称各词之间使用 _ 连接，class 名称各词之间使用 - 连接。

标签以及属性名推荐采用英文命名，下表列出了一些常用到的。

标签类型	通用命名
功能	`login(登陆)` `loginbar(登录条)` `logo(标志)` `banner(广告)` `hot(热点)` `news(新闻)` `download (下载)` `subnav(子导航)` `search(搜索)` `friendlink(友情链接)` `list(文章列表)` `tab(标签页)` `msg(提示信息)` `joinus(加入)` `tips(小技巧)` `guild(指南)` `copyright(版权)` `service(服务)` `regsiter(注册)` `status(状态)` `vote(投票)` `partner(合作伙伴)` `scroll(滚动)` `shop(功能区)` `btn(按钮)` `current(当前的)` `icon(图标)` `note(注释)` `link(链接)`
结构	`container(容器)` `header(页头)` `nav(导航)` `content(内容)` `main(页面主体)` `footer(页尾)` `sidebar(侧栏)` `column(栏目)` `wrapper(页面外围)` `left(左)` `center(中)` `right(右)`
导航	`nav(导航)` `mainbav(主导航)` `subnav(子导航)` `topnav(顶导航)` `sidebar(边导航)` `leftsidebar(左导航)` `menu(菜单)` `submenu(子菜单)` `title(标题)` `summary(摘要)`

使用注释

在各大功能区块给出注释，同样有利于代码的快速检索与后期维护。

<!- HTML 注释 ->
/* CSS 注释 */

使用单独的样式文件

方便后期维护以及精简代码量，推荐将样式写在单独的 CSS 样式文件中。

补全某些标签的属性

<img> 标签的 alt 属性是图片不能正常显示时的替换文字；
<a> 标签的 title 属性可作为提示信息，当鼠标指向时显示为提示信息。