這是2017年的第10篇文章。據(jù)說總結(jié)出100個打動人心的APP設計點，就能召喚神龍，還沒看過前兩篇文章的，請補上：《那些打動人心的APP設計（1）》?《那些打動人心的APP設計（2）》。

設計師必須站在系統(tǒng)層面做思考，滿足某一類人的需求并提供解決方案，這需要系統(tǒng)化的交互方法論，包括需求分析、信息架構(gòu)及流程設計等等。但當設計師專注于宏觀思考問題時，往往會忽略設計細節(jié)?；谶@種情況，Smart Design 的交互設計主管 Dan Saffer提出了“微交互”的概念。為此，他專門寫了一本書，書名叫做《微交互》。有興趣的小伙伴可以看看。

好，我們繼續(xù)梳理那些打動人心的APP設計，希望對你有幫助。

18.微信讀書的查詢功能

微信讀書是我個人很喜歡并常用的一款閱讀類APP，簡單的產(chǎn)品架構(gòu)，優(yōu)秀的文字排版，以及基于筆記和讀后感的社交屬性，都是打動我的產(chǎn)品點。其中不乏一些打動人心的微交互，如上篇文章中第15條。而今天講的是微信的查詢功能。

閱讀的時候會遇到一些不懂的概念或者不認識的外文，貼心的微信讀書不僅提供了詞典功能，如果要查詢的詞字典里沒有，還可以直接查詢百度百科，簡直不要太方便。看書的時候再也不用在閱讀軟件和瀏覽器之間來回切換了。

微信讀書

19.網(wǎng)易出品必屬精品

互聯(lián)網(wǎng)公司，注重產(chǎn)品體驗的，一個是騰訊，另一個則是網(wǎng)易，網(wǎng)上流傳這么一句話：網(wǎng)易出品必屬精品。最近新上線的網(wǎng)易蝸牛讀書APP，又偷偷火了一把。不過今天要講的是另一個網(wǎng)易出品：有道詞典。

常規(guī)的APP都將搜索欄放在頁面頂部，這樣會遇到一個問題，不利于單手操作。有道詞典在首頁右下角放置了一個搜索icon，讓用戶在進行翻譯任務時，單手操作便可完成。

有道詞典

20.撩人的小妖精：小紅書

小紅書成功了，這是個讓無數(shù)妹紙種草剁手的地方，小紅書為了伺候好這幫小公主，可謂處處用心。光一個點贊，就給做出花來了。

每次點贊，提示的文案都不同，而且每句都讓人忍不住再點一次，誰讓你不要臉的這么夸我，哈哈。

小紅書

21.音樂APP中的文藝青年：網(wǎng)易云音樂

網(wǎng)易用個性化的推薦和豐富的社區(qū)內(nèi)容，在音樂市場殺出了一條血路，讓其他老牌音樂APP望塵莫及。除了個性化的推薦、社區(qū)，優(yōu)秀的產(chǎn)品交互也是不可或缺的亮點。

網(wǎng)絡不好或斷網(wǎng)狀態(tài)，和網(wǎng)絡正常，這兩種情況打開APP，默認的標簽頁是不一樣的。斷網(wǎng)時會直接前往本地的“我的音樂”，網(wǎng)絡正常則是“發(fā)現(xiàn)音樂”頁。沒網(wǎng)的時候發(fā)現(xiàn)個毛線音樂，只能是聽本地音樂了，這個細節(jié)給滿分。

網(wǎng)易云音樂

22.再次提名的QQ郵箱

該系列文章第一條夸的就是騰訊出品的郵箱，今天繼續(xù)夸一夸。查看郵件之后，用戶有幾條路徑：回復郵件，轉(zhuǎn)發(fā)郵件，返回郵件列表等。QQ郵箱，在閱讀郵件頁下滑，便可直接回復郵件，提高了上班族處理郵件的效率。

在頁面不需要下拉刷新時，嘗試用下拉交互喚起其他功能是個不錯的方法。

QQ郵箱

23.啟動頁面真的可以不用是廣告

不知道從什么時候開始，打開每個APP，都要等待3到5秒，默默的被強迫看完廣告。嗯，不能忍，各大廠商為了商業(yè)利益真是想盡辦法。從點擊APP啟動圖標到APP開啟并完成數(shù)據(jù)加載，是需要一個時間過程，通常會用開啟圖片來展示，以降低用戶的等待焦慮，微信的開啟圖片就是很有名的例子。也有顯示廣告的做法，還有顯示完啟動圖片再展示廣告的，具體是哪家APP我就不說了，大家自行去體會。這些都是平衡商業(yè)目標和用戶目標最終方案，無可厚非，但僅僅從用戶體驗的角度出發(fā)，會有更好的方案。

Dosnap，中文名：多色，定位于手機攝影的分享平臺。開啟過程比德芙還要絲滑，完全感覺不到有個啟動過程，沒有啟動動畫和廣告。這是怎么做到的？其實很簡單，當APP首頁框架固定時，做一個類似主頁的圖片作為APP的啟動圖片，就這么取巧，用戶便感覺不到開啟過程，體驗比起五秒的廣告簡直好到爆炸。

dosnap多色

24.驗證碼短信也有大文章

一條驗證碼短信，有什么可設計的？你錯了，站在以用戶為中心的視角，什么都可以被設計被改善。用戶的瀏覽習慣是， 從左到右或從上到下，然后找到自己想要的內(nèi)容便停止瀏覽。下圖左側(cè)直接將公司名和驗證碼放在文本開頭，將說明性的文字放在后面，便于用戶更快的找到自己想要的信息。此時你再看看右側(cè)的驗證碼短信，對比下。

QQ&微信

25.流量很貴，省一點是一點

《人機交互與數(shù)據(jù)傳輸：關(guān)于數(shù)據(jù)加載的六種形式》提到智能加載的問題。這一條設計點的原理類似，在知乎的設置中有一欄無圖模式：在非WiFi條件下不下載圖片，如下圖。知乎：我就這么默默的幫你省流量，你會愛上我嗎？當然，如果你是土豪，請忽略這個功能。

這條功能設計出發(fā)點是幫用戶節(jié)省流量，從而為用戶創(chuàng)造價值，在保證用戶順利完成主任務的前提下，多為用戶著想，這很人性化。

知乎

26.用手勢代替點擊

手勢和點擊是移動設備中最重要的兩種交互方式，恰當?shù)氖褂脙烧?，在保證操作統(tǒng)一性的前提下給用戶帶來便利。iOS自帶相冊，在編輯狀態(tài)下，用手指在界面滑動，劃過之處的照片都會被選中，從而實現(xiàn)批量操作。

iPad中三指上滑喚起多任務頁面，五指內(nèi)縮關(guān)閉APP，都是手勢操作巧用的例子。

iOS自帶相冊

27.標簽icon不止是標簽icon

瀏覽器作為流量入口，被多家廠商重視，為了獲取更多的用戶和流量，國內(nèi)瀏覽器都在首頁放置了新聞資訊模塊，獵豹瀏覽器便是其中之一。獵豹瀏覽器底部是常規(guī)的標簽欄，我們都知道標簽欄是一種常用的導航形式，點擊某個標簽icon就會回到該標簽頁，如果用戶正處于當前標簽頁，點擊該icon便無反應。獵豹瀏覽器就將此充分利用起來，用戶在當前標簽頁點擊icon時，一是會回到首屏位置，二是會隨機更換8條新聞資訊給你，讓你在沒感興趣的新聞資訊下，可以快速換一批內(nèi)容瀏覽。

充分的利用每個頁面元素，讓其承載更多內(nèi)容，給用戶帶來驚喜。

獵豹瀏覽器

28.左右滑動切換歌曲

上面夸完了網(wǎng)易云音樂，再來夸夸QQ音樂，對于音樂類APP，播放器是操作頻次很高的部分，所以像QQ、蝦米、搜狗等產(chǎn)品都將播放器常駐在界面底部，除了點擊能進入播放器頁面外，還有播放/暫停，歌曲列表，下一首等功能，但是基本都是回不到上一首的，要回到上一首只能點進播放器頁面。

QQ音樂在常駐在底部的播放器，用左劃來啟動下一首歌，右劃來播放上一首。又是一個個活生生巧妙利用手勢操作的例子。

QQ音樂

29.沉浸感

沉浸感其實是簡約的另一種表達，將用戶需要的內(nèi)容盡情展現(xiàn)，不需要或次要的內(nèi)容刪除或隱藏，好讓用戶沉浸在當前任務中，閱讀APP就是個很好的例子。

在聽音樂時，QQ音樂提供了另一種沉浸：在播放了幾秒的歌曲后，將進度條、各種操作按鈕全都隱藏，只顯示歌手寫真和歌詞。寫真都很好看，顏控們請準備舔屏。

QQ音樂

30.更好的鎖屏方案

在手機同質(zhì)化越來越嚴重的今天，鎖屏壁紙幾乎成了個性化最后的領(lǐng)地。在手機上放一張符合自己調(diào)性的壁紙也能成為一種生活的小確幸。作為處女座的朋友摩羯座，當美美的壁紙被時間、日期等字段遮住時，內(nèi)心有一萬匹馬在奔騰。有個APP很好的解決了這個痛點，簡直是處女座和強迫癥患者的福音。

鎖屏

今天介紹了13條打動人心的APP設計細節(jié)，希望對你有所幫助。

總結(jié)：

Dan Saffer認為交互細節(jié)能夠使得系統(tǒng)更加人性化，這些細節(jié)可能是一個動效、一個提示音、一句文案或是一個簡單的手勢。如果說在系統(tǒng)層面考慮的是用戶的目標和任務，那微交互關(guān)注的則是用戶完成每個簡單任務時的行為。目標、任務、行為，每個維度都應該為目標用戶著想，進而打動人心。

#專欄作家#

鄒志楠，微信公眾號：UE修養(yǎng)，人人都是產(chǎn)品經(jīng)理專欄作家。交互設計師，專注于互聯(lián)網(wǎng)產(chǎn)品設計。

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