H5 App設計者需要注意的問題

標籤：動畫設計   輕量級   狀態   https   指示   人物   使用者體驗   網路不通   tle   

我們通常在做H5 APP設計的過程中，遇到很多看似很小，且很容易被忽略的問題，正是這些小問題，一次次的撩撥使用者的耐心，讓使用者對你的APP心生怨念。現在WeX5君嘔血為大家整理出H5 APP設計的21條禁忌，希望與H5 APP設計者的您共勉。

 

1. 不要在沒有流程圖之就前開始設計或者畫線框圖

 

即便一個簡單的H5 APP也要有一個思慮周全的流程圖，以確保在H5 APP有合乎邏輯的、合理的導航結構。跳過流程圖直接進進入開發會讓開發變得複雜、不可控，很容易讓使用者迷茫，最後選擇關掉或者卸載你的 App。

 

2. 分工要明確不要忽略開發預算

 

一個計劃好的H5 App可能有一個搜尋方塊，設計師預想的是一個產生即時結果的鍵入搜尋，但設計師不能是做這個重大決定的唯一決策人。

 

3. 不要隨意使用介紹動畫

 

如果你打算使用介紹動畫，那要讓動畫時間儘可能短，設計儘可能精細以及足夠吸引人，值得使用者花費時間等待。

 

App 載入過程中會先展現圖片，再過渡至動畫。要確保這個過度是平滑的，貼切自然的。有的 App 從載入圖片過渡至介紹動畫設計的非常蹩腳，這就很無趣了。

 

4. 別讓使用者空等

 

App 載入時間過長很容易讓使用者以為出現了什麼故障，也會帶來糟糕的使用者體驗。App 載入的時候不要讓使用者看到空白的螢幕，使用載入指示條或者小動畫讓使用者知道 App 處於正常運行當中。

 

5、菜單層次太深

 

功能表項目以5~7個為宜，如果有二級菜單，就要注意合理的菜單分類，不能有太多層級的菜單，否則很難預期，也很難找到，尋找和返回都會變得很麻煩。

 

6、互動流程分支太多

 

做互動的時候一定要有一個任務流程的概念貫穿始終，使用者是為了完成某個任務而使用軟體的，互動設計師除了關注介面元素、跳轉邏輯和互動反饋之外，還要關注使用者任務，分得清主要任務和次要人物，給主要任務一個暢通無阻的清晰流程，不要給予太多可能的分支，幹擾主要流程。

 

7、相關的選項離的很遠

 

相關選項一定要具有操作上的延續性，如果手機上相關選選離得很遠的話，使用者一是容易迷失，找不到下一步操作，二是需要移動手指，到螢幕另一端觸發操作。

 

8、一次載入太多的資料

 

如果你的應用不能合理的協助使用者節約流量、電量，提升瀏覽速度和瀏覽體驗，保證應用的穩定效能，就不要談什麼使用者體驗。

 

9、把所有的操作都暴露出來

 

H5 APP產品互動設計要經曆縮減、隱藏、附加、組織的過程，千萬不要妄圖把什麼功能、什麼操作都暴露出來，以彰顯強大。你需要把自己應用的所有功能所有操作做個優先順序設定，那些常用的20%的功能，放在介面的主要位置上，其他80%的操作，放在次要位置或合理歸類組織後，隱藏起來就可以了。

 

10、沒有空資料介面設計

 

我們在做設計的時候，往往是提供理想化的情境，使用者都已經進來了，我們怎麼玩。但是，往往應用剛推出的時候，是沒有使用者的，甚至當應用有了一定使用者基礎的時候，新進來的使用者開啟應用的時候，應用仍然可能是一種沒有資料的狀態，再或者當使用者清楚了全部資料，這三種情況下，使用者都可能遇到空資料的介面。

 

11、使用者引導的濫用

 

如果是通用的功能、非重點的模組，根本就不需要引導;如果是功能告知，只需呀輕量級的引導;如果是版本更新說明，說明書式的引導可以採用，但是要言簡意賅。

 

12、無載入中狀態

 

H5 APP產品只要是需要連網，需要交換資料，都需要提供一個載入中狀態的，無論是菊花轉還是Toast還是對話方塊，且要考慮到載入時間過長、網路開關沒有開啟、網路不通等情況分別怎麼去處理。

 

13. 不要忘記手勢但不要濫用

 

不是每個元素都是可視化的，比如 iPhone Mail app 的刪除進程。在收件匣內，使用者可以猛擊螢幕顯示刪除按鈕，使用者就不用點擊“編輯”，選擇資訊然後再刪除資訊。

 

14. 不要覺得每個使用者有著跟你一樣的 App 使用方式

 

可用性測試是必須的，不管你的 App 看起來多麼好。找值得信任的人(或者有經驗的設計師)進行小範圍封閉測試，在公開發布之前更新下介面。另一個簡單易行的獲得使用者反饋的方法是在分類網站張貼廣告招募合適的人進行焦點小組測試。

 

15.上線前測試的重要性

 

對H5測試來說，與app測試項並沒有什麼區別，主要都是終端機的配飾問題，特別是不同終端瀏覽器系統和解析度，但一樣的是，app有安裝、啟動等步驟，相對簡單。但在UI自動化測試，功能遍曆測試並沒什麼不一樣。

H5 App設計者需要注意的問題