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

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

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

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

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

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

我們?cè)谌粘Ｊ褂卯a(chǎn)品的過(guò)程中經(jīng)常會(huì)接觸到一些基礎(chǔ)的單元，我們稱之為交互單元，研究過(guò)開(kāi)發(fā)者指南的朋友肯定知道，iOS 和安卓會(huì)一些樣式有區(qū)別，但是功能相同的交互單元，比如開(kāi)關(guān)、選擇器、對(duì)話框等。

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

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

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

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

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

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

案例1：Action Sheet

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

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

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

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

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

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

案例3：表單

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

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

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

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

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

總結(jié)

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

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

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

廣告

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