如何使用 excel 設(shè)計(jì)低保真稿？

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

圖1.1

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

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

下面是我制作的過(guò)程：

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

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

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

圖1.2

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

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

因?yàn)槭紫鹊谝徊绞谴_定柵格和間距，使得卡片的排布更加規(guī)律。這一步可以通過(guò)調(diào)整excel上方工具欄里面的“版式（format）”來(lái)實(shí)現(xiàn)。點(diǎn)開之后可以分別調(diào)整行高和列寬（如圖1.3）。

圖1.3

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

圖1.4

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

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

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

（圖1.5）

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

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

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

圖1.6

2.2 快速?gòu)?fù)用

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

圖1.7

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

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

圖1.8

3. 美化設(shè)計(jì)稿

3.1 基本布局排布

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

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

3.2 色彩化以及豐富化

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

圖2.0

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

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

圖2.1

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

圖2.2

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

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

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

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