設(shè)計(jì)師需要注意的 UI 設(shè)計(jì)小技巧
發(fā)布時(shí)間:2021-12-16 11:04 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2847

1、盡量避免使用輪播圖指示器


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

絕大多數(shù)用戶都只會(huì)往下翻看頁(yè)面, 橫向翻頁(yè)的輪播圖多數(shù)時(shí)候用戶不會(huì)翻動(dòng)查看的。

?輪播圖通常很難快速引起用戶的興趣。
?如果可以盡量移除這個(gè)功能,或者使用其他的選項(xiàng)控件來(lái)替代它。


2、使用指向性明確的按鈕標(biāo)簽文本


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

按鈕標(biāo)簽文本內(nèi)容應(yīng)該始終指向明確的動(dòng)作,告訴用戶單擊此按鈕后會(huì)發(fā)生什么。避免「下一步」、「好的」 和其他模糊的操作名稱。

?避免使用「確定」或「下一步」等模糊的操作。
?按鈕的標(biāo)簽文本需要清楚地說(shuō)明將要發(fā)生的事情。


3、按鈕文本同樣需要層次結(jié)構(gòu)


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

當(dāng) UI 界面中有多個(gè)按鈕的時(shí)候,應(yīng)當(dāng)始終顯示哪些操作是主要的,哪些是次要的。避免讓兩個(gè)操作對(duì)應(yīng)的按鈕在外觀上是相同的,因?yàn)檫@需要用戶更長(zhǎng)的時(shí)間分辨,可能會(huì)讓人感到困惑。

?清楚地顯示哪些動(dòng)作是 主要的1??,哪些是次要的2?? 。
?避免讓兩個(gè)操作按鈕在視覺(jué)上看起來(lái)是相同的


4、避免使用筆觸太纖細(xì)的字體


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

筆觸太纖細(xì)的字體在閱讀上畢竟困難,尤其是在正常字號(hào)的情況下,還會(huì)讓文本看起來(lái)并不重要。

?常規(guī)、半粗體和粗體的字體更易于閱讀,并且有著更好的可訪問(wèn)性。
?避免在您的項(xiàng)目中使用筆觸過(guò)于纖細(xì)的字體。


5、圖標(biāo)風(fēng)格樣式應(yīng)當(dāng)保持一致


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

混合不同類型的圖標(biāo)(比如 描邊樣式 vs 填充樣式),會(huì)使設(shè)計(jì)給人感覺(jué)比較混亂,尤其是很多圖標(biāo)在被觸發(fā)狀態(tài)下,會(huì)從描邊樣式切換為填充樣式,不同樣式在同一狀態(tài)下混用,可能會(huì)和用戶的認(rèn)知預(yù)期相悖,導(dǎo)致迷惑。

?所有的圖標(biāo)都應(yīng)該具有完全相同的樣式、風(fēng)格和形式。
?不要將填充的圖標(biāo)與輪廓的圖標(biāo)混合在一起。


6、在按鈕中保持足夠多的空白


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

缺少足夠留白控件的的按鈕在視覺(jué)上是非常不美觀的,一方面會(huì)導(dǎo)致使消息難以閱讀,另一方面,會(huì)讓設(shè)計(jì)顯得完成度不足。

?比較安全的選擇是文本距離邊緣至少有一個(gè)「x高度」的距離,如果是2倍則更好。
?避免使用文本標(biāo)簽周圍留白太少的按鈕。


7、避免使用紅色星號(hào)來(lái)標(biāo)識(shí)必填字段


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

如今的移動(dòng)端表單設(shè)計(jì)傾向于不使用紅色星號(hào)來(lái)強(qiáng)調(diào)必填字段,而是盡量只為用戶提供必填的字段,并且錯(cuò)誤的字段順序會(huì)使得填寫(xiě)表格非常耗時(shí)。

?如果可以,請(qǐng)改為文字標(biāo)明是「選填」或干脆去掉這些字段。
?避免使用紅色星號(hào)來(lái)表示必填,并盡量只讓用戶填寫(xiě)必要的字段。


8、避免使用多欄表格


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

雖然多欄表格的空間利用率更高,但是體驗(yàn)和可用性并不好,采用排列在一列的表格會(huì)更加更加清晰易讀,也易于填寫(xiě)。

?將表單保留為一列,以便于快速閱讀和填寫(xiě)。
?盡可能避免使用多列表單!


9、盡量避免在表單中使用下劃線標(biāo)識(shí)字段


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

將需要填寫(xiě)的表單使用下劃線來(lái)表示,對(duì)于用戶來(lái)說(shuō)不是很明顯,通常用戶需要花費(fèi)更長(zhǎng)的時(shí)間才能理解下劃線意味著待填寫(xiě)的表單。

?用戶需要更長(zhǎng)的時(shí)間才能理解下劃線字段為需要填寫(xiě)的表單。
?輸入框具有清晰可見(jiàn)的邊界,也可以很輕松地被理解。


10、消息通知的屬性和色彩、符號(hào)保持一致


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

對(duì)于信息不明確或者矛盾的通知,很容易讓用戶感到迷惑,主要是它的含義(表示肯定還是否定)和所對(duì)應(yīng)的視覺(jué)標(biāo)識(shí)(比如顏色、圖標(biāo)、符號(hào))應(yīng)當(dāng)相互匹配,否則用戶會(huì)很難確定這個(gè)信息的準(zhǔn)確性。

?避免使用矛盾的信息,傳達(dá)不明確的信息。
?清楚告訴用戶發(fā)生了什么以及接下來(lái)要做什么。


11 、避免使用太小的點(diǎn)擊區(qū)域


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

太小的點(diǎn)擊區(qū)域,無(wú)論是在移動(dòng)端UI 還是桌面端 UI 上都會(huì)降低用戶的舒適度,并且常常令人感到困惑。

?較大的控件尺寸在桌面上更易于使用。
?即使在桌面上,也要盡量避免較小的點(diǎn)擊區(qū)域。


12、表單輸入框盡量避免使用圓形邊緣


第一波!設(shè)計(jì)師必須注意的 12 個(gè) UI 設(shè)計(jì)小技巧

圓形表單輸入框在視覺(jué)上總不是太好處理,即使文本和輸入框?qū)R了,在視覺(jué)上也會(huì)很奇怪。

?輸入框采用小弧度圓角是沒(méi)問(wèn)題的,但是要讓它視覺(jué)上做邊緣清晰。
?純粹圓角的表單輸入框左邊緣上存在視覺(jué)對(duì)齊的問(wèn)題。

零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC