亚洲精品国产综合99_久久综合久久综合久精品视频_亚洲日韩一区二区三区高清_亚洲а∨天堂久久精品

給響應(yīng)式布局做測試從來都不簡單，事實上在尋找桌面、移動和平板設(shè)備的尺寸之間的那一個個布局 “斷點” 一直都很麻煩。現(xiàn)在我們給大家準備了一個趁手的工具——Resizer。
Resizer 是什么？
△使用 Resizer 很簡單：輸入您的網(wǎng)址就可以在各個尺寸下預(yù)覽網(wǎng)站和演示項目。
作為數(shù)字產(chǎn)品的設(shè)計和開發(fā)人員，我們面臨的最大挑戰(zhàn)之一就是，如何在正確的時間為各種類型的用戶提供正確的 UI。無論是通過手機還是 VR，使用手勢還是鼠標，使用最新尖端設(shè)備還是古舊的 2G 設(shè)備，我們的職責(zé)是讓所有人都能用上我們的產(chǎn)品。這個任務(wù)并不簡單，沒有任何一種設(shè)計解決方案能滿足所有需求。



我們已經(jīng)開始在布局斷點、響應(yīng)式網(wǎng)格、界面行為和用戶界面模式等方面提供 Material Design 設(shè)計指導(dǎo)服務(wù)。Resizer 正是用來讓您使用動態(tài)手段測試設(shè)計成果的工具。而且這個直觀的工具能促進設(shè)計師、開發(fā)者和項目的利益相關(guān)方三者之間達成更加卓有成效的對話。

探索 UI 模式
屏幕尺寸的更改會導(dǎo)致特定元素的位移，這些改動可能會導(dǎo)致您需要根據(jù)情況選擇不同的 UI 模式：顯示、形變、分割、折行、擴展，等等。Resizer 幫助設(shè)計師和開發(fā)者以可視化的方式看清，哪種 UI 模式在哪種尺寸下是最適合采用的。我們已經(jīng)準備好了幾個演示文件，您可以在 Resizer 的地址欄里中找到它們：
Pesto 演示：


△ Pesto：現(xiàn)代化的烹飪應(yīng)用，可以幫助您發(fā)現(xiàn)、分享、存儲食譜。

食譜應(yīng)用 Pesto 展示了一些較受歡迎的設(shè)計模式。它使用了基于屏幕大小自動進行流式布局的網(wǎng)格列表。應(yīng)用欄中的圖標會根據(jù)工具欄的高度變換。根據(jù)用戶是在桌面端還是移動端查看應(yīng)用，懸浮按鈕 (FAB – “Floating Action Button“) 會改變位置。


查看食譜的詳細信息時，請嘗試點擊右上角的 “更多” 圖標。請注意桌面設(shè)備這個操作會就近展開一個菜單，而在移動設(shè)備上則會在屏幕底部彈出菜單。

Shrine 演示：


△ Shrine：購物應(yīng)用，目標用戶為年輕人、DIY 制造愛好者以及喜愛獨立小規(guī)模零售品的購物者。

Shrine 強調(diào)真正改變導(dǎo)航模式的重要性，而不是簡單地基于屏幕尺寸或設(shè)備對各組件進行縮放。 Shrine 使用不同類型的響應(yīng)式網(wǎng)格列表創(chuàng)造出順暢的購物體驗。選項卡展示了一個組件是如何轉(zhuǎn)換為另一個組件的。您可以嘗試使用 Resizer，看看它們是如何從大窗口變成小窗口，從平板電腦模式轉(zhuǎn)換到手機模式的。

下一步：自己動手試試

圍繞自適應(yīng) UI 制定合理的指導(dǎo)方針是一個持續(xù)的過程，我們一直努力在 Material Design 指導(dǎo)文件中提及這一點。Resizer 是動態(tài)地展示這些解決方案的工具，因此您可以將您的產(chǎn)品的 URL 粘貼到其中，看看您的產(chǎn)品在各種尺寸的屏幕上表現(xiàn)如何。