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