首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > 网页设计 >

50免花费户界面和网页设计线框工具箱,资源和源文件

2012-11-23 
50免费用户界面和网页设计线框工具箱,资源和源文件规划和沟通是任何成功的网站或应用程序的开发两个关键要

50免费用户界面和网页设计线框工具箱,资源和源文件

规划和沟通是任何成功的网站或应用程序的开发两个关键要素。和正是线框过程提供了一个快速和简单的方式来规划布局和具有成本效益,节省时间的工具,轻松地沟通你的想法给别人。线框通常有一个网页页眉,页脚,侧边栏,甚至可能产生的一些内容,它给你,你的客户和同事们一个简单的可视化的布局,说明网站的结构年底将基本要素:该项目和服务作为今后任何改动的基础。

本文侧重于实际线框工具和独立应用程序,以及资源,你需要建立你自己的线框,线框套件,浏览器窗口,表单元素,电网,Mac OS X的元素,移动元素,你会使用在任何典型的图形编辑器,如Photoshop或Illustrator。或者你可以使用笔和纸。

[?注意:你已经预先订购我们的印刷复制粉碎书#3?这本书是关于如何重新设计网站的专业指导,还引入了一个全新的观念,逐步网页设计专家为你写的。]50免花费户界面和网页设计线框工具箱,资源和源文件

完成线框工具箱


表单元素quommunnication模板套件,RSS订阅图标,颜色,广告的单位,浏览器窗口和网格:素描和线框常见的设计元素PSD文件。

50免花费户界面和网页设计线框工具箱,资源和源文件

Mac OS X界面模板套件
Leopardy接口模板套件。这个表的广泛使用,为最大的灵活性,同时保持像素的精度。

50免花费户界面和网页设计线框工具箱,资源和源文件

Facebook的应用程序模板套件
的Facebook相关的元素的一个相当可观的收集,使用Facebook应用程序中创建线框。

50免花费户界面和网页设计线框工具箱,资源和源文件

Flex的模板套件
包括从所有Flex组件的Flex 3样式指南:面板,数据网格,按钮,字段,链接,切换,菜单,滚动条,手风琴,标签,列表,数据采集器,工具提示,错误。

50免花费户界面和网页设计线框工具箱,资源和源文件

Eclipse的模板套件
此模板使您可以轻松的原型与OmniGraffle(TM)的Eclipse(向导)对话框。

50免花费户界面和网页设计线框工具箱,资源和源文件

大量的Web用户界面和按钮设置
这一套包含UI元素,在三种不同的风格:光面,缎/光线梯度,和一个颜色。缎/光梯度集是在7不同的颜色(其中你会发现所有PSD文件)。可用的控制按钮,包括箭头和基本符号,信息和文本框,breadcrubs,按钮,和其他导航元素,下拉和可折叠框样式,讲话气泡,搜索形式和加载元素。

50免花费户界面和网页设计线框工具箱,资源和源文件

雅虎模具设计-设计模式库
你将很难找到比这更好的线框资源。雅虎设计模板套件可用于几乎所有的应用程序:OmniGraffle时,Visio(XML)的Adobe Illustrator(PDF和SVG)和Adobe Photoshop。这个巨大的图书馆,包括下列内容(基本上都):广告的单位,挂历,旋转木马,图表和表格,UI控件,表单元素,网格,菜单和按钮,移动(一般),手机(iPhone),导航和分页, OS元素,占位符文本,屏幕分辨率,标签,窗口和容器。

50免花费户界面和网页设计线框工具箱,资源和源文件

免费素描及线框套件
素描线框工具包是免费的素描和线框元素集。它包括表单元素,图标,指标,反馈信息,工具提示,导航元素,图像占位符,嵌入式视频,滑块和常见的广告横幅。该套件有两个矢量格式,Adobe Illustrator和其他SVG中,可以很容易地修改。它也可以在PDF和EPS格式下载。

50免花费户界面和网页设计线框工具箱,资源和源文件

EightShapes的统一性
EightShapes“统一是收集模板,图书馆和其他资产,使用户体验设计师更快地创建更一致和更有效的交付。该系统采用的Adobe Creative Suite产品; Adobe InDesign中是主要的创作工具。

50免花费户界面和网页设计线框工具箱,资源和源文件

线框符号
此下载包含一个的线框符号库和一个完整的Adobe Illustrator文件与散布在电路板上的所有元素。安装的库只需拖放命名的文件到您的Adobe Illustrator的“符号”目录线框Symbols.ai。一旦你打开Illustrator中,到您的符号调色板和加载库。

50免花费户界面和网页设计线框工具箱,资源和源文件

OmniGraffle线框 ??模具,
这是一套OmniGraffle 5.x版本(Mac OS X中)线框的形状。

50免花费户界面和网页设计线框工具箱,资源和源文件

OmniGraffle UX的模板,
这是临OmniGraffle为模板界面设计,包括基本UX的文件需要共享层;如标题页,线框,故事。

50免花费户界面和网页设计线框工具箱,资源和源文件

网页元素
使用开源Bitstream的Vera“字体集”和FamFamFam免费的图标,你应该有你常见的网页元素最覆盖,包括标题,表单元素,内容管理功能,图像占位符,等等。

50免花费户界面和网页设计线框工具箱,资源和源文件

Web浏览器模板


在1024×768和800×600像素大小的Photoshop浏览器模板-网页设计工具包的Photoshop这些浏览器模板,涵盖几乎所有的浏览器(Firefox,IE,Safari浏览器,卡米诺,甚至网景公司)。无论大小,安全的可视面积明确标示在一个单独的层。

50免花费户界面和网页设计线框工具箱,资源和源文件


这些Photoshop的IE浏览器,Mac和Windows的Firefox的火狐浏览器模板浏览器模板的网站已被嘲笑以下尺寸:800×600,1024×768和1280×1024像素。

50免花费户界面和网页设计线框工具箱,资源和源文件

Photoshop的浏览器模板
分层PSD文件包含三个不同的浏览器的决议;轻松编辑职称,地址栏,滚动条和Favicons的。刚刚打开PSD,并放置在顶部的设计层,你的工作,瞧!

50免花费户界面和网页设计线框工具箱,资源和源文件

浏览器屏幕和网站内容的
一个载体的网站资产的有用。

50免花费户界面和网页设计线框工具箱,资源和源文件

为PHOTOSHOP的WEB安全区模板

所有的网络安全区下面列出的浏览器的PSD模板可以单独下载选择从以下决议:640×480,800×600,1024×768,1280×960和1600×1200像素。

Windows Vista中IE浏览器的Web安全区

50免花费户界面和网页设计线框工具箱,资源和源文件

Windows Vista的Firefox的Web安全区

50免花费户界面和网页设计线框工具箱,资源和源文件

Windows XP的IE Web安全区

50免花费户界面和网页设计线框工具箱,资源和源文件

Mac OS X的Safari网络安全区

50免花费户界面和网页设计线框工具箱,资源和源文件

Mac OS X的Firefox网络安全区

50免花费户界面和网页设计线框工具箱,资源和源文件

Mac OS X的Safari网络安全区

50免花费户界面和网页设计线框工具箱,资源和源文件

Web窗体元素

最佳实践UX的表格模板,
这是一个模板套件的遵循UX表单设计的最佳实践的全面释放。它的铺设形式提供了三种不同的方式,每个都有自己的利益。此版本还提供了不同的按钮布局,进度指示器,CAPTCHA码输入字段,标签和更多。

50免花费户界面和网页设计线框工具箱,资源和源文件

Photoshop中的表格元素模板,
这些Photoshop文件,包括所有常见的形式元素的截图显示您所选的操作系统(苹果经典的Mac OS X,WIN XP和WIN经典)。表单元素被分离成单独的层,使您可以轻松地选择,调整或切换他们请你。

50免花费户界面和网页设计线框工具箱,资源和源文件

浏览器表单元素PSD的
这个PSD文件中包含的Mac Firefox 3和Vista的IE7中的另一个表单元素。

50免花费户界面和网页设计线框工具箱,资源和源文件

Web表单元素的第1卷
第1卷包含一个Web用户在Photoshop格式的表格interace元素的选择。

50免花费户界面和网页设计线框工具箱,资源和源文件

Web窗体元素第二集
这是Web窗体用户界面元素第2卷上述已在不同的风格设计。

50免花费户界面和网页设计线框工具箱,资源和源文件

Photoshop的按钮模板,
这些Photoshop按钮模板已成单个层的分离,很容易可选。你可以选择从以下颜色:深蓝,浅蓝,深绿,浅绿,黄色,橙色,红色和紫色。

50免花费户界面和网页设计线框工具箱,资源和源文件

WEB浏览器元件

您可以选择您需要从操作系统和浏览器使用的元素,他们单独和下载。

Windows Vista中IE浏览器表单元素

50免花费户界面和网页设计线框工具箱,资源和源文件

Windows Vista的Firefox的表单元素

50免花费户界面和网页设计线框工具箱,资源和源文件

Windows XP的IE浏览器表单元素

50免花费户界面和网页设计线框工具箱,资源和源文件

Windows XP的Firefox的表单元素

50免花费户界面和网页设计线框工具箱,资源和源文件

Mac OS X的Firefox的表单元素

50免花费户界面和网页设计线框工具箱,资源和源文件

Mac OS X的Safari的表单元素

50免花费户界面和网页设计线框工具箱,资源和源文件

网格模板

960px Photoshop的网格模板
此模板具有水洗出来的颜色层为一个三列的20像素的排水沟设计指南,三分治的目的,以形象化的两列。此外,它被分解成6列20像素的排水沟。

50免花费户界面和网页设计线框工具箱,资源和源文件

960 OmniGraffle网格模板

50免花费户界面和网页设计线框工具箱,资源和源文件

Illustrator的蓝图CSS模板COMPS
Adobe Illustrator的文件具有24列格一个CSS框架,如蓝图。它包括遵守蓝图的24列30个像素,10像素宽的水沟和水平宽度950像素的网格的指南。水平的指南,提供18个像素或12像素的基础字体行高1.5 EM。

50免花费户界面和网页设计线框工具箱,资源和源文件


Photoshop文档具有24列格一个CSS框架,如蓝图,蓝图的CSS模板的Photoshop谱曲。它包括遵守蓝图的24列30个像素,10像素宽的水沟和水平宽度950像素的网格的指南。水平的指南,提供18个像素或12像素的基础字体行高1.5 EM。

50免花费户界面和网页设计线框工具箱,资源和源文件

移动应用开发资源

iPad的GUI PSD
PSD的使用载体,所以它是完全可编辑和可扩展性。你会发现有一些新的UI相比iPhone界面的元素。可行的屏幕设计格式768×1024,所以任何你的Photoshop文件中的设计可以很容易被带过来的SDK。

50免花费户界面和网页设计线框工具箱,资源和源文件

最终的iPhone模板- Graffletopia
这Omnigraffe iPhone的模板套件包含的背景,标题栏,按钮,选择和所有其他iPhone UI元素。它可以很容易地调整大小取消组合,调整中间元素水平,然后重新组合成一个单一的按钮元素。

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone 3G的模板
包括了iPhone 3G的标准接口组件:按钮,字段,地图元素,键盘,图标。所有的组件都是一个透明的背景上,并应重新大小很好。

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone的GUI PSD 3.0
与苹果公司正式发布新的iPhone 3.0来了一个新的GUI元素的数量。的修改和补充,有些已经在这个界面包括:地图和地图元素包括卷曲,复制和粘贴元素;时间表栏编辑器;和水平的iPhone和水平面板的酒吧和键盘。

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone PSD矢量工具外,
iPhone的入门工具包带有几个按钮元素,以及六种不同的iPhone界面选项。

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone GUI元素
作为分层的Photoshop(PSD)文件提供的免费iPhone元素。

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone的图形用户界面作为丰富的烟花符号
本iPhone套件已经设计使用Adobe烟花。它也有一些代码行,以丰富的符号转化成简单的向量符号与一些变量,它有几种组合,按钮,背景等。

50免花费户界面和网页设计线框工具箱,资源和源文件

谷歌Android GUI应用样机PSD的
Photoshop文件包含所有的Android 1.5,谷歌的移动操作系统的基本要素。

50免花费户界面和网页设计线框工具箱,资源和源文件

Palm Pre的GUI PSD
此Palm Pre的GUI PSD的已建成以方便编辑和缩放向量,它包含了最前的GUI元素。

50免花费户界面和网页设计线框工具箱,资源和源文件

RIM黑莓PSD的
下载包中包含详细的黑莓应用程序开发135层。

50免花费户界面和网页设计线框工具箱,资源和源文件

可选的线框附加

草图交互符号,
这个符号背后的总体思路是:在一个明确的和快速的方式可视化用户界面状态以及用户操作的愿望。

50免花费户界面和网页设计线框工具箱,资源和源文件

Storyboard的特征(通过谷歌浏览器)

50免花费户界面和网页设计线框工具箱,资源和源文件

校对商标

50免花费户界面和网页设计线框工具箱,资源和源文件

标准的Web横幅,
您可以下载这些标准的Web横幅广告或单独(468×60像素,768×60 125×125等)。也有共同但有非标准的旗帜大小的模板(120×30 230×33 728×210等)。

50免花费户界面和网页设计线框工具箱,资源和源文件

线框图标,免版税的EPS和PNG
图标集,包括EPS和原Konigi线框图标集PNG版本都适合使用,如Adobe Illustrator的矢量绘图应用程序以及在Microsoft Visio。

50免花费户界面和网页设计线框工具箱,资源和源文件

WEB UI宝箱
这PSD分层文件,大多数的文件是完全可编辑,包含超过100个网站的设计元素。

50免花费户界面和网页设计线框工具箱,资源和源文件

webdesigner套件
这Photoshop下载包含注册字段,菜单,复选框,单选按钮和游标。

50免花费户界面和网页设计线框工具箱,资源和源文件

打印素描纸

A4和A3的素描电网
下载和打印纸本960像素宽的网格可以很容易地创建一个三列(320像素),四列(240像素),五0column(192像素)或六列( 160像素)电网的单张纸。你有两种尺寸可供选择,A4和A3。

50免花费户界面和网页设计线框工具箱,资源和源文件

印刷和素描线框模板

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone应用素描模板
本素描纸的方格等于10像素。刻度显示状态栏,导航栏,键盘,标签栏和工具栏的高度。为达到最佳效果,无国界在A4纸打印。

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone为素描的线框模板
两个布局,无论是在PDF和Visio(VSD)的格式,以便快速的iPhone样机。

50免花费户界面和网页设计线框工具箱,资源和源文件

iPhone APP线框的模板
有两个版本可供选择,在风景和肖像之一。每个版本都包含三个页面:第1页,有一个垂直的屏幕和笔记列,第2页有横屏和票据列第3页有三个屏幕的布局,是伟大的起草设计。

50免花费户界面和网页设计线框工具箱,资源和源文件

打印线框和注释

低于8.5×11英寸绘图纸是由视觉设计师,交互设计师和信息架构师。线框图上的2×2方格的用户界面,故事板的相互作用和绘图值,你会发现风格。另外,你会得到一个网站地图或其他任何东西,来了起草的基本格。从以下选择:

与说明
这线框网格分为24列,每列之间的排水沟,线框。网格是如蓝图的CSS框架内工作的设计师特别有用。

50免花费户界面和网页设计线框工具箱,资源和源文件

线框(山水)

50免花费户界面和网页设计线框工具箱,资源和源文件

线框(人像)

50免花费户界面和网页设计线框工具箱,资源和源文件

故事情节,
这是一个具有四个单元的故事情节。每个单元都包含一个简单的网格。

50免花费户界面和网页设计线框工具箱,资源和源文件

与Notes的故事情节,
这是一个具有四个单元的故事情节。每个单元都包含一个简单的网格。每个单元下方的面积被裁定票据。

50免花费户界面和网页设计线框工具箱,资源和源文件

纸张的基本,
这是一个基本的格框。使用概念图,网站地图,谱,表和其他任何你绘制。

50免花费户界面和网页设计线框工具箱,资源和源文件

线框磁铁(DIY套件)

这些DIY的磁铁模板的基础上,Konigi线框模具,包括3张那将是有用白板原型的元素。只需下载和到磁铁张打印PDF文件,并??把它们剪下来。

表单元素

50免花费户界面和网页设计线框工具箱,资源和源文件

标签,按钮和酒吧

50免花费户界面和网页设计线框工具箱,资源和源文件

窗口和对话框

50免花费户界面和网页设计线框工具箱,资源和源文件

更多的资源和一些线框的启示

web.without.words
一个视觉设计师采取流行的网站和重建线框的操场。

50免花费户界面和网页设计线框工具箱,资源和源文件

graffletopia
Graffletopia是一个巨大的资源,为OmniGraffle(苹果只),可悲的是免费的模具。与OmniGraffle,您可以快速创建高品质的线框图,流程图和其他图表。

50免花费户界面和网页设计线框工具箱,资源和源文件


样机去的样机是一个随时可以使用的UI组件和设计模式,建成使用Balsamiq样机的用户贡献的集合。您可以下载所有的组件和设计模式,在您的样机使用。

50免花费户界面和网页设计线框工具箱,资源和源文件

线框杂志
线框杂志致力于向所有的东西线框和原型。它有一个巨大的图书馆下载的模板,样本和UI工具,甚至部分的灵感。

50免花费户界面和网页设计线框工具箱,资源和源文件

我{心脏}线框
我{心脏}线框是一个线框的灵感和资源的重要来源。是的,我们都爱线框!

50免花费户界面和网页设计线框工具箱,资源和源文件

进一步的相关文章
  • 35个优秀线框资源
    超过35个资源,创造更好的线框,包括不同的方法教程和各种可用的工具。
  • 粗略线框:当你不能(或不应)画一条直线
    有关计算机为基础的,使粗略线框,线框看更像是快速,手绘草图,而保留的重用性和波兰,我们期望从一个好文章数字artitfacts。
  • 16为原型和线框图的设计工具
    本文章转自http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/该站点不少好素材,所以直接google翻译,以备下次使用。

热点排行