恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
好作品的正确打开方式01
0.0°
2016-10-31 原创文章 经验/观点 举报 2534 15 11 0

好作品的解构方式

好作品的正确打开方式,如何结构好的作品呢?

在我们的设计生涯中需要多看多想,当然要看很多的好作品来提高自己的审美,扩展自己的武器库。那么当我们看到好的设计作品时怎么办呢?大多数情况下我们都会选择看过之后就没有然后了。其实我更建议大家把好的作品保存下来,然后去思考这个作品为什么要这样做。

也就是知其然,知其所以然,知道他为什么好,好在哪里,这样的思考过程对自己的提高是很有帮助的。现在我以一组adidas的海报作品来进行解构,我们一起来看看这张海报为什么如此美观大方。


这个海报漂亮有两个方面原因,第一个原因是选择的底图好看,细节足。第二个原因则是版式排的好看。

我们重点结构他版式排版这一块。

首先从版式上来说,它里面的点元素相当于划分的网格

这样大家可以看明白,除了四周的天头地脚和左右页边距,这些小点将页面划分成了6*8的模块网格,如下图。

这样栅格化就是为了文字排版?

大猫Addict(1175071537) 11:26:53

对,网格系统服务于排版,但是字的精致程度和字号大小、行距字距也影响着版面的美观。

我们来继续分析,其中他的主标题,SEASON1,占据了两个模块网格的长度,下面的正文则占据了三个模块网格的长度和一个模块网格的高度,如下图。

那么为什么一个占据两个模块,一个占据三个模块呢?

因为要有长度对比跟疏密对比,可以看到主标题是采用了宽松型字距的。

其实这个按你那样说不科学,为什么画了网格英文几行就卡着网格,右上和右下就不卡着。

大猫Addict(1175071537) 11:32:36

我这个网格没画标准只是从宏观上分析别人的作品而已,@小萝卜头 回答你这个问题,因为这个版面是按小点的中心对齐的,如下图。

上下两行都是在旁边点元素的中心线上。明白了嘛?

另外网格不是一个死东西,是可以无限划分的。

比如我现在是6*8的网格,我们还可以每个网格之间平分,变成12*16的网格。

但最终决定排版美不美观的因素是什么?答案是审美,只有你的审美好你才能做出漂亮的设计,网格系统什么不过是辅助的工具而已。

比如一个画家,就算给他一根树枝,他也可以在地上画出惊艳的画作,但对于一个不会画画的人,就算给她全世界最豪华的画材,他也画不出好的作品。

继续,我们详细讲一讲这个版面中的网格。其实这个版面,一开始是可以从双栏网格开始划分的,如下图

一开始从双栏划分,比如小文字就占据了一栏,留白占据了一栏,而后每个栏又划分成三份,能明白嘛?

右上角的LOGO也是占据了一个模块网格的大小。

那我们来看上图这个LOGO为什么没按照模块网格的长度来呢?这就是我说的网格是可以无限划分的应用了。

再具体分析的话,就像图上一样,它其实是又把左侧的网格对半分了一下,所以这个adidas的LOGO占据了一个半模块网格的长度。网格不是很死工具,一切都在于灵活运用与审美上。那些说网格排出来的东西很死板的人根本就没有深入的了解网格系统。

==============

从宏观上我们分析完了,再来看看,为什么好看,其实排的好不好看一个重要的原因是取决于字体的精致程度。

从图上可以看出他用的字体是非常精致的。

字体名称叫AdiHaus,是adidas的御用字体,所以用好字体也是关键。

但是这款字体网上并没有资源可以下载,所以我用了一款比较相似的字体来做分析,

我用的字体名叫Avenir,也是著名的有几何化特征的无衬线体之一。

上面是adidas的官方字,下面是我用的Avenir字体,如果对字体的敏感程度不够,一定会认为这是一款字体。

两款字体主要是细节上的不同,首先从字宽来说,我选的字体就没有原来字体宽。另外笔画细节的处理上也有所不同,比如下图中对1的处理。

=======

我们再来看看内文排版。

右边是我模拟的。从图上可以看出它文字层级关系分的十分明确。

如果要计算字号的话,

我们可以看出,它主标题用的是40号字,内文用的是16号字,40÷16=2.5,所以它字号之间是2.5倍的关系。

再来看一下标题与内文的字重对比,标题采用的是Bold粗体,内文采用的是比Bold细一个等级的Demi体。

所以我们可以看出这么一个美观的海报,里面包含了这么多东西,也正是这些,让版面变得规整有序,美观大方。

例子举完了,这就是我看到好的作品时的分析解构方法,大家学会了嘛?

================

本文章版权归 [ 视觉状态设计研究所 ] 所有,

欢迎加入我们的QQ群一起学习:582641540

微信公众号:cat_idea




更新:2016-10-31

收藏

15人已收藏

大猫404

商务合作,课程咨询加V:damao404

  • 36

    作品

  • 588

    粉丝

  • 26

    关注

  • 巧用字库字做标准字形
  • MY WORKS 2015-2016
  • 2016一些字
  • 字体大咖秀

    猜你喜欢

      2016-10-31 原创文章 经验/观点 举报 2534 15 11 0

      好作品的正确打开方式01

      0.0°

      你确定要举报好作品的正确打开方式01

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月31日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      15
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录