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键并将鼠标悬停在图像的缩略图上,直到看到一个小箭头,然后释放鼠标以创建剪贴蒙版 。
第2步
重要的是要考虑化身将如何使用,并包括一些不同的大小供开发人员使用。 例如,可以在个人资料页面上使用较大的头像图像,而在注释部分中使用较小的头像图像。
只需复制化身并将其缩小为CMD + T ,并按住Shift键即可保持比例。
图片
我们应该真正包括一个示例,说明如何在我们的应用程序中显示图像。 我将在圆角矩形内仅放置一张图片,以显示图像应具有圆角。
第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语言