50个必备的网页设计工具

Web Designer

作为一个网页设计师，有一个有效的、组织良好的工作流程十分重要。而其中的诀窍在于选择一个合适的工具。因此，我们汇总了50 个工具，使设计师能够更轻松地开始网页设计之旅。

设计网页不仅仅是绘出美丽的图画。作为一名网页设计师，你会发现50%的时间都用在了策划、测试和推广方面，文书工作更是占了大量的时间。这份工作大多需要多方面的技能，但是如果你远离自己热爱的工作而去执行你不喜欢的任务，那真是让人非常沮丧。令人欣慰的是，有一个可以削弱这种影响的简单方法，并且你今天就可以开始。

拥有一个高效的，有序的工作流程对任何工作来说都至关重要，网页设计更是如此。网页设计师的工作内容涉及很多方面：你可能这一分钟在制作网页的线框，下一分钟又可能在测试一个完全不同的网站。这些重要的工作便将一系列程序添加到网页设计和发展当中。当然需要做的还有策划、开发、推广，但最重要的部分还是设计本身。

为工作找到适合的工具

想要完成一个网站，还有更多的工作需要完成。有一套非常高效的工具来帮助你节省时间和精力将会非常有用。请记住，你花费越多的时间来优化工作流程和减少不必要的体力劳动，你就会有更多的时间来设计出色的网站。

明智的选择你的工具

你的工具越好，你就可以把更多的时间放在设计上，这就为稳健的设计提供了稳定的框架和基础。而难点就在于我们拥有这么多不同的工具和服务，如果想要保持更新各种选项，那么这将会是一个很大的雷区。你需要正确选择一系列节省时间和精力的工具。这就是为什么我们搜集了50种对网页设计师来说最好的工具。它将会在5个重要方面帮助你：策划、设计、开发，测试和推广。

在我们的列表中，我们有原尺寸的桌面工具、在线选项、网络服务、框架和工具。它们的共同特点就是能够帮助你节省宝贵的时间，确保最好的结果。如果在你的工作流程中使用这些工具，那么它们将形成一个完整的套件来帮助你建立一个优秀的网站。

Part 1 策划

通过选择合适的规划和线框图制作工具，让你的网页设计有一个好的开始。

DROPBOX

www.dropbox.com

Dropbox是跨越不同设备来分享和备份文件的一种简单方式，它可以扩展你的硬盘驱动器，在电脑和设备之间提供基于云的储存和自动同步功能。作为协作工具，它可以允许不同用户之间的文件共享。其基础版本完全可以免费使用，但你必须支付额外的储存，还可以通过和非网络随身储存的用户一起分享，并且把这种服务推荐给你的朋友和同事，从而慢慢建立自己的空闲储存区。

DIA

www.live.gnome.org/Dia

DIA是一款用来生成图表的免费桌面工具，在Windows、Mac OS和Linux操作系统上都有相应的版本。它和微软的Visio大致相同，可以提供不同的方法来完成实体联系图，同时在开始设计和编写网站之前，提供很好的筹划方法。它可以用创建图表的方式提供一个大型图书馆的预构建的形状。通过使用SVG和XML来生成自己的图表，并且让其适合任何工作流程和显示风格。

MOQUPS

www.moqups.com

MOQUPS是一款非常棒的免费网络框架工具，它可以帮你创建互动模型，与你的同事以及客户分享。

完成模型可以导出PDF和PNG格式，因此很容易把你的线框包括进你的项目文件中。关键是在浏览器中运作的整个系统中使用了HTML5，一系列设备都可以使用。这对于每天早上上班的网页设计师来说是一个理想的选择。

BASECAMP

www.basecamp.com

Basecamp是一个在线项目管理系统，它提供内置的用户控制和管理功能。该系统提供代办事项列表、讨论地区、资产存储和共享日历。Basecamp是一组在线应用程序的一部分，它包括Highrise、Backpack和Campfire。它们一起构成了一个完整的项目管理工具。每月只要30美元，你就可以计划和管理多达15个并行工程。

YUUGUU

www.yuuguu.com

Yuuguu是一个屏幕分享和桌面协作工具，它让你快速看到你同事桌面上的东西，进行交互展示，举行网络会议。这个服务融合了你现有的软件并且不需要下载插件。这样你就可以举行网络会议，就像每个人都坐在同一个房间。价格是69美元每年，会议次数不限，功能包括屏幕分享、网络会议以及音频电话服务。

Part 2 测试

人们常常忽略测试，但是它是网页设计项目中最重要的环节，因为它可以确保设计师的设计成果是否能够在现实情况下得到合理的应用。

Firebug

www.getfirebug.com

Firebug基于火狐浏览器平台，并支持所有的主流浏览器版本。Friebug可以让你和DOM中的成分直接互动，中断和放置代码，并且覆盖在页面的CSS环境下。这种把工具、网络分析和控制台结合起来的方式，使它成为开发者测试和评估自己网页的必备工具。对于查看其他的开发者如何实现一些特质技巧方面非常有帮助。它可以运用到整个开发过程当中，而不仅仅是在测试阶段。

SAUCELABS

www.saucelabs.com

在多种浏览器中进行测试对于网络设计师来说很有必要。众所周知，不同的网页浏览器产生不同的结果。SauceLabs提供了一套解决方案，这种付费服务让你完全测试两个视觉呈现和交互元素的设计页面的同时，不用刻意维护你自己的测试平台。这里有免费可用的选项，可以给你一个简单的浏览器截图，SauceLabs的产品会更进一步地允许你查看每个测试的视频会话。

W3C VALIDATORS

www.w3.org/2013/validatorsuite/beta/

W3C是负责网页标准的发展和维持的机构，包括HTML5和CSS3，它提供了各种各样的验证工具，可以用来测试用户制作代码的有效性。虽然这可能看起来随意，并不一定反映了一个特定的浏览器页面呈现方式，努力朝着符合标准的代码来确保未来的兼容性是非常重要的。W3C为HTML5和CSS3代码验证做好保障，目前所有的验证器套件都在进行Beta测试，不久就可以迎来正式版。

响应设计测试

www.mattkersley.com/responsive

随着网页用户界面设计朝着响应方式发展，一系列的测试工具开发出来了，其中简单有效的工具当属Matt Kersley网站。进入URL，你就可以测试，页面产生的内容会模仿不同平台的屏幕，通过比较工具里的页面布局和测试，你的响应设计方法就有可能奏效，并且不需要和其他更深层次的工具联系起来。

JSLINT

www.jslint.com

JSLINT是一种JavaScript测试以及优化平台，可以让你进行平稳测试并对脚本进行评估，输出信息会显示你的JavaScript哪里出了问题，并且提供指示器帮你解决问题。JSLINT会在检测过程中发现在浏览器当中运行良好的代码，并将其保存，在之后的使用中会对这种方式进行推广，确保用户写出的代码更紧凑，并得到更好的优化。

Part 3 设计

让你的设计工作流程速度加快并且更有效率，用下面这些重要工具来帮你完成设计工作吧。

ADOBE DREAMWEAVER CS6

www.wordpress.org

Dreamweaver是Adobe创意组件的一部分，它包括一个完整的设计和发展环境，可以让你创建网站代码或者设计新的网页。整合服务器端和客户端语言预览和测试，并直接从编辑器实现先进的用户交互。它最好的价值来自于创造性的云服务。每月花费46.88英镑（约合430元人民币）就会得到Adobe的其它工具，包括Phootoshop、Illustrator以及Muse、Typekit等等。

WORDPRESS

www.wordpress.org

Wordpress最开始是为了博客平台创建博客并且把你的观点分享给世界而设计的，但是最近已经发展成熟，成为完全为创建和管理内容而制定、扩展的解决方案，它包括通过使用插件管理音频和视频内容，使得它成为网站管理和调配的领头兵。许多有活力的开发者开发了成千上万相关的插件，有免费的和商业的，包括电子商务、电子学习、门户网站，以及其他一些应用程序。

GOOGLE DOCS

www.docs.google.com

Google DOCS是一种基于云计算的免费产品，可以代替微软的Word和Excel，在调配到你的网站之前提供一个很好的储存空间。运用WYSIWYG就可以在一个浏览器页面展示，它同时也是不同用户之间协作的理想的选择，允许所有方都来观看内容，同时做出调整。它可以付费升级，但最基础的版本是免费的。

INKSCAPE

www.Inkscape.org

Inkscape是一种开放的可缩放矢量图形（SVG）编辑器，为创造网站模型提供理想的环境。这种工具箱和Adobe的绘画包相似。Inkscape创建的矢量图形适合网页的快速响应，软件有对应Windows系统和Mac系统的版本。

FLEZILLA

www.filezilla.project.org

FileZilla 是一种开放的FTP客户资源，它运用于Windows、Mac和Linux。尽管它是免费的，你会发现它的所有标准和商业中的是一样的，包括FTP、FTP超过SSL/TLS、SSH。连接UogongnengFTP服务器之后，你可以很容易地创建连接快捷方式。对于网页设计师来说，FTP是非常重要的工序，而FileZILLA在这方面会提供较好的服务。

WEB FONT SPECIMEN

www.webfontspecimen.com

这种免费服务会让你预览网页上的字体，包括有一系列行距和字体大小的段落，还有标题和字体样式，这使得浏览器上的页面字体变得更加准确和理想。

BOOTSTRAP

www.twitter.github.com/bootstrap/

这种快速的应用发展工具会节省你很多时间。它会为你提供样板文件包括JavaScript.CSS和优化不同设备工作的响应代码标记，包括平板电脑和智能手机，而不需要手动操作集合和垂直所有能成为丰富应用和网站工作的典型代码，以及一些能够提供出发点的有效的模板。它包括一个网站系统和排版导向功能，以及高级Javascript部件CSS组成部分。

HandBrake

www.Handbrake.fr

HandBrake让设计师迅速转化视频，并且这个服务是免费的。在你添加工作之前，仅仅需要选择一个硬盘驱动和输出设置，包括正常的网络选项。选择同样的文件最后导出不同的格式，快捷而不繁琐。

Magento

www.magentocommerce.com

虽然Magento对一般用户来讲比较复杂和难学，但它仍为构建企业的网上购物平台提供了极高的灵活性，并且可靠又安全。其特点包括，为构建多线上购物平台、多种产品类型和几百个支付服务提供商的系统提供支持。

GOOGLE WEB FONTS

www.google.com/fonts

如同其他的服务器一样，谷歌的页面字体在已经过去的几年发展起来，成为一个可以取代网页安全字体的可靠替代物。这种旧式字体让许多网站看起来趋于同化。它包括624中免费使用的字体——其安装程序也非常简单。把他们运用到你的网站上很零散，所有的字体也不尽相同，但是商业用途的确一样的。每一个网页设计师都需要把谷歌免费提供的字体收藏在工具箱中。

Part 4 样式

让你的设计工作流程速度加快并且更有效率，用下面这些重要工具来帮你完成设计工作吧。

ADOBE KULER

www.kuler.adobe.com

Adobe提供了一种浏览网页并为其选择色系的方法。那就是Adobe Kuler它包括上传图片和提供颜色样本功能，而且该应用整合到标准的Adobe设计工具中，从而减少了工作流程。

LAYER STYLES

www.layerstyle.org

Layer Styles是一种非常简单的网络工具，它就像Photoshop的版面样式工具箱。但是它没有在Photoshop里面产生面板样式。而是借助于CSS3代码。你可以运用到你的网站上，并且不需要注册——只是当你想要的时候把它标记出来然后就可以访问了，它会产生视觉上的版面样式代码。

ALOHA EDITOR

www.Aloha-editor.org

Aloha是一种兼容HTML5即视即所得（WYSIWYG）编辑器。这种编辑器可以跨浏览器工作，可以从用户输入信息产生标注你的HTML代码。通过可控组用户选择属性，搜集丰富的用户输入信息，并且不会出现混乱无用的代码以及跨度较大的代码，而这往往就是老WYSIWYG编辑器往往产生的。

SPRITEBOX

www.spritebox.net

这种简单的在线应用程序可以上传CSS 样式表贴图定位，并且在上面画线，以界定将用于CSS的不同区域。然后，该工具输出CSS代码并与所在区域进行匹配，从而简化这个产生清晰画面布局的过程。

SPLASHUP

www.splashup.com

Splashup是一种基于浏览器的免费图像编辑器，它可以让你的电脑在不安装任何软件的情况下产生位映像图形。这种应用软件融合了一些在线照相网址，包括Picasa 和flickr，并且提供与Photoshop类似的工具，可以免费下载。

Part 5 开发

获得这些现成工具、语言和框架可以让你的开发进程运行得更顺利。

JUICER

www.Bit.ly/xDXhW

这个命令行工具可以把JavaScript和CCS文件进行组合、合并和优化，减少你对网页的依赖性，加快载入时间。最关键的一点在于，它让你继续用独立文件来进行开发，依照你的喜好将不同逻辑和水平的表现区分开来。重要的是最后它只会输出一个单独的CCS文件或者JS文件。

ANIMATE.CSS

www.daneden.me/animate/

Animate.CSS是一个使用标准CSS3规格，进行完全渲染的预置CSS动画库，它可以在任何支持CSS3的浏览器上工作。

VIDEO JS

www.Videojs.com

使用标准代码可以给你的个人网站创造视频元素，Video JS库会自动使用Adobe Flash，为不支持HTML5的浏览器生成后备代码。即使浏览器不支持你的视频解码，这些后备代码也可以使用，这样就使用H264渲染HTML5的视频，但这些解码不可用的时候会回到Flash。

CAKEPHP

www.Cakephp.org

这是快速应用程序开发的一款软件，它为服务器端开发提供基础，你不需要抓狂于创造所有的标准通道。对数据库存取、确认、认证和转化都提供支持。还有一系列样板“脚手架”，它可以帮助你快速开发应用原型，你不再需要担心如何架构系统。

HTML5 BOILERPLATE

www.html5boilerplate.com

这个简单的模版可以让你快速开发一个HTML5使用的网页设计。它还为响应布局、智能手机触摸图标和谷歌分析提供预建支持。除此之外还附带有快速应用程序开发最通用的库——包括jQuery、Modernizr和Normalize.css。对于任何新的HTML5工程都是一个理想的开始，它可以省下你许多时间。

JQUERY

www.jQuery.com

jQuery是一个JavaScript框架和库，它宣告了富用户界面的到来，而且是网页中不需要插件的高级用户交互。

它让创造动画、确认和使用最少代码的UI控制变得简单。

同样非常功利的是它还对提取不同浏览器实现JavaScript和DOM的差别进行提取，使得它自身运行得更快。

GIT

www.git-scm.com

Git是一个免费、开源的分布式版本控制系统，你可以用它控制你的网页资产。它支持本地分支，分阶段和部署。当和线上资源库GitHub进行组合时，Git提供了一个特别可靠和有效的方法来注意代码变化、控制通路和出版。许多的设计者从来不操心分布板式控制，但是如果你发现你自己储存的文件都是用version2finalr3这样的名字，你就会立刻感受到Git控制带来的益处。

SENCHA TOUCH

www.sencha.com/products/touch

它可以帮助你开发移动优化网站，这样让你的网站看起来就像App一样。

Sencha Touch提供了一个完全的开发环境——包括对智能手机的支持——这里只列出了触摸屏和加速计。

虽然它使用特定的方法来生成视图，还要求对于JavaScript要有充分的理解，但是它依旧是一个功能强大的平台。

THREE.JS

www.Mrdoob.github.com/three.js/

网页中的高级3D可视化渲染，如果使用three.js这样的库就会快很多也会容易很多。这个功能强大的框架可以处理更复杂的WebGL语言，让网页可以使用相机、灯光和基本形状直接生成由简单到复杂的3D画面。它还可以在不同的设备和渲染引擎上使用。

CHART.JS

www.chartjs.org

在浏览器内生成图表已经变得越来越重要了，使用实时数据资源进行解读，并用视觉方式展示数据相比其他的资源库。Chart.js可以在网页开发中通过提供结构框架来开发富界面图表，让开发过程变得更加简单和易上手。

Part 6 代码

获得这些现成工具、语言和框架可以让你的开发进程运行得更顺利。

ECSSTENDER

www.ecsstender.org

eCSStender是一个非常便利的工具，它允许你单独编写一段符合CSS标准的代码，而不用去担心前缀、浏览器特定解决方案和技巧问题。eCSStender会自动拓展你的代码，让你的代码可以适应不同浏览器的特点。

COFFEESCRIPT

www.Jashkenas.github.com/coffee-script/

CoffeeScript是JavaScript中一种解释语言。CoffeeScript编写复杂程序时更轻松快捷，你不需要处理JavaScript中罕见的语法。它为快速应用功能开发提供了一个更好的方式，从此以后你不会再被代码本身所困。

GRID

www.Hashgrid.com

在你需要给网页镶入一个布局网格时，#grid会是一个很方便的工具。它允许你创建一个像素完美的布局，并且在不同浏览器上进行测试。只需要一个键盘快捷键进行激活，jQuery插件会自动适应你的首选网格大小，其中还包括了槽和多列。

PRIMER

www.primercss.com

这个简单又优雅的小工具将你的HTML粘贴到一个空的CSS样式表中，给你提供一个视觉效果的准备。把标记复制和粘贴到屏幕上的框里面，Primer会输出一组空白的CSS节点。这些节点是基于IDs并由你的HTML进行分类，并准备应用在相关类型中。这软件适合那些喜欢编写他们网站的代码结构，然后应用相关类型的设计师。

JS BIN

www.Jsbin.com

JS Bin是在线JavaScript、HTML、CSS的开发和测试包，它帮助你快速地开发圆形和功能。你不再需要一般的标准标记，或者手动下载库。它帮助你保存原型，并把原型转换成许多的格式，然后可以在不同的库中使用。你所需要做的只是点击你的鼠标。

Part 7 应用程序

让你的设计工作流程速度加快并且更有效率，用下面这些重要工具来帮你完成设计工作吧。

ADOBE AIR

www.adobe.com/products/air.html

Adobe Integrated Runtime（AIR）允许开发者打包为标准网页技术编写本地应用程序，让使用者可以在不同的设备中使用，包括Windows、Mac安卓APP市场、Kindle、iPhone和iPad。这让网页设计者可以使用现有的技术来创造复杂的电脑和手机应用程序，同时让设计者不需要再培训即可进入新的收入流并卖出机遇。

EVERNOTE

www.evernote.com

Evernote是一个在线剪贴簿服务。你可以用它储存、注释和检索广泛资源中的一个片段。当你研究一个特定工程的时候，这是一个理想的计划和准备工具。但是它也是在网页设计和开发阶段记录和提交灵感的一个绝佳解决方案。

DOCHUB

www.dochub.io

DocHub是一个简便的参考文档库，其中包括在大量常规网页技术有CSS、HTML、JavaScript、文档对象模型（DOM）、jQuery和PHP。只要选择一个技术，然后输入搜索项来筛选文件列表并选取明确的解释和代码。

WEB DEVELOPER TOOLBAR

www.Chrispederick.com/work/web-developer/

Web Developer Toolbar曾是开发者们在开发Chrome和Firefox网页时很流行的软件，不过现在依然值得在每个开发者的工具盒中。它提供大范围的工具来帮助开发者询问和分析浏览器中的网页。这个工具的功能包括概括和辨认DOM元素、直接在网页上编辑风格和控制脚本。

SPLASHUP

www.splashup.com

Splashup是一个基于浏览器的免费图片编辑器。你不需要安装任何软件就可以用它生成位图表格。这个应用软件结合了大量在线图片网站，比如Picasa和Flickr，还免费提供了许多类似Photoshop一样的工具下载。

Part 8 推广

一旦建立了自己的网站，你需要做一些工作促使用户浏览网站，并对网站有所期待。以下这些工具可以帮助你做到这些！

Facebook Developers

www.developer.facebook.com/

Facebook不仅仅是一种社交网络，越来越多以用户为中心的网站开始开发Facebook应用。用户可以点击Facebook平台提供的网页内容，可以更方便地分享内容，帮助网站设计师进入一个全新的市场，这是以前很难做到的事情。因此，开发者可以注册Facebook开发程序，并借助Facebook平台更好地完善独立网页开发。

ADD THIS

www.addthis.com

AddThis插件可以为用户提供定制化的工具套件，并有意将其整合到网站设计中。该插件在操作上十分简单易懂，只需要选择代表你所需功能和风格的按钮，然后将代码复制/粘贴到相应位置就完成了。你也可以查看分析和使用情况统计来帮助你提高网站社交网络的作用，从而使AddThis成为有价值的推广工具。

Google Analytics

www.google.co.uk/analytics/

谷歌分析工具提供全套分析和优化数据，可以帮助你追踪和监测使用情况，管理转换和目标，同时改善用户体验。和标准工具箱一样，谷歌分析工具同样适用于所有网站统计软件。用户点击网站后可以通过该分析工具浏览实时数据，利用关键词追踪到最活跃的访问者以及花在google上的钱都用在了哪些地方。AdWords可以提供最佳的投资回报。

SEO DOCTOR

www.addons.mozilla.org/en-us/firefox/addon/seo-doctor/

SEO DOCTOR每种扩展程序都可以提供相同的功能，但需要通过处理共同的搜索引擎优化（SEO）故障和错误改善搜索引擎的网站性能，从而提高网站的流量。SEO DOCTOR的功能包括追踪不可搜索的内容、链接统计以及反馈HTML代码中SEO功能的健康状况。总的来说，这款入门级工具可以帮助开发者避免最常见的错误。

HOOTSUITE

www.Hootsuite.com

由于社交网络对市场营销和在线商业促销起到越来越重要作用，因此现在必须积极利用网络来为客户提供更好的服务、更新网站访问者、客户以及推广网站。HootSuite可以有效地把各种主流社交网络融合到一个界面中，这样可以监测并追踪网站上的互动，推出状态更新以及服务信息，可以更方便地维护客户关系。

UX设计

在设计阶段把精力集中在用户体验路径和网址结构上可以避免最后出现不好的结果。画出框架和流程图，可以在这个阶段节省很多时间。只要你贴上HTML标签，客户便会在最终产品下线前对其有更明确的认识。

首尾相连

最简单有效的测试方式是在开发过程中进行检查，而不是在项目最后，你需要首尾相连的检查，但是太激进的话会减少出故障的数目和检测阶段的时间。

框架

运用框架来节省时间并且避免白费力气的重复工作。我们将会选择一些普通却很受欢迎的框架把它们列入我们50个必备的工具中。但事实上，还有许多框架有相同的优点，因此，找到一个适合你的会加速你的开发。

资产

设想一下你怎样再次使用你之前产生的资产，并且开始管理见的图表和图形文件在密茨进行新的项目的时候方便寻找或者搜集新的资产。

社交

过去几年内，网站发展越来越以社交为导向，而且这种趋势在短期内不太可能改变。基于这个原因，网站开发者绝对有必要结合目前主要的一些社交网络，并将其作为一种必要的手段来增加网站流量。

TIPS5——重新使用

在你开发的过程中给你的代码添加一个好的评论，会便于你以后重新使用你代码里面的元素。你可以在推出网页之前利用预处理程序脚本删除保留在开发文件中的评论。