课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 7个方块堆叠式排版布局的设计技巧
  • 7个方块堆叠式排版布局的设计技巧

    发布:南昌UI培训      来源:优设网      时间:2016-04-29


  •     当下那些优秀设计的网站,几乎都采用了堆叠式排版,尤其是方块堆叠式排版,这一悄然流行的设计趋势值得我们关注。

        方块堆叠式排版有着令人无法拒绝的美感,它以一种整齐的方式将文字内容排列到一起,营造出一种整饬的设计感,抓住用户的注意力。南昌达内ui设计培训专家探讨这一设计趋势,并总结出一些技巧。

    1、在图片和视频中使用

        方块堆叠式排版最常使用的场合就是图片和视频。在网站和APP当中,你会发现图片和视频中常常能看到这样的排版,当然,在平面设计中这种排版也并不鲜见。 

        为了充分发挥这种排版的优势,你需要特别注意文本的排布位置。文本应当是作为辅助,不能够盖住图片或者视频的关键部位,并且传递明确的信息。

        文本所用的色彩也是重中之重。前景的文本和背景的图片/视频应该有足够的对比度,清晰可辨。这也是为什么许多设计师会让前景的文字使用黑色或者白色,它们更容易在不同的背景中确保可读性。

    2、作为主导的艺术元素

        当然,方块堆叠式排版并不是一直处于整体视觉的辅助地位,有时候它还会成为视觉设计的主体。

        将方块堆叠式排版用作主要的视觉元素的时候,需要满足两个条件:大量的留白,字体中包含其他的视觉元素。其中所包含的可能是色彩,或者是图案、动画。但是不论是哪种,都会尽量让字体从周围的留白中脱颖而出。

        不要过度设计,方块堆叠式布局主要是两种使用方式:黑白字体+彩色背景,或者彩色字体+黑白背景。根据这项规则来进行设计能让你少走弯路,更容易实现效果。

    3、强调特定的词汇

        许多项目运用了类似堆叠式的文本布局,但是在可读性上做的并不太好。在正确的用法当中,最关键的词应该是用最粗的字体最大的字号来显示的。

        当然,说起来简单,做起来也并不是那么容易。你需要仔细推敲文本的字句和前言后语,句子的长短和文字的搭配要均衡,并且能同布局联动起来,最终效果看起来应该是恰到好处。所以,当你做好布局之后应当仔细审视一下,最重要的信息是否以最醒目的方式呈现出来?所有的信息可读性是否良好?形式和内容之间是否有割裂感?

        如果有问题,那么你需要再仔细推敲一下。并不是所有的文案和文本都能这么设计,有些换个方式来展现或许更合适。所以,如果这种排版布局不适合你的内容,也不要感到讶异。

    4、为社交媒体服务

        我们对于方块堆叠式布局如此之熟悉,很大程度上也是得益于各大社交媒体的传播,因为它能够很好地同微博、Twitter、Instagram 甚至手机的卡片式界面很好地结合到一起,无缝地融为一体。

        你会发现图片上配合堆叠式的文本是传播性极强的一种媒介形式。仔细看看你的社交媒体帐号,你会发现这种形式比起视频更加直给,比起长微博和文章更直观,无需复杂的操作。

        它让用户以一种更视觉化的形式来获取信息,重点更加突出,让用户以足够漂亮也足够快速的方式获得信息。

    5、强化设计感

        绝大多数的设计现在看起来都相差不大,所以,为了突出设计感,你可以加入一些简单、有趣的设计元素,来强化方块堆叠式布局的用户浏览体验。

        (1)在行间增加细线,让用户可以更加清晰地看清楚布局和内容

        (2)在空隙间增加简单的形状或者图标来填充,让整体看起来更加饱满和一致

        (3)适当地调整整体的形状,你个并不一定非得让整个布局保持完美的方形(钻石型的外观也没问题)

        (4)可以通过适当地调整色调来强化整个布局的视觉效果

        (5)用出人意料的、有趣的非衬线体来搭配。有趣的字体能让用户更加难忘!

    6、选择方块堆叠式排版的5个理由

        方块堆叠式排版的流行,很大程度上是因为它的简单和视觉化。而真正支撑方块堆叠式排版成为流行趋势的,大概就是下面的5个理由了: 

        (1)视觉上的吸引力。堆叠式的布局通常会被特定的空间紧密包围着,它会成为视觉的重心,自然而然地吸引用户注意。 

        (2)文字周围大量的留白会增强内容的可读性。

        (3)字体的强调和设计上的调整让简单的文字显得更富于戏剧性和表现力。

        (4)堆叠式的布局让文字给人一种形似LOGO的感受,更加醒目。

        (5)堆叠式布局让你内容更加易读也更有趣

    7、搞定方块堆叠式排版的5个设计技巧

        如果你已经深入思考,并且认可了这种设计趋势,那么你可以送下面的5个技巧着手:

        (1)使用栅格。栅格系统能帮你更好地控制布局,从字体大小到行间距都更加整齐。

        (2)控制比例。正确的大小对比才能起到强调的作用。

        (3)做好断句,斟酌词句。强调的部分要精悍而准确,断句换行也要正确地传递信息。

        (4)两个部分的字体和字重要控制好比例和风格。

        (5)不要纠结于排版的高度对称和对齐。

    结语

        达内ui设计培训专家认为,简单易用的趋势拥有持久的生命力。方块堆叠式排版最费神的部分还是文案的选取,适当地装饰之后,借助社交媒体能取得极强的传播性。







    原文地址:designshack
    原文作者:CARRIE COUSINS
    优设译文:@陈子木
    推荐文章

上一篇:达内:如何量化UI/UX设计师绩效标准

下一篇:12个实操性强的html5设计技巧

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56