初學網(wǎng)頁設計者最容易走進的誤區(qū)就是認為版面越滿越好,但實際上有時候“多即是少”,視覺元素越多,就越容易分散用戶的注意力。網(wǎng)頁中視覺的有效性是視覺設計要點中最基礎的特性,由于不同的視覺語言往往會打破自然的視覺流程,因此在整個版式上必須力求要點突出,主要的解決方法有簡化版式、適當留白等。
一、簡化
簡化版式是盡量以簡單明確的語言和畫面告訴大家本站點的主題。簡化并非為了版式的簡潔而刪除信息,而是應當在遵循網(wǎng)站的信息結構及框架的基礎上,尋找界面版式最佳的表現(xiàn)方法。
一方面,在每個界面內(nèi)仔細斟酌信息間的結構聯(lián)系,對于過于煩冗或者毫無聯(lián)系的內(nèi)容進行必要的轉(zhuǎn)移或刪除。尤其是在電子商務網(wǎng)站中,把控好信息層級結構、矩形結構、自然結構的版式表現(xiàn),不僅有利于用戶理解網(wǎng)站的主題內(nèi)容,還能為網(wǎng)站本身帶來更多的商業(yè)價值。如窩窩團網(wǎng)站的原版設計(見圖1)重點內(nèi)容就不夠突出,其界面在1366像素×768像素的屏幕分辨率下文字、圖片信息都未能顯示完整,這是由于給用戶較多的篩選條件,占用了較多空間高度,導致團購網(wǎng)站中重點的商家圖片展示不全、文字信息完全看不見,這種版式就對用戶獲取團購信息造成了困擾。
在改版設計(見圖2)中首先是將占用較多高度的選項重新整合將“全部分類”信息作為固定導航置于界面左側,接著將全部商區(qū)從兩行精簡為一行,顯示不完的地區(qū)選項隱藏到“更多”的按鈕中,這樣節(jié)約的高度就可以讓團購的圖文信息顯示得更完整(縮小圖片尺寸將能顯示更多團購信息顯得品種豐富),手機App下載的快捷入口得以在第一屏中顯示。
圖1 窩窩團網(wǎng)站的原版設計
圖2 窩窩團網(wǎng)站的改版設計
另一方面,把控界面內(nèi)圖形圖片與文字的比例。圖與文的搭配可以降低閱讀的疲勞感,但要注意各自所占的比例,同一個信息內(nèi)容是設計成炫酷的圖片還只是簡單的文字,需要參考信息的優(yōu)先級來決定其視覺表現(xiàn)形式,另外還需要考慮界面中圖文比例,若圖過多面積過大可能會造成視覺繁雜,若字過多會顯得界面過于空洞。如同為招聘網(wǎng)站,智聯(lián)招聘網(wǎng)站(見圖3)的圖較多,顯得雜亂,用戶需要一定的時間在圖片中找到自己需要的信息。而58同城招聘頁面(見圖4)大量的文字配以少量的圖片,反而顯得大氣而不失精致,有利于用戶理解網(wǎng)站的信息邏輯,建立良好的印象。
圖3 智聯(lián)招聘網(wǎng)
圖4 58同城招聘頁面
二、留白
留白空間不一定是白色的,它指的是任何與背景相同的空間,所以它可以是白色、黑色,甚至可以包含微妙的紋理。不管你習慣稱之為負空間還是留白,它都非常聰明地引導你關注網(wǎng)頁的重要內(nèi)容,同時它也是極簡風格的典型特征。目前越來越多的網(wǎng)站開始使用這種設計,設計師們逐漸意識到這種設計是多么有用。
最直接的案例就是大家常用的搜索引擎網(wǎng)站——百度,它是留白的典范,所有無關緊要的元素都被移除,首頁中搜索框吸引了用戶全部的注意力,它就是要你輸入,然后按Enter鍵進行搜索。留白或者負空間的存在是極簡主義最明顯的特征,它們的存在并不意味著那些地方無內(nèi)容,留白和其所襯托的主體元素是相互依托的關系。值得一提的是進入到搜索結果頁面依然延續(xù)了“留白”的這一風格,利用留白劃分出搜索結果和相關書籍兩個欄目,當滾動向下瀏覽頁面時,右側相關書籍為空白,用戶會不自覺地將注意力停留在左側的搜索結果中。
在很多藝術家設計師的個人網(wǎng)站中也會大膽地運用留白,如藝術指導JUNLU的個人網(wǎng)站(見圖5),進入首頁就是簡單的幾個作品的布局,每個作品間的間距較大,自然地分割出每個作品的空間,沒有其他的修飾元素進行干擾,卻能有力地告訴用戶別想其他的,請靜靜欣賞我的作品吧。
圖5 JUNLU的個人網(wǎng)站