首页

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

涛涛 设计思维

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

从体验设计视角解析 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.  

移动端网约车服务UI设计案例:从界面到体验,如何打造便捷出行的用户旅程

蓝蓝设计的小编 移动端UI设计文章及欣赏

 

北京兰亭妙微科技有限公司带您一同深入探究这一网约车服务案例研究,从设计角度剖析其如何在出行领域中打造便捷、高效的用户体验。
 

界面布局:清晰引导,一目了然

 
从截图中不难看出,该网约车服务案例在界面布局上独具匠心。首页以简洁直观的地图为核心,清晰标注用户所在位置以及周边可叫车区域,极大方便用户快速定位自身与潜在车辆的位置关系。地图周围巧妙分布着各类功能按钮,“叫车” 按钮醒目且突出,即使初次使用的用户也能迅速找到并发起叫车请求,这一设计精准契合了用户在出行场景下对便捷操作的需求,是优化网约车用户操作流程的重要体现。
 

车辆与司机展示:透明化,增信任

 
在车辆与司机信息展示板块,设计充分考虑了用户对安全性和服务质量的关注。每一位司机的头像、姓名、驾龄以及车型、车辆颜色等详细信息都清晰呈现,让用户在乘车前就能对服务提供者和乘坐车辆有全面了解。例如,司机的高驾龄数据可以让用户对其驾驶经验感到放心,这种透明化的信息展示方式,有效增强了用户对网约车服务的信任,是提升网约车服务信任度的关键设计点。
 

行程跟踪:实时动态,心中有数

 
行程跟踪功能是此案例的一大亮点。一旦叫车成功,用户界面会实时显示司机的行驶轨迹以及预计到达时间,随着司机的移动,地图上的图标动态更新,精准呈现司机位置。这种实时动态的行程跟踪设计,极大减少了用户等待时的焦虑,让用户能够更好地规划自己的时间,充分体现了网约车行程实时跟踪系统的优势,为提升用户出行体验奠定基础。
 

支付与评价:便捷收尾,双向沟通

 
完成行程后,支付与评价环节同样设计得十分流畅。支付界面简洁明了,支持多种常见支付方式,如微信支付、支付宝支付等,用户只需轻点几下即可完成支付,整个过程快速便捷,优化了网约车支付流程。而评价功能则为用户提供了一个与司机双向沟通的平台,用户可以针对司机的服务态度、驾驶技术等方面进行打分和文字评价,有助于平台不断提升服务质量。
 
北京兰亭妙微科技有限公司始终关注行业前沿设计趋势,如同此网约车服务案例,通过创新设计为用户带来更好的体验。

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

 

image.png

B端邮件营销 SaaS UI设计案例:Emaily 如何用 UI 设计赋能全流程营销管理

蓝蓝设计的小编 B端ui设计文章及欣赏

北京兰亭妙微科技有限公司带您欣赏这款 Emaily 电子邮件营销 SaaS 产品的设计案例,它在桌面端 UI 设计与移动端 UI 设计上都独具匠心,为营销人员提供全方位邮件营销活动管理能力。
 
  1. 活动详情页(Campaign Overview):聚焦 “Winter Sale Launch” 活动数据分析,深度复盘单次营销活动效果,帮助营销人员找到提升邮件营销活动转化率的策略。
    • 核心指标卡片:清晰展示发送量(12,430)、打开率(38.2%)等关键数据,通过与往期对比的箭头和百分比,让营销效果一目了然,体现数据可视化设计的精妙,有助于理解电子邮件营销 SaaS 产品优势。
    • 实时趋势图表:以折线图呈现近

       

      7 天点击率、退订率和收入动态变化,便于快速定位活动表现的起伏点,为营销决策提供有力依据,是分析邮件营销活动效果的重要方
    • 用户行为分析
      • Top Link Clicked:依据点击数据找出最受欢迎链接,助力内容优化,展现精准的用户洞察设计,对提升邮件内容吸引力有重要作用。
      • Device Breakdown:揭示不同设备打开邮件的比例,52% 用户通过桌面端打开,移动端占 27%,平板端占 21%,为响应式 UI 设计提供重要参考,保障各设备用户的良好体验。
      • Top Locations:直观呈现美国、摩洛哥和贝宁等主要受众来源地,方便针对性布局市场,是制定邮件营销策略的关键依据。
       
     
  2. 活动列表页(Campaigns List):作为营销活动的中央管理控制台,在页面布局设计上尽显高效,提升营销活动管理效率。
    • 状态分类:利用 “All/Drafts/Scheduled/Sending/Complete” 标签,清晰划分不同生命周期活动,实现流程化管理,这是电子邮件营销流程优化的重要体现。
    • 活动概览表:以表格形式整合活动名称、状态等核心信息,方便快速筛选对比,轻松掌握不同活动表现。
     
  3. 移动端界面(Mobile App):精心设计的移动端 UI,功能完备,随时随地管理营销活动,满足移动办公对邮件营销的需求。
    • 数据仪表盘:在手机端即可查看发送量等关键指标及活动趋势,帮助营销人员及时掌握动态,不错过提升邮件打开率的时机。
    • 自动化管理:查看自动化流程及完成度,提升营销自动化水平,是现代邮件营销的重要发展方向。
    • 排程与送达评分:便捷管理排程活动并监控送达评分,确保邮件有效触达,是保障邮件营销效果的关键环节。
     
  4. 桌面端仪表盘(Dashboard):桌面端 UI 设计简洁高效,为用户提供邮件营销业务宏观视角,助力全面把控邮件营销业务。

B端与C端设计:效率逻辑与情感逻辑的本质区别

清阳 交互设计及用户体验

在数字化产品全面渗透的当下,UI设计早已不是单一的视觉美化工作,而是根据产品定位、用户需求、商业目标分化出清晰赛道的专业体系。其中,B端设计与C端设计作为两大核心分支,看似同属用户体验设计范畴,却在目标设定、核心原则、实现路径、落地细节上有着天壤之别,二者各司其职又相辅相成,共同构成了完整的数字化用户体验版图。本文将结合兰亭妙微UI设计公司多年深耕UI设计领域的实战经验,全方位拆解B端与C端设计的核心差异,帮助从业者、企业方精准把握两类设计的精髓,打造适配场景、贴合需求的优质产品。

B 端与 C 端设计:效率逻辑与情感逻辑的本质分野

 
在数字产品的设计版图中,B 端与 C 端设计如同一枚硬币的两面,同属用户体验构建的核心组成,却因服务场景、用户需求的本质差异,形成了效率至上与情感共鸣的两种核心逻辑。二者的区别远不止于界面布局、交互细节的表层差异,更根植于价值主张的根本不同:B 端设计以工具理性为核心,追求复杂业务中的极致效率与严谨秩序;C 端设计以用户感性为导向,致力于在轻量化交互中建立深度情感连接与使用愉悦。本文将从目标设定、设计原则、复杂性呈现等七大维度,深度剖析二者的核心差异,同时解读当下行业的融合趋势,为产品设计提供底层逻辑参考。
 

一、目标设定:任务完成的工具性 VS 体验愉悦的情感性

 

B 端设计:效率至上的工具理性

 
B 端产品的核心价值在于解决企业明确的商业问题,通过优化业务流程提升组织效能、降低运营成本,其用户使用产品的核心诉求是完成特定工作任务,而非兴趣或娱乐。这种强工具属性,决定了 B 端设计的核心导向是最大化功能效用,最小化任务完成时间,让专业从业者能高效处理复杂业务。
 
典型案例:钉钉工作平台
 
作为企业级协作工具的标杆,钉钉的设计深度契合 B 端产品的效率逻辑,所有设计选择均围绕企业业务落地展开:
 
  • 功能密度优先:单屏承载多模块信息,大幅减少跨页面跳转的操作成本;
  • 组织架构可视化:将企业层级、权限关系在界面中直观呈现,明确业务协作边界;
  • 任务流程线性化:把审批、汇报等核心企业流程标准化,规避操作冗余;
  • 数据呈现结构化:报表、统计数据以最直接的形式展示,降低专业数据的解读成本。
 
钉钉的 “已读未读”“DING 一下” 强提醒功能,从纯用户体验视角看虽有 “压迫感”,但从企业管理效率出发,却是确保信息高效传达、业务及时推进的必要设计,精准满足了组织对信息可控性、业务落地性的核心需求。
 

C 端设计:情感连接的用户共鸣

 
C 端产品身处注意力稀缺的市场环境,用户的使用意愿源于情感认同而非任务压力,产品的成功与否,核心取决于能否在用户心中建立深度情感连接,创造超越功能本身的体验愉悦。相较于 B 端的 “完成任务”,C 端更追求 “愿意使用、乐于分享” 的用户心智。
 
典型案例:微信
 
从即时通讯工具成长为全民数字生活平台,微信的设计演进是 C 端产品构建情感连接的经典范本,其设计策略始终围绕用户体验与社交共鸣展开:
 
  • 渐进式功能披露:从基础通讯出发,逐步上线朋友圈、公众号、小程序、视频号,让用户在熟悉产品的基础上自然接受功能拓展,降低认知门槛;
  • 社交场景自然延伸:将红包这一传统民俗数字化,打造全新的社交互动模式,让功能成为情感传递的载体;
  • 界面极致简洁:核心聊天界面十年基本不变,以稳定的交互体验降低用户的记忆成本;
  • 生态化而不臃肿:通过小程序实现功能无限拓展,同时保持主应用的轻量化,兼顾体验与实用性。
 
微信早期的 “摇一摇” 无强实用价值,却通过简单的交互动作创造了新奇的社交体验;朋友圈的半封闭分享模式,虽限制了内容传播范围,却提升了强关系社交的互动质量与情感安全感,让产品与用户的社交需求深度绑定。
 

二、设计原则:复杂中的秩序构建 VS 简单中的体验深度

 

B 端:在复杂性中建立可落地的秩序

 
B 端产品的核心设计挑战,在于面对不可避免的业务复杂性时,建立清晰、可复制的使用路径。专业工具的价值往往与功能深度正相关,因此设计师的核心任务并非消除复杂性,而是管理复杂性,让复杂的业务逻辑转化为可被用户理解、操作的系统。
 
  1. 信息架构的深度与广度平衡
     
    以金山 WPS 企业版为例,作为服务企业全流程办公的专业套件,其需满足从基础文档编辑到复杂企业管理的多层次需求,对应的设计解决方案精准且落地:
    • 模块化功能区:将数百项功能按办公场景分类组织,让用户能快速定位所需功能;
    • 上下文智能显示:根据用户当前操作动态调整工具栏,避免无关功能造成的视觉干扰;
    • 多视图支持:为同一文档提供编辑、审阅、阅读等多模式,匹配不同办公场景的使用需求;
    • 模板系统化:内置符合企业规范的各类文档模板,降低企业办公的标准化成本。
     
  2. 一致性与可预测性
     
    一致性设计是 B 端产品减少用户认知负荷的关键,飞书作为企业协作平台,将这一原则贯穿设计全流程:
    • 操作模式统一:所有列表的排序、筛选、分组操作遵循相同逻辑,让用户 “一次学会,处处能用”;
    • 反馈机制标准化:成功、警告、错误提示采用统一的视觉语言,让用户能快速识别操作结果;
    • 导航结构稳定:核心导航项位置固定,不因功能更新而频繁变动,保障业务操作的连续性。
     
 

C 端:在简单中创造有温度的体验深度

 
C 端产品的设计挑战与 B 端截然相反 —— 如何在保持表面交互简单的同时,提供足够丰富的体验深度。用户不会为 “强大但复杂” 的产品买单,却愿意为 “简单却有趣、有温度” 的产品投入时间,因此 C 端设计的核心是轻量化交互 + 高价值体验
 
  1. 认知负荷最小化
     
    抖音的界面设计是降低 C 端用户认知负荷的典范,让不同年龄、不同互联网认知的用户都能快速上手:
    • 单一内容焦点:全屏展示单个视频,排除所有干扰元素,让用户专注于内容本身;
    • 手势操作统一:上滑切换内容、双击点赞、左滑进入主页,以最直观的手势替代复杂操作;
    • 零文本界面:几乎无需阅读任何说明文字,实现 “无教程式操作”;
    • 即时反馈强化:点赞时的爱心动画、评论后的快速回复提醒,以视觉化反馈明确操作结果,提升使用愉悦感。
     
  2. 情感化交互设计
     
    从微信的 “拍一拍” 到小象超市的 “加购动画”,这些看似 “非必要” 的设计元素,实则是 C 端产品建立用户粘性的关键,其核心价值体现在三方面:
    • 增加产品个性:通过微交互打造独特的产品气质,让产品在同质化市场中形成记忆点;
    • 创造愉悦时刻:在完成核心操作时给予超出预期的反馈,让简单的操作变得有温度;
    • 强化行为习惯:通过积极的视觉、触觉反馈,鼓励用户重复使用,逐步培养使用惯性。
     
 

三、复杂性呈现:显性结构的可管理 VS 隐性智能的轻量化

 

B 端:拥抱并管理显性复杂性

 
B 端产品的复杂性是可见的、结构化的,其面向的专业用户具备理解业务复杂性的能力,而产品设计的核心是让这种复杂性变得可管理、可操作,而非刻意隐藏。用户通过理解系统的内在逻辑,获得对复杂业务的控制能力,进而提升工作效率。
 
典型案例:明道云 aPaaS 平台
 
明道云作为面向企业的低代码平台,需要支持用户自定义复杂业务流程,其设计将显性复杂性的管理做到了极致:
 
  • 可视化流程设计器:通过拖拽组件构建工作流,让抽象的业务流程转化为直观的视觉图表;
  • 数据模型清晰展示:以可视化形式呈现实体关系,让用户能快速理解数据关联逻辑;
  • 权限矩阵明确配置:将每个角色的操作权限矩阵化展示,清晰界定不同岗位的操作边界;
  • 系统架构透明化:向管理员开放 API 接口、数据表结构,让企业能根据自身需求进行二次开发。
 
B 端产品对不同类型复杂性的管理策略各有侧重,核心均为 “让复杂可落地”:
 
表格
 
 
 
复杂性类型 设计应对策略 典型案例
功能复杂性 模块化组织、渐进式披露 金山 WPS 企业版
流程复杂性 可视化工作流、状态实时追踪 明道云
数据复杂性 多维视图、智能筛选排序 Tableau
权限复杂性 角色矩阵、分级授权管控 钉钉
 

C 端:将复杂性隐藏于智能背后

 
C 端产品的核心追求是“简单的表面”,将所有技术、逻辑的复杂性隐藏在智能算法和后台处理中,让用户在无感知的情况下享受复杂技术带来的优质体验。用户无需理解背后的逻辑,只需关注 “使用是否便捷、体验是否愉悦”。
 
典型案例:今日头条的推荐系统
 
表面上,今日头条只是一个支持无限刷新的信息流平台,操作简单到极致,但背后却依托复杂的智能系统,实现了 “千人千面” 的内容推荐:
 
  • 实时兴趣学习:根据用户的每次点击、停留时长、收藏转发等行为,动态调整推荐策略;
  • 多维度内容理解:对文本、视频等不同形式的内容进行深度语义分析,精准识别内容核心价值;
  • 个性化排序:基于用户兴趣标签,对信息流进行个性化排序,让用户 “总能看到感兴趣的内容”。
 
C 端产品的隐性复杂性与表面简化设计形成了完美的互补,最终转化为优质的用户体验:
 
表格
 
 
 
隐层复杂性 表面简化设计 最终用户体验
推荐算法 无限刷新信息流 内容精准匹配,提升使用粘性
内容理解 统一的信息卡片样式 不同形式内容一致呈现,降低视觉认知成本
兴趣预测 个性化内容排序 越用越懂用户,提升体验契合度
A/B 测试系统 稳定的界面与交互 产品持续优化,用户无感知适配
 

四、协作模式:结构化协同的专业性 VS 社交化连接的轻量化

 

B 端:多角色工作流的精细设计

 
B 端协作产品的核心是服务企业组织的协同需求,需要支持不同岗位、不同角色的复杂互动,因此设计必须兼顾权限、流程、信息安全三大核心约束,让结构化的协作流程落地,提升组织协同效率。
 
典型案例:飞书的协作架构
 
飞书的设计充分考虑了企业协作的复杂性,从底层架构上支撑多角色、多场景的结构化协同:
 
  • 角色化视图:为不同岗位定制专属信息面板,让用户只看到与自身工作相关的内容,避免信息冗余;
  • 权限精细控制:文档、群聊的访问权限可精确到个人,保障企业核心信息的安全;
  • 流程节点明确:审批、任务分配等流程的状态实时可见,让每个角色都能清晰掌握业务推进进度;
  • 异步协作优化:通过评论、@提及、任务留言等功能,支持非实时协作,适配企业跨地域、跨时段的协作需求。
 

C 端:基于关系的轻量级互动

 
C 端社交产品的协作核心是人与人的连接,而非标准化的业务流程,因此设计更偏向灵活、去中心化,重点在于降低互动门槛、增加互动趣味,让用户能轻松实现情感交流与信息共享。
 
典型案例:微信群的社交设计
 
微信群的设计完美体现了 C 端协作的轻量化特点,契合用户的社交需求:
 
  • 扁平化管理:群成员关系基本平等,管理员仅拥有基础的管理权限,弱化层级感,提升交流自由度;
  • 灵活进退出:用户可随时加入或退出群聊,无复杂的审批流程,适配社交关系的动态变化;
  • 多媒体富互动:支持文字、图片、语音、视频、红包、小程序等多种互动形式,让情感表达更丰富;
  • 弱流程约束:无固定的协作流程,对话自由流动,适配日常社交的随意性、多样性。
 

五、演进路径:垂直深耕的专业化 VS 跨界扩张的生态化

 

B 端:在专业领域持续垂直深耕

 
B 端产品的演进始终围绕行业专业化、业务深度化展开,往往沿着垂直专业化的路径发展,在特定领域建立难以替代的专业壁垒。其新功能的开发与上线,均建立在已有专业深度的基础上,与原有系统深度集成,保障数据与流程的一致性,避免因功能扩张导致的业务混乱。
 
典型案例:金蝶云・苍穹的演进轨迹
 
金蝶云・苍穹从单一财务软件发展为企业级云原生平台,其每一步演进都紧扣垂直深耕的核心:
 
  1. 财务专业化阶段:深度优化会计凭证、财务报表等核心功能,打造财务领域的专业壁垒;
  2. 管理扩展阶段:在财务核心的基础上,增加供应链、生产制造、人力资源等模块,实现企业管理的全流程覆盖;
  3. 平台开放阶段:提供标准化开发平台,支持企业根据自身业务需求进行定制化扩展;
  4. 智能化阶段:引入 AI 技术,实现财务数据的智能分析、业务趋势的精准预测,从 “工具” 升级为 “企业决策助手”。
 

C 端:打破边界的生态化扩张

 
C 端产品的演进更加大胆、激进,核心围绕用户需求展开,常常跨越行业边界,构建以用户为中心的全场景服务生态。其核心逻辑是 “以核心能力辐射多场景,以用户需求驱动功能扩张”,通过打造一站式服务平台,提升用户的使用粘性与生命周期价值。
 
典型案例:美团的边界扩张史
 
美团从团购网站成长为全民生活服务超级平台,其扩张路径始终以用户的生活服务需求为核心,以核心能力为支撑:
 
  • 核心能力辐射:以外卖配送的即时性能力为基础,拓展至生鲜、药品、商超的即时配送,打造 “30 分钟生活圈”;
  • 场景自然延伸:从餐厅团购出发,逐步覆盖酒店预订、旅游服务、电影票务、休闲娱乐等生活场景,实现 “吃住行游购娱” 全覆盖;
  • 数据网络效应:通过积累海量的用户评价数据,提升服务与用户的匹配效率,形成 “数据越丰富,体验越优质” 的正向循环;
  • 协同价值创造:到店业务与外卖业务相互引流、相互促进,实现不同业务板块的协同发展,提升平台整体价值。
 

六、成功衡量:可量化的效率指标 VS 多维度的体验评估

 

B 端:以客观数据衡量效率提升

 
B 端产品的价值直接关联企业的投资回报,其成功与否可通过明确、可量化的业务效率指标来衡量,所有指标均围绕 “降本、增效、提质” 展开,数据结果是产品价值的核心体现。
 
核心衡量指标包括:
 
  • 任务完成时间减少:核心业务流程的操作耗时降低百分比;
  • 错误率下降:人工操作失误、流程衔接失误的减少比例;
  • 人力成本节约:通过自动化、标准化替代的人工工作量;
  • 流程标准化程度:企业内部标准化流程占总业务流程的比例。
 

C 端:以主观体验为核心的多维度评估

 
C 端产品的成功更具多元性与主观性,其价值体现在用户的使用意愿、粘性与口碑中,因此评估体系需兼顾数据指标与主观体验,核心围绕 “用户是否愿意用、是否持续用、是否推荐用” 展开。
 
核心评估指标包括:
 
  • 用户留存曲线:不同时间段的用户保持率,反映产品的长期吸引力;
  • 日 / 月活跃用户规模:反映产品的市场渗透率与用户使用习惯;
  • 用户满意度评分:通过调研获取的用户主观评价,反映产品的体验契合度;
  • 净推荐值(NPS):用户向他人推荐产品的可能性,反映产品的口碑与传播力;
  • 平均使用时长:单次使用与每日总使用时间,反映产品的用户粘性。
 

七、融合趋势与未来展望:相互借鉴,各守核心

 
当下,随着 B 端市场竞争的加剧与 C 端产品的深度发展,B 端与 C 端设计不再是泾渭分明的两个领域,而是出现了相互借鉴、融合创新的趋势。但值得注意的是,融合并非 “同质化”,二者仍坚守自身的核心设计逻辑,在保留本质的基础上优化体验。
 

B 端产品的消费化体验升级

 
新一代 B 端产品开始重视用户体验的优化,引入 C 端设计的思维与方法,在保障效率与专业性的前提下,降低使用门槛、提升操作愉悦感,核心升级方向包括:
 
  1. 移动优先:充分考虑员工移动办公的场景需求,优化移动端界面与交互,实现 “随时随地处理业务”;
  2. 上手简化:通过新手引导、标准化模板、一键操作等设计,降低产品的初期学习成本;
  3. 视觉轻量化:在保持信息密度的前提下,优化界面视觉设计,采用卡片式布局、可视化图表,降低视觉疲劳;
  4. 微交互优化:增加操作后的实时反馈,如任务提交成功的动画、流程推进的提醒,让专业操作更有温度。
 

C 端产品的专业化功能完善

 
C 端产品在坚守情感体验与轻量化交互的基础上,开始向专业化、精细化发展,为不同用户群体提供更具深度的功能支持,核心升级方向包括:
 
  1. 创作者工具专业化:内容平台为创作者提供专业的数据统计、粉丝管理、内容编辑工具,满足其精细化运营需求;
  2. 商家后台复杂化:电商平台的商家后台功能日益接近传统 B 端产品,提供库存管理、数据分析、客户运营等全流程专业工具;
  3. 企业级功能引入:部分 C 端产品推出团队协作版本,如微信企业版、飞书个人版,在保留 C 端体验的基础上,满足小型团队的协作需求。
 

核心设计原则的趋同与分化

 
尽管二者相互借鉴,但核心设计原则的差异仍清晰存在,这种 “和而不同” 的状态,正是产品设计贴合用户需求的体现:
 
表格
 
 
 
设计维度 B 端设计倾向 C 端设计倾向
信息密度 高密度,减少页面跳转,适配专业操作 低密度,焦点明确,降低认知负荷
交互模式 专业、高效,标准化流程优先 直觉、有趣,轻量化体验优先
个性化程度 基于角色定制,匹配企业组织架构 基于行为偏好,实现千人千面
迭代速度 稳重、兼容性优先,保障业务连续性 快速、创新优先,贴合市场需求
 

结语:理解差异本质,创造跨界价值

 
B 端与 C 端设计的本质差异,源于其服务的用户群体、使用场景与核心需求的不同:B 端设计如同精密的专业仪器,核心使命是在复杂的企业业务中建立秩序,实现效率的最大化;C 端设计则如富有温度的艺术作品,核心追求是在简单的用户交互中创造共鸣,实现体验的最优化。
 
优秀的产品设计师,并非简单地 “站在 B 端” 或 “站在 C 端”,而是深刻理解两种设计逻辑背后的底层需求,根据产品定位与用户场景选择恰当的设计策略。在 B 端产品中适当融入情感化设计,让专业操作更有温度;在 C 端产品中合理引入效率工具,让愉悦体验更具价值。这种跨越边界的设计思维,正是当下数字产品创新的核心动力,也能让产品在满足核心需求的基础上,创造出超出用户预期的价值

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

 

image.png

12个规范原型的方法,好看的原型就是有用

清阳 设计资源

本文为产品经理和设计师提供了一份详尽的原型设计规范指南。作者强调了规范在原型设计中的重要性,指出它能够提升信息传达效率并增强视觉吸引力。文章详细介绍了尺寸、颜色、文字、图标、图片、圆角、阴影、对齐、分布、间距和组件等关键要素的规范方法,旨在帮助读者创建既美观又实用的原型图。兰亭妙微 UI 设计公司在实践中始终遵循这套专业标准,无论是求职面试还是项目评审,一个规范且吸引人的原型图都将是一个显著的加分项。

UI设计有设计规范要遵循,同样的原型图也有自己的规范。

任何通过图形示意的东西一样,规范带来的最大的好处是提高信息传达效率。

人是视觉动物,好看的东西总喜欢多看两眼,混乱的东西给人最直白的感受就是逻辑混乱。

这就是「卷面分」。

这篇文章我们说下原型图的规范。

所谓的规范就是定规则,按照这一套规则作为标准进行执行,这里边包含元素规范、布局、颜色等等。

我对画原型图对规范的要求是:尽量向着规范靠近。

原型图不像UI图,不用去到像素级别去抠。

因为画原型我们需要考虑时间,考虑效率,我们需要将最大的精力去放到方案的产出,写需求文档上。

规范只是为了让我们有个标准,如果你想画的规范时,给你一个参考。

原型图规范

1. 尺寸

对于手机端、PC端、平板、车机等不同的产品形态,最大的区别是尺寸。

在画原型图之前,我们要做的就是先把页面原型尺寸给定下来。

可以参考的规范有:手机端首屏的尺寸设置为 375×667 px。

注:375 × 667 是首屏高度,也就是原型图的最小高度,并不是原型的固定高度,当内容很多时,直接把高度拉长到合适的内容即可。下边提到的PC端尺寸也是这个道理。

状态栏:375 × 20 px

导航栏:375 × 44 px

底部tab:375 × 49 px

这个规范的尺寸是使用的 iPhone8 的尺寸,产品经理火的那几年就是这个尺寸火,所以用这个尺寸的多。

你同样的也可以使用其他常用的手机端尺寸,这没有固定限制。

我比较建议用这个尺寸,因为很多Axure组件也都是按照这个尺寸去做的,适配的比较好。

对于PC端,尺寸可以按照 1440×900px。

虽然当前使用最多的屏幕尺寸是1920×1080。

对于原型图1440的宽度,如果是左边是原型图,右边写需求描述的话,在屏幕上可以正好展示出原型图+需求描述,不用左右滑动去看。

对于平板,建议直接使用 768×1024 px。

2. 颜色

对于原型图的颜色,我们可以分别来看:

1)有UI设计师参与的

我们可以考虑使用中性色,中性色是指不强烈的色彩,常见的就是黑白灰。

在选择黑白灰时,我很推荐的是Axure色板中自带的颜色,在画原型时直接选取使用就行。

另外一些大厂规范中,都有自己的中性色定义,你也可以选择使用。不过我不建议你花费太多时间去处理颜色。

如下图,左边是用Axure中的黑白灰,右边是使用的Arcodesign的中性色,在画原型时,整体上影响并没有那么大。

虽然右边的更好点,如果你要用其它中性色,可以将颜色收藏进Axure的色板中,方便下次使用。

2)没有UI设计参与的

比如说后台,可以添加一些颜色。

后台一般都是内部使用,对样式没有太高要求,也不会让UI进行设计;

因为后台一般都是使用现成的UI组件进行开发的,比如Antdesign、Element等;

具体什么颜色,可以用万能的蓝色作为主色调,使用其他颜色作为辅助即可。

对于语义色,来表达成功、警告、错误语义,可以选择红绿黄进行使用即可。

3. 文字

对于文字,涉及到字体、字号、粗细、行间距等。

字体

可以使用 Arial,也就是Axure默认的字体。

同样的,也可以使用苹方、微软雅黑,这两个字体则需要单独安装。

不过当你通过Axure打包发布出去时,如果对方没有安装对应的字体,将则不会展示为苹方/微软雅黑字体进行展示。

对方查看的效果和你看的效果会不一样,我正在找处理方案,目前还没找到。

字号、字重

也就是字体大小、字体粗细,对于字体大小、粗细,还有颜色,影响的信息层级关系。

我们直接看规范:

一级标题:20px、加粗,颜色#000000

主标题:18px、选择性加粗,颜色#000000

次标题:16px、选择性加粗,颜色#000000

小标题:14px、选择性加粗,颜色#000000

正文:14px、选择性加粗,颜色#000000/#333333

辅助文字:14px/12px,不加粗,颜色#333333/#555555

次级文字:12px/10px,不加粗,颜色#555555/#7F7F7F

注:对于文字的大小,前提是在 375×667、1440×900 的页面尺寸下的。如果你使用的尺寸过大,对应的字号也需要加大。

这个规范不用记,可以用字号 14 作为标准,层级高的字号+2,加粗、颜色加重即可,层级低的字号就-2,不加粗,颜色浅一些。

行间距

在原型中不重要,Axure时会根据字体大小自动调整行间距,如果文字内容过多时,可以手动进行加大间距。

4. 图标

原型中如果是「图标+文字说明」一起出现,不用管图标,直接使用圆形或矩形代替即可。

占位符太丑,不建议用。

颜色不要使用太深的中性色。如下图示例:

如果只有「图标」,可以选择能表达具体含义的图标。

从iconfont、iconpark中搜索复制svg格式粘贴到Axure使用即可。

如下图中的扫一扫、设置、播放图标。

如果你觉得使用圆形或矩形表达图标的意思不明显,或者是不想找图标,就在加个「icon」文字,或者直接用写文字。

如下图的扫一扫、设置、播放,直接使用文字说明即可。

对于头像、图片等,都可以加个文字说明。

如果是没有UI介入设计,当需要确定图标时,则需要产品经理确定,同样的去iconfont、iconpark中找到图标,按前端要求提供过去即可。

5. 图片

图片在原型中不需要使用真实图片,直接使用矩形代替即可。

Axure中自带的图片元件太丑了,不建议用。

可以再加上文字说明,来表达这是图片,比如加个img,或者根据图片特性,如封面、头像,都是可以的。

原型中的图片规范可以按照宽高比,比如 4:3,3:2,16:9,1:1。

当然这个没那么严格,如果你想规范些,可以这样用。

6. 圆角

圆角在原型中不重要,如果你想使用圆角,可以按照2的倍数调整。

圆角在UI中的作用很大,而且规范还挺多,原型中就无所谓了。

7. 阴影

阴影不重要。如果想使用阴影,可以将阴影使用纯黑色号000000,透明度30%,模糊5。

8. 对齐

对齐是版式设计的基本原则,使用工具进行对齐即可。

具体采用「左对齐、右对齐、上对齐、底对齐、居中对齐」,你可以按照布局来,比如靠右的元件,使用右对齐。

9. 分布

分布是指将页面内容使用水平分布、垂直分布的方式进行平均分布,来保证页面元素之间的间距相同。

当相同的元素多次出现时,我们可以使用分布快速调整,让页面更规范。

10. 间距

间距没有那么重要,但是规范的原型一定要有会有间距。

间距分为上下左右间距,分为模块与模块间的间距,子模块与子模块的间距,元素与元素之间的间距。

对于整个移动端来说,可以使用 5 的倍数调整间距。

对于尺寸较大的PC端原型,可以按照 10 的倍数调整间距。

也可以直接将元件结合「对齐、分布」直接调整,不用关注具体间距。

根据我们之前提到的设计原则「亲密性」,属于同组的内容间距小,不同组的内容间距大。

11. 组件规范

组件是就是可以直接拿过来的元件组合。

对于每个组件都是通过基础的形状、文字、颜色、尺寸、间距等进行组合形成的。

就是UI设计中的原子化设计。

当完成基础的形状、文字、颜色、尺寸、间距等规范确定后,进行基础元素的组合即可得到规范的组件。

你可以基于上边的规范去制定自己的产品组件库,可以快速使用规范的组件。

12. 内容的贴合性

在画原型时,可以将原型中的内容尽量填写为真实内容,使用极值状态,将内容最多、数据最多的情况画出来。

总结

规范建立好是为了使用,我们了解清楚原型的规范后,可以在画原型时往规范上靠,慢慢的养成好习惯。

一个规范好看的原型图在求职面试、评审的时候,会是个加分项。

当然,不要过度遵循规范,原型图不是UI图,重要的是使用原型将功能表达出来。

对于刚入门的产品经理来说,原型图是日常的基本工作。

转载:人人都是产品经理

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

 

image.png

UI设计中的情感化设计

清阳 设计思维

当下互联网产品日趋同质化,用户每天要接触、使用数十款各类软件,单纯满足基础功能需求的产品,早已难以留住用户;而一款自带温度、饱含情感的软件,不仅能大幅提升用户使用体验,更能悄悄拉近产品与用户的距离,让用户产生稳定的依赖感与不期而遇的惊喜感,在海量产品中牢牢占据用户心智。作为深耕界面设计与用户体验领域的兰亭妙微UI设计公司,始终将情感化设计视为UI设计的核心内核,认为好的UI设计从不只是视觉美化与功能排布,更是与用户的情感对话。本文将聚焦UI设计中的情感化设计,拆解核心思路与落地技巧,一同探寻让产品更有温度的设计密码。
 

UI 设计中的情感化设计:让产品与用户产生心灵共鸣

 
如今,用户每日都会接触和使用多款软件,一款能传递情感的产品,往往能大幅提升用户体验,让用户对产品产生依赖感与惊喜感。情感化设计,正是让产品跳出冰冷的功能框架,触达用户内心的关键,接下来我们就来深入探讨 UI 设计中的情感化设计之道。
 
心理学认为,情感是人对客观事物是否满足自身需求而产生的态度体验。当产品能够触动用户内心,引发其情感波动时,便不再是冰冷的工具。用户能透过界面与交互,感受到设计师为优化使用体验,在每一个细节处的用心打磨,进而心生愉悦、喜爱与幸福感。
 
情感化设计并非轰轰烈烈的大改动,有时一句暖心文案、一幅趣味插图、一个灵动动画,便能打动人心,让用户获得愉悦的使用体验。设计的高级感,从来不止于视觉层面的精致,这些藏在细节里的美好设计,满含积极情绪,是产品在满足功能性与易用性之后,对更高层次用户体验的追求。
 

一、提示性文字:用语言拉近距离,赋予产品生命力

image.png

语言是情感化设计最直接的利器,拟人化的对话相较于冰冷的机械文字,更易获得用户好感,为产品赋予鲜活的生命力。尤其在 App 推送场景中,用户每日接收大量推送,早已产生审美疲劳,此时一句精心设计的推送文案,成本低、效率高,能将对用户的 “打扰” 转化为趣味互动,让用户会心一笑。
 
荔枝 FM 的推送 “一个人吗?我也是呢”,精准戳中独处用户的情绪;一刻的 “你知道孤独是什么感觉吗:手机亮了,却只有推送”,用细腻的表达引发情感共鸣;随手记专业版的 “5 天没花钱,赞啊”,像朋友般为用户的省钱行为喝彩;百度地图的 “北京风好大,我要被吹走啦”,用俏皮的语气化解出行查询的枯燥;百词斩的 “周没背!!!卸掉我算了!!!”,以略带 “小脾气” 的表达,巧妙提醒用户打卡学习,这些都是提示性文字情感化的绝佳范例。
 

二、下拉刷新:让高频操作,成为趣味体验

image.png

下拉刷新是用户使用 App 时的高频操作,传统的图标加文字设计,虽简单直观,却毫无设计感,无法引发用户任何情绪波动。而下拉刷新作为一种临时交互状态,丰富其设计细节,不仅不会与产品界面产生违和感,反而能让产品收获用户好感。
 
以 UC 头条为例,其下拉刷新时会跳出一只奔跑的小鹿,既延续了品牌 logo 的视觉元素,又以 “快马加鞭” 的视觉隐喻,契合资讯类产品对内容更新速度的核心需求。用户在等待加载的过程中,被灵动的设计吸引,在愉悦的情绪中对产品产生好感,让原本枯燥的下拉刷新操作变得生动有趣。

image.png

三、头像设计:打造专属虚拟形象,增强用户认同感

image.png

个人中心是承载用户信息的核心页面,也是用户虚拟形象的展示窗口。传统的默认头像加登录文字的设计,死板且缺乏温度,无法让用户产生身份认同感。如今,越来越多产品摒弃了这种单一设计,为用户提供多样化的头像选择,赋予产品人格魅力,让产品拥有生命力,消除人机交互的冰冷感,帮助用户与产品建立友好的情感联结。

image.png

美团外卖、躺平等产品,为用户设计了贴合产品气质与用户属性的专属虚拟形象,让用户在使用过程中产生强烈的身份共鸣,仿佛拥有了与产品契合的专属标签,大幅提升了用户对产品的接纳度与认同感。
 

四、缺省页设计:化解负面情绪,传递产品温度

 
缺省页通常出现在页面无内容、网络断开等场景,传统简陋的图标加提示文字设计,会让用户产生心理落差,陷入挫败、烦躁等负面情绪。而情感化的缺省页设计,能通过设计手段有效缓解用户的负面感受,成为传递产品温度的重要载体。
 
设计师可结合产品属性与品牌视觉体系,延展图形设计,搭配动效、插画等形式,丰富缺省页内容。比如躺平的空白页,设计出贱萌有趣的视觉场景,一句 “没消息就是好消息”“内容找不到了,发现更多圈子”,让用户在无奈的场景下会心一笑,将负面情绪转化为轻松的体验,让产品充满趣味性与人情味。

image.png

五、标签栏微动效:让页面切换,告别单调死板

 
随着情感化设计的不断丰富,标签栏图标设计不再局限于静态视觉,动态动画效果的融入,让标签栏切换操作告别死板。用户在频繁切换页面时,不会再感到单调枯燥,精心设计的微动效,还能有效缓解用户等待时的焦躁心情,从心理层面缩短用户的等待感知,同时让品牌视觉形象更深入人心,强化用户对产品的记忆点。

image.png

六、模拟用户行为:贴合真实场景,深化情感认同

 
当产品能够精准模拟用户行为,将用户代入真实的使用情境时,便能让用户产生深刻的情感认同感。这种设计核心,在于精准洞悉用户的行为习惯与潜在需求,实现产品与用户的 “心意相通”。

image.png

潮汐 App 会根据时间、场景与季节变化,播放雨声、雷声、风声、潮水声等不同的背景音效,为用户营造身临其境的氛围感,让用户在专注、睡眠、小憩等不同场景下,获得贴合心境的体验;微信能感知用户的截屏行为,当用户打开对话框时,自动显示截屏图片,提前预判用户发截图的需求,让操作更便捷;淘票票则精准捕捉到观众看电影后等彩蛋的习惯,在影片详情页添加彩蛋提醒,告知用户电影是否有彩蛋、彩蛋出现在哪个位置,避免用户白白浪费时间,这些设计都从用户真实需求出发,让产品成为懂用户的 “贴心伙伴”。

image.png

七、有趣的细节设计:藏起小彩蛋,激发探索欲

 
常言道,有趣的灵魂万里挑一,在 UI 设计中,有趣的细节设计能引发用户与产品的积极互动,让用户产生愉悦的情绪。这类设计分为隐形与显性两种,无论是需要用户主动发现的隐藏彩蛋,还是直观呈现的趣味设计,都能为用户带来惊喜,增强用户对产品的探知欲与粘性。

image.png

B 站电脑端鬼畜区的 “隐藏彩蛋” 便是隐形设计的代表,长按返回图标 10 秒,页面会出现提示语,引导用户输入字母,随后鬼畜明星的画面会划过屏幕,这种需要用户主动探索的设计,让用户在发现彩蛋时收获满满的喜悦,大幅提升了产品的趣味性;优酷视频的显性趣味设计同样出彩,会员发弹幕后,可使用剧集相关角色的头像,带角色扮演头像的弹幕,让用户的发言更有剧集代入感,既强化了会员的尊贵感与专属特权,又丰富了弹幕区的互动形式,一举两得。

image.png

总而言之,UI 设计的 “高级感”,既需要在视觉层面精雕细琢,从细微之处打造精致、富有设计感的画面,更需要从情感化设计出发,站在用户的角度换位思考,洞悉用户的情绪需求与行为习惯,让产品与用户产生情感共鸣。当产品不再只是满足功能需求的工具,而是能传递温度、引发共鸣的情感载体时,才能让用户获得更高层次的使用体验,建立起长久且牢固的产品情感联结。
 

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

 

image.png

 

日历

链接

个人资料

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

存档