图片

工具类产品如何设计?大厂高手总结了5个要点!

发布时间:2023-7-17 16:24:59 浏览次数:

一、环境 Environment

主要区分硬件环境和软件环境

1. 硬件环境:主要影响来源于操作外设和显示器尺寸。不同外设带来不同的操作方式,不同的操作方式由于其人体耗能、协调性(主要指手眼协同)不同,带来的操作体验也完全不同。

工具类产品如何设计?大厂高手总结了5个要点!

上面罗列了常见的办公外设,针对每一种外设各自的特点,我总结了工具设计时需要注意的点,能够帮助提效以及提升体验。

鼠标:市面常见主要是滚轮式和触摸式鼠标,其滚动和触摸的方向和屏幕展示的滚动方向是否一致,在工具的默认配置、更改设置等方面,需要特别考虑。

键盘:快捷键能够极大程度的降低耗能,提高使用效率。设置快捷键要考虑用户的学习成本和记忆成本,同类型的操作最好设置为市面上已有的使用率最高的配置。如果没有用户广泛接受的快捷键组合,自定义配置的时候需要考虑组合按键的数量和按键之间的距离,降低每次操作的成本。选择键盘上面的字母按键时,对于带有明确含义的操作,可以考虑其英文首字母,降低用户学习和记忆成本。

注意:在配置所有官方快捷键操作,一定要规避掉系统级别的通用快捷键。

触摸板:触摸板在大多数场景下和鼠标的作用相同,但是其多点触控的能力,增加了更多操作方式的可能性,在设计手势操作时,其对象运动规则需要和鼠标的运动规则保持逻辑一致。设置快捷操作的基本思路和键盘快捷键一样。

触摸屏:触摸屏大大小小,种类繁多。触控媒介也分为手指触控和其他电容设备,最常见的就是电容笔。具体会在下面展开。

顺带一提,键盘、鼠标、触摸板等耗能都比较低,但协同性也较低。触摸屏的协同性很高,但是随着屏幕尺寸的增大,其人体耗能会大幅增加,不适合长时间使用。

此外,随着 VR,全息投影等设备的普及,这些设备进入协同办公场景的可能也在增加,不过其物理反馈和高耗能操作是亟待解决的问题。

工具类产品如何设计?大厂高手总结了5个要点!

前面提到的,触摸屏随着屏幕尺寸的增加,耗能也会增加,通俗来说就是用着会累,尤其屏幕在竖直方向的时候。在使用触摸屏的时候,需要关注一下误触操作的可能性,尤其设备需要两只手持的时候,当然大部分误触判断的问题在系统和硬件层面就会解决。最后,关注一下完成这个动作是不是会要用到设备实体按键。

触摸屏常见的操作是二维的,但是也有一些屏幕会有压感,另外电容笔的压感和角度识别,这些都增加了在更多维度进行功能设计的可能,如果你有需要的话都可以考虑。

2. 软件环境:主要影响来源于操作系统和窗口尺寸。不同的操作系统会使用户形成不同的使用习惯,如果你的产品是跨平台、跨系统的,需要考虑这一点。

工具类产品如何设计?大厂高手总结了5个要点!

了解你的用户常用设备,常用系统之后,接下来就需要了解他们的常用设备尺寸,这对整体布局来说非常重要,这里提供的网站可以按地区、时间查询用户屏幕的分辨率,帮助你定位合适的「基准尺寸」。

工具类产品如何设计?大厂高手总结了5个要点!

操作系统除了操作逻辑有差别,屏幕分辨率带来的显示效果差别也是主要影响用户体验的原因。举个例子:Windows 设备常见的系统分辨率等比缩放,会使得原本产品针对高清大屏的布局变得混乱和局促。

在我们确定了基准尺寸,完成了工具的基本框架之后,需要考虑用户的使用场景会不会有经常改变窗口尺寸的可能?会不会有跨系统协作的可能?会不会有跨平台适配的可能?如果有,上下限在哪里?针对这些问题我们要确定相应的适配策略。我常用的设计方法列出了以下三种:模组化,响应式布局,针对设备/系统分别设计。每一种方式都有各自的适用场景,根据你的产品特点选择,这里就不展开了。

工具类产品如何设计?大厂高手总结了5个要点!

二、用户 Uesrs

前面提到关于软硬件的设计要点,其实和用户人群息息相关。这里我想要介绍的是关注视觉细节的一些点。常见的 B 端工具大部分还不用做适老化设计,但是我们需要关注弱视群体,通用型的办公软件可能会有很多近视,色弱人群使用。还要关注用户会不会长时间使用,会让他们的眼睛不舒服么?

1. 用户人群的视力:前面提到确定产品框架的「基准尺寸」,那内容的「基准尺寸」呢?默认字号和间距给定多少合适?你的用户能不能看清楚这是一个很重要的问题,当然这可能需要调研和测试。对于一般的工具,合适的大小可以参考市面的主要竞品,没有竞品也可以扩大范围,参考其他工具产品,后续关注反馈在迭代中摸索。如果你很了解你的用户人群一般视力情况,则可以做偏小/偏大的整体设计。

工具类产品如何设计?大厂高手总结了5个要点!

2. 用户人群的辨色力:你的用户是不是有可能出现色盲或者色弱。如果你的产品是一个通用型的工具,在使用特定含义的颜色时候会不会对他们造成困扰。假设颜色的分辨会有带来一定的操作困难,后果的风险有多少,这些是需要评估的,根据评估结果来确定视觉表达的信息密度,颜色不足以传达信息的时候可能要增加图形、文字、声音或其他形式来增强信号。

工具类产品如何设计?大厂高手总结了5个要点!

主题色:如果你的用户不需要考虑上面的情况,那你需要关注颜色的表意。用户对基本颜色有共识,合理利用这点可以帮助有效信息传递,例如你的产品如果和金融相关或者有很多的数据趋势展示,在确定品牌或主题色尽量需要规避掉红/绿,如果不这样做,后续你的系统设计起来将会非常麻烦。

背景色:在一定程度上能起到整体提升/降低画面亮度的作用,对视觉疲劳也会有很大影响。

工具类产品如何设计?大厂高手总结了5个要点!

如果你的产品需要适配黑夜模式,可以考虑以下两种色彩调校方法。

工具类产品如何设计?大厂高手总结了5个要点!

3. 视疲劳:如果你的用户需要长时间使用你的产品,那你需要保证他们的眼睛相对舒服,减少高对比的颜色刺激,可以多选用黄绿色彩倾向的主基调,适当降低整体的饱和度和对比度。在视觉纵深上面也可以多做减法,减少层级关系带来的注意力疲劳感。

工具类产品如何设计?大厂高手总结了5个要点!

三、呈现 Present

在一个确定面积的窗口内,如何平衡工具承载的信息量和展示的功能?我总结了 4 个需要关注的方向

1. 共享空间:简单的说就是当信息过载时,采用折叠/切换/显隐/遮盖/位移等方式展示用户当前关注的功能内容。

工具类产品如何设计?大厂高手总结了5个要点!

2. 用户自定义:我们在实际项目中发现,很多新的功能没有成熟的产品可以参考,但是又无法确定哪一种方案更好,而且对于功能越多,越复杂的工具产品,这种情况出现的概率越高,对此我们可以将定义配置的权限开放给用户,收集好数据帮我我们迭代产品。

工具类产品如何设计?大厂高手总结了5个要点!

3. 静态表达:经常利用的是色彩、图形、样式、文字等的组合,以下是经常出现的方法组合,可以参考制定你的设计规范。

工具类产品如何设计?大厂高手总结了5个要点!

4. 动态反馈:下面列出的是我经常使用的方法,可供参考。

工具类产品如何设计?大厂高手总结了5个要点!

四、易用性 Usability

这个问题很具体,但是在项目中,我个人总结的一个基本原则是“平等的对待用户,不要教育用户”。工具是帮助用户解决问题的,让用户会使用即可,不要试图把产品逻辑都教给用户,让用户精通工具那是产品说明书的工作。

工具类产品如何设计?大厂高手总结了5个要点!

此外,在系统层面要给用户兜底。帮助用户遇见可能的风险和损失,在对应的位置设置拦截/撤销机制。考虑定时或实施存储。考虑历史版本。

工具类产品如何设计?大厂高手总结了5个要点!

五、协作 Cooperation

在线协作办公已经成为最主流的趋势,其中:

轻量化的工具更容易获得用户,最核心的功能往往能满足大部分人的全部工作场景。

跨端/跨平台/跨系统:用户不受限于硬件设备和软件系统,能获得更一致的体验。

云存储与云计算:你的终端只需要和云端链接就能享受超级的存储和算力,对终端性能要求大大降低,不卡了,效率高了,体验自然更好了。

工具类产品如何设计?大厂高手总结了5个要点!

同时,你需要关注一些细节,这只是其中一小部分,更多的内容需要在具体产品中慢慢挖掘。

工具类产品如何设计?大厂高手总结了5个要点!

最后 Finally

我个人想说,做好一款工具是一件长期的事。要时刻关注你的用户反馈。要经常使用你自己的产品,你会有很多发现。


一、环境 Environment主要区分硬件环境和软件环境1. 硬件环境:主要影响来源于操作外设和显示器尺寸。不同外设带来不同的操作方式,不同的操作方式由于其人体耗能、协调性(主要指手眼协同)不同,带
工具类产品如何设计?大厂高手总结了5个要点!
联系荣尚网络顾问
免费获得专属《网站策划方案》及报价详情。

多份参考,总有益处!

立即在线咨询

或拨打:134 0536 2733

企业微信客服
联系荣尚网络顾问
免费获得专属《网站策划方案》及报价详情。

多份参考,总有益处!

立即在线咨询

或拨打:134 0536 2733

企业微信客服