如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
介绍表单设计里经常会犯的错误~
无论是注册流程，还是信息输入的界面，表单都是产品设计里最重要的组件之一。本文重点介绍了表单设计里常见的注意事项。不过这些只是通用的规则，实际应用中总有例外~
少于6个选项的情况，建议全部显示
把选项内容放在下拉框里，不仅隐藏了选项内容，而且需要两次点击。如果大于5个选项，建议用输入选择器，如果超过25个选项，建议加上搜索功能~
输入框长度可以暗示内容长度
输入内容的长度决定了输入框的长度。这种做法适合应用在一些固定长度信息的情况，比如银行卡号、电话号码、邮政编码等。
标签顶部对齐
相比左对齐，标签顶部对齐的表单用户完成率更高。移动设备屏幕大小有限，顶部对齐的效果也更好（标签文案长度不可控）。然而在大量数据输入时，还是可以考虑左对齐标签，因为浏览更，还能节省高度。
不要把占位符当做标签
用户在输入的时候就会看不到标签内容是什么了。详见Nielsen Norman团队的总结。
*也可以参考Google的做法，默认把占位符当作标签，输入时标签移动到输入框上方
将复选框/单选框上下排列
上下排列方便浏览阅读，横向排列选项内容会被选框控件隔开。
指出错误在哪
告诉用户具体哪里出错了，以及错误的原因。
等用户填完了再进行验证
不要在用户正在输入的时候就去验证，除非这能帮到他。例如在创建一个有字数限制的密码～
不要隐藏帮助信息
尽量默认显示帮助信息。如果信息太复杂，考虑在输入时放在输入框的旁边。
不要用*星号表示必填项，标出选填字段
用户不一定知道星号代表什么含义。还不如明确的标出哪些是选填字段。
标签和输入框成组
标签和对应的输入框形成一组，他们之间的间距要比组与组之间的间距小，这样用户不会困惑标签是属于上面还是下面。
按钮的文案描述具体意图
比如按钮上的文字建议写“注册”，而不是“提交”。
主次按钮有层次区分
关系近的内容成组
太长的表单让用户感到不知所措。有逻辑地分组能让用户更快地理解表单。
转自：站酷-大秘密mimi
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
在我们开发的过程中，应该始终考虑性能。而本文列举了有效提高系统性能的12个方法，如果朋友们有更多的技巧请在吴小迪的博客下方评论，谢谢。
性能是创建网页或应用程序时最重要的一个方面。没有人想要应用程序崩溃或者网页无法加载，或者用户的等待时间很长。根据Kissmetrics，47%的访问者希望网站在不到2秒的时间内加载，如果加载过程需要3秒以上，则在40%的访问者会离开网站。
考虑到以上这些数字，你在创建Web应用程序时应始终考虑性能。为了帮助你开始，以下提供了有效提高应用程序性能的12种方法：
一：在浏览器中缓存
要这样做有俩种选择。第一种是使用JavaScript Cache API，我们可以安装service worker来使用它。第二种是使用HTTP协议缓存。
访问某个对象通常要用脚本。通过把重复访问的对象存储在用户定义的变量中，以及在后续对该对象的引用中使用变量，可以立即实现性能的提升。
二：定义执行的上下文
为了有效地衡量你在程序中加入的任何改进，你必须创建一组定义良好的环境，以便测试代码性能。
对所有JavaScript引擎的所有版本进行性能测试和优化实际上是不可行的。但是，在单一的环境中进行测试并非一个好习惯，因为你可能会得到片面的结果。因此，建立多个定义良好的环境并测试代码是否有效非常重要。
三：删除未使用的JavaScript
此步骤不仅会缩短传输时间，还会缩短浏览器分析和编译代码所需的时间。为此，你必须考虑以下几点：
如果你检测到一个用户未使用的功能，最好删除所有与之相关的JavaScript代码，这样网站的加载速度会更快，用户也有更好的体验。
还有可能，你错误地加入了一个并不需要的库，或者你有依赖项，这些依赖项提供的功能在所有浏览器中原本就有，那么你无需再增加多余的代码。
四：避免使用太多内存
你应该始终给内存加一条限制，那就是只有绝对必须的内容才能使用内存，因为你无法知道运行应用程序的设备到底需要多少内存。只要你的代码要求浏览器保留新的内存，浏览器的垃圾收集器就会被执行，并停止JavaScript的运行。如果经常发生这种情况，页面将变慢。
五：推迟不必要的JS加载
用户希望页面快速加载，但并非所有函数都需要在页面的初始加载时就可用。如果用户必须执行某个操作才能执行某个函数（例如，通过单击某个元素或更改选项卡），那么你可以将该函数的加载推迟到初始页面加载之后。
通过这种方式，你可以避免加载和编译那些会延迟页面初始显示的 JavaScript 代码。页面完全加载后，我们可以再开始加载这些功能，以便它们在用户开始交互时立即可用。在 RAIL 模型中，Google 建议将此延迟加载以 50 毫秒为单位进行，这样就不会影响用户与页面的交互。
六：避免内存泄漏
如果内存正在泄漏，则加载的页面将保留越来越多的内存，并最终占用设备的所有可用内存并严重影响性能。你可能见过此类故障（并且可能对此类故障感到懊恼），例如在带有轮播或图像滑动条的页面上。
在 Chrome 开发者工具中，你可以通过在“性能”标签中记录时间线来分析你的网站是否存在内存泄漏。通常，内存泄漏的原因是，你从页面中删除了 DOM，但有一些变量还在引用这些 DOM，因此，垃圾收集器无法消除它们。
七：适当的使用Web worker
当你执行耗时很长的代码时，请使用 Web worker。根据 Mozilla 开发人员网络 (MDN) 文档：“Web Worker 可以在与 Web 应用程序的主执行线程分开的后台线程中运行脚本操作。这样做的好处是你可以在一个单独的线程中执行耗时又费力的的处理，同时让主（通常为 UI）线程运行而不被阻塞或减慢。”
Web worker 允许代码执行处理器密集型计算，而不阻塞用户界面线程。Web Worker 允许你生成新线程并将工作委托给这些线程以获得的性能。这样，通常会阻碍其他任务且需要长时间运行的任务将被传递给 worker，从而让主线程可以在无阻碍的情况下运行。
八：适当将DOM元素保存在局部变量中
访问 DOM 会很慢。如果要多次读取某元素的内容，最好将其保存在局部变量中。但记住重要的是，如果稍后你会删除 DOM 的值，则应将变量设置为“null”，不然会导致内存泄漏。
九：优先访问局部变量
JavaScript 首先搜索以查看变量是否存在于本地，然后才在更高级别的作用域内逐步搜索到全局变量为止。将变量保存在本地作用域内能让 JavaScript 更快地访问它们。
局部变量是基于最具体的作用域的，并且可能会穿过多个级别的作用域，因此查找这一动作可能导致出现通用的查询。在一个它前面没有变量声明的局部变量中定义函数作用域时，需要在每个变量之前加上 let 或 const，以便定义当前作用域，防止查找并加速代码执行。
十：避免使用全局变量
因为脚本引擎在从函数或其他作用域内引用全局变量时需要逐一查看作用域，所以当本地作用域丢失时，该变量将被销毁。如果全局作用域中的变量无法在脚本的生命周期内持续存在，则性能将得到改善。
十一：实施一些优化方案
始终使用计算复杂度的算法和最佳的数据结构来解决任务。
重写算法以获得相同的结果和更少的计算。
避免递归调用。
给重复的函数加入变量、计算和调用。
分解和简化数学公式。
使用搜索数组：用它们来获取基于另一个的值，而不是使用 switch/case 语句。
使条件总是更有可能为真，以更好地利用处理器的推测执行。
如果可以，请使用位级运算符替换某些操作，因为这些运算符的处理周期较短。
十二：使用工具检测问题
Lighthouse 是一个很好的网页性能工具，它可以帮助你审核性能、可访问性、最佳实践和 SEO。谷歌 PageSpeed 旨在帮助开发人员了解网站的性能优化和潜在可改进的方面。这些组件旨在识别网站是否符合 Google Web 性能最佳实践，以及将调整过程自动化。
在 Chrome 中，你还可以使用主菜单中的“更多工具”选项来查看每个选项卡使用的内存和 CPU。对于更高级的分析，你可以使用 Firefox 或 Chrome 中的开发人员工具“性能”视图来分析不同的指标，例如：
devtools 的性能分析允许你在加载页面时模拟 CPU 消耗、网络和其他指标，以便识别和修复问题。
为了更深入地了解，建议你使用 JavaScript Navigation Timing API，它允许你详细测量代码的每个部分从编程本身中获取的内容。
对于基于 Node.js 构建的应用程序，NodeSource Platform 也是一种非常好、影响低的方式，它可以在非常精细的级别上探索应用程序性能。
全面的 Node.js 指标可帮助你识别内存泄漏源或其他性能问题，并更快地解决这些问题。
最后的说明在代码的可读性和优化之间保持平衡很重要。代码由计算机解释，但我们需要确保代码将来可以由我们自己或其他人维护，因此它们需要易于理解。
请记住：应始终考虑性能，但不应将性能凌驾于错误检测和功能添加之上。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
为什么“私域流量”如此火爆，互联网人必看！最近一个全新的名词频繁出现在我们的视野里，它和去年的“增长黑客”一样，在互联网圈子里被炒的火热，它伴随着微商和社交电商而出现，它已经悄悄改变着整个互联网营销格局，它就是“私域流量”。
恰好上周我在团队内部也分享了关于“私域流量”的话题，这期间还纠结要不要整理到公众号里。然鹅，乐于分享的精神将我腐蚀~，今天就不聊设计、不聊产品，来谈一谈我眼中的“私域流量”，拓展一丢丢互联网的思维边界。
一、什么是私域流量？
要读懂私域流量，首先要了解流量池的概念，流量池是流量的蓄积的容器，主要是为了防止有效流量流走而设置的数据库，比如：淘宝、百度、微博等。只要有足够的预算，可以持续不断的获客（获取新用户的渠道），被称为流量池。
而私域流量指的是品牌或个人自主拥有的、无需付费的、可反复利用的、能随时触达用户的流量。它并不是一个新生事物，只是与我们曾经接触的流量相比，更加便于商户或个人使用的流量。
比如：之前社交媒体还没普及的时候，私域流量就是客户的联系方式（手机号、邮箱、住址等），想要联系他们时，可以打电话、发短信、发邮件、甚至往他们家寄样品体验。当时这些客户信息甚至都是公司的商业机密。
随着时代的进步，如今的私域流量是一个完全属于“你”自己的私人地盘，大到年入上亿的商家，小到个人经营者。这些流量存在于公众号、微信好友、微博、社群、朋友圈、头条号、抖音等社交媒体里，它是一切你可以随时掌控的私人流量池（既私域流量），这个流量池里聚集的是你的粉丝、客户和潜在客户。
而产品则是承载用户流量的工具，即使用户分布在不同的产品里，但只要是在个人账号的，就是你的私域流量。顾名思义，私域流量就是属于自己的流量，相对公域流量而言，主要指个人或品牌自主拥有的自由流量，它需要通过沉淀和积累来获取的更精准、转化率更高的垂直领域流量。
二、公域流量与私域流量
任何一家互联网公司，都离不开一个核心问题——流量。得流量者得天下，有了流量才能进行下一步转化，“流量”既代表大众的关注点。
对互联网公司来说，流量就是市场，流量就是用户，流量就是商机。我们讲的私域流量就是这部分流量属于商家或个人的“私有资产”。既然有私有，那必然有公有。与私域流量对应的是公域流量，比如淘宝、京东这些大的流量平台，所有的流量都要花钱买，而且越来越贵，这里的“花钱买”指的是广告推广、排名推广等。有了曝光率，用户的关注点（浏览行为）自然就来了。
这两类流量有什么本质上的区别呢？
公域流量和私域流量并不是绝对概念，而是相对概念。比如一家商场开在步行街上，商场里的流量相对于步行街就是私域流量，因为店铺基于步行街内。而步行街的流量相对于商场就是公域流量，因为其他店铺也可以享用。再比如，从淘宝里打开一个网店，网店里的流量相对于淘宝就是私域流量，而淘宝的流量相对于网店又成了公域流量。同样，公众号的流量相对于微信就是私域流量，微信的流量相对于公众号就是公域流量。
所以说，公域流量就像大海，刚开始鱼多，捕鱼的人少，即便我们捕鱼的技术一般，也能有所收获。随着捕鱼的人越来越多，捕到鱼的成本越来越高，鱼的质量却越来越低，于是很多人就开始自建鱼塘养鱼，这样捕鱼的成本低了，也更容易捕到鱼了，还能租出去让别人钓鱼，自建鱼塘就是私域流量。伴随着流量红利的减缓，公域流量逐渐饱和，商家很难再以较低的成本来获客了，为什么是较低的成本？请往下看案例。
公域流量：
公域流量也叫平台流量，它不属于单一个体，而是被集体所共有的流量。来看看我们常见的的平台流量五大板块：
电商平台（淘宝，京东，网易考拉等）；
内容聚合型平台（腾讯新闻、网易新闻、今日头条等）；
社区平台（百度贴吧、微博、知乎、简书等）；
视频内容型平台（腾讯视频、爱奇艺、抖音等）；
搜索平台（百度搜索、谷歌搜索、360搜索等）。
对于平台中的个体来讲，他们只能以付费或活动等方式，在满足平台规则的原则下获取流量，留存率较差，因为个人没有支配权，只能跟随平台的发展规律顺势而为，且流量始终属于平台，个体稍有过分的营销嫌疑就会被封号。很显然，他们都依靠于平台获取流量，并且不能完全掌控自己的流量分发。
这种形式所带来的弊端便是每次流量的使用需支付高昂的费用。当然，优点仅为流量获取方式相对简单，花钱购买，付费即可，平台会根据你付费的级别来定制推送计划。但这种推广方式，相当于大海捞针，比如我们在百度上做推广，想利用百度的流量来曝光我们的UI设计网课，但是每天使用百度的用户来自于各个阶层、各个岗位，需求五花八门，可能100个访问用户中，只有1个是具备目标用户条件的，所以平台流量不能精准的曝光到目标用户所在的群体。
私域流量：
接下来，我们对比一下私域流量，它属于单一个体的流量。比如某个公号的关注用户都是UI设计师，那这个公号的私域流量就是推广UI设计网课的首选目标，因为大家都有这个需求、都来自这个领域，只不过需求的渴望程度不一样而已。在100个阅读用户中，可能有10个会仔细了解。所以这种推广方式的精准度要比平台流量更高，关键是推广费用极低。弊端是曝光率、影响面积、用户热度是临时性的，但在短时间之内是有明显的用户增长，这就是所谓的“极速获客”、“热点获客”。
所以我们常见的私域流量都存在于个人号中，他们可以完全掌控自己的流量分发。比如在微信中，好友也是我们的私域流量，我们可以选择不同的好友分组推送消息，所以私域流量最大的特点是直接触达用户。
同时，私域流量可以反复利用，更适用于复购属性强的产品，利于增加复购率，比如我们生活中一些小超市的营销手段就是利用私域流量增加顾客的粘性和复购率的：在超市购买商品支付时，收银员要求你添加他们店长的微信号，添加成功可以送多少积分，打多少折扣，这就是获客的第一步，然后店长会把这些顾客拉入到一个微信社群里，每天定时推送一些打折商品、优惠新品等，有些用心运营的还在社群里做“抢红包”的活动，抢到最多的前三名当日到店购买商品送500积分等。
我们可以看出，比起公域流量，私域流量更注重引导和运营。如果用一句话概括私域流量和公域流量的区别，就是：私域流量的用户属于个体，公域流量的用户属于平台。
三、私域流量的特点与价值
1、更可控
假设某平台有一百万用户，然而这一百万用户跟我们没有任何关系，我们只有把里面的用户导入到自己的平台，才算自己的用户，后续对这些用户的针对性服务才有可能发生。
就拿“抖瘾”来说，用户喜欢的短视频很多，当对其中一个视频感兴趣时，可以选择关注号主，关注后可以第一时间享受到号主提供的视频服务，而对号主来说，关注者就是从平台引入的私域流量。当关注号主的用户越来越多时，这个号主就成了所谓的网红，并在特定领域有一定的影响力，因为后面有一大群“私域流量”在支持他，基于此，一些其他的业务和广告就随之而来，这伴随的也就是收入。号主也可以选择性服务，将关注用户人群细分，从而合作不同的品牌。
2、更省钱
产品在平台流量获得曝光需要支付高昂的费用，比如：关键词竞价、关键词推广等，如果你想通过平台获得不花钱的曝光...还是别想了，不可能的，人家的流量也是花钱砸出来的。
私域流量几乎是免费的，一旦把用户从平台流量引入到私域流量，比如：微信社群，那真是我的地盘我做主，怎么玩都是我的权利，当然也不能太放肆而丧失了所谓的本质，如果用户体验不好，分分钟会被别的“私域流量”引导走，毕竟选择也是用户的权利。再就是前面举的UI设计师网课和超市的例子，直接跟“熟客”建立联系，省下了渠道推广费不说，熟客们还愿意为你安利更多用户，这相当于帮你免费做了宣传推广，无形中产生了裂变。所以产品在私域曝光的成本要比平台曝光低得多，甚至几百块就可以搞定一个精准推广，而这个精准推广还会产生二次流量。
3、更丰富的营销玩法
私域的运营能让商家与消费者建立更亲密的连接，那商家就可以基于产品做延展，不管是二次营销还是多元化营销，只要你输出的内容不让用户失望、讨厌，就有助于销售。
我们身边最常见的就是分享文章到朋友圈进交流群、参与文章中的红包抽奖、评论区积攒送书、公众号文章互推等活动。这无形中就是为商家的私域流量进行了裂变和促活。
当然这些只是很小一部分的玩法，也不违背互利的原则：我分享你的文章进了我想进的交流群、我帮你的文章带来一次阅读，但我可能获得抽奖红包、我发动身边朋友帮我积攒，对你的产品进行了裂变式曝光，但我得到了想要的书籍...
写到这里让我想起之前在网上看到的段子“我把你当朋友，你却把我当你的私域流量”。然而，不管是现实还是网络，不可能有人在商业环境里无私的付出，虽然说的很透，但我们还是需要正确认识现实，毕竟这是个资源互换、资源共享的互联网时代。
4、更高的客户稳定性
私域流量可以有效防止用户流失，尤其是你经常交互的用户。通过运营私域流量，与用户建立起情感互动（交互），你推荐的产品他们也不会条件反射般地当作广告去屏蔽掉，同时你的诚恳推荐也会让用户稳定性越来越好，不容易流失。
现在很多商户都会主动以个人号去添加一些顾客，通过私人关系为他们提供订座、专属折扣和所谓的VIP服务，平时有事没事唠唠嗑、相互点个赞、时不时来一句赞美的评论啥的。所以，商户在用户面前曝光多了，也能起到唤醒用户记忆的作用，久而久之复购率也就提升了。
5、更利于塑造品牌和个人IP
好品牌反映了好口碑，在某种程度上会帮助用户消除掉选择困难症，比如我们买鞋子，品牌这么多，我肯定首选我心目中排在第一的，这个“第一”就是用户对商户精神层面的认知和信任，品牌塑造的过程就是用户忠诚度建立的过程。
私域流量的交互，可以拉近品牌和用户之间的距离，通过产品提供的服务把同类人群聚集在一起，这些人累计起来的影响力不可小瞧。不管商户大小，掌握私域思维，都能有效的促进与用户的沟通，增加用户粘性和忠诚度。
在运营私域流量时，最常见的错误是沿用以前的思维。比如很多公司让客服团队搞大量微信个人号做朋友圈运营，但其实没有任何一个微信用户希望自己的朋友圈里多了一个广告客服。私域流量转化的核心是信任，是基于人与人之间的信任。这里有一个非常重要的环节，就是个人IP化打造，打造一个行业KOL或专家的身份，比如你在某个领域有丰富的行业经验，通过某些途径将你的经验分享给有需要的人，这就从中产生了浓厚的信任，因为在用户眼里，你就是行业的专家（你说啥都对~），完成这步之后，私域流量才可能提高转化。说白了就是你（商户）能为用户提供什么样的服务，这些服务被多少人所认可。
四、身边常见的导流方式
1、靠利益诱导
比如关注公众号领红包、下载APP送现金、注册领优惠券等。在流量池获得曝光后，用户看到进入私域流量有好处时，一般都会形成转化。虽然数据在短时间内很美丽，但留存率和活跃度不敢保证，这需要产品内的引导和体验来支撑。
2、解决内容诉求
做优质的内容输出，解决用户的内容诉求，靠内容本身打动用户形成转化。比如你正在看这篇文章，你觉得有点收货，就产生了关注我公众号的想法，并做出了关注的行为，这个“行为”就是一次转化。所以做内容私域的本质在于产出有价值、有思考、有帮助的干货。当别人发现你产出的东西，对自己有帮助时，会主动前来，这是长久的打法。
五、写在最后
私域流量的拉新和运营，就是与人打交道、与一群人打交道，和做产品一样，满足他们的核心需求，以及一些增值需求。现在关于私域流量运营还没有太多成熟的玩法，商家多半还在摸索和尝试中。我们也不要只盯着微信平台，用户在哪里流量就在哪里，私域流量池就在哪里，就像有些朋友从公众号转战到“抖瘾”一样。
掏心窝子：当然我个人并没有太在乎私域流量给自己带来的利益，因为我始终把在UI中国写文章当做一种学习成长的方式而已，通过输出一些复盘和有挑战的知识点，帮助自己突破思维边界，同时还能结交各位同行，简直两全其美。
❤️希望对你有所帮助~
是的，我们距离目标又近了一步，标红的你都看了吗？
文章来源：ui中国
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
表单是产品设计中的重要组成部分，如果说弹框的主要作用是完成信息反馈，那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素：标签（标题）、输入框和按钮。
标签是用来告诉用户这个列表项是什么；输入框是供用户完成信息录入的；按钮是供用户完成信息录入后点击进入下一个流程的。
根据标签所处的位置，可以将其分为左标签、顶部标签和行内标签。
1. 左标签
左标签在目前来说是最常见的一种标签样式，但是这并不意味着我们可以无所顾虑地使用它。以手机端为例，手机端的屏幕尺寸（宽度）有限，左标签会占据屏幕较大的空间，此时右边的输入框就可能无法展示完整的信息。
例如，如果用户输入的地址过长，就会造成信息的展示不完全，这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认，如果连完整的内容都无法获知或者获知的难度较大，则用户根本不会进行下一步操作，这就造成了操作流程的中断。所以，我们在使用左标签的时候，一定要考虑对多行文本的展示。
2. 顶部标签
顶部标签是指位于输入框上方的标签，这样输入框就可以独占整个页面，信息可以得到更完全的展示。
与左标签相比，顶部标签可以给输入框的内容腾出足够的空间。在界面设计中，更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项，有些输入项的优先级很高，我们可以考虑使用顶部标签的样式来进行凸显。
但是这种布局方式也有缺点：会占据更多的纵向空间，之前一屏就可以展示的内容，现在用户需要滑动页面才可以看完。
3. 行内标签
行内标签又可以被看成是输入提示，其样式看起来很适合手机端的表单设计，因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后，就看不到这些标签了。如果操作提示字数很多，例如密码规范，那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示，减少用户的记忆成本。
但是，如果表单项目过多，则用户在填写的时候很容易串行，可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是，用户因为无法看到标签，这类错误是无法被检查出来的。为了解决这个问题，我们可以在行内标签前加一个图标来标识这个列表项，图标所占据的空间不会太大，而且会提高页面的美观性。
当表单项目过多时，我们要对其进行整合分组来提升内容的可读性。如下图所示，这里将 15 个字段分成 3 组。同样的内容，但给用户的印象却大不相同。
输入框的作用是供用户完成信息录入，这里我们的设计思路是如何提升信息的录入效率。我见过很多设计师偷懒，把所有的输入框都做成文本框样式，用户必须调起键盘一个字一个字地输入，这种体验是非常不友好的。如果我们想让用户录入个人信息，其中的生日和城市就应该使用日期和城市组件，而不是让用户手动输入。
即使非要让用户手动输入，我们同样可以根据不同的场景给用户提供更友好的体验。如果要输入的是数字，那么应该给用户调起数字键盘；如果要输入文本，那么应该给用户调起全键盘，避免用户手动切换键盘。
即使用户输入符号，我们也要考虑如何减少用户的操作步骤。例如，我们发现当光标位于周星星三个字右边的时候，点击「“」键，会出现左右双引号；当光标位于周星星三个字中间的时候，点击「“」键，只会出现左双引号。这是因为光标在文本右边，用户只要输入「“」，那么就必然需要「”」来结尾，这里直接提供左右双引号更合适。如果光标是文本中间，无法确定「”」需要在哪里出现，所以只展示「“」。
在理想状态下，用户填写完表单信息，然后点击「提交」按钮，系统显示提交成功。但是，现实情况却是用户在填写过程中经常会发生错误，那么如何将容错性原则融入表单设计中呢？
首先我们需要给予用户足够的操作提示，日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样，「02/12/2019」到底是2019年2月12日还是2019年12月2日？如果我们不提示用户，用户就不知道应该怎么输入。
为了避免用户犯错和提升用户的信息录入效率，我们可以提供自动完成录入功能，当用户在文本框里输入时，系统可以猜测可能的答案，显示可选列表，避免了用户手动输入造成的错误。
如果你确定对用户足够了解，在用户进行信息录入时，可以提供合理的默认值。因为对用户来说，填写信息永远都不是一件有趣的事情，设置合理的默认值可以节省用户的操作时间。
能让系统完成的任务，就尽量不要让用户来操作。用户会犯错，而系统不会。表单容错性设计的另一个方向就是梳理表单中的鸡肋项目。
现在很多的购票类 APP 都提供送票上门的功能，这就需要用户填写收货地址。以交通出行类 APP 飞猪、途牛和去哪儿为例，其中，上图中左侧的两张图，飞猪和途牛都需要用户填写邮政编码，而在去哪儿中则是选填的。其实根据用户填写的地址，我们已经可以获取到邮政编码，邮政编码完全可以自动回显，不需要用户手动输入。
而在小米有品 APP 中就可以根据用户填写的地址回显邮政编码，这看起来很方便。这只是看起来很方便，我们可以继续思考一下：如果系统完全可以根据用户填写的地址获取到邮政编码，那么邮政编码这一项完全可以不在界面中露出。其实很多产品在用户填写收货地址的时候已经不需要用户填写邮政编码了。
对于容错性原则，我们还要考虑如何给用户展示合理的报错提示。目前来说，我们经常看到的一个报错提示样式是对话框。在我看来，对话框并不是一个好的选择。因为用户如果要进行修改，就必须要关闭对话框，那么用户就看不到错误信息了。如果错误原因和解决方案的字数较多，那么用户就需要花一定的时间记住这些信息，然后再来修改，这会增加用户的记忆负担。如何才能设计好表单的报错提示呢？表单中的报错提示可以分为两种：单行表单报错提示和多行表单报错提示。
单行表单中意味着在当前界面中表单只有一行输入框，其一般用于手机号、银行卡号、身份证号和金额的录入。对于此类场景，建议使用输入框底部的文字报错提示样式，并且要对录入的信息进行实时校验，不要等到用户进入下一个界面才告知用户在上一个界面中手机号输错了。
给多行表单进行报错提示时，除告知传统的错误原因和解决方案外，还应该告知用户错误的位置。因为在一个界面中，有很多的输入项，用户在短时间内无法把报错提示和错误项联系起来，因此，为了提升用户对于错误场景的感知效率，对错误项进行标记是非常有必要的。具体的实现方式有改变文字颜色、输入框背景色和设置提示文案抖动。
以上图为例，这里通过改变文字颜色或输入框背景色来标记错误位置，用 Toast 告知用户错误原因和解决方法。我们也可以不改变配色，让该输入框左右抖动也能起到快速标识的作用。
表单中的提交类按钮按照位置可以分为以下三种。
其中位置 A 是最常见的布局样式，这样的布局符合用户的视觉习惯和操作流程：用户由上而下完成表单信息的填写，最后点击「提交」按钮进入下一个页面。但是这种布局有一个问题：如果表单项目过多，则用户必须滑动页面才能完成提交操作。
位置 B 跟位置 A 很相似，唯一的区别在于位置 B 是固定在页面底部的。那么位置 B 跟位置 A 的适用场景有什么不同呢？位置 B 意味着用户在不用滑到页面底部的情况下就可以点击「提交」按钮，那么在什么样的场景下用户不用滑到页面底部就可以提交呢？
其实在很多表单中，不是所有的信息都需要用户手动录入的。以前面提到的邮政编码为例，只要用户输入了地址，系统就能获取邮政编码，相关信息是可以直接回显的，用户没有看到此类信息的必要性。所以，对于一些重要性不是很高、不强制用户看完的表单项目，很适合使用这类底部悬浮按钮。最常见的就是各种协议页。
位置 C 出现的原因在于，对于前两种方案，当调起键盘时就会遮住「提交」按钮，用户必须先关闭键盘才可以点击「提交」按钮，多了一步操作。而位置 C 可以完美解决键盘遮挡的问题，但是其不符合用户的视觉习惯和操作流程。而且手机大屏化是一个不可逆的趋势，用户在单手握持手机的情况下很难直接点击到界面右上角的「提交」按钮，增加了操作难度。
其实位置 C 完全可以被忽视，因为现在很多产品已经支持在调起键盘时滑动页面，所以位置 C 最大的优势已经不复存在。这里还介绍位置 C 的原因是希望读者知道交互规则是会随着技术的发展而不断改变的，可能在这本书里提到的一些技法过一段时间就会落伍了。要成为一名优秀的设计师，必须具备持续学习的能力。
文章来源：优设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在日本文化中，「属性标签」是一个重要的组成元素。一个人是「御宅族」还是「视觉系」，抑或是「食草男」，细分标签总会添加上去。虽然这样的标签会给人一种「固化」的感觉，但是有时候也会让人对一个事物有更清晰明确的认知。日本的杂志同样如此。一本杂志应该针对什么样的群体，带有什么样的特征，传达什么样的情绪，都会有非常清晰的「属性标签」。
20世纪80年代是日本时尚杂志百花齐放的年代，众多现有知名日本杂志诞生，例如《ViVi》、《CanCam》、《JJ》、《mina》、《sweet》、《SPRING》等等。不同的杂志风格不同，面向的群体也不同，上面所带的标签也不同。
比如时尚杂志《PopEye》是针对「City Boy」的男性，「美式复古」和「学院派风格」是这本杂志最典型的标签。
而女性向时尚杂志《mina》的标签则是「清新少女」、「独立」、「青文字系」。「青文字系」是一个非常日本的标签，简单来说，带有「青文字系」标签的杂志在精神内核上强调女性要潇洒独立，不应该对男性谄媚，带有同样标签的杂志还有《sweet》、《steady》、《mini》、《SPRING》、《InRed》。与之相反的标签则是「赤文字系」，带有这一标签的杂志特别强调女子力，会教读者如何穿搭、如何做才能讨男生欢心，带有这一类标签的杂志有《JJ》、《ViVi》、《Ray》、《CanCam》。当然，近年来还出现了「黑文字系」，其实指的是喜欢穿一身黑的姑娘……
不过言归正传，今天我们要聊的主要是《mina》这本杂志。《mina》其实在新世纪之初进入过中国大陆，当时中文名称为《米娜》，巴拉排行榜曾将其列为全球十大时尚杂志之一，是日本少女清新风格的杂志。
《mina》能获得这样的赞誉，和它本身极高的内容素质是分不开的。包括尾身沙纪在内的许多著名的摄影师，会给《mina》拍摄图片，而模特更是有村架纯、竹内凉真这样的一线明星。
清新秀丽的妆容，凸显少女气质的整体设计，真实而细腻的场景，《mina》借助精心打磨的视觉排版，将女性最真实可爱、贴合年纪的美丽以及元气满满的少女感，都呈现出来了。
如果你是一名热爱视觉和排版设计的设计师或者爱好者，《mina》简直就是为你量身定制的排版素材库。稍加拆解，你会发现这个杂志中到处都是可供学习的排版知识。
《mina》杂志因为其少女特性，多样活泼的使用不同的区域放置元素，同一本杂志会给你带来不同的视觉效果。下面左图四周无间距的设置，会使你的视线更加开阔，无论看向版面的哪一部分，都可以传递信息给你，吸引你打开这本杂志。右图的框线设置，限制了阅读的区域，让你的视线聚焦在框线内，阅读精心为你准备的内容。
下面左图三张图片和两段文字的排列，使整个版面显的更加充实和生活化，而右图单张图片和零星的文字使得整个版面显的更加高级，这不仅仅是图片和颜色选择的影响，更多的还有元素的排列给你带来的视觉感受。
为了让读者更加易于阅读，在该版面上停留更长的时间，分组的设计在杂志中较为常见。图文元素整齐的搭配，是不是给你一种画面美观，信息可信赖的感觉呢？这样的设计也更加的吸引读者进行阅读。
同一排版样式的反复使用，会给你舒适的阅读体验，整个版面会更加的有节奏感，不会让你觉得某一元素特别跳脱。同样，为了美观和便于阅读，无论是图片还是文字，都遵循着一定的对齐原则，常见的有左对齐、上对齐和居中对齐。
活跃于广告界的白承坤先生说，无论使用怎样的图片，目的都是为了让眼睛停留两秒钟。同理，各类元素或色彩之间的对比是杂志常用的让你停留「两秒钟」的方式。由于视觉心理的作用，相对来说，大的元素、鲜艳的元素会更加的吸引人眼球，引人注意。
对于少女杂志而言，如何体现少女心和元气满满的感觉是一个需要解决的难题，而出血的设置为这个难题提供了一把钥匙，让整个画面活泼生动起来，右图奶茶开放式对话框的加入，有一种奶茶说「快来喝我！」的活泼感，使得整个版面顿时可爱起来。
《mina》很少在版面的四角放置满满当当的元素，是因为适当的留白可以让人在众多的元素冲击中舒缓下来，给你清新舒适的观感。让你在开阔的视野中，使杂志想展现出来的重点，成为你的焦点。这样好用的突出重点的方式，快快学起来吧。
抠出来的人物没有其固有的背景，会让你聚焦于少女的动作和轮廓，隔着屏幕都能感受到少女满满的活力。而四方版更加强调人与环境的关系，让你得以获得更多的信息。两种方式如何恰当的使用，就看你想用来传递什么样的信息啦！
传递信息是最重要的，其余的套路就快去打开《mina》找寻吧！
文章来源：优设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
本文主要记录几种提升基于深度学习的图像语义分割精度的方法，以防忘记！
By zhengzibing2011, 2017年10月21日-星期六
1
1.图像语义分割面临的挑战
(1).特征分辨率减小：主要是由神经网络中的重复最大池化和降采样（stride跨越）操作造成的，而采用此种操作的原因是
A.降维，以免参数过多难以优化；
B.基于DL的语义分割是从用于分类任务的CNN转化而来，而在分类任务中，分类器要求对输入的空间变换具有不变性，池化恰能满足这样的要求。
(2).不同scale下的目标存在的状况：主要是目标在multi-scale图像中的状态造成的，因为在同一种尺度下，不同目标的特征往往响应并不相同。如需要在较大的尺度下才能较好地提取图像中比较小的目标，而较大的目标为了获取全局性信息也必须在较小的尺度下才能实现。
(3). CNN的空间不变性造成定位精度的下降：对于分割任务而言，由于pooling操作引起的分类器对输入的空间变换具有不变性丢失空间信息，内在的限制了分割的空间精度。
2.潜在的解决方法
FCN作为将CNN应用于semantic segmentation的forerunner，贡献巨大。但不可回避，其提出的方法具有一些不足。为保证却终的feature map不至于过小，FCN的conv1引入pad=100，引入了较大的噪声；
32倍upsample(deconvolution)非常粗糙，而且deconvolution的filter不可学习； skip architecture虽能有效提高精度，但需要3次训练即FCN-32s->FCN-16s->FCN-8s。除skip architecture外。随着研究的深入，针对以上挑战，有以下几种方法解决：
(1). Encoder-Decoder结构
采用此种思想的代表为DeconvNet，SegNet，其基本思想是采用一种对称结构将由于pooling操作而减小的feature map通过逐步的upsample逐渐恢复到原图像大小，同时在upsample阶段，融合了subsample中pooling index，具体细节可参见原文。
(2). Atrous convolution
feature map的减小是由于pooling造成的，为确保一定精度的feature map，能否不使用或减少使用pooling呢？理论上是可行的，但如果这样做会使得需要优化的参数过多，重要的是难以基于以前的model进行fine-tuning，atrous convolution解决了这个问题。
在DeepLab中令pool4,pool5的stride=1，再加上1 padding，这样经过pooling后feature map大小不变，但后层的感受野发生了变化，为使感受野不变，后面的卷积层使用atrous convolution，其作用是在不增加参数的前提下，增加感受野。因此，解决了feature map空间分辨率下降的问题。
(3). ASPP
针对不同scale下的目标存在的状况问题，可通过两种方法解决：
A.标准的多尺度处理方法，用共享相同参数的并行CNN的分支，从不同尺度的Input image中提取score map，然后进行双线性差值，最终对它们进行融合，在不同尺度上获得每个位置的最大响应。训练和测试时均这样处理，比较繁琐的是需要计算输入图像的每个尺度在各layer上的特征响应。
B.基于任意尺度上的区域都可以用在这个单一尺度上重采样卷积特征进行有效地分类的思想，使用多个不同采样率上的多个并行多空卷积，每个采样率上提取的特征再用单独的分支处理，融合生成最后的结果。
(4). FC-CRF
CRF几乎可以用于所有的分割任务中图像精度的提高。CNN可用于对图像中的目标进行分类并预测出目标的大致位置，但并不能真正描绘他们的边界。因此，将DCNN的识别能力和全连接CRF优化定位精度耦合在一起，能成功的处理定位挑战问题，生成了的语义分割结果。全连接CRF理论较为复杂，在此不作阐述。类似的概率图模型(PGM)还有MRF，G-CRF(高斯-条件随机场)。
3.总结
目前，暂且先记录以上4种提高分割精度的方法。后续若有新的方法，予以追加！
————————————————
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
JS的作用域一共有三个范围，分别是：
全局作用域
定义在所有函数之外的变量，其作用范围是在整个脚本中
局部作用域（函数作用域）
使用var定义在函数内部的变量，其作用范围是整个函数结构，超出函数 {} 花括号的范围则不能使用。
块级作用域
ES6声明变量的方式:let / const
let 变量名 = 变量值；
const 变量名 = 变量值；
PS：注意： 使用const修饰的变量，赋值确定后，不允许再重新赋值。（一般修饰常量或者数组对象之类的）
而且必须给予初始值。
const修饰数组对象后虽然不可以再对变量进行等号赋值了，但是还是可以用数组和对象的方法去改变它的内部结构。
IIFE(立即调用函数表达式 - - 自执行匿名函数)：
英文全名：（Immediately Invoked Function Expression）
语法：
//这三种都属于IIFE写法
(function () {})();
(function () {}());
+function () {}();
//作用与ES6当中的let是一样的，只不过用这个语法是为了解决个别浏览器的兼容问题。
1
2
3
4
5
声名提升：
将使用var定义的变量声名提升到对应作用域的最顶部，赋值部分位置不变。
使用ES6的let与const没有声名提升。
函数的定义也存在声名提升：
如果是声名的方式定义的函数，将整个函数（声名及函数主体）都提升到作用域的最顶部。
如果是表达式的方式定义的函数，只提升声名，不提升赋值（函数主体部分）
示例：
//在声名函数前面输出它。输出的结果就是整个声名函数的内容
console.log(testArg)
function testArg(a, b, c){
console.log(arguments)
}
1
2
3
4
5
输出结果：
//在函数表达式之前输出函数
console.log(testArg)
var testArg = function(a, b, c) {
console.log(arguments)
}
1
2
3
4
5
输出结果：
这就是声名提升的特点，只提升声名部分，不提升赋值部分。大家一定要牢牢记住哦~
————————————————
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
很多朋友在开发的过程中要把ECharts图标做成自适应浏览器宽高的效果。于是去翻看ECharts官网发现了resize方法，结果用了之后发现没用，而且根本不知道什么原因。
解决办法：
不能给ECharts的容器设置固定的宽高。
宽度要写百分比
高度要写vh
然后再搭配resize方法才可以实现根据浏览器大小而改变大小的功能
示例代码：
let ECharts = echarts.init(document.getElementById('wrapBox'));
//ECharts的配置项和数据
let option = {
title: {
text: 'demo'
},
tooltip: {},
legend: {
data: ['dataSource']
},
xAxis: {
data: ['aa', 'bb', 'cc']
},
yAxis: {},
series: [{
name: 'dataSource',
type: 'bar',
data: [2, 5, 6],
}]
};
//配置图表数据及配置项
ECharts.setOption(option);
//根据浏览器大小改变大小
window.onresize = () => {
ECarts.resize();
//如果有多个表变动在下方依次写下去就可以了
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
当我们在谈 SaaS 的时候，在谈什么？
● 什么是 SaaS
● SaaS 产品的优缺点
● SaaS 产品的销售模式
● SaaS 产品指标
● SaaS 业务指标
● SaaS 收入计算
一、什么是 SaaS
这个模式让软件变得和水电气很相似，只需要每月缴纳固定的费用即可享受服务。
——马克·贝尼奥夫（salesforce 创始人）
订阅模式
SaaS（software as a service），软件即服务，是一种软件交付和销售方式——订阅许可模式。
它基于云， 运行在远程服务器上，集中托管。因此不需要独立部署甚至物理分发来完成交付和使用，这意味着用户通过网络即可使用。
例如，过去你使用 office，需要买一张光盘或者在线下载，输入序列号（一次性付费），进行本地使用。如果要更新你需要重新购买和下载版本。而 SaaS 只需在线登录即可使用服务，无需安装和手动升级，并根据使用时间付费（按月/年）。
规模化和复利
SaaS 采取订阅付费（按月/年）模式，良好留存的情况下，当月/年的收入就是下个月/年的基础，不断累加下去（复合累积收益），形成良好的现金流。
也因此，SaaS 产品的收入具有了经常性、可预测性的特点。这使得，企业可以根据现金流进行规划，甚至通过融资，提前获取未来的收入，来进行产品的增长和扩张。
同时，对于订阅者而言，无需购买硬件和中间件（前期成本），以及实施、维护、更新、运维和管理成本（后期持续投入成本），只需要连接网络即可使用，致使决策和投入成本得到了大幅降低。同时，后期可根据业务的发展，升级套餐或增加数量，这些优势致使 SaaS 软件更容易拥有大量客户，形成规模。
从复利性角度，SaaS 产品的估值是经常性收入的若干倍。因此，SaaS 产品的改进，不仅仅是提高下个月的或者长期的收入，而是整个企业的市值，可谓“一本万利”。
开放和灵活
SaaS 会针对不同组织的诉求，提供多种套餐方案，通常在付钱前，用户可以进行免费试用，从而更好的判断是否满足自身需求。
同时，SaaS 会开放自己的接口（API），方便与其他软件集成，从而更好的满足客户业务。SaaS 厂商也会对接市场上跟产品业务相关的主流软件，从而提供更加完善的解决方案。
例如，你使用 53KF 云客服进行在线服务，同时打通 CRM 和订单系统，以及百度、腾讯、头条、360 等流量渠道，从而提供更好的客户支持和流量转化。
先进生产力
SaaS 产品的发展，是不断验证市场需求（PMF）、优胜劣汰的过程，其成功就代表着某种先进生产力（工具、流程或方法）。
从更大价值角度考虑，SaaS 卖的不仅仅只是工具，而是解决方案，融入到生产制造中去，协助客户获取成功。同时，对于厂商而言，也是更有价值、更有竞争力、更长久存在的经营方式。
从市场而言，SaaS 是一种众包模式，厂商觉得市场有大量的同类需求且长期存在，开发成产品进行运作。也真正有效的节省了同类诉求其社会资源的多次投入。
由于 SaaS 产品的有利可图，促使市场的激烈竞争，也锻造了厂商在其领域的专业化，提供更加有效的解决方案。
二、SaaS 产品的优缺点
优点/优势
● 易于访问。SaaS 通过网络提供服务，用户可随时访问，且数据储存在云端，实时同步。
● 免费试用。可以在付款前，进行免费试用，进行多家对比，选择最合适的。
● 费用便宜。使用订阅模式，价格取决于用户数量，订阅者无需一次性支付大量费用，降低前期购置成本。
● 支付灵活。按月/年进行支付，此外，订阅者可根据业务发展，增加或升级套餐，减少或降低套餐，甚至随时停止使用。
● 良好支持。服务的好坏决定了客户的订阅，所以 SaaS 厂商会提供更加友好、高质量的客户服务。
● 开放集成。开放的接口（API）可以与其他产品进行数据打通。
● 立即使用。无需安装和部署，有网络的地方即可使用。
● 无需维护。SaaS 统一运行在厂商的服务器上，由厂商统一维护、更新。
缺点/风险
● 数据安全。所有数据储存在云端和软件厂商的服务器上，可能会引发泄露等安全问题。SaaS 软件厂商，通常非常注重数据的安全性，因为数据泄露对于 SaaS 厂商的企业经营而言是致命打击。有些 SaaS 厂商也提供混合云服务，将敏感性数据储存在客户自己的服务器上。
● 网络连接。没有网络，将无法使用 SaaS 产品。同时，网速深刻影响 SaaS 产品的运行速度。
● 服务中断。软件厂商的硬件故障、网络攻击等造成的服务中断，会致使产品无法使用。
三、SaaS 产品的销售模式
通常来说，SaaS 的销售模式分为三种：
1、非接触（no-touch）：自助服务
1、低接触（low-touch）：交易型销售
2、高接触（high-touch）：顾问式销售
非接触（no-touch）：自助服务
理想的 SaaS 销售模式是客户自助完成整个服务，没有销售人员的介入。
这需要产品简单、价值明显、支付容易甚至售价便宜。同时，产品本身提供良好的支持（操作引导、使用说明、帮助中心以及反馈入口），从而允许客户自助完成服务。
非接触的 SaaS 产品，通过省去销售团队和支持性投入，采用低价，获取大量客户。同时，也因为价格便宜，无法支持销售和支持性团队的组建。
例如，某 SaaS 产品，10 月/月，一个销售人员的底薪 4000 元/月 + 五险一金和办公等费用，那么至少需要销售 600 个客户才能抵消成本，这是很难完成的。
低接触（low-touch）：交易型销售
低接触的 SaaS 产品，通常采用免费试用的方式，进行获客。然后，销售人员通过在线咨询服务（53KF 云客服）或者电话进行销售转化。
同时，产品在 onboarding 上需要投入大量的资源，从而降低用户使用摩擦，使得用户能够成功的上手并获取价值。
低接触的 SaaS 产品通常采用按月订阅的模式，其满意度决定了持续收入。因此，低接触的 SaaS 产品的销售，需要同时兼任“客户成功”的职能，提供良好的客户支持，从而保证客户持续的获取产品价值而不断续费。
高接触（high-touch）：顾问式销售
高接触的 SaaS，通常需要大量的人力投入，招标、拜访、出解决方案、商务谈判等等。
高接触的 SaaS 更多采用年度收费的模式。强销售决定了年收入的上限。因此，高接触的 SaaS 产品几乎是围绕销售团队的，市场营销的主要工作是为销售团队获得足够多且合格的销售线索；产品、开发更多的配合销售团队满足客户需求；客户成功团队接收后期服务、产品支持、关系维护以保证客户续费。
从我个人接触到的，低接触、高接触对于产品设计而言，在于主导权方面。
低接触会考虑更多的价值面（通用的最大化价值），从而会拒接没有未来（可能性和想象力）的单体诉求。
而高接触，更多来自客户传导给销售，销售传导给公司，公司传导给产品的业绩压力。所以，高接触一定是高单价，低单价的高接触在一定层面挣得是辛苦钱，无竞争力的劳动输出，而不是方案输出。
四、SaaS 产品指标（SaaS Product Metrics）
PMF（Product-market fit） 产品市场匹配
SaaS 产品的早期，更多的是验证产品与市场的匹配（Product-market fit，PMF），直白的说就是生产的产品是否具有市场价值，是否有人愿意花钱购买。
所以 PMF 是不断确认这三点的过程：
1、目标客户是谁
2、目标客户的需求（痛点、爽点、痒点）
3、提供的解决方案是否能挣到钱
PMF 通过早期付费客户来确定有利可图的细分市场。和他们不断交谈，收集反馈来迭代产品。
并根据付费客户特征，寻找客户共性，从而更紧密的围绕最佳客户打造产品、从而更明确的找到目标客户接触途径、从而更有效的设计市场营销宣传策略。
NPS（net promoter score） 净推荐值
通过 NPS 进行客户满意度调查，衡量客户体验，预测未来业务增长以及预防客户流失风险。
NPS 采用 10 分制，让客户进行打分。
打分者分类：
● 推荐者（dpromoter）：9-10 分，对服务非常满意，愿意持续使用并向他人推荐，从而推动产品增长
● 中立者（passive）：7-8 分，对服务满意，但忠诚度低不会主动对产品宣传，容易受竞争对手影响
● 贬低者（detractor）：0-6 分，对服务不满意，会对产品进行负面评价和传播，从而阻碍产品增长
NPS=(推荐者数/总样本数)×100%-(贬损者数/总样本数)×100%
例如，有 100 客户打了分，结果如下：
● 10 分：15 人
● 9 分：20 人
● 8 分：20 人
● 7 分：20 人
● 6 分：10 人
● 5 分： 10 人
● 4 分：5 人
忽略打 7-8 分的人数，9-10 分人数 35，6 分及以下 25 人，NPS=35%-25%=+10%
如果 NPS 是负值，那么业务收入可能将会减少，因为客户在不断流失。正值的 NPS，表明客户满意度高，未来具有可持续增长的潜力。
五、SaaS 业务指标（SaaS Sales Metrics）
单位经济收益：CAC：LTV
SaaS 产品的成功与 PMF 高度匹配之外，还需要一个切实可行的商业模式，即客户价值（LTV）大于获取成本（CAC），健康的增长意味有效平衡两者，从而确定这是一个有利可图的市场。
CAC（Customer Acquisition Cost）
获得客户的平均成本。
CAC= 销售和营销费用之和 ÷ 新增客户数量
LTV（Customer Lifetime Value）
客户生命周期内（从注册到流失）平均总价值。
LTV=（ARPA*毛利率%）÷ 客户流失率
ROI（Return on investment）
客户获取的投资回报率。
ROI=LTV：CAC
Months to recover CAC
CAC 通过 MRR 收回的平均月份。
Months to recover CAC=CAC÷（ARPA*毛利率%）
ARPA：每个帐户的平均收入，你的 MRR 除以客户数量，即所有客户的平均 MRR
毛利率=[（营收-成本）÷ 营收]×100%
David 在《SaaS Metrics 2.0–衡量和改进重要内容的指南》一文中指出，LTV：CAC ≥3，Months to recover CAC ≤12 月，通常被认为是良好的 SaaS 项目。同时也指出，很多健康 SaaS 在初期可能并不符合，但会在一段时间内通过改善业务逐渐接近这两条准则。
经常性收入：MRR 和 ARR
经常性收入（Recurring Revenue）是未来持续可获得的收入，就 SaaS 而言，经常性收入来自客户的订阅，具有稳定、可预测、高度确定的特点。
在 SaaS 业务中通常采用按月或按年合同：
● 主要按月合同及少量的年度合同，采用 MRR（Month Recurring Revenue 月度经常性收入）。MRR 用于衡量每月订阅收入，如果有一些年度订阅，除以 12，再分摊到每月来计算 MRR
● 按年合同及少量的多年合同 ，采用 ARR（Annual Recurring Revenue 年度经常性收入）。多年合同除以合同年限，再分摊到每年来计算 ARR
在 MRR/ARR 统计中，并不会计算一次性的收入。例如，定制功能费用。
经常性收入会不断推动这 SaaS 厂商的发展，也是验证产品是否具有可持续增长的指标。
流失（Churn）
SaaS 是订阅模式，在高留存率下，随着时间的推移，意味着更多的客户、更多的订阅，持续收入不断复合累积。所以，流失率对 SaaS 厂商是非常重要的指标。
在 SaaS 中有两种计算流失的角度：
● 客户流失（Customer Churn），取消订阅的客户数量
● 收入流失（MRR/ARR Churn），取消订阅的收入损失
那为什么会有两种计算方式？
例如，53KF 云客服的业务，是按照坐席收费，50 元/月。假如我们有 200 个客户，100 个大客户（每个大客户拥有 100 个坐席），100 个小客户（每个小客户拥有 10 个坐席）。
当月，我们流失了 10 个客户，那么月客户流失率为 5％。
如果，流失的客户中，有 8 个是大客户，2 个是小客户，那么 MRR 流失 45000 元，MRR 流失率为 7.45%。
如果，流失的客户中，有 2 个是大客户，8 个是小客户，那么 MRR 流失 14000 元，MRR 流失率为 2.55%。
所以，通过不同的计算方式，使得我们更加全面、准确的了解到业务中所发生的事情。
Customer Churn Rate
客户流失率，客户取消订阅的比率。
Customer Churn Rate= 期间流失客户数 ÷ 期初客户数
MRR Churn Rate
月度经常性收入流失率，通过降级、取消而损失的 MRR 比率
MRR Churn Rate= 期间流失 MRR ÷ 期初 MRR
Net MRR/ARR Churn
净 MRR/ARR 流失。
Net MRR/ARR＝期间新增 MRR/ARR 之和 - 期间流失和收缩 MRR/ARR 之和
Net MRR/ARR Churn Rate
净 MRR/ARR 流失率。
Net MRR/ARR Churn Rate=（期间流失和收缩 MRR/ARR 之和-期间新增 MRR/ARR 之和）÷ 期初 MRR/ARR
当收入增长超过流失的损失，在这种情况下，净 MRR/ARR 流失则为负值，称之为负流失（Negative Churn），表现在财务表上的就是收入的不断增长。
记住，在计算流失时，总是在特定的时间范围内，例如上月客户流失率是 5%。
六、SaaS 收入计算
确认收入（revenue recognition）
对于 SaaS 而言，确认收入是非常重要的财务知识，确认收入与合同金额、收款金额有很大的区别。
例如，按年收费的 SaaS 产品，年费 1200 元，那么：
● 合同金额是 1200 元
● 客户一次性支付年费，收款金额是 1200 元
● 在合同期间的每个月的确认收入则为 100 元。剩下的 1100 元则为递延收益
● 从企业资产负债表而言，剩下的 1100 元均为负债。因为服务还未完成，还需要投入 11 个月资源履行服务义务，甚至合同可能发生中止等情况，所以还不是确定的收入，需要通过后期的确认收入（损益表中的利润）来减少资产负债表上的负债
* 递延收益：指尚待确认的收入或收益。凡在期间内完成的服务所产生的收入，则为确认收入；反之，即使款项提前预收，但未在期间内完成服务，则不作为确认收入。
* 资产负债表：反映企业经营在一定时期内（月份、年度）财务状况（两个方面，一方资产、另一方负债和权益）的报表。
* 损益表：反映企业经营在一定时期内（月份、年度）利润（收入）或亏损（支出）的报表
总结
通过梳理总结，谈了谈 SaaS，这是在我当前知识体系范围内的总结，SaaS 是的庞大的体系，关乎个个层面：产品、营销、销售、客户成功、增长、定价、渠道等等。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
推荐使用 vue-wechat-title
vue-wechat-title作用
Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)
已测试APP
微信
QQ
支付宝
淘宝
安装
npm install vue-wechat-title --save
1
用法
1，在 main.js 中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
1
2
2，在路由文件 index.js 中给每个路由添加 title
// 挂载路由
const router = new Router({
mode: 'history',
routes:[
{
path: '/',
name: 'Index',
component: Index,
meta: {
title: '首页' // 标题设置
}
},
{
path: '/lists',
name: 'Lists',
component: Lists,
meta: {
title: '列表' // 标题设置
}
}
]
});
3，在 app.vue 中修改 router-view 组件
<router-view v-wechat-title='$route.meta.title'></router-view>
1
自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的
<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>
1
ok ！重启看看
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com