在小公司，經常會遇到的情況就是：人力資源短缺，用戶數據不足，時間緊迫等。這種現實情況下，很多方法論設計師根本沒有時間去一一實施，但是我們依然要去解決問題，依然要去面對產品的改版升級，具體應該怎么做？這篇文章就站在設計師的角度聊聊，當我們在小公司的情況下，產品升級迭代應該怎么做，以及其中遇到的問題和思考，希望對你有用。

項目背景

項目名稱：蜘蛛表格2.0改版設計

項目背景：在2018年的最新報告中,Gartner提出了hpaPaaS(高生產力應用程序平臺)理念。hpaPaaS核心功能是要提供一種快速構建適應變化的各類信息化開發的平臺。使用hpaPaaS開發,業務人員可以通過調用平臺現有的功能,創建應用程序的主要部分,實現快速開發的目的。

蜘蛛表格，一款hpaPaas軟件，一站式企業應用搭建和協同辦公平臺。通過可視化建模，可視化UI，可視化權限管理，可視化工作流和業務自動化管理，讓業務人員可以在云端搭建企業需要的定制化業務管理信息系統，無需部署，即時搭建，即時上線，即時更新，即時使用，即時為企業創建價值，持續為企業賦能。

產品在初期主要關注用戶的核心痛點，功能從“可用”、達到“有用”即可，通過我們前期的調研發現用戶在使用產品上發現了很多問題，很多用戶認為舊版本的蜘蛛表格App在使用感受上是有點生硬、風格陳舊且復雜。

所以，對于蜘蛛表格App的設計升級，我們的目標是“讓用戶使用更簡單”，我們需要不斷提升各個用戶觸點的產品體驗，幫助用戶更輕松更高效的完成他們的工作。

發現問題、分析問題

1. 產品丑，為什么會覺得丑？

• 頁面整體太灰，沒有設計感
• 風格老舊
• App顏色混亂
• Icon尺寸大小不一致
• 文字組件樣式不統一

2. 用戶體驗不好，不好在哪里？

• 用戶操作沒有反饋
• 部分功能用戶操作路徑繁冗
• 頁面內容多，重點不突出

3. 用戶難上手，為什么會很難上手？

• 功能設計復雜
• 設計體驗不好
• 缺少新手引導

解決問題

現實情況

1. 人力資源緊。整個產品團隊只有8個人，人力資源緊張。
2. 時間緊。想要3個月完成整個改版，并且上線。
3. 沒有數據支撐。用戶量不足，沒有龐大的用戶數據做支撐。

面對緊張的實際情況，應該如何去安排？

1. 一人承擔多個角色。
2. 省略原型圖的過程。對于小功能點，可以跳過原型圖的步驟，直接出高保真視覺稿
3. 對功能點進行優先級排序，確認本次迭代需要實現的功能
4. 按照模塊安排任務，一個模塊的設計稿確認好之后，開發跟進開始開發。有效的保證整個團隊的人員不會處于沒有活干的情況。
5. 開會及時反饋問題。時間緊，任務重，所以很有可能出現紕漏，可以及時開會溝通大家遇到的問題，集思廣益處理并解決。
6. 分析競品，提取精華。

如何改版？

1. 分析競品，取其精華，確定產品功能邏輯

• 選擇競品，可以選擇行業排名前列產品，或者垂直領域做的好的產品。
• 多人（產品，UI，市場）根據功能模塊體驗競品
• 梳理競品優缺點
• 開會共同討論優缺點，對于優點是否適合我們產品，我們需要有嘛；對于缺點，我們產品是不是也有，如何改進。
• 工具：使用蜘蛛表格，整理需要改版的功能點，并根據優先級排序，確定本次改版的范圍。

2. 根據流行趨勢和產品定位，重新定義產品風格，并輸出視覺規范

（1）風格確定：年輕，簡單

由于產品面向的用戶群體年齡段分布范圍是中青年和中年。所以希望整個產品呈現出年輕化的感覺，結合現在的流行趨勢增加了插畫的元素，提升產品的年輕感。

插畫主要用于空狀態、網絡異常、鏈接無法打開，視圖無法查看等頁面，我們希望通過情感化的插畫設計不僅幫助引導用戶更容易的使用產品而且能夠在特殊情況下緩解用戶的負面情緒。

B端產品多數屬于內容較多，功能復雜的產品。所以為了提升產品功能的操作體驗，我們希望以更簡單直接的方式面向用戶，讓用戶專注于產品功能本身，解決用戶需求。

（2）色彩規范

色彩不僅是品牌的第一外化特征，在用戶界面中，也承擔了一部分信息的功能屬性。所以本次改版的主色依舊沿用產品本身的品牌色。

輔助色根據主色調整。建立產品的色彩庫，并標注使用位置。輔助色的選擇可以切換到HSB模式調整H數值，根據實際效果對S和B稍做調整。

灰度色。主要是文字顏色。

（3）文字規范

• 一級標題，二級標題，正文，次要、輔助文字、提示文字、不可點擊、懸浮等
• 文字顏色（反白）：一級標題、正文、次要

（4）布局

在布局框架的選擇上，功能內容決定形式。我們采用卡片樣式，板塊分割清晰，可靈活定制。專注內容體驗。

（5）加載效果

根據功能和場景設計體驗友好的加載樣式。例如，在新建應用-推薦應用處可選擇占位加載，不影響頁面整體的效果。

3. 根據原型圖出設計稿

（1）用戶進入產品第一屏看到的就是首頁，所以可以先出首頁和一些重要的功能頁面，和老板確認整個產品的風格。

（2）根據原型圖出設計稿的時候，先要自己清晰整個功能點的交互邏輯， 再去思考用戶實際的操作路徑是否合適，有沒有遺漏。

例如，如果老板經常需要查看銷售報表，實際操作路徑需要經過4步，并且每次查看都需要重復這些步驟。改版后，利用【自定義首頁】功能可將報表視圖放在首頁，打開工作表就可以看到隨時查看銷售報表。

（3）頁面要凸出內容重點，內容層級要區分清晰

例如，app表格視圖。改版前內容層級不清晰，改版后，將一些不常用的功能隱藏，頁面設計做了調整，可以清晰看出視覺優先級：數據表-工作表列表-添加數據按鈕-其他

（4）考慮空狀態頁面

空狀態頁面時的情感化設計。

4. 建立Icon庫

• 采用圓角，體現親切感。去除細節，強化功能性。通過網格規范繪制，保障圖形簡單統一可識別。
• Icon上傳到Iconfont上，命名要保證統一可識別，可以和開發商量。我的規則：類別_名稱_填充/線性，僅供參考
• 工具：Iconfont，zepline

5. 創建組件庫

組件不僅可以讓界面更加統一，還可以讓我們在做設計的時候跳出當前頁面去看全局，思考每一個組件是否在后續界面依然可以用到。

例如，儀表板的【視圖組件】，產品的自定義首頁的功能和儀表板類似，但是沒有添加文本和圖片的功能，儀表板是有的，第一次就沒有考慮全局，而簡單的統一了兩者的組件，結果就出現，視圖組件無法完美的適配文本和圖片，會出現在文本和圖片上面功能性icon顯示不清等情況。后期做了調整，把儀表板中的文本和圖片做了新的組件。

具體到方案設計階段，需要平衡的因素有很多，準確率、效率、可用性、美觀度、一致性等，要考慮很多極端場景下的展示效果是否會有問題，制定相應的處理規則等。面對不同的場景，我們更要做到有全局觀，考慮全面，靈活定制不同的方案。

• 整理組件目錄，根據目錄去建立組件庫。組件復用，不僅提高了設計生產力，也會提升頁面的一致性。
• 將設計稿和組件上傳到Zeplin中，頁面上的組件會顯示出來，方便和開發協作。
• 組件庫的創建過程可以參考上一篇文章。
• 工具：zeplin

6. 和產品以及開發確認設計稿

• 開會確認設計稿效果是否可以，以及開發實現時要注意的點。
• 根據現實情況，開會確認設計稿可以按照模塊化去確認，當一個模塊的設計完成后，開一個小會，碰一次。這也要求設計師對于整個產品的要有整體性的把控，由于是階段性的，所以對于一些細節的更改時，要去從全局考慮，否則會出現，樣式不統一，或者是交互不統一的情況。

7. 交付設計稿，備注信息

將設計稿上傳到Zeplin，備注上詳細信息：包括頁面上一些hover效果，長度限制，不同分辨率怎么顯示等一些規則。

8. 檢查設計稿還原度

• 根據功能模塊去測試開發實現的效果和設計稿中有區別的地方，報bug。
• 對于設計中遺漏的小點，進行整理設計，重新交付開發。

設計走查很重要，身為設計師我們要對產品負責，要對使用我們產品的用戶負責，測試版本實現之后，設計師一定要去實際體驗產品，檢查產品還原問題，及時和開發測試去溝通。

最后

本次改版已經接近尾聲，產品快要上線了。但是產品的設計升級并不會就此結束，我們始終堅持以打造最優用戶體驗為目標，關注用戶反饋，解決并發現用戶需求，專注行業的精細化設計。