網頁佈局大解放！2017年10大網頁設計趨勢|數位時代 BusinessNext

網站設計最迷人之處就是不斷變動，技術的演進讓設計師與工程師可以不停實驗創新，帶來更好、更流暢的使用體驗，以及讓人處處驚奇的感官饗宴。今年網頁又會有哪些有趣的風格將主宰我們的螢幕？我們綜合了 Webflow、The Next Web、AWWWARDS 等媒體與網站設計公司的預測，整理出網頁設計十大趨勢：

網頁佈局的解放時代

過去幾年，一成不變的網頁佈局（layout）已開始令人疲乏，幸而 Flexbox 以及 CSS Grid!（Chrome、Firefox 預計於今年三月開始支援）等技術的出現，讓版面設計變得更靈活彈性，為設計師、工程師帶來更寬廣的揮灑空間，今年將可看到更多網站打破慣有的「對稱」、「秩序」守則，形形色色，層層疊疊的網頁佈局肯定精彩。不過不變的大原則是，設計的重點是要烘托「內容」，內容才是骨肉、才是人們光臨網站的主因，因此設計的尺度上也需斟酌，天馬行空之餘，別反客為主，奪走內容的風采。

色彩在跳舞

色彩作為表達個性的重要元素，在極簡風蔚為風潮時卻被剝除，不過約莫去年開始，大面積漸層色塊似有強勢回歸，Instagram、Asana、Stripe 都以飽和的漸層重塑品牌視覺主調，今年絢爛的色彩以及流動的漸層更將大行其道；此外，影像以雙色調（duotone）後製，也可能會是今年的潮流。設計師，Sarah Hutto 預言，今年將會是很「funky」的一年，期待強烈的色彩刺激人們的視覺感官。

與前兩年的明亮輕盈、以及上述張揚鮮濃的色彩對比，以相對沉著冷靜的黑色作為主色調也是愈來愈多網站的選擇，只要「輔色」（accent color）搭配得宜，黑色一點也不沉悶，反而能在一片光彩的世界裡脫穎而出。

華麗且實用的動態效果

動態效果在當代的網頁設計領域扮演舉足輕重的角色，今年也絲毫沒有退流行的跡象，反而應用會更廣泛。適當的動態效果，具有突出重點、爭取注意力的用處，今年以 SVG、CSS 創造的動態效果預料將大幅增加，滾動視差（Parallax Scrolling）也愈來愈華麗。但設計師應考量品牌或內容的內涵以及每個動態效果的意義，避免「為動而動」。

創造小驚喜的微互動

「微互動」在網頁上也會愈來愈流行，比如滑鼠移過、點擊各式網頁零件如按鈕，捲軸滑動過程中，適時出現細緻變化，也能夠有提示重點的作用。當然，就跟動態效果一樣，設計師也要拿捏「動」的意義與幅度，才不致畫蛇添足。

不失真、載入快的 SVG 大行其道

比起傳統圖片格式 JPG、PNG、GIF 以像素構成，近年興起的可縮放向量圖片 SVG 在網頁上具有更大優勢，以標記式語言（XML）組合圖形，繪製矩形、圓形、線條都是小事一樁，複雜的填充、形狀也難不倒它，也能輕而易舉製作動態效果，而且不受解析度影響，無論利用什麼螢幕、什麼裝置觀看，都不會破壞圖像品質。SVG 勝出更關鍵的是，不需 HTTP Request，能夠大幅提升網站載入速度。例如這個便是以 SVG 繪製的後背包。

巨大字體精準傳達品牌意涵

首頁以巨大的字體呈現品牌主旨，也將是今年隨處可見的風潮。不過「巨大」並不代表加寬加粗，而是以恰當的字體設計，言簡意賅、精準表達產品精神，取代冗長贅言。而字體與背景或色彩互動、或者在字體上塑造動態效果，也是可以嘗試的作法。

虛擬實境技術結合內容

虛擬實境的話題從前年延燒到今年，科技巨頭對虛擬實境的投資力道絲毫沒有減弱的跡象，特別是Facebook 未來十年將砸下 30 億美金專注虛擬實境的研發。可預見的是技術更臻成熟，也會有愈來愈多媒體或品牌運用虛擬實境科技「說故事」，為人們創造更身歷其境的感受。

為不同使用者量身打造內容

對內容網站而言，有效的把「對的內容」傳遞給「對的使用者」，是這幾年備受重視的能力。不過能夠命中核心的卻不多。因為要達到跟隨情境給予特定內容，需要考慮不同使用者的不同特徵，例如，使用者來訪網站的目的是私人之用還是為了工作？使用者是從哪裡來到網站的？使用者此刻正在做什麼？他們以前在網站上的行為又是什麼？他們使用什麼電子裝置上網？他們現在是登入狀態還是登出？

這些特徵綜合起來增加了複雜性，有些媒體使用「推薦閱讀」機制或如 Facebook 以演算法為個體決定不同訊息流。而如 Fubiz 則用「Creativity Finder」，讓使用者自行設定「身分」、「區域」、「目的」三個條件，過濾最符合要求的內容給予不同使用者。

「登陸頁」重於「首頁」

登陸頁（landing page）與首頁（homepage）的差異在於，前者有個非常明確的目標，例如希望使用者註冊、訂閱電子報、甚至購買，而首頁則如自家門口，提示網站包含哪些內容或功能，作用乃為提綱挈領。前者的重要性日益彰顯，設計上要能高效率地帶領使用者完成「轉換（conversion）」目的，幾乎不會有「導航（navigation）」的成分，因為我們不希望使用者分心到其他地方，最重要、幾乎也是唯一的目的就是推進轉換。

設計的分享

如同程式領域熱烈的分享文化，近幾年有愈來愈多小公司或大企業樂於公開分享內部的設計團隊協作與工作技巧流程，不但有招募人才之效，也充分展現品牌特色、塑造設計領域的互助氛圍，Google Design、Facebook、 Shopify 、Airbnb Design 都是可以借鏡的例子。

資料來源： Webflow、The Next Web、AWWWARDS

氣候變遷不只是環境議題，而是攸關國際經貿的新政治語言，隨著碳定價時代來臨，去碳化能力將重新改寫全球供應鏈秩序，而這意味著：能源轉型不再只是政府的任務，是每一家企業的必修課。
在這波變局中，光是做好組織碳盤查仍不足夠，領先企業不僅開始管理產品碳足跡、更以AI數據治理提升供應鏈碳管理，例如，光寶科技因應客戶的脫碳淨零路徑積極建立碳足跡資料庫，並號召供應鏈夥伴參與，全面揭露產品碳足跡；以及台北醫學大學攜手希達數位等夥伴取得碳足跡數據與建立標準化的碳排計算方式，更好計算醫療器材設備的碳足跡。
換言之，碳不是被動記錄的數字，而是驅動新價值的槓桿，誰能把減碳轉化為市場優勢，就能在淨零新賽局中掌握主導權。對此，台灣永續能源研究基金會董事長簡又新進一步解釋：「台灣不僅是全球AI硬體重鎮，也積極開發AI應用服務，其中又以「AI驅動的碳排管理」最受矚目，因為，碳排數據龐大、變化快速，單靠人工根本無法處理，唯有借助AI才能即時解析、快速決策，讓永續不只是口號，而是可以落地的營運模式。」
「為實踐台灣2050淨零轉型，透過兩大–科技研發跟氣候法治–治理基礎，以及四個–能源轉型、產業轉型、生活轉型與社會轉型–轉型策略推動12個關鍵戰略，如發展風電/光電、氫能、前瞻能源等，目標是以削減碳排跟碳匯抵減達成淨零目標。」行政院能源及減碳辦公室副執行長林子倫如是說道。

醫療減碳進入關鍵期，AI驅動供應鏈碳足跡管理成顯學

根據國際健康無害組織（HCWH）的統計，全球醫療部門的碳排放量約占全球溫室氣體排放總量的 4.4%，這個比例相當於514座燃煤電廠年碳排的總和，其中，超過七成的碳排放來自於醫療的供應鏈（範疇三），例如藥品、器械設備的製造與運輸，以及相關廢棄物的處理，意味著醫療機構光是做好範疇一與範疇二的碳排管理還不夠，必須以供應鏈碳排管理的概念驅動低碳醫療。
「低碳醫療是全球關注的議題，但是，受到三個迷失–推動低碳醫療的成本高、需要更多數據才能展開行動、醫護人員太忙很難參與其中–影響，醫療機構的腳步不一而同，但從統計數據來看，低碳醫療僅需針對藥品、耗材、能源、運輸這些主要排放來源進行改善，即可看到顯著成效。」新加坡國立大學永續醫學中心主任暨教授Nick Watts以英國NHS為例說明，該單位已在2019年的基準下減少61%碳排等，只要從投資能源效率、數位化照護、預防醫療、在地化照護等面向切入、持續前行，即可看到成效。

台北醫學大學校長吳麥斯表示：「我們的醫療使命是『不傷害』：不僅要治病救人，也要減少對地球的傷害。」再加上環境部於今（2025）年初公告擴大碳盤查適用對象，自明（2026）年起，全國23家經衛生福利部評鑑為醫學中心之醫療機構必須每年定期揭露其溫室氣體排放盤查結果，因此，攜手希達數位等夥伴，透過收攏支氣管鏡、血液透析、核磁共振、雙和醫院健康檢查與冠狀動脈血管攝影等流程的碳排數據資料建立醫療碳排放因子資料庫，之後將進一步擴大到產品碳足跡計算，建立運輸與廢棄物數據庫，目標是在2028年完成三家醫院–衛生福利部雙和醫院、台北醫學大學附設醫院、台北市立萬芳醫院–的碳足跡全面揭露。「我們的期許是讓AI驅動的碳足跡管理平台處理繁瑣的碳排數據蒐集、分析等工作，讓醫護人員可以專注於人性化照護服務。」
協助台北醫學大學進行減碳行動的新加坡商希達數位有限公司執行長Torrent Chin表示：「產品的生命週期是固定的：原料、製造、運輸、使用與回收，碳排相對容易蒐集、分析與計算，醫療服務的碳排則沒有明確終點，需要進一步考量耗材、儀器與能源，對於商業模式也著重在服務的教育、旅遊與金融等產業來說，極具參考價值。」

醫療實戰對談，邀請各界重磅貴賓一同交流。左起：數位時代總編輯王志仁、新加坡國立大學永續醫學中心主任暨教授Nick Watts、台北醫學大學校長吳麥斯、新加坡商希達數位有限公司執行長Torrent Chin。

圖／數位時代

製造業淨零突圍的關鍵：從產品碳足跡到循環設計

光寶科技總經理邱森彬表示，商業模式使然，光寶科技的產品碳足跡有90%來自生產製造使用的原料，想要更好落實產品碳排，必須從原物料著手，為了加速產品碳足跡管理，成立希達數位，以巨量數據分析、人工智慧等科學化、系統化的方式著手。「根據統計，我們有1,800萬產品碳足跡活動、19萬個物料，以及3,300個產品系列的資料要處理，若是由外部顧問給予協助，需要100個顧問、花費3年的時間才能完成，但在希達數位的產品輔助下，僅15個顧問、6個月的時間就完成全產品碳足跡揭露，成為全球第一家完成全產品碳足跡揭露的電子製造業。」

完成全產品碳足跡揭露後，光寶科技發現：每年必須刪減8%二氧化碳量才能在2050年達成淨零碳排，83%二氧化碳來自消費性電子產品跟能源管理，為了更好服務品牌客戶，必須在2030年實踐50%減碳目標，以及19萬個物料中，包材碳排最高，必須即刻行動以高效減碳。「做好全產品碳足跡，我們才可以更精準地推動產品脫碳策略，並且鼓勵供應商一起跳脫框架、共同開發低碳材料。」邱森彬如是說道。
對此，Amazon Web Services（AWS）台灣暨香港企業銷售暨策略方案副總經理謝佳男表示：「產品碳足跡只是第一步，不僅能讓我們知道碳排熱點並採取行動，如降低包材碳排等，更重要的是，可以在產品規劃與設計之初就預測可能的產品碳足跡並予以優化，更好實踐永續營運。」

戴爾科技集團永續服務資深總監Bobby Mon Raother表示，該公司自2008年即開始使用再生材料，並在2021年提出Concept Luna，將以循環設計–從設計階段就考慮可修復性、可升級性、材料回收、減少浪費–的概念，如模組化設計、可維修面板、使用再生材料，以及智慧感測與遙測等，藉此延長PC等產品壽命、降低環境衝擊。「在產品碳足跡方面，我們將持續從製造、運輸、能源使用與報廢管理等四個面向切入，積極減少每個階段的碳排放量。」

自2005年開始提供永續顧問服務的施耐德電機日本永續事業部ESG數位轉型負責人呂勁毅進一步分享協助世界500強客戶實踐淨零轉型的心得：「除了要擬定策略、採用數位工具、蒐集與分析數據，更重要的是透過治理手法與相關活動加速整個進程，發揮數位與淨零雙軸轉型綜效。」
總的來說，無論是醫療或製造業，淨零已不再只是企業的選修課，而是決定競爭力的新指標，唯有做到產品碳足跡全揭露，同時，結合AI數據治理、循環設計與數位轉型，才能在碳定價與供應鏈重塑的時代突圍，將減碳壓力轉化為成長動能。

網頁佈局大解放！2017年10大網頁設計趨勢