导航栏设计的要求有哪些,导航栏菜单的设计与实现( 二 )


好的设计应该是用户在没有任何外界指引的情况下 , 也能仅靠第一眼就能知道该如何从A点到B点 。你应该使用合适的视觉线索(图标、标签或者颜色)直观的告诉用户 , 而不必有任何多余的解释 。
(1)图标
底部导航块往往都是使用图标表示 , 它们应该传达出跟其内容匹配的信息 。虽然有一些用户熟知的通用图标 , 大多是用来代表诸如搜索、邮箱和打印等功能 。不过这种通用图标非常稀少 。但是程序设计者常常设计出从视觉样式很难识别出其对应的功能特性的图标 。
△ Bloom.fm Android客户端之前的做法 , 用户很难理解自己当前的位置
(2)颜色
避免在底部标签栏使用不同颜色的图标和标签 , 应该使用程序的基本色调来突出当前所选标签 。
△ 左:不同颜色的图标使你的程序像圣诞树 右:仅使用一种基本色调
请遵循一条简单的规则——给当前的选中标签使用程序的基本色调进行着色 。
△ Twitter iOS客户端底部按钮
如果底部导航栏本身有颜色 , 应该使当前选中的图标和文本标签呈黑色或白色状态 。
△ 左:避免在一个有色的底部导航栏使用不同颜色的图标 右:使用黑色或白色图标
(3)文本标签
文本标签应该是对导航功能的一个简短清晰的定义 。应该避免使用太长的标签造成因被截取而显示不全或换行现象 。
△ 避免文本标签换行、截取、压缩
素有标签元素应该很容易被用户看清楚 。用户点击元素时他们应该清楚的理解要发生什么了 。
(4)目标大小
应该使目标区域足够大能被轻易的触摸点击到 。
Android设计规范建议底部导航栏遵从以下尺寸进行设计:
△ 手机上固定大小的底部导航栏
(5)标签上的标记符号
你可以在一个标签栏图标上显示一种标记符号来表明有与该视图或模式有关的新信息 。
△ 使用标记符号与用户对话
4、使导航不言自明
优秀的导航设计就好比指导用户旅程的一只无形的手 。毕竟 , 如果都不能别用户发现 , 那么即使最棒的功能或最能引人注目的内容也无法接触到用户 。
(1)行为
每一个底部导航标签图标都必将带领用户到新的地方 , 可能不光光是打开一个菜单或是弹出框 。点击一个底部导航标签时 , 应该直接带领用户前往相关的视图或者刷新当前活跃的视图 。
不要使用标签栏给用户提供那些在当前屏幕/模式下发挥作用的控件元素 , 如果你想提供给用户控件 , 请使用工具栏 。
△ iOS的工具栏
(2)争取一致性
尽可能在每种情况下显示相同的标签 。这样的视觉稳定性对用户来讲是极好的 。

猜你喜欢