文章分為五部分
1、APP技術(shù)框架的類型
2、APP技術(shù)框架的選擇
3、Hybrid App技術(shù)框架的設(shè)計特點
4、設(shè)計與技術(shù)的權(quán)衡
5、小結(jié)
一、APP技術(shù)框架的類型
三種App技術(shù)框架之間的關(guān)系
1、Native App：
一種基于智能移動設(shè)備本地操作系統(tǒng)（如iOS、Android、WP操作系統(tǒng)），并使用對應(yīng)系統(tǒng)所適用的程序語言編寫運行的第三方應(yīng)用程序，由于它是直接與操作系統(tǒng)對接，代碼和界面都是針對所運行的平臺開發(fā)和設(shè)計的，能很好地發(fā)揮出設(shè)備的性能，所以交互體驗會更流暢。
2、Web App：
一種采用Html語言編寫的，存在于智能移動設(shè)備瀏覽器中的應(yīng)用程序，不需要下載安裝，可以說是觸屏版的網(wǎng)頁應(yīng)用，由于它不依賴于操作系統(tǒng)，因此開發(fā)了一款Web App后，基本能應(yīng)用于各種系統(tǒng)平臺。
3、Hybrid App：
一種用Native技術(shù)來搭建App的外殼，殼里的內(nèi)容由Web技術(shù)來提供的移動應(yīng)用，兼具“Native App良好交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”。
二、APP技術(shù)框架的選擇
1、Native（原生）
產(chǎn)品特點：偏操作互動多的工具類應(yīng)用；
開發(fā)成本：要為iOS、Android和WP系統(tǒng)各自開發(fā)一套App
維護成本：不僅要維護多個系統(tǒng)版本，還要維護多個歷史版本（如有的用戶在5.0版本，有的用戶在4.0版本等）
版本發(fā)布：需要發(fā)布（用戶安裝）最新版App
資源存儲：本地
網(wǎng)絡(luò)要求：支持離線
開發(fā)時間：耗時最長
人員配比：需要iOS、Android和WP各自系統(tǒng)的開發(fā)人員
2、Web
產(chǎn)品特點：偏瀏覽內(nèi)容為主的新聞、視頻類應(yīng)用
開發(fā)成本：只需開發(fā)一套App，即可運用到不同系統(tǒng)平臺
維護成本：只維護最新的版本
版本發(fā)布：不需要發(fā)布（用戶安裝）最新的App
資源存儲：服務(wù)器
網(wǎng)絡(luò)要求：依賴網(wǎng)絡(luò)
開發(fā)時間：耗時最少
人員配比：會寫網(wǎng)頁語言的開發(fā)
3、Hybrid（混合型）
產(chǎn)品特點：偏既要瀏覽內(nèi)容，又有較多操作互動的聊天類、購物類應(yīng)用
開發(fā)成本：native部分需要為iOS、android和WP各自配備開發(fā)人員，web部分只需統(tǒng)一配置
維護成本：native需要為多最新版本和多個歷史版本，web只需維護最新版本
版本發(fā)布：native部分需要發(fā)布（用戶安裝）最新的App，web部分不需要發(fā)布（用戶安裝）最新的App
資源存儲：本地和服務(wù)器
網(wǎng)絡(luò)要求：大部分依賴網(wǎng)絡(luò)
開發(fā)時間：耗時中等
人員配比：大部分工作由寫網(wǎng)頁語言的開發(fā)承擔(dān)，再加上不同系統(tǒng)的開發(fā)
三、Hybrid App技術(shù)框架的設(shè)計特點
由于Hybrid App是融合了Native App和Web App的技術(shù)特點，通過分析Hybrid App的技術(shù)框架成分，能讓我們更好地掌握App框架的基本開發(fā)知識，有助于我們更好地去做設(shè)計。
Hybrid App的大部分內(nèi)容都是在Native框架中加載Web網(wǎng)頁內(nèi)容，能在保證用戶體驗的前提下，讓App的內(nèi)容更具有擴展性，即使接入再多的內(nèi)容和業(yè)務(wù)功 能，也不會使得整個App的安裝包過大，典型Hybrid App的代表就是我們的手機淘寶客戶端。Hybrid App在設(shè)計時，要注意以下五個要點：
1、圖像渲染
Native技術(shù)部分由于能直接調(diào)用系統(tǒng)的渲染引擎，所以能實現(xiàn)流暢的復(fù)雜圖像渲染，而不影響設(shè)備的性能。
Web內(nèi)容部分由于是基于內(nèi)置瀏覽器，在圖像渲染的時候要通過瀏覽器訪問系統(tǒng)的渲染引擎或調(diào)用基于瀏覽器的第三方渲染引擎，中間需要在多個層級進行渲染請求，所以渲染的時效性和性能會下降不少，導(dǎo)致較復(fù)雜的圖像渲染或動態(tài)渲染時，會出現(xiàn)機器卡頓。
如圖所示，由于標題欄采用了Native技術(shù)框架，可采用復(fù)雜的毛玻璃效果，讓標題欄更通透，而內(nèi)容區(qū)采用了基于Html5的Web技術(shù)，因此不適合動態(tài)變換背景圖的渲染方案（當(dāng)圖片輪播時，背景圖會隨著圖片內(nèi)容而動態(tài)變換出模糊的背景）。
2、動效體驗
由于Hybrid App的內(nèi)容區(qū)大部分采用基于Html5的Web技術(shù)，對動效的解釋和操作需要消耗大量的CPU性能，在設(shè)計時，要注意以下三個方面：
a. 不同的動效類型對CPU性能的消耗不同:對CPU性能要求低的動效類型能運行得更流暢，但如果當(dāng)你的設(shè)計方案是非系統(tǒng)自帶的動效類型時，就需要提前跟開發(fā)溝通可行性和對CPU性能的消耗問題。
b. 機型的性能差異：不同的手機機型的CPU性能相差較大，需要了解不同機型在你的App中的占比，因為即在iPhone6上能完美運行的動效或交互動作，在iPhone6以下的手機上可能就會卡住不動了，所以不太適合用于CPU性能消耗較大的頻繁渲染。
c. 網(wǎng)絡(luò)的影響：如果你的動效在運動時，還需要加載內(nèi)容，就要考慮網(wǎng)絡(luò)較慢時，內(nèi)容加載對動效流暢度的影響，這時可考慮先加載完內(nèi)容，再開始動效或簡化、壓縮加載的內(nèi)容量。
3、平臺兼容
由于Hybrid App的Web內(nèi)容，是不同的平臺共用同一套設(shè)計方案，所以為了更好地讓設(shè)計方案兼容不同的平臺特性和手機分辨率，所以建議文案和圖形采用以下三種方式：
a. 系統(tǒng)默認字體：如果不是為了設(shè)計出特殊的字體樣式，iOS、Android和Windows Phone系統(tǒng)的默認字體是基本滿足我們的需求，同時在不同平臺上的顯示效果也會比較好。
b. SVG（可縮放矢量圖形）：能夠自由縮放大小來適應(yīng)不同屏幕尺寸和分辨率，不會模糊變形。
c. Iconfont來代替圖標：能夠自由變換大小和顏色。
4、交互行為
由于Hybrid App主要是通過網(wǎng)頁的CSS樣式結(jié)構(gòu)和JavaScript程序語言來還原界面的設(shè)計和交互行為，所以跟純Native App技術(shù)框架相比，需要通過更繁瑣的代碼和層級請求才能實現(xiàn)跟原生系統(tǒng)一樣的交互方式，雖然也可模擬Native App的交互方式，但這樣的模擬首先提高了開發(fā)成本，有悖于不影響性能和高效的原則，所以需要根據(jù)設(shè)計目標來合理選擇是否需要跟系統(tǒng)交互保持一致。
如圖所示，如果“每日贏寶箱”的頁面是純Native框架搭建的，則當(dāng)用戶點擊“參與互動拿紅包”的卡片后，下一個頁面會采用iOS系統(tǒng)默認的自右向左切入的交互方式。
然而，由于這里采用的是Hybirid App技術(shù)框架，所以會像網(wǎng)頁一樣，直接變換內(nèi)容區(qū)的信息，因為這樣的實現(xiàn)方式更高效和不影響性能，更重要的是如果該頁面采用直接變換內(nèi)容的方式不會影響到用戶的使用體驗，這里就可以考慮不需要跟系統(tǒng)交互保持一致。
5、加載方式
對于Hybrid App框架的頁面，由于同時存在Native和Web部分，所以在加載內(nèi)容時，可以分開考慮加載方式：
A. Native部分：可以根據(jù)需要把常規(guī)內(nèi)容存儲在用戶的手機上，加快加載的時間和減少重復(fù)加載相同內(nèi)容的麻煩。
B. Web部分：Web內(nèi)容區(qū)域是需要從網(wǎng)絡(luò)上加載內(nèi)容的，尤其在網(wǎng)絡(luò)條件不好時，需要設(shè)計友好的等待狀態(tài)，緩和用戶的焦慮情緒。
如圖所示，可以根據(jù)不同的框架，來設(shè)計不同的加載方式，讓等待過程更短或更愉悅。
四、設(shè)計與技術(shù)的權(quán)衡
1、明確設(shè)計方案的主流程
在技術(shù)面前，設(shè)計是否只能妥協(xié)呢？答案是否定的，在對應(yīng)的App技術(shù)框架下，我們在考慮設(shè)計方案時，要明確設(shè)計方案的主流程和支流程，凡 是會影響到方案核心的主流程的方案，即使開發(fā)的實現(xiàn)難度和成本較高，我們也要持續(xù)推動技術(shù)的突破，來為用戶提供更好的使用體驗，而對于方案的支流程，我們 就可以跟開發(fā)協(xié)商不同的解決方案，明確哪些地方可以調(diào)整技術(shù)實現(xiàn)方式或換一種設(shè)計方案，哪些方案存在風(fēng)險，需要有備選方案。
例如在設(shè)計手機淘寶店鋪的標簽?zāi)K時，由于大部分商家會根據(jù)寶貝圖的特點，來設(shè)置圖上標簽的內(nèi)容和位置，可是，由于店鋪的技術(shù)框架不支持 標簽移動的功能，而我們的設(shè)計目標和方案的主流程就是要為商家提供更靈活設(shè)置寶貝標簽的功能，所以即使技術(shù)實現(xiàn)難度和成本較高，我們也推動技術(shù)進行突破， 實現(xiàn)標簽的可移動功能。
2、提前與開發(fā)溝通設(shè)計想法的可行性
我們分析完產(chǎn)品需求后，可以先簡單地在紙上畫出粗獷的交互原型，然后，跟開發(fā)溝通想法的可行性及實現(xiàn)難度，做到心中有數(shù)。如果方案中涉及動效設(shè)計，可通過紙片來錄制粗略的動效，或拿出自己平時收集的動效素材（圖17）與開發(fā)溝通可行性，來快速驗證設(shè)計想法。
五、小結(jié)
在項目中，設(shè)計師往往需要權(quán)衡商業(yè)目標、用戶體驗和技術(shù)實現(xiàn)三者之間的關(guān)系來做設(shè)計方案，以上只是介紹App技術(shù)框架的基本知識，讓設(shè)計師在做方案 時更有把握，但由于技術(shù)日新月異，每天都在進步中，所以在實踐中需要根據(jù)項目的不同階段與開發(fā)工程師保持緊密的溝通，來讓設(shè)計方案更靠譜。
-END-
我們致力于提供一個高質(zhì)量內(nèi)容的交流平臺。為落實國家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內(nèi)容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內(nèi)容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容，同時也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡(luò)信息。
一、根據(jù)《網(wǎng)絡(luò)信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權(quán)，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結(jié)；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結(jié)社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權(quán)益；
11)通過網(wǎng)絡(luò)以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網(wǎng)絡(luò)欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內(nèi)容；
2. 不友善：不尊重用戶及其所貢獻內(nèi)容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應(yīng)，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網(wǎng)站秩序的內(nèi)容，或進行相關(guān)行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣產(chǎn)品、提供服務(wù)、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內(nèi)容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容；
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容，如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當(dāng)曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營銷內(nèi)容，如通過偽造經(jīng)歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經(jīng)驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內(nèi)容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容；
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內(nèi)容。
5. 不實信息，主要表現(xiàn)為：
1)可能存在事實性錯誤或者造謠等內(nèi)容；
2)存在事實夸大、偽造虛假經(jīng)歷等誤導(dǎo)他人的內(nèi)容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構(gòu)或個人存在關(guān)聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治?。?br /> 2)求推薦算命看相大師；
3)針對具體風(fēng)水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導(dǎo)用戶；
2)內(nèi)容與標題之間存在嚴重不實或者原意扭曲；
3)使用夸張標題，內(nèi)容與標題嚴重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導(dǎo)未成年人應(yīng)援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網(wǎng)絡(luò)水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內(nèi)容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導(dǎo)未成年人不良嗜好影響未成年人身心健康的；
2)不當(dāng)評述自然災(zāi)害、重大事故等災(zāi)難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網(wǎng)絡(luò)生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當(dāng)一個用戶發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當(dāng)涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將加重處罰。
三、申訴
隨著平臺管理經(jīng)驗的不斷豐富，本網(wǎng)站出于維護本網(wǎng)站氛圍和秩序的目的，將不斷完善本公約。
如果本網(wǎng)站用戶對本網(wǎng)站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網(wǎng)站進行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)