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

項(xiàng)目背景

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

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

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

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

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

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

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

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

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

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

3. 用戶難上手，為什么會(huì)很難上手？

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

解決問(wèn)題

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

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

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

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

如何改版？

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

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

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

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

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

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

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

（2）色彩規(guī)范

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

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

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

（3）文字規(guī)范

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

（4）布局

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

（5）加載效果

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

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

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

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

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

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

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

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

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

4. 建立Icon庫(kù)

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

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

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

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

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

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

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

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

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

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

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

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

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

最后

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

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

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