本文總結(jié)了做一個(gè)設(shè)計(jì)與用戶體驗(yàn)的提升，如何從1過(guò)渡到2。enjoy~

一般UX設(shè)計(jì)師剛到一家新公司會(huì)遇到2種情況：

• 公司的產(chǎn)品視覺(jué)構(gòu)架包括規(guī)范以及到設(shè)計(jì)團(tuán)隊(duì)建設(shè)都非常完備，產(chǎn)品體驗(yàn)從第一眼看過(guò)去就很棒，可優(yōu)化的地方屈指可數(shù)。
• 與第一種情況完全相反。

那么，我們從第二種比較糟糕的情況開(kāi)始總結(jié)該如何從1過(guò)渡到2，做一個(gè)設(shè)計(jì)與用戶體驗(yàn)的提升。

一. 基礎(chǔ)問(wèn)題梳理

是不是時(shí)常有面試官喜歡問(wèn)這樣的問(wèn)題:你覺(jué)得我們的APP有什么可以優(yōu)化的地方嗎？

1. 一致性原則

一致性原則是雅各布 ? 尼爾森的十大交互設(shè)計(jì)原則之一，在實(shí)際項(xiàng)目實(shí)踐中有很強(qiáng)的指導(dǎo)性作用。

因?yàn)楦魇礁鳂拥脑颍恍┊a(chǎn)品的視覺(jué)設(shè)計(jì)沒(méi)有規(guī)范，由不同批次的設(shè)計(jì)師完成，導(dǎo)致APP中許多界面的視覺(jué)風(fēng)格都不一致。

（1）一致性體現(xiàn)的方面

• 控件結(jié)構(gòu)：比如卡片底部操作區(qū)展示（點(diǎn)贊／評(píng)論／分享的固定控件樣式）的統(tǒng)一。
• 視覺(jué)規(guī)范：主色調(diào)與其他輔色在各界面色值的統(tǒng)一，文字樣式與主體文字大小的統(tǒng)一。
• 操作反饋：用戶在使用APP同功能時(shí)的操作統(tǒng)一，并得到統(tǒng)一的反饋，比如點(diǎn)擊彈窗關(guān)閉按鈕，會(huì)有統(tǒng)一的下滑消失反饋。

（2）一致性的重要性

因?yàn)閷?duì)于用戶來(lái)說(shuō)，同樣的控件樣式／操作反饋都觸發(fā)了相同的事情，而不同的界面視覺(jué)語(yǔ)言打亂了用戶的界面使用慣性， 給產(chǎn)品易用性打了折扣。

同時(shí)，視覺(jué)上的不規(guī)范也僅對(duì)設(shè)計(jì)團(tuán)隊(duì)的后續(xù)版本迭代視覺(jué)規(guī)范管理有影響，對(duì)產(chǎn)品的品牌性也造成了一定影響，給產(chǎn)品帶來(lái)一種不專業(yè)感。

2. 視覺(jué)品牌性

通常我們給UI設(shè)計(jì)的作用定義都是通過(guò)視覺(jué)的方式優(yōu)化產(chǎn)品體驗(yàn)傳達(dá)品牌概念。APP產(chǎn)品不同于我們常見(jiàn)的線下產(chǎn)品，用戶對(duì)于它的感受幾乎完全的依賴于線上界面中所提供的信息。因此除了本身的產(chǎn)品LOGO之外，整個(gè)APP的UI都在傳達(dá)給用戶這個(gè)產(chǎn)品的定位與品牌調(diào)性。

因此如果一個(gè)APP做出來(lái)毫無(wú)自己的調(diào)性，和N種競(jìng)品像素級(jí)類似，那么產(chǎn)品本身也就很難從眾多的山寨中脫引而出。

3. 用戶體驗(yàn)漏洞

我們?cè)谶@里暫時(shí)不說(shuō)用戶體驗(yàn)提升，先單純說(shuō)缺漏。大家可能覺(jué)得只有剛剛做完1.0版本的APP會(huì)有這樣的缺漏，成熟的APP就不會(huì)有。

這里舉個(gè)成熟的工具型APP——墨跡天氣的例子。

拍照／選擇圖片部分調(diào)用了iOS原生控件，很顯然這個(gè)部分算是一個(gè)設(shè)計(jì)細(xì)節(jié)缺漏吧。

另外我很想知道這個(gè)頁(yè)面右上角圖標(biāo)點(diǎn)開(kāi)后會(huì)是個(gè)大概什么內(nèi)容的界面有幾個(gè)童鞋能猜對(duì)（雖然APP第一次使用時(shí)有個(gè)黃條提示）。

最后我們回到首頁(yè)讓我有點(diǎn)驚訝的是APP第一次使用時(shí)沒(méi)有提示屏幕可以下滑看未來(lái)5天的天氣詳情。

＊當(dāng)然也許墨跡天氣有它的數(shù)據(jù)考量，我們只能單純從視覺(jué)用戶體驗(yàn)層面稍加分析。

大家應(yīng)該都發(fā)現(xiàn)在這部分我沒(méi)有提大框架上的界面設(shè)計(jì)優(yōu)化，因?yàn)槠鋵?shí)在沒(méi)有真正去產(chǎn)品經(jīng)理手里拿到APP各項(xiàng)具體數(shù)據(jù)、了解他們針對(duì)的實(shí)際用戶群體和目前發(fā)展方向之前，APP的設(shè)計(jì)優(yōu)化也都只是停留在淺層的視覺(jué)優(yōu)化層面上的。所以真正的設(shè)計(jì)提升優(yōu)化還是得從了解產(chǎn)品本身開(kāi)始。

二. 如何做設(shè)計(jì)優(yōu)化

一個(gè)設(shè)計(jì)從“能用”到“好用”有多遠(yuǎn)的距離？

1. “學(xué)會(huì)包裝”

這里說(shuō)的包裝，當(dāng)然不是指你把作品用各種mock up和排版包裝成blingbling的展示圖扔到站酷上就表示你包裝成功了。

也有童鞋在站酷私信我，問(wèn)面試總撲街的原因，看過(guò)TA的作品之后就發(fā)現(xiàn)一個(gè)很嚴(yán)重的問(wèn)題是，作品不落地的同時(shí)過(guò)多的把作品停留在視覺(jué)包裝上而非內(nèi)容的包裝。

如果你是一名在公司上班的UX設(shè)計(jì)師，那么在工作中很現(xiàn)實(shí)的問(wèn)題就在于沒(méi)有人會(huì)輕易同意你的設(shè)計(jì)稿（除非你是業(yè)界公認(rèn)的大咖），從產(chǎn)品經(jīng)理到設(shè)計(jì)經(jīng)理甚至開(kāi)發(fā)都可能從配色到風(fēng)格開(kāi)始diss你的設(shè)計(jì)稿，那么如何從一開(kāi)始就爭(zhēng)取到主動(dòng)權(quán)呢？

（1）用完整思考路徑代替結(jié)果

無(wú)論是配色還是圖標(biāo)風(fēng)格，相信都會(huì)有你自己的思考過(guò)程，把這些加上”證據(jù)“（競(jìng)品OR大咖APP呈現(xiàn)的效果等）做成完成的分析，最后用一個(gè)完整的分析代替單純的一頁(yè)設(shè)計(jì)稿。

就算還會(huì)有diss聲，但至少會(huì)讓自己在前期站住腳拿到主動(dòng)權(quán)，并且很有說(shuō)服力。

這里給大家放一個(gè)之前幫公司做的基金詳情頁(yè)優(yōu)化的一個(gè)思考路徑做參考吧。

基金詳情頁(yè)在UX改版后點(diǎn)擊率提升了3個(gè)百分點(diǎn)

（2）提供更多解決方案

正如我們0-1文章中說(shuō)的，設(shè)計(jì)師是解決問(wèn)題的，那么在發(fā)現(xiàn)問(wèn)題到解決的過(guò)程中，單一丟出一個(gè)結(jié)果也是無(wú)法服眾的。

建議通過(guò)思考做出多種方案（不需要過(guò)多，我的經(jīng)驗(yàn)直覺(jué)是過(guò)多的方案是思維雜亂和不知如何是好的結(jié)果）。這里也拿1個(gè)例子和大家分享。

2. 設(shè)計(jì)移情

這個(gè)概念也是聽(tīng)過(guò)一次騰訊的大咖設(shè)計(jì)師分享之后知道的概念，當(dāng)時(shí)感覺(jué)受益匪淺。

簡(jiǎn)化來(lái)說(shuō)就是學(xué)會(huì)考慮用戶使用場(chǎng)景、站在用戶角度映使用射場(chǎng)景，考慮設(shè)計(jì)可能，把設(shè)計(jì)從能用變?yōu)楹糜?。下面還是用例子說(shuō)話：

這是騰訊大咖分享的一款手機(jī)購(gòu)票的APP改版前?？瓷先ヒ菜坪蹩梢哉Ｊ褂?/p>

這是APP優(yōu)化后的最終效果。

個(gè)人覺(jué)得這是一個(gè)特別完美的例子，前后對(duì)比我們可以很明顯的看出，這不單單這是一個(gè)視覺(jué)優(yōu)化的過(guò)程，更多在于信息的整合與收納。

同時(shí)模擬了用戶的使用情境，以模擬實(shí)物票的樣式表達(dá)線上的出票信息，使用不同地鐵線分類地鐵站代替難以點(diǎn)擊的字母分類（雖然個(gè)人覺(jué)得這塊還可以再優(yōu)化，目前來(lái)看也少了搜索功能）。

這些改動(dòng)都極大的提升了用戶的使用效率，真正從UI層面上貼近了地鐵購(gòu)票APP的核心關(guān)鍵：便捷購(gòu)票。

3. 培養(yǎng)產(chǎn)品思維

（1）數(shù)據(jù)化思維

很多好學(xué)的設(shè)計(jì)師童鞋注重設(shè)計(jì)創(chuàng)造力與交互理論的積累，容易忽略了數(shù)據(jù)的分析的重要性。這個(gè)大概也就需要在實(shí)際工作項(xiàng)目中去體會(huì)的了。

在整個(gè)項(xiàng)目進(jìn)行中，數(shù)據(jù)分析基本可以分為：

• 前期調(diào)研數(shù)據(jù)
• 中期測(cè)試數(shù)據(jù)
• 后期結(jié)果數(shù)據(jù)

這里舉一個(gè)還在獵豹的時(shí)候做清理大師大改版時(shí)候遇到的因?yàn)閿?shù)據(jù)改變?cè)O(shè)計(jì)的例子。

因?yàn)橹衅跍y(cè)試一部分?jǐn)?shù)據(jù)用戶反饋首頁(yè)改版后顯得刺眼（因?yàn)锳PP長(zhǎng)年未做大改版，舊版主色較深）因此重新調(diào)整了改版的主色，使用了明度更貼近原版的藍(lán)色。

（2）營(yíng)銷思維

在關(guān)注數(shù)據(jù)后，我們就可以有所依據(jù)的去設(shè)計(jì)，不是如何設(shè)計(jì)好看，而是如何設(shè)計(jì)用戶更容易買單。最近有篇文章很流行《5個(gè)丑出新高度的網(wǎng)站，為什么那么多人夸》，讓我想起之前Expedia特地為了日本市場(chǎng)重新做了一個(gè)“接地氣”的銷售網(wǎng)站。

左邊為美國(guó)的Expedia?，右邊為日本的Expedia. 2014.

日本是一個(gè)極度重視信用度的國(guó)家，美國(guó)版的Expedia對(duì)大多數(shù)日本人來(lái)說(shuō)內(nèi)容過(guò)少，并沒(méi)有足夠的信任感。

這個(gè)例子其實(shí)就告訴我們所有的UI設(shè)計(jì)都應(yīng)該是基于實(shí)際數(shù)據(jù)的，而不是設(shè)計(jì)師的審美或者某個(gè)國(guó)外書(shū)籍里告訴你的某個(gè)交互定律。設(shè)計(jì)感與定律（不同國(guó)家不同國(guó)情，并不一定適用，就比如歐美人的閱讀習(xí)慣和國(guó)人就不同）是參考，但決定一切的是產(chǎn)品的發(fā)展策略與實(shí)際數(shù)據(jù)。

三. 被誤解的交互動(dòng)效

動(dòng)效在很多人眼里是和輔助一樣的存在，真的是這么雞肋嗎？

1. 交互動(dòng)效的用途區(qū)分

現(xiàn)在APP中可以用到的交互動(dòng)效按用途分，可以分為幾個(gè)類型：

（1）反饋型交互動(dòng)效

在使用某個(gè)功能后，反饋用戶當(dāng)前APP功能狀態(tài)切換的交互動(dòng)效。涵蓋的范圍也非常廣，比如下拉loading、tabbar上的微動(dòng)效等。

（2）功能型交互動(dòng)效

特定工具類、直播類等產(chǎn)品所需求的元素動(dòng)效，比如直播時(shí)飛過(guò)的飛機(jī)、清理應(yīng)用時(shí)轉(zhuǎn)動(dòng)的風(fēng)扇。這類的動(dòng)效通過(guò)擬物化設(shè)計(jì)完成特定的重要功能，增強(qiáng)了與用戶的互動(dòng)，是特點(diǎn)功能的最佳展現(xiàn)方式。

（3）過(guò)渡型交互動(dòng)效

在頁(yè)面跳轉(zhuǎn)與功能銜接中起到重要作用的交互動(dòng)效。好的過(guò)渡動(dòng)效避免了界面快速切換時(shí)給用戶帶來(lái)的迷失，給人以極佳的使用舒適感。

（4）趣味型交互動(dòng)效

起到錦上添花、增加趣味性和品牌調(diào)性的交互動(dòng)效。

以上的例子都來(lái)自dribbble，我截取出來(lái)比較方便。

在這里我們撇開(kāi)天花亂墜的飛機(jī)稿和純藝術(shù)創(chuàng)作不說(shuō)，僅說(shuō)交互動(dòng)效在實(shí)際項(xiàng)目中的應(yīng)用情況其實(shí)并非是越多越好。

在實(shí)際項(xiàng)目中，不同類型的APP對(duì)動(dòng)效的需求也不同，類似新聞?lì)?、深度閱讀類的產(chǎn)品，過(guò)度的、非必須的動(dòng)效使用反而會(huì)干擾閱讀，我們應(yīng)該在實(shí)際情況中考慮動(dòng)效的優(yōu)先取舍。

2. Lottie開(kāi)源動(dòng)畫(huà)庫(kù)

通常我們做的偏復(fù)雜的app動(dòng)效，在實(shí)際落地過(guò)程中會(huì)遇到很多問(wèn)題，比如：Gif圖失真、占內(nèi)存過(guò)大、開(kāi)發(fā)成本過(guò)高。

那么由Airbnb開(kāi)源的動(dòng)畫(huà)庫(kù)Lottie很有效的解決了這一系列問(wèn)題。Lottie可以直接利用 AE 導(dǎo)出的 JSON 動(dòng)畫(huà)文件，將其解析為原生代碼，在iOS和Android設(shè)備平臺(tái)上運(yùn)行。

大約還在1年前左右，我之前所在的公司在APP大改版中應(yīng)用過(guò)Lottie動(dòng)畫(huà)庫(kù)，不過(guò)那個(gè)時(shí)候Lottie還十分不完善，含有位圖或者3D-fx的動(dòng)效都無(wú)法順利使用Lottie動(dòng)畫(huà)庫(kù)，因?yàn)楝F(xiàn)在公司做動(dòng)效極少，不知道現(xiàn)在這些功能bug完善沒(méi)有。

簡(jiǎn)書(shū)上有不少開(kāi)發(fā)童鞋分享的Lottie使用心得，有興趣的童鞋也可以瞅瞅他們的技術(shù)型文章。

本文由 @Nana柒? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供