RELATEED CONSULTING
相关咨询
选择下列 产品马上在线沟通
服务时间:9:00-18:00
你可能遇 到了下面的问题
关闭右侧工具栏
小技巧新趋势!简单有效 的空间共享式网页排版
  • 作者:本站
  • 发表时间:2017-06-15 23:07
  • 来源:易网络

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

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

  空间共享式文字排版

6361833955039481382333704

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

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

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

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

  图片和文本的混排

6361833955047281399076275

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

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

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

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

  大胆的字体选取

6361833955048841403305520

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

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

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

  色块和文本的搭配

6361833955051961405062182

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

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

  添加动效作为提示

6361833955061321421332170

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

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

友情链接:    双龙彩票开户   37彩票  37彩票  五分彩票平台   正版彩票网注册