線框圖是設計過程中的第一步，也是整個設計流程中最重要的步驟之一恃锉。線框圖是你想法開始成形的時候搀菩。盡管線框圖看起來很簡單，但也可以做得很好或很差破托。相框圖的好壞可能對最終產品產生重大影響肪跋。下面將介紹正確的與錯誤的線框圖。這些技巧可以幫助打造更好的Web和移動端體驗炼团。

線框圖是什么澎嚣？

線框圖是用戶界面布局的基本框架。線框圖使用使用占位符瘟芝，而不是使用真實的界面元素易桃。線框圖被用于早期階段設計和開發(fā)過程中，驗證信息架構和用戶流程锌俱。

線框圖為什么重要晤郑？

相框圖有助于確定移動端程序或網(wǎng)站的界面功能與視覺框架，所以說線框圖是設計產品過程中的關鍵步驟贸宏。線框圖還可以作為產品文檔造寝，指導設計師快速搭建移動端程序或網(wǎng)站。

設計師如何充分利用線框圖吭练，以及應該注意什么诫龙？

要怎么做？

1.創(chuàng)建線框之前的研究

如果想繪制好的線框圖鲫咽，你必須研究用戶需要什么和他們想要什么签赃。考慮兩個重要的目標：業(yè)務目標和用戶目標分尸。這兩個目標對產品是否成功起著至關重要的作用锦聊。線框框架之前的研究將幫助您設定明確的期望，即您想要使用線框圖實現(xiàn)的目標箩绍。

2.繪制簡單的線框圖

繪制線框圖與設計其它步驟的主要區(qū)別是要簡單孔庭、快速。其中速度尤為重要材蛛。你需要快速的用線框圖嘗試很多不同的方案圆到，在為問題提出適當?shù)慕鉀Q方案之前。線框圖盡可能的保持簡單是至關重要的卑吭，因為這可以幫助你避免分心构资，并且可以清晰地傳達你的想法。

3.腦暴各種方案

在繪制線框圖框架時陨簇，要盡可能多地提出方案吐绵。一般而言迹淌，提出的設計方案越多，就會越有機會朝最佳解決方案進行迭代己单。如果能夠在一個想法上產生多種想法和變化唉窃，可以讓您看到每個想法的優(yōu)點和缺點。

4.確保線框容易理解

線框圖可以說是項目前期的一種溝通工具纹笼，它可以幫助其他人理解你的想法纹份。當你與其他童鞋對接時，請確保任何人都可以輕松的看懂并使用線框圖廷痘。如果只有一個人能夠理解你的線框蔓涧，這么說，你的線框圖就是不ok的笋额。

嘗試遵循以下內容來提高理解力：

a.向一個與你的項目無關的人展示你的線框元暴，并向他提出一些關于工作的問題。這將有助于你理解應該做些什么來提高理解力兄猩。

b.為你的線框圖進行注釋茉盏，使其更易于閱讀和理解。閱讀某些元素或交互的描述要比過看靜態(tài)圖像來理解事情要容易得多枢冤。

5.協(xié)作

切勿單獨思考鸠姨。當你與其他人一起集思廣益時，能收獲更多及更好的解決方案淹真。在設計過程的早期應該多向團隊成員展示線框圖讶迁，這有助于驗證和改進你的想法。

團隊成員的反饋有助于您改善方案 - 聽取其他成員對你的設計的看法核蘸，根據(jù)反饋進行重復性修改巍糯。

不要怎么做？

1.繪制完整的產品相框圖值纱，不要跳過某些部分

例如：我們電子商務網(wǎng)站的產品中，有結賬頁面坯汤，這與許多其他網(wǎng)站類似的虐唠。如果你覺得因為一樣可以選擇不繪制產品這個部門的線框圖，而是專注于應用程序中不太明顯的部分惰聂。其實這樣會導致你遺漏交互內容疆偿，影響用戶體驗搓幌。所以請避免這樣的誤區(qū)，確保應用程序的每個部分都有線框圖溉愁。

2.不要直接使用電腦軟件工具繪制

當你準備繪制線框圖時，直接使用你最喜歡的電腦軟件工具繪制，這看來是沒有什么問題的撤蟆。雖然像Mockplus這樣的現(xiàn)代原型開發(fā)工具可以在幾分鐘內創(chuàng)建出功能完整的原型奕塑，但在最好先用筆和紙勾勒出你的想法，然后才使用電腦軟件家肯。

3.不要使用顏色

你有沒有想過為什么線框經常以灰度創(chuàng)建龄砰？灰色防止顏色對你造成的分心，幫助你快速完成繪制讨衣。線框圖的主要目的是搭建用戶界面內容并描述應用程序的功能换棚。添加多種顏色可能會導致分心，因此最好避免在線框中使用顏色（除非要突出顯示某些特定元素）反镇。

4.不要試圖讓線框看起來漂亮

不要過分關注線框的外觀固蚤。線框不是最終設計稿。它們不需要看起來感覺像成最終產品愿险。請記住颇蜡，線框圖是一種工具，幫助了解界面中視覺或交互設計元素的層次結構辆亏。當你過分關注美觀度风秤，你可能會繪制特別精美的線框圖，但可能不會產出真正的解決方案扮叨。因此缤弦，繪制線框圖要努力讓它們能用，可以輕松傳達你的想法彻磁。視覺和交互設計應留在產品設計過程的后期階段碍沐。

5.不要太專注產品中的一部分

不要依附于你的個人想法≈则眩可能你很難放棄一些你花費了很多時間的某些東西上（特別是當結果本身并不壞時累提，但卻不符合你設計的產品概念）。但重要的是磁浇，線框圖被繪制出來前斋陪。你需要嘗試很多不同的選擇（可能10種、50種置吓、甚至100種方案）无虚，然后選擇最適合問題的一個（或兩個）方案。

結論

繪制線框圖是用戶體驗設計師的基本技能衍锚。時間就是一顆良藥友题，任何技能都可以慢慢熟練掌握。同樣熟練掌握繪制線框圖技巧的關鍵也在于練習戴质。你做得越多度宦，你就會越好踢匣。因此，你平時需要投資更多的時間在相框圖上斗埂，這樣在下一次個項目開始時符糊，可以節(jié)省大量時間。

原文作者：Nick Babich

原文鏈接：https://medium.com/mockplus/10-dos-and-don-ts-of-wireframing-8a6d0b3429d8