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

字体

通用的字体家族

在网页设计中使用系统默认的界面字体能保证用户观感的统一性,同时也一定程度上提升了页面的加载速度,使得页面在不同平台都获得较好的观感和可读性。下面列出的 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 标准颜色,下列是我个人推荐的色彩供大家参考,点击了解色彩。

深色 HEX值
#DB4437
#AB47BC
#7E57C2
#4285F4
#26C6DA
#0F9D58
#8BC34A
#FFEB3B
#F4B400
#795548
浅色 HEX值
#FFEBEE
#F3E5F5
#E8EAF6
#E1F5FE
#E0F7FA
#E8F5E9
#F9FBE7
#FFFDE7
#FFF8E1
#EFEBE9
灰色 HEX值
#F8F9FA
#E9ECEF
#DEE2E6
#CED4DA
#ADB5BD
#868E96
#495057
#343A40
#212529
#000000

选取颜色的饱和度不应过高,字体颜色参考 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规范

相关站点

代码结构

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

提示

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

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

命名规则

属性和标签名通常使用W3c的规范建议,采用小写字母表示,属性值用双引号包括。重要元素同时给定 idclass 标签,其中 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 属性可作为提示信息,当鼠标指向时显示为提示信息。

 
持续更新 »

发布时间: 2019-12-04
点击复制本页链接
Copyright © 2019-2020 世佳