Advertisement
  1. Web Design
  2. UI Design

10个值得尝试的工具,助力你下一个WEB项目!

Scroll to top
Read Time: 1 min

Chinese (Simplified) (中文(简体)) translation by Jeff Lu (you can also view the original English article)

作为一个WEB开发者或是设计师,下面这些工具值得你在下一个项目中尝试。 这个清单不求详尽,也不是所谓的某某“前十名”,仅仅是简单介绍一些“新式武器”,我非常希望你喜欢这些新工具,让我们开始吧!

1. 检查

Inspect 是一个应用,它能在您的设计文件和工具之间完美同步。它帮助您轻松地在Sketch、Inspect和InVision 之间维护设计文件,通过一次点击就能保持完全的同步。

Inspect 弥合了设计和开发的裂痕。它可以非常轻松地在你设计时自动生成代码,并提供尺寸、颜色和其他设计资产。它还能在维护最新的项目信息和记录的同时,与消息系统进行协作。

你需要从Sketch起步,安装完Sketch后你还需要Craft,Craft是一套插件,它让你在设计时就考虑到实际的数据,并且允许在InVision和Sketch之间进行同步。 你可以从inVision创建一个新的项目,然后切换回Sketch,我还建议你了解一下inVison Studio

2. Archetype

Archetype 让排版设计变得简单,它使用浏览器中的谷歌字体;它使用一系列最佳实践,比如创建模块化扩展,创建一致且可重用的基线网格。

所有用archetype设置的样式,都能生成开发者友好的代码,以便轻松切换。

允许用户导出到CSS或Sketch,因此改变和更新都是即时且易分享的。 你还可以下载您所选择的字体集用于设计,可以使用谷歌帐号保存项目并随时返回。

3. Probot

如果你使用版本控制,在开源项目上工作,或在团队成员中进行代码评审,Probot堪称你的梦中情人。Probot是一套社区驱动的应用,可以通过Github自动化和改进你的工作流程。

你可以浏览所有的开源应用,或者构建你自己的应用。目前一些应用提供是过时的,自动关闭在项目中累积的过时的issues和pull request,或提醒你为项目问题和团队成员创建提醒通知。

专注于你的构建,一个简洁的API(基于最新的ES6特性),应该隐藏你使用GitHub和Node.js时无需关心的细节。

4. PSD to Sketch

你曾经碰到PSD转Sketch的需求吧?那你来对地方了。Avocode(又一个同样值得尝试的工具),出色地为社区提供了一个免费工具来完成此类工作。 浏览器打开这个地址并上传你的PSD文件,这有一个转换过程支持的功能清单及路线图

同时谨记:Photoshop和Sketch是完全不同的工具,它只能转换二者(Photoshop和Sketch)都能创建的设计元素。 它不能转换或模仿Sketch中没有的Photoshop功能。

5. Cloudinary 网站速度测试

优化图片可以显著提升网页加载速度,从而提升用户留存度和满意度。 Website Speed Test 是一个图像分析工具,它能使用URL实时扫描任何网站。 它可以提供详细的优化方案:如何改变图像尺寸、格式、质量和编码参数等,才能提升页面加载速度。

结果可以共享,一旦分析完成,每一个分析结果中标注的图像都可使用优化过的格式(或webp、jpeg-xr)下载。

要了解这个服务更多的信息,请访问他们的关于页面,顺道还可同时了解一下 Cloudinary CDN服务。

6. Animista

Animista提供一系列预先制作好的CSS动画,根据需要调整,然后提取你需要的,拷贝生成的代码或下载单独的CSS文件使用。

可以点击心形图标收藏喜欢的东西,或点击漏斗图标浏览其它收藏。Animista提供各种预制和定制选项,以微调你的动画序列,包括3D选项和典型的2D转换。 编码可被压缩,还可通过Autoprefixer加工来获得最佳代码应对浏览器支持。

7. Hero Patterns

Hero Patterns是可用于web项目的可重复SVG背景图案集合。每一个背景图案都被转换成可重复(无缝拼接)背景,而且以base64编码,可在CSS文件中使用。 当你做设计决策时,可调整个性化属性如前景色,背景色,前景透明度。

目前这个应用可让你在87个不同图案中选择,具有相当的多样性(鉴于所提供的图案数不多)。

1
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z" /><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z" /></g></g></svg>

你也可以通过如上代码,下载未写样式的SVG。对于不想使用base64或进一步自定义图案者,这简直太棒了。

8. Cushion

Cushion让经营自己业务的自由职业者省心,它有助于提供更好的洞察,并且给“每天颠沛如乘过山车一样的自由职业者”带来平静。

它还提供14天免费试用(无需信用卡),如果你愿意继续使用,最低月费用从5美元起步,即所谓的“月光”计划。这个应用为你的需要做好了准备。

  • 项目计划
  • 费用跟踪
  • 电子表格导出
  • 发票
  • 发票跟踪
  • 月度收入视图
  • 以及更多……

Cushion正在考虑将来出一款移动应用,但当前还未提供,因为重点是打造一个功能齐全的web应用。如果你特别关心银行帐户集成(并以此为关键功能),不幸的是这个应用还没有银行feed,不过你可以通过CSV文件导入你的银行数据。 不妨自己试一试,没什么可损失的。

9. Launchy

Launchy是一个可访问的模态窗口,不依赖jQuery,仅27.7KB。

关于这个工具有几个值得注意的特性:

  1. 运行后,键盘焦点转移到模态窗口
  2. 模态窗口是通过可选的模态标题来描述的
  3. 活动/可见时,在模态窗口中捕获键盘焦点
  4. esc键关闭窗口
  5. 悬浮鼠标click关闭窗口
  6. 窗口关闭时键盘焦点回到启动元素
  7. 可增加定制的关闭控制
  8. 增加定制的控制,以发送焦点到页面上其他位置
  9. 适合Windows高对比度主题的透明边框

Launchy在它生成的元素中还提供许多CSS类以便定制样式,查看style.scss文件了解类名,查看示例文件了解如何为模态窗口写样式。 此项目还可通过npm安装:npm i launchy-modal-window 。作为一个可访问模态窗口,干得漂亮!

10. Formcore

Formcore是一个Filament小组的开源项目(自述为“轻量级验证表单),是一系列的表单模块,如显示/隐藏密码、字符计数、信用卡号输入及验证、用户输入时扩展为多行的文字块输入块,以及更多。

还有很多其他功能如:将表单字段<input type="number">行为规范化,强制 maxlength属性,解决Safari 6和Firefox桌面版中的bug<input type="number"> 。

如果在web上创建表单(打赌你一定会),那么这可能是一个很好的尝试,不如就在你下一个涉及表单输入的项目中试试吧。

结论

终于,文章接近尾啦,你有什么想法?有没有一两个火花点燃了你的兴趣?或者你完全无感?有没有其他建议?在评论里留下您的高见吧。最后,祝福每一个web开发者!

关注我们的公众号
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.