移動設計使用者體驗的7個最佳實踐

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

近3年間，桌面網際網路的使用從90％下降到60％，而移動應用則提高到40％。按照這一趨勢，用不了多長時間移動裝置將會迅速搶佔桌面網際網路的市場。

很多設計師設計移動裝置的預設方法依然是按比例縮小（桌面）網站，再使其響應。這種方法真的是一種很糟糕的移動設計策略。你不能僅僅只是縮小一個網站，你還需要檢查你的客戶業務，並針對特定業務評估移動接入的重要性。

如果你的客戶的顧客主要是桌上型電腦/膝上型電腦使用者，那麼你不需要理會移動接入。但是，如果你的客戶需要一個線上商店或者根據顧客所在的位置提供本地化的資訊——那麼你最好不要使用上述的移動設計方法。為了儘可能地提高訪問容量，擴大你的（客戶）業務，你的網站需要能夠匹配多種裝置的訪問。所以先設計一個行動網路策略吧。

關於移動裝置的設計難點是，存在著許多變體，尺寸大小和風味。就像20世紀90年代的瀏覽器大戰！

為了提供更好的，更直觀的，更人性化的移動體驗，讓我們先來看看一些你應該謹記的移動設計最佳實踐：

1.明確、重點突出的內容

反面例子

許多人通常是在室外使用他們的移動裝置——在一種匆匆忙忙的狀態下。由於是小型的觸控式螢幕，所以做起搜尋和導航功能來並不容易。故而移動設計的體驗之一就是簡約原則。將干擾保持到最低限度。每個頁面包括首頁應該只有一個關注的重點。不要期待使用者會接受任何非典型的手勢，如滑動到下一個頁面或者水平滾動。總之要讓使用者感覺怎麼簡單怎麼來。可以通過小箭頭或者懸浮訊息來說明功能，不惜一切代價地要讓使用者更方便地找到他們想要的東西。

2.選單和導航：保持簡單化

傳統的桌面網頁會在頁面頂部突出顯示選單欄。但是在移動裝置上這會佔用寶貴的螢幕空間。要解決這個問題，可以使用手風琴式下拉選單，或者在手機螢幕的左上角或右上角顯示選單圖示。

另一個不適用於移動裝置的桌面習慣是，懸停顯示擁有子選單的多級選單。在移動裝置上，如果使用者需要通過4級選單才能找到想要訪問的內容，那他們很有可能在第二次點選之後就關閉頁面。所以在移動網站上應該儘可能地避免多級選單。這一點和桌上型電腦設計有著本質的區別。

3.流式的佈局

移動裝置的尺寸種類很多 。但千萬不要偷懶只設計了一個320畫素的寬度。不管你承認與否——176、240、320、360，~480-600（橫向）都是常見的裝置寬度。靈活和流式的佈局方可確保網頁正確展示在不同的螢幕尺寸上。

4.觸屏設計

只需要用鍵盤和滑鼠事件就能與網站互動的美好時光一去不復返了。在移動裝置上，互動的主要方式通常是觸屏。觸屏設計需要關注游標的精確，必須考慮所有形狀和大小的手指產生各種型別的壓力，在觸碰螢幕時產生的不同響應。您需要確保表單、按鈕和其他需要觸控或手勢輸入的元件足夠大，以避免與相鄰元件的重疊，或者誤解觸控事件。

不要僅僅依賴於觸控輸入。有跡象表明，有很多移動裝置是使用觸屏筆的，甚至一些老款的舊手機依然在使用方向鍵板。有許多移動裝置/瀏覽器並不完全支援JavaScript的觸控事件。此外有的使用者會使用組合裝置輸入，例如，使用滑鼠連線到平板的情況。儘管這種情況不太常見，也應該評價他們對網站的重要性，並採取適當的處理措施。

5.表單最小化

小小的觸控式螢幕，更小的虛擬鍵盤——僅僅5mmx 5mm大小，使得打字型驗變得不那麼美好。表單應該既小又簡單。如果需要的話，可以構建獨立的表單，用最少的欄位來獲取所需要的資料。儘可能預填充有預設值的欄位。自動填充常用欄位。

例如，使用視覺化的日曆，而不是讓使用者鍵入日期。對於那些不止一屏的長表單，最好設定進度條，用來說明使用者已經完成了多少步驟，還需要多少步驟才能結束。

說到表單，那怎麼能漏掉標籤佈置呢？你知道如果是頂部對齊的標籤使用者填寫表單更快嗎？即使裝置可以在你打字的時候放大輸入欄位，也應該將標籤保持在輸入欄位之上以確保它的可見。頂部對齊的標籤也更方便使用者在滾動到下一頁時瀏覽欄位和保持跟蹤。

6.放棄圖片

規模和速度是移動網站兩個最為重要的效能。不要使用圖片來實現如漸變和陰影的奇特效果。瞭解CSS的基礎知識，並應用到網頁設計中。使用圖片來實現特殊效果越少越好。但是，並非所有的CSS3特效都可以在舊版的移動瀏覽器中實現，不過這沒關係。網站的畫素也沒必要達到100％的完美無暇。

如果你喜歡在你的設計中使用花哨的文字作為影像，那麼你最好放棄這種要不得的習慣。文字就作為為文字儲存。雖然使用花哨的字型可以達到你想要的效果，但是這會佔用網站的空間，增加頁面的載入時間。

7.充分利用手機的特定功能

iphone的滑動解鎖

移動裝置有許多功能，如GPS，Gyrometers和其他桌面裝置不具備的感應器，如“滑動解鎖”，以及打電話的功能。弄清楚如何使用這些功能，可以提升網站的移動體驗。你也可以新增簡單的功能，例如在聯絡人頁面“點選”電話號碼“通話”，共享整個社會媒體平臺，通過GPS提供的位置提供具體的資訊和服務等。這些都是你可以利用的手機特定功能，在它們的基礎上打破陳規來實現更好的移動體驗。

最後，大家有什麼其他好的實踐方法歡迎指出。