編輯導(dǎo)讀：產(chǎn)品設(shè)計(jì)的穿透力怎么表現(xiàn)？穿透意味著打破界限，從表面到內(nèi)核，從表象到本質(zhì)。需要把一個(gè)點(diǎn)打穿打透，需要的不僅僅是一個(gè)烏托邦的幻象，更多需要深入到 real world 當(dāng)中，感知更多的限制、連接。本文以智能柵格工具的設(shè)計(jì)開發(fā)為例，來看看怎么表達(dá)設(shè)計(jì)的穿透力。

今天想和大家分享一下智能柵格工具的整個(gè)設(shè)計(jì)開發(fā)的過程，并從中感受到設(shè)計(jì)的「穿透力」。

什么是穿透力？穿透意味著打破界限，從表面到內(nèi)核，從表象到本質(zhì)。需要把一個(gè)點(diǎn)打穿打透，需要的不僅僅是一個(gè)烏托邦的幻象，更多需要深入到 real world 當(dāng)中，感知更多的限制、連接。

一、初版方案與實(shí)現(xiàn)思路

經(jīng)過初步討論后的第一版設(shè)計(jì)基本可以作為 demo 開發(fā)，但是存在一個(gè)不明確的地方就是居中按鈕。

這個(gè)方案的設(shè)計(jì)完全借鑒了 Sketch 的布局界面，但是 sketch 的這個(gè)居中按鈕其實(shí)挺令人匪夷所思的，往往不知如何使用。

經(jīng)過一番討論后，我們一致認(rèn)為這個(gè)按鈕應(yīng)該放在柵格總寬邊上，表示需要對柵格進(jìn)行調(diào)整。同時(shí)為了便于預(yù)覽，最好給柵格預(yù)覽區(qū)加上相應(yīng)的寬度值，大致如下：

以上是我們作為設(shè)計(jì)師的視角，經(jīng)過兩輪討論，得出來的設(shè)計(jì)結(jié)果。到這一步，我們都可以認(rèn)為這個(gè)版本算是一個(gè)合格的柵格工具。

然后我作為工具的實(shí)現(xiàn)方，我準(zhǔn)備先大致明確開發(fā)順序。在這個(gè)窗口的實(shí)現(xiàn)上從易到難，應(yīng)該為：靜態(tài)柵格實(shí)現(xiàn)->柵格響應(yīng)實(shí)現(xiàn)。

所以我決定開發(fā)順序是這樣：

靜態(tài)柵格預(yù)覽渲染 -> 柵格參數(shù)面板 -> 柵格動態(tài)響應(yīng) -> 生成柵格 。

二、靜態(tài)柵格：柵格生成公式解析

繪制靜態(tài)柵格包含兩部分工作，第一部分是左右布局的柵格，第二部分是居中布局的柵格。

我的思路是先確定一下左右布局和居中布局的計(jì)算公式，然后在實(shí)現(xiàn)的時(shí)候就可以有清晰的實(shí)現(xiàn)手段了。

在紙上一通演算，我突然發(fā)現(xiàn)左右布局和居中布局的計(jì)算公式其實(shí)是不一樣的：

左右布局： 畫板寬度 A = 左側(cè)偏移寬度L + 兩側(cè)間距M 2 + 柵格總寬G居中布局： 畫板寬度 A = 兩側(cè)間距M 2 + 柵格總寬G

乍一看似乎兩者沒什么區(qū)別呀？不就是左側(cè)偏移距離L 在居中布局的時(shí)候變?yōu)?0 了嗎？為啥不統(tǒng)一成一個(gè)呢？

從公式里去看，背后的原因是這樣：

針對左右布局的柵格，我們需要去調(diào)整A、L、M、G 四個(gè)值，然后調(diào)整一個(gè)改變其他值；

而在居中模式下，我們只需要去調(diào)整 A、M 和 G 三個(gè)值（因?yàn)?L 變成了 0 ）。所以由于公式上少了一個(gè) L，所以我們不必要也不應(yīng)該在居中模式下，讓 L 這個(gè)參數(shù)出現(xiàn)。

或許從程序員視角來說，統(tǒng)一成一個(gè)更加便于開發(fā)。但是從設(shè)計(jì)師的角度來看，這其實(shí)對設(shè)計(jì)的帶來了新的啟示：

我們不應(yīng)該用一個(gè)居中按鈕去實(shí)現(xiàn)柵格居中的效果，而應(yīng)該采用不同的模式區(qū)分不同的布局類型。

所以在實(shí)現(xiàn)這個(gè)參數(shù)面板的時(shí)候，我們選擇了使用選擇器的方式呈現(xiàn)不同的布局模式，同時(shí)在居中布局下去掉了【側(cè)邊欄寬】這個(gè)參數(shù)。

到這個(gè)時(shí)候，我們再去對比 Sketch 的柵格布局面板，已經(jīng)能夠感知到明顯不同了。而這一步，只是由于深入了一下布局柵格的計(jì)算規(guī)則帶來的。

這是第一層，設(shè)計(jì)穿透了柵格布局計(jì)算公式。

三、智能柵格：動態(tài)響應(yīng)規(guī)則設(shè)計(jì)

當(dāng)初步完成上述的柵格顯示，下一步就是要允許用戶自定義柵格參數(shù)。這就立即帶來了一個(gè)問題：修改柵格公式中的某個(gè)參數(shù)，其余參數(shù)應(yīng)該如何相應(yīng)？

事實(shí)上，在上一部分講到的柵格計(jì)算公式只是一個(gè)簡化版本。因?yàn)槲覀儧]有展開柵格寬度的計(jì)算公式。完整的計(jì)算公式應(yīng)該是這樣（以左右布局為例）：

畫板寬度 A = 左側(cè)偏移寬度L + 兩側(cè)間距M 2 + 柵格列數(shù)L 柵格寬度W + （柵格列數(shù)L – 1）* 柵格槽寬T

如果照著這個(gè)公式去思考，我想是個(gè)人頭都要大了，一個(gè)參數(shù)變化，需要考慮其他 5 個(gè)參數(shù)的相應(yīng)。其實(shí)我在第一步分析公式的時(shí)候，就是這么列的，結(jié)果就是很難往下推進(jìn)開發(fā)，公式太過復(fù)雜，不知道如何算。

所以我又回過頭來思考了下柵格修改的場景，發(fā)現(xiàn)修改畫板、偏移寬度等總寬值時(shí)，用戶對柵格內(nèi)部的狀態(tài)不會太關(guān)注。所以針對總寬的參數(shù)，我們就應(yīng)該使用這樣兩個(gè)公式：

左右布局： 畫板寬度 A = 左側(cè)偏移寬度L + 兩側(cè)間距M 2 + 柵格總寬G居中布局： 畫板寬度 A = 兩側(cè)間距M 2 + 柵格總寬G

再結(jié)合柵格修改時(shí)設(shè)計(jì)師的設(shè)計(jì)意圖判斷，我從中總結(jié)了 7 條規(guī)則：

在左右邊距模式下：

• 修改畫板寬度 A 時(shí)，往往希望柵格總寬 G 變化，即 A?? ~ G??；
• 修改左側(cè)偏移寬度 L 時(shí),往往希望柵格總寬 G 變化，即 L?? ~ G??；
• …. (更多的就不列了)

到這一步，我只是理清楚了總寬類參數(shù)響應(yīng)規(guī)則，但是還沒有對柵格內(nèi)部的參數(shù)進(jìn)行分析。接下來就需要對柵格總寬的計(jì)算公式進(jìn)行下鉆分析。

柵格總寬 G = 柵格列數(shù)L 柵格寬度W + （柵格列數(shù)L – 1） 柵格槽寬T

按照同樣的思路，我得出了4條規(guī)則：

• 修改柵格總寬 G 時(shí)，往往希望柵格寬度 W 變化，即 G?? ~ W??；
• 修改柵格列數(shù) L 時(shí)，往往希望柵格寬度 W 變化，即 L?? ~ W??；
• 修改柵格槽寬 T 時(shí)，往往希望柵格寬度 W 變化，即 T?? ~ W??；
• 設(shè)計(jì)師幾乎不會去主動修改柵格寬度；

當(dāng)總結(jié)完以上11 條規(guī)則時(shí)，在設(shè)計(jì)端上我有兩個(gè)新的認(rèn)知：

1. 修改布局和修改柵格應(yīng)該分兩個(gè)部分分別呈現(xiàn)；
2. 不必給出修改柵格寬度W的配置項(xiàng)。

所以在設(shè)計(jì)端最后的配置參數(shù)呈現(xiàn)如下（基本驗(yàn)證了第二版設(shè)計(jì)方案的正確性）

而將上述這 11 條規(guī)則結(jié)合起來，并通過代碼實(shí)現(xiàn)后，柵格就具有了智能動態(tài)響應(yīng)的效果。由于這11條規(guī)則直接來源于設(shè)計(jì)師的認(rèn)知經(jīng)驗(yàn)，可以基本保證用戶的使用體驗(yàn)如絲般順滑，仿佛背后不存在設(shè)計(jì)一樣。

這是第二層，設(shè)計(jì)穿透了柵格變更的響應(yīng)規(guī)則。

一個(gè)小插曲：在最初的時(shí)候（大約是Microwave 0.3.1），我走進(jìn)了一個(gè)誤區(qū)，在柵格總寬變化時(shí)，讓柵格寬度和柵格槽寬等比縮放。結(jié)果帶來的問題就是：每次修改完柵格總寬后，都需要人為手動地重新修改一遍柵格槽寬。由于我對響應(yīng)規(guī)則判斷出錯(cuò)，導(dǎo)致使用體驗(yàn)存在不必要的冗余操作，這就是一個(gè)規(guī)則考慮不周的典型反例。

四、柵格生成：簡潔與易用的妥協(xié)與平衡

利用 Sketch 的JS API，我很快就實(shí)現(xiàn)了柵格的創(chuàng)建。如下左圖所示，是不是看上去非常簡潔？但是你有沒有看出其中的問題？

問題就是：這些智能柵格其實(shí)是由一堆圖層組成的。而在 Sketch 中，大家也知道，一旦成組之后，這些柵格圖層就失去了非常重要的能力：吸附。一旦沒了吸附，這個(gè)柵格工具就失去了大部分的意義。如果需要吸附，那么必須將這個(gè)組打散，這就會導(dǎo)致畫板中平白無故會多出 20+的柵格圖層。

這個(gè)時(shí)候，你覺得應(yīng)該怎么做？是為了簡潔，忍痛割掉柵格吸附的能力？還是為了吸附的能力犧牲圖層上的簡潔？

綜合考量，我給本來很簡潔的面板多加了一個(gè)【吸附模式】切換器，打開這個(gè)模式后，不會對柵格圖層進(jìn)行編組，從而保持原有的吸附能力。通過這樣曲折的方式了解決 Sketch 的這個(gè)問題。（這里又要罵一句辣雞的 Sketch 了）

這是第三層，設(shè)計(jì)穿透了 Sketch 的能力，繞過了已有的限制。

PS：在后來的迭代過程中，我發(fā)現(xiàn)了更上游的解決方案，所以后來又把這個(gè)模式取消了。

五、智能適配：柵格基礎(chǔ)能力的升華

其實(shí)在完成上述那些功能之后，我自己感覺這個(gè)柵格工具已經(jīng)接近“擊穿”的狀態(tài)，似乎沒有更多更大快的地方可以優(yōu)化了。但是，我仍然感覺到這個(gè)智能柵格工具并沒有那么“智能”，仿佛圍繞了這個(gè)“智能”做了很多很多的工作，但是就是還有一層紙擋在那邊，沒有捅破。

于是我與幾位同學(xué)進(jìn)行溝通，其中一位同學(xué)的一句話間把這層紙捅破了：“要是這個(gè)柵格能夠幫我自動去匹配上柵格就好了?！蔽彝蝗幌氲角岸斯こ讨泻苤匾囊粋€(gè)能力是 lint，即校驗(yàn)與自動修復(fù)代碼中的空格、標(biāo)點(diǎn)等錯(cuò)誤。

瞬間我的心中豁然開朗。柵格是什么？是布局的規(guī)范，同樣應(yīng)該也是校驗(yàn)與修復(fù)工具。一個(gè)合格的柵格工具，除了前面基礎(chǔ)的柵格生成、修改、校驗(yàn)（相當(dāng)于 Sketch 的吸附），也應(yīng)該提供自動修復(fù)的能力。于是我連夜把這個(gè)功能實(shí)現(xiàn)了出來。

這個(gè)能力的實(shí)現(xiàn)并不復(fù)雜，甚至非常簡單（用了不到 30 分鐘），但是對于整個(gè)柵格工具卻是升華般的存在。

這是最后一層，設(shè)計(jì)穿透了平臺的能力枷鎖，帶來了工具質(zhì)的飛躍。

在小組周會上演示這個(gè)功能時(shí)，大家都不約而同地鼓起掌來，足以證明這個(gè)能力有多被認(rèn)可。

六、一點(diǎn)總結(jié)和感想

1. 設(shè)計(jì)的穿透力

越接近底層，需要掌握和了解的東西也越多，但另一方面，也帶來了足夠大的優(yōu)化空間。如何全面分析和所有相關(guān)的限制條件，在這些限制條件下找出設(shè)計(jì)上的最優(yōu)解法，我認(rèn)為這就是設(shè)計(jì)的穿透力。

2. 工具與思維限制

工具不會限制人們的思考，但會潛移默化的影響人們思考的模式。 —— 前電腦時(shí)代的建筑圖紙是什么樣的？是怎么畫成的？

曾經(jīng)在知乎看到過上面這一句話，現(xiàn)在再復(fù)盤這個(gè)工具的設(shè)計(jì)開發(fā)過程中，我對這句話又有了更深入的體會。

因?yàn)?Sketch 只有吸附功能，所以在設(shè)計(jì)和開發(fā)的時(shí)候，我就完全被 Sketch 已有的能力牽著鼻子走，為了「吸附」功能，繞彎路實(shí)現(xiàn)了吸附模式，而沒有去往上一層去思考出「適配」的能力。

事實(shí)上，在前端工程中，早已有 ESLint、Prettier 等自動約束和修正的工具。但是在設(shè)計(jì)側(cè)似乎一切都在刀耕火種時(shí)代，工具鏈的貧瘠導(dǎo)致無法孕育出工程化的思想。

這種時(shí)候，打破思想限制的最有效的方式，就是多獲得不同領(lǐng)域的信息輸入。很有可能當(dāng)前領(lǐng)域的問題，在其他領(lǐng)域已經(jīng)有成熟的解決方案了。所以我也愈發(fā)感覺到交流的必要性。

3. 設(shè)計(jì)工程化

所謂設(shè)計(jì)工程化需要的是類似前端工程中一樣的 lint 工具，能夠?qū)Υ蟮筋伾?、字體、字號，小到圖層命名進(jìn)行相應(yīng)的約束與自動修復(fù)。

同時(shí)，工程化這個(gè)概念，也不應(yīng)該靠大家喊出來、逼出來的。而是順應(yīng)時(shí)代的發(fā)展，自然而然的事情。TechUI 周會結(jié)束的時(shí)候，有人跟我說，“我之前覺得柵格沒有什么用，但是你這個(gè)東西一出來，就立馬覺得柵格好有用?！蔽蚁脒@就是所謂的自然發(fā)生吧。

4. 我們需要哪種布局

我們需要的真的是自由畫布嗎？至少從柵格這個(gè)工具來說，完全的自由反而是降低效率。如果能夠給出一定的限制，反而會使得我們的設(shè)計(jì)效率提升。因?yàn)槲覀儾槐匾P(guān)心三等分的組件，每一等分的具體值是多少，我們只需要關(guān)系是正確的三分了即可。所以限制不一定降低效率，有目的的限制反而能夠提升效率。

作者：空谷，螞蟻集團(tuán)設(shè)計(jì)師

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

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