another brilliant invention

911之後, 位於雙子星下面的 Path Station也沒了, 隨之重建的建築師則是我很喜愛的大師之一 Santiago Calatrava.
建築計畫現在正在 Spanish institute 展出:

http://www.spanishinstitute.org/spanish_institute_calendar.php#calatrava

Show till August 31, 2009

網站做多了,開始就會發現綜觀的背後因子的原由.在做完 front 之後,有些心得,趁現在還記得在這邊記錄下來跟大家分享.

網站分為很多種,有社群網站,blog,新聞網站,購物網站,或是介紹型的網站.
我經手的大多數是介紹型的網站. 介紹型的網站主要是傳遞資訊. 通常都是在介紹或訴說一個範圍的內容,比如說: 人,公司,汽車,房子,或是鞋子.有很多種網站都屬於這一類型.

首先提一下很根本又容易不忽視的事: 網站就像在講一個故事,必須在有限又多變化（筆電,桌上型,或是手機等等都不同）的視窗範圍內完成.

我們很習慣的把這個故事從不同的角度切割,做成介面. 通常的分法可以歸納成”質”跟”量”:

“質”:

就是所謂的本質,也是從不同的角度去切入主題,簡單說就像是如果介紹個人（設計師）可能有 about, works, photos, drawings, resume… 等等. 大部分的website都是在同一資訊上做本質的分割, 切成不同的資訊屬性以供閱讀.

資訊分割 – menu

在質上面的切割,聽似簡單,其實很重要也很複雜,裡面可以牽扯到策略跟流程.information architecture / user experience design 就是這方面的專業.

策略

做網站的人,常常忽略掉這點,而從”分類”的角度死板的切割資訊,這樣會做出很“邏輯“的網站,但卻不”人性”. 哪個選項比較重要,要提到外層,或第一頁讓人容易看到,不過又不會打亂整個資訊分類的邏輯. 在合邏輯的範疇內又要如何簡單使用, 用最少的clicks讓user/網站到達宣傳目的.

流程

怎樣設計才會讓人容易瀏覽,還有頁面跟頁面之間,如何做滑鼠操作的動向安排.看起來不會太複雜,同時又要注意到有進,就有出的反向.對於有先後閱讀順序的資訊,跟非線性區塊資訊都有不同的解決方法.

(上二圖）front案,一開始的設計著重於方便user 在操作上方便回去之前的選向而顯得非常雜亂.

(上圖）front案,將 works 獨立出來變成兩組 menu 的策略,強調 works section的內容.

在front案,原本我的提案是一開始就進入works section,因為主要內容都在這邊. 把works menu獨立出來,其他的放到其他地方,讓 user 比較容易按到 works section. 不過客戶不想要太 show off 作品(這是他們的策略) 所以最後我將所有 menu 平等對待統一放在一起.

“量”:

資訊顯示 – infovis 顯示同質多量的分佈狀況

除了最常見的資訊分割,還有一種有趣也可以說比較學術性的方法,通常用於大量的同質性資訊,同好管他叫做 information visualization (infovis)

“A picture tells thousand words“,有意義的infovis是能達到這樣的目的,不過有很多都只是求視覺上的表現,通常我認為這只是information eye candy,在不能幫助了解資訊而過於複雜的視覺表現,在資訊傳達上並不是一個好的approach.但是卻是個可以產生很漂亮視覺的方式… 如果複雜到沒辦法了解資訊,那何必又跟資料扯上關係,直接弄美美的不就好了? (迷思)

好的infovis通常可以幫助人了解資料之間的關係,像是區域性,時間性,或是量化跟比例. 我們其實從小時候的教育就開始接觸這類的方法,像是柱狀圖,餅狀圖,都可以說是這類的呈現.

網站上用infovis的手法可就五花八門了,樹狀,網狀,3d,地球mapping,等等的創意都有,簡單的可以在有限的螢幕裡做到一百筆資料,複雜的可以做到上千筆（不過我認為過多的infovis實在對使用者沒有太大幫助) 畢竟界面的設計是要以方便使用者瀏覽或是了解資訊與某些屬性的關係才有意義.

所以在顯示”量”的相互關係之後,另一種方法 – Sorting 的篩減過程就是量化表現之後切入內容的核心步驟.

資訊篩減 – sorting 減量進入資訊內容

顯示資料在某些屬性之間的關係,其實並沒有多大的意義,到最後還是要進入內容,不然也是多餘.就像 iTune 在眾多種瀏覽方式(cover flow, grid, list…) 還是得讓人聽歌才行. infovis 可以幫助瀏覽,不過這些聰明的瀏覽方式之後,開始適當的在螢幕上篩檢,逐漸的進入內容本身,才是真正有意義的.

所以在website上,sorting 比 infovis 功用來的實際, 通常 infovis的東西我欣賞個頂多一分鐘,可是 sorting 的真正功用可以讓人真的使用上很久. 利害的 sorting 方式也是可以顧及到 infovis 的美感部分, 兩者皆具的介面可以說是資訊呈現的完美.

在front案,一開始顯示所有的案子,經過不同的屬性選擇,漸漸narrow down案件的內容,一開始覺得在某些選項有的資訊超出了螢幕以外,使用到了scroll bar,並且浪費了很多空間,似乎不是很好的安排,但考慮到menu使用的直覺跟方便性的取捨,也就繼續保持一制的瀏覽方式而犧牲掉了一些全體視覺得呈現,不過或許這樣也傳達了某些篩檢的過程. 不一定要顯示全部的量,片面表現造成量的減少,或許也讓人鬆一口氣…

Click here to view the embedded video.

能用最簡單的SHM驅動這麼複雜的東西，天才一個

Benjamin Edwards 的概念性建築畫作,紙上談兵設計空間,畫面結構與系統規劃.欣賞的時候也會不自主的遊走在畫作上抽象符號,用自己的想像解釋.

Click here to view the embedded video.

介紹

Casulo