嘿，開發者們！👋
作為一名初學者或中級開發者，你可能已經專注於讓你的應用程式功能正常運作。但你有沒有考慮過使用起來的感覺如何？在這篇文章中，我們將探討9個經常被忽視的UI設計方面，這些方面可以顯著改善你的應用程式的用戶體驗。
注意： 例子使用ReactJS和TailwindCSS，但這些原則可以應用於任何地方。
1. 關注邊距和內邊距
不均勻的邊距和內邊距顯然表明設計者還沒有掌握設計的要領。一致的間距使一切看起來更乾淨、更專業。
快速修正：
邊距和內邊距遵循4的倍數（例如：4px、8px、12px、16px）。這樣可以讓你的佈局有良好的節奏感，並看起來更精緻。
.container {
padding: 16px;
}
.button {
padding: 8px 12px;
}你不需要重新發明輪子——只要保持事物的整齊，立刻就會好看很多。
2. 像高手一樣處理空狀態
有沒有打開某個應用程式卻看到一個空白的畫面？對，這就是當開發者忘記為空狀態設計時的情況。當沒有數據可顯示時，別讓用戶感到無所適從。
專業提示：
添加有用的消息或行動呼籲（CTA）按鈕，引導用戶知道下一步該做什麼。
function TodoList({ todos }) {
if (todos.length === 0) {
return (
<div className="flex h-44 flex-col items-center justify-center rounded border bg-white shadow-sm">
<p className="mb-2 text-gray-600">這裡什麼都沒有！為什麼不添加你的第一個任務呢？</p>
<Button className="mt-2 bg-green-500 hover:bg-green-600">
<Plus className="mr-2 h-4 w-4" />
添加待辦
</Button>
</div>
);
}
// 渲染待辦列表
}將空白的畫面變成一個吸引用戶的機會！
3. 始終顯示加載狀態
如果你的應用程式正在後台處理某些事情，讓用戶知道。沒有什麼比不知道按鈕點擊是否有效或應用程式是否崩潰更糟糕的事情了。
專業提示：
對於快速操作，使用延遲的加載動畫，這樣不會閃爍得太快。這裡有一個加入延遲的小技巧：
function useDelayedLoading(isLoading, delay = 200) {
const [showLoading, setShowLoading] = useState(false);
useEffect(() => {
if (isLoading) {
const timer = setTimeout(() => setShowLoading(true), delay);
return () => clearTimeout(timer);
}
setShowLoading(false);
}, [isLoading, delay]);
return showLoading;
}
// 使用方式
const showLoading = useDelayedLoading(isLoading);這樣一來，用戶在非常快速的任務中不會看到加載動畫，但在需要的時候會得到反饋。
4. 保持清晰的視覺層次
你畫面上的每一項內容都不是同樣重要的，對吧？確保你的UI能夠反映出這一點。利用不同的字體大小、顏色和字體重量，指引用戶瀏覽內容。
專業提示：
對於主要內容，保持2-3種字體大小，並有限使用顏色以強調關鍵點。
.primary-text {
font-size: 18px;
color: #333;
font-weight: bold;
}
.secondary-text {
font-size: 16px;
color: #666;
}
.tertiary-text {
font-size: 14px;
color: #999;
}別讓事情變得複雜——只需確保用戶一目了然哪些是重要內容。
5. 擁抱空白，不要害怕它
你不需要將螢幕的每一寸填滿東西。空白（也稱為負空間）是你的朋友！它讓你的應用程序保持通透，讓用戶更容易專注。
專業提示：
增加無關元素之間的空間，減少相關元素之間的空間。這一切都是關於平衡。
.section {
margin-bottom: 32px; /* 大區塊間的空隙 */
}
.section-title {
margin-bottom: 16px; /* 小區塊內的空隙 */
}
.list-item {
margin-bottom: 8px; /* 列表項之間的緊湊空隙 */
}空白不是浪費的空間——它是設計的一部分！
6. 優雅地處理錯誤
沒有人喜歡錯誤，但它們會發生。當這些事情發生時，要樂於助人。不要只是告訴用戶“錯誤404”，而是給他們上下文，並提供解決方案或重試的方式。
專業提示：
讓你的錯誤信息友好、清晰且具有可操作性。
function ErrorMessage() {
return (
<div className="rounded border bg-neutral-10 p-6">
<h3 className="text-neutral-8900 mb-2 text-xl font-bold">哎呀！找不到該頁面</h3>
<p className="mb-4 text-neutral-700">
我們找不到你要尋找的頁面。
</p>
<div className="flex flex-row-reverse justify-start gap-2">
<Button className="rounded" variant="default">
重試
</Button>
<Button className="rounded" variant="ghost">
<ArrowLeft className="mr-2 h-4 w-4" />
返回
</Button>
</div>
</div>
);
}幫助用戶在事情出錯時感覺不會陷入困境。
7. 為長文本和禁用狀態添加提示
你是否曾經在應用程式中閱讀被截斷的內容或試圖互動一個禁用的按鈕時仍然不知所措？這會令用戶感到沮喪，但這是可以輕易避免的。為長文本或禁用元素添加提示（title屬性）以提供更多上下文。
專業提示：
當文本被截斷或按鈕被禁用時，提示可以提供額外的信息，如完整的文本或為何按鈕無法使用。這樣可以保證用戶的體驗流暢且具資訊性。
// 長文本提示範例
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<p
className="w-48 truncate"
title="這是一段非常長的文本，會被截斷，但有一個有用的提示"
>
這是一段非常長的文本，會被截斷，但有一個有用的提示
</p>
</TooltipTrigger>
<TooltipContent>
<p>這是一段非常長的文本，會被截斷，但有一個有用的提示</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
// 禁用按鈕提示範例
<button disabled title="您需完成表單後才能提交">
提交
</button>添加這些提示可以讓你的應用程式感覺更周到和精緻。這樣的小細節展示了你對用戶體驗的重視。
8. 使用具情境的顏色作為反饋
顏色在指導用戶使用應用程式時扮演著至關重要的角色。對於正確的情況使用正確的顏色，使介面更具直觀性和易於理解。例如，紅色調用於錯誤，綠色調用於成功，黃色調用於警告，藍色調用於資訊性消息。
專業提示：
遵循已建立的顏色習慣，以避免讓用戶感到困惑。大多數人會將紅色視為錯誤或危險的指示器，而綠色則視為成功標記，因此要善加利用！
// 具情境顏色的範例
<div className="flex items-center rounded-md border border-red-200 bg-red-100/75 p-3">
<AlertCircle className="mr-2 text-red-700" />
<p className="text-red-800">錯誤：出了點問題！</p>
</div>
<div className="flex items-center rounded-md border border-green-400 bg-green-100/75 p-3">
<CheckCircle className="mr-2 text-green-700" />
<p className="text-green-800">成功：操作已完成！</p>
</div>通過遵循這些顏色習慣，你可以使用戶更快地了解應用程式的狀況，而無需多加解釋。
這個小細節不僅有助於提升UI的直觀性，還通過將顏色與行動和結果相連結，增強了視覺層次感。
9. 圖示應該增強，而不是干擾
不要因為覺得需要就用圖示填塞你的UI。每個圖示都應具有明確的目的並增強用戶體驗。
專業提示：
保持圖示簡單易識別，並確保它們與所代表的行動相符。
<Icon name="trash" onClick={deleteItem} />
<Icon name="edit" onClick={editItem} />使用圖示來清晰行動，而不是讓你的UI雜亂無章。
10. 不必重新發明輪子 — 使用穩固的UI庫
很容易陷入必須從頭編碼每件事情的陷阱。但是你知道嗎？你不需要！市面上有許多出色的UI庫，如Ant Design、Shadcn UI、Material UI和Chakra UI，它們可以節省你大量的時間和精力。這些庫提供經過良好測試、可訪問性強且一致的組件，這樣你就可以專注於讓你的應用程式獨特，而不是重新做基本的事情。
專業提示：
如果你想要快速推進，或是在一個時間緊迫的專案中，善用這些庫。但如果你建設純粹是為了學習，隨時可以深入細節，建立自己的組件。
import { Button } from 'antd';
function MyApp() {
return <Button type="primary">點擊我</Button>;
}
使用這些庫有助於確保你的應用程式看起來精緻，運行良好，並保持一致，同時也為你節省時間。你可以總是在以後進行自訂，但從穩固的基礎開始有助於你快速推進。
不需要從頭編碼一個按鈕，當已經有一個設計精美、響應式的按鈕可以直接使用時！
結論
優秀UI的關鍵在於對細節的關注。這些小調整——一致的間距、清晰的層次結構、周到的空狀態/加載狀態/錯誤狀態，以及平衡的空白使用——會帶來巨大的不同。無論你是在開發你的第一個應用程式還是第五十個，花時間去打磨這些方面，用戶會感謝你的。
有任何想法或問題嗎？告訴我，我很樂意擴展這些主題或進一步交流。祝你編碼愉快，願你的應用程式總是感覺驚人！✨
原文出處：https://dev.to/harimanok/make-your-app-feel-better-11-ui-tips-for-beginnermid-level-developers-1e1n
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式