设为首页
收藏本站
用户名
Email
自动登录
找回密码
密码
登录
立即注册
只需一步,快速开始
快捷导航
登录
注册
论坛首页
BBS
建站模版
微站设计
虚拟主机
企业邮箱
博客日志
Blog
搜索
搜索
搜索
热搜
长春
优惠
活动
做网站
本版
帖子
用户
本版
帖子
用户
请
登录
后使用快捷导航
没有帐号?
立即注册
道具
勋章
任务
留言板
设置
我的收藏
退出
时时商务社区
»
论坛首页
›
资讯分享
›
今日头条
›
吃透这10个网站,你就明白了网页中留白的技巧 ...
返回列表
查看:
1719
|
回复:
0
吃透这10个网站,你就明白了网页中留白的技巧
[复制链接]
福多多1989
当前离线
积分
7872
2652
主题
2652
帖子
7872
积分
论坛元老
论坛元老, 积分 7872, 距离下一级还需 9992127 积分
论坛元老, 积分 7872, 距离下一级还需 9992127 积分
积分
7872
发消息
电梯直达
楼主
发表于 2018-3-28 15:14:48
|
只看该作者
|
倒序浏览
|
阅读模式
想要让一个元素足够吸引用户的注意力,往往需要通过周围的留白来衬托,这样的设计所营造的用户体验更为优雅。
在极简主义风格是主流的今天,「少即是多」是设计师奉为圭臬的准则。控制配色方案的数量,限制视觉元素的数量,在清晰的层级之下,呈现最核心的元素,抓人眼球,直击核心。
这样的设计对于留白极为依赖,因此,留白很重要。
留白并不一定必须是白色的,它可以是其他的任何颜色,而留白的另外一个名字是「负空间」。留白能够衬托和凸显视觉主体,这也是它发挥作用的主要途径。
尽管留白看起来不复杂,但是在复杂多变的设计环境之下,往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡,而要做到这一点,需要相当的实践和积累。
在什么地方用留白必须承认,并非每个设计都需要大量的留白。留白的使用一定是有范围,且有留白会对设计中下列因素产生影响:
排版布局
影像图片
功能控件
文本内容
边距间隙
Mark Boulton 将留白划分为大小两种。
小留白是在较小的元素之间小间隙,比如下面的元素周围的留白就是小留白:
链接
列表
图标
按钮
文本段落
相反,在处理相对较大的元素的时候,周围的负空间是大留白。
正确使用留白能够为整个设计带来平衡感。对于文本内容,你会发现易读性的高低和其中的小留白的控制有着密切的关联,这对于内容的呈现有着重要的影响。
使用留白的好处还有很多:
留白能够增加内容的可理解性。
留白能够凸显特定的 UI 元素,CTA 元素大都如此。
可以让设计更加整洁、友好。
Bear Creek Distillery
充满形式感和冲击力的图片搭配上令人眼前一亮的文案,Bear Creek Distillery 可以轻松地从同类网站中脱颖而出。为了突出他们作为酒类供应商的核心竞争力「蒸馏技术」,设计师尽可能地降低可能让人分心的因素,从而将信息精准直接地传递给访客。
Squarespace
在保证用户能够获取足够的信息的前提下,Squarespace
的设计师尽量限制了界面上使用 UI
元素的数量。搜索框让用户能够轻松找到他们想要的信息,而文案设计上的独特性使得品牌的调性得到了放大。文本的字体色彩选用了黑色,和浅色的背景构成了强烈的对比,让阅读和信息的获取都无比的轻松。
Progressive Punctuation
如何使用标点符号来传达复杂的情绪?Progressive Punctuation 这个网站将这些「全新」的标点符号都展示了出来。
和其他的页面不同的地方在于,页面需要承载多个不同的非标准标点符号,为了将信息准确的传达,设计师巧妙地使用留白来控制符号之间的间距,确保整体的优雅性,又保证了信息的传达。
Apple
关于留白的设计,很难绕过苹果这么经典的案例。虽然他们不是先驱,但是苹果将这一技巧的运用在自家的产品设计和网站设计上,体现的淋漓尽致。
在他们的网站上,你会看到清晰的视觉脉络,页面的每个部分都有清晰的视觉焦点,主次分明,用户永远不会在这里迷失和分心。
分享到:
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
0
回复
使用道具
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
用户反馈
客户端