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