我本質(zhì)上傾向于成為一個(gè)相當(dāng)實(shí)用的設(shè)計(jì)師，因此我不得不學(xué)習(xí)如何在這里和那里增加一些華麗的辭藻，因?yàn)槲乙呀?jīng)將注意力轉(zhuǎn)移到產(chǎn)品上而不是純粹的可用性。
功利主義：強(qiáng)調(diào)有用性/實(shí)用性而非吸引力
建立品牌的最佳機(jī)是在原型或內(nèi)容引導(dǎo)場(chǎng)景。諸如啟動(dòng)頁(yè)面，標(biāo)題區(qū)域和模態(tài)之類，這些UI元素是注入一些品牌和角色的最佳選擇。它們?yōu)轫?yè)面的其余部分奠定了品牌基礎(chǔ)。
但實(shí)際情況是，當(dāng)我們想擺脫無(wú)聊的插入式模式，構(gòu)建更具吸引力的營(yíng)銷方案時(shí)，我們發(fā)覺我們不具有像插畫大師一樣的繪畫能力，或者高超的icon繪制技巧。
或者當(dāng)我們這些對(duì)扁平插畫不是特別了解的人，不知道那些簡(jiǎn)單的啟動(dòng)頁(yè)從哪里開始。
UX Power Tools可以為您提供一些實(shí)現(xiàn)品牌目標(biāo)的基本方法，而無(wú)需占用您的時(shí)間。以下是一些利用顏色，圖形和模式將產(chǎn)品品牌添加到UX工作流程的簡(jiǎn)單方法。
閃屏頁(yè)的品牌化
使用的工具：IconFlower插件，Colorful Gradients插件，IconJar，Coolors
這是本文中“最純粹”的品牌UI元素，因?yàn)樗奈ㄒ荒康氖菫楫a(chǎn)品的其余部分建立基礎(chǔ)。我認(rèn)為這種設(shè)計(jì)通常屬于營(yíng)銷領(lǐng)域，沒開玩笑，在你的優(yōu)先級(jí)的前三個(gè)不會(huì)有它的身影。
別在Dribbble找靈感了！Dribbble就像一個(gè)閃屏頁(yè)面的博物館，它們都是宏偉的藝術(shù)品。幸運(yùn)的是，你不必做一個(gè)酷炫到冒泡的閃屏。
讓我們假設(shè)你正在為一個(gè)新的應(yīng)用程序創(chuàng)建一個(gè)啟動(dòng)頁(yè)面，比如這個(gè)app是修房子的應(yīng)用。
我們稱之為“Fixt”????
最簡(jiǎn)單的，你可能想到要把名字放在閃屏，logo也放上去，就像medium的閃屏。
盡管這很無(wú)聊，但它至少告訴我這個(gè)應(yīng)用程序是什么。在Medium的案例中，它在UI上保留了大量的空白，因此這是個(gè)簡(jiǎn)單的交互界面。他們的品牌設(shè)定也很成熟，所以他們只需要展示他們的logo。
但對(duì)于我們的應(yīng)用程序，這感覺有點(diǎn)平淡。作為初創(chuàng)公司，我們需要發(fā)揮更大的影響力。讓我們?cè)囍?b>加點(diǎn)背景色：
我們使用像Twitter這樣的扁平藍(lán)色，用它填充屏幕的感覺會(huì)更好。我們的應(yīng)用程序都是關(guān)于行動(dòng)的，我們想要加深這一點(diǎn)。你可以通過圖片來體現(xiàn)深度，但是已有的照片沒有生氣，除非它們可以被自定義，否則它們并不是真正的品牌。
添加深度的一種方法是采用漸變。比如，加入二級(jí)品牌顏色：
并非所有品牌顏色的組合都有效，有時(shí)你的產(chǎn)品可能沒有二級(jí)顏色。在LinkedIn中，他們使用從中心延伸的簡(jiǎn)單徑向漸變。我們正在使用我們的二級(jí)品牌顏色右下角的漸變填充。任何一個(gè)都只是小詭計(jì)。
如果你沒有二級(jí)品牌顏色，打開 coolors.co 并輸入基色，鎖定它，然后按空格鍵直到找到你喜歡的組合。你還可以使用sketch漸變插件來簡(jiǎn)化：
讓我們更進(jìn)一步，通過創(chuàng)建一個(gè)背景元素來增加更多深度：
Laserlike具有可以組合形狀。對(duì)于我們的應(yīng)用程序，我們針對(duì)使用情況加以暗示，因此我從 Nova獲取了一組圖標(biāo)，這些圖標(biāo)是這個(gè)虛擬應(yīng)用程序的“工具”。然后我用 設(shè)計(jì)師Avadh Dwivedi 設(shè)計(jì)的超棒的Icon Flower插件將圖標(biāo)從中間旋出。
小結(jié)
這是為在啟動(dòng)頁(yè)加深品牌印象的四種方法。選擇哪一個(gè)取決于你自己的偏好，還取決于你們產(chǎn)品的定位以及市場(chǎng)定位。對(duì)于沒有品牌設(shè)定的初創(chuàng)型公司，謹(jǐn)慎一點(diǎn)：使用產(chǎn)品名稱，logo，并添加代表產(chǎn)品差異點(diǎn)的圖形。對(duì)于更成熟的品牌，可能會(huì)采用更簡(jiǎn)單的方法。
讓我們不說移動(dòng)設(shè)備，再看一些品牌桌面應(yīng)用打造品牌的方法。
品牌模式
工具：Confetti插件，Nucleo
我的模式通常是無(wú)聊的AF。這沒什么不對(duì)。它們功能齊全！但是當(dāng)屏幕開始進(jìn)入營(yíng)銷和/或銷售時(shí)，產(chǎn)品品牌會(huì)有所損失。
LinkedIn之前使用一種簡(jiǎn)單風(fēng)格的卡片來滲透品牌。但是最近隨著新功能的推出做了些改動(dòng)。兩者都很好，非常適合產(chǎn)品階段的目標(biāo)。左邊是輕柔的滲透，右邊試圖引起你的注意。
讓我們看看如何將品牌應(yīng)用于模態(tài)彈窗。想象一下，我們正在設(shè)計(jì)[通用大數(shù)據(jù)]應(yīng)用程序的儀表板（并且還想象我們的品牌顏色將采用粉色和紫色）??。在那里他們可以選擇要顯示的數(shù)據(jù)點(diǎn)，允許用戶將自己的卡添加到儀表板：
功能和視覺上都很好。天哪，我們甚至采用了兩列布局的卡片！多么前衛(wèi)！
但隨后營(yíng)銷將這個(gè)彈窗放在屏幕中并說它“有點(diǎn)單調(diào)”。不用擔(dān)心，我們?cè)?b>頂部標(biāo)題中加入一些顏色！
現(xiàn)在這種模式感覺很顯眼，但它仍然與品牌聯(lián)系不多。這是有點(diǎn)花哨的地方。請(qǐng)記住，我們團(tuán)隊(duì)中沒有出色的插圖畫家，但我們確實(shí)擁有 Nucleo 的使用權(quán)。我們可以采用一個(gè)模糊的統(tǒng)計(jì)圖標(biāo)的彩色版本：
然后放入我們的文件，我們只需換出品牌顏色的顏色：
我們還為模態(tài)的標(biāo)題以騰出空間，這種樣式還有很多其他花樣。
但不，我們不會(huì)止步于此。我們又在背景部分隨機(jī)加了些icon作為裝飾。
我知道你在想，“嘿，排著這些背景也太浪費(fèi)時(shí)間了吧“ 不要害怕，從 Nucleo的”glyph“中抓取了一堆用戶圖標(biāo)：
然后使用互聯(lián)網(wǎng)上最熱門的新Sketch插件，Yummygum的Confetti。很快就搞定了。?
其實(shí)視覺設(shè)計(jì)比我在文章里寫得更加微妙，還有很多設(shè)計(jì)高手，他們的創(chuàng)意令人嘆為觀止。
但有時(shí)你沒有這種資源可用，并且使用這些簡(jiǎn)單的技巧可以幫助你將可用的產(chǎn)品變成可銷售的產(chǎn)品。
原文作者
