贯通与非贯通？详解AppUI中的分割线.docVIP

贯通与非贯通？详解AppUI中的分割线 　　APP中分隔线的贯通和不贯通是产品和UID对产品信息架构功能点梳理、分类之后形成的视觉排版产物，它造就了视觉上对于一款app页面信息的整体和独立感。 　　 　　App UI设计中，分割线是一个很特别的视觉元素。 　　如下图红圈所示，包括微信在内的现在很多app里，有些分隔线是全贯通的，有些分割线不是全贯通的，为什么？设计师这么做的用意在哪里？ 　　 　　引发了知乎网友强烈的讨论，于是我尝试解释一下这个问题，由于得到的赞还比较多，所以我把原文贴到此处，希望能对大家有帮助，大家共同进步。 　　先说好，在我研究的过程中，我忽略了比如“可能是程序员忘记设置缩进了，可能是设计师脑子一抽就这么设计了，可能是老板就觉得不贯通的好，可能是别家app分割线都不贯通所以我们也不贯通好了”的这些傻逼原因，我尝试以为他们这么设计背后都是有深刻含义的，然后去探究这些深刻含义。有很多人说一个分割线而已没必要这么吹毛求疵，可是做设计，不吹毛求疵不行。 　　进入正题： 　　我可能会展开一点我的思路。 　　我不知道大家有没有注意过，现在很多App UI设计中有“去分隔线”的设计倾向，比如大家去下一个手机版的Skype看一看，如下图所示是微信和Skype的对比，Skype不管是联系人和聊天都是没有分隔线的： 　　 　　虽然Skype没有分割线，但是在我们使用skype的时候也并不会有串行和混乱的视觉体验，这是格式塔原理造成的，这个相信每位设计师都懂，上我们会人为的吧相似出现并按序排练的单位看做一个整体，也就是说，我们会人为的吧下图看做一个整体单元： 　　 　　而把整个页面看做这个单元的纵向排列。所以我们发现，Skype哪怕没有分割线，看上去也是很清晰的，当然Skype去分割线的设计是相当“大胆”的一种做法。当时我就在猜想，那么为什么微信不这么干呢？难道真的是没有“勇气”么？于是乎，我尝试了把微信首页截图的分割线全部去掉，得到了下面这张UI设计稿： 　　 　　于是我感受到了浓浓的恶意，尤其是画面明显失重，画面重心全部偏左。画面重心偏左的核心原因有两点，第一是在于提示的红点数字全部在左边，第二是每一个单行间距太小。 　　我们再来对比看Skype： 　　 　　这个时候我发现了奥秘： 　　Skype因为是圆形头像，所以天然造就了如红框所示的视觉间距，而为了画面平衡，Skype的提示数字是在右面的，两个红框部分达到了相对的视觉平衡。所以在我分析到这里的时候，不得不为Skype的UX团队点个赞。这就是我认为分析和对比的核心。 　　好了，明白了没有分割线的情况以后，我们来看有分隔线的app们，我上面铺垫了这么多，大家应该明白分割线这种东西出现之初的用意其实有两点，其一是分隔信息单元让视觉压力变小，其二很重要的一点是提示用户：用户大爷们，分隔单元也许可以点击噢~不信你试试看。 　　大家应该还记得，早期的iOS是酱紫的： 　　 　　上面一栏因为有了ON/OFF开关，所以地球人都知道他是可以点击的，可是下面一行呢？你要知道当年用户们都是从塞班甚至黑白机过来的，都没用过智能手机的，虽然我相信最终用户行为一定会点击一下试试看，但是我觉得当年的人看到下面这个东东，一定是会蒙圈个一两秒钟的。 　　所以苹果爸爸的解决办法是如下所示： 　　 　　这是一个惊艳的解决办法！Exceptional！请及其热烈而近似疯狂的为iOS鼓掌！ 　　就加了一个小iCON之后，几乎所有用户毫不犹豫的确定一定以及肯定了，这个Notifications一定是一个可以点击的按钮。所以后来，几乎所有的app设计都沿用了这种右侧箭头表示Cell点击可进入的设计。 　　有个同学问我，为什么分割线右边一定要贯通，难道不能有一种模式是左边开口右边实心么？答案是这种设计模式可以有，但是入过这个cell是一个可点击的入口就一定不行。 　　我举个例子，比如如你所说，有一个item长这样，右侧不贯通： 　　 　　会给用户带来一种“右边到底可不可点呢？”的疑问。 　　我主要从视觉上说说吧，其实就是一个整体和割裂的关系，大家先看下面这张图： 　　 　　大家忽略所有内容，也抛开大家的设计经验，就单凭大家用了这么多年手机的第一感觉去看左右两张图，左边的分割线是没有全贯通的，右边一张的分割线是全贯通的，用心去体会有什么区别，盯着看，别说话，把感觉记在心里，然后再看下面这张图： 　　 　　这张图是在上图的基础上加了分隔条，并标记了每一个Cell，大家感受到了什么？ 　　第一，加了分隔条以后信息被主要分为了两大块信息区域：A区和B区，每个区域都有四条主要信息。 　　第二，因为分割线的闭合与不闭合的原因，左图中A区B区的四个信息显得更加“相对具有联系性”，而右图中的四个信息显得更加“相对独立”。 　　这时候