「他們喜歡戴著鐐銬跳舞，而且是其他詩人的鐐銬?！?/p>

They love to dance in these fetters, and even when wearing the same fetters as another poet.

——布里斯·佩里（Bliss Perry)，美國文學(xué)評論家

聞一多最早在他的《詩的格律》一文中引用了佩里的這句話，想表達(dá)的是詩詞的格律對詩人的約束是有益的——「恐怕越有魄力的作家，越是要戴著鐐銬跳舞才跳得痛快，跳得好。只有不會(huì)跳舞的才怪腳鐐礙事，只有不會(huì)作詩的才會(huì)覺得格律是束縛?！?/p>

我覺得這句話不僅是說給詩人們聽的，也可以說給設(shè)計(jì)師們聽。連藝術(shù)創(chuàng)作者們都要受到格律、繪畫材料、風(fēng)格的限制，更不用說為產(chǎn)品和用戶代言而生的設(shè)計(jì)師了。以前的產(chǎn)品可是沒有設(shè)計(jì)師的，只需要開發(fā)人員就可以做出 DOS、Windows、Linux 這樣的操作系統(tǒng)，以及初代的 OICQ 和 Foxmail 等軟件，直到他們意識(shí)到產(chǎn)品思維的重要性、用戶的重要性、界面美觀的重要性，才誕生了用戶體驗(yàn)設(shè)計(jì)師這個(gè)職業(yè)，也就是后來的交互設(shè)計(jì)師和視覺設(shè)計(jì)師。

正因?yàn)樵O(shè)計(jì)師是用戶和產(chǎn)品開發(fā)之間的橋梁，所以設(shè)計(jì)師不僅應(yīng)該有用戶思維，也需要有開發(fā)思維。因?yàn)槿绻幻靼鬃约业漠a(chǎn)品究竟用的是什么技術(shù)，那設(shè)計(jì)出的產(chǎn)品很可能是天馬行空的。俗話說得好（by WingST），「比創(chuàng)意誰不會(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ì)師最擅長的是構(gòu)想

在沒有設(shè)計(jì)介入時(shí)，光是技術(shù)構(gòu)成的產(chǎn)品易用性和易學(xué)性都是很差的，就像一個(gè)光禿禿的地表，確實(shí)很踏實(shí)，但毫無生氣，還容易迷路。這時(shí)設(shè)計(jì)師來了，說這不行啊，我可以給你做這樣那樣的優(yōu)化，給出了一個(gè)完整的設(shè)計(jì)構(gòu)想，確實(shí)很漂亮。這時(shí)地表上有了植被、建筑和大氣層，構(gòu)成了一個(gè)新的產(chǎn)品，老板一拍桌子說，「看著不錯(cuò)啊，我們開工吧！」

2. 尋找設(shè)計(jì)的支點(diǎn)

給出的設(shè)計(jì)構(gòu)想是很漂亮，但是很多設(shè)計(jì)師到了實(shí)現(xiàn)的這步就傻眼了：剩下的交給開發(fā)啊，我切圖你實(shí)現(xiàn)不就好了，怎么這也不能做，那也實(shí)現(xiàn)不了？

很多時(shí)候其實(shí)并不能怪開發(fā)，不如一起來幫開發(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ù)來代表這些角度？它的精度如何，能夠很好地還原你的設(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īng)該明白這種功能是哪些公司做得比較強(qiáng)，他們分別能實(shí)現(xiàn)的程度是怎樣的？你們的開發(fā)團(tuán)隊(duì)有相應(yīng)的技術(shù)儲(chǔ)備嗎？是否能直接找這些公司合作呢？

就算你做的不是什么創(chuàng)新的設(shè)計(jì)，但是要保證你做出的設(shè)計(jì)能夠很好地被開發(fā)還原出來，你也應(yīng)該知道點(diǎn)九切圖法、Retina 屏幕的切圖比例、iOS 的基本控件庫、響應(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ǔ)和開發(fā)周期的限制，你的設(shè)計(jì)通常沒辦法100%實(shí)現(xiàn)，但只要你的支點(diǎn)夠牢，你的設(shè)計(jì)構(gòu)想就能夠最大程度地進(jìn)行還原。

只有真正還原了的設(shè)計(jì)，才構(gòu)成了設(shè)計(jì)的價(jià)值。

就像符合格律的詩歌才有韻味一樣，設(shè)計(jì)師也是戴著鐐銬跳舞的舞者，這些「技術(shù)鐐銬」不是羈絆你舞步的阻礙，相反的，正是因?yàn)榇髦鼈兡氵€能跳得比別人好，你才變得與眾不同，你的設(shè)計(jì)才比別人的更有價(jià)值。

千萬不要讓你的設(shè)計(jì)變成了天馬行空的「大膽構(gòu)想」，想得再好卻缺乏實(shí)現(xiàn)的可能，落地就會(huì)變成薄薄的一層爛泥，那些只是無價(jià)值的設(shè)計(jì)。

二、擁抱限制，尋找技術(shù)邊界

「盡可能地去了解你為之設(shè)計(jì)的系統(tǒng)的性能和限制。這有助于你提升繪制用戶理想流程圖和在設(shè)計(jì)中加入新特色和交互的能力?！?/p>

——Luke Miller，《用戶體驗(yàn)方法論》

要理解開發(fā)思維，就要先解釋一下程序員常常掛在嘴邊的「算法」究竟是什么，只有理解了算法，才算真正理解了開發(fā)思維。

1. 算法的本質(zhì)

算法（Algorithm）是指解題方案的準(zhǔn)確而完整的描述，是一系列解決問題的清晰指令，算法代表著用系統(tǒng)的方法描述解決問題的策略機(jī)制。也就是說，能夠?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è)最簡單的算法，你按下了開關(guān)，電燈亮了。你按下開關(guān)的動(dòng)作是輸入 X，電燈亮是輸出 Y，而從開關(guān)的結(jié)構(gòu)到電線的排布、電源的引入，這一整套電路方案和開關(guān)的設(shè)計(jì)就是算法 U(X)，它解決了按下開關(guān)讓電燈亮的問題。

同樣的，你在微信上長按發(fā)送一段語音，這是輸入 X，朋友收到你發(fā)來的語音，這是輸出 Y，讓這段語音從你的微信到朋友的微信的解決方案，就是算法 U(X)。你還可以繼續(xù)想其他的例子，比如你在京東上下單，把貨物從電商平臺(tái)的倉庫轉(zhuǎn)移到你手里，這也是算法做到的。再比如你女朋友說她想要套房子，那你想盡辦法最終買來房子的過程，當(dāng)然也是算法。

開發(fā)同學(xué)的偉大之處就在于，他們會(huì)很多厲害的算法，能把你的設(shè)計(jì)通過代碼還原成 APP、Web 網(wǎng)站以及各種形態(tài)的軟件產(chǎn)品，你的設(shè)計(jì)方案對于他們來說就是輸入，最終的產(chǎn)品就是輸出。

所以說，上面的這個(gè)方程式 Y=U(X)，其實(shí)就是算法的本質(zhì)：你想要得到輸出 Y，那就給我輸入 X，我會(huì)找到一個(gè)算法 U(X) 幫你解決的。

2. 改變輸入方式

很多同學(xué)會(huì)抱怨開發(fā)同學(xué)水平不行，實(shí)現(xiàn)不了他們的設(shè)計(jì)，這種時(shí)候不妨想想，你給開發(fā)同學(xué)的是不是下面這種傳統(tǒng)的輸入方式：

你的設(shè)計(jì)構(gòu)想是很完美很厲害，但是你給開發(fā)同學(xué)的不過是一張畫滿黑白線框和流程說明的交互稿，以及一張看起來華麗卻不會(huì)動(dòng)的視覺稿，你覺得他們對你的這種輸入方式能理解多少？恐怕只有不到一半吧。剩下的那些，開發(fā)同學(xué)只好自由發(fā)揮了，不然東西做出來可是會(huì)有Bug 的。何況開發(fā)時(shí)間還那么少，老大們可不會(huì)找設(shè)計(jì)師催進(jìn)度。

這下你明白了，在開發(fā)同學(xué)眼中，你給的輸入 X 就這些，我只能盡量用算法實(shí)現(xiàn)我想象中的輸出 Y 了，至于和你想的一不一樣我不知道，先做出來看看再說。

但現(xiàn)實(shí)是殘酷的，最終實(shí)現(xiàn)出來的往往是南轅北轍。

何不試著改變一下輸入方式？

還記得我在《交互設(shè)計(jì)師應(yīng)具備的技能樹（4） ：交互設(shè)計(jì)師的視覺思維》文章里提到的電腦管家小火箭改版嗎？

我們?yōu)樾』鸺匦略O(shè)計(jì)了一套新的發(fā)射動(dòng)畫，相比原來的時(shí)間更短、加速感更強(qiáng)，火箭在上升過程中還會(huì)旋轉(zhuǎn)，確實(shí)很酷。這要靠交互稿和視覺稿當(dāng)然都是說不清楚的，為此我們?yōu)樗隽藗€(gè)高保真視頻 Demo：

開發(fā)同學(xué)：「嗯，看懂了，確實(shí)很快，但快到我都看不清啊，這要怎么做？」

我和視覺：「稍等，我們想想辦法?！?/p>

我們當(dāng)然不會(huì)讓開發(fā)同學(xué)對著視頻一幀一幀研究，他們沒那個(gè)功夫，我們反其道行之。我們用 Visual Basic 語言寫了個(gè)程序 Demo，用一個(gè)很精簡的函數(shù)就實(shí)現(xiàn)了視頻 Demo 中的那種多段加速的動(dòng)畫：

按我們老大的說法，把這套代碼直接丟給開發(fā)就行了，他們能看得懂的。

然而，對方長久的沉默讓我看出了他的心聲：「這什么鬼，懶得研究！」

所以我只好使出「終極大招」，我自學(xué)了 Visual Basic，自己看懂了函數(shù)，然后在紙上一番埋頭苦算，終于給出了一份詳盡的動(dòng)畫「說明書」，

這份說明書包含什么內(nèi)容呢？

• 整個(gè)小火箭的動(dòng)畫，從點(diǎn)擊開始，小火箭每一步的動(dòng)畫分解，細(xì)致到了每毫秒的動(dòng)作；
• 在每毫秒的過程中，每個(gè)組件分別是怎么動(dòng)作的，方向、速度如何，當(dāng)然也包括了小火箭上升的幾段過程的分解；
• 小火箭旋轉(zhuǎn)需要播放一套序列幀動(dòng)畫，開發(fā)能實(shí)現(xiàn)的最小顆粒度是10毫秒播放一幀，我就寫明白了每個(gè)時(shí)刻要從哪一幀播放到哪一幀。

寫完，我?guī)е@份說明書，搬一把椅子就坐在開發(fā)同學(xué)后面了。

「來來來，看這個(gè)，我們一點(diǎn)點(diǎn)改，保證完美還原，效果不好算我的?！?/p>

這樣一來，我們的設(shè)計(jì)支點(diǎn)就提高了，離我們的設(shè)計(jì)構(gòu)想近了很多，最終實(shí)現(xiàn)的效果非常贊。

如果你想要做的是一個(gè)創(chuàng)新型的設(shè)計(jì)，那不妨換成這種「輸入方式」：用高保真原型（Demo）來一比一展示你要的設(shè)計(jì)效果，再通過動(dòng)畫說明書來完整說明設(shè)計(jì)的每一個(gè)細(xì)節(jié)，確保傳達(dá)給開發(fā)同學(xué)的「輸入 X」足夠精準(zhǔn)，這樣他才能夠通過算法來幫你實(shí)現(xiàn)足夠完美的「輸出 Y」。

細(xì)心的朋友可能發(fā)現(xiàn)了，我們在尋找最優(yōu)「輸入方式」的過程中，其實(shí)也用了算法的思維（我們甚至連代碼都寫了），不斷改進(jìn)自己給出的「輸入材料」，才有了最后的「動(dòng)畫說明書」。

3. 模塊化設(shè)計(jì)

為什么每次我們都要這么麻煩地搞什么輸入、輸出和算法？為什么不能把已有的算法給固定下來呢？

當(dāng)然可以，開發(fā)同學(xué)最喜歡的就是把算法給固定下來了，這就是「模塊化」。

熟悉 iOS 平臺(tái)的同學(xué)一定知道，蘋果公司會(huì)給每個(gè)版本的系統(tǒng)都提供「Design Template」（設(shè)計(jì)模板），其實(shí)這些就是開發(fā)同學(xué)在Xcode開發(fā)環(huán)境里可以用的「算法模塊」。如果你設(shè)計(jì)的時(shí)候用的是這些模塊，那他只要修改幾個(gè)參數(shù)就能直接復(fù)用了。

舉個(gè)例子，在 iOS 系統(tǒng)里有種從下往上彈的菜單叫做「Action Sheets」，蘋果的設(shè)計(jì)和開發(fā)人員考慮到了它的各種使用的情況，然后把它包裝成了一個(gè)「算法模塊」。

當(dāng)你要使用的時(shí)候，可以只用1個(gè)「Action」，也可以用3個(gè)甚至更多的「Action」，你甚至還可以用到包含可以橫向滾動(dòng)圖標(biāo)的方案。這一切的修改，對于你來說只是在設(shè)計(jì)模板中復(fù)制粘貼和改幾個(gè)文字而已，對于開發(fā)同學(xué)來說也一樣，他也只要在蘋果給的控件庫里調(diào)出這個(gè) ActionSheets 控件，然后改幾個(gè)參數(shù)就行。

這種極大簡化設(shè)計(jì)和開發(fā)流程的東西，就是算法模塊，主動(dòng)制造這種模塊的過程，就叫做「模塊化設(shè)計(jì)」。

可能看這種控件還沒感覺，再來看看蘋果的官網(wǎng)吧。

這個(gè) iPhone 的產(chǎn)品頁面你一定很熟悉了，它用的其實(shí)就是典型的模塊化設(shè)計(jì)，我們來找找看。

如上圖，其實(shí)它包含了頁面導(dǎo)航模塊、機(jī)型選擇模塊、頁面主副標(biāo)題模塊、相關(guān)鏈接模塊和產(chǎn)品圖片模塊等，這些內(nèi)容都是可以根據(jù)需要自由定制的，只要簡單做一個(gè)更換，就能馬上變成另一個(gè)頁面，如下圖。

是不是很省事？

不要小看模塊化設(shè)計(jì)，用它設(shè)計(jì)出一套好看的頁面之后再復(fù)用，對于設(shè)計(jì)來說就形成了設(shè)計(jì)規(guī)范，而對于開發(fā)同學(xué)來說，他能讓這些代碼變成可復(fù)用的算法模塊 U(X)，以后你可以隨意更換輸入 X，他都能用這個(gè)模塊給你快速地生成你想要的輸出 Y。

因此，時(shí)刻心中都有模塊意識(shí)的交互設(shè)計(jì)師，他會(huì)在合理設(shè)計(jì)頁面功能的情況下，盡可能地復(fù)用設(shè)計(jì)，和視覺設(shè)計(jì)師一起把它們固化成模塊，就像在生產(chǎn)樂高積木一樣。這樣一來，只要完成了主要頁面和主風(fēng)格的設(shè)計(jì)，剩下再多的頁面也不過是一種理性地拼裝和因地制宜地修改而已。

現(xiàn)在你是否明白了為什么開發(fā)們那么喜歡上 GitHub 這類開源網(wǎng)站？就像我們上 Dribbble 和 Behance 尋找設(shè)計(jì)靈感一樣，他們也是在學(xué)習(xí)別人的算法模塊。

相關(guān)閱讀

交互設(shè)計(jì)師應(yīng)具備的技能樹（1）：產(chǎn)品思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（2）：設(shè)計(jì)師的用戶思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（3）：設(shè)計(jì)師的邏輯思維

交互設(shè)計(jì)師應(yīng)具備的技能樹（4） ：交互設(shè)計(jì)師的視覺思維

作者：WingST，騰訊高級交互設(shè)計(jì)師，微信公眾號“落羽敬齋（ID：wingstudy）”

本文由 @WingST 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議