印象很重要。而且，对于网站而言，印象往往是至关重要的 - 如果用户发现您的网站容易混淆，您可能会永远丢失它们。如果你正在运行博客或在线杂志，这意味着你已经失去了一个读者。如果您经营一家公司，这意味着您已经失去了销售。

　　那么，您如何建立一个能够吸引用户注意力并使他们保持足够的参与度以阅读更多文章，反复访问您的业务或购买您的产品的网站？

　　在设计网站方面没有灵丹妙药，有多种方式可以创建一个外观漂亮的网站。

　　但是，有一些主题和原则支持伟大的网页设计，我们将帮助您将它们应用到您的网站。

　　在本指南中：

　　网站设计原则

　　网站结构

　　网站生成器模板

　　网站设计原则

　　您应该记住的一个口头禅是您的网站设计需要为您的访问者工作。

　　我们采访了营销公司MVF Global的UX架构师Saleh Kayyali。

　　Kayyali说，在开始构建网站之前，你需要做两件事：

　　您网站的目的是什么

　　您网站的用户是谁

　　这些应该告知您在网站上做出的每个决定，从名称，主页设计到内容。如果您不确定谁将会查看您的网站，或者您的网站目的是什么，那么它可能对任何用户都没有帮助，也不会对您失败。

　　Kayyali指出Snapchat是一项对其用户和目的有深刻理解的服务 - 在2017年11月重新设计之前。它的目的是促进15-20岁之间的有趣，不敬的视觉交流。事实上，Snapchat对这个人群的定位如此之多，以至于许多老年人根本无法理解其实用性，甚至无法理解其如何运作。

　　Snapchat在2017年底的重新设计表明，它从根本上误读了用户和应用程序的目的。随着它变得越来越受欢迎，Snapchat的用户群自然多样化，这个更新的用户群更容易接受赞助和特色内容，无论是来自Vice还是华盛顿邮报。

　　但是，其核心用户群不容易接受。Snapchat也忽视了它的目的 - 有趣的沟通 - 并且开始沉迷其平台货币化。其核心用户群反应严重，估值损失超过10亿美元。一切都是因为重新设计。

       Snapchat重新设计

　　Snapchat重新设计之前和之后（信用：XDA开发人员）

　　因此，了解您的用户和您网站的目的是值得的。但是，您如何首先了解这些中的任何一个？

　　了解你的目的

　　了解您网站的目的听起来很明显，但Snapchat显示您可以获得它的错误。例如，假设您正在为销售手工皂的公司建立一个网站。您网站的目的是销售肥皂。

　　当然，它可能还有其他方面，例如谈论你的肥皂与传统竞争对手的可持续性。但是，如果你不卖肥皂，那么你的网站就不会成功。

　　了解您的用户

　　Kayyali解释说，一旦确定了网站的目的，您需要查看您想要吸引的人的类型。

　　例如，如果您销售手工皂，那么您的目标受众可能不会是15-20岁，就像Snapchat一样。相反，您的用户可能是30-50岁，可支配收入更多，可用于肥皂。

　　一个有用的提示是通过创建所谓的角色来将目标用户分解为不同的组。正如Kayyali所说，这些是“代表一组用户的普遍化，虚构的人”。

　　创建这些角色的方式是研究您的市场。看看与您类似的其他网站：您是否想要效仿另一家肥皂公司 - 例如Burts Bees？如果您已经构建了自己的网站，是否可以调查现有用户以了解他们是谁以及他们喜欢什么？或者与家人和朋友讨论您的网站以及您网站发布的图片。

　　通过积累这些知识，您将能够找到用户的需求。他们想快速购买花式肥皂并继续前进吗？他们只购买与他们有亲和力的品牌吗？可能他们甚至想要重复肥皂订单？

　　无论你发现什么，你都需要先把这些需求放在首位。

　　网站结构

　　但是，在设计网站结构时，这意味着什么呢？作为一个例子，我们将坚持使用我们想象中的肥皂店。

　　我们建议在Tech.Co.使用网站建设者。这些现代工具提供了简单，便宜和简单的方法来自己构建网站。

　　像Wix这样的网站提供了很棒的模板，可以为您提供网站的核心架构。尽管如此，考虑用户如何从主页，选择产品，购买它，仍然值得勾勒出您理想的网站。

　　您应该考虑尽可能简化此过程，同时请记住，人们可能希望在最后一刻添加产品，或者稍后再回到订单。

　　当然，这会因每个网站而异。由于我们只销售肥皂，我们希望允许用户灵活地修改订单，或者在选择和购买产品之间来回跳转。但是，如果我们是一家航空公司，我们需要一个更加规范的系统，帮助我们的用户正确预订机票。

　　Kayyali说好的网站“消除认知努力”。这意味着，虽然用户完全了解他们在您的网站上所采取的决策和行动，但这些决不应该让您感到辛苦。

　　网站美学

　　你可能会对我们说这个很无聊，但想想你的用户。

　　如果您的用户正在寻找一家生产可持续天然肥皂的肥皂公司，那么他们希望在您的网站上看到这一点。想想自然的图像，看起来健康的人，以及对您的环保信誉的参考。但是，如果您的肥皂公司销售经过严格测试的临床肥皂，您可能需要更简约的美学，这表明科学的清洁度。

　　这也值得研究设计趋势。例如，由于计算机害羞的用户可以立即理解不同元素的功能，因此曾经非常受欢迎的拟态风格。网站中的Skeuomorphism是明确设计屏幕项目以模仿真实世界的对应物 - 例如此页面上的日历和记事本。

　　Skeuomorphic网站设计

　　这被平面设计取代，平面设计强调可用性，清晰，清晰描绘的元素具有明显的目的 - 如下面的网站。平面设计网站也倾向于在移动设备上更好地工作。

　　围绕平面设计建立的网站示例，最近我们看到很多设计利用阴影和滚动纹理而不是简单的扁平元素。这些对于维护用户在网站上的参与度非常有用。毕竟，滚动比点击更容易 - 特别是在移动设备上。但是，值得确保滚动的目的仍然很明显。

　　滚动设计示例网站配色方案

　　一旦您建立了网站的一般美学，您就可以选择一种配色方案。这不一定需要保持一致 - 但它确实需要反映您的品牌。

　　事实上，更改配色方案有助于区分您销售的产品。例如，看看Apple改变每个iPhone的颜色主题的方式。

　　iPhone X iPhone 8 iPhone 7产品页面再次，选择配色方案在很大程度上取决于用户的文化。Snapchat虽然相对落后于优雅，却坚持使用大胆的原色，使其在年轻观众中如此受欢迎。

　　谷歌的网站颜色极简主义，突出了其品牌标识的大胆原色。这提供了一致性，并清楚地表明其无数产品中的哪些产品具有哪些功能。

　　华硕'游戏玩家共同体子品牌严重依赖黑色和红色，使其产品和网站看起来很严肃，甚至是男子气概 - 正是其用户所追求的。

　　为您的网站选择字体

　　如果你想，你可以在字体和字体方面让自己陷入兔子洞。

　　例如，Serif字体在每个字母的末尾都有很少的线条。Sans-serif字体，就像我们在Tech.Co上使用的Arial一样，没有这些小行。

　　等宽字体使所有字母占据页面上相同的水平空间 - 例如，这意味着“l”与“m”一样宽。脚本字体有许多子类（基本上是模仿手写的字体）。

　　Blackletter字体具有宽而重的字母，还有装饰字体，如bauhaus，专为海报和标志设计。

　　就像我们说的那样，在选择字体时会有一个兔子洞。

　　但是，只要您根据用户的文化和您想要创建的品牌类型选择字体。它不必在您的网站上保持一致，但有明确的理由选择为什么不同的部分将具有不同的字体 - 它需要反映网站该方面的目的。

　　回到我们想象中的肥皂公司 - 我们会避免使用诸如Times New Roman之类的衬线字体作为标识和标题，因为它们可以是老式的（除非这是您想要的体验）。显示Cooper Black等字体可能适合徽标和导航按钮。但是，对于冗长的文本，如产品描述或条款和条件，您需要一种易于阅读的字体，如Arial。