app中分割线的渗透与不渗透，是产品与UID对产品信息架构的功能点进行梳理归类后形成的视觉排版产品，为一个APP页面信息营造出一种视觉上的完整与独立感。
在UI设计中，分割线是非常特殊的视觉元素。
如下图红圈所示，包括微信在内的很多app中，有的分割线是全连通的，有的分割线是不全连通的。为什么？设计师这样做的意图是什么？
在知乎上引发了网友的强烈讨论，所以我试着解释一下这个问题。由于还有很多赞，我把原文贴在这里，希望对大家有帮助，共同进步。
先说说吧。我在研究的过程中，忽略了“可能是程序员忘了设置缩进，可能是设计师脑子一抽就设计好了，可能是老板觉得没接好，可能是其他app分割线没接好，所以我们没接好。”我试着去想他们的设计背后有什么深刻的含义，然后去探究这些深刻的含义。很多人说，只有一条分界线。没必要这么挑剔，但不挑剔就做不了设计。
言归正传:
我可以稍微扩展一下我的思路。
不知道大家有没有注意到，现在很多AppUI设计都有一种“去除分割线”的设计倾向。例如，让我们看看Skype的下一个移动版本。下图是微信和Skype的对比。Skype没有联系人和聊天的分界线:
虽然skype没有分割线，但是我们在使用Skype的时候，不会有串行和混乱的视觉体验。这是格式塔原理造成的，相信每个设计师都懂。实际上，我们会人为地把依次ss="superseo">ss="superseo">出现和排练的相似单元看作一个整体，也就是说，我们会人为地把下面这个图形看作一个整体单元:
并将整个页面作为该单元的纵向排列。所以我们发现，即使没有分割线，Skype看起来也很清晰。当然，Skype的分割线设计相当“大胆”。我当时就纳闷了，那为什么微信不这么做呢？真的没有“勇气”吗？于是乎，我试着把微信首页截图的分割线全部去掉，得到了下面这个UI设计稿:
于是我感受到了一种强烈的恶意，特别是画面明显失重，画面重心全部偏左。图片重心偏左有两个核心原因。第一个是所有标明的红点号都在左边，第二个是各单行间距太小。
让我们比较一下Skype:
这次我发现了其中的奥秘:
因为Skype是圆头，自然就造成了红框所示的视觉间距。为了画面平衡，Skype的提示数字在右侧，两个红框达到相对视觉平衡。所以我在这里分析的时候，不得不给Skype的UX团队一个赞。这是我分析比较的核心。
好了，了解了没有分割线之后，我们再来看看有分割线的app。上面我做了这么多铺垫，你应该明白，一开始分割线其实有两个目的。一个是分隔信息单元以减轻视觉压力，另一个是提示用户:用户，分隔单元可能会被点击。不信你试试。
你应该记得早期的iOS是酱紫的:
因为上栏的开/关开关，地球人都知道可以点击，但是下栏呢？要知道当年的用户都是塞班甚至黑白机出身，没用过智能手机。虽然我相信终端用户的行为一定会点击尝试，但是我觉得当年的人看到下面这个东西的时候，还是会蒙上一两秒的眼睛。
所以苹果爸爸的解决方案如下:
这是一个惊人的解决方案！打赏！请给iOS热烈的近乎疯狂的掌声！
添加小图标后，几乎所有用户都毫不犹豫地确认这个通知必须是一个可点击的按钮。后来几乎所有的app设计都沿用了右边箭头表示点击即可进入单元格的设计。
有个同学问我为什么分割线的右边一定要通过？不能有左边开右边实的格局吗？答案是这种设计模式是可能的，但是一定不能把这个单元格作为可点击的入口进入。
我给你举个例子。比如你说的，有一项看起来是这样的，右边没有贯穿:
会给用户一种“右边能点还是不能点？”这个问题。
我主要从视觉上说一下。其实是一个整体和碎片化的关系。我们先来看下图:
大家都忽略了所有的内容，把自己的设计经验放在一边。就凭你用手机这么多年的第一感觉看看左右图吧。左边的分割线没有全连，右边的分割线全连。用心感受不同，凝视，不说话，把感受记在心里，然后看下图:
这张图是在上图的基础上，加了分隔线，每个单元格都做了标记。你有什么感觉？
第一，加了分隔条以后信息被主要分为了两大块信息区域：A区和B区，每个区域都有四条主要信息。第二，因为分割线的闭合与不闭合的原因，左图中A区B区的四个信息显得更加“相对具有联系性”，而右图中的四个信息显得更加“相对独立”。这个时候我给大家举两个例子，一个是喜马拉雅FM的“我的页面”，一个是脉脉的“我的页面”:(截图版本是7月16日)
再来说说喜马拉雅。当我第一次看到这个页面的时候，我的第一个问题是为什么顶部的“主播管理中心”和“消息中心”要分隔成一个单独的区域，用分隔线隔开。这是产品信息架构中必须要求的，因为显然作为UID，把它们结合起来显然更好~不说信息架构就跑题了。
让我们来看看这两页。每个单元格中的显示形式几乎完全相同。唯一不同的是喜马拉雅的分割线不是完全闭合的，而麦加的分割线是完全闭合的。
注意以下内容。来看看我的分析。我们先来看看喜马拉雅山:
1.“我的订阅+播放历史+喜欢”出现在一个区域且分割线不闭合，强调这三者是一个整体，内在逻辑是“我有表演过的动作”。
2.“购音+开心币余额”出现在一个区域且分割线不闭合，强调这两者是一个整体。我原本以为的内在逻辑是“购买行为产生的”，但是看到喜马拉雅商城和下面的订单，我就上当了。其实这里有一个很重要的产品上的问题。有同学说，合理一点，应该是一个地区“已购语音+币余额+喜马拉雅商城+商城订单+优惠券”吧？我承认应该是合理的，但作为喜马拉雅FM的重度用户，你可能不知道，喜马拉雅FM现在正在尝试一种新的优质内容付费收听的货币化模式，每条付费内容收费0.3币，所以是有道理的。这个区域的内在逻辑应该是:“付费内容。”
3.而下面这个区域，喜马拉雅产品经理把他总结为“其他”，也就是说，在目前喜马拉雅的产品体系中，商城和游戏中心的地位不如付费内容，没有放在主要位置。
所以从这个页面不难看出，喜马拉雅目前的运营重点是“为优质内容付费”，也就是探索新的模式。事实也是如此。在这个资本寒冬里，喜马拉雅目前在做汽车硬件，做商城，做优质内容付费。喜马拉雅团队最近肯定在苦苦寻找套现模式。这就是我常说的。从一个产品的UI，其实可以看出产品团队甚至一个公司的现状。
看脉搏:
脉脉是一款更新量特别大的应用。作为深度用户，我很震惊。从15年开始到现在，基本上每个月都是功能模块的大迭代。如此大规模的迭代，必然要求产品对信息架构进行梳理。比如我们看页面，第一个大单元格是访客+我的工作圈+钱包+收藏。我们可以把逻辑理解为“用户行为模块”。第二块是我的特权+成为认证用户，可以理解为“用户身份模块”。
至于为什么脉脉要用全连通的分割线，因为我猜脉脉的产品和uid设计之初就是为了突出每个细胞的独立感。大家可以看到，“访客”、“我的工作圈”、“钱包”、“收藏”是四条完全不相关的信息的聚合，所以脉脉的这个设计不仅突出了这四条信息是“由我生成的行为记录汇总”，而且是各自独立打开的。
说到这里，我们不妨来看两个UGC输出页面的对比，一个是微信的朋友圈，一个是网易云音乐的好友模块:我们会发现，两者都一致使用全贯通的分割线。这只是命运的巧合吗？其实并不是这样，因为用户的UGC内容是不可控的。可能是文字，图片加文字，文字加链接，各种稀奇古怪的东西。这时候用户实际看这类页面的时候，视觉压力比较大，所以用各个模块之间的大间隔和全贯通的分割线来分隔各个内容就显得尤为重要。
总结一下app中分割线的渗透与不渗透，是产品与UID对产品信息架构的功能点进行梳理归类后形成的视觉排版产品，为一个APP页面信息营造出一种视觉上的完整与独立感。
这是我自己的理解，还是那句话，不要偏听偏信。
文章最初由@Seany发布。大家都是产品经理，未经允许禁止转载。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）