網(wǎng)站設(shè)計中我得到大量的線框 - 不只是我設(shè)計自己的網(wǎng)站，其他的設(shè)計者在設(shè)計網(wǎng)站，以及產(chǎn)品經(jīng)理和業(yè)務(wù)分析員都會遇見。

首先這是偉大的，因為它是一項令人心動的工作。工作是一件好事，但我要在這篇文章中討論的元素，往往錯過了很多線框，他們成為有用的，因為他們可以從給你一些設(shè)計的幫助。

下面是一個典型的例子我們經(jīng)常給用戶測試的線框。

它顯示了哪些元素需要被放置在網(wǎng)頁上，他們需要的地方去，但也有不被傳達給設(shè)計師，開發(fā)商和確實的用戶，我們測試的幾件事情。下面的規(guī)則將有助于您的的線框溝通與更深入的了解。

廣告

1。顯示帶陰影的視覺優(yōu)先

用戶在此頁面上呢？他們的重點應該在哪里呢？什么是我們希望他們下一步采取的關(guān)鍵行動？線框上面的例子，不顯示任何。

如果你一直跟隨一個用戶中心的設(shè)計過程，那么你將有什么業(yè)務(wù)需要用戶做此頁面上，以及用戶自己想做的事是什么收集信息。與此線框風格的問題是，它不是通過設(shè)計團隊溝通這一切偉大的洞察力。

添加視覺優(yōu)先，只需刪除惡劣的黑線，你周圍的所有元素，并使用陰影線框給某些元素更加突出，那么別人。在下面的例子可以看到，酒店信息和預訂表格，現(xiàn)在更注重和Proceed按鈕是最黑暗的頁面上的元素（因為這是我們希望用戶下一步該做什么）。

重要的是要注意，這樣做，我們沒有帶走設(shè)計師的作用。我們并不是說，一個元素應該比其他暗。我們溝通的是什么元素比別人需要更多的視覺突出。如何實現(xiàn)，視覺突出設(shè)計師的功力。

2。使用真實數(shù)據(jù)

這是非常重要的，真實的數(shù)據(jù)來填充線框。通過真實的數(shù)據(jù)，我的意思是一切從網(wǎng)頁標題導航標簽，表單標簽，圖標，甚至例如副本。凡是可以由用戶以某種方式解釋。

這emables您設(shè)計最壞的情況下。你要確保精美奠定了線框你仍然要工作，一旦網(wǎng)站被復制和圖像填充。

更重要的是，使用真實的數(shù)據(jù)是用戶測試過程中的參與者創(chuàng)造一個可信的用戶旅程勢在必行。沒有它，在測試的參與者有使用他們的想象力，自己來填充它。問某人到幀的心態(tài)預訂度假或買車，如果他們提出的是，而不是實際的產(chǎn)品描述IPSUM LOREM很難。

真實的數(shù)據(jù)，也可讓您更洞察力，當用戶測試。銘記心中的線框例如在文章的開始，如果你是考慮到用戶的測試，沒有副本或圖標或標簽，你可以問的問題，用戶將被限制。

要求領(lǐng)先的問題，如“你能看到這家酒店的主要特點是什么？”?是有問題的。問你有突出的參與者，主要功能是顯示在頁面上某處，然后他們知道尋找他們。它也限制了參與者的反應可以給你的深度。“是的，我看到他們那里是不會幫助你獲得很大的啟示。

相反，這個線框測試與實際副本和圖標，使你要問更廣泛和開放的問題，例如，如何你覺得這家酒店？這開辟了為參與者提供更深入的答案，如“酒店看起來不錯的機會，但他們已經(jīng)有了一個家庭游泳池，我討厭孩子所有的地方運行的酒店”?。

這不僅告訴你他們是否已經(jīng)發(fā)現(xiàn)的頁面元素，而且它們?nèi)绾螒墩Z言和正在使用的圖標。

如果沒有數(shù)據(jù)線框測試，測試其可用性。測試數(shù)據(jù)線框，你可以測試它的用戶體驗。

3。確保一切都增加了

當你把所有在你的線框那個可愛的真實數(shù)據(jù)，你需要確保你創(chuàng)建一個一致通過網(wǎng)頁的旅程。如果你一籃子頁面線框有兩個產(chǎn)品，在每只50英鎊，總被誤作為107.99英鎊顯示，用戶會發(fā)現(xiàn)，它會拋出他們的任務(wù)。

像這樣的錯誤很容易錯過當你已上線工作一段時間，所以它總是值得讓別人通過他們?nèi)槟恪?/p>

4?？紤]和描述圖像

圖片是用戶的體驗非常重要的元素。他們是在人們的搜索產(chǎn)品和服務(wù)時，他們決定是否值得進一步調(diào)查的決定的基本因素。他們對人們?nèi)绾慰创愕木W(wǎng)站和您的企業(yè)的質(zhì)量也有很大的影響。然而，當我們線框我們唯一用來表示這些信息非常重要的作品是一個灰色框，通過它的十字架。

我不是說我們應該每次要在網(wǎng)站上使用的圖像。我們應該做的是試圖將用于圖像類型通信的見解。如果執(zhí)行基準測試之前，線框，保證您了解你網(wǎng)站上的測試中使用的圖像的東西。

例如，我曾在一個重新設(shè)計的襯衫零售商，之前發(fā)生的任何線框現(xiàn)有的網(wǎng)站用戶測試。一旦脫穎而出的關(guān)鍵事情是該產(chǎn)品拍攝迷惑用戶。為了使襯衫好看，他們身著領(lǐng)帶和袖扣。這導致一些混亂，作為是否領(lǐng)帶和袖扣襯衫。當它來到我包括到線框草圖的襯衫不打領(lǐng)帶或袖扣為了通過客戶端的洞察力，并確保避免在未來的任何產(chǎn)品拍攝的問題。

描述圖像沒有顯示草圖是指令性的。簡單解釋的影像類型的用戶將看到在頁面上是不夠的。例如設(shè)計酒店網(wǎng)站時，圖像的用戶希望看到酒店詳情頁上嗎？房間嗎？廁所嗎？窗外的看法？這是所有的洞察力，你會在研究學習過程中，所以它的價值，包括這個在您的電線。

5。使用顏色時要小心

線框的顏色通常是保留給注解。然而，它可以用來標記你想客戶專注于，或顯示不同的頁面狀態(tài)，如錯誤消息的具體領(lǐng)域。然而，所有的顏色，應免去您線之前，他們將測試去吸引用戶的關(guān)注和傾斜的結(jié)果，以避免顏色的元素。

6。確保互動元素有相應的啟示

互動元素，需要看它們是如何工作的;按鈕例如，尋找點擊。這使您能夠了解行動電話是否足夠明確在測試過程中，以及哪些元素需要啟示的設(shè)計師和開發(fā)。

7。工作中的實際像素

這不是個大問題，如果你在HTML線框。但如果你正在創(chuàng)建扁線，以像素為單位工作的帶走了很多猜測，為您和設(shè)計師。這是顯而易見的，但我看到它發(fā)生了很多。我沒有用工作當我們選擇線框工具的PowerPoint是在像素，但到設(shè)計時，這引起的問題。線框?qū)嶋H像素的最終設(shè)計，使您能夠準確的大小和頁面上的元素。

8。包括更改日志

由于您的線框通過多次迭代，正變得越來越小的變化。從完整的頁面，重組未成年人副本的變化。當你對這些小的調(diào)整，很難審查文件，通知所有已經(jīng)作出的改變的人。在甲板上開始簡單的更改日志，有助于讓每個人都需要檢討與變化，以日期。在更改日志中的每個條目應包括文件的版本號，誰做的變化和頁面引用的所有更改。

9。避免黑線

它很容易為線框看看他們所有的線，框和子彈的混亂。這總是更糟的過度沉重的黑色分歧。盡量避免線共組項目，而不是使用陰影框，如果你需要使用線薄灰色虛線的 - 你的線框?qū)⒖雌饋聿涣鑱y。

使用遮陽和較輕的虛線，以減少視覺混亂。

10。不要只是和他們揮手再見

這一點很重要，不只是拋出你的線框以上的客戶和他們告別波墻。預留一些時間來支持實現(xiàn)你的想法，因為他們的設(shè)計和開發(fā)團隊。與世界上最好的意愿，承諾以線框的事情，你可能不總是被理解，或付諸實踐時，可能無法正常工作。是很重要的一方面是，以澄清任何問題，并幫助用戶研究為基礎(chǔ)的解決方案。
以上原創(chuàng)來自北京傳誠信轉(zhuǎn)載請標明！