2017-5-1 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
互聯(lián)網(wǎng)和手機(jī)的興起給我們的生活帶來(lái)了極大的便利，但是也使我們產(chǎn)生了強(qiáng)烈的依賴(lài)性。我們發(fā)現(xiàn)自己現(xiàn)在已經(jīng)離不開(kāi)手機(jī)了，我們的時(shí)間被各式各樣的社交媒體所占據(jù)。我們變得越來(lái)越浮躁，越來(lái)越缺乏耐心，沒(méi)有足夠的時(shí)間去獨(dú)處，去思考。在這樣的一個(gè)社會(huì)大環(huán)境下，加之日益嚴(yán)重的同質(zhì)化競(jìng)爭(zhēng)，一款產(chǎn)品能夠贏得用戶的注意力可謂成功了一大半。那么如何才能吸引用戶的注意力呢？人類(lèi)是視覺(jué)生物，我們天生就對(duì)色彩具有極強(qiáng)的感知力，可以在一瞬間判斷出顏色的差異，我們可以通過(guò)配色來(lái)吸引用戶的注意力。
接下來(lái)，我們通過(guò)一些具體例子來(lái)分析如何通過(guò)配色來(lái)吸引用戶注意力：
極簡(jiǎn)風(fēng)格，少即是多
Storq是一個(gè)主要面向孕婦的購(gòu)物網(wǎng)站，主要產(chǎn)品是孕婦和嬰幼兒衣服。從總體上來(lái)看，網(wǎng)站并沒(méi)有使用過(guò)多的配色。比如，在下面的這個(gè)產(chǎn)品詳情頁(yè)面，頁(yè)面主體是產(chǎn)品圖片，配以一些說(shuō)明性文字。
從用戶的角度來(lái)說(shuō)，這種極簡(jiǎn)風(fēng)格的界面更容易讓他們找到重點(diǎn)。因?yàn)橛脩舻淖⒁饬κ怯邢薜?，?yīng)該得到合理的分配。我遇到過(guò)很多客戶，他們說(shuō)這里要使用大紅色突出，那里要放大字體吸引用戶注意。在他們的設(shè)想中，頁(yè)面里的任何一個(gè)元素都要強(qiáng)調(diào)出來(lái)，但是殊不知頁(yè)面中視覺(jué)重點(diǎn)有且只有一個(gè)，過(guò)多的給予對(duì)于用戶來(lái)說(shuō)其實(shí)是一種負(fù)擔(dān)。少即是多，這是互聯(lián)網(wǎng)時(shí)代的信條。
對(duì)于用戶來(lái)說(shuō)，任何的文字描述都無(wú)法比圖片來(lái)的更加直觀。如果我對(duì)這款感興趣，點(diǎn)擊進(jìn)入產(chǎn)品詳情頁(yè)面，那么產(chǎn)品的圖片和一些說(shuō)明性文字就足夠我對(duì)該產(chǎn)品有一個(gè)大致的了解。如果我還想繼續(xù)了解更多，點(diǎn)擊“更多詳情”即可。此外網(wǎng)站主要目標(biāo)用戶是準(zhǔn)媽媽?zhuān)齻冊(cè)谫?gòu)物的時(shí)候會(huì)更加的理性。她們?cè)谔暨x商品更加注重的是產(chǎn)品的質(zhì)量——這個(gè)毛巾被的棉絮是否正規(guī)的？衣服的質(zhì)地會(huì)不會(huì)引起寶寶皮膚過(guò)敏？所以在這里，也沒(méi)有必要像一般電商網(wǎng)站一樣通過(guò)大紅大紫來(lái)吸引用戶的眼球。
Logo shop這個(gè)網(wǎng)站的配色同樣值得我們來(lái)研究。網(wǎng)站首頁(yè)的背景是飽和度很低的粉紅，字體只用了一個(gè)顏色。整個(gè)頁(yè)面看起來(lái)十分的簡(jiǎn)單，但是我們要知道，對(duì)于網(wǎng)站而言，最成功的要素莫過(guò)于對(duì)目標(biāo)用戶群的準(zhǔn)確定位和精準(zhǔn)營(yíng)銷(xiāo)。一個(gè)優(yōu)秀的logo應(yīng)該簡(jiǎn)潔明了，具有很強(qiáng)識(shí)別性，而且易于傳播。所以如果一個(gè)用戶要訂制一款logo，他打開(kāi)網(wǎng)站發(fā)現(xiàn)界面配色很凌亂的，他們會(huì)對(duì)這個(gè)網(wǎng)站的專(zhuān)業(yè)性產(chǎn)生懷疑。
使用裝飾，營(yíng)造頁(yè)面視覺(jué)焦點(diǎn)
我們可以通過(guò)一些形狀和圖案給頁(yè)面做一些裝飾，同樣可以達(dá)到吸引用戶注意力的目的。以下面這張圖片為例子，這個(gè)頁(yè)面主體是不同膚色的用戶手持手機(jī)的圖片。在這個(gè)主體背后，設(shè)計(jì)師添加了降低的透明度的藍(lán)色和紅色色塊，而且還有一些零散分布的小泡泡。
接下來(lái)我們?cè)倏匆幌?，沒(méi)有裝飾效果的頁(yè)面。
很明顯，有無(wú)裝飾效果頁(yè)面給我們的感覺(jué)是完全不一樣的。背景裝飾的使用可以很好的將用戶的注意力吸引到用戶手持手機(jī)這個(gè)主體上。此外藍(lán)色和粉色小泡的使用看似沒(méi)有關(guān)聯(lián)，但是我們可以看出它們可以很好的提升頁(yè)面的趣味性。
建立設(shè)計(jì)語(yǔ)言體系
視覺(jué)語(yǔ)言體系也可以理解為設(shè)計(jì)規(guī)范或者設(shè)計(jì)中的一致性原則，主要包括文字、圖標(biāo)、配色、動(dòng)效、組件（控件）和版式等一系列構(gòu)成元素。一款產(chǎn)品的視覺(jué)語(yǔ)言體系的建立，主要基于兩個(gè)方面。首先對(duì)于用戶來(lái)說(shuō)，規(guī)則性和一致性的界面不僅方便了操作，而且十分美觀。對(duì)于設(shè)計(jì)師和開(kāi)發(fā)來(lái)說(shuō)，可以極大的提升功能迭代時(shí)設(shè)計(jì)與開(kāi)發(fā)效率。
Wyre總部位于舊金山，是一家從事跨境支付業(yè)務(wù)的初創(chuàng)公司。該企業(yè)的logo就是三個(gè)樹(shù)葉疊加在一起。在這個(gè)企業(yè)的網(wǎng)站中，我們可以處處看到這片“樹(shù)葉”，從首頁(yè)banner中背景點(diǎn)綴小元素到按鈕。
例如用戶首次進(jìn)入這個(gè)網(wǎng)站，要從下面Get Started按鈕開(kāi)始，再到注冊(cè)／登錄頁(yè)面。這個(gè)流程走下來(lái)，用戶會(huì)發(fā)現(xiàn)行為召喚按鈕全部是一種樣式：藍(lán)色樹(shù)葉形狀加上文案。這個(gè)會(huì)培養(yǎng)用戶的操作習(xí)慣，在他們看來(lái)，這個(gè)網(wǎng)站所有的行為召喚按鈕都是這個(gè)樣式。而且因?yàn)榻缑媾渖挥兴{(lán)色、黑色和白色，所以藍(lán)色作為行為召喚元素可謂相當(dāng)顯眼，用戶可以在很短時(shí)間內(nèi)發(fā)現(xiàn)，用戶的使用效率可以得到很好的提升。
提升文字可讀性
當(dāng)頁(yè)面中出現(xiàn)大段文字的時(shí)候，我們可以通過(guò)使用配色來(lái)提升內(nèi)容的可讀性。
YummyGun網(wǎng)站主頁(yè)對(duì)主標(biāo)題使用了藍(lán)色來(lái)突出，而且給每一個(gè)段落的標(biāo)題都加深了顏色。因?yàn)楝F(xiàn)在用戶都是缺乏耐心的，他們進(jìn)入你的主頁(yè)，看到這樣一大段文字很少會(huì)通讀完的。所以我們要文字進(jìn)行處理，讓用戶瞬間分清標(biāo)題與正文的區(qū)別。標(biāo)題即是對(duì)于內(nèi)容的總結(jié)，用戶可以通過(guò)標(biāo)題即可了解正文大致內(nèi)容。當(dāng)然提升文字可讀性光靠配色是不夠，還應(yīng)該有字體尺寸和留白的共同作用。在上面這個(gè)例子中，即使我們不使用藍(lán)色，通過(guò)字體的尺寸我們也能看出來(lái)Let's talk and turn your idea into something memorable.這句話是主標(biāo)題。但是如果不使用藍(lán)色，這個(gè)頁(yè)面會(huì)顯得過(guò)于單調(diào)。
總結(jié)
以上我是對(duì)于配色的一些看法，設(shè)計(jì)是一個(gè)包容性很強(qiáng)的行業(yè)，允許不同的聲音存在。我認(rèn)為配色少即使多，極簡(jiǎn)風(fēng)格可以吸引用戶注意力。但是我也承認(rèn)配色多，奢華風(fēng)的頁(yè)面同樣也很出彩。配色一定要考慮產(chǎn)品定位，具體問(wèn)題具體分析，不能死搬硬套。
色彩在任何一種設(shè)計(jì)中都起著很重要的作用，相差不多的色彩卻能給用戶帶來(lái)完全不同情感效果。因此，好好利用色彩與生俱來(lái)的魅力，就能讓你的設(shè)計(jì)更出彩。
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com