注意這六點，打造實用又美觀的設(shè)計風(fēng)格

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

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

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

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

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

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

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

01. 基本原則

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

良好的設(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ù)一些相同的工作。

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

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

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

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

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

03. 圖像

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

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

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

圖像并沒有限制的必要。Dropbox 這樣的公司，雖然設(shè)計上并沒有使用很多的照片，但作為代替他使用了很多插圖，網(wǎng)站的個性就變得閃耀起來了。

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

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

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

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

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

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

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

通過設(shè)置頁邊距，對設(shè)計人員和開發(fā)人員來說都是有幫助的。特別的，開發(fā)人員的 Sass Variable 更夠?qū)�樣式實現(xiàn)代碼化。舉個例子，參考Marvel的風(fēng)格指南，以下記述的便是Sass代碼。

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）配色。

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

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

06. 部件

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

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

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

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

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

結(jié)語。

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