APP页面布局设计模板与讲解

在一个APP的使用过程中，优秀的页面设计与用户导航对用户体验影响极大。

某些时候的第一印象与操作便决定了用户的留存率。

对于一些新手开发，独立开发者或者小开发团队，往往程序员自己就承担了美工和设计工作。

对于这些开发者来说，往往缺少这方面的经验，而如果缺少了这两项，产品的使用体验是非常不友好的。

用户体验是什么？用户体验（User Experience，简称UE/UX）是用户在使用产品过程中建立起来的一种纯主观感受。

但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计实验来认识到。

计算机技术和互联网的发展，使技术创新形态正在发生转变，以用户为中心、以人为本越来越得到重视，用户体验也因此被称做创新2.0模式的精髓。

在中国面向知识社会的创新2.0——应用创新园区模式探索中，更将用户体验作为“三验”创新机制之首。

ISO 9241-210标准将用户体验定义为“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应”。

通俗来讲就是“这个东西好不好用，用起来方不方便”。

因此，用户体验是主观的，且其注重实际应用时的产生的效果。

我们常经历到，一个产品从设计的初期到后期完善，都会经过一系列的迭代和升级。

作为初期的设计人员，发挥的空间是很大，但历史的惨痛教训告诉我们，初期的设计往往又是失败居多，很多情况下是由于自己的局限性造成的，尤其在后期，架构不是想改就改，用户习惯不是想改就能改的，所有在前期，特别是上述提到的集美工设计开发于一体的人，要慎重考虑APP的架构设计，本文所阐述的两个方面，其一为页面设计，其二为用户导航。

APP页面功能设计包含了首页，注册页，。

APP用户导航，是App设计时要着重考虑的，常见的App框架有列表、网
格、屏幕轮显、标签导航、tab导航、抽屉导航、卡片、泳道、堆叠组合。

页面设计
登录页面设计
每一产品app都会有一个登录页面，它是产品第一次接触用户的页面，也是第一个传递信息给用户的媒介，由此可见它非常重要的，作为一个招牌或者是门面，一个好的登录页往往会给用户留下深刻印象，无论是界面视觉表现，还是流程交互体验，都是不可或缺的。

主要包含：产品LOGO及公司，用户名与密码的输入框（充分考虑输入框弹起后是否会遮挡输入框），注册页面的链接，登录帮助。

核心功能：传递品牌产品信息，提供登录注册路径，感知产品方向。

注意对LOGO的应用，运用产品符号或是品牌符号作为设计主要元素，一是可以传递品牌感，二是可以渲染产品行业属性特征，两者都能兼顾，可以是视觉冲击力和氛围渲染力都非常强。

注册页面设计
注册一直是应用中必不可少的一环，用户打开应用可能第一步就是登录
页面，这相当于一款应用的脸面，也是用户使用产品的源头。

当然也是因为不常被用到所以更最容易被忽视，它作为一项基础功能，使用场景一般是用户初次使用应用或者退出登录，又或是大版本更新和登录过期才会使用到。

注册登录的意义就在于给用户独有的个人中心，包括数据的同步，或是用户注册后会通过用户已完善的资料进行相关的内容推荐。

iOS 11更新带动了新的设计趋势，大标题+留白被广泛使用，注册登录也不例外，现在很多产品都使用相对简洁的设计（下面左图），仅使用大标题和必要的线框和提示语，让用户只聚焦注册登录本身，去除多余的干扰元素，可以节省用户的时间。

相对早期的设计手法是在页面中加入logo（下面右图），好处是可
以进一步强化用户对产品品牌的记忆点。

其实注册承接的功能除了收集用户数据外，与登录是一致的，只不过在日常操作中比登录的频次少很多。

这里需要主要的是广泛的第三方登录与自己产品的数据登录。

核心功能：传递品牌产品信息，收集用户数据。

第三方登录的方式，一般在页面下方提供链接。

概述页面与设置设计
这里的概述页面一般指的是展示用户信息的页面，在此页面中，需要将用户
感兴趣的信息展示出来。

首页设计
功能众多，可以采用图标型或者卡片型。

（九宫格+TabControl），这样功能简洁明了，类别区分清晰，对于一些功能型软件，用户能很快找到他所需要的功能。

列表是单一的连续元素以垂直排列的方式显示多行信息，有纯文本列表，也有图文结合的列表。

首页使用列表布局，多用于推荐热门资讯。

作品罗列型，是将用户的信息或者作品呈现在首页，在商业应用上，有的App 是把作品精选放到首页，这类App 的作品有些是编辑自己制作的，比如VOUN ；也有些是用户提交，编辑精选的，比如SuperFX ；也有些是用户自己发布的，比如美拍。

这个类型的App 因为制作好看的作品集的成本比较低，操作比较简单，所以放作品集。

一方面让用户觉得自己也是可以把作品做的这么有趣和好看的，增强用户的信心。

另外一方面，用户的作品展示出来被看到被点赞，也让用户有成就感，形成良性循环。

用户导航
常见的app框架有列表、网格、屏幕轮显、标签导航、tab导航、抽屉导航、卡片、泳道、堆叠组合。

其实将这方面独立出来讲时因为，在用户体验后，如果对整体效果感到满意，他将会立刻去寻找自己所需要的功能，那么，APP类的用户导航是十分重要的，虽然与页面设计相关性不大，却与用户体验息息相关。

而这些导航单独出来设计非常容易，在现实使用中确往往是交叉重合，如何在设计初期考虑好这些问题，对整个App的生命周期都非常重要。

列表
列表，常见于功能比较单一的应用场景，是app中最常用的一种方式。

列表内容常见形式有：文字列表、图标和文字的混合列表、标签和控件（复选框、按钮）列表、图片和视频缩略图与文字组合列表。

遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。

合理的应用列表，对于较好的用户体验提升是非常大的。

●网格
网格最典型的代表就是九宫格，在APP设计中十分常见。

网格（grid）就是能图标等内容根据水平方向和垂直方向划分所构成的辅助线进行布局。

在界面设计中，九宫格这种类型的构图更为规范和常用，用户在使用过程中非常的方便，应用功能会显得格外的明确和突出。

很明显的例子就是iPhone、安卓、windows phone主界面，均是采用的网格布局设计。

在应用中，网格布局通常用来展示模块功能或者软件所需要展示的信息和媒体内容。

或者是包含图像、文本、按钮、链接元素的卡片。

点击某一个格子时，会进入到下一级内容，展现出另一个网格、内容列表、空间列表、预览页面、详情页面等。

也可能会在当前页面弹出模态页面，进行更多操作。

●屏幕轮显
屏幕轮显（screen carousels）也是一种常见的交互方式，使用者可以向左或者向右滑动进行快速切换页面，比较适合页面层级较低的交互，几乎不需要进一步的交互（也不需要像“堆叠模式”深入导航）。

轮显通常在屏幕下方有一
个页标（小圆点）来导航。

轮显的优点就是交互层级低，一般不需要用户更多的点击操作，适合层级简单的应用，一个页面基本就能满足需求。

缺点就是不适合交互复杂的app。

常见的有ios的天气应用、墨迹天气、常见的app引导页。

抽屉导航
抽屉（drawer）熟称汉堡导航，往往是隐藏式导航，是把更多标签集合在一起，隐藏在抽屉中，点击抽屉图标，展示出来。

和标签栏一样，被选中的项目会高亮展示。

抽屉里的栏目样式不限定，常见的是文字列表或者带图标的列表，当然还有其他更多形式。

抽屉的样式有两种，一种直接覆盖在原页面上，另一种是将原页面挤过去并排展示。

抽屉的图标一般是放在左上角，但也有次要的抽屉放在右上角。

抽屉的使用也一直备受争议，支持者认为，手机屏幕小，隐藏菜单，能展示更多的内容；反对者认为，抽屉将功能隐藏起来，需要多一步操作，很多功能不明显，影响了使用。

当然，两方的说法都没有错，只是我们要合理使用。

对于常用的功能应用，使用抽屉并没多大影响，用户会很快适应。

如果你使用抽屉，建议首次进入时直接打开抽屉，或者采用首次引导。

但是，本身应用就很少被用到，建议使用标签导航，主流应用也是以标签导航为主的。

泳道
泳道是一组垂直排列的轮显，每个轮显能独立水平滚动互不影响。

泳道结合了网格布局的方法，排列比较规整。

泳道的交互形式主要是：水平滑动（展示单条泳道里面更多的内容）、垂直滑动（展示更多泳道）、点击（进入泳道的下一层级）泳道需要注意的是，不能设置为自动滚动。

在进行排版时，将泳道内的最后一个内容露出部分，引导用户进行水平滑动，垂直布局上也应该如此，减少用户的迷茫。

使用泳道是要谨慎使用的，因为后面被隐藏的内容是不容易被发现的，所以使用泳道的时候要考虑到优先级的问题。

卡片
卡片包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。

卡片常见的组织形式是列表，有时候也会以网格、轮显、泳道的形式出现。

卡片有这些特点：一清晰直观，二简单易懂，三信息模块化。

结语，其实在我们设计APP的时候可以参考市面上很多成功的APP的设计，在经过用户与市场的考验后，这部分APP往往具备非常优秀的设计，而在当今大部分功能差不多的情况，稍加借鉴和修改就能变为己用。

除去APP外，我们手机的操作系统，Android和IOS其实本身就包含了丰富的页面设计，很多时候，APP的灵感甚至来源于这两大系统，因为任何一个APP的用户量都没有他们大。

所以，下次苦恼于页面设计与用户导航时，掏出自己的手机来摸摸鱼划划水，说不定灵感就来了。