`
phenom
  • 浏览: 408920 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

Emerging UI Pattern - Side Navigation

 
阅读更多
http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html
文章翻译大概内容:这是一篇关于侧边导航栏的文章,说明了侧边栏与原始的dashboard面板的不同与优势所在。
能力有限,翻译中有不少问题,勉强着看吧,英文原文也不难看得明白。
图片下载不了的,可以使用网页代理打开

android ui在去年得到了非凡的改进了,这里列举了一些像google+应用的画廊https://plus.google.com/u/0/b/115177579026138386092/115177579026138386092/posts/PSkxzcN7U1J
主要的改变是表面的:holo主题,roboto字体等。我们没有看到用户界面有太多的变化。现在这些变化正在发生。
facebook的边栏导航被一些其它应用采用了,首先是一些应用重新设计,也有evernote使用它,之后的google+应用也采用了这种设计模式。
不同的应用实现是大不同的。导航看上去不同,但后面的实现方法是 一样的。构思主要是提供快捷方式,让用户不用离开当前的页面。

这些可视化的不同只是表面的,google+应用的边栏导航是在UI的顶部,其它的在ui的底部。google+也有向上的图标,然后在菜单出现时显示action bar,其它的应用没有。
前些日子也有关于这种模式的的一些有趣讨论在google+页面上。https://plus.google.com/115177579026138386092/posts/AvXiTF7LqDK

dashboard模式已经走到尽头了。
边栏导航取代了很多的dashboard的设计模式,使用dashboard的劣势在于用户在内容间导航太慢了,
dashboard需要让用户返回应用主界面,然后再导航到其它的页面。如用户需要到一个列表页面,然后选中一项,再导航到相应的界面等。
新的侧边导航栏解决了这些问题,用户可以直接访问应用的主要部分,而不需要后退。
示例图中的就是可以从左边导航栏出发,然而可以从应用 任意部分移动到左边。
侧边导航栏比前面的dashboard强多了。可能还有一些用户使用它。但有更多的限制了。....
还是需要一段时间对dashboard说byebye,

侧边栏的问题:
不幸地是侧边栏更复杂。
向上?
在Android向上不是我喜欢的方式,用户不会区别向上与后退。google向arrow向上,但也无效。用户总是将向上按钮认为后退按钮。
我认为在侧边导航栏中,向上变得可有可无了。如果应用架构好,可以提供一个简单的方式来通过侧边栏 访问应用的任何 主屏。而不是几次点击才能达到的。手机的后退键也是需要小心处理的。
看Google+应用,侧边栏如何工作:你可以看到:需要先向上,回到目录主屏,然后才可访问到侧边栏。
替代向上按钮,我更喜欢在action bar左上角的图标打开侧边导航栏。
如果一定要使用向上的按钮,注意不要使用向上的图标,可以使用一个按钮,向上的图标不明确展现的方式,

我认为需要一另一个图标来配合侧边导航栏 ,向上的图标与打开侧边栏 的图标不同,显示向上的比较容易混淆。

后退栈的问题:
正确的处理后退栈相当关键。侧边栏 会让后退栈变得复杂。Alexander Blom写了一个blog关于这个话题的。
Android navigation and Spotify (with friends):http://alexanderblom.se/2012/04/23/android-navigation-and-spotify/
Slide-out navigation done better:http://alexanderblom.se/2012/06/01/slide-out-navigation-done-better/

是什么打开了侧边栏 ?
如何记用户打开侧边栏,什么手势或按钮可以处理?
对选择侧边栏 的用户来说,它是一个重要的组件。用户不可能导航应用而不知道如何使用。
在我使用了所有使用这种模式的应用后,我感觉没有一个做得很棒的。最好的是Prixing应用,https://play.google.com/store/apps/details?id=fr.epicdream.beamy,这个应用将向上的按钮修改为打开侧边栏的按钮。
这个应用也有一些手势快捷方式来访问菜单,用户可以执行bezel swipe(不知道什么意思)打开它。但可以看这篇文章http://www.androiduipatterns.com/2012/02/bezel-swipe-solution-to-pan-and-swipe.html
我认为的改进只是使用应用的图标作为主屏图标,然后添加一些其它的图标显示它们自己的用处,(感觉很混乱,大概作者的意思是相当讨厌那些图标表现的与实现蕴含的意思不符合,向上的图标就是例子。)

其它的应用使用了不同的方法来实现侧边导航栏。evernote使用swipe在用户界面上,这导致了一些问题,就是在tab间的手势。(这可能也与action bar有点交叉的,在使用actionbar后可以左右的滑动手势,如果这时加上侧边栏 ,又使用手势,将会让这一切变得复杂。)

我建议,还是从home按钮开始导航到侧边栏,提供bezel swipe作为快捷方式提供相同的功能,你可以使用向上按钮,但需要注意不要混淆他们,特别是和导航按钮。

侧边导航栏里的行为:
前面已经讨论了侧边导航栏,但没有提到导航行为,action bar取代了上下文相关的行为,当它打开时,你的应用有必要可以到达任何一部分么?
evernote解决了这个问题,他们引入了一个侧边导航栏的行为。这种实现很好。势不可当的趋势,清晰地表明了用户的行为和轻松地导航,

这个叫什么?
模式的命名和描述是很重要的,可以从它的作用来命名。
这种模式的名字是什么,前面提到侧边导航栏,多数情况下这么称呼,也有一些其它的称呼:
Side navigation
Fly-in app menu
Slide out navigation
Sliding navigation bar
Slide menu
...
我们等待Google命名它,最好是在其它确定的名字前。

技术实现:
侧边导航栏 现在没有包含在sdk里面,有一些github的荐实现了这种ui(但没有一种 实现的效果好的。)android-fb-like-slideout-navigation at github
https://github.com/korovyansk/android-fb-like-slideout-navigation

EDIT: Here's another library project:
https://github.com/darvds/RibbonMenu
Thanks Mr BuBBLs in comments!

Two more library project:
https://bitbucket.org/jfeinstein10/slidingmenu/overview
https://github.com/Gregadeaux/android-fly-in-app-navigation

如果你知道其它的实现请在Google+页面评论
Cyril Mottier也写了关于实现这种模式的文章,很值得阅读的:
The making of Prixing #1: Fly-in app menu
http://android.cyrilmottier.com/?p=658
The making of Prixing #2: Swiping the fly-in app menu
http://android.cyrilmottier.com/?p=701
The making of Prixing #3: Polishing the sliding app menu
http://android.cyrilmottier.com/?p=717

https://play.google.com/store/apps/details?id=fr.epicdream.beamy由它实现的Prixing应用。

展望:
我认为这是在android的ui设计的一大进步,我们需特别小心地创建不可控制的不同实现,看上去一样,但功能不同的控件来误导用户。


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics