从零开始做iOS界面设计

设计不是简单的排列组合与简单地再编辑，它应当充满着价值和意义。视觉、平面设计、排版、文案、信息结构以及可视化，所有的这些知识领域都应该是界面设计应该包含的内容，设计师对这些知识都应该有所涉猎或者比较专长。设计师的眼光要长远，要能从看似无关的学科中学习。优秀的设计是无形的，它通常会被它的用户所忽略，因为满意的用户往往都是沉默的。

设计绝非轻而易举之事，优秀的设计更是难上加难。在设计中，我们需要经常关注的便是设计中至关重要的。清晰度是界面设计中，第一步也是最重要的工作，清晰的界面能够吸引用户不断地重复使用。界面是为促进交互而存在的，优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

在设计中要保护和尊重用户的注意力，要让界面处在用户的掌控之中。每个屏幕都需要一个主题，勿让次要动作喧宾夺主。每个屏幕只展现必需的内容，如果用户需要作出决定，则展现足够的信息供其选择，他们会在下一屏找到所需细节。避免过度阐释或把所有一次展现，如果可能，将选择放在下一屏以有步骤地展示信息。

交互时自然过渡，让设计符合预期，并能很好的区分重点。强烈的视觉层次感，恰当的组织视觉元素，能有效的减轻用户的认知负荷，会让界面看起来更亲和。在设计中，色彩不是决定性的因素，色彩很容易被环境改变。色彩可以醒目，作为引导，但不应该是做区别的唯一元素。 针对现有问题去完善界面，不要为假设的问题设计界面，我们应该观察现有的行为和设计，解决现存的问题。

理论总会在需要的时候出现的，但我们最要关注的还是实践。好的设计不会凭空而来，实战才能见证真理。

设计规范

开始做设计时首先要考虑的就是设计规范，一般包含字体选用、配色运用等常见的标准即可。当时考虑做这个设计规范主要的原因就是设计的界面太多了，如果产品迭代很快，根本来不及一个个界面标注重复性的东西。有个设计文档，可以减少很多设计与开发之间的沟通。

UI设计规范

iOS各设备界面尺寸

设备	分辨率	状态栏高度	导航栏高度	标签栏高度	适配图
iPhone X	1125 x 2436 px	88px	132px	146px	@3x
iPhone6/7/8 plus	1242×2208 px	60px	132px	146px	@3x
iPhone6/7/8	750×1334 px	40px	88px	98px	@2x
iPhone5/5s/5c/SE	640×1136 px	40px	88px	98px	@2x
iPhone4/4s	640×960 px	40px	88px	98px	@2x
12.9" iPad Pro	2732px × 2048px	40px	88px	98px	@2x
10.5" iPad Pro	2224px × 1668px	40px	88px	98px	@2x
iPad3/4/Air/Air2/mini2	2048×1536 px	40px	88px	98px	@2x
iPad1/2	1024×768 px	20px	44px	49px	@2x
iPad mini	1024×768 px	20px	44px	49px	@2x

iPhone X 底部还有个34pt（68px @2x）的高度。

iPhone设计尺寸信息图 Inkedipad设计尺寸信息图

图标尺寸

设备	App Store	程序应用	Notification icon	spotlight搜索
iPhone X	1024*1024px	180*180px	60×60px	87×87 px
iPhone6/7/8 plus	1024*1024px	180*180px	60×60px	87×87 px
iPhone6/7/8	1024*1024px	120*120px	40×40px	58*58px
iPhone5/5s/5c/SE	1024*1024px	120*120px	40×40px	58*58px
iPhone4/4s	1024*1024px	120*120px	40×40px	58*58px
iPad Pro	1024*1024px	167*167px	40×40px	80*80px
iPad3/4/5/6/Air/Air2/mini2	1024*1024px	152*152px	40×40px	80*80px

字体

设备	文本	可接受的下线	见小值	舒适值
iOS	长文本	26px	30px	32-34px
iOS	短文本	28px	30px	32px
iOS	注释	24px	24px	28px

参考

Apple人机交互规范
常用UI设计尺寸