如何提炼appui设计气质

A. 几个思路教你如何设计出优秀的界面

1.注重人机交互

人在操作手机时，主要以人的意识为主体，手机起到辅助作用。设计师应考虑到人与手机的各自特点，使得两者之间相互协调，从而使工作条件达到最优。在使用手机的过程中应尽量减少人的计算和记忆负担，从而有效地提高对手机的使用效率。游启

2.颜色搭配方案

色彩是APP界面设计中的重中之重，这关乎是否能够正确表现出产品气质和定位。主色决定了手机APP界面的整体设计风格，这个主色代表了产品的文化方向，同时也向用户传达了产品的情感。在设计线框图之前，研发团队的每个人就应明确产品的定位，提炼出最贴切产品的主色。

在设计手机APP时设计师可以使用互补色，在手机APP界面设计中互补色的对比效果是最为强烈的，给用户带来强烈的冲击，情感丰富，给人留下深刻印象。但是这种视觉冲击很强的互补色只能在小面积使用。。设计师还可以使用冷暖色对比，这样的配色会使手机APP界面变得非常出彩，使得分类内容一目了然。

3.字体设计方案

设计文字时应保证文字辨识度高和信息传达的准确性。相对于图片文字拥有更加清晰准确的表达能力，使得用户能更加清晰从APP中获取信息信息，界面内容也更加直观，用语要简洁，使得用户能够迅速的理解其功能，文字布局上也应做到排版布局合理，结构层次清晰。在字体设计中不同春磨雹风格的字体会给人带来不同的视觉体验。

字体设计的节奏感体现在字号对比、重量对比、色彩对比上。当字号越大时，文字就会显得越重要，字号的大小变化能让版面展现出强弱变化;最引人注意的标题，在版面中会比其他字体更粗;重要的文字可以换作其他颜色加以区分，红、扒帆黄、橙等暖色被称为前进色，它们比蓝、绿这些冷色更能起到吸引人眼球的作用。

优秀的APP不仅仅需要满足用户对功能的需求，还需要满足用户对视觉层面的需求。这些思路你们了解了吗?

B. 如何提高UI设计的美感

1、多看。为了提高审美，你需要大量去看别人优秀的APP或网页作品，在站酷、花瓣等设计网站可以很容易 找到大量优秀的作品，多看多想，熟能生巧，等坚持一段时间以后，你就会发现自己的审美提盯扮高了。
2、多做。如果只是看过很多优秀丛链的作品，可能还是不会设计，所以为了进一步提升审美能力，接下来就要不断的练习，通过练习发现自己设计中的不足，形成自己的想法和理念。对于学习过程中遇到的问题，通过网络或渗则孙google及时解决。
3、多想。在学习UI的过程中，设计技法只是一小部分，更多的是要去理解设计背后的思路和原理。比如，为什么整体色调是暖色系？为什么要突出某些元素？页面的结构和布局是怎么确定出来的等等。不断去思考，不停去问自己为什么，只有这样，才能加深自己对美的理解和认知，才能使设计有理有据，更好地解决问题。

C. 怎么让自己做的app界面设计看起来更精细一点

第一点：了解你的目标客户群的心态
1、做微任务的目标客户群(如随时随地看看新闻，听听歌，看看电影，聊聊八卦之类)：
这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸
2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。
这类的解决方案是 我们尽最大努力的去满足用户禅旅的情景需求。做到极致和简单。
3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的贺敏凳
这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。

第二点：APP原型图的制作和设计讨论
这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。
常用的APP原型图工具：移动APP原型设计神器 POP 、axure、Foreui等

第三点：APP视觉设计与设计要点
（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等
一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。
另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。
所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。
你必须记住：（1）隐藏设计或者减法设计 （2）分区或分类 （3）帮用户做决策 （4）提高交互创新设计 （5）让人有爽快感和新奇感 （6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）
一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”
2014年 APP设计风格趋拿罩向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！

D. 对于App界面，怎样的视觉设计才算优秀

虽然我并不是一个专业的app的设计师，但是看过这么多app的话，也是能够总结出很多怎么样才能把app界面设计的很好的体验的。

同时app界面的功能的放置的话，一定要能够合理。
当我使用app的时候，有时候想知道app当中有什么功能的时候，这个时候就会在当中到处的找。有些app他们设置的不太合理的时候，我就会很难找到它的使用的方法，我觉得这个是app界面设置当中的一个非常重要的一个方面。一定要能够把你的界面清楚明了的展现给你用户，否则的话，你会因为你的界面太乱，而失去很多的用户的。

E. 如何做一个优秀的UI设计师呢

一、两道思维
很多 UI 拿到一个页面原型的时候，就立马打开各大设计网站找参考，然后照着参考页面上的效果，生搬硬套到原型上，这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢？
第一道思维：交互思维
先了解页面实现什么功能，功能的交互操作流程是怎样的，也就是说用户操作这个页面上的功能时，用户的行为路径是怎样的。
第二道思维：视觉思维
了解完功能、交互后，提取原型中视觉组成元素，细分归类，每一类应用统一性原则进行设计。
然后交互与视觉一同结合来设计界面。
二、思维应用
结合案例我们来看下两道思维是如何进行的。
第一道谈咐思维：交互思维
了解功能含洞纯交互流程。
根据实例原型分析出用户行为路径：
用户行为路径：
注意点：
用户行为路径的获取，一定要跟产品经理、交互设计师进行沟通确认清楚。
用户行为路径某些步骤中，也有先后之分，比如第1步中，用户输入了账户地址后，才会有账户的相关数据显示。
用户行为路径可以支撑信息内容进行归类分组。
第二道思维：视觉思维
提取视觉组成元素。
视觉元素：
注意点：
提取视觉组件元素尽量详细归类。
如有视觉规范，视觉组件元素风格应用请遵循视觉规范。
如无视觉规范，同类视觉组件元素应用统一性原则进行设计。
三、检验方案
我们带着两道思颤碧维来检验一下这位设计师输出的方案：
问题1：交互层级
问题所在：
数据显示在前，输入在后，交互操作层级有点混乱。
问题截图：
问题解决：
用户行为路径中，第1步有个先后顺序，先输入地址，后显示数据，在进行信息内容布局设计的时候同样需要有先后顺序，所以交互操作层级一定程度上影响着布局排版。
问题2：步骤关联
问题所在：
“批量转账”按钮归类到了第1步的信息模块中，交互操作逻辑有点不通畅。
问题截图：
解决方案：
用户行为路径中，用户核心费用信息后，最有可能的行为就是点击“批量转账”按钮，所以“批量转账”按钮与转账费用信息的操作关联性比较大，应该在同一模块里会更符合交互操作逻辑。
问题3：颜色应用
问题所在：
主色、点缀色、辅助色各自的应用范围没有规则，颜色应用混乱。
问题截图：
问题解决：
一个页面或者项目中，各种颜色的应用范围需要有一定规范，文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。
问题4：输入控件
问题所在：
输入类组件样式存在多样性，同样是输入框，有多种样式，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，输入类组件样式应用统一性原则，保持视觉风格一致，从而减少用户操作认知偏差。
问题5：按钮样式
问题所在：
按钮样式应用到不具备按钮点击属性的对象上，用户会认为也是可点击，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，不具备按钮点击属性的元素尽量不要套用按钮样式，减少用户操作认知偏差。
举个例子：人形的稻草套上人的衣服，成功了欺骗了人们，造成了认知偏差。
问题6：信息展示
问题所在：
同类信息内容的展示存在多样式，传达过程中加重了用户的认知负担。
问题截图：
问题解决：
一个页面或者项目中，同类信息内容的展示应用相似性原则保持视觉风格一致，因为相似性的布局可以更加高效地传达信息。
举个例子：电商页面，金额信息展示；理财页面，收益信息的展示；都是应用相似性的布局，即统一又高效地传达信息。
问题7：图标风格
问题所在：
图标风格不一致，图形反白风格，立体风格，线性风格。
问题截图：
问题解决：
根据产品的特性，建议统一的图标风格，选择线性、面性、渐变、立体等风格。
问题八：对齐间隔
问题所在：
页面元素的对齐、间隔没有规律，整体视觉显得松散，不严谨。
问题截图：
问题解决：
可以利用栅格系统，把页面信息内容规整起来。
四、优化方案
根据发现的问题，我们来看一下优化后的设计方案：
优化1：交互路径
根据用户行为路径，将相关联的信息归类到一个模块，每个步骤划分到一个模块，相关联的步骤合并到一个模块，模块内完成各自的操作展示任务，模块之间信息内容互不干扰，但从结构布局又能够形成符合交互操作逻辑。
优化2：颜色规范
规范颜色，配色的方法在这里不做深入讨论，这里方法的是基于品牌色通过饱和度、亮度、透明度的变化来得出文字各层级的颜色、边框的颜色。
优化3：输入控件
对输入类控件的样式进行了统一，让用户从视觉上就能够清楚地分辨出哪些是可以进行输入操作的，从而减少用户对交互操作上的认知成本，提高信息输入效率。
输入控件进行交互时，要有交互状态反馈，默认状态、选中状态、错误状态。视情况而定，可以增加鼠标移上状态和不可输入状态。
状态变化时的颜色应用，可以通过变换色相的透明度来保持色彩的一致性。
优化4：按钮规范
对按钮进行了分类，分为常规按钮、图标按钮、文字按钮；对按钮样式用颜色进行了统一；按钮要有交互状态反馈，不可点击状态、可点击状态、鼠标移上状态、鼠标按下。
状态变化时的颜色应用，可以通过变换色相的饱和度、亮度、透明度来保持色彩的一致性。
优化5：信息展示
对信息内容应用相似性原则进行了排版的统一处理，每个小类信息的标题与内容采用统一排版格式，然后重复应用，有助于提高信息获取效率。
优化6：图标风格
这里的图标应用于功能性图标，统一采用线性圆角风格。功能性图标需要注意图标的形状要能够正确有效地传达出功能的含义。
优化7：对齐间隔
应用栅格系统对视觉元素之间的对齐、间隔进行调整，使页面视觉更加严谨，页面信息更容易阅读。
五、总结
交互思维
了解页面中的功能交互流程，梳理用户操作行为路径，可以对行为步骤中的信息内容进行归类分组提供依据，最终有助于页面信息内容的排版布局。
视觉思维
提取视觉组成元素，对颜色、文字、控件、图标等每一类应用统一性原则进行规范设计，再通过视觉元素本身相互组合，最终应用回信息内容上，建立规范的视觉感。
设计一个页面，交互思维和视觉思维是互相配合的，缺一不可，最终都是为了共同去构造符合交互操作逻辑、满足视觉美感的界面。

F. 如何制定APP的风格

进行界面设计之前需要理清使用流程

在进行界面设计之前，必须先了解APP应用的使用和操作流程，并且清楚如何设计才能方便用户操作。如果没有理清APP应用的使用流程就开始设计，则容易让整个APP应用的结构变得复杂，开发流程也会变得越来越混乱，从而导致用户在使用过程中迷失方向，最终卸载这个APP应用。即使是设计功能非常简单的APP应用，也应该理清该APP应用的界面结构，这样才能设计出友好的页面元素，例如导航条、按钮、背景图等交互元素。

界面设计时应该避免使用像素低的图片

当下的移动设备种类繁多，且其屏幕尺寸大小不一，这样就容易出现一些像素低的图片在部分高分辨率下的屏幕显示模糊的问题，而模糊的图片容易给用户造成非常不好的体验效果。所以在设计APP应用的界面时，应该从高像素的屏幕尺寸开始设计，然后再根据小尺寸屏幕逐一进行比例缩放，只有这样才能向下兼容不同移动设备的屏幕。此外，还可以借助位图操作等方式来处理好高像素图片缩放带来的图片像素不足的问题。

APP应用的界面触摸点击区要范围合理

大部分人的食指的宽带是在1.8厘米左右的范围，而对应的像素值差不多在52px左右，所以APP应用界面的触摸区域应该根据用户的手指宽带来设计，同时还要考虑用户手指在屏幕触摸滑动过程中可能会出现点位触摸不准的问题，否则用户在快速触摸过程中容易带来APP应用上的一些误操作，所以这就要确保APP应用界面上的按钮一定要足够大，且触摸响应延迟要尽可能减小，防止用户多次重复触摸带来的APP应用响应异常。

控制APP应用打开瞬间的过渡动画时间

很多APP应用都会选择在用户第一次打开的时候，设置一个动画过渡效果，这是对用户体验是非常友好的，但是采用过渡动画应该控制好加载时间。并且要注意的是，APP应用在加载动画的过程中要做到过渡平滑自然，主要从图片到动画间的过渡，以及APP应用加载过程中因为程序异常或者网络原因带来的白屏问题，当出现白屏的时候应该加入进度条以告知用户当前的加载进度，而不是让用户盲目在界面过渡的加载中长时间等待。

APP应用界面设计要兼容不同系统平台

现在比较主流的手机操作升旦洞系统就是安卓和IOS两大平台，这两个手机平台都有各自的特点，不能说哪个好或者坏，所以一款APP应用要确保能够同时兼容这两个平台，这就需要APP应用设计师要认真掌握好每个手机操作系统的人机交互方式，设计出能够适应各个平台的界面和视觉元素，不要让用户在不同的手机操作系统吵枯上感觉APP应用的操作和响应很不自然，同时与手机系统的按钮等元素有种格格不入的感觉。

避免在APP应用界面上大量填充UI元素

APP应用界面并不是UI元素越丰富越好，而往往是越精简迟基让人看起来越舒服，因为毕竟手机的屏幕尺寸不可能容纳太多东西。所以，当设计师在设计平板电脑上的APP应用界面时，一定要记得在手机上的界面不一定能够放置像平板电脑那么多的视觉元素，应该在实际的移动设备上预览相关的效果再决定是否要放置这么多的UI元素。APP应用界面上填充太多UI元素容易导致页面杂乱和重点不清，更影响到APP应用功能上的展示。

APP应用界面设计完成后的测试不可缺

不管是最终的APP应用产品还是UI界面，在完成其界面设计后，都应该尽可能多的进行测试工作。即便是设计师已经在不同设备上预览过无数遍，毕竟APP应用界面在一些特定的情况下出现BUG等问题也是常见的事情，如果不经过测试的话，那么这些BUG就很难被发现出现，没有发现自然就不会修复，如果等到APP应用上线之后，在用户使用时被发现，就会给用户的浏览造成困扰。所以测试也是APP应用界面设计必不可少的工作。android中可以自定义主题和风格。风格，也就是style，我们可以将一些统一的属性拿出来，比方说，长，宽，字体大小，字体颜色等等。可以在res/values目录下新建一个styles.xml的文件，在这个文件里面有resource根节点，在根节点里面添加item项，item项的名字就是属性的名字，item项的值就是属性的值，

G. 怎样提升手机App UI设计风格

根据你手机APP定义风格，就比如你是一个婚庆的软件携袜，如果你用黑棚隐世白色肯定不可以的，是根据产品定位，然后定义风格，进行设链肢计，这个没有什么限定标准。

H. UI设计的核心是 ‘美’，UI设计师应该如何提升审美能力

最能体现UI设计师的能力就是作品，想要做出好的作品，必须要有足够的审美能力，想要有足够的审美能力就必须在日常生活中日积月累

为什么需要提高审美能力？

1、‘美’是UI设计核心，有足够高的审美能力，才能设计出来好的作品。

2、‘美’能引起用户闷此袭的共鸣，引导用户的情感导向。

3、是一个人的核心竞争力，它关系到一个人的外在形象、内在气质，进而会影响生活方方面面。

审美能力是什么？

美，是指能引起人们美感的客观事物的一种共同的本质属性。人类关于美的本质、定义、感觉、形态及审美等问题的认识、判断、应用的过程是美学。

美就是我们在生活和艺术中发现的被人认同的地方，谈论美,一定比谈论生存,是一件更奢侈的事情，所以只有在自己的状态比较好的时候才行。在心理学上，人的不同情绪会有不同的能量等级，像愤怒、焦虑、苛求，能量等级就很低；而勇气、淡定、愉快，能量水平就比较高。能量水平高，才有足够的时间与精力去欣赏美。所以说，真正重视美的人，其实重视的是内心的体验，他们不关心是不是一定要有某种目的性，也不关心别人的评价，或者是否符合大众主流标准。而从这一点延伸出来，缺乏审美力的人，一定是无趣的，也是缺乏仪式感的。

审美，也可以叫品味，它是一种感受力、鉴赏力、判断力，是从万千事物中获得美感的能力，能解读事物里所要传递的情感，主要由人后天培养而成。

美学家蒋勋说过一段话：“人审美水平的高低，决定了他的竞争力水平。因为审美不仅代表着整体思维，也代表着细节思维。给孩子最好的礼物，就是培养他的审美力。”

所以可以说，审美能力，其实就是一个人的核心竞争力，因为它关系到一个人的外在形象、内在气质，进而会影响方方面面。

对UI设计师而言，提高审美主要分为三个步骤、分别是 ：用眼、用脑、用手

一、提高眼界(用眼）

生活中不缺失美，而是缺少发现美的眼睛。

从这句话，我们可以理解为，生活中不缺失美好事物，而是我们没有去留意与发现生活之美。

所以提高审美，最基础的就是提高设计师的眼界，而想要高眼界，就需要大规模看各种优秀作品。

优秀作品可以分为两类，分别是： 设计作品、日常发现

设计作品

设计师应该多看不同类别的作品，包括但不限于平面、插画、字体设计、网页、VI、摄影、动效设计、3D设计等等。

每个设计师都应该早点找到自己的审美偏好，在这个审美偏好范围内去找寻找最优秀的设计师与设计作品。以下是我推荐的一些设计网站，如：站酷、Dribbble、Behance、Yanko Design、花瓣、Pinterest 等等

日常发现

好的设计需要灵感，扒段而日常发现将会为我们提供丰富的灵感素材。

在街上、商场、公园、影视、旅行中看到的关于美的一切，就如你去逛街时，看到一个令你眼前一亮的一个品牌广告，或者一个穿着时尚的靓女、一个样式新奇的包装盒。它就如日常吃饭一样构成我们的日常练习，也是为提供主要灵感素材的途径之一。

日常发现前期需要我们刻意去发现、去寻找。后期就可以被动的吸收，变成一件很自然、很平常的事情。

二、思考分析（用脑）

在扩宽眼界之后，需要去思考分析，不然仅仅是看，而不去吸收与分析，那对UI设计也是无用。

我们要针对性的去思考。比如一张平面，它为什么用这个颜色？为什么需要采用这样的布局？这样的布局有什么好处？凸出了什么信息，如果自己做，能否有更好的创意表现？画面排版除了这样的排版方式，能否有更好的版式去表现？

我们去看展，很多时候就是去拍个照。其实如果用点心，收获会比你想象得更大。

看一个展览，可以先要问自己几个问题：这次展览的内容是什么？对我工作有没有可参考性。

去到现场后，从到达现场就可以开始思考，蚂兄展会视觉为什么这么设计？展会门头装饰设计优缺点是什么？是否还可以做的更好。进入展馆后，除了多看，也要多摸，这是什么材质做的，是否可以应用到平常的设计中。也可以看看每个展位的室内设计如何，平面物料如何在展位呈现。

就这样带着思考看问题，不停地分析，这样你吸收更多的营养。

三、动手练习（用手）

有一句俗话“说的好不如做的好”。

具备一定的欣赏能力，就可以通过作品来表现美了。对于一个设计师根本能力，就是将自己心中的‘美’表现出来。说的再好，却不能将它实现出来，那也只是空中楼阁，无用之谈。

如何用作品来变现‘美’，别无他法，只有不断的练习。首先最简单的就是练习就是临摹，在临摹的时候需要去分析作品‘美’在哪里，它是如何实现的。即可锻炼鉴赏能力，也能提高自己设计技巧。

一个好的作品需要不断的打磨，由许多的细节方面构成，所以不论我们是在项目还是练习时，都不要急于求成，认真对待每一细节。比如采用什么样的色彩、图标大小与类型、留白是多少、采用什么样的布局等。只有认真对待每一件事情，终将有所收获。

另外在进行UI设计时，会涉及到各种“理论”与“规范”，将会在下一篇从界面布局进行详细描述。

人们在对于美好的事情，保存高度的一致，但对‘美’的认知会存在一些差异，这是由一个人的后天培养导致的。

UI设计师提高审美能力、希望能给大家有所帮助、具体如下：

1. 提高对美的认知、保持对生活的仪式感，丰富自己的精神之美

2. 提高自己的眼界、丰富自己的灵感素材，打破自己的设计局限性。

3. 提高自己的分析能力与动手能力，因为设计师是靠作品说话的，作品就是你实力的最好凭证。

I. 如何做出优秀的UI界面

今天简单介绍两个方法，可以供大家参考，也可以找一些UI设计资料，大纲如下：

1.品牌基因法

2.“抄樱备誉”现实

3.多管齐下

1.品牌基因法

这个就不多说了，写过很多篇了，没看过的可以去看下：

《品牌基因法做图标——实战篇》

所有的图形其实都是对现实物体的提炼与再加工，所以如果我们能够很好的“抄”现实，那必将是一个很棒的设计技能。怎么样“抄”现实呢？举个例子，现在来画一个啤酒的易拉罐。首先我们要去找到一个真实的易拉罐：

UI设计

接下来开始“抄袭”它的造型，大家要善于提炼与概括一些形状，例如看到这个这个易拉罐我们就能知道，它大体是由两个矩形两个梯形组成的：

UI设计

很多人说自己造型能力不行，那我们就多用规则的图形去拼凑，还有现实的物体给你参考，你还有啥不行的，再不行，抽你信不信？有了大体框架，慢慢加一些细节，最后得到下面的线稿：

UI设计

线稿画好之后，就加个颜色呗：

UI设计

为了增滚肢加质感，咱再加点高光、投影：

UI设计

这样一个原创的“抄”现实作品不就出来了！我们再来个例子，还是画一个酒瓶，：

UI设计

首先还是先画造型，注意，有曲线的地方如果实在不会用布尔运算，就上钢笔吧，但一定要过度平滑，不然看着就会不精致。得到线稿如下：

UI设计

接着上颜色，加高光、阴影：

UI设计

“抄”现实是设计师必备的技能，非常锻炼我们对事物的概括能力，掌握了这招，你就是最棒的！

怎么练呢？

像我这样，一段时间给自己一个主题，比如“酒瓶”，那我这一段时间就画各类酒瓶，画到自己满意为止！菜宝宝最近在画的主题是各地建筑，：

UI设计

UI设计

最开始不要害怕和别人的风格太像，这都正常，每一个独特的风格都是在大量练习与思考之后才能形成的，前期只要内容不同就ok，不要在乎有别人的影子，所以：去练吧，宝贝儿！

UI设计

大体的轮廓可以参考左图，但颜色和脊段细节参考第二个，最后得到自己的原创作品：

UI设计

如果你只盯着一个作品来借鉴，做着做着基本就一样了，然后就没有然后了，所以多找参考，取每个参考的精华之处，最后融合成自己的作品，这也是原创的另一个途径。

总结

方法与思路虽然有很多，但还是推荐第一种和第二种，尽量让设计的灵感、造型、颜色取自现实生活或品牌，这是提高原创度非常可取的方法。与大家共勉，加油！科科。

J. 如何做好APP界面设计

APP界面设计经验总结
当我们打开一个APP时，从视觉层面分析，影响用户对APP整体感官体验的元素主要有：图片、文字、色彩、图标、留白等。

图片的合理运用、清晰的信息层级、舒适的色彩搭配都将会提高整个APP的美感，从而为整个的产品体验加分。

一个成功的产品，视觉层面只是其中的一部分，但是作为一个合格的UI设计师，我们要做的就是把这其中的一部分做到极致。

下面我们通过图片、文字、色彩、图标、留白这几个维度来解剖APP设计，发现那些微妙的细节。只需要比别人多提高1px的细节，你的APP设计就会更精致。

目录

1、图片，如同一个人的衣着品味；
2、文字，我只想知道重点在那里；
3、色彩，如何成为“色”计师；
4、图标，从会画到画好之间有多远；
5、留白，我只想要足够的空间。

正文

1、图片，如同一个人的衣着品味

图片在APP中是非常常见的，图片的展现形式和图片的质量都影响着用户对产品的感官体验。

图片的定位就如同一个人的衣着品味，不同的穿衣风格会使别人对你作出不同的判断，为你打上不同社会属性的标签。

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

1.1、图片比例有什么讲究？

不同比例的图片所传达的信息主体不尽相同，根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。

通过体验一些主流的APP，我们会发现一些比较常用的图片比例，如 1:1、4:3、16:9、16:10等等；

也会发现一些打破常规比例的设计，我们需要分析它们的性格，结合自身产品的特点，才能在自己的APP设计中合理的加以运用。

1:1 强调主体的存在感

1:1的图片比例是比较常见的一种设计比例，利用此长宽比更容易将构图归整得简单，突出主体的存在感。

常用于产品展示、头像、特写展示等场景，在电商类APP中尤为常见。

4:3 图像紧凑、更易构图

4:3的图片比例可以使图像更紧凑，更易构图，方便设计师发挥。由于手机屏幕容量较小，作为全屏展示时，该比例在App设计布局上面占用空间较大。

16:9 电影场景般的效果
16:9的图片比例可以呈现电影场景般的效果，多用于横向构图，是应用非常广泛的尺寸比例之一，能给用户一种视野开阔的体验。

在很多影视娱乐类APP设计中运用广泛，如腾讯视频、网易云音乐等。

16:10 拥抱黄金比例
黄金比例就像金字塔上的明珠，越接近她越有魅力，反之会魅力减弱，16:10的图片比例最为接近。

设计没有绝对的标准，我们可以遵循一些优秀的经验规则，但是也要敢于突破规则，尝试更多的可能性。

X:≤Y 瀑布流设计
X:≤Y代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用于用户没有很明确的目的，只是喜欢获取尽量多的信息的情况下采用这种设计方式。

X:≤Y的图片比例要注意高度的控制，不要超出屏幕可显示区域的范围，如花瓣网在750x1334px的设计中高度最大值为：848 px。

以上列举的仅为部分常用比例的分析与说明，还有更多的比例这里就不一一演示，分享的目的是让大家养成分析的习惯，结合自身产品特点选择适合的图片比例。

图片比例选择方式：
a. 以商品展示效果为准，选择能够充分表现商品特点的图片展示比例；
b. 以产品气质为准，选择符合产品内容气质的图片展示比例；
c. 结合产品特点选择合适的常用比例；
d. 根据版面布局灵活的自定义特殊的比例值；
e. 分析→打破→创新，创造出符合某种规律或者美学概念的比例值。

1.2、图片比例的一致性
当我们结合产品特点确定合适的图片展示比例以后，需要针对整体的布局与图片分布情况，规范出那些布局可以采用相同的图片展示比例。

在保障视觉效果与交互形式的情况下，相同的主体，在不同的页面中最好采用相同的比例呈现，这样的好处不仅可以保持视觉表达的一致性，也能给后期运营维护带来便利。

1.3、提高图片的质量
越来越多的产品对图片质量开始加以重视，比如网易严选对产品图片的拍摄与处理都有严格的规范，目的就是为了提升产品气质和在用户心中的印象。

我们在设计的时候更要以最佳的图片来烘托我们的设计稿，图片的质量影响着整个界面的格调。

很多伙伴儿会觉得图片都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

a. 最佳的设计输出是设计师专业的体现；
b. 把最好的效果呈现给决策者，增加他对你设计能力的印象；
c. 通过制定运营视觉规范来把控图片质量，是可以严格把控你对图片的视觉追求；
d. 你的态度会给你带来好运。

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数值的关系等等。

只有不断的分析和总结才能逐步形式自己的思维方式，提高不同配色的把控能力。

分析的习惯不只是运用在色彩上面，对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结，掌握优秀作品的规则才能形成自我的标准习惯。

4、图标，从会画到画好之间有多远

图标是APP设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效的识别。图标也有一定的界面装饰作用，提高界面整体的美观度。

很多初级设计师都会忽略图标的重要性，也养成去素材网站下载复用的习惯，当这样的习惯养成后便会逐步丧失自己动手的驱动力，什么元素都希望能找到素材下载，工作数年之后很快就遇到了自己的瓶颈期。

设计师对图标设计的态度与把控能力，将会是拉开你与其他设计师差距的因素之一。

图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段，你现在属于哪个阶段呢？

4.1、下载复用

下载复用是很多初入行业的设计师习惯的工作方式之一，由于自身对软件技法、设计技巧、创意能力等方面的不足，无法从创意到标准制图完成一个合格的图标设计。

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

4.2、动手设计
对于大部分有设计追求的设计师，都会意识到图标设计的重要性，也会结合产品特点绘制统一风格的图标。

注意事项：图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

无论我们选择何种表现形式，在进行设计的时候都要保持风格的统一性，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡不尽相同，例如相同尺寸的正方形会比圆形显大。

因此，我们需要根据图标的体量对其大小做出相应的调整。

4.3、规范设计
当设计师养成自己动手的习惯以后，恭喜你已经进步了，保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性，运用标准的规范进行图标设计。

在标准设计的基础上面我们可以发挥自己的创意，也不一定要局限在标准里面，但是总体的本质需要符合设计规范。

4.4、融入品牌基因
图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的造型设计也几乎雷同，很多对设计比较讲究的产品，也开始根据自身品牌基因，进行图标定制化。

融入品牌基因的图标设计具有很强的品牌识别性，不仅可以形成独有的视觉差异化，也可以增强用户对产品的记忆。

5、留白，我只想要足够的空间

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

当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时，作为设计师我们可以从不同的方向试着表达自己的观点：

a. 设计出对比稿，把产品需要的方案和你觉得完美的方案进行对比；
b. 筛选出这样处理的优秀案例，以成功的案例说服产品接受你的方案；
c. 进行用户测试，选择一些目标用户进行体验，从用户心声入手设计最佳的方案；
d. 更多沟通的方法有待你去挖掘，最终的目的都是希望做出更好的产品。

设计小结

1. 不同的图片比例反应不同的特征，根据产品特点合理的选择；
2. 设计中保持相同的图片比例，不仅使视觉表达一致，也能给后期运营维护带来便利；
3. 通过提高图片的质量来提高设计作品的美感度，但是也要保证图片的真实还原；
4. 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等；
5. 养成不断建立和丰富色彩库的习惯；
6. 提高审美，增强感性判断力，养成分析的习惯；
7. 图标设计经历的几个环节：下载复用 → 动手设计 → 规范设计 → 融入品牌基因；
8. 适当的留白可以给人更加舒适的体验。