在小公司,如何進行產品改版升級?

10 評論 12362 瀏覽 133 收藏 15 分鐘

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

項目背景

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

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

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

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

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

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

1. 產品丑,為什么會覺得丑?

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

2. 用戶體驗不好,不好在哪里?

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

3. 用戶難上手,為什么會很難上手?

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

解決問題

現(xiàn)實情況

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

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

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

如何改版?

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

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

2. 根據(jù)流行趨勢和產品定位,重新定義產品風格,并輸出視覺規(guī)范

(1)風格確定:年輕,簡單

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

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

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

(2)色彩規(guī)范

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

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

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

(3)文字規(guī)范

  • 一級標題,二級標題,正文,次要、輔助文字、提示文字、不可點擊、懸浮等
  • 文字顏色(反白):一級標題、正文、次要

(4)布局

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

(5)加載效果

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

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

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

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

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

(3)頁面要凸出內容重點,內容層級要區(qū)分清晰

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

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

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

4. 建立Icon庫

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

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

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

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

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

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

6. 和產品以及開發(fā)確認設計稿

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

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

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

8. 檢查設計稿還原度

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

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

最后

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

 

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

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

專欄作家

阿青,公眾號:阿青碎碎念,人人都是產品經理專欄作家。B端UX設計師。

本文原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載

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

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 所以公司沒錢就多用定性調研,比如用戶訪談,可用性測試之類的,有錢就定性定量一起上,比如問卷調查,數(shù)據(jù)分析等等,總能發(fā)現(xiàn)改進的地方 ??

    來自四川 回復
    1. 嗯嗯,因為時間緊張,還是有些沒有完善的地方,謝謝建議

      來自陜西 回復
  2. 極簡風格,甚是喜歡,收藏了;感謝樓主分享

    來自四川 回復
    1. 謝謝

      來自陜西 回復
  3. 你好,文章總結很棒!點贊!但是有一個疑惑點想問下,為什么不同類型的表格要使用不同的顏色?個人感覺周邊的色塊會有點奪人眼球,影響數(shù)據(jù)的查看

    來自浙江 回復
    1. 謝謝你,這個是是產品的設計,不是不同的表格顏色不一致, 是不同的app顏色可以不一致,就像是我們自己安裝在手機里的app一樣,產品中的app也可以自定義顏色Icon去區(qū)分。

      來自陜西 回復
  4. 很用心很真實的經驗總結,對我有幫助,666

    來自浙江 回復
    1. 感謝大佬

      來自陜西 回復
  5. 第一個收藏的 小太陽辛苦了

    來自山東 回復
    1. 哈哈。希望對你有幫助

      來自陜西 回復