網頁設計將進一步回歸現實。
從風格、配色到功能,2017年將是現實與技術碰撞融合的一年。最終目的是將二者連接起來,實現更加無縫的瀏覽體驗。
1.多元化導航
自適應網頁設計興起后,“漢堡菜單”開始流行。對于移動設備瀏覽來說確實是一個可行的解決方案,但是還是有缺陷:
不夠直觀,發現率低;
阻礙用戶參與;
低效率(對于用戶、設計師和開發人員).
我們期待來年有更多實驗性的導航設計靈感。
以下菜單設計趨勢可作為指南:
一、相框菜單欄
組合網頁的頂部、左側和右側,向下滾動以形成獨特的相框菜單。
過來
彈出式菜單是彈出式菜單欄的演變。在Pop over中,導航菜單占據整個頁面,加粗但不突兀。
根本不想要菜單
使用“滾動”來提示用戶滾動以獲取更多頁面內容,而不是使用菜單。以圖片為主導,消除冗余信息的干擾,簡潔突出,特別適合美食主題網站~
2.分割屏幕
將屏幕界面垂直分成左右相等的兩塊,用對比色分割,營造出清晰的視覺分離效果。這種直白的網站風格將成為2017年的一大趨勢。
簡單的垂直分割看似一樣,但充滿想象力和空間,適合各種網站。
3.顏色恢復
這兩年,格雷大規模劫持了我們的網站。從前,白色的網頁背景變成了淺灰色;黑色文字變成深灰色;在材料設計中,深陰影用淺灰色表示。
2017年,更多色彩回歸的時候到了。可以預見復古色調將會受到追捧。
無論最后決定用藍色還是橙色,都可以嘗試在上面添加一個“濾鏡”,為用戶營造一種溫馨懷舊的感覺,提升網站的整體氛圍和質感。
4.自定義滾動
越來越多的網站放棄了傳統的滾動條,而是創造了定制的滾動體驗。有些網站使用“虛擬滾動”,即允許用戶在頁面程序中滾動,而不受瀏覽器的控制。
虛擬滾動支持更多類型的滾動。比如設計成在水平線上左右滾動,但是可以用普通鼠標控制。
5.整合真實世界和數字世界
之前隨著Material Deaign的出現,在平面設計的基礎上加入了陰影和坡度,給平面圖標增加了立體視覺感。
2017年的網頁設計年是回歸現實的一年。然而,我們在這里談論的不是skeuomorphism,而是有形和可觸摸的現實世界與電子世界之間的無縫連接,創造一種沒有邊界的體驗——真實的物體會保留其真實的細節,完全進入數字環境,但不再受真實規則的限制。——小物體可以在屏幕上變得巨大,并與數字元素交互。
在Beoplay的網頁上,耳機被突出顯示并放大,遠遠超過實際尺寸,并與象征聲音的動態線條互動。
現實與屏幕的界限模糊后,用戶更容易與屏幕上的圖像產生情感聯系。
6.影院級互動體驗
大視頻背景已經成為2015年網頁設計的趨勢,并且越來越流行。如今技術的進步大大縮短了視頻加載時間,而WebGL(一種3D繪圖技術)讓這個背景更具互動性。
7.讓產品設計師代替長寬比
完美顯示在Retina屏幕上的畫面場景,在手機上可能根本看不出來。面對眾多顯示屏和各種長寬比,設計師如何應對這個“自適應宇宙”?大多數時候,他們選擇剪輯。
怎樣才能在裁剪中保持設計的初衷而不丟失太多信息?你需要:數碼制作設計師。
設計的本質是提供問題的解決方案,而制作設計師則注重喚起正確的感受,讓用戶對自己看到的、體驗到的東西產生關聯和共鳴。通過在網頁設計過程中引入制作設計師的思想,我們不會拘泥于要傳達的內容是靜止的畫面,而是可以傳達故事的主題。
基于這種考慮,一些網站選擇忽略長寬比。例如,一個由谷歌藝術文化(Google Arts Culture:The Hidden World of The National Parks)支持的網站,它以全屏視頻為背景,也以呈現為網站的主要內容,可以連續擴展和覆蓋任何大小的瀏覽器。
8.微動效應和微觀相互作用
運動可以吸引注意力,這是人類進化的結果。但是,突如其來的大動作,只會帶來震驚和警惕。相反,輕微而流暢的運動能給人一種充滿活力的感覺。
在為網頁設計動畫時,請記住這兩者之間的區別。
在過去的很長一段時間里,網頁中的動畫經常被用來“獎勵”用戶的某些動作,比如點擊。然而,最近越來越多的網頁開始使用小動畫作為設計元素來吸引用戶的注意力。
比如我們常見的“航路點”(scrolling monitor觸發器插件),當一個頁面滾動到一個元素時,會觸發一個動畫,從而準確地讓用戶關注我們希望他們關注的地方。