34个网页设计工具,帮助您在2019年更智能地工作

Woman using laptop and smiling
使用这些伟大的网页设计工具,2019年更智能,更快速地工作

每周都有令人惊叹的免费文件Istock.com

在大多数职业中,你在工作中花费的时间越多,你成就的方式就越多。但对于网页设计师和开发人员来说,对变革的抵制根本不是一种选择。

随着客户要求更大,更好的网站和应用程序在越来越复杂的设备生态系统中工作,从VR到语音,使用新的技术和技术不是一种选择;这是必要的。

值得庆幸的是,有大量的网页设计工具一直在发布,以帮助您应对新的挑战。唯一的问题是找时间跟上他们所有人。

+$So if you don't have a spare hour every day to scour Product Hunt, check out our selection of the best web design tools available now, which will all help you become more streamlined, inventive and creative in your work. You'll find everything from UI and prototyping tools to dedicated creative software and everything in between. And if that's not enough, don't miss our round ups of the+$best web hosting services+$best Website Builders+$for 2019.

+$Some of the tools listed below will be very familiar, others may be new to you. But each has the potential to save you time, energy and budget in your web design work.

01. 草图

Sketch已取代Photoshop作为大多数网页设计师的首选UI设计工具

我们将从最明显的开始。是的,我们知道每个人都听说过Sketch - Bohemian Coding的矢量UI设计工具 - 但有趣的是,似乎仍有很多网页设计师依赖Photoshop进行UI设计(尽管发布了Adobe XD,Adobe的原型设计和线框工具 - 新增功能之一创意云)。

Rory Berry,创意总监Superrb,于2017年转向Sketch,并强烈推荐。 “作为Photoshop的用户超过10年,很难改变和学习新东西,”他说。 “但是在使用Sketch的第一天之后,就没有回头了。我是一个完全皈依的人。“

他提供了许多原因。 “与Photoshop相比,对所有文档进行排序并对Sketch进行修改要容易得多,”他开始说道。 “Sketch有小文档,而Photoshop有大文档。由于它是一个基于矢量的应用程序,与Photoshop相比,文件大小要小得多。“

而这还不是全部。 “Sketch中的内置网格系统非常棒,使界面设计更加容易。我认为整体用户界面和最小的感觉使设计更加清晰,用户友好。相比之下,Photoshop似乎非常复杂。“

Sketch社区提供数百个插件他补充说,让设计师的工作流程更轻松,更顺畅。 “如果你能找到的话,基本上都有一个插件。 Photoshop / Lightroom仍然是我们照片编辑的首选,但Sketch是网页设计的全能赢家。“

如果你很久以前尝试过Sketch并且不喜欢它,你可能想要试用Sketch的最新版本,版本52,其中包括一个完全重新设计的界面,用于设计数据的新功能,以及一个新的Dark Mode for macOS Mojave。

不要错过我们的使用Sketch的重要提示

02. Adobe XD

草图竞争对手Adobe XD拥有轻巧的界面,可让您轻松实现概念和原型

Adobe的矢量设计和线框工具,Adobe XD随着去年Adobe MAX的发布,它现在将包括在内,并且不断变得更好语音原型

XD包括绘图工具,可用于定义非静态交互的工具,移动和桌面预览以及用于提供设计反馈的共享工具。它允许您选择特定于设备的画板大小来启动项目,甚至可以导入流行的UI工具包,例如Google的Material Design。

安德烈罗布,巴塞罗那Robu工作室的设计总监,是其粉丝之一。 “对于快速模拟,它很棒,”他说。 “这是一个非常轻便的界面,加载了大量照片,非常适合情绪板。原型设计对于向客户展示工作原理非常有用,特别是因为您可以立即在线推送内容。我也喜欢我可以从其他Adobe应用程序复制和粘贴内容。“

至关重要的是,Adobe XD与Creative Cloud的其余部分集成在一起。 Ellis Rogers,平面设计师接待有限公司也推荐它。 “Sketch非常适合为Web开发人员设计,因为您正在为完全用于设计网站和应用程序而构建的软件中工作,”他说。 “但对我来说最大的限制是它只能在Mac上使用,因此很难为不使用OS X的Web开发人员/设计人员共享Sketch文件。共享Sketch文件用于开发意味着额外的软件/转换,或者使用平面JPG工作 - 某些东西这造成了太多的界限。

他补充道,作为Photoshop和Illustrator的用户,Adobe XD的用户界面很熟悉,因此使用它没有真正的学习曲线。 “所以现在经过几周的试验,它是我现在用于所有网页设计,应用程序设计,原型设计或线框图的唯一工具。”

Rogers还赞扬了XD提供的使用Adobe库从Photoshop或Illustrator快速导入任何资产的能力,因为这使得协作项目运行得更快。

“与UI / UX设计师和插图画家合作使这个过程变得简单,”他说。 “当设计/原型或线框完成后,Adobe XD允许您快速选择元素并为工作原型创建页面过渡,这可以通过链接共享。该链接还允许您收集每页的反馈,使其保持整齐有序。该链接可以在Adobe XD中更新,因此客户端可以始终查看最新版本,而无需担心不正确的版本;与...合作的绝对快乐。“

03. FIGMA

Figma允许您实时设计,原型设计和与其他设计师收集反馈

Figma是一个界面设计工具,使多个设计师能够实时协作。它可以在浏览器中,或在Windows,Mac或Linux上使用,并且有免费版和付费版,具体取决于您使用它的内容。

以下是它的一些突出特点:

“Figma有一个类似于Sketch的USP,除了是跨平台,”前端设计师解释道本杰明读。 “当我用它为一篇文章创建几个图标时我们的网站我发现工作流程非常顺畅。我花了很多时间学习并获得了协作的额外好处:你可以在应用程序中与其他人共享图形。“

“我一直在努力为我的工作切换到Linux,有时我们使用Windows,因此Figma从实用角度对我有意义,”他补充道。 “相比之下,我发现许多其他平台的工具都不足。”

自由职业者内容作家和艺术家大卫伊斯特伍德关于Figma也有好话。 “当我们需要快速模拟MVT时,它也是一个非常有用的工具;有时是对现有布局的少量补充。我们喜欢您可以快速创建桌面,平板电脑和移动设备。“

04. 亲和设计师

Affinity Designer on iPad

Affinity Designer在iPad上与在桌面上一样强大

“Serif的亲和设计师被一些人称为'Photoshop杀手',很容易理解为什么,”产品设计师说丹爱德华兹。 “我的第一印象是该应用程序设计精美,感觉就像是一个专门的网络和图形设计工具。

“我真的很喜欢这些功能,包括可调节的非破坏性图层。这实际上意味着您可以调整图像或矢量而不会损坏它们。

“1,000,000%的变焦只是幸福;它在使用矢量艺术时特别有用,因为你可以真正接近。撤消和历史功能也非常方便:亲和力让你可以回到8000多步!”

“当涉及到设计时,用户界面感觉很熟悉。当从Photoshop移动时,每个人似乎都想重新开始,这可能构成真正的挑战。亲和力所做的是保持布局熟悉,同时收紧一切并隐藏干扰我很容易直接跳进去设计。“

Affinity Designer现在也可以使用对于iPad。请注意,这不是您可能期望的缩小版移动应用程序版本:它与您在桌面上获得的完整版本相同。

不要错过我们的使用指南像素角色出口人物钢笔工具在亲和设计师。另请注意,Affinity可以替代Photoshop,亲和照片和InDesign替代方案,Affinity Publisher;所有这些都很好地融合在一起。

05. 闪光

Flare是一种用于设计和动画矢量艺术的新工具

Flare是2Dimensions基于浏览器的工具,可帮助您设计和动画矢量艺术。针对网页设计师和游戏设计师,它可以让您直接使用最终产品中运行的资产直接工作,无需重做代码中的工作。因此,它应该极大地简化您的过程并为您节省大量时间。

最重要的是,它可以作为开放设计运动的一部分免费下载。你可以看看Ahmed Tarek是如何用它来创建一个app动画的本教程

06.  

Vault是一种从图像中提取主色的漂亮工具

想要将您网站的配色方案与特定图像相匹配?然后你可能会发现Vaunt很方便。这是一款免费的Mac应用程序,它使用聚类算法分析您的图像,并让您知道哪些颜色在图片中占主导地位,因此您可以在设计中使用该信息。

您将图像拖放到应用程序中,主色显示在面板中。然后,您可以单击任何颜色将它们添加到剪贴板。

07. Squoosh 

Google的新工具可以更轻松地将图像压缩到适当的级别

Squoosh是去年11月推出的一款免费应用程序,旨在帮助网页设计师在不牺牲质量的情况下压缩图像。您可以将图像拖放到应用程序中并使用滑块来播放压缩量,这样您就可以快速找到图像质量和文件大小之间的平衡。

该应用程序可在线和离线工作,总体而言是双赢:网页设计师节省时间,谷歌获得更快的网络仍然看起来不错。

08. Linksplit 

Linksplit使设置A / B测试变得快速而简单

使您的网站更好的最有效方法是通过A / B测试:在两个或更多不同版本之间分配流量,并查看哪个更好。此工具使设置更容易。前10,000次点击是免费的,您甚至无需注册即可开始使用。

前往该网站,输入您的目标网址,您将获得一个简短的测试网址,以便与您的受众群体分享。如果您愿意,也可以设置规则。例如,如果您希望英国人在iOS上使用Chrome浏览器与美国人不同,那么设置起来非常简单。

09. 动漫

使用此动画引擎为您的应用增添趣味

虽然网页动画有时会得到不好的说唱,但开发人员总是在寻找方法来简化操作。 CSS动画和过渡是向前迈出的一大步,但更复杂的交互往往需要一个库。动漫是一种新的动画引擎,如果您需要将复杂的动画组件添加到您的应用中,您可以查看它。

这是一个演示超简单API的示例:

var myAnimation = anime({targets:['。box1','。box2'],translateX:'5rem',rotate:180,duration:3000,loop:true});

此代码定义了要设置动画的对象以及动画的细节。 API允许您使用CSS选择器,DOM元素甚至JavaScript对象来定位元素。

作者Julian Garnier提供了一个CodePen集合,演示了库可以做什么,以及完整的文档GitHub上

10. Avocode

Avocode可帮助您从Photoshop或Sketch设计中编写网站或应用程序

Avocode使前端开发人员可以非常轻松地从Photoshop或Sketch设计中编写网站或应用程序。它是由为我们带来CSS Hat和PNG Hat的团队构建的,因此他们将导出过程更进一步,这并不奇怪。虽然以前的应用程序允许您导出资产,但是Avocode非常特别的是,只需单击一下,您就可以使用其Photoshop插件将PSD同步到Avocode中。

Avocode可快速自动分析您的PSD或Sketch文件,并将所有内容整合到设计精美的UI中。然后,您可以完全控制导出资产的方式,包括SVG导出作为标准。

您还可以单击设计中的元素,然后将代码复制并粘贴到您选择的文本编辑器中。 “它为用户提供了编码所需的一切 - 设计的预览,以及对所有层和出口资产的访问,”Avocode联合创始人说。Vu Hoang Anh。 “最好的事情是开发人员根本不需要Photoshop或Sketch。当前的工作流程真的很糟糕,这就是我们创建Avocode的原因。”

我们不确定任何应用都可以复制开发人员。但我们知道许多努力工作的设计师乐于使用它来将PSD和Sketch文件转换成交互式设计,从而形成网站构建的基础。每月14美元。

11. Zeplin

Zeplin将Photoshop或Sketch文件转换为免费的Mac,Windows或基于Web的应用程序

您是否发现将设计资产移交给开发人员可能会有点麻烦?詹姆斯斯蒂夫当然可以。 “他们并不总是共享相同的软件,”他指出,“所以那些精心分层和注释的Photoshop模型最终会变成扁平的文件,而且翻译中的东西不可避免地会丢失。”

Zeplin通过将Photoshop或Sketch文件转换为免费的Mac,Windows或基于Web的应用程序,减轻了这种痛苦的体验。 “最好的部分是Zeplin为您的设计提供颜色,尺寸和字体的快速参考,”Stiff说。 “它甚至可以生成CSS和样式指南。我发现Zeplin节省了大量时间,我的开发者朋友似乎也非常喜欢它。“

另请阅读我们的帖子弥合设计师与开发人员差距的工具

12. 模式实验室

Pattern Lab screengrab

Pattern Lab以Atomic Design为基础

Pattern Lab是由Dave OIsen和Brad Frost创建的漂亮的图案驱动设计工具。它基于的概念原子设计,它说你应该将你的设计分解成最小的部分 - 原子 - 并将它们结合起来形成更大的,可重复使用的成分 - 分子和生物 - 然后可以变成可用的模板。

虽然它的核心是一个静态网站生成器,它将UI组件拼接在一起,但模式实验室还有更多功能。它与语言和工具无关;它使您能够将UI模式嵌套在彼此内部并使用动态数据进行设计;它具有与设备无关的视口大小调整工具,可帮助您确保您的设计系统完全响应;它完全可扩展,因此您可以确保它可以扩展以满足您的需求。

13. 维瓦尔第

Vivaldi是您可以找到的最可定制的浏览器

有时最好的网页设计工具可以像新的浏览器一样简单。 Vivaldi是一款快速,可定制的网络浏览器,适用于由一些创办Opera的人建造的高级用户。 Vivaldi被称为“我们朋友的浏览器”,是使用网络技术构建的。 JavaScript和React用于创建用户界面,以及Node.js和许多NPM模块。

Vivaldi是最具可定制性的浏览器,它提供了其他很酷的功能,如命令行控制,记笔记面板,标签堆叠和平铺,以及网页面板,使您可以将所有喜爱的网站放在一个地方,方便访问。

14. Firefox现实

Firefox Reality是一款专门针对VR设备的新浏览器

如果您正在使用webVR,那么您需要查看Firefox Reality,这是一个用于虚拟现实设备的新浏览器,如Viveport,Oculus和Google Daydream。

由Mozilla于去年9月推出,它现在可从这些设备的应用商店购买,旨在在2D网络和沉浸式网络之间无缝移动。这些功能包括通过设备耳机使用语音搜索网络的功能。浏览器正在打开,你可以通过它来跟进Github页面。还可以在我们的列表中查看VR应用程序全息图。

15. Canva

Canva是一种用于快速创建社交媒体图像和图表的流行工具

想快速轻松地模拟信息图表之类的东西吗?然后劳伦斯哈默,创始人解决网络媒体问题,建议Canva。它是一个免费的,基于浏览器的工具,设计师和非设计师都使用它来制作印刷和网络图形。

“Canva非常适合制作漂亮的图像,”Harmer说。 “图像是进入网站和社交媒体灵魂的窗口,因此像这样的工具可能是成功的关键。”

16. 网页设计提案工具

使用此免费工具轻松生成Web设计提案

Beewits在工具方面有一个很好的界限,使网页设计的业务方面更容易,即它的网页设计报价生成器每小时费率计算器。现在到2018年,它带来了另一个极好的免费应用程序:不言自明网页设计提案工具

“它本质上是一个简单的'Proposify'工具,可以让您快速轻松地制作提案,”Beewits的David Attard解释道。 “这是一个美化的表单,允许您输入和更改设置文本,然后创建一个Word文档,可以直接发送到客户端。”或者,您可以不使用模板输入自己的文本。

如果您登录免费服务,则可以保存当前版本,这样下一次,您已经填写了许多已填写详细信息的字段。这很简单,但它完成了工作。

17. 网站堆栈 

快速轻松地查看任何网站的技术堆栈

这是另一个基于浏览器的工具,简单而精彩。输入此Chrome扩展程序的任何网站的网址,它可以让您查看其技术堆栈。它快速,流畅,可靠,覆盖40,000多种产品,并以其数据的准确性和详尽性而自豪。

“我们将此扩展程序构建为一种更简单的方式来访问这些数据,”其制造商说,“同时还保护您的隐私并在我们自己的服务器上运行所有操作,以便您的浏览速度不会减慢。”

18. CodePen项目 

一个新工具允许您直接在CodePen中构建网站

CodePen由Alex Vazquez,Tim Sabat和Chris Coyier于2012年创立,现已发展成为网络上最大,最活跃的社区,用于测试和展示HTML,CSS和JavaScript代码片段。在它的前五年,它既可以作为在线代码编辑器,也可以作为开源学习环境,开发人员可以创建代码片段(“笔”),测试它们并获得反馈。

然后在2017年,CodePen推出了自己的IDE(集成开发环境)CodePen Projects,使您可以在浏览器中构建网站,从而实现了又一次重大飞跃。

您可以拖放网站文件,将它们组织到选项卡中,并在构建时预览网站。如果您选择,有一些模板可以帮助您更快地创建网站,以及内置的调试工具。

请注意,尽管它的工作方式与笔式编辑器类似,但CodePen Projects并不能替代后者,而是与它一起使用。您可以在中查看有关CodePen项目的更多信息这篇博文

19. 引导

旧的最爱Bootstrap有一些强大的新更新

Bootstrap肯定不是一个新工具。但它已经彻底改变了发展,毫无疑问,无处不在的框架将继续影响我们在网络上构建内容的方式。每次更新都会对工具进行彻底检查。

最新版本4.2.1于12月推出。它包括一系列新功能,包括新的微调器加载组件,用于显示通知的新Toast组件,新的iOS样式开关,旋转木马组件中的触摸支持等。查看完整的功能集在Bootstrap网站上找到了我们的指南中最好的免费Bootstrap主题

20. Ally.js

不要忽视可访问性 - 使用ally.js

没有至少一个辅助功能工具,任何Web开发工具列表都不会完整。可访问性是设计和开发中经常被忽视的一个方面,ally.js可以为您简化它。

ally.js是一个JS库,可以精确控制可聚焦和不可聚焦的元素。例如,使用其API可以防止模态窗口外的元素在模式关闭之前获得焦点。您还可以确切地找出哪些元素是可聚焦的或可列表的,并在阴影DOM中识别焦点更改。

另外两个强大的功能是能够确定焦点变化的方式(键盘,鼠标等)以及元素在屏幕上是否可聚焦和物理可见(这有助于避免页面滚动)。

21. 键入Nugget

键入Nugget可以更好地控制排版

类型Nugget解决了您对几乎每个前端项目的需求:处理CSS排版。仍然处于测试阶段,具有更多功能,它是一种在线排版工具,可以精确控制类型样式。

该工具在页面上显示各种文本样本,可以在右侧的面板中进行实时调整。该面板允许您为页面的各个方面(全局样式,标题,段落,链接和HTML列表)选择字体大小,重量,样式,颜色,字母间距,文本修饰等。

有用的是,此工具允许您注册帐户,登录并保存进度。指定所有设置后,您可以点击“生成代码”按钮,“类型块”将生成指向其CDN上托管的样式表的链接。如果您发现CSS排版繁琐且重复,那么将此工具添加到您的工作流程中将会受益匪浅。

22. ARKit 

使用Apple的ARKit 2为iOS 12设备创建增强现实体验

增强现实 - 将数字对象和信息与您周围的环境相融合 - 是一个在网络和应用开发社区中引起很多兴奋的空间。尤其是因为Apple的ARKit,一个允许您轻松为iPhone和iPad创建AR体验的框架

使用iOS 12上的ARKit 2,您的AR应用程序现在可以同时由多个用户体验,并在以后的同一状态下恢复。您还可以将真实世界的对象整合到您的AR体验中,为您的用户提供更大的沉浸式机会。

23. Vue.js

不习惯复杂的JavaScript库? Vue.js非常适合您

如果没有JavaScript框架,新的Web工具列表会是什么?与React一样,Vue.js是用于构建用户界面的框架,并且利用虚拟DOM。顾名思义,Vue的核心库专注于视图层。

查看一个代码示例,该示例取自Vue的文档,它利用用户输入并演示了库的优雅。我们将从HTML开始:

注意自定义V系列调用的处理程序ReverseMessage方法。这是JavaScript:

在该示例中,我使用数据填充段落并定义reverseMessage方法。 Vue非常适合那些经验不足的复杂库,但也有许多插件可以帮助开发复杂的单页Web应用程序。

{{ 信息 }}

var myApp = new Vue({el:'#example',data:{message:'Hello Vue.js!'},方法:{reverseMessage:function(){this.message = this.message.split('') .reverse()。join('')}}});

24. 全息照相 

这个基于A-Frame构建的Mac应用程序可让您无需编码即可创建WebVR体验

全息图是WebVR创建的一体化工具。这个免费的桌面应用程序不需要以前的编码知识,它的原生Google Blocks集成使您可以立即玩大量免费的3D对象。在引擎盖下,Hologram充分利用了Mozila的WebVR框架A-Frame的强大功能和简洁性。

这意味着开发人员可以下载使用Hologram创建的项目,并在其A-Frame工作流程中使用它们。它目前在Mac上可用,很快就会推出Windows版本。

25. Parallax SVG动画工具

这组工具可以更轻松地创建复杂的SVG动画序列

由Gareth Battensby创建视差,SVG动画工具是一系列Python脚本形式的SVG动画工具。 “我建立这些工具是为了回应你在创建复杂或长序SVG动画时遇到的挫折,”他在这里说道。解释性博客文章

“当你从Illustrator重新导出时,其中最重要的是被覆盖的编辑。这些工具完全消除了这个问题 - 它们非常适合使用GSAP或类似动画库为SVG图形制作动画的前端开发人员。“

26. 鹅毛笔

Quill是一个灵活的富文本编辑器,具有强大的API

在需要富文本编辑器的应用程序中有许多不同的上下文。 Quill以现代网络为基础,牢牢打造,目前是我们的最爱。

Quill允许您使用几行JavaScript将基本div元素转换为功能强大的富文本编辑器。但其最大的吸引力在于其灵活性和可扩展性,通过模块和强大的API。

Quill提供主题和模块,包括工具栏,键盘,剪贴板和历史记录。您可以测试其中的许多功能羽毛球场当然还有文件如果您打算使用其高级功能,则必须阅读。

27. PDF的URL 

使用此API自动将HTML转换为PDF

由Alvar Carto带给您的是,这个自托管API使您可以将HTML转换为PDF,因此它可以方便地呈现收据,发票或任何其他HTML内容。默认情况下,API会忽略页面的@media打印CSS规则,并将Chrome设置为模拟@media屏幕,以使默认PDF看起来更像实际网站。您可以将其设置为定期自动运行,最重要的是,它是免费的。

28. IotaCSS

IotaCSS是一个与众不同的CSS框架

IotaCSS是一个专门设计为与设计无关的CSS框架。它由顾问前端架构师创建Dimitris Psaropoulos谁觉得其他CSS框架对他合作的设计师施加了很多限制。这迫使他要么在顶部编写大量代码,要么让设计师妥协。相反,他创建了自己的框架,其工作方式略有不同。

虽然大多数CSS框架都是一个单元,但iotaCSS是一组不依赖于彼此的独立,小巧和灵活的模块。您可以单独使用一个,也可以将它们组合起来构建更复杂的用户界面。

29. 发射台 

Launchpad允许您在Sketch中设计网站,然后启动它们;无需代码

Launchpad是Anima的一个插件,可让您直接从Sketch发布响应式网站,无需编码。整个界面已集成到Sketch中。如果您当前正在设计Sketch中的响应页面,然后将它们交给开发人员,那么尝试使用这个很酷的工具是完全没必要的。

30. 反应Sketch.app

Airbnb正在与开源社区分享其定制工具

React Sketch.app提供了一种在大型设计系统中管理Sketch资产的超级简便方法。由Airbnb团队建立,以帮助弥合设计师和工程师之间的差距,它基本上是一个开源库,允许您编写渲染到Sketch文档的React组件。

由于React Sketch.app使用Flexbox,因此其组件可以具有与真实组件相同的丰富布局。这意味着不再需要手工拖动矩形;一切都像你的目标布局引擎。

然后,使用React Sketch.app可以轻松地将数据提取并合并到Sketch文件中。它还提供了一种在Sketch之上构建自己的自定义设计工具的简便方法。您可以了解有关其工作原理的更多信息这个帖子并通过以下本教程

31. SVGito

这个免费的应用程序可以节省您手动编辑SVG文件的时间

SVGito是一个免费的Web应用程序,可以清理您的SVG文件,为您省去手动编辑它们的麻烦。由...制作彼得诺维尔,这款简洁的小应用程序只需按一下按钮即可自动优化您的SVG,并且通常可以减小其尺寸和复杂程度,而无需改变它们在屏幕上的实际外观。

您可以在中查看有关SVGito的更多信息这篇博文

32. Sizzy 

Sizzy允许您在应用测试期间预览多个屏幕

Sizzy是一个工具,允许您在测试响应式Web应用程序时一次预览多个屏幕。

创造者Kristijan Ristovski之前一直使用react-storybook在每个组件的不同变体之间切换。但他很烦恼不得不在这么多设备之间来回走动。因此他构建了Sizzy,它允许您同时查看所有更改,使得更快更容易发现并修复布局错误。

你可以在这里了解更多关于Sizzy的信息这篇博文

33. 电子邮件基金会2

使用Foundation for Emails 2创建响应式HTML电子邮件

电子邮件基金会是ZURB的一个框架,以前称为Ink。它用于创建响应式HTML电子邮件,可以处理几乎所有平台和服务,将电子邮件编码最佳实践捆绑在一起。最新的迭代使用Sass代码库,可以访问设置文件,您可以在其中定义各种默认值以满足您的需求。

除了框架本身,ZURB还提供了ZURB电子邮件堆栈,这是一个一体化的工作流程,包括:

入门指南如果您选择利用所有功能,将帮助您了解如何启动和运行堆栈。

34. 形成

Form是一种独特的原型工具

RelativeWave的Form是一个原型工具,就像我们尝试过的一样。它不是典型的设计工具,因为没有工具或图层调色板。使用该应用程序感觉就像是设计和代码的混合。

虽然您无法在应用程序中实际创建图形,但您可以插入它们并使用Form调用的“补丁”来添加手势和交互。 Mac应用程序要求您也使用iOS应用程序,以便您可以实时查看原型并与之交互。

“Form是一款应用程序设计和原型设计工具,其目标是生成更接近生产中的设计,”RelativeWave创意编码器解释道。Max Weisel。 “我们希望设计师直接在应用程序的生产方面工作,同时让工程师专注于更复杂的问题。”

有一些关于如何使用Form的很棒的教程,但如果你习惯在Photoshop中创建视觉效果,那么这个过程相当复杂。例如,使用Superview变量和Match Patches可以将图像移动到设备的中心。一旦到位,您可以使用数学来划分宽度和高度,并将它们连接到图像视图中的X和Y位置。将它们组合在一起,重命名变量并调整X和Y锚点。

这个过程相当复杂。但是,一旦您了解了流程,就可以创建令人惊叹的原型。访问设备的摄像头和其他传感器意味着您创建的原型与编码应用程序一样强大。

相关文章:



翻译字数超限