QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性?基于这个问题,我们开启这次探索之旅。


QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性?基于这个问题,我们开启这次探索之旅。

QQ国际版视觉探索:准备了两套视觉设计方案

现有版本的视觉问题:

  1. 现有的视觉形象是否符合产品气质,在用户使用的过程中,是否能够留下深刻印象。
  2. 对于信息层级关系的处理,页面中元素的比例分布是否合理。
  3. 设计细节的优化,例如分割线的处理、灰色的运用、图标的形体等,都有提升的空间。

QQ国际版视觉探索:准备了两套视觉设计方案

产品的认知与定位

1. 产品定位

通过用户调研的反馈,人们对国际版的使用印象主要集中在功能少、无广告、操作便捷、翻译功能等。轻量、效率对于他们来说是第一位。而手Q有着更佳丰富的功能以及资源,定位更倾向于娱乐化社交方向,所以两者产品的定位还是有些差异。

QQ国际版视觉探索:准备了两套视觉设计方案

2. 人群定位

国际版主要针对海外市场,它可能是留学海外的文艺青年,时尚领域的潮流达人,也可能是商务业界的白领精英。他们往往对生活品质有着独特的追求,对新鲜事物也更容易去接受。在开始视觉探索的前提,我们不仅要展现用户个性化的一面,还要保证用户使用产品的高效性。

QQ国际版视觉探索:准备了两套视觉设计方案

3. 竞品分析

竞品对象:Line 、Talk、Snapchat、Whatsapp、Allo、Skype、Messenger、Hangouts

如图: Line、Talk主要针对日韩地区,无论配色还是设计细节,都能体现产品的亲和力。Whatsapp、Allo、Messenger、Hangouts等主要针对西方地区,整体视觉偏向于简洁硬朗的风格。

因此我们分为两个维度分析,文化维度和产品维度。文化维度主要体现不同地区人们对产品的视觉喜好。例如Line的品牌深受亚洲人群的喜爱,却无奈宣布退出西方市场,这也体现出东西方人们对视觉的喜好差异。而产品维度帮助我们了解用户日常的使用场景,根据场景的需求来定义未来的视觉元素。

互联网设计趋势

从Windows Phone极简的信息形态,再到Google一张纸片的艺术,整个发展过程无非是对内容本质的重视,利用内容自身的形体去传递信息。随着互联网时代的成熟,人们不再是单纯的获取信息,舒适的阅读感,强有力的视觉冲击,动态设计带来的惊喜等等,都成为体验设计的一部分。

QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版视觉探索:准备了两套视觉设计方案

我们基于现有的视觉问题、产品定位、人群分析、设计趋势,可以推断出我们视觉的大致基调 : 高端 、品质 、轻量,针对人群的不同喜好,我们提出两套视觉设计方案。

PLAN A : Free the air

1、简介

这套视觉的灵感源于“空气”,通过对视觉形态的传达,让用户感受到触碰空气的质感。

QQ国际版视觉探索:准备了两套视觉设计方案

2、视觉展示

QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版视觉探索:准备了两套视觉设计方案

3、设计分析

QQ国际版视觉探索:准备了两套视觉设计方案

(1)刺激感官的色彩

迎合设计的潮流趋势,高饱和的色彩维度,普遍能够刺激人们的视觉感官,便于人们更快的识别信息。因此我们在原有品牌色的基础上,进行优化提升,让色彩看起来更加清爽明快,而不是死板沉闷的办公软件。

QQ国际版视觉探索:准备了两套视觉设计方案

(2)圆形元素的延展

圆作为这次主题的载体,我们赋予它多样的视觉形态。无论是登陆页面的背景图,还是个人中心的头图,通过不同的形式,相同的元素,去传达“空气”的理念,让用户感受到触摸空气的质感。

QQ国际版视觉探索:准备了两套视觉设计方案

(3)形体之间的对话

如何利用图形的形体来表现关联?我们能否利用形体自身的特性,通过交错、叠加、分离来传递更多的情感关系。本次视觉方案中,避免对话框样式的出现,取而代之的是倾听形体之间的对话。

PLAN B : Black & White

1、简介

时尚作为这套视觉风格的核心,张扬个性,特立独行,激发年轻人的内心色彩。

QQ国际版视觉探索:准备了两套视觉设计方案

2、视觉展示

QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版视觉探索:准备了两套视觉设计方案

QQ国际版视觉探索:准备了两套视觉设计方案

3、设计分析

QQ国际版视觉探索:准备了两套视觉设计方案

(1)黑与白的纯粹

随着我们ISUX品牌的升级,色彩化繁为简,利用的黑与白,传递更加丰富的信息。企鹅形象的设定:帝企鹅也称皇帝企鹅,象征着人们的品质与地位,更符合海外用户对于品质生活的追求。

QQ国际版视觉探索:准备了两套视觉设计方案

(2)图形艺术气质的体现

图标的形体往往能够映衬出产品的小情调,本次图标设计的初衷,希望它简约而又不失华丽,硬朗而又不失情感。在细节的处理上,更注重对层次的把握,边角的地方也会做一些个性化的处理,让图标散发自身的气质。

QQ国际版视觉探索:准备了两套视觉设计方案

(3)杂志的阅读体验

合理的版式可以给用户带来舒适的阅读感,例如Medium、YahooNews等,通过严谨的信息布局,显得整个页面结构更加充实。而时尚版式的设计,例如夸张的文字对比,个性化的定制符号,张扬的切割设计,让每个页面有着属于自己的节奏。

QQ国际版视觉探索:准备了两套视觉设计方案

无论是方案A的轻薄淡雅,还是方案B的纯粹果断,他们都有各自鲜明的性格。产品只是一个虚拟框架,需要视觉的帮助,赋予它全新的生命,让它变得更加充实。而你心目中的国际版会是什么样子?这两套视觉方案是否符合你的口味呢?

 

作者:隔壁老贾

来源:腾讯ISUX

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24381/

(0)
CatherineCatherine
上一篇 2017-05-08 12:38
下一篇 2017-05-08 14:47

相关推荐

  • 浅析设计图表色彩的简单方式

    译者按:对色彩的研究通常要么太过随意缺乏逻辑,要不太过理论化难以理解,这篇文章用非常浅显易懂的方式,讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程,给出有力的论证,并得出很棒的结论,非常值得一读。对色盲色弱来不够友好*:原文中问题一的标题是“Low Accessibility”,通常用形容来产品对残障人士的友好度不够,这一点在欧美国家经常作为需要重视的产品硬指标(也是由于他们的色盲色弱发病率比亚洲高很多)。因为在中文里没有简短精准的说法,所以我在写的是“对色盲色弱不够友好”。
    逻辑性较强的人*:原文的写法是“left-brained folks”,直译是左脑型的人。通常左脑型的人被认为逻辑严谨,右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用,所以我写的是“逻辑性较强的人”。

    2017-05-01
  • 说句心里话,这5种常见的设计模式还是挺闹心的

    本文所提到的这5种设计模式确实有其恼人的一面,但是它们同样存在特定的优势。在许多设计项目中,在特定的需求之下,它们也可能是最佳的解决方案。另一方面,学会根据实际的状况来寻求优化的方案,也是设计师应当做到的事情。

    2017-04-28
  • 蘑菇街App改版设计总结

    新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

    2017-05-12
  • 网易云音乐交互负责人|从一次活动设计,聊聊交互设计师的3个阶段

    交互设计师的三阶段:有美感、有逻辑、有sense

    2017-05-18
  • 解密 Facebook 广告业务:用户体验与商业价值的双赢靠什么?

    本文经授权转载自极客公园(id:geekpark)文:宋德胜责任编辑:克里斯「把核心的事情做好,用户增长、收入增加会随之而来」,Facebook 近期在产品上的一些调整恰恰体现了这一想法。当地时间 1 月 19 日下午,扎克伯格在个人的 Facebook 账号上宣布,Facebook将对媒体机构进行评级,并在算法上提高优质媒体的内容在信息流中出现的优先级。公告刚刚发布,《纽约时报》等权威媒体机构的股票应声上涨。无独有偶,扎克伯格发出公告...

    2018-01-30
  • 设计和建立设计体系规范的小贴士

    毫无疑问,我被问到最多的就是关于设计规范体系的建立。所以在过去几年里,最多思考的就是如何设计、建立完整的设计体系,像Marvel, Bantam 和 Modulz这样的产品,下面我想分享一些我学到的方法。

    2017-05-05
  • 移动端搜索功能设计:3个阶段解析搜索流程设计要点

    这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

    2017-05-11
  • 如何让头脑风暴更有效率

    头脑风暴法是广泛用于团队的一个产生想法和解决问题的方法。然而,许多头脑风暴活动是有不完美的,最终并不能帮助激发思想上的创新。众所周知,传统的头脑风暴,团体在一起,把想法一个接一个的表达出来,通常这是…

    2014-11-10
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • 交互设计规范分享:页面信息展示、信息交互和通用组件规范

    本规范按web交互属性分三个部分:页面信息规范、信息交互规范、通用组件规范。

    2017-05-19