【UX UI設計學堂】避免的五大 UX UI 設計錯誤

更新於 發佈於 閱讀時間約 2 分鐘
raw-image

在創建用戶體驗(UX)和用戶界面(UI)網頁設計時,設計師需要避免一些可能阻礙用戶體驗的常見錯誤。以下是一些需要避免的關鍵錯誤。

1. 忽視加載狀態(Loading Status)

在數據密集型的應用程式 App中,加載狀態是一個關鍵要素。有時候,你需要使用加載狀態,這樣所有內容才能正確地顯示

例如,你可以使用加載器或反映螢幕結構的骨架加載。這些加載元素可以讓用戶知道內容正在加載,並讓他們有耐心等待,而不是感到挫折。

Loading status stickers by tenor

Loading status stickers by tenor









Source: Tenor

2. 主要的手機按鈕(Primary Mobile Button)

當你的手機應用程式設計中有一個強大的主要按鈕時,請確保使用所有可用的寬度,只保留安全區域的邊距。這樣可以讓按鈕在小螢幕上更容易被注意到和點擊。如果按鈕太小或位置不當,可能會使用戶難以互動,導致流失。

Primary mobile button

Primary mobile button

Source: Roman Kamushken

3. 不直觀的 Icons

Icons 應該是使用者的捷徑,幫助他們更快地在介面中導航。然而,如果你的圖標複雜或含義不清,使用者可能會感到困惑,不知道該如何操作。為了避免這種情況,確保你的圖標簡單,直觀,並且與你的應用程式的功能和內容相關。

raw-image










4. 視覺一致性

在視覺風格、間距或對齊上的不一致,會創造出一種零散和不專業的外觀。這可能會使你的應用程式看起來不專業,並使用戶感到困惑。為了創建一個流暢和一致的用戶體驗,確保你的設計元素(如顏色,字體,按鈕等)在整個應用程式中保持一致。

5. 無限滾動

如果你在手機應用程式中顯示大量的內容,選擇無限垂直滾動可以支持使用者的參與。無限滾動允許用戶繼續滾動並查看更多內容,而不需要點擊或執行其他操作。然而,過度使用無限滾動可能導致用戶感到厭煩或覺得內容過於冗長。因此,當實施無限滾動時,應該以用戶的需求和內容的類型為指導。

總的來說,為了創建一個成功的 UX 和 UI 網站設計,設計師需要避免這些常見的錯誤。


avatar-img
12會員
301內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Digiworld的沙龍 的其他內容
使用者介面(UI)網頁設計中的 Icon 是一種強大的工具,可以幫助使用者更易理解和使用你的產品或服務。然而,如果沒有正確使用,它們也可能造成混淆和誤解。以下是一些如何在 UI 設計中使用 Icon 的建議。
在數字化快速發展的今天,許多企業仍在使用Excel進行行政工作。雖然Excel擁有強大的數據處理和分析能力,但其使用也存在許多限制,例如操作複雜、難以進行大規模數據管理和分析,以及無法實現自動化處理等。 No Code AI
Marcus Cederberg是一位來自瑞典的藝術家,他以其獨特的極簡主義視覺藝術作品而聞名。他的作品備受讚譽,並在全球範圍內的藝術圈中產生了深遠影響。
Elon Musk,這位Tesla的創辦人,一直以其大膽的創新和不懼挑戰的態度引人注目。去年,他以440億美元的價格收購了Twitter,並立即進行了一系列影響深遠的改革。最近,他再次引起了全球的關注,宣布將Twitter改名為「X」,並將11年來的經典藍鳥標誌替換為黑白二色的「X」新標誌。
隨著科技與社會的快速變化,內容創作和營銷的策略也需要不斷調整與創新。在這篇文章中,我們將探討2024年的幾個主要趨勢,包括社交媒體的演變,如何有效吸引回頭客,新式內容創作者的思維方式,以及小眾市場的內容營銷策略。
航空公司為避免因部分乘客誤機而造成的損失,經常會賣出比機位多的機票,形成所謂的「超賣」狀況。然而,當所有乘客都準時登機時,航空公司便必須找出願意讓出機位的乘客,並向其提供補償。近日,一段達美航空因超賣機票而向乘客喊價的影片在社交媒體上引起熱議。
使用者介面(UI)網頁設計中的 Icon 是一種強大的工具,可以幫助使用者更易理解和使用你的產品或服務。然而,如果沒有正確使用,它們也可能造成混淆和誤解。以下是一些如何在 UI 設計中使用 Icon 的建議。
在數字化快速發展的今天,許多企業仍在使用Excel進行行政工作。雖然Excel擁有強大的數據處理和分析能力,但其使用也存在許多限制,例如操作複雜、難以進行大規模數據管理和分析,以及無法實現自動化處理等。 No Code AI
Marcus Cederberg是一位來自瑞典的藝術家,他以其獨特的極簡主義視覺藝術作品而聞名。他的作品備受讚譽,並在全球範圍內的藝術圈中產生了深遠影響。
Elon Musk,這位Tesla的創辦人,一直以其大膽的創新和不懼挑戰的態度引人注目。去年,他以440億美元的價格收購了Twitter,並立即進行了一系列影響深遠的改革。最近,他再次引起了全球的關注,宣布將Twitter改名為「X」,並將11年來的經典藍鳥標誌替換為黑白二色的「X」新標誌。
隨著科技與社會的快速變化,內容創作和營銷的策略也需要不斷調整與創新。在這篇文章中,我們將探討2024年的幾個主要趨勢,包括社交媒體的演變,如何有效吸引回頭客,新式內容創作者的思維方式,以及小眾市場的內容營銷策略。
航空公司為避免因部分乘客誤機而造成的損失,經常會賣出比機位多的機票,形成所謂的「超賣」狀況。然而,當所有乘客都準時登機時,航空公司便必須找出願意讓出機位的乘客,並向其提供補償。近日,一段達美航空因超賣機票而向乘客喊價的影片在社交媒體上引起熱議。
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
產品製作的核心因素有三個重點,分別為:使用者(誰在用)、需求(為什麼用)、場景(在哪裡用)。這些因素對於任何產品的成功都是相當重要的。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在現代數位時代,架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而,要建立一個成功的網站不僅僅是擁有吸引人的設計,還需要考慮多方面的因素,以確保網站的效能和使用者體驗達到最佳化。
Thumbnail
資訊圖表是一種將數據以視覺化形式呈現的工具,但在創建和解讀資訊圖表時,需要保持批判性和謹慎性。本文介紹了幾個常見的資料視覺化錯誤,包括起始值未設定成零、利用坐標軸混淆視聽、僅提供部分區段的資訊等。文章提醒製圖者應該如何謹慎設計圖表,並鼓勵讀者聰明解讀圖表。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
產品製作的核心因素有三個重點,分別為:使用者(誰在用)、需求(為什麼用)、場景(在哪裡用)。這些因素對於任何產品的成功都是相當重要的。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在現代數位時代,架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而,要建立一個成功的網站不僅僅是擁有吸引人的設計,還需要考慮多方面的因素,以確保網站的效能和使用者體驗達到最佳化。
Thumbnail
資訊圖表是一種將數據以視覺化形式呈現的工具,但在創建和解讀資訊圖表時,需要保持批判性和謹慎性。本文介紹了幾個常見的資料視覺化錯誤,包括起始值未設定成零、利用坐標軸混淆視聽、僅提供部分區段的資訊等。文章提醒製圖者應該如何謹慎設計圖表,並鼓勵讀者聰明解讀圖表。