经验分享丨赶集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

相关推荐

  • 商业模式驱动视频互动设计:手淘的视频就该这么玩儿

    当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。

    2017-05-16
  • Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • 译|构建用户体验地图的时机和方法

    用户体验地图结合了两个强大的工具—讲故事和可视化 ,以帮助团队了解和解决用户需求。 虽然体验地图会根据不同的场景和商业目标采取各种各样的形式,但通常都包含一些元素,并且有很多可以遵循的潜在基本规则,使得用户体验地图为设计提供帮助。定义:用户为了实现目标而经历的过程的可视化,它用于了解和解决用户的需求和痛点。

    2017-04-29
  • 听Google设计团队讲述新logo是如何被设计出来的

    [核心提示] Google 为什么要换 logo,这个新 logo 是以什么样的理念和思路设计出来的?来听听 Google 设计团队自己的解释吧~

    2017-06-04
  • 贼干的货 | 交互设计中的格式塔原理

    小编说格式塔心理学认为知觉不能被分解为更小的组成部分,知觉的基本单位就是知觉本身,格式塔心理学的信条就是:整体不同于部分之和。格式塔心理学强调结构的整体作用和产生知觉的组成成分之间的联系。当我由测试转行到交互设计师时,我确认自己擅长辨别产品的优劣,和识别产品的待改善点,尽管很多时候这些待改善点还缺少数据和用户的论证。之前我还是典型的用户思维,对产品实际效果的判断非常依赖数据和用户反馈,直到我了解了格式塔原理,它改变了我对设计的思考方式,...

    2018-03-03
  • 价值重估的狗和鱼 一 有趣的哲学文章

    来源:经济观察报    李冬君 有人将庄子与古希腊哲人第欧根尼相比。两人同时,一个在东方,一个在西方,一个喜好在河边钓钓鱼,一个喜欢躺在街上像野狗那样晒晒太阳,在同一个天空下玩耍。   希腊是哲学的国度…

    交互设计 2014-09-21
  • 交互设计师的60日计划之第六天

    今天去公司加了一天班,然而并没有做完该做的事情。恰好昨天看了一篇有关拖延症的文章,今天加班的过程中发觉自己已经病入膏肓...有deadline的东西可以做完,没有deadline的东西永远都做不完,这是一件很可怕的事情…

    交互专题 2015-08-20
  • Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • 交互设计要学什么这个问题终于得到解决了-交互设计师的知识架构

    如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本《交互设计学习大纲》就…

    2015-01-25
  • 动态与富态

    一、动态:动画表达的设计应用 ”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形: 1.1. 丰富内涵 先试试为这段产品介绍做设计: Dropbox可让…

    2015-10-08