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

往下滑看下一篇文章
從切菜到乾燥加工!宜展如何結合桃園市政府創業資源,以AI開拓農產加工第二成長曲線?
從切菜到乾燥加工!宜展如何結合桃園市政府創業資源,以AI開拓農產加工第二成長曲線?

走進蔬果加工廠,同樣是100公斤高麗菜,最後能做出多少成品?答案不見得相同。氣候、產地與品質影響原料條件,客戶要求的切法、重量與交期也各不相同。對曾任科技業研發主管十多年的宜展科技農業執行長林佑澤而言,這是與科技製造截然不同的世界。

「農業部分全部都不一致。」林佑澤以青江菜為例,即使機械手臂已經訓練好辨識特徵,面對形狀各異的蔬菜,仍難以判斷該從哪裡抓取。農產品的天然變數,卻得面對學校團膳、連鎖餐飲、航空空廚等企業客戶對品質與交期的要求。如何讓加工流程穩定運作,成為宜展投入數位轉型的起點。

從紙本、LINE到數據,先把現場經驗留下來

目前宜展一年處理數千噸蔬果、服務超過120家企業客戶,業務涵蓋採購、截切、清洗、包裝與配送。林佑澤觀察,農產加工的關鍵經驗往往掌握在資深員工手中:該買多少菜、原料損耗多少、訂單增加又該安排多少人力,都仰賴現場判斷。

「主要就是把人的經驗變成數據。」林佑澤說。過去客戶透過LINE或紙本下單,現場靠人工整理訂單、對照不同客戶的加工規格;如今宜展利用AI辨識訂單內容並匯入ERP,再依客戶、品項與規格進行標籤化派工。製程則透過QR Code記錄原料投入量與成品產出量,逐步掌握各環節的加工損耗。

接下來是整理現場的判斷依據。林佑澤透過與資深員工對談,了解採購、派工與品管的作業方式,再利用AI協助找出規則、建立SOP。AI整理出的流程仍須由現場人員逐項確認、修正,才能實際執行。

品質管理也在持續改善。傳統金屬檢測器難以辨識菜蟲、橡皮筋等非金屬異物,宜展正與技術夥伴規劃導入AI影像辨識,輔助產線末端檢查。林佑澤表示,每批農產品品質不同,比起單看良率,他更重視客訴是否減少。隨著訂單與製程資訊逐步累積,宜展也希望進一步建立需求預測、採購建議與生產排程模型,減少營運對資深員工個人經驗的依賴。

不只把菜切好,乾燥加工尋找第二成長曲線

除了改善截切本業,宜展也開始發展乾燥加工。學校團膳在寒暑假面臨需求波動,生鮮蔬果則有保存期限短、價格易受產季影響等限制。林佑澤希望藉由乾燥技術延長農產品保存期限,開拓附加價值更高的加工業務。

不過,乾燥同樣有依賴經驗的問題。傳統做法是太乾就降低溫度、縮短時間,不夠乾就反向調整。每批原料的水分與成熟度不同,反覆試做不僅增加成本,也難以維持品質一致。「品質目標沒有設定的話,前面的製程參數就不知道怎麼調整。」林佑澤將過去研發車用面板的思維帶進農產加工:先決定產品希望達到的口感、含水率與水活性,再回頭檢視原料成熟度、截切厚度及乾燥參數等條件。

團隊進一步結合不同乾燥技術、自行改造設備,並接洽桃園的設備業者合作。林佑澤曾比較其他地區的設備,最後選擇設備構造、乾燥均勻度與可靠度較符合需求的桃園業者。宜展也持續累積製程參數,希望未來透過AI找出適合不同原料的乾燥曲線,減少反覆試做。

「我們主要還是要做代工,想要做一個功能性的原料平台。」林佑澤說,果乾目前更像是展示技術能力的產品,未來希望將服務延伸至辛香料、中藥材、太空食品、超級蔬菜及寵物食品等領域。現階段宜展主要營收仍來自蔬果截切本業,乾燥事業尚未形成主要收入。未來若能建立穩定的乾燥製程與代工能力,宜展便有機會從既有蔬果供應鏈,切入附加價值更高的食品原料市場。

從彰化走向桃園,驗證營運方法能否跨區複製

隨著加工流程逐步數位化,宜展也開始思考,這套管理方法能否帶到彰化以外的場域。

參與桃園市政府青年事務局天際線加速器及Meet桃園+後,宜展擴大與桃園產業生態系的連結。林佑澤提到,天際線協助邀集不同局處了解團隊需求,並提供資源媒合機會。宜展也開始與桃園市農會及在地農民合作,增加北部原料來源。這項合作不只拓展了供應來源,更成為宜展因應極端天候、穩定供貨的重要助力。林佑澤回憶,先前中南部連日降雨,蔬菜供應受到影響,宜展便從北部調度蔬菜,以不同產區互相支援,降低天候對供貨的衝擊。此外,團隊也透過天際線資源,獲得參與日本國際伴手禮設計競賽的輔導,並成功榮獲金賞獎肯定,除了展現產品的創新與設計實力,也為宜展拓展海外市場、提升國際能見度創造更多機會。

下一步,宜展規劃以桃園大溪作為第二個驗證場域,將彰化累積的資料、SOP與加工管理經驗,轉化為可複製、可優化的營運管理模式,帶到不同產地、供應鏈及人員條件下驗證。林佑澤指出,未來若要跨區域擴張,不可能每到一個新地方,就把原有團隊整批搬過去。因此,宜展希望將資深員工的實務經驗,轉化為標準化流程與數據模型,結合AI進行生產排程、資源配置及營運決策,讓新場域能依據當地條件快速調整,降低對特定人員經驗的依賴。

從彰化到桃園,宜展接下來要驗證的,是這套從傳統農產加工現場整理出來的管理方法,是能夠跨區域複製、快速部署並持續優化的農產加工營運系統。 長期目標是降低新場域的建置成本與管理複雜度,提升擴張效率,讓傳統農產加工業具備規模化發展的能力。

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

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