世俱杯 2025

垂直栅格与渐进式行距(2)

转帖|其它|编辑：郝浩|2009-04-01 17:46:57.000|阅读 451 次

概述：我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅格系统能够将大块区域分割成小区域,清楚地展示页面的布局,并能够引导视觉线在各个板块之间扫描、阅读. 从信息上来说,栅格系统让信息的呈现方式更加直观,从而有效提高易读性.

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

不同字体大小的正文

如果有一天，老板告诉你，正文的字体太小啦，他看得眼花。你因此不得不将左边的正文设置成14px大小的字体，右边的边注保持12px。由于正文字体变大，我们也同时加大行距。根据我们前面学到的知识，我重新设计了间距：

  • 正文：字体大小14px，行距24px，段后距24px
  • h1：字体大小24px，行距24px，段前距24px，段后距24px
  • h2：字体大小：18px，行距24px，段前距12px，段后距12px
  • 边注正文：字体大小12px，行距24px，段后距24px
  • 边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px

效果见:

完工

OK，最后，我们来做个使用前使用后的对比，来张合照吧：

使用前：

使用后：

附录 基本垂直韵律对行距、间距的要求的推导

根据之前的经验,不难得出：

设行距为 dl px ,设垂直方向上的间距和为 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假设基础行距为k px,则
n*k = dl + ∑ds (n为自然数) 即行距和间距之和应当是18的倍数 ②
由方程①、② 得出：
行距和全部垂直间距之和为18的倍数。


标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@dpuzeg.cn

文章转载自：蓝色理想

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP