7/29/2007

新的Web 標準- Html5

27日參加一場由資策會創新應用服務研究所舉辦的"W3C網頁標準-推廣與應用研討會", 會中提及W3C新的推薦web標準已經從Xhtml1.0改成Html5了. (Html復活了! 太久沒上W3C網站, 連標準也改了.)

之前因為Html的語法不夠嚴謹, 希望以Xhtml1.0做為銜接Xml的橋樑, 況且Xhtml2.0還在草案階段中. 顯然使用Xhtml也有它的問題存在: 如實際上並未真正扮演橋樑的角色, 與Html無太大差異; 另外就是瀏覽器開發者的支援問題- Apple,Opera及Mozilla已經表態支持以Html5做為新的推薦web標準(Proposal to Adopt HTML5).

從W3C最近公佈的"Html5與Html4的差異性" (HTML 5 differences from HTML 4)文件可以看見Html5新增很多element(元素)和attribute(屬性), 尤其是關於表單的部份(稱Web Form2.0). 而header, footer, nav, article, section, vedio等慣用的css名稱也將直接定義在Html的element裡面. 再來, 喜歡用frame做系統平台或網頁的要注意了: frame, frameset, noframes 因為違反使用性的原因將不存在於Html5中, 但是建議改由css呈現frame的類似外觀.

Html5預計2010年要完成制定, 詳細時程如下 (Schedule of Deliverables) :

2007 Mar: convene the HTML Working Group
2007 Aug: First Working Draft
2008 Q2: Last Call Working Draft
2008 Q3: Candidate Recommendation
2010 Q2 Proposed Recommendation
2010 Q3 Recommendation

但是要落實到各家瀏覽器廠商都支援的階段恐怕還有一段路要走, 所以還可以觀察一陣子!

7/08/2007

列印出網頁背景圖的方式

有沒有遇見過客戶要求將網頁背景用印表機印出來的? 一般網製作都會盡量將背景圖, 背景色或icon裝飾圖片用css或table放到背景裡當網頁底圖, 只有文字和新聞照片才會放在html. 無法列印背景是瀏覽器的特性, 目的應該是不想干擾文字的呈現.

曾經有二個客戶提到這個問題: 一個比較好解決, 他的目的是希望可以將背景圖印出來做成報告呈給長官看, 但是缺少背景圖的網頁印出來只有文字和線條, 做不成漂亮的報告. 我提議用"螢幕列印"方式拼出頁面圖檔給他印, 但是他希望可以自己想印的時候印, 所以不喜歡這種方法 . 後來是我們的PM告訴他可以調整瀏覽器的設定才解決這個問題.

瀏覽器的設定可以到瀏覽器的"工具 / 網際網路選項 / 進階" 將 "列印色彩的背景及影像" 這選項打勾, 之後再到預覽列印就可以看到背景的顏色和圖片都顯示出來. 於是這位客戶的問題就解決了!


另一個比較麻煩, 我竟然也連做了二期, 和他照面二次. 第一期他希望將頁面中的選單, 標題和條例項目的icon圖都印出來, 可以清楚呈現這些用css做在背景的icon圖示, 例如箭頭, 圓點等. 但是我們知道css只有條列項目(list-style-image)的icon圖可以被印出來, 其他的不行. 所以當他看見用< li >寫的條列項目的圓點圖示可以印出來, 其他用< h >寫的圖示印不出來時, 就很堅持一定要想辦法達成全部印出來的要求. 第一次遇到這麼"盧"的客戶, 和他解釋瀏覽器的特性也沒用, 所以只好將所有icon圖都從背景拿出來放到html才解決這個問題. 這是很笨的方法, 但是笨方法可以解決問題的話也只好用了.

第二期我們又照面了, 一開始他沒提這種要求, 我也決定不再理會他, 直接將圖示都改放到背景. 在轉移舊資料時就發現第一期放在html的icon圖也跟著轉進來, 這是笨方法的下場, 於是上稿的人要比較辛苦的拿掉這些icon圖. 只是果不其然, 最後快要驗收時他又再次提出相同的問題, 但是這次他沒這麼堅持了, 也就得以維持原狀交差. 但是我還是想知道究竟有沒有人有列印背景圖的方法, 於是開始又搜尋Google.

搜尋的結果發現竟然有很多人在討論區問相同的問題, 大多數也都是遇到這種"盧"的客戶在求助的. 在這當中有個天才Andreas提供一個"偏方", 就是運用list-style-image 的特性印出背景圖, 他的example頁面是 Printing CSS background image . 說明頁在Web-Graphics.

他在h1下一個名為id="title"的style, 這組id如下:

#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}


上面的寫法依序說明如下:

1. 將h1的display設為list-item, 以條例項目型態顯示
2. 將list-style-image設為範例網頁中的banner.jpg
3. 這是考慮firefox的設定, 將圖示呈現方式改為"內縮"
4. 讓html上面h1的文字消失, 於是將letter-spacing設為-1000em
5. 但是4. 讓文字消失的方法在Opera沒有作用, 所以再將字級設成1pt並且和背景色同為白色, 這樣在Opera也看不清這些字了.
6. 在title名字加斜線"/" . 因為這方法在IE5和5.5無效, 所以用加斜線方式讓IE5和5.5因為無法辨識這種名稱寫法而不影響樣式呈現. (也就是讓IE5, 5.5以原來無背景圖, 只呈現標題文字的方式顯示)

這種方式只有在IE6, Firefox 1.0 and 1.5 and Opera 8.5有效, 但是這篇文章是在2005年12月25日發表, 所以只測試這些版本的瀏覽器, 但是我在IE7, Firefox2和Netscape8看也是OK的.

多虧這位Andreas想得出這種方法, 我會稱這種方法為"偏方"是因為< h >本來是標題的意思, 在css中改以條例項目型態顯示(list-item)有名不正言不順的嫌疑, 但是真的遇到這種"盧"的客戶也只好用了.

好用的方法介紹給大家參考!

7/04/2007

網頁設計思考之一

一直在思考一個問題: 怎樣的設計算好的設計? 是否有規則可循? 應該注意什麼?

一個很漂亮的網頁模板應用到不同案子往往呈現出不同的效果. 例如: 韓國網頁設計模版的顏色和圖形配置都很漂亮,但是要套用到我們的專案時總有不對勁的地方, 經常從上百個模版來來回回找不到一個合適的.可能我龜毛, 但這不是主要的原因. 原因是網站的主題不同, 區塊數量不同, 擺放位置也不同, 如果要置換掉圖片, 畫面整體色調和風格就差很多, 如果要新增或刪除某些資料區塊, 原來很平衡的版面配置和結構就破壞了, 所以最後還是選擇自己重新設計.

當然認為省時省力用的很高興的人也大有人在, 可能神經敏感度比較弱吧! 顏色亮一點暗一點, 位置左一點右一點, 字大一點小一點, 都是影響畫面的因素之一. 如果分辨不出這些細微差異也不用期待有什麼好作品產生. 從事設計的人得把"眼光"和"敏銳度"調高一點才有可能做出好作品, 才有進步的空間.

我是不喜歡讓規則綁死的人, 但是規則沒有原則應該有的, 可能一直依照某些原則做. 只是長年累月下來已經內化成為直覺, 如果要再外化成語言文字形容出來就需要仔細回想和整理. 這就好比回答穿衣服是先穿左手還是右手, 先穿左腳還是右腳一樣, 需要模擬一下才有答案是吧!

按照設計流程歸納出應該注意的幾點:

1. 清楚網站需求和規劃

好的設計除了自我的主觀認知外, 應該要符合客戶, 使用者和企劃的期待, 在操作介面, 使用功能, 資訊結構和視覺感受上都能滿足需求. 所以漂亮不是好的設計唯一追求的目標. 在開始設計時要清楚整個專案的需求和規劃的方向才好做整體思考, 並預留近期內(2~3年)可能新增資料的擴充性. 漏了其中一二項要再找空隙補進來都很容易破壞畫面, 需要重新調整版面. 時程掌控和團隊成員也很重要, 總是有機會遇到老在狀況外或傳遞錯誤訊息的天兵, 沒法殺了他就只能自立自強一點另外找人問清楚. 因為事情最後沒做好要再去責怪誰都無濟於事.

多數設計人員會本能的以視覺為優先考量, 一旦要求顧慮其他功能需求總會有顧此失彼的情況. 例如無障礙化或web標準化的要求下, 很多動態呈現效果必須放棄, 限制了畫面的可變化性. 當功能為必需時, 設計之前一定要先將這些因素考慮進來.

2. 區分網站型態和主題

以資訊為主的網站本身資料多, 設計時以能夠協助讀者區隔和辨識資料並流暢的引導閱讀內容為主要目的. 很忌諱加太多背景圖和琳琅滿目的icon, 造成畫面擁擠, 找不到喘息的空間. 企業網站的話, 視覺感受可以強一些, 表現希望傳達的印象和公司理念, 重點資訊應該擺在主推的產品介紹, 其他的是其次, 不需佔用太大面積. 而資料少的網站就要仰賴技巧性的留白, 色塊或者裝飾圖片撐版面, 避免看起來空洞. 但是資料太多也不是好事, George Miller有項心理學法則(1956年): "魔術數字7加減2" 指出人一次能處理或記憶的資訊數量大概只有7項, 多了也記不住, 反而模糊了焦點. 網站首頁設計也一樣, 只需把希望人家知道的重點依序強調出來就可以.

主題清楚的網站很好選擇插圖和背景, 例如介紹農產品的知識網站, 是鳳梨的就擺上鳳梨照片, 是水蜜桃就擺水蜜桃照片, 絲毫不含糊. 但是像範圍涵蓋台灣風土民情, 資訊科技, 生活體育, 衛生保健等主題廣泛的網站就很難只選擇其中一二項圖片作表現. 如果只放科技圖片會被誤以為是科普網站, 只放風景照片也容易被誤認為是旅遊景點介紹, 侷限了這個網站的主題. 如果要用合成方式縮小照片同時放很多張的, 又容易看不清楚照片內容, 造成圖片雜亂混合在一起不好看的情況. 所以經常有人為了要選哪一張主題圖片和客戶糾纏不清.

比較好的解決方式有三種: 一個是採用多張照片輪播(Flash或程式控制), 可一次清楚呈現多個主題; 一個是允許客戶自己依照當時的焦點內容更換主題圖片, 但是這一點必須視客戶的製圖能力而定, 避免讓他"上窮碧落下黃泉去找一張圖"的困擾(一位客戶就是這樣形容他的痛楚); 另一個是乾脆不要放主題圖片, 將網站的Logo和Title名稱修好看一點, 取代主題圖片成為視覺焦點. 很多所謂web2.0 的網站是這麼做的, 可以減少像這樣的爭議問題.

3. 構思網站版面和層級

了解需求和主題型態之後就依據資料結構做版面配置和風格設計. 先從重要性分配資料區塊的面積和位置, 再設定合適的風格繪製主題icon圖像. 基本的要求是文字排列要工整(注意中英文版文字表現的差異), 段落與邊界的距離留白適當, 色彩的選用搭配協調等. 以資訊網站來說, 做到這幾點就成功一半了. 不需要堅持一定得放多少圖片才對得起客戶. 和歐美的網站比較起來, 台灣的網站設計花俏繁複了點.

網頁一致性原則也很重要, 內容文字的連結應該統一一種顏色表示, 使用者才容易辨認出這是可點選的連結. 除了選單按鈕之外, 應該避免上面區塊的連結一種顏色, 下面區塊連結又一種顏色, 到另一個頁面又有各自不同的顏色. 標題也是, 相同層級的標題應該用相同的圖示或大小粗細相同的字級表示. 這觀念和書籍排版一樣, 每本書都有目錄, 對照目錄的層級在內頁看到的大標小標都有一致的樣式呈現, 才能辨認目前這段文字在整本書中屬於哪個層級. 但是很多網站設計沒有這種觀念, 每個頁面使用各自不同的標題設計.

4. 與客戶溝通

客戶的意見需要尊重, 但是發現有疑慮時應該提出來討論, 另找一個合適的解決方法. 設計師的專業就表現在可以預先知道可行和不可行的情況. 一味遵照客戶意見做容易有才改了一個問題又衍生另一個問題的情況, 拉長修改的時間. 但是要設計師像拼圖一樣拼湊出客戶腦袋中的想法是頗高難度的. 有一種客戶無法清楚描述想像中的畫面, 但是又很堅持一定要做出他要的樣子, 所以就藉用你的手不停的修改. 遇上這種客戶是設計師最無奈的事!

也有一種很害怕被貼標籤的人, 明明不喜歡藍色想改成綠色, 又不方便明說, 於是"指鹿為馬"改這改那的, 看你什麼時候可以猜到他要的顏色. 如果不識相的直接問喜歡什麼顏色? 只會得到"依照施政方針"這類模糊的答案. 有時候客戶說出來的不見得是他真正的想法, 設計師可能要像"決斷2秒間"這本書提到的: 做準確的"薄片擷取", 找出真正關鍵的點才能對症下藥. 所以做設計不是太難, 要面對這些難搞的客戶比較難.


上述整理的多半是實務上容易遇見需要注意的地方, 不著重在畫面的細節, 因為設計的基本功夫參考網頁設計或平面設計這類書籍就可以, 像之前介紹的幾本書都不錯, 不需要談相同的東西, 我也不會寫的比這些書好.

正常來說, 每一段時期應該有不同的想法出來, 表示有進步. 用"看山是山; 看山不是山"來比喻設計應該是很貼切的. 隨著認知了解程度的不同, 看法也會不同. 希望以後我還有另外不同的想法出來, 寫成思考之二, 之三... .