图标设计文章及欣赏

3D与UI结合的设计探索

纯纯

关于 Big Sur 的新图标的讨论很多,很多都在激烈争论。人们对苹果公司没有将完全扁平设计引入 Mac 感到松了一口气,但分歧并未停止。有些人认为这引领一种新的图标表现方式,而有些人则认为这是丑到了天际。



但苹果的设计就是这样,不管你你喜不喜欢,过一段时间他总会流行起来。就像iPhone11刚面世时,背面的摄像头组被无数人吐槽一样,而现在这个设计已经成了高端机的标板。


大家还能想起来UI扁平化设计已经流行了多少年了吗?

从2013年6月11日苹果发布iOS7算起,现在已经将近8年了,这8年时间扁平化像飓风一般席卷了整个UI设计圈,一夜间几乎所有的APP UI都被拍扁了。




其中以Instagram的换标作为扁平盛行时代的里程碑



但扁平化设计的确已经一统江湖太久了,人们似乎已经有点厌倦了。其实设计风格就是这样,并没有绝对的好与不好,只要审美不疲劳,就可以继续流行下去,至于流行多久我们经常会用一个词去形容---耐看度。

扁平化带给我们的是画面的轻盈和设计的高效率,但是缺点也是明显的,场景表现过于单一的问题,设计感体现较为有限,于是很多设计师都在尝试用新的设计风格替代或者进化现在的扁平化设计风格,今天我们就来探讨一下新拟物背景下3D与平面的结合设计,能在UI中擦出什么样的火花。


2014年我的作品-Cache 

https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html


现在这样的风格会被我们称之为重度拟物风格,他不好看了?技术落后了吗?当然不是!只是目前不流行了!

他的特点是强调光影对比与物理质感,色彩都会比较偏“暗”,而且伴随设计的往往是难和慢!刻画一个细节需要很久,在强调设计效率组件化的今天,这种费时又难学的设计方法必然不会成为主流。


当前的UI流行趋势是强调高饱和的色彩搭配(在没有光影细节之下也只有色彩可以玩了),这种风格明显也不符合趋势,被“淘汰”也就难免了。


从设计角度上解析,图标主要是由四方面构成:构图+光影+色彩+纹理

而拟物风格图标在这四方面更加强调构图、光影和纹理,而色彩则是更多去搭配纹理质感,所以你看到多数拟物风格图标在质感上很棒,但是色彩却没有那么丰富。




说到新的拟物风格,这只是一个概念,也有称之为轻拟物,轻偏平,这里并没有通用的称呼和预设的设计方法,一切的UI设计风格都是为产品本身服务,如果新的设计风格能让产品整体体验得到“提升”,哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。



所以当下如果你的产品中想要吸引目光就要有点与众不同的东西,要么是独门的功能,要么就是吸晴的设计。
显然扁平的彩色图标现在已经达不到这个效果了,而以前的拟物又显得有点过时,在这种时代背景下,新的风格必然就会被碰撞出来。


于是乎我们就会看到以下的一些大厂“创新”,你不止能看到轻拟物设计,还能看到“实物”设计......

不得不说,各位设计师们还真是拼了...


“哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。”没毛病!各位加油!


当然苹果BigSur带给我们的图标设计创新更加有趋势意义,这种3D+平面的设计组合方法更加能给我们一些设计启迪和思考,并且这种3D图标与之前的拟物风格有着明显的视觉区别

我用3D重构了一个计算器icon,以此为例来进行分解,如下:

与2D设计方法设计图标一致,都是先勾画图形(建模),然后填色、加材质和灯光,但不同的是在3D环境下,这一切都比2D环境下简单了,而且视觉效果更佳,整体画面感更佳立体,质感更加饱满,并且根据渲染器的参数调节和材质质感的不同,即使是在同一模型下,也能制造出很多种不同的视觉体验。



图标背板的选择上,由于选择了3D作为主体表现,3D背板过于抢视线,图标为了突出主体而非背景,建议使用2D平面背板与3D前景图标进行结合。

3D设计图标的确有一些天然的优势,特别是在质感和光感的表达准确度上,是绝对超过2D的。
但是2D图标在一些风格的设计也是很难替代的,比如线性图标和渐变风格图标。




3D设计的确可以提升UI整体的视觉氛围,并且现在在一些APP中已经可以看到小范围3D案例了(比如支付宝),但是多是以插画的形式出现,其实与产品UI还是有一定距离的。

未来3D设计一定会是UI中大展身手,但是目前的常见的3D设计软件实在是太庞大了,我与许多3D行业的同行聊天的时候,大家普遍的认知是现在的3D软件(包括C4D)的实际最佳场景依然是动画设计,UI的中的3D属于非常轻量级的,用现在主流的3D设计软件做UI应用案例,有点用巡航导弹打蚊子的感觉,而且这个蚊子还是距离一米以内。这有点像当年的PS来做UI,虽然可以完成但是效率不高,学习曲线也高,于是Sketch和Figma这样的产品顺理成章的取代了PS在UI界的地位。


当然趋势不可避免,效率也会提升,且方法总是有的,降低门槛,提升效率一直是我们的追求!

原文地址:站酷
作者:残酷de乐章

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



超全!B端通用界面设计法则全方位科普!

周周


很多产品经理和设计师在设计 B 端产品界面的时候不知道该怎么办,今天笔者给大家汇总了一些 B 端典型界面及其设计原则,帮助大家从容应对界面设计,不再不知所措。

Dashboard

Dashboard 页通常作为产品的首页出现,产品内各种重要的数据和信息都会展现在 Dashboard 上。用户可以通过点击 Dashboard 上的卡片或卡片上某条数据,快速链接到详情,这大大缩短了用户获取信息的路径。产品团队也可以通过 Dashboard 页,向用户传递产品迭代、运营活动等内容。

1. 设计原则

模块独立

Dashboard 是由承载不同内容的卡片组成的,每块卡片的内容都要独立,不该交叉。

有效统计

Dashboard 上所呈现的数据最重要的就是该数据是否为用户真实所需,如果统计数据不对用户产生任何价值,那还不如不统计,否则会干扰用户。

短路径导航

了解用户需要使用 Dashboard 的核心目标,为用户通过 Dashboard 达到数据详情页提供最短的路径导航

2. 工作台

使用场景

将用户需要待办的事项、事项处理的进度等都完整的展示出来,方便用户随时查看,提升用户的工作效率。

核心功能

核心统计数据、待办任务、快捷入口、通知公告等。

设计建议

  • 展示与使用角色日常工作相关模块,并且将重要模块放在首屏。
  • 总模块数量尽量控制在 59 个。
  • 不同的角色需求不同,应提供基于角色的差异化视图。

超全!B端通用界面设计法则全方位科普!

3. 新手引导

使用场景

当新用户第一次使用产品时,为了减少用户的困难和快速完成用户的任务,新手引导页可以将核心操作链路展现给用户。

核心功能

产品介绍、核心功能使用手册、相关内容指引。

设计建议

  • 引导步骤尽量控制在 35 步。
  • 引导语尽量简短并阐明要义。
  • 可以添加视频学习窗口,帮助用户快速上手。

超全!B端通用界面设计法则全方位科普!

4. 监控页

使用场景

监控页是数据可视化页面中的一种,它通过一系列对数据高度概括的图表来展现系统的核心指标。指标监控页的使用者通常是管理者(即决策者),他们需要看到系统整体的运行状态,监控全局数据,从而调整自己的决策。

核心功能

关键指标统计。

设计建议

  • 展示决策者关注的核心指标,并将重要模块靠前展示。
  • 使用合理的图表展现数据。
  • 图表配色要符合数据的特性,例如警示用黄色。
  • 允许用户可以下钻查看详情。

超全!B端通用界面设计法则全方位科普!

5. 分析页

使用场景

分析页也是数据可视化页面中的一种,它通过对系统多维度的详细分析来展示系统的情况,从而使使用者可以发现问题,并尽早找出解决办法。监控页重在总览,而分析页重在明细,因此,分析页的使用者通常是执行者。

核心功能

关键指标明细分析。

设计建议

  • 展示执行者关注的明细指标,并将重要模块靠前展示。
  • 使用合理的图表展现数据。
  • 明细数据模块不宜过多,59 个为宜。

超全!B端通用界面设计法则全方位科普!

表格页

表格页可以处理大量的数据条目,同时可以导航至对应数据的详情页。在表格页中,用户可以查询自己所需要的数据条目,以及对比数据条目、新增数据条目、删除数据条目等。

1. 设计原则

模块清晰

表格页通常由查询区、按钮区、表格区、分页器等模块组成,要保证模块间层次合理与清晰。

数据格式

表格页中最大的模块为表格区,该区域由列组成,列由数据构成,列中的数据格式展现要符合业务及用户的需求,例如“星期三”不能表现成“星期 3”。

数据对齐

对齐方式合理的数据,有利于用户定位数据、分析数据。通常数据对齐方式为数值右对齐,文本左对齐,特殊情况居中对齐。

2. 使用场景

全表格页是最常见的产品界面,全表格页主要由筛选条件、按钮区、表格区、分页器组成。表格区是表格页中的主角,当界面数据只需要一张表呈现的时候,使用全表格页。

核心功能

多字段筛选、操作区、表格区、分页器。

设计建议

  • 将重要的字段和用户使用频率较高的字段放置在表格靠前的位置。
  • 表格中重要的字段和数据保证让用户可以看完整。
  • 表格中的时间、状态、操作栏等,以及其他业务规定的字段,需保持完整展示。
  • 表格上方的筛选条件一次性展示不宜过多,建议 3-8 个左右。

超全!B端通用界面设计法则全方位科普!

3. 左树右表页

使用场景

左树右表页的界面布局基本与全表格页差不多,只不过其多了一颗左侧的树来帮助用户导航。

核心功能

导航树、多字段筛选、操作区、表格区、分页器。

设计建议

  • 导航树上的文字尽量展示完整,便于用户定位信息。
  • 导航树的层级不可太深,控制在 4 层以内。

超全!B端通用界面设计法则全方位科普!

4. 上下表格页

使用场景

上下表格页是表格嵌套表格幻化过来的,通常上表格为主表,下表格为子表,子表展示了主表中某条数据的详情。

核心功能

多字段筛选、操作区、表格区、分页器。

设计建议

  • 主表数据对应的子表数据需要符合逻辑且展现清晰。
  • 若主表和子表均数据量大,则需要都加入筛选条件。

超全!B端通用界面设计法则全方位科普!

4. 左右表格页

使用场景

左右表格页与上下表格页有异曲同工之妙,左右表格页通常左表为主表,右表为子表。

核心功能

多字段筛选、操作区、表格区、分页器。

设计建议

  • 由于表格左右布局,表格列不宜过多,尽量不出现滚动条。
  • 左右表格区分要明显,保证信息正确归属。

超全!B端通用界面设计法则全方位科普!

6. 折叠表格页

使用场景

折叠表格页的出现通常是页面上表格的信息需要分组,每一张表格展现一类信息。

核心功能

分组、操作区、表格区、分页器。

设计建议

  • 建议加上分组的标题及描述信息。
  • 每个表格为一个模块,建议模块可全部展开与全部折叠。

超全!B端通用界面设计法则全方位科普!

表单页

表单页是用于信息添加和录入的页面类型,用户根据系统的要求将必填字段信息填写完成,从而提交给系统,由系统接收并输出信息。

1. 设计原则

控件合理

通过选择合理的数据录入控件,及通过合理的信息组织形式,帮助用户可以快速完成数据录入的任务。

明确好用

表单页面中,每个表单项都要做到自身体验的明确与好用,例如针对一些有通用值的表单项建议设置默认值,针对必填项要明确标明,针对表单项标题、错误提示要明确传达含义。

清晰反馈

表单录入完后,允许用户进行返回、取消、清空、保存等操作,并且操作后提供明确的反馈,例如保存成功、保存失败等。

2. 基础表单页

使用场景

表单项较少,表单信息直接平展即可,表单录入任务简单且快速。

核心功能

表单项、填写说明、操作按钮区。

设计建议

  • 表单项尽量单行纵向排列,引导用户纵向阅读。
  • 在界面空间有限时,表单项可多个组合在一行中,进行多列排列,建议不超过 3 列。
  • 表单项对齐方式一致,保证用户视线流舒适,高效完成数据录入。
  • 表单整体要保持在用户合理操作范围,居左或居中。

超全!B端通用界面设计法则全方位科普!

3. 高级表单页

使用场景

高级表单页通常需要用户填写大量的信息,这样大型而复杂的数据录入任务需要被拆解为多个部分进行。

核心功能

分组/卡片分组、表单项、操作按钮区。

设计建议

  • 任务的分组需要有层层递进关系,而不是无序的分组。
  • 如果任务分组过多,最好不要超过 5 组,在 25 组之间较为合适,可以采用锚点定位的方式来帮助用户定位信息。

超全!B端通用界面设计法则全方位科普!

4. 分步骤表单页

使用场景

当表单填写有相应的步骤顺序时,采用分步骤表单较为合适。

核心功能

步骤条、表单项、操作按钮区。

设计建议

  • 若步骤间有很明确的顺序关系,需在相关位置进行明确的提示。
  • 若有些步骤为非必填,建议也做出合理的展现。
  • 步骤不宜过多,在 25 项为宜。

超全!B端通用界面设计法则全方位科普!

5. 带树表单页

使用场景

当表单块归属不同的分类时,需要使用带树表单页去处理。

核心功能

导航树、表单项、操作按钮区。

设计建议

  • 分类超过 10 项,且分类标题内容较长时,建议使用树导航。
  • 分类带有层级时,建议使用树导航。

超全!B端通用界面设计法则全方位科普!

详情页

详情页的作用是向用户展示一个对象的完整信息,它的主要作用是帮助用户信息浏览,同时允许对详情页整体的数据或某部分数据发起编辑等操作。

1. 设计原则

层次分明

针对信息较少的详情,平铺展示即可;针对信息量大的详情,需进行合理组织,保证层级分明。

结构相近

针对详情信息的模块化组织,要求尽量模块的结构相似,减少复杂性,降低用户的理解成本。

2. 基础详情页

使用场景

基础详情页信息量较少,信息复杂度低,直接平铺展示即可。

核心功能

详情信息。

设计建议

  • 建议呈现在一张卡片中,直接通过标题进行区分。
  • 字段与内容要明显区分,不可糊在一起。

超全!B端通用界面设计法则全方位科普!

3. 高级详情页

使用场景

高级详情页需要展示的内容量较大,且复杂度高,需要拆分为多组来帮助用户浏览信息。

核心功能

卡片、分组、详情信息。

设计建议

  • 分组维度要合理,保证一个维度讲一件事情。
  • 若分组模块大于 5 项,建议使用锚点定位。

超全!B端通用界面设计法则全方位科普!

4. 可编辑详情页

使用场景

详情页中有部分字段由于业务需要,会进行修改。

核心功能

详情信息、可编辑信息。

设计建议

  • 可编辑字段通常有两种情况,一种为常显编辑,一种为点击编辑。用户对常显编辑字段操作时,页面需要对是否编辑过做出适当反馈。
  • 可编辑样式尽量统一,减轻用户认知负担。

超全!B端通用界面设计法则全方位科普!

我们如果能做到对 B 端通用型界面了然于胸,那么在面对用户需求时才能从容应对,举一反三。不断总结和抽象,是我们应对各种需求的不二法宝。




文章来源:优设网    作者:知果日记


分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



2022追波设计流行趋势

周周

为了保证这篇文章的质量,追波年度的每个作品都超过550赞。在此原则下挑选了828件作品,作品总的大小为2.2G


相比于《2020年追波设计流行趋势》多出了328件作品。


总结

从挑选出的828件作品中,排名前十的作品中9件为B端设计,另一件作品也是B端产品C端化的产物。其中:

B端界面设计占比476/828,57.4%;

C端界面设计占比180/828,21.7%;

视频动效作品占比223/828,26.9%;


明眼人都能看出其中的比重关系,B端设计再次大火,为什么是再次?因为B端设计之前火过,只不过没有赶上一个好的时代,在C端设计风光的十年里而忽略了其存在。随着C端市场饱和与数字化的浪潮下,实体经济、ToB 、ToG的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计,相信今年视频动效作品占比还会再次提升。



追波年度最佳作品

追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪,作者来自越南西贡,最佳作品截止目前355K浏览量,2933个赞


为什么看似平平无奇的作品却能获得追波年度最佳作品呢?既不是C端也不是纯B端的作品,更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮,你可以理解它就是一个平面作品,一个字体加几何形体构建的作品,为了丰富画面的层次,让画面更加的活泼采用了多彩加几何色块,让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出,这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。


MetroUI是Windows8的界面设计语言,在2010年至2013年间曾经风靡一时,那也是移动互联网的发展元年,现在国家推行实体经济、数字化带动To B 、To G 的发展元年,通过几何色块(MetroUI)实现B端产品与C端设计风格的传承与衔接,你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风,毛玻璃的多彩高斯模糊渐变风,年度作品当之无愧。


最后来看下按钮的设计,正常的按钮要么文字加色块,要么左图标加右文字,它设计成左文本加右图标,更加注重信息的可读性和易读性,也体现B端设计重功能和交互体验,视觉点到为止的设计理念。


下面我们来欣赏年度最佳作品里面的流行趋势吧。


易读性(停顿感)

字体三原则:可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章,肯定设计文章的内容可读性更好。易识性是用在字体设计上,不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关,因为我们都需要编排文本。当我们小时候写作文时,不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感,更加适合用户阅读。


通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容,丰富文本内涵。比如情侣间表达爱意时会输入文本,“我爱你”、“我Love你”、“我ai你”、“我❤️你”,哪个更加会有情感共鸣呢?不言而喻,相信你心中已经有答案了。



曲线

在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一,第一个设计目的就是突显文字,其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中,签字的文本都是手写体的感觉,手写体对比电脑的机械字体会带有一种人文气息,也会让两者之间产生一种对比、矛盾


除了突显文本外,曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试,通过真实用户眼睛浏览界面显示对应的热点图。



多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的,多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程,多彩渐变多为冷暖对比来制造画面的冲突,需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。


多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新,给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上,为了更好的传达信息需要去设计与内容相匹配的视觉风格。




B端界面设计


侧边栏Sidebar

B端设计的火爆带动了B端相关模块设计,更多的人也愿意尝试B端相关模块设计,侧边栏作为产品架构中重要的导航系统,好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果,也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计,而是一套实用美观可落地的设计。



仪表盘设计

仪表盘设计是一个很好的隐喻,想象一下开摩托车或汽车主驾驶前面的屏幕,汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态,大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据,团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同,自定义的仪表盘也各有差异。重要的是突显数据和业务状态,需要分层级系统性去思考和设计。



流程设计

复杂的事情简单化,简单的事情标准化,标准的事情流程化,流程的事情自动化。流程设计是每一个企业核心功能和业务,可自定义的管理流程系统搭建也是B端产品设计的难点,需要对业务高度抽象,让每一个业务人员可自定义的流程才是好的流程设计。



B端C化

B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐,国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外,由于业务的发展,B端产品也开始移动化、智能化,国内主流还是通过小程序、H5来现实B端产品C端化



轻代码化

轻代码化是一种低代码赋能无代码的方式,弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时,又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统,轻松实现多元业务场景的数字化管理


轻代码化将功能进行打包,升级成全局可以用的配置,技术人员配置好后,业务人员在应用编辑时直接选择使用模版,绑定对应的变量即可使用。




界面设计技巧


人文气息

为什么人加色块的组合方式能流行起来?还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外,还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起,这种人文气息和价值观已经就不言而喻了。


当然企业也需要进行营销,抓人眼球。几千年来的遗传证明了,人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。


这种风格更适合大公司,国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合,而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。



毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”,完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权,具体安装购买方法可以上“某宝”就可以轻松搞定,真香。




轻拟物

轻拟物这几年一直流行,在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物,其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光(环境光)五个部分的处理。写实三维的图标等设计更适用于简洁的画面中,扁平等设计更适用于复杂一点的界面中,比如B端产品界面中的功能图标。轻拟物可使用的范围更广,效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。




简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则,在B端产品界面中更加需要简洁设计,我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加,产品界面的编排如何取舍,如何保证界面的简洁是设计师需要深度思考的问题?如何与上级沟通?该功能是否可做可不做?是否需要埋点用数据说话?如果只是一味竞品有我们就需要有,功能不断累加只会让界面越来越重。



几何图形

几何图形和几何插画有异曲同工之妙,几何图形多为产品界面和宣传内容的抽象,产品界面的几何图形多为占位符形式,加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中,几何图形、几何色彩不失为最好的突破口,相信今年追波B端产品的视觉设计一定会更上一个台阶。



几何图形另一个场景化的地方就是品牌,作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程,品牌设计的技巧基本还是以几何图形为主,至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。



暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大,如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳,提高在夜间使用的可读性


在设计暗黑主题时,不能为了突显视觉上的逼格,而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则,即正文和背景之间的对比度应至少为15.8:1。按照此标准设计,可读性都还不错。这里介绍一个插件“Stark”(Figma、Sketch、XD、Chrome插件)用来测试界面的对比度。



模块化(组件化)

为什么叫模块化,而不叫组件化,组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面,但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提,是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一,它能提高设计师的系统化思维、逻辑思维和抽象思维能力


产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的连接接口和一致的输入、输出接口的单元,相同种类的模块在产品族中可以重用和互换,相关模块的排列组合就可以形成最终的产品。通过模块的组合配置,就可以创建不同需求的产品,满足客户的定制需求 。




插画

插画作为设计的一大品类,不同的插画师都有自己擅长的风格,本质是都有自己的个性,但是在产品设计中更多是需要共情、共性来讲故事,表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合,插画不会过时,而是需要结合当下和产品找到最匹配的设计风格。



几何插画

几何插画算是插画简化的一种表现形式,人和物的形态不再写实,而是抽象成几何图形拼凑的感觉,同时保留人物形态的神韵。加上几何色块与人物交互形态的表现,传达出简洁、科技的现代感。难点还是在人物形态的表现上,平时多练习练习速写还是很有必要的。



线面插画

线面插画最近一两年非常流行,准确的说是非常适合。首先线面插画主要是由线条和块面组合而成,用块面表现人物形态时某些结构会表现不出来,这时候用线条简单勾勒后,结构就会清晰明了。其次当线面插画运用在界面上时,可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时,还能保持界面的干净整洁。




动效


微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计,微交互和动效设计是绕不开的,UI界面设计通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪,取悦用户。C端产品微交互和动效已经很成熟了,一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品,还需要给前端工程师灌输微交互和动效的设计价值,共同打造产品体验细节。



Mg动画

Mg动画需要很好的节奏感、韵律,每一个场景动画都需要其中的元素进行连接变化,让转场动画更加自然,MG人物动画通过点线面的动效变化让画面更加有趣、自然,通过粒子效果让特定场景无限循环会让人更加印象深刻。




三维


三维图标

MacOS Big Sur系统图标的更新带动了三维图标的流行,三维图标的应该场景还是需要有较大留白空间的界面,因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上?设计师应该保持开放多元的视角。设计本身也在不断的演化融合,存在即合理。合适最重要,它们都会有适合自己的场景和设计价值。



轻三维

为什么轻三维在界面设计中占有一席之位?一个是设计师不断追求差异化的产物。另一个是更好的表现内容,并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素,比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等,这些都是用户日常使用系统软件常见的元素,通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角,结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加,特别是当下流行的毛玻璃效果,玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光,局部的渐变色或环境光更佳出彩



P4D(PS+C4D)

P4D是PS加C4D的设计表现技法,也是视觉设计的最后一个环节,通过PS对C4D的渲染图片进行调色,利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵,还可以利用PS强大的合成功能,将渲染图片与图片素材进行合成,来表现画面的视觉度,当然三维软件比较难实现的水、粒子、烟花等效果,也可以通过PS的后期合成来实现,这也是P4D的强大之处。



卡通IP

卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟,卡通IP也从传统的纯PS手绘技法,转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS(静态)/AE(动态)调色


卡通IP火的本质更适合做营销,相比于品牌或Slogan,卡通IP具有亲和力和画面感。随着各种手办行业大热,受互联网大厂影响下,卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人,也可以通过绘制好二维,一套三维可以选择外包完成。


对于UI设计师来说学习是有成本的,暂时并不是必备技能,如果喜欢完全可以学习,从设计差异化的角度来看三维视觉确实有一定的竞争力



三维动画

C4D三维场景动画通过构建实物和场景模拟生活中的现实场景,会让用户体验真实感,三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感,未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势



总结

上一次写追波流行趋势还是两年前了,通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火,随着最近的互联网裁员潮大家也慢慢的进入到反思层,客观的看待和理解这个真实的世界,曾经的流行趋势也需要慢慢的沉淀下来。


存在即合理,趋势流行稍纵即逝,注定是不长久的,只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注,因为哪有什么所谓的创新,只不过是旧元素的重新组合,并符合当下这个时代人的审美需求。香奈儿的“时尚易逝,风格永存”大概就是这个意思吧。


6000多字的设计流行趋势,希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。



文章来源:站酷   作者:水手哥

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

图标篇 | 图标设计必备的基础知识

分享达人

前言


做好图标设计是一个入门级UI设计师的必备技能之一,图标是界面中非常重要的组成部分,在实际的工作中,即便是一些工作多年且有一定经验的设计师,也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所起到的作用不同、风格也不同、其设计思路更是有所区别,例如金刚区、分类、标签栏、服务工具等。

用图标准确的表达出实际含义,仅仅学其「形」是不够的,需要对图标有较为全面、系统的认识,了解图标的相关概念、正确的绘制方法及处理好一系列的细节,本篇文章将介绍图标设计的具体方法及要点,帮你规避掉一些常见的问题,让图标设计有理有据。





本期大纲


一、图标的定义

二、常见的图标风格

三、性格与气质

四、设计规范与流程

五、常见问题及注意事项

六、图标资源

七、总结





一、图标的定义


1 什么是图标?

图标是一种具有高度概括性的图形化标识,在界面中与文案相互支撑、搭配使用,隐晦或直白的表达内容的具体含义、属性特征、形象气质等丰富的视觉信息。

从概念上来讲,图标可分为广义、狭义两种,广义指的是现实世界中的图形符号、且有明确指向的含义,而狭义的图标指的设备界面中的符号,这些设备泛指承载互联网产品的载体,如手机、电脑、iPad...等。在UI设计中主要具是针对狭义的概念。

图标设计是一门学问,在我们的认知中,通常将图标理解为某个概念的抽象图形,通过设计清晰易懂的图形传达出比文字更高效率的信息,同时提升界面的美观程度。想要将图标设计的更加出色,则需要频繁练习、不断试错、持续探究并尝试新的风格,所以很值得我们花费大量的时间去钻研练习。


2 图标的基本特征

一个界面是由文字、图标、几何图形、图片(音频、视频)组成,从UI设计师的角度,相对来说,其他三种元素大多运用到的是排版技巧,而图标则是需要绘制、创作的元素,在没有图标的情况下,纯文字也可以代替,可为什么贵还要费力费时的设计图标呢?原因主要有两点:

首先,图标作为一种图形符号的存在,跟文字的复杂程度相比,在识别效率上有着先天的优势,因文字需根据语种、长短的不同,所占用的界面空间资源就不同,在文字较多的情况下,大大减低了用户浏览速度及信息传达的效率,固图标将文字信息进行了浓缩。好的图标不仅易于识别、效率更高,且让界面更加简洁,所以我们常见的图文结合界面,绝大多数都是图标在上、文字在下,或者图标在左、文字在右,这些设计足以说明图标视觉传达的优先级高于文字。

其次,不同风格、样式的图标能让界面看起来更美观,提高用户的视觉舒适度。设想一下,如果界面没有任何图标的点缀,即便用户也能使用,但看多来多少都有些枯燥无味,全部用文字来理解内容还容易引起视觉疲劳。





二、常见的图标风格


1 扁平风格

扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义,并通过不同的色彩体现出不同的视觉效果,最常见配色有以下几种:

◇ 单色:简洁、清晰视觉效果,常见于基础功能图标。例如:B端功能入口,移动端个人中心、二/三级页面的工具栏等,也有很多app的金刚区利用底色块衬托反白的图标。

◇ 双色:是很常见的功能性图标,至少由两个以上的元素组成,在单色的基础上加以色彩点缀,让本身就不是很突出的元素不再单调,如果融入品牌色,能提升整个界面品牌调性,适用场景跟单色图标相比则范围更广。

◇ 多色:至少由三种或以上的形状、颜色组合而成,常用于金刚区、产品分类列表、定制化菜单等。

◇ 渐变:渐变色的图标显得较年轻化,可以是单元素的渐变或多元素的渐变组合,能映射出一种活泼、热烈的氛围。例如:视频、直播等娱乐类型的APP,或车载UI等。

◇ 不透明度:调整图标中某个元素的不透明度,可在不变换色系的情况下丰富配色细节,还能与底色融合的更加细腻,解决多色渐变视觉跳跃的问题。

另外,在UI界面中,扁平化风格图标使用最多的当属线性、面性、线面结合这三种类型。


1)线性

线性图标主要是通过线条描边勾勒出来的图形,在界面中的尺寸普遍偏小,其线条不能过于复杂,否则将会影响辨识度,看似不多的简单线条搭配不同的色彩,则有很大的调整空间。


2)面性

面性图标主要通过剪影的形式来制作抽象的形体,相比线性图标则面积更大、视觉层级更高且更有体积感。通过不同色彩填充、切割手法塑造不同的设计感,以达到多种视觉表现的效果。


3)线面结合

线面结合的图标既有线段或轮廓、又有填充的色块,相比纯线/面性单一样式的图标则细节更加丰富,如果把控到位,会有更好的视觉效果及信息传达的效率,也不失趣味性。


2 拟物化风格

拟物风格的图标主要通过细节和光影、根据现实世界中的物品塑形打造出图形立体效果,非常考验设计师的造型绘制、技法表现能力。这种风格的图标有着极强的代入感,能让用户快速领会图标所传达出的意图及气质。

因为拟物化图标信息元素的高复杂度及突出的视觉效果非常抢眼,在页面中频繁出现会成为干扰其他信息的存在,游戏类应用中使用的非常普遍(不过多赘述)。在其他类型的应用中,大部分出现在营销类型的界面,例如专题页、成就榜、会员中心等。


3 轻质感风格

跟拟物化图标相比,轻质感就不会有太多复杂的元素,主要通过各种色彩渐变、发光、投影等图层样式体现出非常柔和的立体感,整体风格偏年轻化,给人轻盈、简洁及精致的感觉。在设计过程中,请使用干净且和谐的配色,主要使用在界面较大区域的位置。


4 磨砂玻璃风格

不仅仅是页面背景有毛玻璃风格,图标的毛玻璃风格也很出彩,主要通过背景模糊、叠加、剪切图层来实现(网上很多教程)。轻量渐变搭配毛玻璃的朦胧感,可以体现出图标的质感与神秘感。

除上述这几种风格的图标之外,还有例如2.5D、3D、像素风、新拟态...等,但在UI设计中并不常用,就不一一举例说明了。





三、性格与气质


1 性格走向(描边/拐角)

力量型:粗线条、直角拐点,给人一种力量、狂野的感觉,常用于体育、健身、机械类型的产品;

可爱型:粗线条、圆角设计,看起来活泼可爱,给人舒适、饱满的感觉,在儿童、教育类产品中很常见;

严谨型:细线条、直角拐点,看起来工整、严谨,中规中矩,适合政府、法律类型的产品;

精致型:细线条、圆润的拐角,柔和、干净、纤细且精致的感觉,很适合极简风格的设计,在艺术、金融、珠宝等奢华类产品中比较常见。


2 动态效果

如果想要突出金刚区、工具列表中的某个功能入口,将图标设计成动态效果,既能保持整体图标风格的统一、又能单独突出功能的重要性,起到强调的作用,用来吸引用户的注意力,引导用户操作,提升其点击率。切记动效图标不能过多,当什么都突出了等于什么都没有突出。

其次,在年轻化、娱乐类型的产品Tab栏中的图标切换时,加入动态效果,可起到画龙点睛的作用,还能通过动效表达出不同的情绪,降低切换时的枯燥感,好的Tab动效能传达出整个产品的气质。

最后,如果有类似运营或短期内的活动,需要吸引用户注意但又不适合固定在界面中的某个位置,这时可以设计一个动态图标悬浮在设备某个位置(注意用户体验及交互原则),既不过多的占用页面资源,还能同时显示在多个界面,一举多得。

(动效图标:@墨染ART 授权)





四、设计规范与流程


遵循图标设计规范有利于设计师之间的合作及接下来的设计,以及产品整体图标风格的统一性,起到约束的作用,即便在更换设计师的情况下,也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范,应从哪些方面入手,以便接下来的图标设计顺利进行。


1 网格尺寸比例

为了保持图标元素的平衡,尺寸大小需要保持一致,通常我们会建立基础网格尺寸进行图标的绘制,常见的网格尺寸有16、24、36、48、64、128、512、1024,这些网格尺寸并非固定,也会根据设计中的特殊尺寸而变化。

一个图标系统包括网格尺寸和图标元素两部分,设定好网格尺寸后,就需要用keyline来约束图标形状的长、宽比例了。最终设计的图标大小并不是跟随网格尺寸,而是根据不同的形状占比受制于图标keyline,最终形成统一的视觉大小。

从上图中可以看出,相同尺寸的图标在真实的视觉中相差很大,这就好比一个100像素的圆形、跟100像素的方形相比,站在逻辑角度,大小是相同的,但在视觉上,一定是方形显得更大。所以我们常说的图标大小相同,并非真实尺寸,而是视觉感受。


2 图标keyline

为保持图标视觉上的一致性和平衡感,需要先绘制keyline用来指导、规范图标设计。keyline由圆形、正方形、长方形-横、长方形-竖、三角形和对角线组成,网格的大小需保持4的倍数,便于不同尺寸的图标都能适配,可使用24*24px的网格尺寸为基准,其他尺寸的图标可通过增加倍数以此类推,如48*48px、72*72px......

下图是以24px尺寸的网格参考基准示例(出血为2px):


3 确定图标风格

根据产品属性及目标用户并结合应用场景,找到最符合自身产品性格、气质的图标设计风格,例如健身应用属力量、粗矿类型,圆角、曲线适合女性产品等,在前面的「性格与气质」中有举例说明。


4 图标绘制

经过图标风格的确定,图标细节便是接下来绘制过程的核心部分,对线性图标来说,注重的是线条的粗心,而面性图标则注重各小图形之间的距离,所以在绘制时,需要保持线条、间距的统一,方便后期的图标更新迭代。


1)线性描边粗细

我们以iOS@2x为基准(避免@1x的3px描边变成1.5px,小数点),可适配最2px、3px、4px最常用的描边粗细,4px视觉较重,用于优先级较高区域的功能性图标,2px看起来会显得更加精致,在设计中,还需根据产品的行业属性及调性来确定描边的粗细,并统一起来。


2)面性正负形间距

面性图标需要确保每个单独的形状之间有足够的间距,以24px大小的形状为例,其间距不能小于1px,以此类推,虽然未规定上限,但间距也不宜太大,否则无法相互组合关联,以实际视觉的舒适度为准。


5 创意提取

根据行业类型及风格进行创意设计,如线性统一断点、融入品牌基因、单个元素倾斜、节日氛围烘托、修饰元素等,为图标塑造灵魂或传递更多信息而进行的二次创作。





五、常见问题及注意事项


1 识别性

图标存在的意义,主要是为了快速传递信息,不能让其成了无用的装饰品。随着互联网的普及、时间的积累,人们对一些线上图标信息的隐喻已根深蒂固,早就形成了惯性思维,所以我们设计的图标必须要符合用户的认知,能让用户快速理解,即便出现个别特殊情况,也要用文字清楚的标注说明,否则一旦让用户产生疑惑,图标就起了负面作用,在很大程度上影响使用体验。符合认知的图标能让用户下意识的理解且接近心理预期,减少学习成本,提升使用效率。


2 简洁美观

图标是将现实世界中的事件/事务用抽象的图形表现出来,如果过于追求完美而设计的太复杂,还不如直接上图片来的快,所以不能过于展现真实物品的细节,最终设计出正确而不失真的图标尤为重要,这样既能用于传递信息,又便于用户快速且清晰感知。


3 视觉对齐

为确保视觉平衡,异形元素在使用系统自动对齐后,会有一定的偏差,需手动微调进行视觉对齐。


4 保持一致

针对大型项目,要想整个家族的图标更加和谐,保持相同的样式及设计原则着实不易,尤其是在多人完成设计的情况下,事先有一个清晰的设计原则和规范是必不可少的。图标都有着对应的视觉重量,例如描边粗细、填充模式、繁简程度等属性,需要做的就是控制好这些关键因素,让整体看起来视觉重量相同且能相互关联组合到一起,保持所有图标的一致性。


5 最小间隙

单个图标的各元素之间要有呼吸感,需要适当的留白,如果描边过大,整个条看起来感觉像糊成一团或臃肿不堪,如果存在类似问题,可通过减小描边值或降低图标的复杂程度来解决。


6 使用2的倍数

以偶数为单位的设计便于数据的计算(2的倍数),例如正负形间距、描边值等,在iOS@2x设计下,@1x也不会出现小数点。在移动端设计中,最小的图标为24px,可被2、3、4、6、8、12整除,也是可以被整除最多的数值,因此,可灵活的等比缩放。


7 延展性

即便做好了前面的一切,图标设计工作也并未完成,需要做的是持续测试图标的可用性,做好后续的完善与优化,没有最好、只有更好,以确保上线后的效果和后续的迭代。





六、图标资源库


阿里巴巴矢量图标库:https://www.iconfont.cn/,90%以上常见的矢量图标下载;


飞书官方图标库:https://iconpark.oceanengine.com/official,海量资源可在线修改,调整描边、填充、单/双/多色、端点后下载SVG格式图标。

虽然上述图标资源基本能满足我们的日常设计所需,但仅仅只能是作为参考而已,一味的图方便、投机取巧只会毁了自己的动手、创新能力。





七、结语


图标设计是一个非常庞大的版块,且有很多个分支,例如:金刚区、标签栏、应用图标...等,每个分支都有自己的一套设计法则,我们需要在不断的学习与创新中获得更多经验。一篇文章不足以道出图标设计的精髓,但可以在不断沉淀、相互探讨、持续的学习中一起进步。

下篇「图片」文章再见。

原文地址:站酷
作者:飞鹰Article

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




按钮篇 | 做好设计细节,你需要了解这些!

分享达人

前言


说起按钮,很多做设计的小伙伴是熟悉的不能再熟悉了,它是我们在设计界面时最常用、最重要的组件之一,也是易被忽略的元素之一,所以在设计之前,做好对按钮组件的认识、了解非常有必要。

从我们有记忆认知开始,按钮就时刻在和我们打交道,墙上的电灯开关、电视机的调节按钮、遥控器的按钮等等,这些物理按钮不仅仅是当下UI按钮组件的前身,且不会消失,依然会有很多非数字化的产品及机器设备在持续延用,不管如何演变,基本不会脱离实物参考。按钮最吸引我们的莫过于通过简单触摸就能轻松满足自己的行为需求,按钮设计的直观性及易用性会影响着人们完成一件事情的意愿及效率。

在UI设计中,如何完美的避开问题、把按钮设计的更好,是每个设计师需要深思的问题。按钮设计的好坏,将直接关系着用户引流、触发行动、产品转化率等至关重要的问题。另外,精致的按钮也会让整个页面的视觉提升档次。本篇文章将对按钮作出解析,介绍在设计按钮时需要着重考虑的因素及设计标准,并将理论付诸于实践。





分享目录


一、按钮的作用

二、按钮的类型

三、按钮的状态

四、按钮的大小及风格

五、常见误区及避坑指南

六、总结





一、按钮的作用


1. 什么是按钮

在UI设计中,按钮是一个明确指示交互行为动作的组件,主要用于触发某一个即时操作,很多时候,我们需要采取下一步行动或返回到上一步,都要通过按钮(部分场景可用手势交互)来完成。

在视觉层面,按钮的组成看起来很简单,由一个底色块/线框加上一组文案即可组成,但真正要将按钮设计好,仅停留在视觉层面并不严谨,其大小、位置、色值、文案...等每一个细节的处理都关系着用户的操作体验,下面的这几种情况大家肯定有碰到过:


2 按钮有什么用

通常,我们在设计按钮之前,需要详细理解按钮所存在的意义,哪里该加、哪里不该加、为什么要加,主要从以下几点来体现按钮的作用:


2.1 功能性操作

这种按钮很常见,比如展开、收起、下拉、加减等,按钮视觉较弱,重点强调该页面的功能,突出主体信息,在操作之后会发生一些交互变化,这类按钮主要起到功能形态的作用。

2.2 明确引导下一步操作

当用户完成一个页面的内容填充或信息确认,就会失去视觉焦点,而下一步按钮就会聚焦视觉重心,通过文案告知用户下一步该怎么做,常见的有保存、下一步、支付、确定...等。

另外,用户需要完成某个任务,但同一个任务流程的信息、种类较多,这时就会通过分步骤、分页的方式,并在每个步骤的末尾增加一个能起到上下衔接作用的按钮,明确引导用户进入下一步操作,以此来提升用户完成整个任务的成功率。

2.3 培养行为习惯

如果在操作某个按钮之后得到了一定的利益,且能持续为用户带来价值,那么不妨将这个按钮设计的更醒目,并在同等级但不同的地方保持视觉的统一,持续培养用户点击习惯,当用户下次再看到类似这种按钮时,惯性思维就会引导点击。


3 按钮的组成

在大部分的认知中,最常见的按钮就是一个底色块加上一句文案就完成了,殊不知一个好的按钮需要经过很多细节的把控,才能发挥出按钮的最大作用。例如文案的长短/边距、容器的大小/圆角、填充色的主/次之分...等,下面我们来看看一个按钮到底是由哪些属性、元素组成。

◇ 圆角:传达出按钮的气质,决定用户的视觉感受,最常见的为小圆角,也有较为严谨、力量型的全直角、卡通可爱、年轻化风格的全圆角。

◇ 图标:用于按钮含义的图形化抽象表达,例如加载中、编辑;

◇ 容器:整个按钮的载体,容纳文案、图标等元素;

◇ 边框:确定按钮的边界,常用于次级按钮描边;

◇ 文案:用文字表达按钮的含义,精简文案;

◇ 背景:表达按钮的当前状态,对按钮合理的使用主体色能有效传播品牌气质;

◇ 投影:让按钮具有层次感,配合渐变背景能体现出微质感的效果。





二、按钮的类型


1 功能类型

按照功能属性分类,可将按钮类型分为流程控制和功能选项操作。

流程控制:常见的传统按钮,如支付、下一步、确定、保存等,容器承载着图标、图标+文案、文案。

功能选项:开关/加减控件、标签栏/分类、状态切换等,操作之后只针对当前页面做出属性的调整,不涉及流程的变化。


2 视觉样式(横向)

视觉样式有所区别,在不同的页面可能存在同等级的权重。

常规按钮:最常见的按钮,当同一个页面出现多个常规按钮时,会有主次之分;

虚线按钮:常用于添加、上传等操作;

文本按钮:仅用文字作为触发点,部分会用主色、右侧箭头、下划线等方式突出。


3 层级分类(纵向)

高权重:带有填充色的主操作按钮,当同一个页面存在多个按钮,只允许存在一个高权重(主操作)按钮;

中权重:带边框轮廓的概述按钮,同一页面可存在多个中权重的按钮;

低权重:纯文本按钮,以及浅色填充+浅色文字的按钮,同一页面可存在多个低权重按钮。





三、按钮的状态


在设计按钮时,为了体现按钮不同的具体含义,以及后续设计、开发的统一性,明确按钮交互样式是设计过程中不可缺少的重要组成部分。设计师需要在不干扰界面视觉的前提下,对每个按钮的样式、状态有清晰的定义,与其他元素、布局区分开来,以确保按钮的可供性。常见的状态主要有以下几种:

◇ 待激活状态:需要完成一定的操作、或有一个以上必要的前置条件后才允许交互;

◇ 正常状态:按钮的正常显示状态,可进行交互操作;

◇ 点击状态:触碰效果,表示按钮正在进行交互且未结束,会在正常状态的基础上增加一个纯黑色不且透明度为10%的蒙层,交互完成后,即会引发此按钮的真实作用;

◇ 加载状态:产生交互后没有立即执行、或系统需要一定的时间才能执行完成;

◇ 禁用状态:系统默认暂不允许操作、或需要用户离开此页面去完成一定的前置条件才能使用。





四、按钮的大小及风格


1 按钮的尺寸

在PC端设计按钮时,因为鼠标的精准点击,我们通常会将按钮设计的小一些,同时也能让整个界面看起来更加细腻,只要不影响操作,36px~48px范围内的按钮是比较常见的。但移动端的按钮设计,我们要更多的考虑到物理尺寸,即手指(指尖)在操作时需占用的实际范围。

iOS的设计规范中,将按钮的最小点击区域规定为44pt,一旦小于这个数值,操作时就会出现精准度较低的情况,导致操作失误或无效。

在实际的iOS界面中,很多应用在设计按钮时并未严格遵循最小44pt的这个标准,例如很多一、二级界面的次级功能入口,有些连30pt都不到,也并未对用户造成多大的影响,可能是对应的功能权重、用户点击频率都非常低的原因,还有一部分文字按钮,其本身永远都不可能达到最小的触控标准(触控热区加大即可),所以关于按钮的尺寸大小并非规定的很死板。

费茨定律告诉我们「目标尺寸越大,移动至目标所花费的时间就越短」,所以,在满足手指触控范围的同时,还要根据所对应功能的权重占比来适当调节按钮的大小。不难理解,当某个元素的尺寸越大就越吸引眼球,就更容易被视觉捕捉到,也更容易被「点击」,精准度被降低的同时,也减少了用户的操作成本。

我们以8像素栅格系统、iOS的2倍图为例,较为常见的有:小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。


2 按钮的风格

在UI设计中,几乎每个页面都存在按钮,样式、种类也有很多,但设计风格常见的也就几种,例如扁平化、微质感、拟物化、新拟态(概念)...


2.1 扁平化按钮

通常在容器中填充一个纯色即可,没有多余的视觉干扰,操作简便,这种类型的按钮一般在应用中用的最多。例如:工具型应用、B端应用等。

2.2 微质感按钮

相比扁平化,填充渐变色再加上浅浅的投影,不仅能保持信息内容的简洁、让用户产生更强的操作欲望,还能让页面具有品质感,更加耐看。例如:年轻化应用、娱乐类应用、儿童应用等。

2.3 拟物化按钮

大多设计的很立体,3D质感、属性样式丰富多彩,参考现实世界中的事务或摄取应用场景中的某些元素,使其更加逼真,有较强的代入感。例如:游戏类应用、H5专题、运营banner等。

2.4 新拟态按钮

2021年风靡一时,几乎无人不知,但要想落地却不太现实,实用性不强,也只能在飞机稿中出出风头,随着时间的流逝,逐渐销声匿迹,不知哪天会不会经改良后再次面世(当初扁平化问世,也是几经波折,经多年改良才逐渐被大众所接受)。目前只有少数工具类应用使用了新拟态,例如:计算器、AI设备控制、有道云笔记等。





五、常见误区及避坑指南


1 主/次操作层级分明

当同一个页面出现多个按钮时,只允许存在一个主操作按钮,其他不做特别设定。当然,如果次要操作较多,也不益过多的出现次级按钮,可根据权重降级处理,以小图标或文字按钮的方式呈现。


2. 统一样式

主/次操作按钮要统一样式,用户需操作时,尽可能的减少其思考及选择时间,按钮应该迎合用户固有认知及惯性思维,节省时间成本,提高操作效率。


3. 圆角值

在大多数界面设计中,我们通常所见到按钮还是小圆角和全圆角居多,也有部分按钮完全直角,需要根据产品的行业属性与气质来选择最合适的圆角类型。不管如何,尽量避免大圆角(卡片除外)按钮,不方不圆、不伦不类的,显的不够成熟也不好看。


3.1 小圆角

小圆角按钮的圆角值通常控制在高度的1/5、1/6,儿童类型的应用也有1/4(较大)的,并非绝对值。如果习惯使用8像素网格,根据按钮的尺寸大小,直接将圆角值固定在8px、16px、24px(较大)这几个数值,能减少设计组件的数量,也利于开发做组件封装后续调用。

3.2 全圆角

全圆角按钮的圆角值固定为高度的1/2,或者在软件的圆角设置中直接将数值拉到极限。

3.3 直角

不设圆角值,在PC端较为常见,也有部分较为严谨的移动端应用使用直角按钮。


4. 按钮中的文字

按钮中的文字要便于用户理解,不能过于陌生或绕口,用户碰到不易理解的信息会产生困惑,甚至误导用户导致操作失误从而造成损失。除此之外,文字还需要精简,不能过多或折行且能合理的引导用户完成操作。

上图的文案歧义就很明显,自以为聪明的设计师想要挽留用户,刻意将主次按钮样式对换,希望用户操作不成功,那么用户在需要取消订单时就疑惑了,到底是点击「确定」还是主操作按钮「取消」才能取消成功呢?或许稍加思考,用户也能反应过来,但无疑增加了选择难度、思考时间及操作成本。



5. 文字与按钮比例

按钮中的文字太大或太小都会影响用户对信息接收的效率,大小比例需要适中。文字太大会感觉很拥挤(跟大家衣服买小了感觉一样),没有呼吸感,要给文字四周留下足够的空间,同时文字太小会显得小气,看起来也会比较吃力,不利于信息接收。


6. 按钮与其他组件的区分

设计好按钮组件之后,页面中的其他组件或元素要与按钮有很明显的区别,避免让用户产生不必要的误解。


7. 弹窗主/次按钮的位置

在弹窗中,主按钮是在左?还是在右?这是一个争论不休的问题,那么不争了,在移动端的弹窗设计中,主按钮靠右就行了,不一定绝对正确,但绝对不是错的。根据调查数据显示,单手使用右手操作手机的用户比左手操作手机的用户量高,且用户也有一定的意识,左侧为上一步、右侧为下一步,顶部左侧为返回,右侧为保存或确定。


8. 无障碍设计

可访问性是按钮设计最重要目标之一,不仅要样式统一,还应符合用户的认知,让用户能快速知晓这个元素能否点击?点击之后会发生什么?甚至有种似曾相识的感觉。如果将按钮样式设计的与用户认知有较大的偏差,不易于用户理解。


9. 减少使用禁用按钮

在表单设计中,大部分都需要用户完成一定任务之后才能正常操作下一步按钮,在完成之前,需少用禁用按钮,在前面有讲到「待激活状态」,即在按钮中填充浅浅的主体色等待用户完成任务激活。

通常系统默认不允许操作或存在时间限制会用到填充为灰色的禁用按钮,即便如此,也要尽量让系统将其隐藏,万不得已的情况下需要在按钮附近说明情况,以免使用不当引起用户的负面情绪。


10. 投影的使用

在给按钮添加投影时,选择灰色或纯黑色加调整不同明度即可满足基本效果,但如果想要更好的视觉体验,可以基于按钮本身的色值来调整,让投影效果看起来更舒适,跟页面更搭。另外,切勿过度使用投影,宁缺毋滥,若按钮的投影太深,看起来粗糙脏乱,还不如不用,颜色较浅的按钮尽量不使用投影,否则可能会影响按钮的识别度,让这个页面看起来不够清爽。





六、总结


对于设计师来说,按钮作为设计组件之一,有很多细节容易被忽略,我们需要对每一个细小的元素进行深入思考,如论任何大小组件,都需要做到精益求精,才能给用户带来更好的使用体验。

原文地址:站酷
作者:飞鹰Article
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

2022年标志设计趋势:标志的未来

分享达人

2021年,标志设计师朝着更大胆、更具创新性的设计迈出了一大步。与平面设计趋势类似,品牌推广大量采用软循环动画和鲜艳的配色方案。它还开辟了实验排版,鼓励创造性思维重新审视标志设计。

2022年的标志设计趋势很可能会延续这一大趋势,我们希望看到上述美学在全球范围内得到重塑。您会看到设计师同样选择极简主义和卡通标志、3D 和平面标志、花卉和文字标志。我们认为2021年是创作自由的一年。然而,看起来在2022年,我们将看到它真正的肆无忌惮。

1) 简单的几何图形和基本形状

2) 高大的标志

3) 饱和颜色和渐变

4) 象征主义和极简主义代替现实主义

5) 涂鸦和草图

6) 粗体字标标志

7) 无衬线标志

8) 花艺和微妙的装饰

9) 黑白标志

10) 3D与平面样式

简单的几何图形和基本形状

在2022年,拥有基于复杂图形的标志几乎会很少见。此类标志通常难以记住,客户可能会很难发现在品牌与其图形表示之间的联系。对于寻求加强存在感和提高品牌知名度的大企业来说,这可能是一个巨大的问题。因此,公司倾向于拒绝此类标志,而倾向于使用一些基本的东西。

基本的几何形状是各种三角形、圆形、正方形、点和线,它们使标志设计成为简单的图像。作为优化,建议设计师使用充满活力或独特的配色方案。或者相反,切换到黑白,将这种极简效果发挥到极致。最后,还有负空间,这是另一种采用简单几何形状并保持视觉趣味的好方法。

高大的标志

虽然2022年的大多数标志设计趋势与我们两年、三年或五年前曾经拥有的一切产生共鸣,但高大的标志就像一口新鲜空气和创造力。反对过度使用的三角形、方形和圆形标志。正如我们从多个Behance项目中看到的那样,它们的美学非常适合寻求领先的时尚公司、精品店、创意工作室和大品牌。

高大的标志部分借鉴了装饰艺术风格,它们特别喜欢优雅的垂直框架。高大的标志同样具有波西米亚风美学和现代几何元素。事实上,这种标志设计趋势的根源并不那么重要。真正重要的是新的形状让设计师想出了新的标志创意,所以在这里我们希望他们以不同的方式处理字体和图形元素。

饱和颜色和渐变

实践表明,标志的颜色工作和色彩的选择是一个非常个人化的故事,通常很难跟踪全球趋势或与特定颜色相关的任何标志趋势。有人更喜欢黑白标志。有人会选择现在特别流行的单色、裸色或大地色。然而,如果我们看看大品牌,我们将能够在标志设计中使用生动、饱和的颜色来定义一个巨大的趋势。

对标志设计中颜色的兴趣已经发展到这样的程度,创作者不仅要增加饱和度,还要选择纯粹、生动的解决方案,同时尽可能地简化标志。太多的细节和颜色会造成混乱的外观,因此选择其中一个至关重要——在极简主义时代,选择很明确。然而,我们不禁强调鲜艳的色彩很难处理——尤其是糖果色。它们可以使品牌标识看起来廉价甚至业余。因此,当您关注这一标志设计趋势时,重要的是要取得平衡——否则您将面临使用可疑标志的风险。

象征主义和极简主义代替现实主义

有多种与简化标志和极简主义相关的标志趋势——这可能是最能说明问题的。我们每个人都将标志创建为一件真正的艺术品。动物、花卉、神话和生物——在标志内,它们展示了精湛的技艺和对细节的迷人关注。诚然,这样的标志确实看起来很引人注目,但从响应式设计的角度来看,它们失去了其他类型的标志。

您可能还记得响应式标志,这个术语是在大约4年前引入的。这些是可以适应不同屏幕尺寸或其他媒体的标志。为此,设计人员可以删除字标、简化或隐藏标志。今天几乎没有人认为响应式标志是一种独立的现象或趋势。相反,响应性是标志的自然特征,象征主义和极简主义的运动正好证明了这一点。

涂鸦和草图

2022年,草图和涂鸦将作为图形设计趋势回归,因此它们作为单独的标志设计趋势出现。其复兴的关键是人们对设计师个人品牌方法的兴趣增加。显然,没有什么比以独特风格绘制的快速草图、卡通人物和形状更好的了。

因此,要为标志设计中的更多涂鸦以及企业品牌中草率的卡通标志和快速绘制的吉祥物做好准备。以快速和朴实的方式制作的手绘标志也受到欢迎,我们已经看到以这种方式书写品牌名称的项目和团队。

粗体字标标志

如果我们考虑2021年的标志设计趋势,粗体字标志将是最好的例子。于2020年底推出的实验排版项目专注于不常见的几何解决方案。难怪品牌和标志设计师不能忽视这种大规模的图形设计创新——在这里,我们在标志设计方面有了一个全新的方向。

许多跨国公司选择字标标志。例如H&M、可口可乐、Zara、谷歌、Visa等品牌。然而,几乎没有人认真考虑使用实验字体进行品牌重塑。这就是为什么此类文字商标标志主要在独立工作室、小型企业、精品店、沙龙和个人创作者中传播。也许,这些大胆标志的特征是其吸引力的另一个关键。您可以将它们视为那些知道要注意什么的鉴赏家的标志——或者那些想要感受品牌美学的人。

无衬线标志

虽然使用大胆的实验排版并不是每个人的趋势,但无衬线字体是每个人都知道和理解的。自从设计师拒绝花哨的脚本和衬线字体而支持无衬线字体以来,已经有一段时间了。但由于存在普遍趋势,我们可以说它仍然是2021年的标志设计趋势——顺便说一下,这得到了我们上面写的极简主义和基本几何形状的流行的支持。

拒绝花哨字体的动机非常简单——使用无衬线字体要容易得多。使它们适应不同的屏幕和画布尺寸并不复杂,因此它们更适合响应式标志。有趣的是,几年前,我们观察到了一个相反的过程:许多公司从无衬线字体切换到衬线字体,因为复古设计非常流行。今天,随着复古狂热慢慢释放出来,健康的实用主义出现了,无衬线字体再次相关。

花艺和微妙的装饰

我已经不知道设计师和产品创造者用极简主义制作了一系列标志多少年了。与此同时,许多小企业继续选择和使用它们,所以这些标志不会退缩——就好像它们刚刚出现在市场上一样。所以请放心,它们将与您共存数个季节,同时还会定期推出新款式,例如2022年风靡一时的Boho。

也许,这种标志设计趋势是最流行的。优雅的线条看起来令人着迷,因此使用它们的诱惑很大。2019年如此,2022年依旧如此。 事实上,这种微妙的视觉风格并不仅仅集中在花艺上。有很多日常用品:从家具到文具和衣服。重要的是这些标志模板是如何制作的!

黑白标志

随着我们继续从各个方面学习了解极简主义,让我们在这个市场中传递2022年的另一个自信趋势:黑白标志。实际上,将黑白色调视为一种趋势是很奇怪的,因为它是一种经典的解决方案,并且它的存在与时间和风格的变化无关。所以,我们需要让您注意到对此类标志的兴趣是日益增加的,其中最重要的例子是GoDaddy的重新设计之一。他们逐渐简化了他们的标志,现在他们似乎到达了最后阶段——带有带有无衬线字体和保留标志的黑白标志。

黑白标志的最佳之处在于它们令人难以置信的风格灵活性,这使得它们在品牌设计师中流行起来。它们完美地适应了品牌的审美,因此可以将它们用于字体、装饰元素和几何形状的各种实验。极简主义、创造性的排版、花卉、象征主义、原始几何——一切都与黑白标志相得益彰。

3D与平面样式

3D是2021年最有前途的图形设计趋势之一。随着技术的发展,这种图形变得如此庞大,以至于我们永远无法预见。甚至可以在直观的在Spline或 Procreate的最新更新中进行高质量3D对象的制作。图像质量也得到了发展。

然而,在标志设计中,情况颇有争议。设计师将平面样式的 logo 转换为3D,反之亦然,力求使 logo 风格更加生动和简洁——后者对于旧版本的3D和假3D尤为典型。出于同样的原因,他们付出了很多努力来探索类似于3D的方向——等距艺术。它允许在视错觉、鲜艳的色彩、渐变、阴影和形状的帮助下获得大量图像。可能它看起来比3D更适用于标志设计——但时间会证明公司和客户会习惯什么。

最后

显然,2022年和2021年的标志设计趋势没有明确的界限。大多数处于巅峰的趋势已经伴随我们很长一段时间了。

但是,我们可以肯定地说,例如之前非常受欢迎的故障风格,不太可能成为本季标志设计的主角。在过去的几年里已经有很多这样的事情。动画标志也是如此,这是2021年最有希望的标志趋势之一。动画本身继续引起人们的兴趣,这是展示品牌的一种成功技术——但不幸的是,它并没有被证明是可行的。

最后,3D的命运也没有确定,我们还不能说3D或扁平风格的标志设计是否会成为一种趋势。我们已经写过,设计师的立场是模棱两可的,一个方向和另一个方向都有品牌重塑。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:对啊设计君
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

仪表盘设计的 7 个阶段

雪涛

你知道仪表盘应该如何被设计,才能更符合用户需求、满足用户的使用期待吗?过于复杂的仪表盘设计可能是不可取的,在进行仪表盘设计前,你需要做好相应的规划和设计策略。本篇文章里,作者总结了仪表盘设计的七个阶段,一起来看一下。

一个看起来很酷炫的仪表盘可能有很多功能但实际上,它通常只是一个闪亮的玩具,而不是一个有用的工具。这些仪表盘类似于多臂机器人,能随机拖拽数据并将这些数据分门别类地整理在一起,让你目瞪口呆。

就像魔术师玩纸牌戏法一样,它看起来令人印象深刻,但它的大脑和巧夺天工的手法一样好。

([1] Widget:全称Web widget是一种Web2.0 的衍生物,它好像是一个小型的应用程式,是一小块可以在任意一个基于HTML的网页上执行代码构成的小部件。)

玩这个仪表盘机器人一开始可能很有趣,但最终会让客户失望,因为它没有达到用户的期望值。为什么会发生这种情况呢?设计一个工具而不是一个很快就会被丢弃的玩具的诀窍是什么呢?

一、构想仪表板:核心大脑 Conceiving the dashboard: the brain

让我们深入剖析仪表盘设计。

仪表盘是由客户、设计师和开发人员共同设计的,他们每个人通过合作做出一定的贡献,并且所有的基础功能在一开始就确定了(或者他们没标明)。

一个有思考能力的人是从胚胎发育而来的。脑细胞和神经细胞是最先形成的,随后是身体的其他细胞,而这正是任何可行项目被创建的方式。

第一个阶段是最重要的。如果你在这个阶段遗漏了什么,那么任何奇特的设计都无法挽救。因为在这一阶段你正在为仪表盘的长期发展奠定基础。“我为什么被设计出来?谁需要我?”如果仪表盘会说话的,它一定会问这些问题。你能回答这些问题吗?

  • 仪表盘将如何促进公司目标的达成?
  • 什么样的结构、功能和视觉效果能让仪表盘执行它的任务?
  • 哪种设计最适合你的目标受众?

这些问题的答案将构成你设计理念的基础(现在你可以告诉你的仪表盘存在的意义了)。

仪表盘设计的 7 个阶段

网页Perls仪表盘设计

1)仪表盘的“智能”是其实现目标的能力。

有些人认为只有分析类仪表盘才需要智能性能,而可操作的仪表板只需要可读性,实际上这个想法是错的。比方说,你有一个用于激励员工的操作类仪表盘,用户的注意力应该放在比较结果,然而设计师会让其在视觉效果上更加突出。

2)仪表盘上没有琐碎的细节。仪表盘上需要展示足够的信息使用户来做决定。设计师的职责是帮助用户,而不是通过一系列很酷的小微件来帮助用户解决难题。任何不是出于这个目的设计的都会阻碍用户使用。

3)从项目的初始阶段到最终阶段,设计师必须关注公司的目标、仪表盘的目标,和用户的目标。否则仪表盘将永远无法运行。

仪表盘设计的 7 个阶段

仪表盘设计:Clover

二、数据及关键绩效指标的选择:这属于血液循环系统 Data & KPI selection: the circulatory system

仪表盘的数据就像是身体内的循环血液。我们必须了解它们来自哪里,它们在被用户需要时是如何被处理的,以及它们该如何被可视化。

理所当然地,设计师需要了解指标的目的,显然,这将帮助他们选择合适的微件,但不仅仅只有这些。

举个例子,一个客户想在屏幕上看到许多不同的读数。你(作为设计师)并不需要从屏幕上去除任何东西来清理仪表盘的展示空间;但你可以做的是突出最重要的东西,并在视觉上淡化次要的内容。

然而,要做到这一点,你必须得知道哪个指标是最重要的且哪个是次要的。

仪表盘设计的 7 个阶段

仪表盘设计:Bidding Car

最重要的一系列指标有助于实现目标,且能帮助控制流程(或者产品),例如:

  • 它们展示实际的成功率;
  • 它们影响产品被感知的方式;
  • 它们激励创建该仪表盘的团队。

指标的选择还需要了解受众。用户应该看到哪个 KPI以及他们认为最容易理解的视觉表现形式?

人们喜欢对应他们目标的一系列数字。

仪表盘设计的 7 个阶段

仪表盘设计:Panch

三、仪表盘的结构:这类似于骨头 Dashboard structure: the skeleton

想象一下,你进入一家酒店房间,看到一张床、一面桌椅、一个镜子和一个衣柜,就算不打开壁橱,你也能猜到里面有什么,吹风机、拖鞋、浴巾就放在你所认为的地方——有人已经保证了这些。

一个好的仪表盘设计就如同那个房间:它是干净、整洁且可被预知的。你可以立即看到所有必需品,并且直观地知道剩下的东西会在哪里。设计师们有他们自己的工具来确保仪表盘设计的整洁性。

1. 层级

首先,你需要理清思路,在发挥创意之前,要对所有数据进行排序将其分类并充分理解优先级等等,确定用户可以立即看见的关键指标数据

1)视觉层级必须反应信息层级。

设计师可以通过微件的大小及位置来表现数据的层级权重。如果你的用户是从左往右阅读的,那么关键信息必须放在左上角,而相关性最弱的信息放在底部右下角。

对数据重要性的排序方法取决于仪表盘的设计用途。重要的是根据信息的优先级构造信息并搭建逻辑链路。

2)将信息面板视为一个故事,而不是一系列的数据点。

2. 网格

网格对于创建页面的总体布局排序协调和对齐元素非常有用。

仪表盘设计的 7 个阶段

3. 信息模块

系统的模块类似于一个住宅中的功能分区:卧室用来睡眠,餐厅用来吃饭之类,每个区域有其功能。你的舒适性取决于它们放置的位置有多方便。

一个糟糕的布局不能靠翻新和布置家具来挽救,因此与之相类似的,信息模块的布局需要被提前考虑。信息模块帮助你展示内容的层次结构且帮助你根据数据内容的重要性、相关性和逻辑连接对内容进行分组。每个模块应该在给定过程中执行特定的目的。

仪表盘设计的 7 个阶段

仪表盘设计的 7 个阶段

4. 连续性和接近性

如果你在去往厨房的路上需要穿过一个有两扇门的走廊,那么这是一个糟糕的室内布局。相互关联的进程则会假定在逻辑上也具有相似性。如果一个模块的进程需要来自另一个模块的数据,那么数据的布局就需要有近似性。

这一点必须事先考虑,这样用户就不需要在晦涩难懂的信息海里挖掘他们需要的信息。所有相关的信息应依据相似性,从最重要到最不重要性来进行分组和定位。

5. 分离模块

没有人需要一个与卧室相连的厨房。为了将两个区块分开,你需要留白或者负空间。你一定要在一开始就考虑到:将负空间视为视觉平衡所需要的设计元素组合

仪表盘设计的 7 个阶段

仪表盘设计:Wingle

四、功能:这就类似于身体的肌肉部分 Functions: the muscles

功能和工具的数量取决于仪表盘的用途和其用户的主要目标。为了自由地移动,人类需要两条腿,狗需要四条腿,而蜘蛛需要八条腿。一个拥有太多功能的仪表盘就像一条有着六条腿的狗一样优秀,但这有点让人毛骨悚然。

不要在控制面板上放太多工具,只需要在最表层放置用户必需品就好。太多的可用工具会让用户困惑且被吓退,因为这会让仪表盘看起来很复杂。个性化总是比定制要好。

仪表盘设计的 7 个阶段

仪表盘设计:Band

五、微件:重要的器官 Widgets: thevital organs

如果屏幕上有超过 5~7 个的小微件,人们则会难以理解其内容。所以我们(设计师)的工作是让相关数据可以被访问但数量保持一定,不过多,这样就能使用户能在数秒中理解他们看到的内容。视觉可视化的工具包括:

  • 表格
  • 图形
  • 图表
  • 卡片
  • 指标
  • 地图
  • 图片
  • 分组
  • 过滤器
  • 列表
  • 资料结构

仪表盘设计的 7 个阶段

仪表盘数据微件的选择取决于你仪表盘的目的和你的受众。请思考以下问题:

  • 哪一种微件最能展示特定的 KPI(关键绩效指标)?
  • 用户需要最先在仪表盘上看到什么?
  • 哪一种微件将会是用户最容易理解的?
  • 什么可以帮助用户更快地找到他们需要的东西?

请选择容易理解和可读的微件。这里有一个让人困惑的与最易理解的微件对比示例:‍‍‍‍‍‍‍‍‍

仪表盘设计的 7 个阶段

请考虑什么是主要的目标来吸引用户的注意力。

例如,如果你的首要任务是业绩目标,则应使用数字;如果你需要比较数值,则应使用折线图或者柱状图;如果是为了激励团队,则应使用具有亮点突出的排行榜。

选择一个不合适的部件或默认的小部件模板可能会混淆用户或导致他们误解数据。最好的解决方案总是分析和测试的结果。

仪表盘设计的 7 个阶段

最好的小部件设计是简约的并且易于阅读的

例如,一个 3D 图可能看起来令人印象深刻,但它占用了用户太多的注意力,最终证明它会分散用户的注意力。渐变、过度使用颜色和太多细节也同样会造成困扰。

六、视觉设计:通用技巧 Visual design: general tips

我们已经构建了仪表盘的大脑和身体。最后需要构建的是仪表盘的皮肤——最表面的一层。这可以根据好的经典设计的基本原则来完成,但这里仍然有些细节需要具体说明。

1. 简约性

一个仪表盘应该跟你喜欢的工作桌面一样干净:它只有必需的文件和工具,没有任何干扰项。

仪表盘设计的 7 个阶段

仪表盘设计:MEMO

2. 配色板

仪表盘的颜色选择必须服务于一个目的:尽可能清晰地呈现信息。你的配色板越大,就越难清晰地展示信息。所以不要在仪表盘上使用过多颜色。尽可能用相同颜色的深浅色或者不同的色相。

仪表盘设计的 7 个阶段

首选,你需要选择一个基础色,然后选择一个辅助色。每个颜色都必须有特定的用途。一个颜色可以用来结合/组合元素,另一种颜色可以用来强调元素。颜色还经常用来展示一个元素是主动的还是被动的。避免使用可能具有负面含义的颜色。

例如在下面的例子中,红色看上去像展示一些不好且不受欢迎的数据:

仪表盘设计的 7 个阶段

如果仪表盘提供可定制的颜色,请确保所有的可选颜色看上去都不错。Aodbe Color CC 是一个用来选择配色的优秀工具。

3. 强调

语义的强调之处应和视觉的强调之处一一对应。你可以使用颜色(对比、亮度)、形状、大小、负空间等等来强调元素。

4. 可读性和数字格式

这是确保视觉上清晰清楚的一切:干净的布局,视觉层级,突出重点,对比鲜明的元素,适当的字体,且这些字体也必须具有对比性和易读性

高精度的数字格式是难以让人理解的。最好的办法是将任何数字四舍五入,并减少较长的数字。

七、适应性 Adaptability

在实践过程中,当桌面版本是用户的优先选择时,则应该优先构建网页版,然后创建移动端的。如果你的目标受众主要使用移动端版本,则应首先着眼于构建移动端的仪表盘。然后再创建桌面端的。

仪表盘设计的 7 个阶段

仪表盘设计:Snap

八、结论 In conclusion

设计一个优先的仪表盘并不容易。我们将其创建过程类比作人类发展,因为它是记住重要东西和展示工作的连续阶段的好方法。当你在开发你的仪表盘,请不断地自我提问:是否一切各就其位、各司其职?是否有多余的部分吗(需要去掉)?各部位协作时工作正常吗?用户会喜欢这样的结果吗?这(功能)会有用吗?

如你所见,视觉设计实际上是设计师最后需要担心的事。如果你什么都没有漏过,你的仪表盘将对你的用户产生有价值的帮助,而不只是一个玩具。

本文翻译已获得作者的正式授权(授权截图如下)

仪表盘设计的 7 个阶段


文章来源:人人都是产品经理   作者:TCC翻译情报局


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


 


毛玻璃图标的设计教程

lanlanwork


1. 一定要注意识别度

其实我一直不敢使用毛玻璃效果的原因,就是害怕有识别度问题,其实网上现在有很多毛玻璃图标:

图片

做概念稿练习练习还好,如果真的落地肯定不行,太影响识别了。

为了不影响识别,我们可以有两个做法。

其一:就是毛玻璃的透明度别太低,像腾讯视频这种:

图片

这样不影响我们识别图形的轮廓。

其二,我们可以把图标主图形用颜色填充,毛玻璃的面积只是很小一部分,起到辅助作用即可,比如像喜马拉雅这种:

图片

这样整体的识别度也不会太受影响。

以上就是关于不影响识别的小方法。

 

2. 技法

毛玻璃图标大部分一共分三层,填充层、玻璃层,模糊层(模糊层是嵌入到玻璃层的)。

其中最重要的一个关键点就是,玻璃层其实是假的,并不是透明的,而是100%的填充色。

举个最简单的例子,我们先画一个深蓝色的填充层:

图片

然后加一个玻璃层,这个玻璃层不是透明的,而是100%填充色:

图片

那有同学就会问了,毛玻璃效果怎么产生呢?其实就是把下面的深蓝色圆复制一个进入到前面的玻璃层:

图片

有人又会问,这也没效果啊,对,因为复制进入玻璃层的圆形和后面的原型位置一摸一样,如果不做改变,就看不出变化,所以我们先来模糊下:

图片

区分的还是不够开,我们再降低透明度:

图片

这效果就立马出来了。

所以从技法层面来说,并不是很难,主要是要注意识别度和整体的设计感。(当然,这只是我个人制作的方法,可能别人也有其他的方式)。

 

3. 底色

前几天在群里看到一位星友问,说为什么他做的效果是第二个,而不是第一个那种透透的毛玻璃感觉:

图片

其实我在最开始做毛玻璃效果的时候和她遇到了一样的问题,这个问题产生的原因就是因为底色,现在的底色是黑色,一个玻璃放在黑色上面,透出来的颜色肯定是深灰色,而不是浅白色(除非你这块毛玻璃本来就是白色的)。

我在之前的一次练习时,做一个黑金配的的毛玻璃效果,最开始就做成了这个样子:

图片

总感觉有点奇怪,其实就是因为在黑色背景上,玻璃层的颜色用了白色,感觉没透过去,就感觉怪怪的,后来我把玻璃层的颜色变成深灰色:

图片

这样看起来就好多了。

制作的原理和刚才说的是一样的,先把大形画完:

图片

然后前面整一个玻璃层,选一个深灰色:

图片

然后把下面的形状复制一个剪切到玻璃层中:

图片

现在看不出效果是因为玻璃层里面的图形和后面的图形位置是一摸一样的,这时候我们把玻璃层的图形模糊:

图片

现在已经差不多区分出来了,如果想要更明显的区分,可以把透明度再降低一点:

图片

也还ok,当然,我觉得加不加透明度,还是看具体效果调整就可以了!

再强调下,大家在做毛玻璃的时候一定要注意背景色哦,不然可能就会看起来很奇怪。

 

总结

好了,以上就是我个人对于毛玻璃效果的一点总结,我个人还是比较喜欢一组毛玻璃图标是多色的,如果是一个颜色,比如这种:

图片

相对来说没那么耐看,如果是多色的:

图片

就会耐看很多,希望给大家一点启发,下期见,默默扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》好惨,我竟然被批评了,问我为什么不安排教程?我怕了

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端图标如何设计和应用

雪涛


1.1 图标的主要类型


理解图标,首先关注的是图标本身的类型,在整个 UI 体系中,图标基本就分成3个大类:



工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解

装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于节日活动中

启动图标:产品的启动图标,即用来在系统中打开该产品的图形按钮,基本以自身 LOGO 为主


在 B 端项目中,应用最广泛的必然是工具图标,而装饰、启动图标却鲜有露面机会。但出现的少,不代表没有,解释工具图标前,我们先优先讲解下装饰和启动图标在什么情况下会出现。


其中,SAAS 类服务就有很多会重点强调品牌、情感化设计的案例,例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。



启动图标则会应用在一些比较大型的项目里,当项目出现了很多下级功能模块或类似插件的体系时,就会采取使用应用图标的方式作为入口。


比如 Figma 也是一个 B 端工具,它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品,一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求,就自然而然会用到启动图标了。



最后,就是我们熟知的工具图标了,前两种图标,在前期画不好不要紧,毕竟这类规格的产品会有经验更丰富的设计或总监坐镇,新手当个切图仔即可……


但是工具图标,重要性就不言而喻了,B 端项目对工具图标的需求非常大,几乎每个组件中都会包含图标。



虽然今天网上有非常丰富的图标素材库,但在形式各异的 B 端项目里依旧是供不应求的,各种行业特有的功能、实物、隐喻,只能设计师自己完成。


B 端设计师在图标设计领域的主要工作,就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。


1.2 B端工具图标的风格


工具图标的应用主要包含两个部分,线性图标和面性图标。



这里再提图标风格,不是把以前的知识点重新讲一遍,而是要强调 B 端图标的特殊性。和 C 端相比,B 端图标的实用属性更高,并不需要过多凸显本身的视觉风格。


所以,工具图标中,使用大量渐变、插画、投影的类型都要排除掉,它们对 99.9% 的项目都只会造成体验的负影响,不要被网上的追波风飞机稿给带偏。



适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可,一定要划分出差异,应该只包含圆润、纤细、尖锐这几种。



很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢?答案是没有差异。


线性和面形的使用,纯粹看设计师在当前场景判断哪个合适用哪个,只要保证对应图标风格统一即可。


不过如果遇到一些比较特殊的情况,比如要表现各类设备的复杂图标,那用线性的做法还是相对合适和简单一点。



1.3 图标的统一性规范


对 B 端设计来讲,独立设计图标的步骤是必不可少的,应该掌握的图标规范还是必须要懂的。


我们虽然没有 C 端那么多风格和技法的拖累,但想画好 B 端图标却多出了其它难点,那就是一个页面中出现的图标实在是太多了。



这就引发了我们要讲的第一个规范要点 —— “统一性”,所有同规格类型图标具有一致性的特征,这些特征包含了:

  • 粗细一致:首先使用统一的描边、线段粗细参数

  • 圆角一致:使用一致的圆角数值,不要一下尖角一下圆角

  • 透视一致:使用接近的透视角度,不要有的侧视有的正视图

  • 大小一致:视觉的大小保持一致,有均衡的大小感受


如果不能保证统一性的基本要求,那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标,它们的细节完全不一样,统一性当然无从谈起。


而让整套图标保持统一性,是相当有难度的,其中最难的一点,就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸,但不代表图标实际图形的长宽数值是完全一致的。


几何图形对视觉有一定的欺骗性,有不同的大小体验,比如下方案例(鱿鱼游戏乱入?):



所以,基于这样的特性,每个图标本身都包含了两层属性,图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小,是透明白的,排版的时候以这个尺寸作为实际的边缘来测量。



而视觉尺寸,则是在占位尺寸下图标图形的实际大小,这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的,我们用占位尺寸包裹它们来方便我们进行统一的应用。



所以,使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然,不同的素材,这个留白也是有区别的,下一个小节就会解释。


最后要声明一点,一套项目中可以包含多个规格(2-5个)的工具图标,比如导航用的图标比普通工具图标更复杂一点,设计师只要保证每种规格保持的统一性即可。


1.4 图标的栅格系统


图标越多,大小的控制越困难,所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。


在 Ant 的体系中,一个基于栅格的图标实际包含3层,背景层、格线层、图形层。



背景层,即图标展位尺寸,需要先确定出这个元素的大小,然后才是里面的绘制区域。通常,栅格系统会为边缘预留 1-4 像素的内边距(出血位),正所谓四周留一线,日后好相见。


格线层,则是使用的栅格线段,也是最重要的部分。格线层通常由 4 个基本图形构成,包含正方形、圆形、水平长方形、垂直长方形。


这四个图形的长宽大小不一,原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列,就可以发现它们的视觉大小非常接近。



这些格线的作用,就是提前帮我们确定好视觉比例,帮助我们快速绘制相同图形类型的图标。



但是,不是完美符合这四个图形要求的图标该怎么办,总不能格线把所有轮廓都给你实现出来吧?


格线的另一层作用,也就是最重要的作用,其实是一个用来做测量的工具,而不是轮廓依据。在几何视觉差中,最基础的大小原理是占用面积越大的图形,尺寸感受越大。所以,长宽一致的正方形大于圆形,圆大于三角形。


所以当我们绘制的非常规图形,和类似格线进行对比时,长宽缺少的一侧,就要由另一侧增加数值来填补它的面积。


比如下图 Ant 官方的电脑图标,它的宽是横向矩形,但是中间区域面积较小,所以增加了高度进行平衡。



再看一些其它的案例



这一步没有固定的参数使用技巧,设计师需要将完成的图标置入到其它图标旁边进行调试,确保尺寸是合适的。

格线只是一个图标大小设置的参考工具,一切以最终效果为标准。





理解完图标的基本规范,就到图标的使用逻辑了,解决一些常见的设置误区。


2.1 图标应该做多大

图标该做多大的,这是目前被问到最多的问题。本来应该是非常简单的一件事,但很多工作多年的设计师也搞不清楚。


仔细捋了捋,罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。



要重点强调,Ant 设计图标的意图,和一般项目的是完全不同的。Ant 作为一套庞大的开源项目,它的图标核心特征之一就是 —— 适应性


这些图标要被应用到各种不同的设备、显示器、系统中,图标尺寸会用多大,在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成,后续实际应用中的缩放、匹配也就越容易,适应性越高。


但是,在我们自己的项目中,这种做法是完全没有必要的,1024 图标的负面影响包含:

  • 像素数过多使得数值的制定难度大大提升,不管是元素尺寸还是描边粗细

  • 矢量图形源文件进行缩放很容易发生错位,提前轮廓化会破坏源文件

  • 缩放图标后描边的数值往往会出现非整数和 0.5 的状态,虚边问题严重


在常规项目里,一套项目是可以包含不同尺寸和规格的图标的,而不是我们做一套相同风格的图标在整个应用中无差别使用。


这也意味着,每个图标在产品中的使用场景通常只有一个尺寸,不需要去面临缩放的情况。即使需要缩放,也只是这套图标中的少数几个需要,或者相对特殊的项目。


所以,图标尺寸设定,就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适,然后创建同样的数值即可(尽量以4的倍数为标准)。



2.2 素材的正确使用方法


我们知道图标的素材非常丰富,不管是 Iconfont、IconPark 还是 Iconsearch 等网站,都提供了海量的素材。但是只要稍微专业点的项目,往往素材库都满足不了,部分规格的图标还是需要我们自己重新绘制。


所以说图标素材就完全没用了吗?当然不是。


图标的正确用法是作为一种快速试错的参照物,它可以帮助我们实现:

  • 参考图标的具体尺寸在哪个数值最合理

  • 参考当前场景使用面性还是线性的风格更合理

  • 参考图标的设计风格是圆还是尖锐更合理

  • 参考相关隐喻的图形样式哪种更合理


在项目的界面设计阶段,我们一向建议优先使用外部的素材,尤其是 IconPark 这种比较统一,还可以快速调节图标样式的工具网站。



这个过程即使素材找不到和寓意一致的也没关系,用相近的图标替代就可以。等到页面布局基本完成以后,最后再集中精力对需要绘制的图标重画一遍(甚至是在开发阶段绘制)。


通过别人的图标来快速匹配尺寸、风格、样式,会帮助我们节省非常多的时间,也有助于我们设计出更专业、美观的图标。


另外,就是针对项目一些偏小尺寸的通用图标,就可以比较放心的应用素材,例如翻页的左右、更多、下拉、搜索等等。



2.3 图标的色彩和状态


图标的尺寸、样式都确定了,最后就是关于图标的色彩和不同状态的制定了。


前面讲过,B 端项目对图标的装饰属性没有那么迫切,所以正常情况下,太花哨的图标是要尽量避免的。彩色、渐变色、投影,都不应该在这个情况下胡乱使用。


常规的图标只要使用中性色即可,而需要特别对待的图标,色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。


当然,如果项目涉及到一些特殊的工具图标,类似工厂、工业领域表达实体设备的拟物图标,可以打破这个原则。但是,同样避免这套拟物图标的每个图标用色不同,尽量只使用 3 种以内的颜色完成拟物的填色。



同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现,部分图标会承担按钮的功能,包含默认、选中两个基本状态。


普通权重的图标,未选中状态可以在默认色彩基础上使用透明度来实现。



高权重的图标,则可以在选中的状态替换色彩,或者更改图标的类型,将原本的线性更改成面形并填充色彩制造反差。





完成所有图标的设计以后,最后一步就是切图和导出了,这决定你的图标能不能被正确运用到线上项目中。


3.1 图标的收纳和命名


在一套专业的 B 端项目中,已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里,而是在规范页面中有统一的整理和收纳。



这种做法的流程是,先在软件的规范库中创建对应的图标组件( Symbol / Compoent ),然后再在具体页面中应用,方便后续的统一管理和修改。


而在这个过程中,我们也需要对图标有正确的命名方法,来确保团队调用、检索图标的效率。通常,我的图标命名规范如下:

尺寸 / 类型 / 图标名-状态


示例:

48px/导航图标/表盘页-默认

24px/一般图标/搜索-默认


“/” 号的引用主要是方便软件中对组件层级进行划分,而我调用图标的规则势必是先从尺寸开始,再选择对应规格,最后类型和状态。


提前命名也是方便后续我们切图和导出,但要提及一点,图标的命名不要追求英文化,因为我们的词汇量不可能实现正式的英文命名规则,只会写一堆大家都看不懂的单词。


而开发在使用我们的图标切图时,也不会用我们之前取的命名,会根据自己的命名习惯重新命一遍,写个让他能看懂的名字远比用乱七八糟的英文强


3.2 图标的切图格式


接下来,就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片,然后上传蓝湖发给开发自生自灭了,这是一个非常不合理的操作。


再或者,强行使用 Fonticon 格式,而不管实际情况如何,造成最后实现效果完全不同步或实现不了。


切图是通过前端调用并在浏览器中进行显示的图形,而要被浏览器正常显示,就有必要了解适合使用的切图格式。


图片的格式包含位图和矢量两种,位图是通过记录像素色值的图形格式,假设一张图是 100*100 像素,那么记录 1W 个像素点的色彩,所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式,可以支持自由缩放。


理论上,矢量格式是最佳的图标切图格式,但是它的限制同样有很多,例如:

  • 无法记录渐变色

  • 导出轮廓容易有错误

  • 无法记录拟物图形

  • 无法记录投影元素


前面说过,普通项目中同一图标是很少出现一会儿大一会儿小的需求,所以矢量最大的特征无损缩放,往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题,而不是网页端的基本使用。



当一套项目中出现了矢量格式无法覆盖的图标时,那么即用矢量切图,又用位图,就会显得非常的混乱。只有类似 LOGO 等图形元素,才需要考虑 SVG 格式,而不是一看到图标就上。


所以,最适合切图的格式就是位图的 PNG 格式,一方面它是无损的,另一方面它支持透明背景,在切图应用上可以完美和设计稿结合,而这是其它大多数位图格式不具备的特征。


当每次项目完成以后,并不需要通过蓝湖来实现切图的导出,如果切图文件分散在各个项目页面里,那么一定会有很多图标被遗漏,尤其是图标的不同状态切图。


所以,最理想的切图形式,就是将所有图标完成整理和命名以后,一起框选,然后导出成 PNG 格式,再同步给程序员即可。






以上就是关于 B 端图标应用的所有知识点了。后续会将这些内容进行分拆,更新到原子核系列课程中去,会有更细节的案例说明。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:酸梅干超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何选择合适的图标?来看这份图标类型和风格汇总

分享达人

常见的分类是简单的线性分类,缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。


大家好,我是Clippp。看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题!

一、定义图标类型

对图标进行分类时,普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。

面对这样的问题,推荐使用系统性的结构来划分图标类别: 
  • 首先将图标按尺寸大小分为两类;

  • 继续细分对应的面性、线性、线面结合、扁平、拟物化等类型;

  • 最后选择标准、容器、渐变、3D、手绘、阴影等风格。

利用这种结构层级,可以明确定义图标类别。

二、图标尺寸

图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷,但把它缩小到16px,这些酷炫的效果都无法呈现出来。

在对图标归类时,首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类: 
  • 大尺寸图标通常指标志性图标,例如App启动图标或代表品牌形象; 
  • 小尺寸图标用作UI控件,起到引导功能或装饰目的。

三、图标类型

确定图标尺寸后,进一步细分图标类型: 
面性图标 
线性图标 
线面结合图标 
扁平化图标 
拟物化图标 


利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中,所以在小图标分类中没有展示。

四、图标组成


图标尺寸越小,展示的细节越有限。相比于大图标,小图标的尺寸有一定局限性,图标组成包括 标准和容器两种。 


大图标利用尺寸上的优势能展示更多内容,分为多种组成形式。

五、小尺寸图标样式


简单的图像可以更具包容性。图标的尺寸越小,越考验设计师传达信息的能力。 

1.面性图标

1.1标准面性图标

面性图标易识别,适合应用在小尺寸图标中。 
关键点:
确保图标有清晰的边缘,避免羽化; 
图标复杂程度随着尺寸变小而灵活调整。 

1.2带有背景色的面性图标

彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好,更具吸引力。 
关键点:
为背景选择4-12种颜色。 
考虑图标是浅色还是深色,是否适用于所有背景色。 
在彩色背景上使用白色图标比黑色效果更好。 

2.线性图标

2.1标准线性图标

线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰,我们可以更加大胆地使用线性图标。 
关键点:
确保轮廓像素清晰。 
越简单越好。 
追求更简单的细节。 

2.2双色线性图标

设计小尺寸图标时,必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时,可以考虑添加一些颜色。 
关键点:
使用两种搭配和谐的颜色。 
考虑将一种颜色用于主要形状,另一种颜色用于细节。 
少即是多。 
使用粗线条。 

3.线面结合图标

线面结合拥有更多细节,提升用户的愉悦感。 
关键点:
最好使用深色而不是纯黑色描边。 
限制图标的颜色种类。 
避免过多细节。 

 4.扁平化图标 

扁平化图标既简单又巧妙,表达品牌形象的同时具有丰富的内涵。 
关键点:
避免在<20px的尺寸中使用此图标样式。 
选择2-3种颜色,可以一起使用。 
一种颜色为主色,另一种颜色应为高光/细节色。 

六、大尺寸图标样式

大尺寸图标在界面中使用较少,更多用于产品标识或品牌宣传。 

 1.线性图标 

1.1标准线性图标

在设计任何图标前,都可以先创建一个线性轮廓,确保形状看起来足够美观后再添加颜色。 
关键点:
这类图标最容易制作。 
避免出现轮廓羽化。 
线条粗细要一致。 
不要害怕添加细节。 

1.2渐变线性图标

添加一些渐变能让原本单一的线性图标赋予更多的个性。 
关键点:
在小尺寸图标中添加渐变会降低图标的可视性。 
选择渐变时,首先考虑邻近色。 
线条越粗,渐变越明显。 
线条细节越多,渐变越明显。 

1.3等距线性图标

2.5D图标做起来会花费很多时间,但效果会很好。在设计汽车、房屋、家具等实体产品时,建议优先使用2.5D图标。 
关键点:
同一组图标要使用相同的等轴测网格。 
2.5D等轴图标很复杂,在较小的尺寸下会失去作用。 
如果可以,让所有图标都朝向同一个方向。 

1.4手绘线性图标

随着设计趋势向简约化、扁平化发展,很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。 
关键点:
手绘图标扫描后,再用数字方式重新绘制,这样可以保证线条粗细一致。 
尽量让所有的线条保持相同的颜色,这会使文件更小。 

1.5断线图标

标准的线性图标看起来可能会很单调,而简单灵活的断线处理能为图标增加更多个性。 
关键点:
断线粗细应该相同。 
图标的中断次数尽可能保持一致。 

1.6双色线性图标

关键点:
确保两种颜色具有相同的对比度,否则可能会导致用户看不清其中一种颜色,因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。 

2.线面结合图标

线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓,让图标能够清晰可见。 
2.1标准线面结合图标

关键点:
使用有限的颜色和统一的线条风格,使图标具有品牌性。 
使用线条和点来添加更多细节。 
避免使用纯黑色描边。 

2.2带有背景色的线面结合图标

关键点:
描边断开时,图标效果很更好。 
避免在小尺寸时使用。 
使用有限的调色板。 
考虑使用较浅的描边/背景色。 
考虑在图标下方添加一条水平线,使图形具有相同的位置(中间的图标示例) 

2.3错位线面结合图标

当填充色与描边错位时,颜色移到右边图标左上角留出高光,带来一种清新的感觉。 
关键点:
考虑使用断线描边。 
使用有限的调色板。 
确保描边和填充色简单且一致。 

2.4色块图标

这种风格的图标的特点在于并不依赖于颜色,仅将其用于装饰。 
关键点:
选择有限的调色板。 
先关注轮廓再关注颜色,颜色仅用于装饰。 
避免形状色和背景色过于相似,降低可见度。 

2.4单色线面结合图标

关键点:
避免使用暖色调尤其是红色,会让用户感到压抑。 
首先确定合适的描边颜色,再考虑填充色。 

 3.扁平化图标 

扁平化图标通常没有描边,主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节,让这类图标非常具有吸引力。 
3.1标准扁平化图标

关键点:
使用柔和的调色板,避免明亮的颜色。 
分清简化和添加细节之间的界限。 

3.2带有容器的扁平化图标

尝试让图形打破容器,带来动态的感觉。 
关键点:
尝试让图形从容器中凸出来,以增加深度。 
因为在容器中,可以添加更多的细节而不用担心图形变得混乱。 
尝试使用正方形、椭圆形或与品牌相关的容器形状。 

3.3等距图标

关键点:
保持所有图标朝向同一方向。 
选择恰当的调色板能让图标看起来更一致。 
避免小尺寸使用。 

3.4半阴影扁平图标

半阴影图标是在扁平图标的基础上添加半色调阴影,得到更具个性的图标。 
关键点:
小尺寸图标不起作用。 
使用有限的调色板。 
确保所有的图标色调相似。 

3.5长阴影扁平图标

当图标位于容器中时,可以考虑添加长阴影,主要包括纯色阴影和渐变阴影两种类型。 
关键点:
使容器具有相同的颜色或类似的色调。 
只在大尺寸图标中使用。 
将半阴影与长阴影组合使用效果更好。 

 4.拟物化图标 

拟物化图标实际上已经包含了大部分的样式,例如它们是立体的,有丰富的渐变和阴影。 

这种风格的图标看起来与现实生活中的图标尽可能类似,让用户感到更舒适。 
关键点:
考虑添加底部阴影。 
使光源来自同一方向。 
确保图标都朝向相同的方向。 
目前绝大多数界面不在有这种风格的图标,可以考虑使用3D建模来实现这种效果。 

总结

希望大家能对图标的分类及设计有更全面深入的认识,从而构建一套完整的图标思维体系。

文章来源:站酷  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档