你的產品需要設計規範嗎?

來源:互聯網
上載者:User

  不是所有的網站或行動裝置 App都需要設計規範。你表弟的部落格就未必需要,你鄰居自己搭建的用來賣貓草的小電商網站也不那麼需要,當然這也要看他能賣掉多少,能做到多大規模。

  通常,只有那些需要維護專業形象和品牌一致性的產品才真正需要設計規範(或是風格指南一類的說法)。不要把這事兒想的太容易,真正意義上的設計規範需要你花費大量的時間成本去建立並持續維護,所以在決定動手之前,最好確認一下你的產品是否真的需要設計規範,它所需要投入的成本是否能夠被接受。

  什麼是設計規範?

  在確認是否需要設計規範之前,我們首先應該明確一下設計規範到底是什麼。簡單的說,它就是一份由很多範例組成文檔(電子文檔、印刷文檔或HTML檔案等),用來描述和展示你的產品應該具有怎樣的外觀和互動方式。它就是一份指南,讓你在建立和更新網站或應用時知道在什麼地方使用怎樣的風格標準。設計規範可以協助你瞭解一些典型的問題包括“這裡應該使用怎樣的配色?”、“H1標題要用多大的字型大小?”、“這部分文字內容應該靠左對齊還是兩側對齊?”等等。

  雅虎風格指南

  你需要設計規範嗎?何時需要?

  答案取決於你的產品類型,以及設計規範的使用者會有哪些。這裡所說的使用者包括設計師、開發人員、內容建立者等角色。搞清楚“規範的使用者是誰”,這非常重要——很多管理員或設計師會告訴你,如果我們建立一份設計規範,它會在接下來很長一段時間內協助團隊節省大量的時間,叭啦叭啦;但實際情況是,你們很有可能在投入了巨大的時間與人力成本去做這件事之後,卻發現這份規範當中的內容對團隊裡的任何一個職能類型都沒有很大的參考價值;最壞的情況是,無論設計師還是開發人員,他們壓根就不會去看它。

  “時間”也是一個重要的因素。如果你們當前正忙於新產品的設計開發,那麼顯然無法抽出足夠的時間去做規範方面的事情。設計規範是一項長期投資,如果眼下不確定自己有足夠的資源可以投入,那麼就不要去做,但你可以從現在開始為此做些準備,在新產品的設計開發過程中留意那些有可能寫入設計規範的方方面面,將它們作為素材搜集起來,到建立規範的時候加以整理。

  你也可以試著回答如下這些問題,如果其中大部分的答案都是肯定的,那麼你可以考慮建立一份設計規範了:

  1.你是否想節省腦細胞?

  2.你是否希望在產品中落實良好的使用者體驗?

  3.你是否覺得有必要在產品的設計方面保持一致性?

  4.除了當前的網站或應用之外,你的品牌和產品在將來是否延續性和擴充性?

  5.是否有第三方合作者會用到你的品牌要素?

  6.你的產品當中是否會有頻繁而規律的內容更新?

  7.在自己的團隊之外是否有第三方的內容提供者?

  8.你的產品是否有提供給第三方設計師與開發人員的API介面?

  9.你是否準備以公司的形式長期維護當前產品或是繼續開發新產品?

  10.你是否就職於一家大公司?

  Netflix公司的API規範(PDF)

  怎樣建立設計規範?

  如果你確定自己需要一份設計規範,那麼怎樣著手進行建立呢?正如前面提到的,這也要取決於你的產品和團隊的實際情況。有可能你只需要為自己建立設計規範,這時它更像是一種備忘或歸納,那麼你就沒必要做的非常細緻,也不需要在表現形式上花費太多時間;而多數情況下,設計規範是面向產品系列及大中型團隊的,這時你就必須在個各方面都深入的進行,同時保證必要的細節。

  我列了兩個清單,分別是“包含哪些內容?”和“還需要些什麼?”。其中第一個清單裡列出了設計規範當中通常需要涉及到的內容,後者則包括了你有可能需要進行額外處理的內容。當然,這兩份清單並不是標準摸板一類的東西,你只需要在建立規範時結合自己的實際情況對這些要點加以考慮。

  包含哪些內容? 品牌要素

  給出官方logo和標準色彩配置的定義及範例,介紹logo在全彩、黑白或不同背景色等狀況下的使用方式,提供標準配色的HEX及RGB值,另外也可以提供logo檔案的下載,包括.png、.jpg甚至是.ai或.psd檔案。

  文字

  對頁頭、段落、引用、標籤、表單標題等任何有可能出現格式化文字的地方進行規範定義,包括字型、字型大小、行高、字間距等方面。

  布局

  定義不同的區塊和元素在介面當中的位置,還有它們彼此之間的關係。對於那些在全域範圍內普遍適用的外間距(margin)、內邊距 (padding)、網格模式等規則也要作以說明;另外,有些元素會根據介面環境的不同產生相應的變化,這些也需要在規範中也要進行說明,最好可以搭配圖片進行展示。

  連結和按鈕

  定義連結和按鈕的視覺風格,為不同模組中的連結以及不同類型表單中的按鈕提供色值及圖例。這個過程也有可能協助你對一些過於複雜的介面進行簡化。

  導航

  定義各級導航的視覺風格及互動方式,特別是對於那些具有層級關係的導航項來說,要完整的展示出嵌套關係及展開方式。

  視覺繼承

  定義頁頭、標題、段落、圖片等元素是怎樣在視覺上保持關聯性的,提供必要的圖例,並通過文字描述出視覺繼承關係對於整個產品的外觀氣質的影響作用。

  圖片與表徵圖

  對內容和介面元素當中的圖片及表徵圖進行定義,包括檔案類型、尺寸、檔案大小、比例、風格等方面。內容中是否會有精選圖片?本文中的圖片是左右浮動還是置中?是否有一套特定的表徵圖素材?

  UI標準

  定義不同的UI元素所對應的互動模式,以及它們的視覺表現形式,例如在哪些情況下使用複選框(check box)或選項按鈕(radio button)。可以試著將網站涉及到的所有類型的UI元素都陳列出來,提供圖例及前端代碼。

  表單和驗證

  定義表單的整體風格及元素布局,對錶單涉及到的功能流程進行描述;定義表單的驗證規則以及各種有可能出現的錯誤提示等。

  W3C – 標誌的使用規範

  還需要些什麼? 多元化

  有時你也許需要面向不同的使用者建立不同版本的規範。例如,對於某些類型的網站來說,有著不同層級和許可權的內容建立者與管理員,最有效做法是針對不同的角色提供特定的規範指導;當然你也可以將完整版本的規範面向不同職能的人員進行訂製性的簡化。

  目標任務

  為了使相關配合部門在大方向上達成默契,你也許需要在設計規範中結合具體內容對整個的產品目標及階段性的工作任務加以描述,這也可以讓大家充分理解規範的必要性,理解一致化的表現風格及使用者體驗對產品策略的推動作用。

  代碼

  根據設計規範所面向的人員範圍的實際情況,可以考慮將前端代碼標準及最佳實務模式配合圖例進行展示,包括HTML、CSS、JavaScript等。

  檔案規格

  你也許需要面向所有的內容建立者制訂檔案使用方面的規範,包括檔案類型限定、命名規則、版本號碼更新方式等。從長遠的角度來看,這樣可以避免很多瑣碎的潛在問題。

  內容標準

  面向內容的建立者及管理者,你也有必要在規範中對人工產生的內容進行格式化的定義,例如本文內容的長度、標題的字元數等等。另外對於內容的基調,提交與編輯操作的流程、著作權處理方式等等也要作以具有實際指導意義的說明。

  評論和論壇

  如果你的產品為使用者提供了評論功能,或是開設了相關的論壇,那麼你同樣需要對這些方面的管理進行規範。例如,評論內容的審核標準是什麼,怎樣回複使用者的評論,怎樣處理負面內容,在哪些情況下需要關閉評論功能等等。

  可下載,可列印

  如果你通過線上的方式建立的設計規範,那麼要盡量確保相關人員可以將它下載或列印出來,方便離線使用。不過這裡也存在一個問題,就是在更新規範的時候無法對他人手中的離線版本進行同步處理。這種情況下可以嘗試通過郵件通知的方式加以彌補。

  做的漂亮些

  既然是設計規範,那麼其自身的外觀形象也是很重要的。在時間允許的情況下盡量多的使用圖片範例,即保證內容形式上的豐富,也能對設計開發人員更有直觀的參考價值。從某種程度上講,設計規範也是產品整體品質和形象的一個組成部分。當然,如果涉及規範只是供內部設計開發使用,不涉及第三方合作的話,那麼在資源和成本上進行充分的控制也是合理的,譬如一個內部wiki系統就可以滿足最基本的需求。

  參考範例

  最後我們來看一些設計規範的實際範例;這些執行個體主要展示了設計規範在品牌要素的使用規則方面起到的作用。

  譯文代表原作者觀點。歡迎發表評論。

  本站原創編譯文章,如需轉載,請註明:本文來自Be For Web

  英文原文: http://tympanus.net/codrops/2012/09/06/do-i-really-need-a-style-guide/

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。