如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
即使是进的技术，也通常有一个非常原始的起点。从最初的手机到如今大规模普及的智能电话，其实经历了差不多30年的演变。
随着硬件设备和各种技术的逐步成熟，每个人都想知道技术的下一个变革在哪里。在诸多被广泛关注的革命性技术当中，AR，也就是现实增强技术领域所发生的变化，是最引人瞩目的。
随着苹果、谷歌和亚马逊这样处于排头的公司开始在 AR 领域发力，这种技术正在逐步成为主流。
「AR能够将人的表现力放大，而不是孤立起来」——Tim Cook
虽然 AR 和 VR 经常会被混淆，但是两者其实并不相同。从关系上来讲，AR 和 VR 并非是对立的敌人，更像是血脉相近的堂兄弟。两者之间的区别其实很简单：在 VR 中，我们眼中的物理现实世界被计算机所生成的数字世界给彻底取代了。相比之下，AR技术让数字信息直接叠加在我们可见的物理世界中。如今很多人都已经借助类似 Snapchat 滤镜之类的东西感受到 AR 在现实生活中的运用。
这种集成于各种摄影和即使通讯类软件中的AR滤镜，和如今 iPhone 在设计和研发上隐约一脉相承。
Tim Cook 在接受采访的时候曾经提及，AR 在他眼中并非是一种孤立产品，而是一种核心技术。对于这一技术，Cook 是这样评论的：「智能手机是给每一个人的，我们没有必要将它孤立而片面地放在某一国家、地区或者某个垂直市场中来看待，它是面向每一个人的。我们认为 AR 是一个宏大的技术范畴，对此我感到非常振奋，因为在此基础上可以从方方面面来改善人们的生活。」
根据 Deloitte 所发布的一份报告，在年营收超过1亿美元的企业中，近 90% 都已经在其业务或者APP 中开始应用AR或者VR技术。就目前的数据来看，他们这方面的财务状况也相当乐观。到2023年，AR 和 VR 相关的全球市场估计将会达到944亿美元。
当然，另外一方面企业和品牌也在竭尽全力地挖掘在未来商业领域的潜力，这也是他们推动AR技术的诸多原因之一。
接下来，我们可以深入讨论一下 AR 的内涵外延，以及它会如何改变我们和世界的互动方式。
我们生活在一个大数据所驱动的世界当中，大型的结构化和非结构化的数据，包裹着我们地每一个动作。这些数据本身就已经是一个很大的话题了。设计师和技术革新者们一直在思考如何理解这些信息，并且合理地运用它们。
那么AR 将会如何切入到其中呢？
简而言之，数据是二维的。它存在于计算机屏幕上，而物理世界是三维的，这两个世界将会怎样协调一致？AR 的作用就在这个时候发挥出来了。
基本上， AR 技术所充当的就是将数字和物理现实接驳在一起的那个接口。AR 所带来的是一个全新的技术范例。在这个新领域当中，数据的复杂性将会被分析和转化，以更加直观的交互式图形和动画所替代，覆盖在现实世界层以上。
在这一点上，AR同法国哲学家鲍德里亚所梦寐以求的超现实主义在精神内核上高度统一。对于有想象力的技术革新者和科技企业而言，AR 技术的潜在应用场景是无止境的。这一技术将会被大规模普及开来，在未来，你不必像现在这样仅仅只能在游戏中体会这一技术。当然，像亚马逊和 Facebook 这样的商业巨头也开始认真探索如何更有意义、以更有影响力的方式来使用 AR 工具。
而这也是大势所趋。下面我将会拿出一些更为创新的方式，为你呈现 AR 技术是如何具体地改变我们的生活的。
原本在游戏中作为噱头的 AR 技术逐渐脱颖而出，在通信、商业和建筑领域开始展现出无尽的潜力。
而最能感受到AR的这种影响力的，是在品牌和营销市场上。
由于 AR 能够承载复杂的数据，并且将它们转化为可同现实世界进行沟通的交互，身为用户，我们能够从中吸收更多的信息。换句话说，AR 将可以更好、更快更加有效地影响用户的决策机制。我们如今常见的社交媒体和大量的信息，已经让人疲劳了，而 AR 这种全新的切入方式，将可以改变营销，进而影响世界。品牌能够在 AR 的协助下以前所未有的方式来宣传自己和产品。
举个简单的例子。AR 所带来的体验并非传统的二维平面的图像，它让用户可以走进商店，尝试产品，帮你判断产品的实际效果，它用 X射线一般的视觉帮你更好地了解眼前的一切，把所有的可能性明明白白地展示在你眼前，甚至提供360度无死角的视觉。
「在后网络时代，AR就是狼来了的故事——大家早已听说过，但是很少见到足够优秀的呈现形式。」——Om Malik
对于一线的设计师而言，AR 技术是一件听起来非常令人兴奋的事情。但是事情的前后逻辑我们确实需要仔细捋一下。Pokemon Go 的成功到底是源于AR技术的加成，还是源自于品牌本身原有的吸引力？
另一方面，AR 技术改变生活各方面的巨大潜力直到现在才刚刚显现。别忘了，移动端设备的普及和成熟是经历了超过10年的酝酿，直到今天才说得上是比较成熟了。对于 AR 而言，想要立竿见影地看到某种效果，你可能要求有点高。
AR 是一种全新的媒介。设计师面对的最主要的挑战，是要进入三维空间进行思考。在接下来用户要如何同APP进行交互？他们会做出什么样的动作？附近会有其他的人和物体吗？这种情况下用户会做什么？它并非看起来那么简单，本质上这是一次概念上的彻底飞跃。设计师需要在脑海中开始反思这件事情了。
当然，只有时间能够最终证明 AR 是否会成为 iPhone 一样划时代的产物。一切是会因为 AR 彻底改变吗？又或者像 Hi-Fi 一样进入小众市场，逐渐收缩？可以确信的是，AR 技术是有相当大潜力的，这就是为什么你会听到越来越多相关的传闻。一旦一项技术开始每天都被提及，那么一切就皆有可能。我们很可能将会在未来以一种截然不同的方式来体验这个世界，谁敢轻易否定呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.字号的设置
2.根据需求随意组合
3.英文的行高
4.英文的行间距
5.中文的行高
6.中文的行间距
7.行高的禁忌
8.标题行高
9.正文行高
10.混合编排
11.字体选择
1.字号的设置
字号就是字体的大小，文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。页面的字号我是以4为基数进行递增的，最好采用偶数。像14号字的正文和13号字的注释，这种比较小的字可以不以4为基数来做。不管设计师怎么去定义字号，只要视觉上美观大方并具有关联性，采用哪种规则去约束它都可以。
另外所有的字体都要调试出深色和浅色两种配色，并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。
2.根据需求随意组合
当我们定义好字号，标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系，字号差异越大它们的层级关系就越明显，但它们之间的差异又不能太大，差异过大会影响整体的视觉平衡性，给人一种不和谐不自然的感觉。
例如：标题字号20px搭配正文字号12px；标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。
3.英文的行高
在设置文本行高的之前，需要理解一下“行高”与“行间距”的差别。前端DIV+CSS和设计Affinity Designer等绘图软件都是以“行高”来进行定义的。在CSS-Style line-height属性是行高，值分别以百分比、数值和像素来表示。例如：h1.test {line-height:112px}，那标题h1的行高就是112像素了；绘图软件中控制行上下距离的也是行高。好的言归正传，中文的行高与英文行高会有一些差异，英文的行高指的是一行英文的基线与下一行英文的基线之间的距离，如下图所示。
基线是英文字体结构中的概念，先简单了解一下它吧，以后讲到字体的时候再讲它吧。我们在绘图软件填写行高的数值时，改变的就是上图所示的这段距离。
4.英文的行间距
英文的行间距就没有行高那么复杂，也不用画基线。英文的行间距跟中文相同，指的是一行英文的底部线与下一行英文的顶部线之间的距离。其实也可以简单的理解为“行与行之间的距离”并称之为行间距。另外英文底部和顶部都有对应的专有名词的，在英文字体结构中最顶部/最底部隐性的两条线称为“上沿线/上限线”和“下沿线/下限线”。这块的知识先了解一下就行，以后在字体结构中会讲到。
5.中文的行高
接下来理解下中文的行高。上面讲到说英文的行高是由基线决定的，但中文字体与英文字体结构不一样，中文里没有基线的概念，那该怎么定义行高呢。中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距离。中文字体结构中没有上沿线/上限线和下沿线/下限线的概念，它们只存在于英文字体结构中。
6.中文的行间距
中文的行间距就比较好理解了，跟英文的行间距的道理相同。是指一行中文的最底部与下一行中文的最顶部之间的距离。也可以理解为行与行之间的距离。
虽然说行高与行间距的差别不太好区分，而且还有些绕，但理解它们还是很有必要的。
7.行高的禁忌
不管是标题、正文还是注释，他们的行高都不宜过高，行高过高会导致内容不易阅读，文字之间的整体性也会被打散。标题的字号越大行高应该越小，正文的字号越小行高应该越大。当然这些规则都是相对的，行高大小要合理把控，不能太大或过小。那要如何合理设置行高呢，往下看。
8.标题行高
标题的行高由字号决定的。平面设计中有时候可以把行高设置与字号相同，例如120pt的字号设置120pt的行高是没有问题的。在页面中行高是这么计算的，字号x倍数=行高。例如下图所示，大标题H3设置的字号是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字号与行高的倍数是一点点测的，因为字号与行高的比例不会小于1.0（1倍），我就根据自身审美进行测试，从1.0/1.1/1.2/1.3....开始测，直到测出自己满意的行高。如下图所示，带颜色数字的是倍数。
最终的行高还是由设计师直观判断决定的。所以做设计要理性中夹杂感性，规则与创意并存才是一个优秀设计师需要兼备的品质。那我就拿中文字号36px和英文字号24px来举个例子，这样大家好理解一些。如下图所示：
从测试结果中找到自己满意的行高就可以了。字号x倍数=行高，这里也不怕倍数小数位太多的问题。在绘图软件中是以像素为单位，但有时候前端代码会用父继承单位“em”。例如：大标题H3的字号是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那转换为前端代码就是h3.test{line-height: 1.3em}，直接做约等于就行了，差一点点看不出来的。
9.正文行高
来接着往下讲。正文行高与标题行高相同，差异就字号的不同选择的行高也不同。标题行高倍数大概1.0-1.6不等，正文行高倍数大概1.6-2.4不等，这也没有一定的标准，还是得根据项目情况与实际效果综合来看。如下图所示，带颜色的数字是行高的倍数。
说到这里，经常有人问我正文的行高的值应该怎么设置，大家在做设计时都会采用1.5/2倍关系，但这不是绝对的，行高的倍数也是受字号大小影响的。像新浪新闻的正文，字号是18px，行高设的是32px，即字号（18px）x1.777（倍数）=32px（行高），如果行高倍数设置2倍以上，字与字之间的距离变大，就不太好阅读了。
10.混合编排
好的，完全理解上述所有知识就可以把标题、正文和注释进行混合编排了。大标题字号40px、正文字号20px、正文行高40px、注释字号18px、注释行高32px、标题与正文的间距88px、正文与注释的间距64px。
11.字体选择
选择字体就没有什么技术含量了。做页面常用字体就只有那几种，微软雅黑、宋体、Verdana、arial、Times New Roman，就不举例说明了。中文网站最常用的就是微软雅黑+Arial，浏览器兼容性也最好。读到这里有人可能就会问了，载入其他字体也可以啊，是的做企业网站可以载入其他字体，但像做功能页面啊、后台页面啊，载入其他字体几乎就不可能了。所以还是要估计实际项目需求/品牌需求来选择与其相符的字体样式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
随着折叠屏手机的发布，我们看到未来手机的形态可能会朝着柔性手机方向发展，那么，让我们来思考一件事：如何在折叠屏手机上做交互设计呢？最近三星、华为和柔宇各发布了一款折叠屏手机，它可以把一台8英寸的平板电脑通过折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属于新的手机品种，也是我目前最看好的手机形态之一（未来手机的形态应该是柔性手机，现在已知有柔性电路板的存在了）。通过几天的观察和思考，我认为折叠屏手机有以下好处：
以上基于「展开」态的想法，在折叠状态下还有一些不错的想法供大家思考。
华为在MWC2019上演示了一个名叫「镜像智拍」的功能，它可以让被拍摄的人实时看到拍摄效果，并调整面部表情与姿势。用自己最了解的角度及构图使得拍摄事半功倍，妹子们再也不用担心自己的男朋友把自己拍得很丑了。
在折叠状态时可以把背面当做一个附加的交互空间，实现一些简单的交互操作，例如打吃鸡游戏时我们可以考虑在背面屏幕增加一些手势操作进行8倍镜的缩放，这种背部触控方式并不是什么新鲜事，在2011年索尼旗下的掌上型游戏机 PSV 已经在背部增加了电容式多点触控面板。
除了附加的交互空间，我们真的可以把它当做第二块屏幕进行使用。在平时我们可以通过两块屏幕同时运行两个不同的应用程序，例如我们可以用主屏幕玩游戏，在加载游戏时翻转屏幕刷个微博，操作起来十分方便。
折叠屏当然不只有展开和折叠两个状态，还有翻折状态，它区别于传统手机和平板的独立状态。最直接的效果就是它可以不需要支架就立在桌面上，实现中远距离的自拍；同时它可以进行多角度拍摄，成为制作 VR 内容的利器。在玩法上，翻折状态可以通过两面屏幕的不同内容引入多人互动的概念，但这种应用场景比较难想象。
相比外折叠设计，内折叠设计玩法相对较少，在这里我只想到了任天堂NDS 的概念：在翻折状态时它就是两块独立屏幕，它可以独立显示不同的内容，例如上屏显示内容，下屏显示操作区域，打游戏时翻折状态明显要比其他状态舒服。
个人观点：从以上案例来看，外折叠设计在交互和玩法上都比内折叠设计好，未来很有可能以外折叠设计为主。
当折叠屏从小屏模式转变成大屏模式时不应该只是画面的等比例变大，而是要考虑响应式布局设计。
描述响应式设计最著名的一句话就是「Content is like water。如果将屏幕看作容器，那么内容就像水一样」。在以前响应式设计更多用在PC Web设计上，但现在手机也应该考虑响应式设计，以下是设计时需要考虑的细节。
它不是简单的响应式设计。从上文得知，「展开」态时要考虑是平板模式还是双屏幕模式，如果是平板模式，那么内容应该在一个整体里；若是双屏幕模式则可以考虑不同屏幕展示不同内容。设计时需要根据实际需求和场景进行模式选择。
考虑通过 Fragment（片段）来设计。Fragment 是 Android3.0提出的 API，出现的初衷是为了 UI 更灵活地适应大屏幕的平板电脑。以下是 Android 对 Fragment 的官方介绍：「Fragment 表示 Activity 中的行为或用户界面部分。您可以将多个 Fragment 组合在一个 Activity 中来构建多窗格 UI，以及在多个 Activity 中重复使用某个 Fragment。（ Activity 可以理解为一个页面，Android 开发中最重要的概念之一）」
参考微软的 UWP 设计概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用应用平台）。UWP 应用的理念并不是为某一个终端而设计，而是同一套代码和设计可以在所有 Windows 10设备上运行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。
它的响应式设计的设计技巧包括以下6点：
调整位置：你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子：为了确保同时展示两个元素，在手机上我们必须采用纵向滚动界面，而在平板电脑上，我们可以调整框架的位置，变为横屏滚动界面。如果你用网格设计这些位置，你也可以不改变内容框架，但其他 UI 元素可以使用响应式设计。
调整尺寸：你可以通过调整空白和 UI 元素的尺寸来优化框架，比如下面这个例子，可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。
调整顺序：通过调整 UI 元素的顺序和方向，优化内容显示效果。举个例子，在大屏上运行时，可以再添加一栏，并且加入分类列表，这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动，而在平板上使用两栏横向滚动的优化。
展现：你可以基于屏幕的真实大小，设备支持的功能，特定的情况或者屏幕方向展示界面。下图是媒体播放器的例子，小屏幕上这些按钮通常是被删减的，但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。
换位：这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单：小屏幕上他是隐藏在汉堡菜单中纵向排列的，但是在大屏幕上，更大的 Tab 是更好地选择。
改变结构：你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。
以上6点引用了Windows 开发人员中心 《Design Basics：Responsive design 101 for UWP apps》
考虑用户翻转折叠屏幕时的场景和动机是什么，从而优化现有界面及交互流程，举几个例子。
以 RPG 游戏为例。当玩家使用小屏模式时我们可以收起所有功能界面，使游戏的沉浸感更强；当玩家采用大屏模式时，我们可以认为玩家需要获取更多信息，这时候把聊天、装备等相关功能界面展示出来。
当用户在微信里查看定位信息有新消息提醒时，手机变成大屏模式时应该同时存在地图界面和聊天界面。
相关注意事项
Google 在2018年11月就宣布了对折叠屏的支持，包括多窗口支持、不重启适配等等。如果想要在折叠屏手机上设计良好的用户体验，必须考虑以下两个方面：生命周期管理以及转场动效。
生命周期管理
目前大部分手机应用为了有更流畅的体验会做适量的生命周期管理，例如退出页面时会释放相关内存。因此设计师在设计折叠屏交互时要考虑哪些页面不能被销毁，一定要让用户进行展开、折叠等操作， 应用任务不中断重启，产品可以自动适应各种屏幕下的静态布局规格。
转场动效
从目前 Google 公布的新版 Android系统来看，已经可以做到当折叠/展开设备的时候，页面、内容从一个屏幕自然地切换至另一个屏幕。设计师在设计时应该基于 Google 的技术规范考虑内容、组件等模块的转场效果。
参考案例：
华为基于HUAWEI Mate X发布的折叠屏官方适配方案，相关链接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
看过或听过一大堆理论知识的你，有没有被很多自相矛盾的设计原则搞混过？比如你把做好的设计发给总监看，然后他告诉你太乱了，要统一，于是你苦苦调整了一番。当再发给他看时，他却说太平淡了，要有对比。你心想，一会要统一，一会要对比，这不是自相矛盾吗？当然不是，其实你自己心里明白，只是你不知道如何平衡这两者的关系。类似这种「矛盾」的设计原则还有好几对，接下来葱爷要把它们一一理清，让这些理论知识能真正指导设计实践。
对齐是版式设计最基础的原则之一，具体指版面中的字与字、字与图、图与图要对齐，常用的对齐方式有左对齐、右对齐、上对齐、下对齐、居中对齐、两端对齐等。对齐的目的是为了使版面更整洁，更便于阅读，比如下面这些作品都用到了大量的对齐关系。
我们来举个实例，假设你现在要设计一则手机banner图，目的是宣传某款手机的拍照功能，文案如下：
这种图不难做，你打算直接用一部手机和几张摄影作品作为画面的主视觉，于是去图片网站找了几张能体现该手机拍照功能好的图片：
图片找好后，你把其中一张图片填充到手机里作为屏幕背景，其余图片分散在手机周围，然后你把整个视觉主体放在了版面中央，文字则按主次排在了两侧，大致效果如下：
你盯着画面，正琢磨着还要加点什么的时候，总监不知何时出现在了你身后，他面无表情地盯着你的电脑，嘴里慢吞吞地吐出几个字：「太乱了，好LOW」，之后就消失了。你很聪明，立刻明白了总监是想要自己排得更整洁、更有序一点。
在目前的版面中虽然个别元素之间有对齐关系，但是缺乏整体的对齐，且图片采用了自由式排版，所以会显得混乱。于是你尝试把图片对齐排列，文字则以图片为基准进行对齐。
△ 左边的文字部分与右边的图片部分保持上下对齐，标题与内文为左右两端对齐，icon 与文字则是左对齐。
上图很「完美」地执行了对齐原则，整个版面干净、整洁了许多，视觉流程也更简单了。这下总可以了吧，然而事情并没你想的简单。因为总监不知何时又出现在了你的身后，他瘪着嘴一脸嫌弃地说道：「太呆板了，有点变化好不好？」
变化？难道又要调回改之前那种状态啊？当然不是，你其实是要在现有的基础上做一些变化。排版的难点和精妙之处就在这里，既要对齐，又不能机械地对齐；既要整洁有序也要灵活有变化。如何做到这一点呢？我的理解是：要在对齐中制造一点变化，在变化中找到对齐关系。比如下面这些作品：
现在你知道了，上面的方案之所以死板主要是因为文字部分与图片部分对得太整齐，所以需要改变其中一个版块。该版面的视觉主体是图片，所以调整图片更合适。由于文字是呈水平排列的，那么图片部分是不是可以倾斜摆放形成一定的反差呢？这样既可以制造变化还能加强版面的空间感。
△ 除了把图片倾斜之外，LOGO也与内文错开移到了左上角，最下边的直线也可以延伸到了版面之外。
我们现在再回过头来看看这件作品是否符合前面我说的，「要在对齐中制造一点变化，在变化中找到对齐关系」这一要素。
从上图中可以看出，图片虽然做了倾斜，却是在对齐的基础上做的变形扭曲。版面中的元素虽然不是都对齐了某条直线，但是没有哪一个元素是孤立的，每一个元素都与版面中的其他元素有对齐关系。更重要的是，左边文字版块的视觉重心与右边图片版块的视觉重心也是呈水平对齐的，所以整个画面才得以平衡。
虽然设计的构成要素只有文字、图片、色彩，但是每一个要素都有无数种表现形式，不同的字体、字号、色值、质感、风格、图片、方向等等。如果在一个版面内含有太多不同的东西，会显得很杂乱，从而让人心生厌烦，所以，需要通过某种方式把这些「不同」统一起来，以达到舒适、协调的效果。
以一则运动品牌的轮播图设计为例，文案如下：
这类设计以运动员作为主体最容易出效果，所以我们需要找一个正在奔跑的人物图片。
△ 这个人的姿势不错，就他了。
运动品牌最重要的是要设计出动感和时尚感，所以我把背景分割成一红一蓝两个倾斜的色块，然后把人物放在画面中央，文字分布在左右两边，以制造出强烈的视觉冲击。
由于有一个动感十足的模特和背景，所以整体看来还是比较符合运动海报的调性，但视觉上有点乱，因为有很多细节没有统一，比如人物倾斜的角度和背景色块、标题倾斜的角度不一样，主要文字的字体风格不一样（NIKE和JUST DO IT的字体比较硬朗，而蓄势待发的字体相对较柔），元素的风格也不统一（圆角的了解更多按钮与整体风格不搭），还有各元素的颜色也缺少联系等等。
那该怎么办呢？这里就需要用到统一的原则了，我们可以试着把上面提到的不统一的地方都统一起来，如下图：
△ 调整后的方案二，字体都是简洁有力的黑体字，而且把左右两边的字体进行了水平对齐、背景色改为单一的渐变色、人物和文字的倾斜角度也统一了，「了解更多」的按钮也改成了平行四边形色块、颜色更是被缩减到了三种。
调整之后确实不乱了，但是也有了新的问题，因为各元素太过统一使得画面缺乏层次和对比，该突出的信息也没有得到突出。这时候就需要用到与统一对立的另一个原则——对比。
对比，是把具有明显差异、矛盾和对立的双方安排在一起，进行对照比较的表现手法，目的是为了使设计更有层次、增加视觉冲击力。设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等等。
想要处理好统一与对比的关系，需要记住两个要领：
顺着这样的思路，我们来给上图增加一些对比关系，例如方案二的标题倾斜角度太大，不美观，所以我干脆把它的倾斜方向改为垂直倾斜，既保留了动感也增强了对比，更加美观。在文字的字号上，我选择突出品牌名缩小广告语，加强了大小对比，并且还恢复了之前把背景一分为二的做法，只是增加了一点空间感，并把人物服装的颜色与背景色做了统一。调整后的效果如下：
我们可以观察一下，方案三确实比方案一更协调，比方案二更有层次和视觉冲击力，且整体调性依然年轻、时尚、有动感，这里就是运用了统一与对比的原则。
简单应该是大家听得最多的设计原则，简约、极简风格的设计也非常受欢迎，但是我们也很困扰，因为自己做的所谓极简设计经常会被人说太单调、不够丰富；而那些自我感觉很丰富的设计又会被说成是杂乱。为什么会这样呢？我们先来正确地认识一下简单与丰富。
简单并不是指做设计要用最少的元素、不做任何修饰，而是指设计主旨要简单，视觉流程要清晰，视觉要聚焦，主次要分明。
△ 上图的设计虽然元素和色彩都很多，但整体给人的感觉也还是简单的。
而丰富也不是指画面中一定要有很多元素或叠加一堆的效果，而是指有细节、有层次、有品质感。
△ 上图的设计虽然整体看来很简单，但是并不会显得单调。
为了方便理解，我们还是来举个例子：一款农产品册子的封面设计。该封面的必要元素很简单，只有一个 Logo 和一句文案，因此，我们很容易想到做个极简风格的设计。白色背景加一个 Logo 和一行文字，再配一款特种纸，做点工艺，就可以显得很高大上，很多大品牌也是这么做的。
这也是一种还过得去的解决方案，但表现手法确实太过简单，既体现不出设计师的设计功底，也没有体现出农业品牌的调性和特色，且缺乏吸引力，所以我们需要做加法，让其变得更加丰富。
怎么丰富呢？最直接的办法就是引入图片和色块，由于品类为农产品，且文案重在强调健康和安全，所以我们可以找一张绿色、生态的图片。
为了与狭长的版面保持统一，我把图片也裁剪成了竖版的矩形，并与一个同样大小的绿色色块结合在一起，组成版面的主视觉，logo放在图片左侧，如下图：
这么做还是有些设计感的，也增加了品类属性，不过缺少细节、不耐看，所以还需要加点东西。当然，新增加的元素只能作为辅助，不能太过抢眼，图片方面我很快想到了叶脉，叶脉与图片中的叶子元素也能产生关联，且适合做底纹，于是我又找来了一张叶脉的图片。
把叶脉图片放在图层最底部作为背景处理，这里会遇到三种情况，一是如果把叶脉纹完全平铺的话，整个版面就没有留白了，所以会显得压抑；二是把整片叶子都显示出来，但这么处理会显得很小气。所以我只用叶脉纹覆盖了一半左右的版面，与图片部分形成呼应，这样的效果看起来是比较舒服的。
图片部分得到了改善，但现在画面中还缺少一点小的装饰元素，增加一点文案是个不错的思路，所以我把文案和品牌名的英文加了进来。
做完加法后整个画面变得丰富了不少，层次也拉开了，而且给人的感觉依然比较简单，既不杂乱也不压抑，因为各元素主次分明，既有联系又没形成干扰。不过做加法的时候也要把握度，例如下图就有点堆砌过度了，看起来很繁杂、不精致。
想要处理好简单与丰富的关系，需要注意两点：
规范与打破是存在于版式设计中的一对矛盾原则，规范是指把版面中的元素要按某种规律，或是在特定的范围内设计布局，目的是为了让画面更有条理和秩序，也更像一个整体。
△ 上图的主要元素都规范在一个矩形中，然后各个小矩形又组合成一个大矩形，看起来很整体，很有设计感。
与规范对立的是打破，指打破规范、打破束缚、打破平静，目的是为了使画面看起来更灵活、更有动感、更具视觉冲击。
△ 用色块或图片来创造束缚感，然后把部分元素冲出色块，是规范与打破的一个经典组合形式。
可以说经过了严格规范而变得很好看的优秀设计很多，而有些设计却选择了打破规范，也得到了很惊艳的效果。那什么时候该严格遵守规范？什么时候应该打破规范呢？其实在一件完整的设计中最好两者都要有，而平衡这两者的要领就是：先规范后打破，即在规范好的基础上选择一些局部来打破。
葱爷还是以一个画册的封面设计来作为讲解案例。这是一本中国移动云服务平台方案介绍的册子，文案如下：
很明显该封面的视觉调性应该要有科技感，要能体现互联网、信息、大数据这些关键词，所以我找了一张看起来很有科技感的图片。
这类画册的版式通常应该偏向简洁、规矩，所以我决定用网格系统来辅助排版。以图片作为封面的主视觉，除了Logo，所有元素都排列在矩形图片内，并且所有文字都按照网格的设定保持左对齐，所有元素的高度、宽度，以及各元素之间的间距，都严格按照网格来排版。
△ 经过规范的版面整体看起来十分严谨。
不过这么做也造成了版面缺少变化、太过规矩等问题，所以我们可以尝试在此基础上做一些「打破」。
比如原本的 LOGO 与图片靠得太近，显得很压抑，这里就不必完全按照网格来排版，我们可以根据自己的感觉将 LOGO 与图片分得更开一些；中文标题、短线、英文标题这三者也太拥挤了，可以挪开一点；文字部分不一定全部都在图片范围内，所以我给英文标题加了一个蓝色块，并把色块移出了图片区域；以及把最下面的公司名称排在了图片下方等。调整后的效果如下：
△ 调整后的方案，构图也相应发生了变化，之前为上下构图，现在变成了对角构图。
在规范的基础上做了打破之后，我们可以看到，版面的整洁性依然在，整体的调性也依然简洁、严肃，但相比调整之前显得更灵活、更有设计感。
设计不是简单的加减法，也不是只要做到对齐、统一这些很简单，方向很明确的原则就可以了，因为根本不存在什么原则可以让我们直接通向设计的终点，但是我们的目标是明确的，就是要做有效的设计，所有的设计原则、设计手段都要为这个目标服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
目录
引言
一、对设计的认识
二、设计观念
三、设计原则
四、设计思维
引言
前段时间在学习python语言的时候，我了解到在程序界有一种叫做“算法”的存在，其实“算法”就像武侠片里面的内功心法，内功心法越好就能激发越强的武功招式。在程序编写时大部分的程序语言都可以使用“算法”来优化程序的流畅度。比如，当大量用户同时使用程序时，“算法”就可以合理配置服务器资源防止服务器的崩溃。在设计的过程中其实也存在这样的通用心法，事理学的认识论其实就有点类似于“算法”，所以这一期我的分享题目叫《设计心法》。
一、对设计的认识
·内部因素与外部因素：
设计中我们可以将设计问题化分为外因（人，时，地，事）与内因（技术，工艺，材料等），在上一期文章中我们谈到设计可以定义为：人有目的创造活动，往往现代生活中设计的目的不是唯一的，这就好比佩戴手表时我们可能不仅仅是为了查看时间，还可能是为了在潜水时防止手表被泡坏。因此，物“应该是什么样”表现的是对不同人与环境的适应，就如同生物多样性表现了对环境的适应一样。
除却外部的环境因素，我们还要考虑的制作产物时所需要技术、工艺、材料、形态、结构。内部的因素其实代表了一种可能性，是一种可变通的元素组合。比如同样是防水手表，我们可以采用耐浸泡的材料，也可以运用防水工艺。（ps：在《事理学论纲》中内部因素没有成本，但是小胖认为成本其实也算是设计中应该考虑到的内在因素，所以在这里我也将其归纳了进来。）
总的来说外部因素代表了限定性，而内部因素代表了可能性。设计的过程中应当了解外部的需求与限定，然后组织内部结构。在内外因素之间找出一个契合点，设计就发生在这个契合点上。
·目标与目标系统
窗帘、太阳镜、电焊面罩、等等这些看似风马牛不相及的物品，却有着共同的目标—— 遮挡强烈的光。在实际设计过程中目标往往是抽像的，而目标系统是具体的。目标系统既包含特定的外部因素的限制也包含内部因素的选择。
同样是手表，同样是为了看时间，从技术到外观在使用因素的限制下，也就决定了其品种的千差万别。建立目标系统是对实现目标的外部因素限制的研究过程，也是从外部角度观察、分析、归纳实现目标条件的认知过程、叙述过程。设计师应将抽象的目标转化为目标系统，完善的目标系统才是优秀设计的创意源泉。
·“使用”的意义
在“使用”物品的过程其实包含两个方面，一是使用者——人的动作：二是被使用者——物的动作。人的动作是人生理结构和生存需要指示下的延伸，在动作的引导下人的大脑对外界的刺激作出反应，留下印象，形成经验，储存信息，成为意识。当再次遇到类似的问题是，人会逐渐总结经验并形成知识的迁移。物的动作是人使用过程中人的动作在物上的反应，这就包括器物的变形、移动、或是其他信息（比如声音，灯光等等）。
在人使用物的过程中，为了使物更加符合人意志，自然要对物进行改进，使物更加适合人的生理结构和需求目标。比如在原始社会原始人类为了更有效地的获取猎物，在原有的石头上进行敲击加工使之更加符合使用习惯。在“使用”中人和物不断磨合，这一过程实则就是产品迭代的过程。“使用”的意义在于它是一种积极的思维方法，是一种能启发创造的设计起点。
·方式与合理
方式在设计中不是指的具体的某一个动作，而是使用时产生的一系列动作，人的行为与各动作相对应的物与物组成的环境组成了一个特定的社会现象，我们称为“方式”。物是动作对象，环境是行为条件。同样，动作使物有用行为使环境具备社会意义。
合理是指合乎客观规律，合乎时代观念，合乎社会准则，合乎人类理想。合理是人类经验、教训的总结，是认识的升华、沉淀；是道德、行为、情操的法庭；也是在历史的基础上对未来的规划。当人在追求欲望的过程中，合理更像是一种约束人类行为的标准，通过合理的约束来引导人类的行为方向。
综上合理的使用方式其实是设计的原则，通过合理的评估系统和反馈可以制约不合理的设计行为，在的设计活动中，以“创造合理的生存方式”作为第一原则才能促进人类往更好的方向发展
二、设计的观念
·设计生态观
自然界的生态系统是一个封闭的、可以自给自足的系统。在此系统中没有开始也没有结束，任何一环的在生态环境中都扮演着至关重要的角色。反观现代设计生态却并不存在这样的循环。
现代经济学被认为是研究人类需求与稀缺资源之间关系的学科。经济学中的生产者（企业）将有限的资源整合变成可盈利的“商品”，而消费者是在有限收入下实现“效用最大化”的行为个体。消费者购买行为发生后进入“使用”阶段，直至使用的物品失去使用价值。“物”从资源直到被销毁经历了四个阶段，这四个阶段分别是产品、商品、用品、废品。
现代市场经济下人的物质需求被极大满足，市场经济的增长依赖消费增长，反观人类的自然资源总体上却在急剧减少。设计者除了的满足生产者、消费者、使用者的需求之外，还应该思考如何将“废品”分解利用形成设计生态闭环。
·设计美学观
人类文明的发展大致经历了三个阶段，这三个阶段即古典主义、现代主义、和后现代主义。这三种文明的美学观也可称之为再现主义、表现主义和共生美学。这三种美学观点的发展是相互交错的，只是主体上有区别。
当代设计和艺术是以思考、感召、联想的手法，以同观众、使用者共同创造为目的，以多种美学观重叠、并行、综合为基础的共生美学观为审美取向。技术与艺术共生，技术与各种美学观共生，这就是当代设计——后现代主义的美学特征。
三、设计原则
·有限理性原则
在艺术的创作中美可以被分为很多种，梵高的油画是美的，米开朗基罗的雕像也是美的。其实任何事物，任何美都是相对的，在不同的时代背景和使用场景下我们对于美的定义都不同。
类比设计，衡量设计的标准不是对与错，而是相对满意与不满意。设计应该遵循“有限理性”的原则，即设计的目的并不是寻找“最优解”，而是“满意解”。“最优化理论”只适合作为设计中的一种技术方法使用，而且只有当目标属性十分明确，可以用数量化衡量时才可运用。
·适应性原则
上文说过设计就发生在内部因素和外部因素的“关系”中，而这其中的“关系”其实就是适应的过程，设计还可以理解为是以一定的目的、一定的方式来达到与客观条件内部关系相适应的人为适应系统。设计的内部因素、外部因素和设计目的是设计过程中应当遵守的具体内容。
多数时候外部因素在适应系统中是人们行为方式的主要决定因素。系统的复杂行为主要是其所处外部的复杂性的表现，而内部因素少量限定属性的制约，这才是完整的适应性系统。
四、设计思维
设计思维实际上是围绕着“问题”来展开的。所谓“问题”是指设计各要素交织在一起时，所产生的关系矛盾。好的设计一定是“问题”的良好协调统一体。研究“问题”的方法通常是通过观察问题——分析问题——归纳联想——评价修正的模式来巩固的。
观察问题其实是在用户调研中最常用的方法，定性调研中研究人员常常会使用观察法来记录用户的行为，之后用研人员会使用“五问分析法”来抽象出用户的真实需求。其实在事理学中也提出了类似的观点。
观察法的几个原则:
1. 目标明确——从现象到本质（五问分析法）
2. 忠实于对象——感官+体验
3. 扩延、比较——搜寻同类比较共性
4. 由表及里、去粗取精——总体到局部再到整体
需求分析中有一块人物画像的部分，其中情景分析和故事板就是分析人物使用产品的外因和内因，撰写故事版时不妨按照以下路径来展开。
分析问题中应当结合设计中的基本路径来分析：
1. 寻找“物”存在的外在限制——人、环境、时间、条件等制约。
2. 析出“物”的内因与外因的逻辑“关系”——寻找现象依据
3. 比较相似“物”的内、外因的关系——透析共性基础上的个性
具体的归纳、联想和创造都应该明确设计“目的”，结合实际中遇到的外部因素来具体创意创造。最后我们通过建立评价体系，优化设计产物在设计生态中的体验和循环。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
作为视觉设计师你是否会遇到这样的问题，当需要做一个 loading 或者其他动效的时候，总会或多或少的出现一些问题，如何使用更轻量的 Sketch 直接将矢量图形转到 AE 制作动效，如何不再受 GIF 导出的失真问题困扰，如何让开发完美还原我们的动效设计稿等，如果你也存在这些疑问，那以下介绍的2款插件就可以完美的解决这些问题。AEUX 是由 Google 团队推出的，运用在 Sketch 和 AE 的一组插件，能将 Sketch 里的图层以及整个画板一键导入到 AE 里，同时能在 AE 里解决图形分组和分层的问题，减少导出图片或者转入 Illustrator 处理带来的不必要的重复动作。
以下是我做的一个简单小案例，通过此次案例将介绍怎么更好的使用这个插件：
首先在 Sketch 内将图层进行分组，在多图层的情况下，需要在前期进行动效构思，根据构思在 Sketch 里对图层进行分组，所做的分组将会是你在 AE 里的合成分组。
方法一：直接复制选中图层
安装好插件后，打开 AEUX，选择你将导入到 AE 里的图层，点击 Send selection to Ae，同时在AE里打开安装的 AEUX插件，在 BUILD COMP 区域出现了从 Sketch 导入的图层数量，勾选 Precomp groups，点击将自动加载入 AE 合成里。
方法二：导出json文件
从 Sketch 的 AEUX 面板里点击 Export AEUX.json 导出 json 文件，打开 AE 的 AEUX 面板勾选中 Precomp groups，将导出的 json 拖入到 BUILD COMP 区域，或者点击「曲别针」icon打开 json 文件。
这样导入到 AE 里的图层是以合成的形式展示 Sketch 里的分组。
如果在 sketch 内，分组图层不在同一组内，导入 AE 后会出现变形和位移的情况。
如果 sketch 内形状图层有投影/渐变/point type 的编辑形状时，导入 AE 后将出现投影消失，渐变消失，形状变形的情况，在遇到这种情况时，会通过导出图片的方式处理。
导入 AE 的 AEUX 面板时如果没有勾选 Precomp groups，多图层导入的情况下，组内的图层都会生成在 AE 中的同一个合成中。
1. Detach symbols
这是一个解除 symbol 的功能，在 sketch 内如果没有解除 symbol，导入到 AE 里将出现图形位移和变形的情况。
2. Flatten shapes
AEUX 支持布尔运算，但是在一个组中混合不同的运算符（如添加然后减去）对于Ae来说比较困难。点击 Flatten shapes 可以合并布尔运算图形。
3. Images to symbols
Sketch 只能导出它在画板上看到的内容。如果在 sketch 内图像的一部分超出画板边界，复制到 AE 内部的图像将出现位移的情况。导出前点击 Images to symbols 不会发生被裁剪和位移的情况。
1. Come size multiplier：切换倍数
可以设置 sketch 画板的倍数合成。
2. Auto build artboards：自动构建合成
导入前勾选此功能，在 sketch 的 AEUX面板中复制图层后，在 AE 里不需要任何操作，它会自动复制图层导入到创建合成中。
3. Convert to precomp：创建合成
同时选中单一图层，可以将他们建立一个新的合成。
4. Un-Precomp group：解除合成分组
点击可以解除合成的分组，变成单一的一个一个的图层
5. Toggle Visibility：可以一键隐藏和显示所有的父级图层
6. Delete group layers：删除父级图层
虽然现在 AEUX 有些上面所讲的功能不能支持，但是在一步步完善，希望可以帮助一些习惯用 sketch 画插图的设计师提高动效制作效率，减少不必要的操作步骤。
在动效制作好后，通常我们会导出 mov 然后导入 PS 里生成 gif 格式，但是 gif 会出现质量过低的情况，比如渐变分层，边缘有毛边等情况，所以由2017年 Airbnb 团队开发的 lottie 动效可以完美的解决这些问题，而实现 lottie 动画需要在 AE 中安装一款名为 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生动画的形式在移动设备上渲染播放，在制作动效时导出 json 文件直接给到开发，可以帮助提高实现动效效率，同时提高动效质量。
1. 它还有很多的优点
2. 在使用中有几点注意
3. 所需软件
ZXP installer
下面是一组之前做的页面加载loading效果，开发小哥哥反馈：实现挺。
4. 步骤
下载ZXP installer：https://aescripts.com/learn/zxp-installer/
下载bodymovin：https://github.com/airbnb/lottie-web
下载之后，点开刚下载的 ZXP，点开顶部 file-open，打开 bodymovin插件。
当出现以下界面时代表已经安装成功。
意外情况：在用 ZXP 安装 bodymovin插件的时候出现以下提示。
原因是没有通过 Adobe Creative Cloud 下载 AE，需要重新通过 Adobe Creative Cloud 下载。
打开AE，After Effect CC – 首选项 – 常规，勾选允许脚本写入文件和访问网络。
打开窗口 – 扩展查看是否添加成功。
调出 Bodymovin 面板，选择需要导出的合成。
点击你要保存的 json文件地址，点击 Render。
点击 Brown 载入刚导出的 json文件，检查动效是否有误。
这时候就可以把 json 文件给到开发，如果 AE 合成中有图片，需要把图片放在文件夹内一起提供给开发，同时也会给到一个 gif文件，如果实现有不一样的地方，开发可以询问设计师。
如果想在移动端上浏览可以打开网址：https://www.lottiefiles.com/，下载安装移动端客户端（ios/Android）
注册登录成功后打开 Lottie Preview 添加 AE 里用 bodymovin 导出的 json文件。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在无限的信息体量和有限的用户浏览范围之间求得平衡，让用户看到全部创作中他最想看到的那一面。在B端产品的设计过程中，我深切体会到动效能在很多体验领域起到四两拨千斤的作用。于是我将自己这些年来做动效的思考，结合B端产品的一些固有特点，来和大家聊一聊动效设计在B端产品体验设计中的意义。
既然是谈B端产品的体验设计，那么就免不了要与C端产品做对比。在我看来，B端产品与C端产品在大的体验趋势上是趋同的。对于大多数用户而言，都希望自己在工作与生活中是顺利、愉悦的，而用户体验就是为了让用户顺利、愉悦而生的。也就是说，不管是B端产品还是C端产品，其体验的本质都是围绕着使用的效率与愉悦感为核心展开的。那么这次我们就将目光聚焦在B端产品，来看看在这个领域都有哪些亟待解决的设计难点。
针对这四个特点，我沉淀出一套解决B端产品体验问题的方法，它们分别是：信息折叠、路径梳理、提升效率、概念物化。接下来，我将通过具体的案例，来详细展现动效在B端产品体验设计中的意义。
涉及案例简述：
案例1:
问题分析：初次进入 Dataphin，我们会提供一张业务流程图来解释 Dataphin 的工作流程。为了降低理解成本，我们对每个流程都添加了文字说明。然而由于流程本身已经很复杂，页面排版中加入说明性文字会使得流程的排版拉长，用户很难通过一屏浏览完整的功能流程，体验不佳。
解决方法：我们发现用户一开始关注业务的全流程展示，然后才会仔细查看每个业务的详细说明。当用户将注意力放在查看详细说明的时候，是顾不上看全流程的。因此我们将「看流程」和「看说明」的场景区分开，共用同一块区域，从而优化信息排布。
案例2：
问题分析：在QuickBI中，同一套 icon 需要应对两种不同的使用场景，当用户没有选中任何图表的时候，点击任意类型的图表icon，即可新建一个图表；当用户选中某一创建好的图表时，再点击图表icon，则是为该图表切换类型。所以为了确保用户的认知清晰，我们需要将两套使用场景区分开。
下图中，我们尝试了静态的布局思维，虽然可以区分场景，但也造成了导航条过高，导致空间冗余，压缩了创作空间。
其实这个问题不止我们家有，用过 AE 的同学应该清楚，AE里面的形状工具体验也很鬼畜，用户不选择任何图层的时候，使用形状工具可以新建形状，当用户选中某个图层的时候，使用形状工具是针对该图层创建蒙版，两种不同的功能却没有任何样式或操作上的区分，对新手用户来说是相当不友好的。
解决方法：用户创建图表和切换类型是两种不同的场景，不可能同时存在，在布局上没有必要让两套 icon 同时存在于界面。因此使用切换式，利用鼠标对图表的点击、失焦可以灵活切换两套使用场景。
问题分析：图1是用户在 Dataphin 中所创建的一张逻辑表，我们需要保证用户在屏幕内尽可能多的获取信息，因此逻辑表中的空间利用就显得很重要。在原有交互中，我们为用户提供了搜索功能，同时我们也在思考有没有更优的信息布局方案，可以为用户展示更多的数据。
解决方法：在图2中，我们需要在顶部区域寻找与用户搜索操作不重合的场景，并把它们重叠起来。这里我用到交叠式的思路，即将搜索框收起来，只在顶部保留搜索入口，这样在布局上就可以让搜索与标题交叠使用同一块区域，优化了布局。
问题分析：在下图中，侧边导航的信息过多，压缩了创作区域，我们需要为导航「瘦瘦身」。
解决方法：通过用户调研，我们发现导航的名称对于新用户来说很有必要，但随着用户对产品的逐渐熟悉，名称重要性渐渐下降。我们需要通过动效，找到合理的展示形式，来兼顾新老用户的使用需求。
通过动效优化信息布局，既保证了单位面积内尽可能多的展示有效信息，又避免了信息过载带来的干扰与阅读疲劳，使得用户每次只需要专注眼前的使用场景，提高了获取数据的效率，这便是视觉设计师在项目中的价值。
问题分析：在 Dataphin 中一共包含了80多个功能点，我们将这些功能点梳理归纳成5个大类目和20个子类目。因此我们既希望用户能明确每个类目下包含的子类目，又希望用户在选中子类目的同时，也能明确感知自己处在哪个大类目下。
下图中，用户从首页切换到数据资产版图，我们想要让用户明确信息的嵌套层级，静态的思维只能用双Tab 形式展现。虽然解释了层级关系，但也使得导航高度过高，压缩内容区域，加之案例中的资产版图本身还包含三个子类目，于是，同一个页面出现了三层 Tab。
解决方法：将嵌套路径通过动效的方式展现，运动轨迹可以暗示用户子类目从哪里展开，其余类目被收到了哪里，用动效的方式解释了层级嵌套路径。明确了层级嵌套关系，节约了为解释嵌套路径而铺展出的信息所浪费的页面空间。
在 Dataphin 中，用户在创建逻辑表之前，会经过一系列繁琐的配置工作，如下图中，用户需要经过「定义维度」-「定义主键&来源逻辑」-「定义层级」三个步骤。由于操作流程复杂，我们为用户设计了铅笔线动效，让用户时刻明确自己操作所处的位置，也方便回退操作。
通过动效梳理路径，使得B端产品复杂的产品逻辑更为清晰，降低用户的理解成本，缩短因查找路径浪费的时间，提升工作效率。同时，将操作路径巧妙地隐藏在运动路径当中，可以节约为了展示路径关系而浪费的页面空间。
问题分析：在 QuickBI 仪表板中，用户需要导入已有的数据集以配置图表内容。数据集由用户自行创建，一般来说，B端产品用户文件命名比较偏长，正常情况下下拉框很难直接把名称显示完全，用户还需要将鼠标hover 到名称上才能查看完整的名称，操作路径被拉长了。
解决方法：我们在侧边栏展开的一瞬间向两侧借一部分空间，使得名称获得了更多展示空间。尽可能多的展示信息，缩短操作路径，提率。
问题分析：在 QuickBI 仪表板中，用户创建图表的操作为，先拖动字段进入对应轴区，轴区便能读取字段内的信息并生成数据可视化。这一所见即所得的操作对老用户而言是的，但对于新用户而言认知成本却有些高。
设计思路：我们需要通过响应式的设计来引导用户学会这样一个操作。首先，用户的鼠标滑过字段，字段会高亮响应，提示用户此处可点击，从而吸引用户学会点击拖动字段。接下来，我们通过轴区内的文字提示，告诉用户字段可以被拖入该轴区。用户将字段拖入轴区的时候，对应的轴区会高亮响应告诉用户字段可以被拖入轴区，同时字段会根据拖入路径是否正确给出响应。如果正确，字段会划入轴区；如果错误，会给出错误提示；如果用户执意操作，字段会弹回原处。这样我便构建了一套完整的响应流程。通过层层响应的方式，减少用户在每一步操作上的困惑时间，帮助用户快速掌握这一操作手法，提升工作效率。
工具型产品中很多操作是相互关联的，而且这样的关联关系通常是细微的，因此需要我们通过动效强化元素之间的关联关系。案例中图表的每一列指标可以自由配置，通过微动效，让用户一眼就能找到新增的指标，提升操作效率。（苹果在新版的 Mac 系统中也有采用类似的设计，体验很棒）
联动关系在框架层面也同样适用，比如导航区域与创作区域之间就存在拉伸联动。这样的动效前提，建立一整套元素的适配规范，便于开发与团队协作。这个过程会很繁琐，也是B端产品看不见的巨大工作量。
每一个微小细节的打磨才能汇聚成的用户体验。提升效率的点小而且零散，总结起来即是用户的操作是强反馈的，从而增加用户尝试的信心；用户的操作是有引导性的，即增加用户继续探索的信心；用户的操作路径是尽可能被缩短的，以节约时间。满足这三点均可被看作是设计在提升效率方面的价值。
问题分析：QuickBI 中有一个叫「创作区」的模块，是用来介绍 QuickBI 产品能力的。我们需要在这个区域向用户展示 QuickBI 所具备的能力与工作流程。由于 QuickBI 是面向行业分析师的 BI工具，其所要传达的概念对于新用户来说比较生涩复杂，这就需要我们在产品流程展示设计上尽可能简单易懂。
下图是1.0版本中的效果，其对流程的设计仅停留在图形的堆砌，对业务的表述不够清晰，也就很难向用户传递我们的产品价值。
那我们来看看视觉设计是如何物化抽象的概念的。
首先我梳理出 QuickBI 工作的四个步骤：获取数据、创建数据集、数据分析、数据展示。
接下来我们思考一下，当我们需要对某人讲述一个很复杂的概念的时候，我们通常会打个比方。那么我接下来要做的，就是为这套抽象的概念「打个比方」，因此我要为它们构建一个有故事性的场景，那么这四个步骤应该是某种静止且持续运转的工厂，它们之间需要某些动态的介质将其串联起来。
于是我进一步挖掘视觉样式，构建出了场景原型图。
进一步完善视觉效果，得到了最终的成品：零散的代码被收集车间收集，产出数据表进入加工工厂，工厂将其加工成数据集，运输进分析台，分析台通过「仪表板、电子表格、数据全屏」三种方式对数据进行可视化分析，最后将分析结果通过数据门户和邮件订阅的方式对外分享。
通过动效设计，将抽象的概念具象化，将复杂的流程简单化，大大降低了新用户的学习成本，使之可以快速上手。
最后，我将我的动效设计方法沉淀成一套以方盒为载体的方法论——方盒理论：「置身于三维空间下，信息的体量是无穷的，我们需要为其寻找合适的载体，在无限的信息体量和有限的用户浏览范围之间求得平衡。即让用户看到全部创作中他最想看到的那一面。」这即是我所构建的以六面方盒为基础的信息载体，并为我的一切动效解决方案提供了理论支点。
B端产品并非大家印象中那样的索然无味，其中有很多体验是值得深挖的。动效仅仅是其中的一个层面。随着近几年B端领域功能点逐步完善，用户对体验提出了更高的要求，B端产品的体验设计需求也会渐渐升温，也希望有更多这个领域的优秀设计师能和我做朋友。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
为什么是第一性原理最早提出这个概念的是亚里士多德。他说：在任何一个系统中，存在第一性原理，是一个最基本的命题或假设，不能被省略，也不能被违反。
后来「硅谷钢铁侠」埃隆·马斯克在一次采访中提到「第一性原理」：
我们运用第一性原理，而不是比较思维去思考问题是非常重要的。我们在生活中总是倾向于比较，对别人已经做过或者正在做的事情我们也都去做，这样发展的结果只能产生细小的迭代发展。第一性原理的思想方式是用物理学的角度看待世界，也就是说一层层拨开事物表象，看到里面的本质，再从本质一层层往上走。
所以，我希望用第一性原理的思维方式，发现交互设计的本质，从而更好地理解和运用它。
交互设计，又称互动设计（英文Interaction Design，缩写 IxD 或者 IaD）是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式（the「interaction」即人工制品在特定场景下的反应方式）相关的界面。——百度百科
读完上面关于交互设计的权威解释，相信有读者和我一样，在短时间内很难弄明白：到底什么是交互设计？
下面，我们一起用第一性原理，拆解和分析交互设计的本质。
小学语文老师教会我们一种名次解释的方法——拆词法，那么，交互设计可以拆解成：交互层和设计层。
交互，即交流与互动。具体点说，在某个场景下，一个对象为了某个事件目标，与其他对象产生信息的交流与互动。在笔者看来，交互的本质是信息的交流与互动，包含用户、目标、场景，它们共同构成交互设计的交互层，这是交互设计的前提。
而用户、目标、场景，也正是辛向阳教授定义的交互设计5要素其中的3个。
案例1：我们为「餐厅点餐」这个事件进行交互设计，那首先要知道这个案例的交互层是什么，也就是信息的交流与互动是怎样的。
这个例子的交互层是：用户（我们）需要在某个场景（餐厅），与其他对象（餐厅/服务员）产生信息的交流与互动，才能达到目标（完成点餐）。
案例2：我们为「地铁上听音乐」这个事件进行交互设计，按照上面的思路，我们知道这个事件的交互层是：用户（我们）需要在某个场景（地铁上），与其他对象（音源）产生信息的交流与互动，才能达到目标（听音乐）。
我小结一下，帮你理解交互设计的交互层。
当我们为某个事件进行交互设计时，首先要知道自己在一个什么样的事件前提下开展交互设计，而这个前提就是我所说的交互层，即用户在某个场景下，与其他对象产生信息的交流与互动，从而达到目标。
所以，在交互设计里的交互层，本质是信息的交流与互动，包含用户、目标、场景，主角是信息交流互动的双方或多方。
在说交互设计的设计层之前，我们先来看「什么是设计」。
设计是把一种设想，通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。——百度百科
现在我们将上述解释放到「交互设计」里去理解。交互设计里的设计，就是在交互层的前提下，为一个事件合理的规划/计划（行为），并传达（媒介）出各种感觉（用户体验）。
所以，在交互设计里的设计层，本质是找到解决问题的手段，包括媒介和行为，主角是设计媒介和行为的设计师。
我们继续用前面的两个案例，理解交互设计的设计层。
案例1：为了完成「餐厅点餐」的交互设计，我们依据交互层这个前提，开始找到解决问题的手段，并为之设计媒介和行为。
在一些餐厅，用户还是通过纸质菜单，用口述的方式完成点餐。这里的媒介是纸质菜单和服务员，行为是口述。
在另外一些餐厅，用户用手机扫码点餐、下单、结账、评价等。这里的媒介是餐厅点餐的二维码和用户的手机，行为是用手机扫码、点餐、结账等一系列动作。
案例2：为了完成「地铁上听音乐」的交互设计，在非智能手机的时代，我们基本上是通过一个可存储的音乐播放设备和耳机完成这个目标的，那时候的媒介是播放器和耳机，行为是打开播放器播放音乐、在播放器调整音乐。
随着互联网和智能手机的普及，蓝牙传输技术的升级（aptX/LDAC等），以及用户诉求的升级和多样化，我们可以设计出更多贴近交互层（用户、目标、场景）的媒介和行为。比如音乐APP、蓝牙播放器、蓝牙耳机、线控耳机等。
此外，笔者认为：媒介和行为是相辅相成的关系，二者在交互设计的过程中会互相促进和限制。举个例子，一些带线控的蓝牙耳机自动连上手机后，按一下耳机上的播放键，就能直接启动音乐APP 开始播放了。这个「开始播放」的行为就可以设计在耳机上，而不仅仅是音乐APP里。
用第一性原理，我将交互设计拆解成交互层和设计层，并结合辛向阳教授定义的交互设计5要素，得出结论：交互的本质是信息的交流与互动，由用户、目标、场景构成；设计的本质是找到解决问题的手段，由媒介、行为构成。
交互设计的本质：设计师为用户设计出在某个场景下信息交流与互动的媒介和行为，从而达成目标。
1. 把握交互设计的行业差异化
本文从我个人的角度和经验，给大家分享了我对交互设计这个底层概念的理解，在我研究的过程中，最大的体会是，交互设计不仅仅表现在屏幕上，其实在线下场景下，同样有很多体现，比如现在热门的服务设计，我觉得它是对交互设计的场景化应用和延伸。
由此看来，交互设计会因行业和产品形态的不同，而存在差异化。拿B端产品来说，用户行为是完成某一项规范化的工作，而这项工作，往往具备行业和岗位专业性，设计师需要更好地理解行业和专业，才能贴近交互层（用户、目标、场景），设计出好的媒介和行为。
2. 具备相关思维
项目思维。交互设计师的工作往往贯穿调研、需求、设计、研发、测试等环节，我们需要把每一个设计Case 当成自己的项目一样去对待，而项目经理就是自己，充分发挥主动解决问题的意识和能力。
用户思维、产品思维、逻辑思维等。这3个思维网络上有很多解释，在这里就不赘述了。
3. 充实知识储备
点击下方标题，查看已更新的知识篇文章：
4. 提升专业技能和底层能力
《从今天起培养这5个好习惯，让你在 2019 年快速成长！》
本文从构思到写完，断断续续有1个多月了，总希望找到一个合适的方式去解读交互设计，把这个概念说明白，但事实是越研究越觉得复杂，我需要了解的还有很多。
所以，我写这篇文章的目的不仅仅是分享我对交互设计的浅见，还希望用「第一性原理」这个拆解、分析、解决问题的思维方式，去研究「什么是交互设计」这个问题。
交互设计这个概念或领域，远比我写的要复杂和深入，我在研究「交互设计」路上才刚起步，希望能与读者朋友一起交流这个话题。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
商业化思维的本质就是：创造价值，通过为客户创造价值和交换价值来驱动产品以及业务的运转。那么，如何为用户创造价值和交换价值呢？价值属性会跟着用户属性的不同而产生变化，所以，在探究这个问题之前，要根据将用户划分为不同的群体，再从不同的方面着手。
商业化思维这个字眼乍看上去很高大上，确实往大了说，商业化思维可以套用到各种宏观微观的商业模式当中。但我们的目的是让商业化思维能够成为一个活动运营真正日常可用的能力项，所以我们对这个部分要解读的商业化思维的定义稍微做一些边界设定。
——基于商业化思维的本质：创造价值。
我们将探讨：如何通过创造价值去驱动一个产品/业务？
通过创造价值驱动产品/业务运转是一种完全不同于体验驱动（也就是产品思维）的模式，也是绝大部分互联网从业者少有接触的（电商&广告类的业务接触可能较多一些），能够综合使用价值驱动和体验驱动来帮助你策划一个业务形态，就会极大拓展你的思路（比如：你能够策划出趣头条类似的广告费转移为用户成本的模式）。
同时，也能够朝着我们的核心目的：让一个业务叫座又叫好去演进。
再次回顾一下产品思维和商业化思维模式的概念：
那么如何为用户创造和交换价值？
价值属性是跟着用户属性在变化的，要探讨如何创造和交换价值，我们需要先对用户/客户做一个分类：
C用户：个人用户。
B用户：机构/商家/团体等任何非个人用户。
一般互联网的各种业务形态，会面对的用户种类基本上就是以上四种，代表着完全不同的四种价值诉求。
我们对这四种角色分别进行价值创造以及交换的理解和研究，就能够帮助你在业务规划当中，真正有效的运用到商业化思维。
当然这只是商业化思维最基础的入门，感兴趣的可以基于这个原理再深入研究。
在面对素人用户的时候，商业化思维主导的用户价值和产品化思维主导的用户价值有一些交叉和模糊的地带，为了便于理解和明确另外一种思维模式，我们相对粗暴的定义商业化思维的价值更多在于“创造”，区别于产品化思维的“满足”。
怎么理解呢？
用户有购物的需求，打造一个电商购物产品属于“满足”需求。而在购物需求满足之后，我们让用户去进行商品分享，通过用户分享进来的订单我们给予一定的分拥，这就“创造”了额外的赚钱的价值，可以交换用户社交关系链曝光的价值。
当然，实际并没有这么明确的区分，用户购物本身也是一种商业行为，商品的品牌溢价、促销手段（买三减一）等也都可以归类为价值创造的范畴。不过，这个不重要，我们关键要理解的是创造价值的思维模式。
常见的可以额外创造的素人用户价值：赚钱、省钱、炫耀、情感共鸣等不属于用户刚性需求（购物，变美，解决问题）的这类可以额外创造的价值。
而常见的你可以置换的用户价值：额外的成本付出、用户的个人关系链（自主推广）、用户的时间、用户的内容创造等。
商业化思维在素人用户部分，提供一种截然不同的业务策划模式：并不是考虑用户的需求是什么，然后针对性的策划一个产品。而是先思考你想要交换的用户价值是什么，然后，思考你如何创造额外的价值可以有效的置换到用户的价值。
在这个思维模式下，我们并不以体验和操作为优先去考虑业务形态，用户付诸成本是核心考虑因素，成本小于价值这个业务模式就有效，反之则无效。
这个思维模式也解释了：为什么很多体验优秀的产品就是没有用户愿意去使用？
目前业内新兴的一些社交产品拥有比微信更优秀的体验，但是产品在社交上创造的额外价值并没有大过用户的关系链迁移成本（想要去交换的价值）。而一些价值巨大但体验糟糕的产品用户还是愿意一遍又一遍的尝试想要成功走通——一个分佣50%的商品，再复杂的操作用户也愿意去钻研和使用。
当然，通过成本-价值的模式去思考和规划业务模型，并不妨碍我们同步去进行产品体验的完善，以帮助进一步减少用户在操作上付诸的成本。
商业化思维在业务中的一种典型运用场景，基于一个明确的用户价值交换业务目的，我们进行价值交换过程的建立，以找到合适的业务模式。
例如：我们希望用户能够主动进行分享（而这个过程往往基于已经满足了用户基本需求的状态上，比如说一个电商网站用户已经完成了购物，但是我们还想要额外榨干用户的价值），贡献他们的社交关系链价值。
首先，我们需要进行的思考是：用户进行分享需要付诸的成本是什么？
——分享到朋友圈后造成的个人形象影响，思考和检索适合的分享对象的成本，分享动作的操作成本（可以通过体验优化极大降低）。
那么思考，基于业务特性，我们能够提供给用户合适的交换价值是什么？
——可以通过和商家分摊成本的额外现金激励？基于稀缺或者高价产品的炫耀内容？或是商品本身附带的情感属性？明确的定义清楚这个具体的价值是什么。
然后完整的对比，你创造的额外价值是否大于综合成本，当然这个对比不是一个绝对的数学对比过程，还掺杂了很多主观因素。
所以，一定程度的用户调研或者简单一些的自我洞察能够帮助你得出有效的结论。如果做不到价值大于成本，那么这个业务就是不成立的。其实这个思维模式的逻辑是显而易见的，但又往往被忽略。所以，很多分享10元满减优惠券的策划被创造出来，而根本没有人思考过10元满减优惠券的价值其实远远低于我分享到朋友圈的成本。
琢磨一下以上的过程，是不是提供了一种全新的思路。帮助你的不仅是简单的思考“我想让用户做什么，所以理所当然的策划一个产品去引导用户”，而是真正的考虑清楚业务是否成立的根基，然后再从容不迫的去优化体验。
时刻保持“成本-价值交换”的思维模式，不仅能够帮助你打造有效的价值交换业务形态，还有一个非常有用的场景。
基于一个明确的用户诉求，我们进行价值交换过程的分析，以找到业务的关键点。
我们还是用电商业务场景来举例：在电商场景中，用户付诸的最大成本是金钱，而购物操作的成本实际上优先级并不靠前。用户在价值交换过程中最优先的价值是：“买到想要的东西”和“足够的划算”。
所以，在电商业务的重点一定是：提供更丰富的商品库和更优惠的价格，能够极大提升价值的含金量。
而优化购物操作体验，页面动线逻辑等是其次的，可以一定程度减少用户成本但解决不了价值不足的问题。
这也解释了：为什么一个创造了诸多优秀产品（常规产品主要面对的用户成本确实是操作成本，而价值是比较单一明确的，例如邮箱）的大厂投入了诸多心血打磨产品体验但最终还是在电商战场战败了？
一个擅长做价值交换的电商大厂在一个社交产品（用户的主要价值是社交，成本是难以独立完成的关系链迁移）上投入了大量的推广资源和利益诱导确留不下用户。
你看，大家都在说的基因的本质问题，其实本质并不复杂。当然大厂的成败并不只取决于思路的差异，还有历史以来积累的资源类型和用户心智，这些也都是基因的构成部分。
我们也不需要操心这么多，学会运用这个新的思路足以在业务策划中帮助自己抓住真正的重点。
首先明确我们这里所讨论的达人用户，并不是普通用户当中乐于分享和创造低质量内容的那群人（当然也有高质量的但并不普遍），而是以内容生产为职业，创造真正专业有价值内容，能够构成你的平台核心竞争力的那群人。
区别于普通用户，我们希望置换的达人用户价值是比较高的，平台依赖这些达人用户去不断供给符合平台导向的优质内容，而内容生产的成本极大，也就需要更大的价值来进行置换。
达人用户常见价值诉求：变现、曝光、独特的内容生产能力、有效的粉丝互动和管理能力。
达人用户需要付诸的成本：内容生产成本。
基于创造价值大于成本的逻辑，要打造优秀的面相达人用户的业务，就可以从几个方面着手（增加提供的价值）：
提供足够价值的变现能力：
专业的达人往往以此生存，和普通用户一样的分佣价值只能作为额外的补充价值，并不能达到达人的标准。
所以，如果你的业务希望依靠变现价值来让达人自发留下，那么你需要考虑的核心问题和需要寻找打造的案例就是：有没有达人可以在你的平台赚钱养活自己。
当然如果没有内容独家协议的限制，达人可以依靠多平台存活，对你的要求就不会那么高，但变现的价值也一定是生存级别的（几千元）而不是福利级别的（几百元甚至以下）。达不到这个标准，你的业务逻辑确实就不成立。
提供足够多的曝光量级：
当然这个和你的用户规模以及流量分配机制有关，需要考虑的问题是：你给的曝光是不是有效的曝光？你的达人用户能否有效的把曝光转化为强关系的粉丝，或者是个人品牌认知用户？
这个目的达不到只是粗暴的给曝光并没有用（例如：很多内容平台会找我要稿子，一些平台只会放作者名字而不愿意曝光作者个人公众号，我就非常抗拒为他们提供稿件）。
很多冷启动的业务面对的是达人内容量级和用户量级循环驱动增长的问题，在这个逻辑下一定程度的达人内容补贴是常用的手段。但不能偏离的是，你的激励要做用户这个循环，要求仍然是激活的内容一定要对用户有价值而不只是凑数，达人的补贴规模也要达到生存级别。
提供独有的内容生产能力（生产素材）：
或者说独特的有效的粉丝互动管理能力等产品层面的价值也是一种办法。但说实话国内互联网KOL行业发展多年已成定局，大的MCN机构已经垄断了大的流量和真正专业的内容生产者，平台迁移成本极低；大流量主产品能力的抄袭门槛又不算高。
所以，除非你能纯粹的全面培养素人成为达人，否则这类型的手段可能只作为补充，要真的撬动达人价值还是要回归到以上两个点。
降低创作的成本：
当你的产品不足以让一个达人在这里养活自己，那么你可能就很难得到独家的内容。
要让达人愿意在你这里搬迁内容或者一定程度的定制创作，可走的路就只有尽量减少内容生产的成本——快速搬迁，极低门槛的排版能力，和行业通用规则一致的产品形态等等。
接下来，我们看一下另外一个截然不同的面对B客户的领域。
B客户相比于C客户，目的更加明确，愿意投入更大的成本交换更大的价值。在B的领域，商业化思维的主导就更加明确，价值的创造和交换成为了唯一的话题，产品体验起到的作用微乎其微，除非你提供的价值本身就是产品的体验（比如说：一些企业服务工具）。
要理解生意人B的价值诉求，先从一个个人经历的故事开始：
曾经牵头过一个面向B商家服务的工具平台，商家支付费用使用工具和流量等整合的服务。
在工具平台搭建的早起，我们以非常产品导向的思维进行了规划，重点考虑的是工具的各种功能、平台使用体验、对平台的流量等价值贡献等问题，设定了工具平台的点击率、跳转率、转化率等关键考核指标，在这些导向下不断的去优化工具平台。
然后，我们召开了第一次的商家推广大会，准备了精美的PPT，详尽的介绍了工具平台各种先进的能力，复杂的逻辑和优秀的体验，其华丽程度首先把我们自己都感动了。
但是，现场反应平平，几乎所有商家全程都在玩手机，似乎对我们精彩的演讲丝毫不感兴趣。
会后我们找到几个资深的商家咨询了原因，其中一句关键的点播对我们产生了至关重要的影响：
“我们只想知道在你这里能不能赚钱，投入多少回报多少，流量成本吧如何，比其他平台有没有优势。其他的真的不太在意。”
这一句话真正引起了我们关于“什么是商业化？”“怎么样才叫做生意？”的思考。
面对着实打实要和你做生意的商家，一切形式化的虚无的东西都没有任何意义，只有唯一关键的话题：赚钱（当然不同的业务模式又有其他的一些核心价值例如获客等但逻辑都是可以套用的）。
回去以后我们快速调整了整个业务的导向，弱化了所有关于体验的考核指标——点击率，转化率（还要保留的原因是：这个产品还涉及到C端的用户体验），而把一切涉及到投入产出，能不能挣钱的指标——流量成本，拉新成本，费用的投入产出比，作为主要的考核导向来指导所有的工作方向。
至此为起点，这个产品开始真正的在市场上迎来了爆发，每一次宣讲会后（新的宣讲会我们只强调投入产出效果）开放的名额都被一抢而空。
以上的故事即是我对与生意人B合作的商业化思维理解：剥离掉生意场各种复杂的规则和概念，要撬动生意人B的投入，实际上也是在和他们做生意。能不能帮他们赚钱是唯一应该考虑的问题。任何经过包装的，浮夸的，虚无的内容在真实的投入产出效果下都没有任何意义。
当你合作的对象从一个想要赚钱的生意人变成了一个大公司内部的职业经理人，你将面对的价值又从单纯的赚钱变成了更复杂的职业经理人价值。
一个职业经理人心里在意的价值第一优先级，并不是帮助公司更多的盈利和获取价值（虽然这个理念并不道德但这是现状你不得不面对），而是他在和领导汇报这次合作价值的时候是否能得到认可。
所以，面对职业经理人这样的B端客户，并不能仅仅考虑实现业务目标，你还需要从他的角度考虑：能否过让这次的合作有更多的标杆价值、项目意义能够挖掘和包装出来，以帮助他形成一个漂亮的汇报文件。
所以，和B端客户做生意，需要更多讲故事的能力。除了业务目标的承诺外，你还能够在方面销售合作谈判的时候，能够完整的描述出：未来他在做汇报时候能够拿到的完美的报告是什么样子的？
以此去考虑：你在一开始要销售方案应该如何设计？业务应该增加哪些模块？合作应该提供哪些支持？就能够更好的帮助你搞定一个职业经理人的客户。
以上便是基于活动运营应该掌握的最基本的一些商业化思维业务运用介绍，除了常规的运用外，更重要的还是要强调互联网非技术工种人员应该都要具备“创造体验”和“创造价值”两种思维模式，能够真的帮助你创造出叫好又叫座的策划。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
大多数设计师在实际工作中，经常会碰到设计稿改来改去，改得焦头烂额，甚至怀疑自己的设计水平，这是为什么呢？又有什么解决的方法？这篇文章为你答疑解惑。「设计」这一门工种，似乎是永远避免不了「改稿」这一环节的，即便是非常顶尖的设计师，不为甲方不为外部原因所妥协，也会在自我实践中寻求改变。但是，「改设计」也未必是越改越好，如果沟通不当，也会存在越改越糟的结果。所以，作为设计师，一方面我们要吸取不同的意见，另一方面也要全面提升自己的知识架构、坚守自己的原则。
接下来以「UI设计」为例，剖析我们日常工作中「改了又改」的问题。在实际工作中，UI设计师通常会面临来自老板、产品、运营、开发等各方人员的意见，也常常会因为字体的粗细、间距的大小、颜色的选择等等问题各执一词、争论不休，就像下图一样：
为什么会这样呢？其实，在UI设计中，频繁改稿主要存在三种情况：
针对以上问题，在实际项目中怎样避免陷入频繁改稿的死循环，从而提高工作效率、推动项目进展，提升自己作为设计师的成就感呢？
首先我们来了解一下UI设计的工作流，只有清楚自己岗位的流程，才能更好地拿捏设计。每个公司的类型和规模可能都不太一样，但基本一致，无非就是5个阶段：需求 – 设计 – 开发 – 测试 – 上线。如果按职位划分就是：产品经理 – 交互设计师 – UI设计师 – 前后端开发工程师 – 测试人员 – 产品上线。
所以我们UI设计师是处于流水线中游的状态，向上对接产品，向下对接开发。在这个流程中，要做到减少设计修改的频率：
向上要明确产品经理的需求，将原型需求准确恰当的视觉化；
向下要考虑开发实现以及时间成本，因为如果一个设计做的非常绚丽，但是开发实现不出来或者很难实现或者实现的时间成本很大，那么肯定需要对设计方案做出调整，采纳折中方案。
所以，不想让自己的设计改了又改，那么一定要全方位的多沟通，一定不要「闭门造车」。
UI设计师接到产品原型后，一定要弄清这几点，再开始设计：
1. 原型是否确定，会不会存在变动？
我们在接收到产品经理递交过来的交互原型稿之后，先和对方确定收到的需求是否完整，是否是最终稿件以及是否会存在变动。一般来讲，在大型企业里面流程都比较规范，产品经理输出最终原型之后，后期变动的可能性较低。但在中小型企业，通常因为项目时间紧张，流程不够完善，反复的可能性较多。一些大型需求，产品经理有可能会分模块、一部分一小点的流转到UI设计，这样存在的问题隐患比较多，因为经验较少的产品经理全局概念较差，虽然口头上说这一部分的需求已经完善了，实际上当所有需求汇总之后极有可能需要再次调整。所以作为UI设计师，我们尽可能不要去接局部输出的原型，需要再次确认无误后，我们再着手设计，这样就避免了原型需求的变动造成设计的变动。
还有一点，在产品经理给到交互原型时，我们是被动的接受，还是在需求沟通之中也能及时参与呢？最好在产品需求的评审阶段，对应的UI设计师可以积极参与讨论，一起沟通。一来可以熟悉产品思考的整个过程，二来可以在原型的沟通中站在设计的角度及时发现问题，提出建议，避免在原型定稿后再去修改的尴尬。
2. 项目的时间周期
在接到产品的原型后，一定要及时确认项目的时间周期，通常产品经理会主动告知项目的周期，询问UI设计完成时间，我们根据需求的复杂程度给出UI输出的预计时间，再根据这个时间节点来划分每一天完成的工作量。如果产品经理给的时间周期比较短，那么尽可能的阐述原因申请设计时间。如果时间过于仓促的话，设计思考的时间就少，考虑的问题很难全面，不利于界面效果的最佳呈现，导致后续改稿的可能性也很大。
3. 理清设计意图，处理好信息层级
接到产品原型，一定要理清设计意图，处理好信息层级。
当产品经理递交给我们确定的需求原型之后，切莫盲目开始设计，UI设计并不是把原型框架进行简单的排列，我们需要理清设计意图，熟悉功能架构、掌握交互逻辑，明白产品经理想要解决什么问题，达到什么程度以及具体的设计方向。
信息层级这个问题，好像我们在实际工作中经常会提起，但是要做到恰如其分的标准还是有点难度的。准确把握界面的信息层级还需要跟产品经理多方面的沟通，因为有些时候我们以为的，并不是产品想要的，所以一定要多次确认，才能精准把握。
△ 上图左侧是lofter首页列表，右侧是我统一梳理层级关系之后的效果
改动的重点：
在实际设计过程中，当碰到一个设计模块拿捏不准的时候，可以在 sketch 或者 ps 中建立多个画板，将几种不同的设计方案平铺展开，进行视觉对比分析。如果自己拿不准，可以叫组员或者其他部门的「小白」来进行选择投票或者提出改善性建议。不要小看「小白」，不要觉得他们不懂设计，提的建议对设计无用。其实不然，我们的设计最终目的是给人用的，而且要好用，所以一定要多结合小白用户的多方面意见，才能让自己的设计更经得起推敲。
上图为笔者在处理个人中心界面效果拿捏不准的时候，布局了多个效果进行对比，通过对比的呈现后，就可以清晰判断每一个界面存在的问题。
另外，UI设计中，不要停留于表面，不要用「好看或不好看」去做简单评断，在设计过程中我们的界面布局、颜色把控、字符间距、icon设置等多方面都要经得起推敲：为什么这样设计？换一种设计合不合适？
只有让每一处设计都有理论的支撑，深思熟虑后，才会让设计更切实际，才能让人信服，才能实现产品指数的增长，也更能体现设计师的价值。
当设计稿出来之后，一般会组织 UI评审，UI设计师一定要将自己的设计理念表达清楚，将设计中考究的观点输送给参与评审的各方人员，这样会让你的设计更有信服力。如果在评审过程中，产品、运营或开发对设计稿提出不同的意见，我们首先不要急于否定，要确定立场：大家都是以产品为核心去思考问题，也不要人云亦云，要清楚他们为什么会提出这个意见，是不是自己的设计哪里没有展现好？即便对方的建议本身没有可取性，那么你也要站在你的视角用你的观点解释给对方听。这决定于每个设计师的自身知识架构和理论支撑，所以一定要让自己不停地吸收，才能让自己的设计更经得起推敲。
以上是我在实际工作中的一些比较浅薄的总结，如有阐述不周的地方大家可以相互探讨。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com