一 : 贯通与非贯通？ 详解App UI中的分割线

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区的四个信息显得更加“相对具有联系性”，而右图中的四个信息显得更加“相对独立”。

这时候我给你们举出两个实例，一个是喜马拉雅FM的“我的”页面，一个是脉脉的“我的页面”：（截图版本是16年7月）

先说喜马拉雅，我第一次看到这个页面的时候，我的第一个问题在于，为什么顶上的“主播管理中心”和“消息中心”要单独成一个区域并用分隔条隔开，这一定是产品信息架构的时候要求这样的，因为明显作为UID来说，把它们俩合并明显好看一些~不说信息架构了不然就扯远了。

我们来看这两个页面，每个cell里展现形式几乎完全一样，唯一的区别在于，喜马拉雅的分割线不是全闭合的，而脉脉的分割线是全闭合的。

下面的内容注意看，来看我的分析，先看喜马拉雅：

1.“我的订阅+播放历史+赞过的”出现在一个区域并且分割线不闭合，强调这三个是一个整体，内在逻辑是“我执行过动作的”。

2.“已购声音+喜币余额”出现在一个区域并且分割线不闭合，强调这两个是一个整体，内在逻辑我最初以为是“购买行为产生的”，但是当我看到下面喜马拉雅商城和订单的时候我就蒙圈了，其实这里有一个产品上面很重要的问题，有的同学说，讲道理的话，应该是“已购声音+喜币余额+喜马拉雅商城+商城订单+优惠券”放在一个区域才对对吧，我承认讲道理的话应该是这样，但是作为一个喜马拉雅FM的重度用户，你们也许不知道喜马拉雅FM现在正在尝试优质内容付费收听的新变现模式，每收听一个付费内容需要消耗0.3喜币，所以这就能说得通了，这个区域的内在逻辑应该是:”付费内容相关的”。

3.而下面的区域，喜马拉雅的产品经理把他归纳为，都是“其他”，也就是说，在现在喜马拉雅的产品体系中，商城和游戏中心的地位不如付费内容，不放在主要地位。

所以从这个页面不难看出，喜马拉雅当下的运营重点在”付费优质内容相关的”这一块，也就是新的模式探索，事实也是如此，在这个资本寒冬，喜马拉雅目前在做车载硬件，做商城，做优质内容付费，喜马拉雅团队最近一定是在苦苦寻求变现模式。这就是我经常说的从一个产品的UI其实是可以看得出这个产品团队甚至一个公司目前的状态的。

再来看脉脉:

脉脉是一款更新量特别大的app，作为他的深度用户我都震惊了，从15年年初到现在基本上是每个月一个大的功能模块迭代。这样大规模的迭代就必须要求产品做好信息架构梳理。比如我们看页面中，第一大块的Cell是访客+我的工作圈+钱包+收藏，我们可以理解为逻辑是“用户行为模块”。第二大块是我的特权+成为认证用户，可以理解为是“用户身份模块”。

至于为什么脉脉要用全贯通的分割线，因为可能我猜脉脉的产品和UID在设计之初就为了突出各个Cell的独立感，大家看“访客”、“我的工作圈”、“钱包”、“收藏”本身就是四大块完全不相干的信息的聚合，所以脉脉的这种设计既突出了他们这四块信息都是“我产生的行为记录汇总”，有独立开了每一个行为模块，我认为这是使用全贯通线的原因。

说了这么多，我们不妨再来看两个UGC产出页的对比，一个是微信的朋友圈，一个是网易云音乐的朋友模块：我们会发现，他们倆都一致的使用了全贯通的分割线，难道这只是命运的巧合么？其实不是吧，因为用户UGC内容不可控，有可能是文字，有可能是图片加文字，有可能是文字加链接，千奇百怪五花八门。这个时候用户其实看这种页面的时候视觉压力是比较大的，所以每个模块之间的大间隔加上全贯通的分割线把每一个内容隔开就显得尤为重要。

总结一下

APP中分隔线的贯通和不贯通是产品和UID对产品信息架构功能点梳理、分类之后形成的视觉排版产物，它造就了视觉上对于一款app页面信息的整体和独立感。

这是我自己的理解，还是那句话，切勿偏听偏信。

文章作者系@Seany. 原创发布于人人都是产品经理，未经许可，禁止转载。

二 : 管道相贯线切割机 钢管相贯线切割机 THINKPIPE

THINKPIPE管道相贯线切割机

半分钟阅读??

我们对大型的管道相贯线数控切割机成套设备已不陌生，其一般包括切割机头、爪盘、滚动架三部分。滚动架三部分

??然而另一方面我们又清楚地知道，如果有一款能实现同样功能同时它的结构更小巧款能实现同样功能，同时它的结构更小巧、灵活、甚至可以单人操作单人移动，那么这款设备将给我们的施工节省极大的运输成本、款设备将给我们的施工节省极大的运输成本人工成本、学习成本。

??THINKPIPE系列产品就是我们潜心研发的这样一款产品。

为民族打造受人尊敬的百年企业！

传统的相贯线切割成套设备

机头爪盘

滚轮架

为民族打造受人尊敬的百年企业！

THINKPIPE等效机构

机头

滚轮架与爪盘的功能

轨迹控制器

为民族打造受人尊敬的百年企业！

THINKPIPE的优势1.

??

??

22.

??

33.

??

??（节省运输成本）施工，携带方便，支持空运无需运输，普通即可拉运（节省野外施工的配套成本）对发电机功率要求低，照明功率即可（节省人工成本、学习成本）（节省人工成本学习成本）操作工不需要制图CAD最多输入四个数据X

为民族打造受人尊敬的百年企业！

节省成本、可搬运我很轻

公斤

为民族打造受人尊敬的百年企业！

节省运营成本及配套成本??主机功率低于220W，不需要额外发电车机组??220V/50Hz单相交流供电即可。

耗钱的发电车：（

为民族打造受人尊敬的百年企业！

节省人工成本、学习成本

??对操作工人无学历资质要求??普通工人，普通工人1小时学会操作。小时学会操作??工人请假跳槽，带不走技术、影响不了生产。

为民族打造受人尊敬的百年企业！

安装??

成套设备安装后一般不会移动，如果移动，再次安装仍然是件麻烦事再次安装仍然是一件麻烦事

??THINKPIPE因其便携而得到良好的赞誉，其安装也是十分的方便。其安装也是十分的方便

为民族打造受人尊敬的百年企业！

第步：安装轨道第一步：安装轨道为绕管行走保证精度

为民族打造受人尊敬的百年企业！

第二步：安装防滑链条

我是有身份证的200920068543.1009006853

为民族打造受人尊敬的百年企业！

安装时间统计??轨道

轨道一次安装次安装5-105

10分钟。

??链条安装1分钟??主机提升1分钟

为民族打造受人尊敬的百年企业！

特殊本领——

加工大管径钢管

为民族打造受人尊敬的百年企业！

功能示意图

为民族打造受人尊敬的百年企业！

功能照片

斜切（虾米腰）相贯线

为民族打造受人尊敬的百年企业！

普通工人，

小时内熟练操作普通工人，一小时内熟练操作为民族打造受人尊敬的百年企业！

对施工环境没有要求

为民族打造受人尊敬的百年企业！

自动切割

次成型自动切割一次成型为民族打造受人尊敬的百年企业！

对口良好，稍许打磨直接可焊

为民族打造受人尊敬的百年企业！

典型客户??中国电子系统工程第三建设有限公司用于直径1600mm以下管道相贯线切割。

??中国化学工程建设第十一建设有限公司

用于1219mm直径管道等离子相贯线切割??山东莱芜某公司（按客户要求，进行保密）

457mm、219mm、273mm多种管径的45度斜面切割

为民族打造受人尊敬的百年企业！

联系我们地址：上海市闵行区都市路399弄复地北桥城580号楼, 201109 电话：021021--61350141，61727303，26672092

传真：真021021--60919397

节假日热线：13764147200，13761497266

电子邮件：sunbow@sunbowtec.com @

公司国际网站：http://www.61k.com

中文网站：http://www.61k.com

英文网站：http://eng.sunbowtec.com http://eng.sunbowtec.com

手机wap网站：http://wap.sunbowtec.com

为民族打造受人尊敬的百年企业！

三 : 相贯线切割机的分类

相贯线切割机 http://www.lansunlaser.cn/

相贯线切割机的分类 在机械加工过程中，管材切割常用方式有手工切割、半自动切割机切割及相贯线切割机切割。［www.61k.com）

手工切割灵活方便，但手工切割质量差、尺寸误差大、材料浪费大、后续加工工作量大，同时劳动条件恶劣，生产效率低。其它类型半自动切割机虽然降低了工人劳动强度，但其功能简单，只适合一些较规则形状的零件切割。

数控相贯线切割相对手动和半自动切割方式来说，可有效地提高板材切割地效率、切割质量，减轻操作者地劳动强度。

主要为分相贯线切割机，贯线坡口切割机数控相贯线切割机，就用于管子上面相贯线切割的需要，相贯线实际是就是两条相交管子之间连接的部分，为了使两条管子能完整的焊接在一起，必须在要求相交的两个管子上面各开一个口，这两个口要求能够对接，这个在石油管道，自来水道，排污管道，水利发电等各种行业应用尤其广泛。

一般来说，各厂家生产的相贯线切割机，在联动轴数相同时，实现相贯线坡口的能力，都是一样的。其主要区别在所配用的相贯线编程软件。对编程软件，主要区别在： 第一、编程界面的相贯图形显示方式；

第二、能实现相贯结构情况的编程范围；

第三、特殊情况下的编程数据处理能力；

第四、编程范围的扩展性；

第五、编程软件对轴数的适应性。

更多相贯线切割机资料查阅请登录http://www.lansunlaser.cn/

本文标题：相贯线切割机-贯通与非贯通？ 详解App UI中的分割线
本文地址： http://www.61k.com/1148184.html