PC端向移動(dòng)端發(fā)展成為主流趨勢，越來越多的人關(guān)注于移動(dòng)產(chǎn)品的設(shè)計(jì)，而缺少對(duì)PC端產(chǎn)品設(shè)計(jì)的重視。

產(chǎn)品的“設(shè)置”頁面是每個(gè)產(chǎn)品必備的，提供賬戶信息的更改或個(gè)性化設(shè)置功能。

在移動(dòng)端，由于有iOS這個(gè)大家公認(rèn)的典范，大多數(shù)app的設(shè)置頁面交互比較一致。但是在PC端，經(jīng)筆者研究，各個(gè)產(chǎn)品設(shè)置頁的頁面布局和交互是多種多樣的。

本人現(xiàn)在負(fù)責(zé)一個(gè)PC端產(chǎn)品的設(shè)計(jì)，可能由于現(xiàn)在移動(dòng)端是主流趨勢，各家對(duì)于PC端產(chǎn)品就都不太重視了，發(fā)現(xiàn)設(shè)計(jì)得好的又比較主流的PC端產(chǎn)品少之又少。最終在研究中選擇的產(chǎn)品主要為郵箱類（Gmail、QQ郵箱、163郵箱）、社交類（微博、Facebook）和瀏覽器類（Chrome、火狐）。

首先看看移動(dòng)端產(chǎn)品的設(shè)置頁交互：

第一層級(jí)的頁面中顯示所有設(shè)置項(xiàng)目，左側(cè)為項(xiàng)目名稱，右側(cè)為該項(xiàng)目的設(shè)置結(jié)果（用戶未設(shè)置過且無默認(rèn)值的，右側(cè)為空）。開/關(guān)型或者說是/否型設(shè)置項(xiàng)，直接可以在一級(jí)頁面中更改，其他類型設(shè)置項(xiàng)，需跳轉(zhuǎn)二級(jí)頁面更改，即使只有三四個(gè)選項(xiàng)的選擇型設(shè)置項(xiàng)，也是跳轉(zhuǎn)二級(jí)頁面：

在PC端，各家產(chǎn)品的設(shè)計(jì)各有不同。需要考慮的主要問題有以下3點(diǎn)：

1. 進(jìn)入設(shè)置頁時(shí)，默認(rèn)是查看狀態(tài)還是修改狀態(tài)？

QQ郵箱和Gmail的設(shè)置頁默認(rèn)是修改狀態(tài)；微博和Facebook默認(rèn)是查看狀態(tài)，即需要點(diǎn)擊“編輯”才進(jìn)入修改狀態(tài)：

QQ郵箱

Gmail

新浪微博

Facebook

可能有些讀者會(huì)認(rèn)為這與產(chǎn)品屬性有關(guān)——郵箱類產(chǎn)品屬于工具型，用戶進(jìn)入設(shè)置頁的目的就是更改設(shè)置，而社交類產(chǎn)品中會(huì)有很多隱私設(shè)置或者個(gè)性化設(shè)置，用戶進(jìn)入設(shè)置頁可能只是確認(rèn)一下設(shè)置結(jié)果，不一定會(huì)做更改。這是一個(gè)可能的理由。

筆者認(rèn)為，默認(rèn)進(jìn)入修改狀態(tài)會(huì)有誤操作的風(fēng)險(xiǎn)，可能無意中更改了某項(xiàng)設(shè)置，導(dǎo)致了全局的改變；而默認(rèn)進(jìn)入查看狀態(tài)也需要注意在該狀態(tài)中設(shè)置結(jié)果的顯示，要保證在不進(jìn)入編輯狀態(tài)下能準(zhǔn)確完整地展示出設(shè)置結(jié)果。

如下圖中微博的“消息設(shè)置”中露出的設(shè)置結(jié)果，沒有任何信息量，必須點(diǎn)擊“編輯”才能看到設(shè)置結(jié)果。

在能展示完整設(shè)置結(jié)果的前提下，個(gè)人更傾向于默認(rèn)進(jìn)入查看狀態(tài)。

2. 更改完成立即生效，還是需要用戶主動(dòng)保存？

郵箱類和瀏覽器類都是默認(rèn)進(jìn)入修改狀態(tài)，而其中郵箱類的三個(gè)產(chǎn)品，均有“保存”按鈕，用戶更改設(shè)置后需要主動(dòng)保存才生效；瀏覽器類的兩個(gè)產(chǎn)品，均是更改后立即生效。

默認(rèn)為查看狀態(tài)的兩個(gè)產(chǎn)品中，在進(jìn)入修改態(tài)后，兩個(gè)產(chǎn)品均局部展開，局部的右上角有“收起”按鈕。微博做完更改后是需要用戶主動(dòng)保存的，F(xiàn)acebook是修改后立即生效：

此外，筆者還研究了macOS版本的應(yīng)用程序，包括蘋果電腦的系統(tǒng)設(shè)置及一些第三方應(yīng)用程序的設(shè)置頁，發(fā)現(xiàn)基本都是更改后立即生效。筆者的看法是：應(yīng)用程序的設(shè)置項(xiàng)目分為本地的和需要與服務(wù)器交互的兩種。應(yīng)用程序的本地設(shè)置項(xiàng)居多，或者即使暫時(shí)網(wǎng)絡(luò)中斷，也可以在本地保存設(shè)置結(jié)果，等有網(wǎng)時(shí)再與服務(wù)器交互。所以應(yīng)用程序的設(shè)置頁大多設(shè)計(jì)為更改后立即生效。

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

3. “是否”類問題用開關(guān)、復(fù)選框還是兩個(gè)單選項(xiàng)？

在設(shè)置頁中，最常設(shè)置的一種問題類型就是是否啟用某項(xiàng)功能。筆者研究的PC端產(chǎn)品中，對(duì)這種問題的處理有三種方法：兩個(gè)單選項(xiàng)、方形復(fù)選框、和與移動(dòng)端相同的開關(guān)：

首先看兩個(gè)單選項(xiàng)的設(shè)計(jì)：兩個(gè)選項(xiàng)只有一字之差，未免累贅了；并且有些產(chǎn)品提供的兩個(gè)選項(xiàng)字?jǐn)?shù)很多，理解成本還比較高。

再看復(fù)選框的設(shè)計(jì)：“復(fù)選”顧名思義，就是可以多選。復(fù)選框這種控件，多用于可以多選的問題。而一個(gè)設(shè)置項(xiàng)目，只有一個(gè)選項(xiàng)，用復(fù)選框未免和真正可以多選的設(shè)置項(xiàng)有所混淆。

個(gè)人比較推薦的是開關(guān)這種形式。一方面開/關(guān)比閱讀兩個(gè)單選項(xiàng)的理解成本低，另一方面，開關(guān)這種形式與移動(dòng)端主流的形式一致，適用于跨平臺(tái)的產(chǎn)品。

結(jié)語

本文分析了PC端產(chǎn)品設(shè)置頁兩個(gè)關(guān)鍵的交互邏輯和一個(gè)最常見的設(shè)置項(xiàng)目的設(shè)計(jì)。

以上均為個(gè)人觀點(diǎn)，歡迎讀者們參與討論。

本文由 @哆啦易夢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議