自互聯(lián)網(wǎng)產(chǎn)品設(shè)計行業(yè)誕生以來，出現(xiàn)了很多平臺設(shè)計規(guī)范和組件模板，但大多是移動端(iOS/Android)和Web端平臺，后來又有了小程序、H5等界面設(shè)計規(guī)范。

到目前為止，這些平臺設(shè)計規(guī)范已然成熟，但唯獨PC(Mac/Windows)客戶端的相關(guān)資料卻很少，只能參考目前已在應(yīng)用市場上的PC客戶端產(chǎn)品。

近期在策劃一個網(wǎng)盤工具的PC客戶端，但發(fā)現(xiàn)市面上相關(guān)設(shè)計規(guī)范較少。

通常，在資源匱乏的階段，想要做一些事情，就需要多去自己摸索和實踐了?，F(xiàn)在將自己這一階段摸索的一些點分享出來，為后浪們后期逐漸完善平臺規(guī)范拋磚引玉。

原型繪制是產(chǎn)品經(jīng)理的基本功，不管在哪個階段的產(chǎn)品經(jīng)理，都應(yīng)該有快速畫出優(yōu)質(zhì)原型圖的能力。

設(shè)計互聯(lián)網(wǎng)產(chǎn)品時，通常會從交互層、業(yè)務(wù)層和數(shù)據(jù)層這三個方面考慮。其中原型圖可以體現(xiàn)產(chǎn)品經(jīng)理的平臺交互體驗?zāi)芰?、對業(yè)務(wù)邏輯的理解能力、以及對產(chǎn)品目標(biāo)用戶使用習(xí)慣的熟悉程度。

平臺交互設(shè)計能力：需熟悉對應(yīng)平臺的設(shè)計規(guī)范，包括界面框架結(jié)構(gòu)、彈窗對話框等交互方式，便于設(shè)計出符合平臺設(shè)計規(guī)范且友好的產(chǎn)品界面；

業(yè)務(wù)功能理解能力：需要明白哪些業(yè)務(wù)是產(chǎn)品的核心業(yè)務(wù)流程，對界面功能的優(yōu)先級展示會有參考，向用戶展示這個產(chǎn)品可以先做什么后做什么，方便用戶快速理解產(chǎn)品的設(shè)計思路；

用戶習(xí)慣熟悉程度：需熟悉目標(biāo)用戶在使用產(chǎn)品時的操作習(xí)慣和最關(guān)注的點，避免設(shè)計規(guī)劃的原型不符合用戶的認(rèn)知，導(dǎo)致學(xué)習(xí)成本增加。

下面就試著從這幾個方面展開，聊聊在設(shè)計PC客戶端時，應(yīng)該要考慮到的那些點。

一、平臺交互設(shè)計能力

界面框架

PC客戶端，其實可以簡單理解為套了原生殼子的網(wǎng)頁界面，這里是指如果在設(shè)計多平臺界面時，產(chǎn)品的界面框架是可以在一定程度上復(fù)用網(wǎng)頁端的，只需要針對PC客戶端調(diào)整為原生樣式即可。

PC客戶端主流的界面框架，大概可以分為3種類型：

1、頂部為工具欄，左側(cè)為導(dǎo)航，其他為點擊工具欄/導(dǎo)航后對應(yīng)的內(nèi)容區(qū)域，如百度網(wǎng)盤、網(wǎng)易云音樂；

2、頂部無工具欄，界面依次是左側(cè)一級和二級導(dǎo)航/操作，右側(cè)是內(nèi)容交互區(qū)域，如網(wǎng)易郵箱；

3、頂部為工具欄和頂部導(dǎo)航，下面則是內(nèi)容交互區(qū)域，如360衛(wèi)士。

因此在設(shè)計客戶端框架時，可以根據(jù)自家產(chǎn)品特性快速搭建產(chǎn)品界面框架。

另外，在設(shè)計框架和主界面時，可以先確定客戶端界面的最小尺寸，以便定位好內(nèi)容結(jié)構(gòu)。在設(shè)計時可以使用柵格系統(tǒng)來進(jìn)行輔助設(shè)計。方便自己在搭建內(nèi)容時，對頂部工具欄、左側(cè)導(dǎo)航和內(nèi)容管理等區(qū)域的間距進(jìn)行合理控制。

設(shè)計規(guī)范

目前主流的設(shè)計平臺即Mac和Windows，因此就需要了解這倆個平臺設(shè)計規(guī)范的差異化。要知道不同系統(tǒng)的特性，知道哪些可以做，又有哪些不可以做。

比較典型的就是，Mac的窗口縮放、關(guān)閉按鈕在界面左上角，而Windows是在右上角，因此這種很基礎(chǔ)的差異點就需要在原型中明確的表現(xiàn)出來。

同時，因為在使用產(chǎn)品時，會經(jīng)常出現(xiàn)模態(tài)/非模態(tài)彈窗等交互，此時類似界面也都要考慮周全。因為彈窗或者對話框一般只需要”關(guān)閉“按鈕，所以，需要搞清楚窗口縮放、關(guān)閉按鈕，需要在哪些場景交互時使用，要在什么位置繪制。

如圖，客戶端的主界面，通常需要縮放和關(guān)閉，方便用戶根據(jù)自己的電腦屏幕調(diào)整界面大小，但是如設(shè)計登錄/注冊時，就沒有必要增加”放大“按鈕。

”如無必要，勿增實體“，如果增加了反而影響體驗和效率，這種思路同樣可以運用在模態(tài)彈窗、對話框等其他界面功能設(shè)計。

其次，就是因為這些不同點造成的排版交互，比如同樣是登錄/注冊界面，在掃碼登錄界面與賬號登錄界面互相切換時，Windows端因為右上角已有關(guān)閉按鈕，所以無法像Mac端一樣在右上角直接點擊切換，就需要更換一種交互方式。

雖然是同一款產(chǎn)品，但也沒有必要追求兩端完全一致。雖然交互樣式不同，但都很好的兼容了平臺的差異化，同時也能更快的達(dá)到相同的目的。

二、業(yè)務(wù)功能理解能力

原型中的業(yè)務(wù)邏輯的表現(xiàn)能力，通常是指在設(shè)計功能流程時，操作是否順暢以快速達(dá)到目的，同時盡量避免邏輯不同功能不閉環(huán)的問題。

客戶端主界面的設(shè)計，要充分考慮目標(biāo)用戶高頻、核心的使用場景，按照優(yōu)先級將此類功能作為一級功能展示，方便用戶快速操作。

根據(jù)交互原則中的”?？硕伞埃河脩魶Q策所需要花費的時間，會隨著選擇的數(shù)量和復(fù)雜性增加而增加。因此在有限的設(shè)計空間中，將產(chǎn)品的業(yè)務(wù)優(yōu)先級劃分是非常重要的，盡量只展示這個產(chǎn)品為用戶提供的核心功能點。

用戶使用工具的任務(wù)首先是快速解決問題、完成任務(wù)，所以產(chǎn)品設(shè)計時，要充分考慮如何高效表達(dá)自己產(chǎn)品的核心業(yè)務(wù)。往往這些點也是能夠與競品形成差異化的地方。

C端產(chǎn)品相比B端產(chǎn)品更容易設(shè)計，因為目標(biāo)用戶單一，通常只需要專注幾個核心流程即可；但在設(shè)計B端如企業(yè)協(xié)同辦公等產(chǎn)品時，就需要考慮某個功能模塊涉及到的各個角色的優(yōu)先級，還需要考慮功能模塊是否需要高內(nèi)聚、低耦合。

三、用戶習(xí)慣熟悉程度

這里主要考慮的是如果有多平臺時，是否需要同步體驗的問題。

以前在PC時代時，人們?yōu)榱俗非螽a(chǎn)品的開發(fā)成本和跨平臺高效應(yīng)用，大多使用網(wǎng)頁前端來承載業(yè)務(wù)，后來進(jìn)入到移動時代，又專注在開發(fā)移動平臺。這樣就導(dǎo)致PC客戶端通常是在已經(jīng)有移動端、網(wǎng)頁端后，為了拓展產(chǎn)品的服務(wù)體驗和場景，才被考慮設(shè)計和開發(fā)的。

所以在設(shè)計PC客戶端時，就要充分考慮是否需要繼承網(wǎng)頁端的操作體驗。這一點并沒有硬性規(guī)范，規(guī)劃既可以基本挪用網(wǎng)頁端的核心業(yè)務(wù)邏輯，也可以相比網(wǎng)頁端或移動端產(chǎn)品進(jìn)行差異化，即可以作為網(wǎng)頁端產(chǎn)品的場景體驗支持，可以提供網(wǎng)頁端做不到的服務(wù)。

當(dāng)然以上兩種思路也是各有利弊，前者可以讓用戶更快的上手，且因為是原生開發(fā)，會在使用體驗上更加流暢；后者則可能為用戶帶來驚喜，同時也會因為功能與原來其他平臺已有的功能關(guān)聯(lián)性不大，而造成學(xué)習(xí)成本的提升。

當(dāng)然，如果是新的產(chǎn)品，可能一時無法確定用戶在新的平臺上將如何操作，那么最簡單的辦法就是參考直接的、有一定用戶規(guī)模的競品的設(shè)計思路，來為自己的產(chǎn)品快速搭建第一版。

比如，因為筆者做的是網(wǎng)盤客戶端，所以會優(yōu)先參考主流網(wǎng)盤工具類的界面框架。

這也剛好符合了交互原則中的”雅各布定律“：即用戶可以將大部分時間花在其他產(chǎn)品上，這意味著這些產(chǎn)品可以滿足用戶的操作需求，同時用戶更希望你的產(chǎn)品可以跟類似產(chǎn)品有相同的操作方法和使用模式。

四、除此之外

客戶端的快捷鍵

在完成了界面設(shè)計之后，PC客戶端原型設(shè)計的任務(wù)還并沒有完成。PC客戶端與網(wǎng)頁端的相同點就是，操作場景都是在PC電腦上，但是不同點在于，PC客戶端相比網(wǎng)頁端，需要給用戶提供更完整、高效的用戶體驗，否則就是在浪費原生開發(fā)的資源。

現(xiàn)在一些網(wǎng)頁端的產(chǎn)品已經(jīng)有使用了快捷鍵，快捷鍵操作也是PC端產(chǎn)品的特性，使用快捷鍵能幫助用戶更高效的使用產(chǎn)品，效率可以事半功倍。所以在設(shè)計完基礎(chǔ)的頁面框架和業(yè)務(wù)邏輯后，不要忘了給客戶端設(shè)計一套高效的快捷鍵操作。

對于工具類產(chǎn)品，用戶的核心需求始終是快速、有效地解決問題。所以快捷鍵的設(shè)計也需要根據(jù)目標(biāo)用戶的高頻操作來設(shè)計好用的快捷鍵。

同時，快捷鍵的設(shè)計需要符合Mac和Windows的快捷按鈕樣式，也要符合系統(tǒng)用戶的操作習(xí)慣。比如Windows端的退格鍵和Mac端的樣式就不同，或者M(jìn)ac系統(tǒng)用戶可能更常使用”command“，而Windows系統(tǒng)用戶更常使用”Ctrl“鍵。

最后的話

以上就是筆者在這次PC客戶端項目中總結(jié)的一些設(shè)計思路，以及容易被忽略的點。至于其他設(shè)計細(xì)節(jié)，就需要深入體驗各平臺的系統(tǒng)操作，以及交互設(shè)計原則、設(shè)計規(guī)范去細(xì)細(xì)雕琢。

對于各大主流平臺的設(shè)計規(guī)范，還需要產(chǎn)品經(jīng)理們時刻關(guān)注，比如蘋果最近新系統(tǒng)的設(shè)計規(guī)范就有很大調(diào)整。產(chǎn)品經(jīng)理們需要經(jīng)常去關(guān)注和理解最新的平臺設(shè)計規(guī)范，幫助自己的產(chǎn)品更好地融入平臺的生態(tài)中去，為用戶提供更優(yōu)質(zhì)、貼合場景和環(huán)境的產(chǎn)品服務(wù)。

關(guān)注“曙Ouba”，微信公眾號“獨鼠一只”。分享獨樹一幟的產(chǎn)品思維、職業(yè)經(jīng)驗