云辦公和在線(xiàn)協(xié)作已經(jīng)成為目前互聯(lián)網(wǎng)工作的主要形態(tài)和重要趨勢(shì)，各種工具類(lèi)產(chǎn)品也成了互聯(lián)網(wǎng)工作的“基建設(shè)施”。優(yōu)秀的工具能幫助效率獲得極大提升。那如何設(shè)計(jì)好用的工具產(chǎn)品呢？下面是個(gè)人一點(diǎn)淺薄的經(jīng)驗(yàn)和大家分享。

相關(guān)設(shè)計(jì)干貨：

各種工作涉及到的工具產(chǎn)品各不相同，具體的工作流、產(chǎn)品邏輯、交互邏輯和視覺(jué)細(xì)節(jié)也有各自的特殊要求。如何設(shè)計(jì)好一款好用的工具產(chǎn)品，涉及到的內(nèi)容會(huì)非常多。篇幅有限，我自己概括一些通用的要點(diǎn)，主要有以下 5 點(diǎn)：環(huán)境（Environment）、用戶(hù)（Users）、呈現(xiàn)（Present）、易用性（Usability）、云協(xié)作（Cooperation）。

一、環(huán)境 Environment

主要區(qū)分硬件環(huán)境和軟件環(huán)境

1. 硬件環(huán)境：主要影響來(lái)源于操作外設(shè)和顯示器尺寸。不同外設(shè)帶來(lái)不同的操作方式，不同的操作方式由于其人體耗能、協(xié)調(diào)性（主要指手眼協(xié)同）不同，帶來(lái)的操作體驗(yàn)也完全不同。

上面羅列了常見(jiàn)的辦公外設(shè)，針對(duì)每一種外設(shè)各自的特點(diǎn)，我總結(jié)了工具設(shè)計(jì)時(shí)需要注意的點(diǎn)，能夠幫助提效以及提升體驗(yàn)。

鼠標(biāo)：市面常見(jiàn)主要是滾輪式和觸摸式鼠標(biāo)，其滾動(dòng)和觸摸的方向和屏幕展示的滾動(dòng)方向是否一致，在工具的默認(rèn)配置、更改設(shè)置等方面，需要特別考慮。

鍵盤(pán)：快捷鍵能夠極大程度的降低耗能，提高使用效率。設(shè)置快捷鍵要考慮用戶(hù)的學(xué)習(xí)成本和記憶成本，同類(lèi)型的操作最好設(shè)置為市面上已有的使用率最高的配置。如果沒(méi)有用戶(hù)廣泛接受的快捷鍵組合，自定義配置的時(shí)候需要考慮組合按鍵的數(shù)量和按鍵之間的距離，降低每次操作的成本。選擇鍵盤(pán)上面的字母按鍵時(shí)，對(duì)于帶有明確含義的操作，可以考慮其英文首字母，降低用戶(hù)學(xué)習(xí)和記憶成本。

注意：在配置所有官方快捷鍵操作，一定要規(guī)避掉系統(tǒng)級(jí)別的通用快捷鍵。

觸摸板：觸摸板在大多數(shù)場(chǎng)景下和鼠標(biāo)的作用相同，但是其多點(diǎn)觸控的能力，增加了更多操作方式的可能性，在設(shè)計(jì)手勢(shì)操作時(shí)，其對(duì)象運(yùn)動(dòng)規(guī)則需要和鼠標(biāo)的運(yùn)動(dòng)規(guī)則保持邏輯一致。設(shè)置快捷操作的基本思路和鍵盤(pán)快捷鍵一樣。

觸摸屏：觸摸屏大大小小，種類(lèi)繁多。觸控媒介也分為手指觸控和其他電容設(shè)備，最常見(jiàn)的就是電容筆。具體會(huì)在下面展開(kāi)。

順帶一提，鍵盤(pán)、鼠標(biāo)、觸摸板等耗能都比較低，但協(xié)同性也較低。觸摸屏的協(xié)同性很高，但是隨著屏幕尺寸的增大，其人體耗能會(huì)大幅增加，不適合長(zhǎng)時(shí)間使用。

此外，隨著 VR，全息投影等設(shè)備的普及，這些設(shè)備進(jìn)入?yún)f(xié)同辦公場(chǎng)景的可能也在增加，不過(guò)其物理反饋和高耗能操作是亟待解決的問(wèn)題。

前面提到的，觸摸屏隨著屏幕尺寸的增加，耗能也會(huì)增加，通俗來(lái)說(shuō)就是用著會(huì)累，尤其屏幕在豎直方向的時(shí)候。在使用觸摸屏的時(shí)候，需要關(guān)注一下誤觸操作的可能性，尤其設(shè)備需要兩只手持的時(shí)候，當(dāng)然大部分誤觸判斷的問(wèn)題在系統(tǒng)和硬件層面就會(huì)解決。最后，關(guān)注一下完成這個(gè)動(dòng)作是不是會(huì)要用到設(shè)備實(shí)體按鍵。

觸摸屏常見(jiàn)的操作是二維的，但是也有一些屏幕會(huì)有壓感，另外電容筆的壓感和角度識(shí)別，這些都增加了在更多維度進(jìn)行功能設(shè)計(jì)的可能，如果你有需要的話(huà)都可以考慮。

2. 軟件環(huán)境：主要影響來(lái)源于操作系統(tǒng)和窗口尺寸。不同的操作系統(tǒng)會(huì)使用戶(hù)形成不同的使用習(xí)慣，如果你的產(chǎn)品是跨平臺(tái)、跨系統(tǒng)的，需要考慮這一點(diǎn)。

了解你的用戶(hù)常用設(shè)備，常用系統(tǒng)之后，接下來(lái)就需要了解他們的常用設(shè)備尺寸，這對(duì)整體布局來(lái)說(shuō)非常重要，這里提供的網(wǎng)站可以按地區(qū)、時(shí)間查詢(xún)用戶(hù)屏幕的分辨率，幫助你定位合適的「基準(zhǔn)尺寸」。

操作系統(tǒng)除了操作邏輯有差別，屏幕分辨率帶來(lái)的顯示效果差別也是主要影響用戶(hù)體驗(yàn)的原因。舉個(gè)例子：Windows 設(shè)備常見(jiàn)的系統(tǒng)分辨率等比縮放，會(huì)使得原本產(chǎn)品針對(duì)高清大屏的布局變得混亂和局促。

在我們確定了基準(zhǔn)尺寸，完成了工具的基本框架之后，需要考慮用戶(hù)的使用場(chǎng)景會(huì)不會(huì)有經(jīng)常改變窗口尺寸的可能？會(huì)不會(huì)有跨系統(tǒng)協(xié)作的可能？會(huì)不會(huì)有跨平臺(tái)適配的可能？如果有，上下限在哪里？針對(duì)這些問(wèn)題我們要確定相應(yīng)的適配策略。我常用的設(shè)計(jì)方法列出了以下三種：模組化，響應(yīng)式布局，針對(duì)設(shè)備/系統(tǒng)分別設(shè)計(jì)。每一種方式都有各自的適用場(chǎng)景，根據(jù)你的產(chǎn)品特點(diǎn)選擇，這里就不展開(kāi)了。

二、用戶(hù) Uesrs

前面提到關(guān)于軟硬件的設(shè)計(jì)要點(diǎn)，其實(shí)和用戶(hù)人群息息相關(guān)。這里我想要介紹的是關(guān)注視覺(jué)細(xì)節(jié)的一些點(diǎn)。常見(jiàn)的 B 端工具大部分還不用做適老化設(shè)計(jì)，但是我們需要關(guān)注弱視群體，通用型的辦公軟件可能會(huì)有很多近視，色弱人群使用。還要關(guān)注用戶(hù)會(huì)不會(huì)長(zhǎng)時(shí)間使用，會(huì)讓他們的眼睛不舒服么？

1. 用戶(hù)人群的視力：前面提到確定產(chǎn)品框架的「基準(zhǔn)尺寸」，那內(nèi)容的「基準(zhǔn)尺寸」呢？默認(rèn)字號(hào)和間距給定多少合適？你的用戶(hù)能不能看清楚這是一個(gè)很重要的問(wèn)題，當(dāng)然這可能需要調(diào)研和測(cè)試。對(duì)于一般的工具，合適的大小可以參考市面的主要競(jìng)品，沒(méi)有競(jìng)品也可以擴(kuò)大范圍，參考其他工具產(chǎn)品，后續(xù)關(guān)注反饋在迭代中摸索。如果你很了解你的用戶(hù)人群一般視力情況，則可以做偏小/偏大的整體設(shè)計(jì)。

2. 用戶(hù)人群的辨色力：你的用戶(hù)是不是有可能出現(xiàn)色盲或者色弱。如果你的產(chǎn)品是一個(gè)通用型的工具，在使用特定含義的顏色時(shí)候會(huì)不會(huì)對(duì)他們?cè)斐衫_。假設(shè)顏色的分辨會(huì)有帶來(lái)一定的操作困難，后果的風(fēng)險(xiǎn)有多少，這些是需要評(píng)估的，根據(jù)評(píng)估結(jié)果來(lái)確定視覺(jué)表達(dá)的信息密度，顏色不足以傳達(dá)信息的時(shí)候可能要增加圖形、文字、聲音或其他形式來(lái)增強(qiáng)信號(hào)。

主題色：如果你的用戶(hù)不需要考慮上面的情況，那你需要關(guān)注顏色的表意。用戶(hù)對(duì)基本顏色有共識(shí)，合理利用這點(diǎn)可以幫助有效信息傳遞，例如你的產(chǎn)品如果和金融相關(guān)或者有很多的數(shù)據(jù)趨勢(shì)展示，在確定品牌或主題色盡量需要規(guī)避掉紅/綠，如果不這樣做，后續(xù)你的系統(tǒng)設(shè)計(jì)起來(lái)將會(huì)非常麻煩。

背景色：在一定程度上能起到整體提升/降低畫(huà)面亮度的作用，對(duì)視覺(jué)疲勞也會(huì)有很大影響。

如果你的產(chǎn)品需要適配黑夜模式，可以考慮以下兩種色彩調(diào)校方法。

3. 視疲勞：如果你的用戶(hù)需要長(zhǎng)時(shí)間使用你的產(chǎn)品，那你需要保證他們的眼睛相對(duì)舒服，減少高對(duì)比的顏色刺激，可以多選用黃綠色彩傾向的主基調(diào)，適當(dāng)降低整體的飽和度和對(duì)比度。在視覺(jué)縱深上面也可以多做減法，減少層級(jí)關(guān)系帶來(lái)的注意力疲勞感。

三、呈現(xiàn) Present

在一個(gè)確定面積的窗口內(nèi)，如何平衡工具承載的信息量和展示的功能？我總結(jié)了 4 個(gè)需要關(guān)注的方向

1. 共享空間：簡(jiǎn)單的說(shuō)就是當(dāng)信息過(guò)載時(shí)，采用折疊/切換/顯隱/遮蓋/位移等方式展示用戶(hù)當(dāng)前關(guān)注的功能內(nèi)容。

2. 用戶(hù)自定義：我們?cè)趯?shí)際項(xiàng)目中發(fā)現(xiàn)，很多新的功能沒(méi)有成熟的產(chǎn)品可以參考，但是又無(wú)法確定哪一種方案更好，而且對(duì)于功能越多，越復(fù)雜的工具產(chǎn)品，這種情況出現(xiàn)的概率越高，對(duì)此我們可以將定義配置的權(quán)限開(kāi)放給用戶(hù)，收集好數(shù)據(jù)幫我我們迭代產(chǎn)品。

3. 靜態(tài)表達(dá)：經(jīng)常利用的是色彩、圖形、樣式、文字等的組合，以下是經(jīng)常出現(xiàn)的方法組合，可以參考制定你的設(shè)計(jì)規(guī)范。

4. 動(dòng)態(tài)反饋：下面列出的是我經(jīng)常使用的方法，可供參考。

四、易用性 Usability

這個(gè)問(wèn)題很具體，但是在項(xiàng)目中，我個(gè)人總結(jié)的一個(gè)基本原則是“平等的對(duì)待用戶(hù)，不要教育用戶(hù)”。工具是幫助用戶(hù)解決問(wèn)題的，讓用戶(hù)會(huì)使用即可，不要試圖把產(chǎn)品邏輯都教給用戶(hù)，讓用戶(hù)精通工具那是產(chǎn)品說(shuō)明書(shū)的工作。

此外，在系統(tǒng)層面要給用戶(hù)兜底。幫助用戶(hù)遇見(jiàn)可能的風(fēng)險(xiǎn)和損失，在對(duì)應(yīng)的位置設(shè)置攔截/撤銷(xiāo)機(jī)制。考慮定時(shí)或?qū)嵤┐鎯?chǔ)。考慮歷史版本。

五、協(xié)作 Cooperation

在線(xiàn)協(xié)作辦公已經(jīng)成為最主流的趨勢(shì)，其中：

輕量化的工具更容易獲得用戶(hù)，最核心的功能往往能滿(mǎn)足大部分人的全部工作場(chǎng)景。

跨端/跨平臺(tái)/跨系統(tǒng)：用戶(hù)不受限于硬件設(shè)備和軟件系統(tǒng)，能獲得更一致的體驗(yàn)。

云存儲(chǔ)與云計(jì)算：你的終端只需要和云端鏈接就能享受超級(jí)的存儲(chǔ)和算力，對(duì)終端性能要求大大降低，不卡了，效率高了，體驗(yàn)自然更好了。

同時(shí)，你需要關(guān)注一些細(xì)節(jié)，這只是其中一小部分，更多的內(nèi)容需要在具體產(chǎn)品中慢慢挖掘。

最后 Finally

我個(gè)人想說(shuō)，做好一款工具是一件長(zhǎng)期的事。要時(shí)刻關(guān)注你的用戶(hù)反饋。要經(jīng)常使用你自己的產(chǎn)品，你會(huì)有很多發(fā)現(xiàn)。

歡迎關(guān)注「JellyDesign」的小程序：