云辦公和在線協(xié)作已經(jīng)成為目前互聯(lián)網(wǎng)工作的主要形態(tà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)品邏輯、交互邏輯和視覺細(xì)節(jié)也有各自的特殊要求。如何設(shè)計(jì)好一款好用的工具產(chǎn)品，涉及到的內(nèi)容會非常多。篇幅有限，我自己概括一些通用的要點(diǎn)，主要有以下 5 點(diǎn)：環(huán)境（Environment）、用戶（Users）、呈現(xiàn)（Present）、易用性（Usability）、云協(xié)作（Cooperation）。

一、環(huán)境 Environment

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、用戶 Uesrs

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

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

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

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

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

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

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

三、呈現(xiàn) Present

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

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

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

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

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

四、易用性 Usability

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

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

五、協(xié)作 Cooperation

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

輕量化的工具更容易獲得用戶，最核心的功能往往能滿足大部分人的全部工作場景。

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

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

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

最后 Finally

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

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