总监级的思考!视觉设计该如何赋予产品个性? - 优设网 - UISDC

总监级的思考!视觉设计该如何赋予产品个性?

2015/12/13 13831评论区

visual-design-character-2

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

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

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

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

1sf20151213

△ 品牌设计推导过程

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

一、制作竞品图谱

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

二、探访品牌感觉

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

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

  1. 您觉得目前的网站界面有哪些问题?期望本次改版达到什么效果?(从0到1的产品可跳过这个问题);
  2. 请整体评价竞品logo/界面,有没有哪些点符合咱们产品的气质?
  3. 您认为咱们的产品应该体现出什么感觉/气质?
  4. 如果把咱们的产品比作一个人,他应该是什么样的人?
  5. 哪些logo/网站整体最贴近咱们产品的感觉,为什么?

2sf20151213

△ “投石问路”法

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

三、“个性”关键词提炼

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

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

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

4sf20151213

△ 品牌设计模型

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

3sf20151213

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

四、映射个性风格

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

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

五、设计主题设定

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

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

六、设计方案推演

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

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

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

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

写在最后

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

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

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

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

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

001gC41ygy6WRkIOLR3851

【阿里总监的近期好文合集】

视觉设计如何一稿过?
《视觉设计如何“一稿就过”—— 谈谈最近踩过的坑》

好看的设计差在哪里?
《请记住,视觉设计远不止“好看”这么简单》

国外的视觉设计好在哪里?
《阿里交互专家:国外的视觉设计好在哪里?》

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量106万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/visual-design-character

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 优设专访 设计师 扁平化设计 交互设计师 优设大课堂 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 AI教程 设计理论 平面设计 神器下载 字体下载 设计趋势 用户体验设计 psd下载 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里