赞助商
立即赞助

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

UI设计3年前 (2021)更新 流光
3K 0 0

图标在产品应用常要,不位图标有不设计思路。本文将从品和设计两个度底部导航栏的图标进行分析。阅读之前,请先浏览章的大纲。

01 导航栏图标重要性及维

  • 重性
  • 三个重要评估维度

02 底部导航口的数量

  • 认知心决定最数值
  • 品框架决定具体数值

03 底部导航栏的模式

  • 权重平分
  • 强调信息
  • 引导操作

04 底部导航栏的表现形式

  • 线性图标的优势
  • 其它图标趋势

05 图标设计思与创意

  • 权平分模示例
  • 强信息模式示例
  • 引导操作模式示例

底部导航栏图标重要性及维度

1. 重要性

导航栏的图标是路牌,承担着指路的作,给户指明进入产后可分别通往么页面。早期的导航栏是单一的指路功,经过多年的交互设计迭代后,附了「信息展示」和「引导操作」的作,这点会在中详细阐述。

2. 三个重要评估维度

品牌调性

品牌调性决定了图标的体量、差异化和创延展。怎评估图标计能够体现出品牌调性呢?最简直的方法:截屏首页,不顶部栏,仅从底部导航栏能出来这是什产品,就算成功体现了品牌调性。

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

识别度

识别度决了用户辨识其它页面功能的速度。高识别度的图标能协用户辨识,低识别度的图标会阻碍用户辨识。选择这部分图标的时候,一考虑识别度的问题,行创新建立高识别度的基础。

观

导航栏图标观的义:统一、精致。统一不表绝对统一,精致不表过于精细。到观,可以遵循以下几点:小统一谐、线条粗细一致、圆角视觉统一、内繁简平衡。

将三个维度按重要程度来排序,是品牌调性>识别度>美观。有的计会选择以美观度作为优先标准。但站在产品的角度来说,应该以体现品牌调性和识别度为重要标准,在这基础上再进行美观计。下图中,新书APP的底部导航栏图标略显年代,图标细节表现不一显得不够统一和致,然而用户还是能够根据图标一眼各个导航入的功能。它可能不是计眼中好的图标,但它是用户眼中好用的图标。

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

底部导航入口的数量

底部导航入口一般3-5,常见的4-5。这数由什么决呢?

1. 高数由认知理学决

在认心理学理论中,人的忆系统由三个储存器组成:感寄存器,短时忆和长时忆。来自境的刺激经滤首先进感寄存器,通选择直,信息被临时传短时忆(STM)。它是一个渡的忆缓冲期,容量有,只能录7+-2个信息组块,且只能持大约15-30秒。

在使用APP的时,底部导航栏使用到的是人忆系统中的感寄存器和短时忆。考虑到APP面对的人群非常,短时忆容量不一,选择7-2(也就是5)为底部导航口的最高数值。

2. 具数值由产品的框架决定

产品经理通项目背和用户研,决定产品的功能结构。而功能结构图划分的类别决定底部导航口数量。有的产品功能非常单一,结构也单一,三个导航口已经能够满需求;有的产品功能复,则需要更的导航口,用以划分APP功能,帮助用户快速识别。

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

底部导航栏模式

底部导航栏有权平分、强调信息、引导操作这三模。本深度分析采用了30个品作为象进研究,其大部分为知名社交电商类品。为这类型品比较多,迭代完善,可参考性强。

1. 权平分

品功能结构权比较平均,不希望突出其某个结构时,般采用权平分模,即个底部入口分量都是平均。常规品会采用这样形。

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

2. 强调信息

当产需要强调某些信息引起户注意或同一个按钮承担两个功时,设计可择在某个入口添明显的信息指示或功。增功的导航入口一定是首页,可是它入口。

严的首页按钮承担着「到顶/快速定位推荐模/牌展示」的功;淘宝、飞猪的首页按钮承担着「到顶/牌展示」的功;微博的视频按钮承担着「视频/注的人更容示」的功。

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

3. 引导操作

当产品希望用户能够行某操作,需行强操作提醒时,可以选择引导操作的导航栏模式,中突出操作按钮。众点、果园、转转、星巴克、闲鱼都采用这种模式。

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

底部导航栏图标表现形式

1. 线性图标优势

从大多数APP设计来看,未选状态下,线性图标占有优势。相性图标来说,线性图标有更多可能性,选与未选区分落较大,比明显。

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

2. 它图标趋势

未中状态的图标线性方式,目前的要趋势还是在图标表意上功夫;中状态的图标面性、微质感、立体、插画等方式。

图标设计思路与创意

为了直观表现图标设计的思路,我为权重平分模式、强调信息模式、引导操作模式分别设定同的产背景,把图标设计的过程写来供大参考。

1. 权重平分模式示例

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

2. 强调信息模式示例

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

3. 引导操作模示例

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

结语

图标对而言最有趣的地方在于,它是由不同的变量组出来的结果,每一次的计都会有惊喜。不同的品牌、不同的产品背景、不同的产品框架…这些千变万化,让图标有了生命,也让每一次的计都有义。也欢迎你使用这的方式,组变量,做更多突破性的计。

注作者微信公众号:「一点牙线」

如何做好底部导航栏图标设计?来看高级设计师的全面总结!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

越来越多的设计师开始从 Sketch 切换到 Figma,基础功能上没得说,但是确实缺少 Sketch 上丰富多彩的插件支持。作为一个发展...
Figma
多年以前,当我们刚刚开始频繁听到「大数据」这个词的时候,很多企业和团队的负责人开始认为,这是他们所缺少的东西,是让产...
App设计
缘起 最近组内设计评审,视频和小说两个业务都涉及到在图片上显示标签(Tag)的设计,但是Tag的样式和位置却不完全不同,如下...
ui设计
图标是几乎任何网站都需要的重要组成部分,无论是用来传递信息、导航还是用来装饰,图标和类似图标的元素都是一种富有吸引力...
图标设计
笔者最近在参与组件库的设计工作中,发现了一个很有趣的现象:诸多设计师都会以8像素为基数设立间距规范,将其运用在界面和元...
ui设计
橙子的橙子:有个朋友拿了他做的界面,问我哪里需要修改,他总觉得不对劲,但不知道要怎么改。我把这些建议量化成可执行的标...
App设计
在这之前我得先提及一本书──《简约至上:交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了,非常适合身处项...
UI
容错的定义最初来源于计算机领域,当计算机发生故障后不会崩溃,可以正常工作,并可以从错误中恢复。这个容错性是指对错误的...
产品