搞定一像素不求人！为设计师量身打造的Xcode教程（1）

编者按：从零开始帮你掌握Xcode！设计师同学想跟工程师一起开开心心做好产品，懂点开发知识是必不可少的，今天@JingDesign 拿出万分诚意，写了这篇Xcode教程，今后就再也不用为了一像素跟工程师吵架咯，赶紧来看！

设计师讲Xcode？静电疯了吗？

@JingDesign ：hi，欢迎和静电一起进入新的学习计划中。本次我们来点刺激的，对！就是Xcode！什么？有人问Xcode是神马？好吧，静电承认这个教程做的确实够激进，很多人不知道Xcode是神马东东。那么静电在这里直截了当的介绍下，Xcode是苹果公司推出的iOS及MacOS APP开发环境，运行在Mac OS系统中，我们平时在iPhone，iPad及Mac上用的软件，都是用他来进行开发的. 所以对于iOS开发工程师来说，这是xcode必不可少的工作软件. 但对于设计师来说，静电为什么要选择一款开发工程师使用的软件作为新一季的教程选题呢?来听静电讲讲。

App设计师为什么要学习Xcode?

大家是否记得静电上一次发的文《一像素的恩怨情仇！射鸡师与工程师的那点破事儿》。这篇文章在设计师群体，甚至开发工程师直接都引起了很大的共鸣，设计师抱怨工程师不愿意为了一像素的错位去修改程序，工程师觉得总是这么改对于他们实现更高的价值来说，简直是浪费时间。于是矛盾诞生了，火拼开始了。

另外，在静电的设计群中，有很多刚刚进入app设计领域的设计师，对于软件基本的软件开发原理，像素，ppi等等都不甚了解，要知道，要设计出一款优秀的APP产品，可不是单纯会使用photoshop那么简单的，现在，请大家问自己这样几个问题：

1. 在设计APP的过程中，你知道用多大的画布尺寸来做设计最合适吗？
2. 你知道@2x，@3x的图片对应那些设备，他们具体是做什么用的吗？
3. 有没有在开发中遇到这样的问题，一像素的细线总是看起来比一像素粗？
4. 你了解如何在xcode中插入一张图片，插入一段文字，甚至更多组件的实现原理？你了解imageview，tableview等等专业名词吗？
5. 你知道在更大屏幕的ios设备中（如iphone6 plus），元素的适配是基于什么规则来实现的吗？
6. 你在切图过程中，有不遵循开发实现方式，以至于让工程师抓狂的情形吗？
7. 有没有想过自己可以了解软件是如何运行在自己的iPhone上，我们可以自己开发出一款运行在自己手机上的APP吗？

是的，很多人会说不知道，还有人会说，我为什么要了解这些，这完全是开发工程师的事情，我只需要把效果图做出来就可以了。如果看了静电的sketch教程，甚至还有人在吐槽为什么我需要做这些的事情，我想你不适合看这个系列文章。

静电的Sketch教程合集：

1. 《SKETCH设计教室！从零开始学APP设计利器SKETCH（一）》
2. 《SKETCH设计教室！从零开始学APP设计利器SKETCH（二）》
3. 《SKETCH设计教室！带你了解超好用的SKETCH插件》
4. 《想要一稿过不加班？SKETCH绝配神器MIRROR抢先体验》

以下是静电总结出来的几条，你要开始学习Xcode的原因：

1. 让你不会天马行空的设计被工程师打回而感到失望和沮丧
2. 让你更快更高质量的完成你的设计稿，然后再来个锦上添花
3. 让你每天跟开发工程师开开心心的配合，成为好基友
4. 如果你注定跟工程师成不了好基友，自己搞定那该死的一像素错位，让他们刮目相看！

如果这些还不够，那还有最后一条。你可能会因此成为大神，升职加薪，出任CEO，赢取白富美，走上人生巅峰。让同事刮目相看

这样难道还不够吗？ 哈哈，一定够了！来，别被我不会代码这样的预设打倒，静电来回答大家的疑问。

学习Xcode，我必须要会代码吗？

放轻松，亲。现在，我们来分析一下，静电认为设计师有这三种情况。

1，我真的不会代码，看到代码我就眩晕，呕吐。Photoshop是我的独门绝技，快捷键用的搜搜，各种特效滤镜全包。Dreamweaver神马的直接不会，设计稿完成直接扔给前端工程师帮你完美搞定，代码神马的爱哪儿哪儿去~

2，我会一点点代码，可以改个颜色数值什么的- 恩，我想你已经入了门，用xcode也可以帮你做类似于dreamweaver里的操作。一像素随便调。

3，我对代码有天生的好感，如果努力学习，xcode不在话下-这个，请受静电一拜，大湿收静电为徒吧，给静电编个photoshop，做完一个按钮直接生成app，让程序猿下岗去吧！

开玩笑，如果你不是这三种中的某一种，那么欢迎告诉静电你是哪种设计师。 不管怎么样，对于以上三种设计师，xcode都适合大家不同程度的学习和使用。不用编码，你可以了解大部分app开发原理，这就够了。对于第二种第三种，那更好了，如果开发工程师不屑于改神马一像素，Do it yourself！改到自己满意为止。

所以，不用担心，来跟静电一起Xcode之旅吧。在本章中，静电用最快的方式教大家安装xcode并可以在你的电脑上运行。哦，忘了说，你必须要有台mac电脑。（我不会出去，你们休想打死我。。。保证也没有用）。PC的同学请先围观下，因为，如果大家做安卓开发，这样的思路同样试用，只不过你需要一台PC（Mac也可以），安卓需要安装eclipse（保佑我没拼错单词）。

下载并安装Xcode

首先我们可以从苹果开发者网站下载最新版的xcode.

下载地址：https://developer.apple.com

打开后，我们选择主菜单的downloads，可以进入下载界面。

然后选择 View in the mac App Store，到达APP store界面，接着点击 View in Mac App Store

接下来会打开mac系统自带的App store，选择安装App按钮.输入苹果ID就可以下载了（相信使用iphone设备的同学一定是人手一个id的）

登录后即可开始下载.文件比较大，请耐心等待. 完成后，我们可以直接在launchpad中找到如下图标，还是闪闪发光的.

点击就可以打开了. 或者直接使用spotlight搜索xcode同样能运行.

Tips：如果App Store无法下载，请使用搜索引擎搜索xcode，会有其他很多网站提供安装包，请确保下载的版本为最新版，太老了可不好用哈.然后就使用迅雷等等软件加速下载吧.

你好，Xcode！

打开xcode会出现欢迎界面，界面如下.静电接下来一个一个为大家介绍。

首先是左边的三个图标。

1. Get start with a playground ——这是xcode为了方便我们了解和快速上手swift特意为我们建造的”游乐场”.我们先略过这项

2. Creat a new Xcode Project —— 创建一个Xcode项目。 当我们打算开发一款软件的时候，一般会使用第二个选项创建一个“项目”

3. Check out an existing project —— 取回一个已有的项目。一般开发会使用svn或者git等版本控制软件来进行多人协作开发，如果你已经有svn或者git的基础，有开发人员提供git或者svn服务权限，那么可以直接打开一个现成的工程进行研究。这一项我们在后边几章的进阶中详细介绍。

右侧的一堆文件图标，那是静电打开过的历史文件记录。大家会看到一堆的测试文件。

来与xcode一起玩耍吧！

为了快速了解xcode，与这个神秘的软件交朋友，我们选择Creat a new Xcode project，新建一个软件工程，在弹出的界面中选择Single View Application，点击next继续。（其它选项我们现在用不到，这里先不做讲解。后期我们会详细介绍。）

接着为我们的项目起一个名字。下面的选项不用管。直接Next，然后选择一个保存位置，这个随便选就好。

确认后我们看到如下界面。 有些朋友第一次安装可能没有上面的菜单，这个时候，在如下箭头所示的位置鼠标右键选择 icon & text。然后选择 最右边箭头，把三个全点成蓝色。 所有的界面就出现了。

哇，好复杂有木有，大家会不会一头雾水？ 别急，我们一步一步来，选择下图所示的文件，接下来把屏幕右侧的文字随便改成自己想要的吧。

接下来按图点击

1. 选择一个模拟器

2. 点击run

如果没有什么问题的话，你会在模拟器的启动画面中看到hello xcode的字样，这样 一个空白的，有着hello xcode字样的简单app就完成了（启动画面小消失很快，记得盯着模拟器看哦。否则你会看到大白边，啥都没有）怎么样，简单吧？ 如果大家没看到，请点击一次stop，然后再运行一遍。

好的，这一次的文字，我们首先跟大家一起来熟悉一下xcode，让大家不会有太多陌生感。再次声明一下，本教程主要面向的对象是广大的app设计师以及对软件有兴趣的朋友，专业人士请不要嘲笑静电。毕竟，这个在你们眼里，真的是再简单不过了。好的，接下来的n篇文章中，让我们来一场设计师的逆袭之旅吧。 别被复杂的功能吓到，其实，Xcode的很多操作，都可以借助可视化界面及右侧的属性面板完成，这样很多界面的工作我们可以直接进行调整了。

下一章我们继续来讲解这个实例，让我们看看怎么在这个简单的app中加入更多好玩的功能。请持续关注静电的公众帐号 jingdesign91，教程会在静电的公号，站酷中首发。欢迎大家相互交流学习，一同加油！

扫描二维码关注我: jingdesign91

专为毕业生量身打造的三篇好文！帮你迅速找到好工作！

大咖前辈现身说法！亲历者经验！
《毕业生必看！刚入行的设计师如何敲开大公司的门》

有了这个，就不怕遇到黑心老板啦！
《找工作必备！教你一眼识穿招聘公司有木有坑》

朋友挤破头来让你帮个忙？看看这篇！
《人情练达即文章：如何拒绝朋友免费做设计的要求？》

原文地址：guimobile
作者：@JingDesign

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量87万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：