像懶人一樣去設(shè)計(jì)

設(shè)計(jì)是簡單的如果你知道要放的東西該放到哪。

曾經(jīng)在某個(gè)電子雜志里看到一篇關(guān)于如何在平面設(shè)計(jì)中偷懶的文章，引發(fā)了我的一些思考，在平面設(shè)計(jì)中有這么多可以偷懶的方法，那在網(wǎng)頁設(shè)計(jì)中是不是也有一些捷徑可以探索？當(dāng)然作為一個(gè)剛剛踏入網(wǎng)頁設(shè)計(jì)領(lǐng)域的新兵來說，這樣的標(biāo)題對(duì)我來說顯得有點(diǎn)“大逆不道”，但如果不寫下去，又覺得可惜。于是，文章也就寫下去了……

如果你剛打算從其他專業(yè)轉(zhuǎn)到網(wǎng)頁設(shè)計(jì)這個(gè)領(lǐng)域，那這篇文章是為你而寫的，如果不是，那就當(dāng)鑒賞一下精彩的圖片吧。

如果準(zhǔn)備好了？那就開始回歸正題吧！……

世界上第一臺(tái)電腦ENIAC的誕生是為什么？也許是那些研究員厭倦了周而復(fù)始的計(jì)算任務(wù)，想偷懶一下，所以造出了計(jì)算機(jī)以代替他們的機(jī)械勞動(dòng)。網(wǎng)絡(luò)出現(xiàn)是為了什么？也許是為了更好的接收外界最新鮮最勁爆的資訊，也許是為了能跟遠(yuǎn)方的親朋通過網(wǎng)絡(luò)來交流，也許是為了放松一下工作中緊繃的神經(jīng)，也許是想足不出戶就能得到天下萬物，也許只是想知道自己不知道的問題。而這些也許都是因?yàn)槿藗兲珣辛耍瑧械萌ベI報(bào)紙，看電視，懶得去跟朋友見面，懶得去運(yùn)動(dòng)放松，懶得去市場購物，懶得去查閱《十萬個(gè)為什么》、《百科全書》。而網(wǎng)絡(luò)的出現(xiàn)彌補(bǔ)了這些需求。難怪人越來越懶了……

偷懶對(duì)于設(shè)計(jì)師是奢侈的，但是這不能阻止我們偷懶，因?yàn)橛脩舳歼@么懶，我們不懶怎么能知道他們的需求（有些牽強(qiáng)的理由）然而我不是鼓勵(lì)我們與老板做“非暴力不抵抗”運(yùn)動(dòng)，而是要讓我們的工作更加有效率，這樣就可以多享受幾天準(zhǔn)時(shí)下班啦！

下面將要介紹的正是我為偷懶所做的努力。

一．網(wǎng)頁模板化

網(wǎng)頁設(shè)計(jì)有先天的制約因素，硬件制造商只給我們生產(chǎn)了前后滾輪的鼠標(biāo)，很少見過橫向滾動(dòng)的鼠標(biāo)，所以我們的頁面一般是長條狀的，然后在瀏覽器右側(cè)給我們按了個(gè)滾動(dòng)條就算吧我們忽悠過去了，而我們卻還用得不亦悅乎。而頁面的大小又要跟著主流顯示器的分辨率而確定。難怪有人稱我們是戴著腳鐐的舞蹈家，我更原意稱我們是頂著飯碗的舞蹈家，伺候不好這飯碗，摔了可就沒飯吃。所以，舞要跳，飯要吃。后來我學(xué)聰明了，從來都只做1280px以內(nèi)的頁面，這樣你好，我好，大家好。

定好頁面的大小后是不是迫不及待要爆發(fā)小宇宙了？爆發(fā)前，最好先確定好交互原型，因?yàn)樵O(shè)計(jì)師跟戰(zhàn)士一個(gè)德性，打仗的時(shí)候不是有“一鼓作氣，再而衰，三而竭”嘛，一但設(shè)計(jì)出一個(gè)“頁面”（暫且稱頁面）發(fā)現(xiàn)脫離了交互原型，那返工可是既累又打擊自尊的行為。

在設(shè)計(jì)頁面前我想跟大家分享一本“設(shè)計(jì)圣經(jīng)”里的幾句話“我們精心準(zhǔn)備的頁面在用戶看來更像是‘以每小時(shí)100公里的速度駛過的廣告牌’所以我們需要建立清楚的視覺層次，把頁面劃分為明確定義的區(qū)域”，把一些可以固定的模塊都做模板化處理，對(duì)于有延續(xù)性的設(shè)計(jì)（如：綠鉆有禮、綠鉆音樂會(huì)）這樣只要進(jìn)行一次模塊設(shè)計(jì)，后期可以不用經(jīng)過設(shè)計(jì)環(huán)節(jié)，節(jié)約了大量的設(shè)計(jì)、制作、開發(fā)資源，也使得頁面整潔，條理清晰。這樣讓我能在非模板區(qū)花更多的時(shí)間讓頁面變得更加精彩，多爭取 “幾秒”用戶的時(shí)間。

看來我對(duì)偷懶所做的工作初見成效了！

二．視覺規(guī)范化

“規(guī)范”一詞最早被我接觸應(yīng)該是《小學(xué)生行為規(guī)范》的時(shí)候，從小我們都知道要愛祖國愛人民，為什么？因?yàn)樗屛覀兊纳鐣?huì)安詳和諧，因?yàn)闄z查官懶得去解決這些小CASE，所以從娃娃抓起，從小培養(yǎng)我們做一個(gè)規(guī)范的好公民。

咱們?cè)O(shè)計(jì)界也有規(guī)范，大型企業(yè)品牌都有自己的一套VI系統(tǒng)，這些都是對(duì)于品牌所做的規(guī)范，規(guī)范能讓一些原則問題得到解決，網(wǎng)頁設(shè)計(jì)里的一些門戶級(jí)頁面特別需要注意的是規(guī)范，這樣能讓頁面統(tǒng)一，比如網(wǎng)頁設(shè)計(jì)里的間距，小到幾個(gè)像素（雖然網(wǎng)頁就這么點(diǎn)像素）也都要實(shí)行規(guī)范，規(guī)范做好了，就像一個(gè)人的儀表，端莊就會(huì)得到青睞，我們應(yīng)該不會(huì)習(xí)慣一腳穿皮鞋一腳穿拖鞋走在大街上吧？所以為了不XX用戶的眼球，我們需要做這些規(guī)范，要知道這些規(guī)范可是一勞永逸的美差呀，規(guī)范做好了，即使下回不是由我來操刀，其他設(shè)計(jì)師也能根據(jù)它來修改頁面，免去了溝通成本，我還可以抽點(diǎn)時(shí)間打個(gè)小盹。

三．隨時(shí)保存您的風(fēng)格

這玩意兒太重要了，別看一些頁面設(shè)計(jì)得多好看，那全是站在“巨人”的肩膀上的啊。PHOTOSHOP（這里不敢簡寫PS，因?yàn)樗也铧c(diǎn)過不了畢業(yè)論文）強(qiáng)大的圖形編輯功能是不言而喻的，但是其中一些自定義保存的部分據(jù)我觀察不是十分受到關(guān)注，Photoshop中的批處理、action、預(yù)設(shè)管理器那可是偷懶的“利器”啊。發(fā)現(xiàn)一個(gè)好的樣式、色彩或者配色可千萬別忘了保存，這些為工作提供了巨大的便利，如果為找不到合適的樣式而發(fā)愁，不如尋找一套樣式，然后在這基礎(chǔ)上修改，我經(jīng)常這么干。這樣更加節(jié)約您的寶貴時(shí)間，讓你將偷懶進(jìn)行到底……

四．善用填充圖

設(shè)計(jì)活動(dòng)頁面就像在設(shè)計(jì)一張海報(bào)，需要給人豐富的視覺感受才能打動(dòng)用戶，然而比較偷懶的做法就是添加填充圖，填充圖就是以一個(gè)單一的小元素平鋪成一個(gè)大的畫面，設(shè)計(jì)填充圖是一件有趣的事情，就幾個(gè)像素的擺放能影響整個(gè)畫面的效果，連續(xù)的圖形在我看來會(huì)給人真實(shí)的材質(zhì)感，讓畫面不再單調(diào)，使用恰當(dāng)會(huì)讓網(wǎng)頁平面化，提升用戶的視覺感受，這也是服裝巨頭們樂此不彼的手段，大家如果有興趣可以設(shè)計(jì)不同的填充圖。如果連這步都懶得去做的話，那還是去搜一下填充圖制作網(wǎng)站吧，因?yàn)槲覒械觅N鏈接了。

五．做立體效果

大學(xué)里老師總是跟我說“平面要不平那才有意思”我并不是要我們?nèi)グ央娔X屏幕給弄得跟哈哈鏡一樣。其實(shí)我們可以玩一些視錯(cuò)覺游戲，最近3D電影不是很流行么，我倒是期待有一天我們的廣大網(wǎng)友能夠戴著立體眼鏡瀏覽網(wǎng)頁，那是多大的欣慰啊……看來有點(diǎn)犯困才會(huì)想這么遠(yuǎn)，還是現(xiàn)實(shí)點(diǎn)，既然不能強(qiáng)迫用戶去買立體眼鏡那我們就直接做帶點(diǎn)立體的設(shè)計(jì)吧，圖個(gè)新鮮，網(wǎng)絡(luò)嘛就圖個(gè)新鮮。然而問題又來了，想做立體的東西但是苦于軟件水平有限怎么辦，那我就再向各位介紹一把PS的好兄弟Illustrator吧！Illustrator有一個(gè)濾鏡可以實(shí)現(xiàn)3D效果，任意拖拽，任意透視角度，任意光源，總之太多任意了，加個(gè)貼圖功能就是一個(gè)MINI 3DMAX拉！設(shè)置好參數(shù)然后導(dǎo)入PHOTOSHOP經(jīng)過“大肆”渲染就可以上廳堂啦。立體設(shè)計(jì)使畫面豐富，讓人浮想聯(lián)翩，方法挺簡單，想偷懶的同學(xué)都嘗試下吧！

總結(jié)了自己這么多偷懶的辦法，也希望對(duì)大家有點(diǎn)幫助，想偷點(diǎn)懶，早點(diǎn)結(jié)束這篇文章，祝看到這行的同學(xué)身體健康！萬事如意！感謝！