手機(jī)在我們的日常生活中已經(jīng)是不可或缺的，每天你都耗費(fèi)了很多時(shí)間在上面，那這些時(shí)間你玩手機(jī)有啥收獲呢？應(yīng)該沒有多少人會(huì)在意這個(gè)話題，但是作為 UI 設(shè)計(jì)師來說，也許玩手機(jī)還有另一個(gè)用途。同樣都是運(yùn)用著各種應(yīng)用軟件，你有沒有多留意一點(diǎn)這個(gè)交互或者設(shè)計(jì)解決方案是否合理，遇到優(yōu)秀的設(shè)計(jì)有沒有記錄的習(xí)慣，也許很多設(shè)計(jì)師沒有，但是衍果設(shè)計(jì)的伙伴一直堅(jiān)持著這樣的習(xí)慣。

下面就讓我一起來看看，都記錄了些什么好的設(shè)計(jì)細(xì)節(jié)呢！

1、脫水

友好的注冊(cè)流程

小編提示脫水是一個(gè)以《三體》為背景文化的內(nèi)容社區(qū)。注冊(cè)流程崛棄了傳統(tǒng)的用戶視角單向選擇，采用實(shí)時(shí)性和代入感更強(qiáng)的對(duì)話方式。整個(gè)注冊(cè)過程更有溫度，對(duì)話的實(shí)時(shí)反饋也仿佛有一種日常聊天的感覺。當(dāng)產(chǎn)品能滿足本能和行為層面，反思層會(huì)很大程度的加強(qiáng)品牌感和用戶記憶。

2、愛奇藝

制造用戶驚喜

國(guó)慶假期期間，愛奇藝全屏模式下點(diǎn)擊屏幕會(huì)有放煙花的小動(dòng)效出現(xiàn)（男孩帽子上），給用戶制造小驚喜同時(shí)提升用戶好感。雖然這樣的小心思并不新鮮，不過就跟男女朋友間相互制造小浪漫一樣能累積彼此好感度，用戶和產(chǎn)品的關(guān)系也應(yīng)如此。

3、快看漫畫

3.1、 提供更豐富的體驗(yàn)

咸魚白菜，各有所愛。推薦在各大產(chǎn)品都特別常見，很多推薦都只帶有“查看更多”或者“換一批”其中一個(gè)選項(xiàng)?？炜绰嫲褍烧叨汲尸F(xiàn)出來，更大程度的滿足不同用戶的不同體驗(yàn)需求。像我比較懶就喜歡在原地?fù)Q一換，連跳轉(zhuǎn)都覺得麻煩~，更適合沒有明確目標(biāo)的用戶需求；相反有特定尋找需求的用戶則傾向查看更多，通過滑動(dòng)更高效尋找信息。既然一個(gè)方法不能滿足所有用戶，就多呈現(xiàn)不同的方法。

3.2、 實(shí)時(shí)交互 & 反饋

篩選模式有很多，比較傳統(tǒng)的可能點(diǎn)擊篩選跳轉(zhuǎn)到模態(tài)彈窗，把需要的選項(xiàng)選擇一遍再點(diǎn)擊確定，系統(tǒng)對(duì)內(nèi)容進(jìn)行篩除呈現(xiàn)結(jié)果。不過這樣的流程用戶更像對(duì)一個(gè)黑箱進(jìn)行操作，過程中充滿不確定性。反觀下圖展開的各種篩選項(xiàng)，每實(shí)際選擇一項(xiàng)，下方內(nèi)容都會(huì)實(shí)時(shí)做出反饋改變。除了帶來確定性滿足，還能讓用戶提前預(yù)知每個(gè)交互的結(jié)果，不至于一頓操作 結(jié)果為空又要返回黑箱排查哪里除了問題，非常值得學(xué)習(xí)。

4、自如

融入品牌感

自如維修服務(wù)的售后評(píng)價(jià)，除了將小熊的品牌融入到滿意度評(píng)分，還設(shè)計(jì)了不同滿意度下的表情延展，每個(gè)分?jǐn)?shù)都對(duì)應(yīng)不同的表情。賦予了溫度感，表情的信息傳達(dá)也較數(shù)字直觀，十分好玩。

5、最右

生活經(jīng)驗(yàn)映射

用戶界面設(shè)計(jì)講求心智模型匹配，一個(gè)好的心智模型可以減少用戶的學(xué)習(xí)和操作成本。最右在評(píng)價(jià)列表旁邊有排序切換，可以切換最熱（點(diǎn)贊最多）和最新發(fā)布的評(píng)論。雖然圖標(biāo)帶有文字解釋，不過圖標(biāo)自身的顏色使用，通過經(jīng)驗(yàn)鏈接起紅色和熱度的關(guān)系，使我們更直觀快速理解信息。

6、蝸牛讀書

6.1、層級(jí)關(guān)系

隨著應(yīng)用越來越強(qiáng)調(diào)輕量級(jí)，更多的模態(tài)和非模態(tài)彈窗運(yùn)用到界面設(shè)計(jì)上，以減少頁面跳轉(zhuǎn)帶來的界面層級(jí)過深。如果仔細(xì)留意，會(huì)發(fā)現(xiàn)這些看似尋常的設(shè)計(jì)里也藏著魔鬼的細(xì)節(jié)。右邊的非模態(tài)彈窗并非直接在原頁面蓋一層半透明蒙版，而是將原來的界面等比縮小了，可以看到四周的黑色邊框。搭配動(dòng)效服用效果更佳，會(huì)更直觀的表達(dá)了層級(jí)關(guān)系，當(dāng)然不僅蝸牛讀書使用到，可以留意一下身邊的APP體驗(yàn)一哈噢~

6.2、社交貨幣

貫徹蝸牛讀書的一個(gè)重要設(shè)定，就是閱讀時(shí)長(zhǎng)，每天一小時(shí)額度，可以通過別人的點(diǎn)贊獲得時(shí)長(zhǎng)，也能直接付費(fèi)購買。這里把普遍的點(diǎn)贊功能和具有實(shí)際價(jià)值的閱讀時(shí)長(zhǎng)掛鉤，優(yōu)點(diǎn)是激勵(lì)用戶進(jìn)行高質(zhì)量分享獲得更多的點(diǎn)贊，從而轉(zhuǎn)換成時(shí)長(zhǎng)；缺點(diǎn)是點(diǎn)贊成本提高導(dǎo)致用戶不會(huì)輕易點(diǎn)贊。通過設(shè)計(jì)控制了點(diǎn)贊的熱度，或許這種追求高質(zhì)量的信息曝光更迎合讀書產(chǎn)品的人群青睞吧。時(shí)長(zhǎng)也可以是一種社交貨幣~

6.3、節(jié)省注意力

在產(chǎn)品爭(zhēng)搶著所有人的注意力時(shí)，大家越發(fā)覺得時(shí)間的碎片化和注意力缺失，社會(huì)更多的向更加短平快的節(jié)奏前進(jìn)。由此而生的問題是怎么幫用戶管理注意力，面對(duì)追求“效率”“干貨”的用戶，“只看書”功能個(gè)給出了答案。如果讀者不想閱讀完完整的推文內(nèi)容，或者閱讀希望回頭快速整理出書籍推薦，那只看書會(huì)輕松幫用戶節(jié)省帶寬，并引導(dǎo)用戶立刻進(jìn)行閱讀。

6.4、點(diǎn)擊區(qū)域

一個(gè)好看的界面，要想好用，還需要設(shè)置合理的點(diǎn)擊區(qū)域（熱區(qū)），才能讓體驗(yàn)絲滑順暢。如圖是大概測(cè)量的熱區(qū)，上方綠色部分是往上返回已讀內(nèi)容，因?yàn)樾聝?nèi)容位于下方，上方自然表示回顧已讀內(nèi)容。中間區(qū)域喚起右圖的操作和設(shè)置，重點(diǎn)是左右紅色區(qū)域，用來往下瀏覽新內(nèi)容。為何要豎向劃分成三個(gè)區(qū)域呢，很可能是為了保證不同用手習(xí)慣的用戶體驗(yàn)一致性。左右手單手持有手機(jī)的用戶，都能輕易的點(diǎn)擊紅色和白色區(qū)域進(jìn)行操作（右手點(diǎn)擊左邊紅色區(qū)域，左手點(diǎn)擊右邊），最大程度保證了易操作性。其實(shí)除了上下翻頁，還能設(shè)置左右翻頁，熱區(qū)也隨之改變，有興趣可以體驗(yàn)一下。

6.5、保護(hù)策略

產(chǎn)品使用過程中，難免會(huì)出現(xiàn)各種意想不到的情況。閱讀類產(chǎn)品比較常見的就是突然臨時(shí)有事忘記操作手機(jī)，（一般不會(huì)刻意鎖屏再去做別的事情）本來這種情況是不會(huì)出現(xiàn)問題的，可到了蝸牛讀書這里，閱讀時(shí)長(zhǎng)是稀缺的，為了防止疏忽導(dǎo)致用戶白白浪費(fèi)閱讀時(shí)間，產(chǎn)品不進(jìn)行操作一段時(shí)間，閱讀計(jì)時(shí)將自動(dòng)停止。用戶回來看到如此貼心的設(shè)置，再配上一段得體的文案，自然對(duì)產(chǎn)品好感度+1。其實(shí)類似的操作，就跟手機(jī)和電腦的息屏一樣，減少了電量的耗費(fèi)。不過要考慮到這樣的情況，除了經(jīng)驗(yàn)的積累，更多的在日常中使用產(chǎn)品才能打磨出周到的用戶體驗(yàn)。

7、谷歌瀏覽器

場(chǎng)景化思維

瀏覽器可能都很熟悉，不過背后的操作邏輯你是否留意過呢？一個(gè)很常見的使用場(chǎng)景就是我們打開了一堆的網(wǎng)頁，需要連續(xù)關(guān)閉好幾個(gè)。一般來說，每個(gè)網(wǎng)頁的標(biāo)簽頁有最大寬度，如果標(biāo)簽頁過多，所有標(biāo)簽會(huì)等距離縮短，而當(dāng)點(diǎn)擊標(biāo)簽右邊關(guān)閉該標(biāo)簽時(shí)，只要鼠標(biāo)不移動(dòng)，右邊的標(biāo)簽會(huì)自動(dòng)左移到鼠標(biāo)位置（如1所示）。如此一來就能不移動(dòng)鼠標(biāo)刪除后面所有標(biāo)簽頁，直到鼠標(biāo)移出標(biāo)簽頁區(qū)域，標(biāo)簽頁才恢復(fù)“彈性”改變寬度。只有代入到場(chǎng)景，才能理解并創(chuàng)造出解決用戶問題的設(shè)計(jì)。

8、掌閱

8.1、生活映射

讓用戶快速學(xué)習(xí)使用一款產(chǎn)品，最便捷的方式是找到一個(gè)他們熟悉的模型代入。像打開電子書模擬了真實(shí)書籍翻頁的動(dòng)效，除了減低學(xué)習(xí)成本，還能減少部分用戶對(duì)電子書沒有溫度的刻板印象，將體驗(yàn)自然地與閱讀實(shí)體書聯(lián)系起來。

8.2、自定義頻道

自定義頻道很多人都不陌生，不過這里想分享的是關(guān)于拖動(dòng)這一操作的感想。手機(jī)上拖動(dòng)的操作其實(shí)并不常見，所以用戶對(duì)拖動(dòng)的有一定學(xué)習(xí)成本。這里解決方式是通過結(jié)合點(diǎn)擊和拖動(dòng)兩種交互手勢(shì)，可以達(dá)到一樣的操作效果。用戶點(diǎn)擊上方標(biāo)簽即可將標(biāo)簽移動(dòng)下面表示停止使用，重新點(diǎn)擊下方標(biāo)簽則啟用回到上方。當(dāng)然也能上下拖動(dòng)（箭頭所指是正在拖動(dòng)的狀態(tài)）。這里拖動(dòng)主要作用并非啟用和停用，而是對(duì)品牌進(jìn)行排序，根據(jù)用戶習(xí)慣選擇最適合自己的方式展示，將主動(dòng)權(quán)交給用戶。

8.3、用戶認(rèn)知

向他人闡述一個(gè)陌生的實(shí)物或者概念，可以用熟悉的實(shí)物解釋新事物，從而快速同步大家的認(rèn)知。比如向沒看過《指環(huán)王》的憨憨推薦這部電影，就可以說是國(guó)外的《西游記》。對(duì)方即使沒看過，也能迅速知道電影大概故事情節(jié)。這里對(duì)比一下網(wǎng)文購買流程中的「選章節(jié)」這一功能的UI設(shè)計(jì)。改版前的自定義章節(jié)按鈕與固定集數(shù)樣式十分類似，用戶初次使用并不能很好的意識(shí)到區(qū)別。反觀改版后（右圖），除了在外觀上與固定集數(shù)樣式按鈕作出區(qū)分，還選用了用戶熟悉的常用電商平臺(tái)的數(shù)量選擇器，讓選章節(jié)這一功能得以快速被識(shí)別，符合用戶認(rèn)知。

9、Photoshop

減少流程

其實(shí)除了設(shè)計(jì)師經(jīng)常需要在PS，AI，sketch間來回跳轉(zhuǎn)，用戶有時(shí)候使用一個(gè)功能也可能需要關(guān)聯(lián)其他產(chǎn)品。假設(shè)預(yù)定酒店產(chǎn)品在用戶準(zhǔn)備導(dǎo)航去酒店的路線時(shí)，不支持跳轉(zhuǎn)，需要手動(dòng)打開地圖軟件重新輸入酒店名那叫一個(gè)崩潰。所以現(xiàn)在趨勢(shì)都在減少產(chǎn)品或者場(chǎng)景互相跳轉(zhuǎn)的阻力。在使用PS時(shí)來回兩臺(tái)電腦傳源文件已是家常便飯，當(dāng)檢測(cè)到電腦不具有源文件所含字體時(shí)，系統(tǒng)會(huì)詢問是否需要立刻下載缺失的字體，極大減少了用戶自行下載的時(shí)間。

10、Moo

創(chuàng)新的交互手勢(shì)

如果想發(fā)掘一些有創(chuàng)意的交互甚至視覺設(shè)計(jì)，體驗(yàn)音樂型產(chǎn)品可能是不錯(cuò)的選擇。MOO音樂播放界面信息十分簡(jiǎn)潔，基本可以分為上下兩塊，上方可以左右滑動(dòng)切換播放界面和首頁，點(diǎn)擊歌詞展開全部歌詞；下方是播放控制區(qū)域，可以理解成是一個(gè)看似空白的播放器控件。在熱區(qū)里（圖中紅色區(qū)域）左右滑動(dòng)即可快進(jìn)，回放（變成圖1右側(cè)樣式），需要播放和暫停則點(diǎn)擊整屏幕中空白位置即可，上下滑動(dòng)切換歌曲。相較于傳統(tǒng)的播放器控件，這樣的優(yōu)勢(shì)在于播放、暫停的點(diǎn)擊區(qū)域從常見的圓形按鈕變?yōu)閭稳?，快進(jìn)、回放也從進(jìn)度條上的小圓點(diǎn)變成下方一整片區(qū)域。用戶從精確的控制手指位置變成只需大概甚至全屏操作，無論從效率提高還是心理壓力減少都是很大的優(yōu)化。

不過這一定程度影響了產(chǎn)品其他功能的設(shè)計(jì)，需要根據(jù)產(chǎn)品和業(yè)務(wù)目標(biāo)使用。

11、嗶哩嗶哩

預(yù)判用戶行為

同一個(gè)產(chǎn)品或功能，用戶需求很可能會(huì)隨著使用場(chǎng)景改變發(fā)生改變。在嗶哩嗶哩中，當(dāng)用戶通過歷史或者其他入口，打開了一個(gè)曾經(jīng)看過的視頻，系統(tǒng)判斷視頻時(shí)間接近尾聲，會(huì)預(yù)判用戶此時(shí)可能希望的動(dòng)作是二刷視頻，所以提示「返回開頭」功能就變成了理所當(dāng)然了，免去了用戶拖動(dòng)進(jìn)度條的操作。

12、IOS

費(fèi)茨定律

在我們的日常認(rèn)知中操作一般成組出現(xiàn)，像你家的洗衣機(jī)不會(huì)這個(gè)角一個(gè)按鈕那個(gè)角一個(gè)按鈕。因?yàn)榭山换サ牟僮髦g距離越遠(yuǎn)，用戶完成操作的時(shí)間將越長(zhǎng)，操作阻力越大。右圖信息編輯頁面的三個(gè)按鈕“已讀”“刪除”“完成”分別設(shè)置在界面的三個(gè)角落。原因可能是用戶在編輯信息時(shí)往往注意力不集中，操作更加隨意，為了將三者的功能明確區(qū)分開，互相撇清關(guān)系，才要離遠(yuǎn)遠(yuǎn)的，同時(shí)按鈕之間來回切換注意力也能讓給予用戶思考的時(shí)間。使操作遠(yuǎn)離目的在于減少誤操作（本來想已讀錯(cuò)點(diǎn)了刪除），而是否讓不相關(guān)的操作遠(yuǎn)離，更多取決于用戶使用場(chǎng)景中注意力是否集中。這種情況更多出現(xiàn)在C端，B端產(chǎn)品因?yàn)橛脩艚巧菴端更專注，考慮到效率和讓操作者對(duì)可進(jìn)行的全部操作有全局的認(rèn)識(shí)，B端操作成組出現(xiàn)。

13、菜鳥裹裹

提高產(chǎn)品趣味

菜鳥裹裹寄了一個(gè)快遞，付款的時(shí)候發(fā)現(xiàn)唉，可以猜訂單什么時(shí)候送達(dá)耶！按捺不住好奇我一頓操作把那個(gè)頁面點(diǎn)沒了，來不及截圖，只能看看猜完的頁面自行腦補(bǔ)了~不過我想說用這種趣味性的設(shè)計(jì)來增加和用戶的互動(dòng)，不僅增加了產(chǎn)品記憶，也提高了用戶愉悅度。

另外，突然想到花小豬打車用戶等待時(shí)長(zhǎng)過長(zhǎng)時(shí)，會(huì)根據(jù)等待時(shí)長(zhǎng)給用戶補(bǔ)償金額，這種操作簡(jiǎn)直吊打從設(shè)計(jì)上減少用戶等待焦慮的方式。所以我想說，當(dāng)在設(shè)計(jì)層面無法解決問題的時(shí)候，可以試著跳出思維框架，在更大的范圍內(nèi)尋求答案，當(dāng)然這需要其他資源的配合咯。

14、Flow

降低學(xué)習(xí)成本

如何解釋一個(gè)抽象的系統(tǒng)，可以通過客觀世界的經(jīng)驗(yàn)映射。Flow是一款無限畫布的手繪筆記產(chǎn)品，可以隨時(shí)通過觸屏記錄下自己的各種想法。對(duì)于任何工具型產(chǎn)品，上手難度一直存在且是個(gè)不小的問題。因?yàn)橛脩敉鶝]有用過類似的產(chǎn)品，不像電商，社交有一定的使用經(jīng)驗(yàn)。那么怎么在新用戶失去耐心前教會(huì)他們使用呢？這里通過將功能具象化成日常熟悉的事物，比如換筆頭，就是直觀的把筆頭平移更換，換顏色也會(huì)直接作用在筆身上，這讓我們跟客觀世界的使用經(jīng)驗(yàn)聯(lián)系起來，幾乎沒有學(xué)習(xí)成本，而且熟悉的事物減少了用戶焦慮感。只是這種界面開發(fā)成本較高，要考慮功能對(duì)產(chǎn)品的優(yōu)先級(jí)。

15、Jour

15.1、增加控制感

控制 控制 控制！在社會(huì)普遍焦慮的環(huán)境下，用戶的內(nèi)心需要被很好的照顧，增加用戶的控制感成為了提高體驗(yàn)的可行之徑。在Jour里，用戶輸入的身材信息隨后是允許修改的，可用戶不知情可能會(huì)因害怕輸入不準(zhǔn)確而因此不輸入，這時(shí)提示信息很好的打消了用戶顧慮。

右圖輸入內(nèi)容后，會(huì)立刻反饋信息的可行性，從而給用戶確定性的滿足，提高后續(xù)輸入的積極性。

15.2、動(dòng)效加持

說到動(dòng)效，很多人第一反應(yīng)是追波 畢漢思 那種炫酷夸張，恨不得讓你看個(gè)100遍的展示性Demo。不過個(gè)人覺得用在產(chǎn)品上，duck不必，值得追求的動(dòng)效應(yīng)該是如絲般融入產(chǎn)品的體驗(yàn)過程中，不應(yīng)引起用戶的注意（好的設(shè)計(jì)一般不會(huì)引起用戶注意，因?yàn)樵谒麄兛磥磉@就是理所當(dāng)然這樣）。很多簡(jiǎn)單的效果，如圖中的點(diǎn)擊縮放再回彈表示按壓感，就可以讓交互過程更“真實(shí)”絲滑，它們可能不出眾，但是眾多的細(xì)節(jié)堆砌起來，體驗(yàn)肯定能加分不少呢。