UI排版思路探索：我们为什么会做这样的设计？
思考和总结设计的观点，并思考如何用于日常设计中
反思和复盘
一直有想写排版的想法，毕竟排版占了UI界面很大部分，关乎UI是否方便浏览、操作..非常重要，然后最近重温了《写给大家看的设计书》，也反思自己以前做的不足的地方，曾经的疑惑也有了答复，所以想给大家分享一下，希望大家能够规避一些坑，快速上手和成长，（注：部分概念来源是《写给大家看的设计书》，没看过的新人，给种草一下）
说说自己曾在踩过的坑吧：
1、策划的的需求内容，一股脑的放到界面里面，毫无层次
策划以功能诉求为主，通常给我们的策划案都是没有经过清晰的信息整理，所以需要设计师去整理设计，把核心的信息，和次要的信息进行层次排版，以便玩家阅读
（策划案）
（UI设计）
通过例子可以发现，策划案只是大概概括了需要哪些功能和信息，UI设计师除了将UI做包装设计，还需要对策划案的排版做优化处理，例如标题字体放大，日期弱化，点击区域放大...做信息梳理，方便玩家做到一目了然，切勿直接把策划案的排版直接套进去
2、内容堆砌，混乱而且没有条理，影响阅读
极容易发生在设计新手期，对设计的概念很模糊，通过不停的添加不同的元素来营造画面的美感，结果导致:
①元素与元素之间不合理
②元素之间没有层次感，造成花而乱的视觉效果
③元素过多影响了信息的表达和阅读
（不知道哪个游戏的，有怪勿怪，借来举个例子，介意的联系删）
（1）元素不合理：中国风的UI+日系欧美古典风角色+现代花美男+日系Q版字体设计+看不出和活动有什么联系的背景，就很多元素加起来，看起来画面很丰富，但很别扭
（2）花：也就是颜色过多，或者素材过多，画面被分割的很细碎，例子中背景黄色的小花，密密麻麻的，显得很碎，还有垫在字体下面的花纹，虽然看起来有细节，但真的太抢眼了，
置于颜色那就更不用说了，光字体颜色就很多种
（3）层次感：就是一种空间感，标题—角色—背景，层层递进，从明显突出到弱化衬托氛围，起来一种信息引导的作用，例子背景太抢眼了，拉不开层次
3、做练习的时候，因为没有策划案的约束，往往内容天马行空，同样也漏洞百出
游戏的玩法通过功能来体现，功能需求需要UI界面来表现，而做练习的时候，如果没有顾及玩法，功能等，单纯从美术效果出发，很容易出现一些问题：
（1）过度追求美术效果，删减大量的内容，导致信息、功能等不合理（害，以前老是觉得策划案就像老太太的裹脚布-又臭又长，觉得策划案影响自己在美术效果上的发挥，现在回想还真的不应该）
（2）只考虑美术效果，内容完全堆砌、虚构，导致缝合怪的现象
拿自己很早之前作品来举例把，看起来好像还可以，但从功能的角度，除了切换和返回，完全没有考虑玩家在这个界面目的以及如何进行下一步操作，真是糟糕
4、内容直接放置，毫无美感
直接堆砌一堆的文字是十分影响画面的美感的，所以就需要设计师将标题进行字体设计，将内容进行排版布局了
例子中，标题内容都是经过精心的设计排版，而不是草草的写了一堆文字
总结：UI基于功能、信息而诞生，切勿本末倒置
害，真是多奇奇怪怪的问题啊，接下来聊聊怎么样解决这些问题吧
分析完不足之后，接下来我们应该思考如何解决问题，提升自己的业务能力了，下面的内容分两个概念来说，分别是：1、平面四大基础原则，2、格塔式理论
平面四大基础原则
①、对比（Contrast）
概念：避免元素之间太过相似，通过强烈的对比，突出视觉中心，起到引导用户视线的作用
这是最初源于平面排版的一种概念，但很多学科的知识是通过平面设计，延续出来的，所以适用于各个途径，如：UI界面、活动宣传、网页设计.....
例子中：
（1）通过字体小大和格式的不同，让标题跟说明字体形成对比，拉开层次
（2）角色在整个画面中，占幅最大，细节和材质最多，与信息产生对比，形成视觉中心
（3）卖点标题，通过冷暖色对比，在画面显得十分亮眼，通过大小对比，放大5倍这个主要的信息，吸引玩法付费
实现对比的多种方式：
（1）字体大小
（2）字体格式
（3）线条粗细
（4）冷色与暖色
（5）平滑材质和粗糙材质
（6）水平元素与垂直元素
（7）间隔很宽的文本行与紧凑在一起的文本行
（8）小图片与大图片
（9）亮色和暗色
②、重复（Repetition）
概念： 基本要素在整个作品中重复出现，既能增加条理性，还可以加强统一性。 设计中视觉元素的重复可以将作品中的各部分连在一起，从而统一并增强整个作品，否则这些部分只是彼此孤立的单元
作用： 重复会为你的作品带来一种专业性和权威性，它会使读者感觉有人在负责，因为重复显然是一种经过深思熟虑的设计决策
通过例子，可以看到，在界面中某些控件、排版重复使用，来增强界面内容的统一性，但是在细节上，又有所不同，通过创造新的重复元素，起到提高信息清晰度的作用
实现重复的多种方式：
（1）沿用现有元素：找出现有的重复，然后将其加强。
（2）创造新的重复元素：创建新的重复元素，来增强设计的效果并提高信息的清晰度；有时重复的项并不一定完全相同，而只是存在明确关联的紧密相关的对象。
（3）部分重复：尝试将元素的其中的一部分，或者采用不同方式重复使用。
（4）取得关注：如果画面有非常好的一致性，则可以放入一些与众不同的元素，打破重复，起到引导的作用
③、亲密性（Proximity）
概念：彼此相关的项应当靠近，归组在一起，如果多个项相互之间存在很近的亲密性，他们就会成为一个视觉单元，而不是多个孤立的元素，有助于组织信息，减少混乱， 使页面会变得更有条理
亲密性，相互有关联的信息，通过物理靠近，形成视觉单元
实现亲密性的多种方式：
（1）看看哪些孤立的元素可以归在一组建立更近的亲密性，使之成为一个视觉单元。
（2）将相关的元素分在一组，将他们的物理位置相互靠近，建立更近的亲密性、
注意：
（1）不同属一组的元素之间不要建立关系，如果元素彼此无关，要把它们分开
（2）不要在元素之间留出同样大小的空白，除非各组同属于一个子集
（3）避免一个页面上有太多孤立的元素
④、对齐（Alignment）
概念：要让页面上的所有元素看上去统一、有联系而且彼此相关，需要在各个单独的元素之间存在某种视觉纽带，使页面看起来统一而且有条理
对齐通常泛指两种情况：
（1）字体内容对齐
（2）UI控件，元素对齐
三种对齐方式：
（1）居中对齐
正式、稳重，用于庄重、正式的场合，但同时显得中规中矩，通常显得乏味。
（2）左对齐和右对齐
使文本看起来更清晰，效果更分明
⑤、留白（The power of whitespace）
留白不属于四大基础原则里面，但是也是平面很重要的一条原则，很常用，在这里也讲解一下
注意：留白和白色没有真正关联，留白泛指空白空间的意思
概念： 留白的主要目的是方便阅读，突出重要信息，合理的利用空间关系，使重要的信息一目了然，起到引导的作用，同时可以让界面透气
实现留白的多种方式
1、一般基本功能界面留白的空间，在：
（1）边缘的空间
（2）包围图片和影像的空间
（3）行距，字符之间的空间，表格之间的空间等，使界面信息透气，且一目了然
2、特殊的界面，会根据界面性质，通过留白，用来增加界面特有的气氛来营造仪式感，给玩家正向反馈的情绪，例如：英雄展示/获得新英雄
3、需要突出功能的界面，大面积的留白有助于突出重点信息，例如：获得奖励/升级界面
格塔式原理
格塔式原是心理学，后面被沿用到美学中，与心理的各个过程结合，它是人类的一种视觉识别(模式识别)的倾向性，即人类会将某些视觉中出现的物体进行归类
①接近原则
（ 二维空间中距离更相近的的元素将更容易被知觉视为一组元素）
概念：接近原则就是指距离相近的各部分趋于组成整体，强调位置
作用：信息组之间用不同间距大小留白空间区分，页面元素会更简洁，阅读信息时干扰也少，相互关联的信息也更为接近 ，从而减少用户界面上视觉凌乱感
接近性原理常常运用到各种UI控件设计当中，例如：导航、卡片、列表、文本、图集等，我们在设计工作中能使用接近性原理来将相似信息聚类，组织内容以及整理排版，来引导玩家能够更快浏览且获得他们想要的信息
是不是觉得跟亲密性的概念很像呢，我也是这么觉得
②相似原则
（ 具有相似视觉特征的元素更容易被知觉视为一组元素）
概念：相似原则指的是在某一方面相似的各部分趋于组成整体，强调内容。人们通常把那些具有明显共同特性（如形状、运动、方向、颜色等）的事物组合在一起。他们的强弱从大到小依次是：颜色>尺寸>形状。
相似原则的多种方式：
（1）通过形状相似来区分不同信息
两种不同的形状，来区别两种不同的信息
（2）通过大小相似来区分信息层级
同样形状，却不同大小来区别层级
（3）通过不同颜色的相似进行分组，来区别信息层级和信息归类
通过不同颜色来区分物品的品质
③封闭原则
（自行填补缺口而把其知觉为一个整体）
概念： 彼此相属、构成封闭实体的各部分趋于组成整体。 我们的视觉系统强烈倾向于看到物体，以至于它能将一个空白区解析成一个物体、有些图形是一个没有闭合的残缺的图形，但主体有一种使其闭合的倾向，即主体能自行填补缺口而把其知觉为一个整体
例子1：这个例子的闭合，来源于旧有的tab分页用拟物立体的方式给用户选中状态的感知，已经养成用户习惯，属于经验闭合
例子2：任务列表做了截断，以表示可以上下滑动，当我们设计一个缺失或者断开部分的复杂页面时，会寻找一个连续、平滑的样式。换句话，我们有意识的去填补空白。
④连续原则
（共同方向运动被感知为一个整体）
概念：如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体，
在例子中，UI控件朝着共同方向移动，被感知为一个整体
⑤简单原则
（ 越是简单的构图结构，用户约容易理解）
人脑有化繁为简的能力，设计的构图越复杂用户理解起来越费劲
例如我们在设计中常用的：三角形构图，均衡构图，对称构图，向心构图，摄影中的对角线，X型构图....通过简单的构图方式把复杂的信息元素进行简化，让观者易于理解
有常用与UI：
(三角形构图)
(对称构图)
也有常用与宣传banner：
(均衡构图)
(对角线构图)
你今天学废了吗？
（以上论点均为个人总结，如有不同意见，那还不赶紧和我一起讨论讨论）
觉得写的不错的，快给我点个赞吧
