了解对比如何在设计中发挥作用，在用户界面中可以找到哪些类型的对比，以及为什么它对积极的用户体验很重要。
一般而言，“对比”一词用于描述彼此截然不同的对象。谈到视觉感知，对比度基本上与颜色或光线的差异有关，可以使物体清晰可辨。
为什么对比度很重要？因为人眼自然会捕捉到对比度。图像的最高可能对比度称为对比度或动态范围。更重要的是，对于色盲等视力不佳的人来说，对比度成为他们看到的物体的核心特征，并让他们能够区分它们。
在学术艺术中，对比处理对立元素和效果的排列，例如明暗颜色、大小形状、粗糙或光滑的纹理。在这种情况下，对比不仅可以用来吸引注意力，还可以设置情绪和氛围，在艺术品中创造多样性、视觉趣味和戏剧性。
在设计中，对比度是影响效果的关键因素之一。 可扫描性网页或移动屏幕的视觉层次结构。它使设计师能够以一种方式呈现布局，告知用户哪些交互点是重要的，哪些是次要的。对比度可以有效地吸引用户的注意力并将其吸引到特定元素上，因此它在支持数字产品的直观导航和可用性方面发挥着重要作用。
Pass-On 应用程序登录页面的设计展示了有效的颜色和尺寸对比示例，为页面构建了坚实的视觉层次结构。
UI设计中的对比类型
对比可以基于 UI 元素的不同特性，包括：
A. 颜色：这种类型是人眼最自然和最明显的对比之一；它适用于颜色明显不同的情况，例如，通过互补、分裂互补或三元方案组合，这种类型的对比最广泛地用于制作按钮和其他关键导航元素。在网页布局或应用程序屏幕中立即看到，支持清晰直观的导航。
B. 大小：这种类型的对比是基于首先引起注意的元素明显大于其他元素。
C. 形状：通过使一个元素的形状与其他元素不同来吸引用户的眼球。
D. 位置：在这种类型中，设计师以这种方式更改一个元素的位置，使其看起来不同，例如，文本片段的新段落以缩进开头。
E. 纹理：这里的差异是由于使用彼此明显区分的纹理而建立的。
F. 方向：改变元素的物理位置，使其在其他方向，这样以不寻常的方式吸引用户的注意力。
经常想到的关于对比度的第一个想法是黑白的东西。在没有阴影和多种颜色的情况下，单色图像使用对比度作为表现潜力的主要助推器。这在用户界面中的工作方式相同。更重要的是，与艺术品或摄影作品相比，对比度不仅会影响美感，而且对布局的可用性也有重大影响。因此，深思熟虑的对比度使用是使网站和应用程序用户友好且易于使用的强大方法。
排版对比
另一种特定类型的对比是排版对比，它基于设计作品文本部分所用字体的区别特征的差异。
加拿大字体设计师卡尔·戴尔定义了 7 种核心类型的排版对比：
A. 尺寸对比：它是关于由表格创建的基本图案的物理放大和用于文本的类型的重量。这里最常见的情况是使标题或标题明显大于文本。
B. 重量对比：粗体在同款较轻的对比中突出。它有助于将注意力吸引到文本的特定部分，并让用户了解它们的重要性。
C. 形式对比：这里的形式是指大写字母和小写字母之间的区别，或者罗马字母和它的斜体变体，压缩和扩展版本，与标准类型协调的脚本类型——所有提到的都可以用于戏剧性的形式的改变。
D. 结构对比：结构意味着不同类型字体的不同字母形式，例如单线无衬线与高对比度现代，或斜体与黑体。
E. 纹理对比：这是关于字体的线条如何看起来像一个整体，这部分取决于字体本身，部分取决于它们的排列方式。
F. 颜色对比：第二种颜色通常不如基本的白底黑字（或黑底白字）强调，因此必须仔细考虑需要强调的元素并注意色调值使用的颜色。
G. 方向对比：这种类型是关于垂直和水平之间的对立以及它们之间的角度。出文本块也有它们的垂直或水平方面，将宽的长线块与高的短线列混合可以产生对比。
另外，还有一些不太流行的对比，比如所谓的孤立对比，就是把一个词或词组放在远离其他元素的地方，这样就可以从人群中脱颖而出，以及对比按节奏（空间间隔）——破碎的部分形成对比并吸引注意力。
对比辅助功能
阅读上面提到的所有内容，很容易假设这里的经验法则是对比度越高，设计越好。然而，事实并非如此：以及任何其他设计方面太多并不意味着更好。虽然低对比度会使内容难以感知和阅读，但过高的对比度会引起眼睛疲劳，使交互更加困难。
根据网页内容无障碍指南 2.0，文字的视觉呈现和文字的图像应该坚持至少 7:1的对比度，以下情况除外：
大文本：大文本和大文本图像的对比度至少为 4.5:1；
装饰：作为界面组件的一部分的文本或文本图像，作为装饰没有对比度要求。
标识：作为徽标或品牌名称一部分的文本没有最低对比度要求。
注意留白
空白是留空的布局区域，不仅在对象周围，还包括对象之间和内部。空白是页面或屏幕上所有对象的一种呼吸空间，因此它极大地影响了 UI 中应用的不同类型对比度的有效性。
总结
生活充满了对比，无论你会采取什么方面。对于所有的生命，我们必须学会如何接受这一点，并尝试享受如此多样化和不可预测的生活。与现实相呼应，设计也充满对比，并尽可能多地借鉴。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关于按钮的一些知识和我的一些观点分享给大家。
按钮是最常用的组件之一，有很多小伙伴并没有很全面的认识这个组件，今天我把关于按钮的一些知识和我的一些观点分享给大家。
一 按钮的作用
在使用按钮之前，你要了解什么是按钮，按钮的作用是什么，什么时候该用按钮。
1）什么是按钮
按钮用于触发一个及时操作。
2）有什么作用
2.1 功能操作
比较常见的是：展开收起、加减、下拉等。这种情况下以功能性为主，按钮的形式适当弱化，重点强调功能，突出主体信息。
2.2 指引用户下一步操作
这个是最常见的使用场景，每个可交互页面上都有这类按钮的出现，用来指引用户下一步该怎么做。比如：创建、保存...
2.3 培养用户习惯
当用户知悉某个按钮能指向某个操作，或者获取某类信息后，长此以往用户就会形成使用习惯。如果某操作能够为用户持续带来价值，那就可以在按钮的位置让它更醒目，持续培养用户点击习惯。
二 按钮有哪些类型
· 主按钮：用于主动行动点，一个操作区域内只有且只能有一个主按钮；
· 默认按钮：用户内有主次之分的一组行动点；
· 虚线按钮：常用于【添加】操作；
· 文本按钮：用于次级的行动点；
· 链接按钮：用于作为外链的行动点。
三 按钮的状态
1）交互状态
1.1 Normal 正常状态
此状态为按钮的正常显示状态，就是按钮在也页面中的常规状态。
1.2 Hover 悬浮状态
此状态为按钮的悬浮状态，当鼠标滑过时候的状态会给用户一个交互反馈，因为它只是一个视觉上的反馈并无实际作用，所以在移动端就把此状态去掉了。
此状态的效果并没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.3 Click 点击状态
此状态为按钮的鼠标 / 手指按钮状态，操作完此状态后，就会引发此按钮的真实作用。
同时，此状态的效果也没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.4 Disable 禁用状态
此状态为按钮的不可操作状态。
当页面中有未完成的任务或页面中有错误导致不可提交页面时，按钮会处于 Disable 状态。这个状态在产品中也是很常用的，而且这种情况下应该引导用户去做其他操作，所以此按钮在视觉上一定要弱于其他。所以要制定一个通用的展示方案。
一般方案有两种：
· 无论按钮本身颜色是什么，它的背景色均为纯灰色，常用的色值有：#CCC、#999等，此种方案为常用方案；
· Disable 状态为 Normal 状态的 30% 透明度，如果你想让按钮都有颜色倾向的话，可以用这种方案。
2）状态属性
· 常规：常规样式的按钮，主操作按钮；
· 危险按钮：删除/移动/修改权限等危险操作，一般需要二次确认；
· 幽灵按钮：用于背景色比较复杂的地方，常用在首页/产品页等展示场景；
· 加载：用于异步操作等待反馈的时候，可以避免多次提交。
四 按钮的使用方法 / 禁忌
1）一个操作区有且只有一个主按钮
一个操作区有且只有一个主按钮去引导用户操作，如有有多个或没有则会影响用户的判断。尽可能少的让用户去做选择，产品的终极目标应该是“傻瓜式”产品，不要让用户有学习成本。
2）圆角值
根据产品风格，三种圆角值的设定：
2.1 圆角值为 0
这种适合用在比较严谨 / 企业级产品中，比如：阿里云；
2.2 小圆角值
这种是最常用的形式，在不失严谨的同时还有一些细节，如果可以的话，尽量选这种的；
2.3 超大圆角值
这种一般需要有独特的产品风格才可使用。样式不好把控全局效果，所以使用频率较低，慎重使用。
较大圆角值，此类千万不要用，不要问，问就是太丑。
3）精简文字
按钮里面的文字一定是精简的，不要展示过多文字，更不要折行。
4）文字与按钮比例要适中
文字与按钮的比例要适中，文字不要太大或太小，都会影响视觉展示。
5）弥散阴影
如果你想要用弥散阴影，阴影的颜色尽量用带按钮本身颜色倾向的，这样会让按钮更有呼吸感。需要注意的是：只有主按钮才能用阴影，其他级别的不要用，不然识别度会变差，并且会让按钮的体验变得很差。
6）主次操作按钮样式统一
主次操作按钮样式要统一，不要滥用样式。
7）按钮样式与其他组件要有区别
实际使用中，按钮样式不要与其他组件样式混用，避免让用户产生误解，做一些不必要的操作和思考。
8）不同场景适配
现在暗黑模式也是常用的场景了，所以黑/白场景下都要考虑到识别度的问题。
9）主次按钮的位置
主次按钮左右的问题，也常常出现在设计讨论会中，这次我直接放个结论吧，以后不要再为这件事吵架了。
在提交页面、弹窗中，主按钮在右；在其他常规页面上，酌情考虑。
五 按钮尺寸
按钮尺寸具体用多大的，这里我总结了一个规范（仅代表个人意见）。
· 高 = 文字行高 + Xn，X=自然数，n=4
· 宽 = 文字宽度 + Xn，X=自然数，n=4
在其他地方也可以用类似的公式去做规范，比如卡片的间距，你可以设置 n 为基础值，在此基础上用 Xn 去选取合适的值。
注意：常用的字号为 12px、14px，尽量不要用太大的字号在按钮上。
小结
按钮只是众多组件中的其中一个，也是最常用的组件之一。对于设计师来说，无论大小组件，我们都要精益求精的去思考，只有把每一个细节做好了，才能做好产品。日积月累的把每一个知识点掌握了，我们也就成长了。
文章来源：优设网 作者：友设青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一个简易的小教程，一起Get起来~
设计中存在一些不可忽视的趋势。尽管玻璃态在UI设计中不是新的事物，但是最近又被人们挖掘出来了。有些人甚至将这个趋势称为“玻璃态”。
下面让我向你展示如何通过7个简单的步骤教你如何创建玻璃态的UI效果。
1）画一个形状
首先创建一个基本形状，一个具有以下尺寸的矩形：640×400，再加40pt的圆角。
2）应用渐变填充
现在该基本填充了。在本教程中，我们将使用渐变。两种渐变颜色都将是纯白色（#FFFFFF），但是它们的不透明度会有所不同。将第一个设置为40％，第二个设置为10％。
3）添加背景模糊
我们来模仿玻璃的是模糊感。首先将背景模糊值设置为20左右，来看看这个是表面如何变化的。当然，你也可以根据自己的效果来设置不同的模糊度。
4）添加边框
一个优雅的边框会为元素增添了光泽。当玻璃表面重叠时，它也有助于建立视觉层次。如果要在设计中创建定向光的幻觉，则可能需要对边框使用渐变。我是这样制作卡片的，所以看起来更有“质感”。
卡边界对角渐变的设置：
边框：3px
颜色1：#FFFFFF（不透明度50％）
颜色2：#FFFFFF（不透明度0％）
颜色3：＃FF48DB（不透明度0％）
颜色4：＃FF48DB（不透明度50％）
5）应用阴影
细微的阴影效果有助于增强视觉层次。由于阴影的存在，区分所有层将更加容易。
在我的示例中，我使用具有24的模糊值的深色，并且扩展减小为-1。这次，你将通过添加阴影样式属性以与玻璃表面一起成形来获得最佳效果。
6）填写内容
是时候添加一些内容了。填写必要的徽标和文字。要创建压印层的错觉，请用白色填充内容，并将不透明度降低到50％。你也可以玩图层混合-尝试叠加以获得有趣的结果。
7）添加质感
玻璃卡片已完成，但是，你可以进一步添加一些高级纹理！要添加优雅的噪点，我们添加带有噪点的图像。将不透明度降低到20％，并将填充的混合模式设置为“叠加”。看看现在看起来多么有质感。
来看一些其它的尝试~
文章来源：UI中国 作者：Tzw_n
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
导读
你的设计是否能被理解？为什么设计的价值总是不被人认可？
设计不仅仅只是带来美感，好的设计能够为产品、公司甚至整个社会创造巨大的价值。而在创造好的设计这个过程中，最重要、也是最容易被人忽视的，便是设计思维。
何为全局性设计思维？它能够为设计师带来哪些价值？本文将从设计的本质出发，结合设计的发展趋势，带你了解全局性设计思维的真正力量。
目录
写在前面
一个习惯性的序
一、我们为什么需要设计思维？
二、下一个时代在哪里？
三、互联网“下半场”，从大势中看变化
四、设计思维的转变，差异与融合
五、探寻全新的思维方式
六、全局性设计思维概述
七、如何运用全局性设计思维？
八、以全局性设计思维，构建设计体系
九、文章预告
末
写在前面
这篇文章的主要内容，来自我在19年底的一个沙龙分享。整个分享以设计思维的角度入手，讲述了全局性设计思维的来源和重要性，以及我是如何在不同产品线上去运用这种设计思维的。
何为全局性设计思维？为什么要讲这种思维方式？
这是我一直在探索并实践的一种设计思维。从最开始的理论雏形，到各种项目的实践，不断进行修正和完善，最终形成了一套卓有成效的思维方式。通过这种思维方式，我逐步帮助产品解决了许多长期性的问题，并最终构建了各种不同类型的设计体系。最终，随着品牌矩阵与产品体系的落地，形成了一个完整的网易智慧企业设计体系。
网易智慧企业设计体系
因为篇幅原因，本篇文章将重点从理论层面阐释全局性设计思维的导论、价值及使用方式。而具体的实战案例，我之后将会以另外几篇单独文章的形式进行展现，并详细讲解在设计过程中的一些细节与过程。希望能够帮助大家更深入地去理解如何根据不同的场景正确地去使用这种思维方式。
未来可能会包含以下几篇文章：
全局性设计思维 | 如何打造强大的品牌体系
FishDesign组件库 | 从零到一构建企业级UI组件库
全局性设计思维 | 如何构建事业部级大型设计体系
当然，目前的设计体系仅仅只是一个开始，未来还有很长的路要走。
希望本文能够给为你带来小小的启发，让设计思维帮助你更好地发挥设计的价值。如果你对某一方面特别感兴趣，可以直接跳到这一章进行阅读，无需浪费过多时间。如果你有任何疑问，也欢迎随时与我交流。
✨
一个习惯性的序
-
“喵呜～” 我又出现了，那个爱写序的装逼作者。
这次把序放在了第二段，这样子看上去就不那么不务正业了哈哈。当然，写序更多的是为了记录生活，希望每一篇文章不仅仅只是传递知识，更是一篇有温度的文章。
经历了风风雨雨的2019，又度过了魔幻版的春节，我终于又开始正式地写文章了。但这次不同，我拥有了两只可爱的小伙伴——汽水和芬达。汽水8月18出生，芬达8月20出生，现在都已经是肥肥壮壮的两大只了。。
汽水总是在我码字的时候，睡在我的键盘上，或者以各种姿势吸引我的注意力。。 为啥拖了这么久才写写完文章，除了懒以外，汽水大概也要背点锅，哈哈。
整个2019年中，经历了很多事情，人生观也随之发生了些许变化。
从并肩作战的同事的不断离去，到逐渐需要考虑团队的发展。从单打独斗闯天下，到思考如何让整个团队更加优秀、如何建立完善的设计体系等等。
角色、心态、责任，以及如何坦然地面对自己。
活在当下，用心生活。这是我一直当作座右铭的语录，也是我希望给自己的承诺。总是试图去尝试这种状态，但却异常艰难。像我这样的人，看上去总是“积极向上”，总是“规划未来”，总是希望事事完美，强迫着每个细节的完善。但不知不觉中，人生好像开始进入了“自动驾驶”的模式，活在了过去的思索中，活在了未来的规划中，唯独对于当下异常麻木。
这并不是我想要的生活，我开始尝试做出改变。
偶然间，通过一些书籍，我开始尝试正念禅修。感受每个呼吸中空气的流动、感受身体的每个部分、感受当下空间发生的每一件事情。虽然只是很浅显的境界，但正念依然对我产生了巨大的影响。我开始重新地审视自己的人生，审视自己的生活状态。
网易蜗牛图书馆：与快乐的小伙伴们
这种感觉，就像再次地呼吸了新鲜空气一样。
我们其实只存在于当下的时空中，过去和未来，并非真实存在的事物。回想一下，我们有多久没有像小时候一样，完完全全、毫无杂念地享受在当下的时光中了？
用心活在当下，平静地接纳一切发生的事物，这种感觉真是太美好了～
✨
一、我们为什么需要设计思维？
-
对于设计师来说，什么能力更为重要？是设计这门“技术”本身，还是思考如何去设计的“思维”能力？
对于不同的设计师来说，一定会有不同的答案。
这两种能力本身并不矛盾，他们相互影响，互相促进——就像“术”与“道”之间的关系。设计能力决定了设计作品的输出质量，而设计思维则决定了你思考问题、解决问题的能力。
然而，在现实的大环境下，“术”的重视程度远高于“道”，造成了很多设计师与日常业务的“分离感”。以至于，多数的设计师，无法将自己的设计能力有效地用于日常业务中；抱怨他人不理解设计，也因此错失了许多机会。
重视设计美感，其实并没有问题。视觉是最直接的表现方式，我们从最初开始喜欢这个行业，并最终成为设计师，大概都是因为如此。包括我个人，也是美感的追求者，常常为了几像素的细节，调整无数稿。也常常沉浸于自己的作品无法自拔emmm…
但是，美感之后，设计还需要什么？
路易斯·沙利文曾讲过：“形式追随功能”。而功能存在的意义，则在于解决问题。视觉的形式、美感，很多时候只是包裹在外侧的表层，而解决问题才是设计真正的核心。视觉的表现，一定要遵循解决问题的方式，向用户传递恰当的信息，最终引导用户以此来解决问题。
因此，我更希望更多的设计师，在追求美感的同时，能够重拾设计思维本身，寻找设计最根本的价值。
我们其实可以站得更远一些。学会去理解事物，学会用设计去解决问题。再以此为基础，通过你的设计能力去塑造它、点亮它，让它成为一个真正美好而又有价值的设计。
而设计的价值，将会成为你的价值。
✨
二、下一个时代在哪里？
-
互联网时代中的数字产品设计，需要什么样的设计思维？或者说，当下我们需要什么样的设计思维？
这个问题的答案，好像一直在变。
互联网本身便是一个新的形态，1989年“万维网”发明，1996年中国引入互联网，到今年已经有大约24个年头。我们经历了不同的互联网时期，而“设计”的概念也一直在变化中。
Internet 1.0 PC互联网时代。在这个时代，我们将大量的信息虚拟化，并通过网络进行信息传递。而我们的“设计师”们大多被称为“美工”，我们的“设计思维”，便是将信息变得更好看。
Internet 2.0 移动互联网时代，或者称为消费互联网时代。自从2007年乔布斯发布第一代iPhone之后，叠加4G、wifi等技术，手机成为日益重要的终端，世界逐渐进入了移动互联网时代。伴随着iPhone与其应用的出现，乔布斯让所有人理解了“用户体验”的重要性。我们不再是“美工”，我们变成了“UI设计师”、“交互设计师”。而这个时代，我们的设计思维变成了“用户体验思维”。
那么，下一个时代在哪里？我们的设计思维又将如何转变，才能适应下一个时代？
✨
三、互联网下半场，从大势中看变化
-
1.红利消失、增长触顶，互联网下半场到来
最近几年，我们已经能够明显地感知到——互联网的“寒冬”真的来了。随之而来的，便是互联网的发展方向似乎也正在发生变化。于是大约从2017年开始，互联网圈内逐渐出现一个新的名词——互联网“下半场”。人们普遍认为，中国的互联网将会由消费互联网时代进入下一个时代，即互联网下半场。
我并不完全认同互联网”下半场“的称呼。互联网本身是一个年轻的行业，中国互联网“下半场”，其实更像是互联网发展方向转变的标志。
因此，我们认为的下一个时代的方向，也许将会是Internet 3.0——即产业互联网时代。
互联网会什么必须要进入下一个时代？
对于互联网企业来说，一方面在成本端，随着人口红利消褪，劳动力价格上升，企业的成本将逐渐升高，倒逼管理者使用系统和工具来提率；另一方面，在收入端，野蛮增长的时代结束，增量经济转向存量经济，红利经济转向效率经济。
在“成本”与“效率”的双重压力下，再加上整个市场经济的下行周期，整体经济出现下滑，而一些依靠融资的互联网公司将难以为继。因此企业不得不寻找方式来提升效率，降低成本——而这正是企业级软件（ToB产品）最擅长的地方。
因此，在互联网寒冬之下，ToB市场便理所应当地开始被重视。
让我们纵观整个中国市场的发展，互联网的兴趣虽然促进了消费领域的蓬勃发展，但产业领域的发展则因此受到了巨大制约。中国率先从消费端、从第三产业开始数字化，然而在第一、二产业的数字化进程似乎并不是很快。一个重要的原因是，人口红利促使了消费互联网的快速发展，而这种红利让人们忽视了产业互联网的重要性。
在寒冬之下，我们终于发现，消费互联网蓬勃的基石，正是底层坚实的产业互联网。产业互联网如果不能得到有效的发展，则整个市场经济将无法更进一步的发展。
因此，产业互联网时代的到来，是中国互联网发展的需要，也将是大势所趋。
2.ToB市场将迎来机遇
产业互联网的发展，需要依托B端领域的发展，并逐步融入并带动整个产业进入互联网时代。那么，B端产品在中国目前处于一个什么阶段呢？
对于整个中国的ToB行业发展现状，大多数的人并没有一个清晰的概念。盘点中美上市的科技公司会发现，美国toC领域与toB领域市值之比是6:4，但在中国这个数字是20:1。
虽然互联网的整体环境不同，但中国ToB行业的发展，显然是落后太多了。于是乎，2018年开始，BAT大举布局，PE、VC加速进场——中国B端产品已经逐渐进入必须发展的时候了。
中国市场已经坐拥全球最发达的发达的消费互联网体系，而产业互联网的发展则却严重滞后。
同时，对比B端中云计算领域的IaaS、PaaS、SaaS三层架构，全球市场中SaaS占据了52.5%的份额，在中国却是IaaS分走了最大的蛋糕，占比达61.2%。中国市场VC的投资总额已经与美国相当，在SaaS领域美国企业获得了全球70.1%的融资，而中国只有11.7%。
因此，在互联网下半场，相对于ToC行业的触顶，ToB行业将会迎来历史级的发展机遇，随之而来的将会是产业互联网时代的逐渐到来。而在整个B端产品的类目中，SaaS产品作为企业级软件中最集成的产品，也将随着这股浪潮迎来爆发式的增长。
什么是SaaS产品？很多同学并没有接触过B端行业，平时用到的也都是C端产品，所以对B端产品的了解比较少。在B端行业最热门的云计算领域中，目前普遍会分为三层架构。SaaS（Software as a Service–软件即服务）；PaaS（Platform as a Service–平台即服务） ；IaaS（Infrastructure as a Service–基础架构即服务）。
附：云计算领域，三种不同的架构与对应的服务。
PaaS基于IaaS实现，SaaS的服务层次又在PaaS之上，三者分别面对不同的需求。越往上层，产品的集成度越高，提供的服务也就越丰富，而用户所需要的自行解决的东西就越少。而最顶层的SaaS产品，便是用户可以直接购买并使用的云端产品。
我们为什么要了解这些趋势？
因为一个新的时代，对应一场变革，也将成为一次新的机会。不管是SaaS产品还是其他B端产品，都将在新的时代中逐渐得到重视。而C端产品的发展策略，也将迎来新的变化。对于许多设计师来说，这将会是一个新的机遇。
顺势而为，方能乘势而上。
✨
四、设计思维的转变，差异与融合
-
那么，在逐渐到来的产业互联网时代，设计师需要注意哪些东西？设计思维又将进行如何转变？
产业互联网时代，意味着B端产品将得到重视，并与C端产品逐渐趋于平衡。因此，了解设计思维的变化，我们首先要从B端与C端产品之间，在产品设计与产品策略之间的差异性说起。
1.服务对象的差异性
从服务对象来看，C端产品的服务对象是人，产品的目标是针对人们生活方式进行的变革、升级。而B端产品的服务对象则大多是企业，目标是帮助企业进行商业效率的提升，从而产生价值。
服务对象的差异性，决定了产品在发展策略也将存在着较大的差异性。
2.产品“打法”上的差异性
从宏观的打法上看，消费互联网时代会更求“快”，而产品互联网时代则会更偏“稳”。
C端产品的服务对象是人，而人的需求在个体差异性上相对变化较小，这就决定了C端产品通常都拥有广阔的用户市场。
因此，消费互联网时代就像是资本在辽阔平原的角逐，长驱直入。讲究快速占领市场，不断地试错、不断地调整。从团购到直播，从打车到短视频领域的兴起，再到最后的单车大战落幕。消费互联网时代的每一次风口，都伴随着各种“游击战”式的竞争。入场速度、快速调整能力、资本深度，都直接影响了最后的结果，而最终的结果也往往是胜者为王，败者将快速地被市场淘汰。
B端产品的服务对象是企业，而企业间的需求差异性则非常巨大，这就决定了B端产品通常需要较强的纵深能力。相对应的，其用户群里在总量上就比较小、但也相对稳固。
因此，产业互联网就像在崎岖丛林的蹒跚前行，渐次演进，如同一场旷日持久的拉锯战。一方面，产业互联网的链条非常长，需要长期的深耕、积累才能逐渐站稳脚跟。而这也导致了产品的壁垒足够深厚，同类产品在短期内无法快速跟进。另一方面，企业间的差距需求的差异性非常大，因此产业互联网存在非常多的细分市场，不同的产品各自在不同的赛道中深耕。而其最终的结果往往是百花齐放，各自盛开。
3.整体行业的协同发展
虽然整个市场都不断地强调——ToC增长触顶，ToB是一篇蓝海。但这并非是“取而代之”，而是逐渐走向整体的“协调发展”。中国ToB的发展的一个重要根基，其实是“中国拥有世界上最成熟的消费互联网体系”这一巨大的优势。
因此，ToC在很长的时间内，仍然会是互联网的主力，而ToC市场的转型，也将有赖于ToB产品所提供的服务。
而随着中国将“互联网+”政策上升为国家战略，更是明确了以互联网带动传统产业的发展方向。因此，互联网的下半场，即产业互联网时代的最终形态，将是互联网与传统行业的“融合式发展“。
ToB产品将会成为带动互联网下一轮发展的核心驱动力。一方面帮助ToC领域完成转型，进入更健康、更稳健的发展阶段；另一方向，ToB领域赋能传统产业与互联网相融合，并最终完成产业升级。
4.产品形态的融合与趋同
整体产业的融合趋同，意味产品的特性也将互相融合。一个很重要的现象是：C端产品逐渐变得不那么C端了，而B端产品也越来越变得得不像B端了。
比如C端产品的主流赛道中，随着头部产品的赛道日渐趋于稳定，其产品体量也因为业务扩展而不断增加。同时，因为产品体系的逐渐形成，为了服务更多的C端用户，会有越来越多的B类用户进入平台，而为了满足B类商家的需要，产品的B端属性变得越来越强了。
而随着B端产品的不断受到重视，原先不被重视的产品UI、用户体验也逐渐在B端产品中得到加强。B端用户虽然服务于B端，但使用者终究是人。而随着竞争的不断加剧，原来的“重功能、轻体验”思路逐渐式微。我们逐渐发现，许多B端产品长的越来越像C端产品了，甚至在UI和体验层面做的与C端产品不相上下。
因此，随着产品属性的融合趋同，意味设计思维势必会与消费者互联网时代存在差异。而我们的设计思维将不仅仅局限在诞生于消费互联网时代的“用户体验思维”。我们需要更新的、更广阔的设计思维，以满足下一个时代的产品发展需要。
那么，新的思维是什么？它将从何而来？
✨
五、探寻全新的思维方式
-
从整个市场的协同发展，到产品形态的融合趋同。那么，我们的设计思维需要如何进行相应的变化？是同样进行“融合趋同”，还是另辟蹊径，寻求新的视角？
1.关键词提取
首先，不管设计思维如何变化，它一定需要同时满足两种产品设计思维的特性。通过前文的分析，我们可以在产品设计特性的维度，提取各自的关键词进行分析：
产品体验：诞生于消费互联网时代的用户体验思维，在产业互联网时代依然是产品设计中最重要的部分。无论是C端还是B端产品，用户体验必然是产品的核心竞争力，只有足够好用、好看，产品才能获得更多用户，最终获得商业上的成功。
灵活性：在消费互联网时代，在激烈的竞争中，C端产品的灵活性的打法对于产品的突围至关重要。而未来的B端产品竞争将会加剧，这就需要B端产品也逐渐需要较强的灵活性。
成长性：产品的发展必将伴随着不断的变化，特别是具有一定体量之后，产品设计的成长性将至关重要。因此，产品的设计是否能够预见未来发展，满足不断变化的产品形态，伴随着产品不断地成长，也将成为产品是否能够持续获得成功的关键因素。
产品效率：因为产品服务对象的关系，B端产品一直是产品效率的代名词。而在人口红利消失与经济下行的压力下，产品效率将成为所有企业关注的重要因素之一。产品的效率不仅影响着企业的成本，也是产品竞争力的重要体现。
这四个关键词，将会是我们在未来所需要关注的四个重点关键词。越是往左，则“C”属性越强，因为它更多地从用户的角度出发，更关注用户体验。而越是往右，则“B”属性越强，因为它更多地从企业的角度出发，更关注企业的长期发展。
2.跳出单一层面，寻求新视角
在四个关键词中，我们会发现，特性越是靠右，其所需要的整体性就越强。要满足灵活性，就需要用户体验与产品策略相关联。要满足成长性，则要进一步结合底层的开发能力。而产品效率的提升，则需要产品的设计与不同层面都有着紧密的耦合。
在互联网设计发展的过程中，我们从单点只关注视觉表层的“美工时代”，逐渐发展为关注线性的“用户体验思维”。在对于产品用户体验层面，确实有着长足的发展。
但是，单一层面的用户体验思维，在逐渐成熟的互联网时代中，逐渐显示出了一定的局限性。我们的价值局限于单一的体验层面，我们似乎无法对产品形成更大的影响力，也难以为产品带来体验之外的更多价值。
因此，设计思维想要满足新时代的需求，就需要同时满足前文提到的四个关键词。这就要求我们需要跳出单一层面，以全局的维度去思考产品的设计。
因此，全局性将成为未来的关键，我暂且将这种思维方式称为——全局性设计思维。
✨
六、全局性设计思维概述
-
全局性设计思维，即在设计过程中，始终能以更高的维度去审视全局，思考当下的设计。
何以全局，如何跳出单一层面？这种思维方式的前提，是你要首先了解整个产品（亦或是物体、组织等）的运行方式，清楚的知道整个产品需要达到的目标，从而准确、合理地对针对目前的局部做出设计，并最终构成整个完整的形态。
而“全局”的前提，是你拥有更高的眼界。你的眼界越高，你对产品、市场、甚至整个社会的洞察就越全面，你就能够解决越大的问题，你能够实现的价值就越高。眼界是基础，解决更大的问题是目标，而全局性设计思维则是实现这个目标的方式与过程。
全局性设计思维，可以帮助我们跳出产品的单一层面，去思考从产品层、到体验层、再到开发层这一完成的整体。让设计满足体验层的同时，满足产品层面的目标，同时让产品的设计与开发高度耦合，将整个产品串联成一个完成的整体。
好了，讲了这么多，我们具体应该如何去运用全局性设计思维呢？
✨
七、全局性设计思维的运用方式
-
全局性设计思维，的应用方式非常广泛。它并不是一个固定的方程式，而是一个更高层面的指导性设计思维，能够通过不同的形式，来帮助你解决问题。
1.全局观——在生活思考更多可能
在尝试这种思维之初，我们可以通过一些小的实践，去锻炼这种思维能力。
在日常的生活、工作中，其实我们有大量的事物可以练习和运用这种思维方式。比如你在装修一个大房子，需要去选择房子里的家具。当你在购买家具时，常规的思维方式是：这个家具在某个房间时应该是怎样搭配的，所以我要购买什么样形状、颜色的家具，来满足这个房间的需要。
但是，用这么思维方式来购买家具，将为对家具的灵活性与长期价值造成一定影响。从居住环境的长远来看，也许这个家具有可能会因为某些原因，需要放到另一个房间，而它的形状、尺寸、配色却无法满足其他房间的需要。最终，我们只能重新购买，或者接受一个风格、尺寸上并不搭调的房间出现。
因此，当我们在购买家具时，我们是否可以利用全局性设计思维，从整体空间的角度出发（而非单个房间），去思考如何让家具满足更多空间需求。长此以往，我们不仅可以打造一个风格统一的大空间，同时也能增加每个家具的利用率，在无形中也增加了这个家具本身的价值。
之所以举家具这个例子，是因为这个原理与产品设计的原理非常类似。你可以将这个房子看成是整个产品，而家具则是不同的组件。通过不同的家具（组件），构成了我们的不同功能模块（房间/功能区），而所有的功能模块则构成了整个产品（房子）。
房子（产品体量）越大，房间/功能区（功能模块）就越多，家具（组件）的多样性、复杂性就越高，我们就越是需要从全局的角度去思考装修的统一性（风格体系化）和家具的通用性（样式组件化）。只有这样，我们才能更好地去打造一个风格统一、体验一致，同时又具备足够自由调整空间的“大房子”。
2.全链路——从全流程中重新思考设计
当你仔细地去理解许多非常著名的设计作品时。你会发现，几乎所有优秀的、巧妙的设计，往往在设计中都体现了全局性的设计思维。它不仅仅解决着当前的问题，同时也能够解决更大的问题，发挥巨大的价值。
比如著名的坂茂卫生纸的设计，看似普通，只是将卫生纸的轴心从圆形改成了方形，但它却成为了举世闻名的、公认的好的设计。为什么呢？
我们先了解一下这个设计为什么好。
首先，传统的圆形纸卷拉出来的纸会比你实际需要的更多。而方形纸卷则由于阻力的作用，让你用得更少，从而起到了解决资源的作用。其次，在运输过程中，圆形的纸卷之间会产生很大的空隙，而方形纸卷则能够紧紧靠在一起，提升空间利用率，从而起到降低运输成本的作用。
这简单的设计，居然发挥了如此大的作用。
那么，为什么我们在设计时就没有考虑到这些问题呢？因为我们从最开始，就没有从“纸”的整个全流程来去思考问题。
让我们“站的更远一些”，纸这个商品，并非只是我们见到的在商店售卖的那一刻。它从工厂中制造完成，通过运输送到每个超市中，当我们购买以后，它又会在很长一段时间内，出现在卫生间，陪伴你使用的每一刻。我们可以将整个流程分为3个场景，而每个不同的场景，又将会对纸本身有着不同的影响。
运输场景——卫生纸的运输成本——卫生纸的价格
售卖场景——卫生纸的造型、包装——影响用户购买
使用场景——卫生纸的使用过程——影响用户的使用体验
当我们能够考虑到卫生纸的运输过程时，我们就可以通过设计去降低运输成本；而当我们可以考虑到用户的使用场景时，我们就可以通过设计，去提升阻力，降低使用量，间接地去提升用户的使用体验。而当我们通过全局性设计思维，可以同时解决这三个问题时，我们的设计就是好的设计，就拥有了更高的价值。
发现了吗，为什么你没有想到相同的设计方案？设计能力并不是关键，设计思维才是指引你做出好的设计的前提。当你能按上述的方式，去思考整个流程、不同的场景，我相信大多数的人都能够设计出坂茂的设计方案，甚至比这个方案更好的解决方式。
✨
八、以全局性设计思维，构建设计体系
-
通过前面的两个案例，相信大家已经了解了全局观、全链路两种应用方式。
那么，我们最最最关心的问题——如何在业务中去使用这种思维呢？
在产品设计中，全局性设计思维也有着非常多样化的使用方式和场景，在之后的文章中我也会讲到很多应用方式。但是，在所有的方式中，我认为最为有效的，便是以全局性设计思维，帮助产品去构建一个完整的设计体系。
1.设计体系概述
什么是设计体系？谈及设计体系，大多数设计师会认为，设计体系就是设计规范。“不就是找个名次包装一下规范嘛？”
我们为什么需要设计体系？它与设计规范有何不同呢？
设计规范是设计师最为熟悉的一种规范文档。在产品设计时，优秀的设计师通常都会建立设计规范。然而在实际的项目中，设计规范往往无法难以有效实施。比如在开发眼中，规范并不符合开发规则，过于碎片化。而产品经理通常又不会去了解设计规范，因此在构建产品框架时也常常随意发挥。
很多项目做到最后，设计规范仅存在于纸面的意义，并随着项目的发展逐渐混乱。为什么会这样？
因为不同职能间的思考方式存在差别，设计规范对于其他职能来说经常难以理解与运用，无法与其他职能形成有效联动。
设计规范仅仅是基于视觉层面的规范，它是一个“平面”。而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系，它是“立体”的“有机生命体”。
设计体系的核心在于“体”，它是贯穿于整个产品的完整体系。设计体系由设计师创造，并深度融合于产品每个部分。它能够让产品更紧密、更统一、更有序，伴随着产品的生长，与产品共同进化，并最终推动产品的发展。
创造并推动这一体系，则要求设计师需要更全面的能力。只有充分地去理解并参与产品的每个部分的设计，才能让设计真正延伸至产品的每个部分。
而创造这一切的前提，便是全局性设计思维。
2.设计体系的构建法则
罗马不是一天建成的，设计体系也是如此。设计体系的建立是一个漫长的过程（与产品体量相关），需要在前期投入更多的精力。但若是你的方法得当，就会在项目中越来越轻松，并以此形成良性循环，而你也会越来越有成就感。
如何正确地去构建设计体系呢？我在这里总结了几个要点：
1）树立观念
首先，树立长期的体系化意识是必要前提。在任何项目中都要时刻保持体系化思维，着眼于整个项目，去寻找体系化的推动时机。当你在潜意识中拥有这种思维之后，你会自然而然的将其植入到设计中。
2）以解决问题为导向
体系化并非凭空建立，而是建立在解决问题的基础之上。设计体系的本质，就是由无数个标准化的解决方案，最终构成的一个完整的体系。因此，我们要以解决问题为导向，以全局性思维去思考问题的本质，最终建立适用于全局设计体系。
3）以小为始，重视质量
脚踏实地，从小处入手，去发现产品中最基础的一些问题。表面上看这些问题，对项目影响不大，但他们数量庞大，加在一起便会严重影响整个产品的效率。因此，我们要首先建立高品质的基础体系，再以此为基础构建更大的体系。
不要一开始就设法建立一个巨大的体系，那样只会是一盘散沙，因为它的结构是无序、混乱、不健康的。而这也是大多设计规范缺乏有效性和可实施性的根源。
梅拉妮·米歇尔的《复杂》一书中讲到，任何复杂系统，都是由无数个体通过简单的算法所构成的。在算法领域也是同样的原理，一个优秀而强大的代码，必然是由无数个小型模块，通过简单的算法耦合形成巨大的代码矩阵。基础算法越强大、代码结构越“健康”，可扩展性和灵活性就越强，其能力就越强大。
4）从规范入手，由面到体
从本质上来说，设计体系是由“多个个层面的规范”组合而成的。因此，由设计师推动的体系化建设，往往最初都是从设计规范这一“单层规范”开始。但是，设计体系的建设需要将单层的规范，通过不同的方式，转化为不同层面的规范，最终由面到体，形成体系化。
5）换位思考，寻求跨职能合作
设计体系的建立与维护，通常需要多职能的通力协作。因此，我们需要经常换位思考，在完成设计的工作，帮助其他职能完成目标。只有这样，才能得到更多的信任，并以此为基础推动更多体系化的建设。
比如我在设计一个功能模块的页面时，首先会与不同模块产品经理进行交流，了解不同的业务需求，并从产品层面就开始寻求统一性与通用性。这样的话，当其他模块需要同一个功能时，前端便可以直接复用，同时后端的数据也可以进行互通。而在开发端，我也会详细了解不同端的开发实现原理，务求设计规范与开发规则在理解上的一致性。这一既方便了开发理解规范，同时也从根本上提升了开还原的准确性。
长此以往，整个团队就能够建立良好的沟通和互信关系。有了这种默契，设计体系的推动就容易多了。
6）保持优化，不断成长
设计体系的另一个重要价值在于，它是可以伴随产品不断成长的。所有产品都是在发展中不断变化的，过分僵硬的规则，将会对产品发展起到反作用。
在业务发展中，产品一定会不断地加入新的功能模块，并对原有页面作出相应的调整。因此，设计体系需要时刻与产品策略保持一致，及时与上下游职能沟通，不断地针对产品发展进行优化，以保证设计体系能够符合产品的发展需要。
7）使用正确的推动方式
体系化最终能否成功实施，推动的方式至关重要。
在日常的项目中，大多数的业务方对设计体系了解甚少，也难以体会其中的价值。因此，他们通常会认为这些东西毫无必要，多数情况也不太愿意配合体系的推进。如果强行推进，反而会引起不必要的阻力，招致反感。那么，我们应该如何正确的去推进设计体系建设呢？
1.为他人带来价值：首先，寻找双方共同的利益点是首要任务。也许是可以让其他职能的工作更，也许能够促使其达成KPI，再不直接，那也一定能够为整个产品带来价值（不然你也没必要推了。。）。总之，设计体系一定要能够为他人带来价值，这样才能顺利推进。否则人家凭什么要协助你推进，因为你美丽可爱吗？你也可能比较可爱，但总归是不能一直这么来吧。。。
2.在解决问题后提出方案：不要一开始就啪一下抛出一个“宏大的理想”，大部分人会觉得你不切实际。你只需要通过这个体系，帮助业务方先解决一个问题，然后再提出你解决方式的来源——一个严谨的、可验证的、长远价值的体系化解决方案。
3.寻找合适的推动时间：最后，对于设计体系来说，寻找到正确、恰当的推进时机至关重要。比如当你在平时突然想要提出，对现有品牌进行升级时，大多数业务方都会认为你是没事找事。而如果情况是在新的一年中，产品进行了概念的升级，这时候你将概念以及未来的品牌规划融入在你的方案中，再去推进品牌升级，就会容易很多了。
✨
九、文章预告
-
本文旨在引导大家更好地理解和学习这种思维方式，想要用好全局性设计思维，光靠讲是远远不够的。最重要的是能将这种思维带入到产品中，为业务带来更大的价值。
因此，在后续的几篇文章中，我将通过不同类型案例，为大家深入讲解全局性的具体实践案例。
全局性设计思维 | 如何打造强大的品牌体系
为什么要建立品牌体系？品牌体系有哪些价值？设计师应该如何推动品牌体系的建立？
本文将带你了解网易智慧企业品牌体系的建设与推动全过程，聊一聊品牌体系建设的那些事儿～
FishDesign组件库 | 从零到一构建企业级UI组件库
我们为什么要建立组件库？在产品的什么阶段需要组件库？如何抽象业务组件？组件库设计过程中有哪些重要的细节需要注意？
本文带你深入了解，网易Web端组件库——FishDesign组件库从零到一的完整全过程。
全局性设计思维 | 如何构建事业部级大型设计体系
设计体系有什么价值？如何基于不同的业务建立设计体系？设计师如何推动体系化建设？在体系化过程中有哪些需要注意的地方？
我将会在这篇文章中，为大家介绍网易智慧企业设计体系构建全过程
1. 样式组件化+规范体系化，形成产品设计体系，整体重构产品线。
2. 结合品牌体系，推动事业部更多产品加入体系，形成智慧企业Web端产品设计体系
3. 推动更多产品/业务融入体系中，让智慧企业设计体系不断成长，赋能业务发展
文章来源：tob.design 作者：tob官方小编
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
现代管理学之父彼得.德鲁克说过一句话很经典的话：“如果你不能衡量它，那么你就不能有效的让它增长”。
写在前面
为了快速提升产品设计的商业价值，我们必须先明确思考商业价值的数据指标，用它来指导后续的设计工作，并
衡量其关键成果。步骤如下：
1. 分析我们产品的用户群体
做好用户人群的分析，定义好你产品的核心用户，找到核心设计思路，发现商业服务的设计逻辑，做好用户分析。
2. 制定产品设计的目标
找到商业产品设计的盈利点，做好商业设计价值的平衡和营收的策略，提升产品设计的商业价值。
3. 产品设计的整体规划
运用商业价值的思维做设计和严谨的科学态度，定义你产品的价值指标和商业增值的思路，做好用户增长地图。
4. 做好产品设计并科学测试
对产品设计进行科学测试，通过持续的测试和拆分变量，做好设计的迭代优化。
5. 最后跟进，做好产品设计的迭代和优化
产品设计需要设计的迭代和优化，经过科学严谨的设计流程，提升产品设计的价值感，定量为主，量化数据。
用户增长（UGD）的设计核心是 ？
1. 不断满足客户需求、创造客户价值；2. 不断与竞争对手进行区分，获得差异化的产品设计优势等。
一 重点思考：OKRs-目标与关键成果法
通过分析数据漏斗模型，以此来驱动团队使用数据思维，发现问题并成本的解决设计问题。
OKRs-目标与关键成果法，起源于德鲁克的目标管理框架也就是MBO,由因特尔前CEO安迪·格鲁夫演变成了iMBOs，意思是“英特尔公司的目标管理系统”。后来格鲁夫的同事约翰·杜尔为避免这个方法与德鲁克的MBO混淆，将其命名为OKR，OKR从此正式诞生.后来约翰把这套方法引入到谷歌,而真正让OKR火起来的是谷歌的风投合作伙伴瑞克·克劳，2013年他在网上发布了一段一个多小时的OKR视频，引爆了整个网络和企业界，从此OKR开始风靡全球。2013年底，OKR传入中国。
对于我们现在的互联网企业，如何通过OKRs思维细化设计的迭代优化和改版，结合实际工作的锻炼和思考，
我感觉具体可以拆分为以下 3 个方面 ：
1. 定义设计目标，（年度目标、季度目标、阶段性目标）。
2. 关键成果，设计目标通过哪些关键成果来达成。
3. 行动方案，这些关键成果或数据，应该采取什么行动来完成。
a. 定义：
OKR（Objectives and Key Results）即目标与关键成果法，是一套明确和跟踪目标及其完成情况的管理工具和
方法，由英特尔公司原CEO安迪·格鲁夫发明。
b. 为什么使用OKRs工作法呢 ？
在日常的设计工作和生活中，你是否会遇到以下的这些问题呢 ？
1：设计师，下班前回想一天工作时，感觉没有设计任务可以记。
2：团队设计师等开发工作人鱼，季度考核时，领导问你这个月，工作收获是什么时，你回想起来只是简单做了一些设计项目。
3：平时自己的目标太多，缺少产品设计的重点或创意点。
4：没有聚焦的产品设计目标和团队贡献感。
解决以上问题的思路，是今天我们所提到的OKRs工作法，OKRs工作法的主要目标是明确公司和团队的“目标”以及明确每个目标达成的可以衡量的“关键成果”。
OKRs工作法，可以在整个团队的工作项目中执行，产品设计的团队就可以明确工作的设计目标，集中精力去完成设计目标。
c. 如何去达成设计目标？
我们先确定团队的工作目标，确保团队成员的设计工作目标明确。每个人、每一天都聚焦到核心的设计目标上。
d. 设计目标的价值思考如下：
1. 明确产品设计优化的方向。
2. 有效的激励团队的设计成员。
3. 设计决策的认真思考和设计考核的思路等价值点。
e. 遵循设定目标的基本原则 ( SMART法则 ) ：
1. 明确具体（Specific）
2. 可衡量性（Measurable）
3. 可实现性（Attainable）
4. 相关性（Relevant）
5. 时限性（Time bound）
f. 举个例子
第一步：O（目标）
星期一，设计网站分享关于国际平面设计排版的设计文章。
KR1：文章正常推送文章，并且文章阅读量大于600000 。
KR2：文章点赞数量大于3000 。
KR3：文章互动评论大于100 。
第二步：关键成果，设计目标通过哪些关键成果来达成。
制定关键成果的建议是：
1. 必须是设计师能有效达成的设计目标。
2. 设计思考要具有创新价值的。
3. 输出的设计结果是可衡量的。
4. 设计目标一般三个目标以内。
第三步：超强的执行力，从关键成果到 “执行力计划" , 关键成果确定后，就要围绕关键成果来分解设计任务，每项关键成果就会做出一系列的设计任务，将这些合理分配至每周或者每天中去执行设计任务。
超强执行力的原则：
1. 必须写明最后的截止时间；
2. 必须写好完成的百分比。
温馨提示：
关键结果转化为具体行动后，我们就需要定期进行复盘确保每天工作都聚焦在重要目标上，所做的事情都服务于
设计目标上，使用专一、专注、专心的做事思路；要想发现痛点，我们需要考虑用户、场景、问题、动机。
痛点是用户增长的第一要素，用户增长的第一步是找到用户痛点。场景是同理心，站在用户的角度，去发现用户的痛点，为用户提供正确的产品设计和解决方案。
做好产品设计体验，提升用户的活跃度的三个关键性动作：
价值，引导，刺激 ：
1. 产品设计的价值思考，首先要解决用户的痛点，产品的功能设计带给用户的好处和好用。
2. 帮助用户设计好功能模块，引导用户更好的使用产品。
3. 刺激点，首单减免、优惠价等奖励措施。信任背书，名人、大V等知名机构的影响力，触动用户愿意使用产品。
重点来了，我们具体看优秀的运营设计案例，站在营销的角度思考用户增长：
1. 700 元礼包等你领-运营设计活动的价值思考：
518-收益狂欢节，最高领取700元红包，时间限制在：5月8日到5月31日，领取红包，点击立即领取后，方可参与获得奖励。限制活动时间，提升用户的紧迫感。送518现金或120元京东卡和50元话费等68888的体验金，吸引
用户享受优惠的心理，提升用户使用产品的愉悦感和惊喜感，用户粘性、产品的营销设计价值得到大大的发挥，运营氛围和主视觉设计等，专业的品牌形象和主张，建立用户的信任感，设计创意能很好的驱动用户增长。
2. 天天领福利和15元快车券大派送的运营设计价值思考：
超级 9:30 的天天领福利和15元快车券大派送，首次借钱成果即可领取，这个是金融产品都有的一种营销策略，
降低用户的成本。这里先拿网商银行和滴滴金融的做任务-领福利活动为例子，因为网商银行的天天领福利运营设计和滴滴金融的15元快车券的运营活动做的很棒，做任务领福利、使用时间。还是滴滴金融的15元快车券的营销活动，低价优品，为滴水贷的引流等方面设计的都很合理，有利于用户去使用产品，参与运营活动，提升产品的
复购率和留存率。
3. 运营设计弹窗带给用户的价值和产品的价值，思考如下：
提升新用户的粘性价值和活跃度，比较常见的做法就是给予用户明确的优惠价格，提升用户的粘性和活跃度，或
通过天天领红包的折扣券或会员狂欢周的运营设计活动，引导用户在平台上进行的第一笔消费，加深用户对产品的好印象。比较典型的就是天天领红包或会员狂欢周的夜宵红包的运营弹窗的设计。
4. 城市生活享乐季 , 吃喝玩乐买买买的H5运营活动的产品设计思考，如下图所示 ：
招商银行，城市生活享乐季，吃喝玩乐买买买的活动，三重福利送给用户，通过优惠券、瓜分红包、两人同行，一人免单等活动，引导用户在产品中消费，提升用户的参与感，营销设计的场景感，主题明确，主视觉的美食和
商城券、红包、大礼盒等设计元素，运营氛围渲染的很好，底部招商银行的品牌设计记忆点，提升产品的粘性度和用户的留存率和转化率。
5. 支付宝-蚂蚁森林的社交化、游戏化的创新价值思考，如下图所示 ：
支付宝的蚂蚁森林，通过社交化、游戏化的创新，提升了用户的粘性度和留存率。
蚂蚁森林的用户每天步行、地铁支付、线上生活缴费等就能积累能量，当能量达到一定的数值时，我们就可以
种植一棵树，同时用户可以去偷好友的能量数值。蚂蚁森林的游戏，会促进用户打开支付宝的次数越来越多，提高了支付宝的打开率。同时用户可以获得更多的能量，也会经常使用支付宝，这样就可以大大的提升了支付宝用户的
活跃度和留存率。
小结：H5 运营落地页的增长设计三要素：1. 做好产品设计的优质内容。2. 设计的价值表现。3. 产品设计的
体验感。运用好增长设计的三要素，我们可以更好的去服务好用户的体验设计感。
1 . 优化打卡文案使学习效果更明显，提高1%的DAU。
2 . 推迟强制注册页面，提高20%的DAU。
3 . 优化推送文案，使用户平均留存时间，增加了三周。
4 . 上线徽章功能提高了2%的DAU，双周留存提高了2%，App内购买收入增加了5%。
5 . 引入打卡对赌功能，14天提高了5%，APP内购买增加了600%。
附加：用户增长思维的地图示例：
1. 确定增长指标，增长指标拆解，AARRR增长模型分析。
一 数据指标的定义是什么？
它是对当前业务有参考价值的统计数据，是通过对于业务需求的进一步抽象，并进行数据埋点后，加工出来的一套计算规则，并通过有效的方法论和数据可视化呈现，最终能够解释业务变化和用户行为。只有对当前业务有参考
价值的指标才可称作指标，同时要具备：可统计、可分析、可监测的特点。
产品中常见的数据及其表意：
分析一款产品，重点关注三项内容：用户、需求、数据。
我们可以从业务、产品、感知三个方向去强化产品：1. 业务方向：聚焦核心痛点业务。2. 产品方向：确定产品的
主线功能。3. 感知方向：强化产品的痛点感知。如下图所示。
以上三个方向都是指向用户的痛点，目的都是为了解决痛点问题，抢占用户心智，形成强大的竞争壁垒和
增长势能，形成用户增长的优化点。
数据对体验设计师来说很重要，功能上线后，关注数据的变化来了解用户的心理变化，这个对比看用户反馈要客观的多。数据量化结合用户反馈，做好用户增长的体验设计优化。
1. 点击率
是指网站页面上某一内容被点击的次数与被显示次数之比，即clicks/views，它是一个百分比。反映了网页上某一内容的受关注程度，经常用来衡量广告的吸引程度。
意向率 ：意向UV占曝光UV的比例，用户衡量运营活动/功能的导流能力。
2. 人均使用时长
在一段时间内，总活跃时长/总活跃用户数。娱乐游戏、社交等产品数值往往比较大，工具类产品数值比较低。
人均使用时长不一定越大越好，比如：内容类产品的人均使用时长较长，说明内容质量高，但是工具类产品如果
人均使用时长过长，反而代表产品使用效率低，用户学习成本较高，所以数据需要多角度灵活的去分析产品。
3. 留存率
互联网行业，用户在某段时间内开始使用产品，一定时间内，继续使用的用户，就是留存用户。（留存率=留存用户/新增用户*100%）。通常重点关注次日、3日、7日、30日即可，并观察留存率的衰减程度。留存率是判断产品价值的重要指标之一。留存率高的产品，更容易获得资本市场的看好。
留存率的计算：
7日留存率：第一天新增的用户中，在注册的第7天还有登陆的用户数/第一天新增的总用户数；这个时间段内，用户通常会经历一个完整的产品体验周期，如果这个阶段用户能够留下来继续使用，很有可能成为产品的忠实用户；
次日留存率：当天新增的用户中，在注册的第2天还登陆的用户数/第一天新增总用户数。
月留存率：即某一统计时段新增用户在第30天再次成功启动该应用的比例。通常移动端产品的迭代周期为2~4周为一个版本，所以月留存率能够反映出一个版本的用户留存情况，版本的更新，会影响部分产品的体验，所以通过
对比月留存率能判断出每个版本的更新对用户的影响，从而定位到设计问题进行优化点设计。
4. 活跃用户数
产品活跃度一般分为日活(DAU)、月活(MAU)、周活(WAU)，产品活跃用户是需要达到某一个指标，比如内容类
产品，阅读了一篇文章或电商类产品用户完成3次页面跳转，都可以算作是一个活跃指标。
提高新用户的活跃度，比较常见的做法就是给予用户最初的引导以及简化功能路径，降低新用户的使用难度，或者说通过一些优惠或者卡券引导用户在平台进行第一笔消费，加深用户对产品的使用印象。
5. 转化率
是完成转化目标的用户占总体用户的比例，注册、下单、登录、复购，都可以用转化率来进行量化，根据产品不同阶段来定义不同的转化率指标，转化率是互联网产品的增长的重要因素。
转化率=产生购买行为的客户人数/所有到达店铺的访客人数*100%
小结：各属性的产品更看中那些数据 ？
业务型产品：一般和 意向UV、CTR 点击率、跳出率、意向UV访购率 有关。
内容型产品：一般和 用户的停留时长、功能 CVR转化率 、跳出率 有关。
社交型产品：一般和 次日留存率、用户互动和使用时长、CTR 点击率 有关。
工具型产品：一般和 用户的活跃度高、次月留存率、用户使用时长、核心转化率 有关。
电商型产品：一般和 GMV成交总额、下单量、DAU 日活跃用户数、核心转化率 有关。
游戏类产品：一般和 玩家的付费率与ARPU值、用户使用时长、核心转化率 有关。
产品生命周期，可分为初创期、成长期、成熟期、衰退期，每个阶段的工作权重和数据关注点都会有所区别。
我们分析一下产品的增长思路：科学提升数据的方式，控制变量。
1、初创期
初创期的重点在于验证产品的核心价值，通过某种产品或服务可以为特定的人群解决某个问题。
在产品初期，快速验证痛点和需求的方法被称为MVP（Miumum Viable Product）,这里的MVP不是指最有价值的球员，而是最小可行性产品的缩写。
MVP是埃里克.莱斯（ Eric Ries ）在他的《精益创业》一书中关于精益创业的核心理念和思想。MVP是指用最快、最简明的方法开发初一个可用的产品原型，但MVP不仅仅是一个产品，还是一个过程，是由开发、测量、迭代三个环节形成的循环，即最小产品开发、产品验证、产品调整不断循环，同时我们也要注重产品的可行性，重视用户的质量很关键。
2、成长期
该阶段的产品已经能够解决用户的基本诉求了，所以将侧重点关注在用户的生命周期的管理，提升拉新和留存率。
3、成熟期
成熟期的产品，不再做整体的页面优化，而是一次只改一个内容模块的设计优化设计，或者只改一个元素的优化或颜色修改，或者只修改图标样式，团队内讨论和设计专家走查，思考那个颜色受用户欢迎；图标的设计风格符合用户的审美心理等。
第二轮优化，经过AB测试，页面的转化率就可以对比出来，最终选择转化率高的设计方案就好。
把AB测试作为一个测试设计方案数据提升的方法之一。
在产品的成熟期，设计师一般尽量做细节上的优化。看一次的结果，对数据影响不会太大，但是累计起来就非常惊人的。这就意味着必须经过长期的AB测试，才能测试产品迭代优化的数据洞察，多次优化后我们可以得到累积的效果，做到设计的量化。
下面几个案例来自《增长黑客实战》
Google 从2004～2007年历时3年逐步构建并建立了一套强大的内部AB测试系统，每个月会执行几百甚至上千次试验，小到将公司移动几个像素，广告上背景颜色序列稍作改变，大到对某个新产品反馈作出评断并决定去留。仅2010年，Google就进行了8000多次AB测试和将近3000次灰度测试。
亚马逊对AB测试的偏执，更是到了近乎苛刻的地步，甚至被赋予“AB测试公司”。不仅公司自行研发了AB测试系统，允许员工将网页拆分成不同版本进行对比和测量，就连办公室桌子的摆放角度，都要通过AB测试来决定。
所以，高价值的公司不仅在科技创新、用户价值、商业变现等方面表现突出，更重要的是他们利用数据思维去衡量每一个微小的改变，积累多了，最终大幅度提升产品设计价值。这对于追求科学严谨的成熟期来说至关重要。
4、衰退期
关注用户流失后的产品，分析竞品的商业模式和功能，同时监测流失的速度，拓展产品边界，寻找新的切入点。
小结：
1. 通过标准的设计流程和专家设计走查等思路，帮助我们学会用科学的方式，量化设计细节并提升设计效果。
2. 通过发现用户新的痛点，突破产品的生命周期，找到产品增长的第二曲线，实现产品的持续增长。
三 AARRR增长模型和用户增长案例分析
在《增长黑客》中，提出了AARRR的用户增长模型，将增长分为5个阶段：获取、互动、留存、变现、传播。通过递进式的引导，实现持续的增长闭环。设计师可以基于这个模型，探索设计在增长各阶段的作用。
用户增长的案例分析 ：
现在市场上有很多优秀的用户增长的产品设计案例，与用户增长模型有关 ：
a. 微信读书-无限卡为案例思考，如下图所示。
1. 每天限量派送7天无限卡
微信读书无限卡活动。同时面向老用户和新用户，老用户默认领取3天无限卡，分享到朋友圈后才能获得剩余的4天无限卡。新用户通过老用户的分享，注册后即可获得7天的无限卡。
这就充分利用了影响力 “互惠”、“喜好”、“稀缺性价值” 三要素。
“互惠” 微信读书，会给予用户无门槛，赠送3天无限卡，然后再要求老用户分享即可再获得4天，利用先让利再要求用户进行操作的态度，老用户内心非常愿意分享微信读书的无限卡。
“喜好” 是因为老用户分享出去，新用户因为老朋友的分享，生活情感上的一致性思维，更容易接受微信读书这个阅读性产品，同时可以领取微信读书的无限卡。
“稀缺性价值” 微信阅读很少做全场无限阅读的权益，我们可以购买微信读书的 Vip服务，看老用户，这个无限卡就是稀缺性价值，更愿意为稀缺性的权益而分享给好友。
2. 组队抽取无限卡
无限卡活动投放在微信读书的-用户重点关注的模块，每周成功组成5人队伍，就可以获抽奖机会，奖品是1、3、5、7、30、365天、终身无限卡会员，队伍中有了新用户，我们才能抽取终身大奖-无限卡活动。
组队抽奖活动依托终身无限卡这个“稀缺”资源，要求老用户每次组队都要拉新用户，老用户为了平台资源，一般会每周主动寻找 1 名新用户来组队，争取获得抽终身无限卡的读书权限。
对于新用户，“互惠”和“社会认同”会起到参与的价值，新用户参与这个活动，也能免费获得1天的无限卡会员；我们看到好朋友参与读书活动，我们也会想参与组队读书的无限卡活动。
b. 拼多多的增长案例分析
增长原因
首先，说明这个产品的核心模块，再分析拼多多是如何一步步引导用户注册、留存和传播的。
用户的裂变或分享
例如：天天半价购、好友互动等运营活动，为了做好营销设计而做的一些增长功能。
拼多多解决了用户两个问题
1. 商品价格低。2. 购买、支付方便快捷。
天天半价购有 2 种运营形式，H5运营图展示和运营弹窗设计
第 1 种，天天半价购的流程，选择商品-半价拼单-团成开奖-每团必中。拼团后，马上就可以半价购物使用。新人首次发起半价团，中奖率高达99%哦～这个设计即可引导新用户马上下单消费，也实现新用户分享拉新的目标。
第 2 种，天天半价购这个活动，每团手气最佳获得商品，其余人立即退款，并送优惠券。而好友拼单=邀请新用户下单。
小结：用户为了实现某个目标，邀请好友帮助完成某项任务，从而影响更多的潜在用户，达到传播和裂变的目标。
文章来源：tob.design 作者：峻溪POINTV
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
降本增效一直是为B端赋能的首要宗旨，那么我们该如何从设设层面为用户提高表单录入的效率呢？
什么是表单页
表单都是界面中最 常见、最 重要 的组件之一，属于 数据录入 板块。
表单是2B产品“管理”的第一步。软件/系统/平台本身是没有信息的，像是一个空的架子，表单是用户向系统输入信息的一种非常重要的手段，只有用户向系统添加了丰富的信息，系统才能实现其价值。
表单是信息添加、录入的通用形式；主要作用是负责数据采集，是最常用的信息录入工具，随着互联网兴起，特别是最近几年B端的兴起，表单的重要性显得越来越突出。
表单的设计原则
- 充分考虑用户填写表单的目的，区分必填项和非必填项，删减不必要的表单信息（例如：填写了身份证就无需再填写出生日期，因身份证信息内包含出生日期，系统自动识别即可），确定完表单内容。必要的时候对信息分组，表单项并非从上到下无序罗列，而是根据表单内容，按照一定的逻辑或者用户熟悉的模式顺序，对表单项进行排序和分组，才能让用户浏览和填写流畅且。
准确- 信息表达要准确无误，避免歧义，提示说明要合适，不要给正确的废话，例如：填写备注的提示用“请输入备注”没有意义，换成“不超过100字”更有助用户对表单的理解。
一致- 组件的规范和操作的规范同样重要。同一套系统同一个组件使用一个样式即可，这样才能保证页面的视觉统一。同一个功能按钮，在A页面点击给的弹窗，在B页面也同样要为弹窗。
易懂- 给予高质量的信息提示及反馈，如果需要输入某种特殊格式，请给出具体要求（例如：密码长度8-20位)；错误提示的时候要给用户错误的具体内容（例如：登录时不能单纯去提示“您输入的信息有误”，需准确提示是账号格式错误，还是密码长度错误）。
我们先看看表单主构成，表单主要由这5部分构成：
分组标题：表单项较多的情况下建议分组，分组标题有引导用户完成表单填写的作用。
表单标签：也就是填写或操作内容的标题。标签规范的方式时标题后带冒号，还是不带冒号呢？这个其实都可以，没有硬性的标准，自定义一个规范去执行就可以了。
表单域：表单是用来数据采集的容器，也可以视为一个对象。包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框、下拉选择框和文件上传等，用于采集用户的输入或选择的数据。
提示信息：分为说明性提示信息和操作反馈提示。提示信息可以放在表单域里边（例如：备注的提示“不超过100字”），也可以在表单域或后边，还可以收进“问号icon”里，鼠标hover后给气泡提示展示信息即可。
操作按钮：操作按钮为页面的全局操作，为满足用户随时对表单进行操作的需求，操作按钮会悬浮在页面底部。一般情况按钮最多只有一个主按钮，可以有多个次按钮。
(1) 分类
左标签：优势-节约纵向空间，信息表达明确，多用于web端；劣势-横向空间利用率不高，不适用移动端等狭窄空间。
顶标签：优势-视觉舒适，节约横向空间；劣势-纵向空间利用率不高。
行内标签：优势-最节省空间，多用于注册登录等字段少的表单；劣势-输入时和输入后标签消失，令用户迷茫（可优化为浮动标签，在光标键入时，标签展示输入框上），字段多的表单不建议使用行内标签及浮动标签。
(2) 对齐方式
左对齐：从左至右的阅读顺序，符合人们的阅读习惯，一般用于详情的陈列。
右对齐：也被称为“冒号对齐”，右对齐使得标签和输入之间的距离固定，有明确的视觉关联，操作效率高，非常适合表单录入。
表单域大致分为以下5个大类：输入、内容选择、日期时间选择、数值范围和上传。
选择适合的控件，不光能在视觉上做到统一规范，还能提高用户操作效率。
(1) 输入
文本框：选择适合的大小，它的大小应该向用户暗示所需输入内容的长度，以此减轻判断负担（注意：文章类超长文本不适用于长文本输入框，建议使用富文本编辑器）。
特定前/后缀：涉及到金额输入时，当用户输入的金额超过千时，出现千分位最数据进行分组，方便用户快速识别金额。
带icon或按钮：“日期选择”和“时间选择”一般都附带icon，便于用户快速识别。带按钮的表单项在“密码输入”用的最多，可做隐藏密码和显示密码的切换用，因为盲输及可能会出错。
(2) 选择
内容选择：含单选、多选、选择器（常用的有下拉单选/多选）、级联选择（多层级联动选择）、树选择、穿梭框、开关。
1、单选框、复选框：一般用于选项不多且相对固定的情况，选项控制在6个以内为宜，用户可以一眼看到所有内容。单选框只能是其中一个选项，多选框则可以选择其中一个或多个选项。
2、开关：使用开关控件的条件是选项的性质互斥（例如：是和否、打开和关闭、开启和禁用等）；
3、选择器：当选择项超6个，就需要考虑用到选择器了。下拉列表是网页中一种最省页面空间的选择方式，单击下拉按钮后能看到最多展示的8个选项，少于8个则显示实际个数自适应，多余8个则出现滚动条。下拉选择器根据屏幕位置决定向下展示或者向上展示。
选择器适用广泛，同类选项（例如：选择客户、商品名称、货物编号等）、增量选项（例如：年份选择）。
4、级联选择、树选择：二者都属层级选择，区别在于级联选好选项后框内显示的是含层级的内容选项，且只能选择需最子集选项（例如：江苏省/苏州市/工业园区，不能选择江苏省，因为前面的选项只为导航至最子集），而树选择框内展示的是单个选项的内容，不展示层级，但可以选择任何层级（例如下图：浙江省）
日期及时间选择：分为日期选择、时间选择、日期时间选择，可以是单个时间，也可以是时间区间；他们很特殊，只为日期和时间选项而生。
1、日期、时间选择：当用户需要一个时间/日期，可以点击标准输入框，弹出选择面板进行选择，或者输入时间后自动定位到该选项，无需手动选择。
2、日期时间选择：相当于将日期和时间这两个选择项集为一身，在同一个选择器里选择（年月日时分秒）；下例相当于两个下拉框切换使用，步骤1先弹出日期选择框选择年月日，选择好日期后点击“确定按钮”旁边的“选择时间”，则切换为步骤2的时间选择框。
数值范围：
1、滑动输入器：滑动型输入器，展示当前值和可选范围，通过拖动滑块在一个固定区间内进行选择。
2、步进器：也称为计数器，仅允许输入自定义范围内标准的数字值，当自定义标准数字值为整数时，输入小数点后回车，带小数点的数字只保留整数呈现。上下按钮也不是每点击一次数值±1，可以设置跳每点击一次±N，N可以为任何数字，也可以为小数。
(3) 上传
文件、图片上传：第一种情况是上传图片和文件合在一个上传控件里；第二种情况是区分了图片上传和除了图片之外的其他文件的上传，这种情况下的图片成功上传后是有缩略图的；根据需求选择其中一种即可。要注意的是上传有四种状态：上传前、上传中、上传后的成功状态、上传后的失败状态，UI都需要设计出来，一个都不能少。
(1) 占位符
占位符就是先占据一个固定的位置，等着用户往里面添加内容的符号或文字。在键入信息前，出现在输入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正确的废话”，因为给不到用户任何提示帮助，如果表单项没有制定规则，可用表单项编辑方式占位“请输入”/“请选择”，以新增商品为案例：
(2) 帮助信息
帮助信息和占位符类似，也是在输入编辑前给用户的提示信息。和占位符不同点在于“帮助信息”不占据输入编辑的位置，不会因为键入信息后消失，属于表单中的常驻信息。三种方式可以同时运用在一套系统内，视当前表单情况选定。
(3) 校验信息
校验信息是在输入后或者提交后，系统对编辑的信息进行的校验，分为前端校验和后端校验两种。
前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。
后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。
(1) 分布的位置
表单顶部、表单底部：用于放置全局按钮，两个位置的功能按钮是一样的，只是出现的条件不同。默认显示表单顶部按钮，当顶部按钮因为页面上滑被遮盖了，底部按钮才悬浮在窗口底部。目的在于用户无需上下滑动到固定位置才能对表单进行操作，省时增效。
跟随表单项：这种情况很少用到，一般是需要校验的情况下使用，或者可手动增减的表单项。
分组底部：一般是对于这个分组进行的操作按钮。
温馨提示：当操作按钮超三个时，可以将相对低频的操作按钮折叠收起，点击或鼠标hover“更多操作”时下拉展开显示所有按钮。
(2) 阅读顺序、按钮层级、对齐方式
其实这三者的规则都是一样的，当按钮右对齐页面的时候，阅读顺序自然是从右向左，而按钮层级也是从右向左递减，比如顶部的提交、保存、取消三个按钮；商品列表的“添加商品”和“删除全部商品”，左对齐页面，阅读顺序和层级自然也是从左至右。
表单页面主要的交互方式有四种：原位编辑、气泡卡片、弹窗/抽屉、页面跳转。表单页面在交互方式的选择取决于表单容量及表单亲密度。
原位编辑是轻量型信息采集表单，适用于表单编辑项较少（尽量低于5个编辑项），且属于主功能分支的场景。其优点在于操作便捷，随时启用与退出，能够保证用户对主要功能的操作流畅度。其存在的意义在于完善或者增强主功能的操作，而不是打断。
使用场景：常用于列表及卡片，详情内也可以使用原位编辑（例如：详情内只有A和B可以编辑，且需分别编辑，此时建议用原位编辑进行操作），需要注意的是，尽量不要用在长文本编辑。
激活方式：信息展示区域通过双击、单击、hover或点击“编辑”按钮即变为激活编辑状态。最常见的比如：微信/企业微信修改群名就是单击激活，列表、表格的点击“编辑”激活，相比之下hover去激活相对用的少。
与页面的亲密度：亲密度高，编辑内容即为展示内容，当编辑内容不止表格内展示的字段数量，且存在联动关系时，需慎重（例如：“部门”和“班次”属于上下级联动关系，列表内只显示“部门”，而“班次”在详情页面显示，则不适用原位编辑）。
使用场景：常用于条件筛选的设置，点击或hover后显示气泡卡片内容（建议不超过5个设置项）。触发生效机制可以是设置项点击即生效，也可以多个设置项选择后，触发操作按钮生效（操作按钮建议不超过2个），触发机制可以根据项目实际需求而定。
与页面的亲密度：亲密度高，所见即所得，编辑前/后都不遮挡列表，用户刚刚操做了什么，即在当前展示操作后的结果，让用户感受到一切都在掌握之中，不会出现断裂感，交互很友好；
(1) 弹窗
虽说设计上对弹窗的使用都是持谨慎态度的，但希望大家也不要谈弹窗就色变。弹窗的好处在于让用户更聚焦，且不用离开当前页面就能更快速更容易完成任务。
其实该使用弹窗的时候也是要用的，特别是在B端，如果弹窗能解决的问题，不建议频繁的跳页面去操作。如下例：下单录入涉及添加产品，而产品信息字段又很多，不是一个模糊搜索就能解决的，此时建议使用弹窗而不是跳页面去操作。来回跳页面频繁刷新，不如用弹窗选择操作更为简单，在当前页的弹窗选择产品，再将产品信息带入当前录入页面，此流程更符合用户操作时的心理预期。
使用场景：所有页面均可，3个以上的录入项即可使用弹窗；需要注意保持交互一致性（例如：在列表“新增会员”点击触发是弹窗，在其他页面也同样要是弹窗）；当然也有特殊情况，例如：快捷新增时只需录入一个名称，可以先使用快捷操作添加极少的信息，后续在编辑页面进行补充；
与页面的亲密度：可以有强关联，也可以没有关联。有强关联指的是，比如说：点击“新增会员”按钮弹出来的此弹窗，在其他也要用这个“新增会员”名称，避免用户迷茫（当然了，很多新增和编辑其实用的同一个弹窗，这个特殊情况除外）。没有关联是指，可以在列表页面使用“新增会员”弹窗，也可以在工作台或者其他有需求的页面去使用“新增会员”弹窗。
(2) 抽屉
抽屉弹窗也被称为侧弹窗，弹窗抽屉和弹窗很类似，使用场景和亲密度都是一样的。相比弹窗，抽屉的侧边弹出的交互方式，其操作成本和用户使用心理负担会小很多。
注意事项：如果系统大部分用的弹窗，就优先选用弹窗，如果表单内增加了更多字段，可以换成抽屉弹窗；
使用场景：超出了弹窗/抽屉的承载量，就要用到页面跳转了，一般一级模块的设置项也会用到页面跳转，因为会牵一发动全身。还有初始化入驻也需要跳转页面进行操作，不光因为需要提交大量信息，还因为各种认证审核需要一项一项进行，此时用抽屉和弹窗承载内容显然不合适，因为弹窗和抽屉，代表着快速完成。
与页面的亲密度：跳转了页面，不管是新开页面还是刷新原页面，与原页面的关联性已经没那么强了，只能说他们属于同一条路径下不同页面。
根据内容的多少及亲密程度来决定，我们设计时应选用哪种交互方式，或者可以直接根据内容承载量做判断也是可以的，从少到多依次此为：气泡卡片-原位编辑-弹窗-抽屉-页面跳转。
排版布局的方式有四种：平铺、分组、标签页、分步骤。根据内容项的多少及实际需求相应合理的布局。
输入信息的分类，是有效的减少用户操作疲劳度的方法。分类的维度有多种，根据表单输入内容的相关性、内容的所属类别，可以将同类型的数据统一输入，减少用户输入信息的跨度，提高输入效率。
使用场景：平铺顾名思义就是指表单项不做分组，全部平铺展开，很多注册和登录都是这种布局。适用于表单项少，或者多但表单项之间亲密性很强，就无需额外分组，直接将表单项平铺开展示，简单明了。
对于内容过多的表单输入页面，分组、分模块的排版方式让用户感觉更友好，不是密密麻麻一大片，让人喘不过气来，而是有条理的布局，张弛有度，疏密有致。用户可以在填写好一段内容后进行心理上停顿休息，减少视觉疲劳和心理压力。
(1) 标题分组
使用场景：超过了7个设置项，且较为复杂的表单，标题分组之间的关联性较弱，就可以去分类归纳表单信息，位的是降低用户的认知负担，提高用户体验。注意：分组内组内设置项要有强关联性，否则不能归为一组，不能因为字段多，为了分组去分组。
(2) 卡片分组
使用场景：7-15个设置项，用标题分组不足以给信息做层级区分，为了让用户在操作时更聚焦，也需要给用户更明确的操作引导，即可使用卡片分组。
卡片分组之间关联性更弱，分类更明确，多个设置项，多个分类。需要注意，一个表单项不要分过多的卡片分组，不能每两项做一个分组，这反而会造成用户视觉压力和操作负担。
使用场景：当标题分组和卡片分组都不足以对表单进行分组时，就可以考虑用tab切换了。每个设置都包含多个录入，且使用了标签。
注意事项：tab标签的填写没有先后顺序的规则，标签页彼此之间没有特定的关联性，可独立去设置。也就是说先填写tab1还是先填写tab2，对表单的其他tab项没有任何影响，不存在联动关系。
标签页对应的详情展示：一项一项上下铺出来，但如果表单详情信息过长，可以考虑将锚点定位，点击锚点定位的标题即可自动定位到该区域，方便用户快速定位浏览位置。
使用场景：对输入表单进行分步骤的处理，可以降低用户的操作频率，给与用户一定的休息空间，用户会有阶段性的成就感，同时分步骤的输入还有利于减少信息的错误率。如果输入表单的内容较多，同时输入内容有逻辑上的先后顺序，此时可以考虑将输入表单进行分步骤处理。
利用步骤条，将大型、复杂任务拆解为多个部分，并按照相关性分组，可以提高用户处理的专注度，降低页面的复杂性，减轻用户操作负担，降低用户出错率，提高用户体验。
根据内容关联性的强弱程度来决定，我们设计时应选用哪种布局方式，或者可以直接根据复杂程度做选择也是可以的，从弱到强依次此为：平铺-标题分组-卡片分组-标签页/分步骤转。
提高易用性的方式有以下四种分别为：视觉清晰、信息降噪、智能、准确易懂，每个表单，每个页面都要应用这四项准则，不光是在表单页面，所有页面都适用。
布局方式-单列布局：常见的表单布局为单列信息展示布局，比如：苹果、飞书、钉钉、有赞、微盟等首选使用单列布局进行页面排版。设计中尽量采用单列布局，是为保证用户的视觉动线流畅，不容易遗漏信息；
在输入项较多时，每次填写完一项都要鼠标选中下一个输入框，很容易让用户失去耐心，而单列布局恰好能解决这个问题并提高用户体验，输入完一项按enter键可快速切换至下一项，提高用户操作效率。
当然了按Tab键也是一样的效果，只是，一般情况下，大众都更习惯也更熟悉回车键的位置，需要注意的是，长文本输入框的属性里回车键是文本换行的意思，需要区别设置两者的操作机制。
布局方式-横向布局：横向布局也是单列布局，是它的发散版本。如果出于业务方复杂需求的考虑，必须在横向增加内容，那增加的表单项一定要和前表单项有关联，才可作为分组横向排列，还需注意不能出现Y轴平行竖向分组（如下图），避免用户迷茫或遗漏信。
(1) 合理设置必填项
正常情况下，我们标示“*”标就是为了提示用户此项必须要填写方能提交单据。
但当一个编辑页面的必填项非常多时，就可以无需标注必填，只标明哪些是非必填项就行。
当编辑页全部都是必填项时，可在大标题处用标示必填即可。
(2) 折叠不重要非必填信息
在能完整获取需要信息的前提下，输入项越少越好，当表单页很长，且有些信息非必填，或者说填写后的意义不大。这样的情况下可以考虑将非必要信息折叠收起，点击“展示更多”下拉展开全部表单项，让用户可以选择性录入不重要的信息。
(1) 智能填写
根据上下文信息可自动获取的，无需用户再次填写。如下例：通过客户名称数据库可自动匹配客户手机号，或者通过手机号匹配客户名称。填写邮寄信息的时候，只需选择省市区，邮政编码便自动填充，减少了用户查找邮政编码的繁琐（甚至可以提议“邮政编码”字段直接去掉）。而生日和性别都可以在身份证号内提取。
(2) 智能排序
默认高频：当选择器内容超过5个选则项时，可以对内容选项进行一定排序规则（首字母排序、数字排序或设置默认高频选项等），方面用户提前预知选项的大致位置，检索找到相应的选项。
(3) 智能联想
智能联想是给予用户键入字段的联想功能，用户少量输入后进行选择。录入方式由原来的输入变成半输入后选择，减少用户的输入成本，提高用户操作效率。
自动搜索：当下拉选项超过16个时，建议加入输入选择功能，用户可使用下拉选择，也可以输入关键字后智能匹配显示对应的选项。或者可以再加上信息排序，根据点击频次进行排序，高频选项前置。
后缀联想：一般用于邮箱信息的录入，当输入内容后，自动将默认高频的邮箱后缀作为补充数据填充在后方，减少用户的输入。
操作直观：去除冗余且无用的部件：切换“开关”操作后会立即生效展示结果，无需与操作按钮搭配使用，避免造成用户的误解，导致体验不友好。
准确的错误提示：反馈提示是页面系统对用户的输入的内容进行的校验，并对校验结果予以展示的提示形式。可分为前端校验和后端校验两种。
错误提示的时候要给用户错误的具体内容，而非简单粗暴的错误提示。例如：登录时不能单纯去提示“您输入的信息有误”，需准确提示是账号信息错误，还是密码校验错误。
前端校验：也被称为“即时校验”，一般是校验显现的数据内容，比如字符长度、格式（是否包含非法字符）、是否为空等。该方式的校验条件多在本地，无需实时向服务器发命令而得到反馈。
后端校验：包含“局部校验”和“全局校验”，局部校验：在注册账号时，输入完整用户名以后，提示用户名是否可用，则为局部校验反馈。全局校验反馈：多指在输入完成提交或者阶段性完成（分步骤跳转下一步）时，系统给出的校验反馈。在用户操作反馈动作按钮后，界面在相应位置（一般为单个输入框的下方或右侧）一次性给出对应的错误提示。
文章来源：UI中国 作者：AI-玲玲
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2020 年，新冠疫情席卷全球，后疫情时代的需求也促使设计师们不断提出更有意义的医疗解决方案。作者梳理了医疗保健类 APP 的类型，从产品的研究、功能特性、导航、颜色等角度提出了针对医疗保健 APP 的一系列设计建议，简单直观的界面、便捷的功能，以及积极的情感，才能使用户接受并喜欢原本 “令人生畏” 的医疗产品。
△ Justas Galaburda 绘制的插画
在移动应用市场中，的应用类别是 “游戏”，而 “健康与健身” 类勉强跻身前十名。2020 年是十分艰难的一年，但也创造了很多机会，例如，移动应用市场中医疗行业的产品大热，受到多方关注，这类产品直接影响人们的健康行为，可以使人们的生活更加轻松愉快。
为此，大批创业人士开始关注医疗这一领域。首先，你需要制作一个功能强大的 APP，因为如果一款产品不能交付使用的话，它就一文不值。但是，这种功能必须通过设计能力来呈现。一个好的医疗保健 APP 设计，应突出其最重要的细节，引导用户进行操作，并提出下一步建议，从而产生必要的行动。APP 本身可以成为有效的潜在客户开发工具和公司的主要产品。对于一个健康或医学相关的产品来说，用户界面或用户体验设计尤为重要。
△ George Frigo 设计的呼吸检测 APP
本文将探讨一些医疗保建 APP 设计的成功案例和经验，这对设计师和企业来说都很有帮助。
值得注意的是，“医疗保健类 APP” 是一个综合性概念，涵盖了许多与健康和医学相关的数字产品。
医疗保健 APP 类型很多，包括但不限于：
这似乎是一个相当宽泛的主题（例如，卡路里计数 APP 和医学教育解决方案相差甚远，却都属于这个领域）。但是，有一些通用的设计方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移动医疗或移动健康）：通过移动设备提供与医疗相关的服务，例如，通过 PDA、移动电话和卫星通信来提供医疗信息和医疗服务等。）
△Victor Nikitin 的医疗类 APP
一款 APP，即使它不是企业的主要产品，也可能具有巨大的价值。例如，用于医疗工作的配套 APP，能够为客户提供信息和服务，从而减轻员工的负担。如果一款医疗保健类 APP 是企业的主要产品（例如，健身或冥想 APP），因为没有硬核的业务场景支持，会有很大的风险。有时，这类 APP 设计中的不足会导致用户完全放弃使用它。
为了避免这种情况，我们来看看设计医疗保健 APP 的 12 个要点，以及它们如何帮助设计师们设计出更具针对性、更直观、更的 APP。
△ Anatoly 设计的 Healthcare APP
1. 研究 – 成功的第一步
在制作 APP 界面原型之前，你需要了解产品的目标受众是谁，他们的地理分布、社会人口特征以及心理特征是什么。因为没有一种产品可以满足所有人的需求。用户的兴趣和能力决定了他们如何与 APP 进行交互。因此，回答以下问题将对你有所帮助：
一般来说，患者和医生都会使用医疗保健类 APP（假设我们将生活方式类 APP 的用户也视为患者）。这两类用户在功能和 UI 设计方面有不同的需求。
医务人员通常需要快速找到一些数据项，例如 EHR / EMR、药物规格、诊断和治疗建议、参考材料等。但是，患者希望能与尽可能少的信息进行交互，且这些信息应该简单易懂。因为这类用户中有很多是老年人，或是存在某些障碍的人。
只有在进行适当的用户研究，并得出相应结论后，设计师才可以着手进行医疗保健类 APP 的设计。
△ Chahua 设计的健康管理 APP
2. 每一个案例都简洁明了
对于一般人来说，医学是一门复杂的学科。所以在设计医疗保健类 APP 时，请尽可能地让它们保持简单，这有助于让用户平静下来，并保持专注。
“复杂性是你的敌人。很多傻瓜都可以让事情变复杂，而让事情变简单是很困难的。” — 理查德·布兰森
为了让医疗类 APP 看起来很重要并给人留下深刻印象，而将其界面做得过于详细，是没有意义的。即使该产品是为医务人员设计的，也最好 让界面和逻辑易于理解。
△ lgor Savelev 设计的医疗类 APP
在设计医疗保健类 APP 的用户界面时，请提供有意义的用户引导，并 使界面直观易懂。否则，用户可能会在触达该应用核心内容之前就对其体验感到沮丧。
如果该 APP 清晰明了，医生及患者双方都更容易接受。这样一来，用户易于学习上手。即使它是针对医疗的解决方案，人们也不会感到不习惯。
为帮助用户在比较舒适的节奏下了解产品功能，请使用渐进呈现的原则，逐步为用户提供指示。从新手指引开始，将应用程序中的每个操作分成可管理的小模块，每次仅提供一个指引。（渐进呈现（progressive disclosure）：每次只展示用户当前需要的信息，引导人们平缓地由简单状态进入复杂状态。例如将原本复杂的逻辑隐藏起来，通过更易于认知的界面形式帮助人们轻松完成最为基础的任务。）
另外，采用被动输入、自动输入、调整键盘和动态验证字段的方式，能够限制用户必须输入的信息量。
所有医疗信息必须由受过相关教育且具备专业知识的专家提供。否则，内容要么不完整，要么包含错误，对于医疗产品来说是不可接受的。
△ yurig 为医生设计的医疗类 APP
3. 功能和特性
医疗保健类 APP 的 功能及特性取决于其用途和目标受众。例如，医疗中心 APP 需为用户提供个人帐户，在该帐户中，用户可查看其就诊记录、就诊建议以及预约情况。如果没有安全加密的视频会议和通讯功能，远程医疗 APP 将毫无意义。毕竟医疗类 APP 依赖的是可靠且有用的通知。
主页承载着一个 APP 的主要功能。请试着回答这个问题：用户为什么使用你的 APP？或与之类似的 APP 呢？如果用户访问 APP 是为了记录或接收某些信息，或是联系医生，查看他们的进程等，那么这个功能应该位于 APP 的主页。
重要的是，正如前文所提到的，避免一次性出现太多功能，从而造成混乱。不可否认的是，这种情况经常发生在老版本的 APP 上。这些 APP 常常不断添加新功能，偏离焦点，以至于只有专家用户才能理解它。
（专家用户（super-users）：专家用户在生活中愿意给予企业反馈，主动做口碑，或是积极分享、点赞等，这些无法以价钱衡量，却能在品牌价值传递、产品创新、营销推广等经营各环节，为企业带来实质贡献。）
根据帕累托原理（二八法则），80％ 的用户倾向于使用不超过 20％ 的功能。因此，务必确认哪些功能对用户来说是最重要的。
（帕累托原理（ Pareto’s principle）：也称二八法则。在任何特定群体中，重要的因子通常只占少数，因此控制具有重要性的少数因子，即可控制全局。）
△ Manoj Dalvadi 设计的 Medicine APP
4. 便于探索与享受的导航
清晰的导航结构是一个有效的医疗保健类 APP 的必要条件，也是医疗保健类 APP 用户界面设计的基础。没有清晰的导航，APP 是不会被广泛使用的。完善的导航意味着率和易用性，这对用户来说是十分有价值的。医疗专业人士需要的是能够快速开展工作的应用，因为他们花费了太多时间在处理电子健康档案（EHR）上。一项由斯坦福医学院展开的调查发现，医生花费在每个病人身上的时间，有 62% 是用于处理电子健康档案。如果针对医务人员的 APP 不够简洁，那 APP 便失去了使用价值。同样的，对于患者来说，他们也不会喜欢混乱的导航，即使当前的任务不是很重要。
重要的信息应放在明显的位置，并在必要时提供详情。根据 3 次点击原则，系统应保证用户在 3 次点击之内，找到所需信息。
为了使 APP 导航结构清晰，可采用标准的 APP 导航组件，如汉堡菜单、标签栏或抽屉式导航等。
△ Alex Samofalov 设计的医疗类 APP
一般来说，APP 的颜色选择取决于目标受众以及该 APP 的主题。
医疗保健类 APP 设计通常采用中性色调，尤其是冷色调的蓝色和绿色，背景一般为 白色。设计师这样做是为了达到以下效果：利用柔和的色彩和医疗保健行业的联系，缓解用户焦虑并增加可信度。因此，在医疗保健类 APP 的用户界面中，亮红色或黄色是很少见的。
△ Adam Sokołowski 设计的医疗类 APP — Pharmagy
但是，考虑到医疗类软件的多功能性，颜色选择并没有特别的限制。主要思路是，这类 APP 的整体外观应营造积极的印象，不应引起焦虑、恐惧或其他不良情绪。
例如，深色的健身 APP 看起来优雅且有品味：
△ Saepul Rohman 的 UI 设计—健康及锻炼类 APP
而亮色为 APP 增添了许多活力：
△ Michal Parulski 设计的移动健身 APP
APP 的个性化定制是近年来最显著的设计趋势之一。特定的功能与特定的用户模式相适应，并且系统会暗示用户下一步可执行的操作，以免被用户忽略。
这些技术的目标是，帮助用户更快地利用 APP 解决问题。因此，有必要识别和分析用户模式，并跟进他们的变化。
正如每个人都有着不同的健康状况，用户希望他们所使用的 APP 也能提供同样独特的体验。除此之外，在非医疗保健行业，也有 33％ 的用户会因个性化程度不足而卸载应用程序。
在设计医疗保健类 APP 时，可以使用许多自定义选项，如颜色主题、个性化通知、交互元素，以及利用 AI 定制个性化推荐等。
△ Jawad 设计的在线咨询 APP
无障碍的 UI 设计对任何 APP 来说都很重要，对于医疗类 APP 尤为重要。
移动医疗解决方案针对的是不同年龄，具有不同视觉和听觉能力、身体和心理特征的用户。因此，医疗保健类 APP 主要功能的设计，应保证每个潜在用户都能访问。请考虑可能存在的限制，并努力克服它们的负面影响。例如，有晕动症的人不会喜欢过多的动效。
但这并不意味着一个医疗保健类 APP 的界面中只能有两种颜色，也并非所有文本字号都要非常大，但这确实意味着设计师将面临一些挑战。对于医疗保健类 APP 来说，其中的挑战也许相对多一些。无障碍设计能带来更多的机会，而不是负担。试着从浏览 W3C 网页中关于无障碍指南的内容开始，尝试使用色盲模拟器，如下图这种。
无需多言，试试移动端无障碍设计的常用方式：将主要元素的尺寸控制一个拇指大小的区域中、添加将视图改为水平模式的选项，以及放大文本的选项等。
△ keithar 的对比度分析仪和色盲模拟器
医学不仅复杂，而且通常令人生畏，即使涉及的医学内容不多。一个比较聪明的办法是使 APP 看起来与医学毫不相干。这将消除用户因刻板印象而产生的压力，并使体验更加愉悦。
除了使用柔和的颜色，还可以在用户使用 APP 的不同阶段 推送鼓舞人心的消息、有趣的图片、欢快的语音或其他元素。医疗保健类 APP 用户界面中的图像和图标，应始终带给用户积极、愉悦的情绪，并 营造一种无痛感和安全感。
△ Mahdieh Khalili 设计的冠状病毒 APP
当产品已具备现成的网站，企业方甚至设计师为了降低制作成本，可能会想从产品的网页版中 “借鉴” 一些解决方案直接应用在移动端设计中，这很可能导致用户拒绝使用 APP。
用户与移动设备间的交互不同于与电脑间的交互。移动设备的屏幕比显示器屏幕或笔记本屏幕小。此外，用户与移动设备交互的方式不同于在电脑上进行的操作。在移动设备上，我们做任何事情都依赖手指的移动，不愿意输入冗长的文本，但同时希望系统能更快地工作。
一般来说，尽管 APP 中的导航也很重要，但对于移动设备而言，更需关注的是交互设计。在大多数情况下，人们喜欢使用网站来获取信息，使用 APP 来完成任务。此外，APP 还集成了智能手机的功能，如加速度传感器和摄像头，这也是导致 APP 的用户界面设计与 Web 版有所不同的原因。
△ Grace Saraswati 设计的健康健身类 APP
视觉吸引力与功能性之间的平衡是非常重要的。医疗保健类 APP 必须便捷，且不能分散用户对内容的注意力。
图形元素，包括动画，应始终以满足使用目的为前提，来考虑是否需要，如数据输入，以及说明用户与系统间的微交互等。不能仅仅因为它看起来不错而添加。不要过度使用渐变和阴影，要将用户注意力集中在主要信息上。字体也只需选择一种，可以通过改变字号和其他特征（如斜体、粗体）来做区分。
使用简单的配色方案可以更清晰地传达品牌信息，并创造更好的导航效果。
△ Dibbendo Pranto 的健康及活动追踪交互设计
你可能会在某些点上考虑，是否要借鉴一些竞争对手的成功案例。好吧，如果这有用的话……一方面，抄袭其他产品是不明智的，因为 它们的设计可能并不完善。你采纳的可能是竞争对手的错误决策，以至于阻碍 APP 的未来发展。
另一方面，你应该先对其他应用进行分析，对竞品进行研究。应该参考用户以前使用其他 APP 的经历，并进行借鉴，从而降低用户的学习成本。添加太多创意会使 APP 显得很烦人，用户需要花大量时间去习惯并学习操作。为此，可以参考苹果制定的人机交互指南（Human Interface Guidelines ）和谷歌制定的材料设计指南（ Material Design）。
“用户大部分时间是花在别人家的网站上。” — 雅各布定律
（雅各布定律：用户在其他千千万万个网站中积累经验，学会如何使用网站，当一个网站跟其他网站一致时，用户会立刻知道该如何操作，但如果违反了雅各布定律，用户会毫不犹豫地离开。）
必须根据品牌、服务和产品细节来进行设计。例如，健身类 APP 与医学计算器有着很大区别。设计必须完全符合目标受众的要求、APP 的功能细节及主题场景等。
△ Martyna Zielińska 的医疗提醒 APP
最后，重要的是要记住，每个设计师都有自己的观点，认为这个或那个决定是合理或有效的。他们可能会对 APP 架构和导航的一致性，严谨的设计解决方案，以及产品的实用价值深信不疑，以至于忘记了测试。通过不断的实践，设计师提高了自己的共情能力，可以更好地理解用户需求。但事实上，直觉和经验带来的潜在陷阱也会给应用带来负面影响。
只有在分析用户与 APP 界面交互的相关数据后，才能得出相对准确的结论。测试有助于及时获得反馈，覆盖 APP 中的所有行为场景，并检查交互模式。
用户的积极参与是成功的关键。相关测试受众的年龄、职业、地理位置、性别、文化和宗教背景等要尽可能接近目标受众，越接近越好。尽可能多地让他们使用 APP 的主要功能并收集反馈。
△ Alex Samofalov 设计的患者卡片 APP
设计所关注的并不仅仅是颜色和字体，而是创造价值和解决业务问题的能力。健康是一个敏感且具有挑战性的问题，需要特别注意。设计师们一直努力地在医疗类 APP 极高的安全性及可用性要求与界面美观性之间取得平衡。
经过深思熟虑的医疗保健用户体验和 UI 设计是一种极好的工具，它能凭借简单直观的界面、便捷的功能以及它所带来的积极情感等，吸引用户参与体验。
文章来源：优设网 作者：TCC翻译情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
好的设计是能够解决不少问题的，具备设计思维不仅仅对设计师很重要，对我们来说同样不可忽视。那么，什么是设计思维呢？我们又应该如何用设计思维来解决问题？本文作者通过这四个案例，教会我们如何像设计师一样解决问题
编辑导语：B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。本文结合笔者自己的工作经验，总结了大型B端业务中表单的设计方法，供小伙伴参考。
表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。
设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。
针对互联网表单设计，我倡导的原则如下：
我们先看看表单的结构，表单主要由5部分组成：
标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。
每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。
1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。
顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。
2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。
浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。
左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。
此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。
3）右对齐：右对齐使得标签和输入之间的距离固定，有明确的视觉关联。
对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。
与左对齐类似，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。
4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。
内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。
另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。
5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。
但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。
此外，输入项一多，还得记忆那个图标所对应的意思。
6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。
但相比其他几种标签样式来说，需要一定的开发成本。
关于标签样式的选择
输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。
选择适合的控件样式，能在一定程度上提高表单填写的效率。
在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？
以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。
1）文本框
文本框包含了单行文本框和多行文本框。
针对单行文本框的设计建议：
a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。
b. 采用字段掩码，自动匹配特定数字的输入格式。
例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。
c. 弹出键盘应与需要输入的文本类型相匹配（移动端）。
d. 涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。
e. 文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。
例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。
f. 有限制输入时，给予用户明确的提示，增加用户感知，减少出错率。
知识扩展：什么是7加减二法则？
早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。
针对多行文本框的设计建议：
使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。
固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。
2）选择框
包括下拉列表、选框、开关、日期选择器等。
对于选择框有如下几个建议：
a. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。
为什么？
因为你可能会增加错误，用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。
但是这个规则不适用于智能的默认值，也就是根据用户的信息设置的默认值；因为智能的默认值可以使表单更快，更准确地完成。
例如：根据定位数据预先选择用户所在的国家/地区。
不过，请谨慎使用。
b. 当选项很多时，提供检索功能。
c. 提示信息要明确，要让用户明确自己选择的是什么。
3）单选框与复选框
a. 按一定的逻辑进行选项排序，例如根据发生的可能性、难易程度、风险大小来排序。
b. 选项应该易于理解，容易区分。
c. 尽可能提供默认选项。
4）关于控件的选择
a. 选择框优于输入框。
任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。
相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。
用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。
b. 单选框与下拉选择框。
单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。
另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。
因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。
下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。
若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。
5）关于必填项
大多数情况下，所有字段都是必填项，只有几个字段是可选的，一般用“*”标记必填字段。
但星号并不适合所有类型的用户，记得之前客户问星号是什么意思？
它是页面中的标签还是描述中的标签；同时，并且红色会从用户方面引起负面关联，因为红色表示错误。
为了避免这种误解，可采用文本框内暗提示。
它也是一个比较清晰标志必填项的方式，并且还很节省空间，也能在一定程度上起到视觉降噪的作用。
提示信息可以分为引导性提示（帮助文字、输入框提示、错误提示信息）和反馈性提示两种。
这里主要想讲讲错误提示的设计：
1）关于错误提示的最佳位置
Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。
错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。
它可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。
因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。
下面来看一个简单的例子，如下图：
当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。
哪一个位置是最佳位置呢？
答案是：右边。理由如下：
a. 错误信息提示右边，符合人们从左到右的阅读习惯；用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。
放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。
但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。
b. 对于上边的错误信息提示，有着更高的认知负荷。
当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。
c. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。
手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。
虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。
综上所述，如果是web端请选择放置在右边，如果是移动端则放置在下边。
当然，如果开发时间有限，都选择放置下边也可以，方便适配。
2）帮助信息
有时候需要帮助性信息，来辅助用户完成表单填写。
当文本简短的时候，可以直接放在改输入框的附近。
当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。
也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。
如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。
在复杂业务表单设计中采用单列布局，大家有没有遇到过类似的问题，例如：
针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。
首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：
方案一：采用4列布局，标签顶对齐。
那为什么标签不采用右对齐呢？
四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。
总体上来看，缩减的长图并不理想。
方案二：三列布局，标签右对齐的方式。
由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。
但字段若出现换行，则页面信息模块是混乱的。
根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。
同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。
综上，最后还是采用单列布局。
面临的问题该如何解决？
我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。
我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。
如果是这样，用户的本质述求就是想要掌控感。
对现有的单列布局做了以下几个处理：
感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。
文章来源：人人都是产品经理 作者：@Nick
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com
