校导网方鑫 | 一个合格的APP该怎样设计

智能手机的出现改变了我们的生活圈子、社交方式，打开手机全是APP，每个APP都有它独特的功能和特性，那么怎样设计一个合格的APP呢？下面我就把平时收集的资料和自己的看法分享给大家。

1.定风格

项目开始启动时，应该根据产品的需求和定位先定下整体设计风格，再根据整体风格设计其他页面，统一的风格有利于传达产品整体的品牌形象，也方便后期与工程师沟通交接。

（1）颜色

不同的色彩除了具有不同的视觉效果以外，它还能表达一定的情感。比如做职场人脉的脉脉是蓝色、女性专属交流的闺蜜圈是红色、360安全卫士是绿色，不同的颜色具有不同的联想和内涵，以达到精确、快速地传达企业信息。

通常一个APP会有一个主色调，再配上一些辅助色，主色调一般用在头部和底部ICON，辅助色用在内部的一些按钮或者提示性文字上面。

▲脉脉、闺蜜圈、360安全卫士页面

（2）扁平化、极简风、metro

扁平化简单的说就是抛弃流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更"平"的界面。它的特点是单色极简的抽象矩形色块、大字体、光滑、现代感十足，最典型的就是苹果界面。

↓

极简主义风格主要是从简单到极致的追求，在感官上追求整体的简约整洁，通过去掉多余的元素、纹理、颜色和形状等，最终目的是让APP内容可以脱颖而出并成为焦点。

↓

Metro风格是指微软在Windows Phone 7中新加入的界面风格，并且用于Windows8中的开始菜单界面。该界面的特点是简洁高效，每一个Metro图标都没有边框，形状有点像地铁站中的指示牌，虽然在形式上简洁，但可能会导致复杂的用户体验，用户需要花更多的时间在屏幕上仔细分辨什么是有用的信息。

↓

2.基本规范

（1）ICON

网上有很多图标、各种风格各种粗细的都有，但如果你想让你的APP图标看起来有特色并统一，唯一的办法就是自己画，后期放大缩小也方便很多。

（2）字体

字体主要考虑可读性强，对于大部分移动端应用而言，iOS一般选择者冬青黑体或华文黑体，Android通常选择Noto或者微软雅黑。因为这几种字体在移动端显示效果较好，改变字体大小不会对文字识别造成太大的影响。

（3）间距

如果内容看着很挤，可能就是间距划分不标准。一般模块之间的距离通常是：20px、30px、40px，可以根据实际情况进行调整，但要和页面其它地方保持统一，比如界面上的数值都是被2整除，就不要用27、33这样的数据。

3.机型适配

适配主要看每个公司的工程师要求，校导网iOS是先以750*1334做界面，做完后根据这个尺寸调整切出两套图@2x和@3x。

Android尺寸太多，我一般是用720*1280为主要尺寸设计，因为这个尺寸向下（480×800）和向上（1080×1920）适配都会比较方便，当然也有做1080的，可以和公司工程师商量，看哪种开发比较方便。

4.空状态

空状态和Loading很多时候会被设计师忽略掉，因为从表现上看，它们给人的感觉就是临时性的，有些微不足道，但在引导性、愉悦性和保留用户等方面对于产品体验有着不可忽视的作用。

◆ 空状态通常会在初次使用、完成或清空内容、软件出错等情境下出现。

◆Loading一般会在加载、跳转页面、弹框等情景下出现。

▲空状态

▲loading

5.引导提示

引导分两种：

◆ 一种是下载APP后刚打开为了让用户大致熟悉APP主要做什么或者新加了什么功能，一般1-4张图，可每张图体现一种功能，也可前3放意向图体现产品气质后1介绍功能；

◆ 还有一种是功能提示，第一次打开不会用或者由于迭代产品内容较多而把功能位置改变的提示。

细节虽小，但可以给用户减少不少麻烦和时间。

6.情景

情景考虑的是用户正处于一个怎样的环境来操作你的产品，把这个纳入思考，设计的产品才更加贴近用户。

比如一款阅读产品不能只考虑坐着拿手机看，还应考虑站着挤公交、躺在床上、室内室外、白天晚上等多种场景。如果用户是站在公交车上阅读，人多左右晃动的情况下，可以开启重力感应，根据左右晃动的幅度把字体放大。如果是晚上，可以开启夜晚模式让光线不那么刺眼。这些小小的设计将为用户带来惊喜的体验。

7.操作习惯

网上有很多专业人士分析的移动设备手势分析图，这里就不放图了。举例说个小细节，大家可以观察一下APP里关闭、取消图标的位置，由于主流用户习惯用右手操作，大部分都放在屏幕右侧，或者是图片的右上方。

但是在微信支付页面，取消图标是放在左侧的，这并不是设计师的失误，而是故意为之，用户无法在第一眼发现取消的操作，取消的概率也会降低，对于小额支付，会是一大推力。

简而言之，尽量在用户手势热区内展示你想展示的内容，在热区外放你并不希望用户能一眼看到的内容。

▲微信支付页面

每款APP都有它自身的特点，我们应该去其糟粕、取其精华、消化吸收，再合理运用到自己的产品中去，这样才能让你的APP在众多APP中脱颖而出！

作者简介：方鑫，英文名Fishell，现任校导网UI设计师，拥有三年网页设计和一年UI设计经验。