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