很多人在這個(gè)信息爆炸的移動時(shí)代，更想看到一些所謂的「干貨」，干貨到底是什么，可以直接拿來上手的是干貨嗎？還是需要你經(jīng)過判斷和思維轉(zhuǎn)化再處理得到的屬于自己的啟發(fā)？利用本篇交互模式大家可以更好的思考，歸納。

一、為什么學(xué)習(xí)交互設(shè)計(jì)模式？

在 dyj 時(shí)期有一句口號是：人有多大膽，地有多大產(chǎn)，形容的是人想法有多大，那地的產(chǎn)量就會多大。雖然這是一種錯(cuò)誤的思想，但是我們可以換個(gè)角度理解：你腦中的知識和經(jīng)驗(yàn)越多，你就能在更多的場景中運(yùn)用自如。所以我們需要積累我們腦中的知識池子——庫。當(dāng)我們有了一定的思維方式之后，我們需要依靠腦中的知識、經(jīng)驗(yàn)來幫助我們做專業(yè)的事情。

如你想成為專業(yè)的木匠，那你一定要知道不同的手法和不同的工具能夠刻畫成千上萬種不同的紋路、物件，需要日積月累。如果你要成為專業(yè)的倫敦「的哥」，那你要完全熟悉，市中心半徑2.5公里范圍內(nèi)，超過2500條街區(qū)的道路，能夠到達(dá)客戶想要去的任何一個(gè)在此范圍內(nèi)的角落。如果你要成為資深的設(shè)計(jì)師，那你就要知道非常多的模式和形式，一般我們稱交互模式，和視覺形式。只有當(dāng)你積累足夠多不同的案例經(jīng)驗(yàn)之后，你才能夠成為專業(yè)的行家。二、什么是交互設(shè)計(jì)模式

Alan Cooper 在 about face4 中是這么解釋的：交互設(shè)計(jì)模式是捕捉有效設(shè)計(jì)方案，并將其應(yīng)用于類似問題的方法，嘗試將設(shè)計(jì)理論形式化。強(qiáng)調(diào)的是設(shè)計(jì)問題的解決方法。

我們在日常使用產(chǎn)品的過程中經(jīng)常會接觸到一些基礎(chǔ)的單元，我們稱之為交互單元，研究過開發(fā)者指南的朋友肯定知道，iOS 和安卓會一些樣式有區(qū)別，但是功能相同的交互單元，比如開關(guān)、選擇器、對話框等。

也有同樣的手勢操作規(guī)范：點(diǎn)擊、滑動、長按等，由這些交互單元組合成更大的交互單元。

比如點(diǎn)擊某個(gè)圖標(biāo)，頁面底部滑出一個(gè)組件 Action Sheet（動作菜單/動作面板/行動列表），按鈕是基本單元，而 Action Sheet 則是一個(gè)復(fù)合單元。這些許許多多的交互單元通過不同的形式和結(jié)構(gòu)組成了更多不同的復(fù)合單元，以便于滿足不同的用戶、任務(wù)、需求、情境、操作以及反饋。

三、交互設(shè)計(jì)模式如何使用

在使用之前，我們先思考以下幾個(gè)問題：

我的設(shè)計(jì)背景是什么，選擇那種交互設(shè)計(jì)模式適合當(dāng)前場景、任務(wù)或者流程？這個(gè)交互設(shè)計(jì)模式有幾種不同的形式，能承載哪些不同的內(nèi)容？該交互模式的局限性是什么？該交互模式是否在產(chǎn)品其他地方使用過？在什么情境下？需要做相應(yīng)調(diào)整嗎？

以下進(jìn)行三個(gè)案例進(jìn)行分析。

案例1：Action Sheet

移動設(shè)備的屏幕可以說是寸土寸金，所以 action sheet 為了承載更多內(nèi)容，并減少對用戶的干擾，它呈現(xiàn)了與當(dāng)前頁面相關(guān)的部分操作和內(nèi)容。用戶能夠通過點(diǎn)擊按鈕喚出該控件。一般選項(xiàng)較少時(shí)，我們選擇列表形式，選項(xiàng)較多時(shí)為了避免列表滾動造成的誤操作建議選擇宮格形式。要注意的是 action sheet 這個(gè)組件只可支持點(diǎn)擊立即跳轉(zhuǎn)的交互，并不支持輸入，也不能用在表單中。它能防止用戶誤操作。其實(shí)安卓也有類似的控件，但是他沒有取消按鈕，因?yàn)榘沧坑形锢矸祷匕粹o，同時(shí) iOS 有些應(yīng)用在使用的過程中，也沒有將取消按鈕放在底部，甚至有些在右上角放置了一個(gè)關(guān)閉按鈕。它經(jīng)常被各種軟件進(jìn)行自定義控件設(shè)計(jì)，但是該交互模式無法承載太多內(nèi)容，因?yàn)楸旧砭褪菫榱俗層脩艨焖賹Ξ?dāng)前頁面進(jìn)行額外的操作，所賦予作用。

第一張和第二張界面長得非常相似的控件，都是通過右上角一個(gè)功能圖標(biāo)通過點(diǎn)擊行為后觸發(fā)的。那么為什么要把那么多信息都集成到一個(gè)入口，是因?yàn)槿绻畔⒃趩蝹€(gè)頁面承載過多會導(dǎo)致許多問題：目標(biāo)不明確，用戶決策成本高，頁面結(jié)構(gòu)混亂等等。所以為了解決該問題，這里應(yīng)運(yùn)而生的使用了該交互模式。

那么問題又來了，這樣的交互模式針對的問題太寬泛，難道什么東西都可以往里塞嗎？我的集成入口只能放在固定的位置嗎？為什么有的有取消按鈕，有的卻沒有呢等等。

所以交互設(shè)計(jì)模式也會出現(xiàn)這些情況：

相同的功能圖標(biāo)可能發(fā)生不同的交互行為和信息展示。即便不同的功能圖標(biāo)，承載的信息也可能是相似的。圖標(biāo)的位置、形式以及所觸發(fā)的內(nèi)容是由目標(biāo)所決定的。根據(jù)內(nèi)容的長度可以考慮隱藏一部分功能，例如取消，用戶心智已可以理解點(diǎn)擊空白取消。

交互模式需要在相應(yīng)的場景或者情境中去，脫離情境的交互模式是不客觀的。你會發(fā)現(xiàn)我們常說產(chǎn)品有不同的性格和風(fēng)格，那么決定產(chǎn)品的性格基本上是由表現(xiàn)形式和交互模式來共同決定的，交互模式無法像樂高那樣固定的拼湊，而更像是橡皮泥，在一定的規(guī)則下能夠進(jìn)行多樣的使用。

案例3：表單

我們通常將左側(cè)的下拉表單叫做為「下拉菜單」，那么我們所知道的是：

下拉菜單也是表單的一種。單行表單可以進(jìn)行拼接，成為一個(gè)列表。單行表單可能會有幾種形式：只有左側(cè)有文字；左側(cè)有文字右側(cè)有說明還有箭頭；左側(cè)有標(biāo)題右側(cè)只有箭頭 ；當(dāng)然表單還可以放置 Picker、Segment Control、Radio Button 等控件，還可以有雙行表單等。表單不僅僅在單個(gè)page上靜態(tài)存在，還可以通過交互行為動態(tài)存在。這樣形式的單行表單不能夠支持左滑刪除。帶箭頭的表單可以進(jìn)行頁面跳轉(zhuǎn)，但是不能展開此表單。下拉菜單沒有箭頭，但我們明顯知道，當(dāng)我進(jìn)行點(diǎn)擊后，頁面即將執(zhí)行對此條件進(jìn)行篩選的結(jié)果展示。如果是一個(gè)好友列表那么安卓長按可以刪除，iOS 左滑可以刪除。

以上是簡單對上圖中的交互模式進(jìn)行一個(gè)分析，兩個(gè)界面中的信息，在形式上非常接近，但是不同的信息組合和結(jié)構(gòu)，產(chǎn)生了不同的產(chǎn)品行為和用戶預(yù)期，為了解決不同的問題而出現(xiàn)的不同的模式。如果我們對這些模式不夠了解，也就無法針對不同的目標(biāo)作出相應(yīng)的反饋。

我知道你生病了，但是我不知道你得了哪種病，我沒辦法醫(yī)治你。

我知道你得了哪種病，但是我不知道給你吃什么藥能讓你康復(fù)。

總結(jié)

越來越多的交互設(shè)計(jì)模式應(yīng)運(yùn)而生，我們需要不斷的去收集，形成自己的經(jīng)驗(yàn)。在不同情境下對交互模式進(jìn)行分類歸納，等需要使用的時(shí)候即使不能快速應(yīng)對也能夠從中找到或者衍生出一些符合當(dāng)前情境的交互設(shè)計(jì)模式。

名稱欄目：創(chuàng)新互聯(lián)經(jīng)驗(yàn)，一起來分析交互設(shè)計(jì)對視覺設(shè)計(jì)的的重要性
網(wǎng)站URL：http://aaarwkj.com/news39/251489.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、云服務(wù)器、小程序開發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)