一個物體要保持平衡,最重要的是校準(zhǔn)重心的位置,一個平衡的物體看上去讓人心生愉悅,凌亂的姿勢會擾亂人的內(nèi)心。這個世界是由無數(shù)個平衡體構(gòu)成的,就像地球之于宇宙、單車之于速度,平衡產(chǎn)生美感和視覺沖擊。
界面設(shè)計亦然。現(xiàn)在的應(yīng)用越來越強調(diào)用戶體驗,在web頁面設(shè)計中,重心是基礎(chǔ)。校準(zhǔn)重心就是讓頁面有平衡感,所見之處爽心悅目。平衡有兩種,一種是整體平衡,一種是局部平衡。淘寶、百度百科、QQ空間等網(wǎng)站在這兩種平衡上都做得很好,即考慮到了信息的充分傳播,又考慮到了視覺的協(xié)調(diào)性。信息和視覺其實是網(wǎng)站最具價值的兩個因素。
現(xiàn)在顯示器的分辨率非常多,有標(biāo)準(zhǔn)屏但更多的是寬屏,而寬屏又有不同的比例,在這種大背景下,頁面兼容顯得尤為重要,這里帶來了兩個問題:一是如何讓屏幕空間不浪費,二是如何兼容各種奇葩的分辨率。百度百科采用的方案值得我們參考。

上圖中,百度百科的導(dǎo)航欄寬度是100%設(shè)置的,但正文內(nèi)容的寬度被固定為1024個像素,顯然這是為了兼容過去的標(biāo)準(zhǔn)屏。但是,整個頁面看上去平衡感非常好,顯示屏效果充實而飽滿,內(nèi)容也很好的展現(xiàn)出來了。我們注意到導(dǎo)航欄中的文字并不是靠左邊的,而是與正文內(nèi)容對齊,這其實就是為了保持重心位置,讓重心落實到平衡感最強的那個點上。
有時候,為了保持頁面的重心,不得不做一些有價值的平衡工作。我們在閱讀新聞時,如果新聞內(nèi)容占滿整個頁面寬度,頓時變得毫無水準(zhǔn),為了體現(xiàn)出頁面的設(shè)計感,往往采用兩欄或三欄的形式來展現(xiàn)內(nèi)容,這是目前所有網(wǎng)站的做法。下面以株洲網(wǎng)為例。

這樣看起來似乎很糟糕,的確,左邊是內(nèi)容,右邊空空如也,重心偏移,平衡感打破了,需要對其進(jìn)行調(diào)整。右欄可放的東西很多,不過,放與本條新聞有關(guān)聯(lián)的內(nèi)容保證信息的聚合顯然更符合用戶的期待。我們可以從時間、空間、主觀、客觀等方面進(jìn)行考慮。下面是解決方案。

現(xiàn)在我們來看一個反面案例。對汽車感興趣的人會上“汽車之家”這個網(wǎng)站,該網(wǎng)站有一個論壇,在論壇的首頁,有一個最新精華帖列表。

我們從重心的角度來討論該頁面的設(shè)計問題。選項卡左邊是標(biāo)題“最新精華帖”,右邊是“更多”鏈接,重心在中間,保持了平衡感。問題在于表格的標(biāo)題行與內(nèi)容行有重心偏移現(xiàn)象。第一列是帖子內(nèi)容,標(biāo)題“論壇精華帖”居中,但內(nèi)容靠左,這二者之間的重心是不同的,造成了失衡。對于表格來說,要盡可能讓標(biāo)題與內(nèi)容位于同一重心。有一點要注意,如果單元格內(nèi)容很多,占用了比較大的寬度,居左讓重心偏左看起來更舒服,如果單元格內(nèi)容很少,只有三五個字符,不管是居左、居中還是居右只要讓標(biāo)題和內(nèi)容保持一致都不會有太大的問題。
界面設(shè)計是一個銹花工作,大到整體布局,小到一個像素的寬度,一個地方做得不到位都會讓設(shè)計失去價值。關(guān)注開發(fā)中的方方面面,這是一種習(xí)慣,一種信仰,一種生活態(tài)度。這不僅僅是工作。
二〇一四年三月四日