你不能错过的品牌在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阅读 210,978评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,954评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,623评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,324评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,390评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,741评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,892评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,655评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,104评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,254评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,834评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,734评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,699评论 2 59
  • 书籍:《跃迁》 字数:781 现代竞争越来越激烈,很多人想着拥有不同的技能做保险,“斜杠青年”也应运而生。美国教父...
    mlh缪林含阅读 248评论 0 2
  • 从发现文字的魅力开始就一直在坚持的写些什么,尽管是在自己的日记本上, 唯一的读者就是自己一个。但是一点也不觉得孤独...
    北海墓碑亡阅读 297评论 0 0
  • CSS的全称 CSS的全称是Cascading Style Sheets,层叠样式表。是一种样式表语言,用于为HT...
    Joey的企鹅阅读 256评论 0 1