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

阅读之前，温馨提示下，文中提到的 UI设计方式不一定有对错，如果使用得当，它们都有很大的可能性。

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

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

表单提供了几个可以更轻松收集用户输入的控件。设计表单时，在正确的位置使用正确的控件是一项挑战。

复选框控件有三种状态：unselected（非勾选态）、selected（勾选态）和indeterminate（未确定态）。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。

切换开关代表允许用户打开或关闭物体的物理开关，如灯的开关。

点击切换开关需要两个操作步骤：选择和执行，但复选框只有一个选项，其执行通常需要另一个控件。

在选中复选框和切换开关控件之间时，最好关注使用的环境而不是其功能。

下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。

案例1：即时回复

使用切换开关时，

1. 应用设置的立即响应是无需明确操作的。

2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。

3. 用户需要执行不需要审核或确认的即时操作。

如果需要即时响应的选项最好选择使用切换开关

案例2：设置确认

使用复选框时，

1. 应用设置需要在提交之前由用户确认和审核。

2. 在显示结果前，设置定义需要执行提交、确定、下一步、等应用操作。

3. 用户必须执行其他步骤才能使更改生效。

如果需要显式操作来应用设置，则首选复选框

案例3：多项选择

使用复选框时，

1. 有多个选项可供使用，用户必须从中选择一个或多个选项。

2. 逐个单击多个切换开关，每次单击后等待查看结果是需要额外的时间。

在列表中选择多个选项，复选框能提供更好的体验

案例4：不确定状态

使用复选框时，

1. 当多个子选项在父选项下分组时，需要中间选择状态。中间状态表示在列表中选择了多个子选项（但不是全部）。

使用复选框最好地显示不确定状态

案例5：清晰的视觉状态

使用复选框时，

1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。

2. 需要提供明确的勾选状态或未勾选状态。

有时切换开关不能清晰地显示它是状态还是动作

案例6：相关项目

使用复选框时，

1. 用户必须从相关项目列表中选择选项。

用复选框显示要选择列表中的相关项

使用时切换开关时，

1. 用户切换独立的功能或行为。

独立项目可使用切换开关进行选择

案例7：单选项

使用复选框时，

1. 提供单个二进制是/否选择。

2. 只有选择或取消选择一个显而易见的选项。

单个是/否选项更适用于复选框

使用切换开关时，

1. 需要单一选择，并且您希望为开/关类型的决策提供两个选项。

使用切换开关可以最好地理解单个开/关决定

结论

重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项，若用户必须进行额外点击才能填写信息，对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。

参考文献

1. Control and Patterns《控制和模式》

2. When to Use a Switch or Checkbox《何时使用开关或复选框》

3. Selection Controls《选择控制》

4. UX Design: Checkbox and Toggle in Forms《UX设计：表单中的复选框和切换》

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

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

前几天带大家学习了《牢记这9个排版设计要点，领导都无话可说了…》，今天给大家带来排版设计要点第二弹。

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

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

但是，今天我并不是专门只针对某个店铺做视觉统一的设计分享，而是想从全局的角度去给大家阐述这个问题，毕竟，你得知道自己为什么需要做视觉统一，你才可能做好视觉统一，所以这个问题就不单单只是指店铺了，而是关于品牌与用户之间的问题。

因为不管是店铺也好，平台也好，他们其实都是为卖货服务的，它们与品牌产品之间其实都是合作关系，最终其实都是要链接到用户身上的，而设计师要做的，归根结底都是处理好它们与用户之间的关系，帮助达成交易。

所以我将要分享的关于视觉统一的方法，就不单止是适用于店铺了，而是品牌、平台、店铺都适合的。

按照惯例，我还是先给大家列出一个提纲，方便大家理解：

• 为什么需要统一视觉风格？
• 统一视觉风格的方法有哪些？
• 统一视觉风格的注意事项及总结

接下来我就逐条展开给大家说一下这其中的奥秘吧！

一、为什么需要统一视觉风格？

当我们提到统一视觉风格这几个字，不知道大家能联想到什么？或者能联想到什么画面什么公司什么产品呢？在回答这些问题之前，我还是先给大家举一些例子也许你就明白了。

比如前几天我无意中打开了淘宝app，然后刚好看到了2018年淘宝新势力周的一系列卖场页面：

大家知道像淘宝天猫京东这样的平台，每年各种卖场促销活动是很多的，而且每一场活动都需要容纳成千上万的商家和数以万计的商品，但是，所有这些东西都却只是通过一块液晶显示屏展现在消费者面前，那么这时候就是我们设计师发挥作用的时候啦。

这时候设计师需要做的事情就包括以下几个方面：

• 要保证活动页面里能把所有东西都容纳进去；
• 要保证页面是方便顾客浏览的，所以要有规律可循；
• 要保证页面是可以吸引顾客一直逛下去的，所以页面有规律的同时又要有所差异，视觉上不枯燥，不然会视觉疲劳；
• 要在顾客心里和脑袋里建立某种印象，找到存在感，以免被顾客遗忘；
• 既要保证平台活动整体的调性和谐性，又要为不同的商家提供最恰当的展示机会，所以视觉表现形式要合理；
• ……

总而言之就是要权衡平台、商家、顾客三者之间的关系和利益：顾客买的爽，商家卖的爽，平台名利双收。

那么这时候保持页面视觉统一就很有必要了，因为视觉统一就有以下非常重要的几点作用：

1. 强化品牌或事件在用户心中的印象

因为几乎所有的品牌都需要做的一件事情就是占领用户心智，就是要让用户在众多的品牌选择里有自己的一席之地，不要把自己遗忘了，所以它需要不断的出现，保持存在感。

一个活动每年去做，一个电影每年都出续集，一个产品每年都会出不同的系列等等，都是同一个道理，都是在强化自己在用户心目中的印象，保持存在感。

提到这个，我平时每次搞活动都会提醒大家不要经常换头像或微信昵称，我让大家多来留言其实就是这个道理，因为我每天要面对的那么多人的头像和名字，如果你长期不换头像并且经常来留言，那我肯定会记得你；但如果你经常换头像，并且留言次数还少，那我铁定就不记得你了，因为你没有强化一个符号在我的脑海里啊，明白了吧。

2. 让事件变得有序有规律可循

就像我们办运动会，不同的队穿不同的衣服、喊不同的口号等等，即便是队里的人走散了，你看一下队服或对方喊的口号你就能辨别出是自己人还是别人了是吧。

再比如你去超市货架上拿饮料，正是因为这种视觉统一的作用，所以你才能很好的辨认出自己要买的品牌产品，而不至于拿错了，反过来对于品牌也一样，自己内部的产品之间是有统一的视觉形象的，同时又是跟其他品牌相区分开来的，所以才可以保证顾客不买错。

这些道理运用到页面设计上也是一样的，让顾客方便逛，同时别逛错了地方。

3. 提高相关人员的可执行性

因为像这种大型的活动，需要大量的人力投入，就拿设计师来说，一般都是某个主设计师出来一个设计方案，然后这个方案不仅要能达到以上提到的要求，还必须要是能保证其他设计师能够以这个设计方案的模版，去执行剩余的几十上百个页面，工作量非常之大。

二、统一视觉风格的方法有哪些？

前面我们讲到了统一视觉风格和形象的必要性和重要性，那么接下来就是大家最关心的如何统一视觉形象的问题了，所以我依旧会从好几个方面以举例的方式给大家做讲解，你就明白了。

不过在这之前，我还是拿一张图给大家看，还是淘宝新势力的这张图：

你在这个画面里看到了什么？这个视觉画面里都包含了哪些东西？

嗯，我看到了模特、文字、图案、各种颜色，还有布局、排版、以及所有上面的内容汇聚在一起所组成的一种风格。

那所谓统一页面的视觉风格，也就是说只要保证以上所有提到的这些东西，我在另外的页面里也至少能找到一项是类似的，那我们就很容易将它们视为是具有共通性的页面了，也就达到了视觉风格统一的目的。

以下面这几个淘宝新势力分会场的页面为例：

你应该注意到了，这些页面虽然颜色不一样，但整体看视觉却非常统一，同时细看又有些差别，其原因就在于以下几个方面：

• 不同的页面对应的色相不同，但是明度和饱和度是近似的；
• 不同的页面对应的文案不同，但是文案的字体样式、布局排版是一样的；
• 不同的页面对应的氛围点缀元素不同，但是氛围元素的风格、质感、手法等等是类似的；
• 不同的页面对应的点缀元素不同，但是每一个页面里的点缀元素都是跟相应的主题、模特、文案等等相呼应的。

所以你才会有这些页面具有统一的视觉风格的印象，包括其他会场的页面，虽然做了一些小调整，但是依然可以看得出来是统一的视觉风格：

因为这里运用到了跟上面同样的原理。

不过这种手绘风格与模特相结合的设计形式我以前也给大家分析过，我这里就不深入举例了，大家可以看看圣保罗艺术家 Ana Strumpf 为很多时尚杂志所做的插画封面就能有所体会：

这种手法给人俏皮、时尚、新潮的感觉，非常适合追求趣味个性而又不失品味的心态年轻的群体，所以这一次的淘宝新势力周大概也是出于这种新潮人群定位考量，才会做这种形式的设计吧。

而且这种扁平质感半插画性质的设计形式几乎是很难过时的，非常前卫和耐看。

所以到这里你应该就好理解了，一般来说，我们有以下5个途径可以达到统一视觉风格的途径。

1. 提炼某种风格，重复使用

比如你看今天淘宝新势力的一些会场页面，视觉风格就非常统一，一眼就看出是实体模特＋手绘图形相结合的风格形式，在模特脸部做一些图案轮廓线，然后模特周围点缀一些手绘图案做氛围，有点达达主义的感觉。

2. 建立某种品牌色，重复使用

当我们重复看到某种颜色跟某个品牌或产品同时出现，时间久了就会自然而然的把这个颜色和品牌联系在一起，从而产生条件反射，只要看到某个颜色立马就会想到这个品牌，只要听到这个品牌的名字脑海里就会出现某种颜色。

这其实就是通过建立某种品牌色达到视觉风格统一的目的从而让品牌在用户心里建立起了这种色彩印象。

比如蒂芙尼蓝：

所以，任何页面，任何场所，任何产品上只要出现了这个蒂芙尼蓝色，用户都会默认他们是相关联的：

再比如，可口可乐红：

当然了，色彩种类那么多，有的品牌或店铺的品牌色并不是单一的，而是多彩的，这都没有什么限定。

那这个如果是运用到页面设计或 Banner 设计里的话，这种品牌色是一定都需要出现在画面里的，至于色彩比例就因需要而定了，而且今后只需要出现这种颜色，就能反过来达到视觉统一的目的。

3. 提炼某种视觉元素，重复使用

所谓视觉元素，其实就是指一切你能看到的想到的元素，所以这里的视觉元素也是指多个方面的，比如某种图案图形、某个物件、某个文字、产品、模特、logo 等等其实都算是视觉元素。

那说到视觉元素的运用，我脑海里印象比较深刻的2个品牌就是初语和天猫，前者是店铺，后者是平台。

我们可以看看品牌升级以前的初语，它有一个让人印象非常深刻的视觉元素，就是她的模特和眼部的妆容：

所有的模特都保持了一致的妆容特点，气质也是类似的，当然你也会看到很多他的设计都是会与艺术名画相结合，这些都是它的特点，并且加以充实用，就给人建立了很深刻的印象，你只要看到这种模特妆容或者画面，你就知道：「噢没错了，这是初语」。

那天猫也是一样的，每年双十一这个天猫头的元素就会以各种形式露面，而且不止是在双十一，可以说是相当强大的视觉符号了，你想忘都忘不掉它：

2017年天猫双十一宣传海报

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这种通过某种视觉符号来统一视觉形象，重复使用从而加深用户印象的方式在很多其他地方都有用到，比如每一个苹果手机，每一次开机，都会出现同样的开机画面：白底＋黑色的苹果 logo。

4. 打造品牌专属的IP或宠物形象，并重复使用

这就跟品牌给自己找了个的代言人一样的效果，只要这个形象出现了，你就知道这个是xxx品牌。

比如店铺，三只松鼠就是这么干的：几乎所有的页面里都会出现三只松鼠。

比如平台，京东有狗，天猫有猫，苏宁也有狮子等等，电商界俨然是一个动物世界。

再比如珠宝品牌，卡地亚Cartier 有猎豹：

这只猎豹经常出现在各种品牌宣传广告里，或者制作成各种首饰，用户看到猎豹就会想到卡地亚。

5. 提炼某一句口号，重复使用

既然我们前面提到了视觉元素，那么文案或口号其实也是画面里的其中一种视觉元素，所以我们再以2017年天猫双十一宣传海报举例：

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这里面的「xxx祝你双11快乐」 「天猫双11全球购狂欢节」等等口号文案，重复使用，其实就起到了这种画面视觉统一的作用。

而且这种方式也在很多地方有运用到啦，比如你看的很多动漫、电视剧，总会重复出现一些台词，嗯，说到这里，我想到了小时候看的一个动画片《宠物小精灵》，每集火箭队出场台词都是这几句：

然后每集结束的时候总会有那么一幕，喵喵被抛到空中然后喊出一句台词：「我们还会回来哒～」。

你看这种重复口号的威力多么可怕啊，一二十年了还让用户印象深刻呢。

不过，其实最后列举的这三点其实都可以称作是视觉元素的重复使用啦，至于原因我也在前面作了解释，而且以上所有的方式其实都是可以结合运用的，并不是孤立存在的。

还有，大家注意到了吗？我在每一条后面都加了4个字「重复使用」，因为就算你有了自己特定的视觉元素、有属于自己的宠物形象、有自己的品牌色、有自己的风格等等，但是你压根就不露面，你还特别低调藏着掖着不展示自己，那谁还记得你啊。

说到这个，我想到了异地恋之所以容易失败，不也是差不多道理吗？你和男/女朋友三五年不见面没有关系，没法手拉手亲亲嘴也没有关系，但是如果你们压根就不联系，不出现在彼此的视线里，那感情自然会淡的呀，等于是白白给了别人可乘之机。

所以我一直都觉得品牌和用户之间其实也是一样的道理，就是在「谈恋爱」，而不是做生意，至于你们之间是谈的什么类型的恋爱，那就看自己本事了。

总结

之所以我们需要做视觉统一，其实就是为了强化我们在用户心理的印象，让他们记住我们，记住我们是很有规范的，靠谱的，可信赖的品牌印象等等，并且还要重复的出现在用户的视野里，那怎么出现呢？方法就在我上面列举的几条内容里啦。

当然，你也得控制一个度，不要过份的运用这些方法，不然会招致用户反感的。

想想有的男孩子可以成功讨女孩子欢心，而有的却被女孩子嫌弃的不行，知道原因了吗？道理都是一样的啊。

你看下面这些世界杯期间的广告，画面 low，口号 low，重复次数又很多，用户记住是记住你了，但真的挺烦的。

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

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

目录：

• 前言（上瘾模型-pick模型）
• QQ空间小游戏为案例（项目介绍&目标人群）
• 触发用户＆抓住动机
• 付出行动
• 情感撩动＆情感满足
• 持续投入
• Pick me

一、前言

尼尔·埃亚尔写的《上瘾》中提出「上瘾模型」的概念，其中分为四大步骤：触发-行动-多变的犒赏-投入。

这四个步骤是一个循环的过程，当用户越沉迷于这个循环，那说明你的产品对用户的吸引力越强，反之当用户中断了这个循环，作为产品设计师就需要考虑我们在哪一步出现了问题，用户为何抛弃了你的产品，或者说用户是怎么「戒掉」你的产品。这其中的原因可能会很多样，比如用户找到了更好的撩动自己情感的产品，又或者你没有达到用户的预期。

那么怎么样才能让用户在有多个选择时，选择 pick 你呢？我试着把「上瘾模型」结合认知心理学中的「心智模型」，系统性的提出<锁定目标用户-触发用户-抓住动机-付出行动-情感撩动-情感满足-持续投入-pick> pick模型。

二、QQ空间小游戏为案例（项目介绍&目标人群）

空间小游戏平台是国内领先的 H5 游戏平台，通过接入外部优质 H5 游戏开发商来提供角色扮演、休闲、策略、剧情、棋牌、双人pk 等六大类别的轻量小游戏来满足用户碎片化时间娱乐的需求。

• 目标人群：手Q所有用户都是我们既定的目标人群，平台游戏类型能满足不同年龄阶层的用户需求。
• 用户场景：个人碎片化时间， 好友之间有互动娱乐需求时。

平台分为4个 Tab，每个 Tab 都满足了用户相应的需求。

• 首页：承载所有平台游戏，有分类让用户去找喜欢类型的游戏，也根据智能算法进行游戏推荐。
• 社区：提供一个让玩家能互相交流的平台。
• 礼包：给用户提供游戏福利，加强对平台依赖性。
• 我的：承载 VIP 体系和积分任务体系。

以下我想通过空间小游戏为案列，讲解 pick模型在实际运用中的指导意义。

三、触发用户&抓住动机

触发分为内部触发和外部触发，触发要显而易见，行为要易于实施。

1. 外部触发

空间小游戏作为依附于手Q空间的一个入口级平台，我们可以很好的利用好友关系链的传播性，这也就是触发模型中的外部触发——人际型触发。由于平台的关系链属性，所以我们会把人际型触发当做外部触发的核心触发方式，因为好友之间的触发是相对其他触发方式更加稳固值得信赖的，当然付费推广型触发也是在产品冷启动时期常用的方式。人际型触发我们细分为自主型和被动型，自主的主要是用户通过分享游戏或者邀请好友的方式，被动的就是平台通过用户在游戏内的信息触发给他的好友。

人际型触发（主动型&被动型）是外部触发的核心触发方式。

自主型人际触发-邀请好友来平台玩游戏，通过展示游戏特点吸引用户点击进入，这就是典型的自主型人际触发方式，也是最容易形成病毒传播的方式。

被动型人际触发-在不透露隐私的前提下，通过好友在游戏内的信息吸引用户的关注进行触发，这种触发一般会使用在广告位和推荐位模块上，这样能尽可能的提高用户的安全感和认可度。

2. 内部触发

也就是用户自主的触发，情绪触发是主要的内部触发方式，尤其是负面情绪，当人厌倦，孤独，沮丧或者游离不定的时候会让我们体会到轻微的痛楚和愤怒，我们在内部触发这里需要抓住用户孤独，无聊的情绪波动。当用户无聊的时候，如果产品能快速的出现到用户眼前，并能消除用户的负面情绪，那么这就能让用户产生记忆点，每当这种情绪袭来的时候，用户总能想到你。

通过展示游戏的热度信息来吸引用户关注，在用户无目的性刷空间的时候，通过推荐热门游戏相关数据，然后与用户的孤独情绪产生碰撞。

总结：触发是让产品卖出去的第一步，而有效的触发才是成败的关键点。有时候内部触发和外部触发并不是独立存在的，在不同的场景下两种方式是可以做到相互结合的。触发方式千万种，最适合自己产品的触发方式才是最好的。

四、付出行动

人在做出行为时有两个基本动因，一个是该行为简单易行，二是行为主体有这个主观意愿。

上一步我们已经通过各种方式触发了用户，这个时候就需要用户能做出行动。在我们空间小游戏这个案例里，用户点击游戏 logo 时，我们有过一个很大分歧，那就是用户在平台或者广告位上看到游戏 logo 点击后，是直接进入游戏还是需要一个游戏详情页去介绍游戏。

两种方式都有各自的优势，即点即玩能快速的让用户进入游戏，能提高转化率，游戏详情页能让用户更好的了解游戏内容，再进一步确认是否去玩这个游戏。

针对这两个方案，我们最终选择前者-即点即玩，因为我们考虑到 H5 游戏都是属于比较轻量的游戏，所以我们希望用户能形成一种认知，平台内所有游戏是轻量的，便捷的。所以在面临方案选择时，回头看看产品的调性与特点，可能能帮助我们做抉择。

而针对已经玩过平台内游戏的老用户，我们必须能让用户在下次想开启游戏时快速的找到玩过的游戏。根据后台数据我们的用户平均在玩的游戏数量是2.9个左右。最后我们选择在小游戏首页顶部位置设立一个最近在玩模块，首屏展示三个，可滑动和查看更多，希望能让用户快速的找到玩过的游戏。

所以触发是有分新用户和老用户的区别的，针对新用户我们更多的是需要拿内容去吸引他们，而老用户则需要能让他们快速的找到自己已经玩过的游戏。所以触发要简单易行，主观意愿是需要我们去引导和吸引的。

五、情感撩动&情感满足

优秀的游戏总是能持续的撩动用户的情感，让人在游戏中得到满足感，成就感。我们平台所有游戏都是第三方公司提供，我们没有权限对游戏内容进行过度的参与，我们只能尽可能的把最优质的游戏筛选进来，所以在情感撩动和满足上我们不能完全依赖开发商的游戏质量和设定。所以必须在我们平台的体验上给用户一些噱头，一些小目标，让用户在平台上也能得到情感满足。只有这样，用户才能对平台产生记忆点和依赖，这才是我们想要达到的目标。

从平台的角度我们希望通过<社交属性，奖励机制>两个方向去撩动用户的情感，用户可以在社交里面找到荣誉感（晒自己的游戏等级和战绩）,也可以在多变的奖励机制里面不停的完成一个又一个的任务而获取相应的奖励。

1. 社交属性

游戏社区，让充值玩家可以有地方炫耀自己获得成就感（名称附带游戏等级和荣誉），让普通玩家也能通过社区了解更多游戏攻略，甚至可以在这里与陌生人交友（点击头像可跳转手Q资料卡）。

2. 奖励机制

• 游戏礼包 tab，通过发放平台特殊礼包福利，让用户养成习惯，每日来平台领取礼包再去玩游戏。
• 平台任务（签到，转发，进入游戏等）可获取积分，积分可以到兑换商城换取游戏金币和抽奖，通过积分抽奖能调起用户的心理起伏，让用户乐此不彼的投入到获取积分当中。
• 首冲优惠，充值抵扣券，通过优惠的方式引导用户充值，研究表明当用户首冲后，之后充值的概率会提高很多。

总结：多变的福利奖赏会使大脑中的伏隔核更加活跃，并且会提升神经传递多巴胺的含量，促使我们情感产生起伏，然后一旦情感被满足，我们将会持续的投入下去，比如更多的时间，更多的金钱。

六、持续投入

人为什么会进行投入，投入行为背后的大思路是利用用户的认知，就是用户会认为投入越多，服务越好，得到的情感满足越丰富。当然事实也的确是这样的，投入的阶段我们需要让用户对未来的奖赏（心理，福利）抱有强烈的期待，这样才能让用户持续的投入。

比如我们在设计 VIP 体系时，随着 VIP 等级的提升，用户所拥有的特权就会不断增加，通过特权的吸引，当用户在游戏体验中发现了比较困难的任务时，我们就会提醒用户是否去升级 VIP，让通关更轻松，用户将很难抵挡这种特权满足。

又比如我们设定每周三为积分翻倍日，用户可以得到更多的积分，我们不断丰富积分商城的兑换物品，持续吸引用户的注意，让用户不断去期待新奖励。

七、PICK ME

我理解的 pick 是一种充满信任感的选择，这种选择会让用户去把产品分享给自己的好友，会在社交平台上讨论产品。但是能让用户 pick 你，并不是一件简单的事情，就好比你 pick 创造101小姐姐时，你可能会关注小姐姐的样貌、才艺、背景、人设，这些都是影响你产生认同感重要的因素。

我们做产品何尝不是这样呢，如果你的产品没有解决用户的痛点，没有让他产生愉悦的情绪，你就会被「淘汰」。用户的投票都是在符合自己心智模型的基础上做出的选择，pick 模型的设计目的就是将用户遇到的问题（情感需求）和我们作为设计者的解决方案频繁的联系到一起。

总结

让用户对产品产生习惯，是我们的终极目标。而如何让用户产生使用习惯，不是一朝一夕能达成的，这需要产品不断的迭代优化，让你的产品不断的解决用户变化多端的需求，那么忠诚就随之而来了。我们回顾一下 pick 理论，从更简单理解的角度来看，可以分为<触发-持续解决问题-养成习惯>，这里的难点属于第二步，当你的产品能不断解决用户的问题，养成习惯只是水到渠成的结果罢了。

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

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

一、图文布局

用户所关注的内容以及不同的业务诉求决定信息的优先级排布，所以没有通用的布局，只有适合的布局。

1. 上图下文

上图下文更强调了图片的重要性，以「见」这个属性为优先，上图下文需要注意的是图片高度过高会严重影响版面效率，而一个具有商业化目的的产品对首页的版面效率异常看中，同样对图片的质量要求也甚高。通常这样的 feed流布局更抓人眼球。

如果确实需要以大图+文的上下方式来布局，尽量找到版面的平衡点，考虑图片与文字之间想要给用户传达的关系和优先级图片的使用尽量使用黄金比例做展示，例如4:3，2:1，16:9等。

宫格排列式的上图下文能够极大的提升版面效率，一般更多用于电商平台，在首页将某个模块的优质商品进行透出，提高转化和流量。缺点是缺乏信息完整度，在布局时需要考虑更多因设备、极限值带来的不同状况的问题。

可以看出，严选将金额跟在标题后面，而非固定位置，这样做的好处是将标题和金额关联度更高，形成一致性，缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会根据业务需要来选择展示一行或多行文字极限。但由于版面效率它不得不只给了两行的极限高度。

2. 左图右文

左图右文形式的排版应该也算是用的非常多了。其实大家会经常把它和左文右边图进行对比。但无论是左图还是右图，在这样的布局中我们首先就要做好图和文的占比。显示在外面的图片通常是选取了详情中的图片来进行展示，否则就浪费了比较多的人力资源去重新配图了得不偿失。同样和图片搭配的信息字段此时就显得极为重要。

菜鸟裹裹其实将标题的优先级又提升到了和图片一样的层次。图片本身给人的视觉冲击会更强所以即便图片放在标题下面，也不会弱。

方形缩略图是最常用的形式，不至于太窄也不至于太宽，对于右侧信息的布局也显得更游刃有余。横形的图片会让右侧的文字显示空间压缩的厉害，通常在视频缩略图会用到，但图片对整个页面的氛围感会更好。竖形的图片让右侧信息有更多的发挥空间，同时版面的留白也更大，但是如果右侧信息过少，则会让页面有些单调和不完整。

左文右图就不再赘述，现在大多数左文右图在咨询和旅游产品中使用的更多，因为用户在浏览这样的列表信息时图片无法在第一眼被识别出具体内容，而对于这样的产品来说无疑是低效的。当然很多时候没有那么多时间去验证如此设计对于用户来说是否真的能提高浏览效率，提升了多少满意度。我们可以简单的理解，如果说的是一件事，那么文字比图片更重要。如果说的是一样物品、人，那么左边放图更合适，体会一下。

3. 图文混排

为了使信息传达的更一致，通常如果没有大量的文字信息则我们会选择文字与图片混排的形式，为了适应多变的图片，我们会在文字底部加一层黑色半透明蒙层或者给文字加一些无伤大雅的阴影。前提是文字信息不会太多而干扰到图片内容的展示和传达。

二、按钮解析

其实严格意义上来说，能通过点击触发交互动作的控件我们都能将它定义为按钮，但是如果这样定义那就没的玩了，所以我们将移动端的按钮定义为具有引导性并且可点击的控件。

例如京东金融查看历史支取利率后的箭头，其实这才是这一行的引导按钮，但是为了更好的触发点击通常会将整一行都作为点击热区。

所以为了区分不同的按钮的用法，我这边将按钮进行了一个分类：主线场景、支线场景、异常场景。

主线场景下的按钮通常会使用的比较大，为了强化和引导核心的任务流程，所以该按钮应该是最醒目的。

样式通常会分为通栏和非通栏，而通栏则是从 MD 设计中衍生出来的一种形式。

1. 主线场景

要注意的是，通栏和非通栏按钮我们到底该如何选择，首先我们需要知道这样的按钮都是放在页面的底部固定显示，不会随着内容滚动，如果选择通栏按钮，则更适合可滚动的页面容器，也就是说一页中内容较多在一屏幕中无法显示全的页面，优点是按钮的优先级会很高，但是在 iphone X 这样的设备中，适配会纠结一些。

而如果选择不通栏的按钮，我们要考虑的是页面内容是否很长，如果很长需要在按钮底部加一层白色背景，尽量不要让内容穿过按钮，因为底部其实并不是内容最好的显示区域。同样非通栏的置底按钮相较于通栏按钮层级就显得没那么高。

所以我们会发现考拉和淘宝虽然有样式区别，但实际上都相当于在底部有一层内容遮盖的部分。

2. 支线场景

再来看支线场景的按钮，支线场景的按钮一般能够分为：图标、文字、图标+文字、框+图文字+图标这样几种类型。

图标就不用说了本身就具有可操作的属性，也有修饰的属性，关键看他的场景和布局位置。例如淘宝的 tab 标签上的定位图标，就是一种修饰型的图标，为了更好理解这里的定位是一种楼层定位，随着页面滑动到不同的业务模块而会跳动，这里并不是一个 tab 的功能，不能算是切换页面。

如果把定位按钮单独拿出来放在导航栏，或者页面右侧的空白处，我们就会觉得他是一个可点击并能够进行跳转的按钮。

包括「查看全部」这样的文字，即便不加箭头我们也会尝试去点击，高亮显示就更加明显，用户已经形成这样的意识，但是像上面的规格和参数如果不加箭头会让用户觉得这里并没有可操作的东西就不去点击了。所以我们总结一下就是支线按钮的使用场景较为复杂，需要通过参考上下文的情景来做不同样式的选择。

不过支线流程毕竟是支线流程，为了不打扰主线流程，尽量不要将支线流程的按钮做的过分明显。例如淘宝详情页中的进店逛逛，其实这个按钮用了实心的色块做了强引导，目的是为了提高客单价，同样只要是对最终目标有帮助，并不能算是跳失，说不定回来的时候买了更多更贵的东西。

3. 异常场景

异常场景下的按钮不需要做的过于醒目，一般会采用幽灵按钮或者和背景近似的颜色。该场景下按钮大多数情况是希望用户点击将页面恢复正常状态，并不是一种强烈的引导。

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

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

作为 UX 或 UI 设计师，初次接触 VR 可能会有所畏惧，但不要害怕，在本文中，我们将分享一个设计 VR 应用程序的完整过程，我们希望您可以通过这个案例来开始自己的 VR 设计之旅。你不需要成为 VR 的专家；你只需要将你之前的设计技能应用到一个新领域。最终，经过大家的共同努力，我们定可以加速 VR 的发展以发挥它的全部潜力。

一、VR应用程序里有什么？

一般来说，从设计者的角度来看，VR 应用程序由两种类型的组件组成：环境和交互元素。

环境：您可以将环境视为您戴上 VR 头盔时所进入的整个世界 ， 比如你身处的虚拟星系或者驾驶过山车飞驰的乐园。

交互元素：界面上影响用户交互和操控体验的元素合集。

根据这两个组件的复杂性，所有 VR 应用程序都可以沿两个轴定位。

在左上象限中的 VR 应用有类似模拟器的东西，例如过山车的 VR 应用，这种应用具有完全成形的环境，但根本没有交互。你只是被锁在了车里。

在右下角的象限中，应用程序具有一个更好的界面，但比较少或没有3D环境。三星的 Gear VR 主屏就是一个很好的例子。

设计场所和景观等虚拟环境需要熟练使用3D建模工具，许多设计师平时无法接触到这些元素。但是，UX 和 UI 设计人员有很大的机会将他们已有的技能应用于设计虚拟现实的用户界面。

我们所做的第一个完整 VR 的 UI 设计是 The Economist 的应用程序，与 VR 制作工作室 Visualize 合作。我们做设计，Visualize 创建内容并开发应用程序。

我们在之后文章中将此应用作为一个工作示例，现在我们将介绍设计 VR 应用程序的方法，然后再介绍设计 VR 界面的细节。您可以从 Oculus 网站下载Gear VR 的 Economist 应用程序。

二、VR UI设计的第一步-回顾传统流程

尽管大多数设计师已经熟悉了设计移动应用程序的工作流程，但还不太清楚设计 VR 界面的流程。当面对第一个VR应用程序设计项目时，我们首先要做的是合乎逻辑。

传统工作流程到全新领域

当我们第一次使用三星的 Gear VR 时，我们注意到它与传统移动应用有很多相似之处。VR 应用程序与传统应用程序有着相同的工作流程：帮助用户与界面进行交互。

现在请记住。鉴于与传统应用的相似性，设计师花费数年时间改进的久经考验的移动应用工作流程不会浪费，这些流程仍然可用于制作 VR UI。这让你比你想象的更接近 VR！

在如何设计 VR 界面之前，让我们回过头来看看传统移动应用的设计过程。

1. 线框

首先，我们将进行快速迭代，定义交互和总体布局。

2. 视觉设计

在此阶段，功能和交互已经完成。我们把视觉规范与设计应用于线框图，并制作出漂亮的界面。

3. 设计文档

在这里，我们将屏幕组织成流程，绘制屏幕之间的链接并描述每个屏幕的交互。我们将此称为应用程序的设计文档，它将被用作开发人员的主要参考。

现在，我们如何将此工作流程应用于虚拟现实的设计当中呢？

三、开始VR UI设计

1. 画布的尺寸

最简单的问题可能也是最具挑战性的。面对360度的画布，人们可能很难知道从哪里开始。事实证明，UX 和 UI 设计者只需要关注整个空间的某个部分即可。

我们花了几周时间试图弄清楚什么样的画布尺寸适用于 VR 设计。当您使用移动应用程序时，画布大小取决于设备的大小：iPhone 6为1334×750像素，Android大约1280×720像素。

要将移动应用程序工作流应用于 VR UI，首先必须确定合适的画布大小。

以下是扁平化时360度环境的样子。这种视图叫做等角矩形投影。在3D虚拟环境中，这些投影围绕球体缠绕，以模仿现实世界。

整个投影的水平宽度是360度，垂直180度。我们可以用它来定义画布的像素大小：3600×1800。

使用这么大的尺寸可能是一个挑战。但因为我们主要对 VR 应用程序的界面设计感兴趣，所以我们可以专注于这个画布的一部分。

基于迈克·阿尔格（Mike Alger）对舒适观察区域的早期研究，我们可以找出一个合适的部分来展示界面。

感兴趣的区域占360度环境的九分之一。它位于图像的中心，大小为1200×600像素。

让我们总结一下：

「 360度视图 」：3600×1800像素

「 UI视图 」：1200×600像素

四、测试原型

「UI视图」画布有助于将我们的注意力集中在我们正在制作的界面上，并使设计流程变得更加容易。

同时也必须使用「360度视图」在 VR 环境中的预览界面。此外为了获得真实的比例感，使用 VR 头盔测试界面也是必要的。

△ 使用Avocode，您可以轻松直观地比较设计

五、设计工具

在开始之前，我们需要以下工具：

1. sketch

我们将使用 Sketch 来设计我们的界面和用户流程。如果您没有，可以下载试用版。Sketch 是我们首选的界面设计软件，但如果您使用 Photoshop 或其他任何软件更舒服，也没问题。

2. GoPro VR Player

GoPro VR Player 是一款360度内容查看器。它由 GoPro 提供，是免费的。我们将使用它来预览我们的设计。

3. Oculus Rift

Oculus Rift 连接到 GoPro VR 播放器，这将使我们能够测试我们的设计。

六、VR界面设计流程

在本节中，我们将介绍如何设计 VR 界面。我们将一起设计一个简单的界面，最多花费5分钟时间。

下载源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密码：09vt，其中包含预设的 UI 元素和背景图像。如果你想使用自己的设计文件，那也是可以的。

1. 设置「360度视图」

首先要做的事情，让我们创建360度视图的画布。在 Sketch 中打开一个新文档，并创建一个画板：3600×1800像素。

导入文件 background.jpg，并将其放在画布的中间。如果您使用自己的背景文件，请确保其比例为2：1，并将其大小调整为3600×1800像素。

2. 设置画板

如上所述，「UI view」是「360 view」的裁剪版本，我们仅关注 VR 界面。

我们创建一个新画板：1200×600像素。然后，复制画板到「360 view」中，并将其放在画板的中间。不要删除「360 view」画板，我们同时保留着两个画板，以后会用到它们。

3. 设计界面

我们将在「UI View」画布上设计我们的界面。我们会尽量简单一些，首先在视图上添加一些图块。您可以使用 tile.png 文件将其拖到 UI 视图的中间。

复制它，并创建一行三个图块。

使用 kickpush-logo.png 文件，并将其放在图块上方。

4. 合并画板

现在来看看有趣的东西。确保「UI view」画板位于左侧图层列表的「360view」画板上方。

将「UI view」画板拖动到「360 view」画板的中间。将「360 View」画板导出为 PNG；「UI view」将位于其上方。

5. 在VR中测试它

打开 GoPro VR Player，并将刚刚导出的「360 View」PNG 拖到窗口中。使用鼠标拖动图像以预览360度环境。

我们完成了！是不是很简单？

如果您的机器上安装了 Oculus Rift，则 GoPro VR 播放器应该可以检测到它并允许您使用 VR 设备预览图像。根据您的配置，您可能需要在 MacOS 中做一些显示设置。

七、VR设计中需要注意的因素

1. 低分辨率

VR 头盔的分辨率非常糟糕？这不完全正确，其实它相当于手机的分辨率。但是，考虑到设备距离您的眼睛5厘米，显示器看起来并不清晰。

为了获得清晰的 VR 体验，我们需要一个8K的显示屏，这是一个15,360×7680像素的显示屏。相信这种设备早晚会普及。

2. 文本可读性

由于显示器的分辨率较低，会导致所有精美的 UI 元素都会看起来像素化。这意味着，首先，文字难以阅读，其次，直线部分会出现锯齿。所以尽量避免使用大段文字和特别复杂的 UI 元素。

八、收尾工作

1. 设计文档

还记得我们的移动应用中的流程图吗？我们现在将这种做法也应用到 VR 界面。用我们已经做好的界面组织成一个易于理解的流程图，这非常有益于开发人员理解我们设计的应用程序的整体架构。

2. 动效设计

设计一个漂亮的 UI 是一回事，但让他动起来又是另外一回事了。我们决定以二维视角来处理它。

基于我们的 Sketch 文件，我们使用 Adobe After Effects 和 Principle 为界面设计动画。虽然输出的不是真实的3D体验，但它足以指导开发团队了，且能帮助我们的协作者在流程的早期阶段了解我们的愿景。

△ 你刚刚设计了第一个 VR UI。真棒！

我们知道你在想什么，「这很酷，但真实的 VR 应用程序会复杂的多。」是的，当然是。但重点在于我们可以在多大程度上将我们当前的 UX 和 UI 的经验应用于这种新媒介？

九、VR UI可以走多远？

1. 新的交互体验

一些 VR 体验非常依赖虚拟环境，然而传统界面的确已经不是用户控制应用程序的最佳方式了。在这种情况下，您可能希望用户直接与环境本身进行交互。

想象一下，你正在为一家豪华旅行社制作应用程序。您希望以最生动的方式将用户转移到潜在的度假目的地。因此，您邀请用户佩戴耳机并在时髦的切尔西办公室开始体验。

要从办公室转移至目的地，用户需要选择他们想去的地方。他们可以拿起一本旅行杂志，轻轻松松浏览它们，直到它们被某一页吸引。或者，桌面上可能会有一系列有趣的物品，根据用户选择的不同，将用户带到不同的位置。

这确实很酷，但也有一些缺点。为了达到完美的效果，你需要一个更先进的带手持控制器的 VR 头盔。不过，像这样的应用程序要比传统的应用程序花费更多的精力来开发。

2. 革命万岁

现实情况是，对于大多数公司而言，这些沉浸式的体验在商业上还不可行。除非您拥有几乎无限的资源，例如 Valve 和 Google，否则创建类似于上述体验的产品可能成本太高，风险太大且过于耗时。

这种体验非常出色，可以带你到媒体和技术的最前沿，但通过新媒体将产品推向市场并不太好。

通常，当一种新形式出现时，它会是一个小众产品。随着时间的推移，成本的下降，有足够的人去学习和市场的资本注入，它就会成为应用广泛的产品。

随着 VR 头盔变得越来越普及，将会有越来越多的公司将 VR 融入他们与用户的互动当中。

从我们的角度看，相比于手机、平板，VR 用户界面本质上是更直观的，并且更接近用户，随着科技和市场的发展，VR 将会带来更大的价值。

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

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

《名侦探柯南》中总是提到福尔摩斯的一段话：「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.（排除一切不可能的，剩下的即使再不可能，那也是真相。）」这句话用干扰效应来解释最好不过，本期我们来聊聊。

想看更多设计法则，这个专题里全都有：设计法则专题

一、干扰效应（Interference Effect ）定义

干扰效应：一种现象，同时思考两件或两件以上的事情时，思考的过程会变得比较慢，也不准确。

二、干扰效应产生理由

有两种或两种以上的知觉或认知过程发生冲突时，就会产生干扰效应。

人们的知觉和认知的不同与心智模型有关，这些模式会独立分析、处理收到的相关信息，处理后会传送到工作记忆区，并作出诠释。当输出资料一致，诠释过程会又快又好。当输出资料不一致，就会产生干扰，需要一些其他的处理，以便更好地解决。解决这些问题需要浪费很多时间，对性能也会产生不好的影响。

三、干扰效应案例

1. 斯特鲁普干扰

斯特鲁普干扰（Stroop Interference）：刺激物不相干的一面引发了思考过程，因而干扰了刺激物相关方面的思考。

图标协同文字可以准确的向用户传递所要表达的内容，二手在常用的 App 中截出了一些图标，却发现现在很多的图标在信息传达方面有所欠缺。

举四个例子：

下面这组图标，「地方菜系、美食、晚餐、大牌简餐」几个图标没有表达出所要传达的信息，还有几个图标要借助文字才能表达出其含义。即使图标设计的非常精美，但是图标功能却存在缺失，而且这几个图标不能刺激用户对信息的理解，反倒是让用户更加迷惑。设计师也注意到了这个情况，所以最近改版后，信息传达变的更加直接，减少了干扰。

接下来的这组图标也存在同样的问题，这组图标想借助图标上产品本身的含义来传达给用户要表达的信息，但是这需要用户对这些产品本身的定位非常明确，如果不明确的话只能干扰用户的行为，例如，用户需要知道「吕」是个韩国洗发水之后才能拐弯抹角的联想到「全球超市」，再例如：中间「轻奢」图标，用的是劳力士绿水鬼，一款70000+还要靠等才能买到的奢华手表，二手认为跟轻奢的定义有矛盾，除非这并不是劳力士。

米家这套图标二手认为可以准确传达所描述的信息，因为米家有种类繁多的 loT 产品，有时候一款产品更是分为不同的版本，如果用户只是根据名称选择的话不仅繁琐而且十分耗时，所以在选择产品时，米家把所有产品外形准确刻画成图标，用户可以先根据自己产品的外形大致选择型号，再根据文字提示准确的选择自己产品的版本。

△ 米家App图标

滴滴这套图标表达也很准确，不同的服务通过不同的图标可以准确传达。

△ 滴滴图标

2. 加纳干扰

加纳干扰（Garner Interference）：刺激物一个无关的变化，引发了思考过程，干扰到跟刺激物相关的思考过程。

举个例子：如下图，指出单独一排的形状，比指出两排其中一排的形状要简单。两排形状紧靠在一起，激发了想说出旁边形状的思考程序，造成干扰。

根据上面这个案例，二手联想到了「个人中心」页面，大部分「个人中心」页面都选择了竖排列表布局。列表布局就是以列表的形式展示具体内容，并且能够根据数据的长度自适应显示，Material Design 建议列表是「可快速扫描」，适合显示类似的重复的内容。列表布局也是最快速的 app 布局方式。这种排列在某方面上就是降低了干扰。相比于列表布局，宫格导航是将主要入口全部聚合在页面，让用户做出选择。这样的组织方式无法让用户在第一时间看到内容，选择压力较大，采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

△ 列表布局和宫格导航

3. 前向干扰

前向干扰（Proactive Interference）：现存记忆干扰了学习。

举个例子：手淘的最近改版中，店铺首页顶部导航和底部自定义菜单结构化调整，但是有一个细节的变化让二手不断的犯错——返回按钮改成了关闭按钮，二手习惯点击左上角返回按钮来返回上一级菜单，改版后依旧习惯点击左上角，但是打开的是店铺印象，仅仅是图标左右位置简单的调换，已经让二手在使用的过程中挫败感强烈。这就是现在的使用记忆已经严重干扰了学习。所以产品在改版迭代的时候，尽量不要干扰用户已经熟悉的路径或是破坏用户使用习惯。

△ 手淘的店铺首页改版

4. 后向干扰

后向干扰（Retrosctive Interference）：学习干扰了现存记忆。

这个正好跟上面相反，二手不断培养现在的使用习惯，渐渐的就忘记了上一版的路径。

四、怎样预防干扰

要想预防干扰，就要避免输出思考过程中相互冲突的设计。知觉的干扰效应，通常是因为信息的传达过程中有歧义，或是因为把互相干扰的元素结合在一起。要把干扰效应降到，首先要求设计师用准确的设计语言传达信息，如果这样还是无法让用户很好的理解，其次可以考虑利用文字或者引导来告知用户。

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

为了帮助设计师提升基础审美。每周我们会挑选全球优秀拔尖的设计，帮你解读每个设计背后的思考！让基础审美养成设计好习惯的第一步。

------------------任何设计问题添加微信：uiskyss---------------------------

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