使用者介面模式

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

這表示某些介面元素可能需要根據所見情境而看起來截然不同。你可能必須將截然不同的 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;
  }
}

敬上

注意： overflow-x 的邏輯版本為 overflow-inline，較能與 scroll-snap-type 的值相符。這個範例使用實體版本，提供更優異的跨瀏覽器支援。

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-width 和 min-height 等媒體功能只是第一步。接下來，你會發現提供其他各種媒體功能。