別再讓網友迷失在點擊中,2015 年十大網頁設計趨勢

2015 年的開端,網頁設計師準備好今年怎麼大展身手了嗎?The Next Web 作者 Amber Leigh Turner 整理了 2015 年網頁設計十大趨勢,幫助你快速進入狀況。
評論
評論

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 WaysRawnet 都有如同 app 與響應式的選單,儘管是在桌電觀看,卻像是在用手機瀏覽。這兩個網站一改傳統水平選單的形式,而是像手機版網頁常見的直式 flyout/sideout 選單。

8. 主選單藏起來!

有些網站則把選單藏起來,唯有網友點擊或懸停在某個元素上,才會開啟選單,儘量維持畫面整潔、強調功能性。這個同樣源自手機螢幕特性的設計,或許也將成為 2015 年的趨勢。看看 Brian Hoff Design 新網站,右上側置放漢堡圖示,由於使用者已很習慣在手機上看到這種代表選單的象徵,因此並不會無所適從。

9. 超級大的字型(typography)

前面所提的示例網站,絕大多數都有個相同的特徵:巨大的文字標題。2015 年這樣的流行將會繼續,而且可能有愈長愈大的現象,就像在地面上看到一架即將降落的飛機,那麼大。Tiny Giant 網站超大標題直衝眼簾,要忽略也難。眾聲喧嘩的時代,就是要比別人更大聲,才有被看見的機會,標題字型,在 2015 年會繼續放大。

10. 不受環境優劣影響的瀏覽體驗

本文提到的網頁設計趨勢,多數都出自為網站「瘦身」,加快手機或平板,以及頻寬不足環境的載入速度。網站設計師與開發者愈來愈重視網站「重量」以及使用者與其互動的形式。如何在行動裝置中、不同頻寬環境下營造同樣良好的體驗,也是 2015 年益發重要的問題。相信今年我們會有更多更順暢的網站,不會載到一半就喊咔。

另外數位行銷諮詢網站 Econsultancy 作者 Christopher Ratcliff 根據自己的觀察 ,並且訪問了 Dan BarkerChris Lake 兩位行銷專家,也統整出 17 項 2015 年網頁趨勢,同樣相當值得參考。以下節選出與 The Next Web 沒有重複的觀點:

1. 視差滾動 :Wordpress 等網頁製作平台提供視差捲動的模板,因此我們可以期待未來出現更多高度創新、以敘事為主體的網頁。

Boycoy

2. 卡片設計 :前幾年類似 Pinterest 的卡片瀑布流今年可能會捲土重來,這種重視影像的設計非常符合「TL;DR(太長沒讀)」的網路族群,也非常適於呈現在行動裝置與響應式設計。

可口可樂 AHH

3. 物質設計(material design):擬真設計與扁平設計的交叉點,Google 去年推出的 material design,今年預計也將大為風行。

4. 幽靈按鈕(ghost button):按鈕透明化,僅以能夠識別的超細邊框,包裹無襯線字型。一方面減少按鈕與背景的突兀感,一方面依然有清楚的指向。

bilder

5. 動態設計(motion design):比如不斷捲動,不會直接出現圖片,而是先有色塊才有圖片開展。或者數據長條圖「動起來」。

6. 模組捲動(modular scrolling):一般我們是捲動整個網頁,但捲動個別欄位也是沒問題的。

Rocco Forte Hotels

7. 色彩漸變 :選擇一個色彩作為主體,配以許多深淺不同的相同色系。

8. 固定的導航欄 :無論你捲動到哪個位置,導航欄永遠固定在最上方,方便使用者在各種頁面中切換,用處較為複雜的大型網站如 Facebook 就會使用這種設計。

9. 行動第一,但非行動唯一 :畢竟還是有一大票人工作倚賴桌上型電腦維生,比如正在看本文的網頁設計師們,對吧~

您認為 2015 年還會有哪些網頁設計趨勢呢?歡迎與我們分享:)


5G 領航創新應用競賽大放異彩!吸引超過 200 組作品與創新提案,見證台灣 5G 創意能量

由經濟部工業局舉辦的通訊大賽今年邁入第 20 週年,其子競賽「5G 領航創新應用競賽」總獎金超過 132 萬,共募集超過 200 件作品設計或提案構想,相較去年成長近 5 成。
評論
Photo Credit : 資策會地方創生服務處
評論

由經濟部工業局辦理的通訊大賽,自去年起因應台灣邁入 5G 世代開設全新子競賽-「5G 領航創新應用競賽」。競賽以發展 5G 解決方案為主軸,聚焦於數位娛樂、交通、製造三大垂直領域,參賽作品需結合 5G 通訊技術特性並從三大應用領域中,發展創新產品或構想。競賽不限國籍與年齡資格,各行各業皆可參加,瞄準跨域人才強大的創新能量;而今年共募集超過 200 件作品設計或提案構想,相較去年成長近 5 成,更持續有來自印度、泰國、美國、香港等地外籍生組隊參與,與國際趨勢接軌。

通訊大賽邁入 20 週年 見證台灣通訊產業發展

經濟部工業局辦理通訊大賽自去年起臺灣邁入 5G 世代開設全新子競賽「5G 領航創新應用競賽」。競賽以發展 5G 解決方案為主軸,聚焦於數位娛樂、交通、製造三大垂直領域,參賽作品需結合 5G 通訊技術特性,並從三大應用領域中,發展創新產品或構想。今年共募集超過 200 件作品設計或提案構想,相較去年成長近 5 成。競賽不限國籍與年齡資格,各行各業皆可參加,瞄準跨域人才強大的創新能量。今年更持續有來自印度、泰國、美國、香港等地外籍生組對參與,與國際趨勢接軌。

值得一提的是,今年通訊大賽也來到第 20 年,從 3G、WiMAX、WiFi、4G、到今天的 5G,這一路走來的歷程,彷彿像一部台灣無線通訊史,許多歷屆得獎者,如今都已在業界發光發熱,甚至積極與國外廠商合作,為台灣的無線通訊與產業發展奠定紮實基礎。

「5G領航創新應用競賽」聚焦於數位娛樂、交通、製造三大垂直領域,今年共募集超過200件作品與提案,照片為所有入圍隊伍。 (Photo Credit : 資策會地方創生服務處)

5G 應用情境無遠弗屆  與各產業趨勢緊密相連

5G 擁有高速率、低延遲、廣連結三大特性,能串連上、中、下游相關垂直應用領域的整合服務;競賽本身即是為了挖掘與培育多元數位人才為出發點,今年更提出雙軌賽制並行,除了以往落地執行的「實作組」,「概念組」團隊僅需要提出創新概念的提案即可參賽,在經濟部工業局再開放更大的空間下,由今年入圍的作品更看見 5G 在數位娛樂、交通、製造三個領域從企業端、使用者終端等都可以運用的多元創意提案。

競賽實作組最終由實境共創以「Holoroam 整合式沉浸體驗佈建管理系統」拿下冠軍,抱走高達 35 萬元獎金;至於邁仕智聯,則以「淡海輕軌之 5G 營運安全管理智慧 監控與網路廣播對講整合應用系統」得到亞軍,歐利科技則以「影像圖控式USV岸際航行系統」拿下季軍與智崴企業最愛獎。其他企業最愛獎的優勝團隊包含打造智慧雲端機械手臂遠端控制平台的 5MEC 團隊,該團隊獲得本屆金級贊助企業中華電信的企業最愛獎殊榮;而 Sky 的 5G 智慧監控與海岸安全以及 Dress Up! 的 VR 服飾電商平台服務則分別獲得采威國際以及智慧時尚兩家特級贊助企業的賞識,抱得企業最愛獎的獎盃。概念組名次部份,娛樂領域冠軍為 See the music、亞軍為 ErgoLab,交通領域冠軍為兩個小錢、亞軍為鳴天設計,製造領域冠軍為雲聯勁網、亞軍為 Sagiri,競賽總獎金超過 132 萬。

參賽隊伍的背景從科技公司到在校學生,跨域組成的共同點都是預見 5G 與產業緊密相連的趨勢。實境共創原本就在開發 AR 與 3D 虛擬展間服務,團隊在過程中發現,必需與 5G 高速網路搭配,才能達到流暢的使用體驗。而歐利科技隊長陳信宏認為,再好的新創服務都必須面對市場考驗,「原本公司提供的解決方案都基於 4G,希望透過競賽測試 5G 加持下的效能,藉由這些驗證過的數據,未來能讓客戶更有信心。」而邁仕智聯報名動機也很類似,吳忠原是由今年中拜訪捷運公司,在因緣際會下得知競賽資訊,剛好能把 5G 導入公司的無線監控產品,加強無人管理車站旅客安全。

實境共創拿下冠軍,抱走高達 35 萬元獎金,團隊提出「Holoroam 整合式沉浸體驗佈建管理系統」,希望透過最簡單的工具,輕鬆打造最沉浸的數位體驗。 (Photo Credit : 資策會地方創生服務處)
邁仕智聯以「淡海輕軌之 5G 營運安全管理智慧 監控與網路廣播對講整合應用系統」獲得亞軍,這是一套能應用在淡海輕軌的 5G 網路多功能服務智慧監控應用系統。 (Photo Credit : 資策會地方創生服務處)

今年獲獎的概念組中,由 2 位女生組成的 See the music 團隊,非通訊背景出身單純發自內心熱愛音樂,純粹希望透過 5G 實現腦中創意,提出結合 5G、AR、IOT 多技術綜合線上練團的「See the Music」解決方案。另外像是由外文與企管系組成的 Dress Up! 團隊,提出結合 5G 特性的 VR 服飾電商平台,靈感來自疫情下的服飾業,可透過「Dress Up」服務 3D 建模讓消費者 360 度無死角觀看商品細節。這些一再證明 5G 與各產業緊密相連的特性,只要擁有好的點子,就能讓 5G 在各平台得以發揮。

歐利科技提出以「影像圖控式 USV 岸際航行系統」得到季軍與智崴企業最獎,透過彈性控制模組,實現多元的水面應用,打造無所不在的雲端化 USV 控制中心。(Photo Credit : 資策會地方創生服務處)
由兩位女生組成的See the music,提出結合5G、AR、IOT線上練團的「See the Music」解決方案,獲得娛樂領域冠軍,希望提供更沈浸式的音樂體驗。(Photo Credit : 資策會地方創生服務處)
Dress Up! 團隊提出「Dress Up」服務,靈感來自疫情下的服飾業,為結合5G特性的VR服飾電商平台,也獲得智慧時尚獎的肯定。(Photo Credit : 資策會地方創生服務處)

多場加值培訓活動 協助團隊精進作品 切合市場各種需求

能從上百件作品脫穎而出,證明獲獎團隊都具備強大的創新力,而在競賽過程中,經濟部工業局也提供豐富資源,實作組入選團隊可使用工業局 5G 實驗場域 digiBlock C 數位創新基地進行相關測試;不僅如此,期間更辦理、簡報設計工作坊、5G 實務工作坊、設計思考交流會、5G 場域進場實測、企業參訪…等多場加值培訓活動,希望在這些大力支援下,協助各團隊精進作品。

在「5G領航創新應用競賽」過程中,經濟部工業局提供豐富資源,入選團隊可優先使用digiBlock C 5G 實驗場域,另外也辦理一系列加值培訓活動。(Photo Credit : 資策會地方創生服務處)

邁仕智聯特別點出,主辦單位提供2次 5G 現況頻寬實測場域,對他們來說非常重要,吳忠原說道,「從實測場域頻寬分析數據得知,過去 4G 時代每次只能回傳 4 支攝影機影像,不過今天透過 5G 頻寬,一次可回傳 100 支攝影機影像,速度整整快了 25 倍,這對智慧監控發展是一大突破,意謂未來可透過 5G ;另外我們也參觀中華電信,體驗既有 5G 應用方案與情境,給我們很大信心與啟發,若不是參加競賽,過去根本沒機會接觸這些實測場域。」

冠軍團隊實境共創則強調,參加「5G 領航創新應用競賽」得獎是其次,最重要是能與其他團隊交流,「這次得獎對我們來說當然是很重要的肯定,但我們覺得與其他團隊切磋,從中反而得到最多收獲;例如我們有看到其他團隊做跟我們類似的產品,雖然架構很像、但切入點完全不同,雖然是競爭關係,但其實彼此都能互相學習。而我們也看到很多我們沒有看見的 5G 應用,這樣的創意刺激對我們來說非常寶貴。」

不光解決現有問題 更要創造新型態服務

本屆「5G 領航創新應用競賽」中,不僅看到許多優秀作品,更讓人見識年輕人的創意,頒獎典禮採訪當天,冠軍實境共創原本開玩笑說,要用獎金好好大吃一頓,但三位大男生立刻恢復正經,「而獎金也是很重要的資源,才能支持我們持續創造有亮點的新型態產品,刺激消費者將無線網路升級到 5G。」過去我們總是說,好的創新服務要能解決問題,如今不僅要用 5G 提出解決方案,其實還要創造更多需求,也期待未來 5G 的使用會因為這些創意而更快普及,就讓我們拭目以待吧!

經濟部工業局 廣告