網頁佈局大解放!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 科技高中!錦和高中導入羅技電子 Rally Board 65 打造「移動任意門」,讓世界走進教室!
新北首間 AI 科技高中!錦和高中導入羅技電子 Rally Board 65 打造「移動任意門」,讓世界走進教室!

深夜11點,多數高中生可能已經準備熄燈就寢,但新北市錦和高中的 AI 基地教室卻燈火通明。原來,錦和的老師、學生,正利用 Logitech 的會議室解決方案 Rally Board 65,和遠在美國科羅拉多州、有 17 小時時差的 Kent Denver School進行視訊。兩校學生在螢幕上熱切分享文化習俗與校園趣事,教室氣氛熱絡。

在錦和,這樣跨越時區和國界的「深夜國際教室」,並非偶一為之的特殊活動,而是透過台美教師討論規劃,有系統制度的國際交流日常。

事實上,作為新北市政府教育局認可的全新北市首間「AI科技高中」,近年來,錦和在數位轉型、科技教育上多有著墨。從生生用平板、建置全校數位互動軟體,到引進被師生譽為「移動任意門」的 Logitech Rally Board 65,錦和正以活潑、彈性的數位學習策略,重新定義未來教室的模樣。

注入數位學習DNA,翻轉傳統教學模式

但錦和的數位轉型並非一蹴可幾。早在疫情期間,錦和高中校長張純寧就意識到,數位教學不是選擇題,「因應數位浪潮、社會趨勢,我們一定得這麼做!」當時,她大刀闊斧將行政人員分組,手把手協助全校老師跨越科技門檻、熟悉線上教學,成功將「數位 DNA 」注入錦和。

如今,走進錦和的課堂,會看到生物老師利用平板搭配 AR 擴增實境技術,將圖像化為立體,讓學生直觀地觀察昆蟲解剖構造和心臟血液的流動;數學老師則透過 VR 虛擬實境,設計「密室逃脫」遊戲,讓學生在解謎中,學著邏輯推演;公民老師更帶著學生投入田野調查,將時事探討結合數位資訊,提升學習興趣。

「錦和的老師,幾乎都已經完成 AI 的增能研習。」張純寧透露,學校在將數位工具融入教學之餘,更和淡江大學合作開發專屬的「AI 倫理素養手冊」,並列為校定必修課程,目的是確保學生在擁抱 AI 的同時,也能建立正確的價值觀。

引進 Logitech Rally Board 65,打造無縫國際交流體驗

而隨著數位學習的版圖不斷擴張,近來,錦和面對的新挑戰,是為學生創造「無縫的國際交流體驗」。

為了讓學生有機會開口說外語、和世界接軌,錦和申請校園雙語計畫子計畫三,採購Logitech Rally Board 65,方便與美國、法國等國的姐妹校線上交流。但過去,要進行高規格的遠距教學,學校必須斥資打造一間固定的遠距教室,裡頭還得裝設投影機、追蹤攝影機和收音設備,不僅空間受限,設備盤點、維護也是行政人員的夢魘。

錦和高中圖書館主任吳孟仁解釋,如果讓學生一人用一台筆電視訊,只要有一位學生的設備出狀況,或是網路連線有問題,老師就必須先中斷課程,接著再像個工程師般,協助學生一一排除障礙;若採用多人在同一鏡頭前發言的模式,傳統的視訊鏡頭又無法照顧到每一個人,導致交流缺乏臨場感。

#1 羅技_第一篇(錦和高中)_115126
吳孟仁表示,學生為參與跨國交流,常於夜間上線,展現高度投入與國際視野。隨著數位工具融入學習,學生更主動表達、協作與創造,培養面向未來的關鍵能力。
圖/ 數位時代

「我們要的,是一款將使用門檻降到最低、讓老師容易上手的數位工具。」張純寧指出,本學年藉由校園雙語化計畫與參與教育部高中優質化數位前導學校計畫的契機下,錦和偶然接觸到 Logitech Rally Board 65,結果意外發現,Rally Board 65 能徹底解決跨國交流的痛點。

#2 羅技_第一篇(錦和高中)_115126
Logitech Rally Board 65 結合 65 吋觸控螢幕與 AI 視訊技術,搭配移動式腳架,有效解決跨國交流溝通挑戰。透過 AI 與數位工具導入,學生培養跨域協作與問題解決能力,學習成果不再侷限於考試。
圖/ 數位時代

Rally Board 65 作為專為新世代協作而生的全功能,配有 65 吋的 4K 超高畫質觸控螢幕,還有兩支無須配對、充電的隨插即用數位筆,讓師生能輕鬆在白板上書寫、共編討論。鏡頭、麥克風和揚聲器一體成型的配置,打破了過往需要拼拼湊湊各項硬體的限制;內建的「RightSight 2」智慧取景技術,不僅能自動追蹤並清晰框選正在發言的師生,學生不再需要擠在一個小小的筆電鏡頭前,也不用傳麥克風,只要像平常聊天般自然發言即可;另外,「RightSound 2」智慧調音技術則能透過 AI 回音抑制技術,過濾背景噪音,確保討論過程不受環境音干擾,讓跨國溝通有如面對面交流般清晰。

#3 羅技_第一篇(錦和高中)_115126
錦和高中透過視訊設備,與長期有往來的美國肯特丹佛學校進行即時交流,科技賦能教育場景,讓跨國學習成為日常。
圖/ 數位時代

張純寧特別提到,Rally Board 65 擺脫傳統需固定於牆面的限制,只要裝上專屬推車腳架,就能任意移動,「Rally Board 65 最大的優點,是『可攜』!讓我們隨時隨地都能在學校的任何一個地方,創造『教學角』。」她笑稱,要是學校裡多幾台這樣的設備,等於多蓋了幾間多功能教室。不僅具備高度機動性,Rally Board 65 在安裝與視角上也同樣靈活,支援桌面、壁掛等多元配置,螢幕亦可雙向翻轉,根據需求調整上下視角,輕鬆融入各種教學情境。

同時,Rally Board 65 還有「免學習」的特性,「插電就能用,老師完全不用特別學習。」吳孟仁分享,現在的台美跨國連線,即便安排在夜間11點,學校也不必指派資訊人員留守,老師自己就能輕鬆開機、主持課程,大幅提升設備的使用率與教學彈性。

軟、硬體設備的升級,最終仍要回歸學生的成長。張純寧表示,當學生具備強大的數位協作能力,並習慣在虛實整合的環境中表達自我時,「你會明顯發現,沒有學生再躲在角落了!每個人都必須、也樂於站出來展現自己。」比方說,在自然科探究與實作的全年級發表會裡,學生是以「線上共編」模式,繳出成果;原先對寫程式一竅不通的社會組學生,經過 AI 課程上的學習,現在竟然能運用 AI 工具,協助弱勢團體、公益組織開發出線上的「記帳系統」。

#4 羅技_第一篇(錦和高中)_115126
張純寧表示,穩定且符合使用習慣的數位工具,是支撐長時間教學與行政工作的關鍵。透過羅技鍵盤滑鼠符合人體工學的設計,在高工時及高強度的辦公室工作下,保持舒適與效率。
圖/ 數位時代

從最初克服線上教學的陣痛,到成為新北市首間 AI 科技高中,以及引進 Rally Board 65,錦和用實際行動證明,只要具創新教育思維、善用多元數位工具,就能打破空間、時間限制,為孩子們打造一座與世界無縫接軌的未來校園。

從理念到實踐,打造未來教學場域。歡迎教職員夥伴預約參觀 Logitech 展示中心,了解更多 AI 教育解決方案:https://360theredmarker.com/vt/logitech-taipei/

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

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