當(dāng)你剛開始從事 UI 設(shè)計時，瀏覽 dribbble 或 behance 或此類網(wǎng)站可能會令人生畏。你會在這些網(wǎng)站上看到來自世界各地的各種才華橫溢的設(shè)計師的精美設(shè)計，如果你和我一樣，那么你一定想知道為什么你的設(shè)計達(dá)不到那個水平。為什么盡管你盡了最大的努力，你的設(shè)計還是不能給用戶帶來驚喜。

Photo by?Noah Silliman?on?Unsplash

現(xiàn)在，這是事實，這種質(zhì)量是大量的練習(xí)和努力的結(jié)果。

但沒有人會阻止你從他們那里學(xué)到一些簡單的技巧/策略，也可以將你的設(shè)計提升到那個水平。

你可能聽說過帕累托原則，即80%的結(jié)果來自20%的原因。我們將在我們的設(shè)計中應(yīng)用同樣的原則，并通過修改或使用簡單的技巧將它們提升到 dribbble 或 behance 級別的質(zhì)量。

我們開始吧：

僅使用單個字體集

互聯(lián)網(wǎng)上的任何網(wǎng)頁都由 90% 的類型組成。如果你刪除圖像或其他設(shè)計元素，則可能對訪問者沒有幫助。因此，如果頁面上超過 90% 的空間被類型占用，那么關(guān)注它只會符合我們的最大利益。

你可能聽說過這樣的建議，即你應(yīng)該在設(shè)計中只使用有限數(shù)量的字體。這個數(shù)字通常最多設(shè)置為 2 或 3。

這是正確的，但是我建議你甚至不需要 2 或 3，只需 1 就足夠了。

首先在你的設(shè)計中只使用一種字體集，然后逐步使用 2 或 3 種字體。在單個字體集中使用粗細(xì)/大小，你會驚訝于你的設(shè)計看起來更連貫、更干凈和更專業(yè)。

這個技巧背后的基本原理是，當(dāng)我們混合不同的字體/元素時，我們需要格外小心，使它們彼此完美匹配。這需要訓(xùn)練有素的眼睛。

決定哪些字體應(yīng)該搭配在一起需要大量的練習(xí)，當(dāng)你剛剛開始時，你不會注意到它。

將字體最小化為單個字體集也會迫使你認(rèn)真思考如何僅使用單個字體集來使你的設(shè)計美觀。

但是不用擔(dān)心，你可以僅使用一個字體集就可以做出各種漂亮的組合。掌握使用單一字體集，然后慢慢地使用 2 或 3。

你可以實現(xiàn)多種這樣的組合，而無需使用第二個字體集。在此處使用Montserrat字體集的不同字體粗細(xì)。

使用適當(dāng)?shù)呢?fù)空間或空白

頁面上的元素需要一些空間來呼吸。如果你在一個小空間里塞滿了很多設(shè)計元素，那么它們就會相互抵消，沒有一個元素會脫穎而出。那會弄得一團(tuán)糟。嘗試在設(shè)計中使用負(fù)空間或空白空間。

從頁面中刪除不必要的元素，直到只剩下需要的元素，然后為每個元素提供喘息的空間。

一點空白會產(chǎn)生很大的不同。

謹(jǐn)慎使用顏色

掌握色彩理論及其在實際設(shè)計中的應(yīng)用需要大量的努力和多年的實踐。一些有福氣的人可能有這樣的眼光，但對于我們凡人來說，我們必須多加練習(xí)。

所以一開始在你的設(shè)計中只使用最少量的顏色。混合和搭配不同的顏色，使你的設(shè)計看起來很漂亮是一門不容易的藝術(shù)。

因此，將顏色保持在最低限度。以 70–30–10 的比例使用顏色。

這里 70% 的顏色將是你的背景顏色，例如白色。

30% 的顏色將是你的輔助顏色，例如黑色。

10% 的顏色將是你用來突出顯示設(shè)計中的按鈕和其他號召性用語元素的顏色。

你也可以嘗試僅使用 2 種顏色的組合。就像字體一樣，同樣的原則也適用于顏色的使用。首先掌握使用 1 或 2 種顏色，然后慢慢增加設(shè)計中的顏色數(shù)量。

混合超過 2 種顏色可能具有挑戰(zhàn)性，需要多年的練習(xí)。

只堅持一種或兩種顏色，直到你掌握了它們。

美麗的Hero section

用戶可見的滾動前的第一部分通常稱為Hero section。現(xiàn)在，提高 UI 設(shè)計質(zhì)量的一個簡單技巧是制作漂亮的 Hero section。

你可以通過使用各種技術(shù)來做到這一點，比如標(biāo)題的大字體或手繪插圖，或者使用產(chǎn)品的 3D 模型或使用相關(guān)的庫存照片等。

這里的基本思想是讓用戶“哇~”。在整個會話中，第一印象會持續(xù)在用戶的腦海中。它基本上為整個用戶體驗定下了基調(diào)。

第一印象確實在這里成為了持久的印象。

使用網(wǎng)格

開始的時候，你不知道要把每一個元素放在頁面的哪個位置，才能讓它看起來好看。為了達(dá)到這個目的，你可以使用網(wǎng)格來快速提高你的設(shè)計質(zhì)量。

通過使用網(wǎng)格，你可以確保不同元素之間的間距相同，因此它們都可以一起創(chuàng)建一個有凝聚力的構(gòu)圖。

也有無網(wǎng)格設(shè)計，但就像在生活中一樣，你首先需要了解規(guī)則才能成功打破它們。因此，首先掌握網(wǎng)格系統(tǒng)，然后再進(jìn)行打破網(wǎng)格的設(shè)計。

小貼士：我知道我只說了 5 個技巧，但誰不喜歡額外福利呢，所以這里有一個額外的提示：

向大師學(xué)習(xí)

如果你想掌握生活的任何領(lǐng)域，第一個技巧就是從大師那里復(fù)制。我并不是建議你直接去復(fù)制粘貼其他設(shè)計師的作品。不，不要那樣做。

相反，你可以做的是選擇一個你喜歡的設(shè)計，然后嘗試逐個像素地重新創(chuàng)建它。此過程將讓你了解原始創(chuàng)作者的想法以及他們?yōu)閯?chuàng)建自己的設(shè)計而做出的設(shè)計決策。這將增強(qiáng)你的設(shè)計能力和決策能力。你將開始了解每個設(shè)計師的設(shè)計過程，從而培養(yǎng)你的設(shè)計眼光，

很快，你將開始識別范例，并且你對美麗設(shè)計的感覺將繼續(xù)發(fā)展。

又一個小貼士：是的，我能說什么我喜歡看到人們快樂:)

每天瀏覽設(shè)計靈感網(wǎng)站

這個簡單的技巧將增強(qiáng)你的設(shè)計感。當(dāng)你反復(fù)看到一個東西時，你的大腦很快就會開始連接以前不存在的點和圖案。

只需打開dribbble、behance或Awwwards或任何其他你喜歡的設(shè)計靈感網(wǎng)站，然后瀏覽精美的設(shè)計。也許嘗試結(jié)合以前的獎勵提示并重新創(chuàng)建其中一個設(shè)計。這將培養(yǎng)你對優(yōu)秀設(shè)計的眼光，很快你就會開始看到自己設(shè)計的質(zhì)量在提高。

因此，這里總結(jié)了如何通過 7 個簡單易用的技巧成為 UI 設(shè)計專家：

僅使用單個字體集