web界面的设计原则有哪些 web界面的设计原则有哪些要求

web界面设计原则主要有这些：一致性原则;主次性原则;扁平化原则;及时反馈原则。如果想具体了解web界面的设计原则有哪些，那不妨接着往下看吧!

1、一致性原则

对于相同或相近的业务功能，操作方式保持一致，培养用户的操作习惯。比如查看联系人功能，如果有的页面是点击弹出窗口查看，有的页面是点击从右侧展出内容，就会让用户产生困扰，降低用户体验。所以要不就统一的弹出窗口查看详情，要不就统一的从右侧展开详情。

此外，对于组件颜色、组件尺寸、组件摆放位置也尽量保持一致。比如弹出窗口，类似的业务不能有的窗口大，有的窗口小;一个查找联系人的输入框，不能有的页面放在右侧，有的却放在左侧;确认按钮，不能有的页面是蓝色，有的页面是灰色。

2、主次性原则

避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。

3、扁平化原则

这里说的扁平化除了指界面效果的扁平化外，还包含了操作的扁平化这一层意思。即：

（1）降低页面层级，能够一个界面解决的不要弹出窗口，能够弹出一层窗口解决不要弹出两层窗口;

（2）降低操作复杂度，以清晰明了的方式让用户完成操作。比如对于复杂的表单填写进行分步处理，每一步给出指引;

（3）降低鼠标点击次数。比如一个新增用户操作，如果是每增加一个用户都要用户点击弹出一次窗口，完成后点击“确定”窗口关闭，添加第二个人再弹出窗口。不如加入一个“确定并继续添加”按钮，这样窗口并不关闭，让用户每次添加用户都可以少点两次鼠标，降低用户使用系统的疲劳感;

4、及时反馈原则

任何一个产品，即使用户界面做的再好，也离不开用户引导和信息提示。操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感。包括：

（1）加载反馈。比如当用户点击一个按钮时，其实后台已经开始处理业务，但如果界面无任何反应会让用户觉得操作失败，所以当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通;可以给一个进度条或者一个信息提示，甚至是一个转圈的小图标表示正在进行中也可以;若加载时间较长，应提供取消操作。

（2）录入反馈。比如操作过程中可通过校验规则，让用户及时发现并纠正错误;使用输入框组件的自动完成功能，用户输入时，下拉列表会随着输入的关键词显示匹配项;实时搜索，随着用户输入，实时显示搜索结果等。

（03）结果反馈。操作结束后，给出提示告知用户。尽量使用toast这类提示，这是不打断用户操作的轻量级提示方式。必要时也可使用弹窗反馈，弹窗是很强的反馈机制，只有在传递非常重要，且可操作的信息时才需要使用它。

1、网页尺寸

制作网页时，一般选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。

但是并不代表我们可以在整个画布上作图。

网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。

2、网页字体

字体设计的总原则是：可辨识性和易读性。

网页的文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体，英文则建议使用arial无衬线字体。

常用的字号大小有以下几种：

12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。

14px 则适用于非突出性的普通正文内容。

16px、18px或者20px 适用于突出性的标题内容。

1、图片要素

图片并不适合于所有的网页，而是和网页的主要内容有关。

像股票网站、医药网站等，来访者并不在意网页是否可以做出精美的图片，他们所关心的只是网站中的内容，如果加入大量的图片，来访者反而觉得过多的图片会影响访问的速度;而像游戏网站、风景名胜网站和影视介绍网站，则需要大量精美的图片作为依托。

在这类网站中，图片是一个极其重要的要素，如果这类网站少了做工精美的图片，那么整个网站都会显得黯然失色。要做出精美漂亮的图片，就需要设计者熟练掌握图形图像设计软件，还要有一定的美术基础和创意技巧。

2、排列方法要素

网页的排列方法也叫做网页布局，这是网页设计中尤为重要的一环。网页作为一种版面，既有文字又有图片，文字有大有小，有标题和正文之分，图片有横竖之别。

我们要用完美的格式将文字和图片同时展现给来访者，而不能将其简单地罗列在一起，给人一种杂乱无章之感。

关于网页布局，常见的有“国”字型、标题正文型、拐角型、左右框架型、上下框架型、综合框架型等多种方式，我们要根据网页的内容来进行选择。

如网页内容丰富繁杂，就需要考虑用“国”字型或拐角型，而如果网页内容比较少则可以选择标题正文型。关于网页布局，我们要灵活多变地来进行设计，这样才能不断提高和丰富我们的网页。

3、主色调要素

主色调要素也就是色彩要素，色彩在网页中占有很大的比重。我们在进行网页主页设计时，利用合理清新的色彩可以弥补主页上的其他不足。

当然，在网页页面的色彩搭配选择上与网站的主题是分不开的，一个网站在色彩的选择上不能太多也不能太少，这样既可以避免浏览者因色彩过多而迷失方向，也不至于色彩单调而乏味。