设计实战!网易严选APP的品牌设计过程全揭秘

2017/10/18 20524

网易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」的微信公众号:

「案例研究:聊聊品牌视觉设计」


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

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

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

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/brand-design-case-flow

sketch UI 界面设计 平面设计 转场动效 交互设计师 设计师 设计师专访 扁平化设计 排版布局 职场 设计流程 用户体验设计 视觉设计 素材下载 配色 web前端开发 海报设计 AI教程 设计规范 设计理论 字体下载 产品设计 设计趋势 神器下载 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 用户体验 优秀网页设计 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里