数据可视化已迅速成为在网络上传播信息的标准。它用于各种行业，从商业智能到新闻，帮助我们理解和传达见解。
我们的大脑善于处理可视化信息，这使我们更容易理解图表或图形中可视化的数据，而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来呈现数据，以便数据被吸收和理解。它应该考虑用户对视觉处理的了解，提高并简化用户的数据体验。
目前有很多工具和框架可用于构建这些图形，是时候回归基础了。是什么让数据可视化有效？在设计数据时我们应该遵循哪些指导原则？
以下最佳实践将帮助您设计丰富、有洞察力的数据体验。
可视化是用于揭示模式的，提供上下文并描述数据中的关系。虽然设计师对给定的一组数据集中的模式和关系没有任何影响，但她可以根据用户的需求选择显示哪些数据以及提供怎样的语境。毕竟，就像其他产品一样，如果用户无法使用它，那么可视化就毫无意义。
为小白用户设计的可视化应该是结构化的、明确的和有吸引力的。他们应该用文字直接说明受众应该从数据中得到什么。
转换双亲的工作时间：妈妈VS爸爸
来源：https://flowingdata.com/2016/04/20/parent-work-hours/
另一方面，面向专家用户的可视化可以显示更精细的数据视图，以驱动用户探索和发现。细节和数据密度应该简单明了。
工作来来往往：国民失业
来源：http://graphics.wsj.com/job-market-tracker/
这是一个发人深省的数字：《纽约时报》网站上只有10-15％参与可视化交互的访客实际点击了按钮。《纽约时报》的图形团队制作了一些业内最好的作品，但几乎没有人与他们互动！
这表明，关于交互可视化设计，我们不能依赖交互来建立理解。关键数据不能隐藏在交互元素后面，而应该在没有交互的情况下可见。
然而，什么样的交互比较好呢？允许整合更多数据（否则可能被排除），以允许感兴趣的读者更深入地研究数据集。Nathan Yau 的流动数据已经垄断了这种交互式可视化风格市场，正如他关于死亡原因和预期寿命的图表中所展示的那样。
2005年至2014年的死亡率数据：死因如何因性别和种族而异
来源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引点，一个引发关注的点，可以让你的读者在远远地浏览之前，亲自参与该项目。看看 Quartz 这款有趣的书写和文化作品。这件作品首先要求读者简单地绘制一个圆圈——在继续文化形态的分析概述之前——画出简单而有效的可视化的特征。
画圆圈的方式说了很多关于你的故事
来源：https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/
同样， The Pudding 最近发布了一个交互式可视化软件，向读者讲述有关生日悖论的知识（生日悖论，指如果一个房间里有23个或23个以上的人，那么至少有两个人的生日相同的 概率要大于50%。）。虽然大多数非统计学家可能会发现生日悖论，这是概率论中的一个标准问题，非常枯燥且不直观，但这种可视化使得它看起来简直令人着迷。创作者融入最近的用户互动的方式使得整个体验非常具有关联性。
生日悖论实验
来源：https://pudding.cool/2018/04/birthday-paradox/
这两个交互式示例都起作用，因为它们允许读者参与数据且不需要通过交互来理解。
视觉突出性，使视觉元素从周围环境凸显的特性，是数据可视化的强大工具。它可以用于引导用户注意可视化中最重要的信息，以帮助防止信息过载。通过使用视觉突出一些细节并压制其他细节，可以使我们的设计更清晰，更容易理解。
一些视觉变量——颜色和大小——是我们创造和控制视觉显著性的关键。
色彩方案是优秀的数据可视化的关键。众所周知，色彩特别擅长打破伪装。我们可以使用温暖，高饱和度的颜色来突出关键数据点，并应用冷色调，使用低饱和度的颜色将不太重要的信息放到背景中。
2014：最热的年份
来源：https://www.bloomberg.com/graphics/2014-hottest-year-on-record/
尺寸也很明显。较大的元素比较小的元素更有吸引力，因此要扩大您希望读者首先阅读的元素，并缩小不太相关的文本和元素。
Cleveland 和 McGill 在信息可视化方面的著名工作，研究了视觉编码的有效性（即数据维度与视觉属性的映射）。他们根据人们对视觉编码的准确感知程度，对不同类型的视觉编码进行了排序，给出了以下（简化的）列表：
这对数据可视化设计的意义在于，我们显示定量信息的首选应该是按位置进行编码（如经典散点图和条形图所示）。与基于角度（如饼图）或基于区域（如气泡图）的编码相反，基于位置的编码有助于观众在更短的时间内进行更准确的比较。
然而，这并不是说所有可视化都必须是条形图或散点图。在研究可视化数据的新方法时，牢记这些原则是个好主意。
我真正想要强调的是，颜色不应该用于编码定量信息，而是应该用来编码分类信息。也就是说，我们可以使用颜色来表示属于不同类别的数据。
出生时的预期寿命
来源：http://www.vizwiz.com/2017/11/life-expectancy.htm
5.使结构元素像刻度线和轴一样清晰但不显眼
无论你是否支持 Edward Tufte 在设计中极简主义的极端方法，都要帮自己一个忙，从你的图表中消除视觉上的混乱。通过在数据元素和非数据元素之间创建可视化对比，来让您的数据大放异彩，就像 Nadieh Bremer 在他的获奖作品“美国出生时间”中所做的那样。
婴儿潮：白天工作时间出生高峰期
来源：https://www.visualcinnamon.com/portfolio/baby-spike
删除不起任何作用的结构元素使数据清晰（如背景、线条和边框）。减弱必要的结构元素（如轴、网格和刻度线），否则这些元素会与您的数据争夺注意力。网格为浅灰色，最宽设为0.5 pt，轴为黑色或灰色，最宽设为1 pt。
编码数据的每个元素都需要进行标记，以便读者理解它所代表的内容。简单吧？
错。太多设计师依靠图例来告诉读者哪些符号或颜色代表图表中的哪些数据系列。列举图例虽然对设计师来说很容易，但对读者来说却很难。它们迫使读者在图例和数据之间来回扫描，给读者的记忆带来不必要的压力。
更好的方法是直接在图表上标记数据系列。这往往更像是一个挑战，但是，嘿，你是设计师。你的工作就是做这项工作，以便于读者不必这样做。在下面的例子中，Nathan Yau 完成了避免使用图例的工作，创建了一个带有大量直接标签的小型交互式多重显示。
每人每日平均消费量
来源：https://flowingdata.com/2016/05/17/the-changing-american-diet/
7.使用消息传递和视觉层级创建叙事流程
最好的可视化讲述着引人入胜的故事。这些故事来自数据中包含的趋势、相关性或异常值，并且由于数据周围的元素而加强。这些故事将原始数据转化为有用的信息。
从表面上看，似乎数据可视化完全与数字相关，但一个伟大的数据故事是无法用语言来讲述的。信息传递具有清晰的视觉层次，才能一步一步地引导读者阅读数据。
例如，可视化的标题，应该明确阐明一个关键观点，使读者领会。分散在数据中的微小注释，可以通过异常值或趋势引起读者注意，从而为关键观点提供支撑。
来源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html
我在这里要说的是：帮助读者，确切地告诉他们在数据中寻找什么！
正如我刚才提到的，我们可以在可视化中使用注释来帮助创建数据故事的过程。有时我们可以添加图形元素来使这些注释更有意义，以便将这些信息更直接地关联到我们的数据。
以这张来自 Susie Lu 的图片为例。“夏季大片”和“奥斯卡季”的数据重叠赋予了原本看似随机的高峰和低谷以意义。它们帮助观众理解数据的重要性，比单独使用字幕或注释更直接。
2015 - 2017.08 票房趋势：强大的开场和后期的爆发
来源：https://susielu.com/data-viz/box-office
静态可视化通常以 JPG 和 PNG 等位图图像格式发布，这对移动端用户来说是一个明显的挑战。许多数据可视化的美妙之处在于它们的视觉细节——微小的数据点和微妙的编码——而这些细节许多在静态格式的小屏幕上被丢失了。
例如：Accurat 工作室在诺贝尔奖上的精美复杂的作品，在印刷和高分辨率视网膜显示器上看起来非常棒的全尺寸，却在移动设备上几乎难以辨认。
视觉数据
来源：http://giorgialupi.com/lalettura/
为移动体验设计，或者使用像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化，或者为印刷、桌面和移动设备多种载体创建相同的静态可视化设计。
我今天谈到的所有最佳实践可以归结为一件事：在复杂性和清晰度之间找到合适的平衡，以满足受众的需求。
制作精美的、探索性的可视化细节总是诱人的，但这不一定是最合适的方法。在设计图形时要考虑周到 ，让读者的知识和目标决定应该包含哪些数据以及包含多少数据，并整理数据以讲述您想要讲述的故事。
原文标题：10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB
原创作者：MIDORI NEDIGER
原文链接： https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/
翻译作者：桃花果
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
推荐 | 科技的不断发展将给未来的界面设计带来更多的可能性。复杂的语音界面、先进的 AR 或是真正沉浸式的 VR 都会被实现。而科技的进步也对设计师们提出了新的要求。在更加重视体验的未来，设计师们应该作出何种创新以应对变化呢？尼克·索萨尼斯曾在其著作《非平面》中写道：“要走出平面与狭窄，我们需要万花筒般千变万化的视角，我们的维度性和不断变化的能力才得以展现”。希望此文中提供的视角能给设计师们带来启发，跳出传统屏幕的平面来思考未来的界面设计。
快速摘要：
当改变来临，我们总倾向于自然而然地抵制它。我们所拥有的唯一真正的界限，就是我们的大脑告诉我们，事情最好保持原样。在本文中，Gleb Kuznetsov 分享了他的一些想法和观点，即在不久的将来，界面会是什么样子，以及我们能够期待何种非凡的体验。关键词：虚拟现实，用户交互，用户体验，用户界面
在我们做决策的过程中，情感起着至关重要的作用。一秒钟的情感便能改变用户体验产品的整个现实过程。
人类是一种由情感驱动的物种。我们选择一款产品并不是因为它有何意义，而是因为我们认为它能够给我们带来何种感受。未来的界面将会在产品设计的基础上使用情感概念。人们的使用体验将基于智商 ( IQ ) 和情商 ( EQ ) 。
本文试图展望未来，看看未来十年我们将设计什么样的界面。我们将详细研究三种交互媒介：
未来的界面将是什么样子？虽然我们现在还无法回答这个问题，但我们能够探讨未来的界面可能具有哪些特征。在我看来，我确信我们最终会摆脱那些充满菜单、面板、按钮的界面，并转向更加“自然”的界面，即扩展至我们全身范围的界面。未来的界面不会被限制在物理屏幕中，而是会借助五感的力量。正因如此，它们需要更少的学习曲线①——理想情况下，根本没有学习曲线。
①学习曲线：在一定时间内获得的技能或知识的速率，文中指面对未来的界面，用户需要更高效的学习速度，甚至无需学习即可掌握界面的使用方法。
除了使体验更加自然并减少学习曲线之外，对产品创造者来说，情感设计还有另一个益处：它提高了用户对产品的采用率。利用人类对情感的反应能力来创造更好的用户参与度是可能的。
使用语音功能作为主要界面交互方式的产品正变得越来越流行。我们之中有很多人使用 Amazon Echo 和 Apple Siri 来安排日常活动，例如设置闹钟或安排预约。但是，目前市场上可用的语音交互系统中，大多数仍具有一个天然的局限性：它们并没有将用户情感考虑在内。结果便是，当用户与像 Google Now 这样的产品进行交互时，他们有一种在与机器而不是真人交流的强烈感觉。系统的反应是可预测的，并且它们的响应是脚本化的。与这样的系统进行有意义的对话是不可能的。
但是目前市场上也有一些完全不同的系统。其中一个是 Xiaoice（ 微软小冰 ），一个社交聊天应用程序。这个应用程序的核心是情感计算框架；其理念是，首先要与用户建立一个情感连接。Xiaoice 可以动态识别情绪，并通过给出相应回答的长对话来吸引用户。结果，当用户与 Xiaoice 交互时，他们感觉是在与真人进行对话。
Xiaoice 的局限在于它是一个基于文本的聊天应用程序。很明显，如果是基于语音的交互，你可以获得更强烈的感受（ 人类的声音具有不同的特征，例如音调可以传达出强大的情感 ）。
微软小冰跨平台人工智能机器人图片来源：https://www.msxiaobing.com/
很多人已经通过电影 《 Her 》（ 2013 ）看见了基于语音互动的力量。Theodore （由 Joaquin Phoenix 扮演的主角）爱上了 Samantha （ 一个复杂的操作系统 ）。这也让我们相信，未来语音系统的主要目的之一便是成为用户的虚拟伴侣。这部电影中最有趣的事是 Theodore 从未见过 Samantha 的视觉形象——他只能听到她的声音。要建立这种亲密关系，必须产生能够反映出和虚拟伴侣性格一致的回应。这将使系统既可预测又值得信赖。
电影《Her》海报
图片来源：https://movie.douban.com/photos/photo/2166850749/
要实现像 Samantha 这样的系统，科技还有很长的路要走。但是我相信，语音优先的多模式界面将是语音驱动界面发展的下一篇章。这样的界面将使用语音作为主要的交互方式，并在上下文中提供附加信息，以创造和构建连接感。
为 Brain.ai 设计的语音界面实例 （图片来源：Gleb Kuznetsov ）
AR 体验的演变
增强现实（ AR ）被定义为在现实世界基础之上进行的数字叠加，并将我们周围的物体转换为交互式数字体验。我们的环境变得更加“智能”，用户在指尖产生一种“有形”物体的错觉，从而在用户和产品（或内容）间建立更深层次的连接。
AR 的独特之处在于它给予我们一种与数字内容进行物理交互的非凡能力。它允许我们看到以前无法看到的东西，这有助于我们更加了解我们周围的环境。这种AR属性帮助设计师使用熟悉的概念创造新层次的体验。
例如，通过使用移动 AR，可以创造一个全新水平的飞行体验，它允许乘客看到有关她的班次或当前飞行进程的详细信息：
AR 展示空客 A380 的飞行体验。（图片来源：Gleb Kuznetsov ）
AR 帮助我们找到穿越空间的方式，并一目了然地获取所需要的信息。例如，AR 可以为你当前的位置创建丰富的提示。SLAM 技术②在这方面有着出色的表现。SLAM 允许环境的实时映射，并能将多媒体内容置入环境中。
②SLAM 技术：（ Simultaneous Localization And Mapping ） 同时定位与地图构建技术，指机器人在未知环境中从一个未知位置开始移动,在移动过程中根据位置估计和地图进行自身定位，同时在自身定位的基础上建造增量式地图，实现机器人的自主定位和导航。
AR 有很多机会为用户创造价值。例如，用户可以将他们的设备对准建筑物，并在屏幕上了解该建筑的更多信息。它能够显著减少工作量，并通过导航和访问功能使用户获得轻松的情感体验。
在环境中提供附加信息（ 图片来源：Gleb Kuznetsov ）
我们周围的环境（例如墙壁或地板）也能成为交互的场景，在过去这仅限于通过智能手机和电脑实现。
下面的概念正是如此，它使用物理对象（白墙）作为画布，来表现那些通常用数字设备来传达的内容：
互动墙的概念——现实世界之上的数字叠加（图片来源：Gleb Kuznetsov ）
在一个名为 “HYPER-REALITY”（ 超真实 ）的一个网站中，作者 Keiichi Matsuda 制作了一段视频。视频中物理世界和数字世界已经合并，用户被大量信息淹没。
视频：
https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be
科技允许我们同时显示几个不同的对象。但是当它被误用时，很容易造成过载。
信息过载是一个严重的问题，它会对用户体验产生负面的影响。避免信息过载将成为 AR 设计的目标之一。设计良好的应用程序会借助 AI 的力量将那些与用户无关的元素过滤掉。
当系统根据用户的需求和期望来实时管理内容和功能时，数字体验的个性化便会发生。很多现代移动应用程序和网站使用个性化的概念来提供相关的内容。例如，当你浏览 Netflix 时，你看见的电影列表都是基于你的兴趣进行个性化推荐的。
AR 眼镜能够创建新的个性化水平，即“高级的”个性化水平。由于系统能“看见”用户所看见的内容，因此可以利用这一信息来提出相关建议，或在环境中提供附加信息。想象一下，你很快就将戴上 AR 眼镜，并且传输到你视网膜的信息是根据你的需求量身定制的。
视频：
https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be
AR 体验具有天然局限性。作为用户，我们与内容之间有一条明晰的界线，这条线将一个世界（ AR ）与另一个世界（现实世界）分离开。这条线让人感觉 AR 世界显然不是真实的。
你可能知道如何去解决这一限制，即使用虚拟现实（ VR ）。当然，VR 确切来说不是一种新媒介，但直到最近几年，科技才达到能让设计师们创造沉浸体验的高度。
沉浸式 VR 体验移除了真实世界与数字世界间的屏障。当你戴上 VR 耳机时，你的大脑很难分析出你接收到的信息是否真实。电影《 头号玩家 》（ Ready Player One ）很好地解释了在不久的将来，VR 体验会是什么样子：
视频：
https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be
以下是设计师们在创造沉浸式虚拟环境时需要记住的几点：
1.写一个故事有意义的 VR 在其核心有一个强大的故事。这就是为什么在你开始设计 VR 环境之前，你需要为用户旅程写一个故事。“故事板”这一强大工具可以帮助你完成这一工作。使用故事板，可以创造一个故事，并检查所有可能的结果。当你检查你的故事时，你将看到何时以及如何利用视觉及听觉线索来创造沉浸式体验。
2.与角色建立更深层次的连接为了使用户相信 VR 世界中他们周围的一切都是真实的，我们需要在用户与其扮演的角色间建立联系。最明显的解决方案之一是，使用户的手部表现成为虚拟场景中的一部分。这一表现应该是实际的手——而不仅仅是一个被操纵的复制品。考虑不同的因素（例如性别或肤色）是至关重要的，因为这让交互更加真实。
用户可以看到他或她的手，并看到自己作为一个角色出现（来源：leapmotion ）
为了建立此连接，也可以将现实生活中的物品带到 VR 环境中。例如，一面镜子。当用户看向镜子并看到其反射出他们自己的角色时，用户和虚拟角色间的交互会更加真实。
VR 用户看向虚拟的镜子，并在 VR 环境中看到他自己的角色。致谢：businesswire
3.使用手势代替菜单
当设计沉浸式 VR 体验时，我们不能依赖传统的菜单和按钮。为什么呢？因为显示菜单比较容易打破沉浸感。用户将会知道他们周围的一切都不真实。设计师们需要依靠手势来替代传统菜单。设计界依然在为手势的使用制定通用语言，参与这项活动是有趣且令人兴奋的。但棘手的部分是如何设计出用户熟悉且可预测的手势。
Hovercast VR menu 是将现有的交互概念重新用在 VR 体验的一次尝试。不幸的是，这个概念会打破沉浸感。新的媒介需要一个新的交互模式。
4.与 VR 环境中的元素交互
为了创造一个真实的环境，我们需要使用户能够与现实中的物体进行交互。理想情况下，环境中的所有物体都可以被设计成允许用户触摸和观察它们的模式。这样的物体会起到刺激作用，并帮助你创造更具沉浸感的体验。触摸对于探索环境非常重要，婴儿在刚出生的那些天接收到的最重要的信息便是通过触摸获得的。
5.在 VR 中分享情感
VR 真正有机会实现社交体验的新高度。但为了实现它，我们需要解决一个重要问题，即将非语言的提示带入交互中。
当我们与他人进行交互时，我们获得的信息中有很重要一部分来自肢体语言。惊喜、厌恶、愤怒——所有这些情绪都在我们的面部表情中。在面对面的交互过程中，我们通过眼睛的区域来推断信息。当人们在 VR 环境中互动时，为了创造更加真实的交互，提供此信息是非常重要的。
好消息是，头戴式设备（ HMD ）很快就将涵盖情感识别。在虚拟现实中，几乎所有人与人之间的互动都受益于面部表情。
在 VR 空间中分享情感（来源：MITReview 的 Rachel Metz )
6.为 VR 环境设计合适的音效和音乐
音频是沉浸式体验中的重要组成部分。如果不为环境设计音效，就不可能创造出真正的沉浸体验。声音既可以被当作背景元素（即环境中风的声音），也可以是指向性的。在后一种情况中，声音可以作为提示使用——通过播放具有方向性（声音来自哪里）和距离（可以将用户注意力集中在特定元素上）的声音来提示用户。
在为 VR 设计音频时，制作 3D 音效是基础。2D 音效 VR 中表现不佳，因为它让一切都显得太平。3D 音效可以使你听到来自四面八方的声音——前、后、上、下——任何地方。你不需要使用专门的耳机来体验3D音效，通过头戴式设备的标准立体扬声器便可以实现。
头部追踪是良好声音设计的另一个重要方面。让声音以逼真的方式表现是至关重要的。这就是为什么当用户移动他的头部时，声音应该根据头部移动而改变。
7.预防晕动症
晕动症是 VR 的主要痛点之一。在这种情况下，视觉感知的运动与前庭系统③的运动感知之间存在分歧。在体验VR的过程中，使用户保持舒适是至关重要的。
③前庭系统：前庭系统是人体平衡系统的重要组成部分，它具有特殊的感受器，能够接受适宜的刺激，经过与其他感觉信息（如视觉信息、其它本体觉信息）的整合、加工等处理后，再经多条神经通路把这些信息传送到脑内更高层次的中枢，进行高层次的加工处理。
关于VR中导致晕动症的原因，以下是两种主流理论：
根据这一理论，晕动症的发生是由于预期运动与实际经历的运动在感官上不一致。
在《 The VR Book: Human-Centered Design For Virtual Reality 》一书中，作者 Jason Jerald 提到，晕动症的发生是由于眼球的非自然运动，而这是保持场景图像在视网膜上稳定所必需的。
以下是一些提示，有助于避免用户使用呕吐袋（避免晕动症的发生）：
当我们考虑产品设计的当前状态时，很明显我们仅看见冰山一角，因为我们局限于平面屏幕。我们正目睹人机交互（ HCI ）的根本转变——重新思考数字化体验的整体概念。在接下来的十年中，设计师们将打破这层玻璃（我们今天所知的移动设备时代）并转向未来的界面——复杂的语音界面、先进的 AR 和真正沉浸式的 VR。当创造新的体验时必须要明白，我们唯一的界限是我们的大脑总告诉我们，应该保持原样。
原文标题：Designing Emotional Interfaces Of The Future
原创作者：january
原文链接：https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/
翻译作者：阿钦
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我经常想，如何花费极少的精力避免可用性错误。在做了这么多项目之后，我意识到在我准备设计一件东西之前，我犯了很多常见的错误。当我专注于设计时，可用性问题已经悄无声息地形成了。它们在我的工作流程中扎根，现在我正试图改变我的工作方式。
在这篇文章中，你可以了解以下内容：
几个月前，我设计在线商店的时候，阅读了如何避免可用性错误的相关文章。几天后，我一遍又一遍地发现同样内容的旧文章。显然，它们都故意收集了同样的错误：经常出现并容易避免的错误值得反复提及。
问题是，它们似乎是临时性的解决方案，因为我项目的基本属性每周都在不断变化——信息架构、导航机制等所有东西。我每周都在寻找新的技巧，所以我决定寻找可用性错误的本质，而不是一种避免它们的方法。
可用性错误排序的低效性
识别可用性错误需要花费很多时间。它以消极的、妥协的方式影响有效性、效率性和便利性。一个小问题可能会让用户在完成任务时感到不愉快。巨大的问题甚至会让你无法完成任务。 在本文中，我将把它们称为不正确的设计选择。
可用性错误会影响用户便捷、高效或有效地完成任务
问题在于可用性问题有许多不同的形式和严重程度。那么为什么不对它们进行分类和优先级排序呢？ 它不能那么混乱，对吗？不久前我就是这么想的。在混乱中创建秩序会非常有意义，但是当涉及可用性错误时，这个概念就失败了。
制作群组或列出最常用的群组并不能提供有效的解决方案。为什么？ 用户体验设计不断变化，并且有多个变量。想想在过去二十年中我们与界面交互的方式是如何变化的。
我们已经从显示器转移到小型移动屏幕，而平板电脑和带有圆形屏幕的智能手表则拓宽了这一领域。而这只是以一种更复杂的方式去看待一个变量。
也就是说，在不断变化的设计领域，任何规则或原则都不会永远存在。这意味着查找和排序最常见的错误只是一个临时解决方案。这可能行得通，但不会持续太久。为了给用户体验设计遥不可知的未来做好准备，请查看您的工作流程以获得最终答案。
几年前，没有人会对设计一个可以从屏幕底部向上滑动即可访问的购物车功能感到惊讶。2017年，iPhone X 诞生了。从那时起，大多数用户都使用此手势（指滑动手势）进入主屏幕。
资料来源：support.apple.com
我以前不会浏览设计趋势，以免影响自己。我仅仅检查情绪板和配色组合，完全忽略导航结构和其他用户体验解决方案。我相信在看过流行趋势中的解决方案之后，我们会下意识地放弃我们的创新想法。
经过这么多年，整个概念在我脑海中浮现。忽略当前的用户行为模式和技术变化，您虽然不会让自己暴露在犯关键设计错误的可能性中，但你也会错过所有其他的机会，使你的设计真正有用。
好的，所以你要规划未来用户的行为，你就必须坚持到底。进行探索性访谈作为一种良好的开端，提出问题并发现痛点和欲望背后的动机为您提供了完美的素材：背景信息。
在设计界面时，这将成为宝贵资源。 它产生的数据量可能看起来很可怕。您可能会发现很难驾驭或使用，但里面总是隐藏着无限的可能性。
找到一个可行的方法获取一些有趣的背景信息。如果您没有时间进行面试，请查找类似产品的案例研究，从中找出结果。 看看现有的基准研究或类似产品的成功特征。 虽然不完全相同，但它们可以为您提供一些帮助。在考虑设计线框图之前进行此项研究，可以让您为用户设计。
3.消除你的偏见
我正在设计一个食品配送应用程序，想要试验一下按钮的位置，这个按钮可以把你带到餐馆的完整列表中。 我通过几次测试尝试了很多变化，但没有引起太多关注，因为用户还有其他几种方法可以做到这一点。尽管接下来的测试进行得很顺利（这样受试者就能完成任务），但这种体验仍然不能让人满意。找出问题的症结所在是个难题，因为他们无法确定问题（反正不是他们的工作）。
几天后，我正在看着我的女朋友在一个完全不相关的网站上订餐。我注意到她是如何避免定制的套餐和推荐的餐馆。她说它们看起来像广告。她认为主页是一个受控制的环境，所以她进入了餐馆列表，在那里她可以在不受控制的情况下对它们进行排序和过滤。这是我项目的关键：控制。我在测试期间错过了这点，因为我对用户应该如何使用应用程序有一种偏见。
做出风险设计决策的最简单方法是什么？清醒的意识到您的桌面和移动设备用户想要如何使用您的产品。为用户构建而不是告诉他们应该如何思考，总是变得更容易。宏观看待目标群体期望如何与产品交互，将帮助您创建直观的界面，同时简单地避免关键错误。这是一笔很好的交易。
设计师证明自己和他们设计的用户一样人性化。虽然很难，但我们必须接受这个事实。这个微小的错误至今仍困扰着我。接受你的错误，尤其你是完美主义者。我们不可能一直十全十美。
此外，我们无法避免较小的可用性问题，没有人可以在设计时不考虑这些问题。它们只是过程的一部分。当然，使用各种经过验证的实践或（在这种情况下）改进工作流程有助于避免关键问题。但我们很可能无法解决与满意度相关的不便。因为我们以独特的方式感知世界，所以我们期望结果和行为不同。
5.理解你的错误并加以改进
分析出了什么问题和错误的原因。了解糟糕的设计选择背后的原因比错误本身更重要。这让我们回到简单地排序可用性错误“低效性”的问题。如果你能说出你为什么一开始就犯了错误，那么无论平台或观众如何，你都可以避免在未来犯同一个错误。
追溯你的错误可能会让在工作流程中养成习惯（或相反，缺乏习惯，从而导致很多麻烦）。就我而言，使用假设进行设计会导致许多小的可用性问题。反过来，它们以明显妥协的方式影响了整体用户体验。所以我写这篇文章。把你的错误视为你工作方式的副产品，这可以帮助改进方法，摆脱并根治问题。
6.验证您的更改
然而，单独根除错误并不能减少错误。就像设计和测试一样，重建工作流也需要验证。我们只需通过各种后续技术来做到这一点。您可以选择是向客户发送简单的电子邮件，创建完整的问卷，或是进行另一轮测试。确定获得有关工作的相关信息的最有效方式取决于您的项目和客户。
获得关于工作的反馈，以了解改进的程度。通过这种方式，您可以衡量更改的有效性并对其进行微调，以便在第一轮不满意时获得更好的结果。此外，它也为你的简历锦上添花，但这只是奖励。
以下没有特别的顺序，我通过改进您的设计工作流程来提高可用性。相反，它们提供了一个指南，告诉我们应该在哪些地方派上用场。 让我们快速回顾一下：
我仍然试图将这些技巧正确地整合到改进您的工作流程中，并且需要花费很多时间去精确的设计。但我的产出已经感觉更具战略性和准备性。 我希望它对你也有帮助。
原文标题：Usability Mistakes: 6 Honest and Valuable Tips From a UX Designer
原创作者：Sándor Zelenka
原文链接：https://uxstudioteam.com/ux-blog/usability-mistakes/
翻译作者：shmilyJ
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
全局导航
1、导航栏可折叠收起菜单。
2、收起时，鼠标悬浮在图标上同时右侧弹出菜单栏，然后触发菜单文字。
1、根据tab的层级来确定位置，最高层级在上，不同流程层级在下。
Tab在上：用户明确自己想要查找的目标在哪个tab并且需要一眼看到所有概况（想要查找数据时，直接到对应的tab下查找）。
Tab在下：需要看到查询的结果在各tab下的分布情况。
1、筛选区包括搜索项、查询、清除查询；如果搜索项超过一行时，需要「展开、收起」按钮。
2、折叠展开设计：默认显示一行将使用频率高、覆盖面广的1-3个显示出来其他的隐藏。（用户频繁使用的筛选条件能一眼找到）。
3、按钮固定在最右侧不变，搜索项可进行自适应。
4、筛选条件：
1、功能性按钮和批量操作（比如新增、导入、导出...）
2、根据使用频率进行排列新增＞导入＞导出；使用频率高的操作采用高亮显示。
3、如果按钮太多可进行操作项分类。
1、在能够概括的情况下，尽量简练、准确，一般可根据上下文关系进行简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。
2、对于比较复杂的表头，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释。
3、表头筛选、排序功能
提供表头筛选功能，依据用户关注度最高的字段进行排列。
需结合业务场景具体分析，一般来说，编号、时间、价格字段，提供正序、倒序功能。
考虑用户第一次进入列表页的初始化状态，保证用户进入页面时大概率能直接看到自己想要的东西。
表体
包含多选列、数据列、操作列
特殊处理操作的按钮、字段优先级、状态可以前置，方便一目了然。
1、全部展示（缺点：利用滚轴滑动次数太多用户视觉容易疲惫）。
2、较长字段用“…”展示，防止字段重复，对重要字段进行快速区分、对比（优点：每行可显示较多的信息 缺点：想要看全信息，只能鼠标移入字段出现气泡显示完整信息）。
3、换行，保持行高不变，改变文字距单元格的上下间距，最好不要超过3行，多余字段用”…”显示（优点：尽可能显示全部内容 缺点：同2）。
4、字段优先级分类，做折叠展开设计（筛选信息层级较高的字段放在表格栏，次要信息放入二级表格）。
5、数据库中没有该字段，用“-”，数量用“0”后边有小数点、后位数保持上下单位一致。
1、让用户将注意力放在数据信息上，而不是表格底色、边框
2、不使用斑马线设计、分割线样式轻盈、去掉不必要的装饰和颜色
基于业务、基于场景
比如用户以处理订单为主，操作项建议放在第一列，方便用户操作。
如果用户以查看信息为主，操作项一般放在最后一列。
可以采用下拉框设计
1、行高=文字行高+上下间距
2、文字行高可以设定为字号的1.2~1.8倍，上下间距可以设定为字号的1~1.5倍；行高影响每行信息的易读性。
3、一般行高为32-56px
1、采用8px网格作为基础单位，来定义各组件和模块间距，因为目前主流桌面设备屏幕分辨率在垂直和水平方向基本都可以被8整除，使用8px比较普适。
2、最好列数在7±2
3、对齐方式：文本采用左对齐，金额及跟金额相关的百分比、操作项采用右对齐
一页最好能在一屏展示，避免用户来回上下滚动，比如固定为展示10条。
用户特殊使用需求，不适用以上规则，一页可能展示10条/20条，都可以。
作者：YOgire 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~模块化设计，简单地说就是将产品的某些要素组合在一起，构成一个具有特定功能的子系统，将这个子系统作为通用性的模块与其他产品要素进行多种组合，构成新的系统，产生多种不同功能或相同功能、不同性能的系列产品（定义内容来自百度百科）。
模块化设计思维最早可以追溯到从工业革命时期，工业革命之后制造业开始飞速发展，制造业能够飞速发展得益于生产效率的大幅提升。在设计产品时采用“模块化设计思维”，是提升生产效率的一个很重要的手法。
产品设计中对“模块化设计思维”的应用也是制造业现代化的一个很重要的标志和特点。到了互联网时代，“模块化设计思维”也被应用在了操作系统、app的开发过程中，也大大提升了软件工程师的开发效率。
“模块化设计思维”是一个思维方式或者说是一个设计手法，这个“手法”可以应用在很多领域。
我们日常生活中所用到的稍微复杂一点的产品，如飞机、汽车、家电、手机、操作系统等等，都是在以“模块化设计思维”为基础的设计手法中设计出来的。
“模块化设计思维”应用最彻底的行业当属「汽车制造业」了。从汽车要素的组件化、汽车架构的模块化到生产平台的模块化，可谓是应用的非常彻底。
例如：丰田汽车的「M20发动机」用在了凯美瑞、C-HR、威兰达、亚洲龙、RAV4荣放、奕泽这些车型上，在这里「M20发动机」就是一个“通用性的模块”经过与其他汽车要素进行不同的设计组合，就形成了不同的车型。
丰田汽车的「TNGA架构」也是“模块化设计思维”的产物。在TNGA构架下，汽车模块会达到高度的通用性，车辆零件的通用率可达到70%-80%，其中包括底盘悬架、发动机、变速箱等零件。
采用“模块化设计思维”设计出来的“模块”有两个显著的特点就是「独立」「通用」。
在设计时需要选择可以独立的内容来进行“模块化封装”。怎么理解「独立」呢？判断模块是否可以独立，可以组成的模块是否“可以进行单独设计、开发、调试”不依赖其他要素即可运转。
通用这个特点就比较容易理解了，就是该“模块”可以与其他要素进行多种组合，形成不同类型、不同功能的产品。
采用“模块化设计思维”来进行产品设计，有什么优势呢？
高内聚低耦合，是软件工程中的概念，是判断软件设计好坏的标准。目的是使程序模块的可重复使用性、移植性增强。通常程序结构中各模块的内聚程度越高，模块间的耦合程度就越低。
内聚是从功能角度来度量模块内的联系，表示模块内部间聚集、关联的程度。那么高内聚就是指要高度的聚集和关联，元素之间的关系简单、明了，运行稳定。一个好的内聚模块应当恰好只做一件事，高内聚具备可靠性、可重用性、可读性等优点。
耦合是对模块间关联程度的度量，也就是模块之间的依赖关系。低耦合度特性的模块能减少模块间的影响，防止对某一模块修改所引起的“牵一发动全身”的水波效应，保证整个系统的正常运行。
由于模块具有通用性特点，需要用到此功能模块时无需重复设计，可以直接使用或简单微调即可，减少了“重复造轮子”现象的发生。
这样一来可以降低生产设计的时间成本和财力成本，二来时可以很大程度的提升产品设计、生产制造的效率。
通过上述内容“模块化设计思维”的好处显而易见，那么作为设计师在系统设计中应该怎么应用呢？这里容易陷入一个误区就是为了模块化而模块化，模块化设计需要在工作中去积累、抽象出可以进行模块设计的内容。
首先一定要充分的了解整个系统，系统的业务属性是什么，系统的功能有哪些（可以使用脑图梳理出来），然后站在“上帝视角”去观察整个系统，将具有「独立」「通用」特点的内容抽离出来进行“模块化”。
下面从「交互」和「UI」的角度来看两个系统中比较常见的例子
下图为「手机验证码验证」交互流程图，「手机验证码校验」流程可以用在登录、实名认证、修改密码、查看修改重要信息等功能中，是一个常见的可“模块化”的内容。
下图为近期涉及的一个系统中的「搜索页面」，系统中有很多搜索场景，例如：地址搜索、店铺搜索、品牌搜索、人员搜索等。通过对功能和使用场景的分析，将「搜索页面」进行了模块化设计。
“模块化设计思维”是一种提高工作效率的设计方法，需要各位在日常设计中尝试着换一种角度来观察系统。也要充分的理解“模块化设计思维”的定义才能够用好它，它并不是一个万能的方法，只有用在合适的地方才能体现出其价值。
作者：群青被注册 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI 设计的必备条件。
网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI 设计师，始终画不好图标。
针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快的上手图标设计。
本文共分为以下5个部分：
1. 图标设计详解：先对图标有个整体的认识，了解图标总共有哪些类型和应用场景。
2. 工具图标设计：最常见的工具型图标的相关规范，以及对应的设计案例演示。
3. 装饰图标设计：近年来使用越来越广泛的视觉型图标设计认识，以及对应的讲解。
4. 启动图标设计：讲解启图标的相关规范，如何高效的进行设计。
5. 图标应用详解：介绍在一个UI项目中，要应用多少种图标规格，并如何设计出正确的图标
图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。
对于 UI 设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。
在当下最常见的扁平化设计风格中，界面的实际视觉组成只有 4 种元素，图片、文字、几何图形、图标。
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素，一涉及到这两件事，难度就直线上升了。
本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如下图中的 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好地设计图标？
这就涉及对图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了！就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行。有两个原因，第一就是，文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势！再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。
第二点， 就是关于视觉的观赏性上。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来总感觉太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。
既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。
可以先划分成三种大类：
• 工具图标
• 装饰图标
• 启动图标
下面，我们将为对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI 设计会创作的图标有更全面的认识。
1.1 工具图标
首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。
虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。
风格1：线性风格
线性图标，即图形是通过线条的描边轮廓勾勒出来的！多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。
下面我们把它们统一罗列出来。
风格2：面性风格
面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。
风格3：混合风格
当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下。
1.2 装饰图标
和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。
比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。
还有，就是国内的界面设计环境，会根据运营的设计需求进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。
扁平风格
扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也相对于普通图标有更丰富的细节与趣味性。
拟物风格
拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。
2.5D 风格
2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用 2.5D 会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。
炫彩渐变
这是一个拗口的原创名词，找不到更合适的，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。
使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。
实物贴图
最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要再后面掌握它的做法。
1.3 启动图标
最后，就要说说启动图标了！启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把 “LOGO嵌套进系统图标模版” 的图标。
除了必要的规范掌握以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。
文字形式
适用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。
图标形式
对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。
图形形式
图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。
插画形式
对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。
拟物形式
虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。
当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了！
前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI 设计师之间的区别也包含图标设计类型掌握的多寡。
所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。
Sketch/XD
这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。
虽然它们都包含路径、钢笔、布尔、等功能（Sketch 相对 XD 更完善一点点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。
所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。
可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
Adobe Photoshop
PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款 “位图软件”。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。
实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。
绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：
• 路径创建和调整
• 钢笔工具和锚点
• 路径图层
• 布尔运算
• 图层属性
虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。
PS：最近在准备一套 PS 教学，就会比较完整的讲解一遍这些功能和对应操作。
Adobe Illustrator
AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制黏贴到其它应用的画布中。
如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：
• 形状生成器
• 轮廓化描边
• 路径查找器
花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就可以为我们后续的学习提供良好的支持！
但是现在还不要迫不及待地打开软件，在实际上手操作绘制图标之前，我想先讲讲规范。
是的，现在还不到实操的时候，规范之于画图标，就好像音标之于学英语，都是基础中的基础，也都是大家最容易忽略的东西。
如果对规范没有一个清晰的认知，那也是无法独立画好一套图标的！希望读者千万不要跳过这部分的讲解直接去看演示了。
3.1 表意的准确性
在第一部分中，我们知道图标的主要作用之一就是作为文字的替代品，具有明确的寓意。比如看见一个放大镜，我们会当成那是搜索，看见钥匙或者锁，我们就会理解成是密码，比如下面这些图标，每一个指代的功能和寓意都是非常直白、清晰的。
表达的寓意清晰，是工具图标最基本的要求，否则它只会传递错误的信息，造成用户的困惑。
在常见的图标类型里，如通知、设置、用户、分享之类的图标，对于任何手机用户来说都没有认知和选择压力。但表意准确麻烦的地方在于，一些非常规的寓意，极难用图标表现出来，这才是我们使用工具图标的首要麻烦。
比如下方这些图标，如果我不加上文字信息，大家能理解它们是什么吗？
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507
那么，我们再把文字信息补充进去，是不是就会觉得图形挺贴合内容的。
在这种案例中，我们要关注的就是，面对这样不常见的内容，设计师是怎么把图形的创意和样式想出来的！如果自己遇到一样的问题怎么办？
所以，除了知道每个工具图标都要表意准确这样 “正确的废话” 以后，我们该看看如何通过合适的创意将图标样式确定出来。
一般抽象的图标，难点在于寓意信息是非实体的，所以我们很难直接构建对图形样式的联想，所以首先我们得想办法将抽象的内容 “实体化”。也就是说，我们可以先把这个词写到纸上，然后把和这个抽象信息相关的所有实体物写下来。
然后，我们可以挑选出某个合适的实物，以它作为原型开始绘制。如果对这些挑选出来的实物要以什么图形表现还是没概念，那就可以借助网上的图标素材网站，比如 iconfont、iconfinder 等，在搜索框中输入这些词语，通过别人的设计收获灵感。
如果本身拥有比较好的手绘基础或是平面基础，也可以直接通过对照片进行提炼的方式，设计出图形内容。
所以，在设计图标时符合表意准确的概念，需要设计师不断收集图形，并提升对词汇联想的能力。很多图标图形优秀的创意，就是在这些基础的积累之上逐渐形成的，而不是一撮而就。
3.2 图标的一致性
第二个规范，叫图标的一致性。即一个或一套图标中，应该保持一致的细节。首先看看下面的反面案例。
在上面的案例中，不同图标间有很大的割裂感，完全不像处于同一套设计体系之下，这就是缺乏一致性的表现。这也是新手在设计一整套图标最大的难点，要让所有图标保持视觉细节上的一致。
下面对工具图标要保持视觉一致性有哪些细节进行详细的说明。
类型一致
前面说过，工具图标有线性的、填充的类型，在正常的情况中，同一套图标应该在类型中保持相同，如果使用了线性图标那么后续就不要设计填充以及混合的类型。
风格一致
每一套图标都有自己的设计风格，不同风格在细节中都有不同的表现，需要让这些风格特征保持高度的统一，看看下面这些案例。
第一，为图标添加缺口的设计风格，我们要保证这个缺口的大小是一致的，并且每一个图标中有且只有一个缺口，而不是靠感觉随意添加。
第二，在设计一套偏圆润可爱的设计风格中，外轮廓使用了较大的圆角，那么我们尽可能保证圆角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。
第三，采用了填充色偏移的设计风格中，首先要保证填充色的一致，并且偏移的距离和方向也要保持固定的规律，不能随喜好任意制定。
透视一致
透视关系是在平面中对物体空间性质的表现方式，当我们应用了透视时，物体就有了一定的 “立体感”。
透视的表现不是绘制图标时必须使用的风格，但是如果我们在图标中应用了透视，就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。
粗细一致
在图标中我们会应用到矩形线段或是描边，我们要尽可能保证它们的粗细是一致的。
比如，在线性的设计中，路径的描边尺寸要保持一致，不能这个图标用 2pt，那个图标用 1pt。
在填充图标中，我们会在一个矩形或是圆形中增加矩形的镂空，比如下图的几个图标，在这种情况下也要保证它们的粗细是一致的，而不是各不相同。
大小一致
大小一致，就是让图标的视觉大小保持一致，而不是它们字面上的长宽属性保持一致。
因为这是一个比较复杂的知识点，需要我们对几何图形的视觉差有比较完整的认识，我会在下一部分做出介绍。这些和一致性有关的特征，是一套图标看起来专业、有整体感的必要条件。但是，在真实的设计场景中需要灵活变通。
如果有一些特定的图标，在保证了一致性的所有要求后却极难被人理解，且找不到更好的设计方式，就可以差别对待。比如在一套线性的图标中，播放、快进等图标往往都是填充类型的，这并不会造成视觉或是使用上的困扰。
3.3 几何图形的视觉差
几何图形的视觉差，是对于工具图标来说最重要的细节，在上一节图标一致性中已经提及，它也是平面基础理论中不可忽视的内容，这个理论要解决一个核心的问题，即
怎么让不同的图形看上去一样大？
可能有的读者看到这里会轻蔑一笑，这有什么难的，通过软件的参考线或者属性设置，把它们的长宽设置成一样不就完事了，比如下图这样。
嗯，画起来轻轻松松，参数上完美无缺。但等等，怎么看上去这些图形大小有点不一样，为什么正方形看起来这么大，三角形看起来这么小？
恭喜你们，发现了这个问题的根源，不同几何图形带给我们的视觉大小是不同的。而要解决这样的问题，就要对它们的尺寸做出额外的调整，比如下图这样。
适当调整完圆形和三角形以后，是不是觉得大小的感觉一致了？这就要牵扯一个更基础的视觉规律，占据面积越大的图形，给视觉的感受就越大，所以给我们感受越小的元素，就要放的越大。
并且，这个问题在一个图形的内部也会产生影响，比如知乎 APP 下面的点赞、反对按钮，都有三角形图标对吧，但图形其实对于外部举行是非居中的，我们看看下面的演示。
如果一个图形其中一部分面积远大于另一部分，那么就会让这个图形的重心产生偏移，必须要往较小的部分的方向移动才能产生平衡。
所以，在设计一整套的应用中，如果没有对这个理论的理解，只定义一个矩形出来，把所有图形的尺寸于矩形对齐，那么最终看到的图标效果一定是极度不平衡的。
3.4 工具图标的栅格
其实，针对图标的规范，新人第一个想到的应该就是参考线了，也就是所谓的栅格模版。但之所以放第二个，是因为工具图标的栅格规范，是根据几何的视觉差特性衍生出来的，而不像后面会提到的应用图标由官方提供出来。
我们先简单看看，常见的工具图标栅格是什么样的。
里面包含了正方形、长方形、圆形对不对，那我们把它们分别罗列出来看看。是不是就发现这些图形的视觉尺寸是非常接近的？然后再通过这样的尺寸设计对应的图形，也就看起来都一样大。
所以，应用图标的栅格系统对于图标的设计来说，是一个用来应对几何图形视觉差的“参照物”。
之所以要说参照物，原因在于，一套图标，不会只存在这几种图形的样式，还有很多千奇百怪的形状，但大体上我们可以识别出来它的类似轮廓或者重心方向，于是就可以通过参照图形来判断我们设计出来的图形尺寸是否符合标准。
如果设计图形和参照图形的类似，那么尺寸就不能大于参照图形，如果设计图形的宽大于参照图，那么高就要小于参照图，反之亦然。如果图形的重心有偏移，那就要往重心偏移的反方向移动，比如搜索按钮，Wifi 图标等。
最后，说说栅格系统的画法，和大家想象的不一样，想要画一套图标，栅格系统是我们自己画出来的，不是到网上下载下来的，所以怎么画也是这个知识的重点。
如何绘制图标栅格系统
如果我们定义一套 28pt（如果看不懂可以当成 28px） 的图标，那么我们首先要画一个 28pt 的正方形，然后确定一个 2-4pt 的内边距，正所谓四边留一线，日后好相见。
然后就要开始绘制其中正方形和圆形，正方形通常在整个图标尺寸 1/2 的比例，可以使用 14 或 16 的偶数 （为了可以居中）。然后再确定圆形的尺寸，圆肯定比正方形大 2-4 pt，于是就得到下方的图形。
之后，我们再确定横竖长方形的尺寸，可以直接顶到内边距的边缘。它的尺寸不是通过数值计算的，而是要我们先画出来，把它们和前面的圆、正方形置于一条水平线上，调整出一个平衡的视觉尺寸，再和并进栅格系统中，就完成了栅格系统的绘制，如下图的案例。
这一步也旨在检查我们的参考线系统是否在基础结构上经得起考验，是非常关键的一步。因为不同尺寸的图标中，参考线系统都是有区别的，我们不能直接按一个固定的比例来设置，要根据实际场景做判断。
当然，为了进一步方便大家的学习，我特意准备了一套现成的栅格素材，包含 16、24、28、32、36、48 等六个尺寸。大家可以进入我的主页关注公众号并回复 “图标素材” 获取。
3.5 像素对齐
在栅格的绘制中，细心的读者肯定发现了几个关键字，“对齐”、“偶数”，这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一，可能有的同学不太了解，不过没关系，直接看下面的内容即可。
我们都知道像素是屏幕显示中的最小单位，一个像素只能显示一种颜色。小时候玩过的 GBA、FC 游戏机，都是通过像素画的形式呈现，人物锯齿是无法避免的。
而随着技术发展，像素密度是降低了，但如果依旧是按过去这种一个萝卜一个坑的方式显示内容，那锯齿感无论如何是无法消除的。于是，开发了次像素渲染（Subpixel Rendering）的技术。一个在显示器中让我们觉得平滑的圆，一直放大，就可以发现它的周边充满了饱和度较低的其它方块色彩。
这项技术，让像素可以用特有的方式来显示非完整的色块，即尽可能还原我们对元素定义的小数点。但为什么我们还要提这个概念呢？
因为工具的图标太小了，而且 UI 的元素对精细和准确度的要求都不低，如果我们没有尽可能满足像素对齐的要求，那么就可能导致元素边缘的模糊。
所以要满足像素对齐的要求，就要符合元素本身的尺寸为整数、描边为整数、XY 轴坐标为整数的特性。
AI 中的像素对齐设置
在 AI 中，我们可以通过两个设定来查看和保证像素对齐，即网格的设置显示，以及对齐到点的设置。
像素的对齐主要表现在横线和竖线上，虽然现在手机显示精度越来越高，但并不意味着我们可以无视像素对齐的规律！在线性图标中，类似对于 1pt 或者 2pt 描边的应用，觉得不是太细就是太粗，可以用 1.5pt 的数值（1.5 pt 在 2x 中就是 3px），但切记不要出现类似 1.23、2.16、3.46 这种小数。
像素对齐是一个专业 UI 设计师对于极致追求的表现之一，是每一个一线大厂 UI 设计师的基本职能，所以，想要冲刺更高的段位，就不要忽视这个规范的使用。
这是图标系列文章的第一篇，信息量不算少！所以我们在结尾再总结一次，方便大家记忆。
• 知识点1：在 UI 的界面中，图标的主要作用是用来高效的传递信息，以及起到美化界面的作用。
• 知识点2：UI 会涉及的图标类型主要有三种，工具图标、装饰图标、应用图标。
• 知识点3：工具图标，是界面中用来传递信息的图形符号，主要包含线性、面性、混合三种设计风格。
• 知识点4：装饰图标，是界面中用来提升视觉体验的图形，主要包含扁平、拟物、2.5D、炫彩渐变等风格。
• 知识点5：应用图标，是用来启动应用的图标，主要包含文字、图标、图形、插画、拟物等设计形式。
• 知识点6：学习绘制图标，优先学习 PS、AI 的路径相关功能，而不是 Sketch 和 XD。
• 知识点7：图标首先要表意准确，能被用户识别并契合想要表达的寓意。
• 知识点8：设计整套图标的时候要符合一致性原则，包含类型、风格、粗细、透视、大小等特征。
• 知识点9：不同的几何图形会打给我们不同的大小视感，不能只看元素的参数。
• 知识点10：我们根据视觉差的方式定义出栅格系统，作为图标尺寸设定的重要参考。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
表格已经是现代电子计算机系统中重要的组成部分之一，从小学开始，我们就已经在电脑课上学习如何使用 Office Excel 来制作电子表格。
那么我们为什么需要使用表格呢？因为我们有记录和查询数据的需求。
在任何商业活动中，都会产生大量的数据信息，虽然我们发明了 SQL、Mysql 等数据库语言记录数据，但最原始的数据记录是没有可读性的。
所以，为了让数据可以更好的展示，我们就必须借助可视性更强的图形工具，即电子表格。通过 X、Y 轴构建的网格系统，将数据有序、清晰得罗列出来。
表格的重要性就体现在企业日常工作中对这些数据进行管理的需求和频次上。
例如为电商 APP 开发了一套管理系统，那么电商运营每天的工作，都要绕着其中销售、物流、流水等重要模块的数据打转，也就是围绕着表格展开工作。
对于多数管理系统而言，数据查询、管理都是非常重要且高频使用的功能，所以常规项目中会包含大量的表格页面。
甚至，有的中小型项目的所有导航一级页面，只有表格，而不存在其它页面形式。所以，表格的优劣对用户工作效率和平台体验可以产生决定性的影响。
而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。
所以，这也是 B 端设计师的价值之一。一个优秀的 B 端设计师势必投入大量精力来提升对表格的认识和表格设计能力。
表格虽然细节设计上千差万别，但在表现形式和阅读顺序上却是基本一致的。
常规的表格必然包含表头栏、列表、翻页器三个部分，根据需求的不同，可能还会增加搜索栏、多选栏、操作栏等常见模块。
主要是用来进行简单的数据搜索和筛选的，当搜索项较少的时候，就可以将搜索结合到表格组件内。而搜索项较多时，则会把它们独立成一个筛选模块到表格组件的上方。
每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型数量。
通常，表头的设计会和下方列表设计有一定的区分，表头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗来增强对比。
列表则是纵向排列数据对象的模块。每个数据对象占一行，行的高度根据内容来制定。横向列表高度和纵向表头宽度重叠的区域称为单元格，每个单元格展示表头对应的数据明细。
常规 B 端项目表格都会限制列表一次展示的行数，极少使用无限滚动加载的模式。因为当数据包含成千上万条时会对本地、服务器性能和交互方式带来一系列的负面影响。
如果数据对象支持多选和批量操作，则我们会在第一列中添加选框，并将选中后的可操作选项放进操作栏中。
翻页器是切换列表页面的控件。通常大数据量的列表包含上千页，所以翻页器只会显示开头几页和最后一页，省略中间的，并增加适合快速跳转的功能。
除了表头和列表内容外，其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架，即包含的模块和对应分布位置，再展开后续的细节设计。
B 端项目支持响应式是今天行业的普遍需求，也就是页面内容随着浏览器视图宽度变更而变更。
不同页面类型的响应式逻辑各不相同，而表格是其中逻辑最复杂，也最难理解的一种。
表格响应式规则通常在确定好框架以后制定，优于视觉、交互设计，因为它对视觉和交互产生的影响非常大，是前置条件而不是通过设计稿逆推出来的。
- 表格的总宽响应
- 表格的最小宽度
- 单元格的响应逻辑
- 内容的响应逻辑
上方逻辑中表格可以无限延长，但它却不能无限的缩短，因为你不可能做一个只有 10px，20px 宽的表格。
过窄的表格不仅支持不了内容的正常显示，也毫无任何使用体验，所以我们要为表格确定一个最小的宽度。即浏览器视图即使比这个宽度更小，表格也不会再缩小了。
如果不了解栅格的段落规则，也可以 “凭感觉” 定，最小表格宽度通常在 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 端控件中的气泡框就是用来做提示的控件，但它只是手段。为什么需要悬浮提示，提示什么内容是我们需要考虑的。
对于及其复杂的表格来说，往往是没办法支持所有数据都完整展示的，我们会在使用省略号对它进行截断。但截断不意味着用户完全不需要在表格查看到完整的信息。
所以，就可以通过气泡的做法，将信息呈现给用户。而呈现过程中，尽量确保鼠标可以移动到气泡上复制里面的文字内容（和全部复制不一样），而不是鼠标移走就直接关闭消失。
以上就是关于表格设计的全部说明了，作为 B 端设计最重要的模块之一，希望大家可以学以致用。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
● 京东金融 App 首页三大改版
3.x 版本到马上上线的 4.x 版本，公司的战略方向以及产品运营方向都在不断的变化（有接触过京东金融 App 的人都知道视觉变化很大）。作为公司的移动端产品，既要满足用户体验和需求，又要满足内部业务的扩展。所以我们要不断优化各种布局和细节，把用户体验和内部需求做到最好。
3.X 版本是我接首页优化的第一个版本。改版期间我们经历了很多，除了本身业务以外，更重要的是我们发现之前首页有很多问题。其实优化产品最基本的方法就是发现了一些问题，然后去解决这些问题。问题可能是产品问题、业务需求扩展、运营需求满足，最后才是体验和视觉。这些问题能得到解决产品就能得到优化。
以账户为中心是当时产品的主要方向，整体都在强调财富管理。所以之前的界面在账户为主和业务扩展上都存在很大问题，一是业务拓展存在局限性，二是账户感不强。
经过一大堆方案和设计图的轰炸，最终确定了大的方向，突出理财金额和业务和信贷业务。把一些数字突出放大，让用户打开产品既能看到自己想看到的东西。账户感的体现我们把数字和一些文字说明当成首屏最主要的东西，少一些运营，少一些 banner 。就像是在银行打出的纸质账户信息，上面很少会出现广告。
▲ 还是之前的方法，经过上线一段的时间去发现问题。随着业务和功能的增多，原来的布局已支撑不了公司方向的支持这是之一。之前的视觉也有一些缺陷，进入 App 整体看上去没有重点的，纯白色很干净但是也没有能跳出来吸引眼球的东西，也不能把重要业务区别与其他业务。
这次增加了一些产品本身频次的功能，如扫一扫、签到、每天领券等。还有怎么样能突出重点业务的展示，让用户在视觉局部上有所重点。业务的扩展性通过左右横滑来实现。
▲ 怎么样能把多量的业务，重新布局到有限的界面里，而且不能降低用户的使用体验，是我们这一版要解决的问题。就是化繁为简。
这次我们把业务场景划分成「赚钱」「花钱」「借钱」，相对应是「理财」「白条购物」「现金借贷」。使用三个Tab 签和最简单的布局方式来排版。用户理解相对也会变的容易，界面整体看起来也简单明了。
首页的改版看似简单，其实背后有很多的付出。不断的优化讨论、不断的视觉方案，我们不断在寻找新的突破，希望能让各个方面都达到最大效能。
● 理财日历
「理财日历」是整合用户关于所有金融业务的，按照时间线索智能提醒和自动完成的一款产品。
· 产品目标：帮助用户记录金融事件和跟钱相关的事件，例如理财到期、白条还款事件、生活缴费事件等等。一条 时间线可以把用户所有的事件联系起来的。让用户把时间用在更重要的事情上。
· 产品关键性词语：时间、自动记录、提醒、设置自动完成
当我们进入 App 时，需要进行很多不同的操作，进入到不同的业务线页面才能完成我想要做的事情。这时整合业务聚合内容就变的很重要。需要有一个平台把跟用户强相关的金融事项和其他事项整合，这样就不用花费很多时间来处理各种事件。
日历是一个强时间线的用户固有思想形态，我们需要把除了基础的时间、记录事件和日常提醒功能做好外，还要让用户习惯这里面有跟我理财相关的事项。针对使用产品用户的特征，在视觉布局上不能难以接受，日历主要的时间、每天事项、后续事项查询和增加事项都要合理排布。
为了增加日历的整体氛围，除了时间的排布，我们为每一个月和每一个节气增加了插画。每一条信息的分类都用 icon 表示，突出强弱，增加氛围。
日历添加事项和设置页面，以进度的感觉让用户去更好的完成事项的设置。推荐事项也是用户最常用的、最容易跟时间所对应的事项。
日历的分享模块是很重要的一个细节，我们希望它能更好的去传达这是一款有温度的产品。它也是对外发声的一个利器。
怎么样才能激发用户分享的欲望呢，用户打开界面的分享动机是什么？我们知道用户分享有几点：有用的、有趣的、相互比较、用户认同等等。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：程大专 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝 http://www.lanlanwork.com