談?wù)勗O(shè)計(jì)中的效率

0 評(píng)論 2562 瀏覽 1 收藏 7 分鐘

本版有一篇極簡(jiǎn)主義,大致瀏覽了一番??磥?lái)需要介紹一下什么是效率!

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

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

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

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

而一些另類(lèi)的淘寶店主,卻因經(jīng)營(yíng)著本來(lái)就不多的東西,而把頁(yè)面做的簡(jiǎn)單醒目。因?yàn)樗麄兺ㄟ^(guò)實(shí)踐,知道怎末做能帶來(lái)更多的銷(xiāo)量,也就達(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í)代,用戶(hù)操作越來(lái)越迅捷,打開(kāi)首頁(yè)后請(qǐng)給我5秒鐘做出一個(gè)點(diǎn)擊鏈接的判斷和繼續(xù)往下訪(fǎng)問(wèn)的理由,否則我將失卻耐心。

首頁(yè)超過(guò)1.5屏的內(nèi)容,往往80%用戶(hù)不去關(guān)注,白白浪費(fèi)帶寬。而你的首頁(yè)往往會(huì)超過(guò)3屏,也就是說(shuō),用戶(hù)下載你的首頁(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度的線(xiàn)相交,在四維判斷上用戶(hù)要通過(guò)兩個(gè)方向來(lái)判斷,造成一種感官困擾。而圓角是兩條成90度的線(xiàn)的國(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)直一條線(xiàn),這就提高了效率。而瀏覽器的實(shí)現(xiàn),也是這樣,它是基于“塊體”的,換句話(huà)說(shuō)瀏覽器的呈現(xiàn)是遵循縱橫鏈各坐標(biāo)軸的,而圓角和斜線(xiàn)是不符合瀏覽器的工業(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ì)。這樣的話(huà),你的每一頁(yè),都省掉了無(wú)用的信息和裝飾,既提高了下載效率,又減少了用戶(hù)選擇上的困擾,還把你的主旨瞬間傳達(dá)給用戶(hù)。這是一舉多得的事。

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

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

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

還有很多雜事,比如同樣面積大小、同樣文件格式的亮調(diào)圖片,就比暗調(diào)圖片來(lái)的K數(shù)小,下載快,所以大圖片用白背景、網(wǎng)頁(yè)用亮調(diào)白紙黑字是永遠(yuǎn)的主題——效率啊,效率。

要說(shuō)的話(huà),講三天講不完,就此打住。

作者:?rushfame

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!