[譯] 是的，重新設計（第一部分）

果只發表於2019-02-19

是的, 重新設計(第一部分)

如何在移動世界中重新設計

作為一個設計領導者，我經常問自己：“我的團隊怎樣才能夠持續向我們的使用者提供最好的產品體驗？”我的答案總是相同的：我們需要考慮到我們使用者是在持續變化以及在迅速發展的社會中不斷提升的品位。但是，如果重新設計產品的體驗就是解決方案的話，怎樣從內部對話入手來開始這個過程呢？如何實現一個能夠平衡新功能和設計的同時還能保持產品的一致性的可擴充的解決方案呢？

如果你也面臨著同樣的設計挑戰，我希望這篇文章能夠幫你找到以下問題的答案：

1. 為什麼當使用者已經愛上這個產品的時候仍需要重新設計？

2. 如何在一個以資料驅動快節奏的公司中執行重新設計？

3. 你如何衡量結果？

4. 下一步是什麼？

為了幫助解答這些問題，我想通過分享我們對龍頭產品 “唱吧！卡拉OK”（原文：sing！karaoke）的重新設計的經驗，來帶你看到我們團隊在這一路上所克服的障礙。

兩年半以前，當我第一次加入公司的時候，我們有四個團隊，每個團隊負責下列應用的其中一個： 唱吧！卡拉OK（Sing! Karaoke，以下簡稱唱吧！），魔術鋼琴（Magic Piano），電子豎琴（Autoharp），彈吉他（Guitar）。每個團隊由一名設計師，一名產品經理和兩到三名工程師組成。隨著成長速度的不同，我們看到“唱吧！”成為了 Smule 家族中領先的應用。公司決定將重點從基於應用開發的架構轉變為基於功能的架構，這意味著更多的功能，更多的心血將傾注於“唱吧！”應用中，設計師們也需要更多的設計合作。隨著業務變化，我們知道我們現有的產品設計和流程不能滿足團隊的擴充套件和使用者的需求。

我們知道重新設計不會是一個孤立的專案，而是需要與使用者，設計師，產品經理，工程師和執行人員的共同參與。為了重新設計，每一部分的人員都在專案初期就參與進來，針對“如何”重新設計提供意見反饋。這幫助我們設定了明確的目標，重新設計將從以下四個方面實現：

來源：shutterstock

提升使用者體驗

授權設計團隊進行規範化

提升產品參與度

建立可持續的工程解決方案

1. 改善“唱吧！”的使用者體驗通過

給“唱吧”加入體驗上的一致性和連續性

從許多使用者研究中，我們已經知道一致性是可用性最強的因素之一。“唱吧！”是一個有著很多功能的有趣產品。在 2012 年產品釋出的時候，只有很少的功能和使用者基礎。由於功能很少，設計採用不同顏色來區分不同場景下的內容。比如，在“唱吧！”的早起版本中，我們用超過四種顏色來展示不同的“行為召喚”（在商場超市裡，我們經常會看見一些新品上市，會推出免費試用以及低價促銷的活動，用以刺激、吸引使用者的購買行為。這就是行為召喚中的一種。譯者注）的不同用途，舊的設計原本旨在取悅使用者，但我們注意到這種花花綠綠的“行為召喚”反而會給新使用者造成困惑。這意味著重新設計需要建立一致的 UI 語言來改善我們當前的使用者體驗。

提升新使用者的參與度

通過進行使用者研究，我們發現新使用者往往會帶著他們之前的經驗，和其他應用或產品的 UI 互動的經歷來假設他們和“唱吧！”的第一次互動也會如此。最重要的是，當“唱吧！”的介面沒有符合使用者的預期時，使用者需要花費額外的精力來學習和理解這個介面，這將使得產品試用既讓人興奮又讓人頭疼。我們推測，使用者介面的標準化，或者更新定製化的介面設計，使其與重新設計的設計模式相匹配，可以幫使用者更快更容易地熟悉我們的產品。它可以幫助使用者快速瞭解產品，從而更好的參與進來。

增加現有使用者存留

與應用程式的互動具有可量化的物理和心理成本。物理成本是使用者達到特定目標所需的步驟數量或時間來衡量。心理成本是通過讓使用者完成一個任務，或達到一個目標所需的內在和外在的認知負荷以及壓力。比如，當“唱吧！”使用者想要和其他使用者開啟一段合唱時，他們不得不在多個介面進行操作才能達到這個目的，這不僅僅消耗了使用者時間成本，造成了使用者心理壓力，也沒有幫助使用者理解內容。有計劃有信念地使用明確的標準互動和UI設計，將顯著降低使用者的身心成本。

來源:shutterstock

2. 賦予設計團隊可擴充性

為“唱吧！”創造一個新字型

“唱吧！”開始使用的是 Gotham 字型，是一種靈感來自紐約市中世紀建築設計的字型。Gotham 是一款非常棒的字型，可以慶祝 Smule 的樂趣，異想天開的感覺。它仍然代表了 Smule 在今天的品牌形象。然而，Gotham 是用於列印和媒體應用程式的字型。在移動裝置上呈現時，會引起許多問題。Gotham 有著較寬的字間距，會在同樣的詞句上佔據更多的位置。移動裝置具有有限的螢幕尺寸，因此設計師必須總是做出額外的努力，以確保文字在 iOS 和 Android 環境中都能顯示正常。很多時候，由於存在使用者可讀性的問題，字型的大小需要縮小以適合小空間。Gotham 引起的另一個問題是基線較低。因此，工程師必須手動，在視覺上確保副本是居中的。正如你所看到的這些例子，我們在開發階段遇到了很多設計問題。我們現在知道，找到可擴充套件和平臺標準字型是我們在重新設計過程中必須做出的關鍵決定之一。

“唱吧！”需要規範其設計語言

設計是一個既活潑又嚴肅的創作過程。如果沒有一個標準的 UX/UI 設計指南，該產品將成為專案中的不同設計師對於美學理解的大雜燴。繼續研究這些設計會使設計團隊產生混亂，限制設計人員的產出，並降低了產品質量。我們知道我們以前的“唱吧！”沒有明確定義設計標準。這種模糊標準加重了我們設計評審過程中的延遲和難點。當團隊中沒有人能夠闡明我們的目標設計標準時，所有的反饋和審查都是基於個人偏好來判斷的，其中大部分都是無效的。作為一個團隊，我們明白我們需要共同努力為使用者提供最好的產品和體驗。為此，我們認識到，我們需要一個明確界定的標準，傳達給所有設計團隊成員，以便在整個重新設計和推進過程中使用。這將為團隊的每個產品設計決策奠定基礎。

設計團隊的巨大增長使我們意識到需要建立一套規則。這個規範的建立是對於資訊框架，佈局，字型，顏色，影像和互動的處理。優點是，它將作為一個框架，適用於大多數設計問題，幫助設計人員在第一次就做出正確的設計決策來加快設計的過程。更重要的是，設計團隊需要建立一個共享的中央儲存庫，根據需要經常更新，記錄我們的樣式，元件和規範。隨著這個共享中心的到位，設計的一致性以及設計的質量和數量將得到改善。這意味著在“唱吧！”的重新設計中，設計團隊需要制定這個指導方針，以減少脫節的空間，個人設計風格和產品的視覺吸引力將保持一致。我們的目標是最終，設計師們不必致力於圖示的細節刻畫，不必思考究竟什麼才是正確的規範。相反，他們可以更多地關注使用者的創意設計解決方案。

設計團隊需要擴大規模

隨著產品功能的更新，更多的使用者加入了我們的“唱吧！”大家庭。我們的設計團隊需要擴張，以及更多的合作。沒有對於建立合作基礎的模組的共識，壓力將會在團隊增長的同時一直伴隨，使得溝通變得複雜。為了確保我們的團隊成功，我們知道我們的設計方法和工作流程需要模組化。這意味著重新設計團隊需要建立一些設計構建模組，這將是重新設計和所有設計工作的基礎。這些單獨的模組既能幫助我們的設計師輕鬆協作，又能在必要時進行產品分割。此外，當新設計師加入時，團隊的高階成員可以利用這些模組來引導專案，併為新成員制定明確的計劃。

來源:shutterstock

3. 增加產品參與度

提升新使用者的初體驗

當新使用者嘗試新應用時，他們他們會同時學習兩件事情（1）此應用程式的功能和（2）如何訪問這些功能。沒有明確和標準化的 UI/UX 設計，使用者可能無法完全瞭解應用程式中的各個介面元素並感到迷失。為了讓使用者專注於使用產品功能而不是導航介面設計，我們需要了解新使用者的期望並明確傳達對他們有價值的資訊。總體而言，新設計應該簡化我們應用程式的混亂部分，使得使用者在嘗試和新功能進行互動時感到舒服。

增加使用者留存

在 Smule，我們密切監視使用者存留，定義為在第一次使用體驗後接下來的幾天（例如第 2 天和第 7 天），有多少新使用者回到應用程式。如果使用者在第一次沒有得到很好的體驗他們在第 2 天不太可能回來。通過使用者研究我們發現，如果使用者找到了興趣接入點，他們便會在樂享在新功能中，否則他們仍會停留於已有功能。這些發現表明，我們的設計導航與使用者的意圖不一致。如果設計沒有幫助使用者知道他們在哪裡，以及他們如何訪問他們所想的功能，他們可能會感到困惑，對於繼續使用“唱吧！”失去了興趣。通過重新設計，我們需要提供更好的導航，滿足使用者意圖和產品商業目標。

提升開發和釋出週期

在 2014 年，我們開始考慮重新設計時，iOS 和 Android 上的產品功能是不一樣的。“唱吧！”在 iOS 上的功能要比 Android 上的功能多，iOS 和 Android 的不一致使設計團隊的工作翻了一番，延遲了開發週期。當我們開始思考重新設計時，“唱吧！”已經獲得了很多新使用者。我們想，趁著這股勢頭，加快產品設計和開發週期。考慮到這一點，我們知道重新設計需要改進我們內部設計團隊的工作流程和效率。重新設計可以將設計和開發時間縮短 50％，這將為我們提供更多的機會來測試和釋出具有當前資源的新功能。

來源:shutterstock

4. 建設可持續發展的工程解決方案

完善開發程式

不一致的 UI 不僅引起了可用性問題，而且為設計師和工程師創造了額外的工作負擔。例如，對於單個圖示，設計人員建立了多種顏色或大小的元件以在不同的場景中使用。為了確保工程師將元件放在螢幕的正確位置上，設計人員花費了大約 40％的時間來為工程師規劃和建立元件。另一方面，工程師需要遵循規範，編寫自定義程式碼，以確保每個元件都位於正確的位置。這些聽起來很容易，但是當考慮到其他變數時，比如螢幕尺寸和不同平臺（IOS/Android），這過程簡直可怕。在與工程師交談之後，設計師和工程師都希望以更好的方式相互協作。這再次提出了重新設計需求的另一個視角：創造一個可以使設計師和工程師建立並構造產品更加有效的一套系統的方法。

提升產品開發質量

做設計質量保證是設計者的責任，並確保設計得到正確實施。對設計師和工程師來說，最令人沮喪的時刻是：工程師為了修復設計 bug，不得不修改設計的某些部分，當然這將會產生另一個設計 bug。這導致，工程師花費更多的時間來修復設計 bug，卻仍然不能保證工程實現和設計是匹配沒有 bug 的。我們知道，要重新設計解決可能遇到的所有設計錯誤是不切實際的，但是，建立一個統一設計規範，以界定如何設定邊距，如何建立圖示大小，如何申請壓縮狀態等等，將減少上述場景的發生。

準備全球本地化

當我們開始思考重新設計時，“唱吧！”從以美國為中心的應用程式轉型為國際產品。為了適應不同國家地區使用者的社群本地化，我們把“唱吧！”從12種語言發展到20種語言。將原本為英文的應用程式更新多語言時，使用者介面很容易出問題。例如，與英語比起來，德語或俄語需要更多的字元來表達相同的含義。通常適合英文標籤的限定空間將不適用於德語和俄語。如果沒有一個清晰的規則，來制定如何設定間距，如何應用層級關係，當地語言字元會就被裁剪，或者以較小的尺寸呈現。逐一解決每種語言的這些問題，花費了我們工程師和質量保證團隊的大量精力。我們知道，通過重新設計我們需要找到一個可持續的解決方案，可以優化我們現有以及未來會有的不同的語言。

來源:shutterstock

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃。

相關文章