網頁設計趨勢

新的一年馬上就要到來，網頁設計設計師與網頁開發者，展望新的一年的最好方式──就是預先了解 2014 年的十大網頁設計趨勢預測，看看是否能夠激發一些靈感，為未來的工作方向提早作準備。

一、跳脫平淡的文字編排/字體設計（typography）

Stuff and Nonsense 網頁設計網站。

未來「有個性的字體」將成為網頁設計的趨勢，所謂有個性的字體是獨樹一格，可以自成一個宇宙。不是電腦中已有的標準化字體。設計師正開始找尋能夠為設計增添一些個性和獨特性的字體。

網頁設計公司 Stuff and Nonsense 的新網站設計是很好的例子。儘管可以使用標準襯線字體（serif）或無襯線字體（sans serif）如 Helvetica，取而代之的是，他們選擇了獨特的襯線字體，來保持專業性但又帶點個性。未來，將拋棄簡單與氾濫使用的字體，在網頁設計中更多地運用有個性的字體。

二、扁平化設計（flat design）

iOS7 宣傳頁面。

今年蘋果漸漸拋棄擬真化設計，轉向扁平化美學，iOS7 即為最佳代表。 儘管在此之前，下降式的陰影（dropping drop shadows）和漸層（gradients）通常是展示產品新外觀的好方式，蘋果還是盡量除去可能的設計元素，將設計提升至另一個層次。隨著 iOS7 的扁平化設計推出一些時日，全球已經一窩蜂跟進。（編按：想更了解什麼是扁平化設計，可以參見 UI 美學趨勢備忘錄─淺析扁平化設計一文。）

三、大面積圖像區塊取代滑動區塊

Realtii.com 採大面積圖像區塊設計。

大面積圖像區塊（Large hero areas）意指網站首頁中，使用用大圖作為主視覺，只有少量的文字，放置在網頁的最頂端。不論背景是一張簡單模糊圖片中間加上一個標題或是有更多延伸說明的 Realtii.com，大面積圖像區塊已經慢慢取代滑動區塊（sliders），掌握人們的視線。

較過時的滑動區塊設計，點擊中央 1-5 的數字可以滑動圖片。

結合大面積圖像區塊的滑動區塊設計，效果也不錯（點擊右方小圓圈可滑動換頁）。

四、著重行動網站呈現

隨著人們強烈仰賴手機，設計師們開始關注網頁在手機上的呈現。未來網頁將會與社群媒體整合，包括：要求使用者 e-mail 訂閱、超長的滾動頁面、快速載入的網站等功能，都會讓行動網站的使用更加友善。

五、影片取代文字

整合貨幣裝置服務 Coin 網站。

以影片取代文字的基本精神是：如果影片會自動解說資訊，為什麼要費神閱讀？2014 年的趨勢是，你會開始看到網站上都內嵌影片，特別是在前述所說的大面積圖像區塊，例如新興產品 Coin 的網站也採用影片放在它的官網首頁。 撇除需要下載更多的數據的缺點外，影片比文字還能更有效地說明資訊含量較高、較複雜的新科技產品，其製作和傳遞分享越來越方便，因此，以影片取代長篇大論的文字介紹不失為一個很實用的點子。

六、長滾動頁面（long scrolling sites）

網業開發工具 MACAW 網站。

人們習慣「滾動」來閱讀、搜尋資訊，現在網站使用更多的設計技巧、例如畫面更多的留白、回應式網頁設計（responsive design），使得過去被詬病的長滾動頁面重新流行起來，長滾動頁面設計有助於人們的資訊吸收。Macaw 網站是很好的例子， 令人耳目一新的網頁排版讓這種設計不顯無聊，使用者不會意識到實際滾動的距離有多少。（編按：Facebook、Pinterest 也屬於這種設計）

七、配色簡單

網頁介面開發 UIkit 網站。

簡單的意思是指整個網站只使用一兩種顏色，以 UIKit 為例，只有一個顏色（在設計與藝術領域中，黑與白被視作無色）。 這樣簡單的配色似乎是大多是受到受扁平化設計的影響，但也不盡然。

一些時下上線的網站使用很少的色彩，甚至放棄所有的顏色，只用白、黑，兩者之間的顏色都相當流行，再加入一點點的顏色作為小小的點綴，例如加入紅色來吸引目光。所有的顏色使用都必須非常小心，使用正確才能增加影響力和張力。

八、簡化內容

上方藍色框框為簡化對話內容。

簡化的內容代表著內容意味著短時間跳出的內容，作者把它稱作一種 「Twitter 風格」。隨著時代演進，人們的注意廣度（attention spans）變得更短，一段時間內能夠注意到的外在刺激有限，因此設計師利用短時間跳出的簡短內容（而非長篇敘述）來解決這個問題。

九、不用側邊欄 (sidebar)

ooomf 網站。

不用側邊欄，整合所有選單、內容至網頁，只要下拉滾輪即可看見的趨勢正流行。儘管目前部落格、雜誌形式網站比較採用，但許多這類的網站也在實驗這種做法。這也擴張內容的視覺影響力（也利於回應性網頁設計的開發）。想像你在閱讀網頁，旁邊卻有很多廣告閃動、擁擠的資訊出現不斷干擾你的注意力，因此，設計師不用側邊欄，盡可能的將文章放置在網頁主體，排除其他干擾，以便塑造良好的閱讀經驗。

十、使用編修過色調、風格的圖片

Cider Co. 網站。

未來的網頁設計可能會出現越來越多類 Instagram 風格的照片，也就是顏色重疊、失焦、模糊、或以濾鏡編修過的照片。舉例來說，西雅圖 Cider Co. 就將一張照片編修放在大面積圖像區域，塑造成一種仿古和質樸的感覺，以符合網站的整體風格。

十一、加分元素：瘋狂、性感、酷的事物

這些是所有人希望不要消失的元素，當網路發展更成熟、更加的錯綜複雜、更多的事情被開發出來，設計師與網路開發者將要成功創造更瘋狂、更性感、更酷的產物。如果你認為視差滾動 （parallax scrolling）很酷的話，未來你還會看到更多更酷的東西。

2014 年的趨勢還有 HTML5 被廣泛使用來呈現網站不同部分的動畫。Tobi’s Story 網站就是以很棒的方式將很酷的東西作了最佳的使用，滾動距離的次標題與動畫良好的結合，是未來的趨勢。

最後要謹記的一點是，人們都愛酷的東西，當能實際使用時又更愛它，但要記得運用酷的東西還是不要太過火為佳。

資料來源： The Next Web〈10 Web design trends you can expect to see in 2014〉

網頁設計,趨勢, typography,flat design,扁平化設計,Large hero areas,大面積圖像區塊,sliders,long scrolling sites,長滾動頁面,Responsive Web Design,響應式網頁設計,RWD,parallax scrolling,視差滾動,Web design trends