广州奕环：如何设计一个APP UI（下）

三、排版篇

格式塔心理学在排版中的应用

相似

距离相近的各部分趋于组成整体。

当我们需要组织、分割信息的时候，运用格式塔心理学的方式，可以很好地梳理信息布局。在信息以列表形式重复出现时，我们可以尽量使用相同颜色、大小、形状的图形或者文字尽量以重复的形式呈现。

“相似”的应用

相近

不同的元素当其距离相近的时候，用户从视觉上趋向于将其归于一个整体。

“相近”的应用

当行间距较大时，其本身可以作为分割内容的一种方式。

图片来源于：http://www.zcool.com.cn/work/ZMTYwODAxMDA=.html

连续

一个图形的某些部分可以被看作是连接在一起的，这些部分会被我们知觉为一个整体。这样我们可以在界面空间有限的情况下，引导用户的视觉流。

“连续”的应用

 

文字

通常在中文app中一般都以一种中文字体作为默认字体，因此在此不讨论不同字体搭配对于app中视觉效果的影响。

文字大小

在一定区域内，不同功能的文字大小的不同会直接影响用户浏览接受信息的程度。通常选用28px~34px之间的字体大小比较合适阅读。相对来说，文字越小，其被接收程度越低。相同大小的文字在相近区域，用户浏览更容易理解为同一功能。

文字颜色

明度的对比：在一个app中颜色的深浅除了受到底色的影响，同时也受到周围其他文本颜色对比的影响。当不同信息优先层级的文字用统一颜色时，浏览者在理解上容易增大其关联度，从而容易造成信息理解混乱。

色相的对比：在黑白灰的颜色区域中，如果有局部颜色相对来说都会更容易吸引用户注意。

文字和背景

文字和背景只有在高对比度下才能友好地被用户阅读，在应用不同颜色的文字和背景配比时，建议参考以下评估结论:

结论来源于网络

间距

图文与屏幕边距是否符合产品诉求。

通常来说，在图片和屏幕边距之间保留一定的像素边距可以更好地引导用户竖向往下阅读。

图为“豌豆荚一览”

而当图片与屏幕边距为0的时候，用户更容易将注意力集中在每个图文内容本身，其视觉流线在往下浏览时，因为没有留白的引导，被图片直接割裂，造成在图片上的停留时间更长。

对比，当图片不留边距时，用户更加聚焦在每个图文本身，而非被留白引导往下翻阅

行间距是否适合用户阅读

在内容型文本中，文本行间距太窄会容易造成阅读困难。通常的经验值，行间距大约是字体间距的1.2~1.5倍之间，总体阅读会比较舒服。

对比行间距1.5倍 VS. 行间距1倍

 

四、微场景篇

空白页

空白页通常是因为新注册用户尚未在预定信息区域产生相关信息，因而当期浏览时，页面信息内容为空。在设计时应从两方面来考虑：

1、情景与内容的相关程度

图片来源于易信app

2、不同空白页之间的设计风格关联

通常一个app内会有多个空白页，不同空白页之间相对独立，但是从一致性的角度来说，用户在浏览不同页面的时候，其空白页插画设计风格应该是一致的。

提示页

提示页和空白页的不同在于其引导性更强，通常会通过阻断式弹层引导用户按照设计的行为进行操作，因而相较于空白页更需要气氛的营造。同时弹层与弹层之间的尺寸大小、风格等也需要考虑一致性的问题。

图片来源于豆瓣app

五、动画篇

等待型动画

在启动页或者等待loading、刷新页面，通过动画可以有助于吸引用户注意力。减弱等待的焦虑感。

图片来源于网络

引导型动画

动画相较于静态图片更容易吸引用户的视觉焦点，同时动画多伴随比例、形状、颜色的变化，其变化本身就是很好的引导用户行为的方式。

图片来源于网络

展示型动画

通过动画可以更好地展示内容、数据等，使之从视觉角度更加丰富有趣。

图片来源于网络

转场型动画

通过动效使得页面的层级更清楚地反应给用户，并使其转场体验顺畅。

图片来源于网络

六、交互

文案传达的有效性

在app设计中“文案”也是很重要的一部分，从几年前提示很程序化，到现在的呆萌风格，可见产品对于用户的人性把握。Google曾经提出文案的描述的具体建议在此不鳌述。只就现在国内一些产品的文案提出一些思路。

以空白页为例，在未有点赞的“心”的时候，设计者很巧妙的应用了当下目标用户接受度较高的“求心理阴影面积”，让用户看到文案会会心一笑。而阻断式弹层，这些年也可以看到从“去评论”这样中性的文案逐渐变成诸如“跪求给点鼓励”，这样的文案对于用户来说，有更明确的引导——希望用户给予高分评星。

功能布局的友好性

在功能布局的时候要充分考虑用户实际操作场景，尽量让用户的操作方便直接。将常用的按钮尽量布局在用户可以单手操作点击的地方。

随着手机屏幕变得越来越大，原有iOS的【返回】按钮在大屏幕中并不容易被点击。在一些app开始考虑功能布局的友好性，将【返回】按钮移至底部。用户更便于操作。

七、总结

设计最优先要考虑产品的目的和诉求，在满足产品的功能。通过设计，我们可以引导用户的行为和视觉流，以达到产品的目的。通过图形、文字的大小、形状、颜色的组织，可以将信息分优先级呈现给用户。

同时，美是一种功能。其可以传达给用户整个产品有趣和高品质的感觉，用户有时并不一定是因为内容吸引，在内容不足的时候，设计可以作为内容的补足来保证用户足够的停留和二次开启。但同时有趣的设计，需要在保证设计风格的一致性的前提下，不然莽撞的设计容易使用户迷惑，而关闭app。