寫給交互設計初學者?來看看12個設計創作方向和10個Ui基本元素!
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
如果覺得我們做的還不錯點個贊和在看吧! :)
- 案例研究:如何實際應用UX設計法則?來看看Headspace(冥想類產品巨頭) 遵循的7個用户體驗定律!
- 案例研究:飽和設計主題如何創新?培養正念冥想習慣的應用程序——Mindwaves!
- 設計資訊:Adobe 收購 Figma 會改變交互設計的未來嗎?有哪些 Figma 流行替代品?
- 設計資訊:iPhone 14新設計動態島(Dynamic Island)是下一個革命性的用户體驗模式?
- 環保意識、國際旅行、數字貨幣、區塊鏈:在未來具有影響力的用户體驗設計領域!
- 設計資訊:超越人工智能的藝術?為更廣泛的創意應用生成圖像!
- 一款自制寵物飲食的指南應用程序Petcy:幫助鏟屎官為毛茸茸的朋友準備自制食物!
- 雙鑽模型知識篇!為具有創造力的設計師們提供指導路線圖!(附視頻公開課)
- 設計師如何表達愛情?七夕專場案例分享來啦!
- 來測測你是否是一個好設計師?快速核對清單!
- UI 設計的一致性:改善用户體驗的 8 個技巧!
- 設計資訊:動態界面的未來?設計與自然環境同步的用户界面美學
- 案例研究:如何實際應用UX設計法則?來看看 Netflix (網飛) 遵循的7個用户體驗定律!
- 開課啦!在IDEO做交互設計師的一天?直播公開課:7月12日(週二)上午 10:00!
- 一起為人類老齡化而設計:5種創造包容性數字體驗的方法!
- 案例研究:能夠提高轉化率的郵件設計系統—Naukri設計項目
- 寫給交互設計初學者?來看看12個設計創作方向和10個Ui基本元素!
- 推薦幾個AR設計指南網址
- 案例研究:優秀的UI設計是如何誕生出來的?Colony-協作平台的登陸頁面設計
- 設計資訊:Figma vs Sketch!為什麼10 家設計機構從 Sketch 轉向 Figma?