设计开始要了解设计的目标，用户的行为都是有「目标动机」的，B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。
当设计过程以「目标」为出发点，可以增强设计判断力，输出更有效设计解决方案。
B端产品的设计原则：提高使用者的工作效率，同时降低业务链路的操作及学习成本。
当你有了目标以后你的设计就可以围绕这个目标展开：
对于B端的产品而言，用户最关心它能为实际的工作带来哪些便利，而并非这个界面做的多么的好看，以及用户体验多么棒。所以B端产品设计价值优先级往往是 功能性＞表现力
B端产品设计需要站在整个业务线全局角度去把控各个设计点，不再是「用户体验」至上，为实现「任务目标」，「牺牲」一部分「用户体验」是必要的，这个时候视觉和一些体验就不那么重要了。通过调研业务去了解各个角色职能的工作流程、相关痛点，让产品能用，好用。
理想的B端设计需要了解业务目标以及业务链路中每一个环节的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。
这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作，从而提高效率。产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，通过了解业务流程也能给予创造性解决方案
B端产品往往是是服务于企业用户，用户画像需要专注于用户特征中的「群体职业身份」这类人无论性别、年龄、地区有何差异，他们都是一类角色，我们的产品要提供给这类角色使用，而不是某个人使用。
由于B端设计师不是产品的用户，无法沉浸在与用户相同的真实场景中，建立共情。所以设计师最好亲自感受一下业务流程，获得一手的用户洞察，
「通过业务人员交流」业务人员可以帮助我们快速高效的描绘出典型客户案例的用户画像。
「实地走访」：观察在自然状态下用户如何完成工作任务，并提问题：「你怎么做？」或者「为什么这么做？」
「建立种子用户群」：聚集活跃的种子用户群，收集意见和建议，并在群里验证设计想法。
「亲身体验」：成为真正的客服小二，接听客户电话，记录自己在工作台场景下的真实体验和感受。
获取用户画像后了解该群体背后工作感受，行为习惯，以及任务类型。
安全感和信任感建立：人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息，请确保使用字段下方的注释文本解释为什么需要这些信息。
实际工作中我们曾经自动获取过用户之前表单中填写的的支付类账户信息，在收集的用户反馈中，用户会感觉到隐私正在泄露并让用户信任感降低。所以即使用户输入体验会更好，但是考虑到信任感，敏感类信息请不要自动获取。
让用户感受到你正在帮助他操作：Jakob Nielsen于1994年提出的十大可用性原则中，其最后一条原则Help and documentation（帮助性指导原则）是搭建B端用户帮助体系的核心准则，在理想情况下，没有帮助文档就可以使用系统是最好的，但在某些情况下（尤其是B端系统），提供一些引导性的帮助其实是必要的。
B端系统中可以尝试搭建用户帮助系统：
对B端产品来讲，设计师在设计的时候是不需要耗费太多的思考的，只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲，其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。
例如修改资料的时候，使用弹窗、浮层等等交互操作会减少页面跳转的频率。
但是与此同时，减少页面跳转并不代表真正的高效，例如瑞幸的供应商系统，供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加，但是可以避免操作出错给用户带来更大的困扰。
设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉，举个例子，如何引导：
B 端产品是以业务为核心，是需要用户长时间操作并完成工作任务的，对于操作和展示内容无关的元素，越少越好。视觉为功能让步，追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。
输入顺序：先易后难；先必填后选填；先公开信息后隐私信息；有关联性的合成一组，特殊问题后置，用户输入时、不会觉得突兀、门槛太高 。
自动对焦（PC端）进行表单页面，自动对焦第一个输入字段可以引导用户开始进行输入。
标题：标题是对下文最短最精的概括。用户一般都会跳过表单内容，而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。
用户应该可以看一眼标题就知道他们应该怎么做，而不是非得把剩下的全部看完，
（附：这部分感兴趣的同学可以搜索“微文案设计”）
在表单编写方面，或者说各种写作中，删减词语都要比添加词语更加有益。 在仔细检查不必要的词语后，文章会更笃实，更连贯，更吸引人。
这个链接有什么用？关闭是点击右上角的按钮吗？如果并没有增效，那就是减效。每一个字，每一张图片，都不是100% 必需的，这些都会降低你表单的转换率。
删除一个字段，表单提交率就可以提高 26%。（本篇笔记原本有12000余字，为了避免浪费大家时间，我仅保留4000余字的高频要点内容）
PC端产品提示文字尽量不要放在框内
提示文字存在于框内常用在移动端，它的空间占比很小，对移动端的小屏来说，是非常友好的，但如果在交互上处理不好，会有很大的缺陷。
内部标签结构，只有提示性文字，用作提示用户应该输入什么内容，但用户在输入的时候，内部的标签/提示性文字就会消失，这时候，用户会失去它是否输入准确的唯一判别标准。
字段输入通过部分人工智能自动将操作步骤可以变得简洁高效 ，也包括诸如一些、自动定位、图片识别、自动获取，第三方导入等方式来使用户的效率得以提升的功能。
打字是在线表单中最耗时、最密集的部分，而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能，将减少工作量并提高转化率。
文本块会更容易让用户记住内容：例如银行账户、电话号码等等。它指的是将信息排列成「块」的过程，使内容更容易保留、处理和回忆。一份研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。
如果一个字段需要特定的格式输入，请告诉用户。例如密码要求、语法规则、编号间距等等。
可以用输入框长度提示用户输入的内容是否正确。
德莱厄斯研究所的可用性研究发现，如果一个字段太长或太短，用户开始怀疑他们是否正确理解了标签。
在用户输入的时候，右下角告诉用户已经输入了多少字，如果超过 限定字数后输入框红色，用来警示用户，此时用户依旧可以再输入字符，但当出现警示，用户继续输入一定数量字符后，系统需要强行限制无法输入新的内容，避免用户没有察觉到警示反馈导致的过多输入，从而浪费的时间。
（该部分感谢酷友@sh9513 提出的反馈）
如果用户填写错误，向用户显示错误发生的位置，并说明原因。
如果你的表单里的选项少于5个可以列出所有选项供用户快速选择，当大于5个时候可以尝试用下拉框解决。
将第一个选项作为用户最有可能的默认选项，且是最安全的选项，提前预判用户的操作提升选择效率。排列方式推荐数直排列，竖直排列相对于水平排列容易读取和定位，提高用户的浏览顺序。
当前需要用户填写相对隐私的信息时，请给予解释这么做的原因及目的。
完成表单的设计后可以给业务用户进行简单的测试，并记录他们填写的时间收集反馈，以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。
最后在情感化设计系统里记得感谢用户填写或者反馈问题，因为用户是花时间的。所以请表示感谢。
表格的设计围绕着「可读性」和「易操作」两个设计原则。设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。
列宽有三种常见处理方式：
1. 根据内容的极限长度给出足够的固定宽度；
2. 可以固定部分列的宽，其余列按百分比处理；
3. 列宽需要考虑最低宽度/最大宽度/文字极限状态，内容为空状态显示方案；
4.需要设置列之间的最小宽度，表格响应式布局情况下最小不小于此宽度。
M-Densign规范中对齐方式会遵循如下规则：
表格的排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列（这部分可以在业务侧调研时验证，提高用户体验和阅读效率）。
1. 文本信息/混合型文本左对齐，符合从左到右的阅读习惯；
2. 数字信息右对齐，方便数字之间的直观对比；
（该图片感谢好友@晴蓝 同学反馈的一个错字，图片已修正）
设计规范需要定义按钮的四种状态：正常状态(Normal)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)
B端产品的开发一般涉及多个开发团队协作，例如瑞幸的后台修改按钮颜色，都可能牵动10+工程师的协同。
所以B端产品在进行设计改版以及设计侧调整时候要思考调整对于业务侧是否有直接帮助，在设计和规范建立之前，切勿频繁改动。
除了完全独立设计开发的项目以外，还有大量的 B 端项目是采用第三方框架开发而成的，如 Ant、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力。
作者：Cesare_玄漓 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
信息无障碍，是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广，对于身体有局限的群体而言，更加迫切通过互联网获取信息，而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括：8500多万残障人士，2亿多60岁以上的老年人，数量庞大。率先考虑信息无障碍能为产品增加优势而带来更多用户。
如今智能手机掀起了一场无障碍辅助工具的革命，而站在这个关键点的互联网设计师，也要开始行动起来，先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。
对视障用户来说，是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛，它的原理是直接读出界面里的文字，如果icon按钮未加无障碍标签读屏会读为"无法发音"，那么视障者就无法获取这些信息，自然也就无法使用你设计的功能。
解决的办法是:
1.需要在产品代码中添加无障碍标签(Android :contentDescription ; iOS:accessibilityLabel在对应的开发者文档里很容易找到，可以发给你合作的研发同学)。
2.装饰性icon可隐藏标签不读，提升读屏效率。不建议不做处理也不加标签，那么用户听到的就是“无标签”，这样会让用户以为这里有什么重要信息读不到而感到不安。
3.标签语义简短准确，尽可能使用动词。
4.必要时需要走查焦点顺序，确保不会被错误的焦点顺序误导页面含义。
并且最好由设计师进行语义的标注，因为设计师才是对页面里图形应用最了解的人。避免出现“搜索”被写成“放大镜”、或者是“searchBtn_123”之类的情况。
颜色可以用来区分信息数据的类别和维度，也可以帮助传达情绪等重要信息。然而，世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰。我们通常笼统的称这类人群为“色盲”，他们是典型的识别颜色有问题的群体。
"色彩"的目标是"易于感知"，指的是互联网产品的内容信息的色彩对任何人来说，都应该拥有足够高的辨识度和舒适度，我从以下4个方向进行介绍。
1.更安全的配色
a.色盲人群：
设计师在进行设计配色时应时刻自测，避免明度相似的橙黄绿两两配色和明度相似的红绿配色，因为这样的配色势必会造成色盲用户的可读性问题。并且，红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深，而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色的强调字，从而遗漏关键信息（设计时，可利用此插件模拟色盲眼中的颜色：Color Oracle） 。
b.文化差异：
因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的。在西方文化里，红色通常用于表示消极趋势，而绿色则表示积极趋势，但在东方文化中却正相反。
c.特殊群体：
临床医学研究表明对于部分自闭症患者来说，高饱和高对比度的颜色，甚至只是黄色都会让他们感到不舒服和不安，因此在自闭症康复中心是不会出现过于对比刺激的颜色的。
另外，老年群体随着年龄的增长，晶状体变黄变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力下降明显，如果你的主流用户是老年人，请尽量避免将蓝色运用到重要的按键中去。
2.更强的文本对比度
文本对比度与可读性息息相关，它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是：4.5:1，若字号够大（>18pt，或粗体>14pt）时，标准可降到3:1。如果满足4.5:1这个标准会让你的页面视觉看起来不那么优雅，可以尝试局部加强可视性的方法：
关于可读性其他需要注意的点：尽量不要在图片上叠加文字，除非你能保证图片背景颜色单一且对比度足够高。
Material Design设计规范建议，需要淡淡的遮罩确保上层文字的可读性；并且不建议极高对比度的文本，因为这样会使一部分视障者看到的字旋转模糊。
3.更多样的视觉变量
颜色是数据可视化中最常用的视觉变量之一。但是对于无法辨别颜色的用户，如果颜色作为的唯一的提示信息，他们可能将无法理解你传达的信息。那么有什么改善的方法呢?
a. 不让颜色成为唯一的视觉变量：除颜色外，我们可以追加图标、纹理或者文字来加以标注。
b.色盲模式：Trello作为一款工具产品，在标注信息时，提供色盲模式可打开和关闭，并用不同纹理加以区别，色盲友好模式是一个很好的范例，它可以有效帮助色盲，又不会妨碍非色盲用户。
c.以明度饱和度为度量：虽然色盲人士对色相的辨识能力较弱，但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子：传统热力图习惯用暖色代表热力高冷色代表热力低，Google Analaytics的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段，简单有效。
控件可以是按钮、链接、输入框或任何带有事件监听器的HTML元素。控件太小或彼此太靠近可能会给用户带来糟糕的体验问题。
比如对于无法用指尖精确定位的用户（有颤抖疾病的用户），或因年龄而导致灵活性降低的老年用户，都会难以点击过小控件。
为了给用户足够的间距来准确选择控件，Material Design建议至少48×48dp，iOS设计系统将目标热区尺寸最小值定为44 x 44pt，而WCAG对WEB的规范则建议至少44×44px。一个控件可以在视觉上是24 x 24px，但是在所有边上都会有一个额外的填充使它达到44×44px。并且太靠近的控件可能会因误点击而带来挫败感，所以同时还建议控件之间的空间足够远以减少误触。Microsoft给pc的建议是至少有8px的间距，而Material Design推荐的控件至少间隔8dp。我们可根据以上规范来审视自己设计的控件。
1.文字大小：
有视觉障碍的用户可能会把字号调得很大。你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱。做设计的时候，可以使用2倍以上的字体测试你的设计。
在互联网早期，设计了字号在9-14px之间的网页，如今已与20年前不同，浏览器已经可以在任何尺寸设备上使用，小到智能手表大到4K荧幕，我们不能再使用固定的字号来设计产品了。字号应该与设计本身一样具有响应性。例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。
2.文字样式:
文字作为传达信息的重要载体，对于许多用户来说，装饰字体或草书字体都是比较难阅读的。且用过细的、过小的、斜体和全大写文本，也会降低识别度。
有效的动画可以给页面带来生命感，但如果滥用动效不仅会分散用户注意力，严重的话对某些用户来说来说可能是致命的（光敏性癫痫的临床诱因之一就是闪光图像的刺激）。
1997年的一天，日本电视台正在播放《精灵宝可梦》第38集“电脑战士3D龙”，但就在这天晚上发生了600多名儿童昏倒在家中集体送医事件，轰动了动画界，任天堂的股价也随之大跌。原来，为了达到震撼效果，3D龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸，这样高频率的闪烁刺激了孩子们脆弱的眼睛，导致他们集体患上了急性光敏症。也因为这件事日本开始着手对动画片的制作制定规范。Twitter在2019年为了保护对闪烁图像敏感的人员安全，也采取了禁用APNG动图格式的措施。
另外WCAG 2.3.3官方说明，一些用户会因滚动页面的动效（例如缓动和视差滚动）而触发大脑前庭疾病从而产生头晕的症状，所以iOS、Mac、Windows 10都具有关闭动效的功能。
为了避免给特殊人群造成困扰，设计师在开始做动效之前，应该看看以下四条是否满足：
1.动效每秒闪动不超过3次，发生的闪光区域不超过超过25％否则，光敏癫痫患者会有发病的风险。
2.避免过于夸张的视差和运动效果，因为大脑前庭失调者会引发眩晕。
3.避免有多个元素通过不断移动、闪烁而分散注意力，因为这可能会让注意力缺陷者产生困扰 。
4.如果有上述情况，需提供一些控件或选项来暂停、隐藏或者更改任何动画或效果的频率。
作为体验设计师，研究无障碍会让我们收获良多。当然，目前所做的改进并非一劳永逸，而是我们与更广范围的用户保持持续对话的开端。不断改进产品的无障碍体验，让产品更友善，让美妙的互联网的世界变得更平等，我们希望能不断向这一目标前进。
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
人类与其他物种最显著的不同点之一是人类拥有与他人沟通和交流的能力。在整个人类社会的发展史中，沟通和交流行为需要双方处在同一个物理空间中。但进入21世纪，虚拟空间的出现让我们社交方式正在发生翻天覆地的变化，它已经成为我们每天生活的一部分，对设计师而言，虚拟空间设计仍是一个全新的、亟待探索的领域，我们有很多事可以做。
你或许听说过元宇宙这一新兴概念，它是一个增强的、或者说是一个完全虚拟的空间，我们需要使用VR头戴设备和数字形象才能进入。在这个有社交距离的时代，元宇宙可以让我们感受到更加紧密的社交关系：不论我们相隔多远，我们都可以看到和感受到对方。包括META（前身为Facebook）在内的很多商业巨头正在入局元宇宙，在他们洞察到的的商业机会上投资数十亿美金，这些投资在未来将为大量的元宇宙设计创造机会。
考虑到这一点，这篇文章主要描述关于元宇宙设计的一切：包括元宇宙的概念、设计元宇宙的技术，以及设计元宇宙的工具。
元宇宙一词首次出现在Neal Stephenson于1992创作的科幻小说《雪崩》中，讲述了主人公在被称为“元宇宙”的虚拟空间和现实空间中来回穿梭旅行。斯皮尔伯格的电影《头号玩家》也描绘了一个在不久的将来会出现的类似元宇宙的概念，在电影中，主角生活在类似于虚拟现实中，与其他玩家一起在元宇宙世界中探索。
《头号玩家》
虽然最初元宇宙可能起源于科幻小说，但它无法被单一的定义，它更像是创建一个沉浸式虚拟空间的想法，人们可以在其中自然地互动。你可以想象一个充满数字形象的 3D 世界，它能提供全方位的数字体验。
事实上，元宇宙并不是一个新兴的概念，早在2000年，一款名为“第二人生”的平台就已经拥有了许多在我们今天看来与元宇宙有关的功能。作为一个用户，你可以在“第二世界”中完成与现实世界中相同的事情，但它与现在我们所说的元宇宙有一个关键区别——“第二人生”并不是一个必须要借助VR/AR设备体验的互动世界，最主要的原因是当时的 AR/VR 设备还无法创造沉浸式的交互体验。
从2022年开始，我们逐渐意识到，AR和VR才是组成元宇宙的关键元素，因为它们可以创造更加真实的虚拟体验（并且我们已经拥有可以使其实现的技术）。只要用户戴上头戴装置，他们就能立刻进入一个完全不同的世界。尽管用户周围的所有物体都是虚拟的，但它们对用户来说是真实自然的。
下面是一些日常交互行为如何在元宇宙中应用的示例：
工作
办公室这个场景其实可以自然的进化成元宇宙，因为现在流行的混合办公模式（一部分员工在实体办公室办公，一部分员工远程办公）非常适合在元宇宙中实现。无论人们住在哪里，他们都可以作为一个团队一起工作，因为元宇宙给了他们一种共享物理空间的感觉。Oculus 的 Horizon WorkRoom就是一个很好的例子。
培训课程
元宇宙可以成为学习的绝佳场所，它可以让学生与老师或教练在元宇宙中进行实时互动，就像在现实中上课一样真实自然，你甚至可以认为他们是同处于一个空间中的。
游戏
元宇宙很可能会首先在游戏行业中脱颖而出，自然而然地继承许多游戏设计的许多属性。比如元宇宙里的内容可能会由用户生成，并且元宇宙鼓励用户长期参与。
从设计师的视角来看，元宇宙是拥有许多可交互的服务的巨大平台，用户可以在其中完全自主的选择他们想要的服务。进入元宇宙需要用户创建数字形象，它不仅仅是用户名和图片，更像是用户真实形象的数字孪生，用来与虚拟世界中的任何对象进行交互。就像真人一样，数字形象有一个身份来帮助用户进行访问。
用Oculus Quest来创建属于你自己的形象
元宇宙有很大概率成为Web3.0的关键元素，这是基于区块链的新一代更加民主化的互联网版本。产品设计师将专注于创建 3D 空间，这些空间可以是现有物理场所（即家庭、办公室、俱乐部），也可以是一个全新的世界（空间站、卡通世界等），但无论是什么样的虚拟空间，它都应该让用户感到舒适。
虚拟办公空间. 图片取自Meta.
为元宇宙设计意味着设计一个完全沉浸的世界，设计师需要更全面更综合的能力。
下面列举了设计师在设计元宇宙时需要特别关注的几个领域：
可用性是优秀设计的基本属性，创造一个易用的元宇宙体验是非常巨大的挑战，因为许多关键的设计因素都会对用户产生消极影响，比如晕动病（motion sickness）：用户长期佩戴 VR设备所带来的头晕、恶心等症状，设计师在设计元宇宙的体验时就应该想到这一点，并想办法进行优化。
元宇宙设计目前仍旧处于早期阶段，这提供了从一开始就构建易用性体验的绝佳机会。设计师不应该只是在已有的经验基础上进行适配，而应该找到新的、更舒适的方法来帮助用户长时间停留在虚拟空间中。
技术造成的晕动病。图片来自Harmony.
互联网时代的用户习惯浏览网站和应用程序来获取内容，那么元宇宙中，用户会期待什么样的内容呢？答案很有趣：和现在他们每天正在获取的内容一样就可以了。在元宇宙世界中，用户会选择他们熟悉的内容进行互动，比如文章、视频、音乐、电影等等。但他们消费这些内容的方式可能不同，比如元宇宙中用户无需购买大屏幕电视即可观看电影，他们可以依靠他们的头戴设备。
从设计的视角来看，在元宇宙中内容以最适合的形式展示给用户这一点尤为重要，但目前还没有简单且正确方法可以实现这一目标，因此设计师必须尝试各种内容形式，才能找到适合在元宇宙展示内容的形式。
元宇宙是一个拥有数字商品的数字世界。数字商品有它的局限性，你不能把它们带到物理世界中去，但它们也拥有巨大的优势——你在元宇宙中购买的数字商品可以以不同的方式在不同的环境中使用。例如，你可以购买一顶棒球帽，在你最喜欢的游戏和办公室中佩戴它，使其成为你个人风格的重要组成部分。当然，这个功能目前只是一个构想，需要那些在元宇宙运营的公司愿意支持数字商品在不同场景下的切换时才有可能实现。
去中心化支付是元宇宙体验的重要一环。在虚拟空间中用加密货币支付数字商品比用真钱支付要方便得多。加密货币可以在用户加入的所有不同虚拟世界中发挥作用，在今天，一些虚拟世界也证明了这种商业模式的可持续性。Decentraland就是一个很好的例子，它是一个 3D 虚拟世界平台，提供自己专有的货币，名为 Mana。
从技术角度来看，AR 和 VR 设备的质量在未来一定会大幅提升，它们是用户进入元宇宙的硬件基础。在过去，AR技术被认为是迈向虚拟世界的第一步，但随着技术不断进步，我们逐渐发现虚拟世界的真正力量将通过 VR 展现。可以预见的是 VR 技术在未来会更加吸引用户，因为它可以创造一种逼真的感觉，一种让用户沉浸在交互中的体验。
以下几个方面值得在设计时重点关注：
环境理解
理解物理环境中的用户。景深和透视是物理环境的两大特征，因此，VR 设备中的传感器将能够映射用户周围的世界，以便设计师可以在创造沉浸虚拟世界的同时保证用户的安全。
真实的面部表情设计
众所周知，人类之间的互动很多都是不依赖语言的，面部表情可以帮助人们传达感受，因此，数字形象要像真实的人与人交互一样传达人类情感。
VR手势设计标准化（头部、手部和身体移动）
设计标准化将会制定一些通用交互模型，这样当设计师为元宇宙制作产品时，用户将更轻松地学习如何使用它。
声音交互
以声音为基础的交互很可能成为虚拟世界中的一个重要组成部分。对用户来说，在私密环境中用语音进行交互要比在公开场合更加舒适。
在元宇宙中，侵犯在线隐私的行为会让用户感到被冒犯，所以从元宇宙设计第一天开始，隐私、安全和数据保护就应该是重要的组成部分。
不仅如此，防止网络霸凌也应是元宇宙设计中不能忽视的一部分，用户应该有自由决定他们在何时想和谁在一起的权利（或一个人独处，或去公司上班），并将那些对他们产生负面影响的人从他们的社交圈中移除。产品设计师需要与数据安全专家以及行为心理学家密切合作，以创建更安全和人性化的服务。
谈到元宇宙，或许我们脑中会想到一些基于广告曝光的商业模式，因为在元宇宙中植入广告将会是一件收入颇丰的生意，然而事实上，将广告植入虚拟世界需要谨慎、谨慎再谨慎。
想象一下，在你未来生活的元宇宙中，一些公司为了能更有针对性的为你提供服务，会跟踪你并记录下你的一举一动。这是一件让人非常恐惧的事，虽然元宇宙的创建者可能并不会这么做，但我们必须意识到这样做的风险非常高，特别对于那些把广告曝光作为商业模式重点一环的商业巨头来说（比如Meta），需要非常严肃的去思考是否可以接受过度广告植入带来的风险。
这里列举了5个设计工具，对于想要设计元宇宙的设计师来说，这些工具都应该派上用场。
故事板是来自电影行业的创作工具。它是一个图形组织板，其中包含按顺序显示的动作场景的图片，这些能让工作人员更容易理解场景的性质和演员必须传达的情感。就像拍摄电影一样，如果没有好的故事讲述，就不可能创造出身临其境的虚拟世界体验。
故事版案例。图片来自NN Group.
元宇宙是一个天然的3D世界，这个世界越真实，用户越能够进入沉浸式的体验。对于想要创造元宇宙体验的设计师来说，最好能成为3D建模大师，熟练使用如Blender、Cinema 4D、Houdini等建模工具。
使用 Blender 创建房屋模型。图片来自Blender.
设计师如果只通过搭建一些高质量的3D物体（例如房子、汽车和其他人类环境属性）就想创造出一个元宇宙，那几乎是不可能的。让元宇宙看起来和现实世界一样真实的关键因素是如何能让设计的物体之间的相互协作达到和谐统一。为了设计出一个拥有健康社会的的虚拟世界，设计师应该了解现实世界是如何运作的，这就是产品创造者必须学习人类学、建筑学和城市设计的原因。
诸如用户访谈、问卷、非参与性观察研究（在不知道被观察者的情况下进行观察）等方法对于创建好的用户体验来说非常重要。
创造真实的交互对设计师来说是首要目标。在设计互动体验时，很重要的一点是不要白费力去做重复的事情，使用一些在过往设计中验证过的经验和方法会更有效。
现在，有一些工具可以帮助我们做到这一点，其中很重要的一个工具是“交互SDK模块”（Interaction SDK)，这是一个模块化组件库，元宇宙设计师可以在其产品中使用。在这个组件库中有很多元宇宙会用到的的基本框架和对象，比如基础手部控制模型、距离计算器、手势检测等等。
使用交互 SDK 创建的虚拟手部和控件。图片来自Macprotricks.
对于设计师来说，仅仅将一个产品设计出来是远远不够的，我们还需要对设计的产品不断的进行测试，看看它是否能为用户提供出色的使用体验。情景研究是一个非常好的方法和技术，这项技术可以帮助设计师直接了解虚拟世界中发生了什么，以及哪些设计领域需要改进。通过沉浸在你所创造的体验中，你会看到它的优点和缺点。
元宇宙代表了数字技术进化历程的下一个阶段，最终元宇宙设计将融合人们的真实生活和虚拟生活。人们不仅会在元宇宙中互动，还会在元宇宙中生活。目前，我们正处于这一旅程的早期阶段，它为产品设计师提供了一个塑造互联网未来的绝佳机会。
作者：Nick Babich 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
所谓的“产品设计导向”指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点，明确产品核心价值；在产品上线之后，通过数据分析和功能反馈，发掘更多的需求，去规划下一步的”功能增删改“，将产品的设计方向引导到更正确的位置，提升用户留存率，延伸挖掘出产品更多的可能。
另一方面，从现在的设计环境而言，对所有的设计师既是机遇，又是挑战。大量的UI专用工具（Sketch、Principle、Flinto、Origami等）的出现，大大提升了产品前期的UI设计师的工作效率，所以现在“全链路思维”已经从刚出现时的“概念化思维”变成了“主流化趋势”。所以现在很多的UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析（功能设计、用户画像等）内容。
但是很多设计师的分析环节明显就是为了证明“有”而去“做”，缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品，典型用户画像里主流用户是：“男、七十岁、目标是给自己的儿子购买婚房”。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的，只是从形式上走个过场罢了。
本篇主要讲述产品设计中的一些分析方法，范围从“个人练习式设计”到“团队合作式运作”，知识点大概有：空雨伞思维、文章大概六千字左右，建议阅读时间：15分钟。适读人群：初级产品经理、交互设计师、在工作中职能范围与产品规划有关的UI设计师、想要学习产品设计的新人（文中含有大量配图用来辅助观点，因此建议PC端阅读）。
产品运作流程概览
我遇到的比较普遍的问题是：很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽然相同。所以说要从浅到深的学习产品功能设计，就必须先理清当前工作的常规流程，例如常见的产品运作流程（如下图）
上面是一个相对规范的产品开发流程，实际上你在看到上述流程图后，对照自己公司的情况，会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本，现在仍然有大多数的公司并没有交互设计师的岗位，但是交互设计的职能不代表没有，而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分，才能更好地提升沟通效率。
个人思考方法（一）：空·雨·伞
上面讲到了设计师的“全链路思维”现在已经成为了一种主流的观点，将来的前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。所以现在很多的设计师开始尝试自己去DIY一个需求或者做ReDesign这样的设计，希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候，大部分人会发现自己突然变得没有思路，从产品方向点确定到产品视觉产出之间出现了断层。
其实做过设计练习的人都知道，由于一些现实场景的不同，一些人在做设计练习的过程中会受到很多条件的局限，尤其是在孤立无援的情况下，你面对自己的练习作品往往会无从下手。当然，不同的场景下有不同的分析方法。
在团队协作的时候，分析方法要全面、严谨、反复推敲。
在个人练习的时候，分析方法要高效、直接、简化不必要的流程，以培养自己的分析能力为主，在这种场景下，空·雨·伞就是一个非常好的思考提升方法（如下图）
简单概述“空雨伞”思考方式：观察（事实） → 思考（内在） → 产出（解决方案）
运用在设计上就是：发现痛点 → 思考原因 → 提出解决方案。“空·雨·伞”因为简单、成本低、易上手，可以作为设计入门培养思考能力的一种方法，但是在使用空·雨·伞的分析方法时需要结合一定的具体调研（或者轻量级的用户研究）相配合，不然又会变成一味的“拍脑门儿”式的主观臆测，对于分析能力提升没有丝毫帮助。
个人思考方法（二）：逻辑树
逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是“逻辑树”。逻辑树是将问题的所有子问题分层罗列，从最高层开始，并逐步向下扩展。
简单来形容一下逻辑树：把一个已知问题当成树干，然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点，就给这个问题（也就是树干）加一个“树枝”，并标明这个“树枝”代表什么问题。一个大的“树枝”上还可以有小的“树枝”，如此类推，找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路，不进行重复和无关的思考。
如果你要运用逻辑树方法去分析产品，主要的一点在于学会细化拆解目标。
举个例子：
在2017年我创建了自己的个人站酷号，但在发布了一部分的文章之后，我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析，去发现自己提升的空间。
如上图，就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分，拆分出三级逻辑树是比较容易的，甚至你可以沿着已经列出来的大纲继续深入细化，再拆分出更细更深层的各种提升点。
逻辑树分析法在个人作品中的主要作用是发散思维；在实际工作中的作用则是针对特定问题进行分析，理清思路。总而言之，是让你在分析的过程中更加有条理，避免重复思考。但是逻辑树分析也有一个缺陷，就是在逻辑树分析的过程中，根据现象分裂出子层级的步骤十分依赖你的认知能力，就如同做设计一样，当你感觉界面的视觉出现出题的时候，需要利用你学出来的知识去进行视觉优化，如果你对设计理论知识掌握程度并不是很强，那就不能采用逻辑树分析法解决问题。
总而言之，逻辑树分析法适用于对问题研究十分深入的情况下，如果你对当前的环境认知并不充足，那么就很容易走入歪路，跑偏主题。
实际项目：用户调研访谈
在一些实际项目中，用户调研是需求来源的主要渠道。提起用户调研，很多人会觉得这不属于UI设计师应该做的事情。其实行业逐渐规范的现在，用户调研、分析需求的能力也成为了衡量UI设计师能力的一个标准。现在的互联网产品种类繁多，从早期只做主流行业，到现在基本所有的冷门行业都有涉及；作为设计者而言，大多数设计师已经开始在设计的过程中心有余而力不足。
造成这种现象的主要原因为是因为随着行业的细分以及范围的扩大，我们距离用户的真实场景偏离太远，导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。因此对于很多的设计师来说，学会了解用户以及分析需求成为了十分重要的事情。
然后整理了一下我在用户调研过程中的几点认知：
第一，保证调研的目标的准确性
我们需要明确，我们希望通过调研达到怎样的目的？（例如：提升部分页面转化率、收集用户对于产品不满意的地方、通过用户使用产品发现用户潜在的痛点）
第二，有目标的选择用户
一般来讲互联网公司都有收集客户反馈的部门，他们掌握着所有客户的反馈意见。我们在选择调研用户的时候，最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标
第三，适当的准备调研内容
当我们确定了调研目标和调研用户之后，就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好（开始调研之后根据实际情况进行改动）
一般市场调研细分的维度通常有四种，分别是：地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例：我们在调研中可能要把调研对象分为客户（老板）和用户（业务员）去进行不同情况的信息跟踪，而且根据产品的属性不同，需要提前预设好调研内容的侧重
第四，调研过程中
在调研过程中，我们可以适当结合上文讲述到的“空雨伞”方式去进行调研观察，收集用户需求（如下图）
在调研过程中，除了思考之外更多需要注意的是对用户洞察的记录与剖析，在记录用户行为的过程中，需要遵循“不干扰”、“不引导”、“记录客观”等原则，这样可以才可以保持用户行为记录的准确性。
第五，获取反馈整理结果
在调研结束后，我们应该产出一份完整的调查报告，按照本次调研预设目标进行整理，规划出合适的大纲，把调研收获转化为明确的产出，产出形式最好以报告（PPT、PDF），而不是口述或者微信消息，这两者之间差别很大~
需求归类：KANO模型
虽然说现在很多的公司都开始建立了用户体验类的部门，但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后，往往很少会出现我们幻想中的“逆袭”、“口碑急剧上升”，有时还会因为受到一部分用户观点的带偏导致产品口碑下降，用户表示不满；又或者会出现需求级规划混乱，重要功能反而后上线这种尴尬的情况。
所以这驱使着团队中负担“用研用体”职能的角色对用户需求进行正确的分类和排序
这个时候就可以运用到卡诺模型（KANO模型）。
KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系，狩野教授将产品服务的质量特性分为五类：
1.基本型需求
用户对企业提供的产品或服务因素的基本要求。是用户认为产品“必须有”的属性或功能。当其特性不充足(不满足顾客需求)时，用户很不满意；当其特性充足(满足用户需求)时，用户也可能不会因而表现出满意。对于基本型需求，即使超过了用户的期望，但用户充其量达到满意，不会对此表现出更多的好感。
例如对于网盘类产品来说，用户的基本需求是有快速的上传和下载。如果下载速度达不到用户的期望，则用户满意度将一落千丈。对于顾客而言，这些需求是必须满足的，理所当然的。对于这类需求，企业的做法应该是注重不要在这方面失分，需要企业不断地调查和了解顾客需求，并通过合适的方法在产品中体现这些要求。
2.期望型需求
提供该功能，用户满意度提高，如果不提供该功能，用户会感觉到不满。当然在这里要补充一句，这里的需求并不都是我们整理出的主观需求，也有可能是用户在使用的过程中产生的客观类需求，例如遇到不会的体验，需求得到响应时我们给的反馈
例如对于一些O2O类的产品，虽然做的都比较成熟，但是由于体量庞大的原因，偶尔也会受到糟糕体验，用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程（旅程预计时间偏差）、美团（酒店体验差）、饿了么（用餐体验差）等。在用户遇到这种糟糕体验之后，期望能通过投诉建议获得官方的反馈，那么官方把这种问题解决的越圆满，用户的满意度也会随之提高。
3.兴奋型需求
又称魅力型需求。指不会被用户过分期望的需求。对于兴奋型需求，随着满足用户期望程度的增加，用户满意度也会急剧上升，但一旦得到满足，即使表现并不完善，用户表现出的满意状况则也是非常高的。反之，即使在期望不满足时，用户也不会因而表现出明显的不满意。
4.无差异型需求
不论提供与否，对用户体验无影响。是质量中既不好也不坏的方面，它们不会导致顾客满意或不满意。
5.反向型需求
用户没有这个需求，提供后用户满意度反而会下降。
按照kano模型分析可以对收集到的产品需求进行分类，筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。
作者：千夜Ryan_Vision 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
咱一起来聊聊排版的问题：
如果你看过我过往的文章，也许会对我的排版多少有点印象，夸张的大字，极强的对比，还有一些微妙的层级关系；坦诚的讲，我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格；
整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在；这种一丝不苟，传达准确的风格，即所谓瑞士国际主义风格。简单的说，由于 Swiss Design 这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此，又被称为国际主义平面设计风格；
简单的说，瑞士的这种设计风格典型的代表就是我们看到的杂志，其中有 3 个特点：讲究网格 / 非常理智的克制颜色的使用 / 层级关系；有趣的是，审美和潮流是循环的，随着时代的发展，越来越多的app开始重新挖掘出来瑞士风格并加以使用，比如我们iOS系统自带的应用们，Spotify：
年少的时候，我经常看着这些个app会不禁的问，为什么在没有一张图片的情况下还能如此好看？这些年终于明白了前人良苦用心：文字是内容，同样也是构成；是信息，同样也是装饰；简单可以理解为，不管在平面还是网页亦或者是UI界面，在没有可用的装饰下，信息本身要承担起装饰和传达的双重功能，这就是瑞士风格的核心本质。
iOS是拟物的典型代表，网上对于这块的讲解已经过于饱和了，我也没必要赘述；那么这一趴，来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳，潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…
但当我打开下图这个页面的时候，我意识到我对拟物的理解还是浅薄了，第一次被光影的层次震撼到：
通过光影塑造了一个三维空间，让整个画面丰富饱满，也打破了我幼稚的设计观，PS.不管锤子科技现在如何，我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献，respect！
毫无保留的说，我的设计就是二者的融合，以 层次对比 作为核心理念。
啰嗦了半天，赶紧进入正题；如果你是一名产品体验设计师，一定听说过 “奥卡姆剃刀” ，这个定律通常用在交互链路的设计上（意思就是在用户路径中没必要的步骤，省了就完事了），“如无必要，勿增实体” 即简单有效原理；
通常来讲，如果想要不平，把二维空间转化成三维空间是必要的一步，需要在Z轴上下功夫；如果你恰巧也是一名摄影爱好者，可以想象下照相机的焦距和景深，工作原理是相同的，需要 前景 / 主体和背景 三个层次；当然，虚实的对比对信息的呈现和层次的拉开是极其重要的，这里需要通过景深来控制效果，你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到：
另外，空间的感觉想要被突显，那么“光影和空气”的价值就可以无限放大了，按照如上所说的结构，把内容和自然物质摆进去就好了，甚至可以做到举一反三（比如不同颜色的氛围，我就不展开了）：
整个case下来，你会发现用光来聚焦在信息上，自然而然就形成了我们说所得 “信息优先级”；有点时候空气和光影的饱满程度超乎你的想象，这种自然存在的物质可以很好的帮助画面分层，以达到填充的效果，并不是一定要依赖于实体化的装饰。
本来不打算再开一个章节说这个，但还是觉着很有必要再说下（我好纠结），作为PPT来讲，ta的主要用途分为两种：其一是给人看的，其二是给人讲的；不管是哪种，尽可能的简化文字，是对输入者关爱；
以上图为例（实名diss自己的作品），坦诚的讲左边的部分大多数观者是不会有心思来看的，按照视觉系统的处理，这部分就会被当成一个“面”而被忽略掉，这种情况下右边显得有力很多，也能帮助观者聚焦信息，所以还是那句话，能不写的就别写，能少些的别多写，保持信息的密度也是设计师必要的职责之一。
作者：负能量的补给站 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
界面设计是一个很庞大的体系，具有很多原则，比如轻量、容错、清晰等等，其中包含了交互层面以及视觉层面等，今天我想单独把视觉剥离出来，来讲一讲我对界面设计“视觉层面”的理解与认知。
在我看来，界面设计的视觉层面主要可以分为三个维度来解析：信息传递、视觉美化、创意创新。
信息传递是让用户看的明白，快速清晰的获取信息；
视觉美化是让用户看的舒服，让界面足够美观；
创新创意是让用户看的惊喜，看到一些不一样的创意点。
如下图:
三个维度的目标如何实现呢？我提取了以下三个关键词：
清晰、和谐、独特是我们要达成的目标，达成目标一定会有一些原理所在，而有了原理就会有具体的执行方法，所以后面的每一个知识点，我都会按照“设计目标-执行原理-执行方法”的逻辑给大家讲解，大纲如下：
1 清晰
1.1清晰-降噪-容器整合
1.2清晰-聚焦-局部放大
2 和谐
2.1 和谐-呼应-颜色呼应
2.2 和谐-节奏-变化对比
2.3 和谐-饱满-负形缩减
3 独特
3.1 独特-品牌延展-IP形象结合
3.2 独特-事物本意-事物图形化
1.清晰
1.1清晰-降噪-容器整合
设计目标：清晰
执行原理：信息降噪
执行方法：容器整合
当界面信息过于分散时，会对用户造成不必要的干扰，导致用户产生疑惑甚至直接离开界面。
作为设计师，要做的就是对信息进行整合，我们可以称之为信息减噪，目的就是让页面更加清晰，减少干扰。
这里我经常使用“容器整合法”来让内容更加清晰、聚焦。
当分散的内容装进一个“容器后”，就可以使内容聚焦在容器当中，让信息更加规整。而卡片就是一个很好的“容器”。
实际案例：
在改版腾讯动漫个人中心的时候，头部就存在信息分散不聚焦的问题，四个视觉触点（绿色圈处）分散在四个角落，形成极大干扰。
这里我就采用了”卡片容器“的方法，将信息装进容器中，减少分散信息的干扰，使界面更加清晰、工整，效果如下：
现在很多产品都在使用卡片化的布局，尤其是在信息数量、层级较多的时候，更加需要有容器将其规整起来，这样才会让界面保持不乱！
1.2 清晰-聚焦-局部放大
设计目标：清晰
执行原理：聚焦
执行方法：局部放大
我们在平时做需求的时候，经常会遇到信息特别多，特别乱的时候，如果此时我们选择什么都想突出，最后的结果一定适得其反，什么都突出部不了，这时候就需要我们选择一些内容来进行局部放大，反而可以让整体信息更加聚焦、清晰。
这种方法经常用在有数字展示的页面当中，比如下面这种页面：
再比如，下面这个模块信息，如果”3“没有放大，整体的信息会乱到你眼花缭乱，我们看下对比：
所以，大家在遇到有数字，且信息杂乱的时候，就可以采用局部放大的方式来使整体更加聚焦、清晰。
2.和谐
2.1 和谐-呼应-颜色呼应
设计目标：和谐
执行原理：呼应
执行方法：以颜色呼应为例
很多时候我们会觉得自己做的东西很不和谐，其中一个很重要的原因就是因为页面中没有贯穿的元素，也就是没有呼应，很常用的一个呼应的方法就是颜色呼应。
例如这个画面总看起来不够和谐，你会觉得绿色很突兀，就是因为颜色上没有呼应：
而一旦你想办法，让绿色“事出有因”，比如取自眼镜的颜色：
那么，突兀的问题解决了，和谐的目标也就实现了。
而刚才那个人中心的界面：
我们会发现，图标的颜色也是取自背景色，所以整体看起来才会如此和谐。
除了颜色呼应，还有很多呼应的方式，比如图形、图标风格等等，这里就不再举例了。
2.2 和谐-节奏感-对比变化
设计目标：和谐
执行原理：节奏感
执行方法：对比变化
对于音乐，节奏感是非常重要的，如果一段音乐一直是一个频率，那可能也算不上音乐了。
界面也是一样的，节奏感是让页面变得“和谐”很重要的因素之一，如何做到呢？
我们在展示文字列表的时候，你觉得下面两种哪个更舒服些呢？
我猜你会觉得第二个舒服一些，因为它有变化，有节奏感，所以它和谐、舒适。
我们会发现很多产品首页带有封面图的列表都有很多种排法，例如1带多，1x2，2x2，2x3等等：
就是为了防止每个模块过于重复，如果每个模块都是每排两张封面，一直下来：
看起来会非常乏味。
2.3 和谐-饱满-负形缩减
设计目标：和谐
执行原理：饱满
执行方法：负形缩减
在做图标或者字体的时候，经常要讲一个原则就是“饱满”，界面上每个“不能拆分的元素”都需要尽量做到饱满，比如图标，再比如下面这个信息组件：
正文就属于不能拆分的单一原子，大家可能会问，这种信息不就是方方正正的一个信息块吗，怎么会不饱满呢，比如行间距过大：
再比如，我在优化腾讯动漫信息流的时候，发现正文出现的表情远远大于文字，如下图：
表情一旦出现，就会造成大量空隙（负形过大），导致整体不够饱满、和谐。
我们可以看下其他产品，表情和文字几乎都是一样的大小，他们都会尽量缩小负形空间（也就是空隙小大）：
在这样的原则之下，优化后的效果如下：
以上是关于和谐的几点方法。
3.独特
如果你的界面做到了清晰、和谐，在视觉层面就已经算是及格了，如果还能加上一点小创意，就可以让人眼前一亮。
如何能够做到独特？可以从两方面出发，1是品牌，2是内容本身含义。
3.1独特-品牌延展-吉祥物结合
设计目标：独特
执行原理：品牌延展
执行方法：IP形象结合
从品牌出发，可以有很多方向，比如logo，图形，品牌吉祥物等，下面以品牌吉祥物为例：
在做小说阅读器的时候，有一个设置选项是选择文字的背景颜色，选择控件是圆形，而品牌形象也偏圆形，此时就可以将圆形控件与形象相互结合:
但是选择控件有两种状态，为了更加生动，就让给形象正面面对你的时候作为选择状态，而转过身作为非选择状态，大概效果如下:
此创意已在腾讯动漫小说落地实现。
3.2 独特-事物本意延展-事物图形化
设计目标：独特
执行原理：事物本意延展
执行方法：事物图形化
除了品牌，还可以根据事物本身的意思来延展图形，比如日间夜间模式的切换按钮，男女性别的切换按钮，都可以利用事物本身的含义来延展图形设计:
此创意已在腾讯动漫个人中心模块落地。
再比如，弹幕的展示方式，就可以联想到电视机，再把电视机图形化，如下图:
这里需要注意下，有时候如果图形过于普通，可以配合动效来增加独特性，但一定要注意开发成本。
作者：黑泽双炽 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在开始讲解 B 端的图标设计前，我们先来复习一遍图标设计的基础知识。相信不少同学看过我们之前更新的图标系列干货，没看过的可以先收藏起来，等等看完本篇分享后再去阅读……
理解图标，首先关注的是图标本身的类型，在整个 UI 体系中，图标基本就分成3个大类：
工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解
装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于节日活动中
启动图标：产品的启动图标，即用来在系统中打开该产品的图形按钮，基本以自身 LOGO 为主
在 B 端项目中，应用最广泛的必然是工具图标，而装饰、启动图标却鲜有露面机会。但出现的少，不代表没有，解释工具图标前，我们先优先讲解下装饰和启动图标在什么情况下会出现。
其中，SAAS 类服务就有很多会重点强调品牌、情感化设计的案例，例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。
启动图标则会应用在一些比较大型的项目里，当项目出现了很多下级功能模块或类似插件的体系时，就会采取使用应用图标的方式作为入口。
比如 Figma 也是一个 B 端工具，它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品，一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求，就自然而然会用到启动图标了。
最后，就是我们熟知的工具图标了，前两种图标，在前期画不好不要紧，毕竟这类规格的产品会有经验更丰富的设计或总监坐镇，新手当个切图仔即可……
但是工具图标，重要性就不言而喻了，B 端项目对工具图标的需求非常大，几乎每个组件中都会包含图标。
虽然今天网上有非常丰富的图标素材库，但在形式各异的 B 端项目里依旧是供不应求的，各种行业特有的功能、实物、隐喻，只能设计师自己完成。
B 端设计师在图标设计领域的主要工作，就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。
工具图标的应用主要包含两个部分，线性图标和面性图标。
这里再提图标风格，不是把以前的知识点重新讲一遍，而是要强调 B 端图标的特殊性。和 C 端相比，B 端图标的实用属性更高，并不需要过多凸显本身的视觉风格。
所以，工具图标中，使用大量渐变、插画、投影的类型都要排除掉，它们对 99.9% 的项目都只会造成体验的负影响，不要被网上的追波风飞机稿给带偏。
适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可，一定要划分出差异，应该只包含圆润、纤细、尖锐这几种。
很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢？答案是没有差异。
线性和面形的使用，纯粹看设计师在当前场景判断哪个合适用哪个，只要保证对应图标风格统一即可。
不过如果遇到一些比较特殊的情况，比如要表现各类设备的复杂图标，那用线性的做法还是相对合适和简单一点。
对 B 端设计来讲，独立设计图标的步骤是必不可少的，应该掌握的图标规范还是必须要懂的。
我们虽然没有 C 端那么多风格和技法的拖累，但想画好 B 端图标却多出了其它难点，那就是一个页面中出现的图标实在是太多了。
这就引发了我们要讲的第一个规范要点 —— “统一性”，所有同规格类型图标具有一致性的特征，这些特征包含了：
如果不能保证统一性的基本要求，那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标，它们的细节完全不一样，统一性当然无从谈起。
而让整套图标保持统一性，是相当有难度的，其中最难的一点，就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸，但不代表图标实际图形的长宽数值是完全一致的。
几何图形对视觉有一定的欺骗性，有不同的大小体验，比如下方案例（鱿鱼游戏乱入？）：
所以，基于这样的特性，每个图标本身都包含了两层属性，图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小，是透明白的，排版的时候以这个尺寸作为实际的边缘来测量。
而视觉尺寸，则是在占位尺寸下图标图形的实际大小，这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的，我们用占位尺寸包裹它们来方便我们进行统一的应用。
所以，使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然，不同的素材，这个留白也是有区别的，下一个小节就会解释。
最后要声明一点，一套项目中可以包含多个规格（2-5个）的工具图标，比如导航用的图标比普通工具图标更复杂一点，设计师只要保证每种规格保持的统一性即可。
图标越多，大小的控制越困难，所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。
在 Ant 的体系中，一个基于栅格的图标实际包含3层，背景层、格线层、图形层。
背景层，即图标展位尺寸，需要先确定出这个元素的大小，然后才是里面的绘制区域。通常，栅格系统会为边缘预留 1-4 像素的内边距（出血位），正所谓四周留一线，日后好相见。
格线层，则是使用的栅格线段，也是最重要的部分。格线层通常由 4 个基本图形构成，包含正方形、圆形、水平长方形、垂直长方形。
这四个图形的长宽大小不一，原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列，就可以发现它们的视觉大小非常接近。
这些格线的作用，就是提前帮我们确定好视觉比例，帮助我们快速绘制相同图形类型的图标。
但是，不是完美符合这四个图形要求的图标该怎么办，总不能格线把所有轮廓都给你实现出来吧？
格线的另一层作用，也就是最重要的作用，其实是一个用来做测量的工具，而不是轮廓依据。在几何视觉差中，最基础的大小原理是占用面积越大的图形，尺寸感受越大。所以，长宽一致的正方形大于圆形，圆大于三角形。
所以当我们绘制的非常规图形，和类似格线进行对比时，长宽缺少的一侧，就要由另一侧增加数值来填补它的面积。
比如下图 Ant 官方的电脑图标，它的宽是横向矩形，但是中间区域面积较小，所以增加了高度进行平衡。
再看一些其它的案例
这一步没有固定的参数使用技巧，设计师需要将完成的图标置入到其它图标旁边进行调试，确保尺寸是合适的。
格线只是一个图标大小设置的参考工具，一切以最终效果为标准。
理解完图标的基本规范，就到图标的使用逻辑了，解决一些常见的设置误区。
图标该做多大的，这是目前被问到最多的问题。本来应该是非常简单的一件事，但很多工作多年的设计师也搞不清楚。
仔细捋了捋，罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。
要重点强调，Ant 设计图标的意图，和一般项目的是完全不同的。Ant 作为一套庞大的开源项目，它的图标核心特征之一就是 —— 适应性。
这些图标要被应用到各种不同的设备、显示器、系统中，图标尺寸会用多大，在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成，后续实际应用中的缩放、匹配也就越容易，适应性越高。
但是，在我们自己的项目中，这种做法是完全没有必要的，1024 图标的负面影响包含：
在常规项目里，一套项目是可以包含不同尺寸和规格的图标的，而不是我们做一套相同风格的图标在整个应用中无差别使用。
这也意味着，每个图标在产品中的使用场景通常只有一个尺寸，不需要去面临缩放的情况。即使需要缩放，也只是这套图标中的少数几个需要，或者相对特殊的项目。
所以，图标尺寸设定，就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适，然后创建同样的数值即可（尽量以4的倍数为标准）。
我们知道图标的素材非常丰富，不管是 Iconfont、IconPark 还是 Iconsearch 等网站，都提供了海量的素材。但是只要稍微专业点的项目，往往素材库都满足不了，部分规格的图标还是需要我们自己重新绘制。
所以说图标素材就完全没用了吗？当然不是。
图标的正确用法是作为一种快速试错的参照物，它可以帮助我们实现：
在项目的界面设计阶段，我们一向建议优先使用外部的素材，尤其是 IconPark 这种比较统一，还可以快速调节图标样式的工具网站。
这个过程即使素材找不到和寓意一致的也没关系，用相近的图标替代就可以。等到页面布局基本完成以后，最后再集中精力对需要绘制的图标重画一遍（甚至是在开发阶段绘制）。
通过别人的图标来快速匹配尺寸、风格、样式，会帮助我们节省非常多的时间，也有助于我们设计出更专业、美观的图标。
另外，就是针对项目一些偏小尺寸的通用图标，就可以比较放心的应用素材，例如翻页的左右、更多、下拉、搜索等等。
图标的尺寸、样式都确定了，最后就是关于图标的色彩和不同状态的制定了。
前面讲过，B 端项目对图标的装饰属性没有那么迫切，所以正常情况下，太花哨的图标是要尽量避免的。彩色、渐变色、投影，都不应该在这个情况下胡乱使用。
常规的图标只要使用中性色即可，而需要特别对待的图标，色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。
当然，如果项目涉及到一些特殊的工具图标，类似工厂、工业领域表达实体设备的拟物图标，可以打破这个原则。但是，同样避免这套拟物图标的每个图标用色不同，尽量只使用 3 种以内的颜色完成拟物的填色。
同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现，部分图标会承担按钮的功能，包含默认、选中两个基本状态。
普通权重的图标，未选中状态可以在默认色彩基础上使用透明度来实现。
高权重的图标，则可以在选中的状态替换色彩，或者更改图标的类型，将原本的线性更改成面形并填充色彩制造反差。
完成所有图标的设计以后，最后一步就是切图和导出了，这决定你的图标能不能被正确运用到线上项目中。
在一套专业的 B 端项目中，已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里，而是在规范页面中有统一的整理和收纳。
这种做法的流程是，先在软件的规范库中创建对应的图标组件（ Symbol / Compoent ），然后再在具体页面中应用，方便后续的统一管理和修改。
而在这个过程中，我们也需要对图标有正确的命名方法，来确保团队调用、检索图标的效率。通常，我的图标命名规范如下：
尺寸 / 类型 / 图标名-状态
示例：
48px/导航图标/表盘页-默认
24px/一般图标/搜索-默认
“/” 号的引用主要是方便软件中对组件层级进行划分，而我调用图标的规则势必是先从尺寸开始，再选择对应规格，最后类型和状态。
提前命名也是方便后续我们切图和导出，但要提及一点，图标的命名不要追求英文化，因为我们的词汇量不可能实现正式的英文命名规则，只会写一堆大家都看不懂的单词。
而开发在使用我们的图标切图时，也不会用我们之前取的命名，会根据自己的命名习惯重新命一遍，写个让他能看懂的名字远比用乱七八糟的英文强。
接下来，就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片，然后上传蓝湖发给开发自生自灭了，这是一个非常不合理的操作。
再或者，强行使用 Fonticon 格式，而不管实际情况如何，造成最后实现效果完全不同步或实现不了。
切图是通过前端调用并在浏览器中进行显示的图形，而要被浏览器正常显示，就有必要了解适合使用的切图格式。
图片的格式包含位图和矢量两种，位图是通过记录像素色值的图形格式，假设一张图是 100*100 像素，那么记录 1W 个像素点的色彩，所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式，可以支持自由缩放。
理论上，矢量格式是最佳的图标切图格式，但是它的限制同样有很多，例如：
前面说过，普通项目中同一图标是很少出现一会儿大一会儿小的需求，所以矢量最大的特征无损缩放，往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题，而不是网页端的基本使用。
当一套项目中出现了矢量格式无法覆盖的图标时，那么即用矢量切图，又用位图，就会显得非常的混乱。只有类似 LOGO 等图形元素，才需要考虑 SVG 格式，而不是一看到图标就上。
所以，最适合切图的格式就是位图的 PNG 格式，一方面它是无损的，另一方面它支持透明背景，在切图应用上可以完美和设计稿结合，而这是其它大多数位图格式不具备的特征。
当每次项目完成以后，并不需要通过蓝湖来实现切图的导出，如果切图文件分散在各个项目页面里，那么一定会有很多图标被遗漏，尤其是图标的不同状态切图。
所以，最理想的切图形式，就是将所有图标完成整理和命名以后，一起框选，然后导出成 PNG 格式，再同步给程序员即可。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
表格已经是现代电子计算机系统中重要的组成部分之一，从小学开始，我们就已经在电脑课上学习如何使用 Office Excel 来制作电子表格。
那么我们为什么需要使用表格呢？因为我们有记录和查询数据的需求。
在任何商业活动中，都会产生大量的数据信息，虽然我们发明了 SQL、Mysql 等数据库语言记录数据，但最原始的数据记录是没有可读性的。
所以，为了让数据可以更好的展示，我们就必须借助可视性更强的图形工具，即电子表格。通过 X、Y 轴构建的网格系统，将数据有序、清晰得罗列出来。
表格的重要性就体现在企业日常工作中对这些数据进行管理的需求和频次上。
例如为电商 APP 开发了一套管理系统，那么电商运营每天的工作，都要绕着其中销售、物流、流水等重要模块的数据打转，也就是围绕着表格展开工作。
对于多数管理系统而言，数据查询、管理都是非常重要且高频使用的功能，所以常规项目中会包含大量的表格页面。
甚至，有的中小型项目的所有导航一级页面，只有表格，而不存在其它页面形式。所以，表格的优劣对用户工作效率和平台体验可以产生决定性的影响。
而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。
所以，这也是 B 端设计师的价值之一。一个优秀的 B 端设计师势必投入大量精力来提升对表格的认识和表格设计能力。
表格虽然细节设计上千差万别，但在表现形式和阅读顺序上却是基本一致的。
常规的表格必然包含表头栏、列表、翻页器三个部分，根据需求的不同，可能还会增加搜索栏、多选栏、操作栏等常见模块。
主要是用来进行简单的数据搜索和筛选的，当搜索项较少的时候，就可以将搜索结合到表格组件内。而搜索项较多时，则会把它们独立成一个筛选模块到表格组件的上方。
每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型数量。
通常，表头的设计会和下方列表设计有一定的区分，表头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗来增强对比。
列表则是纵向排列数据对象的模块。每个数据对象占一行，行的高度根据内容来制定。横向列表高度和纵向表头宽度重叠的区域称为单元格，每个单元格展示表头对应的数据明细。
常规 B 端项目表格都会限制列表一次展示的行数，极少使用无限滚动加载的模式。因为当数据包含成千上万条时会对本地、服务器性能和交互方式带来一系列的负面影响。
如果数据对象支持多选和批量操作，则我们会在第一列中添加选框，并将选中后的可操作选项放进操作栏中。
翻页器是切换列表页面的控件。通常大数据量的列表包含上千页，所以翻页器只会显示开头几页和最后一页，省略中间的，并增加适合快速跳转的功能。
除了表头和列表内容外，其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架，即包含的模块和对应分布位置，再展开后续的细节设计。
B 端项目支持响应式是今天行业的普遍需求，也就是页面内容随着浏览器视图宽度变更而变更。
不同页面类型的响应式逻辑各不相同，而表格是其中逻辑最复杂，也最难理解的一种。
表格响应式规则通常在确定好框架以后制定，优于视觉、交互设计，因为它对视觉和交互产生的影响非常大，是前置条件而不是通过设计稿逆推出来的。
表格的响应式规则比较细碎，我根据下面的顺序展开解释：
- 表格的总宽响应
- 表格的最小宽度
- 单元格的响应逻辑
- 内容的响应逻辑
表格的响应主要是宽度上的响应，整个表格的宽度区域随父集元素的放大而放大。比如父级元素左右内边距为 20px，则表格整体宽度保持和父级 20px 的左右间距。
上方逻辑中表格可以无限延长，但它却不能无限的缩短，因为你不可能做一个只有 10px，20px 宽的表格。
过窄的表格不仅支持不了内容的正常显示，也毫无任何使用体验，所以我们要为表格确定一个最小的宽度。即浏览器视图即使比这个宽度更小，表格也不会再缩小了。
最小的宽度可以结合前端栅格系统使用的 Breakpoint 规则来制定，如 Ant deisgn 中 SM：576px，或 MD：768px。
如果不了解栅格的段落规则，也可以 “凭感觉” 定，最小表格宽度通常在 560-640px，当然，不管怎么定一定要提前和前端沟通，确定尺寸方案。
当表格内容少的时候，最小宽度只是相对较大宽度窄了一点而已。而当表格内容过多，最小宽度无论如何也不够放的情况，那么就会使用横向滚动的交互形式来隐藏超出内容。
单元格响应这是整个表格最复杂的一环，横向内容会超出最小宽度的情况，就是由单元格规则决定的。
首先，单元格本身也有最小宽度，原因和前面一样，1px、10px 宽的单元格没有存在的意义。所以可以根据需要，制定多个等级的最小单元格宽度，应用在不同的数据类型中。
假设表格中包含了 20 个表头，分别使用了 10 个最小 24px 和 10 个最小 80 px 的，那么单元格的总宽最小就是 240+800 = 1040px。
所以当父级整个表格视图小于 1040px 的时候，内容就会不够显示从而触发左右滚动的条件。
当上级表格宽度大于单元格最小总和时，那么单元格也就会随之变宽。最简单的响应逻辑，就是为单元格宽设置百分比。比如 5 个单元格分别是父级宽度的 10%、10%、10%、20%、30%、20% ，那么在父级 1000px 的时候它们分别是 100px、100px、100px、200px、300px、200px。
只要确保百分比的总和是 100%，不管你单元格是比例均分（5个单元格等分各20%宽），还是独立制定（上面案例），单元格宽都是等比缩放的状态。
虽然好理解，但这种初级的做法带来的问题也很多，那就是部分单元格没有被 ”放大“ 的需求。比如常出现在第一列的多选框，或者部分标签单元格、固定操作按钮单元格。
于是，为了预留给有需要的单元格更多的空间，提升体验，就会对这些单元格实施定宽的方式，剩下的单元格继续使用等比，只是计算的方法要减去定宽元素。
比如还是一个占比 20% 的单元格，在包含 2 个 48px 定宽单元格的 1000px 表格中，实际宽为：
（1000px - 2*48） * 20% = 180px
作为单元格的子级，内容也可以独立定义响应的规则。主要包含 3 种情况：
- 无响应
- 隐藏多余
- 换行显示
无响应就是显示的内容是固定的，比如多选框、缩略图、单按钮等单元格内容，它们没有大小变动的必要。
隐藏多余，则是主要应用在文本内容上，当单元格宽度小于当前文本所需宽度时，就会把多余的文字进行省略，这种做法适合应用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家汇南丹路天主教堂一楼“ 变成 ”上海徐家汇南丹路天…“，之后再通过鼠标悬浮弹出文字气泡框的方式显示所有文本。
而换行显示，则是文本或多标签状态下，一行不够显示就换行的做法。除非一开始单行行高预留了多行显示的高度，否则多行内容就会撑高单元格。
以上就是表格在响应式模式下相关知识点。
随着经验的积累，实战经验丰富的 B 端设计师，就会在前期的规范环节制定出完整的表格响应逻辑，应用到前端框架开发和后续的设计，而不是做到哪定到哪。
表格首先是一个展示信息的组件，而单纯依靠布局和排版技巧，并不能解决所有的信息展示问题。所以，针对网页表格的局限性，我们要添加一些交互的细节来提升使用体验。
例如，单页表格数据量较大，有好几屏高，往下滚动后看不见表头，不能很好的识别单元格内容。
或者，表头属性数量较多，需要左右滚动，但是每行数据要不然操作栏目看不见，要不然对应 ID 被滑走了等等。
所以，表格的框架就可以做悬浮固定的模式，将需要被持续露出的栏目悬浮固定。
当然，除了单独栏目的悬浮，也可以使用混合模式，比如表头吸顶的同时固定右侧的操作栏。尽量将固定元素控制在 3 个以内，以免悬浮要素太多影响内容的浏览。
还要注意，除了笔记本触摸板和少数鼠标，一般用户是没有页面左右滚动滚轮的，所以当表格出现左右滚动情况以后，就一定要默认展示进度条，方便用户操作。
第二步，就是和表头相关的操作了。我们都知道常规表格页面中，表格上方还会有个筛选区域，专门用来进行筛选相关的条件制定。
但是，部分项目需求中，会将筛选的功能整合到表头栏目内，而很多新手甚至不能有效的区分筛选和排序的差异。
我们先对这两者做一个明确的定义：
筛选 Filter：对要显示的内容设置筛选条件，不符合条件的将会被过滤隐藏
排序 Sort：对已有内容的显示顺序进行条件设置，不会有内容被过滤或隐藏
这看起来好像很容易理解，但会搞混的地方就在排序的应用上。我们常规以为的排序，就像电脑文件夹列表一样，通过点击表头来决定内容通过哪个属性来进行升序或者降序。
在这种 “朴素” 的设定中，筛选是以单个表头属性为标准的，有唯一性。比如在学生数据表格中，可以以 ID、姓名、年级、年龄或成绩单个属性进行列表排序，选中其中一个属性其它属性的排序就被取消了。
但是复杂的排序并不是 “唯一属性” 的，而是多个属性的并集，以及具备优先级和排序模式。还用学生数据表格举例：
优先根据年龄降序排列，同年龄下根据班级升序排列，同班级再根据成绩降序排列。
这里面叠加了三个属性，年龄优先级最好，然后班级次要，成绩最后，我们用图表的展示可以实现出下面这样的形式：
再进一步，这是我们条件已经确定才做出来的组件，要是要制定的属性不确定，要制定的属性数量也不确定，顺序不确定，排序模式也不确定……
这种情况就肯定要应用排序自定义条件的逻辑了，而表头自定义一加，那逻辑就立马复杂了，它的操作面板可能就长下图这样。
排序复杂了，并不代表筛选就不要了。部分项目的筛选除了在表格外的独立筛选区域，还可能应用表头筛选模式。即以单个表头纬度设置筛选条件，比如点击 “年份” 表头，设置起始和结束时间。
所以，只包含筛选的情况下，表头的图标就不是排序而是漏斗，点击后就要展开筛选设置面板进行操作。
而当多表头筛选和多表头排序需求并存的时候，怎么解决？
这里只建议在表头中留存筛选选项，因为筛选可以实现并集关系，即前后任何表头添加筛选项都可以组成完整的筛选条件。但是，这种交互难以完成筛选优先级排序。
所以，我们要将排序独立成一个按钮到表头之外的地方，而不是强行让两者并存。尤其是不要设计出有的表头是排序，有的表头是筛选，甚至表头的按钮展开面板里又会有筛选又有排序……
表头是针对列的操作，而针对行的操作，就是对单行列表的选择、展开和进入了。
前面我们有说过，表格第一列往往放多选框，通过点击选择当前列表行。它本身的交互并没有太多需要注意的，只要针对行的交互如果不止选择应该如何平衡。
部分复杂项目喜欢在表格中添加 “套娃” 的需求。即单行数据可以向下展开二级数据，或者更进一步到三级、四级。
同时，每个数据行往往还关联详情页面，需要点击展开后查看更细节的信息。
所以当多种操作需求混合出现的时候，我们就要具体分析这些需求的优先级了。到底是多选操作频率最高，还是查看下级行，打开详情页。
这是为让点击整个数据行这个最便捷的交互可以关联到最高频的操作上。而其它低频操作的交互则只限定在对应的按钮或图标上即可。
因为多选需求往往需要我们在一系列数据中选择很多条数据，一个小小的复选框不仅选择起来麻烦，且通过查看右侧的内容筛选数据行，再用右手握鼠标按需点击最左侧的多选框，是非常别扭的体验。
还有一个需要注意的细节，就是当多选和展开下级列表共同出现的时候，选框和展开图标的排列。
通常一个数据行第一列的内容，应该是整行逻辑层级最高的元素。如果子数据行是被独立出来需要单选，那么展开图标就要放到选择前面。如果选择数据包含了该行和所有子行，那么选择就应该在展开图标前面。
当然，如果展开数据和父集就完全不是一种类型，用另一套属性，那么它也就没有被同时选中的需求和可能，不需要为它添加选择框。所以，这种情况下多选框也应该放在第一位。
最后，就是解决单元格的交互了。常见的单元格交互可以总结成下面这几类：
- 点击打开页面
- 点击复制内容
- 点击修改内容
- 悬浮提示说明
点击打开页面很好理解，比如单元格内的数据是链接、图片、按钮然后实现跳转或弹窗。
而复制内容，则有一些需要注意的细节。表格中有一些数据是没有实际阅读意义的，它的存在就是用来做特定的校对或者是复制出去，比如 ID 号、哈希值、订单号等。
常规的做法是直接在右侧添加一个复制图标，但对于一些偏复杂的表格来说，所有可复制的单元格都加复制图标是非常影响浏览体验的。
所以，我的建议是都是默认隐藏复制图标，只有当鼠标移动到对应单元格的时候会显示。同时，这个图标可以覆盖到数据上层，因为既然鼠标移动过来为了复制，那么数据被遮挡在这阶段自然无关紧要，为整体页面预留空间
这样的操作按钮隐藏浮现方式，也适用于单元格修改的操作。但是，和复制不同，单元格信息编辑通常是编辑文本信息，还有后续的操作步骤。
如果点击进行文本编辑，那么建议在该表格打开一个新的输入浮窗，且浮窗内输入框文本和原来文本位置持平实现顺畅的步骤转换。
同时建议，为了防止误操作，尽量增加确定、取消按钮，防止误操作覆盖原有数据且无法撤销。
最后就是单元格的悬浮提示了。B 端控件中的气泡框就是用来做提示的控件，但它只是手段。为什么需要悬浮提示，提示什么内容是我们需要考虑的。
对于及其复杂的表格来说，往往是没办法支持所有数据都完整展示的，我们会在使用省略号对它进行截断。但截断不意味着用户完全不需要在表格查看到完整的信息。
所以，就可以通过气泡的做法，将信息呈现给用户。而呈现过程中，尽量确保鼠标可以移动到气泡上复制里面的文字内容（和全部复制不一样），而不是鼠标移走就直接关闭消失。
熟练运营这几个交互方式，并统一对应的使用规则，就能确保整个项目的表格单元格操作预期的一致，不需要逐一进行尝试和鉴别。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这些年里，这款工具进行了快速的迭代和更新，响应设计师们的需求，不断完善功能，成为设计行业推荐率（NPS）最高的软件之一。
尤其是作为一款优秀的买断制软件，不仅定价合理，甚至 5 年来 ¥199 的售价分文未涨。
而我同期开始用的 Ulysses（用它写了两本书，写过的公众号内容超100W字）、MindNode、Notability 等，全都在这期间从买断制改成订阅制，甚至订阅价格还逐年上涨？？
我从来不吝啬于赞美优秀的软件工具，尤其是保持初心以纯粹的产品功能来服务用户的那种更甚。五年前我作为最早就推荐它的人之一，五年后我不介意再夸它一次。
它就是 —— Eagle。
Eagle官网：https://cn.eagle.cool/
前面说过，Eagle 是一个设计资源管理器，它可以做的事情非常多，但我不是要在这里写功能介绍的，而是来分享一下，我都用它做了什么。
图片采集是我使用 Eagle 的核心目的，他包含丰富的采集形式完美覆盖我的实际使用需要。
第一类采集形式就是通过浏览器插件或截图工具，将网页中看见的图片下载到本地。
第二类采集形式，则是通过粘贴花瓣或 Pinterest 的画板地址，批量采集该画板的所有图片。这是我最喜欢的功能，没有之一。
花瓣和 Pinterest 这类网站，真正的精华是优质用户自己收录的图库，而不是直接搜索出来的结果。批量采集，就是让我在找到优质图库后，用最简单的方式下载这些被精挑细选出来的图集。
因为批量下载很方便，我可以很快的针对同一类目收集出成千上万的内容。但同一个类目下载那么多图片或素材有意义吗？
数量从来不是我追求的目标，我会将任何类目的内容数量进行精简，只保留其中最精华的一小部分，即使它们是由一批最优秀的设计师收藏的图库，我也只取精华中的精华。
但是，光靠一张张图看过去打星再筛选，会把我累死。于是，我就会利用 Eagle 的筛选与排序功能，快速剔除劣质内容，缩小选择范围。
比如之前我分享过的 UI 配图的素材，包含十几个颜色的分类和上千张精选图片。原始图片超过五万张，是我从上百个摄影画板里批量采集下来的。
应用到大小、尺寸排序，色彩筛选，星级筛选等多种手段配合，帮助我快速筛选出各自质量最好的 100 张图片。而这前后大概只用了两小时的时间。
通过前面两个功能，我收集和筛选了海量的灵感元素。但这么多元素我们不可能无序放置，需要根据一定的规律进行编组和管理。所以这里就要分享 Eagle 的资源管理功能了。
Eagle 的资源管理包含三个方向：
1. 普通文件夹：类似电脑文件夹的逻辑，可以进行排序和上下级设置，收纳
2. 智能文件夹：通过一定条件设置，筛选出对应图片和素材的动态文件夹
3. 分类标签：即可以作为分类来使用的标签系统，可以为一张图片或素材打上多个分类标签
我的资源管理方法论一直崇尚的是极简主义，能用普通文件夹管理的情况我就一定不用智能和标签。不是说这些功能不好，而是因为它们需要对素材进行二次的处理和维护，只有在必要条件下才会使用。
我的素材资源管理是首先构思我会用到的几个大类，每个大类下会包含几个二级分类，即 Eagle 中的1级文件夹，然后再创建对应的文件夹并命名和添加色彩，比如下面示例。
不要奢望一开始规划分类能做到尽善尽美，只要大的方向上确定了，然后再根据日常收集的需要慢慢去添加下级文件夹，而这一级就没有那么严格的限定，用到哪加到哪。
只有在一些非常特殊类目下，我才会去为图片和素材增加标签，而不是为了打标签而打标签。比如我收集的学员作业也存在 Eagle 中，会包含课程期数、作业类型两个维度，我就需要用标签进行管理，方便我后续进行跨文件夹的查看与筛选。
除了基础的灵感图片外，我还往里面存了很多其它文件素材，包括但不限于下面这些种类。
Eagle 能作为一个设计资源管理工具，并不是因为可以添加文件夹和标签，再实现一遍 MacOS 的资源管理功能。而是因为它支持多种文件格式的快速预览。
它比 Mac 自身的快速预览更高效（后面会解释），同时作为双系统用户，我得以在 Windows 系统下如下图快速查看素材预览，而不是安装格式支持零碎的插件（或流氓软件）来实现。
尤其是 Sketch、XD、Mindnode 文件，有了缩略图，就不用通过打开源文件来查看内容。并且字体文件支持在目录中直接启用和停用，可以非常方便的实时管理本地字库，保证我在设计软件中只会出现必要的字体，而不会全部显示出来。
Eagle 还有个特别的功能 —— 网址记录，这也是我最常用的功能之一。
早前有先用 Pocket 然后转移 InstaPaper 和 Cubox 来收录网上看到的优质设计文章，方便我需要引用原文和整理思绪的时候回看。
虽然最后采用的 Cubox 也是一个优秀的稍后阅读工具，但长期使用下来我还是想尽量打开少的软件来完成我的工作。所以，自然而然的，我还是把网址全部迁移回 Eagle 中。
只要安装 Eagle 浏览器插件，我就可以快速收集网址到 Eagle 目录中，之后随时进行查看。
可能有的同学喜欢用网页整页截图来收集文章，只是我不太喜欢用图片格式查看文本，所以这个根据个人喜好即可。
同时，我不止拿 Eagle 管理灵感和素材，也直接拿来做项目管理。
在 Eagle 库文件进行团队同步以后，针对每个项目创建独立的项目文件夹，用来收录相关的文档、灵感图、情绪版、配图和设计文件。
尤其是项目前期收集灵感图和情绪板的阶段，多人共同收集和编辑的结果可以最方便的查看和进行评价，非常好的优化我们的协作流程和效率。
作为一个设计讲师，要观察学生的作业和进行点评。自然而然，我也会优先将所有作业添加到 Eagle 中去。
通过对每份作业前期的打分，标注，来进行后面点评课程的分享和讲解。
同时，这些收集的作业，需要在后续其它场景中作为正、反面的案例。所以对作业的评级和标签就变得必要起来，在相关场景下通过创建智能文件夹快速筛选出范围内的图例。
以上就是我使用 Eagle 最重要的 7 个场景，虽然实际应用还远远不止它们，但因为篇幅关系就先介绍到这里。
Eagle 作为一款被我长期使用和推荐的工具，不仅仅是因为上面的使用场景，它们是结果。所以，我要从更底层的角度，来解释它的不同之处和特点。
从上线以来，Eagle 有一个饱受误解和诟病的底层设计，就是它的 “素材包” 文件 .eaglepack 。用户需要先创建一个 “库“，之后添加的所有素材、文件，都会被保存到这个库文件中去。
换句话说，相当于 Eagle 在你的电脑中创建了一个特殊的文件夹，用来保存你置入的文件。即使你添加的素材是已经下载到本地，它也会再 “复制” 一份到这个库中。
很多设计师对这个逻辑感到很费解，为什么本地存的好好的，Eagle 要再复制一份，完全就是浪费系统资源和时间的做法。如果无法理解这个逻辑，就是不具备 ”产品思维“ 的特征之一。
我们先从和多人举例的 Bridge 和 Lightroom Classic 讲起。
它们的运作机制，是通过运行该软件，来读取你的硬盘目录和对应文件。使用它们并不会额外复制文件出来，即使你在软件中置入素材，它们也只是帮助你正常保存到硬盘的对应位置。
为什么这类工具会被我们放弃，有下面这些原因：
第一，它们的核心一直都不是全领域的设计资产管理，而是围绕在 Adobe 体系下的照片、视频、矢量图等多媒体项目素材管理，尤其是摄影相关项目。
第二，就像对比 Photoshop 相较与 XD 一样，庞大的软件体积和功能，对启动速度和硬件资源消耗带来没办法忽视的负面影响，降低操作的效率。
第三，就是比较值得深入思考的地方，那就是管理范围太广。直接读取硬盘就是让所有文件夹被暴露在管理器中，多出大量非必要的目录和文件，严重增加我们的决策成本和管理成本。
范围太大或自由度太高并不是什么好事，就像 iOS 的相册一样，它是个封闭的图片库，不像安卓一样读取其它硬盘文件夹，从而让相片的管理更简单明了。
自由虽然可以做更多事，但这些没有必要的可能性增加就只会变成决策和行为中的负担。简洁明了，才是高效的前提条件。
第四，就是设计文件的 ”预览效率“ 问题。不管电脑的性能怎么提升，大型位图的渲染都是非常消耗资源的工作。不管是动辄几 G 的 PSD 素材文件，还是高达几亿像素的超清图片，加载都是需要等待的。
比如下方目录中的作业文件，因为很多同学导出画布不考虑图片质量尺寸，所以往往会出很多 1W*1W 像素以上超过 30M 的位图。
当这么多大型位图聚集在一起，Bridge 完全加载出它们的缩略用了整整 2 分钟的时间……虽然 Bridge 会让你觉得久第一次打开慢以后就好了，这个功能的代价是生成了大量的 ”缓存”，即这些缩略图会暂时保存到缓存文件夹中。
缓存文件都只是过客，在你格式化系统，换另一台电脑打开，或者缓存超过了上面设置的 50G，那么旧的文件就会被删除，你还是要重新加载该文件的缩略图。相信我，超出缓存容量是非常容易的事，即使你加到 100G 也一样。
Eagle 的库特性，是在添加素材进库之前，会生成一个对应的缩略图文件，之后 Eagle 读取素材列表的时候就是加载这个只有几十 KB 不到的小文件，而不是解析原图。
这种策略带来的帮助除了在文件夹之间切换高效自如，也对本地内存的压力有非常大的缓解。
在一般资源管理中，一个文件夹内有几千张高清图片时，持续滚动到目录底部就会发现越来越卡，因为占用的内存越来越多，直至达到临界点释放掉上方列表加载的内容（上滚会重新加载）。相信有用相机的同学一定很了解这种感受。
综合各种问题和影响，自建库，并为每个素材生成不会被删除的缩略图就是最好的选择。
这不仅仅是 Eagle 一个工具的做法，即使 Adobe 也在 Lightroom 应用了相同的策略，新 LR 导入图片素材到它的自建库中进行管理，同时生成缩略图用于列表加载（降低高像素调节延迟）。而老版的 LR 虽然还没下架，但为它增加 Classic（古典） 的后缀，所以它们认为哪种做法更有潜力，你们自己也能判断了对吧？
今天我们使用的绝大数软件都是 SaaS（微软：基于web的软件服务），自带联网备份和同步，但是 Eagle 只能保存本地却不符合我们的 “习惯”，这是为什么？
因为成本是没办法控制的，重度用户成百上千 G 的硬盘占用，是不可能轻易使用云服务来实现同步的。这些动辄几 G 的 PSD 文件或其它大型设计文件，会让整个同步过程充满不确定性和冲突。
同时，云同步是一种成本特别高的服务类型，和一般的云存储空间不是一种概念，想要大容量又要免费，是不可能的。Adobe 同步盘 1T 容量港区售价 68 港币，苹果 iCloud 同步盘是 2TB 68 元/月。
算起来他们的价格并不贵，但一定要清楚 Adobe 和苹果云都是为了自家生态服务的，而且作为软件业巨头有自己的大型数据中心，降低云服务成本。类似 Eagle 这样的初创团队是不具备这种条件的，即使推出了，价格也不会便宜。
可能还有人会对比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方网站的本地客户端，更方便的访问自己的官网个人中心，无法收集和整理图片以外的其它素材，所以同步起来容易。
Eagle 的数据就只能保存本地，或者保存在笨拙的移动硬盘内，随身带着嘛？肯定也不是。
库文件的另一个管理好处，就是方便做备份。在今天同步盘服务逐渐成熟的环境下，你可以选择购买类似 Dropbox、坚果云这类同步网盘，通过它们实现备份和多设备同步。
或者，可以购买群晖、威联通、极空间为主导的个人云盘硬件，实现空间更大、更灵活的使用体验。
如果有同学不知道怎么同步的，我会在后面分享。
最后一点，就是对苹果 ARM 架构的适配了。在 Eagle 2.0 版本中，快速适配了 Mac 的新硬件架构，从而让软件的运行、读取效率远远高于上一个版本，做到了丝般顺滑的地步。
对软件本身的优化也是速度的保障之一，相信 Bridge 用的多的同学一定忽略不了它无处不在的延迟与卡顿。
Eagle 如果要进行网络的备份和同步，那么一定要分清楚同步盘、网盘、移动硬盘的区别。
其中，网盘和移动硬盘基本上是一样的，它们的使用特点就是我们要主动把要保存的东西，拖拽进硬盘目录内。移动硬盘备份速度还好点，网盘的备份就要非常久的时间。
如果你有两台电脑，使用移动硬盘的方案就得一直随身带着，用哪台插哪台上。非常容易在第二天忘记拔掉，然后回公司的时候没库可用。使用网盘的方案，那就更不可能的频繁的备份和在另一台电脑中下载。
类似 Dropbox 或 同步盘工具，就是用来解决这类问题的。简单点说，同步盘的原理就是本地安装一个同步软件和云端的服务器进行通信，这个同步软件会绑定相关的本地文件夹。于是，这个文件夹内有任何文件的变更，同步软件就会自动把变更的软件传输到服务器上。
而同步盘的特点并不是只能客户端和服务器一对一传输，而是可以多对一同步。如果服务器内容更新，它就会把更新的数据实时推送给其它客户端，更新它们本地的文件。
通过这种模式，就能实现自己多台设备，或者团队多个成员设备的文件夹实时同步，无需你手动进行操作。
当然，同步盘对服务器的资源占用与消耗远远大于一般网盘，所以基本只有付费的工具，而这种带给我们生产力的提升和数据安全的预算是有绝对必要的。
如果使用苹果的同学，可以通过将 .eaglepack 保存到关联 iCloud 的文件夹即可（最好“文稿”里）。苹果系统就会自动开始同步，其它 Mac 电脑就能实时接收。 默认的空间肯定不够用，建议开通 200G 容量的服务。
如果用专业同步云软件，以坚果云举例，下载完客户端，只要完成关联包含 .eaglepack 的文件夹，那么该文件夹就会启动同步。再在别的电脑中安装坚果云，就可以把该文件夹下载下来并自动同步。
我收集灵感素材是非常有目的性的，比如一个项目需要的配图素材，我会一口气去收集几十张觉得合适的图。
Eagle 有一个浏览器的采集插件，这个插件非常好用。只要拖动浏览器的图片，就会出现对应的采集弹窗，把鼠标移动到对应目录上就可以完成采集。
如果你觉得整个页面的图片都想保存，也可以在插件图标中使用批量收藏按钮（或快捷键），就可以采集整个页面中的所有图片，以及通过尺寸筛选对应尺寸。
应对日常看到的优质作品、灵感图，也可以非常快速的实现采集。可以最方便的收纳我们自己的采集资料。
作为移动端 UI 设计师来讲，收集日常见过的优秀 APP 界面，是必要的职业素养。而使用 iPhone + MacOS 再结合 Eagle 的话，这个过程就会变得非常的简单。
首先以完整页面收集为例，之前看过不少人推荐使用 iOS 的跨设备复制图片到 Mac 中黏贴的操作，是完全没有必要的，因为一次只能复制一张截图。
你要做的就是开启相册的云同步，日常使用 iPhone 时把想要收集的页面进行截屏即可。每过一段时间，在电脑的相册中打开 ”截屏“ 相册，就有你这段时间收集的所有截屏。框选相关内容，拖进 Eagle 对应文件夹中就完成收集，然后再删除原图。
而且因为相册特殊的机制，直接拖拽出的图片是压缩后的版本，让截图的文件的体积大幅度缩小，从3M 变成 300K（完全够看），非常好的降低硬盘占用量。
除了收集页面，更重要的 UI 灵感是页面中的 ”组件“，我们需要根据组件为目标去收集相关的案例。直接拖进整页截图的方式就不太合适，比如下面的瓷片区案例区。
所以，我们要开启 Eagle 的自带截图功能，并设置好你觉得顺手的快捷键。
记得打开第一个选项 ”弹出分类“，就可以每次截图后选择指定的文件夹。不管是你的截图，还是网上的其它案例，你都可以用最高效的方式收集这些组件样式，轻易搭建自己的组件灵感系统。
前面讲过，我会用 Eagle 来放 Mindnode 这类思维导图文件。但是，Mindnode 先创建保存，再拖进 Eagle 的步骤太麻烦了。
所以，我正常新建并保存 Mindnode 思维导图会到它默认文件夹中，然后使用 Eagle 的文件夹检测功能关联它，之后所有保存的文件就会出现在 Eagle 的目录中。
之后，我编辑和查看老的 Mindnode 文件就在 Eagle 中进行了。这么做的好处，还可以让我使用 Windows 系统的时候能够正常预览思维导图。
Eagle 是可以管理字体的，我把所有正在用或收集的字体都放进了 Eagle 的字体文件夹中。
可能你们会有疑问字体丢进字库就行了，还管理它们干什么？或者说有字由之类的字体软件，用 Eagle 干什么。
一方面是我会尽量精简使用工具的数量，另一方面，就是使用团队同步盘的时候，我们的团队字库是统一的，随时可以找到启用的，最快解决其他人的设计文件字体缺失问题。
同时，当我在使用 UI 软件设置字体觉得选择起来太困难时，就会去关闭掉大多数最近不会用的字体。实现这个操作非常的简单，只要新建 ”智能文件夹“，并添加选项 ”字形文件“ 和 ”已安装“，那么启用的字体就会全部出现在这个列表中。
用一两分钟的时间就可以批量选择你想要停用的字体，右键停用即可，它们就会自动从智能文件夹中消失。你可以一直保留这个智能文件夹，每次清理只需要一两分钟时间。
目前上方截图中的很多案例还不是最终的完整版，最近上海疫情居家隔离，大多数工作暂停中，我在闲暇时就开始重新整理 Eagle 库。因为以前堆积了很多冗余的东西，所以这次我把整体素材都导出后重新进行整理中，也是为什么会写这篇内容的原因。
Eagle 带给我最大的价值，就是为我和团队节省了海量的时间，让我有可以更快的找到参考素材，更快的整理分类，更好的同步项目文件。
上面分享的很多体验和总结，都是在 5 年来长期使用中一点点摸索，适应，并形成习惯的。任何工具的使用与自己工作学习的结合，都是渐进磨合的，每个人都可以在这个工具中挖掘出适合自己的用法。
但依旧要给大家一个建议，不要为了收集而收集，也不要沉迷与堆积素材的数量，让它为我们服务，恰到好处的出现在我们的实践过程中。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线，B 端作为一个新的热点开始被追捧。
但 B 端是一个泛指，它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。
不同 B 端细分行业差距是非常大的，就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景，就一定要聚焦到具体的行业类型，否则就没有讨论下去的基础。
而我们今天重点聚焦的，就是目前声势极大的数据可视化行业。
这是最近很多同学咨询和关注的领域，也是各大显卡厂商、3D 引擎发布会上的常客。
各种让人眼花缭乱的图例和技术应用解说，很容易让我们产生未来已经加速向我们走来的 “幻觉”，此时不抓紧时代的机遇投身数字化界面的设计，更待何时？
但我还是要劝大家别光顾着鸡冻，冷静下来好好分析这些行业和市场状况，当你了解的越多，你就越会发现，这个职业方向和你们想的不太一样……
首先，数字可视化领域也是一个比较笼统的行业，它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类，平面展示型和3D展示型。为什么根据这个分而不是商业场景，下面会做进一步解释。
首先，数据可视化不是用了花哨的 3D 视觉才叫可视化，平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI ，统计分析工具等。
比如统计并查看网站、应用、店铺数据的平台。
这类产品有非常广泛的使用场景和需求，是现代企业和产品运营的基石，它存在的价值是毋庸置疑的。
而另一类 3D 展示型的细分发展方向，包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。
这类项目更多是由技术发展催生而来的 “新需求”，和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的，但对设计师从事这个行业的总体前景持悲观态度。
下面，针对真正的数据可视化设计师，我会从下面几个维度展开讨论（唱起反调）：
- 知识门槛
- 行业特征
- 团队价值
数据可视化是对数据信息进行图形化设计的过程，这个行业不是这两年才出现的，而是由来已久。
从世界上第一个图表的诞生之后，就有无数统计学家和设计师投身到这个领域中，发明和设计出各种精妙绝伦的图形。
数据可视化的重要性不会比任何其它设计行业低，但是，数据可视化重要性的来源，是由数据本身的价值赋予的。因为诠释数据的方式精彩，所以有价值，而不是仅仅是因为你做得好看且花哨。
更进一步说，就是数据可视化的价值是被统计学赋予的，而统计学是被这个世界真实需要的。
但很可惜，极少有 B 端设计师会投入精力到统计学的基础知识和应用，这就导致很多设计稿中，连对数据的展示应该用折线还是柱状都分不清。
或许你依靠经验可以提升对一些基本图表使用的心得，但是，进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛？那下面这些图形应用需要掌握什么？
复杂的可视化应用场景，不仅需要设计师对统计内容和数据应用有主动地分析，还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用，但凡涉及到区级以上的地理信息可视化，就一定需要应用 GIS 工具的应用，导出并转化数据包。
除了 2D 以外，3D 可视化的项目，所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以，学会 C4D 就可以做可视化项目。
这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的……
前面说过，3D 可视化是由技术发展催生出的行业，它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了，比 2D 图形复杂好几个量级，这就导致设计可以落地的限制远远超出新手的认知。
常规的 3D 项目，必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果，而网页运行 3D 就是借助 WebGL 图形协议实现的。
由于各种技术和硬件限制，WebGL 的性能是奇差无比的，因为它的图形绘制渲染主要依靠 CPU 来完成，只要项目稍微复杂一点，多边形和图元数量一多，立马就会让电脑变卡（CPU占用量暴涨）。同时，它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。
因为 WebGL 太弱，目前封闭的可视化项目就转而使用其它的技术解决方案，即虚幻 Unreal 和 Unity。没错，就是你们玩游戏启动画面中显示的那俩引擎。
换句话说，现在的高端 3D 可视化项目，就是用做游戏的方式做可视化应用，只要在指定设备里安装，就可以调用 GPU 资源，实现更高级复杂的效果。
但是，只要应用了对应的引擎，就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模（不同可视化项目应该用的建模软件也不一样），再导入到虚幻或者 Unity 编辑器中进行下一步的操作，然后再和开发进行交付。
因为 3D 的复杂性，导致独立 3D 可视化项目的开发流程被大幅度拉长，从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制，我就不继续展开了。
3D 可视化设计师，几乎就等同于游戏行业中的技术美术(Technical Artist)，因为游戏开发更复杂，分工更明确，技术美术作为设计师和开发之间的桥梁，帮助项目的美术能尽量在技术上被实现。
而因为可视化项目的建模精度与视觉效果要求不高（对比游戏），这些工作就要由同一个岗位包揽，设计师就没办法回避这些让人绝望的知识信息。
还有一点对比游戏行业更让人绝望的，就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的，而且技术迭代周期远比游戏行业短（WebGPU已经在路上了），这在客观上增加了设计师的从业压力（欢迎体验前端开发的压力？）。
一个专业的可视化设计师知识门槛，是远远高于一般 UI 设计师的。
当我们研究一个行业的前景时，就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场，而是其它多个大市场中的某个组成部分。
如前面提到的数字分析、物联网、工业物联，都是层次更高的商业化市场。这些都是近年来高速发展的热门行业，是带动可视化行业发展的客观依据，我就不一一找公开统计数据佐证了。
而可视化除了商业场景外，还有个在国内做可视化绕不开的话题 —— 政策。
如果具体关注过地产、5G、电动车产业的发展历程，就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣（或者泡沫）。
而政策对于可视化的利好，就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型，到最近国务院发布的 《关于加强数字政府建设的指导意见》，都是中央直接 “指导” 地方发展数字化的指标，是行政意志与力量的体现。
说更具体点，下面是指导意见中的目标说明，非常直白，大家可以自己体会：
到2025年，与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全，政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成，政府履职数字化、智能化水平显著提升，政府决策科学化、社会治理精准化、公共服务高效化取得重要进展，数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。
到2035年，与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备，整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成，为基本实现社会主义现代化提供有力支撑。
原文链接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因国情在此，所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等，都是借助这股东风蓬勃发展。
所以，商业和政务的迫切需求，催生出一大批可视化服务公司，如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会，纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等，都已经小成气候，初现锋芒。
市场需求旺盛，规模快速增长，前景理应一片大好！但是……
市场总规模的扩张，带给个体的收益却不一定有表面看起来那么理想，尤其是设计师岗位。
这要先从常规 UI 设计行业说起，UI 设计师工资已经是国内设计行业工资最高的类型之一，从10年前的屌丝行业到今天能和老牌贵族建筑设计叫板，是非常了不起的成就。
而之所以有这种收入，除了移动互联网爆发以外，最重要的原因就是互联网产品的 “利润率”，可以用非常少量的职员撬动上亿甚至上百亿的利润。
如王者荣耀 2021 年全年盈利 28 亿美元，接近 200 亿人民币的利润。一款游戏的利润直接达到万科（2021年利润225亿）和中国人保（2021年利润216亿）的水平，他们都是在册员工超过 10W 人的大型企业，也是国内各自行业里的巨头，而王者的员工只是他们的几百近千份之一。
再如蚂蚁金服、微信、抖音之类的国民级互联网应用，都是用极少的员工达到让人难以置信的估值和利润，这在传统行业是无法想象的。
所以能盈利的公司会给员工开出满是行业红利的待遇，拔高行业上限的同时，也迫使那些有志于挑战巨头的新公司愿意抬高工资价码，吸引人才。
总结起来，UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业，并不是因为 UI 专业门槛更高，而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。
其中，项目规模和利润率的重要性，其实远远大于行业规模，这是很多职场新人最想不通的地方。
例如广告行业已经是一个万亿市场了，除了分众这家互联网独角兽外，其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜（下图为 21 年财报）。
看看他们的营收总额和净利润比例，以及员工总数，你自己就会得出，作为普通平面设计师的待遇，是绝对不可能超过头部互联网企业的，甚至能达到中游水平都是超常发挥的结论。
行业规模大，但是头部企业规模和利润却不高，除了行业本身的平均利润率因素外，还有一个原因就是业务是高度分散的，没有被集中在少数头部企业，供应商数量庞大，不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。
在可预见的未来，可视化行业也会处于这样的情况，竞争激烈，利润率低。而且作为 B 端服务商，不要看各家企业需求旺盛，政府各级单位招标不断，实际上每个项目的规模都不大，百万内的项目才占行业的绝大多数，这是不太符合满足我们收入期待的项目规模。
而单个项目规模在未来高速扩大在我看来也不太现实，有两个原因，一个是项目使用人数极少（通常也就几十上百人…），另一个就是对可视化项目实用性的质疑。
如果看过航天相关的报道，就会看到指挥室数据大屏相比我们网上看过的案例比起来，简陋得发指。这会是因为总局没有预算，请不起设计师和团队开发嘛？
为什么航天指挥中心没有用下面这种 “科技感” 满满，复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”？
原因说出来让人沮丧，因为他们 —— 真的要看上面的信息啊！
真正能发挥可视化价值的场景并不多，很多项目出发的意义，就是为了表面工程（各级ZF单位需求，自行体会），装饰属性大于实用性。既然实用性不够高，很多甲方心里也清楚，是花钱装裱门面的，那么投入的预算就更不可能太高。
所以，我对可视化行业的整体的发展是认可的，但对单家公司或项目的预期，却是悲观的，它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。
最后，还要探讨下数据可视化中设计师的团队价值。
我们知道，一个完整的可视化项目设计与开发门槛都是非常高的，但因为高，创造的价值就高嘛？项目营收的成本占比就高吗？
答案依然是否定的！因为可视化行业的绝大多数项目都是 “传统” 的外包项目。
不管是商业是政务领域，外包最重要的任务，都是找到业务（中标）。朴素的价值观会认为，只要技术和服务够好，业务自然源源不断，其实不然。技术服务都是后验的，客户没有合作过之前是不知道的，在市场上挑选服务商，可不是打开淘宝买家评论查看分数和具体评价筛选。
所以，外行了解服务商的窗口，更多是通过熟悉的中间人介绍，或者销售的嘴。谁能拿到项目，谁就为公司创造了最大的价值。后面怎么做那是后面的事，换谁做不是做……
这就是最常见的外包企业思路，所以技术人员或者设计往往都是消耗品，没有那么强的依赖性。而在具体外包实践环节中，项目的执行决策也和一般 B 端、G 端项目不同。
我以前一直强调，B 端项目的存在价值，是用来解决业务问题，为企业 —— 降本增效。但是可视化项目往往不是用来解决问题，而是用来 —— 解决产生问题的人！
尤其是面向政务的项目，在领导的需求面前，是没有体验这一说的，首先考虑的应该是 ”科技感“（结合前文理解），不然怎么展示自己贯彻上层指导意见……
这种环境对于创意类职业是非常不利的，一方面创造的价值并不显著，另一方面是由别人 “教你” 怎么做设计。长此以往，你会越来越缺失职业竞争力和发展可能。
问题二，则是因为可视化项目独立开发成本太高昂，做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发，解决最麻烦的底层图形方案。
这和 B 端的前端开源框架非常类似，把底层的代码、交互、动画、性能优化都帮你做好了，设计师和程序员可以用非常省事的完成项目的视觉内容落地。
但是，常规 B 端管理项目中，界面样式一直就不是最重要的事情，而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。
而在可视化领域中，多数项目并没有那么多和复杂的交互需要考虑，视觉展示效果才是第一位，绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响，那才叫触及灵魂的打击。
所以，在我看来可视化设计师可以创造高价值的场景，只会出现在两种团队中。
第一种，是给其它可视化团队提供图形服务的 SAAS 工具，比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累，换句话说，就是既要有技术实力又要有资金保障的团队。
第二种，则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇，再由设计师主导来推动业务发展，不会什么项目都做，会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。
这两种对比目前海量的服务商来说都是凤毛麟角，第一种类型是可视化设计师发展最好的归宿，因为设计产出和图形技术发展高度捆绑，只有这样的团队才会最早最快接触新的专业技术方案。
除了这两类，不要对其它外包类公司有太多的期待。在整个互联网行业中，成熟产品团队非常不喜欢招外包设计师不是没有原因的。
至于未来是不是可视化内容会在 C 端领域打开局面，发展出一些新的应用场景，我就不过早下定论了。
最后，做个总结，给目前还没有进入可视化设计行业，或者是误打误撞进入这个行业的设计师一些职业方向的建议。
可视化设计行业和广告业非常类似，就是从业人员收入构成是沙漏状，而不是像 UI 这样呈金字塔状的，缺乏健康的增长梯度和充足的腰部岗位。
可视化设计师从菜鸟进入专业阶段所需的知识量更大，准备周期更长，技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。
如果本身热爱可视化，想将 FUI 那些东西搬进真实的世界和项目里，也做好了艰苦学习的准备（说不定是你乐在其中的），那么这个的行业的头部岗位就是为你这种人准备的。
毕竟行业体量大，当然就会有真正优质的岗位出现，只是它的门槛高，没有那么多水分能挤。
如果不是异常热爱这个行业，具备较强的自学能力，或有一定的 3D 和图形技术知识积累，那么不太建议往这个职业深入发展，一般的 B 端和 SAAS 项目才会是更好的选择。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com