发布时间：2022-11-3 分类： 行业资讯
在本期中，我将讨论UI设计中的一些排版设计原则，以增强产品UX体验。以下是主题（注意：以下示例均来自网络）。
在本期中，我将讨论UI设计中UI设计的一些设计原则。作为UI/UX设计师，如何更好，更有规律地掌握布局设计能力，从而确保您的设计界面处理能力达到长期稳定。级别，不是时间的好坏，下面进入主题（注意：以下图片均来自网络）。
UI布局设计4大原则
视觉焦点
层次结构
视觉重量
视觉方向
视觉焦点
视觉焦点是主导界面的视觉元素，第一次进入你的眼睛，你不能在整个设计中强调所有的设计元素。
在上面的界面中，作者通过颜色块强调了重要的日期选项注释，它可以吸引你的注意力并突出关键的重要元素。
此座位购买票中的中间座位元素都相同，但所选效果突出，形成视觉焦点，右侧的异常界面提示按钮形成焦点。
这是相反的例子。界面右侧的所有元素似乎都很重要。没有明确的视觉方向指南。看起来有些颜色可以点击吗？
层次结构
在几秒钟内，用户可以清楚地理解点和页面元素之间的关系，并成功完成当前任务。视觉层次可以通过大小，对比度，颜色，纹理，空白，空间和可感知的视觉重要性来创建。视觉层次结构的设计清晰，与用户的阅读习惯一致。
界面中的视觉关系被标记出来，我们可以考虑其他人的作品用来表达这种等级关系。实际上，您可以直观地看到颜色，大小，明暗对比的使用（列表文本关系）。
顶级视觉焦点也是导航中更重要的部分。设计者和联系人图标如下所述。右侧页面的顶部具有较大的视觉权重，内部文本通过明暗来区分层次结构。
视觉重量
如何测量视觉重量，影响视觉重量的因素有尺寸，对比度，颜色，空白，形状，位置等。如何掌握界面中视觉重量的比例，这里有几个例子：
看完之后你有什么感受吗？它们都是120px大小。
为什么第一个例子在左边比在右边看起来更大？
第二个例子是黑色视觉重量相对较大的原因
第三个例子是为什么红紫色比左方正方形更具吸引力
以上三个场景都会在界面中遇到图标设计，下图是调整左边方块尺寸的大小是108px右圆或120px
在图片的左侧，我将首次关注中间标识，而不是大面积的蓝色和紫色，因为周围没有白色元素。图片右侧的按钮第一次吸引我。这是通过颜色吸引我的视觉焦点的地方，这是关注
的关键点在图的左侧，购买按钮和分数，购买按钮首先进入眼睛，并且白色背景上的黑色具有相对大的视觉重量。图右侧的购票区域全部是圆形的，颜色用于区分它们之间的层次关系。重要内容通过颜色强调，次要通过明暗关系表达
视觉方向
前面谈到视觉重量，它可以把你带到一个特定的重要位置，然后视觉方向是一个指导的角色。设计师必须做的是使用户能够快速完成任务并通过视觉指导达到期望。目标，常用的视觉指南是Fpattern和Zpattern，我们将在下面详细讨论它。
左侧图标和右侧列表形成垂直轴的概念，然后是线，连接元素的线的方向。然后右图看Z形结构，我们说是Z模式
上图中六个功能项的图标水平排列，内部系统建立平行轴关系，因此视觉方向更清晰
通常，需要形成视觉方向以形成视觉方向。这条线是看不见的。他是由一个轴组成的。如何通过对齐相同的形状元素来形成轴的概念
总结
上面提到了UI布局中常用的四种主要印刷设计原则。综合运用可以对布局设计，视觉焦点，层次结构，视觉权重，三者相互作用带来质的改善，最终视觉方向受前三者的影响。结构，无论用户是否能够成功完成产品中的任务并实现预期目标，都依赖于视觉方向指导，然后我们根据尺寸，对比度，颜色，空白，形状，位置等协调使用。
推荐阅读
APP设计中小图标的使用分析
作者：TONY，UX视觉设计师，喜欢探索所有新事物，喜欢分享，写文章。
本文最初由@TONY发布。未经许可，禁止复制。
该地图来自Pexels，基于CC0协议
