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

伴隨著移動互聯網如火如荼的發展，身邊很多小夥伴都在從事UI相關的設計。各大設計論壇上也有很多UI稿的分享，在工作中甚至有種做手機端比做pc端舒服的錯覺。

而在轉做pc端的時候，會遇到某些水土不服而不知所措的情況。

今天，我就拋磚引玉，聊聊移動端和PC端交互設計上的區別。

首先總結，pc端和移動端直觀的區別是：

1.屏幕大小差異-信息層級的重置和視覺節奏的優化

2.交互設備使用的差異-從鼠標到手指，消失的懸停態

3.使用場景的差異-固定位置和可移動位置

4.對流量網速感知的差異

1.屏幕大小差異-信息層級的重置和視覺節奏的優化

移動端和pc端最直觀的區別就是屏幕大小的區別。在移動端用戶已經形成了下滑瀏覽和feeds流瀏覽的習慣，但正常人其實都知道，當滑動2屏之後，內容的觸及其實就已經很低了。

也就是說在移動端，我們需要把很多重要的入口和功能放在第一屏，對屏幕有效的利用是考驗設計師的一個難點。這也決定了受限於屏幕大小，移動端的首屏必然只能作為大多數功能的入口。也是因為展示信息量的多少，移動端完成某項任務流程需要調整幾個頁面。而用戶也習慣的頁面跳轉的模式。

一個頁面完成一項簡單任務，這是移動端的習慣。

在pc端，大多數屏幕寬度都可以設置為1200了。而動輒24寸的屏幕也保證了最小字號可以設置到12號的中文字，甚至客戶端可以設置10號的英文和數字。

在這樣的頁面，交互設計可以根據閱讀順序將導航欄設置在左邊，每個層級逐級從左到右展示，很多複雜的任務就可以在一個頁面上完成。減少了跳轉，也降低了用戶操作的心理預估壓力。

在某些需要輸入信息的表單頁面場景，用戶可以直接點擊鍵盤上的tab鍵切換到下一個輸入框，但移動端就沒有這樣的操作。

以蘋果的備忘錄舉例，pc端由左到右將頁面分為三段，與移動端相比就取消了跳轉頁面。但本質上雙端的交互是一致的。

以網易雲音樂舉例，pc端將移動端的tab和個人中心的某些功能放置在了界面的左側導航，而移動端則是使用了5個底部tab來切換功能。

在信息層級重置調整之後，界面的視覺節奏也會因此調整。對比大多數佈局結構，我們就能總結出一些常規的佈局樣式了。

2.交互設備使用的差異-從鼠標到手指，消失的懸停態

很好理解，在pc端大多數人還是用鼠標來操作的，相對於手指，鼠標的操作精確度要高很多。這也導致了Pc端的操作按鈕可以做得比較小，比如mac系統的關閉，全屏和最小化的三個小圓點，像素大小隻有12x12。而且由於存在鼠標懸停的情況，當鼠標懸停在三個按鈕上時，按鈕的形態可以變化以暗示用戶操作功能。因此，在pc端可操作按鈕的狀態一般都會有常態，懸停態，點擊態和不可點擊，四種狀態

在移動端，在這個時代應該都是使用電容屏了，手指的大小限定了點擊的精確度，因此蘋果官方才會設定44X44的最小點擊區域。雖然大家可以將icon做小，將點擊熱區做大來保證信息展示和操作性的平衡，但移動端是不存在懸停態的。也就是說，用戶在點擊操作之前無法知道點擊之後的反饋。

在用戶體驗的設計中，讓用戶預知操作的反饋，且保證實際反饋符合用戶心理模型預期，這是交互式設計的基礎。因此，移動端的可操作引導性一般會強於Pc端。

常見的可點擊引導，移動端會有矩形，或圓角矩形的按鈕，高純度顏色的文字或icon按鈕。以此暗示用戶這裡是可以點擊操作的。

而pc端則大多數是通過將工具設置在上圖的工具欄位置，或使用常規icon，配合懸停態來告知用戶可操作的屬性。

還是用大家熟悉的網易雲音樂來舉例，從視覺上來說，pc端的左側導航欄，頂部內容切換的視覺引導性明顯低於移動端banner下面的5個入口和底部的5個icon。

3.使用場景的差異-固定位置和可移動位置

桌面端的pc，大多數使用場景都是室內或星巴克之類相對安靜的環境，會有相對較長一段的時間來處理一些重體力事務。在pc使用場景下，人的注意力是相對集中的。由於大量任務存在重複操作的情況，因此在pc端的交互調整或者功能調整必須更慎重，以避免過大的改變導致用戶使用時造成用戶懵逼的情況。

在移動端，大多數使用場景都是碎片化的時間，等車的時候刷一刷，睡覺之前趟床上刷一刷之類的。因此很多手遊一局的時間都是30分鐘以內。

由於涉及位置的移動，移動端可以根據定位玩出比pc端更有趣的玩法。而戶外單手操作的使用場景也限制了用戶的操作範圍。因此相對於pc端的單頁面多任務多信息，移動端也儘可能保證一個頁面只有一個重點，一類信息。

4.對流量網速感知的差異

從ADSL寬帶普及進入大眾家庭開始，大家對電腦的流量就沒有什麼概念了，有的也僅僅是網速和延遲。前者決定看高清無碼片兒爽不爽，後者決定打遊戲卡不卡。因此，pc端產品可以不用這麼強烈考慮主機機能，功耗和流量損耗等等，小廣告彈個視頻，只要你的關閉按鈕不至於太難點，大多數用戶其實都已經習慣了。在網速進一步加速光纖入戶的現在，大家甚至都已經習慣了在線看電影，聽音樂的場景了。這個現象也反映在了幾大視頻網站的會員人數和迅雷等其他下載軟件的股價上。

在移動端，相信大多數移動用戶還記得5元30M流量的噩夢。回想一下我們一路從GPRS，E，3G走到現在的4G，每一次網速的提升都是一次移動互聯網行業的狂歡。流量的載體也從文字博客到了微博，ins圖片社交再到現在紅遍全球的抖音類的視頻社交。

反映在設計上，大家見的最多的應該就是各種APP的加載狀態。在網絡不好或者初次進入的時候，會用灰色塊來暗示用戶產品的結構，然後依次出現文字-圖片加載狀態-圖片。

以上

歡迎大家討論分享自己的經驗。