當(dāng)你為你的項(xiàng)目創(chuàng)建有效的，可訪問的，漂亮的ui時(shí)，只需要最小的調(diào)整來(lái)幫助快速改善你的設(shè)計(jì)。 努力創(chuàng)造。在這篇簡(jiǎn)短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實(shí)踐中，這些小技巧可以毫不費(fèi)力地幫助你改善你的設(shè)計(jì)，還有用戶體驗(yàn)。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個(gè)陰影比你的實(shí)際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來(lái)泥濘的陰影。
標(biāo)題給一個(gè)更好的光學(xué)范圍。減少長(zhǎng)格式正文的字母間距？這是一個(gè)大大的“不”。但對(duì)于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會(huì)比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時(shí)會(huì)出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計(jì)時(shí)，使用單一字體是絕對(duì)沒問題的，這樣做實(shí)際上可以幫你產(chǎn)生更強(qiáng)、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個(gè)單獨(dú)的字體。
留白是UI設(shè)計(jì)朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計(jì)透氣，而且看起來(lái)更光亮。
創(chuàng)建長(zhǎng)篇內(nèi)容？給20 pt試試。對(duì)于長(zhǎng)形式的內(nèi)容（即微博文章，項(xiàng)目描述等等），試著這樣做20pt(甚至更多一點(diǎn))為你的文本字號(hào)。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時(shí)效果得很好，并帶來(lái)更好的閱讀體驗(yàn)當(dāng)你的用戶面對(duì)一堵文字墻的時(shí)候。18pt太過時(shí)了。
使用字體比例定義一個(gè)適合的字體大小集。使用字體比例可以幫助您輕松、實(shí)用地定義一組字體大小。顧名思義，Type Scale基于一個(gè)比例因子(比如1.25)工作的。從一個(gè)基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來(lái)和諧的文本字號(hào)集。因?yàn)樗麄兊拇笮「鶕?jù)設(shè)定的固定比例增加和減少。
選擇一個(gè)基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計(jì)。如果項(xiàng)目允許，簡(jiǎn)單地使用一個(gè)有限的調(diào)色板選擇一個(gè)基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡(jiǎn)單的方式來(lái)改變你的設(shè)計(jì)。
改善用戶登錄的體驗(yàn)。記住拇指規(guī)則。允許用戶在任何時(shí)候跳過您的移動(dòng)應(yīng)用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個(gè)簡(jiǎn)單的調(diào)整，可以為你的用戶提供更好的體驗(yàn)……
記住，拇指仍然是主宰！
你的影子來(lái)自其中一個(gè)光源對(duì)吧？確保你的影子總是來(lái)自一個(gè)光源。這是一個(gè)簡(jiǎn)單的錯(cuò)誤，但它可以讓你的設(shè)計(jì)看起來(lái)更拋光且統(tǒng)一。記住，我們不是生活在一個(gè)擁有一千個(gè)太陽(yáng)的國(guó)度里。
使用更好的字體組合，效率會(huì)很很快。當(dāng)你想要提高你的字體組合技巧的時(shí)候，當(dāng)面對(duì)1000個(gè)字體選擇，只是去尋找對(duì)應(yīng)的自己集合，效率會(huì)快很多。
文字和圖像與一個(gè)微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測(cè)試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實(shí)現(xiàn)兩者之間的簡(jiǎn)單對(duì)比。為了在你的文本之間形成良好的對(duì)比，不要太復(fù)雜的內(nèi)容和圖片。
太多就會(huì)導(dǎo)致用戶體驗(yàn)不合格。盡量只在標(biāo)題和小段落中使用中心文字。對(duì)于幾乎所有其他內(nèi)容，保持文本左對(duì)齊。你的用戶會(huì)感謝你的你。
當(dāng)選擇一個(gè)多用途的文字，盡量找一個(gè)大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項(xiàng)目中使用它，請(qǐng)嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項(xiàng)目會(huì)要求“只有一種風(fēng)格”
更精致的字體，但對(duì)于絕大多數(shù)項(xiàng)目，你想要的字體再多一點(diǎn)就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計(jì)過程的后期需要更多的空間。
想要?jiǎng)?chuàng)造更容易理解的界面，對(duì)吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時(shí)，不要讓你的文本太亮。
當(dāng)涉及到長(zhǎng)形式的內(nèi)容時(shí)，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會(huì)很僵硬。你可以很容易地解決這個(gè)問題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識(shí)，對(duì)嗎？我并不覺得。通過使用色彩對(duì)比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。
當(dāng)你的字體變小時(shí)，請(qǐng)?jiān)黾有懈?，以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡(jiǎn)單地降低行高。
使用x-height來(lái)測(cè)試字體的可讀性?；旧?，x-height是一個(gè)小寫字母' x '相對(duì)于大寫字母高度 (T)的相同字體。如果你的字體有一個(gè)大的x高，通常有助于更好地閱讀，特別是在使用長(zhǎng)形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無(wú)法選擇的字體，可以做這個(gè)測(cè)試，比較來(lái)自特定字體的三個(gè)字符：大寫字母I，小寫的L和數(shù)字1。
當(dāng)設(shè)計(jì)一個(gè)在應(yīng)用程序內(nèi)部使用的菜單時(shí)，確保提供最多經(jīng)常使用的動(dòng)作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會(huì)給你的產(chǎn)品帶來(lái)生命。簡(jiǎn)單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計(jì)具有豐富的視覺趣味和個(gè)性。
基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測(cè)量，實(shí)現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來(lái)實(shí)現(xiàn)。
突出最重要的元素。通過使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡(jiǎn)單，但微妙的調(diào)整，讓用戶體驗(yàn)更好一點(diǎn)。
操作錯(cuò)誤的時(shí)候，添加一個(gè)額外的視覺輔助。在用戶剛剛采取的操作附近添加一個(gè)錯(cuò)誤消息可以是簡(jiǎn)單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時(shí)額外的視覺輔助。
嘗試在移動(dòng)端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域，是好的。對(duì)于只包含文本的按鈕和鏈接來(lái)說，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點(diǎn)擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請(qǐng)確保它們?cè)谌魏螘r(shí)候都很短。有可能，最好是一行。將它們用于較長(zhǎng)的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對(duì)比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡(jiǎn)單地應(yīng)用一個(gè)稍微不透明的背景在你的文本后面將保持這些元素之間的對(duì)比度很好。
看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計(jì)感很強(qiáng)。（我沒有推廣費(fèi)用，請(qǐng)放心用）
看看這些很棒的字體，用于長(zhǎng)文本是非常好的，強(qiáng)烈推薦使用。（我仍然沒有任何推廣費(fèi)）。
標(biāo)題和正文。當(dāng)你想實(shí)現(xiàn)一個(gè)好的垂直節(jié)奏，以及一個(gè)強(qiáng)大的視覺之間，需要對(duì)文本元素排版、間距作設(shè)計(jì)。我見過許多設(shè)計(jì)，最常見的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會(huì)給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強(qiáng)，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。
對(duì)于下載指標(biāo)，試著去做盡可能提供信息。對(duì)于用戶，嘗試使具有信息性的下載指示符對(duì)用戶很友好。你可以通過使用顏色來(lái)實(shí)現(xiàn)這一點(diǎn)，用百分?jǐn)?shù)來(lái)顯示當(dāng)前進(jìn)度，一個(gè)簡(jiǎn)單的圖標(biāo)，讓他們可以在任何地方取消下載時(shí)間。
如果你能保持標(biāo)題簡(jiǎn)短，簡(jiǎn)潔……“想做就做”。
如果可以，如果合適的話，保持標(biāo)題簡(jiǎn)短，時(shí)髦，切中要點(diǎn)。而不是“這是你的風(fēng)格，你的方式”，簡(jiǎn)單地使用像這樣的“你的風(fēng)格。你的方式?！比藗儠?huì)瀏覽，保持這些標(biāo)題簡(jiǎn)短有力有助于他們更快地消化中的信息。
記住，這種方式可能會(huì)讓人感覺很突然，你需要考慮一下你所從事的項(xiàng)目類型，以及目標(biāo)受眾來(lái)決定方法是合適的，相對(duì)于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計(jì)“聲音”。在項(xiàng)目中處理文本時(shí)，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨(dú)特的聲音，關(guān)鍵在于找到合適的字體你正在做的項(xiàng)目的聲音。當(dāng)你剛接觸字體時(shí)，這似乎是一項(xiàng)艱巨的任務(wù)，所以不要害怕從類似的項(xiàng)目中獲得靈感，并從這些項(xiàng)目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長(zhǎng)度可能有點(diǎn)平衡。對(duì)于一個(gè)單獨(dú)的列頁(yè)面，45到75個(gè)字符被普遍認(rèn)為是滿意的行長(zhǎng)度，而行長(zhǎng)度為66個(gè)字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時(shí)也起著重要作用，但是對(duì)于行長(zhǎng)，保持在45到75個(gè)字符之間，就會(huì)更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅(jiān)持可用性最佳的做法是沒有問題的。但有時(shí)，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計(jì)都落入乏味。如果沒有元素會(huì)以任何方式影響用戶體驗(yàn)，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個(gè)獨(dú)立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來(lái)，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項(xiàng)目在屏幕上，并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對(duì)吧？它們可以作為微妙又很強(qiáng)大的視覺線索，在您的設(shè)計(jì)中使用要適度。現(xiàn)實(shí)世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實(shí)現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計(jì)中適度使用“全部大寫”是很好的。選擇一個(gè)合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無(wú)處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過最小的調(diào)整，你可以確保用戶能夠快速定位他們?cè)谝粋€(gè)網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個(gè)深度，這一點(diǎn)尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來(lái)緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來(lái)很棒，但是當(dāng)過度使用時(shí)，它們會(huì)使使用者的眼睛疲勞，主要是在使用的時(shí)候的文字內(nèi)容。盡可能使用時(shí)要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時(shí)，可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計(jì)中添加圖標(biāo)時(shí)，試著選擇一個(gè)有代表性的已建立的圖標(biāo)。不要選擇一個(gè)能傳達(dá)正確含義和功能的圖標(biāo)否則會(huì)引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測(cè)試的設(shè)計(jì)原則中，這里有一個(gè)是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計(jì)元素放置在一起的過程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時(shí)，8點(diǎn)網(wǎng)格旁邊使用4點(diǎn)基線
可以為你的設(shè)計(jì)帶來(lái)更和諧的垂直節(jié)奏。您需要對(duì)齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時(shí)，按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長(zhǎng)形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計(jì)劃嗎？在顏色上進(jìn)行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個(gè)簡(jiǎn)單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時(shí)，可以使用類似的方法。
在你的設(shè)計(jì)中盡量提高信噪比。你可以在你的設(shè)計(jì)中通過最大化信號(hào)來(lái)實(shí)現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號(hào))來(lái)實(shí)現(xiàn)這一點(diǎn)有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語(yǔ)氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會(huì)顯得有點(diǎn)正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項(xiàng)目時(shí)，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強(qiáng)的對(duì)比。
當(dāng)使用類型時(shí)，元素不需要尖叫“看看我!”一直如此但他們確實(shí)需要一個(gè)平衡的等級(jí)制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實(shí)現(xiàn)這一點(diǎn)。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個(gè)更輕的粗細(xì)。但是…反過來(lái)說:淺色文字>深色背景。最好是看一下增加一點(diǎn)字體重量，特別是對(duì)于長(zhǎng)表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個(gè)好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因?yàn)樽帜父啾舜藚^(qū)分。字母之間的間距只要稍微增加一點(diǎn)就可以。
打開這些錯(cuò)誤消息，您的表格有幫助。在使用表單時(shí)，請(qǐng)嘗試并確保錯(cuò)誤消息得到解釋。出了什么問題，如何補(bǔ)救?？偸亲層脩袅私馇闆r，即使是像常規(guī)一樣常見的事情的形式。讓這些錯(cuò)誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會(huì)發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個(gè)重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個(gè)動(dòng)作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進(jìn)行確認(rèn)。他們就會(huì)按下那個(gè)標(biāo)有“刪除”的紅色大按鈕。
文章來(lái)源：站酷 作者：卡洛設(shè)計(jì)雜貨鋪
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
Duoton icon
漸變色已經(jīng)流行了段時(shí)間,雙色漸變?cè)O(shè)計(jì)依然持續(xù)是一個(gè)大趨勢(shì)，因?yàn)閱我坏纳{(diào)無(wú)法滿足產(chǎn)品所需，雙色調(diào)圖標(biāo)的特點(diǎn)就是色彩對(duì)比鮮明，青春活力，這種相比單色調(diào)圖標(biāo)，更適合應(yīng)用于一些主流偏年輕化產(chǎn)品，因此設(shè)計(jì)師還可以通過設(shè)計(jì)色彩打動(dòng)用戶，提升產(chǎn)品競(jìng)爭(zhēng)力，工具化產(chǎn)品也可以使用這樣有層次的圖標(biāo)，不過使用時(shí)，需要對(duì)色彩進(jìn)行克制使用。因此，如果您希望自己的設(shè)計(jì)界面脫穎而出，可以去大膽的使用雙色調(diào)色彩。
1. 雙色調(diào)多層質(zhì)感(彌散漸變，直投影，混合模式)
2. 雙色調(diào)混合模式疊加
Alpha icon 圖標(biāo)風(fēng)格最大特點(diǎn)就是單色帶透明漸變，通過弱透明度來(lái)制造視覺層次，如果是純白色，就會(huì)顯得圖標(biāo)平庸了一些，這種圖標(biāo)運(yùn)用范圍可以是界面中空?qǐng)鼍盎蛘咭恍╆P(guān)鍵模塊的主功能圖標(biāo)。
如下圖左側(cè)大卡片上面圖標(biāo)應(yīng)用思路。
層疊式圖標(biāo)，相比于純白色線條圖標(biāo)，它帶來(lái)一種更舒適的質(zhì)感，其設(shè)計(jì)方法是通過穿插層疊的手法，將日常我們所見到的單一的線條圖標(biāo)，變得更具有視覺層次感，當(dāng)然這種圖標(biāo)使用場(chǎng)景一般會(huì)是在功能說明性頁(yè)面，功能介紹等。
品牌植入一直是非常大趨勢(shì)，包括今年我們所看到兩大廠的品牌更新IBM和UBER等，都是將品牌核心符號(hào)植入設(shè)計(jì)中，我想這樣的思路在2020年將持續(xù)會(huì)是一個(gè)重要表達(dá)產(chǎn)品氣質(zhì)和記憶點(diǎn)手法打造思路之一，因?yàn)橛脩粢呀?jīng)很熟悉目前圖標(biāo)模式，如何能創(chuàng)新區(qū)別其他產(chǎn)品，那么融入品牌將是一個(gè)不錯(cuò)的選擇~品牌的融入技巧有高低之分，需要設(shè)計(jì)師去巧妙設(shè)計(jì)
同樣多鄰國(guó)在前段時(shí)間更新品牌，并將其LOGO特征符號(hào)植入字體中。
同樣多鄰國(guó)在前段時(shí)間更新品牌，并將其特征元素植入字體中
動(dòng)態(tài)圖標(biāo)是一個(gè)能提升產(chǎn)品體驗(yàn)的方法之一，也是微交互中的一種，它可以增加產(chǎn)品趣味性，F(xiàn)acebook在評(píng)論入口的表情動(dòng)畫就運(yùn)用了動(dòng)態(tài)圖標(biāo)， 包括蘋果Apple Pay支付成功圖標(biāo)動(dòng)畫，Google Assistant智能助手，Messenger中的打招呼動(dòng)畫等等我們可以逐漸發(fā)現(xiàn)動(dòng)態(tài)圖標(biāo)比靜態(tài)圖標(biāo)的表達(dá)性更強(qiáng)，更受到青睞，隨著硬件升級(jí)，這種動(dòng)態(tài)圖標(biāo)運(yùn)用逐漸在越來(lái)越多場(chǎng)景可見到。
備注（因?yàn)橐曨l比較麻煩，因此省略了）
文章來(lái)源：優(yōu)波設(shè)計(jì) 作者：設(shè)計(jì)TNT
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
隨著體驗(yàn)設(shè)計(jì)的持續(xù)發(fā)展，行業(yè)內(nèi)各領(lǐng)域的體驗(yàn)設(shè)計(jì)質(zhì)量都有了很大的提升，并且各個(gè)競(jìng)品之間的差距越來(lái)越小。而更高的界面細(xì)節(jié)設(shè)計(jì)質(zhì)量不僅是各個(gè)大廠產(chǎn)品體驗(yàn)設(shè)計(jì)的追求，也是我們拉開競(jìng)品差距的關(guān)鍵一環(huán)。我們平時(shí)可能閱讀了很多理論知識(shí)文章，但往往在實(shí)際工作中卻較少運(yùn)用。學(xué)習(xí)掌握理論基礎(chǔ)知識(shí)固然是很重要的，但在設(shè)計(jì)執(zhí)行時(shí)掌握設(shè)計(jì)技巧也更能提升工作的效率和質(zhì)量。那么在設(shè)計(jì)執(zhí)行層遇到問題有沒有一些立竿見影的解決方案呢？本篇文章分別從視覺、內(nèi)容和交互三個(gè)角度總結(jié)了十個(gè)界面細(xì)節(jié)設(shè)計(jì)點(diǎn)，希望可以幫助你遇到問題時(shí)另辟蹊徑，延伸更好的設(shè)計(jì)思路。
在封面和背景圖設(shè)計(jì)的場(chǎng)景中，我們?yōu)榱俗尫饷嫔系男畔⒛軌蚋菀卓辞?，通常?huì)在文字下添加一層黑色半透明或者漸變蒙層，但你有想過這個(gè)蒙層可以不止是黑色的嗎？
在設(shè)計(jì)社區(qū)話題詳情頂部背景圖時(shí)，我們采用封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會(huì)在背景上加一個(gè)深色半透明蒙層。當(dāng)用純黑色作為蒙層時(shí)淺色背景可能會(huì)顯得很臟，這時(shí)可以改用深灰色讓背景看起來(lái)不會(huì)太臟，加入深灰色可以減弱部分背景的黑色讓背景圖看起來(lái)更加柔和。下圖左邊是用黑色#000000、30%不透明度，右邊是深灰#333333、30%不透明度。可以看出右邊方案的效果明顯更清爽一些。當(dāng)然更好的方案是通過客戶端拾取背景圖顏色后生成對(duì)應(yīng)色相的深色蒙層，但這個(gè)方案設(shè)計(jì)相對(duì)比較復(fù)雜。需要制定一系列拾色和生成對(duì)應(yīng)色值的規(guī)范，并且開發(fā)成本偏高。有條件的話也可以考慮應(yīng)用。
界面中使用圓角設(shè)計(jì)更能讓用戶感到親和力和舒適感，所以運(yùn)用場(chǎng)景也非常廣泛。除了比較常見的封面、卡片、按鈕等等圓角的使用場(chǎng)景，在一些細(xì)節(jié)的處理運(yùn)用圓角也能提升設(shè)計(jì)品質(zhì)。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運(yùn)用常規(guī)的切割邊角就比較尖銳，會(huì)略顯生硬。
而添加了圓角處理后視覺上會(huì)更加柔和更協(xié)調(diào)，對(duì)比一下前后的方案不難發(fā)現(xiàn)圓角的效果更勝一籌。不要看只是一點(diǎn)很小的細(xì)節(jié)，其實(shí)也體現(xiàn)了設(shè)計(jì)師對(duì)細(xì)節(jié)的細(xì)心追求，用戶看了也會(huì)體會(huì)到設(shè)計(jì)師的用心。
另外再介紹一下我個(gè)人在sketch中快速繪制這類圓角銜接的方法。以下圖為例，首先頭像的圓形描邊需要單獨(dú)畫一個(gè)白色的圓形圖層，而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設(shè)為聯(lián)集，再將圖層路徑合并。然后在兩個(gè)銜接處的兩邊各添加一個(gè)錨點(diǎn)，注意兩個(gè)錨點(diǎn)和銜接點(diǎn)的距離一定要相等，這個(gè)距離決定了圓角的大小，可以根據(jù)需要來(lái)調(diào)整。之后把銜接點(diǎn)的錨點(diǎn)類型改為“筆直”，再給這個(gè)錨點(diǎn)添加圓角半徑。這樣銜接點(diǎn)的圓角繪制就完成啦。另外運(yùn)用布爾運(yùn)算來(lái)畫出圓角也是可以的，具體方法可以根據(jù)個(gè)人習(xí)慣來(lái)選擇。
我們?cè)陧?yè)面取色時(shí)經(jīng)常會(huì)給背景色和陰影等結(jié)合場(chǎng)景帶有一些顏色傾向，以達(dá)到更舒適的視覺效果，其實(shí)這個(gè)方法也適用于文字。為了提升效率，我們習(xí)慣了在選擇字色時(shí)使用一套設(shè)計(jì)規(guī)范里的顏色，比如#333333、#999999等等。但是個(gè)別的特殊模塊我們是可以根據(jù)實(shí)際情況調(diào)整以獲得更好的視覺效果的。比如下面這個(gè)案例是一個(gè)熱帖榜單的入口模塊，為了提高信息層級(jí)讓頁(yè)面更有活力，這里選擇用淺黃色作為背景。如果使用規(guī)范的字色與背景的結(jié)合會(huì)相對(duì)不太協(xié)調(diào)，這里選擇字色時(shí)就可以讓文字顏色和背景顏色帶有相同的色相，選用高飽和度低明度的顏色，并且次級(jí)信息同時(shí)可以帶一點(diǎn)不透明度。讓整個(gè)模塊視覺更統(tǒng)一，信息與背景更融合。
類似這樣的場(chǎng)景其實(shí)還有很多，有時(shí)我們也不必拘泥于設(shè)計(jì)規(guī)范中，適當(dāng)?shù)母鶕?jù)模塊定制化一些細(xì)節(jié)可以達(dá)到更好的視覺效果。
我們經(jīng)常會(huì)遇到一個(gè)頁(yè)面中有多個(gè)同級(jí)圖標(biāo)排列的情況，不管是用宮格排列或是列表排列都需要每個(gè)圖標(biāo)整齊有序、尺寸統(tǒng)一。但實(shí)際情況下不可能每個(gè)圖標(biāo)尺寸都完全統(tǒng)一。一般這種情況我們可以給每個(gè)圖標(biāo)統(tǒng)一添加一個(gè)相同尺寸的矩形圖層作為背景板，將背景板隱藏后再整體編組，這樣一來(lái)就能保證每個(gè)圖標(biāo)所在的組都是相同的尺寸就能統(tǒng)一對(duì)齊了。
然鵝，我們有時(shí)會(huì)遇到一些不規(guī)則形狀圖標(biāo)，尺寸是奇數(shù)甚至是帶小數(shù)的。這種情況圖標(biāo)如果要在背景板上完全居中，我們可以打開首選項(xiàng)中的圖層項(xiàng)，關(guān)閉契合像素功能，然后可以拖動(dòng)圖標(biāo)或者用對(duì)齊功能讓圖標(biāo)與背景板對(duì)齊。不要忽略這一兩個(gè)像素的差別，這些微小的細(xì)節(jié)往往決定了界面設(shè)計(jì)的嚴(yán)謹(jǐn)和精致程度。
另外，我們可以根據(jù)情況靈活調(diào)整圖標(biāo)在背景板中的位置，例如左右箭頭圖標(biāo)為了與頁(yè)面其他內(nèi)容邊距對(duì)齊，可以將圖標(biāo)貼合背景板左右兩邊。這樣就能減少后期開發(fā)還原調(diào)整的工作量，提高工作效率。
標(biāo)題信息在界面設(shè)計(jì)中使用頻率非常高，而在設(shè)計(jì)過程中我們可能會(huì)忽略極限字?jǐn)?shù)的情況，導(dǎo)致開發(fā)還原時(shí)實(shí)際效果不理想。下面以一個(gè)案例來(lái)分享一下標(biāo)題極限值的處理方法。
在騰訊動(dòng)漫社區(qū)改版中設(shè)計(jì)話題詳情頁(yè)的標(biāo)題時(shí)，產(chǎn)品規(guī)劃標(biāo)題的字?jǐn)?shù)為12個(gè)字符，在右邊有看漫畫按鈕的情況下是顯示不完全的。這個(gè)情況就要考慮設(shè)計(jì)極限值的顯示方案。常規(guī)的方案有：1、顯示不完全時(shí)后面顯示“...”；2、換行顯示。考慮到詳情頁(yè)需要將標(biāo)題完全展示，所以方案一不可行。而方案二在單行和雙行兩種情況下視覺效果不好統(tǒng)一。最終經(jīng)過思考決定使用方案三：標(biāo)題顯示不全時(shí)左右滾動(dòng)展示，可以在保證視覺統(tǒng)一同時(shí)顯示完整的標(biāo)題。
同樣的，在很多情況下我們由于空間受限無(wú)法展示完整信息時(shí)，這個(gè)方案也不失為一個(gè)很好的選擇。
在頁(yè)面設(shè)計(jì)工作中我們有時(shí)會(huì)遇到信息容器邊界固定，而容器內(nèi)信息可以滑動(dòng)的情況。例如下圖中頂部導(dǎo)航和音樂播放的歌詞頁(yè)面，這種場(chǎng)景下一般容器邊界不會(huì)做明顯的界限，如果內(nèi)容在邊界處是直接被裁切的話體驗(yàn)的感受就會(huì)比較割裂。我們可以嘗試更好的解決方案，在容器邊界增加漸變過渡，這樣信息在邊緣的過渡就變得柔和，頁(yè)面整體更協(xié)調(diào)。
這種漸變的過渡的應(yīng)用場(chǎng)景還有很多，比如瀏覽簡(jiǎn)介或者文章時(shí)，需要隱藏部分內(nèi)容并提供展開閱讀全文的操作。利用漸變過渡也能隱喻還有未完全展示的內(nèi)容，降低用戶的理解成本并且也能夠讓用戶有心理預(yù)期。
另外在sketch上呈現(xiàn)這種漸變過渡也很方便，如果背景是純色的話可以在邊界處添加一個(gè)與背景色相同顏色的色塊，然后給色塊添加添加不透明度從0～100的漸變，這個(gè)方法比較簡(jiǎn)單。如果遇到背景復(fù)雜的情況，也可以繪制一個(gè)和容器相同大小的矩形，在矩形邊緣添加不透明度從0～100的漸變，然后建立蒙版把信息剪切到矩形中。
至于開發(fā)實(shí)現(xiàn)的方案還是要和開發(fā)哥哥具體溝通，確保用最便捷的方案還原出最好的效果。
動(dòng)態(tài)流是我們非常常見的樣式，是分發(fā)用戶生產(chǎn)內(nèi)容的主要載體之一。主要包含了用戶信息、文字、圖片和視頻等內(nèi)容。一般情況支持九張圖片或一個(gè)視頻，在有多張圖片時(shí)，可以如下圖做成宮格的樣式適配，每張圖片截取中間的正方形部分。
而只有一張圖片或者視頻時(shí)，為了保證圖片和視頻的預(yù)覽效果，通常會(huì)做大尺寸的預(yù)覽圖，而圖片的寬高尺寸并不固定，所以只截取中間方形的方案并不能滿足要求，我們要根據(jù)這個(gè)情況做單獨(dú)的適配方案。首先我們要設(shè)定一個(gè)裁切的比例，比如我們?nèi)∝Q圖最小裁剪寬高比為2:3，橫圖最大裁剪寬高比為3:2（這里的寬高比并不是固定的，可以根據(jù)實(shí)際需要自己定義比例，采用4:3、16:9等比例都是可以的）。這樣當(dāng)圖片寬高比小于2:3時(shí)，我們可以把圖片中間區(qū)域按寬高2:3裁剪出來(lái)；圖片寬高大于2:3并且小于3:2時(shí)可以按原圖比例預(yù)覽；而圖片寬高大于3:2時(shí)，把圖片中間區(qū)域按寬高3:2裁剪出來(lái)。另外要注意要給圖片設(shè)置最大高度，否則圖片高度太高會(huì)減少頁(yè)面信息承載量，降低閱讀效率，相應(yīng)的也要限制最大寬度，否則會(huì)使圖片規(guī)則不統(tǒng)一，從而頁(yè)面適配效果不協(xié)調(diào)。
同樣的，這個(gè)規(guī)則也適用于視頻，由于全面屏手機(jī)占比越來(lái)越高，這些手機(jī)拍攝的視頻大多是19:9、20:9的寬高比例，相比視頻常用的16:9的比例更加細(xì)長(zhǎng)，所以橫屏視頻可以統(tǒng)一裁剪為16:9比例，而豎屏視頻可以裁剪為9:16比例。
動(dòng)態(tài)流圖片適配的核心是制定一個(gè)適配的規(guī)范來(lái)保證閱讀的舒適度和效率。而這個(gè)規(guī)范并不是恒定的，可以根據(jù)自身平臺(tái)需要來(lái)制定，以上僅作為一個(gè)示例供參考哦。
隨著沉浸式設(shè)計(jì)的趨勢(shì)，很多頁(yè)面會(huì)采用無(wú)標(biāo)題欄的設(shè)計(jì)。例如下圖的個(gè)人中心頁(yè)面，頂部利用背景圖來(lái)渲染品牌氛圍。但是這類無(wú)標(biāo)題欄頁(yè)面的上滑交互普遍有個(gè)缺陷，就是如果未經(jīng)處理上滑后內(nèi)容會(huì)與頂部電池條者是置頂?shù)陌粹o位置重疊。這種類似“穿幫”的情況給用戶的體驗(yàn)就是設(shè)計(jì)處理不夠嚴(yán)謹(jǐn)。然而這種交互細(xì)節(jié)也是可以優(yōu)化改善的。
優(yōu)化的原理也很簡(jiǎn)單，就是在上滑過程中添加一個(gè)標(biāo)題欄來(lái)分割頁(yè)面內(nèi)容，從而讓內(nèi)容和頂部元素不重疊。標(biāo)題欄可以隨上滑高度改變不透明度，以達(dá)到柔和的過渡從而實(shí)現(xiàn)絲滑的交互體驗(yàn)。
類似的處理方案在各大平臺(tái)也有較為廣泛的應(yīng)用。
在用戶體驗(yàn)發(fā)展的趨勢(shì)中，無(wú)論是交互的反饋或者是圖片、信息等都趨于由靜態(tài)向動(dòng)態(tài)發(fā)展。常規(guī)的靜態(tài)圖片承載的信息相對(duì)有限，所以在有限的載體內(nèi)讓內(nèi)容動(dòng)起來(lái)展示更大的信息量不失為一個(gè)很好的選擇。
在舊版本的iOS12系統(tǒng)中有一個(gè)視圖選擇的功能，用戶在這個(gè)頁(yè)面可以選擇標(biāo)準(zhǔn)視圖和放大視圖，并且有三張圖可以滑動(dòng)展示不同場(chǎng)景下兩個(gè)選項(xiàng)的差異，但是這個(gè)方案需要來(lái)回切換標(biāo)簽和滑動(dòng)圖片來(lái)對(duì)比差異，效率很低。而在之后改版的iOS13系統(tǒng)中，這三張靜態(tài)圖被替換成了兩張動(dòng)圖，輪流切換三個(gè)場(chǎng)景的頁(yè)面，用戶不需要再滑動(dòng)圖片就能更加直觀的對(duì)比兩個(gè)選項(xiàng)的差異。這個(gè)小改動(dòng)不僅可以讓圖片展示更多的信息，還能減少用戶的操作成本提升操作上的體驗(yàn)，讓閱讀效率更高。
類似的延展應(yīng)用場(chǎng)景也有很多，例如新功能引導(dǎo)動(dòng)畫、動(dòng)態(tài)banner等等。其實(shí)原理都是一樣的，在常規(guī)靜態(tài)圖的基礎(chǔ)上優(yōu)化為動(dòng)態(tài)圖，不僅能增加信息的承載量，提高閱讀效率，也能讓頁(yè)面更有活力。
為了滿足運(yùn)營(yíng)的需要，我們有時(shí)會(huì)在多同級(jí)個(gè)圖標(biāo)或者按鈕中突出其中的一個(gè)。例如下圖的分享彈窗，想要在多個(gè)分享途徑中突出微信的圖標(biāo)，但同時(shí)又要保證圖標(biāo)風(fēng)格的一致性，這時(shí)就可以利用微動(dòng)效來(lái)達(dá)到強(qiáng)調(diào)的效果。
而微動(dòng)效的落地形勢(shì)也有很多種，下面拋磚引玉介紹幾種簡(jiǎn)單高效的方案。
可以看到添加了微動(dòng)效后不僅可以達(dá)到強(qiáng)調(diào)某一個(gè)對(duì)象的目的，同時(shí)也能保證每個(gè)圖標(biāo)風(fēng)格的統(tǒng)一，微動(dòng)效也讓頁(yè)面更活潑有靈性，不失為一舉多得的方案。
微動(dòng)效的形勢(shì)當(dāng)然不局限于上面幾種，大家也可以發(fā)散思維，創(chuàng)造更多有創(chuàng)意的方案。
文章來(lái)源：站酷 作者：騰訊動(dòng)漫TCD
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com