2024年网页设计中的库 篇1
每个学设计的小伙伴，都需要资源库和工具箱
你需要的设计资源清单（百度名字即可）
从资源库到编辑器
给你一个收藏的理由
灵感来
MaterialUp:Material design 设计灵感.
FLTDSGN: 最佳扁平化设计展示.
Site Inspire:Web 设计灵感.
UI Cloud:全球最大的 UI 设计数据库.
Moodboard:情绪板设计.
Crayon:营销策划.
Land-Book:产品登陆页图集.
Ocean:设计师反馈分享社区.
Dribbble:设计师作品展示.
Behance:设计展示.
Pttrns:移动 UI 模式.
Flat UI Design:扁平化设计.
Awwwards:设计创意奖.
The Starter Kit:开发者及设计师资源.
One Page Love:单页网站设计灵感.
UI Parade:UI 设计工具与设计灵感
The Best Designs:web 设计.
Agile Designers: 设计资源.
Niice:A search engine with taste.
设计资源
Freebbble:优质免费资源.
Dribbble:免费资源.
Graphic Burger:设计资源.
Pixel Buddha:职业设计资源.
Material Design UI Kit:Google Material Design 用户界面设计工具.
Premium Pixels:创意工具.
Fribbble:Gilbert Pellegrom 策展的 PSD 资源.
Freebiesbug:PSD 资源.
365 Psd:PSD 资源.
Dbf:Dribbble Behance 最佳免费设计资源.
Marvel:著名设计师的免费资源.
UI Space:手工制作的优质资源.
Free Section of Pixeden:免费设计资源.
Free Section of Creative Market:周一免费.
Teehan+Lax:DiOS 8 GUI PSD (iPhone 6).
Teehan+Lax:iPad GUI PSD.
Freepik:图像资源.
Tech&All:PSD 与科技新闻
Tethr:最好看的 IOS 设计工具包.
图像编辑器
Canva:图形设计.
Skitch:Evernote 插件.
Easel.ly:可视化图形.
Social Image Resizer Tool:社交媒体图像优化.
Placeit:产品模具模板.
Recite:把名言变成可视化杰作.
Meme Generator:meme 生成器.
设计工具
Material Palette:可导出到 Material Design 调色板.
New Flat UI Color Picker
Flat UI Colors:扁平化颜色.
Coolors:颜色主题.
Skala Color
Couleurs
Material UI Colors:Material ui 调色板，支持 Android, Web & iOS.
Colorful Gradients:渐变色.
Adaptive Backgrounds:选取主色.
Brand Colors:著名品牌采用的颜色.
Paletton
0 to 255:颜色校验.
Colour Lovers
Adobe Color CC:颜色组合，来自 Kuler 社区.
Bootflat:扁平化设计色.
Hex Colorrrs:Hex 转 RGB.
Get UI Colors
Coleure
Colllor:配色方案生成工具.
Palette for Chrome:从任何图像生成调色板.
素材来源
500px.com 数量多
Stock Up:最佳素材图片大全.
Pexels:最佳图片大全.
All The Free Stock
Unsplash:高画质图片.
Splashbase:搜索发现免费图片视频.
Startup Stock Photos
Jay Mantri
Moveast
Travel Coffee Book:旅游图片.
Designers Pics
Death to the Stock Photo:每月免费资源.
Foodie’ s Feed:高分辨率.
Mazwai:高清视频.
Jéshoots: 现代图片.
Super Famous:荷兰设计师 Folkert Gorter 的图片.
Picography: 高清图.
Pixabay:高清图.
Magdeleine:高清图.
Snapographic
Little Visuals:每周电邮免费图片.
Splitshire
New Old Stock:免费公共资源.
Picjumbo
Life of Pix:高清图.
Gratisography:高清图.
Getrefe
IM Free:免费资源集.
Cupcake:Jonas Nilsson Lee 的图集.
The Pattern Library:模式库.
Public Domain Archive
ISO Republic:高清图.
Stokpic
Kaboompics:获取免费图片的最佳方式.
Function
MMT:Jeffrey Betts 的免费图片.
Paul Jarvis:高清图.
Lock & Stock Photos
Raumrot:高清图.
Bucketlistly:旅行图片.
设计排版
TypeGenius:字体选择.
Font Squirrel:100%免费商业字体.
FontFaceNinja:字体选择浏览器扩展.
Google Fonts:字体优化
Beautiful Web Type:来自 Google web 字体目录的最佳字体.
DaFont:免费可下载字体归档.
1001 Free Fonts
FontPark:全球最大的字体归档.
Font-to-width:字体大小调整.
图标设计
Fontello:图标字体生成器.
Flat Icon:超过 16000 种字形向量图标搜索引擎.
Material Design Icons:Google 提供的 750 种开源字形.
Font Awesome:标志字体与 CSS 工具包.
Glyphsearch:图标搜索.
Withoomph: LOGO 设计.
Hipster Logo Generator:时髦 LOGO 设计.
Squarespace Free Logo:LOGO 设计.
MakeAppIcon:App 图标一键生成.
Endless Icons:扁平化图标.
Ico Moon:4000+ 向量图标.
The Noun Project:数千来自不同艺术家的字形图标.
Perfect Icons:社会化图标创建工具.
Icon Finder:图标搜索.
圆角图标: Doodle Set | Flat Set | Vector Line Set
Icon Sweets:60 向量 Photoshop 图标.
高品质背景音乐
Fontello:图标字体生成器.
Flat Icon:超过 16000 种字形向量图标搜索引擎.
Material Design Icons:Google 提供的 750 种开源字形.
Font Awesome:标志字体与 CSS 工具包.
Glyphsearch:图标搜索.
Withoomph: LOGO 设计.
Hipster Logo Generator:时髦 LOGO 设计.
Squarespace Free Logo:LOGO 设计.
MakeAppIcon:App 图标一键生成.
Endless Icons:扁平化图标.
Ico Moon:4000+ 向量图标.
The Noun Project:数千来自不同艺术家的字形图标.
Perfect Icons:社会化图标创建工具.
Icon Finder:图标搜索.
Icon Sweets:60 向量 Photoshop 图标.
希望小师姐能帮到你~
公众号
作品集分享Portfolio
2024年网页设计中的库 篇2
网页设计需要学习东西还是比较多。
第一阶段：设计软件学习：例如 PS 、AI、Dreamweaver、等等。
Photoshop简称PS，是由Adobe公司开发和发行的图像处理软件，Photoshop主要处理以像素所构成的数字图像
Adobe Illustrator(AI设计软件) Adobe Illustrator是一个绘图软件包，允许你创建复杂的艺术作品，技术图解，用于打印的图形和页面设计图样，多媒体，以及 Web 。Adobe Illustrator提供了广泛的强大绘图和着色工具，其中包括：一个刷子工具，椭圆工具，徒手素描工具，刀子工具，自动跟踪工具，护罩，斜变工具，路径图案过滤器，混合工具，颜料桶，滴管，对齐工具及墨水笔过滤器。Illustrator有强大的图形处理功能，支持所有主要的图象格式，其中包括PDF和EPS。这个程序让你进行广泛的印刷控制，并可以支持工业标准的 Adobe 插件。
Dreamweaver ：一套针对专业网页设计师特别发展的视觉化网页开发工具，也是目前最新版本利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。本套教程结合目前网页中应用到的各种效果和技巧,全面讲解如何用Dreamweaver CS6去完成网页页面的排版设计，同时配合生动实用的案例使您更容易、更轻松掌握Dreamweaver CS6，帮您成就网页设计师的梦想.
第二阶段：网站的概述、网站的制作及设计、web 网页设计 专题页面设计 电商知识 企业网站制作 、后台系统设计、移动端页面设计。
第三阶段：编程语言的学习html 、 css 、 js 、 html5 、 css3 JavaScript 等等
这些编程语言都是开源的在网站很容易找到学习教材，但是要学好用好还是要通过不断的实践。
第四阶段：比较高级一点前端语言。
jquery:javascript框架，javascript函数库，极大简化了javascript。bootstrap:一个用于快速开发 Web 应用程序和网站的前端框架。
AngularJS: 是一个 JavaScript 框架。
JSON: 是存储和交换文本信息的语法.
Ajax: 可以用于创建快速动态的网页。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Angular 2:是一个开源的JavaScript框架
React: 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI .
LESS:是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。是一种动态样式表语言，扩展了CSS的功能
Vue.js ：是用于构建交互式的 Web 界面的库。
Node.js ：是运行在服务端的 JavaScript。
如果这些你都能有所掌握那么你将慢慢的走上编程之路了。
2024年网页设计中的库 篇3
先回答个问题吧：
A.设计，你是一名有美术基础的学生，有一定艺术基础。
B.制作，你是一名理工科学生，有较强的逻辑思维能力，已经具备了成为一名程序猿的觉悟！
如果你选A：那好吧，你要学习的方向很清晰，由于艺术功底的BUFF加成，你可以很享受工作。你需要学习以下内容：
1.HTML超文本标记语言：虽然HTML也被称为语言，但实际上更应该被称为标签标注，非常简单容易。目前正在使用的是HTML5标准，我觉得学习起来更简单。
发一个参考教程链接，可以先了解一下。
https://www.w3school.com.cn/html5/index.asp
2.CSS层叠样式表单：虽然HTML可以制作出一个功能完整的网站，但他是没有被“美颜”的，要想让你的网站变漂亮，至少要学习这个技术，还好，也不难。
参考教程如下链接：
https://www.w3school.com.cn/css3/index.asp
3.Photoshop：哦，对不起，一名艺术专业的学生怎么可能不会Photoshop，这是必修课，所有网页上的图片、LOGO、Banner等都要用图像处理软件来制作、修改。
4.Axure软件：这个是网站原型设计软件。它可以快速的设计一个网站的用户界面，提交给用户反馈，然后快速修改，直到用户确认。你就可以将这个设计好的原型，提交给同伴去制作成真正的网站了。
好了，选A的同学结束了，恭喜你，靠天赋就能混的不错。
如果你选B：那好吧，恭喜你！格子衫、996、脱毛谢顶走起！学习规划图如下：
1.跑不了的HTML语言：必须一天学会！太简单了，无论是否能熟练应用，但必须一天内学会！学完这个，你就会飘飘欲仙，觉得网站制作如此简单！然后被套牢。
2.逃不掉的CSS样式：即便不完全学会，也要能完全看懂别人写的表单效果，未来是一定会用的！否则以后调试页面会给你逼疯！完全学会也只需要3天，但熟练掌握可能要数月！因为技巧很多，还要注意各种浏览器的坑要填。
3.终极奥义Javascript语言：这里是坟墓！是埋葬了很多人的万人冢！没有网页制作人员能绕的过去，掉进去就会被埋！是否能浴火重生就要看自己的决心了！如果能学会，后面一堆技术都难不倒你。
4.至少学习一个网页框架吧bootstrap：为了快速开发，已经有人帮你整个好了一个库，将前面三种技术整合到了一起，你可以很快速的开发出一个网站来。尤其是网页布局，很容易！2天学会。
至此，网页前台就已经差不多了！
有小伙伴觉得给你的压力还不够，还有一大堆要学的。没关系，你学到上面4个后，自己就会知道还学啥了！不用我们再教你了。
接下来是页面后台了！
要想让你的网站能从数据库中读取数据，并显示出来！或是将文本框中用户输入的数据存储到数据库中。那都要学习后台技术。作为一个初学者，建议你：
1.PHP语言：php是世界上最好的编程语言！（稍等老衲先去包扎一下伤口）。使用会用PHP，可以让你了解网站后台运行的全部机制！相对简单易用。尤其是作为学习阶段，还是可以接触一下的。但现在Java如日中天，用PHP的已经相对减少很多了。
2.Java语言：未来你想从事企业级网站应用的开发、安卓系统移动应用程序的开发，都离不开java！虽然我不喜欢它，但无疑，他是使用最广泛的！
3.. NET技术：好吧，也可以不学，可以跟以上两门语言划等号，可以实现全部的功能。但这个派系人单势微，不提也罢。
4.数据库技术：根据你选择的行业、语言的不同，你可能也会选择不同的数据库技术。这个太麻烦，有需求再细说吧。
5…
6…
这个列表是总也写不完的！一入猿门深似海！这辈子永远学不完！
就到这里吧！
2024年网页设计中的库 篇4
HI~小E来啦，数据可视化涉及很多复杂的要素，包括如何从海量数据中挖掘出有用的信息，找到其中的规律，通过图像、图表等形式直观地展示数据，为视觉设计寻求更多可能性等方方面面。刚接触数据可视化领域的新手很容易思绪混乱，我总结了几个最基础的几个关键要素，希望能够帮助你们进一步的完善数据可视化设计~
1.要明确你的目标和受众。在开始设计可视化图表之前，需要明确你想要传达的信息以及你的目标受众是谁，这将有助于你选择适合的图表类型以及进行合适的数据处理和呈现方式，也是数据可视化设计过程中最基础的。
2.选择合适的图表类型。不同的数据类型适合不同的图表，要根据想要表达的讯息来选择图表，例如柱状图适合呈现离散的数据，折线图适合表示数据趋势变化等。合适的图表类型可以更好地展示数据的特点和关系，让你事半功倍。
3.注意数据的准确性和可信度。在进行数据可视化设计时，确保数据的准确性是非常重要的。我们需要对数据进行清洗和分析，排除异常值和错误数据，确保数据的可信度。
4.注重设计的美感和易读性。一个好的数据可视化作品可以在保证数据准确、信息传递直观的同时，具有吸引人的外观，能够快速抓人眼球。利用颜色、字体和图形等元素，使图表更加美观且易于阅读，避免信息过载和混乱的布局，确保信息的传递清晰明了。
5.持续进行测试和优化。在设计完成后，我们需要进行测试和评估，是否达到了目标，并根据反馈进行调整和优化。这个过程也同样很重要，可以帮助我们不断的改进可视化作品，并且稳步提升数据可视化设计能力~
以上是基于大环境因素万事俱备的情况下，在数据可视化设计中的关键要素。在实际的设计过程中，除了设计过程中的要素，数据可视化设计必备的工具和前期准备也至关重要，优秀的数据可视化工具能帮你清洗数据、模板套用、调整整体风格等，从多方面的整体提升你的数据可视化设计体验和设计效果。
下面自荐我们公司的产品易知微EasyV数据可视化工具，进入2024年，已经是我们在数据可视化领域深耕的第8年了~易知微为袋鼠云旗下的数字孪生全资子公司，致力于将可视化、低代码和数字孪生技术相融合，将物理世界全方位的数字化，实现一个真实的可以实时感知和管理的数字增强世界。用一句话总结，就是低代码高质量的数字孪生可视化平台~
easyv.cloud/?t=toutiaomf
下面我从几个方面，简单的介绍一下，为什么能叫做低代码、高质量，又有什么利于数据可视化和数字孪生的产品优势，能够在行业内脱颖而出，获得众多合作伙伴的青睐。
EasyV获得市场的广泛认可低代码
纯界面化工作台，托拉拽式搭建应用，有效降低开发成本和配置项修改，需求变更维护成本低，零代码就能轻松搭建可视化应用。
可视化编辑器
高质量
在线海量模板、设计素材、主题资源等，行业模板开箱即用。内置资源插件一键选择，即将开放创作者计划。平台内嵌图表、地图等丰富的二维组件业务人员能直接搭建。提供3D地球、3D园区、3D城市快速构建三维场景，支持第三方组件自定义开发。
组件库
更多的详细模板查找咨询，可以进入官网素材广场进行了解~
easyv.cloud/?t=toutiaomf多数据
支持实时数据接入，对接常见数据库、API、静态数据，在线完成数据格式转换。
增效益
支持常用数据联动、事件交互、多终端交互，提供可视化交互节点管理，与传统代码开发数据可视化对比，提升项目交付效率，降低时间、人工成本。
享服务
团队提供可视化设计定制服务，企业版、尊享版客户可享受社群、1v1咨询服务。
免费试用期间：运营、产品、设计、技术人员专业一对一拉群指导，解答疑惑。
easyv.cloud/?t=toutiaomf
可视化学院：「免费视频课程」⬇️：
easyv.cloud/video-center
想要了解更多数字化相关的知识信息，查看更多的高质量、精美数字化转型模板案例参考，欢迎关注小E~
2024年网页设计中的库 篇5
现在的网络有非常丰富的资源，但因为它信息量过于丰富，如果你缺乏对一些基本的搜索原理和技巧的了解，往往需要花费比别人更多的时间，并且很难想要你想要的东西
套用老罗介绍 OneStep 时说一句话：
能用两三步走完，就不要用四五六七步，人生苦短，珍爱“生命”。
今天主要从以下几个方面和小伙伴们分享一些经验心得，也欢迎大家在文末留言区分享交流各自的心得
搜索：素材的搜索与下载集成：将下载的资源保存，集成为个人资源库整理：归类，去重，内容梳理等工具：效率资源整理工具
Part 01
素材搜索及下载
搜索，这是每个人必备的技能
所以首先就一些搜索技巧或者可以说是思路开始分享
关键词精度定位
在搜索资源前，你需要知道自己搜索的是什么
在为设计搜集素材前你需要对你的设计进行分析，和关键词提取
比如老板给你布置的任务是做出图下图风格的设计图
所以先对这些图进行分析，这些图的共性以及特点
比如，所有的图片都是与数据相关，搜索时可以尝试“图表、数据”一类的关键词
再看这些数据都是以图像的形式进行表现，所以还可以搜索“信息图、可视化、数据可视化”等
将这些关键词根据搜索结果的提示，一步步筛选，更换直至找到我们想要的结果。
关键词延伸
搜索后发现“信息图表”关键词是我们想要的结果，
这时我们可以还它的同义词/近义词（关键词发散/联系），更换语言搜索
比如搜英文单词“infographic”、“Information graph”等
过程中还可以不断的进行筛选
关键词头脑风暴法
有的时候，你只有一个关键词，你可以对这个关键词进行头脑风暴，进行发散
如中秋节马上就要到了，老板让你做一个“中秋”为关键词主题的设计，设计元素你可以从饮食，习俗，意向象征等进行发散思维如
圆月、月饼、团圆、嫦娥、桂花等等
善用搜索引擎
有了搜索的“关键词”内容后，善用搜索引擎可以达到事半功倍的效果
一次完整的搜索流程分为 4 部分：搜索 » 检索 » 筛选结果 » 选择结果
图片来源：google 图片搜索
搜索表达式
搜索表达式适用于绝大多数引擎，可以极大的提高你的搜索效率和准确率
以图搜图
有时候，并不是所有的素材你都知道关键词，在不知道关键的是“以图搜图”是个高效快捷又简单的方法
谷歌图片搜索
百度图片搜索
专业网站下载
近来人们的版权意识越来越强
知道你们担心直接使用搜索引擎搜到的图片可能会有版权问题
这些好用的，无版权可商用可下载的资源网站也已经给你们打包整理好了~
点击标题或图片就能带你去~
哪里可以下载 PPT 中常用的透明背景 PNG 图片？ - iSlide的回答 - 知乎 https://www.zhihu.com/question/309786320/answer/579984682
平面设计师是如何找素材的？ - iSlide的回答 - 知乎 https://www.zhihu.com/question/23914832/answer/675085644
你用过的最让你震惊的网站有哪些？为什么？ - iSlide的回答 - 知乎 https://www.zhihu.com/question/20030360/answer/653977552
9个超赞高质量免费图片网站
Part 02
打造个人资源库
01/ 本地文件：规范文件夹资源归档
本地文件优点安全稳定，不用担心网络不稳无法下载问题，随用随取
本地文件不足（不借助工具时）素材数量越来越多，查找越来耗费时间占用内存/移动硬盘，若无备份，一旦丢失无法找回整理过程耗费时间，过时素材需要定期清理
将素材下载到你的本地电脑，并不是结束而是开始
相信我，一开始不养成一个好的文件整理习惯，等资料越来越多，你会越来越窒息的
文件夹整理小技巧
只收集，不整理，好的资源。。。。用的时候你也找不到
每个人的职业领域不同，所以只提供大致的经验思路以供参考
文件夹及文件命名非常重要，可添加序号、时间等标签根据文件的性质或目的进行体系化归类
以公众号推文资料的整理为例，命名格式为
序号 + 时间 + 标题
序号：（案例中的“第几周”）可以呈现优先级的顺序，查找时更加轻松。时间：微信文章时间顺序的特殊性，加时间可以更快的精准定位（个人习惯）标题：内容描述，一眼可以了解具体的项目内容
整体框架如上图
文件的排序排序方式习惯用“名称-递减”，因为文件夹已经设置了编号，递减排序后，最新的文件夹一打开就能看见，而不需要下拉，非常方便
操作：文件夹中鼠标点击空白处，右键“排序方式 » 名称 » 递减”
实际效果如下图，如果使用默认递增，文件夹越多，需要下拉的距离也越大
其他工作文件夹
经常做设计，时间久了自然而然慢慢就会形成自己的素材库，根据常用的将素材分成了图片、文字、配色、动画四大类
图片素材又根据图片格式分类比如：jpg、png、eps 等
然后在根据使用场景进行分类等等
每个人的习惯不同，文件的分类归档，终究还是要让自己方便快速的找到自己想找的资源，所以相关的制定规则一定要符合自己的使用习惯
02/ 线上资源库
线上资源库优点不受硬盘限制，只要有网络就能使用标签成熟，丰富，搜索方便每一张采集来的图片，都带有源链接，可以一键追踪
线上资源库不足点如果你正急着用素材，而这时刚好网站服务器崩溃，那滋味酸爽的头发都会保不住的。
操作
利用花瓣等图片网站的图片“采集工具”，建立在线图片素材资源库
安装地址及教程：http://huaban.com/about/goodies/
书签栏图片采集工具安装后会出现在浏览器的书签栏位置
使用时，只需在当前网页点击采集工具
然后可以看见图片的详细信息，点击图片可以采集到你建立的画板中
比如你在逛上文中提到的无版权可商用网站上看见喜欢的图片，你就可以采集，然后建立一个“FREE|可商用”的画板，这些图片使用时，不需要担心版权问题
画板（可理解为文件夹）可以根据你自己的实际需要建立
也可以关注其他人建立的优秀画板
当然，你建立的画板也可以被别人搜索关注，有些图片网站支持将画板设置为“公开画板”或“私人画板”，看你具体的需求。
Part 03
本地文件内容快速搜索
有了这些助攻神器，你要找的资源一“喊”就应
即使你的文件夹乱成一坨不可描述，也能轻易找到你需要的
PS：插播一条，这个时候，文件的命名很重要
listary
http://www.listary.com
Liatary 是介于搜索工具、快速启动工具和文件资源管理器之间的软件。
可以快速查找任意文件，快速启动任何程序
搜索时直接首字母匹配
搜索
作为Listary最强大的搜索功能之一，只需从Windows操作系统环境中的任何位置开始输入所需文件或文件夹的名称。“按键查找”功能会立即打开一个列表浏览器窗口，其中包含匹配的文件，文件夹或应用程序列表。
通过磁盘搜索，可以快速查找系统中每个驱动器上的文件和文件夹。只需打开资源管理器窗口或开始在现有窗口中输入，搜索将迅速在连接到系统的任何驱动器上快速找到正在寻找的内容。
启动应用
只需单击两次Ctrl键，即可键入要打开的程序或应用程序的名称
例如，单击 Ctrl 两次，然后键入“Word”，Listary 将打开 Microsoft Word 。
收藏
可以将文件夹添加到“收藏夹”部分，并通过单击按钮浏览窗口历史记录以便于访问。
Everyting
http://www.voidtools.com
一款快速搜索磁盘文件的软件，以搜索速度极快而被大家所熟知。官网描述为“基于名称实时定位文件和目录（Locate files and folders by name instantly）”。它支持中文，体积小巧，界面简洁易用，快速建立索引，快速搜索，同时占用极低的系统资源，实时跟踪文件变化。
提供 2 种使用版本：直接安装在电脑上便携式安装，即可以下载到U盘，随插随用
Everything 默认是全盘搜索的，搜索结果按照文件夹在前，文件在后的顺序排列。
切换预览视图
DocFetcher
http://docfetcher.sourceforge.net/en/download.html
一款中文免费的本地资料搜索软件，是针对文件内容进行索引的工具。
DocFetcher是一个免费开源且跨平台的桌面文档内容搜索工具：它能遍历你所有的文件内容，进行全文搜索，类似百度硬盘或Google硬盘。
基于索引: 由于大量负载情况下直接搜索文档很缓慢，DocFetcher需要创建索引来加速搜索。不同于百度硬盘和Google硬盘，你可以针对自己希望搜索的文件夹建立索引。初次创建索引可能花费一些时间，但是一旦建立好就可以重复使用。
1.搜索栏
2.搜索结果显示区域
3.搜索结果中当前所选文件的纯文本预览。文件中的所有匹配项都以黄色突出显示。
4.按最小和/或最大文件大小过滤
5.按文件类型过滤
6.按文件位置过滤结果
7.使用帮助
中文界面
创建索引: 启动软件后，在左下角的“搜索范围”区域里右键，选择从...创建索引来选择要索引的文件夹，按执行确定并开始索引（文件数较多的话可能要等一段时间），当索引完成之后就可以进行搜索了！
搜索: 在搜索栏输入要搜索的内容并敲击回车即可查询。
以上，我是iSlide哥布林，转载请注明出处。
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 是一个简化这个工作的库。建议你只在有链接的地方使用下划线，这是大多是网站都遵循的规律，如果不这么做的话，可能会引起误解。