利用手上的UI资源(附免费UI工具包)
http://www.uisdc.com/how-to-use-ui-kits#
大家都知道,UI工具包里有很多好看的资源:比如按钮、滑块、面包屑、播放器、表单,甚至是一个”赞!”的小图标。但是这个UI工具包具体该怎么使用呢?总不能拿来藏着一直不用吧!
首先给小伙伴们简单介绍一下这个UI工具包。UI kit,即”User Interface Kit”,意为”用户界面工具包”。这是一个由用户界面元素所组成的PSD文件。内含花样繁多的颜色、图案和各种被用在设计中的asl文件。我们可以根据自己的需要使用其中的一些元素。通常情况下,高端的UI工具包内含的元素比免费的UI工具包内含的元素要多得多。
使用UI工具包不仅可以改善工作流程,更能大大节省时间省去思考如何设计的烦恼。这将更便于我们集中精力于我们的网站设计的功能实现以及可用性测试。
优设UI资源推荐:
超赞!35款新鲜、免费的优质扁平化UI素材
20个UI界面PSD下载(来自DRIBBBLE分享)
干货!扁平风+IOS 7线型风界面组件PSD打包下载
So~关于这个UI工具包如何使用,咱们现在就来大干一场吧!
一、选择一个UI工具包
网上有大量的UI工具包,不过此次例子我们使用Flat UI,这款UI kit拥有众多好用的设计元素。
下面是一点点工具包的推荐。
Flat UI Pro(专业的设计框架)
Featherweight UI(一款免基于矢量和视网膜的免费UI工具包)
Flat Design UI Kit Vol. 1 FREE flat UI kit.
好了,开始吧~
打开UI工具包PSD
双击打开flat-ui-free.psd,出现以下面板。
解释一下图层面板的三个编组内容(点编组左边的眼镜可查看具体编组内容):
Basic Elements –一系列零碎的UI元素集成
Samples –实际应用程序设计UI元素
Background—背景
二、使用UI工具包设计元素
使用移动工具点击”自动选择-组”,然后打开文件夹Basic Elements。
接下来选中我们需要的元素。比如我们选择menu, share, radio buttons和checkboxes,把它们移到新的ps文件里面。
三、调整UI工具包元素
选择直接选择工具(Direct Selection Tool )
直接选取我们要调整的元素就可以开始调整啦!
四、改变UI元素的颜色
选中需要改变颜色的元素,双击该图层的形状图层直接就可以换颜色啦!比如这里的菜单背景我们可以双击body图层改变颜色为#00acc0。
五、矢量图标
使用一些图标会给网站带来生气。比如做一些小指引。我们现在看到Vector icons一栏,新建一个ps文件,使用圆角矩形工具( Rounded Rectangle Tool )绘制一个372*372px的方框。将UI工具包里面的Vector icons一栏下的打钩图标拖过来放在中央偏上,然后继续使用圆角矩形工具绘制一个绿色的指示按钮。这样子我们就使用了矢量图标。
六、导出UI元素
做完修改接下来就是导出了。选中需要导出的元素本身(记住不是编组而是元素本身的图层),拖到新的ps文件里,让文件的背景为透明,然后执行”图像—裁切”,按照下图打钩,裁切以后ctrl+shift+alt+s存储为web所用格式,右上角勾选png-24(质量比较高),就可以导出了。下面是以paginator为例。
结语
UI工具包对设计师和开发人员极其有用,如果你是一个自由职业者,使用UI工具包将节省你很多时间,因为你不需要花更多的时间来思考设计。可以来寻找更多的UI工具包。尝试着用它们来丰富你的设计,然后用编码实现吧~
原文地址:1stwebdesigner
优设网翻译:@sheisjane
本文由优设网原创翻译,转摘请注明优设网译文出处,谢谢各位小编。
利用手上的UI资源(附免费UI工具包)的更多相关文章
- 8个设计师必看的免费UI图标设计资源站
图标是我们日常APP及网页设计过程中必不可少的元素之一,通过小小的图标,可以快速方便的实现视觉引导和功能划分.在创作时,我们需要寻找各种各样的图标来满足自己的设计需求,非常浪费时间和精力.今天,小编给 ...
- 分享20个最新的免费 UI 设计素材给设计师
用户界面设计涉及到很多的创意,灵感以及需要与客户进行有效沟通的技能.良好的用户界面是一致的,可以使网站更容易理解和使用.UI设计的重点在于用户体验和互动,同时易于使用对于一个成功的移动应用程序来说非常 ...
- 【翻译】24款界面精美的免费UI工具包
国外网站分享的24款最新的免费UI工具包,喜欢可以收藏哦~ 1. Modern UI Kit Modern UI Kit是一个非常简单时尚的免费用户界面包,提供上百种UI设计元素,可以让设计师轻松利用 ...
- 25套用于 Web UI 设计的免费 PSD 网页元素模板
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
- Android热身:通过网络获取资源并更新UI组件
Android热身:通过网络获取资源并更新UI组件 目标 点击"发送请求"按钮,下载某网页的html源码,并显示在TextView控件上:点击"清空",清除Te ...
- 【转帖】2015年2月份最佳的免费 UI 工具包
2015年2月份最佳的免费 UI 工具包 设计师们最喜欢 UI 工具包,这是一种思路拓展的方法,同时可以利用它们来解决各种复杂的项目,同时可用来了解其他设计师的风格.这里我们收集了最近这一个月一些最棒 ...
- Kong管理UI -kong-dashboard (附kong封装webservice方法)
本文仍然是在centos 6.7的环境下进行 本文转载请注明出处 —— xiaoEight btw如果要正常使用管理UI,前提为kong已经正常run(可参考)起来,此 ...
- Wpf从资源中重用UI元素
在我的界面上有几个选项卡,每个选项卡中都有下面的元素: <StackPanel Orientation="Horizontal"> <Button Content ...
- 实战开发中UI资源制作标准
资源制作标准设定建议 1.所有的UI资源全部采用PNG导出 因为Unity不支持外部压缩,所以,不论是用PNG还是JPG,只要尺寸相同,资源量在引擎中都会是一样大.所以,可以大胆地采用PNG进行输出, ...
随机推荐
- HDOJ2029Palindromes _easy version
Palindromes _easy version Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
- Java垃圾回收介绍(译)
在Java中,对象内存空间的分配与回收是由JVM中的垃圾回收进程自动完成的.与C语言不同的是,在Java中开发者不需要专门为垃圾回收写代码.这是使Java流行的众多特征之一,也帮助了程序员写出了更好的 ...
- PHP自定义日期英文格式 Feb 11,2015
背景:[PHP小工具]项目中,经常会要求多版本语言支持,而日期也是必不可少的组成元素. 英文日期书写顺序分英式和美式,举例如. 美国:月日年(January 8th,2014 或 January 8, ...
- Android Animation学习笔记
原文地址: http://www.cnblogs.com/feisky/archive/2010/01/11/1644482.html 关于动画的实现,Android提供了Animation,在And ...
- 关于 angular 小心得
心得1: //控制器里面的代码会晚一些执行 setTimeout(function(){ //获取对象的scope var ele = document.querySelector('[ng-cont ...
- web项目嵌入Jetty运行的两种方式(Jetty插件和自制Jetty服务器)
在开发Java web项目时候,可以在项目中嵌入Jetty服务的方式来运行web程序. 由于最近开发web项目,自己使用的是比较旧的eclipse不支持导入tomcat来运行项目,于是就学习了下使用项 ...
- 创建型模式——Builder
1.意图 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 2.结构 3.参与者 Builder为创建一个Product对象的各个部件指定抽象接口 ConcreteBuild ...
- DTCMS更改图片相册上传图片类型,手机上传图片相册
/admin/js/uploader.js 中 filetypes: "jpg,jpge,png,gif", //文件类型 改为 filetypes: "jpg,jpeg ...
- php取整的几种方法
php取整的几种方式. floor 舍去法取整 语法格式:float floor ( float value )返回不大于value 的下一个整数,将value 的小数部分舍去取整.floor() 返 ...
- [Python 标准库]第一章 文本
Chapter01 文本 1.1 string - 文本常量和模板 作用:包含处理文本的常量和类. 1.1.1 函数 capwords(s):字符串中所有单词首字母大写 maketrans():创建转 ...