导语：提起中后台，除了高效、灵活和强大之外，不可忽视的还有它的海量数据。海量数据的筛选与呈现，直接决定决策人员的效率高低。本文作者主要是结合自己在实际工作中遇到的表格设计问题，针对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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
知彼知己，百战不殆。
——《孙子兵法》
产品经理的岗位职责之一是在市场中建立和维护产品的竞争优势，竞品分析是产品经理的一项常规工作，分析质量决定着决策质量，影响着对业务取长补短的效果。但在竞品分析时，常遇到以下问题：
那么，竞品分析应该怎么做呢？
当我刚刚喜欢上一个姑娘时，却发现已经有人喜欢她了，而且张三已经表白，李四也有好感，怎么办呢？
大脑会在荷尔蒙的牵动下情不自禁做起了分析和策略。先从人类视角思考一下世界观、人生观、价值观、婚恋观，确定一下自己要谈一场什么样的恋爱。
再从恋爱角度来了解姑娘，哪里人呀？啥家庭呀？啥衣食住行呀？啥爱好？啥性格呀？符合梦中情人的样子么？这么一通观察下来，那多久约一次会、吃什么饭、唱什么歌、送什么礼也就心里有数了。张三李四都干啥了就得有差异化。
进一步了解之后又要返回到婚恋观，问自己真诚否？关系合适否？只有对自己真诚，对姑娘真诚才能情投意合。既然双方感觉都不错，继续更深一步互动，少了一些遮掩，偶有矛盾，知道双方喜欢啥，雷区是啥。如此，言谈举止便要有所分类，分类即尊重，相容即相爱。
咔，到这里，没有张三李四的事了。良久，两人有了结婚的想法，要双方家长见面聊聊呀，聊聊两个大家庭的想法，聊聊小家庭的打算，真心地切合实际地聊。靠谱！
咔，姑娘到手。结婚的过程又一次巩固了小家庭的使命、愿景、价值观，那就过日子吧。总之，在与姑娘相处的每个阶段、每个事上都要真诚以待。竞品分析更是如此了，要与用户谈恋爱。
当然，更准确地来说是竞争分析，产品只是价值的载体。做一款产品时，却发现已经有直接竞争者、替代竞争者、潜在竞争者、预算竞争者了，而且还有一些可参考的友商。就从7个角度观察分析：
在频率上可以日常分析、定期分析、突发性地专项分析；在分析粒度上可以大到对行业趋势的分析，中到对竞品方案的分析，小到对竞品功能点的分析；在呈阅对象上，可以是BOSS、PM、设计师、研发人员等。
总之，PM做竞争分析时要在产品所处的每个阶段、工作的每个细节上都真诚以待，这样才能得到客观有用的结论。这是对竞品分析的工作思想，开始分析吧！
用户价值、商业价值、用户价值与商业价值间平衡，这三类的预期和现状之间有所差距，想找到解决方案减少差距呗，那还是会遇到7种不同的情况：
往细来说，大概会在开拓市场时，寻找市场切入点、寻求差异化、规划业务、策划运营方案等；在挖掘用户需求时，分析用户和分析需求等；在观测市场时，做行业预测、竞争预测等；在……时，进行……
以“目标用户类型”、“核心需求”、“产品或服务的特征”和“用户购买预算”为依据大致可以划分为5类竞品。
★代表相似，✘代表不同，- 代表可有可无
从整体上看，市场的构成如下图要素构成。在这个视角，我们主要做产业分析、行业分析和市场分析。
3.1.1 产业分析
产业是指由利益相互联系的、具有不同分工的、由各个相关行业所组成的业态总称。一个产业可以跨越（包含）几个行业。产业结构、产业分类、技术结构、技术分类一般都有国际或国家的分类标准，百度可见；其中产业结构中各角色的互动关系如下图所示：
图中的互动关系也可称之为“产业链”中的“供需链”。
产业布局是指产业在一国或一地区范围内的空间分布和组合的经济现象。在静态上看是指形成产业的各部门、各要素、各链环在空间上的分布态势和地域上的组合。在动态上表现为各种资源、各生产要素甚至各产业和各企业为选择最佳区位而形成的在空间地域上的流动、转移或重新组合的配置与再配置过程。可用“产业地图”来表示：
示例一：按资源、生成要素的流动展示
图中的流动关系也可称之为“产业链”中的“价值链”，而完整的价值链如下图：
示例二：按在各产业和各企业的流动展示
图中的企业关系也可称之为“产业链”中的“企业链”。
示例三：按地理空间展示
图中的地理关系也可称之为“产业链”中的“空间链”。
汇总一下，对产业的了解可从时间、空间和程度三个方面来研究，如图所示：
3.1.2 行业分析
行业指一组提供同类相互密切替代商品或服务的公司。选定行业就一定能看到我们的竞争者有哪些。从供需关系上看，就是研究目标市场的供给侧的生产者有哪些？
当然了，分类的话，还是分为竞争分析的5个对象。
那么，对行业分析，有哪些维度呢？
3.1.2.1 生命周期
即老生常谈的引入期、成长期、成熟期、衰退期。
3.1.2.2 竞争类型
分为完全竞争、垄断竞争、寡头竞争和完全垄断。
3.1.2.3 行业要素
分析一个行业的主要影响要素及要素密集度。包括五类：
3.1.2.4 经济周期
分为三类：
3.1.2.5 行业结构
常从三个维度分析：
3.1.2.6 主要数据
行业的发展分析时经常回顾历史、分析现状和预测未来。
回顾、分析和预测哪些数据呢？
主要有市场规模、毛利率、销售增长率和净资产收益率等。
3.1.3 市场分析
市场泛指商品交换的领域。
3.1.3.1 分析对象
3.1.3.2 分析范围：
3.1.3.3 市场概览
3.1.3.4 市场集中程度：
CRn（concentration ratio）n一般用10。也就是在这个市场市占前10的公司，加起来的总和占整个市场的百分比，百分比越高，证明这个市场的集中度也就越高。
3.1.3.5 市场消费模式
3.1.3.6 上下游市场分析
3.1.3.7 市场数据
① 规模
② 数据
③ 趋势
从供需上看，就是研究目标市场的需求侧的消费者有哪些，该角度一般是在做新产品前对所有的消费者进行研究。
3.2.1 分析对象
目标市场中的消费者。
3.2.2 分析目的
3.2.3 分析范围
更多是全局分析
3.2.4 分析方法
3.2.4.1 定性调研：访谈、焦点小组、卡片分类、参与式设计
3.2.4.2 定量调研：调查问卷
3.2.4.3 场景调研：分为三类场景
3.2.5 分析维度
① 口碑调查
② 产品价格
客户希望为这个产品支付多少钱？竞品价格如何？
③ 购买动机，购买的影响因素及比重
④ 购买习惯，如购买渠道、购买时段等等
⑤ 产品感知及体验
3.2.6 分析产出
产出一：用户故事版，或是用户画像之User Persona
产出二：价格分析图
产出三：满意度和净推荐值
产出四：购买因素及比重
产出五：购买习惯
想要了解竞品是如何研发出来的，就需要关注和比较双方的开发什么周期的各个动作。要“比、学、赶、超”不断迭代，当然也要“你打你的，我打我的”，坚持自己得定位。
3.3.1 产品定位
3.3.2 产品定义
① 定义用户：
② 定义场景：
③ 定义价值：
④ 全局思考：
3.3.3 战略规划
3.3.4产品设计
3.3.5产品研发
3.3.6 产品运营
上线前基于产品的运营计划
3.3.7 分析产出
在新产品推向市场后的销售营销、运营、根据需求演变的产品迭代，也要经过进入期、成长期、成熟期和衰退期是个阶段。
在不同的产品生命周期阶段，企业经营行为的侧重点不同。
3.4.1 产品商业模式
3.4.2 产品/市场匹配（PMF）
PMF是Product Market Fit的简写，是指产品和市场达到最佳的契合点。象征着产品正好满足市场的需求，令客户满意，这是产品成功的第一步。
PMF的实现标准（临界点）的判断，各行各业因其特性均不同，网上有些判断方法仅供参考：
3.4.3 产品功能
3.4.4 所用技术
3.4.5 运营推广
3.4.5.1 内容运营
3.4.5.1.1 企业介绍
3.4.5.1.2 企业新闻
3.4.5.1.3 产品手册
3.4.5.1.4 客户成功案例
3.4.5.1.5 行业白皮书
3.4.5.1.6 行业解决方案
3.4.5.1.7 行业报告、干货资料
3.4.5.1.8 期刊、书籍等出版物
3.4.5.1.9 电子书
3.4.5.1.10 课程讲义
3.4.5.2 活动运营
3.4.5.2.1 线上
3.4.5.2.2 线下
3.4.5.3 渠道运营
3.4.5.3.1 官网媒体
3.4.5.3.2 自媒体：公众号、头条、搜狐号等等
3.4.5.3.3 全员营销
3.4.5.3.4 联合推广渠道
3.4.5.3.5 贡献线索渠道
3.4.5.3.6 代理商渠道
3.4.5.3.7 社群运营
3.4.5.3.8 运营体系及风格
3.4.5.3.9 运营事件分析，关注和研究显著的增长点
3.4.5.3.10 关注各类运营数据及转化率
3.4.6 销售/营销
3.4.6.1 定价策略
3.4.6.2 市场营销
3.4.6.3 销售模式
3.4.6.4 销售渠道及渠道策略
3.4.6.5 品牌管理
关于定价方法，UCPM的总结比较全面到位，这里罗列一下，百度即可。重在比较不同竞争者的定价策略。
当产品中沉淀了一些存量用户之后，为了实现用户需求的异质性、并集中有限资源进行有效市场竞争的行为。企业在明确的战略业务模式和特定的市场中，根据用户的属性，行为等因素对用户进行分类，并提供有针对性的产品、服务、销售、运营模式，达到用户价值和产品目标的最大化。
系统实施层面，是在抽象理论的指导下，用算法进行标签化统计、分类，并以用户画像的形式表现，最后在策略上、界面上、运营方式上进行“量体裁衣”。
3.5.1 分析对象：产品中现有的用户
3.5.2 分析目的：对用户细分，精细化运营，不同用户采用不同的运营策略
3.5.3 分析内容：
越来越多的产品也逐渐从更多细致的维度来分析消费者，对2C用户的分析维度分为以下五类：
对2B企业的分析维度，大致分为以下三类：
3.5.4 分析方法
我们通常需要以不同的角色来体验和感受产品，而且能在各个角色之间切换自如。角色可以分以下几类：
3.6.1 产品覆盖的场景有哪些？能满足哪些需求？能给我带来什么价值？
3.6.2 多端比较：
3.6.3 多商业入口分析：
3.6.4 功能：
3.6.5 UI与交互
3.6.6 其他
企业本质上是“一种资源配置的机制”，其能够实现整个社会经济资源的优化配置，降低整个社会的“交易成本”。从产品背后看企业，才能看到产品的基因与营养。
3.7.1 分析对象：产品所属的企业
3.7.2 分析目的：分析竞品所属企业的资源配置机制
3.7.3 分析方法：
3.7.4 分析领域：
3.7.4.1 企业背景
3.7.4.2 企业历程及重大节点
3.7.4.3 企业定位
3.7.4.4 企业愿景
3.7.4.5 发展战略
3.7.4.6 业务模式
3.7.4.7 产品矩阵
3.7.4.8 产品战略
3.7.4.9 商业模式（商业画布）
3.7.4.10 人力资源：
3.7.4.11 财务资源：
3.7.4.12 实物资源：
3.7.4.13 技术资源：
3.7.4.14 社会资源：
3.7.4.15 其他资源
1）成为用户
2）体验产品
3）轮岗实习
1）用户调研
2）用户反馈
3）用户数据分析
4.3.1 公司官网
4.3.2 产品使用
产品体验、产品文档
4.3.3 竞争者的员工
4.3.4 互动交流
1）政府机构：查看政府的工作统计报告
2）行业研究机构：行业报告、案例研究和论文，能了解行业现状和市场格局
3）第三方调研机构
4）专利机构：可检索竞品涉及的专利
5）合作伙伴：从合作伙伴处了解竞品
6）应用商店的数据统计平台：查看产品排名、用户评价、下载量统计、活跃用户规模、版本迭代记录等
1）编写
2）爬取
3）问卷、访谈
4）数据库调取
5）购买
5.2.1 重复信息
5.2.2 残缺信息
5.2.3 错误信息
5.2.4 不一致信息
将清洗过的信息加工成我们想要的信息：
个别信息，尤其数据类的信息，需要抽样检查。
市场变化快，信息须及时更新。
1）主观：体验、描述、评价
2）客观：特征罗列、流程呈现、要素列举、公式计算
有一些现成的理论模型是可以直接套用的，列举如下：
6.4.1 对比分析法
最简单的对比是罗列要素，进行Yes/No的打钩。
6.4.2 综合评价分析（权重评分法）
6.4.3 结构分析法
6.4.4 四象限法（矩阵分析法）
一般选择两个关键竞争要素，通过四象限来分析竞品之间关键指标的分布情况。如波士顿矩阵法也属于四象限法。
6.4.5 历史跟踪法
参考资料：
令很多产品新人非常头疼的会议就是需求评审，害怕在会上“怼”不过研发，也害怕被“怼”的“体无完肤”。本篇文章里，作者围绕需求评审会议的五个方面为我们全方位解读要如何才能不被“怼”，一起来看看吧。
对于产品新人而言，日常最头疼的会议就是需求评审。
在做产品的这几年，笔者开过上百场需求评审会，曾经被研发在会上怼哭过一次，也遇到过研发和产品大吵半小时、最终有一方摔门而出的情况。
但这都是刚开始一段时间的惨案了，那时一想到要一个人面对近10个研发就战战兢兢瑟瑟发抖。而如今，几乎每一次的需求评审都变得相当顺利，时间和结果都能达到预期，甚至都不需要太多额外的准备。
很多产品新人担心自己怼不过研发，但事实上，「怼」这个词就把自己和研发置于了对立面。很多需求评审中的争吵和争论在会后看来是没必要的，大多都源自于信息差和沟通能力的问题。
因此，今天想和大家分享下如何做好需求评审、不再怕被怼。本文将从产品、研发和团队等多个角度来谈，以下为目录，希望大家能提前在心里有一个框架：
直接用一堆正确的话来告诉大家需求评审的意义，可能并不会有太深刻的体会。所以我们不妨另辟蹊径，一起来试想一下：如果一次迭代没有任何需求评审、研发完全按照产品需求文档进行开发，会有什么样的结果？
看起来貌似节约了大量的沟通时间，也避免了团队内的争论和争吵，但实际开工之后呢？
一方面，在开发过程中，研发发现出现了部分需求遗漏、有些看似一句话的需求实现起来成本反而非常高、有些需求未考虑到数据修复、数据查询量过载的风险等，这时候，经验丰富一些的研发会主动找到产品进行讨论并要求进行需求变更，而另外一些研发新人可能就埋头照做了，到真正上线后才发现实际有一大堆问题，甚至可能造成不可挽回的损失。
另一方面，产品上线之后，销售和售后部门的同事发现需求是满足了，但却一点都没法用，这时候，客户也接二连三的反馈系统怎么越改越难用了，根本没法解决他们的问题！
这样看来，省去了需求评审之后，产品经理的工作虽然「单纯」了很多，但却很难兼顾全局，也无形中将所有的风险和压力担在了自己一个人身上，浪费了团队的智慧和经验。
因此，一场好的需求评审能够帮助我们很好地管理需求方（业务/销售/售后部门）的预期，同时也能通过一次次评审和纠偏，帮助整个产研团队就需求场景和优先级达成一致，及早进行风险评估及查缺补漏，有效提升团队开发效率和产品可用性。
那么，接下来我们就来看看一次完整的需求评审是怎样的？
需求评审的本质分为2个维度：其内容是用于需求评审，其性质则是有组织的连续性会议。因此我们把需求评审拆解为：需求评审+会，即需求评审流程和会议管理2个方面来讲。
不同公司不同业务不同客户的需求评审流程都有所不同，有些只有1次，有些要开3、4次。但是，无论开几次，其本质都是在主要和2类人开会：需求方和研发。
B端产品经理的需求方一般是老板、甲方爸爸、业务部门、销售部门和售后部门等，无论你们公司具体业务如何，需求评审的第一步都是要和需求方确定5W1H中的为什么做（why）、什么时候做（when）以及大致做什么（what）。
第二步则是先和研发部门同步前面讨论好的why、when和what，再和大家一起讨论具体做什么（what）、谁来做（who）和怎么做（how）。
那么，下面提供一个较为通用的标准评审模板，分为范围评审、低保真评审和方案评审3次。
（Axure页面列表）
（通过用例图描述需求场景）
以上就是较为常见的3次需求评审流程。但是需求评审只是一个里程碑，产品经理大部分的时间都花在每两次会议之间的文档准备中，要不是在和需求方掰头，要不就是在和研发掰头。
第二部分就来看看需求评审相关的会议管理内容。
大部分人在做产品经理之前，极少有会议组织的机会和经验，更多都是在被动参会。而一旦入行产品，就需要开始频繁组织各种各样的会议，而需求评审就是其中最不可避免的一类会议。
曾经有同事分享过罗伯特议事规则，也有一类专门做会议组织研究的咨询公司。由此可见，会议组织其实是一门非常高深的学问。
《罗伯特议事规则》（Robert’s Rules of Order，RONR）是一本由美国将领亨利·马丁·罗伯特于1876年出版的手册，搜集并改编美国国会的议事程序，使之普及于美国民间组织，也是目前美国最广为使用的议事规范。
作品内容非常详细，包罗万象，有专门讲主持会议的主席的规则，有针对会议秘书的规则，当然大量是有关普通与会者的规则，有针对不同意见的提出和表达的规则，有关辩论的规则，还有非常重要的、不同情况下的表决规则。
但这里不展开来讲（笔者自己也没有掌握那么深），就只和大家分享一些较为基础的会议管理方法，只要能够很好地服务于需求评审和日常工作即可。
从时间角度来看，一场会议可以分为会前、会中和会后3个阶段。那么每个阶段我们都需要做什么呢？
需求评审过程中，最主要的3个点就在于节奏把控、争论处理和情绪管理。
节奏把控：
一般而言，产品是会议主持人，那么自然就担当着会议节奏把控和主持的角色。当角色众多时，其实是比较容易出现讨论内容溢出的问题，大家一聊开就上头了，结果导致会议开了足足几个小时都还没有产生定论。
所以，需求评审中产品要做的第一件事就是把控整个会议的节奏，既要及时把聊得起兴的大家拉回评审中，还要尽量按照参会人的精力去做好节奏的规划，让整场会议高效而轻松。
如果你刚刚入门，还不知道怎样能够很好地把控节奏，那么可以尝试提前根据评审内容进行时间和会议内容规划。
例如，前10分钟同步信息和背景，中间10分钟讲权限业务逻辑模块，然后预留5分钟时间讨论，接下来继续讲权限配置的页面交互，再预留5分钟时间讨论等。全程尽量严格按照自己的议程来，看看实际情况和自己规划是否相符，如果出现不符合，那么问题出在哪里？后续怎么进行改进？
多来几次，你就会有不错的节奏把控能力了，甚至于整个会议实际开完的时间和你预期的时间相差不了几分钟。
争论处理和情绪管理：
需求评审中出现争吵的原因常见于以下几点：
既然是团队中很多角色坐一起评审，每个角色的视角和关注点不同，那么自然会出现很多讨论点甚至于争论点。那么，当会上有2个人产生了争论时（通常是产品经理和其他人），怎样处理才比较妥善呢？
首先最重要的一点，做好自己的情绪管理。
在一场需求评审过程中，产品经理既是会议主持人，又是参会人。如果你自己都乱了，那么整个会就尬在那里没人收场了。所以，一个成熟的产品经理需要尽量顾全大局、摆正自己的心态，尽量以结果为导向、对事不对人。
其次，换位思考，尝试先根据对方表达的看法去梳理他的思路，然后用自己的理解复述一遍，看对方是否认可你的理解。接下来，再根据你的理解去进行判断并阐述自己的观点，看是否能够得到对方的认可。
最后，如果实在在会上没法沟通，那就告知大家：自己会先记录下待讨论的问题，会后再进行讨论，后续的议程继续。「下来再讨论」真的是一句解决会上冲突的万能金句。
会议结束之后，确实可以长舒一口气，开始准备下一阶段的工作了，但注意：会后还是需要做好会议纪要、会议同步和后续问题的跟进。
笔者的需求评审会议纪要一般分为3部分：待讨论、待完善、已确认。
整理好会议纪要后，及时将内容同步好发给参会同事，如果后续还有待讨论的问题，则与相关人员定一个讨论的待办，避免大家忘记。
这里其实想分享一个笔者和UI小姐姐之间蛮有意思的小故事。
低保真评审时，我们还会顺路确认好UI出图的范围。因为大多数都是产品带电脑投屏，所以自己会顺手记录下UI出图的范围并发给UI小姐姐。本意是为了更好地把控会议后续质量，没想到这个顺手的行为得到了UI小姐姐的肯定。
从这个小故事中，笔者发现，如果日常能够在需求评审中的灰色地带稍微多做一些、多为对方思考一些，那么，整个团队互相之间的信任和协作会越来越nice～
前面和大家分享了完整的需求评审流程，现在就来带大家换个思路，看看前端、后端、测试在一次需求评审中都关注什么？
以下素材来源于笔者和研发同事们的亲身采访：
后端：
前端：
测试：
从上面的回答中能够很明显的看出不同角色看待需求的视角。当我们要将需求讲给不同的人听时，就要提前站在他们的视角和关注点去思考问题，获得更多沟通的前提信息，从而更顺畅地进行沟通。
从被怼到在现场止不住的哭，再到现在可以轻轻松松开玩笑回怼研发，笔者踩了很多坑、也积累了一些经验。所以，最后就和大家分享3个压箱底的需求评审技巧！
此处标题来自邱岳《产品训练营》中的内容，指我们在做需求评审的时候，不能把各式各样的问题全部都堆到1-2h的需求评审会上来解决，而是应当先和相关人私下进行讨论（零售沟通），取得共识后再和相关角色统一进行讨论（批发沟通）。
因为，一场需求评审中往往会出现来自不同部门的不同岗位和角色，每个人的关注点都有所不同。如果，所有问题都在会上一并讨论，那么不仅容易范围溢出、干扰讨论，也容易耽误他人时间、让听众失去了耐心。
例如，本次迭代中课次和班级的关系到底应该如何设计？班级和课次是1对n还是n对n的关系？这明显是与后端直接相关的问题，那么，在需求评审前，这类问题就需要提前与后端同学沟通确认好，会上只讨论大家公共关注和需要共同确认的问题。
这样一来，整个会议中大部分时间都在做同步，小部分时间在讨论一些公共问题及小问题，整个会议的效率会得到极大的提升。
项目管理中有一类管理叫做「干系人管理」，指的是我们需要识别项目中的干系人stakeholders，并对他们进行一定的管理。
而我们则可以把需求评审当作一次小型的项目，项目如果要顺利推进，就需要对其中的干系人做好管理。而干系人中，又可以根据话语权及意见影响程度分为关键人和追随者，用一句互联网黑话来形容就是找到关系人中的「抓手」人物。
因为，需求评审中不仅角色众多，人员也很复杂，很难兼顾和满足每一个人的想法。因此，在大方向上，我们就需要提前去搞定关键人，因为他们拥有更多的视野和做决策的信息，某种程度上，也是意见领袖。
如果你的想法和大部分人都不一致，那可以先尝试和关键人进行沟通。在取得关键人认可后，再去推进那些想法摇摆不定或者没有太多主观想法的人，整个过程相对就会顺利一些。
不知道大家有没有做过DISC性格测试，笔者身边大多数产品经理都是D型居多，即支配型/控制者Dominance。
D型行为风格的关键词是：积极进取、争强好胜、强势、爱追根究底、直截了当、主动的开拓者、坚持意见、自信和直率。
但是这类人也往往具有以下这些缺点：
不知道你有没有躺枪，D型人格的产品经理在需求评审中一些问题的讨论上难免会有些过于强势。当然，大家都知道天才产品经理乔布斯就是一个极度强势和独断专行的人，但我们大部分人都难以达到那样的高度，如果真的像乔帮主那样处事，可能最后就只能被迫做一个全栈产品了吧。
因此，在需求评审中我们需要对自己的决策做出一些取舍。大方向上一定要坚持自己的想法和意见，而一些优先级低的需求和细节可以适当放权，给予团队一些发挥空间，这也算能够坚持自我想法的一种迂回之策吧。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
CRM代表了企业对客户的管理理念和运营方法，而对客户生命周期的管理也是大家非常关心的话题。本篇文章里，作者分别从客户画像、线索获取以及线索分配三个方面分析了售前的最重要步骤，一起来看看吧。
CRM代表了企业对客户的管理理念和运营方法，所以谈到CRM大家最关心的话题也就是对客户整个生命周期的管理，而在售前部分最重要的就是：线索的获取和分配。
说到CRM客户画像是绕不过去的一个名词，客户画像是指公司客户的共性关键特征，如下图所示：
vipkid为例，他的主要客户画像就是：一二线城市且孩子年龄为4—12岁区间的家长。
客户画像使用方法：
1）根据客户画像寻找渠道和方法获取销售线索
比如一家做英语培训的机构就可以联合钢琴培训机构联合做公开课，两家公司的客户画像相近，就可以互通客户达到共赢。
2）根据客户画像快速筛选线索，快速定位高质量线索
比如vipkid的电话销售人员了解到家长虽然有意愿让孩子学习英语，但是孩子年龄为2岁，没有达到客户画像的标准，则可以尽早放弃沟通下一个客户。
线索的获取不外乎两个部门：销售和市场。
一般TO B的公司的获客主要渠道为地推团队例如：
这种公司会在每个城市设立分公司，培养大量的地推销售人员，并划分区域给到每个销售人员负责，销售人员就是通过扫街的方式获取及维护自己的客户。
一般TO C的公司的高质量获客渠道为客户转介绍例如：
这些公司会动用电销人员成单激励、用户转介绍活动激励等方式来促使客户完成转介绍行为如转发朋友圈、拉新注册、拉新购买等来获得转介绍线索。
通过投放广告（实体广告牌广告、电视广告、搜索网站关键词投放、大V软文）吸引用户进入到营销活动页或官网进行注册，从而收集到的线索。
通过内容产出如：
客户成功案例、系列录播课程、直播课程、行业解决方案、电子书、行业白皮书，发布到抖音、快手、公众号、头条、知乎、微博等平台上，获得客户认可并吸引客户持续关注。
从渠道商获取购买，但数据准确度往往很低，需要搭建数据清洗团队，清洗数据（确认客户信息正确并补全信息、确认客户需求存在）之后才能算线索并提供给到销售。
通过企业与企业间的客户资源的互换，实现双方的共赢；建议找目标客户群重叠但又没有竞争的企业，以最小成本甚至0成本的方式合作，互补资源，实现双赢。
如行业会议、论坛峰会、交流活动、线下公开课、展会、促销活动等。
线索分配是和销售模式息息相关的，主要的销售模式有三种：电话销售、地面销售、社群销售。
电话销售依赖于CRM系统分配leads，所以电销CRM可以从新leads转化到老客户续费等环节，做到对于销售的标准化精细化管理。
1）新分leads
首次分配：
业务增长时期分配策略模型：
这种分配模型是粗放式分配，优质和低值的leads混合随机分配给不同能力的销售，可能会有一些高质量的leads分配给低能力销售导致转化失败，但是也是因为低转化的销售有能接触到高质量leads的机会带来了工作的动力。
策略模型方案：
业务增速降缓&收缩时期分配模型：
业务增速降缓&收缩时期首要考虑的是降本提效，所以首要的会思考如果用更少的人干更多的事情、或是同样多的线索如何能转化更多，所以使用的策略会更激进一些，可能会导致转化低的销售长时间无法接触到高质量例子，工作积极性降低，从而流失速度增加。
策略模型方案：
二次分配 ：
2）库存leads
激活线索：
库存leads即无法转化的销售线索经过公司多年的积累数量庞大，如果人工再次致电确认用户需求则很低效成功率也很低，方法一是有效识别，库中成交可能性更高的leads，由人工触达转化。
而这种方式就是通过推送（短信、邮件、公众号等渠道）运营活动激活客户，让客户主动再次咨询，系统ke’yi再次分配销售跟进或公海打标签方便销售主动捞取。
周期扫库：
库存leads即无法转化的销售线索经过公司多年的积累数量庞大，如果人工再次致电确认用户需求则很低效成功率也很低，方法二是通过系统功能提高触达效率降低人工售卖成本，周期性的把公海中的leads全部触达一遍，避免遗漏漏网之鱼。但缺点是需要严格制定外呼策略避免骚扰到客户。
1、预测式外呼：
系统代替人工外呼，呼通线路转接给人工沟通，节省人工外呼等待电话接通的时间浪费。
2、智能AI电话：
全部由机器人外呼及沟通，无人工介入，但往往只沟通确认客户购买意愿是否存在。
前面提到了一般TO B的公司的获客主要渠道为地推团队。这种公司会在每个城市设立分公司，培养大量的地推销售人员，并划分区域给到每个销售人员负责，这个销售人员就是通过扫街的方式获取及维护自己的客户。
所以会有个弊端，CRM无法成为销售获取线索的主要来源，所以CRM对于地面销售的管控程度比较低尤其在于新客户转化环节，一般销售都是在确定客户购买后才将客户信息录入到CRM中，所以地面销售CRM系统的销售管控环节主要在于客户的维护任务及续费任务的流程及任务管控中。
而监控方式从电销人员的电话沟通情况改到地面销售人员的地点定位打卡签到的方式。
地面销售的线索二次分配，不会像电话销售的那么灵活，一般是整个片区的商户，以片区为维度的重新分配销售。
社群销售是在线教育大班课常用的一种销售手段，也是线下奥数教育学而思培优使用过的一种比较成功的获客手段，社群主要是将一群有相似目的或需求的人聚集到一起，在群中沉浸式的接收你的观点，从而形成思维的共振而达到思想的高度统一对公司想传递的价值观的的认可及信任。
上文说到，社群销售主要是教育机构使用的销售手段，所以往往和体验课的班期有关，上同一期的体验课程的学生或者家长会被拉入同一个群中，这个群会有一个专门的销售负责。
所以社群的线索分配是和销售负责的班期排班直接关联的，除非整个班期重新销售排班一般不会更换销售。所以主要依赖于销售对于社群的维护，一般不进行二次分配。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
人工智能从诞生以来，其理论和技术日益成熟，应用领域也不断扩大。本篇作者给我们介绍了人工智能的十大技术及其相关应用，一起来看看吧。
人工智能发展到现在已经将近有80年的历史。近日来特斯拉也说了自己不是汽车公司，是可再生能源公司、是机器人公司、是人工智能公司，特斯拉也明确表示未来人工智能汽车自动化驾驶的方向是视觉识别+机器学习。
人工智能从诞生以来，其理论和技术日益成熟，应用领域也不断扩大，接下来我将给大家介绍下人工智能的十大技术及其相关应用。
人工智能的第一个大成就是发展了能够求解难题的下棋程序。在下棋程序中应用的某些技术，如向前看几步，把困难的问题分成一些比较容易的子问题，发展成为搜索和问题归约这样的人工智能基本技术。今天的计算机程序能够下锦标赛水平的各种方盘棋、十五子棋、国际象棋和围棋。
1997年5月，IBM公司研制的深蓝(DeepBlue)计算机战胜了国际象棋大师卡斯帕洛夫(Kasparov)。另一种问题求解程序把各种数学公式符号汇编在一起，其性能达到很高的水平，并正在为许多科学家和工程师所应用。有些程序甚至还能够用经验来改善其性能。
逻辑推理是人工智能研究中最持久的子领域之一。其中特别重要的是要找到一些方法，只把注意力集中在一个大型数据库中的有关事实上，留意可信的证明，并在出现新信息时适时修正这些证明。对数学中臆测的定理寻找一个证明或反证，确实称得上是一项智能任务。
为此，不仅需要有根据假设进行演绎的能力，而且需要某些直觉技巧。1976年7月，美国的阿佩尔(K.Appe1)笔人合作解决了长达124年之久的难题–四色定理，轰动了整个计算机界。他们用了三台大型计算机，花了1200小时。
自然语言处理是人工智能的早期研究领域之一，已经编写出能够从内部数据库回答用英语提出的问题的程序，这些程序通过阅读文本材料和建立内部数据库，能够把句子从一种语言翻译为另一种语言，执行用英语给出的指令和获取知识等。有些程序甚至能够在一定程度上翻译从话筒输入的口头指令（而不是从键盘输入计算机的指令）。人工智能在语言翻译与语音理解程序方面已经取得可喜的成就。
自动程序设计是人工智能的一个重要研究领域。目前已经研制出能够以各种不同的目的描述来编写计算机程序。对自动程序设计的研究不仅可以促进半自动软件开发系统的发展，而且也使通过修正自身数码进行学习(即修正它们的性能)的人工智能系统得到发展。
专家系统是一个具有大量专门知识与经验的计算机程序系统，它应用人工智能技术，根据某个领域一个或多个人类专家提供的知识和经验进行推理和判断，模拟人类专家的决策过程，以解决那些需要专家决定的复杂问题。
专家系统可以解决的问题一般包括解释、预测、诊断、设计、规划、监视、修理、指导和控制等。随着人工智能整体水平的提高，专家系统也得到发展。在新一代专家系统中，不但采用基于规则的方法，而且采用基于模型的原理。
学习是人类智能的主要标志和获得知识的基本手段。香克(R.Shank)认为：
一台计算机若不会学习，就不能称为具有智能的。
机器学习的主要目的是为了从使用者和输入数据等处获得知识，从而可以帮助解决更多问题，减少错误，提高解决问题的效率。
人脑是一个功能特别强大、结构异常复杂的信息处理系统，其基础是神经元及其互联关系。对人脑神经元和人工神经网络的研究，可能创造出新一代人工智能机器。
20世纪80年代以来，神经网络研究职又得重大进展。例如，霍普菲尔德(Hopfield)提出用硬件实现神经网络，鲁梅尔哈特(Rumelhart)等提出多层网络中的反向传播(BP)算法。
目前，神经网网络已在模式识别、图像处理、组合优化、自动控制、信息处理、机器人学和工智能其他领域获得日益广泛的应用。
模式识别是指识别出给定物体所模仿的标本，如文字识别、汽车牌照识别、指纹识别、语音识别等。这是一种用计算机代替人类或帮助人类的感知模式，是对人类感知外界功能的模拟，使一个计算机系统具有模拟人类通过感官接收外界信息、识别和理解周围环境的感知能力。
机器视觉或计算机视觉已从模式识别的一个研究领域发展为一门独立的学科。视觉是感知问题之一。在人工智能中研究的感知过程通常包含一组操作。例如，可见的景物由传感器编码，并被表示为一个灰度数值的矩阵。这些灰度数值由检测器加以处理。
检测器搜索主要图像的成分，如线段、简单曲线和角度等。这些成分又被处理，以便根据景物的表面和形状来推断有关景物的三维特性信息。机器视觉已在机器人装配、卫星图像处理、工业过程监控、飞行器跟踪和制导以及电视实况转播等领域获得极为广泛的应用。
智能控制是一类不需要(或需要尽可能少的)人的干预就能够独立地驱动智能机器实现其目标的自动控制，是自动控制的高级阶段。1965年，傅京孙首先提出把人工智能的启发式推理规则用于学习控制系统。十多年后，建立实用智能控制系统的技术逐渐成熟。
百度公司董事长兼首席执行官李彦宏认为，人工智能是具有显著产业溢出效应的基础性技术，能够推动多个领域的变革和跨越式发展。例如：人工智能可以加速发现医治疾病的新疗法，大幅降低新药研发成本；可以带动工业机器人、无人驾驶汽车等新兴产业的飞跃式发展；可以大幅提升国防信息化水平，加速无人作战装备的应用。人工智能技术将极大地提升和扩展人类的能力边界对促进技术创新、提升国家竞争优势，乃至推动人类社会发展产生深远影响。
蓝蓝设计建立了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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
