政府網站營運交流平台 - 國家發展委員會
:::

2017年網站設計趨勢

點閱次數:1203     資料來源:國家發展委員會     發佈日期:

2017年網站設計趨勢將可能有哪些的演變與期待呢?這應該是很多網站設計人員內心的一個大問號,潮流趨勢是多變的,而且常常走著走著就立刻拐彎轉向,有些前景看好的新穎設計推出,卻因為應用端沒有跟上(叫好不叫座)或者出現其他的替代方式(便宜又大碗),最後也只能黯然出場。對於未來網站設計的趨勢也許在許多人的心中都有了一把尺,但準不準確,只能說機會人人有、個個沒把握,有關專家們怎麼說[1],讓我們先來一睹為快。


單位/姓名 預期增多的設計 預期減少的設計
Thomas Design Damian Thomas 1.主頁橫幅圖像(Hero images[2][3]) 2.影片(Video) 商業圖庫(Stock Photography)
Ireland Website Design Nick Butler 1.互動式網頁故事(Interactive Web Storytelling) 2.視差效果(Parallax) 3.分割畫面(Split Screen) 1.輪播(Carousel) 2.商業圖庫(Stock Photography)
Verve Lucy Jones 1.採用行動優先設計方法(Adopting the mobile-first design approach),響應式網站為Google搜尋演算法的優先結果 2.客製化插圖(Custom-made Illustrations) 1.視差滾動(Parallax Scrolling) 2.飛濺頁面(Splash Pages)
Think Zap Steven Sefton 單頁式回歸多頁式 滑動(Sliders)
Forest Design Paul Lambden 一致性的元素(如聯絡我們、電話號碼、行動版摺疊選單) 互動彈跳視窗(Modal pop up windows[4])
Williams Graphics Chris Williams 強調變得更快、更清晰、更實用的設計(不會把資訊藏在選單及投影片中),以及使用飽和的霓虹色調(如#ef4066) 1.為了網站而網站的設計 2.視差滾動(Parallax Scrolling)
Evoluted Jenny Hadfield 1.響應式設計(Responsive Design) 2.使用者體驗(User Experience),透過影片與動畫整合協助故事行銷 3.排版字體使用Google fonts 1.彈跳視窗 2.輪播(Carousel) 3.視差效果(Parallax) 4.特效(Effects) 5.超載且在同一頁出現的動畫 6.商業圖庫(Stock Photography)
Better Call Paul Paul Brown 1.虛擬實境(Virtual Reality) 2.機器學習(Machine Learning) 3.人工智慧(Artificial Intelligence) 4.神經網路(Neural Networks) 5.物聯網站(Physical websites[5]) 6.大數據應用程式介面(Big data apis) 過去5年熟悉的網站佈局變得少見
Calm Digital Andy Murphy 客製照片、影片或動畫(Custom photos, videos or animations) 商業圖庫(Stock Photography)
Sleeky Web Design & Print Elyse Lawrence 強調在更小螢幕的流暢體驗 水平導覽列
LittleBigBox April Hodge 1.視差滾動(Parallax Scrolling) 2.簡約設計(Minimalistic design[6]) 彈跳視窗
Pedalo Simon Fell 1.有設計的內容(Designing the Content) 2.資訊圖像(Infographics) 3.平面設計(Flat Design) 4.動畫(Animations) 5.使用者介面模型(UI patterns) 1.幻燈片(Slideshows) 2.首頁令人眩目的選擇項目 3.非響應式的網站
Lighthouse London Russell Bishop 動畫 N/A
Kalexiko Chan Dhillon 網格系統(Grid) 1.漢堡選單(Burger) 2.摺疊選單(Fold)
Jask Creative Luke Turner 1.替代的導覽選項(Alternative navigation options) 2.影片(Video) 3.加密(Encryption) 4.最佳化(Optimise)任何內容,減少下載頁面的請求量 Flash
Pixel Kicks Rofikul Shahin 1.獨特的視覺體驗 2.人性化的設計 1.相似的設計 2.Apple或Google制式的設計理念
Pixel Kicks Chris Buckley 1.半平面設計(Semi-flat Design) 2.向量圖片(SVG) 3.影片 1.非響應式的網站 2.平面設計(Flat Design)


從以上專家預期的趨勢變化當中,可以知道的是,一個大前提絕對不會錯,就是行動化。因為行動化的需求,瀏覽螢幕的體驗,不再只是固定在桌面上,而強調響應式網站設計(Responsive Web Design),許多專家甚至認為未來再看到沒有響應式設計的網站會是多麼讓人訝異的一件事。除了螢幕瀏覽體驗外,行動化必須考量通訊網路的速度,以及可能使用者有傳輸量的限制,因此更加強調輕薄短小的設計,以及最佳化網站內的任何物件,包含動畫或影片都需要更仔細設計,以傳遞優質與精準的資訊。

 我們也可以看到一些相似的設計或者商業圖庫,將不受到青睞,也就是速成的東西會遭到遺棄,大家還是比較喜歡看到有特色的事物,連同網站佈局也將會有大幅的改變,不是說目前的不好,只是網站的顧客看膩了相似的設計,因為使用者可能一天之中到過數個網站,但每個看起來都差不多。這再次證明了一件事,人類是視覺性的動物,滿足人們的實際需求之前,視覺的享受也是很重要的條件。因此,具有獨特的視覺體驗,才可以在眾多的網站之中獲得青睞的眼光。

 一些惱人的設計如彈跳視窗,被認為愈少見愈好,應該是不爭的事實,現在一般人普遍不喜歡彈跳視窗,甚至到了厭惡的程度,尤其是在智慧手機上瀏覽的情況。輪播(Carousel)也出現在被預期減少的名單之中,很慶幸地它被列上去了,說實在的,個人也真的不怎麼喜歡輪播,不過看到很多政府機關網站都很喜歡用,如果真的如預期,掀起一波拒用輪播的風潮,看來有些網站有得改了。 

有些設計出現一些不同調的雜音如視差滾動,有人認為視差設計可以增進網頁與使用者的互動,並且強化透過故事性達到向顧客行銷的手法,因此,預期這樣的設計會持續的增加。有人則認為會影響網站的SEO(搜尋引擎最佳化)、網站下載效能與行動瀏覽效果等,在未來的網站設計上將越來越少見。當然使用這些設計還是取決於網站服務的目的,而不要為了設計而設計。 

有些設計是目前很熱的議題如資訊圖像、影片,預期未來會看到更多,對於這些內容的使用,網站管理人員還是必須要再深入地去理解資訊傳遞的意義,橫幅廣告、圖片按鈕、圖表等此類網站元素並不等於是資訊圖像。資訊圖像是由英文Infographic來的,而Infographic是Information與Graphic複合字而來,即是透過資訊與圖像的結合,使閱讀的人很容易理解作者所要傳達的訊息[7]。因此,透過資訊圖像或影片進行資訊傳達,必須要經過仔細的安排與設計,才能達到所要資訊傳遞的效益。 

有專家提到虛擬實境、機器學習、人工智慧、神經網路、物聯網站、大數據應用程式介面等發展趨勢,這部分是目前網站設計應用上相對罕見,不過這些是普遍在目前各產業上被討論的議題,當這些與網站應用結合時,將會與目前所看到的網站出現迥然不同的型態。

[1]Web Design Trends in 2017 – What Can We Expect?, https://www.pixelkicks.co.uk/blog/web-design-trends-2017/ 

[2]Hero image,https://en.wikipedia.org/wiki/Hero_image 

[3]更多主頁橫幅圖像的範例:https://envato.com/blog/exploring-hero-image-trend-web-design/ 

[4]更多互動彈跳視窗的範例:https://webdesignledger.com/modal-window-pop-ups-in-web-design 

[5]更多物聯網的範例:https://google.github.io/physical-web/examples

[6]更多簡約設計的範例:https://designschool.canva.com/blog/minimalist-design-beautiful-examples-and-practical-tips/

[7]What is an Infographic?,http://www.webpagefx.com/what-is-an-infographic.html


作者簡介

力信恩 任職於中華民國資訊軟體協會

相關連結: