PC客户端設計中,產品經理需要知道的幾點

編輯導語:雖然網絡上的設計資料很多,但是與PC客户端相關的設計資料我們卻並不常見。對於產品經理來説,在設計PC客户端時,有哪些需要注意的點呢?本文作者結合工作經驗,為我們總結了PC客户端項目中的一些設計思路,以及容易被忽略的點。

PC客户端設計中,產品經理需要知道的幾點

自互聯網產品設計行業誕生以來,出現了很多平台設計規範和組件模板,但大多是移動端(iOS/Android)和Web端平台;後來又有了小程序、H5等界面設計規範。

到目前為止,這些平台設計規範已然成熟,但唯獨PC(Mac/Windows)客户端的相關資料卻很少,只能參考目前已在應用市場上的PC客户端產品。

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

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

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

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

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

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

一、平台交互設計能力1. 界面框架

PC客户端,其實可以簡單理解為套了原生殼子的網頁界面。

這裏是指如果在設計多平台界面時,產品的界面框架是可以在一定程度上覆用網頁端的,只需要針對PC客户端調整為原生樣式即可。

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

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

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

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

2. 設計規範

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

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

同時,因為在使用產品時,會經常出現模態/非模態彈窗等交互,此時類似界面也都要考慮周全。

因為彈窗或者對話框一般只需要”關閉“按鈕,所以需要搞清楚窗口縮放、關閉按鈕,需要在哪些場景交互時使用,要在什麼位置繪製。

PC客户端設計中,產品經理需要知道的幾點

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

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

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

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

PC客户端設計中,產品經理需要知道的幾點
二、業務功能理解能力

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

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

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

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

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

三、用户習慣熟悉程度

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

以前在PC時代時,人們為了追求產品的開發成本和跨平台高效應用,大多使用網頁前端來承載業務;後來進入到移動時代,又專注在開發移動平台。

這樣就導致PC客户端通常是在已經有移動端、網頁端後,為了拓展產品的服務體驗和場景,才被考慮設計和開發的。

所以在設計PC客户端時,就要充分考慮是否需要繼承網頁端的操作體驗。

這一點並沒有硬性規範,規劃既可以基本挪用網頁端的核心業務邏輯,也可以相比網頁端或移動端產品進行差異化,即可以作為網頁端產品的場景體驗支持,可以提供網頁端做不到的服務。

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

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

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

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

四、其他1. 客户端的快捷鍵

在完成了界面設計之後,PC客户端原型設計的任務還並沒有完成。

PC客户端與網頁端的相同點就是,操作場景都是在PC電腦上,但是不同點在於,PC客户端相比網頁端,需要給用户提供更完整、高效的用户體驗,否則就是在浪費原生開發的資源。

現在一些網頁端的產品已經有使用了快捷鍵,快捷鍵操作也是PC端產品的特性,使用快捷鍵能幫助用户更高效的使用產品,效率可以事半功倍。

所以在設計完基礎的頁面框架和業務邏輯後,不要忘了給客户端設計一套高效的快捷鍵操作。

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

同時,快捷鍵的設計需要符合Mac和Windows的快捷按鈕樣式,也要符合系統用户的操作習慣。

比如Windows端的退格鍵和Mac端的樣式就不同,或者Mac系統用户可能更常使用”command“,而Windows系統用户更常使用”Ctrl“鍵。

2. 最後的話

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

對於各大主流平台的設計規範,還需要產品經理們時刻關注,比如蘋果最近新系統的設計規範就有很大調整。

產品經理們需要經常去關注和理解最新的平台設計規範,幫助自己的產品更好地融入平台的生態中去,為用户提供更優質、貼合場景和環境的產品服務。

#專欄作家#

王曙,微信公眾號:獨鼠一隻,人人都是產品經理專欄作家。通俗產品人,分享獨樹一幟的產品思維、職業經驗。

本文原創發佈於人人都是產品經理,未經許可,禁止轉載。

題圖來自 Pexels,基於CC0協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 3329 字。

轉載請註明: PC客户端設計中,產品經理需要知道的幾點 - 楠木軒