使用者介面模式

在小螢幕上瀏覽的設計,不應像採用縮小後版本的大螢幕版面配置一樣。同樣地,顯示在大螢幕上的設計看起來不應像模糊版的小螢幕版面配置。相反地,設計必須夠靈活,才能適應各種螢幕大小。出色的回應式設計能充分發揮各種板型規格的效益。

這表示某些介面元素可能需要根據所見情境而看起來截然不同。你可能必須將截然不同的 CSS 套用到相同的 HTML 程式碼集,才能充分利用不同尺寸的螢幕。這可能是一項設計挑戰!

以下列舉幾個您可能會遇到的常見挑戰。

在大螢幕上,要顯示導覽連結清單相當簡單。這些連結有足夠的空間可以容納這些連結。

小螢幕的空間屬於付費空間。要針對這種情況設計時,您可能會很想隱藏按鈕背後的導覽功能。這個解決方案的問題在於,使用者必須執行兩個步驟才能到其他地方:開啟選單並選擇任一選項。在選單開啟前,使用者會一直想「可以去哪裡?」

因此,請設法找出避免隱藏導覽畫面的策略。如果項目數量相對較少,您可以調整導覽樣式,在小螢幕上呈現良好效果。

一個提供五個導覽連結的網站,在行動瀏覽器中查看,用平板電腦瀏覽器查看。兩部裝置上皆可顯示導覽。

如果導覽頁面含有大量連結,這個模式就不會縮放。在小型螢幕上,如果連結有兩條或三行文字,導覽畫面會顯得雜亂。

可行的解決方法是將連結放在一行,但截斷畫面邊緣的清單。使用者可以水平滑動,查看未立即顯示的連結。此為溢位模式。

這項技巧的優點是能調整為任何裝置寬度和連結數量。缺點是使用者可能會錯過一開始看不到的連結。如果您的主導覽是採用這項技巧,請確認前幾個連結是最重要的連結,並以視覺化方式指出清單中還有其他項目。在上述範例中,我們使用漸層做為指標。

最後,您可以選擇預設隱藏導覽,並提供切換機制,方便使用者顯示或隱藏內容。這稱為漸進式揭露。

一個提供五個導覽連結的網站,在行動瀏覽器中查看,用平板電腦瀏覽器查看。在平板電腦上可以看見導覽,但在行動裝置上隱藏。

請確認切換導覽顯示模式的按鈕已加上標籤。不要只用圖示表示使用者可能理解。

三個未加上標籤的圖示:第一個是三條水平線;第二種是三比三格第三個是三個垂直排列的圓形

未加標籤的圖示為「神秘肉品」瀏覽方式,因此使用者必須咬字,才能得知其中存在什麼內容。提供文字標籤,讓使用者知道按鈕將顯示什麼內容。

輪轉介面

導覽的真正意義也適用於其他內容:試著不要隱藏任何東西。輪轉介面是隱藏內容的常見方式。儘管這些內容看起來很複雜,但使用者可能也還是找不到隱藏的內容。輪轉介面比服務使用者更能解決組織問題,例如應該在首頁上顯示哪些內容。

換句話說,如果廣告空間屬於付費內容,輪轉介面可能會避免網頁過長而變得雜亂。您可以採用混合做法:在小螢幕的輪轉介面中顯示內容,但在大螢幕上以格狀方式顯示相同內容。

如果是較窄的螢幕,請使用 Flexbox 連續顯示多個項目。項目列會超出畫面邊緣。使用 overflow-x: auto 即可允許水平滑動。

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

scroll-snap 屬性可確保使用者能以流暢的方式滑動項目。透過 scroll-snap-type: inline mandatory,物品會妥善固定。

當畫面夠大時 (此時螢幕寬度大於 50em),請切換至格線並在列和欄中顯示項目,而不隱藏任何內容。

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

重點在於,輪轉介面檢視畫面中的項目不會佔滿完整寬度。如果確實如此,系統就不會顯示可視區域邊緣以外的內容更多內容。

輪轉介面是另一個溢位模式的實際例子。如果您有許多可供使用者瀏覽的項目,即使在大螢幕上 (包括電視),也可以繼續使用溢位模式。這個媒體捲動器使用多個輪轉介面來管理大量選項。

再次提醒,scroll-snap 屬性可確保互動流暢自在。另請注意,輪轉介面中的圖片已套用 loading="lazy"。在本例中,圖片的位置不應位於需捲動位置,同時也超出了邊緣,但這項原則同樣適用:如果使用者從未滑動到該項目,圖片就不會下載,從而節省頻寬。

如果新增了 JavaScript,您即可將互動式控制項加入輪轉介面中。甚至可以設定自動循環切換不同項目。但是請思考要執行多久,再這麼做。如果輪轉介面是網頁上唯一的內容,影片自動播放功能或許能正常運作,但如果使用者嘗試與其他內容 (例如閱讀文字) 互動,自動播放的輪轉介面會讓閱聽人更加惱人。詳情請參閱輪轉介面最佳做法

資料表

table 元素非常適合建構表格資料。相關資訊的列和欄。但如果表格過大,可能會破壞小螢幕的版面配置。

您可以將溢位模式套用至資料表。在這個範例中,資料表會包裝在具有 table-container 類別的 div 中。

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th, 
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

指南規範

溢位模式適用於小螢幕,但請確保畫面外的內容可供存取。考慮在內容遭到截斷的邊緣放置陰影或漸層。

漸進式揭露是節省空間的好方法,但對於非常重要的內容,請謹慎小心。更適合次要動作。請務必為觸發揭露事項的介面元素加上清楚的標籤,切勿僅依賴圖像。

先針對較小的螢幕設計。比起其他方式,小螢幕設計更能適合用在較大的螢幕。如果您是先針對大螢幕設計,您的小螢幕設計感覺在事後會感覺好像在事後了。

如要進一步瞭解版面配置和 UI 元素模式,請參閱 web.dev 的模式一節。

配合不同螢幕大小調整介面元素時,媒體查詢功能就非常實用,有助於釐清裝置尺寸。但 min-widthmin-height 等媒體功能只是第一步。接下來,你會發現提供其他各種媒體功能。