出处：优设网
做者：信籽
连接：http://www.uisdc.com/3-basic-app-technical-frameworkweb
信籽（手淘设计师）：不知道你们有没有遇到过这种情景，当你作好一个设计方案，满心欢喜地给开发讲解方案的思路和创意时，开发忽然说一句：“这个方案实现不了”，这时你整我的都很差了，内心开始嘀咕“这么简单的设计都实现不了，你是搞技术的吗？”然并卵，在产品和开发的催促下，做为设计师的你只能加班加点地改方案。
到底问题出如今哪呢？这实际上是因为咱们设计师对App技术框架的知识匮乏所致使的，虽然咱们没必要作到会写代码，但掌握必要的App技术框架原理，能更有效地帮助咱们预判哪些方案可行和实现效果较好，来让设计方案更接地气，让咱们一块儿来了解一下App技术框架都有哪些。浏览器
1、App技术框架的类型
图1 三种App技术框架之间的关系网络
目前App的技术框架基本分为三种（图1）：
1）Native App：
一种基于智能移动设备本地操做系统（如iOS、Android、WP操做系统），并使用对应系统所适用的程序语言编写运行的第三方应用程序，因为它是直接与操做系统对接，代码和界面都是针对所运行的平台开发和设计的，能很好地发挥出设备的性能，因此交互体验会更流畅。
2）Web App：
一种采用Html语言编写的，存在于智能移动设备浏览器中的应用程序，不须要下载安装，能够说是触屏版的网页应用，因为它不依赖于操做系统，所以开发了一款Web App后，基本能应用于各类系统平台。
3）Hybrid App：
一种用Native技术来搭建App的外壳，壳里的内容由Web技术来提供的移动应用，兼具“Native App良好交互体验的优点”和“Web App跨平台开发的优点”。app
2、App技术框架的选择
对于设计师而言，咱们每每是被告知这个项目采用的是哪一种技术框架，而后就开始设计了，其实，咱们也能够根据产品特色、框架特色和项目时间（图2）来与产品和开发同窗协商，合理地为App中不一样的部分选择对应技术框架，而后才在对应的技术框架下思考设计方案。框架
图2 产品特色、框架特色和项目时间的考虑性能
3、Hybrid App技术框架的设计特色
因为Hybrid App是融合了Native App和Web App的技术特色，经过分析Hybrid App的技术框架成分，能让咱们更好地掌握App框架的基本开发知识，有助于咱们更好地去作设计。
Hybrid App的大部份内容都是在Native框架中加载Web网页内容，能在保证用户体验的前提下，让App的内容更具备扩展性，即便接入再多的内容和业务功能，也不会使得整个App的安装包过大，典型Hybrid App的表明就是咱们的手机淘宝客户端。Hybrid App在设计时，要注意如下五个要点（图3）。字体
图3 Hybrid App的五个设计要点ui
1）图像渲染
Native技术部分因为能直接调用系统的渲染引擎，因此能实现流畅的复杂图像渲染，而不影响设备的性能。
Web内容部分因为是基于内置浏览器，在图像渲染的时候要经过浏览器访问系统的渲染引擎或调用基于浏览器的第三方渲染引擎，中间须要在多个层级进行渲染请求，因此渲染的时效性和性能会降低很多，致使较复杂的图像渲染或动态渲染时，会出现机器卡顿。
如图4所示，因为标题栏采用了Native技术框架，可采用复杂的毛玻璃效果，让标题栏更通透，而内容区采用了基于Html5的Web技术，所以不适合动态变换背景图的渲染方案（当图片轮播时，背景图会随着图片内容而动态变换出模糊的背景）。spa
图4 动态的图像渲染操作系统
2）动效体验
因为Hybrid App的内容区大部分采用基于Html5的Web技术，对动效的解释和操做须要消耗大量的CPU性能，在设计时，要注意如下三个方面：
a. 不一样的动效类型对CPU性能的消耗不一样（图5）:对CPU性能要求低的动效类型能运行得更流畅，但若是当你的设计方案是非系统自带的动效类型时（图6），就须要提早跟开发沟通可行性和对CPU性能的消耗问题。
b. 机型的性能差别：不一样的手机机型的CPU性能相差较大，须要了解不一样机型在你的App中的占比（图7），由于即在iPhone6上能完美运行的动效或交互动做，在iPhone6如下的手机上可能就会卡住不动了，因此不太适合用于CPU性能消耗较大的频繁渲染。
c. 网络的影响：若是你的动效在运动时，还须要加载内容，就要考虑网络较慢时，内容加载对动效流畅度的影响，这时可考虑先加载完内容，再开始动效或简化、压缩加载的内容量。
图5 不一样的动效类型对CPU的性能要求
图6 液化翻转的动效
图7 不一样机型的市场占比
如图8所示，在Web内容区，当点击图片后，该图片放大（系统默认的缩放动效，对CPU性能消耗小），但其它图片自动从新排列的动效会比较消耗CPU性能，在低端机器上会出现卡顿或闪退的状况，而且还会受到网速的影响，致使体验不友好，若是必须作复杂动效，可让该动效只出如今高端机型中。
图8 图片缩放的从新排列动效
3）平台兼容
因为Hybrid App的Web内容，是不一样的平台共用同一套设计方案，因此为了更好地让设计方案兼容不一样的平台特性和手机分辨率，因此建议文案和图形采用如下三种方式：
a. 系统默认字体：若是不是为了设计出特殊的字体样式，iOS、Android和Windows Phone系统的默认字体（图9）是基本知足咱们的需求，同时在不一样平台上的显示效果也会比较好。
图9 系统默认字体
b. SVG（可缩放矢量图形）：可以自由缩放大小来适应不一样屏幕尺寸和分辨率，不会模糊变形（图10）。
图10 SVG（可缩放矢量图形）
c. Iconfont来代替图标：可以自由变换大小和颜色（图11）。
图11 Iconfont图标
采用这三种方式不只能够很好适配不一样机型和屏幕尺寸，并且还不会增长安装包的大小。
如图12所示，若是按钮上的“闹钟和提醒我”采用的不是Iconfont和系统默认字体，则在不一样尺寸的屏幕上的显示效果会很难控制，有被拉伸变形或模糊的风险。
图12 图标和字体在不一样尺寸屏幕上的显示效果
4）交互行为
因为Hybrid App主要是经过网页的CSS样式结构和JavaScript程序语言来还原界面的设计和交互行为，因此跟纯Native App技术框架相比，须要经过更繁琐的代码和层级请求才能实现跟原生系统同样的交互方式，虽然也可模拟Native App的交互方式，但这样的模拟首先提升了开发成本，有悖于不影响性能和高效的原则，因此须要根据设计目标来合理选择是否须要跟系统交互保持一致。
如图13-a所示，若是“每日赢宝箱”的页面是纯Native框架搭建的，则当用户点击“参与互动拿红包”的卡片后，下一个页面会采用iOS系统默认的自右向左切入的交互方式。
图13-a 系统默认的交互方式
然而，因为这里采用的是Hybirid App技术框架，因此会像网页同样，直接变换内容区的信息（图13-b），由于这样的实现方式更高效和不影响性能，更重要的是若是该页面采用直接变换内容的方式不会影响到用户的使用体验，这里就能够考虑不须要跟系统交互保持一致。
图13-b 直接变换内容区的交互方式
5）加载方式
对于Hybrid App框架的页面，因为同时存在Native和Web部分，因此在加载内容时，能够分开考虑加载方式：
A. Native部分：能够根据须要把常规内容存储在用户的手机上，加快加载的时间和减小重复加载相同内容的麻烦。
B. Web部分：Web内容区域是须要从网络上加载内容的，尤为在网络条件很差时，须要设计友好的等待状态，缓和用户的焦虑情绪。
如图14所示，能够根据不一样的框架，来设计不一样的加载方式，让等待过程更短或更愉悦。
图14 根据技术框架来设计加载方式
4、设计与技术的权衡
1）明确设计方案的主流程
在技术面前，设计是否只能妥协呢？答案是否认的，在对应的App技术框架下，咱们在考虑设计方案时，要明确设计方案的主流程和支流程（图15），凡是会影响到方案核心的主流程的方案，即便开发的实现难度和成本较高，咱们也要持续推进技术的突破，来为用户提供更好的使用体验，而对于方案的支流程，咱们就能够跟开发协商不一样的解决方案，明确哪些地方能够调整技术实现方式或换一种设计方案，哪些方案存在风险，须要有备选方案。
图15 设计方案的主流程和支流程
如图16所示，在设计手机淘宝店铺的标签模块时，因为大部分商家会根据宝贝图的特色，来设置图上标签的内容和位置，但是，因为店铺的技术框架不支持标签移动的功能，而咱们的设计目标和方案的主流程就是要为商家提供更灵活设置宝贝标签的功能，因此即便技术实现难度和成本较高，咱们也推进技术进行突破，实现标签的可移动功能。
图16 店铺的标签模块
2）提早与开发沟通设计想法的可行性
咱们分析完产品需求后，能够先简单地在纸上画出粗犷的交互原型，而后，跟开发沟通想法的可行性及实现难度，作到心中有数。若是方案中涉及动效设计，可经过纸片来录制粗略的动效，或拿出本身平时收集的动效素材（图17）与开发沟通可行性，来快速验证设计想法。
图17 动效素材
5、设计小结
“世上没有完美的设计，由于你最终能作的就是在各类关系之间取得平衡” ——Paul Rand（美国著名设计师）在项目中，设计师每每须要权衡商业目标、用户体验和技术实现三者之间的关系来作设计方案，以上只是介绍App技术框架的基本知识，让设计师在作方案时更有把握，但因为技术突飞猛进，天天都在进步中，因此在实践中须要根据项目的不一样阶段与开发工程师保持紧密的沟通，来让设计方案更靠谱。
