2021-4-16 ui設(shè)計(jì)分享達(dá)人
“作為用戶體驗(yàn)設(shè)計(jì)師,我們的使命之一就是如何以最正確,最有效的方式將產(chǎn)品意圖傳遞給用戶?!边@也是行業(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)開始,然后通過(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)的可見性。清晰的導(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é)果分別組織在類別頁(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)闡明預(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)買工具為我們提供了可能選擇的選項(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)買時(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ì)通知用戶發(fā)生了什么,并提供一些其他選項(xiàng)的可見性
一旦執(zhí)行了選擇的一系列動(dòng)作,我們就需要收到有關(guān)請(qǐng)求的信息,這就是反饋。
購(gòu)物車確認(rèn)消息為我們提供了有關(guān)所選跑鞋的有用反饋信息,包括名稱,顏色,尺寸,價(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)買這雙跑步鞋。
每個(gè)粉絲都希望看到的確認(rèn)消息–真是令人高興的時(shí)刻!
最后一個(gè)問(wè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 中,客戶可以參加抽獎(jiǎng)來(lái)購(gòu)買限量版鞋。緊張的 30 分鐘倒計(jì)時(shí)結(jié)束后,獲勝者會(huì)收到一條特別的消息,確認(rèn)他們的抽獎(jiǎng)結(jié)果,這為他們的經(jīng)歷增添了很多樂(lè)趣。
「結(jié)果:看到此消息給我?guī)?lái)了真正令人滿意的體驗(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í)用戶進(jìn)行測(cè)試,以了解他們對(duì)設(shè)計(jì)的行為和態(tài)度。然后,可以利用豐富的用戶見解來(lái)改進(jìn)產(chǎn)品。
我們?nèi)裟軌蛟皆缜以筋l繁的測(cè)試我們的想法,就能夠越早的迭代產(chǎn)品,以更快的速度滿足用戶需求以及幫助實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。以下是一些流行的研究方法的概述:
遠(yuǎn)程用戶測(cè)試是非常快速與靈活的,并且非常適合于早期經(jīng)常需要設(shè)計(jì)驗(yàn)證的情況。參與者使用屏幕錄制軟件收集有關(guān)設(shè)計(jì)的反饋。遠(yuǎn)程用戶測(cè)試為獲得更多的洞見提供了便利。
面對(duì)面用戶測(cè)試,就是我們常說(shuō)的線下用戶訪談,這種測(cè)試要適量,通常會(huì)有一個(gè)主持人。在研究期間,主持人可能會(huì)根據(jù)問(wèn)題提出任務(wù)或新的活動(dòng)。這種類型的研究比較花費(fèi)精力和時(shí)間,但與大多數(shù)方法相比,它可以為您提供更有價(jià)值的見解。
游擊隊(duì)測(cè)試是指調(diào)研團(tuán)隊(duì)無(wú)拘無(wú)束地采訪隨機(jī)人群。您可以選擇某些地點(diǎn)來(lái)確定適合您所測(cè)試設(shè)計(jì)的受眾特征。迄今為止,這種研究方法是比較節(jié)省成本的,盡管您可能需要考慮向參與者提供少量獎(jiǎng)勵(lì),以感謝他們的時(shí)間和努力。
定量測(cè)試涉及對(duì)大量用戶進(jìn)行研究。典型的測(cè)試包括卡片排序,樹形測(cè)試,點(diǎn)擊測(cè)試和超時(shí)測(cè)試。這些研究可能無(wú)法為您提供用戶做出某些決定的原因的答案,但是它們可以幫助確定點(diǎn)擊次數(shù),思維模型和完成任務(wù)比率的時(shí)間。
PART 03
一旦用戶測(cè)試有了結(jié)果,就可以對(duì)結(jié)果進(jìn)行了。這可能需要一個(gè)漫長(zhǎng)的過(guò)程,即整合意見,將見解歸類并提出新的改進(jìn)建議。
研究建議可以幫助確定要解決的可用性問(wèn)題和要關(guān)注的痛點(diǎn),以及增強(qiáng)整體用戶體驗(yàn)的機(jī)會(huì)。這就是 UX 流程的迭代。使用相同的原理進(jìn)行設(shè)計(jì)優(yōu)化,然后進(jìn)行測(cè)試,直到產(chǎn)品滿足用戶需求為止。
諾曼的原則可以幫助我們加深對(duì)用戶交互的理解,包括人們提出的問(wèn)題類型、他們的認(rèn)知過(guò)程以及情感水平。如耐克網(wǎng)站的案例研究所示,這七個(gè)基本設(shè)計(jì)原則可以幫助我們確定問(wèn)題的答案,并找到影響積極情緒(如愉悅感)的方法。
但是,設(shè)計(jì)原則實(shí)際上只是UX過(guò)程的開始。為了確定產(chǎn)品的體驗(yàn)質(zhì)量,我們需要與真實(shí)的用戶一起測(cè)試設(shè)計(jì),然后使用洞察力進(jìn)行必要的迭代。
以上內(nèi)容源于 Don Norman 的暢銷書《日常事物的設(shè)計(jì)》。它是 30 多年前編寫的,但至今仍然對(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com