首页 UI设计正文

设计沉思录 | 聊聊UI设计中的交互原则

魁元网络 UI设计 2020-11-14 19:34:57 4801 0 | 文章出自:58UXD

好的设计原则是产品设计的坚实基础,它可以描述产品整体层面的设计目标,也可以对具体问题的决策进行支持。文章从设计原则的重要性出发,分享了用户体验的8条UX原则,供大家一起参考学习。

u=4073724886,2132912038&fm=26&gp=0.jpg 设计沉思录 | 聊聊UI设计中的交互原则 第1张

01 前言

UI设计日新月异,但在变化的背后不变的是设计师对美和易用的追求。在对用户体验的不断研究中,很多复杂的案例被凝聚成简明的设计原则供我们使用。Lawsofux的UX原则便是其中的典范,这些原则久经考验,历久弥新。本文仅就这些优秀的交互原则结合自己的工作项目。谈些浅显的看法,意在抛砖引玉。

02 Lawsofux的UX原则

1. 希克定律

决策成本随着可选数量和复杂性增加而增加。将复杂任务拆解为简单的步骤可以降低用户的决策成本。突示推荐选项可以避免用户无所适从。渐进式设计可以减少新用户的认知负担。

应用案例:省心招-招聘刷新设置结果页

我们在设计过程中经常会遇到一种情况:单一页面会有很多类似的入口或内容,并且需求方希望都加以强调。由希克定律得知,对于用户来说这样的页面是十分复杂的。既全都强调等于没有强调,效果反而不理想。在招才猫的的设置结果页中我们避免了这种情况,对结果页的三种入口进行了区别化处理,将用户最需要的操作突出显示,防止用户陷入困惑。


设计沉思录 | 聊聊UI设计中的交互原则 第2张


2. 菲茨定律

获取目标的时间取决于目标的距离和大小。点击目标应足够大,使用户可以辨别和准确选择。点击目标之间应有充分空隙。点击目标应该放置在一个界面内易于获取的区域。

应用案例:58营销平台-效果数据升级

在数据展示类设计中,用户查看数据一直是个痛点,因为图表可能很长或者数据文字不够明显,导致界面识别性较低。在58营销平台效果数据页设计时,我们尝试优化这个问题。于是在柱状图顶部增加了触发点,鼠标划过时会浮现卡片展现其具体数据。设计时触发点应足够大,或者有更大的热区,以增加数据识别性。


设计沉思录 | 聊聊UI设计中的交互原则 第3张


3. 共域定律

如果元素们在一个明显的区域内,人们将认为他们是一组的。为不同数量元素添加边框是创建公共区域的简便方法。也可以为不同数量元素添加背景来创建公共区域。

应用案例:帮帮商家2.4.0版本迭代

在这个页面优化时,遇见了用户使用习惯与内容逻辑分类的冲突。页面分为操作项与展示项,操作项多且复杂,用户可能只要设置部分功能就足够。但是原页面保存按钮在操作项最下方,可能要翻页去找,不是很方便。于是将保存按钮与右侧预览页面上下排布,通过灰色的背景使得其视觉上归为一组。这样也符合了用户“保存满意设置“的心智模型。


设计沉思录 | 聊聊UI设计中的交互原则 第4张


4. 靠近性原则

彼此临近的对象往往会组合在一起。邻近有助于与附近物体建立关系。邻近性可帮助用户更快,更有效地理解和组织信息。

应用案例:58营销平台-效果数据页

这个原则有两个方面:相关的内容要靠近,不相关的数据也要远离,防止用户混淆。在效果数据页的创建漏斗模块中,仅仅依靠操作项目之间的间距就可以给用户控件使用方式的暗示。在数据分析模块中,不同的控件之间,间距和位置也可以表明他们的相关性和优先级。


设计沉思录 | 聊聊UI设计中的交互原则 第5张


5. 连通性原则

与没有连接的元素相比,在视觉上连接的元素被认为更相关。可以通过颜色,线条,框架或其他形状连接具有类似性质的分组功能。

应用案例:招才猫-刷新设置页

两个方案中,左侧使用卡片将承载所有内容的方案使得功能的从属于关系更加明确。而右侧的线框也将标题与说明紧紧的连接在一起。


设计沉思录 | 聊聊UI设计中的交互原则 第6张


6. 美即是好用

用户通常认为美观的设计是更实用的设计。美观的设计可以让用户对小的可用性问题更加宽容。美观的设计在人们的大脑中产生了积极的反应,并使他们相信设计的比实际上更好用。美观的设计可以掩盖可用性问题,防止在可用性测试期间发现问题。

应用案例:省心招-置顶页面改版

置顶页面改版的设计重点是视觉提升。所以增加了icon、配图以及丰富的颜色。但这些会增加用视觉复杂度,使得页面不够简洁高效。所以要使用大字突出关键信息以弥补干扰。


设计沉思录 | 聊聊UI设计中的交互原则 第7张


7. 米勒定律(7±2原理)

一般人只能在其工作记忆中保留7个(±2)项。分块是一种以可管理的方式呈现内容组的有效方法。一次组织5-9项内容。

应用案例:招才猫-刷新设置页弹窗

在设计中,需求方也常常希望在有限的屏幕上放进更多的内容。但是米勒定律说明,少即是多,适中的即是恰当的。无论多么饱满的页面都面临用户工作记忆量的限制。太多的重点,用户反而难以抓住重点。所以梳理页面信息量和归纳重点也成为了设计师的必修课。

不过也有研究认为工作记忆量是4(±2)项,所以要更注重简洁。


设计沉思录 | 聊聊UI设计中的交互原则 第8张


8. 特斯勒定律 / 复杂性守恒定律

特斯勒定律(又称为复杂性守恒定律)指出,对于任何系统,都存在一定程度的复杂性,无法降低。

应用案例:复杂性无法降低,但是可以转移。

在刷新设置方式中,可设置项越多,功能就越强大,但是操作也越复杂。若是默认使用智能刷新,则能够最大程度的降低用户操作的复杂度。


设计沉思录 | 聊聊UI设计中的交互原则 第9张


03 总结

中后台项目一般侧重效率和易用性,在设计过程中更要带入交互思维,时刻的思考用户当前状态。这就要求设计师对用户的认识模式,记忆承载,使用方式有着清晰的认识。而Lawsofux的设计原则很好的阐释了这些。希望这篇文章能够和你一起发现界面背后的逻辑,让每一处设计都有据可循。

作者:李秦,设计师

作者@李秦

题图来自Unsplash,基于CC0协议


交互思维设计师交互原则
版权声明

1、本网站非盈利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章:如果原文明确注明“禁止转载”我们一定不会转载。

2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因为信息的不正确或遗漏导致的任何损失或损害承担责任。

3、任何透过本网站网页而链接及得到资讯、产品服务,本网站概不负责,亦不负任何法律责任。

4、本网站所刊发、转载的文章,其版权归原作者所有,如其他媒体、网站或个人从本网站转载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网站注明的“稿件来源”并自负版权等法律责任。

5、本站内容为传递信息使用,仅供参考,不构成营销建议。

6、如不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!谢谢。

发表评论

评论列表(0人评论 , 4801人围观)
☹还没有评论,来说两句吧...

网站建设_网站优化就上正旭传媒

https://www.kuaichez.com/

| 粤ICP备2023017355号—2

Powered By 深圳正旭文化传媒有限公司 版权所有

使用微信扫描二维码

关注我们看更多资讯

欢迎您光临魁元网络

请先 登录 再评论,若不是会员请先 注册