工具類產品如何設計？大廠高手總結了5個要點！

云辦公和在線協作已經成為目前互聯網工作的主要形態和重要趨勢，各種工具類產品也成了互聯網工作的“基建設施”。優秀的工具能幫助效率獲得極大提升。那如何設計好用的工具產品呢？下面是個人一點淺薄的經驗和大家分享。

相關設計干貨：

各種工作涉及到的工具產品各不相同，具體的工作流、產品邏輯、交互邏輯和視覺細節也有各自的特殊要求。如何設計好一款好用的工具產品，涉及到的內容會非常多。篇幅有限，我自己概括一些通用的要點，主要有以下 5 點：環境（Environment）、用戶（Users）、呈現（Present）、易用性（Usability）、云協作（Cooperation）。

一、環境 Environment

主要區分硬件環境和軟件環境

1. 硬件環境：主要影響來源于操作外設和顯示器尺寸。不同外設帶來不同的操作方式，不同的操作方式由于其人體耗能、協調性（主要指手眼協同）不同，帶來的操作體驗也完全不同。

上面羅列了常見的辦公外設，針對每一種外設各自的特點，我總結了工具設計時需要注意的點，能夠幫助提效以及提升體驗。

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

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

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

觸摸板：觸摸板在大多數場景下和鼠標的作用相同，但是其多點觸控的能力，增加了更多操作方式的可能性，在設計手勢操作時，其對象運動規則需要和鼠標的運動規則保持邏輯一致。設置快捷操作的基本思路和鍵盤快捷鍵一樣。

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

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

此外，隨著 VR，全息投影等設備的普及，這些設備進入協同辦公場景的可能也在增加，不過其物理反饋和高耗能操作是亟待解決的問題。

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

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

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

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

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

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

二、用戶 Uesrs

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

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

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

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

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

如果你的產品需要適配黑夜模式，可以考慮以下兩種色彩調校方法。

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

三、呈現 Present

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

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

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

3. 靜態表達：經常利用的是色彩、圖形、樣式、文字等的組合，以下是經常出現的方法組合，可以參考制定你的設計規范。

4. 動態反饋：下面列出的是我經常使用的方法，可供參考。

四、易用性 Usability

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

此外，在系統層面要給用戶兜底。幫助用戶遇見可能的風險和損失，在對應的位置設置攔截/撤銷機制。考慮定時或實施存儲。考慮歷史版本。

五、協作 Cooperation

在線協作辦公已經成為最主流的趨勢，其中：

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

跨端/跨平臺/跨系統：用戶不受限于硬件設備和軟件系統，能獲得更一致的體驗。

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

同時，你需要關注一些細節，這只是其中一小部分，更多的內容需要在具體產品中慢慢挖掘。

最后 Finally

我個人想說，做好一款工具是一件長期的事。要時刻關注你的用戶反饋。要經常使用你自己的產品，你會有很多發現。

歡迎關注「JellyDesign」的小程序：