全教育培训行业第三方平台平台就业机构
扫码试听
扫码试听
Q:2638333071
首页 > 行业动态 > > APP导航交互设计解析(导航的交互样式)
行业动态 行业问答 课程问答 零基础学习 就业前景 技术干货

APP导航交互设计解析(导航的交互样式)

发布时间:4 周 前 栏目:行业动态 浏览:

1、APP导航交互设计解析

小编:APP的导航样式多种多样,但主要的是你得找到一种适合你的APP模式的导航交互。今天分享了25学堂总结的8个APP导航的交互方式,并有分析如何漂亮的应用它们。

首先,我们来看一下一个叫做原始导航的导航。

原始导航是一个最最粗糙的导航,通过纯文字的链接入口来导航。如下图:

一、标签导航(选项卡导航)

有了原始导航,你可能会说,原始导航这种入口的摆放方式太占空间了,就五个入口就占据了整个界面。有没有一种更加省空间的导航模式呢?当然有。

首先,我们将五个入口放到界面的下方,就会形成常见的底部标签导航。

通常,底部标签导航有4~5标签,一般不会超过5个,有更多的选项操作时可将最后一项设置为更多,将一些次要功能放置在更多里。这是一种非常常见的导航模式。如果你的应用需要用户频繁的在不同分页切换,可以采用这种导航。虽然它还是会占用一定的界面空间,但比起原始导航来说好多了。

现在很多APP(包括ios和android)都在用这种模式。也是目前很多移动APP设计大牛和产品经理所推崇的app导航方式。

当然,如果你在五个标签中,有一个标签是最重要或最频繁使用的,想要重点突出,可以使用下面变形的底部标签导航。

其次,我们将标签放到界面的上方,就会形成常见的顶部标签导航。

作为一个二级导航,顶部标签导航应用于多种情境下,可以固定数量,展示有限的几个标签。也可以扩大一定的数量,变成向左滑动展现更多标签。甚至可以像网易新闻那样,衍生出订阅功能。顶部标签导航也是一种非常常见的导航模式。

二、抽屉导航

说完标签导航,你可能会说,我是有六七个导航,但其中只有一个导航是主要的,别的虽然有用,但用户非常非常少用。这种情况下能不能只显示主要的内容,其它导航隐藏起来呢?这样还可以更近一步地节省页面空间。

当然可以。在这种情况下你可以使用抽屉导航。但是不建议用抽屉导航。至于为什么可以阅读《看完《方寸之间》之后,对APP导航设计的读后感》

这种导航的优点是:节省页面展示空间,让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。

缺点是:对于那些需要经常在不同导航间切换或者核心功能有一堆入口的app不适用。抽屉导航设计需要注意的是一定要提供菜单画出的过渡动画。

三:下拉导航

讲完抽屉导航后,还有另外一种类似的导航模式同样可以节省页面空间,并且隐藏次要入口,这就是下拉导航。

下拉导航有一种比较常见的变式,就是下来菜单中展示两级甚至多级(一般就是两级,没见过更多的),很多人称其为超级菜单导航。如下:

四、宫格导航

我在原始导航里设定了5个入口。可是,如果有7、8个甚至10多个入口呢?而且这些入口你也不好说到底哪个对用户是最重要的,重要性差不多,怎么办?OK,宫格导航可以解决这个问题。

目前来说,这种导航模式越来越少用在一级导航了。不过,作为二级导航,作为一系列工具入口的聚合,或作为内容列表的一种图形化呈现形式,还是存在在各种APP里。如:zakeer的核心页面就是宫格导航,但其与订阅功能结合,没有让所有宫格斗展示出了。各种手机界面打开后的app展示页面基本上都是宫格模式的。

由于受到卡片式设计的影响,宫格模式的变形也非常多。接下来简单说一下这些变形。

首先,可以将宫格的卡片变大,宫格与宫格时间不留空白,如下图:

上面这种展现方式所能展现的卡片数量有限。如果我们将其稍做调整,增加纵向滚动功能,就可以增加卡片数量的展现,可以说是无限的。如下图:

如果更进一步,是不是可以对上面这种无限的展示宫格进行分类呢?当然可以。然后我们就有了下面这种导航模式:

这时,如果我们想要在分类下,展示更多的内容,但又想多展示分类,怎么办?可以在以上的导航模式中再进一步变形,如图:

宫格导航还有没有别的变式呢?当然有。比如:

可以通过变化宫格导航中卡片的大小,来凸显宫格中内容的不同重要性。

可以将宫格导航和订阅功能结合,形成独特的订阅导航。

……

变化形式根据不同的需要很可能有很多种。一般来讲,常见的这些导航模式就够了。

五、列表导航

列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。这种导航模式从原始导航中很好转换,只要将列表左对齐,增加向右箭头表明是否还有下级即可。如图:

自然,如果你想要对列表进行分类也是可以的。这样逻辑上会更加清晰。如下:

对于列表导航来说,还有一种常见的变式:将列表下内容中的核心内容展示出来,常见的是核心数据展现。如下:

六、轮播导航

如果我们将原始导航中的5个入口共处一个页面变成每个页面仅限一个入口可以吗?或者说,我们将宫格导航变成一宫格呢?会有一种新的导航模式吗?

按照上面的假设,我们会有一种常见的导航模式:轮播导航。如下:

当然,只有应用信息足够扁平,可以尝试轮播导航。轮播导航如果应用得当,能够给人耳目一新的体验。轮播导航能够最大程度的保证应用的页面简洁性,操作也是最方便的,只需要手指左右滑动。缺点也很明显:承载入口的数量有限,超过10个可能就优点多了。这种导航常见于查看图片,也经常与其他导航模式结合,作为banner广告呈现。

七、点聚导航

如果一个界面,因为内容或功能展示的需求,需要极端简化其入口,应该如何做?点聚导航是一种选择。

八、隐喻导航

如果原始导航中的五个入口,变成游戏界面中的五个关卡,只是简单地将其按照上下顺序列出来就会不太适用。游戏对导航的要求不仅要可用,更要和整个游戏的风格等匹配。因此,有了隐喻导航这种模式,用页面模仿应用的隐喻对象。这种导航主要用于游戏,但在帮助导航 人们组织事物(如日记、书籍等),并对其进行分类的应用中也能看到。

文章来源:25学堂

APP导航交互设计解析

2、交互设计案例

Ⅰ、 先了解一下交互设计的基本概念:

交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为,让用户更方便更有效率的去完成产品业务目标,获得愉快的用户体验。

Ⅱ、交互设计在项目流程中的位置和任务:

项目前期的流程和节点:

职能的细化就是为了让产品在每个专业环节都做到极致,提高竞争力。如果是为了走流程,每个环节都是任务式的交付,臃肿的分工除了增加成本和拖慢项目进度,没有实际意义。所以交互设计需要做的足够好,才能将这份工作做的有意义。

Ⅲ、交互设计的具体职能:

从上图中可以看出,交互设计主要干三件事:

①定义部分需求 ②定义信息架构和操作流程 ③ 组织页面元素,制作原型demo

①定义部分需求

以前的惯性思维是需求应该由产品人员负责,设计人员只是实现和改善界面体验。而产品的真正需求不仅仅来源于业务,还包括使用者的情感需求。在情感分析方面,交互专业是具有优势的,举个例子:

一个增值服务的宣传模块,业务模型可能是这样子:

考虑到情感因素后,需求模型会不断完善:

上图仅仅是举个例子,真正的产品人员不会将业务模型想的如此简单。举这个例子就是想说明一下产品的需求设计不仅仅是业务模型,还需要考虑用户情感、用户行为和运营数据。当产品人员考虑不周全的时候,交互设计师有责任对需求进行修订和完善,这样的目标导向设计才是完整的。

②定义框架

这部分的内容属于交互设计师的核心工作内容,也就是我上一章节所讲的框架设计阶段。这个阶段的产出质量直接影响到业务目标和转化率。如果框架混乱,接下来的界面怎么优化都是无效的。这好比大型超市的走道设计,如果路线规划的不好,再多再大的指引图标都是低效的。交互设计做什么?让用户快速完成目标,提升操作效率,这才是框架设计的意义所在。

破洛洛文章简介:本章主要详述一下交互设计的职能——交互设计师具体做哪些内容?

什么是框架设计呢?这要分成两部分内容:

1.关于结构导航的设计

把我们的产品想象成一个巨大的图书馆,我们需要帮助用户(有目的性的、目的不明确的,无目的性的)寻找他们感兴趣的图书,怎么帮助用户准确的寻找完成目标任务,这就是导航设计。导航的设计任务一般在新项目或重构项目。

导航大概可以分为三种类型:结构导航、关联导航、可用性导航

在框架设计的阶段,交互设计师主要关注于结构导航的设计。

结构导航分两种:全局导航与局部导航。全局导航一般是指无联系的信息结构做的一级大分类,方便用户以最快速的方式了解整个网站有什么大概内容。而局部导航则关注于用户最方便的快捷操作和业务引导操作。

交互设计师的首要任务就是将业务内容信息组织分类,划分出主次关系,根据业务目的和用户习惯定义规划全局导航和局部导航的设计。那应该怎么规划呢?

回到第一个增值服务页面的例子(虚拟案例,非真实案例):

将需求梳理后(怎么梳理,请google抽屉整理法),我们可以确认全局导航:

再详细规划局部导航:

局部导航的层级可以不断往下延伸,通过树形目录或面包屑的方法帮助用户浏览时不至于迷路。

2. 关于流程的设计

之前的案例我们已经基本上确认了模块需求有哪些页面,页面大概会放什么内容。但真实的用户任务并不是在一个页面上完成的,这时候我们就需要通过流程的方式把任务变得清晰和包容用户的各种误操作。

虚拟案例:

在流程的规划设计中要遵循:1.以业务目的为主要导向;2.兼容到用户的习惯;3.尽量让流程做减法,多一个流程就会丢一部分用户;4.任务是连贯和清晰的;5.考虑实现方式的复杂程度;欢迎补充…

③组织页面元素,制作原型demo

经过了需求的完善和框架的设计,之前的这些工作还是停留在抽象的想法阶段,怎么把想法转达给项目组的其他人员呢?交互还需要把想法和规划表达出来,那么最好的方式就是制作原型Demo。把Demo做出来,让产品,开发,测试直观的看到产品的雏形, 再广泛的接受意见,对原型进行不断的修正,改进,做简单的用户测试继续挖掘情感需求。

APP导航交互设计解析

3、北京IT培训分享微交互设计的具体使用案例

我们在上文中曾经给大家简单分享了关于提高用户使用体验的微交互的一些基本概念和知识体系。今天,北京IT培训就通过案例分析来了解和学习一下,常见的微交互设计都有哪些表现形式的。



滑动交互。滑动交互是比起点击更加直觉更加顺畅的一种交互,它有助于用户快速切换标签、界面并且获得更多的信息。作为为常见的交互,它会在潜意识中引导用户,而用户通常不需要去思考就会下意识执行。这种交互非常有趣,爽快,且令人上瘾。


数据输入。我们都很清楚创建新帐号和修改密码这类需要大量输入的交互是多麻烦,经常会让用户感到沮丧。诸如密码强度的测试和输入建议会让用户更好的推进这个过程,这个过程中,尽量借助细节和建议来提升整个输入过程的体验和成功率,会让用户主观感受更舒服。


动画效果。动画常常作为微交互的一部分而存在,它让微交互可行,并且给予提升。动画让设计更加人格化,许多微妙的动效在实际操作中并不会被直接注意到,但是如果缺少它,会让人明显感受到缺失感。动效常常作为环节之间的粘合剂,让交互和流程更加完整顺滑。值得注意的是,动画的目的是吸引用户,但是不能让用户分心,或者产生挫败感,过于新奇的风格或者动画耗时太多,都会产生不良的效果,或者让人混淆。


系统状态。当前的系统状态是用户始终应该了解且需要了解的事情。如果用户无法感知或者被通知到,他们常常会因此感到恼火,因此关闭网站或者APP。通过微交互让用户确切地了解当前的系统状态,多长时间能完成加载,或者是信息已经被完全提交,等等等等。哪怕是报错信息,如果足够幽默,同样能够维持用户对产品的信任。


让教程有趣。绝大多数人都在获取信息,获取解决某个问题的办法。而教程常常是用户获得答案的重要载体。在微交互的加持之下,教程常常能够得到简化,能够更加有趣,易于理解,更好地指导用户操作、解决问题。


上一篇:没有了
技术干货
零基础学习
行业多年深耕,从这报名,学费立减800
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

Q:2638333071

鄂ICP备2023015464号