srcmini本文概述
即使他们可能在同一个项目和产品上工作, 开发人员和设计师也常常彼此孤岛。开发人员通常将设计视为次要的事情, 与产品的功能相比并不重要。
这种想法可能不利于开发人员与设计人员之间的关系。对设计没有基本的了解会阻碍开发人员的职业生涯, 或者仅仅因为他们没有设计师就阻止他们从事项目。
为什么开发人员应该学习设计
尽管设计和开发通常被认为是独立的学科, 但有些人已经掌握了这两个学科。即使某人只对成为设计师或开发人员感兴趣, 而对两者都不感兴趣, 但至少学习其他学科的基础知识还是很有价值的。
开发人员可能要学习设计, 或者至少要开发设计知识的基础有两个原因。
首先, 小型团队可能没有专门的设计师。此外, 那里的开发人员想完全自己解决项目, 他们负担不起聘请设计师的费用(或想花钱在其他地方)。学会设计自己的产品, 至少足够好, 直到可以聘请设计师, 这是一种宝贵的资源。
开发人员学习设计的另一个重要原因是, 他们可以与设计师更有效地合作。对于设计人员来说, 他们为网站或应用程序交付了完整设计的文件(他们希望在最终产品中具有完美的像素效果)感到非常沮丧, 而他们发现开发人员编码后, 他们的设计已发生了巨大变化。
如果开发人员不了解设计的基础知识, 他们可能会忽略一些小细节, 这些小细节会使UI特别易于使用, 并且无意间破坏了项目的用户体验。当设计师寄回大量修改意见时, 它可能会拉紧开发人员与设计师之间的关系, 更不用说减慢项目的完成速度了。
为了改善跨学科团队之间的关系和团队合作, 开发人员将通过学会用”设计师的眼”看设计, 而不是纯粹从开发的角度看待设计, 从而对自己有所帮助, 掌握该技能将极大地改善他们的项目。
精心设计心态
经常, 学习设计的开发人员过多地关注他们喜欢并希望模仿的设计的美感, 而不是支持这些设计的基本原理。他们看到诸如按钮的颜色和大小, 特定的字体或使用边框的方式之类的东西, 却不了解这些选择背后的原因。
可以这么说, 他们开始在墙壁上喷涂油漆并装饰空间, 却不了解正在装饰的空间的目的(甚至无法确保完成水暖和电力工作)。
重要的是要理解和尊重设计师为什么要做出决定的背后原理。设计的任何新手都必须牢固掌握构成良好设计的原理和理论(如格式塔原理和基本的视觉层次结构), 然后才开始潜入并开始在各处喷涂涂料。
也就是说, 无论新设计师是否具有开发背景, 他们都会陷入理论上的泥潭。他们花费大量时间来学习和思考问题, 以至于无法真正应用所学知识。
设计师和开发人员都倾向于完美主义者。但是在设计完美之前(因为它们可能永远不会)推出设计对于该过程很重要。尤其是新设计师, 需要克服他们的不安全感, 将他们的工作付诸实践, 并从收到的反馈中学习。
真正学习设计的最好方法之一就是尝试重新创建其他设计。弄清楚什么有效和什么无效, 弄清楚为什么某个设计吸引人是新设计师或开发人员可以学习的最有价值的技能之一。在现有设计上进行独特的旋转在业界很常见(Dribbble的”反弹”功能证明)。
LEO设计的草根名片(右)是Aiste制作的草根徽标动画(左)的Dribbble Rebound。回弹经常用于将相关项目链接在一起。
在浏览器中设计
许多设计师拒绝直接在浏览器中进行设计, 因为这通常意味着他们需要至少编写基本的HTML和CSS代码。这就是为什么它通常非常适合开发人员进行设计的确切原因-他们已经很容易编写代码。
有些工具可以帮助你在浏览器中进行设计, 并且可以使设计人员和开发人员的生活更加轻松。简单的浏览器插件可用于从选择调色板到浏览其他网站的CSS和HTML代码的所有内容。
还有一些更复杂的工具, 例如Figma, 就像浏览器中的功能齐全的设计工具一样。 Figma允许设计人员进行协作, 将资产发送给涉众(甚至让他们更改设计的内容和副本), 并允许开发人员实时访问实际的设计。对于想要创建可以随时间扩展的设计和设计系统的开发人员来说, 这是一个很好的选择。
Webflow是开发人员可能喜欢的浏览器设计中的另一个选项。尽管设计界面是可视的, 但是导出的代码是干净的, 语义CSS和HTML, 开发人员会欣赏它们(并非所有可视化设计工具都可以导出干净的代码)。 Webflow包括用于设计和布局的工具, 以及内置的CMS和eCommerce工具以及托管选项。
Webflow具有易于使用的视觉设计界面。
颜色, 版式和布局的使用
在深入探讨颜色, 版式和布局的视觉原理之前, 必须先讨论基本的可用性。如果无法使用, 世界上最令人赏心悦目的设计将毫无用处。
一致性或可预测性是最重要的可用性原则之一。设计应具有足够的可预测性, 以使用户能够直观地了解如何使用它们。例如, 用于可单击链接的蓝色带下划线的文本, 完整且带有良好标签的导航菜单等。元素, 版式和配色方案之间的间距也应保持一致。
在每个设计项目中应考虑的其他可用性原则包括诸如错误预防(以及发生错误时的提示性错误消息), 熟悉的语言(使用人们惯用的语言, 而不是”可爱的”或可能不清楚的创造性替代方法)之类的内容。 ), 灵活性和效率以及易于获得的帮助。 Nielsen Norman Group还有其他可用性试探法, 也应牢记。
应当在整个设计和开发过程中进行可用性评估, 以确保产品按照设计和开发团队的预期方式运行, 并且不会使用户感到困惑。启发式评估包括将产品应遵循的预定义设计原则列表与实际产品进行比较, 以查看发生偏差的位置(然后修正这些偏差)。
一旦与手头产品相关的可用性得到了透彻的理解, 设计师-开发人员便可以着手设计的更多视觉化方面。
Susan Weinschenk和Dean Barker(Weinschenk和Barker, 2000年)从许多来源(包括Nielsen, Apple和Microsoft)研究了可用性准则和启发式方法, 并生成了这套20种可用性启发式方法进行检验。
基本色彩理论
颜色理论是视觉设计中最复杂的方面之一。稍微改变阴影可以完全改变颜色的视觉效果和情感效果。这是许多从事该行业多年的设计师仍在色彩方面挣扎的原因之一。
尽管已经写了许多关于色彩理论的书, 但设计师开发人员可以学习一些非常基本的原理来上手。将它们与任何可用的多种颜色设计工具结合使用, 就可以轻松创建令人愉悦的调色板。
首先, 暖色, 冷色和中性色之间的差异。暖色包括红色, 橙色和黄色。暖色通常会充满活力和活力。冷色包括绿色, 蓝色和紫色。这些颜色通常较为平静和放松。
色彩理论是设计中非常重要的一部分, 即使是经验丰富的设计师有时也会遇到挑战。
中性包括白色, 黑色, 灰色, 棕色和米色。在暖色或冷色中添加白色, 黑色或灰色会改变其含义和影响。白色会使颜色变浅, 并且通常使效果减弱或增强(例如, 紫色被认为是一种神秘的富丽堂皇的颜色, 而紫丁香通常与春天和幸福有关)。灰色将使颜色静音并减轻其影响。黑色会使颜色变暗, 并使它们显得更保守(考虑明亮的蓝色和海军蓝色等颜色的不同影响)。
一旦设计师对颜色的含义有了基本的了解, 他们就可以使用Coolors, Design Seeds或Colormind之类的工具为他们的设计提供最终的, 协调的调色板。
使用HSL色彩
当设计师想到卷筒纸颜色时, 他们通常会考虑十六进制值。尽管这已成为Web颜色的行业标准, 但开发人员可能会发现使用HSL颜色值更有意义。
对于大多数人(包括设计师)而言, 十六进制值似乎彼此没有关联。看起来非常相似的两种颜色可能具有完全不同的十六进制值。例如, ＃68B4D4和＃92C8E0是相当相似的蓝色阴影(一个仅比另一种稍微更亮和更浅), 但是它们的十六进制值没有明显的相关性。
很难看到颜色的外观与十六进制值之间的关系。
但是, 它们的HSL值显示了它们之间的密切关系：＃68B4D4变为HSL(198、58％, 62％), 而＃92C8E0变为HSL(198、56％, 73％)。序列中的第一个数字(在这种情况下为198)表示特定的色相。第二个数字是饱和度的百分比(颜色的亮度或鲜艳度)。第三个数字是颜色的亮度(或增加的白色)的百分比。
很容易看出颜色的外观与其HSL值之间的相关性。
由于使用HSL和hex可以很容易地看到颜色值之间的相关性, 因此开发人员经常发现使用HSL通过代码操纵颜色非常容易。
排版原则
排版是另一个可以使经验丰富的设计师绊倒的领域。但是像色彩理论一样, 有一些很棒的工具可以提供帮助。
印刷层次结构是设计师-开发人员应该学习的首要内容之一。设计中不同类型元素之间的关系对于使该设计更加实用至关重要。
至少, 一个设计应具有三个印刷层次结构级别：标题, 字幕和正文字体。标题应在视觉上最突出, 然后是字幕, 然后是应具有较高可读性的正文字体。
许多新设计师在创建层次结构时过于关注字体大小, 而对字体样式却不够。有时, 例如, 不是使标题比字幕大得多, 而是可以使标题变为粗体或大写, 而使标题保持标题大小和正常粗细。颜色还可以用于区分字幕和标题, 以及那些元素和正文。
组合不同的字体也会使许多设计师感到困惑, 但这是创建视觉层次结构的一种常用方法。它们包括选择互补字体(相反通常会吸引人, 但一定程度上, 必须根据随时间变化的直觉来确定字体的组合方式), 选择合适的字体(请勿在法律文件上使用Comic Sans, 因为例如, 或用于较小体型的字体无法显示的显示字体, 并在字体之间形成对比(不要使用两个非常相似的字体)。
Luminary以一种非常令人愉悦的方式将衬线字体和无衬线字体组合在一起。
组合字体的另一种简单方法是从较大的字体系列中选择字体。甚至还有一些家庭, 包括显示器, 衬线和无衬线版本, 这些版本可以很好地配合使用(例如Eaves夫人和Eaves先生, Fedra或Museo和Museo Sans)。这是开始真正尝试组合字体的最简单方法, 因为它们被设计为看起来很不错。
在使用较大的印刷层次结构(例如添加H1, H2, H3, H4等)时, 在印刷规模中遵循某种原因非常重要。斐波那契数列是一种可能的起始刻度, 尽管还有其他已建立的印刷刻度。
两种版式(以及通常在设计版式中)都使用的一种常见比例尺包括4、8、16、24、36、48、72、108等。这些图可以通过多种方式组合在一起, 以创建外观令人满意的设计比例(例如, 将24像素的字体与36像素的行高结合在一起)。
基本布局原则
自网络开始以来, 就有一些布局模式已成为”标准”。示例包括位于顶部, 左侧或右侧边栏的主导航以及其他信息或导航选项, 并且正文内容占据了空间的其余部分。
尽管与该基本布局存在一定的偏差(不是顶部导航, 没有侧边栏, 两个侧边栏等), 但是在创建新布局时这通常是一个相当安全的选择。偏离此基本模式只能有目的地进行, 尤其是对于那些新手和缺乏经验的设计师开发人员而言。
创建可预测的设计(通常意味着一致)对产品的可用性有很大帮助。仅当可用性收益大于损失时, 才应偏离用户使用产品时的期望。
线框是创建跨多个页面保持一致的设计的重要部分。
对于同一类型的内容, 最好不要在一页上使用72像素的粗体蓝色标题, 然后在另一页上使用36像素的红色标题, 因为布局的一致性是关键。同样, 标题和正文之间的间距(填充)在一个区域中为36像素, 然后在另一区域为32像素, 将造成视觉上的不一致。尽管一个人可能不会立即理解为什么差异会引起轰动, 但他们会感觉到。
与上述印刷比例相似, 比例为4、8、16、24、36、48、72或108像素的间距元素将创建视觉上令人愉悦的设计。在元素之间使用足够的空间是一个好主意, 让它们有呼吸的空间；较新的设计师通常会避免使用空白空间, 并且最终可能会导致外观看起来混乱而压倒性的设计。
有人可能会质疑为什么秤会按原样隔开。为什么前两个数字之间只有4个像素的差, 而后两个数字之间却有36个像素的跳动？原因很简单：在小范围内, 可以容易地识别出4像素的增加(8像素是4的两倍, 可以很容易地看出)。但是, 数字越大, 很难看到72像素和76像素之间的差异。随着大小的增加, 较大的差异更容易看到。
一致的间距是基于网格的设计方法如此流行的原因之一。从网格开始(通常是12列, 16列或24列), 可以为设计人员提供一个可以在其中工作的框架, 该框架可以使所有内容保持一致。列之间的内置装订线还有助于确保不同的设计元素及其中的内容具有一定的呼吸空间。
总结
设计师和开发人员都应专注于扩展技能, 以进一步发展自己的职业。开发人员花在学习设计基本原理上的时间将在将来与设计师合作或创建自己的产品时节省时间。
对设计的基本原理(可用性原理, 颜色理论, 版式, 布局和UX)的理解也将使开发人员在开发方面做得更好。当他们知道为什么设计师做出选择时, 开发人员可以更好地与设计师合作, 创造出真正的明星产品。
• • •
在srcmini设计博客上进一步阅读：
- 设计原理及其重要性
- 设计师应该知道多少编码？
- 各种可能性：Go-To UI颜色指南
- 这些成功的交互设计原则可提升你的用户体验
- 设计基础–视觉层次结构指南(带有信息图)
评论前必须登录！
注册