一招教会你UI页面分割怎么用!

当前位置:首页>设计文章>UI>一招教会你UI页面分割怎么用!

Halo,这里是设计夹,今天分享的是「UI页面分割。作为一名合格的UI设计师,用好留白分割、线性分割、卡片分割,你的页面即成功了一半!

一招教会你UI页面分割怎么用!

  留白分割定义

指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然地将信息分组(如下图)。

一招教会你UI页面分割怎么用!

间距留白是区隔单一信息元素的默认选择(如下图)。

一招教会你UI页面分割怎么用!

使用原则

建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸。

留白分割的分类及适用场景当条目信息层次较少(≦2)时,留白分割是比较合适的,当信息层次较多(≧3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

  线性分割定义

用线来分隔不同的信息内容。大部分APP的分割线是1px粗细,黑色,不透明度12%。

使用原则

分割线可以帮助用户理解页面是如何组成的,但过度使用分割线会造成视觉干扰,影响页面信息传达。

Android系统明确规定了分割线的使用原则:
微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
次要的:只有当留白不能起到分割作用时,才采用分分割线。
少用的:谨慎使用分割线,用它来创建分组而不是分割条目。

一招教会你UI页面分割怎么用!

分类及使用场景

通栏分割线:用于分割彼此完全独立的内容。
内嵌分割线:用于分割有锚点(头像或图标)的相关内容。
中间分割线:用于分割无锚点(头像或图标)的相关内容。

一招教会你UI页面分割怎么用!

如果为了提高屏效,希望在一屏内尽可能多地展示信息,那么同样的信息布局,分割线带来的效果会更清晰(如下图)。

一招教会你UI页面分割怎么用!

  卡片分割定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包含缩略图②、标题③、副标题④、副媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧。

除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片上。

一招教会你UI页面分割怎么用!

使用原则:
包含的:卡片是一个可识别的,单独的、包含内容的单元。
独立的:一张卡片可以独立存在,而不依赖于上下文环境。
不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。分类及适用场景:
卡片根据左右是否有边距,可简单分为通栏卡片和非通栏卡片(如下图)。

一招教会你UI页面分割怎么用!
从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。
1、当这个主题内部的内容已经有分割线时,建议采用卡片分割,让主题信息层次更加清晰。
2、当单个主题内部的内容类型较多,上下所占空间较大,建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
3、当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。
一招教会你UI页面分割怎么用!
最后
  • 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  • 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  • 当信息条目复杂度进一步提升,比如已经有了线性分割,或者有更多操作,需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。

信息分割本身不是目的,分割方式的选择是为了让版面产生清晰的条理性,用悦目的信息秩序来更好地突出内容,达成最佳的信息传达效果。所以决策时,除了上述细节考虑因素,还要考虑整体版面效果和信息传达效率。

请点个赞&在看,谢谢!

一招教会你UI页面分割怎么用!
温馨提示:

文章标题:一招教会你UI页面分割怎么用!

文章链接:https://www.uied.cn/57892.html

更新时间:2024年03月26日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
AIGC效率工具设计干货

Midjourney官方独立版本使用体验对比

2024-3-26 15:09:49

UI其他资讯设计干货

「设计素材」9个可免费商用的图片素材网站

2024-3-28 21:25:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索