不知道大家有没有遇到过这种情景，当你做好一个设计方案，满心欢喜地给开发讲解方案的思路和创意时，开发突然说一句：“这个方案实现不了”，这时你整个人都不好了，心里开始嘀咕“这么简单的设计都实现不了，你是搞技术的吗？”然并卵，在产品和开发的催促下，作为设计师的你只能加班加点地改方案。关键点SEOhttp://www.keyseo.cn/

到底问题出现在哪呢？这其实是由于我们设计师对App技术框架的知识匮乏所导致的，虽然我们不必做到会写代码，但掌握必要的App技术框架原理，能更有效地帮助我们预判哪些方案可行和实现效果较好，来让设计方案更接地气，让我们一起来了解一下App技术框架都有哪些。

一、App技术框架的类型

图2 产品特点、框架特点和项目时间的考虑

三、Hybrid App技术框架的设计特点

由于Hybrid App是融合了Native App和Web App的技术特点，通过分析Hybrid App的技术框架成分，能让我们更好地掌握App框架的基本开发知识，有助于我们更好地去做设计。

Hybrid App的大部分内容都是在Native框架中加载Web网页内容，能在保证用户体验的前提下，让App的内容更具有扩展性，即使接入再多的内容和业务功能，也不会使得整个App的安装包过大，典型Hybrid App的代表就是我们的手机淘宝客户端。Hybrid App在设计时，要注意以下五个要点（图3）。

图4 动态的图像渲染

2）动效体验

由于Hybrid App的内容区大部分采用基于Html5的Web技术，对动效的解释和操作需要消耗大量的CPU性能，在设计时，要注意以下三个方面：

a. 不同的动效类型对CPU性能的消耗不同（图5）:对CPU性能要求低的动效类型能运行得更流畅，但如果当你的设计方案是非系统自带的动效类型时（图6），就需要提前跟开发沟通可行性和对CPU性能的消耗问题。

b. 机型的性能差异：不同的手机机型的CPU性能相差较大，需要了解不同机型在你的App中的占比（图7），因为即在iPhone6上能完美运行的动效或交互动作，在iPhone6以下的手机上可能就会卡住不动了，所以不太适合用于CPU性能消耗较大的频繁渲染。

c. 网络的影响：如果你的动效在运动时，还需要加载内容，就要考虑网络较慢时，内容加载对动效流畅度的影响，这时可考虑先加载完内容，再开始动效或简化、压缩加载的内容量。

图6 液化翻转的动效

图8 图片缩放的重新排列动效

3）平台兼容

由于Hybrid App的Web内容，是不同的平台共用同一套设计方案，所以为了更好地让设计方案兼容不同的平台特性和手机分辨率，所以建议文案和图形采用以下三种方式：

a. 系统默认字体：如果不是为了设计出特殊的字体样式，iOS、Android和Windows Phone系统的默认字体（图9）是基本满足我们的需求，同时在不同平台上的显示效果也会比较好。

图14 根据技术框架来设计加载方式

四、设计与技术的权衡

1）明确设计方案的主流程

在技术面前，设计是否只能妥协呢？答案是否定的，在对应的App技术框架下，我们在考虑设计方案时，要明确设计方案的主流程和支流程（图15），凡是会影响到方案核心的主流程的方案，即使开发的实现难度和成本较高，我们也要持续推动技术的突破，来为用户提供更好的使用体验，而对于方案的支流程，我们就可以跟开发协商不同的解决方案，明确哪些地方可以调整技术实现方式或换一种设计方案，哪些方案存在风险，需要有备选方案。

五、设计小结

“世上没有完美的设计，因为你最终能做的就是在各种关系之间取得平衡”   ——Paul Rand（美国著名设计师）

在项目中，设计师往往需要权衡商业目标、用户体验和技术实现三者之间的关系来做设计方案，以上只是介绍App技术框架的基本知识，让设计师在做方案时更有把握，但由于技术日新月异，每天都在进步中，所以在实践中需要根据项目的不同阶段与开发工程师保持紧密的沟通，来让设计方案更靠谱。