Web设计是一个高度个性化的过程。为了创建真正独特而有影响力的作品,设计师必须放开对网站外观的先入为主的构想。相反,他们必须让自己的品牌价值,受众和差异点成为他们的“真正的北方”,在设计过程中引导他们。


但是,尽管设计只是为了打破“规则”并创建自己的规则,但所有设计师都应牢记一些故障保护Web设计原则。这些久经考验的指南对于创建吸引您的受众的功能完善的网站至关重要。继续阅读以了解20个基本的Web设计原则,以指导您的下一个创作。


01.使用可读性和网络友好的字体

排版在网页设计中的作用不可低估。使用正确的字体可以彰显您的品牌个性,并立即吸引听众的注意。但是,不仅仅是看起来不错。您在网页设计中使用的字体也必须具有功能性和可读性。毕竟,如果用户不得不着眼睛看您的文字,他们可能会很难与您的信息保持联系。Arial,Helvetica,Times New Roman和Courier New都是网络友好字体的示例。这意味着它们可以保持任何大小的可读性,并且可以在移动设备和台式机上正常工作。


image.png


马特·斯蒂尔(Matt Steel)通过设计炸弹


在作家和设计师马特·斯蒂尔(Matt Steel)的网站设计中,印刷术是中心焦点。他使用了通用的衬线字体,当使用小巧,轻巧或大而粗的字体时,仍会保持醒目的外观。


是否想让您的排版在您的下一个Web设计项目中说话?Canva的红色几何形状销售网站广告模板为以文本为中心的网站标题提供了理想的起点。


image.png


02.利用“ F”模式

人类是习惯的产物,我们消费内容的方式也不例外。一个尼尔森诺曼组研究进入眼睛跟踪发现,当我们扫描网站上的信息,我们大多数人在F-形图案这么做。这意味着我们首先阅读页面顶部的重要标题,然后向下扫描页面左侧的任何数字,项目符号或侧边栏,然后再次在页面上的任何粗体文本或子标题下进行浏览。在网页设计中,使用“ F”模式涉及模仿眼睛的自然路径,以免打乱视觉流程。这对于最终目标是着陆和销售页面尤其重要。


image.png


通过大商务


您可以在BigCommerce的主页上看到此操作。他们熟练地制作了F形布局,以提示用户采取所需的操作-在这种情况下,这是产品巡回演出。目光直视标题(由粗体和彩色下划线所辅助),然后转到演示其产品工作原理的图表,然后回到补充信息和号召性用语。


03.或'Z'模式

尽管“ F”模式是常见的眼睛扫描模式,但它不是唯一的。“ Z”布局是另一个重要的设计原则。这是当眼睛从左到右上方扫描时,形成一条假想的水平线。它们下降到页面左侧,创建一条假想的对角线。最后,它再次向右后退,形成第二条水平线。


那么,什么时候在“ F”布局上使用“ Z”布局?虽然“ Z”布局往往最适合登陆页面,但Z模式通常更适合信息量非常少的页面,其中最主要的是号召性用语。


image.png


通过UX Planet


您可能之前已经看到过这种模式的实际效果,因为它已在Facebook的登录页面上使用了!眼睛自然会直接看徽标,但是Z模式会引导用户完成两次号召性用语-登录或加入。


04.使用负空格

有时,您可以将消极变成积极!在网站设计中使用负数空间确实是这种情况。也称为空白或空白,这是设计中视觉元素之间的空白区域(例如,照片,文本和图标)


这个原则与艺术本身一样悠久,但是在网页设计中起着特别重要的作用。过于混乱和复杂的网站往往会使您的用户不知所措,并阻止他们采取行动,这与您想要的完全相反!同时,使用负数空格会将他们的注意力吸引到最重要的内容上,从而增加文本的可读性并创建无缝的用户体验。


image.png


通过苹果


您可以看到在这里工作。苹果公司一直把重点放在他们的产品上,因为他们不需要依靠风吹草动来向观众出售产品。这反映在他们在这种简约布局中使用负空间时,他们将注意力集中在新产品iPhone X上。


是否想将这种“少即是多”方法整合到您自己的网页设计中?尝试使用Canva模板(例如Pink Flower Wedding Events网站),该模板已经内置了很多负面空间。


image.png


05.保持设计一致

您已经知道一致性是网页设计的关键。但是需要注意的是,这不仅意味着在整个品牌中保持字体,颜色和图标的统一。这也意味着在布局中也要保持一致的间距。这有助于使您的网站有光泽和专业的感觉,从而提高品牌信誉。


image.png

通过Dribbble预订Halo Lab的蠕虫网站设计


这在电子图书公司Bookworm的网站设计中很明显。尽管他们使用了一系列不同的字体大小和不同的图像尺寸,但不同视觉元素之间的间距仍保持一致。这有助于在繁忙的作品中营造秩序感和和谐感。


Canva的内置对齐功能可轻松确保您的文本和段落间距在设计中保持一致。


06.简单而逻辑的页面导航

没有清晰导航的网站就像没有地图的迷宫。它使不必要地浏览您的网站变得困难,并使访问者感到困惑。另一方面,精心设计的网站导航可简化和放松用户体验。这可以采用多种形式-无论是下拉菜单,侧边栏还是粘性导航。关键是它很容易找到,可以在所有设备上正常工作,并且不会因其他选项而超载。


image.png

通过雅科仕设计


在来自Web设计公司Equus的此示例中,导航简单但有效。他们选择了带有干净无衬线字体的单色菜单栏,该菜单栏在彩色标题上突出了。他们还将菜单选项保持在一个词以内,这有助于保持一致性并确保不占用太多空间。


07.使用互补色调色板

该调色板使用套你的网页设计的心情。例如,使用大量的深棕色和黑色可以营造出质朴,喜怒无常的感觉,而柔和的颜色则可以显得十分有趣和现代。无论您要使用哪种氛围,确保您使用的颜色都能很好地协同工作非常重要。有时,这意味着坚持相似的阴影,但是相反的颜色也会吸引(例如,橙色和蓝绿色),无论您是在色轮上追求相反的颜色还是彼此相邻的颜色,它们都需要互补。


image.png

通过Liebe Quark


您可以使用许多不同的颜色,并且仍然可以创建一个吸引人的网站,这在酸奶公司Liebe Quark的此网络设计中显而易见。他们结合使用了暖色和冷色,浅色和深色来创建对比鲜明且醒目的标头。格纹格子设计避免看起来过于混乱,同时在瓷砖上使用少量的颜色斑点有助于将它们绑在一起。


宁愿保持简单的配色方案?Canva中的Blue Fashion Blogger模板非常适合使用两种您自己的互补品牌颜色进行自定义。


image.png


08.紧记观众

优秀的设计师知道,这不仅仅是创建他们认为看起来不错的网站。要真正创建一个可以消除在线干扰的网站,他们必须通过设计直接与受众群体对话。把自己放在听众的鞋子上,问问自己,他们最大的需求,欲望和恐惧是什么。从您使用的字体和颜色,到按钮文本和网站导航,这将决定您的设计选择。


image.png

Cuberto通过Dribbble设计的磨损网站


在年轻女性在线时尚精品店的这一概念中,设计师明确考虑了目标受众。明亮而女性化的配色方案,肖像画和醒目的气泡文字共同作用,营造出一种有趣而现代的感觉,很可能会吸引年轻女孩。


是否想为自己的网站设计实现类似的美感?Canva 的Pink And Blue Rad Facebook广告模板是您个性化打造自己品牌的绝妙起点。


image.png


09.优化按钮和号召性用语

尽管按钮通常是要添加到网页设计中的最后一件事,但它们起着不可或缺的作用。它们可能是用户继续浏览您的网站还是关闭窗口的决定因素。您网站上的按钮应该高喊,而不是低语。也就是说,它们应该与页面上的其他视觉元素脱颖而出,并且易于查找和单击。


image.png

通过Hubspot的Huemor


设计工作室Huemor的这个网站就是一个很好的例子,说明创造性地使用按钮可以如何真正提升您的整体网站。在他们的号召性用语“发布,不要按”中使用插图和厚脸皮的逆向心理共同创造了真正令人难忘的用户体验。


10.保持视觉层次

当我们提到眼动扫描模式和导航时,我们谈到了视觉层次。但是,这是一个重要的原则,值得我们关注!虽然网站设计应该美观且创新,但也需要合乎逻辑。也就是说,您需要以一种对用户有意义的方式故意构建内容,即使它只是在潜意识层面。


image.png

Mike制作的比特币网站| 通过Dribbble创作的薄荷糖


比特币矿业公司CTSO的网站就是一个很好的例子。标题文本清楚地位于设计器的视觉层次结构的顶部,然后是导航侧栏。但是,不是将它们带离主页,而是用于引导它们通过单页主页上的各个锚点。


11.注意细节

网页设计无疑是至关重要的。毕竟,是所有视觉元素如何组合在一起,才决定了网站的整体外观。但是,重要的是不要忽略小事情。注意更精细的细节,例如页脚图标,文本间距和微交互,确实有助于使您的网站与众不同。

image.png



通过Carbon Beauty


天然化妆品公司Carbon Beauty的网站页脚就是一个很好的例子。它不仅补充了该品牌时尚,简约的网站,而且本身就是一件艺术品。他们结合了对称性,线条,按钮和图标,以帮助使观众在页面上停留的时间更长,并鼓励他们以不同的方式与品牌互动。


12.使用菲特定律

菲特定律由心理学家保罗·菲茨(Paul Fitts)于1954年提出,菲特定律指出,移至目标所花费的时间不仅与目标的距离直接相关,而且与目标的大小也直接相关。尽管该理论最初与人类电机系统有关,但现在已成为UX(用户体验)设计的中心原理。通常将其与按钮相关使用,其想法是希望易于选择的元素(例如,主要的号召性用语)应较大并且放置在靠近用户的位置。


image.png

通过Hubspot很好复制


您可以在本网站的copywriting工作室“非常好的副本”中看到它。假设用户的光标将位于屏幕顶部附近,则设计人员将大按钮的敲击声放在屏幕中间,以鼓励他们单击。当然,按钮为亮黄色这一事实也不会造成伤害!


13.明智地选择图像

他们说一幅画画了一千个单词,这在网站设计中确实是这样。图像可以在网页设计中达到许多目的,无论是讲故事,演示产品如何工作,唤起情感或营造氛围。但是,请务必记住,并非所有照片都是一样的。请务必仔细选择您在网页设计中使用的照片。它们不仅应具有专业的质量和高分辨率,而且还应适合您的整体美学并具有明确的目标。


image.png

斯巴鲁网站Dribbble


以斯巴鲁的汽车公司网站设计为例。在风光摄影提供一个非常具体的目标,唤起冒险的感觉,并帮助用户想象他们如何使用他们的新车。毕竟,他们不是在卖汽车,而是在卖生活方式!这比他们在没有上下文的情况下使用汽车的简单产品图片要有效得多。


喜欢在网站设计中使用图片背景的想法吗?Canva的珠宝和配饰在线商店网站模板可以轻松替换为您自己的图像。对于想要展示其产品的企业或电子商务品牌来说,这是一个特别有效的选择。


image.png


14.优先考虑用户体验

用户体验不仅限于UX设计人员。任何希望听众在其网站上采取行动(无论是订阅邮件列表还是购买商品)的人都应注意客户的旅程。好消息是,这不一定必须是复杂或高度技术化的过程。这仅仅是为了使您的受众尽可能轻松地采取所需的步骤。


image.png

tubik通过Dribbble预订和旅行的网站设计


这个Book&Travel网站最好地展示了简单的UX设计。他们确切地知道他们的听众在哪里-搜索和预订航班和住宿-因此他们直接在首页中建立了此功能。这不是一个过于复杂的设备,但肯定是一个有效的设备!


15.考虑使用网格系统

使用网格布局是一种万无一失的方法,可以使您的网站看起来整洁,井井有条且专业。本质上,这些是水平和垂直相交的线,可作为放置和对齐合成中元素的参考。这是一个功能强大的可视化工具,可在您的设计中创建一致性和顺序性,这在进行大量工作时尤其有用!

image.png

Ruslan Siiz通过Dribbble设计的Hilgart Blog网站


在此Hilgart博客概念中,设计师Ruslan Siiz使用基于网格的布局来构成其布局的基础。尽管此主页上有一些不对称元素和不同的列,但这使它显得整洁和结构化。


您可以使用Canva的Pink Advocacy Portfolio模板来达到类似的效果。它的现成网格布局将帮助您在自己的网站设计中创建视觉平衡。


image.png


16.避免大块文字

您只有一次机会可以给新的网站访问者留下深刻的印象。这就是为什么让您的品牌产品立即向受众清晰可见如此重要的原因。尽管这部分取决于您的文案写作(书面内容),但您的网站设计也起着重要作用。因此,在您的网站上使用大量文本绝对是不行的,尤其是在您的首页上。它不仅会稀释您的品牌信息,而且还会使您的网站显得杂乱无章。

image.png

通过Alpha Ocean Blue


该金融公司Alpha Blue Ocean的网站显示了如何不需要大量文字就能产生重大影响。他们立即用短短的几个字就展示了其品牌宗旨(使用鲜明的白色字体在鲜明的蓝色背景下显得突出)。但是,他们还为用户提供了使用左侧导航栏来显示有关其更多信息的选项。


Canva的Teal图书和出版商在线商店网站模板具有简单有效地传达品牌信息所需的所有视觉元素。只需自己更改标题和子标题!


image.png


17.使用不变性

不变性原则是在同质的组中放置一个不同的选项。当您在网站上设计价格表时,这可能是必不可少的工具。

image.png

代码峡谷网站


Envato网站主题Modern Bootstrap 4的定价表就是这一原则付诸实践的一个很好的例子。尽管大多数选项都带有一个带有黑色文字的白色框和一个红色按钮,但是对于“企业”包来说颜色是相反的。自然,人眼会直视另一只眼睛,当您试图吸引人们关注某个特定选项或特价商品时,它会对您有利!当您试图鼓励用户执行特定操作时,不变性也可以在导航菜单中使用。


18.希克定律

在设计领域之外,该原理通常称为“决策疲劳”。以英国和美国心理学家威廉·埃德蒙·希克(William Edmund Hick)和雷·海曼(Ray Hyman)的名字命名的想法是,“每当有其他选择,就会增加做出决定所需的时间。” 因此,您给用户提供太多不同选项(无论是按钮还是菜单选项)的次数越多,诱使他们采取行动的时间就越长。而且由于您通常只有很小的机会可以留下深刻的印象,所以这不是一件好事!这就是为什么限制号召性用语并尽可能使您使用的号召性如此重要的原因。


image.png

绿山能源通过CrazyEgg


电力公司Green Mountain Energy的网站显然是在设计时考虑了希克定律的。仅给用户提供了两个主要的号召性用语(由于使用了橙色按钮,这些号召性用语很明显),这两个功能非常重要,可用来识别用户是家庭还是企业。外卖?不要添加绝对不需要的号召性用语。


19.使用对称

尽管有时间和地点进行抽象,不对称的设计,但对称性绝对不会出错。指的是两半完全完美地相互镜像时,这是立即使您的网站设计看起来更加平衡,整洁和专业的简单方法。


image.png


Gabe Becker通过Dribbble设计的背包网站


背包公司的这种设计理念证明对称性不一定很无聊。设计师Gabe Becker通过将女孩的图像放在页眉的中间实现了垂直和水平对称。下面完美对齐的袋子行反映了这一点。这种有效的视觉技术使原本充满活力的“响亮”设计具有结构感。


是否想在自己的网站设计中实现对称?Canva的Orange Black广告和营销业务网站模板为您完成了所有繁重的工作!您需要做的就是添加您的品牌颜色,字体和文本,使其成为您自己的。


image.png


20.针对网络和移动的设计

如果您只注意一种网站设计原则,那就做到这一点!智能手机无处不在-实际上,它们正日益成为我们消费内容的最流行方式。这就是为什么在设计桌面和移动设备时如此重要的原因。这意味着确保您的标题和段落在两种设备上均能正常工作,没有图像或其他视觉元素被剪切掉,并且按钮易于在小屏幕上使用。它还涉及确保您的网站在两种设备上都能快速加载。


image.png

Gabe Becker通过Dribbble设计的背包移动设计


针对移动设备优化网站有时意味着对桌面使用不同的布局。您可以在以上示例的移动设备友好版本中看到这一点。在这里,他们使用了全屏图像和网格设计来专门增强移动体验。这说明了为什么将移动和Web设计视为两个独立的实体如此重要的原因。


遵循这些设计原则并不能使您坚持规则。它只是确保您有坚实的基础,因此您可以冒险并在重要的地方进行试验。


分享: