行動網站設計的7個技巧

行動裝置的網站設計優先考慮行動瀏覽體驗，而不是將其視為桌面版本事後考慮。這種方法在過去十年中變得極其重要。根據Statista的研究，現在所有網站流量的一半以上發生在行動裝置上，其中包括大約45%的線上購物。隨著行動網站瀏覽變得更加根深蒂固，設計更加直觀，預計這些數字只會上升。

這就是為什麼網站未能做出真誠的、戰略性的努力來提供優質的行動體驗，有可能大大落後於競爭對手的原因。本文介紹設計最適合行動裝置的網站的一些最常見提示和技巧。

7 個適合行動裝置的網站設計技巧

1.使用行動優先的方法

隨著行動網站瀏覽量幾乎超過桌面版，設計師不得不放棄將桌面版網站視為「主要」版本。這就是為什麼採用行動優先的方法，在桌面版本之前設計行動網站，多年來一直是普遍持有的最佳實踐。

通過以行動體驗為中心的藝術方向，鼓勵設計師憑藉限制來控制設計決策。不僅有尺寸限制，行動用戶經常用一隻手進行互動，除了點擊和滑動之外，輸入往往比在桌面上更麻煩。

行動優先設計從一開始就傾向於強調簡單性和易用性。這種方法不會使桌面版本成為極簡稀疏性。相反，在簡單布局上進行擴展比簡化複雜布局更容易。

首先在行動裝置上測試您的多媒體也很重要，因為為橫向製作的照片或視頻可能不適用於縱向。面部表情或背景元素等精細細節在小尺寸時可能難以清晰閱讀。此外，一次通常只有一張圖片的空間，如果您首先設計了一個大量圖片的桌面網站，則在行動裝置上滾動瀏覽每個網站可能會變得多餘。

2.使用推薦的行動尺寸

在手持設備上，空間可能比在任何其他設計環境中都更加有限。但是在項目開始時考慮大小限制是避免以後發生衝突的最佳方法。

行動螢幕解析度因設備而異，但根據statcounter的研究，目前最常用的是360×640（縱橫比 9:16）。Google Analytics可以告訴您您的用戶喜歡哪些特定設備，並且您應該確保您的網站設計具有足夠的響應能力以適應變化。

當涉及到行動設計的字體大小時，建議正文副本至少為16px。這也可能因使用的字體而異（根據它們的構造，某些字體在 16px 時會比其他字體更難辨認）。

標題字體沒有標準大小，但目標是通過大小、粗細和樣式的對比來建立清晰的排版層次結構。但如果有疑問，只需在行動裝置上為自己測試字體大小。

圖像和其他媒體當然可以在設備允許的範圍內儘可能寬。讓圖像的主題決定它應該有多大或多小，以保持清晰度。

最後但並非最不重要的一點是，按鈕大小在適合行動裝置的網站設計中非常重要，因為觸控螢幕在接收用戶輸入方面不如滑鼠和鍵盤可靠。一個研究重點是老年人用戶建議最佳可達42和72px之間的觸控螢幕按鈕。

3.優化縱向

儘管從技術上講，行動網站可以在設備側放的情況下以橫向模式使用，但縱向模式更為常見。黑莓手機在2000年代普及了雙手握持，但隨著智慧型手機的興起，這已經被徹底淘汰，用戶更喜歡單手人像模式。

縱向模式的狹窄非常適合單列布局。在這種樣式中，站點元素從上到下依次放置。儘管內容的居中對齊往往很常見，但左右對齊的交替可能會產生視覺興趣和兩列布局的錯覺。此外，圖標和照片等較小的元素可以在網格中呈現，而圖像輪播可以通過水平滑動來打破垂直滾動。

除了尋找打破單列布局的創造性方法之外，還有一些方法可以利用它來發揮您的優勢。由於社群媒體應用程式已經讓行動用戶為長時間的滾動做好了準備，因此網站設計人員可以使用空白和填充來傳播內容。這使內容保持乾淨和可讀，同時通過持續滾動鼓勵參與。

分段設計對於將相似訊息進行分組也很有用，這樣用戶無需深入閱讀即可了解每個部分的一般用途。當您考慮到大約79% 的頁面訪問者只瀏覽網站內容時，這尤其有用。不同的顏色背景有助於區分這些部分，而創意部分的邊框會破壞這些部分所提倡的四四方方的感覺。

4.最小化選單

導航是另一個可能會迅速變得複雜的領域，具體取決於為用戶提供的目的地和選項的數量。雖然桌面網站往往有一個帶有多個主選單和子選單的完整標題導航欄，但將所有這些都包含在簡單、可識別的漢堡包圖標中已經成為標準。因此，大多數行動網站標題都傾向於簡化為該圖標和徽標。

對於實際選單的樣式，一種常見的方法是滑出側邊欄，它用導航選項覆蓋螢幕的一部分。這允許選單在與頁面內容的其餘部分不同的維度上操作，同時為用戶留出空間來點擊選單並返回上一螢幕。

根據選單的複雜程度，每個選單選項可能包含更多嵌套選項或子選單。當用戶單擊這些子選單之一時，最好讓新的選項列表替換現有選單，以保持列表簡短。

不要忘記將導航欄固定到螢幕上，這樣用戶就不必一直滾動回到頂部。行動裝置的常見做法是在用戶向下滾動時隱藏固定導航，為內容提供應有的關注，並在用戶開始向上滾動時顯示導航。

5.摺疊次要內容

桌面網站通常有空間用於深入的正文、產品規格和其他內容。但由於行動網站要求訊息直截了當，設計者必須消除或縮短所有非必要的內容。這是可摺疊/可擴展部分派上用場的地方。

摺疊內容涉及使用圖標（例如三角形或加號）來擴展或顯示隱藏的內容，從而使解釋性訊息成為可選。雖然隱藏您的內容聽起來像是一件壞事，但有說服力的標題所支持的簡化瀏覽的收益遠遠超過了丟失訊息的可能性。切換的微互動也是用戶與頁面互動而不是被動閱讀的另一個邀請。

設計人員應為標題下方的較低層副本保留摺疊內容。重複的內容可以合併以重疊相同的空間而不是堆疊在彼此的頂部。

在適合行動裝置的網站設計中，您應該完全避免的無關內容是插頁式廣告和彈出式廣告。雖然這些可以通過在單獨的窗口中覆蓋內容來節省空間，但充滿侵入性彈出窗口的網站不僅令人厭煩，而且還會受到搜尋引擎的懲罰。

6.限制表單域和文本輸入

文本輸入必須是行動可訪問性的最大障礙之一。雖然一個字在這裡並沒有什麼大不了的，但當一個行動網站需要一個電子郵件地址時，誰沒有抱怨過，迫使你用一隻手在字母、大寫、標點符號和符號選單中循環？出於這個原因，您應該儘可能地減少表單欄位。

自動填充機會，例如從郵政編碼中預測大部分地址或為常見電子郵件後綴提供預填充選擇，可以消除其中一些互動的痛苦。

7.行動友好意味著拇指友好

根據Josh Clark 所著《Designing for Touch》中的研究，用戶在所有行動互動中至少有 75% 是用拇指進行互動。這包括所有滾動、點擊、滑動和文本輸入，其餘手指忙於支撐手機背面。還要考慮到，在許多情況下，用戶在做其他事情時會用不那麼慣用的手瀏覽手機。所以很明顯，設計師必須優先考慮所有行動互動的拇指接觸。

拇指是最大的數字，這使得它不精確。在創建按鈕時，設計人員應該為重要的互動使用最大的尺寸（請參閱上一節關於尺寸的部分），因為如果拇指的部分落在按鈕之外，觸控螢幕將不會記錄輸入。

同樣重要的是頁面上互動元素的位置。通常，從下端握住行動裝置，拇指放在中間。為了到達頂部的互動元素，用戶必須重新定位他們的整個手或使用他們的第二隻手的手指。研究表明，理想的互動區域（較大的手機會縮小）位於中下部區域。

近年來，許多 UX 設計師率先將導航欄定位在螢幕底部而不是頂部。雖然這使拇指訪問更容易，但打破用戶習慣的設計慣例也可能導致較差的體驗。時間會告訴我們哪個位置是最理想的，但與此同時，為您自己的用戶群解決這個問題的最佳方法是測試兩者。

擁抱適合行動裝置的網站設計

從其全球流量持續增長的方式來看，行動網站瀏覽顯然是未來的發展方向。但是，當您考慮到與桌面網站相比設計必須面臨的所有限制（缺乏空間和用戶外圍設備）時，它似乎更像是一種負擔而不是機會。這些挑戰並非不可克服，但也不能掉以輕心。