PC端與H5移動端交互設(shè)計的區(qū)別是什么

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

　　一、大屏到小屏

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

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

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

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

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

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

　　對于上面信息架構(gòu)重構(gòu)的觀點可能會有人存在異議，對于一些表單類頁面來說，例如用戶要借錢、轉(zhuǎn)賬，有些信息是用戶必須要填的。在這些場景中，我們不擔心用戶不滑動，因為用戶不滑動就無法完成操作。那么在這種情況下，是否可以繼續(xù)延續(xù)PC端的布局樣式？

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

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

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

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

　　3、突出重要信息

　　前面我們提到的主要是控制移動端頁面的信息量。頁面信息量少就可以了？當然不是！我們來看一下火車換乘的場景，如果你要從南京去新疆阿克蘇，沒有直達的車次，只能從西安換乘。

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

　　顯然問題不是出現(xiàn)在信息量上，而是對信息的展示形式上。用戶更關(guān)注的信息，應(yīng)該讓用戶更容易發(fā)現(xiàn)。對于一趟車次來說，用戶更加關(guān)注出發(fā)/到達站、出發(fā)/到達時間和票價。對飛豬界面進行高斯模糊處理，發(fā)現(xiàn)用戶的視覺焦點正好落在這些重點信息上。

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

　　二、鼠標到手指

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

　　三、給你的界面做減法

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

　　1、場景化

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

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

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

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

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

到此，關(guān)于“PC端與H5移動端交互設(shè)計的區(qū)別是什么”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>