• 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等相关知识,希望在学习及工作中可以帮助到您

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

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

  • 《网易资深设计师:如何建立可信赖的品牌形象?》
  • 《实例演示!聊聊品牌视觉设计的4个关键要素》
  • 《用腾讯企鹅电竞的案例告诉你完整的品牌设计该怎么做》


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

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

优优教程网: UiiiUiii.com?是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏

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

  • 实战案例!网易考拉品牌升级全过程实录
  • 用京东的概念案例,深入浅出为你解读「品牌化」
  • 写给UI新手的APP结构指南:闪屏
  • 高手怎么做设计?来看腾讯文档背后的品牌设计过程!
  • 腾讯ISUX :2018年的品牌体验趋势
  • 如何找到改版的切入点?我用「品牌探索」这个方法!
  • 实战深度总结!如何设计和运营品牌形象?
  • 用品牌基因法,三步帮你搞定图标设计!
  • 你知道吗?腾讯换了Logo,还有了一套新字体
  • 实战案例!腾讯QQ支付品牌重塑设计背后的经验总结

相关文章

  • 2018-08-23遇到特殊的设计问题时,有一条原则帮了我
  • 2018-08-23首度揭秘!春节期间滴滴地图小车图标的换装设计过程
  • 2017-08-06在firefox播放flash的object及param的写法
  • 2017-08-06Web开发时碰到的问题以及心得经验
  • 2017-08-0625条div+css编程提醒及小技巧整理
  • 2017-08-06在iframe框架中打开页面的方法
  • 2017-08-06如何在网页制作中给网页字体文件增加矢量图标
  • 2017-08-06博客园CnBlogs自定义博客样式分享
  • 2018-08-23网站要上线了,问问自己这15个问题再做决定
  • 2018-08-232017年最后几个月,网页设计师值得注意的趋势

文章分类

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

最近更新的内容

    • UCAN 2017回顾!8分钟看完设计大咖们的尖端干货
    • 设计道理谁都懂,为什么换自己就不会?
    • 这8条走心的建议,帮你设计出更加优秀的排版
    • 如何提升界面品质感?来看这篇超全面的总结!
    • 网站上flv/MP4等格式的视频文件播放不出来和MIME类型有关系
    • 网页制作不得不知道的几个技巧
    • IE下打开ClearType后透明字体问题的解决方法
    • 用一个小案例,教你面对那些无聊细碎的设计需求
    • 一小段html代码将就能将百度搜索栏包含到你的页面里
    • 用这个方法,让你的设计方案轻松通过! 

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

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