較資深的用戶或設計師應該都還記得，90 年代大家特別喜歡使用繁複的 GIF 動態檔來裝飾網頁吧？而現在最流行的網頁風格反而是簡約的扁平化設計。 網站設計 趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同，相當有趣並值得探討。
舉個最近流行的趨勢吧！我們可以看到 響應式 網頁設計 （RWD）越來越流行，許多網站皆改為此方式來設計，除了對移動裝置用戶更友善外，甚至也影響 Google 的搜尋排行。接著，就讓我們透過UXPin 針對今年度所見的趨勢整理而成的文章，一起回顧今年的網頁設計風潮與展望明年可能會流行的趨勢囉~
3. Material Design: 後扁平化設計時代的創新者
去年，Google 發佈了它的設計風格語言： Material Design。它利用陰影來表現各個狀態，而陰影的深度又能帶給使用者操作扁平化物件的真實感受（例如物件前後關係）。
Material Design 目的是希望創造出簡潔、現代的設計風格，並專注於使用者體驗（UX）。然而，過去 Google 與設計美學談不上關係，而這次 Material Design 發表後，反而造成流行並受到各界讚揚。雖然 Material Design 的簡約設計元素，與扁平化設計相似。不過相較於扁平化，Material Design 使用了深度表現與陰影，更可表現元件的前後關係。
儘 管 Google 提出這個設計語言，想要打造可供跨裝置使用的漂亮 UI 與良好體驗。但至今，應用 Material Design 的產品大多是 app。Google 也發現了這個現象，因此在七月時發佈了網站可用的套件 – Material Design Lite（MDL）。這個套件結合 vanilla CSS、HTML 和 JavaScript，並希望它夠輕量並易於開發人員使用，同時保有 Material Design 的視覺元素。此外，MDL 並不是依賴在特定框架上，所以設計師可以用各種前端方法來設計網站，同時它的程式也非常輕量化。
4. 響應式設計
近幾年，因為移動裝置普及，網站響應式設計顯得格外重要，同時也相當受到歡迎（Responsive web design，RWD）。
以企業的角度而言，建構一個功能齊全且對於移動端友善的網站，Responsive design 是一個相對簡單且省錢的方式，但若是應用錯誤的方法，可能會影響效能。藉此，Guy’s Pod 向設計師提出了一些建議：
1.圖片顯示避免使用 display: none 的寫法。雖然使用者沒有看見圖片，但其實仍然是有被 load 進來的，因此在網頁的效能上產生了不必要的負擔。
2.圖片大小使用百分比來定義。
3.有條件式的引用 JavaScript，因為許多 js 元件在小尺寸的裝置上（手機）是無法被使用的。特別需要注意的是第三方 script（如社群分享按鈕）對於網站而言，常常會有負面的影響與降低效能。
4.使用 RESS – Responsive and Server Side
5.為了有效的量測與優化每個網站，應將效能測試這項目加入到流程中。
效 能不單單只是使用者判斷體驗好壞的關鍵，同時也會影響 Google 的檢索排名。此外，由於最近流行的極簡風格讓網頁排除了不必要的元素而減少頁面的複雜性，非常適合響應式的設計。同時，我們也可以看到許多具響應式設計的 網站使用卡片式的排列，可在不同螢幕尺寸下，輕易的重新調整排列。
響應式設計已慢慢由趨勢轉變為最佳的實踐方式。然而設計師們也必須想出一些聰明的方式解決任何速度的問題。無疑地，響應式設計是十分有用且通用的，但它也應該是高效能的，才可以提供出色的使用者體驗（UX）。
5. 扁平化設計會退燒嗎？應該沒那麼快！
扁平化設計風格其實已經流行一陣子了，目前它也與其他相似風格與設計語言融合得很好，如極簡主義、響應式網站設計與 Google 的 Material Design。
未來，我們推測有更多扁平化設計的元素會流行：
長陰影（Long shadow）：長陰影可以帶給扁平元素視覺上的深度。
鮮明色調： 一些受歡迎的 UI 模板都開始使用越來越鮮明的色系。
簡單的文字排版：簡單的文字排版，可以確保文字在扁平化設計下，保持清晰與可讀性。
幽靈按鈕（Ghost button）： 幽靈按鈕的意思就是，讓按鈕僅留下外框線與說明文字，當使用者透過滑鼠 hover 時，才呈現變化。這樣可以讓使用者更專注於按鈕的功能性，避免上方的顏色、形狀或視覺表現而分心。
極簡主義： 省略不必要的元素，讓畫面看起來清新不擁擠。
雖然這些設計趨勢是因為帶來某些效益而受到歡迎，但千萬別盲目地追求流行，一定要以使用者為中心思考，確保應用這些設計趨勢對他們是好的。例如，電商網站就不適合完全的無限滾動頁面。所以，這些趨勢僅是設計師腦袋中的資料庫，必須深思熟慮的選擇其中最佳方案。
參考資料：
1王素華、林哲宏 2008 以層級分析程序法進行網站瀏覽架構分析
2 陳慶彥 2002 PHP+MySQL動態網頁設計
3 Google Webmaster Tools (2010). Google Webmaster Tools Help
資料來源：inside
留言列表
