設(shè)計(jì)是一種技能，它是一種手工藝品，而且這并非總是容易的手工藝品。

我已經(jīng)擔(dān)任設(shè)計(jì)師多年了，很幸運(yùn)能夠在不同領(lǐng)域進(jìn)行設(shè)計(jì)。在過(guò)去的十年中，我從事用戶界面設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)的工作。

設(shè)計(jì)用戶界面可能具有挑戰(zhàn)性，因?yàn)槲覀冏鳛樵O(shè)計(jì)師承擔(dān)著許多責(zé)任。我們要求用戶實(shí)現(xiàn)他們的目標(biāo)。我們希望引導(dǎo)他們及時(shí)完成任務(wù)。我們希望減少學(xué)習(xí)和認(rèn)知成本。我們希望提高知名度。我們希望他們體驗(yàn)快樂(lè)。無(wú)論他們的互動(dòng)是認(rèn)真，有趣，強(qiáng)制性的還是無(wú)聊的結(jié)果，最終我們都希望他們至少對(duì)擺在他們面前的輸出有愉快的體驗(yàn)。

那么我們?nèi)绾螌?shí)現(xiàn)這一目標(biāo)呢？

用戶界面提示

網(wǎng)絡(luò)上有很多指南，特別是對(duì)于設(shè)計(jì)師而言。并且充滿了杰出的人才，他們都展示了其如何做開(kāi)展的工作。根據(jù)我多年的經(jīng)驗(yàn)，我發(fā)現(xiàn)了一些技巧，這些技巧在我每次工作時(shí)都有很大的幫助。

提示1.創(chuàng)建排版層次結(jié)構(gòu)

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

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

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

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

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

看起來(lái)如何？

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

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

技巧2.保持一致

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

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

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

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

如何保持一致

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

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

一致性是什么樣的？

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

技巧3.創(chuàng)建自然的灰色

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

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

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

此過(guò)程沒(méi)有對(duì)，錯(cuò)或科學(xué)的方法，只需你自己判斷即可。

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

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

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

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

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

技巧4.不要依賴不透明度

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

或者，如果前景色與背景元素來(lái)自相同的色相/顏色，但沒(méi)有應(yīng)用任何不透明度，則背景漸變將對(duì)前景色的外觀沒(méi)有影響，因?yàn)椴粫?huì)發(fā)生顏色混合。

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

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

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

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

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

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

技巧5.不要害怕空格

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

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

如何處理空白

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

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

空白是什么樣子？

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

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