如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

笔者之所以从品牌设计的角度分析这个鹅厂家族新成员，是因为一款新产品的品牌设计在产品从0-1过程中扮演非常重要的角色，它关系到用户对新产品的认知与心智。

体验完 MOO音乐，我发现：移动产品品牌设计不仅要充分考虑视觉表现层，还要综合考虑战略、理念、内容、交互等多个方面。

同时，品牌设计是一种「求同存异」，「同」是保持对战略、内容、用户习惯的继承性，而「异」是相比竞品作出的差异化设计。本文就从继承性和差异化，这两个维度为你分享 MOO音乐的品牌设计。希望这种分析方法能够为你的品牌设计提供帮助。

一、继承性

1. 对新形象IP的继承，培养了用户心智

从启动图标和界面很容易看出，MOO音乐的品牌主色是黄色，背景色及辅助色基本是以黑白灰为主。

MOO音乐之所以采用这种配色方案，不仅是为了突出产品氛围，让人眼前一亮，还有可能是对腾讯新形象IP品牌的一种继承和延续。

怪奇鹅IPENGOO，腾讯集团新一代形象IP品牌，代表着一种自我突破，不断创新的精神状态。

我们希望能像魔术师一样，以经典企鹅形象上提炼出的极简鹅脸元素，为大家创造出充满趣味、创新、时尚和脑洞的产品风格和内容，能唤醒每个用户自动发出好感电波是一件很棒的事情！——怪企鹅IPENGOO官微

每位音乐家都不是一颗孤独的星球，他们保持独立又彼此相连，在他们的探索下，音乐潮流才不断推陈出新又一脉相承。

保持探索，对先锋与经典抱以同样的敬意，所以我们创造了MOO：音乐即自由

MOO Music，Life is MOOO beautiful。——APP Store MOO音乐介绍

IPENGOO（怪企鹅）的理念是：

• 优质内容连接符号
• 传递互联网精神
• 代表自我突破
• 不断创新的精神状态

可见，「连接、传递、突破、创新」这些新形象IP理念在 MOO音乐的启动图标、品牌理念、交互手法、推荐歌单上都有所体现。

因此，MOO音乐很可能是腾讯新形象IP品牌影响力里的一种尝试。

此外，MOO音乐的品牌色也很有可能是对腾讯旗下年轻娱乐产品品牌色的一种继承。

2. 对音乐元素的继承，提升了产品的同理心

Sympathize（体察和同理心），可以帮助我们去理解事物表面背后的本质，得到和理解设计的微妙细节，这些本质自然的元素不只是逻辑上的，更是可以被感受的。——深泽直人

说到音乐本质、自然的元素（不是曲风），我们会联想到黑胶、唱片、专辑、音波、调音台、乐器、Live、乐谱、Launchpad等。这些音乐元素能拉近 APP 与用户之间的距离，营造沉浸式的听歌体验，从而提升产品的同理心。

比如专辑封面的轻拟物化设计，播放时音波的、背景图片和短视频等等。

3. 对用户行为的继承，降低了学习成本

当我们在为一款新产品设计交互时，需要充分考虑目标、场景、用户这些基本因素。我们通常会考虑并兼顾多数目标用户的使用行为和习惯，为新产品设计交互方式。

所以当用户看到熟悉的元素时，会很自然地知道如何去使用，降低了新产品的学习成本，这就是我们所熟悉的「Don’t make me think」。

MOO音乐的首页PLAY页，采用的是音乐+短视频（有时候是图片）的方式，当很多用户看到这种熟悉的界面形式时，已经本能的去上下翻页、单击播放/暂停，左右滑动调整进度更是再熟悉不过。

另外，MOO音乐的歌单在产品初期功能里占据了很大篇幅，因为最契合用户听歌行为场景的是歌单。

二、差异化

说完 MOO音乐在品牌设计方面保持的继承性，下面来说说它不同于竞品的差异化设计，主要表现在品牌理念、视觉氛围、交互手法。

1. 品牌理念

从 APP 的这4张欢迎页就可以看出 MOO音乐的品牌理念和调性了：经典、创新、前卫、独立。

从目前的版本来看，MOO音乐还是一款满足小众口味、专注听歌的音乐APP，但 APP 通过4张有代表性的欢迎页，将 APP的「小众」设计得「出众」，很好地表达了产品的品牌理念。

2. 视觉氛围

说到产品品牌的差异化，不得不说视觉层面的设计，毕竟视觉表现层是用户体验5要素里最具体的。

MOO音乐提供两套视觉风格，默认是品牌黄色+BLACK，另一套则是品牌黄色+WHITE，笔者觉得默认的 BLACK 更有特色和沉浸感。

字体风格方面，标题类文字（PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST）都是大写的非衬线英文字体，欧美范十足。

3. 交互手法

调整进度的交互

主流音乐APP，是通过一个进度条和一个圆点来调整播放进度，而 MOO音乐将播放页面下方声波区域作为调整进度的热区，通过明暗的对比来表现播放进度。

虽然这种交互方式在腾讯自家短视频微视APP 中也存在，但 MOO音乐还是作了细节上的处理。

切歌的交互

通常情况下，在音乐APP 播放页面的其他页面，都有一个控件让你随时可以切歌，甚至是收藏，查看播放列表。

MOO音乐将切歌控件设计成了黑胶+滑块，切歌时只需向右滑动，而且 iOS系统还会伴随震动反馈。这个微交互设计得蛮有意思，这让我联想到胶卷相机拍完一张，然后拨动卷片扳手的机械反馈感。

三、几点建议

目前 MOO音乐在 APP Strore 里才第2个版本，细节上的体验不可能一步到位。

笔者借此机会向开发者提一点个人的建议，仅供参考。

1. 歌曲播放

希望当前播放的歌曲与背景短视频或图片有一定的关系，比如系统可以根据歌曲的曲风、类别等标签，自动推荐匹配相关短视频和图片，让歌曲与背景环境更协调。当然，也可以让用户自己设置推荐或随机。

在 PLAY页面切下一首歌时，希望显示歌曲正在加载的状态，底部的音波区域好像可以作一些文章。

2. 视频评论

（iOS）歌曲评论页里的评论输入框常驻在页面底部，但视频评论页的评论输入框没有常驻，而且滑到底部时，不太容易滑到顶部，可能是小BUG。

3. 切歌控件

（Android）轻触切歌控件里的暂停按钮后，黑胶旋转的角度被重置了。希望能与 iOS版一样，暂停后黑胶旋转的角度不被重置。

4. 开通会员

APP 默认的会员价格是18元/月，若勾选了到期自动续费，则价格是15元/月。

虽然这2个价格都不便宜，但相对来说，自动续费的价格更有吸引力，但这个相对有吸引力的价格却需要用户主动勾选「自动续费」才能看到。笔者建议将这2种价格都显示出来，通过单选按钮的形式去交互。这样，用户很容易就会发现自动续费的价格优势，毕竟与18元相比，15元就不怎么贵了。

总结

MOO音乐于11月初发布在 APP Store，网络上比较多的评价是「抄抖音、抄乐趣、抄Spotify、鹅厂又抄了……」。

但作为设计师，笔者希望我们将关注点放在设计层面，去客观的评价一款APP，不要因为别人的评价而忽略了一些有品质的设计。

当我们仔细体验交互和视觉的细节后，会发现鹅厂的设计是有很多地方值得我们学习的。

最后，面对主流音乐APP、短视频APP、Spotify、Apple Musici、乐趣……MOO音乐既做到了对腾讯新形象IP、音乐元素、用户习惯的继承性，又做出了一些不同于竞品的差异化设计。这套「组合拳」已经打出了这款音乐APP 的品牌形象，希望这些内容对你有启发。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

按钮在UI设计中是一种常用的UI控件，在界面中作为主要的行动点，引导用户进行相应的操作，它在用户和产品的交互中承担着重要的作用。

按钮设计看似简单，但是如果想要更好的交互体验，引导用户进行相应的操作，提升产品的转化率这仍是我们需要研究的问题。下面小编将从按钮功能类型和设计要点两个方面进行分析。

一、按钮功能类型

按钮的功能类型往往决定了一个按钮的设计方式，是需要强调还是需要弱化；文案是需要强引导，还是直接阐述功能；按钮上是放图标还是不放图标等。按钮根据功能的不同，可以分为不同的类型，主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。

1.行为召唤按钮

行为召唤（CTA）按钮其目的是诱使用户采取某些操作， 从而提高产品的转行率。简单来说就是通过设计诱导或激励用户点击按钮，例如立即购买、订阅关注、利益诱导、文字诱导等。

1）诱导购买

当行为召唤的目的是诱导购买时，按钮的设计不管从颜色、形状、样式都需要突出。让按钮看上去可点击，让用户进来第一眼就能知道该按钮的用途。如下图所示：

以美团外卖为例，该按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角，在样式上加入投影同时加入送餐员的元素，配上小红点，能够清晰的给用户传递出可点击部分有去结算、送餐员。另外加入价格诱导，让你可直观看到优惠了多少钱，促使你进一步操作。

以淘宝详情为例，该按钮是一个组合按钮，由加入购物车和马上抢以及店铺、客服、收藏等组成，作为行为召唤按钮我们可以明确的看到，不管从颜色、形状、样式都能够让我们快速注意到。

2）订阅关注

当行为召唤的目的是订阅关注时，其重要程度相比诱导购买低很多，但是在设计时我们仍然需要考虑一个问题，这个问题可直接决定该按钮大小、样式等，这个问题就是需要根据产品目的判断是诱导用户订阅关注重要还是让用户阅读内容重要。如下图所示：

当内容重要时，按钮的设计需要弱化处理，以优酷视频的发现页和星球页为例，这两个页面很明显是以内容为主的界面，在设计时直接弱化了按钮形式，让按钮和整个界面相融合，但是按钮设计的原则是让其看上去像按钮，因此当按钮只是文字时可以加图标进行引导比如优酷视频发现页，也可以加入弱底纹进行引导还能让界面看上去整洁，比如优酷视频星球页面。

当订阅关注重要时，按钮的设计需要强化处理，以橘子娱乐和土豆视频为例，橘子娱乐采用粗描边渐变按钮，同时加入图标进行引导，具有较强的视觉引导作用，很容易唤起用户的关注。土豆视频采用黄色填充加图标引导，在视觉上和产品内容形成强烈对比，明显的以关注为主的界面。

3）利益诱导

当行为召唤的目的是利益诱导时，该按钮设计根据重要程度较高，因此在设计时可以考虑颜色、形状、加入图标、诱导文字等设计方法。如下图所示：

以大众点评为例，其领奖按钮明显比赚积分的层级高，因此为了突出领奖按钮采用了色块设计的样式，同时赚积分按钮采用描边设计进行弱化处理。

以腾讯doki为例，其打榜页面冲榜的重要层级较高，因此在设计时不仅采用了色块、加入动效图标、同时还加入了诱导文字，让按钮更明显同时诱导用户点击，其他去浏览按钮则采用描边样式弱化处理。

4）文字诱导

文字诱导简单来说就是通过文字，诱导用户进行下一步操作，多用于空页面、活动页面中，因此在设计时采用简单的色块填充即可，如果该页面为活动页面也可增加渐变或投影样式，让按钮更有空间感，进而突出按钮。如下图所示：

以得到为例，当你还没有学习计划时，它会对你进行提示“开始制定学习计划”，同时其按钮采用重要程度较高的色块+投影的方式，诱导用户点击。

以大众点评为例，当你还没有攻略时，它会对你进行提示“我也要创建攻略”，同时其按钮采用渐变填充的方式，诱导用户点击。

2.悬浮按钮

悬按钮浮是 Android 应用中最常见的一个控件。不过随着Android和iOS规范的不断融合，在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用显眼的颜色，以抓住用户的注意力。同时它应该是积极正向的交互，比如创建、分享、探索等，同时并不是所有页面都需要加悬浮按钮。如下图所示：

以UC浏览器为例，悬浮按钮在订阅页面的右下角出现，将按钮和界面结合很容易看出创建内容的意思，同时点击按钮还可呼出图文、视频等操作图标。

3.标签按钮

标签按钮往往呈多个出现，多使用在二级导航或条件筛选下面；以及表单页面作为切换条件选中。因此在设计样式上有选中状态和默认状态，同时其重要程度较低，在设计时不能喧宾夺主，需要弱化处理。如下图所示：

以支付宝为例，它主要用在投保的表单页面，其主要目的就是一个切换条件，重要程度远不及我要投保按钮，因此在设计时默认用的描边处理；选中采用淡淡的色块。

以转转为例，它主要用在导航下方，其主要目的也是切换条件，用户主要操作是看下方筛选出的内容，因此在设计时也进行弱化处理。

4.表格按钮

表格按钮也就是由一个白色网格加文字组成的按钮，从视觉上看和页面融为一体，特别不突出。因此多用在个人中心中不太重要信息或者不想让用户操作的退出登录界面中。如下图所示：

以爱奇艺为例，在我的界面中，关于我们和退出登录都是用的表格按钮，由于关于我们是不太重要信息，退出登录又是不想让用户操作的内容，因此采用表格按钮最为合适。

5.命令按钮

命令按钮也就是该按钮具有明确的指令，多出现在弹框中，通常会有一个文字或2个文字出现的情况。其要求是文字语义要明确，尽量不要用确定、好的、要等词汇，同时根据用户右手操作习惯居多，因此将重要的按钮放在右侧。如下图所示：

以京东金融为例，左图是京东金融退出的二次确认页面，右图是我调整文字之后的页面。我们说到文字需要表意明确，因此将确定换成退出后表意更加直白，降低用户理解度。

6.开关按钮

开关按钮也是我们很常见的一个组件。表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。当按钮开启后可能还会带来其他的相应操作。开关按钮最常见的就是手机设置中，但是也有很多APP将其用到界面中使用。如下图所示：

以美团外卖和小猪短租为例，它们在提交订单页面时都采用了开关按钮，同时在小猪短租中，当按钮打开底部会将“您可再入住完成10天内补全信息”进行展开显示，提示用户去填写。这种点击展开的操作还可增加更多的功能相关内容。

二、按钮设计要点

1.根据产品为按钮选择适合的形状

在按钮设计时，需要根据整个界面风格设计合适的按钮，按钮样式主要有直角、小圆角、全圆角三种样式。

直角的含义：严谨、力量、高端。适用于金融类、奢品类产品中，让产品给人严谨安全、高端的感觉。例如寺库。

半圆角的含义：活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类的产品中，提升亲和力，拉近用户的距离。例如土豆。

小圆角的含义：稳定、中性。适用于用户跨度较大的常规类产品中，例如微信。

以寺库、微信、土豆为例，寺库是品类电商，因此在设计时需要提现高端，因此在按钮设计时采用直角设计。而微信的用户群体上到七八十岁，下到几岁其年龄范围广，因此采用稳重的小圆角较为稳妥。土豆短视频其用户群体较为年轻活泼，因此采用全圆角较为适合。

2.使用合适的状态

在部分界面设计中需要考虑按钮的不同状态的设计，从而提高用户操作流畅度。移动端完整的系统按钮可以分为正常状态、按压状态、禁用状态。

其中，正常状态和加载状态展示的是APP的主色；按压状态在正常态的基础上叠加不透明度15%的黑色#000；禁用状态是设置灰色或者将正常态设置不透明度45%，该状态适用于提交界面中使用，比如登陆注册、转账等。如下图所示：

以京东金融为例，当未输入转账金额时，按钮禁用为灰色，当输入金额时按钮为正常状态。不过随着互联网的发展，宽带速度不断的提高，按压状态慢慢被抛弃，他存在的意义不像以前网络不发达的时候，点击还需要时间反应。

3.提供恰当的反馈

当用户点击按钮时，他们希望界面可以给些恰当的反馈。如果没有任何反馈，用户会以为系统没有收到他们的操作，然后就会重复点击。这种行为常常导致多个不必要的操作。如下图所示：

以土豆短视频为例，当点击关注时为了避免用户点击没有反应的情况，可在按钮上添加加载状态，当关注成功后图标状态改为禁用状态，同时文字变为已关注。

总结

按钮设计看似简单，但是如果想要更好的交互体验，引导用户进行相应的操作，提升产品的转化率这仍是我们需要研究的问题。本篇主要将从按钮功能类型和设计要点两个方面进行归纳总结。

按钮功能类型：主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。在使用我们需要根据对应的功能和重要程度选择适合的设计。

按钮设计要点：主要有根据产品为按钮选择适合的形状；使用适合的状态；提供恰当的反馈这三大注意要点。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、xSpace产品背景介绍

CCO-集团客户体验事业群是一个为阿里平台商家、阿里经济体提供售后服务能力的部门，励志于赋能阿里电商生态圈内的售后服务体验，提升消费者对平台的满意度和 NPS指标。xSpace产品是一个帮助客服人员处理消费者咨询、投诉、维权等场景的一站式售后服务工作台。现已经在阿里生态圈中多个 BU 中应用，成为平台服务中不可缺少的 CRM产品。

二、Lazada场景中面对的挑战

2017年，阿里收购东南亚电商巨头 lazada 成为阿里商业生态的重要组成部分。CCO 作为负责经济体售后服务体验的部门，需要向外输出阿里服务的价值和能力。因此，我参与的 xSpace产品海外场景孵化是其中重要的一个能力输出。

△ 产品功能和业务覆盖范围

三、国际化项目遇到的问题

国内产品出海，都会面对一些通用问题，例如：产品设计开发都在国内；业务和真实用户在国外接触机会少；文化背景、时间、空间上都或多或少存在差异。

我们熟知很多设计方法，例如 lean UX，design sprint，hook model，lean canvas 等，但是如何在国际化的挑战中寻找最合适的方法，是我在国际化产品项目中遇到的困惑。

回想项目在推进的过程中出现过的一些困难，例如：

• 解决方案似乎缺乏终端用户输入；
• 产品owner太多，设计比较难收口；
• 设计工作的重要性被认为低于功能迭代；
• 调研之后经常没有后续action；
• 在项目初始阶段就被要求产出高保真设计方案。

是否有一种全面的国际产品设计和开发模式，既可以转化产品能力又可以科学的度量海外用户的体验？

为了解决所面对的困惑，我尝试将以往经验和项目的实践相结合，梳理了 B类产品国际化体验设计实践模型。

本篇文章，我将以项目的实践为例子，简述设计师在面对未知的商业环境下怎样应用「精益创业」和「设计思维」将设计与商业结合，实践设计转译和推进落地。我将这次设计实践称为「国际化全景设计框架」探索。

△ 设计思维、精益创业和敏捷开发之间的关系

四、国际化项目实践

根据项目不同时期的侧重点，我将把整个项目的实践拆分为3个时期进行介绍，分别是探索期、实验期和开发期。「设计框架」中包含的设计方法也将围绕不同时期的侧重点进行展开。

△ 国际化设计实践项目分期

1. 探索期

当我们对海外场景一无所知的时候需要应用「设计思维」对目标进行分析。在项目启动初期，由于不清晰、不确定的需求导致产品设计存在很大的阻力。面对这样的情况，项目团队决定直接去到客户现场了解业务现状。设计师需要遵循「设计思维」，通过发现问题 – 定义问题 – 解决问题的思路，帮助项目快速明确目标。

收集用户输入，抽象产品场景：可以从「人」和「事」两个方面入手。

△ 设计思维在设计前期的应用

从「用户（人）」的维度发现问题，是为了理解业务人员组织架构；明确公司内部自上而下对产品期待；以及终端用户的核心诉求。我们主要是通过访谈和观察法进行数据收集，确保获得一手的资料。

△ 基于角色的前期调研

通过调研我们发现：Lazada服务团队与服务BOP 之间的管理关系并没有很紧密，在服务指标整体的管理上面相较于淘系平台要求较简单。但是也同样存在客服流动性大，不稳定等通用问题。而一线客服在日常使用产品的过程中，则面临系统割裂操作效率不高等问题。

从「事情（业务）」的维度发现问题可以快速理清业务流程和业务边界。

在准备出发前，我结合国内项目对电商服务流程的理解，简单设计了业务调研的框架和范围。通过访谈的形式进行归纳和补充，有目的有范围的了解业务的共性和个性。

△ Lazada商业画布，明确业务目标和范围

通过「人」和「事」角度的资料收集，我们可以归纳出大部分的产品使用场景。对产品使用场景的抽象理解，可以让设计师更深入了解业务，通过对用户的移情和以往的经验做第一轮体验判断。

第一轮体验判断：定义问题，明确产品落地思路和节奏。

通过对访谈和观察内容的梳理发现，目前首要解决的问题是系统迁移、信息内容和渠道扩展融合的问题。经过评估和判断，现有产品有50%的功能可以被复用，考虑到效能成本的因素，因此就有了系统整合场景适应的概决思路。

△ MVP功能范围拆解思路

通过以上业务方面的调研分析，接下来将进行产品执行落地阶段的实验和分析。

2. 实验期

有了解决问题的思路，就可以根据预先判断的方向快速产出概念原型并进行实验。与此同时，有目的性的针对市场竞品进行分级调研，可以辅助加深对产品需求设计的理解。把众多的竞品分为核心竞品、重要竞品和行业竞品，主要针对3个核心竞品进行调研：这些调研可以帮助打磨出更合理的设计策略。

△ 竞品分析思路和竞品分级

从调研发现，通常意义上国外的 B端产品似乎看起来相对「简单」，这可能要归功于他们在产品商业化推进过程中使用的策略，使得 B类产品在获客体验全流程表现的比较成熟。产品获客阶段的体验感知也是我们的 B类产品在 PK 商业化产品的过程中一个重要参考。

研究竞品的设计策略，可以帮助项目在之后的实践中找到最适合的策略应用在具体的设计方案中。

△ 设计策略、设计原则总结

在这个试错的阶段，整个项目团队需要保有「精益创业」的思维：接触并持续地收集用户对产品的反馈和意见，用真实声音去验证产品方案和设计策略与市场的贴合度，并及时调整项目方向。多给自己试错的机会，就像「精益创业」的作者所说的：失败是学习的先决条件。

3. 开发期

通过前期的调研和实验，进入开发期的项目应该已经明确了其目标，在这个阶段的主要任务是根据产品和业务拆解设计目标，分解设计输出，度量产品体验。

拆解设计目标

需要结合产品的生命周期进行设计目标的拆解。我们项目的目标就是成功迁移产品。并且产品目前现有1.0版本已经在公司内部运营了2年，基础功能已经覆盖。但为了结合 Lazada 的业务场景需要更深一步的功能定制。结合现状，设计在不同的产品阶段有以下如图所示的策略分层。

△ 根据产品周期的不同阶段进行设计目标的拆解

分解设计输出

在 MVP 功能覆盖阶段，设计输出主要包括对设计需求的探索和转译。在设计转译的拆解思路上，我主要关注通用功能和定制功能之间的融合和落地。抽象来看，从0到1的融合转译过程就像是一个由大到小再变大的沙漏。

总汇产品功能→收集国际化产品需求→需求分类→建立映射→提出解决方案→评估成本→设计落地

△ 设计思路抽象

其中有一些关键节点需要着重把握：

• 总汇产品功能：了解现有产品功能大图，目的是快速理清与新业务场景建立映射关系。通过业务分析，明确需求范围，将需求转化成产品功能。（前面提到了有多种手段可以收集产品需求）
• 需求分类&建立映射：项目团队内根据功能模块优先级，制定设计迭代计划。与之前的「产品功能大图」匹配作为建立映射的依据。
• 提出解决方案&评估成本：这个阶段主要的设计行为是做设计的收口决策，需要设计师更好的收口不同功能模块的产品诉求，达到跨国内国外通用功能保持一致的产品体验。

△ 交互demo

度量产品体验

作为 B类国际化产品项目，最大的痛点就是距离。设计团队与一线用户存在时间、空间、文化上面多种多样的差异。而用户的反馈则是体验优化的重要输入，如何在项目前期没有数据监控的情况下度量产品体验，是国际化设计中所普遍存在的痛点。

因此，除了常规的小范围可用性测试，我在项目实践过程中还尝试应用一种适应于国际化产品的体验度量方式——SUS（system usability scale）。SUS量表的优点在于：

• 在样本量有限时，SUS量表可以得出较可信的数据结果。
• SUS分数可以横向对比，了解自身产品与行业竞品对产品的差距。
• SUS量表不仅可以衡量「usability」同时也可以衡量「learnability」，对于处在系统迁移场景的产品度量是比较适合的。

用户UAT→SUS测试准备→量表发放→量表回收分析→体验优化提案→设计落地

△ 国际化产品SUS量表回收分析

配合产品 UAT 计划，安排一定数量的可用性量表的投放和回收，通过计算可以获得准确性高达95%的 SUS分数。该分数可以和行业的 benchmark进 行比对，评估出现有产品的弱项分数。这种科学的轻量且快速获得用户反馈的方式可帮助体验设计师找到优化提升的方向，进行专门的走查和分析。

五、设计小结

总结一下在远离客户的国际化场景中，设计师如何拥有一个全局的视角，科学的推进设计进度和度量产品体验：

在第一阶段——探索期，应该针对项目的侧重点选择科学合理的设计方法，获取一手的产品需求输入，抽象出产品的使用场景作为接下来研发产品的「实验素材」。

在第二个阶段——试验期，除了对项目竞品的全链路竞对研究之外，设计师和项目团队都需要有不怕错的试错精神，应用「精益创业」的流程快速验证方案、圈定项目发展策略和思路。

在第三个阶段——研发期，设计师需要突破国际化项目普遍存在的时间、空间等等限制，选择最优的设计方法指导设计产出和度量设计方案。

以上就是我在实践 B类国际化项目中的一些经验总结。欢迎大家多多交流，相信在 B类产品国际化的道路中，还有非常多可以探索的课题等着我们去思考。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、配色常见的误区

很多人之所以怕配色，或者说配不好色的原因是自己一直深处误区中而浑然不知，接下来希望大家不要对号入座。

误区一：配色的过程在整体之前。也就是常说的先配色，后设计。

误区二：只会配不会选。这是最常见的一种，只会在有基础色或者主色的前提下配色，而不懂得选一个符合整体的基础色远比配色更重要。

误区三：被理论所局限。配色的过程是偏感性的，理论虽然没错，但是它只是辅助提供一种方向的，而不是完全要依靠理论去配色。

接下来就继续今天的主题：色，从哪里来？也就是基础色应该怎么选？

二、颜色来源 —— 主体

在设计中，主体也就是画面中最重要的部分，它可以是产品、模特、抽象图形等等，基础色来源最常用的方式就是在主体身上提取，可以是主体中比重较大的颜色，这样有利于主色与主体形成更强烈的呼应关系，也可以是比重相比较小的颜色，这样在形成呼应关系的同时，拓展性更强，下面举个例子：

假如我们在这个人物的基础上去选背景的基础色，我们就可以用到这里说到的理论：基础色来源于主体，那么我们可以有哪几种选色的形式呢？下面我们继续看：

配色形式一：将主体整体比例最大的颜色作为主色，整体在色彩上与主体形成很强烈的呼应关系，这样做的目的在于整体很和谐、舒服，易于接受，画面更统一，整体视觉冲击力偏柔软一些。下面看另外一种形式：

配色形式二：将主体整体比例较小的颜色作为主色，同样整体在色彩上也与主体形成了一定的呼应关系，而正是因为主色是主体比重较小的颜色，这也使得画面整体在于主体形成呼应关系的前提下，也拉开了主体与背景的层次，整体视觉冲击力增强，画面统一性减弱，整体性并没有因为主色的改变而降低。下面尝试将文字的颜色也稍加改动：

不难发现，无论上面哪种主色的形式，配黄色字都很融合，且都增强了视觉冲击力。其原因在于画面整体颜色与主体都形成了呼应关系，使得配色不会给用户一种很突兀、毫无依据的感觉。而这种形式的选色在工作中也是用到最多的，比如：

其实，这种通过提取主体色作为配色参考的形式在接受程度上是很高的，通过搭配一些点缀色，整体上也不会给人一种很单调的视觉感受；利用主体选色的配色方式是将原本有可能茫无头绪、感性的配色工作，转化为一种可以有所依据、有所参考的配色技法，同时也能提升一定的工作效率。再举个例子：

三款牙刷，三种不同的主色方案，但是每一个给人的感觉都很舒服、和谐，呼应明确，这就是提取主体色方式的好处。

三、颜色来源 —— 风格

不管是做海报还是页面，在最初都要确定一个风格路线，然后围绕确定好的风格选材、选色、搭配主体等。那么很多情况下，确定风格也就等于间接性的确定了一个选色的区间，所以结合风格特征选色也是一种很实用的方式，比如我们要做「狂暑季」风格的专题页，那么在用色方面就要避免大面积暖色调用色，而要着重使用冷色调的颜色，目的很简单：大面积的暖色会给人一种热闹、狂热、张扬、温馨的感受，和暑季需要清爽、降温的感觉不相匹配，所以我们会尽可能采用主色冷色调的用色形式，搭配一些辅助色、点缀色，比如：

这些都是依据风格最直观的选色形式，这样做的目的是将整体用色尽可能的贴合主题风格，同时再结合主体选色的形式，将配色的过程尽可能做到有据可循。风格选色的形式在日常工作中也是很实用的，比如：促销，我们会用红色、蓝紫色、黄色的用色形式；春节，则是以红、黄为主；七夕，多以紫色、红色为主；暑期购，多以蓝色、青色、绿色为主。比如：

这些海报的配色形式很大程度上是依据风格来决定的，这样的选色方式也不会显得很突兀，且扩展性相对更高。

四、颜色来源 —— 文案

做设计目的是服务于商业，很多时候我们都要围绕文案、产品去制定风格、主题，所以选色同样可以参考文案，从文案中提取关键词，依据关键词同样也可以提取相对应的颜色，比如：

文案在一个画面中的重要性也是很高的，因为用户在不看文案的前提下理解设计画面速度是相对缓慢的，所以文案结合画面的方式能够大大的提升用户对整体的理解速度，也就是捕捉信息的速度，将文案与画面很好的结合在一起也是设计师所必备的技能，这样做的目的在于让文案与画面形成视觉上的呼应，也更利于视觉信息的传递。

五、来源 —— 主体反色

前面说的大多都是通过颜色找整体的呼应关系，这样做的目的是让画面整体更和谐、整体性更强。而还有一种选色的形式，即以主体颜色的反色作为主色调，也可以理解为：主体比重较大颜色的对比色或间隔色作为主色。比如：

将主色和主体色通过对比色或间隔色的关系拉开对比，目的是让主体在整个画面中的视觉形象更加鲜明，视觉感受更加强烈，但是要注意的是：在选反色时，尽量选用主体色中比重较大颜色的反色，这样才能起到强烈对比的效果。

再说下点缀色，点缀色的作用很大程度上是丰富画面整体色感的，它的用色比例只占画面整体的5%~10%左右，点缀色的选色很多时候是画面主色的反色，目的是让画面整体色感不显得单调、缺少变化，同时也有丰富画面的作用，但是要注意不要大面积的使用，起到点缀、打破的作用即可。

总结

总的来说，其实配图的过程就是在配色，当一个画面的主体、风格、文案确定时，我们就可以依据这些进行选整体色，只有主色确定时才有必要进行下面配色的工作，而不是把配色放在所有工作之前。今天主要说的就是选色的几种常用方式，选色的过程其实也是在配色，配色合不合理要看整体效果，设计的整体感也是很重要的，凡事要做到有所依据。最后还是那句话，配色是感性的，理论是提供思路和方向的，两者相互结合才能把配色做的更出彩。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

页面打开方式作为链接产品路径的基础，在设计的过程中，或多或少都会遇到选择的困扰，尤其是产品功能复杂，层级较多时，如何让用户按照自己的意愿清晰的浏览信息，保持操作连贯性，是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中，团队对链接操作的打开方式产生了分歧，借此机会整理了一些案例与资料，就这个问题进行分析探讨，也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接，主要有按钮、icon 以及文字链接，设计中常用的打开方式则主要有以下三种：

1. 当前页打开

点击操作链接后，在当前的浏览器页面中进行内容显示与操作。

2. 新开页面

点击操作链接后，在浏览器中新开一个独立的标签页面，进行内容显示与操作。

3. 弹出框

点击操作链接后，在当前的浏览器页面中，弹出一个小尺寸的对话框，进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说最具争议的新开页面&当前页打开。在 HTML语言中，target目标有「target=_blank」和「target=_self」两种属性，分别代表「新窗口打开」和「当前窗口打开」，下图是这两个参数的属性描述。

从这两个参数的属性上来看，「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一，用户也形成了一致的习惯，但国内的形式则不尽相同，以至于一直颇具争议，不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论，可以听到两种不同的用户声音，并且都站在各自的角度阐述其道理。

举个例子，我们以同类型网站（淘宝和亚马逊）的打开处理方式进行对比，来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先，我们确定一致的功能场景：用户从首页中根据各种筛选条件，查找到心仪的商品。来看一下两个网站的处理方式：

可以看出基本是两个极端，差异非常明显，再来看个有意思的现象，亚马逊中国的商品搜索方式竟然又和淘宝一致了，难道链接打开方式的差异竟是中外用户习惯的差异？

这确实占了很大一部分原因，那么造成这种差异的原因主要有：

• 早期的 W3C标准不支持 target=”_blank”（HTML语言中，在新窗口中打开链接）的属性，国外互联网普及也比国内早，于是用户慢慢养成了习惯。
• 默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面，可以鼠标中键、按住ctrl点击链接或者右键新窗口打开，此时用户更有选择权，可以自己决定打开方式；如果默认新开页面，则让用户失去了选择权。
• 早期国内互联网发展较为浮躁，网站想通过新标签页打开方式，提高PV。
• 国内网络普及晚，部分用户尤其很多老年人不习惯甚至或许不知道，页中有个后退前进按钮、面包屑可用，新开页面便于他们的操作。

那么，淘宝中所有的页面打开方式都是新开吗？不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部，如此区别设计的原因我认为有：

• 用户的目的较为明确，查找对象确定。（用户想要查看的对象是确定的，如购物车中的产品，用户有明确的目标，找到链接打开页面即可，不像搜索查找商品，需要一步步缩小范围甚至比对查看）
• 链接入口常驻在网站的信息栏，用户可以随时切换，操作方便，且不存在重新输入的成本。

关于这两种打开方式，到底哪种操作更顺畅，确实难分高下，就跟「确定和取消哪个在左，哪个在右」是一种性质的问题，没有好坏之分，关键是要看在哪种场景下使用更合适。

新页面打开适用的场景：

• 页面内容没有关联性，且从逻辑上没有从属关系，相对独立。如：产品中的外链。
• 存在多页面「比较」的操作，需要经常切换。如：淘宝商品详情。
• 需要保留住前一页的操作不丢失。如：知乎上过滤出来的结果列表。
• 功能分支存在穿插，当路径发生交叉时，最好新开页面。如：产品内部的跳转链接，导致信息关联的层级发生改变。
• 具有辅助功能的操作。如：使用文档（PDF、图片等）需要来回参照。

当前页打开适用的场景：

• 流程性的功能页面，前后操作存在关联和影响。如：下单支付、按步骤新增。
• 同一层级内容间的操作。如：tab栏的切换。
• 同一路径中的操作，用户当前的操作会对主页的内容产生影响。如：编辑一个配置，用户操作完，会回到当前页查看结果。
• 用户具有明确目的性的操作，当前页有利于锁定用户注意力。如：淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重，如果就「用户体验」一定要分出个高下，我个人还是比较支持默认「当前页打开」，从体验角度分析，「当前页打开」略胜一筹的主要原因有以下两个：

• 尊重用户的决定。当前页打开，将更多选择机会留给用户（鼠标中键、按住ctrl点击链接或者可以右键新窗口打开），一个具有良好用户体验的产品，在用户做操作的时候，总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权，因为不同的人有不同的浏览习惯和使用需求。
• 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候，可以顺畅的知道、理解，并且能预料到将会发生什么，不会被分神，也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计，而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时，或许「不强制用户」才是最好的体验。因为我们面临的用户多样，电脑操作熟悉程度多样，因此不同用户对于打开方式的习惯也具有多样性，这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下，在当前窗口打开链接，不失为一个选择，尊重用户自己的决定，让用户对交互界面自主可控。

三、弹出框

弹出框（弹层）又叫模态对话框，是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上，避免了页面跳转。

弹出框通常是为了显示一个单独的内容，在不离开整体页面的情况下有一些互动，提供信息和交互。

如下图知乎中的「写想法」，用户可以快速的在弹出框中记录个人想法，记录发布后，很顺畅的回到之前的路径上继续操作，便捷，操作思路清晰。

△ https://www.zhihu.com/

现在很多产品中的新增、创建，也都会采用弹出框的交互方式，当然前提是在弹出框中编辑的内容不是很多，此时弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。

如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。

△ http://www.iconfont.cn

弹出框适用的场景：

• 内容简单，没有复杂的操作，且具有临时性。如：新增一个收货地址，进行简要的输入编辑。
• 更为详细的辅助说明，是对当前内容的快速扩展。如：缩略图，点击放大查看。

因此，弹出框可以较好的实现上下内容层叠的感知，不打扰用户的主路径，同时作为页面承载元素和用户操作的补充，起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系，进行适用场景举例，并总结每种方式的优缺点，方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然，以上总结也是基于我个人的理解与经验，没有统一的用法和标准，在具体设计实践中，仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师，如何规划用户浏览路径，是个需要严肃对待的命题。没有绝对的好与坏，但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

但是，每个人对「高级感」定义不同，它会受到个人审美、教育水平、成长环境、文化价值等因素影响。那么，这个被人们天天挂在嘴边儿的「高级感」到底如何定义，标准又是什么呢？

今天就跟大家分享下，我最近的相关思考。

一、什么是高级感？

关于「高级感」，百度百科上并没有这个词条，在一定程度上可以说明，这个词本身就是很难定义的。

我尝试着换个思维方式，看看什么是低级？低级意味着：多欲求的、简单的、盲目的。那么，反过来看「高级感」，大概可以解读为：克制的、的、特立独行的。

1. 克制的

说到克制，我想到了德国工业设计师 Dieter Rams，他的「设计十戒」中有提到「好的设计是尽可能的无设计」，体现出简洁、克制的重要性。

比如：无印良品，在「性冷淡风」的背后充满了对欲望的克制。

产品设计以更亲近自然的棉、麻、羊毛的材质配上木本、黑、白、灰色。不管是从造型，还是从用色上都极度的克制，但是给人高品质，很舒服的感受。

反而下图，高饱和度和纯度的配色设计，给人有一种反自然的，人工造的颜色的感觉，显得服装比较廉价。

那么，品及时尚圈的设计，又是怎么考虑呢？

可以看出，他们服装从简单利索的剪裁，到高级灰（莫兰迪色）的配色，正是我们所说的「克制」，给人一种奢华且高级的感受。

为什么克制的用色，给你高级的感受呢？因为，这样会削弱色彩对人情绪的影响，反而有治愈的能量，有一种颓废的性感。

下面这幅画，是意大利20世纪著名的版画家，油画家乔治莫兰迪的（莫兰迪色也是根据他的名字而来）。在他的画里，所有的色彩都渗入了灰色和白色调，失去了原本或艳丽或凝重的本色，柔和优雅，而又统一的混合在一起。用现在的话来说就是：克制、留白、极简。

目前很多服装设计、室内设计都在效仿这种配色方式，显得更有品质。

比如，今年热播的《延禧攻略》，一改以往流量电视剧那种高饱和度，艳丽的配色，犹如一股清流，让人眼前一亮，感觉把整部剧都带的高级了很多。

以上可以看出，克制的造型及用色、适当的留白、极简的画风，反而显得更加自信，从而给人传递出高级的视觉感受。

2. 的

人们常说，细节决定成败。其实，让人们感到「高级」的事物，都有一个共性：对细节追求。

比如，前段时间看快乐大本营，里面对《延禧攻略》中演员服饰的刺绣细节进行讲解，当时何炅用「很高级」夸赞。

我就在想，是什么触发了他评价「高级」。

后来发现，是因为剧中人物服装上的刺绣全是纯手工的。针法多样，包括复杂的手推绣、打籽绣、磐金绣、珠绣……而且，团队都是曾经参加过故宫文物翻修的匠人们。

为了无条件的贴近历史，这一件皇上的衣服花费了8个工人半年的时间进行制作。

因此，让何炅潜意识里感到「很高级」的，正是因为仅仅为了一部电视剧，在演员服装上耗费这么大的功夫，这种对细节的追求。

再拿科技产品举例，比如：iPhone，由于「对称设计」可能是人们能感知到的最原始的美，很多情况下手机受限于内部设计，很难在表面做到对称。

但是 iPhone 为了遵循「对称式」设计，投入非常多的人力去解决（上面），而对比三星Galaxy S6 的设计（下面），看起来就略显尴尬。

它们对产品每一个方面都精雕细琢，尽管用户不一定能注意到，这种工匠精神，让人们觉得苹果手机不仅仅是一款产品，更像是一件艺术品，同样给人高级的感觉。

3. 特立独行的

人类本能习惯于盲目追随、容易妥协。因此，独立思考、特立独行且自信的人或事物，常给人很感级的感觉。

比如，在网红脸盛行的今天，随便逛个街，都充满了浓浓的玻尿酸和欧式平行大双眼皮的味道。虽然并不丑，但是总觉得不够高级。比如，柳岩就评价过自己属于「低级脸」。

为什么超模那样高冷的脸蛋会给人一种高级感呢？

因为，她们有特色的五官长相，意味着不向大众主流审美屈服和妥协，而且非常自信。同时，高级感也意味着，在 TA身上看不到欲望、谄媚和讨好。

再比如，日本的服装设计大师——山本耀司。在人们都追求时尚和潮流，偏爱女性婀娜的曲线和靓丽的色泽的时候，他却以反时尚设计而著称。

他大胆发展日本传统服饰文化的精华，具有独立思考，形成一种反时尚风格。这种与西方主流背道而驰的新着装理念，不但在时装界站稳了脚跟，还反过来影响了西方的设计师。

总的来说，高级感是克制的，它极简、低调、且优雅；高级感是的，对细节的完美追求、具有匠心精神；高级感是特立独行且自信的，不盲目追逐潮流、不讨好、不妥协。

二、高级感的接受度？

虽然我们认为「克制的」、「的」、「特立独行的」给人以高级的感受。但是，真的是所有人都能接受吗？

不可否认，有的人就是觉得花里胡哨的东西很高级，比如：在美甲上镶一些比吊灯上还大的钻；穿一双松糕鞋，鞋底恨不得比自己小腿肚还高。

因此，我就在思考两个问题：影响审美的因素；大众对「高级感」的接受度。

1. 影响审美的因素

不管是个人审美、教育水平、成长环境，还是价值观，我觉得决定审美的背后，是「经济」这只无形的手。

不知道你有没有发现一个规律，越落后贫穷的国家，却喜欢艳丽的、繁杂的设计。

而相反，越发达的国家，反而更青睐简约、淡色。

原因是经济落后的国家，人们缺少的是「丰富」，想要的更多色彩，更多花样。

而经济发达的地方，人们已经拥有足够多，因此，内心中追求更多的是：我需要什么？我是谁？什么对我不重要？

人们对过于爆炸多样的商品会感到「焦虑」，「害怕」因为选择的太多，反而想要抽离。

因此，像无印良品这类克制的、做减法的、回归本质的物品，反而受到人们喜爱。

2. 大众对「高级感」的接受度

这里的「大众」就先指我们中国大众吧，他们能接受「高级感」的克制，极简吗？

我们从消费时代进行分析，目前日本处于第四消费时代，它的特征就是上面所说的，不再盲目的追求品带来的满足感，而是追求除了物质以外什么才能让人变得幸福。

而中国呢？

大多数人认为，中国正处于第二、第三、第四消费时代共存期。在偏远的农村，处于第二消费时代，他们的观念是「大的就是好的」，「繁琐是好的」；三四线城市，处于第三消费时代，他们的观念是「个性化、品牌化」追求与众不同，喜欢名牌货；一二线城市，处于第四消费时代，更加崇尚无品牌，休闲倾向，整个社会趋于共享。

但是，我认为，随着中国经济近几年迅猛发展，互联网的快速普及，大家接受信息的程度慢慢趋同，就算非一二线城市，大家的消费观念及审美水平也在随之改变。

比如：抖音里，很多四五线城市的小姐姐们，穿衣及化妆风格都很ins风；同时，越来越多不因为取悦男性，而是突显独立女性的打扮。

越来越多的北欧极简装修风的流行……

总的来说，大众的审美水平和消费观念会受经济的影响，而中国大众的消费观念正在往第四消费时代慢慢转变，对真正「高级感」的事物，接受度越来越高。

三、互联网产品中高级感设计

上面举了很多传统行业案例，其实互联网产品设计中，也在往「高级感」方向走，践行着「极简」和「克制」的理念。

比如：年初的谷歌「ALL-White」风。众所周知，谷歌的设计师是极简主义界面的忠实粉丝。

下面是优化前后对比，移除大面积的色块，采用大面积留白，体现现代、简约的感觉。

移除多彩的图标，采用极简的线性表现方式。

再比如，百度的设计，一年前也在「高级感」的设计理念上进行深挖和落地。

从以下两个维度可以看出：克制的配色；的细节。

1. 克制的配色

拿「简单搜索」举例，它是百度的一款搜索APP，以简洁清爽的视觉体验，简单的操作交互，吸引了大量用户，而且零广告。

在界面的用色上，非常克制，采用以「黑、白、灰」为主，目的是为了让用户聚焦内容本身，而不是为了设计而设计。

包括 icon 的处理，以纯色的线性为主，更加现代、简约。

2. 的细节

大家都知道，黄金分割是最普遍也是最能引起人美感的。我们所熟知的蒙娜丽莎的脸、雅典的帕特农神庙等都应用了该比例设计。

其实，在看似普通的百度搜索首页，同样遵循着这个比例，让有规则的美，严谨的融入其中。

包括栅格系统在设计中运用，这种来源于数学的美学，将有助于用户，更有效和愉悦的阅读及获取内容。

以上可以看出，不管是传统行业还是互联网行业，亦或者是未来的人工智能的设计，都在往「克制」、「」的方向发展，让人人都能享用到优质、高级的设计。

总结

总的来说，「高级感」意味着对设计保持克制的、对细节追求、拥有独立思考的产物，而且，随着经济的发展，人们的审美和接受程度也发生着改变，追求真正高品质的设计。同时，不仅传统行业在践行「高级感」的设计，互联网的产品设计也在朝着这个方向发展。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

所以，视觉语言也是规范化的，标准化的，它足够自由，也保有约束。视觉语言本身也可以具备足够明显清晰的特色，就像每个人的表达方式和口音一样，这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言，可以从下面的9个方面入手。

1. 构建品牌独有的配色方案

我们总是说，色彩和形体是用户第一眼最快注意到的东西。配色方案的视觉表现力最强，这使得配色方案成为视觉语言中辨识度最高的组成部分。配色方案本身需要具备一定的独特性，确保它整体上能够让人记住，区别于其他，品牌不至于在繁杂的互联网世界中迷失，也不会让用户无法记住。

另一方面，配色方案应该具备良好的兼容性，能够调和品牌不同模块，比如网站、APP、社交媒体、包装、名片等。

配色也应该体现品牌的价值。想想麦当劳的配色吧，黄色和红色为主。这两种色彩本身能够触发幸福（黄色）和饥饿（红色）的感觉，两者搭配加上经典的金拱门的LOGO，麦当劳的视觉识别度可以说是相当高的。此外，麦当劳旗下的许多其他的设计，也是在这个配色的基础上构建的。

2. 构建排版的层次结构

排版层次结构的构建，和选择字体同样重要。不同的排版层次，能够给人截然不同的感受，清晰还是粗糙，雅致还是有趣。在排版的层次结构上，并不存在对错，更多需要考虑的是合适不合适，风格和感受上的一致性。

当然，不同层级的信息，在排版层级上还是要有比较清晰的体现的，大小疏密对比度不足，会难以让用户感知到内容之间的重要性的差异。

以 Airbnb 为例，网站的排版有着清晰的层次结构，字体的大小、字重、间距和配色都已经标准化了。相应的，给人的体验也始终保持着应有的一贯性。

3. 建立栅格来规范内容之间的空间关系

视觉元素之间的位置关系，和它们本身的设计是同等重要的。如果你希望整个设计在细节上是清晰明确的，那么栅格会给你想要的。

FreeCodeCamp 对此有很明确的描述：

栅格赋予了UI界面元素以模块化的清晰结构，这使得整个设计团队能在此基础上更好地合作。这使得产品能够快速清晰地输出到不同的平台上。如果你是基于某个想法来构建概念设计，那么这种方法更加实用有效。

简而言之，栅格让视觉呈现的复杂度降低了。

4. 创建组件库

从按钮、图标再到卡片，你应当创建出一整套可用的、风格一致的UI组件库。

同样功能的控件，在页面不同的地方、或者不同的页面上有着截然不同的风格，是让人迷惑而糟心的。一个好的组件库，应当包含全部常用的UI组件，以及针对 iOS 和 Android 平台所适配之后的UI组件。虽然构建组件库本身的工作量并不小，但是在完成之后，能让后续的工作事半功倍。

5. 强调图片的风格和特征

在诸多图形化的元素当中，图片和插画是视觉性最突出的元素，这也是整个视觉语言当中最重要的因素之一，因为它从某种意义上是和品牌关系最紧密的素材。

构成视觉语言涉及到图片素材的方方面面，构图，色彩，滤镜，甚至相关动效的细节。

下面是 Smashmallow 中的网页设计，即使它们并不是同期设计也不是服务于相同的功能，但是很明显插画所采用的视觉风格是一致的，并且每幅插画当中都使用了共同的元素：热气球。这一元素和品牌本身是有着紧密关联的，而用户也可以从这些插画图片的内容，迅速意识到品牌本身的一些概念。

6. 为动效设定规则

动画效果同样是要遵循一些规则的。是快速移动还是慢速移动，是悬停触发还是自动运行？这些动效的运动规则其实是有着明显的视觉识别度的，就像日漫和美漫在视觉和运动规则上存在差别一样。

就像下面这个来自Dribbble 的动效，它大体上做着匀速的圆周运动，速度适中，其中有些元素并没有完全按照圆周运动。那么想想看，是否所有的做圆周运动的物体都和它一样呢？它们是否会带来不一样的视觉观感呢？

7. 让视觉和文本内容匹配起来

视觉语言并不是只涉及到视觉元素，文本并不是与之割裂的，在设计的时候，两者需要合理地配合，在体验上达成一致，传达一致的信息。

在下面的 Steffany 这个网站当中，整体设计呈现出非常明显的女性化的特征，文本内容在表达方式和调性上和整体的视觉语言保持着一致，并没有出现两者冲突或者竞争的状况。

8. 可信且可靠

视觉语言只有在用户接纳的情况下，才会地发挥作用，它要给人可靠的感觉。所以，整个视觉语言需要和你的品牌定位、气质表里合一，而不能让设计和产品、企业的气质割裂开来。

你能想象没有主角的芝麻街会是怎样的一种气场么？

整个品牌和视觉形象都是围绕着 Big Bird 和 Elmo 等角色建立起来的，每一个细节的设计都是围绕着这些角色来创建的。注意网站中角色和其他视觉元素之间的映射关系，它们让用户清晰地感知到角色和整体设计之间的关系是表里如一的，这使得整个网站的设计更容易为用户所接受，视觉语言在此发挥了作用。

9. 落实到具体标准文档当中

整个视觉语言在构建起来之后，需要保持各方面的一致性，在具体设计的时候，则得有一份详实具体的设计文档供整个设计团队和利益相关人员，作为参考。所以，完成整个设计之后，将整个视觉语言相关的内容和素材制作成设计风格指南，和整个品牌的设计规范统一到一起。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。