为品质而生-京东HD iPad 4.0 视感设计大赏

追求品质是已经融入京东系产品基因中的“生存法则”,JDC也一直致力于为用户提供高品质的购物体验解决方案。京东iPad在历经无数次迭代设计探索之后,终于总结出一套符合大屏移动端的视觉风格,HD iPad4.0应运而生。 HD iPad4.0的视觉风格建立在扁平化的设计基础上,通过卡片的形式来组织界面空间,穿插在产品的各个角落,梳理电商平台中的多内容、多操作。同时使用阴影的叠加效果,突出了内容的层级关系,从而渲染出一个不同于普通扁平化的视觉感受。 在HD iPad4.0顺利上线之后,负责相关设计工作的JDC上海设计部-创新设计组总结了一套设计风格宣传海报,在此分享给大家。   JDC上海设计部-创新设计组是一组充满活力、热爱创新的团队,我们始终在工作过程中追求极致体验、工匠精神。下面是我们为HD iPad4.0制作的宣传视频。      

BAC Studio品牌诞生记

概述 BAC Studio是JDC下平台设计中心的原创品牌。秉承着对团队的热爱。我们成立了小分队完成这份给团队小伙伴的新年礼物。 LOGO诞生过程 下面先来分享一下品牌的诞生过程。在小分队集思广益。在名字上最终以“Base”“Basic”为方向进行设计。 关键词 在设计过程中觉得Basic意思上过于单薄。所以由Basic的意思发散,衍生出3个单词“Basic (基本)” “Accumulation(积累)”  “Creative(创意)”,用首字母组合成BAC Studio。 图形化 / 创意提炼 以乐高为原始设计方向,一个乐高基础,不断增多积累,创造全新的造型。 造型优化/提炼 最终从复杂的乐高逐步简化,在用BAC简化成对称图形,搭配文字。 最终确定以下这一品牌logo。 为此我们还做了一个简单的logo演绎视频。   品牌周边设计 周边设计真的是一个有钱就任性的活。所以在设计过程中小分队的小伙伴也极尽所能的以最节省的方式并保持优质的质量。 下面再来看一段我们设计到制作到最终完成的一段视频。 大礼包的内容相当丰富(帽子,卫衣,工卡带,工卡照,本子,台历,红包…)。这里也再次感谢品牌周边小分队(吉吉,Aman)以及严格要求的马哥。 在这次周边设计上,我们基本以简洁,细节为主。例如卫衣,我们没有像以往的文化衫一样设计。以大家平时都能穿,不像文化衫的文化衫去做。做了不同样式的针织标,在衣服上细节处。包括帽子,根据每位同学的需求,我们也分别做了平沿帽跟鸭舌帽。 周边产品细节   外拍   最后附上团队大合照一张!感谢各位观看~            

JoyMirror|寻找达·芬奇创新赛回顾

Joy Mirror是一个智能家居平台。除常规的天气日程媒体播放,还能检测身体状况、控制家电、购物、预约线下服务及与[…]

从零开始的AE动态设计

从文字到图片,从图片到动画(视频),人们总是喜欢看些更“有趣”的信息——沃硕德。 去年11月,笔者及笔者leader感大势所趋,自学了AE软件,开始了动效设计的不归路,如今已小一年,支持了一些实际项目,不少同学都对动效设计感兴趣,所以就在此唠唠。 一:总有个理由让你想开始 事实上动画这种形式,从古到今都会和趣味联系到一起,人们看到媒介上出现活物时都会下意识觉得奇妙,在娱乐和信息都匮乏的时代里,为了满足猎奇心,大家看个“GIF图”可是会花点银子的。 19世纪的幻影转盘丰富了西方群众的精神文明生活   早年间Flash的网页和动画甚至游戏因其流畅的播放与潇洒的动画曾风靡一时,然而由于时势所致,淡出人们的视线。而如今随着技术的发展,网页上流畅的动画效果,H5里有趣的互动动画,手机APP的交互场景等等,越来越多的“动画”开始改变着我们信息获取的体验。 许多年后看到朋友圈充斥着H5小动画,小游戏的闪客们,是否会有种似曾相识的存在感。 回想完过去,咱畅想畅想将来~不都说今年是VR元年嘛,甭管是VR还是AR,相信在这些设备中的UI界面也不会是静止的。至于究竟是什么样子的,我们且等且看吧,不过综上所述——动效设计在现今确实是一种大趋势 现实中的物体没有绝对静止的,相信VR设备中的UI也是一样 当然,未来的事还不知道什么时候来,计划永远不如变化快。如果非要说活在当下,学习动效设计还可以为我们带来什么好处呢? 作为一个“视觉设计师”,将想表达的东西通过视觉作品更准确传达给受众,是我们必须要做的。而动效的引入相当于我们多了一种“在时间上的表达能力”,受众看到的不再是静止的插画而是一种更具有情绪的小动画。     更高效的沟通: 众所周知,前端同学在做动画效果时是通过代码来实现的,所有效果背后对应的都是一行行的参数和代码。如果你是一个还不会使用动效的UI设计师,在与前端沟通时难免会遇到下面的问题 友谊的键盘说翻就翻啊!!为了维护与前端同学坚固的革命友谊,学习了动效后你们的沟通将会变得大不一样 潇洒! AE还可以给你流畅丝滑的动画 可以看到PS在这个界面下是通过一张张的切换图片来形成动画的,也就是我们通常所说的“逐帧动画”。我们看的动画片里大部分都是通过逐帧实现的,这种方式相对来说比较传统,也比较考验功底,因为要画出每一帧的样子必须要对动态有很入的理解。而AE的时间轴时间被直观的展示出来了,每个蓝条就是元素出现的时间,而动画是通过设置关键帧来实现的,比如第一个关键帧设置了透明度100%,1秒后的关键帧设置了透明度0%,在两个关键帧之间就会自动生成从100%到0%的变化。这种动画的形式被称为关键帧动画。在AE中几乎能想到的参数都可以通过关键帧来控制,我们不需要一帧帧的去改每一张图片,动画变得更加精准和可控。 读到这里的同学可能要往回再翻一下,再仔细看一下PS的时间轴,看看每帧图片下方的“0.06”字样。↑ →这个“0.06”的意思是动画在播放过程中在每张图片上停留的时间,这就引入了一个速率问题。同样的3秒动画,我们可以让它先快后慢,也可以让它先慢后快,什么都不做的话就是一个匀速运动。 匀速运动是一种寡淡的动作 调整过速率后的动画会变得更加生动有趣 在AE中通过【曲线编辑器】工具就可以轻松的去控制动画播放的速率问题,先慢后快还是时慢时快,什么样的节奏才是最呀最摇摆,你说了算。 二:那我们就开始学点啥吧 不管你有什么样的理由,开始学了就要入个门,笔者在这个章节不会讲过多的技术,而是以自身的经验,讲一个之间对动画了解不多的“静态UI设计师”该如何开始(如果想从技术入手请拖到文章末尾的教程推荐部分) 1/在开始制作动画前要更多的了解基础动效。也就是说。。一个东西。。它能怎么动。就像如果不了解你可能很难注意到电影里的长镜头之类的运镜手法,我们虽然平时都会或多或少接触动画,但很少去留心。 信息来源于网络,可自行百度了解更多 有了对基础动效的了解,在早期就不会遇到不知道该怎么动的情况,而是我想怎么动。心有所想,即使技术展示达不到,相对应的去学习也会事半功倍。   2/可以多做些动态研究。无论是要做简单的MOTION GRAPHIC也好还是想做一个卡通动画也好,动画最重要的就是要自然 呐~越符合现实规律的动态就会越自然,越流畅,让人察觉不到任何不适的感觉。做动态研究的目的也就在于此,一言以蔽之“做动画也要符合基本法” 3/临摹 文摹:做些小动画 当看到想做的动画时可以下载下来,仔细研究帧速率阿,动态啊。无论是在需求不饱和时学习也好还是需求真来了正好要做,先看后做,有个标杆,总是不会跑偏。。嗯。。太多 dribble.com上有很多这种有趣的小动画 京东黑色星期五活动,动效展示 武摹:不要惧怕,给自己找个大活儿 一开始在使用新软件的时候总会遇到不熟练的情况,这个时候不要过于着急,可以给自己找个“大活”逼自己一把,完整的动画和平时的小练习不一样,你能更好的去操作软件,也能综合起来学到的每个小知识点,相信经过了“大活”洗礼后,你的活儿一定会更好 京东到家2.0启动页动画,开始AE后的第一个“大活儿” 三:实战经验 1/简单的基础动作做出丰富的变化 JDCclub是京东用户体验设计部内部负责内部学习,与业内组织分享经验的组织,LOGO由四种颜色的“C”作为基础,在不同场合应用下有着不同组合。这么酷的LOGO不搞个动画展示怎么说的过去,搞他! 大量使用了路径剪切,弹性表达式等相对入门的技术 以这个动画为例,其实使用的技术并非很难掌握,当时更多的精力也是放在了几个LOGO如何互相转场上,想好分镜,用不同方式的转换,也会给人丰富的感觉。如果说转场也是个小问题要攻克的话,那么下面这个例子更能说明即使再简单的动作也能做出丰富的动画 现在信了哇~,所以在前期并不要惧怕自己的技术还不过关,毕竟想法也是很重要的,想法和技术两手都要抓,两手都要硬! 2/输出的三种形式: 如图所示这三种形式不分好坏,只分应用场景,如上文的JDC同学会,京东到家2.0启动动画就都是视频传播形式的,而微信文章里的配图就很适合使用方便配置的GIF图,而制作精致的H5时,我们最多使用的就是序列帧这种形式,依然举个实例 如图,从第一帧到最后一帧是一个大循环,而前端同学可以配置中间的一部分序列帧作为小循环。 3/从静态稿出发让动画更有趣: 现在的工作中,我们会习惯于先出静态设计稿,再去想动画。动画作为独立制作的部分,应该从设计稿出发,去设计一些合适的“剧情”。比如LG超极品拍日的互动游戏中,需要把房间内的旧电器换成新的。虽然需求的时间很紧,但是从趣味性的角度出发,我们不想要简简单单的闪个光啊,透明度啊什么的,于是做了些奇妙的剧情   再举个例子,京东16年校招中,我们将京东提倡新人的4S精神(Stage,Success,Speed,Style)抽象为四个几何形体。于是我们现学现卖,运用Element3D插件制作了立体的动画,完成了一些抽象的立体动效展示。 […]

App动效原理和应用设计

前言 时下对动效的追捧,疯狂至可以用一句话形容——“没有动效的APP,简直不是好的APP”。优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹,已然成为现下Web、APP产品交互设计和界面设计必不可少的元素。笔者想从常见基础动效、动效作用、动效的应用设计和动效评判四个方面简单谈谈对动效理解。   Part 1 基础动效 常见动效通常是由多个基础动效组合而成。下面就让我们来看看有哪些常见的基础动效。 1. 位移和速度 位移是物体从一个位置到另一个位置的距离。动画中的元素通过位移的变化产生了动态的效果。 速度是和位移密不可分的变量。相同的位移、不同的速度,元素可以呈现不同的动态效果(如:匀速、加速、减速和缓入缓出等)。速度的变化可以增加动感,更容易引起关注。   2. 放大和缩小 界面元素等比放大或缩小的过程。 放大 缩小   3. 消失和出现 界面元素从无到有或从有到无的过程。   4. 翻转 翻转可以是界面元素呈现3D效果的180度转动,也可以是界面元素90度的折叠效果。 翻转 翻折   5. 旋转 旋转可以是界面元素围绕中心点在平面上的转动,也可以整个界面所有元素的转动,如移动设备横屏和竖屏之间的切换。 局部旋转 全部旋转   6. 变形 界面元素根据操作触发或设计自发的形状改变。   7. 变色 变色是指动效中界面元素的色彩变化。   8. 其他 更多基础动效内容推荐,见本文附录。 Part 2 动效作用 总结动效应用的众多作用,可以将它们归纳为五个方面:友好、有趣、反馈、过渡、引导。以下一起来详细了解下动效在这几个方面起到的具体作用,同时欣赏一些优秀的动效案例。 1. 友好 (1)与手势结合,增强操控感 当界面的动态与用户手指在屏幕上的运动一致时,用户会感觉到自己控制了这个界面,仿佛不是在操控一个智能设备的界面,更不是被界面操控,而是作用于一个符合真实世界运动规则的物体。这种模拟现实操作的情境带入,让手势操作更易于学习,体验更流畅。   (2)让错误不再令人沮丧 […]

© 2017 JDC. All Rights Reserved.