首页

金融科技产品主视觉设计

清阳

1.jpg

Renforce
*品牌身份
*创意方向
*数字设计
Renforce 是一个面向复杂技术生态系统组织的运营技术平台,旨在简化对定性与定量信息的端到端管理。借助先进的人机协同技术,Renforce 为日常运营提供稳健、高效且简洁的解决方案。

为了体现 Renforce 在效率与准确性上的价值主张,设计概念取材于“正方形”这一形状。
正方形是人类最常用的几何形状之一,令人着迷的是,如此简单的形态却能支撑从复杂技术到大型建筑的各种应用。它象征着精准、高效与简洁。以正方形为核心元素,品牌标识与设计系统由此构建。

2.jpg

3.jpg

imgi_726_2f9186204124853.66a336e48771d.jpg

imgi_727_728512204124853.66a336e48a7d5.jpg

imgi_729_209e30204124853.66a336e48928e.jpg

imgi_734_e5c9ec204124853.66a336e48867b.jpg

imgi_735_dc8a9e204124853.66a336e4899a3.jpg

imgi_4072_91974c204124853.66a336e3a1863.jpg

 

 

 

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

 

【原创案例分享】插画设计:水处理设备2.5D、2D器械插画设计

清阳

项目背景:

该项目常州科德水处理成套设备股份有限公司委托设计,致力于水处理领域相关设备的视觉呈现,通过精心设计的3D与2.5D插画,生动展现各类水处理设备的结构细节与工作原理。我们旨在以直观、易懂的方式,提升公众对水处理技术的认知与兴趣。
为企业客户提供高质量的软件UI图标设计,助力其在环保领域的品牌形象塑造与市场推广。通过专业的插画设计,我们期望能够提升软件ui美观度和美誉度,引导更多人对水资源保护与可持续利用的关注与思考。

项目概述:

产品定位

产品定位为一款集科普、宣传与营销于一体的水处理设备插画设计。通过3D与2.5D视觉呈现,旨在直观展示设备细节与工作原理,提升公众认知,同时为企业客户提供高质量的视觉宣传素材,助力其品牌形象塑造与市场拓展。

目标用户

目标用户包括广大公众、水处理领域专业人士及企业客户。公众用户希望通过插画了解水处理技术;专业人士则关注设备的结构与原理;企业客户则寻求高质量的宣传素材以提升品牌形象。

设计风格

设计风格以科技感与直观性为核心,结合3D与2.5D技术,注重细节呈现与色彩搭配,营造出既专业又不失趣味性的视觉体验。通过精准的线条与光影处理,使插画作品既具有教育意义,又具备艺术美感。
 
 

2.5D插画风格

2.5D插画风格是一种介于2D和3D之间的插画艺术表现形式,是一种用二维手法表现三维效果的插画风格。它结合了二维的平面简洁和三维的立体空间感,给人既简单又富有深度的视觉体验。
 

气浮装置插画设计

2.5D的插画绘制方法让画面看起来更加的简洁、精美且充满活力。同时,足够丰富的细节装饰会带来耐人寻味的效果,能够迅速吸引观者的眼球。
 
 

刮泥机插画设计

通过二维手法表现出三维效果,让整个装置更具立体感。运用巧妙的透视和光影,在平面上营造出类似真实场景的深度感,能让观众直观地感受到处理装置的各个部分功能的空间位置,清晰的指导工作。
 
 

行车插画设计

2.5D插画不需要像3D绘画那样考虑复杂的模型构建和精细的纹理映射,降低了创作难度,同时降低了设计成本,设计效率也更加高效。
 

2D插画风格

2D插画风格,即二维插画,是一种在平面上展现的艺术形式,具有表现力强、风格多样、易于创作、适应性强、传达信息直观以及情感表达丰富等优点。
 

气浮装置插画设计

通过线条、色彩、形状和构图等元素,对该设备进行2D插画的重新创作,在图形、颜色表意上对各个功能区的分布、作用进行清晰传达。
 
 

刮泥机插画设计

2D插画的绘制过程比较简单,不需要复杂的建模和渲染技术。根据客户给的参考或者沟通讲解,确认符合行业以及设备特点的色彩及元素构成手法,产出精美、准确的设备插画。
 
 
 

行车俯视图插画设计

2D插画能够直观地传达信息,使观众更容易理解和接受。工业产品的设备介绍中应用广泛。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI 设计中的胶囊和弹窗设计

涛涛

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

UI设计中的胶囊和弹窗设计

涛涛

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

字体设计中把控 “形与势” 的方法及创意形态的挖掘

涛涛

本文主要介绍了字体设计中把控 “形与势” 的方法及创意形态的挖掘

如何设计一个高级的logo?

涛涛

在 Logo 设计中,将直观的象征、隐喻与战略性思考相结合,能让 Logo 脱颖而出并引发共鸣,而直觉作为设计的关键过程,可引导设计师找到最易懂的方案。象征符号能跨越语言快速被理解,其视觉简约性带来灵活性和永恒性,隐喻则能在不同概念间建立关联,增添设计乐趣与记忆点。设计时需在核心采用象征或隐喻、存档设计稿、用黑白色设计、确保无限缩放、平衡 Logo 并精确检查,这些原则不仅适用于 Logo 设计,也可延伸到解决个人问题。

Kakao,免费创建和分发新数字字体“Kakao Font”

清阳

-推出两种针对数字环境优化的字体:“Kakao Big Font”和“Kakao Small Font”

-体现数字通信文化,例如复杂的文本表情符号,就像首辅音是一个字母一样

-开放字体许可,可免费用于个人和商业用途

 

(2025-06-17) 在人们更熟悉打字而非手写、更熟悉滚动而非书籍的时代,Kakao(代表郑信雅)免费推出了一种名为“Kakao Font”的数字字体,任何人都可以轻松地在屏幕上阅读和表达文本。

 

为屏幕而生的文字 'Kakao大字' 'Kakao小字'

“Kakao字体”是一款针对数字屏幕上的可读性和表现力进行优化的字体,包含“Kakao大字体”和“Kakao小字体”两种类型。它并非简单将现有字体进行数字版本化,而是经过全新设计,旨在为智能手机和PC屏幕提供最佳的阅读体验。

 

正如标题所示,“Kakao 大字体”是一款即使在屏幕上也能实现清晰醒目的字体。“Kakao 小字体”是一款适用于正文或标题的字体,通过加宽字母间距并合理安排线条,使其即使在小尺寸下也能清晰可见,从而实现清晰可见而不会模糊。

 

仅用声母‘ ㅋㅋ’和‘ㅇㅇ’即可进行交流…体现数字通信文化

特别是Kakao也抓住了时代的变化,只用“ㅋㅋㅋ”和“ㅇㅇ”等首字母来表达自己的想法已经变得很自然。

 

由于韩语的声母通常被认为与中间元音和尾元音连用,因此现有字体存在着单独使用声母时难以清晰阅读的局限性。为此,Kakao通过增大字体尺寸并精确调整比例,使单个声母即可准确传达含义,并将声母改为独立字母而非字母的一部分。

 

表达情感的特殊符号也变得更加复杂:)

此外,使用特殊字符表达的文本表情符号格式也得到了进一步完善。通过自动将两个或多个符号或字母组合转换为一个的连字功能,当输入特定符号时,它会被转换成简洁的表情符号,即使是文本,也能生动地表达出类似面部表情的情感。

 

例如,像“:-D”这样的笑脸表情符号,由于字母“D”的位置或大小取决于字体,很容易显得突兀。但“Kakao Font”会将整个表情符号以有序的形式输出,帮助用户以简洁平衡的方式使用表情符号。此外,像“->(箭头)”这样的常用符号组合会在输入后立即自动转换,免去了用户单独搜索特殊字符的麻烦。

 

Kakao 将“Kakao 字体”应用于开放字体许可证 (OFL),并免费提供给个人和商业使用。该字体可从 Kakao 公司网站下载。

它也可以通过 RixFont Cloud 和 Adob​​e Font 等云字体服务免费获得。

 

Kakao BX 设计负责人申永燮表示:“Kakao 字体是为了在我们每天接触的智能手机等数字屏幕上提供最佳的可读性和表现力而创建的。”他补充道:“我们将继续理解时代变迁的沟通方式,并通过体现这一变化的字体,为更丰富的数字表现文化做出贡献。”

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

利用 AI 提升设计

lanlanwork

新一轮惊天动地的数字革命已经打响, AI 技术带来的改变令人瞩目,引发了持续不断的惊叹,同时,也带来了一些系列的蝴蝶效益,许多人在思考 AI 是否会取代我们现有的工作,恐慌开始蔓延。

我曾也有过这样的担忧。如果明天我的老板解雇我,用 AI 取代我怎么办?直到我深入研究机器学习和 AI 算法相关领域知识,洞见了一些可能性。

现在,我能够理解为什么大多数人(也包括我在内)会认为人类会被 AI 取代,或许,只是对未知领域充满恐惧或好奇罢了,这正是人类的天性,会这就是我的看法。既然如此,何不去探索一番…

在平面设计、用户体验/用户界面、前端开发和项目管理领域,我发现现阶段的 AI 能力还无法复制人类的创造力和直觉(或许在一个秘密的实验室,AI 机器人已经觉醒)。然而,使用 AI 工具确实能够助力我们更加高效和有效的交付工作!

在本文中,我将重点介绍可用于平面设计和用户体验/用户界面设计的 AI 工具/插件,以及能够提升我们的信心和创造力的优势功能特性。在这之前,深呼吸一下,和我一起探索…

AI 在平面设计中的应用

最近,我们可能看到许多人在社交媒体上发布关于 AI 生成的照片、艺术作品、3D 模型等内容。令人惊叹的是,他们可以通过文本提示生成图像、转换图像,甚至让 AI 创建特定图像。

在我看来,AI 生成的照片、艺术作品和 3D 模型已经基本可以更快速、更轻松且更有创意地表达我们的想象力。

问题是,我们是否可以将 TA 们用于商业吗?

如果我们想将这些生成的图片用于公司或任何行业,我们必须对其进行修改。原因不难猜测,由于每一家企业都有自己的风格偏好、营销背景和品牌形象,现阶段 AI 工具还无法准确生成这些元素(需要我们定向训练 TA ,也需要我们提供设计方向)。为了增加企业那一份独特性和个性化,我们现阶段只能依赖 AI 完成 50% 的设计工作,而将另外 50% 需要我们的创意输入和修改。

设计任务的 50% 已经可以依靠 AI 生成,剩余 50% 仍然需要设计师进行传统化修改。不得不承认,AI 已经可以分担设计师们一大半的任务。因此,那些非设计专业的外行(也包括一部份设计师)会认为 50% 的设计师应该会被取代,然而,这个观点非常肤浅,甚至略显无知。

请看下面的食品海报示例:

使用 AI 工具的好处:

  • 为设计特定元素提供有价值的见解
  • 为情绪板提供创意设计灵感
  • 通过高效的输出节省时间
  • 鼓励在设计过程中跳出框架思考
  • 基于文本提示生成现代、清晰且细致的设计
  • 还有更多

值得探索的 AI 工具和插件:

  • Adobe Firefly – 可以将文本转换为图像并生成惊艳的文字效果。
  • MidJourney – 可以创建几乎任何我们能想到的图像。
  • ChatGPT – 可以回答用户任何想问的问题。(我们可以让 TA 编写特定的提示词来输入给 Adobe Firefly 或 MidJourney 生成图像)

AI 在 UX/UI 设计中的应用

在用户体验(UX)和用户界面(UI)设计中, TA 与前面提到的平面设计有些相似,UX/UI 设计师可以使用 AI 工具来设计网站和移动应用的界面。

只需提供一个文本提示,Uizard 就会生成用户界面,之后我们可以根据需要进行修改。

使用 AI 工具的好处:

  • 在设计网站或移动应用之前,通过头脑风暴帮助我们生成创意
  • 当客户发送大量反馈文档时,可以帮助我们阅读并为总结内容
  • 协助整理必要的信息,以创建网站或移动应用的信息架构
  • 协助进行用户体验文案创作
  • 帮助创建网站或移动应用的元素,例如图标、按钮或可用的艺术设计
  • 协助将草图转换为数字线框图
  • 还有更多

值得探索的 AI 工具和插件:

  • Uizard – 可以在一分钟内将创意转化为设计。
  • Adobe Illustrator – 将文本转换为矢量图形。我们需要寻找一些精美的创意矢量图标, TA 也是一个非常不错的选择。
  • ChatGPT – 可以帮助我们列出优秀的创意、整理重要信息、创建站点地图、设计信息架构、开发用户画像和用户故事,甚至为我们的网站或移动应用撰写用户体验故事。
  • Gemini – 可以识别图像、语音,生成文本,也可以创建图像。

给 Gemini 一个清晰的提示,我们可以获得设计所需的图像和文案。

值得下载的 Figma 的 AI 插件:

在了解所有优势特性之后,现在是时候介绍一些 Figma 的插件了,这些插件可以在 2025 年为用户体验设计师带来诸多好处(包括:节省大量设计时间)。

1、Random Name Generator :一个可以随意生成名称的插件。目前大约有 5 万 9 千名用户在使用该插件。

2、Rendition AI: 我们可以创建应用设计并获取该设计的 Tailwind 代码。目前大约有 3 万名用户在使用该插件。

3、MagiCopy – AI 文本生成器-可以帮助我们获得特定风格的标签、图标等内容。目前大约有 1 万 8 千名用户在使用该插件。

4、Ando-设计师 AI 助手-可以帮助我们从提示、形状和图像中生成数百万个设计创意。目前大约有 7万1千名用户在使用该插件。

5、VisualEyes-可以基于历史数据模拟用户测试行为,并找出潜在的可用性问题。目前大约有 3 万用户在使用该插件。

6、Astrid Text Generator – 可以帮助我们优化文案。我们只需点击几下即可获得个性化的写作反馈建议。目前大约有 2 万 6 千名用户在使用该插件。

7、Magician – 可以将繁琐且耗时的任务自动化,让用户能够将精力集中在工作中更具创造性的方面。目前大约有 16 万 3 千名用户在使用该插件。

结论

虽然人工智能(AI)是一种强大的工具,但是,根据我一段时间的观察和使用,目前的人工智能还并不能取代设计师的创造力。而是,作为一位强有力的战友,增强了设计师的多项能力,并促进了设计交付的稳定性。

不得不承认,在设计领域,AI 技术提升设计能力尤为突出,能够辅助设计师高效地创造积极的成果。

除设计之外,如果我们能够善加运用人工智能,其潜力无可限量,能够打破职业的边界,助力设计师扩展到多个行业领域。我相信,以这种方式利用人工智能,必定将在各种应用中带来显著的优势。

加油,设计师们!带着好奇去探索这个人工智能时代吧!

 

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

字体篇 | 处理好这些,让信息的传达效率翻倍!

清阳

在交互设计中,字体的呈现方式是提升信息传递效率的重要一环,文字信息层级的处理是否得当,一定程度上会对用户的视觉体验有着重要影响。那么在字体设计上,设计师或者相应的业务人员应该如何做好处理,以提升信息传播的效率和质量?不如来看看作者的总结吧。

文字是设计中的重要组成部分,就像我们平时看到的海报,里面各种被精心设计过的字体经常会成为视觉焦点,以醒目且个性化方式传达出内容的精髓,最后达到的效果事半功倍。

虽然在UI设计中不需要对文字过分设计,但图文作为主要的传播途径,字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率。所以不管是平面设计还是UI设计,字体都是不可忽视的核心元素,做好对文字信息层级的处理,对用户的视觉体验有着至关重要的作用。

互联网经过多年的发展,也积累的很多的专业字体知识,设计师应该去了解字体的性格及特征并将其合理运用,才能将信息更清晰地传达给用户。本文将围绕着字型、字号、字距、字重等几个属性,针对各方面深度解析,希望能够帮到大家。

一、字体的基本特征

1. 使用前的思考

文字是信息内容的载体,能最直接的将信息清晰地表达出来,字体则表现了文字的外在特征,合理地使用这些属性特征不仅能清晰准确地传递信息、用于特定场景还能赋予情感表达,展现出独特的魅力,例如:健身、器械类的产品使用的字体通常会给人一种力量、刚硬、壮实的感觉,而女性专用产品字体则显的纤细、苗条。

字体篇 | 处理好这些,让信息的传达效率翻倍!

2. 为什么要使用黑体

不同类型的字体传达出不同的气质,综合来讲,字体可分为黑体、宋体、圆体、书法体这四类,平时大家看到的各种形形色色的其他字体,基本是通过这几类延伸而来。

在UI设计中,绝大多数的文字排版用的是黑体,诸如思源黑体、阿里巴巴普惠体、苹方(ios)、微软雅黑(PC web)等都是标准的黑体。另外,特定场景如瓷片区、卡片、banner、专题头图、引导页、闪屏等,对于用什么字体不会有太大的限制,在避免商用侵权的前提下符合产品气质即可。

黑体字的笔画横平竖直、粗细均匀且字面呈正方形,一般来说,没有衬线的字体都可以称作黑体。黑体结构清晰、简洁有力,能让界面显得庄重还附有现代感,虽然气质上没有太大的个性化、但可塑性很强,这也是在UI设计中、黑体一直很受青睐的原因,无论是标题、正文、提示等使用场景都可以作为首选,对老设计师能多一个选择、新手设计师也不易犯错。

字体篇 | 处理好这些,让信息的传达效率翻倍!

3. iOS与Android的区别

iOS与Android是移动设备的两大系统,虽然很多设计师用一稿适配两端、遇到特殊页面也只是单独拎出来微调即可,但对于中、大型的互联网公司则很难满足优质用户体验中的部分细微差别,例如:iOS的苹方字体在Android设备中无法高度还原、预留的文字数量上限位置无法显示完整等,都会影响用户体验。

此外,iOS和Android都有自己独立的设计规范,大家有时间的可自行查看,本文只对字体规范作基本了解。

iOS使用的是「苹方」字体,提供了6个字重,英文字体为「San Francisco」;Android使用的是Google联合Adobe发布的「思源黑体」,为充分满足设计要求,提供了7个字重,英文字体为「Roboto」。

字体篇 | 处理好这些,让信息的传达效率翻倍!

此外,如果界面中涉及的数据较多,数字使用DIN字体也是不错的选择,字体外形较长,易用且耐看,很适合数据统计展示,不过这款字体商用的话需要收费的。

字体篇 | 处理好这些,让信息的传达效率翻倍!

二、字体的基本属性

1. 字体大小

字号的大小决定信息的层次和权重,不规律的使用字号会让页面信息杂乱,不利于用户阅读。在设定字号规范时,需特别注意最小值和递增值。

最小值决定信息的可读性,以2倍图为例,iOS11系统将最小字号规范为11pt(22px),但很多产品依然将最小字号设定为20px,甚至部分产品将18px的数字加粗运用在标签中,所以最小字号的设定并没有固定数值,原则上不影响用户的浏览就行。笔者建议最小字号不要低于20px,在设计过程中,可以通过设备实时预览,因为同样的字号在不同的环境、色值、背景下,其视觉效果都有所区别。

其次,递增值决定着信息层级区分的明显程度,遵循字号越大、递增值越大的原则,常用字号数量控制在6种左右。iOS和Android都是采用的2倍数栅格系统,为了让字号的层级区分更明显,字号设定要避开奇数且最小递增值不要低于4px,下面举几个常见的例子:

  • 20、24、28、32、40、48、64…
  • 20、24、30、36、42、48、64…
  • 22、26、30、34、40、48、60…
  • ……

字体篇 | 处理好这些,让信息的传达效率翻倍!

规范好的字号该如何使用,还得根据界面中的实际场景来决定,如下图:

字体篇 | 处理好这些,让信息的传达效率翻倍!

2. 字符间距

字间距是指两个字符之间的横向间隔距离,在界面排版中,除了西文的字间距调整需求较大外,中文通常只保持默认,只有少数场景才会手动调整,且没有固定的规律,保持视觉舒适状态即可。例如:banner、界面大标题、重要数字(取件码)显示等。

字体篇 | 处理好这些,让信息的传达效率翻倍!

字体篇 | 处理好这些,让信息的传达效率翻倍!

3. 行高

行高是指包围在字体之外的隐形边框,一个字体元素的的行高等于文字上边框+下边框+字号的高度之和。

西文字体因高度的参差不齐,本身就能制造出视觉上的上下空间,通常行高为字号的1.2倍,而中文字体没有上下间隙的延伸,行高则较大,一般在1.5倍左右,如果字号较小且折行较多,行高甚至能达到字号的2倍。

字体篇 | 处理好这些,让信息的传达效率翻倍!

4. 字重

字重指的是字体的粗细,不同的字重能体现出不同的层级关系,给用户的视觉感受也截然不同。

像苹方、思源、阿里巴巴普惠这些家族字体一般都会有极细体、细体、常规体、黑体、粗体等多个字重,在UI设计中,实用的就常规体、加粗两个字重,再通过色彩、字号使其成为对立关系,明显的拉开文字内容层级后,方能保持良好的浏览体验。

字体篇 | 处理好这些,让信息的传达效率翻倍!

5. 全角与半角

这种主要针对标点符号,以英文字母为标准,半角是指一个符号占用一个标准字符(英文)的位置,全角则是占用两个字符位置。

众所周知,中文使用都是全角、英文使用半角,并且会随着中/英文的切换而自动改变,但有时候难免会操作失误让页面中的某处信息看着怪怪的却不明所以、另外中文信息中的时间/日期也大多会使用半角符号,所以设计师对此有一定了解的时候,在处理这些细枝末节就能做到收放自如。

字体篇 | 处理好这些,让信息的传达效率翻倍!

三、不同场景下的属性参考

在色彩规范中,除主/辅助色之外,设计师还会提供3~4个等级的配色,如通用的#333(标题)、#666(正文)、#999(提示)、#ccc(占位符),这也是UI通用的文字色用色规范,不同的字号需用色规律。

字体篇 | 处理好这些,让信息的传达效率翻倍!

如果想进一步延展,可以增加一点品牌色,也可以使用#000(纯黑)调整不透明度来体现文字色彩层级,深色模式中很常见,下面我们一起来了解几个常见的使用场景。

1. 标题

标题的主要作用是让用户以最快的速度了解界面主要信息,需要时刻吸引用户的注意力,例如APP中的导航栏、模块标题、内容标题、数据统计等。需要简单明了且有冲击力,字号一般会控制在30px以上并加粗显示,直接使用一级色值(#333)即可。

在特殊场景下,标题也可以使用主体色值,但一定要注意容器背景与其他信息色彩的协调,不然花里胡哨的还不如用回一级色值。

字体篇 | 处理好这些,让信息的传达效率翻倍!

2. 正文

正文并不需要吸引用户注意力,它主要是提供标题的注释或内容的详细说明。

当白色背景文本内容过多、在需要用户仔细阅读的情况下,一定要注意颜色不能太深,不然显的主次不分,还有些刺眼,这里推荐26~30px字号使用二级文字(#666)色值。

字体篇 | 处理好这些,让信息的传达效率翻倍!

3. 提示语

提示类文字使用场景就相对较多,它除了给用户展示当前状态,还能给予合理的引导,促进用户进行下一步操作。常见使用色值为三级(#999)、四级色值(#ccc),例如界面中的操作注意事项、表单占位符等。字号一般为24px,因使用场景不同,也会有特殊的存在,例如表单中占位符的字号会跟随输入后的字号统一。

字体篇 | 处理好这些,让信息的传达效率翻倍!

4. 超链接

超链接在字号、色值上没有一定的限制,但需要一个特定的辅助元素/属性来提示用户这是可点击的。

例如APP登录页面,找回密码、注册、获取验证码等,大部分都是用主体色、图标(右箭头)等方式强化可操作入口,而PC端网页中超链接的表现方式,下划线、蓝色字体、>>这三种方式几乎能涵盖所有。

字体篇 | 处理好这些,让信息的传达效率翻倍!

5. 其他

规范并非不可更改,它只能帮助设计师在大部分使用场景中减少设计出入并提高产出效率,但总有一些使用场景需特殊对待,字体也不例外,如以下场景:

  • APP金刚区入口字体大多使用24px,一级色值(#333);
  • 底部Tab栏字体未激活使用浅色,激活后切换为一级色值(#333)或主体色;
  • 重量级的提示语用红色色值;
  • 按钮中的文字跟随按钮的等级权重变化;
  • 深色容器标签的文字反白;
  • ……

字体篇 | 处理好这些,让信息的传达效率翻倍!

四、字体使用基本原则

1. 符合产品气质

虽说黑体(苹方、思源、阿里巴巴普惠)是UI设计中的首选字体,但这也仅仅只是建立在不出错的的情况下、满足基本条件而选择,如果想表达出产品的类型、情感、气质等品牌属性,在不影响用户识别的前提下,可选择一款符合产品气质的字体,打造出差异化的浏览体验,对于追求完美的APP来时是一个不错的解决方案。

例如,部分艺术、女性类的APP会选择使用宋体,整体看起来有一种高端、时尚且优雅的感觉。

字体篇 | 处理好这些,让信息的传达效率翻倍!

整体界面使用特殊字体还是相对较少,为了更好的体现出产品属性/风格,将其融入不同的模块及使用场景,会让产品更有特色,例如banner、瓷片区、大标题、头图等,对用户的视觉吸引力能得到很大提升。

字体篇 | 处理好这些,让信息的传达效率翻倍!

2. 使用同一家族字体

在一个APP中,坚持使用同一个家族的字体,对标题、正文等文字信息有一个统一的视觉规划,这样有助于建立起体系化的设计思路,避免在开发落地时存在一致性问题,减少开发与设计的出入。

笔者曾见过这样的设计师,界面中原本用了「苹方」字体,在一个特殊场景下,「苹方」的粗体字重无法满足大标题的使用需求,于是将大标题单独改为「阿里巴巴普惠体」的最大字重。

从表面上看,上述的设计需求是满足了,但稍有不慎就会成为没有价值的艺术品,首先,单独一处使用不同家族的字体,会影响整体视觉的一致性;其次,若程序没有嵌入另外的字体,产品落地后其视觉效果毫无改观,且更没有必要为了某个场景的使用要单独嵌入几十到几百兆的家族字体,让应用安装包无故加大。在设计中,有时候在解决某个问题时,解决方案并非无可替代,加粗字体亦是如此。

另外,在可用性、实用性强且必要的情况下,并非不能再增加一个家族字体,例如所有标题系列使用「阿里巴巴普惠体」、数字系列都使用「DIN」,前提是一定要形成体系化,并非某一处的使用。

字体篇 | 处理好这些,让信息的传达效率翻倍!

3. 明确的信息层级

在同一个界面中,字体色值、字号、字重等,都是用于区分信息层级,尽量不要使用过多的层级,避免层级混乱影响信息浏览。

在信息层级处理方式的四个基本原则中,「对比」就是将复杂的信息通过元素的各种属性以不同的视觉效果呈现,来体现信息节奏感,并非是为了好看而随意给文字赋予各种属性及样式效果。

字体篇 | 处理好这些,让信息的传达效率翻倍!

五、UI设计需注意的问题

1. 避头尾的使用

避头尾使用在文字内容较多的折行场景中,主要处理标点符号刚好出现在一行文字的开头或结尾时,通过自动调整单行的字符间距、在视觉上将标点符号前移或后移。

在新闻资讯类应用的详情页中,避头尾使用的较多,用以避免头/尾存在标点符号造成视觉重量不一、信息参差不齐的问题出现。

字体篇 | 处理好这些,让信息的传达效率翻倍!

2. 反差体现层级

很多时候,为了区分信息层级,首先想到的是利用不同的字号、字重来体现,这当然没有问题,但如果结合字体的明暗关系(灰度色值等级)则效果更佳。

如下图:标题一级色值(#333)、正文二级色值(#666)、时间日期三级色值(#999)。

字体篇 | 处理好这些,让信息的传达效率翻倍!

3. 备用字体

备用字体只会运用在web页面中,如果网站需要一款特殊的字体才能彰显其独特的气质、同时又担心用户在某些设备中因为没有这个字体而无法浏览其效果,则会另外再选择一款相近的通用字体作为备选,以弥补视觉体验上的损失。

如果字体包不大,也可以让开发将其放在服务器端,这样能让所有用户都能看到相同的效果,省去了不少麻烦。

4. 确保可读性

可读性应该是选择字体的首要元素,虽说很多文字我们都可以从前后字义、联想词等角度将自己的理解补充完整,但完全没有必要。

UI设计不像海报那样融入较多的艺术成分,更需要的是内容清晰、表意明确、高效率的传达,任何增加用户阅读、理解成本的做法都应该规避掉,例如过于变形的可爱风格、书法手写体等都尽量少用。

字体篇 | 处理好这些,让信息的传达效率翻倍!

六、结语

文本内容是UI界面中占比较多的元素之一,设计师需要对其基本属性及使用场景有一个清晰的了解,使用的是否恰当取决于我们对字体的选择。虽说在UI领域,字体模块类的文章比较少(更多是文字、字库的设计),但它在设计规范中的地位是举足轻重,选好一款字体对设计来说是锦上添花。

关于UI界面中的字体,其实没有太多的讲究,也没必要整得花里胡哨,重点在于排版过重中注意信息层级的划分以及有足够的视觉舒适度即可。

专栏作家

大漠飞鹰;公众号:能量眼球,人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘,利用设计的手段为受众用户带来更好的体验,即好看、好用。

本文原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于 CC0 协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

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

春节爆品背后竟藏着这10+个设计秘诀

清阳

春节是一个很大的流量池,经过一年时间的劳累,人们有了更多的闲暇时光,这是企业也是内容创作者获取流量的绝佳时机。

这个春节,我被各大产品的情感化设计萌化了,设计细节太贴心了,极大的增加了产品与用户的粘性,各大厂都推出了既承载千年文化重量,又具备数字原生形态的新春物种,花样可谓是百花齐放。

各大厂都纷纷从视觉、社交互动、内容创作展开想象,设计了丰富多彩的春节用户体验,下面让我们来开开眼福,一睹他们的风采,同时也顺便学习下,作为设计师的我们有哪些创意出发点?

一、各大厂春节设计的背景

春节,作为中国最重要的传统节日,不仅承载着深厚的文化内涵,更是一场全民参与的消费盛宴和社交狂欢。在这个特殊的时期,人们的注意力高度集中,围绕春节展开的各种活动,无论是线上还是线下,都呈现出爆发式的增长。

从电商数据来看,2025年全国网上年货节期间,全国日均网上零售额同比增长6.2%,累计网络零售额更是突破7000亿元人民币,同比去年增长9.8%,再创历史新高。

抖音电商“春节不打烊,财神送福气”活动中,全域日均支付GMV同比增长56.02%,直播日均支付GMV同比增长46.57%。

快手本地生活“新春团购节”GMV同比大涨117%,新线城市日均支付用户数环比增长234%,这些惊人的数据,无一不彰显着春节期间电商消费的强劲活力。

社交平台上同样热闹非凡。除夕及春晚期间微博活动用户达2.97亿,全站互动超3.1亿次,4656万用户除夕赢得福运红包,全国年味相关话题阅读量破102亿。

快手在2025年春节期间,平台日活用户规模创历史新高,春节活动相关视频总播放量超2000亿,直播总观看量高达150多亿,“摇发财树”红包活动中,用户一共摇了57亿次红包。

如此庞大的流量和用户注意力,为品牌和商家提供了绝佳的展示舞台。在这个信息爆炸的时代,谁能在春节期间成功吸引用户的注意力,谁就能在市场竞争中抢占先机。

一个精心设计的广告、一场别出心裁的互动活动,都有可能在这个流量高峰中迅速传播,收获海量的关注和曝光,实现品牌知名度的提升和产品销量的增长。

下面就让我们看看各大厂在春节期间都找到了哪些设计机会点?

二、视觉机会点

1、按钮的设计机会

设计思考:

  1. 百度地图,在按钮设计上动了小心思,按钮用动车和灯笼相结合,颜色上也用的大紫大红,尽显春节的气氛。
  2. 花瓣,把几个素材的功能入口做成了红包形式,画面效果耳目一新,原来按钮入口还能如此的多姿好看,年味十足。
  3. 农业银行,功能入口全部由之前玻璃质感的扁平风变成了现在的微质感年味风,图标的每一个细节都在紧靠春节展开创作,展现了产品的细心和用心。
  4. 肯德基,功能入口图标全部用剪纸风格形式表达,将过年家家户户贴窗花的场景搬到了线上,让用户尽享年味。
  5. 腾讯视频,将主要功能入口用了故宫的古典建筑和节日的锣鼓,彰显了节日的热闹,也是不错的设计着手点。

2、网页皮肤的设计机会

设计思考:

  1. 太平洋汽车,左边灯笼,右边灵蛇,甚是欢乐,蛇年氛围十足。
  2. 春秋航空,背景用了极具中国年味的水墨插画进行表达,画面中有熙熙攘攘拜年玩耍场景,更有调皮可爱的小蛇带着帽子在街上行走,饱足了观众的眼福。
  3. 搜狐,左边新年祝福语,右边一个调皮的剪影小蛇嘴里叼着一个灯笼,虽简洁,也是很能感受到节日的气息。
  4. 万方数据,左右两对精致的灯笼,通红的背景,营造出万家灯火的感觉,满满的吉祥寓意,象征着来年的好运与吉祥。
  5. 中华网,满屏的烟花秀,让人瞬间想起大年三十除夕夜的烟花,小小的元素也是有着大大的魔力,让人浮想联翩。

3、弹窗的设计机会

设计思考:

  1. 花瓣的弹窗,用了红包与灯笼的结合,玫红色和金色金币的运用,画面财源滚进的寓意浓厚。
  2. 有道翻译的弹窗,边框用了具有中式边框的造型,左右两串长长的灯笼,下面还配有祥云,很有意境,红火的画面,再将需要凸显的信息放置在在紫色按钮上,对比感强烈,信息传达无比清晰。
  3. 应用宝的弹窗,用了漫画的风格进行表达,按钮和边框都运用了中式的装饰纹样,紧扣节日主题。
  4. 中国电信的这个弹窗,比较讨巧,其他的样式都沿用了日常的样式,只是在右上角添加了一个小小的烟花造型,氛围感马上呈现,对于设计师来说真是省时省力的举措。
  5. 支付宝的弹窗,直接用了转红包的视觉创意,将过年的这种人情世故转到了弹窗中,很亲民。
  6. 中信银行的弹窗,运用欢乐的吉祥物形象,外加几何烟花造型来营造春节氛围,也是不错的视觉表达。

4、动效在春节PC端的设计机会

设计思考:

  1. 金投网的背景用了一些在空中摇曳的灯笼和福字,让春节的氛围额外的浓烈,果然动效是氛围打造的绝佳利器。
  2. 地下城与勇士,它的氛围打造就更浓郁了,有人有物,场景额外的热闹,仿佛看到了过年大家一起赏灯看烟花的场景。

5、动效在春节登录页的设计机会

设计思考:

登录元梦之星和洪恩识字,感觉就像打开了一场烟花秀的视觉盛典,特别是洪恩识字,效果特别的炸裂,数字烟花秀做的特别吸睛。

这样的动效视觉表现很好的与用户产生了情感共鸣,拉近了彼此的距离,增加了节日的乐趣。

6、动效在春节APP的设计机会

设计思考:

支付宝在春节期间推出了一款很惊艳的皮肤,画面中仙气飘飘,一改之前单调的纯色背景,将有中国韵味的敦煌壁画文化搬上了荧屏,增添了很多喜庆的氛围和中国味,养颜又养心。

设计思考:

腾讯QQ在过年期间,推出了一个领Q币的活动还挺有意思,小企鹅穿着厚厚的衣服,手中抱着一个福袋在奔跑,通过这样的动效引导用户去领金币,非常的有意思。

7、Banner在春节的设计机会

设计思考:

Banner是很好进行情感化设计的窗口,也是打造春节气氛的绝佳宝地,那么这个春节它也一定不会缺席。

  1. 优设网在Banner中运用古代门头和灵蛇结合,再配合烟花,喜庆感倍增。
  2. 钉钉在Banner中采用了他们的吉祥物进行了设计,让吉祥物身穿年服来传递节日的气息,也是不错的设计出发点。
  3. 七猫中华网,运用城市烟花结合写作的笔进行创作,符合节日属性同时又与平台业务相契合,表达的很妙。
  4. 创客贴,一改常规的大红,用了淡雅的黄色,左右两边点缀一个灯笼和些许元宵,也传递了不一样的节日氛围。

三、功能创新机会点

1、微信红包的微创新

设计思考:

今年的微信红包,新增了一个随机的拜年红包功能,可以随机的派送红包金额,并且在红包的封面上可以长按,说出你想跟对方说的寄语,这个小小功能的精进,让发红包这个事情也变得更加有温度。

微信红包,还有一个新的创新点,小小的红包封面变成了产品的宣传栏,比方说广汽埃安的这个红包封面,它既是拜年的寄语栏,又是绝佳的产品宣传栏,配合动效,特别的酷。

2、百度地图的微创新

设计思考:

百度地图在这个春节心系百姓的民生问题,知道人们在这个节日有旅游、探亲、出行的需求。

百度地图开发了人口迁徙监测功能、交通拥堵实时监控功能,让人们在出行时避开高峰路段,以及人口扎堆的旅游景点。

更有后方快车通过的提醒功能,当后方来了一辆很快的车时,百度地图也会进行语音播报,提醒车主这时不能随便变道。

当自己体验到这个功能的时候,感觉到这不仅仅是简单的功能了,更是一份对用户的爱,以及对生命的敬畏。

3、满足拜年需求的产品功能创新

设计思考:

过年期间,是重温感情的好机会,朋友间彼此的问候还是很有必要的,那么如何问候,是简单的文字,还是用更有创意的视频画面去表达呢?

发现我们考虑的,很多产品都已经帮我们想好了,比方说讯飞智作、剪映就推出了很多拜年视频的模板供用户自己去选择加工使用。

很大程度提升了用户制作视频的效率,也很大程度提升了产品的粘性,为用户多考虑一点,用户对产品的依赖也会更多一点。

四、社交互动机会点

1、支付宝的社交互动

设计思考:

发现支付宝在与用户社交互动这块做的非常的好,每逢大的节日都会有与大众互动的运营活动。

比方说元宵节的点福卡活动,萌萌的元宵,再配合微动效,以及引导用户去点击的手势动效,无不是在号召用户参与进来。

支付宝的五福活动,很有意思,入口的左右两边放置一个帅哥和靓妹在接红包,画面很有互动感,欢乐性十足,让人也忍不住去参与集福卡的活动。

五、营销机会点

春节是消费高峰期,人们有购置年货、礼品等需求,此时也是各大品牌搞营销活动的好机会。

1、体验的营销案列组一

设计思考:

  1. 苏宁易购,在元宵节推出家电换新补贴20%的政策,满足了很多人购置新年物品的需求,一定程度上促进产品的转化。
  2. 有道和WPS在春节推出联合会员,且只有4折,极大的刺激了用户的复购,以及新用户的购买。
  3. 字由也紧跟节日步伐,在这个特殊的节日展开了“阿里汉仪顺利热土体”的公益发售,促进了字体的发售,就连我这个平时很少购买字体的人来说,也顺利下单了,来支持这个公益字体的发售,可以商用,却只要59.9就能终身商业使用,谁人不心动,字体又这么好看。
  4. 农业银行在这个春节期间推出乡村农产品的售卖活动,价格实惠,同时又带着助农的性质,我相信一定会带来一波不错的销量。
  5. 长沙银行也积极推出低利率的贷款活动,吸引人们去贷款。

2、体验的营销案列组二

设计思考:

酷我音乐在过年期间,把皮肤设计当成了一种增加会员的刺激手段,一旦成为会员就能享受跟普通用户不一样的头像装饰。

连音乐播放页的皮肤也会有更多选择,可以选择年味十足的播放页,这让成为会员的人有一种偏爱的感觉,很不错的促销手段。

产品既能赚到钱,又能满足一些用户的需求,多好的共赢方式,拥有着健康的成长生态。

六、阿里春节设计趋势报告

在阿里UCAN年度设计趋势报告中,着重强调了设计在商业场景里对用户行为的关键影响。在春节这一特殊时期,流量高峰带来海量用户,此时设计的价值尤为凸显。

报告指出,随着技术的发展,设计已从单纯的视觉美化,转变为提升用户体验和驱动商业增长的核心力量。

以春节红包设计为例,具备按钮动效的设计能极大吸引用户注意力。从心理学角度来看,动态元素更容易刺激用户的视觉神经,引发他们的好奇心和探索欲。

这与UCAN报告中提到的利用动态设计增强用户交互体验的理念高度契合。数据显示,这种设计使红包打开率提高了30%,直观地体现了优秀设计在春节流量高峰下,对提升用户参与度的显著效果。

在电商页面设计方面,UCAN报告强调简洁直观且富有创意的界面设计,能有效引导用户行为。

春节期间,电商平台流量剧增,那些依据这一理念设计的页面,通过合理布局商品展示、运用鲜明的春节色彩元素,以及提供便捷的购物流程,成功吸引用户点击,提升了商品点击率和购买转化率 。

这不仅印证了报告中关于设计要贴合用户心理和行为习惯的要点,也再次证明了在流量高峰时,优秀设计对商业转化的巨大推动作用。

七、腾讯春节趋势报告

微信团队发布《微信里的赛博年味儿》报告显示,自制红包封面玩法流行,春节期间微信里诞生了1亿+款用户创作红包封面,约3.9亿人收到此类自制封面红包。

微信“送礼物”功能中,书籍品类送礼订单量环比增长10000%+,收到礼物数目最多的省份前三甲是广东省、山东省、浙江省。

看到这份趋势报告,我惊呆了,挖掘一个符合用户需求的产品功能,能带动海量用户的黏性和活跃,不得不说,微信自制红包的这个功能开发的太好了。

总结

作为设计师,以前只在意产品的视觉和皮肤,没有站在一个多维的角度去看待一件事情以及背后的逻辑,发现写作让我思维更开阔,视角更全面,想事情想的更清楚,看问题看的更明白,感谢这一年来自己笔耕不辍,一直在精进的路上。

作者:姝斐suphie,公众号:姝斐

本文由 @姝斐suphie 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自作者提供

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

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

日历

链接

个人资料

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

存档