導航:首頁 > 萬維百科 > 網頁設計瀑布流

網頁設計瀑布流

發布時間:2020-12-02 01:25:02

1、怎樣看待現在網頁設計中比較流行的瀑布流形式?

適合於產品展示,不適合到處都用,是個很好的插件。

瀑布流網頁布局設計,現在有泛濫成災之勢,不過存在即合理,瀑布流為什麼這么走俏,是因為它能滿足用戶的體驗與需要。而對於瀑布流式布局,想必網頁設計師們已不再陌生,隨著pinterest自2011年開始走紅,瀑布流式的布局被越來越多的網站所使用。國內的花瓣網、堆糖網、布兜、發現啦,美麗說,蘑菇街,人人逛街,凡客達人等,復制Pinterest的網站在中國蜂擁而現,粗略估計已有上百家之多。

為什麼選擇瀑布流?對圖片的展現高效有吸引力

既然pinterest式蜂擁而現,我們先從體驗角度看,瀑布流布局為什麼好?
筆者淺見。隨著讀圖時代快餐式消費的來臨,瀑布流對於圖片的展現,是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間內獲得更多的信息量,而瀑布流里懶載入模式又避免里用戶滑鼠點擊的翻頁操作,這么瀏 覽起來,隨著滑鼠的滾動,是不是最小的操作成本能獲得做多的內容體驗,是不是比較容易沉浸其中,不被打斷。有沒有逛起街來邊走邊看,被琳琅滿目的商品吸引 的感覺呢?

除此之外,瀑布流的主要特性便是錯落有致,定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片布局模式,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞。

Pinterest
Pinterest於2011年誕生,如今每月獨立訪問用戶數量已突破1100萬,平均每位用戶每月在網站上逗留98分鍾,這一時長在諸多社交平台中僅次於Tumblr和Facebook。Pinterest作為瀑布流布局的鼻祖,必然引導瀑布流設計的方向。

吸頂式導航

為什麼使用吸頂式導航呢?用戶在瀑布流模式下一目十行去瀏覽,如果快速切換到分類,又要回到頂部,然後再選取分類,吸頂式導航可以讓用戶輕松切換分類,設計要點,吸頂式導航不可以太寬,色彩上不可以太搶眼,只需要保證用戶在需要時,它悄悄的在就可以。

2.評論的錨點定位

pinterest起初設計是評論框全部默認展示的, 意在鼓勵用戶輸入評論。而在最近的改版中,pinterest的評論框的設計改為:當圖片和已有評論長度較小時,評論框默認收起,點擊評論的操作 button後,錨點定位到評論框,同時游標閃動,提示用戶輸入文字。而圖片和已有評論較長時(接近或大於一屏的高度),默認評論框打開,因為用戶如果靠 評論的button打開評論框需要回滾較多距離,成本太高。

3.輕巧的點擊查看大圖設計

點擊空白區域收起,再次點擊大圖跳轉到圖片來源網站。非常適合輕松隨意的閱讀尤其是當用戶適應此處的設計邏輯後,很容易產生沉浸式瀏覽,同時又滿足了查看細節的需要。

4.佔位載入,保持視覺體驗的順暢

用戶在不斷滾動滑鼠滾輪瀏覽的過程中,網速並不總是盡如人意的,因此採用佔位載入形式(預載入出圖片高度的灰度圖),不讓載入過程中畫面過於跳動,

可以讓用戶視覺體驗平緩些,視覺過度流暢,盡量小的干擾用戶瀏覽的行為。

2、網站設計:「瀑布流」比較好,還是「下一頁」比

這個不能說是哪個比較好,只能說是哪個更加適合你要設計的網站。像花瓣用的就是「瀑布流」,而站酷用的就是「下一頁」的方式,這兩種方式給人的體驗也是不同的,所以你還要從客戶的角度出發,看使用哪種比較合適。

3、什麼是瀑布流網頁設計布局

瀑布流就是每個信息框的寬度是一樣的,但是長度是根據信息的內容大小來定的

4、怎樣提高網頁設計創意能力

一、瀏覽網站,拓寬視野
·網站
1.pinterest
https://www.pinterest.com/
Pinterest通過用戶挖掘有趣內容,收藏並分享的模式,將全球優秀設計素材分享給大家,Pinterest採用的是瀑布流的形式展現圖片內圖片內容,無需用戶翻頁,新的圖片不斷自動載入在頁面底端,讓用戶不斷發現新的內容。
2.Behance
https://www.behance.net/
Behance是全球領先的創意設計類聚合平台,推薦和分享優秀設計作品。在這里,可以第一時間欣賞到最優秀的作品,找到最優秀的藝術家。找尋更多的創作靈感。
3.Yanko Design
http://www.yankodesign.com/
Yanko Design幾乎包含了全部最新的產品設計、新技術、設計思維,是非常值得推薦收藏的產品設計網站,喜歡的小夥伴快快收下。
4.Core 77
http://www.core77.com/
Core 77是老牌設計網站,站內瀑布式排列,像看雜志一樣的內容排版,包含科技感設計,適合設計類及理工類專業。
5.Designboom
https://www.designboom.com/
Designboom平台自從1999年起便成為藝術設計領域的大本營,獨立報道一系列產品設計、建築、藝術、攝影以及平面設計方面的先鋒作品。
6.Css winner
http://www.csswinner.com/
Css winner是一個獨特的全球性平台,專門展示和獎勵最佳網站,推廣創新設計師網站、開發者和機構。頂部有導航欄,可以根據自己感興趣的分類查看。
二、多讀書,鞏固基礎
·書籍
1.《設計中的設計》 原研哉
與藝術相比,「設計基本上沒有自我表現的動機,其落腳點更側重於社會。」以原研哉為代表的一些日本設計師,設計的出發點並非是自我風格的表現或是個人情緒的張揚,而是從揣摩大眾的感受出發——無論是視覺還是觸覺。先將日常的事物陌生化,再重新進行設計——這種貼近生活、以生活的文化積累為素材的創新在這個紛亂的信息時代顯然是十分可貴的,也必將有利於大眾的審美意識提高。
2.《現代設計史》

這部涉獵廣泛、富有洞察力的著作,縱覽了18世紀至今的實用藝術和工業設計,不僅從縱向闡述了各個設計流派、各種設計風格的演變過程及其代表作品,而且從橫向探討了設計和生產、消費、科技、商業之間盤根錯節又變動不居的關系。這是一本幾乎每個設計師都要擁有的一本書,地位很高,專業性極強,涉及和設計相關的各行各業,材料,科技,政策,物質資源,權力,需求…
3.《The Graphic Design Idea Book: Inspiration from 50 Masters》
這本書是針對優秀設計關鍵要素的介紹,介紹了廣受好評的設計師的主要作品,涵蓋的主題包括敘述、顏色、圖形和裝飾等。
4.《大設計》Penny Sparke
在《大設計:BBC寫給大眾的設計史》一書中,設計史學者彭妮•斯帕克給我們展示的,遠遠超過了一段經典設計作品的歷史。本書的五個章節,引導讀者穿越時空,依照時間順序游歷現代設計:從十九世紀的工業化生產;到現代設計運動,包括包豪斯及其他相關設計活動;經歷簡朴生活和戰爭時期;再到戰後繁榮及對新材料、新技術的探索;最後在二十一世紀以設計參與到各種最新的活動與事件中結尾。
5.《寫給大家看的設計書》
這本書出自世界級設計師之手-Robin Williams,世界著名的設計師、技術專家和暢銷書作家。大家經常用到的「親密性、對齊、重復、對比」4 個設計基本原則,就是出自《給大家看的設計書》。這本書將復雜的設計原理凝練為了簡單易懂的、可操作性強的設計技巧,並以簡潔明快的風格,展示了大量的示例,讓你了解怎樣才能按照自己的方式設計出美觀且內容豐富的產品。

三、參觀展覽,提高審美,尋找靈感
不要僅僅局限於以上方式,你需要走出去,多看是需要靈感的工作者需要做的事情,看的越多,腦子裡面東西就越多,那也就越有靈感。對於設計師來說,看設計方面的展是必須的,但也不能只看設計方面的展子,藝術創作,塗鴉,攝影展……都要去看,為什麼呢?因為美感,設計感,創意感是共通的,不論是在藝術還是設計領域,從不同方面看並吸取經驗和知識會讓你的設計更加富有創意,與眾不同。可以隨身攜帶小本子,這樣當靈感來的時候可以迅速畫下來,日積月累就會成為你自己的素材庫了。
四、研究優秀作品,解讀設計思路
當你的知識儲備量夠了以後,可以嘗試對優秀設計進行解讀,理解它的設計思路、思維邏輯。選擇幾個你最喜歡的設計師,仔細研究他們的作品。喜歡哪種設計師的設計風格、設計理念,可以從模仿他的作品開始,要注意的是模仿並不是一件壞事,不是指抄襲,它是探索你自己風格的一個過程。那些設計大師之所以能夠成為的大師,就是因為他們的作品足夠獨特,有創意,有自己的風格。我有個「鬼才設計師」專欄,專門介紹全球著名的設計師,感興趣的話可以去看一看。

五、善於觀察、發現問題
設計師還要善於觀察生活,發現生活中的問題,因為設計本身就是從實際問題出發,發現問題,解決問題的一個過程。很多設計都是為了優化人們的生活而存在的,所以設計師們尤其需要擅長發現問題。在產品本身具有設計感創意感的同時也不能忘記它是為解決問題而存在的。
就比如公交車的扶手設計,由於都是統一高度,這就對比較矮的人很不友好。
但按照上圖顯示的設計,利用三角形作為把手,就可以照顧到不同身高的人。這個問題就是來自於我們生活中經常看到的。
分享一個慢鏡頭動作分析的方法,比如坐在沙發上看書,天暗了需要開燈,一般正常人的思維就是站起來,去開燈。那作為一個設計師,就需要仔細將這一串的動作進行分解,如果是需要開頂燈,就得站起來,走過去,按開關。如果沙發旁正好有個落地燈,豈不是會方便很多,那打開燈的方式是觸摸開關、拉繩開關還是聲音開關,調節方式是需要手勢控制、遙控控制還是聲音控制。這樣就會發現很多需要優化的地方使其更加便利。所以想要發現設計點就需要把整個動作慢下來去分析。
最後還可以針對特殊人群去發現問題,像老人、小孩、上班族、家庭主婦等等。他們會面臨什麼樣的問題,這樣就會很快找准設計痛點。市場上目前有沒有解決這些問題的產品,有的話,就再思考還有哪些需要優化、完善的地方。這就需要你用挑剔的眼光來看待周圍的人和事物。
六、注重交流
在追求設計感與創意感的同時,也要考慮到所設計的作品的實用性,因為設計本身就是一個關於人,解決人的問題的行業,只有溝通交流才能了解彼此所需。這里不單單是指和用戶的交流,有的設計需要團隊協作完成,這時候,和同學、同事、合作夥伴的交流同樣非常重要。而且經常與優秀的人溝通交流比起自己一個人悶頭干效率會高跟多。
七、參加比賽,將理論應用於實踐
此外還需要實踐,執行力是身為設計師的很重要的一點,執行力的強弱是影響一個設計師的效率的重要因素之一,比起猶猶豫豫的去想怎麼做該不該做,先讓自己的手動起來,在行動中找到靈感,可以去參加一些設計類的比賽,比如IF、紅點、idea獎以及日本G-Mark設計獎等等,方便參觀到全球更多的優秀設計,理論加實踐的結合,才能做出有設計感、創意的優秀設計。
剛開始從事各種創意工作的新手設計師,可能最初做的東西並沒有那麼好,是因為相比一些老設計師,你沒有足夠的經驗和知識儲備,只有熬過積累的這個階段,最終,你的想法、創意,就會更加出彩。現在所能做的最重要的事,就是不斷學習、不斷創作。

5、瀑布流的網頁設計適合什麼樣的網站

適合於產品展示,不適合到處都用,是個很好的插件。

瀑布流網頁布局設計,現在有泛濫成災之勢,不過存在即合理,瀑布流為什麼這么走俏,是因為它能滿足用戶的體驗與需要。而對於瀑布流式布局,想必網頁設計師們已不再陌生,隨著pinterest自2011年開始走紅,瀑布流式的布局被越來越多的網站所使用。國內的花瓣網、堆糖網、布兜、發現啦,美麗說,蘑菇街,人人逛街,凡客達人等,復制Pinterest的網站在中國蜂擁而現,粗略估計已有上百家之多。

為什麼選擇瀑布流?對圖片的展現高效有吸引力

既然pinterest式蜂擁而現,我們先從體驗角度看,瀑布流布局為什麼好?
筆者淺見。隨著讀圖時代快餐式消費的來臨,瀑布流對於圖片的展現,是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間內獲得更多的信息量,而瀑布流里懶載入模式又避免里用戶滑鼠點擊的翻頁操作,這么瀏 覽起來,隨著滑鼠的滾動,是不是最小的操作成本能獲得做多的內容體驗,是不是比較容易沉浸其中,不被打斷。有沒有逛起街來邊走邊看,被琳琅滿目的商品吸引 的感覺呢?

除此之外,瀑布流的主要特性便是錯落有致,定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片布局模式,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞。

Pinterest
Pinterest於2011年誕生,如今每月獨立訪問用戶數量已突破1100萬,平均每位用戶每月在網站上逗留98分鍾,這一時長在諸多社交平台中僅次於Tumblr和Facebook。Pinterest作為瀑布流布局的鼻祖,必然引導瀑布流設計的方向。

吸頂式導航

為什麼使用吸頂式導航呢?用戶在瀑布流模式下一目十行去瀏覽,如果快速切換到分類,又要回到頂部,然後再選取分類,吸頂式導航可以讓用戶輕松切換分類,設計要點,吸頂式導航不可以太寬,色彩上不可以太搶眼,只需要保證用戶在需要時,它悄悄的在就可以。

2.評論的錨點定位

pinterest起初設計是評論框全部默認展示的, 意在鼓勵用戶輸入評論。而在最近的改版中,pinterest的評論框的設計改為:當圖片和已有評論長度較小時,評論框默認收起,點擊評論的操作 button後,錨點定位到評論框,同時游標閃動,提示用戶輸入文字。而圖片和已有評論較長時(接近或大於一屏的高度),默認評論框打開,因為用戶如果靠 評論的button打開評論框需要回滾較多距離,成本太高。

3.輕巧的點擊查看大圖設計

點擊空白區域收起,再次點擊大圖跳轉到圖片來源網站。非常適合輕松隨意的閱讀尤其是當用戶適應此處的設計邏輯後,很容易產生沉浸式瀏覽,同時又滿足了查看細節的需要。

4.佔位載入,保持視覺體驗的順暢

用戶在不斷滾動滑鼠滾輪瀏覽的過程中,網速並不總是盡如人意的,因此採用佔位載入形式(預載入出圖片高度的灰度圖),不讓載入過程中畫面過於跳動,

可以讓用戶視覺體驗平緩些,視覺過度流暢,盡量小的干擾用戶瀏覽的行為。

與網頁設計瀑布流相關的知識