骨相、肉相、皮相，APP设计之道

现在我们手机里的APP已然成为了我们生活的一部分，玩的多了，我们也越加发现一个APP也是有骨、有肉、有皮的生命。很多都在谈体验，谈手感，那么一个APP的好坏体验到底是什么？这种感觉上的差异到底是由什么造成的呢？我们又将如何设计APP呢？

下面我就以证件照类APP的3个代表：「智能证件照」、「最美证件照」、「证件照」用3种维度来分析。证件照类APP主要是利用随身的手机拍摄制作证件照，解决传统照相馆用户无法掌控证件照，用户外出搜寻照相馆拍摄费力麻烦等问题。这属于工具类应用，所以对于能否实际高效解决用户问题有很高的要求。由此我们把APP进行深度解剖，从骨相、肉相、皮相3种维度来观察。

一、骨相

俗话说画虎画皮难画骨，一个APP最基本的就是它的逻辑框架结构了，这就像一栋房子里的钢筋框架，支撑起了整栋房子，它的结构越强，房子也就能承载越多的功能。比如下面不同的框架内核，所能造的房子也就不一样：

那么我们分别看看他们的骨相到底如何呢？

「智能证件照」的逻辑框架整体看起来均匀对称，一个APP结构越稳定，那么在其上的功能延展、添砖加瓦也就很自然。从最开始的拍摄页面到最后完成证件照制作，整个过程几乎没有冗余的操作，也就使得用户操作顺畅，像喝水一样一气喝成。

「最美证件照」结构整体看来也挺流利顺畅，但是仔细看时，却犯了很多APP设计的毛病：残缺、关节打缠。首先看最开始的页面：制作与订单，用户使用最多的是制作拍摄功能，最下面的订单用户几乎不会去使用，用户点击下去也会发现走不通又立马返回，这种使用频次的巨大对比，也就造成了订单这一枝像缺了腿一样，完全没用，不仅造成了冗余，结构失衡，同时显露出了覆在结构之上的功能薄弱。所以这部分，删！最开始就直接进入拍摄页面。接着看最上方突出的APP相册与导出这块，仔细分析可以看出，「最美证件照」没有本地照片上传美颜处理功能，它自身所带的相册是基于用户拍摄照片后内部保存的照片，这里也就出现了逻辑的混乱，当处女用户使用这个功能时会以为这是一个bug。

同时它的保存也是保存在APP相册内部，而非手机相册，用户需要走很多路径选择导出才是真正照片保存，就如关节缠绕，伸展不利。

上传本地相册应该是很简单的事，那么为何「最美证件照」不直接添加上传本地照片这一结构呢？这个我们留到下面的肉相结合「智能证件照」一起来分析。

整体上我们一眼就可以发现「证件照」结构庞杂，看起来填充了很多内容，实际体验会发现很多功能都很薄弱，这犯了虚胖空洞的毛病。乔老爷子说过："Simple can be harder than complex."对于复杂，我们要删的东西还有很多。接着我们看手工裁剪那一块的虚线箭头，当用户美白、换背景、换衣处理不佳后退返回时都会跳转到手工裁剪这一模块，而不是有序的上一步返回。这可以看出其程序中goto跳转语句遭到了滥用（注：goto语句用的不好，很容易像鸠摩智学艺不成，反落得个经脉逆行），这是技术水平不足的表现，也是用户最后迫于无奈直接被引导流入后台人工PS模式的设计思想源头。我们再看一点APP结构设计与实际功能展现所存在的矛盾问题：最开始它是从选择证件照类型这条路走的，不同证件照有不同标准要求，然而在后面更换背景时，它里面自由提供了各种背景色，如果用户没有相关概念，造成的结果将是证件照不达要求。这是在后期肉相设计中，忘记了初心，逆骨生长，埋下了致病基因。

古有盲人摸骨算命，今有科学家怀揣头骨还原术，通过上面的骨相分析，单纯从逻辑框架图看，它们是不是与下面的结构类似呢？

二、肉相

显然仅凭一副骨架，不能成为一个完整的人，人想要奔跑，还需要各种肌肉的协调配合才能形成爆发力，驱动一个系统的运行。

证件照类APP主要解决的是用户便捷化制作证件照，降低拍照专业壁垒，摆脱照相馆的背景幕墙，摆脱PS手工处理，缩短双腿路径。那么它的核心肌群就能完成轻松拍摄、自动背景替换、智能美颜、尺寸裁剪等这些功能。所以我们接着分析它们的肉相。

谁家的鸡肉纹理致密，外酥内嫩，嚼劲十足，富含ATP，各有各的说法，我在此不作太多评判，好在工具类应用都是技术活，你有这金刚钻，你才敢摆上台面，那么我就从外围看的见的结构进行突破，发现一些端倪。我们主要从背景替换这一核心功能来分析APP的设计。以下是未经微调处理的各app自动背景替换后的效果：

「智能证件照」 「最美证件照」 「证件照」

从肌肉块看，「智能证件照」拥有一键智能替换背景，手动微调2大功能；「最美证件照」有背景替换功能，无法手动微调；「证件照」拥有自动抠图、手动微调功能。从肌肉做功效果看，「智能证件照」背景替换后细节处理较好，图片较为平滑，只是局部细微处还需改进；「最美证件照」背景替换还需改进，同时由于没法手动微调，背景替换如果留有瑕疵，将无法满足标准证件照的要求，用户体验也会大打折扣；「证件照」背景替换还行，只是图片处理不平滑。从肌肉做功效率来看，「智能证件照」虽然背景替换技术较强，但是其背景替换用时较长，微调画笔较小，同时图片无法放大，用户体验有点费力，这种设计反而禁锢了其技术的发挥，这种细小的肉相功能设计如果与其骨相结构设计不紧密配合，容易造成运行不畅，集成血栓。「最美证件照」背景替换用时稍长；「证件照」背景替换抠图速度较快，但是它采用了点击式微调，不是像画笔一样涂抹，在后期的图片细节微调处理上会很费劲，影响图片质量。从肌肉协调性来看，「智能证件照」在背景替换功能前加了一个拍摄环境评分，这有效的阻挡、过滤了一部分质量不好的照片，使得最后照片处理更加高效。APP设计不是功能的简单叠加，它们都是围绕解决核心问题来服务的，这就是周边肌群与核心肌群协调搭配不仅会产生强大的爆发力，同时也能体现出更加细腻的人文关怀。

针对最开始留下的疑问，为何「最美证件照」没有上传图片功能？我们可以看出如下问题：

用户上传图片处理制作证件照，由于系统外的图片杂七杂八，不可控，不像系统内生图片那样规范，在背景替换这一环节系统能够对图片自动化识别、自动替换。这显然对技术有很高的要求。那么它们是怎么设计解决这一问题呢？「智能证件照」对上传的图片进行了规范过滤，不符合标准的被Kill掉；「最美证件照」更暴力，尊王攘夷，抵制一切外国货；「证件照」到是很高明，完全敞开胸怀，提供了活动框，进行手工裁剪。但是任何解决办法都会产生新的问题。「智能证件照」的半对外开放政策，也没有很好处理掉一些漏网之鱼，一些图片上传后与图像框存在一些间隙，这会让处女用户感觉这是系统的bug，使得名誉受损。「最美证件照」的全封闭设计，却在最开头添加了APP相册功能，这导致了结构逻辑矛盾，骨相扭曲。「证件照」手工裁剪好是好，但人工控制却没有相应规范，后续存在照片尺寸裁剪问题，图片清晰度问题,如果对这块进行优化，再配合滑动式微调，效果将更好。虽然他们对图片上传采用了不同的解决方式，但有人会想用户一般都会自己拍摄制作证件照，这个图片上传用处不大，是个鸡肋。但我们在肉相设计时，考虑过我们的用户是谁了么？像我们这种不敢爆照的测评分析人员就是吃素的么，不好好给肉吃，我就给你们好看。

所以在肉相设计这一块，不仅内部功能肌肉要形成核心的凝聚力，同时在与底层的骨相设计这一块也要考虑协同配合达到合作博弈均衡。

三、皮相

虽说上面进行了系统内部分析，但是这个社会都是看脸、拼爹的社会。没有皮相简直没法在APP界混。据APPfigures统计在2014年APP Store的iOS应用总量已达121万款，一个APP想要在社会上混，必需具备的外界素质太多了：UI设计、UX设计、名号、标签、朋友圈口碑等等。下面就从UI、UX设计方面来分析。

「智能证件照」 「最美证件照」 「证件照」

从UI看，「智能证件照」首页干净整洁；「最美证件照」拍摄页面也挺干净，仔细发现下部的菜单栏与拍摄区都是黑色，功能分区过渡不明显，在格式塔法则中有这样一个道理：当对象太近的时候，我们会认为他们是相关的，这种设计很容易造成视觉混乱；「证件照」首页呈现灰青色，给人以阴沉感，同时加上冗杂的文字与图片，大大降低了美观度；从UX看，从「智能证件照」给出了动态的拍摄小提示，这不仅没有影响页面的整体设计布局，同时又给人直观、温馨的亲和感；「最美证件照」把拍摄提示放入了底部的菜单栏中，增加了用户交互成本；「证件照」右上角拍摄提示点击之后内容只有一条："2寸主要用于护照"，提示太粗糙，几乎没有价值。

这也告诉我们在UX、icon设计上你与用户之间的距离到底是亲切的面对面交流还是机械的陌生叩门，如果门内没有惊喜，这必定造成后悔。

好像「智能证件照」设计挺不错呀，但是不要高兴的太早，我们往往不在白天犯错，我们就会在阴天犯浑。

现在主流手机屏幕的比例为16:9，即78；2寸证件照比例为1.34，这些数字接近什么呢？伟大的黄金分割比例呀！但是从背景替换页面可以看出上部整个蓝色区与下面白色的菜单栏区明显比例失调，经过测算比例为2.52。较好的方式是UI设计下部菜单栏可以浮动显示，或者让图片能够大图展示，给人以强力的视觉冲击感。再看UX，「智能证件照」利用人脸识别算法自动给图片换背景，这肯定需要时间处理，但是根据Compuware的一项的调查显示，5秒是用户能够容忍的最长等待网页加载时间，50%的用户超过这个时间段会放弃，这对于一个APP运行处理速度也可以作为参考。

如果一个APP能让用户产生恋爱的感觉，那么这条可以无视。但是最让痛苦的是，「智能证件照」在UX上给出了这么一段文字："这个比较久噢"，这就像是我在路边默默的等公交，突然旁边的人提醒一句："车好慢噢"，此时我被警醒，也就更加认同这个慢，于是回应道："是啊，好慢。"

人有六触，无时无刻不在体验一个产品，一次APP体验就是一次相亲见面会，你打动了你的用户了么？设计是门很深的学问，自己也太粗浅，就不多分析了。

以上都根据IOS版测试，从骨相、肉相、皮相，每一个APP都有它的生命灵魂，在这个有机体之上，我们不能单方面的来创造一个生命，它需要的是更多思考，达到生命的平衡。