1喻圃、在明亮的背景下烁竭，給白色的文字中添加一個(gè)微妙的陰影不僅能讓文字更清晰稳吮，還能讓文字更“流行”。
2稍味、讓梯度漸變顯得更加充滿活力的辦法就是通過(guò)調(diào)整色調(diào)（hue）10o或20omax废麻。
3、按鈕交互變化：當(dāng)鼠標(biāo)懸停時(shí)模庐，增加陰影和button整體上移1px烛愧。參考網(wǎng)站：Stripe
4、給卡片一個(gè)輕微的掂碱，垂直的偏移有助于使它們看起來(lái)更自然怜姿。
5、為使你的設(shè)計(jì)更易于閱讀顶吮，對(duì)齊文本是最簡(jiǎn)單的方法社牲。
6、純灰色的文本總是在有顏色的背景上顯示“off”悴了。一個(gè)快速的解決辦法是在你的文本中加入一點(diǎn)背景色調(diào)搏恤。但在復(fù)雜的背景下做這件事時(shí)要小心，因?yàn)樗赡軙?huì)給人一種“幽靈”的感覺湃交。
7熟空、當(dāng)使用圖標(biāo)時(shí)，如果圖標(biāo)的字重大于文本的搞莺，那么圖標(biāo)的色相通常會(huì)輕于文本的息罗。
8、使用像箭頭或復(fù)選標(biāo)記而不是標(biāo)準(zhǔn)項(xiàng)目符號(hào)這樣的泛型圖標(biāo)是為無(wú)序列表增加視覺興趣的好方法才沧。
9迈喉、為你的主要區(qū)域頂部添加一個(gè)顏色(或漸變)提示 (4 到 6px) 是一個(gè)簡(jiǎn)單的技巧, 使你的設(shè)計(jì)更生動(dòng)
? ? ? (這個(gè)技巧也適用于modals、面板)
10温圆、除了大小和重量挨摸，使用顏色和對(duì)比度是創(chuàng)建排版層次結(jié)構(gòu)的好方法。
11岁歉、所有大寫字母有時(shí)很難閱讀得运。考慮使用字母間距給你的文本多一些留白。
12熔掺、為保證圓角像素完美性, 通常需要在網(wǎng)格上畫圓圈, 并連接他們, 而不是依靠草圖的半徑饱搏。
13、線條不僅很好地劃分內(nèi)容, 而且使斷開連接的內(nèi)容感覺更緊密置逻。
14推沸、為使頁(yè)面垂直距離上看著更加有節(jié)奏感，使用倍數(shù)來(lái)定義你的間距, 并提供一個(gè)公式, 以證明您的選擇诽偷。
15坤学、對(duì)于banner的制作：照片 + 加粗顏色 + 混合模式: 相乘+創(chuàng)建高對(duì)比度的文本。
16报慕、頁(yè)面上的重疊元素是創(chuàng)建深度和鼓勵(lì)用戶滾動(dòng)的好方法深浮。
17、對(duì)于負(fù)次要操作, 一個(gè)微妙的鏈接通常比一個(gè)大的粗體按鈕更管用眠冈。（注意：請(qǐng)確保您有一個(gè)確認(rèn)步驟）
18飞苇、太多的邊框會(huì)使設(shè)計(jì)看起來(lái)非常凌亂。下面是一些更微妙的想法:
19蜗顽、雙列表單布局對(duì)于組織長(zhǎng)表單和在不使用笨拙的長(zhǎng)表單域的情況下填充更寬的屏幕非常重要布卡。
20、字體大小并非總是強(qiáng)調(diào)或取消強(qiáng)調(diào)文本的最佳方式, 請(qǐng)嘗試使用顏色和字體粗細(xì)來(lái)替代雇盖。
21忿等、設(shè)計(jì)好的表可能會(huì)很困難, 但下面的做法可以使表格設(shè)計(jì)看起來(lái)有些不同：
22、在應(yīng)用程序中的圖標(biāo), 試著在它們后面放一個(gè)形狀, 給它們一個(gè)背景顏色崔挖。
23贸街、處理相互沖突的圖像？嘗試給他們統(tǒng)一的灰度或使用統(tǒng)一的顏色, 使他們更一致狸相。
24薛匪、下拉列表可以不僅僅是一個(gè)無(wú)聊的鏈接列表。他們只是盒子, 你可以用他們做很多事情脓鹃；
? ? ? ? 例如, 當(dāng)您要添加支持文本時(shí), 這種兩列布局很棒：
25逸尖、這種 "眉" 標(biāo)題處理不僅是很好的澄清你的信息, 但它也使一個(gè)無(wú)聊的標(biāo)題 + 身體模式看起來(lái)更有趣。
? ? ? 這種小的瘸右、大寫的文本處理方法對(duì)于鏈接列表 (如此垂直導(dǎo)航或頁(yè)腳站點(diǎn)地圖) 的標(biāo)題也很有用娇跟。
26、對(duì)所有文本使用相同的行高是一個(gè)非常微妙但常見的錯(cuò)誤（1.5倍行高可以很好地做為拷貝參考）, 但
隨著文本變得更大, 你的線高度應(yīng)該變得更緊太颤。
27逞频、"灰色" 并不意味著灰色。試著用藍(lán)色或褐色來(lái)飽和你的灰色, 給人冷卻或變暖的感覺栋齿。
28、如果你想要不同大小的文字 “感覺” 一樣的重量, 使較大的文本更薄, 更小的文本更大膽。
29瓦堵、課程定價(jià)部分設(shè)計(jì)參考：
30基协、重疊圖像是向界面添加深度的好方法, 使其看起來(lái)更有 "設(shè)計(jì)”感。
? ? ? 使用與背景顏色匹配的邊框來(lái)創(chuàng)建區(qū)別, 并保持看起來(lái)干凈的東西菇用。
31澜驮、不要害怕 "在數(shù)據(jù)庫(kù)之外思考"-您的 UI 不需要與數(shù)據(jù)的字段和值進(jìn)行一對(duì)一的映射。
? ? ? 下面是一些您可以用更有趣的方式來(lái)呈現(xiàn) "field: value" 數(shù)據(jù)的一些想法:
原文鏈接：Little ui details惋鸥；
原文作者：Steve Schoger? ? ? ? ? ? Grant McAllister
內(nèi)容部分經(jīng)過(guò)本人篩選及在原文基礎(chǔ)上做了適量的刪減杂穷。
