2020-9-21 资深UI设计者
这是Taobao APP 商详购买页面底部Button。一般情况下,品牌刷新或VI色调整,都会体现在界面的核心功能区域,例如Button或者Icon上。从‘立即购买’Button的色彩变化,便可以判断Taobao经历了3次重要的VI色调整。
下面颜色是我记忆里的淘宝VI色(大致色值),淘宝VI色的调整也是相应了互联网设计的主流色彩表现趋势:
[ 星巴克官网首屏截图 ]
常人看到这样的界面并不会有任何意见。用‘色彩认知’来讲讲我的观察。星巴克的主色是墨绿色,在官网大面积使用,则带来‘视觉压抑’的感觉,我想通过简单地改变,来提升星巴克的品牌气质。
我用Photoshop吸管工具从官网首页上的一张照片中提取颜色:香槟色(Champagne),这样的颜色在墨绿色底色上有较好的辨识度和品质感,适用于标题性文字颜色。
[ 从照片中提取颜色 ]
在前期的训练中,也可将图片马赛克,这会辅助我们挑选颜色,当你足够熟练后,即可直接用吸管在照片上选择更丰富的色彩。
[ 从马赛克照片中提取颜色 ]
香槟灰(Champagne gray),可用作常规阅读段落文字颜色,在墨绿色上面会显得柔和、舒适。
我重新设计了首页的文字与版式:
[ 优化后的效果 ]
下面是之前的效果。对比看看:
[ 官网截图 ]
这是最简单的用户感官上的提升。而更重要的是‘用户心理’上的提升,这将在用户阅读文字内容时发生。我们先看看文字内容(翻译如下):
标题 | 事情在变,但我们仍然在这里为您服务。
正文 | 我们已暂时关闭店内咖啡厅,但部分杂货店和直通车位仍然开放。某些市场还提供星巴克提供的Uber Eats服务。请访问我们的商店查找器以获取的商店营业时间和营业地点。
按钮 | 寻找门店
这段文字是星巴克官方在疫情期间所写,并不是一段激动人心的品牌宣传文案,所以我们在设计的时候应使用常规的文字颜色,为避免白色在墨绿色下带来的刺眼,我选择白灰色(#e3e3e3)的字体颜色。标题想表达的潜意识文字是:‘虽然我们碰到了困难,但是我们依然坚持为您服务’。我改为香槟色,来体现星巴克积极的态度与服务的品质,会显得更有力度。
在页面中使用这样的颜色,同样可以提升设计的活跃度,为品牌带来更好的品质。例如,将颜色应用到星巴克官网中小图标设计和文字上面,来提升品质感与活跃度:
[ 优化后的设计 ]
[ 官网截图 ]
对我来说,OODA是一种行动思维,它可以改变您在设计工作中的思维方式。可以运用在您的设计执行和管理中,乃至您所在的任何领域、包括您所担任的任何角色。
文章来源:优设 作者:Riixiong
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务