小團(tuán)隊在資源有限的情況下，要怎么對待細(xì)節(jié)優(yōu)化呢？作者分享了自己的一些思考。

我們都知道國民級應(yīng)用“微信”之父張小龍對細(xì)節(jié)的苛刻程度：大到按鈕應(yīng)該放在左邊還是右邊，小到圖像差了幾個像素，“微信3.1版本和3.0的區(qū)別是微信會話列表每一行高度少了2個像素”在彼時成為“微信”之父細(xì)節(jié)設(shè)計的經(jīng)典案例之一。

然而，微信像素級別的細(xì)節(jié)優(yōu)化是建立在騰訊大量的人力、財力資源支持前提下的，如果是小團(tuán)隊資源有限時怎么對待細(xì)節(jié)優(yōu)化？

1.細(xì)節(jié)優(yōu)化的重要程度

即使在用戶體驗蓬勃發(fā)展的今天，細(xì)節(jié)優(yōu)化也只是為產(chǎn)品能擊敗對手增加了些許籌碼，但未能在勝利的天平中起到?jīng)Q定性的作用。決定產(chǎn)品生死的依然掌握在用戶剛需、產(chǎn)品大方向手里。例如12306，雖然所有用戶都在吐槽它的體驗，但依然阻擋不了它的成功，相反，一些用戶體驗極佳的應(yīng)用，我們把玩幾天“借鑒”它們的設(shè)計后，就再也沒有打開過。

所以，細(xì)節(jié)優(yōu)化環(huán)節(jié)的重要程度是比較低的，至少在項目初期是不重要的，在項目相對成熟運作后，擁有一定的優(yōu)化資源，我們就可以著手進(jìn)行細(xì)節(jié)優(yōu)化。

2.預(yù)防優(yōu)于治療

疾病發(fā)生后治療過程帶給病人的是無盡的痛苦，如果平時多喝熱水、多運動、注意飲食作息規(guī)律，做好預(yù)防就能顯著減少疾病的發(fā)生。細(xì)節(jié)優(yōu)化同理，如果有一名靠譜的交互設(shè)計師，在交互設(shè)計時就盡可能把細(xì)節(jié)考慮周全，就不會像今天這樣細(xì)節(jié)優(yōu)化列表堆積如山。

見微知著，在細(xì)節(jié)的處理上就可以看出交互設(shè)計師的水平層次，有經(jīng)驗的交互設(shè)計師，會更注重細(xì)節(jié)性的設(shè)計，交互設(shè)計師已經(jīng)制作好的原型就包括了一定的交互細(xì)節(jié)。以視頻類應(yīng)用為例，視頻圖像的占位符中用文字標(biāo)注為“視頻封面”，屬于視頻標(biāo)題或者作者名稱的位置也具體描述出來，當(dāng)前頁面所屬菜單也通過高亮來顯示…如果缺乏細(xì)節(jié)的表達(dá)，恐怕受眾需要苦學(xué)推理才能理解作者需要表達(dá)的含義，見下圖中包含細(xì)節(jié)和無細(xì)節(jié)的對比圖。

其他比較重要的需要著重考慮的設(shè)計，以三個方面分開說明，分別是：交互邊界、特殊狀態(tài)和場景設(shè)計。

2.1交互邊界

交互邊界≠產(chǎn)品邊界，為方便區(qū)分兩者，我們先來了解一下什么是產(chǎn)品邊界。以夜視項目為例，它立足于視頻，核心功能也是視頻，用戶對它的認(rèn)知也是貼上了“視頻”的標(biāo)簽，這是毫無疑問的。

然而，當(dāng)夜視發(fā)展到一定階段，它需要在核心功能的基礎(chǔ)上，新增次級的功能，可以是獲取電影票、看直播、購買視頻周邊商品等功能，但絕不是看天氣、購買火車票等超出用戶對夜視APP認(rèn)知范圍的功能，因為，一旦超出用戶的認(rèn)知范圍，用戶的使用意愿是極低的。由于產(chǎn)品自身基因限制，無法拓展或者花費巨大代價去拓展的功能界線，就是所謂的“產(chǎn)品邊界”。

如果說產(chǎn)品邊界是立足于功能層面，那么交互邊界就是具體到界面層面的，或者界面中的具體控件。以夜視的首頁為例，當(dāng)前已完成的交互稿，還應(yīng)當(dāng)包括頁面底部的細(xì)節(jié)，即首頁滾動后的內(nèi)容，以及是否設(shè)置有滾動邊界（最大的屏幕滾動距離），或者滾動多少屏后自動刷出新的視頻內(nèi)容？

交互邊界也可以是具體到某個組件，例如文本輸入框，限制最大輸入字符數(shù)，同樣屬于交互邊界的范疇。

2.2特殊狀態(tài)

用戶在使用產(chǎn)品時，會遇到一些特殊狀態(tài)，需要設(shè)計師在設(shè)計流程中就考慮進(jìn)去，常見的有：等待狀態(tài)、初始狀態(tài)、空白狀態(tài)、網(wǎng)絡(luò)異常4種。

（1）等待狀態(tài)

國內(nèi)較多的APP都設(shè)置有啟動頁，原因是APP調(diào)接口刷新數(shù)據(jù)需要等待時間，主要目的是減少用戶的等待焦慮，在短短的不到3秒的時間內(nèi)也期望起到品牌展示的作用。用戶啟動APP、刷新頁面之間所處的狀態(tài)，我們可以稱之為等待狀態(tài)，需要為等待狀態(tài)進(jìn)行過渡性頁面設(shè)計，除非我們有絕對的信心通過技術(shù)上的優(yōu)化能把頁面數(shù)據(jù)的加載時間控制在300毫秒以下。以啟動APP到進(jìn)入夜視首頁為例，我們需要設(shè)計啟動頁來減少用戶的等待焦慮。

（2）初始狀態(tài)

首次為客戶呈現(xiàn)的頁面狀態(tài)，都可以稱之為初始狀態(tài)，需要特別強調(diào)的是，部分功能初始狀態(tài)會隨著用戶的操作而發(fā)生變化。以APP登錄狀態(tài)為例，用戶首次下載使用APP，用戶打開“我的”頁面時，默認(rèn)初始狀態(tài)為未登錄狀態(tài)；用戶登錄后，下次進(jìn)入“我的”頁面，默認(rèn)初始狀態(tài)為已登錄狀態(tài)。

（3）空白狀態(tài)

設(shè)計師在設(shè)計頁面的時候，往往容易忽略頁面的空白狀態(tài)，用戶打開頁面后一片空白，認(rèn)為APP沒有提供任何有價值的內(nèi)容，用戶體驗極差。頁面空白產(chǎn)生的原因可能是服務(wù)器數(shù)據(jù)缺失，也可能是頁面內(nèi)容需要用戶進(jìn)行某種操作才能呈現(xiàn)，不管如何，空白狀態(tài)的設(shè)計也是交互設(shè)計師需要考慮的事情。

以“關(guān)注”頁面為例，用戶未關(guān)注任何作者前，“關(guān)注”頁面理論上應(yīng)該是空白的頁面，最簡單的方式是在頁面增加提示語“您還沒關(guān)注任何作者”，但是，我們也可以有更好的處理方式，在空白頁面為用戶推薦一些熱門作者引導(dǎo)其關(guān)注。

（4）網(wǎng)絡(luò)異常

網(wǎng)絡(luò)異常需要考慮兩種狀態(tài)：無網(wǎng)、弱網(wǎng)。無網(wǎng)是指完全斷開網(wǎng)絡(luò)，弱網(wǎng)是指網(wǎng)絡(luò)還處于連接狀態(tài)，但是網(wǎng)絡(luò)緩慢（如處于2G網(wǎng)絡(luò)）或者處于擁堵狀態(tài)（如春節(jié)微信搶發(fā)紅包人員過多服務(wù)器過載），兩者是有區(qū)別的。

網(wǎng)絡(luò)異常狀態(tài)不同，處理的方式也不同，以下拉刷新“首頁”為例，在無網(wǎng)的環(huán)境下，下拉刷新時可直接回彈，并出現(xiàn)toast提示“無法連接到網(wǎng)絡(luò)，請稍后重試”；如果是弱網(wǎng)，則保持在刷新中的狀態(tài)，計算超時時間，例如30秒，再使頁面回彈，并出現(xiàn)tosat提示“當(dāng)前網(wǎng)絡(luò)環(huán)境較差，請稍后重試”。

順便說一句，每次進(jìn)入首頁時，應(yīng)該使用緩存的解決方案，即默認(rèn)展示上次APP退出前已經(jīng)加載好的內(nèi)容，能有效避免因網(wǎng)絡(luò)原因?qū)е碌目瞻醉撁娉霈F(xiàn)。

2.3場景設(shè)計

把產(chǎn)品設(shè)計和用戶的實際使用場景結(jié)合起來，是最能體現(xiàn)設(shè)計“走心”的點，在做場景設(shè)計時，至少需要考慮人物、時間、地點、事情4個因素。

用戶（人物）在乘坐地鐵（地點）上班（時間）路上，打開夜視APP想要播放視頻（事情），就是一個典型的場景描述，但具體這個場景如何作用到設(shè)計中呢？這時，就需要我們從場景中推導(dǎo)出更多的影響因素，想象一下，用戶外出的時候，就基本離開了WiFi環(huán)境，只能使用4G網(wǎng)絡(luò)，而視頻播放需要耗費大量的流量。這時，用戶的手機處于4G網(wǎng)絡(luò)下，打開視頻默認(rèn)自動播放是否合理？再聯(lián)系到國內(nèi)運營商移動流量費用偏高的現(xiàn)實，答案顯然是不合理的。

基于用戶實際使用場景而采取的設(shè)計解決方案，就是所謂的場景設(shè)計，按照上述的例子，我們可以采用這樣的解決方案：當(dāng)用戶處于4G網(wǎng)絡(luò)環(huán)境，點擊視頻播放時，不再自動播放視頻，并提示用戶“正處于4G網(wǎng)絡(luò)，本次播放將消耗xxM流量”。

3.細(xì)節(jié)優(yōu)化分級

資源有限時，細(xì)節(jié)優(yōu)化更應(yīng)該區(qū)分先后順序，常見的優(yōu)先級是流程＞功能＞UI，以用戶登錄為例，存在以下流程、功能、UI三個細(xì)節(jié)優(yōu)化問題：

• 流程：優(yōu)化登錄流程，縮短登錄所需的驗證步驟，原“登錄密碼”+“手機驗證碼”的組合，改為單一驗證或者指紋登錄。
• 功能：增加第三方登錄功能，降低新用戶注冊登錄的門檻。
• UI：登錄界面樣式優(yōu)化，原擬物風(fēng)格變?yōu)楸馄交娘L(fēng)格。

為什么是流程＞功能＞UI？因為流程和用戶使用產(chǎn)品完成目標(biāo)的成功率和時間息息相關(guān)，優(yōu)化流程對提升用戶體驗的作用更明顯；而功能多數(shù)為新增或者替代性功能，變更后用戶體驗未必能達(dá)到預(yù)期，且需要一定的時間適應(yīng)；最后，界面層級的優(yōu)化一定程度上具備主觀性，好看是否取決于用戶個人主觀標(biāo)準(zhǔn)。

當(dāng)多個細(xì)節(jié)優(yōu)化都同屬于其中一類或者沒有明顯分類時，我們還需要一套更科學(xué)的分級方法：按照問題的優(yōu)先級來進(jìn)行分級。具體做法是按照影響范圍大小和嚴(yán)重程度高低兩個標(biāo)準(zhǔn)建立xy坐標(biāo)軸，并且根據(jù)問題的落點劃分為4個象限，影響范圍大且嚴(yán)重程度高的問題優(yōu)先級最高，反之則最低，處于兩者中間的屬于優(yōu)先級中等。

作者：夜雨，高級交互設(shè)計師，專注金融行業(yè)-智能投顧方向，大部分時間在復(fù)雜后臺系統(tǒng)中遨游。

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

題圖來自PEXELS，基于CC0協(xié)議