香港葡京赌侠诗(中国)有限公司

?
各地市:
郑州网站建设 洛阳网站建设 开封网站建设 安阳网站建设 新乡网站建设 濮阳网站建设 焦作网站建设 鹤壁网站建设 三门峡网站建设 商丘网站建设 许昌网站建设 漯河网站建设 平顶山网站建设 驻马店网站建设 周口网站建设 南阳网站建设 信阳网站建设 济源网站建设 二七区网站建设 中原区网站建设 管城区网站建设 惠济区网站建设 金水区网站建设 上街区网站建设 巩义市网站建设 新密市网站建设 登封市网站建设 荥阳市网站建设 中牟县网站建设 经开区网站建设 高新区网站建设 涧西区网站建设 西工区网站建设 老城区网站建设 瀍河回族区网站建设 洛龙区网站建设 吉利区网站建设 偃师市网站建设 孟津县网站建设 新安县网站建设 洛宁县网站建设 宜阳县网站建设 伊川县网站建设 嵩县网站建设 栾川县网站建设 汝阳县网站建设 杞县网站建设 兰考县网站建设 通许县网站建设 尉氏县网站建设 开封县网站建设 金明区网站建设 顺河回族区网站建设 龙亭区网站建设 鼓楼区网站建设 禹王台区网站建设 安阳县网站建设 林州市网站建设 内黄县网站建设 汤阴县网站建设 滑县网站建设 龙安区网站建设 殷都区网站建设 文峰区网站建设 北关区网站建设 辉县市网站建设 卫辉市网站建设 新乡县网站建设 获嘉县网站建设 原阳县网站建设 延津县网站建设 封丘县网站建设 长垣县网站建设 卫滨区网站建设 红旗区网站建设 牧野区网站建设 凤泉区网站建设 华龙区网站建设 清丰县网站建设 南乐县网站建设 濮阳县网站建设 莘县网站建设 范县网站建设 台前县网站建设
当前位置: 主页 > 维护运营 > 移动互联网 >

3个最基础的APP技术框架

发布时间:2017-03-18 15:01 | 发布者:香港葡京赌侠诗 | 浏览次数:次

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

到底问题出现在哪呢?这其实是由于大家设计师对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),因为即在苹果6上能完美运行的动效或交互动作,在苹果6以下的手机上可能就会卡住不动了,所以不太适合用于CPU性能消耗较大的频繁渲染。

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




图5 不同的动效类型对CPU的性能要求


图6 液化翻转的动效

图7 不同机型的市场占比


如图8所示,在Web内容区,当点击图片后,该图片放大(系统默认的缩放动效,对CPU性能消耗小),但其它图片自动重新排列的动效会比较消耗CPU性能,在低端机器上会出现卡顿或闪退的情况,并且还会受到网速的影响,导致体验不友好,如果必须做复杂动效,可以让该动效只出现在高端机型中。


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

3)平台兼容

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

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

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

四、设计与技术的权衡

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

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

五、设计小结

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

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



?
?

香港葡京赌侠诗|香港葡京赌侠诗

XML 地图 | Sitemap 地图