如何設(shè)計細(xì)節(jié)，讓自己更具吸引力？今天，這篇文章將告訴你關(guān)于UI界面的細(xì)節(jié)。我也希望通過今天 的文章，我們可以檢查工作集中的接口問題，找到一些可以快速實現(xiàn)的優(yōu)化方向。初級和高級設(shè)計師的區(qū)別有時候不在于整

如何設(shè)計細(xì)節(jié)，讓自己更具吸引力？

今天，這篇文章將告訴你關(guān)于UI界面的細(xì)節(jié)。我也希望通過今天 的文章，我們可以檢查工作集中的接口問題，找到一些可以快速實現(xiàn)的優(yōu)化方向。

初級和高級設(shè)計師的區(qū)別有時候不在于整體布局，而在于文章中提到的小細(xì)節(jié)。在騰訊，一個界面中的細(xì)節(jié)往往會細(xì)化到像素級別，一個大1px或者一個小px可能會產(chǎn)生幾個草稿。調(diào)音后確實會有不一樣的感覺，一定要注意。如果你想學(xué)習(xí)或者提高UI設(shè)計，可以來3a接受教育。

這篇文章對新手特別有用，但我還是建議所有設(shè)計師都要牢記這些設(shè)計基礎(chǔ)，不管經(jīng)驗如何。本文更傾向于一些基本的設(shè)計原則，但這些原則在實踐中往往被遺忘。希望以下原則能在你的設(shè)計中起到高級調(diào)優(yōu)的作用。

排版設(shè)計首先要聲明一個項目中不能使用兩種以上的字體及其多種樣式。這句話很重要。希望大家無論如何都遵循這個原則。讓 讓我們談一些更具體的細(xì)節(jié)。

1.文本間距

唐 當(dāng)你使用全部由大寫字母組成的單詞時，不要忘記設(shè)置字母間距。這可以防止字符之間的粘連，并使文本更具可讀性。

2.文本厚度

使用精細(xì)和非常精細(xì)的字體時要特別注意。中細(xì)體的漢字都可以，但要看具體字體有多細(xì)。如果你的產(chǎn)品最終會被用戶在屏幕上看到，那么最好不要使用薄的機(jī)身和極薄的字體，因為它們非常難以閱讀，甚至?xí)谝恍┢聊簧显斐砂胂袼氐哪：?/p>

3.標(biāo)題和正文字體大小

讓 讓我們來談?wù)劸W(wǎng)頁布局。有六個級別的頭銜(h1-h6)。首先，你要保證你的項目不超過四個標(biāo)題層次，并控制好它們的邏輯和一致性。網(wǎng)站或登陸頁面的最大標(biāo)題(可能出現(xiàn)在主頁面的第一個區(qū)塊)可以是任意的:目前的趨勢是鼓勵表情排版。但是，請確保標(biāo)題的其余部分不要太大，因為太大的文本和太小的文本一樣難以閱讀。

現(xiàn)在讓我們 讓我們來談?wù)勥@篇課文。瀏覽器的默認(rèn)設(shè)置(基于Chrome瀏覽器)將以16px的大小顯示每個文本。這個尺寸讀起來很舒服，但我傾向于使用不低于17px的主文本和14px的附加文本。保持12px為最小尺寸，而較小的尺寸由于視力問題或顯示不佳而變得幾乎不可讀。記住，為了避免近似的大小，不要 不要在同一款中使用16px和17px，這會給產(chǎn)品的外觀帶來混亂和視覺上的不協(xié)調(diào)，并可能讓人誤以為是個錯誤。

向高處走

很少可能直接使用默認(rèn)行高。通常在這種情況下，它必須略大于默認(rèn)值，以提高可讀性。對于大型文本塊尤其如此:博客、文章、網(wǎng)站或移動應(yīng)用程序的信息塊。同樣的方法也適用于標(biāo)題:確保字母不 不要上下觸摸對方。

5.內(nèi)容水平

粗體應(yīng)該用來突出文本的重要部分，包括標(biāo)題、鏈接和按鈕，有時是文本中被強(qiáng)調(diào)的部分。但是如果所有的文字內(nèi)容都是粗體的，那么看哪里，哪些部分更重要就變得不清楚了。內(nèi)容需要有一定水平。

6.文本對比

在設(shè)計中要特別注意文字的顏色。它應(yīng)該有足夠的對比度，以便文本可以在任何類型的顯示器上閱讀。這對于經(jīng)常使用淺灰色的輸入字段中的占位符尤其重要。

間距和邊距

負(fù)空格( "空氣和空氣元素之間)對于一個好的設(shè)計是必不可少的。消隱有助于理清元素之間的關(guān)系，提高節(jié)奏感和平衡感。

1.移除多余的盒子和線路。

分離多個模塊最簡單的方法是使用box或1px線。但這不是最好的方法?？催^一些設(shè)計作品。盒子里有盒子，每個盒子都有1px邊框。在這種情況下，你需要停下來想一想:這真的合適嗎，有必要嗎？今日 s的界面經(jīng)常是卡滿了:電商平臺的商品卡，動物護(hù)理應(yīng)用的卡，外賣app的披薩店的卡。

有時使用1px邊框是合理的，但也有其他方法來區(qū)分這些元素，如陰影或空格。最重要的是，卡片之間的外邊距應(yīng)大于卡片中填充元素的內(nèi)邊距。通過刪除任何元素上不必要的框架，可以為內(nèi)容節(jié)省空間。畢竟，內(nèi)容是任何產(chǎn)品最重要的部分，所以不要 不要無緣無故地移走為它保留的空間。

2.元素層次結(jié)構(gòu)

邊距有助于直觀地確定一個元素是否屬于另一個元素。讓 讓我們考慮一下新聞網(wǎng)站上一篇文章的布局。假設(shè)它由一張圖片、一個標(biāo)題、3-4行預(yù)覽文本和發(fā)布日期組成。標(biāo)題應(yīng)與內(nèi)容分組，日期的邊距應(yīng)略大于標(biāo)題與正文之間的邊距。最后，圖片要和題文單位的日期一樣，甚至更遠(yuǎn)。唐 你不明白嗎？讓 讓我們看看下面的圖片。

3.少即是多

總有一些客戶或經(jīng)理要求所有信息都必須塞進(jìn)一個塊或一個接口中。所以標(biāo)題，，還有整個菜單，優(yōu)惠信息都在堡壘里。還有，唐 別忘了一個大標(biāo)志。我 我不太擅長談判，而且我可以 我想不出如何讓他們輕易改變主意。

但至少你可以說，用戶一次收到的信息越少，他就越容易采取行動(比如打)。逐步的信息接收可以確保更容易和更愉快的用戶體驗。唐 t讓用戶在識別你的界面布局時遇到困難，一堆元素堆在一起很難產(chǎn)生美觀和愉悅。體驗。

4.邊緣不均勻

如果你正在制作海報、橫幅或我們最喜歡的卡片，請注意頁邊空白。如果按照經(jīng)典的從左上角到右下角布局內(nèi)容，如果頂部的頁邊距比左側(cè)的頁邊距略大，看起來會更舒服美觀。

顏色和圖片匹配

圖片、圖標(biāo)和背景決定了產(chǎn)品的基調(diào)。圖片應(yīng)該準(zhǔn)確地顯示公司，應(yīng)用程序或網(wǎng)站提供什么。

1.一些標(biāo)志的想法

我不 不要經(jīng)常制作商標(biāo)。UI界面需要注意哪些細(xì)節(jié)？在我的職業(yè)生涯中，我制作了大約20個logos。我的心是，好的logo很難做。但是，作為設(shè)計師，只要遵循基本的規(guī)則和原則，就一定能做出像樣的logo。例如，仔細(xì)選擇顏色。

有一次，我看到一家名為 "貴賓捕捉和使用紫色標(biāo)志。紫色和 "VIP "can I don'我真的不會讓人聯(lián)想到釣魚。一般來說，任何行業(yè)都可以用任何顏色，除非有明顯的脫節(jié)，比如上面提到的例子。如果你認(rèn)為很難把圖片(符號)放入標(biāo)志，那么不要 不要這樣做。盡量做成純字體logo。少即是多。

項目

物體的投影永遠(yuǎn)不應(yīng)該是黑色的。投影的顏色總是需要和環(huán)境的顏色結(jié)合在一起的(就想象有一道太陽光從界面射進(jìn)來，會反射周圍的環(huán)境顏色，所以會有周圍物體的顏色)。一個物體通常有幾個投影:一個是小而亮的，在它的正下方(如果是站著或躺著)，第二個是模糊透明的投影。避免項目中骯臟和不自然的投影。

3.圖標(biāo)和圖片

凡是能矢量化的都要矢量化。所有的圖標(biāo)、箭頭和logo都要以SVG格式(iOS開發(fā)的PDF格式)交給開發(fā)者。PNG圖標(biāo)邊緣模糊，看起來很糟糕，尤其是在視網(wǎng)膜顯示器上。此外，使用矢量圖占用的內(nèi)存更少。

4.關(guān)于圖標(biāo)

如果你正在為一個網(wǎng)站或應(yīng)用程序開發(fā)一組圖標(biāo)，請確保所有圖標(biāo)都屬于a "家庭 "。這意味著相同的描邊寬度和相同的邊框半徑。檢查以確保每個圖標(biāo)適合相同大小的正方形，并且具有相同的視覺重量。如果某些圖標(biāo)有圓形，請確保圓形具有相同的直徑。圖標(biāo)應(yīng)該有一致的風(fēng)格。

其他的

避免奇怪的布局

讓 讓我們回到我們在空間和邊距部分學(xué)到的新聞預(yù)覽的例子。如果我們將元素(圖片、標(biāo)題、文字和日期)按照非常規(guī)的順序排列，可能會讓人感到困惑。盡量堅持通用的界面布局。一般不 不一定意味著無聊，你可以在項目的其他部分展示你的創(chuàng)造力。沒有足夠的理由，避免在屏幕/頁面/卡片上實驗性地定位元素。否則，用戶可能會感到困惑，并離開你的網(wǎng)站或應(yīng)用程序。記住，設(shè)計師和藝術(shù)家是不同的職業(yè)。在設(shè)計中，我們?yōu)槿藗儎?chuàng)造產(chǎn)品，這意味著你個人的創(chuàng)作沖動只能應(yīng)用在不會干擾用戶體驗的地方。

2.界面尺寸

在你開始設(shè)計一個移動應(yīng)用程序之前，一定要問開發(fā)者關(guān)于屏幕尺寸的問題。通常iOS的屏幕尺寸是320px，Android的屏幕尺寸是360px。盡管對移動應(yīng)用程序或多或少有明確的期望，但網(wǎng)站設(shè)計可能具有挑戰(zhàn)性，因為它將在各種設(shè)備上顯示。下面這種情況在我自己的前端開發(fā)經(jīng)驗中很常見:提供的布局是為一個巨大的顯示器做的。塊與塊之間有400-600像素的邊距，巨大的字體和奇怪的網(wǎng)格。

幸運(yùn)的是，我也是一名設(shè)計師，我可以通過自己調(diào)整邊距和大小來解決這個問題，這樣它在任何屏幕上都可以很好看。然而，前端開發(fā)人員通常不會 t沒有設(shè)計背景，會完全按照提供給他們的設(shè)計方法來實現(xiàn)。因此，在正常的筆記本電腦屏幕上，元素會過大。需要注意的是，一般筆記本電腦屏幕的垂直寬度限制在700px左右，所以盡量在這個顯示范圍內(nèi)放一個模塊。

3.內(nèi)容填充

重復(fù)的樣本文字在設(shè)計上會顯得廉價和不專業(yè)，應(yīng)該避免。只會讓人覺得你懶得做點(diǎn)像樣的事。另外，現(xiàn)在不用自己創(chuàng)建，有一堆Sketch和Figma插件可以自動填充內(nèi)容。盡量不要重復(fù)內(nèi)容，哪怕只是為了演示。放不同長度的圖片、標(biāo)題、預(yù)覽文字，效果會更好看。

sketch如何讓圖片下半部分漸變？

單擊選擇工具，選擇下部，然后選擇漸變填充。