20个先进的网络工具现在尝试

网络变化非常快,你不能跟上新的持续发布步伐网页设计工具和技术。然而,加入最新的发展而不是等待它们成为主流是有好处的。如果有一个让你感到沮丧的问题,或者你认为可以变得更容易的事情,那么有人会想出一个解决方案。您只需要查看可用的前端框架的扩散,作为您所选择的级别的证据。

这种变化的速度和选择范围适用于网络的所有领域。在本文中,我们将介绍一些最新的设计工具,开发工具,库和框架。根据您的使用情况,您可能不希望过于前沿(特别是对于库和框架,因为它们偶尔会缩短使用寿命)。但最终要做的最好的事情就是去做实验。

01. 清单

Get realistic placeholder data

获取逼真的占位符数据

如果您正在设计页面并且厌倦了将Lorem Ipsum放置在任何地方,列表可能正是您所需要的。目前处于测试阶段,Lists是所有不同类型的实际数据的集合,您可以使用它们来填充模型。想要在页面上使用英国地址列表,还是假信用卡号码?这些都是可用的。列表涵盖了各种不同的数据类型,您可以为每个数据类型下载JSON格式的数据,并在评估原型时帮助用户理解页面中的上下文。列表背后的团队邀请参与GitHub上如果你有新的数据类型,你认为应该添加。

02. 发射台

Automatically build working HTML and CSS from your Sketch designs

从Sketch设计中自动构建工作HTML和CSS

你很可能已经将Sketch用于网络和移动设计,因为它很快就会成为市场上最受欢迎的工具之一。但到目前为止,它纯粹是一种设计工具 - 然后您必须将您的设计作为一个真实的网站进行构建。

Launchpad是一个草图插件这使您能够从设计中自动构建工作HTML和CSS,并将其作为实时站点发布。这是让静态网站启动和运行的一种非常快捷的方式。虽然不支持动态JavaScript功能,但您可以包含表单以捕获用户的信息。

如果您乐意使用Launchpad域,则可以免费使用,但如果您想要隐藏自定义域和Launchpad的品牌,则可以使用商业产品。

03. TrueUX

A new approach to wireframing

一种新的线框图方法

TrueUX旨在提供低保真度的替代方案原型制作工具比如Balsamiq或OmniGraffle。它仍处于早期阶段,此时仅作为在线沙箱存在。然而,它引入了一些独特的概念,为传统提供了一个有趣的旋转线框工具

TrueUX沙箱提供了一个文本命令界面,使您可以通过键盘输入简短命令来创建和修改原型,而不是单击并拖动屏幕上的元素。这引入了一个小的学习曲线,但理论是,一旦你熟悉它,你应该能够更快地做出改变。

如果你喜欢文本命令驱动的线框图的概念,那么值得关注这个工具的进一步发展,因为作者有许多其他的愿望。

04. FONTMAP

FontMap uses AI to group similar Google Fonts

FontMap使用AI对类似的Google字体进行分组

为页面或应用选择正确的字体可能很难。 Google字体是您可以在工作中包含的免费字体的绝佳来源,但也许您认为在易用性和可发现性方面存在缺失。

FontMap是一个有趣的实验,它使用AI将来自Google Fonts的字体组合在一起,向您展示可视化。这可能看起来很简单,但它解决了查找类似字体的常见问题。用户界面非常简单,您可以花一些时间在工具中检查它所布置的字体。完成选择后,只需点击一下鼠标即可继续使用Google字体并在工作中加入字体。

05. ReasonReact

Write React components using Reason code

使用Reason代码编写React组件

您可能不熟悉Reason。这是一种由Facebook开发的相对较新的语言,它使用OCaml提供类似JavaScript的开发体验。可以使用名为BuckleScript的引擎将原因代码编译为JavaScript,该引擎本质上是一个OCaml到JavaScript的编译器。

这在实践中意味着您可以使用语法组合静态类型的功能代码,语法结合OCaml和JavaScript的元素,然后将其编译为vanilla JavaScript。最接近的比较可能是TypeScript,它本身通过静态类型提供JavaScript的抽象,尽管语法明显不同。 ReasonReact对此进行了扩展,允许您使用Reason代码编写React组件,并由React的创建者创建。如果你喜欢React,这是一个值得一看的。

06. Adobe XD

Adobe’s answer to Sketch for UX design

Adobe对Sketch for UX设计的回答

它曾经在用户体验领域占主导地位Photoshop中插画可以说近年来Adobe已经失去了Sketch的地位。就在最近刚刚退出测试阶段,Adobe XD正试图赢回可能已经跳槽的用户体验设计师。

XD为其他用户提供熟悉的界面Adobe Creative Cloud产品,并提供交互式原型设计,无需插件。如今,协作功能 - 许多用户体验设计师的关键 - 据说将来会出现。

Adobe XD看起来正在成为一款非常好的产品,并且对于没有Sketch的Windows用户来说,它也可能特别受欢迎。然而,当然,它带有价格标签,并且可能需要更多功能添加来说服许多设计师切换。

07. 公共API

This aims to consolidate all the publicly available APIs

这旨在整合所有公开的API

随着你的学习如何创建应用程序虽然更复杂,但您可能会对各种API有所帮助。然而,为您的用例找到合适的API并不总是那么容易,更难找到可公开获得且可以免费使用的API。

它当然是一项正在进行的工作,但公共API页面旨在整合和记录所有公开API的列表。例如,如果您希望API获取天气预报,它会列出可用的天气预报,您可以选择使用MetaWeather,您可以立即看到它不需要身份验证。为了保持活力,需要持续的社区贡献以及时了解API的可用性。

08. 针线

Workbox makes it much easier to create Service Workers

Workbox使创建Service Worker变得更加容易

服务工作者是网络上最激动人心的新技术之一。它们允许现代Web应用程序在本地存储资源并提供脱机功能。但是,如果您尝试过使用它们,您会很快发现正确维护缓存是一个复杂的问题。这就是Workbox的用武之地。

Workbox是一组构建工具和库,旨在使创建Service Worker变得更加容易,从而更容易构建脱机应用程序。简单来说,您可以告诉它要缓存哪些资源,它将生成缓存和更新资源所需的服务工作者代码。当您开始使用离线功能构建更复杂的网站时,这种抽象可能会让您的生活更轻松。

09. 漂亮

Reformat your code

重新格式化代码

始终如一地格式化代码以使其可读性可能会对您的工作的可维护性产生巨大影响,尤其是当您作为团队的一部分工作时。幸运的是,有很多工具可以帮助解决这个问题,让您节省考虑代码风格的时间或在代码审查中讨论它。

漂亮是一个这样的工具。它是高度自以为是的,因此需要考虑并定义您的风格指南以支持其自己的标准。它可以通过插件与您的构建管道或大多数流行的文本编辑器集成,并且可以理解您希望使用的许多语言,包括JavaScript,JSX,TypeScript,Vue,CSS,Less和SCSS。

10. Sizzy

Compare how your site will look on different sized screens

比较您的网站在不同尺寸的屏幕上的外观

你想确保你付出的所有努力响应式网页设计已经还清了吧? Sizzy旨在帮助您实现这一目标。它有Web或浏览器插件形式,并且会并排显示您在多种不同设备屏幕尺寸上呈现的页面的交互式视图。

除此之外,您还可以显示和隐藏模拟设备键盘,并在纵向和横向模式之间切换。

您还可以在开发服务器本地使用该功能,方法是为其提供本地主机URL,这样您就不需要让您的站点生效以让Sizzy对其进行测试。这可能是在多种不同屏幕尺寸上测试页面的最快速,最全面的方式。

11. 可拖动

Get impressive interactions

获得令人印象深刻

由Shopify团队建立,Draggable非常注重其名称:它是一个提供拖放支持的库,抽象出相当复杂的功能。它支持快速操作DOM以重新定位元素,这意味着您可以交换和排序对象,并且可以在鼠标,触摸和强制触摸事件中正常工作。它还支持所有主流浏览器。很好的实际用例可能是交互式日历或看板。

该项目的网站还有一些令人印象深刻的多彩演示,展示了使用图书馆的可能性,包括3D互动。它目前处于测试阶段,这意味着API可能会发生变化,但这不应该阻止您尝试。

12. Bottender

Build cross-platform chatbots

构建跨平台聊天机器人

近年来,会话界面或聊天机器人普及。您可能认为与组合单页应用程序相比,构建机器人是一项相当复杂的工作,但并非必须如此。

Bottender是一个用于构建在Node.js上运行的跨平台机器人的JavaScript框架,并且支持Facebook Messenger,Telegram和Slack等流行的消息传递平台。出于测试目的,它还使您可以轻松地在控制台中运行机器人。对于Bottender来说,现在还处于早期阶段,但这是一个值得关注的问题,因为这类项目为构建界面提供了许多机会,否则这些界面将无法实现。

13. Scrollama

Dive into scrolling interactive storytelling

潜入滚动互动故事

你可能已经看过一些令人印象深刻的滚动互动故事的例子(如果你不熟悉这个,请看看小舟)。这是一种使用本机浏览器功能在线讲述故事的引人入胜的方式。

然而,实现并不一定是直截了当的,因为处理滚动事件可能很繁琐并引入性能问题。 Scrollama旨在提供帮助。它使用IntersectionObserver,虽然相对较新,但它比以前的解决方案更高效,可以检测对象是否在页面上可见。 Scrollama有一系列示例说明您可以做什么,如果您不喜欢这种做法,它的GitHub页面提供了替代方案。

14. 维瓦尔第

You can annotate web pages with notes in this browser

您可以在此浏览器中使用注释注释网页

从统计上讲,您可能正在使用Chrome,Firefox,Safari或Edge。这四种浏览器在网络上占主导地位。还有其他的可用,根据您的喜好,可能是时候分支了。最近得到一些关注的是Vivaldi,它的设计既快速又简约,功能强大。

一个特别有趣的功能是能够使用笔记注释页面。 Vivaldi使用Blink渲染引擎,Chrome和Opera也是如此,它使用户能够安装Chrome扩展程序,其中许多都可以使用。然而,对于许多人来说,领先的功能是能够管理“堆栈”中的选项卡,这使得我们许多人经常使用的大量打开选项卡变得更加容易。

15. Maptalks

Display 2D and 3D maps together

一起显示2D和3D地图

浏览器中有大量用于地图的用例,当然Google仍然是映射的家喻户晓的名称。但是如果你能比谷歌地图更好呢? Maptalks允许您同时显示2D和3D地图,同时保留2D地图库的简单性。

除了基本的2D和3D功能外,它还具有插件生态系统,允许您添加其他功能,如热图,群集标记和原点/目标行。还有一个实验插件来添加动画风。该网站有丰富的示例,因此如果您无法想象您可以做什么,请查看它。

16. Next.js要么Nuxt.js

Nuxt enables you to quickly create Vue apps

Nuxt使您可以快速创建Vue应用程序

React和Vue是两个流行的前端框架。但是,设置它们以便您可以开始构建应用程序可能非常耗时,因为您需要安装模块,配置构建管道等等。 Create React App之类的版本可以更快地实现这一点,但是对于像路由这样的东西来说,还是有一个学习曲线。如果你想要服务器端渲染,这可能非常有用,这会增加更多的复杂性。

对于React和Vue,Next和Nuxt都分别解决了同样的问题。它们允许您使用这些框架快速创建应用程序,默认情况下这些框架是服务器呈现的,并根据您的页面结构自动处理路由。

17. 苗条工兵

Build universal web apps with these two frameworks

使用这两个框架构建通用Web应用程序

对最流行的前端框架的一个常见批评是代码膨胀和初始页面加载性能损失。 Svelte提供了类似的抽象,可以轻松构建组件驱动的应用程序,但在构建时生成JavaScript,从而减少占用空间并提高页面呈现速度。

Sapper比这更进一步,允许您构建由Svelte组件组成的通用Web应用程序。它将处理服务器端和客户端呈现,离线支持等的复杂性。

18. 模版

Create web components quickly and easily

快速轻松地创建Web组件

到目前为止,您可能已经听说过很多关于Web组件的内容。 Google的Polymer项目可能是构建Web组件的最着名的框架,提供浏览器支持polyfill和有用的抽象入门。

但是,Stencil提供了另一种创建Web组件的方法。由Ionic框架背后的团队构建,Stencil可用于快速创建自定义HTML元素,其中包含您需要的所有功能。因为它使用Web组件标准,所以您的创建不依赖于特定框架。对于那些熟悉React的人来说,模板可能特别有吸引力,因为它会受到很多影响。

19.

An alternative to Webpack

Webpack的替代品

Webpack可能是JavaScript环境中领先的模块捆绑器。如果您不熟悉它,它本质上将您的资产和模块依赖性并将它们捆绑到静态的可部署文件中。包裹相对较新,具有相同的目标,但采用不同的方法。

它可以在没有配置的情况下运行,并将检查您的代码以识别依赖关系。它还提供多核支持; Webpack没有,这意味着构建可以更快地运行。包裹还可以处理Babel或Sass等预处理。

然而,有一件事是大多数流行前端框架的在线信息都会假设你现在正在使用Webpack。如果包裹起飞,将来可能会发生变化。

20. Bootstrap 4

A major overhaul for the most popular frontend component library 

对最流行的前端组件库进行重大改造

到目前为止,Bootstrap仍然是最受欢迎的前端组件库,使您能够立即构建外观精美,响应迅速的用户界面。 Bootstrap本身可能不是新的,但稳定版本4在1月份下降并带来了许多新功能和更改。 Bootstrap 4包括一个支持Sass而不是LESS的移动,利用相对单位而不是像素,一个新的网格Flexbox布局等等。值得注意的是,它现在已经放弃了对IE8和IE9的支持,对于大多数人来说这应该不是问题。

您可能正在使用带有Angular或React等框架的Bootstrap,好消息是虽然版本4的稳定版本相当新,但已有模块可用于将其集成到这些生态系统中。

网页设计活动 生成伦敦 返回2018年9月19日至21日,提供行业领先的演讲者,一整天的研讨会和宝贵的交流机会 - 不要错过它。 立即获取您的Generate门票

本文最初发表于Web Designer杂志。现在订阅。

阅读更多:



翻译字数超限