UI设计-移动端板块分割的细节

在ui设计中功能板块的区分有很多种方案，总结下来无非就是线面区分法。

我们先说说线的用法

一、线分两种一种是贯穿线另一种是短线。

贯穿线：用于相同把内容的不同板块。

短线：用于区分相同板块的不同内容。

短线的用法

贯穿线的用法

主要在在详情页面和结算页面处理较多文字和内容信息的时候会用到。使用的技巧就是分析这个板块是否是形同的信息模块。从可读性出发，将信息页面的节奏化分割，结合使用再加上通过板块的留白加强易用性的提升。

微信-我的页面通过短线和贯穿线来调整页面分割

当然在处理页面的时候会根据产品实际功能不同来进行调整，（短线和贯穿线的用法可以调整为短信和面的结合，我们看一下案例），特别是是一些用户年轻化的产品，在功能呢板块的区分上基本用面来区分大的功能板块，加入短线和留白来做细化分割。

淘宝-我的页面通过面线结合的方式做区分

当然说是不用线来处理区分板块纯用面区分可不可以，当然也是可以的。这样的优势的这个界面功能明显，但是劣势在于不能一次性给予用户很多的功能选择，怎么理解呢？综合类电商，需要很多入口和不同的功能呢的时候，一定优先考虑线面结合的形式。但是如果产品本身功能很简单没有那么多板块的情况下，是可以放弃掉线性分割，转而直接使用多面分割。通过面积来完成页面层次的划分。举例

自如APP-首页面性区分

每日优先-首页面性区分

接下来我们谈一下线面在实际设计作业的时候要注意什么？

第一线和面的颜色是不一样的，对！是不一样的。

这是刚刚的微信-我的界面

你留心看一下。板块间区分用的灰色面的颜色是略深于线的，这里有一个经验性数值，面颜色色值在E中选取灰色，而线的选取是在F中选取色值（不是绝对，常规操作）。这里还有一个细节中的细节，就是灰色的倾向问题，微信等现在成熟的产品你看一下灰色分割都不是一个纯的灰色，是有一定颜色趋向的，微信你仔细看是“蓝灰色”，这样做的目的就是大面使用的时候视觉会更舒服，不会因为只是纯灰导致视觉疲劳。

线的选择性颜色

面的灰色颜色以及倾向调整

在设计作业中如何判断？

分割层级是

短线<贯穿线<面

面的分割性最强，所以用于不同板块的区分，但是这里要注意。

以常规750x1334的界面为例，同一屏内不要超过三个面性分割（常规操作）。原因有两个

第一：分割太多会直接导致产品层级很难控制。

第二：太多的灰色会让整体颜色乱掉，导致画面发脏。

以上就是本人在设计作业中总结的移动端板块区分的线面使用注意事项，希望能帮助你解决日常工作中的一些问题。

在设计时的汪洋中，我断不敢说自己是什么专家，如有不妥欢迎积极交流。留言私信均可，欢迎指正，谢谢！

祝大家一稿全过～再见～～