联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

怎么做Web界面设计?分享Web界面设计原则

Time: 2021-09-18

         现在有很多的界面设计,人体界面设计、Web界面设计等等,那么怎么做Web界面设计?相信很多朋友对于这方面都是非常感兴趣的,今天就让faceui来给大家普及一下关于Web界面设计的基本知识。

  Web界面设计

  UI设计过程中,常常要用到WEB界面设计,在Web已经进入崭新的时代的今天,界面的设计显得非常重要。

  Web设计中排版很重要。好的排版设计,不但要美观,更多的是要将信息内容有效的组织、排布,使其规范有序、清晰明确,便于用户高效、准确获取相关信息,让Web设计更友好、易用、真实可信。这需要设计师深入理解所设计的信息内容,提高信息内容的组织、加工能力,将内容本身作为设计元素,依照设计原理有效排布。良好的排版有助于Web设计更加简洁有效。

Web界面设计

  图片来源于网络

  怎么做Web界面设计

  一、一致性原则

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

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

  二、主次性原则

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

  三、扁平化原则

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

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

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

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

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

Web界面设计

  图片来源于网络

  四、及时反馈原则

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

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

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

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

  五、有参考原则

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

  怎么做Web界面设计?以上就是faceui给大家分享了做Web界面设计的一些实用知识,看完后,希望大家在做Web界面设计的时候,一定要注意一下Web界面设计的业务功能,这是整个界面设计的最重要的部分。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开