赞助商
立即赞助

设计师进阶笔记!APP导航的设计套路

UI设计3年前 (2021)更新 流光
2.1K 0 0

58UXD:产品同学要做一款新 APP,对导航犯愁。而在两大设计规范中,均为我们指出何设计 APP 导航,前人的文章中也有不少总结,在此一次梳理,供自己内化也给各位读者分享。

一、导航设计四步走

  • 明确户角色和任务流程;
  • 搭晰合理信息架构
  • 灵活运用导航模;
  • 用推荐法来简化,关注拇指操热区来创新。

二、导航的设计原则

导航组织了内容,因此它能够让用户更轻的在应用中找所需的息。为了让导航更符应用,首先要定义你的用户,使用应用的典型路径,以及你希望去用的功能。——Material Design

1. 定义用户和核心任务

设导航之需明确用户谁以及他们常用的操作。

以背景中的需求为例:

本次需求已明确户是某类商群体。而这个答案前期可通过需求挖掘、户调研等方式进行实际分析,手包括户画像、深访谈、调查问卷、焦点小组等等,具体操作方式在上均有专门介绍,在此做展开。

在获了商家核心痛和诉求后,那么这类群体会有哪些操作?经过任务拆解,我们列出了他们所需操作单:

设计师进阶笔记!APP导航的设计套路

然后理出他们主要功能流程:

设计师进阶笔记!APP导航的设计套路

明确了用户群体和核心任务后,可以解构功能流程,过信息架构来搭 APP 骨骼。

2. 合理的信息架构

信息架构体现是 APP 全部内容组成,以合理归组分类可以使品更加易于理解和浏览,也能让功能框架具备良好扩展性。

在初期整理时能面对数甚至数百的功能点,么何有效组织信息呢?

用户认知出发

最经典是卡片分类法,让用户根据自己认知来组织功能。具体操作又分为封闭分类和开放分类,前者由品自身特设立部分类,后者则完全由用户自分类。以此到用户版信息架构,然后过多个用户版信息架构来合并类项,获取符合用户认知功能结构。

划分优先级

明确哪些是最要、要及不要。般可以从这三个纬度来评估:需求强弱、使用频率、任务数量,辅助以决策工具,获取最优解。功能多时候会难以取舍,如个功能都很要,反而说明了个都不要,用户而言也很容易失去焦。

把握任务场景类型

不任务场景应着不组织,般情况下可以分为浏览型和任务型。浏览型场景,那品便可能需要展示更多事物象,让用户能够快速获晰认知,例如资讯类 APP 将很多新闻类平铺展开;而任务型场景,那要突出关键流程节,让用户能够利完成想要做事情,例如电商类 APP 物和订单制。

最,我们能梳理出三种情况的信息架构,根据导航模式开始界面设计。

设计师进阶笔记!APP导航的设计套路

三、常见导航模式

iOS 设计指南已为我们指出了3经典导航模:分层导航、平导航、内容驱动导航,然有安卓倡导抽屉导航。而市上大多数 APP 导航也是基于这几类进演变或组合。

设计师进阶笔记!APP导航的设计套路

1. 平面导航(通常用为主导航)

最见属于标签式导航。标签既可位于屏幕上方,可位于方,为了方户手指操作,一般都放在。

适用场景:多个顶级模块相互独立,存在模块频繁切换情况。

特点:

  • 可见性好,功能更容易被用户发现;
  • 操,底部区域手指操方便;
  • 符合多数的用户习惯。
2. 分层导航

典型代表便是 iOS 设,本质是展现功能架构父子级,个页都有个子级,到抵终。要去往另个终,则须新回到父级,然后从头开始选择另个子级。

适用场:任务数量,相互独立,任务之间不需要频繁切换。

特点:

  • 结构清晰,逻辑强;
  • 易于理解,能够帮用户速到目标。

注意点:当内容或分不合理导致用户查找困难,不适合频繁切换任务的场。

这基础,由信息的布局方式差异衍出了宫格导航、展览馆式导航、跳板式导航,人已总结了诸多样式,此不再赘述。

目前,本类型导航更多是作为二导航来应用,而若要作为一导航来用,则需要足层浅且内容的条件,常见于一任型工 APP,例如 iOS 气、美图秀秀。

3. 抽屉导航

此类导航不在 iOS 计规范之内,但在安卓系统的倡导下流行过一段间。抽屉导航的核心思想是隐藏,收起非核心的操作功能,让用户能够更聚焦核心任。

适场景:核心功数量频次很;辅助功数量多频次低。

特:

  • 节省页面空间,聚焦核心容;
  • 扩展性好,可容纳很多功能;
  • 良的适应能,能够同时应用 PC 和移动 Web。

注意:

  • 被收起功曝光率低,当核心功多于3个的时候请他导航模式;
  • 收起内知红容易合;
  • 顶部位置点击距离长;
  • 手势操作易与页面滑动操作重合,需特别处理。
4. 内容驱动的导航

这类导航多见于游戏娱乐型品,例如最近热《第五格》所运用导航形。这类导航具备丰富多样性,在此不做过多展开,如有兴趣可自搜索了解。

5. 其他导航

Material Design 等级体系与 iOS 里分层导航相似,然而值提是链接设定。过链接可以让导航系统不相邻两个功能快速切换,让用户能够过滑动操作遍历所有选项卡片。这类应用在网易云音乐(安卓端)有很好体现。

设计师进阶笔记!APP导航的设计套路

四、导航的现在&未来

1. 算法让导航变得更轻量了

推算法将潜在的检索对象直呈现在眼前,大幅减少了按部就班的访问路径。

试想一,当淘宝、京东 APP 具备智匹配时,除了搜索外,那要到一件心仪的上衣该多么劲:

首页 → 类别 →  → T恤 → T恤格筛 → 浏览商列表

相似的有大众点评/美团,当你坐进一馆时,首页自为你弹当前馆的传送门,你够直接抵达馆详情页,避免了检索的麻烦。这类传送门通只是一分界面模,会影响到整体导航结构,然而仅仅是这样的技术,就复杂的检索流程变得简单甚至消失。

设计师进阶笔记!APP导航的设计套路

语音交互是另类导航的体现。通过语音识别,机器自识别人要寻的容,例如呼唤 Siri 打开某个尘封已久的 APP,远自己在手机中查要来得效,特别是在手机了很多 APP 的情况。随着对话式界面的兴起和语音技术的发展,如果将这类形式的APP的导航设计中,那一定会革现有的 APP 体验。

2. 大屏幕的交互设计

手机屏幕总是越变越大,全面屏在18年开始逐渐普及。然而户的手机操作方式和习惯依然没有太大改变,单手和双手操作的例依然各占一半。如何在大尺寸屏幕中设计更好的交互,是设计师需要认真对待的问题。

注操作区

导航在这方面就有很好的延续性,既供舒适的操作空间,可保证标签的点击性。在此之外,面上有产将抽屉导航转移到区域,户手指够更轻易访问。

精致的滑交互

年 iPhone X 带来的交互形式人耳目一,而版 AppStore 和早前的苹果地图(iOS10更版)体现了这种精致的滑交互。在国 APP 中,夸克浏览器有类似优秀的设计,址输入变得轻松而简单。

设计师进阶笔记!APP导航的设计套路

Ada

一款康助理应用,通过对话的形式计任流程,并将导航域转移至屏幕底部,让用户能够完成所有操作。

设计师进阶笔记!APP导航的设计套路

ofo & 苹果图

小黄车 APP 的核功能集中下部区域,通过滑动方式也能完页面的唤起关闭。

苹果地图也在整体交互上进行了彻底的重构。核心操作最大限度的控制在(指舒适之间),通过滑动操作来控制不同页面的层转换,让用户只用一只就可以轻完成目的地的选择导航。

设计师进阶笔记!APP导航的设计套路

欢迎关注「58UXD」的公众号:

设计师进阶笔记!APP导航的设计套路

图片素材作者:Ketan Rajput

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

橙子的橙子:有个朋友拿了他做的界面,问我哪里需要修改,他总觉得不对劲,但不知道要怎么改。我把这些建议量化成可执行的标...
App设计
由于工作需要,手机里安装了N个应用,但是常用的都是那几个。常常是工作中遇到具体问题了,才会翻看好多App参考,觉得自己脑...
App分析
财务和金融相关的应用是一个相对专业的分支,在这个领域当中创造体验优异的设计并不是一件简单的事情。身为资深设计师Taras B...
App设计
为什么一个简单的界面,你做出来后总觉得不够精致,很可能是因为你遗漏了一些容易忽略的设计细节。本文作者通过一个案例,细...
App设计
王M争:最近发现一款看片神器——埋堆堆。这是 TVB 推出的官方 APP,里面有 TVB 历年制作的经典剧集,而且更重要的是不需要充会...
App设计
合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方。 这篇文章汇总了移动端导航设计最常见的样式、要注意...
交互设计
底部导航栏可以说是现在最流行的导航控件了,微信、支付宝、淘宝、网易云音乐等等,各种类型的 APP 都有应用。 如何使用这...
导航栏设计
对话是人与人之间交换信息的普遍方式。人可以在交流时通过判别对方的语气、眼神和表情判断对方表达的情感,以及根据自身的语...
智能语音产品