国外的视觉设计好在哪里?

最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。


最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

国外的视觉设计好在哪里?

△ 国外一些to B 产品的首页设计

以上是我随便找的几个产品的首页截图,大家感受下。总的来说,国外设计有以下几个特点:

一、超高逼格(放大看)

所谓“高端大气上档次”,可能也就是这样了吧。由于我不是专业做视觉设计的,所以也很难说出其中的原因,相信视觉设计师会从不同的角度讲出很多门道。

二、充满个性(缩小看)

我认为“个性”是中外设计最大的区别:中国的设计师比较注重是否满足客户需求,是否符合产品定位,是否美观和谐,细节是否够精致;国外的设计师除此 之外,还非常注重整体感和产品个性的表达:每个网站风格看起来都非常的与众不同,你很难找到看起来非常雷同的设计,而国内设计雷同的网站比比皆是。

国外的视觉设计好在哪里?

国外to B 产品首页缩小后,依然可以快速辨认

国外的视觉设计好在哪里?

国内to B产品首页缩小后,辨认较困难

比如上图所示,国外的to B产品首页辨识度较高,即使缩小后,我依然可以轻松辨认出是哪一家的网站。而国内的to B产品(我找的都是国内顶级的大公司或行业知名公司)首页缩小后,辨识比较困难(尽管我对这些网站都很熟悉)。

三、品牌感强(看首屏)

国外网站让我感受最深刻的,是对品牌的塑造和表现力(第一屏非常重要)。Basho的传统日式风格,Docker的海洋主题,Foundation长两只角的小萌兽,Heroku的紫色+干练线条,Cloudera的抽象图形及色彩运用等等,都给我留下了深刻的印象。

国外的视觉设计好在哪里?

对色彩、图形、设计元素的大胆想象及运用,在不拘一格之间又形成了默契的行业共性。共性中充满个性,是国外to B网站给我的整体感觉。而这种专业及个性的表达,建立在对品牌的深刻理解及创造发挥上。这是目前国内的设计师比较欠缺,并且不够重视的地方。国内的设计师 往往接到需求,看看竞品就开始设计了。正是这个关键环节的缺失,造成了设计结果的差异。

四、符号运用(看细节)

很多to B网站的图标也具有这个特征:共性中充满个性。比如Palantir(知名大数据网站,估值达200亿美金)的图标类似原子的运动轨迹;Heroku的一 组图标外形全是六边形;Foundation的图标出现了我们熟悉的网格线和尺寸标记,意味着严谨缜密;Basho的两组图标分别运用了传统水纹元素及折 纸元素,向世界宣告这是一个来自亚洲的网站。通过统一符号的延展运用,既突出了品牌感觉,又让人感到独具匠心,妙不可言。这样的网站你怎么可能记不住呢?

国外的视觉设计好在哪里?

几个国外to B网站的图标

再看AWS,无处不在的曲线分割元素让很多人记住了它的页面,即使有些人很讨厌这种风格。

国外的视觉设计好在哪里?

AWS 首页部分位置

当然,品牌符号(与品牌含义相关的特定元素符号)与网站整体的品牌设定是分不开的。比如Palantir可能是想强调精尖科技,Heroku想通过 六边形强调稳定和科技(六边形类似化学元素符号),Foundation想强调严谨,Basho想强调日本的传统文化,AWS想强调云计算的弹性、灵活等 等。

所以这里有一个小技巧:明确你的产品想突出的感觉,设定与之相符合的元素符号并在适合的位置反复出现,个性感和品牌感就会呼之欲出,设计质量立刻提升一个台阶。

四、元素呼应(看联系)

看看Cloudera吧,首页不同部分(首页三屏中不同部分的截图对比)的关联是不是感觉很像是电影中的隐藏剧情般引人入胜呢?黄、蓝、绿三种颜色的不同处理方式(交融、分离、叠加)构成了整体页面既统一、个性、又有巧妙联系的视觉语言。

国外的视觉设计好在哪里?

Cloudera首页三个部分的对比

再看看Basho,无处不在的呼应:不管是图形、元素还是图标,并且不同页面风格也高度统一。

国外的视觉设计好在哪里?

Basho各网页截图对比

元素呼应对设计师的要求非常高,需要静下心来去思考、尝试以及创新。首先需要对产品有很深入的理解,然后在此基础上大胆想象及发挥,产出产品的个性 关键词,再通过一些专业方法赋予灵感,设定设计主题(品牌感强),然后通过反复试错以及细节推敲,逐渐明晰品牌符号的运用(符号运用)及关联方式(元素呼 应)以及表达手法,最后得到充满个性、超高逼格的作品。

五、更新速度(看变化)

由于我平时经常分析这些优秀的网站,所以我发现,每隔几个月,这些网站就会有明显的变化。而分析这些网站前后的对比,对我了解网站设计趋势有很大的帮助。另外我也从中明白,再好的网站,也需要不断更新迭代;而不是固守优秀成果,不思进取。这点对设计师来说非常的重要。

国外的视觉设计好在哪里?

Foundation首屏前后对比

国外的视觉设计好在哪里?

Foundation首屏图标前后对比

比如Foundation最近做了一次设计改版。在这次改版中,文案和品牌内核没有发生变化(还是两个角的小萌兽,还是之前的图标内容),只是设计 风格改变了。从中可以看出品牌内核的重要性及稳定性。新的设计风格更加现代、简洁(新版图标外沿依然有和头图呼应的品牌符号,截图可能看不清楚)。

最后,大家一定想更加具体的了解设计高逼格、有个性、品牌感强的产品设计方法及流程,如果有兴趣的话请关注我下一篇文章。另外我相信,这些方法也同样适用于to C的产品。如果你能理解我所讲的思维及方法,设计质量一定会有突飞猛进的提升。

#专栏作家#

刘津,个人博客:blog.sina.com.cn/legene。人人都是产品经理专栏作家,畅销书《破茧成蝶——用户体验设计师的成长之路》作者,阿里巴巴交互设计专家。毕业于北京大学数字艺术系,先后就职于网易、阿里巴巴,积累了丰富的互联网设计经验。

本文原创发布于人人都是产品经理,未经许可,不得转载。

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

(0)
CatherineCatherine
上一篇 2017-06-01 00:42
下一篇 2017-06-01 02:25

相关推荐

  • [梁宁·产品思维30讲] 02 用户体验与结婚教练

    案例:用户体验与结婚教练来自梦马旅游MENGMATOURISM00:0018:30用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观...

    2018-04-06
  • 交互设计师的60日计划之第七天

    心情由好转糟,由糟转好的一天。 20150803 每次跟老大过方案都深深的意识到自己的不足上周基本已经敲定的方案等这周老大回来拍板,跟老大一过就是一堆问题。你的交互稿是要怎么看?跳转关系是怎么样的?这个图文混…

    交互专题 2015-08-20
  • APPLE WATCH 中文手册:WatchKit使用iOS语言

    WatchKit应用扩展可以使用绝大多数iOS技术。由于应用扩展和应用还是有一些不同,因此某些技术的使用可能会受到限制,或者不受到推荐。下面是决定是否使用特定技术的准则: · 避免使用需要用户权限的技术,比如Core …

    2015-06-15
  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • 网页设计中的极简风格—无的力量

    作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

    2017-05-25
  • D4-交互设计工作困惑答疑

    作者:飞阿婷(公众号:飞阿婷的交互设计生活)自我成长1.面试攻略为什么强调说,不能把自己的不足归咎于之前公司没给自己带来很大成长?抛开你有推卸责任的人品问题来说,其实还有科学依据证明很多事情都是可以事在人为的。费斯汀格法则:“生活中的10%是由发生在你身上的事情组成,而另外的90%则是由你对所发生的事情如何反应所决定。”我的理解是那10%就是不受我们控制的自然发生的事情,而90%就是我们面对这10%的事情选择接下来要做的事情,而这个选择...

    微信热点 2018-04-12
  • 关于工作效率的心得分享?(拖延症患者必看!)

    来源:Tencent CDC 作者:milaky 这是去年11月底在小组里分享过的工作效率心得,在这里也跟大家分享一下工作“快”感哈哈。我相信大家应该都有过工作效率的些许烦恼。而这个效率啊伴随我很长时间的痛苦。每每到PDI的…

    2014-09-21
  • 『APP交互设计趋势』2015年移动应用的开发趋势,交互设计师需要了解到是设计趋势!

    硬件性能的提升,新技术的出现都是影响移动应用发展的重要因素,而最近几年里,这两个方面都有着不小的进步。从不断增加的屏幕分辨率,64位处理器,到支持所有平台开发的HTML5技术逐步成熟,每个方面都不容小觑。不…

    2015-02-05
  • 译文 | iOS 10 人机界面指南(二)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?

    2017-05-22