2021-4-16 ui設(shè)計分享達人
“作為用戶體驗設(shè)計師，我們的使命之一就是如何以最正確，最有效的方式將產(chǎn)品意圖傳遞給用戶?！边@也是行業(yè)中大家的共識，關(guān)于設(shè)計原則也有很多，今天想給大家介紹的是 Don Norman 在《日常事物的設(shè)計》中提到的七項基本設(shè)計原則，我們將套理論付諸實踐，然后通過測試，驗證和迭代來提升設(shè)計體驗。
PART 01
諾曼（Norman）的七項基本設(shè)計原則可以幫助確定一系列問題的答案，這些問題從目標開始，然后通過將結(jié)果與預(yù)期進行比較后結(jié)束。這七項基本原則是：發(fā)現(xiàn)、反饋、概念模型、示能、意符、圖示、約束條件。接下來我們將從一個實際問題出發(fā)，來談?wù)勔韵略O(shè)計原則改如何運用。
我們的第一個問題是目標—我們實現(xiàn)目標的動力。舉個例子來說：
「目標：“我們需要找到一雙新的，合腳的，確定顏色和尺寸的跑鞋?！?/strong>
下一階段是計劃如何通過發(fā)現(xiàn)和評估我們的選擇來實現(xiàn)我們的目標。
假設(shè)我們選擇了耐克網(wǎng)站作為首選購物平臺。當我們初次進入網(wǎng)站，我們會看到很多不同的選項。
「發(fā)現(xiàn)模塊」提升了選項的可見性。清晰的導(dǎo)航，突出的焦點和自然的視覺層次使其更容易發(fā)現(xiàn)和理解。
清晰的導(dǎo)航有助于我們輕松找到并了解網(wǎng)站的主要產(chǎn)品。但是，移動端的體驗實際體驗效果并不佳，因為漢堡導(dǎo)航很容易將信息遮蓋。
耐克網(wǎng)站的產(chǎn)品詳細信息頁面通過清晰的導(dǎo)航，突出的焦點和自然的視覺層次結(jié)構(gòu)選項更容易被識別。不過，您可能會爭辯說，這些復(fù)雜的信息干擾到 “添加到購物袋”的這一關(guān)鍵行為。
焦點是吸引人視覺的主要區(qū)域，其中包括引人入勝的圖像和視頻，描述性標題以及清晰的號召性用語，例如“了解更多”和“添加到購物袋”。
以上所有組件均作為視覺層次結(jié)構(gòu)的一部分進行排列，以幫助我們按照接收到的重要信息的順序進行瀏覽。它們的位置也符合最佳的閱讀模式——例如，導(dǎo)航欄，過濾器控件和跑鞋結(jié)果分別組織在類別頁面的頂部，左側(cè)和右側(cè)。
其他設(shè)計原則（包括概念模型，示能，意符，映射和約束）也可以幫助我們弄清楚如何使用該網(wǎng)站。
許多網(wǎng)站功能中都存在概念模型，尤其是用于對結(jié)果進行排序和過濾的導(dǎo)航和控件。這些熟悉的設(shè)計模式告訴我們它是如何使用的。例如，我們知道通過過濾器將有助于優(yōu)化篩選結(jié)果。
功能可供性應(yīng)用于各種網(wǎng)站組件，例如按鈕，選擇框和手風琴導(dǎo)航，使我們可以了解如何控制和使用它們。但是，某些能力依賴于意符來闡明預(yù)期的操作。
意符被廣泛用于傳達應(yīng)在何處執(zhí)行操作，尤其是示能較弱的扁平化按鈕。一個簡單的描述（例如“查看更多”或“添加到購物袋”）足以告訴我們預(yù)期的操作。
映射向我們顯示了對象之間存在關(guān)系的位置，例如產(chǎn)品詳細信息頁面上，當我們選擇適合的款式和顏色的選項時，我們會看到可用的尺寸和價格會與之對應(yīng)產(chǎn)生變化。
約束限制了可以使用信息的位置，地點和時間，以減少雜亂并降低認知負擔。例如，導(dǎo)航最初僅向我們一級導(dǎo)航。
購買工具為我們提供了可能選擇的選項序列的概念模型。禁用狀態(tài)還用于將我們的操作限制在只能選擇有庫存的商品的范圍內(nèi)。
了解了如何使用網(wǎng)站后，現(xiàn)在我們可以指定要執(zhí)行的一系列操作。讓我們在網(wǎng)站上繼續(xù)進行以下活動：
「行動：購買時需選擇產(chǎn)品規(guī)格，包括合身性，顏色，尺寸，然后將其添加至購物籃?！?/strong>
概念模型、可發(fā)現(xiàn)性、映射、約束、示能和意符可以幫助我們確定操作順序：選擇合適的→選擇顏色→選擇尺寸→選擇添加到購物袋。
在某些情況下，某些選項（例如大小和顏色）可能缺貨。如果產(chǎn)品不可用，則禁用按鈕狀表達了操作行為的限制，只能選擇有庫存的商品，這是非常必要的。
不同的控件交流其功能，用法以及如何向我們展示其效果
現(xiàn)在，我們需要實際執(zhí)行我們選擇的一系列動作。示能，意符和映射將幫助我們執(zhí)行操作。例如，按鈕的感知外觀使我們想要按下按鈕，標簽告訴我們控件的功能，而映射使我們能夠看到剛剛操作的效果。
一個簡單的確認消息會通知用戶發(fā)生了什么，并提供一些其他選項的可見性
一旦執(zhí)行了選擇的一系列動作，我們就需要收到有關(guān)請求的信息，這就是反饋。
購物車確認消息為我們提供了有關(guān)所選跑鞋的有用反饋信息，包括名稱，顏色，尺寸，價格和數(shù)量。同樣還提供了成功的信息和一些其他選項。
看到這些變化之后，我們現(xiàn)在需要將其轉(zhuǎn)化為有意義的東西。反饋對于再一次為我們提供足夠的信息來確定我們的行動結(jié)果至關(guān)重要。成功信息——“已添加到購物袋”和綠色的勾號圖標說明發(fā)生了什么，其他選項表示我們現(xiàn)在已選擇購買這雙跑步鞋。
每個粉絲都希望看到的確認消息–真是令人高興的時刻！
最后一個問題詢問了結(jié)果是否符合我們的期望。我們可以將結(jié)果與目標進行比較。
到目前為止，我們已經(jīng)使用了所有七個設(shè)計原則來確定問題的答案?，F(xiàn)在，反饋將能夠確認我們的行為是否帶來了成功的結(jié)果。如果結(jié)果不是我們期望的，那么我們至少需要了解發(fā)生了什么以及下一步該怎么做。
反饋可以誘發(fā)積極和消極的情緒。如果結(jié)果不是我們所期望的（例如錯誤），則它們可能會引起混亂甚至憤怒的感覺。但是，當我們實際執(zhí)行的動作可以實現(xiàn)我們的目標時，我們將感到非常喜悅！
例如，在耐克移動應(yīng)用程序 SNEAKRS 中，客戶可以參加抽獎來購買限量版鞋。緊張的 30 分鐘倒計時結(jié)束后，獲勝者會收到一條特別的消息，確認他們的抽獎結(jié)果，這為他們的經(jīng)歷增添了很多樂趣。
「結(jié)果：看到此消息給我?guī)砹苏嬲钊藵M意的體驗——幸運的贏家?！?/strong>
PART 02
應(yīng)用設(shè)計原則進行 UX 設(shè)計是非常表層的。當人們在使用該產(chǎn)品時，我們需要了解他們的想法，感受和看法。他們可以使用嗎？他們覺得有用嗎？他們會再次使用它嗎？
比設(shè)計原則更重要的是與真實用戶進行測試，以了解他們對設(shè)計的行為和態(tài)度。然后，可以利用豐富的用戶見解來改進產(chǎn)品。
我們?nèi)裟軌蛟皆缜以筋l繁的測試我們的想法，就能夠越早的迭代產(chǎn)品，以更快的速度滿足用戶需求以及幫助實現(xiàn)業(yè)務(wù)目標。以下是一些流行的研究方法的概述：
遠程用戶測試是非?？焖倥c靈活的，并且非常適合于早期經(jīng)常需要設(shè)計驗證的情況。參與者使用屏幕錄制軟件收集有關(guān)設(shè)計的反饋。遠程用戶測試為獲得更多的洞見提供了便利。
面對面用戶測試，就是我們常說的線下用戶訪談，這種測試要適量，通常會有一個主持人。在研究期間，主持人可能會根據(jù)問題提出任務(wù)或新的活動。這種類型的研究比較花費精力和時間，但與大多數(shù)方法相比，它可以為您提供更有價值的見解。
游擊隊測試是指調(diào)研團隊無拘無束地采訪隨機人群。您可以選擇某些地點來確定適合您所測試設(shè)計的受眾特征。迄今為止，這種研究方法是比較節(jié)省成本的，盡管您可能需要考慮向參與者提供少量獎勵，以感謝他們的時間和努力。
定量測試涉及對大量用戶進行研究。典型的測試包括卡片排序，樹形測試，點擊測試和超時測試。這些研究可能無法為您提供用戶做出某些決定的原因的答案，但是它們可以幫助確定點擊次數(shù)，思維模型和完成任務(wù)比率的時間。
PART 03
一旦用戶測試有了結(jié)果，就可以對結(jié)果進行了。這可能需要一個漫長的過程，即整合意見，將見解歸類并提出新的改進建議。
研究建議可以幫助確定要解決的可用性問題和要關(guān)注的痛點，以及增強整體用戶體驗的機會。這就是 UX 流程的迭代。使用相同的原理進行設(shè)計優(yōu)化，然后進行測試，直到產(chǎn)品滿足用戶需求為止。
諾曼的原則可以幫助我們加深對用戶交互的理解，包括人們提出的問題類型、他們的認知過程以及情感水平。如耐克網(wǎng)站的案例研究所示，這七個基本設(shè)計原則可以幫助我們確定問題的答案，并找到影響積極情緒（如愉悅感）的方法。
但是，設(shè)計原則實際上只是UX過程的開始。為了確定產(chǎn)品的體驗質(zhì)量，我們需要與真實的用戶一起測試設(shè)計，然后使用洞察力進行必要的迭代。
以上內(nèi)容源于 Don Norman 的暢銷書《日常事物的設(shè)計》。它是 30 多年前編寫的，但至今仍然對設(shè)計行業(yè)有著深遠的影響。當然，還有更多的原則可以采用，但是 Norman 的設(shè)計哲學可以作為我們在設(shè)計工作中遵循的 UX 基礎(chǔ)。
文章來源：站酷 作者：設(shè)計情報局
藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.b186.net