這篇文章主要介紹“PC端與H5移動(dòng)端交互設(shè)計(jì)的區(qū)別是什么”，在日常操作中，相信很多人在PC端與H5移動(dòng)端交互設(shè)計(jì)的區(qū)別是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”P(pán)C端與H5移動(dòng)端交互設(shè)計(jì)的區(qū)別是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

十余年的欒川網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整欒川建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“欒川網(wǎng)站設(shè)計(jì)”,“欒川網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一、大屏到小屏

開(kāi)門(mén)見(jiàn)山，移動(dòng)端和PC端最根本的區(qū)別就是屏幕的大小。屏幕的大小直接決定了界面信息量，PC端一個(gè)頁(yè)面可以展示完全的信息可能需要移動(dòng)端好幾個(gè)頁(yè)面來(lái)承載?？赡苡械脑O(shè)計(jì)師覺(jué)得，屏幕尺寸不一樣做自適應(yīng)不就行了，移動(dòng)端頁(yè)面做長(zhǎng)一點(diǎn)，讓用戶(hù)滑動(dòng)就可以了。這是一個(gè)非常簡(jiǎn)單的處理方案，但是忽略了一個(gè)重要前提：用戶(hù)愿不愿意滑動(dòng)？

根據(jù)埋點(diǎn)數(shù)據(jù)顯示，多數(shù)移動(dòng)端頁(yè)面超過(guò)一屏的內(nèi)容的曝光與點(diǎn)擊量會(huì)急劇下滑，說(shuō)明用戶(hù)很少主動(dòng)滑動(dòng)去查看一屏以外的內(nèi)容。對(duì)于移動(dòng)端產(chǎn)品來(lái)說(shuō)，一些重要的內(nèi)容必須保證用戶(hù)在一屏內(nèi)可以看到。

1、信息架構(gòu)重構(gòu)

因此，如果你要為一個(gè)PC端網(wǎng)站做一個(gè)移動(dòng)端APP，首先要做的就是信息架構(gòu)的重構(gòu)。PC端有足夠的空間可以把所有的功能直接展示給用戶(hù)，而移動(dòng)端只能展示一些主要的功能，一些次要的功能需要放在下一層級(jí)。

PC端的處理方式很簡(jiǎn)單，直接展示給用戶(hù)。而移動(dòng)端是需要用戶(hù)長(zhǎng)按這條評(píng)論才可以彈出評(píng)價(jià)列表的，可能很多用戶(hù)今天看了這篇文章才發(fā)現(xiàn)原來(lái)還有這個(gè)功能。沒(méi)關(guān)系，之前雖然不知道，但是并沒(méi)有影響你正常使用啊。對(duì)次要功能進(jìn)行適當(dāng)?shù)慕档托畔蛹?jí)是移動(dòng)端設(shè)計(jì)師必須要考慮的。

2.、一個(gè)頁(yè)面，一個(gè)任務(wù)

對(duì)于上面信息架構(gòu)重構(gòu)的觀點(diǎn)可能會(huì)有人存在異議，對(duì)于一些表單類(lèi)頁(yè)面來(lái)說(shuō)，例如用戶(hù)要借錢(qián)、轉(zhuǎn)賬，有些信息是用戶(hù)必須要填的。在這些場(chǎng)景中，我們不擔(dān)心用戶(hù)不滑動(dòng)，因?yàn)橛脩?hù)不滑動(dòng)就無(wú)法完成操作。那么在這種情況下，是否可以繼續(xù)延續(xù)PC端的布局樣式？

因?yàn)橐苿?dòng)端用戶(hù)使用環(huán)境更加復(fù)雜多變，更容易受到干擾，所以必須保證界面信息的簡(jiǎn)單直觀。如果在一個(gè)頁(yè)面中展示過(guò)多的信息量，容易讓用戶(hù)混亂。這里所說(shuō)信息量并不是指絕對(duì)信息量，更準(zhǔn)確的說(shuō)法應(yīng)該是用戶(hù)主觀感受上的信息量。同樣的幾個(gè)輸入框，可能在PC端只占了頁(yè)面的1/4，而移動(dòng)端占了一整個(gè)頁(yè)面，給用戶(hù)的感觀是完全不一樣的。頁(yè)面塞得滿(mǎn)滿(mǎn)當(dāng)當(dāng)，容易讓用戶(hù)焦慮。

一個(gè)頁(yè)面可以完成的任務(wù)現(xiàn)在要跳轉(zhuǎn)好幾個(gè)頁(yè)面，增加了操作步驟。用戶(hù)害怕“內(nèi)容多”，難道不害怕“步驟多”嗎？不害怕，因?yàn)轫?yè)面內(nèi)容量是用戶(hù)一眼就可以看出來(lái)的，用戶(hù)無(wú)法立刻感知這個(gè)任務(wù)有多少步驟。因?yàn)闊o(wú)知，所以無(wú)畏。等到用戶(hù)知道這個(gè)任務(wù)步驟數(shù)的時(shí)候，整個(gè)任務(wù)都已經(jīng)完成了。

借唄的這次改版，用戶(hù)要借錢(qián)必須先輸入借款金額，其余的借款期限、還款方式和利息等信息才會(huì)展示給用戶(hù)。這些信息都是跟用戶(hù)借款金額相關(guān)的，用戶(hù)沒(méi)有輸入借款金額，這些信息展示給用戶(hù)意義也不大，不如隱藏，讓用戶(hù)的注意力聚焦于完成輸入借款金額。

沒(méi)有一個(gè)放之四海而皆準(zhǔn)的設(shè)計(jì)原則，所有的設(shè)計(jì)理論都不能罔顧實(shí)際的應(yīng)用場(chǎng)景而機(jī)械的套用。如果前后步驟關(guān)聯(lián)性比較強(qiáng)，我建議不要分頁(yè)展示。
例如，目前很多的短信驗(yàn)證碼都選擇把“輸入手機(jī)號(hào)”和“輸入短信驗(yàn)證碼”放到兩個(gè)頁(yè)面，我個(gè)人對(duì)此持保留意見(jiàn)。設(shè)想一個(gè)場(chǎng)景，如果用戶(hù)遲遲沒(méi)有收到短信驗(yàn)證碼，那么他需要確定是手機(jī)號(hào)輸錯(cuò)了、網(wǎng)絡(luò)故障還是其他什么原因。用戶(hù)需要返回到上一個(gè)頁(yè)面查看，如果手機(jī)號(hào)和短信驗(yàn)證碼放在同一個(gè)頁(yè)面就簡(jiǎn)單多了。

3、突出重要信息

前面我們提到的主要是控制移動(dòng)端頁(yè)面的信息量。頁(yè)面信息量少就可以了？當(dāng)然不是！我們來(lái)看一下火車(chē)換乘的場(chǎng)景，如果你要從南京去新疆阿克蘇，沒(méi)有直達(dá)的車(chē)次，只能從西安換乘。

我們來(lái)看看下面兩款產(chǎn)品的處理方式，左邊是12306，右邊是飛豬。12306還是一股PC端風(fēng)格迎面撲來(lái)，問(wèn)題出現(xiàn)在哪？12306跟飛豬展示信息量差不多，唯一的區(qū)別在于12306展示了兩趟車(chē)次各自的起止時(shí)間，而飛豬只告訴用戶(hù)整趟旅程的起止時(shí)間。

顯然問(wèn)題不是出現(xiàn)在信息量上，而是對(duì)信息的展示形式上。用戶(hù)更關(guān)注的信息，應(yīng)該讓用戶(hù)更容易發(fā)現(xiàn)。對(duì)于一趟車(chē)次來(lái)說(shuō)，用戶(hù)更加關(guān)注出發(fā)/到達(dá)站、出發(fā)/到達(dá)時(shí)間和票價(jià)。對(duì)飛豬界面進(jìn)行高斯模糊處理，發(fā)現(xiàn)用戶(hù)的視覺(jué)焦點(diǎn)正好落在這些重點(diǎn)信息上。

12306所有的信息都屬于同一層級(jí)，讓人抓不到主次。而且界面中出現(xiàn)了過(guò)多的配色，更增加用戶(hù)的信息獲取成本。

二、鼠標(biāo)到手指

PC端用戶(hù)與界面進(jìn)行交互靠的是鼠標(biāo)，移動(dòng)端用戶(hù)靠的是手指。鼠標(biāo)的操作更加精準(zhǔn)，因此移動(dòng)端界面中元素的尺寸和間距比PC端的大。
以下圖為例，左邊是PC端，右邊是移動(dòng)端。移動(dòng)端的輸入框沿用的還是PC端樣式，而且關(guān)于利率和手續(xù)費(fèi)的詳情icon過(guò)小，用戶(hù)的手指點(diǎn)擊的時(shí)候容易誤操作。

三、給你的界面做減法

前面我們主要強(qiáng)調(diào)了移動(dòng)端產(chǎn)品要盡量減少界面中信息量?？刹豢梢栽诓桓淖儺a(chǎn)品信息架構(gòu)的前提下，通過(guò)交互設(shè)計(jì)上的改動(dòng)來(lái)完成目標(biāo)呢？我給大家介紹兩個(gè)方法：場(chǎng)景化和關(guān)聯(lián)化。

1、場(chǎng)景化

在一個(gè)頁(yè)面中，雖然內(nèi)容很多，但是用戶(hù)真正感興趣并且會(huì)與之交互的內(nèi)容很少。如果我們可以獲知用戶(hù)在特定的場(chǎng)景下對(duì)于某個(gè)內(nèi)容訴求很高，那么我們突出展示；反之如果訴求很低的話(huà)，我們可以隱藏。

同一個(gè)流程，需要根據(jù)用戶(hù)不同的使用場(chǎng)景提供不同的功能。其實(shí)即使是同一個(gè)功能，我們也要根據(jù)用戶(hù)不同的使用場(chǎng)景選擇不同的展示形式。

知乎為了方便用戶(hù)可以快速的查看下一個(gè)回答，給用戶(hù)提供了一個(gè)浮動(dòng)按鈕。但是這個(gè)浮動(dòng)按鈕，當(dāng)用戶(hù)開(kāi)始滑動(dòng)頁(yè)面時(shí)候就會(huì)改變樣式。這個(gè)很容易理解，當(dāng)用戶(hù)剛進(jìn)入這個(gè)頁(yè)面，為了降低用戶(hù)的學(xué)習(xí)成本，我們需要直接告訴用戶(hù)這個(gè)按鈕是干什么的。當(dāng)用戶(hù)開(kāi)始滑動(dòng)進(jìn)入閱讀答案的狀態(tài)，縮小按鈕的形態(tài)避免對(duì)界面信息造成遮擋。

2、關(guān)聯(lián)化

我們需要梳理信息之間的關(guān)聯(lián)性，將相互關(guān)聯(lián)的信息整合在一起，進(jìn)而減少頁(yè)面中信息量。支付寶賬單的月份篩選功能，對(duì)入口進(jìn)行了修改。之前用戶(hù)需要點(diǎn)擊日歷圖標(biāo)，現(xiàn)在用戶(hù)直接點(diǎn)擊月份就可以了。用戶(hù)要篩選的就是月份，那么直接把月份作為入口更加合適。

到此，關(guān)于“PC端與H5移動(dòng)端交互設(shè)計(jì)的區(qū)別是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

名稱(chēng)欄目：PC端與H5移動(dòng)端交互設(shè)計(jì)的區(qū)別是什么
文章分享：http://jinyejixie.com/article8/jjhdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、定制開(kāi)發(fā)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、網(wǎng)站收錄

廣告

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