• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 吃透这10个网站,你就明白了网页中留白的技巧

吃透这10个网站,你就明白了网页中留白的技巧

作者:Justinmind 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,留白,经验分享,网页留白,网页设计等相关知识,Justinmind希望在学习及工作中可以帮助到您

想要让一个元素足够吸引用户的注意力,往往需要通过周围的留白来衬托,这样的设计所营造的用户体验更为优雅。

在极简主义风格是主流的今天,「少即是多」是设计师奉为圭臬的准则。控制配色方案的数量,限制视觉元素的数量,在清晰的层级之下,呈现最核心的元素,抓人眼球,直击核心。

这样的设计对于留白极为依赖,因此,留白很重要。

留白并不一定必须是白色的,它可以是其他的任何颜色,而留白的另外一个名字是「负空间」。留白能够衬托和凸显视觉主体,这也是它发挥作用的主要途径。

尽管留白看起来不复杂,但是在复杂多变的设计环境之下,往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡,而要做到这一点,需要相当的实践和积累。

在什么地方用留白

必须承认,并非每个设计都需要大量的留白。留白的使用一定是有范围,且有留白会对设计中下列因素产生影响:

  • 排版布局
  • 影像图片
  • 功能控件
  • 文本内容
  • 边距间隙

Mark Boulton 将留白划分为大小两种。

小留白是在较小的元素之间小间隙,比如下面的元素周围的留白就是小留白:

  • 链接
  • 列表
  • 图标
  • 按钮
  • 文本段落

相反,在处理相对较大的元素的时候,周围的负空间是大留白。

正确使用留白能够为整个设计带来平衡感。对于文本内容,你会发现易读性的高低和其中的小留白的控制有着密切的关联,这对于内容的呈现有着重要的影响。

使用留白的好处还有很多:

  • 留白能够增加内容的可理解性。
  • 留白能够凸显特定的 UI 元素,CTA 元素大都如此。
  • 可以让设计更加整洁、友好。

Bear Creek Distillery

充满形式感和冲击力的图片搭配上令人眼前一亮的文案,Bear Creek Distillery 可以轻松地从同类网站中脱颖而出。为了突出他们作为酒类供应商的核心竞争力「蒸馏技术」,设计师尽可能地降低可能让人分心的因素,从而将信息精准直接地传递给访客。

Squarespace

在保证用户能够获取足够的信息的前提下,Squarespace 的设计师尽量限制了界面上使用 UI 元素的数量。搜索框让用户能够轻松找到他们想要的信息,而文案设计上的独特性使得品牌的调性得到了放大。文本的字体色彩选用了黑色,和浅色的背景构成了强烈的对比,让阅读和信息的获取都无比的轻松。

Progressive Punctuation

如何使用标点符号来传达复杂的情绪?Progressive Punctuation 这个网站将这些「全新」的标点符号都展示了出来。

和其他的页面不同的地方在于,页面需要承载多个不同的非标准标点符号,为了将信息准确的传达,设计师巧妙地使用留白来控制符号之间的间距,确保整体的优雅性,又保证了信息的传达。

Apple

关于留白的设计,很难绕过苹果这么经典的案例。虽然他们不是先驱,但是苹果将这一技巧的运用在自家的产品设计和网站设计上,体现的淋漓尽致。

在他们的网站上,你会看到清晰的视觉脉络,页面的每个部分都有清晰的视觉焦点,主次分明,用户永远不会在这里迷失和分心。

Tinker

你可以在 Tinker 定制手表,在网站上,你可以选择手表的样式、色彩和装饰元素。

为了突出产品的可定制性,Tinker 这个网站中所能看到的最显著的视觉元素是清晰的被分离出来的手表组件图片,就像苹果的官网一样,设计师不希望你的注意力被别的东西转移走了,减少次要信息的展示,从而提升核心元素的展现。只展示必须的内容,直接给你需要的一切——手表就可以了。

The Pisacco Chronicle

The Pisacco Chronicle 是一个专注于美食、电影和艺术的线上杂志,这些是绝大多数人都非常喜欢的东西。

有趣的是,网站为了吸引人采用了宝丽来风格的轮播图。页面中的标题和导航都非常吸引人,这很大程度上是因为页面上能让人注意到的元素确实不多。如果有更多的文本内容,就很难保证各个元素都那么清晰直观了。

没有晃眼的色彩和跳出式的配色,这样让页面中的图片内容没有不吸引人的理由。

Seedlip

这个品牌同样是酿酒厂,不过这次他们的网站推荐的是软饮料。这次的饮料是基于全新的概念创造而来,使用带有大量留白的网站来呈现是个不错的选择。

网站同样使用了大量的留白来凸显信息,更重要的是设计师还强化了浏览体验,用户向下浏览的时候,高清的饮料图片会成为整个视觉的中心。为了强化品质感,设计师让用户可以很快注意到这个品牌巴洛克风格浓郁的华丽 LOGO,而这样的效果同样和留白的贡献分不开。

Pocket Penguins

企鹅出版社一直以他们出色的封面设计而出名。加粗的文本和大胆的色彩是他们的特色,Pocket Penguins 这个网站就完美的延续了他们的品牌特色,通过色彩和排版让用户注意到他们的书本。

Sweetgreen

使用留白和色彩丰富的图片来吸引用户是非常有效的方法,因为两者能够正好构成对比。

对于美食尤其是如此,色香味三者当中,色彩和视觉是最先传达给人的,诱人的图片是 Sweetgreen 这个网站吸引用户的最有力武器,所以留白尽量衬托出这些图片,让这些美食被用户注意到。

Jomor Design

当你想要传递信息的时候,让用户只专注于那条信息是最有效的方法,如果用户只有这么一个信息映入眼帘的时候,自然就怎么都不会错过了。

Johor Design 这个网站一直致力于传达清晰的信息。作为一个设计机构,他们使用一个精心设计的文案来抓住你的注意力,「I wanna help you kick ass.」(让我来帮你成为最牛的。)

如果页面中有图片的话,这段话是不会被注意到的,因为文本通常没有图片吸引人。

结语

巧妙地使用留白能够让你的设计足够优雅,想要简明直接,同样需要运用好留白。消除不必要的干扰,专注于传递关键性的信息,这些都需要留白的参与。

「2018年设计趋势,一个都不要错过」

  • 《2018年,这10个LOGO设计趋势值得你关注》
  • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2018-08-23Airbnb团队负责人:硅谷新兴的产品内容策略分析师是什么
  • 2017-08-06设计参考 WordPress建站成功案例
  • 2017-08-06网页中使用任意字体之实际操作附演示
  • 2018-08-23阿里设计师:2017年新零售的用户体验观察
  • 2018-08-23设计到底有哪些价值?让谷歌设计Leader 来告诉你!
  • 2018-08-23设计神器两连发!加载动效在线生成网站+最好用的免费图库推荐!
  • 2018-08-23用工作坊的实例,教你使用人物角色共情图!
  • 2018-08-23顶尖高手的经验!Facebook的产品设计师是如何思考的(二)
  • 2017-08-06如何使整个页面内容居中使高度适应内容自动伸缩
  • 2018-08-23设计冲刺法:5天搞定2018俄罗斯世界杯主题设计

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 交互设计中的“无意识错误”:如何帮助用户防错?
    • 汉堡图标不好使?这5个替代方案帮你搞定移动端导航
    • CSS XTHML书写规范以及常见问题总结(页面最优化)
    • PS基础教程!手把手教你制作剪纸字效
    • 网页制作绝对路径与相对路径的区别
    • 表格行高如何设定?来看腾讯设计师的总结!
    • 想要提升用户体验,这6种使用插画的方法颇为不错
    • PS用的很溜?但你的设计可能还没入门!
    • PS教程!教你绘制低多边形星空效果熊猫头像
    • 网站设计中很重要的概念div+浮动剖析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有