web界面设计原则

Just_like_fire

已于 2024-03-29 17:36:31 修改

阅读量1.4w

点赞数 13

分类专栏：前端文章标签： web 界面搭建搭建原则

于 2019-07-08 12:06:32 首次发布

本文链接：https://blog.csdn.net/Leo_csdn_/article/details/85259832

版权

6 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

4、不要用提示框阻断用户。很多时候如果不是有必要，不要弹出一个confirm让用户确认。如果仅仅是提示用户操作已完成就更没有必要让用户再点击一下确认按钮了，贸然的阻断用户是很不友好的，这时需要使用toast这类非阻断提示，提示出现后几秒自动消失。而不是为了提示一下，阻断了用户的操作。

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

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

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

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

除非你是个优秀的用户体验设计师，否则请不要凭空臆想的搭建界面，而是尽量基于已有的模板进行稍加改动。常用的几个web框架提供了很多界面布局模板供你选择使用，如果你见过其他感觉不错的设计方案，也可以模仿着别人的案例搭建界面。总之，你的界面最好是有例可循，才可以避免界面丑的太离谱。

关注

专栏目录