吃货必看的精致美食类APP UI界面设计欣赏，网友：看了只想着吃！

众所周知，UI设计师若只追求静态像素的完美呈现，而忽略动态过程的合理表达，会导致用户不能在视觉上觉察元素的连续变化，进而很难对新旧状态的更替有清晰的感知。动效是UI设计项目的最后一个步骤，所以也是最关键的能给一套设计作品，注入灵魂。

所以，UI设计师必须通过 「时间点」和「空间幅度」 的设计为用户建立运动的可信度，即视觉上的真实感，当用户意识到这个动作是合理的，才能更加清晰愉悦地使用产品。

很多人其实不太了解动效设计是什么，其实呢简单理解就是，从一个界面点击跳转到另外一个界面出现的动画变化的效果就是所谓的动效设计，这是在视觉界面之上给用户提供的一种另外的视觉观感。（如上图的效果）

UI设计中，动效设计其实可以是一个单独的职业，具体看用人单位，以及用人单位的需求，比如说互联网公司的设计团队，一般UI层面的动效都不会太难，UI 不需要太炫的动效，所以可能会让UI/视觉给兼顾了。

还有一些是专门的UI设计公司或者工作室，先说专门的设计公司：虽然UI上动效不会太炫，但是项目多，需求比较杂，必须要一专人来负责动效；

而工作室，或者小型公司，更多的是UI/视觉/动效都是兼顾了的，所以每一个优秀的UI设计师，都应该要学习懂得UI项目中的所以流程。

下面就是我想要跟大家分享的6种最常见的UI界面动效展示效果。 同时附上每一种界面动效设计的案例给大家欣赏，以便于更加清晰的对这一种界面动效的认识。

1、转场过渡

人脑灰质会对动态事物（如：移动、形变、色变等）保持敏感。在界面中加入一些平滑舒适的过渡效果，不仅能让界面显得生动，更能帮助用户理解界面前后变化的逻辑关系。

2、层级展示

现实空间里，物体存在近大远小原则，运动则会近快远慢。当界面中的元素存在不同层级时，恰当的动效可以帮助用户理清前后位置关系，以动效来体现整个系统的空间感。

3、空间扩展

在移动端界面设计中，由于有限的屏幕空间难以承载大量的信息内容，可以通过折叠、翻转、缩放等形式拓展附加内容的存储空间，以渐进展示的方式来减轻用户的认知负担。

4、 聚焦关注

聚焦关注是通过元素的动作变化，提醒用户关注特点的内容信息。这种提醒方式不仅可以降低视觉元素的干扰，使界面更清爽简洁，还能在用户使用过程中，轻盈自然地吸引用户注意力。

5、内容呈现

界面内容元素按照一定的秩序规律逐级呈现，引导用户视觉焦点走向，帮助用户更好地感知页面布局、层级结构和重点内容，同时也能让整个流程更加丰富流畅，增添了界面的活力。

6、操作反馈

无论是点击、长按、拖拽、滑动等交互行为，都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全感。

最后，培养UI设计师的界面动效设计能力，可以大大提高UI产品的友好度、也是提升UI设计师自身技能和设计修养的表现。

通过友好的UI动效设计案例可以降低沟通成本和打造核心竞争力，这方面我们VIP课程也会重点讲解界面动效，帮助大家成为更优秀的UI设计师，如果你是零基础也能帮助你迅速成为UI设计师。

VIP系统课程详情点击原文链接了解 ↓↓↓

全能UI设计师就业班，全新一期即将开班！（不能再错过高薪）

2.高效：显示图片收发信息，对网络的优化等等。

3.逻辑是否清晰：功能层级是否简单。是否简单易用。

4.UI精致程度：字体协调

5.人性化：充分考虑用户的使用情景和使用方式。对app的每一个细节进行相应的优化

6.进化速度：更新速度。所有东西都在发展与进化。

7.平台支持及兼容性：能分享，多个平台

设计师需要每天解决问题，找到合适的解决方案需要深入研究和精心策划的测试。发现一种适合所有人的方法或秘密公式可以自动解决我们所有的界面设计问题

1 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。

2 放出礼品往往更具诱惑力

给用户一份精美小礼品这样的友好举动再好不过了。具体来讲，送出礼品也是之有效的获得客户忠诚度的战术，这是建立在人们互惠准则上的。而这样做所带来的好处也是显而易见的，会让你在往后的活动进展（不管是推销，产品更新还是再次搞活动）中更加顺利。

3 合并重复的功能而使界面简洁

在整个产品开发期间我们会有意无意地创建很多模块，版面或者元素，而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块，它无用且降低了电脑性能。此外，界面上模块越多，用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

4 客户的评价好过自吹自擂

在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时，项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。

5 频繁展示你的主旨来加深印象

多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息，这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候，你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。

6 将选项与按钮区分开来

诸如颜色，层次及模块间的对比这些视觉上的设计可以很好地帮助用户使用产品：他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面，你就需要将可点击的元素（比如连接，按钮），可选择的元素（比如单选多选框）以及普通的文字明显区分开来。在下图的例子中，我将点击操作的元素设置为蓝色，选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。

7 给出推荐而不是让用户来选择

当展示许多项服务时，给出一个重磅的推荐项是个不错的做法，尽管推荐的设置无法满足所有用户。这么做是有理论依据的，一些研究已经揭示了这么一种现象：当面临的选择越多时，用户就越难做出决定。所以你可以高亮某个选项来帮助用户做出选择。

8 给出撤销操作来代替确定操作

假设你刚点击了一个连接或者按钮，撤销操作可以让操作流畅自然，这也符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。我还是更习惯假设用户每次操作都是正确的，其实只有极少数情况下才会发生误操作。所以，为了防止误操作而设计的确认窗口其实是不人性化的，用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来增加用户的操作友好度吧。

9 指出产品适用人群而不是做成全年龄

你是想把产品做成大众化的呢还是有精确的适用人群？在产品定位上你需要更精确些。通过不断了解目标客户的需求及标准，你能把产品做得更好得到更多与客户交流的机会，并且让客户觉得你很专业，在这方面是独家提供的优质服务。把产品定位得精确的风险就是可能缩小了目标潜在客户的范围，也使自身变得不那么全能。但这种做得更专业的精神却反过来会赢得信任，权威。

10 试着直接果断而不要唯唯诺诺

你可以通过不确定而颤抖的声音来表达传递自己的意思，当然也可以通过很自信的方式表达。如果你在界面中的表述用语多以问号结束，比如"也许"，"可能"，"感兴趣？" 或者"想要试试么？"，那么你完全还可以把语气变得更坚定一些。不过万事无绝对，或许适当放松措词让用户有自行思考的余地也是可以的。

11 界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后，你甚至可以在色相环上专门选择互补色（比如黄色与紫色）来设计你的界面，以达到突出重心的目的。综合所有这些，最后得到的界面会使你的主要意图与界面其他元素有明显的区分，得到完美的呈现。

12 指明产地

指明你的地区，所提供的服务，产品来自哪里意义重大，同时也将与客户的沟通引入了一个更具体带有地域特色的场景中。指出具体来自哪里，国家，省分及城市，也是一种在进行自我介绍或产品展示时被常常提及的。当你在界面设计中实现这点时，让人觉得非常友好。同时指明区域也会隐形提高产品的声誉，好上加好。

13 精简表单内容

人生性就懒惰，在填写表单时也是同样的道理，没人愿意填写一大堆表单字段。表单中每个字段都会有失去用户的风险。不是每个人打字都很快速的，并且在移动设备上进行输入更是相当麻烦的事情。问下自己表单中是不是每个字段都必需，然后尽量减少表单中的字段。如果你确实需要一大堆信息让用户填写，试着将它们分散在不同页面，在表单提交后还可以继续补充。过多字段很容易让整个表单显示臃肿，当然想简洁也很容易，只放少数字段。

14 暴露选项而不要将操作隐藏

你使用的任何一个下拉框都会对用户造成信息的隐藏而需要额外的操作才能显示。如果这些信息是贯穿整个操作所必需的，那你最好把它展示出来做得更显而易见一点。下拉框最好用在选择日期，省份等约定俗成的地方。对于程序中重要的选项最好还是不要做成下拉形式。

15 把界面做得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而继续阅读。是的，单列滚动的长页面是不错的，但是我们应该适当地设置一些小节，并且环环相扣，来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。

16 不要放太多链接分散用户注意力

为了满足各式用户的需求，在页面上放些链接链到这里链到那里是常见的做法。如果你的主要目的是想让用户点击页面最后那个下载按扭什么的话，就需要三思了。因为用户可能点击了其他链接离开页面了。所以你需要注意页面的链接数量，最好将用于导航与用于操作的链接用样式区分开。尽量移除页面不需要的链接会让用户点击到你的功能按钮。

17 将操作的状态或者进度呈现出来

现如今大多界面当中已经呈现了各色样式的进度条或者标明状态的图标，比如邮件有已读或未读的状态，电子帐单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来说是很有必要的。这样用户就可以知道某些操作是否成功，接下来准备进行怎样的操作。

18 不要让用户觉得是在完成任务

试想界面上有这样两个按钮：一个是"获取折扣"，另一个是"立即注册"。我敢打赌大多数人会点击第一个，因为第二个按扭让人感觉不到有利可图，并且"注册"让人联想到填不完的表单。也就是说让用户感受到获利的按钮更有可能被点击。这种让用户感到好处的文字信息也可放在按钮旁边，不一定要做为按钮的标题。当然，正常的按钮还是有用处的，一般用于重复性操作频繁的地方。

19 让操作直观而不是让人觉得找不到上下文

不用说直接在元素身上进行操作是更直观明了的方式。比如在一个列表中，我们想让用户对每个条目进行操作那么就把按钮放到当前条目上，而不要把放到列表之外。再比如就是直接点击元素就进入编辑状态（比如页面上的地址信息点击后可以进行编辑）。这种方式比传统的选中再点击相应的按钮进行操作要简洁省事得多。当然，对于一般性的操作本身就不需要有什么上下文的，就没必要这么做了，比如页面上的前进，后退按扭。

20 尽量显示全部内容而不要额外页面

在一个足够大的宽屏界面上最好还是直接给出表单，这比点击按钮再弹出表单要好很多。首先减少了点击操作，流程变得简洁也节省了时间。其次，直接呈现出表单可以让用户知道表单有多长，其实也是在告诉用户注册花不了多少时间。当然，这条规则适合注册表单非常简单的情况。

21 让界面平滑显示而不要死板地呈现

用户进行操作过程中，界面上的元素会经常出现，隐藏，打开，关闭，放大缩小移位等。给这些元素增加些自然的动画，淡入淡出效果不但美观，也更符合实际，本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长，那样会让想尽快完成操作的用户不耐烦。

22 循序渐进的引导而不要直接让用户注册

与其让用户马上注册，何不让用户先进行一些体验式的操作呢。这个体验过程可以展示程序的功能，特性等。一旦用户通过简单几步的操作了解了程序的价值所在，那么它会更愿意填写注册表单的。这种循序渐进的引导可以尽量推迟用户注册的时间但又可以让用户在没注册的情况下进行个性化设置等简单操作。

23 过多边框会让界面四分五裂

过多边框会喧宾夺主。不用说，边框确实在划分区域进行版块设置时有很大的作用，但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的，在排版时可以将界面上不同区域的元素通过空白进行分组，用上不同的背景色，将文字对齐方式进行统一，还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时，我们经常在界面上方便地拖出很多区块来，这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐，这样做不会让那些多余的线条来扰乱视觉。

24 展示产品带来的好处而不要罗列产品特性

市场就是这样的，用户永远只关心自身利益而产品特性对他们来说倒不是那么重要。只有利益才更直观地体现出使用产品所带来的价值。Chris Guillebeau在他的著作《100美元起家》中指出，相比压力，冲突，烦心事和未知的未来，人们在乎得更多的是爱，金钱，认同感和自由支配的空闲时间。所以我相信在展示产品特性时回归到利益上是必要的。

25 考虑零数据的情况

界面上经常需要呈现不同数量的数据，从0，1，10，100到10000+等。这里存在个普遍的问题就是：在程序最开始使用的0条数据到过度到有数据之前，该如何进行显示界面。这也是我们经常忽视了的地方。当程序初始没有数据时，用户看到的就是一片空白，此时用户可能不知道该进行哪些操作。利用好没有数据的初始界面可以让用户学习和熟悉如何使用程序，在程序中创建数据。力臻完美永远是我们追求的目标，界面设计也不例外。

26 默认将用户引入

将界面做成默认用户选中想要使用你的产品，意味着如果用户真的需要使用，那么可以直接点击确定而不需要额外点选了。当然，也有另一种做法就是默认不选中服务，用户需要的话可以手动点选。前者这种设计更好的原因有两点。一是用户不需要额外点选，非常省事，因为默认设置为用户需要我们的产品或服务。二是这种做法某种程度上是在向用户推荐产品，暗示了其他人都选择了我们。当然，将界面设计成默认选择的样子多少存在点争议，有点强迫用户的感觉。如果你想道德一点，你可以要么把让用户选择的文字写得模棱两可，要么使用双重否定这样不那么直白的描述，这两种方式都可以让用户觉得没有那么强的感觉是被强迫选择使用产品的。

27 界面设计得一致，不要增加用户的学习成本

自从Donald Norman的一系列著作面世后，界面设计中尽量保持一致性成了一个普遍遵循的准则。在设计中保持一致性可以减少用户的学习成本，用户不需要学习新的操作。当我们点击按钮，或者进行拖拽操作，我们期望这样的操作在整个程序的各个界面都是一致的，会得到相似的结果出来。反之我们需要新情境下重新学习某种操作会产生何种结果。可以在很多方面下功夫来实现一个一致的界面，包括颜色，方向，元素的表现形式，位置，大小，形状等。不过在让界面变得一致之前，记住一点，适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对，我们应遵从一致的设计准则，但适当地打破这种常规。

28 使用较贴切的默认值会减少操作

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面，这是种非常常见的做法，可以帮助用户快速填完表单或者注册信息。

29 遵从一些约定而不要去重新设计

界面设计中遵从约定的准则跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定，用户用起来会很方便。相反，不一致和没有遵从约定的设计则会提高学习成本。有了界面设计中这些约定，我们想都不用想就知道界面右上角（大多数情况下）的叉叉是关闭程序用的，或者点击一个按钮后我们能够预测到将会发生什么。当然，约定是会过时的，随着时间的推移，同样的操作也有可能被赋予新的含义。但要记住，当你在界面中打破这些常规时一定要目的明确，并且出发点是好的。

30 让用户觉得可以避免失去而不是获得

我们喜欢成功，没有谁愿意失败。根据心理学得到的可靠结论，人们一般更顷向于避免失去拥有的东西而不是获得新的利益。这一结论也适用于产品的设计和推广中。试着说明你的产品会帮助客户维护他的利益，保持健康，社会地位等要好过告诉客户这个产品会带来一些他未曾拥有的东西。比如保险公司，它是在销售我们出事之后可以得到的大笔赔偿呢还是在强调可以帮助我们避免失去拥有的财产？

31 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明，可以在这些方面做文章：对齐方式，间距，颜色，缩进，字体大小，元素尺寸等。当所有这些调整运用得适当时，可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计，这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行，你可以乘坐高铁快速到达景区（从页面顶部瞟到底部），但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方，而不是对着空白单调的一个屏幕。

32 将有关联的功能分组而不是杂乱无章

将各个功能项分组合并起来可以提高程序的可用性。有点常识的人都知道刀子和叉子，或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑，符合我们平时的认知。

33 使用内联的验证消息而不是提交后再验证

在处理表单时，最好立即检测出用户所填写内容是否符合要求然后给出验证消息。这样错误一出现能就能得到改正。相反，提交后再检查表单会给出错误消息，会让用户感到乏力又要重复之前的工作。

34 放宽对用户输入的要求

对用户输入的数据，尽量放宽限制，包括格式，大小写什么的。这样做可以更人性化一点，也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候，用户有很多种输入方式，带括号的，带破折号的，带空格的，带区号和不带区号的等等。如果你在代码中来处理这些格式的问题，代价也只是你一个人多写几行代码而以，却可以减少无数用户的工作量。

35 让用户感觉需要快速做出响应而不是毫无时间观念

适当的紧迫感是个有效的战术可以让用户立即做出决定而不是等上个十天半个月。重要的是这种战术屡试不爽，因为它暗示了资源的紧缺或者活动的时间有限，今天可以买，但明天可能就无法这么低价了。另一方面，这一战术也让用户感到会错失一次大好的机会，再一次，应用了人们害怕失去的本性。当然，这种战术会被一些人嗤之以鼻，认为是不耿直的做法。不过，这只是种战术而以，并且在保持合法性的前提下应用也无伤大雅。所以请不要为了营销而在界面上制造紧迫的假象。

36 使用饥饿营销

物以稀为贵。饥饿营销给出的信息就是东西不多，只剩几件，明天再来，可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看，那些批发商或者大零售商，他们也使用饥饿营销，以获得更好的销量。但在软件行业，我们经常会忘记有饥饿营销这回事。因为数字产品是可以很容易拷贝复制的，不存在缺货的情况。其实，在界面设计中，也可以将其运用起来与现实中的资源紧缺进行联系。想想一次网上研讨会的门票，想想你一个月可以服务的人数限制，这些信息都可以告知用户是有限的。

37 让用户选择而不是重新填写

这一界面设计中的经典准则是有心理学依据的，相比要让某人回想想某样东西，从一堆东西中认出某样东西会更容易些。辨识出一样东西只需要我们稍微回忆一下，通过一些线索就可以完成。而回想则需要我们全面搜索自己的大脑。也许这也是为什么试卷上选择题会比简答题做得快的原因。所以试着在界面上展示一些用户之前涉及到的信息让他们进行选择，而不是让他们想半天然后自己填写。

38 让点击更轻松

像链接，表单的输入框还有按钮等，如果尺寸做得大一点则点击起来更方便容易些。根据费特定律，使用像鼠标这样的外设来点击需要一些时间，特别是元素比较小的情况下，时间会更多。鉴于此，最好还是把你的表单输入框，按钮等做大点。抑或者你可以保持原有的设计不变，只是把元素可点击区域（也就是热区）增大。这样的一个典型例子是手机设备上的文本链接和导航菜单，它们文字不一定很大但背景是拉伸的，在很宽范围内点击都有效。

39 优化页面加载速度，不要让用户等太久

速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者项目机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条，二是展示其他相关或有趣的东西来吸引用户的注意力（就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧）。

40 除了按扭外，快捷键也必不可少

当你的程序广为流传，应该考虑下高级用户的感受。人们总是试图为一些重复性的操作找到更快捷的方法，快捷键就应运而生了。相比在界面上点来点去，快捷键无疑大大提高工作效率。一个好的例子就是现今流行于各个主流程序中的J（后退）K（前进）快捷键组合，比如在Gmail，Twitter和Tumblr中。按钮固然好，但快捷键会锦上添花。

仅有漂亮的设计远远不够，还需要使用正确的方法跟踪、分析用户行为及其对应用的参与度。Appsee 关注的是“最好的应用设计”和界面设计，所以通过跟踪分析的方法，了解设计本身以及它如何影响用户体验非常重要。

以上就是我的回答，希望对你有所帮助

当我们打开一个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. 适当的留白可以给人更加舒适的体验。

图片

我们都知道，设计一套完整的APP UI界面其实是比较复杂的，从需求分析到市场定位，从草稿到拟方案，从创意元素的组合到想法沉淀，从设计规范到突破传统，从纸上到电脑上，从个人到团队，或者从团队到个人，从素材收集到素材处理，从0思路到偶然等等，其实设计一个APP会碰到太多太多的问题，

所以要求我们移动APP设计者必须按照下面的三大准则和八项标准来设计。

【手机APPUI界面设计】三大准则：

（1）不乱用颜色。一个页面内不要超过3种颜色

（2）不乱用大图片当背景。你是想让用户看你的背景图片呢，还是看你的内容？

（3）不乱填充内容。页面元素如果太满，给读者压抑感，无所适从。

图片

【手机APPUI界面设计】八项交互标准：

1.色彩舒适度

一个第一眼看上去就杂七杂八色彩，或者完全没有主次之分的简洁，或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩，我想它已经没法继续长久看下去了。因为人第一眼看到的，就是一个事物的颜色，才是形状。

2.文字的主次

任何设计作品都要传达信息传达思想，如果一套设计中字体乱啪啪，文字大小和文字粗细，间距行距都没有一个“主次逻辑”，我很难挖掘到自己想要的信息，不论设计是酷炫复杂的还是简洁清爽的，光能展现信息时远远不够的，信息文字的每一个细节，都决定了一个设计要传达的思想主次，记住，你是要引导别人去看，而不是别人引导你去设计。这世上没有一个真正定死的文字标准，但是最基本的，至少让别人看清你的文字是写的什么吧，所以，文字之间的不同色彩，也是能让文字主次突出的方面

3.信息可读性

有了文字基础，处理好每个模块的布局，色块，插图，背景等方面，会让你的信息有较强的可读性。别跟着你的爱好走：我喜欢酷炫，我喜欢简洁，我喜欢优雅，我喜欢二货。把设计作品中你最想传达的信息传达出去，就算某些信息被别人忽略了，你依然是成功的。如果用户连看都不想看，连最基本的信息都没法传达，那作品的任何风格，都只是口头吹嘘。你要定好你的目标用户，你想吃遍全中国乃至全世界，全行业？除非，没有除非了。

4.UI识别性

这一点在图标上味道非常浓，不论你这一点在图标上味道非常浓，不论你设计的是扁平化还是拟物化还是梵高风格，不一定要3秒看出图标的意思，也要让人欣赏这个图标美感的同时，大概“心里知道”，这个图标要传达个什么。一个网站banner的设计，一个页面的导航设计，都要考虑到识别性，你想传达这个图像的什么内涵？你这个图形的意图是什么？都是设计者需要考虑的。

图片

5.交互性与易用性

上面的工作都做得差不多了，剩下的就是使用了。不论是手机主题还是网站设计还是APP还是游戏，要让别人快速上手，能玩，能用，甚至用的简单，玩的简单，就算你采用银河系都没有的酷炫交互，或者采用地球上已经濒临灭绝的土逼设计，达到方便使用的优良品质，你的作品再牛逼到没法看，也有牛逼的地方能看。

6.思想，生活的传达

作品是什么样，一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态，所以别小看一个作品的力量，它可能就是传达你自己真实内心的一个媒介，可能你并未发现，但是旁观者已经发现你了。

所以说，融入生活得设计是比较难的，同时，也是最容易的，你是否把你最粗心最让人厌倦的一面暴露到设计作品中？是否把你最细致入微最耐人寻味的一面传达到用户心里？一张图就可以看出（当然这不代表全部啊，某些设计师的作品看几天你也看不出他是什么人过着什么生活的）

7.微小的细节和微小的创意

别说这个东西就是你创造的，因为上帝比你创造的还早。UI设计中一根线，一像素，色彩饱和度的细微差别，一个小渐变，一个字体的选择，画布的大小，用笔的粗细，这些小细节，虽然不是人人都能说得出，但是能第一眼“看在心里，感觉到骨子里”，所以就算不说，细节也是能让任何人第一时间感觉到的，别忽视每一个小细节，它说不定就是你成功的堡垒，也是一有机会就让你失败的利箭。

细节中，你就能诞生一些微小的创意，小创意创造大创意，没有细节，何谈创意？那就只是纸上谈兵，口说无凭。

8.生活中表现手法的引用

一个简单的视差，一个简单的坠落，一个简单的玻璃破碎，一个简单的树叶飘落，一张纸简单的角度摆设，一盆植物简单的远近拍摄，这些东西，都能创造你无穷的表现手法，当然，这也是比较难的，能将生活融入设计，是需要积攒的，不是一两天能体会到的。