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

相关推荐

  • 美国设计师总结:2018年的用户体验设计趋势和方法

    这是由一位美国作者站在美国的视角写的文章。即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。2017年即将结束,是时候向前展望,预测在接下来的十二个月里,信息体验设计会如何。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于...

    2018-03-29
  • 交互设计技巧:创造好的用户体验(1)(翻译)

    点击上方「人人都是产品经理」立即关注一个好的用户界面具有较高的转化率和易用性。换句话说,它既能满足商业用途也便于使用。以下是我们发现的一些想法清单。译者:@谢尔鱼 译文地址:http://goodui.org/翻译并授…

    2017-08-01
  • 译文 | 如何通过讲故事来简化用户体验设计

    原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

    2017-05-27
  • 【交互设计-UX/UE】评论回复

    前项目有做到评论回复功能,途中遇到一些不解,就是回复某个人的时候,到底回复的类容是紧接着被评论者的下方,还是按时间另起一栏? 我们可以先对比一下QQ和微信.....keep watching!!! 微信版本号:V6.3.16 QQ…

    2016-08-03
  • 【交互】做上进的设计师,交互设计大趋势!

    一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出在移动产品中会被广泛应用的十大交互设计趋势。希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验。|…

    2017-08-01
  • 交互设计应该学的软件有哪些?

    数十万互联网从业者的共同关注! 作者:Yoojoo,作者授权早读课发表,转载请联系作者。来源:知乎仅针对现有企业交互设计师常见设计范围(网页,桌面app,移动端app)作答。1-7为交互设计师必备,8-10有兴趣的…

    2017-08-01
  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • 如何设计可交互的email,调动用户的参与感?

    Email营销通常与市场推广活动挂钩,是帮助你达到推广目标的最有效途径之一。但如何确保你的营销邮件的内容与品牌紧密相连?这一直是营销人员面临的一个挑战。用来克服这一挑战的战术多如牛毛,而可交互的email正迅速崛起为最具创新性、动态性和最流行的方式,他们让用户深深着迷、参与其中,相关设计师和开发人员都应该引以为豪哦!

    2017-05-17
  • 像用户体验设计师那样思考

    [国外设计第158期][图片]插画来自Crafticons培养探索未知的心态(持续)学习用户体验是最需要技巧的事情。因为这不是标准教育中的某个正式课题。它总是以某种神秘不可预测面貌示人,直到你在设计、研发、市场推广(或者其他创意领域)中遭遇到用户体验的具体概念。虽然在用户体验方面

    微信热点 2018-04-18
  • 怎样合理设计产品交互框架,这里有6个细分步骤

    这六点无论是对产品新人还是有经验的PD都是很重要的,按照整个流程可以避免很多问题,也会让我们的工作变得有节奏,而不至于丢三落四,确实对产品的把握。

    2017-05-18