聊聊移动APP导航设计的改版实战

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

  欢迎同学们关注译者的微信公众号呦:shejiyiyan

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

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

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


  Polar


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

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

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


  Zeebox

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

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


  Facebook

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


  Redbooth

  如何取舍?

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

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

时间: 2024-10-27 12:55:23

聊聊移动APP导航设计的改版实战的相关文章

IOS开发:Web App导航设计探讨

 开发:Web App导航设计探讨-app导航设计"> 导航系统所遭遇的挑战 iPhone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置,将常用操作或快捷入口放在该位置的右侧.第②种形式是在该位置有两或三个tab选项.第③种形式是在该位置中间显示当前任务标题,在左右两侧放置导航控

iPhone Web App 导航设计探讨

最近在做iphone端Web App的项目.由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间.在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多.导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. 导航系统所遭遇的挑战 iphone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo

iphone Web App 导航设计分享

导航系统所遭遇的挑战 iphone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置,将常用操作或快捷入口放在该位置的右侧.第②种形式是在该位置有两或三个tab选项.第③种形式是在该位置中间显示当前任务标题,在左右两侧放置导航控件或功能控件.第④种形式是在该位置放置搜索框. 与以上的Nat

移动APP设计:优秀的APP导航设计形式

文章描述:导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让用户轻松到达目的地而又不会干扰和困惑用户. [导读]为了在手机屏幕给定的范围内展示出更多内容,优秀的导航栏设计将起到关键性作用,对于不同的操作也当因地制宜地选则不同的设计方案. 导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让

APP导航交互设计解析

  首先,我们来看一下一个叫做原始导航的导航. 原始导航是一个最最粗糙的导航,通过纯文字的链接入口来导航.如下图: 把它定义为原始导航,是因为如今我们的移动APP导航都是在此基础上通过不断的演变来形成我们常见的APP导航模式. 一.标签导航(选项卡导航) 有了原始导航,你可能会说,原始导航这种入口的摆放方式太占空间了,就五个入口就占据了整个界面.有没有一种更加省空间的导航模式呢?当然有. 首先,我们将五个入口放到界面的下方,就会形成常见的底部标签导航. 目前这样的APP导航是最常见的. 通常,底

掌上指路标 —– APP架构与导航设计

一款小小的手机应用,却包罗万象,融合这复杂的信息内容或功能逻辑.要让用户在使用中获得 最好的体验,迅速掌握应用的框架结构,其导航的设计是一个重要的环节. 手机应用的导航和现实世界中的路标或者地图的作用很类似.它是应用软件的虚拟框架,对用户具有指示标识以及识别的功能. 比如,如同路标,导航能在使用中,定位用户当前在哪儿,为用户突出当前视图重要的功能,告知用户可以去哪儿,在不同的视图和区域迅速地切换信息,记录使用的操作轨迹防止用户迷失等.那么导航应该如何设计呢? APP导航设计的步骤主要为以下三步:

iphone端Web App导航系统设计全面分析

文章描述:iPhone Web App 导航设计探讨. 最近在做iphone端Web App的项目.由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间.在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多.导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. 导航系统所遭遇的挑战 iphone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主

移动手机APP导航菜单设计方案

手机分辨率比桌面平台小很多,所以设计手机网站或是移动应用的时候,导航菜单都需要考虑周全,尽量保持简约和易用性高,这里我们整理了5种实用的移动手机APP导航菜单设计方案,你可以尝试这些菜单设计模式用在你的新设计项目上,好用而且有新鲜感. 这5种APP菜单设计方案也许有很多设计师已经在使用,但不能否认它是目前实用的,而且能提高用户体验的菜单设计方案.下面摘选移动手机UI设计美观.时尚,希望你看了后会有灵感收获,能把你的菜单设计得更棒,好好学习吧:) APP导航设计类型: 列表式菜单 矩阵.网格式菜单

FEEDLY创始人聊聊改版实战经验

  作为一个移动界面设计师,如果你已经细细读过Material Design的设计指引,那么这篇文章是一篇很好的设计案例.如果你还没有读过,那这篇文章一定是个最容易最生动的起点,以小窥大得帮助你进入Material Design的世界. 大家知道,google最近发布了Android的Lollipop系统,系统的一个重大改动是引入了一种新的视觉语言:Material Design.随着新系统的发布,安卓也发布了一个跨平台的视觉.动效.交互设计的全面指引.10月7日,Google的Material