模態和非模態對話框是一種非常常用的用戶界面元素，將用戶的注意力轉移到子任務上。那么何時使用，二者又有哪些區別呢？
模態對話框會打斷用戶并要求采取措施。當需要將用戶的注意力轉移到重要信息上時，它們很合適。
為了更好地理解模態對話框和非模態對話框之間的區別，讓我們看看術語“對話”和“模態”的含義。
一個對話框（或對話）是指兩個人之間的對話。在用戶界面中，對話框是系統與用戶之間的“對話”，通常會向用戶請求信息或采取措施。
用戶界面模式是特殊狀態，其中同一系統具有一些不同的用戶界面。每種模式可能帶有不同的命令，或者相同的命令（或操作）可能會產生不同的結果，具體取決于系統的模式。換句話說，在不同的模式下，相同的輸入將具有不同的結果。例如，打開Caps Lock的計算機處于特殊模式：所有鍵入的字母都將顯示為大寫字母。打開或關閉大寫鎖定時，鍵入字母會有不同的效果?；蛘?，在Microsoft Word的“跟蹤更改”模式下，所有以前進行的編輯和注釋都是可見的（而在正常的默認模式下，不會對其進行跟蹤或顯示）。
通過對“模式”和“對話框”的了解，我們可以輕松定義模式對話框。
定義：一個模式對話框是一個對話框，在主要內容和移動系統到需要用戶互動的一種特殊模式的頂部顯示。在用戶與模態對話框明確交互之前，此對話框將禁用主要內容。
相反，非模式（或無模式）對話框和窗口不會禁用主要內容：顯示對話框不會更改用戶界面的功能。對話框打開時，用戶可以繼續與主要內容進行交互（甚至移動窗口，最小化窗口等）。
模態對話框最初旨在警告用戶錯誤或需要立即采取措施的其他系統狀態。在這些情況下，必須先中斷用戶才能解決錯誤。因此，將對話框放置在屏幕中間作為界面的焦點，使其非常有效。這種模式對話框的最大優點是它們引起了用戶的注意，并允許他們認識到問題并迅速進行了糾正。
但是，這種原始用法已經發展起來，現在出于合法或不太合法的原因，有說服力地使用了模態對話框和窗口來吸引用戶的注意。
這是模式對話框引起的一些常見問題：
他們需要立即關注。本質上，模態窗口是強制性的，需要用戶立即采取行動。由于對話框將系統置于不同的模式，因此用戶只有在確認對話框后才能繼續進行操作。
它們中斷了用戶的工作流程。模態對話框迫使用戶擺脫他們最初正在處理的任務。每次中斷都會浪費時間和精力，這不僅是因為用戶必須對對話框進行尋址，而且還因為一旦他們恢復了原始任務，人們將不得不花費一些時間來恢復上下文。
它們使用戶忘記他們在做什么。一旦上下文切換到其他任務，由于模態對話框帶來的額外認知負擔，人們可能會忘記與原始任務相關的一些細節。在這種情況下，恢復原始任務的上下文可能會更加困難。
它們使用戶創建并解決了一個額外的目標-關閉對話框。出現對話框時，將向用戶的工作流程添加額外的步驟：讀取和理解對話框，然后對該對話框做出決定。除非對話理由充分并且確實包含重要信息，否則交互成本的這種增加可能會使用戶推遲。稍后我們將詳細說明這一點。
它們在后臺阻止內容。當對話框出現在當前窗口的頂部時，它可以覆蓋重要內容并刪除上下文。結果，當對話框詢問與剛剛被遮蓋的信息有關的問題時，對對話框的響應可能會變得更加困難。
由于這些缺點，模態對話框在用于非關鍵性活動時會出現問題。
什么時候使用模式對話框合適？以下是一些指南，可幫助您確定是否確實需要模式對話框。
1.使用模式對話框顯示重要警告，以防止或糾正嚴重錯誤。
只要有可能丟失用戶的工作或某個動作可能造成破壞性且不可逆轉的后果，請中斷用戶以避免災難。
要確定什么錯誤嚴重到足以引起模式對話框，請考慮以下事項：
如果將用戶的注意力從任務上移開，這個問題會更容易或更難解決嗎？如果可能的話，最好避免人為錯誤。但是，一旦發生錯誤，如果錯誤消息顯示在主要內容中而不是模式對話框中，則可能更容易修復錯誤。例如，表單中的錯誤應在發生錯誤的頁面上報告，以便用戶在解決問題時可以參考錯誤消息。但是可以在模式對話框中顯示通知用戶她的計算機將在10秒后重新啟動，以確保用戶注意到該消息。
錯誤是不可逆的嗎？不可逆的錯誤通常會導致信息丟失，這對于復雜且耗時的任務尤其有害。例如，對于電子商務企業而言，未能將項目添加到購物車可能是一個不幸的錯誤，但如果用戶沒有注意到微妙的通知，則它不是不可逆的（如果他們確實想要該項目，他們可以重做其操作）。另一方面，覆蓋文件或無法保存對數百張幻燈片的更改都是不可逆的操作，因此非常需要中斷，并且經常受到干擾。
Microsoft Powerpoint使用模式對話框來防止不可逆的錯誤或意外的用戶操作，例如在不保存工作的情況下退出應用程序。
Google Mail桌面應用程序：當用戶在郵件中包含“我已附加”或“請參閱附件”等關鍵短語后忘記附加文件時，將出現此模式對話框。此對話框可防止用戶錯誤（以及笨拙的后續電子郵件）。
當缺少信息會阻止系統繼續用戶啟動的過程時，模式對話框可以提示用戶輸入該信息。
如下所示，Etsy使用模態窗口中斷用戶的登錄信息（當該用戶試圖將某項保存到收藏夾列表中時）。
每當用戶嘗試執行需要進一步步驟才能執行的任務時，Etsy都會使用模式對話框。例如，當用戶嘗試將某個項目標記為“收藏夾”而用戶未登錄時，將出現一個對話框，以獲取執行所需操作所需的信息。
對于工作流，更快并不總是更好。對于耗時且涉及精神（和情感）的任務，一次要索要大量信息可能是不堪重負的。在這些情況下，模態對話框可用于將復雜的信息分解為更簡單，更易消化的塊。向導是使用模態對話框的常見實例。
但是，必須注意的是，具有多個步驟的模式只會延長花費在主要任務上的時間，從而使用戶更有可能一開始就忘記自己在做什么。因此，如果您必須執行多步驟模態，請讓用戶了解他們的進度，這樣他們就不會立即放棄。就是說，如果開始需要多個步驟，則可能有理由為其分配整頁。
當所請求或提供的信息相關時，模態可以有效地工作，或者可以簡化當前任務的完成。
就房地產網站Zillow.com而言，用戶無需帳戶或房地產經紀人即可瀏覽物業列表。但是，當他們嘗試與代理商聯系以獲取列表時，站點將顯示一個模式對話框，詢問他們是否已經有代理商。該信息對于立即進行下一步（聯系上市代理）并不重要，但在簡化未來的交互過程中仍然很有價值。該對話框使用漸進分析，并一次提出一個易于回答的問題。這些問題的承諾度很低，只關注相關細節。
Zillow.com在用戶提交有關特定列表的查詢后，要求用戶提供更多信息。詢問用戶此時是否有房地產經紀人是有意義的點， 因為它減少了將來與其他代理進行冗余對話的機會。
漸進分析的關鍵在于它們遵循用戶對工作流程的期望-中斷僅在它們與當前任務相關或有幫助時才有幫助。
如上所述，模態對話框對用戶具有許多缺點和成本。為了使這些費用合理，與任務和重要性的相關性應該很高。與用戶目標沒有直接關系的模態對話框被認為是令人討厭的，并且會減少對公司的信任。
此外，當非優先信息以高優先級格式（如模式對話框）顯示時，用戶將拒絕關注此格式的其他實例。這就像伊索寓言中的“哭狼的男孩”一樣-反復誤導他人將使他們在真正需要時不會給予您信任。
與普遍看法相反，郵件列表注冊雖然對于產生業務線索至關重要，但對用戶而言并不重要。在最近的一項網絡可用性研究中，我們聽到了與電子郵件通訊注冊有關的模態對話框的內在鄙視。
GoodHousekeeping.com通過模式化的郵件列表對話框發揮了更大的作用-不僅停用了背景，而且還用全屏照片完全替換了背景，從而刪除了用戶在網站上的所有上下文。它也出現在用戶首次登陸網站首頁后的前3秒鐘內，使用戶沒有時間從該頁面上收集任何值。該對話框要求的信息對于用戶或其工作流程而言并非必不可少，并且幾乎不提供上下文或感知的價值。
Wayfair使用模式對話框來請求用戶指定應將該項目固定在哪個板上。另一個UI元素（例如主要內容中的一個選項）將更適合于輸入此信息。底部：選定木板后，Wayfair使用模式對話框來要求用戶邀請朋友加入他們的木板-這對用戶來說不是必不可少的操作，并且會增加固定項目的交互成本。
結帳對用戶和企業都是高風險的過程：用戶希望確保該過程是安全和無錯誤的，而企業希望確保用戶遵循其購買決定。模態對話框（如果不需要的話）充其量會分散用戶的注意力，最壞的情況是削弱用戶的信心。
較早的Walmart.com版本使用模式對話框提示用戶在結帳期間登錄。最好的情況是，這種模式可能會分散用戶的注意力，并引導他們進行全面的搜索以查找Walmart.com密碼，而不僅僅是以訪客身份完成結帳。在最壞的情況下，用戶可能會感到他們被迫開設一個帳戶，而這又會影響購買決定。此后，沃爾瑪重新設計了其網站以刪除該模式對話框（但重新設計也完全刪除了訪客結帳，現在要求用戶擁有一個結帳帳戶-坦白地說，這令人反感）。
模態對話框應用于與用戶的簡短直接對話。如果模態要求用戶進行復雜的研究或咨詢其他信息源（可能被模態阻止），則該交互不是正確的UI元素。
邊境航空公司使用模式對話框促進基本航班的加價銷售。該對話框要求用戶決定花更多的錢，但是不允許他們訪問做出該決定所需的其他信息（例如，是否還有剩余的體面座位）。
在任務不是很關鍵的情況下，非模式對話框可能是合適的。非模式對話框的攻擊性不如模式對話框，因為它們允許用戶繼續其活動并在不相關時忽略它們。但是，它們仍然可能是破壞性的，特別是如果它們使屏幕上的重要信息模糊不清或需要太復雜的交互。
此外，某些非模式對話框不能在設備和瀏覽器之間很好地轉換-例如，臺式機上的Chrome中的非模式窗口可能會在iPhone上的Safari中變為模式窗口，例如下面的Meowbox.com。
在Meowbox.com桌面網站（左）上，主頁右下角顯示了用于時事通訊注冊的定時非模式對話框。但是，在網站的移動渲染（右）上，非模式窗口變為全屏模式窗口，迫使用戶在向前移動之前提供輸入。桌面版本允許輕松消除提示，而移動版本則不允許。
當用戶需要在模式之間快速切換以訪問某些信息時，非模式窗口非常有用。例如，Google Mail使用非模式窗口作為編寫新電子郵件的默認方法。用戶可以繼續打開此窗口，在不丟失電子郵件的情況下最小化編寫的電子郵件（或選擇將其最大化到模式窗口）。該單獨的視圖使用戶可以查找較舊的電子郵件或其他信息，這些信息可能有助于撰寫當前電子郵件。
Google Mail的非模式窗口使您可以輕松地在寫入和讀取信息之間進行切換。
涉及模式對話框時，請考慮以下問題：沒有人喜歡被打擾，但如果必須的話，請確保值得這樣做。
在使用對話框時，還有哪些需要注意的點呢？
謹慎使用對話框，因為它們會打斷他們。它們的突然出現迫使用戶停止其當前任務，并專注于對話框內容。對于模式對話框，用戶必須先進行對話操作，然后才能繼續訪問下面的頁面。有時這是一件好事，例如，當用戶必須確認一項重要操作時（例如“您要刪除您的帳戶嗎？”），但是對于許多任務而言，這是不必要的，而且通常很煩人。
在需要用戶在繼續操作之前進行交互的情況下，或者當錯誤的代價可能很高時，使用對話框是最有意義的。
在用戶未做任何事情的情況下突然打開對話框是一個非常糟糕的主意。不幸的是，許多網站都用下面的示例用訂閱框轟炸了訪客。
用戶在頁面上執行某項操作時，應該始終打開一個對話框。那可能是單擊按鈕，跟隨鏈接或選擇一個選項。
并非一切都值得中斷。
對話框的替代方法是內聯擴展，可以幫助維護當前上下文。
不要只是彈出對話框。
對話框應該說出用戶的語言（使用用戶熟悉的單詞，短語和概念），而不是特殊的系統術語。
您應該使用清晰的語言寫問題。例如，當您要求用戶刪除她的文件時，而不是說“釋放存儲空間？” 問“您要刪除文件嗎？” 通常，您應該避免道歉，模棱兩可或諸如“警告！”之類的問題。或“您確定嗎？” 因為它們會帶來額外的視覺混亂。
避免為用戶提供含糊不清或不清楚的選項。您應該只使用清除選項。在大多數情況下，用戶應該能夠僅根據標題和按鈕文本來理解選擇。
錯誤的示例：在此示例中，輕蔑的操作文本“否”回答了問題，但沒有建議之后會發生什么。
很好的例子：平等權利行動文本“放棄”清楚地表明了決定的結果。
對話框不要遮蓋可能對用戶有用的信息，這一點很重要。例如，一個對話框，要求用戶確認某些項目的刪除，應列出要刪除的項目。
處理完成后，請記住顯示通知消息（或視覺反饋）。讓用戶知道她已經完成了所有需要的工作。
在對話框中使用明確的問題和選項。
設計對話框以產生閉合。
操作后通知用戶。
您不應該試圖過多地塞入對話框。保持其干凈簡潔（遵循KISS原則）。但是極簡主義并不意味著有限。所有信息都應該是有價值的和相關的。
對話框永遠不應部分出現在屏幕上。您不應該使用包含滾動內容的對話框。
錯誤的例子： 巴克萊銀行的付款處理對話框中有很多選項和元素，其中的一部分選項僅可通過滾動來使用（尤其是對于通常具有相對較小的屏幕區域的移動設備）。
很好的例子： Stripe使用簡單而智能的對話框，僅包含基本信息，這些信息在臺式機和移動屏幕上都看起來不錯。
對話框不應包含兩個以上的動作。第三項操作（例如“了解更多信息”）通常用于使用戶離開對話框，這增加了未完成任務的風險。
將復雜的任務劃分為多個步驟是一個好主意，但這通常也表明某些事情太復雜而無法要求用戶在對話框中完成。
如果交互足夠復雜，需要多個步驟（如下面的示例所示），那么它就足夠復雜，可以保證擁有自己的頁面。
通過刪除不需要的元素或不支持用戶任務的內容來簡化對話框。
嘗試避免對話框包含多個步驟。
正如上面所介紹的，對話框有兩種主要類型。第一類是尋求注意力的模態對話框，它迫使用戶在繼續之前與他們進行交互。模態對話框通常用于離散的阻塞過程，需要顯式的“接受”或“取消”操作才能將其關閉。單擊其外部區域時，它不會關閉。第二種類型是非模式對話框，允許用戶在其外部單擊或點擊以將其關閉。
您僅應將模式對話框（第一種類型）用于非常重要的交互（例如，刪除帳戶，同意條款和條件）。
系統對話框也是模態對話框，通常具有以下基本元素-內容，操作和標題。
打開對話框時，重要的一點是要使后面的頁面稍微變暗。這有兩個工作。首先，它通過對話框吸引人們關注疊加層；其次，它使用戶知道該頁面當前未處于活動狀態。
但是要注意著色。如果您將其設置得太暗，則用戶將無法再在后臺看到頁面。如果將其設置得太淺，則用戶可能會認為該頁面仍處于活動狀態，甚至可能根本沒有注意到對話框。
右上角的對話框應該有關閉選項。許多對話框在窗口的一角都有一個“ x”按鈕，用戶可用來退出該窗口。但是，對于普通用戶而言，此“ x”按鈕并不是一個容易的逃生路線。單擊“ x”通常會花費更多的時間和精力，因為它的尺寸較小，用戶必須發現并單擊（點擊）它。
允許用戶單擊非模式窗口時，可以退出非模式窗口，這是一個好主意。
對話框應避免啟動其他對話框，因為它們增加了視覺上的復雜性。
大多數情況下，允許用戶單擊（或點擊）以關閉對話框（模態對話框除外）。
對話框應避免啟動其他簡單對話框。
模態和非模態對話框都非常有用，可以請求或鼓勵用戶參與。在決定這兩種類型的對話框時，請考慮用戶上下文和工作流程。避免不必要地打擾用戶并中斷他們的工作流程。使用戶更容易解決問題并實現目標。如果公司希望朝著業務目標持續發展，則在這些設計決策中必須優先考慮用戶目標。
涉及模式對話框時，請考慮以下問題：沒有人喜歡被打擾，但如果必須的話，請值得確保這樣做。
【PS必備技能】2.5D圖形制作規范，用ps最簡單的方法讓你學會2.5d圖形設計！
視覺設計基礎“四大原則”之《重復性》
如何制作視覺平衡的圖標，正確的形狀對齊以及完美的圓角
如何一次只做一個小決策，創造一個更容易獲得和使用的體驗
引人注目的UX設計背后的心理學
每天，您都會在線訪問多個網站。他們中的一些給人留下了積極的印象，而另一些則使您在數毫秒內按下了后退按鈕。您最終從一個網站購買了產品，而不是從競爭對手那里獲得了產品。是什么引導這種行為？您為什么對某些網站感到滿意卻卻避開其他網站？
這樣做的主要理由之一是在用戶體驗設計中實施心理學。您喜歡的網站聘用的UX專家知道如何在與網站交互的每個階段觸發心理反應。在線心理學的使用是成功的，因為我們在人類生存的幾個世紀中獲得的某些進化特征在我們每天與世界各地的互動中仍然發揮著重要作用。
本文介紹了一些常見的UX元素以及它們背后的心理思維。
有關服務或產品的建議
例如，當您在機票預訂網站上時，會在預訂完成之前或之后獲得有關酒店，餐廳或旅游選項的建議。在許多情況下，如果價格足夠誘人，人們就會繼續預訂酒店或在餐廳預訂。當您搜索抵押貸款時，同樣適用，并且您還會獲得有關債務管理或退休計劃的建議。
圖片：Skyscanner
這是一種稱為“預期設計”的UX創意。目的是根據您在網站上查看的內容來建議您最可能需要的其他內容。這個設計思想是基于當我們在互動中感到被理解時更快樂的心理原理。這在所有領先的電子商務門戶網站上也可以看到。
圖片：Flipkart
這種UX設計的一種變體是在許多網站上延遲顯示彈出框以進行加價銷售或潛在客戶。這也是可以預見的，因為它基于這樣一個事實，即許多用戶直到從站點上花費的時間中獲得了一定的滿意，才會對彈出框的內容不感興趣。
顯著性原則是另一個鼓勵用戶體驗設計決定的心理原則。它說人們將注意力集中在當時與他們最相關的事物上。因此，正在尋找飛往夏威夷的廉價航班的度假者將很高興看到提供經濟實惠的住宿，甚至為他們的旅行提供融資選擇。僅登陸頁面以讀取癥狀的用戶將僅關注頁面的內容，而不關注訂閱彈出窗口。
限制用戶選項
您選擇的網站比強迫您跳過五個菜單來查找相同內容的網站更容易找到。這是因為我們發現很難做出決定時，有太多的選擇。這是基于?？硕傻男睦碓恚哼x擇的負擔。
圖片：Apple
最好的UX設計人員了解這一點，并確保用戶可以找到所需的信息，產品或服務而不會感到不知所措。
搶眼設計
圖片：例如葡萄酒
如果網站或應用程序的設計精美（根據用戶的描述），則立即導致對品牌的有利傾向。這是一種心理原理，稱為審美可用性效應。如果您的網站漂亮，那么普通用戶就會相信它比同一個利基網站的其他功能更實用，更值得信賴。關于吸引力的這種偏見也可以在離線狀態下看到，因為研究表明，更具吸引力的人被認為比其他人更有能力和更友好。
此外，引人注目的設計可能使人們忽略網站或應用程序上的其他缺點。頂尖的UX設計人員花費必要的時間來獲得任何項目的最佳美學效果也就不足為奇了。
醒目的顏色口音
圖片：Paypal
諸如Trustly，PayPal，FreshBooks之類的品牌，以及您日常遇到的許多其他品牌都使用顏色強調點，以使您的眼睛指向CTA按鈕，注冊表格等。網站上的主要顏色為藍色時，它們使用綠色，紅色或黃色來表示突出這些區域，它會起作用！這些網站的任何訪問者都可能會錯過頁面上的其他內容，但會看到這些部分以獨特的口音仔細突出顯示。
這是基于赫德維格·馮·雷斯托夫（Hedwig von Restorff）的心理對比原理，即人類更容易記住那些與其周圍環境脫穎而出的東西。有趣的是，沒有顏色被認為是最有影響力的。UX設計人員只需確定主導的顏色主題，并使用不會混入背景的另一種顏色作為重點選擇。
產品差異化價格計劃
這也稱為“金發姑娘”定價技術。企業使用這種技術來銷售“中檔”產品。當您四處尋找虛擬主機計劃時，您可能會看到更多。提供商通常列出三到五個訂閱計劃，并將中間計劃突出顯示為“受歡迎”或“熱門”。
圖片：Acowebs
許多人立即分析出最昂貴的計劃和最便宜的計劃，最終選擇了所謂的中端計劃。這是因為他們將其視為最高價值計劃和入門級計劃之間的完美中間地帶。有趣的是，這些中端計劃的價格沒有像其他任何人一樣受到嚴格審查，這使得它們成為提供這些品牌的品牌中最賺錢的。
這種定價技術之所以有效，是因為它基于取景的心理原理，該原理強調了人們在做出購買等決策時如何避免極端情況。它還顯示了選擇的呈現方式如何影響決策過程。
其他領域的更多用戶體驗設計師正在采用這一原理?，F在，各種電子商務商店都提供多層定價結構或提供價格不同的相似產品。大型科技品牌也不例外。他們可能是這一原則的最大受益者之一。因此，下一次您發現自己忽略了中端選項規格，規格稍高但仍低于最貴機型的三星Galaxy設備時，您就知道了！
這是另一個例子。
圖片：SEObirth
限時優惠
電子商務網站已經完善了使用限時報價創造產品需求的技巧。一些品牌會聲明要約/產品“僅在接下來的X天內可用”，而其他品牌如亞馬遜將顯示詳細信息，例如“僅剩5個庫存”。無論哪種樣式，兩種策略都旨在引起您的相同反應：緊迫感，因為該產品很快將不再可用。
圖片：亞馬遜
這是基于稀缺性的心理學原理，該原理指出，與到處都有的物品相比，我們傾向于更加重視稀缺或不可用的物品。一個1975年的研究證實了這一原則。研究人員將相同類型的曲奇放在兩個罐子中，但是第一個罐子有10個曲奇，而第二個罐子只有兩個曲奇。研究參與者對第二個罐子的評價高于第一個罐子。
研究還發現，人們對以前豐富但現在稀缺的產品的評價要比總是稀缺的產品更有價值。經濟學專業的學生不會對此感到驚訝，因為可用性的下降總是會觸發需求的增長。
除電子商務網站外，其他具有在線形象的品牌也采用稀缺性原則。出售在線課程的企業家強調諸如“僅適用于前10名學生”，“一周內結束”之類的術語。其他人則為采取特定行動的人們提供獨家利益，例如提交電子郵件地址，支付服務費用等。 。
當品牌試圖銷售“限量版”產品時，該原則也可以在離線營銷中看到。
UX設計師之所以采用這種技術，是因為他們知道，即使產品或服務沒有迫切需求，人們在產品或服務稀缺的情況下也會注意。
推薦書的戰略定位
圖片：ElegantReports
有沒有想過為什么許多產品或服務網站的主頁上都有推薦？為什么在做出購買決定之前總是要尋找推薦？這是因為社會證明的心理學原理。
當我們對任何事情都持懷疑態度時，我們會尋求同行的指導。這就是為什么您會發現人們在選擇公司之前先在社交媒體上要求評論特定品牌的原因。在1969年社會科學實驗強調了這一先天行為。研究表明，如果已經有足夠的人參與，人們至少可以說服人們注意某些事情。
除了推薦之外，UX設計師還通過炫耀可信賴的從屬關系（例如SEO專家從事的業務或以作家為特色的博客）來結合社會證明原則，訂戶數量，帖子中的股份數量以及產品的等級或服務，甚至獲得的獎勵數量。
圖片：Acodez
電子商務商店通過顯示名為“客戶也已購買的商品”的部分來使它更進一步，以突出顯示可能會使用戶感興趣的流行產品。
突出贈品
圖片：皮特和佩德羅
如果您免費提供某些商品，在線用戶現在或將來更有可能從您的品牌購買商品。這是基于互惠的心理原理。這就是為什么許多UX設計師強調任何交易的原因。
如果您要購買新鞋，則更有可能選擇在其網站上提供“免費送貨”的品牌。同樣，您也可以在提供免費指南或免費咨詢的登錄頁面上提交聯系方式。
UX設計師結合對比和互惠的心理原理來創建高度轉換的頁面。
結論
達到既定目標的引人注目的UX設計并非偶然。最好的設計師知道，在線成功的關鍵是要吸引一般用戶群的基本本質，他們會運用心理原理來實現這一目標。人類的在線行為是可以預測的。結合心理學和用戶體驗設計，您的品牌可以產生更好的結果。
文章來源：UI中國 作者：Shawn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
全新的2021已經到來，在這個適合展望未來的時候，淘寶也迎來了品牌形象的升級，一個萬象更新的淘寶正在向我們走來。
全新的2021已經到來，在這個適合展望未來的時候，淘寶也迎來了品牌形象的升級，一個萬象更新的淘寶正在向我們走來。
“淘寶直播很有趣味”，“淘寶人生很新潮”，“淘寶更好逛了”越來越多的用戶在感受淘寶的新變化。新淘寶，讓用戶在“淘好物”過程中更能感受到“逛”的樂趣，從產品、直播等多場景多維度帶給用戶全新體驗。作為淘寶的鏡子，我們的品牌也伴隨著產品的升級，在設計層面表達了全新內核。
在新淘寶的大背景下，設計的挑戰在于如何將抽象的心智具象表達。此次品牌設計將圍繞“連接”“開放”“有趣”三大設計理念透過字體傳達淘寶的品牌新內核。
連筆&連接
在新的字體中將有粘連但又不夠流暢的筆畫結構，讓它們“一氣呵成”起來，通過連筆來表達“連接”，它寓意了新淘寶要更好地連接商業、用戶和內容。
空隙&開放
“通透”是新的字體比較直觀的感覺，讓字體本身結構上有“呼吸”的空間，它代表了新淘寶對外能夠提供充足的空間，同時也將生態體系打開，從而吸收更多的資源共贏共創。
弧度&有趣
新的字體在彎折筆畫的連接處做了弧度處理，讓整個字體看起來更加有活力，它要展現的是新淘寶將產出更加豐富多樣的內容，讓消費者能體驗到更多趣味且好逛。
很榮幸本次升級邀請到了國內著名的字體設計廠商方正字庫與知名品牌設計公司MetaDesign一起聯合完成我們的LOGO設計，整個過程中都提供了非常專業的指導。
全新“淘寶”品牌標識，充分融合了中華傳統書法文化和現代的設計語言、設計手法，呈現出多元、豐富、有趣的品牌面貌。
全新升級的“淘寶”特別注入了自然書寫的筆勢，將寫意融入設計之中。在設計上借鑒了行書的技法，在字體的筆勢相承之處運用連筆書寫，線條流暢自如，筆畫之間氣息貫注、流動和諧。
連筆
字體部件的設計突出了筆畫的血脈與氣勢，字體起筆處注入能量，轉折時意氣相聚，呈現出蓄勢待發的姿態，末尾的鉤畫收筆果斷，整體給人一種勢如破竹、一氣呵成的視覺感受。
蓄勢
“淘寶”橫畫起筆處采取直切手法，如逆鋒蓄勢，運筆時線條微弧上揚，收筆處筆畫輕提，筆勢流麗、煥發風采。
橫畫上揚
新“淘寶”的設計細節精微生動，通過適當的減細、避讓，字體筆畫結構緊密得當，布白停勻、筋骨相諧，穿插避讓恰到好處。
避讓
兩個單字點畫的筆形渾圓一致、遙相呼應，形成左右顧盼的姿態，文字之間脈絡貫通，構成一個有機的整體。
呼應
中英文字標互相呼應；英文字標需要足夠簡約才能滿足LOGO以中文為主，英文為輔的傳播需求。
優化LOGO的筆劃及布白，提高LOGO在數字端上小尺寸下的可識別度。
當淘寶的中文字標設計逐漸成型，我們希望英文字標能承載相同的設計理念。
‘T’的橫畫呼應中文的橫劃特征:微弧上揚，以流暢的圓角收筆。
‘a’維持雙層結構,更能與相鄰的‘o’更能區分，保持高的視別度;頂部的拱形弧線與淘字的‘勹’部筆勢互相呼應。
開放’o’字的內白，平衡筆劃粗細的變化；確保外輪廓的弧線圖滑流暢，使造形更豐富生動。
升級后的英文字標彰顯中文字標的設計精髓，與時并進。
新淘寶，新品牌，新形象。為了能夠讓用戶對于品牌有更具體的認知，此次品牌升級還創造了淘寶自己的超級符號，結合業務豐富的場景，讓視覺語言更具專屬性和多樣性，讓用戶更好的感知到，一個更連接用戶、更開放平臺、更充滿趣味的新淘寶正在走來。
文章來源：UI中國 作者：AlibabaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在我開始所有話題之前，我有問題想問大家，大家工作快樂嗎？
我聽到了特別積極的反應，說非常的快樂。希望大家說快樂，不是因為今天是周五。
但是呢，其實，工作并沒有我們想象中那么快樂，是所有的活動當中快樂指數的，跟躺著帶來的快樂差不多的，有些人躺著什么也不干，也比工作快樂。
什么原因導致了工作的不快樂？
第一類，關乎目標。大部分人認為工作是為老板服務，所以很難受。另一類，是因為反饋，很多工作的結果依靠于外界，依靠于老板，所以你跟直屬上司的關系，決定了工作的體驗。第三類，是我們認為挑戰和技能的不匹配，導致了我們工作的不快樂。當挑戰大于技能的時候，你就會焦慮，當技能大于挑戰的時候，你就會覺得無聊，你的工作就會在焦慮和無聊之間來回地徘徊，這是我們理解的世界。
這個問題，在數字世界中會變得更加的明顯。70 年前，第一臺計算機出來之后能解決的問題非常的簡單，但是 70 幾年過去了，數字世界得到了非常大的發展，我身邊任何一個小設備都遠遠大于 70 年的。而現在的我們和 70 年前的前輩們沒有本質的區別，我們有 7+2 的記憶法則，最多只能記住 9 個數字，這就導致了在數字世界當中，我們所面臨的挑戰遠遠大于人類所掌握的技能。
數字世界往往給我們帶來了挑戰大于技能，所以你的體驗是負能的。如果你的工作更加有趣，挑戰能夠匹配技能的時候，工作就會變得很好玩。工作就像打游戲一樣，你通過了一關，技能得到了提升，工作就會變得持續好玩，所以我們在無聊和焦慮中間尋找平衡，這個平衡就是快樂的通道。
說起工作，大家多多少少會有快樂的體驗，但是和躺在沙灘上睡覺的體驗完全不一樣。某一個下午或者晚上，需要處理一件稍微有難度的事情時，你需要集中所有的注意力，專注于你和你的事情，一抬頭兩個小時過去了，這是一種極度飽滿、極度被滿足之后的快樂，它是一種成長的快樂，也是一種挑戰和技能匹配的快樂，也是全情投入的快樂，所以我們所說的快樂工作指的是全情投入的工作。
基于這樣的思考，我們將每個人都追求快樂工作，作為Ant Design 的基本假定。
第一個原因是，我們認為人或多或少都有這樣的快樂體驗；第二個很重要的原因在于，對于大多數人而言，我們醒著的絕大部分時間都要工作，如果你無法在工作中體驗到快樂，人生將會在焦慮和無聊中度過。
基于這樣的思考，我們找到了 Ant Design 的基本假定。就像光速不變基于相對論一樣，我們想基于這樣的假定，表達 Ant Design 的體系。
這就是 Ant Design 的基本假定，每個人都追求快樂工作，Ant Design 中每個人是誰？我們分成兩種不同類型的用戶：第一類是用戶，第二類叫做設計者。所謂的設計者是創造這些應用性能的人，也就是在座的大多數。
我們將快樂拆成兩部分，一部分是快感，一部分是樂趣，基于此，我們衍生出了 Ant Design 四個價值觀，設計首先是自然的，其次是確定的，第三，設計是要有意義的，第四，設計是能讓用戶和產品不斷成長的，它是具有生長性的。
所以接下來的分享當中，因為時間的關系，我會重點分享其中的兩塊。
第一塊叫做確定性。分享一個小案例，我剛入行的時候，就碰到了社會的毒打，我想找到我的合作伙伴進行驗收發布的環節，因為設計師對細節有非常強的管控情系，我用略微虔誠的態度說：“親，能稍微調整一下列寬嗎？”，他可能沒理解我的意思，說“我覺得挺好”，我說“都換行了，哪里好？”，我以為會引起他的注意，結果他回了我一句：“這不重要，你行你上?！?
我一開始并不明白，為什么這個世界是這樣的？我認為我們都應該有同樣的認知，直到有一天我看到他的競爭升級 PPT 的時候，我就明白了，原來他不是針對我，他不換行不僅在產品上，PPT 里也不換行。不同的人有不同的想法，不同的工種也有不同的想法，而我們的工作是需要這樣一群人一起合作，就會導致一個問題，當不同的人有不同的、不確定性的想法，會導致研發過程的不確定性。
我們總說，一個人可以走得很快，一群人才能走得很遠。我們要想辦法怎么讓這群人可以步調一致地走得快，又走得遠，我們把這套體系、方法論叫做 ETCG 2.0。
這是原有 ETCG 的基礎上，進行升級的過程。我們希望面對同樣的問題，各個角色都能推理出同樣的方案。就像你在春天種下一顆蘋果樹的種子，你一定在秋天可以得到一顆蘋果樹，而不是一顆梨樹。
ETCG 2.0幾個字母分別代表不同的意義，第一個是功能范例，第二個是模板，模板是我們基于業務的抽象，目的是幫助新手或者幫助不同設計師保持設計的一致性，指引頁面如何設計，比如這是典型的列表頁，由高級搜索和表格組成。今年在模板的基礎之上又做了一層更大的精進，我們做了抽象和規范衍生出了模板組件。一行模板組件，當無法滿足你的需求時，只要一行代碼，就可以得到一個完整的序列。
除了列表頁，還有表格頁，還有圖表、表單，以及布局，構成了我們對系統的抽象，叫做「四表一局」，它大概覆蓋了中后臺系統、或者企業級產品 80% 以上的業務訴求，同時本著非常開源、開放和普惠的心理，整個「四表一局」正式對外開放，大家可以訪問 Ant Design 的倉庫下載和使用。
ETCG 中的 C 是組件，是 Ant Design 最早和大家見面的內容，五年的時間里面，我們有了很多數量上和質量上的精進，同時創造了非常多的社會價值。這五年前，非常令我們自豪的是，有接近 1000 名貢獻者參與到 Ant Design 的建設中，同時 TOP 50 當中，60% 來源于社區，他們為 2 萬家企業提升了 3-5 倍的研發效能，同時我們正式于去年年底成為全球開源第一的組件庫。五年前，螞蟻集團發起了 Ant Design 這個項目，但是它今天所取得的成就是來源于社區和我們的共同努力，這里的榮譽和掌聲應該獻給所有為Ant Design 貢獻過代碼的同學，謝謝你們的支持。
ETCG 的 G 有兩個。第一個 G，是對組件樣式的抽象，我們用了變量化的方式進行了約束和管控，它可以做什么？特別簡單，你的老板今天不喜歡藍色，想要橙色，你只要一行編碼，就讓組件庫發生了煥然一新的變化。
ETCG 的第二個 G，是我們今年重點建設的部分，也是全新的一部分，叫做 Guides，指的是人和機如何進行互動交互的過程。
比如說這里是應該放一個數值輸入框，還是放一個輸入框？以及如何進行放置？我們將瑣碎的交互規則進行抽象和封裝，讓機器學習這些規則，讓機器幫助我們進行這些規則。你只要導入原數據，幾乎不用做任何的配置和更改，可以得到可進入生產環境、可研發的表單頁面，設計得可能比初級的設計師產生的效果更好，你想要的一切都應該放在合適的地方。
這就是我們對 Ant Design 確定性的理解，不需要設計師參與的設計產品，提升了設計和研發的體驗，當然商業化還需要很長的時間。當下如何解決現在碰到的問題？仰望星空，也要腳踏實地。作為設計師，我在想怎么解決五年前的問題，我很想說我行我上。
我們怎么使用？使用 Kitchen 進行編輯化的能力，把 13% 甩給我的合作伙伴。如果你覺得還不夠，想做更多的管理和管控，甚至可以用「四表一局」的能力進行服務的搭建，搭建可進入生產環境的服務產品，讓設計師變成設計工程師的角色。
在今天分享的最后一趴，我和大家聊聊這個場次經常聽到的詞，那就是“自然”，學術界和產業界對自然有非常多的理解。我們把它定義成了形容詞，我們認為這個行為很自然，大家經常在各個場合聽到的一句話，設計是關乎如何運作的問題，Ant Design 在這個基礎上，要聊的是 how it worksnaturally。
同樣分享一個小案例，在我們有一天的用戶群里，我們的用戶反饋了一個非常有意思的問題。他說語雀可以插入圖片嗎？語雀的負責人當時在現場，就回到：“當然可以，最基本的能力”。我們的用戶問出第二個特別具有代表性的問題：“可是我們找不到在哪里”。語雀是阿里內外都很喜歡的一款文檔類文件。編輯頁的第一頁，我們的工程師特意做成了綠色的，你點進第一個的第一行就是圖片上傳的功能。但是大家有沒有想過？我們僅僅隱藏了一級，就讓用戶記不起來有這個功能，我們僅僅隱藏了一級，就讓用戶找不到這個功能。這不是語雀產品特有的特征和問題，而是這個時代大部分問題具有的特征和問題，因為大部分的產品處于 1973 年的基礎上。
WIMP 是什么？Window、lcon、Menu、PointDevice，當我們的功能只有 20 幾個的時候，這是非常好的設計，總比代碼行好太多，今天我們說了數字世界當中，我們的設備、計算機、網絡成千上億倍的發展，用戶怎么記得住 8000 個功能？用戶怎么定位到 8000 個功能在哪里？所以 WIMP 界面碰到了人機交互的瓶頸階段。
為什么碰到瓶頸會越來越不自然？第一個角度從人機互動的環節，當用戶記不住的時候，就沒辦法從哪個入口出發。所以 WIMP 界面第一個不自然的原因在于，所有動作的發起都依托于用戶。用戶一旦記不住，一旦找不到，人機交互就沒辦法走通，這是 WIMP 界面的第一個問題。
第二個問題，要回到人身上。人的行為分為有意識、無意識的兩層，能量消耗比較大的就是有意識層面。WIMP 在于所有的行為依托于用戶有意識地觸發，這本身就是一個非常消耗腦力的一件事情。在我們面對這么多功能的環境下，這兩個問題導致了我們在數字世界當中碰到的巨大問題。因為我們知道系統的功能每天在增加，數字世界不需要遵循物理制造的極限，它可以進入無限備功能的疊加，所以在這個世界當中碰到的挑戰遠遠大于我們所掌握的技能，所以 WIMP 界面碰到了誕生以來最大的問題。
我們如何解決這個問題呢？首先一定要清晰地認識到，人是有意識和無意識兩種思維的結構和意識形態的。同時系統也可以分為兩部分，一部分是主動功能，第二部分是被動功能，我們要嘗試的守正出奇。守正延續了 WIMP 界面常規的功能，讓人有意識尋找功能，觸發系統的能力。但是出奇要多做一步，除了讓用戶找功能之外，我們要增加很多的主動式的交互，讓功能找到用戶。
接下來分享幾個案例，在我們的常規設備當中，都已經有這樣一些主動式的服務來尋找到你。
第一類是相逢不相識，名字很好聽，解釋也特別好玩。在語雀當中有一個小功能是我特別喜歡的功能，當我編輯一篇文檔，編輯了大于 30%、50% 的文本量，這個鉤會自然地幫我鉤上，因為它有一個基礎的設定：如果這篇文章發生了比較大規模的修改，你的訂閱者很自然的想知道你這篇文章做了什么。
第二個相逢不相識的地方，大家可以聚焦一下支付寶。有興趣可以打開支付寶首頁，在你的收款碼應用里，解決什么樣的問題？解決面對面交易的問題，所以當你輸入一個金額完成以后，自然旋轉屏幕的時候，這個屏幕會進行自然的翻轉，這樣對面掃你錢的人，可以看到信息的正面，這非常自然。
第二個主動式交互的類型，叫做可用不可見。和相逢不相識的區別在哪里？就是默默地為你提供了服務，但你可能永遠不會知道它的存在。在蘋果第一代出來的時候，做了一個非常牛逼的設計，因為大家都知道虛擬鍵盤，沒有物理觸感，所以誤觸率很高。虛擬鍵盤怎么解決？蘋果基于非常有趣的思考，在蘋果的全鍵盤里面，只要輸入了 Desig 的時候，通過語義詞的分析，N 點擊的范圍遠遠大于旁邊的 B 或者 M，以及上面的 G 部分，這是幫助你做主動選擇的服務，只是我們從來不知道有這樣一件事情。所以我們將這些自然的人機互動方式進行整理，包括融入到更多的案例以后，發現人機主動式交互有九種不同類型的分類，除了輸入法，更多是通過用戶使用情景的上下文進行優化的過程。
我們有了這張人機自然的交互，怎么解決語雀的問題？我和在座的語雀設計師有過這樣的討論，用戶說圖片上傳找不到，我們大部分人的第一反映是把圖片上傳顯示單獨放出來。這可能會解決剛才的問題，但是如果明天財務說表格找不到了，我是不是還要把表格拿出來？有人說附件找不到了，還要把附件拿出來嗎？我們需要從主動式交互的角度暢想怎么優化人機互動的過程。
回到這張自然交互的工具，提供了一種簡易的思維框架。
我們去判斷哪些是可以去做的，第一件事特別簡單，我們判斷用戶使用的上下文是什么，我們發現很多產品的通用習慣，直接把圖片拖進去，做成小的服務，用戶根本不需要知道功能的存在就可以使用。
第二個從原數據角度來理解，圖片是一種特殊結構的數據，它是 jpg、png。用戶在外部復制了之后，進入編輯頁可以主動推送他一個服務，詢問他是否要粘貼，本質上并不復雜，但是它確實在 WIMP 界面傳統意義的基礎上，又提供了初級的部分，又額外做了一部分。
我們所定義的自然里面，是需要我們做更多的主動式的服務，讓我們這個海量的功能能夠在合適的場景下，去找到用戶，從而節約人的腦力和體力。因為對于人來說，我們和 70 年前的爺爺輩們沒有本質的區別，我們需要被善待。有感興趣的同學可以看支付寶的訪問碼，也期待和大家做更多的互動。
分享的最后一趴，我簡單總結一下今天做了哪些事情和分享了哪些內容。第一趴，我們提出了 Ant Design 的基本假定，我們認為每個人都缺少快樂工作，這種快樂工作是和我們平時閑散完全不同的問題。同時大多數人都不可避免的來工作，我們怎么扭轉工作對我們的體驗，這是人生中非常大的問題。第二趴，我們衍生出新的價值觀，這四個價值觀中，因為時間篇幅的原因，重點和大家講了確定性和自然的價值觀，這是歷史最悠久，也是最有代表性的兩塊?；谶@兩個價值觀，我們衍生出了不同的組建庫也好、可視化資產也好，相關的設計資產以及設計策略，以及配套的設計工具，當然藍色部分是我們今天介紹的重點。最后這張圖特別適合拍照，這是我們系統提供給大家的主動式服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
