66个网页制作的技巧

上海网站建设专家创新互联与您一起去了解66个网页制作的技巧，网站的页面多种多样，风格各异，网页的质量直接影响着网站的效果。网页设计的过程中，需要注意哪些方面的事项，有哪几方面影响着网页的设计效果呢?

1页面平铺

把页面平铺开，主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。

2导航栏

导航栏如果设计得恰到好处，是会给网页本身增色很多。导航栏有一排、两排、多排、图片导航和Frame框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。

3LOGO

LOGO并不是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果;网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。

4BANNER(广告条)类型

Banner设计注意点：Banner有动态和静态两种。在浏览网页的过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。设计要点：Banner的文字不能太多，用一两句话来表达即可;广告语要朗朗上口，可以第一时间的让人捕获表达的重点;图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没;图形尽量选择颜色数少，能够说明问题的事物;如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑;尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。

5按钮

按钮设计要点：设计按钮要同页面的整体协调，不能太抢眼;有的页面很单调，还要依靠花哨的按钮来提一下;选用的字体，选用的插图，或插图及字体搭配，都要考虑字迹清楚，色彩简单一些，不要超过四种;很长的按钮可能就是框架的分界，尽量要纤细一些，否则页面会显臃肿。

6图片

为了美化页面，图片是任何一个页面都要用到的，图片的运用要合理。图片运用要点：图形的主体最好清晰可见;图形的含义最好简单明了;图片内所含文字应该清晰容易辨认;背景与主体明度对比比例应为3∶1到5∶1之间为宜;淡色系列的背景有助于整体和谐;淡色材质背景好，能与主题分离之浅色标志或文字背景亦可。

7文字

文字也是设计的。设计要点：每一行文字的长度最好20到30个中文字(40到60个英文字母);行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读;标题以H1到H3字号为佳，内文Font size=3到4级为佳;同版面字型最好在三种以内;文字的颜色最好也是三种以内;文字在颜色上要与背景区别;内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果;表格或清单内的字运用相同字型与字体大小，以利辨别。

8整体规划

有共性，才有统一，有细节区别，就有层次;防止设计与实现过程中的偏差;设计的各部分，要配合整体风格;不仅页面上各项设计要统一，而且网站的各级别页面也要统一;信息不要太过集中，以免文字编排太紧密;不要有太多分散注意力的点。动态闪烁要适中;页面留白部分，要根据平面设计原理来设计，注意分栏式结构不宜留白;还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好;首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片。

9功能易用性

导航栏应最先调入，以便访客快速前往所需信息空间;页面长度要短，使得用户在信息空间内可迅速移动;导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。

网页设计要减少这些设计行为，网页设计时，可以有个性、有特色、有创新，但有一些规范性的规则还是要遵守的，否则不利于蜘蛛抓取，也不讨用户喜欢。哪些设计行为是设计网页时避免出现的呢?又会带来哪些影响?下面就介绍这些在网页设计的过程中要减少的设计，相信大家看了就会明白。

10只重创新

现在对网站的要求越来越高，很多站长就认为创新重要，传统的都落后了，不值得提倡了。对此，专业人士表示，在设计网页过程中，不能忘记原则，不能认为新的就是创新，大众喜欢的创新才是真正的创新。那些稀奇古怪看起来不错的字体、图片，往往会影响用户的点击和阅读量。

11图片做导航

根据网站的优化原则，越简单的设计越好，而文字导航要比图片导航好的多，当然图片确实比文字漂亮，但是对于用户来讲，文字还是图片没有区别，而对于蜘蛛来说，文字更利于它们抓取，利于网站排名。

刻意追求个性化，增加网页本身的搜索难度，不仅仅是为难蜘蛛，也是为难用户，所以最好用文字导航，同时少用下拉菜单，避免用户查询之时感到混乱。

12表格布局

现在的表格布局已经非常落后，而且代码冗余，对优化极为不利。不仅如此，页面样式也没有那么自由，最好还是用CSS，既简单，又方便，最重要的是不影响网站打开速度。

13中转页面

不少站长为了增加页面的点击率或者是用户停留的时间，会采用继续浏览，请点击某某处的页面，这样的做法看起来是对站长有利，但是时间长了，其实好处并不大。尤其是为了获取更多的用户资源，不仅路径复杂，同时步骤也多，会让用户反感。

14添加过多广告

广告可以添加，但是尽量要少。为什么呢?我们从用户的角度出发可以了解到，谁浏览网页的时候蹦出一条条的广告，都会觉得非常反感，不仅阻碍用户阅读，同时也会降低用户的好感度。所以，最好不要添加。如果想要广告，最好是平面的，不要用浮动的。

以上这些行为就是在网页设计中要减少的，做了反而不利于网站的发展。

15尽可能兼顾不同用户的知识和技能水平

用户可能是新手、专家或介于两者之间，要根据用户情况设计界面。

使用适当的新人引导(四种主要的新人引导策略)

这四种用法刚好可以用一个2*2的矩阵来表示。根据下方图示选择最适合你界面的方式：

为新手用户添加提示而不干扰专家用户

使用卡片分类构建信息架构

若你想了解用户如何确定或概念化菜单分类，使用开放式卡片分类;

若你想了解用户如何将现有元素归类到预制分类，使用封闭式卡片分类;

16尽可能适应用户的操作流程

用户会有不同的需求，根据不同操作流程调整界面设计。让用户控制数据的呈现方式，让用户控制数据的排序方式

其他排序标准包括：

按字母顺序

按可用性

按分类

按日期

按距离

按热门程度

按价格

按相关性

按大小

让用户控制数据显示的数量，构建用户画像以区分具体操作流程，让用户通过新标签页打开页面

17很多用户习惯先打开页面，后续再去浏览

尽可能提高网页的可及性，让残疾人群也可以访问使用你的界面。这不仅是好的做法，还可以避免法律后果(看你做的是什么产品)

在HTML5中使用语义标签，使用多种提示来沟通反馈信息，大约8%的男性是色盲(Chan, Goh, & Tan, 2014)。不要单独通过颜色来传达信息，提供多种提示。

18尽可能兼容各种输入和极端个例

应该允许用户输入各种信息而无后顾之忧。解决自动生成信息带来的不好结果，使用支持多种输入格式的表单元素，显示能解决搜索者需求的结果，使用能处理错别字、同义词或变体词的搜索

19尽可能兼容所有媒介

界面需要在各种环境都能运作(如不同设备、浏览器等)，根据用户浏览器定制不同的操作指引，在小型设备上使用单窗口深入的方式

20排字艺术，字体

1. 排字艺术，是可以将复数的商品或设计变得具有统一感的关键
2. 在全部的风格指南中，包含了字体所有的详细说明。
3. 为了使设计保持简洁，限制可用字体的数量和大小是很有必要的
4. 一般的，从最多两种字体开始是一个非常不错的选择。
5. 一种用作标题，另一种用于正文。在大部分情况下，除此之外再也不需要其他字体

此外，该参考什么样的排榜样式，其他的设计师或开发者使用的是细体字或者是斜体字?使用什么样的风格会让人易于理解?这些都是需要考虑的问题。

21图像

不用语言，而是用图片展现出来吧。

1. 因为图像是动态的，所以这对设计师来说是非常有帮助的工具
2. 一目了然的传递信息，表现出在这之中你所包含的感情。
3. 为了传递出商品的信息或概念，其他设计师是怎样利用图片的，将这些方法详细记述在风格指南中是非常不错的方法

22网格与留白

1. 一个良好的设计，会留出与内容相同的空白空间
2. 在风格指南中，让我们来添加一些反应了这种效果的项目吧
3. 为了方便每次使用，你建立一个网格是非常重要的
4. 栏数或列数用来描述还剩下多少空间是非常不错的方法

23配色，色环

1. 配色是风格指南中必须的一项要素。创建出视觉上的层次感，让用户的情感与之产生共鸣
2. 项目的配色，设计师需要不断的尝试使之更容易工作
3. 如果在研究配色上花了大量的时间，设计师应该去参考风格指南，将注意力集中于设计作品的内容上
4. 通过使用相同的配色方案，可以为商品添加统一与亲近熟悉的感觉

24部件

1. 许多设计师和开发人员，将UI部件作为一个整体来考虑。各个UI部件都是独立的。
2. 通过使用这种方法，设计师可以重复利用组件，你可以完成复数的具有一致性的设计
3. 还可以利用有组织的UI组件，来使新设计的完成时间大大缩短
4. 考虑部件使用的地方，这对开发人员来说也是非常有帮助的
5. 从开发人员的角度来看，这些组建就如同乐高积木，可以很轻松的拼接在一起

25优化图片，获得更好的页面加载速度

学习如何通过选择正确的格式，来优化网页图片，并确保文件大小在可行的范围你是足够小的。虽然现在人们已经都在使用宽带，但仍然有人是拨号上网。此外，虽然移动装置技术的普及，但移动装置却不一定支持像宽频一样的速度，图片文件的大小可能还是会延长网页的加载时间，有可能把用户赶走的。

这里有个选择适合的文件格式的技巧：如果图片是单色，那最好保存成PNG或者GIF格式;如果是连续性的色调(如照片)则最好保存成 JPG格式。

有很多的工具可以帮助你进一步优化你的图片，降低他们的文件大小。可以参考这个工具列表来帮助优化你的图片。尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。

26保持干净和简单(即：简洁)

一个好的网页设计不光只是看起来好看而已，还要是用户友好型的。通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后问自己以下问题：

1.是否真的需要这个设计么?

2.这是什么组件是做什么用，它如何协助用户浏览?

3.如果我突然删除这个组件，大多数人会希望它“回来”吗 ?

4.如何把这些元素和目标、消息和网站的宗旨互相结合?

此外，尽管它可能是一个超酷的新概念或界面设计模式，但你还是要确保对你的用户而言该设计仍然是方便和直观的。人们习惯于通用性的交互模式、网站功能、和网络接口，如果你的设计的确很独特，确保它不是太模糊和晦涩。 要有创意，但还要保持简单。

27导航(条/栏)是最重要的设计

一个网站最重要的部分就是整个网站的导航。没有它，无论在哪个页面中，用户都会发生卡在这个页面离不开的状况。有了这明显的实际方向，我们将讨论一些建构网站导航时重要的点。

首先，在网站的导航结构上，投入足够的时间和很多规划是非常重要的。虽然这是常识，但仍然有很多设计师想当然地设计网站导航。摆放位置、风格、所用技术(javascript或CSS)、可用性和网页易读性，这些是你制作导航设计时需要考虑的。在没有CSS的状况下，你的导航设计应该也是可用的，这是基于文字基础的浏览器相容性。你可以尽量去嘲笑文字基础的浏览器，但它们在很多的移动设备上还是流行的。也许更为重要的是，对屏幕用户来说(99.99%的情况下)，没有CSS的导航功能照样可用访问。在没有客户端技术情况下(如JavaScript或Flash)，导航功能应该容易进入和使用的。用户可能因安全性或公司政策而没有开启或安装。

所以，制定一个导航系统可以放置的良好位置是必须的，例如放在一个显眼可见的地方。一个好的导航功能，只要网页载入就出现，而不需要鼠标再向下滚动。这是为什么页面要保持干净和简单的重要作用，一个复杂且非常规的设计可能会让用户困惑。哪怕只有一瞬间，用户也必定不会纳闷：“网站导航在哪里?”

最后，对网站建立阶层结构，多层次的管理。确保它在父层与子层之间易于导航。此外，不管在哪一个网页当中，也应该能很容易到达高层的页面(例如网站首页)。最主要的目标就是你的网站导航，尽可能减少操作(动作)，努力而让用户到达他想要浏览的内容。

28明智和有条理地使用字体

虽然有成千上万的字体，但你真的能用的只是一小部分(至少要等到主要的浏览器完全支持CSS3)。 所以坚持使用网页安全字体。如果你不喜欢网页安全字体，可以考虑利用sIFR或Cufon逐步增强的网页设计。保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，使用户轻松愉快地阅读和扫描内容。

也许一个网页设计师常常犯的错误就是使用不对的字体大小。因为我们想尽可能的将内容都塞在一个网页中呈现，所以我们有时设置字体大小而让用户感觉到不舒服。如果可能的话，尽量保持字体大小12像素以上，特别是对段落内容。虽然很多没有遇到因为字体太小而造成阅读上的困难，但是想想老人家、近视眼和其他类似视觉障碍的族群吧。

29理解色彩无障碍性

说完字体后，我们还需要指出使用正确颜色的重要性。例如，黑色文字在白色背景，如果使用高对比度，橙色背景上的红色文字会令你的眼睛感到紧张。

此外，使用一些对特殊形式色盲的用户友好的颜色(检查工具名为Vischeck，可以测试某些类型的色盲)。

有些色彩组合只适合运用在前景色的部分，而不适合做背景色。举个例子来说，深蓝色的文字搭配粉红色的背景与粉红色的文字搭配深蓝色的背景，都是使用两种一样的颜色，但用在不同的部分则影响了它的可读性和阅读的舒适度。重要的是，不仅要使用良好的色彩组合，而且要把它用在页面中的合适元素上。

30知道如何编写代码

随着各种所见即所得的网页编辑器充斥市场，网页设计已经成为简单的1-2-3步骤就能设计好一个网站。然而，大多数网页编辑器掺杂了不必要的代码，使你的HTML结构设计不当，难以维护和更新，导致网页膨胀。

通过自己编写的网页代码，能得到简洁的代码，能够愉快方便地阅读和维护。你可以自豪地说是自己写出来的代码。但知道如何使用所见即所得的IDE或预览功能并不会妨碍学习 HTML和CSS。你要知道发生了什么事情，才能创造有效并高度优化的网页设计。

31不要忘记搜索引擎优化

在设计网站时，一个好的网页设计师应该永远牢记基本的SEO概念。例如，网页内容结构、用文字表示标题(即网页的标题和标志)。此时，以前学习的如何合理编码的能力就派上用场。认识正确、语义和基于标准的HTML/CSS 后，你会很快认识到Div比表格布局好得多，不仅更为准确地展现内容，而且对搜索引擎排名也有帮助。另外，知道用CSS更换背景、文字和图片也是一个好主意。

32理解人是没有耐性的

普通人用几秒钟就决定是否要阅读更多网页内容或到另一个网站。因此，作为一个网页设计师，要有个好方法，能在这珍贵的几秒钟鼓励用户选择前者(看更多内容)。

要知道，如果用户在网页头部看不到感兴趣的内容，没有多少人会向下滚动，去查看整个网页的内容。所以，在网页头部很容易看到的地方放置网站上的重要元素，但也不要过度拥挤在上半部分网页，否则会吓到用户，而不会往下继续看内容。记住上半部分网页设计的卖点：视其为推销员，使人们有购买想法，即他们想在你的网站上看到什么。

33了解(并意识到)浏览器的兼容性

当一个网页设计师必须要知道的一件事，就是你的工作环境(浏览器)是挑剔和难以预料的。如果你的网页设计只能运行在的几种网页浏览器，那是不够的，你需要尽可能多浏览器下测试。这里有一款工具Browsershots，可以测试浏览器兼容性。

34使设计有灵活性和可维护性

一个好的网页设计师可以确保以后可以很容易更新或修改网站。设计一个有可塑性、易于维护的网站，是一个伟大网页设计师的标志。让你的工作尽可能从结构化转向模块化。

网页设计这个行业是动态的，而且还很“年轻”。事情往往在短暂中变化。牢记这种思想，将推动建立更加灵活的网页设计。

35在界面中突出强调一个聚焦点

每个界面都应该有一个清晰的起点。用户应该从哪里看起?要设计清楚。

在页面标题部分添加视觉对比

通过视觉的层次引导用户，通过界面引导控制用户体验。他们应该从哪里先看起，第二和第三步又看哪里?设计要建立层次结构。

1. 避免在构图中补漏留白
2. 使用单列布局
3. 重叠设计元素，强调连续性

36使用格式塔原则进行布局设计

根据格式塔心理学，人会通过简化感知克服混乱。所以我们将事物分组，将元素分类，我们看“整体”。

这些原则包括：相似，接近，闭合，连接，连续和图形/背景。

1. 按照接近性将相似功能或菜单项分组显示
2. 标题位置与对应章节内容更靠近
3. 限制标题与章节内容在同一界限内
4. 在不干扰用户的前提下呈现界面变化
5. 有一些界面变化会发生在用户使用期间，这些变化要做到明显但不干扰用户。
6. 用明显的动画呈现界面变化
7. 将出错的元素区分显示出来，错误提醒信息放置在表单顶部

37删除或弱化不必要的信息

人的注意力是有限的。不必要的元素会消耗这些注意力。因此，保持用户专注在重要信息和功能上。

1. 弹出或模态窗口背景模糊处理
2. 在所有图像中大限度地提高数据墨水比率(让数据更凸显)
3. 去掉不必要的边框
4. 删除冗余或不言自明的说明
5. 隐藏不常用但必要的设置、功能和信息

38提示首屏以下是否还有内容

现在大多数浏览器在页面处于非活动状态时隐藏滚动条，你需要“滚动提示”告知用户首屏以下是否还有内容

1. 通过首屏延伸页面下方信息元素
2. 添加阴影以指示深度
3. 用文字或图形表示有更多内容

39让常用功能和重要数据信息更接近用户

1. 预测用户的意图，让他们尽可能接近目标。
2. 筛选出或跳至用户正在搜索的条目
3. 将用户常选项目列为默认选项
4. 产品列表页上把重要数据信息展示出来

很多时候用户需要像踩弹簧高跷杖一样，点击一个产品，查看信息，返回上一页，再反复操作以查看其他产品。这种设计的可用性差。应把重要信息直接放在主要页面，减少用户反复操作的次数。

如果你怕这样页面会杂乱，也可以设计成鼠标悬停时显示

1. 鼠标悬停时显示有用信息
2. 常用功能直接展示出来
3. 用仪表面板方式展现主要数据和状态
4. 把常见答案放在下拉列表的头部

40交互状态的及时反馈呈现

通过传达所有相关信息减少不确定性。

1. 在机器驱动的任务中显示当前进度和剩余时间
2. 如上传文件是系统在处理，用户不知道内部运作情况，通过显示进度条可以让用户知道进展。
3. 复杂或冗长的交互状态要及时反馈呈现
4. 按次序显示操作步骤总数
5. 显示类目下的条目数

41同一任务，可为客户提供多种完成方式

用户喜欢的操作方式不一样。为同一目标提供不同路径，让用户选择最符合他们自己的方式。

1. 用户可通过用户名或电子邮件登录系统
2. 为重复操作类功能提供键盘快捷键
3. 让用户可以拖拽元素
4. 让用户直接编辑数据信息

42反馈呈现交互动作的限制条件或参数要求

为每一个交互动作做好准备。用户需要什么?他们如何继续?

1. 描述清楚你需要用户输入什么
2. 实时显示密码要求并反馈输入状态
3. 为表单元素预填通用参数
4. 显示表单的必填和选填信息

43反馈显示交互动作的预期结果

1. 在用户进行交互操作之前，他们应该了解预期结果是什么
2. 使用描述性按钮标签
3. 根据当前的输入，显示结果预览
4. 按次序显示或预览下一个项目
5. 使用智能菜单项明确操作内容

44当用户取得进展时，给予奖励或肯定

用户取得进展了吗?他们的交互成功了吗?让用户知道，同时引导他们继续。

1. 保证链接与目标页面的一致性
2. 为新加入用户提供速效指引环节(如迅速建立人脉)
3. 进度条从大于0%的地方开始

45尽可能少让用户做计算

1. 千万别把计算这种事情丢给用户，让计算机来处理。
2. 显示剩余数量

46在界面内体现用户当前所处位置

界面就像机场，如果没有“你在这里”的标记，用户会迷路，因此记得提供标记。

1. 在导航菜单上突出当前所选
2. 在复杂的界面中提供面包屑导航或步骤图示
3. 在页面标题前面部分放置描述性或有用的信息

47简化选择类任务

1. 做选择需要费脑筋，简化这类任务让用户少费神
2. 指明多数用户选择的选项
3. 提供常见搜索关键词列表
4. 下拉分类菜单置于相应导航菜单内

48使用常规的网页设计界面

创新很好，但不要跟常规的设计方式偏离太远。用户习惯于某些布局、结构。常规设计之所以流行，是因为他们确实可行。

1. 使用常规的导航菜单
2. 把实用功能放在右上角

49每次交互动作后提供反馈

1. 用户跟界面进行互动后，需获得实时反馈。操作成功还是失败了?发生了什么变化?
2. 重要的交互动作后反馈提示成功消息
3. 显示当前鼠标停留在哪个项目上

50最小化等待的负面效果

1. 消灭所有不必要的等待。如果确实要用户等，则最小化该负面效果。
2. 加载动画效果使用冷色调减少对用户刺激

51蓝色减少刺激(提高放松程度)，蓝色加载元素可让用户觉得加载更快(Gorn et al., 2004)

1. 长时间等待时保持用户活跃度(别人他们干等)
2. 防止用户上传不支持的文件
3. 实时统计显示任务进展

52尽可能减少用户对记忆的依赖

1. 别让用户去记住任何东西，将相关信息显示出来
2. 让表单标签保持一直可见
3. 避免用户点击后就消失的行内标签
4. 占位文本放到表单元素的外边
5. 为可移动输入添加复制按钮 ( Add Copy Buttons to Movable Input )

53尽量少用锯齿状视图模式

1. 减少用户眼睛来回移动的次数，让各项补充数据保持接近。
2. 合并相同的数据字段帮助用户进行对比
3. 让表单标签紧贴相应元素并对齐

54反馈显示哪些项目是可点击或交互的

1. 用户需要识别哪些元素是可交互的(并且知道如何交互)。
2. 使用3D特性设计按钮
3. 为可拖拽元素添加点状纹理
4. 使用图标和符号传达一个交互动作的意图

55你可以通过PowerPoint 或 Keynote的各种形状制作大部分图标

1. 用常见的文字和符合来沟通
2. 大多数情况下，清晰明确胜过创意和术语
3. 讲用户懂的语言，不讲程序语言
4. 出现外语时，提供翻译按钮
5. 颜色的选择要与语义保持一致

56当颜色跟语义不一致时，会增加用户处理信息的困扰

1. 尽可能提高界面的可浏览性
2. 多数用户采用浏览扫读的方式处理内容，我们需要接受这种行为。
3. 设计界面时尽量适应这种泛读浏览方式。
4. 保持段落简短，高亮关键词组
5. 把重要信息放在列表的开头
6. 给表格添加交替的行条纹背景
7. 编写独立副标题(不要一篇文章就一个大标题)
8. 用视觉变化拆分文本

57尽可能提高文本的可读性

很明显，文本需要让人易懂，有些技巧能让文本更具可读性。

1. 让文本和背景具有鲜明对比
2. 背景上显示文本需要注意，可能需要做一些叠加或模糊处理。(以作者照片为例…)
3. 正文的主要部分采用左对齐

58界面设计风格保持一致

1. 风格不统一的话用户需要花更多时间学习界面。保持统一的布局和外观可以简化学习过程。
2. 制定一份前端风格指引

59制定一份稳定，总结界面各元素的设计规格说明

其他元素包括：

? 颜色

? 网格和布局

? 位置和定位

? 大小和形状

? 标签和语言

? 导航

? 表格

? 列表

? 链接

? 声音和腔调

60防止错误产生

1. 设计界面时，不要急着出方案，要尽力设计“无错可犯”的界面。
2. 按钮在用户点击后进行去除、禁用或替换处理
3. 别跟用户说只能提交一次。可以多次点击的，用户就可能点多次。用户点击后禁用按钮，才能真正避免多次提交。
4. 只提供可以接受的输入选项
5. 在表单元素中使用勾选启用、勾选可见的设计方式
6. 文本输入框结构跟输入格式要求保持一致

61监控典型错误信号

界面上有哪些常见错误产生?找出这些错误的信号，做好这些信号的监控。

1. 搜寻与用户意图矛盾的用词
2. 若用户已购买过该产品，提醒他们
3. 对功能强大的按钮要区分开以避免误操作
4. 用户会走神，这无法避免。设计时要从视觉上明显区分开那些功能强大的按钮，尽量减少误操作的可能性。
5. 通过间隔和颜色区分强大功能按钮
6. 为重大且不可逆的操作添加约束条件
7. 提供便利的方法恢复或退出操作
8. 总是给用户提供选择返回上一步操作或安全/可识别的区域
9. 使用恢复操作而不是确认操作
10. 为各页面或功能提供“逃生舱”(退出操作)
11. 为弹出窗口或模态窗口提供关闭按钮

62尽量减少用户离开一个系列操作步骤的负面影响

1. 允许用户以原来的数据返回到相应步骤页面
2. 保存用户提交的数据
3. 让用户回到原来的操作步骤页面(别让用户又从头开始)

63加大可移动路径或可点击区域

1. 用户并非完人，他们会误操作，因此要提供有弹性或包容性的设计。
2. 为小按钮添加一个透明边框(加大按钮的点击区域)
3. 为弹框或下拉菜单添加一点小小的延迟
4. 给整个菜单选项容器添加超链接(不要仅限文字区域)
5. 给主菜单、列表项和辅助图标都加上超链接

64用户经常点到不能点击的地方。不要试图矫正这些错误，相反地，为这些常见区域添加点击功能

1. 提供有用和支持性的出错提示
2. 不要给出“发生错误”这种提示。解释出错原因，最好能给出解决方案。
3. 解释验证出错的原因
4. 对于复杂出错提示要提供相关文档或帮助链接
5. 避免在出错信息中写“你”

65记录用户的最近几次操作

1. 在界面上提醒用户最近几次操作
2. 显示用户最近几次搜索
3. 已访问链接用不同的颜色区分
4. 指出哪些项目用户已经看过

66分析用户行为找出界面存在的问题

1. 持续迭代改进界面设计，可以从下面这些小技巧开始
2. 在适当位置收集客户的反馈信息
3. 添加404错误次数上升的预警设置
4. 找出那些用户反复访问的页面
5. 如果一个页面浏览数太多(而独立客户数少)，就需要仔细检查页面是否有问题导致用户反复访问。

当前名称：66个网页制作的技巧
文章来源：https://www.cdcxhl.com/news/166389.html

成都网站建设公司_创新互联，为您提供网站改版、云服务器、微信小程序、网站制作、品牌网站制作、做网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联