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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
版式设计之图版率
0.0°
2015-01-01 原创文章 经验/观点 原作者: 原作者 举报 39012 234 78 4

在页面设计中,除了文字之外,通常都会加入图片或是插图等视觉直观性的内容。表示这些视觉要素所占面积与整体页面的之间比率的就是图版率。

简单说来,图版率就是页面中图片面积的所占比。这种文字和图片所占的比率,对于页面的整体效果和其内容的易读性会产生巨大的影响。

图版率高低的区别:同样的设计风格下,图版率高的页面会给人以热闹而活跃的感觉,反之图版率低的页面则会传达出沉稳、安静的效果。提高图版率可以活跃版面,优化版面的视觉度。但完全没有文字的版面也会显得空洞,反而会削弱版面的视觉度。

3113

如果页面的整体全部都是图片的时候,图版率就是100%。反之如果页面全是文字,图版率就是0%。

未标题-2

有时在没有图像素材的情况下,但因为页面性质的需要,页面又需要呈现出图版率高的效果。那么,该如何进行设计呢?

 一. 通过对页面底色的调整,取得与提高图版率相似的效果,从而改变页面所呈现出来的视觉效果。

02

未标题-2 拷贝

二.如果素材图像尺寸小,却不想让图版率变低。可以通过色块(相近色或是互补色)的延伸或是图像的重复来组织页面结构,避免这种素材资源不足的情况。采用和图片相同大小的色块可以保持界面的统一性与简洁性,而且这样的排版会造成一种错觉,使用户觉得有底色的方框整体视乎是一张图片。而原本小尺寸的素材图在背景色的映衬下也似乎变成了一张很大的图。这种重复排列、添加变化的方法有效地避免了页面的单调和无趣。

db3c6993e43ab183bd64263692cae596a4df971550668-OoAQWp

dc28f5cf1e62d3ad99957a4693b0d99e86a9ac8112ce4b-P2r1Nj_fw658

未标题-332

三.版式的强节奏设计也能间接优化页面的图版率。合理的利用排版的节奏感以及跳跃率(文字和图片的跳跃率,是指版面中最大标题和最大的图与最小正文字体和图片大小之间的比率)。在版面设计中,图片或是文字的跳跃率可以获得较高的注意力,让无趣的版面充满活力。另外,排版层次丰富,也可以区分文章主次信息,让浏览更加轻松,并且提高版面的视觉度。

f7166a7b09626fec48616dd487d90b7e14e5e10b15a090-8zfgPs

78be762cff9395b04181c550f5d39d4309f28110c62e8-z06lvV_fw658

44742c78a85a599ebdf3d487ad218320cc7ed68a388c7d-XuK2Ii

四.增加页面中的图形也可以改善图版率低的问题。无论是数字、序号、角标、图标,甚至是视觉处理后的标题文字,都能提高页面的视觉度,并给用户留下活跃生动的印象。同时,图形作为一种更直观的传达信息的方式,也使人一眼就能快速获取信息,从效率上优于用 文字表达时的逐行扫描。

图标

图标的设计让浏览和交互操作更加方便。图与文的搭配可以降低阅读的疲劳感,也增强了排版的设计节奏感。

1401070485_35

91

 

 

32fd383bb186625251ed8a177b6a554b2fa94bffa7b02-OalgdJ_fw658

数字

对数字的视觉处理也能起到类似插图的装饰效果,成为页面上的视觉要素,同时增强页面的设计感。

222223333333

167804b4a6c5c8d79bd9601afd83399ad1266157300d91-BWzFDg_fw658

序号

页面中的序号既有引导阅读顺序的功能,也可以作为图片起到页面的装饰作用。另外,通过对序号的突出设计,可以让布局更清晰灵活。即便是毫无规律的排版,也可以通过清晰的序号找准阅读的轨迹。

1401070675_9

2152d443a11f66cb9e55fb26190fa0d7c221eded203668-0l0AJn_fw658

标题文字的处理

如果页面中没有图片和插图,那么通过对文字及其颜色的处理,也可以使之起到与视觉要素相近的作用。下面的例子中,对于标题文字都进行了视觉加工,起到了整体页面的装饰效果。借助对这种文字大小、颜色、形状的灵活运用,来突出页面的重点,避免视觉上的单调感。 1401070747_79

未标题-3

文章参考:《版面设计的原理》 《版式设计原理》

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX (http://isux.tencent.com/format-design.html)

更新:2015-01-01

收藏

234人已收藏

腾讯ISUX

It iS Ultramodern eXperience

  • 219

    作品

  • 1.9w

    粉丝

  • 4

    关注

  • 那些欲罢不能的实用工具
  • QQ亲密关系 | 从工具到情感再到认同
  • 与同为毕业生的你,说说我的故事
  • QQ红包 | 趣味新玩法是怎么设计的
相关标签
经验

    猜你喜欢

      2015-01-01 原创文章 经验/观点 原作者: 原作者 举报 39012 234 78 4

      版式设计之图版率

      0.0°

      你确定要举报版式设计之图版率

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年01月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      78
      234
      4

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

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

      登录

      手机号

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

      登录
      第三方账号登录