學習ui設計有什么推薦的網(wǎng)站？

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

時間：2023-12-11 08:36:01 來源：網(wǎng)站運營

學習ui設計有什么推薦的網(wǎng)站？：有的鴨，UI 設計需要學習的東西比較多，大致可以分為 2 類：

• UI 設計軟件技能
• 設計理論（色彩、版式、設計規(guī)范、交互方式等）

UI 設計軟件技能

UI 設計軟件，可以細分為兩類，一類是 UI 設計核心軟件(主力吃飯家伙)，例如 Sketch、XD、Figma 和 Pixso，一類是輔助軟件，幫我們更好地完成 UI 設計軟件無法實現(xiàn)的效果，例如 PS、AE 等。

別看 UI 設計核心軟件有那么多款，但其實它們底層的本質是相通的，熟練掌握其中一款，以后要用到別的軟件，也可以很快上手。

簡單說一下 4 款 UI 設計核心軟件的區(qū)別：

Sketch：Mac 用戶首選的 UI 設計軟件，目前在國內份額最多，缺點是你首先要有一臺 Mac 電腦
XD：Adobe 公司推出的 UI 設計軟件，可以很好地與 Adobe 全家桶軟件聯(lián)動，支持 Windows 和 macOS 系統(tǒng)，缺點是每年的訂閱費用比較高
Figma：可以看成是在線版的 Sketch，瀏覽器打開即可使用，缺點是沒有中文版、海外服務器網(wǎng)頁打開速度慢
Pixso：由國內團隊打造的對標 Figma 的在線設計工具，個人版完全免費，很好地解決了 Figma 存在的語言門檻、加載速度慢的問題

---

下面就以 Pixso 為例，說說 UI 設計軟件中經(jīng)常會用到的一些功能：

1 柵格系統(tǒng)

在進行頁面排版時，為了讓不同頁面的布局保持統(tǒng)一，通常會在畫板上構建柵格系統(tǒng)，它的作用類似于設計軟件中的「參考線」，可以通過規(guī)則的網(wǎng)格陣列或矩形來指導畫板中元素的布局以及信息分布。

對于一個空白的畫板，可以點擊右側欄的「布局網(wǎng)格」創(chuàng)建柵格系統(tǒng)，默認創(chuàng)建的是網(wǎng)格陣列，點擊網(wǎng)格圖標，在彈出的面板中，可以將網(wǎng)格陣列更換為列或行。

如果將網(wǎng)格更改為「列」，網(wǎng)格就會變?yōu)橐粋€個帶有粉色填充的矩形，更改下方的「數(shù)量」和「間距」參數(shù)，可以調整矩形的數(shù)量和矩形間的橫向距離。

如果想要構建「方格子」外形的柵格系統(tǒng)，需要給點擊右側的加號，給畫板添加另外一個布局網(wǎng)格，如下圖，因為前面添加了「列」，這里就添加「行」，稍微調整一下行的「數(shù)量」，就可以得到方格子外形的柵格系統(tǒng)。

值得一提的是，「布局網(wǎng)格」僅對畫板有效，如果你在文件中使用形狀工具創(chuàng)建了一個和畫板一樣大小的矩形，選中矩形的狀態(tài)下，在右側面板是找不到「布局網(wǎng)格」的選項的。

2 組件庫

相比平面設計 PS，UI 設計軟件最大的不同之處在于，引入了「組件」的概念，組件可以類比為樂高中的積木，所有頁面都是由一個個組件「拼裝」而成，不同頁面可以重復使用同一個組件。

組件在保證復用性、減少元素冗余的同時，也可以實現(xiàn)批量修改樣式的操作，大大提高了 UI 設計的效率。

在 Pixso 中，選中任意元素，點擊頂部工具欄的「創(chuàng)建組件」(快捷鍵為 Cmd + Option + K)，可以將普通元素轉換為組件。

元素轉換為組件后，點擊左側面板的「組件」選項卡，可以在下方看到剛剛創(chuàng)建的組件。

關于組件，這里還有兩個概念需要了解一下：

從普通元素轉換為組件的對象，稱為主組件；從屬于主組件的子級組件，稱為組件實例，在 Pixso 中有兩種創(chuàng)建實例的方法，一種是從左側組件面板往畫板拖拽添加，另一種是按住 Option/Alt 鍵，從主組件拖拽復制出新的組件。

當我們修改主組件的顏色或大小時，與主組件相關聯(lián)的組件實例也會相應地發(fā)生變化，這樣就可以實現(xiàn)批量修改元素樣式的目的。

如果想讓某個組件實例與主組件脫離關聯(lián)，可以右擊組件實例，選擇「從組件分離」，分離之后，當主組件修改樣式時，就不會影響到脫離關聯(lián)的組件。

3 矢量工具

UI 設計通常會用到各式各樣的圖標，一方面圖標可以簡化頁面包含的元素，保證界面的簡潔，與此同時，圖標可以起到形象化表達的效果，有時一個圖標可以抵得上一大段文本內容。

Pixso 提供了各種常用的矢量形狀工具，包含矩形、直線、箭頭、圓形、多邊形、星形，來幫助 UI 設計師繪制各種 icon 圖標。

這里尤其要說一下其中的圓形工具，它不單純是一個圓形，通過拖拽圓形內部的錨點、圓心，可以把圓形分別轉換為扇形和環(huán)形，轉換過程非常簡單，無需用到布爾運算。

除了手繪圖標，對于一些比較有普適性的圖標，可以使用 Pixso 內置的 ICON 圖標插件，直接調用來自 iconfont 或 IconPark 的 icon 圖標，減少不必要的重復勞動，把時間放在更重要的事情上。

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

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

除了學習軟件，對于剛接觸 UI 設計的新手，了解一些常用的 UI 設計術語，也非常有必要，避免在瀏覽 UI 設計干貨時一臉茫（meng）然（bi）。

點擊查看下方皮仔為你準備的《UI 設計師必知的 38 個專業(yè)術語》：

設計理論

設計理論涵蓋的內容比較多，包含色彩、版式、設計原則等，這些理論不僅可以應用在 UI 設計，在其他細分的設計領域也是通用的。

1 色彩理論

以色彩理論為例，每種顏色都有不同的含義。要了解這一點，就需要對色彩心理學有所了解。

每種顏色都表達了不同的感覺和情感。這些顏色背后可以傳達的事物：

紅色：愛、憤怒

橙色：活力、幸福

黃色：幸福、希望

綠色：自然、純天然

藍色：冷靜、負責、信任

紫色：創(chuàng)造力、忠誠（Pixso 的圖標就包含了紫色）

黑色：神秘、優(yōu)雅

對于初學設計的人來說，一上來要配出好看的顏色，還是非常有難度的，一種比較取巧的方法，就是去觀摩各種提供優(yōu)秀配色方案的網(wǎng)站，從多種方案中學習配色的技巧。

Pigment，一個提供多種不同配色方案的網(wǎng)站，非常適合剛學設計、不懂配色原理的小白。

左側欄的 Pigmen 和 Lighting 可分別調整配色的飽和度和亮度，來獲得不一樣的配色方案，Pigmen 數(shù)值越大，所有配色方案的顏色看起來越鮮艷，反之則看起來灰蒙蒙的。

點擊配色方案會打開新的頁面，左右兩側可以對比兩種顏色分別作為前景色和背景色的效果，這一點真的很贊！

點擊網(wǎng)頁右上角的「More Actions」，可以將當前的配色方案導出為 svg 或是 sketch 和 Adobe 系列軟件可用的配色文件。

2 設計原則

設計四原則：對比、重復、對齊、親密

良好的用戶界面原則：設計簡單、可預測、可見、一致性、容易上手、無障礙、反饋

如果覺得這些設計原則比較難體會，一種比較好的學習方式，就是去查看各種優(yōu)秀的設計作品，從設計實踐中總結出作品中的亮點，再對照這些原則，了解他人是如何在設計中踐行這些原則的。

這里介紹一個搜集 UI 設計靈感的網(wǎng)站：

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

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

對于設計理論方面的東西，皮仔也是一個處于剛入門階段的新手，暫時就分享這么多，感謝你能看到這里～

以上，希望對你有幫助。

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

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