產品網頁設計:設計風格(一)

3 評論 28961 瀏覽 124 收藏 13 分鐘

設計是藝術的延伸,藝術發展有自己的時間線,最近很多大熱的設計風格在年齡上其實算是老奶奶了,本文根據時間脈絡梳理了一下這個設計風格。

在做每一個項目或者產品時,都需要根據行業、用戶、場景等確定網頁或者系統的頁面設計,需要了解的有網頁設計風格、主題色與配色、頁面元素等。

設計風格也有潮流趨勢,你了解了每種設計風格的含義與內容后,才能夠結合業務來確定你的產品最終采取的方案。

設計是藝術的延伸,藝術發展有自己的時間線,最近很多大熱的設計風格在年齡上其實算是老奶奶了,根據時間脈絡梳理一下這個設計風格,形成全面的設計認知,和公司的設計同事交流起來能夠得心應手、語言相通,掌握一些設計的專業術語與良好審美,也算是產品的必修課。

一 、波普藝術

誕生時間: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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 想知道網站建設真的需要產品經理嗎?基本只是做需求了解,然后把需求遞給設計師和開發同事,并沒有在做什么產品設計呀~

    來自廣東 回復
  2. 建網站就用.top域名

    來自江蘇 回復
  3. 雖然看不懂,但是更加深了對設計大大的敬畏之情,藝術細胞真不是靠后天培養的了啊。

    來自廣東 回復