设计沉思录丨招才猫桌面版设计套路 - 图1

    01

    设计理念

    招才猫 PC 桌面版是一款 PC 端智能招聘管理系统,基于 58 招聘 B 端网页版,为用户提供更好的视觉交互体验,能够很好的提高 IM 和状态通知等功能的时效性,借助于客户端的性能特点,在响应速度上面也有很高的优势。同时疏导结合,利用桌面客户端的优势对抗黑产软件。招才猫桌面版给企业招聘提供一个简单好用的平台,给企业带来更高效智能的招聘管理体验。

    02

    设计方案

    我们在疫情期间为了让用户尽快体验到招才猫桌面版,我们在网页版基础上,一期规划上线 6 个基础功能模块。同时也结合客户端扩展性强的特点,使用内嵌网页方式的混合结构,让用户在最短的时间体验到招才猫 PC 桌面版给他们带来的方便。

    03

    视觉定位

    招才猫 PC 桌面版的视觉定位,根据我们的用户特性和产品定位,结合市场调研和竞品分析。最后我们确定了专业、便捷、高效的产品视觉方案。

    04

    设计思路

    · B 端桌面客户端产品如何开始设计?

    首先客户端区别于网页和 app 的是客户端的基本的软件界面框架。所以我们在设计招才猫桌面版时,通过分析我们的用户使用设备和市面上的客户端产品,结合我们的产品功能,设定了一个合理的产品基础尺寸。

    设计沉思录丨招才猫桌面版设计套路 - 图2

    在这个基础尺寸的基础上我们把页面划分为主导航、二级导航、状态栏、标题栏、内容区域几个功能区域。

    设计沉思录丨招才猫桌面版设计套路 - 图3

    · 导航

    导航设计方案,有横向导航与纵向导航两种主要形式。

    设计沉思录丨招才猫桌面版设计套路 - 图4

    横向导航

    优点:

    由于占空间小,阅读沉浸感好。多用于官网、媒体、社区等内容型的网站;

    通常使用比较少的菜单,简单,容易记忆;位于页面顶部,不占用横向空间;

    由于位于顶部,在视觉上更突出,更容易识别;

    对于阅读的视觉干扰小,符合上而下浏览的习惯,相对于纵向导航不会打断用户对于内容的沉浸感;

    缺点:

    扩展性有限,面积较小菜单的广度和深度受限制;

    导航标题必须很短,不适合一级导航很多的信息结构;

    在纵向空间上有些牺牲,占用界面高度;

    横向导航悬浮展开更深层菜单点击操作后一般会收起,视觉定位没有纵向菜单二三级菜单外漏那么明显;

    设计沉思录丨招才猫桌面版设计套路 - 图5

    纵向导航

    优点:

    一般位于左侧不会占用屏高,而且内容横向空间有限时,可以折叠收起,空间扩展更强;

    在国内操作后台更流行常见,对于菜单栏文本长度承载更大;

    操作效率高,在菜单切换时鼠标移动上下距离更短,用户在操作和浏览中可以快速的定位和切换;

    扩展性强,可以收纳大量、多级菜单。一、二、三级菜单可以更流畅且根据关联性的展示;

    缺点:

    菜单数量多层级复杂时,不容易记忆;菜单选项文字不宜过长,可能会截断;

    受使用者设备影响,整个页面排版不稳定;

    最终根据我们产品需求我们选择了纵向导航的设计方式。为后续功能扩展做好准备;

    · 状态栏

    状态栏,它的定位是全局功能,或者是系统操作。比如关闭、最大化最小化置顶全局搜索等功能。

    设计沉思录丨招才猫桌面版设计套路 - 图6

    · 标题栏

    标题栏是用来放置页面的名称的,目的是告诉用户现在所在的页面是哪,与整个软件是什么关系。受限于页面高度和实现方式,可以选择去掉或者和状态栏合并。(因为选择了纵向导航)

    设计沉思录丨招才猫桌面版设计套路 - 图7

    设计沉思录丨招才猫桌面版设计套路 - 图8

    设计沉思录丨招才猫桌面版设计套路 - 图9

    · 内容区域

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

    我们的产品在内容区域会根据场景不同划分为上中下三个区域。中间为固定展示区域上下为操作区域。下面是以管理页为例,上部分为常用筛选和搜搜功能,中间为展示信息展示区域,底部为操作功能区域。

    设计沉思录丨招才猫桌面版设计套路 - 图10

    每个功能区域模块清晰的划分。让用户在使用产品的时候能一目了然,减少用户的操作障碍。

    · 扩展性

    在主框架的基础上,为了增强招才猫桌面版的扩展性,我们设计了内置浏览器组件。内置浏览器避免了系统自带浏览器带来的体验不一致兼容性等问题。也给用户带来了沉浸式体验。

    设计沉思录丨招才猫桌面版设计套路 - 图11

    05

    设计的延续

    招才猫桌面客户端不仅仅是网页端的功能移植。在确定产品定位和产品风格,为企业高效智能的提供便捷的招聘管理体验。我们也延伸出一系列的设计。

    设计沉思录丨招才猫桌面版设计套路 - 图12

    后续随着产品功能的不断完善,我们的设计不断进行完善,最终形成一套完善的 B 端桌面客户端升级体系。

    06

    最后

    B 端产品重视的用户体验往往是直接反映出用户的使用效率。最终的目标是为了提高用户的使用效率。

    在设计 B 端产品不但要考虑结构框架以及规范标准,更要考虑用户在使用时的易用性 (化繁为简)。毕竟用起来如果不便利,体验感不好,功能在完整用户也会产生抵触。

    设计沉思录丨招才猫桌面版设计套路 - 图13

    设计沉思录丨招才猫桌面版设计套路 - 图14
    https://mp.weixin.qq.com/s/kS_JzPn45T2MBgBlp-6tSw