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

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

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

那么我們?nèi)绾螌崿F(xiàn)這一目標呢？

用戶界面提示

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

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

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

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

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

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

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

看起來如何？

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

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

技巧2.保持一致

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

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

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

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

如何保持一致

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

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

一致性是什么樣的？

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

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

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

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

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

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

我首先復(fù)制灰色單色調(diào)色板，然后通常嘗試保持“紅色”值不變。但是，對于較深的陰影，“紅色”值的確會略有減少，因為在向下移動調(diào)色板時，需要減少的白色量。

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

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

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

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

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

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

或者，如果前景色與背景元素來自相同的色相/顏色，但沒有應(yīng)用任何不透明度，則背景漸變將對前景色的外觀沒有影響，因為不會發(fā)生顏色混合。

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

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

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

實際上這是什么樣的？

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

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

技巧5.不要害怕空格

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

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

如何處理空白

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

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

空白是什么樣子？

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

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