导语：提起中后台，除了高效、灵活和强大之外，不可忽视的还有它的海量数据。海量数据的筛选与呈现，直接决定决策人员的效率高低。本文作者主要是结合自己在实际工作中遇到的表格设计问题，针对Web端数据呈现方式之一，表格的设计进行探讨。
表格，是一种常见的信息组织整理手段。常用来展示、保存、对比分析、排序、筛选 、归纳等，是最清晰、高效的数据展现形式之一，由内、外两部分组成。
说完表格的组成，接下来将会从易读性和易操作性两个方面来分析下表格设计。
表格的组成，也可以看作行与列的自由组合，这种组合赋予了表格多样性的特点。行与列构成了单元格的长与高，不同的长高会有疏密之分，充实与透气之感。
B端中后台通常会对应不同的角色及场景需求，根据目的及信息主体的不同，让用户根据自己的需求来定义表格的展示列及列的顺序，也可以通过行与列的显隐变化，来更好的满足信息的传达。
但需要注意的是系统应记住用户上一次的自定义列设置，减少用户重复操作。对于列的选择，应尽量减少列的数量，既要展示用户必要信息，又要避免出现用户无关数据，以免信息冗余，影响信息阅读效率性。对于用户需要的非重点、辅助性信息可以通过入口提供的方式来解决。
默认排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列。
B端中后台中的表格展示的数据多且杂，这就要为用户先一步对数据进行梳理归纳，提高用户获取信息速度。
为便于对数据进行对比分析，一般需要在原始数据的基础上给出差值、升降变化、平均值、总计等数据处理结果，减少用户二次加工数据的过程，提升用户阅读信息的效率。
数据汇总展示
在表头或者表尾分别提供了总计的数据，方便用户进行快速查阅。
数据对齐展示
常用对齐方式有数字右对齐，文字左对齐，混合型文本左对齐，列标签的对齐方式与数据的对齐方式保持一致。这样能形成的视觉边界线，便于视线的流动，从而快速提升数据的浏览、对比效率。
空数据展示
B端中后台数据类型较多，对于空数据，切忌不要与数据为“０”进行混淆，对于空数据通用做法是用“－”表示，而不是什么都不显示，会让用户误以为是没有数据还是“0”数据。
最好做法就是为空数据做出释义，可以加在“列标签”的名词解释文案中。
数据的关键属性标识展示
对于用户重点关注的数据状态、上升和下降等，可以用符号进行标识，帮助用户快速定位到目标信息。
在有限屏幕内，有限的内容展示区域内，阅读丰富且繁多的表格时，用户不得不拖动横向或纵向滚动条来阅读信息。
固定表头、固定列和固定分页，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。
固定表头
在固定的小区域内滚动会非常局促，而且区域滚动和全屏滚动同时存在时体验也很不好。固定表头可帮助用户识别信息，在全屏滚动上去后固定表头，有利于用户向下翻屏时能够便利的阅读数据。
固定列
固定列的内容可视业务及目标用户的诉求而定，一般采用方法是固定比较重要信息，方便用户进行数据定位与对比，最好可以让用户自定义，满足不同用户诉求。
固定分页
分页处理目前有放在上部、下部或上下部均有，需要根据场景来选择。分页固定目的是为了省去用户需要翻到顶部或底部进行操作的麻烦。
特别是可以自定义每页的数量和需要横向拖动数据查看，这就需要把分页固定在底部，方便用户横向拖动滑条查看信息和进行翻页操作。
在Web端中的表格，涉及到跨页的数据操作时，分页会带来不便。
但往往受限于数据加载的压力，这种情况在大厂中尤其突出，加载数据都是亿量级别的，在Web端和手机端都需要实时下载数据的终端，我们通常做法就是提供分页展示数据来缓解服务器的压力。
表格中的的数据内容超过一定“数量”时需要提供翻页功能，而这个“数量”是由表头的数据的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定。
原则上整张表不要超过一屏，考虑到每个用户的使用习惯，我们一般提供可以让用户自定义每页的显示的数量，相比于跨屏翻页而言，向下滚屏会更便利，也更符合浏览信息路径。
表格全屏展示是非常有必要的：
在大量的表格信息中，如果没有筛选查找信息简直犹如大海捞针，而表格跟筛选是不分家的。
说到表格一定会说到筛选，筛选也就是数据过滤，常在数据量较大的场景中使用，其目的是通过关键字搜索和条件筛选能够帮助用户快速的找到所需要的信息内容。
对于表格外部筛选，如果有时间会单独出一篇详情介绍。这里不展开详细说。
筛选根据筛选功能的位置不同，可分为表外筛选和表内筛选。
在信息列数较多的情况下，数据的选择就尤为重要。当鼠标指针悬停在表格列或行时，给予视觉状态的变化提示，可以让用户捕捉到所在的位置，而不至于视觉上的错行，能够降低人的心理压力和增加掌控感。根据数据选择功能分为单个选择和批量选择。
单个选择
鼠标指针悬停在整行时应与默认态有所区分。当标识选中行或选中行的数量，选中行可操作的命令状态须同步，明示当前行可操作的命令或反馈当前已选行的数量。
批量选择
提供选择当前页部分行、选择全部行、取消选择全部行三种功能；状态反馈分为半选态 、未选态、全选态共三种。
对于数据的操作，主要针对表格内部来说。表格操作大体可分为显性操作和隐形操作。
显性操作
指操作选项显示在行内，优点是明显直观，可以根据列表上的信息做出快速的判断并且高频发生的操作。
适用列数较少的列表。但弊端是信息过载，尤其是列数较多，可展示列数会随操作数增加而减少，同时误操作率较高。对于危险系数比较高的操作，也不建议采用这种设计。
隐性操作
当鼠标悬停或点击时才显示其他低频、高危的操作选项，优点是界面简洁明快，信息密度低，可以帮助页面突出更加重要的信息，可减轻空间压力，减少干扰。
弊端是增加用户的点击次数和提高了操作门槛。列数较少的表格不适用隐性操作。
为方便用户对数据进行再次整合分析、统计分析等，可提供数据下载功能及多种下载格式。
对于B端中后台来说，表格显示最多就是两种情况：一种就是表格有数据，这种最容易解决，有数据就显示相应数据；还有一种表格是没有数据，也就是空表状态，这也是让很多设计师容易忽略掉的页面。
空表分两种：可创建和纯展示
可创建
是用户有创建诉求，数据是由用户或系统产生的，可创建分两种：
纯展示
没有创建诉求的，数据是系统产生的，不是由用户创建的，直接告之暂无数据。
看上去平淡无奇的数据表格，其实是非常重要的，通过合理的组织架构和呈现方式，使原本枯燥的数据呈现出生命力，这是一件很神奇的事。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么了解网页布局很重要？网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。
这里将介绍一些常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！
卡片式布局被Pinterest、脸书和推特等网站所使用，它非常适合在新闻网站和博客上使用，因为卡片式布局可以在页面上放置大量内容，同时又保持每部分内容各不相同。
卡片式布局主要有两种形式：
网页中每个卡片的尺寸相同，卡片的排列非常标准，例如Dribbble的网页布局；
使用不同尺寸的卡片组成页面的布局，卡片间没有固定的排序，例如Pinterest、花瓣的页面布局。
当两个元素在页面上具有相等的权重时，分屏布局是一种流行的设计选择，并且通常用于文本和图像都需要突出显示的设计中。
分屏设计特别适合电子商务网站上的产品页面。产品图片需要在页面上突出显示，但价格、规格、购物车按钮等信息也要显示。
随着移动设计的盛行，大标题排版变得流行起来。大号字体在标题中特别流行，在一些网站的正文中也能看到。
较大的文本更具可读性，可以改善使用体验。另外它还提供了强大的视觉效果，因此这种布局在极简主义设计中特别受欢迎。
个性化算法推荐可以根据每个人的喜好量身定制数字体验。人工智能技术的发展让算法变得更易用，能精确分析用户的喜好。
根据用户之前的订阅习惯，Netflix可以为用户个性化推荐他们最有可能观看的电影。
像Medium这样的网站会基于用户以前阅读和喜欢的内容，向他们展示很多同类型的文章。
网格为设计提了视觉上的平秩序感，以一种平衡且有组织的方式呈现内容，使内容更易于人们使用。
在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉吸引力。
杂志和期刊的布局方式影响了网络杂志的版面设计。这些网页布局很适合有大量内容的网站，尤其是每天都需要更新内容的网站。
单页布局将网站的所有主要内容放在一个网页上，通过滚动完成导航，有时还使用视差滚动效果。
对于内容稀疏的网站，单页布局是一个很好的解决方案。同时它也是内容叙事的完美选择，比如交互式儿童读物。
F型和Z型布局是指用户的视线如何在页面上移动，即用户如何扫描内容。F型布局有非常明确的视觉层次结构，因此适合内容更多的页面。
Z型布局将视线吸引到顶部，然后沿对角线方向向下延伸到底部，然后再次延伸。
在设计中，不对称会产生动态化的视觉冲击力。大多数情况下不对称是由于图像和文本间无法平衡而造成的。
由于不对称会产生动态的、充满活力的视觉印象，因此对那些想要传达这种形象的品牌来说是非常有用的。
这种布局的优点在于完全专注于内容，没有视觉上的混乱。
干净简单的布局几乎适用于任何类型的网站。许多优雅的网站都可以被认为是“简洁的”，无论它们包含什么设计形式。
导航标签适合用于包含少数项目的菜单，否则导航会显得很混乱。
轮播内容包含图像和文本，通常出现在网站的顶部，用来突出显示内容。
好的网页设计具有很强的适应性并且对用户来说始终是友好的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
无论作为设计师还是普通浏览者，大家观看一个网站时最先接触到的就是网页的头部区域，这部分内容为网站的其他各个方面设定了基调，在网页设计中起着非常关键的作用。
尤其是如今简洁设计比较盛行，多数时候把头部内容设计好就变成了吸引用户眼球最好的办法。网页设计师在设计网站头部时投入了大量精力，同时要兼顾创造力和实用性。根据一项Google的研究，用户只需要短短数秒就可以形成对一个网站的看法，甚至有些观点是在令人难以置信的1秒内形成的。用户对品牌的了解就是从这么短的时间内开始的。
在通常网页设计中，首页上方的整个空间都被视为头部区域。作为人们在加载网站后的最初几秒内看到部分，头部信息起到了一种邀请作用，它应该提供有关网站的基本信息，以便用户能够在几秒内了解网站的主要内容。
如果以招聘活动站点为例，整个头部区域设计要明确传达企业形象，及本次招聘活动的特点。给浏览者一个强烈的视觉印象，企业已向你发出邀请，我们对人才十分渴求，等等信息… 如果有线上线下活动同时参与，那么在整体风格上尽量保持一致。
网页头部的任务是给用户提供一些基本问题的答案：代表什么品牌，提供什么服务等等。如果我们在内容上引起了用户情感上的共鸣，那么就是正确的设计。
那么主要元素通常包括：
在设计网站头部内容时，从思维层面来讲没有任何东西会限制你的创造力，它应该是令人难忘的、简洁和兼具实用性的，是一个可以展示创造性的开放领域。
下面让我们一起来看看头部内容设计的一些技巧。
1. 关于尺寸
对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字，但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同，分辨率也可能不同，因此用户看到的内容也不一定完全一样。
因此，我们不要拘泥于精确的像素概念，最好遵循经验积累的常识规则。
头部的高度本着不干扰内容感知的基本原则。对于一些展示信息资源的页面，较小的头部区域是一个不错的选择，而对于落地页或者企业客户首页，头部区域可能会更大，而且多数大客户会有主视觉单屏展示页。
如果某些网页，例如落地页头部内容较长的情况下，最好在首屏给下一屏内容露出一些空间，这样用户就可以意识到下一页还有内容，引导用户滚动。
2. Logo展现
当一个人发现自己在陌生网站上，总是习惯于从屏幕的左上角开始浏览网站。尽管设计师有时候认为打破常规的布局也可以带来不错的效果，但是多数用户如果他们常规位置找不到预期的信息，将会不假思索地认为这个页面是难用的和不规范的，需要花费很多的努力才能理解。这就要看你的设计目的和受众群体能够接受哪些程度的变化，我们今天主要说大多数受众。
Logo ——与居中或右侧放置相比，用户更容易记住那些 Logo 放在左边的品牌。如果你使用的是圆形 Logo，那么可以把它居中放置，尽管它的有效性仍然比放在左侧要低。
3. 吸顶导航栏
吸顶导航，换句话说就是「粘性标题」，当你滚动页面时，导航区在页面中跟随，现在成为一个网页设计标准。如果不违反网站整体设计理念，请将导航栏吸顶固定。无论是PC端还是移动端设计，这都是一个好的选择：
可根据页面内容展示要求，向下滚动时调整导航背景透明度，尽量少的影响内容展示同时使页面看起来更生动和通透。还可以在滚动时简化导航栏样式或高度，使用户能找到但又不过于抢眼。
总之，固定导航栏有助于提升用户体验，保持用户导向并给予了他们更多控制权。
3. 关于图片的应用
头部内容所用图片可以选择直接和要表达的业务相关性很强的，例如招聘类网站使用招聘场景图片；也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容；
高质量图片——摄影对于网页设计师来说是一个强大的工具。它可以讲述一个故事，唤起用户的情感，并鼓励访问者进一步滚动。对于那些有强烈冲击力的图片的网站，试着做一个透明的标题，它可以更好地显示图像，并保留了主要链接。
轮播图片——如果客户给了几张代表该企业业务的出色照片，这种方式就没错！企业希望用户可以滚动浏览一组精美的高分辨率图像。
插画——网站的头部图片必须能引起读者的共鸣，建立起人与人之间的联系。如果图片是独特的且易于辨认，即使是从网站标题中剪切出来，效果也会很好，可以利用当今的插图潮流来实现这一点。
4. 视频或动画
当然我们也不能只关注静态图片，添加视频也是最有效的网站头部创意之一。如果可能的话，尝试着在头部内容中添加主题视频材料，很多网站利用在背景中添加短视频来吸引用户，尽可能以最好的方式展示他们的公司或产品。
△ 华夏幸福校招官网首页动画，拨云见日的效果加上中式剪纸风格的运用，将公司各业务线融合到几个转轮中，产生了故事性的动画场景。
如果想要使设计更具吸引力、生动和令人难忘的另一种方法是添加动画。它可以使网站头部内容变得非常酷。以每季校园招聘企业站点为例，各大公司对应届生群体的追逐，很大程度上体现在对该群体审美和喜好的迎合上，年轻有活力的动画或视频元素绝对是吸引眼球的不二之选。
当然不一定只有满屏大型动画，一般动画越复杂面积越大占用流量越多，客户打开延迟也影响观感。这时候我们可以根据功能不同，设计一些交互性的动画，去提升客户使用感受，尽量不影响网页打开速度。
5. 移动端头部设计
网页头部不可能只显示PC端的网页上，还应该正确显示在移动端的网页上。因此，在近年的设计中，网页必须具有响应性，并且能够很好地适应各种移动设备，这样才能带给用户完整的设计体验。
移动设备的日常使用广泛性早已影响网站设计，即使在PC中，也有一些细节看起来像是面向移动设备的网站设计。例如，Banner和汉堡包菜单都起源于移动设计。
移动端有着与PC端不同的屏幕尺寸和操作方式，很多时候需要设计师在一开始就考虑到两种界面的适应情况，比如在PC上顶部一条的导航，到移动端就演变为一个汉堡包菜单。而原本PC页面中展开显示的内容，在移动端会向下层延伸，首层界面成为一个内容聚合页。
网站是以头部内容为先导的，它就像是一张独特的名片。因此，我们在设计网站时，尽可能最大限度地关注该区域。
最后还要提醒大家，一定记得定期更新网站头部内容哦！以校园招聘大客户为例，大多数企业都会在每年春秋两季的招聘旺季更新其招聘主题风格，以保持网站的新鲜感和时效性。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户在操作系统时所看到的页面框架其实就是系统布局，它是一个产品最外层的框架结构，一般包含了顶部导航、侧边导航栏、面包屑、图文、卡片、内容等元素。
对于设计师而言，想要了解一个中台，首先要了解它的系统布局，系统布局是页面设计的基础，它与页面的关系，就如同建筑与地基的关系。日常完成需求时，UI 界面反复的调试页面宽度与卡片比例会占用我们大量的时间。为了提高工作效率，并且把更多的时间放在业务、视觉创新等方面，我们就应该需要一套完整的布局规范。
对整个公司产品体系而言，内部员工与普通用户使用的操作系统达到几十甚至上百个，单一的页面布局满足不了各个子项目的使用场景。所以我们从前期的布局框架设计调研到产品业务的特性，定义了中台界面的几大类型，并且在我们的设计规范中定义了几大类型系统布局方式，根据其布局方式定制好栅格，方便日后在各个业务场景中使用，从而能够保持一致性、并且可扩展，方便快速迭代和维护。
视觉层次
对于中台的 UI 设计师们而言，良好的理性思维相对比感性的视觉思维更加重要，因为在 UI 设计师设计页面时需要把很多互不相关的元素有秩序的组织在一起，正确引导用户操作与使用。亨利·亚当斯（Henry Adams）曾经说过：「混沌是自然法则，秩序是人类的梦想」。人们总是喜欢秩序，因为秩序可以让事情变得更容易理解。这同样适用于数字产品的用户界面，当 UI 元素被有序组合和结构化时，人们可以轻松的使用应用程序和网站，并对产品感到满意，所以设计页面时需要结合视觉层次理论。视觉层次理论是设计过程的核心方法之一。最初是建立在格式塔原理的基础上，它观察到了用户对相互关联元素的视觉感知，并展示了人们如何将视觉元素归为一类。那么什么是视觉层次呢？官方概括：视觉层次结构致力于一种用户能够理解的方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它可以组织页面内容，以便大脑可以根据物理差异例如：大小，颜色，对比度，样式等区分对象。
苹果的设计一直以来都是引领着设计趋势，其设计被国内外用户所认可，所以就以苹果官网作为案例。其中，字重对比：苹果官网在字重上给人眼前一亮的感觉，它采用 Medium+Bold 的字重使得标题与详情内容产生强烈的大小对比，用户进入官网的第一眼便能了解核心内容。颜色对比：在颜色上使用黑色背景承托产品和内容，强烈的黑白对比增强了信息传播中的识别度和对比度。图文排版：在图片与文字排版中使用了文字层和图片层互相叠加的视觉效果，使得页面层次感更加的丰富。如下图：
格式塔理论
往往用户打开页面进行阅读或者操作界面时视觉的第一感受是产品的整体效果，而并不会感知到一些较细节的元素。往宏观来讲当人们感知到一个物体由许多元素组成的复杂对象时，人们会采用有意识或无意识的方法将这些部分安排到整个组织的系统中，而不只是简单的元素级。它适用于不同级别的感知，但是视觉部分似乎是设计师设计界面时最能体现价值的部分，这其实就是格式塔理论，格式塔（Gestalt）这个术语来自德语单词 Gestalt，中文翻译为「形状，形式」。
格式塔心理学家库尔特·科夫卡（Kurt Koffka）的一句话可以捕捉到这一运动背后的基本思想：「整体不是元素基因的总和」。官网概括：「在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割」。格式塔理论中元素之知见的原则分别为临近，相似，连续，封闭和连接。
在我们的现实生活中有很多自然规律都遵守了格式塔原则，比如说每到秋天，北方的严寒气候不再适合大雁生存，这时候大雁便会飞往较暖和的南方，当人们看到天空正在南飞的大雁队伍，它们组织链接得十分严密，并且群体在往同一个方向移动，所以队伍的形状在我们的大脑中将它们视为一个群组的一部分，产生人字形或一字形的图形。
信息框架
刚刚我们也介绍了视觉层级结构和格式塔理论，接下来简单介绍一下信息框架，它也是在系统布局中需要考虑的内容。信息框架是将信息内容进行组织分层，一个产品的信息框架取决于其特有的业务，他与业务强相关并且需要了解用户群体目标。根据业务和用户目标将内容组织搭建信息框架，形成系统布局的骨架，方便用户在浏览或操作页面时能够快速找到重点内容，提升用户使用效率。我们用今日头条 Web 端和飞书 Web 端两个线上产品作为案例分析吧，今日头条和飞书属于两种完全不同类型的产品，那么其信息架构也完全不同。
今日头条属于门户类新闻客户端，主要是生产内容展现给用户，首先进入到产品映入眼帘的是无穷式的信息流，它不需要用户登录/注册作为身份门槛，而是直观的把内容展示给用户，推送用户感兴趣的内容，也不需要用户决策任何选择，用户只需沉浸式的阅读体验即可，目的是方便第一时间抓取用户、吸引用户达到留住用户的目的。当用户产生兴趣以后想要进入下一步操作如：点赞、评论时才会弹出登录/注册，一方面是获取用户的身份等信息，另一方面是间接性的把用户留下来。从产品业务属性来看，今日头条的布局把重要的内容放入中间，并且占有整个布局的一半大小，其次放在内容两侧；
飞书属于工具协作类产品，用户第一次打开产品需要注册才能使用。与新闻阅读类产品不同的是工具类型产品用户目的比较明确，所以首页做成一个功能介绍页面，作用是引导用户了解产品核心功能从而转化成产品的用户。当然功能介绍页也是一个网站的门面，首页想要出彩，不仅需要在布局上做的合理还需要考虑网站的色彩、插图等元素的统一性。在设计网站时，首页的功能介绍页一定要充分突出自身产品特色，强调出自身产品的优势和亮点，如飞书首页主要是想突出其产品能够提高工作效率，所以直接把「在飞书，享高效」slogan 这句话放在了首页的第一屏，辅助文案详细的介绍了产品的核心功能，直接抓住用户的痛点。用户完成注册以后，进入到功能页面，如右下图可以看出，其系统布局的模块分成三份，占面积最大的模块属于产品最核心的部分也就是聊天窗口，较重要部分是联系人部分，最小区域是功能 Tab 部分。
小结
所以对于设计师而言，在设计页面时必须熟练掌握一些基本设计基础知识，并且将这些知识灵活运用到实际的工作当中。比如设计师在搭建系统布局时需要熟知页面视觉层次、格式塔理论、信息框架等知识才可创建合理的布局基础。当然布局框架只是整个产品的基础骨架，在骨架确定之后，设计师才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。
系统布局规范，需要通过统一的设计元素和间距规范去引导使用者们（使用规范的设计师）跨平台使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。
一致性：对于界面来讲，界面中的元素和结构需要保持一致性，如：在使用布局时应当使用一致的网格，基准线和填充，在使用设计元素时配色、图标、文本等需保持一致。
可适配：布局是可自适应的，根据用户在不同的设计环境下能够通过交互动效、界面样式有效作出极致适配反应。用户操作后需给出即时反应。
可控性：当用户看到界面时应直观有效传递内容，如界面中模块区域明确、内容组织明确、表意明确都能使得用户快速理解。界面需要简单直白，让用户快速识别，减少用户记忆负担。
在设计过程中，为了减少设计师们的日常沟通和理解成本，在设计内部我们统一了一套设计画板尺寸为 1280。经过我们官方调研得出在中台系统中用户使用的电脑屏幕主流分辨率分别为：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最为保险的的一个尺寸，在设计页面时设计师如果能够在 1280 尺寸下，缩小宽度或拉升页面宽度都能保证没有遮挡或挤压问题，那么设计是合理的。在我们的规范中页面再小于 1280 时需要吊起系统的横向滚动条。在中台系统中考虑到用户效率问题很少做响应式，所以常规情况下设计师会限定界面的一个最小值。如果设计师把画板设置为 1440 或者 1366 时可能会存在其在画板中页面大小正好合适，但是页面上线以后缩小浏览器可能会发生遮挡或挤压的情况。所以我们建议设计师们使用 1280 宽度画板画图。
首先先分析一下界面框架，我们将页面的用户操作行为进行层级区分。我们至下而上将元素进行层级分层，目的是把用户界面模块化。界面可分成背景区域、内容层、全局控制层、内容弹层，每一层都具备独特性，将界面中所有的信息层级提取分类并且按结构属性分层，目的是能够使得页面视觉和交互逻辑符合用户的习惯认知。之前我们有提到过视觉层次、格式塔理论和信息框架，设计师在创建这一步的时候可以用来指导搭建一套合理的页面信息层级，一个内容模块都属于一个容器，容器可以承载各种内容元素。
背景层
背景层样式固定，在界面中永远置于界面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。
内容层
视图结构中最核心和复杂的一层，他与业务强相关，内容层的容器承载了业务场景的用户需要获取的核心信息以及辅助核心任务的操作。容器承载了内容，从 Material Design 中的 Elevation（海拔）概念中可以了解到，它属于第二层级内容，基本布局结构有平行结构或者父子结构。如下图卡片属于容器，卡片中承载了数据图表等内容，整个卡片+内容就属于内容层。
全局控制层
全局控制层我们定义他在内容层之上，属于页面第三层级内容，一般在业务场景中对整个网站的控制以及导航功能如：Header menu、Sidebar menu 组件，如下图中 Header menu 浮在内容层之上。
内容弹层
当前任务或者内容相关的临时出现层，优先级高于内容层，一般承载当前需要临时处理的任务或者需要进行内容补充说明等功能。如：Modal（Dialog 各个平台叫法不一致）、Tooltip、Popover、Notification 等组件 。其中 Modal 是以滑出或者弹出的形式展现给用户。Modal 它包括两种类型，一种是模态内容层不可操控，被蒙版遮罩禁用，比如在业务中需要较为聚焦的分支流程操作时使用。另一种是非模态，吊起弹出层后不印象内容层操作。当然，Tooltip、Popover、Notification 都属于非模态，反馈较轻，不干扰用户使用界面。如下图的页面中的内容弹层使用了 Popover，在次页面它的功能就是加以补充说明。
随着科技高速发展，屏幕分辨率也越来越多样化对于 UI/UX 设计师来讲必须熟练的基本知识方便日常工作所需。首先我们先了解一下屏幕中的一些单位。
在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能导致开发实现稿的视觉不符合设计师心理预期，比如：相同像素尺寸的 UI 元素在低密度屏幕上显得较模糊，而在高密度屏幕上则比较清楚。同一物理尺寸（肉眼所见尺寸）下，低密度显示器的像素个数明显小于高密度显示器的像素个数。
其实像素是与密度没有关联，我们简称密度为 DP (读作 DIP，英文全称 Density-independent pixel )，它是可缩放的灵活单位，可在任何屏幕下现实相同的尺寸，如图显示，红色网格为像素密度，被放大内容为 UI 元素物理尺寸。
所以我们可以得出，DP 可以自适应屏幕的密度，不管屏幕密度怎么变化，实际显示的物理尺寸相同，DP 可以保证物理尺寸的一致性，所以 DP 是目前比较适合 UI 设计的单位。当屏幕的密度为 160 的一个物理像素时，1PD=1PX。要计算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。
关于网格
网格线(Grid Line)，网格线又称布局分割线，它是构成网格结构的分界线。一般在布局中它们是由行网格线和列网格线组成。如下图是模拟网格做了一个示意，其中橘黄色两根线分别是行网格线和列网格线。
网格轨道(Grid Track)，两个相邻网格线之间的空间。你可以把它们想像成网格的行或列。如下图橘黄色的行网格线和列网格线之间的空间既是网格轨道。
网格单元格(Grid Cell)，两个相邻的行网格线和两个相邻的列网格线之间的空间属于网格单元格。这是网格系统的一个「单元」。如下图橘黄色的行网格线和列网格线交叉处即是网格单元格。
网格区域(Grid Area)，由单个或多个网格单元格组成，它是可以用来摆放页面元素。如下图所示，橘黄色的行网格线和列网格线交叉处即是网格区域。
网格设置
在设计界面时可以通过网格定制能够使界面更加有序、整齐、规范，网格的主要用途之一是保持设计元素对齐和排序。通过建立一个网格系统，设计师可以为自己创建一个结构来适配不同的屏幕宽度。
在我制定的规范中一般会把网格的基数设置为 4，它不仅符合偶数的思路同时也能够匹配多数主流的显示设备，如中台系统的用户主流分辨率用 1440*900、1366*768、1280*800。我们可以通过设置网格规范帮助设计师快速搭建页面，使用有律可循的布局空间的设计给到开发减少沟通成本。下图所示设计布局网格由三个元素组成：列宽，间距，边距。
在 Sketch 中设置网格，在菜单栏中找「视图」-「画布」-「网格设置」-弹出浮层可设置网格大小，网格设置的基数设置成4，之后在设计界面时可按照网格基础的倍数作为组件的大小和页面元素间距分割，如下图：
我们放大页面局部大家可以看到，把网格基数设置成 4，每个网格单元格为 4*4 大小。同理，如果把网格基数设置成 8 以后，每个网格单元格大小为 8*8 大小。
界面框架内系统布局是页面所有模块的组合方式，我们定义一个页面框架中基础模块和内容模块的数量最好不超过 3 个。经过调研和归纳总结出 3 大布局类型，分别是上下布局、左右布局、T 字型布局。
上下布局布局是 Web 端运用最广泛的布局方式之一，页面内容区以 feed 流形式展现，一般用在 Web 端官网首页。设计师普遍做法是对两边留白区域为内容区并进行最小值的定义，一般定义值为 1200 较多（具体宽度要设计师如何设置栅格，后面会讲到如何设置栅格），当留白区域到达极小超过极限值之后需要对中间的内容区域进行动态缩放或遮挡，此逻辑需设计师根据业务所需而定。也有少部分设计师会设计成全屏布局，内容随浏览器宽度自适应。
其优点是页面结构清晰简单，强突出内容区，但缺点是布局的规矩呆板，变化少。设计师如果不注意合理的视觉元素和色彩细节变化，用户很容易感觉到乏味，此布局适用于层级较为简单页面。
巨量引擎（Ocean Engine）是字节跳动旗下的营销服务品牌，整合了今日头条、抖音短视频、火山小视频、西瓜视频、懂车帝、Faceu 激萌、轻颜、穿山甲等产品的营销能力，为全球广告主提供综合的数字营销解决方案。我在设计此官网时正是采用了上下布局作为页面布局，顶部导航整合了所有子页面的内容，导航下方为主要内容区并且内容定宽，当时采用此布局原因第一是因为次官网层级较简单只有三个层级内容，第二是官网更需要的是突出内容区，所有页面使用次布局更为合适。
设计师在设计重内容，轻导航类型网站是常用左右布局作为基础框架进行页面设计。此布局把系统页面分为两大模块，其中设计师常见的做法是将左侧设置成导航栏模块并且固定，常常用来控制全局内容。而右侧区域设置成工作区域或内容区，内容区可进行动态缩放。
下图为飞书沟通窗口截图，由于关系到内部信息保密性我把内容进行了模糊，从外观结构上看还是能大致了解飞书结构是采用了左右布局，整个布局结构清晰有理也是符合左右布局特点。从交互体验分析左侧属于导航区，它承载了不同功能并且固定。飞书属于即时沟通产品设计师考虑到浏览器窗口有限所以对导航设计成较小模块，而右边为聊天窗口对于业务属性分析它更为重要，所以模块较大。其导航栏固定，内容区可进行动态缩放。
T 字型布局常用在 Web 端的中台系统中，因为中台系统业务结构复杂、层级多，而 T 字型布局能够解决复杂结构的问题。使用此结构能够把页面结构清晰化，主次更加分明。设计师常常的做法是将顶部作为一级导航栏方便控制全局，二左边设计成是二级导航并且固定导航栏固定，右边的内区域可进行动态缩放（一般会把其设计成栅格动态区域），内容随浏览器宽度自适应。
下图是 Material Design 设计文档，首先简单介绍一下 Material Design，它是由谷歌的设计团队创建的一种语言，宗旨是帮助设计师们创建易用性和实用性较强的网站和应用程序，其设计理念是将现实中的物理学带入进设计中。Material Design 设计文档中的结构使用了 T 字型布局作为基础布局。页面分为了三个模块，其中顶部导航作为页面一级内容进行全局控制，接下来左边为侧边导航作为二级内容控制页面，右边是内容区满足用户使用浏览。从放眼望去整个页面架构清晰明了。
以上为 Web 最常见的三大布局，但是需要大家在实际的工作中灵活运用。设计师在日常工作中可能会遇到更为特殊的业务场景，设计师可以通过整理基础模块然后分析其业务的信息框架，将模块进行相互组合、嵌套归纳可以总结出更多的 Web端布局框架并落地到业务中。
刚刚在定义布局模块中已经分析过了三大布局类型，接下要分享的是 UI 设计师更为关注内容「网页栅格」。网页栅格也是设计师口中常常提及的栅格系统。其实网页栅格系统是从平面栅格系统中发展而来，它延续了平面设计的方法与风格，在网页中使用栅格能够使得网页信息展现更加清晰明了、美观易读。
首先网页栅格系统基本由是栅格总宽度/页面总宽度（W）、一个栅格的宽度（a）、栅格与栅格之间的间隙（i）、一个单元的宽度（A）、外边距（M）组成。
1. 列宽
一个栅格的宽度（a），我们称之为列宽，一个列宽包涵了N个网格单元格（Grid Cell）我们也可以把它看成一个网格区域(Grid Area)，在上面我们已经讲到过网格的内容，主要目的正是为栅格做铺垫。其中我把一个网格单元格设置为4（原因在网格中也解释过，如果忘记的同学可以爬楼看下）。由此可见列宽非固定值，这样可以使内容自由适配任何屏幕尺寸。在栅格中列宽由屏幕尺寸决定。
2. 水槽
栅格与栅格之间的间隙（i），我们称之为水槽，一个水槽宽度大于等于1个网格单元（Grid Cell）。在栅格中水槽为一个定值，宽度可以是N个网格单元，如网格单元格设置成4，那么水槽可以是4、8、12、16…N*4。
3. 栅格单元
1个列宽+1个水槽宽度即一个单元的宽度，一个栅格总宽是由N个栅格单元组成，次宽度不固定，由屏幕尺寸决定。
4. 栅格总宽
列宽+水槽再成以N即是一个栅格的总宽，公式为：W=(A*n)-i。
5. 栅格设置
经过调研我们得出常见的栅格分为 12 列栅格系统和 24 列栅格系统。其中 12 列栅格系统在流行的前端开发开源工具库Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少、业务结构较简，单个盒子内信息体积较大的中后台页面设计。24 等分的栅格系统适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对 12 栅格系统，24 栅格系统变化更加灵活，更适合内容比较多样复杂的场景。如下图分别是 12 栅格系统（左）和 24 栅格系统（右）。
6. 小结
在栅格系统结合布局结构和网格做了我做了一些知识结合，其实前面所讲的网格版块和布局版块都是为栅格做一个铺垫，利于同学们更加深入的了解网格、布局、栅格三者的关系。
系统布局只是网页中的基础部分，但也是核心内容，一个产品布局需要根据其业务属性决定。布局搭的好相当地基打得好，但是同时在对美感的追求之上，还应当结合可用性来看待设计。在实际的工作中肯定还会遇到各种形形色色较奇葩的需求，所以希望这篇文章能够做的不是限制而是启发，大家可根据此次分享内容能够进行举一反三利用到实际的工作当中。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
版式设计是大部分设计师再熟悉不过的一个词了，市面上很多文章都有普及过各种版式设计知识，比如：印刷中的版式设计、移动界面中的版式设计等等。但是在我做中台规范时调研发现针对中台系统文字规范内容科普的知识较少，可能是中后台设计在国内还是处于初级阶段吧。所以结合调研内容到实际工作中的总结给大家分享关于Web端文字系统的相关内容。
加拿大印刷术家罗伯特·布林赫斯特（Robert Bringhurst）在他撰写的《印刷风格的元素》一书中将印刷术定义为以持久的视觉形式赋予人类语言的技艺。在中台界面文字排版的易读性、美观度是设计师的首要任务，要创建阅读性高和较美观的中台界面文字排版是设计师们必须学习的基础知识之一。因为不论在App界面还是Web网页设计中文字内容总是能占到整个版面的80%～90%的区域，好的文字排版能够大大提高用户的使用效率。所以本篇文章将站在一个网页设计师的角度分享Web端界面中文字系统的基础知识，从基本网页中的系统字体初识、字体排版基础理论、国际化文字适配，希望大家能够合理运用在中台界面的版式中。
1990年12月25日，英国计算机科学家蒂莫西·约翰·伯纳斯-李爵士（Tim Berners-Lee）成功发明了万维网，并弄清了统一资源定位符（URL），其中超文本传输协议（HTTP）和超文本标记语言（HTML）的概念后，他在Internet上发布了第一个网站。自从Internet发明以来，字体在Web上扮演着重要角色。1990年至今，网络已经彻底改变了我们的生活方式和工作方式。在最初的20年中，Web经历了许多变化，例如采用Web标准，使用CSS进行布局以及处理动态数据。虽然网络从一开始就包含文本，但直到最近几年它们才得到很好的应用。
在1990年代中期，英国字型大师马修·卡特（Matthew Carter）设计的Georgia和Verdana两款字体广泛用在基于屏幕的网页中。为了使字体在当时分辨率较低的屏幕上清晰易读，马修·卡特设计的这些字体具有X高度大、开孔宽敞的字体空间。由Microsoft专门针对网页上的文本进行处理，Georgia和Verdana首先在位图中进行设计，以适配当时网页屏幕的分辨率，最后把文字转换为轮廓字体，进行文字图形化。
1990年代到2000年代中期是网页设计的一段过渡时期网页更加图形化，系统默认自带的字体如：Georgia、Verdana、Arial、Helvetica、Times New Roman已经满足不了设计师们的设计需求。设计师们必须使用Photoshop和Illustrator等相关工具将一些特殊字体的每一段文本切成图偏提供给开发人员，但是这种方式有着很多弊端，问题主要集中于本文不可选择、复制、翻译甚至是不可搜索。其中newyorker.com可作为典型代表，其网站在使用Typekit（可提供其自定义字体库）之前，为了让网页与原印刷出版物保持一致，便使用了切图方式将特殊定制化文本进行切图处理，直到该该公司2010年11月开始使用Typekit自定义字体库后才解决字体图形化这种耗时耗力的方式。
在上面提到了在Jeff Veen还未创立字体服务Typekit之前，很多时候系统自带的几种字体满足不了设计师需求，所以设计师们使用文本转图片的技术进行处理。为了解决这些问题肖恩·英曼（Shaun Inman）2004年开发了SIFR，虽然SIFR解决了图片切图问题，但其中也还是有一些问题存在，比如，太过依赖Flash，并且设置SIFR还需要掌握大量的相关知识，门槛较高。2009年Simo Kinnunen又将技术改进称为Cufón，他使用canvas和VML快速替换文本，无需Flash或图像。Cufón由两部分组成：一个字体生成器（将字体转换为专有格式）和一个用JavaScript编写的渲染引擎。虽然文本图片转化技术一直在不断完善中，但是归根结底文本图片转化技术并不是网页中的文字排版。
直到2009年Jeff Veen离开了Google并且同一年创立了字体在线服务Typekit，极大的丰富了设计们的字体选择。2011年Adobe收购Typekit（也就是现在Adobe Fonts），并且Jeff Veen也因此成为Adobe产品的副总裁，负责Creative Cloud业务，负责Adobe旗下几乎所有产品的在线体验。
可变字体指的是一个字体默认状态进行多个样式扩展，他是一种含有多种变化的单一字体：即所有字宽和粗细、甚至是斜体的变化都可以包含在一个单一、高效且可压缩的字体文件中。比如说PingFang SC，如果在系统上使用，同时包含了六种字重：常规体、中等、细体、特粗体、特细体、粗体。
可变字体是由Adobe, Apple, Google, Microsoft四大巨头在20016年9月联合在波兰华沙的ATypI会议上宣布的Variable Font的字体规格OpenType，OpenType特点在于可将多个字体打包成一个字体，并且不会增大字体文件包的大小。他解决了某单个字体文件可以获取各种粗细，宽度，高度，样式和其他属性的问题，具有灵活性。可变字体为Web上的排版提供了一个跨时代的变化。目前排版软件厂商、字体设计师、字体厂商都积极地大量投入可变自己提的研究和开发设计，并且广泛运用在操作系统和印刷行业。
目前在主流的操作系统、浏览器、设计软件都在不同程度上支持可变字体。像操作系统，Mac os、iOS、Android、Wear OS、Fuchsia。浏览器Safari、Chrome、Edge、Firefox。设计界最为熟知的图像编辑工具Photoshop、Illustrator、Sketch、Figma也已支持可变字体，设计师可以使用该设计工具进行同款字体不同样式的使用。
举个比较比较典型的例子，在2019年9月小米推出了全新的 MIUI 11 系统，并带来了小米兰亭Pro动态字体系统，小米兰亭Pro字体联合方正字库联合开发。在 MIUI 11操作系统中，用户可以通过系统设置进入字体模块，拖动相应滑块即可改变手机界面用字的字体大小和字重粗细。MIUI动态字体支持文字粗细无级调节，每个人都可找到适合自己的字重，下图是MIUI 11系统中可变字体的演示：
字体是体系化界面设计中最基本的构成之一，选择字体是一个具有创造性和情感的过程，因为不同的字体传达出不同的情感。在制定用户界面规范时科学的定义字体规范系统，不仅能够有效的表达出不同的设计风格，还能通过定义字体的字族、字阶、字重、字体颜色、字体行高，有效帮助设计师在设计界面时使用字体达到统一性和整体性，保证界面有良好的阅读体验。首先，先为大分享一些非常实用的字体网站。
第一个我要推荐的是Adonbe旗下的Adobe Font，网站中有非常多优秀的字体。但是网站字体需要收费，一般是按照使用量的形式进行支付版权费，特点是可设置属性进行字体样式实时预览，并且字体比较全。
在Google Fonts，你可以免费下载你喜欢的字体，并且按照你的需要在项目中使用。由于在系统中使用其他字体的唯一方法就是将字体文件导入到系统中，因此Google Fonts的下载功能非常有用。Google Fonts包含超过1400种不同的字体，其中包含最著名的：Open Sans和Roboto字体，他们是Android系统使用的默认字体。
设计师在做设计时常常会遇到某些网站或海报使用的字体特别喜欢，但是苦恼无法获取改字体的信息导致无法下载使用，求字体网解决了此痛点。你可以将喜欢的字体进行截图并上传到网站进行字体识别，确定后他会提供出字体下载链接或者字体信息，解决设计师们喜欢某个字体而找不到的烦恼。
字由也是我比较推荐的一个字体网站，个人用的也会比较多。官网将全部字体进行整理分类方便用户快捷寻找字体，并且有个分类是免费商用字体库，避免了常常困惑的设计师使用字体导致版权纠纷问题。此有网站有两大亮点，第一是此网站在设计师选用字体时有个实际运用预览效果，直观的看到字体在实际使用效果，第二是网站提供客户端下载，在客户端中点击下载以后可直接进行在设计工具中直接使用。
在选用系统字体时需要考虑在不同系统的兼容性，大家都知道在不同的操作系统及不同的游览器中默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同。在做字体规范时需要提供一套系统完整的字族，里面不仅需要包含系统默认的界面字体，还需要一套有利于屏幕显示的备用字体，方便维护不同系统及浏览器的实现，保证在任何场景保持良好的阅读性和可读性，下面是我在做界面规范时与相关同学一起选取的界面字体。
第一部分：-apple-system是在以WebKit为内核的浏览器，比如苹果的Safari中调用苹果系统macOS、iOS、watchOS、tvOS中默认字体，目前一般情况下英文使用的是San Francisco，中文使用的是PingFang。BlinkMacSystemFont是在Chrome中调用苹果系统的字体。
第二部分：主要是提供了Windows和MacOS下的字体。其中Segoe UI针对Windows and Windows Phone等系统。PingFang SC是苹果为中国用户打造了一款全新中文字体，整体样式看上去更加简洁，字族共6个字体：极细体、纤细体、细体、常规体、中黑体、中粗体。Hiragino Sans GB是是Hiragino KakuGothic的简体中文版，由日本设计师为MacOS和iOS系统中内置字体，简体中文有常规体和粗体两种，冬青黑体是一款清新的专业印刷字体，其小字在屏幕显示时足够清晰，拥有很多用户的追捧。Microsoft YaHei是从Vista开始，微软提供了这款新的字体，它是一款无衬线的黑体类字体，并且拥有Regular、Bold两种粗细的字重，字重有效提高了字体的层级显示效果。目前这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始，微软雅黑又加入了Light这款更细的字重，对于喜欢细字体的设计或开发人员又多了一个新的选择。
第三部分：主要是系统备用兜底字体，Helvetica Neue在没有El Capitan versions系统的电脑中是最流行的，所以作为兜底，sans-serif也是常见的兜底字体；
第四部分：主要是系统的emoji，在我们的规范中选用了'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' 针对在macOS和Windows显示emoji。
在设计规范系统中字体是用户体验相当重要的一部分，因为不论在App界面还是Web网页设计中，不同的系统分辨率、不同的显示器尺寸、不同的DPI都会对最终展现的文字大小带来影响，并且文字在内容区总是能占到整个版面的80%～90%的区域，所以要根据用户使用电脑的分辨率给予用户一个比较合适的默认字号。那么这个字号多大合适呢？是12px、13px、14px还是15px比较合适呢，所以我们回到这个老生常谈的问题进行分析。
在做规范时调研了在市面上各大较流行的网站，目前大部分文本类字体大小都采用了12px-14px范围的文字大小。另外Windows自带的点阵宋体从Vista开始只提供12px、14px、16px三个大小的点阵。所以，如果13px、15px、17px虽然每个字的空间大了1px但是点阵却没变，从视觉上会显得略稀疏，可能导致显示效果不佳。偶数字号的文字，比如12px的“中”字，去掉1像素的间距，填充了像素的实际宽是11px，文字的中竖线左右是平分的显得均衡，具有美感。如下图所示：
但是也有少部分网站使用基数作为文本大小，比如知乎正文使用15px，豆瓣首页标题下面的的简介文字使用的13px大小，我简单的分析了一下，知乎在改版之前文本类内容用的13pt大小的可能是有用户吐槽页面文字太过于密集后来统一改成了15pt，知乎和花瓣页面虽然使用的是基数但是整体效果还算不错。不过为了字体使用更加的“安全”还是推荐偶数作为文本规范。
还有些因素会比较推荐用偶数，比如说从浏览器角度上看，因为某些电脑的浏览器上如在IE6浏览器会把基数的字号自动渲染成偶数系。在一些画图软件如Figma、Sketch、Photoshop等一些画图软件在设置字体大小属性时从12px以上都是采用偶数进行快捷选择，这也形成了一种常见的习惯。
在文字规范时也借鉴了设计界大佬AntDesign的规范，Ant Design 3.0 的时候，对主字号进行了研究，饮用AntDesign的解释“我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳。”
同时我们也站在电脑屏幕分辨率也有过调研，在上一篇分享分享的系统布局中也提到了，目前大部分中台系统中用户使用的电脑屏幕主流分辨率分别为1440*900、1366*768、1920*1080、1280*800，因此在这些主流电脑分辨率中经过实验，14px小大的文字效果以及阅读体验会比12px更加的舒适，并且内容会更加的清晰。
总结以上几点分析我们得出，在界面中使用偶数会比基数更加的美观、安全，也比较利于设计师的使用习惯，并且在纠结使用12px还是14px字体大小的很长一段时间里我们经过调研竞品以及进行不同屏幕分辨率下字号的实验最后确定我们字号使用14px正常文本大小，12px可作为辅助文字使用。
行宽是指一行字的长度，那么在用户界面排版中我们使用多少行宽比较合适呢？引用Fusion Design的解释“从生理结构分析，人在阅读文字的时候，理解并传递到大脑的信息是有限的。用户在阅读时，目光左右上下巡视、扫描和阅读，这意味着阅读要求大量的眼球运动。行宽越长，眼睛移动的距离太长太多。宽度较大，眼动位移较大，读者阅读换行时容易串行。行宽越短，眼睛阅读折行的次数太多。行数较多，眼动跳跃次数多，读者阅读行时会感觉到文字不连续。”所以在操作界面中避免过长、行数较多的文字，阅读是大脑活动中一种最复杂的过程，比如说在操作系统中界面操作较复杂，如果出现大段的文字用户不仅要操作复杂的系统，还需要进行阅读理解大大降低了用户的使用效率。
加拿大印刷大师罗伯特·布林赫斯特（Robert Bringhurst）有一个算法是：行宽=字号x30，例如：设置字号为14px大小，那么我们建议其基础行宽是420px左右。中文一个字体宽度是14px，那么建议一行建议30个文字。注：在文字宽度规范时，为了考虑国际化的适配，避免多语言差异我们不以文字个数作为度量单位，而是以整个行宽来计算，比如说表单Title、Table。
行高是指在多行里面一行文字与另一行文字之间的的间距，每行文字占用空间的高度。我们定义行距(行高) = 字号 + 行间距，而不是单指字体高度，所以文字的高度不等于字号的高度，如：字号12px，行高为22px，根据Web页面平均分配原则，行距就是从文字的顶端上移4px到文字底部下移4px的距离。如下图所示：
在页面布局分享有提过视觉层次，因为视觉层次是设计过程中的核心方法之一，对于中台的UI设计师们而言，良好的理性思维相对比感性的视觉思维更加重要，因为在UI设计师设计界面时需要把界面中很多互不相关的元素有秩序的组织在一起，正确引导用户操作与使用。那么什么是视觉层次呢？官方概括：视觉层次结构致力于一种用户能够理解的方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它可以组织页面内容，以便大脑可以根据物理差异例如：大小，颜色，对比度，样式等区分对象。
视觉层次中的“层次”其实讲的是在设计用户界面过程中设计师需要有在内容上进行取舍，保证用户使用产品时能够让用户强烈的感知内容的主次，并且内容和功能优先级的高度进行区分，有效的减少用户在操作界面时对内容需要就行二次过滤。比如说某个提示说明在页面上最高，那么此提示在界面中一眼看过去需要最被突出和强调的。如果用户界面看起来一团“糊”，那么这个设计是失败的，因为它不能有效的帮助用户进行内容筛选，导致用户还需要使用时花大量时间去阅读操作。
视觉层次分为4个基础部分，其中包含了大小对比、字重对比、位置对比、颜色对比。
同样还是用苹果官网作为案例，真心觉得官网设计太好了。苹果的设计一直以来都是引领着设计趋势，其设计被国内外用户所认可，所以就以苹果官网作为案例。其中，字重对比：苹果官网在字重上给人眼前一亮的感觉，它采用Medium+Bold的字重使得标题与详情内容产生强烈的大小对比，用户进入官网的第一眼便能了解核心内容。颜色对比：在颜色上使用黑色背景承托产品和内容，强烈的黑白对比增强了信息传播中的识别度和对比度。图文排版：在图片与文字排版中使用了文字层和图片层互相叠加的视觉效果，使得页面层次感更加的丰富。如下图：
格式塔原理或格式塔定律是感知场景组织的规则，人们感知由许多元素组成的复杂对象时，会采用有意识或无意识的方法将这些元素安排到整个组织的系统中，而不只是单一的元素级。它适用于不同级别的感知，其中视觉部分是设计师设计界面时最能体现价值的部分。
格式塔（Gestalt）这个术语来自德语单词Gestalt，中文翻译为“形状，形式”，格式塔心理学家库尔特·科夫卡（Kurt Koffka）的一句话可以捕捉到这一运动背后的基本思想：“整体不是元素基因的总和”。官网概括：“在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割”。格式塔理论中元素之知见的原则分别为临近，相似，连续，封闭和连接。在用户打开界面进行阅读或者操作界面时视觉的第一感受是产品的整体效果，而并不会感知到一些较细节的元素。
在设计用户界面时需要理解格式塔定律中5大定律，分别是接近、相似、闭合、连续、简单，其中两个最重要的定律分别是接近定律和相似定律，这两个定律主要描述了我们感知事物的核心方式。
人类的大脑总是把一些细节复杂的元素分析归类，将相对靠近或有相似的连接点的内容作为一个整体，在我们的生活中有类似的在我们的现实的生活中有很多自然规律中遵守了格式塔原理的接近定律，比如说比如说每到秋天，北方的严寒气候不再适合大雁生存，这时候大雁便会飞往较暖和的南方，当人们看到天空正在南飞的大雁队伍，它们组织链接得十分严密，并且群体在同一个方向移动，所以队伍的形状在我们的大脑中将它们视为一个群组的一部分，产生人字形或一字形的图形。当你看空中一些比较特殊的云朵比如像猫、像飞鸟等图形，是因为蓬松的气体发生形变，形成了酷似动物或生活中熟悉的物体。这其实都是人类大脑通过潜意识进行脑补和整理出来的画面，如下图中的元素彼此靠近的元素归为一组，相反距离较远的元素被视为不同组。
其中在元素排布中也有一定的规律性，比如当行向间距大于列间距时，那么视觉的行排布的横向关系密切形成整体。当纵向间距大于列间距时，那么视觉的列排布的纵向关系形成整体，如下图所示：
以今日头条和优酷视频作为案例，首先进入到今日头条首页后映入眼帘的是无穷式的信息流。可以看出设计师使用接近原则对信息进行分组、组织内容和整理布局。卡片承载的内容形成模块，模块与模块之间的这里发挥着至关重的的作用，因为它引导用户眼睛朝向预期的方向，有效引导用户使用。并且其排列方式是比较典型的纵向关系，可以看出行间距小于列间距，增强了纵向关系，有助于用户阅读和分类。把重要信息流的内容模块放置中间位置，其他次要内容放置左右两列。
优酷视频是个大型视频分享平台，进入到首页同样是无穷式的视频类信息流。我们可以看到产品排列方式与今日头条正好相反，除了顶部导航以外内容区的行间距大于列间距，增强了横向关系并且以横向关系密切形成了整体，属于典型的横向关系排列。其中视频封面与下面的文本形成一个内容小组，内容小组与内容小组形成一个大分类。由于产品视频分类较多，所以从页面排版上使用横排关系将白色的空间增强了视觉层次感有效将视频类型横向区分，帮助用户更快的找到相关类型的视频内容。
接下来再说下相似定律。人们大脑总是把一些相似视觉特征的元素被认为是一类，与不具有相似视觉特征相比较具有相似特征的元素关联性更强。在用户界面排版中具有相似功能的元素在样式上应该保持一致，比如说在操作界面中Link的颜色为蓝色，那么用户在操作界面时默认会把蓝色的文字理解为可点击Link。
设计师在设计界面过程中可以使用相似定律将元素进行元素分组、元素组织、元素布局。但是需要强调界面中相同的元素（组件），如按钮、下拉、标题、正常文本等一些基础组件需要使用相同的设计语言，保持一致的颜色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里说过：“在界面设计中，要采取一致的行动顺序”。因为用户会将视觉属性相似的内容分组，将最相关的内容彼此靠近作为小组，小组与小组之间可组合成大组也就是我们在布局中提到的模块，最后由模块组合呈现出页面形态。
西瓜视频是个性化推荐短视频平台，从下图中可以看到首页分为影视和短视频两类，这也是西瓜视频的两大特色功能。设计师在设计界面时考虑到影视和短视频这两大类视频需要在视觉感知上需要进行区分，所以设计师运用了相似定律进行设计，其中竖版视频封面与下面的文本形成一种内容小组，横版视频封面与下方内容组合形成另一种内容小组。以不同的形状来告知用户的功能类型差异。如下图所示：
在网页设计中不论是视觉层级还是格式塔定律，其实都是由我们人类的大脑神经感知事物的规律总结而来，在生活中每个人潜意识都具备这种技能，因为人们总是喜欢有规律的事物，规律可以让事情变得更容易理解。同理在设计用户界面时不仅仅是为了漂亮美观，还需将界面中内容有效的进行梳理并传达给用户。
随着公司业务不断快速发展以及互联网信息的快速交流与传播，很多产品已经突破地域的边界走向了海外市场，并且个人也因为在实际项目中产品切换多语言时产生了各种各样的体验问题，所以为了提高规范体验设计师们应该提前自主探索和思考关于产品国际化的相关内容。今天主要浅谈文本适配问题。
在实际的工作中会遇到界面使用中文时布局非常的合理，但是一切换到其他语言时出现各种折行或者是遮挡的问题。主要原因是因为文字的长度会因语言不同而异，即使是使用同类字形的语言也是如此，比如说英文“New”翻译成法语是“Nouvelle”，并且法语的感叹号前面还需要留一个空格，字符数从4个变成了8个。所以设计师在做规范时一定要考虑预留出更大翻译空间，以下是网上找的一些Bad case。
在多语言适配时我们发现很多书写系统，如阿希伯来语、拉伯语、波斯语、乌尔都语等，都是以右到左对齐方式进行字符显示，并且在相同的字体大小情况下，这些字体可能看起来比西伯来语字体要小，所以需要考虑调整行间距和对齐方式，使得不同字体在相同界面中都适用。并且使用这些语言的人口数量相当大，特别是在波斯湾地区由于石油经济发展特别迅速。对于面对中东地区出海的产品，是不能回避的问题，所以要及时作出可配性方案。
在多语言适配时因为不同的语言可能在同一界面中需要设定不同的行高达到最佳效果，可以定义3种行高尺寸来做多语言适配，分别为大（l）、常规（lg）、小（s）。从下图可以看出区别较大的是泰语和阿拉伯语的字型高度相差较大，可利用相对合理的行高尺寸进行匹配，比如泰语字型较高可使用大（l）尺寸作为文本行高，阿拉伯语字型较低可使用小（s）尺寸作为文本行高。
设计师在设计界面时经常遇到文本与组件的组合排版方式，但是其中会有比较多的“坑”，设计师们很容易不小心就陷入“坑”中。举个例子，比如设计师们会为了更加美观会把组件插入一段文本中间中进行混合排版，这种组合方式有几个比较大弊端。第一不同语种有不同语法顺序，比如法语形容词的后置，日语里动词的后置。第二复数问题，在英语里面，每个名词都有一个单数形式和一个复数形式，比如One picture复数是Two pictures。但在俄语里面，复数有三种可能的形式。在法语里面，有不少单词变成复数之后拼写也会改变。所以，如果用户要在句子中间输入数字这种设计就可能造成语法错误。第三有些语言里面，单词是区分阴阳性的。比如在法语里面，形容词也是有阴阳性形式的。所以如果你在句子中间插入一个下拉菜单框，那么可能又会造成语法错误。
产品国际化题材比较大涉及到的内容也会比较广，可能需要考虑的不仅限于文本适配，还需要考虑很多的因素比如说各国的文化差异、本地格式、地区标准等等，所以今天主要站在文字适配的角度给大家分享几个做国际时需要关注的小点。
本篇文章主要是网页中文字系统初识，网页中的文字虽然看起来比较简单但是每个内容板块拆分开都是值得深挖的。比如说文字结构、如何结合印刷理论应用到网页排版中、解刨多语言适配等等吧。本片文章还是秉着启发的态度与大家进行网页文字系统的探索，希望大家能够可根据此篇文章结合工作中实际案例举一反三，更深入地探索相关内容。在这里再次强调一下产品国际化方面内容，互联网信息的快速交流与传播使得人与人的连接越来越容易，很多产品进入海外市场是必经之路，大家可提前做好相关知识储备，还是那句话也希望自己后续可以多归纳总结与大家展开探讨分享。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这里的图片选择要突出核心内容且一定要高质量，不要选择杂乱无章或与主题无关的低质量图片
结合页面表达需要，选择合适的配图并做融合或出界的设计，会让画面极具吸引力和强烈的设计感。
当画面主要以高质量图片吸引用户注意时，尽可能的利用更大展示面积，这样会显得更加高级和有视觉冲击力。
这里的色块要注意跟图片的主色调保持相近，可以直接吸图片上的颜色然后找找邻近色就好了，色环上 30°区间内的颜色就比较和谐。
这里的形状建议不要太过于复杂，用一些基本图形就可以，比如圆点、方块矩形之类的，增强画面的形式感
这里的文字、图案或不规则形状跟上面的技巧类似，都是起到装饰的作用，但文字的话有时候还要注意识别性，比如文字比较紧凑的时候。图案或形状更多的是起到视觉引导的作用。
这个很好理解，就是以文字或形状作为遮罩，增加画面的设计感，文字尽量选择粗体
这个技巧可能跟第 3 条有些冲突，其实这 2 个方法都是可以的，要根据页面具体的排版情况灵活使用。
这个技巧也比较容易理解，一般会选择饱和度较高的颜色应用在充满活力的页面上，增加画面的冲击力。
这个技巧跟上面的有些类似，只不过是以小面积叠加的形式，颜色一般选择品牌色或主题色，与背景尽量有较大反差会更加容易出彩。
这个方法有一点需要注意的就是剪切的形状不要过于复杂，一般用基础图形就好
以上，就是我总结的一些可以用来操作 UI 图片的实用方法，这些方法可以使得作品变得更加有视觉感也更加专业。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一、前言
随着互联网的快速发展，B端行业也逐渐崛起，很多企业管理中使用的软件我们通常称其为B端管理系统，而在B端系统中“权限管理”是必不可少的功能，不同的系统中权限的应用复杂程度不一样，都是根据实际产品以及需求情况而设置合理的权限。而我们现在对于权限的设置基本上都是建立在RBAC权限模型上的、扩展的，下面我会通过介绍RBAC权限模型的概念以及结合实际业务情况列举权限设置的应用。
二、什么是RBAC权限模型？
RBAC是Role-BasedAccess Control的英文缩写，意思是基于角色的访问控制。RBAC认为权限授权实际上是Who、What、How的问题。在RBAC模型中，who、what、how构成了访问权限三元组，也就是“Who对What进行How的操作，也就是“主体”对“客体”的操作。其中who是权限的拥有者或主体（例如：User、Role），what是资源或对象（Resource、Class)。
简单的理解其理念就是将“角色”这个概念赋予用户，在系统中用户与权限之间通过角色进行关联，以这样的方法来实现灵活配置。
RBAC其实是一种分析模型，主要分为：基本模型RBAC0、角色分层模型RBAC1、角色限制模型RBAC2和统一模型RBAC3。
RBAC权限模型是基于角色的权限控制。模型中有几个关键的术语：
用户：系统接口及访问的操作者
权限：能够访问某接口或者做某操作的授权资格
角色：具有一类相同操作权限的用户的总称
RBAC0是RBAC权限模型的核心思想，RBAC1、RBAC2、RBAC3都是在RBAC0上进行扩展的。RBAC0是由四部分构成：用户、角色、会话、许可。用户和角色的含义很简单，通过字面意思即可明白，会话：指用户被赋予角色的过程，称之为会话或者是说激活角色；许可： 就是角色拥有的权限（操作和和被控制的对象），简单的说就是用户可使用的功能或者可查看的数据。
用户与角色是多对多的关系，用户与会话是一对一的关系，会话与角色是一对多的关系，角色与许可是多对多的关系。
RBAC1是在RBAC0权限模型的基础上，在角色中加入了继承的概念，添加了继承发的概念后，角色就有了上下级或者等级关系。
举例：集团权责清单下包含的角色有：系统管理员、总部权责管理员、区域权责管理员、普通用户，当管理方式向下兼容时，就可以采用RBAC1的继承关系来实现权限的设置。上层角色拥有下层的所有角色的权限，且上层角色可拥有额外的权限
RBAC2是在RBAC0权限模型的基础上，在用户和角色以及会话和角色之间分别加入了约束的概念（职责分离），职责分离指的是同一个人不能拥有两种特定的权限（例如财务部的纳入和支出，或者运动员和裁判员等等）。
用户和角色的约束有以下几种形式:
互斥角色：同一个用户在两个互斥角色中只能选择一个（也会存在一个用户拥有多个角色情况，但是需要通过切换用户角色来实现对不同业务操作）
基数约束：一个用户拥有的角色是有限的，一个角色拥有的许可也是有限的
先决条件约束：用户想要获得高级角色，首先必须拥有低级角色
会话和角色之间的约束，可以动态的约束用户拥有的角色，例如一个用户可以拥有两个角色，但是运行时只能激活一个角色。
例如：iconfont和蓝湖的用户与角色就采用了约束的概念，超级管理员只允许只有一个
RBAC3是RBAC1与RBAC2的合集，所以RBAC3包含继承和约束。
二、为什么要引用RBAC权限模型？
RBAC中具有角色的概念，如果没有角色这个概念，那么在系统中，每个用户都需要单独设置权限，而系统中所涉及到的功能权限和数据权限都非常多，每个用户都单独设置权限对于维护权限的管理员来说无疑是一件繁琐且工作量巨大的任务。
而引入角色这个概念后，我们只需要给系统设置不同的角色，给角色赋予权限，再将用户与角色关联，这样用户所关联的角色就直接拥有了该角色下的所有权限。
例如：用户1~用户8分别拥有以下权限，，不同用户具有相同权限的我用不同的颜色做了区分，如下图：
在没有引入RBAC权限模型的情况下，用户与权限的关系图可采用下图的杨叔叔展示，每个用户分别设置对应的权限，即便是具有相同权限的用户也需要多次设置权限。
引入RBAC权限模型及引入了角色的概念，根据上面表格的统计，用户1、用户3、用户5、用户8拥有的权限相同，用户2、用户6、用户7拥有相同的权限，用户4是独立的权限，所以我们这里可以根据数据统计，以及实际的需求情况，可以建立三个不同的角色，角色A、角色B、角色C，三个角色分别对应三组用户不同的权限，如下图所示：
对应的上面的案例表格我们就可以调整为含有角色列的数据表，这样便可以清楚的知道每个用户所对应的角色及权限。
通过引用RBAC权限模型后，对于系统中大量的用户的权限设置可以更好的建立管理，角色的引入让具有相同权限的用户可以统一关联到相同的的角色中，这样只需要在系统中设置一次角色的权限，后续的用户便可以直接关联这些角色，这样就省去了重复设置权限的过程，对于大型平台的应用上，用户的数量成千上万，这样就可避免在设置权限这项工作上浪费大量的时间。
三、引入用户组的概念
我们依旧拿上面表格案例举例，虽然前面我们应用的RBAC权限模型的概念，但是对于大量用户拥有相同权限的用户，我们同样的也需要对每个用户设置对应的角色，如果一个部门上万人，那么我们就需要给这个部门上万人分别设置角色，而这上万其实是具有相同的权限的，如果直接采用基础的RBAC权限模型的话，那么面对这样的情况，无疑也是具有一个庞大的重复的工作量，并且也不利于后期用户变更的维护管理，那么针对相同用户具有相同的权限的情况，我们便可以引入用户组的概念。
什么是用户组呢？用户组：把具有相同角色的用户进行分类。
上面我们的数据表格案例中的用户1、用户3、用户5、用户8具有相同的角色A，用户2、用户6、用户7也拥有相同的角色B，那么我们就可以将这些具有相同角色的用户建立用户组的关系，拿上面的案例，我们分别对相同角色的用户建立组关系，如下：
用户1、用户3、用户5、用户8→建立用户组1
用户2、用户6、用户7→建立用户组2
因为用户4只有一个用户，所以直接还是单独建立用户与角色的关系，不需要建立用户组，当然尽管只有一个用户也是可以建立用户组的关系，这样有利于后期其他用户与用于4具有相同的角色时，就可以直接将其他用户添加到这个用户组下即可，根据业务的实际情况而选择适合的方案即可。
通过案例表格的变化我们就可以直观的看出权限设置变得清晰简洁了，通过第用户组赋予角色，可以减少大量的重复的工作，我们常见的企业组织、部门下经常会出现不同用户具有相同角色的情况，所以采用用户组的方式，便可以很好的解决这个问题，给具有相同权限的用户建立用户组，将用户组关联到对应的角色下，此用户组就拥有了此角色下的所有权限，而用户是属于用户组的，所以用户组下的所有用户也就同样的拥有了此角色下的所有权限。一个用户可以属于多个用户组，一个用户组也可以包括多个用户，所以用户与用户组是多对多的关系。
四、引入权限组的概念
权限组与用户组的原理差不多，是将一些相对固定的功能或者权限建立组的关系，然后再给此权限组赋予角色，目前我所接触的B端项目中使用权限组的概念的比较少，可简单的看一下关系图
四、功能权限和数据权限
B端系统中一般产品的权限由页面、操作和数据构成。页面与操作相互关联，必须拥有页面权限，才能分配该页面下对应的操作权限，数据可被增删改查。所以将权限管理分为功能权限管理和数据权限管理。
功能权限管理：指的是用户可看到那些模块，能操作那些按钮，因为企业中的用户拥有不同的角色，拥有的职责也是不同的。
数据权限管理：指的是用户可看到哪些模块的哪些数据。
例如：一个系统中包含多个权责清单（清单1、清单2、清单3），系统管理员能对整个系统操作维护，也就可以对系统中的所有清单都能操作（增、删、改、查）；假如分配给总部权责管理员的是清单1，那么他将只能对清单1进行操作（增、改、查）；普通用户也许只有查看数据的权限，没有数据维操作的权限（查）,这里的操作是系统中所有可点击的按钮权限操作，列举的增删改查只是最常见的几种操作而已。
五、实战案例总结
我目前所做的项目是一个关于权责管理平台的B端系统，关于系统中的权限需求我这里简单的介绍一下，并采用上面所总结的RBAC权限模型对实际业务需求进行设计分析：
01：不同的区域管理员的权限各不相同（说明会存在不同的用户具有不同的权限，那么我们就可以采用角色对其进行规范）
02：有大量的用户具有相同的权限（例如组织、部门等）（说明存在相同权限的用户，那么我们就可以采用用户组的概念）
03：上级管理员拥有下级人员的所有权限（说明存在继承关系）
04：不同用户所看到的数据和能编辑的数据不同，一些机密性的数据只允许部分人员看或者编辑（说明存在约束）
05：会存在临时性的用户（说明需要支持新建新角色）
06：同一用户会存在多个角色（多角色求合集或者切换用户角色）
简单说明一下，我所做这个项目的人员管理是在另外一个系统中管理的，权责平台只是调用另外一个平台的组织结构树即可，所以权限设置模块没有做人员管理的模块
根据上面对需求的分析，整个权限管理模块中我们需要建立用户组管理模块、功能角色管理模块、业务（数据）管理模块、权限设置模块，下面就对每个模块做更细致的页面展示设计分析
用户组管理主要是对具有相同权限的用户分类建组，所以页面中我们需要有新建用户组的功能，每个用户组下我们需要关联对应的组织、部门、岗位、人员，让这些具有相同权限的用户在同一个用户组下，如下图：
B端项目中一般会建立几个默认的角色是不支持用户修改、删除的，例如最常见的系统管理员，而也会需要有其它角色的需求，所以此模块需要支持用户新建角色，功能角色是对大模块的页面和操作的权限设置，操作权限的颗粒度可以细分到每个页面的每一个按钮的操作，如下图：
业务角色是对页面中的数据饿查看的权限设置，而对于系统中的普通用户查看系统的权限是常用不变的，所以我们考虑默认有一个普通用户的角色，其它业务角色用户根据实际需求情况自行建立即可，由于我们权责系统的特殊性，我们需要满足用户对部分数据可编辑且对部分数据的字段可编辑，按照常理来说，编辑的操作行为是属于功能权限的设置，但是这里的操作行为是建立在数据的基础之上的，所以如果把这里对数据的操作权限在功能角色模块中设置，就会显得混乱，所以我们直接在业务角色模块中加入对数据的可编辑权限，这里在设置的时候更方便灵活
权限设置模块只需要设置权限分配的对象，选择对应的用户或者用户组，关联对应的功能角色和业务（数据）角色即可，这样就形成了一条完整的闭环的权限设置
对于06同一用户会存在多个角色，我们系统是采用切换角色的模式来实现的，因为不同角色中存在互斥的情况，以及所涉及的领域不同，操作权限差距较大，求合集不利于控制权限，所以只能采用切换的模式实现
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
是收纳消息数量的样式，一般出现在图标或者头像右上角。
数据展示里面抽取出来的共性特征，将它们转化为标签。标签样式有线框、带不透明底或者面性。
相当于c端的轮播图
可以出现在鼠标悬浮按钮时候的行为解释说明，也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。
比起文字提示可以承载更多内容，相对弹窗，气泡卡片操作更轻盈。
标签页可以帮助用户在一个页面内快速切换不同类型内容，提升单个页面整体的扩展性。标签本质上就是内容区的导航。
折叠面板可以更好的收纳内容区域，提高页面利用率。可以和表格结合使用，折叠表格部分详情内容，使得纵向空间更节约。
表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。
当笔记本过小，表格展示不全时候，可以固定首尾重要信息进行滚动。
带排序的表头，可对数量或者金额进行排序。
带分组的表格，建议带边框并且用色块区分表头和内容。
单元格可编辑
批量选中时只会选中当前页，因为分页还没加载出来，为了给用户正确的引导，可以给上提示性文案，例如“已选中XX项内容”。
如果当前页批量选中的数据量不满足要求，可以改变分页器，增加当前页数据量，从而增加选项。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
虽然说 2021 已经快到 10 月份，但我最近我还是花了点时间，搜罗全网设计，总结出了这 7 种出镜率最高的版式风格，也是今年最流行的设计表现形式之一。
看完这一波网页 UI 类设计，再也不愁接下来该如何做设计创新了。
这是今年出镜率比较多的一种设计风格，不管你是在 Dribbble 还是 Behance 上都能见到它的影子。这种风格设计最大特点：形式感、聚焦、简约而不简单。
当然还可以是将线圈与文字叠加图片，有一种层叠纵深布局感受。
又或者说图形只是作为装饰作用。
纯文字版式在今年版式中出镜率也是相当之高，包括深圳设计周官网也几乎都是几个大字排版。其实我们仔细思考，将文字放大处理，有点图形化的意思。
上图是典型的文字图形化，将文字转化成线性设计。
图文混合设计风格大胆、新颖，让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些，追求形式感与观赏性。
图文混合设计，不光只是图片与文字混合排版，还可以是图标与文字、粗字体与细字体之间的混合穿插。
圆形设计趋势一直都存在，在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式，让画面瞬间活了起来。
还可以将文字处理成圆形，与圆形图相呼应。
文字轮廓化版式今年出镜率尤其之高，将文字轮廓化设计处理，减轻了文字的视觉重量感，更像是将文字线条化设计处理。
文字轮廓化设计还可以用在背景，作为设计装饰效果。
玻璃质感设计趋势，也是今年最火的设计风格之一。那么它在网页出镜率也是在下半年开始逐渐多了起来，也许是设计师发现这种质感细腻与折射光透露出的细节之美。
线无疑是图形里面运用较多的，今年发现很多网页中都加了线条作为版式装饰，或者就是纯线条版式设计，让人眼前一亮，原来还可以这样玩。
线条在这里作用明显，除了美学设计装饰之外，它还用作信息层级区分。
好了，差不多到这里就结束了。7 种风格，希望能给大家带来一些新鲜的设计想法，在工作中将其运用进去。
当然，在做设计提案版式、作品集包装都是可以参考，希望大家不要被局限。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究，结论是在左侧设置导航好处多多。此外还有很多类似的研究，你可以在这里看到很多相关研究的摘要。值得注意的是，这些研究大都是 2017年之前的研究成果，而如今很多设计范式发生了变化。
Eyetracķ荷兰国际集团的研究表明，用户习惯于使用 F 式的浏览路径，这使得左侧导航在一般情况下有着相对更强的可用性，它不需要用户视线上的查找，因为用户会下意识注意到它们的存在。
如果我们经常使用笔记本电脑来浏览页面，会很容易注意到不同的导航模块对于页面空间的占用比例，左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍，因为纵向的侧边栏导航需要考虑到横向的标题占用空间，再加上搜索等功能模块的加入，这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠，这种处理方法也不总是有效的，因为这可能会隐藏相关条目的标签信息，降低了导航的可用性。
也正是左侧导航本身的排版逻辑，它通常可以显示比顶部导航多一倍的条目内容，如果你的信息架构本身涉及到的一级菜单条目较多的时候，采用左侧边栏导航是明显更合理的选择，而且这种导航非常适合随着时间推移逐渐增加条目的需求。
侧边导航本身虽然占用的空间更大，但是它也有着更多的空间根据需求来定制各种不同的需求，相比于顶部导航，侧边导航甚至可以直接将分层的二级菜单直接展现出来，就像 Outlook 的侧边栏和 Slack 的侧边栏导航。
你会注意到 macOS 和 Windows 操作系统当中，系统默认的用户界面大都采用了灵活的侧边栏导航设计，很多 web 应用也是如此，它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。
悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的，但是在侧边栏导航当中，这种设计可能会在一定程度上遮挡住下级菜单，如果使用在旁边展开的方式，可能会占用大量的空间，总而言之，它更贴合顶部导航的交互模式。
顶部导航正是因为和悬停出发下级菜单的功能很搭，所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式，这种布局也为产品展示和广告留出了足够多的空间。
如果一种导航模式看起来不够好用，那么是否要借助重设计的机会，切换到另外一种模式呢？根据 Jira 的用户测试，95% 的早期用户对于这种情况会感到非常迷惑，即使是再小的导航功能修改都可能直接影响到大量用户的日常使用，因此不管哪种导航模式，一旦选定，尽量不要改变。
对于没有太多条目的顶部导航，在移动端上依然可以直接在顶部呈现，不过如果太多了就需要使用汉堡菜单来承载，或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点，因为导航模式本身是一致的，但是有限的空间内如何呈现大量的导航条目同样存在挑战。
顶部导航：占用空间小，在页面的位置最为显著，涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站，顶部导航还是很好用的，对于层级较少但是二级条目特别多的超级导航，顶部导航也是不二选择。
侧边导航：侧边导航支持一级条目较多且层级较多的导航需求，扩展性良好，对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com