网页制作工具（5个好用的网站设计工具）
有效的设计积累使我们事半功倍。养成随意录音的习惯，逐步形成自己的素材库，不仅可以在需要的时候快速获取灵感，偶尔复习时也会有新的感觉。字体识别工件：whatfont
当你想知道在精心设计的网站设计中使用什么字体时，你可以安装一个名为whatfont的浏览器插件。打开时，将鼠标悬停在文本上，可以快速识别字体、大小、重量、行高和颜色。对于不习惯使用控制台的朋友来说，它非常简单实用。最新版本的插件将于2017年推出，但它可以在大多数网页上正常使用。类似的产品包括字体忍者等。除了识别字体，您还可以收集和管理字体，可以根据您的需要选择这些字体。
地址：https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
2。用户体验设计档案：uxarchive
该网站收集世界一流科技公司的产品用户体验流程。例如，当你设计“忘记密码”的体验时，你通常会逐个打开不同的应用程序和屏幕截图。通过本网站，您可以根据场景快速浏览其他公司的示例，并比较不同的解决方案
地址：https://uxarchive.com/
3。灵感速记：flomo是一款非常轻量级的笔记工具，可以像微博一样快速记录一些知识片段。Flomo更注重主动创作和录制，而不是剪切和存储现有内容。目前，该产品的功能非常简单，但其背后的“卡片笔记”概念非常有趣。它提倡先快速积累卡片，然后通过标签和关联让结构显现，以积累知识的复利。感兴趣的朋友可以了解他们对“知识管理”的想法。
地址：https://help.flomoapp.com/weekly/orgin
当我们进入产品设计时，了解用户往往是最重要的前提和基石。大公司的团队通常有一个全职的用户研究团队来协助产品设计，但对于小团队来说，用户研究可能是一个属于设计师角色的过程。此外，即使有一份特别的研究报告，直接观察用户的行为和描述往往是最直观的，更容易洞察问题和机遇。以下是两种常见的低成本方法。用户反馈：Qimai
如果你的产品是一款成熟的应用，已经在各大应用商店上架，你可以通过一些第三方平台看到每个应用商店的评分、评论摘要、组成和趋势，还可以将你的应用与竞争产品进行比较。例如，我每天使用“齐买”可以通过微信订阅每日分数变化，或者导出指定时间段内的评论汇总表，以便进行更深入的检索和分析
地址：https://www.qimai.cn/
2。用户谈论的内容：微博
商店评级和用户反馈通常是有针对性的，其中大多数关注现有功能。如果你想了解用户在生活中如何使用我们的产品，他们在使用产品的过程中有什么情绪和感受，以及他们如何理解他们在使用什么，你可以在社交平台上搜索产品的关键词，通常会有一些有趣的发现。据说，早期微信剪刀石布的创意来自微博用户的分享
到了最熟悉的设计实践阶段。有很多设计工具。Sketch和figma也有相对丰富的插件市场。在这里，我们选择了一些我们每天使用的小工具来分享。明智地利用现有资源可以帮助我们展示最佳设计概念。网格渐变工具
a sigma插件，illustrator中强大的网格功能也可用于图中。梯度可以保存并多次重复使用
地址：https://www.figma.com/community/plugin/958202393377483021/Mesh-Gradient
2。Runner Pro
如果你主要使用草图，习惯于键盘操作，熟悉各种指令名，并且拥有完整的组件库，Runner Pro将是一个很好的草图助手。它的使用方式就像在MAC中使用系统焦点搜索一样。通过搜索框，您可以快速完成组件插入、指令运行、插件安装，并快速进入绘图板
runner的组件搜索支持中文，但多个关键字的模糊搜索仍然更完整地支持英文
地址：https://sketchrunner.com/
3。Blur插图插件
由巴勃罗·斯坦利设计的免费商业手绘风格插图库。任务建模有几十个选项。你可以自定义角色的头发、裤子、肤色等。你可以在不打开illustrator的情况下创建独特的插图。适用于操作说明、故事板、PPT等。需要梯子通道。
地址：https://blush.design/zh-CN
此外，越来越多的设计师开始使用figma的原型功能直接制作ppt。根据这一趋势，他们还提供相同系列的PPT模板和一键玩偶。姿势人体姿势参考
如果在自己绘制图形插图时很难掌握人体的运动和比例，则千万不要错过此插件式。这是我找到的最好的人体解剖和插图制作工具。Gal shir在Behance和dribbble上有很多粉丝，这是他在snapchat中担任插图画家时创建的软件https://galshir.com/pose/
5。动画曲线预览
精致的动画可以让体验更加温暖。该网站提供五个简单的网页布局和最基本的三组动画曲线。您可以选择最适合您的演示，以体验实际页面上不同动画曲线的感觉。底部还可以调整特定参数以达到所需效果
地址：https://easings.co/
在需求过程中，我们需要与上下游反复沟通。在这个阶段，设计草案是解决方案和中间产品的视觉展示。首先，我们应该满足方便沟通和传播的需求。方案最终确定后，交付就是产品的设计蓝图。确保方案完整性的第一件事是，它可以被分解并实施。设计项目模板这是Dropbox团队组织的设计项目模板，可以从sigma社区复制。每个设计草案包含项目基本信息、负责人、进度和其他概述信息。特别是对于直接与开发和产品经理分享西格玛手稿的团队，它保留了相关的上下文信息，并提高了项目沟通的效率。地址：https://www.figma.com/community/file/855188719022244530
2。设计协作工具xshow是isux开发的高效设计协作平台。通过它的官方草图插件，你只需点击一下就可以将设计草图上传到云端，xshow将保留完整的版本记录和成员操作。上传到云端并与开发人员共享后，您可以在线查看注释并在多个端点进行预览。除了这个团队，还可以管理XSW控制权限的及时性，这在敏感项目的对外合作中可以说是非常实用的
地址：https://xshow.tencent.com
3。还原自检窗口大小调整器+zeplin
窗口大小调整器是一个chrome插件。正如它的名字一样，它可以将浏览器窗口固定到指定的大小。它可以用于检查网页的自适应策略，或剪切特定大小的图形
我们经常将其与注释工具zeplin的叠加功能一起使用。将浏览器设置为与设计草稿相同的大小，然后堆叠半透明的设计草稿，以查看网页是否恢复到位以及需要调整的位置。一幅画胜过千言万语。我不再害怕发展。我哥哥说“我看不见”，这大大提高了沟通效率和团队和谐气氛。
使用示例：上层是设计草稿，下层是相应浏览器大小的实现效果。
窗口大小调整器地址：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
泽普林地址：https://zeplin.io/
4。如果图像压缩工具
仍然采用非在线的传统交付方式，则通常需要将其作为图像导出并发送给另一方。有时，整个过程的输出网页设计或交互式手稿的大小很大，因此可以再进行一步压缩。首先，合作伙伴更容易打开同步方案。如果批量处理需要减少60%或更少的图像空间，我们通常可以使用。然而，如果图像大小超过5米，使用上述两个应用程序需要很长时间，并且很容易失败。此时，您可以尝试在线压缩网站，即使是超过20m的大图像也可以稳定地压缩
地址：https://compresspng.com/
5。Rotato动态实体模型提供了许多常见的动态实体模型效果。只要你把你的设计草图放进去（图片或视频），你就能很快实现高端氛围的展示效果。它支持非常完整的苹果设备和一些主流安卓设备。效果包括界面反转、放大、滚动显示等。地址：https://www.rotato.app/mockups
设计上线后会产生什么影响？有效的验证可以帮助我们有目的地继续迭代优化。AB测试用户样本计算小工具
AB测试，也称为桶测试或批量测试。AB测试的实质是将平台的流量分成几个不同的组进行实验，然后观察不同组的用户数据指标，如点击率、次日保留率、人均观看时间等核心指标，最后选择一个更有效的实验组上线
，然后设计实验，有必要澄清实验的目的。根据假设方案中元素的数量，AB测试可分为单变量测试和多变量测试。举一个简单的例子来解释如何将流量分成单个桶。我们推荐这个免费的小工具来分配流量。根据实验的预期结果和大量用户，我们可以确定实验所需的最小流量
地址：https://www.evanmiller.org/ab-testing/sample-size.html以腾讯文档中按钮的点击率为例。目前，市场点击率为5%，实验预计将增加0.5pp
该工具还可以在许多其他维度配置流量，感兴趣的学生可以进行深入研究。我们希望在设计时，大胆地、创造性地提出假设，然后进行科学验证，以获得更有效的设计。字体识别工件：whatfont
地址：https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
2。用户体验设计文件：uxarchive
地址：https://uxarchive.com/
3。物料管理：Eagle地址：https://cn.eagle.cool/
4。灵感速记：弗洛莫地址：https://help.flomoapp.com/weekly/orgin
5。用户反馈：齐迈地址：https://www.qimai.cn/
6。用户谈论的内容：微博地址：https://weibo.com/
7。网格渐变工具
地址：https://www.figma.com/community/plugin/958202393377483021/Mesh-Gradient
8。Runner Pro地址：https://sketchrunner.com/
9.<模糊>>插件地址：https://blush.design/zh-CN
10。姿势人体姿势参考
地址：https://galshir.com/pose/
11。动画曲线预览地址：https://easings.co/
12。设计项目模板地址：https://www.figma.com/community/file/855188719022244530
13。设计协作工具xshow
地址：https://xshow.tencent.com
14。恢复自检窗口大小调整器+zeplin
窗口大小调整器地址：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
泽普林地址：https://zeplin.io/
15。图片压缩工具地址：https://compresspng.com/
16。Rotato动态实体模型地址：https://www.rotato.app/mockups
17。AB测试用户样本计算小工具
地址：https://www.evanmiller.org/ab-testing/sample-size.html
