如何做APP界面设计

1.市场和用户调研

其中用户调研尤为重要。只有全面调查、研究和了解用户之后，才能真正了解用户需求。以用户需求为基础和导向的设计，才是真正实用、高效的App设计，才会受到用户欢迎。

2. 制作原型，及时讨论、测试和迭代设计

App设计并不是想当然，过过脑子就行，也需要及时将各种想法绘制成切实可看、可查以及可用的原型，及时讨论、测试以及迭代优化才行。

当然，对类似原型工具感兴趣的设计师，可以试试摹客原型设计工具，无论开始设计前，绘制流程图，还是设计讨论阶段，制作交互式原型，以及之后讨论、测试以及优化迭代，都能轻松快速实现。

3.及时协作和交付

设计好过程中，也需要和团队内产品经理和开发人员及时沟通，了解各项设计的还原度和可行性，确保所有设计都是真正满足用户需求。

当然，这时也必然会用到能够允许各个团队成员及时参与进来，沟通、测试、分享以及交付的工具，例如以上介绍的在线摹客设计平台，就能轻松满足这方面的设计需求。

3.不断测试和改进

即使产品已经发布，为并不意味着就可就此放手。事实上，只是产品设计的开始。发布之后，也需要设计师及时关注用户的使用情况，分析可能存在的问题，并及时改进，不断优化各方面的设计。

当我们打开一个APP时，从视觉层面分析，影响用户对APP整体感官体验的元素主要有：图片、文字、色彩、图标、留白等。

图片的合理运用、清晰的信息层级、舒适的色彩搭配都将会提高整个APP的美感，从而为整个的产品体验加分。

一个成功的产品，视觉层面只是其中的一部分，但是作为一个合格的UI设计师，我们要做的就是把这其中的一部分做到极致。

下面我们通过图片、文字、色彩、图标、留白这几个维度来解剖APP设计，发现那些微妙的细节。只需要比别人多提高1px的细节，你的APP设计就会更精致。

目录

1、图片，如同一个人的衣着品味；

2、文字，我只想知道重点在那里；

3、色彩，如何成为“色”计师；

4、图标，从会画到画好之间有多远；

5、留白，我只想要足够的空间。

正文

1、图片，如同一个人的衣着品味

图片在APP中是非常常见的，图片的展现形式和图片的质量都影响着用户对产品的感官体验。

图片的定位就如同一个人的衣着品味，不同的穿衣风格会使别人对你作出不同的判断，为你打上不同社会属性的标签。

下面我们一起来看看图片在APP设计中需要注意的关键点，将会从图片比例、一致性、图片质量与真实性等方面进行分析。

1.1、图片比例有什么讲究？

不同比例的图片所传达的信息主体不尽相同，根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。

通过体验一些主流的APP，我们会发现一些比较常用的图片比例，如 1:1、4:3、16:9、16:10等等；

也会发现一些打破常规比例的设计，我们需要分析它们的性格，结合自身产品的特点，才能在自己的APP设计中合理的加以运用。

1:1 强调主体的存在感

1:1的图片比例是比较常见的一种设计比例，利用此长宽比更容易将构图归整得简单，突出主体的存在感。

常用于产品展示、头像、特写展示等场景，在电商类APP中尤为常见。

4:3 图像紧凑、更易构图

4:3的图片比例可以使图像更紧凑，更易构图，方便设计师发挥。由于手机屏幕容量较小，作为全屏展示时，该比例在App设计布局上面占用空间较大。

16:9 电影场景般的效果

16:9的图片比例可以呈现电影场景般的效果，多用于横向构图，是应用非常广泛的尺寸比例之一，能给用户一种视野开阔的体验。

在很多影视娱乐类APP设计中运用广泛，如腾讯视频、网易云音乐等。

16:10 拥抱黄金比例

黄金比例就像金字塔上的明珠，越接近她越有魅力，反之会魅力减弱，16:10的图片比例最为接近。

设计没有绝对的标准，我们可以遵循一些优秀的经验规则，但是也要敢于突破规则，尝试更多的可能性。

X:≤Y 瀑布流设计

X:≤Y代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用于用户没有很明确的目的，只是喜欢获取尽量多的信息的情况下采用这种设计方式。

X:≤Y的图片比例要注意高度的控制，不要超出屏幕可显示区域的范围，如花瓣网在750x1334px的设计中高度最大值为：848 px。

以上列举的仅为部分常用比例的分析与说明，还有更多的比例这里就不一一演示，分享的目的是让大家养成分析的习惯，结合自身产品特点选择适合的图片比例。

图片比例选择方式：

a. 以商品展示效果为准，选择能够充分表现商品特点的图片展示比例；

b. 以产品气质为准，选择符合产品内容气质的图片展示比例；

c. 结合产品特点选择合适的常用比例；

d. 根据版面布局灵活的自定义特殊的比例值；

e. 分析→打破→创新，创造出符合某种规律或者美学概念的比例值。

1.2、图片比例的一致性

当我们结合产品特点确定合适的图片展示比例以后，需要针对整体的布局与图片分布情况，规范出那些布局可以采用相同的图片展示比例。

在保障视觉效果与交互形式的情况下，相同的主体，在不同的页面中最好采用相同的比例呈现，这样的好处不仅可以保持视觉表达的一致性，也能给后期运营维护带来便利。

1.3、提高图片的质量

越来越多的产品对图片质量开始加以重视，比如网易严选对产品图片的拍摄与处理都有严格的规范，目的就是为了提升产品气质和在用户心中的印象。

我们在设计的时候更要以最佳的图片来烘托我们的设计稿，图片的质量影响着整个界面的格调。

很多伙伴儿会觉得图片都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

a. 最佳的设计输出是设计师专业的体现；

b. 把最好的效果呈现给决策者，增加他对你设计能力的印象；

c. 通过制定运营视觉规范来把控图片质量，是可以严格把控你对图片的视觉追求；

d. 你的态度会给你带来好运。

1.4、图片的真实还原

虽然前面提到图片质量的重要性，但是我们不能为了视觉效果选择一些与主题无关的配图，这样也会给决策者一种误导。

我们可以提高配图的质量，但是需要保证图片的真实还原，这样才能让你的设计作品更加真实合理。

在一些本土的产品设计中，对于国外图片素材的运用，需要谨慎对待。如案例中的模特形象，文案信息的传达更加偏向于国内的场景，

如果运用一张国外的模特素材也许逼格更高，可是却无法真实的还原产品场景，会给决策者传达一种错误的认知。

2、文字，我只想知道重点在那里

文字设计的层次感决定了信息的高效传达，通过对文字信息的层次处理可以有效的帮助用户获取信息，提高用户对产品的操作效率。

2.1、对文字信息进行层级区分

当我们拿到交互原型或者别的需求文档时，我们需要对文字的信息层级进行有效的区分，这样才能让用户快速的获取和理解信息传达的内容。

文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时，需要明确的梳理好信息之间的层级关系，提高用户对产品的整体体验。

通过对字体大小、颜色、留白、层级划分等处理，把相同属性的信息归类设计，让整个信息排列主次分明，层级清晰。

设计师在对文字进行视觉表现时，为了达到整体界面的视觉平衡也需要减少对文字样式的运用，不可为了突出文字信息而采用过多的表现样式。

2.2、预估好信息呈现的最大值

当我们在进行界面设计时，初级设计师往往会忽略文字信息的最大值，只是按照自己的习惯进行完美的布局。

最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息，此时就会出现返工的情况，给整体的产品开发进度带来风险。

作为一名合格的UI设计师，我们需要预估好信息呈现的最大值，而不是取最小值或者随意进行设计，这样将会在执行的过程中遇到更多不可控的风险。

2.3、善于利用提示符进行设计

在一些会出现大篇幅文字信息的界面设计中，为了提高用户对信息的获取效率，我们会根据整体视觉效果选择合适的提示符进行设计。

很多初级设计师会过于遵循交互原型，往往对大篇幅文字的处理过于随意，只做着交互原型的美化，缺乏对用户体验的主动性。

在进行产品交互设计时，有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局，我们需要利用自己的专业来优化你觉得可以更好的地方，也能为你在整个产品环节中树立专业性。

关于提示符的设计表现形式主要有数字、字母、图形、色块等等，只要能有效的区分信息层级即可。

3、色彩，如何成为“色”计师

色彩给人的感受是最直观的，不同性格的配色传达不同的情感。关于配色有一些方法可寻，但是也存在一定的感性判断。

作为视觉设计师，我们需要学习理性的方法技巧，也要不断欣赏优秀的作品，提高自身的审美能力。

3.1、色彩基础知识

色彩分为无彩色系和有彩色系，无彩色系是指白色、黑色、各种深浅不同的灰色；有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。

关于色彩的更多理论知识这里不做展开，大家自行脑补色相、纯度、明度、对比、性格等等方面的理论知识。

3.2、建立色彩库

作为初级设计师我们对配色的把控不是很稳定，为了提高工作效率，我们需要通过一些理性的方式建立大量的色彩库，应对不同的需求。

下面列举部分个人比较常用的方式供大家参考，色彩收集的方法有很多，我们只需要掌握几个比较适合自己的即可，只要养成习惯并长期坚持，哪怕只运用一种方式，也是收获颇丰的。

a. 通过各类APP采集色彩

体验不同领域的APP，建立不同领域对APP色彩组合的选择，为后期项目设计奠定基础。根据主色进行分类，

如红色系列：网易云音乐、京东、网易严选、网易考拉等等；也可以根据产品气质分类，如文艺、时尚、科技、可爱等等。

b. 通过Dribbble采集色彩

在Dribbble上面，每一幅作品右侧都有该作品的配色文件，发现优秀的作品要养成这种采集配色文件的习惯。

c. 通过摄影作品采集色彩

通过优秀的摄影作品采集色彩也是常用的方法之一。

采集方式：

Photoshop打开图片 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器

d. 通过马赛克采集色彩

借助Photoshop滤镜将图片进行马赛克处理，可以得到优秀作品或者摄影图片的配色组合，特别适合采集同色系的配色。

采集方式：

Photoshop打开图片 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小

e. 从电影中采集色彩

相信大家都喜欢看大片，这部片子之所以能得到大家的追捧，必定有太多值得大家学习的元素。

作为神经敏感的设计师群体，那些刺激到我们神经元的优秀影片场景总是不能错过的。

3.3、提高审美，增强感性判断力

配色能力虽然可以通过一些理性的方法提高，但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。

我们需要不断的欣赏摄影、绘画、设计作品等等，综合的提高自身的审美，才能不断增强感性的判断力。

作为UI设计师，你不能只关注界面设计，你可以看平面作品、摄影绘画、影视动效，体验手工艺制作、运动娱乐、细心的体验生活中的每一次变化。

3.4、养成分析的习惯

要想拥有良好的配色能力，积累的过程是很重要的。当我们看到优秀的作品，要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。

只有不断的分析和总结才能逐步形式自己的思维方式，提高不同配色的把控能力。

分析的习惯不只是运用在色彩上面，对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结，掌握优秀作品的规则才能形成自我的标准习惯。

4、图标，从会画到画好之间有多远

图标是APP设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效的识别。图标也有一定的界面装饰作用，提高界面整体的美观度。

很多初级设计师都会忽略图标的重要性，也养成去素材网站下载复用的习惯，当这样的习惯养成后便会逐步丧失自己动手的驱动力，什么元素都希望能找到素材下载，工作数年之后很快就遇到了自己的瓶颈期。

设计师对图标设计的态度与把控能力，将会是拉开你与其他设计师差距的因素之一。

图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段，你现在属于哪个阶段呢？

4.1、下载复用

下载复用是很多初入行业的设计师习惯的工作方式之一，由于自身对软件技法、设计技巧、创意能力等方面的不足，无法从创意到标准制图完成一个合格的图标设计。

缺点：图标设计风格与细节处理都完全不统一，这样的习惯一旦养成就会逐步丧失自己的动手能力。

4.2、动手设计

对于大部分有设计追求的设计师，都会意识到图标设计的重要性，也会结合产品特点绘制统一风格的图标。

注意事项：图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

无论我们选择何种表现形式，在进行设计的时候都要保持风格的统一性，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡不尽相同，例如相同尺寸的正方形会比圆形显大。

因此，我们需要根据图标的体量对其大小做出相应的调整。

4.3、规范设计

当设计师养成自己动手的习惯以后，恭喜你已经进步了，保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性，运用标准的规范进行图标设计。

在标准设计的基础上面我们可以发挥自己的创意，也不一定要局限在标准里面，但是总体的本质需要符合设计规范。

4.4、融入品牌基因

图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的造型设计也几乎雷同，很多对设计比较讲究的产品，也开始根据自身品牌基因，进行图标定制化。

融入品牌基因的图标设计具有很强的品牌识别性，不仅可以形成独有的视觉差异化，也可以增强用户对产品的记忆。

5、留白，我只想要足够的空间

适当的留白可以让你的界面更有灵性，给信息之间预留更多的空间，也能更好的表达信息之间的层次感，相比拥挤的信息布局更能给人舒适的体验。

当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时，作为设计师我们可以从不同的方向试着表达自己的观点：

a. 设计出对比稿，把产品需要的方案和你觉得完美的方案进行对比；

b. 筛选出这样处理的优秀案例，以成功的案例说服产品接受你的方案；

c. 进行用户测试，选择一些目标用户进行体验，从用户心声入手设计最佳的方案；

d. 更多沟通的方法有待你去挖掘，最终的目的都是希望做出更好的产品。

设计小结

1. 不同的图片比例反应不同的特征，根据产品特点合理的选择；

2. 设计中保持相同的图片比例，不仅使视觉表达一致，也能给后期运营维护带来便利；

3. 通过提高图片的质量来提高设计作品的美感度，但是也要保证图片的真实还原；

4. 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等；

5. 养成不断建立和丰富色彩库的习惯；

6. 提高审美，增强感性判断力，养成分析的习惯；

7. 图标设计经历的几个环节：下载复用 → 动手设计 → 规范设计 → 融入品牌基因；

8. 适当的留白可以给人更加舒适的体验。

本文不讲述移动界面设计师的介绍，总体来说是针对移动端APP应用做的界面设计，但是很多人不清楚移动APP界面设计师的工作流程是怎样的，在此，北大青鸟ui培训老师带你一步一步了解。

第一步：交互流程设计

APP的交互流程设计，简单来说就是构造框架，像造房子一样，有了清楚的平面图纸才可以增砖添瓦，设计交互流程时应该对应用的功能需求有清晰的把握。

第二步：风格定位

比如说图片分享类应用图片是最重要的视觉元素，应用的设计风格应当符合视觉流程，table需要引导用户操作。

第三步：功能icon设计

功能图标即在你的应用中，充当表达某一操作或功能示意的图形，功能图标设计应极可能形象，简洁，以准确表达其代表的功能。

第四步：界面视觉效果整体优化

选用图片的时候，应该尽量按照应用的风格选取，比如这APP主打是图片分享，那么可以选取视觉靓丽，有冲击力的图片添加分享。

第五步：应用icon设计

对这款APP进行最终的icon设计，能够最优化的，最靓丽的代表这款APP的特色，品牌等形象。

第六步：完稿交接软件工程师

我们做移动界面设计，做的是各个页面的形象，具体功能实现是需要与软件工程师沟通的，在能够完成软件开发的情况下，进行一步步的界面设计，最大化增加用户体验，吸引用户，最终完美的完成这份设计。

以上内容是作者对我们学习UID培训课程的同学在以后的移动界面工作当中的一个工作流程的简单介绍，以后学员如果在UID培训课程当中学习到第三阶段的界面设计课程的话，一定要好好研究，老师对于界面设计的操作流程一定会更加的细致讲解。

看到这种提问，内心一般是抗拒的，因为产品设计是一个系统工程，单独拧出来其中一个流程来讲，都是割裂的，但在实际中又必须割裂出来，因为只有割裂出每个流程，把每个流程都想通想透，才能组成完整的产品设计的知识体系。那怎么来权衡整体和局部，系统和部件，也是一门大学问。

1.明确页面设计在整个产品设计中的位置

互联网产品设计的流程大致是：产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期，所以前期必须去和产品经理或者用研人员反复沟通，明确产品定位、明确需求、了解业务流程，然后再梳理信息架构、产品的导航形式、任务流程和页面流。不管产品经理还是交互或UI，都要去了解这些，并反复沟通，这是基础，所有的设计脱离了用户和需求都是耍流氓。

其实这也是我在以前文章中反复强调的，只要你从事的是产品设计的工作（目前涉及到的分工主要有产品经理、交互设计师、视觉设计师），都要从产品设计整体去思考问题，产品经理不要只想着需求，交互也不能只想着体验，视觉也不能仅仅思考美不美观，这种眼界的提升，会直接影响到设计方案。

如果你已经建立了整个产品设计的知识体系，这只是第一步，下一步你还有考虑产品运营，考虑商务、考虑资本，这些都是需要设计师去了解的。周末和朋友聊天的时候，他打了个很好的比喻，把公司比作一个人，那么不同的职位就相当于每个人的感官和外在，产品相当于一个人的大脑，视觉相当于一个人的衣品，商务相当于一个人的沟通能力...。你如果只了解人的一个部分，就永远没办法理解这个人。

我目前就在深耕产品设计的基础上，在学习产品运营的知识。

2.确定页面目的和目标

明确了页面设计的上游的流程，接下来要做的，是确定页面的目的和目标。

目的和目标是两个概念，目的是你为什么要设计这个页面，目标是设计这个页面想要达成什么。例如，电商的商品详情页目的是介绍商品、帮助用户进行购买决策，目标就是提高用户下单的转化率。

作为同样的商品详情页面，不同的目的和目标，直接影响到设计形式。例如京东是自营商品，用户一次性购买的越多，其客单价会更高、运营成本也会更低，所以它的商品详情页的主要目标是提高加入购物车的转化率。而淘宝作为一个平台，单独购买一件商品和一次性购买多件商品都很重要，所以它的加入购物车和立即购买的优先级是同等重要的。

记住：明确页面目的和目标，这是你设计一个页面的指导思想。

3.确定页面的来源和去处

任何单独的页面都只是用户完成某个任务的其中一环，这个页面从哪来？能去哪？影响着页面的导航设计、以及工具栏上按钮的摆放。

为了延续性，继续拿淘宝详情页来举例。

返回页面按照设计规范，基本会放在标题栏的左侧，也有一些小众APP考虑到单手操作放在页面底部，其它如分享和更多一般会放在标题栏的右侧。另外针对当前页面的一些操作会放在工具栏上，例如淘宝的客服、店铺、收藏、加入购物车、立即购买；例如资讯类APP的留言、点赞、收藏等。

在考虑页面的去处的时候，一般有二级页面的形式和临时框的形式，临时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态临时框，而没有采用二级页面，这能减少用户在完成一个任务时的跳转步骤，提高转化率。

4.确定页面内容和优先级

经过前面三个步骤，页面框架基本成型，现在就要往这个框架填充内容。根据信息架构设计，基本会确定这个页面需要包含哪些内容（关于信息架构设计，可以参考 《90%的设计师都不知道的信息架构知识》 ）。

其次就要确定页面信息的优先级，确定优先级的判定依据就是第一步所说的当前页面的目的和目标，以及在做需求分析的时候，公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点：

①用对比的手法，明确信息层级，优先级越高信息表现越突出。例如上图格和销量字段的对比；

②优先级最高的放在用户第一眼能看到的位置（页面的第一屏）。例如将商品图片、标题、价格放在第一屏的位置，评论则放在第二屏的位置；

③优先级低的要弱化、甚至是隐藏或删除。客服、店铺和收藏的按钮相对于加入购物车和立即购买，很弱，消息、帮助、我要反馈则更弱，所以被收起在右上角更多的icon中。

5.考虑技术的局限性

上次在做阅读APP的时候（pad平台），需要在E-Ink屏上的阅读页面增加竖屏模式，这种模式会更利于用户进行阅读的，类似于kindle的阅读体验。但是因为下屏没有做G-senser，所以是不支持竖屏的，只好放弃。如果我实现不去了解这点，做出来的方案只是浪费时间。

现实做设计的过程中还有很多类似的例子，不管是交互还是视觉，总是会想到一些创新好玩的设计形式，每当这个时候一定要去和相关技术人员沟通，确保设计方案的可行性。此外还要考虑项目周期，如果上线时间紧迫，其实是不允许设计师把设计形式做得很重的，只需要出一个简单的保底方案即可。

我自己就有在做设计之前和相关技术沟通想法的习惯，真的帮助很大。

还是文章前面的那句话，页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环，也不要只站需求、只站在交互、只站在视觉上思考问题，这样你永远是个美工，而不是一个设计师。设计师是一个能用设计语言提供系统性解决方案的人，而不是简单画图的人。

         将入口放在页面的底部，形成标签导航。目前这种导航的设计方式在app设计中非常常见，其优点十分明显，即用户可以非常直接的看到该app的功能结构。而缺点是这些功能并没有非常清晰的主次关系，同时扩展性差。因此目前标签导航建议底部的标签不超过5个，如果超过5个建议使用其他方式。

        该类导航与标签导航相似，不同的是中间的导航标签会蕴含更多的操作选项，即该标签中包含了更多的二级导航。以小红书为例，其底部导航就是典型的舵式导航，点击“+”标签会直接唤醒相机并可以导入图片/视频等内容

        对于舵式导航里的扩展二级标签，这些二级标签可以形成一种单独的导航- 点聚导航 ，从Bilibili的底部导航可以看出，点击中间的导航会弹出4个二级标签：开直播、拍摄、上传和模板创作。舵式和点聚导航的方式往往适用于产品需要特殊引导或者是凸显核心功能的场景。其缺点是功能之间无主次，扩展性差，不利于后期的功能拓展。

       将标签放到界面的上方，就会形成tab标签导航，这种导航适用于类目较多的APP作为二级导航梳理页面逻辑，布局清晰。作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量，展示有限的几个标签。也可以扩大一定的数量，变成向左滑动展现更多标签，十分灵活，但是因为在手机中左右滑动不如上下滑动方便，因此，个人认为还是不要展开太多标签。以微博和下厨房为例，这两个APP都采用了Tab页导航。

        抽屉导航是将菜单隐藏在当前页面后，点击导航入口即可像拉抽屉一样拉出菜单。抽屉导航一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，优点是可以节省页面空间，比较适合于不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏。以网易云音乐为例，其采用了非常标准的抽屉式导航，目前更多APP会采用抽屉导航的变式，即点击导航入口以后，以向右滑动的方式，整个抽屉页将滑动出现并且占据整个屏幕，例如小红书app的抽屉导航。

        一般位于产品顶部，通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层，可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置。但由于是位于屏幕上方，相对隐蔽而且不能结合手势操作，所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。

       主要功能入口全部聚合在页面，让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作，用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务。这种导航于一些提供的服务较多或者类目较多的APP，例如支付宝、淘宝等。

       宫格导航的应用很广泛，也产生了很多变种，以百度贴吧为例，其在应用宫格导航的时候，将功能进行了分类并且用标题加以区分，使用户更容易从众多功能中找到需要使用的功能。

       还有一种变式，是可滑动的宫格，这种设计适合于宫格内容较多，但是不想占用太多屏幕空间，于是用户可以左右滑动来查看功能内容。以小米app为例，由于功能较多，但是不希望占用较多屏幕面积，因此导航只放了两行功能，但是用户可以向右滑动找到更多的功能。在宫格区域下方采用了指示器来告知客户滑动的范围。

通过列表指示类目，在右侧显示箭头表示有二级内容，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

同样可以对列表进行分类产生变式，这样逻辑会更清晰，不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。

每一个页面就代表一个导航入口，这就是轮播导航，适用于比较简单或者结构比较扁平的APP。轮播导航能够最大程度的保证应用的页面简洁性，操作也是最方便的，只需要手指左右滑动。缺点也很明显：承载入口的数量有限，超过10个可能就多了。这种导航常见于查看图片，也经常与其他导航模式结合，作为banner广告呈现。

任何一款App都是有共同的特点的，或者叫共同的结构、功能、规则，我总结了就四个字：栏、图、控、框。

“栏”指的是App界面中存在着很多栏：

（1）状态栏：一般位于界面顶部，我们在手机上看到的手机信号、时间、通知、电量等都是位于状态栏；

（2）导航栏，也叫标题栏：多数情况下，App每个页面仅次于状态栏下会有导航栏，告诉用户你现在处于什么位置，当然有些App的一些界面并没有导航栏，其实并不是没有导航栏，只是留有位置没有文字而已；

（3）标签栏：有很多新人容易把标签栏和导航栏搞混了，这也许是受Web端产品中“导航”所影响，App中一般位于底部或者顶部的，用于大版块切换的栏，就是标签栏；

（4）工具栏：用于执行针对当前页面的操作的栏，比如留言框、收藏、分享、点赞等按钮所处的栏；(一般打开具体内容页面时才存在，也就是微观页面上才有），

（5）筛选栏：筛选栏并不是所有App都会有，一些信息维度比较多的App，比如招聘类App，会有筛选栏，支持按条件筛选，一般位于导航栏下方；

（6）搜索栏：这个很直观了，就是执行搜索功能的栏，一般和导航栏重叠或者位于导航栏下侧。（现在很多时候位于导航栏一行）

“图”即“视图”，请注意“视图”不是界面，而是代表着一种视图结构。视图分为宏观视图结构和微观视图结构。

宏观视图结构 分为集合视图和列表视图

微观视图结构

例如：列表视图中每组信息可以是文本视图（纯文本）、图文视图（纯图片）、文本+图片视图，在一些较个别的App中还存在“卡片视图”，比如探探，一个界面就一个视图，可以以卡片形式，通过滑动切换视图内容。

“控”指的是“控件”，说起控件，App里面的控件真是太多了，不说具体的，就按照类别划分：最常见的各种 按钮控件、轮播控件、文本控件、分段器控件、选择控件、计数器控件、加载控件 等。

“栏”、“图”原本都是静态的，可是为什么能有交互，就是因为在旁边或者上面添加了控件。

“框”要比前面三种元素出现的频率低，一般在特殊情况下才会出现。这也符合多数情况下，App应用是稳定的、安全的，少数情况下会出现波动或者风险的实际情况。当我们要删除一条信息，会有对话框提示，当网络不佳时页面加载缓慢或者失败，会有toast提示，当需要注册时会有注册框等等。目前，用的最多的就是对话框和toast，ios中对话框叫做“Alert View”，安卓系统中对话框叫做“dialog”。

讲到这里，一款App，不管它的定位、性质、功能是什么样的，基本都离不开以上四部分，换句话说，以上四部分组成了App的界面，有了这四部分，你的App可能还不是很完美，但起码算是完整了。对于已经有多年产品经验的老人来说，这确实不够，但是对于新人来讲，掌握“栏”、“图”、“控”、“框”这四字要诀，你在设计App界面时不会丢三落四，不会找不到着眼点。

想象一下，你在设计App的首页时，从上往下要有状态栏、导航栏、搜索栏（可选）、标签栏，安插了轮播控件的banner位，以列表形式结合图文形式的视图界面，每个图文视图安插了按钮控件，下拉或者上拉或者点击标签栏“首页”按钮出现了加载或刷新插件。