為什麼初創公司需要風格指南

即使對於一個經驗豐富的設計師來說，為給定的產品創建一個新的風格指南也很困難——有很多可能的設計方向，而且這個過程很快就會變得不堪重負。 創業生活是忙碌的、快速的，並且充滿了諸如“完美是完成的敵人”、“快速行動並打破常規”或“現在啟動，稍後修復”等陳詞濫調。

在這樣的口號和波動的優先級下提出風格指南具有挑戰性，但如果產品的設計要長期取得成功，則必須這樣做。

近年來，我們聽到了很多關於設計系統、樣式指南、模式庫和原子設計的信息。 雖然這些工具非常有用，但當您只想為 MVP 創建幾個屏幕或演示應用程序時，使用它們似乎有點過頭了。 但是，擁有樣式指南不僅會總體上改善您的設計過程，還會使您的應用程序更加穩固和一致。

讓我們先談談風格指南的主要好處，然後再談一談充滿挑戰的創業環境。 最後，我們將討論樣式指南如何始終作為活文檔不斷發展。

樣式指南是個好主意的五個理由

1. 風格指南使設計具體和品牌清晰

作為初創公司的孤獨設計師（通常情況如此），沒有太多機會來審查和挑戰團隊中其他人所做的設計決策。 儘管每個人都可能在協作工作，但設計不一定與他人共享。 這意味著只有一個人驗證最終設計。

樣式指南將為初創公司提供指導和文檔以供參考。 它將挑戰設計師或團隊做出的一些設計選擇，因為它們必須在應用程序的全局環境中進行驗證。 設計一個 UI 組件，因為它在一個屏幕上運行良好不會削減它。 一個經過深思熟慮的設計應該解決一種情況下的單一設計問題，以及在您的應用程序的其他屏幕上發現的普遍問題。

樣式指南使您公司的每個人都可以使用整體設計樣式、品牌指南、規範和規則。 只需單擊一下即可。 他們可以通過 URL 輕鬆訪問在線樣式指南或下載 PDF。 設計成為每個人的工作——它不再是設計團隊的唯一責任。 這是一種謹慎的方法，可以改善您產品的用戶界面。

2. 樣式指南使您的設計更加一致

它為您的 UI 設計語言提供了各種字典。 當你想傳達你已經表達過的東西時，你可以使用相同的術語。 想像一下，如果我們用稍微不同的詞來表達同樣的事情：

1. “下雨了; 我需要我的雨傘。”
2. “下雨了，我需要我的雨傘”
3. “下雨了，我需要我的雨傘”

它可能使語言富有詩意，但難以理解。 從根本上說，這與網站或應用程序的 UI 相同。 為了便於使用，你應該只在你真正創造新東西時才發明一個新的“詞”。 這樣，您就會受到一條嚴格的規則的約束，即“只有在整個產品中反复解決設計問題的組件才允許進入產品，隨後進入樣式指南。”

一致性使您的產品更加用戶友好； 一個高度可用的產品可以轉化為更多的參與和銷售。

3.重用相同的系統組件使您的應用程序更易於使用

與語言示例一樣，一致性是關鍵。 一旦用戶理解了每個組件，當在不同的上下文中再次使用時，人們將已經熟悉它的行為。 在用戶交互方面，這種一致性提高了產品的整體可用性。

使用基於組件的設計系統可以節省資金，還可以使產品更容易更新。 如果某個組件在特定情況下存在可用性問題，則可以修復一次，並且該組件的所有其他潛在問題也將得到更新。

4. 從長遠來看，樣式指南使您的應用程序開發速度更快

當您的團隊正在為屏幕開發一個通用組件時，他們正在開發一個他們也將在其他地方使用的解決方案。 這節省了很多開發時間。 當您的公司擴大規模時，這可能意味著節省多達 10 倍的構建新屏幕所需的工時。

5. 風格指南促進生產效率和創新

創建樣式指南使公司的其他人員更容易訪問和使用設計。 開發人員和設計人員可以更快、更輕鬆地製作創意原型。 Bootstrap 經常因使開發人員可以輕鬆創建工作原型而受到讚譽——您的樣式指南具有相同的目的。 它為將由開發人員構建的新 UI 提供了參考基礎，而無需設計團隊首先創建屏幕（即使設計團隊應對最終屏幕進行 QA）。

初創公司的挑戰，Flux 中的風格指南

在啟動環境中創建設計系統並不像在更成熟的公司中那樣線性，他們習慣於更簡化的流程。 在一家更傳統的公司，設計團隊進行用戶體驗研究、構思和實驗，然後提出最終的品牌風格指南。 這個過程並不適合所有公司。 初創公司在他們的願景和對產品的要求總是在不斷變化的環境中工作。 他們使用 MVP（最小可行產品），他們的應用程序的不完整版本，用於測試他們的想法並向用戶展示其潛力。

在創建樣式指南時，這可能會成為一個問題。

在一個不斷發展的環境中，設計師通常會努力創建一個應該有點“固定”的風格指南。 設計師可能沒有時間徹底考慮所有正在創建的組件，即使它們最終可能仍會出現在應用程序的下一個版本中。 當他們成熟一點時，Facebook 以將他們的漢堡菜單換成標籤導航而聞名。 你認為首先將漢堡菜單放在那裡的人也將其添加到 Facebook 樣式指南中嗎？

您甚至可能認為現在還不是創建樣式指南的時候。 您可能會意識到，從長遠來看，您將需要一個，但現在更重要的是為應用程序的可用性測試製作屏幕。 此外，您還需要一些營銷頁面來推廣您的應用程序。 突然間，您的設計需要升級，當您創建屏幕時，您開始看到擁有可以使您的設計和公司品牌保持一致的風格指南的價值。

問題是你不知道何時是用靈活性換取穩定性的正確時機。 你必須決定什麼時候應該開始樣式指南，什麼時候應該只專注於創建屏幕。 最佳方法可能是在您交付屏幕的同時生成樣式指南——這樣您就可以兩全其美。

從一些 UI 靈感開始

一個好的開始方法是收集你喜歡的設計風格的例子，或者更重要的是，收集你認為用戶會回應的例子，特別是如果你不是設計師的話。 收集盡可能多的示例，並將它們放在文件夾/InVision board/Niice board/etc 中。 它們可以作為參考和靈感以及您的設計敏感性。 您可以稍後在它們的基礎上創建模式庫。

例如，當我為一家在娛樂行業推廣藝術家的公司編寫風格指南時，我們想知道淺色或深色背景是否會對我們的用戶產生更大的影響。 我查看了數百個遊戲/電影/視覺製作中的不同網站，看看他們如何使用深色和淺色背景。

我製作了一張參考表，其中突出顯示了最常見的模式。 我發現的一種模式是，該行業的公司在展示其產品時傾向於使用較暗的背景，但在營銷工作、電子商務和商店中使用白色背景。

您不必走得那麼深，但我發現視覺參考不僅有助於創建樣式指南，而且有助於記住您可能需要設計的一些用例。 一旦您對收集的參考資料感覺良好，您就可以開始進行視覺設計。

設計實體 UI 組件

在初創公司工作時，創建組件比創建頁面更難——至少在開始時是這樣。 當您設計一個頁面時，您通常會知道如何使用它。 設計組件時不一定是這種情況。 您正在嘗試針對特定用例進行設計，但您希望它成為通用設計系統的一部分，並且您需要以這種方式處理它。 例如，您可能想要創建一個包含三個按鈕的子導航組件。 您可能還需要它來處理四個、五個或十個按鈕，並且它需要在移動設備、平板電腦和台式機上工作。 你需要提前考慮。

您希望組件具有一定程度的持久性或持久力。 通用組件不應該經常更改，並且它們必須在整個產品的許多地方都可以重複使用。 例如，如果你只對 iOS 應用感興趣，那麼你想根據選項的數量或內容的長度來測試你的組件，而不一定是屏幕大小。 這個想法是，如果它在你的應用程序的許多地方的 UI 中都是可行的，那麼你就知道它是一個有可能成為你的樣式指南的一部分的組件。

一家初創公司需要從幾乎一無所有開始，然後迅速行動。 您的老闆可能想要在一天結束時設計一個屏幕。 這意味著您不能真正開發完整的樣式指南，然後提出屏幕。 更糟糕的是，您可能正在設計一個樣式指南，其中的組件永遠不會出現，因為公司的願景已經改變。 就像他們說的，最好現在發貨。

創建出色的樣式指南需要時間，而且因為它將成為您設計系統的基礎，所以您希望將其做好。 在啟動環境中，您需要協同處理您的樣式指南。

風格指南作為活文檔

您應該將您的樣式指南視為一項正在進行的工作。 就像一家初創公司弄清楚它的戰略一樣，你會在你前進的過程中找出你的風格指南。 您將隨著時間的推移對其進行編輯和調整，直到它成為您 UI 的基礎。 一種有用的方法是在啟動樣式指南的同時啟動第一個模型。 用你最喜歡的軟件（在我的例子中是 Sketch）打開兩個文件； 一個稱為page name ，另一個稱為styleguide 。 在您進行屏幕設計時，您可以開始使用構成您設計的元素來為您的樣式指南播種。

當你開始做更多這些時，你會很早就注意到一些組件是包含在樣式指南中的主要候選者。 例如，如果您已經確定了圖標樣式，那麼您的所有圖標都可以從一開始就進入樣式指南。

我通常會創建一個名為“目前已完成的圖標”的部分。 如果有人需要一個圖標，他們首先必須在創建新圖標之前檢查此部分。

其他需要考慮的明顯項目是顏色、按鈕、選擇器、標題、標題、正文等。如果您正在使用一種專門用於營銷的樣式，您可以考慮將其放入您的樣式指南並適當地標記它。 如果您沒有完全確定某個特定項目，那也沒關係。 您可以稍後在機會出現時細化設計系統中的 UI 元素，並適當地更新指南。 別忘了，風格指南是一個活生生的文檔，尤其是在初創公司。

最終，當我開始在指南中放置佈局時，我知道我開始達到所有組件都應該接近其最終狀態的地步。 這部分標誌著風格指南創建過程的轉折點——現在您可以慶祝了！ 慶祝這樣一個里程碑的一個好方法是為 1.0 版本的樣式指南創建一個徽標或圖標（考慮命名）。

有些人甚至將徽標/圖標打印為貼紙，這樣團隊就有了某種獎杯。 這也是我通常會回到更傳統的使用指南的方式，首先打開該樣式指南，然後為需要完成的任何界面創建一個新文件。

結論

作為設計師，通過儘早創建樣式指南，您可以確保您的初創公司遵守更高的質量標準。 這可能具有挑戰性，但值得付出努力。 一個堅實、全面的風格指南不僅可以幫助您獲得更好的產品，還可以幫助您降低開發成本。

即使在快速做出決策並且有時設計需要快速更改的快節奏環境中，也有一種方法可以實現這一目標。 希望上述過程能夠幫助任何初創公司的設計師應對複雜性和速度方面的挑戰，同時為產品的利益創建一個堅固的風格指南。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗