較資深的用戶或設(shè)計師應(yīng)該都還記得，90年代大家特別喜歡使用繁復(fù)的 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è)計，除了對移動裝置用戶更友善外，甚至也影響百度的排名。接著，就讓我們通過北京網(wǎng)站建設(shè)針對今年度所見的趨勢整理而成的文章，一起回顧今年的網(wǎng)頁設(shè)計風(fēng)潮與展望明年可能會流行的趨勢～

　　一、響應(yīng)式設(shè)計

　　近幾年，因為移動裝置普及，網(wǎng)站響應(yīng)式設(shè)計顯得格外重要，同時也相當(dāng)受到歡迎(Responsive web design，RWD)。

　　以企業(yè)的角度而言，建構(gòu)一個功能齊全且對于移動端友善的網(wǎng)站，Responsive design 是一個相對簡單且省錢的方式，但若是應(yīng)用錯誤的方法，可能會影響效能。借此，Guy’s Pod 向設(shè)計師提出了一些建議：

　　圖片顯示避免使用 display: none 的寫法。雖然使用者沒有看見圖片，但其實仍然是有被 load 進(jìn)來的，因此在網(wǎng)頁的效能上產(chǎn)生了不必要的負(fù)擔(dān)。

　　圖片大小使用百分比來定義。

　　有條件式的引用 Java，因為許多 js 元件在小尺寸的裝置上(手機)是無法被使用的。特別需要注意的是第三方 (如社群分享按鈕)對于網(wǎng)站而言，常常會有負(fù)面的影響與降低效能。

　　使用 RESS – Responsive and Server Sid雖然這些設(shè)計趨勢是因為帶來某些效益而受到歡迎，但千萬別盲目地追求流行，一定要以使用者為中心思考，確保應(yīng)用這些設(shè)計趨勢對他們是好的。為了有效的量測與優(yōu)化每個網(wǎng)站，應(yīng)將效能測試這項目加入到流程中。

　　效能不單單只是使用者判斷體驗好壞的關(guān)鍵，同時也會影響 Google 的檢索排名。此外，由于最近流行的極簡風(fēng)格讓網(wǎng)頁排除了不必要的元素而減少頁面的復(fù)雜性，非常適合響應(yīng)式的設(shè)計。同時，我們也可以看到許多具響應(yīng)式設(shè)計的網(wǎng)站使用卡片式的排列，可在不同螢?zāi)怀叽缦?，輕易的重新調(diào)整排列。

　　響應(yīng)式設(shè)計已慢慢由趨勢轉(zhuǎn)變?yōu)樽罴训膶嵺`方式。然而設(shè)計師們也必須想出一些聰明的方式解決任何速度的問題。無疑地，響應(yīng)式設(shè)計是十分有用且通用的，但它也應(yīng)該是高效能的，才可以提供出色的使用者體驗(UX)。

　　二、扁平化設(shè)計會退燒嗎?

　　扁平化設(shè)計風(fēng)格其實已經(jīng)流行一陣子了，目前它也與其他相似風(fēng)格與設(shè)計語言融合得很好，如極簡主義、響應(yīng)式網(wǎng)站設(shè)計與 Google 的 Material Design。

　　未來，我們推測有更多扁平化設(shè)計的元素會流行：

　　長陰影(Long shadow)：長陰影可以帶給扁平元素視覺上的深度。

　　鮮明色調(diào)： 一些受歡迎的 UI 模板都開始使用越來越鮮明的色系。

　　簡單的文字排版：簡單的文字排版，可以確保文字在扁平化設(shè)計下，保持清晰與可讀性。

　　幽靈按鈕(Ghost button)： 幽靈按鈕的意思就是，讓按鈕僅留下外框線與說明文字，當(dāng)使用者透過滑鼠 hover 時，才呈現(xiàn)變化。這樣可以讓使用者更專注于按鈕的功能性，避免上方的顏色、形狀或視覺表現(xiàn)而分心。

　　極簡主義： 省略不必要的元素，讓畫面看起來清新不擁擠。

　　三、豐富的動態(tài)效果

　　動畫可以加強網(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 的動畫，直接地給予使用者視覺回饋，會讓這個行為更直覺。

　　Photo credit: Humaan

　　圖片集與幻燈片的動畫

　　圖片集(可切換圖片或呈現(xiàn)多張)與幻燈片(單張切換)的呈現(xiàn)方式，很適合讓使用者閱讀圖片，若增加更多互動性，可再提升使用者體驗。這樣的方式特別適合攝影、產(chǎn)品與作品集類型的網(wǎng)站。

　　動態(tài)的物件

　　人類很自然地會被動態(tài)的事物所吸引，因此設(shè)計師可以透過這個方法來抓住使用者的注意力，也可以讓畫面視覺更有層次感。甚至可以將其應(yīng)用于表單、CTA 按鈕或選單上，以達(dá)到商業(yè)的效益。

　　透過滾動鼠標(biāo)一步一步的呈現(xiàn)動畫效果

　　流暢的滾動效果必須依賴動畫的呈現(xiàn)與提供更進(jìn)一步的控制權(quán)給予使用者。使用者可以自行決定觸發(fā)下一段內(nèi)容的步調(diào)。

　　背景動畫或影片

　　在背景放置簡單的動畫或影片，可讓網(wǎng)站更加吸引人，但必須保持簡單與色調(diào)溫和，不然容易造成使用者的分心。而制作的要領(lǐng)在于讓動畫或影片獨立于一個區(qū)塊或使用緩緩的動態(tài)效果來呈現(xiàn)大圖。

　　四、 微互動

　　人們幾乎每天都與微信接觸，例如關(guān)閉手機鬧鈴的過程或在 FB 的照片上按贊。每一個互動時刻都相當(dāng)短暫快速，也不需要多想。就如同你關(guān)閉鬧鈴，很自然地就透過介面完成了這項事情。而也有越來越多的 app 開始思考它，并設(shè)計微互動的介面、操作方式與流程。

　　基本上，微互動可以幫助使用者完成三項事情：

　　告知現(xiàn)在處于何種狀態(tài)或回饋資訊

　　了解這個動作后的結(jié)果

　　幫助使用者操作一些功能

　　微互動的設(shè)計是每個 app 開發(fā)中十分關(guān)鍵的部分之一。因此，我們根據(jù)此篇文章( Web Design Trends 2015 and 2016)給與開發(fā)團(tuán)隊一些建議：微互動在設(shè)計時，必須盡量不打擾使用者，千萬別過度設(shè)計，并保持簡單;仔細(xì)思考每個細(xì)節(jié)，同時讓過程如同 “人類" 之間的互動;文字內(nèi)容的撰寫多點人性，不要如機器人一般。此外，每一個互動的途徑都要以使用者為中心思考，讓產(chǎn)品更人性化，并提升可用性。當(dāng)然，這會加重開發(fā)團(tuán)隊的工作量，但這些確實是使用者真正或想要互動的部分。

　　五、Material Design: 后扁平化設(shè)計時代的創(chuàng)新者

　　去年，Google 發(fā)布了它的設(shè)計風(fēng)格語言： Material Design。它利用陰影來表現(xiàn)各個狀態(tài)，而陰影的深度又能帶給使用者操作扁平化物件的真實感受(例如物件前后關(guān)系)。

　　Material Design 目的是希望創(chuàng)造出簡潔、現(xiàn)代的設(shè)計風(fēng)格，并專注于使用者體驗(UX)。然而，過去 Google 與設(shè)計美學(xué)談不上關(guān)系，而這次 Material Design 發(fā)表后，反而造成流行并受到各界贊揚。雖然 Material Design 的簡約設(shè)計元素，與扁平化設(shè)計相似。不過相較于扁平化，Material Design 使用了深度表現(xiàn)與陰影，更可表現(xiàn)元件的前后關(guān)系。

　　盡管 Google提出這個設(shè)計語言，想要打造可供跨裝置使用的漂亮 UI 與良好體驗。但至今，應(yīng)用 Material Design 的產(chǎn)品大多是 app。Google 也發(fā)現(xiàn)了這個現(xiàn)象，因此在七月時發(fā)布了網(wǎng)站可用的套件 – Material Design Lite(MDL)。這個套件結(jié)合 vanilla CSS、HTML 和 Java，并希望它夠輕量并易于開發(fā)人員使用，同時保有 Material Design 的視覺元素。此外，MDL 并不是依賴在特定框架上，所以設(shè)計師可以用各種前端方法來設(shè)計網(wǎng)站，同時它的程式也非常輕量化。

　　運城網(wǎng)站建設(shè)關(guān)于網(wǎng)頁設(shè)趨勢的小建議