LCCNET 聯成電腦

菜鳥救星

HOT影片

m_nav_line m_nav_line

聯成電腦網站設計好文分享:2017年9個前衛的網頁設計趨勢

icon_fb icon_twitter icon_google LINE it!
article_main_img

 

 

        年初曾經和大家分享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

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策