較資深的用戶(hù)或設(shè)計(jì)師應(yīng)該都還記得，90年代大家特別喜歡使用繁復(fù)的 GIF 動(dòng)態(tài)檔來(lái)裝飾網(wǎng)頁(yè)吧?而現(xiàn)在最流行的網(wǎng)頁(yè)風(fēng)格反而是簡(jiǎn)約的扁平化設(shè)計(jì)。 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì) 可以反映當(dāng)時(shí)的技術(shù)、使用者習(xí)慣、裝置、美學(xué)與設(shè)計(jì)思維的不同，相當(dāng)有趣并值得探討。

　　舉個(gè)最近流行的趨勢(shì)吧!我們可以看到 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD)越來(lái)越流行，許多網(wǎng)站皆改為此方式來(lái)設(shè)計(jì)，除了對(duì)移動(dòng)裝置用戶(hù)更友善外，甚至也影響百度的排名。接著，就讓我們通過(guò)北京網(wǎng)站建設(shè)針對(duì)今年度所見(jiàn)的趨勢(shì)整理而成的文章，一起回顧今年的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)潮與展望明年可能會(huì)流行的趨勢(shì)～

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

　　近幾年，因?yàn)橐苿?dòng)裝置普及，網(wǎng)站響應(yīng)式設(shè)計(jì)顯得格外重要，同時(shí)也相當(dāng)受到歡迎(Responsive web design，RWD)。

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

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

　　圖片大小使用百分比來(lái)定義。

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

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

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

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

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

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

　　未來(lái)，我們推測(cè)有更多扁平化設(shè)計(jì)的元素會(huì)流行：

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

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

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

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

　　極簡(jiǎn)主義： 省略不必要的元素，讓畫(huà)面看起來(lái)清新不擁擠。

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

　　動(dòng)畫(huà)可以加強(qiáng)網(wǎng)站想要告訴使用者的資訊，營(yíng)造更多互動(dòng)性與娛樂(lè)性。然而，設(shè)計(jì)師還是需要考量放置的位置，何處或何時(shí)出現(xiàn)才能達(dá)到動(dòng)畫(huà)想傳遞的效果;另外，也要思考如何帶入產(chǎn)品的故事元素與品牌個(gè)性?；旧希瑒?dòng)態(tài)效果可分為兩種動(dòng)畫(huà)類(lèi)型：

　　大尺寸的動(dòng)畫(huà)：通常使用大尺寸的動(dòng)畫(huà)，就是想讓它成為與使用者互動(dòng)的工具。其中有多種呈現(xiàn)方式，如滾動(dòng)視差或彈跳通知視窗等方式。

　　小尺寸的動(dòng)畫(huà)：小尺寸的動(dòng)畫(huà)大多應(yīng)用于資訊單向傳達(dá)的情境，如等待中的旋轉(zhuǎn)效果、滑鼠 hover 時(shí)的效果或載入進(jìn)度條的效果等。

　　在此，我們整理了7種較受歡迎的動(dòng)畫(huà)技術(shù)：

　　載入時(shí)的動(dòng)畫(huà)

　　雖然傳統(tǒng)的旋轉(zhuǎn)或連續(xù)的圓點(diǎn)動(dòng)畫(huà)就能表示載入狀態(tài)，但似乎滿(mǎn)無(wú)趣的。因此有一些設(shè)計(jì)師開(kāi)始設(shè)計(jì)載入時(shí)的動(dòng)畫(huà)(或頁(yè)面)，它們特別受到扁平化設(shè)計(jì)、 極簡(jiǎn)主義、 作品集與單頁(yè)類(lèi)型的網(wǎng)站歡迎。最后，我們也要提醒，設(shè)計(jì)要保持簡(jiǎn)單且避免加入音效，巧妙地融入網(wǎng)站特質(zhì)與識(shí)別配色。

　　呼叫或隱藏導(dǎo)航列和選單的轉(zhuǎn)場(chǎng)效果

　　將導(dǎo)航列或選單隱藏，是現(xiàn)在很多網(wǎng)站或 app 應(yīng)用的方式，尤其可以省下許多頁(yè)面空間。譬如說(shuō)，應(yīng)用 hamburger icon 來(lái)隱藏選單。但要特別注意別用太過(guò)度或過(guò)長(zhǎng)的轉(zhuǎn)場(chǎng)效果，造成使用者不悅。

　　hover 動(dòng)畫(huà)

　　使用者已經(jīng)習(xí)以為慣地透過(guò)滑鼠 hover 的方式，來(lái)瀏覽更多的資訊。因此增加 hover 的動(dòng)畫(huà)，直接地給予使用者視覺(jué)回饋，會(huì)讓這個(gè)行為更直覺(jué)。

　　Photo credit: Humaan

　　圖片集與幻燈片的動(dòng)畫(huà)

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

　　動(dòng)態(tài)的物件

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

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

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

　　背景動(dòng)畫(huà)或影片

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

　　四、 微互動(dòng)

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

　　基本上，微互動(dòng)可以幫助使用者完成三項(xiàng)事情：

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

　　了解這個(gè)動(dòng)作后的結(jié)果

　　幫助使用者操作一些功能

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

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

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

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

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

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