網(wǎng)頁(yè)設(shè)計(jì)將進(jìn)一步回歸現(xiàn)實(shí)。

　　從風(fēng)格、配色到功能，2017年將是現(xiàn)實(shí)與技術(shù)碰撞融合的一年。最終目的是將二者連接起來(lái)，實(shí)現(xiàn)更加無(wú)縫的瀏覽體驗(yàn)。

　　1.多元化導(dǎo)航

　　自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)興起后，“漢堡菜單”開(kāi)始流行。對(duì)于移動(dòng)設(shè)備瀏覽來(lái)說(shuō)確實(shí)是一個(gè)可行的解決方案，但是還是有缺陷：

　　不夠直觀，發(fā)現(xiàn)率低；

　　阻礙用戶參與；

　　低效率(對(duì)于用戶、設(shè)計(jì)師和開(kāi)發(fā)人員).

　　我們期待來(lái)年有更多實(shí)驗(yàn)性的導(dǎo)航設(shè)計(jì)靈感。

　　以下菜單設(shè)計(jì)趨勢(shì)可作為指南：

　　一、相框菜單欄

　　組合網(wǎng)頁(yè)的頂部、左側(cè)和右側(cè)，向下滾動(dòng)以形成獨(dú)特的相框菜單。

　　過(guò)來(lái)

　　彈出式菜單是彈出式菜單欄的演變。在Pop  over中，導(dǎo)航菜單占據(jù)整個(gè)頁(yè)面，加粗但不突兀。

　　根本不想要菜單

　　使用“滾動(dòng)”來(lái)提示用戶滾動(dòng)以獲取更多頁(yè)面內(nèi)容，而不是使用菜單。以圖片為主導(dǎo)，消除冗余信息的干擾，簡(jiǎn)潔突出，特別適合美食主題網(wǎng)站~

　　2.分割屏幕

　　將屏幕界面垂直分成左右相等的兩塊，用對(duì)比色分割，營(yíng)造出清晰的視覺(jué)分離效果。這種直白的網(wǎng)站風(fēng)格將成為2017年的一大趨勢(shì)。

　　簡(jiǎn)單的垂直分割看似一樣，但充滿想象力和空間，適合各種網(wǎng)站。

　　3.顏色恢復(fù)

　　這兩年，格雷大規(guī)模劫持了我們的網(wǎng)站。從前，白色的網(wǎng)頁(yè)背景變成了淺灰色；黑色文字變成深灰色；在材料設(shè)計(jì)中，深陰影用淺灰色表示。

　　2017年，更多色彩回歸的時(shí)候到了?？梢灶A(yù)見(jiàn)復(fù)古色調(diào)將會(huì)受到追捧。

　　無(wú)論最后決定用藍(lán)色還是橙色，都可以嘗試在上面添加一個(gè)“濾鏡”，為用戶營(yíng)造一種溫馨懷舊的感覺(jué)，提升網(wǎng)站的整體氛圍和質(zhì)感。

　　4.自定義滾動(dòng)

　　越來(lái)越多的網(wǎng)站放棄了傳統(tǒng)的滾動(dòng)條，而是創(chuàng)造了定制的滾動(dòng)體驗(yàn)。有些網(wǎng)站使用“虛擬滾動(dòng)”，即允許用戶在頁(yè)面程序中滾動(dòng)，而不受瀏覽器的控制。

　　虛擬滾動(dòng)支持更多類型的滾動(dòng)。比如設(shè)計(jì)成在水平線上左右滾動(dòng)，但是可以用普通鼠標(biāo)控制。

　　5.整合真實(shí)世界和數(shù)字世界

　　之前隨著Material  Deaign的出現(xiàn)，在平面設(shè)計(jì)的基礎(chǔ)上加入了陰影和坡度，給平面圖標(biāo)增加了立體視覺(jué)感。

　　2017年的網(wǎng)頁(yè)設(shè)計(jì)年是回歸現(xiàn)實(shí)的一年。然而，我們?cè)谶@里談?wù)摰牟皇莝keuomorphism，而是有形和可觸摸的現(xiàn)實(shí)世界與電子世界之間的無(wú)縫連接，創(chuàng)造一種沒(méi)有邊界的體驗(yàn)——真實(shí)的物體會(huì)保留其真實(shí)的細(xì)節(jié)，完全進(jìn)入數(shù)字環(huán)境，但不再受真實(shí)規(guī)則的限制?！∥矬w可以在屏幕上變得巨大，并與數(shù)字元素交互。

　　在Beoplay的網(wǎng)頁(yè)上，耳機(jī)被突出顯示并放大，遠(yuǎn)遠(yuǎn)超過(guò)實(shí)際尺寸，并與象征聲音的動(dòng)態(tài)線條互動(dòng)。

　　現(xiàn)實(shí)與屏幕的界限模糊后，用戶更容易與屏幕上的圖像產(chǎn)生情感聯(lián)系。

　　6.影院級(jí)互動(dòng)體驗(yàn)

　　大視頻背景已經(jīng)成為2015年網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)，并且越來(lái)越流行。如今技術(shù)的進(jìn)步大大縮短了視頻加載時(shí)間，而WebGL(一種3D繪圖技術(shù))讓這個(gè)背景更具互動(dòng)性。

　　7.讓產(chǎn)品設(shè)計(jì)師代替長(zhǎng)寬比

　　完美顯示在Retina屏幕上的畫(huà)面場(chǎng)景，在手機(jī)上可能根本看不出來(lái)。面對(duì)眾多顯示屏和各種長(zhǎng)寬比，設(shè)計(jì)師如何應(yīng)對(duì)這個(gè)“自適應(yīng)宇宙”？大多數(shù)時(shí)候，他們選擇剪輯。

　　怎樣才能在裁剪中保持設(shè)計(jì)的初衷而不丟失太多信息？你需要：數(shù)碼制作設(shè)計(jì)師。

　　設(shè)計(jì)的本質(zhì)是提供問(wèn)題的解決方案，而制作設(shè)計(jì)師則注重喚起正確的感受，讓用戶對(duì)自己看到的、體驗(yàn)到的東西產(chǎn)生關(guān)聯(lián)和共鳴。通過(guò)在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中引入制作設(shè)計(jì)師的思想，我們不會(huì)拘泥于要傳達(dá)的內(nèi)容是靜止的畫(huà)面，而是可以傳達(dá)故事的主題。

　　基于這種考慮，一些網(wǎng)站選擇忽略長(zhǎng)寬比。例如，一個(gè)由谷歌藝術(shù)文化(Google  Arts  Culture:The  Hidden  World  of  The  National  Parks)支持的網(wǎng)站，它以全屏視頻為背景，也以呈現(xiàn)為網(wǎng)站的主要內(nèi)容，可以連續(xù)擴(kuò)展和覆蓋任何大小的瀏覽器。

　　8.微動(dòng)效應(yīng)和微觀相互作用

　　運(yùn)動(dòng)可以吸引注意力，這是人類進(jìn)化的結(jié)果。但是，突如其來(lái)的大動(dòng)作，只會(huì)帶來(lái)震驚和警惕。相反，輕微而流暢的運(yùn)動(dòng)能給人一種充滿活力的感覺(jué)。

　　在為網(wǎng)頁(yè)設(shè)計(jì)動(dòng)畫(huà)時(shí)，請(qǐng)記住這兩者之間的區(qū)別。

　　在過(guò)去的很長(zhǎng)一段時(shí)間里，網(wǎng)頁(yè)中的動(dòng)畫(huà)經(jīng)常被用來(lái)“獎(jiǎng)勵(lì)”用戶的某些動(dòng)作，比如點(diǎn)擊。然而，最近越來(lái)越多的網(wǎng)頁(yè)開(kāi)始使用小動(dòng)畫(huà)作為設(shè)計(jì)元素來(lái)吸引用戶的注意力。

　　比如我們常見(jiàn)的“航路點(diǎn)”(scrolling  monitor觸發(fā)器插件)，當(dāng)一個(gè)頁(yè)面滾動(dòng)到一個(gè)元素時(shí)，會(huì)觸發(fā)一個(gè)動(dòng)畫(huà)，從而準(zhǔn)確地讓用戶關(guān)注我們希望他們關(guān)注的地方。