设计网页需要注意什么细节

设计网页需要注意什么细节

（制定）网页必须要注意什么细节

字体的排版的问题之大，远非绝大多数非制定人员想象的

那么简单，文字和字母看起来很简单，但是它们可以成就好

制定，也可以毁掉整个版面。下面介绍制定网页必须要注意什

么细节，希望可以为您带来帮助。

1、使用不合理的模板

用模板确实是一件非常方便的事情。大型企业用模板确实说

不过去，但是初创公司借助Bootstrap做网站绝对是情有可原。

使用类似Bootstrap模板来作为基础，借制定师之手针对品牌

和企业气质稍加定制，其实是个很不错的主意，如果沟通优

良，说不定最终能浮现出一个非常不错的网站，关于企业的

产品与服务也是很不错的加成。

但是仅仅只是套用模板而不予以调整和定制，你所遭遇最

常见的问题是模板与品牌本身的视觉制定上无法达成一致，

从LOGO使用的色彩，到品牌中独特的字体，都无法与网站构

成较高的匹配度。不过如果你真的是在这方便也捉

襟见肘的话，尽量挑选在各方面与品牌形象本身更接近的模

板，将疏离感降到最低。

2、使用默认外观

和中文网站的状况不一样，英文网站使用多种多样的字体

是一件很轻松的事情。如果你使用了Bootstrap.Wordpress这

样的工具来创建网站，而仅仅使用默认的设置，你愚弄不了

任何人，大家一眼就会把你偷懒的事情看出来连字体都是默

认的OpenSanso用Wordpress默认外观也是一样的道理。如

果你不打算在网站视觉上和别人稍作区别的话，对品牌的伤

害是显而易见的。

当然，如果你能用好诸如FontAwesome这样的字体和CSS

工具，也有点铁成金的奇效。它能以增加图标库和样式的方式,

让Bootstrap等各种各样的系统，拥有美丽一致的视觉语言。

毫无疑问，这些被精心制作过的原创的图标，自然是比系

统内置的通用图标好。如果你有自己的创意和点子，为什么不

去寻找更有个性，更符合你的品牌调性的图标、插画和字体呢?

或许时间成本、实现成本并没有你想象中那么高。

3、排版对比度的问题

字体的排版的问题之大，远非绝大多数非制定人员想象的

那么简单。文字和字母看起来很简单，但是它们可以成就好制

定，也可以毁掉整个版面。

在许多"自制'的网页中，最常见的问题是标题和正文字体

之间的对比度较低，整个页面的信息层级不显然。仅仅只是调

整字体大小并不够以构成对比，标题字体的字重应该比正文

更大，也就是说字体应该更粗，保证它们够显眼，更容易被

眼睛注意到。

4、使用深色背景

虽然背景处于网页的最底层，但是它实际上是占据网站面

积最大的部分，在用户看到网页的时候会第一时间感受到，

精心选择背景色彩很重要。

作为一个久经验证的法则，黑色色调的网站，除开真正专

业的制定师做出来的，其他的基本都没法看。使用白色作为基

本的背景色是非常安全的，不过多数的制定师会选择浅灰色

打底。值得注意的是，网站的灰度越高，黑色的文字的可阅读

性越差，为了保证网站的可阅读性，灰度最好坚持在15%以下。

网页制定有什么细节工作必须要注意

关于网页制定的部分，很多人都把关注点放在如何特别网

站重点、如何提升精美度、如何排版等比较大的方面上，很容

易忽视一些细节工作。其实有时候，细节往往决定着成败，一

个细节上的失误有可能毁掉整个网页制定。因此，为了避免这

种状况，我们应该注意哪些细节工作呢？

网页上的细节涉及到很多方面，包括背景、颜色、线条甚至

是一些阴影处理等等，如果能将这些细节都做到位了，就可

以使网页制定整体提升一个档次。比如当我们使用一些色块时,

就要合计给它加上一些细致的材质纹理，使网站更有层次感，

更有深度。

文字上的制定也要注重细节，比如字间距、字体、颜色、字

号等方面。其中字间距要尽量坚持统一，重要内容与次要内容

之间可以使用不同的字体加以区分，但是字体间的风格要靠

近、和谐。而颜色则建议使用黑色或者灰色，可读性更高，也

更加符合用户的阅读习惯。

还有一点就是网页整体的整齐度问题，这个常常容易受到

忽略。要做好这个细节，我们就应该在处理图片或文本等元素

时，保证整个页面是水平对齐的，各个元素之间的宽度是一

样的，空格距离也是一致的，特别是当不同形状的图片排列

在一起时，更要做好这些细节，这样就可以取得优良的视觉

体验了。

很多时候，网页制定的细节追求的就是一种统一性，比如

横幅图片与页脚图片的统一、导航栏目条词语间的统一、共同

元素间颜色的统一等等。如果网页中有网格布局，就更应该遵

循细节上的统一原则，保证整体网站的和谐，真正做好细节

制定。

以上这些网页制定上的细节工作，希望大家在进行自助建

站的时候能够注意，如果能结合《什么是自助建站的一致性制

定原则？》中其他的一致性原则，就可以令网页制定更加完美

了。

网页制定应该注意哪些细节问题

减少不必要跳转。

有的时候你的网站可能必须要处理一些信息而没有显示的

网页，有些网站会用一个跳转页来解决。比如登录的时候，会

先跳到一个空白页来设置登录状态，修改数据库等操作，然

后再将用户定位到登录完成页。不过跳转页的最大缺点就是会

增加等待时间。而且容易导致操作失败（用户在这里刷新）。某

外卖网站的支付功能在支付成功的时候，从到银行支付成功

页点回到商户网站，会跳到一个支付完成页，然后跳到支付

正在处理页，然后又是一个支付成功页，最后跳到订单成功

页。我看着我的浏览器跳来跳去都觉得好难受啊。

后台可以用curl收发某些消息，也可以在最初的跳转页带

上更多的参数，直接让结果页中的sql语句处理全部内容。

背景、边框和底纹。

有的时候这些背景，边框和底纹会直接的对用户造成使用

上的影响。首先弹出对话框一定要有非透明背景。边框和底纹

可以为用户标识操作区域。哪些区域是推举修改的，哪些是无

关紧要的之类的东西。如果提供给用户选择的是几个大区域,

那么用不同的边框来标识出用户的选择也是很重要的。

给用户明确的反馈。

当你在做一个操作的时候，可能背后的(java)script要执

行很长的时间。这个时候你必须明确告诉用户你正在处理一些

东西。最常用的方法是将鼠标光标切换成wait模式，还有在

网页上显示一个小圈圈的动态图。如果你用Ajax登录，那么

在点击登录按钮之后应该显示一个"登录中'的提示。如果你的

表单验证出错，你应该用红色指示出错误的那一项，并告知

错误原因。有些网站会让那个框闪一闪，甚至直接把输入焦

点重定位过去(这在你的表单很长时非常管用)。用ajax载入

的东西，默认文本应该设置为“正在载入'，而不是用一个空

div。总之就是让用户知道这张网页正在做什么，这样虽然不

能减少用户等待时间，但是可以给用户一个心理安慰，告诉

它们：我正在忙着处理你的数据。而不要让你的网站表现的像

是失去响应一样。

明确的后退链接。

如果你的网页内容比较多，那么用户可能会深陷到一个很

深的目录结构里，比如子栏目的子栏目，当他们想回来的时

候并不容易。提供一个后退到高级目录的链接（注意不是浏览

器的后退链接，因为用户可能从子栏目的一个文章跳到另一

个文章。）就可以有效的提升用户体验。如果同意，提供一个

面包屑导航栏显然更好。如果你的网站有导航条，那么保证有

一个"首页'链接。方便用户在网站各个栏目间跳转可以让用户

更舒适。

企业在进行网站制作时必须要注意的细节

一、网站整体颜色与主题不符合

在建站之前，首先要确定网站网站主题。比如说：音乐影视

类的；科技类的；医疗保健类的；考试教育类的等等这些都属于

网站主题。网站主题就等于是衣服，给网站穿上博客模板这个

网站就是博客站的类型，每一个主题都配应相关于合适的颜

色，如果搭配的颜色和主题不符合，就会影响视觉效果。

而网站主色调好比乐曲中的主旋律，起着主导的作用，单

单只有主旋律还不能体现乐曲的完美，要多种辅助旋律搭配

才干的动听，一般的网页色调都是控制在三种以内，辅助色

最好与主色调相差别不大的，也可用相反的颜色。单一的色调

也可以使用，它能起着醒目、清楚的目的。这就要考验网页制

定师的搭配制定功力了。

二、导航页不清楚，排版混乱

导航必须要有助于浏览者快速的找到想要知道的内容页和

功能，导航就是必须要有引导性，如果导航不清楚明了，就

会影响全站的布局。而网站排版体体现在，假如是一个栏目分

类合理，制定简单清爽的页面，给访客的第一映像就会很好,

同样，网站的排版如果进去看到乱七八糟的页面，可能顿时

就没有心情浏览了，即便是想要浏览，也找不到自己想要的

东西在哪里，不仅仅是网页的排版，文章内容也是很重要的,

比如说字体的大小，紧密的程度，段落之间的距离，文字颜

色的深浅等这些都是一个好的网站所具备的条件。

三、网页广告及弹出窗口过多，影响视觉体验

在访问一个网站时，相信很多人都有过这样的体验，正在

阅读的时候，一会一个广告弹出来，必须要手动关掉，这种

弹窗广告极大的影响了访客体验。内容没找到，弹窗关了无数

道，阅读一篇文章，总被广告打搅，让访客心烦气躁。你还有

一方面是广告，有的网站广告可能比内容都还多。广告可以存

在，但是制定要合理，不能喧宾夺主。

四、图像内存大卡，影响网站加载速度

如今的互联网时代就是网速的时代，很多网站为了凸显效

果，会插入大量的大量的图