我剛?cè)朐O(shè)計(jì)的時(shí)候什么也不問(wèn)就開(kāi)始了工作，經(jīng)常聽(tīng)到"讓你更自由的去設(shè)計(jì)吧"。很久一段時(shí)間不太明白其中的意味。最后對(duì)比交付的線框圖和自己的設(shè)計(jì)時(shí)，發(fā)現(xiàn)什么也沒(méi)改變…這次試著從新考慮一下關(guān)于線框圖和設(shè)計(jì)的問(wèn)題。

一．從線框圖到設(shè)計(jì)

如果聽(tīng)到"準(zhǔn)確的通過(guò)這個(gè)再現(xiàn)出來(lái)！"，基本的表現(xiàn)方法是自由的。請(qǐng)盡情地發(fā)揮你的創(chuàng)意吧！

要點(diǎn)1：改變面積

我認(rèn)為線框圖很多布局都是四方形圍成的箱子。但是，最近的看到的很多網(wǎng)頁(yè)設(shè)計(jì)是寬度填滿瀏覽器的。

例如經(jīng)常能發(fā)現(xiàn)這樣的線框圖。Logo在左上，右上是菜單。很大的廣告框，下面是內(nèi)容…。這個(gè)全部都四邊形的線給包裹住。如果按照這個(gè)去設(shè)計(jì)網(wǎng)站，也許就不能看到寬屏的廣告圖了。

因此廣告圖的寬度需要充滿瀏覽器，改變?cè)O(shè)計(jì)會(huì)讓得到更好的感覺(jué)。與線框圖相比，他的圖片也產(chǎn)生了差別。

要點(diǎn)2：改變布置

并非要無(wú)視布置的重要度。而是更詳細(xì)的考慮。

經(jīng)常在列表頁(yè)等能看到，圖片和標(biāo)題、概要的列表。怎么樣才能更好的關(guān)注圖片呢？

這個(gè)例子是在圖片上放置文案。要是沒(méi)有長(zhǎng)文案，這樣的布置是有效的。

另外，這樣圖標(biāo)和文章組合的布局也能經(jīng)常看到。像這樣的長(zhǎng)文本中對(duì)齊是相當(dāng)難以閱讀的。

像這樣圖像在左，文章在右的放置。重要的元素是不能改變的，左對(duì)齊的文章提高了可讀性，文字更加緊湊。

要點(diǎn)3：改變表現(xiàn)方法

這是在準(zhǔn)備線框圖階段的要點(diǎn)。然而，沒(méi)有參加制作線框圖的時(shí)候，設(shè)計(jì)師也會(huì)提出各種提案的表現(xiàn)方法。較大的改變是在著手設(shè)計(jì)之前，交付線框圖的時(shí)候好好商量。

這里舉個(gè)實(shí)際例子。我去參加一個(gè)在海外以成為創(chuàng)意家為目標(biāo)的Frog School，定期舉辦短期網(wǎng)頁(yè)設(shè)計(jì)和鍛煉英語(yǔ)能力的講座。這里有3個(gè)費(fèi)用的計(jì)劃，最初是像這樣上面包含著這服務(wù)和費(fèi)用匯總之后的文本。

然而實(shí)際上像這樣的費(fèi)用表已經(jīng)改變了。包含的，不包含的很容易就分的清。

也有其他的，能在網(wǎng)站上看到活動(dòng)提醒的日歷。日歷想要便利，需要大做文章。這個(gè)網(wǎng)站由于是一個(gè)月舉辦3到4次活動(dòng)，如果反過(guò)來(lái)來(lái)看日歷，在設(shè)計(jì)的時(shí)候會(huì)浪費(fèi)掉一定的空間。

像這樣改成單純的活動(dòng)列表來(lái)表示。舉辦日和舉辦場(chǎng)地也會(huì)很容易分辨。

二．什么都可以改變么？要有必要的理由

像這樣按照交付的線框圖去設(shè)計(jì)也還是不行的。必須要是有所謂的設(shè)計(jì)理由。沒(méi)有理由的設(shè)計(jì)只是自我滿足。盡可能的對(duì)線框圖制作人去說(shuō)明更改的理由？"這樣感覺(jué)看起來(lái)很好"這樣的回答通常是不行的。因此全部采用線框圖的設(shè)計(jì)，而自己一點(diǎn)沒(méi)明白。總覺(jué)得按照這樣做法去工作的設(shè)計(jì)師，請(qǐng)慢慢的拋棄這樣想法吧。

三．寫(xiě)給制作線框圖的人

到這里為止，可以寫(xiě)給設(shè)計(jì)師。這里開(kāi)始是寫(xiě)給線框圖制作人的。相比為了更快完成設(shè)計(jì)，有幾點(diǎn)還是要拜托的。

不要加入設(shè)計(jì)元素，簡(jiǎn)單

關(guān)于設(shè)計(jì)師根據(jù)線框圖推進(jìn)設(shè)計(jì)的重要理由，也會(huì)有"線框圖制作讓人迷惑"的地方。在線框圖的階段，如果留白，字體和顏色都被制定了，設(shè)計(jì)師會(huì)忠實(shí)的呈現(xiàn)出來(lái)，不會(huì)加入很大的改變。但是線框圖的目的是優(yōu)先等級(jí)和必要內(nèi)容的確認(rèn)。設(shè)計(jì)師應(yīng)該更多的丟棄固定的概念去工作，相框圖應(yīng)該是極其簡(jiǎn)潔的為好。

另外，顏色和字體被指定的情況也是有的，附件作為規(guī)范樣式也能經(jīng)常看到。

文本可以作為拷貝粘貼

用Web service和Illustrator等工具制作相框圖的人也有很多，其中也有交付打印的相框圖。想要更好的推進(jìn)工作效率，盡可能插入的文本是可以復(fù)制粘貼的，很高興交付的是文件格式。

標(biāo)記與備注用別的標(biāo)準(zhǔn)

在線框圖中插入"標(biāo)記字體用一欄""重點(diǎn)突出"等等的注釋。這樣單純這樣做，網(wǎng)站所反映的內(nèi)容會(huì)被混淆看漏。要是使用對(duì)話框，或者是改變顏色，這樣的內(nèi)容更容易被理解吧。最近我使用的制作相框圖的工具M(jìn)oqups，在內(nèi)容加入想要追加的要點(diǎn)，可能這樣的瀏覽方式是相當(dāng)方便的。

舉了幾個(gè)例子，介紹了線框圖與設(shè)計(jì)，由于這只是一個(gè)例子，不能對(duì)所有的網(wǎng)站都有效。對(duì)于網(wǎng)站用什么樣的表現(xiàn)方法去設(shè)計(jì)是最好的？一邊仔細(xì)的考慮一邊去做設(shè)計(jì)吧。然后希望成為能自信滿滿地說(shuō) "線框圖請(qǐng)交給我吧"的設(shè)計(jì)師。

以上就是關(guān)于線框圖和設(shè)計(jì)的問(wèn)題詳解，對(duì)于一些剛?cè)腴T(mén)的線框圖設(shè)計(jì)師來(lái)說(shuō)，這是篇很好的教程，希望能對(duì)大家有所幫助！