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

閱讀時間約 2 分鐘


raw-image

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

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

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

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

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

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

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

2. 從臨摹開始,到創造

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

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

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

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

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

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

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

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

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

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

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

raw-image

跨領域自學轉職的 UI/UX Designer,目前是名自由工作者,善於輔導零基礎新手轉職成為 UI/UX 設計師。另外也喜歡不斷探索生涯,挖掘不同的可能性! E-mail: ahri.lena.ty@gmail.com | ig: lenaaaa.design
留言0
查看全部
發表第一個留言支持創作者!
不是行銷人也可以懂的幾個數據名詞 ! 一起透過觀察數據,讓產品變得更好吧。
在學習的過程中,最擔心的就是難以想像未來的職場會是什麼樣子? 這篇會分享我踏入職場一段時間後,所理解到的體悟。
從被面試者,成為面試官,我觀察到了哪些事情呢? 我們收到了哪些優秀的履歷,以及看到了什麼絕對不要踩的雷呢?
這篇文章分享參與使用者訪談工作坊的學習心得,擔任訪談者有什麼要注意的小細節呢?
閱讀筆記 : Steal like an Artist— 《像藝術家一樣偷竊:關於發揮創造力,沒人告訴你的 10 件事》,或是翻譯作《點子都是偷來的》
此篇文會推薦適合 UIUX 初學者的入門書籍,能夠幫助你更了解這個領域唷。
不是行銷人也可以懂的幾個數據名詞 ! 一起透過觀察數據,讓產品變得更好吧。
在學習的過程中,最擔心的就是難以想像未來的職場會是什麼樣子? 這篇會分享我踏入職場一段時間後,所理解到的體悟。
從被面試者,成為面試官,我觀察到了哪些事情呢? 我們收到了哪些優秀的履歷,以及看到了什麼絕對不要踩的雷呢?
這篇文章分享參與使用者訪談工作坊的學習心得,擔任訪談者有什麼要注意的小細節呢?
閱讀筆記 : Steal like an Artist— 《像藝術家一樣偷竊:關於發揮創造力,沒人告訴你的 10 件事》,或是翻譯作《點子都是偷來的》
此篇文會推薦適合 UIUX 初學者的入門書籍,能夠幫助你更了解這個領域唷。
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
手寫版,有寫錯或看不懂的地方,都可以在底下留言給我。 感謝!
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
編輯的基本功,是對文字的敏感度。
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
手寫版,有寫錯或看不懂的地方,都可以在底下留言給我。 感謝!
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
編輯的基本功,是對文字的敏感度。