關於PC客戶端設計,產品經理需要知道的那些點

自互聯網產品設計行業誕生以來,出現了很多平臺設計規範和組件模板,但大多是移動端(iOS/Android)和Web端平臺,後來又有了小程序、H5等界面設計規範。到目前為止,這些平臺設計規範已然成熟,但唯獨PC(Mac/Windows)客戶端的相關資料卻很少,只能參考目前已在應用市場上的PC客戶端產品。

近期在策劃一個網盤工具的PC客戶端,但發現市面上相關設計規範較少。

通常,在資源匱乏的階段,想要做一些事情,就需要多去自己摸索和實踐了。現在將自己這一階段摸索的一些點分享出來,為後浪們後期逐漸完善平臺規範拋磚引玉。

關於PC客戶端設計,產品經理需要知道的那些點

原型繪製是產品經理的基本功,不管在哪個階段的產品經理,都應該有快速畫出優質原型圖的能力。

設計互聯網產品時,通常會從交互層、業務層和數據層這三個方面考慮。其中原型圖可以體現產品經理的平臺交互體驗能力、對業務邏輯的理解能力、以及對產品目標用戶使用習慣的熟悉程度。

  • 平臺交互設計能力:需熟悉對應平臺的設計規範,包括界面框架結構、彈窗對話框等交互方式,便於設計出符合平臺設計規範且友好的產品界面;
  • 業務功能理解能力:需要明白哪些業務是產品的核心業務流程,對界面功能的優先級展示會有參考,向用戶展示這個產品可以先做什麼後做什麼,方便用戶快速理解產品的設計思路;
  • 用戶習慣熟悉程度:需熟悉目標用戶在使用產品時的操作習慣和最關注的點,避免設計規劃的原型不符合用戶的認知,導致學習成本增加。

下面就試著從這幾個方面展開,聊聊在設計PC客戶端時,應該要考慮到的那些點。

平臺交互設計能力

界面框架

PC客戶端,其實可以簡單理解為套了原生殼子的網頁界面,這裡是指如果在設計多平臺界面時,產品的界面框架是可以在一定程度上覆用網頁端的,只需要針對PC客戶端調整為原生樣式即可。

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

  1. 頂部為工具欄,左側為導航,其他為點擊工具欄/導航後對應的內容區域;
  2. 頂部無工具欄,界面依次是左側一級和二級導航/操作,右側是內容交互區域;
  3. 頂部為工具欄和頂部導航,下面則是內容交互區域。

因此在設計客戶端框架時,可以根據自家產品特性快速搭建產品界面框架。

另外,在設計框架和主界面時,可以先確定客戶端界面的最小尺寸,以便定位好內容結構。在設計時可以使用柵格系統來進行輔助設計。方便自己在搭建內容時,對頂部工具欄、左側導航和內容管理等區域的間距進行合理控制。

設計規範

目前主流的設計平臺即Mac和Windows,因此就需要了解這兩個平臺設計規範的差異化。要知道不同系統的特性,知道哪些可以做,又有哪些不可以做。

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

同時,因為在使用產品時,會經常出現模態/非模態彈窗等交互,此時類似界面也都要考慮周全。因為彈窗或者對話框一般只需要”關閉“按鈕,所以,需要搞清楚窗口縮放、關閉按鈕,需要在哪些場景交互時使用,要在什麼位置繪製。

關於PC客戶端設計,產品經理需要知道的那些點

如圖,客戶端的主界面,通常需要縮放和關閉,方便用戶根據自己的電腦屏幕調整界面大小,但是如設計登錄/註冊時,就沒有必要增加”放大“按鈕。

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

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

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

關於PC客戶端設計,產品經理需要知道的那些點

業務功能理解能力

關於PC客戶端設計,產品經理需要知道的那些點

原型中的業務邏輯的表現能力,通常是指在設計功能流程時,操作是否順暢以快速達到目的,同時儘量避免邏輯不同功能不閉環的問題。

客戶端主界面的設計,要充分考慮目標用戶高頻、核心的使用場景,按照優先級將此類功能作為一級功能展示,方便用戶快速操作。

根據交互原則中的”希克定律“:用戶決策所需要花費的時間,會隨著選擇的數量和複雜性增加而增加。因此在有限的設計空間中,將產品的業務優先級劃分是非常重要的,儘量只展示這個產品為用戶提供的核心功能點。

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

C端產品相比B端產品更容易設計,因為目標用戶單一,通常只需要專注幾個核心流程即可;但在設計B端如企業協同辦公等產品時,就需要考慮某個功能模塊涉及到的各個角色的優先級,還需要考慮功能模塊是否需要高內聚、低耦合。

用戶習慣熟悉程度

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

以前在PC時代時,人們為了追求產品的開發成本和跨平臺高效應用,大多使用網頁前端來承載業務,後來進入到移動時代,又專注在開發移動平臺。這樣就導致PC客戶端通常是在已經有移動端、網頁端後,為了拓展產品的服務體驗和場景,才被考慮設計和開發的。

所以在設計PC客戶端時,就要充分考慮是否需要繼承網頁端的操作體驗。這一點並沒有硬性規範,規劃既可以基本挪用網頁端的核心業務邏輯,也可以相比網頁端或移動端產品進行差異化,即可以作為網頁端產品的場景體驗支持,可以提供網頁端做不到的服務。

當然以上兩種思路也是各有利弊,前者可以讓用戶更快的上手,且因為是原生開發,會在使用體驗上更加流暢;後者則可能為用戶帶來驚喜,同時也會因為功能與原來其他平臺已有的功能關聯性不大,而造成學習成本的提升。

當然,如果是新的產品,可能一時無法確定用戶在新的平臺上將如何操作,那麼最簡單的辦法就是參考直接的、有一定用戶規模的競品的設計思路,來為自己的產品快速搭建第一版。

比如,因為筆者做的是網盤客戶端,所以會優先參考主流網盤工具類的界面框架。

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

除此之外

關於PC客戶端設計,產品經理需要知道的那些點

客戶端的快捷鍵

在完成了界面設計之後,PC客戶端原型設計的任務還並沒有完成。PC客戶端與網頁端的相同點就是,操作場景都是在PC電腦上,但是不同點在於,PC客戶端相比網頁端,需要給用戶提供更完整、高效的用戶體驗,否則就是在浪費原生開發的資源。

現在一些網頁端的產品已經有使用了快捷鍵,快捷鍵操作也是PC端產品的特性,使用快捷鍵能幫助用戶更高效的使用產品,效率可以事半功倍。所以在設計完基礎的頁面框架和業務邏輯後,不要忘了給客戶端設計一套高效的快捷鍵操作。

對於工具類產品,用戶的核心需求始終是快速、有效地解決問題。所以快捷鍵的設計也需要根據目標用戶的高頻操作來設計好用的快捷鍵。

同時,快捷鍵的設計需要符合Mac和Windows的快捷按鈕樣式,也要符合系統用戶的操作習慣。比如Windows端的退格鍵和Mac端的樣式就不同,或者Mac系統用戶可能更常使用”command“,而Windows系統用戶更常使用”Ctrl“鍵。

最後的話

以上就是筆者在這次PC客戶端項目中總結的一些設計思路,以及容易被忽略的點。至於其他設計細節,就需要深入體驗各平臺的系統操作,以及交互設計原則、設計規範去細細雕琢。

對於各大主流平臺的設計規範,還需要產品經理們時刻關注,比如蘋果最近新系統的設計規範就有很大調整。產品經理們需要經常去關注和理解最新的平臺設計規範,幫助自己的產品更好地融入平臺的生態中去,為用戶提供更優質、貼合場景和環境的產品服務。


分享到:


相關文章: