close

形式追隨內容? - 網頁設計

http://webdesign.zoapcon.com

 

  今天想說的是內容和容器的關系,順便把之前設計中碰到的問題和大家一起探討下。我們從軟件的設置說起。(這里以QQ的設置舉例)

  一個軟件的設置(常稱為系統設置)一般承載了軟件所有的可配置選項。通過導航,把內容放置在不同的選項卡下面。

  由于內容的劃分是根據產品功能的邏輯劃分,所以設計中經常碰到的問題就是:不同選項卡下面的內容多少不確定,對排版會帶來很大麻煩。

  正常情況如下圖,“啟動和登錄”內容填充了大部分版面,設置界面看上去很充實。

 

  但有的選項卡下面的內容很少,整個界面就一兩行字,大片都是空白。由于內容和留白的比例失衡而導致一定的視覺問題(下圖是我自己P的:)

 

  又或者,有的選項卡下面的內容超出了界面的高度… 即使短時間內沒發生這個問題,隨著產品功能的調整,可配置項越來越多,就會產生問題。

  下圖消息提醒的設置,如果我再想加一行內容,就必須在已有內容上減少一行。

 

  之前做排版的時候,一直對這個問題很頭痛。內容過少時,會設法增加內容或者視覺元素,以求視覺上的平衡;內容過多時,會調整目錄結構,把一個菜單項拆成兩項,或者反復排版,把內容盡可能壓縮在一頁里排下。

  但是這樣又引入了新的問題:

  無端增加視覺元素并不是用戶需要的

  為了把多出來的內容放到設置界面里,有時候不得不根據內容的多寡來劃分菜單項,而不是單純的根據邏輯關系

  不可持續(產品需求的變更很有可能導致之前做好的排版又要改)

  然后我想到了工業設計中經常被提到的一句話:形式追隨功能(form follows function)。這句話對學設計的同學來說應該不陌生了,最早由建筑師沙利文提出,后來成為包豪斯最重要的主張之一。說這句話對整個設計界都產生了深遠的影響也不為過。因為它是如此的出名,并且容易引發“究竟是形式重要還是功能重要”的爭議,所以這里只以“形式追隨內容”為題,不敢把話題扯得這么大。

  其實已經有設計把我上面提到的這個問題解決了。對,答案就是蘋果的系統設置界面。

 

  Windows環境的同學可以裝safari for PC,看它的偏好設置。這里我截了“通用”和“自動填充”兩個界面,如下圖


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜

    beangte 發表在 痞客邦 留言(0) 人氣()