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

教幽晃尘52

教幽晃尘52

2016-02-16 20:26

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

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

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

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

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

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

Polar

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

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

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

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

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

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

Zeebox

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

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

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

Facebook

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

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

Redbooth

如何取舍?

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

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析移动APP导航设计的改版实战

详细解析QQ导航改版设计心得分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析QQ导航改版设计心得分享

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

详细解析移动APP引导页的设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析移动APP引导页的设计技巧

详细解析2019年的移动APP设计趋势

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析2019年的移动APP设计趋势

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

详细解析移动APP测试实用指南

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析移动APP测试实用指南

详细解析移动端APP测试实用指南

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析移动端APP测试实用指南

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

30个创意十足的404页面设计欣赏

30个创意十足的404页面设计欣赏

浅谈Facebook的视觉系统是如何养成的

浅谈Facebook的视觉系统是如何养成的
下拉加载更多内容 ↓