從0到1體驗(yàn)iPod的發(fā)明歷程
我們長這么大,使用那么多的產(chǎn)品,進(jìn)行那么多的交互。我們無法避免遇見一些讓人糟心的產(chǎn)品,一些反人類的交互。我們肯定當(dāng)時(shí)也想過如果換做是自己,自己會怎么去設(shè)計(jì)這個(gè)產(chǎn)品。如果可以歸納出一種通用的交互設(shè)計(jì)方法,那該多好啊。本章會將一套方法論,并對這套方法論進(jìn)行實(shí)踐,發(fā)明蘋果公司的iPod。
整個(gè)方法論并不是一個(gè)線性的過程,時(shí)間、空間、使用者、媒介、目的,這5個(gè)要素都是互相交織的。在設(shè)計(jì)的過程中需要循環(huán)往復(fù)地考慮,牽一發(fā)而動全身。空間要素初步是為了塑造一個(gè)大致形狀體積的產(chǎn)品黑體,之后添加了媒介的要素是需要循環(huán)考慮空間要素的
下面方法論里問到的問題只是作為一個(gè)引子,真的要進(jìn)行思考的話,各位讀者還是得回到相應(yīng)的篇章進(jìn)行詳細(xì)思考。我建議讀者一開始不要把所有的點(diǎn)給考慮進(jìn)去,比如你還沒有確定需要什么媒介信息接收器和信息發(fā)送器的時(shí)候。就沒必要考慮關(guān)于媒介信息發(fā)送器和接收器的問題,不然很容易就被自己現(xiàn)有的經(jīng)驗(yàn)所束縛住。
為了讓大家閱讀方便,我將方法論整理成一張圖來展現(xiàn),用手機(jī)觀看的讀者可以放大查看。
以上便是這本書關(guān)于交互設(shè)計(jì)的方法論,你可以根據(jù)這個(gè)方法去對身邊的所有產(chǎn)品進(jìn)行分析,找到其中的不足,從而改進(jìn)它。
光說不練假把戲,下面我就要根據(jù)上面的方法論去發(fā)明iPod出來。如果你是一名交互設(shè)計(jì)師,建議你可以自己用上面的方法論去先行設(shè)計(jì)一次,然后再繼續(xù)看下面我的案例。當(dāng)然愛動腦筋的小伙伴也可以自行嘗試一遍,嘗試完了,再接著看下面的內(nèi)容。
交互設(shè)計(jì)實(shí)踐:如何發(fā)明iPod
這個(gè)章節(jié)是本書stump理論的綜合運(yùn)用,這里發(fā)明iPod的過程肯定與多年前蘋果公司iPod發(fā)明過程有所區(qū)別。究竟蘋果公司發(fā)明iPod的過程是怎么樣的,我也無從得知。
大家需要了解,如果我們直接想,很容易想到現(xiàn)在手機(jī)屏幕這方面去了。想要發(fā)明iPod,你得在當(dāng)時(shí)所擁有的技術(shù)條件下創(chuàng)新,不然很容易直接跑到未來的科技上去了。一般來說可以依據(jù)iPod誕生前的市面上所擁有的技術(shù)基礎(chǔ)上進(jìn)行設(shè)計(jì)。
但當(dāng)時(shí)的技術(shù)水平是怎么樣的,我其實(shí)也不太了解,有興趣的讀者可以自行去查找相關(guān)資料,我下面的設(shè)計(jì)過程是使用一種更加簡單粗暴的邏輯,不管競品的形態(tài),直接從0開始一步一步進(jìn)行演繹,如果當(dāng)前技術(shù)可以實(shí)現(xiàn),那就應(yīng)用進(jìn)去。當(dāng)前技術(shù)還無法實(shí)現(xiàn),那就等待相應(yīng)技術(shù)發(fā)明出來,一旦發(fā)明相應(yīng)技術(shù)了,就能夠應(yīng)用在新產(chǎn)品上,搶奪市場先機(jī)。
分析過程
目的 1:我想要一個(gè)可以隨時(shí)隨地聽歌的產(chǎn)品
這個(gè)其實(shí)是一個(gè)最簡單的目的,還有很多功能是使用者想要的,比如能夠,看到歌曲名字,看到播放進(jìn)度等等,都不包含這個(gè)目的里面。
stump分析:
(1)絕對位置:使用者的絕對位置
問 1:使用者所在的地方是在地圖上的哪里,周圍氣候環(huán)境是怎么樣?
答:全世界只有有人的地方都可能使用,什么環(huán)境下都有可能
問 2:在家使用,在學(xué)校使用,在公司使用,在車上使用?
答:這些地方都有可能使用
問 3:使用者使用時(shí)絕對位置會變化嗎?
答:邊聽歌邊行走,是會發(fā)生的
(2)絕對位置:媒介的絕對位置
問 1:所在的地方是在地圖上的哪里,周圍氣候環(huán)境是怎么樣?
答:任意地方,任意環(huán)境
問 2:產(chǎn)品被使用時(shí)絕對位置會變化嗎?室內(nèi)還是室外使用?
答:會發(fā)生變化,室內(nèi)室外都有可能
(3)使用者的空間姿態(tài)
問 1:使用者在使用時(shí)姿勢是怎么樣的?是坐著,站著,躺著,走著,還是其他的姿態(tài)進(jìn)行使用?
答:使用者在任何姿態(tài)下都可能使用產(chǎn)品
問 2:信息發(fā)送器的姿態(tài)是怎么樣的?手的形狀是握著,還是張開,還是觸摸?
答:一般是一只手握著的
(4)媒介的空間姿態(tài)
問 1:體積多大:硬幣那么大,手掌那么大,電腦那么大,椅子那么大,桌子那么,冰箱那么大,門那么大?
答:最大不過手掌那么大,能夠放進(jìn)口袋.
問 2:外形長啥樣:三角金字塔形,圓柱形,正方體,長方體,球形。
答:因?yàn)橐胚M(jìn)口袋,隨身攜帶,最好是扁的,不尖銳的。
問 3:朝向變化嗎?一般朝向是怎么樣的?
答:一般喇叭,操作區(qū)域朝向臉。
結(jié)論:
通過上面的分析,我們得到了上面5種形態(tài)的產(chǎn)品(還有可以是很多種形狀,就不一一列出來了)通過上面的文字可以知道按下可以播放歌曲,再按下可以停止播放。
當(dāng)然如果這款產(chǎn)品真長這樣,必然不能推上市場的,它不能更換電池,導(dǎo)致只能使用1次,不能更換歌曲,只能聽已經(jīng)儲存在里面的歌曲。現(xiàn)在距離我們的iPod發(fā)明還差得遠(yuǎn),產(chǎn)品經(jīng)理肯定不會做一個(gè)只能放歌的只能用一次的產(chǎn)品,會有其他功能。那我們選取上面的其中一種最常見的形態(tài),矩形進(jìn)行下一步的設(shè)計(jì),當(dāng)然你也可以選擇其他形狀進(jìn)行設(shè)計(jì)。
該產(chǎn)品的六視圖如下:
正面是有喇叭和一個(gè)播放停止按鍵,背面只有l(wèi)ogo,其他面沒有任何東西。
目的 2:可持續(xù)使用
stump分析:
使用時(shí)間:
問:使用時(shí)間固定嗎?一般使用時(shí)間有多長
答:使用時(shí)間長度不固定,我可以隨時(shí)聽歌,也可以隨時(shí)停止聽歌
問:時(shí)間會影響到媒介的什么方面
答:電量會隨著使用時(shí)間變長而減少,有可能還會發(fā)熱,會老化
結(jié)論:
技術(shù)大佬說如果想要播放和停止都快,就需要待機(jī)才能做到。但產(chǎn)品經(jīng)理希望省電,讓續(xù)航久一些。那要兼顧兩種需求,就必須不能一直待機(jī),不然沒多久就沒電了。所以需要增加一個(gè)開關(guān)機(jī)的功能。
如下圖1所示:
加了開關(guān)雖然可以節(jié)省一定的電量,但電量終有一天會用完。不能持續(xù)運(yùn)作的產(chǎn)品,就是一次性產(chǎn)品。我們需要能夠續(xù)航,圖2和圖3是一次性電池替換示意圖,當(dāng)然也可以是諾基亞的扁平電池,或者像圖4那樣直接給充電口進(jìn)行充電。技術(shù)大佬說我們現(xiàn)在可以使用充電的方案。
因?yàn)殡娏繒S著使用時(shí)間而變化,使用者會想要知道當(dāng)前電量,所以可以增加幾個(gè)電量指示燈(信息發(fā)送器)。
因?yàn)槲覀儾捎贸潆姷姆桨福绾未蜷_電池蓋的很多交互設(shè)計(jì)方案,在這里就不說了,有興趣的可以自己去分析一下。
目的 3:可以換歌單
stump分析:
使用時(shí)間:
問:時(shí)間會影響到使用者的什么方面?
答:聽相同的歌久了會膩
結(jié)論:其實(shí)不用stump分析,換歌單也是很容易就得出的需求。我們需要可以更換歌曲,接下來我們要考慮的是現(xiàn)在有什么技術(shù)可以讓用戶更換歌曲。
圖1是光碟,圖2是錄音帶,圖3是sd卡,圖4是內(nèi)置了歌曲儲存裝置,可以外接電腦進(jìn)行歌曲更換。這是受科技影響的,如果所處的時(shí)代只有光碟,那就只能使用更換光碟這種方式了(有的年輕的讀者可能不知道光盤,錄音帶這種古董了),交互設(shè)計(jì)師就要考慮怎么更加容易更換光碟。但技術(shù)大佬說我們可以做到數(shù)據(jù)傳輸?shù)姆桨?,那如何更換光碟的交互就不說了,有興趣的可以自己去分析一下。
目的 4:控制音量
stump分析:
相對位置:使用者與媒介的相對位置
問:使用時(shí)間里,使用者和媒介的相對位置會變化嗎?如何變化?
答:相對位置會變化,比如我在客廳放著歌,隨著歌聲跳舞,或者進(jìn)房間,下樓拿外賣等等
結(jié)論:
產(chǎn)品發(fā)出的歌聲是聲波信息,隨著使用者和產(chǎn)品的距離越大,這個(gè)信息慢慢衰減。當(dāng)相對距離達(dá)到一定程度時(shí),我們便聽不見了。
我們不能說出廠設(shè)置就把聲音弄到最大。因?yàn)槭褂谜哂薪嚯x使用的情景,造成聽力下降,也會處于不同的絕對位置,比如在宿舍,公司,就會影響到周圍的人。所以聲音出廠設(shè)置成最大也是不行的,因此我們需要有可以調(diào)節(jié)音量的功能。
如下圖所示,增加了一個(gè)音量滑軌,當(dāng)然你也可以像現(xiàn)在的手機(jī)控制音量一樣,增加兩個(gè)按鍵,一個(gè)增大音量一個(gè)減少音量?,F(xiàn)在無論采取哪種方案都行,這不會影響到最終的形態(tài),因?yàn)檫€沒到對這些信息接收器進(jìn)行分析的時(shí)候。
這個(gè)音量也可以是下面的設(shè)計(jì)方式,還是跟剛才說的一樣,現(xiàn)在還沒到對信息接收器進(jìn)行分析的時(shí)候,怎么樣的形式都行,不過下面的這些設(shè)計(jì)方式就不遵循“左小右大,下小上大”或者“平衡原則”的邏輯了。你可以現(xiàn)在就應(yīng)用這些邏輯,也可以之后等真正分析信息接收器的時(shí)候再應(yīng)用這些邏輯。
目的 5:切換歌曲
歌曲是一首一首播放的,聽完這一首自動會播放下一首,如果我還想再聽剛才的那首歌,我需要有辦法回到上一首。如果這首歌爛大街了,我現(xiàn)在聽膩了,我需要有辦法直接播放下一首。
結(jié)論:我們加入“上一首”按鍵和“下一首”按鍵來實(shí)現(xiàn)。
如下圖所示:
目的 6:快速定位歌單位置
歌曲是一首一首播放的,歌單中有多少首歌取決于儲存裝置能存儲多少首歌,作為用戶,我肯定是希望越多越好的。但能存儲多少首歌不是交互設(shè)計(jì)師能夠決定的,而是當(dāng)時(shí)的技術(shù)發(fā)展。就好比我們的DVD光碟,它能夠刻錄20首左右的mv,很多年齡比較的小讀者可能都不知道DVD這個(gè)玩意是什么了。
如果當(dāng)前的設(shè)備只能固定存儲10首歌,我們可以給每一首歌都單獨(dú)設(shè)置一個(gè)按鍵,想要播放哪一首就播放哪一首。如下方圖1所示,當(dāng)然這種方案的局限性非常大,歌曲少于10首時(shí),有的按鍵沒有作用,歌曲多于10首時(shí),比如15首,難道要增加5個(gè)按鍵嗎?作為交互設(shè)計(jì)師,我們肯定不希望用戶去記憶有多少首歌,這相當(dāng)于絕對控制。
假如有100首歌,我們不會加100個(gè)按鍵進(jìn)去,但不停地點(diǎn)上一首,下一首又太慢了,能不能幾首幾首地跳。我們可以增加進(jìn)度跳躍的功能。如圖2,可以有10個(gè)小燈,當(dāng)播放的歌曲在歌單的排列位置的0%~10%時(shí),第一盞燈會亮起。起到顯示當(dāng)前播放歌曲在總歌曲中的大概進(jìn)度。如果你想聽的歌大概在后面10首里面,那你就可以多按幾下后跳按鍵。當(dāng)?shù)?0個(gè)指示燈亮起時(shí),再通過下一首按鍵,找到你想要聽的歌了。
但如果里面的歌不止100首,而是1000首歌的時(shí)候呢,分成10份,每一份有100首歌的范圍,也是很麻煩的。我們也不能說在上面加100盞指示燈吧。我問技術(shù)大佬,現(xiàn)在的技術(shù)可以做到顯示百分比嗎?
技術(shù)大佬說可以,那么就有了圖3的設(shè)計(jì),將整個(gè)歌單劃分成100份,較為精細(xì)地顯示進(jìn)度,也非常直觀地知道是在百分之多少,如果是100盞燈,你還得大概看一下這盞燈在哪個(gè)位置。
雖然現(xiàn)在可以按照百分比進(jìn)行跳躍,但實(shí)際上,還是只能定到一個(gè)大概的位置。還是需要一首一首地聽,這首歌是不是我想要聽的那一首。
如果能看到歌名就最好,但現(xiàn)在技術(shù)大佬告訴我,以現(xiàn)在的技術(shù)沒有辦法看得到,最前沿的電子顯示就是顯示百分比了。那視覺信息沒辦法做到,那有沒有其他信息線可以讓我知道播放的是哪一首歌呢?聽覺可以嗎?可以是可以,但本來這首歌一旦播放,你就知道是不是自己想要聽的歌。
所以就以目前使用者的需求:“想要定位到自己想聽的那一首歌?!眮碚f加一個(gè)按鍵可以播放當(dāng)前歌名,是非常雞肋的。
目的 7:隨機(jī)播放,順序播放
之前聽歌都是按照順序的,聽膩了,加入隨機(jī)播放功能。
如下圖所示:
目的 8:看到歌名,選擇歌曲
1999年2月31日,當(dāng)我正在和喬布斯談笑風(fēng)生的時(shí)候,技術(shù)大佬突然打開門,興奮地對著我們說,屏幕技術(shù)進(jìn)步了,現(xiàn)在可以做到顯示歌名了,那時(shí)候喬布斯的笑,我到現(xiàn)在都記憶猶新。
現(xiàn)在我們可以將歌單放在屏幕里,當(dāng)然不可能全部顯示,這就是功能的邊界大于信息發(fā)送器邊界的情況。如下圖所示,我們現(xiàn)在可以一邊聽著歌,一邊按上下鍵看看有什么歌。
信息接收器發(fā)送器的表現(xiàn)設(shè)計(jì):
問:采用下面的哪些設(shè)計(jì)對內(nèi)容進(jìn)行表現(xiàn):文字,圖標(biāo),圖案,動圖,視頻,聲音,觸感,味道?
之前說過,表現(xiàn)設(shè)計(jì)轉(zhuǎn)化這一步在任何時(shí)候都可以進(jìn)行,你在添加控制音量功能時(shí)就能用喇叭圖標(biāo)。我看加的功能都挺多的了,就先轉(zhuǎn)化一下。我將所有的文字都轉(zhuǎn)化為圖標(biāo)。當(dāng)然你也可以保留一些文字,其中的取舍我在上一章中提到過。至于這些圖標(biāo)具體的細(xì)節(jié),就由視覺設(shè)計(jì)師來進(jìn)行設(shè)計(jì)了。
轉(zhuǎn)化示意圖如下:
stump分析:
絕對時(shí)間:
問:有固定使用時(shí)間嗎?年月日的具體哪個(gè)時(shí)間使用?使用結(jié)束的時(shí)間點(diǎn)一般是什么?
沒有固定使用時(shí)間,年月日不會影響聽歌的目的,會在一天中的任意時(shí)間點(diǎn)開始使用,在任意時(shí)間點(diǎn)結(jié)束使用。我們需要考慮當(dāng)我們在晚上在外面行走時(shí)使用,我們還能接受到什么信息線?
技術(shù)大佬跟我說,現(xiàn)在這個(gè)屏幕不會自己發(fā)光,如果周圍沒有路燈,我們?nèi)绻麕硎蛛娡材沁€能照著看一下。如果沒有帶,憑借月光很難看清屏幕上的內(nèi)容。只能我們在屏幕四周加進(jìn)燈來照亮屏幕了。
設(shè)計(jì)圖如下圖所示:
理論上每添加一個(gè)信息發(fā)送器或接收器,就要考慮一遍stump,但也可以多加幾個(gè)后再統(tǒng)一考慮stump。即便我們沒有屏幕這個(gè)技術(shù)的時(shí)候,考慮這種情況,那你就會在按鍵上加入燈或者夜間能發(fā)光的化學(xué)物質(zhì)。
上面的3幅圖中第1幅到第2幅,是表現(xiàn)設(shè)計(jì)的轉(zhuǎn)化。在添加的時(shí)候可以進(jìn)行轉(zhuǎn)換,也可以等功能都準(zhǔn)備差不多了,再統(tǒng)一轉(zhuǎn)換。而第3幅則是通過方法論推論出來的一種可能的設(shè)計(jì),可以調(diào)節(jié)背光燈的亮度,當(dāng)然了一個(gè)按鍵也可以調(diào)節(jié)背光燈亮度,每按下一次,亮度變化一次,假如有亮度有3種,低中高,若現(xiàn)在是沒有背光燈,按一下就是低亮度,再按一下中亮度,再按一下高亮度,再按一下沒有背光燈。
通過stump的絕對時(shí)間中“時(shí)”分析,你會發(fā)現(xiàn)白天的時(shí)候,因?yàn)樘柈?dāng)空照,光線充足。你即便開啟了背光燈,也不會察覺,這樣就造成電量浪費(fèi)。所以需要有定時(shí)關(guān)閉背光燈的交互設(shè)計(jì),有的小朋友可能就會說了,我像手機(jī)那樣加一個(gè)光線感應(yīng)元件不就好了嗎?
讓亮度隨環(huán)境而變化,先不說那時(shí)候有沒有光線感應(yīng)元件這種東西,就算有,產(chǎn)品經(jīng)理說這成本太高,不能這樣做。(當(dāng)然我覺得喬布斯可能不會說成本太高)
有的小朋友就很好奇,我自己光說通過stump分析得到需要背景燈,得到可以使用上下兩個(gè)按鍵調(diào)節(jié)亮度,或者一個(gè)按鍵多次點(diǎn)擊調(diào)節(jié)亮度。這些想法究竟是怎么想出來的,能不能把stump的過程寫出來呀?那么接下來我將用選擇歌曲功能作為例子詳細(xì)地將stump分析過程寫出來。
目的 9:選擇歌曲功能
(1)要素自身分析
問:功能的邊界,連續(xù)性,變化方向性?
答:歌曲數(shù)量是有限的,屬于雙邊界,而狀態(tài)數(shù)量隨歌曲數(shù)量而變化,會有很多。排列是連續(xù)的,選擇時(shí)在歌單中的排序會變大變小
問:信息接收器的邊界性,維度性,方向性可以是什么樣的?
答:邊界可大可小,維度可以是點(diǎn),可以是線。方向遵循“下小上大”的邏輯即可。
問:信息發(fā)送器的邊界性,維度性,方向性可以是什么樣的?
答:邊界就是屏幕大小,發(fā)送器的邊界小于功能邊界。信息發(fā)送器的維度是面,方向:歌曲上下顯示。
(2)要素間關(guān)系分析
問:功能邊界,信息接收器邊界,信息發(fā)送器邊界關(guān)系是怎么樣的?A>B/A=B/A<B?使用絕對控制?相對控制?是否追求精度?是否追求速度?
答:因?yàn)楣δ艿倪吔鐬殡p邊界,邊界范圍大(狀態(tài)數(shù)量非常多),功能邊界大于信息接收器邊界。還要要追求中等程度的精度,和快速選擇想要聽的歌曲,也就是還要追求速度。所以我們想要相對控制的控制方式。
雖然現(xiàn)在可以確定使用相對控制,我接下來還是會把絕對控制的相關(guān)內(nèi)容都寫出來,跟大家一同進(jìn)行分析。
信息接收器的設(shè)計(jì):
1)假如我們使用點(diǎn)控制
一個(gè)向前選,一個(gè)向后選。那么我們無法做到快速定位。需要頻繁點(diǎn)擊,當(dāng)然也可以用長按點(diǎn)安靜,通過時(shí)間維度來快速選取,所以這個(gè)方案待定,看看有沒有更加好的方案。上下兩個(gè)按鍵的方案如下圖所示:
2)假如使用線接收器進(jìn)行絕對控制
則可以做到快速定位。但使用絕對控制會很難定位到我們想要的那一首歌,下圖為使用滑塊絕對控制的示意圖,假如有900首歌,但滑塊的長度只有這屏幕這么長,往往輕輕往上移動一下,就往前跳躍了十幾首歌了。
線接收器的絕對控制示意圖如下:
3)假如使用線接收器進(jìn)行相對控制
在滿足了快速定位的同時(shí),我們想要中等程度的精度,因?yàn)檫@個(gè)設(shè)備的空間大小有限制,而功能的邊界又非常大。所以我們可以使用相對控制的方案,現(xiàn)在已經(jīng)確定了使用線性的信息接收器。邊界越長,我們操作空間就越大。
因?yàn)槭褂镁€性相對控制,在精確度不變的情況下,信息接收器的邊界越大,控制的范圍越大。所以我們希望要盡量加大信息接收器的邊界,讓我們能夠更加快速地進(jìn)行定位。
(3)要素間關(guān)系分析
問:功能連續(xù)性,信息接收器維度性,信息發(fā)送器連續(xù)性關(guān)系是怎么樣的?點(diǎn)?多點(diǎn)?線?2線?面?3線/體?
答:功能為多點(diǎn),信息接收器為線,信息發(fā)送器為多點(diǎn)
問:功能變化方向性,信息接收器方向性,信息發(fā)送器方向性關(guān)系是怎么樣的?左小右大?下小上大?平衡原則?
答:功能會變大變小,信息發(fā)送器和信息接收器的方向要保持一致性。
為了更好地說明保持一致的含義,我用按鍵示意給大家說明一下。下面的第1幅圖是下面3幅圖中最好的方案。第2幅圖的設(shè)計(jì)跟人的認(rèn)知相沖突。我在《術(shù)-媒介的信息接收與發(fā)送》中說過,信息發(fā)送器或接收器有兩點(diǎn)或更高緯度時(shí),因?yàn)榇嬖谟诳臻g之中,本身就方向性。所以即便是第3幅圖媒介沒有說“任何話”也比第2幅圖的設(shè)計(jì)要好。
結(jié)論:
從上面的stump分析得到以下的一些結(jié)論:
- 我們使用相對控制
- 信息接收器使用線性輸入
- 信息接收器邊界盡可能大
機(jī)械方案示意圖:
分析:
圖1是點(diǎn)控制方案,圖2345都是滾輪的方案,圖2雖然是滾輪,但沒有辦法做到連續(xù)操作,手指移下去之后,必須要從空中移上去,再往下移動。圖3是類似手表的旋鈕操作,需要兩個(gè)手指進(jìn)行控制,能用一個(gè)手指就別用兩個(gè)手指。
圖4和圖2類似,只是位置上不同,個(gè)人認(rèn)為圖4是要優(yōu)于圖2的,因?yàn)榭紤]使用者信息發(fā)送器的姿態(tài)的,手握住的時(shí)候,拇指是在側(cè)邊。圖5是為了能夠持續(xù)性操作而采取的方案。圖6這是圖5的信息接收器移動位置,加大邊界范圍,以便能夠控制速度能夠更快。圖7和圖6其實(shí)一樣的,圖5和圖6都是帶鋸齒的圓盤,實(shí)際上不會采用的,只是我為了將整個(gè)思考過程展示給你而畫的。
觸摸方案示意圖:
分析:
圖1是滑塊絕對控制;圖2是觸摸絕對控制;圖3是觸摸相對控制;圖4是觸摸相對控制,擴(kuò)大了信息接收器的邊界;圖5是觸摸相對控制,為了可以無限操作進(jìn)行首尾相連;圖6是對信息接收器進(jìn)行相對位置移動,為了對稱美觀。圖7是進(jìn)行因?yàn)閳A環(huán)要比方環(huán)操作更方便進(jìn)行優(yōu)化的方案。
小結(jié):
上面就是關(guān)于選擇歌曲功能的《術(shù)-媒介信息接收與發(fā)送》相關(guān)內(nèi)容的分析,除了選擇歌曲功能外,我們還需要對已有的功能進(jìn)行同樣的分析,比如播放/暫停,充電,換歌單,控制音量,切換歌曲,開關(guān)機(jī),選擇播放模式等。過程和上面是基本一致的。我打算將音量控制從滑軌改成使用兩個(gè)按鍵,一個(gè)加大聲音放上面,一個(gè)減少聲音放下面。
(4)功能間關(guān)系分析
問:功能間交叉關(guān)系
答:開機(jī)狀態(tài)和播放模式,音量調(diào)節(jié)是交叉關(guān)系
問:功能間平行關(guān)系
答:控制音量和控制燈是平行關(guān)系
問:功能間互斥關(guān)系
答:開關(guān)機(jī)狀態(tài)是互斥關(guān)系,播放模式是互斥關(guān)系
優(yōu)化策略:
問:維度變化性?高維度節(jié)省時(shí)間,低維度節(jié)省空間?高維度容納低維度?
答:互斥的點(diǎn)功能可集合使用線的信息接收器。開關(guān)機(jī)是互斥點(diǎn)功能和播放模式是互斥點(diǎn)功能。開機(jī)后,要么隨機(jī)播放要么順序播放。可以將點(diǎn)功能集合一起使用線接受器。
當(dāng)然音量也是跟關(guān)機(jī)互斥的,我們可以試一下,音量為0時(shí)關(guān)機(jī),調(diào)大音量就開機(jī)。但因?yàn)橐袅康臓顟B(tài)多,不是點(diǎn)功能,我們很難選取到之前的音量大小,如果一下子太大聲了,就會影響聽力。所以還是使用播放模式結(jié)合開關(guān)機(jī)。
采用滑塊方案的不足就是互斥的功能點(diǎn)數(shù)量最好不要超過3個(gè)。當(dāng)是3個(gè)的時(shí)候,移動具有確定性,不容易錯誤。但4個(gè)或者5個(gè),就不具備這種優(yōu)勢了,很難判斷位置。比如我們增加1個(gè)單曲循環(huán)模式,應(yīng)該拆分出來會比較合適。當(dāng)然4個(gè)互斥的功能點(diǎn)放在同一個(gè)滑塊上也是可以的。這個(gè)時(shí)候就需要做實(shí)驗(yàn),給模型用戶使用,觀察效果了。
上面圖中的方案存在表現(xiàn)層面問題:媒介跟人“交流”太小聲了(圖標(biāo)太小了),人們很難看清這些圖標(biāo)。同時(shí)沒有了對稱性,不美觀。能不能信息接收器(滑塊)居中放置,信息發(fā)送器(圖標(biāo))也能夠大些呢?
下圖就是我想到的方案:
問:但這個(gè)方案怎么才能實(shí)現(xiàn)呢?
這是工業(yè)設(shè)計(jì)師要思考的問題,而不是交互設(shè)計(jì)師。我簡單想了一下可以實(shí)現(xiàn)的機(jī)械結(jié)構(gòu),如下圖所示:
答:上圖只是一個(gè)可能的機(jī)械結(jié)構(gòu),你可以使用圖中的這種機(jī)械結(jié)構(gòu),或是使用磁鐵讓滑塊懸浮,或者其他。交互設(shè)計(jì)師不需要想怎么實(shí)現(xiàn),這已經(jīng)屬于媒介黑箱子的內(nèi)容了。
上面一排表現(xiàn)形式的優(yōu)化思路,各位讀者可以自行分析一下這些思路為什么可行。
使用滾輪:
上圖的方案是使用滾輪(線的信息接收器)的實(shí)現(xiàn)方案,那么這個(gè)方案可行嗎?
我們可以stump分析一下,我們很容易想到使用過程中空間要素-媒介信息接收器的位置變化。你會放進(jìn)拿出口袋,在這個(gè)過程中很可能會與口袋的摩擦,造成滾動。
當(dāng)然因?yàn)檫@個(gè)信息接收器是在媒介頂部,產(chǎn)品的空間姿態(tài)一般是豎著放進(jìn)去,這種情況還是比較少發(fā)生的,這就是考慮了空間要素媒介接收器空間姿態(tài),空間相對位置變化的作用。但不管怎么說,都是比滑塊要更加容易產(chǎn)生移動的。這也是為什么iPhone從第一代開始,靜音的撥動控件是前后撥動,而不是上下?lián)軇印,F(xiàn)在手邊有iPhone的讀者可以看一下。
選擇播放模式其實(shí)不是一個(gè)高頻操作,因?yàn)槠聊坏目勺冃?,高維度可以實(shí)現(xiàn)這一功能,蘋果將其移到軟件層面。但iPod shuffle因?yàn)槠涠ㄎ皇禽p便讓你感受不到它的存在,需要非常小的體積加上觸摸屏技術(shù)未發(fā)展,導(dǎo)致其無法擁有屏幕,所以選擇播放模式功能還是使用了實(shí)體按鍵。
優(yōu)化策略:
問:組合性?
答:目前功能都比較簡單,沒有想到什么需要進(jìn)行組合優(yōu)化的,讀者可以自行去想一下。
問:可變性?
答:在不同情況下,同一個(gè)信息接收器控制不同功能,同一個(gè)信息發(fā)送器展示不同功能狀態(tài)。可以在播放頁面用滾輪控制音量。這點(diǎn)是我沒有去做的,因?yàn)闈L輪這個(gè)東西我很喜歡滑動的感覺,如果我在播放界面看著歌詞,
目的 10:看歌詞,看播放進(jìn)度
軟件開發(fā)工程師說,我們編程技術(shù)進(jìn)步了,可以有兩個(gè)頁面了。
我們可以看到歌詞和歌曲播放的進(jìn)度了。如上面第三幅圖所示。我們進(jìn)入了這個(gè)界面,得有個(gè)出口,先增加一個(gè)歌單按鍵,現(xiàn)在就直接將它轉(zhuǎn)化為圖標(biāo),用3條橫杠來代表歌單,如上面第二幅圖所示。按下歌單按鍵,就能從播放界面(圖3)返回到歌單界面(圖2)。
細(xì)心的讀者可能發(fā)現(xiàn),播放界面時(shí)屏幕右上角顯示電量了,之前一開始加入屏幕也可以顯示電量,當(dāng)然現(xiàn)在加入也不遲,這不影響。屏幕的可變性,我們可以將很多東西都放到屏幕里,音量,播放模式,歌單,切歌等等。但現(xiàn)在先當(dāng)做當(dāng)時(shí)軟件還沒有那么發(fā)達(dá),只能做兩個(gè)頁面。
優(yōu)化策略:
問:多樣性?
不知道有沒有自己先嘗試設(shè)計(jì)iPod的小伙伴,你們考慮到?jīng)]電的時(shí)候屏幕里彈窗提示。如果你只想到了屏幕上的提示,那是不夠的,很大程度是因?yàn)槟懔?xí)慣性將手機(jī)上的交互移到這里來。通過空間要素分析,我們知道在使用過程中,人的眼睛很大可能跟屏幕沒有信息交流。
所以如果只能有一種提示方式時(shí),選擇聲音提示要比屏幕彈窗要好。當(dāng)然聲音進(jìn)行提示的同時(shí),屏幕也可以適當(dāng)提示。這就是多樣性:同一個(gè)功能狀態(tài)變化,可以有多個(gè)信息發(fā)送器。
電量的不足聲音提示,就是媒介說:“我沒電了,快給我充電。”至于是通過真正的語言告訴沒電,還是“滴滴”幾聲,這又需要進(jìn)行考慮。如果只有沒電這種情況進(jìn)行提示的話,屏幕出現(xiàn)提示,聲音是“滴滴”,我們就能將“滴滴”聲音和沒電關(guān)聯(lián)起來。如果沒有屏幕,只有滴滴,那用戶第一次聽到會覺得是不是有什么問題。多幾次就學(xué)會了。
電量有狀態(tài)變化的,剛才的是電量減少的相關(guān)思考,那充電,又該如果表現(xiàn)呢?文字“充電中”?一個(gè)電量圖標(biāo)?動圖:電量圖標(biāo)的黑色格子數(shù)量從少變多?采取哪種方案并沒有標(biāo)準(zhǔn)答案,視技術(shù)水平和開發(fā)成本等因素綜合考慮。
目的 11:聽歌時(shí)想聽的清楚,又不影響別人
之前就通過絕對位置的分析,得到了需要音量控制的功能。但如果調(diào)小聲了,就不能聽清楚,也還是有可能會影響到別人,因?yàn)槁曇舻男畔⒕€是像四周發(fā)送的。有沒有什么好的解決方案呢?我們可以加入耳機(jī)這個(gè)配件,有耳機(jī)就會有耳機(jī)孔。
問:相對位置-媒介的信息接收器與發(fā)送器的相對位置?
這個(gè)產(chǎn)品是要豎著放進(jìn)口袋的,正面,背面,側(cè)面都沒戲,那就剩下底部和頂部了??紤]到手伸進(jìn)去再拿出來正面面向自己的情況,我就想把耳機(jī)放到底部。但之前底部設(shè)計(jì)已經(jīng)放了數(shù)據(jù)傳輸口和充電口,那就直接把充電口移到頂部吧。從這里,我們就可以知道這套方法論并不是一個(gè)線性的過程,而是自由多變的。
當(dāng)然技術(shù)大佬如果說數(shù)據(jù)傳輸?shù)哪>吆投鷻C(jī)接口的模型都很大,沒有辦法同時(shí)塞在一邊,也就是媒介的黑箱子干不了這個(gè)活。交互設(shè)計(jì)師就可以再去思考其他方案了,其他方案讀者可以自由發(fā)揮想象力,考慮一種方案的時(shí)候記得使用stump進(jìn)行分析。
現(xiàn)在產(chǎn)品形態(tài):
那么經(jīng)過上面一系列stump分析方法后,我們現(xiàn)在發(fā)明的iPod長什么樣子呢?
就是下面的樣子了。
不知道有沒有讀者注意到,我在第一步stump分析的時(shí)候就說到,因?yàn)橐胚M(jìn)口袋隨身攜帶,那這個(gè)產(chǎn)品就要圓潤些,上面的示意圖是完全直角的形狀,我們給它加點(diǎn)弧度,順便設(shè)計(jì)一下表現(xiàn)層(應(yīng)該由視覺設(shè)計(jì)師進(jìn)行表現(xiàn)層設(shè)計(jì)),給它配個(gè)淡銀色,就得到下面的方案了。
這個(gè)方案是假設(shè)當(dāng)時(shí)技術(shù)水平只能做到:
- 軟件層面只能做兩個(gè)頁面。
- 充電口,數(shù)據(jù)傳輸口,耳機(jī)口都必須獨(dú)立運(yùn)作,無法組合。
- 屏幕的顯示尺寸只能是這么大。
- 機(jī)身的體積無法再縮小,是在這些限制條件下,我才做出來上面的iPod。
所以這個(gè)產(chǎn)品相比喬布斯發(fā)布的第一代iPod是有差異的,但第一代iPod最大的交互創(chuàng)新設(shè)計(jì),就是那個(gè)轉(zhuǎn)盤的設(shè)計(jì),我已經(jīng)詳細(xì)地將這個(gè)轉(zhuǎn)盤的發(fā)明過程展示給大家看了。
科技進(jìn)步:
在真實(shí)的世界,其實(shí)已經(jīng)可以在軟件層面上做到很多的頁面了,而不是我上面說的只有兩個(gè)頁面。當(dāng)技術(shù)大佬跟你說,我們做的軟件可以有多個(gè)界面,很多層級的時(shí)候。你就可以考慮,一些優(yōu)化策略了,比如可變性策略和復(fù)雜性守恒定律。
因?yàn)槠聊唬ㄐ畔l(fā)送器)具備可變性,根據(jù)復(fù)雜性守恒定律,我們可以將一些接收器控制的功能,轉(zhuǎn)移到信息發(fā)送器上。現(xiàn)在的信息接收器有開關(guān),播放模式,上一首下一首按鍵,歌單按鍵,播放暫停按鍵,背景燈開關(guān),滾輪。
我們可以根據(jù)使用頻率等方面的考慮,將播放模式放到屏幕中。因?yàn)橛辛烁嗟慕缑婧蛯蛹?,我們需要進(jìn)行頁面進(jìn)入和返回。
新增加兩個(gè)按鍵嗎?能不能利用可變性優(yōu)化策略,將播放按鍵變做確定按鍵,將歌單按鍵可變成返回上一級功能。這些都是交互設(shè)計(jì)的思路,通過上面的這些思路,其實(shí)多嘗試一些,要思考出下面的幾種方案并不難。
關(guān)于取舍:
如果當(dāng)時(shí)軟件層面可以將背景燈開關(guān)放到屏幕里,讓我做選擇,我會保留背景燈開關(guān)的實(shí)體按鍵,因?yàn)樾枰掖蜷_背景燈的情況是晚上周圍沒有燈光,我看不清楚屏幕,使用才要打開背景燈。
既然我都看不清楚屏幕了,背景燈的開關(guān)又是在屏幕中顯示,那我就只能憑借我的操作熟練度和記憶來打開背景燈了,這不符合我的交互設(shè)計(jì)原則。但蘋果確實(shí)將背景燈放到了屏幕里,從軟件層面進(jìn)行控制。
我們現(xiàn)在知道,隨著科技的進(jìn)步,充電,數(shù)據(jù)傳輸,耳機(jī)插孔也都會整合到一起,像當(dāng)年的iPod shuffle,一個(gè)孔實(shí)現(xiàn)傳輸數(shù)據(jù),充電,插耳機(jī)3種功能。
下圖1是iPod shuffle的真機(jī)圖。iPod shuffle是2005年1月11日發(fā)布的,比第一代iPod晚了幾年。因?yàn)楸銛y性的需要,體積需要非常小,而當(dāng)時(shí)技術(shù)或成本限制,沒有現(xiàn)在這種觸摸屏。因此這個(gè)iPod沒有配備顯示屏,加減音量按鍵放到了機(jī)身正面。因?yàn)闆]有屏幕,歌單,菜單按鍵也就沒有存在的必要了。
我在搜索引擎打下iPod shuffle的時(shí)候,彈出了搜索提示,如圖2所示,一般來說,需要讓用戶去搜索引擎搜索使用教程的交互設(shè)計(jì),都是存在改進(jìn)空間的。
究竟用戶不會使用什么功能?使用教程里有什么?我就去查了一下詳情。
下面的圖1是iPod的使用教程中的一張,是解釋這個(gè)滑軌對應(yīng)的播放模式。如果當(dāng)時(shí)喬布斯采用的是圖2的方案,應(yīng)該就不會出現(xiàn)要去搜索引擎搜求使用教程的情況。
技術(shù)繼續(xù)發(fā)展,出現(xiàn)了觸摸屏技術(shù),上面的iPod shuffle的信息接收器(實(shí)體按鍵)都轉(zhuǎn)移到了信息發(fā)送器(屏幕)上,觸摸屏是集合了信息接收器和信息發(fā)送器的。
下圖為iPod nano:
總結(jié)
通過stump方法論,我將我的iPod發(fā)明出來了,應(yīng)該跟喬幫主發(fā)布的iPod是比較接近的,即便你從來沒有觸碰過iPod,你也可以發(fā)明出相差不大的產(chǎn)品出來,我覺得這也是這個(gè)stump交互設(shè)計(jì)方法論的魅力所在吧!
有興趣的讀者可以嘗試著發(fā)明手機(jī),發(fā)明switch游戲機(jī)。這一章我還沒仔細(xì)去梳理,想到哪寫到哪,所以如果我有什么地方表達(dá)不清楚,或者你看不懂的,可以給我留言。
當(dāng)然,別人的優(yōu)秀交互不是一蹴而就的,也是經(jīng)過很多的迭代,很多交互設(shè)計(jì)師的不斷努力去優(yōu)化而,才呈現(xiàn)到你面前。如果你第一版設(shè)計(jì)的交互,基本和已經(jīng)存在的交互一致。那你就是一個(gè)天才設(shè)計(jì)師。
現(xiàn)在,已經(jīng)到了這邊書的末尾了,后面一章是關(guān)于本書的總結(jié),幫助大家擴(kuò)大交互設(shè)計(jì)的視野。
思考練習(xí)
假如一開始的那一步,你選擇了一個(gè)圓形的方案,你設(shè)計(jì)出來的iPod又是怎么樣的呢?會是下面這些形態(tài)嗎?這就需要讀者自己嘗試去發(fā)明創(chuàng)造了。
還有很多款iPod等著大家:
本文由 @交互靈光 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
求問用的什么軟件編寫的大綱,好看哎
幕布,挺好用的
很多同學(xué)應(yīng)該不知道方法論里面的一些詞匯是什么意思,我已經(jīng)將相應(yīng)的文章《從交互的角度剖析身邊的產(chǎn)品》提交審核了,應(yīng)該不久大家就能看到。