同學(xué)有這樣的困擾，一個(gè)設(shè)計(jì)師分享他的設(shè)計(jì)，沒想到被這個(gè)總監(jiān)直接噴了說(shuō)完全不專業(yè)，那么怎么做才專業(yè)？今天聊下下部分。

如果你在設(shè)計(jì)中使用顏色，一定要考慮色彩的整體和諧性以及色調(diào)。色彩明度不同，色調(diào)不同，帶來(lái)的視覺感受是完全不一樣的，比如紅色，有的紅色很個(gè)性化，有的紅色很現(xiàn)代，有的紅色比較性感。我們需要掌握不同顏色的性格特征。

這里推薦一個(gè)工具就是-色彩意象尺，它能幫你了解不同顏色的色彩情感。一般在做品牌的過(guò)程中用的比較多。

▲色彩意向尺，能告訴你不通過(guò)顏色的情感是什么樣的。在確定一個(gè)品牌色，或者配色時(shí)候都可以用到。給大家看一個(gè)定義品牌色的案例。

舉例說(shuō)明

比如要做一款全球的社交產(chǎn)品，主要用戶是00后的，整體的品牌個(gè)性是時(shí)尚，年輕的方向。那么可以從這個(gè)尺度表里面去挑選色彩位置，再進(jìn)行配色調(diào)試。

▲第一步就從整個(gè)色彩尺度表空間里面，找到了這個(gè)色彩的位置。找到了一個(gè)基礎(chǔ)顏色，紅色，黃色。

看看競(jìng)品的色彩方向

比如發(fā)現(xiàn)競(jìng)品其實(shí)都趨向于紅色方向，那么也可以從策略上，我們避開紅色方向，最終來(lái)定出一個(gè)黃色作為整體品牌色。

根據(jù)人群喜好調(diào)整配色

▲確定品牌色方向：黃色

在確定方向后，就要思考，我們的用戶比例，是男性多還是女性多，加入我們的用戶是男性多，可以根據(jù)上圖男女喜好去做色彩傾向。比如男性喜好色彩大膽一些配色，那么基于黃色去做一些黃色的調(diào)整。

▲調(diào)整黃色的明度和飽和度，讓整體更大膽一些，最后定下來(lái)一個(gè)偏糖果玉米的黃色。

以上就是一個(gè)大概如何定義品牌色過(guò)程，那這中間其實(shí)有很多知識(shí)點(diǎn)，可能是同學(xué)們第一次聽說(shuō)，比如：品牌個(gè)性維度，色彩情感，以及色相意向尺，不過(guò)沒關(guān)系，今天大家只要通過(guò)這篇文章，了解的這些理論。然后在你的項(xiàng)目和工作中，不斷反復(fù)運(yùn)用，相信我，你有一天也可以從0到1去定義一些很經(jīng)典的配色。

▲上圖就是一個(gè)使用色彩意向尺的示范案例，通過(guò)產(chǎn)品定位優(yōu)雅高級(jí)，從色彩意向尺里面選擇中性色去運(yùn)用的一個(gè)案例。

▲分享給大家一個(gè)網(wǎng)站，這個(gè)網(wǎng)站匯聚了全球所有大公司的品牌色。你在做品牌色時(shí)候，都可以去參考學(xué)習(xí)。

2.有品質(zhì)的圖片 

▲圖片來(lái)源：設(shè)計(jì)日記私塾班學(xué)員-小冉子

圖片是做設(shè)計(jì)非常重要的工具，沒有一個(gè)工具比圖片簡(jiǎn)單強(qiáng)大。圖片是最被設(shè)計(jì)師忽略的一個(gè)工具。如果你會(huì)使用圖片，能很好幫你做設(shè)計(jì)提案，幫助你很好的把產(chǎn)品氣質(zhì)和調(diào)性傳遞出去。

▲圖片來(lái)源：設(shè)計(jì)日記私塾班學(xué)員-小冉子

比如今天我們?cè)O(shè)計(jì)想表達(dá)安全，那么怎么去體現(xiàn)，怎么去和同事領(lǐng)導(dǎo)表達(dá)安全的概念。圖片就是一個(gè)很好的方式。比如安全的人，警察，保鏢。安全的事情手機(jī)鎖屏解鎖，戴口罩等等。安全的物體有保險(xiǎn)箱，指紋鎖等等。也能通過(guò)圖片找到一些視覺表達(dá)方式，比如塊面感像保險(xiǎn)箱一樣，比如穩(wěn)重的字體，對(duì)稱的構(gòu)成形式等等。

圖片除了用在情緒板去表達(dá)你的設(shè)計(jì)意圖，在設(shè)計(jì)中好的圖片能幫你傳遞出清晰的概念，能幫你視覺加分，在視覺上提升品質(zhì)。

▲如上圖就是一個(gè)攝影照片，那么運(yùn)用到設(shè)計(jì)中，和設(shè)計(jì)很巧妙結(jié)合，效果就會(huì)非常好。

▲合成后的效果圖非常好，汽車和風(fēng)景的結(jié)合也比較融洽。

▲特別在電商設(shè)計(jì)中，圖片選的好，符合產(chǎn)品氣質(zhì)。整體的銷量還有設(shè)計(jì)效果都會(huì)提升。

▲設(shè)計(jì)師合理的運(yùn)用圖片，通過(guò)圖片去表達(dá)設(shè)計(jì)概念。通過(guò)圖片的選擇幫助產(chǎn)品提升品質(zhì)，最終達(dá)到設(shè)計(jì)目標(biāo)是每個(gè)設(shè)計(jì)師都需要具備的能力。

3.帶隱喻且合理的圖標(biāo) 

在頁(yè)面中合理運(yùn)用圖形很重要，現(xiàn)在圖標(biāo)不僅僅是表達(dá)含義，更多時(shí)候也是設(shè)計(jì)圖形的象征，圖標(biāo)也是有情感的。不同圖形的圓角大小，質(zhì)感不一樣，傳遞的氣質(zhì)也會(huì)完全不一樣。

▲斷口和疊加色彩的圖標(biāo)，給人感覺輕松活潑，傳遞出親和力。

▲這種就是比較硬朗的圖形，一般在視覺上給人穩(wěn)定，品質(zhì)的感受，適合于金融產(chǎn)品，偏硬朗一些的產(chǎn)品設(shè)計(jì)。

▲另外在圖形的設(shè)計(jì)上，要遵循用戶平時(shí)的習(xí)慣，圖形要和他日常生活中的事情能聯(lián)系起來(lái)，也就是常說(shuō)的隱喻，圖形要有合理的隱喻。

 a

4.明確按鈕規(guī)則 

按鈕是產(chǎn)品設(shè)計(jì)中出現(xiàn)頻率最多的，按鈕主要是行動(dòng)點(diǎn)，所以我們有必要明確每個(gè)按鈕的含義和動(dòng)作。

按鈕的視覺樣式也很多，有填充的，線框的，色塊描邊的，還有文字按鈕。在產(chǎn)品設(shè)計(jì)中，需要明確每個(gè)按鈕的使用場(chǎng)景和含義，比如一般的主行動(dòng)按鈕一般用品牌色填充，比如去購(gòu)買，下一步等等。一般輔助操作用白色快描邊的方式處理，這樣更輕量化。警告類的操作一般運(yùn)用紅色按鈕，無(wú)效按鈕一般用灰色等等。

▲如果沒有很明確的按鈕指引規(guī)范，就會(huì)出現(xiàn)設(shè)計(jì)不合理，功能不合理。

 a

5.視覺對(duì)齊準(zhǔn)則 

在設(shè)計(jì)時(shí)候，有時(shí)候需要設(shè)計(jì)的很精準(zhǔn)，比如間距規(guī)則，圖形大小都要遵循數(shù)學(xué)原則，也就是像素眼對(duì)齊。但是有些場(chǎng)景，可能需要進(jìn)行視覺矯正。純粹的數(shù)學(xué)對(duì)齊往往看起來(lái)不和諧。

▲NAVER閃屏，字體是偏上一點(diǎn)設(shè)計(jì)，看起來(lái)更加和諧。如果兩邊都是一比一會(huì)有些壓抑。

▲上圖兩個(gè)圖標(biāo)，左邊的是數(shù)字對(duì)齊，但是看起來(lái)圖片有點(diǎn)偏左了，右邊是進(jìn)行視覺對(duì)齊調(diào)整后看起來(lái)和諧很多。

▲上圖左邊正方形和圓形的大小相同，圓形看起來(lái)就特別的小，所以在這種情況下。圓形要比正方形更大一些。

▲經(jīng)常會(huì)用到字體，有時(shí)候粗體和細(xì)體會(huì)一起使用。如果同樣字號(hào)的粗體和細(xì)體放在一起就會(huì)感覺粗體更大。這個(gè)時(shí)候其實(shí)就需要將細(xì)體微調(diào)整1px或者2px的大小，讓其看起來(lái)更合理。

▲同樣的在中文和英文數(shù)字組合時(shí)候，中文會(huì)比數(shù)字看起來(lái)大很多，會(huì)有些不均衡。這個(gè)時(shí)候可以把數(shù)字稍微加大一點(diǎn)，這樣看起來(lái)就會(huì)均衡很多。

最后 

以上就是我總結(jié)的一些視覺標(biāo)準(zhǔn)準(zhǔn)則，也是一個(gè)設(shè)計(jì)合格的基礎(chǔ)，當(dāng)然設(shè)計(jì)遠(yuǎn)遠(yuǎn)沒有完美的，沒有100分的設(shè)計(jì)，只有不斷優(yōu)化的設(shè)計(jì)，希望這兩篇關(guān)于如何從哪幾個(gè)維度做好設(shè)計(jì)，能讓你更好的了解設(shè)計(jì)，并在工作中運(yùn)用。

原文地址:我們的設(shè)計(jì)日記（公眾號(hào)）

作者：sky

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(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ù)