線框在網(wǎng)站設(shè)計中的應(yīng)用。

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

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

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

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

廣告

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3。確保一切都增加了

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

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

4?？紤]和描述圖像

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

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

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

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

5。使用顏色時要小心

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

6。確?；釉赜邢鄳?yīng)的啟示

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

7。工作中的實際像素

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

8。包括更改日志

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

9。避免黑線

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

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

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

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