MaterialDesign的实现：方舟一账通

打个招呼

各位站酷的设计师朋友们，大家好！我是巫幺王，一名来自北京的互联网产品设计师。

之前一直是一名站酷潜水员，今天想给大家分享一款B端产品的设计过程，希望能与各位大佬互相交流，学习。

产品介绍

今天要分享的是2019年我参与的一个开源项目：方舟一账通（ArkID）。

我入职的那天，老大有一个问题直击我的灵魂：国内ToB的企业，最牛逼的是谁？我赶忙百度一下，自信列出了我的答案。结果就是老大对我的答案嗤之以鼻，并且告诉我，中国最好的ToB企业，是华为和中兴。我半信半疑之时，不禁问老大：“这跟我入职又有什么关系呢？”老大说：“没什么大事，就是提一下咱的产品名称碰巧跟华为撞车了。”

“方舟”这个名字，实在是ToB行业的宠儿。

方舟系列产品布局

在我司的产品布局中，一账通其实只是很小的一环。但是这一环很关键，它可以为企业解决“统一身份认证”的问题。只有解决了统一身份认证的问题，才能明确数据的归属与身份，才能对数据管理有基本的依据。

总结起来就八个字：单点登录，精确鉴权。

无与伦比的MaterialDesign

一账通的前端部分，使用Vue框架进行开发，Vue是用于构建用户界面的渐进式JavaScript框架，此框架运用广泛，方便快捷，性能强劲。页面中的组件使用“iView”组件库，iView组件库是一套优秀的前端组件库，设计语言明确，适用范围广泛，在快速开发中十分好用。

Vue与iView

但是（又到了但是环节），iView虽然优秀，在视觉上只能算是中规中矩，辨识度实在不高。相比于MateriaDesign、Antdesign，Element等精致的UI组件库，iView略显平凡。

我和我的同事们开发方舟一账通1.0版本时，为了更专注于产品的功能，节省开发时间，没有选择MaterialDesign作为主视觉风格。于是，我在项目上线后回顾项目时，使用MaterialDesign重构了界面。希望下次版本迭代的时候能用得上。

MaterialDesign

MaterialDesign的大名自不必多说。

2011年立项，2014年发布的MaterialDesign，真真正正地让谷歌拥有了不输给苹果的设计语言。

一如大家所知，苹果全家桶的使用体验极其优秀（钱花哪儿哪儿好），其重要原因就是苹果的设计语言在跨端设备上保持了高度一致，工业方面，软件设计-硬件设计-建筑设计-门店视觉设计一致性非常高；系统方面，MacOS-iPadOS-iOS-WatchOS无缝衔接，纵享丝滑。你甚至能一眼看出：这就是苹果。

所以谷歌也在MaterialDesign的文档中特别强调，希望大家把MaterialDesign运用到各个平台和不同的设备中，因为MaterialDesign的跨端体验的确不输苹果（但是苹果能做到硬件-软件设计语言的统一，目前MaterialDesign暂时做不到），MaterialDesign能在手机、平板、电脑、电视上展现自己的魅力。

建议跨端使用MaterialDesign

方舟一账通

说完MaterialDesign，我们回过头来，继续说方舟一账通。

一账通的功能其实并不复杂，面向普通成员和企业管理员，它被分为工作台与管理后台。

1.工作台

工作台由三部分组成：应用工作台、企业通讯录、个人资料。

1.1应用工作台

集成了企业运转所需的各种SaaS应用，用户可以点击应用图标访问应用，由于这些应用或者系统可能不相通，一个人想要使用它们就需要记住多套账号密码。所以我们建议使用一账通访问他们，可以实现单点登录，真真正正地做到“一账通”。

1.2通讯录

企业员工可以通过企业通讯录搜索同事，得到其联系方式。

值得一提的是通讯录的分组方式，分为部门、角色、标签三种默认分组方式和自定义分组方式。分组方式的制定影响着企业的组织架构，由一账通管理员在管理后台设置。

1.3个人资料

允许企业员工自定义头像、名字；绑定/更改手机号和个人邮箱；修改密码。由于功能简单，此处就不予展示了。

2.管理后台

只有一账通管理员和子管理员才能进入管理后台。

管理后台由六部分组成：账号管理、分组管理、应用管理、配置管理、子管理员、操作日志。

2.1-账号管理

顾名思义，账号管理功能，就是管理企业内部员工账号。更改字段内容，为其分配权限。

2.1.1所有账号：

展示所有账号，管理员可以完成对账号的“增删改查”，可以设置账号在应用中的权限。应用中的权限分为应用访问权限和应用内权限。账号应用中权限的结果，由其所在分组的权限和其账号权限叉乘计算，其中，账号权限的权重高于分组权限。

2.1.2账号配置

管理员可以选择企业内的一账通系统是否开放注册；可以进行第三方扫码登录的配置；可以配置邮箱验证服务和短信验证服务（用户注册登录、修改密码会用到）。

2.1.3账号同步

管理员可以使用账号同步功能从第三方平台将企业名单同步至一账通，目前只开放钉钉、企业微信两个平台。同步之前需要完成对第三方平台的参数配置。界面简单，在此处就不予展示了。

2.2分组管理

分组管理可以为企业搭建组织架构，一账通提供三种默认分组类型：部门、角色、标签。还提供自定义分组类型功能，企业管理员可以根据自身情况来定义分组类型。

2.2.1分组管理界面

除了上述提到的通过不同分组类型来搭建企业组织架构之外，还可以在“编辑分组”中设置分组的名称、父级，子级分、分组可见范围，包括“所有人可见、仅组内成员可见（下属分组不可见），组内成员及其下属分组可见，所有人不可见，只对部分人可见等。另外提供分组在应用中的权限（应用访问权限+应用内权限）管理功能。

2.2.2分组权限管理

分组权限管理的是指定分组在指定应用中的权限。管理员可以指定一个应用应用，来设置一个分组在此应用中的访问权限以及应用内权限。

2.3应用管理

管理应用，配置应用权限。

2.3.1应用管理界面

管理员可以完成应用的“增删改查”，也可编辑应用的信息，查看应用接口详情，完成应用权限管理。

在添加应用时，管理员需要输入应用名称，上传应用LOGO，填写主页地址，填写应用备注，选择协议（一账通支持的协议包括LDAP/OAuth/OpenID/SAML/HTTP等）。

2.32应用权限管理

与账号与分组在应用中的权限管理不同的是，应用权限管理是应用的访问权限和应用内权限的黑/白名单的集合。是账号与分组权限设置的逆操作。

在应用权限管理中，可以对配置好的应用权限一览无余。管理员可以在此修改权限的黑/白名单，以更改账号/分组的权限标识。

2.4配置管理

在配置管理功能中，管理员可以进行一些企业个性化的设置，也可以管理一账通内的文件存储。界面简单，在此处就不予展示了。

2.4.1登录页面

管理员可以设置企业名称、企业LOGO，还可以设置企业登录页面主色。

设置主色时，支持选择预设主色（17种主色），或填写六位十六进制的色值两种方式， 并提供登录界面预览功能。

2.4.2文件存储

在文件存储功能中，管理员可以设置文件存储的位置：本地存储或者Minio。由于功能简单，此处就不予展示了。

2.5子管理员

要想完成整个企业的信息化，只靠一名管理员是不够的，所以，子管理员制度就应运而生。

主管理员可以指配子管理员来协助自己管理一账通。主管理员为其分配管理范围。管理范围包括：账号及分组、一账通基础权限、一账通应用权限共四大项。

2.5操作日志

操作日志功能关乎着企业安全，每一个企业内的系统应该均包含操作日志功能。

操作日志的功能在问查追责、证据留存方面具有重要意义。

总结

方舟一账通是一个不算复杂的项目，我们将他开源至Github。希望它可以帮助到更多的企业建立自己的身份认证体系，也希望其他开发者也参与进来，帮助我们不断地改良和优化一账通。

最后，想表达一下我做一账通过程中内心的想法。

一个成熟的设计师，最好不要有特别的鲜明的职能标签。切不能只做一名“需求发掘师”、“原型整理师”、“线稿上色师”等等。一名符合当下互联网行业情况的设计师，应做到从产品出发，需要什么知识，就去学什么知识。这些知识将服务于产品设计工作，它们会变成自己的设计语言，渗透至产品的各个细节。

希望我们向更好的自己迈进。

巫幺王

2019.12.23