產品網頁設計:設計風格(一)
設計是藝術的延伸,藝術發展有自己的時間線,最近很多大熱的設計風格在年齡上其實算是老奶奶了,本文根據時間脈絡梳理了一下這個設計風格。
在做每一個項目或者產品時,都需要根據行業、用戶、場景等確定網頁或者系統的頁面設計,需要了解的有網頁設計風格、主題色與配色、頁面元素等。
設計風格也有潮流趨勢,你了解了每種設計風格的含義與內容后,才能夠結合業務來確定你的產品最終采取的方案。
設計是藝術的延伸,藝術發展有自己的時間線,最近很多大熱的設計風格在年齡上其實算是老奶奶了,根據時間脈絡梳理一下這個設計風格,形成全面的設計認知,和公司的設計同事交流起來能夠得心應手、語言相通,掌握一些設計的專業術語與良好審美,也算是產品的必修課。
一 、波普藝術
誕生時間:20世紀50年代中期
誕生地點:英國
藝術特點:明快突出的色彩、強烈的對比、很強的視覺沖擊、表現方式豐富。
【圖片來源】網絡
二、極簡藝術
誕生時間:1960年
藝術特點:追求極致簡約的呈現效果,并且不接受任何違反這一形態的任何事物,消除作品對觀者的壓迫力,追求形式上的簡單極致、思想上的優雅。
【圖片來源】網絡:設計之家-網頁設計
三、孟菲斯藝術
誕生時間:1981年
誕生地點:意大利米蘭
藝術特點:構圖上打破橫平豎直的線條,采用波形曲線,曲面和直線,平面的組合;在色彩上常常故意打破配色規律,喜歡用一些明快、風趣、彩度高的明亮色調,特別是粉紅、粉綠等鮮艷的色彩;由點,線,面等細小的幾何形體做趣味的裝飾設計。反對當時非常流行的極簡風格和單調冷峻的現代主義。
【圖片來源】網絡
四、超寫實藝術
誕生時間:20世界末
誕生地點:美國
藝術特點:真實、場景化、空間感。
【圖片來源】網絡
五、蒸汽波藝術
誕生時間:2010年
誕生地點:最早興起于日本
藝術特點:常見元素:古典雕塑、(Lo-Fi)低保真效果、Windows95窗口樣式、綠色植物、文字(常見日語文字)。隨意、粗糙、制作蒸汽波作品無需畫技,把喜歡的元素拼貼在一起即可。
【圖片來源】素材來源于網絡,自己PS出來
六、MBE插畫風格
誕生時間:2015年
誕生地點:法國設計師創建
藝術特點:圓潤、呆萌、可愛有趣、簡潔,演變自線框圖Q版卡通畫,多種插畫風格中的一種。
【圖片來源】網絡
七、Low Poly風格(低多邊形風格)
誕生時間:1996年
藝術特點:立體、科技感、三角形,低細節,面又多又小,高度渲染,經常配以柔光效果,把多色元素,用三角形分割,每個小三角形的顏色,取自原多色元素的相應位置。起源于三維游戲中的計算機建模。
【圖片來源】網絡
八、擬物化設計(skeuomorphism)
代表作品:iOS7.0以下,Android、以及iOS7.0以下時代的大部分app、錘子。
藝術特點:
- 界面:模擬真實物體的材質、質感、細節、光亮等;
- 交互:人機交互也擬物化,模擬現實中的交互方式。傳達了豐富的人性化的感情,擬物化本身就是個約束,會限制功能本身的設計。
【圖片來源】網絡
九、扁平化設計
誕生時間:2008年
代表作品:iOS7.0及以上,微軟的Metro UI,Phone8,Windows8。
誕生地點:谷歌提出
藝術特點:核心意義是:去除冗余、厚重和繁雜的裝飾效果。具體表現在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素,這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設計元素上,則強調了抽象、極簡和符號化。簡單純色的簡單組合(iOS系)、單色極簡的抽象矩形色塊(微軟系)、大字體、光滑、現代感十足。
【圖片來源】網絡
十、長陰影設計(Long Shadow Design)
誕生時間:2013年
藝術特點:長陰影其實就是擴展了對象的投影,感覺是一種光線照射下的影子,通常采用角度為 45 度的投影,給對象添加了一份立體感。長陰影快速發展為流行的設計趨勢,并經常被應用到扁平設計方案的對象。
這些陰影特別之處在于它們也是扁平的,網頁設計師使用沒有陰影、漸變的顏色來生成陰影。目前,長陰影設計主要用于較小的對象和元素,如:圖標。
【圖片來源】網絡
十一、3D風格
藝術特點:少量3D效果增加網頁靈動性,在扁平化設計上,添加一些非扁平元素,給網站帶來了原本缺乏的維度感。
【圖片來源】網絡
十二、無邊框風格
誕生時間:誕生時間不確定,2017年流行。
藝術特點:無邊框風格是指那些避免使用各類邊框的網頁設計,這里的邊框是指任何類型的裝飾性容器,通過去掉這些裝飾性容器,加強基本內容的設計感,比如:圖片質量和排版布局,從而提升整體因無裝飾性容器的視覺表現。
【圖片來源】網絡
十三、黑板/現實桌面風格
藝術特點:黑板或者現實桌面作為背景元素,不多見,但是設計的好的話,很出彩。
【圖片來源】網絡
十四、縱向分割
藝術特點:將屏幕一分為二甚至是多欄,在網頁設計中使用新鮮的分屏式設計可以方便呈現不同的信息,創造對比,同時劃分有效區域,方便用戶進行快速選擇和視覺聚焦。
【圖片來源】網絡:設計之家-網頁設計
十五、超級頭版
藝術特點:取代輪播幻燈片,在首頁上使用尺寸超大、迷人的精美Banner,而這個超級頭版匯聚了對產品的精華總結,從而將網站最重要的內容展示給用戶。
【圖片來源】網絡
十六、像素藝術
藝術特點:強調的是一種風格,具有清晰的輪廓、明快的色彩,不受約束的風格。
【圖片來源】網絡
十七、極繁風格
誕生時間:17~18世紀
代表作品:巴洛克、洛可可
藝術特點:重復的元素,填充整個頁面,裁剪和拼貼設計,大膽地運用色彩和圖案來完成百分百吸人眼球的設計。
【圖片來源】網絡
十八、歐普藝術
誕生時間:1955年
誕生地點:法國
藝術特點:被稱為“光效應藝術”和“視幻藝術”,“會動”的幻覺圖片,內容通常是線條、形狀、色彩的周期組合或特殊排列,利用垂直線、水平線、曲線的交錯,以及圓形、弧形、矩形等等形狀的并置,引起觀賞者的視覺錯覺,以強烈的刺激性和新奇感致勝。
【圖片來源】網絡
十九、抽象設計
誕生時間:20世紀初成為一種審美準則。
藝術特點:美感內容借由形體、線條、色彩的形式組合或結構來表現。有時抽象藝術的主題是真實存在的,但由于過分風格化、模糊化、重疊覆蓋或分解至基本的形式,以至于難以辨認原貌。
【圖片來源】網絡
設計本身是一個歷史綿長的豐富的藝術表達世界之一,設計分為平面設計、環藝設計、工業設計、建筑設計、服裝設計、網頁設計等,設計風格與形式取決于設計應用的場景和藝術風格本源,這個世界里的內容極其豐富,抓住一條脈絡可以深挖下去,我們根據脈絡培養審美即可。
我們在進行產品建設中,網頁UI設計有集美貌與才華于一身的UI設計師來做,實現有集美貌與才華于一身的前端工程師來做。
但是作為產品汪,對于整體的頁面風格還需要有一定的認知,能夠根據UI設計師需要的設計需求來收集用戶需求與數據、應用場景、產品本身特質,在網頁設計上也不能一味追求潮流,而是要綜合自己產品的實際情況與行業產品氣質進行選擇。
歡迎拍磚,一起進步。
本文由 @?花枝俏 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
想知道網站建設真的需要產品經理嗎?基本只是做需求了解,然后把需求遞給設計師和開發同事,并沒有在做什么產品設計呀~
建網站就用.top域名
雖然看不懂,但是更加深了對設計大大的敬畏之情,藝術細胞真不是靠后天培養的了啊。