网页设计:如何对APP界面设计进行信息划分

Post 16 of 929

关于APP界面设计的排版规则,相信很多朋友随口都说得出来,什么将同属一个集合的元素放在一起,将有关联性的元素靠近些等。但在实际操作当中,却会发现,即使按照排版规则去划分APP界面中的信息,效果依然并不喜人。

下面,香港网页集团将为大家分享,“如何对APP界面设计进行信息划分”的技巧,希望各位阅读后,会对APP布局上有更深入的理解和分析。

如何对APP界面设计进行信息划分?

合理地对界面信息进行划分,能有效组织和整合好信息间的关键,达到一种信息多而不乱的感觉,还能帮助用户了解页面的层次性和内容的组织性。对于内容与内容之间的划分,我们通常会用到留白、分割块、卡片、通栏分割线、非通栏分割线等方式。

① 留白:增加内容间的间距

网页设计:如何对APP界面设计进行信息划分

技巧:适合有规律性的内容排版,能增加界面的呼吸感

对内容干扰性:弱

② 分割块:利用颜色差让不同板块产生较强的对比

网页设计:如何对APP界面设计进行信息划分

技巧:适用于有多个板块的内容排版,可通过高亮色让模块间在Z轴上有升起的感觉。注意一屏中分割块不得多于3个。

对内容干扰性:强

③ 卡片:相当于收纳信息的容器

网页设计:如何对APP界面设计进行信息划分

技巧:一般用于有规律的信息流,能增加页面利用率,区分不同维度的内容,及提升APP的可操作性。

对内容干扰性:强

④ 通栏分割线:分割线横向贯穿整个页面

网页设计:如何对APP界面设计进行信息划分

技巧:区分更加独立的信息,例如标题和内容的分割。

对内容干扰性:较强

⑤ 非通栏分割线:用于内容间的区分

网页设计:如何对APP界面设计进行信息划分

技巧:适合内容间的风格,常见于资讯新闻页。

对内容干扰性:较强

各类划分方式的应用场景

看完上述的介绍,我们可以得知根据视觉强弱的比较,可以得出:分割块=卡片>通栏分割线>非通栏分割线>留白。因此,在遇到下面问题时,我们可以采用适当的划分方式,对界面进行布局划分。

案例一:消息列表的布局

网页设计:如何对APP界面设计进行信息划分

消息列表通常都是占据整屏的多个矩形块,而且这些矩形块的内容互不干扰,但是结构相似,能体现出整体性,因此为了减少干扰视觉的元素,可选择视觉干扰强度较小的留白(A)来处理。

如果选择通栏分割线(B)处理,虽然每块都充满独立的味道,但整屏分裂感很强,容易干扰界面的易读性,因此可改为非通栏分割线,能确保信息之间的某种关联性。

案例二:模态框的布局

网页设计:如何对APP界面设计进行信息划分

这里存在相关、同类和包含关系的元素,通过留白(A)的方式来控制,能让将界面变得整洁,同时减少干扰内容的元素,大大提升用户阅读流畅性。

如果选择通栏分割线(B)处理,这里会出现背景面积和分裂感这两大问题。模态框面积小,如果整个页面都是分割线,会影响阅读流畅性及界面的美观性。这里可以改为“保留标题下的通栏分割线,将按钮上的分割线改为非通栏风格线,其他省略。”这样界面就会变得更加整洁干净。

案例三:卡片的应用

网页设计:如何对APP界面设计进行信息划分

卡片的应用场景非常多,很多APP界面都会时常它的身影。到底,卡片有什么好处呢?

· 能清楚划分模块内容,归属不同维度的内容,让用户一目了然;

· 横向的延展性,为了在一屏里放置更多类型的模块,我们时常会将同类模块横向摆放,节省空间还能凸出界面的整体性。

不同分割方式都有其优点和缺点,以及适用范围,因此在实际设计工作中,为了能更好地呈现内容及功能,千万不能盲目追求设计趋势,选择合适的才是最好的。

This article was written by admin

MENU
網頁設計公司