评论

评论

这篇文章还没有任何评论。快来成为第一个评论者吧!

闲谈实验室#2: 设计应该懂得前端知识

闲谈实验室

设计应该懂得前端知识

2019年11月21日 | IN CHATLAB | BY UX·range

内容简介:

本期内容的问题来自于一个UI设计朋友对我的提问,问我为什么和前端小哥沟通这么困难,明明这么简单怎么他就是不理解,我从基础css原理展开,阐述了一种“交流式”的编码总结。

延伸阅读:CSS、HTML、JavaScript、模块化

预计阅读时间:18分钟

正文:

1.问题来源

本期内容的问题来源一个设计朋友对我的提问,问为什么她和前端交流很困难,经常分享出去的点,前端就是get不到。导致最后开发人员总是“重新设计”她的设计。问同样的问题我有没有遇到过,我是怎么和开发人员进行交流的,是不是需要做个demo给前端看。除了做demo这件事情太耗费时间,对于大部分小需求来说,我力不从心外,我由这个问题想到了几个问题:

  • 设计语言和编程交流的差异性
  • 编程的“交流式”该如何进行
  • 应对这样的交流我们做何对策

2.交流差异

首先第一个问题,因为所处职业的不同,设计与开发的交流经常鸡同鸭讲,开发人员也会想当然的“重新设计”,这时候不得不学习一些编码知识。设计人员学习代码的原因很多,其中最重要的是设计没有落地前都是空中楼阁,而在设计落地这一过程中,开发经常会把设计改的面目全非。

这是一个来自一个从事设计和开发团队多年的人的观点,也是现在很热门的一个观点。

不,设计师不应该学习编码,但是设计师应该学习如何“交流式”编码。

有一个类似的场景:如果你要去国外游玩,这时候学会当地购买东西的简单短语(诸如:您好,柚子先生,我需要一个烤肉饭,谢谢)会对你很有帮助。代码也是一样的,你不用很流利的将其描述出来,你只是需要能顺利的完成与开发的交流就可以了。原因如下:

  • 想要流畅而又优雅的写代码需要几年时间的沉淀。对于大部分人来说,这并不是真正的附加技能。
  • 作为一个设计,本职也是设计,那么你需要花费更多时间去磨练自己本职的手艺,产出更完美的设计作品,然后找到同样的需要设计的开发作为伙伴。一起完成这个项目。
  • 就像学习一门外语中的一些关键短语一样,它可以帮助您去查阅文献,去那个国家旅游,并且也表示对所访问国家的尊重-学习代码中的一些关键词也是如此。

3.交流基础

为了避免设计与开发的交流变成毫无效率的一个对话,这里就需要一个共同的标准,设计了解代码或者开发了解设计语言。这里最好还是选择设计了解代码这一条路,因为代码不会欺骗你,在设计师了解了代码之后才会明白有哪些是没办法实现的,哪些实现成本比较高,从而反哺到你的设计之中,让你的设计更接地气。那么代码里的几个常用“单词”有什么?

了解什么是“ Margin(边距)” 和 “ Padding(填充)”

“ Margin ” 是指元素周围的那一块空间;“ Padding ” 是指元素内部的那一块空间。使用这些术语,最好就是直接读出来,不要试图将其翻译成中文(像上面的小标题一样,这只是帮助你理解的),也不要将其换成什么诸如:“装订线”或者“空白块”这样的设计术语。

同样的,颜色描述为十六进制或RGB取决于您的开发人员的开发喜欢或您的设计规范手册。

margin 是元素之间的空间,padding 是元素周围的空间

了解如何使用浏览器的开发工具“检查器”

让我们打开Chrome浏览器使用一下。

在菜单栏中点击 “视图” > “开发者” > “开发者工具” 让我们打开Chrome浏览器使用一下。

在Chrome浏览器中位置:“视图” > “开发者” > “开发者工具”

您正在查找的“CSS样式”可以在显示边距和填充的彩色框旁边找到。

在该区域的顶部有一个复选框,显示“全部显示” —将其打开,以便您可以看到影响设计的每种样式。

在Chrome开发者工具:显示所有

现在,这个列表确实很长,让人看得头有点大,充满了您可能不认输的东西(是不是虽然每个英文字母都认识,但是组合在一起可能就不认识了),没关系。这里面的大多数你都不需要知道。如果您已经开始阅读列表了,您可以看到很多对你有用的内容,例如有关字体的部分,如下图。

用设计师使用软件的思维看一下-您可以看到字体大小为13px,字体系列为系统字体。

到这里,想必您已经知道如何精确检查要查看的字体和大小,因此当您觉得网站开发的是 “ Arial ” 字体,而开发人员向您保证它是 “ Roboto ” 的时候,你就可以自己去看看是不是像开发说的一样。

4.更进一步交流

使用开发者工具后,您可以直接在标签中输入内容以更改值并查看其外观。您在这里所做的任何更改都只会发生在您的浏览器中。如果您重新加载页面,它会将所有内容重置为来自服务器重新传输过来的内容。随你乱搞,无论你怎么乱写,你不会影响到浏览器以外的任何事物。这一次,我们不再关注整个页面的CSS,而是关注单个元素。

将鼠标悬停在该元素上,然后右键单击它。您将看到 “ 检查 ” 选项,然后选择该选项。

将鼠标悬停在元素上,单击鼠标右键,然后选择“检查”

现在,此元素是在“检查器”面板中显示的元素。看到字体大小了吗?假设我们要使字体变大。您可以直接在面板中进行更改。在这里,我将其设置为16px。

在浏览器中修改样式是进行细微调整然后返回给开发人员的最佳方法,然后说:“您将使字体大小为16px,颜色为:#D71920 ” ,这比用 “ 使其变大并变大 ,颜色变红。”更好。

在检查器中,有一些很有用的小技巧:

进阶技巧1: 更改任何样式

“样式”部分的顶部框标记有个“ element.style ”,这是放置要测试的东西的最简单的位置。

是否在列表中找不到相应的字体标签来放大字体?在“ element.style ”模块处直接输入font-size:24px。

重要的是要知道,当您在此框中键入内容时,必须使用CSS语言格式。那就是“ property”,然后是一个冒号,然后是您想要元素执行的操作- “value”,然后以分号结尾。

在此示例中,“ font-size”是属性,“ 24px”是值。整个作品称为“声明”。学习这些内容的最佳方法是从“显示所有样式”中复制它们。您需要了解的内容会坚持存在。我还将在下面的“草图”那一部分中向您展示如何找到它们。

进阶技巧2: 完全隐藏内容

要完全隐藏某些内容,请使用以下声明:“ display:none; ” 。将其放在element.style部分中。

进阶技巧3: 覆盖样式

如果将样式放入element.style中,但没有任何反应,则意味着存在某些阻止样式使用的情况。这就是所谓的样式替代。通常,您可以通过在值标签中添加 “! important” 来覆盖它。(这个语句需要在分号前加入)

进阶技巧4: 更改文字

让我们看看如何更改文本;仍然是在检查器中,在“style”模块上的“html”部分中完成了此操作。

将鼠标悬停在要更改的文本上,然后右键单击并选择“检查器”。

这次,我们将编辑HTML而不是CSS。您右键单击的部分将在HTML中突出显示。您可以打开和关闭灰色箭头,以更深入地研究代码。

看到上面那个写着“图片”的地方了吗?假设我们想要有更多文本内容。我们可以双击并输入新内容。比如输入下我之前的博客网址:“ https://xpeople.design 

点击回车,look!你的新文本就出现在界面上了。

改完这些记得要截图,并将更改好的内容发送给开发小哥哥

5.编辑的提取“关键词”

在这段内容中,我们将以Sketch为事例,事实上所有的新一点的UI设计工具都具有这项功能。

我们先在Sketch中创建内容,然后右键单击该元素,然后选择“ 拷贝CSS属性”

现在,将此信息粘贴到某处,并查看所拥有的内容:

蓝色按钮的CSS属性

现在,你可以您可以了解这些与您的工作相关的样式。现在,为了好玩,您可以将这些样式粘贴到element.style中,如果您要进行一些调整并查看它的实时效果。

粘贴 CSS 到 element.style

请注意,在element.style部分中,我从Sketch粘贴了CSS属性后,添加padding-right:10px;padding-left:10px;padding-top:5px;padding-bottom:5px;来在按钮中的文本周围添加空间。

6.提交更改

有很多办法可以做到这一点,这取决于你们的沟通方式。当然,当你的伙伴为了完善你的设计而放慢时间时,你需要保持礼貌,和对其保持尊重。我能学习这些代码知识并且拥有跨职能的能力,也是因为我在早期工作中和开发人员合作,细心了解他们,他们也很愿意解释他们在做什么,以及怎么做。

我更喜欢将我的所有更改都标记在一个并排的比较中,然后与开发人员修改后的进行比较。

一些设计人员/开发人员更喜欢屏幕共享并将像素推在一起。

无论做什么,都要确保对话与更改请求同步进行。这将帮助你学习,如果你在设计中做的事情,不能被实现,例如,代码中最小的单位是1px,所以如果你做0.25px分割线,开发实现不了你的设计。如果你使用的是正片叠底或者其他类似ps的叠加方式,这些东西也在代码里面是没办法实现的。

25 0