UI界面模块分割怎么做?

342天前发布

原创文章 / UI
泡芙喵F,禁止转载-禁止商业用途-禁止个人用途

在做界面设计时,为了区分信息层级,模块与模块之间的分割通常会用以下3种方式:分割线、卡片式、留白。

F:泡芙喵,产品给了一堆信息密集的内容,我要怎么把内容排的有条有理呢?

泡芙喵:当然怎么好看怎么来啦……难道还往丑了做?   

 

F:泡芙喵,我发现很多app有些分隔线是全屏的,有些分割线是左侧留白的,为什么为什么到底是为什么呢?

泡芙喵:看设计师心情吧,或者是程序员一不小心写错样式啦!


F:咳咳……

泡芙喵:哈哈,我就是皮了一下,下面听我好好说道说道。



 界面分割有哪些样式呢?👇👇👇



在做界面设计时,为了区分信息层级,模块与模块之间的分割通常会用以下3种方式:分割线、卡片式、留白。 

 

1.分割线样式

 

分割线有全屏分割线、一侧留白分割线、两侧留白分割线3种,分割线的颜色、粗细这些细节也会影响界面的美观度,一般使用浅灰色1px分割线居多。

 

1.1 全屏分割线

全屏分割线是贯通整个页面的分割线,主要用于分割差异度较大的信息内容。 

下图列表页面用了全屏分割线,用户视线停留时间也会更长一点。

undefined

 


1.2一侧留白分割线

一侧留白分割线主要用于区隔差异度适中的信息内容,如一级信息与二级信息的区分;左侧留白用户视线更顺畅,没有被打断。

undefined

 


1.3两侧留白分割线

两侧留白分割线主要用于区隔差异度较小的信息内容,如同级信息之间的区分。

两侧的留白会形成流畅的视觉流,引导用户往下滑动页面。

undefined



2.卡片分割样式

 

卡片像一个容器,把不同维度的内容放入不同的卡片中,可以让内容区分的同时还能保持界面的整洁度。

undefined


传统列表内容一般为纵向滑动操作,展示的内容有限,而采用卡片式的布局,在纵向的内容流里,还可以增加横向滑动的内容区域。


如下图:中国移动和京东金融的页面,把推荐内容放在横向滑动的卡片里增加了页面利用率。


还可以采用卡片+卡片的方式来突出重要模块,如下左图“低价好物”模块,右图“限时福利”卡片,用彩色卡片突出了视觉层级。

undefined



3.背景栏分割

背景栏分割就是把分割线加粗到10px~20px,比起分割线每个模块之间区分更清晰。采用通栏式设计,视觉会在每个模块间停留一下,分割感更强。

undefined


4.留白分割

采用留白分割适用于以图片为主,内容有规律,小众且垂直的产品。


首先每张图片本身就可以起到分割的作用,因此,不需要采用多余的线或边框进行分割。其次留白间距上下的内容信息元素统一、重复,这样用户会下意识的将其分为一组。再次小众且垂直的产品目标用户聚焦,整体简洁统一,太多复杂的样式反倒会干扰用户视线。

undefined



F:嗯嗯,好像有些思路了……

泡芙喵:那就好!本喵退下了~


- END -

公众号【 泡芙喵F设计教室 

20
- 位站酷推荐设计师推荐 -
一下给作者疯狂打call吧!
(推荐 + 收藏 + 关注作者)
+1 +1 +1

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    喜欢TA的作品吗?喜欢就快来夸夸TA吧!
    夸夸

    夸夸

    文章信息

    • 文章标签

    收录收藏夹
    学习 0
    添加表情
    没有新消息
    已收藏到: