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

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

網頁佈局的解放時代

過去幾年,一成不變的網頁佈局(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 DesignFacebookShopifyAirbnb Design 都是可以借鏡的例子。

資料來源: WebflowThe Next WebAWWWARDS

往下滑看下一篇文章
人人用 AI,訊息更分散?普羅品牌顧問「Process 2.0」助企業建品牌 AI 助理、精準溝通驅動成長
人人用 AI,訊息更分散?普羅品牌顧問「Process 2.0」助企業建品牌 AI 助理、精準溝通驅動成長

自 2022 年底 ChatGPT 引爆生成式 AI 浪潮以來,企業競相導入 AI 加速內容產出,效率看似提升,品牌訊息破碎化與品質失控的風險卻也隨之浮現。行銷、客服、業務各自運用 AI 工具產出文案,語氣與規範逐漸失去統一標準,消費者接收到的品牌形象因此愈趨模糊。

「一旦 AI 成為人人可及的工具,它本身幾乎不再是差異化的因素。真正的差異,不在於技術本身,而在於企業如何運用它。」Process 普羅品牌顧問創辦人 Martin Kessler 指出,長期來看,勝出的不會是使用最強大 AI 的企業,而是那些將品牌定位得足夠清晰、即使在技術趨於同質化的情況下依然與眾不同的企業。「AI 正成為常態,但唯有強大的品牌,才具備真正的競爭優勢。」

普羅品牌顧問-2.JPG
Process 普羅品牌顧問創辦人 Martin Kessler。
圖/ 數位時代

如何運用 AI 加快內容產出速度,並同時兼顧品牌信任所需要的一致水準,這是 1995 年創立於瑞士蘇黎世的普羅品牌顧問,近年積極思考的問題。為此,普羅提出「Process 2.0」服務,將顧問角色從建立品牌策略,延伸到協助企業建立可持續運作的品牌溝通系統。

「Process 2.0」服務:提升企業品牌溝通力

Process 普羅品牌顧問台北分公司總經理洪翠霞觀察,品牌訊息之所以失焦,關鍵在於策略完成後,仍缺乏一套持續運作的溝通系統銜接執行。她將這種落差歸納為五種斷層:

首先,一旦策略完成後未能落實到日常工作,便形成策略斷層。同時,當品牌理解過度仰賴少數主管,一旦人員異動,傳承便隨之中斷,造成轉譯斷層。

在執行面上,各部門對外溝通的語氣逐漸分散不一致,也會有語氣斷層的問題;內容產出雖多,卻缺乏共同標準判斷是否符合品牌,則是驗證斷層。最後,所有品牌知識散落各處、未被系統化管理,導致治理斷層,也讓最初的策略價值難以發揮效果。

這五個斷層背後,指涉的是同一個關鍵。也就是品牌策略與實際執行之間,少了一套能夠持續運作的品牌溝通系統。

普羅品牌顧問-3.jpg
Process 普羅品牌顧問台北分公司總經理 洪翠霞。
圖/ 數位時代

為此,普羅開發出「Process 2.0」解方,從三個階段解決落差。首先,從「Brand Strategy」出發,先釐清品牌的定位與價值主張;接著才是「Brand Communication System」,將策略轉化為跨部門可依循的語言規則;最後則是「AI Brand Communication」,把品牌知識整合進安全可控的 AI 工作環境,讓行銷、業務、客服、人資,乃至海外代理商,都能基於統一的品牌基準產出內容,並持續進行審核與知識更新。

「AI 內容產出速度已遠遠超過品牌治理速度,品牌基礎若模糊不清,AI 只會更快放大既有的問題。」洪翠霞強調,AI 時代讓斷層問題更加明顯,因此她也期待透過「Process 2.0」品牌專屬 AI 助理,延伸顧問影響力,幫助品牌長期把關、一同成長。

品牌力 + AI:打造品牌專屬 AI Agent

為實現「Process 2.0」,普羅攜手愛酷智能科技(AccuHit)將品牌策略、知識與 AI 技術整合,協助企業建立專屬品牌 AI 助理。

愛酷智能科技(AccuHit)執行長林庭箴指出,「Process 2.0」鎖定的是品牌再造:AI 除了應用在企業內部流程,還能如何用在品牌溝通面。他分析,當電商進入超微利的時代,零售產業正走向三個不可逆的趨勢,包括:到 2030 年,將有五成消費行為由 AI 協助完成,商品資料必須完整到能讓 AI 讀懂;其次是超個人化,信任愈稀缺,推薦卻必須愈貼近個人需求這件事將更挑戰;第三,則是預測型消費將持續增加。

普羅品牌顧問-4.JPG
AccuHit 執行長 林庭箴。
圖/ 數位時代

尤其,在非零售場域,品牌溢價更為關鍵,因為品牌價值與品牌溝通內容不只要讓消費者理解,也要讓 AI 讀懂,才能持續發揮影響力。不過,當企業想要運用 AI 做行銷卻沒想像中容易。林庭箴強調,企業 AI 最大的挑戰,多半集中在機敏資料的存取與管理層面。

因此在「Process 2.0」的開發協作上,普羅負責定義場景,AccuHit 則提供技術與產品面支援,將品牌規範與知識納入 Gen AI 系統,讓所有輸出都能經過品質控管,如同 AI 版本的品牌指南,確保每一次輸出都建立在信任與安全之上。

目前品元實業、昇昇膠業等品牌已導入試用這項服務工具,無論是行銷內容撰寫、客服回覆、產品諮詢或內部教育訓練,皆能依據統一的品牌規範,輸出兼具效率與品質的內容。

Brand-to-Revenue:探索成長新引擎

根據台經院發布的《2026 台灣企業品牌力大調查》,過去五年(2021 至 2025 年)收集的 1,167 家企業數據顯示,台灣企業普遍呈現「內強外弱」的品牌結構。也就是品牌定位與內部管理已具基礎,但對外溝通與價值主張,如品牌好感度與互動性,卻相對薄弱,導致多數企業雖有高重複購買率,卻缺乏品牌溢價能力與市場認同。

對此,台灣品牌耀飛計畫小組副主任朱俐穎指出,「Process 2.0」的目標,是協助企業建構可落地的溝通能力,最終讓品牌策略實質驅動營收成長。

她以多年輔導近千家品牌企業的經驗為例,企業經過品牌輔導後,形象全面升級、設計語言更聚焦,市場識別度也隨之提升。她觀察,品牌塑造的成果平均在一至兩年後開始發酵,客戶能明顯感受到不同:「以往客戶只是單純買產品,但有了品牌之後,就多了願景與合作想像,能吸引其他企業一起創新共榮。」

普羅品牌顧問-5.jpg
台灣品牌耀飛計畫小組副主任 朱俐穎。
圖/ 數位時代

AI 的本質就像一面放大鏡:品牌定位清楚,AI 能加速轉譯、提升溝通效率;定位模糊甚至混亂,AI 也會同步放大這份混亂,後果難以收拾。品牌梳理是否到位,決定了 AI 是阻力還是助力。

為協助企業及早驗證成效,普羅已推出「60 天品牌成長試用計畫」,讓企業在正式導入「Process 2.0」前展開深度合作,鎖定成長機會。從 Made in Taiwan 到 Trusted Taiwan Brand,信任,才是品牌溢價的關鍵。

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

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