发布时间：2022-11-15 分类： 行业资讯
作为UI设计师，如何使界面定期和有节奏地显示信息内容？今天分享的这6个提示可能对您有帮助！
I.亲密原则
在设计之前，信息是分层的。它属于一组级别，相关内容将更加接近。这种间距规则还可以让我们清楚地区分每条信息而不会造成信息干扰。
将1,2和3组分成组是很容易的，因为1,2更接近。
图的内容有三个模块：上部间距，内容区域和下部间距。
因此，我们可以判断内容区域的间距必须小于上下间距，因为根据亲密原则，相关内容会更接近，标题和价格分为两个模块，其中价格优惠之间的信息属于一个内容，所以它们的间距相对较小。
△（左）我们无法确定标题是否区分上述图像或下图
△（右）我们使用亲密原则，将1.2放在一起，加上间距来区分上下文
2.比较原则
重要信息和次要信息通过色彩对比度，厚度对比度，形状对比度，密度对比度，尺寸对比度，让我们专注于我们需要注意的信息，在比较和排版时，我们需要考虑多个维度来寻找合适的解决方案。程序。
这些应用程序通过字体大小，厚度和间距来区分，以区分信息和信息之间的关系，使整个页面移动更顺畅，阅读节奏更舒适。
△（左）虽然它使用亲密原则，但它看起来仍然很混乱，因为界面信息的内容似乎并不强烈。
△（右）重要信息和次要信息形成鲜明对比。字体大小和单词权重用于突出显示标题的信息，以便用户的焦点集中在标题上。
平衡原则
平衡原则是界面布局布局的第一原则。从整个官方代购源码网站到小图片，我们需要对页面的视觉平衡进行良好的节奏控制。
△为了避免视觉焦点左侧的不平衡，设计师将分享页面右侧的按钮，实现左右平衡
△Pinterest为了保持平衡，用户的头像位于左侧作为视觉焦点，而入口按钮则放在右侧以平衡对方
△Ebay为了避免过多的信息导致无视觉焦点，设计师在设计清单时，增加正确的信息间距和颜色，保持字体重量的平衡。
△严格选择平衡设计，在标题两侧添加线条，使页面感觉更舒适。
类似的原则。
△Fancy页面上所有与点击相关的控件，如气泡，按钮和链接，使用品牌蓝色作为操作点。
△在Airbnb页面中，只要它是可点击的，它就是全绿色文本。
△易趣的页面，所有可以操作的页面，按钮，图标和动作点都使用蓝色作为动作点。
△在Facebook页面中，可以单击的图标和文本按钮为灰蓝色以进行协调。
五，简单原则
请注意Sketch中对齐参数中的小数点，尤其是位置参数。我们经常不喜欢在执行过程中查看图层和大小，因此位置的值将是十进制或奇数，因此整个界面元素的间距和位置不标准化，如下所示：
1.简单数字
△（左）间距的小数点会使页面不严格
△（右）对齐每个像素的正确方法，位置
2.简单的规则
平面设计字体不应该太多，对齐不应该太多… ..因为规则太麻烦，使设计复杂，甚至臃肿。 UI设计师是一样的。如果您可以使用规则解决问题，请尽量不要使用两个。
△间距规则简单一致，重用
△均匀间距规则
△由于亲密原则，我们知道上下间距（红色高度）必须大于内容区域间距（绿色高度），但为了简化规则，内容的所有间隔（绿色高度）区域可以使用相同的规则，上下间距（红色高度）也可以相同。
通过这四个距离，我们只用两个规则解决了这个问题。例如，为了保持页面简洁，Facebook使用规则来解决问题，并且它不会失去它的美感。
△（左）4个间距规则，繁琐且缺乏均匀性
△（右）简化规则，从4到2
△（左）优化前，间距规则是多余的
△（右）简单规则优化，简单统一
3.简约风格
今年流行的一个趋势是“无线分离”。删除分隔符变得简洁，并且在场景中使用此技术。
△韩国29CM，Airbnb，Pinterest都采用了这种简单的分离方式
这种排版方法使整个页面看起来清晰，干净，大气，更加突出，甚至增加了用户的观看时间。
起伏的边缘很简单
起伏的边缘是一段文字的边缘。当视线从线的末端跳到下一条线的开头时，大脑应该能够确定下一次跳跃的角度和距离，并想象每次跳跃都会穿过跳板。如果间距一致，则会更快。
△在英文段落布局中，通常左侧是对齐的，因此右侧自然形成一块抹布。 Eaby和Google保持左右边缘对齐，便于阅读。网易新闻也与左右对齐，更加协调。
△（左）在右侧严重锯齿
△（右）对齐左右两侧以减少锯齿
△（左）锯齿的右侧严重且不均匀。
△（右）对齐左右两侧以减少锯齿
结束原则
用线框关闭两个部分的内容后，更容易区分。在移动界面上排版时，最常用的封闭形式是“卡”，用于区分每个部分的独立信息。
△同一组信息用卡片关闭
△（左）这个列表，由于间距和颜色，使我们更倾向于垂直阅读。这时，我们还可以使用闭包原理来关闭内容。
△（右）使用封闭原则封装内容（每条信息使用深色背景）。通过这种方式，我们不仅可以使我们更喜欢横向阅读，而且可以更好地区分每个独立的信息内容。
设计策略
亲密原则：首先，信息是分层的，属于层次结构，相关内容将更加接近。
对比度原理：通过色彩对比度，厚度对比度，形状对比度，密度对比度，尺寸对比度，我们关注需要注意的信息，在比较和排版时，我们需要考虑多个维度。
平衡原理：平衡原则是界面布局的第一原则。与整个官方代购源码网站一样大，像图形一样小，我们需要对页面的视觉平衡进行良好的节奏控制。
相似性原则：为类似内容分配相似的属性。例如，同一级别的标题文本大小相同，可以单击相同颜色的字体（如蓝色）等。相似因子不仅是文本的颜色，还有背景颜色。 ，方向，大小等。
简单原则：避免页面所有元素的小数点。页面间距规则简单通用，视觉风格轻巧，并执行无线分割。同时，请注意页面的右边缘是对齐的。
闭合原理：当区分两个独立的模块部件时，通常使用闭合原理。闭合原理通常使用卡片，线框或空间的颜色来关闭内容。
