文档章节

通过留白打造简洁有效的设计

王尘宇
 王尘宇
发布于 2017/09/07 00:03
字数 1167
阅读 7
收藏 0
点赞 0
评论 0
有时最有效的设计技巧,就是什么也没有。 而且它的目的性非常强。 留白是最有力的设计素材之一。它使得文字清晰易读,将注意力吸引至某部分,并且有助于打造整体氛围。 本文中,我们来看看一些优秀的留白使用案例,看看它们如何创造简洁的同时,有效地为不同网站定义了设计风格。

留白的基本要素

Whole Connect Jun-lu 留白和负空间的术语近年来被交替使用,它们指画布(或数码设备屏幕)上不包含任何内容的空间。简而言之,留白就是空白。 但是留白空间不一定要是白色的。这个术语指的是任何与背景相同的空间。所以它可以是白色、黑色,甚至包含微妙的纹理。 空间是所有设计的重要组成。字间距和行间距决定了文字的易读性。如果文字靠的太近或太松散,就很难阅读。关键是找到平衡点。 留白也能把图片和其他元素区分开。回想一下你见到过的杂乱无章的网站。通常问题就在于元素间没有足够的空间。记得在元素和文字间留下足够的边距,为了更加专业的外观,应该进一步使用统一的边距。在设计多列网站时也是同样的道理(即使只有主栏和边栏),在垂直元素间加入适当的空隙,就创造出了明显的划分。 留白还有助于引导视线,为设计建立层次,区分什么是重点和关键点。视线会立即移动到被留白包围的元素上。留白为其中的元素增添了冲击力。 留白是创造平衡、协调的工具,也是组织网站内容的基础。没有留白,如何为元素分组?如何找到导航?你又怎么知道滚动有更多内容,或是应该从左上往右下浏览?所有这些视觉线索,都来自于设计中留白的合理运用。

重点使用留白的地方

虽然有效使用留白是任何设计的重要部分,还是有些地方值得注意。 请看以下清单:
  • logo周围
  • 每个导航按钮或图标周围,并围绕这些元素的“容器”
  • 在两列文字间,在主体部分与边栏之间
  • 当你使用视觉差效果时,在每页“滚屏”之间
  • 在所有不同的元素之间,比如照片和文字之间,或是主体内容与页尾之间

12例留白的有效运用

Adhara Adhara:看看左侧的边栏和主体内容的距离。此处的留白确实在元素之间创造了很棒的区分,并使彼此通过自己独有的方式突出展示。 a9 BeoPlay A9:背景与中央物体形成简洁的对比,创造了独特的视觉焦点。与优秀的对齐排布结合时,留白还有助于将注意力从图片引导至文字段落。 Fixate Fixate:在一个像这样丰富的设计中,留白告诉你的眼睛应该看哪里(还有点击哪里)。 Google Google:这个搜索引擎已经使用留白很长时间了,白色的海洋中,它只有一个简单的数据入口和一个logo在。 Jacinabox Jac in a Box:留白在此处的运用是如此抢眼,因为它真的很大面积。将的视线从logo(本身的留白就运用非常完美)吸引到另一个角落的主体文字上。 Lapka Lapka:这家公司用了一种独具创意的方式,通过阴阳式的留白,将视线吸引到这些小物件上。 Leah Leah Haggar:白色字体在黑色空间上很突出。精妙的底纹为整体效果增色不少。 Medium Medium:这是一个使用非白色留白的绝佳案例。 Metta Metta Skincare:通过对图片进行设计,留白为文字提供了绝佳的展现位置。 Pandaweb PandaWeb:留白直接将注意力转移至这家公司的业务上。 Square Square:这个网站将元素间的留白运用得很棒,作为图片和按钮的视觉焦点,也作为分栏的间隙。每个细节处的留白都精心处理过,创造了视觉冲击。 Mealings The Mealings:简洁、美观、舒适。留白——在设计与logo中——成就了这些特点,看起来简洁得不可思议

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
如何在网页中使用留白

所谓留白,有时也称作负空间,两者是同一个概念。尽管这个术语尤其指留“白”,但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。 这样的空间体现为多种不同形式,...

oschina ⋅ 2014/07/28 ⋅ 16

[译] 移动开发中的极简化设计艺术

原文链接: The Art of Minimalism in Mobile App UI Design 原文作者 : Nick Babich 译者 : edvardhua 校对者 : owenlyn, jiaowoyongqi, Graning 设计是一件用户驱动很强的工作。随着用户越来...

曾梓华 ⋅ 2016/08/10 ⋅ 0

留白在网页设计当中的运用

早在小编上大学就喜欢日本简约的设计风格,从田中一光到现在的原研哉,他们一点点的将日本设计带向了全世界。现在大家说的日式风大都是简约风格,这样设计风格最近几年也一直被推崇着。 日本...

尹公子 ⋅ 2017/03/20 ⋅ 0

Metro UI 的简洁是另一种复杂

作者:苏园 Metro UI 推出来的时候,对比其他系统的图标海洋,确实让人眼前一亮,活动格窗取代图标,内容取代形式,微软的宣言是让智能手机用户有更高的效率得处理事务,而不是专注于智能手机...

红薯 ⋅ 2011/12/28 ⋅ 28

8招教你玩转[视觉引导]

写在前面 在所有的设计需求中,可以利用一些具有指向性的设计元素,如:色彩、人物和动作、留白处理等,让用户的眼神跟着页面元素的引导,完成对信息的关注与吸收。 今天这篇文章,我将分享几...

Yomut ⋅ 2016/08/31 ⋅ 0

手机界面扁平化设计案例赏析

手机界面扁平化设计案例赏析 www.blogways.net2017-12-163 阅读 手机设计案例 一、概述 古语常说:去粗取精,去伪存真。自小念念不忘的句子,不仅是教会我们为人处世的道理,更是准确的揭示了...

www.blogways.net ⋅ 2017/12/16 ⋅ 0

图解:降低用户界面(UI)的复杂性

降低用户界面的复杂性 整 洁,简单易用,用户体验良好,直观。许多人都提倡这些规则却常常在实现的时候丢失了。主要体现在:太复杂了。如何处理好一个应用的复杂程度将成为它成败的 关键。一...

老枪 ⋅ 2011/03/15 ⋅ 6

如何让设计高大上—方框和方形元素在设计中的运用(一)

我们常常看见有一种banner或网页设计中,都有一些方形元素融进文字中,去修饰,从而让设计显得更为大气高端。不知道大家有没有注意到这个细节? 那今天,就聊聊方形方框在网页设计中的运用。...

博为峰教研组 ⋅ 2016/11/22 ⋅ 0

【转贴】高品质的网页设计: 实例与技巧

提升网页和博客设计品质的一些实例和技巧 “高品质”是所有人追求的目标,在网页设计的世界中也不例外。不过何为“品质”,如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中...

0day ⋅ 2011/10/26 ⋅ 0

2012网页设计趋势(上)

纯粹主义者会说,伟大的设计是永恒的。是的,在一个理想世界中,我们可以忽视趋势与流行。 但是实事求是地讲,跟踪和融入设计的趋势是很有价值的,尤其是网站方面。让我们面对现实:网络时刻...

未来十年 ⋅ 2011/12/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mavne settings.xml

<?xml version="1.0" encoding="UTF-8"?> <settings> <localRepository>C:/Users/tuozq/.m2/repository</localRepository> <mirrors> <mirror> <id>a......

Jay丶 ⋅ 5分钟前 ⋅ 0

xuchen-mvc相关类

package org.mvc.framework.utils; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ContextPathUtil { public static List<String> splitConte......

徐志 ⋅ 19分钟前 ⋅ 0

JVM CMS和G1 有什么区别

1.CMS适用于要求:不能忍受长时间停顿要求快速响应的应用。 2.当新生代占用达到一定比例的时候,开始出发收集。不区分年轻代和年老代空间。它把堆空间划分为多个大小相等的区域。当进行垃圾收...

qimh ⋅ 21分钟前 ⋅ 0

重入(reentrant或re-entrancy)攻击

可重入 若一个程序或子程序可以「在任意时刻被中断然后操作系统调度执行另外一段代码,这段代码又调用了该子程序不会出错」,则称其为可重入(reentrant或re-entrancy)的。 例子如下: funct...

王坤charlie ⋅ 22分钟前 ⋅ 0

HTTP协议(超文本传送协议)详解

引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。目前在WWW中使用的是HTT...

一个成都的小点点 ⋅ 23分钟前 ⋅ 0

bootstrap easyui

bootstrap easyui

霜叶情 ⋅ 23分钟前 ⋅ 0

数据结构与算法之双向循环链表实践

一、双向循环链表实践 1.题目1,要求实现用户输入一个数,使得26个字母的排列发生变化 例如用户输入3,输出结果:DEFGHIJKLMNOPQRSTUVWXYZABC 例如用户输入-3,输出结果:XYZABCDEFGHIJKLMN...

aibinxiao ⋅ 27分钟前 ⋅ 0

架构设计之初体验,送给准备进阶架构的朋友(个人总结)

1 基本概念和目的 架构设计的目的是为了解决系统复杂度带来的问题,并不是要面面俱到,不需要每个架构都具备高性能、高可用、高扩展等特点,而是要识别出实际业务实际情况的复杂点,然后有有...

James- ⋅ 27分钟前 ⋅ 0

获取jar中的资源文件途径

如果资源文件处于jar中而非当前项目中,可以通过如下方式加载 String path = Thread.currentThread().getConctextClassLoader().getResource("资源文件路径").getFile();...

最佳的时间就是现在 ⋅ 30分钟前 ⋅ 0

从方法论到零售客户实践 解码阿里巴巴数据中台——2018上海云栖大会

摘要: 一、数据中台之道 6月8日,上海云栖大会进入了第二天的议程,数据中台专场论坛座无虚席,数据中台总架构师邓中华女士向在场的观众介绍了数据中台的衍生发展之道。 基于OneID、OneData...

阿里云云栖社区 ⋅ 33分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部