Web 设计师的 50 个超便利工具.docx

1、Web 设计师的 50 个超便利工具 Web 设计师的 50 个超便利工具（上） 作为一个 Web 设计师并不容易，不仅考虑设计与架构，还要时刻注意各种小细节，设计师的工作被各种各样的问题包围，你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题。本文介绍了50个非常强大的工具，你会发现，其中的一些工具会让你感到惊艳在，这是第一部分。LaunchList 站点发布前的工作清单，预设了28个需要检查的事项，也可以自定义。同类工具： Ultimate Website Launch Checklist 以及 The Ultimate Website Prelaunch Checklist 。Pe

2、ncil Project: Sketching and Prototyping with Firefox 一个开源 GUI 原型设计工具。Zootool 一个非常漂亮的书签工具，可以将你收集的各种素材，图片，文档，链接，视频等在线组织到一起。Bounce （推荐）输入一个站点地址，该程序会给该站点截图，然后，你可以在上面批注，加评论，并和朋友分享。非常适合用来和您的客户在线就某个站点的设计进行讨论。Ninite Batch Installer 这个站点可以将很多免费的流行软件（最好的版本）打包在一起，一次性安装到你的机器，支持 Windows7，Vista 和 XP。Support Detai

3、ls （强烈推荐）假如你想让你的用户提供他/她所使用的浏览器环境，比如 Flash 版本，操作系统，屏幕分辨率，Cookie，JavaScript 状态等，可以让他/她访问一下这个站点，这个站点或自动将这些内容探测出来，并允许用户现场通过邮件将报告发送给你。MugTugs Darkroom 一个在线图片处理程序，可以调整对比度，白平衡，曝光，饱和度等，可以从 Picasa 及 Flickr 上传图片，同类产品：Pixlr 及 Sumo Paint 。Visual Website Optimizer （强烈推荐）Visual Website Optimizer 绝对是你所能见到的最好的 A/B

4、测试工具。Keyonary 这个简单的在线工具可以帮你列出 Mac OS X， Photoshop 等工具的快捷键清单。gridr buildrrr 一个在线网格设计工具，选择你希望使用的网格布局，帮你预览并生成 CSS 代码。Instant Blueprint Create a web project framework in seconds. 帮你瞬间生成一个 Web 项目框架，基于合法 HTML/XHTML 和 CSS。Hummingbird 一个实时的（真正的实时，每秒刷新20次）站点流量分析工具，基于 Node.js.jsFiddle 在线 Web 编辑器，支持 JavaScript

5、, MooTools, jQuery, Prototype, YUI, Glow, Dojo, HTML 以及 CSS。String: create a multi-language website or app 帮你创建多语种 Web 应用的资源文件，Titanpad 可以多人同时编辑同一个文档，别的改动会实时以不同颜色标识，可以是同一个办公室的多个用户，也可以是地球另一边的多个用户。Pixelnovel Timeline: Version Control for Adobe Photoshop 该工具通过插件方式集成 Subversion 客户端，可以在 Photoshop 中实现版本控制

6、。非免费工具。0to255 给出一种颜色，会帮你列出这种颜色由浅入深的各种颜色变化，并特别针对 Web 做了优化。Load Impact: Website load/stress test 一个在线压力测试工具，模拟多用户同时访问你的站点，并出具报告以分析你的站点可以支撑的访问者数量。Ideone: Online IDE & Debugging Tool 一个在线 IDE 和调试工具，支持多达40种语言，包括 C+, Java, JavaScript, Perl, PHP, Python and Ruby，同类产品：PHP Anywhere 以及 CodeRun 。Online Dummy I

7、mage Generator 快速帮你生成一个在线虚拟图片，以便您进行某些测试。HiFi RegExp Tool 在线正则表达式工具。Tableizer （推荐）将你 Excel 表格中的内容复制粘贴到这个站点，它会帮你生成 HTML 格式的表格（HTML Table）。FollowUpThen: Easy Email Reminder -假如你希望有人提醒你什么时候该做什么事，你可以给比如 1day 一类的地址发个邮件，1day 表示一天后，这样，一天后，你会收到他们的提醒邮件，1day 可以改成人和别的时间间隔。Divine: Conversion tool from PSD to HTM

8、L 这个工具是一个 Photoshop 插件，可以将你的 PSD 转换成 WordPress 主题。（译者：有待验证）本文国际来源：Smashing Magazine 50 Powerful Time-Savers For Web Designers （原文作者：Vitaly Friedman ）Web 设计师的 50 个超便利工具（下）作为一个 Web 设计师并不容易，不仅考虑设计与架构，还要时刻注意各种小细节，设计师的工作被各种各样的问题包围，你需要一套超级便利的工具帮你解决各种消耗时间和精力 的问题。本文介绍了50个非常强大的工具，你会发现，其中的一些工具会让你感到惊艳，这是第二部分。K

9、aleido为你的代码创建视觉化标识。来自麻省理工。Sketchpad一个强大的在线图像编辑器。难能可贵的是，这是基于 HTML5 的。Unicode code converter虽然界面有些乱，但这个工具能把一段文字转换成各种编码形式。Grid System Generator另一个网格设计生成器。 namecheck （强烈推荐）这个看似简单的工具，可以帮你查询某个名字是否还可以注册域名，商标，已经社会媒体网络入口。Typograph Scale & Rhythm这个工具可以帮你即时预览各种不同的 Web 排版效果，并生成代码。ColorBrewer Intro Selecting Goo

10、d Color Schemes for Maps适用于地图的配色工具。CSS Inliner Tool （推荐）将独立的 CSS 定义转换为 Inline CSS。假如你使用电子邮件进行营销，会发现这种工具非常实用，因为邮件客户端常常会将你独立的 CSS 代码过滤掉，而 Inline CSS 不会被过滤。HTML Purifier Filter your HTML the standards-compliant way!这个使用 PHP 设计的工具，可以对你的 HTML 代码进行过滤，去除其中的恶意代码，并按 W3C 标准对代码进行净化。Rendera在线编写 HTML5 和 CSS 代码，现

11、场看到效果。RegExr又一个在线学习，体验，测试正则表单式的地方。try ruby! (in your browser)Ruby 在线体验。Google Command Line使用命令符访问 Google 的一些产品和服务。Tiny Fluid Grid又一个网格设计工具，很小巧。F这个很别致的站点，可以帮你快速接通那些大公司的免费技术电话，不过目前只能用于美国和加拿大。Producteev: Creating To-Do Lists with Emails （推荐）把重要的工作安排发到 task，他们会帮你生成一个任务列表，以便安排你的日程。AddUse User research ma

12、de easy一个在线用户测试或调查管理工具。bookwhen （推荐）帮助你的用户在线预订你的展会，课程等服务，免费版支持150个项目以及每月300个预订。世界Web设计最新潮流19年前，世界上第一个网页诞生，它没有设计可言，由文本和url组成，样式只有最基本的。而如今，Web设计已经成长为独立而庞大的设计门类，一个网页的创造需要多个工种、多种技术的参与，其流程的复杂性和挑战性已经超过任何传统设计类别。 这19年间，网站拥有者越来越清楚自己的目标，而设计师们也越来越理性和专注，人们在不停寻求商业诉求、用户、审美和技术上的平衡点。每一年过去，都有无数过时的风格、特征元素以及实现技术被抛于身后。

13、 设计风潮体现着一个时期内人们对特定的风格、趣味、审美、技术乃至理念等各种模型或特征的追随。新技术的发展、媒介载体的占有量的变化、新网站类型的诞生、全球的设计思潮的影响、行业领军者的转变、明星设计师个体的亮点，这些因素都在推动潮流的变化。你可以回想一下那些曾经风靡一时的模式：复古的像素样式；Google的朴素之风；韩式清新插画风；Flashsite的兴起带来的不规则布局和动画的滥用；Apple引发的对质感的追求；用户和情境意识的觉醒；对细节的关注圆角和阴影的广泛运用；Web2.0设计风潮中典型的配色和特征元素；空间与层次感的魔术09年流行的半透明风格空间和层次感的魔术潮流的涌现，是社会一致化与

14、个体差异化的碰撞，每一次碰撞都推动着这个行业的进步。 让我们来看看这些发生中的变化：简洁，精简，极简 极简主义（Minimalism）在这一年大热。原因有4点： 1.手持便携设备的占有量逐步上升，人们的访问方式发生了改变，小尺寸屏幕所需的精简之道反过来影响了整体的设计趋势。 2.Apple公司简洁、专注、充满诱惑力的设计哲学重领潮流，效仿者众多。 3.来自全球设计思潮的影响：极简、禅意、人文、空间感的“日式风格”这两年在出版界、时装设计、包装设计、工业设计界都颇受追捧。 4.网站的专业性和针对性在进一步加强，人们选择一个网站一次把一件事做好、做到极致，而非盲目扩张。这也使“精简”拥有更大的实现

15、空间。极简主义体现设计师对意图、受众、情境的强大控制力。不是简单的做减法就可以了，如果不能很好地把握取舍的宗旨与理由，一个为了极简效果而精简的页面可能看起来庸俗不堪，是为“做作”的留白。 操刀这一风格需要对作品有充分的自信和理解力，更重视细节和布局，把握恰当的对比、强调。来自版式和留白的均衡美感极简主义风格非常适用于以图片为表现主体的网站极简主义的风潮中，还涌现了许多单页网站。所有内容都放在一个页面上呈现，通过分屏来巧妙地布置格局，不再有跳转和复杂的站点结构，一目了然。更有人情味与趣味的设计 运营上的专注使得设计师们可以在设计中投入更多的感情，更有针对性地取悦受众。从保守、冷漠、功利的陈旧风貌

16、中，涌现出更多富有生命力和趣味的产品。Twitter取得了巨大成功，可爱的小鸟形象深入人心。以动物为主题的logo和网站吉祥物也随之风行起来。这一变化出现的原因： 1.是具有针对性的中小型服务和应用类网站大批涌现。 2.是来自示范者的力量。 3.是多元化的必然趋向。 4.是在功能性、规范性和用户体验之外，设计师开始寻找那些从未出现过的、能更深层次打动用户的东西“一种在感情上赢得人们喜爱的东西”。亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。曾经很不常见的高饱和度的配色，这种充满动感和生命力的高调设计让人充满惊喜。对传统设计的借鉴Web设计这个年轻的分支在自我生长的同时，也在不停向传

17、统设计汲取营养。在布局与版式方面，设计师们一直在探寻更好的表现手法，所以尝试从传统的设计媒介中寻求灵感。杂志版式布局（Magazine-styleLayouts）的从2009年就开始大热，不光大型新闻网纷纷求变，杂志版式布局的WordpressThemes也炙手可热。这一变化对传统设计不仅仅是形式上的追随，更重要的是尝试去借鉴与融合的态度。Times和Financial Times都是国外老牌媒体，他们的网站布局结合传统纸媒版式有许多新潮的亮点，比如竖式的流体布局、图文混排、头条强调，由标题字号变化带来的层级差别。由比较可见，国外的大容量信息网站的趋势是降低首页的信息密度，把内容分摊到二级频道

18、；版式上更具引导性、更适于阅读，浏览方式像读报一样更流畅随意。由于广告盈利价值的差别，国内这类网站还是使用信息密度极高的索引模式，所以看起来更像说一份导流量的“黄页”而非可随心阅读的媒体。在信息呈现密度与模式无法改变的情况下，照搬国外的版式布局是非常危险的。除了在样式上的借鉴，传统版式设计上的许多经典的实现手法也移植了过来，最著名的就是黄金比例和栅格系统（GridSystem)。栅格系统的历史有300多年，运用严谨的几何网格来指导和规范元件的分布排列。将传统栅格移植为适合网页设计的系统，不光是创造了一种工具，也产生了一种普遍的审美规范与倾向。无论你是选择遵循规范还是打破规范，都是对它的推动。9

19、60px宽的网页栅格系统个体风格带来的变化谁才代表着趋势？有人认为设计师们所追捧的变化代表了潮流，有人认为Top100的大站才是大势所趋。狡猾一点说，两个说法都不确切，网站运营的Top100并不代表设计上的Top100，出于多种原因，很可能它们是最保守的阵营。但你无法忽略它们对用户/客户的审美及视觉习惯造成的影响。而设计师们虽然愿意挑战和尝试变化，但在面对个人化设计和商业设计时，他们的取舍却往往不尽相同。巨头和个体们在设计风格一直在互相影响和渗透。所以你永远不应该轻视那些看起来“个人化”和“小众”的创新设计。观察它们的最好舞台就是设计师的blog和profile站。下面这几点都是从现在小众网站

20、上流行，慢慢被许多普通大众网站设计所趋向的特征。内容放得再多再好，但用户记不住“你是谁？”也是白费。更大header区强化了用户对品牌和风格的记忆，让你有更多的发挥余地去表现。更大header区，更醒目的logo和标识，字号更大的标题。 在背景中使用恰当地纹理。十几年前，在美化手法贫乏的年代，人们也喜欢在背景中使用纹理，但大多只取得了浮华嘈杂的效果。现在的设计师们学会了理性而低调的使用纹理来制造风格、提升品质和烘托气氛。两个电商网站：左图是户外服装，使用了粗砺的水泥纹理。右图是婴幼儿用品，使用了清洁柔和的圆点纹理。把Footer区利用起来：更注重品质，更能抓住用户眼睛的设计这点变化在和消费挂钩的网站上非常明显。设计师们注重对设计心理学和视觉传达的技巧的运用，使用强调和对比的策略来引导用户的视觉焦点。更醒目的标题、高质量的图片，使用Slideshow来创造更多展现空间，这些手法都在强调那些希望得到用户关注的地方。Apple网站的专业、直接、有效的界面设计，不光打动了消费者的心，也吸引了众多开发者的效仿，大量App应用网站都以使用Apple风格为荣。