作为一名设计师，除了支持日常业务需求，对产品体验进行整体把控也是我们工作很重要的一部分。

即使体验再优秀的产品，也会不断出现各种各样的体验问题。这些问题累积到一定程度，就需要通过「驱动体验优化专项」来解决问题。

比如：新产品上线，以功能实现为主，缺少对体验细节的推敲，容易引起体验问题；产品竞争白热化，需要与竞品的体验拉齐；产品日常运营过程中，不断收到用户反馈、不断发现体验问题。

主导和推进体验优化专项是对设计师综合能力的考验，也是成为高手设计师必会的事情。

但业内相关文章并不多。

于是我们针对「设计师如何主导和推进体验优化专项」进行研究，从「定」—「找」—「解」—「推」四个环节进行总结，并为大家提供相关工具包和实际案例，以期可以开箱即用，并抛砖引玉、启发大家更多的思考。

共分为方法和案例两篇。本篇为方法篇。

无论是发现了问题进行集中地优化，还是作为一种优化制度持续优化，优化专项持续的时间都不会太短。为保证顺利进行，在前期需要作出明确的规划。

规划需要结合产品的目标与规划，与产品侧形成合力。所以规划要与产品、技术共同制定。

制定体验规划的五个要素

一般需要明确以下内容：优化范围、问题获取、优化目标、参与人员、时间节点。

体验专项的五个阶段

需要注意的是，规划要清晰、明确、可执行。

可以将整个项目划分为前期启动、问题获取、方案产出、需求落地、项目复盘五个阶段。

每个阶段均需明确：「时间」、「人物」、「任务」、「产出」。

在这个环节，我们需要整理已有的体验问题，并在必要时进行补充调研，对问题有更全面、更细节的认识。

如何获得体验问题？

体验问题通常来自五个方面：用户挖掘、设计走查、竞品参考、老板反馈和产品提供。

如何使用这些方法？

以上方法可以综合使用，例如用户反馈某个功能有问题，可以设计自查看问题是否清晰，可以做用户观察看实际使用情况，可以通过数据分析获取操作细节，也可以参考竞品了解不同的解决方案。

将方法按照使用场景、问题的指向性和结论类型进行分类，大家可以根据具体情况灵活选择：

区分坏点、优化点和需求点

首先我们来明确三个概念：

坏点：有明显体验问题的问题点，体验层面。

优化点：针对一个或多个坏点的解决方案，设计层面。

需求点：一个或多个相关优化点组成的需求点，或目前没有满足的需求，产品层面。

从问题解决角度来说，它们不仅仅是不同阶段的产物：

我们获得问题的最初，坏点、优化点、需求点可能同时出现在各种信息源中，混杂在一起。后续需要把坏点转化为优化点，成为问题解决方案。解决方案再拆分整合成为一个个需求点，进入产品计划，推动落地。

而且对于把握问题的本质，也至关重要：

优化点、需求点，如果追根溯源，都可以对应到体验上的坏点。我们收集到的优化点和需求点，可能并不是当前最好的解决方案，需要挖掘出对应的坏点，制定最优方案。

如何还原为坏点——追问法

只要不断地追问，就可以挖掘出坏点。

例如在审批流程中：

用户：我想要个点一下系统就能发通知给处理人提醒TA审批的功能。（这显然是个需求，需要还原为坏点）

追问：什么情况下要提醒TA审批？

用户：有时候时间紧迫，不审批就耽误事了；有时候虽然不耽误事，可领导没批感觉心里不踏实。

追问：什么时候比较紧迫？

用户：比如考勤，我今天请假，但明天就是考勤截止日了，必须立即批才行。

追问：为什么想要系统发通知？

用户：因为如果我直接提醒老板，我不太好意思，感觉系统提醒能好一些。

ok，至此，我们基本明确了用户的体验坏点：部分紧急流程需要及时去提醒审批，部分流程审批人想尽快结束，但申请人又不想以个人身份去提醒。

这个坏点需要深入洞察审批人未及时审批的原因，再给出解决方案很多，且不一定要采用用户提出的解决方案，而应该综合考虑，选用最佳方案。

归类—推导—转化

1.将问题点归类

分组是为了把同类或者相关的问题点聚合，寻找系统性的解决方案，而不是「头疼医头，脚疼医脚」。

举个例子：

可按照不同页面、控件、功能、流程、系统来进行归类，如：申请表（页面）、目录树（控件）、收藏（功能）、审批单（流程）、导航（系统）。

2.推导出优化方案

这个也是设计师最拿手的议题——「如何解决问题」，即针对一个/组用户痛点去设计方案。这里可以应用平时方案产出的各种推导方法，包括创意方法。

同时应该注意到，问题也许不能仅通过设计手段解决，所以此过程需要产研同学参与，确保方案有效且可实现。

3.转化为具体需求

方案只有转化为具体需求，才能进入产品规划、落地上线。这也是重要的一步。

优化方案和需求的粒度不同：有时候需要把优化方案拆成不同的需求分拆上线，有时候一个需求又能同时涵盖多个优化方案。这需要根据优先价值，结合产品侧的规划进行。

如何判断优化价值

每个问题优化价值是不同的，我们可以从产品侧、用户侧、数据侧三个方面去衡量：

产品侧：看可行性。是否契合产品的中长期目标？是否符合产品的发展节奏？是否易于技术实现？时间资源成本如何？

用户侧：看影响力。是否是用户使用的核心流程、关键页面？影响的用户范围多大？用户角色的权重（主要指B端）是否较大？

设计侧：看价值感。设计的ROI如何？能否体现设计的专业度？能否提升设计的话语权？

设计师虽然主导了体验优化专项，但又不掌握开发资源，如何更好地推动落地呢？需要掌握一些技巧。

推动落地中的四个对齐

对齐是为了及时对齐信息，减少团队中的信息差，使团队成员互通有无。不但可以提升协作效率，还能使大家感到被尊重和需要，使大家拧成一股绳。

四个对齐包括目标对齐、进度对齐、方案对齐和效果对齐。

目标对齐：确保在项目启动和各个阶段产品、设计、技术各方达成统一的目标。可以通过启动会和重要节点会议进行对齐。

进度对齐：项目周期比较长时，需要注意各阶段的进度对齐，掌握进度和风险。方式有排期进度表、定期例会、定期邮件等。

方案对齐：这是比较容易忽略的一点。需要产品、设计、技术甚至用户做方案对齐。我们目标明确，是为了切实解决用户的体验问题的，方案一定要有效，且可以实现。所以要关注方案是否能解决用户问题（方案评估、测试）、是否能够技术实现（方案评审）、方案实现效果（方案验收）。这点做得不好，优化效果就要大打折扣。

效果对齐：上线后需要针对两个效果进行对齐：一是优化效果如何、是否达成了目标（效果评估）。二是项目运行得如何，有什么经验和教训（复盘总结）。及时的团队复盘，有利于大家扬长避短、取得更好的成绩。

形成长期的体验优化机制

对于体验问题，我们不能寄希望于体验优化专项「毕其功于一役」，而是要建立长期的体验优化机制。

包括：定期整理用户反馈、定期走查、定期与产品技术沟通优化计划、阶段性复盘等，建立良好的体验优化通路。

相信看完文章后，大家对「主导和推进体验优化专项」的方法有了一定了解。后续我们将会发布实战篇，分享具体实例。

原文地址： 58UXD（公众号）

作者：环铁艺术家

转载请注明：学UI网 » 设计驱动！体验UP！高手设计师必备工具包

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

❶ 色块要有明显的主次，要有大小对比、色彩对比、轮廓对比等。

❷ 色块的数量要适当控制，太少了显得单调，太多了会很碎。

▲比如上图的色块就过于零碎了。

▲上图就要好很多。

❸ 不要把所有色块都严格对齐，否则会很死板。

❹ 由于几何色块本身比较单调、生硬，所以色块内的信息和图形可以灵活一点，可以增加一些细节，比如装饰元素。

❺ 不一定要把所有的信息都放进色块里，把个别信息、元素放出来，可以使版面看起来更灵活。

下面葱爷给大家分享几个案例，来看看色块排版具体是怎么操作的。

案例一：服装画册目录设计

下图是某服装画册的目录页设计，其实也是用了色块来排版，但是整体很混乱，信息分组不明确，而且很不精致，所以需要对它进行调整。

❶ 原稿几乎把所有信息都放在一个大色块一中，这么做色块就没起到区隔信息的作用，所以我把背景分成了三块（颜色全来自图片），最上面的放标题，下面两块分别放两组内容并对齐排版，使信息更清晰、更易读。配图保留原稿把图片放入方形色块的方式，只是去掉了多余的描边。

❷ 重新设计标题。黑色太过突兀，所以我把它改成了粉色，并给副标题也加了一个绿色块，副标题与标题以及下方的绿色块叠加，既增加了画面的层次感和设计感，也加强了上下两个空间的联系。

❸ 将内文的排得更精致一点。首先，选了一个欧式风格的字体，给内文中的四组信息分别加上序号，在风格与排版上与其他元素形成鲜明的对比。其次，把内文的颜色从黑色改成与对应色块的深色，融合性更好。最后，在小标题和正文之间加入短线条，做区隔和装饰的作用，并适当调整正文的行距。

❹ 用网格系统稍作规范就完成了。

方案二：儿童蛋白粉单张设计

下图是该版面需要展示的主要内容，文字较多，而且基本上是大段大段的，但信息组别并不多，大概可以分为四五个部分。

❶ 将属于不同组别的信息和元素分别放入色块中进行区隔，色块颜色来自于品牌logo和包装。

❷ 这样划分色块层级太少，而且矩形色块太硬，不太适合儿童产品，所以把标题和小标题都单独拿出来了，并把色块做了圆角处理。色块缩小后，产品图片有一半露在外面，正好起到打破方块的作用。

❸ 标题需要突出设计一下，但由于左上角有Logo，所以如果把标题拉大，那么左边就会有点拥挤，右边则会比较空，所以把产品图片和产品介绍的文字左右调换一下更好。功效证明的文字太多，句子也很长，所以我把它分成了两栏，提高文字的易读性。

❹ 把标题字体改成宋体和衬线体，并把产品图片下方的色块改成圆形，加强视觉上的对比效果和灵活性。

❺ 把标题的文字改成右对齐，并跟与下边功效证明文字的右栏对齐，这样左上角的留白会更舒服一些，平衡性也更好。

两个正文的大色块里全是文字所以略显单调，于是我在文字上下加了一组波浪线，细节上会更精致一点，到这里这个单张就排完了。

方案三：移动宽带海报设计

下图是移动宽带的一则促销海报，也是用了色块排版，该画面中的信息其实挺清晰的，主次分明，也有一定的视觉冲击力。问题在于美观性不够、形式过于普通不时尚、排版很呆板，下面我们来对它进行优化：

❶ 将该画面中的信息一一用色块框起来，原方案把“100M宽带优惠用”放在一个大色块里，层级关系太少，视觉变化不够丰富，所以我把它分成了三个色块（由于移动的调性还是比较年轻的，所以我打算用孟菲斯风格来做）。另外，原方案中的优惠套餐被处理成三个很平均的色块，看起来既分散又缺少变化，所以我把他们组合在了一起。

❷ 将“100M宽带优惠用”这几个色块进行适当错位排版，并在其下面增加一个大的色块（可以看作是电视机的屏幕），以使版面变得灵活且主次分明。

❸ 给文字色块加上立体效果，加强版面的空间感和信息之间的层次感。

❹ 只有文字和矩形色块的画面太过单调和生硬，所以我加了一些与宽带相关的图形元素进来，比如代表视频的播放器符号、代表网速快的闪电符号、代表互联网的箭头、代表网线的曲线。整个版面变得生动、活泼了很多。

❺ 在背景中加入网格底纹，使背景与主体形成呼应，视觉上也没那么单调，并把活动时间和办理方式从最下面的色块中调出来放在视觉主体的下方，与其他的文字色块形成对比，

❻ 再调整一点细节就做完了。

色块排版的用法还有很多，通过改变色块的风格、造型、组合方式等等，可以创造出非常多样的效果，所以用色块排版也不一定会很死板、很粗暴，比较适合表现时尚、冲击力强的设计需求，但确实不太适合用于表现高端、高级的视觉，这点需要注意一下。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学UI网》用色块打开排版的思路，简单好用!

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

比如以登录为例，当你把密码输错后，网站清空你刚刚才填好的表单，是不是非常让你崩溃？删除所有数据对用户来说很烦人，这会让你必须重新输入用户名和密码，即便只是拼错了密码而已。

因此，任何专业的用户体验设计师不仅应该考虑顺利的流程情况，还应该考虑失败时应该怎么办。

一、错误提示

错误提示应该让用户容易找到原因并方便理解。否则，他们可能没办法解决这些错误。所以对于设计师来说，一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么，如果可能的话，最好也提供解决方案。

左边的错误信息很清晰的解释了发生的问题，右边的错误信息对用户来说非常困惑。

1.1什么时候告知用户发生了错误比较好？

当用户出错后，首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式：

• 内联/实时：在输入时或移开焦点后立即提供反馈。
• 提交后/客户端：当用户点击提交按钮之后
• 服务器端：当请求发送到服务器后再返回反馈给用户

这些方法中的每一种都有其优点和缺点。

1.2内联验证

一般来说，当表单非常短小时用内联验证，因为它允许在内存中的数据仍然最新时更正错误。

你可以用内联验证立即告诉用户哪里错了。

”尽可能的进行内联验证“”这种类型的错误消息很容易被察觉“，此外，输入完成后立即告知错误，对用户的交互成本最低——UX专家Rachel Krause

另一位专家Luke Wroblewski建议，当问题的答案不明显时，可以使用内联验证。例如，在选择用户名时，用户可能不知道哪些用户名可用。在这种情况下，在用户输入数据时立即告知错误可能会有所帮助。

1.3提交后验证

另一方面，当表单很大且需要保持关注时，你希望帮助用户保持专注，而不是通过不断显示错误来打断他们。

“使用内联验证，用户必须在两种截然不同的思维模式之间反复切换:填写表单和纠正错误。这减慢了用户的速度，增加了认知努力，通常会降低用户的满意度。”Jessica Enders在她的书《设计UX:表单》中写道

1.4服务器端验证

服务器端验证是最不友好的方式，但却为网站提供了很高的稳定性。当需要二次检查用户的数据时，这种方法最有效。

1.5如何提示用户错误？

错误提示告诉用户他们做错了，但是他们究竟做错了什么，要如何修复它？很显然，清楚地说明错误，而不仅仅是显示Error:90803，对用户有很大帮助。

使用用户能理解的话，而不是用专业术语

1.6使用积极语言而不是消极语言

错误提示措辞要使用积极语言而不是消极语言。例如，如果用户遗漏了一个字段，与其说”该字段不应该是空的“，不如说”请填写此字段“。当使用积极语言时，用户不会因为一个错误而受到责备，这能减少用户的焦虑感，减少流失。

1.7必要时提供帮助

在某些情况下，用户无法自己修复错误，他需要额外的帮助。例如，当用户无法登录时，大多数应用只提供找回密码，而没有找回用户名。但事实上，用户名和密码都可能会忘记。因此，在这种情况下，尝试提供所有必要的操作和信息资源来帮助用户解决问题。

二、标签

标签是表单可用性最关键的组成部分。如果标签不清晰，那么其他元素就算把可用性做得再好也没意义。所以，不要让用户来猜测这里面到底要填什么内容。

不要用一些模棱两可的词，比如”数字“可能会让人感到困惑，一定要明确意思。

2.1将标签放在输入字段的顶部

许多研究表明，将标签放置在输入字段的顶部可以帮助用户更快地填写表单，因为它允许用户遵循一条垂直线而不是Z模式。但是，如果它占用太多的垂直空间，您也可以使用浮动标签。因此，如果你希望用户更快地填充表单，请将他们放置在字段的顶部。

将标签放置在字段的顶部和使用浮动标签，这两种方式都很有效

2.2将标签放在输入字段的左侧

另一方面，当你询问用户比较复杂的问题，用户需要更多时间思考问题答案的时候，研究表明将标签放在输入框的左侧会比较好。

当用户需要思考答案时，将标签放在输入框的左侧会更好

2.3标签应该是可见的，无论什么输入状态

无论你用什么方式，确保当用户填完内容后，标签是可见的。因为，当用户需要再次确认表单内容的时候，他们不用删除填好的数据来查看系统需要他们填什么。

不管输入状态如何，标签都应该是可见的

2.4减少不必要的输入项

要填的表单越多，用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到，可以将必填和非必填的字段区分开，减少用户的负担。

2.5可见性

不管状态如何，字段都应该是清晰可辨的。此外，活动字段和非活动字段之间的区别应该要明显。

输入字段应该有高对比度，在所有状态下都是可见的。

2.6自动激活PC端表单的第一个字段

自动激活表单的第一个字段，这可以提高处理效率，避免用户额外点击。

2.7帮用户预先填好

在某些情况下，你可以帮用户预先填好字段。例如，可以很容易地检测到邮政编码，或者某些数值可能是频繁的。在这些情况下，为用户填充字段。

2.8格式

含有大量小数的数字很难读懂。因此，当要求较大的数字时，需要考虑添加格式以支持可读性。例如，在询问卡号时，使用自动格式化:读取5678-9876-9738-8394比读取5678987697388394容易得多。

此外，当请求需要特定格式化数据时，要包含一个实例，让用户准确理解要填什么。

帮助用户了解如何格式化数据

2.9表单区域大小

输入框的大小应该要与所填的内容长度相匹配。比如，当要用户填写用户名时，如果显示的填写区域是一个长段输入框会让用户感到困惑。另一方面，如果你希望用户写一些反馈，但只能看到所写内容的最后一小段，那就很难用了。（彩云注：我就经常在一些体验不好的产品上碰到过这种情况，简直太难受了。）

如果你不能准确预测信息的长短，比如留言反馈，建议表单区域最好是能在用户填写内容触碰边界时，自动变高。

输入字段的大小应该与它预期的数据大小相对应

2.10为桌面系统设计灵活的表单

在键盘和鼠标之间切换很烦人。在理想的情况下，用户应该只使用一种媒介来填写表单，但有时，这是不可能实现的。因此，如果用户需要多种媒介来填写表单，至少要尽量减少切换。为此，将需要同一种工具的输入组合在一起。

另外，当创建一个网页表单时，要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。

2.11为移动端系统设计灵活的表单

当在移动设备上时，将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点，但几乎很少有APP显示支持输入电子邮件地址的键盘。

支持通过显示正确的键盘输入电子邮件

三、下拉菜单vs单选按钮

下拉框的使用比单选按钮更有挑战性，因为它需要额外的点击来打开它们。此外，用户无法提前看到选项，这可能会让他们感到困惑。因此，如果你只有少量的选项，使用单选按钮。如果选项的数量超过4个，下拉菜单的效果会更好。

3.1复选框

通过勾选复选框，用户应该是同意某些内容。我的意思是，他们应该说，“是的，我想要这个”，而不是，“是的，我不想要这个”。不幸的是，我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时，你又必须勾选复选框，像这样的伎俩对信誉是不合适的，所以不要动心使用它们。

通过勾选复选框，用户应该同意某些内容，而不是确认他们不同意。

四、结构

一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。

4.1从简单的问题开始

从简单的问题开始，从用户已经很清楚知道答案的问题开始，像名字、邮件这类。然后再循序渐进问稍微复杂的问题，像账户信息之类的。

首先，一个很自然的顺序，当你第一次见某些人的时候，你会找一些比较好切入的问题，比如叫什么名字啊之类的。其次，当用户已经填了一些字段之后，那么之后会增加他填完表单的机会。

4.2创建逻辑信息块

将不相关的信息按逻辑分组。例如，你可以将结帐表单分为“个人信息”和“帐户信息”组，将信息分组可以帮助用户一次只考虑一个主题。

通过对相关信息进行分组，使表单可被快速扫描

4.3单步VS多步表单

当你有很多问题要问的时候，你可能想知道哪一个最有效：单步流程还是多步流程。一般来说，单步表单的转化率更高，因为它看起来更小，而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单，单步表单就非常不错。

当用户被要求必须填写更多复杂信息时，多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心，可以给到进度条，提示还剩多少步。

4.4单列vs多列布局

一般来说，用单列布局会更好，因为可以帮助用户更好地扫描，也可以尽量减少用户遗漏填写。

但当用户多次填写同一个表单时，他们更喜欢多列表单，因为这样不会浪费时间滚动。一般来说，在B端应用中这种多列表单会比较合适。

五、按钮

设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊，会容易劝退新手用户。

根据用户按下按钮会发生什么来命名按钮

5.1提高用户的容错率

对于更复杂的表单来说，按钮最重要的一点是，应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子，如果用户点了在线帮助时，他已经填好的数据不应该被丢失。或者，如果用户由于意外点击了按钮，请求不应该被提交。

5.2主要按钮和次要按钮应该很容易区分

为了避免点击错误的按钮，用户应该能比较容易地区分主要和次要按钮。另外，最好不要只依赖颜色，样式上最好有比较大的差异。

让主要和次要的按钮样式上有比较大的区分度

5.3正确的标签按钮

按功能明确地标注按钮。例如，如果按一个按钮可以创建一个账户，在按钮上的文案叫”创建账户”要好过“提交”

总结

当用户打开表单时，他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。

不幸的是，这里面提到的许多错误，并不需要多么高级的技巧，而是因为设计没有同理心。仔细思考你的设计流程，检查是否能让所有内容对不同背景和专业知识的人都是清晰的。

通常来说，一般要达到以下目的，大多数指导原则都来自这些规则：

• 用户应该只输入一次数据
• 用户应该填尽可能少的信息
• 用户应该只需要记住少量的信息
• 用户检查和恢复错误内容应该要很容易

原文地址：彩云译设计（公众号）

作者：彩云Sky

转载请注明：学UI网》想把表单设计做到极致，居然有这么多细节需要注意，学到了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

话说自从著名资本家胡晓波先生对训练营的同学下达坚持打卡两年送一台苹果手机的许诺之后，同学们纷纷战意满满，激情四设，每天就是手机碎片+1，手机碎片+1 的做练习…而本意是激励大家好好练习的波哥，整日忧心忡忡，省吃俭用…好怕自己两年后被原地榨干…

为了更好的协助大家吸资本家的血，丰富自己的武器库。本次教程整理了八个由易到难的 LOGO 设计方向与相应的 Ai 技法，大家可以用闯关的方式一各一个的逐个攻破，体验感会更好哦！话不多说，我们开始吧！

文章末尾另附视频版本，对步骤有疑惑的同学可以跟着一起实操一遍，嗯，是真的想教会你呢。

PS：本文所有案例均来源于网络，只用作分析技法。

首先出场的是一个雪花造型的 logo，复杂的线条纹路让它看起来既神秘又迷人，虽然看起来很麻烦，但其实我们很容易就能发现它的规律性：

1. 由六个相同的单一元素旋转复制得到；

2. 线条倾斜角度均为 60 度。

OK，掌握了这个规律，我们用网格大法很轻易就可以将它绘制出来，来，上步骤！

首先我们先画出网格，用几条等距的直线，然后群组整体旋转 60 度复制左右两组，即可得到。

想要做这种倾斜角度相同的线条，网格可以帮助你更好的进行规范。

然后我们沿着网格将单一元素的路径用钢笔工具绘制出来，这里需要注意两点：一是每一个端点处最好对齐网格的点；二是有转折的地方要一笔连过来，方便后面加圆角处理。

画好路径后我们将它转曲，然后添加圆角，注意添加圆角的规律，一般外圆角会比内圆角大一些，而且相同的角度一定要设定相同大小的圆角。

单一元素处理好之后，我们把它沿着中心点旋转复制 60 度绕一圈，就可以得到我们想要的图形了，一般操作就是复制一个然后 CTRL+D 进行重复即可。

最后添加颜色和排版就可以了。

一般越复杂的 logo 想要做的出彩，往往都需要一些规则性在里面，而网格能够很好的帮助我们去实现这种规则性。

这是今年意大利申办 2030 年世博会的 LOGO，整体造型由罗马古城门向内进行线条发散组合而成，寓意各国文化的友好交流。这种线条混合发散的 LOGO 既简单又出效果，用混合工具即可轻松完成，下面我们来看一下在制作过程中有哪些需要注意的点。

首先我们将需要混合的部件准备好，也就是建筑的外轮廓以及大门的外轮廓。注意一定要保证左右对称，否则混合起来会十分混乱，然后下面的底部先不要连接上。

这一步需要注意下面连接处不要合并，不然会出 bug。

选择混合工具，分别点击城堡和大门，将指定步数改为一定的数值，数值越大，越密集，这里设定为 35。然后就得到了向内混合发散的感觉了！

混合完成之后我们扩展出来，将最外圈轮廓直接向外扩大复制出轮廓线即可。

最后我们整体进行转曲，然后添加颜色就搞定了！可能有的同学会觉得这种多线混合的 logo 过于复杂，会不会不太好应用，但其实这种属于活动型 logo，并不需要用个五年十载，活动型 logo 更着重考虑当下，可以做得更个性，一切以视觉为出发点！

看完了国外的，再来欣赏一下这个极具中国风的湖州城市 LOGO。这个 LOGO 的亮点在于它的正形背景部分是由不规则的水墨感条纹组合而成的，文化气息拉满的同时让图形更加活力生动，我们来看看这种非对称条纹该怎么绘制。

首先我们将椭圆部分的线画出来，第一步找到最高点和最低点，然后用混合工具进行混合，得到由曲线逐渐变成直线的过程线段。

然后手动的将各个线条扩大到椭圆轮廓的位置，并调整好粗细和间距。

到了最关键的一步了！我们将每条线的描边配置改为这个不规则的样式，在描边窗口最下面就可以找到，记得适当调整粗细保持过渡自然。

然后我们把每一条线都改成这个描边样式，并将下半部分水波纹的地方也绘制出来，注意下面的地方描边可以调的细一些。

画好背景后，我们将负形部分的塔形建筑放到条纹的中间，并居中对齐，改为白色。

光变成白色肯定不行！我们要的是镂空！这里直接选择所有图形，然后用路径查找器里面的分割，可以将所有图形分隔开，然后用魔棒工具选择白色部分，直接 Del 删除即可。

最后加入渐变色！效果就拉满了！这种非对称式的线条相较于普通的线条，更加灵活生动，也天生自带中式笔触的感觉，以后大家碰到中式 logo 的命题，可以考虑尝试一下这个风格。

这个 LOGO 在 2D 平面的基础上，融入了褶皱感 3D 立体的感觉，同时它的组合结构是类似于飘带这种飘逸柔和的造型，比普通的方形更加优美。下面我们来看看如何做这种飘逸的结构以及如何进行视觉 3D 化的实现。

其实如果你的钢笔工具玩的 6 的话，直接画也是可以的，但是相信在座的各位钢笔都不太行，甚至很多同学经常被只会 Flash 的胡晓波嘲讽，那能忍吗？这里教大家一个曲线救国之路，先画一条直线，然后选择扭曲和变换里的波纹效果，大小设为 100，隆起数改为 1，就得到了一个…emmmm，优美又不太对劲的曲线。

将这个波纹线砍掉一半，嗯，总算正常一些了。

把它向下复制为六个，并适当调整一下间距。

将组合好的图形向右镜像复制一个，然后放到它的下面，对齐左边的端点并连接，形成一个翅膀的感觉。

然后再次左右镜像复制一遍，基本的造型就出来了。

选择实时上色工具，分别按路径填充黑色部分。

最后删除掉多余的描边，并合并黑色部分，效果就出来啦！用这个方法可以做出来很多种曲折线，大家可以尝试一下，肯定可以组合出各种好玩的样式出来。

像素化风格的 LOGO 也是常年比较流行的，不光光是游戏行业，其实很多企业类的 LOGO 也可以非常好的利用像素化进行视觉呈现，很多同学只闻其名，不懂其法。下面我们用这个案例来看一下像素化 LOGO 的设计步骤。

由于是企业类的 logo，在造型上就相对严谨一些，除了正常的方形，这里再给大家介绍几个常用的比例（如上图），经过比较，发现青铜比较接近于原 logo…那我们就用青铜的比例，做出王者的效果。

绘制网格有两种方法，一个是画好矩形之后，选择对象→路径→分割为网格，二是直接用矩形网格工具绘制。这里因为我们提前画好了矩形，所以直接用第一种方法，行数和列数分别设为 52 和 11。

画好网格之后，就可以请出我们的老朋友实时上色工具，在网格中挥洒你的创意。

用实时上色工具画好之后，需要扩展一下，才能提取出画出来的部分。

最后我们将网格线删除，就可以得到我们画好的图形了！纯纯矢量的像素化就这么搞出来了！这个方法是通用的，你可以通过改变不同的网格数量，来绘制不同像素块造型的图案，比如你想绘制常规的正方形像素块，那行数和列数设为相同的即可，之后就在里面进行填充色块，真真正正体验到画画的快乐！

平面构成作为设计学的基础学科，通过点、线、面三者规则或不规则的编排和组合，形成极强的抽象性和形式感，它在 LOGO 的实际应用中也非常容易出效果。这个 LOGO 就是通过线与面的结合来进行抽象创作，下面我们来看一下具体的实操过程。

第一步我们先把六边形轮廓和中间的三角形画出来，其实就相当于我们新建一张画板，在里面进行设计是一个道理。

第二步我们画三条辅助线来方便后续的操作，注意这里的线都是有规律的，比如最下面的线是与三角形形成 90 度相交，而另外两条线都是沿着三角形的边进行延伸。

第三步我们将下半部分的线绘制出来，具体操作如下：

1. 沿中心画一条直线，再沿六边形边画一条直线；

2. 两者进行混合，步数设为 24；

3. 左右进行镜像对称复制；

PS：这一步其实也是在画辅助线。

第四步我们接着用实时上色工具，将我们需要的部分提取出来，这里实时上色工具其实就是充当了马克笔的作用，大家可以想象一下，这样比较好理解。

画好其中一个部分了，剩下的我们直接旋转 120 度复制出来就可以，这里也是软件操作的方便之处，比在纸上快多了，容错率也高。

旋转之后我们发现左半边部分黑色会大出来一块，所以我们需要取消编组后，将这个部分单独置于底层，就可以了。

绘制这类 LOGO 的核心要素就是画好辅助线，同时特别锻炼人的思维和创意能力，它更像一件数学与美术结合的艺术品，当你成功完成之后，一定会成就感满满。

这一趴给大家带来的是苹果 2022 发布会 LOGO 中多层彩色混合渐变设计小技巧。既然大家都是即将拥有 iphone16 的人，那实时掌握自己手机的未来动向也是必须要做的事情。来吧！学起！

第一步肯定是要先画好基本造型，不管是苹果也好，是梨也好，造型画不好，再好看的渐变也救不了你啊！

然后我们先给它添加渐变色，这个大家应该都会。

接着我们需要给它添加一个描边，这里要把透明度模式由正常改为柔光，并适当降低透明度，这样外轮廓不会过于生硬，能够更好的与图形渐变进行过渡。

到了最关键的一步，我们将图形向内缩小复制一个，给它填充上黑色，然后用混合工具将两者进行混合，就可以得到一个由外向内逐渐消失的渐变效果了。

然后我们选择比例缩放工具，向内缩小 80% 并复制出来，接着按 CTRL+D 重复复制即可。

其他几个苹果只需要更改相应的渐变配色就可以啦。

身体做完了，上面的小叶子也是用同样的方法就可以搞定了，右下角另一个版本的用相同的做法也同样能够实现，但是想要完全还原它的投影效果可能要用到 AE 插件来完成，这里挖个小坑，感兴趣的同学可以尝试一下。

东京奥运会作为史上极具争议的一届奥运，带来了不少热点和话题。相较于它鬼畜的开幕式和一些莫名其妙的的比赛细节，它的 logo 却实实在在的堪称顶尖硬货。由很多很多不规则的小方块堆积而成，看似琐碎无章法，但其实拥有极强的数学逻辑和艺术美感，下面我们就来看一下它的设计过程。

看到这个图，是不是就能瞬间明白一些东西了？原来确确实实是有规律的，所以我们只需尝试画出其中一个部分，剩下的重复复制即可。

先画出一个十二边形，然后复制一个旋转 90 度，将它们进行居中对齐，这里需要手动调整一下大小，保证里面的顶点对齐到外面的边上，中间我们画一个小圆，方便后面找到中心点。

这一步我们先在最上面画出三个菱形，具体操作如图。

然后再找到中间部分，一样通过已经存在的三角形来进行旋转 180 度复制，之后合并出新的菱形。

和之前一样的手法，一样的配方，继续画菱形…

继续拼贴菱形，不过新加入的红色部分和之前的黄色部分是重复的，所以我们直接复制过来就可以了。

继续增加红色部分菱形，具体操作步骤如图。

右边再添加最后一块菱形，这一部分就算完成了！

下一步我们需要找到各个边的中心点，将它们进行连接，这里给大家安利一个比较常见的小插件（百度搜索 Ai 插件很多下载地点，由于版权问题就不直接分享了）里面的等分路径可以快速帮你定位到线段的中心点。另外里面还有很多其他的野路子，大家可以自己慢慢玩。

找到中心点之后（如上图左）就可以将它们分别连接起来，画出方块！如果说之前的几步完全不知道在干嘛的话，那么到这一步是不是有种豁然开朗的感觉？

后将画好的部分绕中心旋转一圈，再删除掉外轮廓线，终于完成了…头发掉了好多…向大师们致敬，salute！这个方法其实也是平面构成中的一种，大家可以跟着自己做一遍，一定会有自己的收获。

Okkkkk，那么今天的教程到这里也就结束了，不知道你们能攻克到第几关呢？临摹不是目的，学会举一反三才是最重要的。觉得意犹未尽的朋友抓紧跟着下方视频版本再来温习一遍！！总之，是很感谢今晚的相伴，感谢三连支持，朋友们，giao 辞！

▼ 点击图片前往原文观看视频版

原文地址：胡晓波工作室（公众号）

作者：告白天

转载请注明：学UI网》探索优秀LOGO背后的技法与思路！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

刷新在产品中属于基础功能，方便用户获取最新动态，是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等，设计发挥的可控性较大。

今天黑马哥就结合一些优秀的线上案例，和大家聊一下关于产品刷新设计的千奇百态，希望抛砖引玉，和大家一起进步。

分享目录

一、关于刷新设计

二、刷新的设计形式

三、线上优秀案例分析

四、总结

一、关于刷新设计

在产品中刷新对于用户来说并不陌生，是经常使用的基础功能，便于用户获取新动态。在一些可以提供内容更新的产品中，刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为下拉刷新，其实刷新的动作不仅限于下拉手势交互，也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时，底部标签栏首页图标会变为刷新的操作，通过点击实现页面内容的刷新；也有产品在上滑页面时实时加载完成刷新，就像很多影视类产品或者瀑布流设计的产品。

刷新动作不仅可以满足用户的求知欲，也能通过源源不断的内容增加用户黏性，提高用户的使用体验。

二、刷新的设计形式

简单的刷新动作已经不是简单的设计了，在产品设计师的创新中呈现出了众多的优秀案例，下面为大家梳理一下不同的设计表达形式。

2.1、系统级表达

系统级表达是采用系统默认的一些处理形式，类似于花瓣循环的动态形式，属于比较常规的表达。也有很多产品采用系统级形式，用户理解度较高，设计创新的角度来说欠缺一些，表现形式比较生硬。

2.2、情感化文案表达

为了带给用户更有温度的设计，除了在图形层面进行情感化设计发挥，在文案上面也可以更加情感化。有产品使用俏皮可爱的话术，每次用户刷新都呈现不同的文案，与用户产生情感共鸣。

2.3、动态形式结合

刷新的动态表达形式非常普遍，图形动效和动作演变等，能够体现出加载的动作。动态形式结合可以使得趣味性更强，动画演变的过程也能降低加载等待过程中的焦虑感。

2.4、IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感，也能带来更加情感化的体验。IP 形象结合到刷新设计中，伴随着动态演变，以此来体现加载的过程。设计形式动感化，趣味性强且感官体验较佳。

2.5、品牌基因结合

立足于品牌做设计，品牌感可以带来差异化的设计表达，也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中，带来差异化的刷新体验。

2.6、业务属性结合

根据业务特征设计刷新图形，让用户在刷新的过程中感知产品的业务属性，也是强化记忆点的有效形式。

2.7、多功能结合

刷新设计更多的还是为了给用户提供更多动态内容，除了这个底层需求以外，也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”，进入活动空间或者其他功能模块，也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法，在有限的资源空间发挥更多操作价值。

2.8、其他设计形式

随着体验的重要性升级，产品设计师会在更细微之处探索出更优的解决方案，做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计，从感官层面带来更多视觉感的表现，从体验层面结合更多辅助功能或者业务，发挥更多使用价值。

三、线上优秀案例分析

通过以上的梳理我们对刷新设计有了深入的了解，下面通过一些优秀的线上案例来进行分析，辅助大家掌握更多差异化的设计表达。

3.1、情感化的文案设计

刷新除了在图形设计和动效层面发挥以外，多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊，通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时，都会显示不同的文案内容，有功能引导的提示文案，也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度，不失为一种差异化的功能设计探索。

3.2、动态化 IP 形象

针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。

3.3、刷新带来美食诱惑

在完成刷新功能属性的同时，还能将产品的属性或者服务卖点强化出来，赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中，采用汉堡形象结合层级动效进行表达，让人眼前一亮。动效拉长的汉堡不仅体现出份量感，激发用户的食欲；汉堡形象就十分麦当劳，展现出品牌关联性。

3.4、趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多，不仅可以带来情感化的体验，也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象，还通过下拉的程度将形象拉长，最后再配合表情和动态营造出趣味性。

3.5、动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在，在下拉刷新过程中完美的结合了转动条，还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点，装饰元素的动态效果也强化了氛围感，非常符合产品的属性，是一个不错的刷新设计案例。

3.6、品牌化路径动效

刷新设计中采用路径动效的表现形式比较多，主要集中在图形路径动效和品牌文字路径动效，图形通常是品牌 LOGO 为主，这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效，完美的匹配了图形轮廓，动效的流畅度也比较自然。

从品牌层面着手于刷新设计，如果放弃图形层面的元素选择，品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中，以路径动效的形式进行表达，最终将笔画打散散开。设计表达依然延续了品牌感，也区别于其他产品的刷新设计，在差异化方面呈现出了自身的品牌特征。

3.7、一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽，下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影，下拉不松手就会一直处于骑行状态，下拉的反馈体验度做得很好。

3.8、漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多，特别是行走和跑步，这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中，在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达，流畅的动效完美的呈现了学生放学或者上学时，背着书包漫步的场景。这样的呈现方式不仅贴合功能含义，也能与用户产生更好的情感共鸣。

3.9、业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程，带有业务属性的图标不仅可以直观的突出产品特性，3D 图标化之后视觉感十足。图标切换带来的动效流畅自然，匹配刷新动作的差异化也非常明显。

3.10、刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求，一些电商类产品也赋予了刷新多功能的属性，带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时，短距离下拉依然属于刷新范围，继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下，融入了多功能场景，开发出功能或者活动的全新曝光入口。

在商品详情页时下拉则无法提供刷新服务，为了给予更好的反馈设计，下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈，足迹的提供也更方便用户做出选择。

同一个产品也并非只能呈现出一种刷新设计方案，不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点，刷新的过程以动态形式表达品牌字，简单粗暴的传递出品牌感。

3.11、结合 Slogan 完成刷新

刷新不仅只是内容的更新，产品设计中呈现出更丰富的表达，比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命，带来丰富多样的使用体验。

58 同城首页在下拉刷新时，除了体现刷新动态以外，也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度，更快的将产品的定位传递给用户，增加用户对产品的好感度。

3.12、保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计，区别于常规的氛围营造，设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺，在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程，整体的过度和衔接也恰到好处。

3.13、探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外，背景层发挥的案例相对较少，除了配合传播性质的设计。

AcFun 在下拉刷新时，背景层设计成类似于宇宙空间的插画场景，刷新的过程就像探索一样。配合卡通形象左顾右盼的动效，带来的感官效果也是非常不错的。

关于刷新设计的优秀案例很多，这里就不一一例举了，以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品，总结更多的优秀案例。

四、总结

刷新设计作为产品中使用较为频繁的基础功能，与用户的接触也是非常密切的，设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验，或者是多功能结合等，都是产品设计师重点发挥的模块之一。

本文以案例分析为引导，为大家梳理了刷新设计的形式与思路，希望可以抛砖引玉，带给大家更多的设计灵感。总结观点属于个人理解后的呈现，如有欠缺大家选择性吸收和修正补全。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》刷新设计的千奇百态（UI设计）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司