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

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

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

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

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

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

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

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

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

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

這個例子是在圖片上放置文案。要是沒有長文案，這樣的布置是有效的。

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

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

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

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

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

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

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

像這樣改成單純的活動列表來表示。舉辦日和舉辦場地也會很容易分辨。

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

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

三．寫給制作線框圖的人

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

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

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

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

文本可以作為拷貝粘貼

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

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

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

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

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