2016年TOP10企業網站設計趨勢: RWD響應式網頁、一頁式網頁、全幅背景…

這幾年因行動裝置盛行，大大改變了整個網頁設計的技術，同時也影響了設計風格。RWD響應式網頁設計、全幅背景、一頁式網頁成了主流設計，來看看有哪些設計趨勢適合用在講求穩定大器的企業網站上。

1. 響應式網頁設計 RWD, Responsive Web Design

響應式網頁設計(Responsive web design, RWD)，又稱為自適應網頁設計。 是一種網頁設計的技術工法，可使網站在多種瀏覽裝置(桌電、筆電、平板電腦、行動電話)上閱讀和瀏覽。RWD網頁可讓同一個網頁畫面隨著螢幕或瀏覽器寬度變化，同一筆圖文資料在桌電為橫式排列，當瀏覽器寬度縮減到手機尺寸時，則顯示為直式排列。當你用桌電看到一個網頁想傳給正在用手機上網的朋友時，不會因裝置尺寸不同而無法正常閱讀。 

IBM官網 電腦版畫面 http://www.ibm.com/

 

IBM官網 RWD行動版畫面 http://www.ibm.com/

2. 大背景(全幅背景) Full-width Background

隨著螢幕尺寸越來越大以及行動裝置盛行，可隨螢幕縮放圖片尺寸的全幅背景網頁設計開始流行起來。全幅背景相較於傳統固定寬度的banner情境圖，更能突顯氣勢磅薄的企業形象。近來在html5影片格式的支援下，還可以採用全幅影片。

http://www.stenabulk.com/

3. 一頁式網頁 One-page Web Design

平板電腦及行動裝置改變了人們瀏覽網頁的方式。過去在使用桌上型電腦常常會希望網頁不要有捲軸，到了平板電腦反而開始習慣手滑螢幕來瀏覽網頁，這個時候一頁式網頁就成了設計主流。「單欄式網頁設計」也是一頁式網頁的呈現特點，單欄式網頁設計近似於瀏覽PPT的概念，讓user一次專注於了解一件事情，不會分心去看左右不相干的文章。過去一個頁面塞滿一堆資訊的網頁設計已經不再流行，在資訊海量的時代，簡單的區塊式設計才能讓客戶專心理解你想傳達的訊息。

 

https://www.qualcomm.com/

4. 固定式選單 Fixed Menu

固定式的主選單也是近來流行的趨勢之一，尤其是功能性選單，大多會設計成固定式選單。當網頁逐漸趨向一頁式的版型設計後，由於網頁捲到下方後就找不到主選單，這個時候就會將主選單改為固定式的做法。在網頁下方加上「回到頁頂」(Back to top)的固定式按鈕，也是常見的解決方案。

http://tw.longchamp.com/en

5. 扁平化設計 Flat Design
扁平化設計流行一段時間了，最早從微軟Windows8問世開始，後來連Apple iOS7也開始採用扁平化設計，以別過去講求擬真立體感的設計。有趣的是，這次微軟難得站在流行設計的前端。

6. 微動畫 Micro Animation
過去Flash時代常見企業網站充滿了飛天鑽地的動畫，這麼多年大家也看膩了，取而代之的是簡單、不影響閱讀的微動畫，首頁輪播圖(Slider)是常見的做法。另外，用CSS3製作的色彩漸變按鈕、主選單特效，都讓企業網站有畫龍點睛的效果。

http://www.apple.com/

7. SVG網頁圖片向量格式

一般桌電、筆電的螢幕解析度為72dpi，手機行動裝置的解析度則是高達96dpi，因此有些jpg或png的icon在電腦看起來很正常，但到了手機版卻是糊的，採用SVG格式的向量圖就可以解決這個問題。由於SVG向量格式可以隨意放大縮小，因此在RWD網頁設計也經常採用SVG圖檔來取代其他圖片格式。

8. 磚牆式設計

磚牆式設計經常用在呈現許多資訊流的頁面，例如用圖片呈現一整個照片牆。磚牆式設計由於可橫排/直排切換，因此也很常見於RWD響應式網頁設計中。

http://www.oakley.com/

9. 頁尾區塊Big Footer

Big Footer近來出現在政府網站檢核表內，適合用來呈現企業網站架構或相關連結，對於SEO也有很好的幫助。

 

http://www.adidas.com/

10. 時間軸 Timeline

時間軸的設計概念很適合放在企業歷史沿革或里程碑的網頁設計上。

http://www.frontlynk.com/

用網頁程式語法所寫出來的稀有動物們

曾經，和人類一同搭上了諾雅方舟的牠們，如今卻可能因為於環境的變遷、人為的破壞等，逐漸地銷聲匿跡在和我們所一齊生活的地球之上…也許，我們都還未曾知曉卻可能已經僅存不到幾隻的稀有物種們。此刻，就和我們一起藉由 Species In Pieces 認識認識牠們吧！

Species In Pieces 一個由阿姆斯特丹的設計師 Bryan James 利用 HTML＋CSS 語言編寫、製作而成的網頁，藉以三角形的幾何色塊分別為 30 種瀕臨於滅絕的物種們所設計的網頁…那在柔和雅緻的色澤中，飄散著猶如玻璃碎片的三角色塊，而那在場景轉換下所聚集、轉換、碎散的色塊們則會一一猶如七巧拼圖一樣的，在幾何狀中加以拼湊出牠們帶有特色的面容，並在專業知識的輔佐下使我們得以更認識牠們。

James 在接受 The Huffington Post 的採訪時曾表示：他深信於唯有當你我看見了，才有機會再深入地明白。因此，他以網頁設計為出發，並藉由三角幾何色塊的結構變化，以富含設計味的視覺美，展現出存在於牠們身上，那些純粹卻隨時都有可能因此而崩離碎化的美好生命們…

感同身受的同理是我們本就擁有的，而 James 藉其富含美學的設計所架構而成的 Species In Pieces 則讓我們得以藉由專業性的知識補充，對牠們有多一些的認識與暸解，再更清楚於牠們所面臨的生存狀況下，也就能更加深切地與牠們有所連結。

這樣一個直接將網站中圖像的版權費捐贈於 Evolutionarily Distinct and Globally
Endangered (EDGE) 的規劃，也是把這帶有藝術美感為切入的設計、期望使更多人看見牠們存在的用心，以及試圖喚醒於我們對環境、同為地球一家人的牠們等，有更廣更深於瞭解的面向等，正是 James 期望於為牠們在虛擬的網路世界中所搭建起的一個溫暖的家 Species In Pieces。

WEBSITE

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 等網頁製作平台提供視差捲動的模板，因此我們可以期待未來出現更多高度創新、以敘事為主體的網頁。

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. 行動第一，但非行動唯一：畢竟還是有一大票人工作倚賴桌上型電腦維生，比如正在看本文的網頁設計師們，對吧～

解讀 Material Design(本質設計) 引領的 UI 設計趨勢

Google I/O大會發佈了Android L並推出Material Design，重新統一了Google的設計語言，確立了未來Google的設計方向。那麼，什麼是Material Design？我簡單地將它翻譯成“本質設計”。顧名思義，這是一種考慮事物本質的設計，將電子螢幕裡的UI元素看成是一種不存在於現實世界的新的材質， 並賦予它物理特性。因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來，其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。

無論是蘋果的設計語言，還是Google的設計語言，乃至於Windows的Modern UI 和Facebook的Paper設計語言，大方向都是一致的，而在細節上卻分道揚鑣。蘋果與Google幾乎壟斷了移動設備的操作系統，因此我們談談從新 發佈的Material Design中看看有哪些無線設備的設計趨勢。

1.紙的形態模擬

前言已提到Material Design並不是一種去擬物的設計，也不是一種強調擬物的設計。我們知道電子螢幕是完全平面化的，不像現實當中的物體是3D的， 。一本書裡每一頁紙之間的空間關係是很清楚的，但電子螢幕的所有物體都在一個平面上。雖然電子螢幕沒有空間感，但訊息內容是有空間層級的關係。而 Material Design的解決方式就是把現實世界中紙張的特性挪到電子螢幕裡，把訊息內容呈現在這個虛擬的紙上，紙（訊息內容）跟紙之間有上下層級關係，用投影模擬紙張的空間感。Material Design的投影並不是過去我們常用的使用圖片或者樣式代碼實現的投影，而是系統根據紙張層級所在位置實時渲染的，投影會隨着紙張的空間關係而改變大 小。

Google幾年前推行的Card設計就是模擬紙張物理形態的一種設計方式，但Material Design把它提升到了系統訊息架構層面的高度。

另外，iOS的模糊效果從本質上來說與Material Design的紙張設計要解決的問題是同樣的。通過模擬景深的效果來表達內容訊息的層級關係

2. 轉場動畫

過去我們的頁面只有X與Y軸，打開一個新的頁面則是生硬地直接跳轉到新的頁面，並沒有點出頁面的空間層級關係。而iOS 7與Material則強調 Z軸，即頁面之間的空間層級關係。iOS裡打開一個app，頁面將從你點擊的app圖標為中心點擴散出來，同樣的設計在Android L上也隨處可見。通過轉場動畫告訴我們，這個頁面從哪裡來，到哪裡去，在整個APP或者系統裡的空間位置是什麼。另外，不僅僅是頁面層級的動畫過渡，對象 操作也伴隨着動畫過渡，從動畫裡能感受到操作的過程變化。例如刪除時，垃圾桶圖標會有一個傾倒的動畫，或者通過指示條的旋轉告訴你刪除的過程。另一方面， 過渡動畫賦予了界面控件一種物理特性，在空間被拉伸、回彈時模仿了橡皮筋的物理特性。值得一提的是，在轉場動畫的設計上，Facebooke Paper的非常突出。

3.icon動畫

交互動畫在一些app裡已經大行其道，特別是Facebook Paper的動畫讓人印象深刻。在以後，交互動畫將成為標配，隨之而來，更多設計師把目標轉移到icon上來。icon主要分為入口功能和操作功能，操作 功能的icon在完成點擊操作之後，通常會轉為對應的另外一種形態。如“返回”與“MENU，”“選擇”與“未選擇”，“收藏”與“已收藏”“點讚”與“取消 點讚”的狀態之間切換。現在的設計裡，icon在兩種狀態之間的切換通常顯得生硬，icon動畫將使得點擊之後的反饋更佳強烈，並且讓界面活起來，性感起來。

4.大面積色塊action bar

Material Design設計語言讓人眼前一亮的除了豐富的交互動畫外，還有大面積使用了鮮艷的色塊。過去的Android讓人覺得冰冷科技感，讓人有一種距離感。而 新的設計採用了與過去相反的做法，在系統裡大面積使用色塊，用色塊來突出主要內容和標題，讓界面的主次感更佳突出，也讓原本灰黑色為主的界面擁有了時尚和 活力。色塊的顏色選擇多使用飽和度高、明度適中的顏色，整體擁有比較強烈的視覺衝擊，但並不會太刺眼。Action bar也同樣從過去的灰黑顏色改為彩色，並且讓狀態欄與之融為一體，這點與iOS 7的設計非常相似。

5.FAB 按鈕（Fixed Action Button）

在Google的宣傳片裡，最引人注目的新玩意，就是這個淘氣的圓形小按鈕了。 從宣傳片裡來看，這個按鈕的功能並不侷限於“新建”“播放”“收藏”“更多”等功能。它於整體界面的配色形成比較大的反差，因此會讓這個按鈕在界麵裡顯得 非常耀眼，從這樣的設計來看，這個按鈕所背負的任務將會是整個界面的主要操作。雖然有點類似與Path裡的“+”按鈕，但由於iOS系統本身並沒有這樣的 設計，這將會成為最區別於iOS的一種交互設計，對交互設計師和產品經理來說都可能會成為一種挑戰。

6.無邊框按鈕

在iOS 7的設計裡，我們已經看到了這樣的影子。最典型的便是“返回”按鈕只有箭頭和文案，去掉了原本的按鈕質感。Material Design的action bar也同樣採用了這樣的設計，直接用icon來表達按鈕功能。尤其是Material的鍵盤設計風格，最早對鍵盤風格進行極簡設計的是微軟的 Windows Phone，Android和iOS相繼跟進。而這次Material走得更極端，把鍵盤的按鈕邊框全部去掉，只保留了英文字母的按鈕。我們不能說這樣的 設計一定是好的，這樣的設計可能讓用戶對點擊的精準度無法更快地判斷，缺乏安全感。好處是在屏幕不大的手機上，去掉邊框的擁擠感會給字母更大的空間。

另外，無邊框按鈕的設計也體現在提示框的按鈕上。如何讓無邊框的按鈕區別於內容文字，這需要設計師除了考慮配色外，還需要考慮按鈕出現的場景，對設計師的在應用場景的解讀上也是一個挑戰。

7.聚焦大圖

一張與屏幕等寬，豎方向佔據半個屏幕左右的大圖，去掉action bar，只保留返回按鈕的設計，在一兩年前十分流行的summly應用上就已經非常受到歡迎。後續也有一些應用跟進這樣的設計（例如淘寶），但並沒有大面積流 行起來。Material Design很大膽地使用了這樣的設計。在Google的引導下，這樣的設計風格將很有可能風靡起來。

原文：Material Design引領的設計趨勢