如何使用Xcode进行高保真原型设计?
转载自:http://www.guimobile.net/xcode-high-fidelity-prototype-design.html
初次使用Xcode可能会感觉到界面有一点复杂。在这个教程中,我们只专注Storyboard功能有关的部分。
Add images(插入图片)
准备好App的设计页面,页面中不要包含顶部的状态栏。想要把这些图片插入,首先要选择一个“ Group”(组),然后“Add Files To… (添加文件到…)”。当然也可以直接拖拽图片到创建的Group中。
在执行操作前要确认“Copy items into destination group”(拷贝到指定组中)和“Add to targets”(加入到目标中)两个选项已经启用。
First Screen(第一场景)
到此初始化设置已完成,设计稿图片也已经添加到组中,终于可以开始使用Storyboard工具了。现在去Storyboard面板并从Object Library(控件库)中拖拽一个Button(按钮)到工作区中。
为什么先放置一个Button(按钮)?因为这个Button可以起到一个可被点击并跳转到第二个场景的作用。调整Button尺寸,让它和整体尺寸的比例大小合适。
当选择按钮的时候,需要查看一下Attributes Inspector(属性面板)。其中我们关注的属性是type(类型)、title(标题)和image(图片)。把类型选择成custom(定 制),title(标题)设置为none(无),image(图片)设置成设计稿中的第一个页面(输入图片名字的时候系统会帮助自动补齐)
Second Screen(第二个场景)
场景在Xcode环境中被称作“Controllers(控制器)”。要开始创建第二个场景,简单的拖拽一个View Controller(场景控制器)到工作区,并重复之前步骤就可以了。
把场景联系起来
Xcode通过一个被称作为“Segue(链接)”把不同的场景关联起来。为了创建一个“Segue(链接)”,按下键盘上“Control”键同 时使用鼠标光标把第一个场景拖拽到第二个场景上。选择“modal”(模态)模式。这样会创造出一个第二场景从底部滑入的转场动效。
可以通过点击两个场景之间的“Segue”(两屏之间也圆形图标)对转场动效果进行定制,常用的动效有 Cover Vertical(底部滑入), Flip Horizontal(水平翻起), Cross Dissolve(淡入淡出) or Partial Curl(翻页卷起)。 如果不想使用转场动效,取消勾选“animate”(动效)选项即可。
Push Segue(右侧滑入转场动效)
Push Segue(有导航条类型链接)只有存在Navigation Controller(导航控件)场景下才能使用。要想创建一个Navigation Controller,选择第一个场景的View Controller(场景控制器)选中顶部菜单Editor(编辑)>Embed in(嵌入)>Navigation Controller。插入导航控件后,所有链接在一起场景顶部都出现Navigation Controller的导航条。
如果想要移除导航条,选中Navigation Controller,然后把Top bar(顶部条)设置为none
到了这步,可以选择使用Push Segue并为其选择一个Horizontal Sliding(水平滑入动效)。
测试你的App
Xcode内嵌着一个iOS模拟器可以预览当前的工作。要想预览,选择iPhone6.1模拟器并点击左上方的Run(运行)按钮。然后,屏幕正中会出现一个iPhone预览视图让设计师可以测试刚刚创建过的App。
点击第一个场景上面的Button,第二个场景会从右侧水平滑入。虽然非常简单,但可以帮助大家很好的理解Storyboard工具如何工作。
下载 Prototype 1.0这是当前所设计的原型
Header and Content(标题和内容)
Header and Content会有很多的交互。在View Controller(场景控制器)里,可以从Object Library选择使用任意一种控件。一般比较典型的页面会有一个稳定Header,若干个button和可以滚动展示的Content。
首先,必须在Photoshop或者Sketch中把Header和Content分离。现在把之前创建的Button删掉,并从Object Library中拽取一个图片控件到Header(标题)位置上。在Attribute(属性)面板中编辑图片的名字。至于尺寸,选择Size tab(尺寸页卡)把高度设置为和Header图片尺寸一样。
请注意Xcode一般使用pt而不是px作为单位(1pt=2px),在设置尺寸时请注意单位的换算。
在Header上面,可以从控件库继续拖拽Button和Label控件。
Scrollable Content(可滚动的内容)
为了设计内容可以在界面内滚动查看,需要拖拽来一个Table View控件并调整尺寸大小填充页面中剩余 部分。在Table View控件区域里,拖拽来一个Button控件并设置尺寸大小和图片大小一致。在这个Button控件上可以编辑一个Segue链接第二个场景。在当你 按下Control进行拖拽和放置的时候确保Button是一直被选中的。
与此同时,还必须确认Header(标题)图层要比Table View 图层更优先运行。Xcode环境中一般采用反向的顺序,在底层的图层会比上层的图层优先运行。
The Back Button(返回按钮)
Back button(返回按钮)之所以会在本文中提到,是因为它是非常重要有用的,文章作者会在未来教程中解释其如何使用。现在要做的是创建一个Group,把Object—C category files拖拽到Group里面。在导入文件的确保勾选上“Add to Targets(添加到目标)”选项。
导入文件后,便可以把Back Button 和底部Exit(退出)图标链接在一起,这时一个叫做 backbutton(返回按钮)选项会浮现出来,点击这个选项。
Views and Objects(视图和对象)
下面是一个关于Views and Objects (视图和对象)是如何构建的图例:
一旦了解了Views and Objects(场景和对象),便可以按照你的想法定制上图中的控件。
在iPhone上预览
xcode可以帮助在iPhone上预览设计的App。不过这是一个比较复杂的过程,而且需要开发者帐号。如果你有开发者帐号,你必须根据说明和指 引去创建证书并修改你的mac的配置文件,完成后才能取得像iPhone安装App的权限。简单的把模版里面的图片替换成你自己的,调整一下面板里的属 性,加上新的场景并用Segue链接他们。
下载模板
下面的这个模板可以帮助大家开始熟悉Storyboard
简单的把模版里面的图片替换成你自己的,调整一下面板里的属性,加上新的场景控件并用Segue链接他们。
资源
就像在sketch软件一样,研究别人做的Xcode源文件,对于学习Xcode是非常关键的。下面是一些对学习Xcode资源有用的资源
- Cocoa Controls-可以找到很多开源的控件
- 在Github里面搜索Xcode projects
- 未完待续
最后一些想法
作为一个设计师,我从来没想过自己会写Xcode教程。这个程序原来仅对开发人员有吸引力——程序界面复杂且需要使用者掌握Objective- C,使得使用门槛非常高。所幸,从Xcode 4版本开始增加的Storyboard让设计师能够规避对编程的恐惧,并能自如地使用程序完成交互设计。
如果没有iOS开发者Max Tagher的帮助我是无法完成这篇教程的,是他帮助我解决了使用Xcode中遇到的各种困难。如果你认识有iOS开发背景的朋友,我建议在使用 Storyboard遇到困难时向他请教。这是Storyboard系列教程中的第一篇。在下一篇中,会包含如何定制字体,更复杂的流程、动效和声音。高 质量的Xcode资源很不容易找到,如果你有,请分享给大家。
原文作者:Meng To
如何使用Xcode进行高保真原型设计?的更多相关文章
- 五款app原型设计工具对比
五款app原型设计工具对比 Proto.io, Pixate, Origami, Framer & Form 本文由Panblack 翻译,原文作者 Tes Mat 我用五款“高保真”原型设计 ...
- 9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
原型设计的发展历史经历了纸上原型.静态线框设计.到现在的可交互式原型.作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高.因此,如今的原型设计工具格局也发生了很大的变化. Sketch对于 ...
- APP原型设计工具,哪家强?转自知乎
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:李志超 链接:http://www.zhihu.com/question/20403141/answer/25329730 ...
- 移动APP开发使用什么样的原型设计工具比较合适?
原型设计工具有Axure,Balsamiq Mockups,JustinMind,iClap原型工具,等其他原型工具.其中JustinMind比较适合APP开发使用. JustinMind可以输出Ht ...
- 15款优秀移动APP产品原型设计工具
一新来小盆友问:“移动产品原型设计都用啥工具?” 答:“@#¥……&%*” 又问:“能详细说下各个工具吗?我比较一下” “……” 好吧,谁让我那么的爱分享而你又是小美女呢 ———————正文开 ...
- AXURE在原型设计中的应用
转: http://uedc.163.com/2248.html 前言 什么是原型呢? 产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块.元素进行粗放式的排版和布局,深入 ...
- Axure学习笔记1--原型设计概述
Axure原型 1.原型的出现 -软件功能复杂,用户需求多 -挖掘用户的实际需求 -项目组之间降低沟通成本 2.类型: [草图原型]描述产品大概需求,记录瞬间灵感 [低保真原型]展示系统的大致结构和基 ...
- 产品原型设计工具 Balsamiq Mockups(转)
Balsamiq Mockups是产品设计师绘制线框图或产品原型界面的利器.在产品设计的需求阶段,低保真的线框图或者草图设计介于产品流程设计与高保真DEMO设计之间,在Balsamiq Mockups ...
- ui/ue设计师应该了解的原型设计软件
前段实践整理过一些原型设计用的软件,这里分享一下,喜欢对更多的PM战线的童鞋有所裨益.(因为交互原型工具Axure ui设计师都很常用了,文中就不专门介绍了) 首先分下类: •1.交互原型(产品能做什 ...
随机推荐
- [CODECHEF]LUCASTH
题意:设$f(n,k)=\sum\limits_{\substack{S\subseteq\{1,\cdots,n\}\\|S|=k}}\prod\limits_{x\in S}x$,问$f(n,0\ ...
- 【计算几何】【分类讨论】Gym - 101243I - Land Division
题意:给你一个n个点的凸包,让你切一刀,使得它变成一个m边形和一个K边形,问你切的这一刀最短是多少. 如果m+K==n+4,那么一定切在两条边上,但是由于两个线段间的最短距离,至少会经过一条线段的一个 ...
- 【找规律】【DFS】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem A. Arithmetic Derivative
假设一个数有n个质因子a1,a2,..,an,那么n'=Σ(a1*a2*...*an)/ai. 打个表出来,发现一个数x,如果x'=Kx,那么x一定由K个“基础因子”组成. 这些基础因子是2^2,3^ ...
- 【计算几何】【极角排序】Gym - 101174B - Bribing Eve
把每件物品当成平面上一个点,将第一件物品放在原点.那个权重值相当于一条直线,于是相当于直线绕原点转一圈,统计上侧点的数量. 队友的代码: #include <cmath> #include ...
- 邮件发送javamail
写在前面: 最近要将dms系统原始发邮件的功能(调用的webservice)改变成使用smtp服务来发送邮件(使用javamail来发送),这里简单记录下,方便日后有用到,直接拿来用即可. 首先导入需 ...
- zigbee控制ADAM4150
任务名称:zigbee节点控制ADAM4150 实验现象:通过zigbee节点上的节点控制ADAM 注意点:控制ADAM4150的波特率必须是9600,否则会出现错误 核心代码 1.寄存器配置 voi ...
- JavaScript 时间与日期处理实战:你肯定被坑过
本部分的知识图谱请参考编程语言知识图谱-时间与日期. 本文JavaScript 时间与日期处理实战:你肯定被坑过从属于笔者的Web 前端入门与最佳实践中 JavaScript 入门与最佳实践系列文章. ...
- Nand Flash与Nor
转:http://www.360doc.com/content/11/1215/15/1299815_172458274.shtml Flash经常在一些地方被提到,一直没认真去理解它们的区别,因此, ...
- Java 的BigDecimal
原文:http://blog.csdn.net/diyu122222/article/details/76887382 decimal decimal(18,0) 18是定点精度,0是小数位数. de ...
- iview2.x版本升级3.x版本icon修改清单
当前公司使用有一个旧项目的前端组件库是iview2.x,入职以来维护该项目过程中碰到2.x版本无数的坑. 最近需求不多,闲来无事把2.x升级到3.x版本了. 新版本除了网上轻易可查到的button组件 ...