建立视觉库:设计技巧和挑战
已发表: 2020-12-17经验丰富的设计师与初级设计师之间的最大区别之一是他/她建立的视觉库。
什么是视觉库?
关于UI元素和UX实践,这就是您的头脑。 您已经建立了什么并且对它如何工作有所了解。 您的图书馆越丰富,就地解决方案的速度就越快。
让我们举个例子:作为设计师,您的任务是建立一个新网站。
什么网站? 你可能会问。 好吧,这就是您的所有要求。 来自同事的挑战。 哦,还有,你有一个小时要做。 这是我们在DevriX所做的挑战,这是3600秒后的结果之一:

Alex Dimitrov设计
没有太多时间考虑这个主题,因此它直接出现在标题中。 标头有哪些组件?
- 确定标题
- 导航
- 搜索栏
- 一些社交联系
- 一些号召性用语按钮,主要用于注册和/或创建帐户
- 一些导航使其变得有趣
这些都是从哪里来的? 以前是空白页。 首先,甚至没有一个话题。 这一切都是由于多年来在网站,应用程序及其周围所有内容的构建过程中设计师一直在脑海中创建的视觉库而发生的。
您可以用几种方法设计标题? 数百种方式。 元素,地形,颜色,覆盖,按钮,元素等等种类繁多。 这是一个有趣的实验。
如何建立视觉库
虽然最简单的答案是“进行更多的设计”,但这并不是一个非常令人满意的答案,仅仅是因为它还有更多的余地。 更重要的是多样性。 建立不同的设计。 解决此问题的一种直接方法是重新设计大型站点。
这里有一些例子:
脸书:

图片来源:Dribbble
Gmail:

图片来源:Dribbble
推特:

图片来源:Dribbble
例子太多了。 设计越复杂,进度越快。 但是,它究竟如何工作?
让我们以清单为例。 列表可以包含一个为其命名的标题,它可以具有彩色,设计相似或设计不同的图标。 它也可以具有较大的标题和副标题,可能带有数字的标签。 然后,您可以添加悬停状态,可以选择或禁用的项目,等等。 通过所有这些变体,您可以进行各种各样的列表设计。

图片来源:Dribbble
能够提出这么多的配置和布局就是拥有一个良好的视觉库。 要知道您可以那样做。 这就像在您旁边有人说“给我画个盒子”,然后说“添加标题”,然后您不假思索地做到了。 之所以做出所有这些决定,是因为您之前已经做过。 的确,它也遵循设计基础,但是您无法一直接触笔记或书籍。 这就像训练AI一样–您需要使用“元素的成功顺序”来构建模式。
所有视觉艺术家都需要建立图书馆
一个典型的例子就是金正基(Kim Jung Gi),他是个天才,可以从任何角度制作栩栩如生的艺术品。

金正基的艺术
他在一次采访中说,他一生都在观察周围的所有物体,试图理解它们的形状并从不同的角度绘制它们。 有了这项技能,他现在可以简单地从一张没有任何参考的白纸上绘制出您在上图中看到的所有内容。
更好的说法是-他的视觉库是没有参考的,因为他在脑海中可以找到他的参考。 这是大师作品的一个例子,这是争取设计师的一个伟大目标。
就像网页设计师了解按钮,列表,卡片,输入字段,弹出窗口等等的方式一样,数字艺术家也了解材质,灯光,轮廓,肌肉如何工作,重力如何使您下沉以及对您造成压力身体等等。

Suzanne Helmigh的图片
这是数字艺术家如何通过尝试将其应用于球体来学习各种材料的示例。 岩浆,木材,毛皮,酒,鸡蛋,奶酪,任何有效的东西。 学习它,用手做它,将它逐渐烙印在您的大脑中。 当需要将这种材料应用于一幅真实的绘画时,您现在可以更好地了解它的实际工作原理以及最终的效果。

这是一个示例,其中皮肤,皮革,金属和头发都被用来生产外观非常漂亮的最终产品。 对这些材料缺乏基本的了解可能会使金属看起来像塑料,像皮革的纸等。

图片来源:Artstation
网页设计组件的挑战
现在,让我们再次看一下您将在Web设计中经常使用的一些常见组件以及要执行的一些实践:
1 –按钮
网站上最基本的组件之一。 按钮有各种形状和大小。 您可以设置渐变,更改颜色,添加文本阴影,添加边框(不止一个),添加光泽样式,勾勒轮廓,更改其形状(正方形,圆角,圆形),其中一些带有图标,另一些带有图标分隔可点击的区域。

图片来源:Dribbble
任务:设计20种不同样式的按钮。 它们之间的差异越大越好。 对于每一个,都要在对比度,平衡性等方面遵循最佳设计实践。
2 –卡
卡或盒子是另一个超级通用的组件。 它可以容纳任何类型的内容,尽管某些常见元素可能是页眉/页脚+主要内容。

图片来源:Dribbble
任务:使用内容,在上面形成卡片,设计10个变体,最好是尽可能不同。 更改样式,添加新元素,旋转它们,使用渐变,阴影,图标和插图。 尝试去疯狂。
3 –评论
几乎所有博客都有某种形式的评论系统。 但是您是否认为评论组件可能并不真正包含实际评论,而更像是“状态”更改?

图片来源:Dribbble
任务:上面的示例仅说明了这一点。 现在,尝试提出与注释组件相关的所有内容–用户的注释,任务更新状态(在注释区域中),类似聊天的注释等。 7-10个变化之间的任何值都是一个好数字。 再次–尝试使它们保持不同。 研究更多,找到想法,浏览网站。
这些练习的目的是找到以您以前不知道的新方式处理常见元素的方法。
4 –滑杆
滑块是许多前端开发人员讨厌的组件之一,因为它们会产生大量问题,并且可能在后台运行大量JavaScript。 但这并不意味着您无需制作一个。

图片来源:Dribbble
任务:浏览网络和各种设计,以了解有关不同布局和方法的更多信息。 也许看看JS库,他们在其中做幻灯片以查看所拥有的内容。 从那里开始,为滑块设计10-15种不同的设计。 再一次–尝试使每个设计与以前的设计尽可能不同,而不仅仅是使用一些小的增强。
5 –输入表格
输入表单是几乎所有网站的另一个核心部分。 他们感兴趣的是他们接收信息而不是输出信息。

图片来源:Dribbble
任务:您在这里的工作是想出某人可能在网站上需要的最奇怪的信息类型。 上载PDF或PSD(选择一个),信用卡信息,添加Cookie配方,计算涂料混合比,创建汽车经销商配置器。 任何想法,越独特越好。 再次继续浏览网站以查看实际的解决方案。 用独特的设计设计至少10种不同的独特形式。
概要
以设计师的身份建立设计库是改善工作流程,快速生成设计,为客户解决问题以及提出独特而巧妙的方法来改善用户体验的主要踏脚石之一。 当您开始浏览并仔细查看Web上的每个元素时,您将开始考虑用户的操作,他们看到的内容以及如何进行改进。
将以上任务用作家庭作业,将有助于您填补您的投资组合。 不要把自己局限于上述5个任务,去那里,浏览网站,进行重新设计,研究它们,然后继续发展设计感并建立自己的视觉库!