本文旨在收集用于創(chuàng)建Web和移動應(yīng)用程序設(shè)計中，UX和UI設(shè)計過程的所有理論。

設(shè)計決定了大多數(shù)軟件產(chǎn)品的成功。軟件開發(fā)為各種網(wǎng)站和應(yīng)用程序產(chǎn)品的設(shè)計提供了新的方法。離開時尚元素和可用性，就談不上好的App。App的有效性是通過功能性和吸引力的最佳組合來衡量的。視覺傳達(dá)必須簡單，直觀且引人入勝。

UI / UX設(shè)計的作用

設(shè)計應(yīng)用程序和網(wǎng)站帶來了特殊挑戰(zhàn)：

• 促進(jìn)復(fù)雜的任務(wù)和工作流程；
• 使用戶能夠理解和管理復(fù)雜數(shù)據(jù)；
• 適應(yīng)各種用戶角色、需求和流程。

但這非常值得！因為有效的應(yīng)用程序設(shè)計和實現(xiàn)可能會對從娛樂到醫(yī)療保健等各種環(huán)境中的生產(chǎn)力、效率、準(zhǔn)確性和用戶滿意度產(chǎn)生深遠(yuǎn)的積極影響。

你之前可能聽說過UI或UX設(shè)計，但實際上從未有機(jī)會了解它的用途、定位和原因。事實上，UI和UX不是一回事。在進(jìn)一步討論之前，請先閱讀UI和UX之間的原理差異[1]。用戶體驗（UX）是用戶對產(chǎn)品的整體體驗，而用戶界面（UI）是用戶將實際與產(chǎn)品交互并看到的東西。

出色設(shè)計的價值

應(yīng)用程序設(shè)計的成功與否取決于用戶體驗（UX）和用戶界面（UI），而不是一個好的想法或一個好的功能。如果應(yīng)用程序看起來很糟糕而且很難用，那么想法有多好并不重要。

如果你正在開發(fā)網(wǎng)站或移動應(yīng)用程序，則需要做好的一件重要的事情就是應(yīng)用程序的外觀和感覺。例如，如果你的領(lǐng)域是電子商務(wù)，那么設(shè)計不當(dāng)?shù)膽?yīng)用程序?qū)⑹鼓闶ピS多潛在的客戶。

例如，當(dāng)用戶打開應(yīng)用程序時，首先看到的是什么？用戶首先看到的是登錄頁面[2]。什么是登陸頁面？這是一個起點，用戶可以從中了解應(yīng)用程序或站點是否滿足其需求。它必須是具有吸引力的，并包含一些CTA（行動呼吁）按鈕，以使用戶知道下一步該怎么做。

為給UI和UX設(shè)計師的工作增加價值，可以在此找到一些有趣的UI與UX比較：

• UX設(shè)計師就像建筑師。他們會照顧用戶，并幫助企業(yè)改進(jìn)可衡量的參數(shù)（比如降低網(wǎng)站跳出率、提高點擊率等）。UX設(shè)計師了解用戶行為和心理，了解界面的工效學(xué)知識，并且能夠分析業(yè)務(wù)需求以將其轉(zhuǎn)換為用戶流。
• UI設(shè)計師就像裝飾師。他們主要負(fù)責(zé)界面如何反映品牌。這份工作更多地是關(guān)于無法衡量的東西（比如界面的舒適程度、是否足夠時尚等）。UI設(shè)計師了解色彩以及色彩組合，知道如何閱讀品牌書籍并將其轉(zhuǎn)換為UI元素。

有時，UI和UX設(shè)計師是負(fù)責(zé)整個設(shè)計過程的同一個人。但是，讓我們分別討論這兩種設(shè)計。

什么是UX設(shè)計？

UX（用戶體驗）設(shè)計是一個創(chuàng)建產(chǎn)品、系統(tǒng)或服務(wù)的過程，這些產(chǎn)品、系統(tǒng)或服務(wù)為用戶提供有意義和相關(guān)的體驗。這還涉及獲取和整合產(chǎn)品的整個過程的設(shè)計，包括品牌、設(shè)計、可用性和功能等方面。它還包括人機(jī)交互和產(chǎn)品所有權(quán)的有意義和有價值的方面。UX處理的是網(wǎng)站中內(nèi)容和地圖的體系結(jié)構(gòu)。

UI（用戶界面）設(shè)計是UX設(shè)計的一個重要方面，它是UX設(shè)計的一個子集（UI設(shè)計將在下一部分討論）。因為UX設(shè)計涵蓋了其他許多領(lǐng)域。信息架構(gòu)（IA）是UX設(shè)計中第二可行的方面。

UX設(shè)計可以幫助用戶實現(xiàn)目標(biāo)。它不僅專注于創(chuàng)建可用的產(chǎn)品，還涵蓋了用戶體驗的其他方面，例如：

• 愉悅；
• 效率；
• 情緒；
• 有趣。

到目前為止，良好的用戶體驗是在目標(biāo)用戶使用產(chǎn)品的特定情境中，滿足特定用戶需求的體驗。UX設(shè)計以用戶為中心——用戶類型定義設(shè)計類型。

這就是為什么UX設(shè)計是動態(tài)的，并且隨著使用的環(huán)境和各領(lǐng)域的系統(tǒng)的變化而不斷改進(jìn)。在這里，你可以找到一些2019年UX設(shè)計趨勢[3]。此外，我們可以說用戶體驗就是用戶產(chǎn)品的交互與體驗。

UX設(shè)計的主要任務(wù)是創(chuàng)建可以定制以滿足用戶的特定需求的產(chǎn)品，但它提供了可預(yù)測的功能。換句話說，UX設(shè)計旨在研究用戶行為并了解用戶動機(jī)，以設(shè)計更好的交互體驗。

完美的用戶體驗設(shè)計應(yīng)該是什么？這個問題的答案可以作為UX設(shè)計需求的列表，這些需求應(yīng)在不同的層次上得到滿足。這些層次構(gòu)成了用戶體驗設(shè)計金字塔[4]。

UX設(shè)計原則和完整的UX結(jié)構(gòu)

UX設(shè)計金字塔各個層次的目標(biāo)可以通過遵循主要的用戶體驗設(shè)計原則來實現(xiàn)：

1. 層次結(jié)構(gòu)

層次結(jié)構(gòu)是設(shè)計師幫助用戶輕松瀏覽產(chǎn)品的最佳工具之一，包括：

• 信息架構(gòu)（跨應(yīng)用程序或網(wǎng)站組織內(nèi)容的方式）；
• 可視化架構(gòu)（可幫助用戶在部分或頁面中更輕松地導(dǎo)航）。

2. 一致性

在大多數(shù)情況下，可以使用一套正式的設(shè)計準(zhǔn)則來設(shè)計特定設(shè)備或格式的產(chǎn)品。

3. 確認(rèn)性

需要對任何重要或不可逆的操作進(jìn)行確認(rèn)，以防止用戶可能意外地犯錯誤。

4. 用戶控制

“撤消”、“返回”、“搜索”按鈕以及鍵盤快捷鍵是使用戶可以控制網(wǎng)站或應(yīng)用程序的好方法。

5. 易用性

對產(chǎn)品來說，讓盡可能多的人容易使用是至關(guān)重要的。用戶體驗設(shè)計應(yīng)該消除人們使用產(chǎn)品時的障礙，無論這些障礙是暫時的還是永久的。

UX設(shè)計平衡了業(yè)務(wù)、人員和技術(shù)。誠然，如果沒有完善的業(yè)務(wù)支撐，產(chǎn)品就無法成功。但是，沒有客戶的滿意度，則業(yè)務(wù)就不會成功——UX設(shè)計師的工作就是使客戶滿意。

完整的UX堆棧

因此，UX設(shè)計涉及很多事情。完整的UX設(shè)計棧包括：

• 界面（主要應(yīng)用于UI設(shè)計）
• 架構(gòu)（由應(yīng)用界面和交互設(shè)計組成）
• 結(jié)構(gòu)（由信息體系結(jié)構(gòu)和用戶流組成）
• 范圍（功能規(guī)格和內(nèi)容要求）
• 策略（根據(jù)用戶研究和業(yè)務(wù)目標(biāo)定義的用戶需求和項目目標(biāo)）

但是，UI部分不是最先進(jìn)行的。用戶體驗設(shè)計始于通過用戶研究確定需要解決的問題。因為解決用戶不關(guān)心的問題沒有任何意義。

UX設(shè)計過程

簡而言之，UX設(shè)計過程步驟如下：

• 用戶研究
• 設(shè)計
• UX線框圖
• UX原型制作
• UI設(shè)計（視覺和交互）
• 用戶測試

你可以在下面找到UX設(shè)計過程的主要方法的概述。

UX設(shè)計過程可以用幾種最流行的UX設(shè)計方法來描述。

UX設(shè)計過程的主要方法

目前，有三種著名的用戶體驗設(shè)計過程方法：

1. 傳統(tǒng)設(shè)計
2. 精益設(shè)計
3. GV設(shè)計沖刺（GV代表Google Ventures）

通常大學(xué)里教授的是通過傳統(tǒng)瀑布流[5]進(jìn)行構(gòu)建的傳統(tǒng)UX設(shè)計過程。以下是傳統(tǒng)UX設(shè)計過程：

1. 研究。發(fā)現(xiàn)主要的問題。在這里你可以找到10個有效用戶研究的圖表[6]。
2. 對發(fā)現(xiàn)的問題進(jìn)行分類。
3. 創(chuàng)建人物模型和旅程圖（不要將它們與用戶流混在一起）
4. 構(gòu)思練習(xí)，為優(yōu)秀的UX設(shè)計生成解決方案，并解決已發(fā)現(xiàn)的問題。
5. 構(gòu)建原型。
6. 原型測試。
7. 將最終原型送給開發(fā)人員。
8. 產(chǎn)品發(fā)布。
9. 收集用戶反饋。
10. 返回到收到用戶反饋的第一步。

簡而言之，作為描述傳統(tǒng)UX設(shè)計過程的方案，你可以想象如下：

但在2013年出現(xiàn)了另一種UX設(shè)計過程方法，因為傳統(tǒng)UX設(shè)計過程與敏捷開發(fā)模式不兼容。新的設(shè)計過程稱為精益用戶體驗（Lean-UX），允許用戶體驗在敏捷的不確定性范圍內(nèi)運行，并根據(jù)用戶反饋快速更新設(shè)計。它使體驗設(shè)計與產(chǎn)品開發(fā)重新協(xié)調(diào)起來。

簡而言之，精益UX是一套基于“精益創(chuàng)業(yè)”敏捷方法的原則，其重點放在了現(xiàn)在。團(tuán)隊沒有將設(shè)計以“拋過墻法”來交付給技術(shù)部門，而是接受最終設(shè)計不能預(yù)先創(chuàng)建的想法，并且相信設(shè)計結(jié)果會隨著假設(shè)通過MVP（最小可行產(chǎn)品）開發(fā)[7]進(jìn)行測試而出現(xiàn)。精益用戶體驗設(shè)計過程可以描述為“構(gòu)建、測量和學(xué)習(xí)”循環(huán)，或“思考、制造、檢查”循環(huán)。

然而，如果沒有很好地定義產(chǎn)品計劃，精益用戶體驗設(shè)計過程似乎是低效的，從而導(dǎo)致了大量的浪費和返工。

Google Ventures提出了另一個很棒的設(shè)計過程。這就是設(shè)計沖刺。它讓團(tuán)隊快速定義和測試低保真度原型。Google Ventures的設(shè)計沖刺可以看作是三種方法的結(jié)合：設(shè)計思維、敏捷和精益。設(shè)計沖刺的關(guān)鍵部分是創(chuàng)建原型，這是收集數(shù)據(jù)和測試想法的最佳方法之一。該模式可以通過以下方式呈現(xiàn)：

所有的UX設(shè)計過程方法都基于相同的迭代，但回答的問題不同。在我的文章《靈活UX與精益UX》[8]中可以詳細(xì)了解所有方法的不同之處以及它們的共同點！

UX設(shè)計部分

綜上所述，我將詳細(xì)介紹UX設(shè)計的各個部分：

交互設(shè)計

通過深思熟慮的行為創(chuàng)建有吸引力的界面。用戶和技術(shù)之間簡單明了的溝通。交互設(shè)計負(fù)責(zé)實現(xiàn)用戶與單個用戶界面或多個界面（或系統(tǒng)）之間交互的功能。

線框和原型

在最終設(shè)計之前，將網(wǎng)站的基本組件演示作為任務(wù)或交互式原型的模型。（順便說一下，線框不是草圖[9]，也不是模型）。

信息架構(gòu)

它平等地混合了產(chǎn)品的藝術(shù)性和科學(xué)性，以有效且可持續(xù)的方式組織、構(gòu)建和標(biāo)記內(nèi)容。

用戶研究

通過觀察技術(shù)、任務(wù)分析和其他反饋方法了解用戶行為、需求和動機(jī)。用戶研究定義了你的受眾，并提供了有關(guān)如何最好地滿足其需求的基本見解。為了提供定性的用戶研究，我們應(yīng)該全面考慮：——誰將使用該應(yīng)用程序/網(wǎng)站？——他們想完成什么？——什么會妨礙他們？——主要客戶的業(yè)務(wù)需求是什么？我發(fā)表了一篇關(guān)于為什么用戶研究對UX如此重要[10]的文章。

情境

用戶與項目交互的描述。這些故事對于設(shè)計界面和可用性測試都非常重要。

但這并不是UX設(shè)計所包含的全部內(nèi)容。找到用戶體驗設(shè)計的關(guān)鍵部分[11]及其本質(zhì)！

UX設(shè)計用于決定用戶是翻頁還是滾動內(nèi)容。為了對細(xì)節(jié)負(fù)責(zé)，并預(yù)測其影響，UX設(shè)計師應(yīng)該對人類行為有很多了解。UX設(shè)計師通常來自各種背景，如視覺設(shè)計、編程、心理學(xué)和交互設(shè)計。稍后，我還將詳細(xì)介紹UX設(shè)計師的主要任務(wù)。

什么是UI設(shè)計？

讓我們從定義什么是界面開始。界面是兩個系統(tǒng)交互的機(jī)制。從這一點上講，用戶界面是為方便系統(tǒng)和用戶之間的直接交互而創(chuàng)建的界面。

在顯示設(shè)備上，有兩種常見的用戶界面：

• 命令行界面（CLI），僅包含文本，主要由程序員使用；
• 圖形用戶界面（GUI），這是我將用到的界面。它包括圖像、窗口、圖標(biāo)、菜單等。

在本文中，我將特別關(guān)注負(fù)責(zé)視覺感知的用戶界面類型-GUI。

UI設(shè)計是為計算機(jī)和軟件（如計算機(jī)、家用電器、移動設(shè)備和其他電子設(shè)備）設(shè)計用戶界面的一門學(xué)科，其重點是響應(yīng)性和美觀性，最大程度地提高可用性，以營造良好的用戶體驗。作為UX的一部分，UI設(shè)計更注重色彩和版式。簡而言之，UI設(shè)計通常是以下幾方面的結(jié)合：

• 視覺設(shè)計（外觀和感覺）；
• 交互設(shè)計（如何工作）。

舉個按鈕設(shè)計的例子，UX設(shè)計的關(guān)注點是將按鈕放在哪里以便用戶輕松找到它，而UI設(shè)計考慮的是如何使這個按鈕看起來更美觀，以使用戶想要按下它。

為什么我們需要用戶界面？該產(chǎn)品必須具有視覺吸引力和美觀性。UI設(shè)計精心設(shè)計了一種通用的視覺語言和層次結(jié)構(gòu)，提高用戶與產(chǎn)品接觸的方式。

UI將交互設(shè)計、視覺設(shè)計和信息架構(gòu)的概念結(jié)合在一起。

用戶界面元素包括按鈕、文本字段、復(fù)選框、滑塊、圖標(biāo)、標(biāo)簽、消息框、分頁等。為了更好地理解UI設(shè)計是什么，應(yīng)該對UI設(shè)計的主要元素進(jìn)行簡要了解。

UI設(shè)計部分

如果想要開發(fā)出吸引人的用戶界面，則需要使用以下領(lǐng)域的技術(shù)：

視覺設(shè)計

使普通產(chǎn)品具有美感，并遵循“以用戶為中心”的原則（如面向網(wǎng)絡(luò)的設(shè)計或概念藝術(shù)）吸引觀眾。視覺設(shè)計的主要目標(biāo)是借助插圖、攝影、版式、空間、布局和色彩來塑造和改善用戶體驗?！熬€條、形狀、負(fù)空間、紋理”——這都是視覺設(shè)計。了解更多信息可參考視覺設(shè)計的交互設(shè)計基礎(chǔ)[12]。

色彩

為產(chǎn)品選擇正確的顏色非常重要，因為這與情緒和意義有心理關(guān)聯(lián)。遵循品牌色彩，并根據(jù)你要創(chuàng)建的設(shè)計和要分享的信息明智地使用它們，也很重要。

平面設(shè)計

平面設(shè)計負(fù)責(zé)將圖像、版式或動態(tài)圖形組合在一起，以打動您的客戶。平面設(shè)計追求像素完美。這是為了確保文本具有完美的字距和符合品牌準(zhǔn)則的色彩。平面設(shè)計是一門專門的學(xué)科，要想產(chǎn)生出色的視覺效果，必須具備一定的工藝水平和一套專門技能（如排版和色彩理論）。它通常與視覺設(shè)計混在一起。

模型

建立用于演示、設(shè)計評估、推廣和其他目的的設(shè)計的相應(yīng)比例模型。實體模型旨在通過視覺細(xì)節(jié)（如色彩和版式）顯示設(shè)計的最終外觀。線框圖、模型和原型通常是混合使用，它們只是表示設(shè)計流程的不同階段。線框圖是設(shè)計的低保真度呈現(xiàn)方式，它描述了結(jié)構(gòu)和布局。與線框圖不同，實體模型看起來更像成品或原型，但它不是交互式的且不可單擊。原型用于提供一系列用于在應(yīng)用程序中構(gòu)造屏幕的選項。除了布局之外，它們還有助于組織內(nèi)容并使用戶界面易于理解。

版式

排版是所有傳播藝術(shù)形式的驅(qū)動力。這是一門關(guān)于字體樣式、外觀和結(jié)構(gòu)的藝術(shù)和科學(xué)，旨在為讀者提供美觀易讀的頁面。排版有助于在基于打印或屏幕的項目中為信息增加印象效果。好的排版應(yīng)該：

• 各種尺寸下工作良好；
• 具有易于識別的字體；
• 具有可識別的層次結(jié)構(gòu)，以便更好地感知。

此外，現(xiàn)在的UI設(shè)計很大程度上依賴于動作設(shè)計，它可以提供即時的用戶反饋，這對于任何用戶界面都至關(guān)重要。動畫、視覺效果和屏幕過渡對首次用戶與該應(yīng)用的互動方式具有巨大影響。詳細(xì)可了解運動設(shè)計的力量[13]。

UI軟件原型類型

如前所述，原型不同于線框圖和模型。我之前會把原型設(shè)計添加到UX設(shè)計中，但就通常用于用戶測試產(chǎn)品的原型而言，原型必須是高保真的、交互式的，并且盡可能適合最終的用戶界面。這就是為什么在下一部分將討論用戶界面原型。

原型盡可能真實地模擬用戶和界面之間的交互。

UI軟件原型有5種常見類型：

1. 紙上原型（草繪）。草繪是在原型制作過程中，記錄主要的創(chuàng)意（通常在紙上），它僅限于創(chuàng)意的生成和與設(shè)計團(tuán)隊的溝通。
2. 低保真原型。低保真原型是概念的粗略表示，有助于在設(shè)計過程早期驗證概念。簡而言之，這是對創(chuàng)意的粗略表達(dá)。低保真原型通常被設(shè)計團(tuán)隊用來強(qiáng)調(diào)交互和思想。
3. 快速原型?？焖僭褪且环N基于用戶研究的中保真技術(shù)?？焖僭驮O(shè)計可以幫助設(shè)計師思考要達(dá)到最終目標(biāo)需要做什么。經(jīng)過一系列的快速迭代和反饋后，原型中的一些問題會得到解決。快速原型的主要特點是使用各種應(yīng)用程序、不同的數(shù)字原型制作和用戶研究工具。
4. 高保真原型（交互式原型）。與低保真原型不同，高保真原型需要更多的時間、專業(yè)技能和資源。高保真原型是一種基于計算機(jī)的交互設(shè)計，其在設(shè)計細(xì)節(jié)和功能方面與最終版本最為相似。它通常將可用性和真實性合而為一。
5. HTML原型（有些人不將這種類型列入其中）。HTML原型是使用HTML開發(fā)的原型。它可以在瀏覽器中看到。它沒有樣式選擇，外觀也很簡單，但是HTML原型可以比其他原型更快地進(jìn)入編碼階段，因為它已經(jīng)部分地用代碼編寫了。

每種類型的原型都有最適合該原型的數(shù)字工具列表。從Keynote和Google slides到InVision和Adobe XD……在這里，您可以探索用于不同類型UI軟件原型的UI原型工具[14]的最終列表。

UI設(shè)計原則

在創(chuàng)建UI原型時，優(yōu)秀的設(shè)計師應(yīng)遵循以下6個用戶界面設(shè)計原則（根據(jù)Larry LeRoy Constantine的觀點）：

1. 結(jié)構(gòu)。應(yīng)關(guān)注整體用戶界面架構(gòu)，并認(rèn)為模型應(yīng)該清晰、一致、可識別，并且將相關(guān)的事物放在一起，將不相關(guān)的事物分離，并使類似的事物彼此相似。
2. 簡單。設(shè)計應(yīng)該使簡單、常見的任務(wù)變得容易，并用用戶自己的語言清晰、簡單地交流。這些快捷方式必須有意義地與較長的程序相關(guān)。
3. 可見度。沒有多余的信息和奇怪的選擇。設(shè)計應(yīng)使給定任務(wù)的所有必要的選項和材料可見，而不是分散注意力。
4. 反饋。應(yīng)以清晰、簡明和熟悉的方式告知用戶并了解所有相關(guān)操作、狀態(tài)或條件的變化、錯誤或異常。
5. 容錯性。設(shè)計應(yīng)具有靈活性，允許通過撤消和重做來減少錯誤和誤用。
6. 重新使用。設(shè)計應(yīng)重用內(nèi)部和外部組件和行為，保持目的的一致性，而不僅僅是任意的一致性。

UI技術(shù)

如何滿足上述所有主要的UI設(shè)計原則。為此，設(shè)計人員使用了一些簡單而有益的UI技術(shù)。

首先，UI技術(shù)（交互技術(shù)或輸入技術(shù)）是硬件和軟件元素的組合，為用戶提供了完成一項任務(wù)的方法。例如，單擊按鈕、按鍵、執(zhí)行鼠標(biāo)手勢或發(fā)出語音命令。

在UI設(shè)計中，有數(shù)十種不同的有效技術(shù)可以幫助用戶完成任務(wù)。以下列舉最著名的UI技術(shù)：

• 交互樣式，如表單填充或菜單選擇等。
• 交互設(shè)計模式，表示在特定上下文中描述常見可用性或可訪問性問題的解決方案的方法[15]。換句話說，這是記錄常見設(shè)計問題解決方案的正式方法。

組織結(jié)構(gòu)和方案

1. 層次結(jié)構(gòu)是指大腦根據(jù)物體的大小、顏色、對比度、排列方式等物理差異來區(qū)分物體的能力。
2. 順序結(jié)構(gòu)，用戶按照特定的路徑逐個完成任務(wù)。
3. 矩陣結(jié)構(gòu)，用戶可以根據(jù)字母順序、時間順序、主題（特定主題或流派的分組）順序或用戶組（一種受眾類型）自行選擇導(dǎo)航方式。

內(nèi)容組織模型

1. 單頁模型。
2. 平面模型，其中所有頁面都相等，并且放在同一導(dǎo)航級別。
3. 索引模型，允許用戶通過每個頁面上的頁面列表訪問頁面。
4. 嚴(yán)格的層次結(jié)構(gòu)模型，只允許用戶從主頁訪問子頁面。
5. 共存層次模型，為用戶提供了訪問內(nèi)容的各種方式，但可以引導(dǎo)他們通過特定的路徑，以便他們采取預(yù)期的操作。
6. 雛菊模型，旨在使用戶在每次完成任務(wù)時都可以訪問主頁。

強(qiáng)調(diào)輸出的可視化技術(shù)（即信息可視化），旨在以方便、清晰、直觀的方式組織和構(gòu)造數(shù)值和非數(shù)值數(shù)據(jù)。

研究與創(chuàng)新

一些例子：

• 交互層；
• 自定義插圖；
• 分屏；
• 粗體排版；
• 無按鈕用戶界面；
• 動畫；
• 鮮艷大膽的色彩；
• 照片內(nèi)容。

還有更多示例，但是大多數(shù)示例都可以歸入上述組中。

在了解了所有重要的UI技術(shù)之后，我必須告訴你用戶最討厭的UI技術(shù)[16]。請考慮一下它們，以免您的用戶流失。

UI設(shè)計過程

我可以命名用戶界面設(shè)計中的幾個階段和過程。以下是一些最可行的方法：

• 功能需求收集。這一步包括組裝完成項目目標(biāo)所需的功能和用戶的潛在需求的列表。通常，此階段在與客戶端的發(fā)現(xiàn)會話[17]之后立即開始。
• 用戶和任務(wù)分析。研究潛在用戶如何執(zhí)行設(shè)計必須支持的任務(wù)。這個階段與作為用戶體驗設(shè)計過程的一部分的用戶研究相關(guān)。
• 信息架構(gòu)（IA）。該過程涵蓋了系統(tǒng)過程和信息流的開發(fā)。在此階段中，選擇UI交互樣式、設(shè)計模式和可視化技術(shù)。前面描述的許多UI設(shè)計技術(shù)都是在信息結(jié)構(gòu)階段形成的。
• 原型制作。這個階段包括開發(fā)原型、線框圖、模型、紙制原型或簡單的交互式屏幕。
• 可用性檢查?？捎眯詸z查可用于評估系統(tǒng)的原型或規(guī)范，通常無法在用戶身上進(jìn)行測試。可用性檢查方法包括認(rèn)知演練、啟發(fā)式評估和多元演練。
• 可用性測試。UI設(shè)計測試，可以從查看者的角度了解設(shè)計的可接受程度。通常，在可用性測試期間，要求用戶完成任務(wù)后，查看他們在哪里遇到問題和遇到困惑。
• GUI（圖形用戶界面）設(shè)計。這是最終圖形用戶界面設(shè)計的實際外觀。在此階段，可以通過使用排版、攝影和插圖來進(jìn)行視覺傳達(dá)和解決問題。
• 軟件維護(hù)。軟件完成后會進(jìn)行偶爾維護(hù)，以修復(fù)軟件錯誤、更改功能或升級系統(tǒng)。

在遵循UI設(shè)計過程的同時，不要忘記創(chuàng)建優(yōu)秀用戶界面設(shè)計的基本規(guī)則[18]！

在前面的部分，試圖收集、構(gòu)建、解釋并向你展示UI和UX設(shè)計的所有主要術(shù)語和細(xì)微差別。但是你可能想了解更多信息，在這里你可以查看關(guān)于UI和UX設(shè)計的最佳書籍清單[19]。

Web和移動應(yīng)用程序設(shè)計

UX和UI設(shè)計主要用于為移動應(yīng)用程序創(chuàng)建出色的網(wǎng)站和設(shè)計。下面簡要介紹一下web和移動應(yīng)用設(shè)計。

Web設(shè)計

簡單地說，網(wǎng)頁設(shè)計是創(chuàng)建網(wǎng)站的過程。它涉及信息架構(gòu)、網(wǎng)站結(jié)構(gòu)、用戶界面、導(dǎo)航人類工效學(xué)、網(wǎng)站布局、色彩、對比度、字體和攝影或插圖以及圖標(biāo)設(shè)計。

Web設(shè)計師是將UX和UI技術(shù)應(yīng)用于網(wǎng)頁設(shè)計的專家。最初，Web設(shè)計師是UI設(shè)計師（UI設(shè)計師的子集），專注于設(shè)計和構(gòu)建web用戶界面。他們中的一些人可能知道一些前端編程，如HTML/CSS、Javascript，以顯示設(shè)計/原型在屏幕上的工作方式。此外，他們應(yīng)該更多地了解web、網(wǎng)格等方面的技術(shù)限制。

網(wǎng)頁設(shè)計師應(yīng)該：了解如何創(chuàng)建web布局和可交付成果，以及：圖標(biāo)；信息圖形；標(biāo)志；介紹等。此外，還應(yīng)該熟悉行業(yè)標(biāo)準(zhǔn)軟件，具備繪制線框圖技術(shù)，注意前端開發(fā)的細(xì)微差別，知道如何編碼（這是加分項）。

網(wǎng)頁UX設(shè)計通過提高用戶與網(wǎng)站交互的可用性、可訪問性和效率來提高用戶滿意度。

移動應(yīng)用程序設(shè)計

針對移動設(shè)備（包括臺式機(jī)和筆記本電腦）的應(yīng)用程序設(shè)計帶來了特殊的挑戰(zhàn)：

• 促進(jìn)復(fù)雜的任務(wù)和工作流程；
• 使用戶能夠理解和管理復(fù)雜的數(shù)據(jù)；
• 適應(yīng)各種用戶角色、需求和流程。

應(yīng)用程序的UX／UI設(shè)計提高了用戶體驗和客戶滿意度，最終有助于增加特定應(yīng)用程序的用戶數(shù)量。

移動用戶體驗設(shè)計是指在使用移動設(shè)備和可穿戴設(shè)備期間的積極體驗設(shè)計。根據(jù)情境的不同，移動應(yīng)用程序設(shè)計對用戶體驗有獨特的要求。

閱讀8條移動用戶體驗設(shè)計的關(guān)鍵原則[20]，這些原則證明了它們的有效性。

近年來，隨著下一個移動應(yīng)用程序設(shè)計趨勢的發(fā)展，這些要求得到了滿足：

• 設(shè)計更大的屏幕；
• 簡化UI；
• 滑動和手勢互動；
• 添加更多的導(dǎo)航選項；
• 添加功能動畫；
• 講故事;
• 使用可縮放的排版；
• 嘗試試用調(diào)色板等。

要了解這些趨勢，建議你閱讀有關(guān)Web應(yīng)用程序開發(fā)的Web應(yīng)用程序和網(wǎng)站之間的主要區(qū)別[21]。

另一件要考慮的事情是我們有時聽到的移動界面設(shè)計神話[22]。老實說，其中有些理論可能已經(jīng)過時了，因為移動體驗已經(jīng)發(fā)展了很多。

在2019年，為了使您的應(yīng)用程序（Web或移動應(yīng)用程序）吸引人并取得成功，Web或移動設(shè)備設(shè)計必須足夠靈活，以容納當(dāng)今可用的新技術(shù)以及黑客技術(shù)。因為科技的創(chuàng)新，可能某些昨天才剛剛出現(xiàn)的新事物成為了我們?nèi)粘Ｉ钪斜夭豢缮俚囊徊糠?。你是否想知道何種創(chuàng)新能發(fā)展你的項目并節(jié)省項目資金[24]？

UI / UX設(shè)計師做什么？

首先從UX設(shè)計人員的基本工作開始，UX設(shè)計師考慮其工作產(chǎn)品的使用原因、內(nèi)容和方式。

• 為什么會涉及用戶使用產(chǎn)品的動機(jī)，無論是與他們希望執(zhí)行的任務(wù)相關(guān)，還是與產(chǎn)品所有權(quán)和使用相關(guān)的價值觀相關(guān)。
• 什么解決了人們可以用產(chǎn)品做的事情，它的功能。
• 如何以一種可訪問且美觀的方式與功能設(shè)計相關(guān)。

用戶體驗設(shè)計師先從“為什么”開始，然后再確定“什么”，最后是“如何”，以便創(chuàng)建用戶可以形成有意義體驗的產(chǎn)品。在Web或移動應(yīng)用程序設(shè)計中，設(shè)計師必須確保產(chǎn)品的“實體”可以通過現(xiàn)有設(shè)備提供無縫、流暢的體驗。

在“為什么”階段，UX設(shè)計師應(yīng)該回答一些基本問題，如：

• 用戶需要你生產(chǎn)的產(chǎn)品嗎？
• 用戶會為此產(chǎn)品付費嗎？
• 用戶會花時間尋找并學(xué)習(xí)使用它嗎？
• 用戶需要哪些關(guān)鍵功能？
• 用戶是否需要你構(gòu)建的所有功能？他們真正需要多少和哪些功能？

在“如何”階段的主要問題有所不同，這些問題與具體實施有關(guān)：

• 應(yīng)該如何組織內(nèi)容，以便用戶可以輕松找到它？
• 該應(yīng)用程序是否易于使用？
• 在哪一步用戶可能會感到困惑或迷路？他們可能面臨什么困難？
• 需要什么內(nèi)容，應(yīng)該如何寫才最吸引人？

UX設(shè)計師的典型任務(wù)各不相同，但通常包括用戶研究、創(chuàng)建角色、設(shè)計線框和交互原型以及測試設(shè)計。

簡而言之，UX設(shè)計師參與了廣泛的用戶研究，制定信息架構(gòu)并創(chuàng)建用戶個人資料和故事。UX設(shè)計師不一定具備視覺或平面設(shè)計技能，但是必須對心理學(xué)和系統(tǒng)設(shè)計有所了解。

UI設(shè)計師同時嘗試將復(fù)雜的結(jié)構(gòu)分解成簡單易懂的格式，以方便最終用戶。因此，UX / UI和Web設(shè)計師都致力于為用戶提供愉悅和有效的體驗。

UI/UX設(shè)計師應(yīng)該能夠理解用戶的需求。應(yīng)用程序的目標(biāo)和目的仍然是第一個決定因素。然后，在理解用戶的需求和應(yīng)用程序的目標(biāo)之后，設(shè)計師必須能夠有效地將其轉(zhuǎn)換為功能。他們還必須能夠確定應(yīng)用程序未來可能的需求。在與其他開發(fā)團(tuán)隊成員的長期合作下，設(shè)計師從產(chǎn)品開發(fā)的初始階段一直到完成之日都參與其中。這些任務(wù)和義務(wù)構(gòu)成了用戶體驗設(shè)計師的主要職責(zé)范圍。但是我建議你詳細(xì)了解UX設(shè)計人員的薪酬[23]。

應(yīng)用于我工作的公司（Syndicode），我們稍微簡化了UI / UX設(shè)計過程。這是由你并行處理的項目數(shù)來解釋的。另外，我可以說，當(dāng)專家積累了大量經(jīng)驗后，遵循所有程序步驟的時間就減少了。技能可以幫助你更快地工作。

它是如何在Syndicode中開始的？首先，我們與客戶機(jī)進(jìn)行了一次探索會話，以盡可能多地了解該項目。本次會話的主要目標(biāo)是收集關(guān)鍵項目信息，以便我們能夠獲得高層次的理解。然后我們創(chuàng)建計劃，根據(jù)計劃，我們將研究UI / UX / web / mobile設(shè)計解決方案，并與客戶就該計劃的每個步驟達(dá)成一致。然后根據(jù)精益UX，對UI和UX設(shè)計過程進(jìn)行了詳細(xì)的設(shè)計步驟。

引申閱讀：

[1]https://syndicode.com/2017/10/06/ux-vs-ui/

[2]https://syndicode.com/2017/12/12/what-are-the-functions-of-your-Application-landing-page/

[3]https://syndicode.com/2018/12/20/what-to-expect-for-ux-in-2019/

[4]https://syndicode.com/2018/12/26/the-ux-design-pyramid-with-the-user-needs/

[5]https://syndicode.com/2017/10/05/top-6-software-development-methodologies/

[6]https://syndicode.com/2019/01/09/ux-research-process-in-10-diagrams/

[7]https://syndicode.com/ruby-on-rails-mvp-development/

[8]https://syndicode.com/2019/04/05/agile-ux-vs-lean-ux/

[9]https://syndicode.com/2018/12/10/wireframes-for-ux-design/

[10]https://syndicode.com/2017/08/15/why-user-research-matters-to-ux/

[11]https://syndicode.com/2019/01/22/key-parts-of-user-experience/

[12]https://www.interaction-design.org/literature/topics/visual-design

[13]https://syndicode.com/2017/11/10/the-power-of-motion-design/

[14]https://syndicode.com/2019/01/11/ui-prototyping-tools/

[15]https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/interaction-design-patterns

[16]https://syndicode.com/2017/07/28/the-most-annoying-ui-techniques/

[17]https://syndicode.com/2018/10/11/discovery-session-for-the-new-project-step-by-step/

[18]https://syndicode.com/2019/02/05/the-basic-rules-to-create-the-great-user-interface-design/

[19]https://syndicode.com/2018/12/06/best-books-and-resources-for-ui-ux-designers-in-2019/

[20]https://syndicode.com/2019/02/12/8-key-principles-of-mobile-ux-design/

[21]https://syndicode.com/ruby-on-rails-web-App-development/

[22]https://syndicode.com/2017/12/06/myths-about-mobile-interface-design/

[23]https://syndicode.com/2017/10/11/what-do-you-pay-a-ux-designer-for/

[24]https://mailchi.mp/4312f9ede264/innovations_to_grow_your_business_syndicode

作者：Iren Korkishko；翻譯公眾號：交譯所，翻譯：Zoe.YANG，審核：DomainX

原文：https://medium.com/swlh/ui-ux-design-guide-with-terms-explanations-tips-and-trends-754b9356d914

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

題圖來自原文