UI设计入门:五种基本APP界面类型【萧蕊冰】_萧蕊冰冰的博客-程序员信息网_界面的五种类型

技术标签: ui  ui设计  

今天这篇是一个UI设计入门:五种基本APP界面类型的欣赏。随着互联网的发展和智能手机的普及,移动应用成了大家最热爱的宠儿,许多移动APP也会根据用户的需求来随时替换本身的UI设计。本篇UI设计入门分享的是app界面的设计赏析。
在这里插入图片描述

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

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

下面介绍几种常见,也是时下比较流行的移动端UI界面类型,希望对大家有帮助。

1、闪屏页

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

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

品牌宣传型

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

在这里插入图片描述
节假关怀型

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

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

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

活动推广型

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

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

在这里插入图片描述

2、引导页

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

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

功能介绍型(基础型)

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

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

在这里插入图片描述

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

在这里插入图片描述

情感带入型(中级型)

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

在这里插入图片描述

品牌宣传型

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

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

3、浮层引导页

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

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

在这里插入图片描述

4、空白页

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

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

首次进入型

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

在这里插入图片描述

错误提示型

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

5、首页

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

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

列表型

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

图标型

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

在这里插入图片描述

卡片型

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

在这里插入图片描述

综合型

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

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

在这里插入图片描述

以上五种就是今天介绍的 UI设计入门:五种基本APP界面类型。除了这几种之外,还有很多,下次有机会再接着分享。关于APP的用户界面设计,需要设计师紧跟流行潮流,设计趋势,稍微一点落后就会降低用户的体验感,设计师要根据APP的特性和时下流行的趋势来设计,才能保证ui对用户的吸引力。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_48127421/article/details/106856003

智能推荐

javascript 同源策略及web安全_matiascx的博客-程序员信息网

同源策略为什么而生?JS可以读取/修改网页的值。一个浏览器中,打开一个银行网站和一个恶意网站,如果恶意网站能够对银行网站进行修改,那么就会很危险。你打开了恶意网站和另一个网站,如果没有同源限制,该恶意网站就可以构造AJAX请求频繁在另一个网站发广告帖。同源策略就是为了解决这类问题而出现的。同源策略限制一个加载于A origin的document或者script能够如何和来自于另

oracle中sysdate的变更,oracle – 使用sysdate的to_date函数_带你进黄铜的博客-程序员信息网

select TO_CHAR(to_date(sysdate,'DD-MON-YYYY'),'DAY') FROM DUAL;当我运行此查询时,输出为:SUNDAY.但我们今天知道的是星期二(1-1-2013).和然后将查询更改为select TO_CHAR(to_date('01-JAN-2013','DAY') FROM DUAL;答案是:星期二.然后将查询更改为select TO_CHAR(...

作为一个程序员,没有自个的 “范” 怎么行呢?_ぃ小小宇宙的博客-程序员信息网

不一样的烟火,不一般的“程序猿”程序员眼中的用户 写了自己都不清楚的表达式 车直接拖走 想找一份工作,正在考虑入行… 你为什么跳槽, 嗯~~~555··· “工作环境可能不太合适吧” 纯属娱乐,希望大家喜欢~~~...

2. vsftd 用户管理之虚拟用户_Java 程序源的博客-程序员信息网_vsftd 用户

vsftpd 的用户分为两大类: 匿名用户和具体用户. 具体用户的用户又分为: 系统用户和虚拟用户, 系统用户和虚拟用户只能选择一种方式. 虚拟用户相对于Linux 系统用户而言, 虚拟用户只能通过FTP 协议登录FTP服务器, 不能用于ssh 登录Linux 服务器. 虽然说虚拟用户方式配置复杂, 但是笔者更倾向于使用这种方式, 因为如果使用系统用户的话, 那么根本无需搭建FTP 服务器, 直...

基于SSM的网上订餐系统的设计与实现_dawei_123456789的博客-程序员信息网_基于ssm的网上订餐系统开题报告

基于SSM的网上订餐系统的设计与实现(JSP,MySQL)(含录像)(毕业论文7000字,程序代码,MySQL数据库)本设计的开发是基于B/S结构,采用JSP编程技术及Mysql数据库进行开发。本文首先介绍网站开发环境和运行平台、ASP、HTML、CSS3和java script,并对系统的设计进行了详细的需求分析;然后给出了网上订餐系统的设计方案及系统的具体实现,实现了网上订餐系统的构建,主要...

随便推点

python request模块下载_python中的Requests模块_Friday永不为奴的博客-程序员信息网

讲解对象:python中的Requests模块作者:融水公子 rsgz介绍:1 Requests 是一个第三方 Python 模块2Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用3我们使用 pip3 安装它危险:1 非专业使用其他 HTTP 库会导致危险的副作用2 副作用:安全缺陷症、冗余代码流程:1 更新软件列表$ sudo apt-get update...

433模块 espeasy_ESP-01S刷ESPEasy固件,接入HA_weixin_39915204的博客-程序员信息网

准备接线从ESP01S到USB-TTLTTL——ESP01S3.3V——VCC和EN(CH_PD})TXD——RXRXD——TXGND——GND和GPIO0 图片来自:https://www.domoticz.cn/forum/viewtopic.php?f=17&t=5USB-TTL插入电脑,已经发现连接到com12口打开ESPEasy_mega-20190110文件夹,复制子目录bin...

tomcat中自定义docBase_imiMi_的博客-程序员信息网_tomcat 指定 docbase

tomcat中自定义docBase后,应用启动了两次与日志错乱的问题。Linux服务器上部署了tomcat应用服务器,用log4j打印日志。发现每天的日志会有一部分打在昨天的日志文件中,而且日志中会发现应用启动日志打印了两份;日志出错的原因是由于将tomcat的docBase指定到了webapps;之前是由于使用nginx指向二级域名服务器时,8080端口不能使用,所以采用了更

Android百度地图开发API key申请详细步骤_犀牛先生的博客-程序员信息网

开发移动app应用,经常会遇到定位与导航需求,开发者自己去实现不太可能,一个是工作量大,另一个是程序员世界最常用的话不要重复制造轮子。百度在地图界混迹如此之久,积累的东西还是可以的。最近开发一个景点相关的项目,借用百度地图提供的API来实现项目中的定位与导航需求。根据百度地图官方网站的引导,申请了开发者API。项目调试都一切顺利,但是当项目导出成APK,进行最后测试时,在请求路径规划的时候,总是遇到

近乎于完美的数字笔记——Notion_袁成新(Chauncey Yuan)的博客-程序员信息网_notion笔记 之乎

之前和同桌想找一个好一些的数字笔记工具,所以游走于各大笔记工具之间大致深度体验过印象笔记、有道云笔记、微软OneNote、为知笔记至于这四款笔记的对比,百度上一搜一大把,不过做赘述印象笔记、有道云笔记和为知笔记哪个好用?云笔记 |有道云笔记、印象笔记、onenote哪个更好?于我个人来说,平时使用MacBook Pro来coding,主要工作也是coding因此对于编程语言的学习,是一...

docker+prometheus+grafana+alertmanager告警安装使用 (图文详解)_JackRenEngineer的博客-程序员信息网

前言:一个服务上线了后,你想知道这个服务是否可用,需要监控。假如线上出故障了,你要先于顾客感知错误,你需要监控。还有对数据库,服务器的监控,等等各层面的监控。近年来,微服务架构的流行,服务数越来越多,监控指标变得越来越多,所以监控也变得越来越复杂,需要新的监控系统适应这种变化。以前我们用zabbix,StatsD监控,但是随着容器化,微服务的流行,我们需要新的监控系统来适应这种变化。于是监控项目Prometheus就应运而生。所有的前提是在安装docker后,若不会安装docker可以翻看我

推荐文章

热门文章

相关标签