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

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

1、脫水

友好的注冊流程

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

2、愛奇藝

制造用戶驚喜

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

3、快看漫畫

3.1、 提供更豐富的體驗

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

3.2、 實時交互 & 反饋

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

4、自如

融入品牌感

自如維修服務的售后評價，除了將小熊的品牌融入到滿意度評分，還設計了不同滿意度下的表情延展，每個分數(shù)都對應不同的表情。賦予了溫度感，表情的信息傳達也較數(shù)字直觀，十分好玩。

5、最右

生活經(jīng)驗映射

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

6、蝸牛讀書

6.1、層級關系

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

6.2、社交貨幣

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

6.3、節(jié)省注意力

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

6.4、點擊區(qū)域

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

6.5、保護策略

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

7、谷歌瀏覽器

場景化思維

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

8、掌閱

8.1、生活映射

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

8.2、自定義頻道

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

8.3、用戶認知

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

9、Photoshop

減少流程

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

10、Moo

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

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

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

11、嗶哩嗶哩

預判用戶行為

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

12、IOS

費茨定律

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

13、菜鳥裹裹

提高產(chǎn)品趣味

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

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

14、Flow

降低學習成本

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

15、Jour

15.1、增加控制感

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

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

15.2、動效加持

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