KickingBird

shut up

由“积米”导航栏上的返回按钮浅说iOS导航栏的设计

睡觉前写篇小文吧,关于iOS App导航栏上“后退”按钮的设计

 

在体验“积米”App(不知道积米APP的童鞋请穿越:http://www.jimi.com/

)时发现一个问题:在“积米”所有页面导航栏上的返回按钮都叫“后退”。

 

首先我们分析一下,iOS中导航栏的作用在于“导航”——告诉用户他们目前所在的位置,以及告诉用户他们从哪里来:

导航栏中间的标题——告诉用户他们目前所在位置

导航栏左侧“返回”按钮的名称——告诉用户他们从哪里来

若想提供良好的导航效果,让用户更好的浏览信息,这是两个必备的元素。特别是在“积米”这类信息层级多且复杂的App中。

简单说在设计导航栏时注意两点:

①导航栏中间标题为当前层级的标题

②导航栏上“返回”按钮名称为上一层级的标题

 

另外补充下导航栏上除控件外按钮样式的运用探讨:

 

       当点击导航栏上方向为左的按钮

时,当前页面自左向右滑出,新页面接着自左向右滑入;当点击导航栏方向为右的按钮

时,当前页面自右向左滑出,新页面接着自右向左滑入。

     若该页面是作为模态视图翻转或自下向上弹出,点击“取消”或“完成”后界面将以同样的形式收起,那么采用不带方向的按钮样式为好。  在这里,尤其不要使用带方向的按钮样式,因为这样点击后界面转换的效果会同用户的经验和预期不符。

 

 

“积米”App可以说的地方还有许多,我也将继续分析“积米”中的交互细节并尝试总结恰当的设计模式。

 

 

 

 

 

 

 

 

评论(3)

© KickingBird | Powered by LOFTER