有沒有UI設(shè)計師必備的網(wǎng)站推薦?

時間：2023-12-12 04:24:01 | 來源：網(wǎng)站運營

時間：2023-12-12 04:24:01 來源：網(wǎng)站運營

有沒有UI設(shè)計師必備的網(wǎng)站推薦?：有的哈！皮仔這就來給大家分享 UI 設(shè)計師必備的 8 個網(wǎng)站，每一個都是親測后覺得好用才推薦給大家的，誠意滿滿，記得看到最后哦～

在線設(shè)計網(wǎng)站 Pixso

雖然現(xiàn)在不少人的電腦硬盤隨隨便便都是 1 TB，但本著「能省就省」的原則，皮仔還是更喜歡使用在線的設(shè)計工具——Pixso。

Pixso：一款集 UI 設(shè)計、原型設(shè)計、交互設(shè)計和設(shè)計交付功能于一身的在線設(shè)計工具，軟件功能不僅全，而且也好使，拿來做 UI 設(shè)計也不在話下。

如果你是第一次接觸 Pixso，對它還不夠了解，可以戳下方的視頻，5 分鐘即可快速上手▼▼

在 UI 設(shè)計方面，Pixso 提供了多個可以提升 UI 設(shè)計效率的功能，例如布局網(wǎng)格(柵格系統(tǒng))、自動布局、組件變體等。

UI 設(shè)計中有些組件會有多種狀態(tài)，每種狀態(tài)會對應(yīng)一種圖標樣式，當組件狀態(tài)數(shù)量比較少的時候，組件的管理和復用還比較簡單，而當狀態(tài)數(shù)量一多，其復雜度也會隨之上升。

對于這類場景，可以使用 Pixso 的「組件變體」功能，通過組件狀態(tài)間的切換，來更高效地管理和復用組件。

以下圖的兩個錘子為例，有填充和沒填充的錘子圖標，分別代表組件的兩種不同狀態(tài)。選中兩個錘子圖標，在右側(cè)欄選擇「創(chuàng)建組件集」。

創(chuàng)建組件集之后，在左側(cè)欄的「組件」選項卡，就可以看到我們剛剛創(chuàng)建的組件集，將其從左側(cè)欄拖拽添加到中間的畫板。

從組件集添加的組件，看似只有一個組件，但它實際上包含了組件的兩種狀態(tài)。我們可以點擊右側(cè)欄的「屬性」，通過切換下拉菜單的選項，來得到不同狀態(tài)的組件。

這樣一來，借助 Pixso 的組件變體功能，可以在縮減組件數(shù)量的同時，保證組件狀態(tài)的豐富度，實現(xiàn)更高效管理組件的目的。

Pixso 目前對所有個人用戶免費開放，內(nèi)置的所有功能都可以免費使用！

現(xiàn)在前往 Pixso 官網(wǎng)注冊賬號，可以享受到 Pixso 會員的所有權(quán)益：無限文件數(shù)量、無協(xié)作者人數(shù)限制、無限云存儲空間等等，快來嘗試一下吧～

靈感網(wǎng)站

Pixso 資源社區(qū)

Pixso 本職是一個 UI 設(shè)計軟件，它額外提供了一個網(wǎng)站——Pixso 資源社區(qū)，作為素材靈感網(wǎng)站也特別好用。

Pixso 資源社區(qū)，是一個將社交、作品瀏覽、模板復用融合到一起的「開源式」設(shè)計社區(qū)，你可以在社區(qū)中發(fā)布作品，也可以在社區(qū)中瀏覽其他用戶發(fā)布的作品來搜集靈感，大家也可以在模板中留言互動、溝通。

Pixso 資源社區(qū)已有的資源：矢量人物頭像插畫、Icons 圖標、國內(nèi)眾多大廠的 UI 組件庫、移動端 App 和網(wǎng)頁設(shè)計 UI 模板等等。

Pixso 資源社區(qū)最方便的點在于，你可以直接復用該作品模板，點擊右上角的「復制」，就可以將該作品拷貝到編輯器中啦！

這對于 UI 設(shè)計師來說，一方面解決了保存優(yōu)秀作品的麻煩，可以把眾多作品歸檔在一個地方，另一方面「一鍵使用模板」也提升了設(shè)計效率。

用戶能夠直接從工具到社區(qū)，再從社區(qū)回到工具：

傳統(tǒng)設(shè)計路徑：去 A 素材網(wǎng)站找資源 → 下載 → 用 B 設(shè)計工具打開模板 → 開始設(shè)計
Pixso設(shè)計路徑：在Pixso社區(qū)尋找資源 → 選擇使用 → 開始設(shè)計

Dribbble

Dribbble，也叫「追波」，與 Adobe 旗下的 Behance 齊名，是一個用于展示設(shè)計作品的線上社區(qū)，在這里可以看到諸多平面設(shè)計、網(wǎng)頁設(shè)計、UI 設(shè)計、插畫和攝影等作品。

如果你想搜集國外好看的 UI 設(shè)計作品，將其作為設(shè)計參考，可以使用相關(guān)的關(guān)鍵詞，例如 ui design trends、best ui 等進行搜索，就可以看到非常多的作品。

在搜索返回的結(jié)果中，還可以使用下方提供的篩選條件——動畫、品牌、插畫、移動端、出版、產(chǎn)品設(shè)計、排版和網(wǎng)頁設(shè)計，從中更快地篩選出與設(shè)計主題相契合的案例。

Screenlane

Screenlane，一個提供網(wǎng)頁和移動界面設(shè)計的靈感網(wǎng)站。網(wǎng)站提供了多個 App 不同界面的多張截圖，打開任意一個 App，可以看到 App 在不同狀態(tài)、交互操作、頁面下的所有截圖，非常全面地展示了一個產(chǎn)品界面設(shè)計的全貌，也能學習到一個產(chǎn)品的設(shè)計風格是如何保持統(tǒng)一的。

在網(wǎng)站的左側(cè)邊欄，可以頁面類型、組件、產(chǎn)品類別、產(chǎn)品名稱作為篩選條件，從眾多的界面設(shè)計作品中，找到符合自己需求的案例。

素材網(wǎng)站

Unsplash

Unsplash，是國外知名的免版權(quán)圖片網(wǎng)站，圖片質(zhì)量非常高，上面的圖片分類細致，涉及多個題材，包含壁紙、自然風景、藝術(shù)、商業(yè)等。

由于 Unsplash 是國外的網(wǎng)站，雖然使用中文也能搜索，但搜出來的圖片較少且結(jié)果不準確，因此搜索圖片時建議使用英文。

logosc

Logosc，是一個免版權(quán)圖片聚合搜索網(wǎng)站，輸入一個關(guān)鍵字，可以獲取來自多個免版權(quán)網(wǎng)站的圖片，包含 Unsplash、Pixabay 和 Pexels 等網(wǎng)站，支持中英文搜索。

如果你用不慣前面介紹的 Unsplash（需要使用英文進行搜索），可以換到 logosc，而且這個網(wǎng)站是國內(nèi)的網(wǎng)站，在加載速度方面比 Unsplash 更快。

免摳圖片網(wǎng)站

平面設(shè)計中，經(jīng)常需要對拿到的素材進行處理，其中就有一個非常高頻的操作「摳圖」，即摳去素材的背景，得到一個包含透明背景的素材，方便與其他素材做進一步的加工。

如果你不會摳圖或者懶得摳圖，使用現(xiàn)成的包含透明背景的素材，是一種比較討巧的方法。

pngimg，一個專門提供免摳圖片素材的網(wǎng)站，網(wǎng)站頂部列出了現(xiàn)有的免摳素材數(shù)量，累計超過 10 萬+。

網(wǎng)站按照英文字母 A-Z 的順序，展示所有和素材相關(guān)的名詞或關(guān)鍵詞，搜索素材時，可以按字母順序來找，也可以使用頂部的搜索功能進行搜索。

隨意進入一個詳情頁，可以看到內(nèi)置的多張包含透明通道的素材，圖片的分辨率都非?？捎^，而且邊緣不會帶有毛邊，應(yīng)用到設(shè)計中不會影響作品最終的效果。

碼力全開

這是國內(nèi)的一位個人開發(fā)者 Larry 維護的網(wǎng)站，資源庫會收錄適合產(chǎn)品經(jīng)理、設(shè)計師、個人開發(fā)者使用的各種網(wǎng)站或工具，包含矢量圖標網(wǎng)站、產(chǎn)品模型生成器（樣機）、調(diào)色工具、UI 套件、背景素材等等。

網(wǎng)站的內(nèi)容會不定期更新，日常有空的時候可以多來這里逛逛～




以上就是皮仔認為 UI 設(shè)計師必備的 8 個網(wǎng)站，希望對你有幫助。

碼字不易，如果對你有幫助的話，請別忘了賞個【三連】或是【關(guān)注】我哦，關(guān)注不迷路！

我是皮仔 @Pixso協(xié)同設(shè)計 ，那我們下次再見咯。