全国免费咨询热线:400-611-9921
 
干货!侧边栏交互的利弊

2015-08-24

893

现在我们已经有数据说明侧拉菜单(又称汉堡包菜单)的使用,可能弊大于利。下面是一些数据:SidedrawernavigationcouldbecostingyouhalfyouruserengagementMobileMenuABTestedHamburgervsMenu:TheFinalABTest需要注意...
干货!侧边栏交互的利弊,互联网的一些事

  现在我们已经有数据说明侧拉菜单(又称汉堡包菜单)的使用,可能弊大于利。

  下面是一些数据:

  Side drawer navigation could be costing you half your user engagement

  Mobile Menu AB Tested

  Hamburger vs Menu: The Final AB Test

  需要注意的是,这是一件十分微妙的问题。而同样的问题,我们也已经在用户测试和其他一些事情中发现。

  我希望你们阅读过这篇文章后能对这个问题及解决方法有所了解,并且在使用这个模式前知晓其后果。

  问题

  不易发现

  更低效

  与平台原生导航模式冲突

  并不是一目了然

  不易发现

  “不在眼中的,就不会想到。”

  在这个模式的默认状态,侧拉菜单和里面所有的内容都是隐藏的。

  人们需要首先需要辨别侧拉菜单按钮是可以点击的——公司都认为应该使用一个菜单或者工具图标来表示,他们也确实感觉有必要这么做——但是在应用使用时可能就不是这个情况了,因为主页显承载了主要的功能。

  不那么有效

  尽管用户了解并看重这一特征,但是这个模式带来了一种导航认知摩擦,因为它迫使人们先打开菜单,然后才能看到其中的条目。

干货!侧边栏交互的利弊,互联网的一些事

  下面是一个对比的案例。展示了如果导航元素一直可见的话,导航效果是多么迅速。

干货!侧边栏交互的利弊,互联网的一些事

  和平台导原生航模式冲突

  除了上面那些问题,在iOS这样的平台上,侧拉菜单在没有与标准导航模式冲突下是无法实现的。

干货!侧边栏交互的利弊,互联网的一些事

  左边的导航栏按钮需要保留一个菜单按钮,但是我们也得让用户有回去的方法。设计师要么承认上图中存在的导航栏内容过载问题——甚至没有给标题留下空间,要么迫使用户点击好几次来进入下图显示的列表。

干货!侧边栏交互的利弊,互联网的一些事

  不一目了然

干货!侧边栏交互的利弊,互联网的一些事

  因为导航仅在用户想要进入应用其他部分时才可见,所以使得对特定内容信息的呈现更加困难。

  你可能会采用和Jawbone UP应用相似的做法:在侧拉菜单按钮旁边放置一个象征消息的图标。

  这个并不实用,因为这需要你去处理更多的图标,并且作为设计师来说可能要被迫去增加一个通用图标,而不是弱化图标含义。

  反之,下面的选项卡栏(采自twitter),让用户了解通知的情境,并且直接引导其到达相关页面。

干货!侧边栏交互的利弊,互联网的一些事

  认知

干货!侧边栏交互的利弊,互联网的一些事

  你可能有时为了节省屏幕空间而被迫使用它,但是这确实会让人们对他们看到的东西产生误导。当你认为用户看到了呈现在他眼前的所有内容的时候,其实我们会将注意力有一个焦点区域(而不是整个屏幕),即使屏幕尺寸很小也是一样。

  案例:消失的图标——改变移动设备的盲目性

  所以节省屏幕空间可以通过不损害导航或者不违背基本人机交互原则而达到目的,比如提供反馈或者展示当前状态。

  另外提醒一下:我们需要的是更新我们头脑中对人机交互的理解。我很确信这会帮助人们在进行视觉设计时避免很多错误产生。

  解决方法

干货!侧边栏交互的利弊,互联网的一些事

  关于问题本身写了很多,但是具体解决方法大家其实还不清楚。

  什么时候该使用它呢?

干货!侧边栏交互的利弊,互联网的一些事

  极少数情况下这种模式有用,但是一般性的原则还是尽量避免使用。

  IRCCloud是一个适合这个模式的应用——可以实现频道和频道成员之间的导航。

  由于主屏下面没有子页面的层级导航存在,所以这可以使用,信息可以简单地呈现出来。

  但是即使是在这种情景下,可以看到用户界面仍然信息过载了,应用的信息架构需要重新考虑了。

干货!侧边栏交互的利弊,互联网的一些事

  右侧的侧拉菜单展示了频道成员内容结果只是呈现活动按钮,而弱化展现整个频道相关操作。反之,设计师没有其他选择余地,只能将频道、网络和账号混合放在了一个单独的菜单之中:

干货!侧边栏交互的利弊,互联网的一些事

  接下来让我们去看看文章的下一部分。

  要是不用这种方法,我该怎么办呢?

干货!侧边栏交互的利弊,互联网的一些事

  侧边菜单会导致糟糕的信息架构,因为你只是一味将其添加进去,而没有考虑结果——直到人们实际使用的时候才会意识到它有多糟糕。

  解决方法是重新检查你的信息架构。

干货!侧边栏交互的利弊,互联网的一些事

  上面是一个如何去除侧拉菜单的例子。你可以按照那些彩点来了解这两种解决方法间元素的过渡方式。

  注意点:

  消息选项卡上直接显示当前状态

  项目总是可见的且可以立刻到达

  导航手势不能冲突

干货!侧边栏交互的利弊,互联网的一些事

  就这些固定的问题而言,我们也能够通过滚动方向来隐藏导航条从而节省屏幕的垂直空间,Facebook和Safari都应用了这种方式。固定的标签栏能够清晰的告诉用户当前所处的位置,这样我们就无需只依靠导航栏来确定了。

  如果你想要更简单,那么一个工具栏就足够了。关键是不要隐藏导航,而是允许直接操作,不要和现有的导航手势冲突,并且在相关图标上提供反馈。

  【更新】对于网站来说,我觉的最好的解决办法还是重新审视信息架构,而不是直接挪用iOS设计模式。下面一个只在网页顶部展示导航的设计就很不错案例。作为网站导航来说它足够明显,人们可以去向下滚动,然后立即看到呈现的可用选项。

  同样的,优化移动端网站体验还有一个秘诀:依据以下小窍门移除网页300毫秒的点击延迟,或添加触控事件,具体论述看这里

  如何拓展?

  我这里给的例子是基于iOS平台的,并且是在你使用标签栏或工具栏的情境下。

  但是标签栏内如何容纳超过5个标签呢?

  这不是理想的情境,这时可能需要重新考虑一下应用的信息架构了。但是如果你必须得有5个以上的标签,普通的模式是使用最后一个标签提供更多的选项,很不幸,这很像一个菜单。

干货!侧边栏交互的利弊,互联网的一些事

  你也可以使用一个滚动工具条,参见Rookie。这能避免使用侧拉菜单的问题,但是需要承担轻微高一些的导航认知摩擦,因为系统在区分用户点击和滑动意图时错误率会提升。

干货!侧边栏交互的利弊,互联网的一些事

  记住,与导航相比,第二种解决方法的操作更加合理。

  Rookie的采取的方法涉及的工具栏不确定状态下的滚动后驻留,在完成诸如裁剪、旋转等其中一项任务后就会隐藏表示任务已完成。

  工具栏隐藏并在下一次出现前复位的方法可以防止不确定状态的粘滞。

  结论

  所以你已经读了关于侧拉菜单模式的问题,并且在这里提供了iOS环境中的解决方法。


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
关键词:纵天科技,广州品牌网站建设公司,广州网站制作公司,广州网站建设,广州网站设计,网站建设,手机网站开发,品牌设计,用户体验
热门标签
营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭