恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
App标签栏中的设计细节
0.0°
2018-11-14 原创文章 经验/观点 举报 4635 20 15 0

「前言」

标签栏是app的导航,具有明确的表意功能,其作用是辅助文字来指引用户进行快速导航,具有图形化的符号,方便用户快速寻找,提高应用的易用性。


因此标签栏设计可以从3个维度思考:图标样式,布局展示,交互效果。


一  图标设计

不同的产品类型会使用不一样的图标样式,我把图标样式简单的分为  面形图标,线形图标,线形+面形图标,节日图标。


1)面形图标

面形图标具有广泛的适用性,由于面形图标的视觉占比最大,具有强烈的视觉表现力,最常用于标签栏设计,方便用户快速寻找一目了然。

Image title

轻加得到为例,它们分别是运动类和学习类产品。选择存在感很强的面形图标,更加易于用户区分。


2) 线形图标

线形图标通过线条来表现物体的轮廓,比面形图标更能塑造优美的外观,绘制一套线形图标会更具整体感并且不会对界面产生太大的视觉干扰,常见的线形图标有2px,3px,4px的描边。


2px


Image title

爱彼迎虾米音乐为例,采用2px图标在手机上显示比较细,图标的细节丰富,识别度稍差,多用于内容丰富的产品。


3px

Image title

花生日记,皮皮虾为例,采用3px图标,表现性和识别性都会强一些,多适用于娱乐性的产品。


4px

Image title

享物说作业帮为例,采用4px图标,造型上更醒目突出,简洁大方。由于线条过于厚重,因此在设计时不易过于复杂。


3)线形+面形图标

面形加描边一般用于选中状态中,细节丰富,同时给人活泼的感觉。


2px

Image title

3px

Image title

4px

Image title

默认状态下是线形图标,同时加一些小元素,在选中状态下线形描边加颜色填充,让图标细节更丰富,令人印象深刻。


4)节日图标

节日图标一般在春节,国庆,圣诞,端午节等大家熟知的节日时会使用,一般产品的周年庆也会使用特殊的图标。 

Image title

天天向商为例,产品满3周年,图标显示为三周年庆,并且会有拟物图标突出产品。而天猫是在圣诞节做的圣诞拟物图标,营造活泼的氛围,提高好感度。


二 布局及背景展示

底部常见标签栏个数一般为3-5个,但是不同的产品在设计之初可能承载的内容不同,体量小的产品可能只有2个,不同产品调性会有不同的背景样式。


1) 屏幕等分

市面上的app大部分都采用这种等分方式,屏幕整体宽度除以标签栏个数. 

Image title

例如荷包微信读书,运用屏幕等分的方式排列,一目了然。


2)标签栏背景   

白色背景

市面上大部分的app都是以白色背景居多,而由于界面底色也是纯白色居多,为了让用户区分界面白色底与标签栏白色底,在白色的背景会使用2种方式区分:描边,投影。

Image title

灰色背景

灰色背景能更好的突出标签,和界面背景很好的区分。 

Image title

樊登读书支付宝,使用线性图标加浅灰色背景,更好的突出标签栏。


黑色背景

黑色背景比较少见,常用于时尚类,视频编辑类,金融类产品中。 

Image title

例如MOMO,偏时尚类的产品,黑色比较符合产品调性;富途牛牛是金融工具,采用黑色背景比较符合这类产品的调性。另外视频编辑和制图工具也有黑色背景标签栏,比较少见,暂时没找到截图,大家可以找找看哈~


无背景

无背景的标签栏比较少见,采用此类背景的产品一般以内容为主,产品功能比较简单。 

Image title

以抖音为例,首页和关注都是视频内容,消息和我的都是个人信息,功能简单,采用无背景让用户沉浸感更强,突出产品内容。


三 交互效果

标签栏的交互效果,通常是选中与未选中的区别,增加了趣味性,从而增强用户体验。 

Image title

例如  转转,QQ,选中的会有动画,与其他会有呼应,趣味性很强,其他方式的交互效果还有爱奇艺,土豆等,大家可以下载观察一下。


总结 


图标样式:以面形图标,线形图标,线形+面形图标,节日图标等为主。根据产品调性选择适合的样式。


布局及背景展示:屏幕等分,一般大部分产品都是这种方式分部。背景会分为:白色背景,灰色背景,黑色背景,无背景,市面上产品以白色背景居多,时尚类,金融类使用黑色背景居多,以内容为主的功能较少的产品会选择无背景,因此要根据产品调性来选择背景样式。


交互效果:交互效果常见于选中与未选中的区别,增加了趣味性,从而增强用户体验。













更新:2018-11-14

收藏

20人已收藏

葵小葵同学

努力努力再努力

  • 2

    作品

  • 8

    粉丝

  • 126

    关注

  • App中logo设计的技巧
相关标签
GUIui经验设计

    猜你喜欢

      2018-11-14 原创文章 经验/观点 举报 4635 20 15 0

      App标签栏中的设计细节

      0.0°

      你确定要举报App标签栏中的设计细节

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年11月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      20
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录