Grid:
對於 Dynamic Website, 所有資料都是從 database 輸入, 網站管理者會輸入多少的圖文量並不像平面設計一樣,對固定的每篇文字可以做字量,字型,字距,或是行距的細部最佳化. Dynamic 填入網頁內容,圖文的視覺部分本身控制比較不定,但是也可以用雜誌書報慣用的格線設計方法來解決. 不過不同於一般平面設計的頁面大小已經確定,網站必須考慮到變動的Browser頁面大小(例如小電腦的螢幕較小,或是安裝一堆browser tool bar的寬高也會佔掉不少.這些都要考慮到)
定義好格線框架,整個網站基本的圖文分布可以底定,至於內容圖文的變化,就可以在這框架內做有趣的變化.

前篇提過,Front案的寬度是固定的,而高度則是依業面大小取80%來使用,所以橫向的Grid如果至上對齊,短一點的內容會讓整體頁面都浮在上半部,所以我還是將內容部分居中,而navigation部份則保留在 80% 的大小,這樣一來整個頁面在視覺上還是會造成一個版面範圍的整體視覺效果,而不會造成navigation靠到四角與內容分開的孤立情形.

Navigation:

瀏覽機制一直是我認為的flash website技術跟設計的重點

技術方面:瀏覽方式設計完成,其餘就只剩內容的讀取與卸除. 如果加上 Deeplinking 的機能,整個瀏覽系統會更符合客戶需求,不過在 F 案裡, 所有的 menu 全部都是及時從 database 產生, 製作 Deeplinking 幾乎花上我好幾倍的時間製作…

瀏覽過此站的人不難發現,整個網站的重點其實是在 Works 裡面, 當初我的規劃是將 Works 獨立出來,其他的Menu放在另一邊, 這樣一來可以直接突顯主要Content, 不過再 presentation的時候,這個訴求反而不被客戶接受, 客戶認為此站並不想要特別突顯作品部份, 會顯的有點 show off. 所以還是決定將所有的 menu 放在一起.

現有的 Menu 運作規劃 idea 來自 ipod, 從前ipod的設計, 除了一層層進去外, 按menu要一層層出來,或是直接跳到第一層, 由於螢幕小,所以這樣的設計非常恰當, 不過當初在使用的時候, 發現小螢幕把瀏覽簡化了, 但也帶來了一些隨之而逝的方便, 所以我把相同的 idea 用在螢幕範圍大的網頁上, 加上將選取後的menu也呈現出來, 讓user可以方便的直接跳著點回去上層或上上層選單.

同時在整個頁面的區域上,變成 logo 以左的是以選取內容,也是現在你正在看的內容,logo右變則是你可以選取的下一個內容, 這樣的區域分割乾淨簡單明瞭,並且把滑鼠的運作區域留在左變,不會按鈕散佈各地,讓人不知從哪邊按起.

在製作的時候發現了第一層menu也會是最後一層 menu 的標題, 而最後一層標題對應內容的內容部份,也可以是歸類的屬性之一,於至我把這兩者之間的關係用動態表示出來,一來形成向太極一樣的迴旋動感,二來,所有的動態都是 menu 跑來跑去,在最後一頁的資訊,直接可以讓人有所有的文字都是可以點選的意圖.

Visual Style:

在 Visual Style方面, 在製作之初就遇到兩大難題:
1. 客戶的圖片幾乎都是未加修飾的照片
2. 不能有太多的裝飾線條,圖形點綴 (客戶是那種很小心的人,認為用錯一些設計導致的尷尬,不如什麼都不要那種)

解決1. 的方法就是用版面的設計去蓋過圖片的不完美, 不過這又牴觸了2.
在乎相矛盾之下我決定誘導客戶讓他們接受一些很基本的元素. 我成功的用圓形擄獲了老闆娘的支持. 所以好不容易才在網站上有了圓形這個元素…

把圓形用於代表project的元件上之外, 要用圓形做所有的界面似乎不太可能, 很多內容還是必須要有方形的元素才可以完成, 所以每個 section 的過場加上了一個大圓,讓大圓變成一條線,在轉成方形,這樣就可以用圓形來貫穿整個網站.

Project Items:

原本的設計並非用小圓形,而是以一個很大的甜甜圈形(中空)呈現,在視覺上比較獨特, 不過跟客戶開會時,他們覺得這個甜甜圈形非常搶眼,讓人印象深刻,不過跟他們的branding以及整個形象並沒有任何關連,所以要求改成基本的圓形即可.

在設計的時候,有時候只顧及到整個視覺的呈現,卻忽略的真正或隱藏在裡面的涵意, 我想常常會是設計師的盲點,在這個案子的製作過程裡,我上了一課…

<< 請踴躍投票