• 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

本文主要包含插画设计,经验分享,闪屏设计等相关知识,希望在学习及工作中可以帮助到您

58UXD:每当我们打开某些APP时,经常能看各种精致的画面一闪而过,最能让我们记住的要数那些温情并且扣人心弦的画面,那就是节日闪屏。

每逢节日的到来,这些精美的节日闪屏不仅向用户传递着我们的祝福、渲染节日气氛,同时能带给用户新鲜、有趣的情感,帮助产品拉近与用户的距离,增加用户对产品的粘性。这也是提高产品用户体验的一种非常好的表达形式。

一. 闪屏介绍

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

这些闪屏画面中大多都包括:品牌logo+品牌定位语+内容图案。

在制作形式上通常是静态的,当然也有动态的视频和GIF。 接下来我将主要介绍我在做节日闪屏的设计思路 。

二. 设计思路

1. 需求沟通

因每年的节日都是固定的,所以在需求沟通之前,我们可以事先了解这个节日的特点,收集相关素材,这样在与产品沟通时会事半功倍。

在沟通中,我们需要充分了解需求方的想法。因需求方有些天马行空的想法也许是不切实际的,或者实现起来非常困难。这时候与产品方一定要好好沟通,把话题引向自己擅长的方向,让双方都达成共识。只有这样大家才会比较满意最后的结果。

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

2. 创意构思

经过第一回沟通之后,已经明确了设计主题和方向,可以开始展开构思画面了。

第一步:收集相关素材

这是以「国庆节」、「中秋节」搜索到的相关灵感素材。

第二步:了解产品的受众用户

由上图可知,赶集网主要是一群年轻、以男性为主的蓝领用户。

第三步:提取关键词

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

第四步:头脑风暴

这步在什么阶段都可以用,团队的力量是强大滴~大家经常能碰撞出特别好的点子,带给我意想不到的灵感。当然如果自己有好的想法,这步也是可以省略啦。

3. 草图绘制

根据关键词及头脑风暴之后的点子,将其想法简单的绘制了出来。在这个过程中,我们还需考虑画面的构图、景别、透视、故事性等因素,让画面主次分明,更好的表达出主题。如下图所示:

4. 视觉呈现

在绘画细节之前,首先要确定绘画的表现形式,因每个节日都有它自己的调性,传达的情感也都不一样,所以在表现手法上也需要考虑,如采用纯扁平or质感绘画?因绘画的是晚上的场景,而采用带质感的形式更加能衬托出光感和节日气氛。然后根据节日元素将颜色提取出来,作为色彩参考。

在给闪屏上色的过程中大致是分三个步骤:

第一步:把画面的整体色彩基调铺好之后,会给产品方看看大概的效果,确认没有问题之后再继续深入。

第二步:初稿完成之后给产品确认,通常会有些细节的调整,如初稿中的画面元素比较多,同时灯笼过于突出,会造成用户的视觉焦点分散。

第三步:最后对初稿进行修改之后,整个画面既不太拥挤了,也很清晰地向用户传达了我们的祝福。

5. 节日、品牌与运营的结合

在节日闪屏中融入产品的吉祥物,既能达到传达节日祝福的目的,同时也加深用户对我们品牌形象的印象。

在节日闪屏中结合活动运营的设计,既向用户传达节日祝福,也提升了活动运营的点击率,巧妙的结合不会让用户觉得反感。

除了这些重大节日,采取偏重的设计方式;如果我们想快速的产出闪屏,那就可以将闪屏模板化,如赶集网在节气上就使用了更加轻量的模板。

三. 总结

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

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

欢迎关注58UXD 的公众号:

「更多案例,教你快速上手插画设计」

  • 《节假日怎么玩?来看这8个国内高人气App的闪屏设计案例精选(附作者推荐)》
  • 《超全面!为什么越来越多的移动App 使用插画设计?》
  • 《用这个简单实用的设计技巧,轻松做出有趣的插画类设计》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

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

  • 如何画好一张描边插画?来看这份超全面的总结!
  • 为网站定制插画有哪些可供借鉴的方法?
  • 超全面!创意图形中的实用小套路进阶指南
  • 扁平插画绘制进阶指南!新手遇到的六种常见问题解答
  • 设计师没原创灵感?试试这个方法!
  • 超实用!多色彩渐变插画的核心技巧总结
  • 结合实例,总结画线稿时容易出现的几个常见问题
  • 设计节日闪屏?收下这份超全面的知识点总结!
  • ofo小黄车是如何打造情感化设计的?来看总监的自述!
  • 水彩自学第五集:留白液的测评和常见问题

相关文章

  • 2017-08-06浅谈响应式设计
  • 2018-08-23优设网投稿规范
  • 2017-08-06如何使整个页面内容居中使高度适应内容自动伸缩
  • 2017-08-06前端开发大众手册(包括工具、网址、经验等)
  • 2018-08-23设计师被“拼多多”的一天…
  • 2018-08-23教程大合辑!优设训练营的150个高品质PS/AI/AE教程
  • 2017-08-06如何去掉内联样式 通过style属性定义的(element.style)
  • 2017-08-06关于div+css及Web标准网页的好处
  • 2018-08-23从这5个维度出发,让你的APP设计更精致!
  • 2017-08-06网页设计师也要学习网页代码编写

文章分类

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

最近更新的内容

    • 这10个思路,能帮你设计出简单易用的网页
    • 图片动态加载技术应用及jquery.lazyload插件使用实例
    • 设计道理谁都懂,为什么换自己就不会?
    • 使用Photoshop 制作网页线框图简单实用
    • 为了让残障人士方便使用产品,腾讯设计师总结了这7个设计方法
    • Unicode签名BOM引发的事故原因分析
    • Google对话式交互规范指南(七):开启口语表达的力量
    • 上亿人使用的百度网盘,是这么做改版设计的
    • 新鲜出炉!2018年的用户体验设计趋势(上)
    • 25种提高网页加载速度的方法和技巧

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

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