作者将分析和梳理不同产品界面的布局样式，希望能为您带来一些想法〜享受〜

每年，一波又一波的设计趋势都很受欢迎，并被设计师所遵循和模仿。每个人都觉得迎合潮流的设计当然不错。

例如，在流行的卡片设计中，许多设计师使用这种形式来分离内容模块;今年流行的无框设计，一群蜜蜂开始划分线条，到边框，做出大面积的白色设计。

但是，您是否问过自己是否受到趋势的引导，或者您是否真的在考虑它，并选择更适合您的产品定位和内容沟通的表单？

最近，我也在考虑这个问题，分析和梳理不同产品界面的布局样式，并与大家分享。

什么是布局样式？

在界面设计中，为了区分信息结构和层次结构，我们通常使用以下三种布局样式：卡片设计，分割线和无框架设计。

什么是布局样式？

在界面设计中，为了区分信息结构和层次结构，我们通常使用以下三种布局样式：卡片设计，分割线和无框架设计。

1.卡片设计

自从Android 4.1在Android 4.1上推出以来，卡式设计理念/风格逐渐变得流行，并且已被所有人遵循和使用。

Google将其称为“Inside Out design”，其实质是更好地处理信息收集，那么卡片设计在哪里适合使用？

（1）提高空间利用率

与传统的列表布局相比，卡片设计可以更好地打破原有的框架。

例如，在传统列表下，内容通常是垂直滚动操作，并且显示的内容是有限的，并且卡式布局还可以增加垂直内容流中的水平滑动内容区域，并且看起来非常整体。 。

例如，知道Feed流添加与live相关的水平滑动内容。

（2）区分不同的维度

卡实际上更像是一个容器。您可以将不同尺寸的内容放入不同的卡中，以便在保持界面一致性的同时区分内容。

例如：淘宝使用卡处理信息的级别。第一张卡片载有：个人信息和偏好;第二张卡：购买操作后的所有关键流程;第三张卡：淘宝中没有使用的一些功能聚合;第四张卡是支付宝和促销理财产品;等等。

每张卡片都是不同的尺寸，相对独立，但在用不同尺寸的卡片进行总结后，它比传统的列表项目+分割线+标题更具视觉效率，并且更加有序。

另一个例子：Litchi FM，WeChat阅读，也使用卡式设计来总结不同维度的信息内容。

此外，微信公众账号和appstore使用此处理方法将复杂信​​息分类到时间维度中的不同卡中。

（3）提高可操作性

卡是沉浸式元素，可以重叠，堆叠，移动和抚摸，以更好地扩展内容块的视觉深度和可操作性。

例如，iPhone附带“Reminders”，这意味着采用了卡片堆叠方法。用户可以根据标题快速找到目标备忘录，同时点击打开卡片内容。

探索，使用卡式设计，实现左右滑动代表的操作不感兴趣，从而增加了产品的兴趣。

然而，卡也有其缺点。如果您不盲目使用卡片设计，将会使您的设计效率低下且浪费。

例如，设计者应熟悉以下渲染，因为它们经常出现在主要设计代购源码网站上。

但是，如果你仔细分析它，一个好的通讯录，显然只是一个简单的头像和名称元素，必须包装在卡中，并且卡和卡之间应该有间隙。对于视觉效果，空间是如此浪费并影响效率。

如果您遵循微信策略，可以将朋友添加到5000，然后找到一个无法滑到死亡的人，并且肯定想要一个哈士奇（bi ~~~ silencer）。

2.分割线设计

在UI设计中，最传统和最常见的分离方式是“line”。它可用于分离，组织和优化，帮助用户理解页面层次结构并提供内容组织。

而“行”可分为：

（1）总出血分离线

“流血”是平面印刷中的一个概念，而“完全流血”是指整个页面上的线条分离，一般用于区分更多独立的内容信息。

例如，进料流中的“流动”采用全流失分配器的形式，这使信息更加清晰和独立。 （可点击放大）

例如：google photo，使用完整的出血分割线来区分上面的默认类别和下面相册的模块内容。

（2）内联分割线

与前者不同，内联分割线通常在“线”前面留下间隙以区分统一模块下的相关内容。目的是在浏览大量相关内容时使用户更有效率。

例如，使用“更多”页面，并且在卡中使用内嵌分割线来区分相同维度中的相关内容。

例如，在第二个模块中，我的创作，我的收藏，我的注意力，我的回答邀请，是操作后的“全部”内容;和第三个模块，购买内容，我的私人课程，我的生活……与“钱”有关或“付费”。

因此，使用内联分割线更适合这种分区内容，同时提高浏览效率。

实际上，使用“线”分割方法，相比其他两种（卡片设计，无框设计）是一种比较保守的解决方案，但前提是要处理“线”线间距，厚度，颜色，以及其他问题。

3.无框设计

无框设计是近两年来流行的新趋势。它删除界面中的边框，划分线条，并使用间距来区分内容。

它适用于：

（1）大图是主要的

大图主要是指基于图片的产品，每张图片都可以起到分割的作用。因此，没有必要使用额外的线条或边框进行分割。

例如：instagram，在图像发布之前，用户被迫直接截取图像以确保图像在馈送流中的宽度，全屏，因此看起来非常整体。

有些学生可能会问为什么外国产品如此之高，微博怎么能不分线，做减法，搞外汇呢？

然后大牙将带你分析哈！ Instagram仅支持发送固定大小的图片和视频，您希望人们支持发送照片，文章，视频，纯文本，签到，评论和hellip;

同时，微博馈送流中的图片支持一到九种不同类型的布局，而一张图片，为了更好地呈现用户的原始图片比例，也被处理为4: 3,16: 9，Squares，as以及特殊大小的缩写，以及GIF，还允许您在自己的状态中添加不同的主题。那么你只想区分白色空间的间距？现场看起来就像刚刚完成的地震和hellip; （严肃的面孔）

所以现在我认为微博使用卡片形式来携带这些内容信息是出于某种原因。

（2）内容是定期的

内容的规律性意味着白色空间的内容优选地相对一致，重复和亲密，使得用户将潜意识地将其划分为一组。

例如，Airbnb采用的无框架设计是因为它们的信息元素是统一和重复的，这给人们更多的整体感觉。同时，合理使用标题也起着关键作用。

同样使用无框设计“厨房下”，第一个屏幕因为每个模块的信息元素不一致，而且模块中元素的左右间距不一样，字体种类太多，导致一个相对凌乱的界面。

（3）利基和垂直产品

小型和垂直产品，在正常情况下，目标用户专注，功能简单。因此，最好使用无框架设计并跳出传统规范来进行创新设计。

例如：Light Mang杂志使用无框设计，同时打破传统的移动浏览体验，更符合他们自己的产品色调。

以下是FOOTAGE，一个由VUE团队设计的利基和文学产品。无框设计的前提是每个界面元素都是有限的，功能内容简洁。

但如果您是微博，淘宝，微信等产品，则用户群较广，内容复杂，层次较深。然后，您需要找到一个更有效的基本隐喻来进行信息呈现和交互。无框设计可能不合适。

总结

一般来说，任何形式的表达都应该是为了更好地呈现功能和内容，而不是盲目地追随趋势。

一个优秀的设计师，不需要受任何风格的限制，因为他知道风格不好或不好，而是探索更合适的方式来处理他们的产品。

我希望这篇文章对你有所帮助。

专栏

大牙，微信公众号：大牙齿的设计说明，每个人都是产品经理专栏作家。百度高级UI设计师。一个对生活充满好奇并善于用直接语言分析产品，互动和愿景的学生。

这篇文章最初发表。未经许可，禁止复制。

该地图来自Unsplash，基于CC0协议

« Rhinoceros云网络赢得战车：SEO优化对于获得客户很重要，如何做陈芳设计 | 代购源码网站设计确实需要非常认真。如何做好代购源码网站设计 »