APP設(shè)計(jì)其實(shí)是一門非常精細(xì)的設(shè)計(jì)功能。比web網(wǎng)頁設(shè)計(jì)還需要更加的專注和費(fèi)時(shí)間。

一款優(yōu)秀的APP UI設(shè)計(jì)，在于APP設(shè)計(jì)細(xì)節(jié)的把握和相關(guān)移動(dòng)交互效果的展示。

今天25學(xué)堂就跟大家來聊一聊APP交互設(shè)計(jì)的五個(gè)細(xì)節(jié)設(shè)計(jì)和思考。 從這幾個(gè)方面也間接的體現(xiàn)出移動(dòng)APP設(shè)計(jì)師的功力。

第一個(gè)APP交互設(shè)計(jì)細(xì)節(jié)：隱性導(dǎo)航設(shè)計(jì)和布局

因?yàn)槲覀冡槍?duì)的移動(dòng)端界面，任何一點(diǎn)空間都是寸土寸金。所以就出現(xiàn)了隱性導(dǎo)航或者是隱藏菜單。比如常見的隱性導(dǎo)航就有：

1、下拉刷新

? ? ? ? 最流行的“隱性導(dǎo)航”要數(shù)“下拉刷新”了，這個(gè)最早出現(xiàn)在twitter客戶端的下拉更新timeline功能迅速在此類軟件中流行，iOS下網(wǎng)頁版的gmail，新浪微博，甚至網(wǎng)易新聞，都使用了這種設(shè)計(jì)。

2、左右滑動(dòng)

? ? ? ? 讓人印象深刻的還有UC瀏覽器的前進(jìn)后退功能，后退只要拇指向右滑動(dòng)，前進(jìn)只要向左滑動(dòng)手指即可，不必尋找前進(jìn)后退按鈕，這種設(shè)定下瀏覽器全屏也不會(huì)影響操作的流暢性。

類似的設(shè)計(jì)有很多，在yReader下左右滑動(dòng)是切換前一篇后一篇文章，在iBooks、QQ閱讀的電子書閱讀軟件左右滑動(dòng)是前后翻頁。android下的QQ客戶端的當(dāng)前會(huì)話、好友和群組分別是三個(gè)標(biāo)簽，左右滑動(dòng)可以從這三個(gè)功能區(qū)中迅速切換。

當(dāng)然這里還有更細(xì)的閱讀和體驗(yàn)：

APP設(shè)計(jì)必知的五種常用APP單手操作用法

移動(dòng)APP交互創(chuàng)新設(shè)計(jì)技巧：手勢流的運(yùn)用

第二個(gè)APP交互設(shè)計(jì)細(xì)節(jié)：“真正的” 幫助用戶排解的焦慮感？

常用的策略有：指示器、進(jìn)度條、框架讀取和動(dòng)態(tài)提示等。

最開始，我們經(jīng)常會(huì)為了讓用戶知曉元素正在下載中，我們添加了旋轉(zhuǎn)式讀取指示器，來展示正在從服務(wù)器處接收。用戶會(huì)在應(yīng)用中發(fā)現(xiàn)旋轉(zhuǎn)的指示。

可結(jié)果呢？用戶給予了我們?nèi)缦碌姆答仯?

“感覺等待耗時(shí)太長了，讀取、刷新的速度太慢——感覺沒有上一版本快””

正像上面說的那樣，讀取指示器容易讓用戶感覺時(shí)間變“慢”，因此應(yīng)用等待耗時(shí)相對(duì)的就“長”了。

而且從設(shè)計(jì)的層面上講，這么設(shè)計(jì)僅僅聚焦于“指示器”，而不是“程序的加載”。用戶得到的是“等待”，卻看不到“程序加載過程”。

經(jīng)歷了這番思考后，設(shè)計(jì)思路明晰了起來，我們應(yīng)該向用戶展示一步一步讀取的過程，而不應(yīng)該省事的一個(gè)進(jìn)度條了事，讓用戶陷入無盡的等待中。

這里可以閱讀《3種常見的移動(dòng)APP頁面加載設(shè)計(jì)方案優(yōu)缺點(diǎn)》和《八種APP啟動(dòng)界面的Loading進(jìn)度條設(shè)計(jì)動(dòng)效方案》

上面是方法一，下面的方法二也不錯(cuò)，叫做構(gòu)架讀取。我們?cè)赑olar使用了這種技術(shù)，因?yàn)檫M(jìn)度條雖然比指示器先進(jìn)，但是其實(shí)本質(zhì)都是一樣，只不過進(jìn)度條更具有某種“欺騙性”，而構(gòu)架讀取不一樣，讀到了什么地方，就顯示出什么地方，所見即所得，能夠大大的增強(qiáng)用戶的信任感。漸進(jìn)式的數(shù)據(jù)讀取，最后達(dá)成完整界面的傳遞。

優(yōu)先等級(jí)：框架讀取 》進(jìn)度條 》指示器 》 提示

第三個(gè)APP交互設(shè)計(jì)細(xì)節(jié)：別妨礙用戶操作

不要為了一些目的去妨礙用戶的體驗(yàn)。用戶的力量不可抵擋，他們是上帝。

巧妙的引導(dǎo)，才是正確的交互操作。

這就是引導(dǎo)，這就是不妨礙用戶，這就是良好的用戶體驗(yàn)。合理分析用戶的心態(tài)，為他們著想，才能更精確的命中用戶需求。我們從“找朋友”這個(gè)功能上找到了突破點(diǎn)，利用這種發(fā)，重設(shè)計(jì)了很多功能。發(fā)現(xiàn) 等功能上做文章和交互。

一切都得利用 收集和放松 的狀態(tài)來設(shè)計(jì)APP。 ?也就是說我們策劃的APP欄目 要合理、歸類陳列的技巧也是設(shè)計(jì)師必備的一項(xiàng)技能。

值得學(xué)習(xí)的APP設(shè)計(jì)案例：APP交互設(shè)計(jì)做的一級(jí)棒APP案例—MONO貓弄

第四個(gè)APP交互設(shè)計(jì)細(xì)節(jié)：“及時(shí)”的教學(xué)

一些移動(dòng)APP在打開時(shí)，就在界面最頂端彈出新手教學(xué)，力圖圖文并茂的展示，但是用戶缺少實(shí)際操作，并不知道這么多手勢中，最常用的是哪個(gè)。因此用戶學(xué)起來“全而不精”。

也是屬于引導(dǎo)的范疇。只是從明的一面來引導(dǎo)用戶參加APP體驗(yàn)之旅。

事實(shí)是，90%的人都會(huì)跳過此環(huán)節(jié)，即便沒有跳過，學(xué)過的東西馬上也會(huì)忘記。問題出在何處？所謂“實(shí)踐出真知”，沒有實(shí)踐，教用戶“紙上談兵”你覺得用戶能掌握嗎？而且用戶的心理是，想盡快的操作應(yīng)用，這一點(diǎn)也被忽視了。界面的模樣都沒看到，便教用戶怎么去進(jìn)行界面操作，未免太荒謬。

所以這種情況下，提前教學(xué)是不好的，教學(xué)要在用戶最需要的情況下出現(xiàn)，這樣才有效。Josh?Clark稱這種方法為“及時(shí)教學(xué)”，這是很靈活的辦法。

將繁復(fù)的指導(dǎo)隱藏、分解，在用戶需要被指導(dǎo)時(shí)出現(xiàn)，用戶看完指導(dǎo)立馬實(shí)踐，這樣的教學(xué)效果絕對(duì)好。用戶需要時(shí)，滿足他們的需要。用戶不需要時(shí)，別去煩他們。

第五個(gè)APP交互設(shè)計(jì)細(xì)節(jié)：確定好一條用戶故事來設(shè)計(jì)，讓你不會(huì)迷路和迷茫。

在開始視覺設(shè)計(jì)之前確定出完整的一套用戶故事。抑制住自己直接跳入設(shè)計(jì)的沖動(dòng)可以節(jié)省時(shí)間，避免不必要的頭痛和無用功。

對(duì)于每個(gè)用戶故事，看看是否能繼續(xù)細(xì)化成更具體的故事。長篇大論適合于從宏觀角度概括所需功能，但是細(xì)枝末節(jié)的地方也不能忽略。在早期深入細(xì)節(jié)，從一開始就解決實(shí)用性問題。

不要把設(shè)計(jì)元素放到?jīng)]有對(duì)應(yīng)用戶故事的界面上。對(duì)每個(gè)元素的內(nèi)容和產(chǎn)生原因進(jìn)行記錄可以讓條理更清晰，在向開發(fā)團(tuán)隊(duì)移交時(shí)會(huì)更加順利。

APP設(shè)計(jì)師必須了解整個(gè)APP的使用場景和用戶的故事，這樣才能設(shè)計(jì)出合理的移動(dòng)APP設(shè)計(jì)作品。你自己都走不通，用戶也會(huì)走不通的。

其實(shí)設(shè)計(jì)APP界面，也是一次設(shè)計(jì)師自己進(jìn)入角色進(jìn)行游戲的過程。