区别于网页和app版本的设计,桌面设计需要根据用户使用设备和客户端产品来进行合理设计。文章分享了招财猫桌面设计的设计步骤并总结了过程中需要注意的相关问题,与大家分享。

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

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

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

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

导航

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

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

横向导航

优点:

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

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

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

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

缺点:

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

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

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

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

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

纵向导航

优点:

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

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

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

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

缺点:

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

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

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

状态栏

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

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

标题栏

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

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

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

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

内容区域

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

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

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

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

扩展性

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

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

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

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

06 最后

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

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

作者:邰军军,UI设计师

本文来源于人人都是产品经理合作媒体@58用户体验设计中心(微信公众号@58UXD),作者@邰军军

题图来自Unsplash,基于CC0协议




阻力设计在产品中的应用

阻力设计在产品中的应用

阻力是指物体在流体中相对运动所产生与运动方向相反的力,不仅在自然间中常见,在互联网中也广泛存在。本文作者从五个角度,深入分析阻力设计在产品中的应用,希望对你...

2020-06-18
如何成为一个合格的数据架构师?

如何成为一个合格的数据架构师?

数据架构师在互联网行业中是个很重要的职位,是企业数据资产最重要的“奠基者”。那么,如何成为一个合格的数据架构师呢?本文作者基于自身经历,从三个方面展开介绍,推...

2020-06-18
倒推“抖音短视频”APP产品需求文档

倒推“抖音短视频”APP产品需求文档

文章是倒推“抖音短视频”APP产品需求文档,但由于作者是第一次写需求文档,所以仅对核心需求进行了需求分析与说明。一起来看看~ 目录: 一、文档综述 1.1文档属性 1.2产...

2020-06-18
微信“拍一拍”,真的是一个没什么用的功能吗?

微信“拍一拍”,真的是一个没什么用的功能吗?

昨天微信上线了“拍一拍”功能,用户点击2次头像,会产生头像抖动,震动反馈,且在聊天框中显示“XX拍了拍XX”。 这个功能推出后,很多微信群都在疯狂拍一拍,引起了一波拍...

2020-06-18
数据大屏设计师,我不信你没有这些困惑(上)

数据大屏设计师,我不信你没有这些困惑(上)

从事互联网行业的人,每天都在接收新知识,时常也会有迷惑的时候,尤其是数据大屏这样比较少有人踏足的领域。本文作者以自身经历出发,对数据大屏设计提出了自己的一点...

2020-06-18
客户关系管理的15个模型总结(下)

客户关系管理的15个模型总结(下)

对于ToB产品,仅仅基于用户需求来设计产品架构是远远不够的。B端产品服务的是有着几年,甚至几十年管理积淀的企业,必须依靠一定的理论知识来支撑系统的设计规划。本文...

2020-06-18
B端产品设计:价值主张与需求对应的价值

B端产品设计:价值主张与需求对应的价值

B端产品的需求来源于场景,产品经理通过满足客户需求从而产生价值。因此,SaaS产品经理面对扑面而来的需求时,应当更清晰理解并评判需求的价值。 01 2008年,著名商业...

2020-06-18
以知乎为例,探讨未来产品设计的几大变化

以知乎为例,探讨未来产品设计的几大变化

知乎作为一个典型的问答社区,它本身反映了内容社区产品的很多典型问题。本文以知乎为例,探讨社区类产品未来发展的一些变化,对内容社区感兴趣的童鞋不要错过。 前段...

2020-06-18
如何用产品思维打造线上课程?

如何用产品思维打造线上课程?

如何用产品思维来给自己打造一个线上课程呢?本文从市场调研、课程开发、运营推广、成交这几个方面分享如何打造自己的课程,希望对大家有所帮助~ “地摊经济”重出江湖,...

2020-06-18
「武侠连载」营销中心设计——优惠券

「武侠连载」营销中心设计——优惠券

优惠券是常见的一种营销推广的方式,但是你真的了解它吗?本文作者以武侠故事的形式,对优惠券展开了生动的分析,对优惠券感兴趣的童鞋不要错过哦。 (武侠情节接上文“...

2020-06-18
金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

本文作者从实际工作实践出发,结合案例等分享了电商金融支付财务融合中的基本概念和相关原理解析,包括:订单、账单、交易流水和账知识解构,供大家一同参考和学习。 ...

2020-06-18
关于卡片设计的分析与思考

关于卡片设计的分析与思考

卡片是APP常见的设计形式,它既有好处也有弊端,因此需要根据场景和内容确定展现形式。本文从四个方面对卡片设计展开分析,推荐给对卡片设计感兴趣的童鞋阅读。 卡片是...

2020-06-17
内容型产品中,付费会员功能如何设计?

内容型产品中,付费会员功能如何设计?

付费会员制度让用户预付会员费,将钱留在平台,那么未来一定会有消费行为,那么会员制度要如何设计,才能激励用户付费呢? 01 为什么要做付费会员? 讨论这个问题之前...

2020-06-16
文字社区是否可以拥有弹幕?

文字社区是否可以拥有弹幕?

从社区产品的角度来思考,弹幕功能对于内容生产方,内容消费方以及平台方而言各自有什么意义?图文内容社区是否有机会拥有弹幕呢?如果可以发弹幕,用怎样的形式呢?本...

2020-06-16
FMS财务系统收支结算总结

FMS财务系统收支结算总结

本文按照FMS收支结算划分,结算流程分类及各系统交互,财务系统内部结算基础能力,收支结算整体结构的顺序来依次介绍,总结财务系统收支结算的结构,和一些作者的个人思...

2020-06-16
如何迅速提升用户好评?试试这三种方法

如何迅速提升用户好评?试试这三种方法

小编推荐:如何提高一个产品的用户评分,改变大家对这个产品的印象呢?本文作者给大家介绍了三个概念:用户体验地图、峰终定律和服务蓝图,并详细解释了该如何使用这三...

2020-06-16
对工具型产品易学习与易使用的思考

对工具型产品易学习与易使用的思考

小编推荐:易学习是指怎么让新用户的学习成本降低,能够很快地掌握产品的使用,它的前提是足够简单和容易理解。而易使用是指,如何让用户快速、高效地完成一项任务,达...

2020-06-16
比对象还懂你!推荐算法为啥这么准?

比对象还懂你!推荐算法为啥这么准?

信息过度和广告过多的社会中,推荐算法的使用也就显得理所当然,但是它是如何做到了解用户的呢?本文从用户画像的定义和设计出发,结合实际案例,深入浅出地阐述了基于...

2020-06-15
B端平台产品需要培养的4种意识

B端平台产品需要培养的4种意识

对于许多刚入行不久的产品经理来说,B端平台产品是比较有难度的一项工作。本文作者基于自己的工作经历,提出了四点关于B端平台产品需要培养的4种意识,希望对你有帮助。...

2020-06-15
广告系列:保留价

广告系列:保留价

在一次拍卖中如果所有买家的报价均小于卖家的估价时,则拍卖品不出售由卖家保留,此时卖家的估价就是保留价,也叫底价,全称市场保留价。对于卖家来说,保留价的设置保...

2020-06-15