原文地址：站酷
作者：孔雅轩LineVision
转载请注明：学UI网》你的设计有依据吗？详解用户体验设计中的规律与逻辑
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
每个产品都有核心的用户体验，这基本上是它存在的原因。它解决了人们所面临的问题，而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验，就要问自己一个问题：“客户需要完成哪些最常见和最重要的任务？”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如，Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何，此功能都能在每个设备上正常工作实现这一目的。
预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源： Techcrunch
尽管存在大量不同屏幕尺寸的设备，但绝对不能定位各个设备，可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是：
移动手机
平板电脑
台式电脑
智能电视
智能手表
不同的设备组在不同的上下文中提供不同的服务：用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如，手机主要用于微任务，并且具有较短的用户会话。平板电脑主要用于内容消费，目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。
确定产品的核心用户体验后，选择一组你希望支持的设备组，你需要调整每个组的体验（对于每个上下文的使用）。上下文的设计在不同设备组设计时尤为重要。
第一，并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景，并设计适合每个场景的体验。例如，通常移动用户比电脑用户想要的不同于产品。以 Evernote为例，可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化：
用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。
而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的：
Evernote了解移动环境：它利用设备功能，并提供快速保存想法的方式（添加文本笔记，捕获照片或设置提醒）。
第二，不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入（移动手机和智能手机）的设备时，设计师会犯的几个常见错误包括：
小的点击目标。点击目标（如CTA按钮）必须具有足够大的尺寸。通常至少7毫米是足够的，但最好使用10mm触摸目标尺寸。
图片来源：UXMag
将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距，因为间距有助于分离控件，并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。
按钮之间的间距
使用悬停状态。但在触摸屏上，没有“悬停”。
历史上，设计师一直从事大屏幕到小屏幕的设计工作，这意味着第一个也是主要设计是为了完整的电脑桌面视图（它具有最多的功能）。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时，我们通常面临“厨房水槽”问题：许多功能被添加到产品中，特别是当涉及多个利益相关者时。这并不奇怪，，当你有很多不动产时，添加功能是比较容易。实践经验清楚地表明，最好使用移动方法进行设计，并通过与用户相关的最小屏幕创建应用程序。
当你首先设计相关屏幕的最小尺寸时，它会强制你决定最重要的。一段时间后，你将采用同样的方法仔细选择产品的其他版本，无论是电脑桌面设备，平板电脑还是电视。
在大多数情况下，手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要，那么你将需要考虑具有更小分辨率的微型屏幕。
想想大屏幕以及小屏幕，给大屏幕和小屏幕提供同样的注意力：
不只是缩小设计，使其适合那些大屏幕。充分利用你可以使用的额外空间。
图片来源：Wikipedia
确保图像不会因为屏幕尺寸的放大而失去质量。
左：低质量图像。右：正确的分辨率。
考虑大屏幕细节。每个设备组都有自己的不同。例如，电视屏幕的设计被称为“设计10英尺体验”，因为从沙发的距离来看，与电脑桌面屏幕相比，屏幕上元素的明显尺寸明显更小。
电视的用户界面元素应大于电脑桌面。图片来源：Samsung
一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何，一致的用户体验是成功的全通道用户体验的关键组成部分之一：
对未来与产品的交互设定期望，并建立用户信心。
一致的体验使得你的产品在其他设备上与用户的交互更容易。
你可以将它们视为相同体验的方面，而不是将设计定制到越来越多的屏幕和设备中。例如，Google搜索应用在所有设备上提供相同的搜索体验。
当设计和功能一致时，用户可以在他们选择的设备上更快更有效地完成任务。
跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动，完成任务，或当他们从设备转移到另一设备时，他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备，环境的变化或上下文的变化，并且可以依赖于设备良好的功能性和独立于设备的易用性。
大多数人如何走过他们的一天，他们访问的主要屏幕。图片来源：Intercom
根据使用情况，你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例：你可以在Mac上设置播放列表，并在iPhone上即时播放，也可以开始听iPhone上的歌曲，当你转到电脑桌面时，你将被拍摄回到你在iPhone上。
Apple Music可以很好地处理多个设备的同步。
在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试，你可以在发布之前发现用户体验的问题并解决它。
在设计多个屏幕和设备时，最好的策略是保持最终的用户体验。作为用户体验设计师，你必须评估产品的使用时间，位置和方式，以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕，用户都希望在各种设备之间获得流畅的体验。
原文地址：ADOBE BLOG
译文地址：UI中国
作者：Nick Babich
译者：SKYUI
转载请注明：学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
传统动画注重理论基础以及扎扎实实的基本功，并且是艺术学院必修课，宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品，所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。
这里我们只针对我们互联网产品设计讲一下交互动效的应用场景，我总结了以下七大应用场景，分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。
优秀的动效可以帮我们解决产品设计中的很多问题，可以从用户体验的五大要素来进行价值的拆解：
战略层本质上来说大部分设计师其实是接触不到的，当然接触不到战略并不能代表我们不需要了解，作为设计师我们必须了解公司对产品的战略定位以及期望，也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层，所以单纯来讲，动画在这一层面上可以发挥的余地是是不多的，因为更多的这一层更加关注意识形态的战略思考。
范围层是通过战略思考来思考明确产品的大概功能和内容，有很多产品的功能复杂，交互繁重，内容很多，在这种情况下动效就派上了用场，我们可以尝试通过动效来解决内容过载，优化交互模块，扩展产品内容功能范围。
这一层主要确定产品的功能结构以及层级，主要设计用户如何快速，准确的触达某个界面完成某个任务，要考虑用户体验地图，用户整个的任务路径，简单来说就是用户要做什么事情，如何做，做完之后应该干什么，如果能对动效巧妙的运用，就可以做到引导用户，练习上下流程的作用，降低用户理解成本，提搞产品的操作效率，提高产品的可用性和易用性。
从这一层开始，UI设计师接触的内容逐渐多了起来，大家也会更加熟悉工作的内容以及范围，这一层主要体现在优化页面布局，确定元素摆放位置，涉及到具体的信息、界面、导航设计等等。通过利用格式塔，栅格，设计语言等方法确定产品功能具体页面内容布局，我们可以通过动效来进行辅助设计，例如强化元素的位置、颜色、大小，优化页面的切换、跳转的流畅度以及自然度等等。
表现层具体涉及到视觉、听觉、触觉的体验设计，也是做为视觉设计师、UI设计师发挥最多的一层，在表现层动效的展现形式会多种多样，这里不展开讲解，大家应该都明白。在表现层加入适当的动画能够提升产品趣味性，加强用户与产品的情感链接，增加用户对产品的友好度。
5G时代已经到来，5G的普世将会为科技发展带来更多的可能性，众所周知5G的速度是4G的百倍，那么意味着我们的设计的动画会加载的更快，动画文件的大小限制将会被打破，另外也可以在某些领域的产品内设计更复杂更酷炫的动画。
它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内，我们能参与到的动画设计必然会更多样，形式也会更丰富，挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来，让我们拭目以待。
是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体，其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展，各行各业对VR技术的需求日益旺盛，VR技术也取得了巨大进步，并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计，并且我相信未来会逐渐的变成主流。
参考资料
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
俗话说，“有样学样（Monkey see, monkey do）”，包括人类在内的灵长类动物都擅长模仿。这个词表示无意识镜像或模仿我们周边人行为的状态。根据我们在产品方面的经验，我们进行的互动具有亲密性和即时性。
你有没有试过听了朋友说的话之后又说给对方听？这是变色龙效应的完美例子。
指由于之前受某一刺激的影响而使得之后对同一刺激的知觉和加工变得容易的心理现象。我们半夜三更看了电视的恐怖电影之后，跟看喜剧相比，屋子里面听到的任何吱吱声或者噪音更有可能让你毛骨悚然、心惊肉跳。
启动效应会塑造我们对环境的行为和反应，而且往往是有效的捷径，让我们可以迅速做出决定。这也是一种有效的说服工具，已经广泛应用到产业的营销和广告领域。
德国精神病学家和儿科医生海德维希·冯·雷斯托夫（Hedwig von Restorff）在1933年提出的理论。冯·雷斯托夫有一次实验，涉及到让受试者观看一系列相似的物品。结果他发现，如果其中某个很特别的话，那么相比其他物品，受试者就更容易回忆起这件物品。
冯·雷斯托夫效应又叫做隔离效应（isolation effect），或者新奇效应（novelty effect），其预测是当存在多个相似的对象时，跟其他有所不同的那个最有可能被记住。
该理论由赫尔曼·艾宾浩斯（Herman Ebbinghaus，著名的艾宾浩斯遗忘曲线也是他的发现）提出。它描述了序列中项目的位置是如何影响回忆的准确性的。
这种效应是指记忆材料在系列位置中所处的位置对记忆效果发生的影响，包括首因效应和近因效应。系列开头的材料比系列中间的材料记得好叫首因效应或者首位效应；系列末尾的材料比系列中间的材料记得好叫近因效应或新近效应。
用户往往最容易记住系列中的第一项和最后一项。
把最重要的信息放到开始和结尾。把最不重要的信息放在中间，这是吸引用户注意力的高效方法。
在格式塔原理之下，派生出了很多的其他原理。我们会在下面进行简要讨论：
在设计周围留白，从而创造出一块大于其各个部分之和的区域。用最简单的措辞来说，格式塔理论是基于这样一种思想，即人脑会下意识地把各个部分组织成一个系统，从而创造出一个整体而不是一系列的离散元素，通过这样来简化和组织包含有很多元素的复杂图像或者设计。我们的大脑天生就是为了看清结构和模式，从而更好的理解我们生活的环境而构造出来的。
在格式塔里面，相似的元素不管彼此是否靠近也会在视觉上进行分组。分组可以按颜色、形状或大小进行。相似性可用来将可能彼此不相邻的东西联系在一起。
不管实际画出来的线条如何，人眼在观看线条的时候都会按照最平滑的路径想象。当目标是引导访客的眼睛朝特定方向看时，这种连续性会是很有价值的工具。
这条原理反映的是人会把设计或图像缺失的部分自行脑补，创建出一个整体来。或者说得简单点，在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到复杂的形状。
这条原理是指元素之间的距离如何。在UX设计当中，运用相邻性是为了让用户将某些事物组合到一起。通过把它们放在一起，用户就会感觉它们是相关的。
跟闭合原理类似，这条也利用了负空间。我们的大脑会区分出图像前景的对象。设计师如果想要突出某个焦点时，用这条这真的很方便。
这条原理是指，沿同一个方向移动的元素本身会被视为一组。如果我们看到一群鸟朝特定的方向飞行，我们就会把它们组合在一起，并将它们看作是单个刺激物。
指在一个人的工作记忆使用的脑力综合。是指你为了完成任务需要消耗的脑力。
认知负荷是表示处理具体任务时加在学习者认知系统上的负荷的多维结构。
以英国心理学家威廉·埃德蒙·希克（William Edmund Hick）命名，其理论指出当选项增加时，下决定的时间也增加。一个人做出决定所需的时间取决于他或她可以选择的选项数。因此，如果选择的数量增加，则做出决定的时间将对数增加。
决策所需的时间随着选项的数量和复杂性增加而增加。
这条定律规定，任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。
获得目标所需的时间取决于到目标的距离以及目标的大小。
可以利用这条定律来影响互动按钮的转化率，尤其是用手指操作的移动设备上的设计，可以把希望互动的按钮设计得更大一点，把不希望用户点击的按钮设计得小一点，更难点中一点。用户任务/注意区域与任务相关的按钮之间的距离应尽可能的短。
这条指的是用户往往会认为有吸引力的产品更实用。大家往往会相信看起来更好的东西用起来也会更好——就算实际上效率和效能并没有提高。
用户往往会把美观的设计看作是更实用的设计。
对视觉设计的积极情绪反应会让他们对可用性方面的小问题更加宽容。
这一理论是由心理学家佩维奥（Paivio）提出来的，他强调在信息的贮存、加工与提取中，语言与非语言的信息加工过程是同样重要的。佩维奥（1986）指出：“人的认知是独特的，它专用于同时对语言与非语言的事物和事件的处理。”利用双重编码系统可以让用户更容易记住我们网站上的重要内容。
我们会根据你对现实世界的体验和感知为脑中想到的文字建立视觉形象。一想到“体育”，我们的大脑就会自动想到球的形象，运动员的形象。通过将文字跟图像配对，可以更容易记住东西。
我们一般不会用价值数千美元的眼动追踪软件或者脑电图来判断设计是不是有效。但是5秒测试是个强大工具，用它就可以确定你的设计是不是一看就明白。
所谓5秒测试，就是让受试者观看网站或应用5秒钟，然后回答有关主题和设计的问题。如果用户的答案或者留下的印象跟你的设想不一样，那就说明设计没有达到原先的目的，需要继续改进。
这条原理来自罗伯特·西奥迪尼（Robert Cialdini）的著名著作《影响力：说服心理学》（Influence: The Psychology of Persuasion），里面列举了类似互惠、一致性、社会认同，权威以及稀缺性等原理。
这些原理往往决定了我们在社会当中的行为方式，我们可以用它们来识别人类行为。
互惠：这条原理是说人都不喜欢亏欠别人。如果别人给了他们什么东西的话，他们应该会觉得有责任给予一定程度的回报。提供免费的电子书，博客文章，播客或其他免费内容，然后换取用户提供的电子邮件地址，这就是现实生活当中互惠的好例子。
权威：权威这条原理说的是我们大多数人都意识到自己没办法在每一件事情上都是专家。我们最好的选择是依靠专家的证词。所以，我们允许专家和任何特定议题的“权威”人士影响我们。大家往往会对高水平的专家和权威人物的话言听计从，因为觉得他们值得信赖。如果跟成功公司能扯上关系的话就会经常被提及，好建立一定程度的尊重和可信性。
一致性：这条原理说的是大家一般都希望自己行为跟自己的决策过程保持一致。西奥迪尼曾经进行过一项研究，他让两组志愿者挨家挨户去询问房主愿不愿意在自家前面的草坪上立一块写着“小心驾驶”的大广告牌。
第一组的做法就是简单粗暴直接上门问。而第二组是先做一个初访，请求房主在他们前面的草坪放一块很小的标志牌，“做一位安全的驾驶员。”
结果第二组的成功率高出450％。这就是（承诺与）一致的一个例子，因为房主会觉得自己有义务在这种情况下保持一致性。
社会认同：大家未必总能知道自己为什么会这么做。大家是不是都在跳舞？如果是的话会有更多的人跟着跳。大家是不是都在看那个视频吗？是的话会更多人会点击它。是不是每个人都在买你的产品吗？是的话，你想拦都拦不住。在电子商务的实践当中，我们使用的网站会社会认同（比方说点评、评论和推荐）来吸引其他用户，并引导他们做出购买决定。亚马逊有“购买这个的客户也购买了那个”的提示，希望强化你跟商品的关联性，让用户认为“如果别人需要它的话，那我也需要它”。
稀缺性：在塑造行为的原理方面，这是我的最爱之一。稀缺性原理是说，如果东西有限的话，大家就会更想得到它。能得到的人越少，吸引的人就越多。
为什么有的商店会推出限量版服装？这就是原因，这样可以吸引更多的顾客。
变化盲视（Change Blindness）：指观察者不能探测物体或情景所发生变化的现象。
记忆未必永远可靠。我们对信息的存储方式会被我们的想法、感知信念以及周围环境所重构。
我们的工作记忆能力大概就只有10到15秒，一次只能记住3到4个东西。
研究表明，大家往往会制造出错误的记忆，要么会记住了没有发生过的事情，要么就是记得的东西跟实际不一样。由于记忆具有提示性和可塑性，所以根据大脑的习惯或心智模式来进行设计就非常重要，因为这样会更容易记住。
尽可能为用户提供帮助和反馈，并提供撤销选项，以减少用户犯错时的沮丧情绪。让体验个性化，好迎合我们用户的喜好。
单纯呈现效应是指图片、符号、数字、声音等外部刺激信息只要经常暴露在人面前，就能增加人们对其喜欢程度的现象。这种社会心理会发生在我们所有人身上，我们在不连续的时间段内见到某人的次数越多，我们觉得这个人讨人喜欢或迷人的可能性就越高。这种效应有时候又被叫做熟悉定律。
了解单纯呈现效应及其机制，会让你在转化率优化的工作中具备重大优势。更多的呈现会带来熟悉感，进而带来舒适感，从而让转化率优化整体上得到显著改进。
色彩也是影响人的选择和行为的主要因素之一。我们经常会发现儿童玩具颜色鲜艳，女孩玩具往往是粉红色的。这方面研究的主要思想是色彩对用户的感知有很大的影响。
所以，作为设计师我们应选择能够传递含义与正确信息的色彩。
红色。跟热情、强烈或攻击性的感觉关联。同时是好和不好的感受，比如爱、自信、热情、愤怒等的象征。
橙色。充满活力的暖色，给人以兴奋的感觉。
黄色。幸福的色彩。象征着阳光、喜悦和温暖。
绿色。大自然的色彩。给人以来平静和新生的感觉。另外，也可能用来表示经验不足。
蓝色。一般用来表示企业形象。往往表现出冷静的感觉，但是作为一种冷色，也跟距离与悲伤有关。
紫色。由于很多国王都穿紫色的衣服，所以长期以来就与皇室和财富联系在一起。紫色也是代表神秘与魔力的颜色。
黑色。这种颜色有很多含义。往往跟悲剧和死亡相关联。可以代表着未解之谜。可以是传统的，也可以是现代的。一切都取决于怎么用，以及跟哪些颜色一起用。
白色。意味着纯洁和纯真，以及完整性和清晰度。
我们一般是从大脑负责本能的部分得到这种反应，本能反应的速度比我们的意识要快得多。本能反应会导致我们用了一下产品后就爱上了它。这些反应植根于我们的DNA之中，所以很容易预测。
作为设计师我们就是要通过设计制造出视觉上极其出色的美感印象。为什么一个东西在用户眼里好看，以及为什么他们是我们的目标受众，他们的需求是什么，这些都不难猜测。
用户体验设计的概念根植于认知和行为心理学，那是人类与机器交互的蓝图。当然，本文仍还没有涵盖到所有的设计心理学原理。但是，作为设计师，我们还需要观察和理解最终用户，并且加深对用户的理解与共鸣。在产品开发过程中，了解用户的互动、行为和情感可以增加更多的价值。
原文地址：追波范儿（公众号）
作者：terechen
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这是最常被提及的用户体验设计基础，当涉及到产品设计决策时，提醒我们要学会使用同理心，而不是仅凭个人的想法或意见。
真正好的用户体验设计是为用户量身打造的，用户的意见、痛点、愿望、偏好和需求对产品来说至关重要，所以在项目初始阶段需要投入大量的时间和精力去了解用户。
用户体验研究重点是了解用户，为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求，区分了设计任何人都可以使用的产品和为目标用户设计的产品。
一款特定的产品需要面对不同的目标群体，前期研究中需要了解目标人群需要什么并在产品中反映出来，这是针对性很强的设计研究。
可能很多人对信息架构的定义很模糊，这里举个例子来具象说明一下信息架构的含义。
例如在一款产品中，如果把所有内容都堆到一个列表或页面中，可能我们将无法使用这款产品，所以我们看到大多数的App和网站都包含很多的导航和页面结构，按照内容重要程度有序地来组织内容。
信息体系结构的最终目标是帮助用户理解他们在看什么，并帮助他们找到需要寻找的内容。
信息架构在制作线框图或原型之前完成，因为它是产品的基础，有助于设计师考虑什么功能是最重要的，哪些是用户最需要的以及哪些次要内容可以隐藏起来等。
这种结构与产品的导航设计密切相关，有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。
信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容，点击任何元素都没有反应，会给用户带来很糟糕的使用体验。
没有场景，任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。
这条原则有助于设计师考虑还有哪些因素会影响用户和产品，很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。
例如在设计表单时，会尽可能的添加输入提示，最大程度地减少用户出错的机会。
保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受，因为用户不需要再次学习如何操作，他们会回忆起之前的操作习惯并将其作为指导，这也解释了为什么同类型的产品例如电商类App页面设计的很相似。
保持一致意味着在需要时可以重复使用某些UI组件，并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时，所以按钮的状态应该是一致的。
从逻辑上讲，产品越大，这种一致性会变得越来越有挑战性，这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡，放弃的用户就会越多，在市场营销中，这通常被称为销售漏斗中的漏洞。
这条原则意味着用户希望能控制产品，无论是完成任务还是定制满足他们需求的内容。
在设计过程中一直试图给用户尽可能多的控制权，例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。
需要注意的是，当提供太多选项或用户太依赖于自己的选择时，用户可能会不知所措，造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地，不能让用户感到使用压力。
在整体上看，建立高标准的可用性是为用户做的最好的事情，有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。
可用性的重要之处在于要理解可用性的灵活性和重要性。
结合可用性的概念，我们还要进行用户测试，这是设计师对工作进行测试的方式，对新的产品来说至关重要。
当设计思想和理念被转化为有形的原型时，设计师要观察真实的用户是如何与之交互的，可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。
测试通常分几轮进行，团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现，设计也随之发生了变化。
如果发生更改，将会进行新一轮的测试，通过这个过程，设计团队可以改进他们的工作，直到达到可用性标准。
在创造力和创造独特事物的渴望中，很多设计师很容易无意中弄乱产品界面甚至产品本身。
功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击，但也会给用户带来负面体验，在设计时要学会克制并优先考虑真正关键的部分。
另外手机端的屏幕空间非常小，创建一个有效的布局，想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。
视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动，并立即了解最重要的内容以及这些内容与其他部分的关系。
视觉层次结构与布局设计紧密相连，帮助用户消化所接触到的信息。
创建层次结构从概念的草图开始，一直持续到完成设计。例如发送按钮通常会用绿色而是不红色，而次要按钮会显示为灰色或与背景混合，并显示“撤消”或“返回”。
为用户创建心智模型是尝试使用同理心的一种方式，是帮助设计师从用户的角度看待问题的工具。
做到准确就是直观的产品，用户不需要投入精力就可以使用它，而错误的思维模型会导致一些问题，例如界面混乱、高昂的交互成本。
为了匹配用户的心智模型，可以采用多种不同类型的研究方法，常见的方法包括卡片分类、决策树、对用户行为的密切观察，或者使用大量的数据来建立关键用户的心理模型。
讲故事的方式更加直观，利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感，给用户留下持久的印象。
想出一种可视化的方式来传达复杂的内容具有挑战性，但同时也是有益的，可以更好地接近用户并将其作为提高产品可学习性的方法。
高保真原型是设计项目的最终目标，但是直接使用原型软件不断添加各种页面细节是错误的操作。
避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下，一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。
不仅要检查关键用户是否可以流畅地使用产品，还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。
事实上，残疾人和其他用户一样需要数字产品，但很多产品在设计时并没有考虑到这些群体，但这也提供了一个机会，为所有用户提供一个可以依赖的好产品。
我们知道为用户提供一致的设计有助于克服学习曲线，同时为用户提供熟悉的东西也有助于缩短学习曲线。
例如，大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮)，这意味着他们会本能地知道这些组件代表什么意思或者如何操作。
使用用户已经熟悉的东西并不一定会让产品的独特性消失，有经验的设计师会利用这种熟悉性来来创造一些独特的设计，同时也是直观的，不需要太多努力就可以使用。
设计一个完全不依赖熟悉度的产品可能是具有风险的行为，因为它很容易让那些不熟悉产品的用户超负荷，形成巨大的学习曲线，增加用户负担。
可交付成果是可以在整个团队中交付的内容，包括用户画像、心智模型、用户旅程以及线框图和原型等，是一种有形和具体的表现。
可交付成果是用户体验设计原则，可以帮助设计团队和其他利益相关者理解和交流概念。
▲ 用户画像可以捕捉理想用户，并提供可以相关联的真实面孔，是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤，有助于确保这些步骤确实可以轻松执行，并且整个过程很流畅。
这些交付成果服务于关键功能，设计师需要在整个项目中都依赖它们，不断转换为用户可以与之交互的真实有形的设计。
用户体验设计的过程不是线性的，而是一个循环。无论创建什么样的产品，都需要专业的原型工具，将基本框架放在一起，然后添加可能需要的所有细节。
从逻辑上讲，设计团队的具体需求会因团队而异，但一些关键功能例如团队协作、需求管理、交互设计和开发移交等，对于大多数团队来说是必要的。
一切都从收集需求开始，然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易，但随着项目的进展，要保持列表的条理性确实是一个挑战。
除了创建需求和检查需求之外，还有一个问题就是调整需求，需要从设计、技术和业务各个方面来处理各种需求，还要确保这些需求之间没有相互矛盾。
网页端和移动端产品最明显的区别是屏幕尺寸，这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。
移动端产品会有更多影响设计决策的因素，例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。
几乎所有的产品都专注于设计模式，它们可靠、易于查找并通过减少设计时间来为项目增加实用性。
▲ 当用户在谷歌搜索中输入的内容有问题时，谷歌会提供一个相关的搜索提示，辅助用户进行精确地搜索，解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。
拥有单一的内容来源可以为团队带来清晰性和高效性，如果线框和原型分散在多个渠道中，这种内容的集合就会变得很难达成。
通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题，防止产品细节没有表现出来或者被忽略。
最后
通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。
没有人知道用户体验设计在未来会引领我们走向哪里，不过我们可以确定，无论它带给我们什么，肯定都会很有趣。
内容参考：justinmind.com/ux-design/principles
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学UI网》掌握这20条用户体验设计原则，助力设计成长！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这一篇，我们来探讨下交互设计的善意。
善良常常被用来形容人，偶尔被用来形容产品，很少被用来形容交互设计。
就像人们会说，iPhone 有人文关怀，而很少会说，iPhone 的交互设计有人文关怀。在笔者看来，原因之一，是交互设计很难将人文关怀囊括完，而产品本身则基本可以。
类似的道理，本文探讨的善意，始于交互设计，但不局限于交互设计，还包括产品和企业的善意。
一家之言，欢迎交流探讨。
01 为什么选择善意？
一个 3 岁小孩流落街头，无家可归，会让无数人起恻隐之心。我们普通人的微小善意，有时可能是一种本能反应，或者说是一种感性反应。
“他内心是有时邪恶，还是对人们始终良善”，这是李宇春《年轻气盛》里的一句歌词。
恶是否为本能，笔者不知道。科学家的解释是，有些基因中会带有恶。可以肯定的是，善恶皆为人性，共存于人类当中。
感性和理性是会此消彼长的，林黛玉和薛宝钗就是两个极致的例子。同理，人类体内的善恶，也会此消彼长。
一款产品，在做决策时，很大程度上是基于理性。
这种理性决策，很多时候是无意为善，也无意为恶。但遗憾的是，那个非善非恶的中间地带不会一直存在，有些无意为善和无意为恶，最终会成为非善即恶，比如开屏页是否放广告这件小事（下文有详述）。
既然善恶会此消彼长，而且产品的有些理性决策会导致非善即恶，那么不可避免的，有时候，善恶会变成一道二选一的选择题。
接下来，我们就从理性的角度探讨下，为什么选择善意。
1 长期主义
最近几年，互联网从业者有个共识：创业是件九死一生的事儿。因为据数据统计，90% 的创业公司活不过三年。
这是一个值得深思的社会现象，背后的原因究竟是什么？直接原因，往往是资金断裂。深层原因，会有很多，比如产品不够好、方向不够准，等等。
那么，核心原因呢？笔者认为，和创始人的执念有关。
有两类执念可以避免此类悲剧。第一类是做出优秀产品；第二类是长期主义。
做出优秀产品这块，有很多例子，最典型之一是特斯拉。特斯拉曾面临多次危机（资金、产能等），但都挺过来了，这肯定和产品深受车主喜爱有关。
笔者也见过两个普通创业公司的例子。他们都有一颗做出好产品的心，都很重视 UI、交互、用户体验这些基础的东西，而且把 UI 做的比较优秀，交互和用户体验做的还不错。其中一家靠着用户的付费在平稳发展，另一家连产品带团队被大厂收购了。
长期主义这块，典型例子之一是巴菲特。巴菲特信仰并践行价值投资，价值投资依赖长期主义。最近几年，长期主义在国内也被越来越多的提及。
个人的理解，长期主义至少包含两个要点，分别是：积累、多赢。因为，没有积累就不会有成就，没有多赢成就就不会长久。
中国女排，世界冠军。排球界有个说法，叫三年成型，五年成才，八年成器。互联网行业，也大致如此。这是积累。
用户，员工，投资人，三方利益都兼顾好，才是多赢。
俗话说，顾客是上帝，大家都知道对用户好；投资人作为强势一方，利益也往往有保障；员工的利益是否有保障，往往取决于创始人，所以存在很大变数。
回到主题，长期主义和善意，有什么关系？
通常而言，多赢能否实现，关键在于员工的利益能否得到保障。
笔者在网上看过一个有意思的评论，说当下的年轻人，如果收入、成就感、高兴这三点有两点达不到，就会辞职。
所以，员工利益得到保障的标准，可以简单定义为“三中二“，即收入、成就感和愉悦这三点满足两点。
再来分析一下现状：相比员工，公司是强势一方；人们仍受最大程度剥削剩余价值、官僚思想等观念影响；恶性加班等风气存在；僧多粥少的就业行情。
在这样的大环境下，如果公司对员工没有爱和善意，员工的利益是很难得到保障的。
最后，总结一下：公司有善意，员工利益就有保障，就能实现多赢，从而有望实现长期主义。
2 美好生活
前段时间，因为给武汉捐款 5000 万、并且疫情期间蔬菜按成本价销售，一些网友被胖东来这个商超刷屏了。
胖东来来自河南许昌，一个三四线城市，也是笔者的家乡。目前仅在许昌和新乡有店。
在一些关于胖东来文章的评论区，很多网友在喊胖东来去自己的城市开店。
为什么有这么多呼声？简单分享几个例子。
顾客方面，胖东来有 6 类购物车，包含婴儿手推车、儿童购物车和老年人购物车。老年人购物车自带凳子，可供休息，同时还配有放大镜。
员工方面，有高薪、高福利和利润分红等。胖东来比较为业界称道的高福利有：每周二闭店，春节闭店 5 天，工龄满 1 年即有 30 天带薪年假，一天最多工作 7 个小时。
从网上的报道、评论以及公布于网上的企业文化来看，胖东来一方面主张工作和生活（爱情、家庭、休假等）的平衡，一方面在践行和传播幸福、快乐、尊重等很多积极的文化价值观。
看新闻的时候，笔者注意到，老板于东来经常会提到“美好”这个词儿。实际上，在笔者看来，胖东来本身就代表了一种美好生活，一种物质和精神双丰盛的美好生活。
对于这样的美好生活，用户和员工自然喜欢。可这对企业有什么好处？
胖东来曾经意欲退出新乡市场，新乡合作商家和市民纷纷请愿，政府也多次出面挽留，最终胖东来留下来了。可见，胖东来在新乡已经深入人心，顾客自然会大力支持它的发展。
胖东来有一句 slogon，能够很好的解释这一切，那就是：爱在胖东来。
同样，既提供体面的收入，又关注员工和用户的精神需求，给他们带去美好生活，当然需要更大更多的善意。
在当下中国，能提供高薪的互联网公司已经很多了，但是能在精神层面让员工感觉良好、感觉愉悦、感觉幸福和快乐的公司却为数不多。
对于所有企业而言，这又何尝不是一种机会？
02 交互设计里，有哪些善意？
现实中，像胖东来给顾客和员工提供的这种美好生活不常有。但是退一步讲，还是有很多产品对用户展现了很多微小善意，值得我们学习。
这种微小善意主要有三类，分别是：不打扰，护尊严，人为先。
1 不打扰
我们生活在一个信息爆炸的时代，不被手机上的信息过度打扰，是一个刚需。有三类信息，如果把握不好度，就会对用户形成打扰。它们分别是：广告、推送、推荐。
广告这块，主要有两类会形成打扰，分别是：时机不佳的广告，过长的广告。
这方面，微信是个榜样，值得学习。比如开屏页广告，就是时机不佳的广告，因为大家不想在这里看到广告，微信就没有放。朋友圈里也有较长的视频广告，微信的常见做法有两类，要么先展示一张图片，要么先是无声播放。是否看完整的视频广告，选择权在用户手里。
推送这块，常见的有手机系统的通知和 App 内的红点消息。
系统通知，目前也有被滥用的趋势。根据使用情况和感受，个人的建议是这类推送控制在 1-2 类。第 1 类是关于核心功能，比如微信推送新消息，搜狐新闻推送新闻；第 2 类可保留一定的弹性，核心原则是对用户有价值，比如偶尔的活动通知。
目前有两种情况会对用户形成打扰和困扰，第一种是过于频繁的活动通知；第二种是推送和核心功能相差甚远的信息，比如金融类产品推送新闻。
红点消息，有一类会对用户形成打扰，那就是来自官方的过于频繁的各类活动、促销等信息。
推荐这块，主要指 App 内的 Banner 和专题。目前对用户形成打扰的主要是一级频道的一些专题。
一种是过多，比如网易云音乐的首页，就有 9 个专题；一种是位置不佳，比如 Keep 的“探索”频道就包含了课程的推荐，但是在“运动”频道还有两个专题来推荐课程。
2 护尊严
护尊严，就是尽最大可能，维护用户的形象和尊严。
最近几年，常有产品花巨资撒红包给用户抢。产品的初衷自然是好的，而且看起来也是一件皆大欢喜的事情。但是这件事很难提升产品的美誉度，也就无法增加用户对它的喜爱和忠诚程度。
为什么会这样？
让用户抢自己撒的红包，这件事能维护用户的形象和尊严吗？非但不能，可能还会对此造成伤害。因为可能会显得用户爱占小便宜，也可能会使用户处于被施舍的一方。总之这种事对用户来说，并不酷。
一款产品，要想赢得用户更多的喜欢、尊敬乃至忠诚，就最好不做哪怕仅是微弱伤害用户形象和尊严的事情，同时多做一些相反的事情。
3 人为先
人为先，是当用户利益和企业利益发生尖锐矛盾时，去追求一种用户利益在先的双赢局面。
大家都知道，吸烟是有害健康的，但是烟草公司又是要赚钱的。泰国香烟那种既触目惊心又恶心吓人的包装，就尽他们最大的可能诠释了“吸烟有害健康”，是真正的用户为本，让人心生敬意。
泰国香烟的这种做法，值得一些极易让人上瘾的游戏厂商借鉴和学习。
03 交互设计：如何做到善意？
上一大段，是善意的三类表现。这一大段，再探讨下做到善意的一个原则。
以社区型内容型产品为例，这个原则就是：先服务后管理。
这里的服务，是指以服务者的心态做好用户体验，并不局限于交互设计。这里的管理，指的是一些必要的管理，一般是用户的行为规范和用户违规时的处理，比如评论里骂脏话、发布侵权文章等。
所有用户都是需要被服务的，只有少数行为不当的用户才是需要被管理的，所以我们要先服务后管理，以免误伤了不需要被管理的用户。
服务本身就是一种善意，笔者把它分成了两个阶段，分别是：体验的初始阶段，体验的完整过程。
初始阶段对应的是：初始服务；完整过程对应两类服务，分别是：家常服务，极致服务。
1 初始服务
初始服务，是当用户刚开始用这款产品时，能给他们留下良好印象的服务。
如何做到？不出现任何轻微恶意和管理倾向即可，再提供一些便利和帮助则更好。
下面分享一个反面例子。
在个别城镇的卫生死角，有时会看到这样的标语，“此处禁止倒垃圾！违者罚款 200！“。结果那个地方往往有很多垃圾。
为什么会这样？
这个标语，有两层意思：第一，你很可能会在这里倒垃圾；第二，禁止你这么做，做了要罚钱。
也就是说，某种程度上，这个标语在用恶意揣度别人，同时也在很严的管理别人。
看到这个标语的人很可能会这样想：既然认为我会在这倒垃圾，那我索性就倒了；禁止我？凭什么？还罚我钱，吓唬谁呢，况且你有证据吗？
下面再分享一个很好的正面例子。
笔者有一个宜家的退货经历。把一个已经拆过的桌子打包送到了宜家，宜家没有检查里面的零配件（很多螺丝之类的），直接退了。这样宽松的退货条件，宜家可能会蒙受一定损失，比如小概率的零件丢失，但宜家还是把这种服务提供给了顾客。笔者当时的感受是宜家挺信任我们的，对宜家就多了几分好感。
2 家常服务
家常服务，是指一种稀松平常，但又让用户感到舒服自在的服务。
举个例子，你去好朋友家里玩，朋友给你倒了一杯水，并端出一盘削好切好的苹果，你们一边吃一边聊。你和朋友是平等的关系，他这种简单的招待并不会使你感动，但却使你有一种接近在自己家的那种舒服自在。
笔者在用微信公众号（后台）时会有这种感受。在星巴克和肯德基时也会有类似感受。
家常服务，如何实现？第一，要有良好的初始服务，这是基础；第二，要有周到且较高品质的交互设计，这是关键。
以微信公众号为例，和微信一样，它的交互设计也做到了周到和较高品质。下面看看微信公众号的初始服务。
面向大众的资讯平台大多都有一个发文规范，多是关于禁止的行为，通常都会用一个单独网页来展示，有 1-2 页纸那么多。
通常情况下，多数作者是不会违反发文规范的。对于这部分作者，当他们首次看到 1-2 页密密麻麻的发文规范时，可能会产生抵触心理，即便自己不会违规。就好像高中开学第一天，班主任二话没说，直接就立了 20 条班规，同学们会是什么心情。
微信公众号的做法就很巧妙，它把这些规范分割成了三部分。
第一部分是严禁的红线行为，以高度概括的一行文字呈现，所有人都能看到，但是得仔细留意才能注意到。这是规范性质。
第二部分和竞品一样，也是链接出来的一个单独网页。链接入口也和竞品一样，在关联性最强的发文页面右上角。不同的是，这一页展示的是规则，主要以问答的形式呈现，给人感觉是有帮助的信息。这是服务性质。
而竞品的这个页面，通常都是禁三禁四的规范，给人的感觉可能是紧张、压抑甚至抵触。
第三部分是次于红线的禁止行为，比如侵权、低俗内容等。这部分内容的管理办法被以公告的形式分散在公告列表里。而且公告列表里内容多样，还有很多一般的通知，所以这个公告列表也不会像竞品的那一页规范一样，给人紧张、压抑的感觉。性质上是中性。
另外，这部分的入口在后台首页右上角，和发文模块是分开的。所以不会违法规范的作者一般不会去公告列表里翻这些内容，也就看不到。
微信公众号就是这么巧妙的让多数作者看不到“班主任”的“20 条班规”，同时还让他们看到了“班主任”的“常见问题回答”。
这就是微信公众号在发文规范方面的初始服务。另外还有一个加分的细节，就是检测疑似错别字的功能，很贴心，虽然目前还不是很准。
3 极致服务
极致服务，是指让用户感动的服务，比如海底捞和胖东来的服务。
这种服务，一般是由许多细节积累而来，是一种做加法的服务，而且背后往往依赖人力。
好的交互设计，一般都是在做减法，而且纯粹是界面、机器在和用户打交道。所以极致服务难以复制到交互设计上。
不过，一款互联网产品，除了交互设计，还有其它方面的内容。
B 站就是一个例子，它以不走寻常路的方式，在两个方面做到了较为极致的服务。那就是：视频无广告，比较积极、欢乐的弹幕氛围。
结语
以用户利益为先，不打扰用户，维护用户的尊严，这是交互设计里的三种善意，值得我们学习。
先服务后管理。服务作为一种善意，也能够引来用户的善意，最终形成良性循环。
杜绝任何轻微恶意和管理倾向，再提供一些便利和帮助，便能做到良好的初始服务；
在初始服务的基础上，提供周到、高品质的交互设计，就能做到良好的家常服务；
交互设计难以做到极致服务，但是其它方面有机会。
最后，用刘备的一句话来结束本文。
勿以善小而不为。
文章来源：站酷 作者：SnowDesign
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
①什么是IOC
②IOC设计的发展方向
③IOC设计工具（BI类设计工具）
④IOC的应用场景
以上不展开阐述，不理解的朋友可自行关键词搜索，我们就应用层面发散一下；
数据指标--指挥调度--数字孪生--设备监测--设备控制--事件感知--配置中心
相信设计同学或产品同学，或多或少都有接触可视化领域。比如B端后台常使用到一些统计图表、比如用研分析或者市场分析也常常用到这类图形来表达。
而涉及B端可视化，有一个不可忽视的词就是“智慧”
智慧到底是什么，有人会告诉你，以前是数字化时代和智能化时代，现在已经开始进入到智慧化时代。但你要具体问智慧化和数字化有什么区别，大多数人会支支吾吾给你一个抽象的概念。
人尚且不能诠释智慧，又怎么去创造智慧呢？
所谓的智慧城市、智慧园区、智慧社区、智慧校园、智慧交通、智慧安防，甚至智慧殡葬。
扒开外衣，它真的智慧吗？
到底什么是智慧？百科告诉你：
“ 智慧是生命所具有的基于生理和心理器官的一种高级创造思维能力，包含对自然与人文的感知、记忆、理解、分析、判断、升华等所有能力。智慧与智力不同，智慧表达智力器官的综合终极功能，与“形而上之道”有异曲同工之处；智力则谓“形而下之器”，是生命的一部分技能。
在我们的日常生活中，智慧体现为更好地解决问题的能力。
通常，我们设计可视化大屏都容易被局限在平面空间中
“这个屏就这么大，你还想要什么？”
要提升可视化，首先就要打破面板大小的局限性，
理解并以其他形式满足合理的数据穿透需求
如：
“
这个饼图告诉我未处理的还有8个工单，到底是哪8个工单，
谁在处理，处理停留时长多久了？，
你就告诉我没处理完，能辅助我决策什么？
”
数据的穿透面板可以有多种形式，以弹窗和面板的切换居多；
数据穿透后，也需能给到更详细的信息辅助管理者决策，
但“决策”的动作如何做？
对讲机？电话？或又是其他通讯工具？
不可质疑的是，确实很多情况，对讲机更有效率
但信息化时代，有时为了痕迹留存，可以牺牲一些效率或尝试融合；
这就迎来了大屏的功能性操作，工单指派、催办、关闭、误报等；
当然，想象空间还有很多，
如：未必客户的操作台就如同公安一样分布着各类事件的值班人员，
未必不会出现临时替班情况，如何通过大屏指导或指引不熟悉的人员处理事件？
处置预案或者叫处理建议，也许就是另一个亮点。
数据终究是数据，没有物理世界的直观感，
数字孪生即是这个时代最热也最保温的话题，比如最近大热的概念元宇宙；
虚拟世界的映射我们见过太多，但大多是在游戏中，
如果要真正反映真实世界，技术空间依然很深。
打个最浅显的比方，模型基于X、Y、Z轴坐标，而现实世界基于地理位置（GIS）,如何映射？
BIM（城市信息模型） 、GIS（地理信息系统）、IOT（物联网）
关于孪生，路还很远，但从几何模型——数据模型——数据融合——动态孪生到自主孪生，我们已能看见光。
大家可以去瞅瞅51World，一家以克隆地球为愿景的数字孪生机构，虽然不知道他们能走多远，但一定值得关注和祝福。
IOT物联网？
传统的可视化我们会罗列设备的信息列表、日志、报警事件，
但大多都是非技术人员无法理解的数据，产生不了价值，更不能辅助决策。
关于设备，我们要往实用层面多加考虑，在真实场景中找到应用价值，
比如监测设备的在离线状态、故障事件、原因分析、设备开关控制等；
万物互联，未必不可能；
说到设备的故障事件，我们突然想到，传统的故障是怎么发现的？
通过物管码，定期巡检，上报异常；
现在我们通过设备各项传感器也能发现，这是设备，那人、车、消防，难道不行吗？
人可能包括内部工作人员比如脱岗等事件，也包括外来人员的闯入等；
车可能包括超速、逆行、违停、僵尸车辆等；
现在的AI感知摄像，如执法摄像、车辆监测、热成像摄像等，可以帮助我们感知大多常规事件。
除此之外呢，数据的比对可以分析出各类异常，当然，人工反馈也不可或缺。
数据差异多大算异常，什么时候告警，这些随场景不同都可能截然不同，标准虽然重要，配置也不可没有；
图表的展示形式，是折线又或是柱状，维度是区域又或是楼栋？，图表的样式和数据维度配置貌似让人惊喜；
谁来看都展示一样的数据？会否出现数据查看的需求不同？演示和使用的需求会否截然相反？
打个不恰当的比方：
使用时，更希望没有告警；
演示时，更希望让观众看到我们对告警事件的处理效率和大屏的智慧；
权限的配置值得深思；
文章来源：站酷 作者：互耕II乙方
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
好久没有发文章了，今天顺叔和大家一起聊一聊卡片式设计，无论是WEB还是APP卡片式设计运用的比较多，很多UI设计师比较偏爱这样的表现，卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解，不能因为卡片式设计而卡片式设计，要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家，之后的几篇系列文章中，顺叔会从界面中比较趋势的设计技法进行分析，希望能帮助到一些设计的小伙伴。
教程前的引言
卡片式设计这几年比较流行，同样这样的设计表达也是个趋势，应用在APP PC界面中至今还流行着，从事UI设计的都会知道卡片式设计，具有把内容整合模块化，从视觉，个性化体验上进行呈现，是设计师在设计时常用的一种表现，同样也具有独特的创新概念。
在一些项目中，一些客户会说这个设计的APP界面有点太白，没有层次感怎么办，那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法，卡片式设计，可以解决在画面中有个性化 、变化、 层次感的设计。那客户又问什么是卡片式设计呢？
一、什么是卡片
无处不在的卡片设计具有个性的美感和很好的易用性，是以文字标题，小标题， 图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势，而卡片在设计中也占用一定的优势，让整体更加的有层次感，在运用起来也比较方便，从视觉、体验、交互都具有不错的优点
设计效果图展示
顺叔为了这个文章特意设计了两个案例，通过这两个案例进行一些讲解。请见下图：
二、卡片设计优势
1.趋势
无论是大平台 还是小平台的产品都会运用这样的卡片式，跟风式设计趋势，也让卡片式设计成为了一个现在常用的优势，不过卡片式设计的确有很好的效果
2. 层次感
具有一定的层次感，能在页面版式中起到设计上的不同，个性化变化，页面层次感区分强烈，能更好的体现提炼出内容
3. 规整化
卡片式设计以图片、 图标 、LOGO、 标题、 整合到一起 以块状的形式在界面中展示，更规整的排版呈现。虽然内容多会导致页面乱，一个模块包含内容之后就会规整不少，也给页面设计上带来了更好的视觉
4. 视觉体验
卡片式给整个页面会增加视觉上的体验，特别那种大图片卡片式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、 产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。
不要为了卡片设计而卡片设计。
5. 易用性
卡片式设计在易用性和灵活性上比较高，在响应式设计中同样应用的也比较多一些。能更好的有序排列。
6.简约设计
简约设计会更显得品质，不需要过多的进行装饰，哪怕就是一个白色的色块，上面点缀有色彩的图标和标题 副标的变化，也会觉得显得高大上，就算是一个带有颜色的色块卡片，也无须过多的设计 内容上的标题 、图标、 按钮就足以支撑起卡片
7. 交互效果
在卡片式的设计中会有一些动效交互，比如整体卡片放大、 缩小 、左滑、 右滑，可以整模块化滑动 缩放。整体效果增加了不错的视觉交互体验
三、卡片正确设计知识
一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢，下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考，把一些表现手法加入到自己的设计中，适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示，在做进一步的对比和布局中以最好的效果为最终展示方式，总结分析几个常见代表例子，如有不全请讨论补充，下面就是一些例子
1.卡片式形式一
以色块为主体并用现在比较流行的渐变色组成，其中四边为圆角，同样色块下边阴影衬托出主题，这个是在卡片中设计比较常见的运用手法，卡片的长高在设计中也是根据结构，内容功能而进行设定。正方形，长方形都是一个表现得手法，在色块上面标题文字，图标，图形是整个卡片的布局的形式，无非就是左右布局和上下布局
应用场景：卡包、天气、类别、入口、优惠劵，卡劵
此图片来自于网络
2. 卡片式形式二
这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标题，副标题，以及图文版式，不难发现，如果图片有颜色，那么下面是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，图二很多在会员卡设计中常用的比较多，也比较简约，另外两个共同特点背景有颜色，一般底部背景颜色就是整个界面的主色调，背景有色块，上面就用白色卡片，卡片上方标题、 文字、 图片呈现。只不过排版的方式有所不同而已，在很多APP设计中，这样的表达也很多，通过主色调可以很融合的把上面的状态栏，导航栏融为一体视觉上统一性，底部背景颜色延续下来，上面凸显白色卡片，这样更具有视觉感和层次感。白色的卡片不需要过多的修饰，更能体现的上面的文字和图片。
应用场景：会员卡，滑动卡片，图文标题，入口
此图片来自于网络
3. 卡片式形式三
这种形式上图下文字，或者是上标题，下图片的形式，这种形式特别在图片素材的选择上尤为重要，有视觉效果好的图片通过剪切，处理，合成，摄影，插画等等方式，出现的图片质量上好的话可以带动整个设计的逼格，通过有效的图片传达，文字传达，让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多，同样也能体现出整体化和视觉化
应用场景：滑动卡片，图文标题，入口，列表
此图片来自于网络
4. 卡片式形式四
大图卡片式，一般以摄影图片，插画形式，文字压与图片之上，这样的效果更具有冲击力，也能显得出比较潮流。体验也很不错，放大视觉，展示内容，图片相结合，让浏览者更愿意多看一会。表达的图片与文字内容相符，做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。
应用场景：列表，说明，入口，天气
此图片来自于网络
5.卡片式形式五
列表卡片设计，这种形式一般白色的卡片，上面标题，头像，按钮，扁平插画形式体现，更多应用在一级页面的下方内容，以及二级页面的列表页或者集合页，整体弱化背景以白色为主，给予圆角及阴影承托出层次感同时，体现上面内容部分。每个模块的单元体具有统一的视觉。
应用场景：列表，集合页，入口
此图片来自于网络
6. 卡片式形式六
大卡片式设计，表现为一块特大的卡片式，上面会有标题，按钮等信息，同样表现出突出层次感，个性化设计的特质。体现出内容，一般背景有颜色上面卡片为白色，如下面背景为白色，那么卡片的形式也可色块，在对比上有个反差，才能突出卡片的作用性。
应用场景：提示，说明，优惠劵，劵，入口
此图片来自于网络
以上总结的几种卡片的形式，在设计中可以根据情况而设计，卡片多样化，布局多样化，适合自己产品的才最重要，虽然在界面设计中常用的设计，但不要盲目的为了卡片而卡片套用设计，这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。
同样在这些卡片中会有一些基本的共同的特点
共同的特点是
1. 四个角都是圆角
2. 根据潮流渐变色或白卡片
3. 色块下的阴影，色块下的阴影更能体现出层次
4. 卡片上面组成部分，标题，副标题，图形，按钮，图片，头像
5. 字体大小，字体颜色的变化
6. 一般卡片应用在会员，列表，说明，优惠劵，分类，类别，集合页，欢迎页等场景常见
三、卡片正确设计知识
为了讲解文章，顺叔临时构思一个产品原型，而快速进行了简单的设计，一个第一版，一个优化版，主要为了讲解一下这个卡片设计一些问题，
以下此图为构思的原型图
经过分析原型图之后开始进行设计，首先设计一个版本的，如果这样卡片布局设计，这样色彩搭配的情况下，会怎么样呢，整体设计用了蓝紫色为主色调，首先铺蓝紫色的色块作为背景，然后上面放白色卡片，以至于卡片上详细的内容，比如数字，图形 能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片，通过扁平化设计，以色块为主设计一个蓝色，一个橙色的卡片，上面并有图标，头像，以及标题，两个颜色的对比，更让视觉有冲击力，整体看这个设计并没有什么，但有个问题在于单个模块拿出来效果的确都不错，但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉，当打开这个界面的时候视觉落点在彩色卡片上，那么这个整体设计上就出现了问题，上面的数据，白色卡片其实是比较重要的，而且整个画面都是卡片毫无设计上的变化，
那么只能在这个基础上在进行优化，其实大家在做设计的同时也这样，在考虑功能模块前提下，用户体验，也要考虑视觉体验，那么视觉从哪方面来，色彩、层次、版式等等方面。那么能不能在进行一下优化呢，其实还是有空间在进行优化。以下图为第一版
设计第一版
根据上面的设计在进行优化，同样保留白色卡片部分元素，在卡片与卡片之间放一些颜色的图标，这样更好的给功能上快捷入口，也能给卡片设计增添了变化。使得整个画面更灵活
虽然白色卡片，但有一些色彩的点缀，也让白色卡片活跃起来，把颜色的卡片改成白色卡片，从上到下的版式舒服多了，也没有那么跳。整个风格更简约，同时功能也更全面。
调整后
从原型图，在到设计第一版，在到优化调整之后，证明一点，卡片不要因为卡片而套设计，反而会失去效果，考虑功能模块，用户体验，视觉体验也一定让整体舒服。一直都说，绘画中需要有主有次，设计中也一定要有主，有次的进行设计。这样层级关系才能更清晰。
但这些条件一定是从，体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计，前期的进行思考，逻辑清楚了，在进行设计的时候会更加的顺畅。卡片式设计，大家都在应用，希望这个文章能给大家带来一点点知识点，那就不枉费我在熬夜写这篇文章。
不为别的，只是一个喜欢分享的肉团子。这篇文章就写到这里，如果喜欢请给个赞吧。如内容有没说到的地方，各位可以进行补充，以上两个图你稀罕哪个呢？
随着当今越来越多的信息需要被展示、曝光，而移动设备的屏幕空间又有限，为了减少用户在使用应用时的跳转，减少用户的路径，设计师们开辟了第三个维度——即在 z 轴上展示叠加的分层动效进行交互表达，从二维到三维，这样更能有效利用手机屏幕上的有限空间，这也是以后界面设计的大趋势。
这个思维方式最早是在安卓的MATERIAL DESIGN语言上体现出来的。（以下简称MD）
Depth（深度）：
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.
在MD的设计规范中，用Depth来说明界面设计中的深度，既而在界面设计中引入了Z轴的设计思维，将界面设计由二维设计引进了三维设计思维的地带。MD通过抽象化纸片在物理世界中的形态，定义除了各种信息层级以及常用状态的表达方式。
再来看看，如今iOS的最新版本iOS 12，也已经开始向这一方向进行发展。最典型的要属以下的iOS的内置应用：股市、语音备忘录、地图、钱包、音乐、播客、App Store等。
三维设计法，在界面设计当中，主要分为两个方向来运用，视觉设计和交互设计。
人们通过双眼能够分辨出物体远近大小的形态，因此如果利用这样的视觉规律，便可以在画面中呈现出真实的效果，突出视觉的立体化。
因为使画面产生三维的模拟真实的效果，可以画面更具有吸引力，我们之所以能够看清楚物体，是因为有光的存在，现实生活的影子是因光而产生的，才是一个真实立体形。如果能恰当运用光影的效果，那将会让图形在进行三维空间转换时变得更加凸显。
当今，在界面的视觉设计方面，通过层叠、卡片化和投影的设计手法来对界面的内容进行处理，可以增加界面的层次感。在如今同质化严重的扁平化设计下，能给人焕然一新的感觉，同时也给人一种内容呼之欲出的感觉，加强了点击的欲望。这样的设计手法让界面的Z轴空间得以加强，必将是下一个新的趋势。
例如：KEEP、潮汐、虾米音乐
例如：Dribbble 和 Behance
图片来源于网络
而在交互设计方面，想同时展示多种内容时，假设对一个需求有着很强的曝光要求，或者是想让用户知道有这项内容的存在，但又不想让页面内容过长，导致被忽略或难以找到时，可以采用页面Z轴层级覆盖的表现形式。
采用了Z轴层级覆盖的架构形式，用户主要的交互操作变为上拉、下拉来阅读信息，减少了点击跳转这一类的操作，减少了用户的操作成本。且滑动手势，是以后人机交互发展中的一个必然趋势。
在一些APP中有所表现的有：豆瓣FM、豆瓣详情页等。（大家可以从这些APP上获取设计灵感）
豆瓣FM
豆瓣（电影详情页）
例如：
上图是京东（APP）的商品详情页，这时候我们接到的需求是将上图的文案放进这个界面中。
要知道在寸土寸金的APP界面中，每一个位置都是十分的宝贵，一但放置不佳，就会给用户的视觉流造成一定的影响，使得用户体验下降。况且，还是京东这样流量巨大的电商APP，位置便显得更加宝贵，而上图中的红色标记范围就是我们的限制区域，下面我们先来看一个不合理的做法。
上图我们是直接加了一个界面，将这个模块设定为可以进行跳转，从而达到显示完整（文案）的需求。
这样做，不仅增加了用户的路径，而且还会给来回切换的用户造成一定的困扰，消耗了手机的资源的同时，下面的留白也显得很浪费、空旷，视觉上就很不美观。
那么，京东是怎么做的呢？
京东采用了一个浮层设计（Z轴），将全跳转改为半跳转，这便是在界面设计中的Z轴运用，这样既可以达到文案所要求的曝光，也能最大利用让界面的空间，实现与原场景的完美衔接。
通过在 Z 轴上进行分层设计，模拟物理世界中人与物的真实的交互模式，帮助用户理解产品设计，将信息更好的浅层化，这样可以给设计师们带来更多发挥的空间。
在使用这个思维来做设计时，可以事先考虑以下几点：
根据用户使用体验，来判断是否需要使用Z轴分层交互。
这样做是否能帮助用户更好的理解你所做的设计？
空间感设计主要意义是能正确的引导用户，并建立起对产品的使用逻辑。
每一个界面层级只需要表现一件事。
当你想要在界面中加入一个菜单栏但发现没有空间？这时候可以考虑使用Z轴的设计。
谨慎使用Z轴层级交互，因为它会增加空间关系的复杂度。
多参考现实世界中的真实交互，它给你的预期和感受，在互联网设计中的很多灵感都来自于对真实世界的理解。
总结：
我们在做设计时，可以把当前的界面可以想象成一个的三维世界——分作X轴，Y轴，与Z轴，在这三个坐标轴上，可以进行思维上拓展。
在交互设计当中，减少跳转便是减少用户路径，就是使用各种方法在三维空间中，用x轴、y轴、z轴做出最合适、合理的用户体验设计。
设计规范是指对设计的具体技术要求，是设计工作的指导规则。一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等。
Design System 最开始是 Guide 演化而来，Guide 是一套可指导、可延续、可扩展、可统一的、可区分的视觉指引手册，指导相关设计结构完成统一性与对外区分性。具象层，它是一种设计方法；抽象层，它是一种思考模型。
设计规范一般会具体到公司级别、某一类产品线、某个产品等。今天主要讲具体某个产品的设计规范，主要是为该产品制定统一的用户体验、品牌、视觉等方面的规范，当然是在满足以上公司级别和某一类产品线层次的设计规范的基础上。
设计规范由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。
设计原则是指：整个设计体系所要遵循的全局原则，是为我们设计提供方向指导的。
设计语言：是指设计所包含的语言体系。具体包含了：色彩、字体、图标、布局等。
组件库：相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个个页面。下面我会具体说明组件库。组件库具体包括：按钮、导航、表单、数据等等。
B端产品和C端产品制定设计规范差别还是蛮大的，最主要的差异大致是：
C端产品的设计规范：目标几乎都是为了更好的打磨用户体验的一致性和标准化；
B端产品设计规范：由于用户体验更复杂，学习成本更高，所以它的目标侧重点是：除了布局的不同外， 相同业务场景下，相同产品功能需要有一致的，标准化的体验，降低学习成本，提高工作效率，即统一体验。
创建原型时可直接调用组件库，能搭建出高保真的原型。
与设计师和前端沟通更加顺畅，小的修改可以直接和开发沟通不需要通过设计师出图，极大增加了前期的节奏，提升沟通效率。
对于只有一个设计师的项目：可以让那个设计更加规范，有些简单功能迭代可以直接个研发沟通，不用再单独出图，减少重复性的工作。
对于同一个项目由多个设计师共同协作时：可保证设计各方面包含体验、设计、交互等等的统一性。减少设计成本，提升设计及沟通效率。
对于接手新项目，能尽快的了解产品，快速入手。
对于开发完成验收走查，有了前期的规范及比较详细的设计尺寸，开发的设计还原度会更高，减少重复及没必要的设计走查。
开发可以按照设计规范建立好公共组件库，极大的提升开发效率。
可复用的东西确定了下来不会频繁改动，设计走查的问题也会逐渐减少。
对于模棱两可的交互可以有地方看交互样式了，不需要再询问设计师。有更多的时间专注于测试功能上的问题了。
通用的组件前期测试后了以后，后续就不需要重复测试，极大的提升工作效率，避免重复工作。
前期制定及评审设计规范以后，有一套笔记明确的规范，可减少各个职位方面的沟通成本，提高沟通效率。
目前市面上有很多多的第三方设计规范，比如：antdesign，element，那有人就会问有必要自己重复造轮子做一遍吗？
我觉得是非常有必要的，为什么呢？
1、每个产品有各自独有的品牌调性，如果都用第三方 的设计规范，那同质化会很严重，很难做到差异化，也就很难在竞争中脱颖而出。
2、 世上本没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。
3、第三方的的成熟的组件库，我认为应该把它当成模式，在他们的基础上去做自己的设计规范。
个人工作中总结出两个比较建议的规范建立时间点，探索期和成长期。
产品在导入阶段，产品还在处于极大变动的时候，这个时候做设计规范，其中就蕴含可极大的风险。但是也不是不做规范，这阶段规范主要涉及到色彩，字体，间距，布局，栅格等通用设计原则以及常用业务组件的定制。此阶段搭建的规范具备高效性以及灵活性的特点。
不适合搭建特殊的业务组件，比如：当领导想要突然调转方向也不会很慌，改动较小就可以完成整体的规范转向）此时搭建规范组件库需要考虑到预留后续更改的空间。
当产品进入成长期处于较为稳定的版本，整个团队对业务的理解也都很熟悉了，这个适合创建符合业务场景的组件库，有了前期的积累这个组件库会更加符合产品及业务逻辑。
在制定规范前，设计师需要明确产品中主要有哪几种分类，将最基础的分类定义好方便后续针对分类内容进行整理。B端产品与C端产品既有共同性也有着很大的差异化，可以借鉴但是切忌生搬硬套C端的设计规范。
Ant Design是由蚂蚁集团体验技术部经过大量的项目实践与总结，逐步打磨出来的，基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验，是非常完整的一套设计规范。
TDesign是腾讯企业级设计体系，也是去年才发布的。虽然才发布，但是作为一款诞生于腾讯内部开源，却是经过了超500项内部业务检验的企业级设计体系，TDesign 汇集了腾讯众多优秀组件库能力和设计研发经验。
内含丰富可复用的设计组件资源，如色彩体系、文字系统、动效设计等，覆盖支持 Axure、Sketch、Figma、Adobe XD 等各大产品设计软件。可以按照需求查看对应组件的使用教程和代码演示，只需简单的引入操作，即可搭建属于自己的产品界面。
Element是由饿了么公司前端团队开源一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品，在众多的的组件库中，AT-UI 属于视觉风格比较清新的一款。
是有赞 PC 端 Web UI 规范的 React 实现版本，提供了一整套基础的 UI 组件以及常用的业务组件。通过 Zent，可以快速搭建出风格统一的页面，提升开发效率。目前有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中广泛使用。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言，并且在不同设备上提供一致的体验底层系统，并同时支持触摸、语音、鼠标、键盘等输入方式。
iOS 的人机规范指南，保持了苹果一贯的风格。虽然没有 Material Design 规范那么细致全面，但是核心的设计原则在每个组件的设计说明中都有渗透。作为 iOS 系统的设计基础，建议每个设计师都需要仔细研究。
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。
NutUI-JDL 是一套基于京东物流视觉规范的移动端组件库，包含了36+高质量组件和详尽的文档和实例。
设计师在开始准备设计规范时，首先需要确定设计风格和设计尺寸，页面布局是做居中固定式，还是全屏响应式。如果是全屏响应式的网页设计，那要选择怎么样的屏幕来做效果？等等这些问题
接下来分别来展开说明。
纯白风（网页大背景是纯白色;文字背景是线框，轻淡色（灰）;文字一般用深色）
轻淡风 (网页大背景是浅灰色;文字背景是白色;文字一般用深色）；
深色风（网页大背景是深色;文字背景是带有透明度的纯色；文字一般用白色）
我们在开始设计之前，要确定好使用哪种风格，一旦确定下来，后面的所有页面和元件的设计，都得基于这个风格来设计。
据数据显示，目前市面上比较流行的是：轻淡色背景风+全屏响应式的设计风格，也是相对比较保守安全的设计。
接下来需要考虑尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，选择怎么样的屏幕来做效果。
设计规范中，分辨率尺寸的问题，一直以来是我们设计师讨论最多的。
决定产品设计尺寸分辨率大小的因素大致包含以下两点：
目前市面上主流的排在前3的屏幕分辨率为1920*1080，1440*900，1366*768。
做B端产品时，现在市场上的设计师一般都会采用的是1440*900。为什么不用市场占有率最高的1920*1080和1366*768呢？
1、由于B端产品的特殊性，它的尺寸分辨率大小，是取决于用户使用的电脑设备条件。由于员工电脑显示屏大部分都是统一采购的，尺寸也就大致统一，所以开发适配的分辨率可以按这个统一尺寸进行设计。
2、因为它的兼容能力会比较强，向上适配或者向下适配误差会比较小，不管是市场占比最高的主流1920*1080尺寸，还是一般般的1366*768尺寸，都完全可兼容。
注意：别忘了设计出极端情况（宽度为1280，以及宽度为1920）的效果图，力求前端开发实现的效果和高保真设计图误差最小。
假如你产品的用户用的设备主要是市面上占有率最高的24寸办公室显示器，也就是1920*1080分辨率的话，那毫无疑问，在选择设计尺寸上，直接选择1920*1080分辨率。
比如我现在做的产品，除了移动办公，web基本都是固定办公，管理人员使用的办公设备（电脑）屏幕一般都是台式电脑，那这个时候，我们在设计时就会同时考虑它的占有率和兼容能力。所以我们采用的是：1920*1080分辨率。
所以设计师们在选择尺寸上，一定要灵活使用，不能一味的认死理只选择1920 或1440某一尺寸，而是要对您的产品用户的具体情况做好分析，从而得出最适合你们产品的设计稿的尺寸。
注意点：
如果希望设计稿完全还原程度高的话，还特别要考虑浏览器的适配，比如说它的顶部固定区域（当前网址，书签栏等的高度）必须排除在外，剩余的部分才是我们设计稿的真实高度。
拿我们常用的谷歌浏览器举例，如下面公式所示：设计实际高度=电脑分辨率 -（网址栏+书签栏+页签高度)
上下布局包括："顶部菜单栏、主体内容"两大区域。其中顶部菜单栏是固定不变的，主体内容根据不同分辨率进行自适应动态缩放。另外还需要把主体内容左右两边空白区域最小值确定好；
优势：内容区域可操作空间大。
劣势：导航区域限制数量，如果导航选项内容比较多，用顶部横向导航的话，就会显得很拥挤。另外，横向导航一般有“展开”，“折叠”，和“收起”三种状态，加上内容很多的情况下，横向导航就特别难做到尺寸适配。
左右布局包括："左侧菜单栏、顶部栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。
左右布局时，左侧菜单是支持收缩或展开，收缩状态下也需要有固定的宽度。
优势：导航部分可扩展性强，适合导航选项内容都是比较多的情况。且只有“展开“和”收起”两种状态，在不同屏幕情况下，宽度的自适应也能更加得心应手。
劣势：相对内容区域空间变少。
现在很多后台管理系统采用，"顶部一级导航栏、左侧二级菜单栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。
优势：结构更清晰。可承载更多层级内容。更适用于复杂且层级多的产品。
所以，可以得出结论：设计师在选页面布局的时候，要全局考虑产品框架及内容。
1、如果导航选项内容比较多的话，或者不确定有多少内容的情况，从美观和操作难易程度、可用性来评估的话，选择第二种左侧导航是最适合B端产品使用的。
2、如果内容选项确定很少，就没那么多限制，“左侧纵向”"顶部横向"都好使
特别要注意
1、同一个产品需要考虑它的统一性，不能这里使用顶部横向，那里用左侧纵向。
2、如果是个更新迭代的版本，就还得考虑老用户之前的使用习惯，避免引起不必要的麻烦。
在确定好导航的布局后，就基本上能确定整个产品的页面布局了。
B端产品，一般会在整个页面的左上角放企业的LOGO，顶部栏高度48+8n，侧边栏宽度200+8n。
我常用的是顶部栏高度：56px或80px，侧边栏宽度：200px，侧边栏收缩状态宽度：56px或80px，右侧的侧浮窗宽度：400px。（具体高度宽度尺寸，设计师可根据具体情况来定，不需要按部就班这么死板）。
同时需要确定好主体内容的上下左右边距，以及主体内容区域中各模块的安全距离，内容超出区域的，通过滚动查阅更多。
Windows系统：中文Microsoft YaHei(微软雅黑），英文Arial；
Mac字体：中文PingFang SC（平方字体），英文 Helvetica；
常见的字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶数字号，文字大小12+4n）。
注意：
在设计过程中，设计师对字号应该有一个全局观，在同一个界面内，尽量少用大小太接近的字号。比如一个页面中，如果同时用了12px、13px、14px、15px、16px、18px排版，文字的层级对比会比较弱，没有主次之分，用户阅读困难，视觉效果也显得凌乱。
所以，刚接触B端产品的小白设计师，如果不知道怎么运用不同字号字体的情况下，可以直接以这组字号12px、14px、16px、20px、34px的字号为参考使用，这样的分布会层次明晰，能够有个比较不错的布局结构。
“行高”根据文字大小和使用场景来定，公式如下，
行高=文字大小+8px（或6px，视情况而定，我常用8）
例如：12号字体的行高=12+8=20px
同一个界面中，一定不要出现多个不同字体。尽量选择用户设备里自带的字体来进行设计，比如说WIN系统默认用系统自带的“微软雅黑”，不能使用特殊字体。
如果必须要用特殊字体，建议用图片替代。如果用户的设备里没有你使用的这些字体的话，会默认显示设备的系统自带字体，最终效果就会和你的设计稿相差很多。
从视觉方面来讲，为了让整体界面更简洁具有美感，体验感更好，在使用字体方面，一般字体种类不超过2种，越少越好。因为页面的层次感主要是靠字号大小及颜色拉开层次，如果字号在变，字体种类也各种变化，整体就会感觉很凌乱，没有统一性。
颜色规范包含“品牌色”、“辅助色”、“中性色、图表色”四部分。
品牌色系：即产品主色调，主色调的设定直接影响产品气质和直观感受，也是产品的对外的形象。品牌色是根据这个产品的特征和定位、用户群，以及使用场景等综合考虑最后确定的。
品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。
1、品牌色一般建议选择冷色系。这样有效避免与“错误提醒”的红色、黄色相冲突，让人误解。但要是被硬性要求必须选暖色系作为主色调，就得格外注意调节好主色调与错误提醒的区别了。
2、注意选的品牌色（主色调）不要太刺眼。要保证用户长时间使用也不至于颜色太亮太刺眼，而产生的视觉疲劳。
辅助色系：辅助色一般用于“提示”。类似：成功、失败、警告、无效等内容等。
中性色系：中性色涵盖黑、白、灰三个不同层级，通常在文本、背景、边框、分割线用到它们。同一色相，只要改变它的透明度就能表现出不同的层级。
B端产品的文字中，一般会有：一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。
为了区分层级，提升用户的阅读体验感，通常会根据具体需求，把字体颜色的深浅，大致分成3到5个层级。常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，设计师在设计时可以直接作为参考。
图表色：我们常见的后台管理类产品， 像数据可视化、统计图、多个标签的不同配色方案，所以一般还会设定图表的颜色。
按钮是任何用户界面不可或缺的交互元素，B端产品中用到按钮的场景特别多，类似：登录注册，保存，表单，弹窗，导航，提交，确认等等。
常见的按钮形式包含这六大类：图标文字组合的按钮 ，主按钮，次按钮（线性按钮），按钮菜单，文字按钮，图标按钮。
常见的按钮交互状态包含六种：
正常状态、聚焦状态（使用Tab键或方向键来对网页进行访问输入的聚焦状态，在设计时很多设计师都会把这一状态忘记，导致用户无法用方向键控制光标位置，会降低用户的使用体验感）
悬停状态（鼠标正在按钮上，但不点击，需要注意的是平板电脑和移动端设备上不会展示悬停状态，因为手指跟光标不一样，无法在屏幕上进行悬停 ）
激活状态（点击按下状态）
加载状态（等待期间不可操作，在B端产品中Loading状态特别重要，能缓解用户的焦虑情绪）
禁用状态（不可操作状态，置灰显示和透明度（40%）代表不可操作状态）
按钮圆角：在开始设计产品之前，设计师都需要对按钮圆角有具体的规划。按钮四角都是直角会比较有距离感和强烈的引导性，容易分散用户注意力，所以我们一般会采用视觉上给人比较柔和亲近感觉的圆角按钮。
但按钮的圆角并不是越大越好，因为在相同尺寸下，按钮圆角小的，操作热区会更大，页面的使用效率也会更高，更容易操作。同时还要特别考虑到下拉菜单的设计，所以圆角大小一般采用偶数：2px,4px,6px,8px,16px为宜，不宜过大（这里的圆角弧度的值有一定的倍数关系或基数关系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：圆角大小也会跟着按钮尺寸的大小有相应的变化。
在B端产品中，当确定好网格基数时（通常网格设定为：4px。按钮的高度会分两种情况：
1、一种是宽度为高度的倍数关系。
2、第二种是如果宽度为高度的倍数关系，从视觉上看达不到想要的效果的话，设计师就可以灵活设置。
讨论到按钮的尺寸，我们需要大致知道如何设置网格基数。
在设计中，我们需要在常用的绘图软件（如：Ps、Sketch）里找到我们的网格功能，设定好一个数为基数，然后按照这个基数来进行按钮的绘制，按钮就相对比较规范了。
那如何用绘图工具设置网格基数呢？方法如下：在Sketch绘图工具中找到：【视图】-【画布】-【网格设置】- 弹出网格设置对话框进行设置就好了
把网格基数设置为【4】的原因：它是谷歌Material Design绘制小组件的规范，模块之间定义的基数就是【8】。
假设我们定这个基数为4，那采用的尺寸数值就需要是基数4的倍数。比如B端产品中，常用的按钮高度尺寸有：24px、32px、36px 、40px、48px，这些都是可以整除基数4的值。例如：32/4=8，40/4=10，这里的4为基数。
按钮的宽度尺寸，一般是确定好文字到边框左右两边的距离（例如如图Padding值为12px)后，开发会根据文字内容的多少自适应的。
按钮间距，按钮之间的间距也遵循基数为4的倍数，比如：16，24，32，40，48等。这里的基数定为偶数（一般为4或8）
从广义的定义来讲，表单是指用于数据录入的一切形式。从狭义上来讲，表单在大家更广泛的认知印象中，表单则是一类包含输入框、下拉选择框等常见控件的组合形式的页面才属于表单。表单的本质核心是提交数据，所以凡是具备采集数据并完成采集后提交数据的交互形式均可称之为表单。
表单在设计上的结构有：1、标题；2、表单标签；3、占位符；4、表单域；5、提示信息；6、操作按钮；
表单的设计必须优先考虑为用户减负，提高效率并简化填写流程。另外表单中组件的选择需要依据具体的数据类型和具体的业务场景进行合理正确的选用，为用户提供高效的数据录入表单，降低用户操作成本、认知负担，并提高数据采集效率才是表单设计的根本目的。
可交互输入域，是构成表单的核心内容，是表单用来采集数据的入口。输入区是用户交互最多也是最能影响使用体验的区域，不同类型数据选择与之相应的录入方式，对提高表单操作效率和用户体验大有裨益。
表单并不是把一些不同类型的输入框排排版、标清楚必填非必填、哪些表单比较复杂适当的加个说明就完了
其实，表单设计远远不止这些，表单本身也是一个小产品，它也需要有需求的支撑、也需要嵌套使用情境、也需要考虑用户的心理模型；从表单的产生到表单在页面上如何呈现，再到使用表单时与表单之间的交互，每一步都需要投入大量的思考来做好表单。
后面我会专门有一篇16000+的文章聊聊这个B端产品中比较核心的表单，有兴趣的朋友可以关注一下，大概五月份就会发。
表格在整个B端产品比较常见的，它的地位也是相当重要的，我们在设计表格时需要注意一下几点：
一般以左对齐为准。与左边表格边距尽量保持在10px以上的间距。（特别注意：金额和操作的标题和内容需要右对齐）
默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展展示出来。
宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。
字符不要多，最多可输入8个。如果文字太多，就需要做文字信息精简化。
表格内容超过一屏，就需要显示竖向滚动条，注意：表头需要固定，但表格内容可滚动展示。
表格的某些单元格无数据内容时，需要用“—”表示，需要区别于“0”。
标题栏高度（标准高度为56px）；内容栏（标准高度为56px，偏大的标题栏高度为80px），内容区和标题栏水平居中对齐。
列的对齐方式（垂直方向）除了需要始终保持“右对齐”的：金额，最右侧操作列内容外，其他的内容可自行左对齐或右对齐。行的对齐方式（水平方向）
当表格栏的高度尺寸小于80px 时，一般只有一排内容，内容水平需要居中对齐。当表格栏的高度尺寸大于80px时，如果是有两排内容，所有的内容需要顶对齐；但是如果既有一排内容 又有多拍内容的话 ，内容水平则需要居中对齐。
表格中的内容，会根据字段的长短定义所占的百分比，完成表格占比，从而达到希望实现的最佳效果。
滚动条分为横竖两种，当表格内容超过一屏时，就需要显示滚动条。竖向滚动条时， 需要固定表头标题栏和页码。只需滚动表格内容部分即可。横向滚动条时， 需要固定第一列 和 正在操作的项列。只滚动表格内容部分即可。
仅提示用户相关内容，不需要用户做任何交互动作。类似：toast弱提示通知提示等弹窗（（一般3-5秒会自动消失：包含普通信息，成功信息，失败信息，警告信息）。
另外还有，鼠标经过的时候即可出现而不用点击的弹窗（这个弹窗通常会设计一个浮动带有阴影效果的框，不需要遮罩）。比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。
第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。
例如弹出的列表，详情，表单等的确认信息弹窗、错误提示弹窗。这些强弹窗一般会对下面一层的页面做一些遮罩处理，例如添加上一层有透明度（例如30%，50%都可以）的黑色/白色，给下一层页面的内容做模糊滤镜等等；
在写弹框规范时，应了解各自项目中需使用弹框的有哪些内容，给出相关大小弹框的比例，哪些为固定尺寸，哪些为适配比例。以及对于通知提示给出停留多少时间后自动消失，弹窗弹出状态等等相关的交互规范。
缺省页是互联网中常见的场景，当遇到网络不好、页面中没有内容数据、暂无资料等等情况，所导致的空白页面。
大致分可为：系统类缺省页，信息类缺省页，空白类缺省页。
遇到这些情况时，设计师一般采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作，以缓解用户的焦虑情绪。（也就是我们常说的情感化设计的一种方式）
设计规范很大一部分是组件库，所以就把组件库单独拎出来聊聊。
做一个比喻，组件库相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个页面，而设计规范就相当于搭建的“说明书”。
通常我们将组件库分为基础组件和业务组件两大类，前者是系统通用组件（图标/按钮/输入框等），后者是由业务决定的相对更复杂的组件模块。
而对于B端产品和C端产品，二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验，因此需要考虑视觉、性能、实现、兼容性，另一方面，C端会根据活动、节日切换不同的主题，也要考虑组件视觉上的个性化扩展。对于B端而言，组件库更看重可复用性和稳定性，保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示，因此相对更高的要求是大而全，覆盖面广。
在业务已经发展到一定体量情况下，需要将项目中具备复用性及拓展性的模块进行拆解，对于B端产品来说筛选的时候会依据之前迭代的版本内容，把页面一一罗列出来，将可替换与相似的模块提取，并利用思维导图的方式统一归纳，并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换，避免了线上组件不一致导致体验问题。
以我们现在的产品为例：依据产品类型将组件拆分为：基础组件 、业务组件、数据可视化组件、常用模块。
将产品拆分后，此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面：
从原子开始重新依据定好的视觉规范进行更改，再由原子组成新的分子。
在与开发沟通设计规范制定的过程中，常提到他们写CSS样式的时候是采用盒子（box）去写的。通过一个个盒子填充来将我们的组件元素放入其中，最终形成前端展示的页面。
走查时使用浏览器我们也可以看到开发写的盒子，了解盒子也可以方便我们走查时知道问题在哪。
搭建组件库的步骤
对于新产品来说，业务体量较小，较难抽取共性，组件也不全面，因此较好的方式是参考大厂的组件库确定要做哪些组件，它们的相对成熟，参考价值较高。
对于已经成熟的产品来说，我们可以直接全面体验查看页面，找出所有用到的组件，除基础组件外，提炼出复用率高的业务组件进行结构化和组件制定。
以提示弹窗为例，演示单个组件的建立方法。
1. 定义组件：根据业务定义提示弹窗使用场景，用于重要信息的提醒，且需要用户自己关闭操作。
2. 拆分组件：这一步是将组件拆分为元件。对提示组件进行拆分后得到如下：
3. 重组输出根据业务场景，我们把各个元件重组为组件，建成组件集，并定义各种组件的使用规则。
在组件库建立完成后，只有在日常设计中真正使用组件库，提高组件库在设计稿中的覆盖率，才能真正达到组件库的效果。这就要求我们要输出一份完整的组件库描述文档，在团队中进行推广，加强设计团队的公用意识。设计团队内部可以直接维护一套组件库，设计师设计时直接调用公共组件库组件使用。
另外，我们还要与开发工程师配合逐步完成现有页面的组件替换。
组件库的内容并非一成不变，而是在不断地更新，以保证所包含的组件都是最新和有用的。与其他数据一样，组件也会有增删改。我们需要定期对组件库进行维护。
增加：当有新的组件产生时，我们需要通过判断它的拓展性和复用率，以确定是否将它入库。
删除：随着产品的不断升级迭代，如果某个组件已经不用或复用率很低时，我们可以考虑是否要将它删除。
改：不可避免的，组件会随着业务而进行升级，我们可以通过数据埋点和A/B test的方式来确定某个组件是否要进行改动。
组件扩展性弱：
有时候设计师做出来的组件虽然看着很好，但是实际上使用时，适配效率很低，用组件去扩展和重新做的效率差不多。
大部分时候设计师手中都有任务，于是这个任务就落在了相对不是那么忙的设计师手里（一般是新设计师），但是新设计了解业务相对来说是不够的，做出来的东西就像是是空中楼阁，抛开业务谈设计规范的都是很难落地的。
设计师不了解开发的实现方式，可能会做出来以后，开发较难实现，然后开发也就不会做。
首先，设计规范的作用是巨大而延迟的，不能即时产出很大的价值，另外一方面，设计规范的落地会增加开发工程师很多的工作量，且无法量化成果。这也导致很多时候设计师无法争取到足够的开发资源来做这件事，所以，很难导致达到预期的效果。
设计师需要更加全面的了解产品及业务流程。
前期需要做好用户画像，弄明白产品的目标用户的差异，不同用户的使用场景。只有弄清楚各个角色的关系以及功能设计的逻辑，具体用户年龄，解决什么问题，才可以产出更符合用户需求的设计。
如果是新的产品，那就需要去详细的看类似的竞品的功能及业务流，并且了解公司产品的定位及方向，所以就大致清楚设计的大方向。
系统整理产品情况，最好是做思维导图形式，可以更好的梳理同类型的产品功能及组件，也就能更好的提高组件的复用性。
在制定规范前，需要明确产品中主要有哪几种分类，将最基础的分类定义好方便后续针对分类内容进行整理。
团队沟通其实是一门艺术，那需要如何做呢？
首先，写一份设计规范的价值的提案给领导，争取到足够的资源，包含设计资源、开发资源。如果领导的主导参与，那这个事情就好推动多了。
然后，把设计规范的设计工作交给熟悉业务的设计师来做，通过业务提炼复用率高的典型元素，优先开发，最大化投入产出比。
搭建设计规范和我们日常处理工作需求类似，并非输出一份文档就结束了。我们还需要将做好的设计规范推广给各个职能部门的同事包括设计小伙伴，PM和开发小伙伴的团队内外，并且需要得到团队内的一致认可才算是初步完成。
召开专门的设计规范会议，以清晰明确且有效的方式把详细的内容传达给各个相关人员，在一致认可规范的情况下，以达到内容的传达到位。同时，这个时候，就可以依据开发人员的反馈，做落地的修改规范文档。
1、如何推广给PM
利益点：提升协作效率，减少工作成本
在启动设计规范的整理之前，内部宣讲让PM对于设计规范的搭建已经有了一个基础的概念。然后争取到更多的开发资源。否则PM不会分配资源给予时间去搭建整体的设计规范。
可以从提升PM与设计的效率和降低原型搭建成本作为切入点，通过组件库以及通用模版的搭建，PM只需要极低的成本学习一下组件库怎么使用，即可搭建高保真的原型界面。甚至完善好组件库后直接不需要设计的参与，开发通过原型组件库搭建页面。
利益点：提升设计效率，减少人力损耗，保持体验一致性
设计规范一般由团队内小伙伴共同制定，基本上已经对规范的优势达成共识。因此主要讲讲如何更好在团队内部使用规范。
团队设定主要负责维护的设计人员，其他人员在设计时候，通过Sketch Library 共享组件库可以直接调用组件，并建立更新日志规范项目流程提升效率，定期维护的时候其他人员统一告知负责维护的设计人员，统一定期修改更新升级维护。
利益点：封装组件，更少的更改，提高验效率，缩短研发流程
需要研发团队认可设计规范，前期前端的参与是必不可少的。
在制作规范时设计师了解了前端开发的一些简单原理，前端开发也能及时了解设计师的想法，大家不再是各司其职而是串联起来共同协作，当规范确认下来前端就不会频繁改动组件，而且在有限的项目时间中。设计规范的统一极大缩短了设计和前端开发所需的时间，为后面的项目争取了空间。
一套完整的规范包含内容是非常多的，难以在1个版本迭代里面修改完。
因此可以采用敏捷开发的思想，小步迭代快速推进，将设计规范的覆盖放在每次迭代过程中。设计师需要将自己作为设计规范这个项目的产品经理，针对现有的需求进行拆分，并排出优先级分版本迭代进产品里面。
可以依据从大到小的原则进行优先级排序。对产品设计风格影响大的先排，影响小的后排。
设计规范的制定不单单是对于设计师，在嵌入版本里面要随时与产品和开发多沟通，以便达到更好的落地效果。
接近1.5万的文字梳理，感谢你看到了最后。接近尾声了，制定及梳理设计规范对于设计师来说个人成长有哪些方面呢？我个人觉得可以从这几个方面来说；
通过整理规范，需要收集目标用户，使用场景、前期调研、产品功能梳理等众多资料，这期间我们需要去发现信息以及整理信息。庞大的信息收集，那对于个人的收集整理信息的能力是一个很好的提升，同时对产品会有更全面的认识。
归纳总结能力
将收集好的信息进行分类整理，这要求需要一定对逻辑性。在设计基础框架时合理对分类可以协助我们处理好每个控件对层级，这项能力无论实在工作还是日常中都有着巨大对好处，可以帮助我们从一堆繁杂的事物中“提纲挈领”，换言之就是“化整为零”，做减法，提取出最关键对因素。
将信息归纳整理好后，需要对全局进行思考，全局的设计及交互都需要考虑到位，比如什么情况下适合跳转页面，什么情况下适合给与用户弹窗。大体符合什么交互原则。
除了对大体交互需要考虑到位，细节上也不可以忽视，比如异常情况，极端情况该如何去处理，组件之间该怎么去配合等。在日常工作中我们也可以逐渐有意识去培养此类技能，对项目全局思考的越多，那么对整体项目对把控能力也就越强，与他人合作也会越显得专业。
在整个推广设计规范的过程，就是提升沟通表达能力的过程。
另外，整理设计规范时，难免会遇到模凌两可举棋不定的时候。此时可以寻求向上或者向下的资源寻求帮助，具备良好的表达能力能迅速帮助我们将问题阐述清楚，表达能力是设计师需要具备的重要技能之一。
我们每次在求助他人或向他人汇报，都需要在全面复盘问题过后做到心里有数，将问题自己复述一次是否有漏洞或者没考虑清楚的地方。长此以往你表达的事情会更清晰，别人也更容易听懂你说的事情快速理解内在逻辑，那么说服别人推动工作的难度也会越小。同事对自己的逻辑思维，表达能力都是很好的锻炼。
这里总结了几个工作中与上下游沟通的小技巧希望能帮助到小伙伴们：在开始与他人沟通之前我们需要搞清楚我们沟通的原因与对象
原因里面包含：
对象里面包含：
当然在沟通时还需要考虑方式和语气，这些都需要好后斟酌。如果遇到情绪不太好的开发，这个时候反倒我们更不能将情绪激化，一般这些情绪化对态度过一会都会消散，可以采取冷处理等情绪过后换一种方式沟通看看。
蓝蓝设计的小编 http://www.lanlanwork.com