移動端和PC端互動設計上的區別

經常遇到一些設計師，他們之前負責的都是pc端產品，突然改做移動端，會不自覺的把pc端的一些設計理念“移植”到移動端，出現了水土不服。有經驗的設計師一看你設計的移動端頁面就知道你之前做的都是pc端，這是一件非常尷尬的事情。就好像你說了一句“nice to meet you”，別人就知道你老家是哪裡一樣。那麼移動端和pc端互動設計上的區別究竟在哪呢？

大屏到小屏

開門見山， 移動端和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過小，使用者的手指點選的時候容易誤操作。

給你的介面做減法

前面我們主要強調了移動端產品要儘量減少介面中資訊量。可不可以在不改變產品資訊架構的前提下，透過互動設計上的改動來完成目標呢？我給大家介紹兩個方法： 場景化 和 關聯化 。

1）場景化

在一個頁面中，雖然內容很多，但是使用者真正感興趣並且會與之互動的內容很少。 如果我們可以獲知使用者在特定的場景下對於某個內容訴求很高，那麼我們突出展示；反之如果訴求很低的話，我們可以隱藏。

舉一個之前說過的例子，知乎中，使用者在搜尋結果頁滑動大概3屏後，會出現“向知友提問”按鈕。因為使用者滑動了3屏，說明使用者可能對當前的搜尋結果不滿意，這時引導使用者去提問，使用者的意願更高。如果我們全程展示這個去提問按鈕，反而會減少使用者的實際瀏覽區域，造成干擾。

上面主要提到了， 同一個流程，需要根據使用者不同的使用場景提供不同的功能。其實即使是同一個功能，我們也要根據使用者不同的使用場景選擇不同的展示形式。

還是知乎，為了方便使用者可以快速的檢視下一個回答，給使用者提供了一個浮動按鈕。但是這個浮動按鈕，當使用者開始滑動頁面時候就會改變樣式。這個很容易理解，當使用者剛進入這個頁面，為了降低使用者的學習成本，我們需要直接告訴使用者這個按鈕是幹什麼的。當使用者開始滑動進入閱讀答案的狀態，縮小按鈕的形態避免對介面資訊造成遮擋。

2）關聯化

我們需要梳理資訊之間的關聯性，將相互關聯的資訊整合在一起，進而減少頁面中資訊量。 支付寶賬單的月份篩選功能，對入口進行了修改。之前使用者需要點選日曆圖示，現在使用者直接點選月份就可以了。使用者要篩選的就是月份，那麼直接把月份作為入口更加合適。

總結

以上就是我對移動端和pc端互動設計上區別的簡單分析和總結，如果你有不同的建議和看法歡迎評論區留言討論。

本文摘自如有侵權請及時告知，謝謝！