关于区域分割，你该明白的设计手法

APP页面如同空白画布，我们要在这方寸之间，呈放各式各样的内容。如：内容信息；按钮入口；营销广告等。当这么多信息集合在一个页面进行呈现时，我们就需要用“区域分割”让用户有感知：不同的区域是不同内容，条理清晰，不杂乱，美观易读。

你是不是在想，那就用线段做分割呀？等等！今天跟大家分享，除了线段分割外，更好用也更美观的区域间隔的设计手法。 

1. 区域风格的常用设计手法

目前市面上，常用区域分割的设计手法为：线段；颜色；留白；

多数APP会使用2种以上，或3种形式并存的情况。那么我们在设计中该如何使用与取舍呢？ 

“存在即合理”---黑格尔。它们都有着各自的优劣势。深入了解后，才能方便灵活运用。

2.区域分割手法的优劣势分析

线段

优点：直接明了，节省空间；

缺点：当页面分割变多时，视觉上感知：碎，整体感不足；

视觉风格走向：偏清单列表，客观陈列，设计感不足；

线段的对齐方式

满屏线段：强区隔。较老式、呆板；

左侧留空：中区隔。较之灵活；

左右留空：轻区隔。留白更多，更轻盈；

线段的对齐方式，除了视觉感知不同外，与信息层级也有关联。如：第一层级：满屏线段（页面级间隔）；第二级：左侧留空（各大内容模块间隔）；第三级：左右留空（模块下的子内容间隔） 

颜色

优点：分区明显，比线段更醒目；

缺点：页面层级多，颜色多；

视觉风格走向：偏清单列表，客观陈列；

留白

优点：整体、美观、空灵；

缺点：占用空间大；

视觉风格走向：极简、高大上；

关于留白的使用目前有2种呈现形式：1.使用卡片的留白；2.不使用卡片的留白：

1. 使用卡片的留白：由卡片对内容由进行区域归纳整合，所以，留白的多少对于信息的区隔影响不大。

2. 不使用卡片的留白：留白的大小决定着区隔的强弱。

留白的大小至关重要，如果没有使用“卡片”和“线段”进行区域间隔，我们需要加大留白来增强区域间隔感。因为格式塔接近性原则告诉我们：靠的近的元素比离得远的元素更被认为是有关联。以下，是我在街上看到的一个广告招牌，由于信息留白区域不合理，直接影响信息呈现与内容阅读。

3. 区域分割的时代风格走向？

区域分割只是视觉风格中的一个小组成部分。它的演变随着主流APP视觉风格导向变化着。自从iOS11改版以来，APP视觉风格关键词为：大标题、卡片式、大留白；所以，与时俱进使用卡片与留白手法，取代大部分的线段分割手法，成为新潮的视觉设计方向。

4.那么该如何使用？

如果我们顺应潮流，清一色的使用卡片与留白手法，完全取代线段分割手法，是不可行的。因为没有绝对的错与对，不同的手法需要兼顾页面目的与视觉美感平衡。

若APP主页面部分强调美感，我们可以用卡片颜色与留白手法，让视觉整体且美观。在已使用卡片与留白后，还有信息无法做到区域间隔，那再用线段辅助之。 

若页面需要高效平铺多内容展示，美感其次。那么，运用线段分割与颜色分割则更为合适。在实际设计过程中，为了平衡美观，我们可以运用一些视觉手段，减少降低区域分割手法在缺点方面用户的感知。比如：尝试不同的对齐方式；降低颜色饱和度；让边线更细，让区隔感知不强，整体感更好。

总结

区域分割必不可少。设计之初，我们需要了解到不同页面的设计目的。有的页面倾重于有设计美感，有的则希望客观陈列更多内容。总之，常用的区域分割设计手法没有绝对的对与错，根据不同页面目的进行区别设计才是最重要的。即使有些设计手法有劣势，我们也可以尝试通过视觉手段进行弥补或调整。好的区域分割能舒适、美观、清晰的做页面的信息区隔与陈列，元素为内容服务，不突兀、不影响内容表达才更为重要。 

- END -

原创文章，如需转载，请注明公众号名称，谢谢！

（欢迎你来和我交流，微信公众账号：丘丘的设计笔记）

如果觉得还不错，那么，给我点个赞吧：）