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

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

首先這是偉大的，因?yàn)樗且豁?xiàng)令人心動(dòng)的工作。工作是一件好事，但我要在這篇文章中討論的元素，往往錯(cuò)過(guò)了很多線框，他們成為有用的，因?yàn)樗麄兛梢詮慕o你一些設(shè)計(jì)的幫助。

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

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

廣告

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

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

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

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

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

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

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

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

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

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

要求領(lǐng)先的問(wèn)題，如“你能看到這家酒店的主要特點(diǎn)是什么？”?是有問(wèn)題的。問(wèn)你有突出的參與者，主要功能是顯示在頁(yè)面上某處，然后他們知道尋找他們。它也限制了參與者的反應(yīng)可以給你的深度?！笆堑模铱吹剿麄兡抢锸遣粫?huì)幫助你獲得很大的啟示。

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

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

如果沒(méi)有數(shù)據(jù)線框測(cè)試，測(cè)試其可用性。測(cè)試數(shù)據(jù)線框，你可以測(cè)試它的用戶體驗(yàn)。

3。確保一切都增加了

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

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

4?？紤]和描述圖像

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

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

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

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

5。使用顏色時(shí)要小心

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

6。確?；?dòng)元素有相應(yīng)的啟示

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

7。工作中的實(shí)際像素

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

8。包括更改日志

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

9。避免黑線

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

使用遮陽(yáng)和較輕的虛線，以減少視覺(jué)混亂。

10。不要只是和他們揮手再見(jiàn)

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