Archive for the 'UED' Category

[摘錄] web 2.0 設計指導之一：簡單

Published
by
cokeyko
on 2008-10-14
in Share and UED
. 5 Comments

wowbox blog (網頁設計知識庫)

2.0風格設計代表著聚焦、乾淨和簡單，但那並不代表著要極簡主義，我們應該用少量但必需的元素去達到我們的目標； 有個原則是我一直堅持的：假如解決某個問題有兩種方案，那麼更簡單的就是更好的。

為什麼簡單更好

1. 網站和每個頁面都有目標；
2. 用戶的注意點是有限的資源；
3. 幫助用戶找到他們想要的（或讓用戶注意我們希望他們看的內容）是設計師的職責；
4. 屏幕上的元素吸引眼球，元素越多，用戶去關注的各種不同的事情就越多，同時他去關注重要內容的幾率就下降了；
5. 所以我們需要很確定的交流方式，也需要把信息噪音減少到最少，那代表著我們要找到一個盡可能少用元素的解決方案，那就是節約元素即簡單。

何時/如何讓你的設計簡單

1. 何時 始終如此
2. 如何做 有兩個方面能讓你成功做到簡單—- 在不影響效果的情況下，去掉多餘的元素—- 能達到同樣效果的可行方案中，選擇更簡單的

看起來達到完美的結果，不是沒有東西可再添加，而是沒有任何東西可被去除的時候，每當你設計的時候，有意識的把去除多餘的視覺元素作為準則。

不要把注意力特別集中在和頁面目標相關性比較小的區域，因為用戶視線在關注這些時會分散在主要內容和導航的注意力。利用視覺細節如線條、文字、形狀和顏色去傳達信息，而不僅僅是為了裝飾。

並不反對網站設計的豐富、複雜或美感性

簡單的意思：無論採用什麼方式，只要是為了讓信息傳達更順利的元素是越多越好，當然，通常你要傳達的不是硬數據，而是軟數據；

硬數據：指事實，如新聞、股票價格、列車時間或你銀行賬戶的存款……

軟數據：涉及信息傳達的質量，如公司給人的第一印象，服務提供者是否親切，一種產品是否適合你……這些都是同樣重要的。

無論你要傳達的是硬數據還是軟數據，你都應該有意識並謹慎的使用元素數量。

原文網址：http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

[摘錄] 內容設計，初始內容

Published
by
cokeyko
on 2008-3-6
in UED
. 0 Comments

白鴉，以用戶為中心的設計

Content Design(內容設計)即涉及產品需求也涉及到(產品和用戶)互動過程中的具體環節。大多數團隊中只有PM才會涉及到相關工作，一般情況下不是基於用戶需求就是如何展現，很少涉及具體的互動環節也很少會有人整體上去綜合思考內容的設計。

事實上沒有什麼產品是「難用」的，只要用戶有了使用的需求興趣，基本上所有產品都會變得容易。但，也沒有任何產品是「好用」的，如果用戶沒有使用樂趣怎麼做都難用。

一切的根本在於需求和興趣，滿足用戶需求的是內容，引導用戶用戶興趣靠「初始內容」。

關於「初始內容」的設計，主要是指在用戶未正式使用（不只是「未登錄」，登錄了但沒有深入使用也算）前給他們展示什麼，讓他們可以(不可以)做什麼。其主要設計原則與用戶的認知積累、目的性有著非常直接的關係。

有些產品把「內容」做的很早讓用戶有了一定的認知。於是，他們可以讓用戶進來後直奔主題。

有些領域用戶進來就帶著強烈的需求，或者已經有了足夠的認知積累。於是，需要讓用戶進來後直奔主題，而無須設計過多的「初始內容」來干擾用戶。

在更多用戶沒有「認知積累」的時候，「未正式使用」之前整個產品只是一本又厚又難懂的「說明書」。很多用戶進入一個新網站時，會先「看看」然後「逛逛」，再後才是深入去用。

在「未正式使用」之前讓他看到什麼、逛什麼？ 直接影響新用戶的轉化率。如何讓用戶「有興趣」並「快速」讀懂，然後「產生使用的慾望和興趣」，是所有產品設計過程中都會遇到的問題。

受教了~

有興趣的話，建議回讀原文，寫得很詳細，也舉了一些網站當作範例。

[摘錄] 跟著用戶走到溝裡

Published
by
cokeyko
on 2008-3-5
in UED
. 0 Comments

白鴉，以用戶為中心的設計

交互設計大師、「Macintosh」之父 Jaf Raskin 曾說：好的設計不會讓使用者養成對今後工作不利的習慣，但設計人員卻經常有意無意地給用戶設下壞習慣的陷阱。事實上，良好的設計應該在給用戶帶來幫助的同時，把對其未來可能出現的限制性障礙降到最低， 保持使用者自由的可擴展性。這說的是交互設計。放在產品上亦然。

當浴缸裡只有一碗水的時候點一滴墨就會使整個浴缸變得骯髒，當浴缸裝滿以後偶爾一兩滴墨水根本無所謂，而且那個時候看著乾淨的一缸水也沒人「道德敗壞」的去滴墨進去。

這些很有技巧性的「引導」我們很難在國內的模仿者那裡看到，能有意識去做「限制」或者「刪除」的網站已經算是很不錯了…

確定方向是什麼、搞清楚什麼東西對用戶才有真正的價值，實在很難但也實在很重要。

「我們完全是根據用戶需求的演變而發展產品的，用戶需要什麼我們就滿足什麼」其實都是成功後騙人的鬼話。

雖然有人說顧客永遠是對的，但顧客卻不一定知道他要的是什麼。

CSS for FX, IE6, IE7

Published
by
cokeyko
on 2008-2-19
in CSS and Diary
. 5 Comments

話說，自己學習 CSS 搞頁面。原本大都搞定，但在某天看到這一篇報導：

【分享】盜版Windows也可升級微軟IE 7

為了推廣新版瀏覽器IE 7，微軟宣佈開放IE 7下載，而且不需經過Windows Genuine Advantage的正版視窗系統檢驗程序，也就是說盜版的用戶也可升級IE7。

哇哩咧...我在搞 CSS 時，只用 FX 和 IE6 來預覽，完全沒有理會 ie7 的存在。心想市場普遍不看好 IE7，多數用戶也無法升級（嘿~）。現在可好了，微軟大發慈悲讓所有 Windows 的使用者升級為 IE7，我不得不拿 IE7 來預覽我做的頁面。畢竟，我的專案還有一段時間才會上線，這段時間 IE7 必定會透過 Windows 的自動更新大肆攻佔使用者的電腦。

雖然，工程師跟我說 IE6 的問題很多，但我實在不想裝 IE7，況且我現在都用 FX 上網瀏覽，何必再去裝一個大而無當的瀏覽器？

上網搜尋了一下，發現有這麼一篇文章：

IE6之下獨立安裝IE7

照著步驟，我成功安裝了陽春版的 IE7。反正我也是要看頁面呈現而已，IE7 再怎麼強大，也不會比 FX 好用（我被洗腦了）。我開了 IE7 來瀏覽我的專案頁面，80% 的頁面還算正常，但是剩下 20% 的頁面慘不忍賭，心裡也直發毛...外行的我又要搞 CSS 了 =_=|||

一開始，邊改 CSS 邊用三種瀏覽器（FX, IE6, IE7）來預覽，修正一處是一處，但心裡總覺得很悶、很無奈。上網又找到這一篇文章：

CSS 於IE6、IE7、Firefox間的兼容hack

於是大家還可以這樣來區分IE6，IE7，firefox:

FF → background:orange;
IE7→ *background:green;
IE6→ _background:blue;

註：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

我照著這個奇技淫巧（hack）試了一下，靠~ 有用耶！於是把所有原本 for IE6 only 的 hack，都在上面多加一行 for IE7 only 的 hack，解決了絕大多數 IE7 會出搥的地方。

雖然，還是有一些地方，必須專門為了 IE7 做調整，但如果沒有上述的祕技，我想我可能會邊做邊哭，模樣很難看的。

邊做邊哭模擬照片

啊... IE8 別那麼快出來...

■ 延伸閱讀：

CSS 學習筆記

Published
by
cokeyko
on 2008-1-24
in CSS and Diary
. 0 Comments

今天，我終於把專案規劃的頁面全部從 png 轉成 html + css 了！

翻了翻我的 work log…

  • 我花了 10 天，把規劃的頁面內容，做成 html
  • 我花了 45 天，把規劃的頁面設計，做成 html + css

「天」是指時間歷程，而非工作天，無業 & 在家工作的我，有時會卯起來熬夜做，有時兩三天都不想做，有時帶蔡頭去採買民生物品，有時帶小小柯去買零食解饞。工事很忙、家事很茫...

原本在離職前，就有打算要花時間學學 css。離職後，會翻翻之前買來的 css 教學書，內容都看得懂，但要怎麼做，似乎有些模糊，也不知道怎麼上手。

自己想搞的案子，因為找不到合適的 Web Developer 來支援，索性自己打鴨子上架，硬著頭皮開始邊學邊寫 css。就這樣，還是搞不懂網頁開發及理論基礎的我，頁面被我兜出來了，學了一些皮毛、多了一些經驗，心裡也有一些感觸...

ui
取自 Nate Koechley 的投影片 (英文)

■ 語意化的 HTML

說到網頁設計，以前就只會用 Dreamweaver 來 table 包 table。聽過一些 SEO、語意化網頁內容的演講，但還是不明瞭「做一個有語義的 html 頁面」是多麼重要。

約莫在一年多前，我和同事發現不論在 google 或 yahoo 搜尋資料，香港的知識+ 幾乎都會排在台灣的知識+ 前面。

「明明是香港移植台灣的相同平台，為什麼他們會排在前面？」我寫了信請教香港知識+ 的製作人，他回信說明他們做了一些 SEO 優化，我這才明瞭，一個有語意化的 HTML 頁面，在網路搜尋的時代，是如此的重要。

誤打誤撞買了一本「超越式 CSS」，原以為它是教怎麼寫 css 的，衝著博客來 66 折的機會，將它買回家之後，才發現並非我所想的那樣。

不過，我反而從這本書的前兩章學到頁面結構的基本觀念，以及如何編寫一個具有語意基礎的 (X)HTML 頁面。

■ YUI CSS 的基礎

去年的11月，搭捷運來到 T 工程師位在汐止的家，因為 J 工程師要講解如何使用 YUI 來做 css 頁面。

[摘錄] 認識 YUI @ 小正正教室

YUI 是 Yahoo! User Interface 的縮寫，這是由 Yahoo! 所開發出來的工具庫，包含了多種程式工具、函數庫和網頁操作介面，能夠更快速的開發互動性高、豐富的網站應用程式，尤其是那些使用到 DOM、DHTML 和 Ajax 的網頁。YUI 全部都是使用 Javascript 寫出來的（其中也包含了一些 CSS ），而且是公開給大家免費使用的 Open Source 軟體。

YUI 這個「東西」，我常從工程師那邊聽到，但專搞服務製作的我，就是不知道它能做什麼。J 工程師細心的講解，還出了一個習題實做。咦~ 版面那麼簡單就可以搞定了哦？真是神奇~

原來，藉由 YUI 的 CSS 工具，可以輕易的建構一個頁面的版面框架及元素，讓開發工作可以更得心應手、操控自如。

■ 用 CSS 規劃版面

上完課之後的某一天，我拿出當時抄寫的筆記，開啟 ppt 投影片，準備開始規劃第一個頁面。看著看著，有一些困惑的地方，線上跟 T 工程師請教，他聽完我的問題後，發現我似乎走錯了路。

走錯路？不會吧...我這是遵照 J 工程師教我的啊！

他丟了一個網址給我，然後要我照著版面需求去設定。下拉選來選去，按個鈕，哇~ 自動產生 YUI 的版面框架的原始碼，這...太神奇了吧？

原來，他從我的問題中，得知我照著 YUI CSS 所定義的規格在做版面，但這樣做實在太苦了，也...太蠢了。他說 J 工程師教的是 YUI CSS 的基礎，只要大略搞懂就行了，至於實際應用，就直接使用 YUI 所提供的 CSS Grid Builder，輕鬆簡單搞定！

■ 編寫 CSS 的工具

寫 CSS 就好像在寫程式碼一樣，沒看到結果的呈現，無法知道寫得是對是錯。好久前就知道 TopStyle 是一套用來編寫 CSS 的好工具，但玩沒兩下，覺得沒趣，就解除安裝。

這回，我又將 TopStyle 安裝起來，努力去搞懂裡面每個表單/功能，再將我先前做的 html 頁面讀入預覽視窗，再套上目前編寫的 css ，哦~ 我會用了。

TopStyle 的優點，主要在於一邊寫 css 碼，同時可以看頁面呈現的效果，另外就是 css 碼的自動提示功能，打了一個字母，下方就會出現這個字母起頭的屬性；在屬性之後，則會自動顯示跟這個屬性相關的設定值。對我這種初學者來說，是非常有幫助的一個利器。

而它的最大缺點，就在於對 UTF-8 的支援，轉成 UTF-8 的 html 檔案讀入，中文都變一堆亂碼。而且，一截字就變成半型的亂碼，非常頭痛。

於是，我變成雙槍俠，用 TopStyle 寫 CSS，用 EditPlus 寫 HTML。

■ 建立 CSS 套用的規則/模組

我不知道該用什麼正確的名詞來描述這個經驗...

在寫完第一頁之後，我得意洋洋，但寫到第四頁之後，我已經眼茫茫又心慌慌了。眼茫茫是因為我要死盯著螢幕一遍又一遍調整頁面元素的位置。心慌慌是因為我發現我的 CSS 碼愈寫愈亂，只求當下頁面的呈現，但沒有留意要去建立 CSS 套用的規則/模組。

如果我沒有建立起 CSS 套用的規則及模組來用，那接下來的十多個頁面，我必須為每個相同 or 類似的區塊，重複撰寫完全相同/大同小異的 CSS 碼。一來，浪費時間，二來，CSS 將會變得又大又肥。

接下來的兩天，我打掉原先寫好的 CSS 碼，開始試著建立 CSS 套用的規則/模組。當下寫得很幹，但我知道這可以讓後續工作更有效率。

由於能力不佳，經驗也不足，之後每寫了一個階段，我就得重新審視這個階段的 CSS，甚至做到最後幾個頁面，還把先前的 html / css 叫出來重改。我並不是在追求完美，而是我知道如果沒有趁這個機會累積一些經驗，以後可能沒機會了，也可能用壞習慣亂做一通。

任何事情，淺嚐是有趣的，一直吃是會想吐的。做漫畫是如此、做網站是如此，寫 CSS 也是如此。

■ 非結論

說結論還太早，畢竟我只是沾到 CSS 的皮毛而已。

學習 CSS 這樣來回走一遭，我覺得初學還算簡單，但進階就有難度了，尤其要做好一整個網站的 CSS 樣式，並不是一件簡單的事。還要加上跨平台/跨瀏覽器的支援，一些奇技淫巧的效果呈現，怎麼學都學不完。

Web Developer (WD) 這個工作真的不是普通人做得來的，除了 CSS，還要會 Javascript, AJAX…etc。啊~ 曾經被我荼毒過的 WD 同事們，在此向您們說聲：「您們真偉大，辛苦了！」

最後，謝謝 T & J 兩位工程師的耐心指導~

接下來，要開始切 HTML 頁面囉！

■ 相關閱讀