初學UI設計,試試這6個技巧

更新 發佈閱讀 2 分鐘


vocus|新世代的創作平台

// 此篇撰於 2020/11月,適用於想自學 UI 設計的讀者

在上次提到如何安排學習計畫之後,這次要來分享 4 個初學 UI設計的方法與技巧,一起來看看吧 :)

1. 軟體工具技能,練就對了

剛開始打開不熟悉、沒使用過的軟體,應該看到介面上密密麻麻的功能就暈了XD

比起一開始看一系列的工具介紹影片,不如先找實作教學,跟著影片上一步一步完成作品。個人覺得這個方法比較不容易睡著,也比較有成就感,而且實作比單純聽課更容易記住!

等到對工具有基本的掌握之後,再回去挖掘有哪些沒使用過的功能也不遲。至於想要熟悉工具,那就是多練習幾次,多找影片練習實作,我想一定可以很快上手!

如果是一開始不曉得要學 Figma、Sketch或是Adobe XD的朋友,也不用太擔心!因為這三個軟體介面與功能很相似,只要先熟悉其中一個,之後的轉換都滿容易可以上手!

2. 從臨摹開始,到創造

如果對於工具有基本掌握,但卻不知道從哪裡開始練習,個人建議可以從臨摹開始。找一個喜歡的作品,先觀察它的細節,再自己動手做看看。

等到看越多作品、軟體技能也跟著越來越上手之後,我想你一定有一些靈感,這時候可以開始創造屬於自己的作品了!

當覺得自己的作品在視覺上好像無法有所突破時,多觀摩大師的作品也會替你帶來一些啟發。

3. 開始練習思考,Let’s think!

UI 設計和平面設計不一樣的地方,就是除了視覺外還考量了邏輯與功能面,以及每個頁面之間的關聯性等等。

像是電商網站的加入購物車、結帳按鈕,擺放的位置很可能深深影響銷售額。常常在商品頁面下看到推薦商品、加購商品的區塊設計,也都是有原因的。

你有想過為什麼有些網站有Banner輪播設計,有些網站卻沒有嗎?試著練習思考一下,或許會發現很多以前沒注意的細節。

4. 不同角色,不同角度。換位思考

有時候產品的使用者並不是只有一個角色。

以Airbnb為例,有尋找房源的房客以及提供房源的房東;以外送平台為例,則有店家、外送員及點外送的使用者。

也因此在不同角色下會有不同的需求以及需要呈現的重點資訊,在體驗平台產品、甚至自己練習設計的時候,可以試著以不同角度思考看看,會發現一個平台產品的設計真的比想像中複雜,也會更了解產品的每個環節唷。

vocus|新世代的創作平台

留言
avatar-img
Lena 哩那 | UIUX 設計 | 生涯設計
32會員
61內容數
跨領域自學轉職的 UI/UX Designer,目前是名自由工作者,善於輔導零基礎新手轉職成為 UI/UX 設計師。另外也喜歡不斷探索生涯,挖掘不同的可能性! E-mail: ahri.lena.ty@gmail.com | ig: lenaaaa.design
2025/04/04
有越來越多人選擇 UI/UX 做為轉職的目標,但也發現許多學員在不全然了解 UI/UX 設計的情況下,就花了大筆金錢買仿間的各種課程了。沒有一個領域是絕對的好與壞,以下這些特性,你能接受嗎?
Thumbnail
2025/04/04
有越來越多人選擇 UI/UX 做為轉職的目標,但也發現許多學員在不全然了解 UI/UX 設計的情況下,就花了大筆金錢買仿間的各種課程了。沒有一個領域是絕對的好與壞,以下這些特性,你能接受嗎?
Thumbnail
2025/03/03
一起來了解一個專案是如何開始的,以及設計師可能會需要參與的部分
Thumbnail
2025/03/03
一起來了解一個專案是如何開始的,以及設計師可能會需要參與的部分
Thumbnail
2025/02/07
這篇整理了許多初學 UI/UX 設計的學員們,最常詢問的 8 個快問快答。
Thumbnail
2025/02/07
這篇整理了許多初學 UI/UX 設計的學員們,最常詢問的 8 個快問快答。
Thumbnail
看更多
你可能也想看
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
在AI浪潮下,009819 中信美國數據中心及電力ETF 直接卡位算力與電力雙主軸,等於掌握AI最核心基建。2008從 Apple Inc. 與 iPhone 帶動供應鏈,到如今AI崛起,主線已由應用端轉向底層。AI發展離不開算力與電力支撐,009819的價值,在於押中「沒有它不行」的核心資產。
Thumbnail
在AI浪潮下,009819 中信美國數據中心及電力ETF 直接卡位算力與電力雙主軸,等於掌握AI最核心基建。2008從 Apple Inc. 與 iPhone 帶動供應鏈,到如今AI崛起,主線已由應用端轉向底層。AI發展離不開算力與電力支撐,009819的價值,在於押中「沒有它不行」的核心資產。
Thumbnail
介紹如何使用 Warp 效果來製作箱子擠壓效果!
Thumbnail
介紹如何使用 Warp 效果來製作箱子擠壓效果!
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
我從今年初開始就不斷強調,AI 的發展過程中,電力是多麼重要的一件事,算力雖然是推動 AI 的引擎,但電力才是支撐引擎運轉的燃料,沒有充足且穩定的電力供應,再先進的 GPU 也只是無法啟動的昂貴晶片、毫無用武之地,所以AI的終點不是算力,而是電力。
Thumbnail
我從今年初開始就不斷強調,AI 的發展過程中,電力是多麼重要的一件事,算力雖然是推動 AI 的引擎,但電力才是支撐引擎運轉的燃料,沒有充足且穩定的電力供應,再先進的 GPU 也只是無法啟動的昂貴晶片、毫無用武之地,所以AI的終點不是算力,而是電力。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
實時繪圖(一)-安裝ComfyUI+krita心得與教學繼這一篇安裝完畢後,就是開始挑戰電商產品圖製作,意外的簡單,基本上素材找好,在調整個2分鐘,就完成了 接下來我就把我做的方法與步驟分享給大家巴 首先先找好的你的透明素材產品,那麼免費的素材網站我已經幫你找好了,可以商用,請注意一定要用去背的
Thumbnail
實時繪圖(一)-安裝ComfyUI+krita心得與教學繼這一篇安裝完畢後,就是開始挑戰電商產品圖製作,意外的簡單,基本上素材找好,在調整個2分鐘,就完成了 接下來我就把我做的方法與步驟分享給大家巴 首先先找好的你的透明素材產品,那麼免費的素材網站我已經幫你找好了,可以商用,請注意一定要用去背的
Thumbnail
製作圖片對於許多人來說可能是一項挑戰,但其實只要掌握一些基本要點,任何人都可以輕鬆上手,甚至在短短的3秒內完成一張吸引人的圖片。以下是8個關鍵要點,幫助初心者快速製作出專業水準的圖片。
Thumbnail
製作圖片對於許多人來說可能是一項挑戰,但其實只要掌握一些基本要點,任何人都可以輕鬆上手,甚至在短短的3秒內完成一張吸引人的圖片。以下是8個關鍵要點,幫助初心者快速製作出專業水準的圖片。
Thumbnail
建築師考試的學習與考試中,立面圖、剖面圖、平面圖及透視圖對於考生而言,是展現其設計能力和理解深度的關鍵工具。這些圖形不僅幫助考生展示具體的設計想法,也是溝通設計意圖與實現建築概念的基礎。
Thumbnail
建築師考試的學習與考試中,立面圖、剖面圖、平面圖及透視圖對於考生而言,是展現其設計能力和理解深度的關鍵工具。這些圖形不僅幫助考生展示具體的設計想法,也是溝通設計意圖與實現建築概念的基礎。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
這篇文章分享了四款免費線上工具,包括Photopea、Canva、Kleki和AutoDraw,教初學者如何學習平面設計創作。這些工具各有其優點和特點,可供學習者選擇使用。
Thumbnail
這篇文章分享了四款免費線上工具,包括Photopea、Canva、Kleki和AutoDraw,教初學者如何學習平面設計創作。這些工具各有其優點和特點,可供學習者選擇使用。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News