我本质上倾向于成为一个相当实用的设计师,因此我不得不学习如何在这里和那里增加一些华丽的辞藻,因为我已经将注意力转移到产品上而不是纯粹的可用性。
功利主义:强调有用性/实用性而非吸引力
建立品牌的最佳机是在原型或内容引导场景。诸如启动页面,标题区域和模态之类,这些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。很快就搞定了。
其实视觉设计比我在文章里写得更加微妙,还有很多设计高手,他们的创意令人叹为观止。
但有时你没有这种资源可用,并且使用这些简单的技巧可以帮助你将可用的产品变成可销售的产品。
原文作者