設計

寫在前面

寫這篇文章的意義在於,很多人表示不知道如何動手開始做一個Banner,拿到需求腦袋裡是懵的,那麼歸根結底還是看的太少做的太少了,所以今天我就給大家總結梳理一下我們目前市面上的Banner有哪些品種(表現形式和手法)好了,因為在我看來,電商設計師是應該要保持一個比較寬的可超控閾值的,就比如說你要能既做的了小清新也做的了重口味,玩得起高冷大牌也受的了特價清倉大拍賣。

今天我們收集了50+款來自Dribble及其他網站上免費的作品,包括各種按鈕、功能表、範本以及註冊登錄介面等最新的PSD,且大多數都非常適用於iOS7,希望需要扁平化風格的童鞋能找到對自己有用的資源 : )

iOS7 UI Components by Tech and ALL

TechAndAll iOS 7 UI Components preview large 1024x921

 

Login / Sign in With Social Media by Barin Cristian

Login Sign in With Social Media by Barin Cristian

 

Flat Designer’s Essentials by Fixx Design (via Darren Lee)

Flat Designers Essentials by Fixx Design via Darren Lee

 

FREE – 7 PSDs from iOS7 by XEE Tech

FREE 7 PSDs from iOS7 by XEE Tech

 

CSS Dropdown Menu by Tech and ALL

CSS Dropdown Menu by Tech and ALL

 

Branding Identity Mock up by Tech and ALL

Branding Identity Mock up by Tech and ALL

 

Profile vCard PSD by Surjith SM

Profile vCard PSD by Surjith SM

 

CSS Powered Buttons with Hover Tooltips by Tech and ALL

CSS Powered Buttons with Hover Tooltips by Tech and ALL

 

Illustration Wacom Intuos5 Touch by Barin Cristian

Illustration Wacom Intuos5 Touch by Barin Cristian

 

Free Wine Bottles Mockup by Dominik van Treel

Free Wine Bottles Mockup by Dominik van Treel

 

20 Flat Chunky Buttons by Barin Cristian

20 Flat Chunky Buttons by Barin Cristian

 

On/Off PSD Freebie by Muhammad Farhan

On Off PSD Freebie by Muhammad Farhan

 

Mini Music Player (Free PSD) by Joshua Andrew Davies

Mini Music Player Free PSD by Joshua Andrew Davies

 

Facebook iOS7 More Menu (Free PSD) by Riley Donelson

Facebook iOS7 More Menu Free PSD by Riley Donelson

 

Flat Buttons PSD by Surjith SM

Flat Buttons PSD by Surjith SM

Freebie by JAWA

shot 1x

 

iOS 7 Non-Destructive Blur Templates by Jayson Lane

iOS 7 Non Destructive Blur Templates by Jayson Lane

 

Gold Text Style – PSD freebie by Alex Lasek

dr

 

Free Single Page Website Template

Free Single Page Website Template For Business Site by TemplateMonster

 

World Sailing freebie .psd by EuroART93

World Sailing freebie psd by EuroART93

 

Freebie On/Off Button by Barry Mccalvey

button 1x

 

Your Friends by Kamal Chaneman

Your Friends by Kamal Chaneman

 

UI Components concept by Tech and ALL

UI Components concept by Tech and ALL

 

Music Widget Freebie by JAWA

music widget 1x

 

Free PSD Buttons by Luke Taylor

luketctaylor ui freebie 1x

 

Freebie: Android Devices by Ian Mintz

Freebie Android Devices by Ian Mintz

 

Exponential Gradient by Adam Bubeníček

Exponential Gradient by Adam Bubenicek

 

Free Blue Triangle Wallpapers by Alex Sadeck

Free Blue Triangle Wallpapers by Alex Sadeck

 

Stat Widget by Alexander Zaytsev

Stat Widget by Alexander Zaytsev

 

Find Friends PSD by Martin J.Berthelsen

Find Friends PSD by Martin J Berthelsen

 

Small Widgets Set by Alexander Zaytsev

Small Widgets Set by Alexander Zaytsev

 

Visits Widget by Valery Zanimanski

lovicons visits widget dribble

 

Weather Widget Freebie by Barry Mccalvey

Weather Widget Freebie by Barry Mccalvey

 

Free Psd Login Form 9 by TemplateMonster

Free Psd Login Form 9 by TemplateMonster

 

Panda Website Template Freebie [PSD] by Noah Zwillinge

Panda Website Template Freebie PSD by Noah Zwillinger

如何快速簡單讓你的設計看起來更加有系統性和節奏感,並且有自己分析設計的方法?

因為之前也看過很多關於設計的分析,大都是“色彩心理學”、“配色原理”之類的巴拉巴拉… 這些內容大都落在單個畫面中,不太強調色彩的系統規劃。今天這篇好文帶你一窺色彩層級的奧秘。


一,Banner 圖的色彩分解


這部分我會著重說的比較多,因為在後面的網頁和APP當中都會有涉及,而且當瞭解的大概的原理後,看到後面自然也就會很容易的明白了。


A、主產品美觀突出型


首先從汽車類Banner 圖開始說起吧!因為這算是一大類,如:“汽車、奢侈品、高級音響……”,甚至是模特兒、演員相關的設計原理也大都如此,就是需要宣傳推廣的產品本身漂亮。

uisdc color 201609071

 

上面的這3張圖,算是汽車中的高端(質感)車型和一個高爾夫奢侈品,其實想一想看過的大部分高端(貴貴貴)的產品設計大都是這種風格。這裡面說的貴是相對的,就好像哈根達斯幾個雪球100多元,也算奢侈了!


1、因為產品本身已經非常精美,所以文字大都用白色或灰黑做輔助(根據底色來定)
2、為了最大化產品優勢,文字所占空間也相對較小,且多用系統字體(因為不搶眼)
3、背景多數選擇實景,且接近產品本身色系,要麼君臨天下的大場景、要麼卓爾不凡的近距離


當然了,無論汽車還是奢侈品,他們也都有更加細分的市場和投放管道,如汽車的高端車、家庭型、運動型、白領代步……所以在設計中會根據產品不同的市場方向進行規劃。我們做任何設計也都是如此,所以在每次接到設計任務的時候一定一定要和需求方溝通清楚具體方向。

uisdc color 201609072

上面這幾個圖就是青年運動型,用動感的背景來表達“看我動力十足,快來一起撒野”
下面這幾張圖很明顯是為了表現繽紛生活,愉快出行的生活狀態!畫面背景色和產品本身有較大反差,這樣依然是最大化的突出了我們的宣傳目的。
當最終還是開始說的那樣,當產品(美女帥哥也是哦!)本身足夠美觀的時候,一定要最大化突出產品本身,資訊只是作為輔助,層級排在商品之後。

uisdc color 201609073

B、產品展示型

當然這個也是我們最常見的設計圖,並且更新頻率更快(想起來都夠了是不是),電商裡面最常見的就是這類圖,這時候就需要在文字字形色彩、背景色彩或輔助元素上多做一點設計排列了,看下面布靈布靈……↘(ˇˍˇ)↘

 

uisdc color 201609074

這一組還是以產品本身突出為主,輔助以文字資訊介紹
1、文字占空間略大,和背景反差色彩較大置於後景(↖左側兩張)
2、文字佔據空間偏小,且字體較細視覺感不強烈,置於前景(右側兩張↗)
3、這些常規性產品推廣,他們都把背景色接近了產品本身色系(減淡或加深後突出前景)
尤其是走長線宣傳的產品,盡可能要有常規推廣型和事件型(促銷、新功能)兩種模式做區別


C、標題突出型

韓國也是有暴力型促銷Banner出現的,不過相對比還是清晰些,這裡還要說下天貓官方設計,現在的設計也都是很贊了,本人也是經常看的內心驚歎。

uisdc color 201609075

上面幾張圖的特點幾乎都是一樣的:
1、標題佔據前景,且佔據空間大
2、色彩與背景色做較大反差
3、讓背景色和產品本身色系接近,且明暗度也略接近,目的是增加產品氛圍渲染,但削弱產品本身視覺衝擊,把標題最大化

D、產品展示、標題點睛


好像看了上面的讓我自己都覺得,不就是突出產品就是產品占的空間大然後還在前景,突出文字就是文字占的空間大置於前景麼?!多簡單點事兒啊……其實好像……也就是這樣咯,但我還是找了點例外如下↓(ˇˍˇ) ↓

uisdc color 201609076

1、把背景色接近產品(弱化產品本身),文字顏色和背景較大明暗度和色相反差,突出文字(左上↖)。
2、把文字組模組化、圖形化,可以用會話氣泡、框線、標籤……能讓文字作為一個整體突出,然後這個整體和背景色有較大的反差!
這樣做的優點就是你的圖要看起來是促銷,而不是廉價!


二,網頁的色彩分解


單張的設計圖說了一大堆,下面把網頁部分盡可能的說的簡單一點!


A、首頁引導型


這類型的網站或網頁是我們看到的大部分網頁設計類型,多數是以公司或產品LOGO的主色系進行色彩延續,在頁面需要突出重點的地方,他們選用首頁的主色調,輔以黑白灰或在加一個臨近色(點綴使用)

uisdc color 201609077

這類型的網頁設計不需要做太多介紹,隨便點開兩個網站就有一個這樣!
如果非要說要點,那就是設計整體頁面的時候劃分好你的重要資訊分級,不要在同一頁內出現過多重要資訊,那樣無論資訊還是主色彩,你一定會流失一樣才能保住頁面美感.


B、單底色、多色彩型


這類型設計多出現於宣傳活動頁,由於需要展現的內容較多,甚至多線(品類)展示,所以在不同頁次間做不同色系區分,但詳細文字的基礎色的黑白灰儘量不變,這樣才能穩定整個頁面。

uisdc color 201609078

1、不同頁面用不同色系來做區分,前提一定要保持色彩在同一級明度、飽和度範圍
2、主推產品色彩反差和空間最大化(↖左上)
3、前景都用那麼多色彩了,背景當然是黑白色系囉


C、色彩對比型


這類型網頁不那麼常見,多出現在對陣遊戲、競技賽事、電影傳播、時間軸展示頁,常見的色彩多為紅V藍、紅V黑、藍V綠、青V粉……還有一個特點就是,這類型頁面多為敘述性排列資訊!

uisdc color 201609079

上面兩個頁面一個是上下跳躍分色(↖左上),一個是左右對比分色(看↑)。

他們的雖然都是在各自敘述一個產品故事,但第1個是每個頁面表現一段內容,右邊則是連貫性展示整體內容。當然一段一段講述內容的頁面自然就是比較長的,因為他要讓訪客(受眾)有一個單獨停留時間,而不是滿篇文字;而左右對比色的連續展示頁面相對都較短,畢竟一連串的看內容難道你還想表現很多屏麼!


這裡只說一個重點就是,這類型頁面大都要有較好的圖才行,要麼攝影圖片、要麼遊戲原畫、至少要有精緻的圖示……沒有怎麼辦,去搜圖、去畫圖示啊/(ㄒoㄒ)/~~!


三,色彩在APP中的分級應用


寫到這我的內心是崩潰的,這個坑挖的太大了,居然來分析APP的色彩運用,簡直就是作啊……
第二次崩潰下載了一個看起來漂亮的韓國應用CongKong,然後……用不了,於是我只好用國內一小撮文藝青年和一大部分偽文藝青年聚集的豆瓣來叨叨叨了!
當我自己看完了豆瓣的設計後,還是恨讚歎的,心想我啥時候能做的這麼好啊(又一波馬屁拍的真棒)!他們的APP當中色彩確實也很有系統分級性了,甚至是在版本反覆運算後的閃屏圖都保留了整體的色彩傳承,此處給予掌聲 啪啪啪……啊!
寫在此處,整個A部分大家看不看都行(都是廢話),因為大部分APP都是走這種主色系統形式。


A、主頁面的色彩分析


從首次安裝時的啟動閃屏、啟動頁、節日閃屏,豆瓣已經把主色系展現

uisdc color 2016090710

1、主色系(明度飽和度)用手寫方式展現
2、輔助色黃色同時並行出現
3、無論Hello、還是小插畫都把清新風表現出來和豆瓣的主色系形成呼應
下面的6張為APP主頁面,截圖色調的不同,我只能說也許是因為小米手機
首頁為兩張,第1張常態(↓)、第2張向上翻閱內容的流覽形式(↓)。

uisdc color 2016090711

1、在Tabbar、內容提示標籤、Button中都應用了LOGO的主色(作為第一級提示常態)
2、APP中的具體產品剛好都用到了輔助色橙黃色,產品星標和優秀內容提示標籤(重點提示),這個用法是不是和那個Banner圖的最後一部分有點像的感覺(小面積高反差的點睛作用)
3、在個人中心頁面的Icon與Tabbar上面Icon的綠色基本保持了同級的明暗度和飽和度,這些都是較為常用的操作項,所以色彩層級也都用了同一級
加個小重點:在豆瓣的Titlebar上面,進入小組後有一個關注的Icon選項,當點擊選中後你會發現那個關注的小心型依然是綠色的哎!不得不說這個和個人中心的小反差他們做的確實很大膽,系統性很牛逼!

B、第二層級色彩

現在重點來了,在點擊進入list page後,很明顯的第二層級色彩

 

uisdc color 2016090710

uisdc color 20160907 hb

1、第1張圖在欄目內的標籤由於大都是非常用圖示,所以使用了填色圖形形式,明度較高飽和度較低(說人話就是淡色),這樣更好的突出了小組文字標題,這裡的視覺層級就是 1、欄目標題 2、圖示 3、內容概略。
2、第2張圖在進入詳細內容清單頁面後,右側的大色塊圖示用了相對較深的顏色,因為在這一處圖示的目的是和內容圖片相等(圖片、圖示會並行出現),因為每屏只能展示三個標籤,如果偏淡會讓整個頁面內容視覺感偏空,且弱於同層級圖片。
3、第3張圖這裡面,小組的快捷使用圖示雖然色彩並沒有減淡,但由於用的線性圖示空間留白較大,整體視覺感弱化,同樣重要的下面小組推薦話題Banner圖,視覺感在整個畫面中第一層級。當然你可以說隨便做個圖在這個位置和大小占比上都第一層級啊(再次提醒這裡我說的層級是視覺展現性,而非交互層面或用戶操作習慣),但他們在色調飽和度以及畫面形式上也用了非常相近的統一樣式,並沒有過深或過淺。
咳咳:在這裡我還補充一下,豆瓣君你的小組推薦話題Banner左右滑動的時候經常失靈啊!


C、第三層級色彩


下面的這幾張圖算是產品詳情和話題內容頁了,在這幾個頁面中很明顯的大量使用第三層級色彩
再次補充請原諒我截圖的偏色……

uisdc color 2016090713

原文:http://www.uisdc.com/color-hierarchy-you-need-know

第 2 頁,共 9 頁

聯絡資訊

ring@des13.com

 @igodos

403 台中市西區台灣大道二段181號11樓之11(環瑞通商大樓)

04-23174836 / 04-23296485 / 0931-303767

106 台北市大安區忠孝東路169號6樓之1(需預約)

02-27790715

thedes13 

line

 

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

DMC Firewall is developed by Dean Marshall Consultancy Ltd