仔細看一下Dropbox 或者 Google、Twitter，這些公司都有著屬于自己的獨特的設計風格。從手機到電腦網頁，在全部的商品與服務的設計中，“風格統一”已經做到了一致。

 

通過靈活運用風格指南，來完成風格統一的設計把。統一的風格讓用戶覺得可以信賴，這點是非常重要的。不僅如此，他也有著能將商品與服務和用戶連接起來，視為相同設計的作用。

 

這篇文章，仔細了解學習了風格指南和品牌的準則。并且總結了風格指南中所記載的6個要點來讓我們參考。

 

參考這次介紹的樣本和要素，并在今后的設計項目中嘗試著加入這些，讓設計變得更有趣吧。

 

首先在這之前。

 

在你制作風格指南之前，首先需要注意這幾點。

 

0

 

o首先在設計商品與服務之前，讓我們創建一個風格指南。然后找出哪些設計要素是適當的，這你得有一套自己的標準。

 

o風格指南完善是沒有終點的，這也是沒辦法的事。利用萬能的設計語言所制作完成，互動也是非常必要的。

 

o在風格指南制作完成之后，我們還必須想清楚，是不是能很好的將商品里的信息傳遞出來，讓人能夠輕松的理解。

 

01. 基本原則

 

使用風格指南來創建設計中的一些基本原則。設計的基本原則指的是，在開發商品或服務時，設計師是基于哪些標準來解決這些設計的問題的。

 

0-10

 

良好的設計原則是其中的關鍵，設計師在決定設計時，需要對他進行詳細的設定。

 

那么，Apple 的 Human Interface Guideline 詳細記載了一些設計的基本原則，我們可以用來參考。

 

The direct manipulation of onscreen contentengages people and facilitates understanding… Through direct manipulation, theycan see the immediate, visible results of their actions.

 

這段描述是指，可視化的操作是解決物理與數據互相交換的最簡單的解決方法。也就是說，設計師可以利用滑動和旋轉這樣的操作模式來幫助用戶解決操作問題。

 

在考慮設計原則的時候，讓我們盡可能的簡單。從指南的基本原則開始，重復一些相同的工作。

 

如果想查看更多的設計原則，可以參考這篇文章，A Matter of Principle（英文）

 

02. 排字藝術，字體。

 

排字藝術，是可以將復數的商品或設計變得具有統一感的關鍵。在全部的風格指南中，包含了字體所有的詳細說明。

 

為了使設計保持簡潔，限制可用字體的數量和大小是很有必要的。一般的，從最多兩種字體開始是一個非常不錯的選擇。一種用作標題，另一種用于正文。在大部分情況下，除此之外再也不需要其他字體。

 

0-1

 

此外，該參考什么樣的排榜樣式，其他的設計師或開發者使用的是細體字或者是斜體字？使用什么樣的風格會讓人易于理解？這些都是需要考慮的問題。

 

0-12

 

如果你在字體選擇時煩惱用什么好，建議你使用 Typewolf 或 FontPair 這兩個網站。使用 Modular Scale 這個網站來指定字體的大小也是非常不錯的選擇。此外，我們其實并不需要再一開始就將字體決定的非常完美，你可以在后面根據設計需要來慢慢調整。

 

03. 圖像

 

不用語言，而是用圖片展現出來吧。因為圖像是動態的，所以這對設計師來說是非常有幫助的工具。一目了然的傳遞信息，表現出在這之中你所包含的感情。

 

為了傳遞出商品的信息或概念，其他設計師是怎樣利用圖片的，將這些方法詳細記述在風格指南中是非常不錯的方法。

 

0-11

 

Nike就是利用圖片來傳遞品牌形象的一個非常不錯的案例。就像電影的質量一樣，對品牌或使命有著刺激效果。

 

 

0-3

 

下面的示例，就是在風格指南中使用了圖片的Hubspot 的網站。

 

0-2

 

看著這些具體的樣本之前，我們先注意到了照片的色彩或概念。

 

利用什么樣的圖片可以記錄在指南之中，設計師可以更容易地將信息傳遞給用戶，你需要不斷的總結經驗才能表現出來。

 

04. 網格與留白

 

一個良好的設計，會留出與內容相同的空白空間。在風格指南中，讓我們來添加一些反應了這種效果的項目吧。

 

為了方便每次使用，你建立一個網格是非常重要的。在這個項目上，欄數或列數用來描述還剩下多少空間是非常不錯的方法。

 

0-5

讓我們在保證留白的情況下追加一些其他物件吧。通過使用具有統一感的空間寬度，將統一性或平衡感表現出來。

 

0-4

 

通過設置頁邊距，對設計人員和開發人員來說都是有幫助的。特別的，開發人員的 Sass Variable 更夠將樣式實現代碼化。舉個例子，參考Marvel的風格指南，以下記述的便是Sass代碼。【關于Sass，請參考這個網站：http://sass.bootcss.com/】

 

0-14

 

05. 配色，色環

 

配色是風格指南中必須的一項要素。創建出視覺上的層次感，讓用戶的情感與之產生共鳴。

 

項目的配色，設計師需要不斷的嘗試使之更容易工作。如果在研究配色上花了大量的時間，設計師應該去參考風格指南，將注意力集中于設計作品的內容上。舉個例子，Buffer的風格指南上就記載了這樣一句話。

 

通過使用相同的配色方案，可以為商品添加統一與親近熟悉的感覺。Buffer 使用了干凈（英:Clear）、適當（英:Unobtrusive）、友善的（英:Friendly）配色。

 

0-7

 

以上面的例子為例，每個顏色都有屬于他自己的名字。尤其是開發人員可以使用Sass  Variable 將配色變換成代碼。

 

0-15

 

作為顏色名稱的代替，為顏色選出更加易懂的代碼作名稱吧。如果這樣做，設計師和開發者兩方，都可以很容易的調整配色而無需去改動顏色的名字。

 

與配色相關的更多說明，可以參考這篇文章：讓配色變得順暢，你需要記住的7條定律。

 

06. 部件

 

許多設計師和開發人員，將UI部件作為一個整體來考慮。各個UI部件都是獨立的。舉個例子，卡片形的布局每一塊都是獨立的。

 

0-9

 

通過使用這種方法，設計師可以重復利用組件，你可以完成復數的具有一致性的設計。還可以利用有組織的UI組件，來使新設計的完成時間大大縮短。

 

考慮部件使用的地方，這對開發人員來說也是非常有幫助的。從開發人員的角度來看，這些組建就如同樂高積木，可以很輕松的拼接在一起。

 

0-8

 

通過在風格指南上記錄UI組建，也有助于別的設計師參考設計。

 

0-6

 

例如在 Mapbox 中，網頁上需要使用的按鈕和輸入表單等，所有的組建在風格指南中都有著詳細的記述。通過這樣做，設計師和開發人員不管是怎樣的UI組建都可以通過這個來確認是否可用。

 

結語。

 

基本原則、排字藝術、圖片照片、網格與留白、配色與色輪。所列舉的這些并不是完整的版本，這只是一個良好的風格指南所必須的6個重要主題。如果想要更深層次的了解還需要多多的練習與查閱資料，那么一起來享受設計的樂趣吧，我們下次再見~