做网站UI设计常用的软件分享

如果担心不知道如何设计网站、编辑网站技术程序，很多人会选择快速又便利的Wix建设。然而，如果想要建造一个最适合的网站，独特设计网站还是你的不二选择。网站设计中的UI设计与一般平面设计不一样，所需的软件也不同。这篇文章要来介绍实用的UI制作工具，入门初学者尤其需要详细阅读，找到最适合自己的软件。

一、网站流程和互动设计工具

1. OmniGraffle

用来绘制图表，流程图，组织结构图以及插图，也可以用来来组织头脑中思考的信息，绘制心智图，是设计网站前的工具之一，有个小小缺点，就是只能于执行在Mac OS X和iPad平台之上而已，可以输出PDF，TIFF，PNG，JPEG，EPS，HTML图像对映，SVG，Visio XML，Photoshop和BMP等一系列文件格式。OmniGraffle使用苹果的XML schema格式的plist储存数据，其扩展名为.graffle。

2. Draw IO

免费在线图表编辑工具，可直接链接Google Drive或是One Drive等等云端中，提供了很多类型的图示，还能随时随地储存您的编辑过程，而图档汇出格式支持多种类型格式，且支持中文显示。

3. InVision

主要是制作可互动的prototype，容易操作，画面简洁美观，可以透过Craft在sketch里的插件来汇入你的图稿，也可以直接上传jpg、png、gif等影像来创建一个项目。可以加入手势以及简单的转场动画跟滚动条滑动，方便与团队合作或客户讨论，整合性非常高的工具。可以加快前期沟通流程。

4. Principle

一款互动设计软件。相比 Pixate 更容易上手，接口类似 Sketch 等做图软件，思路有点像用 Keynote 做动画，更可视化一些。制作动画门坎低，提供的动画原型效果已经很足够。您不需要花非常多的时间。再您的UI上加上一些动画，能使原型看起来更真实，不过Windows系统一样支持喔。

5. Axure

高拟真的原型工具， 能够帮助您准确地展现高层次的细节和概念，适合于外部沟通，让客户了解网站的功能和操作流程，除了能相互链接之外，也提供许多丰富的互动设计。Axure RP 由 Axure Software Solution Inc.所开发完成，在美国深获好评，您可以搜索到非常多相关的文章，不管是 Axure RP 使用经验分享或产品评价。悠识以提供网站使用者经验 (Web User Experience)服务为核心，为您寻找适当的工具软件是最重要的服务之一，现在 Axure RP也支持中文版了。

6. Balsamiq

Demo Content手绘风格低保真原型，绘制Wireframe草图的工具之一，简易好操作，想象的到的流程、规划、产品印象、相关的图表与作业，几乎都找得到符合的对象来做说明，可以很简单的把你想表达的东西物像化适合呈现产品初期的概念。而且能够快速讨论、调整，着重于核心框架层，而不是视觉部分。好处是省时、高效；相对地，由于省略过多界面细节，较适合快速呈现自身想法或是内部沟通。

二、网站配色工具

1. Material.io

Material.io是Google提供的配色工具。

当你点击任何一色彩时，右下的的Primary会提供给你适当的主要配色组合，另外点击Secondary即为辅助色的配色组合，用于强调UI组件，左方画面会实时呈现效果。

2. Adobe Color CC

Adobe提供的在线配色工具。

功能非常的齐全，除了进行配色也可以创建色票、汇入图片选色，另外你也可以浏览已建立好的配色组合，于登入后皆能够储存于Adobe Creative Cloud数据库。

三、给自己打造一个网站设计工具库

新的工具不断的推出市场，建造你的专属资源库，让工作效率提升！以上是各种工具的介绍，当然还有更多丰富的资源等着你去挖掘。若你想专注于快速原型设计、强大的团队合作工具、灵感发想工具和使用者体验测试等。这些有利的资源发展累积了相当多实用的技巧和方法。

1. Coolors

Coolors 是一款快速的配色工具。

你可以找到热门的配色方案，同样可以从图片中取色，提供转存成URL, PDF, PNG, SCSS, SVG和COPIC等不同的格式。

2. uiGradients

越来越多网站加入渐层配色，适当的渐层色能提升网站的质感，通过CSS3的技术，可以不再使用图片式的渐层背景，不会拖累网站效能，且放大后也不会模糊，而现在可以利用一些配色工具网站提供的服务，得到相当有用的配色程序代码。

3. NIPPON COLORS

日本的传统配色网站，提供CMYK、RGB、HEX共250种精选色彩。若网站需要比较古典风格，此网站是不错的参考工具。