不知道大家有沒(méi)有聽(tīng)過(guò) InVision 呢？這是一家總部位于紐約的公司，主要提供設(shè)計(jì)師共享設(shè)計(jì)原型，利用這個(gè)平臺(tái)可以更輕易與其他人討論、修改設(shè)計(jì)，同時(shí)也可以獲得更為實(shí)時(shí)回饋。利用 InVision 讓設(shè)計(jì)不再是設(shè)計(jì)師或設(shè)計(jì)團(tuán)隊(duì)的工作，全體員工都能參與，以創(chuàng)造出更精致的設(shè)計(jì)，使用者也能獲得更好的使用體驗(yàn)。

近期 InVision 釋出一款名為「Chat」的UI資源包讓需要的開(kāi)發(fā)者免費(fèi)下載！依照網(wǎng)站提供的圖片，可以看到這款設(shè)計(jì)非常簡(jiǎn)約美觀，帶有Material Design 設(shè)計(jì)風(fēng)格。

無(wú)論網(wǎng)頁(yè)、平板計(jì)算機(jī)或手持設(shè)備—「Chat」一手包辦！包括 60 種模版、12 種類(lèi)及 80 個(gè)UI界面組件，使用這套設(shè)計(jì)包可協(xié)助你打造出最棒的應(yīng)用程序。

設(shè)計(jì)精簡(jiǎn)化，同時(shí)也有干凈利落、平面效果，讓使用者將注意力放在畫(huà)面內(nèi)容，而不會(huì)被界面混淆。如果你正好在開(kāi)發(fā)一款 App ，或者想從其他人的設(shè)計(jì)找尋靈感，以下我會(huì)教你如何免費(fèi)下載「Chat」，包含 Sketch 和 Photoshop 適用的兩種檔案版本。

Chat UI kit by InVision

STEP 1

開(kāi)啟「Chat UI kit by InVision」網(wǎng)頁(yè)后，往下拖曳找到 Screens，這里收錄許多 Chat 實(shí)際操作的畫(huà)面擷圖，可以看到它的設(shè)計(jì)偏向于 Material Design 且有平面化效果。點(diǎn)選右邊的選單按鈕，還能找到在登入、注冊(cè)、個(gè)人檔案、主畫(huà)面、聊天室、相簿、狀態(tài)、設(shè)定等不同功能的效果。

STEP 2

點(diǎn)選畫(huà)面截圖來(lái)放大設(shè)計(jì)。不得不說(shuō)這套「Chat」用戶接口設(shè)計(jì)包實(shí)在非常好看！可惜我沒(méi)有要開(kāi)發(fā)應(yīng)用程序，不然可能會(huì)很想直接將它拿來(lái)套用。

STEP 3

將畫(huà)面拖曳到最底下的「Download」部分，輸入你的 Email 后點(diǎn)選「Send」來(lái)收取下載鏈結(jié)。InVision 會(huì)把下載點(diǎn)寄到你的 Email 信箱，請(qǐng)記得填寫(xiě)正確。

STEP 4

開(kāi)啟 InVision 寄來(lái)的郵件，郵件內(nèi)就有「Download Chat UI kit」兩個(gè)鏈結(jié)按鈕，分別可以取得 Photoshop 和 Sketch 的兩種文件格式！