APP界面设计中内容布局的划分技巧

  • A+
所属分类:经验思维

本文来源: 老幺 (公众号:应谋鬼计), 共 1858 字

很高兴和大家一起分享知识,讨论学习!今天要分享的是布局中内容的划分-线和面,为什么想着分享这个呢?想必大家其实都知道同属一个集合的要放在一起,有关联性的要挨得近一些等等这些排版规则,但是在实际运用中,这些就抛之脑后了,小编有时候也如此,所以,整理了一些在APP设计中对内容的划分技巧!

希望各位小伙伴在阅读后针对APP布局内容划分上有自己的理解和分析,也欢迎留言与我们讨论碰撞。

APP界面设计中内容布局的划分技巧

怎么做好布局层级的划分呢?也就是对内容和和内容之间最好的划分。我们常用的有留白、分割块、卡片、通栏分割线、非通栏分割线。什么时候用线?什么时候用面?设计角度上,线与面的区别是什么?

什么是分割?

APP中的分割起到的作用是分割,组织,细化。合理的运用分割,能够帮助用户了解页面层次性以及内容的组织性。

UI设计中,常用三种设计形式划分不同信息内容,从而有效组织、整合好信息彼此之间的关系,达到一种信息多而不乱,清晰明确的视觉表现——这是“形”的根本目的(形色字构质动)。

面:不同板块,颜色深

留白

留白是通过增加内容之间的间距形成,适用于有规律性的内容排版。

技巧:适当的留白,增加呼吸感。

对内容干扰性:弱。

APP界面设计中内容布局的划分技巧APP界面设计中内容布局的划分技巧

分割块

北京赛车分割块指的是不同板块之间因分隔与底层产生的颜色差,模块之间通过高亮的在Z轴上有升起的感觉。

技巧:适用于不同板块,一屏中分割块少于3个,减少分割感。

对内容干扰性:强。

APP界面设计中内容布局的划分技巧APP界面设计中内容布局的划分技巧

卡片

卡片,其实可以看作是一个容器,一般用在有规律的信息流、为了增加页面利用率,区分不同维度的内容以及提升可操作性。

对内容干扰性:强。

例如:

1、躺平、淘宝个人中心页面这样的卡片设计,更加明确了模块的划分,将不同维度的内容放进卡片中,提升视觉统一性和用户阅读流畅性。

2、zfb财富页面这类卡片设计,提高了横向页面利用率,且在当前页面可操作性相对较强。

APP界面设计中内容布局的划分技巧

APP界面设计中内容布局的划分技巧

线:相同板块的不同内容,颜色浅

通栏分割线通栏分割线指的是:分割线横向贯穿整个页面,一般是为了区分更加独立的信息。

技巧:对标题+内容的分割

对内容干扰性:较强

例如:

1、知乎app在对feed流的处理中,采用通栏分割线,作用是让每个信息之间分割更加明显,更加独立。

2、淘宝APP的卡片设计中采用相对卡片的通栏分割线,是为了更好的表明一下内容从属于这个分割线上的标题。哔哩哔哩和新浪微博也是如此。

APP界面设计中内容布局的划分技巧APP界面设计中内容布局的划分技巧

非通栏分割线

北京赛车非通栏分割线适用于内容与内容之间的区分,同属一类。

技巧:内容和内容的分割,常见在资讯新闻页。

对内容干扰性:较强。

APP界面设计中内容布局的划分技巧APP界面设计中内容布局的划分技巧

应用场景

看完上面上面的介绍后,我们得到的知识来巩固并运用一下吧!

视觉强弱:面 > 线 > 留白(无)

以下为案例,当我们遇到这样的问题时,如何利用信息之间的关系合理的进行布局划分。

案例一:

APP界面设计中内容布局的划分技巧

消息列表,一般是占据整屏的多个矩形块。首先,我们考虑他们的关系,一个对话为一个隐形的矩形块,考虑极值,也就是占满一屏,互不干扰,但是结构相似,体现出整体性,接着,我们考虑视觉效果,为了减少干扰我们的元素,选择视觉干扰强度较小的留白,也就是A。

我们再来分析一下为什么B不行,怎么改?B存在的问题是,每一块都充满了独立的味道,考虑极值的情况,一屏放7个对话,也就会产生6条分割线,且为通栏分割线,整屏分裂感很强,容易干扰用户阅读流畅性。怎么改?非通栏分割线即可,适合内容+内容的分割,且保证信息之间的某种关联性。

案例二:

APP界面设计中内容布局的划分技巧

模态框,A和B的区别在于分割线和留白,这里用到四大排版原则(亲密性、对齐、对比、重复)的亲密性,相关、同类、存在包含关系的元素,可以通过距离来控制,适当的距离可以让界面整洁,减少干扰内容的元素可以大大提升用户阅读流畅性。

B存在的问题,一个是考虑背景面积,一个考虑分裂感,模态框面积小,如果整个页面全是分割线则干扰元素增加,不仅影响美观还影响阅读流畅性。怎么改呢?不是不可以用分割线,对于标题+内容,大部分采用的是通栏分割线,对于内容之间的划分则是非通栏分割线,以上标题下的通栏分割线可以保留,按钮上改为非通栏风格线,其他则可以省略。

案例三:

APP界面设计中内容布局的划分技巧

卡片式应用场景非常的多,不管是手机上还是ipad上以至于大屏幕的电视上都能见到它们的身影,为什么会选择卡片式呢?首先是对于模块的划分会更加清楚,针对不同维度的内容可以有更好归属,用户一目了然。

其次是横向的延展性,在仅有的一屏里,为了放置更多类型的模块,我们将同类横向,如下图,考虑商业诉求以及用户可操作性的同时,酌情设计,且不能生搬硬套。

APP界面设计中内容布局的划分技巧

总结:

在实际的设计工作中,我们的目的是为了更好的呈现内容及功能,且不能盲目追求设计趋势北京赛车,适合的才是最好的!希望这篇文章对你的设计工作有所帮助!



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: