寫給交互設計初學者？來看看12個設計創作方向和10個Ui基本元素！

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

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

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的健康跟蹤應用程序）

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

如果覺得我們做的還不錯點個贊和在看吧！ ：）