聯成電腦網站設計好文分享:2017年9個前衛的網頁設計趨勢
年初曾經和大家分享2017年的網頁趨勢,在2017年年底幫大家補充9個前衛的網頁設計趨勢,本篇文章是由從事13年平面與網頁設計經驗的作者Joanna Krenz Kurowska & Jerzy Kurowski所匯整完成,一起來檢視一下你所接觸的網頁,或是平常愛上的網站,究竟有沒有運用到這些項目呢?
文章前言
網頁設計是表現形式和功能的產物,因此,網頁設計趨勢深受技術影響,無論是我們所使用的裝置或設備類型、裝置的處理能力、我們的瀏覽器或程式庫的複雜程度,但他們也受到設計原則和觀點的影響。
資料來源:99designs
過去幾年給了我們一些技術變革和進步,其中包括:
►行動裝置日益普及。
► 透過WebGL技術在瀏覽器中支援3D效果。
►HTML5、CSS3,以及前端JavaScript框架的興起。
► 增加網路頻寬(包括行動裝置和家庭互聯網)。
這些技術已經結合在一起,並在網頁設計範例上產生巨大的轉變,特別是創造一種響應式的設計理念(逐漸以行動裝置為優先考量)。
從美學的角度來看,三年前的扁平化設計非常火紅,然後Google推出Material Design(本質設計) ,這帶我們跳脫了抽象。2017是設計向現實更邁進的一年,無論它是否透過形式、顏色的選擇,或者是功能性來說,2017年是一個混合性的一年,是個現實和科技碰撞去創造無縫瀏覽經驗的一年。
以下是我們認為可以彌補這差距的9個網頁設計趨勢:
1.有別於以往導覽模式的選單
從網頁設計的黑暗時代(即20年前)開始,有兩種標準的導覽模式:頂端和側欄。隨著響應式網頁設計的興起,我們已經看到在簡短的項目中增加了漢堡選單,而這種選單模式在行動裝置中是可行的解決方案,但並不完美,被譴責的原因包含:
► 阻礙使用者參與。
► 發現性低。
► 對於使用者和設計/開發團隊來說效率較低。
► 甚至“ 食之無味,棄之可惜”。
隨著這種錯雜、矛盾的感覺,以及行動瀏覽的持續崛起,我們期望在2017年能看到許多選單的實驗,這裡有幾種方法來推翻漢堡選單的趨勢:
讓你的選單更有架構
Hillsiderancho.com使用獨特的選單架構,結合頂端、左側、右側和滾動式導覽。
根本不要使用選單
使用者理解捲軸的作用,他們不再需要被告知在網站上要做什麼,自然而然就會使用,直到找到他們想要的資訊。有一些設計師選擇根本不要選單,讓使用者可以在探索網站的時候可以很有組織的找到內容。隨著手機和平板電腦的使用更普遍,這也開拓了橫向捲軸發展的機會。
The Anonymous Hamburger 不使用選單,而是要求使用者滾動捲軸以觀看更多的內容。
接受漢堡選單,並讓它成為唯一的導覽方式
與其設計出兩種不一樣的選單,一種給桌上型電腦、一種給手機裝置瀏覽,許多網站正選擇讓"漢堡"這樣的圖示普遍存在。自從人們學到了三條線等於選單的意思之後,已經沒有必要在螢幕上做一個實際的導覽。當然,你也不需要去使用實際的漢堡圖示,我們也看見設計師們開始利用版面設計,去指示哪裡是使用者要點擊,可以進去選單的地方。
Dursun 在網站上的所有版本漢堡導覽,包括桌機。
Dess 使用“all”這個字,讓我們知道在哪裡點擊。
Marmo Elite 用大量的排版設計替代了漢堡圖示。
彈出式選單
因為我們太盲目習慣於“下拉式”選單的使用模式,所以我們在探索一個簡易的選擇時遭遇到了失敗,這時候,彈出式的導覽!(或者,就像以下這個例子的情況,它彈出到螢幕中間。)螢幕中間有很多空間去放置選單,這也會讓選單很容易被看見與被解讀,讓使用者不需要上下滾動。
點擊側欄中優雅的漢堡選單,會於螢幕中央彈出導覽選單。網站:circlesconference.com
或彈出後覆蓋整頁的選單
彈出式導覽的另一個變化是“popover”,是一種覆蓋整頁的導覽。這是很大膽的設計,但它依然很自然,不突兀。popover在出版印刷時會將內含元素收回。
Pinqponq網站使用漢堡選單。
www.edelson.com 使用相同的概念,但popover導覽由六格方塊組成。每格元素,當滑鼠停在上方時,就會改變整頁的背景圖,並標示了照片上的焦點。
2.分割畫面
在螢幕中垂直分割兩個相等的畫面,讓人視覺上感覺更清晰,這也是我們期待在2017年能看到更多的。這是一個視覺引人注目的趨勢,讓人一目了然,而且給網站一個自然的感覺,這個趨勢也是相當多樣的,在較小的螢幕或設備上,這兩個區塊可以上下排列或是改為側面導覽。
ParadisePad
由duskoskoko設計的網站
Texas Beard Company 將網站畫面分為兩塊,包括令人讚嘆的鬍子圖檔和他們的產品。
3.復古質感的配色
在過去的幾年中,網頁設計一直以灰色為主:使用淺灰色背景代替白色,較深的灰色文字代替黑色,在本質設計中,利用灰色陰影創造出深度。在2017年,我們終於看到了色彩的回歸,明亮的復古色調回來了!
網站配色是複雜的,可能受到很多因素的影響,包括現有的企業形象、產業、色彩心理學和個人品味等。無論你決定喜歡藍色,還是更喜歡橘色,只要想像將你所選擇的顏色丟進Instagram篩選器就能營造出溫暖、懷舊的感覺。
Wolf and Son 選擇溫和的棕褐色調,使用舊照片,並強調他們家族傳承和高品質工藝的品牌價值觀。
The Practical Man 使用70年代風格的綠色為他們的網站帶來一種有趣的懷舊感。
SmartFX (由 Arthur Baklachyan設計) 喚起了70年代柔和的亮色系。
gassiheld.de (由 smashingbug設計) 使用一個明亮又舒適的橘色,使他們的網站感到惬意。
Audiograph 使用60種迷幻圖案和顏色。
4.自定義捲軸
我們看到了網站開始不採用傳統瀏覽器捲軸滾動的趨勢逐漸明顯,反而為了內容開創了自定義的頁面體驗。一些網站使用“虛擬捲軸”,它仍然允許使用者在應用程式中滾動畫面,而不是控制瀏覽器。這允許各種類型的滾動,像是Build in Amsterdam網站,是一個水平的滾動設計,用一般的滑鼠就能控制;當滑鼠上下滾動時能左右切換內容,這將手機或平板電腦的使用體驗應用至桌機上。
Dess 建立虛擬捲軸來替代傳統瀏覽器捲軸。
Build in Amsterdam
其他網站已經完成了有利於點擊、拖動與探索的導覽。像Grim London和Magic in New York都給使用者一張地圖,聲稱在使用者的手上放了捲軸,讓他們拖動圖片以找到自己想要的,不必依賴傳統的導覽,使用者可以在地圖中點擊不同的圖片以獲取更多資訊。
這些網站幾乎都使用WebGL的應用程式來建立和展示他們的內容,尤其是Grim London實現了具有創意的技術;自定義地圖引擎建立在PixiJS(JavaScript 2D WebGL engine)之上。
Grim London
Fantastic Beasts Magical Maps
5.將觸覺與數字融合
三年前,扁平化設計幫本質設計開了一條路,在平面圖像上增加陰影和角度,在平面螢幕上產生三維空間。今年,我們更進一步地回歸現實,我們不擬真(在數字的空間模擬物質世界)。2017年是將數字空間與物質的、有形的、觸覺的世界完美融合的一年。
而不是將照片元素裝入不同的矩形中,表面上從螢幕創造一個到“真實”世界的窗口,物件被裝置裁切並融入數字之中。他們被允許保留他們的亮度與陰影,所以他們的3D本質,不再需要依實體按部就班設計。物件不一定是真實的大小,書本可以像卡車一樣大,而且可以與數字元素互動。看看Beoplay的網站:它讓耳機比實物還大,然後讓它們與設想的聲音與會動的數字線互動。
將物件融合至數字空間,模糊了螢幕和世界之間的線。這反而與我們使用裝置上的圖像建立了情感聯繫。
Beoplay
99designs在我們的主頁上採用了這種技術,通過動畫按鈕對我們網站上設計的物理對象進行分層。
由trumpdesign設計網站
6.巧妙的動畫和微互動
動態吸引我們的注意,這是人類進化的結果。特別是突如其來的大動態可以提醒我們危險。另一方面,流暢的動態意味著人生,將這些知識保留在您的腦中,為您的網頁設計帶來活力。一個巨大且特立獨行的動態會過度分散觀看者的視覺,但這些巧妙的動態可以為你的設計帶來一種新鮮的感覺。
多年來,我們一直看到動畫用於“幫助”使用者的動作。例如,有些動態在滑鼠移過去或點擊時發生作用。然而,近期,我們看到巧妙的動畫融入頁面中,成為設計元素,用來吸引觀看者的注意力。特別是,我們讚美許多滾動套件,當使用者滾動頁面時可以觸發事件,意味著我們可以讓人們準確地看到我們想要他們做的事。
不論他們是透過javascript或是CSS來實現,微互動不僅是為了達到使用者體驗的目的,而且也賦予了網站個性。
資料來源:99designs
Project Sunday
Kekselias
7.放棄長寬比有利於美術設計
在配有Retina的電腦顯示器中,短而寬的畫面看起來很棒,但在垂直放置的手機上完全不合適。而構圖是設計的基本元素之一,那麼,你如何討論一個響應式的部分,在螢幕和瀏覽器的長寬比上顯示的內容有最好的組合?你必須裁切。但是,你要如何保留設計的完整性以進行操作。以數字藝術的方向進入。
近日,當我們擺脫了傳統自動裁剪的缺點,我們看到許多工具彈出,讓我們能自己控制其構圖。這導致了思想的轉變,我們應該把內容當作一個主題,而不是靜態的圖檔。你想要用什麼樣的概念來說你的故事?重點是,讓使用者能掌控其顯示。
smartcrop.js
有些網站選擇完全忽略寬高比,賦予了觀看者構圖的力量。The Hidden World of the National Parks網站使用全景影片,這也是網站的主要內容,不管你製作的是什麼形狀,都會延伸到瀏覽器的邊緣。
Google Arts & Culture
8.電影體驗
大電影影片背景在2015年開始出現。然而,隨著技術的進步,它們縮短了影片載入的時間,並且越來越受歡迎。WebGL的進步也使得這些背景變成互動的,在網站上創造出身歷其境的電影體驗。
visithumboldt.com
audiograph.xyz
在另一方面,電影的體驗已經以較小的尺寸設計,小的影片元素賦予了網頁生氣,透過更多巧妙的方式吸引觀看者。
Kikk手機版
Project Sunday手機版
9.遊戲化
遊戲化是“遊戲設計元素和遊戲原則(非遊戲環境)的應用”,目標是在增加使用者參與度。換句話說:你想讓人們記住你的網站嗎?如何更深入探索?使它更有趣!
遊戲化一個很好的例子是因為電影Swiss Army Man而做的網站(支援WebGL)。這個網頁上的3D元素不僅是一些隨機的酷炫效果,你會得到一個可操縱的角色,以便通過一個設計有重力和物理(包括流體力學)的空間。(如果你進入的話,你也可以讓他做其他的事,更多狗屁倒灶的事。)
其他網站正在使用遊戲化去教育他們的使用者新的語言,或是在空間變化去教育他們。
Swiss Army Man
sbs.com
當數字化設計趨勢開始採用更接近 “真實世界” 的觸感,2017年將成為網頁設計激勵人心的一年。
原文網址:9 cutting-edge web design trends for 2017