• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 长文揭秘!全新的大众点评V10版本是如何做品牌升级的?

长文揭秘!全新的大众点评V10版本是如何做品牌升级的?

作者:DPUX 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含品牌,品牌升级,微交互,经验分享,视觉设计,设计流程等相关知识,DPUX希望在学习及工作中可以帮助到您

十、始,事物之极致也。大众点评在经历九个版本的迭代之后,重新站在变革的十字路口。

V10,一次新的品牌蜕变开始了…….

一、全新定位

面对消费升级下的消费偏好转移,不再以价格导向满足基础需求,上升为获得更好的体验和精神享受。转换到产品,定位也正发生改变,从工具到内容,从找优惠到发现品质生活,不仅局限于功能使用,而是包含品牌调性、产品品质、附加服务在内所获得的品牌认同。

通过对目标人群分析,结合大众点评自身业务积累,未来将聚焦打造年轻化、娱乐化、社交化的产品体系。并在此基础上提出「年轻有品 丰富不失格调」描绘未来希望在用户心中映射的形象。如何精准的诠释「年轻 有品 丰富 格调」并传递给用户,即是这次品牌升级的关键。

二、调性基因

根据对定位的细化拆解,结合产品的感知路径,我们从品牌、内容、体验3个纬度提炼出产品调性基因,作为此次的设计目标和指导思想投射至产品中。即:鲜明的品牌感知、高效优雅的浏览体验、优质丰富的内容呈现。

三、调性辐射

1. 鲜明的品牌感知

作为第一眼进入用户视野的首页焦点导航,兼具传递品牌风格和业务属性两个使命。对标行业相似的布局方式,球面形式感已经难以形成独有的品牌印象,主导航在色彩和造型质感上做新的风格探索。

色彩

人的五感常常有相似的惯性和疲劳机制,随着年轻用户对色彩的接受度逐渐升高,我们原本过度平缓的渐变色已经不能勾起视觉记忆。基于品牌色,通过拉长色相对比、增加饱和度的取色方式提炼渐变色组,作为体现丰富、年轻、娱乐感的基调。

造型

根据千人千面策略,上百个业务 icon 出现在导航体系中,需要考虑风格的扩展性和辨识度。因此尽量保留原有基础形,打破圆形外框以负形为主体,使表意更加直观。同时增加柔和且边缘相对明确的投影弥散值,辅助增强导航的点击感。

风格探索之后,协同业务线设计师共同作战,对 icon 兼顾表意/一致性/体量感做细节打磨,最终全量级延展上线。

字体

人们常说 「字如其人,人如其字」,个性鲜明的字体作为视觉语言的重要组成部分,同样影响着产品性格。

从点评 Logo 出发抽象出笔画特征,组合成简洁现代感的的字体库,运用在产品中传递品牌风格。

2. 高效优雅的浏览体验

回顾互联网发展,每一次硬件技术的革新都给设计带来不可忽视的影响。

随着 iPhoneX、小米Mix 等全面屏技术逐渐成熟,预示着未来内容与屏幕边界将逐渐融合,奢侈的屏幕空间给设计带来更多可能。

在保证信息体量的同时,通过卡片、圆角容器、留白率、互动反馈等视觉优化,使层级更简单明确,降低获取信息的视觉压力从而提高效率和愉悦感。

卡片

对区块增加投影、封闭边线包裹、与背景色差对比、弥散投影等方式形成卡片。增加空间利用率,区分不同纬度内容,提升可操作感。

圆角容器

信息区块圆角化,使内容规整统一,与屏幕更好的融合。

对于宫格图组,利用视觉自动补全做外部圆角,解决衔接处出现的空心原点,使内容更规整。

留白率

通过削弱页面分割,增加页面负空间,提升页面通透感。

互动反馈

浏览的同时在细微处增加恰当而情绪化的操作反馈,丰富产品灵性获得品牌好感。

△ 界面展示

3. 丰富优质的内容呈现

点评经历一年多内容化的探索,后续将扩充图文小视频等更多元的内容形式,每一类内容的精致度都将直接影响产品的品质感。

选图优化

在原本编辑手工选图的基础上,引入机器智能选图。对上万张图片通过「清晰度/构图/主体匹配」等指标做判断筛选,优化取图算法,使逐步呈现优质的图片内容。

图文版式优化

通过增大字号梯度、加大对比色提高图文内容的品质,

△ 界面展示

三、传播

版本发布作为品牌诠释的一部分同样重要。继承产品的调性对版本加以包装,可以使品牌更加立体的传递给用户。

简,即更大的想象空间和包罗万象的气度,预示我们逐步丰富的内容体量。受包豪斯系列作品和未来艺术的灵感启发,朴实抽象的几何图形令人印象深刻,也许可以作为呈现包容和时尚感的方式。

以 V10 为基础元素,做抽象几何变化向圆形扩展,同时延续产品中的颜色质感作为主视觉元素。

并从中提取「 V 」和「 0 」的造型组合,配合撞色营造缤纷的时尚年轻感,延展至宣传页面。

点击链接观看完整视频:https://v.qq.com/x/page/e1339zlqkxd.html

结语

至此,完成了大众点评品牌升级的开篇。

从产品策略到设计执行,从方案探索到推动落地,其中不乏方案的反复和博弈。同时也引发我们对自身价值的思考:保持对商业的关注、对潮流的敏感嗅觉、与新技术互通、才能突破「看起来好看」的小情怀真正影响产品和用户,体现更大的商业价值。同时与上下游和业务团队的日夜奋斗,保持高效的团队互通,也促进了彼此凝聚力。

后续的品牌完善和传播还有很多发力点,需要结合数据深入打磨,过程中的思考和沉淀也将逐一梳理,敬请期待。

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

  • 将像素点转化为全面的品牌体验的经验技巧
  • 交互基础小课堂!从五个维度全面分析「下拉刷新」功能
  • 实战案例!网易考拉品牌升级全过程实录
  • 用京东的概念案例,深入浅出为你解读「品牌化」
  • 写给UI新手的APP结构指南:闪屏
  • 腾讯设计师总结的图标设计五维自检法
  • 「得到」的猫头鹰Logo 是怎么诞生的?来看主创设计师怎么说!
  • 网易实战案例:教你五步打造APP节日主题设计
  • 长文揭秘!全新的大众点评V10版本是如何做品牌升级的?
  • 如何将品牌与UI完美结合?Google新规范告诉你答案

相关文章

  • 2018-08-23如何画好一张描边插画?来看这份超全面的总结!
  • 2018-08-23天猫App 首页迎来史上最大改版,背后的设计过程是这样的!
  • 2018-08-23有人说腾讯傻,花几百万买了套字体…
  • 2017-08-06熟练设计师的七原则(2):颜色运用
  • 2017-08-06FlashFXP ftp客户端软件的注册破解方法
  • 2017-08-06交互设计中关于是选择分页还是加载的问题讲解
  • 2018-08-23结合实例,总结画线稿时容易出现的几个常见问题
  • 2018-08-23该知道的趋势!iPhone X的AR引擎对UX设计师意味着什么?
  • 2018-08-23在配色这件事情上,总会有一些有趣且有用的小技巧
  • 2018-08-23在做产品设计的时候,预期和现实到底有多大的差别?

文章分类

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

最近更新的内容

    • 进阶经验!如何系统的进行改版设计(上)
    • 接下来的5月,流行这3种网页设计趋势
    • 新字体来了!一组适合儿童节的中文字体打包下载(个人非商用)
    • 静态页面与动态页面各自的执行机制说明
    • 沿着这7个思路,你可以正确的使用动效取悦用户
    • UX设计在5年内将在哪里?这里有5项预测!
    • 对话腾讯设计师:微信车票背后的设计故事
    • AI+AE教程!教你制作酷酷的动感灵魂小鼓手
    • 在按钮置灰时,该如何提供给用户反馈?
    • 开发未动,测试先行!告诉你为什么可用性测试如此的重要

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

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