網頁佈局大解放!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

往下滑看下一篇文章
硬體新創如何打國際盃?邁特Demo Day揭出海關鍵:技術是門票,信任才是護照
硬體新創如何打國際盃?邁特Demo Day揭出海關鍵:技術是門票,信任才是護照

第十屆邁特創新加速計畫Demo Day在2025 Meet Taipei盛大登場。今年邁特以「邁國際」為活動主軸,邀請加拿大、新加坡、日本和台灣的專家,除了探討全球市場的開拓,也期望運用邁特創新基地,建立具磁性的網絡(Magnetic Net),持續吸引硬體創新團隊與專家,建構蓬勃發展的全球硬體生態系。

中華民國全國創新創業總會秘書長謝戎峰在致詞時直指,台灣市場量體小,硬體新創要走到小量試產非常不容易,過往台積電就是為輝達做到開源、加速整合的角色,「邁特也在系統面扮演同樣角色,從打樣、試樣到小量試產,提供新創全方位協助。」

從矽島進化新創島,「國際化」是關鍵指標

事實上,邁特創新基地自2016年創立以來,便致力成為硬體創新領域的加速器,期望提供「從0到100的解決方案」,並打通「硬體創新的最後一哩路」。邁特創新基地執行長戴憶帆指出,台灣被譽為半導體、電子製造服務強國,在全球產業鏈中具核心地位。如今,台灣正在善用「矽島」具備的卓越製造、供應鏈能力,聚焦創新研發,成為讓硬科技落地、加速商業應用的「新創島」,「其中,『國際化』絕對是衡量新創團隊能否快速成長、取得成功的最重要指標。」

邁特創新基地
加拿大駐台北貿易辦事處副處長拓喬丹特別蒞臨分享,期待與更多台灣新創攜手合作。
圖/ 數位時代

目前,邁特已幫助來自全球逾13個國家、超過150家的新創公司向外擴展。而為了具體展現協助台灣硬體新創出海、邁國際的決心,本屆Demo Day特別邀請來自跨國創投的專家,一同探討全球市場的開拓。

加拿大駐台北貿易辦事處副處長拓喬丹(Jorden Turley)首先指出,邁特的國際協同合作理念,與加拿大不謀而合,「加拿大視台灣為亞太戰略中,不可或缺的重要夥伴,我們彼此間不是競爭而是合作。」例如台灣在硬體製造、實作方面有優勢,加拿大則在設計方面表現出色,多邊合作有助於企業分散風險,並加速打入第三市場。

講好故事、建立信任感,打破技術迷思

跨界對談開場前,主持人邁特創新基地顧問柯旂,也先回應「邁國際」不只是今年的主題,更是台灣硬體創新的必然道路。本屆 Demo Day 不僅邀請到加拿大駐台單位、日本京都大學創投、新加坡創新生態圈代表,更有台灣創新總會秘書長、台經院等重要嘉賓蒞臨,一同見證台灣硬體新創與全球鏈結的關鍵時刻。跨界對談更邀請包含:日本京都大學創投(Kyoto University Innovation Capital)亞太區業務發展經理Raymond Woo,以及德國馬牌集團(Continental)旗下創投部門的合作與創投管理總監邱殷樂,為新創提供具體出海建議。

戴憶帆強調,「國際化」已是台灣新創現今最重要的課題,而新加坡、日本會是台灣進軍國際的首選前哨站。新加坡作為東南亞地區的中心,許多國際團隊選擇在當地募資、上市櫃,介接資源方便;日本則與台灣的文化、理念相近,相當重視「信任」、夥伴關係,加上在東京、京都等頂尖大學裡,有最前沿的技術,對需要發展應用、商業化成長的新創來說,是值得尋求技術互補的合作對象。

邁特創新基地
跨界對談由左至右分別為主持人邁特創新基地顧問柯旂、邁特創新基地執行長戴憶帆、日本京都大學創投(Kyoto University Innovation Capital)亞太區業務發展經理Raymond Woo,以及德國馬牌集團(Continental)旗下創投部門的合作與創投管理總監邱殷樂,與現場與會者進行交流。
圖/ 數位時代

邱殷樂直指,台灣新創的技術極佳、很有實力,甚至勝過美國、以色列的公司,「最大的問題,是不會講述自己的故事,以及不清楚如何對接正確的人和事。」他建議,新創在展開跨國合作之前,必須先確定在台灣的根基已穩,同時了解自家的技術優勢,以便說服投資人和潛在客戶;在和大集團、大客戶合作時,也要找到能推動技術使用的關鍵人物或團隊。

Raymond Woo觀察,技術背景出生的創辦人,經常會犯下只看技術、看不到大局的盲點,加上創業是相當依賴人脈的事業,「新創必須學習用技術來解決特定商業問題,並與合作夥伴建立最重要的『信任』,否則技術再好、再先進,也無法順利擴展、被妥善應用。」

硬體新創精銳盡出,智慧農業、智慧醫療、綠色創新吸睛

精彩的對談後,緊接著輪到參與第十屆邁特創新加速器計畫,涵蓋智慧農業、智慧健康、智慧製造與綠色創新等硬體領域的六組新創團隊,一一登台Pitch,並由邱殷樂、Raymond Woo、日本村田製造所新規事業推進部部長東端和亮、邁特創新基地日本代表顧問上野峻基和華碩電腦協理Sean Lai等業界先進擔任評審。

首先登場的台灣百應生物科技,是運用AI、電腦視覺技術,實現家禽養殖的自主監控,完全無需人工干預,準確度已可達98.5%。擴核生醫科技則打造一款模組化、可程式化的實驗室自動化平台,能將整合液體處理、細胞培養、影像擷取和資料分析等流程集於一體,加速生技與藥物開發的研發、驗證流程。雨傘不滴的綠色創新專利產品「傘不滴」,是透過物理擠壓與高科技吸水部件,讓雨傘四秒內便完全不滴水,取代一次性塑膠套,解決公共場所地滑和環保痛點。恆帝斯智能科技是結合ESG輔導與碳IoT設備,自主開發韌體,解決聯網不穩、斷電導致的數據品質等問題,助力企業邁向淨零轉型。領動智慧科技的空中手寫輸入技術,鎖定的是下一代殺手級產品「智慧眼鏡」,透過高精度動態感測,為智慧眼鏡提供直覺、隱私友善的文字輸入解決方案。超術感醫學科技研發的AR顯微手術模擬訓練系統,則利用真實手術器械,提供精確控制回饋與AI動作分析,解決傳統訓練器械缺乏的「手感」問題,能被應用在眼科、神經外科等高精密的手術訓練。

最終大獎,分別由台灣百應生物科技、擴核生醫科技和超術感醫學科技抱走。東端和亮直言,透過此次Pitch,一方面看到台灣在軟硬整合的實力,更令人激賞的是,「團隊在營利之外,還致力解決社會問題,創造美好世界。」

邁特創新基地
日本村田製造所新規事業推進部部長東端和亮特別代表評審團致詞,除了欣賞台灣新創軟硬整合的實力,更發現團隊在營利之外,還致力解決社會問題,創造美好世界。
圖/ 數位時代

從在地驗證到鏈結全球,助新創在國際市場站穩腳跟

團隊對於自家產品、服務的用心,正是邁特極力提倡的核心價值,也是台灣新創通往世界舞台的基石。邁特創新加速計畫的運作模式,便如同硬體創新領域的國際嚮導,持續為新創團隊提供在地技術驗證和商業基礎訓練,並將新創的產品對接到國外大廠、國際創投。未來,台灣新創若能持續深化國際化、與多元夥伴合作,並具備正確的敘事能力和出海戰略,必能加速向外擴展,在全球市場中站穩腳跟。

立刻了解更多
https://bit.ly/m/mightynet

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
進擊的機器人
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓