5W1H 这种分析方法，是比较宏观的分析工具。它的应用是针对整个项目的开展来进行，帮助我们围绕产品需求有计划有逻辑性的制定解决方案。
在这个框架下，就方便我们决定要引入哪些其它分析方法或者理论内容，例如 SWOT、KANO、AB TEST、RMF 等工具。
也因为我们对整体的认识更清晰，决定了我们应用理论和其它分析模型的精细度、细节方法。让设计师在项目处理过程中可以更灵活，更专业，更游刃有余。
很多网站仍然在使用老旧的页面设计，比如国内一些企业官网，万年不变的相类似的模板，外国的则是hero页面，带CTA按钮，三栏式的布局。这些设计不能说是不好的设计，很实用，用户能够预测展示的内容，也容易找到需要的内容。但是正因为可预测，用户没有新鲜感，没有期待，所以我们找了一些不仅打破常规，也依然有良好用户体验的网页设计。
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机app/安卓ui设计、软件界面设计、网站设计，用户研究、交互设计服务。
接下来是精彩的UI设计赏析
北京蓝蓝设计团队来自清华美院，工作多年，行业经验丰富，专业性很强。我们是热爱设计，设计不仅是我们的专业，我们的职业，还是我们的爱好。每一个蓝蓝设计的设计师都希望自己的设计越来越好，以高标准，敬业用心的态度、专业的技艺得到客户的认可。为此，我们不惜代价，愿意额外的付出时间、精力，去学习、去尝试、去研究、去探索。工作卖力，玩的开心。做好卓越的界面设计，成为这个领域的资深专家，帮助客户取得成功，是我们的目标。
蓝蓝设计秉承设计优秀，不断超越的理念，诚信敬业、专业耐心的工作作风，一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合。10余年专注努力，300+案例磨练。我们在ui创意设计，用户体验与交互设计，各种类型软件界面设计，国际化标准和流行趋势，进行过不断的学习和实践。蓝蓝设计提供的是可以信赖的ui设计服务，我们内部有一套管理要求，比如去客户现场每周一次的检视和沟通、内部提案会议、每天下班前的整理反馈成果发邮件、随时沟通的qq、电话，阶段性的汇报和进度记录整理。多劳多得的奖励机制，客户满意度评价奖励机制，鼓励大家用心、平和、耐心、勤奋、创新的做事.
（以上图片均来源于网络）
（精美流程图设计）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
ui界面设计之网站设计案例欣赏(一)
2020又过大半了，去年这个时候我们研究了目前国际大厂在使用的一些趋势-晶白，点线底纹，光感，那么到了今天又有哪些新的趋势映入眼帘呢，你还在使用那套旧的设计风格来做设计，今天带大家来看看今年哪些性格值得我们学习呢？
什么是液态视觉
参加过去年UCAN的同学应该对于这个水的主KV印象深刻，当时是以水，宇宙概念做的整个视觉。整个视觉最让人深刻的莫过于这个画龙点睛的水滴液态效果。
整个水滴流动感，运用到整个KV各个地方，背景还有底纹等等，印象深刻。
在2020年，液态视觉毫无疑问是当前最受关注的视觉风格之一。这种效果看起来像流动的各种液体，在设计中不仅可以很强的吸引人眼球，同时无论是作为背景元素，还是装饰都让人过目难忘。
液态视觉除了视觉感官层面会让你记忆深刻，它的整个视觉概念也可以讲很多故事，比如你可以说整个设计概念，是围绕”水“来设计，水是流动的，水也是生命之泉，能赋予很多产品很强的概念，所以也就是为什么今年会被很多大型KV所运用的原因。同时这种流动感也可以比如宇宙万物，生命不息，也可以运用在很多大型的科技发布会上。
所以作为设计，今年我们势必要去关注这个趋势和理念，尝试如何去运用到我们产品中去。
液态视觉的情感感受
1、生命力
使用过siri的朋友对这个效果应该不会陌生，液态视觉一个非常直观的感受就是具有生命力，可以随机的发生各种各样的变化，正是如此，被很多语音产品在页面中使用。
在很多科技类产品，智能功能这块都会看见这种风格的运用，所以假如你今天需要设计一款智能，很未来的产品，这种液态风格设计一定需要去关注。
比如这款科技类产品，在启动页面时候，就直接跳出一个类似水滴的机器人，用智能语音和你对话，然后随着人机交互，它会变成不同的形态。
2.流动运动感
液态视觉另外一个特点就是具有流动感运动感，在很多智能家居中被广泛运用，比如图中这个智能水壶页面设计，随着水温度的变化，颜色和形状都会发生变化。
在很多发布会中，营造一些比较大气的感觉，或者宇宙场景时候经常运营到这个风格，在空间上和视觉上都有方向和动态效果。
这组海报设计，就非常有方向感和宇宙未来感，整个图形都朝着一个方向走向，这也是其他图形元素很难表达的风格特点。
GlebKuznetsov的作品中这个动态效果，随着液态效果的流动，整个画面呈现出非常有程序的水流动效果。
3.科幻未来感
液态效果另外一个视觉感受就是未来感和科技感，因为它造型的变化，抽象图形的表达，给人很神秘，抽象的视觉感受。
如上图，通过将流动的图形，进行旋转，形成虫洞感觉，不由自主想起宇宙和未来感。
液态视觉的技法特点
1.质感柔软呈现透明
液态风格特点虽然视觉冲击力强，但是视觉表现上，柔软和透明是非常大的一个特点。整体的材质比较轻，加上透明效果运用，整体会非常的轻盈。通常人工智能页面场景运用比较多。
2.色彩丰富大胆渐变
液态风格另外一个特点是什么。色彩丰富，大胆的渐变色，形成很强的视觉冲击力。
整个色彩类似彩虹，或者霓虹灯反射效果，这也是它在设计中能吸引人很重要的一个原因。
Kikk的官网设计，和Ucan有些神似，也是采用的的一个液态的玻璃球，配色大胆的渐变在视觉表现和冲击力让都让人印象深刻。
3.塑料质感运用
塑料质感：液态视觉视觉质感丰富，质感也很大胆，比较常用的有塑料质感，配合灯光，如上图就是运用是塑料质感，配色彩色的渐变，非常梦幻。
这种塑料质感不止是在设计中用到，在时尚摄影中也被经常使用。
4.玻璃质感运用
玻璃质感的运用，一般会运用玻璃这种效果，出现在画面中，随着玻璃的折射效果进行变换，玻璃的质感和平面这种强反差的设计，让你过目不忘。
玻璃质感的折射效果，结合后面文字的透出，很好的将这种液态融合效果运用到了。
在越来越多的国外设计中，都经常看见这种玻璃液态图形和平面设计的融合。
5.水的质感运用
水的质感，毋庸置疑，但是这个水的质感一般是运用气泡的表现形式，再结合折射效果，整个视觉水泡就是核心视觉元素。
Ucan的主视觉效果，就是采用类似的手法，这类设计很巧妙，同时简约又不失大气。
6.点线面结合运用
除了塑料，扁平质感以外，点线的运用在液态设计中非常多，比如上图的OPPO和colo的海报设计，就是运用了流动变化的线条，让整个设计呈现出简约高科技之美。
用线成为整个设计主体，通过流动的线勾勒出一幅场景，在科技类产品中运用较多。支付宝很多理财产品都曾经运用过类似风格。
在界面中运用
天猫双11的很多场景中，其实都有用到液态设计元素，比如双11的潮流盛典舞台设计，就是运用的液态当元素，整个画面非常潮。
在AI人工智能的产品设计中，液态设计经常被广泛使用，无论是智能语音设计，还是说智能家居是使用，都能看见它运用的影子。
这组机器学习的网站设计，通过液态设计，讲玻璃元素设计成动态的方式非常的逼真。整个设计给人空间和未来感展现。
这个液态网站的设计，大胆的渐变，流动的液态效果，让整个页面充满了时尚感。
液态设计除了一些抽象元素，一些3D的元素也可以使用，整体呈现出来的效果，也非常的有吸引力。当然得结合设计整体来平衡。
目前来说液态设计在界面中运用，一般在科技网站，AI或者机器人场景比较多，一般液态会呈现多种变化趋势。
在平面中运用
在平面设计中案例比较多，目前很多商业设计中都运用到了一个液态的图形配合一些几何图形，干净利索的文字都能搭配出不错的视觉效果。
这组海报，看似简约但是充满了设计感，除了液态的核心元素，字体运用，板式空间的利用都体现出设计师极高的功底。
在韩国很多艺术展的设计中，抽象的几何图片配合液态的动态变化。整体非常强的视觉冲击。
如果你今天做设计，找不到感觉了，不如放弃下你之前的设计套路。尝试一下新的设计思路，说不定可以打开不一样的视角。
在品牌中运用
今天除了页面是动态的，在很多时候品牌LOGO也是动态的液态的，会变化，如上图这个logo他会随着不同的方向去旋转变化。LOGO一定要是静态的么？不可以是动态的？甚至液态么，我觉得一定有可能会出现液态的图形。
电信OI公司的logo就是液态呈现的，他的变化有几十种展示方式。
整个图形以明亮，形状变化的“气泡”为液态容器，可根据客户的声音改变LOGO的颜色和形状。
或许在未来，液态的LOGO会成为一种新的主流，只是作为新时代的设计师，我们必须要去了解和关注。
最后
趋势是变化的，唯一比变的就是变化，作为处在互联网中的设计师，我们身边的一切都是变化的，身边的人，身边的事儿，甚至是商业模式都在变化，学会拥抱变化， 并且让自己持续的成长和变的更好，是每个设计师都要学习的。
文章来源：站酷 作者：我们的设计日记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
扁平化网页设计的表现大多体现在配色、字体以及布局排版方面，这三样结合得当都能制作出漂亮的网站。在国内很多企业网站的布局架构几乎是一样的，最多就是LOGO和一点颜色变化，看不出什么特色和创新。
作为设计师，应该多花点心思在创新上，比如网页上的布局，其实它是可以变化多样的，正如今天为大家分享yi xie布局排版好看的网页设计作品，大家可以参考这些布局的设计，从中获得一些灵感。
（以上图片均来源于网络）
（精美流程图设计）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
ui界面设计之网站设计案例欣赏(一)
网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。
BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，
接下来为大家分享一下我收集到的案例：
（图片均来源于网络）
点击查看更多UI/UE设计案例⬇️⬇️⬇️
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。
BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，
接下来为大家分享一下我收集到的案例：
（图片均来源于网络）
点击查看更多UI/UE设计案例⬇️⬇️⬇️
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
每天，世界上有40亿人在城市中穿行，这个不断增长变化的群体占据了世界人口的一半还多。了解人们如何出行以及出行的演变对于改善我们的城市、环境和数十亿人的生活至关重要。我们创建了 Uber Movement，来帮助大家增进理解。
视频地址：https://youtu.be/bszvEIMVsIc （需翻墙）
目前，Uber已在全球700多个城市提供服务，所有出行数据不仅能帮助我们提高服务质量，也有可能帮助到城市规划师，以及那些渴望提高城市建设水平的人。Uber Movement允许用户以多种方式查看数据：用户可以查看某个日期某次出行的平均耗时，也可以查看某个区域不同日期范围内的平均耗时，或者可以对比同一个区域不同的两个行程的耗时。
图1：从华盛顿市中心出发到各地所需的出行时长
图1中的截图展现了从华盛顿市中心到达城市其他区域的平均耗时（在2016年3月16日铁路运输因维修而暂停服务）。截图a中显示了晚高峰的耗时情况，截图b显示了两周前铁路运输未中止的耗时情况，截图c则比对了两个时段下的数据，指示出铁路服务暂停对路面交通带来的严重影响。如图示，在上述情况下，晚高峰时段从1400 K St NE区到1500 Kearny St NE区的平均出行时间增加了67.8％。
对于需考虑在哪里新增公交线路的公共交通机构，以及那些判别什么时候主干道需要进行道路养护的城市机构，都能够通过这些数据了解到什么时候减少车道会对交通的影响最小，应向驾驶者提供哪些替代路线。
为了让这些数据有价值，必须让它们有使用价值。这就需要数据可视化的加持了。作为负责 Uber Movement 的产品设计师，我需要确保我们分享的数据是尽可能清晰易懂的。
我们遇到了一个有趣的问题：如何展示两个不同却又有关联的可视化元素。「时长热力图」展现了在一个特定的日期（例如，2016年1月11日星期一下午）下，从任一起始点到某个位置的耗时（以分钟为单位）；也可以是一个跨度长达几个月（例如，2016年3月至5月的工作日早晨）的平均耗时。这个热力图使用了相邻色，基于相同的颜色来调整色调由亮至暗（如下图1所示，浅蓝色至深蓝色）。
「比对热力图」能够让用户对比相同路线不同时段下的平均耗时。这里需要凸显信息的对比度，哪一个时段下的耗时更少，少多少？对于该热力图，我们使用了对比色（如图2）来表现数据由0至两极（快与慢）。如果差值为零，则表示两种情况下的耗时相同。我们企图通过两个对比的颜色尽可能的凸显差异。
我们的用户会在这两种热力图中连续反复切换，所以我们需要将这两种模式从视觉上明确区分出来。
图2：早期设计的5阶色（左侧单位为绝对耗时，右侧单位为相对耗时比）
在早期的设计中（如图2），5阶相邻色（由淡绿色至蓝色）被用来表现路程的绝对耗时，而5阶对比色（由绿至淡黄再到红色）则用来表现两种条件的对比。
初期尝试使用五个颜色梯度，但在可用性测试中发现地图的色彩辨识度低（见下图3）。主要有以下几个问题：
显而易见，可用性测试的参与者难以从地图判断出耗时，特别是当地图缩放聚焦在市中心时，也难以区分两种模式（耗时热力图/对比热力图），见图3。
图3：西雅图的出现时长
图3，以早期的设计效果（5阶相邻色）查看从西雅图市中心至其他区域的平均耗时，截图a 展现了西雅图所有区域的耗费时长，颜色让区块看起来“糊在一块儿”。截图b则展现了缩放聚焦至市中心区域时的效果，难以区分不同区域。
通过多步的探索实验，我将这个复杂的设计难题拆解为几个不同的小挑战，并验证不同的方案，最终获得一个色彩系统达到易读性最理想的热图效果。
1.通过相邻色和对比色两个样本有效区分耗时热力图和对比热力图
由于同时应用相邻色与对比色，所用的配色就必须是“四色系”配色方案以明确区分。（译注：tetradic color 的翻译可能不合适，根据定义，其为一种大胆的配色方案，四种颜色对立均等地分布在色轮的四个方向上。）我使用了 Uber Movement 的品牌色（#2473BD）作为相邻色的基准色，然后使用 Paletton.com 列举了几组“四色系”配色方案，将四种颜色分配为两对互补组合。
图4：为实验准备的色阶方案
2.根据时长间隔等比或是梯度增加色组的色彩阶层数
早期设计从5阶色彩范围开始（如图2、3），两种模式的热图都产生了一种“糊在一块儿”的渐变效果。我们希望这个系统可以满足不同体量的城市，从市中心到外围区域的平均耗时跨度从30分钟到1.5小时不等。仅使用5种颜色来表现0至1.5小时，显然不足以让用户有效辩识地图上的时间跨度。
我实验性地将色彩范围的阶层从5增加到9，11，13。时间间隔分别以等比增加与梯度增加罗列（梯度增加以30分钟为总时长）。
表1：5、9、11、13色阶方案（左侧为等距增加，右侧为非等距增加）
之所以选择了梯度增加，是因为根据我们与城市规划者的沟通，了解到他们是基于「交通分析区（TAZ）」这种交通规划模型来进行分析的，它将每个区域以人口密度划分。城市区域的人口密度相比郊区会高很多。基于市区人口密度高，在市区对交通状况进行定义时，以每5分钟为间隔相比在郊区更有效。
颜色组通过 Chroma.js颜色助手计算生成。通过单颜色的变体给予一种连续性（见图5）。图中左侧（方案1）使用了单色系，右侧（方案2）则通过不同色调的颜色组合增加色组内的对比度。
图5：用于实验的2个色阶（左侧为淡色系，右侧为多色系）
3.尝试通过提升对比度去除掉区间的渐变效果
我将不同的颜色方案放到测试环境中去看看实际效果。为了去除渐变效果，在不受时间值和透明度影响的情况下，使用了彩色比例尺上的离散色值（见图6右侧的效果）。这样处在相同色彩尺度区间的区域看起来合并了，能够很好地辨别出区域之间耗时的异同。
图6：采用离散色值消除渐变色。（从左侧变为右侧）
早期的配色方案是基于「耗时」调整的色值，并且使用了20%的透明度，由此显示出一种「渐变效果」，导致邻近区域过于相近，用户难以根据颜色判断数值差异。新的配色方案则取消了以上两点，这使得相同时间的区域合并，清晰的色带使其更易读。
我还开发了个程序用来计算邻近色组的对比度（见下方表2），方案2配色中的9阶色彩范围表现出最佳的平均对比度，其次是11阶。考虑到平均路程耗费时长在不同城市会有较大的差异，方案2中的11阶色彩能提供最好的扩展性与可读性。与早期方案相比，新方案的对比度提高了30%。
从上面的图表可以看到，方案2配色有更高的对比度。其中，颜色阶次越少，对比度也越高。
4.在测试环境中对比颜色方案
基于以上的结果，我将方案1（单色系）排除了。我们将方案2放到测试环境中查看了两种间隔取色策略的效果。（译注：这里的两种策略指的是上面图表1呈现的两种取色方案。一种是例如每10分钟递进一个色阶，等分；另一种则是会变化，例如前30分钟每5分钟递进一个色阶，超过30分钟则每10分钟递进一个色阶。）
表2：邻近色组的对比度计算
下图7展示了波士顿城整体区域的热图效果，让我们再看看聚焦到市中心的效果如何。
图7：波士顿城整体区域的热图效果
图8更进一步地确认了「变化时间间隔取色」提供了更高的对比度。
图8：「变化时间间隔取色」后的效果
5.对配色色阶进行微调
在这一系列的实验之后，才明确了这个方案（方案2中的11阶色彩）属最佳效果。能够很好地满足视图中大跨度时间差的呈现。不论是城市的整体纵览或是聚焦在市中心区域，都能提供最佳的对比度。
我们的内部团队对实验进行了评审和测试，并最终敲定了色彩范围（见图表1），结果将在近期发布。
随着越来越多的用户在 Uber Movement 中探索他们的城市，我们也在不断的学习与迭代，让数据更有效地为大家所用。
数据可视化的最终目的还是信息沟通。当我们试图清晰地传达事实时，创作物的美学不是附属品，而是一种内在价值。美感不只是粉饰。当数据可视化被合理地创造时，它因效用而美。
我们以一种微小的方式，通过不断试错与探索，试图让人们以一种全新的视角看看这个世界。它是有效的，也即是美的。
文章来源：UXRen 作者：Dawei Huang
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在B端产品中，数据主要通过表格的形式展现。本文是我从实际工作出发，结合项目和过去经验对于复杂业务类的表格设计的一次总结。
表格（Table），又称为表，是用来收集、整理、组织、分析数据的二维矩阵。它既是一种可视化交流模式，又是一种组织整理数据的手段。
通常表格的组成元素以及相关元素会有多个部分，笔者根据自己设计表格的工作经验将表格概括为容器、筛选区、功能性按钮、表头、表体以及底栏等六个部分，其各个部分包含的相关元素如图所示。
容器：包含表格的所有内容。
筛选区：包括搜索和条件筛选。方便用户快速查询定位数据，一般位于表格上方。
功能性按钮：比如常见的[新增]按钮和各种批量操作按钮。
表头：说明数据的内容，可以包含筛选、排序等功能。
表体：包含行和列数据，按列可以分为多选列、数据列、操作列。（多选列=多选框；数据列=呈现业务展现需要的信息；操作列=针对单行数据的操作按钮，比如管理、编辑信息等。）
底栏：包含数据量、单页条目、总条目、分页等，底栏数据也可以放置在表格顶部。
1）几种常见的风格样式
a.网格型：表格有均匀而明显的分割线，边框单元格比较明显。
b.水平线型：仅显示水平线可减少整个网格的视觉噪声。
c.斑马条纹型：隔行交替使用不同底色来区分数据。
d.自由形式：移除所有分割线，通过尽可能减少视觉噪声来创建极简外观。
2）关于样式的选取技巧
网格型：对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息）且有对比关系的。
水平线型：它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度。因此对于所有数据集大小，此样式都是最常见的。
斑马条纹型：每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法。对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定行突出显示的混乱。
自由形式：对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建议使用此样式。
信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。所以，边框的颜色应非常淡，不能妨碍快速浏览。
表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。因此，设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。
下面我将以公司财务中台的表格改版为例，逐步说明表格中每个结构的设计。
这是改版前后样式对比图：
筛选区可以看作表格的导航，由搜索和筛选这两部分组成。一般搜索和筛选会同时出现，但是两者一般很少同时使用来对数据进行定位。搜索更多的是对单一或者包含某个字段的的数据来进行定位；筛选则是用来查询一类数据。
根据MECE分析法，筛选区可以有以下的表现形式：
常用搜索少用筛选，若筛选项多，可以选择隐藏筛选项，筛选少可以展示出来；
搜索和筛选都常用，可以将搜索和筛选都展示出来；
常用筛选少用搜索，筛选和搜索同时展示；
筛选和搜索都不常用，展示搜索隐藏筛选。
1）搜索
在样式上，搜索可以分为简单搜索、标签搜索、高级搜索等三类。
简单搜索：由一个搜索框和一个按钮组成。可以输入一个或多个条件进行搜索。
标签搜索：在简单搜索的基础上加上标签，即先选标签，在输入搜索内容。
高级搜索：即点击更多展开其他搜索条件，减少了更多条件对用户的干扰，但降低了易发现性。
2）筛选
根据筛选的位置，可以分为标签筛选、表头筛选两类。
3）案例小讲堂
对于数据集较大的B端系统来说，往往筛选条件比较多，都将其展示出来会导致空间占比过大，影响了用户对表格信息的获取。下面以我公司的财务中台为例，讲讲如何优化筛选区，希望对大家有所启示。
3.2.3 版本中筛选区样式
筛选条件全部展开，目的是让用户对信息进行快速的查询、过滤，以快速准确完成目标任务。但业务复杂，数据集过多少，筛选条件也相应增加（空间占比大），看起来非常冗余，不利于快速定位目标。为了平衡扫描、查询、过滤、分析等这些操作，复杂业务的表格区筛选需要进行一定的优化处理，这样才能满足满足业务需求同时，又符合用户心智模型。
方案A 整齐划一
整合筛选项，采用表头筛选+标签筛选的样式，缩减筛选区的页面空间占比。
讨论结果：虽然这个方案使筛选区的空间占比缩小，整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端：
a.数据集往往很庞大，表格不能展示所有字段，往往采用列固定的形式来呈现数据的完整性。以财务中台为例，高频筛选功能已被遮挡（如上图），筛选前需先对表格进行横向滚动，无端增加操作；
b.应无法展示全部字段，用户无法清晰的感知到筛选了哪些内容，增加认知学习成本；
c.表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索。
方案B 强调主次关系
采用展开式的标签筛选样式，对不常用的筛选项做隐藏处理。但因业务场景的复杂度，高频筛选功能还是很多，没有解决本质的问题，如下图：
方案C 分状态展示（逐渐呈现）
在方案B的基础上进行了优化。提炼与流程相关的状态，按步骤显示，每一步只显示当前需要关注的内容，如图：
状态的提炼过程
1）整理每个单据的状态，理清关系
结合业务流程可以很明显的注意到，单据只有通过了审核才能收款，只有收款才能进行核销。状态是一种递进关系（审核 ➡️ 收款 ➡️ 核销）。
2）结合财务人员的工作流，提炼出单据的以下几种状态，之前存在到问题（表格中单行数据的操作不一致），也得到了完美的解决。如图：
1）按钮的表现形式
建议在复杂系统设计中使用圆角矩形的按钮样式。
理由如下：
a.人眼处理圆角更容易（认知负荷说）
Jürg Nänni（Visual Perception的作者）表示，视网膜中区处理正圆形的时候是最快速的，而处理边边角角的时候则比较费力，大脑处理的速度也较慢。于是，长得圆润的圆角矩形相较于一般矩形，对于使用者来说就容易接纳许多。
Barrow Neurological Institute （巴罗神经病学研究）的研究也显示，一个物体的显著度与边角的角度呈线性变化，锐角相较于钝角要显得更明显突出。换句话说，角度越尖锐，物体就看起来越明亮；而越明亮的物体就越难以直视。
如上图所示角度越尖锐，看起来越显眼，在视觉上也比较令人感到明亮，不适，大脑的认知符合也越高。
b.使相似的内容更容易被区别
举个例子，如下图所示，即便间距相同，B 排的圆角矩形辨识度还是明显比A 排的矩形高。
这是为什么呢？
首先，第一眼看过去的时候，A 排的矩形整体是连在一起的，中间找不到断点。而B 排矩形，因为有圆角的关系，所以断点很明显。
其次，两种矩形的视觉聚焦：A 排由于直角的关系，视觉聚焦向外推，整体的效果比较发散。这会使得第一眼看过去的时候，容易分不清楚哪一条边框属于哪一块矩形。反之B 排因为圆角收拢的关系，视觉聚焦向中心推，区块就比较容易区别开来。
综上所示，圆角矩形是非常有效率的容器，在复杂场景业务中（存在很多种功能型按钮），按钮采用圆角矩形样式最提效。
这里要注意，圆角不是越大越好
在相同面积中，按钮的可操作区域随着圆角的增大而递减，因此在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作。
同时在实际业务中，按钮常常被当作原子与下拉框联动组成下拉菜单控件。如若使用半圆按钮则无疑增加了下拉框的设计难度并且匹配起来也会略显突兀。
2）批量操作按钮的位置思考
来看个举个例子（针对财务中台批量操作的优化方案）
现存问题
方案A 信息前置
批量操作按钮全部展开不做折叠处理，信息前置来降低认知成本，方便用户记忆。
讨论结果：对于复杂业务来说，会有很多批量操作功能，按钮很多，造成页面拥挤，进而影响用户操作体验；一个位置出现2个主按钮样式，不推荐。
方案B 沉浸式操作体验
对于一开始不可用的批量操作按钮进行隐藏，勾选激活状态，显示在筛选区。
讨论结果：方案B的阻断性强 — 无法兼顾批量操作和数据筛选功能，无法满足复杂系统的场景操作。
方案C 上内容下操作，前2个方案的优化
不做隐藏，类灰布置于底部。勾选触发操作条件，未做勾选时，用户点击时给出引导操作提示
为什么选择方案C？理由如下：
首先，根据古腾堡原则，用户的在做表格操作的时候，视觉流是左做到右，从上到下，方案A和方案B的视觉落脚点在表格的上方，显然是不符合眼动规律的。
其次，批量操作的功能属于财务中台的核心功能点，隐藏不是第一选择，而是类置灰的特除处理（在按钮旁给提示信息）
2.3表头设计
表头在能够概括的情况下，尽量简练、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。如果精简后的生僻字段难以自我解释，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释，同时满足新手用户、普通用户以及专家用户的需求。
在数据的对齐方式上，有以下3个建议：
a.文本左对齐
b.数字右对齐
c.表头与信息内容对齐方式一致
文本左对齐，符合正常的心智模型（阅读习惯从左到右）；表头与内容对齐一致，则是为了简化和降低视觉噪音，以便更好的获取数据信息。数字右对齐，有利于数据间的对比。
要注意的一个细节，例如，当列数＝2的时候，由于列与列直接的间距过大，导致两者的关联性较弱，如图：
这时又该如何处理？
为了增强列与列之间的相关性，当鼠标hover在行的时候，产生高亮。这种方式可能不是最优的，但目前只能想到这种方法，如果读者有更好的想法欢迎留言。
2)数字的字体选择
建议选用：Helvetica Neue、Helvetica、Arial、sans-serif.
苹方在数字字符上，不同数字宽度不一致，导致千位分隔符不在一条线上。而Helvetica Neue数字等宽，千位分隔符有序的排列在一条线上。所以，选择Helvetica Neue作为数字字体的首选字体。数值上下对比的时候，相同位置的数字在同一条竖线上，更加容易对比。
3)对操作项进行“解耦”处理
在财务中台系统中，常常由于权限的不同或者单据状态不同这两种原因，使得每行的数据拥有不同的操作项，如下图所示：
存在的问题：
当信息过载，操作项这个list非常长的话，页面将会非常拥挤；
文字按钮因为视觉特征比较明显，造成了不必要的分散注意力；
误操作率相对较高，同样因为表格空间有限，当操作区非常靠近，很容易一不小心就点错了。
针对这个问题所出的解决方案，如下：
方案A 下拉框样式
讨论结果：下拉框中可能存在不同操作，同样避免不了误操作这个问题。
方案B 错位显示
讨论结果：首先，这样的设计浪费大量的屏幕空间；其次，浪费开发工作量！因为在列表中实现一系列权限判断和操作，在详情界面中往往还需要再开发一次相同的权限判断和操作；再次，不同单据可能存在操作顺序不一样，上下移动鼠标会存在不同操作，用户代价非常高。
方案C 以不变应万变
回归『一个界面一个用户任务』的原则，列表中的单行数据只保留[查看]或[管理]操作，所有其它的单独操作都去往该单据的详情界面完成。
讨论结果：从开发的角度上看，此方案界面高度解耦，功能迭代方便，节约开发工作量；从认知成本上看，列表界面操作高度一致性，利于养成用户习惯；从操作效率上看，在详情页用户会明显确认目标单据，几乎不会误操作； 同时此方案节约了大量屏幕空间，更有利于用户对信息的获取；
4)关于表格中套表格的解决方案
场景：在财务中台中，有这样一种用户，需要对表格内的数据进行对比并编辑。
来看看之前的页面：
这样处理的不足点：
1.在查看和编辑信息时，无效的信息太多。降低了获取信息的效率；
2.切换单条数据时，页面出现跳动，无法快速检索到相对应的信息；
对此，在3.3.2版本中，我们对其做了相应的优化。运用侧视图（快速视图）的方式来呈现信息。一旦选择一个单据，它就会从侧面弹出的。
这个方案，它可以保持上下文，易于使用，即使是在垂直滚动视图中显示大量字段的情况下也效果良好。同时信息呈现的地方是固定的，利于检索，查找。
5)行高的制定方法
开始之前首先明确一下开发是怎么实现行高的。
从上图可以看出，开发在实现设计稿时，通常是按照行高来写的。
因此，表格行高=文字行高+上下间距。其中，文字行高可以设定为字号的1.2~1.8倍，上下间距可以设定为字号的1~1.5倍。
行高影响每行信息的易读性。除了上述的做法外，还有以下2种做法，来保证各场景下获取信息的效率与易读性。
做法1：不同分辨率使用不同行高
设计两套不同的行高，在大分辨率下显示较高的行高，给数据间提供更多呼吸的空间；在小分辨率下显示较小的行高，使一屏内可以看到更多的行高。Gmail就是这样设计的，如下图所示：
做法2：自定义行高
自定义行高为兴奋需求，可以提高用户的用户体验。所以我们可以视表格的具体情况来设计设置行高的形式，可以放置在设置按钮里，也可以在外部按钮较少的情况下展示出来。
2.5底栏设计
最后是表格的底栏，底栏也是不可缺少的一部分，承载的作用主要是告诉用户数据条数以及当前位置。分页的设计是根据不同的场景进行选择最优的设计方案。在不需要定点跳转的场景，建议建议删除跳页，删除多于的功能，使页面简洁、清爽。
表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗？明智的做法，是无数据时用「-」来填充显示，数据为零时与上下数据单位、小数点相同的0来显示。
尽量减少视觉符号的使用，因为视觉符号可能会使你的用户界面复杂，产生难以理解的内容。去除不必要的视觉干扰，例如不必要的图标、无规律的色彩等。
当列表中数据过长时，我们需要根据屏幕宽度调整列表展示方式，超过列表默认宽度的内容可以省略，通常用...表示，鼠标移入后出现气泡展示全部内容。
位置：建议展示在上方，因为我们的阅读顺序是从上到下，鼠标向下移动时不会被上面的气泡遮挡住。气泡面积不宜过大，根据屏幕尺寸控制在一定比例，一版不超过内容区的四分之一，展示不下的内容可以在气泡中增加滚动条。
感谢阅读！本文结合了实际项目经验对表格设计做了一次总结，在具体项目中，你可能需要根据产品特性和用户需求进行调整。如果你还有什么好的想法和建议，可以在评论里留言讨论。
文章来源：站酷 作者：Hi_Nick
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为公民，我们在用我们擅长的设计去服务社会，在这个过程中形成自己的积淀。这是不可用金钱来衡量的价值。
作者：蓝蓝
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
苹果WWDC 2020在6月23日通过线上形式召开，本次开发者大会没有发布太多硬件产品。不过macOS的新版本macOS big Sur依旧引来了大波关注，坦诚的讲这次版本更新属实是很震惊，这可能是近10年苹果第二次颠覆性的改变，上次还是2013年的iOS 7开始全面扁平化，从而引发了设计圈「扁平拟物大战」。
从系统连续性上看AirPods可以在不同设备上无缝切换，不同设备直接可以复制粘贴等等，显而易见的一件事是，苹果启动了macOS的「 iOS化」，所以回归到设计上，这次的升级对设计语言上的影响概括来说有以下几个方面：
逐步 iOS 化的 macOS
不知道大家有没有这种感觉：以前从诺基亚（或Android手机）切换到iPhone，动机是cool～，漂亮的外观让人第一面就爱上了，恨不得马上就拿起来把玩。现在给你个选择切换回Android手机，不管那款手机有多漂亮多美好看，心里第一句话很有可能是：「XXX手机很棒，但我已经离不开苹果的生态了哦！」（我就是这种德行，尝试了N次还是回来了哈哈哈哈哈。）
这大概就是苹果在系统打通的层面下的功夫，更加注重生态的维护，在不同的设备间寻找更多场景产生更多联系。从设计的层面来看，iOS化的macOS对iPhone用户更加友好，有相同的操作习惯，不必在mac和iOS上来回的切换。其实在Material Design推行的过程中就有相似的做法，Chrome的全面MD化，让整个设计语言贯穿在移动设备和个人电脑中。
1. 完全继承iOS基因的控制中心/通知中心和dock
全新的control center，可以看的出继承了iOS/iPad OS的语言，UI和交互几乎是没有任何变化，整合系统一致性的初衷是甚好，在当下这个情况，不得不说亮度和声音的调节我更依赖于物理键盘（或touchBar），不太清楚硬整合在一起的理由（难不成是过度解读了，也许人家就想继承继承）。
从苹果对产品的终局目标来看，也许会在硬件上取消物理控制按键或者更加优化 touchBar 去操控必要的属性（也有传闻说这是在为触控版本的 macOS 做准备）。
同样iOS化的通知中心（讲真，用户实际的桌面未必这么干净，真是担心本身在电脑侧使用频率就不是那么高的通知中心被混乱的文件夹淹没）
2. 进一步强调的沉浸式氛围
全局设计中最令我欣喜的是menu Bar的更进一步的优化！我在sketch里模拟了下效果（非严谨模拟哦），大概得出的结论是加高了背景模糊值，减少了本身的填充透明度，达到了现在的效果。
感官上来看的话是一个微小的改动，但从层级整合的角度这是苹果设计的一大提升，通过光影等自然世界的隐喻抽象设计来减少硬性层级划分，也符合Alan Dye（苹果用户界面设计副总裁）提出的「深度，阴影和半透明性用于创建层次结构」。
除了壁纸以外，图标是最引人瞩目的变化啦！iOS化的图标规格的约束不用多说了，还有就是「新拟态」的第一次亮相。新拟态出现一定意义上是对这个时代获取信息时枯燥感的厌烦与反抗，举个例子：就像当你日复一日的穿基本款T恤的时候一定向往印花T恤，不管你是多么的成熟有型哈哈哈哈哈。
△ 左图为新拟态，右图为MD
icon的设计植入了新的设计理念，更突出去表现现实环境下的真实状态，注重光影和厚度的变化，尤其是光影。细看每一个icon，严格遵循同一个光源（正顶光）去设计。
但话说回来，很难讲这套icon是否成功，有几个明显的弊端也暴露出来了：
1. 可用性与美感的平衡
新拟态更重注光感的细腻程度，但对信息的有效呈现打了一定的折扣，这块苹果权衡决策下放弃了些许的美感，增强了有效的信息传递。
△ 图片来源dribbble
2. 统一性
对一个生态来讲，最最理想的是每一个生活在内的成员要和谐的相处，新的拟态风格相比扁平时代的图标显然给第三方开发者增加了难度，这种难度极有可能对没有太多设计资源但又想好好开发应用的创业团队造成一定的打击（换句话说催生了设计外包的工作也不错哈哈哈哈哈）。
总的来说，优势和弊端同时存在吧，啥事都没有完美的不是么～下图是这次改版里我相对还比较喜欢的几组icon了。
布局结构的简化处理
从官方的HIG介绍中，sidebar被重点提到了。透过去看，其实是布局的底层逻辑发生了变化，10.15的时候上下两段左右分栏的方式会存在一定的误区：全局action控制当前试图的交互？？？
从层级关系上也可以勉勉强强讲得通，但实在是太牵强了，特别是前进后退按钮存在所有文件之上这个蜜汁布局居然维持了这么久。层级清晰的梳理后带来的一大优势就是视觉的复杂性被降低了，借助现在这种列表视图，很大程度上前进后退都用不到了。
另外要提及的是设计师可以思考的问题，下一代模糊效果-渐进模糊。这种模拟现实生活的真实模糊包括阴影/反光/相互透出，同时要考虑光源/角度/环境等等，不再单纯的只是黑色/透明度（有兴趣的话可以在sketch里模拟下或者留言讨论讨论～）。
人脑是需要一个提示来识别物体，我们称之为反馈设计，这是人机交互中非常重要的一个环节，这也是为什么许多按钮仍带有阴影的原因。但是，这版本的macOS工具栏图标丢失了形状以消除视觉复杂性，所以重塑后的反馈会鼓励用户去操作。
对于设计师来讲，不要害怕不强调所有选项，并非每个按钮都需要具有形状。只要设计足够的反馈一样可以起到被点击的效果，例如当用户将鼠标悬停在其表面上时，可能会出现更多的色彩更有趣的动画，并尽可能消除视觉上的复杂性。
这次升级除了设计上的优化外，safari的变化也足够令人欣喜，可以快速通过 tab 知道当前网页的内容的功能真是令人欣喜（虽然我记得之前Yandex浏览器就是这么做的哈哈哈哈）。
可以预知时间地点的apple map：
悄悄的说，感觉苹果越来越像腾讯了，有些小微企业的创新功能一受用户喜欢不是买过来就是抄过来，有一种垄断的感觉，想想悲催的Alfred和workflow都是这种命运。
macOS big Sur 的升级可以说是苹果对未来的进一步探索，站在设计师的角度，有几个值得学习的点：
文章来源：优设 作者：Nana的设计锦囊
蓝蓝设计的小编 http://www.lanlanwork.com