平面中的版式与用户界面中的版式区别在哪里？

我曾经不止一次的强调，版式设计是视觉设计的核心，也是视觉设计的基础。如果把一个完整的设计版面比喻成人体的话，那么版式就是骨骼，色彩就是血肉，骨骼的作用是支起血肉，所以作为载体肯定是先行的。

很多设计者在设计版面时习惯性的先去尝试选择配色，甚至图标风格等等，然而在版式没处理好的情况下如何去确认选择好的配色应该应用在哪里？比例如何？配色是一种填充行为，它需要通过载体去呈现出效果，所以视觉设计也好，界面设计也好，第一步先把内容排上去，第二步思考应用场景与信息层次，第三步进行板式设计，其次才应该是色彩跟细节的处理，从整体到局部再回归整体，顺序很重要。

那么同样都是版式设计，平面设计中的版式跟用户界面设计中的版式有什么区别呢？

其实设计中的很多理论知识是相通的，甚至深挖一下就会发现艺术之间的都是相通的，设计来源于生活，音乐也来源于生活，最近流行的嘻哈同样来源于生活，比如嘻哈音乐中的歌词：“你看这个面，它又长又宽，你看这个碗它又大又圆…”

开个玩笑，当然艺术与生活是相通的，平面跟用户界面也有很多的相通之处，然而差异化也同样时存在的，比如用户界面设计相比平面设计来说具有如下几个特性：

内容的不确定性

对于用户界面设计来说，所有的内容都是具有不确定性的，比如标题可能出现两行也有可能一行，可能特别长也可能为空，那么板式就需要为一些边缘情况做容错处理。而平面设计中的版式则相对内容固定。

长时间停留

平面设计中的产出一般用户不会长时间浏览（书籍除外），海报、卡片或者包装设计一般都是为了让用户在短时间内获取到主要信息。而用户在使用APP时更多的是长时间停留，比如用户使用业务类产品购物时也需要大批量浏览然后挑选合适的商品，使用内容类产品看新闻或者段子时甚至平均停留时长达7分钟以上，所以用户界面设计中的版式相对较为规整、耐看。

阅读效率

平面设计中的产物一般较为独立，比如单张海报或者单个商品折页，其内容相对固定，比如海报可以单页面大面积留白来凸显格调。然而对于用户界面设计来讲每一个页面的存在都是为了完善一个交互流程，并且在批量获取信息时如果太过形式感会让用户的阅读效率出现问题，所以用户界面设计中的版式较为紧凑、易读。

信息层级多样性

一个产品内需要传递给用户的信息过多，信息层级随之也较为多样性，如果同一个页面中不同表意的信息板式层级相同就容易提高用户误操作的几率，并且多样的层级需要使用各种不同的板式技巧将其呈现出对比而保持页面的整体统一性，所以用户界面设计中的版式较为多样、有规律。

Article ideographic

一篇较为系统与全面的版式讲解，从规范化的布局形式到平面构成在用户界面设计中的应用与体现。每一种板式形式都有其内在的表意与应用场景，尊重用户使用习惯与对物理世界的认知，先知其所以然，再尝试着去做有源优化。篇幅较长，会穿插一些有趣的标记点便于读者朋友们当作书签碎片化阅读。

01

常见布局形式及适用场景

移动端相比于PC端，物理尺寸小了很多，布局与PC端也是相差甚远。所以尽量不要把做网页设计的习惯带到移动端界面的设计中。作为用户体验设计师需要对信息进行优先级划分，并且合理布局，提升信息的传递效率。每一种布局形式都有它的意义所在，下面来谈谈手机界面设计中常用到的一些页面布局。

  标签式布局（网格式布局）

标签式布局也叫网格式布局，一般承载较为重要的功能，由于标签式的设计较有仪式感，所以视觉上层级很好，一般用于展示较多的快捷重要入口，且各模块相对独立。一行标签一屏横排不可超过5个，超过5个需要左右滑动显示。标签式布局的优点是各入口展示清晰，方便快速查找。缺点是扩展性较差，标题不易过长。并且非重要层级的功能，或者不可点击的纯介绍类元素，不适用于标签式设计。每一个标签都可以看做为界面布局中的一个点，过多的标签也会让页面过于琐碎，并且图标占据标签式布局的大部分空间，因此图标要设计的较为精致，同类型同层级标签要保持风格以及细节上的统一。

  列表式布局  

列表式布局是移动端应用小屏幕的限制下最常见的版式形式。尤其适用于文字较长的信息组合，列表式的布局优点是信息展示较为直观，节省页面空间，浏览效率高，字段长度不受限制可以错行显示。缺点是单一的列表页容易视觉疲劳，需要穿插其他版式形式让画面有些变化，并且不适用于信息层级过多并且字段内容不确定的情况，这种情况仅仅通过分割线或者间距的区分容易让用户出现视觉误差，每一个列表可以看做为界面布局中的一条线。

  卡片式布局  

某种程度上来说，卡片式设计是在栅格的基础上更进一步，将整个页面的内容切割为N多个区域，不仅能给人很好的视觉一致性，而且更易于设计上的迭代。卡片式设计的另一个典型好处是可以将不同大小、不同媒介形式的内容单元以统一的方式进行混合呈现。最常见的就是图文混排，既要做到视觉上尽量一致，又要平衡文字和图片的强弱，这时卡片设计经常有奇效。当一个页面内信息板块过多，或者一个信息组合中信息层级过多通过列表式设计容易使用户出现视觉误差时，卡片式的设计就再合适不过了。卡片式设计的缺点是对页面空间的消耗非常大，需要上下左右各有间距，就会导致一屏呈现的信息量很小。所以当用户的浏览是需要大范围扫视、接收大量相关性的信息然后再过滤筛选时，或者信息组合较为简单，层级较少时，强行使用卡片式设计会让用户的使用效率降低，带来不必要的麻烦。

  瀑布流布局  

当一个页面内卡片的大小不一致，产生错落的视觉效果就是瀑布流。瀑布流设计适用于图片/视频等“浏览型”内容，当用户仅仅通过图片就可以获取到自己想获取的信息时，那么瀑布流再合适不过了。移动端的瀑布流一般是两列信息并行，可以极大的节省交互效率，并且可以用来制造“丰富/华丽/眼花缭乱”的体验，适用于电商或者小视频类应用。瀑布流布局的缺点是过于依赖图片质量，如果图片质量较低，整体的产品格调也会被图片所影响。并且瀑布流布局不适用于文字内容为主的产品，也不适用于产品调性较为稳重的产品。

  多面板布局  

多面版的布局更常见于PAD终端，但移动端也会用到。多面版很像竖屏排列的Tab，可以展示更多的信息量，操作效率较高，适合分类和内容都比较多的情形，多用于分类页面或者品牌筛选页面。优点是减少了页面之间的跳转，并且分类较为明确直观。它的不足是同一界面信息量过多，较为拥挤，并且分类很多时，左侧滑动区域过窄，且不利于单手操作。

  手风琴布局  

手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容，在不用的时候，内容是隐藏的。因此它可承载比较多的信息，同时保持界面简洁。手风琴可以减少界面跳转，与树形结构相比，手风琴减少点击次数，提高操作效率。手风琴在浏览器上很常见，很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。手风琴布局的缺点是同时打开多个手风琴菜单，分类标题不易寻找，且容易将页面布局打乱。

休息室 01-名言赏析

A moment of ease

并不是每个人都需要种植自己的粮食，也不是每个人都需要做自己穿的衣服，我们说着别人发明的语言，使用别人发明的数学…我们一直在使用别人的成果。使用人类的已有经验和知识来进行发明创造是一件很了不起的事情。

——史蒂夫.乔布斯

白话解析  

没有人可以做到绝对的原创，如果不去欣赏别人做出来的东西，可能你苦思冥想了很久的创意在十年前就已经被别人用过了。即使在做设计的过程中参考过别人的作品，在竞品中集百家所长之后再进行的创新，同样是一件非常了不起的事情。

02

界面设计中的栅格系统

1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。 他们的首要任务是设计出科学的、合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印 刷版面就有 2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

  栅格系统在界面设计中的作用  

平面设计中的栅格更多作用是让可以让版面的设计有据可循，从而让复杂的信息整齐，有秩序的呈现，阅读体验更佳。比如一些书籍，报纸中常见的栅格系统。栅格系统也是最早出现于印刷，简单的说就是运用固定的格子使界面排列工整简洁。后来延续到web设计，其中比较有名的是960 Grid System。目的也无非让网页布局的更合理、易于阅读等。

而在APP界面设计中，栅格系统不仅仅用于美观页面，遵循栅格系统的设计也可以极大的提升程序开发的效率。APP的开发环节与设计环节是完全不同的，设计可以理性，一切元素都可以随意的去摆放让其符合设计者自己的审美，但是程序开发的过程就是在写规则的过程，页面中每一个元素都要有其存在的规则。就比如我们在设计一个页面标签栏部分时，到底应该是一个什么样的规则。

很多刚入门的设计者习惯把这些元素随意摆放追求单纯的视觉效果，其实即使简单的四个标签，也是有它所要遵循的栅格系统在里面，通过这种方式可以确保图标在无论什么屏幕上都可以保证绝对的对称。其实不论多初级的设计者，都在无意间使用过栅格系统，比如最基础的给界面留出固定的边距。

  栅格系统中常见8px原则  

讲到这里，很多读者心里可能会有个疑问，难道做手机页面时，也需要在设计页面之前把栅格都画好，然后再填充元素吗？其实移动端的栅格相对灵活一些，而且由于屏幕较窄，横向基本很会同时出现3个信息板块，所以最基本的的3栏网格在移动端页面设计时也很少会用到。这里分享一个在界面设计中比较常用的8px栅格原则，最早提出将8pt栅格应用到web中是spec里面的一篇名为The 8-Point Grid的博文， 其中有这么一段：8px系统实际上主要有两个版本。一是将元素放到 8px栅格中（称之为 " 硬栅格 "）另一种方式是仅测量元素之间的距离是8px的多少倍（称之为 " 软栅格 "），平面设计中常用的时硬栅格，而APP界面设计中常用的就是软栅格。

8px栅格的原理就是界面设计中所有的元素，和间距都要遵循8或者8的倍数。当然这里的8px是@2x图尺寸下的，如果在1倍的逻辑尺寸下做图的话，那就是4pt或者4dp，遵循这个原理可以让界面整齐规范，并且在任何机型上元素都呈现最佳效果，像素无虚边。首先咱们先来解释一下为什么是4pt而不是2dp，其实这个原则由来已久，早在安卓240*320分辨率手机还较为流行的时候就有这个栅格概念了，当时安卓和iOS的逻辑尺寸都还以320*480为准，如果以320*480分辨率为@1x逻辑尺寸，那么如果在屏幕内出现一个2dp的元素是，在安卓各屏幕内经过适配将会是如下尺寸：

很明显，当2dp的元素出现在240*320这个分辨率的机型上时像素会出现小数点，也就意味着像素会出现虚边。那让我们再试试4dp的元素适配到各屏幕还会不会有这种情况。

经过尝试后我们会发现，在320*480为逻辑像素下4dp的元素适配到各个屏幕上都不会出现小数点，也就是说只要以4dp为原则，只要元素或者页面间距为4dp的整数倍，就可以保证页面不会出现像素虚边。这就是8px原理最早的由来。

而如今，320*480的机型基本不占有市场份额，所以这个原理其实不用如此严格的遵循了，只要给页面中所有的元素一个基础的最小单位，一切元素的尺寸都是它的整数倍即可。比如说我们在做一个页面时，其实每一个间距或者元素大小都是要有规律去遵循的。

休息室 02-名言赏析

A moment of ease

简单比复杂更难实现。我用多年时间让自己的思维变得简单、有条理，最后开发出超凡脱俗的“苹果”系列产品。选择越多，我们越要记住：奇迹往往来源于一个简单而执着的信念。

——史蒂夫.乔布斯

 白话解析  

在一些复杂的条条框框中做到简单是非常难的，不要认为会的越多就越有竞争力，努力在一个方向上做到一个高度，坚持做一件枯燥的事情比不断尝试新的东西更有难度，然而奇迹总会在简单的反复中到来，不忘初心。

03

用户界面设计中的平面构成

平面构成是具有共性的设计语言，已为当今社会各个艺术、设计门类所应用，平面构成与其他应用设计的学科一样，都是为了完善与创造更赋予现代感的设计理论和表现形式。平面构成以一个全新的造型观念，给艺术设计注入了新鲜的血液。

  统一与变化  

在界面的设计中，考虑用户的视觉会长时间的停留在某个页面阅读信息，所以统一的列表形式是非常有必要的，可以减少用户阅读时的阻碍，然而长时间单一样式的列表阅读会使用户视觉疲劳，产生厌烦的心理，所以这时就要在列表内穿插不同的模块给统一的列表页面加以变化。就像高速公路的设计为何都不是笔直的，除了地理原因之外，还有部分原因是驾驶者长时间行驶在没有变化的直线容易产生倦意，从而造成危险，这就是统一与变化的必要性所在。

统一是主导，变化是从属。统一强化了版面的整体感，多样变化突破了版面的单调、死板。界面中相同元素的风格统一是界面设计的基础统一原则，增强设计效率的同时也会增强开发的效率，而不同表意的板块之间就可以通过不同的版式形成变化，可以让页面充满生命力与运营感。

以两个互联网招聘产品的主页比较为例：

例如上面的左图是拉勾的主页，多样的板块变化让用户首次进入主页时能感觉到产品是“活”的，这里遵循了字号，配色，板块间距等的基本统一之外，各不同板块之间的样式又保持绝对的统一。遵循统一规范的同时再进行版式上的变化会让页面视觉上整体而又不会产生“闷”的视觉与心理感受，使产品更具生命力。再如右图的BOSS直聘，单一的职位列表让首页没有了版式的变化，就会容易让用户视觉疲劳，当然从产品角度来讲，交互效率会有象征性的提升，至于如何取舍就要看产品的最终需求了，这里仅从版式进行分析。

当然这些是大方向的统一与变化，其实细小到图标的设计同样有这个原理要遵循，在设计同表意的图标时，统一配色、线条粗细、尺寸的前提下，在外形上不受约束的进行变化同样会产生视觉上的美感。

  对比与调和  

平面设计中的版式对比分为很多种，在界面设计中，对比是为了强调差异突出主题，让页面信息更有主次，而调和是为了寻找共同点，调整页面的舒适感。我们常用整体调和，局部对比的方法。

首先是大小对比，往大了说有板块之间面积的对比，往小了说有字体之间的字号大小对比。以京东金融的主页来举例说明。

如图所示，京东理财卡片部分主要虽文字信息不多，却占据了整个页面的四分之一左右，与下面的板块从面积上形成大小对比，从而使界面有主次，并且可以主观上通过设计指引用户点击主要板块。而小的板块面积又差不多相等，起到了调和页面的作用。

如果说上面的例子时大板块的对比与调和，那么下面就以知乎的信息列表为例，讲一下界面细节上对比与调和的体现。

如图所示，一个信息卡片的文字使用了三个对比层级，主题字最大，简介文字其次，然后就是话题名称以及评论点赞信息等。通过简单的字号对比就可以让信息层级清晰可见，然而第三层级的文字用在了两个地方，话题名称与底部的评论信息处都用了同样的字体，这就是调和的作用，避免过多的无意义对比使页面信息层级过多。

  对称与平衡  

界面设计中的版式对称与平衡是一对统一体，常表现为既对称又均衡，实质上都是求取视觉心理上的静止和稳定感。界面的设计虽然无法主观的控制产品内字段的长度，但设计者可以通过给不同元素合理的存在位置，从而最大程度的让页面对称与平衡。以简书的发现页面来举例说明。

如图所示，整个页面仅从版式来看还是比较均衡的，仔细分析来看，左面的大篇幅文字被右方的图片从版式上“压”住了，使得从用户心理上这个列表左右的重量是相同的。再比如为你推荐模块的人物卡片，上方的头像与下方的按钮也形成了一种视觉重量上的平衡。而下方标题栏处五个图标，中间的红色按钮起到视觉平衡点的作用，两边的四个图标对称显示，所以整个页面显得非常规矩，这就是视觉上版式舒适的原理所在。

同样，我们再讲一下界面细节上对称与平衡的体现。

为什么加入购物车的按钮做的如此突出，面积还这么大，试着去分析。首先在产品需求去分析，每日优鲜不像淘宝，或者京东，淘宝或者京东这种我们选择物品时购买的频率并没有那个高，最起码很少买个这个外套同时又把另一个外套下单了，而每日优鲜是有满多少减配送费的，并且很少有人愿意花10元买个火龙果再花6元的配送费，更多的用户喜欢下单一个火龙果，顺带着买些鸭脖，再买些蔬菜吧。所以从这个角度来说，加入购物车的操作频率还是比较高的。那么再从版式去分析，从右图应该就可以很清晰的看的出来，这个版面如果去掉列表右下角的购物车，或者弱化，明显会感觉页面右边缺少支撑点。这是因为列表左面的摄影图从视觉重量上比文字要重得多，而面性按钮放到右下角同样起到稳固版面的作用。

  节奏与韵律  

有始有终的设计才完整

说到节奏与韵律，最基础要注意到的就是要让设计的版面有始有终。有始有终，是一种态度。就算是单个版面，也要给用户明确的视觉发起点和视觉结束点，长图或者多版面的设计更是如此。优秀的设计者做设计总是首尾呼应，这是对用户最基本的尊重。前段时间有几个朋友给我发作品集让我帮忙看一下，里面的作品都很细致，一看就没少下了功夫，可是对于作品集的封面和尾页基本都不太重视，甚至很多都不做，这样也会让作品集大打折扣。读者就像听众，需要一个鼓点让我进到这个旋律里，读者也需要一个封面，告诉他，“对，我的作品从这里开始”。并且封面或者某个作品的开头是对于读者的第一印象，如果你也喜欢听歌的话，就知道一首歌的前奏有多重要了。

用户的视觉浏览习惯

读者在看报纸时，一般是由左到右、由上到下、由题目到正文的阅读过程，当然在使用移动端产品的时候也不例外。如果编辑设计版面时在标题、图片、栏目、点线面上做文章，让它们有所变化，在视觉上串成串儿，形成跳跃式的块状、点状，这样读者读来就有一种节奏感。比如我们来看下图思考一个问题，为什么每日优鲜的列表设计是左图右文，而今日头条的设计是左文右图呢？

如图所示，看似设计师排版的个人习惯，实则也是思考用户浏览习惯后的产物。上面讲到了用户的浏览习惯是由左到右、由上到下，如果是左图右文的排版方式，那么用户一定是先看到图次而再去看文字，每日优鲜这种产品用户第一眼看到图基本就可以知道这是什么东西，甚至有些看名字认不出的东西看图片也就可以大致了解了，所有左图右文的排版符合用户的视觉习惯。

而对于今日头条这种产品来说，图片只起到辅助作用，用户看到图片基本不会联想到具体内容，所以文字标题才是用户最想要看到的内容，那么左图右文的排版方式也就符合了此类产品目标用户的浏览习惯。

版式是页面的“导游”

如果一个页面需要“1，2，3，4”来引领用户的视觉，那就是太初级的设计了。优秀的设计者都可以通过版式本身引领视觉走向，就像上面所讲的最基础的视觉规律，人的视觉阅读习惯是由左到右，由上到下，当然不仅限如此，比如人的视觉对有色相元素优先，无色相元素次之，饱和度高的元素优先，饱和度低的元素次之。白色背景下，颜色越黑视觉层级越高，黑色则相反。大的元素优先，小的元素次之。复杂的元素优先，简答的元素次之。字体来说，衬线字体优先，无衬线字体次之，毛笔字体或其他特殊字体优先，黑体次之。周围留白多的元素优先，留白少的元素次之。通过这些基本的视觉原则去营造版式的阅读顺序，让版式成为作品阅读时的“导游”，而不是阿拉伯数字。这也会让设计的界面更有节奏与韵律。

休息室 03-名言赏析

A moment of ease

单靠科技是远远不够的，必须要让科技与人文科学以及人性相结合，其成果必须能够让用户产生共鸣。

——史蒂夫.乔布斯

白话解析  

用户需要引导跟理解，不要把每一个用户都当想的太聪明，即使某一个创新真的可以让用户受益甚至改变用户的生活方式，也需要想方设法的让用户轻松没有压力的去接受。

04

亲密性与相似性原则

  打开软件之前设计就开始了  

初级设计者习惯在接到需求之后就开始着手思考配色，版面风格。其实整理文案，给文案有秩序的归类也是设计过程中非常非常重要的一步。出于优秀的设计者之手的作品都有一个共性，干净整洁。而初学者就算去吸取配色，抄袭版式，出来的效果往往仍然达不到那种感觉，其实缺少的就是文案整理能力，在一个版面内最相关的元素一定是最相邻的，不相关的元素就有肯定的大间距隔开，这是在选择配色之前就要完成的设计过程。以国外某优秀作品为例，我们去掉其色彩，仅看其亲密关系的体现和信息层级的划分。

如图所示，干净，整洁，直观，并且在这个作品里看到设计者对自身设计能力的自信，这是我看到这个版面的第一印象。再细细的去分析，这个版式就是一块块的信息组成的，每一块信息都是那么整体，而一块与另一块之间的距离看着又那么肯定。而初学者总喜欢把信息层级做的含含糊糊，就像小时候语文考试时，学霸总可以把试卷里的每一道题一步两步三步的分好答案的重点，而学习成绩较差的同学因为不自信，总是把答案乱糟糟的铺满整个问答区。

  相邻的事物，必定相关  

人们总会认为，相邻的事物必定相关。比如大街上走过来一男一女，两者靠的很近，从心理上我们就会联想“这是一对情侣”“这是两兄妹”或者其他的关系，有一点是可以确定的，那就是“你俩走一起，一定是有关系的。”对于设计者来说，这一点是时时刻刻都要去留意的。

设计前对内容进行信息分层，属于一个层级分为一组，有关联的内容会离的更近，没有关联的信息大的间距隔开，这样的间距规律还会让我们清晰的区分开每一条信息，不会导致信息干扰。

当然，设计者在设计界面时这一点是随时都要去考虑的，比如我们来看字里行间的首页feed流。

如图所示，两个不同信息板块之间，通过2a的间距隔开，而同一个信息板块内的图片与头像、文本信息，仅用了1a，1.2a的间距隔开，这样即使没有分割线，我们也可以清晰的看出哪一行文字属于哪个图片。

  相似性原则  

相似性的原则是基于共同的视觉特征出发的，如形状，大小，颜色，纹理，价值取向的东西，将被视为属于相似的观点。这意味着，如果一个人感知到一组元素，他或她倾向于将具有一个或多个特征的那些组合作为相关项目。因此，给予不同的布局元素相同或相似的视觉特征，设计师可以激发用户对界面进行适当的分组和联结的本能，以便于用户更快的了解整个系统。相似性可以基于各种视觉参数，如颜色，形状，大小和方向。举个最简单的例子来说明。

计算器的界面设计是最直观的相似性原则体现，所有的按键如果都以一种样式展现，用户很容易看错数字键与功能键，而如果不同功能的按键赋予其相应的颜色，用户就会知道相同颜色的按键是一类的，这样误操作的几率就小了很多。

用户会把相同外观的元素联想到一起，比如说这篇文章的各层级标题字都是一致的，当你再看到这种字体，这个字号的字时，总会联想到这就是几级标题字。在做设计时这一点也是非常重要的，如果两个板块的内容完全不同，就从外观上拉开差距，不要相似，如果两个板块内容一致，那么外观就要保持一致，这样也可以让设计看起来更清爽，更干净。同样拿美团的首页来举例。

由于美团功能庞大，首页需要很多的快捷入口，如果所有的快捷入口都使用一种样式去展现，那么用户常用的入口就会很容易迷失在相似的图标群中。因此常用的快捷入口使用相似的样式，突出显示，而非常用的入口采用另外一种完全不同的样式，从视觉上就可以很清晰直观的把常用非常用区分开。

休息室 04-名言赏析

A moment of ease

如果你是个正在打造漂亮衣柜的木匠，你不会在背面使用胶合板，即使它冲着墙壁，没有人会看见。但你自己心知肚明，所以你依然会在背后使用一块漂亮的木料。为了能在晚上睡个安稳觉，美观和质量必须贯穿始终。

——史蒂夫.乔布斯

  白话解析  

不要只顾表面的风光跟格调，一个好的设计作品是贯穿在每一个细节的，即时你知道很少有人去放大看这些反光有没有很自然，这些纹理有没有很有规律，但这是一个优秀设计者的个人修养。

05

无框设计与卡片式设计

在详细讲述这两个版式名词之前，我先让大家简单的了解为何要单放一个小节去讲这么细节的东西。很多刚入门甚至已经有些工作经验的设计者都喜欢追随设计趋势，再或最新的设计风格。从安卓5.0开始，卡片式设计在移动端流行了起来，在当时来说，卡片式设计似乎就是最新趋势，近些年，无框设计又有了渐渐取代卡片式设计的势头。而我要说的是，其实每个版式都有其存在的理由和适用的场景，我们把它当作趋势来看是并不恰当的。下面，我就详细的解析这两种版式形式的特点以及适用场景。

  卡片式设计  

当然，卡片式设计在前面规范篇的常见布局形式中我已经讲过，这里挑重点再强调一下。卡片式设计顾名思义就是把界面中的各板块信息用卡片的形式进行承载，有个很直观的优点就是可以通过卡片的形式让多板块的页面看起来划分更清晰，并且列表形式的信息如果信息内容过多时，通过卡片的承载也可以让信息规整一些。并且手机屏幕内的卡片也可以让用户联想到现实生活中的卡片，所以一些优惠券或者会员卡等元素也非常适合卡片式的设计。而这些优点是对于体量较大信息较为复杂的产品来说，如果一些本来信息字段就比较少的产品来说，或许仅仅通过间距就可以让各信息清晰的呈现，这时再强行使用卡片式设计就显得浪费页面空间了，而一些新手最喜欢犯这种错误，盲目的跟随设计趋势而忘记了其本质的意义。

  无框设计  

近些年，无论是工业设计还是产品设计，都开始崇尚极简的设计，从汽车车门的无框设计，到手机的全面屏设计似乎都有抛弃边框的趋势。其实对于界面设计来说，所有元素的存在都有其存在的理由，极简不代表就是做减法，而是让每一个元素发挥其有应有的作用即可。分割线的存在是为了让页面信息更直观的分割，尤其同一个页面板块较多的情况，不使用分割线会让页面没了秩序，没有板块之间明确的交界处。那么为什么一些国外的无框设计看起来就那么清爽、高端呢？其实有一些概念稿的设计，信息体量都很小，页面内板块比较单一，并且各信息列表字段较少，也比较有规律，这种情况下使用无框设计是可取的。当然还有一种情况就是产品以图片为主，例如视频类产品，图片本就可以充当分割的作用。

而一些体量较大，页面较为复杂的产品，如果盲目的使用无框设计，虽然省去的分割线看似减少了页面的元素，实则让页面更混乱，没了秩序了，例如百度糯米这种体量的产品，如果首页去掉了分割，会让信息的浏览效率更低。

总结

summary

每一个板式形式都有其表意所在，在我们平时使用产品时可以多注意它们不同场景下不同的板式形式，追本溯源。设计趋势与风格仅仅是在这些源头之上一次新的尝试，其同样有适用于不适用之分。在了解了这些基本的原则之后，才可以去评判某个设计风格符不符合审美，在基础层面如果犯了错误便没有了讲审美的资格，正如卡片式设计与无框设计，如果仅仅跟审美挂钩就显得太过浅薄了。另外时刻记住：板式设计是视觉设计的核心。

——孔雅轩LineVision