在UI設(shè)計工作中，最簡單也是最基本的設(shè)計就是線框圖。說到這里，可能會有很多人不同意，不就是線框圖，有什么難的?但實際上，想要掌握線框圖設(shè)計技巧，還是需要學(xué)習(xí)很多設(shè)計技巧的。下面這篇文章會講解線框圖的定義、功能和設(shè)計技巧，一起來看看吧~

　　1、線框定義：

　　我們常說的線框圖，其實就是一個頁面的示意圖，也可以稱為屏幕藍(lán)圖。它的作用是展示網(wǎng)站或產(chǎn)品框架。在設(shè)計階段，線框圖通常用于在考慮用戶需求的情況下在頁面上布置內(nèi)容和功能。從開發(fā)的角度來看，在開發(fā)過程的早期使用線框來建立頁面的基本結(jié)構(gòu)，然后再添加視覺設(shè)計和內(nèi)容。最終，線框圖的設(shè)計目標(biāo)是向普通觀眾展示產(chǎn)品將包含哪些頁面和組件，以及這些元素如何交互。

　　2、線框的作用

　　(1)幫助團(tuán)隊評估和完善工作范圍。線框允許設(shè)計人員快速創(chuàng)建產(chǎn)品的視覺表示以供以后修訂;線框還幫助設(shè)計人員向團(tuán)隊展示應(yīng)用程序具有的頁面元素和控件，以及所有元素如何交互。

　　(2)讓團(tuán)隊的所有成員都參與到產(chǎn)品設(shè)計中。線框的使用讓設(shè)計師和開發(fā)人員可以在早期共同參與討論設(shè)計，在視覺設(shè)計開始之前提供反饋和建議更改。設(shè)計過程 需求經(jīng)常來回變化，使用線框圖可以讓這個過程更有效率，修改原型比修改線框需要更多的時間和精力，這有助于使設(shè)計過程快速迭代，避免不必要的浪費(fèi)。

　　(3) 進(jìn)行用戶測試。線框圖可以幫助設(shè)計人員從潛在用戶那里獲得有價值的反饋。此外，瀏覽線框圖比閱讀規(guī)范要快得多，并且有助于減少性能差異。

　　3、線框圖技巧

　　(1)正確使用顏色：如果在線框中使用豐富的配色方案，會分散查看者的注意力，使其更難更新。但在某些情況下，使用顏色突出某些組件是合理的。例如，您可以將紅色用于錯誤狀態(tài)，將藍(lán)色用于注釋等。

　　(2)使用簡單的組件：線框不包含完全設(shè)計和詳細(xì)的組件。相反，它們應(yīng)該設(shè)計得相對簡單，以便團(tuán)隊成員更容易識別。為組件添加微妙的陰影、厚度花費(fèi)大量時間和精力，但不是很實用。

　　(3)風(fēng)格一致：相似的組件必須在所有線框圖中看起來都相同。如果相同的組件看起來不同，開發(fā)人員可能會質(zhì)疑它們的功能是否相同，即使因為設(shè)計的原因估計時間會不時變化。使用線框時，請記住一個簡單的設(shè)計提示，以保持一致并避免混淆。

　　(4)多使用注釋：線框圖設(shè)計中可能會出現(xiàn)一些解決方案解釋不直觀的情況，比如一些控件背后的邏輯，所以開發(fā)者可能會有疑問。這種情況下，注釋可以提供解釋其背后的邏輯。這樣團(tuán)隊將理解您的解決方案，而您無需花時間討論它們。

　　(5)將線框圖擴(kuò)展為交互原型：有一些簡單通用的交互，有些在使用不同產(chǎn)品時相當(dāng)復(fù)雜。如果線框圖不足以說明復(fù)雜性，您可以將線框圖擴(kuò)展為交互無需編寫冗長的評論和花費(fèi)數(shù)小時解釋即可制作原型。

　　這就是線框圖設(shè)計技巧。以上這些你掌握了嗎?當(dāng)然，僅僅學(xué)習(xí)干貨知識，可能很難熟練運(yùn)用這些設(shè)計技巧。所以，你還是要在作品中多多練習(xí)，才能更好地把握線框設(shè)計的精髓!更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。