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

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

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

【 tulaoshi.com - 平面设计 】

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

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

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

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

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

Polar

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

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

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

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

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

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

Zeebox

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

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

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

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

Facebook

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

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

Redbooth

如何取舍?

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

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

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

延伸阅读
行文虽长,但全是拧干脱水的,刚接触APP设计的同学果断收藏起来吧。 Troy:大学美术史(选修)的第一堂课上,那老师开门见山的说:知道大家认真听课的不多,下节课能来多少也不知道,这里介绍一个自学阅读的办法,方便你们抱佛脚,在我看来大部分书籍讲的实质性内容都很少,这就需要拧干提纯,发现一本书有用之处最有效的方法是看目录,大家能消...
今天的译文绝对值得设计师收藏!来自设计网站的龙头老大Smashingmagazine,专业全面,条理性强,一篇文章几乎包括了移动应用引导页的全部设计方式,还分析了知名APP的反面例子,可以说是搞定引导页的最实用指南,赶紧来学习下。 译文很用心,原文有误的地方都有提醒,欢迎同学们关注译者的微信公众号开卷有译。 如今,移动应用对首次使用的用...
响应式设计是否适合于专题设计 tuntundeng:如今越来越多的移动设备出现在我们身边,作为设计师对网站专题的设计进入到一个新阶段,需要考虑更多的用户访问环境,输入设备,分辨率等不同因素。响应式网页是目前热门的解决方案,好比一双男生的休闲鞋,可以与所有裤子进行随意搭配。但是对于专题设计来说,响应式设计并不合适。 专题网页的设...
在这一篇文里,要给大家奉献各种干货。相信作为设计师的我们,肯定会非常非常感兴趣滴。想了很久,弄什么地方入手呢? ok! 我们打开电脑,开始工作,那么除了qq还有邮箱,那么我们最爱的软件,肯定是下边这些啦: 好,不管你的最爱是fireworks 还是photoshop还是illustrator或者是其它。都没关系。打开你最喜欢的一个,开始我们客户端的设计...
今天这篇译文全程满满当当的都是干货,包含超多的实用经验,比如让元素在各个尺寸中保持边界清晰的技巧,切片的专业方法,命名规则等,绝对值得每个UI设计师收藏起来。 从低分辨率开始 我通常都从非Retina显示的1x文档尺寸开始。 iPad的app分辨率是用1024×768,安卓则是mdpi 或 dp (density-independent pixels)常规设备适配尺寸。...

经验教程

161

收藏

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