网页设计最佳实践:注重极简主义

发布时间:2019-08-30 11:00:26 阅读:59

设计师使用层次结构以与版税相同的方式表达关系。

就像国王比王子更高级别,H1部分应该看起来比H2或H3部分更高。当然,您需要编辑字体大小和样式等元素 - 但白色空间也可以帮助在不同的标题或段落文本之间形成一种联系。

层次结构使内容更容易理解。

在这篇文章中,我们将探讨距离和注意力之间的关系,并解释如何使用它来创造美学设计。

更大距离的力量注意力

当您在页面元素之间放置更多距离时,可以删除妨碍的“东西”。您可以随时使用空间,因为它对大多数访问者来说并不直接。最突出的是内容,所以如果你在内容之间留出空间,那么只有内容会引起注意。

如果有疑问,通常最好添加更多的空白而不是更少。如果没有足够的喘息空间,许多网站都会在一起挤满太多信息。但这只是一般规则,不应被视为福音。就像我们在交互设计最佳实践中所描述的那样,过多的空白区域通过消除元素之间的关系来削弱您的层次结构。

正确的空间比例只在上下文中是正确的。在一个布局上看起来不错的东西在另一个布局上可能不太好 根据免费指南Web UI最佳实践中的建议,必须通过练习和现有网站布局的研究来学习微妙的空间平衡。

image07

来源:Apple

看看Apple iMac网站许多设计师都对苹果通过其所有产品(包括iOS和  OS X背后的人机界面理念)表达的商标简洁性感到震惊毫无疑问,Apple的主网站也使用简洁和空白来强调最重要的内容:内容!

标题文本和图形超大,占据了页面的绝大部分。向下滚动时,请注意页面的其他区域使用较小的文本块,这些文本块仍然可以从远处清晰地读取。在文本行之间使用更多空间可以更轻松地浏览内容并保持滚动,而无需花费2-3分钟来阅读每个部分。

image04

来源:Apple

如果您快速向下滚动页面,您会注意到一个连续的模式。每个部分使用一个图像和一个彼此相邻的文本块。但是这种模式与右边的图像交替,然后是左边的图像,然后再次返回右边。这是一种对称的图案,使空间感觉更加吸引人和放松。

您可以在主页上找到Wunderlist的另一个示例一些内容朝向中心间隔,而其他区域使用浮动效果。

image00

来源:奇妙清单

与大多数页面内容相比,Wunderlist顶部导航实际上非常小。链接被挤压到顶部导航栏,而内容部分被给予宽敞的白色空间牧场。这种类型的分层设计结构提供了关于页面的哪些区域应引起注意的视觉线索。

image02

来源:奇妙清单

在页面的最底部,Wunderlist放置了一系列12个基本图标,位于描述产品功能的小块文本上方。由深色文字和白色背景创建的对比将您的眼睛引向内容。一旦你专注于内容,所有12个“块”之间的对称间距创造了一种统一感。结果,整个部分感觉就像一个大的连接区域。

但是,如果你从内部看,你也会注意到每个图标和文本块仍然像一个单独的“项目”。由于对称的间距,所有东西都保持连接,而图标为每个“项目”增加了个人吸引力。图标和粗体文本之间(如邮箱和“邮件到Wunderlist”)通过视觉隐喻强化内容因此,访问者只需浏览这些功能即可了解整个部分的要点。

白色空间之美

虽然白色空间通常被认为是改善用户体验和可用性的技术,但它也可用于美学目的。许多网站将白色空间作为设计风格的一部分,因为它流畅并且准确地反映了品牌。

从美学白色空间中受益的大多数布局都专注于内容而不会产生任何干扰。内容可能与简约布局一样简洁,也可能冗长而详细。偏心使用白色空间作为设计特色,营造出高雅宽敞的氛围,在整个网站上引起共鸣。

image05

资料来源:Marie Laurent

快来看看Marie Laurent的投资组合网站她的主页采用简约的设计风格,平面色彩,通用排版和充足的白色空间。布局围绕内容部分构建,几乎可以立即引起您的注意。
请注意她的设计工作如何占用大部分主页。实际的投资组合示例是最重要的组成部分,因此应引起最多关注。在内容区域中,空格分隔文本,按钮和导航链接。

image03

资料来源:Grace Coote

审美白空间在单页布局中也起着重要作用。Grace Coote这样的网站使用过多的空白来平衡内容部分。所有网站的内容都可以在主页上找到,因此设计使用额外的空白来培养距离。

额外的空间减轻了在任何给定时刻在屏幕上显示的内容量。由于用户不会导航到其他页面(毕竟这是单页设计),使用稍长的滚动条没有任何害处。Grace Coote布局的最佳部分是整体平衡。虽然它只是一个页面,但它感觉非常现代,易于使用而不缺少内容或设计功能。

image06

资料来源:peeq App

peeq App的登陆页面是另一种具有极简设计品质的单页面布局。关于这个设计的一切都尖叫着白色空间。排版,图像和按钮在贫瘠的背景设计中脱颖而出。

然而,该网站感觉不过是空的。

相反,内容占据了中心位置并且易于访问。从这个意义上说,增强美学也提高了可用性,因为情感设计的原则表明有吸引力的事物感觉它们更好地工作网站设计突出了鲜艳的色彩,而不会分散清晰的标题或“获取peeq App”号召性用语。

带走

内容层次结构不仅仅建立在负空间上。空间是这个难题的重要组成部分,但其他设计基础要求才能真正融入视觉层次结构。这些基础包括颜色,字体选择和排版,相似性和对比度,以及内容中的图形。

在一切之间找到的空间决定了关系和平衡。当你第一次创建一个新的模型时,你可能会挣扎一段时间,除非你已经是一个经验丰富的设计师。

真正内化应该使用多少空白区域来创建视觉层次结构需要练习,这意味着它需要失败。搞砸是学习过程的重要组成部分,你设计的越多,你学到的就越多。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"网页设计最佳实践:注重极简主义",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560