創(chuàng)新互聯(lián)經(jīng)驗，一起來分析交互設(shè)計對視覺設(shè)計的的重要性

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

一、為什么學習交互設(shè)計模式？

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

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

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

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

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

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

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

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

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

以下進行三個案例進行分析。

案例1：Action Sheet

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

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

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

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

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

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

案例3：表單

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

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

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

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

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

總結(jié)

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

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

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

廣告

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