首页

建立条理- 版式设计原理

资深UI设计者

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

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

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


目录

 

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

专业科班系列!如何快速提高你的版式设计水平?

资深UI设计者

@乘与九设计:学习版式设计就是学习如何处理信息重点,因为在任何设计中,最重要的信息需要首先被注意到,然后是次要信息。下面介绍几种适用性强的区分层次的手法给大家。

在开始设计之前,关键要先梳理好哪些是重点信息,哪些是次要信息。接着就是要讲重点放在什么位置,是标题,内容,还是图片。这些信息的重点就是版式的层次结构。一旦确立好层次结构,接下来就是靠常用的视觉形式来处理即可,例如通过字距,笔画粗细,颜色,以及字体等等。方法如下:

1.  添加垂直空白空间

一个设计师不懂颜色搭配,就如一个厨师没有味觉

蓝蓝设计的小编

“色彩,这是一种多么深刻而神秘的语言啊!”的确,不同的色调能够调动不同的情绪和反映,能够影响用户对于品牌的感知。简单说来,色彩可以造就不同的设计。与此同时,研究表明,色彩能够强化品牌认知度(高达80%),加深用户印象,让你的作品在同类中脱颖而出。

UI设计师急需掌握的平面设计基础

资深UI设计者

滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传、广告、招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大。如今滑屏H5可谓玲琅满目,数不尽数。

作为一个 UI工程师,接过很多类似的项目,也曾写过滑屏的插件,在经历了不同的需求的“洗礼”并踩过若干个坑之后,不禁反问自己:应该如何面对每一次类似的需求,在已有的经验下如何做到体验更好?如何节省工作量提率?面对性能优秀的 iOS 与性能良莠不齐的 Android 平台,又如何做到体验统一与性能最优?

设计师的知识管理

周周

人们每谈到设计很自然的就会联想到创意、想法。作为设计师,好像我们的大脑里就理所应当地充满了各种创意,然而这些创意是本来就存在于大脑里的吗?显然不是。有人说创意来自冥想,我不否认有些天赋超人的设计神人可以通过冥想产生内容,但是对于非神设计师来说,冥想只是一个将脑海中的旧有内容进行重新组合并且呈现出来的一个方法。所以创意的内容其实不是来自冥想,而是来自设计师平时的积累,积累的越多,设计知识越丰富,创意和想法也就越多。经常听到这样的话:作为一个设计师想要提高水平,就要多看多思考多实践。于是很多人把业余时间都投入到无尽的图库之中,试图以此提高自己,但是在被各种优秀的设计作品吸引的同时,往往忽略了更为重要的知识管理

日历

链接

个人资料

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

存档