交互設(shè)計(jì)師應(yīng)具備的技能樹(shù)(5)| 交互設(shè)計(jì)師的開(kāi)發(fā)思維
「他們喜歡戴著鐐銬跳舞,而且是其他詩(shī)人的鐐銬?!?/p>
They love to dance in these fetters, and even when wearing the same fetters as another poet.
——布里斯·佩里(Bliss Perry),美國(guó)文學(xué)評(píng)論家
聞一多最早在他的《詩(shī)的格律》一文中引用了佩里的這句話,想表達(dá)的是詩(shī)詞的格律對(duì)詩(shī)人的約束是有益的——「恐怕越有魄力的作家,越是要戴著鐐銬跳舞才跳得痛快,跳得好。只有不會(huì)跳舞的才怪腳鐐礙事,只有不會(huì)作詩(shī)的才會(huì)覺(jué)得格律是束縛?!?/p>
我覺(jué)得這句話不僅是說(shuō)給詩(shī)人們聽(tīng)的,也可以說(shuō)給設(shè)計(jì)師們聽(tīng)。連藝術(shù)創(chuàng)作者們都要受到格律、繪畫材料、風(fēng)格的限制,更不用說(shuō)為產(chǎn)品和用戶代言而生的設(shè)計(jì)師了。以前的產(chǎn)品可是沒(méi)有設(shè)計(jì)師的,只需要開(kāi)發(fā)人員就可以做出 DOS、Windows、Linux 這樣的操作系統(tǒng),以及初代的 OICQ 和 Foxmail 等軟件,直到他們意識(shí)到產(chǎn)品思維的重要性、用戶的重要性、界面美觀的重要性,才誕生了用戶體驗(yàn)設(shè)計(jì)師這個(gè)職業(yè),也就是后來(lái)的交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師。
正因?yàn)樵O(shè)計(jì)師是用戶和產(chǎn)品開(kāi)發(fā)之間的橋梁,所以設(shè)計(jì)師不僅應(yīng)該有用戶思維,也需要有開(kāi)發(fā)思維。因?yàn)槿绻幻靼鬃约业漠a(chǎn)品究竟用的是什么技術(shù),那設(shè)計(jì)出的產(chǎn)品很可能是天馬行空的。俗話說(shuō)得好(by WingST),「比創(chuàng)意誰(shuí)不會(huì),能落地才算本事!」
一、理解限制,實(shí)現(xiàn)設(shè)計(jì)價(jià)值
「不要將系統(tǒng)的限制或條件視為局限性,把他們看成構(gòu)建創(chuàng)意設(shè)計(jì)的根基?!?/p>
——Luke Miller,《用戶體驗(yàn)方法論》
Miller 的這句話道出了設(shè)計(jì)和技術(shù)之間的關(guān)系,我深以為然。
1. 設(shè)計(jì)師最擅長(zhǎng)的是構(gòu)想
在沒(méi)有設(shè)計(jì)介入時(shí),光是技術(shù)構(gòu)成的產(chǎn)品易用性和易學(xué)性都是很差的,就像一個(gè)光禿禿的地表,確實(shí)很踏實(shí),但毫無(wú)生氣,還容易迷路。這時(shí)設(shè)計(jì)師來(lái)了,說(shuō)這不行啊,我可以給你做這樣那樣的優(yōu)化,給出了一個(gè)完整的設(shè)計(jì)構(gòu)想,確實(shí)很漂亮。這時(shí)地表上有了植被、建筑和大氣層,構(gòu)成了一個(gè)新的產(chǎn)品,老板一拍桌子說(shuō),「看著不錯(cuò)啊,我們開(kāi)工吧!」
2. 尋找設(shè)計(jì)的支點(diǎn)
給出的設(shè)計(jì)構(gòu)想是很漂亮,但是很多設(shè)計(jì)師到了實(shí)現(xiàn)的這步就傻眼了:剩下的交給開(kāi)發(fā)啊,我切圖你實(shí)現(xiàn)不就好了,怎么這也不能做,那也實(shí)現(xiàn)不了?
很多時(shí)候其實(shí)并不能怪開(kāi)發(fā),不如一起來(lái)幫開(kāi)發(fā)同學(xué)想想,你的設(shè)計(jì)究竟要怎么落地才能實(shí)現(xiàn)地更好?
- 比如你想快速掌握用戶的地理位置,你就應(yīng)該知道手機(jī)上是有 GPS 模塊的,APP 有接口能夠快速獲取到用戶的手機(jī)定位信息,定位的經(jīng)緯度可以換算成省市地區(qū);
- 比如你想做一個(gè)可以根據(jù)用戶的手機(jī)傾斜角度改變形態(tài)的設(shè)計(jì),你就應(yīng)該知道手機(jī)上有一個(gè)叫陀螺儀的模塊,它具體是怎樣感知手機(jī)的傾斜角度的,又能傳回怎樣的參數(shù)來(lái)代表這些角度?它的精度如何,能夠很好地還原你的設(shè)計(jì)嗎?
- 比如你想實(shí)現(xiàn)一個(gè)很酷炫的動(dòng)畫效果,你就應(yīng)該知道 Android、iOS 這兩個(gè)系統(tǒng)上的動(dòng)畫實(shí)現(xiàn)原理。如果你做的是 Web 或者是 PC 端的設(shè)計(jì),那和移動(dòng)端的動(dòng)畫實(shí)現(xiàn)方式又不一樣,這些實(shí)現(xiàn)方式能還原你的動(dòng)畫效果嗎?
- 比如你想做一個(gè)圖像智能識(shí)別的功能或者智能語(yǔ)音翻譯的功能,你就應(yīng)該明白這種功能是哪些公司做得比較強(qiáng),他們分別能實(shí)現(xiàn)的程度是怎樣的?你們的開(kāi)發(fā)團(tuán)隊(duì)有相應(yīng)的技術(shù)儲(chǔ)備嗎?是否能直接找這些公司合作呢?
就算你做的不是什么創(chuàng)新的設(shè)計(jì),但是要保證你做出的設(shè)計(jì)能夠很好地被開(kāi)發(fā)還原出來(lái),你也應(yīng)該知道點(diǎn)九切圖法、Retina 屏幕的切圖比例、iOS 的基本控件庫(kù)、響應(yīng)式設(shè)計(jì)的實(shí)現(xiàn)原理等等,明白這些,你的設(shè)計(jì)才算找到了和技術(shù)連接的支點(diǎn)。
3. 實(shí)現(xiàn)設(shè)計(jì)的價(jià)值
只有基于這些和技術(shù)連接的支點(diǎn),你的設(shè)計(jì)構(gòu)想才能真正落地,構(gòu)成了一圈新的「大氣層」。由于技術(shù)基礎(chǔ)和開(kāi)發(fā)周期的限制,你的設(shè)計(jì)通常沒(méi)辦法100%實(shí)現(xiàn),但只要你的支點(diǎn)夠牢,你的設(shè)計(jì)構(gòu)想就能夠最大程度地進(jìn)行還原。
只有真正還原了的設(shè)計(jì),才構(gòu)成了設(shè)計(jì)的價(jià)值。
就像符合格律的詩(shī)歌才有韻味一樣,設(shè)計(jì)師也是戴著鐐銬跳舞的舞者,這些「技術(shù)鐐銬」不是羈絆你舞步的阻礙,相反的,正是因?yàn)榇髦鼈兡氵€能跳得比別人好,你才變得與眾不同,你的設(shè)計(jì)才比別人的更有價(jià)值。
千萬(wàn)不要讓你的設(shè)計(jì)變成了天馬行空的「大膽構(gòu)想」,想得再好卻缺乏實(shí)現(xiàn)的可能,落地就會(huì)變成薄薄的一層爛泥,那些只是無(wú)價(jià)值的設(shè)計(jì)。
二、擁抱限制,尋找技術(shù)邊界
「盡可能地去了解你為之設(shè)計(jì)的系統(tǒng)的性能和限制。這有助于你提升繪制用戶理想流程圖和在設(shè)計(jì)中加入新特色和交互的能力?!?/p>
——Luke Miller,《用戶體驗(yàn)方法論》
要理解開(kāi)發(fā)思維,就要先解釋一下程序員常常掛在嘴邊的「算法」究竟是什么,只有理解了算法,才算真正理解了開(kāi)發(fā)思維。
1. 算法的本質(zhì)
算法(Algorithm)是指解題方案的準(zhǔn)確而完整的描述,是一系列解決問(wèn)題的清晰指令,算法代表著用系統(tǒng)的方法描述解決問(wèn)題的策略機(jī)制。也就是說(shuō),能夠?qū)σ欢ㄒ?guī)范的輸入,在有限時(shí)間內(nèi)獲得所要求的輸出。
——百度百科
關(guān)鍵字:解題方案、輸入和輸出。
根據(jù)這三個(gè)關(guān)鍵字我們可以得出算法的數(shù)學(xué)方程式:
Y = U(X)
X 是輸入,Y 是輸出,U(X) 是基于參數(shù) X 最終能得出 Y 的函數(shù)(解題方案),也就是算法。
舉個(gè)最簡(jiǎn)單的算法,你按下了開(kāi)關(guān),電燈亮了。你按下開(kāi)關(guān)的動(dòng)作是輸入 X,電燈亮是輸出 Y,而從開(kāi)關(guān)的結(jié)構(gòu)到電線的排布、電源的引入,這一整套電路方案和開(kāi)關(guān)的設(shè)計(jì)就是算法 U(X),它解決了按下開(kāi)關(guān)讓電燈亮的問(wèn)題。
同樣的,你在微信上長(zhǎng)按發(fā)送一段語(yǔ)音,這是輸入 X,朋友收到你發(fā)來(lái)的語(yǔ)音,這是輸出 Y,讓這段語(yǔ)音從你的微信到朋友的微信的解決方案,就是算法 U(X)。你還可以繼續(xù)想其他的例子,比如你在京東上下單,把貨物從電商平臺(tái)的倉(cāng)庫(kù)轉(zhuǎn)移到你手里,這也是算法做到的。再比如你女朋友說(shuō)她想要套房子,那你想盡辦法最終買來(lái)房子的過(guò)程,當(dāng)然也是算法。
開(kāi)發(fā)同學(xué)的偉大之處就在于,他們會(huì)很多厲害的算法,能把你的設(shè)計(jì)通過(guò)代碼還原成 APP、Web 網(wǎng)站以及各種形態(tài)的軟件產(chǎn)品,你的設(shè)計(jì)方案對(duì)于他們來(lái)說(shuō)就是輸入,最終的產(chǎn)品就是輸出。
所以說(shuō),上面的這個(gè)方程式 Y=U(X),其實(shí)就是算法的本質(zhì):你想要得到輸出 Y,那就給我輸入 X,我會(huì)找到一個(gè)算法 U(X) 幫你解決的。
2. 改變輸入方式
很多同學(xué)會(huì)抱怨開(kāi)發(fā)同學(xué)水平不行,實(shí)現(xiàn)不了他們的設(shè)計(jì),這種時(shí)候不妨想想,你給開(kāi)發(fā)同學(xué)的是不是下面這種傳統(tǒng)的輸入方式:
你的設(shè)計(jì)構(gòu)想是很完美很厲害,但是你給開(kāi)發(fā)同學(xué)的不過(guò)是一張畫滿黑白線框和流程說(shuō)明的交互稿,以及一張看起來(lái)華麗卻不會(huì)動(dòng)的視覺(jué)稿,你覺(jué)得他們對(duì)你的這種輸入方式能理解多少?恐怕只有不到一半吧。剩下的那些,開(kāi)發(fā)同學(xué)只好自由發(fā)揮了,不然東西做出來(lái)可是會(huì)有Bug 的。何況開(kāi)發(fā)時(shí)間還那么少,老大們可不會(huì)找設(shè)計(jì)師催進(jìn)度。
這下你明白了,在開(kāi)發(fā)同學(xué)眼中,你給的輸入 X 就這些,我只能盡量用算法實(shí)現(xiàn)我想象中的輸出 Y 了,至于和你想的一不一樣我不知道,先做出來(lái)看看再說(shuō)。
但現(xiàn)實(shí)是殘酷的,最終實(shí)現(xiàn)出來(lái)的往往是南轅北轍。
何不試著改變一下輸入方式?
還記得我在《交互設(shè)計(jì)師應(yīng)具備的技能樹(shù)(4) :交互設(shè)計(jì)師的視覺(jué)思維》文章里提到的電腦管家小火箭改版嗎?
我們?yōu)樾』鸺匦略O(shè)計(jì)了一套新的發(fā)射動(dòng)畫,相比原來(lái)的時(shí)間更短、加速感更強(qiáng),火箭在上升過(guò)程中還會(huì)旋轉(zhuǎn),確實(shí)很酷。這要靠交互稿和視覺(jué)稿當(dāng)然都是說(shuō)不清楚的,為此我們?yōu)樗隽藗€(gè)高保真視頻 Demo:
開(kāi)發(fā)同學(xué):「嗯,看懂了,確實(shí)很快,但快到我都看不清啊,這要怎么做?」
我和視覺(jué):「稍等,我們想想辦法。」
我們當(dāng)然不會(huì)讓開(kāi)發(fā)同學(xué)對(duì)著視頻一幀一幀研究,他們沒(méi)那個(gè)功夫,我們反其道行之。我們用 Visual Basic 語(yǔ)言寫了個(gè)程序 Demo,用一個(gè)很精簡(jiǎn)的函數(shù)就實(shí)現(xiàn)了視頻 Demo 中的那種多段加速的動(dòng)畫:
按我們老大的說(shuō)法,把這套代碼直接丟給開(kāi)發(fā)就行了,他們能看得懂的。
然而,對(duì)方長(zhǎng)久的沉默讓我看出了他的心聲:「這什么鬼,懶得研究!」
所以我只好使出「終極大招」,我自學(xué)了 Visual Basic,自己看懂了函數(shù),然后在紙上一番埋頭苦算,終于給出了一份詳盡的動(dòng)畫「說(shuō)明書」,
這份說(shuō)明書包含什么內(nèi)容呢?
- 整個(gè)小火箭的動(dòng)畫,從點(diǎn)擊開(kāi)始,小火箭每一步的動(dòng)畫分解,細(xì)致到了每毫秒的動(dòng)作;
- 在每毫秒的過(guò)程中,每個(gè)組件分別是怎么動(dòng)作的,方向、速度如何,當(dāng)然也包括了小火箭上升的幾段過(guò)程的分解;
- 小火箭旋轉(zhuǎn)需要播放一套序列幀動(dòng)畫,開(kāi)發(fā)能實(shí)現(xiàn)的最小顆粒度是10毫秒播放一幀,我就寫明白了每個(gè)時(shí)刻要從哪一幀播放到哪一幀。
寫完,我?guī)е@份說(shuō)明書,搬一把椅子就坐在開(kāi)發(fā)同學(xué)后面了。
「來(lái)來(lái)來(lái),看這個(gè),我們一點(diǎn)點(diǎn)改,保證完美還原,效果不好算我的?!?/p>
這樣一來(lái),我們的設(shè)計(jì)支點(diǎn)就提高了,離我們的設(shè)計(jì)構(gòu)想近了很多,最終實(shí)現(xiàn)的效果非常贊。
如果你想要做的是一個(gè)創(chuàng)新型的設(shè)計(jì),那不妨換成這種「輸入方式」:用高保真原型(Demo)來(lái)一比一展示你要的設(shè)計(jì)效果,再通過(guò)動(dòng)畫說(shuō)明書來(lái)完整說(shuō)明設(shè)計(jì)的每一個(gè)細(xì)節(jié),確保傳達(dá)給開(kāi)發(fā)同學(xué)的「輸入 X」足夠精準(zhǔn),這樣他才能夠通過(guò)算法來(lái)幫你實(shí)現(xiàn)足夠完美的「輸出 Y」。
細(xì)心的朋友可能發(fā)現(xiàn)了,我們?cè)趯ふ易顑?yōu)「輸入方式」的過(guò)程中,其實(shí)也用了算法的思維(我們甚至連代碼都寫了),不斷改進(jìn)自己給出的「輸入材料」,才有了最后的「動(dòng)畫說(shuō)明書」。
3. 模塊化設(shè)計(jì)
為什么每次我們都要這么麻煩地搞什么輸入、輸出和算法?為什么不能把已有的算法給固定下來(lái)呢?
當(dāng)然可以,開(kāi)發(fā)同學(xué)最喜歡的就是把算法給固定下來(lái)了,這就是「模塊化」。
熟悉 iOS 平臺(tái)的同學(xué)一定知道,蘋果公司會(huì)給每個(gè)版本的系統(tǒng)都提供「Design Template」(設(shè)計(jì)模板),其實(shí)這些就是開(kāi)發(fā)同學(xué)在Xcode開(kāi)發(fā)環(huán)境里可以用的「算法模塊」。如果你設(shè)計(jì)的時(shí)候用的是這些模塊,那他只要修改幾個(gè)參數(shù)就能直接復(fù)用了。
舉個(gè)例子,在 iOS 系統(tǒng)里有種從下往上彈的菜單叫做「Action Sheets」,蘋果的設(shè)計(jì)和開(kāi)發(fā)人員考慮到了它的各種使用的情況,然后把它包裝成了一個(gè)「算法模塊」。
當(dāng)你要使用的時(shí)候,可以只用1個(gè)「Action」,也可以用3個(gè)甚至更多的「Action」,你甚至還可以用到包含可以橫向滾動(dòng)圖標(biāo)的方案。這一切的修改,對(duì)于你來(lái)說(shuō)只是在設(shè)計(jì)模板中復(fù)制粘貼和改幾個(gè)文字而已,對(duì)于開(kāi)發(fā)同學(xué)來(lái)說(shuō)也一樣,他也只要在蘋果給的控件庫(kù)里調(diào)出這個(gè) ActionSheets 控件,然后改幾個(gè)參數(shù)就行。
這種極大簡(jiǎn)化設(shè)計(jì)和開(kāi)發(fā)流程的東西,就是算法模塊,主動(dòng)制造這種模塊的過(guò)程,就叫做「模塊化設(shè)計(jì)」。
可能看這種控件還沒(méi)感覺(jué),再來(lái)看看蘋果的官網(wǎng)吧。
這個(gè) iPhone 的產(chǎn)品頁(yè)面你一定很熟悉了,它用的其實(shí)就是典型的模塊化設(shè)計(jì),我們來(lái)找找看。
如上圖,其實(shí)它包含了頁(yè)面導(dǎo)航模塊、機(jī)型選擇模塊、頁(yè)面主副標(biāo)題模塊、相關(guān)鏈接模塊和產(chǎn)品圖片模塊等,這些內(nèi)容都是可以根據(jù)需要自由定制的,只要簡(jiǎn)單做一個(gè)更換,就能馬上變成另一個(gè)頁(yè)面,如下圖。
是不是很省事?
不要小看模塊化設(shè)計(jì),用它設(shè)計(jì)出一套好看的頁(yè)面之后再?gòu)?fù)用,對(duì)于設(shè)計(jì)來(lái)說(shuō)就形成了設(shè)計(jì)規(guī)范,而對(duì)于開(kāi)發(fā)同學(xué)來(lái)說(shuō),他能讓這些代碼變成可復(fù)用的算法模塊 U(X),以后你可以隨意更換輸入 X,他都能用這個(gè)模塊給你快速地生成你想要的輸出 Y。
因此,時(shí)刻心中都有模塊意識(shí)的交互設(shè)計(jì)師,他會(huì)在合理設(shè)計(jì)頁(yè)面功能的情況下,盡可能地復(fù)用設(shè)計(jì),和視覺(jué)設(shè)計(jì)師一起把它們固化成模塊,就像在生產(chǎn)樂(lè)高積木一樣。這樣一來(lái),只要完成了主要頁(yè)面和主風(fēng)格的設(shè)計(jì),剩下再多的頁(yè)面也不過(guò)是一種理性地拼裝和因地制宜地修改而已。
現(xiàn)在你是否明白了為什么開(kāi)發(fā)們那么喜歡上 GitHub 這類開(kāi)源網(wǎng)站?就像我們上 Dribbble 和 Behance 尋找設(shè)計(jì)靈感一樣,他們也是在學(xué)習(xí)別人的算法模塊。
相關(guān)閱讀
交互設(shè)計(jì)師應(yīng)具備的技能樹(shù)(1):產(chǎn)品思維
交互設(shè)計(jì)師應(yīng)具備的技能樹(shù)(2):設(shè)計(jì)師的用戶思維
交互設(shè)計(jì)師應(yīng)具備的技能樹(shù)(3):設(shè)計(jì)師的邏輯思維
交互設(shè)計(jì)師應(yīng)具備的技能樹(shù)(4) :交互設(shè)計(jì)師的視覺(jué)思維
作者:WingST,騰訊高級(jí)交互設(shè)計(jì)師,微信公眾號(hào)“落羽敬齋(ID:wingstudy)”
本文由 @WingST 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
可別給甲方老板看到了!