****初次翻譯，難免顧此失彼，歡迎各位吐槽和提問XD****
現如今，樣式規范的發展提供了非常靈活的現代web設計方法。在本教程中，我將手把手帶您設計一份UI Kit（用戶界面工具包），同時也就如何保持UI Kit的一致性和可復用性進行一些介紹。
教程素材
完成本教程你需要找到下面這些（免費）素材：
Open Sans字體→ Font Squirrel 或Google Fonts（需要梯子）
素材圖片→ Unsplash
用戶頭像→ Faces
icon→Arrow icon
設置Photoshop文件
第一步：
打開PS后，新建一個文件（文件>新建…）按照下圖設置。你也可以按照自己的喜好設置畫布尺寸，畢竟網頁高度（原文是寬度）是不設限的。
第二步
讓我們先設置一些參考線，這樣我們的UI Kit 就變得有組織了。我不是經常用PS里的網格，但建立一些參考線是很有必要的，這會讓我們的設計變得整潔且一致。到（視圖>新參考線）里設置一些參考線。我通常會選擇1000px作為網頁的寬度，這里也照舊。
注意：本教程參考線設置，100px，600px和1100px。
小提示: 你也可以用 GuideGuide Photoshop 插件來迅速完成參考線設置。
第三步
在PS里，記得保持所有內容易于瀏覽和編輯，這是個好習慣。在工作的時候，我們需要經常用到這份UI Kit 做參考和輸出文檔，所以要記得讓它變得有條理些（技術開發的小伙伴會感激你的）。讓我們來新建6個圖層組，分別命為“Typography”、“Buttons”、 “Forms”、“Avatars”、“Images”和“ Colors”（排版、按鈕、表單、頭像、圖片和色彩）
去（圖層>新建>組…）創建圖層組，并給每個組命名以防混淆。要快速創建組，點擊下圖所示icon即可。
定義排版
正如Oliver Reichenstein 的名言“網頁設計的95%是關于排版”所說，排版這塊你得好好花點功夫。
首先我們需要為我們的排版設置一個完美的環境；一個眼睛看起來比較中性且養眼的背景。背景和排版需要保持合理的對比度，以便于閱讀。本教程中我們設置微妙的淺灰色——一個中性色，但是又足夠強烈，能讓你的APP更有個性。我把前景色設置為#e9eeef，點擊Alt+Backspace，填充顏色（在這之前新建個圖層）。
第一步
打開排版圖層組, 選擇文字工具(T) 選擇Open Sans字體。 Open Sans是一款有著不同粗細字形（weights）且足夠專業，正逐漸受到大眾歡迎的現代字體。對標題來說，它足夠個性了，在網頁設計中用作文章主題也經得起考驗。
和我們上面說的一樣，Open Sans有許多類別，在本次UI Kit里面我們只需要用到一種。千萬記得，在你的項目里不要隨便用超過兩種字體，不然事情很快就變得一團糟。
我將前景色又變回了黑色#000000，然后用文字工具（T)，和之前提到的Open Sans，選擇Light模式，選擇55px字號，輸入標題文字。為了保持一致性，我們將在以后的標題上都選用同樣的字體和字號。
第二步
現在我們需要為排版建立一個層次。查看這篇Ian Yates的How to Establish a Modular Typographic Scale能幫你更好的理解網頁排版的科學與重要性。
HTML* *(HyperText Markup Language) 有許多不同的標簽能幫助瀏覽器翻譯網頁的內容。許多標簽是專為網頁排版準備的，比如h1、h2、h3等等。
h1描述的是標題，是最重要的部分。在這之后是一個專為圖片準備的p標簽。不用糾纏太多細節，HTML能幫我們定義這些網頁元素的外觀。
運用文字工具（T)輸入三個標題。我用Open Sans (Light) 55px來做h1,44px做h2,32px做h3,并且在他們中間留下30px的間距。間距是另一件需要牢記于心的事情。保持足夠的間距，這樣你的文字才更具可讀性，而且看起來更平衡。
注意：h3我用了Regular的模式。因為字體變小時，Light模式可能變得不那么清晰。
第三步
既然我們已經做了標題的設置，那就跳到實際的文本部分吧。好好考慮你UI Kit里設計后續各種顯示的可能性，這樣開發人員才能還原出你設想的方案。考慮下標題樣式在段落里的展示，加粗，斜體還有鏈接。
主體文章部分，我選擇了#838383的灰色，標題 #000000的黑色以及#006ee3的藍色鏈接。
標題比主體的灰色要深一些，醒目一些。主要內容的顏色應當看著舒服，不費眼睛（易于閱讀）。最后，確定下你選了一個不同的顏色來做鏈接用，這樣用戶才知道它們是可以點擊的。
注意設置標題和鏈接的字體為Regular模式，這樣它們看起來更大也更重要。
創建按鈕
按鈕對網頁設計來說很重要。大部分時間，他們充當了鏈接和提交表格的作用，但同時也能作為導航引導用戶在不同頁面間流轉，讓用戶能迅速的做決定（知道去哪里）。給按鈕定義一個一致的外觀是很重要的，這樣用戶在使用app的過程中才不會覺得不知所措。
第一步
點擊層組名邊上的小箭頭，將【Typography】層組最小化。然后打開Buttons層組。然后新建參考線，將內容區域劃分成三等分，每分間隔35px。點擊（視圖>新建參考線…），設置如下垂直參考線：410px，445px，775px和790px。這就是我們準備做三個大小一致的按鈕的地方了。
第二步
回到【Typography】層組，找到標題的圖層，然后按 ctrl+J復制一層，將復制層移到【Buttons】層組。
然后輸入按鈕的三個狀態文字：Normal, Hover and Active。把它們移到三個均分區域的左邊，記住三個區域之間的間隔是35px。
第三步
現在將前景色設置為我們之前用過的藍色 #006ee3，并且新建一個【Primary Normal】的組。然后選擇矩形圓角工具，設置圓角為3px，再畫一個310x44px大小的圓角矩形。將它放在Normal下，正好在第一條和第二條輔助線之間。在按鈕上用清晰可讀的白色字（#ffffff）寫下按鈕內容，完成按鈕設計。
第四步
現在按下ctrl+J復制 Primary Button組，并將它們重命名為 Primary Hover 和 Primary Active。在這之后，將這些新的群組放在我們之前做好的headlines下方。你可能會問，hover和 active是啥意思？hover講的是你把鼠標移到按鈕上時，按鈕所處的狀態，所以我們需要在按鈕上做一些改變，形成反饋（交互效果）。而當你點擊時，鏈接就變成了active（作用）的狀態。
在這里，我們對按鈕的hover 和active 進行一些簡單的暗化處理。在按鈕層上新建一個圖層，并對它進行#000000的黑色填充。在這之后，按住Alt 并將鼠標移到兩個圖層中間，直到你看見一個小小的向下箭頭，點擊之后，你就成功地做了一個Clipping Mask（遮罩）最后將圖層的不透明度降到10%。
注意:在按鈕的作用狀態，可以將黑色遮罩的不透明度變成20%。
第五步
現在復制所有以前的按鈕組，并將它們的標題和顏色改為次要組。在本教程的后面，我們將定義UI Kit的顏色，現在只需選擇一個顏色并替換之前的藍色，我用綠色 # 36c265。
設計表單
表單在web APP設計中是一個很重要的元素，它們能讓用戶輸入信息并且與APP進行互動。我們會設計一些基礎的表單樣式，這樣開發們就能嚴格按照樣式來保持設計的一致。
第一步
點擊左邊的小三角最小化Buttons組，新建Forms組。再次從之前的組里復制title，并將它重命名為 "Forms"。
我們將設計一些基礎的表單輸入樣式，包括文本輸入，密碼字段，或選擇字段和字段下拉提交（一個簡單的按鈕）。
在設計表單時，清晰和（令人感覺）熟悉是最關鍵的因素。不要試圖重新發明輪子。建立一個新的組，并且命名為“Name”。接著 選用文字工具 (T) ，輸入字段，我這里是用同樣的黑色（#000000）18px Open Sans (Regular) 輸入"First Name" 。
現在復制一個按鈕的形狀圖層，并將它移到Name組。然后將它的背景色換成白色（#ffffff），增加1px的灰色（ #d5d5d5）內描邊。最后，在按鈕背景上輸入文字，我這里用了16px Open Sans (Regular)，灰色（#838383），和之前在正文文本里用的一樣。
第二步
復制第一個輸入框，來做更多帶抬頭的輸入框。通常，密碼輸入框里面會用到點 ? 或者星號 * 。下面是一些例子。
復制 ctrl+J一個按鈕，移到Forms組，將它放到新建立的幾個輸入框下面。再一次提醒，保持一致和復用之前創建的元素很重要。
第三步
在這個教程里，我們將堅持一個基本的用戶界面，它將服務于一個非常簡單的web app。讓我們來創建另外一種輸入模塊——<選擇框>。
復制一個輸入框，并將它放在第三個和第四個輔助線之間，確保一切都調整好了。將文字改成任何你喜歡的，任何在右側加一個簡單的箭頭icon，表明這個表單是可以向下展開的。你可以在這里找到箭頭的icon 。
第四步
想讓開發們工作的更輕松的話，再一次確保你做了（active）激活狀態。想一下，在用戶點擊下拉框的時候，它將是什么樣子的？引導開發們創造出擁有一致的用戶體驗的產品就是設計師們的工作啦~
復制之前做的下拉框，選擇直接選擇工具 (A)選中形狀的邊角，選中后你能看見黑色的邊角點，按住Shift，選擇形狀下方的四個點，然后點擊 向下幾次，這樣形狀就在沒有破壞倒角而且是矢量的前提下擴張了。
在這之后，復制文字更改名稱，放在第一個選項的下面。用粗細為1px的直線工具去做一個簡單的劃分，最后將箭頭改成按鈕的藍色。這能幫助表明這一塊區域被激活了。
第五步
我們將創建一個簡單的錯誤信息提示。比如有人輸入了一個不夠復雜的密碼時，它就會出現。
復制 ctrl+J 之前制作的密碼表單，將它放在下拉表單的下面。在這之后，將輸入范圍的邊框改為微妙的紅色（我用的是#eb8686），背景改成有點灰的紅色（#e9dde3）。
最后，選擇一個醒目的紅色，（ #b63131），輸入錯誤提示信息。
到這里表單部分就設計好了！我主要做了基礎的部分，但是這些足夠你用來開始設計更復雜的表單了。
頭像
現如今頭像的設計在web app中幾乎是標準了，所以我們在視覺上面就能很方便地和其他人進行溝通以及區分不同用戶。
第一步
最小化現在不需要的那些組，新建一個Avatars組，選擇橢圓工具，按住shift，畫一個80x80px的圓。在 uifaces.com 上找到一個圖像。復制粘貼到你新建的圓上面。按住Alt，將鼠標移到兩圖層中間，直到你看見小箭頭的出現，點擊建立圖層蒙版。
第二步
想清楚頭像將被怎么使用，并且設計不同尺寸的一系列頭像供開發們使用，折痕重要。例如，大的頭像能用在用戶的資料頁，小一點的可以用在評論區。簡單地復制并下移頭像，按住ctrl+T，按住shift，保證等比縮放。
圖像
我們應該創建一個圖像在我們的app里如何展示的例子。我會把圖片放在矩形圓角里，來展示我們app內的圖像將這樣展現。
第一步
選擇矩形圓角工具，在垂直的輔助線之間， Avatars組的下面，畫出一個矩形圓角。在這之后，選一張圖片，我在 unsplash.com上找了一張，如果需要的話，ctrl+T對它進行縮放，然后建立一個遮罩。
確定顏色
最后我們來確定顏色。一個可靠的顏色很關鍵，你可以去看看 color theory ，這樣你會對使用顏色的意義與重要性有更好的理解。之所以在最后選擇顏色，是因為現在我們對我們需要規范的元素有了更好的理解。
第一步
新建Colors組，選擇你之前拿來做按鈕前景色的藍色。之后，用矩形圓角工具畫一個矩形圓角。選擇文字工具（T)并寫下文字的抬頭，或者它將被用來使用的場合。比如， "Primary Color" ，并提供顏色的相關代碼信息，比如 HEX, RGB 或其他任何需要的形式。將這一步建立的圖層都放進Colors組。
第二步
現在你可以ctrl+J復制Colors組，制作出你想要的其他顏色樣式。通常我們會選4-5個顏色，因為過多的顏色看起來會顯得亂。你可以在 Kuler 和 COLOURlovers上找找配色靈感。
在這個教程里，你可以看到我用了“主要”和“次要”的顏色，一個用在正文文本上，一個用在標題上，而白色被用在輸入背景上。如下圖所示。
恭喜你做到了！
到這里你已經擁有了一份還不錯的UI Kit了。它是一份簡易的web app界面設計風格指南。我希望你能理解創造一份風格指南的基本，為什么會做這樣一些抉擇，以及它們是怎樣對項目進行影響的。
如果你有任何問題的話，歡迎在評論區提出來！（翻譯君也是這么想的XD）
