首页

想要用好留白?这篇文章帮你从头开始梳理

涛涛

留白对于设计的价值,已经得到相当广泛的认可了。留白的存在让其中的元素得到更好的凸显,有了留白才有强调,它们从来都是一体两面,焦不离孟。今天的文章,我们来聊一下留白的使用技巧和最佳实践。

设计中的留白

留白本身通常还被称为负空间,它们可以在网页布局中各个元素之间,还可以在特定 UI元素的内部。留白赋予了页面呼吸感,而它本身并不一定非得是白色的空白区域。留白界定了 UI元素本身的空间边界,而借助格式塔原理,它还可以创造视觉上的联系。

因此,留白是一种重要的、功能强大的设计元素,它对于创造积极的用户体验有着重大的影响。 交互设计基金会的 Mads Soegaard 是这么说的:“留白就像一块画布,它是将不同设计元素融合到一起的背景,又让这些元素通过对比衬托脱颖而出。”

在诸多的平面设计领域当中,负空间都发挥着无法替代的作用。无论是设计LOGO、平面插画还是字体的时候,留白的使用关系着整个设计的表现力。就像下面的博客插图,负空间的运用让整个画面显得更加生动。

无论是在网站设计还是 UI设计当中,设计师都需要借助留白来提升界面和导航的可用性。布局元素周围的留白或者负空间通常被称为宏空间,而它们之间的留白和内部的负空间,则被称为微空间。

理清概念

留白和负空间虽然是两个不同的说法,但是两者表述的是同一个东西。之所以有两个不同的说法,是因为两个名称是来源于不同的两个领域。

留白是来自排版印刷设计领域,因为页面的背景通常是白色的,而文本和图片周围的区域也多是白色的空白,因此有留白之说。而负空间这个说法是源自于摄影,吸引人注意的视觉主体被称为正空间,而相应的留白就成了负空间。

需要注意的是,留白并不一定非得是白色的,可以是其他的颜色,甚至是其他的图案。

留白为何如此重要

当你进入一个挤满各种物品和人的房间,到处都是东西和人,找到特定的东西肯定是一个非常艰难的事情。相应的,在干净的地面上,摆放的唯一的物品肯定是非常醒目的,你不需要花费任何力气就能注意到它。这也是留白发挥作用的原理所在。

虽然客户可能会要求设计师在页面上尽可能多地塞满各种元素和功能,这样可以节省空间。但是,实际上这是一个最常见的错误的做法:用户并不需要在网页上一次完成全部的工作。更重要的是,太多的元素会分散用户的注意力,用户会难以找到真正想要的信息。正如同 Aarron Walter 所说:“你想让用户注意到所有事情的时候,他们会感知不到任何东西的。”

对于设计而言,负空间的价值是非常高的,我们随便总结一下,都有很多:

  • 它让页面的可阅读性得到了提升;
  • 它增强了视觉层次;
  • 它使得元素和元素之间的关系更加清晰,更容易被感知,而不需要借助表格、框架这样的附加手段;
  • 它为页面增加了呼吸感,而不至于导致混乱;
  • 它让用户更容易将注意力集中到核心元素上,减少分心;
  • 它提升了页面的风格,让设计更加优雅。

看看这个城市指南的着陆页吧,负空间在背景中扮演了非常重要的角色,更重要的是,图片中的元素和前景的文本标题之间有所互动,这也同样是借助负空间的方式来呈现,呈现出一种和谐而有趣的设计效果。

影响留白的核心因素

合理的使用留白能够让界面的用户体验提升不少。

可读性和清晰度:如果和元素之间没有足够的留白,会变得难以阅读,用户需要花费额外的精力来进行分辨。不合理的留白设计会让用户感到紧张,想要让用户感到自然,需要让留白恰到好处,令布局显得足够自然。如同音乐中的韵律感一样,设计中的韵律感是通过留白的变化来呈现的。

品牌化:如果你熟悉LOGO的设计,你会发现设计师借助元素周围的留白来营造氛围提升感觉,留白的功能性在品牌设计上有着非常显著的体现。打破留白的设计规则,对于整体是有害的。

强化属性:留白的运用能够强化属性,比如新闻博客平台会更加密集地呈现信息,甚至会借助动态的数据呈现和较为致密的布局来营造一种资讯的密集感和平台的调性。

视觉层次:富有层次感的留白设计能够创造出视觉层次,并且让用户注意到特定的元素和信息。

留白对于视觉的影响主要体现在以下的几个方面:

  • 文案和内容
  • 图形元素
  • 导航
  • 视觉识别

接下来看看几个案例。这是 The Big Landscape 的首页,没有表单,没有视觉框架,仅仅借助留白来平衡所有的设计元素。设计师构建出了清晰的层次结构,并且允许用户一瞥即可看清所有的内容块,这样的设计看起来是清晰而有条不紊的,而且充满呼吸感。白色的背景和简约的布局让整个界面充满了实体杂志的质感, 而这也相对视觉化地告知用户这是一个在线的数字杂志。

另外一个是移动端的APP Upper。整个应用的留白都是使用黑色来进行填充的,在视觉上,黑色的留白和核心的视觉元素构成了鲜明的对比,从而起到了凸显的作用。整个设计留白充足,用户不会错过关键的部分,也不会分心,布局的组织性极强,可读性也都毫无问题。设计师确保了整体的优雅性,也让布局更加具有美学特征。

需要考虑的问题和隐患

1. 术语紊淆

和不熟悉设计术语的客户进行沟通的时候,应该尽量让他们明白负空间/留白的含义和功能。对于非设计从业者而言,很多时候确实不能很快接受「屏幕中需要留下更多的留白」这样的概念。对于黑色或者深色的背景,这类客户可能会有不好的联想,事实上并非如此。在进行足够深入的沟通之后,尽量将这些关键点灌输给客户,避免术语和概念上的误读。

2. 希望减少留白,增加页面和内容

其实这个是几乎所有的设计领域都会面临的问题。客户会希望室内设计师在一面墙摆满柜子而不是给两个剩余的地方留白,而建筑设计师也常常需要建筑周围有足够的留白,确保呼吸感,提供更好的服务。设计师需要和客户沟通,了解哪些部分更重要,哪些部分次重要,而哪些内容是可有可无的,分清层级,进行筛选。留白有助于营造更加协调的布局,让信息和功能的可用性更强。

3. 优先级不够高

如果深思熟虑的信息架构和界面并不匹配,留白并不是万能的解决方案。你需要在考虑界面设计之前,就确定用户获取信息的方式,然后再进行设计。在确定风格之前,先要梳理清楚用户流程,否则,再好的负空间设计也不足以发挥出它应有的功能。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

博博


天极网 2018-06-04 18:18:17

5月31日,小米在发布会上推出一代操作系统——MIUI10。近日,小编顺利通过了MIUI10的内测申请,于是将手里的小米5第一时间更新,一起来看看官方给新系统定义的几大更新亮点吧。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

首先,在更新MIUI10内测版之后,老旗舰手机小米5焕然一新,变得流畅许多。此次新系统主要是针对全面屏做的设计,具体表现在状态栏和多任务的排版上,UI设计结合了Andrid P和iOS风格,整体比较清新。在点按之后,图标会变成蓝色,开关按钮采用了翻页的形式,而且可以容纳的数量也比以前多了。虽然在风格上进行了大量的修改与整合,不过最终还是没能逃脱“苹果味”。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

小编觉得MIUI10最大的变化就是多任务面板,之前的MIUI9、MIUI8等版本均为横向布局,而此次MIUI10变为了纵向布局,交互方式上有些变化。官方宣称这是可以在一块屏幕上看到更多的多任务。其实就是迎合了全面屏的理念,而又不想太过抄袭苹果的多任务,最终就出现了这样的产物。说实话,小米5上的MIUI10多任务面板不是很好看,但是使用效果还不错,多任务左右滑动是关闭,长按就有分屏,锁定和设置三个按钮。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

接下来是本次新增的驾车模式和小爱同学。之前MIUI9也有语音助手,不过稍显“智障”,并没有太多实用性。MIUI10上,小爱同学增加了训练计划,可也设定提问他要回答的答案,实用性大大增强。驾车模式应该是广大司机朋友最关注的功能,全新的驾车模式在小爱同学的帮助下,可以做到边开车边回复消息,同时还能保证开车的安全性,非常实用。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

再来说说小编遇到的问题吧,因为是MIUI10内测第一批版本,BUG多也是可以理解的。刚小米5升级MIUI10后,虽然操作确实很顺滑,不过头疼的BUG使得系统整体性没那么强。有几个BUG甚至把传统的16:9手机当成18:9的手机来显示。需要提升的地方还有很多,比如消息通知会跑到下面来,就像有虚拟的刘海,还有充电的时候电量小圆圈也只能显示四分之一,还有改不了热点的名字和密码。

MIUI10上手体验:“苹果味”十足,操作更加顺滑

最后总结一下这几天的使用体验,MIUI10系统的外观设计与流畅性自然不必多说,提升蛮大的。最让小编印象深刻的还是杀后台情况,3G内存的小米5在MIUI9系统下杀后台现象非常严重。在MIUI10下,这种情况改善了许多,使用时没有以前那么“虚”,强烈推荐老旗舰手机升级。另外,小编发现“小爱同学”贯穿在了MIUI10中,许多地方都能见到AI智能的身影,相比MIUI9“聪明”了许多。总的来说,内测版MIUI10的升级非常到位,焕然一新的UI设计以及交互方式,提升颜值的同时也提高了档次。

Dribbble 界面设计灵感 33

博博


UI设计爱好者 2018-05-03 16:58:07

作者:设计达人(ID:shejidaren888)

这次 Dribbble UI 灵感主要精选网页、APP 以及一些后台管理界面,每个精选出来的界面设计的赞数都是几百+或者几 K ~

PS:当你看中某作品时,你可以点击作者名称来查看该设计师更多作品。(微信公众号不支持外链,只能点「阅读原文」来查看所有链接)

Dribbble 界面设计灵感 #33

Dribbble 界面设计灵感 33

个人主页设计 by Mike

Dribbble 界面设计灵感 33

CRM 管理系统界面设计 by Divan Raj

Dribbble 界面设计灵感 33

EverDo 应用界面 by Jakub Reis

Dribbble 界面设计灵感 33

接上,EverDo 界面的一些表单元素 by Balkan Brothers

Dribbble 界面设计灵感 33

随机实验 by Nick Franchi

Dribbble 界面设计灵感 33

Coindesk by uixNinja

Dribbble 界面设计灵感 33

一套 UI 素材:Planguru by Patryk Pustol

Dribbble 界面设计灵感 33

酒店 APP 后台(iPhoneX) by Divan Raj

Dribbble 界面设计灵感 33

B3Sound 网站着陆页设计 by Outcrowd

Dribbble 界面设计灵感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面设计灵感 33

Iterable 插画草图 by Ramotion

Dribbble 界面设计灵感 33

后台界面 by uixNinja

Dribbble 界面设计灵感 33

Dating 应用项目 by Divan Raj

Dribbble 界面设计灵感 33

Benti by Jakub Dziedzic ♠️

Dribbble 界面设计灵感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面设计灵感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面设计灵感 33

Chripcase 后台界面 by Goutham

Dribbble 界面设计灵感 33

Raika Plant by Nicola Baldo

Dribbble 界面设计灵感 33

网页聊天应用界面 by Michal Parulski

Dribbble 界面设计灵感 33

网页版的音乐 UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Music UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面设计灵感 33

USB Types by Gal Shir

Dribbble 界面设计灵感 33


23个使用大背景的全屏网页设计作品

博博


UI设计爱好者 2018-05-07 11:31:09

在2013年的时候使用全屏背景或者大图片的网页开始流行起来,到了今年,还是经常看到这类风格的页面出现,可见这个趋势还是很流行的,值得运用。

一张大图再配合一个优秀的排版布局,这样一个美丽的页面就形成了,比起视差网页、动效网页成本低了很多,但视觉效果还是能令人满意的,下面精选一些优秀的大背景网页设计作品给你欣赏,也行会给你带来更多灵感哦!

这于高清图片素材建议大家去设计导航里面的免费图片素材上查找。

Nike – Geç Kendini

23个使用大背景的全屏网页设计作品

查看网页

Edwin Europe

23个使用大背景的全屏网页设计作品

查看网页

Esprit Cox

23个使用大背景的全屏网页设计作品

查看网页

Feed

23个使用大背景的全屏网页设计作品

查看网页

Truth Labs Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Natural Food & Beverages

23个使用大背景的全屏网页设计作品

查看网页

La Plus GRANDE Cave À Bière Du Monde

23个使用大背景的全屏网页设计作品

查看网页

Ice And Sky : The History Of Climate Change

23个使用大背景的全屏网页设计作品

查看网页

Fivefootsix

23个使用大背景的全屏网页设计作品

查看网页

For Better Coffee

23个使用大背景的全屏网页设计作品

查看网页

Brdr. Krüger

23个使用大背景的全屏网页设计作品

查看网页

The Boat

23个使用大背景的全屏网页设计作品

查看网页

Beagle – Better Proposals

23个使用大背景的全屏网页设计作品

查看网页

Webdesign Agency Weblounge

23个使用大背景的全屏网页设计作品

查看网页

Words Can Save

23个使用大背景的全屏网页设计作品

查看网页

Well Storied

23个使用大背景的全屏网页设计作品

查看网页

Fabrica

23个使用大背景的全屏网页设计作品

查看网页

Alexander Engzell Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Cartelle Amsterdam

23个使用大背景的全屏网页设计作品

查看网页

Printemps Du Polar

23个使用大背景的全屏网页设计作品

查看网页

Ashworth GOLF/MAN

23个使用大背景的全屏网页设计作品

查看网页

HBM FiberSensing

23个使用大背景的全屏网页设计作品

查看网页

The | Marmalade

23个使用大背景的全屏网页设计作品

聊聊排版中的版面率和留白率

涛涛

一、何为版面率

我们都知道一个版面中必定有版心的概念。何为版心呢?版心就是除去天头、地脚和左右页边距余下的区域,也是我们页面内容的摆放空间。下图中灰色块的区域就是此页面的版心。

知道了版心,那么何为版面率呢?版面率就是版心所占页面的比例,通俗一点讲就是版面的利用率。

上面左图中版心的面积非常大,四周的余白少,版面的利用率高,所以版面率就高。右图版心面积小,版面利用率比左图低,所以版面率就低一些。

版面中也有满版与空版的概念。如上图,满版就是没有天头地脚与左右页边距的,此时版心即整个版面,版面利用率为100%。空版就是版面利用率为0%的。从满版到空版之间的版面率是递减的关系。

二、版面率对画面气质的影响

说完版面率的概念我们再来说一说版面率对画面气质的影响。

一般来说版面率越高,视觉张力就越大,版面也会更活泼与热闹;反之,版面率越小,给人感觉就越典雅与宁静,版面也会更有格调。

上图中高版面率的海报相对于低版面率的更热闹与活泼;低版面率的则更典雅。

画册中也是一样的,上图是我早些年做的一个案例。同样的内容跟图片,只是版面的利用率不同,我们可以发现右边低版面率的作品更安静和典雅。

版面率的高低能够影响版面的气质,所以我们实际工作中也要根据项目的气质分配合适的版面率。比方说典雅气质的项目我们就要用低版面率版面,如果用高版面率显然是与项目本身的气质相悖的。

三、留白率

说完版面率我们再来说一下留白,留白的概念大家都懂。而这里所说的留白更多的是指页面的负空间。

页面中去除内容后的空间就是负空间,如下面这个页面。

图中灰色块代表图和文字信息等内容,除去这些图片和文字后,页面中的其他空间都可以看作是负空间,也就是留白。当然,留白并不一定是白色,所有除去页面内容后的空间都是负空间,如上图右侧案例,黑色部分即此页面的留白。

负空间的多少即是留白的多少。留白的多少我们可以用留白率来表示,如上图,负空间小的留白肯定少,留白率就低。负空间大的的留白肯定多,留白率就高。

留白率就是版面留白的多少,实际上与版面率的概念差不多,如下。

空版留白最多,满版留白最少。当然这也不是绝对的,有的作品中虽然是满版,但空间广阔,比如天空什么的,都可以当作留白来看待。

四、留白率对画面的影响

上面说来留白率跟版面率也有一定的关联,所以他们对画面气质的影响也是如出一辙的。我们可以先来看一下低留白率与高留白率的几个作品。

通过这几个作品我们可以看出留白少的信息更丰富,版面更有活力,也更热闹,亲和力也更强。而留白多的更雅致,更安静典雅,更有格调跟品质感,但亲和力稍弱。

五、案例演示

下面进行案例演示吧,首先看一看文案。

这一步我们需要把文案的层级关系拉开,大中小区分的明显一点。这个文案的层级关系肯定是 欲望の森林 > 英文 > 欲望是无尽的森林 > 小文字信息的。

首先我们做一个有张力的版面,那么我们可以想一想什么样的版面是有张力的呢?

首先版面率要大,其次留白要小,让版面中的信息紧凑一点。

上图就是对版面的布局,可以看到图片是出血版的,没留天头与左右页边距。这样做的目的也是使版面率更大。

布局做好之后我们把图片与编排好的文字放置上去就可以了,如下。

上图可以看到留白比较少,符合留白率低的理论,虽然具备张力,但不是很明显。这种情况下我们可以改变一下底色使之感觉留白率更低,如下。

做完了留白少版面率高的,我们再来做一个典雅一点的。

根据本篇文章的内容思考一下什么典雅与安静的的排版版面率与留白率分别是什么样的?

一定是低版面率和较多留白的版面更能体现典雅与安静感。所以我们在版面安排上要使其留白更多,同时版面率要小一点。下图就是一个基本布局。

最后我们再根据版面布局置入图片微调一下就可以了,如下。

总结

版面率跟留白率都能够影响版面的气质,我们做项目的时候具体问题具体分析,根据项目气质去设定版面率跟留白率的大小。

建立条理- 版式设计原理

涛涛

大家好,从今天开始我要以大白话且通俗易懂的方式,来与大家分享我的知识和观点。

主要讲解的是平面设计基础理论知识与实际用法,后期会讲一些高阶的设计思维。

本章节适合设计小白和需要填补设计基础的设计师学习阅读。 


目录

 

1、理解、提取与布置

2、贴近与远离

3、排列与对齐

4、视线移动方向

5、组织与重复

 


 

1、理解、提取与布置

 

理解、提取与布置指的是根据设计的意图来进行信息的整理,然后再将整理好的信息中重要和不重要的信息按照优先级排列出来,最后再根据排列好的信息按个人美感和美学理念摆放到平面中。undefined



1.1 理解部分


当收到一个海报设计需求时,我们不是要马上动手去做,而是要去思考需要设计的海报受众群体是哪些人,具体要怎么展示它,它展示的目的是什么。 undefined

下面我就简单介绍一下设计思维及方法,首先要设置定一个需求【现代美术馆,需要设计一个简洁大方的海报】。根据这个需求在进行具体的思维延伸。



1.1.1 海报的受众群体


当我们收到设计需求时,要考虑海报的受众群体,男人/女人,少年/青少年/中年/老年,每种受众群体接受教育的程度和经历均不同,要根据不同的受众做合适的设计。当我们按照具体需求定义好受众群体后,就可以考虑推断用哪种风格来展示海报了。

undefined

对于现代美术馆需要一个简洁大方的海报,这个需求所涵盖的年龄区间比较大,基本上所有人都可以参观美术馆。那我们只要避免使用“个性化”的表象特征元素就可以解决这个问题了。

undefined

意思就是不要加入柔美的线条(除非展品的构成是柔美的线条),游戏和女妆这类具有一定代表性的象征元素,不要夹杂太多表现形式,用最容易让人理解的表象形式来处理就可以了。



1.1.2 怎么展示海报


现代美术馆,需要设计一个简洁大方的海报这个需求,可以根据主关键词“现代”和“美术馆”,次关键字“简洁”和“大方”来推断要采用哪种设计语言。“现代”的表现形式是无衬线体、干练(有棱角)、简洁、没有太多情绪。而“美术馆”只要在图片的处理上让主题与图片串联共通就可以了。

undefined

简洁大方的设计需求可以采用直线(字有时也是线)或大留白、配色多些白色、舒适的高纯度高明度、整体干净清爽,同时也要注意禁止添加太多颜色(如撞色)。



1.1.3 运用理解部分生成原型


根据前面的分析大概有了个原型,分为上下构图。上部分是美术馆的部分场景图片,下部分是具体的内容信息部分。所有要素均以现代感、简洁干练、配色不复杂、线性、整洁、清爽、专业、无太多情绪为基础进行设计的。

undefined

以上就是“信息的整理”中的“理解部分”,当设计师收到需求时,不要马上着手去做。先思考采用哪种表现形式(视觉语言)更适合需求,分析后再去做设计,这样才能准确表达具体的需求,也能做出更符合需求的设计。




1.2 提取部分


提取部分就很好理解了,顾名思义是将整理好的信息中重要和不重要的信息按照优先级排列出来。我们只需要根据优先级进行排序,并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】这么多种信息,把最重要的【CGIL】提取出来再排列优先级【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】这个过程就叫“提取信息部分”。

undefined




1.3 布置部分 


把提取并排列好优先级的信息规整好,就可以布置在平面上了。用之前设计好的原型套用已提取好的信息就可以了。特别要注意重要的内容放大,不重要的内容弱化。



* 要点


理解:首先要理解作品的受众群体、要怎么展现、目的是什么。

提取:其次要明确作品内容中什么是最重要的、根据优先级排序。

布置:最后把排列好的信息加以布置,重要的内容放大,不重要的内容弱化。





2、贴近与远离


贴近和远离的概念也是比较好理解的。与格式塔视知觉的亲密性与远离性是一个道理,初期只讲一些通俗易懂的概念,像格式塔视知觉以后会讲。



2.1 贴近和远离的 基础概念


贴近是指同类要素摆放在一起会呈现出一种共通性或产生某种规则,而远离是指同类要素分开摆放看上去就没有共通性或不会感到有某种规则。

undefined


当把同类要素(男人女人)放到一起,会觉得他们有一定的共通性,而且看上去像一对情侣。相反把同类要素(男人女人)分开来放,会觉得他们毫无关系。


我们把这种概念应用在平面设计上,如下图所示。

undefined

相同的要素摆放在一起会有一定的共同性,相反分开摆放则看上去没有关联。

undefined

贴近与远离基础概念的实际案例



2.2 贴近和远离的 进阶概念


把同类要素放到一起有种井然有序的感觉。如果要处理较为规整传统的版式时,可以考虑多将要素放到一起形成规则。另外把同类要素分开摆放,会感到没有共通性和规律规则,但是能为平面增加节奏感和冲击力。

undefined

贴近与远离进阶概念的实际案例


其次远离能使平面产生留白,通过留白也能使平面具有关联性。

undefined

虽然说远离能使要素看上去没有共同性和规则,但如果要素处在一个平面中,利用留白呈现出一种关联性。这就像吵架的夫妻一样,同在一个床上,女的偏床左侧,男的偏床右侧,呈现一种远离性。但他俩还是处在“床”这个平面中,也会呈现一种关联性。

贴近与远离进阶概念的实际案例



* 要点



同类要素贴近摆放在一起相互关联,同类要素远离摆放相互排斥。

同类要素贴近摆放在一起平面有规则,同类要素远离摆放增添节奏。

留白也能使要素有一定的关联性。




3、排列与对齐


排列与对齐的概念比较简单,也很容易理解。转化一下思维,把排列比作军队队伍中的“集合”,把对齐比作队伍中的向前/左看齐,就很好理解了。




3.1 排列


排列是指将要素按照一定的规则进行布置,使平面达到一种平衡与和谐。道理与收拾屋子一样,杂乱无章的屋子会让人感到不舒服且很压抑。整理的井然有序的屋子会让人心情舒畅很安心。平面中的“排列”就是屋子中的“整理”,目的是使杂乱的屋子变得规矩整齐。收拾屋子的方法就是“规则”,用规则的方法来排列就叫“布置”。

undefined

排列的目的是让平面变得有序和规则,当平面达到有序和规则就会呈现出一种舒适感,好比自然中的和谐。



3.2 对齐


对齐也可以理解为将要素按照一定的规则进行布置,使平面达到一种平衡与和谐。对齐与排列的差别在于,对齐是在排列的基础上进行操作的。先将要素按照一定规则进行排列,然后再将要素进行对齐。排列是画一个大体的框架,而对齐是做框架里的精细操作。

undefined

排列与对齐的实际案例



* 要点


排列与对齐的目的是让平面变得有序和规则,当平面达到有序和规则就会呈现出一种舒适感。

把排列比作军队队伍中的“集合”,把对齐比作队伍中的向前/左看齐,就很好理解了。





4、视线移动方向


设计书籍或排版布局时,要考虑通过设计让读者以怎样的顺序去阅读作品,通常情况下人的视线是从上到下移动的,所以在设计时要考虑到这一基本原则。阅读横排文章时视线是【由左至右】,阅读竖排文章的视线是【由右至左】。

视线的移动方向分为三个知识点,横排阅读、竖排阅读、流水式阅读。流水式阅读以后会讲。

undefined

随便补充一下啊,我读过的设计文献中提到的阅读方法只有“Z字视线移动方向”,而没有“T字视线移动方向”。有一种学习方法叫“T型阅读法”,与视线移动方向的“T字视线移动方向”不是一个概念。视线本身就是从上到下从左到右的形式阅读的,形成了Z字阅读方式,我觉得是国人是把这些概念给曲解了,如果有说的不对的地方,也请大佬们多多指点。



4.1 横排阅读


横排阅读是指作品的排版布局是以横向的排列方式让读者来阅读作品。横向的排列方式就是文字是横着的,大家现在读的这篇文章就是横向排列的文章。阅读横向排列的文章时视线是从上至下【由左至右】依次阅读的,如图所示。

懂得了横向排列的方式来阅读文章会有什么用呢?由于人们的阅读习惯,一般情况下阅读读物,都会遵循从左到右阅读文章的方式,这也就间接影响了文章内容的重要性。采用横向排列的方式进行排版布局,重要的内容要放在最左面,也就是最方便引导人们视线方向的地方。


如果不把重要的内容放在视线方向的地方,读者不仅阅读作品时会感到很吃力(可读性),而且会不理解作品是什么含义,视线也随之错乱,作品也会失去原本的含义。

横排阅读的实际案例



4.2 竖排阅读


横排阅读是指作品的排版布局是以竖向的排列方式让读者来阅读作品。阅读竖向排列的文章时视线是从上至下【由右至左】依次阅读的,如图所示。

一定要注意,竖向排列方式内容区在平面的最右面,与横向排列方式不同。这个规定就像地球为什么是圆的的道理一样。


竖排阅读的实际案例



* 要点


阅读横排文章时视线是【由左至右】,阅读竖排文章的视线是【由右至左】。

不要打破规则,一切以引导读者视线为主。




5、组织与重复


按照一定规则构成布局来编排要素,能使种类繁多的要素显得整洁有序。



5.1 组织


没有共通性的杂乱图形汇聚一起会造成视线混乱,读者注意力会被分散,也会降低理解力。将图形用框圈起来,按照等距进行排列,整体就会显得很整洁,也便于找出想要了解的图形。

组织规则的实际案例



5.2 重复


这里的重复不是指复制粘贴,而是元素上的重复构成。例如重复相同的格式,风格、文字、颜色、线、图案等。为了让平面具有条理性,用风格统一的要素做修饰,让排版符合流水式,视线清晰自然。


重复规则也可以应用在平面中、元素中、要素中、形状中等,灵活运用重复能使平面具有统一性,也能制造趣味性,增加读者对作品的印象。

重复规则的实际案例



* 要点


将图形用框圈起来,按照等距进行排列,整体就会显得很整洁,也便于找出想要了解的图形。

灵活运用重复能使平面具有统一性,也能制造趣味性,增加读者对作品的印象。

UI设计 如何让你的配色更加舒服

蓝蓝设计的小编

色彩作为视觉感知的先觉条件,在很大程度上决定了作品的好坏以及给观者留下什么样的印象,人们感知到的即是通过色彩所传递出的情感,色彩作为一门独立的学科,在基于其理论体系之上衍生出了众多的搭配方法和技巧,在遵循色彩构成的原理之上可以更好的帮助我们对色彩有深入的认知和使用,对于色彩而言,除了要了解基本的构成之外,在使用的过程中更重要的是要对色相,明度,饱和度有敏锐的观察里和视觉感知力,通过三者不断的变化和调整把控使色彩更加具有情感,让视觉感知更加的舒适并满足我们的实际的需求;

袋鼠云:可视化大屏打造智能数据方案全闭环

博博

袋鼠云:可视化大屏打造智能数据方案全闭环

袋鼠云 2018-05-17 15:37:32

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


编者按:距热情似火的618国民年中购物节已经不到两个月时间,去年京东商城最终以累计下单金额高达1199亿元(行业口径)的战绩收官。而记者了解到每年借着“京东618”“双11”这两股全民消费热潮的新零售品牌远远不止淘宝与京东两家,已成为了整个产业链方方面面品牌的推广盛宴。

因此,每年的618购物节参与的企业数量可谓“芸芸之众”,这场一年比一年盛大的狂欢节也对支撑其后的运算资源、网络平台、存储与挖掘大数据提出了更高更严苛的要求。针对各家的技术资源体系、技术运维团队、大数据智能技术水平也成为了企业高管的“第一关注”。

而记者采访了多家新零售企业的CIO,提及如何更好地应对即将到来的今年“618”,他们大多表示:“增加服务器及运算资源、优化技术架构提高冗余、完成即时大数据挖掘分析是今年的三大要务。”的确,在保证全民购物节完美的用户操作体验之外,对自身企业在这场没有硝烟的商战中获得的宝贵数据充分分析并加以利用也成为了CIO们所考量的重点,让精准营销落地同时指导未来的市场规划。

如何更好的挖掘大型项目节点中企业获得的巨量数据?如何将挖掘数据中的信息得以简明有效的呈现,最终迅速指导市场策略?记者在618前夕走访了国内新锐的数据智能解决方案企业——袋鼠云。

袋鼠云:可视化大屏打造智能数据方案全闭环

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司,在今年动作频频,完善提升自身数据智能产品线研发的同时,也在今年大量引入高端人才,全面完善数据智能整体品牌价值。

记者在采访中了解到,袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础,通过袋鼠云的数据内容策划团队的有效建模,配以令人印象深刻的专业视觉设计,通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司,在今年动作频频,完善提升自身数据智能产品线研发的同时,也在今年大量引入高端人才,全面完善数据智能整体品牌价值。

记者在采访中了解到,袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础,通过袋鼠云的数据内容策划团队的有效建模,配以令人印象深刻的专业视觉设计,通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云CEO在采访中向记者介绍了典型客户“中国茅台”可视化大屏项目实施情况,他告诉记者:“世界第一白酒品牌“中国茅台”之所以选择袋鼠云建设数据可视化大屏项目,主要是基于要解决全面打造企业数据中台以及将中国茅台品牌能力直观生动地呈现给领导与参观客户。”

袋鼠云:可视化大屏打造智能数据方案全闭环

“基于此,袋鼠云为他们从数据管理与应用方式方法上改变思路, 有些甚至是全新的角度与理念,目的也是为了让‘中国茅台’的企业数据价值更好的被利用。”他告诉记者:“因为茅台品牌社会面很广,袋鼠云后期基于数据,提供的诸如舆情分析系统、反黄牛数据系统等富有社会成效的定制功能,获得客户的高度认可。”

数据智能(DI)不仅仅是把数据放在一起,而是要聚集产生化学反应。“中国茅台”这个客户应用就很典型,他继续向记者介绍:“我们给客户的数据分析与决策都是动态的,实时监控大屏即时展现茅台酒的交易总额是多少?哪个地区的茅台酒目前是销量最高的?哪些客户最热衷于他们的产品?这些动态的数据分析结果都能实时呈现在展会现场的可视化大屏幕上。另外茅台做的可视化大屏,也直观地体现了茅台用户群体的年轻化趋势,这和我们之前想象中茅台的消费者较高年龄层的情况不一样。这次可视化大屏解决方案帮助茅台更清晰地了解了自己的终端用户,要知道以前客户数据分散在经销商、渠道商那里,到底谁喝了茅台酒,茅台集团是无法获知的。”

袋鼠云:可视化大屏打造智能数据方案全闭环
袋鼠云:可视化大屏打造智能数据方案全闭环
袋鼠云:可视化大屏打造智能数据方案全闭环

而实时采集数据,实时处理分析数据也是袋鼠云口中的“一大门槛”。记者了解到,类似袋鼠云这样的从数据采集--数据存储--数据应用--数据呈现整体打造闭环的数据智能解决方案服务商在行业里具有很大优势。在中国茅台的典型方案中这一点就展露无遗。他向记者介绍:“中国茅台选择过去传统服务商时,手机端与电脑端的开发商是不同的,因此移动端和PC端后台数据没有打通,形成了非即时的数据孤岛。而采用了袋鼠云“全域”智能数据解决方案后,所有的标准制定都是相同的,数据得以深入而全面的加工。而精准营销、反黄牛、打标签、舆情监测、秒杀系统等等富有成效的模型都是基于企业数据的被统一联结并做出实时分析结果。”

记者谈到实时数据可视化这个部分时,袋鼠云CEO显得自信满满。他告诉记者:“数据的实时性采集非常重要,“袋鼠云”实现了TB级别甚至是PB级别的大数据进行实时处理,实现秒级反馈是最基本的要求。”他继续告诉记者:“这得益于袋鼠云的技术团队多数来自于阿里云,针对业务暴增、恶劣环境等极端情况下的峰值保障应急处理的技术与能力具有相当的经验。”记者还了解到,袋鼠云现在的技术团队都曾经历过“天猫双11”等等大型活动,并协助茅台、百草味、秒钱、申通E等多家公司顺利完成了大促护航等工作。

记者观察:一方面基于人才技术优势打造团队“硬气功”,另一方面深化客户项目落地可视化效果的“软实力”,在袋鼠云眼中一个睥睨新业界的发展蓝图已清晰可见。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计!

蓝蓝设计的小编

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

版式设计中的简约设计
设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!

设计!


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档