日常工作中，经常听到交互和视觉同学有着如下对话：
可以看到，无论交互还是视觉同学的提问，其实都是围绕「信息」表达的逻辑。视觉同学设计过程中，应该如何理解交互稿件，并进一步体现交互的层级逻辑？是否可以对交互稿的布局进行调整发挥？我们通过案例来一起看看。
目前，页面类设计一般分为运营型和平台型。
关注重点：「活动利益点」「模块内容顺序」「视觉发挥空间大」
活动页设计中，信息的层级表达相对简单，一般分为主氛围图-体现活动主题、内容展示区-直接转化、尾部兜底区-相关扩展。这类型需求，重点在理解交互稿中主题的表达、内容区的分类及重点元素体现。视觉设计师在该类型的设计中，发挥度是很大的。
关注重点：「层级结构」「浏览顺序」「视觉在信息逻辑之上发挥」
平台类设计项目，交互设计师通过页面框架、模块设计来表达产品/运营的策划思路，涉及内容及模块更多，且包含着复杂的逻辑关系。一个优秀的平台视觉设计师，应当是通过好的视觉表达，按照交互信息层级关系，将信息内容传递给用户。这里视觉同学要避免两个误区：完全按照交互框架和排布，只是纯粹填色；从「好看」的角度重新布局，忽略交互层级关系。
下图是美妆频道的一次改版，通过观察交互稿和视觉稿可以看到，这位视觉设计师在交互稿的基础上，采用了更灵活的视觉引导方式。这些改变是否有效传递了交互逻辑？视觉阶段的这些调整是否都合适呢？看完本文，你就能有一个清晰的答案了。
浏览顺序 元素表意
这是一个新品速递模块的设计方案。交互稿表达的信息是：这个区块是用来介绍新品的，首先希望用户知道模块属性是什么，然后让用户快速了解推荐商品是什么，及为什么值得买。视觉稿较好的传递了交互层级及信息表达，首先突出了栏目名称让用户能一眼看到，其次是商品及商品特性展示；而稿件中的栏目名称位置和样式则在视觉上做了自由的发挥。
小结：模块中各元素的浏览引导（眼睛浏览路径）需要严格按照交互逻辑，元素的表达和位置可以根据逻辑发挥。
下面这组案例，在信息层级上，视觉稿是否完整传递了交互逻辑？先自己思考一下吧~
模块比重 内容布局
交互层级来看，整个区域有2个模块「正在进行」和「品牌精选」，每个模块有4个等大的展示单元格。而视觉稿中，「正在进行」模块的单元格变成了两大两小。严格来说，这个调整是不符合交互逻辑的。
但是，视觉稿的输出效果明显更灵活，浏览层次更佳！那，能不能这么改呢？
这需要回到，为什么交互输出时，画成了等大样式。在交互环节，运营侧提出四个专题希望是相同层级，无优先级的差异。
这种情况下，视觉同学如果仍然坚持有层级差异的视觉感官更好，可以先和交互同学一起商量，从用户体验的角度来看，这个改变是否有严重影响，如果团队内部也都认为改动后的效果更佳，可以一起找到对应的运营同学，说明原因，建议他们进行调整；同时去了解这样的调整对业务方的业务表达是否有影响。
小结：视觉表达要关注信息模块的比重，视觉侧好的想法也要直接提出和交互及业务方讨论
上面这个案例也是关于模块比重的，最大的差异在于栏目名称及入口的调整。从不强调楼层名称变成楼层名称成为模块的视觉焦点，因涉及到模块比重，类似的改动也建议和交互设计师进行讨论。同样，该案例的改动，丰富了楼层样式，并通过标题模块强调了楼层的调性氛围，同时并未对用户阅读体验造成不好的影响，因此是个视觉提升交互表达的优秀案例。
对于同层级关系的单元格，我们也可以采用不同的操作方式，比如上面案例中，视觉环节使用了叠起的展示样式。相对于交互，优点在于增加了一种互动形式，而缺点则在于会对部分信息进行遮盖，不能直观呈现全部内容。这个案例的处理方式是，我们将两种方案的优劣告知运营方，运营方认为可以牺牲部分信息的呈现，而选择互动方式的不同呈现。
我们以TAB来举例，TAB形式体现的是并列关系的多个模块呈现，视觉设计师可以根据不同场景用不同视觉方案来呈现。
常规的视觉展示
场景化表达-日历
下面案例中，交互传达的是一周七天的食物推荐，在视觉阶段可以把TAB样式设计得更贴近日历，更贴合模块的主题表达。
场景化表达-餐桌
这个案例视觉侧在模块面积上进行扩大，影响到原首屏内展示内容的信息量。这种情况则需要与业务同学进行沟通，信息后置是否会影响他们在首屏信息的展示需求。一般活动类页面，首屏内容和页面长度的要求，相对宽松；如果是工具类/综合性展示页面，信息是否能在首屏出现，对页面点击和使用效率会有很大影响。
TAB的引导位置
下面案例中，因为TAB的位置发生了调整，用户的阅读顺序发生了变化。交互稿中，我们希望用户先看到TAB分类以了解推荐手机的不同纬度；而视觉稿中，优先让用户看到推荐商品，如果首轮推荐无兴趣，再通过TAB切换查看其它维度内容。
元素的不同呈现顺序会体现不同的交互逻辑。
下图中的推荐区模块，交互上的顺序是图→人物→具体商品描述，首先强调的是商品，其次是用户的评价；而视觉稿上的顺序是人物→图→具体商品描述，首先调的是评价的人，再说商品是什么。两种逻辑其实都符合「食鲜者说」的逻辑，但从属关系是不同的。这里的逻辑决策是，如果评价用户是知名度较高的，可以通过人物为食物加分，则我们选择视觉稿逻辑；而如果我们是靠商品图本身致胜，评论者只是辅助决策元素，则选择交互稿逻辑。
模块间的层级关系，可以通过去色来快速判断，是否符合交互浏览要求。去除颜色和元素对界面视觉优先级的影响，更聚焦逻辑本身。
对比下面案例，去色后可以更容易看到，优化后方案更加整体，视觉引导也更加顺畅。
交互稿中体现的逻辑，涉及到样式/位置调整的，我们应遵循原则：「在保证信息顺序、层级关系、信息占比逻辑正确的前提下，视觉可以进行专业的各种发挥」。
文章来源：优设
无论是2B产品，还是2C产品，用户系统都是基础。对于非互联网产品从业者，2C用户系统的场景和功能通过日常各类APP的使用，大家都非常熟悉。因此，笔者通过和2C产品的对比，谈谈2B SaaS产品的用户系统设计。
2C产品面向的用户是个人，用户系统的核心是获客，因此大多2C产品的用户系统设计重点在于方便用户注册、登录，能够建立精准的用户画像，从而达到流量变现的目标。
2B产品面向的用户是企业，用户系统的核心是组织、员工精细化管理，提升人效，从而实现节约成本的目标。
2C产品的注册主要用于个人用户注册场景，重点在于提供多种渠道的注册方式，如账号、手机、第三方社交应用（微信、微博等），其核心目标是既能方便用户注册，又能多渠道多平台账号打通。
2B产品的注册分为两部分：企业管理员代表企业注册和企业员工注册。
2B平台型SaaS产品，和2C最大的区别在于产品需要用户付费。因此，平台方为企业（平台租户）提供了注册入口，一方面需要方便租户能够通过其他渠道快速注册试用产品，一方面需要验证企业相关信息，识别该用户确实为潜在用户。
1）企业注册：
当企业管理员代表企业注册时，需要提供的注册信息：管理员昵称、手机号、邮箱、企业工商信息（名称、组织机构代码、地址、法人信息等）。
其中工商信息的完整度，不同的产品要求不一样，需要根据具体产品而定。如果方便注册拉新，尽量减少工商信息填写要求，如果产品安全性要求较高，可以尽量要求工商信息填写完整。
2）企业工商信息认证：
这部分并非强需求场景，取决于产品的安全性要求。一般安全性要求较高的平台产品，会在企业注册后，进入到企业工商信息认证环节。此环节要么是平台管理员人工审核，要么通过第三方认证验证企业工商信息是否合规。企业完成认证后，即可试用产品。
如非安全性要求较高的产品，可以直接跳过该环节，租户通过注册页信息填写完整后既注册成功。
3）企业员工注册：
登录场景比较容易理解，目前B端产品相较C端产品仍然比较传统，多采用邮箱/手机进行登录。
未来也希望可以实现，B端产品能够和更多C端产品平台打通，可通过通用的第三方账号进行登录，实现业务与社交的连接。
用户画像是2C产品至关重要的内容，只有精准的用户画像，才能更精准的服务好用户。无论是电商，还是资讯平台，基于用户画像的精准营销投放才是产品的核心。
2B的产品很少有讲用户画像相关的内容，事实上对于2B产品而言，用户画像也至关重要。
笔者目前从事CRM产品相关工作，CRM核心要解决的问题就是帮助你的客户获客，那么如何去建立客户的企业标签，去按照企业标签属性，借助大数据分析，帮你的客户找到他的客户群，是笔者近期在研究的课题。
2C的产品从本质上来讲不存在组织结构，个人用户即为产品主体，但会存在群组/社群的概念。
2B产品的应用主体是企业，而组织结构是企业运营管理的必要手段和方式。因此组织结构管理是用户系统的重要组成部分。
1）建立组织结构
组织的单元是部门，因此管理员需要能够按照企业组织结构建立、调整（编辑、合并）、删除部门。
2）部门树结构
部门作为组织结构的单元，只是组织结构的分子，而要形成组织，就要按照企业的业务形态要求形成一定的层级体系。因此部门不仅仅只是简单的信息描述，还需要有层级描述，这就需要我们在建立部门时按照层级结构建立部门，定义清楚所建立的部门是上级部门、下级部门。
3）通讯录展示
管理员通过后台创建完组织结构后，企业员工可通过前台查询按照部门结构展示的通讯录。
角色管理是B端产品的特有功能，企业员工按其所负责的业务模块划分不同的岗位职责。
由于企业数据具有较高的安全性和私密性要求，按照岗位职责的不同，不同岗位的员工对于业务数据的操作/查看权限不同。
因此，我们设计了角色管理，该角色并非严格意义上的岗位职能角色，而为了区分不同的员工不同的系统权限所设计的系统角色，这就是RBAC设计。
1）建立角色
建立角色的主要目标即为建立一个用户权限组，该权限组内的用户具有相同的权限。
2）分配角色权限
基于角色分配系统权限，以实现不同的角色下的用户拥有不同的权限。
员工管理是B端产品的特有功能，员工是企业组织的重要组成部分，员工也是产品真正的终端用户。
B端产品从本质上是要能够帮助企业员工提升工作效率，提高企业人效，以实现企业管理者降低运营成本的目标。
1）新建员工
前面提到的用户注册即为新建员工的过程。包括被动邀请和主动注册两种形态，主要目标是将员工信息注册至系统，并建立员工和企业的关联关系。
2）建立员工汇报关系结构
为了实现精细化管理，企业内部一般按照组织结构设定员工的汇报关系，因此从CEO到基层员工会形成组织关系树，该结构可以和组织结构完全一一对应，即该部门下的所有员工均汇报给部门负责人，但也有部门内部分不同的小组，不同的人汇报给不同的小组负责人。
因此汇报关系和组织结构关系有一定关联，但并不是完全一一对应，所以我们需要设计员工汇报关系功能。
3）员工离职设定
为了保证企业数据的安全，员工离职后，需冻结员工账号，离职员工将不能以该企业员工的身份登录系统，以确保企业数据的安全性。
至此，2B用户系统的功能基本设计完整，其重难点在于组织结构、权限控制，需要重点关注。
文章来源：人人都是产品经理
当我们在谈 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 是的庞大的体系，关乎个个层面：产品、营销、销售、客户成功、增长、定价、渠道等等。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在电子商务界，你的网站设计就是一张在线名片。它能帮助你从拥挤不堪的海量信息中脱颖而出，同时也反映出你的可信度。这是你的用户通过初次访问来了解你品牌的地方。如果他们没有找到自己喜欢的，几乎80%的人都会选择离开你的网站。
这就是为什么在构建和设计网站时，永远不要低估用户满意度带来的影响。
接下来要讲的是如何设计一个无可挑剔的、以用户为中心的网站，来使你的网站转化率飞速上涨。
如果不能引导用户完成最终购买，那么设计再精美的网站都是毫无意义的。用户没有选择在你这里购买的一个主要原因是复杂的网站导航。记住，用户不希望无休止的点击和滑动鼠标后才能找到他们想要的产品。如果他们发现自己正将时间浪费在不必要的操作上，就会弃你而去，到你的竞争对手那里。
这也是你想要阻止发生的事情。
人们常说不能以貌取人，但我们却一直都在这么做。在电商的世界中，你的主页就是颜值。
研究表明，只需0.05秒，一个用户就能判断出你的网站是否能够满足他们的需求。而且，如果你不能让他们相信你的网站是可靠的、安全的或足够有价值的，他们就会在眨眼之间抛弃你的网站。
那么，一个令人惊艳的主页包含哪些要素呢?
主页是用来吸引用户并与他们建立关系的。但当你想把一位访客变成付费用户时，体现产品详情页重要价值的时刻就到了。它们需要为用户深度展示你的产品，激发他们的兴趣，并让他们产生点击“立即购买”按钮的欲望。那么，让我们来一起看看产品详情页中最重要的元素都有哪些吧。
如果有用户不确定是否要从你这里购买产品，那他很可能会在深思熟虑前就离开你的网站。你需要向他们证明这是一个错误的选择，而这正是“常见问题“的切入点。
创建一个页面去回答用户最常问的问题，会让用户感到高兴，将他们的购买焦虑降到，也能够更快引导他们完成购买。这就是为什么，你需要积极地构建FAQ页面，提供可操作和有用的技巧，甚至通过截图和图片的形式来让答案容易被更多人理解。
一个可靠的FAQ页面还可以提升SEO（搜索引擎排名优化），特别是在语音搜索SEO和本地化SEO盛行的时代。数据显示，22%的搜索者会使用语音搜索在网上查找本地企业。因此，综合考虑电商SEO实践与本地化SEO服务，对你的电商网站至关重要。
这就是FAQ页发挥首要作用的地方。也就是说，在不损害用户体验的情况下，它使你有机会针对搜索时高频出现，及具有地区特征的关键词，来优化FAQ页面的问题和答案。此外，这也有助于提升你的网站在语音搜索中的排名，因为谷歌经常使用FAQ页面作为语音搜索结果。
你已经通过种种努力让令人惊艳的主页赢得了用户的信任，用产品详情页页的优质文案提升了他们对产品的兴趣，现在是时候激发他们去完成最后的购买流程了。你千万不能搞砸了这个关键环节，因为购买流程是购物流程闭环的最后一步。
对于电商而言，用户体验至关重要。她会为你积累忠实的老用户，激励新访客转换为付费用户，并有助于他们向亲朋好友传播关于你的正面口碑。Jeff Bezos对此有很好的诠释：
“如果你的确建立了很好的体验，用户就会口口相传。口碑的力量是无比强大的。”
我希望以上的这些秘诀将可以成为你的坚实基础，助力你在在电商领域取得成功。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
B端产品设计的6大挑战
翻译： alina Wong 审校：华姐 | UXRen翻译组 #297 译文
在VWO工作初期，我遇到的许多情况促使我想弄明白：企业类应用（B2B，后文中统称为B端应用）真的和消费类应用（B2C）不一样吗？对于设计师和设计流程来说，这种区别有多重要？
这篇文章是我在过去几年里的一些经验梳理，希望能够帮助那些想去或者已经在B端团队工作的设计师们。
维基百科中的定义：B端应用是一种用来满足企业而非个人用户需求的计算机软件系统。
这是一些大家可能用过或者见过的B端应用。
在现代社会，大多数B端应用都是复杂的任务关键型应用，具有可拓展、分布式和模块化等特征。B端应用对大量复杂的数据进行展示、处理和存储，并利用这些数据实现对业务流程的支撑及其自动化。
B端工具可以帮助构件你的产品，从而帮助企业和员工更好地完成工作。
注：虽然B2B和B端应用在定义上略有不同，在目前的软件生态中，这些差别几乎无关紧要，所以本文将它们视为一类。
为B端设计并无特殊之处，优秀设计的一切准则，在这里都适用。不过，设计B2B产品和B2C产品，确实存在一些差别。
试想一下，汽车制造vs.商用飞机制造。它们都是非凡的工业设计，把人们从A点运输到B点。显而易见，它们有很多的不同之处，比如使用场景、制造时间、测试&安全规范、用户预期、购买以及所有权。所有这些不同之处都会影响设计及流程。
同样对于B2B应用来说，不同之处在于其独特挑战和应对方法。
声明：任何一款软件设计都会面临以下一些挑战，但为B端设计时，这些挑战更加突出。
由于数据多态、可视化选项多、管理操作、多用户协作以及和其他软件集成等诸多因素，B2B应用的复杂度普遍高于B2C应用。为了满足一个需求而做出的一项设计决策，往往会影响其他许多需求，而其方式有时会难以预测。一项看似简单的功能添加，都要进行全面检查，考虑到各种极端情况。
Atlassian公司的Jira软件界面：功能复杂的软件案例。
解决方法：
解决复杂性的方法是什么？
当然是简化。不要将这误认为是简化界面，或者现下流行的极简UI。这是通过恰当的规划和流程达到的简化。无论项目周期多么紧张，都必须在设计开始之前投入时间思考，将收集到的需求和规范进行整理。实际上，这些是设计中非常重要的工作。
当你对设计方案确认无误时，会直接进入Sketch、Figma或者PS阶段，但这往往为时过早。抽点时间来厘清你将要设计的产品的背景和含义。通过研究和规划，找出所有的可能性，处理所有的极端情况。确保准备万无一失时，再进入界面设计阶段。
“如果我有60分钟来砍断一棵树，我会花40分钟先磨好斧子， 20分钟砍倒它。”——亚拉伯罕•林肯
恰当的规划和流程会在长期运行中展露优势，带来流畅无阻的产品体验。
B端用户的心理和行为模式与B2C的用户的截然不同。B端用户除了要完成本职工作之外，还要兼顾在组织内的其他方面，如职业发展，职业学习，职业成功。为在职人士设计时，需要充分了解清楚他们的工作背景、流程、环境、期望、问题以及当前的解决方案。
如何做：
设计B端应用时，理解用户需求非常重要。不仅要了解产品相关的需求，还要了解用户工作和职业相关的需求。与最终用户深入交流，研究他们的领域，尝试用他们当前的方法，这些都非常有助于培养对用户的同理心。
此外，用户太过于习惯现有的工作流程，这导致他们很难想像自己真正想要什么。他们可能会告诉你功能和选项，但却无法提供产品创新之道。
用户可能认为自己想要的只是更多的功能。
B端产品设计团队的设计指导原则，是知道用户目前遇到的困难是什么，然后设计出方案来解决这些困难。一旦真正理解用户的长期目标是什么，设计师就可以有很多发挥的空间了。
“用户购买产品是希望变成更好的自己。”—— JTBD理论
与其关注用户说什么，不如关注他们实际做什么，并以此为创新的基点，构建精益原型，并与用户一起进行测试。
一般来说，B端用户习惯且满意现有的工作流程，并没有切换到另一种产品的需要。而且即便他们想换一个，也要层层审批。更不要说，现有数据的迁移对于公司和员工来说都是非常难的事情。所以同大众消费者应用不同，B端应用的切换成本显然要高得多。
解决方法：
说服企业换用你的软件的两大方法：
第二点才是设计中真正闪光之处。生产效率、工作流程是企业最关注的事情。仔细研究它们现在的方案，找到需要提升的地方。考虑如何设计出更快的工作流程，如何提升效率并降低成本。在这几方面上创新，往往会带来可以说服企业作出改变的解决方案。
“衡量创新的唯一标准，就是看它是否改变了人们的行为”——Stewart Butterfield, Slack联合创始人
不断寻找机会，改变传统的方法，使之更有效，更。
对于B端产品，新增功能几乎总是比提升现有功能的体验更优先。在产品启动时，通常会有专门的设计冲刺阶段。而一旦产品发布出去，用户需求就开始涌入进来。付费客户会不断要求增加新的功能，产品团队也制定繁忙的开发计划。在这种情况下，设计师尤其很难说服有关人士投入时间和资源来提升设计和用户体验。
避免方法：
尝试从这些相关人士的角度看待问题。他们经常认为，任何一段开发时间，无论是一周还是一个月，如果没有用来开发新功能就基本等于舍弃了潜在的收入。这时，让他们明白优化产品所带来的好处就很重要了，要让他们懂得优化远比增加新功能可以带来更多的收入。重点讲讲成功故事。直接和高管聊这件事，让他们接受这种观念。优化设计总是需要仔细分析痛点，检验新的想法，而这些都需要时间和创新。
“电灯不是通过不断优化蜡烛发明出来的。”—奥伦·哈拉里（Oren Harari）
一旦你获得了公司的信任，就要在有限的时间内取得一些小胜利，并且一直努力度量其影响。逐步建立起公司对设计团队的信心，继续尝试更大的改进方案。
让产品和开发团队成员承诺确保优秀的用户体验，并帮助他们主认识到这不仅仅是设计团队的任务。
来源：B端用户体验行业报告 2017-2018
最近，一项对3000多名B端产品设计师的调查显示，对B端设计团队来说，最大的挑战是提高产品的用户体验一致性。不同于消费类应用，B2B产品通常有更长的产品周期且异步运行，很多时候都是分布式团队合作设计。
每一名设计师都面对着与其他团队类似的问题，很容易导致产品设计不一致，比如更改设计组件、更新样式，甚至像颜色这样的细节都会产生不同。这些问题随着团队的扩大或者产品的体量增加而变得更加严重。
解决方法：
许多公司开始建立设计规范来保持产品的一致性和可拓展性。设计规范包含可复用的组件集合、清晰的设计指导，可以帮助构建任何数量的产品。设计规范通常包括：
当B端设计团队被问到是否建立了设计规范时，约55%的团队回答是或正在创建中。这是很好的现象。需要指出的是，设计规范永远不会100%完成，它着眼于长期，会随着时间的推移不断更新。
“设计每个元素时都应该考虑到其是否易于制作和修复。” —Leo Fender
设计规范对于保证用户体验一致性具有里程碑意义。
以下是一些B端设计规范，可以给你一些灵感：Salesforce的Lightning设计规范, Intuit的Harmony设计规范。
不少设计师在做过一段时间B端应用设计后，发现它无聊单调。许多来自咨询公司或者有B2C经验的设计师觉得B端设计缺乏激情和多样性。做那种酷炫的微交互和动画（就是会发在dribbble上那种）的机会并常有。这样，工作就变得乏味无趣，设计师们感受不到成就感，提不起劲来。
避免方法：
B端应用的用户体验旨在帮助用户更好地完成工作。设计一个迷人的界面来吸引用户，（尽管并无害处，却）总是在被排在低优先级。标准化的、可预知的、所见即所得的用户界面，最适合目标用户。
我们的目标是让用户发出“哇！”的感叹，不是因为绚丽的界面，而是因为产品能够帮助他地完成工作。
组建B端应用设计团队时，选择目的和动机一致的设计师最为关键。设计师的动机，应该大量来自于解决复杂的问题，看到自己的设计如何帮助用户完成他们的工作。
所以，在设计师加入团队之前，评估他们的想法并设定正确的期望是非常必要的。
企业本身是在逐步发展的。B端应用不再是难用、无聊的产品，用户期望B端用户像消费类应用一样有着优秀的体验。他们喜欢漂亮的界面，不希望在使用前看说明文档。下一代技术，例如VR、AI和声音已经进入了我们的生活，也很快会应用到工作中。对B端应用来说，这令人兴奋，而设计师所能做的，则是无限的。
做B端应用设计的三个指导原则：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Fucking Young(简称 FY) 是一家专注于男性半球的年轻美学，我们自由使用和支配模特及艺术家合作，从而帮助自己与合作方达到合理的业务需求，建立一个拥有创造力的社区，赞助和发布这些惊艳的作品在我们的官网甚至手机产品上。带来的作品有FY品牌官网与移动端设计，展示部分界面与交互动效，Gif输出存在色差，实际情况以高保真视觉界面为准。
文章来源：UI中国
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
明修栈道C和暗渡陈仓B1. 初识B端产品和C端产品
C端 Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端 Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
2. B端和C端产品的区别
在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。
从使用者的角度来说：
从开发的角度来说：
3. 后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的，常见的类型包括：
1. 初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，则苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多等问题。
后台产品不同于普通用户所使用的 APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app，再给他几个其他的音乐 APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业，甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有「保密协议」的使命感，所谓「隔行如隔山」，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
2. 后台UI设计工作流程
后台 UI 设计的工作，大体分为三个部分：需求分析、设计执行、数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照 PM 给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做 UI 视觉方面的设计，而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI 设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
3. 制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
以下数值为参考，请结合特定产品灵活运用。
统一尺寸
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架
页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定
一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。
相对间隔
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
5. 按钮
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为 10px。
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。
单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。
开关按钮外框 40*20px，内部圆形 16*16px。
表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高
表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。
行数
表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽
列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。
列数
表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式
表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。
详情入口
表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框
弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框
侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏
为某些特定数据提供数据加载等待时的占位图形组合。
全局提示
建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。
警告提示
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
1. 设计前端一家亲
2. 书籍推荐
3. 文章和作品推荐
不管是做 C 端产品还是 B 端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
