如何使用 excel 設計低保真稿？

作為一個經常使用sketch作圖的設計師，的確用作圖軟件做起交互稿會比較美觀好看，但是由于需求還未完全落地，中間涉及到的改動比較多，包括每個卡片里的數據也都在隨著產品經理與三方運營的溝通不斷變化。所以這時候如果運用sketch來做大量的模板，改動起來的成本會比較高。

圖1.1

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

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

下面是我制作的過程：

1. 設計卡片模板

1.1 實例數據的搜集

這是一個單調但積少成多的過程。首先我們要根據經驗去尋找一些相關的實例數據。比如說我們要設計一張機票，那么我們就要積累一些素材。可以從相關的旅游app中搜集，也可以拿出平時自己的實體票據對應查看。這些數據可以先在excel中以表格的形式列出。

圖1.2

1.2 設定柵格與間距

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

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

圖1.3

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

圖1.4

1.3 優先級分階布局

站在設計的角度上看，當很多信息同時出現的時候，需要有一個主次的區分，便于用戶閱讀。所以設定柵格之后，首先做的第一件事，是構思一下布局詳略的區分。

大致可以考慮幾種區分的方式：

（圖1.5）

2. 數據的聯動

2.1 跨窗口數據聯動

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

圖1.6

2.2 快速復用

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

圖1.7

2.3 數據之變換

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

圖1.8

3. 美化設計稿

3.1 基本布局排布

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

再將字體的大小、粗細進行調節，形成視覺上的重心。

3.2 色彩化以及豐富化

適當加入色彩、圖標等，美化視覺效果。

圖2.0

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

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

圖2.1

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

圖2.2

小結+應用一覽

除了制作上述的內容，擴展一下，用excel還能根據不同業務的設計做出設計：

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

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