设计师都知道设计绝不仅仅是做出外表好看的东西 , 设计还涉及到如何做才能让用户使用你的网站/应用程序 。这项工作内容就像跟用户间对话一样 , 而导航就是对话内容之一 。因为如果用户连他们究竟在哪儿都搞不清楚 , 那你的网站/应用程序设计得再棒又有什么用呢?来看这篇好文 , 帮你做出合格的底部导航设计!
如果你连基础都没打好 , 建议最好学习一下:《交互基础知识科普!带你认识最热门的12种导航模式》 。
如果想看深入的好文 , 可右戳直达:《交互设计实战!Tab导航与侧边抽屉导航的巅峰对决》
一、为何底部导航如此重要
Steven Hoover 在他的「用户究竟如何使用移动设备」的研究中发现 , 49%的人习惯于使用单个拇指来完成所有操作 。在下图中 , 屏幕中不同颜色的区域表明用户拇指能够触及的难度等级 , 其中 , 绿色区域表示很容易触及的范围 , 黄色则表示拇指要伸展开来才能够到 , 而要触达红色区域则要求用户改变设备的手持方式 。
△ 用户单手操作智能手机的区域图
这样看来 , 将顶级(经常使用的)功能放在屏幕的底部是非常重要的 , 因为这里是用户使用拇指能轻松跟设备产生交互的位置 。
许多程序正是遵循上述原则 , 使用底部导航来表示程序中最重要的功能 。Facebook便是代表之一 , 这样做也允许了用户能在不同功能间快速切换 。
△ Facebook iOS客户端底部导航
二、底部导航设计的四个关键点
导航通常就是指引用户前往他们想去的地方的工具 。底部导航则应该用来表示程序中常用的几项重要功能 。这些功能要求能够直接从应用程序的任何地方访问 。
好的底部导航设计遵循以下规则:
1、只显示最重要的功能
使用3-5个顶级导航标签 。如果少于3个标签 , 考虑使用标签选项卡替代 。
避免使用超过5个底部导航块 , 否则会造成块与块间显示太拥挤 , 也容易造成误点错点问题 。另外 , 过多导航块会让你的程序看起来更加复杂 。
如果你的顶层导航块确实超出了5个 , 不要都放在底部导航 , 考虑放在其他地方或选出最重要的放在底部 。
2、避免使用滚动设计
对于小屏幕来说 , 隐藏一部分导航块显然是一个解决方案——你不用担心屏幕限制 , 只需要把导航块置于一个可滚动区域 。但是这种方式难免会降低使用效率 , 因为即使你已经看到了你需要的块 , 你可能仍然需要滚动一下才能看到全部标签 。
△ Rookie Cam iOS客户端滚动设计方案
3、告知用户当前位置
没有向用户表明其当前所在的位置大概是所有程序常常犯的一个错误 。而对于用户 , 在成功地使用导航之前 , 他们要搞清楚的基本问题便是“我现在在哪” 。
推荐阅读
- 营销网站结构和方案设计,比较好的营销网站有哪些
- 设计师设计一套房子多少钱_设计师设计房子多少钱
- 交互设计7大原则 交互设计规范文档原则
- 设计合理的合同要素提取_影响要素需求的因素有哪些
- 深入了解用户标签画像 用户标签体系设计思路
- 详解这8个步骤及意义 产品设计开发流程8个步骤
- 装修设计图一般怎么收费 「装修公司设计费怎么收」
- 装修设计新行情报价,新中式装修别墅
- 公司logo设计免费制作方法 自动生成logo软件
- 自己做装修效果图app推荐 房间设计软件哪个好