做設(shè)計(jì)是很難的。不僅要創(chuàng)建解決問題的設(shè)計(jì)，而且理想情況下，它們還應(yīng)該使人們開心并感到愉悅。設(shè)計(jì)是一種技能，它是一種手工藝品，而且這種手工藝品做起來并非很容易。

設(shè)計(jì)UI界面可能具有挑戰(zhàn)性，因?yàn)槲覀冏鳛樵O(shè)計(jì)師承擔(dān)著許多責(zé)任。我們滿足用戶,實(shí)現(xiàn)他們的操作目的；我們希望引導(dǎo)他們及時完成操作；我們希望減少用戶學(xué)習(xí)和認(rèn)知的成本；我們希望提高知名度，我們希望他們體會到操作的樂趣。

無論他們的互動是認(rèn)真的，感興趣的，強(qiáng)制性的還是無聊，最終我們都希望他們至少對擺在他們面前的界面有愉快的體驗(yàn)。那么我們?nèi)绾螌?shí)現(xiàn)這一目標(biāo)呢？

用戶界面提示

網(wǎng)上有很多指南，特別是對于設(shè)計(jì)師而言。Medium是一個平臺，充滿了杰出的人才，他們都展示了他們的工作以及如何做自己的工作。我當(dāng)然不是專家，我是一位相信始終存在增長空間的設(shè)計(jì)師。但是，根據(jù)我多年的經(jīng)驗(yàn)，我發(fā)現(xiàn)了一些技巧，這些技巧在我每次進(jìn)行新項(xiàng)目時都會不斷地與之相關(guān)。當(dāng)我能夠創(chuàng)建成功的設(shè)計(jì)界面時，這些技巧將有很大的幫助。

一、創(chuàng)建排版層次結(jié)構(gòu)

層次結(jié)構(gòu)：根據(jù)人員或事物的重要性對其進(jìn)行排列的系統(tǒng)

印刷術(shù)應(yīng)始終遵循基本的層次結(jié)構(gòu)定義。印刷業(yè)是（甚至不是）出版視覺印刷體系的第一種媒介。想象一張報紙。它包含一個主要標(biāo)題-最大的印刷元素，副標(biāo)題-通常是文章的標(biāo)題和正文-文章本身。

定義明確，結(jié)構(gòu)良好的類型層次結(jié)構(gòu)可營造秩序感，并幫助用戶以自然的閱讀模式閱讀。由于將重要元素與次要元素區(qū)別開來，因此提高了它們的速度和數(shù)據(jù)定位能力。

如何創(chuàng)建排版層次結(jié)構(gòu)

首先，我建議減少印刷樣式的數(shù)量。我發(fā)現(xiàn)3種標(biāo)題樣式足以滿足2種人體樣式，總共只能創(chuàng)建5種樣式。我還建議僅使用兩個粗細(xì)的字體。常規(guī)和粗體，或輕和中，具體取決于每個字母形式的字符粗細(xì)。從本質(zhì)上講，重量上的差異應(yīng)該足以使重要元素與其他元素區(qū)分開。

看起來如何？

這里僅存在三種字體，但非常容易被吸引到標(biāo)題上，但是，這并不能阻止眼睛自然地閱讀隨后的故事。此字體使用較薄和中等重量，這是因?yàn)樗哂休^重的加粗樣式，在我看來，與其他可用重量相比，對比度太強(qiáng)。僅使用兩個權(quán)重就可以使主體突出句子的關(guān)鍵部分。

與印刷術(shù)有關(guān)的另一個技巧是使印刷術(shù)樣式降至最低。豐富的風(fēng)格和家庭風(fēng)格會給人一種草率和支離破碎的感覺。避免混合使用斜體和粗體。我也更喜歡只使用一個字體家族，但是，如果所有標(biāo)題都使用一個家族，而正文使用另一個字體，則采用兩個字體家族可能是有效的。在這種實(shí)踐中，將sans字體與sans-serif字體一起使用通常會產(chǎn)生最佳效果。

二、保持一致

一致性消除了混亂并減少了學(xué)習(xí)。

混亂是一種不舒服的情緒。我們的大腦喜歡劃分?；靵y需要認(rèn)知努力來計(jì)算當(dāng)前的不確定性。具有相同交互作用的元素的多種設(shè)計(jì)樣式；例如，多種主要按鈕樣式或多種輸入樣式有可能引起用戶混亂和不確定性。

采用一致的設(shè)計(jì)模式有助于消除混淆，并減少用戶期望的認(rèn)知工作量。

一致的設(shè)計(jì)模式還減少了用戶存在的選項(xiàng)數(shù)量，因此減少了單次使用交互行為的數(shù)量。刪除選項(xiàng)可以增加剩余選項(xiàng)的熟悉度和期望值。

如何保持一致

在創(chuàng)建界面設(shè)計(jì)時，重用是一個很好的動詞。一旦對表示主按鈕等元素的樣式感到滿意，請將其創(chuàng)建為可視組件，以便您可以一次又一次地重復(fù)使用它。如果您需要相同元素的相似實(shí)例，但需要進(jìn)行較小的更改，例如較小版本的主按鈕，請使用原始的主按鈕組件并減少內(nèi)部填充以創(chuàng)建新的但幾乎相同的版本。避免更改其他視覺元素，例如邊框半徑或粗細(xì)，甚至避免更改字體粗細(xì)，因?yàn)檫@樣的細(xì)微調(diào)整會給用戶帶來潛在的困惑。

如果使用Sketch，F(xiàn)igma或Adobe XD，則這些工具中的每一個都會促進(jìn)創(chuàng)建旨在重用的設(shè)計(jì)組件的想法，因此我完全支持利用這些功能。

一致性是什么樣的？

上面說明了如何將主要和次要按鈕設(shè)計(jì)為不同而又一致。一個界面上存在許多元素，因此減少各種不同樣式和相關(guān)元素的解釋非常重要。保持視覺簡潔。保持樣式一致。

三、創(chuàng)建自然的灰色

創(chuàng)建調(diào)色板時，我總是選擇兩個主調(diào)色板來構(gòu)建我的界面。第一個是單色調(diào)色板，它從同一色調(diào)提供不同的狀態(tài)和陰影。本質(zhì)上是灰色到黑色的調(diào)色板。第二個是單色調(diào)色板的復(fù)制，僅當(dāng)我增加顏色組合的藍(lán)色和綠色值時。在單色調(diào)色板中使用均勻混合的紅色，綠色和藍(lán)色值沒有什么問題，但是在我眼中，一旦更改了藍(lán)色或綠色值，它就會消除一些“剛性”。

這種方法還有助于增加對比度的元素所占的表面積較小。對于可能充當(dāng)<Hr />元素的單個像素邊框或其他設(shè)計(jì)修飾（例如無效或禁用的標(biāo)簽），創(chuàng)建現(xiàn)有灰度的第二種版本并增加顏色值會使顏色稍微加深，而無需創(chuàng)建新灰色。

如何創(chuàng)建更自然的灰色調(diào)色板

此過程沒有對，錯或科學(xué)的方法，只需您自己判斷即可。

我首先復(fù)制灰色單色調(diào)色板，然后通常嘗試保持“紅色”值不變。但是，對于較深的陰影，“紅色”值的確會略有減少，因?yàn)樵谙蛳乱苿诱{(diào)色板時，需要減少的白色量。

然后，我將“綠色”和“藍(lán)色”值增加到對灰色的自然外觀感到滿意的程度。我嘗試避免將每個值增加5點(diǎn)以上，因?yàn)檫@有可能創(chuàng)建一個全新的陰影，而不是其灰色前身的自然版本。

藍(lán)灰色調(diào)色板是什么樣的？

下面顯示了我用于創(chuàng)建用戶界面設(shè)計(jì)的兩個調(diào)色板。這些顏色還有其他較暗的混合，但是出于本文的目的，我將圖像裁剪為僅顯示5。

如您所見，此方法將創(chuàng)建更自然的灰色調(diào)色板。當(dāng)我們在自然環(huán)境或建筑環(huán)境中環(huán)顧四周時，灰色永遠(yuǎn)不會100％是紅色，綠色和藍(lán)色。陽光，反射，陰影和明亮的藍(lán)天，都扭曲了我們對顏色的判斷，尤其是灰色。建筑物可能只使用了一種色調(diào)的灰色油漆；但是，我們的解釋并不總是能反映出這一點(diǎn)。

四、不要依賴不透明度

在為諸如導(dǎo)航欄或標(biāo)題的元素創(chuàng)建設(shè)計(jì)時，減少前景版式和背景之間的對比度的一種常用方法是將字體涂成白色，然后降低其不透明度。問題是造成不一致。原因是不透明度是兩個元素之間的顏色混合。前景和背景。如果這些元素之一是一致的，例如我們的白色nav排版元素，但是背景顏色不一致，即具有顏色變化的漸變，則每個前景nav元素放置在不同背景上方時，它們看起來會彼此不同。顏色。

或者，如果前景色與背景元素來自相同的色相/顏色，但未應(yīng)用任何不透明度，則背景漸變將不會對前景色的外觀產(chǎn)生影響，因?yàn)椴粫l(fā)生顏色混合。

相同的色相/顏色如何應(yīng)用？

首先，使前景類型與背景元素具有相同的顏色。我打開調(diào)色板，并停留在順化的同一區(qū)域；但是，我降低了前景色的飽和度。

從上面可以看到，我選擇了位于同一顏色區(qū)域內(nèi)的前景色（右顏色選擇器），但是飽和度（藍(lán)色值）降低了。這將兩個對象對齊在一起，從而產(chǎn)生更加和諧的色彩平衡。

實(shí)際上這是什么樣的？

左圖使用白色且不透明。正確的圖像使用相同的顏色，但飽和度較低。

該圖清楚地顯示了左側(cè)示例中的“我的賬戶”標(biāo)簽看起來比右側(cè)示例中的飽和度更低。結(jié)果，該字體看起來灰暗且無光澤，這也降低了字體的對比度和可讀性。

五、不要害怕空白

來自拉丁語的vacuor恐怖片是對空白空間的恐懼。在藝術(shù)和數(shù)字設(shè)計(jì)中，填充空白空間的誘惑要比看到大面積的白色（負(fù)）空間閑置時感到不適的感覺容易得多。不幸的是，管理人員和客戶經(jīng)常將空白視為浪費(fèi)的空間，這使得引入和使用空白的工作變得更加艱巨，因?yàn)檫€需要一些教育方面的知識。

正確使用時，空白會在對象之間建立關(guān)系，定義順序和優(yōu)先級，建議移動，并可以幫助強(qiáng)調(diào)或不強(qiáng)調(diào)特定內(nèi)容，例如橫幅，促銷，英雄部分等。

如何處理空白

首先，將空白視為正空間。不要害怕。一旦您對在設(shè)計(jì)中引入空白的想法感到滿意，一個好的實(shí)踐就是從超出您需要的空白開始。大膽。太過分了。在內(nèi)容或UI組件之間創(chuàng)建空間時，請從所需的更多空間開始，然后逐步向內(nèi)逐步減少空間像素的數(shù)量。您很快就會找到理想的空白區(qū)域。

如果以相反的方式開始，即首先將元素緊密地放置在一起，然后慢慢增加它們之間的空白，那么您引入的空間可能比上述以相反的方式開始時要小。

空白是什么樣子？

您可以從上面的示例中看到，盡管右側(cè)的每張城市卡的尺寸都與左側(cè)的相同，但可以感覺到右側(cè)的尺寸更長。我增加了每張卡中的空白量，在城市名稱和城市形象之間，每顆星星之間以及通過將城市價格重新定位在右側(cè)來增加了額外的空白。這些調(diào)整會在城市名稱周圍創(chuàng)建更多空白區(qū)域，從而提高可見度，突出性和重要性。

我希望您發(fā)現(xiàn)這些技巧有用。正如我在本文開頭提到的那樣，這是5個技巧，我總是在新項(xiàng)目開始時就采用這些技巧。這些提示將有望幫助您創(chuàng)建有效，平衡和成功的用戶界面。