清新風格頁面設計與實現

來源:互聯網
上載者:User

   怎麼樣設計頁面才有清新感覺?怎麼樣才可以PS出有清新風格的圖片呢,這也引發了我對這一類視覺設計表現的深入思考。以下是我整理的幾方面內容,協助我提取對這一類風格在視覺表現層的關鍵點,只是一點拙見,一點設計感悟而已。

  首先,在我們所能看到的“小清新”裡面,哪裡些元素是最有特色或者說代表性的?

  為此我找了大量的帶有“小清新”tag的圖片,發現女人永遠是這一類風格圖片中出現頻率最高的,無論是背影還是傳說中的45度角,還有帶旅行元素的如老式的皮箱、鐵路、背包等,以及微單相機、陽光、有特色的靜物之類的元素,並且在攝影手法上,大光圈、故意的過度曝光、逆光拍攝,隨意的lomo風格等等。

  其次,除了上面提到的常見元素以外,色彩當然也是很重要的一方面。但是從“小清新”的字面意思理解,她的用色完全就是淡淡的很清爽的那一類色系嗎?我通過她以及其他2個衍生的關鍵詞做了一下情緒版的分析,並且通過Colorhunter這個網站提取了關鍵色彩並做了微調,在其中尋找到色彩上的變化。

  再次,通過剛才的情緒版分析提取用色,發現其實在“小清新”的視覺用色中,色彩的飽和度並不高,並且從整個色立體模型來看,她處於明度軸最高位的下方,是帶有灰色調的,這也許為了更好的展示這樣的視覺風格所專屬的,或懷舊或憂傷的感覺。以下圖兩種色彩模型為例:

  冷色系

  暖色系

  最後,我們在web頁面設計中遇到的“小清新”設計風格,具體的表現在哪些地方呢?

  1.色彩,這個上面已經提到過了這個風格在色立體中的位置,她也是使用者擷取資訊過程中最快能讓使用者感受到的。

  2.頁面架構,根據上述的分析,這樣的設計風格對於頁面架構布局毫不吝嗇的使用留白,或者簡單的線條對模組之間的關係進行分割,在這樣的設計風格方面,個人覺得豆瓣、網易印象派都做的挺不錯的。

  3.關於質感,“小清新”的設計質感是輕量級的,或者說乾脆拋棄了質感的使用,取而代之的是乾淨整潔的大色塊。

  4.圖形元素與質感一樣,也儘可能的使用了簡單的表現方式,比如圖形倒角、icon等無不簡約,但又不失細節。總之,設計風格還是取決於產品本身的定位,風格必須與產品本身是匹配的。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。