寫給互動設計初學者?來看看12個設計創作方向和10個Ui基本元素!

語言: CN / TW / HK

UI & UX

Article:2022/06/25

每名初級設計師都需要練習技能才能成為一名優秀的設計師,為此,最好的辦法就是進行實踐設計。在本文中,將分享 12個初級設計師的實踐創作方向 ,以及要成為一名優秀的設計師需要了解的 10個Ui基礎知識 。一起來看看吧~

“通過個人設計實踐能夠幫助初級設計師們構建自己的作品集,嘗試使這些設計儘可能具有 吸引力 ,並帶有一些 可用性和有效性 ,會讓面試官或客戶看到你的潛力很重要。”

Creative direction

12個創作方向

01.金融應用

初級設計師可以考慮設計一個 財務應用程式介面 。通過從各種來源中獲取靈感,並從多種設計中挑選出最好的東西,然後建立自己的東西,從財務應用程式開始會很棒。

(Rakib Kowshar的財務應用程式)

02.書店應用

設計書店應用程式介面很酷。將學習的 半電子商務應用程式 的基礎知識運用於實踐,對於初級設計師來說簡單易行。

(電子書移動應用程式 — Nasim的UX/UI)

03.傢俱應用

傢俱應用程式也是一個很棒的應用程式介面,初級設計師都很喜歡它。可以 從圖片網站獲取傢俱照片,然後對其進行編輯 並將它們放入您的應用程式中,並嘗試使其看起來不錯。

(優雅的傢俱店移動應用程式設計Pradeep Kumar)

04.工作管理員應用

設計一個應用程式來 管理任務和工作 是一個很棒的應用程式,可以在網際網路上找到很多靈感。設計這個應用程式非常簡單,同時非常適合初級設計師。

(Task Andy—— Azie Melasari的移動應用探索

05.線上課程應用

線上課程應用程式也是熱門創作方向,需要在程式中列出一些使用者可以購買觀看的課程, 該應用程式涉及多個螢幕 ,例如,觀看課程,購買課程,觀看統計資料等。

(Class In · Keanu Gaurava 的線上學習應用程式)

06.求職應用

求職應用程式是一個簡單的應用程式, 使用者可以在其中搜索特定工作並嘗試通過傳送應用程式請求來獲取它 。設計開始之前,必須列出該工作所需的一些關鍵因素。

(Rakib Kowshar的Job Finder 應用程式)

07.健身應用 

健身應用程式可能包括 健身應用程式、鍛鍊應用程式、瑜伽應用程式 等,我們可以嘗試將它們全部製作並與它們一起練習。

(Fitness App — RD UX/UI的鍛鍊追蹤器)

08.電影票預定應用程式

訂票應用程式是方便練習的創作方向,只需拿起最新的電影海報並新增座位介面,並在其中選擇可用的座位。 可以在投射頁面、評論頁面、取消頁面等上進行更多設計

(Pourya Zamani的電影票應用程式)

09.旅遊應用

旅行應用程式是許多設計師喜歡的應用程式型別,因為它看起來很棒, 因為大部分 UI 都是旅行圖片,其他部分則取決於個人的想象。

(Imran Hossen的旅行應用程式)

11.電子商務應用

電子商務應用程式在設計領域非常流行 ,即使是初級設計師也可能已經有了該方向的作品,如果沒有,那麼現在嘗試構建一個。

(Rakib Kowshar的服裝電子商務應用程式)

12.健康追蹤應用

健身應用程式的兄弟,但更傾向於 跟蹤健康並幫助其使用者建立更好的健康狀況。

(Marina Budarina的健康跟蹤應用程式)

Basic element

10個Ui基本元素

UI/UX設計師的工作是實現想法,分析客戶需求,然後設計一個具有漂亮介面的產品。這份工作充滿著樂趣,也有越來越多的人選擇轉行至此。

如果是從軟體開發人員過渡,那很好,因為已經非常瞭解IT術語。但是當你從平面設計或其他領域轉行時,很多事情一開始會讓你感到驚訝。 UI中元素的名稱和用途是讓您感到困惑的事情之一 ,即使每天都在應用程式和網站中遇到它們。

下面就為大家介紹是最常見的 UI 元素~

01.底部導航欄

底部導航欄在螢幕底部顯示三到五個目的地 每個目的地都由一個圖示和一個可選的文字標籤表示。當點選底部導航圖示時,使用者將被帶到與該圖示關聯的頂級導航目的地。

底欄的面積較小,所以這裡的內容排列需要慎重考慮。這裡的圖示設計也需要精心設計,讓使用者可以 輕鬆識別該選項卡的功能 。使用顏色層次結構讓使用者知道哪些選項卡處於活動狀態,哪些選項卡被禁用。在更深的螢幕上,您應該關閉底部欄,因為在這些螢幕上,它不再需要了。

此外,您可以在切換到其他選項卡時新增動畫效果,以增加使用者體驗。

(臉書應用)

02.模態框

模態框顯示在當前頁面的所有其他內容之上,它目的是通知使用者應用程式中的某些內容或等待使用者輸入資訊。

模態框可以作為頁面內容的一部分檢視,但在不需要時隱藏,模態框的一些實際應用為登錄檔、全尺寸影象或網站所有者的聯絡資訊等。

(引導模式)

模態框用於吸引注意力,需要使用者輸入資訊,並在不丟失原始頁面上下文的情況下向內容顯示附加資訊(顯示更大的照片,播放影片)。

模態框不應該太大或太小,內容應該適合 ,如果 太長並且需要頁面滾動,那麼您應該考慮建立一個新頁面而不是使用模態框。

(臉書個人資料模式)

03.滑塊

滑塊是一組相當大的影象,可以在影象之間來回滑動, 它們通常放置在頁面頂部以描述功能

(光滑的滑塊庫)

04.分頁

分頁是將內容劃分為一系列頁面的過程。這是一種流行且廣泛使用的網頁分頁技術,可將文章或產品列表拆分為易於理解的格式。通常,分頁最常見於 部落格、論壇、新聞、電子商務 等網站型別等。

(谷歌分頁)

(分頁)

05.麵包屑

麵包屑(Breadcrumb)是一組連結,可幫助使用者在網站結構上定位其當前位置。在結構複雜或內容較多的網站中,麵包屑導航是一種有效的定位方式,在使用者在頁面之間移動時更加方便。

·幫助使用者瀏覽網站

·瀏覽網站級別時的點選路徑更短

·將使用者的興趣吸引到站點層次結構中更高元素

·推動強大的使用者互動

(Breadcrumbs UI 設計元件)

06.側邊欄

側邊欄被理解為在網站主要內容旁邊顯示資訊的列。 在具有大量資訊管理功能的網站中,使用側邊欄將幫助使用者快速訪問他們最快速使用的類別。 它並不總是側面的垂直柱。它可以是內容區域下方或上方的水平矩形、頁尾、頁首或主題中可以擴大或縮小的任何位置,以避免影響其他主要元素的顯示空間。

(Sagor Shopon的左側導航選單設計)

07.載入器

載入器是現代網路中不可或缺的效果,目的是在網路和使用者之間帶來更好的互動。它可能會在您開啟新頁面、登入後、上傳檔案等時出現。使用載入器,為了增加使用者體驗,您應該應用一個進度條,以便使用者更容易瞭解頁面如何已載入。

(Asif Adnan Tuhin的霓虹燈載入器)

08.吐司

吐司(Toast)訊息讓使用者知道他們剛剛執行的任務是成功的。這些訊息在使用者採取一些行動後會立即給予反饋。當需要頻繁確認時使用,例如成功完成任務或事務,或者當用戶閱讀訊息並不重要時。

(吐司訊息)

09.單選按鈕和複選框

複選框和單選按鈕是進行選擇的元素。複選框允許使用者從固定數量的備選方案中選擇專案,而單選按鈕允許使用者從幾個預定義的備選方案列表中準確選擇一項。

(單選按鈕和複選框不能共存)

10.工具提示

工具提示,也稱為資訊提示或提示,是一種常見的圖形使用者介面 (GUI) 元素,當將滑鼠懸停在螢幕元素或元件上時,文字框會顯示有關該元素的資訊,例如按鈕功能的描述,縮寫代表什麼。

(pc和平板電腦中的工具提示)

對於初級設計師來說,積累知識與個人實踐專案是現階段最重要的。除了自己結合系統與碎片的學習之外,更需要實戰來產出作品~ 美國互動設計資訊在7月-9月為設計師們推出了 互動設計1.0實戰營 ,一起來搞創作!

(部分圖文來自網路,若有侵權,請聯絡刪除。)

加入 UI&UX交流社群 ~

設計資源/書籍資源/知識互動

還有更多神祕福利!

一起創作更好的設計~

往期推薦 | Read More

聽說你還在研究產品設計與使用者體驗設計的區別?這篇文章幫你判斷!

設計資訊:Figma vs Sketch!為什麼10 家設計機構從 Sketch 轉向 Figma?

案例研究:優秀的UI設計是如何誕生出來的?Colony-協作平臺的登陸頁面設計

文字丨Joy

編輯丨Joy

如果覺得我們做的還不錯點個贊和在看吧! :)

「其他文章」