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

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

界面作为咱们认识APP的榜首道门槛，是APP的“体面”，更是不行忽视的一项要点设计，为了树立有用的UI，设计师需求依据移动端APP自身的特性和当下趋势，作出不一样的改动。

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

今天，四海方城威客网就给咱们介绍几种常见，也是时下比较流行的移动端UI界面类型，希望对咱们有帮助。

闪屏页

每次翻开App时榜首眼看到的便是闪屏页（又称发动页），该页面承载了用户对这款App的榜首印象，因而对设计的要求是很讲究的。闪屏页给用户观看的时刻很短，一般只要一秒的时刻，因而，如何在这么短的时刻内表达出产品的定位便是设计师需求要点考虑的问题。

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

品牌宣扬型

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

节假关怀型

当节假日降临，许多App会经过营建节假日的气氛来表现人文关怀。当眼前出现一幅朴实的节假日插图时，观者会从内心感受到软件带来的祝愿，从而具有夸姣的心情。

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

另外，也能够用整个场景的插画来营建节假日的气氛，这也是十分讨喜的表现方法，如图所示。

活动推行型

有时候产品在运营过程中会做一些活动或许广告，推行内容一般会显现在闪屏页上。活动推行型的闪屏页多以插画方法表现。

要侧重表现的是活动主题及时刻节点，营建热闹的活动气氛。在设计时必定要捉住主次，防止由于烦琐的场景影响到主题的表现，如图所示。

引导页

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

在做引导页之前，咱们首先要学会定位，了解App的方针用户群。四海方城威客网简略来说，引导页分为功用介绍型、情感带入型和搞笑型3种类型。

功用介绍型（根底型）

功用介绍型引导页是最根底的一种引导页。这种引导页要确保信息展现一针见血，切忌噜苏、表达不清。在这样一个网络化、碎片化的时代，用户逗留在引导页上的时刻越来越短，浏览时刻一般不会超过3秒。

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

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

情感带入型（中级型）

情感带入型的引导页能经过案牍和配图，把用户需求经过某种方法表现出来，引导用户去考虑这个App的价值，如图所示。这种类型的引导页要求设计形象化、生动化、立体化，能够增强产品的预热作用，一起给用户带来某种惊喜。

品牌宣扬型

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

在一般状况下，这种类型的引导页对设计师的要求比较高，需求设计师学会扮人物和讲故事，归纳运用拟人化和交互化的表达方法，依据方针用户的特点来进行设计，最终让用户感同身受，在页面上逗留更长的时刻。

浮层引导页

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

这种引导页的浮层一般以手绘表现方法为主，会运用箭头和圆圈来进行设计，并用高亮的色彩来杰出信息，一起选用蒙版方法来加强杰出功用，如图所示。

空白页

空白页分为首次进入型和过错提示型两种。四海方城威客网简略来说，空白页便是由于网络问题造成的页面或许是没有内容的页面，例如页面中显现“没有信息”“列表为空”“过错”和“无网络”等内容的页面就属于空白页。

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

首次进入型

在用户榜首次翻开运用的时候，App会利用空白页的提示引导用户进行操作，指引用户找到需求的内容。

过错提示型

过错提示型的空白页不只在网页中很常见，并且在App中也经常出现，例如显现“找不到页面”或许“网络中断”等，如图所示。这种页面中一般会指引用户解决问题，例如点击“改写页面”按钮能够改写页面等。

主页

不同功用的App有着不一样的主页模块，挑选一种适合产品自身的主页展现方法十分重要。现在，App主页同质化现象越来越严峻，页面根本都朝着一个方向去设计。

作为设计师，必定要做到多看多用才干够找到更适合产品自身的展现方法。下面介绍一下主页最常见的4种表现方法，分别是列表型主页、图标型主页、卡片型主页和归纳型主页，不同类型的主页布局承载着不同的内在。

列表型

列表型主页是指在一个页面上展现同一个等级的分类模块。模块由标题案牍和图画组成，图画可所以照片，也可所以图标，如图所示。列表型的主页更便利点击操作，上下滑动也能够检查更多的内容。

图标型

当主页包含几个首要的功用时，能够采纳图标的方法进行展现，如图所示。图标型的主页最好是在榜首屏展现完整，并将点击做到最简略。

卡片型

在遇到操作按钮、头像和文字等信息比较复杂的状况时，能够选用卡片型主页方法。卡片型主页能让分类中的按钮和信息紧密联系在一起，让用户一望而知，一起能还有用地加强内容的点击性，如图所示。

归纳型

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

归纳型的主页设计要特别注意分割线和背景色彩的区别不能太过明显，挑选比较淡的分割线和背景色来区别模块即可，由于要确保页面模块的整体性，如图所示。

个人中心页

在App中，个人中心页又称为“我的”页面，一般设计在底部菜单栏的最右侧。交际运用中，个人中心有两种人物的区别，一个是自己的主页面，还有一个是别人的中心页面。

自己的个人页面能够自己进行修改，而别人的页面是供用户重视或进行私信沟通的。所以，个人中心页与其他页面在功用上需求有场景区别。

个人中心页首要由头像、个人信息和内容模块组成，一般会选用头像居中对齐的方法进行设计，意图是为了表现当前页面的信息都与自己有关。头像一般会选用圆形，由于这样看起来更为和谐，一起画面也会显得更为丰满，如图所示。

还有一种设计是以头像居左对齐为主，一般在信息比较多的状况下会选用这种设计，不只能节约空间，一起也能让内容在一屏上展现完整，如图所示。

在交际运用中，更多的是要凸显人与人的联系，所以个人中心“重视”和“粉丝”的数量是两个十分重要的信息。设计时应该侧重凸显数字，表现个人在群体中的价值，如图所示。

列表页

在运用软件查找或点击分类查找后会出现结果页面。结果页面一般会以列表的方法来表现，包含单行列表和双行列表两种，展现的内容为“图片+称号+介绍”。另外，还能够用时刻轴和图库的方法来设计列表页。列表页的设计尽管简略，但却困扰着不少设计师。

整体而言，设计列表页时，需求遵循这些原则：留白空间要张弛有度，且要有亲疏之分；对齐的方法要规整；粗细元素的组合要有节奏感；需求要点杰出的元素的色彩要明亮；列表的层次感要清楚；在用真假方法进行结合设计时，要确保实的目标在前，虚的目标在后。

单行列表

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

双行列表

双行列表页的表现方法愈加节约空间，每个卡片的排布方法为上面是图片下面是文字，能够让页面显得更为丰满，如图所示。

时刻轴

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

图库列表

图库列表页首要出现在相册或图片修改类App中，其间相册的图库列表页有文档和图片平铺两种显现方法。为了让散布更为均匀规整，图片一般会选用正方形的方法进行摆放，如图所示。

播映页面

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

在视频播映页中，为了增强用户的易用性，一般会选用两种播映方法：一种是在信息流或概况页面中直接预览；另外一种是全屏预览视频，如图所示。

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

概况页

概况页是整个App中发生消费的页面，页面中的内容比较丰富。在阅览类App中，概况页首要以图文信息为主，相对来说愈加重视文字的可读性，所以会挑选比较大的字号来杰出标题和内容，如图所示。

在电商类运用中，概况页的首要意图是引导用户去购买产品，所以购买的按钮会一直呈现在界面的顶部，便利用户购买商品，如图所示。

可输入页面

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

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

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

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