【学UI设计】你不能错过的品牌在UI设计中简单实用技巧
功利主义:强调有用性/实用性而非吸引力
建立品牌的最佳机是在原型或内容引导场景。诸如启动页面,标题区域和模态之类,这些UI元素是注入一些品牌和角色的最佳选择。它们为页面的其余部分奠定了品牌基础。
但实际情况是,当我们想摆脱无聊的插入式模式,构建更具吸引力的营销方案时,我们发觉我们不具有像插画大师一样的绘画能力,或者高超的icon绘制技巧。或者当我们这些对扁平插画不是特别了解的人,不知道那些简单的启动页从哪里开始。
UX Power Tools可以为您提供一些实现品牌目标的基本方法,而无需占用您的时间。以下是一些利用颜色,图形和模式将产品品牌添加到UX工作流程的简单方法。
闪屏页品牌化
使用的工具:IconFlower插件,Colorful Gradients插件,IconJar,Coolors
这是本文中“最纯粹”的品牌UI元素,因为它的唯一目的是为产品的其余部分建立基础。我认为这种设计通常属于营销领域,没开玩笑,在你的优先级的前三个不会有它的身影。
别在Dribbble找灵感了!Dribbble就像一个闪屏页面的博物馆,它们都是宏伟的艺术品。幸运的是,你不必做一个酷炫到冒泡的闪屏。
让我们假设你正在为一个新的应用程序创建一个启动页面,比如这个app是修房子的应用。
我们称之为“Fixt”👇🏼

最简单的,你可能想到要把名字放在闪屏,logo也放上去,就像medium的闪屏。

尽管这很无聊,但它至少告诉我这个应用程序是什么。在Medium的案例中,它在UI上保留了大量的空白,因此这是个简单的交互界面。他们的品牌设定也很成熟,所以他们只需要展示他们的logo。
但对于我们的应用程序,这感觉有点平淡。
1作为初创公司,我们需要发挥更大的影响力。让我们试着加点背景色:

我们使用像Twitter这样的扁平蓝色,用它填充屏幕的感觉会更好。我们的应用程序都是关于行动的,我们想要加深这一点。你可以通过图片来体现深度,但是已有的照片没有生气,除非它们可以被自定义,否则它们并不是真正的品牌。
2添加深度的一种方法是采用渐变。比如,加入二级品牌颜色:

并非所有品牌颜色的组合都有效,有时你的产品可能没有二级颜色。在LinkedIn中,他们使用从中心延伸的简单径向渐变。我们正在使用我们的二级品牌颜色右下角的渐变填充。任何一个都只是小诡计。
如果你没有二级品牌颜色,打开 coolors.co 并输入基色,锁定它,然后按空格键直到找到你喜欢的组合。你还可以使用sketch渐变插件来简化:
3让我们更进一步,通过创建一个背景元素来增加更多深度

Laserlike具有可以组合形状。对于我们的应用程序,我们针对使用情况加以暗示,因此我从 Nova获取了一组图标,这些图标是这个虚拟应用程序的“工具”。然后我用 设计师Avadh Dwivedi 设计的超棒的Icon Flower插件将图标从中间旋出。
小结
这是为在启动页加深品牌印象的四种方法。选择哪一个取决于你自己的偏好,还取决于你们产品的定位以及市场定位。对于没有品牌设定的初创型公司,谨慎一点:使用产品名称,logo,并添加代表产品差异点的图形。对于更成熟的品牌,可能会采用更简单的方法。