UI设计入门篇：10种最基本的APP界面类型

随着互联网的发展和智能手机的普及，移动应用成了人们最热爱的宠儿，许多移动APP也会根据用户的需求而更迭本身的UI设计。

（不同APP的界面）

界面作为我们认识APP的第一道门槛，是APP的“面子”，更是不可忽视的一项重点设计，为了建立有效的UI，设计师需要根据移动端APP本身的特性和当下趋势，作出不一样的改变。

但当今设计趋势瞬息万变，在没有统一标准的设计规则之下，紧跟设计趋势，才能保证UI对用户的吸引力常在。

今天，数艺君就给大家介绍几种常见，也是时下比较流行的移动端UI界面类型，希望对大家有帮助。

01

闪屏页

每次打开App时第一眼看到的就是闪屏页（又称启动页），该页面承载了用户对这款App的第一印象，因此对设计的要求是很考究的。闪屏页给用户观看的时间很短，通常只有一秒的时间，因此，如何在这么短的时间内表达出产品的定位就是设计师需要重点考虑的问题。

只有设计出定位明确且吸引人的闪屏页，才能加深用户对产品的认知度。闪屏页分为品牌宣传型、节假关怀型和活动推广型3种类型，不同类型的闪屏页承载的内容信息和表达方式也不一样。

品牌宣传型

App的闪屏页是为了体现产品的品牌而设定的，主要组成部分是“产品名称+产品形象+产品广告语”，如图所示。品牌宣传型的闪屏页是最为直白的闪屏页，设计较为精简，力求凸显品牌特点。

品牌宣传型闪屏页

节假关怀型

当节假日来临，很多App会通过营造节假日的气氛来体现人文关怀。当眼前出现一幅朴实的节假日插图时，观者会从内心感受到软件带来的祝福，从而拥有美好的心情。

QQ音乐在设计中，对品牌的LOGO进行了延展设计，以凸显节假日的元素。这种设计不仅能够加强与用户的情感交流，还能加深用户的品牌的印象，如图所示。

用LOGO体现假日元素的闪屏页

另外，也可以用整个场景的插画来营造节假日的氛围，这也是非常讨喜的表现方式，如图所示。

用插画体现节日气氛的闪屏页

活动推广型

有时候产品在运营过程中会做一些活动或者广告，推广内容通常会显示在闪屏页上。活动推广型的闪屏页多以插画形式表现。

要着重体现的是活动主题及时间节点，营造热闹的活动氛围。在设计时一定要抓住主次，避免因为烦琐的场景影响到主题的体现，如图所示。

活动推广型闪屏页

02

引导页

一个好的App引导页能够迅速抓住使用者的眼球，让他们快速了解App的价值和功能，起到很好的引导作用。有一句话是这么说的：“优秀的UI可以造就App的点击率”。

在做引导页之前，我们首先要学会定位，了解App的目标用户群。简单来说，引导页分为功能介绍型、情感带入型和搞笑型3种类型。

功能介绍型（基础型）

功能介绍型引导页是最基础的一种引导页。这种引导页要保证信息展示一针见血，切忌啰唆、表达不清。在这样一个网络化、碎片化的时代，用户停留在引导页上的时间越来越短，浏览时间通常不会超过3秒。

在这宝贵的3秒钟内，设计师需要把简洁明了、通俗易懂的文案和界面呈现给用户，如图所示。请记住这句话：“用户需求就是你的文案，功能介绍型的例子比比皆是。

功能介绍型引导页

功能介绍型引导页分为带按钮的引导页和不带按钮的引导页两种类型。一般社交类的产品会强制引导用户去登录，所以会在引导页面中加入登录的入口，如图所示。

引导页登录入口

情感带入型（中级型）

情感带入型的引导页能通过文案和配图，把用户需求通过某种形式表现出来，引导用户去思考这个App的价值，如图所示。这种类型的引导页要求设计形象化、生动化、立体化，能够增强产品的预热效果，同时给用户带来某种惊喜。

情感带入型引导页

品牌宣传型

搞笑型引导页的阅读量一般都比较高，拼的是设计效果或动画效果，如图所示。

在一般情况下，这种类型的引导页对设计师的要求比较高，需要设计师学会扮角色和讲故事，综合运用拟人化和交互化的表达方式，根据目标用户的特点来进行设计，最终让用户身临其境，在页面上停留更长的时间。

搞笑型引导页

03

浮层引导页

浮层引导页一般出现在功能操作提示中，是为了能够让用户在使用过程中更好地解决问题而提前设计的用户教育。

这种引导页的浮层通常以手绘表现方式为主，会使用箭头和圆圈来进行设计，并用高亮的颜色来突出信息，同时采用蒙版方式来加强突出功能，如图所示。

浮层引导页

04

空白页

空白页分为首次进入型和错误提示型两种。简单来说，空白页就是由于网络问题造成的页面或者是没有内容的页面，例如页面中显示“没有信息”“列表为空”“错误”和“无网络”等内容的页面就属于空白页。

在一般情况下，这种页面都会通过文字信息给用户提示。好的空白页面会花费不少设计时间，因为这种页面不仅是用于提示，还会引导用户进行实质性的操作，从而加强用户对产品的黏性。要注意，空白页的设计一定要简洁明了。

首次进入型

在用户第一次打开应用的时候，App会利用空白页的提示引导用户进行操作，指引用户找到需要的内容，如图所示。

首次进入型的空白页

错误提示型

错误提示型的空白页不仅在网页中很常见，而且在App中也经常出现，例如显示“找不到页面”或者“网络中断”等，如图所示。这种页面中一般会指引用户解决问题，例如点击“刷新页面”按钮可以刷新页面等。

错误提示型的空白页

05

首页

不同功能的App有着不一样的首页模块，选择一种适合产品本身的首页展示方式非常重要。现在，App首页同质化现象越来越严重，页面基本都朝着一个方向去设计。

作为设计师，一定要做到多看多用才能够找到更适合产品本身的展示方式。下面介绍一下首页最常见的4种表现形式，分别是列表型首页、图标型首页、卡片型首页和综合型首页，不同类型的首页布局承载着不同的内涵。

列表型

列表型首页是指在一个页面上展示同一个级别的分类模块。模块由标题文案和图像组成，图像可以是照片，也可以是图标，如图所示。列表型的首页更方便点击操作，上下滑动也可以查看更多的内容。

列表型首页

图标型

当首页包含几个主要的功能时，可以采取图标的形式进行展示，如图所示。图标型的首页最好是在第一屏展示完整，并将点击做到最简单。

图标型首页

卡片型

在遇到操作按钮、头像和文字等信息比较复杂的情况时，可以选用卡片型首页方式。卡片型首页能让分类中的按钮和信息紧密联系在一起，让用户一目了然，同时能还有效地加强内容的点击性，如图所示。

卡片型首页

综合型

电商类产品模块的表现方式比较多，有图标形式也有卡片形式等。如何才能让多块内容在页面中显示得清晰易读，这是对设计师能力的考验。

综合型的首页设计要特别注意分割线和背景颜色的区分不能太过明显，选择比较淡的分割线和背景色来区分模块即可，因为要保证页面模块的整体性，如图所示。

综合型首页

06

个人中心页

在App中，个人中心页又称为“我的”页面，通常设计在底部菜单栏的最右侧。社交应用中，个人中心有两种角色的划分，一个是自己的主页面，还有一个是他人的中心页面。

自己的个人页面可以自己进行编辑，而他人的页面是供用户关注或进行私信交流的。所以，个人中心页与其他页面在功能上需要有场景区分。

个人中心页主要由头像、个人信息和内容模块组成，通常会采用头像居中对齐的方式进行设计，目的是为了体现当前页面的信息都与本人有关。头像一般会采用圆形，因为这样看起来更为协调，同时画面也会显得更为饱满，如图所示。

居中对齐的个人中心页

还有一种设计是以头像居左对齐为主，通常在信息比较多的情况下会采用这种设计，不仅能节省空间，同时也能让内容在一屏上展示完整，如图所示。

头像居左对齐的个人中心页

在社交应用中，更多的是要凸显人与人的关系，所以个人中心“关注”和“粉丝”的数量是两个非常重要的信息。设计时应该着重凸显数字，体现个人在群体中的价值，如图所示。

社交应用需要凸显数字的价值

07

列表页

在使用软件搜索或点击分类查找后会出现结果页面。结果页面通常会以列表的形式来体现，包括单行列表和双行列表两种，展示的内容为“图片+名称+介绍”。另外，还可以用时间轴和图库的形式来设计列表页。列表页的设计虽然简单，但却困扰着不少设计师。

总体而言，设计列表页时，需要遵循这些原则：留白空间要张弛有度，且要有亲疏之分；对齐的方式要规整；粗细元素的组合要有节奏感；需要重点突出的元素的颜色要明亮；列表的层次感要分明；在用虚实方式进行结合设计时，要保证实的对象在前，虚的对象在后。

单行列表

大多数消费类产品的结果页面都会以单行列表的形式进行展示，左边为图，右边为文字信息、评分和价格等，这样的展示方式易于用户阅读，如图所示。图片能够诱导用户进行点击，文字则用来解释商品。

单行列表页

双行列表

双行列表页的表现形式更加节省空间，每个卡片的排布方式为上面是图片下面是文字，可以让页面显得更为饱满，如图所示。

双行列表页

时间轴

为了加强内容的前后时间关系，通常会使用时间轴的方式来设计列表页，这样的表现形式能够更好地凸显每条信息之间的关系，让用户阅读起来更有条理性，如图 所示。时间轴列表页的展示方式为左边是时间轴上各节点，右边是与时间节点对应的内容。

时间轴列表页

图库列表

图库列表页主要出现在相册或图片编辑类App中，其中相册的图库列表页有文档和图片平铺两种显示方式。为了让分布更为均匀规整，图片通常会采用正方形的形式进行排列，如图所示。

图库列表页

08

播放页面

播放页面包括音乐播放页、视频播放页和音频播放页。在音乐类App中，通常会将歌手或CD的大图居中对齐放在中上方，下方摆放可操作性的按钮，如图所示。

音乐播放页

在视频播放页中，为了增强用户的易用性，通常会采用两种播放方式：一种是在信息流或详情页面中直接预览；另外一种是全屏预览视频，如图所示。

前者在内容页面中进行播放是为了加强界面的可操作性，例如选集、点评和分享等功能，而全屏播放视频的目的是让用户体验更舒服、更沉浸。

视频播放页

09

详情页

详情页是整个App中产生消费的页面，页面中的内容比较丰富。在阅读类App中，详情页主要以图文信息为主，相对来说更加注重文字的可读性，所以会选择比较大的字号来突出标题和内容，如图所示。

阅读类App的详情页

在电商类应用中，详情页的主要目的是引导用户去购买产品，所以购买的按钮会一直呈现在界面的顶部，方便用户购买商品，如图所示。

电商类应用的详情页

10

可输入页面

在社交软件中，注册登录页面是必不可少的，这类页面的设计务必要做到易用简便。注册登录页要考虑唤起键盘的时候文字信息会不会被遮挡，输入框的宽度是否易于操作，文字提示是不是达到最精简程度等。

例如有些输入框显示的提示文字是“请您输入邮箱”，其实只需要提示“邮箱”两个字就足够了，所以注册登录页的设计在注重可操作性的同时一定要注意文字的表达是否言简意赅，如图所示。

注册登录页面

在发布信息内容的时候会出现相关的内容填写页面，这种页面很注重类别的分组，例如将图片分为一组，货号和批发价分为一组，将内容有条理地进行分组等。

可以减少用户的填写压力，如图所示。在分类比较多的情况下，选用的背景和分割线的颜色不宜太重，否则会让页面显得琐碎不堪。

发布信息内容的填写页面

以“读”攻毒，防控疫情不忘阅读。

精品课程推荐：

PS精品课程限时9元！

加入数艺社交流群

设计素材下载 学习视频资源

读者交流学习 图书售后服务

软件安装指导 读者意见反馈

数艺社QQ群：

PS学习交流群：853671182

手绘学习交流群：1053029482