首先在設(shè)計商品與服務(wù)之前，讓我們創(chuàng)建一個風格指南。然后找出哪些設(shè)計要素是適當?shù)?，這你得有一套自己的標準。風格指南完善是沒有終點的，這也是沒辦法的事。利用萬能的設(shè)計語言所制作完成，互動也是非常必要的。在風格指南制作完成之后，我們還必須想清楚，是不是能很好的將商品里的信息傳遞出來，讓人能夠輕松的理解。 01. 基本原則 使用風格指南來創(chuàng)建設(shè)計中的一些基本原則。設(shè)計的基本原則指的是，在開發(fā)商品或服務(wù)時，設(shè)計師是基于哪些標準來解決這些設(shè)計的問題的。
良好的設(shè)計原則是其中的關(guān)鍵，設(shè)計師在決定設(shè)計時，需要對他進行詳細的設(shè)定。那么，Apple 的 Human Interface Guideline 詳細記載了一些設(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)鍵。在全部的風格指南中，包含了字體所有的詳細說明。為了使設(shè)計保持簡潔，限制可用字體的數(shù)量和大小是很有必要的。一般的，從最多兩種字體開始是一個非常不錯的選擇。一種用作標題，另一種用于正文。在大部分情況下，除此之外再也不需要其他字體。
此外，該參考什么樣的排榜樣式，其他的設(shè)計師或開發(fā)者使用的是細體字或者是斜體字？使用什么樣的風格會讓人易于理解？這些都是需要考慮的問題。 如果你在字體選擇時煩惱用什么好，建議你使用 Typewolf 或 FontPair 這兩個網(wǎng)站。使用 Modular Scale 這個網(wǎng)站來指定字體的大小也是非常不錯的選擇。此外，我們其實并不需要再一開始就將字體決定的非常完美，你可以在后面根據(jù)設(shè)計需要來慢慢調(diào)整。 03. 圖像 不用語言，而是用圖片展現(xiàn)出來吧。因為圖像是動態(tài)的，所以這對設(shè)計師來說是非常有幫助的工具。一目了然的傳遞信息，表現(xiàn)出在這之中你所包含的感情。為了傳遞出商品的信息或概念，其他設(shè)計師是怎樣利用圖片的，將這些方法詳細記述在風格指南中是非常不錯的方法。
Nike就是利用圖片來傳遞品牌形象的一個非常不錯的案例。就像電影的質(zhì)量一樣，對品牌或使命有著刺激效果。圖像并沒有限制的必要。Dropbox 這樣的公司，雖然設(shè)計上并沒有使用很多的照片，但作為代替他使用了很多插圖，網(wǎng)站的個性就變得閃耀起來了。 下面的示例，就是在風格指南中使用了圖片的Hubspot 的網(wǎng)站。 看著這些具體的樣本之前，我們先注意到了照片的色彩或概念。利用什么樣的圖片可以記錄在指南之中，設(shè)計師可以更容易地將信息傳遞給用戶，你需要不斷的總結(jié)經(jīng)驗才能表現(xiàn)出來。 04. 網(wǎng)格與留白 一個良好的設(shè)計，會留出與內(nèi)容相同的空白空間。在風格指南中，讓我們來添加一些反應(yīng)了這種效果的項目吧。為了方便每次使用，你建立一個網(wǎng)格是非常重要的。在這個項目上，欄數(shù)或列數(shù)用來描述還剩下多少空間是非常不錯的方法。
讓我們在保證留白的情況下追加一些其他物件吧。通過使用具有統(tǒng)一感的空間寬度，將統(tǒng)一性或平衡感表現(xiàn)出來。 通過設(shè)置頁邊距，對設(shè)計人員和開發(fā)人員來說都是有幫助的。特別的，開發(fā)人員的 Sass Variable 更夠?qū)邮綄崿F(xiàn)代碼化。舉個例子，參考Marvel的風格指南，以下記述的便是Sass代碼 05. 配色，色環(huán) 配色是風格指南中必須的一項要素。創(chuàng)建出視覺上的層次感，讓用戶的情感與之產(chǎn)生共鳴。項目的配色，設(shè)計師需要不斷的嘗試使之更容易工作。如果在研究配色上花了大量的時間，設(shè)計師應(yīng)該去參考風格指南，將注意力集中于設(shè)計作品的內(nèi)容上。舉個例子，Buffer的風格指南上就記載了這樣一句話。通過使用相同的配色方案，可以為商品添加統(tǒng)一與親近熟悉的感覺。Buffer 使用了干凈的配色。
以上面的例子為例，每個顏色都有屬于他自己的名字。尤其是開發(fā)人員可以使用Sass Variable 將配色變換成代碼。 作為顏色名稱的代替，為顏色選出更加易懂的代碼作名稱吧。如果這樣做，設(shè)計師和開發(fā)者兩方，都可以很容易的調(diào)整配色而無需去改動顏色的名字。與配色相關(guān)的更多說明，可以參考這篇文章：讓配色變得順暢，你需要記住的7條定律。 06. 部件 許多設(shè)計師和開發(fā)人員，將UI部件作為一個整體來考慮。各個UI部件都是獨立的。舉個例子，卡片形的布局每一塊都是獨立的。
通過使用這種方法，設(shè)計師可以重復(fù)利用組件，你可以完成復(fù)數(shù)的具有一致性的設(shè)計。還可以利用有組織的UI組件，來使新設(shè)計的完成時間大大縮短?？紤]部件使用的地方，這對開發(fā)人員來說也是非常有幫助的。從開發(fā)人員的角度來看，這些組建就如同樂高積木，可以很輕松的拼接在一起。 通過在風格指南上記錄UI組建，也有助于別的設(shè)計師參考設(shè)計。 例如在 Mapbox 中，網(wǎng)頁上需要使用的按鈕和輸入表單等，所有的組建在風格指南中都有著詳細的記述。通過這樣做，設(shè)計師和開發(fā)人員不管是怎樣的UI組建都可以通過這個來確認是否可用。 結(jié)語 基本原則、排字藝術(shù)、圖片照片、網(wǎng)格與留白、配色與色輪。所列舉的這些并不是完整的版本，這只是一個良好的風格指南所必須的6個重要主題。如果想要更深層次的了解還需要多多的練習與查閱資料，那么一起來享受設(shè)計的樂趣吧，我們下次再見~
