中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

隨著單頁式設(shè)計(jì)和移動(dòng)端的興起，網(wǎng)頁中的交互設(shè)計(jì)越來越重要了。為了打造流暢而可靠的用戶體驗(yàn)，你需要對(duì)交互設(shè)計(jì)有更加深入的了解。

正如同我們?cè)?a target="_blank">《交互設(shè)計(jì)最佳實(shí)踐（卷1）》中所述，要做好交互設(shè)計(jì)，需要對(duì)多個(gè)學(xué)科有著深入的了解和熟練的掌控，這也是非常符合邏輯的——你要試圖讓一系列事物所構(gòu)成的系統(tǒng)令人感到友好，易于學(xué)習(xí)并且非常實(shí)用，這并不是一件簡單易行的事情。

所以，讓我們從最基礎(chǔ)的交互設(shè)計(jì)的概念開始，深入了解核心設(shè)計(jì)原則，并且借助五步設(shè)計(jì)流程，更好地完成交互設(shè)計(jì)。

真正優(yōu)秀的交互設(shè)計(jì)，是由人情紐帶所驅(qū)動(dòng)的。那么問題來了，人的情緒紐帶又是如何轉(zhuǎn)化成數(shù)字化的界面和接口的呢？答案的當(dāng)然是存在的，但是并非是由非黑即白的是與否、對(duì)與錯(cuò)所構(gòu)成。根據(jù)我們的經(jīng)驗(yàn)，真正成功的交互設(shè)計(jì)立足于基本用戶體驗(yàn)設(shè)計(jì)的完美執(zhí)行。

看起來不像是一個(gè)答案？沒事，我們慢慢看下去。

1、結(jié)果驅(qū)動(dòng)式設(shè)計(jì)

即使不親自參與用戶研究，但是你還是得知道如何對(duì)設(shè)計(jì)構(gòu)建成熟的認(rèn)知。

我們?cè)凇?a href="http://www.aharts.cn/ucd/192080.html" target="_blank">用戶體驗(yàn)設(shè)計(jì)師必備的4種UX文檔》這篇文章中對(duì)于交互設(shè)計(jì)師必須知道的四種UX文檔有了深入的介紹，這些文檔——或者說過程，可以幫你構(gòu)建起有血有肉的“用戶”，對(duì)具體的產(chǎn)品流程有更真實(shí)的還原：

1、用戶角色（Persona）：Persona文檔（控制在2~5個(gè)）通常需要包含你的目標(biāo)用戶。作為Persona中的虛構(gòu)的角色，它的屬性和特征是 基于產(chǎn)品研究和用戶定位來設(shè)定的，用作后續(xù)設(shè)計(jì)過程中所面對(duì)的“理想用戶”，本質(zhì)上，它就是一個(gè)占位符。作為人物設(shè)定，其中會(huì)包含個(gè)人信息，遠(yuǎn)不止于年齡 和收入信息這么簡單。Persona 文檔的目標(biāo)是利用角色來驗(yàn)證你的目標(biāo)用戶是如何感受如何看待你的設(shè)計(jì)的。

2、移情地圖（Empathy Map）：它像是一個(gè)輕量級(jí)的Persona文檔，在資源短缺時(shí)間緊的狀況下，可以使用這個(gè)文檔。Empathy Map 將 Persona 中的角色的個(gè)性和性格部分移除了，更加專注于用戶在特定情況下的感受。

3、用戶劇本（User Scenario）：如果Persona 是幫你設(shè)計(jì)了一個(gè)故事中的角色，那么User Scenario 就是故事的劇本。用戶劇本通常是圍繞著一個(gè)特定目標(biāo)來設(shè)計(jì)的。比如說，第二天是母親節(jié)，要為母親預(yù)訂一份禮物。目標(biāo)很明確，要達(dá)成目標(biāo)，用戶需要點(diǎn)擊幾次 按鈕，走哪些流程，需要多長時(shí)間，如何在過程中融入情感，貫穿始終。對(duì)整個(gè)用戶流程有了預(yù)判之后，設(shè)計(jì)師對(duì)于UI和UX的設(shè)計(jì)就有了把握。

4、用戶地圖（Customer Journey Map）：這份文檔同上門的用戶劇本很像，但是它比起前者跨度更大，貫穿體驗(yàn)設(shè)計(jì)始終。設(shè)計(jì)人員可以對(duì)產(chǎn)品的背景有更深入的了解才能更好地設(shè)計(jì)，而產(chǎn)品投 入使用之后也不是最終結(jié)束，這也是跨度如此之大的原因所在。用戶旅圖將會(huì)涵蓋角色信息、用戶劇本和移情地圖的全部信息。這么設(shè)定并不是要讓用戶旅圖成為一 個(gè)大雜燴，而是要將用戶性格和用戶流程、交互過程結(jié)合到一起來看待問題，每個(gè)階段不同環(huán)節(jié)，都牽涉到不同的情緒和情感。

2、可用性設(shè)計(jì)

確?？捎眯允亲畹拖薅鹊脑O(shè)計(jì)。如果你的用戶都無法正常使用產(chǎn)品，就更談不上吸引他們了。看看下面的 EventBrite 的座位設(shè)計(jì)吧。

這個(gè)在線的APP允許活動(dòng)的組織者從活動(dòng)創(chuàng)建之初就可以保留特定的座位，整個(gè)流程保留了大量的細(xì)節(jié)（特定的行、列，是否靠近舞池等），設(shè)計(jì)者將多個(gè)步驟、多個(gè)流程整合到一個(gè)流程當(dāng)中。

就像EventBrite 這樣，復(fù)雜的系統(tǒng)尤其要保證它的易用性，整個(gè)流程要流暢，讓用戶感到不費(fèi)吹灰之力就能搞定。在探索系統(tǒng)上耗費(fèi)的時(shí)間越短，用戶就越能做好手頭真正重要的事情。

3、可供性設(shè)計(jì)和能指

可供性設(shè)計(jì)，在我們之前的文章中曾經(jīng)解釋過：

Affordance 是 James J. Gibson 造出來的一個(gè)詞，Gibson 是20世紀(jì)最重要的認(rèn)知心理學(xué)家之一，他的生態(tài)學(xué)式視知覺論和直接知覺為認(rèn)知心理學(xué)開辟了新的領(lǐng)地。affordance 是 afford (提供、給予、承擔(dān))的名詞形式，環(huán)境的 affordance 是指這個(gè)環(huán)境可提供給動(dòng)物的屬性，無論是好的還是壞的，所以我認(rèn)為“可供性”是一個(gè)合適的翻譯。Gibson 用來解釋 affordance 的例子是這樣的：如果一塊地表面接近水平（而不是傾斜的），接近平整的（而不是凸起或凹陷的），以及充分延伸的（與動(dòng)物的尺寸相關(guān)），如果地表面的物質(zhì)是 堅(jiān)硬的（與動(dòng)物的重量相關(guān)），我們可稱它為基底、場地或地面，它是可以站上去的（stan-on-able），可讓四足或兩足動(dòng)物保持豎直姿勢，它是可以 行走（walk-on-able）和跑動(dòng)（run-over-able）的，它不像水表面或沼澤表面之于一定重量的動(dòng)物那樣是可陷入的（sink- into-able）。列出的四項(xiàng)屬性——水平、平整、延伸和堅(jiān)硬——它們是這個(gè)表面的物理屬性，如果以物理中使用的度量衡去衡量它們的話，但是對(duì)于特定 動(dòng)物的支撐可供性，它們必須與動(dòng)物關(guān)聯(lián)上才可以被衡量，它們不是抽象的物理屬性，它們是為所指動(dòng)物特定的，與動(dòng)物的姿勢和行為相關(guān)，所以 affordance 不能像我們?cè)谖锢碇心菢觼砗饬俊?/p>

我們?cè)谔接懡换ピO(shè)計(jì)的可供性之時(shí)，認(rèn)為一個(gè)功能應(yīng)該能為自己發(fā)聲，通過合理的方式聲明它本身的用處（道路可供人步行）。

能指（Signifiers）是個(gè)語言學(xué)概念：

能指和所指是語言學(xué)上的一對(duì)概念，能指意為語言文字的聲音，形象；所指則是語言的意義本身。按照語言學(xué)家或者哲學(xué)家們的劃分，人們?cè)噲D通過語言表達(dá)出來的東西叫”所指”，而語言實(shí)際傳達(dá)出來的東西叫”能指”。

簡單說來，可供性設(shè)計(jì)所傳達(dá)出來的東西，就是它的能指。（地面是平的表明人可以用腳在上面走路）

沒有能指，用戶也就無法真正察覺到其中的可供性設(shè)計(jì)。

在上面的案例中，你能看到按鈕設(shè)計(jì)的進(jìn)化和發(fā)展。第一個(gè)按鈕僅僅只是單詞，沒有能指，而第三個(gè)按鈕加上了圓角邊框和陰影層次，反映出它作為“按鈕”的特征。

能指同樣可以以比喻或者暗喻的形式存在，因?yàn)槿藗冃枰靼姿麄優(yōu)槭裁匆@個(gè)對(duì)象進(jìn)行互動(dòng)，而不止是知道他們可以。正如同上門iPhone 屏幕底部的托盤，你能看到圓角邊框的按鈕，從而了解我們可以按它，其中的電話、郵件和音符等符號(hào)，則以特定的形象暗示用戶，點(diǎn)擊按鈕可以達(dá)到什么樣的目 的，做什么樣的事情。

4、可學(xué)習(xí)性

在理想情況下，用戶對(duì)任何功能操作過一次之后，都會(huì)記住如何使用，然而現(xiàn)實(shí)情況并非如此。直覺化的操作和便于熟悉的設(shè)計(jì)必須貫徹到每個(gè)界面當(dāng)中。

成功的交互設(shè)計(jì)，應(yīng)該充分借助一致性與可預(yù)測性的設(shè)計(jì)，來降低整體的復(fù)雜度。舉個(gè)例子，有的頁面值得保留，鏈接盡量在新頁面中打開；而有的頁面涉及到特定的操作和流程，不能在新頁面中打開，防止用戶重新定位。

一致的設(shè)計(jì)確保了設(shè)計(jì)的可預(yù)測性，也提高了整體的可學(xué)習(xí)性。

UI模式是提升交互可學(xué)習(xí)性的常見戰(zhàn)術(shù)。許多網(wǎng)站和APP都已經(jīng)開始使用UI模式了，模式化的設(shè)計(jì)確保了一致性，也便于用戶熟悉，同時(shí)也可以在此基礎(chǔ)上添加更多大量的創(chuàng)意設(shè)計(jì)。

面包屑就是網(wǎng)頁設(shè)計(jì)中最常見的一種UI模式，它引導(dǎo)用戶更為有序地瀏覽網(wǎng)頁。不論你在網(wǎng)站哪個(gè)地方，面包屑會(huì)直觀告訴你瀏覽路徑。這種熟悉化的設(shè)計(jì)提升了網(wǎng)站的可學(xué)習(xí)性。具備可學(xué)習(xí)性的網(wǎng)站會(huì)鼓勵(lì)用戶使用它們，自然而然地提高了可用性。

5、反饋和響應(yīng)時(shí)間

反饋是交互的心臟。每一次交互都是用戶產(chǎn)品之間的對(duì)話，所以你的產(chǎn)品最好保持著友好、有趣且有用的特性。

無論是精心設(shè)計(jì)的動(dòng)效，有趣而生動(dòng)的微互動(dòng)，還是一個(gè)簡單的嘟嘟聲，你的產(chǎn)品必須同用戶進(jìn)行溝通，給予反饋，不論這個(gè)操作是否完成。

在下面的案例中，Hootsuite 通過貓頭鷹來展現(xiàn)用戶長時(shí)間不操作而“進(jìn)入睡眠狀態(tài)”，這是符合邏輯且非常有趣的，這種反饋將停止更新的負(fù)面狀態(tài)設(shè)計(jì)得有趣而好玩。

另外一個(gè)給用戶反饋的重要因素是響應(yīng)時(shí)間。通常給予用戶最好的反饋就是盡快、盡早、立刻給予反饋。絕大多數(shù)時(shí)候，延時(shí)反饋會(huì)讓用戶感到非常煩躁的，除了極少數(shù)特殊的情況。

提升交互設(shè)計(jì)的五步流程

了解了交互設(shè)計(jì)的五大支柱之后，接下來我們來介紹提升交互設(shè)計(jì)的方法。

著名的交互設(shè)計(jì)師 Stephen P. Anderson 曾經(jīng)說過，如果有人假裝是你的界面，當(dāng)你同他進(jìn)行交互的時(shí)候，會(huì)大開眼界的。任何一個(gè)尷尬的反饋都會(huì)被放大，你會(huì)在這個(gè)過程中學(xué)會(huì)規(guī)避反人類的交互，當(dāng)你完成整個(gè)過程，就可以開始編寫交互的腳本，調(diào)整結(jié)果了。

接下來，我們說說具體的流程：

1、角色扮演和互動(dòng)：找兩個(gè)人來，一個(gè)扮演界面，另外一個(gè)記錄筆記。為扮演界面的人手持一個(gè)瀏覽器窗口紙板，并且同時(shí)通過投影儀投射出界面。你扮演 用戶，同“界面”進(jìn)行對(duì)話，你闡述并解釋用戶的目標(biāo)，而“界面”則僅限于標(biāo)簽、菜單和其他的UI元素來為你的操作進(jìn)行“反饋”。

2、勾勒出敘事線索：記錄者記錄每一個(gè)步驟的細(xì)節(jié)，包括任務(wù)和情緒。完成這個(gè)步驟，可以借助User Scenarios文檔來完成。

3、簡化步驟：有時(shí)候用戶要達(dá)成目標(biāo)需要經(jīng)歷許多步驟（比如買票），然而在制作原型的時(shí)候，就應(yīng)該將一個(gè)復(fù)雜的目標(biāo)肢解成為一系列簡單的步驟（比如詢問目的地，然后設(shè)定行程）。舉個(gè)例子，維珍航空的階梯型設(shè)計(jì)，就是為了讓預(yù)訂過程更簡單易行。

4、控制用戶選擇：這可能是最艱難的一步，但是你必須盡量減少用戶的操作。時(shí)刻審問自己，這個(gè)步驟當(dāng)中的每一個(gè)選項(xiàng)是不是非要不可的，如果不是，將它分離到其他的非關(guān)鍵位置。

5、注意微時(shí)刻：Micromoment，這是一個(gè)新的合成詞，指的是用戶在與界面進(jìn)行交互的關(guān)鍵時(shí)刻，這時(shí)候用戶可能會(huì)猶豫、激進(jìn)或者突然停止， 我們姑且將其翻譯為微時(shí)刻?；叵虢巧缪莸沫h(huán)節(jié)，你會(huì)記得那些猶豫、忐忑的時(shí)刻。為了讓交互更清晰，你應(yīng)該充分運(yùn)用每一個(gè)細(xì)節(jié)上的文案選取，結(jié)合可靠的 UI模式，引導(dǎo)用戶在這些微時(shí)刻作出對(duì)的選擇。

如果不注意細(xì)節(jié)魔術(shù)師的魔術(shù)會(huì)失敗，同樣的道理，糟糕的交互會(huì)毀掉整個(gè)用戶體驗(yàn)。上面的流程可以幫你讓交互設(shè)計(jì)成為界面和用戶溝通的橋梁，而非單純地讓界面“動(dòng)起來”。

結(jié)語

交互設(shè)計(jì)并不只牽涉界面行為，它是一項(xiàng)基于用戶行為的適應(yīng)性技術(shù)。用戶在功能和情感上喜歡什么，期待什么，這是關(guān)鍵。但是也正是基于這樣的限制，你 所設(shè)計(jì)的產(chǎn)品應(yīng)當(dāng)是針對(duì)這些期望和需求而做的。所以，最好的交互設(shè)計(jì)大概是這個(gè)樣子：對(duì)于用戶響應(yīng)迅速，不會(huì)夾雜太多的思想，就如同一個(gè)完美的魔術(shù)，流 暢，值得期待，又符合邏輯。

譯文來自：優(yōu)設(shè)

原文地址：thenextweb

優(yōu)設(shè)譯者：@陳子木