怎么将一张图片单独拆分成几张,一张照片拆分多张

首页 > 经验 > 作者:YD1662022-11-06 16:34:41

图3 亲密性原则体现的留白分割

如上图所示,当纵向间距增加1.5倍后,信息被分为上下2组,当横向间距也增加1.5倍后,信息被分为上下左右四组,这就是留白分割。

值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,间距留白是区隔单一信息元素的默认选择。

怎么将一张图片单独拆分成几张,一张照片拆分多张(5)

图4相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分隔,随着元素的增多,多个元素按照特定的组合形成条目,条目与条目之间,或者条目组与条目组之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点iOS和Android系统中差异还蛮大的。

怎么将一张图片单独拆分成几张,一张照片拆分多张(6)

图5 iOS和Android系统的分割方式差异

在iOS中,线性分割是条目间默认的分割方式(参见iPhone 通讯录和设置),当多个条目成组后,为了区分不同组别,则会采用更高层级的卡片分隔方式。

在Android系统,留白分割是条目间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见Pixel 5的通讯录和设置)

从2014年Material Design发布后“卡片式设计”的风靡,再到2019年前后“去线化设计”盛行,结合设计趋势,再对比上图中ios和Android的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队Google,在设计Android OS时也并没有滥用卡片)。

3. 留白分割的分类及适用场景

留白分割的分类,指的是留白间距大小的设计规范,信息之间有多少种间距,每种间距适用于什么情境。

怎么将一张图片单独拆分成几张,一张照片拆分多张(7)

图6 留白分割的分类

日常设计中,视觉设计师经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。

理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。而且每增加一个视觉层次,要求其间距至少要是上一层次间距的2倍,接近法则才能生效产生明显的分组效果。

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

三、线性分隔

1. 定义

线性分隔,顾名思义,就是指用线来分隔不同的信息内容。在Material Design中,对分割线(Dividers)有明确的定义和规范(iOS中没有相关定义,根据上图4的视觉效果,我更偏向Android的分割方式,所以更倾向于采纳Android的设计规范建议和效果)。

A divider is a thin line that groups content in lists and layouts.

分隔线是一条细长、轻量的线,用于对列表和页面布局中的内容进行分组。

从视觉效果上看,分割线可以将页面内容分割成层次更清晰的组块。

此外,MD还定义了其UI细节,规定分割线的粗细是1dp,颜色根据日夜间模式,可分别使用黑色或白色,不透明度为12%,以确保Android平台所有分割线的显示效果一致(国内的实际情况是:大部分App的分割线是1px粗细,相比MD的1dp,视觉效果更符合下方的微妙原则)。

2. 使用原则

分隔线可以帮助用户理解页面内容是如何组织的。但过度使用分隔线会造成视觉干扰,影响页面信息传达,所以Android系统明确规定了分割线的使用原则:

  1. 微妙的:分隔线在布局中应该很容易被注意到,但又不凸显。
  2. 次要的:只有当留白不能起到分割作用时才采用分割线。
  3. 少用的:谨慎使用分隔线,用它来创建分组而不是分割条目。

怎么将一张图片单独拆分成几张,一张照片拆分多张(8)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.