详细解析移动APP导航设计的改版实战

2016-02-16 20:26 5 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的详细解析移动APP导航设计的改版实战教程,一起来看看吧!超容易上手~

【 tulaoshi.com - 平面设计 】

关于手机APP的导航设计讨论已经有很多了,特别是针对汉堡菜单的讨论。今天翻译的这篇文章,是原作者在真实的APP中对导航进行改版,观察数据并进行分析的一则小文,实战意义很强,可供借鉴。

在移动界面设计中,使用各种菜单控件来简化界面,对设计师来说很有吸引力 特别是在小屏幕的设备上。但是,将 App 的核心部分隐藏在这些菜单里,可能会对实际使用产生负面的影响。

若不在视线里,便不在感知中

为了简化 Polar 的界面设计,我们将之前的标签式菜单改成了切换式菜单。改版后的菜单看起来更「干净」,但接下来,菜单的日常使用频次却发生了暴跌。根本原因是当更多的选项被隐藏在了切换式菜单的里面,人们便不再在菜单之间进行切换了。

详细解析移动APP导航设计的改版实战,PS教程,图老师教程网

Polar

详细解析移动APP导航设计的改版实战,PS教程,图老师教程网

Polar – 菜单的日常使用情况统计表

译注:请注意,作者并没有在图表上标注纵轴是什么以及它的刻度。

另一个相似的情况也发生在 Zeebox 的设计者们将 App 的主导航从标签式改成抽屉式后。App 中的核心部分现在不在用户的视野中,所以无法被用户感知到。结果便是导航的使用频次急剧地下降。

详细解析移动APP导航设计的改版实战,PS教程,图老师教程网

Zeebox

只有在视线里,才会被感知到

当 App 的核心部分变得更加显眼时,它们的使用频次便会上升。Facebook 发现,当他们将 iOS App 里的「汉堡式」菜单改为底部标签式菜单后,不仅使用频次上升了,其他的重要指标也跟着增加了。

详细解析移动APP导航设计的改版实战,PS教程,图老师教程网

Facebook

相似的,Redbooth 将汉堡菜单改为了底部标签式菜单后,会话数和活跃用户数量都增加了。之前处于视野外的功能现在出现在了界面前台和中心。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

详细解析移动APP导航设计的改版实战,PS教程,图老师教程网

Redbooth

如何取舍?

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

由于移动设备的屏幕大小有限,不能把所有的东西都直接放置在界面上。这导致移动界面的设计变得具有挑战性。不同于大屏幕的桌面电脑可以让我们把每一个功能放在上面,移动设备要求我们必须做一些取舍:有哪些东西真的值得摆在上面?

回答这个问题需要弄清楚一个关键究竟是哪些东西直接影响着你的用户和生意。换句话说,这要求产品设计者好好地思考,然后再设计。

来源:http://www.tulaoshi.com/n/20160216/1573715.html

延伸阅读
行文虽长,但全是拧干脱水的,刚接触APP设计的同学果断收藏起来吧。 Troy:大学美术史(选修)的第一堂课上,那老师开门见山的说:知道大家认真听课的不多,下节课能来多少也不知道,这里介绍一个自学阅读的办法,方便你们抱佛脚,在我看来大部分书籍讲的实质性内容都很少,这就需要拧干提纯,发现一本书有用之处最有效的方法是看目录,大家能消...
响应式设计是否适合于专题设计 tuntundeng:如今越来越多的移动设备出现在我们身边,作为设计师对网站专题的设计进入到一个新阶段,需要考虑更多的用户访问环境,输入设备,分辨率等不同因素。响应式网页是目前热门的解决方案,好比一双男生的休闲鞋,可以与所有裤子进行随意搭配。但是对于专题设计来说,响应式设计并不合适。 专题网页的设...
在过去的三年里面,我一直带领着 Aviary 的Android设计师团队。非常荣幸我能为大家设计这款摄影APP,让大家能释放创造力,通过这款APP来拍摄出如此之多优质的照片。随着Google 推出Material Design 这种全新的设计语言,我们的产品设计团队也开始针对Photo Editor 进行重新设计。今天这篇文章,我会仔细分享我们重新设计它的故事,以及设计经验...
今天的译文绝对值得设计师收藏!来自设计网站的龙头老大Smashingmagazine,专业全面,条理性强,一篇文章几乎包括了移动应用引导页的全部设计方式,还分析了知名APP的反面例子,可以说是搞定引导页的最实用指南,赶紧来学习下。 译文很用心,原文有误的地方都有提醒,欢迎同学们关注译者的微信公众号开卷有译。 如今,移动应用对首次使用的用...
什么样的动效让人舒服,什么样的动效让人一下就想到某个产品,什么样的动效让人沉浸其中?今天百度的同学从这三个维度,分别聊聊对应的APP动效设计,想给用户一个惊喜的同学,来涨姿势吧。 如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是...

经验教程

890

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部