你真的會畫線框圖嗎？2015.8.7課件

你真的會畫線框圖嗎？什么是線框圖線框圖是產(chǎn)品設(shè)計的低保真呈現(xiàn)方式。它有三個簡單直接而明確的目標(biāo)：1、呈現(xiàn)主體信息群2、勾勒出結(jié)構(gòu)和布局3、用戶交互界面的主視覺和描述正確地創(chuàng)建了線框圖之后，它將作為產(chǎn)品的骨干而存在。它就像一幢建筑的藍(lán)圖一樣，將細(xì)節(jié)規(guī)定地明明白白。畫好線框圖的幾件小事通過明暗對比表達(dá)不使用截圖與顏色合理的布局及間距遵守柵格規(guī)范標(biāo)記第一屏高度了解視覺趨勢表達(dá)清楚UI邏輯使用真實、符合邏輯數(shù)據(jù)內(nèi)容不遺漏特殊狀態(tài)的描述避免流水賬式的說明關(guān)于重復(fù)出現(xiàn)的模塊透過明暗對比表達(dá)線框圖案例：不使用截圖與顏色優(yōu)點：

制作的線框圖更規(guī)范，不會對視覺設(shè)計師產(chǎn)生設(shè)計干擾使用截圖與顏色線框圖案例：

說明：這樣雖然能表達(dá)產(chǎn)品的想法，但是會對視覺設(shè)計師造成干擾，整體感覺讓人覺得很不規(guī)范。合理的布局及間距優(yōu)點：保持簡單合理的布局結(jié)構(gòu)，符合用戶的使用習(xí)慣，能減少視覺設(shè)計的時間。布局要點：

考慮布局標(biāo)準(zhǔn)及美觀程度不出現(xiàn)2列3列混排的布局避免文字使用密集符合用戶使用習(xí)慣

遵守柵格規(guī)范什么是柵格？柵格設(shè)計系統(tǒng)，是一種平面設(shè)計的方法與風(fēng)格，運用固定的格子設(shè)計版面布局，風(fēng)格工整簡潔，是當(dāng)今出版物設(shè)計的主流風(fēng)格之一。使用柵格規(guī)范的優(yōu)點：用柵格原理確定網(wǎng)站布局及具體尺寸，減少了思考寬度或高度的煩惱；頁面規(guī)范可重用，節(jié)約開發(fā)成本。

標(biāo)記第一屏高度為什么要標(biāo)記第一屏高度？

我們都知道，最重要的內(nèi)容，重要的操作按鈕一定要在第一屏內(nèi)完全顯示，否則用戶第一眼看不到，就會放棄這個頁面，從而影響轉(zhuǎn)化率。第一屏應(yīng)該多高？詳情看下圖：

說明：在1024*768的分辨率下第一屏的高度可以用570px,有時候也可600px.融入最新UI風(fēng)格的線框圖亮點：留白增多、通過空隙和留白分隔區(qū)域，布局更規(guī)整使用真實、符合邏輯數(shù)據(jù)內(nèi)容優(yōu)點：

使用真實、符合邏輯的數(shù)據(jù)內(nèi)容能有效的減少溝通本，讓人一目了然。

圖1圖2通過下圖1，圖2對比，圖1的優(yōu)勢不言而喻。不遺漏特殊狀態(tài)的描述

在設(shè)計過程中我們更多地考慮正常情況的狀態(tài)，而忽略了特殊狀態(tài)。但這往往對后續(xù)的工作很重要，因此不遺漏特殊狀態(tài)的描述對線框圖設(shè)計過程是十分重要的。解決方案看下圖：避免流水賬式的說明避免流水賬式的三種解決方案：流程圖代替文字巧妙組織文字說明制作動態(tài)效果

避免流水賬式的說明流程圖代替文字說明

用流程圖表述更清晰，更有條理性避免流水賬式的說明巧妙組織文字說明

利用“if、else、case”邏輯性強(qiáng)的文字表述在訂單確認(rèn)滿足以下條件，返回購物車頁面案例：case1：庫存下降，且少于用戶購買量case2：價格變動case3：case1&case2