仔細(xì)看一下Dropbox 或者 Google、Twitter，這些公司都有著屬于自己的獨(dú)特的設(shè)計風(fēng)格。從手機(jī)到電腦網(wǎng)頁，在全部的商品與服務(wù)的設(shè)計中，“風(fēng)格統(tǒng)一”已經(jīng)做到了一致。

 

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

 

這篇文章，仔細(xì)了解學(xué)習(xí)了風(fēng)格指南和品牌的準(zhǔn)則。并且總結(jié)了風(fēng)格指南中所記載的6個要點(diǎn)來讓我們參考。

 

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

 

首先在這之前。

 

在你制作風(fēng)格指南之前，首先需要注意這幾點(diǎn)。

 

0

 

o首先在設(shè)計商品與服務(wù)之前，讓我們創(chuàng)建一個風(fēng)格指南。然后找出哪些設(shè)計要素是適當(dāng)?shù)?，這你得有一套自己的標(biāo)準(zhǔn)。

 

o風(fēng)格指南完善是沒有終點(diǎn)的，這也是沒辦法的事。利用萬能的設(shè)計語言所制作完成，互動也是非常必要的。

 

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

 

01. 基本原則

 

使用風(fēng)格指南來創(chuàng)建設(shè)計中的一些基本原則。設(shè)計的基本原則指的是，在開發(fā)商品或服務(wù)時，設(shè)計師是基于哪些標(biāo)準(zhǔn)來解決這些設(shè)計的問題的。

 

0-10

 

良好的設(shè)計原則是其中的關(guān)鍵，設(shè)計師在決定設(shè)計時，需要對他進(jìn)行詳細(xì)的設(shè)定。

 

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

 

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

 

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

 

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

 

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

 

02. 排字藝術(shù)，字體。

 

排字藝術(shù)，是可以將復(fù)數(shù)的商品或設(shè)計變得具有統(tǒng)一感的關(guān)鍵。在全部的風(fēng)格指南中，包含了字體所有的詳細(xì)說明。

 

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

 

0-1

 

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

 

0-12

 

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

 

03. 圖像

 

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

 

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

 

0-11

 

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

 

 

0-3

 

下面的示例，就是在風(fēng)格指南中使用了圖片的Hubspot 的網(wǎng)站。

 

0-2

 

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

 

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

 

04. 網(wǎng)格與留白

 

一個良好的設(shè)計，會留出與內(nèi)容相同的空白空間。在風(fēng)格指南中，讓我們來添加一些反應(yīng)了這種效果的項目吧。

 

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

 

0-5

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

 

0-4

 

通過設(shè)置頁邊距，對設(shè)計人員和開發(fā)人員來說都是有幫助的。特別的，開發(fā)人員的 Sass Variable 更夠?qū)邮綄崿F(xiàn)代碼化。舉個例子，參考Marvel的風(fēng)格指南，以下記述的便是Sass代碼?！娟P(guān)于Sass，請參考這個網(wǎng)站：http://sass.bootcss.com/】

 

0-14

 

05. 配色，色環(huán)

 

配色是風(fēng)格指南中必須的一項要素。創(chuàng)建出視覺上的層次感，讓用戶的情感與之產(chǎn)生共鳴。

 

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

 

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

 

0-7

 

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

 

0-15

 

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

 

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

 

06. 部件

 

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

 

0-9

 

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

 

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

 

0-8

 

通過在風(fēng)格指南上記錄UI組建，也有助于別的設(shè)計師參考設(shè)計。

 

0-6

 

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

 

結(jié)語。

 

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