设计实战!网易严选APP的品牌设计过程全揭秘
网易UEDC – 董俊豪 :品牌设计,是品牌之间形成差异化的根本缘故原由。它可以让用户明确、清晰地记住并识别品牌的个性,是驱动用户认同、喜好乃至爱上一个品牌的重要力量。拿保时捷汽车前车灯的设计为例,这种特别的表面设计被严酷地应用到所有保时捷的汽车产品当中,就算遮住品牌也能一眼分辨出该品牌,这就是品牌的力量。
回归到我们视觉设计,我们在接需求的时候,经常会听到运营及产品对网页设计的要求是品牌感,那么怎么样设计才有品牌感?下面就谈谈网易严选App,在品牌设计方面的尝试,在这之前我们先来了解下网易严选。
品牌分析
网易严选,是网易自营类家居生活品牌App,秉承严谨的态度甄选天下优品。严透露表现严谨的态度,选是甄选,甄选天下好物。
设计原则
网易严选的品牌理念是「好的生活,没那么贵」。可以想象以了局景,躺在懒人沙发上清闲的看着书,坐在窗边满意的喝着茶,抑或是靠在阳台上享受午后的阳光。他们不紧不慢,寻求品质,享受宁静,所以品牌关键字是品质、生活、宁静。从品牌关键字提取到的设计语言是细节化、场景化、简约化。
细节感是指细腻,比如商品的光影,产品中的对齐法则等。场景化讲究的是天然协调同一;简约化是去除统统多余的元素,只留下素材或者产品自己。
品牌设计
了解了品牌性格,品牌关键字及品牌设计语言,我们将这些应用到详细的设计中,包括品牌logo、版式、图标、动效、图片等。
1.Logo设计
品牌Logo以形象、直观的情势向消耗者传达品牌信息,以创造品牌认知、品牌联想和消耗者的品牌依靠,从而给品牌带来更多价值。
严选Logo设计结合了小楷的轻重协衡,淳厚平淡及刻本的一丝不苟,精雕细琢,体现出对产品的选择保持严谨的态度,对产品服务保持无穷的寻求。因为网易logo品牌色是红色,且从色彩生理学角度出发,红色更容易刺激购物。所以颜色继续了网易品牌的基因。
从品牌色延长出来一些其它颜色,以便适用在不同的场景中,如活动色,成功色,会员色以及不同程度的灰色。
辅助图形是品牌不可或缺的一部分。它能更好地配合品牌logo,传递品牌价值,从设计上也起到调和的作用。当然也可以单独作为背景底纹、辅助元素等场景运用,既雄厚团体内容,又起到强化品牌的作用。如图所示就是将品牌Logo进行拆分重组而成的辅助图案及应用场景。
在App小我中间中运用的辅助图形。
2.版式设计
严选App首页版面采用两栏布局进行设计,在内容的显现上做到适度胁制,从而简化了内容,再配以浅色背景或者大面积的白色,把核心展示都留给了商品自己,团体给人简约,宁静的感受,不强制,不给人克制感,相比其他电商App的四栏乃至更多的内容呈现,从视觉上做到了较强的辨识度。
3.图标设计
在界面中,icon图标是不可轻视一个品牌设计环节,也是作育品牌感较直接的体例。
底栏icon
严选底栏icon的图标设计均以家居物品为原型衍化而来,给人以场景感,真实且生活化的感受,传达了品牌价值。
为空设计
严选为空设计以生活中日常的元素为原型,并采用手绘线条断开的样式,加上块状的阴影及修饰等元素,营造场景化及画面感,为品牌设计带来了一丝情感。
4.动效设计
在App中做动效设计的上风在于生动性地传达品牌个性。
登录页动效设计
在登录页及明星商品页大面积留白空间的商品图上都加入了天然的投影,给人营造简约中带着场景感,细节感,无形之中吐露着品质,生活,宁静。
Loading设计
Loading的设计创意来源于打开包裹时,商品呈如今面前的惊喜感以及生活的仪式感。所以设计的思路是随动手向下拉,箱子徐徐打开,松开手的时候弹出「好的生活,没那么贵」。这里寓意严选有你想要的商品,且品质及服务给用户带来惊喜,从而达到了品牌价值的传达。
5.图片设计
生理学研究证实,图片比笔墨更直观地、更优先地传达,所以在App中图片的品质直接传递着品牌的感受。
单品设计
在产品设计中,既要表现品牌的气质,表现品牌的品质,又要保证网页不平,所以在登录页及明星商品页大面积留白空间的商品图上都加入了天然的光影结果,给人营造简约中带着的场景感及细节感,无形之中吐露着品质,生活,宁静。
这是运用在登录页及单品详情页的详细设计网页。
SKU规范
电商里面最难部分就是商品图的控制,必要对每个商品图拍摄,角度,色彩都控制的很好,除此之外对商品在网页的呈现也做了规范处理:
- 所有产品放置在米字格园内,分为大圆、小圆、迷你圆,分别对应偏大、常规、偏小尺寸。
- 产品角度以15度为基础变量单位。如15、30、45等。
下面是一些详细运用实例:
结束语
App视觉设计中还有许多可以进行品牌设计的地方,这里就说到这里。以上大部分案例均来自网易严选App设计项目经验,望共勉。
最后盼望这次总结能对大家有所帮助,做出本身有品牌感的好作品,如有不当之处,迎接大家来一路交流。
迎接关注作者「网易UEDC」的微信公众号:
本文地址:http://www.tuquu.com/tutorial/di3857.html