這次我們來講一講產(chǎn)品設計中的線框圖。

產(chǎn)品設計，一般包括對產(chǎn)品框架/內(nèi)容的梳理，業(yè)務流程的理解，再到線框圖的繪制，原型的設計，最后產(chǎn)出規(guī)范的設計稿。在這其中，令我花費最多時間、精力的往往是線框圖的設計。因為這是承上啟下的一環(huán)，既包含著對產(chǎn)品框架、業(yè)務流程的驗證，也將影響視覺、程序、測試同事的工作。

在開始線框圖設計之前，我們來看一看什么ToC產(chǎn)品、ToB產(chǎn)品

ToC產(chǎn)品，例如微信、網(wǎng)易云音樂、新浪微博等。對這類產(chǎn)品來說，產(chǎn)品設計需要提供一個清晰明了的信息架構(gòu)，讓用戶能很自然的使用產(chǎn)品。因為ToC產(chǎn)品面對的是海量的用戶、不同的用戶群體，所有要盡量降低學習成本，達到易用、高效。ToC產(chǎn)品可以通過減法來使架構(gòu)更加輕量化，從而達到易用、高效的目的。

ToB產(chǎn)品，例如工作關(guān)系管理系統(tǒng)、大型功能類系統(tǒng)、業(yè)務支持系統(tǒng)等。對這類產(chǎn)品來說，產(chǎn)品設計需要提供一個邏輯嚴密、功能完備的信息架構(gòu)，讓用戶能按照操作流程順利無誤的使用各項功能。這樣的繁重架構(gòu)往往會一定的學習成本，但因ToB產(chǎn)品本身用戶群體就比較聚焦，往往使用人員要經(jīng)過長時間的培訓才能上崗。使用場景更是復雜，每個產(chǎn)品都有幾十個甚至上百個的使用場景。所以ToB產(chǎn)品無法通過減法使產(chǎn)品輕量化，而是要對用戶的業(yè)務流程進行深入的了解，從而對產(chǎn)品的功能進行梳理與整合，聚焦核心使用場景。

ToB產(chǎn)品相對于ToC產(chǎn)品，難點在于：要對一個陌生的業(yè)務領(lǐng)域進行深入的了解，這本身就已經(jīng)是一個巨大的挑戰(zhàn)。并且相對ToC產(chǎn)品，用戶群體已不是我們身邊的人，而是一個完全陌生的專業(yè)的用戶群體，所以用戶研究變得更加重要。用戶群體的陌生，業(yè)務的復雜導致了ToB產(chǎn)品對交互設計師的要求更加高。要求設計師擁有極高的業(yè)務理解能力以及對全局的把控能力。即使你不是做B端產(chǎn)品的，相信你看了這篇文章后，也會有感悟。

今天，我就以我自身從事ToB產(chǎn)品設計的經(jīng)驗，來聊一聊線框圖。

在繪制線框圖時，我們應該有一種縱觀全局的理念。只有產(chǎn)品爛熟于心，才能畫出優(yōu)秀的線框圖。并且在線框圖階段要時刻反問自己三個問題：

1. 是否已經(jīng)將用戶的使用路徑減少到最短？
2. 是否符合用戶的使用習慣？
3. 是否已經(jīng)將信息最精簡、最直觀的顯示出來

一、準備

在開始線框圖的設計前，最好對產(chǎn)品框架/內(nèi)容，業(yè)務流程，用戶群體擁有足夠的了解，并且確定這些內(nèi)容是經(jīng)得起推敲的。否則在設計完成后，不免會遇到需要將整個線框圖推倒重來的風險。

二、構(gòu)思

在繪制線框圖時，你需要有一個概念，結(jié)合用戶場景，構(gòu)建出你產(chǎn)品的“氣質(zhì)”。比如：你要做一款移動端的APP，你的概念是：吸引用戶的注意力，讓用戶花更多時間在你這個APP上，那你可以結(jié)合移動端的場景，線框圖盡量采取可視化的圖形，吸引用戶的注意力，采用拖拽、滑動的操作方式，方便用戶使用；整體營造出一個“沉浸式”的設計。在構(gòu)思這一步，應該對產(chǎn)品最終的設計風格，交互方式有一定的想法，記錄下來，在后面視覺設計、動效設計時，這可是一筆不可多得的財富。

三、動筆

1.對頁面進行布局的規(guī)劃。

將整個產(chǎn)品的頁面進行分類，進而對整個產(chǎn)品的布局進行劃分。（部分特殊頁面布局可能會相應改變）

2.將頁面的內(nèi)容羅列出來，細究各個內(nèi)容的表現(xiàn)方式，最終再進行排版。

將每個頁面中的內(nèi)容按類型&重要程度進行分類，在這就要求我們對用戶任務流程、業(yè)務流程有足夠深的理解，才又快又好的完成這部分工作。分類完成后，我們再細究每種類型內(nèi)容的表現(xiàn)形式（常用的表現(xiàn)形式為：大小、顏色、對比度、圖形化）。最后，將我們不斷思考、斟酌的頁面內(nèi)容放入我們已經(jīng)設計好的布局中，再進行排版，這樣我們的設計草圖就已經(jīng)完成了。

3.將設計草圖轉(zhuǎn)換為設計稿

將原本在紙上的設計草圖，轉(zhuǎn)化為電子版的設計稿，更加方便團隊內(nèi)部的評審、修改。

今天就廢話到此啦，謝謝各位的觀看

作者：Rack 授權(quán)轉(zhuǎn)載

原文地址：http://www.jianshu.com/p/7805bc8d7593