用戶界面（UI）設計可以制造或破壞任何數字産品。當用戶與出色的UI交互時，他們通常甚至不會注意到。他們感受到了視覺吸引力，并完全相信它。相反，糟糕的UI設計可能會阻止用戶直觀地或根本上與産品交互，并導緻缺乏信任。

作為一名設計師，你必須掌握某些原則，才能創建吸引人且用戶友好的UI設計。這篇文章概述了将UI設計的質量和成功提升到一個新水平所需學習的基礎知識。

為什麼UI設計很重要？

研究估計，我們80-85%的感知、學習和認知是通過視覺介導的。因此，美學和視覺設計在我們的生活中扮演如此重要的角色也就不足為奇了。想象一下你要去看牙醫。你走進牙科診所，到處都是文件，雜亂無章的器械，相互碰撞的家具，你的牙醫穿着運動服。這種情況可能會影響你的信任，尤其是當你第一次去看牙醫的時候。我們都知道這種視覺場景與牙醫的能力無關，但我們在潛意識就把它抛棄了。相反，如果當你進入診所時，你看到一切都完美無缺、井井有條、井然有序，并且得到了妥善的照顧，會怎麼樣？這種環境會讓你感到非常舒适！

同樣的現象也适用于數字世界。當您第一次與軟件産品交互時，如果它在視覺上具有吸引力和直觀性，您更有可能給它一個機會。事實上，研究表明，當用戶發現界面在視覺上有吸引力時，他們更能容忍較小的可用性問題。這被稱為美學可用性效應。

我想告訴大家為什麼這些視覺技能很重要，為什麼它們與藝術無關。視覺技能非常重要的原因是，目前大多數人的注意力持續時間比金魚短，這項研究是在2000年左右完成的；20年後，可能比現在更低。它可能從12秒下降到8秒，因為我們不斷受到來自各個方向的刺激。

“美學可用性效應”，這意味着，如果某個東西看起來很好，人們自然會認為它更有用——即使它不是那沒有用。所以，如果你在做任何視覺化的事情，其他人會看它，其他人也會看到它，他們會對它進行評估，并給予足夠的關注——或者不夠關注——這取決于視覺效果有多好。

UI設計有能力在與用戶的互動中産生情感反應，無論是好的還是壞的。通過利用界面中不同元素的力量，如按鈕、排版、顔色和布局，您可以設計滿足用戶需求并産生積極情緒的産品。

1.設計有效按鈕

按鈕是UI設計中最重要的元素之一。按鈕是動作發生的地方。想象你為一個電子商務網站設計一個漂亮的界面。用戶喜歡它的界面，他們浏覽應用程序尋找新衣服，并在上面花費數小時。然而，當他們想購買一個特定的商品時，發起“購買”的動作——結果是按鈕并不清楚，在花了一些時間嘗試購買之後，他們離開網站時感到沮喪。最終，這家網上服裝店會倒閉，因為銷售額下降——不是因為商品，而是因為一個設計糟糕的紐扣。

就UI元素而言，按鈕非常重要，按鈕是玩家付費的來源。因為最終，如果有在線業務或其他東西，總會有一個按鈕寫着“把錢給我”或……“支付”或“結賬”，這樣才能讓整個互聯網業務保持運轉。所以，按鈕真的非常非常重要。

關于按鈕有幾件事:它有内部邊距。同時它還有外部邊緣。它可以具有标簽的顔色、權重和字體、不同的角樣式、顔色或漸變填充。一般來說，我們不會用照片填充按鈕。它可以有一個影子。

如果一個按鈕的标簽不在按鈕的中心垂直位置。這是一個非常大的問題，因為它會使我們的大腦處理它的時間增加了幾分之一毫秒，如果你在你的布局中有很多這樣的元素，從長遠來看，這隻會使它變得更加困難。所以，如果你使用一個簡單的規則“添加參考線”，比如穿過按鈕的每一面的中間，然後将文本精确地定位在中間，這會讓你的按鈕效果跟實用性得到提升，請不要忽略這一微小的舉措，因為這是大多數人都不會做的事情，僅僅這一件事就能讓你的設計更上一層樓。當然，一旦你注意到這樣的事情，你就可以用這種方式看待一切。如果卡片上的标題有點偏離中心，就把它放在中間。如果是不同的邊距，就修改邊距。

另一個常見的問題是按鈕上沒有足夠的空間，或者隻是整體對齊不好。這也是一個非常常見的問題，因為我們可能試圖将較長的文本放在一個較小的按鈕上。這會使按鈕的邊緣和文本的緣粘連到一起，實際上在我們的頭腦中他們也融合在一起了，這使得處理它更加困難和更長時間，讀起來比較困難。有一個很簡單的解決方法：如果文字到底部的距離是X，那麼文字到按鈕邊緣的距離就用2X。但還有一種更簡單的方法：你可以使用相同字體的“W”字母——這是因為它是26個字母中最寬的字母一——你可以在在上面、下面使用一個“W”，在兩邊用兩個“W”(“WW”)，這樣會讓按鈕處理起來更快，更容易閱讀。

一旦我們開始使用對話按鈕，還有一件事是大多數初級設計師經常做的。很明顯，按鈕所顯示的内容非常重要。所以，不要讓他們說“下一步”或“繼續”，而是要清楚地說明他們點擊按鈕後會發生什麼。所以，一個叫做“下一步”的文本标簽是沒有幫助的，因為他們不知道下一步是什麼;他們不知道會發生什麼。

另一件事，矩形形狀或帶下劃線的鍊接作為按鈕處理要快得多，當然，如果它們有陰影，它們甚至會更快一點。一個奇怪形狀，如果你想把它作為一個按鈕，大腦處理總是會比較慢一些，在某些情況下，人們甚至可能根本不會點擊它。所以，保持你的按鈕是矩形或者圓角矩形——是明智的的辦法。

2. 限制字體的選擇

字體設計是視覺設計的基石之一。有大量不同的字體可供選擇，因此，為您的設計選擇一種字體可能會非常困難。然而，對于UI設計，您可以将選擇限制在您知道的最适合大多數顯示的字體上。

如果你使用設計工具，你會注意到有數百或幾十種不同的字體。但是它們中的大多數是無用的，而且它們中的大多數是你永遠都不應該使用的字體。所以，如果你剛剛開始，如果你對設計還不是很熟悉，你應該完全避免裝飾字體，手寫字體，以及在大多數情況下襯線字體。我知道這聽起來真的很瘋狂和誇張，但大多數襯線字體并不是真的那麼容易使用，你需要能夠設置間距，行距，字距和一切以适當的方式為它們的數字界面工作良好。所以，在最初的設計階段，你最好堅持使用無襯線。所以，不要用那些裝飾性的字體，不要用那些花哨的字體，因為它們越簡單，看起來越好。

關于字體的另一件事是，人們有這樣的想法，如果一個字體是薄的或輕的，就會像瑞士風格的最小設計。超最小設計實際上是蘋果在iOS 7中推動的，但他們很快又改回到了原來的字體，因為那些字體在大多數屏幕上顯示不好。它們太薄了，基本上無法閱讀。所以，不要在你的設計中使用輕薄的字體，在大多數情況下，常規體和粗體是不錯的選擇。

另外，如果你剛開始，不要創建大量不同的字體大小。你需要有一個标題，一個更小的标題，其他的都是一種字體。如果我們在一個小窗口上切換到四種不同的字體大小，它會讓我們的大腦認為，“哦，我的天，我需要處理所有這些!”所以，隻要讓大腦更容易，把它切換到一個更簡單的選項，因為它總是會更好地工作。

當然，與你們分享的很多規則也是可以打破的，需要具體情況具體分析，我們介紹的是通用的大部分情況。

3.簡化你的配色

顔色在視覺設計中是一個強大的工具，因為它能産生情感反應。色彩心理學是一個深入研究的現象，很難掌握。因此，如果你開始你的職業生涯作為一個UI設計師，你必須仔細選擇你的調色闆。此外，顔色——尤其是顔色對比——是确保設計易讀性的關鍵元素。初級設計師的一個常見錯誤是在用戶界面中添加過多的顔色。

如果你是一名設計師，就像字體一樣，你不需要太多的顔色。如果你在想，“好吧，我在那個小選擇器中有6000萬種顔色，所以讓我們嘗試使用所有的顔色!”事實并非如此。你真正需要的是一個背景色，一個前景色和一個強調色。還有一些規則你以後可以自己查閱，比如60-30-10規則，非常有用。但總的來說，你需要記住的是你需要一個“背景色”，它可以是白色。然後你需要設定文本顔色，即某種黑色或深灰色，以及用于重要動作的強調色。有一件事你可以在這裡做些調整那就是用深一點的顔色代替純黑色，加一點強調色。你隻需要“三種顔色”才能完成大多數設計。

當你覺得更舒服的時候，你可以開始添加顔色。但是當你開始的時候，顔色越少越好，因為這樣就很難把它搞砸。最糟糕的兩種顔色組合是将紅色與非常飽和的藍色或非常飽和的綠色混合。如果你仔細觀察它取決于你使用的屏幕類型，你會發現在它們混合在一起的地方，這條線變得有點模糊。如果你看的時間長一點，在某些情況下，它會傷害你的眼睛。某些屏幕上，因為這些顔色的對比在一起非常非常糟糕。所以，如果你想要制作一款聖誕應用，其實還有更好的方法，但通常要避免那些顔色組合，并經常測試你的顔色是否與之沖突。所以，你可以把一個放在另一個上面，看看模糊的線是否出現在它們上面。

這是測試它的一種方法——使用眼睛，隻看它。如果看起來不錯，那就是不錯。

4. 設計一緻的布局

在某種程度上，設計就是移動形狀，并以一種視覺上有意義的方式排列它們。大多數元素可以被認為是簡單的幾何形狀，在大多數情況下不是矩形就是圓形。你在空間中如何放置這些元素将是優秀和糟糕設計的主要區别之一。為了幫助您構建一個良好和一緻的布局，您必須掌握網格的使用。網格對于優秀的設計是必不可少的，但許多設計師低估了它們的價值。

如果設計元素之間有空格，相似元素之間的空間一緻性也很重要。所以，如果你有兩列文字和一張照片，最好讓它們始終保持相同的間距。

框架式是指在物體上添加形狀。字體是一個矩形，一張照片就像一個圓，不同的照片或标題是另一個矩形。然後試着把這些形狀對齊（不是字體，不是照片，不是小圖标，隻是矩形和圓），因為這會讓你了解你真正面對的是什麼。

正如你所看到的，我們又回到了設計就是移動形狀的問題上。一旦你知道所有東西都是矩形，或者圓，或是其他的簡單形狀。你必須在空間中很好地定位它們彼此之間有适當的間距，适當的距離，适當的層次，然後就會很容易切換到實際的圖像。這對于“層次結構”和“布局”來說非常重要。如果他們是排列是有序的，人們就會諒解你很多。

總結

UI設計對于構建良好的用戶體驗至關重要。任何好的用戶體驗都需要一個能産生信任和積極情緒的視覺界面。作為一名UI設計師，您可以通過掌握排版、顔色和網格的使用，并遵循設計按鈕的最佳實踐，來構建誘人友好的用戶界面。

了解UI設計的基本原理可以幫助你提升設計的質量，有助于改善整體用戶體驗，并構建成功的數字産品。

來源網絡

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!