经验分享丨赶集App中秋节的皮肤设计

随着移动互联网的迅猛发展,同一款产品,使用移动端的用户远超PC端,为了更好的提升APP的用户体验,情感化设计也得到了越来越多的关注,通过它来唤起用户共鸣,带给用户愉悦的心情。


随着移动互联网的迅猛发展,同一款产品,使用移动端的用户远超PC端,为了更好的提升APP的用户体验,情感化设计也得到了越来越多的关注,通过它来唤起用户共鸣,带给用户愉悦的心情。

经验分享丨赶集App中秋节的皮肤设计

每逢节假日,在这个“黄金时段”,众多APP除了会准备很多活动来增加人气外;同时,也会相应设计一系列节日皮肤来渲染节日气氛,这正是树立口碑、增加品牌价值的好时机。节日皮肤设计风格多种多样,时不时给予用户莫大的惊喜与愉悦的感官体验,加强了用户对产品的黏性。

赶集作为一个提供服务的综合性平台,与电商类产品有着较大的区别。所以,我们在设计赶集APP皮肤的时候,要保证界面的简洁度,避免设计过度造成用户眼花缭乱、心烦意乱。在设计皮肤之前,需要跟产品和研发先确定哪些是可以设计的,并且了解每一处切图的尺寸。赶集主要对APP首页的8个类别icon底部tab和icon下拉刷新以及个人中心头图进行设计,同时要清楚知道这些需要配置的图标尺寸。开始做效果图的时候,我们通常以iPhone6的分辨率为标准进行。

下面我以赶集App中秋节的皮肤设计为例,向大家分享一下我的一点经验。

趣味萌兔 喜迎中秋

中秋佳节是中国传统节日中最受重视的节日之一,对于中秋节的相关设计,也是铺天盖地。在这习以为常的节日设计中,怎样做到与众不同,从中脱颖而出是一件相当不易之事,这考量着每一名设计师的综合能力。

在设计之前,我们可以先了解中秋节的相关习俗、神话传说以及诗词典故等,比如:嫦娥奔月、吴刚砍树、玉兔捣年糕、拜兔儿爷、赏月观花以及月饼的由来等。接着去了解相关中秋节的设计,可以从平面、动画、影视等多方面寻找创意灵感;同时,可以不局限于对中秋节的搜索,其他节日的设计也许能带来意想不到的灵感,比如说在表现手法、造型设计、色彩的应用等。

对中秋节有了大致的了解之后,与该需求的产品经理及其他设计师一起进行头脑风暴,收集创意灵感。最终我们确定采用以兔子为主要元素,设计一套中秋兔子表情的皮肤。我们先以8个大类的icon为设计切入点。

1. 确定兔子造型

先收集兔子图片,在本子上不断提炼兔子的造型,了解它的身体结构,尝试各种画风。由于主要icon的尺寸是96×96,所以要求兔子的造型必须简洁,最终采用卡通萌萌的兔子造型。在给兔子上色的时候,发现只有淡的近白色的兔子才最可爱,这时候必须有背景色才能突出白色兔子。

经验分享丨赶集App中秋节的皮肤设计

近白色的兔子最可爱

经验分享丨赶集App中秋节的皮肤设计

必须有背景色才能突出白色兔子

2. 构思创意点

中秋节最重要的元素是月亮,月亮代表团圆。抱着尝试的心情,进行草图勾勒,尝试画出月缺的变化图。

第一排图标的背景从月缺变成月圆,也是意寓着人们从分离到团圆的过程。则描绘它平时的生活特点,画出兔子各种可爱有趣的动作,如:高兴、睡觉、抱胡萝卜、趴着。第二排背景表现出月亮从升起到降落的形式,其中月亮一直是月圆的状态来表示中秋节团圆的日子,来讲述兔子与中秋相关的习俗,画出捣年糕、望月、吃月饼、点灯笼的动作。

经验分享丨赶集App中秋节的皮肤设计

 兔子的表情传达出节日的趣味性与故事感

3. 确定色彩

颜色是表达节日气氛的最直接表现手法,掌握好节日的颜色特征,能更直接、准确表达出相应主题内涵。根据中国传统颜色风格,以红、黄、青为主色,其中红色表示白天、青色表示黑夜,红青相间,画面有节奏感,而不会太单调;对于背景和兔子颜色都采用微渐变风格,统一光源,既符合现在的设计流行趋势,也不会显得沉闷。

经验分享丨赶集App中秋节的皮肤设计

 颜色是表达节日气氛的最直接表现手法

4. 丰富细节

到这一步之后,发现圆形的背景显得比较单调和束缚,于是尝试加入云的样式来打破圆的结构,同时加入星星的点缀,使得整个图标活跃和丰富起来。

经验分享丨赶集App中秋节的皮肤设计

 丰富细节来使画面丰富

最后是对底部tab的设计,背景的创意来源于中国传统山水画,描绘的是中间为月亮升起来,兔子趴在月亮上睡觉,以月饼的形式,突出中秋快乐的文字。整个创意既与上面的图标相呼应,同时与背景相融合,毫无违和感,使得整个画面更加生动,更好地烘托出中秋节的特点。

完稿之后,最终整体皮肤界面达到视觉一致性、图形识别性强,充满了风趣可爱,得到了产品的一致赞赏和认可,身边的同事也纷纷表示喜爱有加。

经验分享丨赶集App中秋节的皮肤设计

最终稿设计方案

赶集APP节日皮肤欣赏

经验分享丨赶集App中秋节的皮肤设计

 2016元宵节皮肤

经验分享丨赶集App中秋节的皮肤设计

 2016圣诞节皮肤

经验分享丨赶集App中秋节的皮肤设计

 2016元旦皮肤

经验分享丨赶集App中秋节的皮肤设计

 2017元旦皮肤

经验分享丨赶集App中秋节的皮肤设计

 2017元宵节皮肤

本文来源于人人都是产品经理合作媒体@58用户体验设计中心(微信公众号@58UXD)

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22151/

(0)
CatherineCatherine
上一篇 2017-04-30 17:11
下一篇 2017-04-30 19:26

相关推荐

  • 从一个活动来总结一下交互设计的心路历程

    作者:飞起就是一jio链接:http://www.jianshu.com/p/915c4ce32a01最近一直在做电商平台的活动, 大家都知道,电商app会经常做各式各样的活动,面对不同的活动类型,会有不同的需求和用户目标,怎样能够快速理解需…

    2017-08-03
  • iOS和Android规范解析:提示框(Toast)对比

    在交互设计稿中Toast是其中很常用的一种用户反馈手段,但是作者却发现在iOS中根本没有toast这种部件,那么在设计该如何处理呢?一起来看看作者的解读。Snackbars包含一行与进行的操作直接相关的文案(文案前不可有icon)。它可以包含一个操作。Toast优先适用于系统提示。它也在屏幕下方出现,但是不能被划出屏幕外(而被清除)。潜移默化地将状态改变或者其它类型的反馈放进你的界面中。理想的情况是:用户可以不用进行操作或者被打扰,就能得知重要的信息。
    Unobtrusively integrate status and other types of feedback into your interface.Ideally, users can get important information without taking action or being interrupted.

    2017-05-05
  • 在交互设计中,极简设计的四种策略

    本文将介绍交互设计中的极简设计4策略,帮助产品经理或产品设计人员在进行产品设计时,可以打造一款真正为“用户”设计的产品。

    2017-05-01
  • 应用中的游戏化设计

    作者:_Ammy   游戏借着其互动性、反馈性、挑战性、快速成长性等特点,拥有着让玩家长期专注于其中的神奇力量。而若将游戏的这些特点引入到一般的产品设计上,也可能会产生意想不到的效果,这就是游戏化。游戏化的…

    交互专题 2017-08-07
  • Axure RP 7.0软件安装视频教程

    Axure RP 7.0下载地址:链接:https://pan.baidu.com/s/1eTf0W6Y密码:otr5安装中有问题请咨询私人微信:152374906801、找到AxureRP_Pro_Setup.1415607193.exe鼠标右击以管理员身份选择打开2、点击next3、勾选I Agree,然后点击Next4、点击Browse更改安装路径建议安装到除C盘以外的磁盘,可在D盘或者其他盘创建一个文件夹。然后点击Next5、名...

    2018-03-04
  • 译文 | 交互设计中对于“可控性”的理解

     “今天,你可以自由的调节你的屏幕的亮度,关掉应用的通知,自主决定是否连接手机的无线网络等等,虽然这些只能将你的手机电量多延长了几分钟,但却让你满足于一种成就感:你可以完全掌控你的手机,你可以调整所有的设置!(其实你无法控制你手机的电池寿命!) ”

    2017-05-31
  • 异步交互设计漫谈:单机在这里“抄袭”了网游

      “玩家交互”作为游戏中“网络元素”的核心体现已经获得了游戏制作者与游戏玩家的普遍重视。在网络游戏中,如何让玩家获得更加自由、更加全面的交互体验成为了一款网络游戏的重要课题;而在传统意义上的单机游戏里…

    2017-08-02
  • 用户体验设计 - 快问快答

    首先感谢大家关注我。上篇文章收到了很多小伙伴的反馈,很多人说想多看我更新与用户体验有关的文章,也有反应说有文章长度过长。所以这篇文章我用了快问快答的形式,回答了几个新手用户体验设计师比较关心的问题。因为我自己也是转行做UX,所以希望我走过的弯路大家可以绕过去一些。欢迎大家把我的文章发给其他小伙伴,一起共同进步。也欢迎大家给我意见与建议,你们的观点对我真的很重要!(这次文末有彩蛋)1.什么是用户体验(UX)?这是一个很大的问题,就像你问我...

    微信热点 2018-02-02
  • 2017年度交互设计趋势

    今天分享一下2017年交互设计的趋势,希望能够对你有所启发。

    2017-05-09
  • 交互设计文档如何写,才给程序员以美得享受?

    阿西UED授权发布作者公众号艾欧交互设计ID:aioued文章最后报名线上线下活动:【HBAT创新设计峰会:design+下的生存之道】“写交互设计文档(DRD)目的在于:便于与前端、测试以及开发工程师沟通”交互设计文档重要么?重要!但不是项目必需具备的内容,为什么还要学习呢?其实对于初学者来说,交互设计文档能够很好的梳理产品的逻辑关系、基本的设计规范等问题,让你真正透彻的认识一个产品所有可能性。基本上,在大公司都会写交互设计文档的,便...

    2018-02-01