如何创建精致的UI界面:布局篇

创业点子 阅读(671)

每个人都是产品经理,我想昨天分享

为什么你的设计非常平庸,为什么你的布局很规律,这篇文章给你答案!

image.php?url=0MqrtCoB7w

我已经在这个系列中完成了两个系列的“排版和图形”。本周,按照布局,我们知道布局直接影响产品的美学。不同形式的布局给用户带来不同的感受。该产品也将具有不同的个性。由于布局直接影响界面空间密度,不同产品有不同的空间。

那么我们如何才能更好地布局并在激烈的竞争中脱颖而出。今天的大多数产品几乎都是一样的。作为设计师,他们应该研究更多的布局趋势,并将它们整合到自己的产品中。

首先,我们为什么要注意布局

布局对于界面设计非常重要。它不仅是我们在移动或网络方面经常说的设计。他对汽车或电视UI或VR设计也有很大影响。我们了解界面设计中最基本的五种语言:形状,颜色,文字,质量和结构。

结构(结构)就是我们所说的布局。五个维度已经与您共享图形和字体。今天我们可以看到布局对界面设计的影响,以及我们如何通过布局进行界面设计。它更通用,并且有自己的视觉功能

二,目前的主流布局趋势是什么?

在介绍布局的重要性及其对界面设计的影响之前,如果我们需要制作一些更具创新性的布局来改进界面细化,那么如何开始?

我们可以看看当前的一些主流趋势,了解外国设计师如何找到更有创意的方式来设计他们的布局,并将一些想法应用到界面设计中,让我们来看看它。

第三,偏移和覆盖网格布局

网格布局我相信大多数人都知道,非常熟悉,那么今天所说的偏移覆盖网格布局是什么?

实际上,当我们设计界面时,在构建基本网格的底层之后,排版上层的内容,并且通过堆叠方法布置布局。这种布局的优点是白色空间大,呼吸强,图形交错。形式感增强了。缺点是应用范围较小,承载的内容较少,而Web的一般用途较多。当然,有一些具有这种布局的移动端设计个性化产品。

image.php?url=0MqrtCdWOa

上面的图片和图片重叠和布局,图片与图片交错,整体设计得到增强。

image.php?url=0MqrtCzlr0

在移动设计之上,设计师在左侧留下空格,整体内容向右移动。导航与内容不同,并且未执行偏移设计(请参见上图中的红色框)。

这样做的目的是因为当我们点击汉堡包菜单时,整体将向右移动。如果我们继续移动,内容将不会显示,视觉效果也不是很好。

image.php?url=0MqrtCLGSY

image.php?url=0MqrtCIHqj

在半偏移网格布局中,并非界面中的所有内容都与底层网格偏移,但是由于内容量较大,某些模块会执行此操作。通常,首页上会有更多的偏移网格。

四,分屏布局

顾名思义,分屏布局是将屏幕划分为几个不同的区域,然后在其中排版内容分布。分屏布局解决的主要问题是将屏幕大型设备划分为合理的空间设计,一般在水平屏幕上。例如:PAD,或WEB或汽车中心控制屏幕。

我们来看看实际设计中分屏布局的具体表现:

image.php?url=0MqrtCoHgi

image.php?url=0MqrtCvVRc

image.php?url=0MqrtCUydY

上述界面设计使用1/2分屏布局将图像和内容文本划分为区域。下图显示了放置在拆分区域中间的主文本文件(这可以在较少的情况下完成)。当然,分屏布局可以采用多种形式,例如:2/3,1/3,3/4等,并且可以根据内容选择适当的分屏。

五,Z轴视差布局

视差布局,更常用于网页应用或网页布局,运行模式在滑动页面内容时内容和内容之间会有时间差,而Z轴空间位置会产生深度差异,从而形成一个视差效果,视差布局一般出现在H5界面上更多,用于营销场景会更多,当然WEB端更为常见。

由于不支持Gif和视频,因此每个人都可以看到连接:

链接建议:

链接1:

链接2:

链接3:

image.php?url=0MqrtCoj2u

image.php?url=0MqrtChP5J

image.php?url=0MqrtC1PBJ

image.php?url=0MqrtCxsaY

image.php?url=0MqrtCB4RD

六,重叠内容布局

内容重叠布局打破了传统的平面简约风格。平面设计将增加Z轴空间元素,这使整体设计具有新颖的布局。这也是区分竞争产品和一般内容重叠产品的一种方式。其中大多数出现在具有偏见设计的产品中。

正如我提到的图文,我在韩国提到了29厘米。其详细信息页面和操作页面使用重叠布局。

image.php?url=0MqrtCm4xp

image.php?url=0MqrtCfkjw

image.php?url=0MqrtCxkuL

image.php?url=0MqrtC4pmB

image.php?url=0MqrtCMJYR

七,卡片布局

你为什么要拿出卡片布局?

卡的布局应该是我们最常见的布局。卡的布局可以以多种方式布局。卡容器的大小是根据产品内容的复杂性构建的。该卡用作携带内容的容器。它也非常支持响应式布局。我们看看appstore,behance的移动端,是卡布局。

image.php?url=0MqrtCH1Yy

image.php?url=0MqrtCbph3

卡片布局的最大优点之一是他可以打包内容,使屏幕布局干净,所有内容都放在容器中,并且信息得到很好的区分。

image.php?url=0MqrtCShuo

image.php?url=0MqrtCY31E

image.php?url=0MqrtCNuWT

完全封闭的卡片布局,内容包装在卡片之间,两者之间没有间隙。

八,自由格式网格布局

这种网格布局相对开放。布局主要基于卡片内容。这些卡片遵循随机分布在绘图板中的不可见网格,这与我们所说的瀑布流布局类似。这种灵活性在摄影,杂志和文学产品中更为常见。

image.php?url=0MqrtC2OpK

image.php?url=0MqrtC1V1t

如何将这些布局用于创新设计

上面列出了一些比较流行的布局。有些人可能仍然觉得他们不会使用它们,并且他们不会在自己的设计中很好地使用它们,或者它们会直接复制其他人的布局。

实际上,有方法。我们可以拿出一个我们认为更好的布局,然后将其拆除,然后在拆解后重新组装。组装时,您可以参考其他布局,并组装两个。就像乐高积木一样,你可以有很多组合。

image.php?url=0MqrtC8o3F

image.php?url=0MqrtCMzov

image.php?url=0MqrtCvOIs

以上使用Lego的思想来重新部署布局。当然,所有布局都基于您当前的主题,您的产品内容,找到正确的布局,然后研究他,反汇编,然后重建您自己的产品。布局规则集。

总结

全文介绍了五种布局思路。当然,这些布局中有五种以上,但其他布局的使用会更少。可以使用和学习这些布局,并且可以应用于任何设计。

当然,在使用它时,您必须清楚地了解产品的主要用途,用户群,合理使用布局,并进行创新设计!

如何创建复杂的UI界面(2):图形文章

如何创建复杂的UI界面(1):排版文章

视觉等级的4大武器

收集报告投诉