2017年最奪人眼球的8個網頁設計技術

時間: 2017-03-04 分類: 派琪資訊 瀏覽次數: 672
分享到:
上海網站建設微信品牌創意 企業官方網站建設新浪微博 專題活動網站建設QQ空間

影響網頁設計趨勢的最根本因素,并非審美情趣,而是技術的發展。

影響網頁設計趨勢的最根本因素,并非審美情趣,而是技術的發展。就過去幾年來說,以下4點值得在未來繼續關注:1. 移動設備使用人數逐年增長2. 移動和家用網絡中的帶寬增加3. WebGL技術的出現,使開發人員能夠借助系統顯示芯片在瀏覽器中展示各種3D模型和場景4. HTML5,CSS3的廣泛應用及JS框架技術的崛起這些技術進步在很大程度上對網頁設計產生了影響,其中最突出的是2010年“自適應(響應式)網頁設計”概念的產生及應用。在樣式方面,最近幾年扁平化設計成為主流,后來Google引入Material Design,又稍稍將我們的視線從抽象化中拉回來一些。2017年,網頁設計會進一步重返現實。從樣式、配色到功能性,2017會是現實與技術發生碰撞與融合的一年。最終目的就是連接這二者,實現更加“無縫銜接”的瀏覽體驗。

 

     

 

1.「 多樣化導航 」

自適應網頁設計興起之后,“漢堡包菜單”大行其道。它確實是針對移動設備瀏覽的可行方案,但仍然有缺陷:不夠直觀,可發現性低;妨礙用戶參與;效率較低(對用戶、設計師、開發來說都是)...我們期待接下來的一年中出現更多實驗性導航設計靈感。以下幾種菜單設計趨勢作為拋磚引玉:

a. 相框式菜單欄組合網頁上部、左右,以及向下滾動,形成一個獨特的相框式菜單。
b. Pop over!Pop over 是彈出式菜單欄(Pop-up)的演變,在Pop over中,導航菜單占據整個頁面,鮮明大膽卻又不突兀。
c. 干脆不要菜單了不使用菜單,取而代之用「scroll →」等提示用戶進行滾動以獲取更多頁面內容。把圖片作為主導,去除多余信息干擾,簡明突出,尤其適合美食主題網站~

2.「 分裂 屏幕 」

垂直將屏幕界面分為左右相等的兩塊,用撞色等方式進行分割,營造清晰的視覺分離效果,這種直截了當的網站設計風格會成為2017年一大趨勢。簡單的垂直分割看似千篇一律,其實充滿想象力和發揮空間,適用于各類網站。

3.「色彩復興 」

過去兩年中,灰色大規模劫持了我們的網站。從前的白色網頁背景變成了淡灰色;黑色文本變成了暗灰色;在Material Design中,用淺灰表示縱深的陰影。2017,是時候讓更多的顏色回來了。可以預見的是,復古色調將受到追捧。無論你最終決定用藍色還是橙色,可以再試著給它加上一個“濾鏡”,為用戶制造一種溫暖、懷舊的感覺,提升網站的整體氛圍與質感。

4.「自定義滾動 」

越來越多的網站舍棄了傳統的滾動條,轉而創造一種自定義的滾動體驗。一些網站使用的是“虛擬滾動”,即在頁面程序內讓用戶進行滾動操作,而不受瀏覽器控制。虛擬滾動使更多類型的滾動方式得以實現。比如設計為水平線上的左右滾動,但可以用正常的鼠標進行控制。

5.「 融合真實與數字世界 」

之前,Material Deaign的出現,在扁平化設計的基礎上加入陰影和斜度,為平面圖標增加了三維立體的視感。網頁設計的2017年,是進一步重回現實的一年。但這里所說的并非擬真設計(skeuomorphism),而是讓有形的、可觸碰的真實世界與電子世界無縫對接,創造沒有界限的體驗——現實中的物體將保留它們的真實細節,完整進入到數字環境中,但又不再受限于現實規則——小物件可以在屏幕上變得巨大,并與數字元素發生互動。在Beoplay的網頁上,耳機被突出放大,遠超出真實尺寸,同時與象征聲音的動態線條結合產生互動。現實與屏幕的界限被模糊之后,用戶與屏幕上的圖像更容易產生情感聯結。

6.「 影院級別的交互體驗

大幅的視頻錄像背景在2015年就成為網頁設計的趨勢,并且越來越流行。如今,技術的進步使得視頻加載時間大大縮短,同時,WebGL(一種3D繪圖技術)讓這種背景變得更具互動性。

7.「 讓美術指導取代長寬比 」

在Retina屏上完美顯示的圖片場景,在手機上可能看起來完全不是那么回事。面對諸多的顯示屏幕,以及各種各樣的長寬比,設計師如何處理這個“自適應的宇宙”?大多數情況下,他們選擇裁剪。怎樣才能在裁剪中保留設計的本意,不過分丟失信息呢?你需要:數字美術指導。設計的本質是提供解決問題的方法,而美術指導關注引發對的情感,讓用戶能夠與他們所看到、所經歷的事物產生關聯和共鳴。在網頁設計的過程中引入美術指導的思想,就不會拘泥于將所要傳達的內容看作一張靜止的圖片,而是將它作為一個能傳達故事的主題。基于這樣的考慮,一些網站已經選擇無視長寬比。例如,Google Arts &Culture支持的網站:The Hidden World of the National Parks(國家公園里的隱秘世界),這個網站用全屏vedio作為背景,同時也作為網站的主要內容呈現,它能不斷延伸覆蓋任何尺寸的瀏覽器。

8.「 微動效與微交互 」

運動能吸引注意,這是人類進化的結果。但突發性的大動作只會讓帶來驚嚇和警惕。相反,輕微流暢的運動能給人生機勃勃之感。在為網頁設計動效時,要記住這二者的差別。過去很長一段時間,網頁中的動效往往是用來“獎勵”用戶的某種動作,比如點擊。但最近,越來越多的網頁開始將小動效作為一種設計元素,用來吸引用戶的注意力。

比如我們常見的“waypoints”(滾動監聽觸發插件),當頁面滾動到某個元素時,觸發某種動畫,從而精準地讓用戶注意到我們想讓他們重點關注的地方。這些輕巧的互動不僅僅為用戶體驗加分,而且能賦予一個網站策劃獨特的個性魅力。

 

上海網站設計 上海網站設計公司 上海網站設計哪家好 www.khuvdc.live

未經允許不得轉載:PAIKY網站定制開發
11选5每期7码必出五码