html5底部导航图标制作,如何做好UI底部导航栏图标设计
原标题:如何做好UI底部导航栏图标设计
如何做好UI底部导航栏图标设计?图标在产品中的应用非常重要,不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。UI设计创新技能层出不穷,UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,那么如何做好UI底部导航栏图标设计呐?今天就进行简单的说明。
一、底部导航栏图标重要性及维度
1.重要性
底部导航栏的图标是路牌,承担着指路的作用,给用户指明进入产品后可以分别通往什么页面。早期的底部导航栏是单一的指路功能,经过多年的交互设计迭代后,附加了「信息展示」和「引导操作」的作用,这点会在下文中详细阐述。
2.三个重要评估维度
品牌调性
品牌调性决定了图标的体量感、差异化和创意延展。怎样评估图标设计能够体现出品牌调性呢?最简单直接的方法:截屏首页,不看顶部栏,仅从底部导航栏能看出来这是什么产品,就算成功体现了品牌调性。
识别度
识别度决定了用户辨识其它页面功能的速度。高识别度的图标能协助用户辨识,低识别度的图标会阻碍用户辨识。在选择做这部分图标的时候,一定要考虑识别度的问题,进行创新要建立在高识别度的基础上。
美观
导航栏图标美观的要义是:统一、精致。统一不代表绝对统一,精致不代表过于精细。要做到美观,可以遵循以下几点:大小统一和谐、线条粗细一致、圆角视觉统一、内容繁简平衡。
将三个维度按重要程度来排序,是品牌调性>识别度>美观。有的设计师会选择以美观度作为优先标准。但站在产品的角度来说,应该以体现品牌调性和识别度为重要标准,在这基础上再进行美观设计。下图中,新华书店APP的底部导航栏图标略显年代感,图标细节表现不一显得不够统一和精致,然而用户还是能够根据图标一眼区分各个导航入口的功能。它们可能不是设计师眼中好看的图标,但它们是用户眼中好用的图标。
二、底部导航入口的数量
底部导航入口一般在3-5个,最常见的是4-5个。这个数量由什么决定呢?
1. 最高数值由认知心理学决定
在使用APP的时候,底部导航栏使用到的是人记忆系统中的感觉寄存器和短时记忆。考虑到APP面对的人群非常广,短时记忆容量不一,选择了7-2(也就是5)作为底部导航入口的最高数值。
2. 具体数值由产品的框架决定
产品经理会通过项目背景和用户调研,决定产品的功能结构。而功能结构图划分的类别决定了底部导航入口数量。有的产品功能非常单一,结构也单一,三个导航入口已经能够满足需求;有的产品功能复杂,则需要更多的导航入口,用以划分APP功能,帮助用户快速识别。
三、底部导航栏模式
底部导航栏有权重平分、强调信息、引导操作这三种模式。本次深度分析采用了30个产品作为对象进行研究,如何做好UI底部导航栏图标设计https://www.aaa-cg.com.cn/ui/2490.html/?gpf其中大部分为知名社交电商类产品。因为这类型的产品比较多,迭代完善,可参考性强。
1. 权重平分
当产品的功能结构权重比较平均,不希望突出其中某个结构时,一般采用权重平分的模式,即每个底部入口的分量都是平均的。常规产品会采用这样的形式。
2. 强调信息
当产品需要强调某些信息引起用户注意或同一个按钮承担两个功能时,设计便可以选择在某个入口添加明显的信息指示或功能。增加功能的底部导航入口不一定是首页,也可以是其它入口。
3. 引导操作
当产品希望用户能够进行某个操作,需要进行强操作提醒时,可以选择引导操作的导航栏模式,在中心突出操作按钮。大众点评、百果园、转转、星巴克、闲鱼等都是采用这种模式。
四、底部导航栏图标表现形式
1. 线性图标的优势
从大多数APP设计来看,未选中状态下,线性图标占有优势。相对面性图标来说,线性图标有更多可能性,且选中与未选中的区分落差较大,对比明显。
2. 其它图标趋势
未选中状态的图标常用线性方式,目前的主要趋势还是在图标表意上下功夫;选中状态的图标常用面性、微质感、立体、插画等方式。
总结
图标对我而言最有趣的地方在于,它是不同组合出来的结果,每一次的设计都会有惊喜。不同的品牌、不同的产品背景、不同的产品框架…这些千变万化,让图标有了生命,也让每一次的设计都有意义。
责任编辑:
html5底部导航图标制作,如何做好UI底部导航栏图标设计相关推荐
- 如何设置自定义任务栏图标_轻松自定义Windows 7任务栏图标
如何设置自定义任务栏图标 Would you like to fully customize your Windows 7 icons without having to manually chang ...
- 服务器图标怎么显示在任务栏,Win10任务栏图标显示异常怎么办?解决任务栏图标显示异常的方法...
在使用Win系统中经常会发现任务栏中的通知图标有时候会显示不正常,早就应卸载的软件,图标却依旧显示在任务栏之中,甚至有时候导致任务栏上的声音.网络等程序都无法启用.遇到这样的问题也不用太着急,小编来教 ...
- win7 任务栏图标计算机,Win7系统电脑清理任务栏图标的操作方法
我们在电脑使用的过程当中,会安装很多软件,而随着软件的卸载,任务栏却会留下使用痕迹,这样会感觉任务栏很乱,还会影响电脑的运行速度,那么win7系统怎么清理任务栏图标呢?今天为大家分享Win7系统电脑清 ...
- 【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作
1.常用模块类名命名 2.快捷导航shortcut制作 (1)快捷导航整体上 在common.css中: /* 左浮动 */ .fl{float: left; } /* 右浮动 */ .fr{floa ...
- VC工具栏图标制作流程
VC工具栏图标制作流程 VC做工具栏上的图标,或其他用到的图标是比较麻烦的了,遇到了几次,干脆把流程写下来: (1)准备好要用到的图标资源,记得图标是有可能有版权的,http://www.iconfi ...
- VC 单文档程序 隐藏程序及任务栏图标
1 在APP类InitInstance()里 注释掉: m_pMainWnd->ShowWindow(SW_SHOW); 2 CMainFrame::OnCreate(LPCREATESTRU ...
- Win11任务栏图标重叠怎么办 Win11任务栏图标重叠的解决方法
Win11操作系统也推出一段时间了,不少小伙都有下载体验,但有一些小伙伴在使用Win11系统的时候发现自己任务栏图标重叠在一起,那么碰到这种情况应该怎么办,下面就和小编一起来看看有什么解决方法. Wi ...
- qt修改程序图标名称_【Qt开发】更改应用程序图标和任务栏图标
说明 实际开发过程中,生成的应用文件不会用默认的图标,同时程序启动后任务栏的图标也需要修改,还有窗口的图标,这样显得程序不那么low.更改程序的图标有多种方式,基于Qt Creator或vs开发的方式 ...
- 自定义底部导航栏图标
底部导航栏我门一般的实现方式就是 RadioGroup 和RadioButton这种组合.但是这样会有很多弊端.比如有个消息提示.比如要随时改变图标 /*** Created by sdx on 20 ...
最新文章
- fekit前端代码模块化工具
- python字符串换行连接_零基础学python_03_字符串(拼接+换行+制表符)
- MyEclipse 2014中 Window--customize perspective 功能 打不开的解决办法
- [译]GC专家系列5-Java应用性能优化的原则
- java文件不能转class_安了jdk 却不能将.java文件转换成.class 文件,一运行就说‘javac’不是内部或外部指令,却能运行.class文...
- qq群关系数据库 mysql_QQ群关系数据库
- 【辨异】—— 可见 vs. 不可见
- android开发里遇到的坑——eclipse项目导入android studio以后Run按钮灰色
- spring cloud分布式微服务-配置中心git示例
- python笔试题 github_在GitHub上收获6519颗星星的Python面试题资源,到底有多牛?
- win7系统桌面计算机不见了,win7 64位旗舰版系统桌面上的计算机图标不见了
- 在电梯里你的一举一动
- 成都信息工程大学计算机分数线,成都信息工程大学录取分数线2021是多少分(附历年录取分数线)...
- 熬夜爆肝整理!史上最硬核的Mysql函数大全,还不收藏?
- python的IDLE打不开如何解决
- Leetcode刷题986. 区间列表的交集
- 2022中国(成都)预制品暨调味品展览会
- Kotlin学习篇(2)—— Kotlin的函数
- fastai入门教程和基本概念
- java计算机毕业设计ssm金华学校社团管理系统
热门文章
- openinstall的价值就是帮助App开发者成功
- 计算机无法完成评估,Windows Vista下系统评分无法完成的问题
- ARC下循环引用的问题
- windows家庭版添加windows沙盒功能
- 【形式化学习笔记】1:Event-B相继式(Sequent)和推理规则(Inference Rule)
- js 关键技术集合
- python 代码格式化工具:pep8ify
- lol1月8日服务器维护,LOL2018年1月16日停机维护公告_LOL国服8.1版本更新内容汇总_飞翔教程...
- python实现最小二乘法
- JAVA编程学习记录(内部类)