首页

五步提升你的版面精致度

雪涛


首先,我们怎么去理解在作品集版面中的“精致度”。我觉得可以将其转化为“质感”,“细节”,“细腻”这样的词汇。其实“精致度”不足这个问题大部分同学也是能有所感知的,只是不知道哪里出了问题,也就无从下手。当然还有一小部分同学,可能并不觉得自己有什么问题,也无法体会修改前后的差别,这样的同学,我建议你平时应该多看一些优秀的设计作品,多沉淀一下,这样的方式对你帮助更大。


很多同学经常把“精致度”理解为形式感不够,或者是不够酷炫,这么理解是不准确的。这就好像一个产品,它的精致和它的外观设计并没有什么直接联系,而是更多的取决于这个产品的做工和材质。做工体现在接缝的处理,边角的打磨等等,而材质决定了其质感的好坏。那么同理,版面的“精致度”实际上和你的设计感也是没有直接联系。那么从哪些方面体现版面中的“精致度”呢?我结合自己的经验总结了以下几个方面:

1.舒适的间距。一个合适的,让人舒适的间距特别重要。无论是文字与的,或者说认为不重要的事情。混乱的,不统一的,不舒适的间距会让版面变的排布变的无章,这就好像一个产品各个部件的拼接接缝大小不一,会导致“精致度”下降。

2.大小比例。版面中所有元素的互相之间,以及相对于整个版面的大小比例问题。这个也是非常重要的一个体现“精致度”的地方。所有内容都过于傻大粗,无疑会让版面看起来非常粗糙。

3.层次感。层次感实际上是一个非常好的提升质感从而体现出“精致感”的手段。缺乏层次感的版面会显得非常的寡淡,以及在内容较多时可能会在视觉上造成较乱的感觉。那么如何提升层次感,主要是靠对比的强弱。比如:深与浅,粗与细,大与小,疏与密等等。

4.字体。选择一个精致好看的字体,对版面的精致度有一定的提升,不过还是要注意,字体的与版面之间的大小比例要注意。


5.配图。配图的质量也一定程度上影响了版面的精致度。无论是你自己做的图,比如分析图,效果图等,还是你网上找的图,如参考图等,都很大程度上决定了你这一页的精致度。


通过以上几点的提升,我相信你的版面“精致度”一定会有较为显著的提升,而版面效果也会看上去更为高级。不过这里还是要再次提醒,精致度和设计感是两回事儿,如果只有精致度,而设计感较差,那也是不行的。希望本期的内容对你的版面有所帮助。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:马克笔留学设计

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


光影和空气,是完美排版的最后一块拼图

雪涛

元旦过后,新的一波工作又要开始了,我在开始准备新一轮汇报材料的时候突然想到了一个问题,不知道铁子们在往年参加设计评审的时候,有没有总被老板 diss 设计稿里“太空了” “不够饱满” 这些个问题呢?

我猜测应该99%的铁子经历过,我也不例外,从校招进到第一家公司就开始被植入页面需要利用好每一像素的理念,搞得像北京房价一样寸土寸金,生怕被浪费了;思前想后为了大家不重蹈我的覆辙,所以新年的第一篇,咱一起来聊聊排版的问题:


NO.1


如果你看过我过往的文章,也许会对我的排版多少有点印象,夸张的大字,极强的对比,还有一些微妙的层级关系;坦诚的讲,我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格


1.瑞士风格

整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在;这种一丝不苟,传达准确的风格,即所谓瑞士国际主义风格。简单的说,由于 Swiss Design 这种风格简单明确,传达功能准确,因而很快得到世界范围内的普遍认可,成为战后影响最大的一种平面设计风格,也是国际最流行的风格,因此,又被称为国际主义平面设计风格;

简单的说,瑞士的这种设计风格典型的代表就是我们看到的杂志,其中有 3 个特点:讲究网格 / 非常理智的克制颜色的使用 / 层级关系;有趣的是,审美和潮流是循环的,随着时代的发展,越来越多的app开始重新挖掘出来瑞士风格并加以使用,比如我们iOS系统自带的应用们,Spotify:

年少的时候,我经常看着这些个app会不禁的问,为什么在没有一张图片的情况下还能如此好看?这些年终于明白了前人良苦用心:文字是内容,同样也是构成;是信息,同样也是装饰;简单可以理解为,不管在平面还是网页亦或者是UI界面,在没有可用的装饰下,信息本身要承担起装饰和传达的双重功能,这就是瑞士风格的核心本质


2.拟物风格

iOS是拟物的典型代表,网上对于这块的讲解已经过于饱和了,我也没必要赘述;那么这一趴,来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳,潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…

但当我打开下图这个页面的时候,我意识到我对拟物的理解还是浅薄了,第一次被光影的层次震撼到:

通过光影塑造了一个三维空间,让整个画面丰富饱满,也打破了我幼稚的设计观,PS.不管锤子科技现在如何,我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献,respect!

毫无保留的说,我的设计就是二者的融合,以 层次对比 作为核心理念。


NO.2

啰嗦了半天,赶紧进入正题;如果你是一名产品体验设计师,一定听说过 “奥卡姆剃刀” ,这个定律通常用在交互链路的设计上(意思就是在用户路径中没必要的步骤,省了就完事了),“如无必要,勿增实体” 即简单有效原理;


同样,在嘈杂的视觉结构里,画面也需要奥卡姆剃刀,当你在对画面的饱和上困扰不已,并急于找到一些背景和纹理填充的时候,我建议你先冷静一下…因为页面的空虚未必是需要实体化的东西来填充的;上文有说过以  “层次对比” 作为核心理念出发,要区别于平面设计,营造一个立体空间,所以先理一下画面结构:

通常来讲,如果想要不平,把二维空间转化成三维空间是必要的一步,需要在Z轴上下功夫;如果你恰巧也是一名摄影爱好者,可以想象下照相机的焦距和景深,工作原理是相同的,需要 前景 / 主体和背景 三个层次;当然,虚实的对比对信息的呈现和层次的拉开是极其重要的,这里需要通过景深来控制效果,你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到:

另外,空间的感觉想要被突显,那么“光影和空气”的价值就可以无限放大了,按照如上所说的结构,把内容和自然物质摆进去就好了,甚至可以做到举一反三(比如不同颜色的氛围,我就不展开了):

整个case下来,你会发现用光来聚焦在信息上,自然而然就形成了我们说所得 “信息优先级”;有点时候空气和光影的饱满程度超乎你的想象,这种自然存在的物质可以很好的帮助画面分层,以达到填充的效果,并不是一定要依赖于实体化的装饰。


对了,如果你跟我一样闲着没事干的话,借用 keynote 的动画效果做一个吊炸天的动效,一定可以成为汇报场上最靓的崽( 注意:视频有音乐)!

NO.3

本来不打算再开一个章节说这个,但还是觉着很有必要再说下(我好纠结),作为PPT来讲,ta的主要用途分为两种:其一是给人看的,其二是给人讲的;不管是哪种,尽可能的简化文字,是对输入者关爱;

以上图为例(实名diss自己的作品),坦诚的讲左边的部分大多数观者是不会有心思来看的,按照视觉系统的处理,这部分就会被当成一个“面”而被忽略掉,这种情况下右边显得有力很多,也能帮助观者聚焦信息,所以还是那句话,能不写的就别写,能少些的别多写,保持信息的密度也是设计师必要的职责之一。


总结一下

想问一个问题,铁子们觉着UI的本质或者作用是什么?从我个人的角度来讲,UI设计的本质就是对信息的整理归类和编排,没有什么比信息更重要,如果贸然为了饱满加入一些装饰元素,很有可能是本末倒置,得不偿失。这就像喝酒一样,喝醉很容易,但微醺的感觉才是最棒的,今天是元旦后的第二个工作日,希望你能有个好心情迎接美好的一年~


文章来源:站酷   作者:负能量补给站

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

今天影院复工,带你看2020电影海报大合集!

雪涛

千呼万唤始出来,犹戴口罩半遮面

要说上周什么消息最激动人心,那绝对是全国7月20日低风险地区电影院重开无疑了

今天影院复工,带你看2020电影海报大合集!

消息一出,蛰伏数月的电影爱好者们,纷纷倾巢出动在央妈的评论区里为电影提前打Call。

今天影院复工,带你看2020电影海报大合集!

各种网络段子也是应声齐飞:什么待业电影院员工急售餐车抢复工;上座率不超30%,情侣们也得分开坐

今天影院复工,带你看2020电影海报大合集!

想必各位鸭脖听闻也是激动难耐特别是海报设计师们,终于不用因为没活儿继续挨饿了

趁此机会,先来看看电影海报,一来可解相思之苦,顺便排一排雷,还能边挑边学设计技巧,三全其美,岂不快哉:

7月上映电影

1. 误杀

重映时间—7月20日

近年来难得一见的国产剧情好电影,单从海报上就可见一斑。

「看1000部电影」不能助你飞黄腾达,却能让你将世人的眼睛玩弄于股掌,既然生活是一部电影,那就没有什么是不能人为去剪辑的。

今天影院复工,带你看2020电影海报大合集!

表面上束手就擒的一家人,实则齐心协力,暗度陈仓。

今天影院复工,带你看2020电影海报大合集!

如果你认为孩子画的案发现场,将成为如山铁证,那么恭喜你,人都还没进影院,就已经陷入了导演的叙事诡计。

今天影院复工,带你看2020电影海报大合集!

2. 第一次的离别

上映时间—7月20日

发生在新疆男孩与母亲间的温情故事,母亲患病无法言语,更时常离家出走,两小无猜的男孩女孩,毅然穿越漫漫黄沙,踏上寻母的道路。

今天影院复工,带你看2020电影海报大合集!

沙漠中,只要三个人影在孤独地行走路的尽头,究竟是与人别离,还是要跟童年别离,或许,二者都是。

今天影院复工,带你看2020电影海报大合集!

3. 璀璨薪火

上映时间—7月20日

作为非物质文化遗产纪录片的海报一只饱经风霜的粗糙的手,谈不上精妙创意,甚至颇有些质朴。

今天影院复工,带你看2020电影海报大合集!

但别忘了,正是这一双双沉稳的手,日复一日,年复一年守护着国人傲立世界的文化的骄傲。

今天影院复工,带你看2020电影海报大合集!

4. 妙先生

上映时间—7月31日

年度话题大作《大护法》的姊妹篇有关「善良」的深刻讨论,如果每次拯救恶人,都要牺牲好人,那这种所谓的拯救,究竟还值不值。

今天影院复工,带你看2020电影海报大合集!

温馨提示,内有大汉「聚众赏菊」是成年人画给成年人看的动画片。

今天影院复工,带你看2020电影海报大合集!

5. 呆瓜兄弟

上映时间—7月31日

从1976年开播的第一集就让观众捧腹大笑的木偶短片。

今天影院复工,带你看2020电影海报大合集!

40年后重聚的不光是这两只呆瓜更是荧幕前的观众与自己的童年。

今天影院复工,带你看2020电影海报大合集!

8月至12月上映电影

1. 我想静静

上映时间—8月07日

号称「国内首部动物喜剧电影」海报却疑似「宠物店」素材打底。

今天影院复工,带你看2020电影海报大合集!

以上动物皆不会出现在电影中怕不光是「首部宠物喜剧」更是「首部魔幻现实主义作品」

今天影院复工,带你看2020电影海报大合集!

2. 荞麦疯长

上映时间—8月25日

神似一年一度感动中国的构图展现着上世纪90年代,三个相互交织串联的青年人生。

今天影院复工,带你看2020电影海报大合集!

在人们热衷讨论00后、05后的当下导演将镜头对准70、80,在建的东方明珠,既是时代的挽歌也是对一代青年人美好未来的赞美。

今天影院复工,带你看2020电影海报大合集!

3. 我在时间尽头等你

上映时间—8月25日

偶然间获得的超能力让男主能够回到过去,挽救爱情却被命运捉弄,始终都不得圆满

今天影院复工,带你看2020电影海报大合集!

与《时空恋旅人》同样的科幻题材海报当中,也有十分相似的一场雨,希望如同《流浪地球》,国人能再次拍出不输经典的高水准。

今天影院复工,带你看2020电影海报大合集!

4. 小妇人

上映时间—8月待定

女性可以柔弱,也可以拥有高傲的头颅南北战争中的四姐妹,在清苦生活中活出了不一样的坚强人生。

今天影院复工,带你看2020电影海报大合集!

5. 急先锋

上映时间—8月待定

角落里熊熊燃烧的美国核动力航母身后高耸入云的迪拜塔,没有一处不在透露着这是部大制作。

今天影院复工,带你看2020电影海报大合集!

从沙漠到瀑布,剧情搭不搭且不说至少光是海报就搭了不少真金白银。

今天影院复工,带你看2020电影海报大合集!

邻里美好的一天

上映时间—8月待定

一心想揭露社会阴暗丑恶的新闻记者处处与人为善的老好人,矛盾的二者相遇,会是场何样的闹剧。

今天影院复工,带你看2020电影海报大合集!

上一秒促膝长谈,下一秒皮鞋横飞「邻里间的美好」或许本身就是伪命题。

今天影院复工,带你看2020电影海报大合集!

6. 许愿神龙

上映时间—8月待定

上海少年误打误撞唤醒沉睡神龙却发自己与龙有着上千年的代沟,西式画风,中式温情,一人一龙的冒险故事,值得一看。

今天影院复工,带你看2020电影海报大合集!

7. 无名狂

上映时间—9月25日

一部诞生于摩点众筹的众筹电影片名叫《无名狂》,海报却写满了赞助的网友的名字。

今天影院复工,带你看2020电影海报大合集!

围绕万历年间两大刺客门派所展开的一场场腥风血雨,平静海报之下,山呼海啸,风雨欲来。

今天影院复工,带你看2020电影海报大合集!

尚未定档的电影

除此之外,还有不少电影尚未排期,全年随时可能上映。其中自然也不缺乏优秀的海报创意,比如从路人视角,见证抗战历史的《八佰》。

今天影院复工,带你看2020电影海报大合集!

克味十足,容易联想到哈利波特系列的《刺杀小说家》

今天影院复工,带你看2020电影海报大合集!

单靠海报配色就能让人陷入迷惑的《抵达之谜》

今天影院复工,带你看2020电影海报大合集!

颇有08年阿迪达斯海报味道的《夺冠》

今天影院复工,带你看2020电影海报大合集!

今天影院复工,带你看2020电影海报大合集!

用风卷云涌展现中式诸神之战的《封神三部曲》

今天影院复工,带你看2020电影海报大合集!

居然还能拍出第二部的《爵迹2》

今天影院复工,带你看2020电影海报大合集!

正看是海浪,倒看是山峦的《一直游到海水变蓝》

今天影院复工,带你看2020电影海报大合集!

近看是悬崖,远看是枪口的《悬崖之上》

今天影院复工,带你看2020电影海报大合集!

六小龄童老师参与动捕制作今年下半年…可能会上映的《真假美猴王》

今天影院复工,带你看2020电影海报大合集!

希望别播完片头就播staff名单的《一秒钟》

今天影院复工,带你看2020电影海报大合集!

能把牛顿从棺材里吓活过来的《神秘访客》

今天影院复工,带你看2020电影海报大合集!

进退两男、男上加男、满身大汉的《唐人街探案3》

今天影院复工,带你看2020电影海报大合集!

生死一线间淡定到面带微笑的《紧急救援》

今天影院复工,带你看2020电影海报大合集!

以及万众期待的封神宇宙大片《姜子牙》

今天影院复工,带你看2020电影海报大合集!

好了,以上就是2020年将要上映以及可能上映的电影的海报大合集。看完了这些精彩的海报焦急的等待之情是否缓解了一些?

倒也正应了那句老话,只要熬过低谷,后面都是更好的一天。

文章来源:优设    作者:你丫才美工

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

为什么很多设计大神都喜欢用斜线排版?

雪涛

线是平面构成的三大要素之一,在各类设计中都有着广泛的应用,而其中的斜线更是设计师非常喜欢的元素,相比水平和垂直的线,斜线更特别、更具动感,下面我们来看看斜线有哪些主流且强大的用法。

区隔信息

区隔信息是斜线最常见的用法,通常用来区隔左右、左上和右下两部分的信息,用斜线区隔的内容不需要对齐排列,这样看起来更灵活一点。

在海报设计中就经常用斜线来区隔年月日等日期信息。

切割元素

很多简单的元素完整呈现出来时会显得很普通,这时依据斜线将其切割可以增加设计感,即切除元素的局部,只保留元素剩余的部分以及斜线,元素被切割后的不完整性会增加元素的独特性和神秘感,所以更容易让人眼前一亮。

PS:切割的时候要注意保留元素的美观性和识别性。

装饰

由于斜线具有一定的动感,通过重复排列后又具有节奏感,且线本身占面积比较小,不会对画面造成太大干扰,所以很适合用作装饰元素,斜线主要是从以下几方面来起到装饰作用的。

1. 增加动感

一些以文字为主且文字是水平或垂直排列的设计,可能会因为太过常规或缺少对比而缺乏动感,这时在文字周围增加一些平行的斜线,使其与主体形成方向对比,就可以大大提升该设计的动感。

2. 增加氛围

比如在一些促销设计中,如果画面中缺少装饰元素的点缀,那么促销的氛围也可能会有所欠缺,这种情况下,我们也可以通过增加斜线来改善,这里使用的斜线可以有粗细和颜色的变化。

PS:斜线的方向要统一。

3. 增加细节

比如很多画面的背景太单调,我们就可以把重复排列的斜线放进背景里做底纹,这样的背景感觉更丰富,而且用斜线做底纹不会对主体造成太大干扰。

PS:把斜线排成一个圆,具有不错的装饰效果。

平衡

在排版时可能会遇到这样的情况,比如我们想采用某种形式排版,但由于缺少内容或图片轮廓有限制,所以这么排会引起版面的失衡,这时可以用斜线来填充空白,以达到版面平衡的效果。

创造形式

由于设计的版面通常都是矩形的,以至于斜线天生就显得比较特别,所以在设计中合理的使用斜线可以增加其设计感。

例如下面这张海报作品,如果没有中间的斜线它也会是一件不错的版式作品,但是有点常规,所以设计师用一根斜线穿过整个画面,打破了这种常规,给这件作品带来一种不一样的感觉。

PS:贯穿画面的斜线不能影响文字的识别性,且不能从人物的脸部穿过。

总结

最后总结一下,斜线的主要功能有:区隔信息;分割元素;装饰;平衡;创造形式。光说不练假把式,大家在排版时记得多尝试一下斜线。


文章来源:优设    作者:葱爷

网页视觉设计师设计基本手册( 二 )

用心设计

规则会限制你,同时也会让你在设计上少走一些弯路。

这里的x并不是错误,我给的新意见也不一定是最好的解决方案。

也是根据个人在工作中的一些总结而来的技巧。

如有地方不对,还望多包涵总结。好啦不多说了,大家看正文。

网页视觉设计师设计基本手册( 二 )

排版|为长文进行排版设计有哪些讲究?

周周

先撇开用户兴趣和碎片时间的争论,我们来聊聊较长的内容在网页设计中应当注意的问题吧。对于网站和APP而言,长内容,或者说长文,可能是内容策略中最有价值的一个组成部分(前提是它并不是无聊内容的堆砌)。用户喜欢好故事,而长内容所提供的沉浸式的阅读感受则能够为用户提供引人入胜的体验。

为了能够让用户保持兴趣不停读下去,你必须提供令人愉悦的设计和交互,让内容从头到尾的体验都是一致的。想要达成这个目标,需要有针对性地进行设计。

上手可用!提升阅读体验的三个排版设计小技巧

周周

3-typography-tips-for-designer-1

如果你想让你的排版拥有更令人愉悦的阅读体验,其实只需要有针对性地对三个方面进行调整就可以了。这些技巧不仅可以运用于设计领域,哪怕你用在文本文档排版上都能收到奇效!

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档