****初次翻译，难免顾此失彼，欢迎各位吐槽和提问XD****
现如今，样式规范的发展提供了非常灵活的现代web设计方法。在本教程中，我将手把手带您设计一份UI Kit（用户界面工具包），同时也就如何保持UI Kit的一致性和可复用性进行一些介绍。
教程素材
完成本教程你需要找到下面这些（免费）素材：
Open Sans字体→ Font Squirrel 或Google Fonts（需要梯子）
素材图片→ Unsplash
用户头像→ Faces
icon→Arrow icon
设置Photoshop文件
第一步：
打开PS后，新建一个文件（文件>新建…）按照下图设置。你也可以按照自己的喜好设置画布尺寸，毕竟网页高度（原文是宽度）是不设限的。
第二步
让我们先设置一些参考线，这样我们的UI Kit 就变得有组织了。我不是经常用PS里的网格，但建立一些参考线是很有必要的，这会让我们的设计变得整洁且一致。到（视图>新参考线）里设置一些参考线。我通常会选择1000px作为网页的宽度，这里也照旧。
注意：本教程参考线设置，100px，600px和1100px。
小提示: 你也可以用 GuideGuide Photoshop 插件来迅速完成参考线设置。
第三步
在PS里，记得保持所有内容易于浏览和编辑，这是个好习惯。在工作的时候，我们需要经常用到这份UI Kit 做参考和输出文档，所以要记得让它变得有条理些（技术开发的小伙伴会感激你的）。让我们来新建6个图层组，分别命为“Typography”、“Buttons”、 “Forms”、“Avatars”、“Images”和“ Colors”（排版、按钮、表单、头像、图片和色彩）
去（图层>新建>组…）创建图层组，并给每个组命名以防混淆。要快速创建组，点击下图所示icon即可。
定义排版
正如Oliver Reichenstein 的名言“网页设计的95%是关于排版”所说，排版这块你得好好花点功夫。
首先我们需要为我们的排版设置一个完美的环境；一个眼睛看起来比较中性且养眼的背景。背景和排版需要保持合理的对比度，以便于阅读。本教程中我们设置微妙的浅灰色——一个中性色，但是又足够强烈，能让你的APP更有个性。我把前景色设置为#e9eeef，点击Alt+Backspace，填充颜色（在这之前新建个图层）。
第一步
打开排版图层组, 选择文字工具(T) 选择Open Sans字体。 Open Sans是一款有着不同粗细字形（weights）且足够专业，正逐渐受到大众欢迎的现代字体。对标题来说，它足够个性了，在网页设计中用作文章主题也经得起考验。
和我们上面说的一样，Open Sans有许多类别，在本次UI Kit里面我们只需要用到一种。千万记得，在你的项目里不要随便用超过两种字体，不然事情很快就变得一团糟。
我将前景色又变回了黑色#000000，然后用文字工具（T)，和之前提到的Open Sans，选择Light模式，选择55px字号，输入标题文字。为了保持一致性，我们将在以后的标题上都选用同样的字体和字号。
第二步
现在我们需要为排版建立一个层次。查看这篇Ian Yates的How to Establish a Modular Typographic Scale能帮你更好的理解网页排版的科学与重要性。
HTML* *(HyperText Markup Language) 有许多不同的标签能帮助浏览器翻译网页的内容。许多标签是专为网页排版准备的，比如h1、h2、h3等等。
h1描述的是标题，是最重要的部分。在这之后是一个专为图片准备的p标签。不用纠缠太多细节，HTML能帮我们定义这些网页元素的外观。
运用文字工具（T)输入三个标题。我用Open Sans (Light) 55px来做h1,44px做h2,32px做h3,并且在他们中间留下30px的间距。间距是另一件需要牢记于心的事情。保持足够的间距，这样你的文字才更具可读性，而且看起来更平衡。
注意：h3我用了Regular的模式。因为字体变小时，Light模式可能变得不那么清晰。
第三步
既然我们已经做了标题的设置，那就跳到实际的文本部分吧。好好考虑你UI Kit里设计后续各种显示的可能性，这样开发人员才能还原出你设想的方案。考虑下标题样式在段落里的展示，加粗，斜体还有链接。
主体文章部分，我选择了#838383的灰色，标题 #000000的黑色以及#006ee3的蓝色链接。
标题比主体的灰色要深一些，醒目一些。主要内容的颜色应当看着舒服，不费眼睛（易于阅读）。最后，确定下你选了一个不同的颜色来做链接用，这样用户才知道它们是可以点击的。
注意设置标题和链接的字体为Regular模式，这样它们看起来更大也更重要。
创建按钮
按钮对网页设计来说很重要。大部分时间，他们充当了链接和提交表格的作用，但同时也能作为导航引导用户在不同页面间流转，让用户能迅速的做决定（知道去哪里）。给按钮定义一个一致的外观是很重要的，这样用户在使用app的过程中才不会觉得不知所措。
第一步
点击层组名边上的小箭头，将【Typography】层组最小化。然后打开Buttons层组。然后新建参考线，将内容区域划分成三等分，每分间隔35px。点击（视图>新建参考线…），设置如下垂直参考线：410px，445px，775px和790px。这就是我们准备做三个大小一致的按钮的地方了。
第二步
回到【Typography】层组，找到标题的图层，然后按 ctrl+J复制一层，将复制层移到【Buttons】层组。
然后输入按钮的三个状态文字：Normal, Hover and Active。把它们移到三个均分区域的左边，记住三个区域之间的间隔是35px。
第三步
现在将前景色设置为我们之前用过的蓝色 #006ee3，并且新建一个【Primary Normal】的组。然后选择矩形圆角工具，设置圆角为3px，再画一个310x44px大小的圆角矩形。将它放在Normal下，正好在第一条和第二条辅助线之间。在按钮上用清晰可读的白色字（#ffffff）写下按钮内容，完成按钮设计。
第四步
现在按下ctrl+J复制 Primary Button组，并将它们重命名为 Primary Hover 和 Primary Active。在这之后，将这些新的群组放在我们之前做好的headlines下方。你可能会问，hover和 active是啥意思？hover讲的是你把鼠标移到按钮上时，按钮所处的状态，所以我们需要在按钮上做一些改变，形成反馈（交互效果）。而当你点击时，链接就变成了active（作用）的状态。
在这里，我们对按钮的hover 和active 进行一些简单的暗化处理。在按钮层上新建一个图层，并对它进行#000000的黑色填充。在这之后，按住Alt 并将鼠标移到两个图层中间，直到你看见一个小小的向下箭头，点击之后，你就成功地做了一个Clipping Mask（遮罩）最后将图层的不透明度降到10%。
注意:在按钮的作用状态，可以将黑色遮罩的不透明度变成20%。
第五步
现在复制所有以前的按钮组，并将它们的标题和颜色改为次要组。在本教程的后面，我们将定义UI Kit的颜色，现在只需选择一个颜色并替换之前的蓝色，我用绿色 # 36c265。
设计表单
表单在web APP设计中是一个很重要的元素，它们能让用户输入信息并且与APP进行互动。我们会设计一些基础的表单样式，这样开发们就能严格按照样式来保持设计的一致。
第一步
点击左边的小三角最小化Buttons组，新建Forms组。再次从之前的组里复制title，并将它重命名为 "Forms"。
我们将设计一些基础的表单输入样式，包括文本输入，密码字段，或选择字段和字段下拉提交（一个简单的按钮）。
在设计表单时，清晰和（令人感觉）熟悉是最关键的因素。不要试图重新发明轮子。建立一个新的组，并且命名为“Name”。接着 选用文字工具 (T) ，输入字段，我这里是用同样的黑色（#000000）18px Open Sans (Regular) 输入"First Name" 。
现在复制一个按钮的形状图层，并将它移到Name组。然后将它的背景色换成白色（#ffffff），增加1px的灰色（ #d5d5d5）内描边。最后，在按钮背景上输入文字，我这里用了16px Open Sans (Regular)，灰色（#838383），和之前在正文文本里用的一样。
第二步
复制第一个输入框，来做更多带抬头的输入框。通常，密码输入框里面会用到点 • 或者星号 * 。下面是一些例子。
复制 ctrl+J一个按钮，移到Forms组，将它放到新建立的几个输入框下面。再一次提醒，保持一致和复用之前创建的元素很重要。
第三步
在这个教程里，我们将坚持一个基本的用户界面，它将服务于一个非常简单的web app。让我们来创建另外一种输入模块——<选择框>。
复制一个输入框，并将它放在第三个和第四个辅助线之间，确保一切都调整好了。将文字改成任何你喜欢的，任何在右侧加一个简单的箭头icon，表明这个表单是可以向下展开的。你可以在这里找到箭头的icon 。
第四步
想让开发们工作的更轻松的话，再一次确保你做了（active）激活状态。想一下，在用户点击下拉框的时候，它将是什么样子的？引导开发们创造出拥有一致的用户体验的产品就是设计师们的工作啦~
复制之前做的下拉框，选择直接选择工具 (A)选中形状的边角，选中后你能看见黑色的边角点，按住Shift，选择形状下方的四个点，然后点击 向下几次，这样形状就在没有破坏倒角而且是矢量的前提下扩张了。
在这之后，复制文字更改名称，放在第一个选项的下面。用粗细为1px的直线工具去做一个简单的划分，最后将箭头改成按钮的蓝色。这能帮助表明这一块区域被激活了。
第五步
我们将创建一个简单的错误信息提示。比如有人输入了一个不够复杂的密码时，它就会出现。
复制 ctrl+J 之前制作的密码表单，将它放在下拉表单的下面。在这之后，将输入范围的边框改为微妙的红色（我用的是#eb8686），背景改成有点灰的红色（#e9dde3）。
最后，选择一个醒目的红色，（ #b63131），输入错误提示信息。
到这里表单部分就设计好了！我主要做了基础的部分，但是这些足够你用来开始设计更复杂的表单了。
头像
现如今头像的设计在web app中几乎是标准了，所以我们在视觉上面就能很方便地和其他人进行沟通以及区分不同用户。
第一步
最小化现在不需要的那些组，新建一个Avatars组，选择椭圆工具，按住shift，画一个80x80px的圆。在 uifaces.com 上找到一个图像。复制粘贴到你新建的圆上面。按住Alt，将鼠标移到两图层中间，直到你看见小箭头的出现，点击建立图层蒙版。
第二步
想清楚头像将被怎么使用，并且设计不同尺寸的一系列头像供开发们使用，折痕重要。例如，大的头像能用在用户的资料页，小一点的可以用在评论区。简单地复制并下移头像，按住ctrl+T，按住shift，保证等比缩放。
图像
我们应该创建一个图像在我们的app里如何展示的例子。我会把图片放在矩形圆角里，来展示我们app内的图像将这样展现。
第一步
选择矩形圆角工具，在垂直的辅助线之间， Avatars组的下面，画出一个矩形圆角。在这之后，选一张图片，我在 unsplash.com上找了一张，如果需要的话，ctrl+T对它进行缩放，然后建立一个遮罩。
确定颜色
最后我们来确定颜色。一个可靠的颜色很关键，你可以去看看 color theory ，这样你会对使用颜色的意义与重要性有更好的理解。之所以在最后选择颜色，是因为现在我们对我们需要规范的元素有了更好的理解。
第一步
新建Colors组，选择你之前拿来做按钮前景色的蓝色。之后，用矩形圆角工具画一个矩形圆角。选择文字工具（T)并写下文字的抬头，或者它将被用来使用的场合。比如， "Primary Color" ，并提供颜色的相关代码信息，比如 HEX, RGB 或其他任何需要的形式。将这一步建立的图层都放进Colors组。
第二步
现在你可以ctrl+J复制Colors组，制作出你想要的其他颜色样式。通常我们会选4-5个颜色，因为过多的颜色看起来会显得乱。你可以在 Kuler 和 COLOURlovers上找找配色灵感。
在这个教程里，你可以看到我用了“主要”和“次要”的颜色，一个用在正文文本上，一个用在标题上，而白色被用在输入背景上。如下图所示。
恭喜你做到了！
到这里你已经拥有了一份还不错的UI Kit了。它是一份简易的web app界面设计风格指南。我希望你能理解创造一份风格指南的基本，为什么会做这样一些抉择，以及它们是怎样对项目进行影响的。
如果你有任何问题的话，欢迎在评论区提出来！（翻译君也是这么想的XD）
