设计规范的共性

不同的规范虽然内容差别很大，但是对比一下它们的目录，却又很多相似之处，通常包含：布局、组件、配色、图标这四部分。

组件里的分类无非是导航、菜单、表单、列表、表格、按钮、弹出框诸如此类，我就不一一列出了。

设计规范有哪几类？

总体看来，我发现这三类设计规范出现概率很高：

1、给产品经理看的

IOS和早些年的Android（现在已经统一改用Material Design）设计规范就属于给产品经理看的，里面写的东西大多围绕如何选择大的方向、哪种处理方式更加合理展开的，界面细节却没有详细介绍。

这种规范适合用来做演讲，内容不多，都很有道理，参杂这很多创新的功能。

而拿着它做设计却很痛苦，因为它不告诉你如何才能达到理念中所勾勒的那个目标，图标、尺寸、陪色、字体……很多东西都不明确。

2、给设计师看的

这种规范通常的好处是内容很丰富、图例很多、建议比较详细，能够让设计师以此为基础发挥自己的创造力。

Material Design就属于这一类，而且里面很多1:1的范例可以直接拿来做参考这点非常感人。

但这种规范也有不足之处。一是它缺乏针对具体场景的规则，常常把所有可能用到的元素都拿出来一一细说，然而却不告诉你应该在什么场合使用什么。

二是容易理想化，因为做这种规范的人通常是纯粹的设计师，所以里面很多设计想法未必有足够的可实现性，或是一些创意未必经得过实践的考验。

Material Design里面很多看起来简单的设计其实是很难实现的，例如用分辨率敏感的dp取代像素单位其实大部分情况下很难实现。

Material Design的文本框中，说明文字会变换位置和大小，排多了看起来会很乱。

3、给程序员看的

这类不太关心布局、交互、配色等细节，而是告诉读者他们能做出什么东西，怎么做出那些东西。

这类规范笔我原本预想的要多很多，其中令我印象最深刻的是Windows Phone的设计规范。

程序员的队友都称赞Windows的设计规范有多好多好，只有我觉得用起来无比痛苦。

现在想来，Windows Phone的设计规范虽然称之为设计规范，区别于Windows Phone的开发规范，但它完全是个教程序员如何实现各种界面的指南。

产品经理可能还可以用它来看看页面类型，对设计师来说却没有太大帮助。

这种规范对于不需要设计师的场景还是非常有帮助的，比较相比前两种，这种的可实现性非常高。

设计规范的选取

我认为上文提过的三种设计规范都很重要，且适用于不同的场合。

第一类给产品经理看的规范适合设计初期，确定理念、报告思路阶段。

第二类给设计师看的规范适合在设计定型阶段，这个时候界面具体长什么样已经确定了，但是未来的实施过程还会带来一些不确定因素。

第三类规范适用于开发阶段，根据界面来规范代码，能够大大提升前段的开发效率。

设计规范的常见遗漏

由于第一类规范的内容要求不多，所以这里的遗漏主要针对后面两类。

1、文本格式

设计师常过分专注于画图，而忘记了文字也应该有所规范。例如，日期可能的格式有很多。

例如“YYYY年MM月DD日”、“YYYY年M月D日”、“YYYY/MM/DD”等等。

再比如说单位，是用“大小：100M”、“大小：100兆”还是“大小（M）：100”呢？

这些文本格式定义起来并不花时间，可是如果没有规范的话，可能同一个东西在每个页面的展示方式都不一样，对用户来说也挺烦的。

2、特殊状态

做设计和做规范的区别是，做设计时，只有在知道某个东西有某个状态时，才会去设计那个状态；

做规范时，通常要假定所有数据和操作都有状态，不同东西在不同地方的同类状态最好能够统一。

所有操作都可能失效，不管是按钮、链接、输入框、下拉菜单……什么情况在失效时显示失效状态，什么时候完全隐藏该操作，这些都是可以统一考虑设计的东西。

所有的操作都可能出错，尤其是输入框的出错率极高。如果出错了，如何告诉用户哪里错了？如何纠正？由此还可以联想到，如何在一开始就避免用户犯错？

所有摆放数据的地方都有可能没有内容，也许是列表为空，也许是字段为空。这种情况该如何明确又美观地告诉用户这里没有内容不是网络问题也不是系统问题？

△ 页面没有内容的显示效果

所有内容都有可能出现异常，网络不稳定、格式不支持、系统出错等。这种状况如何明确又美观地告诉用户可能是哪里出现问题，如何补救？

成功也需要有成功的状态，有些时候页面不止一项任务，第一项成功了，第二项失败了，用户走到第三项时不一定还记得第一项是成功的还是失败的。

3、多级多选和过量

一个灵活的界面规范能够应对大部分的内容变化。例如导航和菜单的项目数量和级数通常是不确定的，下拉选框也不一定只能勾选一项内容。

更灵活的情况还有，一篇文章可能长达数十屏，这时该自动识别文章内的标题并生成目录，还是分页展示？

4、使用指南

使用指南是设计过程中通常被拖到最后才想起来的东西，在规范里也常被忽视。其中最重要的是用户首次使用时看到的操作指南。

这种操作指南可能不只在首页出现，并且未来可能随着设计的变更而变更，所以这种首次使用的操作指南是很有必要做成规范的。

△ 首次使用的操作指南

此外，使用过程中，在关键时候出现的操作提示也可以有规范。例如用户进入一个新功能时，可能会出现该功能的介绍。

5、尺寸适配

响应式界面已经被说了这么多年了，而被明确放在规范里的，除了Material Design之外还真是很难找到了。

如果你想了解响应式界面，可以看我之前的文章《设计响应式界面该清楚哪些》。

响应式界面有很多分类和实现方式，不论是视觉、交互还是前段都有所涉及，每个页面和元素都可能根据实际情况需要特殊处理，这也是为什么响应式设计很难定制规范。

△ 响应式界面：如果是页面是容器，内容就像水一样

除了整个页面的适配之外，小的组件也最好是可能变化尺寸的。例如同一张图表，可能被放在一个很空旷的页面，也有可能被放在一个很拥挤的页面。

需要调整尺寸时，哪些可以缩放哪些不能缩放，对其的中心是什么……这些如果能够明确，设计将会变得越来越像拼图。

除了整个页面的适配之外，小的组件也最好是可以自动调整尺寸。例如同一张图表可能被放在一个很空旷的页面，也有可能被放在一个很拥挤的页面。

组件需要调整尺寸时，哪些可以缩放哪些不能缩放，对其的中心是什么……这些如果能够明确，设计将会变得越来越像拼图。

6、动效

动效也火了很久了，但是似乎还是停留于表面，缺少一套可依赖的标准。动效师并不好当，既要有超高的编码能力，又要有敏感的美学神经。

也许就是因为这么困难，才导致大部分设计规范即便包含动效这一目录，里面填充的内容也非常模糊不清。

7、音效

大部分应用是没有音效的，因为音效很容易让人厌烦，而且节奏不好把控。但是对于音乐、视频等媒体应用，音效的发挥空间却很大，至今尚未开发。

撇开这些不谈，如果有音效，何时使用何种、多大音量、时长多少、震动模式（手机）时需不需要震动反馈，很多东西都可以考虑。

8、手势

和键盘的快捷键一样，偏爱触屏手势的也大有人在，而且手势也能让产品更加独特。如果允许使用手势，这部分也可以有所规范。

9、国际化

如果界面上的语言种类不止一种，那么如果文字转换后过长或过短怎么办？用户在看不懂当前语言的情况下如何切换语言？

不同的语言该选择什么字体才不至于太难看（例如中文的默认字体通常是宋体）？

10、小众人群

虽然我们最关心的还是主流用户，但是很多小众人群组合起来也是可以构成一定分量的。例如，触屏应用能不能给左手使用者舒适的体验？

桌面应用能不能够让没有鼠标或是没有键盘的人使用？色盲和色弱能区分界面上的色块？视力较差的人能不能放大字。

希望以上内容对你学习UI设计有帮助，觉得可以请转发支持一下，持续分享更多UI设计优秀文章。

本文将致力于称为情绪板的技术。让我们来看看情绪板是什么，以及他们在设计师的工作流程中是如何帮助的。enjoy~

想象一下你努力工作，花了很多时间来创建一个详细的原型，然后一个客户拒绝它甚至不接近他想要的。听起来很熟悉，不是吗？至少每一个设计师都经历过这样一个不愉快的局面。也许现在每个人都希望得到一些相关的建议，如何避免这种情况，但真正说没有一个完美的决定。

然而，有几种方法有助于降低客户拒绝的风险，并节省设计师的时间和勇气。今天的文章致力于称为情绪板的技术。让我们来看看情绪板是什么，以及他们在设计师的工作流程中是如何帮助的。

什么是情绪板？

情绪板技术不仅在设计领域流行，而且在许多创造性的专业人员中流行。情绪板是确实的板（数字或材料），从照片到各种肌理，人们填充不同种类的东西以至于能将想法和概念形象化。

与线框和原型不同，情绪板不显示未来项目的详细图片。它们意在传递正确的情绪，并带来产品期望的情感。

情绪板是一个有用的工具，帮助设计师有效地与客户和团队成员合作。纸板可以在一个紧凑的时间框架内轻松地被创建，并把抽象的想法变成现实。这样，设计师可以有效地与他人分享他们的想法，因为视觉材料总是比流畅的说法更好。

如何创建情绪板？

情绪板是一个很好的方法来实验调色板，字体和风格，以及规划一个项目的视觉层次。每个人都自己决定在情绪板中包含哪些组成部分。UI/UX设计师通常使用各种样本以至于可以来描述界面元素的特征。让我们来看看情绪板常见的几种类型。

自由拼贴

设计师经常收集免费高清的图片，方便他们在项目或其他地方使用这些素材。这些收集品可能有助于情绪板的创作。将美丽的照片组成的自由拼贴是传递设计理念的一种有效方式。此外，拼贴可以用插图，字体和颜色案例来构成。

创建这种类型的情绪板是最快的，也是最容易的。但是，如果客户比较关注细节，他们可能并不会对将来项目中的这些拼贴感兴趣。

参考收集

灵感来源和想法可视化的另一种方法是找高质量的参考。网上有很多资源，如Behance和Dribble，在那里设计师可以通过免费浏览的方式获取灵感和还有一些实际项目的示例。由一个相同风格或任何其他特性联合起来的设计作品可以很容易地说明一个新项目的想法。此外，这样的情绪板可以帮助客户有效地理解一个概念，因为他们可以看到类似的参考，并能够大致想象出他们的产品会是什么样子。

模版画板

这些情绪画板更像是原型和线框图。他们的目标是展示产品的结构和视觉层次。不同之处在于模版画板上的UI元素没有线框图中的原型或示意图那么详细。把随机的插图和照片来当做界面的构成元素，并以此来展示（数字）产品的布局。此外，可以用这种方式选择图像，从而更容易的确认合适的配色。这种方法比原型更快，因为它不需要细节。

为什么UI/ UX设计师应该创建情绪画板？

我们中的许多人可能注意到，在设计工作流程中，线框和圆形总是被描述为基本阶段，而很少人提到情绪画板。有些人认为他们是在浪费时间，或是认为这只是一种“娱乐”。经管如此，仍然有很多人把画板作为每个创意过程的一部分。但是他们为什么要选择这项技术呢？在这里，我们收集了设计师的原因清单。

1.节省时间和精力

情绪画板的第一个且很大的有点是它不需要花太多的时间就能完成。这意味着，在几小时或者更少时间内，设计师就可以创建一个视觉指南，为客户提出一个概念。情绪画板可以很容易地编辑，这样既省时又省力。

这样的视觉指南是一个很好的基础，可以快速的跳转到下一个阶段——原型阶段。此外，如果客户对结果不满意且想要一个新方案，设计师也不会变得神经质，因为他们不用花一整天的时间来创建一个详细的演示。

2. 获取灵感

当然，设计师不能总是依赖灵感，因为他们有工作要做，然而，如果创造者收到启发，事情就能更有效的进行。情绪画板是一个寻找创意和热情的好方法。美丽的照片和插图有助于找到正确的情绪和风格。此外，如果可能，你可以试着通过你周围的东西来创建一个情绪画板当做素材使用。据说手工对创造性思维有很大的影响。所以为何不试一试呢？

3. 找到一个对的颜色配色板

一个拼贴内可以包含照片、插画和颜色形成布置引人入胜的样品。在一个板上混合不同颜色的图片，即使UI元素还没有准备好，设计者也可以用调色板进行实验。

4. 加强与客户的沟通

当产品处于抽象概念阶段时，设计师和客户有时很难在讨论时相互理解。例如，双方可以以不同的方式看到某种风格，从而引起争论。这就是为什么使用一些视觉参考如情绪板总是一个好主意

5. 少说话，多展示

继续上面的观点，应该说任何长的报告都不能比视觉呈现更好地解释你的计划和想法。在客户的脑海中，文字无法成形，但视觉材料是一个可靠的指导，帮助客户深入深入细节并正确理解你的想法。

在早期阶段说明你的想法，这样客户可以看到你的计划以及他们的产品是如何成形的。

6. 为设计找到一种风格

如果一个创意团队没有收到客户关于设计风格的指示，任务就落在设计师的肩上。要了解一种或另一种样式如何工作，不必为它们中的每一种构建详细的原型。添加到情绪板不同的纹理，实验类型的插图，测试字体，并改变颜色。用情绪板来尝试选项比用一个接一个地改变原型更快、更方便。

7. 让客户参与流程

获得客户信任的方法之一是让他们觉得自己深入参与了一个项目。因此，在这个阶段，如果他们愿意，他们可以积极参与风格和样本的选择。在非设计师的情况下，做模型是一种很简单的技巧。

可以建议客户对照片和图片进行拼贴，如果不是新客户，也可以提供参考。通过这种方式，设计师可以轻松地了解客户的品味和偏好，并了解他们对项目的期望。

数字设计项目的情绪板的例子

为了更实际地介绍这个问题，我们想向您展示由Tubik设计师Dima Panchenko编写的用于用户界面设计项目的扩展情绪板集。他还做了一些常规笔记向客户展示了情绪板，这对沟通的过程和选择了项目的概念有积极的影响。

1. 用于设置客户对屏幕总体风格概念的偏好的情绪板

2. 情绪板呈现出项目需求所对应的风格上的眼光

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

做产品方案的时候，我们经常会走进死胡同或者跑错路，最后不论是开发还是市场，对结果都不满意，产品自然就成了背锅侠！但是往往我们出方案的时候，多想一些问题，或许结果就不一样，跟新人交流的时候，发现一些能力需要可以单独训练，有意识的去理解一些东西，长期积累就会有自己的一套解决问题的思路。

1. 辨别真伪的能力

辨别真伪也就是老生常谈的真伪需求的能力，在产品经理的行业里，经常会进行需求的评审，需求的界定，看这个需求是否是真的有效

举个例子

行业：外卖行业

案例：打包费审核的功能

功能出发点：解决商家乱设打包费的需求

解读：如果从这个角度来讲，打包费审核完全没必要，原因有

• 未必所有的商家都乱设打包费，只是个别现象
• 及时设置了打包费审核，后台审核了，也没办法解决，除非后台做强制性的更改或下架商品的功能
• 打包费是商家自主行为，如果商家恶意设置打包费，是给自己添堵
• 如果真想解决此问题，在商家上传商品的时候设置打包费的选项，一个餐品打包费最多是多少
• 或许极个别的商家的打包费真的会比较高，可以在商家管理后台做好打包费配置即可，从源头控制

很显然，要在后台做一个打包费审核的功能，还需要让人专门处理此业务，对系统来说，是降低效率又不见得有效果的，所以，界定为伪需求。那么既然存在这样的问题，可替代方案如下：

1. 商家添加商品时打包费又两个选择【收打包费】【不收打包费】，打包费为行业标准，1元/份餐品；
2. 对于大型的打包盒，比如说探鱼这些商家，打包费可以开放设置（大型连锁或者知名品牌可以认定为不需要通过打包盒来赚取利润）。

辨别真伪的能力不仅仅体现在能辨别出来，更多的是能够用更灵活的方式来解决来自运营、消费者产生的问题，且不增加过多的额外工作。

2. 找到合适定位的能力

合适定位的能力，这个说的有点虚，用通俗的话来讲，就是找个抄的对象。在国内想要做一个App有大量的抄袭模仿对象，各大知名厂商已经做了很多的研究，剩下的就是模仿和创新。能不能找到合适的模块去进行创新，这个就比较重要。

案例1：外卖行业，推荐商家

功能出发点：外卖行业的推荐商家，很多事按照细分的行业来做的，比如说美团跟饿了么的【必吃菜品】【品质联盟】这些，但是对消费者来说，这真的是我想要的选择么？

解读：从消费者的心理出发，我去找吃的，可能出于几点

• 找新鲜：看看这附近有什么新鲜的店铺开业或者新的口味，外卖一个月都是那几家，早就腻了
• 找实惠：外卖分量不够，10块钱管饱的那种最好
• 速度快：能告诉我最快的是哪家么？

其次还有可能

• 这两天身体不舒服，想吃点口味淡的
• 我是湖南湖北人，我想吃点重口味的
• ……

因此，从这类具有标示性的标签入手，会更有效果。此类功能类似于一点点的餐牌设计以及lofter的标签设计，将商家分配不同的标签跟消费者的消费场景对应上，交叉进行推荐，比如说一个商家有很多种口味，那对应的消费者人群也会多，消费者通过对应标签可以快速找到对应的商品，对消费者和商家都是互利的，我们经常会遇到一个外卖店铺有几十种餐品，找半天还是不知道吃啥。

（配个截图，此功能已实现，后续看数据情况，再做追踪）

顺便说一下，之前饿了么有个版本放大对餐品的显示，做餐品的推荐，后来又改回来，具体是什么因素，不确定，但那也是一种尝试。

案例2：荔枝FM飞机稿

出发点：那是很早以前的一个版本，因为不好用，所以就干脆做一个交互飞机稿，当时做的时候有以下几个因素：

• 体验不好，最古老的版本体验非常不爽（详情可以戳这里：http://www.woshipm.com/ucd/209199.html）
• 当时在做交互设计，就尝试用新的交互设计思路去设计

解读：

当时荔枝FM算是国内比较早做电台的，同期出了喜马拉雅听，刚开始也没有荔枝FM那样火，但从交互上，主要由两个点：

1. 模拟电台操作：荔枝FM当时还是走拟物化设计（新进入互联网的可能觉得是历史），那从FM收音机的角度来说，都有一个旋钮，或者是老式的随身听，因此在主页的界面设计以及播放界面设计都有参考古老随身听的样式，既然复古，我们就彻底点
2. 数据整理：在当时做荔枝FM的飞机稿时，主要做的是数据层的整理，把繁杂的内容数据变得有序可循，让用户和博客可以更快找到合适自己的内容

对于合适的定位可以理解为：每个事物或许有自己固有的长相，但或许我们找到合适的逻辑后，只要抓住根本，那最后怎么玩，还是大家说了算，打破陈规，才更好玩。为什么音乐软件就一定要有那么大的播放界面；为什么订餐软件就一定要宣传店铺，不能是商品？

3. 解决问题的能力

这个就老生常谈了，解决问题的能力体现在对系统的掌握程度和开发自由度两个层面，产品经理实质是提供解决方案的，任何需求到手后，我们需要分析如何快速解决该问题。

案例1：招聘面试流程

出发点：销售类岗位进行招聘时，都是一大批一大批的面试，一个人可能同时面试很多岗位，一个公司会面试很多个求职者，因此提率，对求职者和公司都是最大的需求

解决方案：排队叫号，跟银行排队一样，针对这个场景，我们梳理了核心的问题

• 面试人员取号
• 面试人员查看各岗位当前排队情况及投递请求
• 企业招聘人员查看简历并选择是否面试，对面试的人进行初步评论
• 叫号及数据导出

针对以上四个问题，设计出如下流程（省略取号的环节，主要核心的流程是企业的发送通知循环以及面试后的符合不符合操作循环）

从流程图可以发现，核心逻辑并不复杂，解决了通知求职者来面试的需求以及对求职者进行评价需求即可；除此之外还可以做一些其他的功能，如求职者可以看到当前排队情况，根据实际情况进行简历投递，避免出现大量等待情况，可预知自己还要多久可以面试，在这时间内是否可以投递其他公司，进行多项选择；对于企业解决各种纸质简历分辨不清，电子档简历，电子记录每一个求职者和操作，可以清楚知道今天面试记录，电子档案，更清楚，提高双方的效率。

4. 了解数据的能力

对于数据，很多人应该不会陌生，如何从杂乱的数据找到规律，怎么处理数据之间的关系？

1. 一级页面到二级页面的流失率和转化率
2. 每个页面转化功能的设计及数据统计
3. 数据解读

最近在做小程序相关的项目，把腾讯的数据统计贴上来:

访问趋势类：

• time 时间
• session_cnt 打开次数
• visit_pv 访问次数
• visit_uv 访问人数
• visit_uv_new 新用户数
• stay_time_uv 人均停留时长 (浮点型，单位：秒)
• stay_time_session 次均停留时长 (浮点型，单位：秒)
• visit_depth 平均访问深度 (浮点型)

访问分布：

• access_source_session_cnt 访问来源分布
• access_staytime_info 访问时长分布
• access_depth_info 访问深度的分布

访问留存

• visit_uv_new 新增用户留存
• visit_uv 活跃用户留存

访问页面：

• page_path 页面路径
• page_visit_pv 访问次数
• page_visit_uv 访问人数
• page_staytime_pv 次均停留时长
• entrypage_pv 进入页次数
• exitpage_pv 退出页次数
• page_share_pv 转发次数
• page_share_uv 转发人数

总结

产品经理从拿到需求开始就需要对需求进行分解，判断到底什么样的方案可以解决此问题，并结合当前系统的一些功能点，给出最佳的方案；在交互设计的时候是参考竞品还是微创新，就看实际业务需求；最后就是核心业务梳理，一个功能的核心业务是什么，还有哪些可以搭配让功能更完善的，考虑进去，做产品是一个分解、组合、删减、再组合的过程！

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

本文基于面向某个垂直行业的SaaS系统的设计经验，抽象出一套适合中小企业的权限管理体系，目标是最大限度保留系统弹性的同时，把系统复杂度和开发成本尽可能降低。enjoy~

面向企业级的SaaS（软件及服务）系统，由于企业用户的规模和内部管理模式千差万别，设计一套具备足够弹性、符合绝大部分目标企业用户需求的权限管理系统，是一个很大的挑战。

我们可以看到，市面上面向多个行业的综合性SaaS系统，例如销售易、纷享销客等，由于它们的目标客户跨越了多个行业、多种规模，这些企业具备各种各样的内部管理风格和模式，在权限系统的管理上，往往做得非常复杂，不仅具备部门、角色、职位、数据等各个维度的权限管理，各个功能模块还有自己独立的权限管理，虽然具备最大的弹性，却给企业的系统管理带来较大的负担。

提炼的三个核心原则：

• 企业-管理员-普通账号三级权限
• 功能和数据权限分离
• 部门和角色分离

围绕上述三个基本原则，我们力图在满足中小企业需求的前提下保持足够的弹性，并严格控制复杂度和开发成本。详细描述如下。

1. 权限从上到下分为三个层级：企业账号（老板账号）、管理员账号、普通账号

对于中小企业来说，公司的实际控制人，往往是公司的创始人或自然人大股东，因此企业账号的使用者以及对应绑定的手机号码，都是公司的实际控制人，他应该掌握最核心、权限最大的企业账号，所以也可以称为“老板账号”。

但是在实际场景中，公司的实际控制人并不会直接管理公司的业务支撑系统，因此，需要在系统首次部署时，创建好企业账号，并由企业账号授权给某一个或多个系统管理员，由系统管理员去完成日常的角色创建、员工导入等工作。系统管理员，对应的一般就是HR或行政部门的管理人员。当然，企业账号的权限高于管理员账号，如果是小微型企业，也可以由企业账号直接替代管理员账号的功能。

除了企业账号和管理员账号之外，其他各级员工所持有的账号，都属于普通账号。普通账号的部门、角色、数据等权限的设置，一律由系统管理员配置。

三个权限层级示意图如下：

在实际系统中的核心业务步骤如下：

（1）企业购买系统时，创建一个企业账号，这个企业账号绑定的手机号码为公司实际控制人的手机号码。该手机号码必要时可以解绑（例如公司实际控制人变更），由于该功能触发频率很低，因此不需要在前端功能中实现，只需要在购买协议中写明，“购买企业可以通过书面方式提出企业账号手机号码绑定变更需求”即可。

（2）在部署和培训阶段，可指导企业账号持有人创建一个或多个管理员账号，该账号一般授权给行政总监或人力资源总监，后续配置即由管理员账号进行。

（3）管理员账号持有人需要接受系统培训，掌握部门创建、角色创建、功能和数据权限分配等基本操作。管理员所有操作都必须记录在案，供企业账号持有人监督，且管理员操作触发异常行为规则（如大量分配高等级权限等）时，系统会通过短信方式通知到企业账号持有人，确保企业账号对管理员的全方位掌控。

（4）企业账号可随时将管理员账号禁用或设定为离职，但管理员账号不可对企业账号进行任何配置或操作。

（5）企业账号默认拥有所有权限。

2. 功能权限和数据权限分离

功能权限，定义为可见、可以操作的功能范围。例如某一部分菜单，或者某个页面里的各种操作。

数据权限，定义为若干个数据类型里的具体可见范围，例如“客户”就是一个数据类型，它的权限举例如“无权限”、“我的客户”、“我所在部门的客户”、“我所在部门及下级部门的客户”。

通过功能权限和数据权限的分离，我们可以做到以下场景：需要开拓和维护客户的角色集合，都可以拥有“客户”这个菜单的权限，但不同的角色进入“客户”菜单的列表时，看到的客户范围各不相同，极端情况是看不到任何客户。且不同角色在同一个客户页面上，能进行的操作也不同，例如有的角色可以新建客户，有的却不行，这就要由功能权限来控制。

可见，通过功能权限和数据权限的分离和配合，我们在具体的权限分配上有了非常大的弹性，且在技术层面的后台系统的设计上，也非常合理、清晰。

而在具体设计上，需要保证以下4点：

1. 正确区分功能和数据，入口性和操作性的都应该归类为功能
2. 正确对数据进行分类，避免存在分类后的某些数据存在交集
3. 数据分类到多细的颗粒度，需要由行业特性决定
4. 数据权限区分为查看、编辑和删除

示例图如下，由于涉及具体产品，对某些文字进行了打码：

3、部门和角色分离

部门的定义，自然就是公司行政组织架构下的部门。

在本设计方案中，角色等同于职位，而在许多大型的SaaS系统中，为了更大的灵活性，往往会把角色和职位分开，但根据我们的判断，对于中小企业，设定角色一个就够了，职位当然还存在，但仅仅是一个不涉及权限管理的文本title了。

以一个销售公司来说，角色可以包括：“渠道专员”、“渠道总监”、“销售专员”、“销售经理”、“总经理”等等。

所谓的部门和角色分开，就是不同的部门可以有相同的角色，例如如果有渠道一部、渠道二部，则这两个渠道部的员工的角色都可以设定为“渠道专员”，这两个部门的管理者都可以设定为“渠道经理”。再配合功能和数据权限，则进一步配置“渠道专员”具有“渠道”菜单的功能权限，其能够查看的渠道数据权限范围则仅为“我的”，而“渠道经理”同样具有“渠道”菜单的功能权限，但其能够查看的渠道数据权限的范围则扩大为“部门”。

具体设计上：

1. 最大部门即为公司
2. 管理员账号和普通账号均可禁用或设置为离职
3. 不同部门可以配置相同角色
4. 相同角色的功能权限和数据权限是一样的

4. 权限系统和其他功能设计的关系

总结完权限系统三个核心的基本原则后，我们还需要指出一点：权限系统的设计方案，在整个系统中绝不是孤立的，它能否实现设计目标，并和整个系统完美配合，还需要做到以下几点：

首先，菜单和功能的设计，必须是最小颗粒度，否则就和数据权限产生冲突。例如：我们只需要一个“客户”菜单即可，不同角色在“客户”菜单里能干什么事情，由功能权限和数据权限配合进行控制，但切不可出现“我的客户”+“全部客户”两个菜单，这明显和数据权限有根本冲突，且也是一种不优美、不合理、扩展性差的设计。

其次，数据的分类，必须符合业务需求，且划分合理。有些数据都是公开的可以不归入数据权限进行管理，所有角色默认都有即可；有些数据需要进一步细分，例如同样以“客户”举例，在某些公司的业务规则中，就需要将客户的基本信息和联系信息分开控制，管理层可以看客户基本信息，但只有客户负责人才可以看联系信息，这种情况就需要将客户的数据权限分为“客户基本信息”和“客户联系信息”两个。

最后，权限变更的记录和所有账号的行为轨迹记录一样重要。权限系统本质是进行权力的限制，没有监管的权力必定是会失控的。在出现问题的时候，必须同时配合权限变更的记录、角色变更的记录和账号的行为轨迹记录进行追责和存证，确保维护企业的合法权益。

总结

在合理设计的前提下，权限系统也并非越复杂越好。只有符合目标客户需求并具备最大弹性的权限系统，才是最好的。

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

算是比较全的合集，送给大家，资源获取在文末（有惊喜哦），这次福利很大，赶快关注哦（资源限时开放....）！

1，layui/ layuiAdmin

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

大家有机会多支持闲心。。。。

不过后台UI是要授权的哦

---

2，dwz富客户端框架 - jUI

DWZ富客户端框架(jQuery RIA framework)，是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。

比较成熟，应用比较广泛，官网有整合的应用可以借鉴

• DWZ框架 + ThinkPHP 实现小组工作日志系统
• dwz4j企业级Java Web快速开发框架(Hibernate+Spring+Struts2) + jUI整合应用
• dwz4j企业级Java Web快速开发框架(Mybatis + SpringMVC) + jUI整合应用
• ThinkPHP + jUI整合应用
• Zend Framework + jUI整合应用
• YII + jUI整合应用

---

3，B-JUI 前端管理框架

B-JUI客户端框架(Best jQuery UI)，是基于Bootstrap样式及jQuery库实现的Ajax RIA开源框架。

B-JUI客户端框架扩展方便、简单易用，很多情况下只要熟悉HTML语法，使用HTML属性就可以轻松用Ajax开发项目。对于javascript不太熟悉的程序员是非常方便的，他们只需要关注后端业务逻辑的实现就行了，前端页面上只需要简单的写点HTML代码。

本框架基于Bootstrap前端样式及jQuery库开发，提供丰富的各类组件及UI，封装有多种组件，及相关的Ajax请求调用，并且都以jQuery标准插件的方式组合在一起，所以非常方便进行二次开发或再扩展。

兼容性：

• IE8.0+, Chrome[最佳], Firefox, Safari。（IE8 未详细测试，估计问题不大，但一些CSS3的效果就不要想了，如圆角、动画什么的）
• 本框架不适用于需要兼容IE6、7的开发者或使用者。
• PS. 未考虑兼容IE6和IE7，一是因为Bootstrap3.2不支持，二是因为目前主流系统已是WIN7(IE8+)，三是带WebKit内核的浏览器大量出现，如360浏览器、搜狗浏览器、百度浏览器等。

---

H+ 后台主题UI框架

H+是一个完全响应式，基于Bootstrap3.3.6版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了的jQuery版本(v2.1.4)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。

提醒：是收费的

---

H-ui.admin

H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版 采用源生html语言，完全免费，简单灵活，兼容性好 让您快速搭建中小型网站后台，拿来即用。

---

jQuery MiniUI_快速Web开发

jQuery MiniUI - 专业WebUI控件库。

它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。

jQuery MiniUI致力降低企业应用的开发成本，丰富的UI控件、高度的稳定性、强大的扩展能力和平滑的版本升级能力，可满足大部分业务场景需求。

缺点：收费的！

---

请输入描述

EasyUI

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

• 大家百度去官网下载即可

---

TOP-JUI 

b-jui的作者基于easyui开的的，比easy调用简单，很不错的UI，可惜收费，不过不算太贵

TopJUI基于版EasyUI构建，在使用TopJUI的过程中，除了可以使用TopJUI提供的组件功能外，你还可以根据实际情况调用EasyUI的原生组件功能，满足各种复杂的业务功能需求开发

---

Amaze UI 后台管理模板

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

组件丰富，模块化Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

不过这个模板现成的东西比较少，复杂功能还需要自己去完善

---

---

LigerUI

• 使用简单，轻量级
• 控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
• 快速开发，使用LigerUI可以比传统开发减少极大的代码量
• 易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
• 支持Java、.NET、PHP等web服务端
• 支持 IE6+、Chrome、FireFox等浏览器
• 开源，源码框架层次简单易懂。

---

win10-UI

Win10-UI是一款win10风格的后台UI框架。它使用了丰富的win10桌面元素，包括桌面图标、窗口化子页面管理、开始菜单、动态小磁贴等组件，兼容主流现代浏览器及移动端的屏幕尺寸，适合快速开发后台管理系统的前端界面。

风格不一样，还是挺不错的

---

国外还有很多 bootstrap 后台UI

Ace Admin，Metronic等等

---

今天小编就分享到这里

评论回复相关需求，小编会第一时间私信您

或者私信回复“后台UI”，自动获取资料，都是小编的血汗哦，本资源只开放一段时间，赶快获取哦（是私信不是评论哦，评论无法自动回复）

如果你是初级程序员可以研究别人的代码提高技术，如果你喜欢搞网盟或者外包，可以让你快速建站，还等什么赶快关注吧，我们会持续输出相关资源

---

资源来自互联网 仅供学习研究之用，不得用于商业，请在24小时内删除！

版权归原作者及其公司所有，如果你喜欢，请购买正版。

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