1. <form id='VJjI73'></form>
        <bdo id='VJjI73'><sup id='VJjI73'><div id='VJjI73'><bdo id='VJjI73'></bdo></div></sup></bdo>

          • 首页 > 网页教程 > 设计分享 > 版式设计:什么是“三率一界”?

            版式设计:什么是“三率一界”?

            时间:2018-06-19    来源:人人都是产品经理

            很久没有动笔更新文章了,之前写过一篇《设计干货:点、线、面在版式设计中的作用》,那么书接前文,今天黑马PM想和大家聊一聊版式设计中的三率一界的概念。相信绝大多数的朋友都没有听说过这个概念。三率指的是版面率,图版率和跳跃率;而一界指的是视觉界限,简称视界。

            版面是什么?

            版面是指印刷好的页张,包括图文、余白整个部分。这个概念看下图图就很好理解了。

            上图是一张书籍杂志的对页文件demo,我们说中间这片灰色的区域就是版面。也就是说我们主要的设计内容将要在版面中进行排版设计。我们通常在排版软件建立设计文件的时候先要规划好版面的大小并画出辅助线,因为版面可以约束设计的内容大小区域。

            版式设计中有天头,地脚,订口和切口的概念:

            • 天头,是指我们经常说的页眉位置。

            • 地脚,是指我们经常说的页脚位置。

            • 订口,是指靠近书脊侧将要装订的一侧。

            • 切口,是指将来要被裁切的一侧。也就是最外侧一周。

            这里需要特别注意的一个地方就是通常情况下,天头的部分要小于地脚的高度。

            为什么呢?

            因为地脚部分通常要设置页码,所以页码要占用一部分空间;而订口和切口呢通常可以设置成一样宽度。

            也有的书籍上认为整个设计文件是一个版面,中间灰色的区域叫版心,当然也可以这么理解。其实无论是叫版面也好还是版心也好,其目的都是要规划出设计信息的主视觉区域。不光是印刷设计,网页设计也有版面的概念。

            一、版面率

            版面大小在开本中所占的比率叫版面率。版面率越小,页面留白越大,给人的感觉是更高级雅致;版面率越大,页面留白就相对越小,版面给人呈现出的感觉是内容很丰富热闹信息量大。看下图:

            通常情况下,资讯类的杂志或者网站版面率都很大。因为这种类型的产品本身要传递的信息量就很大,所以小版面是容纳不下的。比如超市的商品宣传单等等(见上图)。

            而一些要求高品质的产品,比如说文摘类,一些非常感性的产品(见上图)。就需要小版面,让内容更清新简约,页面大面积留白;让主要信息内聚之后看起来很精致高雅。

            所以说我们设计师在接到设计需求的时候通常先要给设计风格定一个基调。是更偏向实用性还是精神性,如果是实用性的设计那版面就可以大一些,而精神性要求品质的就可以将版面设置的小一些。这就开始考验一个设计师对设计风格的把控能力了。

            相关推荐
            如何让网站首页设计得极具吸引力?
            移动终端全新界面设计语言“Metro”简析
            淘宝品牌名店的BANNER广告设计评价及分析(2)
            优秀排版设计的8条建议
            版式设计:深入浅出学会网格系统的应用
            如何学会版式设计中的主要元素提取?
            文字排版设计:如何设计出吸引视线的标题?
            如何用超大字体元素应用在设计作品集类的网站?
            分享:设计法则之恐惧留白 Horror Vacui
            什么是“整体网页设计”?整体网页设计工作原理
            版式设计:不一样的网页布局之“方块布局”
            分享:99%的人在做网站设计时都用错了留白!
            留白设计:设计中的留白要如何做?
            8种网页和APP背景设计趋势分享
            设计分享:点线面在版式设计中的作用是什么呢?
            28个著名博客新旧版面设计对比赏析
            对症下药!如何设计受欢迎的应用引导页?
            中文网页设计排版之破格的好例子
            对齐是排版的基础技能 也是设计师的基本功
            设计基础功!彻底掌握设计中的对比原则
            设计教程:写给网页设计新手的10条实用法则
            四大设计趋势教你如何你玩转2015年网页设计
            网站策划:帮你掌握图文排版的5个小技巧
            腾讯设计实战!响应式Web布局的概念和实践方法
            7个技巧帮你设计出用户体验极佳的网页表单
            UI布局设计:文章列表与内容详情页设计案例赏析
            Web页面中的表格设计如何才能做得更好?
            高用户体验的表单设计该怎么做?
            网页首屏设计:让用户一见钟情的设计模式是什么?
            UI设计教程:从零开始做APP之界面设计篇
            跨屏幕的响应式设计如何做好用户体验?
            移动端详情页设计:排版 构图 色彩 氛围点缀 字体怎么做?
            电商设计教程:电商APP首页设计总结

            精彩推荐

            热门教程