2024年网页设计笔画突变 篇1
在学习UI设计的过程当中，特别想学或者零基础的人来说，需要学习到很多知识，比如软件 PS AI ，理论 色彩 排版 规范 UE 等，这些都是一名UI设计师需要学习的知识，而学习到这些知识，可以通过视频，书籍，网站，培训等多种方法学习，今天就和大家推荐下学习设计所要看的一些书籍。
一、《设计心理学》
内容简介：
设计心理学是设计专业一门理论课，是设计师必须掌握的学科。设计心理学是建立在心理学基础上，把人们心理状态，尤其是人们对于需求的心理通过意识作用于设计的一门学问。它同时研究人们在设计创造过程中的心态。以及设计对社会及对社会个体所产生的心理反应，反过来在作用于设计，使设计更能够反映和满足人们的心理作用。
推荐理由：
心理和情感激发是鼓励用户付诸行动一个的宝贵工具。激发包括像内疚和担心的这样的情绪，当然还包括吸引人的那种归属感和人的价值观念认可。
在设计中结合激励性情绪的通常做法是如果网站上的广告语言，再加入一些图形元素作为辅助支持，使用图片和图表加强激励效应。
二、配色设计原理
作者：
佐佐木刚士，1978年出生于神奈川。大学毕业后，进入WORKS CORPORATION公司。在入社仪式上发表了题为“我喜欢的颜色是粉色。我喜欢的食物是茶碗蒸”的谜语一般的自我介绍，使公司的前辈职员和上司大为吃惊。他曾经工作于月刊《DTPWORLD》编辑部，现在以自由作家、编辑的身份从事各种活动。
简介：
怕配色理论枯燥冗长么？怕技巧方法不够实用么？《配色设计原理》保证让您学到实用而又系统的配色知识！《配色设计原理》通过简明易懂的示例作品，逐条讲解了绝对不可背离的配色理论；将具体的设计案例进行修改前后的对比，分析了如何才能使配色更具效果和表现力；根据希望达到的不同表现效果和目的，展现了设计师必须要了解的配色技巧；介绍了在理论无法适用时应对的配色设计方法；讲解了基本的色彩知识和易用的PhotoShop技法；刊载了日本目前活跃、专业的设计师的主题性访谈。
三、《破茧成蝶》《破茧成蝶2》
内容简介：
本书从用户体验设计师的角度出发，系统地介绍了其职业生涯中的学习方法、思维方式、工作流程等，覆盖了用户体验设计基础知识、设计师的角色和职业困惑、工作流程、需求分析、设计规划和设计标准、项目跟进和成果检验、设计师职业修养以及需要具备的意识等，力图帮助设计师解决在项目中遇到的一些常见问题，找到自己的职业成长之路。
推荐理由：
这本书简单明了的从用户体验方向出发，把你的设计更人性化，更符合用户的预期范围，更注重用户体验，让你设计出来的作品更容易说服甲方爸爸。互联网下半场来袭，从业者需要做出怎样的变化，以应对风云突变的大环境呢？本书主要讲述“用户导向”的用户体验设计师，与“业绩导向”的产品经理，在瞬息万变的互联网新时代如何顺势转型成“以产品价值为中心”的产品设计师的过程；作者结合数年来从事互联网产品架构和设计工作的思路，融会贯通，提炼出顺应新 时代的互联网产品设计内在规律，旨在帮助读者在波涛汹涌、充满不确定性的大环境下，改变命运，不惧未来！
四、《形式感》
内容简介：
《形式感+:网页视觉设计创意拓展与快速表现》可以帮助有一定基础的网页设计初学者或在职者，在遇到设计创意瓶颈时，能够在较短的时间内解决设计上的创意和视觉形式感的问题。不论是应对紧急的工作需求或是求职面试都能够给观者一个新颖的视觉表现。
推荐理由：
很多小伙伴在设计的时候都只是为了好看而设计，如果你的设计加上一些故事是否更生动呢，本书很多结合生活中的案例用故事引导的形式展示在案例中，希望你看完此书你的设计也是一个有故事的设计，有故事的设计会给你的设计加分哦。
五、《简约至上》
内容简介：
作者Giles提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约至上的终极策略，讲述了为什么应该站在主流用户一边，以及如何从他们的真实需求和期望出发，创造出历久弥新的用户体验。
推荐理由：
追求简单易用是人类的本性，无论是互联网产品，还是移动应用，亦或其他交互式设计，简单易用始终都是赢得用户的关键。
六、《用户体验要素》
内容简介：
本书用简洁的语言系统化地诠释了设计、技术和商业融合是最重要的发展趋势。全书共8章，包括关于用户体验以及为什么它如此重要，认识这些要素、战略层、范围层、结构层、框架层、表现层以及要素的应用。 全书用清晰的说明和生动的图形分析了以用户为中心的设计方法(UCD) 来进行网站设计的复杂内涵，并关注于思路而不是工具或技术，从而使你的网站具备高质量体验的流程。
推荐理由：
很多设计师设计都仅从设计的角度出发，排版、布局、色彩搭配是否和谐，做出来的设计稿总不如人意，本书从用户体验 的角度出发，帮你简单明了的了解什么是要素、战略层、范围层、结构层、框架层、表现层以及要素的应用及方法，从而使你的设计更加的接近用户的心里；
七、《在你身边为你设计》
内容简介：
—腾讯的用户体验设计之道。本书内容包括：设计理念、设计方法、用户研究、体验设计、设计流程和工具，以及团队成长与管理等方面的知识与经验分享。
推荐理由：
很多设计师只知道依葫芦画瓢的设计，但是却不知道自己设计这个产品有什么原理，用的是什么方法，针对的用户是什么，它能够给客户带来什么？当甲方爸爸问到的时候一无所知，希望你读完本书可以学到一些，能轻松解决甲方爸爸的尴尬问题，最终你的作品是一个有理有据的活生生的作品。
八、《交互设计精髓》
内容简介：
研究交互设计，交互设计一门综合性很强的学科，包括逻辑学，计算机科学，心理学，社会学，认知学，视觉设计等等。很多设计认为，交互设计就是画画原型，做一些页面的基本跳转等再简单不过的事情。等踏入这个行业以后，价值观彻底被颠覆了，有没有！我们只有沉下心来，慢慢学，慢慢做....
推荐理由：
在工作中，常常市场研究和用研把研究结果隔着窗户扔给了设计或者程序员，对着冷冰冰的用研报告是很难能设计成用户想要的产品的。解决方案就是设计人员参与到用户研究的过程中，与用户进行直接而广泛的接触，那么，设计出来的产品也一定会让用户所喜欢的。让设计人员参与用户研究，设计人员可以参与用户访谈过程，并做一下访谈记录等。
九、《UED体验设计之旅》
内容简介：
《腾讯网UED体验设计之旅》是腾讯网UED的十年精华输出，涵盖了丰富的案例、极富冲击力的图片，以及来自腾讯网的一手经验，通过还原一系列真实案例的幕后设计故事，从用户研究、创意剖析、绘制方法、项目管理等实体案例出发，带领读者经历一场体验设计之旅。
全书核心内容涉及网媒用户分析与研究方法、门户网站未来体验设计、H5技术在移动端打开的触控世界、手绘原创设计、改版迭代方法、文字及信息图形化设计、媒体产品的交互设计、大项目设计管理方法等。
推荐理由：
很多设计师接触的工作比较单一，可能是单一的APP或网页设计，《腾讯网UED体验设计之旅》这边书设计的领域比较广，包括网页、APP、专题、微信、H5、字体、图形等一系列设计，读完这本书希望给你的设计成长之路更广；
十、《交互设计精髓》
内容简介：
研究交互设计，交互设计一门综合性很强的学科，包括逻辑学，计算机科学，心理学，社会学，认知学，视觉设计等等。很多设计认为，交互设计就是画画原型，做一些页面的基本跳转等再简单不过的事情。等踏入这个行业以后，价值观彻底被颠覆了，有没有！我们只有沉下心来，慢慢学，慢慢做....
推荐理由：
在工作中，常常市场研究和用研把研究结果隔着窗户扔给了设计或者程序员，对着冷冰冰的用研报告是很难能设计成用户想要的产品的。解决方案就是设计人员参与到用户研究的过程中，与用户进行直接而广泛的接触，那么，设计出来的产品也一定会让用户所喜欢的。让设计人员参与用户研究，设计人员可以参与用户访谈过程，并做一下访谈记录等。
十一、《动静之美》
内容简介：
笨书向读者全面细致地介绍了Sketch的使用方法，以及和Sketch无缝衔接的几款交互动效软件的使用方法本书不局限于软件本身的使用，更多的是设计思路和设计规范等内容的分享，让读者在掌握UI设计和交互动效设计精髓的同时彻底掌握Sketch，并能用keynote、principle和pixate等软件进行交互动效设计。
推荐理由：
随着UI设计师的市场竞争越来越激烈，单一只会做用PS、AI设计的已经不能轻松在市场立足了，很多企业要求设计师会Sketch，Keynote、principle、pixate等软件。
十二、《新印象 解构UI界面设计》
这是一本全面介绍UI设计的书，是帮助初级和中级读者快速学习UI设计知识、技巧和操作的参考书。
本书从UI设计基础入手，结合大量的案例分析和针对性实战，全面深入地阐述了UI设计的界面类型、界面构图、版面布局、元素运用、界面用色、设计原则与规范、切图与标注、图标设计及艺术二维码设计等方面的内容。
本书共9章，每章分别介绍一个板块的内容，讲解细致，案例分析与实战数量丰富。通过丰富的实战练习，读者可以轻松而高效地掌握UI设计的相关技术。
2024年网页设计笔画突变 篇2
刚开始学习画画，这画画基础就是属于美术的一种，这时期需要学习所有的基本的美术基础，就是通过画画表现出来，比如素描基础，色彩基础等。在学习素描色彩基础中，我们学会了用美术的眼光看物体，比如怎么把它画得像，画得美，就开始以“美”，一种审美观来看世界上所有的物体，观察事物。这个阶段是小学到高中，美术培训班里就教这些基础知识；
平面设计，高考后上大学或专职中，面向未来职业的一种专业。是属于设计类的一种专业。在大学了，有分纯艺术和艺术设计类等（不同学校不同区别），除了平面设计、服装设计、工业设计、环艺设计、动画设计等属于设计类，还有其它专业油画、雕塑等。这时的设计就是根据自己以前美术的功底，继续学习一些专业的设计知识，开始设计，设计新服装、新的产品造型、新的室内设计等等，平面设计又是所有设计中的基础，因为它是所有设计元素的表达，如以新的设计手法设计新的艺术字，比如用方形设计一个“人”字，这个“人”字就是方形拼贴而成的；或网页设计，网页所有的框框架架该怎么排版（摆放）才会漂亮等等。
关于“平面设计”具体是什么，你可网上搜，你只是不明白画画和设计有什么关系而已。刚开始学习画画，这画画基础就是属于美术的一种，这时期需要学习所有的基本的美术基础，就是通过画画表现出来，比如素描基础，色彩基础等。在学习素描色彩基础中，我们学会了用美术的眼光看物体，比如怎么把它画得像，画得美，就开始以“美”，一种审美观来看世界上所有的物体，观察事物。这个阶段是小学到高中，美术培训班里就教这些基础知识；
平面设计，高考后上大学或专职中，面向未来职业的一种专业。是属于设计类的一种专业。在大学了，有分纯艺术和艺术设计类等（不同学校不同区别），除了平面设计、服装设计、工业设计、环艺设计、动画设计等属于设计类，还有其它专业油画、雕塑等。这时的设计就是根据自己以前美术的功底，继续学习一些专业的设计知识，开始设计，设计新服装、新的产品造型、新的室内设计等等，平面设计又是所有设计中的基础，因为它是所有设计元素的表达，如以新的设计手法设计新的艺术字，比如用方形设计一个“人”字，这个“人”字就是方形拼贴而成的；或网页设计，网页所有的框框架架该怎么排版（摆放）才对。
2024年网页设计笔画突变 篇3
字体排版绝不仅仅是使用字体那么简单，它包括了关于文字”看上去会是怎么样？”的所有事情——例如文字的大小，行高，颜色甚至文字间留白这样的细枝末节的小事。一个好的文字排版会为你所写的内容定下情感基调，并且可以帮助读者更好的理解其内容和语境。
为了让你使用起来更像是在看一本参考书而不是说明书，本文将会非常精简清晰，如果你想进一步的了解更多细节，可以点击查看在每一章中的”扩展阅读”去深入了解。
这本手册将会在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 是一个简化这个工作的库。建议你只在有链接的地方使用下划线，这是大多是网站都遵循的规律，如果不这么做的话，可能会引起误解。
2024年网页设计笔画突变 篇4
风起于青萍之末，浪成于微澜之间，虽微末之技，然不可小觑之。
1
在线文字云工具
如图6.1.1-1所示，是一种典型的文字云设计效果。文字云一种很有创意又非常形象的文字信息展示工具，对我们来说并不陌生，但很多人依然不太熟悉如何简便快捷的来设计文字云。
▲图6.1.1-1
公子经过多方试验，认为WORDART的文字云相对比较美观且实用方便，在线即可设计文字云且无需注册，如图6.1.1-2所示。当然，如果您需要经常设计文字云，建议还是注册并登陆比较好，因为你以后可以将原来设计的文字云进行文字内容的再次修改，很方便。
▲图6.1.1-2
磨刀不误砍柴工，我们不打无准备的仗。在制作文字云之前，我们先准备好这三项材料。
①文字。新建一个TXT文档，把准备生成文字云的文字内容输入并保存。
②形状。虽然可以使用网站自带的形状，但自带的形状颜色无法修改且并不一定是自己满意的。自己可以任意选择形状并提前设计好颜色，如果是图标或矢量图形，可以直接在PPT中设置好颜色，另存为PNG格式的图片备用。
③字体。中文字体是需要上传的，可在电脑中直接拷贝，路径是C:\Windows\Fonts或网上搜索下载即可。
让我们先来熟悉一下界面。如图6.1.1-3所示。左侧是原始界面，右侧是翻译后的界面。我们可以看到，主要的设计步骤是：文字、形状、布局、颜色和动画、下载并分享。我们依次来展示一下。
▲图6.1.1-3
第一步，文字输入。单击左上角的【Import words】输入文字，或将准备好的文字拷贝过来，然后再单击右下角的【Import words】。如图6.1.1-4所示。
▲图6.1.1-4
第二步，形状设置。单击左上角的【ADD IMAGE】添加形状，然后选中该形状，当然您可以先利用系统自带的形状先练习一下。如图6.1.1-5所示。
▲图6.1.1-5
第三步，添加字体。单击左上角的【Add font】添加中文字体并选中。如图6.1.1-6所示。
▲图6.1.1-6
第四步，摆放设置。单击【layout】调出文字摆设设置的界面，文字方向可以根据个人喜好来设置，文字数量保持默认就可以了，文字大小根据需要选择最大或均衡，可提前按预览按钮预览效果。如图6.1.1-7所示。
▲图6.1.1-7
第五步，颜色设置。按照公子的习惯，主要设置三点：①勾选【Use shape colors】使用形状的颜色；②【Shape transparency】的数值设为0，即形状设为透明；③【Background color】勾选【Transparent】，形状之外的背景设为透明。如图6.1.1-8所示。
▲图6.1.1-8
第六步，预览并保存。①单击【Visualize】预览看文字云效果，不满意可以自己再微调；②单击【Download PNG Image】中的SQ下载PNG格式的文字云，如果付费可以下载更高清的图片甚至矢量图。③如果已登录该网站，建议单击【Save changes】保存该文字云以备下次修改使用。如图6.1.1-9所示。
▲图6.1.1-9
2
轮廓文字效果
如图6.1.2-1所示是布衣公子制作校招PPT时，搜到的一幅图，这种文字轮廓效果还是非常不错的，接下来我们在PPT中实现这个效果。
▲图6.1.2-1
以阿里巴巴普惠体为例，双层文字均是100号，上层文字彩色、无轮廓；下层文字彩色、轮廓为深灰或黑色，25磅，然后设置双层文字完全重叠即可。如图6.1.2-2所示。
▲图6.1.2-2
我们还可以实现外围线条轮廓的文字效果。具体的方法是通过三层文字的不同设置来实现，以三层文字均是深灰色的100号字体为例，第一层文字：无轮廓；第二层文字：轮廓25磅，白色；第三层文字：轮廓30磅，彩色。如图6.1.2-3所示。
▲图6.1.2-3
文字轮廓的设置相信大家都会吧，忍不住再絮叨一遍：①选中文字后单击【格式】→【文本轮廓】；②选择【粗细】；③选择【实线】→设置【宽度】为25磅。如图6.1.2-4所示。
▲图6.1.2-4
三层文字设置起来的确有点麻烦，我们是否可以将设置好的文字快速迁移使用呢？
①可通过【Ctrl + G】将文字组合起来；
②可通过【Ctrl+[ ]】调整文字的大小；
③可通过【Ctrl + H】来替换文字内容。
3
镂空文字效果
文字镂空效果匹配图片制作全图封面效果最佳，如图6.1.3-1所示。如何实现文字镂空效果呢？布衣公子分享自己两个实现文字镂空效果的方法，我们会用到【合并形状】这个功能，因此要求微软2013及以上版本的PPT软件才能实现。
▲图6.1.3-1
方法一、矢量文字法。其要点是，①使用【合并形状】功能制作矢量文字；②设置矢量文字的填充为【幻灯片背景填充】，当然，幻灯片背景要设置为选定的图片。
让我们来复习一下矢量文字的制作方法，将一个图框覆盖到字体上面，通过【合并形状】→ 【相交】得到矢量文字。如图6.1.3-2所示。
▲图6.1.3-2
然后，进行细化的设置。如图6.1.3-3所示。
▲图6.1.3-3
①将幻灯片的背景设为既定的图片。具体的方法是：右击幻灯片→【设置背景格式】→【图片或纹理填充】→选择对应的图片。
②设置矢量文字为幻灯片背景填充。具体的方法是：右击矢量文字→【设置图片格式】→【幻灯片背景填充】。
③根据实际排版的需要添加图框蒙版。具体的方法是：【插入】→【形状】→【矩形】 →【纯色填充】 → 20%透明度的白色。
方法二、直接穿透法。其要点是，文字直接和图框通过【格式】→【合并形状】→【组合】穿透图框形成镂空。
此法更简单，图片不一定需要设置为幻灯片背景，直接放在幻灯片的底层也行，甚至将视频放在底层也可以，但镂空文字设计前先确定好蒙版的大小和位置，这样确保一次成功。
与矢量文字的制作方法类似，都要用到【合并形状】的功能。将图框与文字重叠覆盖，通过【合并形状】→ 【组合】便可得到镂空文字。然后，再根据视觉效果的需要，设置镂空文字的透明度即可。如图6.1.3-4所示。
▲图6.1.3-4
4
七种文字特效
创新没有想象的那么难，只需稍微往前走半步，简单的文字就告别了单调。
第一种、色彩突变。右键单击文本框→【设置形状格式】→【文本选项】→【文本填充】 → 【渐变填充】，删除多余的渐变光圈，只保留两个，设置为指定颜色，再将位置都设置在50%处，角度依据所在的环境设置。如图6.1.4-1所示。
▲图6.1.4-1
第二种、图片填充。右键单击文本框→【设置形状格式】→【文本选项】→【文本填充】 → 【图片或纹理填充】，选择对应的图片即可，案例中的低面（Low Ploy）图片可在学员交流群中下载。如图6.1.4-2所示。
▲图6.1.4-2
第三种、环形文字。单击文本框→【格式】→【文本效果】→【ABC转换】 → 【跟随路径】，使用的时候，注意拉动文字框上面的小黄点来进行文字位置或大小的微调。如图6.1.4-3所示。
▲图6.1.4-3
第四种、三维透视。右键单击文本框→【设置形状格式】→【文本选项】→【文字效果】 → 【三维旋转】，根据图中的明细设置度数即可，如何确定这些旋转或透视的度数呢？那就要根据具体的场景进行目测和微调啦！如图6.1.4-4所示。
▲图6.1.4-4
如图6.1.4-4-1所示。这是另外一个类似的案例，【三维旋转】具体的参数是：Y旋转305°，透视120°
▲图6.1.4-4-1
第五种、暗夜荧光。右键单击文本框→【设置形状格式】→【文本选项】→【文字效果】 → 【阴影】，颜色设为白色，透明度45%，大小100%，模糊21磅，可以看出，这是通过阴影的设计来实现文字暗夜中荧光的效果，比直接设置文字发光更为细腻！如图6.1.4-5所示。
▲图6.1.4-5
第六种、透镜放大。单击文本框→【格式】→【文本效果】→【ABC转换】 → 【弯曲】 → 【腰鼓】。此种文字效果和放大镜配合起来天衣无缝，简直是绝配。如图6.1.4-6所示。
▲图6.1.4-6
第七种、映像倒影。右键单击文本框→【设置形状格式】→【文本选项】→【文字效果】 → 【映像】，可进行参数的微调。该特效是布衣公子早期特别喜欢使用的，而后追求创新则渐渐的喜新厌旧了。如图6.1.4-7所示。
▲图6.1.4-7