一、UI 工具的擴(kuò)展

響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）近來人氣急遽攀升，這也意味著越來越多網(wǎng)站看起來很相像。不過，也不僅止于是響應(yīng)式網(wǎng)頁設(shè)計(jì)，于競(jìng)爭(zhēng)市場(chǎng)上WordPress 也有只看不見的手在操作著。

然而，有相似的外觀不盡然不好。我們改變了使用網(wǎng)路的方式，許許多多的UI設(shè)計(jì)也因此孕育而出。設(shè)計(jì)模式發(fā)展儼然已成熟，甚至到了快看不見創(chuàng)新的UI工具了。再換句話說，一個(gè)結(jié)帳功能的可能性僅僅如此，沒有理由還要再多此一舉改變它；同樣的，登入模組也是。UI工具必須透過流暢地體驗(yàn)來引領(lǐng)使用者操作。

這里提到的一些工具，你應(yīng)該要熟悉：

1. 漢堡式選單（THE HAMBURGER MENU）：

雖然有部分設(shè)計(jì)者不推薦，但依然不能否認(rèn)它被廣泛使用，是使用者熟悉的功能之一。

2. 注冊(cè)帳號(hào)（ACCOUNT REGISTRATION）：

你能發(fā)現(xiàn)，當(dāng)要在一個(gè)網(wǎng)站進(jìn)行注冊(cè)時(shí)，會(huì)有幾種模式：它可能是填寫一個(gè)表單或一顆按鈕，就成功注冊(cè)帳號(hào)了。多步驟式向?qū)П韱我苍S是有效的，因?yàn)橛兄敢淮髩K」必填欄位；降低摩擦并促成使用者有效地跑完流程。

3. 長(zhǎng)頁卷動(dòng)（LONG SCROLL）：

能夠把你所有重要元素通通都涵蓋在一起，目前已無人不曉了；再說，因?yàn)槭謾C(jī)的操作，幾乎每個(gè)人都習(xí)慣了長(zhǎng)頁卷動(dòng)。這項(xiàng)技術(shù)對(duì)于希望透過故事敘說來吸引使用者的網(wǎng)站尤為適合。不過，你還是可以不使用卷軸，制作多頁式的網(wǎng)站格局。

4. 多層版面配置（CARD LAYOUTS）：

始于Pinterest，多層版面的應(yīng)用隨處可見。由于多層版面配置好地讓所有資訊，在一口大的范圍之內(nèi)全部一目了然；每個(gè)多層版面都是一個(gè)統(tǒng)整的概念。因?yàn)樗鼈兙拖袷恰竷?nèi)容元件（content containers）」，矩形的形狀更讓它很好放置在不同載具的中斷點(diǎn)。

5. 形象影像（HERO IMAGES）：

視覺是最給人強(qiáng)烈印象的感覺，HD 高畫質(zhì)影像是抓住使用者目光最快速的方式之一。由于網(wǎng)路頻寬與數(shù)據(jù)壓縮的進(jìn)步，使用者越加不能接受載入的時(shí)間過度緩慢。一個(gè)常見的布局，常常會(huì)是一個(gè)形象影像在卷軸頂端，接著是不規(guī)則片段或是以矩形為基礎(chǔ)做排列。

二、豐富的動(dòng)畫特效

越來越多人利用動(dòng)畫特效來增添網(wǎng)站的故事性，讓體驗(yàn)充滿了互動(dòng)和娛樂性。但你不能僅止于四處放動(dòng)畫特效，要深思熟慮是否加了它可以為網(wǎng)站故事和整體加分。

動(dòng)畫特效可以分為兩類：

1. 大規(guī)模動(dòng)畫特效：

主要被使用為互動(dòng)性工具，對(duì)使用者有較大的影響力，包括視差滾動(dòng)（Parallax scrolling）和彈窗式通知（Pop-up notifications）等功能。

2. 小范圍動(dòng)畫特效：

這些包含了微調(diào)器（Spinners）、懸停效果（Hover tools）和載入條（Loading bars），且使用者也無須輸入資料。

接著，我們將介紹最常見的７種動(dòng)畫特效：

(1) 載入特效（LOADING ANIMATIONS）

提高娛樂性與使用者體驗(yàn)取代了原本是乏而無味的過程。熱門的載入特效通常是扁平化設(shè)計(jì)（Flat design）、極簡(jiǎn)風(fēng)格、組合性或一頁式網(wǎng)站。

讓它們簡(jiǎn)單化，最好不要加音效；這樣更讓你的網(wǎng)站作為調(diào)色盤般，具有個(gè)人風(fēng)格。

SlackviaLauren Tan

(2) 非滾動(dòng)式導(dǎo)航與選單（NAVIGATION AND MENUS (NONSCROLLING)）

隱藏導(dǎo)航選單是越來越受到歡迎，特別是因?yàn)槟軠p少螢?zāi)坏恼加每臻g。

(3) 懸停動(dòng)畫（HOVER ANIMATIONS）

懸停特效給了一個(gè)使用者用滑鼠操作網(wǎng)站的直觀感受，使用者瀏覽有所保留的內(nèi)容時(shí)，自動(dòng)的懸停動(dòng)畫可以即時(shí)提供視覺反饋。

Photo credit:Humaan

(4) 相簿與幻燈片（GALLERIES AND SLIDESHOWS）

相簿與幻燈片有效提供了使用者展示多張圖片，且不會(huì)過度負(fù)擔(dān)。

(5) 影格動(dòng)畫（MOTION ANIMATION）

我們的眼睛自然眨動(dòng)一般地呈現(xiàn)方式，影格動(dòng)畫有效地提高視覺層次。此模式的設(shè)計(jì)有助于受到使用者的注意，且增添趣味性。

Photo credit:Bugabooviaawwwards

(6) 卷動(dòng)（SCROLLING）

平滑卷動(dòng)利用動(dòng)畫并提供了更進(jìn)一步的操作權(quán)給使用者，動(dòng)畫特效的快慢可自行拿捏。

Photo credit:Squarespace

(7) 背景動(dòng)畫、影片（BACKGROUND ANIMATIONS/ VIDEOS）

一個(gè)簡(jiǎn)單的動(dòng)畫背景若適量使用，可以增加網(wǎng)站識(shí)別度；一旦過量也可能導(dǎo)致使用者不再光顧。

三、微互動(dòng)（MICROINTERACTIONS）

微互動(dòng)大家其實(shí)并不陌生，它經(jīng)常出現(xiàn)在我們周遭。開始新的一天，透過微互動(dòng)從手機(jī)關(guān)閉鬧鈴那一刻的使用者介面；每個(gè)人可能都是如此。我們也使用越來越多因此衍生而出的App 與載具裝置。

微互動(dòng)大多是執(zhí)行，或者協(xié)助你執(zhí)行，這有些不同：

Photo credit:Slack

1. 訊息的狀態(tài)或一點(diǎn)反饋

2. 看得見操作結(jié)果

3. 協(xié)助使用者操作

微互動(dòng)在App 扮演著重要角色，使冰冷文字注入靈魂，不再機(jī)械僵化；互動(dòng)型式讓載具裝置更加人性化地引導(dǎo)使用者，在關(guān)鍵的時(shí)刻亦更加提高實(shí)用性能。

四、實(shí)感設(shè)計(jì)：更豐富的扁平化設(shè)計(jì)選擇（MATERIAL DESIGN）

去年， Google 推出新的設(shè)計(jì)理念：實(shí)感設(shè)計(jì)（Material Design）；利用陰影、移動(dòng)、深淺等效果，為使用者創(chuàng)造出更貼近真實(shí)的設(shè)計(jì)。Google 在七月發(fā)布的精簡(jiǎn)版實(shí)感設(shè)計(jì)（Material Design Lite）更適合于網(wǎng)站。

實(shí)感設(shè)計(jì)的目的是為了創(chuàng)造整潔，更專注于使用者經(jīng)驗(yàn)（UX）的現(xiàn)代主義設(shè)計(jì)。這也帶來不少人抨擊Google 的設(shè)計(jì)美學(xué)，因?yàn)樗淖兞擞螒蛞?guī)則。實(shí)感設(shè)計(jì)簡(jiǎn)單的外觀，與現(xiàn)在發(fā)展趨勢(shì)有著一大共通點(diǎn)，那就是扁平化設(shè)計(jì)。然而，實(shí)感設(shè)計(jì)在扁平化設(shè)計(jì)上有了更多變化，加入了深淺、陰影效果。

五、響應(yīng)式設(shè)計(jì)（RESPONSIVE DESIGN）

拜近年行動(dòng)網(wǎng)路使用率的提高所賜，現(xiàn)來RWD（響應(yīng)式網(wǎng)頁設(shè)計(jì)）大受歡迎?？梢钥隙ǖ恼f，響應(yīng)式設(shè)計(jì)還不會(huì)退流行，因?yàn)镽WD為商家提供了一個(gè)功能齊全、載具變換友善，卻相對(duì)方法簡(jiǎn)單且價(jià)格低廉。為了在RWD使用高峰期更有效地發(fā)揮，根據(jù)Guy's Pod給予設(shè)計(jì)師的建議是：

1. 在JavaScript 與CSS 圖片讀取為無標(biāo)簽時(shí)，仍會(huì)下載圖片，應(yīng)避免使其徒增不必要的容量。

2. 以百分比來定義響應(yīng)式圖片。

3. 以JavaScript 控制載入或桌面版用的JavaScript 組件，應(yīng)該避免用于較小的載具裝置；特別要注意第三方腳本。因?yàn)槿菀捉档托阅芑蛴糜诠蚕碣Y源發(fā)生問題。

4.使用RESS：Responsive and Server Side。

5. 請(qǐng)使用者有效的測(cè)試每個(gè)頁面，并借此優(yōu)化網(wǎng)站。

毫無疑問，RWD是非常實(shí)用且多功能性的。其呈現(xiàn)的重點(diǎn)不僅在于UX，Google更在今年四月份發(fā)表行動(dòng)裝置的友善更新（Mobile Friendly update），就是因?yàn)镽WD能與極簡(jiǎn)風(fēng)格高度相容，且減少網(wǎng)站的體積負(fù)擔(dān)；它們可以自動(dòng)適應(yīng)任何中斷點(diǎn)與螢?zāi)怀叽纭?/p>

六、扁平化還不會(huì)退流行

扁平化設(shè)計(jì)已行之有年，它與極簡(jiǎn)主義、RWD、實(shí)感設(shè)計(jì)等設(shè)計(jì)趨勢(shì)兼容。在未來，我們很可能會(huì)看到以下扁平化設(shè)計(jì)成為主流。

1.長(zhǎng)版陰影（Long shadow）：發(fā)展出更深度的扁平化設(shè)計(jì)。

2.活潑的色彩配置（Vibrant color schemes）：熱門的UI框架及樣版，讓更多人開始采納更鮮明的色彩應(yīng)用于設(shè)計(jì)。

3.排版簡(jiǎn)約化（Simply typography）：在扁平化設(shè)計(jì)上，以簡(jiǎn)單直白的方式傳達(dá)信息，幫助文章更清晰了然。

4.虛擬按鈕（Ghost buttons）：在UX的表現(xiàn)上，使用者能不被干擾，大部分使用于外框、滑鼠滑過會(huì)有變化的按鈕。

5.極簡(jiǎn)主義（Minimalism）：打造簡(jiǎn)潔、清新的介面，降低UI元件的使用量。

網(wǎng)頁設(shè)計(jì)趨勢(shì)上的額外建議

別盲目追隨潮流，因?yàn)榭赡苤皇且粫r(shí)的「時(shí)尚」。趨勢(shì)代表流行的技術(shù)，雖然誘人，但要確保它是適合你的。舉例來說，一個(gè)電子商務(wù)網(wǎng)站可絕對(duì)不想看到一頁式無限卷動(dòng)的網(wǎng)頁設(shè)計(jì)。

趨勢(shì)對(duì)設(shè)計(jì)師而言，僅僅是多了一項(xiàng)工具；怎么用得好，才是你的工作。

AWWWARDS：全球知名網(wǎng)站評(píng)分平臺(tái)，如網(wǎng)頁設(shè)計(jì)界奧斯卡般的存在

他們聚集了各地網(wǎng)頁設(shè)計(jì)菁英，分享設(shè)計(jì)經(jīng)驗(yàn)、實(shí)用網(wǎng)頁知識(shí)、創(chuàng)新技術(shù)等，是一個(gè)討論指教與互動(dòng)的開放平臺(tái)。每年Awwwards 團(tuán)隊(duì)皆集結(jié)世界各國網(wǎng)頁領(lǐng)域人才作為專業(yè)評(píng)審，提名認(rèn)可的優(yōu)秀網(wǎng)頁作品接受全球網(wǎng)友們?cè)u(píng)選，并為杰出網(wǎng)頁頒發(fā)獎(jiǎng)項(xiàng)；其設(shè)計(jì)獎(jiǎng)相當(dāng)具有公信力，亦是網(wǎng)頁設(shè)計(jì)界的首屈指標(biāo)。

網(wǎng)頁題目：未來網(wǎng)站設(shè)計(jì)趨勢(shì)展望
標(biāo)題鏈接：http://jinyejixie.com/news/79930.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)