你有嘗試過用Excel設(shè)計低保真稿嗎？具體應(yīng)該如何操作呢？

近期在做一個搜索相關(guān)的項目，里面涉及到大量不同服務(wù)相關(guān)的搜索結(jié)果卡片。誠然，作為一個經(jīng)常使用sketch作圖的設(shè)計師，的確用作圖軟件做起交互稿會比較美觀好看，但是由于需求還未完全落地，中間涉及到的改動比較多，包括每個卡片里的數(shù)據(jù)也都在隨著產(chǎn)品經(jīng)理與三方運營的溝通不斷變化。所以這時候如果運用sketch來做大量的模板，改動起來的成本會比較高。

圖1.1

比如上圖1.1的訂票卡片，看上去信息似乎挺完整，但從業(yè)務(wù)上看，一等座，剩余座位，列車號需不需要顯示呢？再加個延誤狀態(tài)？可以加廣告位不？要不要加上時間，地點，日期？檢票口？數(shù)據(jù)的優(yōu)先級怎么排布比較好？是價格優(yōu)先呢？還是班次優(yōu)先？還是檢票口優(yōu)先呢？

因此我希望嘗試制定一套將數(shù)據(jù)與低保真稿子融合于一體的excel低保真庫，目前還在進行中，如果大家有什么建議也歡迎隨時一起探討。

下面是我制作的過程：

1. 設(shè)計卡片模板

1.1 實例數(shù)據(jù)的搜集

這是一個單調(diào)但積少成多的過程。首先我們要根據(jù)經(jīng)驗去尋找一些相關(guān)的實例數(shù)據(jù)。比如說我們要設(shè)計一張機票，那么我們就要積累一些素材?？梢詮南嚓P(guān)的旅游app中搜集，也可以拿出平時自己的實體票據(jù)對應(yīng)查看。這些數(shù)據(jù)可以先在excel中以表格的形式列出。

圖1.2

1.2 設(shè)定柵格與間距

具備了基本的數(shù)據(jù)之后，我們就可以開始設(shè)計低保真布局了。新建一個表！我們現(xiàn)在有兩個表了。剛剛的是數(shù)據(jù)表，這個是專門設(shè)計低保真布局的表。我們暫且命名為“數(shù)據(jù)表”和“布局表”。

因為首先第一步是確定柵格和間距，使得卡片的排布更加規(guī)律。這一步可以通過調(diào)整excel上方工具欄里面的“版式（format）”來實現(xiàn)。點開之后可以分別調(diào)整行高和列寬（如圖1.3）。

圖1.3

調(diào)整之后的柵格圖類似于圖1.4這樣，具體可以根據(jù)個人的習(xí)慣來調(diào)整，我個人會習(xí)慣調(diào)整成比較密的柵格，這樣排布形式會比較靈活。。

圖1.4

1.3 優(yōu)先級分階布局

站在設(shè)計的角度上看，當(dāng)很多信息同時出現(xiàn)的時候，需要有一個主次的區(qū)分，便于用戶閱讀。所以設(shè)定柵格之后，首先做的第一件事，是構(gòu)思一下布局詳略的區(qū)分。

大致可以考慮幾種區(qū)分的方式：

（圖1.5）

2. 數(shù)據(jù)的聯(lián)動

2.1 跨窗口數(shù)據(jù)聯(lián)動

在制定了基本的布局和框架之后，就可以將第一步中的積累的數(shù)據(jù)(見圖1.2)關(guān)聯(lián)同步到布局之中。這里面有個技巧，就是關(guān)聯(lián)的時候，需要在上方excel自帶的文本框中填寫“=數(shù)據(jù)表！B1”。數(shù)據(jù)表是數(shù)據(jù)來源，B1是被關(guān)聯(lián)數(shù)據(jù)的行列編號。

圖1.6

2.2 快速復(fù)用

利用excel自帶的復(fù)制效果，就可以快速將相同的行進行復(fù)制。這個可用于有大量重復(fù)列表的頁面。比如設(shè)置頁，新聞流頁，聯(lián)系人頁等。

圖1.7

2.3 數(shù)據(jù)之變換

日期，金額等有規(guī)律變化的數(shù)字，都可以進行快速拖拽復(fù)制，在拖拽的過程中，excel會順帶進行有規(guī)律的變化。比如圖1.8所示，日期會變成順序日期，類別的編號也會遞增，這樣就不需要手動去修改了。

圖1.8

3. 美化設(shè)計稿

3.1 基本布局排布

將表格里面的數(shù)據(jù)有主次地排布成手機界面的形式（此處使用上文的“跨窗口數(shù)據(jù)聯(lián)動”）

再將字體的大小、粗細進行調(diào)節(jié)，形成視覺上的重心。

3.2 色彩化以及豐富化

適當(dāng)加入色彩、圖標等，美化視覺效果。

圖2.0

注意到其中用了大量的圖片、icon元素，其實這些本質(zhì)上都是西東自帶的標點、emoji表情。系統(tǒng)里面的標點表情其實特別豐富，里面包含了很多設(shè)計需要使用的元素。

比如下方圖2.1，左邊的頁面就是由右邊的幾個基本表情+部件+文字構(gòu)成。不同的電腦系統(tǒng)調(diào)出表情的方式可能不同，如果是mac系統(tǒng)，輸入文字時，用ctrl+command+空格可調(diào)出系統(tǒng)圖標庫。其他的方式，比如輸入法也會自帶表情圖標。

圖2.1

為了查詢或者使用方便，我將最近經(jīng)常使用的表情類別進行了一個歸類，希望對大家有幫助。

圖2.2

小結(jié)+應(yīng)用一覽

除了制作上述的內(nèi)容，擴展一下，用excel還能根據(jù)不同業(yè)務(wù)的設(shè)計做出設(shè)計：

我發(fā)現(xiàn)這樣做的另外一個好處就是，這樣子設(shè)計出來的文檔，可以在產(chǎn)品經(jīng)理、運營、開發(fā)者、視覺設(shè)計師等多個角色中流通，產(chǎn)品、運營可以隨時在上面增刪自己想要的數(shù)據(jù)，視覺設(shè)計師也可以在上面復(fù)制取用想要的文字信息。

另外這個文檔還可以成為一個信息庫，未來如果需要轉(zhuǎn)化成設(shè)計稿，這些文字就是比較真實的占位符，可以輔助將設(shè)計快速填充得更加真實。

以上就是一點關(guān)于低保真+溝通+積累的思考，與大家分享~

補充一下：由于在評論里有些盆友問說可不可以看一下源文件，所以我上傳了一份到網(wǎng)盤供大家參考：

Excel低保真示例

提取碼：hhmu

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

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