全方位梳理：如何成为一个移动端UI设计师

移动端的UI设计有其独有的一套设计规则和约束。新技术的不断加入促进了移动平台的快速增长，而移动端的UI设计也和传统的平面海报/网页设计不太一样。那么，要成为一个合格的移动端UI设计师需要掌握什么样的技能，经历怎样的涅磐才行呢？

Part 1 挑战和制约

每个媒体都有它的局限所在。即使是在移动端这个充满机会、自由和创意的平台上也有着许多亟待解决的问题，和无法回避的局限性。

碎片化的移动端

时至今日，市面上流通的智能机已经多不胜数了，不同的智能终端不仅仅尺寸不尽相同，而且因为分辨率的差异使得屏幕的像素密度也有很大差异，往细了考虑，这些终端的输入机制、屏幕比例、屏幕方向都会影响到移动端的UI设计。

移动端的网页设计可以借助响应式设计保证不同屏幕下的浏览体验，相比之下移动端的APP设计则相对缺少流动性。所以，作为移动端的UI设计师，还是需要考虑屏幕差异造成的布局设计的不同以及用户体验上的变化。

分裂的操作系统平台

目前主流的三大移动端操作系统是iOS，Android 和 Windows Phone（市场份额较小，在国内基本被边缘化了），每个操作系统都有它们自己的一套设计规范，交互方式，程序接口，而随着操作系统的版本更新，这些东西也都有着各自的变化。其中最典型的就是Android操作系统的版本分裂，分裂所造成的程序兼容问题至今都尚未弥合，这其中涉及到了操作系统版本的差异，以及厂商定制化之后造成的千奇百怪的兼容性问题（Android开发者已经无数次哭晕在厕所）。iOS也随着6.0到7.0的大版本升级，经历了一个较长的过度时期，至今两个大版本之间在设计风格和兼容性上的问题还影响着开发者。Windows Phone 从7到8的升级有多蛋疼我就不在此赘述了，那不堪回首的过去和微软高管被口水淹没的场景我真的不想回忆。

即使是三大平台在各自平台内交互设计有着较高的统一，系统版本分裂、操作系统差异以及厂商定制化所造成的影响是不容开发者和设计师忽视的。

性能

设计和构建一个APP的方式会直接影响到它的性能。换句话说，手机里安装的程序如果设计的好可以你的手机可以待机一天半，而如果其中有一个程序设计的有问题，会让你需要出门多带一个移动电源了。一些不必要的转场动画可能会让你的CPU为之进行密集地运算，一段存在问题的JS代码可能让你的浏览器耗费多于平常数倍的电量。也许今年刚刚上的Galaxy S5能够流畅运行某个应用，但是2年前的Galaxy Nexus可能会打开应用的时候立马卡出翔。总的来说，设计和开发，都会影响到APP的性能，甚至左右手机的续航（部分国产手机用户同开发者一起哭晕在厕所）。

开发与成本控制

有很多应用在构思之初非常酷炫新颖，但是这并不意味着它可以轻松实现。应用的设计和开发的方式会直接决定它能否在Deadline来临之前实现。如果我们无法认清一个应用的开发成本，那么开发者所承担的负担会成倍增加，也为应用的后续发展埋下了祸根。

Part 2 抛弃思维定势

当我们刚刚开始学习设计和开发的时候，，这个数字时代才刚刚开始，我们对于新兴事物的认知尚且稚嫩。学校教育和实际设计开发上的“时代差异”，让很多设计师对数字化的互联网的认知稍显“静态”，甚至形成某种思维定制，对于移动互联网也知之甚少。在这个信息爆炸的时代，激烈的竞争催化下的移动互联网正在以一种恐怖的速度演化、推进，这使得设计师们需要紧跟发展的步伐，随时更新升级自己对于互联网的认知。

移动端并非画布

移动端设计和平面设计有着巨大的差异，它不再是一张平面的画布。我怀疑PS和AI并不足以帮助设计师完成从平面向移动互联网的转变，尽管PS和AI已经帮助设计师们在过去的20年里完成了无数壮举。目前，我们依然需要借助它们来绘制更多不同屏幕尺寸下的UI和图标，但是我们需要借助更多的其他软件来展现移动端不一样的一面，比如用AE来绘制动效。

从构思屏幕布局到考虑界面转换

的确，当涉及移动端UI设计的时候，单单考虑屏幕布局是远远不够的。像Facebook Paper，雅虎天气，Weather Channl这样的优质移动APP就像我们证明了界面间的转场动画到底能让一个UI界面产生怎样的张力。而刚刚推出的Android L所用的Material Design则更是在看似普通的静态界面之后，隐藏了一系列让你欲罢不能的过度效果。

界面转换之间的动效，在过去只为博得一笑，今天却正在走向主流，成为移动端的用户体验的核心。它正在成为交互和界面的重要元素，赋予界面以韵律和生命力。动效不仅呈现运动的过程，还能表现出空间、层次，变化，在基础的界面结构上为用户带来截然不同的体验。

将你的“设计师做派”扔到一边

你并不需要将界面做独特或者原创，尤其是当你是为了独特而重新设计所有的界面，然后让整个产品为独特而担上风险。很多时候，坚持使用原生UI元素和模式是让应用能按时出货的重要保证。比起强行推动独特原创的设计，很多时候更合适的做法是打造简单高效的交互界面，创造真正的品牌价值。

真实的APP不比设计师的概念设计差

很多设计师喜欢上Behance和Dribbble这样的网站上去找灵感，虽然其中有很动优质的设计作品，但如果你并非一个经验丰富的移动UI设计师的话，可能会被这些作品误导。其中很多设计都仅仅只是从未实现过的高保真Demo，当你正打算设计一个界面的时候，其中某些设计可能会影响你的思路。所以，不妨从那些已经上线的成功APP中汲取营养吧。你会从中汲取到丰富的营养，看到蓬勃发展的设计趋势，这些经过市场和用户验证的案例会让你明白什么值得学习的设计。

Part 3 学习新技能

了解平台

正如同web设计师需要了解HTML/CSS一样，作为移动端UI设计师的你应该了解移动端APP的架构。首先移动端开发的语言和网页设计就不太一样，各个不同平台有着各自的编程语言和接口，界面的构成也无法使用CSS和标签来实现。

你需要深入阅读官方的开发文档，明白APP的构成，编译方式，发布方式，了解设计的规则。这些东西不仅关系到你的应用开发好坏，还会影响系统的稳定性，电池续航长短等多种因素。作为移动端UI设计师，你单了解设计是不够的。当然，从长远来看，这对于你的职业生涯也很有好处。

了解移动端的技术构成

光了解平台的基本特征是不够的。接下来你需要了解它相关的技术构成：位置服务（wifi，GPS等），蓝牙（低功耗蓝牙技术），信号，前后摄像头，麦克风，陀螺仪，位置传感器，加速度传感器，指纹扫描仪（iPhone 5s），眼动追踪技术，语音识别，人脸识别，等等等等。每一个新技术的背后以为着应用程序更多的可能性，交互设计、使用体验，甚至商业模式。

发掘本地UI组件的开发潜质

每个移动操作系统中中总有着大量的本地UI组件，他们有着极大的自由度，方便你进行定制。你需求确切地知道他们的特征（尺寸，大小，功用），你可以为与你合作的开发者节省大量的工作时间。

了解移动端的工作流程

安装SDK并运行，了解移动开发框架，比如TubyMotion、Xamarin、Titanium。熟悉集成开发环境，因为这其中包含了移动开发所需的方方面面。

了解移动端的界面模式

三大移动平台之间，有着相似之处，但是在深入探究他们的交互设计，会发现它们在理念上的巨大差异。作为一个设计师，你需要明白这些差异所在，以及它们是如何体现在实际案例中的。

不要只着眼于单一平台，三大平台都需要深入体验，每天至少都要把玩一下，并且最少要持续半年。在这个过程中，体会差异，并且将你觉得重要的、有代表性的、值得保存记录的界面截图留存。作为单一平台的狂热粉丝，你是做不好移动端UI设计师的。

记录并解释你的UI设计

考虑到屏幕截图并不足以表现UI全部的特性，你需要学会记录界面不同的状态、转变过程、转场动画等信息，并且学会记录界面对于不同状况的反馈。

在设计阶段践行精益UX设计

一个现代的设计师应该是具备战略眼光的设计师。你的目标不能局限于闷头制作漂亮的界面，你应该让你的设计与团队合作结合到一起，切合项目需求。洞悉用户深层次的需求，并且能快速地随之反馈到设计上。将设计作品保存下来并附上详细的说明，确保所有的设计都与核心理念保持一致，与用户需要保持一致。

在开发阶段采用敏捷UX设计

你不能只将高保真的模型交给开发者就了事，因为在开发过程中会不断提出新的需求。总会有之前考虑不周全的情况，需要在开发阶段进行补充完善，设计师需要随之进行快速响应。所以，在这个阶段，设计师真的需要坐在开发者旁边应付突发情况。确保开发者在碰到新的需求的时候，不用他们自己来补充UX的细节，或者再来找设计师。

Part 4 关于移动端网页设计的小技巧

响应式设计

在移动端，响应式设计并非是放之四海皆准的解决方案。有时候它非常适用，但是有的时候并非如此。你有责任考量什么时候采用专门的解决方案，什么时候需要做响应式设计。

谨慎使用CSS和JS

的确，CSS动画，渐变，阴影都非常赞，也非常容易实现。视差网页看起来也很酷，很多设计师都对此感兴趣。但是这些元素都非常消耗资源，对移动端的浏览器会产生很大的负荷，进而影响电池续航。适度控制CSS特效和JS动效都是很有必要的。即便低性能手机上浏览器可以良好地支持CSS3选择器，但是性能的瓶颈会让整体体验非常差。

使用合适的工具做合适的事情

这并不是是一个非常确切的清单，但是你能从中发现很多不错的工具帮你完成不同的工作。其中有一部分是免费的，有一部分是Mac平台的。

Part 5 所有的这些都已经过时了？

这么说，对，但也不对。目前移动端开发发展非常迅猛，设计趋势不断转变，智能家电，物联网时代也即将来临，相应的传感器技术和移动应用也会带来更多的挑战。作为一个移动端UI设计师，我们要学习的东西太多了，相应的，机会也迎面走来。

延伸阅读：
《刚接触APP设计的同学必读！APP的解构与重构》
《经验分享：如何提升企业产品（WEB APP）的用户体验？》
《用户体验设计中的精益之道》

原文地址：uxmag
优设网翻译：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

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

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