您當前的(de)位置:深圳APP開(kāi)發 > 新聞資訊 > 網站(zhàn)建設資訊 >

人(rén)
已閱讀(dú)

聊一(yī)聊Web網站(zhàn)和(hé)移動App✘φ的(de)幾個(gè)差異

來(lái)源：lexintech.com 發布時Ω↔₽>(shí)間(jiān)：2017-08-27

Web網站(zhàn)和(hé)移動App的(de)設計(×β©jì)，前者依托于PC的(de)浏覽器(qì)，後者則是(shì)依" →托于手機(jī)/平闆電(diàn)腦(nǎo)。不(bù)同的(de)設備/≥★£₽平台均有(yǒu)各自(zì)的(de)特點，以至于在設計(jì)這‍φγ(zhè)兩類産品時(shí)也(yě)有(y>"ǒu)些(xiē)許差異。

　　今天樂(yuè)信小(xiǎo)編從(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)44

point。所以移動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ē)App常通(tōng)過新手引導的(de)方式來(lái¶←)教用(yòng)戶。

　　4、移動App以單手操作(zuò)€∞£✔為(wèi)主，界面上(shàng)重要(↔±∞×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ānδ‍g)口可(kě)縮放(fàng)。

　　移動App：設備尺寸相(xiàng)對(duì)較小(xiǎo);不(b≤ ù)同設備的(de)分(fēn)辨率差異化(huà) ✔Ω較多(duō)，特别是(shì)Andr↓ oid;支持橫屏、豎屏調轉方向。

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

　　1、移動App的(de)尺寸較小(xiǎo)，一(yī)屏♦≤展示的(de)內(nèi)容有(yǒu)限，更需要(yào)明(míng)确哪 ¥≠★些(xiē)信息更為(wèi)重要(yào)εΩβ，有(yǒu)效的(de)“組織&♣ ”相(xiàng)關聯的(de)內(nèi)'™≠容，優先級高(gāo)的(de)內(nèi)容突出₹±Ωγ展示、次要(yào)內(nèi)容适當&ldquo'®;隐藏”。

　　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àn↕ g)webapp的(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)戶是(shì)否有(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àng)對(duì)較長(chá ↔ng);

　　移動App：既可(kě)能(néng)是(shì)長(cháng)時™δ(shí)間(jiān)在室內(nèi)使用(yòng)、也(yπ ě)可(kě)能(néng)是(shì)利用(yòng)碎片化(hδ♦φ↔uà)的(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)時(sα≥☆©hí)更适合沉寂式浏覽，碎片化(huà)時(shí)間(jiān) ♥使用(yòng)時(shí)用(yòng)戶可(kě)能(néng)☆↓沒有(yǒu)足夠的(de)時(shí)間(jiān)、每次浏覽內(nλ¶±÷èi)容有(yǒu)限，類似&ldquoγ↕;稍候閱讀(dú)”、“☆♥收藏”等功能(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òn>&$g)環境複雜(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ì)↓‍¶ε，對(duì)于需要(yào)耗費(fèi)較多(duō)流量的(de)操≤§₽α作(zuò)，需要(yào)提醒用(yòng)戶，在∏©∑用(yòng)戶允許的(de)前提下(xià)才繼續€↔進行(xíng)。

　　五、通(tōng)知(zhī)方式不(bù)↕>♥同

　　Web網站(zhàn)：對(duì)于浏®♣覽器(qì)的(de)通(tōng)知(zhī)中心↓£‍，用(yòng)戶使用(yòng)的(de)不(bù₽γ÷)多(duō)，很(hěn)難主動喚起用(yò≥$£πng)戶

　　移動App：推送通(tōng)知(zhī)給用(yò←₹₹ng)戶的(de)方式很(hěn)常見(jiàn)。

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

　　在移動App可(kě)以用(yòng)通(tōng)知(zhī)及時(★♣shí)提醒用(yòng)戶一(yī)些(xiē)£‌®重要(yào)信息，但(dàn)也(yě)需要(yào)"ε考慮用(yòng)戶關閉通(tōng)知(zhī)提醒的(de)場(chǎn<™g)景下(xià)用(yòng)戶仍然能(¶β←'néng)無礙的(de)使用(yòng);因為(wèi)“↓→通(tōng)知(zhī)”功能(néng©αλ)對(duì)用(yòng)戶較為(wèi)重要(yào)，設₽σ≤計(jì)師(shī)需要(yào)思考如(rú)何讓用(yòng)戶更容易¶&“開(kāi)啓通(tōng)知(zh↑♥βī)權限”。

　　六、基于位置服務的(de)精細度不(bù)同

　　Web網站(zhàn)：定位功能(néng)一€<‌☆(yī)般獲取到(dào)的(de)是(sh→♥♦£ì)當前城(chéng)市(shì)

　　移動App：可(kě)較為(wèi)精确的(de)獲取 ₩用(yòng)戶的(de)當前位置

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

　　移動App可(kě)合理(lǐ)的(de)利用(yòβ¥β§ng)用(yòng)戶的(de)位置，給用(y<<∏φòng)戶提供一(yī)些(xiē)服務。比如(rú)，地(dì)圖類可(k÷≥ ≠ě)以搜索“我的(de)位置”到(dào)‌$¶↑目的(de)地(dì)的(de)路(lù)線，生™α(shēng)活服務類可(kě)以查詢我的(de)位置附近(≈§jìn)的(de)美(měi)食、商場(chǎng)、電(dià÷€n)影(yǐng)院等等，這(zhè)樣的(de) &↑α方式省去(qù)了(le)用(yòng)戶手動輸入當前位置的(de)複雜(zε ‍βá)、更加智能(néng)化(huà)。

上(shàng)一(yī)篇：響應式網頁圖片庫設計(jì)的(de)幾個(g≤★φè)注意事(shì)項
下(xià)一(yī)篇：APP開(kāi)發公司如(rú)何設計(∞&jì)出令人(rén)難忘的(de)優秀網站(zhàn)