B端設計過程中，除了保證效率的工作，我們還可以做一些有情懷的功能。本文介紹了一個有關電子工卡的B端設計，不但解決了B端設計當中需要解決的效率問題，還在設計中加入了許多溫馨的細節，推薦關注B端設計的小伙伴閱讀。

對于B端產品，我們難免有一些刻板印象：千篇一律、重效率輕創意……的確，由于產品的復雜性和工具屬性，新功能的加入很容易導致牽一發而動全身，因此B端產品的改造通常要保持克制。

作為B端設計師，我們也一直想嘗試做一點有情懷的功能，來打破人們對于辦公產品的刻板印象。

一、設計理念

「美事」作為58內部協作辦公平臺，其手機端覆蓋員工辦公的各個場景，是日常辦公使用最高頻的APP，也是做情懷設計的最佳試驗田。與此同時，我們也非常理性地對待這次創新，兼顧「低成本」和「高感知」。最終，我們把目標鎖定在功能相對獨立，同時全方位覆蓋員工打卡、進出閘機、支付、打印等高頻場景的「電子工卡」功能上。

如何做才能算有情懷呢？我們首先想到的方向就是「懷舊」。這從社會心理學上來講，也有一個專門的概念，叫做：熟悉定律，即：熟悉的事物或人，會給人更多的好感。實體工卡，是打工人非常熟悉的辦公用品，尤其是大廠員工，即使是出了公司，也喜歡把工卡戴在脖子上。對他們而言，工卡不只是工具，還是個人身份和榮譽的載體。

近幾年來，很多公司在APP上增加了電子工卡的功能，用來替代實體工卡。這確實給員工帶來了便利，而在儀式感以及精神愉悅的層面上，電子工卡做得還遠遠不夠，如圖：

我們接下來要做的，就是填補電子工卡在情懷上的缺失。從「形似」和「神似」兩個維度，去還原實體工卡的精髓。

二、設計執行

1. 設計執行-「形似」

這個部分的設計要點，是建立電子工卡和實體工卡的認知關聯。

在外觀層面，我們找到了市面上各種各樣的實體工卡。同時挖掘到適合線上化的共性，包括：

• 適配性：豎版適配手機豎屏
• 承載性：雙面展示，兼顧信息展示與功能入口
• 易搭配/擴展性：素色卡套更易搭配復雜的卡片內容

如圖所示，我們從以下四個方面對細節進行了塑造：

• 質感：卡的外框呈現柔和硅膠感，還原親膚觸感；卡繩則與深度還原實體工卡。
• 細節：外框和卡繩連接處采用了旋扣式設計，可以保證卡片在翻轉的時候，卡繩不會扭作一團；卡套厚度，也盡可能與卡扣、卡片保持協調。
• 光感：統一的光源與細節呼應，更加逼真自然。
• 內容：正面（默認面）順應舊版電子工卡的認知和使用習慣，整合掃碼相關功能；背面則更加貼合實體工卡，展示個人信息。

同時，我們想讓它不僅看起來像，動起來也要像。于是在動效層面，我們做了以下嘗試：

遵循「熟悉自然」的原則，我們在工卡的上呼應了我們在現實中“甩”和 “翻轉”的動作，設計了入場和切換的動效。

很快，我們發現了直接照搬現實動效的問題。對角線甩入的入場動效，很難控制在100-500ms這個感知舒適區間，而加長時間會讓用戶失去耐心；同時，斜向角度的交互在操作時，極易與直向角度的操作沖突，造成誤操作。

于是，我們又引入了「簡單輕盈」的設計原則，出入場擯棄斜向的方案，改用上下直向進出的方式，不僅動效更簡單，交互手勢也更加清晰。增加彈性細節，細膩又真實。在關閉/退出工卡的操作上，既能通過與現實相呼應的下拉回彈，也可以通過點擊空白區域快捷關閉，以滿足不同的認知和使用偏好。

2. 設計執行-「神似」

因為有「形似」作為基礎，并且此前也預留了適配不同場景的空間，于是可以在情感層面呼應員工的心理訴求。對應司慶日、節日等重要的日子，以及表現優秀及貢獻突出的員工，我們都打造了專屬皮膚。

此外，我們將工卡應用的場景，如：上下班打卡、失敗打卡、打印等進行了全方位的梳理，并對應性地在掃碼反饋上進行了設計，希望借此給打工人的工作日常增添一些溫度和能量。

3. 設計執行-「辦公提效」

雖然改造的初衷是「情懷」，但效率才是辦公產品的內核。電子工卡，又能如何賦能辦公提效呢？我們分成基礎和擴展兩個層面，逐漸展開設計。

基礎層面，基于舊版電子工卡進行操作提效和路徑提效。以前刷完電子工卡，會進入左邊的反饋頁面，在操作上極為不便。于是我們把頁面改成了更加輕量化的彈層，想關閉的話，向下輕輕一劃，或是點擊空白區域即可，提高操作效率。

同時，美事歷經多個版本，存在入口過深和重復的問題，這在無形中增加了員工的認知和記憶成本。新版工卡將與掃碼這一場景下的高頻功能進行整合，在路徑上進一步提效。

擴展層面，我們充分發揮美事的辦公中臺能力，探索電子工卡的延展能力。在日常辦公場景中，我們經常沖進辦公樓急著開一個會，卻越急越找不到會議信息，或是待辦事項稍不留神就逾期的情況。將掃碼反饋整合臨期日程和待辦事項，能在很大程度上解決上述燃眉之急，而隨時隨地提醒，能有效降低我們的查找和記憶成本。

三、總結

這是一次「始于情懷，終于效率」的B端設計探索：運用熟悉定律進行情感化設計，提升美事這一辦公產品的感性值；而在場景、操作和路徑層面全方位提升辦公效率，同步拉高理性值。在B端產品設計中，感性和理性并不是完全對立的，二者可以互相融合與促進，讓體驗更加美好。