面向开发者的最佳设计资源 - 第二部分
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
您是否正在寻找最佳设计资源？每个开发者都应该收藏这个资源合集，因为它包含了打造引人注目、美观大方的项目所需的最丰富资源。
介绍
每个开发者的工作都离不开产品设计。这不仅仅关乎外观美观，更关乎引人入胜的视觉效果和整体呈现效果。与其耗费大量时间和金钱进行冗长的设计流程，不如充分利用现成的组件和功能资源，打造出色的产品。
目录
无障碍资源
清单
- 18F 无障碍指南检查清单— 面向开发人员的 WCAG 2.0 合规性检查清单，以优先级为导向
- HHS.gov 的创建无障碍 PDF 的清单——对于非应用程序或网站的内容进行无障碍设计也很重要！
- Vox Media 无障碍指南清单——设计师、工程师、项目经理、质量保证人员和编辑人员的最佳实践（附有更多阅读资源；非常适合发送给不同团队的同事）
指南
- 18F无障碍指南——由18F政府机构提供的无障碍资源和原则中心
- 同理心提示——一份开源的思考与挑战清单，旨在帮助培养同理心
- Google Material Design 无障碍原则——关于颜色、声音、动态、布局、文案、层级结构、焦点和实现方面的实践
- 包容性设计原则——由帕西埃洛集团的领先专家提出的七项以人为本的清晰原则
- 微软包容性设计原则——微软关于设计无障碍和包容性体验的指导方针，包括一份详细的手册（.pdf），其中包含精美的可视化图表，以及用于头脑风暴时考虑因素和挑战的活动卡片。
行业领袖、教育工作者和顾问
在线课程
- Pluralsight“满足Web无障碍指南”课程——[付费]——提供代码示例的实用课程，帮助政府/教育项目满足Section 508和/或WCAG 2.0的要求。
- Udacity 的 Web Accessibility 课程，由 Google 提供——[免费]——一门注重前端设计和开发的实用课程，内容涵盖标记语言和视觉样式。
模式/组件库
要求和标准
- 🌐 WCAG 2.0 — W3C 的“Web 内容无障碍指南”Web 标准规范
- 🇺🇸《美国残疾人法案》(ADA) 禁止对残疾人进行歧视。
- 🇺🇸 第 508 条款——《劳动力康复法》修正案，联邦层面强制规定联邦政府开发、采购、维护或使用的所有技术都必须对残疾人士无障碍。
- 🇨🇦 AODA — 安大略省残疾人无障碍法案，旨在使该省“到 2025 年实现对残疾人无障碍”。
测试工具和开发参考资料
- Accessible-email.org — 基于浏览器的语义分析，用于报告营销电子邮件中的无障碍和可用性问题错误
- 颜色调色板和对比度测试工具——列于“颜色”类别中👇
- HTML5 无障碍功能— 列出主流浏览器对 HTML5 功能的当前无障碍支持状态。
- pa11y — 用于程序化可访问性报告的命令行自动化可访问性测试
- tota11y — 可汗学院基于 jQuery 的语义分析工具，可以插入到页面中或作为书签小程序运行。
延伸阅读
- 无障碍设计胜利——一个展示无障碍网页设计和开发领域小胜利的 Tumblr 博客
- Awesome Accessibility — GitHub 上精选的优秀无障碍工具、文章和资源列表。
- 关于无障碍设计的书籍——列于“书籍”类别中👇
书籍和杂志
个人出版物
无障碍
- 《人人都能访问的网络》（A Web for Everyone），作者：Sarah Horton 和 Whitney Quesenbery，2014 年出版——提供实用建议和案例，帮助用户在不牺牲设计或创新性的前提下，构建易于访问的网络产品。
- 《包容性设计模式——将无障碍设计融入网页设计》（Heydon Pickering著，2016年）——构建和原型化无障碍界面的实用技巧和策略
历史
- 菲利普·B·梅格斯 (Philip B. Meggs) 著《梅格斯平面设计史》(Megg's History of Graphic Design)，1983 年出版——是关于平面设计史（主要涵盖美国和欧洲）的权威大学教科书。
独立执业、咨询、自由职业
- 《设计是一份工作》（Design Is a Job），作者：迈克·蒙泰罗（Mike Monteiro），2012年——关于推销自己和与他人合作的实用技巧。
- Dan Mall 于2016 年出版的《定价设计》 ——一本关于价值定价的简明而宝贵的参考书。
过程和心态
- 《艺术家的道路》（The Artist's Way） ，朱莉娅·卡梅伦著，1992年出版——关于创作过程的经典国际畅销书
- 弗兰克·奇梅罗的《设计的形状》（2012年）——有时富有洞见，有时令人难以忍受；这是一部关于为他人创造事物的沉思录。
- 《Sprint》（作者：Jake Knapp 等，2016 年）——一本内容均衡的书籍，包含细节、示例、清单和脚本，助您开展自己著名的 Google Ventures 设计冲刺。
用户体验和交互设计
- 《微交互：细节设计》（Microinteractions: Designing with Details），作者：Dan Saffer，2013 年出版——书中提供了产品功能内部及周围细微之处的简明示例。
用户研究
- 《恰到好处的研究》（Just Enough Research），作者艾丽卡·霍尔（Erika Hall），2013年出版——以通俗易懂、平易近人、条理清晰且幽默风趣的方式，剖析了设计研究这一庞大的主题。
出版商和分销商
- 《A Book Apart》 ——面向网站建设者的顶级简明指南
- Chronicle Books——一家位于旧金山的创新型设计成人及儿童书籍出版公司。
- Draw Down——收录了大量小型出版社出版的书籍和杂志，内容涵盖平面设计、文化、评论、艺术等领域。
- Gestalten——关于平面设计、艺术和文化的优质书籍
- 麻省理工学院出版社——每年出版数百本由顶尖研究人员撰写的关于技术、艺术和科学的新书。
- Rosenfeld Media——用户体验书籍、培训、研讨会、讲座和专家
- Smashing Magazine——来自数字设计从业者的价格实惠、实用性强的书籍
浏览器功能
Google Chrome 扩展程序和书签小程序
- Tachyons X-ray — 调试和将对象对齐到 8 或 16 像素网格
- 字体样本— 识别并试用网页字体 — 免费提供 3 个样本，或以 5 美元/年的订阅价格无限量试用。可通过书签小程序或 Chrome 扩展程序使用。
- WhatFont? — 检查网络字体的名称、字体系列、字重、大小、样式、颜色、行高和来源（如果托管在 Google Fonts 或 Typekit 上）
Google Chrome 开发者工具
- 动画时间轴和编辑——用于检查和修改CSS动画的强大工具
- 设备模式——使用常用视口尺寸或创建自定义预设来测试响应速度
- 全屏截图——在设备模式下即可完成——无需额外浏览器扩展程序！
- 网络性能——分析资源请求并模拟移动体验
画笔
- Kyle T. Webster——最适合绘制和添加细微纹理的 Photoshop 画笔（但如果没有压感绘图板，它们的作用不大）
- RetroSupply — 适用于多种用途的 Photoshop 和 Illustrator 画笔，包括添加大型（2000 像素）纹理。推荐套装：Standard Issue Brush & Texture Bundle、Standard Issue Subtle Brush Kit、VectorFuzz
- Shauna Lynn Panczyszyn 的“手写字体工具箱” ——专为数字字体设计而制作的 Photoshop 画笔，更多特定套装请点击此处。
- Syd Weiler——精美的Photoshop笔刷，主要针对有机形状和纹理。
颜色和配色方案
- clrs.cc — 非常漂亮的用于原型设计的默认颜色
- Coolors — 交互式调色板生成器
- Google Material Design 颜色——从 Google Material Design 调色板中选择所有色调，查看每种颜色的明暗度，并测试其与白色和黑色文本的兼容性，以确保其易于访问。
- Kuler — Adobe 调色板资源
- Paletteable——交互式调色板生成器
- Sip是一款适用于 macOS 和 iOS 的颜色选择器应用，允许您保存自定义调色板。
- 维基百科上关于颜色色调的分类——如果你想深入了解的话
易于使用的调色板
- Randoma11y — 一款无障碍的文本和背景组合随机颜色生成器
无障碍测试工具
- Color Oracle — 开源 macOS 色盲模拟器
- 对比度分析器——一款开源的 macOS 吸管工具，用于文本/背景可访问性测试，显示失败/AA 大/AA/AAA 结果
- 对比— [付费] — 极简精美的 macOS 菜单栏吸管工具，显示失败/AA 大/AA/AAA 结果
- Hex Naw — 输入最多 12 个十六进制代码，以测试整个颜色系统的可访问对比度。
- 在线对比度检查器——输入文本/背景十六进制代码进行无障碍对比度测试
- Spectrum——一款谷歌Chrome浏览器扩展程序，可即时测试网页是否存在不同类型的色觉缺陷。
字体
目录和市场
- Google Fonts——数百种免费网络字体，由Google托管或用户自行托管，可通过GitHub仓库下载，并带有单独的许可证。
- MyFonts——汇集了来自各种字体公司的数千种字体，包括一些试用字体和免费字体系列。（适合搜索和测试，但最好还是直接从字体公司购买！）
- TypeKit包含在 Adobe CC 订阅中，部分字体和字体系列仅适用于桌面或网页用途。更多字体可通过 Typekit Marketplace 单独购买。
- Type Network——精选独立字体公司出品的超高品质字体
- YouWorkForThem—— “原创创意市场”中的数千种字体
个体铸造厂
- A2型
- 阿文代尔字体公司
- β型
- 大胆星期一
- 版权页
- 商业类型
- 道尔顿·马格
- DS类型
- 字体局
- 字体字体
- 喷泉
- GrilliType
- 霍夫勒公司
- 家纺
- HvD字体
- 又一家铸造厂
- Lineto
- 马克·辛普森
- 好的
- P22
- 流程类型
- 苏迪波斯
- 设计师铸造厂
- TypeTogether
- 字体库
- 村庄
图标和表情符号
- EmojiOne — [免费和付费] — 表情符号集，提供免费和付费授权选项；可下载 png、矢量图和字体文件
- Emojipedia — [免费] — 囊括所有表情符号
- Google Material Design 图标— [免费] — 900 多个来自 Google 精美设计语言的开源图标
- 名词项目 (The Noun Project) — [免费和付费] — 可使用知识共享署名许可协议 (Creative Commons tribution) 进行使用，或以合理的价格购买无需署名版本；汇集最佳品质词汇。
- SymbolSet — [付费] — 按主题和样式分类的超高质量图标字体
- 矢量表情符号— [免费] — 以矢量图形式重新制作的 iOS 表情符号，提供分层 PSD 或 Sketch 文件格式。
灵感与批评网站
品牌标识
插画和艺术
- Boooooooom——艺术、插画、设计、摄影访谈和专题报道
- Jacky Winter——插画团体
运动
- 咖啡之后的葡萄酒——精选最佳动态图形、动画和视频的频道
印刷、排版、包装、艺术指导
- 菜单的艺术——餐厅专属印刷菜单设计案例研究
- 设计灵感——摄影、平面设计、酷炫作品集、Pinterest风格
- FPO——印刷设计案例研究
- 图形学——前沿与复古边缘美学案例研究
- It's Nice That——全球创意灵感
- Mind Sparkle 杂志——印刷、品牌、室内设计、工业设计专题
- 趋势列表——面向设计师的平面设计趋势
排版
- Alphabettes——女性字体设计师的评论、研究和作品展示
- Fonts In Use — 最高质量的公共字体档案库，按字体、格式和行业进行索引
- Typographica——字体书籍和字体的评论与评述
- Type Wolf——精选网络上的字体设计案例，并提供优质指南和资源。
网页、移动端、产品
用户体验模式和组件
- Capptivate——以视频形式呈现的移动设计模式和组件
- Collect UI — UI 设计组件库，内容来自 Dribbble 帖子
- Empty Stat.es — 空状态设计
- 细节决定成败——那些令人愉悦、精心设计的用户体验组件，能带来巨大的改变。
- PTTRNS — 移动设计模式和组件
- Pattern Tap — 网站组件库
- UI Movement ——UI设计组件库和新闻简报，主要内容来自Dribbble。
- 无与伦比的风格——网站设计和交互组件库
视觉设计
- HTTPSTER — 网站设计作品集。按类别和风格排序。
- Lapa — 网站设计作品集。按类别和颜色排序。
- 单页网站之爱——仅展示单页网站的网站设计作品集。
- Pages.xyz — 数字产品营销和电子商务网站的网站设计作品集
- 优秀邮件设计作品集锦
- Siteinspire——精选网站设计作品的权威平台。可按类别、风格、主题或内容管理系统 (CMS) 排序。包含星标收藏。
- Site See——网站设计图库。按类别和颜色排序。包含精选的定制系列。
- Web Creme——网站设计作品集，更新不定期，自2005年上线以来一直活跃至今！
macOS 应用
发展
- Dash — [付费] — 即时离线访问 150 多个 API 文档集。
字体管理
- RightFont — [付费] — 可在您的 Mac 或 Dropbox/Google Drive 上预览、同步、安装和管理字体。
菜单栏应用
- LittleIpsum — [免费] — 快速生成 lorem ipsum 文本（
p还可以自动包装在标签中） - LICEcap — [免费] — 名字虽然奇怪，但却是最直接、最轻便的屏幕局部截图工具，可将屏幕部分内容保存为 GIF 动画（也适用于 Windows 系统）。
模型
- Facebook 设计— [免费] — 各种手持移动设备的手
- Graphicburger — [免费] — 实体产品模型和模板
- GraphicRiver — [付费] — 你能想到的任何产品模型
- Pixeden — [免费和付费] — 实体产品模型和模板
原型制作工具
- Adobe Experience Design — 包含在 Adobe CC 订阅中，用于创建线框图和交互原型。
- Atomic——一款用于移动或桌面交互或动画的原型设计工具
- Figma——首个实时协作界面设计工具
- Framer——一款基于 framer.js 构建的原型设计工具，用于移动和桌面应用程序的原型设计。
- InVision——一款适用于网页和移动设备的协作式点击式原型设计工具
- Marvel——一款简单易用的网页和移动应用点击式原型设计工具
- Principle——适用于移动和Web应用程序的动态设计原型工具
- 👆更多关于这些应用及其区别的信息，请访问 cooper.com
库存图形
- CreativeMarket——一个庞大的设计素材市场，提供各种质量的设计资源（包括字体和图库照片），非常适合需要重现特定风格或在特定领域进行创作的用户。
- RetroSupply——提供制作精良、价格合理的复古/怀旧风格素材
- YouWorkForThem——来自原创在线创意市场的酷炫纹理和图像
库存照片
- 消灭库存照片——[免费和付费]——每周通过电子邮件发送新照片集，高级计划提供更多照片和无限访问权限
- 免费摄影作品集——[免费]——由一位摄影师拍摄的照片，无需署名。大多数照片风格怪异，但有些可以保存到文件夹中以备后用，因为它们是免费的。
- Magdeline — [免费] — 类似于 Unsplash，部分图片采用公共领域许可，部分图片需要知识共享署名许可。
- Masterfile — [付费] — 图库照片，质量略高于 iStock。注册账户包含无水印高分辨率样片。
- Stocksy — [付费] — 高质量、时尚的生活方式付费图库照片（带水印的示例照片）
- Unsplash — [免费] — 首屈一指的时尚精美免费图库网站，没有任何附加条件
- 科技领域的有色人种女性— [免费] — 提供科技领域有色人种女性的照片，因为其他所有图库网站都无法提供这类硬核内容。
用户测试和交互式反馈工具
- 回顾——用户在使用您的网站/应用/原型/线框图时记录他们的屏幕、面部、声音和触摸操作。
- UsabilityHub——适用于对静态图像或一系列图像进行快速的5分钟定性、基于导航或基于热点的远程测试
- UserTesting——为您寻找参与者，运行可用性测试，并录制和存储真实用户在使用您的网站/应用程序/原型/线框图时表达想法的视频。
此列表由Skullface 和其他贡献者提供。
结论
希望这份清单对您有所帮助。如果您需要任何帮助，请在评论区留言。
👋 感谢阅读，下次见！
文章来源：https://dev.to/suhailkakar/best-design-resources-for-developers-ii-2g5a