你真的會(huì)畫線框圖嗎？201587

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

2、缺點(diǎn)： 容易因顏色深淺來判定模塊的重要性，深色并不意味著比淺色更重 要，要看色塊之間的對(duì)比關(guān)系。因此要和視覺溝通清楚。 透過明暗對(duì)比表達(dá)線框圖案例：不使用截圖與顏色優(yōu)點(diǎn)： 制作的線框圖更規(guī)范，不會(huì)對(duì)視覺設(shè)計(jì)師產(chǎn)生設(shè)計(jì)干擾使用截圖與顏色線框圖案例： 說明：這樣雖然能表達(dá)產(chǎn)品的想法，但是會(huì)對(duì)視覺設(shè)計(jì)師造成干擾，整體感覺讓人覺得很不規(guī)范。合理的布局及間距優(yōu)點(diǎn)： 保持簡單合理的布局結(jié)構(gòu)，符合用戶的使用習(xí)慣，能減少視覺設(shè) 計(jì)的時(shí)間。布局要點(diǎn)： 考慮布局標(biāo)準(zhǔn)及美觀程度 不出現(xiàn)2列3列混排的布局 避免文字使用密集 符合用戶使用習(xí)慣 遵守柵格規(guī)范什么是柵格？ 柵格設(shè)計(jì)系統(tǒng)，是一種平面設(shè)計(jì)的方法與風(fēng)格，運(yùn)用固定

3、的格子設(shè) 計(jì)版面布局，風(fēng)格工整簡潔，是當(dāng)今出版物設(shè)計(jì)的主流風(fēng)格之一。使用柵格規(guī)范的優(yōu)點(diǎn)： 用柵格原理確定網(wǎng)站布局及具體尺寸，減少了思考寬度或高度的煩 惱；頁面規(guī)范可重用，節(jié)約開發(fā)成本。 遵守柵格規(guī)范用柵格布局的網(wǎng)站案例：注意事項(xiàng)：1、左圖中每個(gè)粉紅矩形寬30px;2、每個(gè)矩形間的間距是10px;標(biāo)記第一屏高度為什么要標(biāo)記第一屏高度？ 我們都知道，最重要的內(nèi)容，重要的操作按鈕一定要在第一屏內(nèi)完全顯示，否則用戶第一眼看不到，就會(huì)放棄這個(gè)頁面，從而影響轉(zhuǎn)化率。第一屏應(yīng)該多高？詳情看下圖： 說明：在1024*768的分辨率下第一屏的高度可以用570px,有時(shí)候也可600px.了解視覺趨勢近年視覺趨勢：

4、 寬度變寬，留白增大 漸變減少，視覺風(fēng)格更扁平化，整體感覺更清爽 通過空隙和留白來分割區(qū)域，而不是用線來分割 布局更規(guī)則 去掉不必要的視覺元素 融入最新UI風(fēng)格的線框圖亮點(diǎn)：留白增多、通過空隙和留白分隔區(qū)域，布局更規(guī)整表達(dá)清楚UI邏輯如何表達(dá)清楚UI邏輯？-制作下圖表： 說明：在設(shè)計(jì)一個(gè)內(nèi)容元素較多、邏輯層級(jí)較復(fù)雜的頁面時(shí)，為了避免混亂，我們需要提前整理左側(cè)圖表這些內(nèi)容，以保證文字、鏈接、操作等內(nèi)容的樣式符合它們所代表的重要程度，并把各種復(fù)雜的情況歸類成有限的幾種形式，以給用戶一個(gè)合理的視覺引導(dǎo)。（字號(hào)盡量控制在3-5種，根據(jù)情況匹配顏色） 使用真實(shí)、符合邏輯數(shù)據(jù)內(nèi)容優(yōu)點(diǎn)： 使用真實(shí)、符合邏輯

5、的數(shù)據(jù)內(nèi)容能有效的減少溝通本， 讓人一目 了然。 圖1圖2通過下圖1，圖2對(duì)比，圖1的優(yōu)勢不言而喻。不遺漏特殊狀態(tài)的描述 在設(shè)計(jì)過程中我們更多地考慮正常情況的狀態(tài)，而忽略了特殊狀態(tài)。但這往往對(duì)后續(xù)的工作很重要，因此不遺漏特殊狀態(tài)的描述對(duì)線框圖設(shè)計(jì)過程是十分重要的。解決方案看下圖：避免流水賬式的說明避免流水賬式的三種解決方案：流程圖代替文字巧妙組織文字說明制作動(dòng)態(tài)效果 避免流水賬式的說明 流程圖代替文字說明 用流程圖表述更清晰，更有條理性避免流水賬式的說明 巧妙組織文字說明 利用“if、else、case”邏輯性強(qiáng)的文字表述 在訂單確認(rèn)滿足以下條件，返回購物車頁面案例： case1：庫存下降，且少于用戶購買量 case2：價(jià)格變動(dòng) case3：case1&case2 else：跳轉(zhuǎn)到訂單成功頁面 制作動(dòng)態(tài)效果 很多復(fù)雜的動(dòng)態(tài)效果文字難以描述清楚，所以最好制