網(wǎng)站設(shè)計(jì)中的色彩學(xué),網(wǎng)站設(shè)計(jì)中如何更好地運(yùn)用色彩搭配
為什么Facebook是藍(lán)色的——從最初到最新的版本,幾經(jīng)設(shè)計(jì)更迭,始終不變的主色調(diào)都是藍(lán)色?
答案其實(shí)很簡單,根據(jù)《紐約客》的一次采訪,F(xiàn)acebook的創(chuàng)始人馬克·扎克伯格其實(shí)是一個(gè)紅綠色盲,他只能分辨出藍(lán)色:“藍(lán)色對我來說是色彩最豐富的顏色?!?/span>
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
* Facebook最初始的設(shè)計(jì)界面,那時(shí)候它還叫做thefacebook.com。當(dāng)時(shí),想要在上面開個(gè)賬戶必須有一個(gè)以.edu(哈佛大學(xué))結(jié)尾的郵箱才行。
無心插柳也好,有意栽培也好,色彩往往能夠體現(xiàn)互聯(lián)網(wǎng)品牌的創(chuàng)始人的審美和喜好,而設(shè)計(jì)師對于色彩的挑選和取舍,也是完成作品中的必備環(huán)節(jié)。
Youtube設(shè)計(jì)師Marc Hemeon就曾收集了18組流行網(wǎng)站或產(chǎn)品的按鈕設(shè)計(jì)色彩,用來評估和調(diào)研色彩對于用戶心理的影響:
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
對應(yīng)網(wǎng)站或產(chǎn)品的謎底如下:
1、Google
2、Twitter
3、Facebook
4、Microsoft
5、Pinterest
6、Yahoo
7、Instagram
8、Flickr
9、Spotify
10、Rdio
11、Svbtle
12、Medium
13、Basecamp
14、Square
15、Amazon
16、Quora
17、LinkedIn
18、Path
大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會(huì)超過3種,指向“動(dòng)作”的按鈕應(yīng)當(dāng)統(tǒng)一為同一種顏色,比如Google的“搜索”按鈕是藍(lán)色,而Twitter的“注冊”按鈕則是明亮的黃色。
社交分享工具Buffer的聯(lián)合創(chuàng)始人Leo Widrich在博客上補(bǔ)充了關(guān)于色彩的一些觀點(diǎn),摘錄部分內(nèi)容如下。
色彩能夠幫助品牌極為簡易的建立用戶認(rèn)知:
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
灰色:象征冷靜、中立;(蘋果、維基百科、紐約時(shí)報(bào)……)
綠色:象征健康、生命;(BP石油、食品超市whole foods、星巴克……)
藍(lán)色:象征可靠、力量;(戴爾、大眾汽車、IBM……)
紫色:象征智慧、想象;(雅虎、T-Mobile、科幻主題電視臺(tái)Syfy……)
紅色:象征血?dú)?、年輕;(可口可樂、樂高、肯德基……)
橙色:象征歡樂、信任;(芬達(dá)、亞馬遜、火狐……)
黃色:象征溫暖、透明;(百思買、法拉利、麥當(dāng)勞……)
站在消費(fèi)者角度,色彩也能夠在理解和決策階段起到一定的影響作用:
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
黃色:吸引注意力的購物窗口;
紅色:刺激心血的緊迫感,常出現(xiàn)在清倉場景;
藍(lán)色:多用于銀行和商業(yè)機(jī)構(gòu)里,強(qiáng)調(diào)安全;
綠色:讓人聯(lián)想到富裕和輕松,緩解壓力;(支付寶的信用卡還款按鈕選擇了綠色作為主色調(diào),能夠理解原因了吧)
橙色:呼叫意味濃厚,用于創(chuàng)建下訂、購買、出售的行動(dòng);
粉色:服務(wù)于女性和年輕女孩的浪漫色調(diào);
黑色:奢侈品的最佳匹配;
紫色:給人舒緩&平靜的感受,常被美容及抗衰老產(chǎn)品使用;
男性和女性對于色彩的喜好度有所偏差:
企業(yè)分析服務(wù)公司KISSmetrics的調(diào)查報(bào)告顯示(這份報(bào)告主要用于建議App產(chǎn)品的創(chuàng)業(yè)者在產(chǎn)品設(shè)計(jì)上的策略)——
女性喜愛的色彩:藍(lán)色、紫色和綠色;
女性討厭的色彩:橙色、棕色和灰色;
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
男性喜愛的色彩:藍(lán)色、綠色和黑色;
男性喜愛的色彩:褐色、橙色和紫色;
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
色彩能夠決定轉(zhuǎn)化率的差距:
美國數(shù)字營銷公司Hubspot曾經(jīng)做過一場A/B Testing,用于測試不同顏色對于用戶點(diǎn)擊轉(zhuǎn)化造成的差異——
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
左右兩個(gè)測試顏面在內(nèi)容上完全一直,唯一不同的是按鈕的顏色,在超過2000人次的樣本測試中,最終紅色方案的點(diǎn)擊率超過綠色方案的點(diǎn)擊率足足21%。
而在測試之前,大部分的研究員都猜測綠色方案會(huì)獲得更高的點(diǎn)擊,因?yàn)榫椭庇X而言,綠色代表著通行、準(zhǔn)許通過的意思,而紅色則更傾向于警告、阻止意味。
最后,為什么Html語言里超鏈接的默認(rèn)顏色是藍(lán)色的?
因?yàn)樗{(lán)色是從灰色底色中脫穎而出的最佳色調(diào)。
淺談互聯(lián)網(wǎng)設(shè)計(jì)的色彩心理學(xué)心得,PS教程,
這個(gè)決定是由Tim Berners-Lee——萬維網(wǎng)的發(fā)明者做出的。在他那個(gè)年代,互聯(lián)網(wǎng)的第一代瀏覽器Mosaic顯示的網(wǎng)頁底色通常都是灰底黑字,為了讓超文本鏈接能夠更方便識(shí)別,Tim Berners-Lee將超鏈接定義為藍(lán)色并帶有下劃線的文字。
設(shè)計(jì)網(wǎng)站中有哪些關(guān)鍵技巧?有哪些陷阱?在這里,世界上一流的網(wǎng)站設(shè)計(jì)專家,讓你共享他們的秘密,告訴你:使網(wǎng)站賦予情趣的訣竅、應(yīng)該避免做什么、應(yīng)使用什么工具軟件以及他們喜愛和厭惡的網(wǎng)站。
今年,許多網(wǎng)站都將這個(gè)小元素納入界面,成為頁面導(dǎo)航的重要組成部分。除了導(dǎo)航設(shè)計(jì)趨勢,還有各種設(shè)計(jì)方法,如全屏導(dǎo)航,底部導(dǎo)航等,所有這些都有利于網(wǎng)頁設(shè)計(jì)師。
網(wǎng)頁設(shè)計(jì)必須簡約,任何無用的特質(zhì)都必須移除;與此同時(shí),網(wǎng)頁設(shè)計(jì)必須能夠滿足用戶需求。
做網(wǎng)站設(shè)計(jì)時(shí),我們應(yīng)該考慮哪些因素?在做的過程中設(shè)計(jì)師應(yīng)該思考哪些問題,怎么樣才能做好網(wǎng)站設(shè)計(jì)?
用戶體驗(yàn)好的方案,用戶感受到的體驗(yàn)真的好嗎,真的在意嗎?用戶愿意為這個(gè)體驗(yàn)更多的使用?還是愿意付更多錢? 如果設(shè)計(jì)希望被認(rèn)可價(jià)值,那么就必須清晰表明:設(shè)計(jì)到底實(shí)現(xiàn)了什么價(jià)值,以及設(shè)計(jì)是如何穩(wěn)定實(shí)現(xiàn)這些價(jià)值的。 網(wǎng)站設(shè)計(jì)中設(shè)計(jì)師到底要實(shí)現(xiàn)什么價(jià)值?
玻璃擬態(tài)(Glassmorphism),更直觀的說就是玻璃擬物化。它是在2020年末開始在各大設(shè)計(jì)平臺(tái)流行起來的設(shè)計(jì)趨勢。當(dāng)時(shí)蘋果新發(fā)布的Mac OS Big Sur操作系統(tǒng)中也使用了這種風(fēng)格
網(wǎng)頁設(shè)計(jì)師想出了一些非常聰明的技巧,讓他們的作品有一種實(shí)體感。玻璃擬態(tài)(Glassmorphism)就是這樣一種技術(shù)。當(dāng)您將模糊效果與透明度相結(jié)合時(shí),像素會(huì)呈現(xiàn)出磨砂玻璃的略微不透明的品質(zhì)——為設(shè)計(jì)增添一絲質(zhì)感和維度。
我們做海報(bào)設(shè)計(jì)的時(shí)候,經(jīng)常會(huì)在圖文排版上花上很長的時(shí)間來構(gòu)思,要讓主題突出、要畫面有活力、視覺沖擊力要強(qiáng)、要給觀者留下深刻的印象......那么今天洛壹就來分享16種海報(bào)設(shè)計(jì)的思路,讓你在設(shè)計(jì)中思路清晰,努力不白費(fèi)。