• EN
香港:(852)3749 9734
廣州: (020)3834 3713
[email protected]

新聞資料

APP直接套用PC端設計?APP和PC端的交互設計有何區別

以往一直負責PC端網頁設計的設計師,突然改做APP設計,很容易會把PC端網頁設計的一些理念放到APP設計上,使整個APP設計的用戶體驗顯得十分尷尬。那麼,APP和PC端的交互設計有何區別呢?下面就讓香港網頁製作公司簡單說說。

區別一:大屏到小屏

APP直接套用PC端設計?APP和PC端的交互設計有何區別

首先,APP和PC端的網頁設計最大不同就是屏幕大小,而屏幕大小也直接決定界面信息量,PC端一個頁面能展示的全部信息,可能需要APP好幾個頁面去承載。

可能有設計師認為,屏幕尺寸不一樣做自適應就可以啦,APP頁面設計長點,讓用戶滑動都無所謂哦!這個方法當然可行,而且還非常簡單粗暴,但你有問用戶是否願意滑動頁面嗎?

根據埋點數據顯示,APP頁面超過一屏內容,其曝光率與點擊量都會急劇下滑,這說明用戶很少主動滑動查看一屏以外的內容。因此APP中的重要信息必須保證用戶能在一屏內看到。

從大屏到小屏,設計師需要考慮哪些方面?

1.信息架構重構

APP直接套用PC端設計?APP和PC端的交互設計有何區別

如果你要為PC端網站做一個手機APP,首先要做的就是信息架構重構。PC端有足夠的空間可以把所有功能直接展示給用戶,但手機屏幕小只能展示重要功能,其次次要功能則需要放在下一層級。

2.一個頁面,一個任務

APP直接套用PC端設計?APP和PC端的交互設計有何區別

手機用戶使用環境複雜多變,容易受到干擾,如果頁面中展示過多的信息量,容易讓用戶混亂。同樣的幾個輸入框,在PC端可能只佔頁面的1/4,但在手機佔了一整個頁面,這給用戶帶來的觀感是完全不一樣的,慢慢頁面很容易會讓用戶產生焦慮。

這就需要將一個頁面可完成的任務,改為跳轉好幾個頁面,增加操作步驟。有設計師可能會擔心用戶會因為步驟多而退出,事實上頁面內容量是用戶一眼就可以看出來的,但用戶無法立刻感知這個任務有多少個步驟,等到用戶意識到這個任務步驟數時,整個任務可能已經完成了。

此外,前後步驟關聯性較強的任務,建議不要分頁展示,如「輸入手機號」和「輸入手機驗證碼」,如果它們分別放到兩個頁面,若用戶遲遲沒有收到驗證碼時,要麼就是手機號碼輸錯,要麼就是網絡故障,當然還有其他原因,但用戶並不清楚自己到底是什麼原因導致的,有可能需要返回上一層查看找出原因,這會增加用戶的負擔。如果「輸入手機號」和「輸入手機驗證碼」放到同一個頁面,這就會簡單很多了。

3.突出重要內容

APP直接套用PC端設計?APP和PC端的交互設計有何區別

頁面信息量多,我們需要控制頁面的信息量,如果頁面信息量少,我們則需要突出重要內容。

舉個例子,火車換乘時,用戶最關心的就是出發/到達站、出發/到達時間和票價。但12306就像PC端直接換成APP一樣,所有信息都屬於同一層級,無法突出主次,界面中出現過多配色,增加用戶的信息獲取成本;飛豬則將其他次要信息進行降低灰度,把用戶的焦點放在重點信息上。

區別二:鼠標到手指

APP直接套用PC端設計?APP和PC端的交互設計有何區別

PC端用戶與界面進行交互靠的是鼠標,手機用戶靠的是手指,相對來說,鼠標操作會更加精準,因此手機界面中的元素尺寸和間距都會比PC端大。例如:如果APP界面的輸入框還沿用PC端的樣式,Icon也很小,用戶用手指點擊時很容易會誤操作。

區別三:給界面做減法

之前我們提到APP設計要盡量減少界面的信息量,那可不可以在不改變產品信息架構的前提下,通過交互設計改動完成目的呢?當然可以1

1.場景化

如果頁面中內容很多,但是用戶真正感興趣且會與之交互的內容很少,那麼我們就可以突出用戶關注度高的內容;反之如果關注度低,那麼我們也可以適當地隱藏。

APP直接套用PC端設計?APP和PC端的交互設計有何區別

例如:知乎中,用戶在搜索結果頁滑動大概3屏後,會出現「向知友提問」按鈕。這是因為用戶滑動了3屏,說明用戶可能對當前搜索結果不滿意,這是引導用戶去提問,用戶的意願會更高。當如果我們全程都展示這個提問按鈕,可能會減少用戶的實際瀏覽區域,並造成干擾。

除了同一個流程,需要根據用戶使用場景不同,而提供不同功能外;同一個功能,我們也要根據用戶使用場景不同,而選擇不同展示方式。

APP直接套用PC端設計?APP和PC端的交互設計有何區別

再以「知乎」舉例,為了方便用戶可以快速查看下一個回答,知乎給用戶提供一個浮動按鈕,當用戶剛進入這個頁面,為了降低用戶的學習成本,知乎會直接告訴用戶這個按鈕的功能;當用戶開始滑動進入閱讀答案,按鈕就會被縮小,避免對界面信息造成遮擋。

2.關聯化

APP直接套用PC端設計?APP和PC端的交互設計有何區別

梳理信息之間的關聯性,將相互關聯的信息整合在一起,減少頁面中的信息量。例如:支付寶賬單的月份篩選功能,之前用戶需要點擊日曆圖標,現在用戶只需直接點擊月份就可以了。

其實,PC端和手機APP的交互設計,無論是布局還是用戶操作體驗,都有很大區別,設計師應該根據用戶的操作習慣來設計APP,直接套用PC端那套設計方式,明顯不合適。