如何做好PC端產品設置頁的設計?

PMBear

PC端向移動端發展成為主流趨勢,越來越多的人關注於移動產品的設計,而缺少對PC端產品設計的重視。

產品的“設置”頁面是每個產品必備的,提供賬戶信息的更改或個性化設置功能。

在移動端,由於有iOS這個大家公認的典範,大多數app的設置頁面交互比較一致。但是在PC端,經筆者研究,各個產品設置頁的頁面布局和交互是多種多樣的。

本人現在負責一個PC端產品的設計,可能由於現在移動端是主流趨勢,各家對於PC端產品就都不太重視了,發現設計得好的又比較主流的PC端產品少之又少。最終在研究中選擇的產品主要為郵箱類(Gmail、QQ郵箱、163郵箱)、社交類(微博、Facebook)和瀏覽器類(Chrome、火狐)。

首先看看移動端產品的設置頁交互:

PC端產品設置頁的設計

第一層級的頁面中顯示所有設置項目,左側為項目名稱,右側為該項目的設置結果(用戶未設置過且無默認值的,右側為空)。開/關型或者說是/否型設置項,直接可以在一級頁面中更改,其他類型設置項,需跳轉二級頁面更改,即使只有三四個選項的選擇型設置項,也是跳轉二級頁面:

PC端產品設置頁的設計

在PC端,各家產品的設計各有不同。需要考慮的主要問題有以下3點:

1. 進入設置頁時,默認是查看狀態還是修改狀態?

QQ郵箱和Gmail的設置頁默認是修改狀態;微博和Facebook默認是查看狀態,即需要點擊“編輯”才進入修改狀態:

PC端產品設置頁的設計

QQ郵箱

PC端產品設置頁的設計

Gmail

PC端產品設置頁的設計

新浪微博

PC端產品設置頁的設計

Facebook

可能有些讀者會認為這與產品屬性有關——郵箱類產品屬於工具型,用戶進入設置頁的目的就是更改設置,而社交類產品中會有很多隱私設置或者個性化設置,用戶進入設置頁可能只是確認一下設置結果,不一定會做更改。這是一個可能的理由。

筆者認為,默認進入修改狀態會有誤操作的風險,可能無意中更改了某項設置,導致了全局的改變;而默認進入查看狀態也需要注意在該狀態中設置結果的顯示,要保證在不進入編輯狀態下能準確完整地展示出設置結果

如下圖中微博的“消息設置”中露出的設置結果,沒有任何信息量,必須點擊“編輯”才能看到設置結果。

PC端產品設置頁的設計

在能展示完整設置結果的前提下,個人更傾向於默認進入查看狀態。

2. 更改完成立即生效,還是需要用戶主動保存?

郵箱類和瀏覽器類都是默認進入修改狀態,而其中郵箱類的三個產品,均有“保存”按鈕,用戶更改設置后需要主動保存才生效;瀏覽器類的兩個產品,均是更改后立即生效。

PC端產品設置頁的設計

PC端產品設置頁的設計

默認為查看狀態的兩個產品中,在進入修改態后,兩個產品均局部展開,局部的右上角有“收起”按鈕。微博做完更改后是需要用戶主動保存的,Facebook是修改後立即生效:

PC端產品設置頁的設計

此外,筆者還研究了macOS版本的應用程序,包括蘋果電腦的系統設置及一些第三方應用程序的設置頁,發現基本都是更改后立即生效。筆者的看法是:應用程序的設置項目分為本地的和需要與服務器交互的兩種。應用程序的本地設置項居多,或者即使暫時網絡中斷,也可以在本地保存設置結果,等有網時再與服務器交互。所以應用程序的設置頁大多設計為更改后立即生效。

而網頁版的產品,每一個更改都需要與服務器交互,即使如Facebook這種做成了更改后立即生效的效果,實際上也是進行了一次用戶沒有感知的服務器交互。而用戶在使用網頁版產品的過程中已經被教育出了進行任何操作均需手動提交的習慣,所以,可能提供主動保存的按鈕,才會讓用戶心安,覺得更改確實生效了或者,如果設計產品時想免除用戶手動提交的麻煩,那麼應該用戶每做一次更改后都出現一次toast提示,給予用戶操作的反饋。

3. “是否”類問題用開關、複選框還是兩個單選項?

在設置頁中,最常設置的一種問題類型就是是否啟用某項功能。筆者研究的PC端產品中,對這種問題的處理有三種方法:兩個單選項、方形複選框、和與移動端相同的開關:

PC端產品設置頁的設計

首先看兩個單選項的設計:兩個選項只有一字之差,未免累贅了;並且有些產品提供的兩個選項字數很多,理解成本還比較高。

PC端產品設置頁的設計

再看複選框的設計:“複選”顧名思義,就是可以多選。複選框這種控件,多用於可以多選的問題。而一個設置項目,只有一個選項,用複選框未免和真正可以多選的設置項有所混淆。

PC端產品設置頁的設計

個人比較推薦的是開關這種形式。一方面開/關比閱讀兩個單選項的理解成本低,另一方面,開關這種形式與移動端主流的形式一致,適用於跨平台的產品。

結語

本文分析了PC端產品設置頁兩個關鍵的交互邏輯和一個最常見的設置項目的設計。

以上均為個人觀點,歡迎讀者們參與討論。

 

PMBear

发表评论