作為新人的你,應(yīng)從信息架構(gòu)、交互流程和交互細(xì)節(jié)去了解交互設(shè)計(jì)

10 評(píng)論 32791 瀏覽 315 收藏 28 分鐘

交互設(shè)計(jì)嚴(yán)格上來(lái)說(shuō)是沒(méi)有什么套路而言,但是,對(duì)于初入行者還是需要有一些需要具體客觀的知識(shí)點(diǎn)去學(xué)習(xí)。就像筆者當(dāng)年剛?cè)胄袑W(xué)習(xí)工業(yè)設(shè)計(jì)的時(shí)候,對(duì)工業(yè)設(shè)計(jì)的內(nèi)涵與外延始終搞不太懂。老師們也沒(méi)有一直強(qiáng)調(diào)工業(yè)設(shè)計(jì)的定義,而是從瑣碎的知識(shí)點(diǎn)開(kāi)始,一點(diǎn)點(diǎn)講解,讓我們掌握。當(dāng)我們掌握了足夠多的知識(shí)點(diǎn),工業(yè)設(shè)計(jì)也自然在我們的知識(shí)框架中形成。

前一段時(shí)間,有一個(gè)學(xué)弟向我咨詢(xún)一些設(shè)計(jì)的問(wèn)題。期間,他提到想轉(zhuǎn)行做交互,問(wèn)我有沒(méi)有交互設(shè)計(jì)的教程?當(dāng)時(shí)我就有點(diǎn)懵了,交互設(shè)計(jì)的教程,有嗎?好像我還真沒(méi)有!接下來(lái),我就認(rèn)真地思考了交互設(shè)計(jì)“教程”的這檔子事。

因此,在筆者所學(xué)的交互設(shè)計(jì)的知識(shí)點(diǎn)中,為初學(xué)者講解一下。

交互設(shè)計(jì)(Interaction Design)顧名思義,是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域,它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu),使之互相配合,共同達(dá)成某種目的;狹義的交互設(shè)計(jì)則是指人與機(jī)之間的互動(dòng),機(jī)器需要對(duì)人的感情、動(dòng)作等的投入給予相應(yīng)的反饋,能夠讓人與機(jī)器之間有不間斷的互動(dòng)。

人機(jī)交互設(shè)計(jì)的三要素人、環(huán)境、機(jī)器,人作為交互設(shè)計(jì)的中心,也是當(dāng)前所提倡的以人為中心的設(shè)計(jì)或者以用戶(hù)體驗(yàn)為中心的設(shè)計(jì)的原因。目前交互設(shè)計(jì)的概念不斷擴(kuò)大,機(jī)器的概念也擴(kuò)大到了包括應(yīng)用、服務(wù)以及越來(lái)越熱的VR與AR的和人有互動(dòng)的事物中。相較于交互的三要素而言,另外反饋的時(shí)機(jī)也很重要,有人專(zhuān)門(mén)對(duì)PC端點(diǎn)擊反饋的時(shí)間進(jìn)行了研究,過(guò)快或者過(guò)慢的響應(yīng)都會(huì)降低用戶(hù)的體驗(yàn)。

就當(dāng)前而言,大家說(shuō)提到的交互設(shè)計(jì)更多的是指人與應(yīng)用之間的交互。今天就來(lái)聊一聊我對(duì)交互的理解和應(yīng)用。筆者認(rèn)為交互設(shè)計(jì)主要分為三部分:信息架構(gòu)、使用流程以及交互細(xì)節(jié)。那么,我們就聊一聊交互設(shè)計(jì)的三要素。

第一要素:信息架構(gòu)設(shè)計(jì)

1、著力點(diǎn):需求

說(shuō)到交互設(shè)計(jì),就不能不提需求,因?yàn)樗械慕换ピO(shè)計(jì)的工作都是基于需求,這也是交互設(shè)計(jì)的第一個(gè)著力點(diǎn)。因此,只有在深刻地理解需求之后,才有可能做出好的交互設(shè)計(jì)。

舉一個(gè)飽含血淚的例子:曾在做一個(gè)項(xiàng)目的過(guò)程中,有一個(gè)需求是要將一個(gè)應(yīng)用的數(shù)據(jù)展示做一下調(diào)整,使之能夠查其三個(gè)月之內(nèi)的數(shù)據(jù)。當(dāng)時(shí),自以為已經(jīng)很了解需求,只是將時(shí)間限制放開(kāi)到三個(gè)月,同時(shí),數(shù)據(jù)的展示限制在一個(gè)月內(nèi)。也就是說(shuō),可以查看三個(gè)月內(nèi)任意小于三十天的時(shí)間段。有兩個(gè)優(yōu)點(diǎn),一是滿(mǎn)足了需求;二是頁(yè)面顯示效果比較好。但是,自己是沒(méi)有真正的理解需求,用戶(hù)要查看三個(gè)月的數(shù)據(jù),更多的是要查看三個(gè)月所有的數(shù)據(jù),而不是三個(gè)月中的一段數(shù)據(jù)。發(fā)現(xiàn)用戶(hù)的真正需求后,我們又做了相應(yīng)的調(diào)整,數(shù)據(jù)的可查時(shí)間范圍不變,但是顯示范圍可以是一個(gè)可以頁(yè)面顯示并能夠之間交互操作的時(shí)間軸。這樣,產(chǎn)品的交互效果和顯示效果都得到了很大的提高。相似的功能需求,交互解決方案如圖所示:數(shù)據(jù)展示頁(yè)面窗口大小保持不變,而用戶(hù)可以通過(guò)調(diào)節(jié)X軸的滑塊來(lái)查看某一時(shí)間段的數(shù)據(jù)。

圖層 4

圖例

但是,所花費(fèi)的時(shí)間成本和人力成本都在那一點(diǎn)小小的偏差上成了無(wú)用功。因此,需求的理解詳細(xì)到任何程度都不為過(guò)。

2、著力點(diǎn):競(jìng)品分析

交互設(shè)計(jì)的第二個(gè)著力點(diǎn)是競(jìng)品分析。人們常說(shuō),如果一個(gè)人要走的快,那就一個(gè)人走;如果要走的遠(yuǎn),那就一群人走。在中國(guó)當(dāng)前的環(huán)境下,你很容易就能找到三五個(gè)相似的產(chǎn)品,充分的競(jìng)品分析與調(diào)研能夠找到你的產(chǎn)品方向,能夠補(bǔ)充你的需求以及用戶(hù)場(chǎng)景,同時(shí)能夠很好地了解用戶(hù)習(xí)慣,尊重用戶(hù)的習(xí)慣是以用戶(hù)體驗(yàn)為中心的交互設(shè)計(jì)的第一要?jiǎng)?wù)。在尊重用戶(hù)習(xí)慣的前提下,結(jié)合自身的優(yōu)勢(shì)與自己產(chǎn)品與競(jìng)品的定位差異,很容易就得到了你產(chǎn)品大致的信息架構(gòu)。當(dāng)然,這不是最終的信息架構(gòu)。

3、著力點(diǎn):卡片分析法

要得到自己的信息架構(gòu),并能夠有自己的特色與創(chuàng)新,還要一個(gè)著力點(diǎn),那就是卡片分析法。如何對(duì)卡片分析法結(jié)果進(jìn)行處理,這是關(guān)鍵。不過(guò),在這里要注意“層”和“度”的平衡。所謂的“層”就是你的產(chǎn)品的層級(jí)有多深。以移動(dòng)端的應(yīng)用為例,移動(dòng)端的層級(jí)最好不要超過(guò)五層,因?yàn)橐苿?dòng)端的應(yīng)用沒(méi)有類(lèi)似PC網(wǎng)站的面包屑導(dǎo)航,如果層級(jí)太深,用戶(hù)很容易在其中迷失,不能找到自己想要的功能。所謂的“度”就是產(chǎn)品功能的分類(lèi)。產(chǎn)品功能分類(lèi)的好壞,可以深刻的影響到用戶(hù)的體驗(yàn)以及用戶(hù)能不能順利的找到自己想要的功能。這也是為什么使用卡片分類(lèi)法的原因所在,卡片分類(lèi)法能夠?qū)⒛繕?biāo)用戶(hù)內(nèi)心的心智模型表現(xiàn)出來(lái),有利用用戶(hù)順利的尋找到目標(biāo)。

4、著力點(diǎn):對(duì)信息架構(gòu)的應(yīng)用

在信息架構(gòu)設(shè)計(jì)中,最后一個(gè)著力點(diǎn)是對(duì)信息架構(gòu)的應(yīng)用。通過(guò)對(duì)產(chǎn)品的“層”和“度”的整理,對(duì)其進(jìn)行重要度的分級(jí)。如果有若干一級(jí)標(biāo)簽屬于第一優(yōu)先級(jí),那么,這種類(lèi)型比較適合使用標(biāo)簽式導(dǎo)航。因?yàn)橛脩?hù)在相同優(yōu)先級(jí)標(biāo)簽之間的切換比較頻繁,這樣的導(dǎo)航強(qiáng)調(diào)若干相同優(yōu)先級(jí)的標(biāo)簽之間的切換,使用戶(hù)能夠方便的瀏覽到不同分類(lèi)的信息,這一類(lèi)的應(yīng)用比較多,如QQ、淘寶、天貓、京東等。

E554BF9E-EF65-4D7D-9346-140ABDAAB619

標(biāo)簽是導(dǎo)航案例

如果只有一個(gè)比較核心的功能且優(yōu)先級(jí)比較高,其他的信息較為次要,這種情況的信息架構(gòu)比較適合采用抽屜式導(dǎo)航。因?yàn)橛脩?hù)在當(dāng)前主要頁(yè)面中就能完成任務(wù),就沒(méi)有必要進(jìn)行導(dǎo)航的切換,這一類(lèi)的應(yīng)用主要有滴滴、UBER、小米郵箱等。

QQ20160901-0@2x

抽屜式導(dǎo)航案例

完成了信息架構(gòu)的設(shè)計(jì),只是完成了產(chǎn)品功能的橫向設(shè)計(jì),還有產(chǎn)品功能的縱向設(shè)計(jì)。產(chǎn)品的縱向設(shè)計(jì)就要涉及到產(chǎn)品的流程設(shè)計(jì),流程設(shè)計(jì)是在功能展示完備的情況下,對(duì)功能之間跳轉(zhuǎn)的設(shè)計(jì),是交互設(shè)計(jì)中的另外一個(gè)重點(diǎn)。

第二要素:交互流程設(shè)計(jì)

1、任務(wù)與場(chǎng)景的梳理

相對(duì)于信息架構(gòu)的橫向信息布局與功能分類(lèi)來(lái)說(shuō),流程設(shè)計(jì)更多的是縱向的完成任務(wù)的交互點(diǎn)的梳理,以達(dá)到讓用戶(hù)順利的完成相關(guān)任務(wù)的目的。對(duì)于用戶(hù)來(lái)講,交互設(shè)計(jì)流程是指用戶(hù)能夠順利的完成想要完成的任務(wù);而從業(yè)務(wù)層面來(lái)講,以不干擾用戶(hù)使用流程的方式完成業(yè)務(wù)需求,才是流程設(shè)計(jì)的完整定義。

好的流程設(shè)計(jì)不僅能夠提升產(chǎn)品的用戶(hù)體驗(yàn),同時(shí)能夠更加順利的完成業(yè)務(wù)目標(biāo)。作為兩大國(guó)民應(yīng)用的支付寶和微信,在產(chǎn)品的交互流程上的經(jīng)驗(yàn)也充分說(shuō)明了這一點(diǎn)。通過(guò)與春節(jié)聯(lián)歡晚會(huì)的合作,微信不僅實(shí)現(xiàn)了全民數(shù)百億次搖一搖的互動(dòng),同時(shí)實(shí)現(xiàn)了在兩天之內(nèi)完成了兩億張銀行卡綁定的業(yè)務(wù)目標(biāo),這可是支付寶數(shù)年才完成的目標(biāo)。這就是得益于微信紅包的好的流程設(shè)計(jì),相反支付寶的效果就沒(méi)有那么明顯了。這也就是要做好交互流程設(shè)計(jì)的原因。

交互流程是依附于產(chǎn)品解決任務(wù)的過(guò)程而存在的,脫離任務(wù)來(lái)講流程是不恰當(dāng)?shù)?。因此,要做好交互流程設(shè)計(jì),首先要明確的是圍繞什么樣的具體任務(wù)來(lái)展開(kāi)。任何一個(gè)應(yīng)用都有一個(gè)或者若干功能點(diǎn),來(lái)解決某些問(wèn)題。針對(duì)這些功能點(diǎn)來(lái)解決任務(wù)的過(guò)程就是任務(wù),同一個(gè)任務(wù)可能有不同的用戶(hù)場(chǎng)景。比如,同一個(gè)打電話任務(wù)就有若干不同場(chǎng)景:從未接電話開(kāi)始、聯(lián)系人開(kāi)始、撥號(hào)開(kāi)始等。所以,根據(jù)不同的任務(wù),梳理出不同場(chǎng)景。因此,產(chǎn)品的交互流程可能不止一個(gè),會(huì)擁有若干基于任務(wù)解決方案的流程設(shè)計(jì)。

2600520-68356b2329b09823

梳理場(chǎng)景中的交互點(diǎn)

2、交互點(diǎn)的整理

完成任務(wù)與場(chǎng)景的梳理以后,就要進(jìn)第二步,就是要針對(duì)一個(gè)任務(wù)的一個(gè)主要場(chǎng)景梳理出用戶(hù)與產(chǎn)品存在的交互點(diǎn)(InteractionPoint),也就是用戶(hù)在完成任務(wù)過(guò)程中,與產(chǎn)品之間存在的物理與心理的互動(dòng)關(guān)系。我們以通過(guò)微信找到好友并發(fā)送消息為例,來(lái)說(shuō)明該任務(wù)中存在的用戶(hù)與產(chǎn)品之間存在的交互點(diǎn)。在這個(gè)過(guò)程中,通過(guò)對(duì)交互點(diǎn)的整理,可以清楚的看到完成某項(xiàng)任務(wù)的難易程度,以及對(duì)于用戶(hù)可能存在的交互障礙,需要在具體的界面設(shè)計(jì)時(shí),對(duì)用進(jìn)行引導(dǎo),來(lái)避免用戶(hù)出現(xiàn)困惑或者錯(cuò)誤。

3、添加業(yè)務(wù)流程

接下來(lái)就要將業(yè)務(wù)流程添加到交互點(diǎn)中,與相應(yīng)的頁(yè)面融合。添加業(yè)務(wù)目標(biāo)的方法一般有兩種,第一種是將其放置在核心任務(wù)流程結(jié)束的地方,比如,餓了么、美團(tuán)外賣(mài)等,用戶(hù)在完成一次訂餐后,會(huì)提示用戶(hù)將連接分享給朋友可以獲得相應(yīng)的優(yōu)惠券。其業(yè)務(wù)目標(biāo)就是讓用戶(hù)幫助應(yīng)用推廣應(yīng)用,這樣的好處是不影響用戶(hù)完成其任務(wù),在完成其任務(wù)以后,即使用戶(hù)不分享也不會(huì)影響其體驗(yàn)。

2600520-d36870fe9d5295a1

業(yè)務(wù)目標(biāo)案例(來(lái)源網(wǎng)絡(luò))

另外一種是將業(yè)務(wù)目標(biāo)弱化顯示在流程頁(yè)面中,比如我們?cè)谧?cè)的時(shí)候,都會(huì)在底部顯示用戶(hù)協(xié)議的選項(xiàng),而其是默認(rèn)勾選的。因?yàn)檫@些信息使用戶(hù)不愿意看的,所以弱化處理。

2600520-cd10242be854343e

業(yè)務(wù)目標(biāo)案例(來(lái)源網(wǎng)絡(luò))

在完成以上任務(wù)后,就可以進(jìn)行相應(yīng)的流程設(shè)計(jì),針對(duì)不同的任務(wù)與場(chǎng)景制作不同的流程,其中必然會(huì)有一部分的交互點(diǎn)重疊,這樣就可以將同一任務(wù)、不同場(chǎng)景下的交互流程整合到一起,完成核心功能的交互流程設(shè)計(jì)。相信大家對(duì)具體的流程設(shè)計(jì)的制作步驟都已經(jīng)很熟悉了,在這里就不贅述了。很多同學(xué),覺(jué)得到這里,似乎流程以及大功告成。但是,遠(yuǎn)遠(yuǎn)不夠;至少還有兩件事情要完成。

2600520-a0f468f8101eb3a5

設(shè)計(jì)流程

第一件事:相應(yīng)信息架構(gòu)的調(diào)整

我們一直在強(qiáng)調(diào),信息架構(gòu)是橫向的信息布局與功能分類(lèi),在設(shè)計(jì)交互流程的過(guò)程中,我們會(huì)發(fā)現(xiàn)有些信息架構(gòu)的設(shè)計(jì)、功能分類(lèi)可能并不是那么合理,或者,信息架構(gòu)本身沒(méi)有問(wèn)題,但是在用戶(hù)的使用流程中,和用戶(hù)的習(xí)慣有沖突,這樣就需要調(diào)整信息架構(gòu),使信息架構(gòu)更合理。

第二件事:完成所有的流程設(shè)計(jì)

完成所有的流程設(shè)計(jì),包括登錄注冊(cè)流程、異常狀況流程等等,其中異常狀況流程包括各種各樣的問(wèn)題,其中有一個(gè)偷懶的方法,就是把網(wǎng)絡(luò)異常編號(hào)整理出來(lái),合并其中的類(lèi)似項(xiàng)目,這樣就可以整理出若干類(lèi)相應(yīng)的異常反饋,并設(shè)計(jì)出反饋語(yǔ)言,結(jié)合Toast和Alert提示,就可以滿(mǎn)足大部分的異常操作。
因此,流程設(shè)計(jì)的過(guò)程可以總結(jié)為:

組 4

流程驗(yàn)證

結(jié)合頁(yè)面的用戶(hù)場(chǎng)景故事,目的在于模擬一個(gè)典型的用戶(hù)場(chǎng)景,來(lái)檢查信息架構(gòu)和交互流程的設(shè)計(jì)是否符合用戶(hù)的心智模型。這樣才能在后期的細(xì)節(jié)設(shè)計(jì)中減少由于架構(gòu)與流程調(diào)整而增加的額外的工作量。

交互流程設(shè)計(jì)的意義更多在于,從功能角度模擬用戶(hù)的使用過(guò)程減少用在功能操作中的障礙,提高用戶(hù)體驗(yàn)。但是,無(wú)論信息架構(gòu)設(shè)計(jì)還是流程設(shè)計(jì)都只是邏輯上的模型,只有將這些邏輯表現(xiàn)在具體的界面上,這些邏輯才會(huì)有意義,才會(huì)為用戶(hù)了解、接受。這就牽扯到頁(yè)面的布局、Icon的大小、交互動(dòng)效和控件等等,也就是交互設(shè)計(jì)的第三個(gè)要素——交互細(xì)節(jié)設(shè)計(jì)。

第三要素:交互細(xì)節(jié)設(shè)計(jì)

交互細(xì)節(jié)設(shè)計(jì)是在前兩個(gè)要素指導(dǎo)下的設(shè)計(jì)實(shí)踐,也是交互設(shè)計(jì)可視化與形象化的關(guān)鍵。相對(duì)于前兩個(gè)要素的完整性和系統(tǒng)性,作為第三個(gè)要素的交互細(xì)節(jié)設(shè)計(jì)就顯得瑣碎和零散。根據(jù)交互設(shè)計(jì)由淺入深的漸進(jìn),交互細(xì)節(jié)可以分為布局、控件、適配、音效與動(dòng)效、流(目光與手指的循跡)等等。接下來(lái),我們就從布局開(kāi)始聊一聊交互細(xì)節(jié)設(shè)計(jì)。

1、布局

頁(yè)面布局的首要目的就是為了頁(yè)面功能的秩序感,使其在頁(yè)面功能的分類(lèi)以及輕重緩急的表現(xiàn)上更加合理,符合用戶(hù)的心智模型,在用戶(hù)使用的過(guò)程中,做到“Don’t make me think !”

在交互細(xì)節(jié)設(shè)計(jì)中,頁(yè)面布局與前兩個(gè)要素之間的聯(lián)系最為緊密。布局的依據(jù)就是通過(guò)卡片分類(lèi)法獲取的并通過(guò)流程設(shè)計(jì)優(yōu)化過(guò)的交互設(shè)計(jì)信息架構(gòu)。根據(jù)得到的信息架構(gòu),我們就可以知道頁(yè)面導(dǎo)航應(yīng)該采用什么樣的導(dǎo)航方式,抽屜式導(dǎo)航還是標(biāo)簽式導(dǎo)航,以及每個(gè)頁(yè)面應(yīng)該有哪些相關(guān)元素需要體現(xiàn)和體現(xiàn)的程度。筆者在頁(yè)面布局中主要堅(jiān)持格式塔心理學(xué)的設(shè)計(jì)原則。

格式塔心理學(xué)派斷言:人們?cè)谟^看時(shí)眼腦共同作用,并不是在一開(kāi)始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分,而是將各個(gè)部分組合起來(lái),使之成為一個(gè)更易于理解的統(tǒng)一體。當(dāng)一個(gè)格式塔單元中包含了太多互不相關(guān)的單位,眼腦就會(huì)試圖將其簡(jiǎn)化,把各個(gè)單位加以組合,使之成為知覺(jué)上易于理解的整體。格式塔理論明確地提出:眼腦作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過(guò)程,正是通過(guò)這一過(guò)程,才產(chǎn)生出易于理解、協(xié)調(diào)的整體。由此產(chǎn)生出了格式塔的一些基本原則(適用于布局和界面設(shè)計(jì)):主要包括接近原則、連續(xù)原則、相似原則和閉合原則。

圖層 2

格式塔心理學(xué)界面設(shè)計(jì)四原則

在交互設(shè)計(jì)的頁(yè)面布局中,要對(duì)不同的功能進(jìn)行分類(lèi),并將其在視覺(jué)體驗(yàn)上分開(kāi),這就會(huì)用到格式塔心理學(xué)中的接近原則。同理在頁(yè)面布局中,主要功能的凸顯、次要功能的弱化??偟囊缶褪侵攸c(diǎn)突出,詳略得當(dāng)。

2、控件

說(shuō)到控件,更多的是指移動(dòng)端應(yīng)用、Android和ios應(yīng)用。控件的作用有兩個(gè),一是采用同一類(lèi)型的控件可以使得應(yīng)用的風(fēng)格鮮明、有個(gè)性,賦予應(yīng)用一種獨(dú)特的氣質(zhì);二是以不同平臺(tái)為基礎(chǔ)的控件,在開(kāi)發(fā)的時(shí)候減少工作量,做到拿來(lái)就用??丶ò粹o、開(kāi)關(guān)、輸入框和進(jìn)度指示器。控件還可以根據(jù)自己的需要來(lái)自己定義。有些應(yīng)用在開(kāi)發(fā)的過(guò)程中,制作設(shè)計(jì)規(guī)范的同時(shí),會(huì)制作相應(yīng)的控件,便于在后期的開(kāi)發(fā)過(guò)程中減少工作量。

3、不同終端之間的界面適配

不同終端之間的界面適配包括不同分辨率手機(jī)之間的適配、移動(dòng)端和PC端的適配。適配有一個(gè)更專(zhuān)業(yè)的名稱(chēng)叫響應(yīng)式設(shè)計(jì)(Responsive Design)。響應(yīng)式的設(shè)計(jì)分為三個(gè)等級(jí),第一等級(jí)是最弱的適配,就是沒(méi)有適配,手機(jī)端會(huì)等比例縮小,需要放大才能查看,但是不會(huì)出現(xiàn)圖片破損的狀況;第二個(gè)等級(jí)是輕度適配,可以實(shí)現(xiàn)移動(dòng)端的正常預(yù)覽,文字大小不變,圖片等比例縮?。坏谌燃?jí)是圖片、文字、元素位置以及顯示方式等等,都會(huì)隨著顯示屏幕的大小而適應(yīng)屏幕顯示,達(dá)到顯示效果的最優(yōu)化,提高用戶(hù)體驗(yàn)。

1(265)

響應(yīng)式設(shè)計(jì)(來(lái)源網(wǎng)絡(luò))

響應(yīng)式設(shè)計(jì),第一要考慮兼容設(shè)備的范圍以及相應(yīng)的分辨率。這樣就可以確定出幾套交互稿和效果圖;第二是根據(jù)不同的尺寸以及設(shè)計(jì)規(guī)范來(lái)設(shè)計(jì)交互原型;第三是對(duì)相應(yīng)的元素和模塊進(jìn)行調(diào)整。在響應(yīng)式設(shè)計(jì)中,有兩點(diǎn)需要特別注意:一是菜單,PC端的頁(yè)面足夠大,能夠?qū)⒉藛稳空归_(kāi)來(lái)顯示,但是移動(dòng)端就要把菜單收起來(lái)或者以抽屜的形式放在左側(cè);二是圖表,圖表是做所有的頁(yè)面中最難處理的。目前筆者還沒(méi)有找到通用的有效方法,多采用PC與移動(dòng)端不同的設(shè)計(jì),PC上采用列表,移動(dòng)端采用內(nèi)容單元的形式,即將列表中的一個(gè)項(xiàng)目單獨(dú)成為一個(gè)內(nèi)容單元,以瀑布流的形式向下滾動(dòng)。但是這種方法就喪失了列表的一項(xiàng)重要功能,就是項(xiàng)目之間的對(duì)比。

4、音效和動(dòng)效

智能手機(jī)滿(mǎn)足了人們視覺(jué)和觸覺(jué),音效則實(shí)現(xiàn)了聽(tīng)覺(jué)的交互。目前,音效設(shè)計(jì)的主要作用還是現(xiàn)在動(dòng)效設(shè)計(jì)師已經(jīng)單獨(dú)的獨(dú)立出來(lái)作為產(chǎn)品開(kāi)發(fā)中的一環(huán)。在扁平化風(fēng)行天下的情況下,優(yōu)雅的動(dòng)效設(shè)計(jì)是更多應(yīng)用的追求。目前,有很多動(dòng)效制作軟件各有優(yōu)劣點(diǎn),比如:

筆者比較傾向于AE,因?yàn)锳E設(shè)計(jì)出來(lái)的效果細(xì)膩,細(xì)節(jié)豐富,你想要什么效果 AE都能實(shí)現(xiàn),但是程序上能不能實(shí)現(xiàn)就難說(shuō)啦。AE缺點(diǎn)就是不可交互,以及精準(zhǔn)度很難控制。正式因?yàn)樾Ч?xì)膩豐富,精準(zhǔn)度的控制才是考驗(yàn)動(dòng)效設(shè)計(jì)師水平的試金石。

5191b114d60c21c495dfc8b8ee937f72

Material Design示例(來(lái)源網(wǎng)絡(luò))

另外,網(wǎng)上關(guān)于動(dòng)效的設(shè)計(jì)案例很多,多看、多練才能提高。在《移動(dòng)設(shè)計(jì)》作者總結(jié)了動(dòng)效設(shè)計(jì)的相關(guān)原則:

  • 運(yùn)動(dòng)形變,萬(wàn)變不離其宗(運(yùn)動(dòng)和形變之間的結(jié)合衍生)
  • 節(jié)奏速度,掌控曲線時(shí)長(zhǎng)
  • 情感故事,擬物、隱喻、品牌
  • 結(jié)合操作,關(guān)聯(lián)輕量自然
  • 點(diǎn)到即止,切記過(guò)猶不及
  • 尊重習(xí)慣,謹(jǐn)慎進(jìn)行創(chuàng)新
  • 快速原型,多方溝通權(quán)衡

5、視覺(jué)流

流,即目光和手指的循跡,是信息在設(shè)備與人之間的流轉(zhuǎn),實(shí)現(xiàn)人與設(shè)備之間的觸發(fā)、影響和反饋交互。整個(gè)信息與反饋之間的流轉(zhuǎn)包括視線流和操作流。視線流的的形成是根據(jù)頁(yè)面布局以及頁(yè)面中的元素特點(diǎn)來(lái)流動(dòng)的,對(duì)比越強(qiáng)烈越容易引起人的注意。

圖層 0

頁(yè)面布局視覺(jué)熱力圖(來(lái)源網(wǎng)絡(luò))

說(shuō)到這里我們不得不把百度和Google拉出來(lái)說(shuō)一說(shuō)。通過(guò)研究發(fā)現(xiàn),用戶(hù)對(duì)于搜索的結(jié)果查看集中在前幾條,從上到下進(jìn)行閱讀。Goolge的搜索結(jié)果就是這樣布局的符合用戶(hù)的視覺(jué)流,當(dāng)用戶(hù)從上到下瀏覽完成以后,自然而然就要翻頁(yè)到下一頁(yè),所以底部是翻頁(yè)操作。百度的設(shè)計(jì)也符合這一規(guī)律,但是百度將用戶(hù)的視覺(jué)熱力圖的重點(diǎn)以競(jìng)價(jià)方式做了廣告,這也是百度競(jìng)價(jià)排名遭人詬病的原因。所以,大家用百度搜索都形成了習(xí)慣,直接跳過(guò)前幾條,從后面開(kāi)始。

圖層 1

搜索結(jié)果視覺(jué)熱力圖(來(lái)源網(wǎng)絡(luò))

從操作焦點(diǎn)到視覺(jué)焦點(diǎn)的引導(dǎo)更多的是通過(guò)動(dòng)效設(shè)計(jì)來(lái)實(shí)現(xiàn)。在搜索的過(guò)程中,從搜索結(jié)果到翻頁(yè)就形成了視覺(jué)的引導(dǎo)流,當(dāng)點(diǎn)擊翻頁(yè)以后,頁(yè)面會(huì)顯示在頂部,引導(dǎo)用戶(hù)從頭開(kāi)始閱讀,這就是從操作焦點(diǎn)到視覺(jué)焦點(diǎn)的反饋流。在界面設(shè)計(jì)過(guò)程中,要充分考慮視覺(jué)焦點(diǎn)到操作觸點(diǎn)的引導(dǎo)流,從操作觸點(diǎn)到視覺(jué)焦點(diǎn)的反饋流。

視覺(jué)流要符合用戶(hù)的視覺(jué)習(xí)慣,或者引導(dǎo)用戶(hù)去瀏覽產(chǎn)品想讓用戶(hù)瀏覽的內(nèi)容。操作流需要考慮在任務(wù)的背景下,系列操作的連貫與自然可以引導(dǎo)的手指毫不費(fèi)力地進(jìn)行點(diǎn)擊。另一方面要順應(yīng)用戶(hù)的手指點(diǎn)擊習(xí)慣,保證足夠的容錯(cuò)性,不要讓用戶(hù)用自然的操作卻達(dá)到了非預(yù)期的目標(biāo)。在我們操作一款應(yīng)用的時(shí)候,會(huì)因?yàn)榫W(wǎng)絡(luò)、內(nèi)存等原因,造成反應(yīng)不及時(shí),用戶(hù)會(huì)產(chǎn)生多次點(diǎn)擊的情況,如果多次點(diǎn)擊的位置出現(xiàn)其他功能操作的button,就會(huì)出現(xiàn)誤操作,嚴(yán)重降低用戶(hù)體驗(yàn)。視覺(jué)流又提供了從另一個(gè)角度來(lái)審視頁(yè)面布局的新視野、新方法。在以用戶(hù)體驗(yàn)為中心的設(shè)計(jì)風(fēng)潮中,這種方法會(huì)越來(lái)越受到重視。

圖層 3

移動(dòng)端手勢(shì)舉例(來(lái)源網(wǎng)絡(luò))

另外,交互設(shè)計(jì)的細(xì)節(jié)還包括手勢(shì)設(shè)計(jì)等等。交互細(xì)節(jié)的設(shè)計(jì)很多、很繁瑣,無(wú)論你做的多細(xì)致都不為過(guò)。這都需要用時(shí)間、以及用心去積累!

 

作者:莫忘&初心,微信huang942852369, 希望與同行者多多交流。

本文由 @莫忘&初心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 這個(gè)是網(wǎng)易云課堂的課程么?

    回復(fù)
  2. 干貨,謝謝

    來(lái)自江蘇 回復(fù)
  3. 寫(xiě)的很不錯(cuò),整體流程都涵蓋了

    回復(fù)
  4. 卡片分析法是人物建模么?不太清楚

    回復(fù)
    1. 卡片分析法是用來(lái)對(duì)產(chǎn)品的功能進(jìn)行歸類(lèi)的。網(wǎng)上應(yīng)該有很多這方面的文章,可以參考。

      來(lái)自浙江 回復(fù)
  5. 謝謝

    回復(fù)
  6. 寫(xiě)的比較詳細(xì),學(xué)習(xí)了。
    現(xiàn)在是不是說(shuō)交互5要素比較多:人、行為、環(huán)境、目的、媒介?

    來(lái)自上海 回復(fù)
    1. 這是從不同的角度來(lái)做的總結(jié),作者是從交互設(shè)計(jì)實(shí)踐過(guò)程中的設(shè)計(jì)流程中總結(jié)出來(lái)的。

      來(lái)自浙江 回復(fù)
  7. 感謝分享

    回復(fù)
    1. 大家共同進(jìn)步嘛!UIUX設(shè)計(jì)工作坊(UIUX-HUANG)這是我們的微信公眾號(hào)。里面有其他文章,可以以一起交流學(xué)習(xí)!

      來(lái)自浙江 回復(fù)