祝给予赞赏的伙伴，2017年发大财！|赞赏2人打赏
收藏已收藏 | 40赞 | 11
分享到微信扫码分享到微信
资深交互设计师，微信公众号：呆呆U理
27 万阅读总量
热门问题12345678910移动APP的常见的几种导航形式 - 简书
移动APP的常见的几种导航形式
当确定了APP的设计需求和产品的整体结构之后，要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好，很大部分取决于APP界面布局的合理性。这个时候就要想以最优的设计结构将APP的内容展现给用户，那么，如何将信息以最优的形式展现出来呢？这就涉及到了APP的导航应用方式，可以说一个优秀的导航设计对一款App的核心体验起到了决定性的作用！优秀的app导航设计，能够合理地完美展示产品的功能，并快速引导用户使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。知道了导航的重要性，在考虑导航设计时，需要注意以下事项：1.可达性：移动应用的导航功能可以说是所有界面最重要的组成部分，因此一定要保证其可达性，并把最关键的要素尽量突出，同时不要影响到内容本身。
一个产品,如果对于任何人（无论能力）而言，都是非常容易掌握、理解并可以用之来完成他们的目标的话，那么这个产品就是可达的。一个成功的产品对于任何可能的使用者来说都应该是可达的。
设计完全可达的产品是一个复杂的课题，需要深入研究。欲了解更多信息，请访问谷歌的
2.目的性：确保导航中的每个按钮要素简单明了，有明确的引导用户点击的目的性。让用户一看就知道是什么意思以及操作结果是什。不要弄的太过花哨，这样反而会让迷惑用户，起到反作用。3.易于理解：如果想设计比较高级的导航功能（例如链接图片、允许滑动或其他手势导航，或者访问隐藏菜单），请务必在设计过程中保证前后一致，以便用户熟悉你所使用的模式，同时还应加入一些额外的信息（例如小箭头、文字或改变颜色或高亮等）来吸引用户注意力，并以微妙的方式对用户进行引导。不要给用户呈上“看得见摸不着的导航功能”。4.通用性导航功能应当以一定的形式显示于移动应用的各个界面。各个导航模式不一定要完全相同，但其基本结构应当在应用内保持一致，可以根据背景进行小幅度的调整。明确上述几点注意事项后，将APP的信息结构分层，把主要、最核心、最根本的功能放在第一层级，次要内容放在第二层级甚至更深。然后根据层级关系、结构关系确定导航的形式。结合产品的深度和广度来共同探讨一下目前APP界面常见的几种导航形式，并分析其优缺点，从而进一步判断每一种导航形式更适合应用于哪种类型的APP！1.标签式导航标签式导航，也就是常说的Tab式导航。是目前应用最广泛、最常见的导航形式。标签式导航可分为顶部标签式导航、底部标签式、舵式导航（底部扩展式导航）。顶部标签式导航顶部标签式导航顾名思义，存在于页面的顶部。顶部标签导航多应用于Android平台，因其平台特性，底部含有虚拟的物理按键，如华为手机存在手机屏幕内的物理按键。
Android手机底部虚拟按钮
很多App为了适配安卓平台，采用了顶部标签式导航，目的是为了不与底部虚拟按钮组合在一起产生的信息堆叠和误操作，这也是一种妥协行为。但不断升级的Android平台app现如今也和ios尽量保持一致。不过也有很多ios平台根据产品结构应用此类型的导航。
顶部标签式导航
上图是虾米音乐app首页导航模式，采用了顶部标签式导航。这样设计是为了更多展示标签下的内容，还有一点是支持快捷操作。方便展示/点击下方快捷区域的内容和按钮（当前曲目、歌手、播放/暂停和下一曲）。底部标签式导航底部标签式导航是最常用的导航形式，一般存在于页面底端，不超过5个模块。
底部标签式导航
如果应用需要用户频繁的在不同分页切换，可以采用这种导航，如上图微信最新版的APP界面设计图。这种导航栏符合拇指操作热区。
舵式导航（底部扩展式导航）舵式导航是底部导航的一种扩展形式，是一种变体。因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。中间项标签不紧操作最频繁，最重要，且需要引人注意，方便寻找。
左图为懒人听书App，右图为新浪微博手机客户端。两款App的主要功能都采用了舵式导航的布局方式，将操作最频繁的按钮进行特殊处理，在视觉设计上突出，与导航上的其他按钮进行区分，引导用户操作。顶部导航+底部导航（双导航模式）
今日头条和网易新闻这种新闻类APP，由于内容、分类较多，运用顶部和底部双tab导航，而切换频率最高的tab放在顶部，这是为什么呢？因为新闻在每个tab都是沉浸式阅读，最常用的操作是在一个tab中不断地下滑阅读内容，将常用的tab放在顶部，向左或向右滑动切换tab的手势操作，能带来更好地阅读体验。标签式导航小结：在两种情况下可以选择顶部tab式导航：某项功能必须固定在底部，那么其他tab只能固定在顶部，但为了方便操作，顶部tab导航最好支持手势操作，即滑动即可切换;该APP是沉浸式体验，如新闻、小说等，为了带给用户更好的阅读体验，可以将tab放在顶部。实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，他不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部Tab模式的导航更能适应，也更好设计。适用于：入口分类数目不多，可以控制在5个以内，且用户需要在入口间频繁切换来执行多个任务注意：结构太过复杂而且不稳定的应用不适合标签式导航。2.抽屉式导航抽屉式导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，因此称之为抽屉式导航。抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。设想你的产品信息层级有非常多的页面和内容，难以在一屏内显示全部内容，那么你一定首先会想到去设计一个底部或顶部的tab导航，但导航太多无疑显得臃肿，而且使用户难以点击，那么这个时候，抽屉式导航是个不错的选择。
抽屉式导航
抽屉式导航存在几个缺陷：1.左上角的导按钮存在于单手拇指操作热区难以到达的位置，导致导航按钮难以触达；2.降低了用户对产品一半的参与度；3.可见性低。有些人认为“现在的APP的发展不仅仅是从前单一的功能，功能随产品的发展变得越来愈多，抽屉式导航已经不适应大多数的产品，这种导航终将被遗弃”。但是，导航栏的使用方式并不是单纯随着看产品的功能增加而不被使用，而是随着整个产品的信息结构和功能形式来设计决定的。抛开产品的功能表现而去讲产品设计是不合理的。何种情况下适合使用抽屉式导航：1.如果应用主要的功能和内容都在一个页面里面。只是一些低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。2.如果应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。3.在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。注意：需要用户有一定参与的信息层级，最好不好放置在抽屉栏3.跳板式导航（快速启动版／宫格导航）跳板／快速启动／宫格导航是将主要入口全部聚合在页面，让用户做出选择。
采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。如下图新浪微博，点击导航栏中间的发布按钮，弹出二级菜单，这个二级页面就是采用的宫格式导航，作为发布微博的入口。
二级页面－宫格式导航
这种导航模式非常常见，但是却不常用。无论你用的是Android还是iOS，每天一打开手机，宫格式导航就会对你说hello了。
界面中的宫格
每一个APP都是一个宫格，这些宫格聚集在中心页面，用户只能在中心页面进入其中一个宫格，如果想要进入另一个宫格，必须要先回到中心页面，再进入另一个宫格。每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各平台系统的中心页面。宫格式导航的缺陷：信息互斥，无法相互通达，只能给用户带来了更多的操作步骤。无法让用户在第一时间看到内容，选择压力较大。何种情况下适用于宫格式导航：适合入口相互独立互斥，且不需要交叉使用的信息归类注意：一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。4.列表式导航列表式导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。作为辅助导航来展示二级甚至更深层级的内容列表式导航分为3类：标题式列表、内容式列表、嵌入式列表。
分别为标题式、内容式、嵌入式列表
标题式列表:一般只显示一行文字，有的显示一行文字加一张图片等等。内容式列表：主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。嵌入式列表：嵌入式其实就是由多个列表层级组合而成的导航。能很好的解决次要功能非常多的问题所有关于列表导航的例子大部分都是依附于标签导航之上的。前面我就说过现在以列表形式作为主导航的产品是越来越少，因为确实它不是一个好的主要展示形式。列表项目可以通过间距、标题等进行分组，形成扩展列表。列表菜单导航可以将重要的UI部分以列表的形式进行呈现，让用户可以滚动查看自己要执行的操作或内容。而在二次层级上，它们还会将列表分模块进行展示，如微信中“我的”模块“新消息通知、隐私、通用”是一组，“帮助与反馈、关于微信”又是一组。虽然你能看到，但是不仔细观察就不会发现其中的要点。只要善用这个细节，可以更好的加以区分次要功能，并提升用户体验度。5、悬浮icon导航悬浮icon导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。
悬浮icon导航
悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮icon留有位置。总结标签式导航：最常用、最不易出错，请第一时间考虑它抽屉式导航：如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中跳板式／宫格式导航：不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性列表式导航：作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类悬浮式导航：更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作写在最后还是那句话，优秀的app导航设计，能够合理地完美展示产品的功能，并快速引导用户使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。感谢大家的耐心阅读，还有一路陪伴的行业大牛为我指点迷津！如果内容观点有不对的地方，欢迎批评指正！使用TabLayout快速实现一个导航栏
在没有Material Design的年代，要实现一个类似微信主页面的效果，我们有以下几种解决方案：
1.Fragment + ViewPager + RadioGroup自定义固定导航条
2.Fragment + ViewPager 带滑动导航条
3.Fragment + ViewPager + HorizontalScrollView自定义滑动导航条
当然，除了这些之外，还有许多已经被Google丢弃的方案，我们就不说了。当有了Material Design之后，一切都变得那么漂亮，也变得那么简单，我们今天就来看看怎么用TabLayout快速实现一个导航栏。先来看看效果图：
这就是我们要实现的一个效果，好了，开始吧。
1.添加依赖文件
compile 'com.android.support:design:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
在gradle文件中添加上面两个文件的依赖。
2.在布局文件中引入TabLayout
主布局文件如下：
通过上面的示例图我们已经看到了，我们的App上面是一个TabLayout，下面是一个ViewPager，所以我们的布局文件中添加这两个东西就可以了，注意TabLayout的引用方式。
3.创建Fragment
实际开发中我们可能需要创建多个Fragment，在这里做示例我就只创建一个，然后多次使用，思路是这样的，每次实例化一个Fragment的时候，传入该Fragment要显示的文本，代码如下：
public class MyFragment extends Fragment {
private static final String ARG_PARAM1 = param1;
private String mParam1;
public static MyFragment newInstance(String param1) {
MyFragment fragment = new MyFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
fragment.setArguments(args);
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_my, null);
TextView content = (TextView) view.findViewById(R.id.fg_tv);
content.setText(mParam1);
Fragment的布局文件是这样的：
&framelayout android:layout_height="match_parent" android:layout_width="match_parent" tools:context="lenve.tablayouttest.fragment.MyFragment" xmlns:android="/apk/res/android" xmlns:tools="/tools"&
&/framelayout&
4.自定义一个FragmentPagerAdapter
这个FragmentPagerAdapter我们在之前使用ViewPager的时候都有自定义过，这里就不多说了，直接上代码：
public class MyFragmentAdapter extends FragmentPagerAdapter {
private final int PAGE_COUNT = 3;
private final String[]
private List
public MyFragmentAdapter(List fragments,String[] titles, FragmentManager fm, Context context) {
super(fm);
this.context =
this.fragments =
this.titles =
public Fragment getItem(int position) {
return fragments.get(position);
public int getCount() {
return fragments.size();
public CharSequence getPageTitle(int position) {
return titles[position];
注意，这里有个不同的地方就是我们重写了方法getPageTitle，这个方法返回ViewPager中每个Fragment对应的title。
最后，我们再来看看MainActivity，首先初始化数据，初始化Fragment，这些都是ViewPager基本用法，我们来看看最后一句，这一句就是将ViewPager和TabLayout绑定在一起，实现了ViewPager和TabLayout的同步。
public class MainActivity extends AppCompatActivity {
private String[] titles = new String[]{聊天, 好友, 发现, 我的,聊天, 好友, 发现, 我的,聊天, 好友, 发现, 我的};
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
List fragments = new ArrayList();
for (int i = 0; i & titles. i++) {
fragments.add(MyFragment.newInstance(titles[i]));
FragmentPagerAdapter adapter = new MyFragmentAdapter(fragments, titles, getSupportFragmentManager(), this);
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout_navi);
tabLayout.setupWithViewPager(viewPager);交互设计实战！Tab导航与侧边抽屉导航的巅峰对决
&查看 : ( 741 )
&评论 : ( 0 )
摘要 : 编者按：本文作者Anthony Rose，是社交网络电台Zeebox的联合创始人及CTO，文章不仅分析了侧边栏导航和Tab导航的利弊，还有改版过程进行A/B test 的详尽过程，且最后也给了建议，读完能对这两种导航有清晰的认识，非常 ...
编者按：本文作者Anthony Rose，是社交网络电台Zeebox的联合创始人及CTO，文章不仅分析了侧边栏导航和Tab导航的利弊，还有改版过程进行A/B test &的详尽过程，且最后也给了建议，读完能对这两种导航有清晰的认识，非常有价值的经验分享 ：）
================正文分割线================
设想你需要设计一个含有许多页面和模块，不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的Tab导航。等一下，多出来的一排导航看上去有点碍眼？我们尝试下把他们收到侧边栏里，或者叫安卓团队给它的名字“侧边抽屉导航”。
如果你们的应用的也是多视图的，在你们的团队里，以下话题一定常常引发激烈讨论：
是把导航选项都显示在屏幕上，让你们的用户可以清晰认知app结构，并避免多余操作才能发现；还是使用侧导航让主屏的显示区域更大些。
目前，侧导航在安卓设备上比较流行，而iOS平台上使用的还不是很普遍。所以我们的讨论还要面对一个问题：安卓和iOS应用是不是有一样的用户习惯，适用一样的导航模式？
我想，在这里分享下我们的经验是很有价值的。
可用性 vs. 干净的设计
当第一次开始zeekbox项目，我们使用了顶部的tab导航。我们的理由很简单“看不到的不记挂”。既然你第一眼看不到这些入口，那么也许你也就不会知道它们在哪儿。
举个例子，上图左边的方案，如果你没有看到引导，你可能真的找不到导航在哪里。如果找到了一次，你会在每次回来zeebox的时候都记得侧导航的入口吗？即使你记住了，每次切换栏目还是会需要点击两次。
但从另外一个角度来说，没有那一排tab导航，让设计看上去干净多了，把导航放进侧边抽屉里，让主内容区域有了更大的空间余地。
侧边抽屉导航这种设计模式兴起于18个月前。
2013年九月左右Facebook使用了一种新的导航方式——也有可能是我在使用的Facebook app 作为A/B test的一个样本。当然了，既然Facebook都这么做了，那这种方案应该是好的吧，我这么想。
而后，友好而乐于提供指导的Google Play团队建议侧边栏抽屉式导航（navigation drawers）作为一种新的导航方式用于安卓应用。
所以6个月后，我们决定冒险尝试改为侧边栏导航。为了保证用户能清楚地发现侧导航，我们在应用初次打开的时候，设置侧边栏是展开显示着的，像下图这样：
新版本刚发布的时候，我们的用户反馈很棒（都是诸如“喜欢新的设计，全5分！”这样的反馈）但当我们看到自己的数据，这真是个灾难！用户参与度降低了一半，就好像“看不到的不记挂”这句话真的应验了。
让人惊讶的事实
在意识到结果的严重性之后，我们用两周时间出了一个版本恢复到了顶部Tab导航的模式。同时，为了不让哪些喜欢新导航的用户失望，我们在设置里保留了侧导航的选项。
6个月后，zeebox经历了不少的改变，我们有了一个新的“我的TV”页面，它的内容内容更丰富，包括了订阅和广告，是对于用户来说很重要的一个页面。为了让更多的内容展现在这个页面里，我们又想到了尝试侧导航。基于之前的经历，这一次，我们决定使用一种更聪明的办法，A/B test去测试。
我最喜欢的A/B test工具和方法
我们使用Flinto来制作高保真的可点击原型，它让设计看起来像是一个真实的应用，并且，使用者可以在很短的时间内就完成它。你在这里看见我们创建的Flinto原型：案例1、案例2&——在iPhone上可以获得最佳的点击效果：在页面内任何区域点击，可以交互的热区就会显示出高亮提示，可以点击这些热区，就像你使用一个真实的应用一样。
我们招募了喜欢看电视节目的用户，每周两次过来我们的工作室，测试不同的概念和我们设计的原型。在一些情况下，我们可以通过小样本用户测试选择方案，就像上面提到的对于“我的TV”页面的原型测试。对于另一些情况，像验证侧边栏导航的使用效果，你需要观察大量用户的真实使用记录。这时，我们需要使用A/B Test。
对于移动应用的A/B Test，我们使用Swrve——在我看来最成熟的A/B Test工具，它不但能提供Goal Seeking （当胜出方案明确的时候，A/B测试服务器可以自动切换所有用户到最佳选项），还能够选择对不同用户提供不同的体验方案。
举个例子来说，如果你是一个Comcast源的订阅者，你没有发现我们应用中有对Xfinity远程控制的功能，Swrve会让zeebox弹一个窗告诉你相关信息。通过这种消息提醒机制的调整控制，A/B test每天都会趋向一种更合理的测试结果。
对于侧边栏使用效果的测试，我们采用了15/85方法，即针对15%的用户投放了侧边栏的方案，85%的用户保持Tab导航的方式。我们发布了这个新版本进行A/B Test,等待最终的测试结果…
如下图，测试结果很惊人。
抽屉导航和tab导航对用户使用频率的影响
周使用频率在下降（对比明显），日使用频率在下降，用户在应用中花费的时间在下降。侧边栏导航在第一轮测试中看起来像个灾难。
感谢A/B test，让我们在一段时间的验证后快速的将所有用户切换到了tab导航的方案。
如果关于使用侧边栏还是tab的争论也出现在你们团队中，我想我们的研究经验值得与你们分享。
在我们通过A/B test决定侧边栏不适合我们产品的时候，facebook也发布了应用的新版本，还是采用了固定的底部tab导航。所以，在iPhone上他们最终还是选择了保守的导航方式。
而在安卓上，他们又是怎么处理的呢。在我的安卓设备上显示的是下图左一的方案（通过二级tab切换不同页面），在我同事的手机上显示的是右一的方案，通过（侧导航切换不同页面）。facebook一定也在使用A/B test测试用户对抽屉导航和tab的不同反应，我很期待facebook对这一测试的最终结果。
译者按：在目前最新的face版本中采用了方案1，也就是tab导航的方式，如下图所示
facebook最新决定方案
那么，到底什么时候适合用侧导航呢？
我的建议是，如果应用主要的功能和内容都在一个页面里面。只是一些用户设置和选项需要显示在其他页面里。处于让主页面看上去干净美观的目的可以把这些辅助功能放在侧边栏里。
而如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，侧边栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。
学习，从教程网开始！
部分带宽赞助
Copyright &
备案号：&&&