設(shè)計(jì)沉思錄丨招才貓桌面版設(shè)計(jì)套路
區(qū)別于網(wǎng)頁(yè)和app版本的設(shè)計(jì),桌面設(shè)計(jì)需要根據(jù)用戶使用設(shè)備和客戶端產(chǎn)品來(lái)進(jìn)行合理設(shè)計(jì)。文章分享了招財(cái)貓桌面設(shè)計(jì)的設(shè)計(jì)步驟并總結(jié)了過程中需要注意的相關(guān)問題,與大家分享。
01 設(shè)計(jì)理念
招才貓PC桌面版是一款PC端智能招聘管理系統(tǒng),基于58招聘B端網(wǎng)頁(yè)版,為用戶提供更好的視覺交互體驗(yàn),能夠很好的提高IM和狀態(tài)通知等功能的時(shí)效性,借助于客戶端的性能特點(diǎn),在響應(yīng)速度上面也有很高的優(yōu)勢(shì)。
同時(shí)疏導(dǎo)結(jié)合,利用桌面客戶端的優(yōu)勢(shì)對(duì)抗黑產(chǎn)軟件。招才貓桌面版給企業(yè)招聘提供一個(gè)簡(jiǎn)單好用的平臺(tái),給企業(yè)帶來(lái)更高效智能的招聘管理體驗(yàn)。
02 設(shè)計(jì)方案
我們?cè)谝咔槠陂g為了讓用戶盡快體驗(yàn)到招才貓桌面版,我們?cè)诰W(wǎng)頁(yè)版基礎(chǔ)上,一期規(guī)劃上線6個(gè)基礎(chǔ)功能模塊。同時(shí)也結(jié)合客戶端擴(kuò)展性強(qiáng)的特點(diǎn),使用內(nèi)嵌網(wǎng)頁(yè)方式的混合結(jié)構(gòu),讓用戶在最短的時(shí)間體驗(yàn)到招才貓PC桌面版給他們帶來(lái)的方便。
03 視覺定位
招才貓PC桌面版的視覺定位,根據(jù)我們的用戶特性和產(chǎn)品定位,結(jié)合市場(chǎng)調(diào)研和競(jìng)品分析。最后我們確定了專業(yè)、便捷、高效的產(chǎn)品視覺方案。
04 設(shè)計(jì)思路
B端桌面客戶端產(chǎn)品如何開始設(shè)計(jì)?
首先客戶端區(qū)別于網(wǎng)頁(yè)和app的是客戶端的基本的軟件界面框架。所以我們?cè)谠O(shè)計(jì)招才貓桌面版時(shí),通過分析我們的用戶使用設(shè)備和市面上的客戶端產(chǎn)品,結(jié)合我們的產(chǎn)品功能,設(shè)定了一個(gè)合理的產(chǎn)品基礎(chǔ)尺寸。
在這個(gè)基礎(chǔ)尺寸的基礎(chǔ)上我們把頁(yè)面劃分為主導(dǎo)航、二級(jí)導(dǎo)航、狀態(tài)欄、標(biāo)題欄、內(nèi)容區(qū)域幾個(gè)功能區(qū)域。
導(dǎo)航
導(dǎo)航設(shè)計(jì)方案,有橫向?qū)Ш脚c縱向?qū)Ш絻煞N主要形式。
橫向?qū)Ш?/p>
優(yōu)點(diǎn):
由于占空間小,閱讀沉浸感好。多用于官網(wǎng)、媒體、社區(qū)等內(nèi)容型的網(wǎng)站;
通常使用比較少的菜單,簡(jiǎn)單,容易記憶;位于頁(yè)面頂部,不占用橫向空間;
由于位于頂部,在視覺上更突出,更容易識(shí)別;
對(duì)于閱讀的視覺干擾小,符合上而下瀏覽的習(xí)慣,相對(duì)于縱向?qū)Ш讲粫?huì)打斷用戶對(duì)于內(nèi)容的沉浸感;
缺點(diǎn):
擴(kuò)展性有限,面積較小菜單的廣度和深度受限制;
導(dǎo)航標(biāo)題必須很短,不適合一級(jí)導(dǎo)航很多的信息結(jié)構(gòu);
在縱向空間上有些犧牲,占用界面高度;
橫向?qū)Ш綉腋≌归_更深層菜單點(diǎn)擊操作后一般會(huì)收起,視覺定位沒有縱向菜單二三級(jí)菜單外漏那么明顯;
縱向?qū)Ш?/p>
優(yōu)點(diǎn):
一般位于左側(cè)不會(huì)占用屏高,而且內(nèi)容橫向空間有限時(shí),可以折疊收起,空間擴(kuò)展更強(qiáng);
在國(guó)內(nèi)操作后臺(tái)更流行常見,對(duì)于菜單欄文本長(zhǎng)度承載更大;
操作效率高,在菜單切換時(shí)鼠標(biāo)移動(dòng)上下距離更短,用戶在操作和瀏覽中可以快速的定位和切換;
擴(kuò)展性強(qiáng),可以收納大量、多級(jí)菜單。一、二、三級(jí)菜單可以更流暢且根據(jù)關(guān)聯(lián)性的展示;
缺點(diǎn):
菜單數(shù)量多層級(jí)復(fù)雜時(shí),不容易記憶;菜單選項(xiàng)文字不宜過長(zhǎng),可能會(huì)截?cái)啵?/p>
受使用者設(shè)備影響,整個(gè)頁(yè)面排版不穩(wěn)定;
最終根據(jù)我們產(chǎn)品需求我們選擇了縱向?qū)Ш降脑O(shè)計(jì)方式。為后續(xù)功能擴(kuò)展做好準(zhǔn)備;
狀態(tài)欄
狀態(tài)欄,它的定位是全局功能,或者是系統(tǒng)操作。比如關(guān)閉、最大化最小化置頂全局搜索等功能。
標(biāo)題欄
標(biāo)題欄是用來(lái)放置頁(yè)面的名稱的,目的是告訴用戶現(xiàn)在所在的頁(yè)面是哪,與整個(gè)軟件是什么關(guān)系。受限于頁(yè)面高度和實(shí)現(xiàn)方式,可以選擇去掉或者和狀態(tài)欄合并。(因?yàn)檫x擇了縱向?qū)Ш剑?/p>
內(nèi)容區(qū)域
內(nèi)容區(qū)域通常是信息的展示和主要操作區(qū)域。
我們的產(chǎn)品在內(nèi)容區(qū)域會(huì)根據(jù)場(chǎng)景不同劃分為上中下三個(gè)區(qū)域。中間為固定展示區(qū)域上下為操作區(qū)域。下面是以管理頁(yè)為例,上部分為常用篩選和搜搜功能,中間為展示信息展示區(qū)域,底部為操作功能區(qū)域。
每個(gè)功能區(qū)域模塊清晰的劃分。讓用戶在使用產(chǎn)品的時(shí)候能一目了然,減少用戶的操作障礙。
擴(kuò)展性
在主框架的基礎(chǔ)上,為了增強(qiáng)招才貓桌面版的擴(kuò)展性,我們?cè)O(shè)計(jì)了內(nèi)置瀏覽器組件。內(nèi)置瀏覽器避免了系統(tǒng)自帶瀏覽器帶來(lái)的體驗(yàn)不一致兼容性等問題。也給用戶帶來(lái)了沉浸式體驗(yàn)。
05 設(shè)計(jì)的延續(xù)
招才貓桌面客戶端不僅僅是網(wǎng)頁(yè)端的功能移植。在確定產(chǎn)品定位和產(chǎn)品風(fēng)格,為企業(yè)高效智能的提供便捷的招聘管理體驗(yàn)。我們也延伸出一系列的設(shè)計(jì)。
后續(xù)隨著產(chǎn)品功能的不斷完善,我們的設(shè)計(jì)不斷進(jìn)行完善,最終形成一套完善的B端桌面客戶端升級(jí)體系。
06 最后
B端產(chǎn)品重視的用戶體驗(yàn)往往是直接反映出用戶的使用效率。最終的目標(biāo)是為了提高用戶的使用效率。
在設(shè)計(jì)B端產(chǎn)品不但要考慮結(jié)構(gòu)框架以及規(guī)范標(biāo)準(zhǔn),更要考慮用戶在使用時(shí)的易用性(化繁為簡(jiǎn))。畢竟用起來(lái)如果不便利,體驗(yàn)感不好,功能在完整用戶也會(huì)產(chǎn)生抵觸。
作者:邰軍軍,UI設(shè)計(jì)師
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心(微信公眾號(hào)@58UXD),作者@邰軍軍
題圖來(lái)自Unsplash,基于CC0協(xié)議
有做 iphonxr 適配么
1、上下的黑框讓我覺得我是安卓手機(jī)
2、打字我看不到我輸入框的信息
3、業(yè)務(wù)是什么東西呢?無(wú)緣無(wú)故凍結(jié)我的賬戶,什么東西?
58招才貓 用戶反饋?lái)?yè)面 請(qǐng)問這個(gè)頁(yè)面上哪個(gè)產(chǎn)品經(jīng)理做的,小學(xué)僧水平?