提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
其实设计师也可以通过xcode做交互设计!
用xcode做设计,其实没啥不可以的,在此我只是演示下很简单的操作,不要运用什么程序就可以完成最基本的交互设计,简单节约时间,升至程序猿可以直接通过这个加程序后制作界面!
第一步打开xcode
选择 single view application
注意语言选择 swift 别的可以随便写!
打开后选择main.storyboard ,右边会出来一个页面,有人问为啥是方的,呵呵,自动布局就是如此,习惯就好我会在后面说明,就是要在方的画板上做设计!
拖一个imgeview,撑满画面
从桌面拖一张背景图!尺寸在1200x1200左右便可,放在2x(这是入门教程,你可以不需要知道为什么照做就好)
选择imageview然后选择放入图片
选择自动布局,设置居中画面,设置等比例缩放,设置宽度600锁定,设定上下锁边!如此画面在各种机型下就不会变形啦
所见即所得,可以设置右边看到你调整后不同机型的平面变化,非常的方便
对你们没有看错,毛玻璃效果只是个控件,非常方便嘿嘿,运行下看看吧(记得 alpha调整到0.4)
点击运行,就会弹出模拟器窗口,记得多选几个机型!你会发现会自动调整布局
接下来和前面一样,可以运用sketch或者ps画一个圈输出图片放在2x上
选中圈拖到画面上
这边有点小复杂,首先左边是图层关系,所以圈是需要在最下方图层(最下方就是最上方显示,和ps是相反的),其次自动布局
样式可以参考右边参数,注意view和shape都需要布局
调整字体大小,再拖入一个lable
自动布局参数
这部分可以看下之前的自动布局我就不再演示一遍了参数右边有
好了开始做登录和注册的按钮拉一个button
再复制一个按钮,参数可按照右边随意修改
设置锁2边,2个按钮都是如此设置
设置自动布局参考右边参数
注册按钮设置
设置2个按钮圆角,点击+号添加
呵呵好了app启动页基本完成!不难吧:)
好啦开始做第2个页面新建一个页面
按住control后拖拽到新页面,按钮就可以链接到新页面啦
好了后面的部分我会再第2部分介绍,大家也可以来QQ群找我:421771474!
最后放下链接效果吧!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册