首页

B 端设计九大核心要点

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

在设计领域,B 端产品设计因其复杂性和专业性常常被视为挑战。近期阅读《B 端产品设计精髓》一书,让我对 B 端设计有了系统且深入的理解。以下将从定义、背景、目标等九个维度,分享 B 端设计的核心要点,希望能为从业者提供参考

【兰亭妙微图标设计】为什么视觉大小和实际大小不相同?如何做到视觉统一?

杰睿 图标设计文章及欣赏


26082bb9-3b33-4e00-b4c1-4c60727d6087.png
在 UI 设计和图标开发中,我们常常遇到一个让人困惑的问题:
明明两个图标尺寸一样,为什么看起来一个大一个小?
这就是「视觉大小」和「实际大小」不一致所引发的经典设计挑战。
 这篇文章将带你了解其中的原理,并分享一些实操方法,帮你设计出视觉协调、统一专业的图标。

---
一、为什么视觉大小 ≠ 实际大小?
在设计中,「实际大小」是指图标在画布上的像素尺寸,而「视觉大小」是指人眼感知到的图形体积或重量感。这两者之所以不一致,主要有以下几个原因:
1. 图形形状对视觉感知的影响
不同形状对人眼的“占据感”不同:
- 圆形、椭圆形:边界柔和,看起来比实际尺寸小;
- 尖角图形:具有延伸感,看起来更“张扬”;
- 封闭 vs. 开放图形:封闭图形更“紧凑”,视觉重心靠内;开放图形更“轻”,容易被忽视。
举例说明:一个 24x24 的正方形图标和一个 24x24 的圆形图标放在一起,圆形常常显得更小。
2. 视觉重心偏移
图标的视觉重心不是几何中心:
- 有些图标上方留白较多,若严格居中,整体会显得“偏下”;
- 有些图标线条向一侧偏移,也会影响视觉稳定性。
3. 颜色、线条粗细的错觉
- 颜色明亮的图标通常看起来更大;
- 线条较细的图标会显得“轻”或“空”;
- 相同尺寸下,深色图标比浅色图标更具“存在感”。

---
二、如何实现图标的视觉统一?
4. 关注“视觉等值”而非“尺寸一致”
优秀的图标设计不会追求数值上完全一致,而是让图标“看起来”一样大。这就需要设计师具备一定的视觉判断力和对比经验。
5. 使用统一的对齐原则
- 每个图标放在相同的画布尺寸(如 24×24、48×48)中;
- 保证主图形部分在视觉上居中,而非仅仅坐标居中;
- 调整视觉重心,让图标看起来平衡、不倾斜。
6. 使用光学微调
所谓「光学对齐」,就是打破机械对齐规则,让视觉更舒服:
暂时无法在飞书文档外展示此内容
7. 放在真实场景中预览
设计图标时,建议不要孤立操作,而是:
- 放入实际使用场景(如按钮、导航栏);
- 对比多个图标在一组中是否协调;
- 测试在不同设备分辨率下的适配情况。

---
三、图标设计实操建议
以下是一些日常图标设计中实用的技巧和判断标准:
暂时无法在飞书文档外展示此内容

视觉大小与实际大小的偏差,是每一位图标设计师都会经历的学习过程。
 真正优秀的设计不是追求数值一致,而是注重 用户感受的和谐统一。
图标设计的细节感,往往藏在你“感觉不舒服但又说不出哪里不对”的那一刻。
理解视觉感知,训练视觉判断力,才是做出专业、协调图标系统的关键。

兰亭妙微(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 界面图标设计的 10 个关键细节

涛涛

UI 界面图标设计的 10 个关键细节:使用光栅框架确保图标视觉重量一致,设计时注意像素网格重要性、优先 2 像素边框,从最复杂图标开始设计以保持细节层次统一,控制相邻元素最小间隙、避免轮廓 “粘滞”,去除重复图形元素以简化设计,保持图标风格(如角度、线性 / 填充)一致,基于 8 像素网格等二倍数度量系统设计,确保轮廓节点对齐、尺寸为整数,清理 SVG 代码中的冗余图层,同时强调这些建议需灵活应用而非刻板遵循。

三维图标设计宝典

涛涛

 “三维图标设计宝典” 方法论,强调从前期构思(分析竞品如马蜂窝与本品飞猪的图标类型、配色、风格及核心辨识点,通过关键词脑暴锁定 “品质、活力、青春” 方向并产出情绪版)、绘制图标(具象功能、简化结构、确定基本形,融入飞猪品牌超级符号,添加毛玻璃质感等细节)到走查图标(从辨识度、统一性、美感度、差异化四方面检查,如类型、风格、体量感统一,融入品牌符号增强差异化)的完整流程,助设计师提升过稿率。

干货分享 | 信息架构不是UI,也不是代码,那它到底是什么?

杰睿

“信息架构是创建信息产品和体验的艺术及科学,以提供可用性、可寻性和可理解性。” ——《信息架构:超越Web设计》

通俗点说:

UI 是你看到的样子;
代码是让东西动起来;
信息架构是让一切“有条理”
没有 IA,就像超市没分区、图书馆没索引,用户一头雾水。
 

信息架构到底做啥?

它管这四件事:
怎么分 → 信息怎么分类才合理(组织系统)
怎么叫 → 名字清不清楚,用户能不能懂(标签系统)
怎么找 → 想搜就能搜到吗(搜索系统)
怎么走 → 路线清不清晰,能不能快速找到目标(导航系统)
“用户必须能够在信息空间中定位自己,知道能去哪、在哪。” ——《信息架构:超越Web设计》
original-170215c1b242be0a9ad9045152609dbe.png

应用场景举个例子:

做电商页面?分类和筛选方式比页面配色更重要。
做App主页?一级和二级信息层级影响用户停留时长。
做内容运营?文章的标签系统决定用户是否“越看越上头”。
 

小提示:

想提升页面留存率?先看看结构是否合理
想优化用户路径?先画出你的信息地图
不知道用户为啥迷路?可能是导航不清楚
 
信息架构是那种“你感受不到它,但离了它就全乱套”的设计。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
 

兰亭妙微 | APP界面设计公司UI | 设计案例复盘

杰睿

在「3+3」「3+1+2」新高考模式下,选科决策成为高中生和家长的「头等大事」。兰亭妙微公司受委托优化高考选科决策平台个人诊断报告界面,核心挑战是:如何将复杂的测评数据(如学习能力倾向、学科报考机会、职业兴趣等)转化为直观易懂、兼具美感的视觉语言?

设计突破口:
用立体风格图标打破传统数据图表的枯燥感
以模块化布局 + 轻量化色彩构建信息层级
通过可视化设计降低家长和学生的理解成本

20250526-125027.jpg

20250526-125017.jpg

20250526-125023.jpg

 

设计亮点:
质感风格区分
结合学科属性提炼「核心视觉符号」,采用微立体 + 扁平渐变风格,既保留数据的专业感,又注入年轻化视觉语言。
图标采用2.5D 立体效果,通过阴影和轻微透视增强空间感,搭配主色调浅蓝色,既统一视觉风格,又避免信息过载。


这种以立体视觉符号简化复杂信息,模块化逻辑兼顾专业与易用的设计风格,也适配一些企业服务类产品、生活服务类工具、医疗健康、政务服务等场景。

 

8ad61732265770.png

更多项目/合作请私信,支持定制设计服务

我们是兰亭妙微
兰亭妙微( 蓝蓝设计)是一家专注而深入的UI设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、网页设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计
了解更多设计案例 → www.lanlanwork.com
商务合作请联系:weihua@lanlanwork.com

掌握这3个方法,新手也能做出精致的图标设计

lanlanwork

你只需要做三件事情,就可以让你做出足够优秀的作品

第一:找到合适的图标素材

第二:增强设计素材的统一性

第三:给设计素材加入自己的想法

我们这次做的图标分别为:通知、商城、发现、我的。

第一:找到合适的图标素材

我就拿最常用的阿里巴巴图标库,打开网址,找通知图标,直接下载第一页,第 1 排第 2 个:

image.png

接下来是商城图标,继续搜索商城,我们选用第一页,第 2 排第 2 个:

image.png

相同的方式,我们找到以下四个图标的原始素材:

image.png

这里面我们需要注意,在找素材的时候,你至少需要找到一两个不太一样的图标,否则整体就会比较普通,我们现在这样看上去,第四个“我的”图标,相对来说不一样一点,至少没那么常见:

image.png

第二:增强设计素材的统一性

有了素材之后,我们首先要让他们看起来是一套的,所以在统一性上需要优化,先优化大小和线条粗细:

image.png

大小和粗细优化完之后,我们再优化下圆角统一性,现在很明显,只有第二个图标是圆润的,其他的都是有点硬朗的,可以进行统一下:

image.png

直角圆角统一了之后,还有一个统一性就是断线,只有第二个没有断开的设计,所以我们再把商城进行断线处理:

image.png

第三:给设计素材加入自己的想法

大家要明白,虽然我们可以直接下载图标素材,而且可以通过审美让他们变得相对精致统一,但素材毕竟还是通用的,我们还是需要融入自己的想法和设计,不能完全依赖素材,举一个最简单的例子,“我的”这个图标,他的脑袋是圆形的,那我们是不是可以把他改成矩形的?

image.png

比如一些细节的调整,像通知图标,感觉有点秃,是不是可以让中间伸出一点宽度来:

image.png

细微调整之后,如果觉得还不够,我们还可以继续添加新的设计语言,比如增加配色点缀:

image.png

就这样,这几个图标,渐渐的就成为了你自己的作品!

我们在放适当的包装一下:

image.png

我们再对比一下原始的素材:

image.png

效果还是提升很大的!

所以,做任何事情,一定要讲究方法,不能死脑筋,否则进步就很慢。

欢迎关注作者的微信公众号:「菜心设计铺」

 

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

 

 

应用图标 | 全面解析,助力设计出更优质的应用图标!

杰睿

编辑导语:各大APP的图标都各有特点,图标的设计也是一门学问。在这篇文章中,作者全面解析了各类APP图标设计背后的用意,一起学习一下吧。

如果说一个人的脸面、衣着打扮是给陌生人的第一印象,那么APP的应用图标风格与气质就是留给新用户的第一印象,关系着用户是否对这个APP感兴趣、是否会打开应用介绍、是否会点击下载按钮起着决定性的作用。

一个好的应用图标有着无限可能,无形中对用户产生强大的吸引力,并有一种想要了解的冲动,况且图形本身就能让人充分发挥想象力,这就是为什么不管在哪个应用市场第一眼看到的是应用图标,而非应用名称。

在一部手机就能解决很多问题的互联网时代,相信每个人都有下载几十上百个APP,琳琅满目的列表,应用图标是否能在第一时间抓住用户眼球(目标明确或铁粉除外)非常重要,一个视觉传达清晰且有吸引力的图标能提升用户点击率,即便用户只使用过一次,相对来说,印象也会更深刻。

本文根据笔者对大量应用图标的分析、结合设计准则进行总结,希望能帮助大家在设计过程中规避掉一些常见的问题,欢迎一起探讨、取长补短、共同进步。

分享目录

  1. 四大设计原则
  2. 色彩的表现形式
  3. 主体图形分类
  4. 背景图案及元素
  5. 主体图形的表现手法
  6. 应用图标设计流程
  7. 总结

一、四大设计原则

应用图标代表产品的外在形象,设计的精美与否决定着用户的第一印象,是否产生打开的欲望跟当前图标的视觉所传达的内涵有最直接的关系。应用图标虽然不同于设计LOGO,表现方式也千变万化,但必定有自身的设计准则要去遵守,利用设计的手段将视觉传播的价值最大化。

1. 可识别性

首先,应用图标需要尽量简约。过于复杂的图标会增加用户的理解成本、甚至误导用户,但如果过于追求简约,缺乏细节、个性化以及必要的隐喻信息,也会因过于单调,造成表意不明确等问题。

简约并非简单,设计师需要通过专业的知识进行合理的简化,以提升应用图标的设计品质,方便用户在不同场景中都能清晰的辨认。其次,需表意明确、易于理解。

应用图标代表的是产品的行业属性、功能作用或与众不同的优势,要让用户第一眼就能识别出所代表的含义,贴近用户的心理预期。

简约易识别是应用图标必备的基础属性之一,这也是为什么大部分产品都将logo作为应用图标主视觉的原因,因为logo设计考虑到了方方面面以及后续延展的问题,即便有些logo较为复杂,也会通过提取局部元素、吉祥物、主体色等方式来强化应用图标属性,给用户形成独特的记忆,以提升应用的下载量和使用率。

2. 关联性

应用图标应该与产品的属性、品牌有极强的关联性,通过品牌延展赋予产品更强的生命力,让用户从接触应用图标的第一眼开始、再到后面的使用,整个过程始终都能保持清晰且统一的品牌认知,通过和谐统一的视觉效果,带来更好的用户体验。

应用图标需要与品牌之间必须保持高度的一致,着重从以下几点体现:

1)LOGO

毫无疑问,用品牌logo作为主体图形是最佳选择,结合品牌色搭配使用,能将产品核心理念、品牌形象的传播效果达到极致,在APP应用市场中,大家会发现大多数产品都在使用logo作为应用图标的主视觉图形。

2)品牌色

品牌色即主体色,将贯穿APP所有页面的元素组件。众所周知,每种颜色都有其特定的含义,能传递给用户不同的心理感受。用主体色作为应用图标的背景色,可以烘托出产品的情感氛围,并与进入应用后的主体色遥相呼应,以最小的视觉跳跃性将前后关联,强化用户对产品的记忆感知。

3)IP/吉祥物

吉祥物属于品牌logo延展的一部分, 也是产品的灵魂。当logo较为复杂时,因移动设备应用图标位置空间有限,logo细节无法在短时间被用户捕捉,不宜展示时,使用IP/吉祥物或其局部元素代替也是不错的选择。

4)产品名称

如果说logo是产品的脸面,通过暗示和隐喻给用户无限遐想并让用户记住它的样子,那么名称的出现就相当于产品主动进行了自我介绍,并让用户知道如何称呼它。

将产品名称作为应用图标需谨慎使用:首先,文字传达的信息量有限:其次,用户对于图形的理解效率要优于文字;再者,应用图标都会有对应的产品名称展示(应用市场在右、桌面在下方),多少有些信息重复。

所以大家见到的应用图标主体是产品名称的不外乎两种情况,一种是产品本身将名称设计成字体logo,例如美团、懒饭;另一种是将产品名称作为logo的辅助信息提示,例如缤纷生活。

以上是应用图标与品牌属性关联最常见的四种方式,在设计中可灵活搭配,使用两种及以上的方式组合,能将品牌传播的途径发挥到最大值。

3. 差异化

笔者上小学时,曾经在一次彩铅绘画作业中得到了老师的真心夸赞,但内心却备受打击。老师对着我画的桃子说“这西红柿画的太像了”。

举这个例子似乎并不恰当,但结果是惊人的相似,笔者想要陈述的一个观点是,不要让你辛苦做出的设计成为别人的嫁衣,让用户误以为这是其他企业的“某某某…”产品。

目前,应用市场中的APP数量巨大,且还处于增长的趋势,同行业的图标设计同质化相当严重。想要让自身产品应用图标脱颖而出,就有必要在设计之前做好竞品分析,借鉴竞品的优点,在突出自身产品核心特征、属性的基础上,还要用不同的表现手法突出其差异性,给用户留下独特的印象,避免同质化。

4. 可用性

应用图标在设计完成之后(测试小组)、上线后(用户反馈)进行可用性测试,主要针对图标对用户的吸引力、识别度等问题作进一步优化,以确保图标在不同场景中都能被用户清晰识别并提升印象。

虽然可用性测试存在设计之后,但这一环节至关重要,它决定着产品的下载量以及使用率。

二、图标颜色的表现形式

1. 单色图标

单色图标通常以品牌色作为背景色、logo以反白的形式呈现,既能突出品牌色、还能用于烘托主体图形,不过这种方式仅适合色值单一的logo,多色值可能会与背景色产生融合或色彩反差太大影响视觉传达效果。另外,如果logo视觉重量较大,也可使用白色背景+原品牌色logo,这样会更直观。

单色应用图标虽然色彩比较单一、表现形式也受到局限,但视觉清晰、简洁且识别性强,如果能运用其他设计手法丰富图标细节就再好不过了。

2. 多色图标

多色图标使用了两种及以上的颜色,更多是直接使原多色彩的logo图形+白色背景,无需任何加工,控制好尺寸规范就行。如果是运营推广所需,如春节、618、双11等活动,会对应用图标加以其他色彩烘托、点缀元素或标签等,色彩就会更多,但一般都具有时效性,活动过期即图标复原。

多色图标的细节、层次更加丰富,设计时确保各色彩搭配协调,一旦因色彩过多造成视觉混乱,就得不偿失了。

3. 渐变图标

无论是单色还是多色,添加渐变会让应用图标更加细腻、耐看。渐变的表现手法应用广泛,简单的渐变能让图标细节丰富,同时也具备空间感和微立体感。

设计渐变色图标需注意图形衔接处的对比度,花里胡哨的渐变色会拉低品质感,要确保色彩的和谐,让图标视觉清晰且容易识别。

4. 颜色叠加

单色、多色或是渐变都可通过调整不透明度、图层叠加的方式来丰富应用图标细节,相比纯粹的渐变,立体感和空间感更强。使用颜色叠加需注意色彩对比及明暗关系,否则会衍生出脏乱的颜色。

5. 色环的运用

环形构图为主,由多个元素复制并以统一的中心点、旋转角度,旋转衍生出一个主体图形。这种应用图标的设计构图饱满、色彩丰富,能给用户传递出轻松愉快的视觉体验。

需要注意的是,由于颜色较多,至少在三种颜色及以上,否则无法构成色环类的主体图形(错觉)。如果没有超强的配色功底,最好按照色环的顺序依次取色,即便没有太大的优势,但至少不会出错。

三、主体图形的分类

一个好的应用图标应该是多元素、多信息结合运用,才能达到更好的效果。虽然大部分主体图形使用了logo,但并不影响设计师们对其进行拆解,提取局部元素、色彩、名称等信息进行二次创作,从原则上来说,是一次线上logo的设计。

应用图标种类繁多,切不可盲目跟风,需经过认真的分析、研究,找到最适合自身产品的才是最重要的,且每种类型并非独立,在条件允许的情况下还能跨类型灵活搭配、相互组合。

1. 中文字体

1)单中文字体

仅次于图形logo的表现方式,通常会在产品名称中提取一个具有代表性的文字对笔画、结构等进行再设计。基于国人文化的优势以及对汉字的敏感度,既能降低用户对应用图标的认知成本、还能根据产品特性设计出差异化的视觉效果。

不过因为文字笔画的原因,单个文字提取难度较大,避免信息传递有误或影响识别度,建议选择笔画较少且具有特性/代表性的文字,若达不到条件,最好选择其他表现方式。

2)多中文字体

使用两个及以上汉字,大多直接将产品名称用在图当中,对用户来说更容易记忆,有利于品牌推广。相比单字体,设计感会受到一定的局限,不宜做过于夸张的表现方式,因文字较多,设计时一定要注意文字的协调与可读性。

多文字图标建议将字数控制在2~6个范围内,3字以内一行显示,超过3字即两行显示且最多不超过两行,否则会影响图标的识别效果。

3)中文、图形组合

适当添加带有产品特性的辅助图形,用引导或指向性的方式对文字进行强调,图标细节会更丰富,可以突出产品想要传达的信息、以及不同的气质,还能增加图标的形式感和趣味性。注意添加的图形不要过于复杂,不然会让信息混乱,适得其反。

4)中文图形化

根据单个字体笔画的特点进行巧妙的变形或延展,会让你的应用图标更具设计感、品质好。这种方式对设计功底的要求较高,需要确保字体的识别度,切勿霸王硬上弓,如果是为了设计而设计,就违背的信息传播的初衷。

5)中文、IP形象组合

由产品名称和IP形象组合而成,这种方式能通过品牌IP不同的视觉形象带给用户情感化的体验,让产品更具亲和力,拉近与用户之间的关系。例如,IP的喜、怒、哀、乐表情变化分别对应用户不同的心理感受,以加深用户对产品的印象及品牌认知。

2. 英文字体

1)单英文字体

单英文字体通常是提取产品名称拼音首字母或英文首字母进行创意设计,跟中文字体相比,基于字母本身线条的简洁及流畅性,再结合产品特点,很容易设计出兼具美感、高识别度的应用图标。

需要明确一点,不管如何创意,也仅局限于在26个英文字母中选择,如果想设计出差异化的应用图标,对设计师来说,是一个很大的挑战。

2)多英文字体

跟多中文不同,中文产品名称在移动端基本不会超出6个字,而全拼音或英文名则多达十几位甚至更多,为了用户能更好容易识别、记忆,依然是提取不同拼音或单词的首字母(中文全称)进行设计。

多英文的应用图标很很容易形成独有的产品简称,更利于用户记忆,但字母一定不要过多,如果无法删减,那就只突出特定的2~4个字母。

3)其他类型

字母与图形、IP形象组合以及字母图形化,其表现方式、设计原则与中文字体图标类似,这里不做过多阐述。

3. 数字符号

1)数字设计

人们对于数字来说是非常敏感的,不存在文化差异或认知误区,基于数字便于记忆且容易识别的特点,将数字图形化后应用到图标当中,会让产品具有亲和力,有利于品牌传播。单纯的数字过于简单,需增加一些细节,丰富图标层次,让其具备独特的记忆点,不然会显得单调。

2)符号设计

每个符号都有特定的含义,因此,在选择符号作为应用图标之前,首先需要了解清楚该符号是否能体现出产品属性以及想要表达的意思,例如“¥”适合攒钱、理财相关的应用,而“+-×÷”则适合用于计算器或数学相关的应用;其次,符号跟数字一样,都比较简单,需经过二次创作后才会使用。

4. 扁平化图形

1)线性图形

线性风格的应用图标能给人一种简洁轻快的感觉,设计师通过提取产品的品牌信息、功能服务等进行创意设计,将得到的关键词以一条或多条线段组成高度抽象的图形来达到信息传播的目的。

通常以反白的形式出现,背景可以是单色、渐变色或加以辅助图形点缀。

线性图形非常适合文艺类简约风格的应用,通过不同的线条带给用户不同的心理感受,例如直线代表大方、专业、正直;斜线代表张力、速度;曲线代表流畅、飘逸及柔软等。

设计时,切记图形不能过于复杂,否则会影响其辨识度,增加用户的认知成本,也不利于品牌推广。

2)面性图形

也可称之为剪影图形,根据产品属性,将日常生活中被大众所熟知的动物、植物、食品、工具、玩具…等事物进行简化,通过刻画事物的造型轮廓来形成独立的剪影图形。

高识别度的剪影图形会让整体看起来非常醒目,提高信息传播的效率,只要控制好造型,即便把图标缩到很小也能清晰辨认。

因现实世界中事务的复杂性,被提炼出的图形如果细节过多会显的复杂且不够干练、细节过少则难以辨认,所以需要对图形进行创意加工,最终以确保应用图标的功能和美感兼具。

3)几何图形

几何图形在应用图标中使用的很广泛,可以是线性或面性,表现形式也非常丰富,利用几何图形通过单独、组合、布尔运算等方式形成简单且个性化的创意图形,带给用户简约、现代、空间、热闹等不同的心理感受。

几何图形构图简洁,设计形式丰富多样,想设计出具备设计感和差异化的应用图标,很考验设计师的创意能力。

5. 卡通形象

对纯色剪影图形增加太多细节,无疑是将其“大卸八块”,变成一堆零件,但通过多色、渐变、图层样式等表现手法设计成卡通形象,就完全不一样了。

卡通形象能体现出产品的生命力、亲和力,以及直观且易于理解和记忆的特质,对品牌形象的塑造、传播起到了很好作用。

在画卡通形象时,需要注意产品主用户群体的年龄段,切勿一开始就把活泼可爱作为卡通形象的代名词,避免绝对低龄化的表达,同时需要设计师有一定的绘画功底。

6. 拟人化

利用人体的局部元素,如眼睛、嘴巴、手足、头部等,再结合常见的表情动作进行图形化设计,相当于给原本冷冰冰的图形赋予了生命力,传达出不一样的情感,而且用户原本就对人体元素敏感度更高,更容易打动用户并形成较强的记忆。

拟人化的应用图标会显得亲民,便于拉近与用户之间的关系,适度在抽象的图形上加入情感化(动作/表情)表达,能生动、形象的体现出产品独有的特性。

如果想要较强的视觉冲击力,建议元素不要过多,最好是对某个单一的元素作放大或特写处理,让用户看到更多的细节,也可用夸张、比喻、衬托等表现手法强化特点。

7. 拟物化

拟物化图标使用的比较少,它更偏向于某种行业类型,例如工具、游戏类型的应用,通过超接近于现实世界中的物体造型,基本不需要用户思考,一眼就能理解,但也正因为这种特性,信息量的传播受到很大局限,仅适合单一且大众化的信息传达。

在如今,想同时融入行业、属性、品牌等多元化内容的信息化时代,显然不太实用了。

四、背景图案及元素

1. 图形背景

应用图标背景通常以单色、渐变色居多,除此之外,还可以添加与主体图形相呼应的辅助图形背景,以丰富图标的视觉层次。图形背景一定是为衬托或突出主体图形的辅助存在,切勿过分表达,以免喧宾夺主。

2. 炫彩背景

当主体图形的结构、色彩不是很复杂,且产品面对的是年轻化用户群体时,可通过色彩拼接、晶格化或多种鲜明的色彩渐变等方式设计出炫彩效果,色彩表现丰富的应用图标,能带给用户更强的视觉冲击力。色彩可多但不可乱,需要把控好色彩之间的对比关系。

3. 运营标签

常见于在特定的节日中,例如618、双11、双12及传统节日等,产品会存在促销、打折活动,为了更早的让用户知道,会在应用图标的某个区域以标签的方式出现,起到引导用户的作用。

不过这种表现方式具有时效性,活动截止即图标样式复原。

4. 节日氛围

通过配色或节日相关的元素点缀,营造出一种感同身受的节日氛围。例如:春节期间,部分应用图标背景会调整为红色,并使用灯笼、烟花、文案等元素点缀,制造出普天同庆、与用户同乐的喜庆感,或者在高考期间鼓励学生,少了套路、多了真诚,给用户留下较深的印象。

五、主体图形的表现手法

1. 对比

通过元素的大小、长短、虚实、稀疏、方向以及不同的色彩、明暗关系等方式进行对比,形成强烈的反差效果,同时兼具张力和美感,这也是应用图标设计中很常见的技法表现之一。

2. 对称

对称在自然界中随处可见,在互联网设计中也是如此,应用图标中的主体图形以对称的方式呈现,能给用户平衡、和谐的感觉,也让图标更具有观赏性。

3. 分割

将应用图标中的主体图形分割,赋予不同的颜色、样式等,明确层级划分,可提升图标的美感。例如:将色块分割成不同的比例、形状,就能组合成一个完整的熊猫图形(百度搜“熊猫剪影”图片)。

如果适合使用0.168黄金比例分割就再好不过了,这是被公认为最具美感的比例。

4. 重复

将相同或相近的图形以某种规律连续性的排列,相比单调的图形,会更加饱满。重复性的表现手法以大小、色彩、位置、形状等作为出发点进行有序的排列,最终形成一种规律、整齐的节奏和艺术感。

需要注意的是基础图形不能过于复杂,一定是有规律的重复,否则会让图形变的混乱,无法形成整体。

5. 重叠

在保证识别度清晰的前提下,将两个或以上的元素相互重叠、交叉在一起,能形成前后左右的层级关系,制造空间感,同时也能将多个图形关联在一起,避免图标元素零散或单调,让整体性更强,丰富用户视觉感知。

6. 正负形

正负形也是常见的表现手法之一,利用正图为底,通过减去底层挖空的方式突出(错觉)负形,将产品特征、属性及服务多途径的传达给用户,可谓是“一石二鸟”。

正负形图标能将信息传播最大化,且设计感十足,好的正负形图标能给用户形成独特的记忆点,但设计时需要注意正、负衔接的顺畅度,否则无法清晰的传播信息。

六、应用图标设计流程

1. 发散思维、寻找隐喻

通过产品属性、功能或特点进行思维发散,例如:夏天,我们会想到空调、海滩、冰淇淋、比基尼、裙子(女性)、夜空等一系列相关联的事和物,搜集起来并做好整理归类,确定大致的设计方向。

2. 分析竞品、避免同质化

确定了大致的设计方向,就去找同行业、同类型或相似的应用图标分析其形状、配色、组合类型等,取长补短,这也是避免同质化非常重要的一个环节,帮助自己在后续设计出具备差异化的应用图标做铺垫。

3. 提取关键词

可以从产品名称或功能属性方面找出产品最想传达的核心信息,并提炼出关键词。切记,关键词不可脱离带水、表意不明确,一定要够精炼、能表达出核心内容。关键词在精不在多,如果太多,需要通过层层递进,筛选出“一主三辅”,要知道这关系着后续应用图标传达信息的精准度。

4. 图标绘制

将上一步得到的关键词转化成抽象图形,进行视觉化提炼,这时应用图标的雏形已经形成,再结合前面所提到的图形分类、表现手法以及注意事项等,进入图标绘制流程。关于图标设计规范及原则,在之前的《图标篇 | 图标设计必备的基础知识!》文章中有详细说明,这里不做阐述。

5. 细节处理

基本图形绘制完成后,通过添加点缀、辅助图形、背景处理等方式丰富图标细节,进行精细化处理,使其更精致,具备高识别度及品质感。

6. 适用性测试

分别通过移动端应用商店列表、应用详情、设置中应用列表、桌面以及WEB商店等,对不同位置的大小、不同的桌面背景进行虚拟测试,以确保在不同场景中都能被用户高度识别,如果这些问题等着被用户发现,很可能给产品带来不利的影响。

7. 输出切图

需要对iOS和Android系统各输出一套图标,iOS只需一个1024px的切图便能适配所有,且无需设定圆角。Android则需要多套切图规范,如512px、198px、144px、96px、72px、48px,圆角半径以512px为基准设定为90px(参考值)。

这些固定的尺寸规范并不在技术能力范畴,如果实在不清楚,需要用时就“百度一下”一大把,或直接找开发人员拿尺寸都不是难事。

七、总结

首先,笔者要感谢耐心看到这里的小伙伴,希望总结的内容能帮到大家,在前期设计中作为资料参考,避免出现常见的问题,防止进入误区。

其次,要想设计出优秀的应用图标仅看上述内容是远远不够的,少不了平时的多看、多练、多思考,需日积月累,逐渐提升自己的视觉审美、造型提炼、执行效率等多方面设计能力。

应用图标的总结分享就到这里了,对你有帮助的话就给笔者点个赞吧,如果有不同意见,欢迎在评论区交流或指正,以便查漏补缺,共同进步。

#专栏作家#

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

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

题图来自Unsplash,基于 CC0 协议

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

扁平化设计终结?新趋势来了?

杰睿

扁平化设计这一趋势已经流行了挺长时间,而现在,设计风向似乎要有所转变了,这或许可以从一些设计案例中透露出来。这篇文章里,作者就从案例出发,展示了设计趋势的演变,一起来看看吧。

设计趋势来来去去,但一个普遍的趋势已经流行了很长时间,那就是扁平化设计,现在也几乎是无处不在,UI中的按钮,Logo,图形设计等等。

最近感觉设计风向有点变啊,我碰到几个例子感觉挺有意思的,似乎是印证了这波转变。

在这篇文章里,我主要聚焦在UI设计领域,看看设计趋势在这方面都经历了哪些变化。

一、扁平化设计趋势是怎么兴起的?

2013 年苹果推出 iOS 7 后,扁平化设计火得一塌糊涂,界面设计方向一夜之间发生了转变。虽然苹果也是借鉴了其他制造商已经应用的元素,但其作为行业风向标的影响力依然无人能及。

从拟物到扁平,iOS 7 带来了革命性的设计语言飞跃,颠覆了之前 iOS 的视觉风格。蒂姆·库克将其称为 “iPhone 以来 iOS 最大的变革”。

看上图就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了许多元素的 3D 效果,整体扁平了很多。其实改成这样是有道理的,毕竟拟物设计当初是为了让用户更快上手新界面,现在大家都习惯了,设计语言也需要更新迭代了。

十年过去了,绝大部分现代界面设计依然在用这种设计语言。然而,随着设计逐渐追求更多复杂性和立体感(是的,又是3D,回到拟物设计),一些方面也开始出现变化。让我们来看看几个近期的例子。

值得说的是,尽管苹果公司在引领扁平化设计趋势方面发挥了重要作用,但其实灵感还是来自Windows Mobile 和 Android 等产品。Windows Mobile 才是先在主流制造商中第一个用扁平化设计的大厂。

对这段历史感兴趣的可以看看这篇10年前写的文章:https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

二、Reddit 品牌设计刷新

先一起看看最近的一个大厂设计改版案例,Reddit最近刷新了它的Logo。你能从上面的图中看到,相比于旧版,新的设计有了一些3D风格化。

一直以来,扁平化logo是主流,但随着像Pentagram这样的设计大厂都开始探索3D化设计风格,预示着扁平化的时代就快要过去了。

现代的品牌logo设计大多是扁平的,因为这样既清晰易读又方便调整大小。真想看看其他公司接下来会怎么玩品牌设计。

三、MacOS Big Sur 图标

回到2020年,在那年的11月,苹果刷新了它们的MacOS图标风格。我个人认为,这是在细节设计上搭配更多3D效果这股趋势的源头,我在网上看到了很多这样的讨论。

从 Big Sur 开始,苹果就在图标上下功夫,给原生应用图标加料,让它们看起来不那么乏味。你看上面那些,阴影也深了,渐变也多了,整个图标更有立体感。

一看苹果都整 3D 了,不少第三方应用开发商也坐不住了,纷纷改起了自家图标,看起来更立体了。

苹果在界面设计上向来引领潮流,这次的新趋势,又不知道多少公司和个人会跟着玩。

四、Airbnb 新版本设计

Airbnb在最近的夏冬主题设计更新里,玩了不少 3D 和复杂设计。就拿它们新出的“游客护照”来说吧,图标就跟真“书”似的,点开交互还有翻书动画,贼逼真。

游客护照打开后,顶部卡片加了阴影,看着更有立体感,一点都不扁了。

Airbnb 在其他地方也玩儿 3D 了,比如“最受欢迎”那个地方,评分都立体起来了,还有那个改版后的“选月份”的按钮,做得跟真表盘似的。

最后,他们冬天的新版本里,插画也搞起了等角投影风格,给你们看下面他们那个新版本宣传片就知道了。

五、Shopify更新了设计系统

Shopify 对深受好评的设计系统 Polaris 进行了重大更新,换了套新花样!以前那些扁平的按钮,现在缩小了,还更带感了,按着贼舒服。

这次重设计也不是瞎改,当初设计团队说扁平化做能让界面干净,理解简单,用着还效率高。可时间一长,商家们就不乐意了,说这界面整得“没劲”、“乏味”还“单调”。

改设计主要是为了把软件界面打造成 “专业工具”,更加高大上。改动之后,按钮在点击时更爽了一些,就像商家们平时在用的物理按键一般。

探索的2种不同设计风格

总结

上面这些案例展示了现代设计趋势的演变,从扁平化设计向更加注重细节的方向过渡。

扁平化设计固然拥有清晰高效等优点,但现代设计更倾向于展现层次和深度。设计师和开发者应当密切关注这一趋势,并做好准备将相关元素融入自身系统,尤其是在大型品牌和产品中逐渐成为趋势的情况下。

设计趋势真是一个轮回。

原文作者:Chan Karunaratne(本文翻译已获得作者的正式授权)

译者:彩云Sky,人人都是产品经理专栏作家,腾讯高级视觉设计师。

本文由@彩云sky 翻译发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

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

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

日历

链接

个人资料

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

存档