區(qū)別于網(wǎng)頁和app版本的設計，桌面設計需要根據(jù)用戶使用設備和客戶端產(chǎn)品來進行合理設計。文章分享了招財貓桌面設計的設計步驟并總結(jié)了過程中需要注意的相關(guān)問題，與大家分享。

01 設計理念

招才貓PC桌面版是一款PC端智能招聘管理系統(tǒng)，基于58招聘B端網(wǎng)頁版，為用戶提供更好的視覺交互體驗，能夠很好的提高IM和狀態(tài)通知等功能的時效性，借助于客戶端的性能特點，在響應速度上面也有很高的優(yōu)勢。

同時疏導結(jié)合，利用桌面客戶端的優(yōu)勢對抗黑產(chǎn)軟件。招才貓桌面版給企業(yè)招聘提供一個簡單好用的平臺，給企業(yè)帶來更高效智能的招聘管理體驗。

02 設計方案

我們在疫情期間為了讓用戶盡快體驗到招才貓桌面版，我們在網(wǎng)頁版基礎上，一期規(guī)劃上線6個基礎功能模塊。同時也結(jié)合客戶端擴展性強的特點，使用內(nèi)嵌網(wǎng)頁方式的混合結(jié)構(gòu)，讓用戶在最短的時間體驗到招才貓PC桌面版給他們帶來的方便。

03 視覺定位

招才貓PC桌面版的視覺定位，根據(jù)我們的用戶特性和產(chǎn)品定位，結(jié)合市場調(diào)研和競品分析。最后我們確定了專業(yè)、便捷、高效的產(chǎn)品視覺方案。

04 設計思路

B端桌面客戶端產(chǎn)品如何開始設計？

首先客戶端區(qū)別于網(wǎng)頁和app的是客戶端的基本的軟件界面框架。所以我們在設計招才貓桌面版時，通過分析我們的用戶使用設備和市面上的客戶端產(chǎn)品，結(jié)合我們的產(chǎn)品功能，設定了一個合理的產(chǎn)品基礎尺寸。

在這個基礎尺寸的基礎上我們把頁面劃分為主導航、二級導航、狀態(tài)欄、標題欄、內(nèi)容區(qū)域幾個功能區(qū)域。

導航

導航設計方案，有橫向?qū)Ш脚c縱向?qū)Ш絻煞N主要形式。

橫向?qū)Ш?/p>

優(yōu)點：

由于占空間小，閱讀沉浸感好。多用于官網(wǎng)、媒體、社區(qū)等內(nèi)容型的網(wǎng)站；

通常使用比較少的菜單，簡單，容易記憶；位于頁面頂部，不占用橫向空間；

由于位于頂部，在視覺上更突出，更容易識別；

對于閱讀的視覺干擾小，符合上而下瀏覽的習慣，相對于縱向?qū)Ш讲粫驍嘤脩魧τ趦?nèi)容的沉浸感；

缺點：

擴展性有限，面積較小菜單的廣度和深度受限制；

導航標題必須很短，不適合一級導航很多的信息結(jié)構(gòu)；

在縱向空間上有些犧牲，占用界面高度；

橫向?qū)Ш綉腋≌归_更深層菜單點擊操作后一般會收起，視覺定位沒有縱向菜單二三級菜單外漏那么明顯；

縱向?qū)Ш?/p>

優(yōu)點：

一般位于左側(cè)不會占用屏高，而且內(nèi)容橫向空間有限時，可以折疊收起，空間擴展更強；

在國內(nèi)操作后臺更流行常見，對于菜單欄文本長度承載更大；

操作效率高，在菜單切換時鼠標移動上下距離更短，用戶在操作和瀏覽中可以快速的定位和切換；

擴展性強，可以收納大量、多級菜單。一、二、三級菜單可以更流暢且根據(jù)關(guān)聯(lián)性的展示；

缺點：

菜單數(shù)量多層級復雜時，不容易記憶；菜單選項文字不宜過長，可能會截斷；

受使用者設備影響，整個頁面排版不穩(wěn)定；

最終根據(jù)我們產(chǎn)品需求我們選擇了縱向?qū)Ш降脑O計方式。為后續(xù)功能擴展做好準備；

狀態(tài)欄

狀態(tài)欄，它的定位是全局功能，或者是系統(tǒng)操作。比如關(guān)閉、最大化最小化置頂全局搜索等功能。

標題欄

標題欄是用來放置頁面的名稱的，目的是告訴用戶現(xiàn)在所在的頁面是哪，與整個軟件是什么關(guān)系。受限于頁面高度和實現(xiàn)方式，可以選擇去掉或者和狀態(tài)欄合并。（因為選擇了縱向?qū)Ш剑?/p>

內(nèi)容區(qū)域

內(nèi)容區(qū)域通常是信息的展示和主要操作區(qū)域。

我們的產(chǎn)品在內(nèi)容區(qū)域會根據(jù)場景不同劃分為上中下三個區(qū)域。中間為固定展示區(qū)域上下為操作區(qū)域。下面是以管理頁為例，上部分為常用篩選和搜搜功能，中間為展示信息展示區(qū)域，底部為操作功能區(qū)域。

每個功能區(qū)域模塊清晰的劃分。讓用戶在使用產(chǎn)品的時候能一目了然，減少用戶的操作障礙。

擴展性

在主框架的基礎上，為了增強招才貓桌面版的擴展性，我們設計了內(nèi)置瀏覽器組件。內(nèi)置瀏覽器避免了系統(tǒng)自帶瀏覽器帶來的體驗不一致兼容性等問題。也給用戶帶來了沉浸式體驗。

05 設計的延續(xù)

招才貓桌面客戶端不僅僅是網(wǎng)頁端的功能移植。在確定產(chǎn)品定位和產(chǎn)品風格，為企業(yè)高效智能的提供便捷的招聘管理體驗。我們也延伸出一系列的設計。

后續(xù)隨著產(chǎn)品功能的不斷完善，我們的設計不斷進行完善，最終形成一套完善的B端桌面客戶端升級體系。

06 最后

B端產(chǎn)品重視的用戶體驗往往是直接反映出用戶的使用效率。最終的目標是為了提高用戶的使用效率。

在設計B端產(chǎn)品不但要考慮結(jié)構(gòu)框架以及規(guī)范標準，更要考慮用戶在使用時的易用性(化繁為簡)。畢竟用起來如果不便利，體驗感不好，功能在完整用戶也會產(chǎn)生抵觸。

作者：邰軍軍，UI設計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@邰軍軍

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