html5模版網(m.suosuyi.cn)的小編打算這周分享一些比較適合初學者的APP界面設計教程。也算是對之前關于APP界面設計做一次階段性的總結。
今天要跟大家來分享的關于手機移動端APP界面設計之引導設計篇。
之前有聊過App引導頁最佳設計之5個UI界面設計步驟
1、移動APP界面設計分享:文字閱讀體驗設計篇
2、APP界面設計教程:移動界面設計尺寸篇
3、APP圖標設計教程之APP圖標設計素材篇
如今很多手機移動端APP應用都會在初次加載時提供“教練畫板”形式的進行新手引導或教程任務(畫著各種使用說明的半透明浮層)。此類引導有時確實可以幫助用戶以正確的方式使用產品。但是有時候又覺得沒有這個必要。
那如何來定達到合理的APP引導設計呢?
手機app引導設計一:引導語句必須簡短,聚焦在最重要的任務上
因為在移動情境中,人機會話時間更加有限,注意力更容易分散。而人類的短期記憶難以保存太多的內容,信息在20秒左右的時間內就會開始被遺忘。因此,相比于在一個浮層上一次性展示UI當中每個地方的說明,不如一次聚焦在一兩個上面。減少說明的焦點可以使用戶將注意力放在最重要的說明上。一次展示的說明越少,用戶越有可能去閱讀并記憶下來。
同時交互設計師也要學會挑選合適的時機,為用戶提供最重要的引導提示,一次一個,使他們更容易理解和明白。
也要避免接連不斷的展示引導信息,這樣不僅會產生短期加重記憶方面的問題,而且會讓新用戶覺得你的應用過于復雜,望而生畏。
如果需要展示引導的文字太多,可以概括分成幾個步驟來引導,簡化這些文字。
手機app引導設計二:盡量使用圖形元素
我們都知道,圖形對于文字更易于記憶和了解。最合理的方式是:
“恰當的圖形元素” +簡短的文字”,并整合到一個展示層面上。
這種方式即有利于用戶閱讀,也可以使多步驟的流程更直觀、易懂、易記憶。值得推薦。
另外,我們采用的圖形盡量簡單易懂,形象具體的。避免讓人產生歧義的圖標。反倒會誤導我們的移動用戶,損失設計交互體驗。
手機app引導設計三:切記與實際UI界面混淆
必須使引導提示在外觀上與實際界面元素有著明確的區分,否則引導提示就是在干擾實際界面,用戶也會迷茫,甚至會把教學內容當做功能界面,試著與其交互。
要使提示內容與普通的界面元素區分開來,最簡單的方式是使用不同的字體。我們通常可以見到很多手寫字體風格的提示,確實可以與實際UI當中的文字產生鮮明的對比。
手機移動端APP界面設計之引導設計總結:
當我們在進行手機移動APP應用的引導設計的時候,一個重要的原則就是盡可能的保持簡短。
聚焦于當前界面中最主要的交互任務,以圖文并茂的方式提供最易掃描的說明內容,避免一連串的提示。同時,還要確保你的提示內容不會與應用的實際UI混淆在一起。
以上這些手機移動APP引導設計觀點和內容,部分摘自于http://beforweb.com/的《關于移動應用的新手引導設計》