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