今天帶給大家的案例是使用 Axure 7.0（當(dāng)然 8.0 也是可以的）制作一個九宮格拼圖原型。不過本文只講述實現(xiàn)原理，不講述具體實現(xiàn)步驟，希望小伙伴們能了解思路并自己動手去實踐，因為思考的過程才是最好的學(xué)習(xí)過程。

這個案例已經(jīng)構(gòu)思了很長時間，中間因為沒有思路便放下了一段時間，前幾天有朋友問我能否制作一個九宮格拼圖的原型，于是又重新思考起來。這個原型最燒腦的地方就是圖片移動邏輯的實現(xiàn)，因為只有空位周邊的圖片才可以將其移動到空位上。另外，這個原型有一個無解的BUG，為了實現(xiàn)圖片的隨機排列，導(dǎo)致了有時候生成的隨機圖片無法復(fù)原，也就是無論如何都拼不好，不過這種情況是隨機出現(xiàn)的，有時候也是可以拼好的。

話說何為九宮格拼圖？不說你已經(jīng)懂了！

預(yù)覽地址：http://raedme.cn/axurelab/010_jiugongpintu/

實現(xiàn)原理

好了，接下來就為大家解析一下這個拼圖原型的實現(xiàn)原理（后文較為枯燥，閱讀請謹(jǐn)慎）。

首先，是點擊圖片可以將圖片移動到臨近空白區(qū)域的原理。下面我借助一個模型來講。

這是一個九宮格，在本案例中，九宮格我使用中繼器來實現(xiàn)。九宮格中 A、B、C、D、E、F、G、H 分別代表八張圖片，0 代表空白區(qū)域。此時，可以將圖片 H 或者圖片 F 移動到 0 位置，對應(yīng)的 H 或 F 位置變成空白區(qū)域 0。之后再點擊和 0 相鄰的圖片，遵循相同的移動原理。

那么問題來了，如何判斷我點擊的圖片相鄰位置有一個空白區(qū)域，可以將該圖片移動到空白區(qū)域？此問題是該案例的核心問題，那么我接著用一個模型來給大家講解。

在這個圖中，我為九宮格中的每個區(qū)域加一個坐標(biāo)，用（x，y）來表示，這一步是實現(xiàn)該原型的關(guān)鍵步驟。然后我們來分析一下每個區(qū)域之間坐標(biāo)的關(guān)系。

比如 F 區(qū)和 0 區(qū)之間的關(guān)系，H 區(qū)和 0 區(qū)之間的關(guān)系，其實就是空白區(qū)域和它相鄰四周的區(qū)域的坐標(biāo)關(guān)系。我們可以任意假設(shè)一個區(qū)域為空白區(qū)域，然后分析它上側(cè)、下側(cè)、左側(cè)、右側(cè)區(qū)域的（x，y）坐標(biāo)。經(jīng)過分析之后，我們可以得出一個結(jié)論。

可以用一個表達(dá)式來表達(dá)：

|0.x-相鄰區(qū)域.x|+|0.y-相鄰區(qū)域.y|=1

翻譯一下就是：0 區(qū)域的 x 值減去相鄰區(qū)域的 x 值的絕對值加上 0 區(qū)域的 y 值減去相鄰區(qū)域的 y 值的絕對值等于 1。反過來推也成立，就是如果兩個區(qū)域的（x，y）坐標(biāo)分別求差的絕對值然后再相加等于 1 的話，那么這兩個區(qū)域一定是相鄰的區(qū)域。

通過以上邏輯，我們可以判斷相鄰區(qū)域（上下相鄰 or 左右相鄰），這非常重要。然后我們再判斷一下相鄰區(qū)域的其中一個是否為空白區(qū)域，如果是空白區(qū)域，那么點擊另一個區(qū)域的時候，就可以將其移動到相鄰的空白區(qū)域；如果不是空白區(qū)域，那么點擊無效。

舉例說明：

當(dāng)我點擊 H 區(qū)域的時候，首先要尋找它的相鄰區(qū)域，通過前面介紹的表達(dá)式（|0.x-相鄰區(qū)域.x|+|0.y-相鄰區(qū)域.y|=1）我們可以得到 H 區(qū)域的相鄰區(qū)域為 E、G、0（不要說你一看就知道，你一看就知道，但是中繼器在運行的時候是不知道的，只能通過邏輯判斷來獲得）。

然后再判斷這些相鄰區(qū)域中是否有一個區(qū)域是空白區(qū)域，這個我們可以通過給中繼器的數(shù)據(jù)集中加上一個標(biāo)記字段來標(biāo)記空白區(qū)域，這一步的實現(xiàn)較為簡單。

這個例子中可以得知空白區(qū)域是 0 ，因此可以將 H 移動到 0 區(qū)域。

如果點擊的區(qū)域是 E，那么其相鄰的 4 個區(qū)域中就找不到空白區(qū)域，因此點擊區(qū)域 E 就不會發(fā)生移動。

好了，基于以上邏輯，就可以實現(xiàn)九宮格拼圖的核心功能了——點擊圖片移動到相鄰的空白的區(qū)域，如果相鄰沒有空白區(qū)域，就不移動。

但是接下來還有另外一件事情就是，如何使拼圖圖片可以隨機排列，并且每次原型載入時排列的順序都不一樣。

這 一效果的實現(xiàn)我在以前的案例中都有講過，可以通過給中繼器的數(shù)據(jù)集增加一個排序字段，然后給排序字段賦值為隨機數(shù)，之后為中繼器增加排序。因為每次中繼器 數(shù)據(jù)集中的每行數(shù)據(jù)的排序字段的值都不一樣，所以每次排序的結(jié)果會不一樣。但是在本案例中需要考慮到要把空白區(qū)域始終排在最末尾，因此該數(shù)據(jù)項的排序字段 需要做一個特殊的處理。

到這里九宮格拼圖的主要實現(xiàn)邏輯就講完了，不知道小伙伴們能否看得懂。具體的實現(xiàn)步驟，小伙伴們勇敢的去探索吧。

作者：大鵬，微信：urmagic，可一起交流原型設(shè)計問題，歡迎騷擾。

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