使用邏輯規(guī)則修復(fù)這個(gè)例子

以下2個(gè)設(shè)計(jì)是針對(duì)短租房app的房源詳情頁。第一個(gè)是原始設(shè)計(jì)。第二個(gè)是應(yīng)用一些邏輯規(guī)則或準(zhǔn)則的結(jié)果。

即使沒有太多視覺或交互設(shè)計(jì)經(jīng)驗(yàn)，您也可能會(huì)注意到原始設(shè)計(jì)感覺凌亂、復(fù)雜且難以使用。這是因?yàn)樗S多有問題的設(shè)計(jì)細(xì)節(jié)，對(duì)可用性構(gòu)成風(fēng)險(xiǎn)。

讓我們使用以下邏輯規(guī)則或準(zhǔn)則一次解決原始設(shè)計(jì)中的問題：

保持一致

圖標(biāo)樣式是不一致的，因?yàn)橛行┦翘畛涞模行┎皇?。這可能會(huì)讓一些人感到困惑，因?yàn)樘畛鋱D標(biāo)通常表示選擇了一個(gè)元素。使用 2pt 筆劃粗細(xì)和圓角勾勒出所有圖標(biāo)的輪廓可以提高一致性并為每個(gè)圖標(biāo)提供相似的視覺重量。

確保外觀相似的元素功能相似

圖標(biāo)容器具有與“立即預(yù)訂”按鈕相似的視覺風(fēng)格。這使它們看起來具有交互性，即使它們不是。從圖標(biāo)中移除藍(lán)色和按鈕樣式有助于避免它們被誤認(rèn)為是交互元素。

刪除不必要的樣式

不必要的信息和視覺風(fēng)格可能會(huì)分散注意力并增加認(rèn)知負(fù)荷（使用界面所需的腦力）。避免不必要的線條、顏色、背景和動(dòng)畫，以創(chuàng)建更簡單、更集中的界面。

有目的地使用顏色

在我們最初的示例中，藍(lán)色標(biāo)題可能看起來不錯(cuò)，但它使文本看起來具有交互性。為了幫助避免混淆，我們從標(biāo)題中刪除了藍(lán)色，因?yàn)樗皇墙换ナ降摹?/p>

我們還從其他非交互元素（如星級(jí)）中刪除了藍(lán)色。這樣可以更輕松地查看哪些是交互式的，哪些不是。

文本左對(duì)齊

居中對(duì)齊適用于標(biāo)題和短文本，因?yàn)樗梢钥焖匍喿x。但是，居中對(duì)齊會(huì)使較長的正文文本更難閱讀，因?yàn)槊啃械钠瘘c(diǎn)不斷變化。你的眼睛需要更加努力地工作才能找到每條線的起點(diǎn)。

正文至少使用1.5倍的行高

行高是兩行文本之間的垂直距離。行與行之間的空格有助于防止人們重新閱讀同一行文本。閱讀起來也更舒適。

為了可訪問性和可讀性，尤其是長正文，請(qǐng)確保行高至少為 1.5 (150%)。將行高保持在 1.5 到 2 之間通常效果很好。

如果覺得本文對(duì)你有幫助，別忘了點(diǎn)贊哦。