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

項(xiàng)目背景

項(xiàng)目名稱：蜘蛛表格2.0改版設(shè)計(jì)

項(xiàng)目背景：在2018年的最新報告中,Gartner提出了hpaPaaS(高生產(chǎn)力應(yīng)用程序平臺)理念。hpaPaaS核心功能是要提供一種快速構(gòu)建適應(yīng)變化的各類信息化開發(fā)的平臺。使用hpaPaaS開發(fā),業(yè)務(wù)人員可以通過調(diào)用平臺現(xiàn)有的功能,創(chuàng)建應(yīng)用程序的主要部分,實(shí)現(xiàn)快速開發(fā)的目的。

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

產(chǎn)品在初期主要關(guān)注用戶的核心痛點(diǎn)，功能從“可用”、達(dá)到“有用”即可，通過我們前期的調(diào)研發(fā)現(xiàn)用戶在使用產(chǎn)品上發(fā)現(xiàn)了很多問題，很多用戶認(rèn)為舊版本的蜘蛛表格App在使用感受上是有點(diǎn)生硬、風(fēng)格陳舊且復(fù)雜。

所以，對于蜘蛛表格App的設(shè)計(jì)升級，我們的目標(biāo)是“讓用戶使用更簡單”，我們需要不斷提升各個用戶觸點(diǎn)的產(chǎn)品體驗(yàn)，幫助用戶更輕松更高效的完成他們的工作。

發(fā)現(xiàn)問題、分析問題

1. 產(chǎn)品丑，為什么會覺得丑？

• 頁面整體太灰，沒有設(shè)計(jì)感
• 風(fēng)格老舊
• App顏色混亂
• Icon尺寸大小不一致
• 文字組件樣式不統(tǒng)一

2. 用戶體驗(yàn)不好，不好在哪里？

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

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

• 功能設(shè)計(jì)復(fù)雜
• 設(shè)計(jì)體驗(yàn)不好
• 缺少新手引導(dǎo)

解決問題

現(xiàn)實(shí)情況

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

面對緊張的實(shí)際情況，應(yīng)該如何去安排？

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

如何改版？

1. 分析競品，取其精華，確定產(chǎn)品功能邏輯

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

2. 根據(jù)流行趨勢和產(chǎn)品定位，重新定義產(chǎn)品風(fēng)格，并輸出視覺規(guī)范

（1）風(fēng)格確定：年輕，簡單

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

插畫主要用于空狀態(tài)、網(wǎng)絡(luò)異常、鏈接無法打開，視圖無法查看等頁面，我們希望通過情感化的插畫設(shè)計(jì)不僅幫助引導(dǎo)用戶更容易的使用產(chǎn)品而且能夠在特殊情況下緩解用戶的負(fù)面情緒。

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

（2）色彩規(guī)范

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

輔助色根據(jù)主色調(diào)整。建立產(chǎn)品的色彩庫，并標(biāo)注使用位置。輔助色的選擇可以切換到HSB模式調(diào)整H數(shù)值，根據(jù)實(shí)際效果對S和B稍做調(diào)整。

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

（3）文字規(guī)范

• 一級標(biāo)題，二級標(biāo)題，正文，次要、輔助文字、提示文字、不可點(diǎn)擊、懸浮等
• 文字顏色（反白）：一級標(biāo)題、正文、次要

（4）布局

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

（5）加載效果

根據(jù)功能和場景設(shè)計(jì)體驗(yàn)友好的加載樣式。例如，在新建應(yīng)用-推薦應(yīng)用處可選擇占位加載，不影響頁面整體的效果。

3. 根據(jù)原型圖出設(shè)計(jì)稿

（1）用戶進(jìn)入產(chǎn)品第一屏看到的就是首頁，所以可以先出首頁和一些重要的功能頁面，和老板確認(rèn)整個產(chǎn)品的風(fēng)格。

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

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

（3）頁面要凸出內(nèi)容重點(diǎn)，內(nèi)容層級要區(qū)分清晰

例如，app表格視圖。改版前內(nèi)容層級不清晰，改版后，將一些不常用的功能隱藏，頁面設(shè)計(jì)做了調(diào)整，可以清晰看出視覺優(yōu)先級：數(shù)據(jù)表-工作表列表-添加數(shù)據(jù)按鈕-其他

（4）考慮空狀態(tài)頁面

空狀態(tài)頁面時的情感化設(shè)計(jì)。

4. 建立Icon庫

• 采用圓角，體現(xiàn)親切感。去除細(xì)節(jié)，強(qiáng)化功能性。通過網(wǎng)格規(guī)范繪制，保障圖形簡單統(tǒng)一可識別。
• Icon上傳到Iconfont上，命名要保證統(tǒng)一可識別，可以和開發(fā)商量。我的規(guī)則：類別_名稱_填充/線性，僅供參考
• 工具：Iconfont，zepline

5. 創(chuàng)建組件庫

組件不僅可以讓界面更加統(tǒng)一，還可以讓我們在做設(shè)計(jì)的時候跳出當(dāng)前頁面去看全局，思考每一個組件是否在后續(xù)界面依然可以用到。

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

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

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

6. 和產(chǎn)品以及開發(fā)確認(rèn)設(shè)計(jì)稿

• 開會確認(rèn)設(shè)計(jì)稿效果是否可以，以及開發(fā)實(shí)現(xiàn)時要注意的點(diǎn)。
• 根據(jù)現(xiàn)實(shí)情況，開會確認(rèn)設(shè)計(jì)稿可以按照模塊化去確認(rèn)，當(dāng)一個模塊的設(shè)計(jì)完成后，開一個小會，碰一次。這也要求設(shè)計(jì)師對于整個產(chǎn)品的要有整體性的把控，由于是階段性的，所以對于一些細(xì)節(jié)的更改時，要去從全局考慮，否則會出現(xiàn)，樣式不統(tǒng)一，或者是交互不統(tǒng)一的情況。

7. 交付設(shè)計(jì)稿，備注信息

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

8. 檢查設(shè)計(jì)稿還原度

• 根據(jù)功能模塊去測試開發(fā)實(shí)現(xiàn)的效果和設(shè)計(jì)稿中有區(qū)別的地方，報bug。
• 對于設(shè)計(jì)中遺漏的小點(diǎn)，進(jìn)行整理設(shè)計(jì)，重新交付開發(fā)。

設(shè)計(jì)走查很重要，身為設(shè)計(jì)師我們要對產(chǎn)品負(fù)責(zé)，要對使用我們產(chǎn)品的用戶負(fù)責(zé)，測試版本實(shí)現(xiàn)之后，設(shè)計(jì)師一定要去實(shí)際體驗(yàn)產(chǎn)品，檢查產(chǎn)品還原問題，及時和開發(fā)測試去溝通。

最后

本次改版已經(jīng)接近尾聲，產(chǎn)品快要上線了。但是產(chǎn)品的設(shè)計(jì)升級并不會就此結(jié)束，我們始終堅(jiān)持以打造最優(yōu)用戶體驗(yàn)為目標(biāo)，關(guān)注用戶反饋，解決并發(fā)現(xiàn)用戶需求，專注行業(yè)的精細(xì)化設(shè)計(jì)。

本文由 @小太陽不愛吃辣椒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議