在网页设计中如何排版,教你一些有效的方法,足够让你的排版变好看

可以说,排版是UI设计中最难的部分。在这篇文章中,我会教你一些实用的技巧,你可以在你的项目中使用。

一、考虑用户

我们应该记住,除了美学,我们还有用户。

你需要使用的字体要灵活。你的字体应该提供粗细不同的宽度。注意这些方面是很重要的,好的排版对读者来说是“透明”的,但坏的就会让人从显示器上“尖叫”出来。

了解什么字体是让人最易读的,整体看起来最简洁大方的,我们就应该选择什么样的字体来排版。

二.易读性

易读性是衡量在一个特定字体中区分一个字母和另一个字母的方式。它是微型字体,专注于字体、字母和细节。自然,这是最重要的因素之一。并非所有字体都是以可辨认性作为主要设计功能而创建的。最常见的问题是没有区分大写字母L和小写字母l。你需要避免这种字体,因为人们在小的显示器上阅读时会遇到问题。

1.高度

我们读的95%的字母都是小写字母。大写字母和小写字母之间的字母比例越大,字体越容易辨认。

2.计数器

字母也需要有空间。例如,看“O”“U”“D”。这些空间被计数器和排版专业人士认为,在计数器中能帮助我们更容易识别字母。

3.宽度

较细的字体通常比较宽的字体更容易辨认。

4.宽比例

字母的宽度与其高度的关系称为比例。 最佳笔划宽度约为高度的18%。

5.字母间距

没有计算字母间距的最终方法,但大多数时候,你所需要的字母间距越大,文本大小越大。字体将显得过于开放,需要手动调整间距。对于UI设计,它通常适用于页眉。

三.可读性

可读性是关于整体阅读的体验。我们如何容易地扫描文本布局,区分标题,副标题,段落和块。它的宏观排版,是使文本更具视觉吸引力,以使其更令人鼓舞的阅读。这是一种关于对比、色彩、大小、构图和小细节的艺术,可以给读者带来更好的阅读体验。 1.有衬线字体与无衬线字体 历史告诉我们,衬线更容易辨认。他们在印刷中使用了很长一段时间,他们真的提高阅读经验的大块文本。衬线允许眼睛在文本上更容易地流动。 但是这有几个没有衬线的设计是可读的,当前的视觉设计状态更喜欢简单的字母表单。在网络上,特别是在手机上,我们看到的是更多的没有衬线的设计,这样的设计使人看起来更简洁。

当然这也取决于你的项目和用户。例如,在媒体上,因为大部分时间你会读很长的文本。有衬线这是一个很好的设计方法。

2.黄金比例高度

可以使用黄金比例的高度。 把你的文字大小乘以1.618,你就能得到完美的线条高度。 小的计算,可以用--JSBI.COM/TodiDu/1/* 如果你很有经验,那么你可以手动调整这个结果。当然,这个规则也有例外,如果必要的话,你总是可以打破它。

(左图为黄金比例的高度)

3.文本的间距

太宽的文本间距会导致我们的眼睛很难找到下一行文本。如果间距太窄,眼睛就会容易从这行误看成下行,经常打破阅读的节奏。 为了激励读者,让他们参与,你的文本行应该在50到75个字符之间。

4.颜色

给大家分享一个颜色的窍门,使用颜色时尽量不要使用纯灰色或者纯黑色的,当然这也要取决于你的项目的需求。也可以在这选择你喜欢的颜色:

它将比使用普通的#CCC更具吸引力和独特性。让你的视觉效果更好。

5.留白

这是一个重要的话题,有许多书籍和杂志,要涉及到排版时,都需要记住这一点: 留白的基本作用是减少文本访问者一次看到的数量。 这使得我们的布局更具可扫描性,它不会使我们的内容超载。留空间引导我们的眼睛通过布局,创造秩序,优雅的感觉。

6.层次分明

层次结构定义了读者如何读取内容。它告诉我们如何区分标题和副标题和正文。我们可以通过使用不同的对比度、文本大小、间距等来实现这一点。这是一个重要的技巧,需要掌握,以达到良好的可读性。

结论

学习排版是一个重要的旅程,技能不是来自于阅读中的文章,而是来自学习和实践。所以需要你去多多的练习,去创造一些很棒的东西!

“艺术的伟大不在于发现什么是共同的,而在于什么是独特的。”(Isaac Basvenis)辛格(1904—1991)

如果你想学习更多关于网页前端设计的技巧,网页排版的知识可以去学习一下,如果你没有ps基础可以去学习一下你将会有更多的收获~想要这些网页前端设计资料可以在评论区留言扣1或私信给我哦!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容