網(wǎng)頁(yè)制作心得:如何提高設(shè)計(jì)的效率發(fā)布者：本站     時(shí)間：2020-05-23 12:05:59

介紹如何提高設(shè)計(jì)的效率，首先需要介紹一下什么是效率！

（一）過(guò)度設(shè)計(jì)和應(yīng)用泛濫

web1.0時(shí)代，由于客戶的愿望和其本身提供的信息資源的匱乏，彌漫著“過(guò)度設(shè)計(jì)”。大型門戶更是如此，密密麻麻得首頁(yè)、2位數(shù)的頻道導(dǎo)航，造就了大型門戶網(wǎng)站在感官上的特性——雜亂。而更有跟風(fēng)者，以模擬“雜亂”為手段，達(dá)成看上去就象大型門戶網(wǎng)站的用戶感受。

web2.0時(shí)代，SNS、插件應(yīng)用、推薦、相關(guān)信息的泛濫，有形成另一個(gè)“應(yīng)用泛濫”；而這些應(yīng)用有時(shí)候不得不有，不舍得放棄，最終形成SNS門戶，比如上線時(shí)間不太久的“掏江湖”，也未能擺脫“應(yīng)用泛濫”的窠臼。

垂直分類門戶，分類鏈接的利用率遠(yuǎn)大于關(guān)鍵字搜索，就不得不充斥著密密麻麻的鏈接，早已老化的阿里巴巴，就是如此。B2C商城，也是如此。

而一些另類的淘寶店主，卻因經(jīng)營(yíng)著本來(lái)就不多的東西，而把頁(yè)面做的簡(jiǎn)單醒目。因?yàn)樗麄兺ㄟ^(guò)實(shí)踐，知道怎末做能帶來(lái)更多的銷量，也就達(dá)到效率。

（二）什么叫經(jīng)濟(jì)，就是花最小的投入，達(dá)到最大的效果。

對(duì)于網(wǎng)站設(shè)計(jì)來(lái)說(shuō)，效率從以下幾方面處理：

（1）首頁(yè)

你看大多數(shù)網(wǎng)站的首頁(yè)，會(huì)看一屏往下的內(nèi)容后，再點(diǎn)其他鏈接嗎？毋庸置疑，在越來(lái)越浮躁的時(shí)代，用戶操作越來(lái)越迅捷，打開首頁(yè)后請(qǐng)給我5秒鐘做出一個(gè)點(diǎn)擊鏈接的判斷和繼續(xù)往下訪問(wèn)的理由，否則我將失卻耐心。

首頁(yè)超過(guò)1.5屏的內(nèi)容，往往80%用戶不去關(guān)注，白白浪費(fèi)帶寬。而你的首頁(yè)往往會(huì)超過(guò)3屏，也就是說(shuō)，用戶下載你的首頁(yè)原本只需要一半的時(shí)間，你卻給了他另一半他根本不看的內(nèi)容。中國(guó)的網(wǎng)絡(luò)遠(yuǎn)遠(yuǎn)處于垃圾階段，在中國(guó)才有迅雷、網(wǎng)游加速器這種東西的生存土壤。你的首頁(yè)的下載時(shí)間是多么寶貴啊，你卻浪費(fèi)了。

（2）圓角裝飾和直角裝飾

圓角裝飾看上去比較潤(rùn)滑，是因?yàn)橄啾榷?，直角是兩條成90度的線相交，在四維判斷上用戶要通過(guò)兩個(gè)方向來(lái)判斷，造成一種感官困擾。而圓角是兩條成90度的線的國(guó)過(guò)渡，視覺(jué)判斷上是一種緩和。對(duì)于女性來(lái)講，方向感更差，所以她們是不得不“喜愛(ài)”圓角這種平滑過(guò)渡的。

在把所有的裝飾圖片用CSS做成背景后，一次下載多次使用，提高了效率。在HTML5普及之前，仍舊是需要用圖片來(lái)形成圓角裝飾的，當(dāng)然不排除用CSS、濾鏡、JS的一些hack技巧去模擬圓角，但這些都是“奇淫巧技”。

再說(shuō)一下，工業(yè)設(shè)計(jì)的先驅(qū)——包豪斯，起源于二戰(zhàn)前的德國(guó)，后因戰(zhàn)爭(zhēng)轉(zhuǎn)移到美國(guó)而成為當(dāng)今工業(yè)設(shè)計(jì)的發(fā)祥地?？纯炊?zhàn)德國(guó)的坦克跟當(dāng)今先進(jìn)的坦克在外形設(shè)計(jì)上時(shí)不分高下的。

IT其實(shí)是工業(yè)、也只有在工業(yè)設(shè)計(jì)成熟后，在能有IT的制作基礎(chǔ)。工業(yè)就講究一個(gè)直白，把多余的雜質(zhì)去掉，直接調(diào)直一條線，這就提高了效率。而瀏覽器的實(shí)現(xiàn)，也是這樣，它是基于“塊體”的，換句話說(shuō)瀏覽器的呈現(xiàn)是遵循縱橫鏈各坐標(biāo)軸的，而圓角和斜線是不符合瀏覽器的工業(yè)設(shè)計(jì)規(guī)則的。當(dāng)然有插件和一些其他的矢量語(yǔ)言來(lái)彌補(bǔ)，但要想提高效率，就要遵循瀏覽器的工業(yè)設(shè)計(jì)規(guī)則——塊體結(jié)構(gòu)。

那么扔掉圓角裝飾吧，即便是有了HTML5，也沒(méi)有比一個(gè)方框更有效率的渲染呈現(xiàn)方式了。去掉圓角，直接用CSS做個(gè)方框，效率多高啊。

（3）內(nèi)容為王

什么是一個(gè)好的網(wǎng)站設(shè)計(jì)呢？

把樣式表、裝飾圖片都去掉，剩下實(shí)體的可選中的文字、圖片、多媒體對(duì)象后，仍舊是一個(gè)很吸引人，這才是一個(gè)好站——內(nèi)容為王。

反過(guò)來(lái)說(shuō)，就是把原來(lái)的設(shè)計(jì)順序改一下，先把內(nèi)容排好，然后組織規(guī)劃成一套有層級(jí)的瀏覽體系——這就是極簡(jiǎn)設(shè)計(jì)。這樣的話，你的每一頁(yè)，都省掉了無(wú)用的信息和裝飾，既提高了下載效率，又減少了用戶選擇上的困擾，還把你的主旨瞬間傳達(dá)給用戶。這是一舉多得的事。

看過(guò)很多設(shè)計(jì)，都是為了裝飾而裝飾。這里空，就得加個(gè)圖片，布局沒(méi)占滿，就加個(gè)友情鏈接。欄目塊標(biāo)題前是不加裝飾不罷休的，韓國(guó)棒子就這么做，咱就給棒子學(xué)嗎?裝飾不是不可以加，總得說(shuō)出個(gè)有價(jià)值的目的來(lái)吧，比如突出標(biāo)題，完全可以用CSS來(lái)控制文字，干嘛要把文字做成圖片呢？比如注冊(cè)頁(yè)面空，是需要加個(gè)圖片來(lái)吸引新用戶的，這也說(shuō)的過(guò)去。

總之，加裝飾，請(qǐng)給我個(gè)理由，需要嗎？不需要嗎？

對(duì)于網(wǎng)站來(lái)說(shuō)，效率為王、功能為王、內(nèi)容為王、用戶為王，而裝飾在王者面前就要屈尊。