來源:派臣科技|時間:2019-01-05|瀏覽:次
我剛?cè)?a href="http://www.fivetone.cn/wangyesheji/" title="網(wǎng)頁設(shè)計">網(wǎng)頁設(shè)計的時候什么也不問就著手了工作,時常聽到“讓你更自由的去設(shè)計吧”。許久一段時間不太明白其中的意味。最后對照交付的線框圖和自己的設(shè)計時,發(fā)現(xiàn)什么也沒改變…這次試著從新思考一下關(guān)于線框圖和設(shè)計的問題。
一.從線框圖到設(shè)計
如果聽到“準(zhǔn)確的通過這個再現(xiàn)出來!”,基礎(chǔ)的表現(xiàn)手法是自由的。請盡情地發(fā)揮你的創(chuàng)意吧!
要素1:改變面積
我認(rèn)為線框圖許多部署都是四方形圍成的箱子。但是,近期的看到的許多網(wǎng)站設(shè)計是寬度填滿瀏覽器的。
例如時常能發(fā)現(xiàn)這樣的線框圖。Logo在左上,右上是菜單。很大的廣告框,下面是內(nèi)容…。這個全部都四邊形的線給包裹住。如果根據(jù)這個去設(shè)計網(wǎng)站,或許就不能看到寬屏的廣告圖了。
因此廣告圖的寬度需要充滿瀏覽器,改變設(shè)計會讓得到更好的感覺。與線框圖相比,他的圖片也形成了差異。
要素2:改變布置
并非要無視布置的緊要度。而是更詳細(xì)的思考。
時常在列表頁等能看到,圖片和標(biāo)題、概要的列表。怎樣才能更好的關(guān)注圖片呢?
這個例子是在圖片上放置文案。要是沒有長文案,這樣的布置是靈驗的。
另外,這樣圖標(biāo)和文章組合的部署也能時??吹?。像這樣的長文本中對齊是相當(dāng)難以閱讀的。
像這樣圖像在左,文章在右的放置。緊要的元素是不能改變的,左對齊的文章提升了可讀性,文字更加緊湊。
要素3:改變表現(xiàn)手法
這是在籌備線框圖階段的要素。然而,沒有參加制作線框圖的時候,設(shè)計師也會提出種種提案的表現(xiàn)手法。較大的改變是在開始設(shè)計以前,交付線框圖的時候好好商量。
這里舉個實際例子。我去參加一個在海外以成為創(chuàng)意家為目標(biāo)的Frog School,定期舉辦短期網(wǎng)站設(shè)計和鍛煉英語能力的講座。這里有3個費用的方案,最初是像這樣上面包括著這服務(wù)和費用匯聚之后的文本。
然而實際上像這樣的費用表已經(jīng)改變了。包括的,不包括的很容易就分的清。
也有其他的,能在網(wǎng)站上看到活動提示的日歷。日歷想要便利,需要大做文章。這個網(wǎng)站因為是一個月舉辦3到4次活動,如果反過來來看日歷,在設(shè)計的時候會浪費掉務(wù)必的空間。
像這樣改成單一的活動列表來表示。舉辦日和舉辦場地也會很容易分辨。
二.什么都能夠改變么?要有必要的原因
像這樣根據(jù)交付的線框圖去設(shè)計也還是不行的。必須要是有所謂的設(shè)計原因。沒有原因的設(shè)計只是自我滿足。盡可能的對線框圖制作人去介紹更改的原因?“這樣感覺看起來很好“這樣的回答通常是不行的。因此全部采用線框圖的設(shè)計,而自己一點沒明白??傆X得根據(jù)這樣做法去工作的設(shè)計師,請漸漸的拋棄這樣想法吧。
三.寫給制作線框圖的人
到這里為止,能夠?qū)懡o設(shè)計師。這里著手是寫給線框圖制作人的。相比為了更快完成設(shè)計,有幾點還是要拜托的。
不要加入設(shè)計元素,簡易
關(guān)于設(shè)計師按照線框圖推進(jìn)設(shè)計的緊要原因,也會有“線框圖制作讓人迷惑”的地方。在線框圖的階段,如果留白,字體和顏色都被制定了,設(shè)計師會忠實的體現(xiàn)出來,不會加入很大的改變。但是線框圖的宗旨是優(yōu)先等級和必要內(nèi)容的確認(rèn)。設(shè)計師應(yīng)當(dāng)更多的丟棄固定的觀念去工作,相框圖應(yīng)當(dāng)是非常簡潔的為好。
另外,顏色和字體被指定的情形也是有的,附件作為規(guī)范樣式也能時??吹?。
文本能夠作為拷貝粘貼
用Web service和Illustrator等工具制作相框圖的人也有許多,其中也有交付打印的相框圖。想要更好的推進(jìn)工作效率,盡可能插入的文本是能夠復(fù)制粘貼的,很高興交付的是文件格式。
標(biāo)記與備注用別的準(zhǔn)則
在線框圖中插入“標(biāo)記字體用一欄”“難點突出”等等的注釋。這樣單一這樣做,網(wǎng)站所反映的內(nèi)容會被混淆看漏。要是操作對話框,或者是改變顏色,這樣的內(nèi)容更容易被了解吧。近期我操作的制作相框圖的工具M(jìn)oqups,在內(nèi)容加入想要追加的要素,可能這樣的瀏覽方式是相當(dāng)方便的。
舉了幾個例子,說明了線框圖與設(shè)計,因為這只是一個例子,不能對所有的網(wǎng)站都靈驗。對于網(wǎng)站用怎樣的表現(xiàn)手法去設(shè)計是最佳的?一邊仔細(xì)的思考一邊去做設(shè)計吧。然后希望成為能自信滿滿地說 “線框圖請交給我吧”的設(shè)計師。