Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

写给设计师的编程指南:学习前端知识

by
Length:MediumLanguages:

Chinese (Simplified) (中文(简体)) translation by Louis Wong (you can also view the original English article)

在本篇文章中,我们将广泛了解一下前端,学习前端是怎样融入设计师更广阔的前景。以下是我们要介绍的:

  1. 理解什么是前端技术栈
  2. DOM的限制
  3. 注意事项
  4. 理解事件,状态和响应

理解什么是前端技术栈

页面渲染有时候会是一个很难的任务。 考虑到各种设备,浏览器,访问点,带宽,编程语言和开发环境,构建一致的网络体验是很难的。感谢浏览器和标准制定机构(W3C),我们在可能的情况下能够控制某些核心,这些核心就是HTML,CSS和JavaScript。

综上,我们将这些核心称之为前端技术栈。每一种语言都有它自己的作用,开发人员花费大量的时间确保它们在不会混淆的情况下融合。 所以,让我们从这里开始。现代浏览器,在市场上可以买到的:像Safari,Edge,Chrome和Firefox只能理解HTML,CSS和JavaScript。只有这三种语言。除了Javascript,HTML和CSS都是静态语言。我的意思是你并不一定要用它们中的任何一个来编写程序因为实际上并没有真正的逻辑可写(有些小小的例外)。然而近年来爆发的JavaScript就是一种编程语言。

过去当我向学生们解释前端技术栈的时候,我发现将其和人类的身体作比是一种有效的方法。 考虑到我们是在原子设计模式的背景下讨论,碰巧包含在其中了。

身体,昨天拍摄

HTML:超文本标记语言

HTML是骨架。 骨架决定了你的结构和姿态。从这样的结构中可以得到某种意味。 最开始是头部,然后是颈部,胸腔,臀部,腿,脚,最后到脚趾。

HTML骨架

我刚刚描述的元素顺序是典型的人类结构。 如果是鲸鱼或者老虎会有所不同。因此,HTML在用于博客,电子商店和轮胎时是不一样的。HTML就是向浏览器用一种有意义的方式描绘网页是怎样的。 当谷歌的算法大体上能够读取这种结构并获得页面的描述时,这已经可以算上是一门科学了。

记住,HTML为你的网络体验提供了结构。

CSS:层叠样式表

CSS就是你的外表。 发色,瞳色,肤色,毛发,长胳膊,肌肉,脚趾长度等。甚至是你的发型,或者是你的妆扮。

它唯一的目的就是有些无聊平淡的HTML变得有风格。 如果我们仅仅关心骨架,那么吸引力就成了问题。这同样适用于网络体验。

JavaScript

JavaScript就是你的行为举止和反应。你指关节的敲击,眨眼,微笑,咳嗽,走路的方式,是否跳跃,所有的这些都关乎交互。重要的是,当你关闭浏览器时,所有的都会被遗忘(一般来说),所以我们可以把JavaScript当做某段“记录”中与一个网页产生的交互行为。想想点击弹出窗口或者导航栏下拉菜单。

一个人正在走路

此时,你们中的某些人可能会问大脑或者“逻辑”在哪里,我们接下来将会讲解这个。这个部分最重要的是HTML,CSS和JavaScript在浏览器中协同工作来创造一种“静态”的网络体验,然后我们回到原子设计模式对其进行改进。

DOM的限制

DOM是文本对象模型。DOM是用户激活的记录中HTML,CSS和JavaScript共存的结果。

DOM是源代码的代表,理解它和它的限制很重要。你在计算机上用HTML,CSS和JavaScript文件编写的代码就是源代码。它和你在DOM里看到的东西十分类似,但并不是同一个。DOM是充满了源代码的文件排列组合后的结果。当浏览器请求文件时,这些语言就被翻译,网页诞生了。如果你更改源代码,则需要刷新源文件以在浏览器中显示更新后的版本。

每种语言都有自己的限制。例如,CSS没有很强的排版引擎。这意味着它要在浏览器中生成复杂布局比较困难。 HTML没有布局功能,而且只能为网页提供一种架构。 JavaScript作为一种编程语言,能够使用HTML和CSS。 由于我们使用三种技术栈来创建网站的前端,它们需要相互配合,还要符合某些额外的限制因素。这些额外的因素是指不同的浏览器,设备,操作系统,浏览器版本等等。DOM在所有浏览器类型和分销商那里都或多或少相同,但是为了一致的网络体验也有很多规则要遵守。

注意事项

CSS使用了一种叫做盒子模式的概念。盒子模式有以下属性:

  • 内容:实际内容区域,可能会填写文本。
  • 留白:围绕内容区域的部分和填充的背景。
  • 边框:留白外的边。
  • 边界:在边框之外,用来设定元素之间的距离。

下图的结构有助于更好地理解

山坡上的小盒子

当设计一个形状比如正方形时,它真正的结构包含了以上的元素。

机会永远不会眷顾你

是的,五列网格对开发人员来说很不友好。平衡比好运更容易相处。开发人员倾向于使用Bootstrap或者UIKIT之类的前端框架,它们自带10列网格,12列网格,甚至更多。问问开发人员打算使用什么框架是个好主意,以便使你的设计更配合HTML和CSS。

水,而不是冰

以前的网页已不再。当大部分网页倾向于响应设计,流体布局的需求已经十分明显。 网格现在用百分比(10%, 30%, 50%)表示,会在开发人员指定的断点崩溃。

字体不是你的朋友

网络上的字体与打印的字体截然不同。当你在自己的计算机上创建一个网页,你可以使用系统内安置的任何字体。 这对你有好处,但是随着文件从一台计算机移到另一台计算机,源代码无法再使用你的计算机中的字体,前后是不同的。

有很多方法可以应对,但是你会经常听到开发人员要求设计人员使用谷歌字体。 谷歌字体是托管在CDN(内容传送网络)上可以被任意电脑访问的字体,这意味着即使没有安装在我自己的计算机上也可以在网页上呈现。 注意。 有些字体并不是为了在Web引擎上显现而设计的。它们在Photoshop里和在浏览器里看上去可能截然不同。 每个程序使用不同的渲染引擎来呈现字体。

事件,状态和响应

现在我们有一点基础了,让我们研究一些设计师在设计时很少考虑但对用户体验非常重要的东西吧。

事件

事件就是用户在和网页交互时的行为。 JavaScript有很多例子,简单的比如“点击”,“滚动”,“鼠标指针进入对象所在区域”或“鼠标指针离开对象所在区域”,以及“键盘按下”或“按键释放”。 如果你想了解更多JavaScript事件,访问Mozilla。 你在这里看到的事件不一定会被用户触发。

从设计师的角度来看,了解用户交互过程中,某元素或某部分会触发什么是很重要的。 比如,点击按钮后会发生什么? 或者点击关闭时模式窗口需要设置一个动画吗? 这些问题都需要你提供应对方法,尤其当你的项目有预定义范围时。 考虑到成本和时间,“交互设计”,它在网络社群中被这样称呼,需要花费宝贵的时间去做。

状态

当一个事件发生后,元素将保有“状态”。举一个常见的例子,链接。 链接有多个状态:点击键盘输入焦点悬停等。你的链接被点击时看起来是什么样子的? 按下去的时候呢?鼠标悬停的时候呢? 或者当它们在手机上被触碰的时候呢?

当你的设计使这些状态易于分辨,比如建立一个按钮时,这时候原子设计模式就派上了大用场。状态会对你的用户体验产生很大的影响,所以在处理复杂的网页时一定要考虑周全。

响应

“响应性”一词近年来很经常被提到。 作为开发人员我们要保证网页体验在所有设备上的一致性。如果你是个自由职业者,几乎所有的客户都会向你要求响应性设计。它变成了网页设计的“核心业务”。 CSS为开发人员提供了有效的技术,例如媒体查询允许开发人员为每个“断点”设置单独的布局。

Bootstrap和Foundation这样的前端框架旨在让开发人员使用响应式的,基于百分比的网格系统做响应性设计。 最重要的不是响应式网格如何工作,而是它们被设计出来做什么。

结论

又到结尾啦! 在下一篇文章中我们将要学习后端知识和怎样使用原子设计模式的思维去提高对逻辑和编程技能的理解。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.