選單

InVision 釋出「Chat」使用者介面 UI 設計包免費下載(Sketch & Photoshop)

InVision 釋出「Chat」使用者介面 UI 設計包免費下載(Sketch & Photoshop)

不知道大家有沒有聽過 InVision 呢?這是一家總部位於紐約的公司,主要提供設計師共享設計原型,利用這個平台可以更輕易與其他人討論、修改設計,同時也可以獲得更為即時回饋。利用 InVision 讓設計不再是設計師或設計團隊的工作,全體員工都能參與,以創造出更精緻的設計,使用者也能獲得更好的使用體驗。

近期 InVision 釋出一款名為「Chat」的使用者介面(User Interface, UI)讓需要的開發者免費下載!依照網站提供的圖片,可以看到這款設計非常簡約美觀,帶有 Material Design 設計風格。

無論網頁、平板電腦或行動裝置—「Chat」一手包辦!包括 60 種模版、12 種類及 80 個使用者介面組件,使用這套 UI 設計包可協助你打造出最棒的應用程式。

設計精簡化,同時也有乾淨俐落、平面效果,讓使用者將注意力放在畫面內容,而不會被介面混淆。如果你正好在開發一款 App ,或者想從其他人的設計找尋靈感,以下我會教你如何免費下載「Chat」,包含 Sketch 和 Photoshop 適用的兩種檔案版本。

網站名稱:Chat UI kit by InVision
網站鏈結:https://www.invisionapp.com/chat

使用教學

STEP 1

開啟「Chat UI kit by InVision」網頁後,往下拖曳找到 Screens,這裡收錄許多 Chat 實際操作的畫面擷圖,可以看到它的設計偏向於 Material Design 且有平面化效果。點選右邊的選單按鈕,還能找到在登入、註冊、個人檔案、主畫面、聊天室、相簿、狀態、設定等不同功能的效果。

InVision 釋出「Chat」免費使用者介面 UI 設計包下載(Sketch & Photoshop)

STEP 2

點選畫面擷圖來放大設計。不得不說這套「Chat」使用者介面設計包實在非常好看!可惜我沒有要開發應用程式,不然可能會很想直接將它拿來套用。

InVision 釋出「Chat」免費使用者介面 UI 設計包下載(Sketch & Photoshop)

STEP 3

將畫面拖曳到最底下的「Download」部分,輸入你的 Email 後點選「Send」來收取下載鏈結。InVision 會把下載點寄到你的 Email 信箱,請記得填寫正確。

InVision 釋出「Chat」免費使用者介面 UI 設計包下載(Sketch & Photoshop)

STEP 4

開啟 InVision 寄來的郵件,郵件內就有「Download Chat UI kit」兩個鏈結按鈕,分別可以取得 Photoshop 和 Sketch 的兩種檔案格式!

InVision 釋出「Chat」免費使用者介面 UI 設計包下載(Sketch & Photoshop)

分享本文