Advertisement
  1. Web Design
  2. UI Design
Webdesign

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

by
Difficulty:BeginnerLength:MediumLanguages:

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个不同图案中选择,具有相当的多样性(鉴于所提供的图案数不多)。

你也可以通过如上代码,下载未写样式的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开发者!

Envato qr branded
关注我们的公众号
Advertisement
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.