首页

一篇文章带你秒懂图标设计

天宇 B端ui设计文章及欣赏

从1973年第一代图形用户界面的呱呱落地到今天百家争鸣,图形用户界面竟然已经走过了50年的发展历程,更神奇的是,原来UI设计这个职业的起源也是因图标的起源而起,后来图标成了UI设计中最重要的视觉元素之一,接下来,我们一起走进图标的世界,了解它神秘背后的故事。
 
 
一篇文章带你秒懂图标设计
 
 
 
目录
一、 图标的起源
二、 图标设计的定义
三、 图标的种类
四、 图标设计8大原则
五、 图标的6大作用
六、 提升图标设计的4个小技巧
七、 5个图标网站推荐
八、图标的命名规范
 
 
 
一、图标的起源
在计算机发展的早期,用户界面主要是基于命令行的,由字母和数字组成,操作复杂且对普通用户不友好,用户需要记住大量的命令和参数才能使用计算机系统。
 
随着计算机技术的发展,为了使计算机更易于使用和理解,程序员开始开发图形化的元素来代表各种操作和功能,图标概念由此诞生。最初的目的是帮助新手用户能够更方便地组织文件和执行任务,而无需记住复杂的命令。
 
 
1.施乐公司的开创性工作
1973年,美国施乐公司推出了第一批真正意义上具有图形用户界面的个人电脑——Xerox Alto。虽然这款电脑仅生产了约 2000 台,但它为后来的计算机图形界面发展奠定了基础。它的界面中已经出现了一些简单的图标,如垃圾桶、计算器、打印机、文件和文件夹等,这些图标成为了后来图标设计的雏形。
一篇文章带你秒懂图标设计
 
 
 
 
2.苹果公司的推动
1979年,史蒂夫·乔布斯参观了施乐公司的原型机后,深受启发,决定开发自己的图形界面计算机。1983 年,苹果公司推出了Apple Lisa,这是苹果首台图形界面计算机,其界面中的图标设计得到了进一步的发展。
在这一时期,现代图标设计之母苏珊·卡尔担任苹果的创意总监,她设计的像素风格图标简洁、清晰、易于理解,具有很高的视觉平衡性,即使在今天看来也显得活泼有趣。
 
一篇文章带你秒懂图标设计
 
 
 
 
3.微软的跟进与发展
1985年,微软发布了 Windows 1.0操作系统,这是微软在图形用户界面领域的重要尝试。该系统中的图标设计也借鉴了苹果的一些理念,但也有自己的特点。随着 Windows 操作系统的不断发展和普及,图标设计也逐渐成为了用户界面设计中不可或缺的一部分。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
二、图标设计的定义?
图标设计是一种设计活动,主要是创造出用于代表物体、动作、概念等各种元素的图形符号。
 
这些图形符号具有简洁性,让人能快速识别。比如手机桌面上的微信图标,用两个对话气泡的简单图案就代表了这个软件,让人一眼就能明白。图标设计在很多领域都有应用,像软件界面、网站、移动应用等,能够为用户提供视觉引导,方便用户操作。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
三、图标的种类
图标在提升产品气质上起着不可估量的地位,在界面中往往起着画龙点睛的作用,无法想象在一个产品中,没有图标,界面会显得多么的无聊和乏味,但是图标也不能总用一种形式的图标,这样也会百看让人生厌,因此也就衍生了图标的多样性,以下是我整理的常见图标类型:
 
1、从视觉表现上,有以下12大类图标
一篇文章带你秒懂图标设计
 
 
 
 
2、从功能上,有以下6大类图标
❶工具图标
工具图标在B端项目中应用很广泛,几乎每个组件中都会包含这类图标;比方说腾讯文档上方的文档编辑图标就是属于这种类型,它的装饰性很小,更多是功能的承载。
 
一篇文章带你秒懂图标设计
 
 
 
 
❷装饰图标
在一些软件产品中,会重点强调品牌、情感化设计,大量启用3D化的装饰图标来提升界面的质感。
比方说腾讯电脑管家下面的这个界面设计,它就运用了大量具有装饰性的图标来传递信息表达品牌,并且中央还采用腾讯电脑管家的IP形象作为切入点,萌萌的形象无形中拉近了与受众之间的距离。
 
一篇文章带你秒懂图标设计
 
 
 
 
❸启动图标
在项目中,当用户想表达品牌时,经常会把LOGO图标做成动态图,来更好的传递品牌理念,比方说联想电脑管家,在启动页时,就运用了动态启动图标,同时下面还附带了一个slogan的文字动效,很好的向用户传递了安全的理念。
 
一篇文章带你秒懂图标设计
 
 
 
 
❹ 进程提示图标
在软件界面中,经常也需要进程的提示,这时候图标就可以起到这样的作用,比方说腾讯电脑管家在清理垃圾时,图标里面的风扇就一直在转,寓意当前清理工作正在进行中。
 
一篇文章带你秒懂图标设计
 
 
 
 
❺ 状态提示图标
软件在运行过程中难免会出现bug或者内容为空的时候,这时候状态提示图标就尤为重要,可以大大减轻人们的焦虑情绪。
 
一篇文章带你秒懂图标设计
 
 
 
 
❻ 增加界面趣味性的图标
图标不仅在理解和使用上给人们提效了,而且有时添加动效的图标还能给人带来丝丝惊喜和愉悦。
比方说联想的这个动态加载图标,看着就很有趣,让人忍不住多欣赏一下。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
四、图标设计8大原则
虽然现在AI盛行,很多酷炫的效果可以用AI实现,但是一些让图标看起来更加专业精致、耐看的秘密我们还是需要知道的,了解这些设计原则,我们可以事半功倍,当AI生产有偏差时,我们自己可以优化、修复和调整。
 
 
1、大小统一
图标大小统一,就是一组图标放置在一起,图标大小要看起来差不多,不能忽大忽小,比方说这组图标的第三个图标,电脑图标明显过高,跟其他图标放在一起就显得不是那么的协调美观和统一。
一篇文章带你秒懂图标设计
 
 
在大小统一这方面,我们记得就是几何图形它们有视觉差,有的时候并不是说尺寸一样,大小就一样了,比方说下面这组图形,左边的这组它们高度一样,可是看起来大小并不太一样,明显中间的三角形显得小;右边的这组,三角形比左右两边的都要高,可是它们放在一起看起来大小就是差不多的,这就是几何图形带来的视觉差,就是我们在做图的时候,要记得多去感受,设计中的美很多不是用1+1=2能解释清楚的,它就是一种感受,放下心中的浮躁,我们还是能感受到它们之间的区别,这种美也没那么玄乎,只要用心,一定可以做出大小一致的图标。
 
 
一篇文章带你秒懂图标设计
 
 
 
 
 
 
2、圆角统一
圆角统一,就是图标之间有相同造型,然后又都有圆角的,那么他们就要保持相同的圆角曲度,比方说下面这组图标,图标的外形都是正方形且它们都带有圆角,可是它们的圆角曲度却明显不一样,这样就看起了不够规范和专业。
一篇文章带你秒懂图标设计
 
 
 
 
3、风格统一
界面中同样功能的图标,样式和风格需要保持一致,比方说这组图标样式,风格就保持着高度的一致,都是用的玻璃质感的磨砂材质。
一篇文章带你秒懂图标设计
 
 
 
 
4、角度统一
这组扁平化图标,在右边相似的角度都叠加了一个小色块,增加了图标的层次感,相同的角度也增加了图标的一致性和系列感。
 
一篇文章带你秒懂图标设计
 
 
 
 
5、粗细统一
图标的粗细要统一,这样图标就会看起来比较精致,比方说下面的这组图标,图标外框线都是用的3px,图标里面的线都是用的2px,图标的粗细都保持一样的粗细规律,这样的图标看着也是同样的美观和一致。
一篇文章带你秒懂图标设计
 
 
 
 
6、疏密统一
下面是一组类似于插画风格的图标,图标的风格是布线比较密集饱满,而三个图标都遵循了这样的原则,看起来出奇的统一,所以它们看起来像是一组成套图标。
一篇文章带你秒懂图标设计
 
 
 
 
7、透视统一
当设计的图标是立体时,要注意它们的透视要统一,就像下面的这组2.5D图标,它们的设计透视就保持着高度的一致。
一篇文章带你秒懂图标设计
 
 
 
8、易识别
图标的优劣首先取决于其能否让用户一目了然地理解其代表的意义,这是很重要的图标设计原则。
下面的这组手机主题图标,识别性就非常的高,简洁且好理解。
一篇文章带你秒懂图标设计
 
 
 
 
 
五、图标的6大作用
图标在界面设计中扮演着至关重要的角色,它们遍布于应用程序的各个角落。无论是导航栏、工具栏还是标签栏,亦或是首页、详情页、个人中心页,功能图标都随处可见。图标的主要作用在于传达信息,相比文字,它们能更直接地传递概念,并且能够为用户的视觉体验增添乐趣。
 
1、提升界面的使用效率
功能图标常以简洁的图形呈现,它们便于用户识别和记忆。这种设计让用户能够迅速定位到所需的功能,无需耗费时间阅读文字说明或浏览冗长的菜单选项,大大提升了界面的使用效率。
 
华为云的这个界面,文字信息很多,因为有了图标的存在,人们寻找起来特别高效,能高效定位到想要的信息。
 
一篇文章带你秒懂图标设计
 
 
 
 
2、增加用户的满意度
图标不仅可以提升界面使用效率,还能提升用户的体感和满意度,精美的图标让人看着都是赏心悦目的,就像我们在大街上看到一个美女,都忍不住多驻留一伙一样。
 
华为云这组精美的图标动效就给了我很大的视觉享受,图标设计精致,配色舒适,还有动效,给足了用户满足感。
 
一篇文章带你秒懂图标设计
 
 
 
 
3、减少人们认知的成本
图标很多的造型都来源于生活,来源于我们熟悉的事物,在界面中运用我们熟悉的图形会大大降低人们的认知成本,也会让更多人产生共鸣,它的传达作用不受语言和国界的束缚,是一种高效的界面表达语言。
 
华为云的这组图标就是运用了人们日常生活中非常熟悉的元素,共鸣感很强,人们学习和理解的成本很低。
 
一篇文章带你秒懂图标设计
 
 
 
 
4.提升品牌形象
仔细观察会发现,在生活中有很多的软件产品,会把企业的LOGO融入到日常产品的图标设计中,大大提升了品牌的一个曝光度。
 
腾讯云就有这样的小心思,它会把腾讯云LOGO融入到banner图标设计中,传递了信息,同时也加强了品牌的曝光。
 
一篇文章带你秒懂图标设计
 
 
 
 
5、图标可以增加界面的丰富度
有图标的界面,页面看起来丰富度更高,层次感更强,信息表达上也会更加的清晰整洁。
 
360AI办公这个界面之所以看起来这么丰富,很大原因是在于图标的应用,界面中有大图标、小型面图标,还有线性小图标,有对比,整个页面就看起来丰盈了不少。
 
一篇文章带你秒懂图标设计
 
 
 
 
6、减少界面的枯燥感
千篇一律的文字,难免会产生枯燥感,让人不愿多驻留;图标多彩的配色以及Q萌的造型会让人心生愉悦。
佐糖的这个界面,若不是有图标的润色,光只有功能点和文字介绍,估计会乏味不少,但是有了多彩图标的加入,瞬间氛围感都热闹了不少。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
六、提升图标设计的4个小技巧
1、大量临摹,刻意练习
任何一项技能的获得,最开始都离不开临摹,作为刚接触UI设计的职场新人,可以先从临摹入手,先临摹简单的,然后循序渐进,临摹难度大点的,这样图标设计能力也会慢慢提升。
 
一篇文章带你秒懂图标设计
 
 
 
 
2、多积累好的样本
想要绘制好看的图标,首先要见过好看的图标,所以我们日常要养成多收集好图标好设计的习惯,这样当面临新的需求设计时,也不至于手忙脚乱,不知如何下手。
一篇文章带你秒懂图标设计
 
 
 
 
3、学会分析
看到好看的图标设计时,我们要学会分析,这组图标好,它好在哪,哪里打动了你,你分析了这些,你自己在设计的时候也会不自觉的运用到其中的智慧和思路,这样我们就可以随时原创出符合自己需求的图标设计来。
一篇文章带你秒懂图标设计
 
 
 
 
4、明确目标与受众
目标受众不同,他们对图形的期望也会不一样,比方说在设计儿童产品界面和B端产品界面时,所用的颜色和形状都是有考究的。
 
儿童类产品的图标设计,形状会比较圆润,色彩也比较多彩;但是B端类产品的图标设计用色就会很克制,形状也不会过于圆润。
一篇文章带你秒懂图标设计
 
 
 
 
 
七、5个图标网站推荐
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的图标库,应该也是受众最多的一个图标下载网站,给我们平时工作提效不少,造福了不少的设计师。
一篇文章带你秒懂图标设计
 
 
 
 
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字节跳动旗下的一款图标下载网站,它可以在线把一个图标实现多种风格的切换,线性、面线、线面结合,并且线的粗细大小可以调节,非常的方便。
一篇文章带你秒懂图标设计
 
 
 
 
3、Ikonate
(
https://ikonate.com/
)
Ikonate是一款可以在线编辑的图标网站,涵盖了常用的一些图标,可以调节线条的粗细和大小,导出的格式是SVG。
一篇文章带你秒懂图标设计
 
 
 
 
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的优点,我觉得是造型够丰富,满足你有时候无法脑补的痛点。
一篇文章带你秒懂图标设计
 
 
 
 
5、Iconduck
(https://iconduck.com/)
Iconduck的优点是有273,858个免费的图标库和插画库供大家选择,储备够丰富。
一篇文章带你秒懂图标设计
 
 
 
 
 
八、图标的命名规范
图标一般有四种状态,正常normal (nor)、高亮highlight (hig)、选中selected (sel)、不可用disable (dis)四种状态,一个好的命名习惯会给自己的合作搭档带来很好的体验,通常在写界面的时候,前端都是用英文对元素进行命名的,这里我列举一下我经常合作同事的一个命名规范,供大家参考:
模块-类别-功能-状态
例如:Nav_button_message_sel
 
一篇文章带你秒懂图标设计
 
 
 
 
 
总结:
在深入探索了图标设计的丰富世界之后,我相信大家未来能够根据不同的场合挑选出恰当的图标风格和样式。通过持续的总结和归纳,我对图标设计的理解也变得更加深刻。虽然这份总结可能还有待完善之处,请大家多多海涵,期待在下一篇文章中再次与大家相见。
 
 
 
 
 


作者:姝斐suphie
链接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

不错,这些设计让我开眼啦!

天宇 交互设计及用户体验

有时候创意就体现在很细节的局部,不一定是多么惊人的想法,只要一个细微的差异,就能拿捏用户的情绪。一些简单的设计处理,只要让用户多看几眼,就能实现设计目的。
 
本期黑马哥继续为大家分享一些不错的设计案例,希望这些设计思路可以给你开眼,带给你更多创作灵感。
不错,这些设计让我开眼啦!
 
 
 
 
一、情感化的打卡设计
通过线上打卡已经成为众多业务方向的选择,在便利性的同时也方便管理与追溯。为了提高用户的打卡参与度,产品设计师也在不断挖掘更有趣、体验更好的解决方案。
 
作为上班族和家长们会用到一些打卡软件来辅助完成工作或者学习等,平时我也会经常使用钉钉给小孩进行课业打卡。在完成打卡后“我的成果”展示设计中,打卡标记的设计中嵌入系列 IP 形象或者图形,通过情感化的设计提升了成果展示的趣味性,更能激发小朋友参与打卡的热度。
不错,这些设计让我开眼啦!
 
 
 
 
二、底部标签栏的二级导航设计
底部标签栏更便于用户操作频繁切换的功能,通常 3~5 个为最佳,如果遇到超过极限值时就需要在交互形式上面思考解决方案。
 
在洋葱学园 APP 中,体验到一个底部标签栏带有二级导航的设计方案,很好的解决了超过极限值的情况。在二级导航设计中强化了字体和添加了图片背景区分状态,以差异化的视觉表现吸引用户关注度,以此增加二级导航的操作率。
不错,这些设计让我开眼啦!
 
 
 
 
三、图标设计的背景化运用
图标在产品中主要分为功能性和修饰性,对产品的操作体验和感官体验都起到了非常重要的作用,图标的运用也被深挖到各种业务场景中。
 
在哔哩哔哩任务中心栏目中,展示红包、奖励、积分、奖品的设计中,除了量化的数字结合以外,在各自数据背景中还添加了图标设计。相较于单纯的数据展示而言,图标背景化的运用不仅提升了设计的感官度,也助力了业务属性的差异化。
不错,这些设计让我开眼啦!
 
 
 
 
四、品牌化的弹窗设计
弹窗设计在图形创意、视觉表现和造型等方面都有更多发挥空间,为了提升转化率和降低阻力设计带来的负面情绪,提升弹窗设计的体验感也是至关重要的。
 
在使用我爱我家 APP 时,发现新版本的弹窗设计造型结合品牌和业务性质进行设计,区别于常规造型的弹窗表达。品牌化的探索可以强化用户对产品的品牌记忆度,深化用户粘性。
不错,这些设计让我开眼啦!
 
 
 
 
五、色彩丰富的卡片式设计
卡片式设计是近些年非常流行的 UI 趋势之一,卡片式设计无论在视觉表现力还是造型层面都呈现出了众多案例,简单的形式被赋予了各式各样的表达。
 
最近发现了一个色彩丰富的卡片式设计案例,相较于常规的白色卡片而言,嘀嗒出行的设计中给带有描边的卡片添加了局部突出部位作为背景。在色彩渐变的强化中,不仅使得卡片结构化,也体现出了青春活泼的感官氛围。
不错,这些设计让我开眼啦!
 
 
 
 
六、动态 IP 强化功能关注度
品牌 IP 在产品设计中的运用已经逐步普及,提升情感化设计的同时,也是助力品牌化的关键。
 
在掌上生活 APP 设计中,为了突出“服务大厅”入口的曝光度,采用动态 IP 来强化该功能的关注度。动态化的小招喵更有吸引力,强化功能的同时也让用户感受到轻松愉悦,提升了产品设计的情感化体验值。
不错,这些设计让我开眼啦!
 
 
不错,这些设计让我开眼啦!
 
 
 
 
七、情感化的用户反馈设计
用户反馈是提高忠诚度和采集数据的关键,为了提高用户反馈的意愿度,从情感化设计或者互动性等方面都在不断探索。
 
通过饿了么订餐之后,当配送员完成送达时,会弹窗提示用户是否已收到商品。通过表情化的图标配合文案设计,情绪化的表达使得反馈更清晰,更能提升用户的反馈意愿。
不错,这些设计让我开眼啦!
 
 
 
 
八、人性化的导向设计
地图软件的出现改变了大家的出行方式,再也不会担心迷路,可以尽情地走南闯北。随着产品体验的不断升级,地图软件也越来越人性化,带给用户优质的导航体验。
 
对于驾驶的用户来说,如果使用高德地图提前开始导航会进行人性化的导向,方便导航时间预估得更加精准。点击“我已上车”即可开始导航,让导航体验变得更加人性化。
不错,这些设计让我开眼啦!
 
 
 
 
九、动态头像设置
为了提升预设内容的体验度,针对一些默认的内容也在逐步走向情感化设计的方向,可以让用户感受到更加真实的操作体验。
 
针对头像设置也从默认的灰色人物剪影演变为个性化的 IP 形象、人偶、真实人物形象等,为了提升互动性,也在提供动态化的解决方案。比如豆包 APP 在给豆包设置头像时,设计了不同性别的动态头像,使得头像表达更加生动形象。
不错,这些设计让我开眼啦!
 
 
 
 
十、个性化的界面设计
产品设计的风格越来越多样化,为了体现差异化的体验,个性化的界面设计也是层出不穷。
 
最近在点餐时体验到一个设计风格非常个性化的小程序,名字叫:WHAT TO EAT。区别于别的点餐类产品,该产品设计风格以线性插画风结合,非常有个性化。不仅强化了自身品牌感,也深化了用户的记忆点。
不错,这些设计让我开眼啦!
 
 
 
 
小结
优秀的设计细节可以帮助我们打开禁锢的思维,创作出更优秀的设计方案。描述的观点属于个人经验总结,不足之处我们继续努力改进。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTY0MDAyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

界面设计中【浮标】的思考与探索

天宇 移动端UI设计文章及欣赏

界面设计中【浮标】的思考与探索
结合设计原则与“智能伴学助手”项目应用浮标实践展开
-------------
 
目录:
背景
浮标的本质与价值
浮标设计
一、功能定位与场景适配
二、视觉与交互设计
三、技术实现优化
四、无障碍与伦理考量
五、创新方向探索
结语
 
-------------
背景:
在教育类移动端中接入了大模型AI智能应用,为保证这个应用入口可长期保持并随时可见,提高使用率,为用户提供便利。笔者通过“智能伴学助手”浮标实践应用,对后续制作浮标在界面设计中思考与探索。
 
浮标的本质与价值
1)空间维度突破  
作为界面中的「第三层空间」,浮标通过视觉悬浮感打破平面限制(如iOS 的3D视差效果); 在信息过载时代,提供「随时在场」的核心功能入口(如美团外卖的悬浮购物车,左右动效:进缩)。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
 
2) 认知心理学应用
利用格式塔原则中的「闭合性」设计半透明遮罩,暗示可交互区域;通过菲茨定律优化点击热区,圆形浮标直径建议≥48dp(Android 规范)。
 
 ---------------------
浮标设计
就项目中“智能伴学助手”为例,一个教育类的应用入口,结合功能定位、用户体验与技术实现浮标在界面中的作用。通常浮标是一个悬浮的按钮或图标,用于快速访问某些功能,从多个维度探索其在移动端界面中的合理呈现方式:
 
 
一、功能定位与场景适配
 
浮标的设计规范:
比如尺寸、颜色、位置。通用的设计规范,教学工具类App的界面设计,可能涉及图标和布局。
1)尺寸与网格系统
 ◇ 图标尺寸需适配不同屏幕分辨率,常见规范包括128x128px、96x96px、64x64px等,需根据界面层级选择合适尺寸。
◇ 尺寸一般用1:1比较好或者成倍数,先做大再导出所需要的不同大小比例。
◇ 使用网格系统(如微软Fluent的24px基础网格)确保视觉一致性,留出安全边距(如2px内边距)避免元素溢出。
2)造型与风格
◇ 遵循简约易懂原则,优先采用象形图或表意符号增强识别性。
◇ 保持系列图标风格统一,包括线条粗细(建议1.5px)、圆角弧度(微软Fluent定义大/中/小三级圆角)及视觉平衡。
3)适配性
◇ 导出格式需与开发协作,推荐PNG序列或SVGA文件以兼顾清晰度与性能。
◇自适应考虑不同平台的显示情况。
 
核心功能聚合:
语言学习工具类界面将高频功能(如首页入口、作业评论、学习提问)通过浮标动态整合,支持长按展开二级菜单或滑动切换功能模式,吸附于屏幕边缘。
根据学习阶段智能变化:
课前(预习):浮标展示课程试学入口或学习目标设定;
课中(口语输出):提供实时笔记悬浮窗或标记工具;
课后(点评):将课后作业及巩固语言习得情况的评价和自我精进。
(外语语言口语学习一般模式:盲听,然后根据自己的话复述,理解语言并有效使用语言)
  
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
 
二、视觉与交互设计
 
以”智能伴学助手“为例,浮标主色是蓝色,企业主题色也是蓝色,而”智能伴学助手“浮标使用背景一般也以蓝色为主,App主题色也是蓝色,多场景使用适配蓝色背景的静态浮标,又要使浮标可以在背景中脱颖而出,在其过程中尝试蓝+蓝搭配的存在局限性,本身蓝色系较统一。
在同为蓝色后,产生不同「空间」,通过将界面元素分层(如前景图标与背景图像),营造深度感。在浮标进行描边隔层,现在很多表情包就是这种模式操作。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
 
思考与探索:
浮标需要特色,用户在使用过程中视觉明显,提高交互。
浮标既显眼又不干扰学习,所以需要平衡可见性和沉浸感。
浮标可以移动,用户可以根据需要调整位置,避免遮挡内容。
现浮标是静态的,如何尝试动态浮标,与用户有更好的交互体验,参与感。
颜色和动效方面,冷色调营造学习氛围,浮标可以用品牌色,如蓝色或绿色,加上微动效吸引注意。样式用了蓝色圆形浮标,可能适合教育类应用,赋予科技感设计。
不同状态或者不同页面下的浮标呈现方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
 
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
 
思考与探索:
配色方案
1)主色选择
明亮色系:如红色、橙色、黄色等,能快速吸引用户注意,适用于促销活动入口。
品牌色融合:在特殊场景中融入品牌LOGO或主色,代表企业形象和IP,增强品牌认知。
2)色彩心理学应用
蓝色:传递信任感,适合金融或工具类应用。
黑金/黑黄组合:营造神秘或高端感,常见于娱乐或奢侈品领域。
紫色+粉红:适用于美容、女性向产品,传递温柔与创意。
控制色彩平衡,用户色彩感官可适应。
3)对比与背景
使用中性色(如米色、白色)作为背景,提升信息可读性。
避免冲突色搭配(如蓝色用于食品类浮标易抑制食欲)。
 
思考与探索:
个性化推荐和交互设计,可以结合AI预测用户行为,动态调整浮标的出现时机,比如在需要提醒作业时显示。主色选用品牌色(如教育蓝/科技紫)强化识别性。
 
如何设计浮标会更好?
如何设计浮标会更好?
 
 
创新交互模式思考探索:
1)压力感知交互  
▸安卓压感屏实现「轻按预览/重按触发」分层交互(如华为悬浮球压感菜单);配合触觉反馈(Haptic Engine)增强操作确认感。
2)动态语义变形
-生物拟态动画:
▸呼吸感悬浮:模拟水母游动节奏(振幅0.5-1.2px,频率0.8Hz)  ;
▸点击时触发粒子扩散动画(模拟知识传递意象);
▸拖拽时产生弹性形变(阻尼系数0.6-0.8),边缘碰撞后回弹。
- 根据场景智能改变形态:  
▸ 阅读类App中展开为「书签浮标+进度条」复合控件  ;
▸ 音乐播放器浮标可拉伸成波形可视化界面。
 通过多模态反馈,听觉,视觉,触觉多种情感交互。
3) 空间布局策略:
▸默认位置:置于屏幕右下侧(符合右手持机习惯),预留10%边距防止误触;
▸智能避让:通过内容识别算法,在视频播放或文本输入时自动偏移避开核心内容区域;
▸AR场景中的空间投影浮标(如IKEA Place家具预览浮窗)。
位置多为屏幕右下侧
位置多为屏幕右下侧
 
 三、技术实现优化
 
1)跨端一致性
  •  
    使用React等框架封装可复用浮标组件,通过响应式设计适配不同设备尺寸(如折叠屏展开态需重新计算定位锚点);
  •  
    采用SVGA格式实现高性能动效,控制帧率在30fps以内以降低功耗。
2)AI驱动个性化
  •  
     基于LSTM模型预测用户行为: 检测到长时间未操作时,浮标缩小并展示激励标语; 识别到错题高峰时段,主动弹出知识点讲解入口;
  •  
     支持语音指令交互(如“浮标移到左上角”)。
 
四、无障碍与伦理考量
 
1)包容性设计
◇为色弱用户提供高对比度模式(浮标轮廓增加动态描边,对比度≥4.5:1);
◇支持头部追踪控制浮标移动(iOS Switch Control技术适配)。
2)防沉迷机制(适合未成年类App)
◇连续使用1小时后,浮标渐变灰色并触发休息提醒;
◇家长端可远程设置浮标功能禁用时段。(未成年学习类工具考虑优化)
 
五、创新方向探索
 
1)多模态融合:
◇AR场景中浮标投射为3D虚拟助手,支持手势交互与空间定位;
◇结合眼动追踪技术,实现注视区域自动呼出上下文菜单。
2)情感化表达:
◇根据学习成就解锁浮标皮肤(如连续打卡7天变为奖杯形态);
◇错误率过高时,浮标呈现“鼓励模式”(配色变暖+微震动反馈)。
学习类智能伴学助手的浮标既能作为高效的功能枢纽,又可成为情感化学习伴侣。实际落地时建议结合A/B测试持续优化,例如对比分析「固定浮标」与「场景自适应浮标」的点击转化率差异。
 
----------------
 
结语:
浮标不应仅是功能载体,更应成为:  
- 空间叙事者:通过动态变化讲述产品故事;
- 情感连接器:建立用户与数字世界的温度触点;
- 场景预言家:预判需求并提供恰到好处的服务。
 
设计师需在「显性价值」与「隐形干扰」间找到精妙平衡,让浮标成为提升体验的优雅解决方案而非视觉负担。未来可探索脑机接口的意念控制浮标、量子动画渲染等突破性方向。
技术实现上,探究代码示例展示了如何控制浮标的移动,确保不超出屏幕,这可以作为技术参考应用实际案例中。同时,性能优化方面,使用SVGA格式或减少帧数,可能对动效设计有帮助。
浮标设计需要结合功能定位、用户行为、视觉设计、交互体验和技术实现,可多进行参考不同案例,搜索现有项目,对比借鉴然后对新型B端界面有所创新,确保既实用又不干扰用户。
还可以利用Ai创新思维,设计师可以更快速、高效地生成多种设计方案,结合项目开发满足消费者对个性化、时尚化的需求。
 


作者:啊海包船打鱼
链接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

从混沌到有序:设计规范全方位指南

天宇 移动端UI设计文章及欣赏

从零开始,打造设计规范:设计原则、流程与工具的全方位指南
整个文章我们会讲
 
  •  
    为什么建立设计规范?
  •  
    什么时候建立设计规范
  •  
    以及具体的设计规范怎么做
 
一、设计规范的目标?
首先需要明确设计规范的目标,也就是为什么建立设计规范,这里包括提高用户体验、降低开发成本、提高团队协作斜率等。这些目标将为后续的规范制定提供方向。
还有就是大家都知道,在做项目时如果没有明确的目标和价值,是很难推动的。
从混沌到有序:设计规范全方位指南
 
 
二、什么时候建立设计规范?
在项目全面进入ui设计之前,先设计几个核心页面的demo
,确立整体的基础规范和设计风格,把一些基础的设计规范定义出来,例如
命名、尺寸、间距、颜色、字体、核心控件
等、这样在开展设计的过程中保持一致性和统一性,当然,在项目设计过程中,UI设计规范也需要根据实际情况去调整补充。
从混沌到有序:设计规范全方位指南
 
 
三、设计规范具体要怎么做?
这里先讲一些基础通用的规范
3.1、间距
在间距部分我们需要把一些
页面间距、模块间距、元素间距
,这些要定义出来
像我平时在工作中
通常以8px作为基数
,以此衍生出
8、16、24、32、48、64
,这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到
120、160、200...其他间距数值,例如缺省页、登录页面等。出去这些特殊页面,基本上通用的就上面那6个就足够了
从混沌到有序:设计规范全方位指南
 
 
 
3.2、颜色规范
我们要先把主色调和辅助色,通常主色都是根据
品牌形象和目标用户
的需求选择。
拿在颜色的定义中需要注意以下几点
1、使用色彩心理学:
根据不同的颜色和情感联想,选择适合的颜色来传达品牌形象和用户体验。例如,蓝色通常被认为具有专业、信任和稳定的感觉,而红色则具有激情、活力和创新的联想。
 
2、建立层次结构:
使用颜色的饱和度和明度来建立层次结构。将重要的设计元素设置为高饱和度和明亮的颜色,使其在页面上突出显示,而将次要的设计元素设置为低饱和度和较暗的颜色。
3、避免使用过多的颜色:
过多的颜色可能会使页面显得混乱和难以聚焦。在设计过程中,尽量使用有限的颜色组合,并且要避免使用过多的对比色或互补色。
从混沌到有序:设计规范全方位指南
 
 
3.3、文字规范
我们需要把
字体、字号、颜色、行距
、这些给定义清楚,有规律的大小字号更有利于阅读,(另外要注意一些特殊字体的版权问题)
常用的字体大小
20px、24px、28px、32px、36px,44px,48px,且都是间隔4px
,设计师需要根据具体场景去决定字体大小,以确保用户能够轻松阅读和理解界面信息层级比重。
 
3.4、UI图标规范
图标是UI设计的重要组成部分,它可以使图标看起来更加
美观、易用、统一和有吸引力
。也传达着整个UI视觉风格调性,和系统功能的作用。
在图标设计上一定要简单清晰,定义规范时要对
图标的大小、圆角、线条粗细、等有明确的指示
,在绘制的时候我们可以制定自己的
网格规范
,以便参考。
从混沌到有序:设计规范全方位指南
 
 
3.5、按钮
按钮尺寸:
一般来说,按钮的尺寸应该能够适应不同的屏幕尺寸和分辨率,并且应该能够突出显示。
按钮形状:
应该具有清晰的轮廓和圆润的边角,圆角大小是多少
按钮颜色:
按钮的颜色应该与整体UI设计风格相协调,并且应该能够突出主题和重点信息。一般主按钮大多使用主题色。
按钮文本:
按钮的文本应该简短明了,并且应该能够清晰地表达按钮的功能。还需要定义清楚按钮中限制的字数。
按钮内边距:
按钮的内边距应该能够扩大按钮的可点击范围,并且应该能够提高用户点击按钮的准确性。需要考虑极限情况下,最小应该保持多少内边距。
按钮状态:
按钮的状态应该能够表达按钮的状态和功能。一般来说,按钮的状态包括正常状态、点击状态等。
从混沌到有序:设计规范全方位指南


作者:考思考
链接:https://www.zcool.com.cn/article/ZMTYxMjA4OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

身为一个ui设计师,为什么我连一个卡片设计都设计不好!

天宇 移动端UI设计文章及欣赏

 
在ui设计中,卡片是不可避免需要用到的东西。那么什么是卡片?卡片有哪些类型?
本次就以此问题为出发点,为大家详细介绍ui设计中的卡片设计。
 
 
一、设计基础
在开始设计之前,我们需要先了解卡片的定义、特点以及应用原则。
 
 
1.卡片的定义:
卡片设计是一种界面设计模式,其作用是使用卡片来作为界面信息展示的基本单元。卡片设计通过将信息分割成独立的、可管理的部分,使整个界面看起来更加简洁,让用户能够更容易在浏览时理解内容,找到自己需要的信息及商品。
 
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
2.卡片的特点:
在ui的设计卡片的过程中,我们要合理的将卡片的特点发挥出来,卡片主要有三个特点。
 
 
01.瓷片信息模块化:
ui卡片的作用是将信息呈现为独立的卡片单元,方便用户理解和管理信息。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
02.视觉吸引力:
视觉吸引力,顾名思义就是通过精心设计的视觉元素和颜色,让用户眼前一亮吸引用户注意,以此提升用户的使用体验。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
03.强交互性:
一个合格的ui卡片在设计时需要具有丰富的交互功能,如点击、滑动等和用户实现“交流”的操作,增强信息传达效果和用户满意度。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
 
3.卡片的应用原则:
在应用卡片时,我们要按照卡片的应用原则来保证卡片不会在运用时出现违和感。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
01.一致性:
保持卡片的一致性,包括样式布局和交互方式。
 
02.信息层级:
信息的重要性和层级设计让重要的信息更加显眼。
 
03.简洁清晰:
卡片内容简洁明了,用户易于理解和消化。
 
04.可交互性:
提供一定的交互功能,增加用户的使用体验。
 
05.响应式设计:
适应不同的设备和屏幕尺寸,确保好的显示效果。
 
06.视觉吸引力:
通过颜色和设计吸引人的视觉效果。
 
 
 
 
二、卡片分类
正所谓人以类聚,物以群分。卡片也可以分为不同的类型,大致来分,卡片可以分为三个类型。
 
 
 
1.封面卡片:
一本书,好的封面就可以吸引读者。封面卡片作为用户接触到的第一个卡片,自然是非常重要。
 
封面卡片可以根据不同的项目软件来改变,比方实景类,如商品、风景等;或者是影视类,如动漫、影视、直播等。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
2.普通卡片:
普通卡片比较常用的三种设计形式分别为圆角卡片、破形卡片、多张重叠。这样设计可以形成差异化,增加设计感。
 
 
 
01.圆角卡片:
一般普通的卡片大多数为直角,而圆角卡片的出现则是为了适用不同的屏幕,同时圆角的大小不一,可以增强视觉冲击力,形成差异化,吸引注意力。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
02.破形卡片:
破形卡片是在界面中,用不规则的形状做出来的卡片,能够更好的突出重要信息。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
03.多张叠加:
在设计过程中,如果想要卡片看起来更加立体,设计感更强可以用到多张叠加。这样一来,整个卡片的层次感也更加强烈。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
 
 
 
 
 
3.真实物体转化成的卡片:
在设计过程中,设计师可以根据现实中存在的物体将其转化成卡片。通过这样的转变,可以让用户有更加真实的使用体验。
 
 
01.优惠券类卡片:
在日常生活中,优惠券随处可见,人们对于优惠券的作用也心知肚明。那么将优惠券转化成卡片,则能让用户更直观的体验到优惠力度。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
02.银行卡类卡片:
当今社会银行卡几乎是每个成年人必备的物品,将银行卡转化成卡片,用户在使用手机银行时会多一点舒心。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
 
 
03.音乐类卡片:
将现实中的cd唱片转化成卡片,能够让用户有更好的体验。
身为一个ui设计师,为什么我连一个卡片设计都设计不好!
 
 
总的来说,将现实中习以为常的物品转化为卡片,能够更好的和用户产生共情。
天下没有不散的宴席,来到这里,又到了再见的时候。
 
今天的卡片分享就到此结束,为了下一次的重逢不在遥远,关注我,下次再见!



作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTYyNjI2NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

为什么我没有这样的设计思维呢?

天宇 设计思维

设计能力的强弱取决于设计思维,技能操作层面的不足可以通过反复训练,在短时间内即可弥补;而设计思维需要通过长时间的熏陶,还要找对学习的方法和途径。很多设计师工作五年甚至十年,但是设计能力依然比较普通,很大程度上还是设计思维能力的缺失。
 
我们也可以通过体验和分析优秀的案例来提升,学习优秀设计师的设计思路和处理技巧,以此来强化自我专业思维。今天黑马哥继续给大家分享一些优秀的设计案例,希望可以助力提高大家的设计思维。
为什么我没有这样的设计思维呢?
 
 
 
 
体验目录
 
一、不一样的返回设计
二、可以切换大小的设计布局
三、做减法的设计表达
四、品牌动态渲染春节氛围
五、品牌插画表现界面置底
六、动态刷新红包设计
七、涂鸦风格的流程设计
八、情感化闪屏设计
九、图标设计的翻转动效
十、蛇年主题图标设计
 
 
 
一、不一样的返回设计
 
进入层级界面可以通过返回回到上一级操作场景,通常都是以箭头图标、返回文字组合设计或者独立设计。
 
最近在体验喵喵记账 App 时,其返回设计以“门”作为创意元素,进入层级界面时门会打开,点击返回时会有关门的动作。以开关门的方式表达进入和返回状态,形象化的表达了不一样的返回设计,呈现出不同的设计解决方案。
为什么我没有这样的设计思维呢?
 
 
 
 
二、可以切换大小的设计布局
 
为了满足更多用户的体验需求,设计布局的灵活性变得越来越重要,需要提供多种选择便于操作。
 
在藏书馆 App 中,针对书库分类的展示设计,用户可以通过点击切换呈现不同大小的样式。文字和书籍封面图都会随着切换而缩放,方便满足不同用户的浏览需求,提升用户对产品的操作体验度。
为什么我没有这样的设计思维呢?
 
 
 
 
三、做减法的设计表达
 
随着互联网环境的发展,提供给大家的产品选择越来越丰富,而产品设计也从最初的功能性服务扩展到综合性服务。功能变得越来越多,商业氛围也十分浓厚,有种眼花缭乱的感觉。
 
最近在使用美团外卖柜小程序时,其简约的设计印象深刻。存取功能一目了然,没有多余的设计干扰体验,操作指引也是简单易懂。有时候减法的设计才是最好的用户体验,与其布局一堆功能或者服务,反而增加了用户的操作成本。
为什么我没有这样的设计思维呢?
 
 
 
 
四、品牌动态渲染春节氛围
 
春节氛围感营造对于品牌来说至关重要,是渲染春节主题和增强用户亲和力的关键,营造方式也是丰富多样。
 
其中夸克 App 通过品牌 LOGO 结合春节主题进行动态设计,不仅突出春节氛围,动效过渡也非常流畅。夸克经常会以品牌动态化的形式表现节日或者特殊活动主题,设计融合性处理得十分细致。
为什么我没有这样的设计思维呢?
 
 
 
 
五、品牌插画表现界面置底
 
界面设计过程中,对于到达底部的处理方式通常有品牌表达、公司名称、版权信息、情感化内容表达等。
 
最近在体验我要做计划 App 时,界面设计底部以品牌 IP 形式的插画进行表达,不仅符合整体设计风格,也使得界面设计更有趣味性。整个产品设计也以插画风格为主,是一个很有个性化的产品。
为什么我没有这样的设计思维呢?
 
 
 
 
六、动态刷新红包设计
 
结合刷新设计赋予更多功能或者服务,已经成为二层楼设计的首选。
 
最近在体验美团外卖时,首页下拉刷新会出现红包样式的动效表达,随着下拉的程度不同,红包金额会随之增加或者减少。动态刷新红包设计更能吸引用户继续体验,进而进入二层楼参与活动,趣味性的表达方式很有吸引力,也以此方式促进了用户参与感。
为什么我没有这样的设计思维呢?
 
 
为什么我没有这样的设计思维呢?
 
 
 
 
七、涂鸦风格的流程设计
 
随着同质化设计的现象,产品设计也在不断尝试更具差异化的风格。结合插画风格表达界面设计,变得越来越普及。
 
在我要做计划 App 设计中,整体风格以涂鸦插画风为主,完善做计划流程设计也以涂鸦风格进行设计。不仅风格特征更突出,也能吸引用户的关注度,促进完善计划流程。
为什么我没有这样的设计思维呢?
 
 
 
 
八、情感化闪屏设计
 
闪屏设计分为品牌感方向和营销广告等方向,其中闪屏广告较为常见,不过也有品牌启动页和闪屏广告相结合的方式。
 
闪屏设计的形式也非常多样,其中情感化的方向以 IP 形象和情感故事性插画为主。比如喜马拉雅闪屏设计便以 IP 形象的各种动态化形式呈现,画面非固定表达形式,每次重新打开都会有所不同,IP 动态也非常俏皮可爱。
为什么我没有这样的设计思维呢?
 
 
 
 
九、图标设计的翻转动效
 
图标动效的运用非常普及,以往见过的案例都是动效的形式表达图标的不同形式感,但是图标的含义不会受到影响。
 
最近在体验盒马 App 时,首页金刚区图标以翻转动效进行表达,既突出春节氛围也赋予图标两层含义。在保留图标本身功能含义的同时,通过翻转另一面表达出不同的意思,也是一个新的图标动效表达思维。
为什么我没有这样的设计思维呢?
 
 
 
 
十、蛇年主题图标设计
 
蛇年春节主题设计在产品中的运用很丰富,其中在图标设计中的运用是最普遍的,广泛运用于应用图标、金刚区图标、底部标签栏图标和其他功能图标等。
 
图标设计的运用形式很多,比如蛇年主题文案嵌入、生肖蛇相关元素设计、春节元素设计等。表现形式以立体质感居多,配色以突出春节氛围为主。
为什么我没有这样的设计思维呢?
 
 
 
小结
 
设计思维除了依靠自身专业基础以外,通过不断学习分析优秀的案例也能不断提升,希望本期的案例分享可以带给大家更多灵感。
 


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTY1MDc0OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

在你的设计中营造“愉悦感”

天宇 用户研究

引言:
当我们谈及用户体验的时候,“
愉悦
”这个词是最常听到的一个形容词。让用户爱上一个产品,“愉悦”的用户体验就是核心要素,这也是设计力图达到的效果。
在一个产品的体验中,使用户在情感上感到愉悦的时间节点是不固定的(large or small),合理的设计能够满足用户在情感上的需求。
恰到好处的成就感和让人感到惊喜的细节能够唤起人们内心的幸福。
我们总会对那些体现着愉悦性的设计细节赞赏有加
我们总会对那些体现着愉悦性的设计细节赞赏有加
 
分享目录:
一、深度愉悦与表面愉悦
二、了解 Kano 模型
三、只有满足基本期望才能让用户产生愉悦情感
四、时机
五、负面效应
六、总结
 
一、深度愉悦与表面愉悦
愉悦分类
愉悦分类
 
从根本上来说,创造卓越的用户体验是获得深度愉悦的先决条件。
而现在仅仅聚焦于产品功能、实用性和特色已经远远不够了,我们要在这之上考虑更多东西。为了能够在市场上实现差异化并进行自我提升来超越竞争对手,我们需要专注于提升用户满足感、兴奋感与参与感。这事先就应该被考虑进设计过程中,而不应该搁置到过程结束之后再考虑。
这对于整个体验是非常特别的部分,就像招牌菜的秘方,故事的反转。
  1.  
    深度愉悦是你创造终身客户价值的方式。
  2.  
    深度愉悦是你让你的产品融入用户日常生活的方式。
  3.  
    深度愉悦是你与客户建立心理安全的方式。
 
在你的设计中营造“愉悦感”
 
 
二、了解 Kano 模型
东京理工大学狩野纪昭(Noriaki Kano)教授于1979年发表了《质量的保健因素和激励因素》,并与1984年1月18日正式发表《魅力质量与必备质量》,标志着KANO模式的确立。
因为在互联网圈内贴合度很高,可以对需求进行分类、优先排序。也就变成了产品经理的方法论之一。
五大需求类型
五大需求类型
 
1、基本型需求
基本型需求也称为必备性需求、理所当然需求,是用户对企业提供的产品或服务因素的基本要求。它是用户认为产品“必须有”的属性或功能,当基本性需求满足时,用户不一定会很满意;但如果没有被满足,用户就会很不满意。
对于这类需求,企业的做法就是注重不要在这方面失分,不断地调查和了解用户需求,并通过合适的方法在产品中体现这些要求。
2、期望型需求
期望型需求也称为意愿型需求。是指用户的满意状况与需求程度成比例关系的需求,即这类需求做的越好,用户的满意度就会越高。虽然期望型需求没有基本型需求那样苛刻,要求提供的产品或服务比较优秀,在互联网圈内,也成为“痒点”,即体现企业竞争能力的表现。企业能通过这类需求来提升产品的独特性与质量,超过竞争对手。
3、魅力型需求
魅力型需求也称兴奋型需求,是指提供给用户的完全出乎意料的产品功能或服务,使用户产生惊喜感的需求。虽然没有这个功能不受影响,但是提供之后会让用户非常的兴奋和满意。与期望型需求区别之处在于,魅力型需求是指数型的曲线,而期望型需求是线性曲线。
4、无差异型需求
无差异型需求是指就是你有没有这个功能用户都不太在意,对用户没有影响。
5、魅力型需求
反向型需求又称逆向型需求,指引起强烈不满的、导致满意度降低的需求功能。提供了反向型需求反而会使用户满意度降低。
KANO模型-四象限图
KANO模型-四象限图
 
Kano发现,如果你不满足基本需求,客户就不会对体验和性能感到满意,而愉悦感则毫无意义。他还指出,随着时间的推移和曝光度的提高,愉悦感可以成为性能需求,而性能需求可以成为基本需求。 想想 Twitter 的下拉刷新模式,或者 Slack 或 Discord 中的斜线命令。这些功能已经从令人兴奋的功能迅速转变为基础的UI模式,当它们不存在(或无法按预期工作)时,会让人不满意。
 
 
三、只有满足基本期望才能让用户产生愉悦情感
我们把 “令人沮丧”和 “令人愉悦”作为一个维度的两端来评估一个设计。而这个维度的中点,意味着设计既不令人感到沮丧但也不令人感到愉悦,它还好,它可以正常运行,它能用,它实用,它并没有令人难忘或者脱颖而出。它提供的是表现一般 平平无奇的用户体验。
把一个设计从令人沮丧移动到维度的中点, 意味着我们需要了解我们的用户并达到他们的预期和需求。要去掉任何能够让用户产生“难用”和“困惑”的因素,解决导致处理工作任务变慢。
Aaron Walter-用户需求的5个等级
Aaron Walter-用户需求的5个等级
 
1、解决用户的失败操作
我们经常会遇到类似的问题,项目里的每一个人都急于想设计出“理想”的视觉界面。然而,想要达到所谓的“完美”效果,往往痴人说梦。我们都知道,人与人之间存在极大的差异,即使我们的产品功能再完美,用户在使用产品的时候,哪怕只是遇到一个小小的障碍或断层,就会对产品的印象大打折扣。因此,我们应该将重点关注在解决用户的痛点,这一点很重要,可以让我们避免陷入“理想”设计和“完美”产品的漩涡之中,可以将影响面降到最低。
 
2.简化用户的复杂操作
过度密集是设计的最大阻碍。过多的元素会让用户感受到困扰,极大破坏用户体验。过度密集的设计涉及到界面中元素的数量,也涉及到视觉特征的多样性。过多的颜色和形状组合肯定会产生混乱。坚持美学的连贯、整体表达,形成让用户易于理解的设计语言。
互联网 30 年,桌面和移动界面的解决方案都已经标准化。符合用户习惯,就能够加速产品的学习周期。例如,用户习惯右上角看到个人资料或登录按钮。移动端搜索栏应该在列表的顶部。
这个规则不仅适用于单个界面元素以及元素的位置,也适用于整个页面或功能。如果忽略这些用户行为模式,出乎寻常的设计可能会延长用户的学习曲线,通常也会导致失败。
所有界面元素都可以根据用户的优先级来定位。考虑界面元素在用户执行任务时的作用,通过强调不同视觉的手法,我们可以在每一屏中确定界面元素的优先级。字体、颜色、形状、图标。这能够帮助用户遵循流程和界面逻辑行动。适当的将界面分区,这能够帮助用户划分关键场景。
当用户使用产品时,就会在脑海中构建一张心智地图。能够及时的提示用户操作某些特定的场景,提示寻找某些信息和服务等等。
 
四、时机
引起用户愉悦的体验一般都会由一个特殊场景或者特定的客户触点触发,比如等待时间、消费数据、升级过程等等。然而没有一种通用触发情绪手段适用于所有情况。我们所在的市场竞争激烈,我们要寻找新的方式使自己在一众竞争者中脱颖而出,同时为用户增加价值是我们一直努力的目标。我们都在为同一个目标而努力,即创造有意义的设计和用户体验来和产品建立深层联系。
让用户看到意料之外的结果能让沮丧的情绪转化成愉悦
有许多种方法和途径可以激活产品的“情绪愉悦”。而 第一步通常都是花费时间去真正了解用户痛点——找出什么对用户来讲很重要,并找机会填补这些空缺。
1、品牌个性
在众多不同的行业中,你需要一个能让你的产品在众多同类产品里 脱颖而出的品牌命名。
2、微互动
关注用户的情绪在 UI 交互中有非常重要的作用。我们都知道产品中的 微动画 有多么重要,我们可以利用这些动画来回应人们在屏幕前做出的反应。
在你的设计中营造“愉悦感”
 
 
在开发产品时,把 UI 界面体验变得 更感性,让用户觉得屏幕另一端运行程序的是 真实的人类 而不是冰冷的计算机。在用户完成一项个人目标时给予他们 奖励。例如,即便用户的收件箱没有新增邮件时,可以利用动画让用户在体验上有更多的 参与感 。
触感反馈就能体现应用软件在用户进行界面操作时给予了积极反馈。这样的举动会让页面加载时间变得更加有趣,不那么难以忍受。
Twitter 为用户改进了下滑刷新界面。就是这样简单而有效的产品反馈,让其他数千款 app 都不约而同地使用了同种交互语言,因为这让数据刷新体验更加流畅。
在你的设计中营造“愉悦感”
 
 
3、在用户没有抱有期待时提供帮助
让用户感到愉悦的瞬间并不需要高度可视化元素或动画。我们的目的是寻找这样一个机会,当他们没有意识到或者没有期待被帮助时,给予用户帮助。在这个案例中,正要输入繁杂冗长的 Wi-fi 密码时,界面跳出了“分享密码”的弹窗。这一举动使用户分享私密信息变得更安全,更简单,同时用户体验变得更轻松。
苹果:分享Wi-Fi密码
苹果:分享Wi-Fi密码
 
4、实时追踪反馈
实时追踪反馈是另一个行业变革技术应用。
Uber 的司机分享应用让用户在等车的同时,了解更多当前情景里的实时信息,例如你的司机是谁、接车车型、该司机的乘客评价等。有了这个功能,用户会认为自己有被很好的关心到。据我们了解,很多公司也在他们的应用产品上使用了这一策略和服务。现在你可以在手机上看到你订的披萨外卖已经走到哪里,大概什么时候会被送到。
在你的设计中营造“愉悦感”
 
 
5、自动填充
验证码发送后可以选择自动填入,不需要手动输入操作。
这是另外一个用户无需输入完整信息就可以达到目的,从而让用户的生活变得更加轻松的设计。
在你的设计中营造“愉悦感”
 
 
五、采取行动
设计能够愉悦用户体验的关键是什么呢?
我该如何在我的产品或者服务上实现这些呢?
愉悦用户情绪需要为体验中的某一关键时刻而设计,但是功能性又是放在第一位的。在设计过程中,你需要仔细并系统地处理用户情绪,而不是事后才考虑到这一点。
 
1、做好调研,从情绪板开始入手:
从外部和内部寻找灵感,不要局限于类似的产品,灵感可以以任何形式出现。
2、确定你所定义产品的使用案例:
找出你的产品能够让人感到意料之外惊喜的时刻。在建立的这种情感联系里,你的产品可以在哪些方面获利?
3、专注于一个目标,细节很重要:
让自己专注在一件事上,或者一个时刻。如果你同时想实现很多事,结果可能就是和愉悦用户背道而驰,还可能导致一屏信息过载,并且会让你的用户处于认知超载的状态。
你可以从以下 3 个层次入手对用户的情感做出反馈:
  •  
    本能层
    (外观,视觉语言,基调)
  •  
    行为层
    (如何运作,表现,回应)
  •  
    反思层
    (如何解释和理解)
4、传达意义即输出结果:
为情绪愉悦而设计的意义就是为了达成某一目的。你应该为了意义(达成目的)而做设计,二者应该是因果关系而非包含关系。这里的意义比情感更有力量,超越了本身的价值。
5、设计和演示:
和产品设计的其他过程一样,我们应该不停的测试、设计、测试、设计。让“愉悦情绪驱动的设计”变得有意义,就是一个不断迭代的过程,需要持续不断的实验和改进。
 
六、负面效应
当然,具有愉悦性的事物在某些情况下同样会带来负面效应。某些笑话可能冒犯到他人,温馨的广告可能误导部分观众,即便是可爱的音效也会因为运用不当而使人抓狂。
在UX领域,我们总会对那些体现着愉悦性的设计细节赞赏有加;而另一方面,对其负面效应的了解也将有助于我们更好、更全面的掌握这一设计原则,避开陷阱。
1、增加认知负荷与交互成本
一旦运用不当,意在愉悦用户的界面元素反而可能破坏可用性,增加界面的认知负荷及交互成本。
在你的设计中营造“愉悦感”
 
 
这是一个第一次见会被惊艳到,但实际上用起来可能没这么好的配色网站,界面排版视觉上非常舒服。
当随机换颜色的时候,背景会适配颜色变化,且有一个颜色渐变过度的效果。网站有个“颜色动态”的开关,点开后颜色数据旋转,由于中心旋转的缘故,使用时会产生眩晕、不适的感受。
过度追求视效及愉悦性,置可用性而不顾,穷极所能在每一个元素当中体现着“设计感”,最终结果便是信息难以获取,操作难以进行。
视觉表现层面的愉悦性可以为产品赋予生命与性格,使品牌形象更加生动饱满。然而一旦处理不当,愉悦性反而会破坏产品最基本的可用性,阻碍用户获取信息、完成任务。
2、审美疲劳
“惊喜”是构建愉悦体验的关键要素。新鲜的、不期而遇的美好事物总会让人感到开心。
通常情况下,愉悦感都会随着时间而渐渐淡化,你能想到的最为精彩出奇的细节表现也只会在最初的一段时间内给人以新鲜感,而维系的方式似乎只有在情感化的方向上一遍又一遍的重设计。
3、愉悦的定义是主观的
见过那些试图融入幽默元素的出错页面?本质上讲,这种做法相当于在很坏的状况下通过开玩笑来缓解尴尬。通常,在人们试图获取信息、保存数据或完成任务却遭遇意外状况而导致失败的时候,任何带有“搞笑”味道的反馈信息都会显得缺乏同情心,用户很可能感到被冒犯,甚至因此被激怒。
此外,“愉悦”的定义也因人而异。在一部分人看来十分新鲜有趣的东西,对另一部分人可能会很糟。普遍适用的愉悦标准几乎是不存在的,“情感化”是一个复杂地带,良好的设计初衷未必如愿带来正面的结果。
令人不适的缺省设计
令人不适的缺省设计
 
4、安全的愉悦性策略
对愉悦性的负面效应了解后,我们知道,挑战和风险确实存在,但这并不意味着你需要彻底规避这个概念,关键在于识别一些适合承载愉悦体验的时间点。
在那些用户不常见到的界面当中尝试愉悦性元素是最为安全的
譬如:
  •  
    app启动页面
  •  
    帐号设置成功页面
  •  
    新功能游历
  •  
    用户初次完成某个重要操作之后的反馈页面
  •  
    空状态页面
这些状态通常只会被体验一次,情境都以正面情绪为主,无需担心反复无趣或是恼人一类的问题。
所以我们时常在新手引导流程当中看到一些有意思的表现形式,例如改版后的Google Sites。这类产品环境当中的多数页面都很简单直白,高度聚焦于任务,没有多余的元素干扰流程,只有在这些“一次性”的环节当中给人以惊喜,通过引发情感共鸣来促进信息的传递。
在你的设计中营造“愉悦感”
 
 
当下对于愉悦性的运用方式大家都在摸索,因为这是一个很主观的概念,任何绝对化的规则都难以成立。 对于如此抽象和感性的概念,恐怕每个人心中都会有着不同的定义。
 
七、总结
永远不要低估“愉悦”在优化用户体验方面能够发挥的作用。我们应该对它持有积极的态度并找到机会让“用户情感愉悦”在我们的产品里发挥作用。同时我们要牢记,制造“愉悦”情绪的根本是,我们要为用户提供从未期待过的奖励,而不是仅仅是为用户开发一个产品。
我们的最终目标一直都是功能性、稳定性、实用性,而追求“愉悦”并不应该成为限制这些目标的枷锁。每一个要实现的目标都应该能够相互衔接融洽互不干扰。我们需要移除科技术语,遵循自然语言,在产品里添加“有趣”“幽默”的特性,最重要的一点:你的设计和产品需要别有用心。
不要一味的注重产品的功能,同时还要考虑用户的情绪。我们需要为用户提供一个有趣味性的使用体验。
在你的设计中营造“愉悦感”
 
 
 


作者:拒不背锅女士
链接:https://www.zcool.com.cn/article/ZMTY0NzExNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这些提升用户体验的小技巧,你知道吗?

天宇 设计思维

为了帮助大家更轻松地提升设计水平,这里整理了一些简单实用的小贴士。希望这些小技巧不仅能够助力您优化当前的设计项目,还能在未来的设计之旅中为您提供参考价值。
 
 
 
21.将不相关的字段隐藏
在设计表单时,建议不要一次性展示所有信息和步骤,而是在用户真正需要的时候再呈现,这样可以更好地管理复杂性。如果用户一打开表单就看到大量的内容,可能会感到压力很大,甚至会放弃填写。
因此,我们可以隐藏那些不相关的信息,去掉不必要的字段。通过合理地简化表单内容,可以减轻用户的心理负担,确保只有在他们需要的时候才显示必要的信息,从而减少他们在填写其他表单项时的干扰。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
22.统一风格的图片更有高级感
在选择图片时,我们的目标是实用性和一致性,而不是过分追求华丽的效果。如果只是一味地追求美观,可能会导致图片风格各异,从而破坏整体的视觉统一性,影响用户的体验。因此,设计师在挑选图片时,需要对风格进行精确的把控,或者在后期进行适当的处理,以确保所有图片都能呈现出一致的视觉效果。
图片的风格对整个App的整体感觉和用户的情绪有着重要的影响。风格一致的图片不仅能带来愉悦的视觉享受,还能激发美好的联想。我们可以从以下几个方面来控制图片的风格:
● 类型:如位图、插画或形状;
● 视角:如平视、仰视或俯视;
● 背景:如简约、复杂或纯色;
● 呈现区域:如堆积、局部或特写;
● 构图:如中心、水平线、对称或对角线。
此外,还有很多其他抽象的方式来调整图片,虽然这些方法不是绝对的,但我们可以通过多角度的尝试,力求让每一张图片都达到最佳的视觉效果。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
23.在中性色中融入色相
在上一期的内容中,我们探讨了如何设置中性色。当饱和度(S值)为0时,通过调整亮度(B值)4到5个等级,可以很好地表达信息的层次结构。这种方法虽然有助于保证设计不出错,并能满足最基本的需求,但在追求更高层次创意的设计项目中,可能会显得有些单一。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
在更为成熟和全面的产品中,设计师们往往不会仅仅依靠纯灰色作为唯一的中性色调。通常会在基础的灰色调中加入一些微妙的色相变化。这样做不仅可以让整体视觉效果更加丰富,而且还能有效避免画面因过于依赖灰色而显得僵硬或缺乏活力。
常用的方法是在中性色中融入少量蓝色调。蓝色能够传递出一种平静、稳重的感觉,给界面带来柔和而不突兀的变化,同时保持良好的清晰度。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
需要注意的是,在加入新色相时,我们的目标是创造颜色间的细微差别,几乎达到难以察觉的程度,而不是让这些差异成为用户注意力的焦点,这样才更有利于提升界面的整体质感。因此,对于较浅的颜色来说,所添加的色相强度应当控制得很低,反之,颜色越深则添加的色相越多,类似下面的这种曲线:
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
24.第三方图标风格应保持一致
大多数应用程序都支持通过第三方平台登录,这种方式可以显著降低用户在登录注册时所需花费的时间成本。这种便捷的登录方式一般在登录页面的底部提供多个(如微信、QQ、微博等)图标入口。然而,很多设计师会忽略一个细节,就是直接将第三方平台提供的官方图标,简单地调整大小使之统一,然后整齐排列在一起,并没有进一步针对整体视觉效果进行专门的设计优化。
对于追求高品质用户体验的产品来说,任何不起眼的小细节都不应该被忽略。在处理第三方图标时,应以自己产品的图标风格为基础,对所使用的第三方登录图标进行重新设计或适当调整。这不仅能够确保整个界面风格的一致性,提升美观度,还能增强品牌识别度,让用户在整个使用过程中感受到更加连贯且专业的体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
25.可视化密码比输入两次更直观
为了提升您的使用体验,并确保密码的安全性,可以让用户在输入密码时自由选择显示或隐藏密码内容。这种方式替代了传统的双次输入验证方式,尤其有助于创建有效的密码。用户可以直接看到自己设置的密码是否满足安全标准,同时也减少了因重复输入而造成的错误。
另外,系统应当明确地展示密码的具体要求,并为用户提供即时反馈,帮助他们了解如何构建更安全的密码。例如,在用户开始输入密码时,界面下方可以实时更新密码强度(如弱、中等、强)及已满足的安全条件(比如长度、包含数字/符号/大小写字母等)。这样做不仅能让用户更好地理解什么是好的密码实践,还能激励他们遵循这些建议,从而提高账号的整体安全性。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
26.使用合适的表单录入控件
在设计表单时,选择合适的输入控件可以帮助用户更好地理解每个字段需要填写的信息量。
  •  
    能通过选择来完成的操作就不要让用户手动输入,这样不仅方便了用户操作,也减少了错误的发生。
  •  
    对于那些内容较短的输入项,比如姓名或电话号码,可使用单行输入框,前提是确保让所有输入的内容都能清晰可见。
  •  
    像评论、反馈或这种可能包含较多文字的地方,应使用多行文本框。这样用户能更轻松地查看和编辑文本内容。同时,我们还可以通过一些视觉提示,例如滚动浏览、输入框右下角的高度调整等,这样更便于用户操作。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
27.提供解决方案助力转化
在UI设计过程中,当用户尝试进行某项操作时,因未满足特定条件或出现操作失误而无法继续,这可能会对转化率产生负面影响。为了改善这种情况,在设计时可以采取更加贴心的做法:明确告知用户为何无法进入下一步,并提供具体的解决建议。这样做对于提升转化率非常有帮助。
比如,在用户打算用账户余额购买服务的情况下,如果仅仅提示“余额不足”,用户可能会感到困惑,甚至需要多次尝试不同的路径来完成充值和购买过程。一个更佳的解决方案是直接向用户展示当前账户余额,并提供快速充值链接。这样一来,用户可以直接通过这个链接轻松完成充值,随后顺利购买所需服务。这样的设计不仅简化了操作流程,也大大提升了用户体验的流畅度。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
28.标签栏的高级感
大多数标签栏设计都倾向于简洁风格,主要通过选中和未选中的状态来区分不同的选项。状态的变化依靠文字颜色的变换或在选中的标签下方添加一个小横条来实现。尽管这样的设计看起来简单,但要想让它脱颖而出却并不容易。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
很多产品从其品牌的独特性中汲取灵感,利用品牌作为用户熟悉且喜爱的形象作为设计的基础,这样做不仅能够建立一种视觉上的连贯性,让用户感受到内外一致的美好体验,同时也能加深他们对品牌形象的记忆。除此之外,加入一些有趣味性的图案也是一个不错的选择,它们能以独特的方式吸引用户的注意力,为用户提供更加愉悦的视觉感受。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
29.合理的规范输入格式
在表单设计过程中,虽然大多数输入项可以采用通用的处理方式,无需特别干预,但一些特殊类型的表单项,设定合理的格式约束显得尤为重要。这样做不仅有助于系统更准确地收集数据,还能有效减少用户填写错误的可能性,提升整体数据质量。
对于某些特定信息如地址、手机号码以及银行卡号等,可通过技术手段自动为这些长串文字自动添加分隔符,如空格或短横线,这样做能够使信息更加直观易读,便于用户检查自己所填内容是否正确无误;同时,也使得后续的数据处理工作变得更加简单高效。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
30.页面加载中,提前展示布局
在众多产品中,用户界面的数据或内容在完全加载之前通常仅显示空白页面。这种处理方式可能导致用户困惑,因为他们无法确定当前状态是正在加载、已加载完毕但无内容可展示,还是遇到了错误。
实际上,用户界面的布局往往是相对固定的。因此,在实际内容加载完成前,提前向用户展示界面的基本结构是一种更为友好的设计策略。因为在等待数据加载的过程中,用户能够预览即将呈现的内容框架,从而减少了不确定性带来的焦虑感。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
此外,这一做法符合人机交互设计中的一个重要原则——系统状态可见性。根据该原则,产品应当清晰地告知用户当前发生了什么,并提供足够的反馈信息以帮助其理解系统的现状及后续步骤。通过预先展示UI布局,应用程序不仅表明了正在处理请求的状态,还为用户构建了一个对未来操作环境的心理预期模型,进而提升了用户体验的整体满意度与效率。
 
 
31.表单页内容过长,适当进行分页
在对表单内容进行了精简处理后,依然显得很长,应该避免一次性向用户展示所有信息。过长的表单不仅会增加用户的填写时间,还可能引发用户的困惑与不满情绪,最终导致放弃填写。为此,建议根据逻辑关系及属性将表单项合理地分配到多个页面中,且清晰展示整个流程进度情况。这样可以使用户感受到填写过程更加简便流畅,同时也能帮助他们更好地理解整个表单结构,从而专注于当前的任务。
值得注意的是,在采用分页策略时,需谨慎平衡分页的数量与步骤的复杂度。过度细分会无谓地增加操作环节,反而可能引起用户的反感,进而产生新的问题。因此,在规划分页方案时,应当综合考虑简洁性和易用性原则,确保最终方案既能有效简化任务又能保持良好的用户体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
32.有时候,背景色比分割线更显高级感
在过去,设计师们常常使用线条来清晰地划分不同组件之间的界限。然而,在当今流行的扁平化设计理念中,这样的做法有时会让页面显得有些拥挤,并且缺乏层次感。一个非常有效的替代方案是为相邻元素选择仅有细微差异的背景色来进行区分。这种方式不仅能保持界面的整体美观与简洁,还能够让用户更加自然流畅地识别出不同的信息区域。这样在确保了内容的可读性和易用性的同时,也能为用户提供更加舒适的视觉体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
33.适当加大触控热区
你是否有过这样的体验:在使用某个应用程序或网站时,对着界面上的按钮一顿乱点,却发现要么完全没有反应,要么系统反馈特别慢。你可能会怀疑是手机卡顿了或者网络连接不稳定,感觉非常糟糕。其实,很多时候这种情况并不是因为设备性能差或网络问题,而是用户界面设计上存在一些小缺陷。
设计师们都知道,在进行UI设计时面临着一个挑战:如何在美观性和实用性之间找到最佳平衡点?特别是对于像按钮、超链接以及单选/复选框这样的交互元素来说,它们的实际显示大小往往很难达到人类手指接触区域的理想尺寸。如果这些控件设计得太小,用户就很难准确点击到目标位置,导致操作效率降低甚至失败。
从视觉效果考虑,当某些功能性组件需要保持较小外观时,我们可以确保可触发区域足够大。这样即使用户视线不那么集中,也能轻松完成任务,避免因误触或其他原因造成的不便。值得注意的是,无论该元素本身看起来有多小,它所关联的触控热区都不应低于标准值。例如,在iOS平台上,推荐的最小可点击区域大小为44x44 pt;而Android操作系统中,则建议至少保持48x48 pt。这样保持了界面的美观性,还能大大提升用户的操作体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
34.为图片添加色彩层营造氛围感
在图片上添加色彩层或将其转换为单一色调,可以创造出类似黑白照片的效果,这样能显著增强图像中物体或人物的形态感。通过简化色彩,观众的注意力更容易集中在图像的核心内容上,从而提升了视觉主体的表现力。
此外,选择不同的单色调不仅能突出主题,还能有效营造特定的情感氛围。比如,蓝色调可能会给人带来一种宁静、平和的感觉;而暖色调如红色或橙色,则可能激发温暖、活力甚至是紧张的情绪。通过精心挑选和运用色彩,我们可以极大地丰富视觉语言,提高图像传递信息的能力。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
35.使用前端验证,提升信息的有效性
前端验证是一种在用户输入信息时即时检查数据有效性的方法,无需将数据发送到服务器。这项技术基于预先设定的规则,在用户离开输入框时自动启动,能够快速检测诸如格式、长度或类型是否正确等问题。这样做的好处在于,它能够在用户完成整个表单之前就发现并指出潜在错误,从而提升了用户体验和数据准确性,避免了等到最后提交才发现问题所带来的不便。
在设置前端验证时,请记得不要过早开始校验过程,以免造成持续不断的错误提示,给用户带来困扰。最佳实践是在用户完全填写完当前项之后再进行验证。这样做既能保证及时给出反馈,又能避免因频繁出现提示而打断用户的操作流程,让整个体验更加顺畅愉快。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
结语
创造既美观又高效且易于使用的UI界面确实需要投入不少时间和精力,还可能要经历多次的迭代与改进。不过,正是通过这一系列细致入微的调整过程,我们才能打磨出一款让客户、用户以及我们自己都感到满意的优秀作品。



作者:大漠飞鹰CYSJ
链接:https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 

 

洞察用户心声:解锁用户习惯,让产品成为用户的贴心小助手

ui设计分享达人 交互设计及用户体验

例如,Windows和Mac操作系统的用户在面对不同的软件关闭方式时,会因为习惯的差异而感到不适应。这种不适应性揭示了改变用户习惯需要付出学习成本,而这种成本的高低也直接影响用户对产品的接受程度。

软件产品中,如何减少页面跳转?

资深UI设计者 设计管理与成长

这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给用户,需要我们重新对信息进行组织分类,使信息能更高效有序地被用户认知。在进行信息设计的时候,我们会经常遇到“扁平化设计”这个词,在我的理解看来,扁平化设计可以理解为:“精简交互步骤,用户用最少的步骤就完成任务”。层级太多了用户就会看不懂;即使看得懂,层级多了用起来也麻烦,因此:手机上能不跳转就不跳转。那我们就来看看有没有办法减少跳转…

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档