[产品相关]免费的线框工具,UI设计工具,PDFs,资源等

自己的工作一直都有做线框图之类的,看到一大堆这类的工具,先收藏备用吧。真的很多很强大

勾勒出一个网站、软件或者其他产品的UI基本的UI元素非常必要,一些线框工具UI设计工具此时就派上了用场。当你想为你的项目做一个草稿模型,你可以使用这些工具,设计出一个你心目中的外形,让你保持较高层次的抽象而不陷入细节之中。

这篇文章,我们为大家概述一些有用的Web或者手机UI设计工具,可获取的PDFs和其他资源,你在你的项目中使用它们。这些经过精心挑选的非常有用的工具让你开始项目的初级设计吧。

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程序或者网站吧。

Wireframes-132 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android GUI PSD

矢量版Android GUI元素。

iPad GUI PSD Kit

包括全尺寸的图形界面,256,128,和64像素的图标都有,该包分别包括PSD、PNG、Mac ICNS格式的四种尺寸大小的iPad图形界面。

Uidesignkit55 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android PSD

一套Google Android原型的模板

Uidesignkit54 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Firework template for Android

Firework版模板,矢量重绘Android UI元素。包中的元素模板根据Android部件名称命名。

Uidesignkit52 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sexy Vector Cell Phone

可缩放到任意大小。可轻松添加自己的图片到屏幕上,所有对象都是分层分组标注好的,非常容易定制。

Uidesignkit42 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Stencil for Omnigraffle

包括背景、标题栏、按钮、选择元件等其他iPhone UI元素。列表、标题栏、按钮、滚轮上的文本都是可编辑的。

Uidesignkit28 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone App Wrieframe Template

Uidesignkit45 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mobile-iPhone

Uidesignkit44 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone GUI Elements

一些非常漂亮的iPhone元素,为分层的PS文件。

Uidesignkit5 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad and iPhone Design

非常详尽的模板,用它们设计你的iPhone、iPod Touch和iPad软件吧。所有的模板根据OmniGraffle原型手工制作而成,清晰的分组,可缩放,可调整大小,Graffle中方便导出成其他的矢量格式文件。

Uidesignkit46 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Design Stencil for iPhone and iPad

一个适合正在设计的iPhone、iPod、和iPad系统程序的模板。此模板是针对那些熟悉UIKit提供默认的视图和控件的发开者的。

Wireframes-101 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple iPad fully editable PSD

一个可编辑的PSD格式的Apple iPad。所有图形都是可编辑的,可缩放的矢量蒙版。

Wireframes-102 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Plam Pre PSD

这一套模板包含了一张PSD来帮组设计者使用PhotoShop设计抛光感的界面。

Uidesignkit57 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone UI Vector Elements

绝大部分可是的程序都是首先在AI中先有实体模型的。这里是一些非常酷的iPhone UI矢量元素。还包含一些不错的Phtoshop资源或者OmniGraffle格式的iPhone UI文件,甚至都有。

Wireframes-103 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Vector GUI Elements:tabs buttons menus icons

这套模板几乎包含了所有的iPad UI元素,按钮,标签,菜单,键盘和气泡等等。对设计者和开发者都非常有用,她包含了可编辑可缩放的矢量版本(AI)。

Wireframes-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Social Networking GUI PSD Kits


免费的图形分层Fackbook GUI工具包

为了加快Fackbook应用的UIs或者Fackbook迷页面的开发产生了此工具包,为你节约绘制各种UI组件的时间,可自定义所有文字字、按钮等其他你需要的数据。这个工具集是完全免费的,可用在任何项目之中。

Uidesignkit12 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook GUI Free PSD Resorce

FBGUI,一个Facebook图形界面Photoshop资源,让你工作更加轻松。

Uidesignkit22 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook Applications

可缩放的元素集合,可用来绘制Facebook应用草图。

Uidesignkit23 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Omnigraffle Twitter Widget Stencil

这套工具包含了很多有用的Twitter小工具和徽标。

Uidesignkit21 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframing Kits


Best Practice UX Forms Stencil v1.1

一个全面的遵循UX最佳表单设计实践的模板,提供三种不同方式布局表单,每种布局方式各有千秋。此模板还提供不同布局的按钮控件,进度条,可编码的验证输入字段,label等。

Wireframing-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Form Elements UI Kit

来自Yahoo!设计模式库中的模板设计工具包的表单元素。

Form in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Shapes

为Mac OS X准备的准备的一套制作线框图的图形。它有很多基本元素你在UI设计中一定非常需要。

Wireframing-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wrieframe kit for UI Designers

包含非常多的线框工具,比如产品详情,项目列表,头版页,手机模板等。

Wireframes-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

MBTI sketching pager  for ideation

MBTI构思讨论的草图设计。对理解box的死人格特质有很大帮助。每张纸上描述一个设计的挑战和解决问题的办法。

Wireframes-105 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

A4 sketching paper

在对具体功能有了想法之后使用这种草图纸,根据自己的想法构建初步的界面。

Wireframes-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Magnets(DIY Kit)

这个DIY的磁铁模板基于Konigi线框工具,它包括三张对于白板模型非常有用的元素集。简单把下载的PDFs文件打印为磁铁板,使用干擦标记好,用层压法,然后将它们剪开。

Wireframes-107 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Paper wireframe templates

像PSDs的样子,成品包括七中变化

Wireframes-108 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe template

非常有用的可打印的草图模板,可下载

Wireframes-109 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Idea Sheet

三张图:一张全尺寸(横向),一张70%(竖直),一张50%(横向)。80个小点可以非常方便的分割在屏幕的水平方向和竖直方向上做分割。Wireframes-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Scenario,Taskflow and Grid Shetch Sheets

一套漂亮的可打印的模板,有助于构思和草图设计。

Wireframes-111 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Photoshop browser template

在设计陈述中很需要一个干净的浏览器截图?不用等了!这里有免费的专业的浏览器模板,不同的1024X768,800X600分辨率的都有,以及各种爱好。Wireframes-112 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Interactive Sketching Notation 0.1

这些符号背后的思想是为了可视化与用户交互的状态和更清晰和迅速的明确用户的动作。

Notations2 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mobile Full iPhone GUI

对于WinterBoard的使用者来说,这是个测试版,所以可能存在没有风格化的元素。

Wireframes-116 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android Wireframe Templates(PDF)

Wireframes-118 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Keynote UX Stencils

Wireframes-126 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Advertising Stencil Kit

一套非常有用的广告模板

Wireframes-131 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Dragnet website wireframes kit v 0.9

Dragnet网的草图框架工具集,0.9版本,Adobe Fireworks文件。包含超过25中对象,对于快速构建网站原型非常有用。完全免费,可下载。这个工具集包含可web设计的很多元素,例如滚动条,按钮,菜单,Alerts等。

Wireframes-133 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

User Interface Design Framework

这套全面的非常漂亮的设计框架包含了一个GUI库,有成百上千的矢量元素,可用来做界面设计。小巧的UI图标集包含了260个矢量图形,还包含200个AI样式。Uidesignkit1 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Form Elements PSD

包括两套模板,Mac中Firefox 3和Vista中的IE7

Uidesignkit14 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sketching and Wireframing Kit

一套草图线框元素集,表单元素,图标,指示器,反馈信息,导航元素,图片占位,嵌入式视频,滑块以及普通广告banners应有尽有。

Uidesignkit3 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Photoshop Form Element Templates

包含各种常见的表单域以及鼠标指针,非常易于使用。

Uidesignkit37 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Browser Elements

集中于一个易编辑的PSD文件上,包括一些下拉菜单,输入框,单选框,复选框,按钮,文本域已经滚动条等,很棒,非常易于使用。

Uidesignkit4 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Design Kit

这套 Web UI工具使用 图形对象制作,有些情况下可转化为智能对象,有很好的缩放性。

Uidesignkit7 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Symbols

下载包包括一套符号库以及一套完整的AI文件。所以元素在画图板上都被区分开来。如何使用这个库?简单的将Wireframe Symbols.ai上的元素拖放到AI符号库里。每次你需要的时候,从符号库里拖出来就好了。

Uidesignkit9 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web UI Element Pack

PSD格式,19中web 元素。包括,加载条,默认状态按钮和按下状态按钮,按钮切换,关闭图标,”上一个“,”下一个“按钮,分页图标,以及滑块。

Uidesignkit13 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Kit for Google Drawings

Uidesignkit15 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffile Stencil for Ext JS v3.0

这个Ext JS Omnigraffle模具的升级版包含了很多提高和补充,如以Graffletopia形状以及组重建绝大多数的Ext JS 元素,尤其在对缩放标题,表格等有很大的帮助。Extjs in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex 3 Stencil

包含所有Flex 3样式指南中的所有组件:面板,数据格,按钮,表单域,连接,开关,菜单,滚动条,折叠,标签,列表,日期Picker,Toolstips以及Error等。

Uidesignkit19 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Agua GUI

从GUI设计项目1.2以及Mac OS X界面模板获得灵感,一套基于Aqua,一简化window设计的模板。

Uidesignkit20 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex Darkskin PSD UI

16张PSD,非常漂亮的模板。

Uidesignkit24 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Wireframe Kit

这是一套给设计师的简单布局设计的模板,简单,高效,节约时间。

Uidesignkit27 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Buttons and Icons

包含165个高质量的UI图标和按钮,五种不同颜色。AI,JPEG和SVG格式。

Uidesignkit8 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Quommunication Stencil kit

一套包含草图设计的所需的元素,RSS源,颜色,广告单元以及浏览器框和网格。

Uidesignkit30 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mac OS X Interface 2

一套Leopard-y的交互模板工具,在保证像素表现的前提下最大化的运用table获得最大的灵活性。

Uidesignkit31 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffle UX Template

OmniGraffle Pro(v.5)交互设计模板,包含为基础的UX文档需求提供的共享层(标题页,线框图,和用例面板)。

Uidesignkit32 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Template for Blueprint CSS Comps

这个套模板可以以一个CSS布局框架来进行设计,这套AI文件以24网格分割,可适应一些例如Blueprint的CSS框架。

Uidesignkit33 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple Elements for OmniGraffle

Apple硬件产品以及一些网络设施的模板图。非常适合于制作物理图表。

Uidesignkit36 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

DevianART ID PSD Kit

15个专业设计,完全可定制化,包含迷你型和原始ID模板。

Uidesignkit40 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Screens and Website Elements

一套非常有用矢量资源来帮助你快速搭建客户端程序模型,present你的工作,或者快速布局一个web站点。

Uidesignkit41 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

960 Grid Template for OmniGraffle

Uidesignkit43 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Control of different browsers for designers(下载链接)

PSD库,包括Mozilla Firefox,Opera,IE以及Safari不同浏览器的控件。

Controls in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Useful Articles


一篇全面介绍线框设计扮演了如何重要的角色。

随着web设计下一个十年的到来,重新评价和理解线框图的时候到来了,一个经得起用户体验的产品。

Wireframing-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

线框设计是一种不可或缺的设计思想,一个数字的草图,随时可以修改擦除或者恢复。

Paul Boag是一个线框设计迷,坚信线框设计是设计进程中不可缺少的部分。他在设计中坚持五个牢不可破的规则。

项目开发过程中可能最大的错误就是没有定制计划,这篇文章讨论其原因。

Resources and Round-Ups


一个tumblog专注于线框,原型,实物设计。

在这个网站可以查看一些基于线框设计的网站,可分析学习设计人员是如何将实体模型转化为设计的。因为线框和设计都是由设计者自己上传的,每个线框设计都包含了一个简短的说明。大部分的网站原来是数字实物模型,有容易修改和重新设计的优势。起结果是令人愉快的线框设计。

Wireframing-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

一些互动设计的原则和模式

这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。

20个资源,用于应用程序开发的草图阶段。

这些可打印的草图模板都是特意为web设计人员设计的。附加有浏览器的版本说明(Safari,Chrome甚至Firefox)

当你可以使用一个预制指南来节省时间,更好的发挥你的创造力,为什么还要从头开始设计呢?在这篇文章中,你将得到很多很棒的免费工具,一个笔记集合以及一些要购买的产品来帮助你线下设计。

源地址:Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files

FROM: