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

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

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

      我們會(huì)發(fā)現(xiàn)，各個(gè)設(shè)備使用的字體不同，那我們?cè)跞ダ斫膺@種不統(tǒng)一呢？我們來(lái)看一下各個(gè)端如何對(duì)字體進(jìn)行定義。

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

網(wǎng)站標(biāo)題：App與Web網(wǎng)頁(yè)設(shè)計(jì)比較
轉(zhuǎn)載來(lái)于：http://jinyejixie.com/news/116672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、云服務(wù)器、App設(shè)計(jì)、面包屑導(dǎo)航、外貿(mào)建站

廣告

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