设计师眼中功能强大的Xcode
作为设计师,不仅要能创造出移动为先的新产品,更要了解能创造出优秀移动作品的工具。这个实现过程可以让我们的设计更加优秀。
过去两个月,我每天在 Xcode 上花费的时间大约有 10 个小时,我学到了很多完全改变我的工作流程的技术。Xcode 是一款成熟的工具包含了很多强有力的但没被经常使用的功能。如果你不确定 Storeboard 是 CSS 的未来,或者没有直接使用 Xcode 工作,这篇文章至少会告诉你 Xcode 如何为你的设计做准备和它有什么可能的限制。
预览你的设计
如同你跨多分辨率设备,在浏览器中预览 web app 一样,你可以通过 Storyboard preview 这个强大的功能来进行预览。
在这个屏幕上,我预览了设计在 iPhone 4 的 3.5 英寸屏幕上的展示情况,而不用在模拟器中运行和导航至特定的页面。
给图片着色
对于设计师来说,在程序中为多个实例必须创建多个资源是设计过程中遇到的主要障碍之一。Xcode 能给你的图片着色,你只需知道它,因为这个不会贯穿使用。
为导航栏按钮着色
如果设置为系统就可以为为按钮图片着色,系统会给你一个很好的按钮按下状态转换。UIImage 不允许你简单地为图片着色,除非是在代码中,所以往往你应该使用 UIButton 代替,它有更多选择。
使用十六进制颜色
自从 Photeshop 和 Sketch 以来,许多的设计师常使用十六进制编码来配置颜色值。为了使用十六进制编码,你必须下载 “Hex Color Picker”增加色彩检测。
它也是更精确的颜色选择器工具
嵌入和解除嵌入
考虑到在 Photoshop 中以文件夹的嵌入。Xcode 允许你把许多元素集成进 UIView 或者 UIScrollView 里。由于 UIView 在 Canvas 动画、组织目的以及选择方面非常有才能,你可以把相关的元素嵌入到一起。
我喜欢嵌入功能,我可以添加键盘快捷键(像 Sketch 快捷键一样)来创建文件夹。
我正在创建多个列队动画,我把这些元素分组派进多个嵌入,这样我可以对它们单独动画。
自动布局
这是一个连许多经验丰富的开发者也颇为头疼问题。所以我试着简化它。这是一个允许你的设计自动适配的工具。
我想要让 Canvas 中的白色方框在水平方向上和垂直方向上居中。首先,打开预览。如图所示,在 iPhone 4 中,白色方框错误地自动调整大小。
把白色方框拖至 Superview(that’s how they call the canvas),我选择了在 Container 中居中。按住 Shift 键,点击水平方向和垂直方向,然后你必须设置白色方框的宽度和高度。
这是最基本的。对于复杂的场景,它要花费很多时间来练习,我建议你看看 WWDC 视频:Taking Control of Auto Layout in Xcode 5。
如果你想要节省开发时间,你应该明确的学习自动布局。
动态字体
iOS 7 引入了基于用户喜好设计字体大小的能力。
即时使用自定义字体,你可以使用 iOS 7 的 Text Styles 来设置用户喜欢的大小。
操作和对话框
在 Xcode 中,你能快速创建操作表单和对话框。为什么花那么多时间在苹果已经很完美的东西上呢?
使用已经成熟的功能,这样你可以更加关注 app 其他部分。
简单使用相机
在 Xcode 中只需 20 行代码就可以使用 Xcode 的相机了。
声音
带有声音的 app 会更加有趣。使用 SimpleAudioPlayer 一行代码:[SimpleAudioPlayer playFile:@”filename.mp3"]; 就可以播放音乐。
动画效果
使用 SimpleMotionEffects 一行代码:[self.myView addMotionEffectWithMovement:CGPointMake (15, 15)] ;你能创建这样的效果。
最后的思考
如果你已经开始了,那么在 9 天时间里创建一个 iOS App 是可能实现的。iOS app 能像 Web app 那样快速创建,对大多数设计师来说只是一个时间问题。
设计师眼中功能强大的Xcode的更多相关文章
- 功能强大的Xcode辅助工具Faux Pas:帮你找到各种隐形的bug
本文转载至 http://www.cocoachina.com/industry/20140804/9307.html Faux Pas(Beta版下载地址)是一个Xcode辅助工具,用以检查Xcod ...
- Postman - 功能强大的 API 接口请求调试和管理工具
Postman 是一款功能强大的的 Chrome 应用,可以便捷的调试接口.前端开发人员在开发或者调试 Web 程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的 Fi ...
- 功能强大的滚动播放插件JQ-Slide
查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...
- 功能强大而又简单易学的编程语言Python
Python是一种面向对象.直译式计算机程序设计语言,也是一种功能强大的通用型语言.首先,Python非常简单,以Hello World为例: Java的Hello World程序一般这么写: pub ...
- 敏捷BI比传统BI功能强大是否属实?
关于大数据的资讯铺天盖地而来,让人眼花缭乱.虽然资讯很精彩,我们也看到了大数据背后的价值,很多企业选择了商业智能BI产品.商业智能在使用上可分为敏捷BI与传统BI,从名字来看敏捷BI要比传统BI显得利 ...
- [转载]什么是FCKeditor?功能强大的HTML编辑器!
天天在用FCKeditor写博客,但一直不清楚FCKeditor到底是什么,今天终于找到了一些相关的资料,大家一起来分享下. FCKeditor文本编辑程序(共享软件)为用户提供在线的文档编辑服务,其 ...
- 整合了一个功能强大完善的OA系统源码,php全开源 界面漂亮美观
整合了一个功能强大完善的OA系统源码,php全开源界面漂亮美观.需要的同学联系Q:930948049
- 功能强大的web打印控件lodop的使用
打印是很多web系统都需要的功能,最近找到一款功能强大,使用简单,价格便宜的web打印工具Lodop,免费也能用,不过有水印,也不贵商业开发建议购买. 废话不多说,拿来就用,从简单的打印开始. 1.下 ...
- 一款开源且功能强大的C#甘特图控件.NET Winforms Gantt Chart Control
甘特图在项目管理中非常重要,甘特图的思想比较简单,即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间.它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比.管理 ...
随机推荐
- 在线重定义(Rdefine Table online)
二. 概念理解 在线重定义用于对表的逻辑或者物理结构的修改,而且在修改时不影响表的可用性与传统方式相比.当一个表被重定义时,会被锁定为exclusive mode很短一段时间,这段时间的 ...
- OC基础(11)
构造方法 自定义构造方法 继承中的自定义构造方法 自定义类工厂方法 *:first-child { margin-top: 0 !important; } body > *:last-child ...
- MySQL数据库优化技术之数据库表的设计
三范式介绍表的范式:只有符合的第一范式,才能满足第二范式,进一步才能满足第三范式. 1. 第一范式:表的列具有原子性,不可再分解.只要是关系型数据库都自动满足第一范式.数据库的分类:关系型数据库:My ...
- Appium+Maven+TestNG(ReportNG)环境搭建(详细过程)
最近群里经常有人会问到关于maven构建Appium测试项目以及使用testNG生成测试报告的问题,试着搭建了一下,下面是过程: jdk安装过程我这里就不说了 一.下载eclipse,推荐下载Ecli ...
- Nodejs文件服务器
最近一直在忙于一个比较大的项目,在项目中需要有个文件服务器来支持.老鸟们建议我去用NodeJs来实现,我在接手这个项目之前其实并不了解NodeJs,但是一直想去了解.借着这个机会好好去学习一下.下面是 ...
- iOS7 iOS8 UITableviewCell处于编辑状态,dismiss或者back崩溃
今天在项目中遇到一个坑爹的 Crash , 在 iOS7 iOS8 UITableviewCell处于编辑状态,dismiss或者back崩溃 iOS9不会 原因:苹果的BUG代码 解决:在视图消失 ...
- 第1章 shell编程概述
1.shell简介 shell是一种具备特殊功能的程序,它提供了用户与内核交互操作的一种接口.它用于接收用户输入的命令,并把它送入到内核去执行. shell是一种应用程序,当用户登录Linux系统时, ...
- oracle删除用户及其名下对象
drop user XXXX cascade; drop tablespace XXXX INCLUDING CONTENTS;
- CSS3之阴影
CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur col ...
- eclipse删除已经记录的用户名和密码
1.从windows > preference > Team > SVN #SVN Interface这个位置看看. 2.如果是用的JavaHL, 删除C:\Users\[YourU ...