現(xiàn)在我們手機(jī)里的APP已然成為了我們的生活，玩的多了，我們也越加發(fā)現(xiàn)一個APP也是有骨、有肉、有皮的生命。很多都在談體驗(yàn)，談手感，那么一個APP的好壞體驗(yàn)到底是什么？這種感覺上的差異到底是由什么造成的呢？我們又將如何設(shè)計APP呢？

下面我就以證件照類APP的3個代表：「智能證件照」、「最美證件照」、「證件照」用3種維度來分析。證件照類APP主要是利用隨身的手機(jī)拍攝制作證件照，解決傳統(tǒng)照相館用戶無法掌控證件照，用戶外出搜尋照相館拍攝費(fèi)力麻煩等問題。這屬于工具類應(yīng)用，所以對于能否實(shí)際高效解決用戶問題有很高的要求。由此我們把APP進(jìn)行深度解剖，從骨相、肉相、皮相3種維度來觀察。

一、骨相

俗話說畫虎畫皮難畫骨，一個APP最基本的就是它的邏輯框架結(jié)構(gòu)了，這就像一棟房子里的鋼筋框架，支撐起了整棟房子，它的結(jié)構(gòu)越強(qiáng)，房子也就能承載越多的功能。比如下面不同的框架內(nèi)核，所能造的房子也就不一樣：

那么我們分別看看他們的骨相到底如何呢？

1. 「智能證件照」的邏輯框架整體看起來均勻?qū)ΨQ，一個APP結(jié)構(gòu)越穩(wěn)定，那么在其上的功能延展、添磚加瓦也就很自然。
2. 從最開始的拍攝頁面到最后完成證件照制作，整個過程幾乎沒有冗余的操作，也就使得用戶操作順暢，像喝水一樣一氣喝成。

3. 「最美證件照」結(jié)構(gòu)整體看來也挺流利順暢，但是仔細(xì)看時，卻犯了很多APP設(shè)計的毛?。簹埲?、關(guān)節(jié)打纏。
4. 首先看最開始的頁面：制作與訂單，用戶使用最多的是制作拍攝功能，最下面的訂單用戶幾乎不會去使用，用戶點(diǎn)擊下去也會發(fā)現(xiàn)走不通又立馬返回，這種使用頻次的巨大對比，也就造成了訂單這一枝像缺了腿一樣，完全沒用，不僅造成了冗余，結(jié)構(gòu)失衡，同時顯露出了覆在結(jié)構(gòu)之上的功能薄弱。所以這部分，刪！最開始就直接進(jìn)入拍攝頁面。
5. 接著看最上方突出的APP相冊與導(dǎo)出這塊，仔細(xì)分析可以看出，「最美證件照」沒有本地照片上傳美顏處理功能，它自身所帶的相冊是基于用戶拍攝照片后內(nèi)部保存的照片，這里也就出現(xiàn)了邏輯的混亂，當(dāng)處女用戶使用這個功能時會以為這是一個bug。

同時它的保存也是保存在APP相冊內(nèi)部，而非手機(jī)相冊，用戶需要走很多路徑選擇導(dǎo)出才是真正照片保存，就如關(guān)節(jié)纏繞，伸展不利。

6. 上傳本地相冊應(yīng)該是很簡單的事，那么為何「最美證件照」不直接添加上傳本地照片這一結(jié)構(gòu)呢？這個我們留到下面的肉相結(jié)合「智能證件照」一起來分析。

7. 整體上我們一眼就可以發(fā)現(xiàn)「證件照」結(jié)構(gòu)龐雜，看起來填充了很多內(nèi)容，實(shí)際體驗(yàn)會發(fā)現(xiàn)很多功能都很薄弱，這犯了虛胖空洞的毛病。喬老爺子說過：“Simple can be harder than complex.”對于復(fù)雜，我們要刪的東西還有很多。
8. 接著我們看手工裁剪那一塊的虛線箭頭，當(dāng)用戶美白、換背景、換衣處理不佳后退返回時都會跳轉(zhuǎn)到手工裁剪這一模塊，而不是有序的上一步返回。這可以看出其程序中g(shù)oto跳轉(zhuǎn)語句遭到了濫用（注：goto語句用的不好，很容易像鳩摩智學(xué)藝不成，反落得個經(jīng)脈逆行），這是技術(shù)水平不足的表現(xiàn)，也是用戶最后迫于無奈直接被引導(dǎo)流入后臺人工PS模式的設(shè)計思想源頭。
9. 我們再看一點(diǎn)APP結(jié)構(gòu)設(shè)計與實(shí)際功能展現(xiàn)所存在的矛盾問題：最開始它是從選擇證件照類型這條路走的，不同證件照有不同標(biāo)準(zhǔn)要求，然而在后面更換背景時，它里面自由提供了各種背景色，如果用戶沒有相關(guān)概念，造成的結(jié)果將是證件照不達(dá)要求。這是在后期肉相設(shè)計中，忘記了初心，逆骨生長，埋下了致病基因。

古有盲人摸骨算命，今有科學(xué)家懷揣頭骨還原術(shù)，通過上面的骨相分析，單純從邏輯框架圖看，它們是不是與下面的結(jié)構(gòu)類似呢？

二、肉相

顯然僅憑一副骨架，不能成為一個完整的人，人想要奔跑，還需要各種肌肉的協(xié)調(diào)配合才能形成爆發(fā)力，驅(qū)動一個系統(tǒng)的運(yùn)行。

證件照類APP主要解決的是用戶便捷化制作證件照，降低拍照專業(yè)壁壘，擺脫照相館的背景幕墻，擺脫P(yáng)S手工處理，縮短雙腿路徑。那么它的核心肌群就能完成輕松拍攝、自動背景替換、智能美顏、尺寸裁剪等這些功能。所以我們接著分析它們的肉相。

誰家的雞肉紋理致密，外酥內(nèi)嫩，嚼勁十足，富含ATP，各有各的說法，我在此不作太多評判，好在工具類應(yīng)用都是技術(shù)活，你有這金剛鉆，你才敢擺上臺面，那么我就從外圍看的見的結(jié)構(gòu)進(jìn)行突破，發(fā)現(xiàn)一些端倪。我們主要從背景替換這一核心功能來分析APP的設(shè)計。以下是未經(jīng)微調(diào)處理的各app自動背景替換后的效果：

「智能證件照」 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?「最美證件照」 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?「證件照」

1. 從肌肉塊看，「智能證件照」擁有一鍵智能替換背景，手動微調(diào)2大功能；「最美證件照」有背景替換功能，無法手動微調(diào)；「證件照」擁有自動摳圖、手動微調(diào)功能。
2. 從肌肉做功效果看，「智能證件照」背景替換后細(xì)節(jié)處理較好，圖片較為平滑，只是局部細(xì)微處還需改進(jìn)；「最美證件照」背景替換還需改進(jìn)，同時由于沒法手動微調(diào)，背景替換如果留有瑕疵，將無法滿足標(biāo)準(zhǔn)證件照的要求，用戶體驗(yàn)也會大打折扣；「證件照」背景替換還行，只是圖片處理不平滑。
3. 從肌肉做功效率來看，「智能證件照」雖然背景替換技術(shù)較強(qiáng)，但是其背景替換用時較長，微調(diào)畫筆較小，同時圖片無法放大，用戶體驗(yàn)有點(diǎn)費(fèi)力，這種設(shè)計反而禁錮了其技術(shù)的發(fā)揮，這種細(xì)小的肉相功能設(shè)計如果與其骨相結(jié)構(gòu)設(shè)計不緊密配合，容易造成運(yùn)行不暢，集成血栓?！缸蠲雷C件照」背景替換用時稍長；「證件照」背景替換摳圖速度較快，但是它采用了點(diǎn)擊式微調(diào)，不是像畫筆一樣涂抹，在后期的圖片細(xì)節(jié)微調(diào)處理上會很費(fèi)勁，影響圖片質(zhì)量。
4. 從肌肉協(xié)調(diào)性來看，「智能證件照」在背景替換功能前加了一個拍攝環(huán)境評分，這有效的阻擋、過濾了一部分質(zhì)量不好的照片，使得最后照片處理更加高效。APP設(shè)計不是功能的簡單疊加，它們都是圍繞解決核心問題來服務(wù)的，這就是周邊肌群與核心肌群協(xié)調(diào)搭配不僅會產(chǎn)生強(qiáng)大的爆發(fā)力，同時也能體現(xiàn)出更加細(xì)膩的人文關(guān)懷。

針對最開始留下的疑問，為何「最美證件照」沒有上傳圖片功能？我們可以看出如下問題：

5. 用戶上傳圖片處理制作證件照，由于系統(tǒng)外的圖片雜七雜八，不可控，不像系統(tǒng)內(nèi)生圖片那樣規(guī)范，在背景替換這一環(huán)節(jié)系統(tǒng)能夠?qū)D片自動化識別、自動替換。這顯然對技術(shù)有很高的要求。
6. 那么它們是怎么設(shè)計解決這一問題呢？「智能證件照」對上傳的圖片進(jìn)行了規(guī)范過濾，不符合標(biāo)準(zhǔn)的被Kill掉；「最美證件照」更暴力，尊王攘夷，抵制一切外國貨；「證件照」到是很高明，完全敞開胸懷，提供了活動框，進(jìn)行手工裁剪。
7. 但是任何解決辦法都會產(chǎn)生新的問題?！钢悄茏C件照」的半對外開放政策，也沒有很好處理掉一些漏網(wǎng)之魚，一些圖片上傳后與圖像框存在一些間隙，這會讓處女用戶感覺這是系統(tǒng)的bug，使得名譽(yù)受損?！缸蠲雷C件照」的全封閉設(shè)計，卻在最開頭添加了APP相冊功能，這導(dǎo)致了結(jié)構(gòu)邏輯矛盾，骨相扭曲?！缸C件照」手工裁剪好是好，但人工控制卻沒有相應(yīng)規(guī)范，后續(xù)存在照片尺寸裁剪問題，圖片清晰度問題,如果對這塊進(jìn)行優(yōu)化，再配合滑動式微調(diào)，效果將更好。
8. 雖然他們對圖片上傳采用了不同的解決方式，但有人會想用戶一般都會自己拍攝制作證件照，這個圖片上傳用處不大，是個雞肋。但我們在肉相設(shè)計時，考慮過我們的用戶是誰了么？像我們這種不敢爆照的測評分析人員就是吃素的么，不好好給肉吃，我就給你們好看。

所以在肉相設(shè)計這一塊，不僅內(nèi)部功能肌肉要形成核心的凝聚力，同時在與底層的骨相設(shè)計這一塊也要考慮協(xié)同配合達(dá)到合作博弈均衡。

三、皮相

雖說上面進(jìn)行了系統(tǒng)內(nèi)部分析，但是這個社會都是看臉、拼爹的社會。沒有皮相簡直沒法在APP界混。據(jù)APPfigures統(tǒng)計在2014年APP Store的iOS應(yīng)用總量已達(dá)121萬款，一個APP想要在社會上混，必需具備的外界素質(zhì)太多了：UI設(shè)計、UX設(shè)計、名號、標(biāo)簽、朋友圈口碑等等。下面就從UI、UX設(shè)計方面來分析。

「智能證件照」 ? ? ? ? ? ? ? ? ? 「最美證件照」 ? ? ? ? ? ? ? ? ? ? ? ? 「證件照」

1. 從UI看，「智能證件照」首頁干凈整潔；「最美證件照」拍攝頁面也挺干凈，仔細(xì)發(fā)現(xiàn)下部的菜單欄與拍攝區(qū)都是黑色，功能分區(qū)過渡不明顯，在格式塔法則中有這樣一個道理：當(dāng)對象太近的時候，我們會認(rèn)為他們是相關(guān)的，這種設(shè)計很容易造成視覺混亂；「證件照」首頁呈現(xiàn)灰青色，給人以陰沉感，同時加上冗雜的文字與圖片，大大降低了美觀度；
2. 從UX看，從「智能證件照」給出了動態(tài)的拍攝小提示，這不僅沒有影響頁面的整體設(shè)計布局，同時又給人直觀、溫馨的親和感；「最美證件照」把拍攝提示放入了底部的菜單欄中，增加了用戶交互成本；「證件照」右上角拍攝提示點(diǎn)擊之后內(nèi)容只有一條：“2寸主要用于護(hù)照”，提示太粗糙，幾乎沒有價值。

這也告訴我們在UX、icon設(shè)計上你與用戶之間的距離到底是親切的面對面交流還是機(jī)械的陌生叩門，如果門內(nèi)沒有驚喜，這必定造成后悔。

好像「智能證件照」設(shè)計挺不錯呀，但是不要高興的太早，我們往往不在白天犯錯，我們就會在陰天犯渾。

3. 現(xiàn)在主流手機(jī)屏幕的比例為16:9，即78；2寸證件照比例為1.34，這些數(shù)字接近什么呢？偉大的黃金分割比例呀！但是從背景替換頁面可以看出上部整個藍(lán)色區(qū)與下面白色的菜單欄區(qū)明顯比例失調(diào)，經(jīng)過測算比例為2.52。 較好的方式是UI設(shè)計下部菜單欄可以浮動顯示，或者讓圖片能夠大圖展示，給人以強(qiáng)力的視覺沖擊感。
4. 再看UX，「智能證件照」利用人臉識別算法自動給圖片換背景，這肯定需要時間處理，但是根據(jù)Compuware的一項(xiàng)的調(diào)查顯示，5秒是用戶能夠容忍的最長等待網(wǎng)頁加載時間，50%的用戶超過這個時間段會放棄，這對于一個APP運(yùn)行處理速度也可以作為參考。

如果一個APP能讓用戶產(chǎn)生戀愛的感覺，那么這條可以無視。但是最讓痛苦的是，「智能證件照」在UX上給出了這么一段文字：“這個比較久噢”，這就像是我在路邊默默的等公交，突然旁邊的人提醒一句：“車好慢噢”，此時我被警醒，也就更加認(rèn)同這個慢，于是回應(yīng)道：“是啊，好慢?！?/p>

人有六觸，無時無刻不在體驗(yàn)一個產(chǎn)品，一次APP體驗(yàn)就是一次相親見面會，你打動了你的用戶了么？設(shè)計是門很深的學(xué)問，自己也太粗淺，就不多分析了。

以上都根據(jù)IOS版測試，從骨相、肉相、皮相，每一個APP都有它的生命靈魂，在這個有機(jī)體之上，我們不能單方面的來創(chuàng)造一個生命，它需要的是更多思考，達(dá)到生命的平衡。

本文由 @風(fēng)之谷 原創(chuàng)投稿，并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可，禁止轉(zhuǎn)載。