您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題后@管理員能讓我們及時了解您的意見

成長值達到300分以上才可以發布喲!~

先看看別人的即刻>

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

原創文章 分類: 經驗/觀點 版權:
19045 447 554 42
2019-06-04
153.4
首頁推薦

終于把書寫完,接下來恢復之前的更文頻率。這篇文章我們來談談移動端和PC端交互設計上的區別。


Image title


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



大屏到小屏


開門見山,移動端和pc端最根本的區別就是屏幕的大小。屏幕的大小直接決定了界面信息量,pc端一個頁面可以展示完全的信息可能需要移動端好幾個頁面來承載。


Image title


可能有的設計師覺得,屏幕尺寸不一樣做自適應不就行了,移動端頁面做長一點,讓用戶滑動就可以了。這是一個非常簡單的處理方案,但是忽略了一個重要前提:用戶愿不愿意滑動?根據埋點數據顯示,多數移動端頁面超過一屏的內容的曝光與點擊量會急劇下滑,說明用戶很少主動滑動去查看一屏以外的內容。對于移動端產品來說,一些重要的內容必須保證用戶在一屏內可以看到。


1)信息架構重構


因此,如果你要為一個pc端網站做一個移動端app,首先要做的就是信息架構的重構。pc端有足夠的空間可以把所有的功能直接展示給用戶,而移動端只能展示一些主要的功能,一些次要的功能需要放在下一層級。


Image title


例如,appstore中用戶是可以評價這條評論對自己是否有幫助的。PC端的處理方式很簡單,直接展示給用戶。而移動端是需要用戶長按這條評論才可以彈出評價列表的,可能很多用戶今天看了這篇文章才發現原來還有這個功能。沒關系,之前雖然不知道,但是并沒有影響你正常使用啊。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的。


2)一個頁面,一個任務


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


Image title


以上面的轉賬流程為例,pc端是直接在一個頁面展示,而移動端是分成了兩個頁面。為什么這樣?把備注/付款說明也放在第一個頁面不行嗎?


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


一個頁面可以完成的任務現在要跳轉好幾個頁面,增加了操作步驟。用戶害怕“內容多”,難道不害怕“步驟多”嗎?不害怕,因為頁面內容量是用戶一眼就可以看出來的,用戶無法立刻感知這個任務有多少步驟。因為無知,所以無畏。等到用戶知道這個任務步驟數的時候,整個任務都已經完成了。


Image title


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


Image title


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


3)突出重要信息


前面我們提到的主要是控制移動端頁面的信息量。頁面信息量少就可以了?當然不是,我們來看一下火車換乘的場景,如果你要從南京去新疆阿克蘇,沒有直達的車次,只能從西安換乘。我們來看看下面兩款產品的處理方式,左邊是12306,右邊是飛豬。12306還是一股pc端風格迎面撲來,問題出現在哪?12306跟飛豬展示信息量差不多,唯一的區別在于12306展示了兩趟車次各自的起止時間,而飛豬只告訴用戶整趟旅程的起止時間。


Image title


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


Image title


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


Image title




鼠標到手指


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


Image title



給你的界面做減法


前面我們主要強調了移動端產品要盡量減少界面中信息量。可不可以在不改變產品信息架構的前提下,通過交互設計上的改動來完成目標呢?我給大家介紹兩個方法:場景化關聯化


1)場景化


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


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


Image title


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


Image title


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


2)關聯化


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


Image title



總結


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

微信公眾號:王M爭

王M爭

微信公眾號:王M爭

6896粉絲/78關注

首頁霸主身經百戰人氣明星分享帝lv.1收藏家lv.3
頁面加載功能設計總結用戶行為路徑設計
9
Finewells

嗯余額寶存了3萬多!

精彩!

掃描二維碼
去手機端查看海報

王M爭

TA已經獲得14枚勛章啦

  • 成就勛章

    • 特別勛章

    • 身份勛章

  • 已擁有

  • 作品

    創造者才是真正的享受者。

  • 經驗

    經驗是一所好學校,可它的學生卻經常曠課。

  • 活躍

    大神都是從圍觀群眾開始的

  • 拓展

    作品、經驗、活躍還不能滿足你?

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了
四川快乐12号码推荐