adobe app语言

样式指南驱动的开发为现代Web设计提供了非常灵活的方法。 在本教程中，我将引导您设计UI（用户界面）工具包，同时还将解释使UI工具包保持一致和可重用的决策。

教程资产

为了继续进行下去，您将需要以下（免费提供）资产：

• 从Font Squirrel或Google Fonts打开Sans 字体
• 商业照片： Unsplash
• 面Kong从UI面Kong
• Iconfinder中的箭头图标

准备Photoshop文档

第1步

打开Photoshop，然后使用以下所示的设置创建一个新文档（ File> New… ）。 您可以随意使用任何喜欢的尺寸的画布-毕竟，网络的宽度不是固定的。

第2步

让我们设置一些指南，以便我们的UI套件井井有条。 我并不总是使用网格，但是设置一些约束将确保整洁和一致。 转到查看>新指南…并设置一些指南。 我通常选择1000px作为网站的起始宽度，因此我们将UI工具包保持在这些尺寸内。

注意：本教程使用的准则：垂直为100px，600px和1100px。

提示：您还可以使用GuideGuide Photoshop插件使此过程更快。

第三步

坚持使用Photoshop礼节，我们可以使事情井井有条，易于浏览和编辑。 在工作环境中，我们需要将此UI工具包多次用作参考点和开发资产，因此您需要使其保持井井有条（开发人员将感谢您）。 让我们创建六个图层组，分别称为“印刷术”，“按钮”，“表单”，“头像”，“图像”和“颜色”。

要创建组，请进入“ 图层”>“新建”>“组...”，并为每个组指定一个标题。 要快速创建组，只需单击图标。

定义版式

正如Oliver Reichenstein所说的“ Web设计是95％的版式 ”那样，因此您需要正确进行处理。 首先，我们需要为我们的类型设置完美的环境； 中性且容易看的背景。 背景和版式需要保持合理的对比度水平以便于阅读。 在本教程中，让我们使用细微的浅灰色-中性色，但要足够强以赋予您的应用个性。 我将前景色设置为#e9eeef然后按Alt + Backspace作为背景。

第1步

打开“ Typography组，选择“ 水平 Typography 工具（T）”，然后选择“ Open Sans”字体。 Open Sans是一种现代字体，具有多种不同的权重，并且具有专业而热情的外观。 它既适合标题使用，又足够实用，可以在网上进行正文复制。

Open Sans有很多变体，因此对于此UI套件，我将仅使用一种字体。 请记住，如果为您的项目使用两个以上的不同字体，则应格外小心，因为事情会很快变得混乱。

我将前景色设置为黑色#000000然后使用“ 水平字体工具（T）” ，前面提到的带有Light选项和55px大小的Open Sans字体输入了该部分的标题。 为了将来的标题保持一致，我们将使用相同大小和样式的标题。

第2步

现在，我们需要为版式建立层次结构。 请检查Ian Yates的这篇文章“ 如何建立模块化印刷比例尺” ，以更好地理解网络印刷的科学性和重要性。

HTML （超文本标记语言）具有许多不同的标签，可帮助浏览器解释页面的内容。 这些标签中有许多专门用于Web印刷，例如<h1> ， <h2> ， <h3>等。 这些描述了标题， <h1>是最重要的标题。 之后，有一个<p>标记用于段落。 在不涉及HTML的更多细节的情况下，我们将定义这些元素的外观。

使用水平字体工具（T）输入三个标题。 我已经将Open Sans（Light）用于h1的55px，用于h2的44px和用于h3的32px，在它们之间留出30px的间隔。 间距是另一个要记住的重要事项。 留出足够的空间，以使您的类型易于阅读并且看上去平衡。

注意：我为h3使用了常规重量。 随着类型变小， Light变体的清晰度可能会降低。

第三步

设置好标题后，让我们跳到实际的内容副本。 考虑复制的所有可能变体并将其显示在UI套件中，以便开发人员可以实现您计划的内容。 想想段落中的标题样式，粗体，斜体样式以及链接。

对于主副本颜色，我选择了灰色#838383 ，对于标题颜色则选择了黑色#000000和蓝色#006ee3作为链接颜色。

标题将明显比主副本暗，从而产生更大的影响。 主要内容颜色应轻松且易于阅读。 最后，请确保为链接选择其他颜色，以便用户理解它们是可单击的。

注意：将标题和链接字体设置为“ 半粗体” ，使它们看起来更大，更重要。

创建按钮

按钮对于Web项目非常重要。 它们通常是简单的链接或提交表单，但是它们也可以通过引导人们浏览页面来加快号召性用语（CTA）功能，从而更快地做出决策。 为按钮定义一致的外观至关重要，以便用户在整个应用程序中熟悉它们。

第1步

单击组名旁边的小箭头，以最小化“ Typography组，然后打开“ Buttons组。 之后，创建一些新的垂直指南，将我们的内容区域划分为三个相等的区域，它们之间的间隔为35px。 转到查看>新指南…并设置以下垂直指南：410px，445px，755px和790px。 这是我们放置按钮的位置，因此所有按钮均相等且一致。

第2步

浏览回到Typography组，找到部分标题图层并通过单击CMD + J复制它，然后将其移至Buttons组并将其更改为“ Buttons”。

之后，输入按钮状态的三个标题：“正常”，“悬停”和“活动”。 将这些放置在我们三个相等部分的左侧，请记住第一，第二和第三区域之间的间隔为35px。

第三步

现在将前景色设置为先前使用的蓝色#006ee3并创建一个名为Primary Normal的新组。 然后拿起一个圆角矩形工具（U） ，将Radius设置为3px，并绘制一个310x44px大小的圆角矩形形状。 将其放在“常规”标题下的前两个准则之间。 要最终确定按钮，请使用白色#ffffff写下一些文字，以便于阅读。

第4步

现在，通过单击组上的CMD + J复制“ Primary Button ”组，并将这些组重命名为“ Primary Hover和“ Primary Active 。 之后，将这些新组放置在我们之前创建的头条新闻的两个部分下。

您可能会问， 悬停和活跃是什么意思？ 悬停描述了将鼠标光标移到按钮上时的状态，因此我们需要说明按钮的一些反馈。 单击链接后，该链接变为活动状态。

对于样式悬停和按钮的活动状态，我们将使它们变暗。 在按钮形状上方创建一个新层，并用黑色#000000填充它。 之后，按住Alt键并将鼠标悬停在图层上，直到看到一个向下箭头的小图标-释放它以创建剪贴蒙版 。 最后将图层的不透明度降低到10％。

注意：对于按钮的活动状态，将黑色层的不透明度增加到20％。

第5步

现在，复制所有先前的按钮组，并将其标题和颜色更改为辅助按钮。 我们将在本教程后面定义UI工具包的颜色，现在只需选择一种颜色并替换以前的蓝色即可。 我用绿色#36c265 。

设计表格

表单是Web应用程序中非常重要的元素，因为表单允许用户输入信息并与应用程序进行交互。 我们将设计一些基本形式，以便开发人员可以坚持相同的样式并使设计保持一致。

第1步

最小化Buttons组并打开Forms组。 再次复制上一组的节标题并将其重命名为“ Forms”。 我们将创建一些基本的表单输入类型，包括文本输入，密码字段，下拉列表或选择字段和提交字段（一个简单的按钮）。

设计表单时，清晰和熟悉是关键因素。 不要试图重新发明轮子。 创建一个新组并将其Name 。 然后选择一个水平字体工具（T）并输入一个输入字段标签，在我的情况下，它是使用相同的18px黑色#000000 Open Sans（常规）字体的“名字”。

现在复制按钮形状图层之一，并将其​​移到“ Name组中。 这种改变其背景颜色为白色后#ffffff ，并添加1px的灰色#d5d5d5内中风。 最后，将输入文本的示例放在白色的圆角矩形内。 在我的示例中，我使用了16px Open Sans（常规）和灰色#838383如之前在正文中使用的那样。

第2步

只需复制第一个输入字段，即可创建更多带有标题的输入字段。 传统上，对于密码字段，请使用点•或星号*。 下面显示了更多字段的示例。

复制CMD + J按钮组之一，将其移动到“ Forms组中，然后将其放置在最近创建的输入字段下方。 再次重要的是保持一致并重用以前创建的元素。

第三步

在本教程中，我们将坚持一个非常基本的用户界面，该界面可以为非常简单的Web应用程序服务。 现在让我们创建另一种类型的输入字段。 <select> 。

复制一个输入字段组，并将其放置在第三和第四垂直参考线之间，确保对齐所有内容。 将值更改为所需的值，并添加一个简单的箭头图标以指示它是一个下拉字段。 您可以在Iconfinder上找到箭头图标。

第4步

为了使开发人员的工作更加轻松，请再次确保您包含活动状态。 考虑一下用户单击下拉列表时的外观吗？ 指导开发人员创建一致而统一的体验是设计师的工作。

复制最近创建的下拉组。 使用直接选择工具（A），单击状的角看到边缘点，然后，按住Shift键 ，选择四个底点，打不下来几次延长形状。 此技术可保持形状矢量并保持角点不变。

之后，只需复制可能的选择，然后将一些选择放在第一个选择的下方。 使用权重为1px的线工具（U）制作简单的分隔符，最后将箭头颜色更改为用于按钮的箭头颜色。 这将有助于指示该字段处于活动状态。

第5步

现在，我们将创建一个简单的错误消息场景，例如有人输入的密码太弱。

复制CMD + J先前创建的密码字段并将其放置在下拉字段下方。 之后，将字段的边界更改为微妙的红色（我使用#eb8686 ），将背景更改为灰红色#e9dde3 。 最后，选择一个较强的红色#b63131并输入简单的错误消息。

表单就是这样！ 我已经介绍了基础知识，但这足以开始设计更复杂的表单。

头像

如今，化身几乎已成为任何网络应用程序中的标准，因此方便使用一些视觉效果以方便用户进行交流和识别。

第1步

最小化不必要的组并打开化身组。 选取椭圆工具（U） ，然后按住Shift键 ，绘制一个80x80px的圆圈。 转到uifaces.com并选择图片。 复制它并粘贴到最近创建的圈子上方。 按住Alt键并将鼠标悬停在图像的缩略图上，直到看到一个小箭头，然后释放鼠标以创建剪贴蒙版 。

图片

我们应该真正包括一个示例，说明如何在我们的应用程序中显示图像。 我将在圆角矩形内仅放置一张图片，以显示图像应具有圆角。

第1步

选择“ 圆角矩形工具”（U），并在“ Avatars组下方的垂直基准线之间绘制一个矩形。 选择图像后，我使用了unsplash.com上的图像，如果需要，可以使用CMD + T调整其大小，并创建一个Clipping Mask 。

定义颜色

最后，我们将介绍颜色。 纯色调色板至关重要，您应该检查色彩理论 ，以便更好地了解所用颜色的含义和重要性。 我们选择在流程结束时选择颜色，因为我们现在对需要设置样式的元素有了很好的了解。

第1步

打开“ Colors组，然后选择用于按钮的一种颜色作为前景色。 之后，使用圆角矩形工具（U）绘制一个矩形。 然后选择一个水平字体工具（T）并写下颜色的标题，或将其用作“原色”的颜色，并提供十六进制，RGB或所需的任何其他格式的颜色代码。 创建一个新组，为其指定颜色名称，然后将所有图层放入其中。

第2步

现在，只需复制CMD + J颜色组，并根据需要制作任意数量的色板。 通常最好坚持使用四种或五种颜色，因为更多的颜色会使事情看起来凌乱。 查看Kuler和COLOURlovers，获得令人惊叹的调色板灵感。

如您所见，在本教程中，我使用了“主要”和“次要”颜色，一种颜色用于正文，另一种用于标题，白色也用于输入背景。 这些都显示在下面。

恭喜您完成！

所以你有它。 一个简单的Web应用程序用户界面样式指南。 我希望您了解并了解创建样式指南的基础知识，为什么要做出一些决定以及它们如何使项目受益。

如果您有任何疑问或困难，请随时在评论部分对我进行ping操作！

翻译自: https://webdesign.tutsplus.com/tutorials/designing-a-web-app-ui-kit-in-adobe-photoshop--cms-21963

adobe app语言