广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

设计原理丨UX/UI设计通用法则合集
发布日期:2025-04-14 11:53:42 浏览次数: 932 来源:季风抽屉

 尼尔森十大可用性原则 



一、系统可见性原则

看见的东西别藏起来,让用户一眼就知道能干什么。


应用系统应该能够即时让用户了解到发生了什么,让用户随时知道自己所处的状态,无论用户做出什么操作,应用系统都应该适时做出反馈,防止用户产生错误的理解或做出错误的操作行为。


当系统响应时间小于1秒,通常是可以接受的;相反长于1秒,用户就会产生轻微焦虑感;若超过10秒钟还没有得到反馈,用户通常会认为操作失败了并感到气愤。


告诉用户处在系统的什么位置知道自己在做什么系统在做什么,系统做了什么


二、环境贴切原则

应用系统应该使用用户熟悉的语言、文字、语句或者熟悉的概念,而非系统语言或过于专业的术语。应用系统中的信息应该尽量贴近真实世界,让信息更自然,逻辑上也更容易被用户理解。


模拟现实世界的产品或者使用映射,能够利用人们现有的知识,降低学习成本,使用户轻松快速的理解界面,熟悉是这些体验让用户愉快的原因。


(设计要符合使用场景,别让用户觉得“这功能放这儿好奇怪”。)


三、用户可控原则

用户经常会在使用某些功能的时候发生误操作,这时需要一个“紧急出口”来帮助他们从当时的情境中恢复过来,可以自由控制返回或者下一步,可以自由退出。


重要的不可逆转的操作要给用户提供明显的提示,否则将对用户产生严重影响。例如:删除文件时,要明确警示是否确认删除。


不可逆转的操作提供警告,适当的时机提供取消或者撤销的功能


四、一致性原则

同一产品内,同样的文字、状态、按钮,信息的视觉呈现,交互方式等要保持一致。


产品内部保持一致,可以快速学习,记忆和熟悉产品的功能,减轻用户的思考负担。


与业内同产品保持一致,保留用户在使用大众型产品时形成的习惯,减少新的结构变化带来的学习成本。


(文字一致、反馈一致、操作一致、色彩一致、结构一致


五、防错原则

用户选择操作之前,就要防止有错误的选择。

用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。


危险操作之前请用户确认,可以利用颜色或者动效做警示,填写信息时举例说明填写格式


六、易取原则

把组件、按钮及选项可视化,提供可选项,使用户一看就懂,减少用户对操作目标的记忆负荷。


别让用户去回想我刚才做了什么选择,让他随时能知道自己做了什么选择,以及自己当前在哪里。


(用户想要的东西,必须随手就能拿到,别让人家翻山越岭


七、灵活高效原则

考虑新用户的需要,还要考虑到熟练用户的需要。不仅对新用户来说简单易学,还要对熟练用户来说高效,快捷,尤其是可以方便地使用频率较高的功能。


例如:使用新APP时的新手指引,允许跳过,并且能从“关于”或者“设置”中再次打开,而绝不再次主动打扰你。


(既要让新手觉得简单,也要让高手快如闪电


八、优美且简约原则

用户界面需要保持美观简洁,去除不相关的信息或几乎不需要的信息,增强用户对有用信息的注意力。


(避免界面元素过于杂乱,突出重点信息显示)


九、容错原则

发生错误时,用简洁的文字解释错误信息,指出错误是什么,并且给出解决建议。


(错误提示要直观醒目,提供建议,或者系统能够自动纠错)


十、人性化帮助原则

提供帮助信息,要易于查找,并且简短易懂。


简单一两句能说清的,就在问题旁提供简短说明;

一两句话不能说清的,可以举例说明;

有必要时,提供帮助中心的跳转连接直接打开,而不是去搜寻阅览。


(帮助文档方便用户查找,便于理解和应用)



 交互设计七大定律 



一、菲茨定律(费茨法则)

1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。


定律内容:

从一个起始位置移动到一个最终目标所需的时间由“到目标的距离”和“目标的大小”两个参数来决定(下图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。



菲茨定律(Fitts’s law)证明了获取目标的时间,取决于目标和当前位置的距离+目标的大小。


简单来说就是,离目标距离越近,所需的时间越短;目标尺寸越大,完成速度越快,时间就越短。


设计中的应用:

1、按钮等可点击元素在合理的大小范围之内

放大可点击元素的尺寸,用户就可以轻易选中,小而远的按钮意味着用户要移动比较长的距离,花费更多的时间。


(放大也是有限制的,如果按钮尺寸已经足够大了,那么再放大尺寸,也并不会提高可用性和用户操作效率


2、缩小移动距离

移动端用户通常为单手操作,所以会把按钮和常用操作元素放在页面下方的易于操作区域。

两个或多个操作中,通过缩短可交互元素之间的距离来提高用户的使用效率。

相关的内容或交互元素彼此靠近,可以减少它们之间移动所需要的时间和距离。


(并不是所有操作都需要缩短距离,是想让用户做快一点,还是慢一点,根据需求选择相应的交互方式)


3、屏幕的边缘和角落

因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。


二、席克定律(希克法则)

席克定律Hick’s Law,也叫Hick–Hyman law,是以英国和美国心理学家 William Edmund Hick 和 Ray Hyman命名的。在1952年,两人通过实验证明了一个人可能做出的选择与做出决定所需的时间的关系:选择数量的增加会以对数方式增加决策的时间。


定律内容:

人在面临选择(n)越多的时候,所要消耗的时间(T)就越长。

用数学公式表达为反应时间 T=a+b log2(n),a表示跟做决定无关的总时间(前期认知和观察时间),b表示根据对选项认知的处理时间,n表示同样可能的选项数。


例如有2个菜单,每个菜单有5项,用户反而会从1个菜单有10项中做出的选择更快


设计中的应用:

1、精简选项

隐藏多余的选项也是一种方法。例如:支付宝首页的功能模块,支持用户自定义编辑。


2、区分层级,突出重点

如果无法删减选项,可以通过位置、留白、色彩、尺寸、字号、层级关系等方式,突出显示推荐信息、重点内容、以及用户高频使用的选项。通过这样给用户预先区分好主次关系,可以方便用户快速选择。


3、提供默认选项,降低用户的选择成本

例如,“收藏”功能就是为了后续能够快速找到,“标签”是为了方便整理。


4、分解复杂流程

分解复杂的流程,让用户一步步进行操作,降低多个步骤多个选项的干扰。


(一句话,用户面临的选择越多、越复杂,做决定的时间就越长)


三、米勒定律(7±2法则)

米勒定律,也叫“神奇的7±2法则”,他指出普通人只能在工作记忆(即短期记忆)中保持7±2项信息。


1956年由认知心理学家乔治·米勒发表于《心理学评论》,经研究发现普通人类在工作记忆中可以保持感知“信息块”的数量是7±2项,也就是5~9项。


设计中的应用:

1、减少选择

这点同席克定律有共通之处,用户的工作记忆有限,太多选择就会陷入决策瘫痪,因此应该尽量减少用户在任何时刻必须做出的选择。例如,PC端导航或选项卡不超过9个,APP标签栏不会超过5个。


(如果导航选项过多,可以对选项进行分组、增加层级结构来展示子信息。在PC端比较常见的,通常都会有二级导航、三级导航;而移动端也会把功能放到二级页面、三级页面)


除了增加层级结构以外,还有一种方案是展示重要功能,收纳次要功能。


2、信息分组

例如手机号、银行卡、身份证号等进行分段,方便识别,减少错误率;


相关的信息组成一个“信息块”,通过色彩、大小、间距来区分层级,便于用户浏览和筛选信息。而不同“信息块”之间,通过间距来区分。在卡片化设计、无边框设计的趋势下,注意间距的设置。


流程分步骤,将冗长或复杂的流程分解为内容较少的单元项,例如,注册流程填写资料


3、减少记忆量

让用户选择而不是输入;自动读取、记录信息,减少操作。


四、奥卡姆剃刀原理(简单有效原理)

奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)又称“奥康的剃刀”,是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。


这个原理称为“如无必要,勿增实体”,即“简单有效原理”。可以理解为条件相同的情况下,要求的越少的那个就越好,越有价值


设计中的应用:

1、两个功能相等的设计,那么选择最简单的

不必要的元素会导致设计效率的降低,可以去掉这些干扰元素,这样页面会比较纯粹、简洁。


(简单并不肯定是好的,也不是否定复杂就是不好的。其核心是当两个设计方案都能达到目的是,选择简单的那个,更容易让人理解,传达效果更好,以小博大)


2、只放必要的东西

例如,经常会听到“你看这这么空,我们不如放点图文”。增加流程以外的内容,势必会对用户操作进行干扰,降低表单填写效率。


3、减少点击次数

让用户通过很少的点击就能找到他们想要的东西,不要让他们找一个内容找得很累。

4、更少的选项

过多的决定也是一种压力,减少用户的思维负担,让用户思考少一点,这样用户浏览会更顺畅,心态更平和

五、泰思勒定律(复杂性守恒定律)

复杂度守恒定律(Law of conservation of complexity)于1984年由 Larry Tesler提出,也称泰斯勒定律(Tesler’s Law)。


定律内容:

每一个过程都有其固有的复杂性,且存在一个临界点,超过了这个点就不能在简化了,只能将固有的复杂性从一个地方移动到另一个地方。



系统的总复杂度是固定的,简化用户操作的同时,会增加其他方面的复杂性



设计中的应用:

通过技术或其他手段转移,来提升产品的体验

例如,遥控器的设计演变,遥控器的功能减少了,但是电视机的界面和交互复杂度提升了。


用户完成起来困难、错误风险高的任务,可以尽量转化给系统完成。

例如,添加银行卡时,用户拍照添加的功能,由系统识别,减少用户的操作复杂度。


(当你的设计陷入困境时,不妨用“复杂性守恒定律”来平衡一下,去思考目前的优化是否是真的优化)


六、接近法则

接近法则(The Law Of Proximity)来自格式塔理论,根据格式塔心理学:当对象距离太近的时候,意识会认为他们是相关的。

眼睛在认知事物时具有自动分组的倾向。元素之间并不需要紧紧挨着,只需要相互靠近,大脑就会将其视为一个整体。

设计中的应用:

1、将有关联的信息尽量摆在一起

例如,APP中的设置界面,具有相似属性的功能会彼此靠近成为一个组合,而组与组之间又相互远离,形成独立的单元。


2、组合

当元素与元素相互靠近,他们就会被看成一个整体。

例如,登录页,输入内容下边一定会有一个按钮,因为输入之后需要点击按钮来提交,第三方快速登录与按钮之间的距离拉开,这样又形成了一个新的组合。整体看上去又是一个更大的组合。


七、新乡重夫:防错原则

由世界著名的品质管理专家新乡重夫( 1909年-1990年)提出,即在过程失误发生之前加以防止。

防错法则认为大部分的出错都是产品设计的不够优秀,而不该责怪用户操作疏忽,通过设计手法可以把出错率降到最低。防错法则的核心观点是,如何有效的在用户出错之前就尽量避免错误的发生。

设计中的应用:

1、自动检测

例如,APP中的登录界面,输入框没有内容或没有输入密码时,登录按钮处于置灰禁用状态,只有两者都满足了才可以正常点击。


2、二次确认

重要的场景让用户二次确认,告知用户再次考虑自己的行为结果,减少出错率,将失误降至最低。


3、视觉暗示

不能选的选项置灰或隐藏,避免用户点击后报错或没反应;不可恢复的操作,给强标识,例如,“删除”按钮标红色。


(防错原则简单概括为:轻松、简单、安全、自动,可以有效提升产品的用户体验,甚至提升用户对产品的良好印象和信任度。)



 格式塔七大基本原则 



一、简单原则(简单对称)

人脑喜欢“偷懒”,越简单规整的图形越容易被记住

设计中的应用:
  • 图标设计:用最少的线条表达功能。例如,微信的“发现”页签,用图标表示动态。

  • 布局对称:导航栏图标居中堆成,避免杂乱。例如,抖音底部Tab栏的均衡分布。


二、接近原则(亲密性)

距离近的元素会被认为是一组,距离远的则会被分开看待。


设计中的应用:
  • 表单设计:标签和输入框贴近。例如,注册页面的“用户名”和输入框间距小,和下方“密码”区块间距大。

  • 功能分组:电商详情页的“加入购物车”和“立即购买”按钮并排贴近,和上方的“收藏”按钮分开。


三、相似原则

看起来相似的元素(颜色、大小、形状)会被归为一类


设计中的应用:
  • 按钮统一:相同功能的按钮使用统一风格。

  • 信息分类:用颜色或形状区分不同类型的信息。


四、闭合原则

即使图形不完整,大脑也会自动补全缺失的部分。例如,IBM 的 logo 由蓝色条纹组成,但人们仍然能认出字母“IBM”。


设计中的应用:
  • 加载动画:转圈的半圆线条让用户感知“完整圆圈在加载”。

  • 卡片设计:用阴影暗示完整卡片,即使边缘被屏幕切割。


五、连续性原则

人们的视线会沿着平滑的线条或方向移动,而不是突然中断。


设计中的应用:
  • 横向滚动:音乐APP的“推荐歌单”横向平铺,暗示可左右滑动。

  • 进度引导:用箭头或渐变线连接注册流程步骤。

六、主体/背景原则

“一眼锁定C位”--人会自动区分主角和背景板。

设计中的应用:
  • 弹窗设计:弹出提示时背景变暗模糊,聚焦中央对话框。例如,支付宝的确认支付弹窗。

  • 按钮层级:重要操作用高对比色。例如,滴滴打车的“立即呼叫”按钮用亮橙色,背景用白色。


七、共同命运原则

朝同一方向移动或变化的元素会被视为一组


设计中的应用:

下拉刷新:列表下拉时,所有内容同步向下移动+出现加载动画。

多选操作:勾选多个文件后,底部操作栏同步升起。


 IOS设计原则 



一、审美完整性(Aesthetic Integrity

APP的外观和它的功能必须般配


设计中的应用:
    • 股票软件应该冷静专业(用深色+数据图表),不能搞得像游戏一样花里胡哨。

    • 游戏APP:可以炫酷炸裂(闪光的特效+夸张的动画),因为要制造兴奋感。


    二、一致性(Consistency

    别让用户重新学规矩,以符合用户期望的方式整合功能和行为

    设计中的应用:
      • 返回按钮永远在左上角(用户根本不用思考)
      • 如果违反:某个APP偏要把返回按钮放在右下角,用户会抓狂:“这什么反人类设计?!”

      三、直接操作(Direct Manipulation

      “所见即所摸”--手指动作要能直接改变屏幕内容,就像摆弄真实物体。


      设计中的应用:
        • 照片放大:直接用手指捏合缩放。
        • 切换歌曲:在锁屏界面右滑切歌。

        四、回馈(Feedback

        用户做任何操作,都要立刻得到回应,不要让用户猜。


        设计中的应用:
          • 点击按钮时,颜色变暗(视觉反馈)。
          • 提交表单后立刻显示加载动画


          五、隐喻(Metaphors

          用现实生活中的东西当“说明书”


          设计中的应用:
            • 电子书翻页效果模仿真实书本。
            • 计算机APP长得像实体计算器


            六、用户控制(User Control

            用户是老大,APP只能建议,别替他们做决定


            设计中的应用:

              • 删除文件前问“确定要删除吗”。
              • 提供撤销功能,用户有权反悔

              优网科技,优秀企业首选的互联网供应服务商

              优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

              优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


              我要投稿

              姓名

              文章链接

              提交即表示你已阅读并同意《个人信息保护声明》

              专属顾问 专属顾问
              扫码咨询您的优网专属顾问!
              专属顾问
              马上咨询
              扫一扫马上咨询
              扫一扫马上咨询

              扫一扫马上咨询