APP應用(yòng)開(kāi)發在界面設計(jì)上(shàng)需要(y←♥ào)注意什(shén)麽

來(lái)源：lexintech.com 發布時(s₹&± hí)間(jiān)：2017-09-19

手機(jī)APP應用(yòng)的(de)設計(jì)和(h™¥©✔é)PC網頁的(de)設計(jì)是(shì)有(yǒu)差别的(de)。網↔≠↓頁設計(jì)師(shī)在設計(jì)手機(jī)APP界₽$面時(shí)，一(yī)不(bù)留神，通(tōng)常會(₽<$♦huì)把網頁的(de)一(yī)些(xiē)¥Ω×←交互帶到(dào)手機(jī)APP中來(lái)。深圳AP>£♣↑P開(kāi)發公司樂(yuè)信科(kē)技(jì)在WEB網頁設計(jì)和(hé)移動APP設計(β↕♥↑jì)上(shàng)，都(dōu)有(yǒu)多(duō)年(niá≈÷"n)的(de)項目經驗，WEB網頁依托于PC的(de)浏覽器(qì)，移£₽動APP則是(shì)依托于手機(jī)或平闆電(dià₩★αn)腦(nǎo)。不(bù)同的(de)設備，不(bù)同ε≈↓‍的(de)平台都(dōu)有(yǒu)他(tā)們各自(→®αzì)的(de)特點，所以在設計(jì)這(zhè)兩類産品時(shí)也(♠>← yě)有(yǒu)些(xiē)許差異。

下(xià)面，我們從(cóng)交互設 ∏×✔計(jì)的(de)角度，聊一(yī)聊Web網站(zhàn)和(hé‍¶∑)移動App有(yǒu)哪些(xiē)不(bù)同之處、以及需要∞γ≤<(yào)考慮的(de)設計(jì)要(yào)點。

一(yī)、用(yòng)戶與界面交互/操作(α zuò)的(de)方式不(bù)同

Web網站(zhàn)：以鼠标或觸摸闆為(wèi)媒介，多(duō)采用(yε¶φòng)左鍵點擊的(de)操作(zuò)，也(yě)支π•持鼠标滑過、鼠标右鍵的(de)操作(zuò)方式。

移動App：直接用(yòng)手指觸控屏幕，除了(×✔le)最通(tōng)用(yòng)的(de)點擊操α&& 作(zuò)之外(wài)，還(hái)支持滑動、捏合等各種複雜(zá)€§•×的(de)手勢。

設計(jì)要(yào)點：

1、相(xiàng)比鼠标，手指觸摸範圍更大(dà)，α¥較難精确控制(zhì)點擊位置，對(duì)此iOS人(r↑'®↑én)機(jī)交互規範中提到(dào)手指最合适的(de)觸控區(qΩε÷☆ū)域至少(shǎo)需要(yào)44poin"§•t。所以移動App的(de)點擊區(qū)域要(y&↕♥ào)設置的(de)更大(dà)一(yī)些(xiē)，不(>↑♦₩bù)同點擊元素的(de)間(jiān)隔也(yě)不(b₹¶§♦ù)能(néng)太近(jìn)。

2、Web網站(zhàn)支持鼠标滑過的(de)效果，一(y λī)些(xiē)tips提示通(tōng)™₩常采用(yòng)鼠标滑過展開(kāi)/₽☆↓收起的(de)交互方式。在移動App則不(bù)支持這£™÷α(zhè)類效果，通(tōng)暢需要(yào)點擊特定的(de)₹↔<icon來(lái)收起/展開(kāi)提示。

3、移動App支持的(de)豐富的(de)手勢操作(zuò)，比₽'₹如(rú)通(tōng)過左滑可(kě)看(kàn λ≠★)到(dào)你(nǐ)可(kě)能(néng)需要(yào)的(de)快(≠λ∑kuài)捷操作(zuò)“取消關注”₽↑α、“删除”，這(zhè)類操α₽ ↕作(zuò)方式的(de)特點是(shì)快(kuài)捷高(gāo)效，但(dàn)對(duì)于初學者來(lái)說$₩(shuō)有(yǒu)一(yī)定的(de)學習(xí)、獲知(zhī€↕ ↑)成本。我們在合理(lǐ)設計(jì)這(zhè)些(xiē)快(★Ω₽↑kuài)捷操作(zuò)方式的(de)同時(shí)，還(hái)需要(yà®♠♠ o)支持最通(tōng)用(yòng)的(de)點擊方€₽α↓式來(lái)完成任務的(de)操作(zuò€★∞)路(lù)徑。針對(duì)手勢操作(zuò)學β '習(xí)成本高(gāo)的(de)問(wèn)題，一(yī)些(xiē)Ap δ•&p常通(tōng)過新手引導的(de)方'Ω&式來(lái)教用(yòng)戶。

4、移動App以單手操作(zuò)為(wèi)主，界面上(shàn ‌g)重要(yào)元素需要(yào)在用(yòng)∞'₩&戶單手點擊範圍內(nèi)，或者提供快(kuài)捷的(de)手勢↑‌λ操作(zuò)。

二、設備尺寸不(bù)同

Web網站(zhàn)：不(bù)同PC的(de)分(fēn)辨★☆率不(bù)同，浏覽器(qì)窗(chuāng)口最大(dà)化('₹huà)的(de)尺寸也(yě)不(bù)同;浏覽器(qì)窗(chu€Ω↓≤āng)口可(kě)縮放(fàng)。

移動App：設備尺寸相(xiàng)對(duì)較小(xiǎo);不 ><✘(bù)同設備的(de)分(fēn)辨率差異化(huà)較多(d∏φuō)，特别是(shì)Android;支持橫屏、豎屏調轉方向∞α。

設計(jì)要(yào)點：

1、移動App的(de)尺寸較小(xiǎo)，一(yī)$•屏展示的(de)內(nèi)容有(yǒu)限，更需要(yào)明(mín♣→'g)确哪些(xiē)信息更為(wèi)重要(yàλ 'o)，有(yǒu)效的(de)“組>γ織”相(xiàng)關聯的(de)內(nèi)容'∏，優先級高(gāo)的(de)內(nèi)容突出展示、次要(λ✘¥₽yào)內(nèi)容适當“隐藏≤↔∞β”。

2、Web網站(zhàn)因浏覽器(qì)分(fēn)辨率€©差異較大(dà)、且窗(chuāng)口尺寸↑♥ε±可(kě)變化(huà)，設計(jì)時(shí)需要(yào)确定好(h≈↕∞§ǎo)不(bù)同分(fēn)辨率的(de)內(nèi)容展示和(hé)®"布局，也(yě)因為(wèi)這(zhè)一(yī)點加上(shàng)w≥₩★‌ebapp的(de)浏覽需求，近(jìn)幾年(nián)來'βλ(lái)響應式設計(jì)更為(wèi)普遍。 →α

3、因設備分(fēn)辨率、dpi大(dà)小(xiǎo)不(bù₹£±)一(yī)，所以移動App在界面布局、圖片、文(wén)字的(£☆®φde)顯示上(shàng)，要(yào)兼顧不(bù)同設備的(deφα≈)效果，需要(yào)設計(jì)師(shī)與開(kā♥απi)發共同配合做(zuò)好(hǎo)适配工(gōng)作(zuò)。

4、因移動設備支持橫屏、豎屏展示，所以在設計 §✘>(jì)移動App(比如(rú)遊戲、視(shì)頻(pín)播放‌‍'(fàng)界面)時(shí)，需要(yào)考慮用(yòng)戶是(s•λδhì)否有(yǒu)“換個(gè)方向看(kàn)看©¶(kàn)”的(de)需求、哪些(xiē)情況×σ♠ 下(xià)切換屏幕方向、如(rú)何切πφ換等。

三、使用(yòng)環境不(bù)同

Web網站(zhàn)：通(tōng)常坐(zuò)在某個(gè)室≥¶‌內(nèi)、使用(yòng)時(shí)間(jiān)相(xiànα‌π∞g)對(duì)較長(cháng);

移動App：既可(kě)能(néng)是(shì)長(cháng)≤β↔時(shí)間(jiān)在室內(nèi←↑×₩)使用(yòng)、也(yě)可(kě)能(néng) ↓<是(shì)利用(yòng)碎片化(huà)的(de)÷"§♠時(shí)間(jiān)使用(yòng)，或站(zhàn)或坐 ∏¥∞(zuò)或躺著(zhe)或行(xíng)走，姿勢不(b &★ù)一(yī);

設計(jì)要(yào)點：

1、使用(yòng)Web網站(zhàn)時(shí)，用(yòng)∑™σ戶更為(wèi)專注;

2、使用(yòng)移動App時(shí)，用(y¥>òng)戶很(hěn)容易被周邊環境所影(yǐ©'↔¥ng)響，對(duì)界面上(shàng)展示的(de)內≈≈ε(nèi)容可(kě)能(néng)沒那(nà)麽容易留意到(dào)÷'↕¶;長(cháng)時(shí)間(jiān)使₩用(yòng)時(shí)更适合沉寂式浏覽，碎片化(huà♣σ)時(shí)間(jiān)使用(yòng)時(shí)用(α↓≤σyòng)戶可(kě)能(néng)沒有(yǒu)足夠的(de)時β©(shí)間(jiān)、每次浏覽內(nèi)容有(yǒu)限，類似&l÷δdquo;稍候閱讀(dú)”、&↔₩↓÷ldquo;收藏”等功能(n©>§₹éng)則比較實用(yòng);用(yòng©↓)戶在移動過程中更容易誤操作(zuò)，需要(yào)考慮如(rú§§)何防止誤操作(zuò)、如(rú)何從(cóng)錯(cu↕♥↕©ò)誤中恢複。

四、網絡環境不(bù)同

Web網站(zhàn)：網絡相(xiàng)對(↕±'duì)穩定且基本無需擔心流量問(wèn)題

移動App：因用(yòng)戶使用(yòng)環境複雜(zá)，可∞≠(kě)能(néng)在移動過程中從(cóng)通(tōng)暢環境到α↓≤§(dào)封閉的(de)信号較差的(de)環境，網絡可(kě)能(•'±néng)從(cóng)有(yǒu)到(dào) ←無、從(cóng)快(kuài)到(dào)慢(màn);既可♥±♥₹(kě)使用(yòng)無需擔心流量的(de)WiFi，也(βεα↕yě)可(kě)能(néng)使用(yòng)需要(yào)控制(∑☆zhì)流量的(de)3G/4G。

設計(jì)要(yào)點：

1、移動App，網絡異常的(de)情況更普遍，需要(yào)更加£Ω®重視(shì)這(zhè)類場(chǎng)景♦≤¥♦下(xià)的(de)錯(cuò)誤提示、以及如(rú)何從(cóng)錯(€≠cuò)誤中恢複的(de)方法。

2、移動App，在3G/4G情況下(xià)用(yòng)δ↓∑戶對(duì)流量比較重視(shì)，對(d©♥uì)于需要(yào)耗費(fèi)較多(duō)流量的(de)操作(zu÷♦∞←ò)，需要(yào)提醒用(yòng)戶，在用 ×γ (yòng)戶允許的(de)前提下(xià)才繼續進行(xíng)。π←♦✔

以上(shàng)就(jiù)是(shì)WEB網頁設計(jì)和δ£ Ω(hé)移動APP設計(jì)上(shàng)的(de)一(¶☆yī)些(xiē)區(qū)别和(hé)需要(yào)注 ‍✔意的(de)地(dì)方，希望能(néng)對(₹♦♣duì)正在做(zuò)移動APP設計(jì)的(de)你(nǐ)有©λ✘δ(yǒu)一(yī)些(xiē)幫助。

上(shàng)一(yī)篇：深圳大(dà)數(shù)據開(kāi)發工(gōng)程師(shī)薪資水∏ (shuǐ)平高(gāo)嗎(ma)
下(xià)一(yī)篇：深圳APP開(kāi)發公司新入職程序員(yuá±n)需知(zhī)