你應(yīng)該知道的線框圖設(shè)計的規(guī)則和禁忌

1 評論 8723 瀏覽 39 收藏 9 分鐘

線框圖是設(shè)計進程中的第一步,也可以說它是最重要的步驟之一,因為這是你的想法開始成形的時候。盡管線框圖看起來很簡單,但你不一定能設(shè)計好,你的線框圖可能會對最終的成品產(chǎn)生重大影響。我在本文介紹了正確的(和錯誤的)設(shè)計線框圖方式,這些提到的技巧將幫助你構(gòu)建更好的網(wǎng)頁和移動線框圖。

一、什么是線框

線框是布局的基本框架。線框中不會使用真實的用戶界面元素;相反,會使用占位符 – 用戶界面元素通常被表示為輸入框,線框在設(shè)計和開發(fā)過程的早期階段用于驗證信息架構(gòu)和一般的用戶流程。

二、為什么線框圖很重要

線框圖是產(chǎn)品設(shè)計過程中的關(guān)鍵步驟,因為它可以幫助設(shè)計師決定應(yīng)用程序或網(wǎng)站的外觀及功能。線框圖確保參與項目的每個人對其產(chǎn)品設(shè)計的結(jié)構(gòu)和功能都有一個同步的認識,線框還可以作為產(chǎn)品文檔 – 為構(gòu)建應(yīng)用程序或網(wǎng)站的設(shè)計人員提供指導(dǎo)。

但是,設(shè)計師如何充分利用線框,他們應(yīng)該避免什么?讓我們來看看。

首先,你需要做的:

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

如果你想創(chuàng)建一個好的線框圖,你必須研究用戶的需求——他們到底想要什么。你需要考慮兩個重點目標:商業(yè)目標和用戶目標。這兩個目標對你產(chǎn)品的成功來說至關(guān)重要,這些研究將幫助你設(shè)定明確的期望,即通過線框圖如何實現(xiàn)你的目標。

2.保持簡單

線框圖與其他設(shè)計工具的主要優(yōu)點是創(chuàng)建速度快和結(jié)構(gòu)簡單。速度尤為重要,線框圖不應(yīng)拖慢你的速度。

在提出適當(dāng)?shù)慕鉀Q方案之前,你可能會嘗試很多種不同的選項。這就是為什么盡量保持你的線框圖簡單性至關(guān)重要—— 這樣可以避免你分心并把重心放于傳達你的想法上。

3. 展示各種想法

在建立線框框架時,注意盡可能多地爆發(fā)想法。一般而言,創(chuàng)建的設(shè)計越多,就會越有機會找到最佳的解決方式。在一個點子上產(chǎn)生多種想法和變數(shù),可以讓你看到每個想法的優(yōu)點和缺點。

4. 確保線框圖易于理解

線框作為交流的工具,其幫助其他人了解你的想法。如果你打算和團隊和公司分享你的線框圖,那么請確保任何人都可以輕松的看懂你的線框圖。如果僅有一個人可理解你的線框,就說明已經(jīng)出現(xiàn)了問題。

嘗試遵循以下內(nèi)容來提高理解力:

  1. 向一個與你的項目無關(guān)的人展示你的線框,并詢問他們一些問題。這可讓你明白你應(yīng)該做些什么來提高理解力;
  2. 給你的線框添加注釋,使其更易于閱讀和理解;
  3. 查看某些元素或交互的描述也會容易很多,而不是通過查看靜態(tài)圖像來判斷應(yīng)該如何做;
  4. 用語言補充一些重要細節(jié),而不是讓線框自己呈現(xiàn)。

5.協(xié)作

切勿單獨作畫。當(dāng)你與其他人一起集思廣益時,往往會反應(yīng)出一些好的結(jié)果,設(shè)計初期向團隊成員展示你的線框可以幫助你證實和改進你的想法。

反饋可幫助你改進工作—— 聽取團隊成員對你設(shè)計的意見,進行迭代,根據(jù)反饋來改進設(shè)計。

你不應(yīng)該做的:

1.不要略過應(yīng)用程序的某些部分

有些人會說:我們的電子商務(wù)網(wǎng)站中的結(jié)賬頁面與許多其他網(wǎng)站類似,所以可以跳過應(yīng)用程序的某個部分的線框圖。很明顯我們知道如何設(shè)計,所以忽略它,專注于設(shè)計其他部分。

避免這種想法,你必需確保應(yīng)用程序的每個部分都要有線框,因為這可以防止你遺漏掉可能影響用戶體驗交互的一些重要部分。不要忽略你應(yīng)用程序中的任何內(nèi)容。

2.不要一開始就使用數(shù)字工具

當(dāng)你開始創(chuàng)建線框圖時,你可能會認為直接使用你最喜歡的設(shè)計工具來創(chuàng)作挺好的。盡管像Mockplus這樣的現(xiàn)代原型開發(fā)工具,可以在幾分鐘內(nèi)創(chuàng)建出功能完整的原型,但在大多數(shù)情況下,最好從筆和紙開始。

首先畫出你的想法,然后才切換到數(shù)字工具。

3.不要使用顏色

你有沒有想過為什么線框經(jīng)常利用灰度來創(chuàng)建?這是有目的的——灰度級可防止被顏色分心。線框的主要目的是布置內(nèi)容并描述應(yīng)用程序的功能,添加多種顏色可能會導(dǎo)致分心。

因此,最好避免在線框中使用顏色(除非要突出顯示某些特定的元素)。

不要使用顏色。如果你想要這樣做,可以特意一些。在這個例子中,tonianni使用紅色突出重要元素并添加注釋。

4.不要試圖去美化它

不要過分關(guān)注線框的外觀,它們不需要設(shè)計的很像成品。請記住,線框是一種工具,可幫助你了解頁面信息層次結(jié)構(gòu)而不是視覺或交互設(shè)計。

當(dāng)你過于關(guān)注后者時,可能會有太多精美的元素,但絕對不是面對解決方案的。因此,當(dāng)談到線框圖時,你首先得讓它們有價值。線框應(yīng)該輕松傳達你的想法并協(xié)助溝通,而視覺和交互設(shè)計應(yīng)留在產(chǎn)品設(shè)計過程的后期階段。

5.不要產(chǎn)生依賴

不要太依賴于你的線框圖。隨時準備丟掉它們,是的,可能很難丟棄一些你費盡心思做出來的東西(特別是當(dāng)你覺得它還好,但卻不符合你設(shè)計的產(chǎn)品概念時)。

但重要的是要記住,你需要嘗試很多不同的選項才能設(shè)計出來的線框圖(可能是10/50/100個),只有這之后,你才會選擇一個(兩個)來作為你原型的基礎(chǔ)。

三、結(jié)論

線框圖是用戶體驗設(shè)計師的基本技能。 隨著時間的推移,任何其他技能都可以得到改善。提高線框圖技巧的關(guān)鍵在于練習(xí),你做得越多,就會越順利。

因此,下一個項目請留出一定的時間來創(chuàng)建線框圖。早期花費一些時間在線框圖上,后期的話可以為你節(jié)省大量時間。

 

原文作者:Nick Babich

原文地址:https://www.mockplus.com/blog/post/dos-donts-of-wireframing

本文由@Mockplus團隊?翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!