****初次翻譯，難免顧此失彼，歡迎各位吐槽和提問XD****

原文Designing a Web App UI Kit? in Adobe Photoshop

最終效果

現(xiàn)如今，樣式規(guī)范的發(fā)展提供了非常靈活的現(xiàn)代web設(shè)計方法。在本教程中，我將手把手帶您設(shè)計一份UI Kit（用戶界面工具包），同時也就如何保持UI Kit的一致性和可復(fù)用性進(jìn)行一些介紹。

教程素材
完成本教程你需要找到下面這些（免費(fèi)）素材：
Open Sans字體→ Font Squirrel 或Google Fonts（需要梯子）
素材圖片→ Unsplash
用戶頭像→ Faces
icon→Arrow icon

設(shè)置Photoshop文件
第一步：
打開PS后，新建一個文件（文件>新建…）按照下圖設(shè)置。你也可以按照自己的喜好設(shè)置畫布尺寸，畢竟網(wǎng)頁高度（原文是寬度）是不設(shè)限的。

預(yù)設(shè)尺寸

第二步
讓我們先設(shè)置一些參考線，這樣我們的UI Kit 就變得有組織了。我不是經(jīng)常用PS里的網(wǎng)格，但建立一些參考線是很有必要的，這會讓我們的設(shè)計變得整潔且一致。到（視圖>新參考線）里設(shè)置一些參考線。我通常會選擇1000px作為網(wǎng)頁的寬度，這里也照舊。
注意：本教程參考線設(shè)置，100px，600px和1100px。
小提示: 你也可以用 GuideGuide Photoshop 插件來迅速完成參考線設(shè)置。

參考線

第三步
在PS里，記得保持所有內(nèi)容易于瀏覽和編輯，這是個好習(xí)慣。在工作的時候，我們需要經(jīng)常用到這份UI Kit 做參考和輸出文檔，所以要記得讓它變得有條理些（技術(shù)開發(fā)的小伙伴會感激你的）。讓我們來新建6個圖層組，分別命為“Typography”、“Buttons”、 “Forms”、“Avatars”、“Images”和“ Colors”（排版、按鈕、表單、頭像、圖片和色彩）

去（圖層>新建>組…）創(chuàng)建圖層組，并給每個組命名以防混淆。要快速創(chuàng)建組，點(diǎn)擊下圖所示icon即可。

快速新建組

第一步
打開排版圖層組, 選擇文字工具(T) 選擇Open Sans字體。 Open Sans是一款有著不同粗細(xì)字形（weights）且足夠?qū)I(yè)，正逐漸受到大眾歡迎的現(xiàn)代字體。對標(biāo)題來說，它足夠個性了，在網(wǎng)頁設(shè)計中用作文章主題也經(jīng)得起考驗(yàn)。

和我們上面說的一樣，Open Sans有許多類別，在本次UI Kit里面我們只需要用到一種。千萬記得，在你的項(xiàng)目里不要隨便用超過兩種字體，不然事情很快就變得一團(tuán)糟。

我將前景色又變回了黑色#000000，然后用文字工具（T)，和之前提到的Open Sans，選擇Light模式，選擇55px字號，輸入標(biāo)題文字。為了保持一致性，我們將在以后的標(biāo)題上都選用同樣的字體和字號。

Light模式

輸入標(biāo)題文字

第二步
現(xiàn)在我們需要為排版建立一個層次。查看這篇Ian Yates的How to Establish a Modular Typographic Scale能幫你更好的理解網(wǎng)頁排版的科學(xué)與重要性。

HTML* *(HyperText Markup Language) 有許多不同的標(biāo)簽?zāi)軒椭鸀g覽器翻譯網(wǎng)頁的內(nèi)容。許多標(biāo)簽是專為網(wǎng)頁排版準(zhǔn)備的，比如h1、h2、h3等等。
h1描述的是標(biāo)題，是最重要的部分。在這之后是一個專為圖片準(zhǔn)備的p標(biāo)簽。不用糾纏太多細(xì)節(jié)，HTML能幫我們定義這些網(wǎng)頁元素的外觀。

運(yùn)用文字工具（T)輸入三個標(biāo)題。我用Open Sans (Light) 55px來做h1,44px做h2,32px做h3,并且在他們中間留下30px的間距。間距是另一件需要牢記于心的事情。保持足夠的間距，這樣你的文字才更具可讀性，而且看起來更平衡。

注意：h3我用了Regular的模式。因?yàn)樽煮w變小時，Light模式可能變得不那么清晰。

標(biāo)題

主體文章部分，我選擇了#838383的灰色，標(biāo)題 #000000的黑色以及#006ee3的藍(lán)色鏈接。
標(biāo)題比主體的灰色要深一些，醒目一些。主要內(nèi)容的顏色應(yīng)當(dāng)看著舒服，不費(fèi)眼睛（易于閱讀）。最后，確定下你選了一個不同的顏色來做鏈接用，這樣用戶才知道它們是可以點(diǎn)擊的。

注意設(shè)置標(biāo)題和鏈接的字體為Regular模式，這樣它們看起來更大也更重要。

標(biāo)題和鏈接

創(chuàng)建按鈕

按鈕對網(wǎng)頁設(shè)計來說很重要。大部分時間，他們充當(dāng)了鏈接和提交表格的作用，但同時也能作為導(dǎo)航引導(dǎo)用戶在不同頁面間流轉(zhuǎn)，讓用戶能迅速的做決定（知道去哪里）。給按鈕定義一個一致的外觀是很重要的，這樣用戶在使用app的過程中才不會覺得不知所措。

第一步
點(diǎn)擊層組名邊上的小箭頭，將【Typography】層組最小化。然后打開Buttons層組。然后新建參考線，將內(nèi)容區(qū)域劃分成三等分，每分間隔35px。點(diǎn)擊（視圖>新建參考線…），設(shè)置如下垂直參考線：410px，445px，775px和790px。這就是我們準(zhǔn)備做三個大小一致的按鈕的地方了。

設(shè)置更多垂直參考線

第二步
回到【Typography】層組，找到標(biāo)題的圖層，然后按 ctrl+J復(fù)制一層，將復(fù)制層移到【Buttons】層組。
然后輸入按鈕的三個狀態(tài)文字：Normal, Hover and Active。把它們移到三個均分區(qū)域的左邊，記住三個區(qū)域之間的間隔是35px。

按鈕區(qū)域

第三步

現(xiàn)在將前景色設(shè)置為我們之前用過的藍(lán)色 #006ee3，并且新建一個【Primary Normal】的組。然后選擇矩形圓角工具，設(shè)置圓角為3px，再畫一個310x44px大小的圓角矩形。將它放在Normal下，正好在第一條和第二條輔助線之間。在按鈕上用清晰可讀的白色字（#ffffff）寫下按鈕內(nèi)容，完成按鈕設(shè)計。

初始按鈕.jpg

第四步
現(xiàn)在按下ctrl+J復(fù)制 Primary Button組，并將它們重命名為 Primary Hover 和 Primary Active。在這之后，將這些新的群組放在我們之前做好的headlines下方。你可能會問，hover和 active是啥意思？hover講的是你把鼠標(biāo)移到按鈕上時，按鈕所處的狀態(tài)，所以我們需要在按鈕上做一些改變，形成反饋（交互效果）。而當(dāng)你點(diǎn)擊時，鏈接就變成了active（作用）的狀態(tài)。
在這里，我們對按鈕的hover 和active 進(jìn)行一些簡單的暗化處理。在按鈕層上新建一個圖層，并對它進(jìn)行#000000的黑色填充。在這之后，按住Alt 并將鼠標(biāo)移到兩個圖層中間，直到你看見一個小小的向下箭頭，點(diǎn)擊之后，你就成功地做了一個Clipping Mask（遮罩）最后將圖層的不透明度降到10%。
注意:在按鈕的作用狀態(tài)，可以將黑色遮罩的不透明度變成20%。

建立遮罩

第五步
現(xiàn)在復(fù)制所有以前的按鈕組，并將它們的標(biāo)題和顏色改為次要組。在本教程的后面，我們將定義UI Kit的顏色，現(xiàn)在只需選擇一個顏色并替換之前的藍(lán)色，我用綠色 # 36c265。

二級按鈕

設(shè)計表單
表單在web APP設(shè)計中是一個很重要的元素，它們能讓用戶輸入信息并且與APP進(jìn)行互動。我們會設(shè)計一些基礎(chǔ)的表單樣式，這樣開發(fā)們就能嚴(yán)格按照樣式來保持設(shè)計的一致。
第一步
點(diǎn)擊左邊的小三角最小化Buttons組，新建Forms組。再次從之前的組里復(fù)制title，并將它重命名為 "Forms"。
我們將設(shè)計一些基礎(chǔ)的表單輸入樣式，包括文本輸入，密碼字段，或選擇字段和字段下拉提交（一個簡單的按鈕）。

在設(shè)計表單時，清晰和（令人感覺）熟悉是最關(guān)鍵的因素。不要試圖重新發(fā)明輪子。建立一個新的組，并且命名為“Name”。接著 選用文字工具 (T) ，輸入字段，我這里是用同樣的黑色（#000000）18px Open Sans (Regular) 輸入"First Name" 。

表單輸入

現(xiàn)在復(fù)制一個按鈕的形狀圖層，并將它移到Name組。然后將它的背景色換成白色（#ffffff），增加1px的灰色（ #d5d5d5）內(nèi)描邊。最后，在按鈕背景上輸入文字，我這里用了16px Open Sans (Regular)，灰色（#838383），和之前在正文文本里用的一樣。

輸入表單

第二步
復(fù)制第一個輸入框，來做更多帶抬頭的輸入框。通常，密碼輸入框里面會用到點(diǎn) ? 或者星號 * 。下面是一些例子。

制作更多的輸入框

復(fù)制 ctrl+J一個按鈕，移到Forms組，將它放到新建立的幾個輸入框下面。再一次提醒，保持一致和復(fù)用之前創(chuàng)建的元素很重要。

創(chuàng)建保存按鈕

第三步
在這個教程里，我們將堅(jiān)持一個基本的用戶界面，它將服務(wù)于一個非常簡單的web app。讓我們來創(chuàng)建另外一種輸入模塊——<選擇框>。
復(fù)制一個輸入框，并將它放在第三個和第四個輔助線之間，確保一切都調(diào)整好了。將文字改成任何你喜歡的，任何在右側(cè)加一個簡單的箭頭icon，表明這個表單是可以向下展開的。你可以在這里找到箭頭的icon 。

創(chuàng)建選擇框

第四步
想讓開發(fā)們工作的更輕松的話，再一次確保你做了（active）激活狀態(tài)。想一下，在用戶點(diǎn)擊下拉框的時候，它將是什么樣子的？引導(dǎo)開發(fā)們創(chuàng)造出擁有一致的用戶體驗(yàn)的產(chǎn)品就是設(shè)計師們的工作啦~
復(fù)制之前做的下拉框，選擇直接選擇工具 (A)選中形狀的邊角，選中后你能看見黑色的邊角點(diǎn)，按住Shift，選擇形狀下方的四個點(diǎn)，然后點(diǎn)擊 向下幾次，這樣形狀就在沒有破壞倒角而且是矢量的前提下擴(kuò)張了。
在這之后，復(fù)制文字更改名稱，放在第一個選項(xiàng)的下面。用粗細(xì)為1px的直線工具去做一個簡單的劃分，最后將箭頭改成按鈕的藍(lán)色。這能幫助表明這一塊區(qū)域被激活了。

激活的下拉菜單

第五步
我們將創(chuàng)建一個簡單的錯誤信息提示。比如有人輸入了一個不夠復(fù)雜的密碼時，它就會出現(xiàn)。
復(fù)制 ctrl+J 之前制作的密碼表單，將它放在下拉表單的下面。在這之后，將輸入范圍的邊框改為微妙的紅色（我用的是#eb8686），背景改成有點(diǎn)灰的紅色（#e9dde3）。
最后，選擇一個醒目的紅色，（ #b63131），輸入錯誤提示信息。

創(chuàng)建錯誤提醒表單

到這里表單部分就設(shè)計好了！我主要做了基礎(chǔ)的部分，但是這些足夠你用來開始設(shè)計更復(fù)雜的表單了。

頭像
現(xiàn)如今頭像的設(shè)計在web app中幾乎是標(biāo)準(zhǔn)了，所以我們在視覺上面就能很方便地和其他人進(jìn)行溝通以及區(qū)分不同用戶。
第一步
最小化現(xiàn)在不需要的那些組，新建一個Avatars組，選擇橢圓工具，按住shift，畫一個80x80px的圓。在 uifaces.com 上找到一個圖像。復(fù)制粘貼到你新建的圓上面。按住Alt，將鼠標(biāo)移到兩圖層中間，直到你看見小箭頭的出現(xiàn)，點(diǎn)擊建立圖層蒙版。

創(chuàng)建頭像

第二步

想清楚頭像將被怎么使用，并且設(shè)計不同尺寸的一系列頭像供開發(fā)們使用，折痕重要。例如，大的頭像能用在用戶的資料頁，小一點(diǎn)的可以用在評論區(qū)。簡單地復(fù)制并下移頭像，按住ctrl+T，按住shift，保證等比縮放。

縮放頭像

圖像
我們應(yīng)該創(chuàng)建一個圖像在我們的app里如何展示的例子。我會把圖片放在矩形圓角里，來展示我們app內(nèi)的圖像將這樣展現(xiàn)。
第一步
選擇矩形圓角工具，在垂直的輔助線之間， Avatars組的下面，畫出一個矩形圓角。在這之后，選一張圖片，我在 unsplash.com上找了一張，如果需要的話，ctrl+T對它進(jìn)行縮放，然后建立一個遮罩。

創(chuàng)建圖像樣式

確定顏色
最后我們來確定顏色。一個可靠的顏色很關(guān)鍵，你可以去看看 color theory ，這樣你會對使用顏色的意義與重要性有更好的理解。之所以在最后選擇顏色，是因?yàn)楝F(xiàn)在我們對我們需要規(guī)范的元素有了更好的理解。

第一步
新建Colors組，選擇你之前拿來做按鈕前景色的藍(lán)色。之后，用矩形圓角工具畫一個矩形圓角。選擇文字工具（T)并寫下文字的抬頭，或者它將被用來使用的場合。比如， "Primary Color" ，并提供顏色的相關(guān)代碼信息，比如 HEX, RGB 或其他任何需要的形式。將這一步建立的圖層都放進(jìn)Colors組。

確定顏色

第二步
現(xiàn)在你可以ctrl+J復(fù)制Colors組，制作出你想要的其他顏色樣式。通常我們會選4-5個顏色，因?yàn)檫^多的顏色看起來會顯得亂。你可以在 Kuler 和 COLOURlovers上找找配色靈感。
在這個教程里，你可以看到我用了“主要”和“次要”的顏色，一個用在正文文本上，一個用在標(biāo)題上，而白色被用在輸入背景上。如下圖所示。

更多顏色

最終色彩

恭喜你做到了！

到這里你已經(jīng)擁有了一份還不錯的UI Kit了。它是一份簡易的web app界面設(shè)計風(fēng)格指南。我希望你能理解創(chuàng)造一份風(fēng)格指南的基本，為什么會做這樣一些抉擇，以及它們是怎樣對項(xiàng)目進(jìn)行影響的。
如果你有任何問題的話，歡迎在評論區(qū)提出來！（翻譯君也是這么想的XD）