石家庄网站建设 > 博客教程 > 网站建设知识 >

网页设计之视觉元素的设计标准要求

发布时间:2020-08-23

Web设计是计划,概念化和安排用于Internet的内容的过程。现代网页设计超越了事物的外观(美学),还包括事物的工作方式(功能)。Web设计不限于网站,因为它包括Web应用程序,移动应用程序和用户界面设计等其他用途。
 
网页设计元素
网站设计类型
网站设计工具
网站设计灵感
网页设计元素
设计网站时,必须同时考虑网站的外观和功能。无论如何衡量性能,将这些元素集成到设计中都将有助于最大化站点的性能。例如,您是否知道,由于搜索引擎的优化,  网页设计可能会对您在  Google等搜索引擎中的效果产生巨大影响?
 
视觉元素
这是您在设计中需要考虑的元素的快速概述,以确保一切看起来不错!
 
 
 
书面副本
 
从根本上讲,网站的外观与其文字是相辅相成的。绝对不应将两者分开考虑。让您的设计师和内容作者一起工作,而不是按顺序工作,可以实现更强大的设计。
 
相关:  书面内容或设计,哪个先出现?
 
 
 
字型
 
设计网站时,必须选择易于阅读的字体配对以补充设计。诸如Canva的Font Combinator之类的工具   可以帮助您找到与字体完美匹配的东西。诸如PageCloud之类的Web设计工具甚至在其应用程序中包含许多字体配对  。
 
 
相关:  向网站添加字体的简便方法(包括自定义字体)
 
 
 
色彩
 
颜色是设计网站时要考虑的最重要元素之一。请记住,这里有很多关于色彩心理学的误解  。在为网站选择颜色时,着重于使颜色与品牌和您要传达的信息保持一致很重要。
 
 
(来源:  www.freshconsulting.com)
 
相关:  为您的网站选择一个不会吸引人的配色方案
 
 
 
布局
 
您决定如何安排内容将对网站的外观和功能产生巨大影响。尽管在网站布局方面没有任何特定规则,但是绝对应该遵循一些  原则。如果您不知道如何编写代码,那么了解不同网站设​​计工具的局限性就变得至关重要,   这样就不会在设计中途陷入困境。
 
 
 
形状
 
在过去的几年中,网页设计中图形元素的使用确实得到了普及。结合使用漂亮的颜色和形状可以完成许多事情,例如吸引网站访问者的注意力。这种趋势的最大挑战是在寻求实现设计而无需依赖代码时出现的复杂性。
 
 
相关:  几何为何造就了杀手级网页设计
 
 
 
间距
 
设计中的每个元素之间都有一个空间:图像,段落,线条...甚至字母也有间距!根据经验,有太多的空间比将东西塞满在一起更好。空格的概念   绝对是现代Web设计师的首要考虑。
 
 
 
 
图像和图标
 
惊人的设计可以在短短几秒钟内传达很多信息。实现此目的的方法之一是使用功能强大的图像和图标。Google快速搜索库存图片或图标会产生数千种选择。为了简化搜索,以下是我们的一些最爱:
 
免费图片和图标
 
像素
不飞溅
IconMonstr
高级图片和图标
 
Shutterstock(盖蒂)
V IDEOS
 
视频是网页设计师中越来越多的趋势。如果使用得当,它们可以帮助您的网站访问者体验无法用文字或图像描述的内容。要记住的一件事是,引人注目的视频可能会分散注意力,并且永远不应与您的内容竞争。
 
相关:  如何在您的网站上使用视频背景-正确的方法!
 
功能要素
导航
 
导航是确定您的网站是否“正常运行”的主要组成部分之一。根据受众的不同,您的导航仪可以有多种用途。它可以帮助首次访问者发现您所提供的内容,同时引导返回的访问者访问您网站中的特定部分。在这两种情况下, 您都需要遵循一些  最佳实践。
 
 
 
速度
 
没有人喜欢缓慢的网站。无论您的设计有多好,如果它在合理的时间内没有加载,它将不会在搜索中执行,也不会实现您的目标。尽管顶级网站建设者通常会压缩您的内容以最大程度地缩短加载时间,但并不能保证;做功课,以确保您选择的工具提供最佳性能。
 
相关:  Google的Page Speed Test
 
 
 
动画制作
 
 从吸引用户的注意力到对与按钮或表单之类的内容进行某些交互提供反馈,有大量的  Web动画技术可以帮助您的设计完成各种各样的任务。如果您是网页设计的新手,我们建议您一开始就坚持  简单的动画  。复杂的动画通常需要开发人员干预。
 
 
 
 
用户互动
 
您的网站访问者可以根据其设备(滚动,单击,键入)通过多种方式与您的网站进行交互。最佳的设计始终会简化这些交互,从而给用户留下完全受控的印象。这里只是几个例子:
 
从不自动播放音频
除非单击文本,否则切勿在文本下划线
使表格  移动友好
避免弹出窗口
避免  卷轴 
网站结构
 
网站的结构在用户体验和SEO中都扮演着重要角色。如果人们在浏览您的网站时迷路了,那么爬网程序也有可能。尽管在线上有一些免费的  站点地图构建器  ,但是对于小型站点,有时最好的方法是将页面布置在白板或纸上。
 
相关:  如何创建可增强SEO的网站结构
 
 
 
跨浏览器和跨设备的兼容性
 
出色的设计在所有设备和浏览器(包括Internet Explorer)上看起来都不错。如果您是从头开始构建网站,我们建议您使用  跨浏览器测试工具  来使此繁琐的过程更快,更高效。另一方面,如果您使用的是网站构建平台,则跨浏览器测试通常由公司的开发团队负责,您可以专注于设计。 
 
网站设计类型
尽管您可能会在线上看到有关一整套网站设计风格(固定,静态,流畅等)的文章,但是在当今的移动世界中,只有两种方法可以正确地设计网站:自适应网站和自适应网站。
 
最好的部分是,使用现代设计工具,您无需知道如何编码即可构建在所有设备上都外观精美的令人惊叹的网站。
 
了解自适应和响应式网站的利弊将有助于您确定最适合自己的网站。
 
自适应网站
自适应网页设计使用针对不同屏幕尺寸定制的两个或多个版本的网站。根据网站如何检测需要显示的“版本”,可以将自适应网站分为两个主要类别。 
 
根据设备类型进行调整
 
当您的浏览器(又名客户端)连接到网站时,HTTP请求将包含一个名为“用户代理”的字段,该字段通知服务器有关尝试查看该页面的设备类型。
 
基本上,这意味着网站知道要显示的版本(例如:台式机或移动版)。这种方法的唯一问题是,如果在桌面上缩小浏览器窗口,该页面将无法显示,因为它会继续显示完整的“桌面版本”。
 
根据浏览器宽度进行调整
 
该网站不使用“用户代理”,而是使用媒体查询和断点在版本之间进行切换。因此,您将拥有1080px,768px和480px宽度的版本,而不是台式机,平板电脑和移动版本。除了在设计时提供更大的灵活性之外,这种方法还可以在大屏幕上更改浏览器大小时提供更“响应”的外观。
 
 
(图片来源:  UX Alpaca)
 
优点
 
所见即所得的编辑(所见即所得)自定义设计无需代码即可更快,更轻松地构建跨浏览器和跨设备兼容性快速加载页面
 
缺点
 
在桌面上的小浏览器窗口中查看时,使用“设备类型”的网站可能看起来很破损局限性仅响应网站才能达到的某些效果限制
 
 
 
响应式网站
响应式网站结合使用灵活的网格(基于百分比)和断点(使用媒体查询),以针对每种屏幕尺寸创建自定义外观。与仅在遇到断点时才自适应的自适应网站不同,自适应网站会根据屏幕尺寸不断变化。
 
 
(图片来源:  UX Alpaca)
 
优点
 
无论使用哪种设备类型,每种屏幕尺寸都具有丰富的经验响应式网站建设者通常都很僵化,这使得设计难以“突破”成吨的可用模板
 
缺点
 
需要大量的设计和测试以确保质量(从头开始)如果不访问代码,定制设计可能会面临挑战
 
注意:自适应网站可以包含响应元素。例如,可以将图像画廊构建为完全响应的,而网站的其余部分则是自适应的。
 
网站设计工具
设计网站的主要方法有两种:使用桌面应用程序或网站构建器。您决定使用的工具会因团队规模,预算,站点类型及其技术要求而有很大差异。 
 
桌面应用
用于设计网站的最受欢迎的桌面应用程序是  Photoshop  和  Sketch。此过程要求设计人员先构建设计,然后再将其发送给开发团队以将设计转换为代码。
 
通常,这是大型或复杂网站的事实上的标准,因为它使设计人员可以将重点放在外观上,同时将所有技术挑战转移给开发团队。
 
不幸的是,由于涉及多种资源和特定技能,因此该过程可能既昂贵又耗时。
 
为了避免让开发人员参与,使用网站构建器来设计技术要求较低的网站可能是有益的。
 
相关:  草图与Photoshop:是时候从Photoshop切换到草图了吗?
 
网站建设者
当今市场上有几种网站构建选项。并非所有这些工具都可以被视为“网页设计工具”,因为编辑限制会使得很难在不依赖代码的情况下创建自定义内容。
 
例如,尽管  Wordpress  是最常用的网站平台,但它在视觉设计师中并不是很流行。通常,它由实施设计的开发人员使用。
 
如上所述,只有两种类型的Web设计:自适应和响应式。让我们根据它们产生的代码类型快速查看最受欢迎的Web设计工具。
 
自适应网站
 
Wix  和  PageCloud  可以说是当今市场上最好的两个视觉网站建设者。因为他们使用自适应方法,所以它们的拖放和所见即所得功能是首屈一指的。这意味着您无需编写任何代码即可构建几乎所有内容。
 
Wix自2006年以来一直存在,并且已经开发了各种各样的功能和模板来满足几乎所有业务需求。今天,它被认为是初学者最容易使用的工具之一。
 
另一方面,PageCloud成立于2014年,其革命性的技术使设计师和开发人员可以在视觉编辑体验方面进行协作,这是无与伦比的。今天,它被认为是最容易自定义的网站构建器之一。
 
尽管在这一类别中没有明显的赢家,但请记住以下几点:
 
如果您正在寻找最可定制的体验,请选择PageCloud;如果您正在寻找非常简单且没有太多设计经验的东西,请选择Wix;如果您想与开发人员合作,请选择PageCloud如果您希望使用许多模板,请选择Wix;如果您喜欢快捷方式和桌面发布应用程序中的体验,请选择PageCloud。
 
由于这两个平台都提供免费试用,因此建议您在决定之前先尝试两者。
 
响应式网站
 
创建一个流畅的网站非常困难。尽管存在诸如Squarespace之类的工具可  产生响应性站点的事实  ,但编辑体验仍使用网格和盒子,这使得构建独特的设计几乎是不可能的,而无需进行大量编码。
 
这是更复杂的Web设计工具出现的地方。
 
再次,这个领域有很多竞争对手,但是其中两个领导者是  Webflow  和  Froont。
 
在采用这些工具之一时,需要考虑以下一些利弊:
 
优点
 
无需编写代码即可创建自定义响应站点的能力对页面上每个元素的控制无与伦比的能力将代码导出到其他地方托管
 
缺点
 
具有陡峭学习曲线的复杂工具自适应网站建设者的设计过程较慢
 
网页设计灵感
每个设计师都在某个地方寻找灵感。以下是Web设计师可以让您的创意源源不断的最佳场所:
 
阿瓦德
网站启发
最佳网站图库
网站设计灵感
Pinterest的
Instagram的
阅读全文
 
 
注意:请记住,在这些站点上可以找到的一些高度策划的设计是模型(由Photoshop等工具制作的图像)或由开发人员实现的站点。如果要  复制这些站点,请记住,如果没有代码,可能很难重新创建复杂的动画或效果。

网站建设
Website
客户案例
Customer case
关于展为
About ZHANWEI
展为致力于网站建设与网络营销,微信营销,专业领域包括网站建设、网站seo优化推广、移动互联网营销、三网合一网站建设,微信营销小程序开发,与其他网站建设及系统开发公司不同,我们的整合解决方案结合了展为网络建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

扫码咨询

Copyright © 石家庄展为网络有限公司. 冀ICP备14018173号-6 Copyright 2010-2020版权所有
展为网络
网站建设
客户案例