2024年网页设计解构阅读心得 篇1
网站建设设计也是有一些法则的，只要设计团队遵循以下这些法则，就是合格的设计了：
1.简约
一些新手在建设网站时总喜欢把所有信息一股脑儿全放网站首页上，导致网站杂乱不堪。这是很错误的做法，建设网站时，一定要避免内容的堆砌，而要把它们尽量简洁、清晰、有条理地展示出来。
网站建设设计制作应该避免太多花哨的设计，不然会让访客无所适从。简约清晰的网页会方便用户找到需要的内容，所以你只需要重点做好品牌简介、产品列表、导航即可，然后再根据企业特色对自定义设计。同时，网页干净简约，布局清晰，也有利于搜索引擎收录，增加自己的曝光度。总而言之，网站的整体设计风格应该遵循“简约而不简单”的原则。
2.统一性
统一性是指一个网站的整体颜色风格最好保持一致，具有统一的性质。一个视觉对象的各个组成部分，如色彩、形状、大小等属性保持统一性，那么这些部分之间的关系看上去比另外一些部分之间的关系更加紧密，这样就能给访客展现一个有特色的视觉整体，加深客户对品牌的印象。
3.良好的层次
一个高质量的网站，各个功能、内容版块之间应该是有逻辑的，任何要素都不能随意放置或潦草堆放在一起。正确的做法是，通过网格布局统筹重要元素，让整个网站版面有系统的编排层次，网页从上到下、从左到右有着顺理成章的联系，符合访客的阅读逻辑，以形成清晰的视觉流程。比如下图用“上线了”建站系统做出的服装网站，就很有层次感，让网站看起来简约而美观。
4.目的性
你是为了什么目标而建立这个网站的？主要面向哪些人群？想要取得什么样的效果？这些在建站前一定要想清楚。比如要建一个美妆网站，那么设计就要小清新软萌一些；要建一个科技网站，设计就要严肃专业一些。网站设计的最终目的是为你的目的和目标人群服务，所以你的整体设计风格要和建站目的一致，不然就会看起来不伦不类。
2024年网页设计解构阅读心得 篇2
优秀网页设计的 5条原则：
1. 建站目的是基础
网站的消息传递和号召性用语 (CTA) 是支持其目标的关键。建站的目的可以很简单，如促进购买、讲述公司故事或提供教程。您应该能够用一两句话捕捉您网站的意图——想想使命宣言。
站点设计不是您应该在进行过程中弥补的东西。目的将为您提供清晰的计划并指导设计和内容创建。即兴发挥并不是实用的设计理念。
巩固网站目的的一部分是了解它是为谁服务的——您的受众是谁，他们需要什么信息，以及您的网站将如何提供这些信息？了解您的受众的人口统计数据和痛点将帮助您为您的网站找到正确的方向
2.视觉效果让人们参与其中
每个设计元素都应该反映和传达品牌的身份。照片、插图和其他图形平衡了文本并分解了网页，让眼睛从阅读中得到休息。
令人兴奋的英雄形象给人留下良好的第一印象。动画过渡和滚动触发的效果让人们移动，并将导航从无意识的必需品转变为交互式体验。无论品牌的风格如何，视觉效果都应该为设计增添活力，而不仅仅是占用空间。软件公司、快餐车和会计师都可以在保持品牌形象的同时，利用网站的图形发挥创意。
您的视觉效果应该是高质量的并且看起来不错——使用尺寸和分辨率合适的清晰、色彩平衡的照片和图形。糟糕的视觉效果会毁掉一个伟大的设计。
PithyMfweb使用可动的云朵吸引你的注意力
3.和谐
布局的每个重要元素都应该协同工作——一直到它的 HTML 和 CSS。如果对比色的超大按钮没有充分的理由不符合要求，它就会感觉不对。不协调会分散和中断用户体验。当感觉有些不对劲时，很难看到整体的伟大。同样，糟糕的用户体验会导致网站访问者跳出——损害您在 Google 中排名的机会。
一个好的设计师会让事情变得用户友好，并且知道什么字体、视觉效果和导航类型会吸引注意力。他们对如何将它们组合在一起有一个愿景。新设计师常常试图将尽可能多的兴奋塞进布局中。但是当太多的元素需要我们注意时，我们就会失去焦点。
熟练的网页设计师会考虑每个元素的重量，并且知道何时使用约束。他们知道如何创建易于导航的页面设计。这种和谐感也延伸到品牌标识上。从站点的声音和语气到调色板的一切都应该是一致的。NUA Bikes使用灰色调色板、充足的空白和稀疏的文本来将我们的注意力集中在他们的自行车上。
NUA Bikes使用灰色调色板、充足的空白和稀疏的文本来将我们的注意力集中在他们的自行车上。
4.组织统一
内容应具有逻辑性、流动性并适合层次结构。你的内容应该引导你的观众得出一个不可避免的结论，每篇文章都建立在它之前的内容之上。每句话都应该更清楚地说明您的品牌和目的，让读者在阅读时期待接下来会发生什么。
标头标签应用于构建内容并帮助网络爬虫对您的网站进行网络搜索排名。如果在开始设计之前您没有所有最终确定的内容，至少使用标题来帮助构建您正在构建的内容。
还应组织视觉元素。用补充书面内容的图像和图形定义部分。
Blue Apron井井有条的网站设计使阅读他们的食品包订阅变得简单而诱人。
5. 留白创造平衡
留白、按钮和其他视觉设计元素有助于图像和内容的突出，并使版面不至于凌乱。留白，也被称为负空间，是任何功利性设计的一个重要方面。没有它，信息传递就会变成一个不明确的圆球。
丹·马查多 (Dan Machado) 的在线作品集使用了大量的空白和粗线条。
这五个指导原则几乎适用于您将访问的所有网站。例外总是有的但了解规则可以更容易地改变它们而不会破坏您的设计。
2024年网页设计解构阅读心得 篇3
谢谢邀请。
整理了以下几方面，需要在进行设计时注意：一、主题及颜色错误搭配
首先要区分往网站的主题和网站的主色这两者之间是不同的，下面来了解一下。
① 网站主题：网站主题就是网站模板的另一个名称，网站主题有哪些？比如说：音乐影视类的；博客类的；医疗保健类的；考试教育类的等等这些都属于网站主题。网站主题就等于是衣服，给网站穿上博客模板这个网站就是博客站的类型，那么我们的确定了网站的类型之后就要给它用适当的主题，大家想想看，不可能男人会穿女人的衣服吧，不仅别人看着别扭，自己也不愿意穿。
② 网站主色调：网站的主色调就好比乐曲中的主旋律，起着主导的作用，单单只有主旋律还不能体现乐曲的完美，要多种辅助旋律搭配才能的动听，一般的网页色调都是控制在三种以内，辅助色最好与主色调相差别不大的，也可用相反的颜色。单一的色调也可以使用，它能起着醒目、清晰的目的。
二、排版杂乱
排版杂乱是一种低级的错误，但总有些新手还是会犯的错误，相信大家都比较喜欢房屋收拾的干净整洁的，一间房屋如果到处堆满了脏衣服和垃圾，谁会愿意住？同样，网站的排版如果进去看到乱七八糟的页面，可能顿时就没有心情浏览了，即便是想要浏览，也找不到自己想要的东西在哪里，读书的时候老师说过一句话，自己写的字可能自己都不认识，如果自己的网站自己都不清楚具体位置在哪里就麻烦了。
不仅仅是网页的排版，文章内容也是很重要的，比如说字体的大小，紧密的程度，段落之间的距离，文字颜色的深浅等这些都是一个好的网站所具备的条件。
三、广告及弹出窗口
广告和弹窗也是浏览网页最烦人的东西，过一分钟有个弹窗出来，过一分钟有个弹窗出来，内容没找到，弹窗关了无数道，阅读一篇文章，就是不让人安心的阅读，你说气不气。还有就是广告，有的网站广告可能比内容都还多，我是进来看广告还是看内容的。弹窗广告可以有，但是要合理。
四、网站导航
导航需要有助于浏览者快速的找到想要知道的内容页和功能，导航就是需要有引导性，如果导航不清晰明了，导入的页面要与导航所描述的一致，一个引导性差的导航有可能会造成客户浏览完全站也不知道自己想要的那块内容在哪里，现在即便是你有全时间最好产品、最好的服务也没什么用，因为客户不知道啊。
五、图像及媒体
如今的互联网时代就是网速的问题，网站有大量的图片及短视频，严重的拖延了加载网页的速度，所以在上传图片及短视频的时候尽量用方法减少图片及视频的大小，然后再开始加速功能。要用尽一切方法让网站变得轻盈，加载速度流畅，不然就等着淘汰吧。
六、一切从简
互联网图的就是方便、快速、简洁、明了，就拿注册表来做例子，一个注册表格要填什么手机号、身份证号码、验证码等等一系列要求，说白了不就是个注册表么？需要这么严格吗？说白了互联网信息这么广泛，这家不行找下家，不要让你的客户就这样流失了，当然某些特例不算。
文：事了了daisy
我们再软件开发、互联网高级人才服务、互联网转型辅导方面有丰富的实践经验。如果您有这些需求，关注联系我们，让您的创业、转型更有把握。
2024年网页设计解构阅读心得 篇4
内容是吸引读者的第一要素 同样是主要的问题。如果内容质量太差 太少 或者非专业 那么用户跳出率就会非常高。留不住人 所以没有内容支撑的网站是留不住人的！
优质的内容不是标题党 同样 内容必须要与你网站有些密切的相关性 不要牛头不搭马嘴
至于有内容 还要有好的排版 网页设计的布局 这些都需要一定的专业知识人士才可以完成 每个行业有些不同的页面排版布局
就好好像你读我现在的文章 段落不怎么通顺 因为手机打出来 没有经过润色处理
每个人访问你的网站 肯定是预先有着他需要的东西 你给不了它 他就找别人 就好比你去超市买东西这家没有 那么换下一家 然后下次你再需要买东西的时候 自我意识首先会考虑到第一家好像东西不全 可能会没有我需要的 我还是先到下一家去看看
2024年网页设计解构阅读心得 篇5
一、定义不同
一般来说，我们将网站分为前端和后端。前端主要负责页面的展示，后端则是业务逻辑的实现。
1、web前端
这里所说的前端泛指web前端，也就是在web应用中用户可以看得见碰的找的东西，包括web页面的结构、web的外观视觉表现以及web层面的交互实现。
2、web后端
后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性能等。
二、需要掌握的技术不同
1、web前端
精通JS，能熟练的应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。
（1）精通HTML，能书写语义合理，结构清晰，易维护的HTML解构；
（2）精通CSS,能够还原视觉设计，并兼容业界承认的主流浏览器；
（3）熟悉JavaScript，了解ECMAScript基础内容，掌握1-2种js框架，如JQuery；
（4）对常见的浏览器兼容问题有清晰的理解，并有可靠地解决方案；
（5）对性能有一定的要求，了解yahoo性能优化建议，并可以在项目中有效实施。
2、Web后端
后端开发人员：会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。
(1)精通jsp，servlet，javabean，JMS，EJB，Jdbc，Flex开发，或者对相关的工具、类库以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，对Web开发的模式有较深的理解；
(2)练使用oracle、sqlserver、mysql等常用的数据库系统，对数据库有较强的设计能力；
(3)熟悉maven项目配置管理工具，熟悉tomcat、jboss等应用服务器，同时对在高并发处理情况下的负载调优有相关经验者优先考虑；
(4)精通面向对象分析和设计技术，包括设计模式、UML建模等；
(5)熟悉网络编程，具有设计和开发对外API接口经验和能力，同时具备跨平台的API规范设计以及API高效调用设计能力。
另外建议前端工程师可以使用蓝湖来做代码生成，可以提高开发效率
2024年网页设计解构阅读心得 篇6
字体排版绝不仅仅是使用字体那么简单，它包括了关于文字”看上去会是怎么样？”的所有事情——例如文字的大小，行高，颜色甚至文字间留白这样的细枝末节的小事。一个好的文字排版会为你所写的内容定下情感基调，并且可以帮助读者更好的理解其内容和语境。
为了让你使用起来更像是在看一本参考书而不是说明书，本文将会非常精简清晰，如果你想进一步的了解更多细节，可以点击查看在每一章中的”扩展阅读”去深入了解。
这本手册将会在GitHub上开源，并且会持续更新一些最佳实践的范例，希望你们喜欢！
字体排版设计视觉层次
视觉层次是一种理念，它意在传达页面中的元素应该依照其重要性进行组织排版，以便读者可以很容易的通览整个页面，找到相关的内容。一个好的视觉层次可以引导读者在阅读时候的视觉流向。视觉层次被广泛运用于文字排版中，它构成了文字排版设计的理论基石。
请看下图的”爱丽丝梦游仙境”的字体排版设计，它展现了一个清晰的视觉层次：
点击这里 查看网页上的实际效果
视觉层次可以被分成以下4个部分：
字体大小 & 字体重量： 设置字体大小和字体重量是两种构建视觉层次的最简单的方式。他们可以很容易地告诉读者什么地方是最重要的，引导读者的目光落到这里的内容上来。只是简单地为文字加上这两种样式，文章的重点便一目了然了。
定位： 元素定位是另外的一种构建视觉层次的方式，就像上图中，文章的标题和作者信息通过置顶和居中表明了它们的重要性。
字体： 通过使用有对比度的字体可以提高不同元素之间的辨识度，从而构建视觉层次
颜色： 为重要的文字设置不同的颜色也是一种非常简单的构建视觉层次的方式。然而使用这种方式的时候一定要小心，因为颜色的滥用可能会造成重点部分辨识度的降低。
扩展阅读：
Visual Hierarchy： How Well Does Your Design Communicate?
Creating Exciting And Unusual Visual Hierarchies
字体排版中的格式塔原则
格式塔原则， 或格式塔法则， 是一种构建感性认知的规律。当我们观察这个世界的时候，我们通常会意识到，一个复杂的场景是由多个在某些背景之上的物体构成的，而这些物体则是由更小的一些物体构成的，依此循环下去。
在字体排版中我们需要理解的两个很重要的格式塔原则就是”距离原则”和”相似原则”。.
距离原则
为了更好地掌握元素定位的方法，了解距离原则是很重要的。距离原则表明，人们会将靠得近的物体视为有关联的物体，反之，隔得比较远的物体将会被看成属于不同类别。
点击此处查看原图
在字体排版设计中，”距离”指的是通过设置行高、内间距和外间距所制造出来的留白空间。在两段不同的段落之间应该留有明显的并且易于区分的留白间隔，请看下面的例子：
注意啦，你觉得应该把内容相关的部分都挤到一个很小的空间中去吗？当然不是这样，自由随意的留白也是很重要的。距离原则告诉我们，只需要为那些没有关系的段落之间额外的加上一些易于区分的留白就可以了
相似原则
格式塔的相似原则告诉大家，看起来很像的东西会被认为是一类的东西。举个例子，如果所有可点击的文字被设置为天蓝色，那么读者就会认为文章中所有天蓝色的文字内容都是可以点击的。
在字体排版中，相似原则就意味着，拥有同样功能的元素应该在样式上保持一致。如果两组元素的功能相似的话，那么它们也应该看起来很像才对。例如，两篇同为博客帖子的文章应该看起来很像。而相反的，两个功能不相同的元素也应该看起来不像。
扩展阅读：
Gestalt Theory in Typography & Design Principles
Proximity， Uniform Connectedness & Good Continuation
字体选择字体
选择字体是一个具有创造性和情感的过程。不同的字体可以传达不同的情感，你可以尽情挑选一个合适的字体让你的文字感情变得丰沛起来。
首先为你的文字的正文挑选一个合适的字体，当你需要搭配不同字体的时候，记得要保持正文字体的不变，然后试着依据这个字体选择和它相搭配的其他字体。
使用一些例如TypeTester 和 TypeCast 这一类的工具会让你进行字体选择的时候轻松一些。
从他人处获得灵感! Fonts In Use提供了大量的优秀的字体搭配范例。
有些字体本来就是为用作大标题而设计的，而有些字体天生就只适合那些小屏幕，你要依照每个字体的”天性”去使用它们。你可以在WebType 上面找到对于不同字体而言合适的尺寸。此外 TypeKit也标明了其上的字体是适合标题或者是正文。
为了达到最大程度上的兼容，我们建议使用上面列出的格式。或者，只使用 woff2 和 woff也会支持大部分的现代浏览器。
你需要为每个列出来的格式提供一个相应的字体文件。推荐使用 Transfonter 或者FontSquirrel’s Web Font Generator，这样你就可以在只有一个字体文件的情况下，将其转换成不同的文件格式。
尽可能的压缩你的字体文件。 点击这里 查看更多信息。
将多个同源字体文件（细体、常规、半粗体、粗体等等）合并成一个font-family， 尽量不要为每个字体都起一个新的font-family的名字。
或者，你也可以通过线上字体资源服务，如Google Fonts 或者 Typekit引入你想要的字体。
扩展阅读：
Further Hardening Of The Bulletproof Syntax
FontSquirrel： How To Use The Generator
加载字体
在你引入的字体被渲染出来之前，他们需要先进行加载。下面是三种在加载的时候可能会发生的事情：
引入的字体没有被识别出来，字体应用了备用字体。
引入的字体虽然被识别出来但是没有加载，他需要在下载完成之后才会被应用。
引入的字体被成功识别并迅速应用。
场景1只发生在你尝试使用一个不存在的字体，或者声明时候的src指向了一个坏链， 这种情况可以并且应该彻底避免。接着我们跳到场景3，这种情况通常在字体被正确的缓存的时候发生，也是我们喜闻乐见的。场景2中包含着字体加载的过程，字体加载通常是难以避免的（至少是在第一次请求的时候），下面是几种处理方式：
1. 文档样式闪烁方案 （FOUT）
FOUT是指网页会在切换到合适的网页字体之前，使用默认或者备选字体显示文字。这种情况的出现是因为只有当HTML和CSS都被下载完成之后，字体请求才会发出。这就意味着，在HTML被显示出来而字体文件没有被完全下载下来中间存在着一段”空档”时间。 FOUT 算是对大部分的网页而言的最佳选择，主要是其他的选择也许更糟。如果使用得到的话，FOUT 很难被用户察觉出来。
2. 不可见文本闪烁方案（FOIT）
很多年前，一些现代浏览器开始使用一种新的技术来处理字体加载的问题 — FOIT. FOIT是指当浏览器检测到字体正在加载的时候，隐藏应用这段字体的文字，直到字体完全下载完才将其显示出来。 然而我们应该避免这种做法虽然这样做从理论上看起来还不错，但是这会带给那些网络速度比较差的用户十分糟糕的体验。有可能会在最初的FOIT后出现FOUT， 最坏的情况可能会是这段文字将永远看不到了。
3. 白屏方案
即在字体加载完成之前，整个网页都处于不可见的状态，或者也可以采用显示一个进度条.我们只推荐当FOUT 严重影响用户体验的时候使用这种方法。 我们通常在一个网页需要大面积显示一个特定的字体的时候使用该方法，否则，FOUT 总会我们的第一选择，因为”内容至上”。白屏方案与 FOIT很相似， 但对于你来说，你拥有控制在什么时候给用户展示你的内容的自由，这种感觉会似乎更棒一些，不是吗？而且在FOIT方案中， 不可见的文本有时候会给读者带来困惑，而彻底的白屏（或者一个进度条）会让人很自然的觉得是一个正在加载的信号。
不管你是打算使用 FOUT 方案或者白屏方案， 我们都推荐您使用Web Font Loader这个JavaScript库. Web Font Loader 可以让你对 @font-face加以控制， 而且你也为字体加载的体验添加控制事件。
注意： 有一个W3C 字体加载 API也会实现同样的功能，但是它现在的 支持不是很好_
异步地使用 Web Font Loader 很重要，只有这样做才不会延误页面其他部位的渲染。
写样式的时候，让你的备用字体尽可能近的靠近你的实际字体，这样才能最大程度的减少 FOUT造成的影响.点击 这里你将会看到一系列的备选字体. 使用 这个工具你将很容易的看到备选字体和你引入的字体的对比效果.
白屏方案
在这个例子里面，备选字体不需要和你引入的字体看起来很像，因为我们不会用到 FOUT. 依照你自己的喜好去选择备选字体吧。
如果你想要用一个进度条取代白屏，你可以使用Pace。这种方法在用户体验上效果会更好一些，特别是当字体文件很大的时候。
扩展阅读：
Type Study： Choosing Fallback Fonts
FOUT， FOIT， FOFT
Web Font Optimization
OpenType 的特性
OpenType 的特性可以被视为文字进行字体排版时的可选项，它们被用来加强文字的表现和易读性。
p { font-kerning： normal; font-variant-ligatures： common-ligatures contextual; -moz-font-feature-settings： "kern"， "liga"， "clig"， "calt"; -ms-font-feature-settings： "kern"， "liga"， "clig"， "alt"; -webkit-font-feature-settings： "kern"， "liga"， "clig"， "calt"; font-feature-settings： "kern"， "liga"， "clig"， "calt"; }
OpenType 特性被放置于字体之中，这就意味着对于不同的字体，会有不同的特性，在使用这些特性之前，我们需要看一看我们的字体是否支持这些特性。
使用 font-feature-settings来激活 OpenType 特性. 由于目前对于这个属性的支持不好，我们需要在属性之前加上前缀。
Kerning kern， ligatures liga， contextual ligatures clig， 和 contextual alternatives calt这四种适用于所有字体中 ######( 译者注：font-feature-settings这种属性仅支持拉丁文语系的字体使用，并不支持中文哦！ )
Web Style Guide相对大小
尽可能的使用相对大小。
html { font-size： 100% } p { font-size： 1em } @media (min-width： 64em) { html { font-size： 112.5%; } }
font-size： 100% 与浏览器的字体大小设定保持一致而不是去覆写它，根据大多数的浏览器的默认设置，这里也可以用1em 代替表示 16px.
通过改变html 的 font-size会影响到所有单位为 em和rem 的元素.如果是对于响应式设计的网页，这样做还是比较实用的。
用户的选择也很重要，所有不要偏离 font-size： 100%和1em太远.
对于font-size建议使用rem 和 em.
对于一些元素定位如margin， padding等等，建议使用 rem， em， 或者 % 。
对于媒体查询中尺寸建议使用em.
对于一些大的标题字或者配有图片的字，可以使用FitText来实现标题的缩放。尽量避免使用vw 和 vh因为现在的支持还不是很好，难于精确的配置，并且对于一些浏览器的字体和缩放设置并不适配 。
扩展阅读：
Type Study： Sizing The Legible Letter
5 Useful CSS Tricks for Responsive Design
REM vs EM – The Great Debate
PX， EM or REM Media Queries?
容器
容器，或者称为包装，指的是用来包裹一个或者多个元素的HTML元素。它将元素分组，从而更好进行语义化、修饰以及布局。
html { box-sizing： border-box; } *， *：before， *：after { box-sizing： inherit; } .container { max-width： 67rem; padding-left： 1.5rem; padding-right： 1.5rem; }
强烈建议使用 box-sizing： border-box. 点击这里 查看更多信息。
左/右内间距与最大宽度联合使用可以很容易地创建一个移动端友好的容器。
要为容器选择一个合适的宽度，既不能太大（因为太大的话读者的眼睛难以聚焦）也不能太小（这样读者的眼睛需要经常移动才可以看清）。永远记住，在进行网页字体排版的时候，没有一个适合所有字体、尺寸、行距和分辨率的铁律，你需要自己来做决定。
扩展阅读：
* { Box-sizing： Border-box } FTW
StackOverflow： Ideal Column Width For Paragraphs Online
字体大小
使用 缩放模块 可以帮助你决定在你的元素上面应用怎样的font-size .缩放模块指的是依照其内容安排的一系列比较合适的字体大小的数值。
缩放模块的说明. 点击此处
我们可以在编写CSS的一开始使用缩放模块，将它作为一个参考。
值的注意的是，尽管不同的字体有着不同的大写字母高度和x字母高度，可是大多数的模块化缩放工具都没有将这些考虑在内。
在你的样式表中，建议将你所使用到的缩放模块工具的配置信息写在注释之中。
响应式的缩放模块
只使用单独的一个缩放模块方案并不一定适合所有分辨率的设备，为了解决这个问题，你可以依据用户的设备的分辨率的不同提供不同的缩放方案
垂直距离
文字间的垂直距离是由 line-height， margin， 和padding构建出来的.
line-height 不应该带有单位。比较宽的容器里面文字的行高会大一些，而那些比较窄的容器里面行高相对来说小一些会比较合适。
为那些具有单方向的文本元素添加margin属性，建议使用margin-bottom.
要遵循距离原则.
垂直节律
垂直节律是指元素之间的垂直间隔要保持一致性。这一点十分重要，它可以带给读者视觉上放松的享受，给他们一种亲近的感觉。
Image source建立垂直节律很简单。首先，确定你使用的基础垂直内间距和基础垂直外间距的数值。然后，为你的容器，文字性元素或者其他相关元素的单方向的外边距（或者内边距）应用这个数值。如果你需要制制造更大的间隔的话，应用这个数值的倍数就好啦!
将基础间距的数值设置成与行高相同的数值，这样你的文字就像写在一个条格纸上那样整齐，就像我们传统的印刷字体设计的那样。然而，想要文字拥有垂直节律不一定需要按照上面的方法来做，只要你设置了一个基础间距，并且使得其他间距都是由这个间距成倍的得来的，那样就可以了。
文字底部对齐基线网格
文字底部对齐基线是垂直节律的一个更为严格的实现。在网页中，文字通常在line-height间居中对齐.但对于较大的文字来说会比较讨厌，因为这样做会导致在顶部和底部留有太多的空间。在传统印刷的时候，这个问题一般会通过让文字对齐基线网格的底部得以解决。
我们也可以通过为较大的文字添加一个负的margin-top和一个较小的margin-bottom，不需要使用基线网格而解决这个问题。
图片资源为不同的字体样式、字体大小和分辨率添加一个底部对齐的基线网格并不是一个很容易的方式，所以强烈建议你使用一个字体排版基线库例如 Sassline 或者 MegaType.
注意，垂直节律只是一个建议，而且基线网格也只是想象出来的。所以我们不需要在每个使用场合都遵循这个规律，也不用在每个元素中都去追求像素级别的完美。
扩展阅读：
Why is Vertical Rhythm an Important Typography Practice?
Aligning type to baseline the right way using SASS
Is Web Typography Completely Broken?
Single-direction Margin Declarations
颜色
颜色可以很大程度上的增加视觉辨识度，是字体排版中一个重要的组成部分。
不要随心所欲的挑选颜色，建议使用颜色板，建议你使用 Material Design colors 和 Flat UI colors 中提供的颜色板进行颜色选择.
不要过度滥用一个颜色，因为这样会造成辨识度的降低，同样也不要使用很多完全不同的颜色。
遵循相似原则.
不建议使用纯黑 #000 作为你的正文颜色，你可以选择一个非常灰的颜色如#333.
有时候，使用透明颜色比使用浅色会更好一些，如果你深入的了解，可以点击这里 。
确保文字和背景有较大的对比度，你可以使用 这个对比度检测工具 帮助你进行选择.
####扩展阅读：
Magic Of CSS： Color
Google Style – Color
下划线
在印刷品里，永远都不要使用到下划线，因为这样做会影响文字的阅读，重点是，它很丑！Practical Typography
一般的来说，在网页中下划线也会看起来并不美好！幸运的是， background-image 就包含一个方法，它可以使得下划线变得好看一点。 下面是Adam Schwartz使用Sass实现的下划线的例子 ：
SmartUnderline 是一个简化这个工作的库。建议你只在有链接的地方使用下划线，这是大多是网站都遵循的规律，如果不这么做的话，可能会引起误解。