當(dāng)今工作的大多數(shù)UI設(shè)計(jì)原則都圍繞著簡單的導(dǎo)航和基本的聯(lián)系表單；另一方面，設(shè)計(jì)界正變得越來越富有新標(biāo)準(zhǔn)和技術(shù)，這意味著設(shè)計(jì)師將創(chuàng)造更多定制和動(dòng)態(tài)體驗(yàn)。

寫在前面

什么是UI設(shè)計(jì)？

每當(dāng)你告訴非設(shè)計(jì)人員你的工作是什么，就會(huì)出現(xiàn)這個(gè)問題。

當(dāng)今工作的大多數(shù)UI設(shè)計(jì)原則都圍繞著簡單的導(dǎo)航和基本的聯(lián)系表單。另一方面，設(shè)計(jì)界正變得越來越富有新標(biāo)準(zhǔn)和技術(shù)，這意味著設(shè)計(jì)師將創(chuàng)造更多定制和動(dòng)態(tài)體驗(yàn)。

什么是用戶界面設(shè)計(jì)？

該術(shù)語包含為機(jī)器和軟件創(chuàng)建的所有界面設(shè)計(jì)，例如網(wǎng)站和移動(dòng)應(yīng)用程序的外觀，以及它們的方向和易用性。一些界面設(shè)計(jì)師還將UI設(shè)計(jì)定義為創(chuàng)建圖形界面的藝術(shù)，不包括用戶語音和自然界面。

由于軟件是無形的，因此GUI設(shè)計(jì)在用戶與應(yīng)用程序或網(wǎng)站的交互方式中起著至關(guān)重要的作用，這意味著唯一良好的UI設(shè)計(jì)是實(shí)現(xiàn)簡化和無縫體驗(yàn)的設(shè)計(jì)。

因此，兩個(gè)主要的設(shè)計(jì)基礎(chǔ)是效率和可用性，因此界面將使用戶能夠完成他們的任務(wù)，甚至沒有注意到設(shè)計(jì)如何工作。

基本上，最好的用戶界面設(shè)計(jì)示例是那些“隱形”的，并且它們?nèi)绱擞行У孛枥L現(xiàn)實(shí)，以至于用戶不會(huì)認(rèn)為是他生成了屏幕上發(fā)生的變化。

然而，有了這么多優(yōu)秀的UI設(shè)計(jì)，依靠效率來創(chuàng)建功能性產(chǎn)品已經(jīng)不夠了，界面也應(yīng)該是美觀和愉快的，就像聊天應(yīng)用和游戲一樣。

大多數(shù)時(shí)候，UI界面設(shè)計(jì)出現(xiàn)在服務(wù)上，用戶需要進(jìn)行交互才能完成任務(wù)，并且應(yīng)該包括執(zhí)行所需操作所需的所有工具和按鈕。GUI設(shè)計(jì)決定了用戶對(duì)軟件和硬件的方法，并通過使這些操作盡可能無摩擦來提高可用性。

UI設(shè)計(jì)者需要滿足用戶的功能和美學(xué)期望。他可以使用紙和筆，使用任何專用的可視化程序進(jìn)行草圖繪制，甚至可以使用任何材料直接構(gòu)建他的設(shè)計(jì)。他還可以創(chuàng)建模擬界面，以在發(fā)布之前測試其最終產(chǎn)品的效果。

重要的是區(qū)分用戶體驗(yàn)設(shè)計(jì)和用戶界面設(shè)計(jì) – 它們既復(fù)雜又多面，但具有不同的作用。創(chuàng)建用戶界面設(shè)計(jì)是為了將產(chǎn)品的布局，內(nèi)容甚至開發(fā)轉(zhuǎn)換為用戶愉快和有效的體驗(yàn)。因此，它代表了嚴(yán)格的數(shù)字化任務(wù)。

UI設(shè)計(jì)師的主要職責(zé)如下：外觀，感覺，市場和客戶分析，研究，圖形開發(fā)，品牌推廣，導(dǎo)航指南，故事情節(jié)，響應(yīng)性，交互性，原型設(shè)計(jì)，動(dòng)畫。

二、適用于所有設(shè)備和不同的屏幕尺寸

1. Web開發(fā)實(shí)施和調(diào)整

創(chuàng)建良好的用戶界面意味著任何交互式設(shè)計(jì)的世界，它通常定義最終客戶如何看待和欣賞品牌。設(shè)計(jì)師顯然不是唯一負(fù)責(zé)品牌推廣的人，但將品牌轉(zhuǎn)化為產(chǎn)品將是他的責(zé)任。

要?jiǎng)?chuàng)建一個(gè)可靠的用戶體驗(yàn)體驗(yàn)不需要編碼，但設(shè)計(jì)人員也應(yīng)該了解當(dāng)前趨勢和技術(shù)。

通過這種方式，用戶體驗(yàn)設(shè)計(jì)對(duì)每個(gè)有興趣創(chuàng)建優(yōu)秀產(chǎn)品的人都很重要，而且還要了解客戶真正想要的東西。

另一方面，如果您進(jìn)入界面設(shè)計(jì)，您應(yīng)該對(duì)數(shù)字設(shè)計(jì)的基本原則更感興趣，并考慮向用戶呈現(xiàn)產(chǎn)品的方式，包括輸入反應(yīng)性和顯示質(zhì)量。

三、UI設(shè)計(jì)基礎(chǔ)

1. 知道你在為誰創(chuàng)造

你不會(huì)總是喜歡你正在設(shè)計(jì)的東西，但是你必須與這個(gè)想法和平相處。你應(yīng)始終將目標(biāo)與客戶的目標(biāo)保持一致，并全面了解他們需要什么以及他們想要什么。

從他們喜歡的界面中學(xué)習(xí)，并與趨勢和調(diào)整保持一致。是的 – 模仿競爭對(duì)手的趨勢設(shè)計(jì)無助于您實(shí)現(xiàn)這些目標(biāo)！

2. 小心模式

讓用戶有賓至如歸的感覺！您的界面不會(huì)是客戶第一次遇到此類設(shè)計(jì)，特別是現(xiàn)在人們使用各種網(wǎng)絡(luò)和移動(dòng)應(yīng)用程序時(shí)。

因此，您不需要重新發(fā)明輪子，而是簡化這些過程，并解決問題而不是創(chuàng)建問題。出于此目的，嘗試堅(jiān)持常見和熟悉的模式，您的用戶將不會(huì)有任何問題了解您的工作。

3. 一致性很重要

保持工作一致。當(dāng)用戶了解如何在您的設(shè)計(jì)中執(zhí)行某些操作時(shí)，他們希望再次執(zhí)行相同的操作。一致性對(duì)布局和語言都很重要，并且僅適用于在所有實(shí)例上必須保持相同的少數(shù)主要元素。這樣，您和您的客戶都會(huì)更有效率。

4. 以可視層次結(jié)構(gòu)排列元素

不要浪費(fèi)財(cái)產(chǎn)來向客戶解釋什么是重要的，而是使用界面設(shè)計(jì)來告知訂單。元素的位置，大小和顏色可以幫助您創(chuàng)建可視層次結(jié)構(gòu)，并為用戶提供明確的跟蹤路徑。請注意：成功顯示的層次結(jié)構(gòu)也會(huì)使您的設(shè)計(jì)不那么復(fù)雜。

5. 給予反饋

接口都是關(guān)于交互的，這意味著您應(yīng)該與用戶保持聯(lián)系，讓他們知道他們正在做的是對(duì)還是錯(cuò)。使用消息和可視提示來評(píng)估操作，通知更改并建議解決方案，您的用戶將很容易理解您的工作。

6. 期待錯(cuò)誤

對(duì)于某些人來說，即使真正為他們服務(wù)，技術(shù)也是一種負(fù)擔(dān)。這告訴我們的是UI設(shè)計(jì)應(yīng)該容忍錯(cuò)誤和誤解，并且總是想出一種方法讓用戶撤消他們的行為（你是否因?yàn)槌錾掌阱e(cuò)誤而開始填寫應(yīng)用程序？）。同時(shí)，用戶應(yīng)該確切地知道他們搞砸了哪里，這樣他們就不會(huì)再讓它發(fā)生了。

7. 為用戶轉(zhuǎn)移電源

只要用戶了解如何使用您的設(shè)計(jì)，就可以將力量轉(zhuǎn)移到他們的手中。讓他們獨(dú)立工作，將他們的行動(dòng)切割成消耗單位，這樣他們就不會(huì)在途中分心。完成任務(wù)的抽象方法也應(yīng)該是該過程的一部分，例如使用鍵盤快捷鍵。

8. 保持對(duì)話基調(diào)

即使在最好的界面中，文案也很常見，因?yàn)樵O(shè)計(jì)師并沒有試圖引起轟動(dòng)。相反，他們用簡潔明了的標(biāo)簽和說明走在他們的用戶的腳下。用戶喜歡這樣，即使它不是花哨的，因?yàn)樗杏X不像是在聽別人而是自己。

9. 簡單一點(diǎn)

許多人無法回答“什么是UI設(shè)計(jì)”的問題，并且有充分的理由。他們中的大多數(shù)甚至都沒有看到界面，因?yàn)樗且粋€(gè)向前移動(dòng)的靜音引擎，但仍然可以脫穎而出。在對(duì)設(shè)計(jì)進(jìn)行任何更改之前，請估計(jì)用戶是否真的需要它以及他們是否能夠使用它。這是對(duì)你來說唯一重要的事情。

10. 保持下去

開發(fā)接口不是一次性任務(wù)，而是需要頻繁迭代的持續(xù)過程。錯(cuò)誤會(huì)發(fā)生，但不要讓他們勸阻你！學(xué)習(xí)和練習(xí)，并嘗試創(chuàng)建用戶甚至不會(huì)注意到的無縫界面。

11. 最佳用戶界面設(shè)計(jì)實(shí)踐

什么是UI設(shè)計(jì)？

在了解更多信息時(shí)，您的第一課應(yīng)該是了解您的用戶，并清楚地估算他們能做什么或不能做什么。您還需要發(fā)現(xiàn)他們的興趣，偏好，傾向和技能。

以下是最重要的用戶界面設(shè)計(jì)實(shí)踐：

• 少即是多；界面越不可見，它就越成功。因此，擺脫無用的元素，并使用清晰的標(biāo)簽和消息。
• 保持一致性并僅使用熟悉的元素和模式；這樣做可以提高您網(wǎng)站的舒適度和信心，并幫助用戶在不到一時(shí)的時(shí)間內(nèi)完成工作。一致性是指布局，語言和許多其他設(shè)計(jì)元素，最好的方法是教會(huì)用戶如何優(yōu)化設(shè)計(jì)的功能。
• 通過排版提高清晰度；做出智能型決策，明智地使用字體，大小和文本排列。這樣，您的文本將更易于閱讀和理解。

四、您必須遵守的用戶界面設(shè)計(jì)法

1. 清晰的法則

導(dǎo)致混淆和誤解的所有因素都會(huì)留在陰影中，這個(gè)規(guī)則也不例外！

您是Gmail用戶嗎？

如果是這樣，您會(huì)記得Google更改頂部的導(dǎo)航面板，您可以在其中輕松訪問云端硬盤、日歷、表格或其他服務(wù)。

然而，該公司提出了這樣的想法：他們可以通過將所有這些元素隱藏在抽象圖標(biāo)后來簡化導(dǎo)航，因此許多Gmail用戶無法找到它的方式。后果是什么？問Google的支持團(tuán)隊(duì)！

忽略您不理解的內(nèi)容絕對(duì)是人類，因此請確保您的界面不會(huì)導(dǎo)致此問題。

2. 背景法則

如果您邀請用戶控制設(shè)計(jì)中的某個(gè)對(duì)象，請將界面控件盡可能靠近它。用戶希望看到接口控件靠近他想要控制的對(duì)象。

這種嘗試的成功在LinkedIn上顯而易見，您可以通過單擊旁邊的小鉛筆輕松更改所需的所有數(shù)據(jù)（以及您的名字！）。另一方面，F(xiàn)acebook允許你這樣做，它有一個(gè)非常漫長而復(fù)雜的過程。

UI設(shè)計(jì)中的上下文要求讓人聯(lián)想到現(xiàn)實(shí)生活中的背景 – 準(zhǔn)備爆米花，將其放入微波爐并打開設(shè)備。

如果您被要求跑到電箱并切換按鈕使其工作，您是否仍然會(huì)被鼓勵(lì)這樣做？可能不是，這也是大多數(shù)用戶改變他們的Facebook名稱的原因。

用戶希望操作流暢簡單，讓他們成功！

3. 指示行為的法則

大多數(shù)用戶因?yàn)楸灰蠖诰W(wǎng)站上執(zhí)行操作。原因很明顯，因?yàn)槊總€(gè)人都感到害怕采取了一步他沒有任何線索。

為了了解我們所說的內(nèi)容，想想LinkedIn – 因?yàn)樗麄円肓薊ndorsements功能，他們并不依賴于用戶會(huì)知道它是什么的假設(shè)。

相反，他們在個(gè)人資料頁面上提出了大型號(hào)召性用語橫幅，并將該功能轉(zhuǎn)變?yōu)樽罴迅轮弧?/p>

規(guī)則很簡單：如果他們需要做某事，請他們?nèi)プ觥?/p>

4. 及時(shí)反饋的法律

為了讓用戶感到自信，請給予他持續(xù)而明確的反饋。您可以按照Gmail的示例 – 您在此處執(zhí)行的每項(xiàng)操作都會(huì)收到通知，并且人們會(huì)覺得他們完全可以控制服務(wù)。

5. 簡化法則

用于完成復(fù)雜任務(wù)的Web設(shè)計(jì)應(yīng)分為幾個(gè)可管理的操作。沒有人喜歡復(fù)雜和冗長的形式，因?yàn)樗鼈兪菈旱剐缘模⑶铱偸潜仨氉屑?xì)檢查插入的信息是否正確。

然而，如果你采用這種形式并將其分成更小的步驟（理想情況下有進(jìn)度條），人們就不會(huì)覺得它很無聊。

這就是所謂的簡化和寬松法則，它告訴我們?nèi)藗儗幵附?jīng)歷5個(gè)簡單步驟而不是單個(gè)大步驟。你恐嚇?biāo)麄冊缴伲麄兙驮接心芰ν瓿伤麄冏非蟮娜蝿?wù)。

寫在最后

UI設(shè)計(jì)可以通過許多不同的方式進(jìn)行解釋，因?yàn)樗梢越M合動(dòng)作的融合，幫助創(chuàng)建者在功能和形式上優(yōu)化其服務(wù)。

簡而言之，UI設(shè)計(jì)決定了用戶如何與產(chǎn)品/服務(wù)進(jìn)行交互，以及他們對(duì)產(chǎn)品/服務(wù)的感受。現(xiàn)在您可以獲得什么是UI設(shè)計(jì)問題的答案。

作者：Bogdan Sandu鏈接：https://www.designyourway.net/blog/author/bogdanel/

翻譯：Tzw_n，原作者已經(jīng)授權(quán)。

本文由 @Tzw_n 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。