火星网校
UI界面做好留白分割，页面就会成功一半
发布时间：2024-04-09 10:47:36 浏览量：175次
作为一名合格的UI设计师，用好留白分割、线性分割、卡片分割，你的页面即成功了一半！据信息条目复杂度的不同，可以选择合适的分割方式来提升页面的视觉效果和用户体验。信息分割本身不是目的，而是为了产生清晰的条理性，用悦目的信息秩序来更好的突出内容，达成最佳的信息传达效果。
留白分割≧线性分割≧卡片分割
留白分割定义：指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息分组。（如上图）
间距留白是区隔单一信息元素的默认选择。（如下图）
使用原则：建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸。
留白分割的分类及适用场景：当条目信息层次较少（≦2）时，留白分割是比较合适的，当信息层次较多（≧3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。
线性分割定义：用线来分隔不同的信息内容。（大部分APP的分割线是1px粗细，黑色，不透明度12%）。
使用原则：分割线可以帮助用户理解页面是如何组成的，但过度使用分割线会造成视觉干扰，影响页面信息传达。
Android系统明确规定了分割线的使用原则：1、微妙的：分割线在布局中应该很容易被注意到，但又不凸显。2、次要的：只有当留白不能起到分割作用时，才采用分分割线。3、少用的：谨慎使用分割线，用它来创建分组而不是分割条目。（如下图）
分类及使用场景：1、通栏分割线：用于分割彼此完全独立的内容。
2、内嵌分割线：用于分割有锚点（头像或图标）的相关内容。
3、中间分割线：用于分割无锚点（头像或图标）的相关内容。
如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的效果会更清晰（如下图）
卡片分割定义：卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、问文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片上。
使用原则：1、包含的：卡片是一个可识别的，单独的、包含内容的单元。2、独立的：一张卡片可以独立存在，而不依赖于上下文环境。3、不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。分类及适用场景：卡片根据左右是否有边距，可简单分为通栏卡片和非通栏卡片（如下图）。
从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。1、当这个主题内部的内容已经有分割线时，建议采用卡片分割，让主题信息层次更加清晰。2、当单个主题内部的内容类型较多，上下所占空间较大，建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。3、当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。
小结：
- 当信息条目复杂度较低时，优先采用留白分割，视觉清爽无干扰。
- 当信息条目复杂度增加，只利用留白分割效果不明显时，建议引入线性分割，让信息层次更清晰且屏效高。
- 当信息条目复杂度进一步提升，（比如已经有了线性分割，或者有更多操作），需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。
信息分割本身不是目的，分割方式的选择是为了让版面产生清晰的条理性，用悦目的信息秩序来更好的突出内容，达成最佳的信息传达效果，所以决策时，除了上述细节考虑因素，还要考虑整体版面效果和信息传达效率。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
