网站设计最佳实践

日期: 2023-10-23 10:47

1. 选择易于阅读和浏览的排版。

排版是指类型(即字母和字符)在页面上的排列和呈现方式。由于网站排版不仅会影响我们的阅读方式,还会影响我们对网页上文本的感受,因此仔细选择非常重要。

理想情况下,您需要一种字体:

易于阅读

易于撇脂

所有用户均可访问

在多种设备和屏幕尺寸下清晰易读

您还希望它与您的品牌外观和感觉相匹配。例如,奢侈时尚品牌巴宝莉(Burberry)在2018年20年来首次刷新了其标志。它用粗体、全大写、无衬线字体取代了旧的衬线字体,并放弃了骑士标志。结果是一个更简单、更现代的标志,在任何屏幕上都更容易阅读——这反映了公司的变化,变得更加透明并吸引年轻一代。

2. 选择适合您品牌的配色方案。

像排版一样,颜色不仅会影响我们对内容的理解和互动方式,还会影响我们对内容的感受。因此,您的配色方案应选中与您的网站排版相同的框。它应该:

强化您的品牌形象

使您的网站易于阅读和导航

唤起情感

好看

例如,Buzzfeed使用黄色和红色的原色来吸引用户的注意力,让他们对内容感到兴奋。它保留对与信任相关的原色蓝色的使用,仅用于链接和CTA按钮。这两种情绪都是媒体网站的理想选择。

遵循网站设计最佳实践,Buzzfeed调色板唤起了兴奋和信任

3.使用空格来分解文本和其他元素。

空白是指任何构图中的负区域。空白为用户提供了处理网站设计或内容时的视觉中断,这不仅在美学上令人愉悦。通过最大限度地减少干扰,空白使用户更容易集中注意力、处理信息并理解其重要性。

这意味着您可以使用空格来避免导致信息过载或分析瘫痪,并强调页面上的重要元素。这可能有助于说服用户采取特定操作,例如注册简报、购买最新产品系列等。

例如,Eb & flow Yoga Studio使用空白来引导用户进行特定操作:注册三周的课程。请注意,空格并不意味着没有颜色或图像。相反,这意味着页面上的每个元素都经过战略性定位,中间有很多空间,以避免压倒或混淆访问者。

Eb & Flow Yoga Studio遵循网站设计最佳实践,使用空格引导用户点击CTA


4.使用纹理来增加个性和深度。

类似于三维触觉表面,网络纹理旨在通过另一种感觉——视觉来复制触觉的物理感觉。它们是纯色背景的绝佳设计替代品,特别是如果您想为您的网站添加个性和深度。

看看下面圣巴巴拉餐厅Mony's Tacos主页上的纹理。它看起来像在黑板上画的粉笔,不是吗?我不了解你,但光是看它,我几乎能感觉到手指上的粉笔。对于一家旨在成为加州首选墨西哥美食的放克区选择的餐厅来说,这是完美的外观。

Monys主页遵循网站设计最佳实践,使用网页纹理类似于在黑板上绘制的粉笔

5. 添加图像以吸引和告知读者。

在网站设计中,在文本和图像之间取得平衡至关重要。结合视觉效果可以使您的内容更具信息性、吸引力和令人难忘。你可能听说过这样的统计数据:人们只记得他们阅读内容的20%,但他们看到的80%?虽然确切的百分比存在争议,但基本思想并非如此。有些人更容易直观地学习和处理信息。

这是一个使用化妆品公司网站上的图像分解文本的独特示例。这表明将图像纳入您的网站设计的可能性是无穷无尽的。

玛吉·罗斯(Maggie Rose)在网站设计最佳实践的精湛例子中将文本与图像分开

6. 简化导航。

导航是网站上最重要的设计元素之一。它会影响访问者是到达您的主页并浏览,还是单击“返回”按钮。这就是为什么保持尽可能简单很重要的原因。

许多网站选择水平导航栏。此导航样式并排列出主要页面,并放置在网站标题中。

以Blavity上的导航栏为例。特色部分包括三个内容类别 - “新闻”,“专栏文章”和“生活方式” - 以及指向其提交页面和注册页面的链接。这使访问者可以轻松访问他们可能正在寻找的页面。其他导航项放置在标有“更多”的下拉菜单中,因此它们仍然易于查找,但不会杂乱无章地放入顶级导航中。最后,导航栏是粘性的,因此访问者不必上下滚动页面即可浏览网站。

7. 让您的 CTA 脱颖而出。

CTA 是网页、广告或其他内容上的元素,鼓励受众做某事。号召性用语可以是注册、订阅、开始免费试用或了解更多信息等等。

您希望您的CTA出现在您的网站设计中。为此,请考虑如何使用颜色以及其他元素,如背景颜色、周围图像和周围文本。

Square 提供了一个出色的号召性用语示例。使用单个图像来展示使用其产品的简单性,Square使用大胆的排版来展示其产品的独特性和面向未来的功能。在这种戏剧性的背景下,蓝色的“开始使用”CTA等待您的点击。

Square 使用颜色和独特的姿势使他们的 CTA 在他们的网站设计中流行起来图片来源

8. 针对移动设备进行优化。

我们已经讨论了您的网站响应速度的重要性。但是,由于移动设备占 2021 年自然搜索引擎访问量的 59%,因此我们将加倍强调将您的网站设计为适合移动设备的重要性。这可能意味着更改或删除一些元素,这些元素会使较小的屏幕尺寸混乱或对加载时间产生负面影响。

有关最佳移动网站设计之一的示例,请比较Etsy在桌面和移动设备上的主页。在桌面上,您将看到一个包含类别的导航栏。将鼠标悬停在每个类别上将显示一个下拉菜单。

桌面上的 Etsy 主页

在移动设备上,它会折叠在汉堡包按钮后面,从而改善移动网站的外观和性能。您还会注意到图像更大 - 非常适合用手指在移动屏幕上点击。

Etsy移动主页

9. 限制向用户显示的选项。

根据希克定律,增加选择的数量和复杂性会增加一个人做出决定所需的时间。这在网站设计中是个坏消息。如果网站访问者看到太多选项,他们可能会感到沮丧并反弹——或者他们可能会选择您不想要的选项,例如放弃购物车。这就是为什么限制向用户显示的选项数量很重要的原因。

例如,登陆Shawn Michelle's Ice Cream主页的访问者将有三个选择:了解有关公司,口味或成分的更多信息。但是,它们不是同时显示所有三个选项,而是在滑块中一次显示一个。这是在UX设计中实现希克定律的一个很好的例子。肖恩·米歇尔冰淇淋主页使用图像滑块一次展示一个 CTA

专业提示:没有时间遵守规则?您可以随时下载预先构建的网站模板,该模板将为您的网站提供良好的基础。

现在,我们了解了在整个设计过程中指导您的原则和最佳实践。在下一节中,让我们介绍一下您应该强烈考虑包含在设计计划中的基本页面元素。

TAG标签: 网页设计

上一篇:网站设计指南     下一篇:网站设计的10点要求

首页
报价
案例
联系