相關(guān)新聞
較資深的用戶或設(shè)計師應(yīng)該都還記得，90年代大家特別喜歡使用繁複的 GIF 動態(tài)檔來裝飾網(wǎng)頁吧？而現(xiàn)在最流行的網(wǎng)頁風(fēng)格反而是簡約的扁平化設(shè)計。 網(wǎng)頁設(shè)計趨勢 可以反映當(dāng)時的技術(shù)、使用者習(xí)慣、裝置、美學(xué)與設(shè)計思維的不同，相當(dāng)有趣并值得探討。
舉個最近流行的趨勢吧！我們可以看到 響應(yīng)式網(wǎng)頁設(shè)計（RWD）越來越流行，許多網(wǎng)站皆改為此方式來設(shè)計，除了對移動裝置用戶更友善外，甚至也影響 Google 的搜尋排行。接著，就讓我們透過 UXPin 針對今年度所見的趨勢整理而成的文章，一起回顧今年的網(wǎng)頁設(shè)計風(fēng)潮與展望明年可能會流行的趨勢蘿～
1. UI 模板（patterns）激增
我們可以發(fā)現(xiàn)，在響應(yīng)式設(shè)計的風(fēng)潮下，似乎每個網(wǎng)站看起來都一樣。不過，造成這樣的現(xiàn)象，除了響應(yīng)式設(shè)計外，還有其他原因，譬如市場上出現(xiàn)大量的套版網(wǎng)站與工具（如 WordPress 等）。不過，相似排版與視覺的模板并非不好，這只是市場上出現(xiàn)大量好用的 UI 模板后，我們考量它所帶來的效益（省成本或可更專注于內(nèi)容等）而產(chǎn)生的必然的現(xiàn)象而已。
另外，這些模板的發(fā)展都相當(dāng)?shù)某墒欤袠O大的創(chuàng)新確實也相對困難。事實上，我們也不需要為了創(chuàng)新，而把一個通用成熟的東西重新發(fā)明。應(yīng)該把精力放在如何用 UI 模板打造出流暢的使用者體驗，以下是設(shè)計師不可不知的 UI 模板元素：
1. 漢堡圖標(biāo)（hamburger menu）：類似中文 “三" 的漢堡圖標(biāo)，雖然過去常被批評和討論（使用者不易理解符號意思等），但現(xiàn)在使用者大多能理解它的意思了。此外，它可把眾多的選項元素縮合（menu），相當(dāng)方便，在許多產(chǎn)品上都可看見這個圖標(biāo)的應(yīng)用。
2. 帳號注冊的方法：我們可以發(fā)現(xiàn)，幾乎所有網(wǎng)站的會員注冊頁面的排版方式都很接近，通常會在表格底下放置第三方登入的按鈕（如 Fb 等）。若注冊方式較複雜，也會將步驟拆解分散在多個頁面，并提供提示讓使用者知道如何進(jìn)行，藉此減少注冊流程中不良體驗的產(chǎn)生。
3. 長滾動條頁面（Long scroll）：這項設(shè)計的流行可以歸因于行動裝置用戶的增長，因為行動裝置適合不斷的將頁面往下滑動。除此之外，這項技術(shù)特別適合那些想要說故事的網(wǎng)站（不斷的往下滾動，讓使用者沉浸于功能介紹等內(nèi)容），并且還可以做出如簡報般，滾動一格就換到全新頁面的效果。
4. 卡片式排版：Pinterest 是應(yīng)用卡片式排版的先驅(qū)，因為卡片式易于讓使用者以掃描的方式了解每塊區(qū)域的內(nèi)容，所以相當(dāng)受到歡迎。每一塊卡片區(qū)域都有獨立的資訊，就如同內(nèi)容的容器般。此外，因其方形的型態(tài)，在不同的螢?zāi)淮笮∠拢W(wǎng)站也可以輕易地重新排配版面。
5. 高清晰度的大圖（Hero image）：視覺是人們感受事物的主要方式之一，網(wǎng)站上若擺放高清晰度的大圖，可很快的抓住使用者的注意力。這個趨勢主要歸因于網(wǎng)路的速度提升，使用者不必受苦于載入圖片時的等待。其中，我們最常看到的排版方式莫過于在網(wǎng)站最上方放置一張高清晰度的大圖，緊接著下方有由左至右并由上往下的系列內(nèi)容排列（zig-zagging）或卡片式的布局。
2. 豐富的動態(tài)效果
動畫可以加強(qiáng)網(wǎng)站想要告訴使用者的資訊，營造更多互動性與娛樂性。然而，設(shè)計師還是需要考量放置的位置，何處或何時出現(xiàn)才能達(dá)到動畫想傳遞的效果；另外，也要思考如何帶入產(chǎn)品的故事元素與品牌個性。基本上，動態(tài)效果可分為兩種動畫類型：
大尺寸的動畫：通常使用大尺寸的動畫，就是想讓它成為與使用者互動的工具。其中有多種呈現(xiàn)方式，如滾動視差或彈跳通知視窗等方式。
小尺寸的動畫：小尺寸的動畫大多應(yīng)用于資訊單向傳達(dá)的情境，如等待中的旋轉(zhuǎn)效果、滑鼠 hover 時的效果或載入進(jìn)度條的效果等。
在此，我們整理了7種較受歡迎的動畫技術(shù)：
載入時的動畫
雖然傳統(tǒng)的旋轉(zhuǎn)或連續(xù)的圓點動畫就能表示載入狀態(tài)，但似乎滿無趣的。因此有一些設(shè)計師開始設(shè)計載入時的動畫（或頁面），它們特別受到扁平化設(shè)計、 極簡主義、 作品集與單頁類型的網(wǎng)站歡迎。最后，我們也要提醒，設(shè)計要保持簡單且避免加入音效，巧妙地融入網(wǎng)站特質(zhì)與識別配色。
呼叫或隱藏導(dǎo)航列和選單的轉(zhuǎn)場效果
將導(dǎo)航列或選單隱藏，是現(xiàn)在很多網(wǎng)站或 app 應(yīng)用的方式，尤其可以省下許多頁面空間。譬如說，應(yīng)用 hamburger icon 來隱藏選單。但要特別注意別用太過度或過長的轉(zhuǎn)場效果，造成使用者不悅。
hover 動畫
使用者已經(jīng)習(xí)以為慣地透過滑鼠 hover 的方式，來瀏覽更多的資訊。因此增加 hover 的動畫，直接地給予使用者視覺回饋，會讓這個行為更直覺。
圖片集與幻燈片的動畫
圖片集（可切換圖片或呈現(xiàn)多張）與幻燈片（單張切換）的呈現(xiàn)方式，很適合讓使用者閱讀圖片，若增加更多互動性，可再提升使用者體驗。這樣的方式特別適合攝影、產(chǎn)品與作品集類型的網(wǎng)站。
動態(tài)的物件
人類很自然地會被動態(tài)的事物所吸引，因此設(shè)計師可以透過這個方法來抓住使用者的注意力，也可以讓畫面視覺更有層次感。甚至可以將其應(yīng)用于表單、CTA 按鈕或選單上，以達(dá)到商業(yè)的效益。
透過滾動滑鼠一步一步的呈現(xiàn)動畫效果
流暢的滾動效果必須依賴動畫的呈現(xiàn)與提供更進(jìn)一步的控制權(quán)給予使用者。使用者可以自行決定觸發(fā)下一段內(nèi)容的步調(diào)。
背景動畫或影片
在背景放置簡單的動畫或影片，可讓網(wǎng)站更加吸引人，但必須保持簡單與色調(diào)溫和，不然容易造成使用者的分心。而製作的要領(lǐng)在于讓動畫或影片獨立于一個區(qū)塊或使用緩緩的動態(tài)效果來呈現(xiàn)大圖。
