• 上手可用!提升阅读体验的三个排版设计小技巧 - 优设网 - UISDC

    上手可用!提升阅读体验的三个排版设计小技巧

    2015/07/24 24421评论区

    3-typography-tips-for-designer-1

    如果你想让你的排版拥有更令人愉悦的阅读体验,其实只需要有针对性地对三个方面进行调整就可以了。这些技巧不仅可以运用于设计领域,哪怕你用在文本文档排版上都能收到奇效!

    当然,这些方法可能名字看起来稍显复杂,但是理解和使用非常方便。

    出于演示的目的,我选择了一个无样式的页面,它来自Anthony Burgess 的 A Clockwork Orange。

    重要提示:每一?#38047;?#25991;字体都是不同的,如果你感觉不对劲,最好重新选择一种字体来匹配,中文?#24425;?#19968;样的道理。最重要的是,你?#26790;?#35835;者创造舒适的阅读体验。

    技巧1——创造排版的层次感,让页面结构更加清晰

    排版的层次感通常指的是页面中文本排列构建出的视觉层次。

    脑补一下你看过的那些图书。书中,主标题(章节标题)看起来比副标题(子标题)更重要,而主标题和副标题明显?#26085;?#25991;部分更显眼。当你在制作Word 文档的时候,多数时候也遵循着相同的原理。

    页面中所有字体尺寸应该是基于正文字体来进行选择,因为正文是用户在每个页面中阅读最多的部分。如果基于正文来选取其他部分的字体大小呢?下面有一些基本的规则:

    ·1、正文字体:调整字体大小,知道感觉看起来非常舒服为止。对于这篇文章,我们将字体尺寸调整为22pt。

    ·2、标题字体?#21644;?#24120;将正文字体放大到180%~200%,在案例中,字体尺寸应为40pt~44pt。

    ·3、副标题字体:副标题字体通常为正文字体的130%~150%,也就是说,这篇文章的副标题尺寸应为29pt~33pt。

    按照这样的方式调整之后,效果如下:

    补充思考

    下面的这些层级并不是文章的必须部分,但是有必要考虑:

    ·1、三级标题?#21644;?#24120;是正文大小的100%~125%,案例中字体应为22pt~28pt

    ·2、注释和小字体文本:正文字体的70%~75%,案例中应为15pt~17pt

    技巧2——控制纵向间距,使排版更易读

    通过调整行间距?#25237;?#38388;距,让用户更容易扫读文字。段间距让用户能够更好地识别内容块和意?#28023;?#34892;间距控制好则可以让大脑更轻松识别文字内容——这也符合我们的阅读习惯。

    段间距

    设置段间距非常简单,但是它和连按两次回车再起一段是?#20132;?#20107;。一般而言,段间距应该和正文字体行高相等,但是如果你连续按两次回车,那么这个间隔的高度等于行高+行间隙x2。如果正文字体为16pt,么段间距最好是16pt或者1em。

    ·在设计应用和CSS的时候,将段落的margin-bottom属性设?#26790;?6px或者1em

    ·在Word或者Pages文档中,在“段落后”的值设?#26790;?#27491;文尺寸的?#23548;?#21487;

    行距

    行距应?#27599;?#21046;在正文尺寸的120%~160%(两行底部之间的距离),同时,文本字体越小,两行之间的行间距应该越大,确保字与行呼吸的空间。

    如果正文文本的尺寸是22pt,那么你的行高应?#27599;?#21046;在26pt~35pt之间。

    ·在CSS样式中,你可以使用em来控制尺寸,不过你需要稍?#25317;?#25972;,确保它看起来舒服

    ·在Word文档或者Pages文档中,行高是以倍数来表示的,120%的行高在这里应该设?#26790;?.2

    技巧3——调整每行文本,确保阅读体验

    调整每行文本的长度,让用户更好地阅读。太长的行难以阅读,太短的话单独每行倒是容易阅读,但是需要视线频繁地左右扫视。英文文本每行理想的?#22336;?#25968;是65~75,作为阅读的参考标准,应该以正文的行宽来作为参考,而不是标题和副标题的长?#21462;?/p>

    提示:70个?#22336;?#25918;在一行里,应该有多长?将英文大小写字字母和数字写在一行,就差不多有这么长,可?#38405;?#26469;做参考:

    AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789

    当你确定了65~75个?#22336;?#30340;长度之后,?#23454;?#22320;?#26723;?#34892;宽直到这个宽度范畴,然后进行二次调整,直?#37327;?#24230;令你感到舒适。?#26723;?#19968;提的是,在中文排版中,也可以采用类似的处理方法,通常在Word 文档中,使用5号字,一行32个字,能确保比较舒适的阅读体验。

    一般这个宽?#28982;?#30456;对更窄一点,使得每行更易于阅读。

    最终结果

    一旦你遵循上述的步骤来处理,你的文本内容的可读性会得到极大的改善,如同下图所示:

    排版设置完全是一个常规技能,遵循简单的原则能让文本的可读性更好。但是这个技能所包含的规则相对简单可行,但是并不能覆盖全部的排版需求,比如在移动端阅读,尤其是第三个技巧。但是他们依然非常有意义,因为它们展现了一些排版设计用户体验的基本规则,你可以稍?#25317;?#25972;,应用于更加广阔的领域。

    【青椒姑娘的设计课免费开班啦】

    第一期:《青椒姑娘的设计课!从零开始教你学版式设计(一)》
    第二期:《青椒姑娘的设计课!从零开始教你学版式设计(二)》
    第三期:《青椒姑娘的设计课!从零开始教你学版式设计(三)》
    第四期:《青椒姑娘的设计课!从零开始教你学版式设计(?#27169;?/a>
    第五期:
    《青椒姑娘的设计课!从零开始教你学版式设计(五)》
    第六期:《青椒姑娘的设计课!从零开始教你学版式设计(六)》

    原文地址:medium
    优设译者:@陈子木

    「子木说」

    当然,我个人认为,中文排版每行字的数目应?#26790;?2。因为《银河系漫游指南》这本奇书曾经深刻地揭示出宇宙的终极奥秘就是42。

    本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

    【优设网 原创文章 投稿邮箱:[email protected]

    ================关于优设网================
    “优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
    【特色推荐】
    设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
    设计微博:拥有粉丝量98万的人气微博@优秀网页设计 ,?#38431;?#20851;注获取网页设计资源、下载顶尖设计素材。
    设计导航:全球顶尖设计网?#23601;?#33616;,设计师必备导航:http://hao.uisdc.com
    ———————————————————–
    想在?#21482;?#19978;、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
    添加 优秀网页设计 微信号:【youshege】优设哥的全拼
    您也可以通过扫描下方二维码快速添加:

    sdcweixin

    优设大课堂

    非特殊?#24471;鰨?#26412;文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/3-typography-tips-for-designer

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    设计师 扁?#20132;?#35774;计 版式设计 交互设计师 界面设计 排版布局 职场 优设专访 优设大课堂 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷?#23601;?#33616; 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码
  • 北京赛pk10计划数据 30天100元9码滚雪球图 足彩六场半全场 新疆时时下载手机版 577彩票购彩大厅 腾讯5分彩是统一开奖么 体育票福建时时 重庆时时开奖号码老 秒速赛计划全天稳定版 广西快乐十分21选5 中国体育彩票排列5走势图 北京赛场开奖结果历史 重庆时时开彩结果360 22选5大星走势图带连线 360彩票全国开奖公示 中原风彩最新开奖结果