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

发布时间:2020-04-25 12:29 | 浏览人次:浏览次数

产品同学要做一款新APP,对导航犯了愁。而在两大设计规范中,均为我们指出了怎样设计APP应用导航,前人的文章中也有不少归纳,在此作一次整理,供自己内化也给各位读者共享。
设计师进阶笔记!APP应用导航的设计套路

一、导航设计四步走

确定会员角色和任务步骤;

搭建清楚合理的信息构架;

灵活利用导航模式;

运用推荐算法来精简,关注拇指操作热区来创新。

二、导航的设计准则

导航组织了内容,因而它可以让会员更轻松的在软件中找到所需的信息。为了让导航更符合软件,首先要定义你的会员,他们使用软件的经典路径,以及你期望他们去用的功能。——Material Design

1. 定义会员和核心任务

在设计导航之前需要确定会员是谁以及他们更常用的操作。

以背景中的需要为例:

本次需要已确定会员是某类商家群体。而这个答案早期能够通过需要发掘、会员调研等方法进行实际探讨,常用伎俩包括会员画像、深度访谈、调查问卷、焦点小组等等,具体操作方法在网上均有专门讲述,在此不做开展。

在获取了商家的核心痛点和诉求以后,那么这类群体会有哪些操作?经过任务拆分,我们列举了他们所需的操作清单:

然后梳理出他们的重要功能步骤:确定了会员群体和核心任务以后,就能够解构功能步骤,通过信息构架来搭建 APP 的骨骼。设计师进阶笔记!APP应用导航的设计套路

2. 合理的信息构架

信息构架体现的是 APP 所有内容的组成方法,以合理的归组分类的方法能够使产品更为易于领会和浏览,也可以让功能框架具有良好的拓展性。

在初期梳理时也许会应对数十甚至数百的功能点,那么怎样高效组织信息呢?

从会员认知出发

更典型的方法是卡片分类法,让会员依据自己的认知来组织功能点。具体操作又分成封闭式分类和敞开式分类,前者由产品本身特性设定部分类别,后者则彻底由会员自行分类。以此拥有会员版的信息构架,然后通过数个会员版的信息构架来合并同类项,获得符合会员认知的功能结构。

区分优先级

确定哪些是更主要、次要及不主要的。普遍能够从这3个纬度来评价:需要强弱、使用频率、任务数目,辅助以决策工具,获得更优解。当功能多的同时会难以抉择,但假如每个功能都很主要,反倒说明了每个都不主要,对会员而言也极容易丧失焦点。

把握任务的场景种类

不一样的任务场景对应着不一样组织方法,普遍情形下能够分成浏览型和任务型。浏览型场景,那产品便也许需要展示更多的事物对象,让会员可以迅速获取清楚的认知,比如资讯类 APP 将许多新闻类别平铺开展;而任务型场景,那就要突出重点的步骤环节,让会员可以顺利完结想要做的事情,比如电商类 APP 的购物车和订单机制。

更后,我们也许会整理出这三种情形的信息构架,然后依据导航模式开始界面设计。

三、常见导航模式

iOS 设计指南已为我们指出了3种典型导航模式:分层导航、平面导航、内容驱动导航,当然还有安卓提倡的抽屉导航。而市面上大部分 APP 的导航也是基于这几类进行演化或组合。

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

更常见便属于标签式导航。标签既可位于屏幕上方,也可位于下边,为了便利会员手指操作,普遍都摆在底端。

适用场景:数个顶级模块彼此独立,存在模块间反复变换的情形。设计师进阶笔记!APP应用导航的设计套路

特性:

可见性好,功能更容易被会员发现;

操作性好,底端区域手指操作便利;

符合大部分的会员习惯。

2. 分层导航

经典代表便是 iOS 的设立,实质是呈现功能构架的父子级,每个页面都会有1个子级,直到到达终点。要去往另1个终点,则须从新回到父级,然后从头开始选择另1个子级。

适用场景:任务数目较多,彼此独立,任务中间不需要反复变换。

特性:

结构清楚,逻辑性强;

易于领会,可以协助会员迅速定位到目的。

留意点:当内容多或分布不合理睬导致会员寻找困难,不合适反复变换任务的场景。

在这基本上,由信息的布局方法差别衍化出了宫格导航、展览馆式导航、跳板式导航等,前人已归纳了众多样式,在此不再赘述。

现在,本种类导航更多是作为二级导航来软件,而若想作为一级导航来用,则需要达到层次浅且内容平级的条件,常见于单一任务型工具 APP,比如 iOS 天气、美图秀秀。

3. 抽屉导航

此类导航不在 iOS 设计规范之内,但在安卓系统的提倡下时髦过一段时间。抽屉导航的核心思想是隐藏,收起非核心的操作与功能,让会员可以更聚合核心任务。

适用场景:核心功能数目少频次很高;辅助功能数目多频次低。

特性:

节约页面空间,聚合核心内容;

拓展性好,可容纳许多功能;

良好的适应性能,可以时候软件于 PC 和移动 Web

留意点:

被收起功能曝光度低,当核心功能多于三个的同时请用其他导航模式;

收起内的通知红点容易重叠;

顶端位置点击距离长;

手势操作容易与页面滑动操作重叠,需要尤其处理。

4. 内容驱动的导航

这类导航多见于游戏娱乐型产品,比如更近火爆的《第五人格》所利用的导航方式。这类导航具有丰富的丰富性,在此不做过多开展,如有兴趣可自行检索了解。设计师进阶笔记!APP应用导航的设计套路

5. 其他导航

Material Design 的等级体系与 iOS 里的分层导航类似,不过值得一说的是链接设置。通过链接能够让导航系统中不相邻的2个功能迅速变换,让会员可以通过滑动操作遍历所有选项卡片。这类软件在网易云音乐(安卓端)有非常好的体现。

四、导航的目前&将来

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

推荐算法将我们潜在的搜索对象直接展目前眼前,大幅降低了按部就班的访问路径。

假想一下,当淘宝、京东 APP 不具有智能搭配时,除了利用检索外,那要找到一件心仪的上衣该多么费劲:

主页 → 类别 → 服装 → T恤 → T恤风格挑选 → 浏览商品列表

类似的也有大众点评/美团,当你坐进一家餐馆时,主页自动为你弹出当前餐馆的传送门,让你可以直接到达餐馆详情页,以免了搜索的麻烦。这类传送门通常也只是一部分界面模块,不会影响到整体导航结构,不过仅仅是这样的技术能力,就能让复杂的搜索步骤变得简单甚至消失。

语音交互也是另类导航的体现。通过语音辨识,让机器自动辨识出人所要查找的内容,比如呼唤 Siri 开启某个尘封已久的 APP,远比自己在手机中寻找要来得有效,尤其是在手机装了许多 APP 的情形下。伴随对话式界面的兴起和语音技术的发展,假如能将这类方式利用的APP的导航设计中,那肯定会革新现成的 APP 体验。

2. 大屏幕的交互设计

手机屏幕总是越变越大,全面屏在18年也开始渐渐普及。不过会员的手机操作方法和习惯仍然没有太大变动,单手和双手操作的比率仍然各占一半。怎样在大尺寸屏幕中设计出更好的交互,也是设计师需要认真看待的问题。

关注底端操作区

底端导航在这方面就有非常好的延续性,既能提供舒适的操作空间,也可保障标签的点击性。在此之外,市面上也有不少产品将抽屉导航转移到下部区域,让会员手指可以更轻易访问。

精细的滑动交互

去年 iPhone X 带来的交互方式令人眼前一亮,而新版 AppStore 和早前的苹果地图(iOS10更新版)也体现了这种精细的滑动交互。在国内 APP 中,夸克浏览器也有相似出色的设计,让网址输入变得轻松而简单。

Ada

一款健康助理软件,通过对话的方式设计任务步骤,并将导航区域转移至屏幕底端,让会员可以单手完结所有操作。

ofo & 苹果地图

小黄车 APP 的核心功能聚集在下部区域,通过滑动方法也可以完结页面的唤起和关掉。

苹果地图也在整体交互上进行了完全的重建。核心操作区更大程度的控制在(手指舒适区中间),通过滑动操作来控制不一样页面的层次转换,让会员只用一只手就能够轻松完结目标地的选择与导航。

上述内容就是小编今天为您带来的关于《设计师进阶笔记!APP应用导航的设计套路》的全部内容,希望能对您有所帮助,我们是一家成立于北京的IT外包公司,如果您有app软件或者微信小程序需要定制开发,不妨联系我们。
免责声明:本站部分文章转载自网络,不代表本站的观点和立场,不以盈利为目的。如有侵犯公司或个人权益,本站会第一时间删除文章。我们是一家北京app开发公司,欢迎咨询免费获取思维导图!

本文地址:https://appbj.cn/article/3077/

网友热评

暂无更多评论
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

我们积累了丰富的移动互联网开发和运营经验,在开发中为客户提供更多帮助!
咨询热线:18611391767(微信同号)