有效网页设计的8个基本原则
AWS 安全上线!
网页设计是网页设计流程中的一个重要组成部分。如果您对网页设计充满热情,我们相信您拥有非凡的创造力。
既然如此,你怎能不为着手创建自己的网站而感到兴奋呢?网页设计的意义在于创造实用美观的作品——那么,该从何入手呢?无论您在开始之前需要了解哪些信息,本指南都能为您提供帮助。
您可能还有兴趣探索2021 年 10 大 UI/UX 设计趋势。
1. 可访问性
网络的本质是为所有用户而构建的,无论其技术、软件、语言、地理位置或能力如何。当网络实现这一目标时,无论听力、行动能力、视力和认知能力如何,都能广泛地访问它。
因此,障碍对网络的影响得到了显著改善,因为网络消除了许多个人在现实世界中遇到的沟通和联系障碍。然而,如果网站、程序、技术或服务构建不当,则可能会造成阻碍,阻碍人们访问网络。
对于希望打造高质量网站和在线工具,同时又不妨碍用户访问其产品和服务的开发者和组织而言,无障碍功能至关重要。这些CSS 标签页就是无障碍实现的良好范例。
网络无障碍是指网站、工具或技术的创建和开发,方便残障人士使用。更具体地说,人类可以:
- 感知、解释、导航和参与网络
- 为网络做贡献
2.视觉层次
视觉层次结构是指按重要性升序或降序排列组件。这是通过比例、颜色、图像、对比度、字体、空白、纹理和样式来实现的。
视觉层次结构的一个重要目的是提供一个焦点;这向访问者表明最重要的信息位于何处。
3. Web安全字体
网络安全字体是指那些能够适应任何设备上所有浏览器的字体。通过使用这些字体,网页开发者可以确保即使用户的电脑没有安装这些字体,网页也能始终正确显示所需的字体。
以前,假设用户的计算机上没有安装与您的网站关联的字体。在这种情况下,他们的浏览器将显示通用字体(例如 Times New Roman)作为后备字体。
因此,营销人员并不了解他们的网页是如何呈现给最终用户的。如果页面内容没有完全适应新的字体,用户可能会遇到功能和设计上的困难。
在线安全字体解决了这个问题,并已成为网页设计中事实上的标准。使用网络安全字体,您可以确保文本始终正确显示。最棒的是,您不必局限于衬线字体。不妨考虑一下衬线字体的种类。
4. 排版
尽管文本占据了网站的大部分空间,并且阅读是人们在线从事的主要活动之一,但排版对网站整体性能的影响有时会被低估。
如果您的网站掌握了字体排印的基础知识,它将远远领先于竞争对手。首先,无衬线字体——外观现代、没有装饰效果的无衬线字体——例如 Arial、Helvetica 和 Verdana——是在线阅读最简单的字体。
16px 是最佳字体大小。此外,为了获得流畅的设计,建议最多使用 3 号字体。同样,标题、正文和按钮等组件也最好最多使用三种字体。
Alexander Sakhnenko 的网站是简洁字体设计的杰出典范。该网站使用有限的字体类型和颜色,以将用户的注意力集中在内容上。
5. 颜色
颜色可以传达信息并引发情感反应。选择适合您品牌的配色方案,可以影响客户的行为。在2021年的网页设计趋势中,选择舒适的色彩至关重要。
将调色板限制在五种色调以内。互补色是有效的。赏心悦目的颜色选择可以提升消费者的参与度,并让用户感到愉悦。
6.网格布局
网格有助于构建你的设计并组织你的信息。网格有助于对齐页面上的对象并保持页面的整洁。这份全面的CSS 框架列表将是你设计库中宝贵的补充。
基于网格的风格将材料组织成一个简单的刚性网格结构,其中的列和部分对齐、看起来平衡并强制排序,从而形成一个美观的网站。
7.F 图案设计
F 型图案确实是访客在浏览网站内容时最常用的图案。根据眼动追踪研究,人们大部分的视线都集中在屏幕的上角和左上角。
F形布局体现了西方世界的自然阅读模式(从左到右,从上到下)。一个设计精良的网站会遵循读者浏览页面的自然节奏。
8. 响应式
您可能听说过响应式设计,因为这个概念已经存在一段时间了。响应式网页设计 (RWD) 是一种网页设计方法,致力于为网站访问者在各种设备上提供最佳的浏览体验。
创建响应式网站时,使用比例网格、灵活大小的图像或通过 CSS 的媒体查询。
在当今的环境下,您通常应该致力于设计一个响应式网站。使用移动设备访问网站的移动用户数量将持续增长,因此请确保您的网站构建在一个能够为所有屏幕尺寸的用户提供最佳体验的平台上。
否则,您可能会给无法通过手机访问您的资料的访问者留下负面印象,甚至可能永远不会再回来访问!
结论
在开始任何设计工作之前,了解网站的主要目的、目标和目标受众至关重要。遵循上述设计准则,您就已经领先于成千上万个其他网站一步。
图片来源
感谢Unsplash为互联网提供了可自由使用的图像来源,这些图像由世界各地的创作者提供支持。
很高兴收到你的来信:)
鏂囩珷鏉ユ簮锛�https://dev.to/imiahazel/8-fundamental-principles-of- effective-web-design-196l