app怎么设计导航栏

1. APP常用8种导航形式

虽说一款应用的生死不是由导航决定，但毋庸置疑，导航模式的选择在产品用户体验上占有很大的比重。就导航本身来说，没有优劣之分，端看你的应用适合哪种。下面是我罗列的一些常见的移动导航模式，接下来会对其一一举例说明（注：重要模式会重点分析，其余简略，篇幅略长，不喜可跳过）

1、标签式

标签式导航是iOS平台上公认的最经典的导航模式，看市场上几乎有80%的应用都在使用就能知道。标签式导航关注的是平行空间的展示，它的优点是适用于多个内容体系，且重要程度相似（平级关系），能频繁在不同页面间切换，切换成本底，只需一次点击；缺点是占用一定高度空间，且标签数量有限，最多5个标签。

淘宝，是标签式导航的标准使用形式，每个标签作为一个导航分类放在标签栏中（注意都是名词）。可以算是标准形式的变形（还有其他变形形式，后面再讲），虽然也是有5个标签，但处于中间位置的标签不是作为导航使用，而是一个行为召唤按钮。行为召唤按钮主要强调某项重要功能的快捷使用，该功能需要是应用最核心且最常用的功能，优先级很高。比如instagram,它的目标是以一种快速、美妙和有趣的方式将你随时抓拍下的图片分享出来，它关注的是能随时随地抓拍。因此，作为行为召唤按钮的“拍照”放在标签栏上就很有必要。

但是，有些应用对于行为召唤按钮的放置并不合理。如下图的图3-，虽然文章的撰写是的核心功能，将其作为标签栏中的一个按钮，即能在视觉上凸现出来，又能减少操作负荷，似乎很棒。但却忽略了一个重要的问题，从使用环境来说，文章或者文档的撰写是需要在安静且能集中注意力的环境下，但移动app天然具有干扰多且注意力不集中的问题。而且在手机上输入上百字也是一件痛苦的事。对于这款产品的手机用户来说，可能用户对内容的消费比对执行动作更重要。

另外，还有一种常见的标签式导航的变种，即传统的标签式+点聚式。这里先专门讲一下点聚式，最为我们所熟知的点聚式就是曾经经典的path结构，即抽屉导航+点聚式，如下图所示—改版前图示，它的目的是将用户最频繁使用的多个核心功能点汇聚在主界面中显示，方便用户随时呼出使用。只是，如今单独使用点聚式的应用越来越少，就连path也对这种传统的点聚式进行了调整，变成了依附于标签的点聚式结构，如下图中的path改版后。还有下图中的样式1和样式2，也是这种形式的不同展现。他们的共同点是，使用同一个导航入口，进行多个同级功能的不同操作，大部分都是2-5个不同的操作选项，当然也会有更多，比如下图中的新浪微博，点击“加号”入口，出现了更多的功能选项,且这些功能的优先级相若。

其实，在android 5.0中，这种点聚式更常用的表现形式是悬浮响应按钮，它代表的是这个app中最主要的操作。只是就目前来讲使用场景有限，实际应用并不理想。

二、抽屉式

抽屉式导航的目的是带给用户更为沉浸的体验。它的特点是，“阅读”为王，点击切换少，专注于主体信息本身。从表现形态来看，抽屉导航很符合产品的二八法则，即产品中只有20%的功能常用，所以要突显，剩下的80%不常用，因此隐藏。它不像标签导航一样强调平级关系的切换，而是突出重要且核心的功能。抽屉导航的另一些优点是，侧边导航收纳的导航标签可以是5个以上，节省屏幕空间。缺点是无法快速完成导航切换，操作成本高。

关于抽屉导航，在Android和ios平台的使用也有区别，可以看我的另一篇文章《关于Android和IOS交互上那些事》，此处就不做赘述。抽屉导航在Android平台上比ios更常使用。由于在ios上，抽屉导航没有专门的设计规范，所以使用上较为随意，表现形式也不受拘泥。

如果以抽屉导航和主页在空间位置为评判依据，其在风格上主要有3种表现，第一种是浮层，即导航抽屉处于主页上层，通过滑动或点击的手势打开抽屉，抽屉部分遮挡或覆盖原来页面的内容，如下图中图4，这种风格多数会在Android上出现。第二种是叠加式，即导航抽屉位于主页的底部，打开抽屉，原来的主页会向屏幕右侧滑动，显出主页下方的导航抽屉，如下图中图5，这种风格在ios上很普遍。第三种是嵌入层，即导航抽屉和主页处于同一层，通过轻滑、平移或点击打开抽屉，把原先的页面内容部分推出屏幕外，如下图中图6（注意导航和主页衔接处无阴影）。而第三种风格经常会有如下图图7的变形，就是说在打开侧边抽屉的时候，嵌入式抽屉不仅把上一级页面向右推开，还采用3D效果将其推到后面。了解不同风格可在设计时斟酌使用。

三、选项卡式

对于选项卡导航，不同平台有不同的设计规则，关于Android平台我就不多说了，请移步至《关于Android和IOS交互上那些事》有详细说明。今天主要说说ios上选项卡的表现，选项卡的本质即是，实现容器内不同视图或内容的切换。虽然对于选项卡本身，ios没有专门的规范约束，但这并不妨碍广大设计者们自由发挥。目前市场上主要有3种形式的选项卡：分段选项卡、固定选项卡和滑动选项卡。

分段选项卡：是由两个或两个以上宽度相同的分段组成，正常情况下不超过4个，视觉上会有一个很明显的描边按钮。分段选项卡经常会作为二级导航，对主导航内容再次分类，可以在顶部导航栏的下方，也可以直接放在导航栏上，如下图所示。标签之间互相关联，只能点击切换，操作效率较低。

另外，就是固定选项卡和滑动选项卡，两者都可以直接点击或左右滑动切换选项，且一级和二级导航都能使用。区别就是滑动选项卡可以有更多选项，且能直接通过手指滑动导航找分类，适用于相关类别多的应用，如下图的电子商务网站。

四、下拉菜单式

现如今，下拉菜单式导航并不常用。下拉菜单和导航抽屉一样，是以突出内容为主的导航模式，一般位于产品顶部，通过点击呼出导航菜单。由于导航菜单位于屏幕顶部，不适合结合手势，操作负荷大，因此不适合需要频繁切换功能，且能在一定程度上节省屏幕空间。一般情况下，下拉菜单很容易被滑动选项卡取代，且滑动选项卡可以结合手势操作，使用效率更高，这也是现在下拉菜单很少被使用的原因，除非你的下拉菜单选项中有很明显的优先级区分。比如下图所示，图8的新浪微博首页作为默认选中项，显示和用户相关的所有微博，常态下用户只需要一直浏览下去即可，很少需要主动点击切换，除非想要筛选某些特定的微博内容，此处的内容优先级很容易区分。同理，图9也是如此，用户关注更多且更感兴趣的是以项目为维度的内容分组，因此用下拉菜单来表现。另外，多数菜单是以点击后弹框的形式出现，也有一些是从底部滑出一个新的页面调出菜单，如下图中的图10。

五、宫格式

宫格式导航，是一种类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容，用户进入一个入口后，只处理与此入口相关的内容，如果要跳转至其他入口，必须要先回到入口总界面。这种导航经常用于工具类app中，它的优点是功能拓展性强，可增加多个入口。缺点是单页承载信息能力弱，层级深，不适合频繁任务切换。如下图的美颜相机就是标准的宫格式结构，每个功能类似于独立的app,且作为一级导航使用，这种表现形式现在越来越少。而剩下的其他三张图示，属于宫格式的一种变形，我称之为数据入口，这种只作为各种大数据入口的导航模式现在更多作为二级导航使用，特别是平台类产品。

六、列表式

列表式导航也是一种十分常见的导航模式，纯粹的列表导航很少见，一般都是搭配着别的导航模式一起使用，大多作为二级导航。列表中可以放置图片、标题或者详情文字等来展示信息，列表本身是一个传达信息效率很高的载体，因此使用列表的时候要注意，每个列表所占的屏幕空间，以及每屏能显示多少条列表等。如下图所示的图1-1采用了列表的分组模式，图2-2中列表中的每项信息可能都会影响用户的点击转化，所以如这种形式的列表，细节信息很重要。图1-3和图1-4为二级列表，点击列表右侧的小符号，可以展开或者隐藏信息，这方便用户查找信息并快速定位，多数情况下，点击右侧小符号可能会出现快捷编辑模式或者部分详情信息，便于用户直接编辑或者浏览。而点击整个列表，通常会进入新一级的详情页面。因此，设计师在设计的时候要注意。

七、图示式

图示式是一种更加可视化的导航，它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。由于图片可能需要经常更新，因此需要配置固定的栏目或标题，防止不断更新的图片让用户找不到入口。这种形式的导航常常会采用网格布局，如下图所示，每行基本上会有1-3个图示单位，不同的网格布局决定了每屏容纳的图示个数，因此用户浏览效率及点击转化率也会有所不同。

八、幻灯片式

幻灯片的导航方式，适用于图片或整块内容的并列展示，用户通过手指左右滑动来切换当前内容。正常情况下，幻灯片的数量不宜太多，最好控制在7-8个以内，避免用户操作疲劳。如下图所示，使用幻灯片设计最好在设计上提供视觉暗示，让用户清楚的知道所处的位置以及幻灯片数量，例如添加分页标识码，或者隐喻还有下一张图片等。

2. 移动开发中导航栏和搜索栏在设计中应该注意哪些问题

一、导航栏位置
在iOS上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。在安卓上，Google公司在Material Design中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏（ Top App Bar）。
导航栏是用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用。很多人疑惑，为什么标签栏不能叫做底部导航？因为标签栏是构架了多个屏幕之间平级页面的内容切换，和导航的定义没有任何关联。
二、导航栏UI设计规范与实际项目的应用
基本的导航栏容器一般承载的信息可能会有：标题；导航按钮；内容控件按钮；其他控件（比如搜索栏、分页标签或分页控件等）；千万别忘了还有分割线。

1、导航栏标题设计规范
2017年以前的移动端规范下的导航栏还是循规蹈矩的，样式单一。但随着iPhone X等一系列全面屏手机相继问世后，移动设备在屏幕高度上有了进一步的扩展，界面设计在一屏内的发挥空间也随之增加。iOS11发布后，大标题导航栏设计风格兴起，随后被引入平台规范。
于是现在iOS与Material Design在导航栏上也都定义了两种导航栏标题规范：常规标题与大标题。

常规标题是指在高度为88px（iOS@2x下）的导航容器中，居中放置一个当前页面的标题。标题字号一般为34px-38px（34px为iOS标准规范，但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定）。

大标题是将导航栏栏高增加到192px（iOS@2x），保留高度为88px的导航容器来承载内容控件按钮，将标题下坠居左。iOS的标准规范定义大标题的字号为68px。但由于英文有大小写区分，在视觉上有一定的层次表现，而中文因为缺少一定的层次结构，并且相同字号的中文视觉大小大于英文，所以大多数时候我们在进行大标题设计时，会适当缩小，一般为56px-64px居多。

大标题导航栏的优点毋庸置疑，页面留白更多，呼吸感更强，大气现代、更高，因为页面标题巨大，能够帮助用户快速确认当前所处位置；采用统一的大标题，让页面布局风格快速统一。但缺点也显而易见，因为增加了导航栏的高度，导致屏幕利用率降低，一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点，进行了风格改进。

2、导航按钮及内容控件按钮设计规范
iOS规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级；Material Design中，则不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉 或者 关闭图标-关闭工具栏。

与iOS的定义有着天壤之别，iOS非常明确地赋予了工具栏的定义，并且将导航栏和工具栏（Toolbars）彻底地分离开，典型案例就是Safari。在内容控件上iOS与Material Design也大相径庭，Material Design不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。

而iOS则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。真实的项目中我们经常为了快速落地，会存在一稿适配双平台的情况。这时候我们应该遵从哪一个平台的规范呢？答案是：许多大厂的做法已经向我们验证，规范不分家。

在iOS诸多的应用中溢出菜单早已普及，尽管这是Material Design提出的设计理念。虽然国内遵从Material Design进行Android应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。

3、分割线设计规范
分割线只是一种体现形式，我想要表达的是，别忘记区分导航栏与内容界面的视觉层级关系。Matetial Design提醒我们，顶部应用栏可以与内容位于同一高度，但滚动时，请增加导航栏的视觉高度，让内容在其后方滚动。而iOS则默认采用了背景模糊的方式区分了导航栏与内容区域的层级关系。

4、其他控件
关于其他控件，iOS只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分，此时建议可以在导航栏中使用分段控件。
国内的应用程序早已将导航栏容器的作用发挥到极致，基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。

导航栏用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用，在一个页面发挥着重要作用，设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合操作还能给用户带来极大的体验增益。因此掌握好导航栏的设计技巧对一名设计师来说尤为重要！

搜索框

在视觉上以下两点比较需要注意：

1、放大镜图标

使用图标。我不想对其会增加找到搜索栏的速度进行强调。越简单越好。越少的细节能够保证用户能快速地扫视它。虽然，只有一个图标本身而没有一个可输入的容器或按钮实际上会使搜索变得更加困难。人们通常会意识到，一个放大镜图标显示的是一个搜索工具，即使它没有标签。但是糟糕的是，只有一个图标则会使搜索更加困难。

2、一个真实的搜索按钮

并非每个人都是学会在网上冲浪的千禧一代，这意味着，并不是每个人都知晓在他们输入查询之后需要按下Enter键。在搜索输入旁边添加一个实际的按钮将帮助用户确认他们的下一步行动，进而减少用户所需的认知负荷。

输入特色：

确保可输入的长度不会太短。诺曼集团的相关研究表明，一个能输入27个字符的输入框，可以满足90%的用户需求。

添加占位符可以帮助过滤用户查询行为

3. 产品笔记一：使用axure8.1制作手机app底部导航栏效果

使用工具：Axure pr 8.1版本。
制作效果如下图：选中任意tab切换到对应界面，以及选中状态的改变。

作为一名初学者，元件的组合选中以及拖动，动态面板的使用，中间还是有几个细节需要注意的，笔者初学自己研究了好久，网络并没有用，也许是关键词不合适，总找不到合适的答案。好，废话不多说，下面开始操作步骤。

1.1、创建导航栏母版，axure界面左侧底部母版栏，点击加号创建一个母版并命名。
1.2、双击母版，进入母版编辑页面。在这里进行那些拖动等操作啦。

2.1、我们观察到导航栏总共5个tab组成，每个tab里有两个元素一张图片，一个文本标签。但是为了可以方便的设置宽高调整距离均分屏幕并且组合拖动设置点击状态等，我们将图片和文本放到一个矩形框里。

2.2、拖动一个矩形到界面上，拖动一张图片原件，一个文本标签元件。如下图，调整大小样式等。

2.3、要想整体拖动这三个元件，那么就要将这三个元件组合在一起。按住command键（我用的mac），选中矩形，图片，文本标签 右键-->点击组合，即可将是哪个元件组合在一起。

2.4、点击组合元件右键-->转换为动态面板。双击它，会弹出下面的弹窗，输入动态面板名称。添加状态：选中以及未选中两个状态。你可以先添加选中，然后双击选中状态进入编辑选中状态页面，添加选中时的图片，文字以及文字颜色等。然后回到动态面板点击加号旁边的复制可以复制选中的状态，并命名为未选中，双击未选中去修改里边的图片以及文字颜色等即可。这样间距之类的就不用去重复设置了。

2.5、其他四个tab只要复制第一个创建编辑好的动态面板去修改里边的状态的图片和文字就好了，就不用重复创建了。

2.6、拖动到底部导航栏矩形内部调整好间距均分屏幕。

3.1、给每个tab点击时要进入对应的页面，那么我们在下图中添加5个对应的页面。

3.2、选中第一个tab，在左侧首页属性，点击鼠标单击时。如下图：

点击链接，打开链接，当前窗口，点击首页，确定。

3.4、至此底部导航栏母版制作完毕。然后最后一步，将母版应用在各个页面上。点击右侧底部导航栏，右键-->选择将母版添加到页面中。选择全部全部页面即可。

点击首页Tab，选中首页时，其他tab的状态需要变成未选中。这个是如何改变呢？通过页面载入时，设置各个tab的状态
4.1、比如点击找车页面，右侧属性，点击页面载入时。如下图：

4.2、双击页面载入时，弹窗，选择设置面板状态，找车选择选中状态，其他选择未选中状态。其他tab相同设置。如下图：

至此，所有步骤完成。

发布预览一下就可以了。

4. 怎样设置导航栏

一般是：设置——全部设置——导航栏，当然可能不同的手机型号，设置方法不同。仅供参考。而涉及导航栏的具体步骤如下面的表格会写得很具体。

在屏幕上找到如图所示红色方框标记的“设置”选项，点击进如设置界面。
点击选择下图所示红色方框标记的“导航栏”选项。
我们可以看到下图所示目前“导航栏可隐藏”选项是关闭的。
点击打开红色方框标记的“导航栏可隐藏”选项后，我们可以看到如图下方红色标记的位置多了一个向下的“箭头”，这个“箭头”就是可以隐藏导航栏的选项。点击这个“箭头后”导航栏便会消失。
如下图所示，点击“箭头”后，导航栏已经在屏幕界面中消失了。如果再想导航栏出现，只需要拇指从屏幕最下方往上滑动一小段距离即可。
导航栏几个按键的位置还是可以调换的，如下图所示我们选中的导航栏按键分布已经和前面图片上显示的不一样了。

5. uniapp中自定义头部导航栏设置和使用注意事项

uniapp中自定义头部导航栏设置，去掉官方默认导航

<viewclass="status_bar">
    <!-- 这里是状态栏 -->
</view>

/* 自定义状态栏 */

.status_bar{

height:var(--status-bar-height);

width:100%;

}

6. Android 将App的内容延伸到状态栏/导航栏

来自我的CSDN博客： http://blog.csdn.net/dahaohan/article/details/52175190

看过Android的桌面应用都是介样的：

如何让自己的应用也达到这般效果呢？这里就介绍几种常用的方法以及它们之间的区别。

首先展示下此次demo的布局和初始状态：

初始效果图如下：

使用这个方式首先要理解几个概念，窗口层级以及窗口background/窗口透明：
Google在API-19 以及API-21新增对状态栏/导航栏窗口透明和颜色的控制：

对应的在主题内即可控制：

这里首先要明了这里状态栏和导航栏窗口是系统级窗口而Activity对应的时应用窗口，它们属于不同的窗口层级；
然后状态栏/导航栏系统级窗口是在App应用窗口之上，故而Activity应用窗口虽然有整个屏幕的大小，但是可显示内容的区域得除去其上叠加的不透明的窗口区域。详细的窗口计算绘制可参考大神老罗的博文：
Android窗口管理服务WindowManagerService计算Activity窗口大小的过程分析

下面来使用主题控制导航栏/状态栏透明，同时看看上述两种设置透明的方式效果有何不同：

初始桌面和启动Activity效果图：

可以看到虽然导航栏/状态栏透明了，当时应用窗口显示的内容依然只是除去了两个系统窗口之外的区域，并没有衍生到导航栏/状态栏之下。

效果如下：

可以看到已经将应用的内容布局延伸到导航栏/状态栏下方了，来看看关于android:windowTranslucentStatus
android:windowTranslucentNavigation的官方说明看看来理解其与设置color transparent的区别：

根据FLAG的说明，可以看出设置该标志位等同于View申请设置：

PS：从效果图看，虽然布局延伸到状态栏导航栏区域，但是相应的内容“hello world”文字也被状态栏/导航栏遮住了。在布局根视图设置fitsSystemWindows为true可以使得，系统自动为视图添加一个状态栏/导航栏高度的padding：

效果如下：

查看SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 和 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN的说明，可以发现其实还有两个非常接近的FLAG：

根据官方的说明提示，SYSTEM_UI_FLAG_FULLSCREEN / SYSTEM_UI_FLAG_HIDE_NAVIGATION主要用于动态切换隐藏/显示系统导航栏/状态栏；例如书籍阅读应用/视频播放应用等。而像游戏类的全屏应用则推荐使用window flag。

上述的透明导航栏/状态栏等API基本是需要API-19或是API-21才能使用的，这里还有一种API-1的方案能够实现布局内容全屏：

实际上只需要设置FLAG_LAYOUT_NO_LIMITS就足够了；这FLAG是看Android原生的Launcher / Keyguard源码，看到有用到如此设置，其窗口设置具体原理我也没有弄清..... 有大神了解可以指点下。

PS：这个套路下，使用fitsSystemWindows="true"是无效的，智能自己控制号布局位置。

7. APP设计中状态栏导航栏这些需要自己去画吗

第一步：PS文档的建立。

据到今天为止，iphone手机常用的有iphone4、iphone5、iphone6和iphone6 plus系列。

25学堂跟大家讲解的APP设计流程的界面尺寸是iphone6 的尺寸 【全部的APP设计尺寸】

尺寸大小：750*1334

iphone6 目前是我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问我的设计总监(从业12年)应该用什么尺寸设计，他是就用IP6的尺寸吧，好适配，切出来就是@2x了，上下都能照顾到。如下图：

APP画布的建立

第二步：APP首页的绘制和构建

一个完整的APP界面包括状态栏、导航栏、内容视图和标签栏。

文档建立之初就设置好参考线是个很好的工作习惯，我希望更多的设计师可以养成更完美的工作习惯。

上下的参考线很容易设置，因为是根据IPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，所以不要当成什么规范，确切的说，整个屏幕你都可以随便做，但是我们这里说的是正常页面。

APP首页设计稿

上图当中的首页视图区域是设计师自由发挥的区域。这里25学堂绘制了一个banner区域、主题导航区域和其他区域三个部分。

在第一屏幕有限空间里面 25学堂的老谭同学建议大家放置3到3.5个重要的栏目即可。

操作系统的规范课外阅读：在ios系统当中总共包含7个栏：点击查看详细的解读

ios UI控件

（1）状态栏如何来绘制：

一般新手设计师要去绘制它，其实不用了。为了教大家快速上手设计APP界面。

直接可以挪用设计大神们已经设计好的状态栏。比如从APP设计模板当中去获取。

8. 抖音底部导航栏怎么设置

抖音底部导航栏设置办法：抖音的位置设置，点击进入到抖音的设置选项，在位置设置中关闭当前手机自定义的位置信息，或者是直接选择手动输入的方式来确定位置。

在手机上打开抖音APP软件，进入主页，然后点击界面底部的“+”图标。点击“+”图标后会出现拍摄界面，我们点击该界面底部的红色按钮来录制一段视频。录制到视频后会出现“√”和“X”选项。

GPRS设置：

1.进入主菜单后，选择：手机设定→连接→互联网设定→互联网模式→添加模式，以添加新的连接方式。

2.之后系统将会提示选择使用哪个数据帐户，如果机身上已经预设有的话，直接选择数据帐户就可以了；如果机身没有预设或者是不确定是否正确的话，则需要新建一个数据帐户。

在新建帐户时，帐户名称可以随意填写、帐户类型则选择GPRS数据、接着在“APN”栏中填上“cmwap”就可以了，用户名及密码这两项不需要去管他。

9. 移动APP的常见的几种导航形式

当确定了APP的设计需求和产品的整体结构之后，要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好，很大部分取决于APP界面布局的合理性。这个时候就要想以最优的设计结构将APP的内容展现给用户，那么，如何将信息以最优的形式展现出来呢？这就涉及到了APP的导航应用方式，可以说一个优秀的导航设计对一款App的核心体验起到了决定性的作用！

知道了导航的重要性，在考虑导航设计时，需要注意以下事项：

1.可达性：

移动应用的导航功能可以说是所有界面最重要的组成部分，因此一定要保证其可达性，并把最关键的要素尽量突出，同时不要影响到内容本身。

2.目的性：

确保导航中的每个按钮要素简单明了，有明确的引导用户点击的目的性。让用户一看就知道是什么意思以及操作结果是什。不要弄的太过花哨，这样反而会让迷惑用户，起到反作用。

3.易于理解：

如果想设计比较高级的导航功能（例如链接图片、允许滑动或其他手势导航，或者访问隐藏菜单），请务必在设计过程中保证前后一致，以便用户熟悉你所使用的模式，同时还应加入一些额外的信息（例如小箭头、文字或改变颜色或高亮等）来吸引用户注意力，并以微妙的方式对用户进行引导。不要给用户呈上“看得见摸不着的导航功能”。

4.通用性

导航功能应当以一定的形式显示于移动应用的各个界面。各个导航模式不一定要完全相同，但其基本结构应当在应用内保持一致，可以根据背景进行小幅度的调整。

明确上述几点注意事项后，将APP的信息结构分层，把主要、最核心、最根本的功能放在第一层级，次要内容放在第二层级甚至更深。然后根据层级关系、结构关系确定导航的形式。

结合产品的深度和广度来共同探讨一下目前APP界面常见的几种导航形式，并分析其优缺点，从而进一步判断每一种导航形式更适合应用于哪种类型的APP！

标签式导航，也就是常说的Tab式导航。是目前应用最广泛、最常见的导航形式。

标签式导航可分为 顶部标签式导航、底部标签式、舵式导航（底部扩展式导航）。

顶部标签式导航

顶部标签式导航顾名思义，存在于页面的顶部。顶部标签导航多应用于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个以内，且用户需要在入口间频繁切换来执行多个任务

注意：

结构太过复杂而且不稳定的应用不适合标签式导航。

抽屉式导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，因此称之为抽屉式导航。

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。 设想你的产品信息层级有非常多的页面和内容，难以在一屏内显示全部内容，那么你一定首先会想到去设计一个底部或顶部的tab导航，但导航太多无疑显得臃肿，而且使用户难以点击，那么这个时候，抽屉式导航是个不错的选择。

抽屉式导航存在几个缺陷：

1.左上角的导按钮存在于单手拇指操作热区难以到达的位置，导致导航按钮难以触达；2.降低了用户对产品一半的参与度；3.可见性低。

有些人认为“现在的APP的发展不仅仅是从前单一的功能，功能随产品的发展变得越来愈多，抽屉式导航已经不适应大多数的产品，这种导航终将被遗弃”。但是，导航栏的使用方式并不是单纯随着看产品的功能增加而不被使用，而是随着整个产品的信息结构和功能形式来设计决定的。抛开产品的功能表现而去讲产品设计是不合理的。

何种情况下适合使用抽屉式导航：

1.如果应用主要的功能和内容都在一个页面里面。只是一些低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

2.如果应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

3.在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。

注意：

需要用户有一定参与的信息层级，最好不好放置在抽屉栏

跳板／快速启动／宫格导航是将主要入口全部聚合在页面，让用户做出选择。

采用这种导航的应用已经越来越少， 往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。 如下图新浪微博，点击导航栏中间的发布按钮，弹出二级菜单，这个二级页面就是采用的宫格式导航，作为发布微博的入口。

这种导航模式非常常见，但是却不常用。

无论你用的是Android还是iOS，每天一打开手机，宫格式导航就会对你说hello了。

每一个APP都是一个宫格，这些宫格聚集在中心页面，用户只能在中心页面进入其中一个宫格，如果想要进入另一个宫格，必须要先回到中心页面，再进入另一个宫格。每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各平台系统的中心页面。

宫格式导航的缺陷 ：

信息互斥，无法相互通达，只能给用户带来了更多的操作步骤。无法让用户在第一时间看到内容，选择压力较大。

何种情况下适用于宫格式导航：

适合入口相互独立互斥，且不需要交叉使用的信息归类

注意：

一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。

列表式导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。作为辅助导航来展示二级甚至更深层级的内容

列表式导航分为3类： 标题式列表、内容式列表、嵌入式列表。

标题式列表 :一般只显示一行文字，有的显示一行文字加一张图片等等。

内容式列表： 主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。

嵌入式列表： 嵌入式其实就是由多个列表层级组合而成的导航。能很好的解决次要功能非常多的问题

所有关于列表导航的例子大部分都是依附于标签导航之上的。前面我就说过现在以列表形式作为主导航的产品是越来越少，因为确实它不是一个好的主要展示形式。 列表项目可以通过间距、标题等进行分组，形成扩展列表。 列表菜单导航可以将重要的UI部分以列表的形式进行呈现，让用户可以滚动查看自己要执行的操作或内容。

而在二次层级上，它们还会 将列表分模块进行展示 ，如微信中“我的”模块“新消息通知、隐私、通用”是一组，“帮助与反馈、关于微信”又是一组。虽然你能看到，但是不仔细观察就不会发现其中的要点。只要善用这个细节，可以更好的加以区分次要功能，并提升用户体验度。

悬浮icon导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。

悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮icon留有位置。

标签式导航： 最常用、最不易出错，请第一时间考虑它

抽屉式导航： 如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中

跳板式／宫格式导航： 不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性

列表式导航： 作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类

悬浮式导航： 更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作

还是那句话，优秀的app导航设计，能够合理地完美展示产品的功能，并快速引导用户使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。

感谢大家的耐心阅读，还有一路陪伴的行业大牛为我指点迷津！如果内容观点有不对的地方，欢迎批评指正！