【學UI設計】你不能錯過的品牌在UI設計中簡單實用技巧
功利主義:強調(diào)有用性/實用性而非吸引力
建立品牌的最佳機是在原型或內(nèi)容引導場景。諸如啟動頁面,標題區(qū)域和模態(tài)之類,這些UI元素是注入一些品牌和角色的最佳選擇。它們?yōu)轫撁娴钠溆嗖糠值於似放苹A(chǔ)。
但實際情況是,當我們想擺脫無聊的插入式模式,構(gòu)建更具吸引力的營銷方案時,我們發(fā)覺我們不具有像插畫大師一樣的繪畫能力,或者高超的icon繪制技巧。或者當我們這些對扁平插畫不是特別了解的人,不知道那些簡單的啟動頁從哪里開始。
UX Power Tools可以為您提供一些實現(xiàn)品牌目標的基本方法,而無需占用您的時間。以下是一些利用顏色,圖形和模式將產(chǎn)品品牌添加到UX工作流程的簡單方法。
閃屏頁品牌化
使用的工具:IconFlower插件,Colorful Gradients插件,IconJar,Coolors
這是本文中“最純粹”的品牌UI元素,因為它的唯一目的是為產(chǎn)品的其余部分建立基礎(chǔ)。我認為這種設計通常屬于營銷領(lǐng)域,沒開玩笑,在你的優(yōu)先級的前三個不會有它的身影。
別在Dribbble找靈感了!Dribbble就像一個閃屏頁面的博物館,它們都是宏偉的藝術(shù)品。幸運的是,你不必做一個酷炫到冒泡的閃屏。
讓我們假設你正在為一個新的應用程序創(chuàng)建一個啟動頁面,比如這個app是修房子的應用。
我們稱之為“Fixt”????

最簡單的,你可能想到要把名字放在閃屏,logo也放上去,就像medium的閃屏。

盡管這很無聊,但它至少告訴我這個應用程序是什么。在Medium的案例中,它在UI上保留了大量的空白,因此這是個簡單的交互界面。他們的品牌設定也很成熟,所以他們只需要展示他們的logo。
但對于我們的應用程序,這感覺有點平淡。
1作為初創(chuàng)公司,我們需要發(fā)揮更大的影響力。讓我們試著加點背景色:

我們使用像Twitter這樣的扁平藍色,用它填充屏幕的感覺會更好。我們的應用程序都是關(guān)于行動的,我們想要加深這一點。你可以通過圖片來體現(xiàn)深度,但是已有的照片沒有生氣,除非它們可以被自定義,否則它們并不是真正的品牌。
2添加深度的一種方法是采用漸變。比如,加入二級品牌顏色:

并非所有品牌顏色的組合都有效,有時你的產(chǎn)品可能沒有二級顏色。在LinkedIn中,他們使用從中心延伸的簡單徑向漸變。我們正在使用我們的二級品牌顏色右下角的漸變填充。任何一個都只是小詭計。
如果你沒有二級品牌顏色,打開 coolors.co 并輸入基色,鎖定它,然后按空格鍵直到找到你喜歡的組合。你還可以使用sketch漸變插件來簡化:
3讓我們更進一步,通過創(chuàng)建一個背景元素來增加更多深度

Laserlike具有可以組合形狀。對于我們的應用程序,我們針對使用情況加以暗示,因此我從 Nova獲取了一組圖標,這些圖標是這個虛擬應用程序的“工具”。然后我用 設計師Avadh Dwivedi 設計的超棒的Icon Flower插件將圖標從中間旋出。
小結(jié)
這是為在啟動頁加深品牌印象的四種方法。選擇哪一個取決于你自己的偏好,還取決于你們產(chǎn)品的定位以及市場定位。對于沒有品牌設定的初創(chuàng)型公司,謹慎一點:使用產(chǎn)品名稱,logo,并添加代表產(chǎn)品差異點的圖形。對于更成熟的品牌,可能會采用更簡單的方法。