十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

移动端设计时在何种环境下使用何种菜单?

百恒网络 2016-12-14 945

用户体验设计除了细节还是细节,每一个界面,每个动作我们都要深入分析经历无数的体验找到其中最优的体验方式呈现给用户,这是我们作为设计师必不可以的过程,前面我们通过《移动终端应该提供什么服务内容?》一文向大家介绍了作为移动终端以什么方的方式将内容呈现给用户,接下来由南昌APP开发公司百恒网络UI设计师向大家进一步介绍移动端菜单的设计要求及应达到的效果。

设计者在选定了应用程度与网站的内容和功能后,就应该考虑如何向用户展 示,让用户很容易看到内容、使用到功能。关于移动终端的菜单设计,别人最 常问我的问题是:采用选项卡菜单还是汉堡菜单 ?应该如何选择?和大部分用户 体验的相关问题一样,我的最佳答案是:“看情况而定。”设计者要根据应用的内 容、具体环境、设计策略多个条件做决定。最终呈现在用户面前的界面不过是对 上述条件深思熟虑后,精心设计的结果而已。

直观菜单

最传统的菜单设计与网页菜单设计十分相近,即列举出菜单的所有项目。这 种方法没有任何风险:一切都在眼前,用户不会错过任何内容。但难点在于很难 把希望展示的内容统统列举出来。

什么时候使用直观菜单?

下面是可以或必须采用直观菜单的几种情况。

◎ 当菜单拥有建议能力的时候,换句话说,菜单可以激发用户产生浏览页面 的想法。

◎ 当用户需要高效率的时候:用户需要通过菜单立即进入各个功能,这时直 观菜单更理想。

◎ 当菜单选项不多的时候:添加一个“其他”选项就可以达到全面覆盖目 的,我在后文中会详细介绍。

◎ 当基本不存在屏幕空间不足问题的时候。

◎ 当用户需要常常从一个页面跳转到另一个页面的时候。

弥补直观菜单的缺陷

直观菜单存在两种缺陷:一是菜单在屏幕上占据空间较大;二是菜单无法容 纳过多数量的选项。以下是弥补这两种缺陷的方法。

在用户不需要菜单的时候将菜单隐藏

直观菜单最大的问题是它始终存在于屏幕上,十分碍事。所以,在人机交互 的某些时刻,尤其在用户探索页面和阅读内容的时候,最好将菜单隐藏起来。此 时,我们可以假设用户不需要太多的整体导航功能选项。

两者兼顾的方法 在 iPhone 最初的开发指导思想中有这样一条建议:标签栏 (tab bar)中的 最后一个选项应当是“更多内容”“其他”等类似选项,用户只需点击一下就可 以展开次要选项。当然,在任何移动应用中都能采用这种方法。

隐藏菜单

移动终端像素有限,设计者显然需要其他方案来解决菜单过大的问题,于是 汉堡菜单 4444 及其衍生设计应运而生。无论菜单是大是小,“汉堡菜单”的主要原则 是隐藏菜单,并通过点击屏幕上的图标展开菜单。隐藏菜单往往在旁侧竖立摆 放,需要浏览时会出现在屏幕的左侧或右侧。因此人们也把这类菜单叫做“抽屉 菜单”,在软件里也有类似的设计。

什么时候采用隐藏菜单?

隐藏菜单的最大优点是占据屏幕空间极少,可以把空间留给其他元素。其最大 缺点是隐藏了菜单的具体内容:如果用户不打开菜单查看,从表面上什么都看不到。

众所周知,可以被直接看见的直观目标的使用频率更高。如果采用隐藏菜 单,被隐藏的具体选项功能的使用频率会大幅降低。隐藏菜单没有建议能力 4444 ,也 就是说,只有在用户主观希望去寻找一些东西时,才会点击隐藏菜单进行搜索。

隐藏菜单不会自行给予用户任何启发,激发他们产生使用隐藏内容的想法。常言 道:“眼不见,心不念。”这句话在人机交互的世界中得到了最完美的诠释。

然而,如果被隐藏的内容并非应用中的关键部分,那么隐藏菜单完全可以接 受,甚至应该得到推崇。从人机工程学角度看来,通过点击一下来展示所有功 能,这种设计没有太大意义:这其实意味着,设计者不知道该如何取舍,如何找 到合适的平衡点。还是那句话,想要设计高效的导航,设计者首先要考虑如何按 照内容和功能的重要性进行分级的问题。

南昌网站建设公司百恒网络UI设计认为以下是可以或必须使用隐藏菜单的几种情况。

◎ 当菜单里没有任何重要内容,或者设计者希望向用户重点推荐的内容时: 即次要内容和支持性功能,如用户账户、设置参数、分类筛选、联系人, 等等。

◎ 当屏幕上已经默认显示了大部分功能时:以新闻实时播报、社交网络为基 础的移动应用大多如此。另外,一切属于供应方推送 44 (push)而非用户索 4 取 4 (pull)的应用也属于这种情况。

◎ 当用户已经知道或能够猜到存在一些功能时:最常见的用户登录功能,以及 一些应用所特有的功能,例如,用户应该能猜到报刊类应用程序或网站上 应该具有按照政治、金融、国际新闻等主题对内容进行分类筛选的功能。

◎ 当某一个选项属于一系列惯例性操作中的一步时:比如用户身份验证。

◎ 当清单内容很长的时候:如电子商务网站的商品清单、在线杂志的栏目单 等。当然,在核心页面和重要位置上,仍然可以重复强调隐藏菜单里列举 的内容。

◎ 当不同项目之间的用途互不相关时:比如针对不同客户群的不同项目。用 户在使用中不会在各个选项之间穿梭,也就是说,不会从一个栏目跳到另 一个栏目。

◎ 当设计者希望尽可能去除屏幕上的多余元素,让用户聚焦关键内容时:隐 藏菜单实际上成为一种净化界面、优化结构的好方法。

◎ 当出现两个菜单,且彼此形成了竞争关系时:设计者应该找到妥协的方 法,隐藏相对次要的菜单或用户能猜到存在的菜单。

弥补隐藏菜单不够直观的缺陷

隐藏菜单天生具有“隐藏”的缺陷。有几种窍门可以弥补这种缺陷。如果设 计者在几经权衡之后决心使用隐藏菜单,但仍担心用户看不到菜单藏起来的内 容,这时,以下方法就会发挥作用。尤其在用户不了解或者很少使用移动应用的 时候,设计者更应该尝试下文介绍的方法。

使用约定俗成的醒目图标

第一条建议就是:尊重约定俗成的习惯。设计者选择了隐藏菜单,就意味着 把菜单内容置于用户的视线之外了。设计者应该竭尽所能让隐藏菜单有机会展现 在用户眼前。现在,设计者们最常采用汉堡菜单 的形式设计竖向综合性菜单。但 是,“汉堡菜单”往往伴随另一种视觉图标,有的设计者甚至索性用这种图标取 代“汉堡菜单”,让菜单更醒目、更富内涵。

我们还应记住:界面越简单,用户就越容易发现隐藏菜单,完全不需要设计 各种花哨的图标吸引用户的注意。

竖向隐藏菜单的图标该摆放在哪里?最常见的是把图标放在屏幕的左上方。 设计者也可以打破习惯,只要保证图标足够突出就可以了。

如果隐藏菜单包含的选项具有相同的语义元素,那么设计者不必使用传统图 标(进入隐藏菜单的简单方式),而可以选择一个展现所有选项共性的图标。

配上说明文字

如果设计者十分希望凸显菜单,但又不能默认显示菜单内容,那么可以加入 说明文字。说明文字自然而然会增大进入菜单的按键尺寸,让按键更加明显。

配上通告文字

通告文字能够把用户的注意吸引到菜单栏目的更新内容上。当然,这绝不是 要“发明” 一堆和使用环境毫无关系的通知。设计者必须谨记,你要做的仅仅是 利用通告文字弥补相关栏目不够明显的缺陷。

配上动画

设计者还可以通过动画效果让用户注意到菜单的存在。采用动画效果时也要 适度,避免增加人机交互操作的负担。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌APP开发公司-百恒网络 http://www.jxbh.cn/app/index.html 如转载请注明出处!


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×