搜索内容：
时间：2019-08-02
编辑:网站制作公司
776
0
创建样式指南正在迅速成为Web设计人员的常见做法，尤其是在处理内容繁重的站点时。通过网站样式指南，设计师可以通过创建设计遵循的一组规则来设置和维护外观。该过程变得灵活，易于更新和一致。
杭州网站建设在本教程中，我将演示如何在您自己的站点或项目中实现样式指南。
风格指南已存在很长一段时间了。甚至在网络出现之前，公司通常需要为其品牌创建一致且统一的视觉效果。这仍然是通过使用品牌或身份指南来实现的。此类指南通常在文档中列出，可包含以下信息：
品牌颜色
排版，如字体，大小，领先等
标识定位以及如何在不同情况下使用即。打印布局可能与Web布局不同
说话的语气
确切地说，品牌/身份指南中包含的内容取决于公司。它可以是任何东西，从单页文档，到大量综合文档，如英语电视频道，第4频道的风格指南。
网络风格指南的工作方式与品牌/身份指南类似，唯一的区别在于您不是为品牌创建身份，而是为网站创建身份。这一次，品牌就是网站，因此，风格指南旨在在网站设计中创造一致性和统一性。
我不是说应该为你所参与的每个网站编写一个样式指南，但有时创建一个很有意义。
例如，这可能是一个好主意..
..当一个网站内容繁重，并且有很多内容需要以不同的方式显示。
..在网站上的大型团队中工作。指南可以派上用场，因为无论团队的哪个成员创建它，都必须始终如一地构建站点的每个组件。即使团队成员是新人。团队的另一个好处是，通过为每个网站组件提供固定的定义和命名约定，您可以更清楚，更有效地与哪个模块组件进行通信。
..当网站需要轻松更新，或经常添加新功能时。
我们设计网站的方式目前正在进行转变。我们开始意识到，在某些情况下，逐页设计网站可能不再是合适的解决方案。通过创建一个系统和结构（如样式指南），它可以让我们更全面地了解网站如何组合在一起，使得更新网站的整个过程更易于管理。
现在您对网站的样式指南有了更多的了解，让我们来看看一些例子。
可能在Twitters的Bootstrap中可以找到最知名的网站样式规则。虽然不是twitter.com的风格指南，但它的一些组件可以在twitter.com上找到，并且大量用于Twitter的内部应用程序。
Github是一个需要使用风格指南的网站的一个很好的例子。Github有一个设计师和开发人员团队致力于其产品，因此无论谁在为网站开发新功能和部分，都必须保持一致性。
如果你看一下MailChimp风格指南的图像，你会看到MailChimp网站周围的各种组件。您可能已经注意到的一件事是MailChimp用户友好的人工方法，它在整个网站中使用对话。这是一致的，因为Mailchimp已经创建了一套这种语调必须遵守的规则。
您决定在样式指南中包含的内容将根据您设计的网站而有所不同。例如，社交网站将具有与电影评论网站不同的组件。
您可以根据自己的喜好进行详细或简洁，但越详细，您的设计就越统一。
在创建样式指南时，重要的是要包含元素或组件可能会遇到的所有情况。例如，您应该考虑按钮和输入的不同状态，以及当前菜单项等。这些应该在您的内容中进行演示。 PSD文件。
提示：您可以使用图层复合在Photoshop中切换各种视觉状态。看看我们最近关于这个主题的教程。
在这个例子中，我将为博客创建一个样式指南。博客风格指南将包含组件 - 这些是：
作者卡
博客文章
评论
纽扣
分页
表单元素
表
我也将使用以下六种颜色：
蓝色＃a4d4e8 - 这将用作主要颜色
绿色＃aee1a3 - 这将用作辅助颜色
红色＃f67f77 - 这将用作辅助颜色和错误警告
黑色＃474747 - 这将用作主要文本颜色
深灰色＃919191 - 这将用作辅助文本颜色
浅灰色＃e7e2de - 这将用于轮廓
所有输入和按钮将使用5px的边框半径，而所有组件窗口小部件的边框半径为0px，使其形状为矩形。
首先，设置一个新的文档工作区。我决定将我的设置为580px宽。这是一个舒适的尺寸，可以为基于模块的设计提供合适的空间。
我正在使用网格（视图>显示>网格）来帮助我完成设计并保持一致。我选择使用20px x 20px网格，每10px细分一次。这可以通过转到首选项>指南，网格和切片来更改。
然后，您将看到下面的屏幕。在这里，您可以将网格间距更改为您选择的任何内容，但我发现将细分设置为2的20px网格线运行良好。我还在文档的两侧设置了一些宽度为460px的指南，以便给予帮助。除此之外，最好通过转到View> Snap打开'snap'。这将确保您的元素最终达到精确的像素测量值，并且不会因杂散的子像素测量而徘徊。
我们要创建的第一件事是作者组件模块。像Twitter这样的社交网络最近使这些作者卡很受欢迎，我认为将它作为我们网站风格指南的一部分使用可能会很不错。这样我们博客的每位作者都可以拥有自己的作者卡。
首先选择形状工具，然后选择白色的前景色。选择此选项后，创建一个380x250px的矩形。创建完成后，右键单击该形状的图层，然后选择“混合选项”。现在应该弹出混合选项面板。从弹出窗口的左侧边栏选择“Stroke”并给它一个1px的笔触大小。我们将使用的颜色是从我们的颜色集中获取的浅灰色＃e7e2de。
现在选择“外部发光”并将外部发光的颜色设置为相同的颜色，但将其不透明度降低到80.将发光的扩展设置为100％，将其大小设置为4.这将使我们的组件成为边界有厚厚的光芒，伪装成边界。
我们刚刚创建的图层样式将在我们稍后创建的其他元素中使用很多，但这里有一个关于如何在任何其他元素上使用相同图层样式的快速提示。如果右键单击我们刚刚创建的元素图层，然后单击“复制图层样式”。这将完全按照它所说的做，并允许您将其粘贴到您拥有的任何其他图层上。要执行此操作，只需右键单击要添加样式的图层，然后选择“粘贴图层样式”。请注意这一点，因为我们将在整个过程中使用它。我们将此元素的特定图层样式称为“主图层样式”。
对于作者头像，请拍摄照片并将其调整为75px x 75px。然后选择“椭圆选框”工具并将光标拖动到图像上，从左上角开始向下到右下角。在这样做的同时保持移位以限制比例并创建一个完美的圆圈。然后，在图像上创建选区后，复制它，然后将其粘贴到样式指南文档中。复制并粘贴“主图层样式”元素，然后编辑图层样式并删除笔触。
要创建三个统计框，首先要创建三个白色矩形形状，可以在380px之间平均分配。完成此操作后，选择其中一个并通过右键单击图层再次打开图层样式面板。然后选择“内部阴影”。确保“混合模式”设置为正常，不透明度设置为100％。将角度设置为“-90”并将距离更改为5px。对于颜色，请使用我们的主蓝色＃a4d4e8。然后在其他2个统计框上重复此过程，但这次将其内部阴影颜色更改为每种二次颜色; 绿色＃aee1a3和红色＃f67f77。然后为每个统计信息添加文本。在我的作品中，我选择展示追随者，追随者和帖子的数量。
要添加作者的文字和简历，我选择使用“Droid Sans”，以Google网络字体的形式提供。
对于作者卡片右上角的小角三角形，使用我们的原色蓝色创建一个50px x 50px的正方形，然后选择“多边形套索工具”。从正方形的左上角到右下角绘制一条直线，然后围绕正方形的左侧绘制。完成此操作后，选择“图层”>“图层蒙版”>“隐藏选区”，这将创建三角形。
对于星形选择“多边形”形状工具。确保顶部菜单中的边设置为“5”。然后选择位于“Sides”一词旁边的小箭头。选择星号并将“缩小边数”设置为50％。然后在三角形顶部绘制一个白色星形并将其放在作者卡片的右上角。
博客文章组件的创建方式与我们在上面创建作者卡的主要元素的方式相同。
我已经为此添加了“主图层样式”。70px x 70px图像缩略图放置在此左上角。我创造了三种不同的文字风格; 主要标题，日期和段落文本。在右下角，我添加了一个“阅读更多”按钮。请参阅步骤6以创建按钮。
要创建实际的注释气泡，请创建一个316px x 90px的圆角矩形，并为此添加“主图层样式”。
创建一个15px x 15px的方形并旋转此编辑>变换路径>旋转，然后从选项菜单中旋转45度。选择实际的形状图层，然后转到编辑>复制，然后转到我们刚刚创建的大圆角矩形。确保正方形排列在您希望尖端移动的任何位置。然后转到编辑>粘贴，这将合并两个形状。添加主图层样式，并有语音泡沫！
我决定添加两个帖子评论组件; 一个是标准评论组件，另一个是作者评论。对于作者示例，我已将笔划更改为主要蓝色。
按钮相对容易创建，因为我们在进入样式指南之前已经建立了一些指导。
要创建一个大按钮，请选择“圆角矩形”工具。从“选项”栏中确保将半径设置为“5px”并绘制一个125px x 40px的主蓝色矩形。然后添加您选择的文本。通过右键单击图层并选择“复制图层”来复制图层。完成后，将其颜色更改为我们的二次颜色之一。对具有其他辅助颜色的按钮重复此过程。此外，对小按钮重复此过程，但这次使矩形为30px x 105px，对于“号召性用语按钮”，使其为374px x 40px。
对于悬停状态，我通过添加“渐变叠加”图层样式添加了一个微妙的渐变。将颜色模式设置为“正常”，将不透明度设置为10％，渐变从黑色变为白色。这只是一个用户已经翻过按钮的暗示。
对于分组按钮组，创建一个380px x 30px宽的圆角矩形，然后将其拆分为四个大小相等的按钮。您可以通过绘制1px铅笔线或使用1px'矩形选框'工具切割部分来完成此操作。
分页的创建方式与我们刚刚创建的分组按钮集类似。但这一次，不是将其创建为四个大小相同的按钮，而是创建十个大小相同的方形按钮，两端的箭头按钮稍大一些。下图显示了这一点。对于箭头，我使用了一些专门用于网页设计箭头的预制形状。
到现在为止，你应该意识到我们通过重复很多元素和风格来为自己创造生活是多么容易。关于这一点的好处是它在我们的设计中创造了一致性。
此集的输入和textareas是使用我们之前使用的方法创建的。对于输入，绘制一个380px x 40px的圆角矩形并应用笔触颜色。将textarea的高度稍微延伸至90px左右。为了关注元素，我使用了“主图层样式”，并为错误和成功消息添加了额外的元素。
您需要为样式指南创建多少元素。您将了解您正在处理的网站的要求，并将了解您将需要和不需要的内容。创建样式指南的好处在于，您将来引入的任何元素都将具有需要遵守的规则和实践，并且将在此内部保持一致性。
杭州网站建设它将使用户熟悉并在美学和功能上实现整体更好的体验。
3
s后返回登录
3
s后返回登录
