ios底部栏设计规范_设计干货:底部导航栏规范设计总结
本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助。
本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助。
备注:以下内容在翻译过程中根据阅读习惯有相应的调整,如有不妥欢迎大家根据官网链接进行比对。
在移动应用程序中,底部导航栏可以在目标选项间自由切换。
用法
底部导航栏在屏幕底端展示3至5个目标选项,每一个选项由一个图标和文字标签展示,点击底部导航图标时,将带领用户前往与之关联的视图。
原则
人体工程学:底部导航栏在手持移动设备上容易触及。
一致性:使用时,底部导航栏显示在每个屏幕底部。
相关:底部导航栏上的选项必须同等重要。
何时使用
底部导航应用于:需在移动应用程序任意位置访问顶级目标
3至5个目标选项
仅限手机或平板电脑
底部导航不应用于:·单个任务,例如查看单个电子邮件。
·用户首选项或设置。
少于三个目标选项不要使用底部导航栏(使用标签选项卡替代)。
避免使用超过5个目标选项(这种情况,尝试选项卡或抽屉导航)。
组合使用底部导航和选项卡可能会引起混淆,因为他们与内容关系不够清楚,选项卡拥有相同的主题,而底部导航是顶级功能且彼此无关联。
剖析
导航栏
固定图标
固定文字
活动图标
活动文字
目标展示
展示底部导航目标选项的方式取决于目标选项使用数量:三个目标:所有目标选项用图标和文本标签展示;
四个目标:活动目标展示图标和文本标签、固定目标展示图标,建议使用文本标签;
五个目标:活动目标展示图标和文本标签、固定目标展示图标,空间允许则可显示文本标签。
此底部导航有三个目标,且每个都有图标和文本标签。
图标
底部导航目标始终包含一个图标,最好的方式是图标结合文本标签展示,尤其是如果图标没有明确含义。
图标与文本标签结合展示
文本标签
文本标签使用对底部导航功能简短而有意义的文字。
使用短文本
避免截取文本,截取可能会掩盖重要的目标信息
避免缩小单行文本
避免文本折行显示
图标和文本标签颜色
活动、非活动图标以及文本标签应与导航栏底块有明显的对比,活动图标应使用应用程序主题色或高强度被选中颜色展示,具体取决于组件的配色方案。非活动图标和文本标签可使用中强度的被选中颜色来展示。
底部导航活动标签使用应用主题色或高强度被选中颜色显示
避免使用不同的颜色或低强度被选中颜色来显示图标和文本标签,因为这会使用户难以区分活动图标并导航到其他目标视图。
行为
Android和iOS系统的底部导航会显示不同,当你选择底部导航选项时(当前未被选中),每个系统会有不同的显示结果:
Android:
该应用导航到目标顶级视图界面;重置任何先前的用户交互和临时屏幕状态,例如滚动位置,选项卡选择和内联搜索。
iOS:
目的地反映了用户之前的交互。如果用户先前访问过应用程序的该部分,则会返回到上一次查看的最后一个视图(如果可能,保留其先前状态);否则,应用程序会导航到顶级视图。
可以在需要时覆盖默认平台导航以改善用户体验。例如,需要在各部分之间频繁切换的Android应用程序可以保留每个部分的状态。或者,iOS应用程序可以将用户返回到顶级视图(或重置其滚动位置),如果它更适合用例。
在Android上,重新访问某个部分会重置该应用,将用户返回到其顶级视图。
在iOS上,当用户重新访问某个界面时,会返回到该界面停止的位置,例如详细信息视图界面。
当在应用程序的层次结构中向下移动时(从父屏幕到子屏幕),可以持久显示底部导航栏,以便在应用程序的各个部分之间快速导航。
肩标:
底部导航图标可以在其右上角使用肩标。这些标记可包含动态信息,例如一些待处理请求。
肩标;
带有字符的肩标;
带有最大字符的肩标。
滚动:
滚动时,底部导航栏可以显示或隐藏。向下滚动加载内容时,隐藏底部导航栏;
向上滚动回顶部时,重新显示底部导航栏。
过渡:
建议使用淡入淡出的动画在底部导航目标之间进行过渡。横向运动(一侧到另侧)过渡可能意味着不存在的项目之间的对等关系,或误导用户认为他们可以使用手势在各部分之间导航。
使用淡入淡出动画在活动和非活动底部导航目标间过渡切换。
避免使用横向运动在视图之间切换。横向运动保留用于对等目标间导航。
布局
1. 覆盖
底部导航可以被对话框、底部表单、抽屉导航、屏幕键盘或完成流程所需的其他元素临时覆盖。它们不应在任何屏幕上永久显示。
“Radio”屏幕的搜索功能触发屏幕键盘,暂时覆盖底部导航栏,直到搜索流程完成。
2. 固定导航栏
底部导航栏目标选项有固定位置,它们不会滚动或水平移动。
避免使用可滚动底部导航。
3. 视觉优化
在移动设备(横屏)或平板电脑上,底部导航目标可以保留纵向模式中使用的相同间距,而不是均匀分布在底部导航栏上。
在移动设备(横屏)或平板电脑上,底部导航目的地可以水平放置而不是折行。在这种情况下,建议选项均匀分布在底部导航栏上。
状态
底部导航目标可以是活动的、非活动的、聚焦或被选择。
底部导航通过不透明度和文本来显示选项何时处于活动状态。状态用于显示按下、聚焦和未选择状态。
非活动目标降低透明度,活动目标则全部显示。
非活动目标选项;
活动选项。
如果不始终显示文本标签,则只显示活动目标的文字。
没有文本的非活动目标选项;
带有文本的活动目标选项。
细则
移动设备
标注:
最小宽度
最大宽度
布局
今天分享的内容到此结束,更多相关延展内容,大家可以在官网进行查看。
译文地址:https://mp.weixin.qq.com/s/Q1Pw0aw2nTCqdIhFYDY2Aw
编译作者:黎沫limo,公众号:行设视觉
ios底部栏设计规范_设计干货:底部导航栏规范设计总结相关推荐
- html页面跳转时导航栏不变_解决Vue-iview封装导航栏刷新,导航栏消失之坑
1.前言 记录一次跳转路由时,导航栏选中消失的神秘事件. 2.事情原图 请看这张图,一开始路由跳转到这页面时,导航栏是有高亮的,但是在刷新的时候,高亮就消失了: 总所周知,客户是一种可以从鸡蛋里面挑出 ...
- css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
- ie9 java小程序设置_小程序 自定义导航栏
一.概念 上面整体就是自定义导航栏的区域(包括状态栏) 胶囊接口 /*获取菜单按钮(右上角胶囊按钮)的布局位置信息.坐标信息以屏幕左上角为原点 */ wx.getMenuButtonBoundingC ...
- ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题. 经过多次分析是因为底层大背景被设置了默认颜色引起,把它设置成对应白色就可以了: sel ...
- 微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏 固定导航栏 可滑动导航栏 顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
- ios底部栏设计规范_超全面的UI设计规范整理,你值得收藏!
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意. 本文整理汇总了一 ...
- ldaptemplate 分页_UI设计干货分享:设计语言 - 侧边导航栏/分页
原文作者:罗耀_UI 侧边导航栏.分页.步骤条的绘制方法 不管是做设计(感性)还是设计规范(理性),都是仁者见仁智者见智的,都很主观.我是想阐述出自己的想法供大家参考,文章中的数值也不是固定标准,还是 ...
- android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
- 总结定时器设计方法_超实用!网站导航栏设计方法总结
导航对于一个网站来说,起到重要的引导作用.一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用.下面跟大家分享下常用的几种网页导航形式: 1.顶部导航 ...
最新文章
- python 包和模块的区别_3分钟带你搞懂Python模块、包的区别和使用
- vmware-tools安装失败
- ~~spfa 算法(队列优化的Bellman-Ford算法)(附模板题)
- 第一百一十二节,JavaScript浏览器检测
- Oracle数据库常用Sql语句大全
- 命令创建vue项目工程
- Spring学习Ioc
- 关于安装ANACONDA遇到的无法定位动态链接库问题
- nginx反向代理实现指定接口访问指定机器
- linux下检测USB的热插拨
- 生鲜配送小程序源码_生鲜配送小程序系统功能开发介绍(附带源码)
- 360校园招聘2015届技术类笔试题(一)
- H5 App调试工具vconsole
- 机器“读懂”放射学报告
- 乔布斯的“神”与“魂”
- win10双显卡怎么切换amd和英特尔_Win10电脑上如何从双显卡切换为独立显卡呢?...
- 电销降低获客成本提升销售效率,外呼系统CRM应该这样做
- 大话西游2人数最多服务器,大话西游2四下服务器首只双终极黄金问世!修炼之路令人揪心...
- ctf-show-misc-游戏题
- oracle数据泵导入append,Impdp数据泵导入
热门文章
- 电商数据抓取的几种方式分享-开发平台接口、网络爬虫数据、数据挖掘
- Java怎么做一个简单网页呢?
- 上传file时accept限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式
- 移动端网页直接拨打电话
- 《穷爸爸与富爸爸》语录之一
- 联想拯救者y7000键盘有几个按键失灵_y7000p键盘失灵
- EXCEL中用TEXT函数将文本转换成日期
- 商业智能BI与业务结构分析
- hutool导出excel 设置单元格日期格式 poi设置excel单元格日期格式
- java excel 设置列为日期,POI - 如何将单元格值设置为日期并应用默认Excel日期格式?...