起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識盤點移動端和PC端交互設計上的區別
由于屏幕的大小，所以PC端和移動端在信息呈現上有很大不同。但是有的設計師簡單地將區別理解為把頁面做長一點，讓用戶多滑動一些。然而這樣是不對的，并不能根本理解兩者的不同。
終于把書寫完，接下來恢復之前的更文頻率。這篇文章我們來談談。
經常遇到一些設計師，他們之前負責的都是PC端產品，突然改做移動端，會不自覺的把PC端的一些設計理念“移植”到移動端，出現了水土不服現象。
有經驗的設計師一看你設計的移動端頁面就知道你之前做的都是PC端，這是一件非常尷尬的事情。就好像你說了一句“nice to meet you”，別人就知道你老家是哪里一樣。那么究竟在哪呢？
一、大屏到小屏
開門見山，移動端和PC端最根本的區別就是屏幕的大小。屏幕的大小直接決定了界面信息量，PC端一個頁面可以展示完全的信息可能需要移動端好幾個頁面來承載。
可能有的設計師覺得，屏幕尺寸不一樣做自適應不就行了，移動端頁面做長一點，讓用戶滑動就可以了。
這是一個非常簡單的處理方案，但是忽略了一個重要前提：用戶愿不愿意滑動？
根據埋點數據顯示，多數移動端頁面超過一屏的內容的曝光與點擊量會急劇下滑，說明用戶很少主動滑動去查看一屏以外的內容。對于移動端產品來說，一些重要的內容必須保證用戶在一屏內可以看到。
1. 信息架構重構
因此，如果你要為一個PC端網站做一個移動端APP，首先要做的就是信息架構的重構。PC端有足夠的空間可以把所有的功能直接展示給用戶，而移動端只能展示一些主要的功能，一些次要的功能需要放在下一層級。
例如，APPstore中用戶是可以評價這條評論對自己是否有幫助的。
PC端的處理方式很簡單，直接展示給用戶。而移動端是需要用戶長按這條評論才可以彈出評價列表的，可能很多用戶今天看了這篇文章才發現原來還有這個功能。沒關系，之前雖然不知道，但是并沒有影響你正常使用啊。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的。
2. 一個頁面，一個任務
對于上面信息架構重構的觀點可能會有人存在異議，對于一些表單類頁面來說，例如用戶要借錢、轉賬，有些信息是用戶必須要填的。在這些場景中，我們不擔心用戶不滑動，因為用戶不滑動就無法完成操作。那么在這種情況下，是否可以繼續延續PC端的布局樣式？
以上面的轉賬流程為例，PC端是直接在一個頁面展示，而移動端是分成了兩個頁面。為什么這樣？把備注/付款說明也放在第一個頁面不行嗎？
因為移動端用戶使用環境更加復雜多變，更容易受到干擾，所以必須保證界面信息的簡單直觀。如果在一個頁面中展示過多的信息量，容易讓用戶混亂。這里所說信息量并不是指絕對信息量，更準確的說法應該是用戶主觀感受上的信息量。同樣的幾個輸入框，可能在PC端只占了頁面的1/4，而移動端占了一整個頁面，給用戶的感觀是完全不一樣的。頁面塞得滿滿當當，容易讓用戶焦慮。
一個頁面可以完成的任務現在要跳轉好幾個頁面，增加了操作步驟。用戶害怕“內容多”，難道不害怕“步驟多”嗎？不害怕，因為頁面內容量是用戶一眼就可以看出來的，用戶無法立刻感知這個任務有多少步驟。因為無知，所以無畏。等到用戶知道這個任務步驟數的時候，整個任務都已經完成了。
借唄的這次改版，用戶要借錢必須先輸入借款金額，其余的借款期限、還款方式和利息等信息才會展示給用戶。這些信息都是跟用戶借款金額相關的，用戶沒有輸入借款金額，這些信息展示給用戶意義也不大，不如隱藏，讓用戶的注意力聚焦于完成輸入借款金額。
沒有一個放之四海而皆準的設計原則，所有的設計理論都不能罔顧實際的應用場景而機械的套用。如果前后步驟關聯性比較強，我建議不要分頁展示。
例如，目前很多的短信驗證碼都選擇把“輸入手機號”和“輸入短信驗證碼”放到兩個頁面，我個人對此持保留意見。設想一個場景，如果用戶遲遲沒有收到短信驗證碼，那么他需要確定是手機號輸錯了、網絡故障還是其他什么原因。用戶需要返回到上一個頁面查看，如果手機號和短信驗證碼放在同一個頁面就簡單多了。
3. 突出重要信息
前面我們提到的主要是控制移動端頁面的信息量。頁面信息量少就可以了？當然不是！我們來看一下火車換乘的場景，如果你要從南京去新疆阿克蘇，沒有直達的車次，只能從西安換乘。
我們來看看下面兩款產品的處理方式，左邊是12306，右邊是飛豬。12306還是一股PC端風格迎面撲來，問題出現在哪？12306跟飛豬展示信息量差不多，唯一的區別在于12306展示了兩趟車次各自的起止時間，而飛豬只告訴用戶整趟旅程的起止時間。
顯然問題不是出現在信息量上，而是對信息的展示形式上。用戶更關注的信息，應該讓用戶更容易發現。對于一趟車次來說，用戶更加關注出發/到達站、出發/到達時間和票價。對飛豬界面進行高斯模糊處理，發現用戶的視覺焦點正好落在這些重點信息上。
12306所有的信息都屬于同一層級，讓人抓不到主次。而且界面中出現了過多的配色，更增加用戶的信息獲取成本。
二、鼠標到手指
PC端用戶與界面進行交互靠的是鼠標，移動端用戶靠的是手指。鼠標的操作更加精準，因此移動端界面中元素的尺寸和間距比PC端的大。
以下圖為例，左邊是PC端，右邊是移動端。移動端的輸入框沿用的還是PC端樣式，而且關于利率和手續費的詳情icon過小，用戶的手指點擊的時候容易誤操作。
三、給你的界面做減法
前面我們主要強調了移動端產品要盡量減少界面中信息量?？刹豢梢栽诓桓淖儺a品信息架構的前提下，通過交互設計上的改動來完成目標呢？我給大家介紹兩個方法：場景化和關聯化。
1. 場景化
在一個頁面中，雖然內容很多，但是用戶真正感興趣并且會與之交互的內容很少。如果我們可以獲知用戶在特定的場景下對于某個內容訴求很高，那么我們突出展示；反之如果訴求很低的話，我們可以隱藏。
舉一個之前說過的例子，知乎中，用戶在搜索結果頁滑動大概3屏后，會出現“向知友提問”按鈕。因為用戶滑動了3屏，說明用戶可能對當前的搜索結果不滿意，這時引導用戶去提問，用戶的意愿更高。如果我們全程展示這個去提問按鈕，反而會減少用戶的實際瀏覽區域，造成干擾。
上面主要提到了，同一個流程，需要根據用戶不同的使用場景提供不同的功能。其實即使是同一個功能，我們也要根據用戶不同的使用場景選擇不同的展示形式。
還是知乎，為了方便用戶可以快速的查看下一個回答，給用戶提供了一個浮動按鈕。但是這個浮動按鈕，當用戶開始滑動頁面時候就會改變樣式。這個很容易理解，當用戶剛進入這個頁面，為了降低用戶的學習成本，我們需要直接告訴用戶這個按鈕是干什么的。當用戶開始滑動進入閱讀答案的狀態，縮小按鈕的形態避免對界面信息造成遮擋。
2. 關聯化
我們需要梳理信息之間的關聯性，將相互關聯的信息整合在一起，進而減少頁面中信息量。支付寶賬單的月份篩選功能，對入口進行了修改。之前用戶需要點擊日歷圖標，現在用戶直接點擊月份就可以了。用戶要篩選的就是月份，那么直接把月份作為入口更加合適。
四、總結
以上就是我對移動端和PC端交互設計上區別的簡單分析和總結，如果你有不同的建議和看法歡迎留言討論。
#專欄作家#
王M爭（微信公眾號：王M爭），人人都是經理專欄作家，資深互聯網人。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
移動端的交互設計確實需要相對多的數據指標輔助后期優化迭代
看了很多評論關于借唄
1，用戶需求:借錢(通常還是小額)，同時用戶具有一定的急迫程度
利息，還款方式，并不是他主要關心的。
2，品牌，隨借隨還，利息低，借唄的品牌影響力，進一步落化了用戶對利息，還款方式的關注。
3，第一步確認能不能借?；镜搅说诙降牧魇室呀浵喈數土恕?/p>
學習了！厲害！
搬來搬去
高手過招??！牛，學習了
很有收獲，謝謝
改版后的借唄頁面，在輸入金額后，用戶不確定點擊確定后是否以未知的利率和分期直接完成交易，我認為這里容易造成誤解，同時也延長了用戶使用路徑。
如果直接使用第二個頁面，會減少用戶的負面情緒，且方便用戶對比不同平臺的借款信息
借唄中只要用戶輸入借款金額，利息的信息就會帶出來
看到你們的思維博弈 甚是贊賞 給個贊 等我有錢了再來好好打賞一波
關于借唄這次改版內容的解讀我不太能茍同
1.作為一個金融產品，又特別是當用戶是借款身份，借錢這個時候，所謂“不需要展示的”內容，往往卻是用戶在借錢前最在意的，還款方式，利息等等，這個就是應該在用戶輸入金額錢就展示出來的內容，與金額是息息相關。
2.開放式產品，用戶大部分自然流入，很多用戶都有可能是第一次使用，這個時候何必讓他們產生遲疑(找信息），我認為這種模塊既是交易塊又算是工具，提升效率讓用戶得到他們想要的內容才是重點。
3.如果只是在產品設計上看重頁面簡，對于金額產品來說，可以提升用戶體驗，但是不完全影響。低利率的借款和頁面及其簡單好操作內容但是利率稍微高點，用戶最后會選擇哪個呢？
4.能保證年齡大的用戶，能記住，這個使用了一次看到這個展現消息的頁面是在輸入金額之后？第二次再進入會不會出現“哎，之前不是有這個消息內容，現在怎么空了？”
愚見~希望得到您的指點
首先非常感謝您這么細致讀我的文章，用戶借錢的時候的確關注還款方式，利息等信息。但是如果用戶在沒有輸入借款金額的前提下，我們展示這些信息是否有用？因為利息是根據你的借款金額、還款期數和還款方式結算出來的。當用戶調起鍵盤開始輸入金額的時候，借唄是會實時更新利息等信息的。
您這樣理解也是沒錯的，但是這個牽扯到了信息的展示的順序
1.在你點擊這么屏幕的時候，你是將所有信息都想到了我要借多少，我能接受的還款行為?！拜斎虢痤~”這個動作是慢于我思考“輸入金額”“利息”“還款方式”等，如果你知道了平臺還款方式以及利率不是你能接受的情況下，你還會輸入金額嗎？就像我想買一個東西但是借錢分期實在太貴了，我還會考慮我要借200還是借2000嗎？這些信息的展示是優先級高于輸入金額的。
2.“因為利息是根據你的借款金額、還款期數和還款方式結算出來的。當用戶調起鍵盤開始輸入金額的時候，借唄是會實時更新利息等信息的?！坝脩粼跊]有被告知提示的情況下如何知道利息內容，怎么獲取，這樣是一個很懵逼的過程。
3.我覺得對于交互來說，應該考慮真實的業務場景，對于它展現的業務場景來說本來頁面已經是很寬了，需要用戶注意的內容也是在頁面頂部，對于強調顯示等都做的很完善了，所謂對用戶的影響已經很低了。
用戶要借錢，首先會關注“這個平臺可以讓我借多少”“利率是多少”，這兩個信息在上一個頁面已經告訴用戶了。
對于工作記憶來說，用戶很容易忘記上一步操作的信息，當前頁面顯示會牽扯到的信息是更好的選擇
其實沒啥好爭論的，數據說話，指不定下一版就改了，這個細節肯定會做到最合理的
分析的很到位 ?
嘻嘻 ~ zls1229694364 ~謝謝
emmm我覺得還要考慮整個使用流程，首先這個頁面明顯已經不是為了吸引用戶“來選我，來選我”的頁面了，而是進入借錢的業務環節了，可以看出頁面的信息都是基于用戶輸入的金額顯示的，那么未輸入前就很難展示這些信息，如果按你所說的，用戶已經通過上一個頁面判斷自己要這個產品并進入這個借錢的流程，此時你再把利率、（借多少其實人家已經顯示了）再顯示一遍，會不會造成某些風險呢？（比如仔細一看這個利率還是有點高啊，別的平臺多少來著？算了算了不借了）。所以我覺得借唄這種交互的改造應該也有引導用戶快速、專心完成業務的需求。
看了您的回復感覺有時候正向反向說明或者出于生活經驗的判斷功能是很難的，需要進行一些測試如灰度推送或者A/B組測試來看數據結果，指導改版。
在12306和飛豬的界面上，我更傾向12306的的的信息更清楚和完整一點，雖然飛豬的層次感好一點，但中途的時間不清晰，會造成旅途的很多困惑，比如到中轉站的時間是晚上還是下午，需不需要進餐，或者休息，而且中轉的時候都不在一個站，去另外一個站的路途長短，都是需要考慮的。
感謝您的提問，首先飛豬是可以告訴用戶是同站換乘還是異站換乘，其次我覺得用戶是不是需要進餐和休息直接通過間隔時間就可以判斷了。
贊同，我也更傾向于12306的，信息更清晰和完成。一個城市有很多個車站，首先要保證用戶明確知道自己去的是東西南北哪個站；中轉站是同站，還是同城異站，加上間隔時間，更容易安排自己的中間行程；買車票的時候，價格不是最主要的關注點吧？中轉站這個用法，我更傾向于自己兩段分開獨立購買，自己掌握自己的行程。
買票最主要的是那些內容呢？1、始發站-終點站 2、時間。這大概是我們大部分人買票考慮的事情，當你篩選了站點之后，時間應該是最重要的了。所以我傾向于飛豬的設計。當然肯定也有缺點。沒有展示總時長，沒有中轉站時間，間隔等等。但是如果是移動端搶票，首先是考慮搶到，有票。在考慮是不是特別舒適。
學習了 ??