起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識APP設計：那些打動人心的設計點（3）
這是2017年的第10篇文章。據說總結出100個打動人心的APP設計點，就能召喚神龍，還沒看過前兩篇文章的，請補上：《那些打動人心的APP設計（1）》?《那些打動人心的APP設計（2）》。
設計師必須站在系統層面做思考，滿足某一類人的需求并提供解決方案，這需要系統化的交互方法論，包括需求分析、信息架構及流程設計等等。但當設計師專注于宏觀思考問題時，往往會忽略設計細節?；谶@種情況，Smart Design 的交互設計主管 Dan Saffer提出了“微交互”的概念。為此，他專門寫了一本書，書名叫做《微交互》。有興趣的小伙伴可以看看。
好，我們繼續梳理那些打動人心的APP設計，希望對你有幫助。
18.微信讀書的查詢功能
微信讀書是我個人很喜歡并常用的一款閱讀類APP，簡單的產品架構，優秀的文字排版，以及基于筆記和讀后感的社交屬性，都是打動我的產品點。其中不乏一些打動人心的微交互，如上篇文章中第15條。而今天講的是微信的查詢功能。
閱讀的時候會遇到一些不懂的概念或者不認識的外文，貼心的微信讀書不僅提供了詞典功能，如果要查詢的詞字典里沒有，還可以直接查詢百度百科，簡直不要太方便?？磿臅r候再也不用在閱讀軟件和瀏覽器之間來回切換了。
微信讀書
19.網易出品必屬精品
互聯網公司，注重產品體驗的，一個是騰訊，另一個則是網易，網上流傳這么一句話：網易出品必屬精品。最近新上線的網易蝸牛讀書APP，又偷偷火了一把。不過今天要講的是另一個網易出品：有道詞典。
常規的APP都將搜索欄放在頁面頂部，這樣會遇到一個問題，不利于單手操作。有道詞典在首頁右下角放置了一個搜索icon，讓用戶在進行翻譯任務時，單手操作便可完成。
有道詞典
20.撩人的小妖精：小紅書
小紅書成功了，這是個讓無數妹紙種草剁手的地方，小紅書為了伺候好這幫小公主，可謂處處用心。光一個點贊，就給做出花來了。
每次點贊，提示的文案都不同，而且每句都讓人忍不住再點一次，誰讓你不要臉的這么夸我，哈哈。
小紅書
21.音樂APP中的文藝青年：網易云音樂
網易用個性化的推薦和豐富的社區內容，在音樂市場殺出了一條血路，讓其他老牌音樂APP望塵莫及。除了個性化的推薦、社區，優秀的產品交互也是不可或缺的亮點。
網絡不好或斷網狀態，和網絡正常，這兩種情況打開APP，默認的標簽頁是不一樣的。斷網時會直接前往本地的“我的音樂”，網絡正常則是“發現音樂”頁。沒網的時候發現個毛線音樂，只能是聽本地音樂了，這個細節給滿分。
網易云音樂
22.再次提名的QQ郵箱
該系列文章第一條夸的就是騰訊出品的郵箱，今天繼續夸一夸。查看郵件之后，用戶有幾條路徑：回復郵件，轉發郵件，返回郵件列表等。QQ郵箱，在閱讀郵件頁下滑，便可直接回復郵件，提高了上班族處理郵件的效率。
在頁面不需要下拉刷新時，嘗試用下拉交互喚起其他功能是個不錯的方法。
QQ郵箱
23.啟動頁面真的可以不用是廣告
不知道從什么時候開始，打開每個APP，都要等待3到5秒，默默的被強迫看完廣告。嗯，不能忍，各大廠商為了商業利益真是想盡辦法。從點擊APP啟動圖標到APP開啟并完成數據加載，是需要一個時間過程，通常會用開啟圖片來展示，以降低用戶的等待焦慮，微信的開啟圖片就是很有名的例子。也有顯示廣告的做法，還有顯示完啟動圖片再展示廣告的，具體是哪家APP我就不說了，大家自行去體會。這些都是平衡商業目標和用戶目標最終方案，無可厚非，但僅僅從用戶體驗的角度出發，會有更好的方案。
Dosnap，中文名：多色，定位于手機攝影的分享平臺。開啟過程比德芙還要絲滑，完全感覺不到有個啟動過程，沒有啟動動畫和廣告。這是怎么做到的？其實很簡單，當APP首頁框架固定時，做一個類似主頁的圖片作為APP的啟動圖片，就這么取巧，用戶便感覺不到開啟過程，體驗比起五秒的廣告簡直好到爆炸。
dosnap多色
24.驗證碼短信也有大文章
一條驗證碼短信，有什么可設計的？你錯了，站在以用戶為中心的視角，什么都可以被設計被改善。用戶的瀏覽習慣是， 從左到右或從上到下，然后找到自己想要的內容便停止瀏覽。下圖左側直接將公司名和驗證碼放在文本開頭，將說明性的文字放在后面，便于用戶更快的找到自己想要的信息。此時你再看看右側的驗證碼短信，對比下。
QQ&微信
25.流量很貴，省一點是一點
《人機交互與數據傳輸：關于數據加載的六種形式》提到智能加載的問題。這一條設計點的原理類似，在知乎的設置中有一欄無圖模式：在非WiFi條件下不下載圖片，如下圖。知乎：我就這么默默的幫你省流量，你會愛上我嗎？當然，如果你是土豪，請忽略這個功能。
這條功能設計出發點是幫用戶節省流量，從而為用戶創造價值，在保證用戶順利完成主任務的前提下，多為用戶著想，這很人性化。
知乎
26.用手勢代替點擊
手勢和點擊是移動設備中最重要的兩種交互方式，恰當的使用兩者，在保證操作統一性的前提下給用戶帶來便利。iOS自帶相冊，在編輯狀態下，用手指在界面滑動，劃過之處的照片都會被選中，從而實現批量操作。
iPad中三指上滑喚起多任務頁面，五指內縮關閉APP，都是手勢操作巧用的例子。
iOS自帶相冊
27.標簽icon不止是標簽icon
瀏覽器作為流量入口，被多家廠商重視，為了獲取更多的用戶和流量，國內瀏覽器都在首頁放置了新聞資訊模塊，獵豹瀏覽器便是其中之一。獵豹瀏覽器底部是常規的標簽欄，我們都知道標簽欄是一種常用的導航形式，點擊某個標簽icon就會回到該標簽頁，如果用戶正處于當前標簽頁，點擊該icon便無反應。獵豹瀏覽器就將此充分利用起來，用戶在當前標簽頁點擊icon時，一是會回到首屏位置，二是會隨機更換8條新聞資訊給你，讓你在沒感興趣的新聞資訊下，可以快速換一批內容瀏覽。
充分的利用每個頁面元素，讓其承載更多內容，給用戶帶來驚喜。
獵豹瀏覽器
28.左右滑動切換歌曲
上面夸完了網易云音樂，再來夸夸QQ音樂，對于音樂類APP，播放器是操作頻次很高的部分，所以像QQ、蝦米、搜狗等產品都將播放器常駐在界面底部，除了點擊能進入播放器頁面外，還有播放/暫停，歌曲列表，下一首等功能，但是基本都是回不到上一首的，要回到上一首只能點進播放器頁面。
QQ音樂在常駐在底部的播放器，用左劃來啟動下一首歌，右劃來播放上一首。又是一個個活生生巧妙利用手勢操作的例子。
QQ音樂
29.沉浸感
沉浸感其實是簡約的另一種表達，將用戶需要的內容盡情展現，不需要或次要的內容刪除或隱藏，好讓用戶沉浸在當前任務中，閱讀APP就是個很好的例子。
在聽音樂時，QQ音樂提供了另一種沉浸：在播放了幾秒的歌曲后，將進度條、各種操作按鈕全都隱藏，只顯示歌手寫真和歌詞。寫真都很好看，顏控們請準備舔屏。
QQ音樂
30.更好的鎖屏方案
在手機同質化越來越嚴重的今天，鎖屏壁紙幾乎成了個性化最后的領地。在手機上放一張符合自己調性的壁紙也能成為一種生活的小確幸。作為處女座的朋友摩羯座，當美美的壁紙被時間、日期等字段遮住時，內心有一萬匹馬在奔騰。有個APP很好的解決了這個痛點，簡直是處女座和強迫癥患者的福音。
鎖屏
今天介紹了13條打動人心的APP設計細節，希望對你有所幫助。
總結：
Dan Saffer認為交互細節能夠使得系統更加人性化，這些細節可能是一個動效、一個提示音、一句文案或是一個簡單的手勢。如果說在系統層面考慮的是用戶的目標和任務，那微交互關注的則是用戶完成每個簡單任務時的行為。目標、任務、行為，每個維度都應該為目標用戶著想，進而打動人心。
#專欄作家#
鄒志楠，微信公眾號：UE修養，人人都是產品經理專欄作家。交互設計師，專注于互聯網產品設計。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
受教！
網易云音樂現在的切換上下首和QQ音樂一樣，也可以左右滑動
個人認為，微信驗證碼的設置還是從安全角度出發。
就像你說的，用戶從左到右、從上到下的瀏覽習慣，結合獲取到想要的信息就停止閱讀的習慣，將驗證碼放到短信最末尾，相當于把驗證碼安全須知重點強調了。
而QQ的驗證碼設置，應該就是從提升用戶體驗去考慮的。
角度不同，各有優劣！
??
同感
不錯，因為兩方各接觸的群體不一樣所以處理的方式也會不一樣
好想知道最后一個ＡＰＰ的名字叫什么
鎖屏
驗證碼補充一下，安卓系統權限允許讀取短信，許多收發驗證碼的功能都會自動讀取驗證碼并填寫，甚至直接下一步；另外如錘子等安卓深度定制系統還會判斷驗證碼，并將驗證碼數字顯示在狀態欄
另外，第26，iPad應該是四指上滑喚起多任務吧
以及，第28，滑動切歌網易云也這樣了
滑動切歌這個功能很是隱藏，看了文章才知道有這個功能。
我想知道最后一個app叫啥？
cutisan
文章寫的跟春晚似的，百花齊放
網易蝸牛讀書的思路挺有新意，但是細致的用戶體驗確實不太好