2015 年的開端,網頁設計師準備好今年怎麼大展身手了嗎?網頁設計師與作家 Amber Leigh Turner 於 The Next Web 發文,整理了 2015 年網頁設計十大趨勢,幫助你快速進入狀況。
1. 捲動網頁取代點擊
單一網頁愈來愈長已是很普遍的做法,尤其是在行動裝置普及的時代,首頁通常不置連結,改將所有內容放在單一頁面,讓低頭族「滑上癮」。因為比起在一堆連結中跳轉,必須不斷重新等待新的頁面載入,資訊通通放在一頁的形式更容易瀏覽。而且不再只是首頁「變長」,其實「about」或描述產品的網頁,都能採取捲到底的方式,比如蘋果 iPhone 6 的呈現,就很符合長網頁的趨勢,把所有規格與功能全部放在單一網頁內,並且增添了一些精緻的動畫元素,抓住網友捲動全程的注意力。
2. 運用敘事與互動製造驚喜
精彩的內容是決定網站優劣的關鍵因素,如果善於以說故事的方式呈現內容,更是大加分。西雅圖 Space Needle 網站,運用數位敘事與設計,生動的述說了 Space Needle 的背景故事。同時也運用 2015 的另一個顯著趨勢:互動,帶給網友宛如親臨實境的獨特體驗。在網頁設計中交互使用互動與動畫,而且運用得當,能夠製造驚喜,讓觀者留下深刻印象,瀏覽 Impossible Bureau 時,一邊滑動捲軸、一邊滑過不同元素,會有各種令你驚奇萬分的互動感。
3. 背景爭奪戰:大張背景圖 vs. 大型色塊
前幾年,一定看過不少大型圖片作為背景、文字浮於其上的設計,這是網友打開網站首先映入眼簾的部分,覺得膩了、想要「非主流」一下嗎?那就逆勢而行。有些新網站就選擇抽除背景圖片,只留下巨大的色塊與文字。抽的好處除了特別突出之外,也有助於改善載入速度。在一片大型背景圖片的網站中,The New Wave 優雅的設計值得參考。
4. 去除非必要的元素,簡化再簡化
有個設計理論是這麼說的,所有非必要元素全部都被清除之後,設計才大功告成。2015 年可能會是設計師大舉實踐這個理論的年份。前面所提的 New Wave Company 與 Rareview Digital Agemcy 網站都屬「去除大型背景圖片」的模範。後者更將背景顏色、複雜的版式通通掃光。過度設計、過多影像、過多色彩的網站充斥,極端簡潔的設計反倒顯得特別。
5. 固定寬度置中版型
過去幾年大部分網站多把「banding」或寬度(width)設為 100%,影像與區塊隨著瀏覽器視域而變化。在更之前,設計師傾向設定固定寬度,並將圖像置中在頁面。這種固定寬度的趨勢以現代化的面貌,出現復興的跡象,有些網站選擇設定「最大寬度」,讓內容在瀏覽器中置中。Michele Mazzucco 的網站就是一個例子,你發現什麼玄機了嗎?縮小瀏覽器時,含有主要內容的色塊占滿螢幕,放大時卻有留白。
6. 專業高品質、獨一無二的攝影
為求方便也為減省成本,圖庫影像還是很多設計師的選擇。不過最近竄起的新網站,寧可多花一點錢請專業攝影師拍攝高品質、獨一無二而且完全按照網站目的需求定製的影像,不僅能夠切實展現網站品味,還能避免與其他網站「撞衫」。Grain and Mother 的網站圖片是幾個人坐在餐桌前,彷彿開心地正在談論什麼事情,他們不是什麼臨演,而是 Grain and Mother 的創辦人與員工。如果點進其「about」頁面,美麗且專業的影像肯定會奪走你的注意力,美妙的辦公空間都是真的!
7. 手機選單移植回網站
目前大部分網站還是比較重視桌面版,無法完美過渡到手機與平板裝置。不過響應式設計(RWD)興起,協助設計師順利讓網站順應裝置,無論何種螢幕都能有最佳瀏覽體驗。在這樣的趨勢下,我們開始看到本來在手機上流行的元素,反倒移植回桌電上。比如 24 Ways 與 Rawnet 都有如同 app 與響應式的選單,儘管是在桌電觀看,卻像是在用手機瀏覽。這兩個網站一改傳統水平選單的形式,而是像手機版網頁常見的直式 flyout/sideout 選單。
8. 主選單藏起來!
有些網站則把選單藏起來,唯有網友點擊或懸停在某個元素上,才會開啟選單,儘量維持畫面整潔、強調功能性。這個同樣源自手機螢幕特性的設計,或許也將成為 2015 年的趨勢。看看 Brian Hoff Design 新網站,右上側置放漢堡圖示,由於使用者已很習慣在手機上看到這種代表選單的象徵,因此並不會無所適從。
9. 超級大的字型(typography)
前面所提的示例網站,絕大多數都有個相同的特徵:巨大的文字標題。2015 年這樣的流行將會繼續,而且可能有愈長愈大的現象,就像在地面上看到一架即將降落的飛機,那麼大。Tiny Giant網站超大標題直衝眼簾,要忽略也難。眾聲喧嘩的時代,就是要比別人更大聲,才有被看見的機會,標題字型,在 2015 年會繼續放大。
10. 不受環境優劣影響的瀏覽體驗
本文提到的網頁設計趨勢,多數都出自為網站「瘦身」,加快手機或平板,以及頻寬不足環境的載入速度。網站設計師與開發者愈來愈重視網站「重量」以及使用者與其互動的形式。如何在行動裝置中、不同頻寬環境下營造同樣良好的體驗,也是 2015 年益發重要的問題。相信今年我們會有更多更順暢的網站,不會載到一半就喊咔。
另外數位行銷諮詢網站 Econsultancy 作者 Christopher Ratcliff 根據自己的觀察,並且訪問了 Dan Barker 與 Chris Lake 兩位行銷專家,也統整出 17 項 2015 年網頁趨勢,同樣相當值得參考。以下節選出與 The Next Web 沒有重複的觀點:
1. 視差滾動:Wordpress 等網頁製作平台提供視差捲動的模板,因此我們可以期待未來出現更多高度創新、以敘事為主體的網頁。
2. 卡片設計:前幾年類似 Pinterest 的卡片瀑布流今年可能會捲土重來,這種重視影像的設計非常符合「TL;DR(太長沒讀)」的網路族群,也非常適於呈現在行動裝置與響應式設計。
3. 物質設計(material design):擬真設計與扁平設計的交叉點,Google 去年推出的 material design,今年預計也將大為風行。
4. 幽靈按鈕(ghost button):按鈕透明化,僅以能夠識別的超細邊框,包裹無襯線字型。一方面減少按鈕與背景的突兀感,一方面依然有清楚的指向。
5. 動態設計(motion design):比如不斷捲動,不會直接出現圖片,而是先有色塊才有圖片開展。或者數據長條圖「動起來」。
6. 模組捲動(modular scrolling):一般我們是捲動整個網頁,但捲動個別欄位也是沒問題的。
7. 色彩漸變:選擇一個色彩作為主體,配以許多深淺不同的相同色系。
8. 固定的導航欄:無論你捲動到哪個位置,導航欄永遠固定在最上方,方便使用者在各種頁面中切換,用處較為複雜的大型網站如 Facebook 就會使用這種設計。
9. 行動第一,但非行動唯一:畢竟還是有一大票人工作倚賴桌上型電腦維生!
文章來源:Inside《別再讓網友迷失在點擊中,2015 年十大網頁設計趨勢》
1. 捲動網頁取代點擊
單一網頁愈來愈長已是很普遍的做法,尤其是在行動裝置普及的時代,首頁通常不置連結,改將所有內容放在單一頁面,讓低頭族「滑上癮」。因為比起在一堆連結中跳轉,必須不斷重新等待新的頁面載入,資訊通通放在一頁的形式更容易瀏覽。而且不再只是首頁「變長」,其實「about」或描述產品的網頁,都能採取捲到底的方式,比如蘋果 iPhone 6 的呈現,就很符合長網頁的趨勢,把所有規格與功能全部放在單一網頁內,並且增添了一些精緻的動畫元素,抓住網友捲動全程的注意力。
2. 運用敘事與互動製造驚喜
精彩的內容是決定網站優劣的關鍵因素,如果善於以說故事的方式呈現內容,更是大加分。西雅圖 Space Needle 網站,運用數位敘事與設計,生動的述說了 Space Needle 的背景故事。同時也運用 2015 的另一個顯著趨勢:互動,帶給網友宛如親臨實境的獨特體驗。在網頁設計中交互使用互動與動畫,而且運用得當,能夠製造驚喜,讓觀者留下深刻印象,瀏覽 Impossible Bureau 時,一邊滑動捲軸、一邊滑過不同元素,會有各種令你驚奇萬分的互動感。
3. 背景爭奪戰:大張背景圖 vs. 大型色塊
前幾年,一定看過不少大型圖片作為背景、文字浮於其上的設計,這是網友打開網站首先映入眼簾的部分,覺得膩了、想要「非主流」一下嗎?那就逆勢而行。有些新網站就選擇抽除背景圖片,只留下巨大的色塊與文字。抽的好處除了特別突出之外,也有助於改善載入速度。在一片大型背景圖片的網站中,The New Wave 優雅的設計值得參考。
4. 去除非必要的元素,簡化再簡化
有個設計理論是這麼說的,所有非必要元素全部都被清除之後,設計才大功告成。2015 年可能會是設計師大舉實踐這個理論的年份。前面所提的 New Wave Company 與 Rareview Digital Agemcy 網站都屬「去除大型背景圖片」的模範。後者更將背景顏色、複雜的版式通通掃光。過度設計、過多影像、過多色彩的網站充斥,極端簡潔的設計反倒顯得特別。
5. 固定寬度置中版型
過去幾年大部分網站多把「banding」或寬度(width)設為 100%,影像與區塊隨著瀏覽器視域而變化。在更之前,設計師傾向設定固定寬度,並將圖像置中在頁面。這種固定寬度的趨勢以現代化的面貌,出現復興的跡象,有些網站選擇設定「最大寬度」,讓內容在瀏覽器中置中。Michele Mazzucco 的網站就是一個例子,你發現什麼玄機了嗎?縮小瀏覽器時,含有主要內容的色塊占滿螢幕,放大時卻有留白。
6. 專業高品質、獨一無二的攝影
為求方便也為減省成本,圖庫影像還是很多設計師的選擇。不過最近竄起的新網站,寧可多花一點錢請專業攝影師拍攝高品質、獨一無二而且完全按照網站目的需求定製的影像,不僅能夠切實展現網站品味,還能避免與其他網站「撞衫」。Grain and Mother 的網站圖片是幾個人坐在餐桌前,彷彿開心地正在談論什麼事情,他們不是什麼臨演,而是 Grain and Mother 的創辦人與員工。如果點進其「about」頁面,美麗且專業的影像肯定會奪走你的注意力,美妙的辦公空間都是真的!
7. 手機選單移植回網站
目前大部分網站還是比較重視桌面版,無法完美過渡到手機與平板裝置。不過響應式設計(RWD)興起,協助設計師順利讓網站順應裝置,無論何種螢幕都能有最佳瀏覽體驗。在這樣的趨勢下,我們開始看到本來在手機上流行的元素,反倒移植回桌電上。比如 24 Ways 與 Rawnet 都有如同 app 與響應式的選單,儘管是在桌電觀看,卻像是在用手機瀏覽。這兩個網站一改傳統水平選單的形式,而是像手機版網頁常見的直式 flyout/sideout 選單。
8. 主選單藏起來!
有些網站則把選單藏起來,唯有網友點擊或懸停在某個元素上,才會開啟選單,儘量維持畫面整潔、強調功能性。這個同樣源自手機螢幕特性的設計,或許也將成為 2015 年的趨勢。看看 Brian Hoff Design 新網站,右上側置放漢堡圖示,由於使用者已很習慣在手機上看到這種代表選單的象徵,因此並不會無所適從。
9. 超級大的字型(typography)
前面所提的示例網站,絕大多數都有個相同的特徵:巨大的文字標題。2015 年這樣的流行將會繼續,而且可能有愈長愈大的現象,就像在地面上看到一架即將降落的飛機,那麼大。Tiny Giant網站超大標題直衝眼簾,要忽略也難。眾聲喧嘩的時代,就是要比別人更大聲,才有被看見的機會,標題字型,在 2015 年會繼續放大。
10. 不受環境優劣影響的瀏覽體驗
本文提到的網頁設計趨勢,多數都出自為網站「瘦身」,加快手機或平板,以及頻寬不足環境的載入速度。網站設計師與開發者愈來愈重視網站「重量」以及使用者與其互動的形式。如何在行動裝置中、不同頻寬環境下營造同樣良好的體驗,也是 2015 年益發重要的問題。相信今年我們會有更多更順暢的網站,不會載到一半就喊咔。
另外數位行銷諮詢網站 Econsultancy 作者 Christopher Ratcliff 根據自己的觀察,並且訪問了 Dan Barker 與 Chris Lake 兩位行銷專家,也統整出 17 項 2015 年網頁趨勢,同樣相當值得參考。以下節選出與 The Next Web 沒有重複的觀點:
1. 視差滾動:Wordpress 等網頁製作平台提供視差捲動的模板,因此我們可以期待未來出現更多高度創新、以敘事為主體的網頁。
2. 卡片設計:前幾年類似 Pinterest 的卡片瀑布流今年可能會捲土重來,這種重視影像的設計非常符合「TL;DR(太長沒讀)」的網路族群,也非常適於呈現在行動裝置與響應式設計。
3. 物質設計(material design):擬真設計與扁平設計的交叉點,Google 去年推出的 material design,今年預計也將大為風行。
4. 幽靈按鈕(ghost button):按鈕透明化,僅以能夠識別的超細邊框,包裹無襯線字型。一方面減少按鈕與背景的突兀感,一方面依然有清楚的指向。
5. 動態設計(motion design):比如不斷捲動,不會直接出現圖片,而是先有色塊才有圖片開展。或者數據長條圖「動起來」。
6. 模組捲動(modular scrolling):一般我們是捲動整個網頁,但捲動個別欄位也是沒問題的。
7. 色彩漸變:選擇一個色彩作為主體,配以許多深淺不同的相同色系。
8. 固定的導航欄:無論你捲動到哪個位置,導航欄永遠固定在最上方,方便使用者在各種頁面中切換,用處較為複雜的大型網站如 Facebook 就會使用這種設計。
9. 行動第一,但非行動唯一:畢竟還是有一大票人工作倚賴桌上型電腦維生!
文章來源:Inside《別再讓網友迷失在點擊中,2015 年十大網頁設計趨勢》
-
10Apr.1808Jan.2030Dec.21