設計沉思錄丨招才貓桌面版設計套路

區別於網頁和app版本的設計，桌面設計需要根據用户使用設備和客户端產品來進行合理設計。文章分享了招財貓桌面設計的設計步驟並總結了過程中需要注意的相關問題，與大家分享。

招才貓PC桌面版是一款PC端智能招聘管理系統，基於58招聘B端網頁版，為用户提供更好的視覺交互體驗，能夠很好的提高IM和狀態通知等功能的時效性，藉助於客户端的性能特點，在響應速度上面也有很高的優勢。

同時疏導結合，利用桌面客户端的優勢對抗黑產軟件。招才貓桌面版給企業招聘提供一個簡單好用的平台，給企業帶來更高效智能的招聘管理體驗。

我們在疫情期間為了讓用户儘快體驗到招才貓桌面版，我們在網頁版基礎上，一期規劃上線6個基礎功能模塊。同時也結合客户端擴展性強的特點，使用內嵌網頁方式的混合結構，讓用户在最短的時間體驗到招才貓PC桌面版給他們帶來的方便。

招才貓PC桌面版的視覺定位，根據我們的用户特性和產品定位，結合市場調研和競品分析。最後我們確定了專業、便捷、高效的產品視覺方案。

首先客户端區別於網頁和app的是客户端的基本的軟件界面框架。所以我們在設計招才貓桌面版時，通過分析我們的用户使用設備和市面上的客户端產品，結合我們的產品功能，設定了一個合理的產品基礎尺寸。

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

導航設計方案，有橫向導航與縱向導航兩種主要形式。

橫向導航

優點：

由於佔空間小，閲讀沉浸感好。多用於官網、媒體、社區等內容型的網站；

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

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

對於閲讀的視覺干擾小，符合上而下瀏覽的習慣，相對於縱向導航不會打斷用户對於內容的沉浸感；

缺點：

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

導航標題必須很短，不適合一級導航很多的信息結構；

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

橫向導航懸浮展開更深層菜單點擊操作後一般會收起，視覺定位沒有縱向菜單二三級菜單外漏那麼明顯；

縱向導航

優點：

一般位於左側不會佔用屏高，而且內容橫向空間有限時，可以摺疊收起，空間擴展更強；

在國內操作後台更流行常見，對於菜單欄文本長度承載更大；

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

擴展性強，可以收納大量、多級菜單。一、二、三級菜單可以更流暢且根據關聯性的展示；

缺點：

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

受使用者設備影響，整個頁面排版不穩定；

最終根據我們產品需求我們選擇了縱向導航的設計方式。為後續功能擴展做好準備；

狀態欄，它的定位是全局功能，或者是系統操作。比如關閉、最大化最小化置頂全局搜索等功能。

標題欄是用來放置頁面的名稱的，目的是告訴用户現在所在的頁面是哪，與整個軟件是什麼關係。受限於頁面高度和實現方式，可以選擇去掉或者和狀態欄合併。（因為選擇了縱向導航）

內容區域通常是信息的展示和主要操作區域。

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

每個功能區域模塊清晰的劃分。讓用户在使用產品的時候能一目瞭然，減少用户的操作障礙。

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

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

後續隨着產品功能的不斷完善，我們的設計不斷進行完善，最終形成一套完善的B端桌面客户端升級體系。

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

在設計B端產品不但要考慮結構框架以及規範標準，更要考慮用户在使用時的易用性(化繁為簡)。畢竟用起來如果不便利，體驗感不好，功能在完整用户也會產生牴觸。

作者：邰軍軍，UI設計師

本文來源於人人都是產品經理合作媒體@58用户體驗設計中心（微信公眾號@58UXD），作者@邰軍軍

題圖來自Unsplash，基於CC0協議