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

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

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

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

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

分享文章：App與Web網(wǎng)頁設計比較
標題鏈接：http://chinadenli.net/news22/116672.html

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

廣告

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