设计师应该如何学习编码？ 终端和文本编辑器（第 1 部分）
已发表: 2022-03-10作为一名拥有多年经验的设计师，我经常鼓励我的同事和报告学习一些编码技能。 虽然许多人对这个想法持开放态度，但其他人对这个想法持反对态度。 我经常听到“我不是为了成为一名开发人员而学习设计”这样的说法。 尽管这是一个有道理的担忧，但我想强调两点：更好地理解材料通常会带来更好的结果，并且“编码”和“软件工程”之间存在重要区别。
这个由两部分组成的系列文章应该对任何想要获得一些编码技能的设计师有用。
了解原材料
与某些人的想法相反，设计不是要创建漂亮的模型，而是要为最终用户提供直观、实用的体验。 如果不了解解决方案的构建块，那根本无法完成。 如果建筑师不了解她的计划所需的材料，她的工作就不会很出色- 代码。 编码经验有助于设计师了解什么是可能的，什么不是，以及他们的设计是否能够有效地执行他们想要的功能。
我还向我的同事保证，编码知识并不意味着必须成为一名工程师。 两者指的是不同但相关的技能组合。 正如华盛顿大学的博士生凯尔·塞耶（Kyle Thayer）最近所写，计算机科学（或工程）领域是为学生提供“计算机科学领域的概览”：
“计算机科学学位的目的是让学生了解计算科学领域。 虽然这包括一些编程，但编程主要是为了了解其他领域（例如，操作系统、算法、机器学习、人机交互）。 计算机科学学位是进入计算机科学学术领域的良好第一步。”
— 凯尔·塞耶
相比之下，编码只是意味着足够熟悉给定的编程语言以完成任务。 要求某人学习基本的 HTML 或 JavaScript 并不一定要他们成为全栈软件架构师。 尽管有些人可能会想，分叉一个 repo 并复制/粘贴 Stack Overflow 的答案并不会让你成为一名软件工程师——但它可以增加你作为设计师为产品开发团队带来的价值。
“低代码”呢？
有人可能会说，我们正在进入一个低代码的未来，设计师（和开发人员）能够通过拖放功能和 GUI（图形用户界面）构建应用程序。 因此，花时间学习一门编程语言并不“值得”。 Webflow、Modulz、FramerX、UXPin 等工具的出现，似乎支持了这种推理。 这对于许多应用程序来说是非常正确的——在没有一行代码的情况下创建一个站点或应用程序比以往任何时候都容易。 但是，如果您不了解基本原理，您将限制使用低代码应用程序可以提供的价值。
我们还没有达到可以使用低代码平台构建企业级应用程序的地步。 作为设计师，我们必须在我们生活的世界中工作，而不是我们想象中的那个世界。
话虽如此，每个人都带来了独特的技能组合。 代码知识不是绝对必要的，应该鼓励而不是要求它。
从哪儿开始？
有无穷无尽的工具、语言、学校、指南和其他资源可供任何可以访问互联网的人使用——那么从哪里开始呢？ 一个重要的免责声明——我绝不是专家，或任何接近软件工程师的人——以下是我个人经验的见解，并不是通往成功的保证途径。
我认识的许多设计师/开发人员通常开始在 MySpace、Geocities、Tumblr、Neopets 或其他网站上编写 HTML 和 CSS 模板。 现在我已经对自己进行了充分的了解，对于从今天开始的任何人，我建议从您友好的命令行界面(CLI) shell 开始。
终端：必不可少的工具
每当屏幕上有计算机黑客时，好莱坞导演的首选应用程序，终端只是一个界面，允许您通过文本输入执行操作，而不是大多数人习惯的图形用户界面 (GUI)。 我将让真正的开发人员解释复杂性和技术操作方法，但就我们的目的而言，知道熟悉 CLI 有很多好处就足够了。
终端使您可以访问计算机的文件和文件夹结构——就像您通过 Finder 或资源管理器单击一样，您可以使用终端中的键盘进行导航。 这肯定需要一些时间来适应，但是在这个领域开发你的思维模型是使用代码工作的基础。
和很多设计师一样，我使用的是 macOS 环境（以前称为 OS X），但以下适用于其他 *nix 操作系统（Linux、Unix），也适用于 Windows PowerShell。 虽然不同的现代操作系统之间有很多重叠之处，但我会尽力强调一些差异。
注意：关于终端更完整的介绍，我推荐阅读 Paul Tero 的文章“Linux 命令简介”。
常用表达
CLI 中的一个关键特性是能够在命令中使用正则表达式 (regex)。 将正则表达式视为类固醇上的布尔搜索操作（使用引号搜索确切的短语或使用减号排除单词）——它们允许您在文本字符串中定义模式，以便您可以对输出执行一些操作。 以下是一些现实世界的例子：
- 如果您有一长串各种格式的电话号码，您可以定义一个脚本，根据正则表达式为您提供一致的输出 - 例如：
(###) ###-####美国电话号码格式。 - 如果您想快速将一组文件重命名为特定大小写 - 从 kebab-case 到 CamelCase 或介于两者之间的任何内容。
我强烈推荐观看 Wes Bos 的 Command Line Power User 系列 - 或者至少是他的介绍视频，它可以让您对一些可以使用的基本命令有一个很好的了解。
以下是一些基本的终端命令*可帮助您入门：
-
cd代表“更改目录”，输入它，然后输入文件或文件夹路径 - 请注意，您可以输入文件夹名称，但它需要在当前文件夹中才能访问。 -
ls列出当前文件夹中的文件和文件夹。 -
pwd代表“打印工作目录”——这将列出您当前在计算机中的位置。 -
mkdir和文件夹名称将在您的工作目录中创建一个文件夹。 - 将
cd与..一起使用可以让您更上一层楼——如果您在/users/username/documents/2019中并且您输入cd ../..您最终会在/users/username中。 - 额外提示 — 当您键入文件夹/文件路径时，按
Tab键将自动完成。
注意：以下将在 Windows 命令行( cmd ) 上运行：
-
cd,cd ..,mkdir,用于路径自动完成的Tab键（ls和pwd不起作用） 。
更现代的 Windows 命令行 (Windows PowerShell) 支持所有这些：
-
cd、cd ..、ls、pwd、mkdir和Tab用于路径自动完成。
有关 PowerShell 中可用命令的完整列表，请查看此 Microsoft 帮助页面“使用熟悉的命令名称”。
海量文件管理
您可以通过终端大量操作文件和文件夹——这里有一些想法：
- 您可以在单个命令中为每个月创建包含子文件夹的三年文件夹 - 使用
mkdir -p和{list-of-years}/{list-of-months}将为每年创建文件夹以及每个月的子文件夹。 发挥您的想象力，我相信您可以充分利用它！ - 您可以使用
mv Screen\ Shot* Screenshots快速清理桌面 - 这会将所有以“Screen Shot”开头的文件移动到名为“Screenshots”的文件夹中。
注意：这两个例子很可能只适用于 *nix 环境——但理论仍然适用。 而且Windows PowerShell也是一个非常强大的命令行工具，你只需要了解它的特性和具体的命令即可。
脚本和维护
现在我们已经了解了正则表达式的强大功能和终端中可用的选项，我们可以开始将这些东西组合到脚本中。 一个非常简单但功能强大且常用的脚本是 Mike G 的文件重命名器：
criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done 该脚本允许您执行的操作是定义范围 ( criteria )、定义您想要更改的内容 ( re_match ) 以及您想要将其更改为 ( replace ) 的内容——然后执行它。
除了创建和重命名文件之外，您还可以创建无数其他脚本 — Vlad 的 Batch Resizing 脚本是您可以使用 bash 脚本创建的省时功能的绝佳示例。
高级提示和技巧
多年来我发现，定期重置我的计算机并重新安装操作系统有助于它保持相对整洁，并防止每个人在硬盘驱动器上积累多年的数字碎片后经历的减速。 对许多人来说，擦拭电脑并重新设置一切的前景充其量听起来像是几天的工作，最坏的情况是你可能永远无法恢复的不可能的噩梦。
但这并不一定是——通过使用一些命令行工具，一旦你备份、擦除并重新安装了你的操作系统，你不仅可以安装你最喜欢的应用程序列表，还可以安装字体。分钟使用 Homebrew。 （Homebrew 仅适用于 Mac 和 Linux。对于 Windows，请尝试 Chocolatey，这是一个不错的选择。）
如果您有兴趣，我们已经创建了一个易于遵循的设置指南，让您的计算机在大多数开发中保持良好状态。 我们的指南适用于 macOS，但 Owen Williams 也为 Windows 编写了可靠的指南。
如果您没有时间阅读 Wes 关于命令行的整个系列教程——至少我强烈推荐以下堆栈：
- 哦我的ZSH
- zsh-自动建议
- zsh-语法高亮
- z 跳跃
选择文本编辑器
在选择代码编辑器时有很多选择——Sublime Text 和 VS Code (Visual Studio Code) 是我最有经验和目前正在使用的两个。
Sublime Text 是早期在前端开发人员中流行的文本编辑器之一——直到几年前它还是黄金标准。 多个光标、强大的包管理器和高度可定制的快捷方式等功能，可让您在文件和文件夹中快速导航。 更不用说它是一个非常轻量级和快速的应用程序，这使它成为一个简单的选择。
VS Code（Visual Studio Code）出现在 2015 年左右，人们从 Atom 和 Sublime 切换到现在需要一段时间，但 VS Code 已经确立了自己作为许多开发人员最喜欢的编辑器的地位。 除了 Sublime 的几乎所有功能之外，VS Code 还通过内置终端和与 Git 的紧密集成来区分自己。 此外，Visual Studio Code 具有丰富的插件生态系统，可让您根据自己的喜好扩展和自定义环境。
这就是说——你不需要成为一名开发人员来欣赏一个好的代码编辑器的特性。 我在日常工作中发现了它的许多用途； 两个，特别是能够使用多个光标，并使用正则表达式来查找和替换文件文件夹中的文本。 让我们仔细看看两者。
使用多个光标进行编辑
想象一下你的典型文字处理器——那条闪烁的垂直线，显示你输入的文本将去哪里？ 现在想象一下在这个窗口中添加多个光标的能力，这样你输入的任何内容都会出现在有光标的地方！
这可能还没有让您大吃一惊——所以这里有一个示例，展示了高级文本编辑器可以帮助您在工作流程中提高日常效率的几种方式。
在这里，我们有一个需要将其转换为电子邮件地址的名称列表——我们还希望将它们全部设为小写，然后按字母顺序对其进行排序。 这可以通过几次按键来完成。
粘贴列表后， Cmd + Shift + P会调出命令面板（可搜索菜单的花哨术语，可为您提供所有可用功能）。 您基本上可以在此菜单中输入您想要执行的操作，您可以对文本执行的几乎所有操作都可以在此处获得。 如果不是，您可能会找到一个插件或扩展程序。
我们能够在几秒钟内更改大小写并对行进行排序——然后按Ctrl + Shift + 箭头键添加光标，然后我们输入的任何内容都会添加到每一行——在这种情况下，我们将名称转换为电子邮件地址，但您的疯狂想象力可以找到无数其他方法来使用它。
你可能会说——我可以在 Excel 或 Google 表格中做到这一点，这是真的，但我发现在文本编辑器中处理这些类型的事情要快得多。 您不必编写公式和用鼠标选择事物。
我应该使用哪个代码编辑器？
我是一名设计师——当然，我的回答是“视情况而定”。
- 如果您不熟悉这些概念，我建议您免费试用 Sublime——它仍然是一个非常轻量级的应用程序，并且不会消耗太多系统资源。 您可以自定义 Sublime 的键绑定（热键的花哨词）并使用插件扩展其内置功能。
- 如果您一直在使用 Sublime、Atom 或其他编辑器——我建议您也查看 VS Code。 Microsoft 的团队确实做得非常出色，使其成为功能强大但易于使用的文本编辑器。
就我个人而言，我同时使用了这两种编辑器——Sublime 的速度非常快，并且可以在几分之一秒内打开，让我可以轻松地粘贴和操作文本。 但是当我想完成一些更严肃的工作时，我会使用 VS Code。 很难超越 VS Code 提供的一体化软件包——一个充满活力的插件和扩展生态系统、强大的命令面板和超可定制的界面，这意味着你可以真正将它变成你自己的。 更不用说微软非常积极地确保它是开发人员生产力的一流体验。
结论，下一步是什么？
在第一篇文章中，您将了解终端的基础知识，一些帮助您入门的生产力技巧，并且应该更好地了解选择什么代码编辑器。 在下一部分中，我们将继续讨论版本控制、HTML 和 CSS 的主题，以及对工程原理的介绍。
有什么不对吗？
这篇文章中的某些内容很有可能是晦涩的、迟钝的和/或过时的，我希望有机会让它变得更好！ 请在下方留言、私信我或在 Twitter 上@提及我，以便我改进。