设计和可用性的重要性
设计和可用性的重要性
嗨，我是姬莉，我是一个网页设计师在WebFX。
欢迎来到我们的FXLiveGuide系列的第五个视频，设计和可用性的重要性。
我们已经讨论过了搜索引擎优化的基本知识，如何做关键词调研，内容创作,线下SEO．今天我们要讲的是设计和可用性的重要性在网络上。
东西的设计方式和用户与它的交互方式对于人们如何在你的网站上转换以及你如何让人们填写你的表单是非常重要的。
当用户有15分钟的阅读时间时，三分之二的人会选择阅读时间较长的内容设计精美而不是设计糟糕的东西。
如果内容被分成不同的部分，以独特的方式布局，而不是简单地放在页面上，你需要阅读10页的内容，那么它更容易消化。57%的客户他们不会推荐一个手机网站设计糟糕的公司，而且40%的用户转向了设计更好的竞争对手网站。
现在很多用户都用手机来浏览这些网站，所以确保你在移动设备上测试站点．移动购物者转换多160%。在专门为智能手机优化的网站上。
所以如果你去一个网站，你的网站只是优化，缩小你的桌面版本，你会看到链接超级小，你将无法点击。用户会离开网站，去一个链接更容易点击的网站，在网站上，结账或查找更多信息的过程更流畅，更容易消化——而且可读性强。
现在让我们谈谈一些重要的因素良好的网页设计。
比如调色板，还有字体、图片，以及它们如何融合在一起创建你的网站。
选择调色板
让我们先从选择调色板．选择一个调色板是给你的品牌一个强大的标识的关键。大多数公司都有一个主要的颜色，使他们的品牌可识别。例如，当你想到可口可乐时，你首先想到的颜色是红色。
举个例子，当你想到可口可乐时，红色会让你感到爱和兴奋，这正是可口可乐想让你做的——为他们的产品感到兴奋，他们想让你喜欢他们的产品。
红色也会给人一种紧迫感，让人想去买，比如可口可乐。想想所有使用红色的商店和产品——亨氏、H&M、温迪、塔吉特——他们都有一种紧迫感，让你去那些地方买东西，沿着这些路线。
在确定了站点的主色之后，接下来要选择强调色，这将是配色方案的一部分。
您可以使用一些资源来做到这一点。我最喜欢的是Adobe的Kuler。任何人都可以上这个网站，你不需要有Adobe账户。你可以在那里选择颜色，它非常灵活。你可以搜索已经创建的配色方案，你可以搜索“棉花糖”，它会弹出蓝色和粉色，以及人们认为的不同组合变体，让他们想起棉花糖。
或者你可以创建你自己的，你把主色放进去，然后你可以选择单色，或者互补色，然后它会给你这些颜色的变化。
我通常从一个调色板开始，然后我会修改颜色，以匹配更多我想要的品牌。
当你在网站上使用颜色时，有一个非常重要的文字-动作颜色。
例如，在WebFX网站上，我们的行动号召颜色是黄色和亮绿色。我们网站上的那些按钮很重要，我们希望人们点击这些按钮进入一个表单，或者了解对我们非常重要的东西。
网站上的其他按钮更微妙，它们是蓝色的，蓝色的深浅不同，所以它们在网站上不那么显眼。我们想要确保这种颜色突出，只用于你想要拉出来的东西上，你想让人们做的事情上，这样你就不会过度使用它，然后它就变得不那么重要了。
在你选择好配色方案后，你将继续进行网页设计的下一个重要因素，即选择字体。市面上有很多不同的字体。我们通常在网站上使用谷歌字体，因为它们很容易访问，每个人都可以在自己的浏览器上看到它们。
选择字体
有不同的类型的字体-你可以选择衬线，无衬线，脚本，然后有变化这些字体．
衬线字体是指在字母的底部和顶部有小脚的字体。这些通常被认为看起来更严肃，更传统，更复杂。
另一方面，无衬线鞋是没有脚的鞋，它们是平的，更现代，看起来更干净。这些字体更加流线型，可以更好地用于网页浏览和阅读。
脚本是我们认为的草书和手写字体。它们有时会在网站上用于强调字体或花哨的行动呼吁，但我们不经常使用它们，因为它们很难阅读。
web上的衬线很难阅读，因为分辨率和低分辨率下的衬线在屏幕上的位置使它们模糊，难以阅读。
在选择字体时，您需要考虑是要使用全大写、小写，还是要使用它们的组合。
当你使用全大写时，你会发出一种更严肃、更苛刻的语气。当你使用小写字母时，它更柔和、友好和欢迎。
你不想和大写字母握手，你宁愿和小写字母握手，因为它们更友好和欢迎。
对于像CAT这样的公司，我通常会使用大写字母，因为他们很严肃，他们是一家工业公司，他们的设备很重——所以这意味着要使用更重的字体。
在网络上混合使用字体是可以的，所以你可以使用一些大写字母和小写字母，并以适合该客户端的方式将它们组合起来。
H标签的层次结构
选择好字体后，需要选择字体的层次结构H标记．所以我通常使用一个叫做grid lover的网站，你输入你的第一个H标签的大小，也就是你的H1，然后它会扩展到其他的大小，你可以调整它。
你可以复制这些并把它们放到你的CSS中，这样所有的东西都是一致的，每个标题标题上下的间距在整个网站中都是相同的，所有的东西都是一致的。
这就是所谓的垂直节奏!
创建图形
在您选择了您的字体后，您将继续选择您的图像和创造你的图形,信息图。
这些都是网站的重要元素，可以让网站看起来更漂亮、更有条理，也会让用户喜欢看你的网站。
当你在你的网站上放置图片时，你不希望它们只是扑通一声出现在页面上。你必须考虑他们应该去哪里。
你应该考虑图像的颜色，假设你有一张非常明亮和阳光灿烂的图像，然后另一张图像是暗淡的和不那么阳光灿烂的。你要确保你的图像饱和度和值相似，这样它们看起来在网站上是有凝聚力的，图像融合在一起。
或者你可以对图像做一个效果，你把图像放入Photoshop，或者其他程序，比如帆布，给它们一个滤镜，改变饱和度，让它们更好地匹配。
当你在你的网站上放置图片时，你会想要以战略性的方式放置它们。假设你有一位女士在往下看。人们会跟随她的目光向下浏览页面，所以你应该在那里放一个行动号召，这样人们就会知道，“嘿，这位女士正在看这个按钮，我可能应该点击它来了解更多。”
你将不得不决定你想要的图片是全宽的，或者你想要他们裁剪并有一个风格，他们有边框和标题，或没有标题，以及他们如何坐在旁边的文本。
如果你制作的是全宽图像，你需要确保图像在所有不同的设备上看起来都很好，而不仅仅是在桌面上。所以，如果一个观众正在看手机，你不希望他们只看到眉毛，你要确保图像适当缩小，这样你就能看到整个人，你知道图像指向什么，它与文本匹配得很好。
像这样的小细节可以帮助页面更好地转换，就像之前当女士在看按钮时，人们会想要点击这个按钮而不是不点击她在看页面外的按钮。这样就能让观众的目光停留在页面上。
如果你没有Photoshop或者其他高级的编辑软件，有很多免费的软件供你使用。
你可以使用Canva，它已经制作了模板，你可以上传你的图片到模板，修改颜色，然后它就会匹配你的品牌。
颜色、字体和图像都是导致良好可用性体验的元素。当用户来到你的网站时，他们不需要费力地思考——你希望它简单而直接。他们不想在访问你的网站时感到愚蠢或迷失，所以你必须确保网站非常精简，并且直奔主题。
内容组织
为了实现这一点，站点需要做一些事情。内容需要以一种直观的方式组织起来——它让用户知道他们知道自己在做什么。
例如，在一个税务网站上，你说你谷歌“免费报税”，然后一个网站出现了-你点击第一个链接，你进入该网站，它看起来一团糟。它是灰色的，无聊的，你不知道点击什么，因为没有什么吸引你的注意力，所以你离开了。
你去另一个网站，比如Turbo Tax。你点开它，它马上就会说，“让我们开始吧!”你会看到顶部的巨大按钮，让你想要阅读标题，“今天让我们帮助你”，或类似的内容。
然后，这会让你确信你知道你要做什么——你会得到帮助，而且会很简单。
你要想清楚这一点，这是非常重要的——你需要确保网站地图不仅对你有意义，而且对其他浏览这个网站的人也有意义。在你开始设计任何东西之前，你需要先把这些安排好。
你会想要把页面按一种对很多人都有意义的顺序排列。所以你不会想把博客放在服务目录下——人们不会知道在服务目录下查找博客这个词或找到博客。
你要把东西的位置弄清楚。
你的导航栏作为在站点中导航的一种方式，所以您需要确保组织良好，并且在桌面、平板电脑和移动设备上都很容易看到。
页面加载时间
另一个起重要作用的因素是你的页面加载有多快．重要的是，你的图片要针对网页进行优化，你所有的文件都经过压缩和上传，这样你的网站才不会慢，当有人访问你的网站时，他们必须永远等待加载时，网站才不会滞后。
你可以使用一些免费的资源来优化你的图像。你只要把你的图片放进去，它就会运行，它会把它们压缩到一个更小的文件大小，这样图像的质量是一样的，但它们的文件大小更小。
另一个是小png。它压缩ping文件，使它们更小，在你的网站上仍然是可见的，而不会变得模糊和失去分辨率。
将所有CSS保存在一个文件中对于页面速度非常重要。你不希望它展开，或与你的文本显示一致。你会希望所有的内容都放在一个文件中，如果可能的话，尽量减少CSS并将其作为一个文件，因为这将提高你的网站速度。
你可以通过一个页面速度测试，每一页，如果你想通过GTMetrix。这样你就能清楚地知道哪些是有效的，哪些是无效的，哪些是可以修复的。
它会告诉你需要进一步优化的图片，或者太大而无法优化的JavaScript文件，或者可以组合起来使其具有更快的页面速度的CSS文件。
批判性地思考你的设计
可用性和设计是齐头并进的。为了有一个良好的用户体验，你需要有一个好的设计并理解它。
实现这一目标的最佳方法是拥有一个经过深思熟虑的设计，并确保它对所有人来说都是直观的。
此外，如果它不是以直观的方式，或布局得很好，人们会认为它不值得信任。值得信赖是转化的一个重要因素——如果你的网站看起来很噱头，或者很便宜，人们就不会信任你的产品，即使它很好。
我有一些建议，你可以创建一个健全的网站设计和可用性。
首先你要记住缩写kiss，意思是保持简单，笨蛋。确保它是简单的——不要做得太多。你想要的东西不是超级复杂，而且对每个人来说都很容易使用。
其次，你要确保你在使用最好的网页设计实践。你不应该让所有的文字都成为图片的一部分，你应该让CSS和超文本标记语言．它不应该只是上传的图片拼凑在一起，并希望它能很好地缩小。
你应该在开始构建之前在Photoshop中创建原型，这样你就可以在开始构建之前知道你拥有什么和你计划做什么。
一个很好的Photoshop插件是GuideGuide，它为你提供了一组指南，你可以使用你的引导插件。
第三，你会想要测试它。你会想要测试你的网站，确保它在所有的浏览器，不同的设备上都能工作，在你的浏览器中缩小它的规模，并让其他人也测试它，以防你错过了什么，因为很容易忽略一些东西。
你也可以在UsabilityHub中测试它，如果你想看看某些东西是否设计得很好，这是非常有用的。你可以看看人们推荐的东西，你想要改变的项目，然后你可以在做出这些改变后重新运行它，看看你是否得到了更好的结果。
网站设计和可用性涉及的内容太多了，但当你做得正确时，你可以极大地增加网站流量。
感谢您今天的加入!敬请期待下个视频，如何衡量SEO的成功！
