视觉设计该如何赋予产品个性?

   最近经常被问到“设计如何赋予产品性格”,“如何通过分析确定哪种视觉风格更合适”等问题。遇到这些问题我很高兴,因为这说明越来越多的人开始重视更高层次的设计问题,而不是局限于设计技巧、审美等表层问题。

  恰巧过去的半年,我也在研究品牌设计相关的方法。一是因为发现行业对品牌设计的研究有了长足的进展,但设计结果却没有太大的改善(行业内有个怪象:会使用方法论的设计师作品质量不见得好;设计质量好的又不见得会正确使用方法论。很多设计师因此排斥方法论);二是因为我们在做的是B端的产品,这方面的设计研究基本上是空白。

  从流行的设计风格到符合产品定位的设计风格,再到充满品牌个性的设计风格,我和设计师在这中间经历了很多挫折。索性我们一直没有放弃,期间不断探索试错、沉淀方法,历经将近一年时间最后终于找到了答案(在传统方法上的突破和创新)。

  在这里把总结的经验分享给大家,希望更多的设计师可以通过它塑造出符合产品定位且充满品牌个性的设计,为企业的品牌建设添砖加瓦。


  △ 品牌设计推导过程

  目前来看,即使是在BAT这样的公司,有“个性”、“出彩”的设计也并不多见。问题出在哪里,对照上图,我认为“投石问路”、“个性关键词提炼”、“设计主题设定”是关键,而这几点是目前行业欠缺的。

  一、制作竞品图谱

  这个过程有点类似竞品分析,寻找同行业(产品经理推荐、网上查找)产品,从中挑选设计质量较好的,把页面存成图片,把logo分类整理等。在这个过程中我们自己也会对网站进行一些分析。

  二、探访品牌感觉

  做到“知彼”还不够,还要“知己”。很多设计师都有这样的烦恼,辛辛苦苦做出来的设计稿,在领导眼里却是各种问题,甚至要推翻重来。除了视觉表现能力外,大部分的情况是因为对产品的理解和认知与他人不一致造成的。怎样既能充分了解对方高屋建瓴的产品理念,又能避免被对方不专业的设计意见牵着走呢?这里我们使用一种“预访谈”的方式(我们给这种方法起了个名字叫“投石问路”)。

  召集产品owner、产品leader等重要角色,拿出之前准备好的竞品图谱,询问五个问题:

  您觉得目前的网站界面有哪些问题?期望本次改版达到什么效果?(从0到1的产品可跳过这个问题);

  请整体评价竞品logo/界面,有没有哪些点符合咱们产品的气质?

  您认为咱们的产品应该体现出什么感觉/气质?

  如果把咱们的产品比作一个人,他应该是什么样的人?

  哪些logo/网站整体最贴近咱们产品的感觉,为什么?


  △ “投石问路”法

  这样既能深刻理解产品定位、气质,又能了解到使用什么设计形式最贴近这种气质,还能知晓最终的设计拍板者对各种设计形式的看法,避免设计师做很多无用功,同时还能在正确的方向上充分发挥。“投石问路”的方法在我们的设计过程中起到了至关重要的作用。

  三、“个性”关键词提炼

  目前我们已经做到”知己知彼“,相当于掌握了丰富、正确的原料,接下来就要进行加工创作了。

  关键词提炼的方法相信大家都不会陌生,我们之前也使用了这种方法,但是效果并不理想。因为我们最后设计出了“正确”但不“出彩”、缺乏“个性”的产品。以前我们做过一个保健品类的项目,通过情绪板的方法提炼出了关键词”自然、健康、可靠“,最后设计出了毫无惊喜感的界面,还被人质疑抄袭了一个三流健康类网站(确实很相像,我们看完都惊呆了)。设计师也对这种方法颇有微词,认为效果不好(不用情绪板的方法也能想到这些词,也知道该用绿色)还在一定程度上限制了发挥。

  问题出在哪里呢?是对设计的认知出现了问题:设计不仅包含对产品理性客观的理解,对产品感性主观的认知,更要有对产品个性塑造的升华。而之前错就错在仅通过理性或感性的方式来推导关键词,却缺少了重要的艺术加工的过程,结果自然就不会有惊喜。我们都知道艺术创作是”源于生活,高于生活“,品牌设计也是一样,它源于对产品的理解,同时又高于这种理解。如果我们只是按照普通的方式去提炼关键词,势必得到普通的设计。类似”潮、简单、科技、温馨、可靠”等关键词,是不是可以套用在无数产品上?那据此而设计的界面又怎么赋予产品独特的个性呢?那看似无懈可击的推导,最后却又产出平庸的设计也就不足为奇了。


  △ 品牌设计模型

  顺着这个思路,我们再提炼关键词(以我们目前在做的一款大数据产品为例):


  我们和一线的产品经理一起头脑风暴,从理性角度(产品定位)及感性角度(大家分别说说产品给他的感觉)提炼了一些关键词,再通过“投石问路”的结果(根据我个人经验,一线产品经理比较务实;owner及leader的想法比较缥缈)及设计师的大胆创意,想象出如上图的个性关键词。从图中可以看出,这里的个性关键词是非常抽象的,它给人很大的想象空间,并且源于理性和感性词。现在有没有感觉产品已经有一些个性出来了呢?

  四、映射个性风格

  有了这些词,我们就开始找相关的图片制作情绪板了。和传统的情绪板(关于情绪板的方法网上有很多文章,这里就不介绍了)方法不一样的是,我们并不一定要从情绪板里提炼出什么然后严格遵守。因为情绪板就是一个工具,是帮助设计师找感觉的,而不是限制住设计师思维的。

  情绪板的作用是帮助设计师把关键词图形化,同时思考它是否合适?比如玄幻这个词应该是一种什么样的视觉表现?这种视觉表现体现在界面上好处理吗?太极用作logo的话,能够有哪些表现形式?一方面要通过情绪板找感觉,一方面在界面上反复尝试(试稿),然后通过权衡找到合适的风格,这是一个反复迭代的过程。

  五、设计主题设定

  经过多次试稿以及大家的意见,设计师决定通过行云流水的整体感觉打造既有中国特色,又有B端产品感觉的独特风格(由于视觉稿还未上线,所以这里不多说了,仅用于说明方法)。logo融入了太极+水滴+水晶球的元素,界面主题为海洋(数据可比作大海,同时海波也是常见的古代传统花纹元素),界面元素多考虑曲线以及传统纹样,整体强调对比(太极)及留白(中国画),突出意境……

  设计主题非常的重要,没有主题的设计会显得单薄、平淡,缺少灵魂。

  六、设计方案推演

  其实设计师并不是一开始就决定用行云流水的感觉贯穿界面始终。最开始他想从“阴阳”、“太极”、“海波”等感觉入手(来自个性关键词),但是大家觉得效果并不是很好;后来我们决定更落地一点,找找“中国风”的感觉,在这个过程中通过情绪板了解了很多中国传统的纹样,改进后发现风格确实明显了,但整体比较零散,缺乏主线;大家不断在界面上找问题,给建议,设计师也做了很多功课,没事就上网搜各种中国画找灵感,最终确定了“行云流水”作为贯穿界面整体风格的主线,界面主题、元素、风格均围绕这种感觉,最终设计出风格独树一帜、个性十足又不失B端产品行业共性的作品。我们与众不同的品牌基调也就此确定下来。

  所以五、六步并不是一个完全线性的过程,它们是一个不断迭代的过程:先通过第四步情绪板映射个性关键词,然后试稿(设计师个人尝试),在这个过程中有了大致的设计主题(比如第一个版本就有海洋元素),在此基础上通过设计方案推演(大家给建议)不断改善,在这个过程中设计主题越来越清晰,再通过不断的推演达到最终效果。

  所以如果你看到某个设计师讲述自己的设计推导过程是按照步骤顺序完成的,那基本是不可能的。不管是做产品、做交互设计还是视觉设计,都充满了无数的迭代过程。再优秀的设计师也要通过不断的修改完善自己的作品。我相信好的设计都是改出来的。

  最终我们的设计稿在挑剔的老板面前一次通过,大家都感到很兴奋,貌似这是第一次这么顺利。

  写在最后

  在互联网2.0时代,设计师没有什么章法,更多的是随心所欲的做设计,设计好坏靠的是设计师的个人能力。

  在互联网3.0时代,各种优秀的互联网产品层出不穷,对设计师的要求也越来越高,优秀的设计师不仅要有基本的审美能力和设计技法,还要懂产品、懂用户,懂怎么通过UI设计正确的引导用户。对于行业巨头来说,如果只凭设计师的个人能力,整体设计水平将变得极不可控,所以开始重视方法论、重视设计师的推导能力。这样可以很好的提升设计师的理论能力及产品能力,让更多设计师认真的思考如何做正确的设计;但同时带来的反面效果是设计师的创意能力受到限制。最近几年,国内的设计呈现流水线般的感觉,优质而有创意的设计越来越少见,与之不对称的是设计师的自我包装能力越来越强了(否则通过作品没办法拉开差距)。

  在逐步发展的“互联网+”时代,互联网会渗透到各行各业,这对设计师也会有不一样的要求。每个行业的情况都完全不同,这要求设计师既要根据行业、产品特点做出正确的设计,又要通过独特的设计语言赋予产品不一样的个性。未来注定是一个在设计上百花齐放的时代,随着设计行业的不断成熟,同质化的设计会越来越少,在某些独特的行业,设计师甚至会无竞品可借鉴,只能通过扎实的基本功确定设计方向。

  我希望这一天可以尽快到来!

  作者微信公众号:津乐道,欢迎关注哟!

时间: 2024-11-08 18:59:59

视觉设计该如何赋予产品个性?的相关文章

视觉设计也可影响产品的功能

最近我注意到苹果公司的产品设计已经开始采用一种新的视觉欺骗方式使苹果的东西更小巧而漂亮.苹果通过对产品外观进行一些巧妙的处理,努力不让用户发现其产品在有些功能(或指标)并没有苹果宣传的那样好.通过这种巧妙的视觉欺骗使其推出的产品能更完美的出现在用户面前. 我认为这种新的产品设计理念很聪明(从商业角度来看),因为它会使你的产品看起来比实际更小巧.这里有两个例子. 苹果电脑的曲线,一方面使用平滑与对称的弧度使曲线更加柔和,另一方面却使用棱角分明的边线,使两者的对比十分鲜明.为什么这么设计?这么做会使

江南Style带给互联网产品的灵感

首先我要承认在[江南style]这件事上我非常后知后觉,当这个名词频繁出现的时候,我只是在潜意识里面惊诧了一下韩国人居然已经偷到了我们祖国的心腹.后来看到某白人小胖出离愤怒的咆哮说北韩人(小胖捉实分不清南北韩)在洗美国人的脑,我终于经不住好奇心去围观了一下. 这一看给我看出了灵感,我发现这场热闹的江南风实在可以给做产品推广的我们提供很多启发.当然这些启发也适用于很多其他行业,毕竟所有东西都需要营销. 我发誓我平时没有这么无聊,看到什么都要去发散下思维,但是这一课实在太精彩,我深感我不写出来对不起

为产品赋予人格—情感化设计的组成要素及实践案例

中介交易 SEO诊断 淘宝客 云主机 技术大厅 [编者按]本文翻译自Smashing Magazine,译者为@C7210 ,发布于其个人博客BeForWeb.文中所指的情感化设计,目标是在人格层面与用户建立关联,使用户在与产品互动的过程中产生积极正面的情绪. 从案例中介绍了让用户更好的使用产品,展现如何使用户获得更愉悦的体验,这些都是为了让用户主动向他人分享和推广这些正面的经验. Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气

设计理论:视觉设计是美化产品

原文:Common Visual Design Misconceptions 最近,我有机会研究对视觉设计作用的常见误解,这些误解仍然盛行于行政主管.产品主管,工程经理和市场专家中.设计团队成员如何说明这些认识是错误的?又该如何向同事和老板展示视觉设计真相? 视觉设计师在特定产品领域或职业生涯中会面对各种困难,但有三种误解频繁发生: 视觉设计是美化产品: 突出显示能改善视觉设计: 可以分割评估视觉设计. 视觉设计是美化产品 这种信条可能起源于工业时代的设计理念引入.从那时起,产品以前所未有的方式

产品设计与交互设计之胡言乱语

引用heide格物致的话,交互设计是这样的:" 以人的需求为导向,理解用户的期望,需求,理解商业.技术以及业内的机会与制约,创作出形式,内容,行为有用,易用,令用户满意且技术可行,具有商业利益的产品." 交互设计的服务对象是产品,是为产品锦上添花.而"产品"这块"锦"则是发现用户需求或者创造用户需求,并为用户提供满足需求的途径或工具. 产品设计师就像造物主,为了地球不太寂寞,为了地球更加完美,从而造出了"人"这一终极产品.当然

“好产品”豆瓣和“坏产品”人人

[导读]本文是由虎嗅网作者罗超(爱科技网创始人)本人发表在<全球商业经典>的杂志上.当期栏目的"好产品坏产品"将由虎嗅网与<全球商业经典>合作.罗超本人剖析了一款他眼中的好产品:豆瓣,和他严重的坏产品:人人网. 这两款产品同样都是伴随作者青春的成长,怎么会在现在有云泥之别?大家可以对照看下. 我记得我第一次接触豆瓣是在2006年.当时我还只是青葱年少的工科学生,那会儿有网络依赖症的我把大多空余时间泡在机房.所以在忙忙碌碌的校园生活之外,总觉得生活中缺少了点什么.

产品设计之二:优化你的产品细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 几天前的一个清晨,我敲下了<产品设计原则之一:精简你的产品>很荣幸被推荐到了首页,同时收到了好多人的信息反馈.在我看来,有人评论我写的东西,莫过于最荣幸的事情,所以我做了一一回答.而今天我决定继续敲打这个系列的第二篇文章,希望喜欢的继续拍砖或者围观,我会不甚感激,同时继续写好本系列的感悟. 精简你的产品,通常在产品设计的前期,策划

中小企业营销比产品更重要!

"唉,我真是不甘心."发出这番感慨的就是此刻坐在我对面的刘总. 想想也是,来自上海的刘总辛辛苦苦把产品研发了四年,使一款化妆品无论是工艺还是技术都已经达到炉火纯青的地步,遗憾的是,由于不擅营销,产品至今还大多沉睡仓库,看到别的不如自己的产品在市场上卖得红红火火,他心里真是五味杂陈. 事实上,在这个社会,作为企业老板来说,不懂营销,必定要吃大亏. 怎么办? 是继续沉迷于技术完善还是尽快实现营销转型. 在我看来,在目前状态下沉迷于前者只会加速他的衰亡,而着眼于后者才真正有置之死地而后生的机

对设计师来说信息就应该是一种产品

文章描述:对设计师来说信息就应该是一种产品. 这个季度公司主要的项目是和百度合作的APP.每个APP都是一个小的产品,他有自己的产品目标.策略.结构框架.交互方式.设计风格.内容方向.可以说是麻雀虽小五脏俱全.经理提出需求.编辑整合内容.技术负责开发.我在其中负责产品的框架.交互.视觉这三个方面的设计(小公司你们懂的).我下面要分为几块来讲一下什么是我的设计,这是我的做事习惯与方法,肯定有些比较浅显,但我写出来的目的就是为了画一条红线,这样以后的思考和方式才能在这条线以上. 设计的方法.态度: