有用的Web或者手机UI设计工具
(2011-11-24 13:29:20)勾勒出一个网站、软件或者其他产品的UI基本的UI元素非常必要,一些线框工具UI设计工具此时就派上了用场。当你想为你的项目做一个草稿模型,你可以使用这些工具,设计出一个你心目中的外形,让你保持较高层次的抽象而不陷入细节之中。
这篇文章,我们为大家概述一些有用的Web或者手机UI设计工具
Free Mobile GUI PSD
Android GUI PSD
这个Android GUI基于Android 1.5GUI上的元素,用于帮助开源社区进行Android程序开发。大部分元素和实例都是矢量图,方便缩放。字体是Android Sans。
RIM Blackberry PSD
一个完整的图层样式,拥有135个图层。
Android Sketch Stencil Version 1.0
Android OmniGraffle草图模板,这个框线图帮助开发者避免过于关注界面设计,鼓励其聚焦于程序的行为和功能。
All elements of Maemo 5 GUI in PSD
这个可下载的PSD文件包括了提供给Maemo平台的GUI模板。对于开发运行于Maemo平台的GUI原型程序是绝对需要的。
iPhone 4 GUI PSD(视网膜显示)
创新者必备的视网膜显示(640X960)的GUI PSD文件。这个文件非常大,足足有62.7MB,长宽为4074X2986。最大屏幕的电脑只能查看原尺寸的25%-50%。
iPad GUI Kit in PSD
安iPad原始尺寸768X1024制作,绝大部分图形元素使用矢量图形,为高分辨率演示提供很多的放大空间。此版本为PS图层,便于模型设计和客户展示。
Adroid 1.6 Wireframe stencil for Omnigraffle
下载这个漂亮的OmniGraffle 5.x附加线框模板,在1.6 Donut SDK上开发Android程序或者网站吧。
Google Android GUI PSD
矢量版Android GUI元素。
iPad GUI PSD Kit
包括全尺寸的图形界面,256,128,和64像素的图标都有,该包分别包括PSD、PNG、Mac ICNS格式的四种尺寸大小的iPad图形界面。
Google Android PSD
一套Google Android原型的模板
Firework template for Android
Firework版模板,矢量重绘Android UI元素。包中的元素模板根据Android部件名称命名。
Sexy Vector Cell Phone
可缩放到任意大小。可轻松添加自己的图片到屏幕上,所有对象都是分层分组标注好的,非常容易定制。
iPad Stencil for Omnigraffle
包括背景、标题栏、按钮、选择元件等其他iPhone UI元素。列表、标题栏、按钮、滚轮上的文本都是可编辑的。
iPhone App Wrieframe Template
Mobile-iPhone
iPhone GUI Elements
一些非常漂亮的iPhone元素,为分层的PS文件。
iPad and iPhone Design
非常详尽的模板,用它们设计你的iPhone、iPod Touch和iPad软件吧。所有的模板根据OmniGraffle原型手工制作而成,清晰的分组,可缩放,可调整大小,Graffle中方便导出成其他的矢量格式文件。
Design Stencil for iPhone and iPad
一个适合正在设计的iPhone、iPod、和iPad系统程序的模板。此模板是针对那些熟悉UIKit提供默认的视图和控件的发开者的。
Apple iPad fully editable PSD
一个可编辑的PSD格式的Apple iPad。所有图形都是可编辑的,可缩放的矢量蒙版。
Plam Pre PSD
这一套模板包含了一张PSD来帮组设计者使用PhotoShop设计抛光感的界面。
iPhone UI Vector Elements
绝大部分可是的程序都是首先在AI中先有实体模型的。这里是一些非常酷的iPhone UI矢量元素。还包含一些不错的Phtoshop资源或者OmniGraffle格式的iPhone UI文件,甚至都有。
iPad Vector GUI Elements:tabs buttons menus icons
这套模板几乎包含了所有的iPad UI元素,按钮,标签,菜单,键盘和气泡等等。对设计者和开发者都非常有用,她包含了可编辑可缩放的矢量版本(AI)。
Free Social Networking GUI PSD Kits
免费的图形分层Fackbook GUI工具包
为了加快Fackbook应用的UIs或者Fackbook迷页面的开发产生了此工具包,为你节约绘制各种UI组件的时间,可自定义所有文字字、按钮等其他你需要的数据。这个工具集是完全免费的,可用在任何项目之中。
Facebook GUI Free PSD Resorce
FBGUI,一个Facebook图形界面Photoshop资源,让你工作更加轻松。
Facebook Applications
可缩放的元素集合,可用来绘制Facebook应用草图。
Omnigraffle Twitter Widget Stencil
这套工具包含了很多有用的Twitter小工具和徽标。
Wireframing Kits
Best Practice UX Forms Stencil v1.1
一个全面的遵循UX最佳表单设计实践的模板,提供三种不同方式布局表单,每种布局方式各有千秋。此模板还提供不同布局的按钮控件,进度条,可编码的验证输入字段,label等。
Form Elements UI Kit
来自Yahoo!设计模式库中的模板设计工具包的表单元素。
Wireframe Shapes
为Mac OS X准备的准备的一套制作线框图的图形。它有很多基本元素你在UI设计中一定非常需要。
Wrieframe kit for UI Designers
包含非常多的线框工具,比如产品详情,项目列表,头版页,手机模板等。
MBTI sketching pager
MBTI构思讨论的草图设计。对理解box的死人格特质有很大帮助。每张纸上描述一个设计的挑战和解决问题的办法。
A4 sketching paper
在对具体功能有了想法之后使用这种草图纸,根据自己的想法构建初步的界面。
Wireframe Magnets(DIY Kit)
这个DIY的磁铁模板基于Konigi线框工具,它包括三张对于白板模型非常有用的元素集。简单把下载的PDFs文件打印为磁铁板,使用干擦标记好,用层压法,然后将它们剪开。
Paper wireframe templates
像PSDs的样子,成品包括七中变化
Wireframe template
非常有用的可打印的草图模板,可下载
iPad Idea Sheet
三张图:一张全尺寸(横向),一张70%(竖直),一张50%(横向)。80个小点可以非常方便的分割在屏幕的水平方向和竖直方向上做分割。
Scenario,Taskflow and Grid Shetch Sheets
一套漂亮的可打印的模板,有助于构思和草图设计。
Free Photoshop browser template
在设计陈述中很需要一个干净的浏览器截图?不用等了!这里有免费的专业的浏览器模板,不同的1024X768,800X600分辨率的都有,以及各种爱好。
Interactive Sketching Notation 0.1
这些符号背后的思想是为了可视化与用户交互的状态和更清晰和迅速的明确用户的动作。
Mobile Full iPhone GUI
对于WinterBoard的使用者来说,这是个测试版,所以可能存在没有风格化的元素。
Android Wireframe Templates(PDF)
Free Keynote UX Stencils
Advertising Stencil Kit
一套非常有用的广告模板
Dragnet website wireframes kit v 0.9
Dragnet网的草图框架工具集,0.9版本,Adobe Fireworks文件。包含超过25中对象,对于快速构建网站原型非常有用。完全免费,可下载。这个工具集包含可web设计的很多元素,例如滚动条,按钮,菜单,Alerts等。
User Interface Design Framework
这套全面的非常漂亮的设计框架包含了一个GUI库,有成百上千的矢量元素,可用来做界面设计。小巧的UI图标集包含了260个矢量图形,还包含200个AI样式。
Browser Form Elements PSD
包括两套模板,Mac中Firefox 3和Vista中的IE7
Sketching and Wireframing Kit
一套草图线框元素集,表单元素,图标,指示器,反馈信息,导航元素,图片占位,嵌入式视频,滑块以及普通广告banners应有尽有。
Photoshop Form Element Templates
包含各种常见的表单域以及鼠标指针,非常易于使用。
Web Browser Elements
集中于一个易编辑的PSD文件上,包括一些下拉菜单,输入框,单选框,复选框,按钮,文本域已经滚动条等,很棒,非常易于使用。
UI Design Kit
这套 Web UI工具使用 图形对象制作,有些情况下可转化为智能对象,有很好的缩放性。
Wireframe Symbols
下载包包括一套符号库以及一套完整的AI文件。所以元素在画图板上都被区分开来。如何使用这个库?简单的将Wireframe Symbols.ai上的元素拖放到AI符号库里。每次你需要的时候,从符号库里拖出来就好了。
Web UI Element Pack
PSD格式,19中web 元素。包括,加载条,默认状态按钮和按下状态按钮,按钮切换,关闭图标,”上一个“,”下一个“按钮,分页图标,以及滑块。
Wireframe Kit for Google Drawings
OmniGraffile Stencil for Ext JS v3.0
这个Ext JS Omnigraffle模具的升级版包含了很多提高和补充,如以Graffletopia形状以及组重建绝大多数的Ext JS 元素,尤其在对缩放标题,表格等有很大的帮助。
Flex 3 Stencil
包含所有Flex 3样式指南中的所有组件:面板,数据格,按钮,表单域,连接,开关,菜单,滚动条,折叠,标签,列表,日期Picker,Toolstips以及Error等。
Agua GUI
从GUI设计项目1.2以及Mac OS X界面模板获得灵感,一套基于Aqua,一简化window设计的模板。
Flex Darkskin PSD UI
16张PSD,非常漂亮的模板。
Web Wireframe Kit
这是一套给设计师的简单布局设计的模板,简单,高效,节约时间。
UI Buttons and Icons
包含165个高质量的UI图标和按钮,五种不同颜色。AI,JPEG和SVG格式。
Quommunication Stencil kit
一套包含草图设计的所需的元素,RSS源,颜色,广告单元以及浏览器框和网格。
Mac OS X Interface 2
一套Leopard-y的交互模板工具,在保证像素表现的前提下最大化的运用table获得最大的灵活性。
OmniGraffle UX Template
OmniGraffle Pro(v.5)交互设计模板,包含为基础的UX文档需求提供的共享层(标题页,线框图,和用例面板)。
Template for Blueprint CSS Comps
这个套模板可以以一个CSS布局框架来进行设计,这套AI文件以24网格分割,可适应一些例如Blueprint的CSS框架。
Apple Elements for OmniGraffle
Apple硬件产品以及一些网络设施的模板图。非常适合于制作物理图表。
DevianART ID PSD Kit
15个专业设计,完全可定制化,包含迷你型和原始ID模板。
Browser Screens and Website Elements
一套非常有用矢量资源来帮助你快速搭建客户端程序模型,present你的工作,或者快速布局一个web站点。
960 Grid Template for OmniGraffle
Control of different browsers for designers(下载链接)
PSD库,包括Mozilla Firefox,Opera,IE以及Safari不同浏览器的控件。
Useful Articles
- The Importance of Wireframing
一篇全面介绍线框设计扮演了如何重要的角色。
- The Future of Wireframes
随着web设计下一个十年的到来,重新评价和理解线框图的时候到来了,一个经得起用户体验的产品。
- Wireframing Is Not a Religion
线框设计是一种不可或缺的设计思想,一个数字的草图,随时可以修改擦除或者恢复。
- Five Commandments for Wireframing
Paul Boag是一个线框设计迷,坚信线框设计是设计进程中不可缺少的部分。他在设计中坚持五个牢不可破的规则。
- 20 Steps to Better Wireframing
项目开发过程中可能最大的错误就是没有定制计划,这篇文章讨论其原因。
Resources and Round-Ups
- I Love Wireframing
一个tumblog专注于线框,原型,实物设计。
- Wireframe Showcase
在这个网站可以查看一些基于线框设计的网站,可分析学习设计人员是如何将实体模型转化为设计的。因为线框和设计都是由设计者自己上传的,每个线框设计都包含了一个简短的说明。大部分的网站原来是数字实物模型,有容易修改和重新设计的优势。起结果是令人愉快的线框设计。
- Standard Screen Patterns for Web Interface Design
一些互动设计的原则和模式
- 50 Free UI and Web Design Wireframing Kits and Resources
这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。
- A Collection of Printable Sketch Templates and Sketch Books for Wireframing
20个资源,用于应用程序开发的草图阶段。
- A Collection of Printable Web Browser Sketching and Wireframe Templates
这些可打印的草图模板都是特意为web设计人员设计的。附加有浏览器的版本说明(Safari,Chrome甚至Firefox)
- Useful(Offline) Utensils and Tookits for Designers
当你可以使用一个预制指南来节省时间,更好的发挥你的创造力,为什么还要从头开始设计呢?在这篇文章中,你将得到很多很棒的免费工具,一个笔记集合以及一些要购买的产品来帮助你线下设计。
源地址:Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files
WSD:
http://wsd.tencent.com/category/team-torment
MUX:
http://mux.baidu.com/
WEBPPD:
http://www.webppd.com/bbs.php