动端的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设计师，我们要学习的东西太多了，相应的，机会也迎面走来。

享一些前端使用的UI框架，详细的框架说明请复制链接进入官网查看，小编只做汇总

Vantui 基于vue的移动端UI框架，适合商城项目，支持H5和小程序两个版本

https://youzan.github.io/vant/#/zh-CN/intro

Cube UI 基于 Vue.js 实现的精致移动端组件库,滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。

https://didi.github.io/cube-ui/#/zh-CN/docs/index-list

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

https://v3.bootcss.com/

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

https://weui.io/

MUI 最接近原生APP体验的高性能前端框架,MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K

https://dev.dcloud.net.cn/mui/

FrozenUI 是一套基于移动端的UI库轻量、精美、遵从手机 QQ 设计规范

http://frozenui.github.io/

Amaze ~ 妹子 UI 中国首个开源 HTML5 跨屏前端框架,从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

https://amazeui.clouddeep.cn/

Muse-UI 基于 Vue 2.0 优雅的 Material Design UI 组件库,拥有40多个UI 组件，用于适应不同业务环境。

https://muse-ui.org/#/zh-CN

Pure.CSS 美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。

https://www.purecss.cn/

Onsen Ui 开发HTML5混合和移动web应用程序的最漂亮和最有效的方法。

https://onsen.io/

SUI Mobile 基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。

http://m.sui.taobao.org/

YDUI Touch 一只注重审美，且性能高效的移动端&微信UI。专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高。

http://www.ydui.org/

Mint UI 基于 Vue.js 的移动端组件库，考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

http://mint-ui.github.io/#!/zh-cn

Taro UI 一套基于 Taro 框架开发的多端 UI 组件库，一套组件可以在微信小程序 / H5 / 百度小程序 等多端适配运行

https://taro-ui.aotu.io/#/

持续更新中...

动端与网页端UI设计差异剖析

一、设备差异决定交互方式

在移动互联网时代，智能手机无疑成为了人们生活中不可或缺的一。作为移动设备的主要交互方式，触摸屏幕操作给UI设计带来了全新的挑战。传统的网页浏览也在不断演进，鼠标和键盘仍是主导交互方式。

移动设备的屏幕相对较小，用户主要通过拇指进行操作。UI设计需要考虑到手指操作的不精确性，按钮等可点击区域需要足够大，以确保用户能够准确触发相应操作。手势操作如滑动、长按等也为移动端交互带来了便利，设计师需要合理利用这些手势，提升操作效率。

网页端的鼠标光标操作更加精确，悬停效果等细微交互在网页上得以实现。右键菜单也为用户提供了快捷呼出上下文选项的便利。这些交互方式都需要设计师在UI设计中加以考虑和应用，以提升用户体验。

二、内容展示需因硬件调整

硬件设备的差异也直接影响了内容展示方式的不同。移动设备的屏幕尺寸有限，信息架构需要精简，主次功能分层级展示，一屏内容有限，需要分页展示。网页端的大屏幕则可以同时展示更多信息，功能可以同级并列，一页内容量也更大。

以新闻客户端为例，移动端版本通常会将头条新闻以大图方式突出展示，其他新闻则以列表形式分页展示。而网页版本则可以在一个页面中同时展示多个新闻标题和概要，读者可以快速浏览并选择感兴趣的内容。

移动设备的硬件性能和网络环境也对内容展示提出了更高要求。为了确保流畅的用户体验，移动端UI设计需要精简内容，减少不必要的图片和动画加载，优化网络传输效率。而网页端则可以在高性能设备和网络环境下，展示更丰富的多媒体内容。

三、用户体验需专门优化

移动端和网页端的用户场景和使用习惯差异也决定了UI设计需要针对性地优化用户体验。

以输入操作为例，移动端的虚拟键盘输入效率较低，因此UI设计需要尽量减少输入需求，可以通过选择、滑动等方式代替输入。输入框也可以加入清除按钮，方便用户快速删除错误输入。

而网页端的键盘输入则相对高效，但鼠标操作的可操作性反馈就显得尤为重要。鼠标悬停时，可点击区域的高亮显示可以让用户快速识别出可交互元素。右键菜单的快捷呼出也可以为用户提供常用操作的快捷入口，提高效率。

除了输入输出，移动端和网页端在内容展示、导航、反馈等多个方面的用户体验都有所差异，都需要设计师根据不同场景作出相应优化。

四、跨平台兼容是设计挑战

跨平台的兼容性问题也是移动端和网页端UI设计需要重点考虑的一个方面。

移动端不同的操作系统如iOS和Android，其UI设计规范和交互习惯都有一定差异。以返回按钮为例，iOS设备通常将其置于屏幕左上角，而Android设备则置于屏幕底部。移动端UI设计需要遵循各操作系统的规范，并进行相应调整以确保一致的用户体验。

网页端则需要考虑不同浏览器的兼容性问题。不同浏览器对CSS、JavaScript等Web技术的实现和渲染效果可能存在差异，这就需要设计师进行全面的兼容性测试，并作出必要的调整和优化，以确保UI在各种浏览器下的一致展示效果。