东莞网站建设,东莞小程序开发

电话 : 0769-3331 9353 手机/微信 : 137 1719 8162 <<<全国分公司
  • 网站建设
  • SEO推广
  • 客户案例
  • 联系我们
  • 扫描添加微信

    30秒获取报价:

    提交您的电话,免费赠送一年维护及关键词排名

  • 联系人*
  • 手机号*
  • 小技巧新趋势!简单有效的空间共享式网页排版

    您现在的位置:首页 > 新闻中心 > 行业新闻
    作者: 发布于:2018-8-10 17:45:39 点击量:

    越来越多的网页内容开始采取别具一格的排版设计,其中最典型的一种,就是让文字布局横跨不同的元素所处的区域,让排版和其他的模块共享空间。这种设计理念并不复杂,而这种趋势也在网页设计领域越来越热。

      这种设计手法非常容易识别,文字排版部分通常会从页面的一个区域,延伸到另外一个模块所在的区域,比如某个图片上的文字内容延伸到另外一个图片或者彩色区块当中,共享了其他组件的空间。这种设计所牵涉到的页面图层的实现方式会很有意思,因为它可以承载很多富有创造力的设计。所以,接下来我们一起来看看一些典型的设计手法:

      空间共享式文字排版

    6361833955039481382333704

      这种空间共享式排版是一种相当容易识别的设计手法。实际上,在一些海报和明信片设计中,也可以采用这样的设计。它的最典型的特征是,文字或者相似的元素横跨多个图层、模块或者区块。

      从广泛意义上来讲,这个设计手法的核心概念是某个元素和其他的元素共享空间,横跨不同区域,元素相互叠加。这种设计常常被视作为分屏设计的一种延伸。

      许多跨区域的排版设计都非常明显,但是也有比较微妙的,比如上面的网页 Hometown Trolley 。右侧文本部分伸出一条线,将用户视觉引导到左侧的图像当中,如果你仔细观察,还会发现左边汽车的后视镜从背景中突出并延伸到右侧的文本区块当中来。

      如果设计得合理的话,这种设计手法能够借助元素区域的叠加,有效的帮助用户更好地了解内容和信息。共享的区域成为了不同区块和不同信息的连接。这种设计的另外一个好处在于,文本内容可以更好的被承载,共享的模式就像是两个相互连接的巨型卡片模块。

      图片和文本的混排

    6361833955047281399076275

      漂亮的排版和精美的图片总能相辅相成。许多设计师都喜欢在使用共享空间式排版的时候,采用垂直定向的图片(不过由于各种屏幕的高宽比不同,这种技术使用的比例并不高。)。

      空间共享式的排版设计能够将各种元素的属性淋漓尽致地呈现出来,还能确保整体设计在视觉上的愉悦感。文本字母可以横跨图片和留白,也可以在各个区域单独地使用,合起来看和分开看都含有意义,广州建网站,就像视觉化的“双关”。

      而上面的 Square Apartments 就是这样的设计,标题无论是合起来看,还是分开看,都具有意义。

      这样的设计有一个好处,由于文本需要跨越不同的区域,配色不用保持完全的统一,根据文字周围的背景色进行调整,这样的设计简单而容易上手。难的地方在于文本内容的分拆和合并的状态下,表达的含义是否都合适。

      大胆的字体选取

    6361833955048841403305520

      有趣而又独树一帜的字体,在跨越不同模块的空间共享式布局下,能带来独特的视觉体验。这样的字体通常本身就可以很好地发挥强调的作用,即使横跨多个不同的区域,也不会降低其作为焦点的地位。

      如果你想沿着这个思路来设计,最好的做法是让标题尽量长一点,选取足够亮眼的字体,和字体色彩有足够对比度的图片和文本背景色,确保文本的良好可读性。

      可读性是这种设计手法中最重要的点,通常情况下,文本部分会选择黑色或者白色的字体,虽然许多用户看起来可能会觉得简单,但是要平衡图片、背景和文本三个部分的配色体系,实际上还是挺麻烦的。

      色块和文本的搭配

    6361833955051961405062182

      图片和文本的搭配是许多设计师的首选搭配方案,但是如果没有图片也同样可以实现空间共享式的排版设计,使用色块、几何图形和文本,是一样的道理。

      上方 Startup Lab 的网站就将色块和文本以极其时尚的方式搭配起来,文字横跨白色的背景和不同的色块,合理的色彩对比让整个视觉显得微妙又舒服。

      添加动效作为提示

    6361833955061321421332170

      使用空间共享式的排版,并不以为着你不能使用其他的设计手法,比如动效就可以与之很好的结合起来。使用动效、视差等特效能够便于用户理解你的设计,鼓励用户与页面交互。

      在页面元素较多的时候,微妙的动效能够更好的创建视觉焦点。


    上一篇: 网站建设如何收费以及收费方式是怎样的?
    下一篇: 网站建设的文字排版设计 小细节大问题

    提交您的电话,免费赠送一年维护及关键词排名

  • 联系人*
  • 手机号*
    1. 首页
    2. 网站建设
    3. 网站推广
    4. 软件开发
    5. 案例展示
    6. 关于我们
    7. 联系我们

      扫码添加微信咨询

    Copyright 2008-2018信科网络科技有限公司东莞分公司 Shenzhen Sinco Network Co., Ltd 严禁抄袭模仿本站 违者依法追究责任!粤ICP备14083186号-3

  • 东莞
    电话 : 0769-3331 9353
    手机 : 137 1719 8162
    地址 : 东莞市南城区鸿福路83号曼哈顿广场2409
  • 广州
    电话 : 020-8092 8113
    手机 : 135 3988 3715
    地址 : 广州市海珠区宝岗大道268号中新大厦1912
  • 深圳
    电话 : 0755-2101 0201
    手机 : 132 6709 9297
    地址 : 深圳市龙华新区东环一路旭日大厦ll08室
  • 武汉
    电话 : 027-8355 8661
    手机 : 182 4491 9118
    地址 : 武汉市东西湖区金银湖路18号财富大厦30E
  • 上海
    电话 : 021-3113 7661
    手机 : 132 6719 9217
    地址 : 上海市闸北区江场西路299弄中铁广场堡尼大厦2131
  • 拨打电话
  • 添加微信
  • QQ咨询