[科技]移動設計用戶體驗的7個最佳實踐
近3年間,桌面互聯網的使用從90%下降到60%,而移動應用則提高到40%。按照這一趨勢,用不了多長時間移動設備將會迅速搶占桌面互聯網的市場。
很多設計師設計移動設備的默認方法依然是按比例縮小(桌面)網站,再使其響應。這種方法真的是一種很糟糕的移動設計策略。你不能僅僅只是縮小一個網站,你還需要檢查你的客戶業務,并針對特定業務評估移動接入的重要性。
如果你的客戶的顧客主要是臺式機/筆記本電腦用戶,那么你不需要理會移動接入。但是,如果你的客戶需要一個在線商店或者根據顧客所在的位置提供本地化的信息——那么你最好不要使用上述的移動設計方法。為了盡可能地提高訪問容量,擴大你的(客戶)業務,你的網站需要能夠匹配多種設備的訪問。所以先設計一個移動網絡策略吧。
關于移動設備的設計難點是,存在著許多變體,尺寸大小和風味。就像20世紀90年代的瀏覽器大戰!
為了提供更好的,更直觀的,更人性化的移動體驗,讓我們先來看看一些你應該謹記的移動設計最佳實踐:
1.明確、重點突出的內容
反面例子
許多人通常是在室外使用他們的移動設備——在一種匆匆忙忙的狀態下。由于是小型的觸摸屏,所以做起搜索和導航功能來并不容易。故而移動設計的體驗之一就是簡約原則。將干擾保持到最低限度。每個頁面包括首頁應該只有一個關注的重點。不要期待用戶會接受任何非典型的手勢,如滑動到下一個頁面或者水平滾動??傊層脩舾杏X怎么簡單怎么來??梢酝ㄟ^小箭頭或者懸浮消息來說明功能,不惜一切代價地要讓用戶更方便地找到他們想要的東西。
2.菜單和導航:保持簡單化
傳統的桌面網頁會在頁面頂部突出顯示菜單欄。但是在移動設備上這會占用寶貴的屏幕空間。要解決這個問題,可以使用手風琴式下拉菜單,或者在手機屏幕的左上角或右上角顯示菜單圖標。
另一個不適用于移動設備的桌面習慣是,懸停顯示擁有子菜單的多級菜單。在移動設備上,如果用戶需要通過4級菜單才能找到想要訪問的內容,那他們很有可能在第二次點擊之后就關閉頁面。所以在移動網站上應該盡可能地避免多級菜單。這一點和臺式機設計有著本質的區別。
3.流式的布局
移動設備的尺寸種類很多 。但千萬不要偷懶只設計了一個320像素的寬度。不管你承認與否——176、240、320、360,~480-600(橫向)都是常見的設備寬度。靈活和流式的布局方可確保網頁正確展示在不同的屏幕尺寸上。
4.觸屏設計
只需要用鍵盤和鼠標事件就能與網站互動的美好時光一去不復返了。在移動設備上,互動的主要方式通常是觸屏。觸屏設計需要關注光標的精確,必須考慮所有形狀和大小的手指產生各種類型的壓力,在觸碰屏幕時產生的不同響應。您需要確保表單、按鈕和其他需要觸摸或手勢輸入的元件足夠大,以避免與相鄰元件的重疊,或者誤解觸摸事件。
不要僅僅依賴于觸摸輸入。有跡象表明,有很多移動設備是使用觸屏筆的,甚至一些老款的舊手機依然在使用方向鍵板。有許多移動設備/瀏覽器并不完全支持JavaScript的觸摸事件。此外有的用戶會使用組合設備輸入,例如,使用鼠標連接到平板的情況。盡管這種情況不太常見,也應該評價他們對網站的重要性,并采取適當的處理措施。
5.表單最小化
小小的觸摸屏,更小的虛擬鍵盤——僅僅5mmx 5mm大小,使得打字體驗變得不那么美好。表單應該既小又簡單。如果需要的話,可以構建獨立的表單,用最少的字段來獲取所需要的數據。盡可能預填充有默認值的字段。自動填充常用字段。
例如,使用可視化的日歷,而不是讓用戶鍵入日期。對于那些不止一屏的長表單,最好設置進度條,用來說明用戶已經完成了多少步驟,還需要多少步驟才能結束。
說到表單,那怎么能漏掉標簽布置呢?你知道如果是頂部對齊的標簽用戶填寫表單更快嗎?即使設備可以在你打字的時候放大輸入字段,也應該將標簽保持在輸入字段之上以確保它的可見。頂部對齊的標簽也更方便用戶在滾動到下一頁時瀏覽字段和保持跟蹤。
6.放棄圖片
規模和速度是移動網站兩個最為重要的性能。不要使用圖片來實現如漸變和陰影的奇特效果。了解CSS的基礎知識,并應用到網頁設計中。使用圖片來實現特殊效果越少越好。但是,并非所有的CSS3特效都可以在舊版的移動瀏覽器中實現,不過這沒關系。網站的像素也沒必要達到100%的完美無暇。
如果你喜歡在你的設計中使用花哨的文字作為圖像,那么你最好放棄這種要不得的習慣。文本就作為為文本保存。雖然使用花哨的字體可以達到你想要的效果,但是這會占用網站的空間,增加頁面的加載時間。
7.充分利用手機的特定功能
iphone的滑動解鎖
移動設備有許多功能,如GPS,Gyrometers和其他桌面設備不具備的感應器,如“滑動解鎖”,以及打電話的功能。弄清楚如何使用這些功能,可以提升網站的移動體驗。你也可以添加簡單的功能,例如在聯系人頁面“點擊”電話號碼“通話”,共享整個社會媒體平臺,通過GPS提供的位置提供具體的信息和服務等。這些都是你可以利用的手機特定功能,在它們的基礎上打破陳規來實現更好的移動體驗。
最后,大家有什么其他好的實踐方法歡迎指出。