我發現不知道從哪年開始
網頁流行 一次內容占比一個螢幕的大小 然後好多個區塊 慢慢往下滑
整體高度很高這樣
範例網站像是:https://www.blackmagicdesign.com/products/davinciresolve
或是這個:https://tw.cyberlink.com/index_zh_TW.html
最經典的擺法就是最上面一個輪播，下面要有這種：
很好奇這種流行是CSS3出現還是html5或是，什麼原因導致的？
幾乎百分之九十的網站現在都長這樣ＸＤ
我自己是覺得很舒服啦！
有沒有前輩是經歷過可能１０年前 ５年前的網頁設計
對這種變遷有經驗可以分享的？
很喜歡去了解網頁的風格歷史～～～
歡迎各位來分享討論
已邀請的邦友 {{ invite_list.length }}/5
你舉的這種特效稱做: 瀑布流布局 (Waterfall layout)
最開始是 2011 年 Pinterest 網站首先採用, 結果一炮而紅:
CSS：column 瀑布流版型
Flexbox 與 Grid 的運用，實現瀑布流排版
[CSS] 瀑布流難題
【前端新手日記】瀑布流切版練習 — JavaScript
它最初是被 AJAX 原理 (2000~2005年開始流行) 所啟發, 加上 CSS 和 DOM Rendering 技術的創新之後, 想出來的一種新技法...
經過十年大量仿效之後, 可想而知, 此特效已經被稱為: 過時的設計
網頁製作前請注意！你的網站還想留著三大過時設計嗎？
瀑布流雖然有著良好的使用者體驗(UX), 但對於網站營運比較大的問題, 是網頁瀏覽量的統計會失真, 導致干擾精準行銷; 當然, 這個問題可以透過更多的前端技術來解決, 但是不斷疊加定位技術到前端的結果, 就是網頁可能越來越慢 (遙望 FB 案例...)
數位媒體用「瀑布流」追求流量成長時，是在吃毒藥還是解藥？
2017 年甚至有專業的論文在研究瀑布式 vs. 網格式設計之間的優缺點:
Waterfall Flow vs. Fixed Grid Webpage Layout Design
到了 2021 年, 電商也還在爭論到底要不要用瀑布流:
瀑布流還是分頁？全面分析教你如何選擇
網站設計風格, 就跟服裝時尚風格一樣, 每年都有新的變化(不一定都是最新的技術喔, 有些是舊技術被拿來做新應用), 全球各大設計工作室也會在新年度, 紛紛丟出各種新創的設計概念, 試圖引導客戶採用自己擅長的設計風格, 這類的文章都可以參考看看:
https://www.google.com/search?q=web+design+trenderp
這是有人預測 2023 年會流行的 30 種網頁呈現技術:
30 Website Design Trends and Standards for 2023 and Predictions for the Next Year
太專業了這就是我想要的歷史、分析、解讀。
謝謝說明！
我原本以為瀑布流是專指說往下滑要載入的那種耶？
因為我舉例的網站雖然height是非常大，但並沒有往下滑載入的效果，
所以我原本不知道這也算是瀑布流！？
我本來以為那個案例是用 SPA, 但實際試過之後, 發現它似乎沒有 SPA 的能力, 按連結還是跳到新頁去, 不是在原頁內動態 Rendering, 所以仍然將其歸類到瀑布流
但是如果它並非無限往下延伸的話, 一般網格布局(Grid Layout)也可以辦得到. 如上面程式案例中的那個:《Flexbox 與 Grid 的運用，實現瀑布流排版》, 就是下面沒有無限延伸
你說這種三欄式卡片盛行設計是因為格線系統的產生跟css框架運用的盛行有關。
如果是使用了bootstrap框架，很常看到三欄式排法，且可以做到響應式。
cdn引入後，不修改樣式，卡片元件做完應該不用10分鐘...且直接就能RWD
再載入一些css動畫特效，就能做得有模有樣。
在15年前的網頁設計，是沒有RWD需求的。
css動畫載入的特效，也是因為後來css3有animation這個屬性可以使用。
10年前沒有這個屬性，所以現在網頁可以做到很多酷炫的觸發動畫，
用css而不是js，大大降低了網頁載入的效能。
蓋括講現在所謂的主流會指Material Design和扁平化設計(Flat Design)
以下是個人觀點
若有錯誤也可以指點
我認為是RWD網站開始成為一種基本要求所導致
當各家公司網站紛紛希望自己的網站有著響應式的效果
又不希望需要依照設計需求，從新定義RWD框架的時候
就會很自然的導入bootstrap 網格系統來進行前端開發
依照12格網格的情況
就會很自然出現
col-12 掛輪播
col-4 掛卡片的布局
(因為若是買html template 也有滿大一部分是這樣的格式)
也如同你所認知，你是喜歡這樣的排版的
因此在於市場偏向加上開發較為簡單的情況下
逐漸地你就會很常看到
各家公司最後做出來的成品全都長這個佈局
畢竟網格能夠最簡單匹配所有裝置。
iThome鐵人賽
看影片追技術