線框是一種只使用簡(jiǎn)單形狀來呈現(xiàn)界面的一種表示形式，如框、圓、線和箭頭。設(shè)計(jì)人員使用線框，來傳達(dá)信息的層次結(jié)構(gòu)和內(nèi)容結(jié)構(gòu)。在本文，創(chuàng)新互聯(lián)詳細(xì)解析了線框圖的確切含義以及制作線框圖的方式。

在軟件開發(fā)進(jìn)程中，時(shí)間是最寶貴的資源。產(chǎn)品設(shè)計(jì)者會(huì)進(jìn)行不斷嘗試，在不降低產(chǎn)品質(zhì)量的前提下縮短產(chǎn)品上市時(shí)間。在節(jié)省時(shí)間方面，設(shè)計(jì)師們會(huì)盡量使用一些工具以最方便快捷的方式來傳達(dá)必要信息。

在許多不同的設(shè)計(jì)中，設(shè)計(jì)人員和開發(fā)人員之間會(huì)有一個(gè)主要的交流工具。設(shè)計(jì)師會(huì)利用這個(gè)東西來把他們頭腦中的想法傳遞給開發(fā)人員，最終由開發(fā)人員來實(shí)施具體的決策，這個(gè)東西就被稱為線框圖。

在本文中，你會(huì)了解線框圖的確切含義以及制作線框圖最好的方式。

什么是線框圖

在我們深入研究如何繪制線框圖之前，我們需要明確線框圖是什么。線框是一種只使用簡(jiǎn)單形狀來呈現(xiàn)界面的一種表示形式，如框、圓、線和箭頭。設(shè)計(jì)人員使用線框，來傳達(dá)信息的層次結(jié)構(gòu)和內(nèi)容結(jié)構(gòu)。

線框VS原型

許多設(shè)計(jì)師將線框與原型混淆，線框和原型并不是同一個(gè)東西。雖然兩者在可交付成果之間存在重疊，但原型更側(cè)重于交互性，它們通常尋找一些真實(shí)用戶來進(jìn)行測(cè)試，而線框經(jīng)過審核和批準(zhǔn)后，原型就產(chǎn)生了。

何時(shí)應(yīng)創(chuàng)建線框圖

通常情況下，線框是在設(shè)計(jì)進(jìn)程的早期階段。在構(gòu)思階段，設(shè)計(jì)師需要探索各種不同的選擇，然后選擇出最佳的一個(gè)。這個(gè)階段，線框圖就顯得非常有用。因?yàn)樗梢詭椭O(shè)計(jì)人員來組織布局，而無需明確的展示產(chǎn)品的視覺設(shè)計(jì)。

十個(gè)線框圖繪制技巧

1. 切忌一開始就試用數(shù)字化工具

盡管現(xiàn)代原型設(shè)計(jì)工具可讓你在短短幾分鐘內(nèi)創(chuàng)建出線框圖，但在線框圖中原型設(shè)計(jì)工具卻很難勝過筆和紙（特別是當(dāng)你正處于設(shè)計(jì)過程的構(gòu)思階段時(shí)）。設(shè)計(jì)師在構(gòu)思階段的目標(biāo)是盡可能多地構(gòu)建想法并迭代尋求最佳解決方案，所以使用筆和紙來創(chuàng)作更容易。通常，在紙上整理想法越多，轉(zhuǎn)移到你的電腦上的速度就越快。

2. 在畫圖之前，不要去評(píng)判你的想法

“這沒有任何意義”這在頭腦風(fēng)暴會(huì)議期間是一個(gè)非常常見的短語，在考慮解決方案時(shí)，人們傾向于“要做就做最好”這種理念。但是出于許多原因，這種方式可能適得其反。

最可能的原因是，你很容易就忽略了一個(gè)有價(jià)值的想法，因?yàn)槟X海中來呈現(xiàn)確實(shí)有一定的難度。這就是你需要筆和紙的原因，第一時(shí)間把你腦海中的想法畫在紙上。這樣不管任何時(shí)候，你都可以直觀的來表達(dá)你的設(shè)計(jì)方案。

3. 不要過分關(guān)注草圖的質(zhì)量

在繪制線框圖時(shí)，關(guān)注的不是細(xì)節(jié)而是你的速度—盡可能快地完成工作。請(qǐng)記住，線框圖中最重要的是你想傳達(dá)的想法。線框圖的目標(biāo)不是展示你的設(shè)計(jì)藝術(shù)和技巧，而是去探索各種布局。因此，提供足夠的詳細(xì)信息，方便以后可以查看和優(yōu)化你的草圖。

4. 利用好的工具

繪制線框圖的工具會(huì)直接影響你工作的效果和結(jié)果。首先，你需要給自己一只好用的筆，這里我建議使用三種不同的筆來繪制草圖：

黑色的記號(hào)筆，用于線框圖。
彩色筆，用于陰影元素。
熒光筆，用于著色。你可以將其作為強(qiáng)調(diào)色以吸引用戶注意。
其次，嘗試使用虛線紙。虛線紙可以幫助你更準(zhǔn)確地繪制形狀和布局。

5. 不要使用真實(shí)的UI元素，而是使用占位符

線框中的文本和圖像并不是最終產(chǎn)品，而且，在產(chǎn)品設(shè)計(jì)的早期階段可能無法使用真實(shí)數(shù)據(jù)。因此，設(shè)計(jì)師可以使用常用的占位符而不是真實(shí)的文本和圖像。

圖像可以用×來表示。
標(biāo)題用大號(hào)粗體線來表示。
文字可以用水平線來表示。
視頻可以用一個(gè)框來表示，中間添加一個(gè)播放按鈕。

著陸頁線框，該頁面包含一個(gè)主要圖像、標(biāo)題、三個(gè)視頻組件。

6. 使用顏色突出顯示元素

雖然線框圖不需要具備成品的任何視覺屬性，但仍然可以用顏色來展示你設(shè)計(jì)的某些部分的含義。例如：使用對(duì)比色，可以將用戶的注意力集中在某些特定元素上。

7. 注釋線框圖

線框的主要問題是它們是靜態(tài)的，使用線框，可能很難傳達(dá)意思，尤其是當(dāng)你的屏幕非常復(fù)雜時(shí)。因此，參與者/團(tuán)隊(duì)成員可能很難理解用戶與屏幕之間如何來進(jìn)行互動(dòng)。設(shè)計(jì)師不僅只是提供一個(gè)線框圖就夠了，而是應(yīng)該在線框中提供批注或注釋，以便參與者能夠清楚明了。

8. 記錄你的線框

為了避免每次會(huì)議都要攜帶紙張，你可以使用智能手機(jī)來創(chuàng)建一個(gè)數(shù)字化副本，你只需拍攝每張線框圖并將它們存儲(chǔ)云端即可。

9. 與團(tuán)隊(duì)分享你的線框

不要自顧自的工作，請(qǐng)記?。鹤詈玫脑O(shè)計(jì)決策來自于團(tuán)體工作。因此，不要害怕去分享你自己的草圖，經(jīng)常得到別人的反饋可幫助你快速的進(jìn)行下一個(gè)設(shè)計(jì)決策。

收集反饋并向他人學(xué)習(xí)，將線框與團(tuán)隊(duì)成員分享，看看你的想法是否有價(jià)值。歡迎提一些有建設(shè)性的評(píng)判，讓參與者和團(tuán)隊(duì)成員有機(jī)會(huì)發(fā)表意見。
在向他人展示想法時(shí)，請(qǐng)使用草圖作為你故事的補(bǔ)充。
10. 使用特定的工具

當(dāng)你需要切換到數(shù)字工具，想進(jìn)一步完善你的想法時(shí)，有一個(gè)環(huán)節(jié)是堅(jiān)決不可少的，那就是選擇一個(gè)強(qiáng)大的原型設(shè)計(jì)工具。

創(chuàng)新互聯(lián)十大線框圖繪制結(jié)論

繪制線框圖的方法無所謂對(duì)錯(cuò)，所以不要把我在這里說過的所有內(nèi)容都視為真理。嘗試不同的草圖方式，最終你會(huì)找到自己的繪制風(fēng)格。記住，你畫的線框圖越多，你的技能提升的越快。希望大家享受這個(gè)過程！

網(wǎng)站欄目：十大線框圖繪制技巧
網(wǎng)頁URL：http://jinyejixie.com/news16/310866.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站收錄、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)