較資深的用戶或設計師應該都還記得，90 年代大家特別喜歡使用繁複的 GIF 動態檔來裝飾網頁吧？而現在最流行的網頁風格反而是簡約的扁平化設計。 網站設計 趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同，相當有趣並值得探討。
舉個最近流行的趨勢吧！我們可以看到 響應式 網頁設計 （RWD）越來越流行，許多網站皆改為此方式來設計，除了對移動裝置用戶更友善外，甚至也影響 Google 的搜尋排行。接著，就讓我們透過UXPin 針對今年度所見的趨勢整理而成的文章，一起回顧今年的網頁設計風潮與展望明年可能會流行的趨勢囉～
1. UI 模板（patterns）激增
我 們可以發現，在響應式設計的風潮下，似乎每個網站看起來都一樣。不過，造成這樣的現象，除了響應式設計外，還有其他原因，譬如市場上出現大量的套版網站與 工具（如 WordPress 等）。不過，相似排版與視覺的模板並非不好，這只是市場上出現大量好用的 UI 模板後，我們考量它所帶來的效益（省成本或可更專注於內容等）而產生的必然的現象而已。
另外，這些模板的發展都相當的成熟，要有極大的創新確實也相對困難。事實上，我們也不需要為了創新，而把一個通用成熟的東西重新發明。應該把精力放在如何用 UI 模板打造出流暢的使用者體驗，以下是設計師不可不知的 UI 模板元素：
1. 漢堡圖標（hamburger menu）：類似中文 “三" 的漢堡圖標，雖然過去常被批評和討論（使用者不易理解符號意思等），但現在使用者大多能理解它的意思了。此外，它可把眾多的選項元素縮合（menu），相當方便，在許多產品上都可看見這個圖標的應用。
2. 帳號註冊的方法：我們可以發現，幾乎所有網站的會員註冊頁面的排版方式都很接近，通常會在表格底下放置第三方登入的按鈕（如 Fb 等）。若註冊方式較複雜，也會將步驟拆解分散在多個頁面，並提供提示讓使用者知道如何進行，藉此減少註冊流程中不良體驗的產生。
3. 長滾動條頁面（Long scroll）：這項設計的流行可以歸因於行動裝置用戶的增長，因為行動裝置適合不斷的將頁面往下滑動。除此之外，這項技術特別適合那些想要說故事的網站 （不斷的往下滾動，讓使用者沉浸於功能介紹等內容），並且還可以做出如簡報般，滾動一格就換到全新頁面的效果。
4. 卡片式排版：Pinterest 是應用卡片式排版的先驅，因為卡片式易於讓使用者以掃描的方式了解每塊區域的內容，所以相當受到歡迎。每一塊卡片區域都有獨立的資訊，就如同內容的容器般。此外，因其方形的型態，在不同的螢幕大小下，網站也可以輕易地重新排配版面。
5. 高清晰度的大圖（Hero image）：視覺是人們感受事物的主要方式之一，網站上若擺放高清晰度的大圖，可很快的抓住使用者的注意力。這個趨勢主要歸因於網路的速度提升，使用者 不必受苦於載入圖片時的等待。其中，我們最常看到的排版方式莫過於在網站最上方放置一張高清晰度的大圖，緊接著下方有由左至右並由上往下的系列內容排列 （zig-zagging）或卡片式的布局。
2. 豐富的動態效果
動畫可以加強網站想要告訴使用者的資訊，營造更多互動性與娛樂性。然而，設計師還是需要考量放置的位置，何處或何時出現才能達到動畫想傳遞的效果；另外，也要思考如何帶入產品的故事元素與品牌個性。基本上，動態效果可分為兩種動畫類型：
大尺寸的動畫：通常使用大尺寸的動畫，就是想讓它成為與使用者互動的工具。其中有多種呈現方式，如滾動視差或彈跳通知視窗等方式。
小尺寸的動畫：小尺寸的動畫大多應用於資訊單向傳達的情境，如等待中的旋轉效果、滑鼠 hover 時的效果或載入進度條的效果等。
在此，我們整理了 7 種較受歡迎的動畫技術：
載入時的動畫
雖 然傳統的旋轉或連續的圓點動畫就能表示載入狀態，但似乎滿無趣的。因此有一些設計師開始設計載入時的動畫（或頁面），它們特別受到扁平化設計、 極簡主義、 作品集與單頁類型的網站歡迎。最後，我們也要提醒，設計要保持簡單且避免加入音效，巧妙地融入網站特質與識別配色。
呼叫或隱藏導航列和選單的轉場效果
將導航列或選單隱藏，是現在很多網站或 app 應用的方式，尤其可以省下許多頁面空間。譬如說，應用 hamburger icon 來隱藏選單。但要特別注意別用太過度或過長的轉場效果，造成使用者不悅。
hover 動畫
使用者已經習以為慣地透過滑鼠 hover 的方式，來瀏覽更多的資訊。因此增加 hover 的動畫，直接地給予使用者視覺回饋，會讓這個行為更直覺。
圖片集與幻燈片的動畫
圖片集（可切換圖片或呈現多張）與幻燈片（單張切換）的呈現方式，很適合讓使用者閱讀圖片，若增加更多互動性，可再提升使用者體驗。這樣的方式特別適合攝影、產品與作品集類型的網站。
動態的物件
人類很自然地會被動態的事物所吸引，因此設計師可以透過這個方法來抓住使用者的注意力，也可以讓畫面視覺更有層次感。甚至可以將其應用於表單、CTA 按鈕或選單上，以達到商業的效益。
透過滾動滑鼠一步一步的呈現動畫效果
流暢的滾動效果必須依賴動畫的呈現與提供更進一步的控制權給予使用者。使用者可以自行決定觸發下一段內容的步調。
背景動畫或影片
在背景放置簡單的動畫或影片，可讓網站更加吸引人，但必須保持簡單與色調溫和，不然容易造成使用者的分心。而製作的要領在於讓動畫或影片獨立於一個區塊或使用緩緩的動態效果來呈現大圖。
人 們幾乎每天都與微互動（microinteraction）接觸，例如關閉手機鬧鈴的過程或在 FB 的照片上按讚。每一個互動時刻都相當短暫快速，也不需要多想。就如同你關閉鬧鈴，很自然地就透過介面完成了這項事情。而也有越來越多的 app 開始思考它，並設計微互動的介面、操作方式與流程。
基本上，微互動可以幫助使用者完成三項事情：
1.告知現在處於何種狀態或回饋資訊
2.了解這個動作後的結果
3.幫助使用者操作一些功能
微 互動的設計是每個 app 開發中十分關鍵的部分之一。因此，我們根據此篇文章（ Web Design Trends 2015 and 2016）給與開發團隊一些建議：微互動在設計時，必須儘量不打擾使用者，千萬別過度設計，並保持簡單；仔細思考每個細節，同時讓過程如同 “人類" 之間的互動；文字內容的撰寫多點人性，不要如機器人一般。此外，每一個互動的途徑都要以使用者為中心思考，讓產品更人性化，並提升可用性。當然，這會加重 開發團隊的工作量，但這些確實是使用者真正或想要互動的部分。
對微互動還有興趣的讀者，可以參考設計大舌頭先前的文章 – 微互動將是 2016 年 APP 設計的新趨勢。
參考資料：
1王素華、林哲宏 2008 以層級分析程序法進行網站瀏覽架構分析
2 陳慶彥 2002 PHP+MySQL動態網頁設計
3 Google Webmaster Tools (2010). Google Webmaster Tools Help
資料來源：inside
http://www.piece2ec.com.tw/news.asp?ID=2091
留言列表
