《TO》導讀：許多台灣傳統產業開始認知到網路化是事業轉型最重要也是唯一的契機，畢竟，AppWorks 合夥人程九如曾經預言，如果在 2018 年前店家沒有網路化，基本上也等於在現實生活中隱形了。但是，許多傳統商家在網路化後，網站設計簡單來說就是讓人「驚呆了」。
不僅用戶操作體驗不佳、介面設計不佳，在手機上開網頁，字還小到完全無法閱讀、版面無法操作。這些常見的錯誤其實極有可能把顧客拒於千里之外，更遑論促成交易了。因此，Google 發明了一個新工具Resizer，幫助網頁設計者在製作時，更能清楚用戶裝置上實際的呈現結果。
編譯 / 方定宇
在推出名為「Material Design」的設計元素並將其推廣至旗下所有的產品及平台後，Google 開始發布一些相關的指導方針，讓網頁設計師及工程師們能夠依照這些指引進行相關的設計並減少些許負擔。
Google 以「Material Design」來呈現他們所想要表達的視覺設計效果。「Material Design」可以說是一套全面性、廣泛而且不斷改進的設計概念，讓 Google 相關產品的使用者介面以及使用者體驗有較為相近、一致的設計。
隨著資訊科技以及消費性電子產品的進步，「Material Design」亦不斷日新月異。舉個例子來說，設計師們可以自「Material Design」的相關規範當中了解到應該如何讓動畫角色擁有正確的加減速、該如何選擇調色盤以及讓使用者介面在不同尺寸的裝置中彈性調整至最佳狀態。
「Resizer」是一套 Google 新推出的工具，最主要的目的是要協助設計者在 RWD（編按：responsive web design，亦即網頁會隨著螢幕解析度、大小等自動調整網頁呈現的介面，在不同尺寸的行動裝置上 RWD 的好壞讓網頁。）上能夠更輕鬆的解決問題。它能夠讓設計師及工程師了解他們的數位產品（如網站、網路遊戲）在「Material Design」的框架下運作於不同的裝置間運行之後可能會有些什麼問題。
在「Resizer」頁面頂端的搜尋欄位中輸入任意的 URL 之後，「Resizer」能夠讓網頁以電腦、手機或是平版的顯現方式呈現出來。你能夠在這上面輸入任何你想要瀏覽的網址，像是 Facebook、部落格或是新聞網頁，而且能夠立即看到這些網頁在不同的裝置上所呈現出不同的視覺效果。這個功能最主要是想要讓網頁設計師或是工程師能夠輕鬆的看見網頁在不同的裝置上所呈現的效果，或是發掘潛在排版錯誤的地方，而這個過程可以說是最為關鍵的地方，對於大部分的網頁設計師或工程師而言也是最為棘手的部分。
「Resizer」中電腦版的畫面。
「Resizer」中電腦版的畫面。
來自 Google 的工程師 Zach Gibson 向大家解釋了 Google 釋出「Resizer」的目的：
「作為一個數位產品的設計師與開發者，我們目前面臨最大的挑戰之一就是在於如何讓廣大的用戶覺得他們現在所接觸到的頁面是最為舒適的。不論他們如何操作這些應用程式、不論他們透過什麼方式來下達指令，我們都有責任讓每一個人都能夠輕鬆的使用我們的產品。但是，這是一個相當艱難的任務。在這當中並沒有讓我們一步登天的捷徑，也沒有一個簡單的解決方案能夠應付所有的需求。」
「Resizer」最強大的功能在於它能夠清楚的呈現出斷點所在。（編按：斷點，Breakpoint。在 RWD 設計中常會設置斷點，例如在某個解析度下網頁會自行對應到某種長寬比，如果比這個解析度還要高的話，網頁會自行調整到另一個長寬比。）Google 在「Material Design」中指定了欄以及寬度的規格，並認為這將會創造出更好的用戶體驗。
但實際上，這樣會讓網頁中的一些元素在不同的設備之間需要做出大幅度的改變。為了能夠讓網頁符合行動裝置的顯示方式而降低一些網頁的設計要求對工程師來說並不困難，但是導覽模式以及揭露出來的資訊量都必須再經過調整。如果有了「Resizer」的協助，你就像擁有一把數位量尺隨時都能夠協助你測量你的 URL 在不同的環境下是如何表現的。這對於設計師、工程師或是開發人員來說，「Resizer」能夠讓他們較容易處理在 RWD 上所遇到使用者介面相關的問題。
有了「Resizer」，各位辛苦的設計師 / 工程師大大們就可以不用手忙腳亂的再跑去找電腦、平板還有手機來看辛辛苦苦的成果啦！要做的就只是開啟「Resizer」的網頁然後點進去瀏覽看看有哪些地方還需要改進，再進到後台修正一下就可以了！另外一個值得注意的地方在於，「Resizer」上面的網頁並不是只能瀏覽而已，網頁上所有的按鈕還有連結都是能夠正常使用的唷！這樣子的設計是不是很貼心呢？！！
（資料來源：WIRED，未經授權不得轉載，合作夥伴不在此限）
