## ##

【干货】“垂直频道视觉风格五维定义法”—运动健身频道改版总结

2017-09-17 23:20:30 阅读 223126 本文来源:DPUX
分享至:

在点评V9版倡导“发现品质生活”的战略影响下,垂直业务快速响应市场,联合设计开启了一场体验创新之旅,运动健身频道借机进行了品牌重塑与改版。

20170916182022049.jpeg

三步立项 : 不打无准备之仗  

首先,问清目标,了解项目背后的原因和目的。在与需求方保持沟通的同时,快速收集相关意见并领会其意图;再者,认真反思当前页面设计的不足,收集相关产品数据和可供参考的调研资料,有利于充分理解需求方输入的产品信息;此外,召集专项设计小组成员,说明项目背景以及计划,同步人员分工和进度节点,确保项目的顺利推进~

20170916182059132.jpeg

循序渐进 : 从抽象到具象的演进

1.需求理解&定义

 以业务为基石来思考平台能为用户提供的多维度价值,以用户为向导指引频道界面设计的方向,通过设计塑造频道页的品牌,优化导航信息分发效率,间接增加频道流量和业务收入。

2.风格发散&品牌

• 连接健康与品质生活的品牌定位

 品牌是一种认知,是消费者对品牌商的价值联想和综合印象。我们通过分析马斯洛的需求分层模型,结合运动健身的实际情境,窥探用户真实的心理需求。

• 连接线下VI到线上UI的风格发散

风格是联系品牌的一种认知、是营造品牌特质与气氛的表达方式。我们在前面的定义环节可以归纳得出体现品牌和产品的设计关键词,再以此从风格发散和风格把握两个维度去构建情绪板。就此次运动健身频道的改版而言,我们得出了品牌关键词为价值、精彩、燃;用户关键词为专业、健康;产品关键词为品质、连接、动。

20170916182153294.jpeg

• 以商业价格为横轴的衡量标尺

我们在构建风格情绪板的过程中,通过施加最大和最小限度的刺激来界定风格具象化的合理值。在O2O领域中,通常以商业价格为横向参考轴。

3.视觉推导&要素

结合定位,运用视觉五要素的演绎法推导设计风格。将抽象、理性的需求文档转化为富有感染力的图稿。将界面的视觉表达还原到元素级,从形、色、质、字、架五个要素去分析。

• 形

以跑鞋领域为例做分析。低端系产品原创弱且过度依赖装饰,品牌感知弱;而高端系产品形态更有设计感,品牌感知强,线条连贯且形体特征明显。

20170916182251422.jpeg

• 色

20170916182352172.jpeg

    以运动服装领域为例做分析。低端系产品的色彩体系混乱,单品色搭配欠佳,系列款缺少呼应,产品系没有统一的色彩规范,品牌感弱甚至近于无;而高端系产品强调品牌色系的应用,产品细分和品牌色彩细分更显专业。个性色彩or品牌专属色的运用更受年轻的专业用户青睐。

• 质

20170916182431181.jpeg

横向对比轮滑鞋、跑鞋、高尔夫球杆等产品,质地能够直观地反应在商品材料和工艺上。

• 字

20170916182458440.jpeg

对比运动服上的字体可以得出结论,低端系产品的字体重装饰,设计无规范;而高端系产品重视字体与场景的协调性,运动中也易被识别,更有设计美感。

• 架

20170916182519658.jpeg

对比专卖店面的陈列,低端系品牌空间利用率高,展架琳瑯满目;而高端系品牌善于利用空间营造氛围,有大量留白面积。 

20170916182609073.jpeg

回顾产品与品牌定位,对照消费的场景特征定位区间。反馈迭代、沉淀输出指导视觉设计的风格板。( PS:考虑到消费的行为特征及潜在心理,视觉风格的定调可适度拔高 )

4.设计方案&规范

•设计方向  燃力觉醒

•风格描述  享受运动的精彩,充满力量的形势积蓄在体内一触即发,沉浸的气氛和醒目的视觉冲击力,唤醒最原始的悸动。

20170916182707672.jpeg

依据设计推演,明确设计方向并做进一步的沉淀,细化产出视觉元素和界面规范,同步至项目设计小组。

复盘总结 : 沉淀设计经验

就这次运动健身频道的品牌升级与改版而言,我们基于O2O的业务场景,应用“视觉五要素”的演绎方法,从线下环境、商户品牌、奥运宣传和垂直应用等方面汲取营养,以线下VI设计反哺线上UI视觉,对齐点评的品质战略对频道页进行重塑,在风格统一的基础上找出符合运动健身品牌调性,指导最终的视觉设计。在细节上,采用增强正负形、背景的对比以及加强标题字等方式来平衡ICON的点击感和二级类目的层次感。同时,基于H5开发的技术特点,我们这次摈弃耗资源的动效,测试静态素材营造2.5D的视效,预留缺省机制以保证在不同城市下不同导航类目的适配形式,保证用户体验的完整。

责任编辑:HLR
分享至:

联系客服

故障反馈