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

2020-12-09 人人都是產品經理

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

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

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

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

一 、波普藝術

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

相關焦點

  • 傳統網頁設計都有什麼風格類型?
    網頁，我們都很熟悉，用戶可以通過網頁了解企業的文化和產品以及公司理念等，所以網頁是公司不可缺少的窗口，對於網站網頁的製作來說，網頁設計的風格就顯得格外重要。那傳統網頁設計都有什麼風格類型?成都seo給大家講一講!
  • 詳細介紹:你都知道哪些網頁設計風格?
    網頁設計是根據企業希望向瀏覽者傳遞信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行頁面設計美化工作，所以說網頁是企業對外地窗口，而對於這樣地宣傳載體，網頁設計風格是非常重要地。下面詳細介紹下網頁設計風格。
  • 如何創建網頁設計風格指南?
    如果您的網站需要經常更新，或者很多人都需要維護或更新，那麼最好使用網頁設計風格指南。這有助於確保與您的網站打交道的每個人都在同一標準下，並了解如何使所有內容保持一致。但是，到底什麼是網頁設計風格指南？這意味著什麼？以及如何為自己創建一個？這些是我們旨在在此處回答的問題。什麼是網頁設計風格指南？
  • 網頁設計製作5大原則
    網站，是一個企業或工作室的重要展示窗口，因此網站的設計是非常重要的。好的設計能給訪客眼前一亮的感覺，讓客戶對你留下深刻印象，提高轉化。那麼網頁設計製作該如何做好呢？有些站點只提供簡潔文本信息，以簡約、清晰的內容打動客戶；有的提供華麗圖像、視頻、複雜頁面布置，以吸睛的設計吸引客戶。如果不知道怎麼做，你可以找免費製作網頁的網站，比如「上線了」網頁設計平臺，多種風格模板，你可以根據自身行業選擇適合自己的模板主題。
  • 國外24個漂亮的手繪風格網頁設計
    站長之家（CHINAZ.com）10月24日編譯：手繪設計並不是真正全新的一種潮流，但仍然站在網頁設計的前沿。相對於其它趨勢風格的網站，手繪設計的網站不多，很多設計師儘管欣賞這種風格，但又怯於創作此類作品，僅僅由於「我不會真正的手繪」的態度。
  • 臺灣網站設計案例賞析:怎麼設計美觀網頁
    雖然網站設計的風格千差萬別，但同一文化地區的網站設計有趨同趨勢。但趨同不是完全相同，一些臺灣地區企業網站，其設計風格和大陸略有不同，但也有很多值得參考的地方。下面就從幾個臺灣網站設計案例來給大家分析一下，怎麼做好臺灣網站建設。
  • 最新的網頁設計風格,流行的是 1990 年代的復古風
    整個網頁都是樸素的黑色數據框，還採用了平淡質樸的 Arial 字體。Balenciaga’s的主頁是一個 DIY 風格的網頁，裡面既有 iMac 風格的桌面，也有 QuickTime 風格的彈窗和成排的藍色文件夾。Solange網頁設計已經是一門有二十多年歷史的行當。如今一部人開始走起復古懷舊路線，想讓用戶感受網際網路早期時代的「流行時尚元素」。
  • 好的字體讓你的網頁設計「傾國傾城」
    當我們瀏覽網頁時，圖像往往能在視覺上首先吸引人的注意力，一個好的圖片設計可以大大美化頁面。和文字相比，網站上圖片傳達的視覺印象要強烈得多。設計師們也一直注重對圖像的創意設計、網頁版式設計以及色彩搭配，它們是視覺傳達的重要手段。
  • 網頁設計有難題?12款網頁設計模板給你靈感!
    作為網頁設計師，你的作品就是你專業水平的最好體現方式。所以，無論是參加面試還是個人作品展示，你的網頁模型是否能讓人眼前一亮，是否能在互動設計或視覺設計方面突出任何一點的優勢，是你取得面試機會和贏得客戶的關鍵。在網頁設計的初始階段，原型/線框/模型設計必然是一個關鍵步驟。如何通過網頁模型呈現設計思路，如何設計出優秀的網頁模型，如何取得設計靈感？
  • 關於網頁設計中的留白
    先是看了笨活兒的這篇文章：高品質的網頁設計： 實例與技巧我突然意識到，我之所以崇尚的一些網頁設計風格是什麼原因了，原來其關鍵是恰到好處的留白。再看一下我一直認為產品做的很細緻的alibaba，淘寶網的首頁，繼承了國內網站運營頁面的一貫傳統，全部布局豐滿，不給用戶的視覺一點喘息的機會，滑鼠隨便點一下，可能都會產生一個PV。再說門戶網站及一些資訊頻道的運營頁面也如此。除了合理的間距外，幾乎沒有留白。
  • 網頁製作中對版面設計的見解
    簡介：在製作網站中，特別是在網頁的版面設計時，應呈現出獨特設計風格。網頁的版面設計要有統一的風格，形成整體，從更深層次、更為廣闊的視野中來定位自己的版面樣式，從而達到別人所沒有做到的效果。
  • 給新手的網頁設計指南
    首先在介紹網頁每個頁面之前，我們要明白一個概念，就是網頁設計中經常出現的「模塊」。不知道是不是因為「模塊」這個概念比較基礎，寫的人也很少，在我剛剛接觸網頁的時候，並不是很容易查到關於模塊的介紹，做圖的時候也遇到了一些困難。與平面不同，在UI和網頁設計中，模塊是經常出現，並且貫穿設計稿始終的。每個網頁都是由模塊組成的，並且常用模塊都會有固定的稱呼。
  • 譯文丨2018網頁設計總結
    本文是從八個方面來對2018的網頁設計的總結，一起來看看~本文翻譯自澳大利亞設計師Rylan Ziesing及其設計團隊Rhino Design對2018年網頁設計的總結。一、豐富的色彩與漸變色的運用漸變色和豐富的色彩，以其自身的美學魅力和強烈的視覺效果，而為設計師所青睞並大量使用。隨著此類設計風格需求的日益增長，廣闊的色域和漸變色將在2018繼續流行下去。
  • 網頁設計 : Atomic Design簡介及工作實例
    過程參考Atomic Design原子設計方法論，考量Web Responsive Design響應式網頁設計。講解關於遇到一個網頁，我如何著手、設計流程及成果。再來，先前提到客戶需求，他們希望活動網頁與品牌風格一致。了解目的後，再進行設計，才能將商業與設計更順暢的結合，客戶更容易被說服、買單。由於產品是要賺錢的，因此此案例著重於商業與設計的結合，假如是較偏向創意發想的計畫，此設計過程請斟酌參考。
  • 靈感專題—2019年優秀網頁設計作品賞析 5月
    Tubik提供的這個網頁設計的主題是提供新時代可持續能源生產、消費，甚至分配社區需求的服務。網頁中插畫風格、卡片設計和畫面切換動效的創意結合產生了非常奇妙的效果。2.Rem.comREM的設計特色在於它優秀的層次結構和元素構建。10. Discover PageFireart Stutio是一個專門為初創公司和世界領先品牌設計和開發數字產品的網站，他們提供的服務包括產品設計，品牌設計和動效設計。
  • 粗體網頁設計的核心概念
    近年來，我們已經看到了數十種網頁設計趨勢，從粉彩到漸變再到大字體。樣式有一種迴旋和重新流行的方式。但是永遠不會過時的一件事就是大膽而強大的設計元素，能夠吸引用戶的注意力並做出強有力的聲明。根據美國小企業管理局（SBA）的數據，有3170萬家小企業，儘管數量經常變化。
  • 2019 APP&網頁交互視覺設計趨勢
    隨著技術的進步，電子設備更加智能，給予了設計更大的空間和可能性。2019新的一年APP和網頁會有怎樣的設計趨勢，我小小的總結&展望了一下，寫下這篇文字。
  • 一組有範又高級的深色網頁設計案例解析
    如何設計深色系網頁？1、運用白色的文字和深色背景形成反差效果雖然深色背景容易給人壓抑的感覺，但是把深色背景運用到白色文字上面則是另外一種視覺效果差的呈現，白色的文字顏色和深色的背景可以形成鮮明的對比，這樣就能突出文本內容，根據人們視覺聚焦法則人們很容易把視覺停留在文字上，引起人們對文字的關注，這也是諸多企業和高端產品網站偏愛的設計風格。
  • 網頁設計有哪些技巧,魚爪設計來助你
    當我們打開一個網頁的時候，相信很多人對於這個網頁的美觀度都會有一個基本的評價，有的網頁設計的十分大氣，有的網頁設計的雜亂無章，同樣都是網頁，但是帶給用戶的視覺體驗卻是大不相同的，一個新奇且具有創意的網頁可以讓整個網站都散發出一種活力，能吸引用戶在網站上花費更多時間去駐足瀏覽，那麼如何才能做好網頁設計呢
  • 《網頁設計綜合指南》(三):網頁設計看這篇文章就夠了
    設計師和開發人員在構建網站時，需要考慮很多事情，從視覺外觀到功能設計。為了簡化這個過程，我們準備了這個指南。限於篇幅限制，將這一指南分為三部分，此為第三部分內容。這對網頁設計師意味著什麼？意味著我們必須為網站進行移動端適配設計。3.1 響應式設計PC端和移動端有著不同的屏幕解析度，進行適配優化尤為重要。採用單列布局。手機屏幕上單列布局基本效果都不錯。單列不僅可以管理小屏幕上的有限空間，還可以輕鬆地在不同屏幕解析度之間以及縱橫比之間進行縮放。