自互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)行業(yè)誕生以來行疏，出現(xiàn)了很多平臺(tái)設(shè)計(jì)規(guī)范和組件模板，但大多是移動(dòng)端(iOS/Android)和Web端平臺(tái)套像，后來又有了小程序酿联、H5等界面設(shè)計(jì)規(guī)范。
到目前為止夺巩，這些平臺(tái)設(shè)計(jì)規(guī)范已然成熟贞让，但唯獨(dú)PC(Mac/Windows)客戶端的相關(guān)資料卻很少，只能參考目前已在應(yīng)用市場(chǎng)上的PC客戶端產(chǎn)品柳譬。
近期在策劃一個(gè)網(wǎng)盤工具的PC客戶端喳张，但發(fā)現(xiàn)市面上相關(guān)設(shè)計(jì)規(guī)范較少。
通常美澳，在資源匱乏的階段销部，想要做一些事情摸航，就需要多去自己摸索和實(shí)踐了。現(xiàn)在將自己這一階段摸索的一些點(diǎn)分享出來舅桩，為后浪們后期逐漸完善平臺(tái)規(guī)范拋磚引玉酱虎。
原型繪制是產(chǎn)品經(jīng)理的基本功，不管在哪個(gè)階段的產(chǎn)品經(jīng)理擂涛，都應(yīng)該有快速畫出優(yōu)質(zhì)原型圖的能力读串。
設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品時(shí)，通常會(huì)從交互層撒妈、業(yè)務(wù)層和數(shù)據(jù)層這三個(gè)方面考慮恢暖。其中原型圖可以體現(xiàn)產(chǎn)品經(jīng)理的平臺(tái)交互體驗(yàn)?zāi)芰Α?duì)業(yè)務(wù)邏輯的理解能力狰右、以及對(duì)產(chǎn)品目標(biāo)用戶使用習(xí)慣的熟悉程度胀茵。
平臺(tái)交互設(shè)計(jì)能力：需熟悉對(duì)應(yīng)平臺(tái)的設(shè)計(jì)規(guī)范，包括界面框架結(jié)構(gòu)挟阻、彈窗對(duì)話框等交互方式，便于設(shè)計(jì)出符合平臺(tái)設(shè)計(jì)規(guī)范且友好的產(chǎn)品界面峭弟；
業(yè)務(wù)功能理解能力：需要明白哪些業(yè)務(wù)是產(chǎn)品的核心業(yè)務(wù)流程附鸽，對(duì)界面功能的優(yōu)先級(jí)展示會(huì)有參考，向用戶展示這個(gè)產(chǎn)品可以先做什么后做什么瞒瘸，方便用戶快速理解產(chǎn)品的設(shè)計(jì)思路坷备；
用戶習(xí)慣熟悉程度：需熟悉目標(biāo)用戶在使用產(chǎn)品時(shí)的操作習(xí)慣和最關(guān)注的點(diǎn)，避免設(shè)計(jì)規(guī)劃的原型不符合用戶的認(rèn)知情臭，導(dǎo)致學(xué)習(xí)成本增加省撑。
下面就試著從這幾個(gè)方面展開，聊聊在設(shè)計(jì)PC客戶端時(shí)俯在，應(yīng)該要考慮到的那些點(diǎn)竟秫。
一、平臺(tái)交互設(shè)計(jì)能力
界面框架
PC客戶端跷乐，其實(shí)可以簡(jiǎn)單理解為套了原生殼子的網(wǎng)頁界面肥败，這里是指如果在設(shè)計(jì)多平臺(tái)界面時(shí)，產(chǎn)品的界面框架是可以在一定程度上復(fù)用網(wǎng)頁端的愕提，只需要針對(duì)PC客戶端調(diào)整為原生樣式即可馒稍。
PC客戶端主流的界面框架，大概可以分為3種類型：
1浅侨、頂部為工具欄纽谒，左側(cè)為導(dǎo)航，其他為點(diǎn)擊工具欄/導(dǎo)航后對(duì)應(yīng)的內(nèi)容區(qū)域如输，如百度網(wǎng)盤鼓黔、網(wǎng)易云音樂央勒；
2、頂部無工具欄请祖，界面依次是左側(cè)一級(jí)和二級(jí)導(dǎo)航/操作订歪，右側(cè)是內(nèi)容交互區(qū)域，如網(wǎng)易郵箱肆捕；
3刷晋、頂部為工具欄和頂部導(dǎo)航，下面則是內(nèi)容交互區(qū)域慎陵，如360衛(wèi)士眼虱。
因此在設(shè)計(jì)客戶端框架時(shí)，可以根據(jù)自家產(chǎn)品特性快速搭建產(chǎn)品界面框架席纽。
另外捏悬，在設(shè)計(jì)框架和主界面時(shí)，可以先確定客戶端界面的最小尺寸润梯，以便定位好內(nèi)容結(jié)構(gòu)过牙。在設(shè)計(jì)時(shí)可以使用柵格系統(tǒng)來進(jìn)行輔助設(shè)計(jì)。方便自己在搭建內(nèi)容時(shí)纺铭，對(duì)頂部工具欄寇钉、左側(cè)導(dǎo)航和內(nèi)容管理等區(qū)域的間距進(jìn)行合理控制。
設(shè)計(jì)規(guī)范
目前主流的設(shè)計(jì)平臺(tái)即Mac和Windows舶赔，因此就需要了解這倆個(gè)平臺(tái)設(shè)計(jì)規(guī)范的差異化扫倡。要知道不同系統(tǒng)的特性，知道哪些可以做竟纳，又有哪些不可以做撵溃。
比較典型的就是，Mac的窗口縮放锥累、關(guān)閉按鈕在界面左上角缘挑，而Windows是在右上角，因此這種很基礎(chǔ)的差異點(diǎn)就需要在原型中明確的表現(xiàn)出來桶略。
同時(shí)卖哎，因?yàn)樵谑褂卯a(chǎn)品時(shí)，會(huì)經(jīng)常出現(xiàn)模態(tài)/非模態(tài)彈窗等交互删性，此時(shí)類似界面也都要考慮周全亏娜。因?yàn)閺棿盎蛘邔?duì)話框一般只需要”關(guān)閉“按鈕，所以蹬挺，需要搞清楚窗口縮放维贺、關(guān)閉按鈕，需要在哪些場(chǎng)景交互時(shí)使用巴帮，要在什么位置繪制溯泣。
如圖虐秋，客戶端的主界面，通常需要縮放和關(guān)閉垃沦，方便用戶根據(jù)自己的電腦屏幕調(diào)整界面大小客给，但是如設(shè)計(jì)登錄/注冊(cè)時(shí)，就沒有必要增加”放大“按鈕肢簿。
”如無必要靶剑，勿增實(shí)體“，如果增加了反而影響體驗(yàn)和效率池充，這種思路同樣可以運(yùn)用在模態(tài)彈窗桩引、對(duì)話框等其他界面功能設(shè)計(jì)。
其次收夸，就是因?yàn)檫@些不同點(diǎn)造成的排版交互坑匠，比如同樣是登錄/注冊(cè)界面，在掃碼登錄界面與賬號(hào)登錄界面互相切換時(shí)卧惜，Windows端因?yàn)橛疑辖且延嘘P(guān)閉按鈕厘灼，所以無法像Mac端一樣在右上角直接點(diǎn)擊切換，就需要更換一種交互方式咽瓷。
雖然是同一款產(chǎn)品设凹，但也沒有必要追求兩端完全一致。雖然交互樣式不同忱详，但都很好的兼容了平臺(tái)的差異化，同時(shí)也能更快的達(dá)到相同的目的跺涤。
二匈睁、業(yè)務(wù)功能理解能力
原型中的業(yè)務(wù)邏輯的表現(xiàn)能力，通常是指在設(shè)計(jì)功能流程時(shí)桶错，操作是否順暢以快速達(dá)到目的航唆，同時(shí)盡量避免邏輯不同功能不閉環(huán)的問題。
客戶端主界面的設(shè)計(jì)院刁，要充分考慮目標(biāo)用戶高頻糯钙、核心的使用場(chǎng)景，按照優(yōu)先級(jí)將此類功能作為一級(jí)功能展示退腥，方便用戶快速操作任岸。
根據(jù)交互原則中的”希克定律“：用戶決策所需要花費(fèi)的時(shí)間狡刘，會(huì)隨著選擇的數(shù)量和復(fù)雜性增加而增加享潜。因此在有限的設(shè)計(jì)空間中，將產(chǎn)品的業(yè)務(wù)優(yōu)先級(jí)劃分是非常重要的嗅蔬，盡量只展示這個(gè)產(chǎn)品為用戶提供的核心功能點(diǎn)剑按。
用戶使用工具的任務(wù)首先是快速解決問題疾就、完成任務(wù)，所以產(chǎn)品設(shè)計(jì)時(shí)艺蝴，要充分考慮如何高效表達(dá)自己產(chǎn)品的核心業(yè)務(wù)猬腰。往往這些點(diǎn)也是能夠與競(jìng)品形成差異化的地方。
C端產(chǎn)品相比B端產(chǎn)品更容易設(shè)計(jì)猜敢，因?yàn)槟繕?biāo)用戶單一姑荷，通常只需要專注幾個(gè)核心流程即可；但在設(shè)計(jì)B端如企業(yè)協(xié)同辦公等產(chǎn)品時(shí)锣枝，就需要考慮某個(gè)功能模塊涉及到的各個(gè)角色的優(yōu)先級(jí)厢拭，還需要考慮功能模塊是否需要高內(nèi)聚、低耦合撇叁。
三供鸠、用戶習(xí)慣熟悉程度
這里主要考慮的是如果有多平臺(tái)時(shí)，是否需要同步體驗(yàn)的問題陨闹。
以前在PC時(shí)代時(shí)楞捂，人們?yōu)榱俗非螽a(chǎn)品的開發(fā)成本和跨平臺(tái)高效應(yīng)用，大多使用網(wǎng)頁前端來承載業(yè)務(wù)趋厉，后來進(jìn)入到移動(dòng)時(shí)代寨闹，又專注在開發(fā)移動(dòng)平臺(tái)。這樣就導(dǎo)致PC客戶端通常是在已經(jīng)有移動(dòng)端君账、網(wǎng)頁端后繁堡，為了拓展產(chǎn)品的服務(wù)體驗(yàn)和場(chǎng)景，才被考慮設(shè)計(jì)和開發(fā)的乡数。
所以在設(shè)計(jì)PC客戶端時(shí)椭蹄，就要充分考慮是否需要繼承網(wǎng)頁端的操作體驗(yàn)。這一點(diǎn)并沒有硬性規(guī)范净赴，規(guī)劃既可以基本挪用網(wǎng)頁端的核心業(yè)務(wù)邏輯绳矩，也可以相比網(wǎng)頁端或移動(dòng)端產(chǎn)品進(jìn)行差異化，即可以作為網(wǎng)頁端產(chǎn)品的場(chǎng)景體驗(yàn)支持玖翅，可以提供網(wǎng)頁端做不到的服務(wù)翼馆。
當(dāng)然以上兩種思路也是各有利弊，前者可以讓用戶更快的上手金度，且因?yàn)槭窃_發(fā)应媚，會(huì)在使用體驗(yàn)上更加流暢；后者則可能為用戶帶來驚喜猜极，同時(shí)也會(huì)因?yàn)楣δ芘c原來其他平臺(tái)已有的功能關(guān)聯(lián)性不大珍特，而造成學(xué)習(xí)成本的提升。
當(dāng)然魔吐，如果是新的產(chǎn)品扎筒，可能一時(shí)無法確定用戶在新的平臺(tái)上將如何操作莱找，那么最簡(jiǎn)單的辦法就是參考直接的、有一定用戶規(guī)模的競(jìng)品的設(shè)計(jì)思路嗜桌，來為自己的產(chǎn)品快速搭建第一版奥溺。
比如，因?yàn)楣P者做的是網(wǎng)盤客戶端骨宠，所以會(huì)優(yōu)先參考主流網(wǎng)盤工具類的界面框架浮定。
這也剛好符合了交互原則中的”雅各布定律“：即用戶可以將大部分時(shí)間花在其他產(chǎn)品上，這意味著這些產(chǎn)品可以滿足用戶的操作需求层亿，同時(shí)用戶更希望你的產(chǎn)品可以跟類似產(chǎn)品有相同的操作方法和使用模式桦卒。
四、除此之外
客戶端的快捷鍵
在完成了界面設(shè)計(jì)之后匿又，PC客戶端原型設(shè)計(jì)的任務(wù)還并沒有完成方灾。PC客戶端與網(wǎng)頁端的相同點(diǎn)就是，操作場(chǎng)景都是在PC電腦上碌更，但是不同點(diǎn)在于裕偿，PC客戶端相比網(wǎng)頁端，需要給用戶提供更完整痛单、高效的用戶體驗(yàn)嘿棘，否則就是在浪費(fèi)原生開發(fā)的資源。
現(xiàn)在一些網(wǎng)頁端的產(chǎn)品已經(jīng)有使用了快捷鍵旭绒，快捷鍵操作也是PC端產(chǎn)品的特性鸟妙，使用快捷鍵能幫助用戶更高效的使用產(chǎn)品，效率可以事半功倍挥吵。所以在設(shè)計(jì)完基礎(chǔ)的頁面框架和業(yè)務(wù)邏輯后重父，不要忘了給客戶端設(shè)計(jì)一套高效的快捷鍵操作。
對(duì)于工具類產(chǎn)品蔫劣，用戶的核心需求始終是快速坪郭、有效地解決問題个从。所以快捷鍵的設(shè)計(jì)也需要根據(jù)目標(biāo)用戶的高頻操作來設(shè)計(jì)好用的快捷鍵脉幢。
同時(shí)，快捷鍵的設(shè)計(jì)需要符合Mac和Windows的快捷按鈕樣式嗦锐，也要符合系統(tǒng)用戶的操作習(xí)慣嫌松。比如Windows端的退格鍵和Mac端的樣式就不同，或者M(jìn)ac系統(tǒng)用戶可能更常使用”command“奕污，而Windows系統(tǒng)用戶更常使用”Ctrl“鍵萎羔。
最后的話
以上就是筆者在這次PC客戶端項(xiàng)目中總結(jié)的一些設(shè)計(jì)思路，以及容易被忽略的點(diǎn)碳默。至于其他設(shè)計(jì)細(xì)節(jié)贾陷，就需要深入體驗(yàn)各平臺(tái)的系統(tǒng)操作缘眶，以及交互設(shè)計(jì)原則、設(shè)計(jì)規(guī)范去細(xì)細(xì)雕琢髓废。
對(duì)于各大主流平臺(tái)的設(shè)計(jì)規(guī)范巷懈，還需要產(chǎn)品經(jīng)理們時(shí)刻關(guān)注，比如蘋果最近新系統(tǒng)的設(shè)計(jì)規(guī)范就有很大調(diào)整慌洪。產(chǎn)品經(jīng)理們需要經(jīng)常去關(guān)注和理解最新的平臺(tái)設(shè)計(jì)規(guī)范顶燕，幫助自己的產(chǎn)品更好地融入平臺(tái)的生態(tài)中去，為用戶提供更優(yōu)質(zhì)冈爹、貼合場(chǎng)景和環(huán)境的產(chǎn)品服務(wù)涌攻。
關(guān)注“曙Ouba”，微信公眾號(hào)“獨(dú)鼠一只”频伤。分享獨(dú)樹一幟的產(chǎn)品思維恳谎、職業(yè)經(jīng)驗(yàn)
