说：“这个方案实现不了”，这时候你全身都不好，开始在心里嘀咕，“这么简单的设计实现不了，你是搞技术的吗？”现在，作为设计师，只能加班加点改方案。哪里有问题？这其实是我们的设计者对App技术框架认识不足造成的。虽然我们不一定非要会写代码，但是掌握必要的App技术框架原理，可以帮助我们更有效地预测哪些方案是可行的，并取得更好的效果，让我们的设计更接地气。我们先来看看App的技术框架是怎样的。1.App技术框架类型图1三种App技术框架的关系目前App技术框架基本分为三种（图1）：1）NativeApp：基于智能移动设备（如iOS、Android、WP操作系统），并使用适用于相应系统的编程语言编写并运行第三方应用程序。由于它直接连接到操作系统，因此代码和接口是针对其运行的平台开发和设计的。善用设备的性能，让交互体验更流畅。2）WebApp：存在于智能移动设备浏览器中的用Html语言编写的应用程序。它不需要下载和安装。可以说是触屏版的网页应用。构建WebApp后，基本可以应用于各种系统平台。3）HybridApp：使用Native技术构建App外壳的移动应用，外壳中的内容由Web技术提供。.2、App技术框架的选择对于设计师来说，我们往往会被告知项目使用的是哪种技术框架，然后我们就开始设计。其实我们也可以根据产品特性、框架特性和项目时间（图2）和产品开发同学协商，合理的为App的不同部分选择相应的技术框架，然后思考相应下的设计方案技术框架。图2产品特性、框架特性和项目时间注意事项III。HybridApp技术框架的设计特点由于HybridApp融合了NativeApp和WebApp的技术特点，通过分析HybridApp的技术框架组件，我们可以更好的掌握App框架的基本开发知识，有助于我们进行设计更好的。HybridApp的大部分内容都加载在Native框架中的网页内容中，可以在保证用户体验的前提下，让App的内容更具可扩展性。即使接入了更多的内容和业务功能，也不会使整个App的安装包过大，典型的HybridApp的代表就是我们的手机淘宝客户端。在设计HybridApp时，要注意以下五点（图3）。图3HybridApp的五个设计要点1）图像渲染Native技术可以直接调用系统的渲染引擎，因此可以在不影响设备性能的情况下实现流畅的复杂图像渲染。由于网页内容部分是基于内置浏览器的，所以在渲染图片时需要通过浏览器访问系统的渲染引擎或者调用基于浏览器的第三方渲染引擎，渲染请求需要中间要分多个层级制作，这样渲染的时效性和性能会下降很多，导致更复杂的图像渲染或者动态渲染，机器会卡顿。如图4所示，由于标题栏采用了Native技术框架，可以使用复杂的毛玻璃效果使标题栏更加通透，而内容区使用了基于Html5的Web技术，不适合渲染背景图片动态变化方案（图片旋转时，背景图片会随着图片内容动态变化为模糊背景）。图4动态图像渲染2）动态体验由于HybridApp的大部分内容区采用了基于Html5的Web技术，动态效果的解释和运行消耗了大量的CPU性能。设计时要注意以下三个方面：a．不同的动画类型消耗不同的CPU性能（图5）：对CPU性能要求低的动画类型可以运行的更流畅，但是如果你的设计是非系统构建的动画类型（图6），就需要和开发沟通提前了解一下可行性和CPU性能的消耗。b.机型性能差异：不同机型的CPU性能差异较大，需要了解不同机型在你的App中的占比（图7），因为也就是在iPhone6上可以完美运行的动效或者在iPhone6以下的手机上可能会出现Interactiveaction卡顿的情况，所以不适合频繁渲染非常消耗CPU性能。C。网络的影响：如果你的动效需要在动效中加载内容，你必须考虑网络慢时内容加载对动效流畅度的影响。这时候可以考虑在开始动画之前先加载内容高效或者简化，压缩加载内容量。图5不同动画类型对CPU性能的要求图6液化翻转动画图7不同模型的市场占有率如图8，在Web内容区域，当你点击图片时，图片会被放大（系统默认Scaling动效消耗较少的CPU性能），但自动重新排列图片的其他动效会消耗更多的CPU性能。在低端机上，会出现卡顿或者闪退的情况，同时也会受到网速的影响。这会导致不友好的体验。如果一定要做复杂的动效，动效只能出现在高端机型上。图8图片缩放重排动画效果3）平台兼容性由于HybridApp的网页内容在不同平台上共享同一套设计方案，为了更好的让设计方案兼容不同平台特性和手机分辨率，建议文案和图形采用以下三种方法：a．系统默认字体：如果不是为了设计特殊的字体样式，iOS、Android和WindowsPhone系统的默认字体（图9）基本可以满足我们的需要，同时可以在不同平台上显示效果会更好。图9系统默认字体b．SVG（ScalableVectorGraphics）：可以自由缩放以适应不同的屏幕尺寸和分辨率，而不会模糊和变形（图10）。图10SVG（可缩放矢量图形）c．iconfont更换图标：大小和颜色可以自由变换（图11）。图11Iconfont图标使用这三种方法，不仅可以很好地适应不同的机型和屏幕尺寸，而且不会增加安装包的体积。如图12所示，如果按钮上的“闹钟和提醒我”不是Iconfont和系统默认字体，在不同尺寸的屏幕上显示效果会难以控制，有被拉长的风险，变形或模糊。图12图标和字体在不同尺寸屏幕上的显示效果4）交互行为由于HybridApp主要使用网页的CSS样式结构和JavaScript编程语言来还原界面设计和交互行为，因此与纯NativeApp技术框架，需要更繁琐的代码和分层请求才能实现与原生系统相同的交互方式。虽然也可以模拟NativeApp的交互方式，但是这样的模拟首先增加了开发成本，有悖于不影响性能和高效率的原则，因此需要根据设计目标合理选择是否需要与系统交互保持一致。如图13-a所示，如果“天天赢宝箱”页面采用纯Native框架搭建，当用户点击卡片“参与互动领取红包”时，下一页会使用默认权限-iOS系统的向右方向。与左切互动。图13-a系统默认的交互方式但是由于这里使用了HybiridApp技术框架，它会像网页一样直接改变内容区的信息（图13-b），因为这种实现方式比较高效且不影响Performance，更重要的是，如果页面采用直接改变内容的方式而不影响用户体验，可以认为不需要与系统交互保持一致。图13-b直接改变内容区域的交互方式5）加载方式对于HybridApp框架的页面，由于同时有Native和Web部分，在加载内容时，可以分别考虑加载方式：A.Native部分：可以根据需要在用户手机上存储常规内容，以加快加载时间，减少重复加载相同内容的麻烦。B、Web部分：Web内容区需要从网络加载内容，尤其是在网络状况不佳的情况下，需要设计友好的等待状态，以缓解用户的焦虑情绪。如图14所示，可以根据不同的框架设计不同的加载方式，使等待过程更短或更愉快。图14根据技术框架设计加载方式4、设计与技术的权衡1）明确设计方案的主要流程。在技??术面前，设计只能妥协吗？答案是不。在相应的App技术框架下，我们在考虑设计方案时，必须明确设计方案的主要流程和子流程（图15）。实施难度大、成本高，必须不断推动技术突破，为用户提供更好的用户体验。至于解决方案的子流程，我们可以和开发者协商不同的方案，明确技术可以调整的地方。实现方法或者其他设计方案，哪些方案有风险，需要有备选方案。图15设计方案的主要流程和子流程如图16所示。在设计手机淘宝店铺的标签模块时，大部分商家会根据商家的特点设置标签在图片上的内容和位置。宝贝图片。但是由于店铺的技术架构不支持标签移动功能，而我们的设计目标和解决方案的主要过程是为商家提供更加灵活的设置宝贝标签的功能。因此，即使技术实施难度大、成本高，我们也会推动技术突破，实现标签的可移动功能。图16店铺标签模块2）提前与开发者沟通设计思路的可行性分析产品需求后，我们可以简单的在纸上画出一个粗略的交互原型，然后与开发者沟通实现想法的可行性和难度，注意它的。如果项目中涉及到动效设计，可以用纸记录一个大概的动效，或者拿出平时收集的动效素材（图17）与开发者沟通可行性，快速验证设计思路.图17动态材质V.设计总结“世界上没有完美的设计，因为你最终能做的就是在各种关系之间取得平衡”——PaulRand（美国著名设计师）在项目中，设计师经常需要平衡业务目标、用户体验和技术实现之间的关系来制定设计方案。以上只是对App技术框架的基础知识的介绍，让设计者在做方案的时候更有底气。但由于技术日新月异，每天都在进步，因此在实践中，需要根据项目的不同阶段与开发工程师保持密切沟通，使设计方案更加可靠。
