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

相关推荐

  • 交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、Jakob Nielsen(雅各布·尼尔森)简介:Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术...

    2018-01-31
  • 非设计专业的学生,如何系统的学习交互设计

    数十万互联网从业者的共同关注!作者:青溪Joanna微信公众号:qingxizhaji(青溪札记)作者投稿早读课发表,转载请联系作者。曾经我也是一名非设计专业的学生,作为自动化专业的硕士希望自学做交互设计,有很长一段…

    2017-08-02
  • 教你4步挖掘设计灵感,30分钟打造出一款圣诞节Banner!~

    憋不出灵感就如难产一般,蓝瘦,香菇/(ㄒoㄒ)/~~

    2017-05-14
  • 制定内容策略,让网站设计始终保持优秀

    先有鸡还是先有蛋?先有内容还是先有网站?这种问题的争吵从来都没有停过。如果你不想让你的网站华丽而空洞,那么你需要针对自家网站制定一个富有凝聚力的内容策略。内容策略的主要目标是使用文字和数据来创造明确的内容,以支撑起有意义的交互体验。我们需要在沟通的各个层面上都是专家,才能有效地做到这一点。

    2017-05-16
  • UED专访 | 魏娜:设计由情感而生

    📌 编辑 | Belinda.L《漂亮的房子》播至第三阶段,福鼎站的房子即将展现在观众面前,UED采访了“小溪家”的建筑师魏娜,探寻项目背后的情感设计。魏  娜WEI 建筑设计创始合伙人、主创建筑师魏娜于2013年发布过一条微博,感谢UED杂志的建筑师赠刊上精心的小细节。而她与UED的缘分其实从更早之前就已开始了。UED杂志特别赠刊烫印有建筑师姓名 ©魏娜“从2009年我们事务所刚刚成立的时候,UED就开始给予我们很大的支持,在这近9年...

    2018-02-02
  • 用好的交互设计来管理复杂-“个人中心”

    “复杂是世界的一部分,但它不应该令人困惑,好的设计能够帮助我们驯服复杂,不是让事物变得简单(如果复杂是符合需求的),而是去管理复杂”。复杂是可以被管理的,但要做到这一点,我们都必须做好自己该做的那部分工作。

    2017-05-19
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • 如果想做好产品,你懂人性心理吗?

    来源:市场部 作者:IT精英 众所周知,产品研发的过程除了必备的资源配给外,都离不开人的参与,需要有客户,需求分析人员,开发人员,测试人员等角色参与其中,才能使一个产品研发的过程顺利开展。既然离不开人的…

    2014-09-21
  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 一款运动类APP的产品交互设计全过程(两万字干货)

    这次的分享是前不久完成的一次比较完整的交互设计工作,基本上涵盖了前、中、后期的完整流程,包括前期的定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、关键因素分解、路径分析,完整的交互设计文档,以及后期的可用性测试,希望对需求分析、交互设计或可用性测试感兴趣的朋友们有用。1第一卷 需求分析1概述1.1 产品目标以运动为主题,选定某一种运动形式,完成一款 APP 产品的交互设计,内容集中在统计和分享运动量方面。1.2 关键词分解...

    2018-01-31