界面清單（interface inventories）也就是把自己將要做的組件、模塊都列出來(lái)找到參考并截圖分類，方便打開自己的設(shè)計(jì)思路、統(tǒng)一設(shè)計(jì)風(fēng)格。

問題的開始

在開始我剛開始后臺(tái)設(shè)計(jì)的時(shí)候，因?yàn)橛辛讼?Ant Design，Element等這些優(yōu)秀的團(tuán)隊(duì)所貢獻(xiàn)的規(guī)范指導(dǎo)，剛開始后臺(tái)搭建的時(shí)候往往會(huì)覺得很簡(jiǎn)單。（下載超贊的網(wǎng)站后臺(tái)設(shè)計(jì)規(guī)范模板）

但是隨著后臺(tái)項(xiàng)目所涉及的功能增加，使用其他平臺(tái)現(xiàn)成的組件進(jìn)行照搬根本就沒辦法解決自己現(xiàn)在的問題，而此時(shí)項(xiàng)目往往已經(jīng)開始了一段時(shí)間了，現(xiàn)在再重新做實(shí)在有些來(lái)不及，只能各種尋找類似的組件搭建出一個(gè)令自己不是很滿意的界面。

怎么去解決這樣的困境呢？在學(xué)習(xí)原子設(shè)計(jì)（Atomic Design）的時(shí)候，里面所講述列界面清單的方法一定會(huì)對(duì)你有所幫助。

準(zhǔn)備工作

制作一個(gè)界面清單會(huì)產(chǎn)生許多的截圖，選擇你常用的工具就行。我通常會(huì)用 Sketch 進(jìn)行排列。

工具使用什么都行，主要看它是否利于截圖的查看和分類整理。

列出清單

在開始前，你需要盡可能多的把自己要做的項(xiàng)目中的界面元素盡可能全的列舉出來(lái)。

你可以先從大的類別開始，還記得原子設(shè)計(jì)中之前說過的界面的構(gòu)成元素么？

原子、分子、有機(jī)體、模版、頁(yè)面

原子是在構(gòu)成頁(yè)面時(shí)最基本和最小的單位，，例如：顏色、文字、圖標(biāo)、分割線等。

我們將幾個(gè)原子組合起來(lái)便形成了分子，也就是在頁(yè)面中所出現(xiàn)相對(duì)簡(jiǎn)單的組件例如：按鈕、輸入欄、導(dǎo)航欄、搜索框等。

當(dāng)原子和分子組合排列就會(huì)得到有機(jī)體，它是界面中相對(duì)復(fù)雜的組件。

而模版就是將上面提到過的原子、分子、有機(jī)體都排列組合起來(lái)，將它們分層放置在布局中。

最后將真實(shí)的數(shù)據(jù)、狀態(tài)應(yīng)用到模版中去，就形成了我們所使用的頁(yè)面。

從大的類別開始然后往下拆分，比如你可以試著從這些方面入手：

通用組件：在整個(gè)系統(tǒng)中通用的組件，如頁(yè)眉，頁(yè)腳等。

導(dǎo)航：頭部導(dǎo)航，頁(yè)腳導(dǎo)航，分頁(yè)導(dǎo)航等，只要是能用于用戶界面導(dǎo)航的任何東西。

圖像：logo的擺放，首頁(yè)大圖的鋪開方式，用戶頭像，縮略圖，背景，在界面中顯示的任何其他類型的圖像模式。

圖標(biāo)：不同的風(fēng)格或者是你之后會(huì)用到的特殊行業(yè)的圖標(biāo)，不管是首頁(yè)、上傳、確定、發(fā)現(xiàn)、搜索等等。

表單：輸入，文本區(qū)域，選擇菜單，復(fù)選框，開關(guān)，單選按鈕，滑塊和其他一切形式的用戶輸入。

按鈕：主要按鈕，次要按鈕，大按鈕，小按鈕，禁用按鈕，活動(dòng)，加載，甚至看起來(lái)像文本鏈接的按鈕。

標(biāo)題：有 h1 ， h2 ， h3 ， h4 ， h5 ， h6和排版標(biāo)題的變體。

列表：列表類型的格式是以無(wú)序的，有序的，定義，項(xiàng)目符號(hào)，編號(hào)，線框表，條紋表，或任何組元素呈現(xiàn)的。

媒體：視頻播放器，音頻播放器和其他多媒體元素。

第三方組件：窗口小部件，內(nèi)部框架，對(duì)話框，分享，任何未在你的域名上托管的組件。

廣告：所有的廣告類型和尺寸。

消息：警示，成功，錯(cuò)誤，警告，驗(yàn)證，加載，彈出窗口，工具提示等。

顏色：收集界面中呈現(xiàn)的所有種類的顏色。

交互動(dòng)效：如移動(dòng)，淡化，抖動(dòng)，轉(zhuǎn)換或閃爍的任何UI元素，截圖不方便的話可以選擇錄屏。

交互式組件：折疊面板，Tab標(biāo)簽，輪播圖，和其他具有移動(dòng)部件的功能模塊。

以上所列舉的并不是固定的，開始分類的時(shí)候一定要注意好好理解項(xiàng)目，根據(jù)你要做的項(xiàng)目來(lái)制定清單列表。

當(dāng)你所需要的清單都完成了之后，你就要好好審視一下：

有哪些樣式保留，哪些應(yīng)該去除，哪些樣式可以合并？

哪些參考是我們可以使用的組件模式，哪些組件是可以借鑒的？

有沒有可以優(yōu)化的交互方式，或者哪些交互可以用在自己的項(xiàng)目中？

各個(gè)按鈕的樣式和狀態(tài)

審視完界面清單以后，就要準(zhǔn)備選出自己需要用到的模塊和組件好復(fù)用在自己的界面設(shè)計(jì)中。這一個(gè)過程就像是搭樂高積木一樣，收集、整理、組裝。

注意事項(xiàng)

很多時(shí)候我們?nèi)フ覅⒖迹夭恼业脑蕉嘣讲恢雷约阂鍪裁?。這時(shí)候一定要記得回想一下我們剛開始所設(shè)定的風(fēng)格規(guī)則，想想我們是要用卡片的還是描邊的，是間距大的還是緊湊的。邊找素材邊提醒自己：這個(gè)界面雖然好看，但它不符合我開始設(shè)定的規(guī)則。

還有就是一定要注意時(shí)間，不要貪多！大致看一眼參考和自己設(shè)定的風(fēng)格一樣就可以留下來(lái)不要想其他。每一個(gè)類別花40-70 分鐘就已經(jīng)夠了。截圖的時(shí)候你可以試著給自己設(shè)定一個(gè)鬧鐘，后面我們還會(huì)對(duì)截圖進(jìn)行篩選所以不要在這一步花太多時(shí)間。

關(guān)于界面清單

在我們剛開始學(xué)習(xí)美術(shù)的時(shí)候，都是從臨摹開始的，沒有一開始就選擇進(jìn)行創(chuàng)作的。通過臨摹一點(diǎn)一點(diǎn)的打牢基礎(chǔ)，有了扎實(shí)的基礎(chǔ)才進(jìn)行下一步的學(xué)習(xí)。

我覺得設(shè)計(jì)也是一樣的，沒有說突然間有了快速設(shè)計(jì)界面的方法，羅馬不是一夜建成的一步一步來(lái)，看下別人用的什么方法和樣式，尤其對(duì)于 UI 設(shè)計(jì)來(lái)說借鑒成熟的設(shè)計(jì)模式能讓你成長(zhǎng)的更快。剛開始制作界面清單的時(shí)候會(huì)比較困難，但你堅(jiān)持下去從現(xiàn)有的截圖中找到規(guī)律，為你后面構(gòu)建一個(gè)完善的界面打下牢固的基礎(chǔ)。

原創(chuàng)： 劉清 （海鹽社）