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

網站設計最迷人之處就是不斷變動,技術的演進讓設計師與工程師可以不停實驗創新,帶來更好、更流暢的使用體驗,以及讓人處處驚奇的感官饗宴。今年網頁又會有哪些有趣的風格將主宰我們的螢幕?我們綜合了 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

往下滑看下一篇文章
青年如何跨出改變社會的第一步?Impact Star 3 組首獎團隊從教育到減塑,把想法帶進真實現場
青年如何跨出改變社會的第一步?Impact Star 3 組首獎團隊從教育到減塑,把想法帶進真實現場

許多年輕人懷抱熱忱,期盼透過行動讓社會變得更好,卻在起步時感到茫然,不知道該從何著手,也難以確認自己的想法是否回應真實需求。為了接住這份想要改變社會的熱情,「2026 Impact Star 青年影響力啟動賽」為青年搭起一個動手實作的舞台。

Impact Star 由新北市政府青年局主辦、社企流共同推動,邀請 5 個社會創新組織提出第一線問題,並安排專業導師陪伴 10 組青年團隊展開兩個月的實作,從訪談、理解需求開始,把點子一步步做成能進入現場測試的方案。

新北市政府青年局
圖說:新北市青年局 邱兆梅 局長分享「Impact Star 青年影響力啟動賽」的辦理初衷
圖/ 新北市政府青年局

把科學教材放進 LINE,協助老師更快完成備課

「LIS 情境科學教材」長期製作國中小科學影片與教學資源,這次競賽以「跨科教學減壓」為題,希望青年找出方法,協助非自然科背景的老師更容易使用這些教材準備科學課程。

本次獲獎團隊「EDU」成員劉子瑤、梁秭萁訪談一名剛進入教育現場的老師後,發現對方同時教授近 9 個科目,還要兼顧行政工作與班級經營,備課時間格外珍貴。因此決定把解決方案聚焦在備課流程最佳化,協助教師更快找到適合的教材。

「EDU」 決定利用教師們最熟悉的 LINE 官方帳號,整合 LIS 影片、投影片與教案,再把教材內容製作成視覺化備課卡。使用者只要透過手機,就能簡單掌握教學重點、課程流程及所需材料,直接放進既有的備課流程。

透過吸收教師的回饋,「EDU」 在競賽過程中持續調整,讓操作方式更貼近實際使用情境。最終作品在 3 名教師參與的初步測試中,於系統易用性方面獲得 82.5 分,反映受測教師對操作體驗的正面評價。

新北市政府青年局
圖說:劉子瑤、梁秭萁分享,未來也期待相同架構能延伸至其他科目,讓更多教學資源被帶進課堂。
圖/ 新北市政府青年局

把教育平權做成手機遊戲,讓青年找到參與方式

「TFT 為台灣而教」長期關注教育不平等,這次活動希望促進青年思考,如何讓高中生與大學生理解教育平權,並找到適合自己的參與方式。本次獲獎團隊「星築美少女」因此決定製作手機沉浸式遊戲《鐘響以前》,並將這些因素融入故事中。遊戲以一場為期 3 天的營隊為背景,玩家能在 15 至 30 分鐘內探索場景、與角色對話並蒐集線索。

遊玩過程中,玩家會發現一名叫做阿龍的孩子沒有出現在正式名單上;而阿龍未能參加營隊,背後牽涉交通、家庭照顧責任與行政程序等因素。玩家必須在有限的人力、時間與預算中作出選擇,透過安排阿龍的行程,切身理解教育不平等如何出現在孩子的日常生活中。

遊戲結束後,系統會依照過程中的選擇提供「行動者分類」,協助玩家了解自己適合投入陪伴、資訊整理或跨域解題,並附上 TFT 相關計畫與參與連結。在 67 名完成前後測的玩家中,認為自身專業難以對教育平權發揮作用的比例,由約 4 成降至約 2 成,顯示更多玩家在體驗後,看見參與教育平權的可能。

新北市政府青年局
圖說:星築美少女成員分享,自己曾在教育社會學課程中接觸相關議題,理解家庭、交通與經濟條件都可能影響一名孩子的求學歷程。
圖/ 新北市政府青年局

減塑求籤機走進飲料店,環保成為日常選擇

「海湧工作室」長期投入環境教育與廢棄物源頭減量,這次競賽希望讓民眾理解海洋廢棄物治理,並在日常生活中實際參與減塑。本次獲獎團隊「塑 per NOVA」從淨灘資料中注意到塑膠吸管造成的海洋廢棄物問題,也觀察到消費者即使知道減塑的重要,仍習慣於購買飲料時拿取塑膠吸管。

「塑 per NOVA」成員王姸儒、郭書睿,因此把實作場域選在手搖飲店,設計「減塑求籤機」。裝置設在消費者購買飲料的動線上,當消費者準備拿取吸管時,即提供可替代選項,讓減塑融入消費流程。

顧客投入 1 元後,可取得一支可自然分解的蒲草吸管,透過掃描 QR Code,可抽取線上環保籤詩。此求籤的趣味設計有效提升消費者嘗試意願,透過線上籤詩更進一步提供日常減塑方法介紹。

「塑 per NOVA」在 3 間飲料店測試兩週,累積約 150 次蒲草吸管取用。這段經驗讓他們直接觀察顧客如何操作裝置,也了解方案能否融入店家的營運流程,為後續拓展更多場域累積經驗。

新北市政府青年局
圖說:成員王姸儒、郭書睿設計「減塑求籤機」,讓減塑融入原本的消費過程。
圖/ 新北市政府青年局

前進新加坡,青年行動的下一步

獲得首獎的 3 組團隊,預計於 9 月底前往新加坡和南洋理工大學,與當地社會創新組織交流。團隊將延續這次實作累積的經驗,觀察新加坡如何回應相近議題,再思考哪些做法適合帶回台灣。

「EDU」希望了解新加坡如何支持非本科教師授課,以及當地社創組織有哪些能夠立即實踐的做法;「星築美少女」則將觀察教育政策的實際運作,及新加坡如何理解與推動教育平權。「塑 per NOVA」關注當地如何讓環保意識融入民眾生活,並希望從永續措施中找到減塑求籤機後續發展的方向。

頒獎典禮上,「星築美少女」成員王品然坦言:「一開始覺得社會影響力很遙遠,自己做不了什麼東西。」但參加完比賽後發現,踏出第一步就可能帶來改變,她說:「其實做一小步,你就可以改變一些東西。」

從起步時不知道該從何著手,到把方案帶進真實場域,3 組團隊在兩個月的實作中找到答案:青年不必等到有完整的解法才開始,只要先走近一個真實需求,並根據回饋持續調整,對社會的關心就能逐漸成為具體行動。

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
一次搞懂工業AI
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓