如何快速測試響應式佈局？

給響應式佈局做測試從來都不簡單，事實上在尋找桌面、移動和平板裝置的尺寸之間的那一個個佈局 “斷點” 一直都很麻煩。現在我們給大家準備了一個趁手的工具——Resizer。

Resizer 是什麼？

△使用 Resizer 很簡單：輸入您的網址就可以在各個尺寸下預覽網站和演示專案。

作為數字產品的設計和開發人員，我們面臨的最大挑戰之一就是，如何在正確的時間為各種型別的使用者提供正確的 UI。無論是通過手機還是 VR，使用手勢還是滑鼠，使用最新尖端裝置還是古舊的 2G 裝置，我們的職責是讓所有人都能用上我們的產品。這個任務並不簡單，沒有任何一種設計解決方案能滿足所有需求。

我們已經開始在佈局斷點、響應式網格、介面行為和使用者介面模式等方面提供 Material Design 設計指導服務。Resizer 正是用來讓您使用動態手段測試設計成果的工具。而且這個直觀的工具能促進設計師、開發者和專案的利益相關方三者之間達成更加卓有成效的對話。

探索 UI 模式

螢幕尺寸的更改會導致特定元素的位移，這些改動可能會導致您需要根據情況選擇不同的 UI 模式：顯示、形變、分割、折行、擴充套件，等等。Resizer 幫助設計師和開發者以視覺化的方式看清，哪種 UI 模式在哪種尺寸下是最適合採用的。我們已經準備好了幾個演示檔案，您可以在 Resizer 的位址列裡中找到它們：

Pesto 演示：

△ Pesto：現代化的烹飪應用，可以幫助您發現、分享、儲存食譜。

食譜應用 Pesto 展示了一些較受歡迎的設計模式。它使用了基於螢幕大小自動進行流式佈局的網格列表。應用欄中的圖示會根據工具欄的高度變換。根據使用者是在桌面端還是移動端檢視應用，懸浮按鈕 (FAB - "Floating Action Button") 會改變位置。

檢視食譜的詳細資訊時，請嘗試點選右上角的 “更多” 圖示。請注意桌面裝置這個操作會就近展開一個選單，而在移動裝置上則會在螢幕底部彈出選單。

Shrine 演示：

△ Shrine：購物應用，目標使用者為年輕人、DIY 製造愛好者以及喜愛獨立小規模零售品的購物者。

Shrine 強調真正改變導航模式的重要性，而不是簡單地基於螢幕尺寸或裝置對各元件進行縮放。 Shrine 使用不同型別的響應式網格列表創造出順暢的購物體驗。選項卡展示了一個元件是如何轉換為另一個元件的。您可以嘗試使用 Resizer，看看它們是如何從大視窗變成小視窗，從平板電腦模式轉換到手機模式的。

下一步：自己動手試試

圍繞自適應 UI 制定合理的指導方針是一個持續的過程，我們一直努力在 Material Design 指導檔案中提及這一點。Resizer 是動態地展示這些解決方案的工具，因此您可以將您的產品的 URL 貼上到其中，看看您的產品在各種尺寸的螢幕上表現如何。點選 “閱讀原文” 啟動 Resizer 試試吧！

推薦閱讀：

新的一年裡如何提高App質量？

如何在Google Play上獲得更多關注？

矽谷風投分享給創業者的4個心得

人與機器對談式的互動，應該如何設計？