導航:首頁 > 萬維百科 > app網頁與原生設計區別

app網頁與原生設計區別

發布時間:2020-11-17 22:48:07

1、App 設計與 web 設計的主要區別是什麼

從使用場景上,Web App用戶面臨比原生APP用戶更嚴峻的問題:
1、頁面跳轉更加費力,不穩定感更強
思考點:如何減少跳轉(扁平結構、頁面布局技巧),增加數據及展示的流暢流程及穩定性(技術)。

2、更小的頁面空間(由於瀏覽器的導航本身佔用一部分屏幕空間),更大的信息記憶負擔;
移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的,用戶在滾動屏幕的過程中需要臨時記憶的信息越多,他們的表現就會越差。——《貼心設計:打造高可用性的移動產品》
思考點:排版更清晰、信息更簡練 (可在原生APP基礎上去掉一些豐富、復雜的視覺表現)

3、導航不明顯,原有底部導航消失,有效的導航遇到挑戰
思考點:如何有效的提供導航?有哪些形式?

4、交互動態效果收到限制,影響一些頁面場景、邏輯的理解。
思考點:比如登錄注冊流程的彈出、完成及異常退出,做好文字提示。

區別:APP屬於手機應用客戶端,移動網站可以製作成APP,APP也可以呈現手機網站。

相同點:二者都屬於手機系列 區別在於:APP可以安裝到手機上,而移動網站只能通這用戶打開網址才能打開了解信息。如果移動網站設計成app,則二者兼合。

2、html5和原生APP開發的區別

問題,主要聚集在以下幾個方面:
1、動畫
動畫有很多種,比如側邊欄菜單的滑入滑出、元素的響應動畫、頁面切換之間的過場等等,在H5之下的眾多實現方法都沒有辦法達到純原生的性能。一般這些的話有幾種不同的選擇:css3動畫、javascript動畫、原生動畫。
css3動畫非常的消耗性能,如果某一個元素用到css3動畫可能還看不出來,但大面積或過場使用css3動畫會讓app低端手機體驗非常差。最好的選擇一般是通過框架調用底層的動畫,但不管怎麼樣等於在原來的代碼上包上了一層,性能還是不可避免的受到影響。
比如在一個新頁面的載入上,如果調用底層動畫要考慮的問題有兩個,一個是本身資源頁面的渲染問題,另一個是遠程數據的獲取。即便是這些動畫能夠很快的響應,但大量的css頁面會導致渲染卡頓,滑入時可能會有白屏/機器卡頓的現象。為了解決這些性能問題又必須要用到預載入或模擬動畫。即便是這樣,滑入滑出的動畫在低端的安卓機器上還是有很多問題,如果獲取服務端數據處理的方式不合適,卡頓白屏的現象會更嚴重。具體看下面的數據獲取方式。
2、獲取服務端數據

3、原生app和web app的區別

原生app和web app的區別為:來源不同、開發成本不同、流暢度相對不同。

一、來源不同

1、原生app:原生app是與移動設備所安裝的操作系統所使用的同一種編程語言開發的APP。

2、web app:web app是由html5所做的網站通過一些打包平台或者使用工具打包而成的軟體。

二、開發成本不同

1、原生app:原生app開發成本高,需要使用單獨的開發工具進行開發。

2、web app:web app開發成本低,不需要使用單獨的開發工具進行開發。

三、流暢度相對不同

1、原生app:原生app完美適配移動設備,流暢度相對較高。

2、web app:web app兼容適配移動設備,流暢度相對較低。

4、web app與原生app有哪些交互設計區別

從使用場景上,Web App用戶面臨比原生APP用戶更嚴峻的問題:

1、頁面跳轉更加費力,不穩定感更強

思考點:如何減少跳轉(扁平結構、頁面布局技巧),增加數據及展示的流暢流程及穩定性(技術)

2、更小的頁面空間(由於瀏覽器的導航本身佔用一部分屏幕空間),更大的信息記憶負擔

移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的,用戶在滾動屏幕的過程中需要臨時記憶的信息越多,他們的表現就會越差。——《貼心設計:打造高可用性的移動產品》

思考點:排版更清晰、信息更簡練 (可在原生APP基礎上去掉一些豐富、復雜的視覺表現)

3、導航不明顯,原有底部導航消失,有效的導航遇到挑戰

思考點:如何有效的提供導航?有哪些形式?

4、交互動態效果收到限制,影響一些頁面場景、邏輯的理解。

思考點:比如登錄注冊流程的彈出、完成及異常退出,做好文字提示。

5、使用H5開發的App和原生App有什麼區別?

1.H5的性能很差,一般經常改的地方可以用H5,比如論壇,咨詢之類的,而且限制也是很大,很多效果是沒辦法做到的。GUI框架的WebView普遍是這樣的。如果一個APP全部由H5來做(不太可能,送審很可能被拒),那麼會顯得非常卡。

2.用iOS SDK,如果實現熱更新是比較麻煩的。對於論壇,咨詢這種模塊,動不動就改版,做起來比較頭疼,用H5就很合適了。尤其在APP跨安卓和iOS的時候,這類模塊如果直接用H5,那麼就很容易共用。




6、原生APP和Web APP的區別

 html5封裝的app與原生態app有什麼區別呢?
html5又和app有什麼區別呢?

為什麼大型網路公司還是傾向於推廣原生態app呢?

html5是有跨平台的優勢,但是為什麼還是不溫不火,或者我們仍稱之為輕應用app呢?

查找了相關的資料,梳理了一下,發現有如下區別:

1.html5的app如輕型小炮,原生態app如正規大炮,html5實現的功能有限,只能實現一些輕型的交互場景,而app則可以完美解決。

2.html5雖然可以跨平台,可是瀏覽器有個載入速度,對於用戶體驗上說,有個載入的等待,就比如你用qq瀏覽器打開網路,和直接使用網路app是兩種體驗。瀏覽器打開網路,還得有個載入,而網路app則ang的出下了輸入框界面。

3.html5的app對於導航來說,目前有個弊端。而原生態app則在頁底固定懸浮著導航菜單。我給截圖,大家可以看看區分:看我紅線畫圈和藍色畫圈的區別。
4.html5 app也有自己的優勢,比如有的app頁面想要分享出來,則採用html5
app。也比如滴滴打車集成在微信里一樣,如果手機中沒有滴滴打車的app,則直接可以在默認瀏覽器上載入出來,進行打車。對於公司整體的運營來說不可少。
html5 app在設計時需要注意的一些要點,我也簡單概括了一下:

1)各手機瀏覽器的兼容測試

2)底層服務的調取(能調取,但只有當其是核心功能時才保留 eg:新浪、美團等皆去掉了頭像上傳功能)

3)注意離線數據存儲,減少數據請求頻率。

4)考慮保存用戶的哪些數據:設置、個人數據、閱讀錨點、跳出頁面等。【這點一般說的就是導航菜單】

5)避免動效與瀏覽器的交互沖突

6)按順序 非同步載入eg: 騰訊視頻

7、網站製作的APP和原生開發APP有什麼區別

開發方面

原生開發的App

每一種移動操作系統都需要獨立的開發項目,需要獨立的開發語言,使用各自的軟體開發包,開發工具以及各自的控制項。

手機網站打包的APP

從原生演變過來的通過APP嵌入網站來是實現的,以及伺服器端語言來完成。

功效方面

原生開發的App能夠與移動硬體設備的底層功能,比如個人信息,攝像頭以及重力加速器等等。

網站製作的App只能使用有限的移動硬體設備功能。

8、h5做app和原生app有什麼區別?

H5的優點
1、h5開發速度快,一端開發多端運行
2、如果APP用戶常見頁面頻換,如(淘寶首頁各種不同活動),那麼用H5,維護起來更容易。
3、如果app中出現大量文字且格式比較豐富(比如加粗、字體大小,圖文展示)等用H5比較方便
4、迭代版本時,不需要打包便可以發布(實時更新、快速迭代),與雲端實現實時數據交互
原生的優點
1、原生的響應速度快
2、對於有無網路操作時,譬如離線操作基本選用原生開發
3、需要調用系統硬體的功能(攝像頭、方向感測器、重力感測器、撥號、GPS、語音、簡訊、藍牙等功能)
4、在無網路或者若網的情況下體驗好。

9、app開發公司:HTML5和原生的區別

1、動畫
動畫有很多種,比如側邊欄菜單的滑入滑出、元素的響應動畫、頁面切換之間的過場等等,在H5之下的眾多實現方法都沒有辦法達到純原生的性能。一般這些的話有幾種不同的選擇:css3動畫、javascript動畫、原生動畫。
css3動畫非常的消耗性能,如果某一個元素用到css3動畫可能還看不出來,但大面積或過場使用css3動畫會讓app低端手機體驗非常差。最好的選擇一般是通過框架調用底層的動畫,但不管怎麼樣等於在原來的代碼上包上了一層,性能還是不可避免的受到影響。
比如在一個新頁面的載入上,如果調用底層動畫要考慮的問題有兩個,一個是本身資源頁面的渲染問題,另一個是遠程數據的獲取。即便是這些動畫能夠很快的響應,但大量的css頁面會導致渲染卡頓,滑入時可能會有白屏/機器卡頓的現象。為了解決這些性能問題又必須要用到預載入或模擬動畫。即便是這樣,滑入滑出的動畫在低端的安卓機器上還是有很多問題,如果獲取服務端數據處理的方式不合適,卡頓白屏的現象會更嚴重。具體看下面的數據獲取方式。
2、獲取服務端數據
首先要接受的是,這里的數據獲取都是在資源頁面上非同步完成的,因為只有這樣才能讓這些資源頁面完成預載入或者渲染。但是非同步拿到的數據在填入頁面中時可能會涉及DOM操作,眾所周知,DOM操作非常消耗性能,如果頁面小還好,頁面稍大數據稍微復雜一點,頻繁的DOM操作會導致明顯的閃白。而且最重要的一點是,如果頁面載入進來之後數據更新的速度太慢,也會讓頁面模板等待很長時間,對用戶體驗又不友好,總不能每次打開都像瀏覽器一樣等待刷新是吧。
這個問題如果沒有得到解決,H5APP是很難承擔大規模數據的頁面,在它們之中頻繁切換更是難上加難,那麼肯定有人也會想到用MVVM的方式,其實我也寫過一些基於MVVM的H5APP,相對來說它們獲取數據和更新數據的方式更敏捷更科學,但寫的過程中又要注意很多H5獨有的問題,這些問題在下面的頁面切換里來講。
3、頁面切換
上面我們看到了幾種不錯的實現方式,比如預載入和模擬動畫,甚至有批量的預載入,批量的截圖模擬動畫等等,雖然看起來很友好解決了不少問題,但事實上如果頁面足夠多就會引發另一個問題——頁面的生存周期。
試想一下,如果引導頁或者主頁面緩存了5個子頁面的資源,在跳轉到響應的子頁面時又會緩存這些子頁面的下級頁面資源,如此反復肯定會占據大量內存使APP的體驗下降。那麼怎麼知道那些頁面是需要的,最多緩存多少頁面,什麼時候結束哪些頁面的生存周期呢?在我用過的很多H5APP的框架里都沒有對這些問題有一個完美的解答,因此在頁面較多內容較多的APP中可能會因這些資源分配的問題降低性能。
這時候我們回過頭來再看看MVVM的數據載入問題,實際上不管哪個MVVM框架,寫過的人都知道管理這種新型的前端代碼最重要的問題是內存的問題,你既要保證代碼寫的足夠優雅沒有任何內存泄露問題,也要考慮到在頁面生存周期結束時它們的控制器/頁面資源是否得到釋放,這對全局有沒有什麼影響,在多個請求時也要合理的分配資源,甚至是復用這些父級頁面傳過來的緩存資源等等。較小的APP可能並不會有這些問題,如果你想用純H5來開發大型APP,這很可能會浪費你很多時間——而且結果還不會讓你滿意。
4、Android/iOS的區別
很多人都說純H5APP一次編寫就能編譯Android/iOS兩種不同的APP,大大降低了成本。實際上這個觀點本身就是值得懷疑的,如果你寫過這類APP就能明白我在說什麼,它們既不省事,又存在很多BUG,調試時尤其繁瑣。舉一個很簡單的例子,Android和iOS在返回上一頁的處理方式上就有明顯的區別,iOS的頂部bar在全屏下怎樣處理,Android機器出現smart bar怎樣處理頁面的布局,調用底層硬體時怎樣區分不同的場景等等,你需要寫一個又一個機型和系統的判斷,然後分別在Android和iOS下調試,最後你卻發現這並沒有卵用,累的要死卻什麼沒學到,只有一堆不知道什麼時候會過時的經驗。
現在做H5混合APP開發的人很多,但是純H5卻很年輕,很多問題都沒有很好的解決,這幾個是我在做這些APP時考慮最多的問題。當然大家也不必擔心,隨著ES6的推行,硬體發展越來越快,純H5APP未必沒有一席之地。最後說一個很少人注意到的H5優勢,大家大談H5APP時都是快速開發、低成本、多平台等等,但我卻覺得它和很多APP開發方式相比有一個不同之處——圖文混合的排版。正是這些復雜多變的CSS樣式消耗了性能,但是它帶來了排版的多樣性,能夠細致到每一個字寬行高和風格的像素級處理,才是H5的優異之處。

10、app中html5頁面和原生native頁面的區別

你想說的是怎麼判斷app裡面哪些是app原生寫的哪些是html代碼是么?
要是是這樣的話。有一種可以試一試。也就是你把手機的網路斷掉。然後點開你的頁面。然後可以正常顯示的東西就是原生寫的。顯示404或則錯誤頁面的是html頁面

與app網頁與原生設計區別相關的知識