页面布局是页面设计的一部分，我们不仅要处理页面上视觉元素的布局与排列，还要考虑这些元素在不同大小的屏幕上的适配问题。
页面布局不仅仅是前端同学要考虑的问题，也是设计同学要重点关注的；怎样的布局能更好的展示页面内容同时兼容不同屏幕的大小呢？不同的布局形式下，设计师要着重考虑哪些点呢？今天就来探讨下这个问题。
固定布局（Fixed Layout）：网页上所有的元素宽度以像素（px）为单位。例如，直接设定网页的主体部分宽度为960px/1200px，某个搜索框宽度为60px等等。这种布局具有很强的稳定性与可控性，缺点也显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、新闻资讯类网站、企业的PC宣传站点都采用了这种布局方式。
PC：大多采用居中布局，所有样式使用绝对宽度/高度(px)，设计一稿合适的尺寸就可以，在屏幕宽高缩小时，使用横向和竖向的滚动条来查阅被遮掩部分；如果大于这个宽度则内容居中，填加背景宽度。页面的模块、弹窗、间距等都是固定尺寸，需要设计补充的页面规约比较少。
优势：这种布局方式对设计师来说是最简单的，跟动态布局相比，能够更好地控制页面的美观度，排版稳定，在窗口拉伸过程中规避了内容重叠或者不规则的情况，仍保持原始比例，静态位置和内容样式。
劣势：显而易见，即不能根据用户的屏幕尺寸做出不同的表现，对于超大屏和超小屏用户不友好。
知乎网页端：
微博网页端：
流式布局（Liquid）的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
流式布局也叫也叫百分比布局，是移动端开发中经常使用的布局方式之一。元素的宽度按照屏幕分辨率自动进行适配调整，保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变。
流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。把元素的宽,高,边距,间距不再用固定数值,改用百分比,这样元素的高,间距会根据页面的尺寸随时调整，以达到适应当前页面的目的。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
* 百分比是基于元素父级的大小计算得来的；* 元素的水平或者竖直间距都是相对于父级的宽度计算的.* 边框不能用百分比设置
网页中主要的划分区域的尺寸使用百分数（搭配宽度最大值、最小值属性使用），例如，设置网页主体的宽度为80%，最小宽为960px，（最小宽也就是保证页面内容不会错乱的情况下的宽度，到达最小宽度后，不再适应，出滚动条）图片也作类似处理（宽度:100%, 最大宽一般设定为图片本身的尺寸，防止被拉伸而失真）。
注意：
宽度自适应，但是里面的图标、字体等也是固定大小的，并不是所有的东西都是自适应的。一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化,对于小图标或者文本等, 一般都是固定宽高大小。
同时考虑到页面具体模块、弹窗、字段等在最小宽度下的显示，比如给出字段最小宽度，在最小宽度显示不下时如何处理。可以参考阿Zi之前的文章：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
在网页布局中，我们通过设置元素的宽高定义元素的显示大小，但是，在不同窗口大小，不同分辨率下，宽高相同的元素显示状况是不同的。所以，我们往往需要元素的大小能够根据窗口或子元素自动调整以达到自适应。没错，在页面设计中，自适应的规则往往是需要设计补充的最多的。
因为阿Zi所在公司的管理系统是采用左侧导航栏固定，右侧内容区自适应的流式布局，所以举几个实际工作中的应用的规约例子：
a.弹窗自适应
b.模块、卡片自适应
一种是当页面横向拉伸时，卡片里内容个数不变，布局不变。可以把宽度均分成几块，然后内容在模块内居中，给出最小宽度；如下，设定单个最小宽100px，如到达最小宽度后显示不全，出现横向滚动条；更灵活的情况就是收缩时内容/区块布局变动的。同样要设置区块最小宽；向右自适应—横向排序，右侧不够则折行；最小宽度平均分成均等份，剩余宽度均分到其他列。
据统计，PC端用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。有些情况下不太好控制内容自适应，那么就需要出2，3套尺寸的设计稿来适配。可以根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局，哪些时候出多套尺寸。
优势：流式布局一般用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)
劣势：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，显示不协调。
两栏
常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。
两栏的左侧固定宽栏框大多在40到300范围（适用于左侧导航、筛选的情况）。
举例：
Ant Design
三栏
在特殊场景下，左侧会有双重左栏的情况，适用与一级导航简单，二级导航复杂的页面。
举例：Teambition
还有两侧固定，中间自适应的布局，有圣杯布局和双飞翼布局。圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，但是视觉上都差不多，就是三栏，然后左右两边宽度固定，中间宽度自适应。
还有瀑布流布局也是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。
优点
1.有效的降低了界面复杂度，节省了空间；
2.对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
3.更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
缺点
1.有限的应用场景：无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
2.关于页面数量的印象：其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。
3.关于精准定位：无限滚动加载让用户很难精准定位到某一模块。
举例：pinterest
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式布局能使网站在手机和平板电脑上有更好的浏览体验，也就就是说一个网站能后兼容多个终端，而不是为了每一个终端做一个特定的版本。
响应式布局意味着，无论用户是在iPhone还是笔记本电脑上查看网站，都应该能够访问所需的内容，拥有一致的用户体验，这就要求UX/UI设计人员考虑的问题更多，同时考虑到网站和移动设备的场景，忽略这些肯定会阻碍网站或移动应用程序的用户体验。
接下来从响应式设计的特点着手，展开下设计师需要了解和注意的点。
CSS断点是响应式网站的经典特征。他们的工作是根据屏幕大小将设计“分解”为较小的网站版本。断点通常具有最小和最大宽度，这些宽度决定了用户可以看到哪个版本的设计。
但是，一个网站需要多少个断点才能真正响应？如果设备不适合最小或最大宽度，则网站设计仍然看起来很奇怪，这违背了创建响应式设计的全部目的。
尼克·巴比奇（Nick Babich）指出，大多数响应式网站都需要至少三个或四个断点才能正常工作。根据缩放的大小，内容将相应地进行调整。断点通常针对移动设备，平板电脑和台式机视图进行细分，尽管您可以拥有更多的断点，以便涵盖所有基础，以提高设备的灵活性。许多设计师还包括“较小”的断点，这些内容在内容中会自行调整以保持设计的视觉平衡，但不会发生大的变化。这包括更改字体大小之类的内容，但不包括一般结构。
图像在任何网站中都非常重要，无论是高分辨率照片还是自定义插图。那里的一些设计师相信裁剪图像，以便用户只能在较小的屏幕上看到图像的一部分，因此视觉效果保持不变。对于我们而言，最好的方法是使用矢量图像。
对于许多设计团队而言，最好首先关注最小的屏幕来开始设计。这主要是因为通过将移动设计放在首位，团队可以对内容的去向有一个很好的了解。
响应式设计围绕内容，假设你采用建议的“移动设备优先”方法，则意味着您应该为移动设备分配重要内容的优先级，并随着屏幕尺寸的增加添加更多内容。
当涉及到响应式设计时，与常规设计相对应的只是关注内容。因此，通过首先创建移动版本，我们可以缩小从一开始就需要显示的关键内容（用户绝对需要的部分）的范围。从那里，我们可以在进入更大的屏幕时添加更多的细节和更多的内容，或者找到更好的方式来显示关键内容。
1）注意视觉层次，从最小宽度的断点开始
这建议从最小的屏幕分辨率开始的原因有关。这不仅是要了解内容的哪些部分绝对重要，还在于了解呈现这些内容的最佳方法。
当网站在不同的断点切换时，网站的视觉层次结构可能必须适应，从某种意义上说，它需要适应屏幕尺寸的变化，为了保持产品的可用性，组件也必须适应。
如上所述，在响应式网页设计中使用的每个断点都将有一个最小宽度和一个最大宽度。当使用移动优先的方法设计，一个好的经验法则就是可以从你的三个断点的每个最小宽度开始设计。这样，您将为较小的设备设计屏幕，并在屏幕变大时添加更多内容和UI元素。请记住：向上拓展而不是向下缩放，向上拓展总是容易的。
对于基于Web的产品，按钮可能非常简单。毕竟，光标是几乎任何人都可以使用的准确工具，但我们的手指说的不一样。所讨论的手指的大小可能因用户而异，并且设计人员需要考虑移动屏幕上的可用空间很小。
根据Apple的《人机界面指南》，平均手指轻触为44×44像素。为了提高可用性，请确保针对此平均值对按钮和可点击区域进行适当调整。
如果您依赖导航栏作为查找信息的主要方式，则需要在移动设计中仔细确定导航栏的优先级。该产品的各个方面（例如导航设计）绝对至关重要，需要在响应迅速的网站中进行仔细计划。随着设备屏幕的变小，该导航栏的空间将越来越小。
那么像这些问题就需要我们重点考虑：什么时候隐藏导航选项？全部隐藏吗？首先隐藏哪些？
常用的做法是，将导航、头部搜索、用户信息等内容隐藏在按钮后面，例如我们在手机上经常能看到的汉堡菜单。的确，汉堡菜单并不是唯一的选择，但不可否认的是，整个导航菜单都需要隐藏在智能手机中。
这就是要尝试确定整个产品中最重要的页面，并确保无论使用哪种设备，用户都可以找到它们。在设计过程中尽早完成此优先级设置总是最好的，因此，如果我们从移动设计入手，我们将已经需要包含一些重要的内容。
优势：
a.用户体验友好
随着电脑尺寸多元化，智能设备（pad/智能手机）普及化，在当下追求用户体验至上的时代，网站普遍使用固定的宽度逐渐满足不了现在不同设备与不同分辨率需求。在高分辨率电脑宽屏显示器上，两边留白过多。在手机上显示，内容显示过小，用户为了看清楚，首先需要放大界面，再左右拖拖界面。响应式网站可以根据不同终端、不同尺寸和不同应用环境，自动调整界面布局、展示内容、内容大小，提供非常好视觉展示效果，一致性友好体验。
b.提高转换率和销量
响应式网站意味着您无需在网站设置跳转，从而极大完善了用户体验，这也是响应式网站的最大优势所在。另外，使用集成式设计和CSS表单一类的功能使网站无论在何种设备上都能营造出风格一致的感觉和外观。若熟悉这种布局，用户可以在任何设备上轻松浏览您的网站，进而提高转换率。
c.节省开发投入
摒弃传统网站，选择响应式网页，单从开发阶段就节省大量时间和金钱。为不同的设备同时开发多个网站，意味着后期也需要更多的开发支持费用和维护成本。
d.三站合一，维护简单
电脑、手机、微信三个网站使用的是同一个网址，同一个后台管理，数据同步更新，所有图片和内容只需要上传更新一次即可，维护简单轻松。
劣势：
a.设计与风格有局限性
虽然响应式布局拥有如此显著的优点，但它也并不是十全十美的，在很多方面，它也有它自身的局限性：
自由度太低，局限性较大，这种情况就是必须兼顾移动端以及PC端的表现，比如最常见的移动端并没有悬停效果，PC端就要酌情考虑了。需要考虑在手机，pad，PC上三种屏幕下的页面内元素的呈现，会导致有着非常大的局限。
b.对IE老板兼容性不友好
对于老版本IE（IE6、IE7、IE8）支持不好，这是一个致命的问题，如果你的网站用户大多还采用老版本IE的话，建议不做响应式网页设计。
c.灵活性有所欠缺
基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计，如：电商类型网站，宽屏的pc端内容如果全部要在手机端进行展示，势必导致手机端的界面非常长，需要根据手机端属性进行重新信息框架设计，这样对响应网站要求非常高，实现难度与成本非常高。但是大型网站为了提高用户体验，通常做法，把高分辨率宽屏网站最小的响应尺寸响应到1024px，不再适配手机端，手机端重新设计开发一套手机网站，简单理解为2.5响应，如：电商网站亚马逊、Calvin Klein、Nike、视频网站Youtube，等。
d.速度可能会变慢
由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC、Pad的冗余代码，导致文件变大，影响加载速度。
根据响应式网站的优缺点，我们不难看出：企业官网、单页宣传网站非常适合做响应式网站设计，由于它们的界面内容比较少，结构比较简单，所以在不同终端、不同尺寸设备上进行网站信息框架调整、内容加减、图片、文字、栅格响应比较容易。内容比较多带有功能性的网站不适合做响应式网站设计。
示例1----Dribbble
在1960-2048的屏幕下，显示5列内容
在950-1330-1960屏幕下显示3到4列
在500-620-950尺寸下显示1-2列布局，并且把头部主导航、搜索框、用户设置等内容收起到到左上角菜单：
示例2----Event Apart
互动设计会议Event Apart创造了从其主要网站到其移动网站的无缝过渡。
他们选择在大多数平台上保持大多数相同的布局，平板电脑版本与台式机相同，并且可以使用。这是因为他们为清晰起见选择在白色背景上以粗体显示内容，并且在调整大小时，可以轻松滚动信息。
唯一真正的变化是，对于移动版本，顶部的面包屑折叠成一个汉堡菜单，并用“菜单”一词明确指示。
示例3----Popular Science
无论使用哪种设备，Popular Science都能为您带来出色的用户体验。
正如您所期望的那样，内容处于中心位置，并且具有响应式图像和简洁的版式，Popular Science成功地创建了易于阅读和使用的响应式网站。本网站上的信息以一种可以在各种设备上轻松按比例缩小其所有内容的方式显示。
最后
虽然目前响应式设计的模式的普及还是有很多难题需要突破：比如响应式的图片、跨端交互、更高的性能、全新的合作流程等等。但是随着科技不断发展，响应技术逐渐完善，给响应式设计提供强有力的技术支持；响应式设计可以在不同终端提供完美展示效果与友好的用户体验，吻合用户体验至上的趋势。所以说，响应式设计必定是未来发展趋势。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
好的网页设计具有很强的适应性并且对用户来说始终是友好的。
遵循网页布局的最佳实践，能够带来全新的数字体验，灵活地调整不断变化的技术和设计趋势，进一步实现品牌目标。
编者按：这篇趋势分析的文章出自资深设计师 Lyudmil Enchev 之手，汇总了 2021 年在网页设计领域值得注意的 10 个重要趋势。
虽然移动端设计在持续地繁荣发展，但是网页设计依然是当下硬性的设计需求。相比于以往，网页设计所面对的要求，其实越来越高，不仅要细致到位，要功能全面，要能够贴合趋势，还要能兼顾桌面和移动端。
从网络上找到灵感并不是一件复杂的事情，不过要将新的样式应用到网页中，给旧有的样式翻新，都需要配合技术的进步和新的工具。
在网页设计领域中，设计趋势从来都不是为了设计而诞生的，相反它更像是视觉、品牌、技术、先锋探索综合作用下，落地到网页作品中的一种综合表现。越来越多的技术和设计人员将聪明才智和天才想法融入到网页当中，才催生了如今我们看到的这些「趋势」，而这个，就是我们今天要聊的东西。
其实严格意义上来说，卡通插画一直在流行，流行了很多年。从卡通插画在电视上成为一代又一代人的视觉和设计启蒙开始，它就从来没有离开过网页设计的主流领域。
也正是因此，直到今天，当我们谈及网页设计趋势的时候，卡通插画也会是我们最容易想到的一个趋势发展方向。插画，是一位设计师自由创作发挥的通行证，而卡通插画，是最容易带着设计飞翔的一个设计技术。
卡通插画足够灵活，装饰性非常强，在题材和风格足够切合的情况下，能够更快和用户构成情绪上的纽带，可以说是非常强大了。
当然，不止是在这一篇文章里面强调过，3D 的重要性和作为趋势的流行程度。从文字排版到视觉图像，3D 在视觉领域的快速增长和市场需求是大家有目共睹的。
值得一提的是，在网页这个领域，除了诸多视觉元素的视觉设计之外，有一个非常突出的趋势，就是运用 3D 来构建视觉景深，渲染出层次，这非常强大。
这种景深和 3D 元素所构建出来的沉浸感使得整个网页充满了吸引力，结合色彩，阴影、高光，在高清晰度的屏幕上，这些都成为了将用户留下来的理由。看看下面的案例，你就明白我说的意思。
失真和故障效果则是另外一个重要的趋势。视觉噪音，随机的元素，缺陷，故障，模糊，低保真的元素，粗野主义式的设计，这些在这个以精致细腻为上的时代，制造出了一种反主流的声音。
并非它们必须这样，但是这样的视觉风格确实更容易在成堆的精致细腻设计当中脱颖而出——当然前提是你的故障和失真效果能够做的足够「好」。
奇怪的配色，反直觉的排版，明显的错位，看起来怪诞但是有趣的设计，这样的设计通常需要设计师更好地在对错好坏之间拿捏平衡。
感觉，感觉很重要，你明白嘛？这不是反逻辑也不是反设计，是特立独行。看看下面的案例吧。
怀旧也一直在流行，你知道的。但是如何怀旧？90年代，数字化设计刚刚从像素开始向着更加细致的未来前进，这个阶段，有大胆的尝试，有快速更迭，这些介乎新旧之间的数字设计，是我们对于 90 年代设计的美好回忆。
相比于 80 年代的粗陋（图形化界面还在艰难普及中），90年代是腾飞的阶段，从界面到游戏，在拟物化走到之前，那种介乎精致和复古之间的微妙感觉，是非常有趣的。
对于新世纪才出生的 Z 世代而言，90年代是陌生的，但是这个时代又是很容易可以被追溯到的，这也是使得 90 年代的数字风情有着能够打通不同年龄段用户的奇妙气场，它的逐步流行，并不令人意外。
你总能在这些设计当中，get 到到某些东西，然后微微一笑。
严格意义上来说，微动效和微交互并不是趋势那么简单，在如今的 UI 和 UX 设计当中，它是必不可少的组成部分，它已经从过去的「加分项」变成了如今的「基本要求」。
微交互和微动效通常不会做得特别的显著，但是它们会深入到 UI 界面的各个地方，按钮，小图标，行为召唤式的文本，翻页按钮，光标，产品图，弹出框，等等等。
微交互和微动效从最初的只需要确保可用性，到如今需要好看易用又有趣，可以说要求是比以往有明显提高了。在接下来的 2021 年可以预测的是，微动效会更加强调趣味性和交互性。
如果你正在考虑这部分的设计，看看下方的设计参考吧。
在关于网页设计趋势的文章当中，不探讨配色是不完整的。2021年的年度流行色是什么？不妨等等潘通下个月月初公布的2021年年度色。那 2021 年的在配色方法上的趋势是什么？是实验性配色。
在以往追求协调配色的时代，和谐的搭配是最主要诉求。不过现如今，用户、品牌乃至于设计师都在寻求一些更加新鲜独特的东西，实验性的配色就是在这样的诉求之下，逐渐流行起来。
这些实验性的配色通常会带有一些渐变的特质，一些反习惯和反逻辑的搭配方式，饱和度较高的蓝色、紫色和红色的融合，一些更为黯淡或者更为刺眼的搭配方式，强烈的视觉实验仿佛是在探索用户的接受极限在哪里。对于如何落地，多看看那些优秀而微妙的已有的范例吧。
如果说有什么趋势在 2021 年是非常明显的话，我只能说，是更为大胆的排版和更为粗壮的字体笔触。当然，这些设计本身是要具备相当的视觉美感和愉悦性的。怼到出血位乃至于版面之外的文本，快速切换的字体效果是「注意力经济」催生的一种设计策略。所有的一切——尤其是文本——仿佛在大声地吼叫着：看我看我看我！
这大概就是这种设计趋势诞生的本质。不过如果你设计的足够炫酷、炸裂或者优雅，谁又会去责怪你呢？
我们似乎开始厌倦横平竖直均分的网格，那些并不那么精准，带着手工制作的「不够」的元素，对于越来越多的用户而言，似乎是更好、更加易于亲近的东西。因为这样看起来更加个性，似乎给网页赋予了某种真实质感，甚至可以脑补出这些手写、手绘、手撕的视觉元素背后，站着一个有血有肉真实存在的人。
这大概才是手作感真正让人开始沉迷的重要原因。你可以开始尝试一下这种这些自由的、非正规的、甚至有错漏但是显得非常友好的视觉元素，字体，插画，排版方式，装饰元素，等等等等。
其实我们在前面已经反复提及了3D的部分，不过现在再做一个汇总：走出平面2D的领域，来试试有趣的 3D 设计，无论是好玩逼真的建模和阴影、有趣的材质和细节、脑洞大开的动画、充满纵深的转场和强化的交互，都能够让网页的设计，在2021 年更加吸引人。
因为炫酷本身就足够吸引人了不是吗？
极简主义最后还是要提及一下。虽然总体来说是老生常谈，但是它依然是很多设计师热衷、很多用户喜欢的一种主流的风格，也是值得追随的趋势。
必须说的是，还有很多厌倦了各种流行样式的用户可能会拥抱极简主义，它会作为一种持续的「趋势」而存在。这也是极简主义最让人着迷的地方：将你需要的必要的部分呈现出来，且只呈现这部分东西，没有过度装饰，没有无效信息，简单直接。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
节能环保是符合可持续发展战略的一个课题。在节能环保方面界面设计都有哪些风格呢？
下面给您展示两种风格界面：清新明快和深色沉稳。
绿色和黄色为主的色调给人一种清新自然，富有生机与活力的印象。图形以圆形为主，比较有亲和力，同时圆形也是今年UI设计的流行趋势。
紫色和粉红色渐变为背景，明快有活力，容易吸引人眼球。绿色、黄色、蓝色作为辅助色，增加页面的灵动感。图标简洁清晰，辨识度高。
黑白色调是一种低调雅致的配色，配以简洁的线条，更符合节能环保的主题。
这款APP界面采用深灰色底色，沉稳大气，有现代科技感，界面采用卡片式布局。配以粉红和橘黄作为点缀，让界面不因深色而显得呆板。
界面采用深蓝和灰色为主的配色，大面积留白。卡片式布局，配以曲线图表，扁平风格图标。简洁清晰，表意明确。让人对节能的理念一目了然。
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
为大家梳理一个web表格设计框架，希望能够给大家带来完整的不一样的内容。全文12,598字 ，预计阅读30分钟，建议收藏。
在网页或桌面端为载体的B端产品和生产力工具中，越来越多的设计师需要和数据打交道，查询和处理数据的能力是当前正在设计的大多数产品的关键要求之一，表格被公认为是展现数据最为清晰、的形式之一，也是世界上最常用的用户界面工具，其重要性不言而喻。
表格，展示行列数据，既是一种可视化交流模式，又是一种整理数据的手段。表格帮助我们组织和展示信息，同时保证信息的可读性，从大量信息中找到所需内容；通过合理布局，感知不同信息间的关联与区别，进行分析和比较；对数据进行排序、搜索、分页、自定义操作等复杂行为。
表格的行元素和列元素行和相交就会形成一个简单的二维表，行，列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局，分别强调行、列、单元格。
水平型会弱化列的存在，强调行信息的连贯性，适用于用户阅读信息时是从左到右，然后自上而下逐条扫描。垂直型是通过强化列的视觉特征来突出不同列信息的对比。矩阵型的表格有均匀统一的分割线，单元格比较明显，适用于列信息较多而没有足够空间用留白来分割信息的表格，同时我认为单元格合并的情况也属于矩阵型。
还有比较常用的表格类型层级型：
层级表
是表达结构性关系的表格，表现得如同树的分支，所以又叫树列表。每一个条目可展开或折叠包含的更详细的行信息，也包含嵌套子表格。
层级表并不如矩阵表直观，但通过结构化的组织方式逐级展示表的数据内容，让整体信息架构一目了然，非常适合大型数据表。
结合层级表的使用场景，多以查看为主，编辑需求较少。
同时还有特殊的表格类型，图表型与卡片型：
图表型
除了在单元格中引用图表之外，很多时候都会提供图表/表格视图切换，便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式，这时候，表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。
卡片型
可以用卡片的形式来展示信息，将信息以组的概念呈现，单张卡片内的信息按优先级进行排列。此外，卡片彼此之间又形成一个整体。
卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
注：在有限的表格空间内需注意卡片信息之间的间距，若卡片信息过长可做截断处理。
在实际工作中，上述表格类型还有可能互相结合，以更好的达到相应的分析目的。
比如垂直–层级，矩阵–数据立体表等。
从视觉结构的表现角度，个人将“表格”的构成分为：标题、表上方筛选操作区、表头、表体、底栏。由表头、表体构成内部区域，由标题、筛选操作、底栏构成外部区域。
标题是对表格信息内容的整体概括，可包含数据来源及属性(日期、地区等)，以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题，与其他的设计同等重要。有了好的标题，表格就可以独立使用，如果导航菜单层级清晰，同样能起到标题的作用。标题作为最重要的识别元素，默认展示在左上角。
这里特指位于表头的上方的操作区域，包含筛选，操作按钮等其他操作。筛选区包含模糊搜索和条件筛选，按钮分为增删改和其它业务处理操作，合理设计筛选区可以大大提高用户的效率。
表头对数据性质的归类。表头按惯例要对数据的简况做出反映，如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。表头的字段名称应当符合人们的思维习惯，保证用户理解。如果有需要解释，则在字段名称旁边加说明小图标(小问号)。表头在这里也能指列行标签，是对所属行或列数据的描述。
除了容纳行/列标签之外，表头也可以进行排序、搜索、筛选等。
表体是表格的主体内容，具体信息数据内容的填充区域，由一个个基础的单元格组成，单元格是表格呈现数据信息的基本单位，可以是计数、百分比、均值、"-"等任何数据。表体包含数据，分割线，背景，单元格数据可进行点击操作，如链接跳转(项目或者商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。
表尾一般是统计类数据，例如合计、平均数等。表尾使用频率较少，且重要性明显不如表头，我就把它归到表体这类。
底栏在表格最下方，主要展示正文中的数据量或单页数据的概览信息，也常提供统计功能，供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。
底栏最常见的元素就是分页，分页可以放在头部或底部，常见的还是放到底部，分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等，需要根据不同的场景选择最优的设计方案，比如有的时候并不需要定点跳转。
无限滚动可以替代分页，但对于功能优先的应用未必适用。下图为查看更多按钮，比较少见：
同时，在选中操作的下，操作按钮也可以位于底栏，在未选中时操作置灰。
采用格式一致外观，突出有利于对象识别的关键信息。
合适的填充和边距对于视觉设计至关重要，既包括保证数据单元格之间的留白，又包括单元格内部留白，以保证易读性，当创建表格设计规范并严格遵循后，就可以创建视觉一致的表。表格本身应具有最小宽度，在不同画面中宽度应可以增长到整个空间，所以每个列也需具备最小宽度。如果页面宽度小于表格，那么表格应水平可拖拽。
数据合适的位置排列能够提升数据的浏览效率和准确度。对齐能够很好的形成视觉引导线，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。
正如连续律所描述的，人们倾向于把那些经历最小变化或阻断的直线或圆滑曲线知觉为一个整体，倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
数字应该右对齐
在表格中，诸如金额、数量等数值排列时，通常采用“右对齐”方式，既方便用户快捷读取数据，还可以使用户进行纵向数据对比。数字是从右向左读的，是因为我们对比数字时，首先看个位，然后十位、百位。当个位数值对齐时，我们就可以快速查看前面的数值，比较多个数据的大小。因此，表格的数字应当右对齐。
当我们常用的字体如果不同数字宽度不一致时，会导致千位分隔符不在一条直线上，所以要选择数字等宽的字体，等宽的数字在同一竖线时更容易对比。
文字信息左对齐
因为我们阅读文字信息是从左向右读，如果不采用左对齐，会降低浏览文字的效率。
混合型文本左对齐
当数字、文字、字母组成混合数据时，标题和正文左对齐，使用了一个视觉起点。
在实际工作中，主流框架组件，表格列数据对齐同时针对分割线，虽不是完美中的对齐，但开发成本低。
不论何种对齐方式，都需要考虑到该字段可能存在的极端情况。如：普通文本若过长，可在鼠标悬停状态时单元格展开列出全部字段信息。
一般表格具有的颜色尽可能少。颜色和可读性是密切相关的，要合理的使用颜色，普通表尽量使用简单的背景色和点缀色。背景色方面，除了行/列交替颜色(可以区隔内容，引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法，还可以对表头表尾进行视觉区分。但不能增加过多颜色以引起混乱。
分割线颜色尽量不要与背景色相差太大。当字体选择深灰色，背景为浅白色时，边框选择浅灰色，这样可以减少我们视觉疲劳，不会使表格看起来令人生畏。
表头标签应该简炼准确，以达到节省表头空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。当然对于产品而言，先能把事情说清楚，再考虑文字的简洁性。
当数据结构比较复杂的时候，使用多级表头来体现表头与数据的层次关系，如下图：
当数据有看不懂或生僻的信息时，用户期望有人告诉他为什么会这样，就需要在表头标签后加上小问号，鼠标悬停弹出说明文字的提示框。
不需要表头
如果表格数据可以自我解释，表头就可以不需要。电子邮件的表格是一个好例子，邮件主题，发送者，发送日期都区别度高不会混淆的。当然有的情况表头是不能去掉的，例如有两个不明确的日期，这时候你就需要定义一个表头。
所有行按逻辑排序，比如按风险由小到大，将最安全的操作放最前面；或按照信息时间排序，由新到旧，以创建时间进行排序，即创建的排在最前面。
行高是非常重要的参数，直接影响着阅读体验。较小的行高承载更多信息，让用户无需滚动鼠标即可看到更多数据，但会降低扫描效果，导致视觉解析错误。适宜的行高使得数据更易于被阅读，但这不代表行高越大越利于阅读。
设置行高的原则：
A.单行数据显示时，数据显示紧凑、有序。
B.多行数据显示时，弱化表格形式，提供丰富的视觉展现。
因此，对于单行显示的表格，建议行高为字体高度的2.5倍到3倍；对于多行显示的表格，建议内容区到上下边框的距离略小于文字高度。当然，也可以提供切换按钮让用户自己控制显示密度。
斑马线又称作间行换色、隔行变色、行的交替样式。它能让行间界限更为明显，同时加强视觉流的横向引导，避免在阅读表格时出现迷失情况，要注意两种颜色不能反差过大。另外，可以根据实际情况选择是否与边框同时使用。
有时为了强调行内信息的连续性，可去掉单元格的纵向分割线，仅使用横向分割线和底色分割，使横向信息更加连续通畅，以提升阅读效率。
表格还可以通过颜色来指示状态，颜色指示可以帮助用户识别哪些行可能需要特别注意的行数据。
同时可以对行内信息进行扩充，进一步弱化表格形式，丰富各类信息的视觉呈现，同时兼顾行与行之间的关键信息的对比，如上文表格布局提到的图表的使用。
尽量减少列的数量，关注用户需要的必要信息。当数据列过多时，要分清主次列，非重点、辅助性信息可以通过次级入口来解决，如固定重要列(主体名称/操作列)，次级列在表格中间区域左右拖动。
列宽严谨的处理方式有三种。第一，通过栅格，由列的数量决定列宽，主流框架组件一般是这种；第二，可以固定部分列的宽度，其余列则按百分比处理；第三，在固定宽度的基础上，允许用户自由拖动调整列宽的大小。（当然我觉得不要太拘泥这个，合适就好）
为便于用户对数据进行对比分析，可以在原始数据的基础上给出差值、升降变化等数据处理结果，减少用户数据加工的过程，直达用户获取信息的目标(需要明确用户目标)，提高用户的阅读速度。
一般列的强调是配合列排序功能使用的，如点击率、访问量的排序。有时会使用不同粗细的纵向分割线或不同底色对列信息进行区隔，增加同类信息的对比性。
其中的关键区别在于数字的大小。数据的度量单位无需重复，一般在表头标识清楚即可。
一般指空数据或零数据的情况，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是数值为零？正确做法是，对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下数据格式保持一致；对于没有数据的单元格，通常是用“－”表示。
B端后台数据类型较多，最好能为空数据做出释义，可以在“列标签”或底栏给出解释文案。
单元格的宽度根据列中字符的长短自动变化宽度，超过该列宽可以省略显示，末尾以"..."显示，鼠标悬停时出现气泡显示完整内容。
比如用户重点关注数据状态、某些数据的上升和下降等，可用符号进行标识，帮助用户快速定位到目标信息。
水平分隔线，能显著减轻表格在垂直方向的视觉重量，内容更加条理清晰，便于用户对比查看数据。
垂直分隔线，在表格中使用适合的对齐方式后，那么就可以省略；数据量级比较大的表格，列之间过于紧密时建议保留，可以使用较淡的分隔线，将不同列数据区分开来，提升浏览速度。
下图采用了同时使用水平和垂直分隔线：
如果在表格中使用适合的对齐方式，分隔线就是多余的。但由于表格数据量级不同，即使要用，分隔线也要淡，不能妨碍快速浏览。
在web端，表格的的数据内容超过一定“数量”时需要提供翻页功能，这个“数量”由表头的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定，原则是不要超过一屏，考虑到每个用户的使用习惯，可以让用户自定义每页的显示的数量。相比于跨屏翻页而言，向下滚屏会更便利，在下文控制表内容中展开比较了无线滚动与分页。
分页控件内容 ：用户自定义每页显示的数量，当前页码(行数)，全部数据的页数(行数)，向前翻页，向后翻页，到达第一页，到达最后一页等。
当用户的数据未超过一页时，可以隐藏翻页控件。翻页按钮不可用时，须给出置灰态或不可点击。
分页控件做为筛选数据的一种方式，通常可以结合排序、筛选等其它控件一起使用，来提升用户的操作效率，如网易的邮箱，翻页与日历结合使用，对于有大量邮件数据的用户来说，查阅邮件的效率更高。
除了无限滚动，还有第三种翻页方式，鼠标点击“加载更多”按钮以查看更多数据。
干净的表格使人愉悦。特别是在处理大量数据时，巨大的数据量会增加用户的压力，因此要减少视觉干扰。删除不必要的分隔符与背景，去除阴影等。信息内容的有效传达是表格设计的本质，让用户注意力聚焦在核心内容上。所以，做减法设计就显得可贵了。
实现简化的方法是适当删减。如果画面视觉很糟糕，请删除辅助信息、不常用的控件和分散注意力的样式，但要小心删除必要内容。“简单并不意味着没有杂乱，这是简单的结果。简单性在某种程度上基本上描述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“ - Jonathan Ive
这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量，加快数值的对比效率。但如果在表格中使用适合的对齐方式，竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离，明确了单元格范围。即使要用垂直分割线，也要淡，不能妨碍快速浏览。
不使用斑马线，使用不同底色区分指示不同类型的数据是有必要的，但是用来区分同一类数据，斑马线在很多时候又是没有必要的，因为水平分割线已经明显区隔了。
省去分隔线，对于较小的，动态性较小的表，可以省去所有分隔线，并获得醒目的外观。当然，这更多是数据量不大且易分辨的情况。
运用彩色表达组织或含义可能会增加误解，并且引发视觉障碍者的易用性问题。普通表格一般使用颜色代表状态或进度。
其他图形元素，如星号、三角、圆点、对勾、叉等，虽然能够帮助组织数据、更直观的传达信息，但要注意数量，物极必反，要注意克制这些元素的使用。
优秀的表格交互给予用户操控感，不让其迷失在数据中。提供便捷的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便用户查看更多数据信息，快速定位目标数据，或根据特定规律对数据进行排序、突出、降维等处理。当我们将这些组件与交互动作结合，用一些习以为常的交互去操纵表格时，用户将更清晰、有信心、提效率。
筛选和搜索是用户目标数据的好方法，这是一项基本功能，可让用户从默认的表格数据轻松获取要查找的内容，在数据量较大的表中特别有用，一般位于表上方的操作区域或表头区域。
当表格的数据量较大时，可在表上方操作区域增加对象搜索或数据分类来提升用户查找效率，且能同时使用。提供多维的筛选和排序，是增加用户效率的有效方式。
输入搜索框输入用户关心的内容，既可以实时筛选，也可以点击触发，一般须支持模糊查询，否则用户必须记住所有内容，才能查出要找的目标项，成本过高。也有特殊情况，如保密性较高的账号密码列表查询需输入。
无论手动查询还是自动查询，如果查询条件是组合的几个，那么一般是填好全部筛选条件再让用户点击查询按钮。因为如果用户要查询的表格数据具有多个属性且相互联系时，组合条件的查询显然是更合理的。
如果筛选操作是单个条件独立查询，各个筛选条件都是相互独立的，那么最好填好一个条件便自动查询。
筛选条件有时候既需要汇总数据的，又需看单一条件下的数据，比如状态包含“待付款、待发货和待收货等”，此时则是做成Tab单选较好，如下图所示。
放置在表头标签上的筛选，受列内容的影响，一般做单次筛选。通过对表头标签旁按钮的点击，使用户更快捷进入到自己的筛选条件中。通常，表单越左的列数据越重要的，也是筛选频率与需求最高的，因此高频的筛选场景基本可以得到满足。
垂直滚动时，固定表头可以让用户明白当前单元格数据信息的属性和含义，体现界面友好性。当数据列差异不大，用户不能直接根据表格数据分辨类型时，尤其需要固定表头。当表头有操作时，固定表头更能提升使用效率。
数据列表相当庞大而复杂的时候，使用固定表头可以帮助用户区分列与属性。
当呈现大量数据时，表包含的列数超出了该表的最大宽度，水平滚动就无法避免。第一列(前几列)或操作列固定能更方便信息的对比与操作。基于我们读取信息的方式，从左到右放置关键列。最左侧的列会引起最多的关注，当我们感兴趣时，才会查看其他列，它会影响用户阅读所需时间与精力。
在大型表格中，我们才可以水平滚动，最好是寻找可替代方案。表格中文本为什么这么长？能减少字数嘛？可以将文本换至第二行以减少水平宽度吗？能否为过长的文字选择别名吗？可否用图形条目取代？是否可以采取工具提醒？是否可以安排在窗口或对话框里？
一般有两个解决办法：文本换行，对它缩排；在单元格区域截断文本，在提示中显示完整文本。方法一意味着我们要增加表格高度，且每行高度可能不同；方法二，如果不同文本内容的头几个字一样就存在问题了。但这两种方法都比水平滚动好。
表格初始有一个默认排序，也叫初始排序。但有时，用户希望将表格中某一行位置换到另一位置。
拖放似乎很简单。就是抓住某个元素把它放到另一个地方而已。可是，事实上，拖放过程涉及到了大量细节，在拖放期间，需要处理许多特定的状态。
用户在拖动模块时，页面整体布局基本保持不变。因为移动的不是模块，而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小，有拖曳排序需求的场景。又可以运用在多个表一起的情况。
穿梭表格
就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框，同时支持表内上下拖拽更换位置顺序，也可直接选中对象在两栏中按钮移动，完成拖拽行为。
那如何让用户知道可拖拽呢？
增加意向符号；改变光标样式；增加被拖拽对象临时性底色，突出显示。
如何让用户知道怎么拖拽到哪里？
被拖入区域应增加插入位置符号，可以明确指出放置模块的目标位置，减少用户困惑，也可以对放置操作发生后的页面外观提前给出预览。同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果，超出表格范围拖拽对象消失。
被拖动对象应呈现为轻微透明的样式？应该显示为完全不透明？或者改为使用缩略图表示？我认为这三种方法都可以。透明效果也会让更多表格内容对用户可见，有助于用户预览最终放置后的结果。从而方便用户查看页面，也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位，或者说正处于过渡状态。
排序又分为降序和升序，比如，事件相关的表格，默认时间降序排列；风险相关的表格，默认安全降序排序。
表头排序可以辅助用户快速挖掘出需要关注的信息，发现数据信息之间的关系，一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。如果表格中不是所有数据都能排序时，则需要标识出可排序操作的列，一般采用三角箭头做为标识，实时反馈当前操作状态。
可伸缩列
由于存在多个数据标题和列，我们只能根据表格的宽度来展示数据。在某些情况下，表格可允许用户选择他们关注的列，在其固定宽度基础上，让用户可以自由拖动列宽边缘以调整列宽。
自定义选择列
由于数据报表，往往需要满足各种不同的角色在不同场景下的需求，因而在表格数据显示上，一般采取宁多勿少的原则，即尽可能提供详细的数据，由此会数据指标过多，难以在表内完整展示，导致需要水平拉伸，降低了表格的可读性。
针对上面这个问题上，可将所有的指标名称罗列在表格上方，并提供多选操作，在默认情况下仅展示最常用、最重要的几个指标（如下图）。这样能让用户在表格上方看到所有指标名称，避免了原来需要水平拖拽而导致指标浏览不全的情况。其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。
B端后台通常会对应不同的角色及不同的需求，可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。
控制行高
较小的行高让用户无需滚动页面就能查看到更多的数据，但可扫描性的效果易导致视觉迷失。这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。
树形表
行也可以结构化分为不同的类别，前面提到了层级表/树形表，可以嵌套子表格，展开和折叠。可操作按钮一般位于各级行标题左侧，具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。
分页可以将表内容信息划分成独立的页面来显示。
优点：
1.良好转换：当用户是在结果列表中查找特定信息而不仅仅浏览信息流时，分页就是好的选择。你会知道表格总量与当前页的准确数量，能够决定在哪里停下或者去哪里。
再次寻找特定数据时，分页方案让我们能够大概定向到目标数据位置。用户可能难以记录目标数据页数字，但一般能记录大概范围，而页码链接能让用户更容易到达那里。
2.掌控感：无限滚动就像个无止境空间——无论你滚动多久，你会感觉永远结束不了。当用户知道可用行数量时，他们可以自己主观做出决定而不是被动滚动。同样的，当用户能够看到结果的数量时，他们将能够预估他们查看表数据大概要花费多长时间。
缺点：
额外的动作：在分页方案中，用户要到达下一页表内容，就必须点击分页控件上的按钮跳转，等待表格新内容的加载。
表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容，虽然十分方便与诱人，但不是什么场景都适用。
优点：
1.浏览：无线滚动提供了一个的方法让用户浏览表数据信息，而不必等待表格新内容的加载。当用户并不特意寻找特定的内容时，他们需要通过查看大量内容找到自己中意的信息。
2.体验更好：用户使用滚动能获得比点击分页有更好的体验。滚动行为要比点击更快更容易，对于那些连续且冗长的内容，无限滚动要比把分页的有更好的易用性。尤其在表格区域狭小时，使用无线滚动更能节省空间。
缺点：
1.受限性能：页面加载速度是良好体验的一切。尤其是表格计算数据时需注意使用无限滚动，缓慢的加载速度会造成用户的不耐烦与离开。用户在一个表格页面中越向下滚动，就会加载更多的内容，当数据量过大时，结果就是页面性能越来越低。
2.位置丢失：无线滚动同分页相比，没法标记当前位置且不能再随意回到之前位置。一旦离开，就会丢失当前的浏览记录，如果要回到上次的位置，必须得重新滚动去寻找。当用户有这种行为的话，无线滚动就会让用户产生困扰厌烦。尤其当你刷新页面时发现自己又回到表格顶部，不得不重新滚动等待结果的加载以继续查看。
3.信息缺失：滚动条并没有反映出实际数据量。假设快要接近底部了，当受到引诱滚动条再滚动一点点时，结果却会发现表格数据量又刷新了。从一个可用性的角度来说，打破滚动条的正常使用规则对用户来讲是糟糕的。
一般来说，无限滚动适用于在数据有限且信息重复的表格，有利于内容探索。分页则适用用户在寻找特定信息及浏览记录，易快速访问。
表格内容的取舍要建立在对业务的了解之上，尽量精简指标，隐藏不必要信息，减少干扰，避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量，建议默认只展示用户所必须的信息，其他次要信息通过展开下拉等方式展示，为辅助信息提供深层入口。
展开行允许用户无需打开新页面在表格内即可查看附加信息，防止用户迷失。
表格中打开表格，表格组节把相关的行组合在一起，并且能够收缩和展开，各组节层级要有样式区别。如有需要，在每个组节里可以显示数据概要信息。
包括模态弹窗和非模态弹窗，模态弹窗是仅支持打开一个弹窗进行详细查看，非模态弹窗是可以同时打开多个，并允许拖动弹窗位置进行信息对比。
模态允许用户留在表格视图中，且更多地关注附加信息和操作：
非模态弹窗对于主动使用的用户来说可能很有用，可以通过一系列操作，比较不同行数据的细节：
可以通过视图切换查看更多细节，比如在“表格”和“左列表+右详情”之间切换，或者提供“只看文本，看文本和缩略图，只看缩略图”几种查看方式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息，这让用户能够解析大型数据集，而且在涉及到多个项目时不会丢失位置。
编辑表格数据在大众化的Web应用程序中并不常见。不过，在企业级Web应用程序中，表格则占据统治地位。此时，最常见的用户需求，就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。
表格数据的操作大体可分为显性与隐性。显性操作，指操作选项显示在行内，直观明了；隐性操作，当鼠标悬停时或勾选才显示操作选项，界面简洁明快，可减轻空间压力，减少干扰。
操作项一般存在于行数据最后，为固定列，或表上方位置，两者对应多种操作场景。
单行数据操作
文字按钮操作项一般不多于三个时，图标按钮不多于四个时，操作项跟在行条目后面；当超过时，建议将操作折叠收起，点击更多弹出多个操作选项。当操作按钮致灰时，鼠标选中可显示原因。
如果行操作不那么重要，或者说行操作过于啰嗦影响用户阅读时，可使用隐形操作，鼠标在行区域悬停时，可对当前行背景作出区分，或放大悬停区域，同时行尾出现可操作按钮，进行行操作。如谷歌邮箱：
批处理操作
对于数据批量操作的场景，建议将操作放到表格上方，与复选框操作配合使用。批处理操作模式允许用户对一行或多行对象执行操作，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。
表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏，如果空间限制导致操作按钮排列不下，则使用“更多操作”按钮。
二次确认提示：对于用户操作结果给出提示窗反馈，用户点击「删除」后，直接操作；出现提示框告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者15s内不进行任何操作，提示框消失，用户无法再「撤销」。
在执行某些无法撤销的操作时，点击删除后，出现模态弹窗进行二次确认，在当前页面完成任务。同时禁止滥用模态弹窗进行二次确认，就既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。
数据较多时，单个选择数据费时费力。单选框是只能单选，而复选框是能选择单个、多个或全部选择项，而实际上纯粹的单选很少见，所以建议一般场景下在表格最左侧加上复选框，如前面说到的批量操作，多选后，就可以批量操作。点击选框所在行的局部能让整行被选中，每个选定的行都接受突出显示处理，这种做法可增大点击区域减少界面的混乱。
具体设计时，可以按照数据类型进行选择，如邮件已读、未读等。
可进行选择的表格需告知用户已选数据量，在翻页时是否允许跨页选择；全选是当前页视图中的所有项目还是选择表格中的所有项目。
针对于需要进行数据编辑的表格。表内编辑能使数据更具可操作性，表内编辑一般优于弹窗。要启动编辑功能，必须通过鼠标单击，而非鼠标悬停。这样就能确保整洁的网格显示效果。假如是通过鼠标悬停来触发，鼠标每经过一个单元格就得显示一个编辑框，那这种编辑模式就会干扰到不同单元格间的切换，会有多么烦人。
单元格编辑：针对单个，不连续的可编辑的单元格，为了让功能更容易被发现，可以在单元格数据旁放置编辑图标，这样可编辑和不可编辑的单元格视觉对比就十分明显。单击该图标即可触发编辑，单元格内出现输入框，保存数据并退出。有了这个随时可见的链接后，编辑功能就更容易被注意到了。
单元格编辑时，也可以设置整个单元格为热区，以便用户触发。
覆盖层编辑：点击编辑图标触发；通过在页面上方添加一层来放置编辑数据。虽然编辑期间也不会离开当前页面，但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层（如对话框）作为编辑窗口。
选择覆盖层编辑而非行内编辑的原因也很多。有时候，不可能把某个复杂的编辑任务安排在同一个页面中完成，如果嵌入页面的编辑区域太大，会因为把内容过多地推向下方而损害页面的整体感。
而其他情况下，也可以选择中断当前页面流，尤其是被编辑的信息本身非常重要时。覆盖层能够为用户提供明确的编辑空间。提示如果有必要占用专门的屏幕空间放置编辑窗格，而且页面的上下文对编辑任务也不重要，就可以考虑使用覆盖层编辑。
行编辑：针对同一行标签下的数据编辑。新增数据行后，视图定位到新增的行并高亮显示，让用户快速聚焦。几秒后高亮消失，以免过度干扰用户。
不过，表内编辑图标会涉及平衡页面中视觉干扰的问题，如果功能及其提示在页面中的数量过多，很可能造成功能的利用率下降。如果一行有多个编辑选项，则可以适当使用弹窗编辑数据；如果表格有大部分单元格数据需要编辑，则可以全局编辑。 
全局表格编辑：点击表格编辑按钮，当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的角标，进入一种特殊得编辑状态，不会给人直觉造成混乱。这一功能基本用于大面积需要填写和修改时，如大型填写报表。
大型数据表由于支持编辑数据处多，这种方法的另一个问题是容易填错单元格，想象单元格的密集，用户意外编辑错误也时有发生，这样的话需要编辑/暂存/提交三个操作。如果发现编辑的内容报错可被更正，应直接引导用户更正；如果报错内容不可被更正，则告知用户原因。
大型数据表如需减少与表格无关的视觉干扰，提供表格的沉浸式阅读体验，可提供全屏查看的入口，但应注意可以让用户便捷的退出。全屏模式可以直接屏蔽掉页面其它内容，只留下表格区域，用户通过ESC键或按钮随时退出全屏模式，学习成本较低。
当表格数据为空时，在表格的空白内容处加入可创建的快捷入口，引导用户新建表格数据，或者导入数据。如下图邮箱已发送邮箱为空时：
当没有创建诉求的，直接告之暂无数据。如数据是系统产生的，不是由用户创建的，直接告之暂无数据，话术的表述则需与后台文案的整体风格保持一致。
个人关于web表格设计的看法基本写完了，在总结归纳中也发现了自己平常设计表格中的其他问题。大多表格设计在不同场景中需要随机应变，没有绝对的规范，只有相对的规范。我们要理解规范背后的原则，推导出适应其他场景的规范。
文章来源：站酷 作者：小龙哈
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Apple 致力于让每件产品都赏心悦目，与其说官网是产品展示平台，倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事，那它到底有何魅力？文章对Apple的网页设计展开了梳理分析，与大家分享。
每当有新产品发布时，我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段时间发布的 iPad Pro 也一样。
这背后是 Apple 基于 webGL 技术，创造的一种沉浸与交互式产品体验。
我们在产品介绍页可以看到，苹果使用了大量的滚动 scroll 来体现连续性。
一方面，滚动作为大多数 Web 用户最自然的操作，学习成本极低。
另一方面，在冗长的页面下，滚动能让产品特性保持更自然的转场衔接。
iPad Pro 的连续性
另外，采用了大量的动画式转换（animated transition），即操作时展示的动态效果，以此来增加趣味性。
伴随着丰富的、若隐显现的章节文案，就像电影的旁白一样，娓娓道来。
通过滚动的方式增加交互性，这是明智之举。试想一下，如果只放置已渲染的演示视频，那么用户的操作会受到限制，只能在视频中前进或后退，毫无乐趣可言。
AirPods的趣味性
说到言之有序，我们看 iPad 的页面介绍。四款产品，分别是：iPad Pro、iPad Air、iPad、iPad mini。
拍摄角度的秩序感，可谓妙不可言。
iPad的秩序感
如此一来，即显得有序，也不会导致视觉疲劳。
其次，官网与 iOS 保持协同的设计语言，给用户呈现了一致的感官体验。
从 iOS 11 开始，苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合，转向的 Medium + Bold ，以此增强信息传播中的识别力。
HomePod
另外，高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。
第三是视差带来的层次感。
苹果奉行包豪斯的无装饰和极简的理念。当然，它不是那种附庸的美观及外表的光鲜，而是将复杂难懂的技术以简洁的形式传达给用户。
Mac Pro 视差滚动
在信息层次方面，Apple 的编排设计由浅入深，犹如抽丝剥茧。很好的利用了视差滚动，传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。
不仅如此，样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉，呈现刺激与震撼。举两个例子：
A13芯片的扩张力
扩张力：整个画面以 A13芯片 为视觉中心点，元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导，视觉张力就出现了，让人感觉巍峨壮观。
Pro级摄像头的排斥力
排斥力：通过元素的大小对比，可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写，传达空间意识。视觉上被其构图、美感触动。
再聊聊苹果的高级感是怎么来的？
我们都知道，高饱和度的色彩，会影响人的情绪波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。
iMac Pro 高级感
回过头来看苹果官网的大部分页面，除了产品界面色彩 和 按钮蓝 之外，其他的文字、背景、控件一律采用黑白灰色系，以此营造高级感。
甚至是 iPhone 11 Pro 新出的暗夜绿，也是高级灰中加了一点点绿而已。
换言之，减少使用颜色的数量，降低色彩的饱和度都能削减色彩对人的情绪，起到提升产品高级感的效果。
iPad 留白
除此之外，恰当的留白可以更加突出产品内容，让重要的信息更准确的传达。并且能营造出广阔的空间感，让画面得到延伸，呈现一种意境美。
所以我们做设计时应当多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的气质。
这又印证了现代主义建筑大师密斯·凡德罗的那句话：Less Is More。
当然，只有留白是不够的。既然是做宣传，那么一份高分辨率、精致的配图就显得尤为重要。
苹果官网大部分的产品都是采用实拍+后期修图，而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果，这一点能看到苹果对于品质的追求。
Designed by Apple in California
不仅如此，苹果产品圣经《Designed by Apple in California》，以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频，相当硬核。
做过英文 Web 的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。
这不是崇洋媚外，心理学有个词叫做「母语羞涩」。简单来说就是，中文对于我们来说，太常见了会让人产生一种廉价感（实际上是羞涩感）的心理感受。
老外也一样，你可以看到美国企业：苹果、麦当劳、星巴克都是使用图形 Logo，而日本企业不用母语，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一台电脑，何必是电脑。
回到苹果官网，我们看到一部分文案是英文产品名称，这个不会感觉羞涩。
那中文部分怎么办呢？比较有意思的是，Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差，但基本上能明白字面意思。
其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格，来凸品牌气质。举几个例子：
最后一点。生活要有仪式感，苹果官网也有仪式感。
国际妇女节专题
在一些特殊的日子里，例如三八节当天，友商选择打广告促销。而苹果推出了国际妇女节专题，致敬女性的伟大，这一做法颇具人文情怀。
不过话又说回来，感动归感动，还是参与友商的打折活动香。
文章来源：人人都是产品经理 作者：阿洋
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。
暗黑模式是指把所有 UI 换成黑色或者深色的一个模式。
需要说明的是，暗黑模式不只夜间模式：
暗黑模式更多的目的是希望使用者更加专注自己的操作任务，所以对于信息内容的表达会更注重视觉性；
而夜间模式则更多是出于在夜间或暗光环境使用下的健康角度考虑，避免在黑暗环境中长时间注视高亮光源带来的视觉刺激，所以在保证可读性的前提下，会采用更弱的对比来减少屏幕光对眼睛的刺激。
同时，从使用场景上来说，暗黑模式既可以在黑暗环境，也可以在亮光环境下使用，可以理解为是对浅色主题的一种场景化补充，而夜间模式只建议在黑暗环境下使用，在亮光环境使用时很可能并不保证信息可读性。
1. 更加专注内容
试想一下，我们在电影院看电影时，为什么要全场关灯？甚至有些 APP，在影片的下方也会又一个模拟关灯效果的操作，来让整个手机屏幕变黑，只剩下视屏画面的部分，这都帮助我们可以更专注、更沉浸在当前的内容下。
色彩具有层级关系，深色会在视觉感官上自动后退，浅色部分则会向前延展，这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作；尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。
2. 在暗光环境下更加适用
如今社会我们身处黑夜使用手机、电脑、iPad等设备的次数越来越多，环境光与屏幕亮度的明暗差距在夜间会被放大 ，亮度对比带来视觉刺激也更加明显，使用暗色模式可以缩小屏幕显示内容与环境光强度的差距，同时也可以为设备的续航带来积极影响，可以保证使用者在暗光环境下使用 OLED 设备的舒适度。
3. 大众喜爱
黑色一直以来就可以给人以高级、神秘的语义象征，相比于浅色模式，暗色模式藏着更多可能性。
在这次暗黑模式的设计中主要遵循以下两大设计原则：
1. 内容的舒适性
不论是颜色还是文字或是组件本身，在暗色环境下的使用感受应当是舒适的，而不是十分费力的，如果一个颜色在浅色下使用正常，在暗色下却亮的刺眼或根本看不见，那必然不够舒适也不可读；所以在颜色的处理上不建议直接使用，这样会让界面变得到处都是「亮点」，让眼睛不适的同时，也会带来许多误操作。
2. 信息的一致性
暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。举个例子，在浅色模式下越深的颜色，与界面背景色对比度越大，也就越容易被人注意，视觉层级越高，比如 tooltip；在暗黑模式下我们同样需要遵循这一规律，所以对应所使用的颜色也就越浅，反之则会越深。
在大量的企业级产品界面中，我们通常用只用一个白色背景结合分割线就可以搞定所有界面的板块层级，因为在浅色模式下有投影可以借助，然而暗黑模式中投影将不足以起到如此功效，我们需要通过颜色来区分层级关系。
在经过对蚂蚁企业级页面的典型布局结构评估后，我们在中性色中增加了三个梯度，将中性色扩展至 13 个
并定义出通用情况下页面中的框架层次，主要分为三大块：
在目前的暗黑体系下，我们分别为这三大块从浅到深定义了#1F1F1F、#141414、#000000 三个颜色，在实际应用中，你也可以根据自身业务的需求，从中性色板中直接选用或是依据透明度的思路自定义出合适的中性色彩。当定义出较为明确的框架层次和颜色后，也对后续系统中组件的颜色配置有着重要的指导意义。我们需要考虑组件出现在不同颜色背景下的可能性及其表现，尽量保持一致性。
众所周知，暗黑模式与浅色模式最大的不同就在色彩的处理上，在暗黑模式中，我们并不想打破浅色模式下基础色板的配置规律及色值，当一个应用或站点深浅模式并存时，希望在色彩上有一定延续和关联，而不是毫不相关的两套色板，这样一是避免开发及后续的维护成本，二是实际切换和使用时，可以保证一致性，这意味着需要借助一定规则。
这里分享一下我们的处理思路：
基于 Ant Design 自然的设计价值观，我们先从自然界中寻找灵感，如果说浅色模式如同初升时的朝阳，那暗黑模式就是落日下的晚霞，各有各的韵味，同一片天，唯一不同的是，受光线亮度的影响，晚霞整体会暗一些。
所以我们大体的设计思路也是基于浅色的基础色板，通过结合透明度的转换，去得到一套暗黑模式下的色彩。这样的好处是，深浅模式下的色彩根基是同一个，在这样的基础上经过透明度的变换得到的结果也会相对和谐，同时也符合我们一致性的原则。
这里我们借助下面这两个概念对透明度进行转换：
对比度极性
对比度极性分为正极性和负极性。
这里可以给大家分享对比度查阅的一个工具：WebAIM，只要输入色值就可以看到具体的值，十分方便。
正负极性差值
顾名思义便是正负两者的差值，这里取的是绝对值。
根据一致性原则，我们尝试通过对比一套颜色的正负极性变化趋势来找到转换规律。
首先可以看下，如果一个颜色在不做任何修改的前提下直接使用，它的正负极性趋势以及差值趋势的走势和关系是怎么样的，我们尝试描绘出这样的曲线，他们的变化规律也将作为我们规则转换的参考标准。
经过对比，可以发现一些变化规律：
首先来说下「差值趋势」，横向对比可以发现，不同颜色的正负极性走势是很不一样的，可以看到在黄绿色段差值曲线达到一个变化峰值，这是由于黄绿色本身由于明度、饱和度值相比其他颜色偏高，所以总是有种刺眼的感觉，生活中也会用它来作为警示、提醒的作用，所以在深浅背景下的对比度有一个比较大的差异，可以说这个变化是正常的。
这点也可以从「正负对比度极性趋势」两者间的相对关系反应出来，从红色到洋红，绿线一开始从逐渐在蓝线的上方一点，开始逐渐上移，最后在峰值处开始慢慢下移，在「极客蓝」这个色相中接近重叠，在洋红处又慢慢下移，说明浅色下越深的颜色，在深色中越亮，反之则越暗。
纵向比对单个色板，可以发现，其斜率变化主要受颜色的明度、饱和度影响，可以反应一个颜色的不同梯度在黑白背景下的变化规律。
有了这个大的变化规律，我们便可做到心中有数。首先以 Ant Design 的品牌色「破晓蓝」为例，经过在多个业务、场景中不断尝试与调整，我们得到一个透明度转换规则：
并将这个规则应用在其他 11 套色板中，验证其可用性。这个过程确实没有什么快捷通道，唯一的办法就是不断尝试。
最后，我们将经过规则转换的实色与常规颜色的变化趋势做对比：
可以看到在大趋势走向上左右两侧图基本一致，这代表两个色板在变化规律接近一致，基本可以证明规则的合理性。区别在于，对比度负极性和差值相对于右侧未经处理的值明显有所下降。这是由于透明度的处理让暗色下的颜色在明度、饱和度上有所下降导致。
再仔细观察可以发现，在左侧的常规颜色中，从破晓蓝-洋红这段偏冷色系几个颜色中，差值趋势变化最平缓的是「极客蓝」这颜色，这说明该颜色在深浅背景下的表现较为稳定，起伏不大，当基于一个统一的透明度规则前提下，会让它在暗色下的对比度减弱，所以反而会导致差值趋势变大，所以我们会发现差值趋势变化较小的颜色转移到了「破晓蓝」、「洋红」中，也是一个正常现象。
最后可以看到颜色在调整过后实际应用的效果
在官网中点击「切换」即可预览：
如果上述 12 个色板不满足你的业务需求，你也可以在官网上自己选择颜色，我们会根据规则帮你生成一个暗色色板。
另外，如果在实际应用过程中，你选了色相在 225～325 间的深冷色系作为主色或强调色使用，建议适当提高透明度的值，避免在暗色界面上引起阅读障碍。
暗黑模式中，文字的使用与浅色模式基本一致，依旧从 85%-65%-45%，唯一不同的地方在 disable 的状态，其透明度值提升为 30%，避免颜色过淡真的「不可见」。另外，对于 #FFFFFF 的纯白色文字，尽量避免大面积使用，尤其对于表格、列表这类偏阅读浏览的场景，如有需要，做小范围强调即可。
暗黑模式中的阴影规则与浅色模式基本保持一致，但由于本身的界面背景较深，在阴影色值上也有所加深，帮助层次更好的体现，整体将色值扩大到原先的 4 倍，但在阴影的位移、扩展上均保持不变。
分割线在暗黑模式中建议根据界面中常用的背景色，通过透明度换算成实色使用，Ant Design 中分割线主要有 #434343 和 #303030 两种颜色，分别对应浅色模式下的 #D9D9D 和 #F0F0F0，这样做的目的主要是为了避免带来额外的交错叠加，尤其对于表格类以及很多带有 border 属性的组件，实色会更为稳妥便于记忆。
适应性方面，Ant Design 的暗黑模式可以与海兔及可视化资产进行无缝衔接，使用时可以任意组合拖拽，你可以下载 Kitchen 插件，获取海量资产。
暗黑模式最近越来越受到人们的关注，与某一特定产品的暗黑设计不同，Ant Design 的暗黑模式更多以设计体系的角度考虑企业级这个大场景下的内容，在易用性、扩展度、复用度等方面还有许多需要完善和继续研究探索的地方，我们会在未来的迭代中逐步进行，先完成再完善。希望上述内容能对大家在暗黑模式的设计上有所帮助。
文章来源：优设 作者：AlibabaDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
常见的网页设计、文章设计错误
本文来自阮一峰分享
1.内容未按逻辑分成块
用户可以根据逻辑块轻易的获取信息。
具体做法为：将padding设置为120px-180px，同时不同的逻辑块使用不同的背景。
2.每个逻辑块的空白大小不一致
对于每个逻辑块，需要设置同等大小且适宜的空白。否则网页看起来会很混乱，作者不会对每个逻辑块同等对待。
3.Padding不能设置过小，否则用户无法将内容分为逻辑块
为了这点，插入大的空白（至少120px），以使内容按逻辑块分开。
4.背景图片和文字 应该对比鲜明
5.在一页中，样式过多
太多不同 的排版和样式将会使得页面不太专业以及难以阅读。
解决的方法是，以字体为例，设置一种字体，字体为正常或粗体（保证在两种不同样式之内）
6.背景颜色块过于狭窄
7. 在一个狭窄的列中，放入了过多的文字
这导致用户阅读需跳很多行，整体看起来也不行。推荐的做法为，减少列的数量，精炼文字。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
2019草莓音乐节的主题是“循环世界Circular World”。
摩登天空联合世界自然基金会(WWF)发起今年的音乐节主题“循环世界”，以环保为核心理念，携手海内外环保机构对草莓音乐节进行多方位环保实践，并聚合知乎、摩拜等多平台力量影响年轻人，让环保成为青年生活方式的一部分。
今年的主视觉海元素是被三个箭头环绕的草莓星球，表达了“循环世界”的主题。风格延续了去年的样式，色彩略有调整，并加入了太空元素。
今年的主视觉当然仍由摩登天空的当家工作室——MVM design label_工作室操刀。
这张是今年的主视觉海报。今年，MVM特地为各城市举办的2019草莓音乐节单独设计了专门的海报，一样的版式，不一样的内容，既统一又包含新意。
2019草莓音乐节武汉站
2019草莓音乐节成都站
2019草莓音乐节西安站
2019草莓音乐节上海站
2019草莓音乐节长沙站
在今年3月30日的“地球一小时”公益活动中，草莓音乐节把自己的参与定义为“草莓星球一小时”。
而武汉OYO酒店与摩登天空联合主办的活动中，一张以“音乐满房”为主题的插画也分外有趣——原来大家为了迎接音乐节，都关上门在房间里引吭高歌呀…
音乐节配套周边产品的销售，推广视觉设计也很有意思。
即使不是音乐迷，设计师对这样的设计也无法抗拒吧！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
蓝蓝设计的小编 http://www.lanlanwork.com
