App與Web網(wǎng)頁設(shè)計比較

隨著移動互聯(lián)網(wǎng)的快速推進，App得到了響應(yīng)性的普及，增長較明顯的主要集中在創(chuàng)業(yè)型公司。而在移動端App被普遍推廣之前，我們主要通過Web端來瀏覽互聯(lián)網(wǎng)。
開發(fā)成本
    • Web端多采用h5+css3的方式進行前端實現(xiàn)，開發(fā)成本更低，更快實現(xiàn)更快上線。一個產(chǎn)品經(jīng)理+前端+設(shè)計就能搞定前端。
    因此理論上說，web可隨時在線上進行視覺調(diào)整。他的試錯成本相對較低，完善后可馬上上線，對用戶來說頁屬于被動更新，不需要任何提示（當(dāng)然這也是一把雙刃劍）。
    • App則需適配iOS、安卓等不同平臺進行設(shè)計和開發(fā)，至少需要iOS工程師+Android工程師+PM+前端+設(shè)計，就前端開發(fā)人員來說，成本就要高出1/3甚至更多。
    此外，App的更新還需要提交平臺進行審核，無法實時上線，只能通過迭代版本來進行視覺跳轉(zhuǎn)。相較web端，App需要用戶主動下載更新，更新方式根據(jù)也根據(jù)移動設(shè)備環(huán)境不同而各不相同。
適配大大不同
    我們對設(shè)備進行適合的核心目的是，使設(shè)計圖能夠在各個端上被好還原。為了更好的還原設(shè)計圖，個人認為設(shè)計師也應(yīng)該了解并學(xué)會運用基礎(chǔ)的開發(fā)邏輯或者說基礎(chǔ)原理。比如，單位的換算，一些適配方式等。
1.基礎(chǔ)單位大大大不同
    不同的開發(fā)語言，他們的單位都不同。
Web端
    前端單位：px，em，rem，dpr；實際開發(fā)中用到的單位：px，em，rem，dpr;設(shè)計單位px(em，rem，dpr可以理解為換算系數(shù))。
App
    •iOS 單位：pt，px，ppi；實際開發(fā)中用到的單位：pt；設(shè)計單位px (2px=1pt)。
    •Android 單位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi；實際開發(fā)中用到的單位：dp，sp；設(shè)計單位px (計算公式:1dp*像素密度/160 = 實際像素數(shù))。
    大家可以發(fā)現(xiàn)，雖然設(shè)計單都是px，但設(shè)備單位則是根據(jù)不同的設(shè)備像素轉(zhuǎn)化的；就移動端而言，設(shè)備像素在一定程度上幫助了我們對各個端不同的屏幕進行適配，這也是我們可以一稿配兩端（ios及android）的基礎(chǔ)。
    2.Banner圖適配大大大不同
    Banner圖片適配的目的，是為了在不同寬高的設(shè)備中可以還原設(shè)計圖中用到的圖片，并做到圖片不失真。
      關(guān)于web端的適配方式，如果是0-1的版本設(shè)計，設(shè)計師大可以根據(jù)自己的要求提給開發(fā)。如果不是，可以跟開發(fā)或PM溝通具體適配方式后再進行設(shè)計。
    設(shè)計尺寸一般為：1920px設(shè)計范圍1000-1200px或1920px，等比縮放。
    而App中，圖片是否清晰和展示頁面的硬件設(shè)備的dpr以及圖片分辨率這兩個因素有關(guān)。
    個人的設(shè)計習(xí)慣是二倍大小進行切圖使用，并導(dǎo)出二倍圖和三倍圖分別進行設(shè)備適配使用。（當(dāng)然你可以在三倍下進行設(shè)計～）
  3.布局適配大大大不同

      移動端和PC端都有各自約定俗成的結(jié)構(gòu)布局方式，我們同一些可設(shè)計區(qū)域、安全距離、模塊間的固定間距讓頁面能夠進行布局適配。

WEB端
    布局中對寬度的適配，多采用rem來實現(xiàn)，和上面第2種字體大小適配方式中的原理類似，也是計算出一個比例值，然后不同布局寬度中等比縮放。
1.響應(yīng)式設(shè)計
    響應(yīng)式設(shè)計就是PC和手機端公用一套結(jié)構(gòu)，通過@media為主要手段，對不同分辨率(設(shè)備獨立像素)的設(shè)備使用不同的css樣式。
2.可設(shè)計區(qū)域
    和banner的原理一樣，一般是主畫面保持居中1000-1200px范圍內(nèi)，根據(jù)屏幕或窗口縮放去進行左右的裁切；或按比例縮放。
App
    布局為自自適應(yīng)屏幕寬度，我們需要給出相應(yīng)的安全距離、頁面邊距、底部導(dǎo)航高度等固定高度，并告知開發(fā)自適應(yīng)方式。
    一般頂部狀態(tài)欄高度為40px、標(biāo)題欄88px、底部導(dǎo)航欄100px、左右邊距為24-32px（以上數(shù)據(jù)僅供參考，各位大佬可更具具體項目進行調(diào)整）。
4.字體

      我們會發(fā)現(xiàn)，各個設(shè)備使用的字體不同，那我們怎去理解這種不統(tǒng)一呢？我們來看一下各個端如何對字體進行定義。

      Web端，通過代碼適配不同系統(tǒng)的機型。簡單來說，前端會在頁面中進行的字體定義，一般都是把相對少運用的系統(tǒng)字體排在最前，通過有無字體的篩選方式呈現(xiàn)給用戶。
    也就是說，設(shè)計師設(shè)計稿用什么字體設(shè)計其實并不影響最終呈現(xiàn)。因為最終展現(xiàn)給用戶的效果，是由他們?yōu)g覽頁面的設(shè)備字體所決定的。
    App，一般我們都采用系統(tǒng)自帶字體，但總有一些特殊要求，這個時候，我們需要將字體打包，根據(jù)版本一起打包發(fā)布在平臺上，通過迭代的方式讓用戶主動下載。
    所以總體來說，設(shè)計稿并不局限于那種字體，只是根據(jù)以往的系統(tǒng)習(xí)慣，Web端常用“微軟雅黑”或“宋體”、iOS“蘋方”、Android“思源”等系統(tǒng)字體進行設(shè)計。

分享文章：App與Web網(wǎng)頁設(shè)計比較
標(biāo)題鏈接：http://muchs.cn/news22/116672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、建站公司、關(guān)鍵詞優(yōu)化、電子商務(wù)、服務(wù)器托管、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)