你不能錯過的品牌在UI設計中簡單實用技巧

我本質上傾向于成為一個相當實用的設計師,因此我不得不學習如何在這里和那里增加一些華麗的辭藻,因為我已經將注意力轉移到產品上而不是純粹的可用性。

功利主義:強調有用性/實用性而非吸引力

建立品牌的最佳機是在原型或內容引導場景。諸如啟動頁面,標題區域和模態之類,這些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。很快就搞定了。?

其實視覺設計比我在文章里寫得更加微妙,還有很多設計高手,他們的創意令人嘆為觀止。

但有時你沒有這種資源可用,并且使用這些簡單的技巧可以幫助你將可用的產品變成可銷售的產品。


原文作者

原文鏈接

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,882評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,208評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,746評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,666評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,477評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,960評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,047評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,200評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,726評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,617評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,807評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,327評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,049評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,425評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,674評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,432評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,769評論 2 372

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,610評論 25 708
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,771評論 2 59
  • 書籍:《躍遷》 字數:781 現代競爭越來越激烈,很多人想著擁有不同的技能做保險,“斜杠青年”也應運而生。美國教父...
    mlh繆林含閱讀 258評論 0 2
  • 從發現文字的魅力開始就一直在堅持的寫些什么,盡管是在自己的日記本上, 唯一的讀者就是自己一個。但是一點也不覺得孤獨...
    北海墓碑亡閱讀 316評論 0 0
  • CSS的全稱 CSS的全稱是Cascading Style Sheets,層疊樣式表。是一種樣式表語言,用于為HT...
    Joey的企鵝閱讀 267評論 0 1