• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 网易实战案例:教你五步打造APP节日主题设计

网易实战案例:教你五步打造APP节日主题设计

作者:仨仨 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含品牌,实战案例,情感化设计,用户体验,网易UEDC,节日主题设计等相关知识,仨仨希望在学习及工作中可以帮助到您

我们需要做有依据、有逻辑、有理念的设计,需要发散思维、整合创意、严谨输出,让设计经得起推敲。

2018年春节已远去,一直想把 lofter 新年 logo 设计思路分享给大家,直到现在才整理出来,希望这篇文章能给大家一些思路和参考。

每当过节的时候,市场上大大小小的 APP icon 都进行了节日换装,作为视觉设计师,如何设计出与产品品牌相符合并能营造出节日氛围的设计是我们需要思考的。下面以 lofter 新年图标设计为例,分享一下当时的设计思路和方法。

Lofter 是网易产品中资历比较老的一款产品了,主打兴趣社区,鼓励原创,让有趣的用户拥有属于自己精致圈子为目标。怎样为lofter进行新年换装,主要从以下五个阶段来阐述设计过程。

一、设计背景

接到需求的时候,设计师会从以下三个方面进行分析该需求的核心问题:

1. 业务层面

这次换装的目的是什么,换装这个行为符不符合 lofter 的品牌调性。经过沟通,业务方希望通过换装来渲染新年的气氛,引起用户的关注,激发用户和产品之间的互动,进而提高产品的日活跃度。

2. 设计层面

除了烘托节日气氛之外,设计师应该设计出更加精致,更具有创意性的设计,能够更有效的传达品牌的理念,传递给用户正能量,增强用户的情感认知。

3. 用户层面

此次换肤需要考虑到用户的接受度,能否让用户感知到产品的寓意,能否给用户带来更多的亲切感。

二、设计分析

明确设计需求之后,需要针对需求进行分析,设计师从:主题联想、关键词提取、视觉素材三步进行设计提炼。

1. 主题联想

针对新年主题以及传统文化进行思维发散,搜集与之相关的词汇。如图:剪纸、雪花、对联、雪人、梅花、云纹、复古窗户、灯笼、鞭炮、礼花、大红、烫金等等。

2. 关键词提取

根据思维发散词汇进行色、形、质进行分类归纳:

  • 颜色:颜色是用户最表层的感知,根据Lofter的调性,我们把颜色定位在比较能够体现节日氛围的红色系和比较高贵优雅的烫金色系上。
  • 形状:可以根据剪纸、对联、雪人、复古门窗等元素进行提炼,进行方案设计。
  • 材质:可以通过相关的图案肌理进行装饰,使设计更加精致的同时,更能烘托节日的气氛。比如说云纹、回纹等。

3. 视觉素材提炼

针对提取的关键词,进行视觉元素匹配,搜集相应的视觉素材作为设计参考,下图仅为部分参考图作为展示:

针对视觉素材提炼,形成三个设计方案方向:

  • 方案一:通过春节对联的元素以及烫金纹理进行方案设计;
  • 方案二:通过剪纸和云纹的视觉素材进行方案延伸;
  • 方案三:通过复古门窗及雪人相关素材进行设计提炼。

三、设计执行

1. 草图绘制

很多设计师在做设计的时候会忽略这一步骤,草图的绘制虽不需要太精美但它却是不可缺少的。设计师通过绘制草图更简单直接呈现自己的灵感、想法,并针对相关设计方案进行初步的设计评估,从而更好的把握设计的可行性和创意性。

针对设计分析所得出三个方案如下图:

从草图阶段进行评估,设计的可行性都比较符合设计需求,设计的创意性需要通过设计图的绘制进一步推敲。

2. 设计稿的呈现

设计初稿主要针对草图绘制的方案进行软件绘制,这次绘制主要是呈现大效果,细节可以后续仔细推敲。三方案如下图:

针对设计初稿,视觉内部进行设计评审:

  • 设计创意性上讲:方案一创意比较中规中矩,缺少一些设计特色;方案二比较有想法,设计层次和主题表现需要进一步优化;方案三有一定创意性,元素鱼主题的结合需要进一步的优化。
  • 设计语言表达上讲:三个方案都能够凸显节日主题,氛围都比较浓厚,用户感知也比较强。
  • 从设计效果来讲:方案一较于简洁,设计特色相对弱一些;方案二有层次感,比较有特色;方案三有一定的特色,设计效果细节有待推敲。


针对视觉内部对设计方案的建议,针对三个方案进行了细节上的优化。

  • 方案一:增加烫金质感,以及细节元素的搭配;
  • 方案二:针对细节进行了调整,调整层次感;
  • 方案三:在原有基础上进行优化,使设计更有质感,更拟物化。

如图所示:

针对以上方案,除了视觉组内部进行评估,还邀请需求运营方,产品方以及交互设计方进行多方位设计评估和建议收集。最终选择方案二作为新年主题方案。

3. 优化设计细节

针对方案二进行设计细节优化,主要通过颜色、形状、质感三个方面进行进一步推敲。

  • 颜色:由于 lofter 品牌色为沉稳的绿色系,为了突出新年气氛,颜色采用喜庆的红色系,色彩上进行反复尝试,找到视觉上最优的方案。
  • 形状:由于 lofter 是线条形的 logo,为了增强对比性,突出视觉效果,背景采用了块面感的设计进行烘托。设计上主要采用视觉元素(梅花、云朵、建筑以及山川)进行块面的叠加,在保证背景整体感的同时,又不失层次感和细节。
  • 质感:图案和肌理的运用,视觉上主要采用了剪纸元素进行设计,它不同于传统剪纸在于运用了层次叠加的表现手法,使画面更加丰富,也是当时比较流行的一种视觉表现。肌理上使用纹样装饰,在丰富细节的同时彰显传统设计元素的魅力。

以下为通过不同纬度进行细节推敲方案稿:

针对各方面的优化和推敲最终形成了我们的设计方案如图:

四、设计延展

在最终敲定 logo 主题设计方案的同时,为了给用户带来一致性的体验感受和浓厚的节日氛围,系列的延展设计是十分必要的。设计上可以通过主题启动图、皮肤装饰以及运营活动三方面进行延展。以 logo 主题为中心,通过不同层面的配套延展,相互烘托,使设计系列化、主题化。

1. 手机启动图

在新年 logo 方案上进行延展,用户在打开 APP 的第一时间感受到节日的氛围。根据lofter 以往的品牌调性,开屏并没有采用直接明了的祝福文案和节日画面。而是通过视觉元素以及轻量级的动效从让用户去感知这一主题的寓意。启动页动画演示:

2. 皮肤装饰

产品设计中,为了烘托节日氛围,通过底部导航 icon 换装是产品常用的设计策略。由于该产品换肤规则仍需完善以及设计时间成本考虑,很遗憾,本次主题没有涉及此模块的延展。但是作为系列延展之一,设计师针对这一模块设计可以从品牌调性,视觉一致性上进行分析研究。

3. 运营主题活动

为了提高用户的活跃度和用户粘性,除了视觉层面的语言输出配套的运营活动进行氛围的营造是十分关键的。Lofter 推出了新年记赢取福袋的活动,视觉风格与新年主题保持一致,活动涉及到各个标签领域,通过时间推进的方式逐一展开,使节日氛围保持着一定的热度。如图为活动的推广 banner,H5 等相关页面:

五、设计落地

这一环节是设计中的最后环节,也是十分重要的环节。如何让设计稿高还原度的展现给用户需要设计师和前端工程师的一起努力。设计落地环节中主要会出现的问题:视觉还原度、页面适配以及体验流程顺畅度。

1. 视觉

您可能想查找下面的文章:

  • 将像素点转化为全面的品牌体验的经验技巧
  • 交互基础小课堂!从五个维度全面分析「下拉刷新」功能
  • 实战案例!网易考拉品牌升级全过程实录
  • 用京东的概念案例,深入浅出为你解读「品牌化」
  • 写给UI新手的APP结构指南:闪屏
  • 腾讯设计师总结的图标设计五维自检法
  • 「得到」的猫头鹰Logo 是怎么诞生的?来看主创设计师怎么说!
  • 网易实战案例:教你五步打造APP节日主题设计
  • 长文揭秘!全新的大众点评V10版本是如何做品牌升级的?
  • 如何将品牌与UI完美结合?Google新规范告诉你答案

相关文章

  • 2018-08-2358内部方法!一个更适合产品迭代的卡片创意法
  • 2018-08-23免费可商用!情人节专属资源(矢量素材/图标/背景)打包下载
  • 2018-08-23阿里巴巴将以“全链路”设计取代UI/交互岗位,高手怎么看?
  • 2018-08-23跟随这10个趋势,你可以在2018年设计出出众的网页
  • 2018-08-23用PS这个黑科技,轻松搞定视觉设计的团队协作!
  • 2017-08-06UCenter Home 站点添加统计代码
  • 2018-08-23亿万好评的QQ国际版,今年可能会用这两个新的视觉设计方案
  • 2017-08-06Unicode签名bom详细说明
  • 2018-08-23设计师被“拼多多”的一天…
  • 2018-08-23实例解析!如何成为有交互和视觉思维的UI 设计师?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 让IE支持CSS3 Media Query实现响应式Web设计
    • 新鲜出炉的有用图标集25组 国外下载
    • 启发设计灵感发光有光泽的网站设计实例
    • 用户测试的基本步骤和沟通技巧
    • 作品落地效果不行?你要好好学习印刷基础知识和技巧了!
    • 设计师应该知道的 iOS 设备常见差异化设计
    • 36氪产品总监:四大分析法打造你的产品说服力
    • 设计思维书单推荐!五位日本设计大师的思考术
    • 学会这个批处理方法,5分钟搞定一小时的工作量!
    • 实战案例!视觉设计练习学到的3个小技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有