发布时间：2023-3-14 分类： 电商动态
APP UI的界面似乎只由几个简单的元素组成。可以说所有元素的绘制都相对简单。然而，当产品原型问世时，设计师可以根据原型进行简单设计而不考虑信息化规则。会有不协调的影响。实际上，UI设计对于布局的应用非常重要，了解一些布局的原则是设计良好视觉效果的前提。
今天，我将讨论APP UI界面中的一些布局设计理论。学习这些理论知识将有助于您将来进行移动界面设计。
1.信息安排
在安排任何信息时，首先要掌握的是对齐/重复/亲密/对比，它贯穿四个设计原则。
除了能够创建清晰紧凑的外观之外，还可以轻松实现对齐。根据从左上角到右下角的阅读习惯，移动界面中内容的布局通常使用左对齐和中心对齐，填写在表单中的输入使用右对齐。
设计与做其他事情一样重要。不要让用户找到关键点/在哪里注意。它应该让用户顺利收到我们想传达的重要信息。重复和对比是一组组合拳，使设计中的视觉元素可以在整个设计中重复，这可以增加合理性，增强统一性，降低用户认知的难度。然后，您可以在需要突出显示关键点时使用对比度方法，例如图像大小或不同颜色的差异，以便用户可以直观地感受最重要的信息。
在安排复杂信息时，如果没有定期安排，文本的可读性将会降低。组织信息可以根据亲密原则组合在一起。如果多个项目彼此非常接近，它们将成为可视单元而不是多个孤立元素。这有助于减少混淆并为读者提供清晰的结构。
在设计表达式时，重要的是要考虑内容的易读性。适当使用图形可以提高易读性和设计，图形比文字更有效。以文本形式表达时看似冗长的解释一旦转换为视觉表示，将变得简洁明了。可视化图形可以以更柔和的方式呈现描述/标题/值的更钝的内容。
2.图像的使用
在确定应用的页面结构和文本之后，需要开始图标/按钮/图片的排列。这时，页面从简单的文本“阅读”结构调整为“查看”结构，对于页面页面的易读性和页面的整体效果可以产生巨大的影响。页面上图片的比例称为图表率。通常，降低图表率会让您感到宁静，优雅和高级。提高图表率将充满活力，使图片吸引人。
实际上，它还与所选图片的元素/色调/表达的情绪有关。适当的图片也可以散发整个应用的气质，直接传达给人们“先进”，“大众化”，“人民事务”，“友善”等。不同的感受。
如果你的内容较少但想要提高布局率，你可以使用一些颜色块，或者抽象模拟现实的对象，如电影票，书籍纸，优惠券，笔记等，以使界面更友好，减少空心感。 。这样，您还可以更改页面的视觉体验，但此方法最多可以更改页面的色调/纹理，而不能更改“阅读”内容的比例。这是需要注意的事情。
3.使用颜色
不同的颜色可以给用户不同的感受，这应该是常识。在移动界面中，您通常需要选择主要颜色，标准颜色和清晰颜色。移动端与网页略有不同。虽然主要颜色决定了图片样式的颜色，但它通常不会在大面积上使用。通常出现在导航栏/按钮/图标/特殊页面等部分，会有点阳光，固定的音调。统一的主色还允许用户查找品牌的所有权，如网易红/腾讯蓝/京东红/阿里橙等。标准颜色是指整个移动界面的颜色规格，确定文本/线段/图标/背景的颜色等。专色通常用于标题文本/按钮/图标等，通常用于强调和指导阅读。
选择中可能有多种主要颜色。眼睛颜色通常由两种或三种颜色组成。标准颜色是一组强弱标准组。然后在阳光和主色之间，主色和主色。有不同的选择方式。第一种是相邻的颜色匹配（色调环上的相邻颜色），这是更常见的，因为色调的柔和过渡也是非常自然的。
第二种是相同颜色的颜色匹配（颜色相同，饱和度不同），主颜色和清晰颜色都是统一的色调，给用户一致的感觉。
第三种是灯光配色，主色调采用相对平静的色彩，而阳光色彩采用鲜艳的色彩，以促进页面的氛围，强调键的作用。
第四种是中性色方案，它基于一些中性色来减弱干扰。这种方法是移动端最常用的方法。
还有一些渐变，明暗对比，多色匹配和其他方法都没有在这里解释，你感受到它。
4.留下白色的艺术
不仅需要设计文本和图像，而且空白也是页面布局中不可或缺的因素。所有白人都是“有针对性的空白”，其目的明确是控制页面的空间构成。
有几种常见的方法。首先，使用空格来减轻页面的负担。第一个屏幕对于应用程序非常重要，因此一些更复杂的应用程序首先评论堆积了大量条目。如果没有限制添加，页面中包含的内容太多，会给人一种狭隘的页面感，给用户强烈的压迫感，所以太多的元素有时候并不好。白色空间可以使页面更宽敞，视线更宽，白色空间用于减轻页面上的压力，使用户进入轻松的氛围。
第二种是通过消隐来分离元素的存在，并削弱元素和元素之间的障碍。在表格项目和表格项目之间，按钮和按钮之间，相关但需要区分的段落和段落之间，可以通过空白容易地在视觉上识别，并且还可以给用户带来干净整洁的感觉。
第三是通过突出强调突出目的的重点。 “该设计包含对差异的控制。重复相同的工作使我明白，限制这些差异并保留最重要的差异非常重要。 ”这句话来自原始的Takuya的“白色”，在书中，通过限制页面的差异使内容突出显示是最简单和最自然的表达。减少页面元素和杂乱的颜色使用户可以快速专注于产品本身。该方法广泛用于电子商务应用程序中。
第四个空白给页面组成不同的变化。布局设计必须有节奏感，这是我一直强调的。传统杂志在每页打开时都有不同的视觉感受。我认为应用程序中有很多部分可以部分突出个性或特征。空白可以使页面发生轻微的变化，也可以营造出不同的视觉氛围。通过改变布局然后匹配四个原则，可以产生不同的效果。
值得注意的是，白色空间不必使用白色填充界面，而是营造出空间感和距离感，自然舒适。
5.灵活运用视觉心理学
当你看事物时，往往会有不同的视觉心理。例如，两个宽度相等的正方形和一个圆放在一起，你必须感觉正方形更宽。在布局设计中，这些科学的可视化方法也用于视觉引导用户，设计人员可以快速找到一些布局布局方法。
（通过布局设计原则）
首先，最常见的方法是灵活使用黄金比例，文本和线段之间的空间，图像的纵横比等，可以通过黄金比例快速设置。例如，设置横幅的高度，等等。
在界面布置中，圆角和圆角比直角更可接受且更贴心。在需要更全面的演示的地方经常使用直角，例如用户照片，专辑封面，艺术品，商品展示等。在个人提要或头像，样式等中使用圆角将产生更好的效果。
在全局页面的布局中，您还应该避免单调并增加节奏感。我还提到排版应该优先考虑，这样用户在观看过程中不会感到冗长和乏味。
图片也有不同的色调，可以通过遮罩控制。如果选择较亮的色调来减轻用户的压力，请选择较暗的阴影以使整个画面更稳定，内容显示更清晰。
6.没有设计的设计
最后一段不是布局设计的原则，更像是一种设计心情。当古人写诗时，有一种叫做白画的技巧。原托拓也强调“最美的设计是虚无”，而在界面设计上，同样追求“用户无法感受到设计”。每个行/文本/每个按钮的存在都有其存在的原因。它不会增添无意义的装饰，不需要陪伴村庄和衬托，使用户更加注重内容的主题，削弱视觉的感知。即使用户在滑动时看到按钮或文本行，感觉这是理所当然的。 “菩提没有树，镜子不是台湾”，设计就像一个人。一切都像梦想的泡沫。不要注意形式要明确。
图中的例子在某些地方并不那么自然，但我认为上面的例子是针对“不让用户感知设计”的方向。没有完美的设计，只有努力才能改变。好的设计。最后，做好设计很长一段时间，了解设计不是白天黑夜，我希望你善于发现美，也善于理解美。
