你得知道这3个最基础的App技术框架 - 博客 - 伯乐在线
& 你得知道这3个最基础的App技术框架
不知道大家有没有遇到过这种情景，当你做好一个设计方案，满心欢喜地给开发讲解方案的思路和创意时，开发突然说一句：“这个方案实现不了”，这时你整个人都不好了，心里开始嘀咕“这么简单的设计都实现不了，你是搞技术的吗？”然并卵，在产品和开发的催促下，作为设计师的你只能加班加点地改方案。
到底问题出现在哪呢？这其实是由于我们设计师对App技术框架的知识匮乏所导致的，虽然我们不必做到会写代码，但掌握必要的App技术框架原理，能更有效地帮助我们预判哪些方案可行和实现效果较好，来让设计方案更接地气，让我们一起来了解一下App技术框架都有哪些。
一、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 产品特点、框架特点和项目时间的考虑
三、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的五个设计要点
1）图像渲染
Native技术部分由于能直接调用系统的渲染引擎，所以能实现流畅的复杂图像渲染，而不影响设备的性能。
Web内容部分由于是基于内置浏览器，在图像渲染的时候要通过浏览器访问系统的渲染引擎或调用基于浏览器的第三方渲染引擎，中间需要在多个层级进行渲染请求，所以渲染的时效性和性能会下降不少，导致较复杂的图像渲染或动态渲染时，会出现机器卡顿。
如图4所示，由于标题栏采用了Native技术框架，可采用复杂的毛玻璃效果，让标题栏更通透，而内容区采用了基于Html5的Web技术，因此不适合动态变换背景图的渲染方案（当图片轮播时，背景图会随着图片内容而动态变换出模糊的背景）。
图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 根据技术框架来设计加载方式
四、设计与技术的权衡
1）明确设计方案的主流程
在技术面前，设计是否只能妥协呢？答案是否定的，在对应的App技术框架下，我们在考虑设计方案时，要明确设计方案的主流程和支流程（图15），凡是会影响到方案核心的主流程的方案，即使开发的实现难度和成本较高，我们也要持续推动技术的突破，来为用户提供更好的使用体验，而对于方案的支流程，我们就可以跟开发协商不同的解决方案，明确哪些地方可以调整技术实现方式或换一种设计方案，哪些方案存在风险，需要有备选方案。
图15 设计方案的主流程和支流程
如图16所示，在设计手机淘宝店铺的标签模块时，由于大部分商家会根据宝贝图的特点，来设置图上标签的内容和位置，可是，由于店铺的技术框架不支持标签移动的功能，而我们的设计目标和方案的主流程就是要为商家提供更灵活设置宝贝标签的功能，所以即使技术实现难度和成本较高，我们也推动技术进行突破，实现标签的可移动功能。
图16 店铺的标签模块
2）提前与开发沟通设计想法的可行性
我们分析完产品需求后，可以先简单地在纸上画出粗犷的交互原型，然后，跟开发沟通想法的可行性及实现难度，做到心中有数。如果方案中涉及动效设计，可通过纸片来录制粗略的动效，或拿出自己平时收集的动效素材（图17）与开发沟通可行性，来快速验证设计想法。
图17 动效素材
五、设计小结
“世上没有完美的设计，因为你最终能做的就是在各种关系之间取得平衡”
——Paul Rand（美国著名设计师）
在项目中，设计师往往需要权衡商业目标、用户体验和技术实现三者之间的关系来做设计方案，以上只是介绍App技术框架的基本知识，让设计师在做方案时更有把握，但由于技术日新月异，每天都在进步中，所以在实践中需要根据项目的不同阶段与开发工程师保持紧密的沟通，来让设计方案更靠谱。
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线博客团队正试图以我们微薄的力量，把优秀的原创/译文分享给读者，做一个小而精的精选博客，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线
赞助云主机有没有免费的抠图软件啊。 – 讨论区 – APP每日推送
讨论区精华推荐
by kimiby kimiby AndyTomby 翔哥想飞天by 翔哥想飞天by 翔哥想飞天移动修图App有必要做专业吗？该怎么做？
笔者没做摄影以前，就尝试了一些修图的App,那时正是智能移动设备发展的过程中，当时修图的App可没有现在的多，提专业性觉得还是有点太勉强了。而随着移动领域的不断发展，没要几年，各种各样的修图App就出现了，甚至一些App都打着专业修图的口号，那么在移动领域究竟有没有必要做成专业？该怎么做？
现今在移动领域（以下所说移动领域为iOS和Android平台），比较专业的修图软件如Snapseed、泼辣修图、PhotoViva、Photoshop移动版以及Lightroom移动版等，初次使用觉得还是挺不错的，自己就按照平常修图的程序一步一步的尝试修一张图片，可是修着修着发现问题来了，磨皮要怎么磨呢？调出美图秀秀来个一键磨皮？接着某处局部想要特殊调整一下，发现没这个功能，或者功能不全面，最后勉强弄出一张来，想加个水印，还需要别的软件来完成，然后又来一次导入导出。
因为笔者平常修图修的步骤不是很多，所以只出现了三个问题，要是创意多一点，就会发现在移动领域，用这些App来修图，要么就是折腾，要么就是各个软件来回切换，或者根本修不出专业感。这里可能有人会说，上面那些App已经很能满足他们的专业需求了，怎么就不专业了呢？其实很重要的一点就是操作方面，既然是工作，那双手做起来会更具有效率，可这些App根本就没有设计的能让双手来进行操作，平常在桌面领域，左手快捷键，右手控制鼠标，熟练的话，旁人都看不清操作流程的，而这些App只能用指头一个一个的戳，很是影响效率。还有就是，第三方扩展基本没有，有时候第三方插件的确比较方便，省去很多步骤，但是如今的这些App，貌似没有什么插件可用，就算是有，功能也不可能和桌面上比，或者也是很局限。最后就是从相机中把图片导入移动设备了，虽然现在这些移动设备都可以安装读卡器，或者相机有wifi功能，可以无线导进去，但是一般考虑后期的话，都会拍摄raw文件，但是对于相机raw文件的兼容性来说，也是个挺麻烦的问题，很多软件并不支持raw文件。
所以就因为这些原因，在传统桌面领域面前，移动领域的修图App就显得非常的无力，如果用这些App来工作的话，不但浪费时间，而且还折腾。但是凡事都不是绝对的，毕竟智能移动设备发展的时间不长，近几年才逐渐普及开来，一些落后地区都还没有普及。但是有一个积极的信号就是，如今已经很多人都能够很好的使用智能移动设备了，并且已经成为生活的必须品，从今年苹果、微软的发布会来看，满足专业和特殊需求的用户成为了之后很重要的一个目标。这样就可以看出，这些App并不是不好，而是还在不断的发展之中，或许还没能在这些移动平台找到专业的那种范儿，当然，这也只是时间问题，终有一天，不说超越传统桌面领域，至少平起平坐是不成问题的。
那么现在如果出差、旅游，或者闲暇时间，就不能修图工作一下了？当然可以了。以现阶段来说，移动领域虽然App跟不上，但是硬件和系统是可以跟上的，比如微软的Surface系列产品，把传统桌面的系统都塞了进去，修图已经不成问题了，而且也比笔记本的重量轻不少，便携性不成问题了。如果觉得Surface太大了的话，那么也有一些小尺寸X86的平板是不错的选择，虽然配置不怎么样，但是依托最新的WIN10操作系统，对流畅度、稳定性有了不错的提升，配合保护套上的键盘，修图虽然处理速度慢一点，但也比上面所说的那些App快的多、功能强大的多。再或者如果是果粉，那么选择一款能够接受尺寸的Macbook是最好的选择。
说到这里，相信有人也有疑问，比如X86架构的平板续航肯定不行。还有iPad Pro呢？平板太大了，想用手机修怎么办？笔者也可以一一回答这些问题，首先是续航问题，自从智能手机出现后，续航一直都这样，连手机都不怕，普通平板连续工作3-4小时不成问题（在外面工作这些时间差不多了吧？），更何况不是还有充电宝么？对于iPad Pro来说，因为它所能使用的App也是上面所说到的那些，虽然带来了手写笔的加入，对于绘画倒是不错，但如果针对摄影修图的话，也只能呵呵了，毕竟这个是初代产品，各种应用还没能跟上，或许更新几代应该会不错。如果你想用手机修，还想修专业，别闹了，那么点屏幕，你不难受我都替你难受，随便下几个滤镜App，用手机拍拍发朋友圈吧。
最后，总结出来，想要在iOS、Android这样的移动平台上进行专业修图的话，还是需要时间的，所以不要看见出现了几个称为专业修图的App就花钱去投入这样的设备，这样只会是折腾。现阶段，如果想购入新设备的话，笔者还是建议购买传统的工作平台，因为随着科技的不断进步，他们的便携性也是不错的。
当然本文最初的问题是有必要做成专业吗？该怎么做？笔者认为肯定是有的，因为摄影师很多时候都是在外面跑，相机镜头已经够沉的了，所以轻便化的智能设备是必须的（微单的出现也是如此），但最少还是要从平板电脑起步，或者鉴于手机和平板之间的Phablet。还需要有更多的操作设备加入，比如像Palette的模块化调色台，升级一下，缩小一点尺寸，并且可以通过无线的方式连接，这样就可以大大提升工作效率，或者能够发明出新的交互方式比如iPhone 6S的3D按压屏幕。不过这一切还要有硬件厂商的支持，对于修图来说，性能是一点，但是屏幕的色彩调教更要向桌面级别靠拢。所以只有软件、硬件、插件，一应俱全，才能发挥出最大化的优势，移动领域做专业也才能吸引消费者。
题外话：虽然笔者这里只说了修图方面，但无论是摄影修图、视频处理、音乐制作、设计制图等方面，移动领域都将会一步一步的发展这些艺术生产工具的，毕竟这些领域依然是被传统工具所束缚，所以改变传统是必然的。就地创作，就地处理，就地分享，未来就是这样一个快节奏的时代，不仅仅是科技和生活方式，艺术亦是如此。
欢迎各位关注我的网站：
看过本文的人还看过
最新图文推荐
合作媒体专栏
随着科技的不断发展，一次一次的改变着我们的艺术创作方式。用科技创造的“艺术”，是...
大家感兴趣的内容
&&<a rel="nofollow" class="red" href="" target="_blank" color="red新版网站排行榜
===全新上线===
网友热评的文章苹果园为iOS用户提供和下载，最新的、、、等，分享最权威的资讯、、及解决办法，拥有最火爆的，苹果园一家专注解决iOS所求的网站。