UI设计进阶干货-闪 屏

UI设计进阶干货-闪 屏

自“山竹”过后也有三四天没发过文章了,那么后面这些天我们一起去探讨UI设计里面的闪屏、引导页、登录注册、首页、产品列表和个人中心等等界面设计背后的逻辑思维,好了废话少说,我们今天就先从APP里面的闪屏页(也就是启动页 launch image)部分开始!希望对大家有所帮助,如果觉得有用,欢迎关注后续文章,当然仁者见仁,不喜勿喷,大神请留言指正!

UI设计进阶干货-闪 屏

UI设计进阶干货-闪 屏

UI设计进阶干货-闪 屏

UI设计进阶干货-闪 屏

我们先看一下闪屏的大体分类,那这里我整理一个简略脑图:

UI设计进阶干货-闪 屏

闪屏介绍

我们知道闪屏根据传达的内容不同,闪屏的画面也不尽相同,大概可以的分成:节日闪屏、日常运营、热点传播、品牌传达等。

UI设计进阶干货-闪 屏

这些闪屏画面中大多都包括:

品牌logo+品牌定位语+内容图案

UI设计进阶干货-闪 屏

UI设计进阶干货-闪 屏

平时看到的页面大多都是静态JPG,当然也有一些是动态GIF格式呈现的。

设计思路

UI设计进阶干货-闪 屏

如上图所示。闪屏的设计思路大体分为四大部分:需求沟通、创意构思、草图绘制、视觉呈现;那现在我们就针对这些逐个去说明一下!

需求沟通

中国节日每年都是固定节日,所以在需求沟通之前,首先了解这个节日的一些传说或者事件,为什么要了解?根据设计轮,我们要根据这些关键词找相对应的素材!

在日常沟通中,有时需求方天马行空的想法让设计师哭笑不得,因为隔行如隔山,有些zhizhang需求真的想让人骂爹!操作实现起来相当困难。这是最好把话题引向自己擅长的方向,让双方都达成共识。只有这样大家才会比较满意最后的结果。

梳理出的需求是:将中秋节和国庆节2个节日结合起来设计,表现出热闹、欢快的节日气氛。

创意构思

明确了设计主题和方向后,就可以着手开始展开构思画面了。

第一步:通过设计轮上的关键词收集素材

UI设计进阶干货-闪 屏

第二步:定位产品目标用户群体

UI设计进阶干货-闪 屏

赶集网主要是一群年轻、以男性为主的蓝领用户。

第三步:提取关键词。

UI设计进阶干货-闪 屏

通过对素材和受众用户的分析,提取相对应的素材天安门、月亮、孔明灯、看烟花、年轻、团圆等。

草图绘制

根据关键词,将脑海中的大体思路用草图快速绘制下。在这个过程中,在绘制时候还需考虑构图、氛围、透视、故事性等因素,让画面主次分明,层级清楚!从而更好的表达出主题思想。

UI设计进阶干货-闪 屏

视觉呈现

每个节日都有它自己的调性,传达的情感也都不一样,绘制前首先确定绘画的表现形式,所以在表现手法上也需要考虑!所以在给闪屏上色的过程中大致是分三个步骤:

第一步:大体先对画面的整体铺个大颜色后,给产品方看看大概的效果,确认下来后再继续深入画面;

UI设计进阶干货-闪 屏

第二步:初稿完成之后给产品确认,通常会有些细节的调整,将一些没用的东西可以适当删减,突出主要视觉内容!

UI设计进阶干货-闪 屏

第三步:拿到最后一步的话基本上画面就没什么问题了,这时我们就可以植入文案进行排版了!然后交稿!

UI设计进阶干货-闪 屏

一、常规闪屏

为什么叫常规闪屏?因为这种类型的闪屏比较普通,没有什么亮点,当然我也词穷一时想不到更专业的词形容我们姑且称之为常规闪屏吧!

这类闪屏的使用在国内的和国外还有所不同,因为按照苹果官方的说法是,用户打开应用能立即使用是最好的体验,例如系统自带的一些应用,是没有闪屏的;再甚者闪屏最好就是让用户感觉不到,和首页能有一个完美的融合和过渡,这种体验也很棒,国外的instagram、facebook等就是使用这种设计,闪屏长得很像首页,更像是一张加载类的占位符。

UI设计进阶干货-闪 屏

当然,因地制宜,我们现在已经习惯了闪屏作为App品牌的宣传和推广手段,那他常见都是由logo+名称+slogan+品牌色组成,界面还是相对简洁明了的,但还是很明显的违背了苹果官方的指导说法,但是没办法,这就是商业需要。这样设计也有利处,可以减少用户在打开App时的焦虑感,也可以让用户更直观的了解品牌,传递一些情怀、理念,多看一次闪屏,也是让用户强化品牌记忆的过程,只是不知道是好的记忆点还是坏的,就要我们自己斟酌了。

UI设计进阶干货-闪 屏

二、广告闪屏

广告闪屏,顾名思义就是产品本身为了进行流量变现从而获得盈利,给一些商家打广告或者进行合作设计的一类闪屏,这是无可厚非的,不过广告闪屏自带被“嫌弃”属性,应该很多用户看到这类闪屏的心理是比较排斥的,至少对我来说,我是很少关注这类闪屏,除非闪屏设计的非常的酷炫,我愿意多看一下,否则的话我就想立刻把它关掉,所以在这类闪屏上加上“倒计时(loading)和跳过”就显得很必要,并且“跳过”的位置也要方便用户点击。这类闪屏最好只出现每天第一次打开App时,避免让用户厌烦。不管出于何种目的,都需要在商业利益和用户体验之间保持一个平衡,不然用户会流失的很快,用户流失了,何谈盈利呢?

UI设计进阶干货-闪 屏

另外广告闪屏和下面要说的活动闪屏一样,会有一个模板:底部是闪屏图片,上面盖上一层logo模板。App启动时会从服务器拉取闪屏数据,本地会保存logo模板。如果服务器更新了闪屏数据会拉取数据进行展示,如果没有更新或是网络不佳就会默认展示缓存的闪屏数据,以免发生卡顿现象,以保证流畅的用户体验。

三、活动闪屏

活动闪屏和广告闪屏有点类似,出于产品运营方面的需要,它起到活动宣传的作用,每年的双十一、双十二期间,各大电商App的闪屏都会用到活动闪屏,还有一些商家自己造的一些节日:品牌周、年货节、会员日、狂欢周...相信大家已经见怪不怪了。

UI设计进阶干货-闪 屏

近期我留意到一个问题,就是我们在使用App时,经常会在应用之间进行切换使用,如果我们从其他应用再次返回时,最好不要再加载一次闪屏,会给用户很不好的用户体验,目前使用下来,淘宝、天猫等这类主流应用都有这种问题,但是我想这应该他们有意为之。

四、节日闪屏

每逢一些节假日,各大品牌都会推出一些当日的闪屏,那么为什么要设计节日闪屏?我觉得有几点原因:长期看常规闪屏,用户很容易会有视觉上的一种疲劳,节日闪屏会给用户一种不经意的惊喜和新鲜感;可以蹭一蹭节日的热点,提升产品本身的品牌调性;在节日给用户以问候和关怀,和用户在情感上产生共鸣,从而更好的连接用户和产品,我想这应该是最重要的原因。

UI设计进阶干货-闪 屏

节日闪屏比较吸引用户的注意力,它不像广告类闪屏,我看见这类闪屏就会忍不住的多瞅几眼,所以设计这类闪屏的时候要非常重视,因为用户愿意等待,这是非常求之不得的,这就需要设计师具有比较强的表现能力了。我们在设计的时候可以先进行思维上的发散,或者是逆向思维之类的,比如春节将近,我们可以联想到是什么,理清一个思绪,要有节日的氛围,可以活泼、可爱、夸张...切忌呆板。

UI设计进阶干货-闪 屏

我记忆中这类闪屏大部分是使用插画类的手法比较多,这是我个人观点,或许是我对这种手法记忆比较深刻,如果不是,请不要喷我~

五、升级闪屏

在App进行了大版本升级后,要向用户展示产品新功能的操作方法。这类闪屏也可以称为引导页,页面数量控制在3-5页,每一页都有一个对应的主题,主题要精简,切忌文字过多;而且每一页设计形式要类似,否则会给用户一种视觉落差感;页面上要加上“跳过”功能,因为用户更希望尽快体验新版本,而不是看你的这些教导;在最后一页要加上类似“立即体验”的button。

UI设计进阶干货-闪 屏

六、闪屏设计的几种形式

1、极简类


UI设计进阶干货-闪 屏


这种形式就是上面所说的国内常规闪屏,品牌色+logo+名称+slogan,这类闪屏占据大多数,因为相对简洁明了,就不多赘述了。

2、插画类

这种形式会给我们传递一种温暖的感受,容易引起共鸣感,可以唤起我们某个时间段的回忆,比如可能会唤起你小时候和小伙伴一起穿开裆裤的日子,哈哈~开个玩笑。插画手法用的比较多的是肌理插画、手绘插画、2.5D插画、渐变插画等,这几类手法都比较流行。

UI设计进阶干货-闪 屏

3、动图&小视频


UI设计进阶干货-闪 屏


有一些App采用的是动图或者小视频作为闪屏,比如早期的uber更新新logo时,启动页是采用的动图闪屏;早期的快的打车采用小视频作为闪屏。另外现在还有一些轻阅读类App的闪屏在显示完常规闪屏后还会展示出和产品调性相关的图片闪屏,并且图片会变大后再进入首页,以突出产品的文艺气息。使用这类手法的时候,一定要三思,首先难度较大,而且因为用户每次打开应用都会看一次,早晚会失去新鲜感,并且对网络环境也有要求,有可能会出现卡顿情况。

4、和产品调性相关的图片

为了和用户产生情感上的共鸣,很多App使用和产品调性相匹配的图片作为闪屏,最为熟悉的就属微信闪屏了,前一段时间微信换闪屏的热点已经刷爆朋友圈,相信大家已经关注到了。这类闪屏要能突出产品本身的调性,否则谨慎使用,风险较大。

UI设计进阶干货-闪 屏

一般闪屏只有3秒钟,一闪而过,好的闪屏设计会让用户忍不住多看几眼,如果你设计的闪屏能让用户关掉App再看一次,那你就厉害了~

总结

国内节日闪屏大多是以继承传统、弘扬中国文化、突出人文情感为主要的设计思路。在闪屏的内容上,我们也可以结合自身产品的特点,来扩展更多丰富的内容,比如世界名人纪念、当天世界上的重点发生事件等。

闪屏不应该仅仅只作为单方面传递信息给用户,还需要得到用户的反馈,和用户互动,比如可以通过点击节日闪屏,跳转到它相关的话题上,让用户产生更多的内容,实现与用户更深层次的交流,增加用户对产品的情感依


分享到:


相關文章: