如何用Excel設計低保真稿?

34 評論 23069 瀏覽 101 收藏 10 分鐘

你有嘗試過用Excel設計低保真稿嗎?具體應該如何操作呢?

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

圖1.1

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

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

下面是我制作的過程:

1. 設計卡片模板

1.1 實例數據的搜集

這是一個單調但積少成多的過程。首先我們要根據經驗去尋找一些相關的實例數據。比如說我們要設計一張機票,那么我們就要積累一些素材??梢詮南嚓P的旅游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還能根據不同業務的設計做出設計:

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

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

以上就是一點關于低保真+溝通+積累的思考,與大家分享~

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

Excel低保真示例

提取碼:hhmu

 

本文由 @交互小怪獸 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 本人交互設計師一枚,常用Axure、Sketch,設計的本質是信息轉換、傳遞,利用EXCEL做原形稿,降低了學習成本,最主要提高了溝通效率,這還真是活久見,感謝分享。

    來自廣東 回復
  2. 流弊了

    來自香港 回復
  3. 當年做電商行業的時候,運營都會給個ue圖,和這個很相似,不過沒有這么多圖標,也沒這么精美。厲害了作者。!

    來自河南 回復
  4. 電商運營普遍用的都是樓主所說的excel線框。時間緊任務重可能沒樓主做的這樣精美。
    剛開始做產品運營的時候,確實用excel信息流轉會比較高效。

    來自浙江 回復
    1. 哦你們也是這樣的哈?我這邊其實也是運營先來的需求,然后為了跟大家配合這樣子來設計,感覺效率高些而且大家可以一起修改

      回復
  5. 很厲害,同求樣例

    來自北京 回復
    1. 嗯嗯 我在文末更新了哈

      回復
    2. 嗯嗯 我更新在文末了哈,請知

      回復
  6. 樓主,求一份excel設計樣例 ? ? ? 謝謝~~~
    百度網盤:處女座高萌

    來自內蒙古 回復
    1. 哈哈 我統一分享了哈,在文章后面你看能否下載

      回復
  7. 孔乙己說:回字有四種寫法,你知道嗎?

    來自江蘇 回復
    1. 哈?這個梗我好像接不上T.T

      回復
  8. 太厲害了

    來自天津 回復
  9. 厲害??,應用的很棒啊

    來自廣東 回復
  10. 樓主,同求一份設計樣例,好好學學,我覺得用excel做數據分析的圖表很方便

    來自北京 回復
    1. 嗯嗯 已上傳在文末,可以看下哈

      回復
  11. 哈哈哈好可愛

    來自廣東 回復
  12. 想當年產品經理還未興起,我做運營的那段日子,做應用專題的時候就是用excel畫的框架,但你做的更高級。

    來自廣東 回復
    1. 哇那可以多多交流下經驗呢,共勉共勉

      回復
  13. Axure的中繼器不好用嗎

    回復
  14. 牛啊~想當年我第一份網頁布局設計也是用excel做的,不過沒這么漂亮

    來自廣東 回復
    1. :)謝謝謝謝

      回復
  15. 請問樓主可以云盤共享一份excel設計樣例嗎? 謝謝

    來自湖北 回復
    1. 嗯嗯可以哦,我晚點上傳到網盤共享一下

      回復
    2. 求網盤鏈接和提取碼,蟹蟹

      來自上海 回復
    3. 嗯嗯 可以看下文末,我昨天上傳了一下,不蟹哦

      回復
    4. 現下載,回頭仔細學習! 贊有才愛分享的樓主!

      來自湖北 回復
    5. 在嘗試學習你的方法。 請教如何在數據表中輸入 圖標icon?
      順便請問有沒有免費的圖標 icon網站可以批量下載?

      謝謝

      來自湖北 回復
    6. 至尊寶你好,如果是mac電腦,可以使用mac自帶的表情輸入,然后如果不是,也可以嘗試用輸入法的表情哈

      回復
  16. 很受啟發。適合我這種習慣用excel的人! Mark

    來自湖北 回復
  17. 如果熟練了,比axure都少了一步拖拽和調整大小??

    回復
    1. 謝謝axure專家:)

      回復
  18. 牛批,請收下我的膝蓋

    來自四川 回復
    1. 哈哈謝謝~

      回復