网站建设资讯

网站设计必须遵守的10大规则

2018-9-17  |  阅读量:

在网站设计方面你有规则手册吗?有一些规则适用于几乎所有的网页设计项目 - 我们称之为“网页设计规则”。

无论网站多大或多小,这些规则都是良好设计的基础。如果您遵循这些基本指导方针,并将其纳入您开始的每个项目的思考过程中,那么您将避免许多设计师可能陷入的陷阱!


1.你会一致

 让设计尽可能简单,以便用户与之交互
 一致的设计易于使用和理解设计。用户参与和行动以及视觉效果在整个单一设计中的外观和使用应该相似。

这意味着按钮颜色相同,并且使用相同的悬停状态来帮助用户了解如何进行交互,标题的大小相同,并在整个设计中使用相同的字体,并且诸如颜色之类的元素遵循可识别并与之关联的调色板品牌。

其他视觉元素也应遵循一致的风格,以及图标或摄影,视频或插图等元素的风格和使用计划。该设计应该有一个用于与整体美学相匹配的复制块的声音。

所有这些一致性元素都有助于提高整体可用性,使设计尽可能方便用户进行交互。


 2.你要用空白

 元素周围的额外空间可以帮助创建分离并使其更易于阅读。
 没有必要将每个元素都塞进滚动条上方的空间。使用空格建立节奏和流程,创建视觉层次结构并帮助用户在设计中移动。

 如果内容是好的,他们将滚动。

 而空白实际上可以通过将视线拉到屏幕上来帮助鼓励用户行为。

 随着屏幕尺寸变小,空白显得更加重要。元素周围的额外空间可以帮助创建分离并使其更易于阅读。(考虑轻松点击按钮时多余的空间可以带来多大的益处。)

 不确定在设计中包含空白的地方?从这里开始:

 围绕按钮或其他交互元素
 由于线条之间的线条间距使阅读更容易
 元素之间的东西是分开的,例如将文本块中嵌入的照片包裹起来
 在表单字段中,以便在移动屏幕上轻松点按
 围绕您希望用户关注的任何元素


3.你会使用网格

网格是用户体验的基础。当您使用网格进行设计时,最终网站会更加精确,一致,并且将元素按照视觉上的顺序排列。

网格既是水平的也是垂直的,尽管最着名的网页设计网格可能是用于对齐元素的12列垂直网格。

只有在设计过程中才会看到网格,如果您在查找元素的位置或创建有组织的大纲时遇到问题,网格可能会成为完整的救星。


4.你不会忘记用户模式

 用户以某种方式做事,期望从设计中获得具体的东西。为了获得尽可能多的成功,设计应该使用普遍接受的用户模式(设计问题的循环解决方案),以便人们确切知道设计的功能。

 常见的用户模式包括:

 表单中的信息顺序,以名称或电子邮件开始并以“提交”结尾
 导航菜单的放置
 电子商务的购物车图标的位置和可点击性
 通知如何工作
 搜索和聊天的图标等等
 用户界面设计模式在所有类型的设计情况下都有很长的用户模式列表。


5.在UI操作中使用相似性

 网站设计中的每个元素都应该像其他所有类型的元素一样工作。这些元素还应具有视觉识别,以便用户一眼就能知道他们是什么以及他们做了什么。

 有许多用户界面操作可以嵌入到设计中,遵循格式塔相似性原则是必须的。将视觉元素和操作分组以便它们在视觉上可识别将有助于为用户创造更好的整体体验。

 

6.你应该使用印刷术

 从设计中退出,看看字母是否易于远距离阅读。
 你不必是一个主要的印刷工,但它绝对有帮助。

 如此多的构成优秀设计的根源在于可读性和易读性。这些概念取决于你如何选择和使用字体。

 如果有疑问,请选择简单的字体对,如serif和sans serif。从设计中退出,看看字母是否易于远距离阅读。然后看一下手机屏幕等小画布上的字母,以确保在那里一目了然也很容易阅读。

 尝试在高对比度环境中使用类型,例如在深色背景上使用浅色类型或在浅色背景上使用深色类型,以便每个单词都易于阅读。


7.你不会忘记视网膜屏幕

 即使是最小的屏幕也可以使元素和图像逼近像素完美。

 您需要考虑如何处理图像,图标和其他元素,以便无论屏幕大小如何,都能呈现精美的图像。如果可能的话,使用矢量格式可能是理想的解决方案,这也是SVG越来越受欢迎的原因之一。

 如果您没有具有适合普通屏幕尺寸的分辨率的图像,请不要使用它。根本没有图像比坏或像素图像更好。


8.你应该诚实

 您的设计应该忠于您的小型企业,信息或品牌,并且对您的工作透明。不要窃取设计或图像,也不要使用虚假关键字来增加流量,并忠实于您的内容。

 随着网络的混乱,用户希望与真实的设计交互。诱骗用户做某件事或注册产品或服务或者误导他们关于主题或信息应该违反您的个人道德规范。不要接受设计中期望的项目。


9.你不会忽略可访问性

 网络应尽可能多的人使用。虽然听起来很难确保设计是可访问的,但并不像您想象的那么复杂。

Google对网站辅助功能有很好的指导,它定义如下:

 一般来说,当我们说一个网站是可访问的,我们的意思是说,该网站的内容是可用的,并且它的功能可以由任何人操作。作为开发人员,很容易假设所有用户都可以看到并使用键盘,鼠标或触摸屏,并且可以按照您的方式与页面内容进行交互。这可以产生一种对某些人来说很好的体验,但会产生一些问题,从简单的烦恼到其他人的炫耀。

 那么,可访问性是指可能在“典型”用户的狭窄范围之外的用户的体验,他们可能以不同于预期的方式访问或交互事物。具体而言,它涉及正在经历某种类型的损害或残疾的用户 - 并且要记住,该经历可能是非物质的或临时的。

 良好设计的许多原则(例如尺寸,对比度和空间)有助于实现整体可访问性。

WebAIM有一个清单以及其他工具,可帮助您确定您的设计是否可访问。该清单涵盖了与可访问性有关的四个方面:设计是否可感知,可操作,可以理解和强大?


10.你应该回应

 它应该在2018年不言而喻,但您的网站必须具有响应能力。这包括从文本到图像,按钮到整体框架的每个元素。

 每个设计都必须适用于每个设备。期。


 结论
一套可靠的规则可以帮助您更快地进入设计项目并更加持续地工作。请注意,这些诫命中没有一条告诉你一个项目应该如何看待; 它们植根于您如何勾画和创建每个网站的理论。

 



相关资讯

如果您有什么疑问,欢迎随时联系我们的技术员   点击QQ咨询