建立视觉库：设计技巧和挑战

经验丰富的设计师与初级设计师之间的最大区别之一是他/她建立的视觉库。

当涉及到UI元素和UX实践时，这就是您的头脑。 您已经建立了什么并且对它如何工作有所了解。 您的图书馆越丰富， 您可以更快地当场提出解决方案。

让我们举个例子：作为设计师， 您的任务是建立一个新网站。

什么网站？ 你可能会问。 出色地， 这就是您的所有要求。 来自同事的挑战。 哦， 还， 你有一个小时要做。 这是我们在DevriX所做的挑战，这是3600秒后的结果之一：

亚历克斯·迪米特洛夫（Alex Dimitrov）设计

没有太多时间考虑这个话题， 所以就在标题中 标头有哪些组件？

• 确定标题
• 导航
• 搜索栏
• 一些社交联系
• 一些号召性用语按钮， 主要是注册和/或创建帐户
• 一些导航使其变得有趣

这些都是从哪里来的？ 以前是空白页。 甚至没有话题， 首先。 这一切都是由于视觉图书馆是在设计师多年来构建网站的过程中一直在脑海中建立的， 应用， 以及他们周围的一切。

您可以通过几种方法设计标题？ 数百种方式。 元素种类繁多， 地形， 颜色， 叠加层 纽扣， 元素等等。 这是一个有趣的实验。

虽然最简单的答案是“进行更多设计”， 这不是一个非常令人满意的方法，仅仅是因为它还有更多的功能。 更重要的是多样性。 建立不同的设计。 解决这个问题的一种直接方法是重新设计大型网站。

这里有一些例子：

Facebook：

图片来源：Dribbble

Gmail：

图片来源：Dribbble

推特：

图片来源：Dribbble

例子太多了。 设计越复杂， 您进步得越快。 但， 究竟如何运作？

让我们以清单为例。 列表可以有一个标题来命名它， 它可以具有可以着色的图标， 设计相似或设计不同。 它也可以有较大的标题和副标题， 也许是带有数字的标签。 然后，您可以添加悬停状态， 可以选择的项目，或者 残疾人， 等等。 有了所有这些变化， 您可以进行各种各样的列表设计。

图片来源：Dribbble

能够提出这么多的配置和布局就是拥有一个良好的视觉库。 要知道您可以那样做。 就像有一个在你旁边的人说“给我画个盒子”， 然后“添加标题”，您无需考虑就可以做到。 之所以做出所有这些决定，是因为您之前已经做过。 的确， 它也遵循设计基础， 但您无法一直浏览笔记或书籍。 这就像训练AI –您需要使用 “元素的成功顺序”。

一个典型的例子是金正基（Kim Jung Gi），他是个天才，可以从任何角度制作栩栩如生的艺术品。

金正基的艺术

在接受采访时，他说他一生都在观察周围的所有物体， 试图了解它们的形状并从不同的角度绘制它们。 有了这个技能， 现在，他只需从没有任何参考的白纸开始，就可以绘制上图中看到的所有内容。

更好的说法是-他的视觉库是由于他在脑海中没有参考而无法获得的参考。 这是大师作品的一个例子， 这是争取设计师的一个伟大目标。

就像网页设计师了解按钮一样， 清单， 牌， 输入字段 弹出式窗口等等 数字艺术家了解材料， 灯光， 剪影 肌肉如何运作， 重力是如何使您失望的 并给您的身体带来压力等等。

Suzanne Helmigh的图片

这是数字艺术家如何通过尝试将其应用于球体来学习各种材料的示例。 岩浆， 木头， 毛皮， 葡萄酒， 蛋， 起司， 任何事情都是有效的。 了解它， 用你的双手去做 一点一点地印在你的大脑上。 当需要将这种材料应用于真实绘画时， 您现在可以更好地了解它的真正工作原理以及最终结果的真实外观。

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

图片来源：Artstation

现在， 让我们再次看一下您将在Web设计中经常使用的一些常见组件以及要做的一些实践：

网站上最基本的组件之一。 按钮有各种形状和大小。 您可以设置渐变， 改变颜色， 添加文字阴影， 添加边框（多个）， 添加光泽样式， 勾勒出他们的轮廓 改变形状（正方形， 圆角 圆圈）， 有些带有图标， 其他的图标则在可单击的子区域中分开。

图片来源：Dribbble

任务：设计20种不同样式的按钮。 它们之间的差异越大越好。 每一个人， 在对比方面始终遵循最佳设计实践， 平衡等等。

卡或盒子是另一个超级通用的组件。 它可以容纳任何类型的内容， 尽管一些常见的元素可能是页眉/页脚+主要内容。

图片来源：Dribbble

任务：使用内容， 形成上面的卡片， 设计10个变体， 理想情况下，尽可能地不同。 改变风格， 添加新元素， 旋转它们 使用渐变， 阴影， 图标， 和插图。 尝试去疯狂。

几乎所有博客都有某种形式的评论系统。 但是您是否认为评论组件可能并不真正包含实际评论，而更像是“状态”更改？

图片来源：Dribbble

任务： 上面的示例仅说明了这一点。 现在， 尝试提出与评论组件相关的任何内容-用户的评论， 任务更新状态（在评论区域中）， 像聊天一样的评论， 任何事物。 7-10个变化之间的任何值都是一个好数字。 再次–尝试使它们保持不同。 研究更多， 找到想法， 浏览网站。

这些练习的目的是找到以您未曾使用过的新方式来处理常见元素的方法 知道大约之前。

滑块是许多前端开发人员讨厌的组件之一，因为它们会产生大量问题，并且可能在后台运行大量JavaScript。 但这并不意味着您不需要做一个。

图片来源：Dribbble

任务：浏览网络和各种设计，以了解有关不同布局和方法的更多信息。 也许看看JS库，他们在其中做幻灯片以查看所拥有的内容。 从那里， 设计10-15种不同的滑块设计。 再说一次-尝试使每个设计与以前的设计尽可能不同， 不要只是使用一些细微的增强。

输入表单是几乎所有网站的另一个核心部分。 他们感兴趣的是他们接收信息而不是输出信息。

图片来源：Dribbble

任务：您在这里的工作是想出某人可能在网站上需要的最奇怪的信息类型。 上载PDF或PSD（选择一个）， 信用卡信息， 添加饼干的食谱， 计算涂料混合比， 创建汽车经销商配置器。 想到的一切 越独特越好。 再次继续浏览网站以查看实际的解决方案。 用独特的设计设计至少10种不同的独特形式。

以设计师的身份建立设计库是改善工作流程的主要踏脚石之一， 快速制作设计， 为您的客户解决问题， 并提出独特而巧妙的方法来改善用户体验。 当您开始浏览并仔细查看网络上的每个元素时， 您开始考虑用户的操作， 他们所看到的 以及如何加以改善。

将以上任务用作家庭作业将对您有所帮助 填补你的投资组合。 不要只局限于上面提到的5个任务， 出去那里 浏览网站， 重新设计， 研究他们， 并继续发展您的设计感并建立自己的视觉库！

我们确实提供网络开发服务，包括定制设计工作， 建立WordPress主题， 为成功的组织编写WordPress插件编码并实施完整的解决方案。

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。