网页制作中的10个Web设计要点

使用Coolsite360网站设计方面你有规则手册吗?有一些规则适用于几乎每个网页设计项目 - 让我们称之为“网页设计圣经”。

无论网站有多大或多小,这些规则都是良好设计的基础。如果您遵循这些基本准则,并将它们作为您开始的每个项目的思考的一部分,您将避免设计师偶然发现的许多陷阱!意派Coolsite360交互式线网页编辑系统可以帮您最优化页面设计 并提供优秀的模板,让您的网页脱颖而出

1你应该保持一致


 

使设计尽可能简单,以便用户进行交互

一致的设计易于使用和理解设计。用户参与和操作以及视觉效果在整个单一设计中的外观和用途应该相似。

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

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

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

2你应该使用空白


 

元素周围的额外空间有助于创建分离并使其更易于阅读。

没有必要将每个元素塞进滚动上方的空间。使用空格来建立节奏和流程,创建视觉层次结构并帮助用户在设计中移动。

如果内容良好,则会滚动。

实际上,空白可以通过将视线拉向屏幕来帮助鼓励用户操作。

随着屏幕尺寸变小,空白更为重要。元素周围的额外空间有助于创建分离并使其更易于阅读。(想想轻松敲击按钮时有多余的空间是多么有益。)

不确定在设计中包含空格的位置?从这里开始:

围绕按钮或其他互动元素

作为行之间的行间距,使阅读更容易

元素之间的东西是东方的区分,例如包裹在嵌入文本块的照片中

在表单字段中,可以轻松点按移动屏幕

围绕您希望用户关注的任何元素

3你应该使用网格


 

网格是用户体验的基础。当您使用网格进行设计时,最终的网站会更精确,更一致,并且元素按照具有视觉意义的顺序放置。

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

网格只是您在设计过程中看到的内容,如果您无法找到元素的放置或创建有组织的轮廓,网格可以成为一个完整的救星。

4.你不应该忘记用户模式


 

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

常见用户模式包括:

表格中的信息顺序,以姓名或电子邮件开头,以“提交”结尾

放置导航菜单

电子商务购物车图标的位置和可点击性

通知如何工作

搜索和聊天的图标,以及其他内容

UI设计模式有很多用户模式列表,适用于所有类型的设计情境。

5.你应该在UI动作中使用相似性


 

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

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

6你应该好好使用排版


 

从设计中退一步,看看字体是否易于从远处读取。

你不必是一名大师,但它绝对有帮助。

构成优秀设计的很多东西都源于可读性和易读性。这些概念取决于您如何选择和使用字体。

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

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

7.你不能忘记视网膜屏幕(Retina)


 

即使是最小的屏幕也可以渲染具有接近像素完美的元素和图像。

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

如果您的图像的分辨率不适合常见的屏幕尺寸,请不要使用它。没有图片比坏图像或像素化图像更好。

8 你应该诚实面对客户


 

您的设计应该适用于您的小型企业,信息或品牌,并且在您的工作中是透明的。不要窃取设计或图像,不要使用错误的关键字来吸引流量,并忠实于您的内容是谁和什么。

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

9.你不能忽视无障碍


 

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

谷歌有一个很好的网站可访问性指南,它定义如下:

从广义上讲,当我们说网站是可访问的时,我们的意思是该网站的内容可用,并且其功能可由任何人操作。作为开发人员,很容易假设所有用户都可以查看和使用键盘,鼠标或触摸屏,并且可以像您一样与页面内容进行交互。这可以带来适合某些人的体验,但会产生一些问题,从简单的烦恼到其他人的炫耀。

因此,可访问性指的是可能超出“典型”用户范围的用户的体验,他们可能以不同于您期望的方式访问或交互事物。具体而言,它涉及正在经历某种类型的损伤或残疾的用户 - 并且请记住,该经历可能是非物质的或临时的。

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

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

10.你应该做出反应


 

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

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

结论

一套完整的规则可以帮助您更快地进入设计项目并更加一致地工作。请注意,这些命令都不能告诉您项目的外观; 它们植根于您如何概述和创建每个网站的理论。

意派Coolsite360交互式线网页编辑系统

“创意不该受技术束缚,交互可以变得简单有趣”

 


 

10

相关文章: