海淘科技今天為大家介紹一下《2018年APP界面設(shè)計(jì)指南》。
2018年互聯(lián)網(wǎng)方面提到移動5G的研發(fā)、開發(fā),移動端應(yīng)用已經(jīng)是流動方向,怎么移動端應(yīng)用設(shè)計(jì)是在所避免不了的,移動端應(yīng)用設(shè)計(jì)的一些指導(dǎo)性原則,往給到幫助!
減少認(rèn)知負(fù)擔(dān)用戶與應(yīng)用交互時(shí)的阻力和困惑越少,應(yīng)用被繼續(xù)使用的機(jī)會就越大。優(yōu)化交互流程了解用戶如何與應(yīng)用交互是優(yōu)化的必要條件。 作為設(shè)計(jì)師和開發(fā)人員,我們應(yīng)該在整個(gè)交互流程中理解用戶的目標(biāo)。這將幫助我們確定任務(wù)完成過程中最常見的問題。這里有幾種比較流行的優(yōu)化交互流程的方法:拆分任務(wù)。如果一個(gè)在用戶端的任務(wù)包含很多步驟和操作,最好是把這個(gè)任務(wù)拆分成一定數(shù)量的子任務(wù)。一個(gè)很好的例子是在電商購物應(yīng)用中的漸進(jìn)結(jié)賬流程,你能夠從拆分出來的步驟數(shù)中清楚自己的每一步操作。
通過限制用戶端所需要的操作數(shù)量,可以提升用戶對流程的理解。充分利用已經(jīng)掌握的用戶信息。通過GPS精準(zhǔn)定位這一功能,用戶只需要選擇乘車的位置就可以叫車,例如下圖。
讓每一步銜接自然。當(dāng)任務(wù)需要用戶完成許多步驟時(shí), 通過清楚顯示下一步的操作來幫助用戶。
這個(gè)界面用作與指引用戶的操作。每一屏優(yōu)先完成一個(gè)主要功能。通過遵循這個(gè)簡單規(guī)則, 可以將界面變得更易于學(xué)習(xí)和使用。使用視覺權(quán)重對重要元素進(jìn)行優(yōu)化 (例如加大核心按鈕的對比度)
核心按鈕要用主色調(diào)顏色突出
提示:想要減少用戶操作過程中某一個(gè)界面遇到的混亂 ——那么就只顯示當(dāng)前步驟中需要的內(nèi)容。例如 ,當(dāng)用戶做出選擇時(shí),只需要顯示當(dāng)前用戶需要的選項(xiàng), 然后在下一個(gè)界面中展示細(xì)節(jié)。
上圖是一款叫做Duolingo的iOS應(yīng)用中,逐步深入的界面 (一步一步的展示更多信息)
清晰的導(dǎo)航用戶如果很難找到想要的,就算界面再漂亮,內(nèi)容再充實(shí),也變得沒有意義了。一些導(dǎo)航的規(guī)則:- 不要隱藏。 避免隱藏導(dǎo)航,如手勢操作因?yàn)榇蠖鄶?shù)用戶都很難找到它。
一致性
開發(fā)者經(jīng)常在一些個(gè)別的頁面隱藏菜單。不要這樣做,因?yàn)樗芸赡軙屇愕挠脩舾械嚼Щ蟆?
顯示當(dāng)前位置
沒有告知用戶當(dāng)前位置是許多應(yīng)用的常見問題?!?span style="line-height:1.5;">我在哪兒?”這是一個(gè)應(yīng)用需要告知用戶的最基本的問題之一。提示:最好使用標(biāo)準(zhǔn)的導(dǎo)航模式。比如標(biāo)簽欄(iOS)和抽屜導(dǎo)航(Android)。大多數(shù)用戶都熟悉這兩種導(dǎo)航模式。如果一個(gè)簡單的解決方案有效,就不需要特立獨(dú)行。抽屜式導(dǎo)航的切換可以直接點(diǎn)擊,如果Tab放在上方可以直接滑動切換。
結(jié)合手機(jī)自身特點(diǎn)手機(jī)不是臺式機(jī)的縮小版,它們有自身的細(xì)微差別和限制。
APP界面設(shè)計(jì)元素要明確的表達(dá)出哪個(gè)元素是可以交互的,哪個(gè)元素是不可操作的。與桌面不同,用戶可以使用鼠標(biāo)懸停效果來判斷某個(gè)元素是否可以操作,而移動用戶只能通過點(diǎn)擊某個(gè)元素來確定哪些元素是可以被操作的。好的APP界面設(shè)計(jì)是可以讓用戶自己能夠正確預(yù)判。
操作區(qū)域要友好移動界面中設(shè)計(jì)可操作的元素時(shí),為了讓用戶可以很方便的點(diǎn)擊,關(guān)鍵的點(diǎn)是要把點(diǎn)擊目標(biāo)設(shè)計(jì)的足夠大。根據(jù)經(jīng)驗(yàn),一般有效的觸控面積是7-10毫米。這個(gè)區(qū)域可以讓用戶在點(diǎn)擊目標(biāo)可以看到目標(biāo)的邊緣。用戶能夠知道他們是否準(zhǔn)確的點(diǎn)擊了目標(biāo)。另外,要確保元素之間的位置不要太相近——應(yīng)該在點(diǎn)擊目標(biāo)之間設(shè)置適當(dāng)?shù)拈g距,以防止誤觸。
考慮拇指空間為拇指設(shè)計(jì)不僅是為了把目標(biāo)區(qū)域設(shè)計(jì)的足夠大,同時(shí)也要考慮到設(shè)備的持有方式。雖然拇指可以在屏幕中的大多數(shù)區(qū)域操作,但是只有三分之一屏幕是真正毫不費(fèi)力的區(qū)域。這個(gè)區(qū)域被稱為拇指舒適區(qū)。其他區(qū)域需要手指伸展甚至改變持握方式才能操作。基于手的持握方式(左、右或者雙手),可以看到移動設(shè)備中的安全區(qū)域(在下圖中的綠色區(qū)域)。
越大的屏幕,越不容易操作。
根據(jù) Scott Hurff的研究,更多人們慣用右手的拇指區(qū)域,為移動端應(yīng)用設(shè)計(jì)時(shí)需要考慮所有不同區(qū)域:- 綠色區(qū)域是導(dǎo)航選項(xiàng)或者有頻繁交互操作(如行動指引按鈕)的最佳位置。
“分享”按鈕是在綠色拇指區(qū)域。
- 紅色區(qū)域是潛在危險(xiǎn)選項(xiàng)的最佳位置(例如刪除按鈕)。這樣用戶不容易會觸及到此按鈕,不會誤刪除。
在難到達(dá)的紅色區(qū)域放置破壞性操作(如刪除和抹掉),因?yàn)椴幌M脩舭l(fā)生誤觸。
中斷設(shè)計(jì)我們生活在一個(gè)中斷的世界里??傆心敲匆恍┦虑榭偸窃噲D分散我們的注意力,把我們的注意力轉(zhuǎn)移到別的地方。例如,用戶可能在等火車的時(shí)間里使用應(yīng)用。對于移動應(yīng)用場景的考慮是至關(guān)重要的。讓應(yīng)用在用戶中斷使用后能夠很容易的恢復(fù)到之前的狀態(tài)。Twitter是中斷設(shè)計(jì)的一個(gè)很好的例子。應(yīng)用的通知列表顯示了所有最近的通知。只要用戶停留在這個(gè)頁面,應(yīng)用就不會自動更新列表——它只是在列表的頂部顯示一個(gè)狀態(tài)“X 新通知”。這允許用戶在一段時(shí)間后重新使用應(yīng)用時(shí)不會丟失當(dāng)前的位置。
努力創(chuàng)造多終端一致性體驗(yàn)移動應(yīng)用不是存在于真空中。例如,移動用戶通常用瀏覽購物網(wǎng)站,然后切換到臺式機(jī)上去購買。體驗(yàn)上的轉(zhuǎn)變要讓用戶感知不到。
Spotify 能夠做到多終端無縫體驗(yàn)。你可以在Mac上設(shè)置一個(gè)播放列表,你的iPhone上馬上就可以使用它。當(dāng)你在設(shè)備之間切換時(shí),應(yīng)用會記住你停在哪里。
直觀的手勢只在應(yīng)用中使用最自然的手勢。為何如此?因?yàn)槭謩菔请[藏的控件。在用戶界面中使用手勢的最大缺點(diǎn)是學(xué)習(xí)曲線。每次用手勢代替可見控件時(shí),應(yīng)用的學(xué)習(xí)曲線就會上升。這是因?yàn)槭謩菥哂休^低的可發(fā)現(xiàn)性——它們總是隱藏的,人們需要能夠首先識別這些選項(xiàng)。這就是為什么只使用被廣泛接受的手勢(用戶希望在你的應(yīng)用中使用)的原因。一個(gè)好的手勢例子就是為微博APP可以進(jìn)行刷新,得到新的微博信息。
使用框架界面讓應(yīng)用能夠快速顯示應(yīng)用應(yīng)該響應(yīng)快速且靈敏,但是不可避免的會遇到一些特殊情況。例如,非常慢的網(wǎng)速。如果不能縮短加載時(shí)間,至少也要讓等待不那么乏味。可以先加載信息的框架結(jié)構(gòu)(即臨時(shí)信息容器)框架界面是一個(gè)頁面的空白版本,其中信息是逐漸加載的。不同于加載動畫,它將用戶的注意力集中在數(shù)據(jù)加載本身,框架界面則將用戶的注意力集中在進(jìn)度上而不是等待時(shí)間上。
Slack應(yīng)用的框架界面
關(guān)注初次使用體驗(yàn)就像一個(gè)人一樣,應(yīng)用不會有第二次機(jī)會給用戶留下好的第一印象。如果不把第一印象做好,我敢打賭(80%的概率),用戶不會再次使用了。
必要的引導(dǎo)對于引導(dǎo)規(guī)則來說——它不應(yīng)該是通用性的,而是應(yīng)該有利于人們?nèi)绾稳ナ褂眠@款應(yīng)用。設(shè)計(jì)者應(yīng)該以引導(dǎo)作為一次契機(jī),為新手用戶開辟綠色通道。還有一點(diǎn),引導(dǎo)應(yīng)該只有在初次使用時(shí)才會出現(xiàn)。
空頁面設(shè)計(jì)空狀態(tài)(或零狀態(tài))是未發(fā)生任何事情的狀態(tài)。這種狀態(tài)不應(yīng)該是空白的界面(或者像許多設(shè)計(jì)師所說的那樣是死的),它應(yīng)該能夠?yàn)橛脩籼峁酉聛聿僮鞯闹笇?dǎo)。以Spotify的錯誤狀態(tài)頁面為例。它不能幫助用戶理解到底發(fā)生了什么,也不能幫助用戶找到解決方案:“我能做些什么呢?”
APP界面設(shè)計(jì)當(dāng)應(yīng)用的空狀態(tài)顯示了一條簡單有用的錯誤提示。要簡單、禮貌、有指導(dǎo)性的表明:- 出了什么錯,可能的原因是什么。- 用戶想要解決這個(gè)問題需要怎么做。
使用功能動畫改善交互體驗(yàn)動畫在界面中解決了許多功能問題,同時(shí)使得界面更有活力和靈敏。
顯示系統(tǒng)狀態(tài)當(dāng)應(yīng)用正忙著處理某個(gè)操作時(shí),應(yīng)該讓用戶知道當(dāng)前的狀態(tài)而不是卡死。視覺上的變化讓用戶對應(yīng)用有一種掌控感。
這個(gè)應(yīng)用通過動畫告知用戶正在加載內(nèi)容。導(dǎo)航的過渡動畫是描述狀態(tài)轉(zhuǎn)換的最佳工具。它幫助用戶理解頁面布局的變化,點(diǎn)擊后的變化,以及如何在我們需要的時(shí)候開始這樣的改變。
已于讓用戶更好的理解功能以及功能的使用,最好使用動畫來有效的引導(dǎo)用戶。視覺反饋在現(xiàn)實(shí)世界中,對象會響應(yīng)我們的交互。在UI控件中,人們也期待有類似的的響應(yīng)能力。良好的視覺反饋使得交互體驗(yàn)變得非常舒適。所有交互元素(如按鈕)都應(yīng)該提供完美的視覺反饋。
按鈕響應(yīng)了用戶的點(diǎn)擊。
人性化體驗(yàn)個(gè)性化個(gè)性化是當(dāng)今應(yīng)用最關(guān)鍵的部分之一了。這是一個(gè)與用戶溝通機(jī)會,為每個(gè)用戶提供他們所需要的信息,讓他們感覺到應(yīng)用是為他們量身定做的。星巴克就是一個(gè)很好的例子。應(yīng)用使用用戶提供的信息(例如,他們經(jīng)常點(diǎn)的咖啡)來提供特別的優(yōu)惠。令人愉快的動畫不同于提高用戶界面清晰度的功能動畫不同,令人愉快的動畫是用來使界面看起來更加人性化。這種類型的動畫能夠讓用戶感受到設(shè)計(jì)者的用心。一些令人愉快的小細(xì)節(jié)是應(yīng)用與用戶建立情感聯(lián)系的機(jī)會。
圖片來源: Dribbble
推送的價(jià)值煩人的通知是用戶卸載應(yīng)用的首要原因(71%的受訪者).
來源: Appiterate Survey
不要僅僅因?yàn)槟憧梢园l(fā)送推送通知——每條通知都應(yīng)該是對用戶來說有價(jià)值并且及時(shí)的。下面是在設(shè)計(jì)推送通知時(shí)需要考慮的一些事項(xiàng):
推送通知,信息多的情況下,次數(shù)可以減少,避免用戶反感,可以采用信息集合的方式,例如騰訊新聞,每次推送都是4條;
推送同時(shí)時(shí)間也是一個(gè)重點(diǎn),推送通知的最佳時(shí)間應(yīng)該是應(yīng)用使用的高峰時(shí)間——在下午的6點(diǎn)到10點(diǎn)之間。
可以多樣式渠道的向用戶推送信息,例如微信公眾號或其他其他。
優(yōu)秀的設(shè)計(jì)當(dāng)是無形的,能夠get用戶痛點(diǎn),使得用戶在使用此APP時(shí)專注于自己的目標(biāo)而不是界面。作為一名設(shè)計(jì)師,應(yīng)該努力去設(shè)計(jì)無形的界面,因?yàn)檫@樣的界面既滿足了用戶的需要,也提供了良好的用戶體驗(yàn)。APP設(shè)計(jì)師在設(shè)計(jì)時(shí)要讓自己的想法與指南相融洽的,設(shè)計(jì)出來的東西,才會更好。
以上是上海APP開發(fā)公司——海淘科技為你提供的《2018年APP界面設(shè)計(jì)指南》,更多相關(guān)資訊,可點(diǎn)擊APP界面設(shè)計(jì)資訊。