根据设计的空间维度加以区分可以分为-5个角度让你的APP更精致

小编：本文从图片、文字、色彩、图标、留白等维度剖析APP设计，发现那些细微的细节。作为UI设计师，你只需要比别人多提升1px，你的APP设计就会更加精致。

当我们打开一款APP时，从视觉角度来说，影响用户对APP整体感官体验的元素主要有：图片、文字、色彩、图标、留白等。

合理的图片使用、清晰的信息层级、舒适的配色都会提升整个APP的美感，从而为整体的产品体验加分。对于一个成功的产品来说ip形象，视觉方面只是其中的一部分，但作为一名合格的UI设计师，我们要做的就是把这一部分做到完美。

接下来，我们从图片、文字、色彩、图标、留白等维度剖析APP设计，发现那些细微的细节，只要比别人提升1px，你的APP设计就会更加精致。

目录

图片就像一个人对衣服的品味；

我只是想知道重点在哪里。

色彩，如何成为一名色彩设计师；

图标，从会画到能画好，到底有多远？

留出一些空间，我只想要足够的空间。

1. 图片就像一个人的穿衣品味

图片在APP中非常常见，图片的展现形式和质量影响着用户对产品的感官体验，图片的定位就像一个人的穿衣品味，不同的穿衣风格会让别人对你产生不同的评价，给你贴上不同的社交属性标签。

下面我们来看看APP设计需要注意的重点，从图片比例、一致性、图片质量、真实性等方面进行分析。

1.1. 图片比例需要考虑哪些？

不同比例的图片所传达的信息是不一样的，我们会根据产品属性选择相应比例的图片进行整体框架布局。

通过体验一些主流的APP，我们会发现一些常用的图片比例，比如1:1、4:3、16:9、16:10等等；也会发现一些打破常规比例的设计。我们需要分析它们的特点，并结合自己产品的特点，在自己的APP设计中合理的运用它们。

1:1 强调主体的存在

1:1 的图片比例是常见的设计比例，这种比例更容易简化构图，突出主体的存在感，常用于产品展示、头像、特写展示等场景，尤其是在电商应用中。

4:3 紧凑图像，更易于构图

4:3的图片比例可以让图片更加紧凑，更容易构图，方便设计师发挥。由于手机屏幕容量较小，这个比例在全屏显示时，在App设计布局中占用的空间很大。作为设计师，经常会用到这个比例。ZCOOL、UI中国的作品封面，以及Dribbble上的作品展示，都是用了这个比例。

16:9 电影效果

16:9的画面比例可以呈现出电影般的效果，多用于横向构图，是应用最为广泛的尺寸比例之一，能给用户开阔的视野体验，在很多影视娱乐APP设计中被广泛使用，比如腾讯视频、网易云音乐等。

16:10 拥抱黄金比例

黄金比例就像金字塔上的珍珠，越接近黄金比例就越有吸引力，反之吸引力就会减弱，16:10的比例是最接近的。设计没有绝对的标准，我们可以遵循一些优秀的规则，但也要敢于打破规则，尝试更多的可能性。

X:≤Y瀑布设计

X:≤Y 表示宽度固定，高度在最大值之间自定义的瀑布流设计。这种设计方式用在一些用户没有非常明确目的，只喜欢获取尽可能多的信息的情况。对于 X:≤Y 比例的图片根据设计的空间维度加以区分可以分为，要注意高度控制，不要超出屏幕的显示区域。例如花斑网在 750x1334px 的设计中，最大高度为：848 px。

以上列举只是对一些常用的比例进行分析讲解，还有很多比例就不一一演示了，分享的目的是让大家养成分析的习惯，根据自己产品的特点选择合适的图片比例。

图像比例选择方法：

基于产品展示效果，选择能充分表达产品特性的图片展示比例；基于产品气质，选择与产品内容气质相匹配的图片展示比例；基于产品特性选择合适的常用比例；根据版面灵活定制特殊比例值；分析→突破→创新，创造出符合一定规律或审美理念的比例值。1.2. 图像比例一致性

根据产品特点确定合适的图片显示比例后，我们需要根据整体布局和图片分布情况来规范哪些布局可以使用相同的图片显示比例。在保证视觉效果和交互形式的前提下，同一主题在不同页面呈现时最好使用相同的比例，这样既能保持视觉表达的一致性，也方便后期的运维。

1.3. 提高图像质量

越来越多的产品开始注重图片的质量，比如网易严选对产品图片的拍摄和处理都有着严格的规定，目的是为了提升产品的气质和在用户心中的印象。在设计的时候，一定要用最好的图片来衬托我们的设计稿，图片的质量影响着整个界面的风格。

很多人觉得图片是后期操作上传的，不管我的设计稿画得有多漂亮，最后都是没用的。对于这个问题我的看法如下：

最好的设计输出是设计师专业素养的体现；将最好的结果呈现给决策者，会增加他对你设计能力的印象；通过制定可操作的视觉规范来控制图片的质量，可以严格控制你对图片的视觉追求；你的态度会给你带来好运。1.4.图片真实还原

虽然上面已经说了图片质量的重要性根据设计的空间维度加以区分可以分为，但是我们不能为了视觉效果而选择一些和主题不相关的图片，这样也会误导决策者。图片的质量我们可以提高，但是我们需要保证图片的真实还原，这样你的设计作品才能更加真实合理。

在一些本土产品设计中，对国外图片素材的使用需要谨慎对待。例如案例中的模特图片，文案信息更偏向于国内场景，如果使用国外的模特素材，可能显得比较高端，但无法真实还原产品场景，会给决策者传递错误的认知。

2. 文字，我只想知道重点

文字设计的层次感决定了信息的高效传达，通过对文字信息的层次化处理，可以有效的帮助用户获取信息，提高用户对产品操作的效率。

2.1. 将文本信息区分为不同的层次

当我们拿到一个交互原型或者其他需求文档的时候，需要有效的区分文字的信息层级，以便用户能够快速获取并了解信息内容。文字信息可以简单分为重要信息、次要信息、辅助信息等。在排版文字的时候需要清晰的理清信息之间的层级关系，提升用户对产品的整体体验。

通过调整字体大小、颜色、留白、层级划分等，对相同属性的信息进行分类设计，使得整个信息排列层次分明，重点感明显。

设计师在进行文字视觉表达时，也需要减少文字样式的使用，以达到整体界面的视觉平衡，不宜使用过多的表达风格去凸显文字信息。

2.2. 评估良好信息呈现的最大价值

我们在设计界面的时候，初级设计师往往会忽略文字信息的最大价值，只是按照自己的习惯做一个完美的布局，当最终进入测试阶段的时候才发现为什么文字比预想的要多很多，这时候就会出现返工的情况，给整体的产品开发进度带来风险。

作为一名合格的UI设计师，我们需要预估信息呈现的最大值，而不是取最小值或者任意设计，这样会导致执行过程中出现更多不可控的风险。

2.3. 善于利用提示进行设计

在一些有大量文字信息的界面设计中，为了提高用户获取信息的效率，我们会结合整体的视觉效果选择合适的提示进行设计。很多初级设计师会过于专注于交互原型，对于大量的文字处理往往过于随意，只顾美化交互原型，缺乏对用户体验的主动性。

在做产品交互设计的时候，有时候产品或者交互无法从视觉的角度去组织和布局信息，我们需要用我们的专业知识去优化您认为可以改进的地方，也为您在整个产品流程中树立专业性。

提示的设计形式主要有数字、字母、图形、色块等，只要能够有效区分信息层次即可。

3. 色彩，如何成为色彩设计师

色彩给人的感觉是最直观的，不同的色彩搭配传达出不同的情绪。色彩搭配有一些方法可寻，但也有一定的感性判断。作为视觉设计师，我们需要学习理性的方法和技巧，也要不断欣赏优秀的作品，提高自身的审美能力。

3.1. 颜色基础知识

颜色分为无彩色和彩色，无彩色指白色、黑色、各种深浅的灰色等；彩色指红、橙、黄、绿、青、蓝、紫等颜色。

关于色彩更多的理论知识这里就不展开了，色相，纯度，亮度，对比度，性格等等理论知识大家可以自行补充。

3.2. 创建颜色库

作为初级设计师，我们对色彩搭配的掌控还不是很稳定，为了提高工作效率，需要通过一些合理的方法建立大量的颜色库来满足不同的需求。

下面列举一些比较常用的方法，供大家参考。收藏颜色的方法有很多，我们只需要掌握几种比较适合自己的就行。只要养成习惯，长期坚持，哪怕只用一种方法，也会收获很大的回报。

a.通过各类APP收集颜色

体验不同领域的APP，建立不同领域APP色彩搭配的选择，为后期的项目设计打下基础。按照主色调分类，如红色系列：网易云音乐、京东、网易严选、网易考拉等；也可以按照产品气质分类，如文学、时尚、科技、可爱等。

b. 通过 Dribbble 收集颜色

在Dribbble上，每个作品的右侧都会有一个颜色文件。为了发现优秀的作品，你应该养成收集颜色文件的习惯。

c. 通过摄影收集色彩

通过优秀的摄影作品来捕捉色彩也是常用的方法。

领取方式：

在Photoshop中打开图片→保存为Web→选择GIF格式→颜色选择8→双击颜色表中的颜色块→颜色选择器

d. 通过马赛克收集颜色

利用Photoshop的滤镜对图片进行马赛克处理，可以得到优秀作品或照片的色彩组合，特别适合收集同一色系的色彩。

领取方式：

在 Photoshop 中打开图像 → 滤镜 → 像素化 → 马赛克 → 设置单元格大小

e. 从电影中收集颜色

相信大家都喜欢看大片，这部电影之所以这么受欢迎，肯定是里面有太多值得我们学习的元素，作为一群敏感的设计师，那些刺激我们神经元的优秀电影场景总是不能错过的。

3.3.提高审美感，增强感性判断

虽然色彩搭配能力可以通过一些理性的方法提高，但也有一定的感性判断，色彩搭配中细微的差别往往是感性判断，需要我们不断欣赏摄影、绘画、设计作品等，全面提升自身的审美，才能不断增强感性判断。

作为UI设计师，你不只是设计界面，还可以看平面作品、摄影绘画、影视动画，体验手工艺、体育娱乐，细细体会生活中的每一个变化。

3.4. 养成分析的习惯

想要拥有好的配色能力，积累的过程很重要，看到优秀的作品时，需要分析色彩之间的对比关系，色彩在色轮上的位置关系，HSB值之间的关系等，不断的分析总结，才能逐渐形成自己的思路，提高驾驭不同配色的能力。

分析的习惯不仅仅体现在色彩上，页面的布局、文字信息的处理、图标的设计风格、间距留白等等都需要不断的分析总结，只有掌握优秀作品的规律，才能形成自己的标准习惯。

4. 图标：从懂得画画到画得好还有多远？

图标是APP设计中的点睛之笔，不仅可以辅助传达文字信息，还可以作为信息的载体被高效识别，同时还具有一定的界面装饰效果，提升界面的整体美观度。

很多初级设计师往往会忽略图标的重要性，养成从素材网站下载重复使用的习惯。一旦养成这个习惯，他们会逐渐失去自己做事的动力，希望为任何元素找到素材下载。工作几年后，他们很快就会遇到自己的瓶颈期。

设计师对图标设计的态度和把控，会成为你区别于其他设计师的因素之一。图标设计有几个阶段：下载复用→动手设计→规范设计→融入品牌基因。你现在处于哪个阶段？

4.1. 下载重用

下载复用是很多初入行的设计师习惯的工作方式之一，由于自身软件技术、设计功底、创意能力等的不足，导致他们无法完成一个合格的图标设计从创意到标准图的全过程。

缺点：图标设计风格和细节处理完全不一致，一旦养成这样的习惯，就会逐渐丧失动手能力。

4.2. 动手设计

大多数有设计志向的设计师都意识到图标设计的重要性，并会根据产品特点绘制统一风格的图标。

注：图标设计风格包括：线性图标、填充图标、脸部图标、扁平图标、手绘风格图标和写实图标。无论我们选择哪种形式，在设计时都要保持风格的统一。由于图标的体积不同，不同体积的图标在相同尺寸下呈现的视觉平衡性也不尽相同。例如吉祥物，相同尺寸的正方形会比圆形显得更大。因此，我们需要根据图标的体积，对图标的尺寸进行相应的调整。

4.3. 标准设计

当设计师养成了自己动手的习惯，那么恭喜你，你进步了，保持这个习惯。随着软件技术的成熟，我们需要严格控制自己的自发性，用标准规范来做图标设计。在标准设计的基础上，我们可以充分发挥自己的创造力，不必局限于标准，但整体的本质需要符合设计规范。

4.4. 融入品牌基因

图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的设计也大同小异，很多注重设计的产品也开始根据自己的品牌基因定制图标。融入品牌基因的图标设计具有很强的品牌识别度，不仅能形成独特的视觉差异化，还能增强用户对产品的记忆。

5. 留出一些空间。我只是想要足够的空间。

适当的留白可以让你的界面更加有灵性，在信息之间预留更多的空间，更好的表达信息之间的层次感，比起拥挤的信息布局能给人更舒适的体验。

当设计师愿意留白，却被产品或者运营以“想放更多内容”为由拒绝时，作为设计师的我们可以尝试从不同的方向去表达自己的意见：

设计对比稿，将产品要求的方案和你认为完美的方案进行对比；选取此类处理的优秀案例，用成功的案例去说服产品接受你的方案；进行用户测试，选取一些目标用户进行体验，根据用户的声音设计最佳的解决方案；更多的沟通方式等着你去探索，最终的目的都是为了做出更好的产品。

1、不同的图片比例体现不同的特点，根据产品特点合理选择；

2、设计中保持相同的图像比例，不仅使得视觉表达一致，也为后期的操作和维护带来便利；

3.通过提高图片的质量来提高设计作品的美观度，同时也保证图片的真实还原；

4、字体运用时应注意信息的层级、信息容量的最大化价值、提示的巧妙运用。

5.养成不断建立和丰富你的色彩库的习惯；

6.提高审美能力，增强感性判断能力，养成分析习惯；

7、图标设计的几个步骤：下载复用→动手设计→规范设计→融入品牌基因；

8、适当的留白可以给人更加舒适的体验。

提升设计作品品质的方法有很多，需要我们不断学习、总结，没有一种实现方式是独一无二的，只有不断分析、颠覆、创新，才能找到适合自己的路子。

最后祝大家越努力，越幸运！

网易UEDC(公众号)