現(xiàn)在的app網(wǎng)頁設(shè)計(jì)變得越來越流行了，在做app網(wǎng)頁設(shè)計(jì)的時(shí)候，是需要遵循一定的原則的，今天就給大家具體分享下app網(wǎng)頁設(shè)計(jì)的相關(guān)資料吧。

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

一.基礎(chǔ)單位不同

　　不同的開發(fā)語言，他們的單位都不同。

　　Web端：

　　前端單位：px，em，rem，dpr;實(shí)際開發(fā)中用到的單位：px，em，rem，dpr;設(shè)計(jì)單位px(em，rem，dpr可以理解為換算系數(shù))。

　　App：

　　?iOS 單位：pt，px，ppi;實(shí)際開發(fā)中用到的單位：pt;設(shè)計(jì)單位px (2px=1pt)。

　　?Android 單位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi;實(shí)際開發(fā)中用到的單位：dp，sp;設(shè)計(jì)單位px (計(jì)算公式:1dp*像素密度/160 = 實(shí)際像素?cái)?shù))。

　　大家可以發(fā)現(xiàn)，雖然設(shè)計(jì)單都是px，但設(shè)備單位則是根據(jù)不同的設(shè)備像素轉(zhuǎn)化的;就移動端而言，設(shè)備像素在一定程度上幫助了我們對各個(gè)端不同的屏幕進(jìn)行適配，這也是我們可以一稿配兩端(ios及android)的基礎(chǔ)。

　　二.Banner圖適配不同

　　Banner圖片適配的目的，是為了在不同寬高的設(shè)備中可以還原設(shè)計(jì)圖中用到的圖片，并做到圖片不失真。

　　關(guān)于web端的適配方式，如果是0-1的版本設(shè)計(jì)，設(shè)計(jì)師大可以根據(jù)自己的要求提給開發(fā)。如果不是，可以跟開發(fā)或PM溝通具體適配方式后再進(jìn)行設(shè)計(jì)。

　　設(shè)計(jì)尺寸一般為：1920px設(shè)計(jì)范圍1000-1200px或1920px，等比縮放。

　　而App中，圖片是否清晰和展示頁面的硬件設(shè)備的dpr以及圖片分辨率這兩個(gè)因素有關(guān)。

　　個(gè)人的設(shè)計(jì)習(xí)慣是二倍大小進(jìn)行切圖使用，并導(dǎo)出二倍圖和三倍圖分別進(jìn)行設(shè)備適配使用。(當(dāng)然你可以在三倍下進(jìn)行設(shè)計(jì)～)

（圖片來自網(wǎng)絡(luò)）

三.布局適配不同

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

　　WEB端：布局中對寬度的適配，多采用rem來實(shí)現(xiàn)，和上面第2種字體大小適配方式中的原理類似，也是計(jì)算出一個(gè)比例值，然后不同布局寬度中等比縮放。

　　響應(yīng)式設(shè)計(jì)：響應(yīng)式設(shè)計(jì)就是PC和手機(jī)端公用一套結(jié)構(gòu)，通過@media為主要手段，對不同分辨率(設(shè)備獨(dú)立像素)的設(shè)備使用不同的css樣式。

　　可設(shè)計(jì)區(qū)域：和banner的原理一樣，一般是主畫面保持居中1000-1200px范圍內(nèi)，根據(jù)屏幕或窗口縮放去進(jìn)行左右的裁切;或按比例縮放。

　　App：布局為自適應(yīng)屏幕寬度，我們需要給出相應(yīng)的安全距離、頁面邊距、底部導(dǎo)航高度等固定高度，并告知開發(fā)自適應(yīng)方式。一般頂部狀態(tài)欄高度為40px、標(biāo)題欄88px、底部導(dǎo)航欄100px、左右邊距為24-32px(以上數(shù)據(jù)僅供參考，各位大佬可更具具體項(xiàng)目進(jìn)行調(diào)整)。

（圖片來自網(wǎng)絡(luò)）

　　APP設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)方式區(qū)別

　　從使用場景上，Web App用戶面臨比原生APP用戶更嚴(yán)峻的問題：

　　1、頁面跳轉(zhuǎn)更加費(fèi)力，不穩(wěn)定感更強(qiáng)

　　思考點(diǎn)：如何減少跳轉(zhuǎn)(扁平結(jié)構(gòu)、頁面布局技巧)，增加數(shù)據(jù)及展示的流暢流程及穩(wěn)定性(技術(shù))。

　　2、更小的頁面空間(由于瀏覽器的導(dǎo)航本身占用一部分屏幕空間)，更大的信息記憶負(fù)擔(dān);

　　移動設(shè)備的屏幕要小得多。這種如同透過門縫進(jìn)行的閱讀增加了認(rèn)知的負(fù)擔(dān)。人腦的短期記憶是不穩(wěn)定的，用戶在滾動屏幕的過程中需要臨時(shí)記憶的信息越多，他們的表現(xiàn)就會越差?！顿N心設(shè)計(jì)：打造高可用性的移動產(chǎn)品》

　　思考點(diǎn)：排版更清晰、信息更簡練 (可在原生APP基礎(chǔ)上去掉一些豐富、復(fù)雜的視覺表現(xiàn))

　　3、導(dǎo)航不明顯，原有底部導(dǎo)航消失，有效的導(dǎo)航遇到挑戰(zhàn)

　　思考點(diǎn)：如何有效的提供導(dǎo)航?有哪些形式?

　　4、交互動態(tài)效果收到限制，影響一些頁面場景、邏輯的理解。

（圖片來自網(wǎng)絡(luò)）

　　思考點(diǎn)：比如登錄注冊流程的彈出、完成及異常退出，做好文字提示。

　　區(qū)別：APP屬于手機(jī)應(yīng)用客戶端，移動網(wǎng)站可以制作成APP，APP也可以呈現(xiàn)手機(jī)網(wǎng)站。

　　相同點(diǎn)：二者都屬于手機(jī)系列 區(qū)別在于：APP可以安裝到手機(jī)上，而移動網(wǎng)站只能通這用戶打開網(wǎng)址才能打開了解信息。如果移動網(wǎng)站設(shè)計(jì)成app，則二者兼合。

　　通過以上的內(nèi)容，大家已經(jīng)了解了app網(wǎng)頁設(shè)計(jì)有一定了解了，這樣在設(shè)計(jì)網(wǎng)頁的時(shí)候，就需要考慮一些需要注意的點(diǎn)，只有這樣才能設(shè)計(jì)出滿意的作品。