首页

色彩在UI设计中的应用

清阳 平面设计

我们经常会使用到很多产品,一些产品里的色彩搭配也会给我们留下深刻的影响,比如你会记得淘宝的橙色、支付宝的蓝色等等,色彩对于用户的体验也很重要;兰亭妙微ui设计公司分享了关于色彩在UI设计中的应用,我们一起来看一下。

一、色彩的应用

人脑对于色彩的记忆度要高于形态,即一个App给用户留下深刻印象的往往是界面的色彩;例如说到支付宝,我们可能想不起它的首页长什么样子,标签栏图标是那些,但能马上记起它的界面主色是蓝色;因此运用好色彩对UI设计十分重要,它能直观的呈现产品的气质和性格,能有效的帮助用户组织和阅读信息,与界面设计产生联系和记忆。

好的配色往往依靠设计师审美、感觉搭配出来,但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑,下面结合相关案例为大家讲解色彩运用的几个技巧。

1. 不得触碰的禁区

分析研究了很多优秀设计作品,发现他们在用色的时候有一部分区域是不会使用的,也就是我们常说的“配色禁区”;当然,这里的“禁区”是带双引号带的,并没有什么绝对的禁区,只是说这些颜色不易控制,在连基础色都没有驾驭好之前,尽量少碰。

配色禁区大概分为这三种:三角形禁区、矩形禁区、扇形禁区(红色为禁区),如下图:

综合看来,不管是那种禁区,右下角区域的颜色是很少用的。毕竟他们又脏又深,当然什么颜色都能驾驭的大师请略过。

知识点:

在界面设计中,一般主色和辅助色都集中在右上角,次要的和不可点的颜色都集中在中中上方,而文字信息和背景色则集中在左侧,右下角禁区是我们要重点避开的对象。

2. 色调一致

在App设计之前应先确定界面的主色调,主色将占据界面中很大的比例,通常是品牌色,而辅助色、点缀色、背景色等都应以主色调为基准来搭配,这样才能保证App整体色调的一致。

色调一致的界面,能带给用户始终如一的视觉体验。例如马蜂窝将黄色(品牌色)作为主色,以及从主色搭配出的蓝色(对比色)贯穿App始终。

3. 60-30-10原则

60% 30% 10%的原则,是达到色彩平衡的最佳比例。在60%的空间使用主色,可以运用到导航栏、按钮、图标等关键的元素中,使之成为整个App的视觉焦点和色彩关系;30%的空间使用辅助色,可以平衡过多的主色而造成的视觉疲劳;最后剩下10%的空间为点缀色,可以用在一些不太重要的元素又需要区分的时候。

6:3:1原则构建了一种丰富的色彩层次,让界面看上去和谐、平衡和不杂乱。

哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上,蓝色的辅助色用在角标、图标上,还有黄色、红色用在一些小图标、小标签上,主次非常清晰明了。

4. 色不过三

经常很多大神在网上说配色不要超过三种色,其实就是「色不过三」原则,即在一个页面中不要使用超过3种颜色搭配,这也和上面说的“60-30-10原则”类似,即一个主色、一个辅助色和一个点缀色。

但在实际UI设计中,迫于产品的需要可能会使用更多数量的色彩,但切记不可超过7种色相(注意不是7种色值),每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。

美团外卖的首页20个功能入口大图标的背景用了9种不同的色彩,每种色彩又包含一种低饱和度色彩进行彩色渐变,但并没有显得杂乱,而是呈现一种年轻时尚的律动感。

这是因为这里虽然使用了9种不同的色彩,但仔细观察发现只使用了3种色彩,其他6种则是从前者邻近色中提取出来的搭配,再将它们错落放置,呈现出丰富多彩的色彩搭配,整体和谐统一。

5. 远离纯黑色和纯灰色

黑色就像没有生命力的深渊,使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色,是因为它们不存在于现实世界里;尝试在纯黑和纯灰中加入一些色调,会让界面看上去更柔和自然;另外,纯黑色还会与白色产生强烈的对比度,看久了会使人疲劳,让用户产生焦虑的情绪。

MONO的导航栏并不是深黑色,而是加入了蓝色的低饱和度蓝黑色,它的界面背景也是加入了蓝色的的浅色,这样就不会让界面看上去死气沉沉的。

6. 遵循色彩心理学

前文我们已经了解过各种色彩的心理学知识,就是为了我们在进行App设计时提供依据;这些色彩都是源于人类对大自然最原始的感受,蓝色的天空、绿色的草地、黄色的沙漠等等,自然的色彩,对于我们来说是司空见惯的,但其中却蕴含着丰富的美感,并达到了和谐统一。

网易云音乐使用红色作为主色,这种热情奔放的颜色传递出一种充满能量、自信的气质。

7. 良好的可读性

良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验,而一个可读性差的界面则会成为用户浏览的障碍。

那如何确保界面具有良好的可读性呢?

这就需要在界面设计中注意色彩搭配的对比,如在浅色背景上使用深色文字,在深色背景上使用浅色文字,使用高对比的度的亮色展示重要的元素,用低对比度的浅色来体现需要弱化和次要的内容;例如苹果Music的主要功能入口,标签栏图标、按钮等都是用了高纯度的红色,与其他元素从形成鲜明对比,就连深灰色的辅助文字都有着清晰的可读性。

8. 从大自然中获得灵感

配色中尽量使用大众熟悉的色彩,如自然界中人们常见的色彩等;从大自然中获取的配色灵感可以使你的设计更加切合用户的审美,非常自然;而艺术是对自然的直接反映,是非常宝贵的资源,值得好好利用。

我们可以搜集各种与自然风光相关的图片,从中提取色彩运用到设计中,这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心;天气应用Marline就是一个很好的例子,它的界面背景渐变就参考大自然的变化,随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色,打开应用即唤起了用户的快乐情绪。

9. 将UX颜色与品牌相匹配

品牌价值在创建调色板中发挥关键作用,但是它们不是唯一重要的因素,行业规范也是关键;使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。

配色在品牌视觉中所发挥的作用是不言而喻的,但是,色彩本身的内涵和情绪特质并不是全部;比如一个行业当中,很多产品都使用了蓝色,那么你的产品继续使用蓝色,可以让用户更快「识别出」你所属的领域;但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出,可以试着使用不同的色彩。

中国区或美国区,红色和蓝色都是最流行的颜色

在进行品牌设计的时候,选择配色的第一步,始终是了解各种颜色或者色相的气质和情感属性;然后,在具体设计的时候,再进一步根据品牌的气质和需求,再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。

10. 从强调色入手

想要让配色方案更加突出,在设计中添加强调色可能是最容易入手的地方;举个例子,一个律师咨询的App可能会使用传统的蓝色作为基础配色,但是,如果能够加入柠檬绿作为强调色,会显得独特很多。

11. 冷暖色对比搭配

冷暖对比色是自然平衡的规律,可以在设计中大量使用,这样的配色会使作品非常的出彩,同时不显单调,让用户感觉舒服平和;而且这种搭配方法基本没有啥缺点,使用在设计中,技巧性比较多,对设计的细腻感受要求比较高,需要多练习。

12. 黑白色搭配不过时

黑色是所有中性色中最强的,而白色是最常用的背景顏色。

黑色是一个很好的选择,有种高端和永恒的感觉,而白色可以带给用户自由,宽敞和透气的感觉;如上所述,黑色和白色也是最大的对比色,如果合理的使用黑色配合白色,会营造出一种优雅的氛围。

12. 强交互色彩

交互色彩在执行过程中必须清晰且在界面中保持一致。

号召性用语必须相对于背景具有足够的对比度,并且相对于其他组件必须具有足够的视觉权重,以便用户可以轻松识别它们;Nike健身应用中,「开始」按钮以高饱和度的柠檬绿作为主色,从背景中脱引而出。

但是,交互色彩并不总是以最具饱和度或最亮为特征,而是通过色调、形状、大小或对比度,从屏幕上脱颖而出;因此,交互色彩的有效性将基于用户识别交互区域和执行任务的速度来衡量。

同时,次要功能权重要更轻,并在视觉上更接近信息元素。如上图Nike Training界面中,“设置”和“声音”按钮只用简单的白色,减轻对主按钮的干扰,也避免了页面中出现多个强交互按钮。

13. 保证良好的可读性

可读性是任何设计中的重要因素。你的颜色应该清晰易读,尤其是在处理文字时;因此对比度对视觉效果对影响就非常关键,对比度过小,就会使得界面出现灰蒙蒙对效果。

清晰的对比度,一般会采用色彩的两极,黑纸白字或白纸黑字;而在彩色背景上要让内容清晰可见,就需要搭配纯白或高明度的文字,避免灰色文字;也要注意避免彩色背景上搭配互补色和明度接近的文字,因为这两种搭配会产生一种“震颤效应”,发出光晕的视觉效果。

14. UI中的阴影

没有完全纯黑的阴影,阴影的颜色是会受到物体本身固有色的影响,一定要避免使用纯黑色(#000000),使用不太深的灰色,效果会更好;对于有颜色的元素,好的做法是为阴影设定与元素相同的颜色,并使其更暗一些。

如果是有颜色的元素,并且它处在黑暗的背景下,一般情况下,是不建议使用阴影的;但是如果你一定要用,把阴影透明度调到小于10%及以下,并且颜色跟随主色调来;比如按钮为绿色,则可以为按钮设定一个更深的绿色阴影,并加上小于10%的透明度数值。

如下图,左侧的按钮阴影很自然,右侧的则有一层模糊发光的效果,显得不够漂亮。

知识点:

为什么「超链接文字」要用蓝色?

简单说,因为在最早期的网站页面中,蓝色能呈现最高的对比度。

Tim Berners-Lee——web 的主要开创者,被认为是最早用蓝色链接的人。

一个很早期的 web 浏览器 Mosaic,用的是深灰色背景和黑色文字;那时候,能用的非黑色、最深的文字颜色,就是蓝色;所以,让超链接文字突出显示,同时保证可读性,就选定了蓝色,此后超链接文字都用蓝色的传统沿用至今。

二、app设计中的色彩搭配

App的色彩搭配能直观、快速的反馈到用户的大脑中形成记忆思维;好的色彩搭配可以加深用户对产品的印象;明确界面的视觉层次,让用户分清主次信息;同时还能给用户赏心悦目的视觉享受。那么,在UI设计时该如何进行色彩搭配呢?

我们可以从App中都包含了那些色彩开始,通常一个App中包含了主色、辅助色、点缀色、背景色这4类,下面就以微信读书为例进行详细的讲解(个人角度)。

1. 主色

主色是指在配色中处于主导地位的色彩,给用户的第一眼印象,通常是产品的品牌色。

在App设计中,主色一般占有色相色彩的60%的比例;这里指的是60%的界面都使用到的主色比例,而不是使用面积(因为通常一个界面中使用面积最大的是背景色);还有就是背景色多为浅灰色或白色,它们都属于无色相色彩,因此不涉及到配色过程中。

我们看到微信读书的第一印象,就可以判断它的主色为蓝色,这也是它的品牌色;在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色,使界面看上去非常和谐一致。

2. 辅助色

辅助色与主色相辅相成,辅助色的功能是帮助主色建立更完整的形象,使界面丰富精彩起来,避免画面过于单一。

通常,主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色,但注意辅助色不宜过多,否则就会使界面看上去花哨分散了主题;根据6:3:1原则,辅助色可以占有色相色彩的30%或更少为宜。

在微信读书中,绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色,它们都是辅助色,主要用于功能图标和栏目分类上。

虽然辅助色看起来有点多,但其实都是从主色的邻近色和对比色(及其邻近色)中提取出来的搭配,而且只用在页面中很少的地方,这种搭配技巧既可以丰富色彩的搭配,传递出年轻活跃的产品气质,又保证了整体搭配的和谐统一。

3. 点缀色

点缀色是除了主色和辅助色以外的另一种色彩,通常体现在细节上。

其作用是,当页面中主色和辅助色不能满足关键信息的提示时,就需要点缀色来吸引用户眼球,还有就是利用点缀色来平衡画面的冷暖色调。

点缀色通常都是分散的,使用面积小,颜色非常显眼,能与主色形成强烈的对比;一般点缀色是主色的互补色。在微信读书中,使用了香槟金、梅红和红色作为点缀色;香槟金用在文章分享按钮上,梅红色用在点赞图标上,强调其特殊性,红色用在通知及退出登录提醒上,用于警示。

来康康这三种点缀色与主色之间存在什么样的关系,在色相(H)上,3种点缀色为邻近色,与主色为互补色;在明度(B)上,3种点缀色均为高明度色彩,起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。

4. 背景色

背景色就比较好理解了,通常为了衬托内容,大多数App都是用浅灰色作为背景色,以白色作为背景色的对比色,来区分视觉层次;建议是可以根据前景色来提取背景色,将其调亮或变暗,这样可以让界面色调更加统一。

在微信读书中背景色是偏蓝色调的浅灰色,而不是纯灰色,背景对比色是在白色里加入了蓝色色相,而不是纯白色,整体对比较柔和,给人清爽通透的感觉。

支付宝 Alipay Design 团队提出过一个配色原则:

以同色系配色为主导,多色搭配为辅。

同色系为统一的色相,使用中可以加深品牌色的感知,可以让界面更有层次,同时可以让界面保持色彩上的一致性;由于业务的多样化,我们需要多色搭配为辅;多色的辅助颜色,也可称之为功能色,可设定不同的任务属性和情感表达;再搭配中性色黑白灰,赋予更多的变化和层次。

两种配色通过主次、使用比例,可灵活运用在业务的各个场景中,具有非常好的延展性。

三、迷人的渐变色

不同于单一色彩,渐变色不属于任何色彩,它营造出千变万化的视觉效果,却又不会增加视觉负担。

相较于单一的色彩,渐变色的复合性质让它在界面设计中具有更强的视觉冲击力,有助于快速抢占视线;如今,这种独一无二的色彩正逐渐成为一种潮流,究其原因是目前大量的扁平风格造成UI设计的严重同质化,人们需要追求更加个性的视觉语言来满足日益增长的设计需求。

下面我们来了解几种常见的渐变的使用技巧:

1. 色相、饱和度、明度的渐变

色相(H)渐变是指由一种色彩向另一种色彩的过渡,这种渐变因跨度大产生的视觉效果非常明显;饱和度(S)渐变是指同一种色彩不同纯度的过度,其产生的视觉效果比较和谐单调;明度(B)渐变是同一种色彩不同明暗的过度,这种渐变的视觉效果给人一种沉静的氛围。

2. 渐变的表现形式

在界面设计中经常看多各种各样的渐变表现方式,使用最多的有以下几种:

水平渐变:

这个很好理解,是指角度为0的线性渐变,是最流行的渐变形式;界面设计中多用在导航栏、进度条、按钮等元素上,能让画面变得精致而通透;例如京东使用橙红渐变的设计语言贯穿整个App,从应用图标到导航栏、按钮、标签,全部都运用了这种由红色到橙色的过渡;仔细观察发现在很多小标签上都使用了水平渐变设计手法,使产品看起来更年轻化。

知识点:

在水平渐变中,通常把轻(亮)的色彩放在左边,重(暗)的色彩放在右边,这样由左向右的方向感刚好与人的浏览习惯保持一致;而反过来就会与人的浏览视线相悖,应避免。

垂直渐变:

即角度为90°的线性渐变,它通常被用在正方形或竖条形的元素上,如注册登陆页,个人中心头部等;垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果,上浅下深会让给人一种凸起的立体感,而上深下浅会给人一种凹陷下去的空间感。

例如「纪念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景,在让整个画面丰富的同时又不会太抢夺主体的色彩,使画面显得清新透气而不沉闷。

角度渐变:

角度渐变通常有对角渐变和多角度渐变;有角度的渐变相比水平和垂直渐变,它的使用场景更广,如图标背板、启动页、注册登录页、标签等;想让界面更加绚丽、动感和迷人,这时候我们可以考虑多组渐变搭配使用。

色块渐变:

渐变的颜色不只可以运用在一个色块上,还可以运用在一组色块上;设计师运用一组近似性色彩,将每个菜单项清晰区分开,让界面平衡在一个频率上,这样的画面更有节奏感和舒适性。

不同于平滑的渐变,色块渐变不再是单纯的背景装饰,在某些地方还具有一定的功能性,比如使用不同的色块来分割的列表样式;Clear Todos是一款日常任务清单的APP,它抛弃了传统的列表样式,使用了一系列色块来作为列表的分割,非常漂亮和精致。

径向渐变:

是指色彩以圆心向四周扩散的渐变,是一种模拟光源照射的视觉效果,因此光源是整个画面的视觉焦点,将关键元素放在光源中心就会成为主角;通常被运用到大背景上,如启动页、引导页等。

Solar天气应用的背景就是径向渐变,光源扩散的效果营造出一种梦幻般的美感。

3. 和谐的渐变色

渐变色是由一个色彩走向另一个色彩的过程,有着迷人的视觉效果;如果你仔细观察两种色彩的过渡关系,就会发现不是每次都会得到满意的效果,例如红绿渐变就很糟糕,因为它们两者是互为对立的色彩,但是如果加入黄色的过渡色就会好很多;原因是当两种色彩之间超过90度就会导致其渐变色看上去不太和谐自然,只有控制在90度之内才会产生美妙的变化。

如何改善超过90度的两种色相的渐变呢?这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时,就可以加入紫色作为过渡才能呈现完美的视觉效果。

知识点:

在搭配渐变色时,尽量只改变其色相(H)、饱和度(S)、明度(B)中的一项,这样才能创造出和谐的渐变色方案

转载:人人都是产品经理

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

聊聊 UI 设计中的潜台词

清阳 交互设计及用户体验

对一个产品而言,除了自身的内容之外最重要的便是设计了。对于设计每个人都有自己不同的审美和想法,那么该如何做出好的设计呢?本文从潜台词这一角度兰亭微妙UI设计公司来介绍如何搞好设计,让我们一起来看看吧!

对一款产品而言,内容是核心,而设计则是让核心价值触达用户的关键桥梁。UI 设计的审美与思路向来千人千面,而想要打造出贴合用户体验的优质设计,除了打磨直观的视觉与信息呈现,更要读懂设计背后的 “潜台词”。本文将从潜台词的视角,拆解 UI 设计的底层逻辑,探索让设计与用户深度共鸣的方法。
 
在 UI 设计工作中,我们总会听到诸如此类的需求与反馈:
 
“这个页面的感觉不太对”
 
“需要再加一些氛围感”
 
“这段信息呈现得有点干”
 
……
 
这些看似模糊、如同 “五颜六色的黑” 般难以落地的要求,往往让设计师无从下手。而 “潜台词”,正是破解这类问题的关键钥匙。接下来,我们将从为何思考设计中的潜台词何为设计中的潜台词潜台词的核心作用三个维度,聊聊 UI 设计里的潜台词艺术。
 

一、为何思考设计中的潜台词

 
我对设计潜台词的思考,源于一次微信游戏名片的设计实践。微信游戏名片的核心功能,是在游戏 APP 中展示玩家的游戏信息,为玩家间的社交搭建桥梁,让不同游戏的玩家能便捷查看彼此的微信游戏数据。
 
最初的设计方案,采用了与微信客户端一致的设计语言,意在强化微信的渠道认知,界面的信息结构也做到了简洁清晰。但上线后,这份看似 “合格” 的设计却收获了大量负面反馈:有用户觉得名片风格过于生硬,像突兀插入的小广告;也有玩家表示,沉浸游戏时看到这款名片,完全没有点开的欲望。

image.png

这一结果让我开始反思:为什么看似满足了 “简洁清晰” 的设计要求,却无法契合用户的使用体验?我们在做设计时,是不是遗漏了什么核心要素?而想要找到答案,首先要厘清一个根本问题 ——UI 设计,究竟在设计什么?

image.png

从设计理论与行业资料中,我们能找到诸多答案:
 
  • 设计是信息的包装与合理排布
  • 设计是整理信息的艺术
  • 设计的本质是交流,是信息的有效交换
 
这些答案中,都绕不开一个核心词 ——信息。信息是视觉设计的基础元素,设计师通过整合文字、图片、声音、视频等直观信息,吸引用户注意力,让用户能快速捕捉页面核心内容。但在实践中我发现,除了这些直观可读的信息,用户的注意力往往还会被另一类隐藏的视觉信号吸引,而这,就是 UI 设计中的潜台词

image.png

用户的注意力会同时聚焦于直观信息与潜台词信息,唯有兼顾两者,才能让设计真正贴合用户的感知与需求。
 

二、何为设计中的潜台词

 
其实在工业设计领域,早已存在关于 “物品潜台词” 的探讨。唐・诺曼曾提出,物品具备两种示能性:一是物件本身的物理特质,二是使用者能感知到的提示性特质。而这一提示性特质,正是物品所传递的潜台词。

image.png

深泽直人的两个经典设计,完美诠释了这种潜台词:一款香蕉汁饮品,无需任何文字说明,仅凭香蕉造型的瓶身,就能让用户立刻知晓产品属性,传递出 “这是香蕉汁” 的潜台词;一款台灯的底座被设计成托盘造型,使用者会自然而然地将钥匙、手表等随身小物放置其上,因为底座的形态传递出 “可以盛放小物件” 的提示。
 
如同物品的信息可分为物理特质与提示性特质,UI 设计中的信息也能分为直接信息潜台词信息。直接信息是界面中直观的文字、图片、数据等内容,而潜台词信息,则是设计师通过颜色、形状、图案、质感等视觉手法,为界面赋予的隐藏信号。

image.png

这些视觉潜台词,能为界面营造专属氛围、唤起用户的情绪共鸣,甚至引发用户的回忆与思考,让设计超越单纯的信息呈现,成为与用户沟通的语言。
 

三、潜台词的核心作用

 
在日常的 UI 设计工作中,我发现潜台词能发挥三大核心作用:传递隐藏信息建立情感连接减少认知成本。这三大作用,能从不同维度优化用户体验,让设计更有温度、更易理解、更贴合场景。
 

1. 传递隐藏信息,让体验路径更流畅

 
回到微信游戏名片的设计案例,从潜台词的视角分析,问题便迎刃而解。市面上主流的头部游戏,界面大多采用暗色沉浸式风格,这种视觉设计的潜台词是:“放下外界干扰,开始专注的游戏体验吧”,目的是为玩家营造专注、沉浸的游戏心流。

image.png

而最初的微信游戏名片,采用明亮清晰的设计风格,其潜台词更偏向 “高效、冷静的平台功能工具”。游戏界面与名片界面的潜台词形成强烈反差,这正是用户觉得违和、生硬的核心原因 —— 视觉潜台词的割裂,打破了玩家的游戏沉浸感。

image.png

想要让玩家的游戏与社交体验无缝衔接,就需要让游戏名片传递与游戏 UI 连贯的视觉潜台词。基于此,我对设计方案进行了两大优化:
 
  1. 加入通用的游戏视觉元素点缀,贴合游戏场景;
  2. 将卡片整体改为暗色模式,与游戏的沉浸式风格统一。
 
优化后的新版游戏名片,传递出与游戏主界面一致的 “专注、沉浸” 潜台词,不仅弱化了原本的突兀插入感,还能兼容大部分游戏的视觉风格,让玩家在游戏与社交的过渡中,拥有更连贯、流畅的体验。

image.png

这一案例也印证了:潜台词是界面隐藏信息的传递载体,精准运用潜台词,能让用户的体验路径更顺滑,让设计与使用场景深度融合。
 

2. 建立情感连接,让设计更有温度

 
第二个案例,来自微信游戏礼品站的设计。游戏礼品站是支持玩家间互赠游戏道具、周边的小程序,在设计过程中,产品经理常提出一个核心需求:“这个页面能不能更有氛围感?”
 
“氛围感” 看似抽象,从潜台词的角度解读,本质就是在传递直接信息的基础上,通过视觉语言为用户传递更多情感信息。基于此,我确立了明确的设计目标:通过视觉潜台词,让用户的情感产生共鸣、持续升温,让送礼与收礼的过程,充满仪式感与情感价值。
 
想要实现这一目标,并非让所有页面都堆砌华丽的视觉元素,而是要找对设计发力点,具体分为三步:
 

第一步:梳理页面,按情感浓度划分设计层级

image.png

首先梳理礼品站的完整使用路径,发现不同页面的情感承载度差异显著:一部分是挑选、购买道具的工具类页面,核心需求是高效、便捷;另一部分是赠送、接收、拆礼物的核心页面,核心需求是完成用户的情感传递。显然,后者是情感化设计的关键切入点。

image.png

第二步:挖掘情感元素,传递专属潜台词

 
结合现实生活中的送礼体验,一份有温度的礼物,既不会是简单的塑料袋包装,也不会是过度繁琐、华而不实的堆砌,而是恰如其分的仪式感 —— 简洁整洁的礼盒,搭配写满心意的留言卡片,就是最能传递情感的形式。

 

基于此,我将 “礼盒” 与 “留言卡片” 抽象为核心 UI 元素:礼盒直观表达 “送礼” 的行为,传递 “这是一份用心准备的礼物” 的潜台词;写有双方昵称与留言的卡片,连接起送礼者与收礼者的关系,强化情感共鸣。将这两个元素融入核心的 “拆礼物” 页面,即便用户不看界面文字,也能立刻感知到 “有朋友为我送上了一份心意满满的礼物”,让情感传递更直接、更动人。
 

第三步:统一视觉语言,利用曝光效应加深记忆

image.png
确定 “礼盒” 这一核心情感象征后,我为其设计了扁平、微拟物、强拟物三种不同维度的视觉表现形式,根据不同页面的风格,搭配不同重量感的图形。同时,让 “礼盒”“留言卡片” 的视觉元素在礼品站的各个页面反复出现,利用曝光效应,让用户对礼品站形成专属的视觉记忆,也让情感潜台词的传递更连贯。

image.png

小结来说,通过挖掘贴合场景的核心情感元素,让设计传递专属的情感潜台词,能有效放大用户间的情感连接,增强用户的场景代入感,让送礼这一行为超越道具本身,成为玩家间情感交流的纽带。
 

3. 减少认知成本,让信息更易理解

 
第三个案例,是和平精英 S12 赛季战报的设计。赛季战报的核心功能,是回顾玩家在赛季中的游戏表现,而设计的核心挑战是:如何将冰冷、复杂的游戏数据,转化为直观、易懂的内容,让玩家能快速感知自身的游戏成果,进而产生分享欲望。

image.png

从潜台词的角度思考,破解这一问题的关键,是用用户熟悉的事物,具象化陌生的抽象数据—— 通过视觉潜台词,将游戏数据与用户熟知的概念关联,用熟悉事物的潜台词解释陌生数据,降低用户的认知成本,让数据变得生动、有画面感。
 
具体设计中,我们做了两大尝试:

image.png

一是将 “击杀人数” 具象为现实中的 “楼层高度”。和平精英中,被淘汰的玩家会变成存放装备的小木盒,我们便将玩家赛季总击杀数,转化为 “盒子堆叠的高度”—— 比如 “本赛季淘汰 175 人,盒子堆叠高达 16 米,相当于 6 层楼的高度”,用现实中可感知的 “楼层高度”,让玩家直观感受到自己的击杀成果,远比冰冷的数字更有冲击力。

image.png

二是用游戏玩家熟知的装备等级颜色体系,区分分享卡片的稀有度。将灰色、绿色、蓝色、紫色、金色,分别对应 “普通、优秀、稀有、史诗、传说” 的实力等级,这种颜色的潜台词,在游戏玩家的认知中早已形成固定印象。用不同颜色打造赛季战报的分享卡片,能让玩家一眼感知到自己赛季表现的稀有程度,既降低了认知成本,又提升了卡片的分享价值。

image.png

这一案例的核心思路是:当需要向用户传递陌生、抽象的概念时,将其具象为用户熟悉的事物,用熟悉的潜台词唤起用户的记忆与认知,能让信息传递更高效,也让设计更贴近用户的认知习惯。
 
综上,UI 设计中潜台词的三大核心作用可总结为:
 
  • 传递隐藏信息:让设计的隐藏信号与场景契合,让体验路径更流畅;
  • 建立情感连接:挖掘核心情感元素,放大用户间的情感共鸣,增强代入感;
  • 减少认知成本:将陌生概念具象为熟悉事物,用熟悉的潜台词加快用户认知。

image.png

四、写在最后

 
思考 UI 设计中的潜台词,能让设计师跳出 “仅整理信息、排布界面” 的固有思维,用更多维度看待界面中的信息传递。很多时候,最精简的界面未必是最好的设计,真正的优质设计,是在简洁的基础上,通过图形、颜色、质感等设计手法,为界面描绘专属的故事,传递出准确的视觉潜台词。
 
而回到最初的问题 —— 为什么看似简单清晰的设计,却无法满足用户需求?如今我能给出明确的答案:我们追求的设计 “简单”,从来不是图形、界面排布的表面简单,而是用户感知的简单
 
UI 设计的本质,不仅是为信息建立秩序,更是用有限的设计资源,为用户打造更美好的感受与体验。读懂设计的潜台词,让设计与用户深度沟通,才是 UI 设计的核心要义。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

设计界前沿动态:院校突破与创意实践双开花

涛涛 设计管理与成长

设计领域的发展始终在学术探索与商业实践的双向奔赴中稳步前行,2025 年诸多前沿动态为行业注入了全新活力。从顶尖艺术设计院校的国际排名突破,到充满巧思的工业设计作品落地,再到大型建筑专案启动、国际艺术特展开幕与潮流 IP 跨界亮相,设计的边界不断被拓宽,融合性与创新性愈发凸显,展现出多元且蓬勃的发展态势。

高手设计弹窗的12个切入点

清阳 系统UI设计文章及欣赏

在日常的数字产品设计中,弹窗虽小,却往往承担着转化用户、传递信息、引导行为的关键角色。一个恰到好处的弹窗,能让用户体验如丝般顺滑;而一个设计粗糙的弹窗,则可能成为用户流失的导火索。

基于上百个真实的实战案例深度拆解,兰亭妙微ui设计公司总结出 12 种超实用的弹窗设计切入点。每一种都附有真实案例与核心优点,既好上手又具备延展性。无论你是想介绍产品功能、推送运营活动,还是引导用户互动,都能在这里找到适配方案,助你快速摆脱灵感瓶颈,让小小弹窗既好看又好用。

窗已是产品核心视觉焦点之一,产品整体功能定型后,弹窗会随运营活动持续迭代创新。本文基于上百个实战案例拆解,总结出 12 种易上手、延展性强的弹窗设计切入点,每种均搭配真实应用案例并提炼核心优势,适配产品功能介绍、运营活动推送、用户互动引导等多元场景,助力设计者突破灵感瓶颈,打造颜值与实用性兼具的弹窗设计。
 

01 卡片叠加式设计

image.png

小卡片错落超出大卡片的叠加形式,让弹窗视觉上灵动有层次,同时保证信息传达清晰明了,避免因设计叠加导致的内容混乱。
 

02 相册式产品卡片设计

image.png

将产品卡片与相册样式的图例相结合,视觉呈现贴合内容展示逻辑,尤其适合用于介绍产品功能、展示产品效果的弹窗场景,直观传递核心信息。
 

03 中间图标 + 方形卡片设计

image.png

以方形卡片为基底,搭配居中核心图标,是基础且经典的设计形式。操作简单易上手,同时具备极强的延展性,可适配多种产品风格与使用场景。
 

04 IP 形象 + 方形卡片设计

image.png

将产品专属 IP 形象与方形卡片融合,是创意枯竭时的优质普适性方案。借助 IP 的视觉辨识度,让弹窗兼具美观度与趣味性,强化产品记忆点。
 

05 拟人化表情图标 + 异形卡片设计

image.png

异形卡片打破传统方形弹窗的刻板感,搭配拟人化表情图标,为弹窗增添人情味与趣味性;再结合明快的阳光配色,进一步提升页面的欢乐氛围,拉近与用户的距离。
 

06 图标 + 空气弹框设计

image.png

摒弃传统弹窗的底色与边框,仅保留简约图标与核心文案。无多余视觉元素干扰,让关键信息在页面中更突出、更瞩目,极简设计适配轻量化信息传递需求。
 

07 简约插画组合 + 方形弹框设计

image.png

在方形弹框上方搭配简约插画组合,下方对应核心标题文案,图文结合让弹窗内容更丰富有层次。不仅提升视觉美感,更让信息传达更有力度,打造强记忆点。
 

08 信封式弹框设计

image.png

经典的信封造型弹窗,是跨平台、跨场景的普适性设计形式。虽无新颖创意,但因适配性强、用户接受度高,至今仍被各大平台广泛应用,适配各类基础信息与活动推送。
 

09 IP 配标题文字 + 空气弹框设计

image.png

将俏皮的产品 IP 与简洁的标题文字结合,采用无底色的空气弹框形式,兼顾趣味性与信息传递效率。视觉上轻盈吸睛,能快速让用户捕捉核心内容,高效完成信息触达。
 

10 无定式弹框设计

image.png

跳出异形、方形的传统弹窗框架,以核心内容(如优惠券、福利券)的有序排列形成 “隐形弹窗”。看似无固定形态,实则内容排布有章法,能最大程度突显核心信息,彻底打破常规设计的思维束缚。
 
这一设计也带来重要启示:弹窗设计的核心是精准表达需求,无需被固有样式限制,让设计为内容与场景服务。
 

11 底部弹出式插画弹窗

image.png

从页面底部滑出的弹窗形式,视觉瞩目性适中,不会过度干扰用户对主页面的浏览,底部页面信息仍可清晰查看。搭配简约插画,既丰富视觉层次,又避免弹窗设计过于单调。
 

12 底部弹出式空气插画弹窗

image.png

融合底部弹出的轻干扰形式与空气弹框的无框底特点,搭配插画设计,摆脱传统弹窗的样式束缚。视觉上氛围感与感染力拉满,核心标题更醒目,适配沉浸式体验的产品场景与氛围感营销活动。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

以设计为桥,唤醒潮汕在地文化的鲜活生命力 ——G STAR 峰的潮汕文创设计探索

涛涛 平面设计

在地文化是一方土地的精神内核,却往往在时代发展中逐渐沉寂,而优秀的设计,正是唤醒这份沉睡文化的关键力量。潮流设计师 G STAR 峰深耕潮汕在地文化,以独特的美学视角和深厚的文化情怀,从潮汕的民间信仰、非遗技艺、戏曲故事、日常民俗中萃取设计灵感,用现代潮流的设计语言重新演绎传统,让潮汕文化走出地域边界,成为能与当代年轻人共鸣的活态文化符号。他的潮汕文创设计,并非简单的传统复刻,而是在尊重文化本源的基础上,搭建起传统与现代、地域与大众之间的桥梁,让潮汕文化在潮流语境中持续生长、发声。

语言媒介:解锁新文创设计的灵感密码

涛涛 设计思维

语言是人类文明的载体,是交流思想、传递情感的复杂系统,其丰富的媒介形式为文创设计打开了全新的创作维度。从自然语言的口语、文字、手语,到人工语言的编程符号、数学公式,再到涵盖听觉、视觉、触觉等的非语言形式,每一种语言媒介都蕴含着独特的文化内涵与设计价值。当语言媒介与新文创设计碰撞融合,不仅让文化传播有了更多元的表达,更让文创产品兼具实用性、艺术性与文化性,成为连接传统与现代、文化与生活的桥梁。本文将从语言媒介的分类出发,结合经典设计案例,全面解析语言媒介如何成为新文创设计的灵感源泉。

从体验设计视角解析 B 端产品设计逻辑

涛涛 B端ui设计文章及欣赏

初入设计行业时,B 端与 C 端产品的概念仅停留在字面,面对实际设计工作时,常常不知该从何切入才能打造贴合需求的产品方案。经过多年的实战积累,对 B 端产品的体验设计有了更具象的理解,也逐渐梳理出一套适配其特性的设计思路,在此与行业同仁分享

如何提升UI设计的高级感

清阳 设计资源

我们平常会使用很多APP,久而久之我们会发现一些APP的设计非常的相似;一个有新意、精致的APP界面可以让用户产生很深的影响,对产品的形象也有一定的帮助;本文由兰亭妙微UI设计公司分享了关于如何提升UI设计的高级感的方法,我们一起来看一下。

一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。

本文总结了12个简单直观的提升设计感的小细节,一起来学习。

一、使用颜色深浅构建层次结构

在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比;单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。

每种颜色都有一个视觉权重,这有助于在内容中建立层次结构;通过使用颜色的深浅,为元素赋予不同的重要性。

如果可以的话,你甚至可以采用两到三种颜色:

  • 主要内容使用深灰色(诸如标题,但是不要用纯黑);
  • 次要内容使用灰色(比如商品介绍);
  • 辅助性内容采用浅灰色(比如发布日期);

类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

  • 大多数的文本采用正常的字重(400到500,具体取决于字体);
  • 对于需要强调的文字采用较重的字重(600到700,具体取决于字体);

▲主标题字重为600,其他标绿点的文字字重都为400

应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。

如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。

灰色文字在无彩/彩色背景下要分开处理:

不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。

但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:

一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色

其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃;通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。

二、统一色调

选择一种基础色,再调整色调和颜色深浅来增加均衡;设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。

三、干净的阴影

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。

相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。

这种轻柔的阴影呈现出的干净,增加了画面的精致;如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。

阴影不一定是黑色的,还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。

在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。

四、个性的图标设计

合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。

我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。

标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。

通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了;要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。

3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本,一般在外卖美食类应用中比较常见。

五、Tab的设计感

Tab是App设计中最常见的控件之一,它源自Material Design的设计规范;现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。

在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态;因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。

例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。

我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。

从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受;例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉独一无二,又进一步强化了用户对品牌形象的认知。

六、无框设计 去繁从简

在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法;使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。

我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:

1)使用阴影

阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力,让内容更聚焦。

2)使用不同的背景色来区分

通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分;所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。

3)增加额外的留白

创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了,通过留白和间距来实现元素分组是UI设计中的常用手法。

七、统一设计元素

在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。

通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。

如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观;这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。

八、符合产品气质的字体

选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。

虽然默认字体可以满足大多数App 的设计需求,但会出现一个问题就是——系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微;例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。

九、第三方图标风格统一

大多数App都支持三方登陆,他可以减轻用户注册的时间成本。

通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计;一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。

十、图片中寻找色彩

App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式;为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。

我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。

十一、提高图片质量

图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想;而低品质的图片会瞬间拉低App的质感。

在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用;即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。

十二、卡片式设计

现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率;同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。

 转载:人人都是产品经理

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

人人都可以是设计师:UI&UX 小技巧大全(二)

清阳 设计思维

让用户在使用产品时不产生混淆、可快速获取所需信息,是产品设计时应当考虑的重要层面,而这需要团队在设计时预先做好方案,去掉无关事物,清晰地呈现信息,提升产品的易用性与用户体验。兰亭妙微 UI 设计公司始终以 “精简信息、提升信噪比” 为设计核心,本篇文章里,作者结合实战经验,介绍了提高信噪比的设计技巧,一起来看一下。

用户对产品的体验往往源于直观感受,因此 UI&UX 设计直接影响着产品的成败 —— 即便产品功能再强大,糟糕的界面与交互体验也会让其价值大打折扣。
 
但想要优化 UI&UX 设计,并非一定要掌握系统且全面的设计知识,有时只需一些细微的调整,就能让设计效果实现质的提升。Marc Andrew 总结了 36 个可落地的 UI&UX 优化小技巧,分 6 篇系列文章呈现,本文为第二篇,希望能为设计师们提供实操参考。(原文发表于 Medium,标题为:UI & UX micro-tips: Volume two)

image.png

在打造高效、美观的 UI 界面时,那些看似不起眼的细节调整,往往能快速优化设计效果与用户体验。接下来,直接分享干货技巧:
 

一、选用通用认可图标,规避用户认知混淆

 
在设计界面中添加图标时,核心原则是选择行业通用、用户普遍认可的样式,确保图标能清晰传递操作意图与功能含义。
 

image.png

对比两种设计实例就能发现,使用表意模糊的自定义图标,会让用户产生操作困惑,形成认知障碍;而选用标准化的通用图标,能让用户无需思考即可理解操作指向。设计中切勿为了追求个性,使用过于小众、叛逆的图标样式,徒增用户的理解成本。
 

二、巧用亲密性原则,明确元素关联关系

 
在对比、间隔、重复等经典设计原则中,亲密性原则是打造清晰界面的关键,能有效帮助用户快速识别元素间的逻辑关系。

image.png

这一原则的落地方式十分简单:将内容相关、功能联动的设计元素就近排布,通过物理距离的远近,直观体现元素间的关联程度。反之,无关元素则保持合理间距。这样的设计方式,能让用户在浏览网页或 APP 时,快速建立对界面内容的认知,提升信息获取效率。
 
对比设计实例可见,元素排布松散的界面会让用户难以识别逻辑关联,而元素就近聚合的界面,能让信息层级更清晰。
 

三、4px 基线网格 + 8px 网格,打造和谐垂直视觉节奏

image.png

网格系统是界面排版的基础,将4px 基线网格与通用的8px 网格搭配使用,能让界面的垂直视觉节奏更和谐,尤其适用于字体排版环节。

 

具体实操方法为:让字体对齐 4px 基线网格,同时将行高值设置为 4 的整数倍(如 16、20、24、28px 等)。之所以选择 4px 作为基线网格单位,是因为单纯以 8px 为倍数进行伸缩,在处理部分文本尺寸时,灵活性与适配性会有所不足,而 4px 基线网格能弥补这一问题,与 8px 网格形成互补,让整体排版更具秩序感。
 

四、降低标题行高,提升视觉紧凑度与阅读体验

image.png

标题与长格式正文的排版需求截然不同:正文需要足够的行高来保证阅读舒适度,而标题通常文字简短,适当缩小行高不仅不会影响阅读,还能提升视觉紧凑度,让标题更具层次感。
 
设计中推荐将标题行高设置为文字大小的 1-1.3 倍,且标题文字越大,行高的倍数可适当降低。对比行高过高与行高适中的设计实例能明显发现,行高合适的标题视觉更聚焦,能让用户快速捕捉核心信息。
 

五、色轮类似配色,快速打造和谐配色方案

image.png

若在设计中陷入配色选择的困境,色轮类似配色法会是高效的解决方案 —— 类似色(也叫邻接色相 / 相邻色相)是最易打造视觉和谐的配色方案之一。
 
类似色指色轮上相邻的色相,由原色、间色与复色组合而成,基于这一原则选择配色,能快速搭建出简洁且无视觉违和感的色彩体系。借助色轮选择相邻色相进行搭配,无需复杂的色彩调试,就能让界面配色达到和谐统一的效果,大幅提升配色效率。
 

六、最大化设计信噪比,让核心信息更突出

image.png

设计的清晰度与可用性,核心在于提升信噪比—— 这里的 “信号” 指产品想要传递的核心相关信息,“噪音” 则是无意义的干扰元素。通过让信号最大化、噪音最小化,能让用户快速聚焦核心内容,提升信息获取效率。
 
实现这一目标的关键方法为:一方面通过强化视觉层级,让核心信息(信号)得到有效凸显;另一方面坚决剔除或弱化无关的文字、图标、装饰等元素(噪音),避免分散用户注意力。
 
对比两种设计实例能看到,元素堆砌、信息杂乱的界面会让用户难以捕捉重点,而剔除冗余元素、聚焦核心信息的界面,视觉更简洁,用户能快速获取关键内容。简言之,剔除无关、简化界面、突出核心,是提升设计信噪比的核心要义。
 
希望这些 UI&UX 微调技巧,能为大家的设计实践提供新思路,让每一处细节调整都能为产品体验赋能。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

医疗管理系统 UI 设计案例:Dia Clinic 如何通过专业界面提升诊疗效率

蓝蓝设计的小编 系统UI设计文章及欣赏

北京兰亭妙微科技有限公司带您欣赏这款 Dia Clinic 医疗管理系统的设计案例,它在医疗类桌面端 UI 设计上兼顾专业与易用性,为医护人员提供高效的患者诊疗管理能力。

  1. 胸腔影像诊疗页(Thoracic Imaging):聚焦患者胸腔部位的影像诊疗场景,是提升医疗影像诊疗效率的实用设计。
     
    • 3D 影像展示区:清晰呈现胸腔骨骼(如 Columna vertebralis thoracica)、膈肌等解剖结构,还支持点击 “Run 3D environment” 开启 3D 交互环境,让医护人员更直观地观察病灶,这正是医疗 3D 影像交互系统的优势体现。
    • 患者信息卡片:同步展示患者 Magnus Stephenson 的基础信息与 “Medical History” 入口,方便医护人员快速调取病史,助力精准诊疗,是优化患者诊疗信息查询流程的关键设计。
    • 健康指标模块:实时更新血压(128/82)、心率(74 bpm)等核心体征数据,让医护人员随时掌握患者状态,为及时调整诊疗方案提供依据,这也是医疗实时体征监控系统的重要功能。
     
  2. 诊疗日程与历史管理区:高效整合预约与诊疗记录,是医疗门诊日程管理系统的典型设计。
     
    • Appointment Schedule:以日历形式呈现 2026 年 1 月的预约安排,标注不同类型的诊疗项目,还能快速查看下一场(1 月 19 日)肺科医生的会诊信息,帮助医护人员合理规划诊疗时间。
    • Appointment History:汇总已完成 / 待安排的诊疗记录,清晰展示医护人员、科室及诊疗类型,便于追溯患者诊疗流程,提升医疗诊疗记录管理效率。
  3. 兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

     

    image.png

  4.  

日历

链接

个人资料

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

存档