用理性說話

想像一下這樣的場景：你參與了一個新產品的網頁設計，並提交了一系列的視覺設計方案。在評審會上，每個人的眼光都轉向坐在房間另一頭的某位領導，“我不喜歡橙色。”這位領導突然抬起頭來說，於是整個評審會突然就亂了章法，過了一會兒，你痛苦地發現大家正在熱烈討論的，居然是“介面中的方塊太死板了，能不能用圓形代替?”這類本不應該討論的問題。 　　如果你就是這樣的一個視覺設計師，你一定也有過類似的痛苦經歷。但是為什麼一群看起來頭腦清楚的成年人總是無法在視覺評審會上保持同樣的理性呢？答案很簡單，由於缺乏對視覺方案產生的前因後果的瞭解，大部分與會者只能憑著自己的主觀直覺而不是客觀分析來評估它們。 　　為什麼這個過程中存在這樣的主觀性呢?視覺傳達，是一門很微妙的語言，甚至超過了網站建設文字語言。即使在最簡單的應用中也存在著語氣和風格的豐富變化。就像有句話說的，一幅畫勝過千言萬語，而這正是問題的起源。千言萬語──尤其當它們都是不對的時候──就有可能造成一場災難。 　　視覺設計過程基本上由一系列決定構成，這些決定最後產生了一個策略，然後再由此定義出一個視覺系統，這個視覺系統通過提升細節和清晰的程度來最大化地滿足這個策略。依賴主觀判斷來做出這些設計決定是災難性的，同時也會導致這個被團隊集體通過的設計方案難以得到用戶的認同。 　　用研究和人物角色來強化視覺設計過程 　　正確的設計流程，能使你將主觀性和猜測的網頁寄存影響降到最小。客觀代替主觀的第一步是從“研究”開始的。這通常由交互設計師主導一些研究，從用戶行為方面來瞭解商業和用戶的目標，視覺設計師可能不會被邀請去參加與相關人員的談話和研究用戶的課題。可無論如何，視覺設計師都適當地參與這些研究，將有助於成功地用這些知識來武裝自己。 　　與相關人員的溝通 　　作為視覺設計師，你在專案會議期間的主要任務是理解公司的傳播目標、品牌策略，以及在整個競爭環境中的地位。同時，理解關鍵決策人對於這種產品的審美期望也是很必要的。最後，你還需要知道哪些成員將要參加你的視覺評審會。 　　理解公司目標和品牌策略，可以從市場或品牌傳達部門去瞭解公司的網頁設計模板歷史和現狀。你同時也需要去發掘公司的未來的目標和它在行業中應該得到的位置，這將為你提供一個設計視覺系統的主體方向。 　　閱讀品牌指南、風格指南和近期的市場行銷資料，對於建立一個更綜合的市場目標和公司立場的概念是非常有用的(記住要弄清楚這些指南是否是最新和最相關的，因為你拿到手的很可能是一份過期，或是與現在的情況不一致的文檔)。 　　與相關人員多溝通，比如產品或市場經理，去理解他們的觀點、瞭解能幫助你成功地搭建起項目框架的網上商店因素。另一件需要做的事情是去理庥Ω貿氏指沒У慕緱嬤凶釵丶氖泳醺拍瞟ぉび繞涫欽飫銼籆ooper稱為experience keywords(本文後面會提到)的概念。在這個期間，你的目標是從各個相關部門收集關鍵字，以幫助你確定設計模式。 　　下面是你可以提出的一些問題： 　　如果這個介面是一個人的話，他或她看上去是什麼樣的? 　　當用戶第一次看到這個CMS產品時，你希望他有什麼樣的反應? 　　這個產品和競爭對手的產品有什麼不同? 　　這個產品和哪個著名人物(或汽車、電影等等)最相像?最不像?為什麼? 　　這些問題應該在溝通時及時提出，並鼓勵你的談話物件從情感方面講述她對這個產品的一些觀點。在探討這些問題之前記得觀察對方的反應，因為大部分人可能不太感興趣，或者缺乏恰當辭彙去描述這些觀點。比如，如果一個負責架構設計的人只對資料庫系統和產品的技術結構感興趣的話，你去問他這個介面應該長成什麼樣就純屬浪費時間。 　　不久前，我們設計了一個醫用設備，這個設備能幫助老年病人在自己的家中監測自己的健康狀況。我們從相關人員處獲悉，如果它和上門服務的護士有相似的特徵時，用戶更容易接受這個產品。於是我們根據瞭解到的知識，把這個設備的語氣和風格設計成一種體貼、有責任心和可信任的感覺。 　　與相關人員溝通的最後一件事是確定團隊中的哪個成員將參加電子商務視覺評審會。詢問團隊負責人將安排哪些人去參加這些會議。太多的人參加會議將很難管理(我們建議6個人或更少)。最好是幾個關鍵的成員參加，比如專案經理和產品經理，以及來自市場或品牌團隊的員工。如果有一位與用戶有過密切接觸的代表，比如一名銷售或培訓師來參加評審會則會更好。你應該邀請一位來自開發團隊的員工，作為技術代表來評估這些設計方案的技術可行性。記住讓團隊的其餘成員保持資訊的同步。 　　研究用戶 　　用戶訪談提供了一次驗證團隊成員假設的機會，通過用戶訪談你還可以瞭解更多關於用戶和公司以及其產品之間的情感上的聯繫。另外，訪談也提供了一個造訪用戶所處環境的機會，可以直接瞭解當用戶在和你的產品進行交互時，有可能遇到的挑戰。這是一次非常有價值的Web 3.0實踐，照片或任何第二手資料都無法代替。眼見為實。 　　交互設計師和視覺設計師在用戶研究階段所尋找的是不同的模式，理解這一點是非常重要的。舉例來說，交互設計師想找出的是工作流程、心智模型、任務的優先順序別和頻率、障礙點等等，而這時候，視覺設計師應該尋找以下模式： 　　用戶特徵(比如，身體缺陷，尤其是視力); 　　 環境因素(燈光、用戶和介面之間的距離、顯示器上的保護膜); 　　品牌中有可能引起用戶共鳴的因素; 　　用戶對體驗的期望。 　　將影響你的設計的兩個最常見的網站排名用戶特徵，是視覺和身體上的缺陷。比如，供糖尿病人(通常也有一些視力上的問題)使用的血糖儀，常常出現文字的尺寸太小、圖示不夠清晰等設計，這使得病人飽受其苦。如果你曾經看到一個老年用戶在努力辨認網頁上12個圖元的Verdana文字的話，那麼他很容易就會忽略在書本上出現的7個圖元的文字。而針對行動困難的人士的產品，他們的身體缺陷對設計的影響就更大了，因為這意味著他們的產品上的按鈕需要更大的距離和尺寸。 　　當設計用戶介面時，用戶的應用環境也是考慮因素之一。照明環境或產品的位置，都可能對介面的設計方案有著戲劇性的影響，尤其是尺寸和對比度。在一個外科手術室中，我們發現顯示器離用戶有六英尺遠，同時還覆蓋了一層塑膠布。很明顯我們需要設計一個字體很大對比度很高的介面。相反地，另一些介面，比如手機，是那種既可能在戶內也可能在戶外使用的設備，則需要一種在完全不同的照明環境中都可用的靈活設計。 　　通過一些人體測量學的資料的幫助(比如The Measure of Man and Woman: Human Factors in Design by Alvin R. Tilley, Henry Dreyfuss Associates)，你可體驗到獨特的用戶和環境因素，這有助於設計出一個適用於不同身材的Flash製作產品。 　　就之前提到的家用醫學設備而言，我們造訪了一些用戶的家庭，並做了訪談。我們發現病人的年紀一般都比較大，同時大部分都在客廳都放了一把舒服的椅子，它緊挨著用來放置類似設備的桌子。用戶的身體都不太好，同時還有視力和聽力的問題。他們通常把設備放在一伸胳膊就能夠著的地方。我們的設計方案把這些環境因素都納入了考慮之中，包括足夠大和高對比度文字的視覺風格，以及可選擇的聲音提示。 　　除了理解用戶和環境因素之外，花一些時間去討論品牌和個性是很重要的。你應該詢問用戶，關於他們與你的公司或競爭對手的過往經歷(如果你能分享這些資訊的話)，這樣你可以評估這些資訊和團隊中的假設是否一致。你可以詢問用戶類似這樣的問題： 　　X公司與其他同類型的公司有什麼不同? 　　 你為什麼覺得這個產品或公司很特殊? 　　你希望X公司有什麼不同? 　　你也應該花一些時間理解介面應該具有的個性。在The Media Equation，Byron Reeves和Clifford Nass寫了一篇文章，提出一個觀點：“人們實際上是像對待真正的人類一樣對待電腦的，所以需要用人類的個性特徵來考慮電腦的回答。”就像與同事的溝通一樣，你可以問用戶一些類似這樣的問題： 　　如果介面是一個人的話，它會像是什麼樣的人? 　　 你會如何向朋友描述這個產品? 　　這個產品與競爭對手的產品有什麼不一樣? 　　再次強調，這些問題本身並不能提供給你所有的搜索引擎排名答案，但是它們使你能夠得到一個與用戶有關的、關於視覺設計方面的綜合結論。不要僅僅問：“什麼樣的視覺方案更好一點?”因為與你的同事相比，用戶更難用有效的辭彙來描述他們在外觀上的想法。相反地，你可以提供一些例子作為引導，比如：“如果我的電話是一個人的話，我希望它是有禮貌、聰明和友好的。”與用戶進行視覺設計和品牌的交談可能有一定的挑戰性，但是它能提高你的視覺方案的成功率，因為你更多的是基於與用戶有關的故事來設計，而更少依賴於專案中某些專家的意見。 　　以那個家用醫學監視器的例子來講，我們詢問了病人關於“一個好護士應該是怎樣的?”問題，並收集到一些像這樣的特徵：幽默、關注、善於聆聽、落落大方、親切、能幹、自信、可靠，以及樂觀等等。這些辭彙在稍後的視覺設計流程中將用於建立設計策略。 　　形成視覺策略 　　一旦你完成了上面這些研究工作，你就可以分析這些結果並確定模式了。在這裏，你將得到關於用戶的資訊、他們的環境、潛在的experience keywords以及品牌需求等。 　　首先，將你從研究中得到的結論應用到人物角色上，以確定所有情感或行為上的模式。交互設計師會專注于特定的人物角色的目標、背景和觀點，而視覺設計師則應該注重於情感化，以及用戶和環境的因素等方面。 　　在最近的一個“富消息應用”的專案中，我們基於用戶研究創建了一個人物角色，她對於不認識的人發送的郵件具有很強的警惕性，因為她聽說過很多關於電腦病毒的報導。這種情緒會直接影響到介面的設計，因為為了滿足這類人物角色對於“安全感”的需求，介面必須在web site design第一眼就讓人感覺專業和可信任。 　　Experience keywords(體驗關鍵字) 　　當人物角色被創建出來以後，列出從相關設計人員和用戶訪談中得到的所有描述性的辭彙或概念，並將其分組。這些辭彙組合正是形成一套“體驗關鍵字”的基礎，將用於確定和管理視覺策略。 　　這些在研究期間收集的辭彙幫助我們確定了“體驗關鍵字”的核心，我們可以用來驅動整體的視覺策略。我們通常把這些辭彙列表統一成3個或5個概念組合，然後最終發展成一套“體驗關鍵字”。 　　“體驗關鍵字”描述的是這個人物角色在看到介面時，“最初五秒鐘”的情感反應。考慮這種最初反應有兩個好處。首先，通過提供一種積極的第一印象和持續的情感體驗，它可以強化公司的品牌。其次，對於用戶是否接受這個產品和忍受某些不足，它具有重大的意義。研究表明，具有美感的設計被認為比很少有美感的設計更有用(這被稱為美感可用性效應)。同時，當人們喜歡使用它們的時候，介面就會變成更可用(見Donald Norman在《Attractive Things Work Better》中的報告;或更好的方式，聽聽關於新上市的iPhone的新聞)。 　　保證這些“體驗關鍵字”同樣也適用於你的團隊和一些關鍵成員。可信任和從視覺上描述的關鍵字有助於推動視覺策略的討論。選擇你將用於描述某個人的“體驗關鍵字”;這樣的方式能讓你的觀眾容易接受。你最終確定的那套“體驗關鍵字”看上去應該像下面這個圖： 　　在上面這個例子中，有四個體驗關鍵字：體貼、謙虛、有責任心和善於引導。其他的關鍵字都是在闡述它們的含義。用圖片或其他形象的支援方式也同樣有效。 　　一旦團隊達成共識，體驗關鍵字將為視覺設計指出一個明確的方向。“體貼”直接反映在介面上可能就成為柔和的色彩和形狀，而“善於引導”則描述了一個對比度更強和線條更明確的介面。 　　現在你擁有了客觀武器：人物角色、體驗關鍵字、品牌需求等標準，網頁設計公司這也意味著你得到了一個用於決定視覺設計的堅實基礎。你現在可以提供一個更加深思熟慮的視覺設計方案了，它能得到更切合實際的回饋。現在，當產品經理抱怨橙色的時候，你就可以提醒他這個設計是基於某個人物角色的最佳體驗關鍵字做出的，而這些關鍵字早就得到了大家的首肯，從而讓他遠離自己的主觀臆斷。 　　另外，擁有相關成員和用戶訪談中的上下文資訊，將有助於你更集中、更適宜地針對那些將使用你的產品的人確定最初的設計概念。

用理性說話

想像一下這樣的場景：你參與了一個新產品的網頁設計，並提交了一系列的視覺設計方案。在評審會上，每個人的眼光都轉向坐在房間另一頭的某位領導，“我不喜歡橙色。”這位領導突然抬起頭來說，於是整個評審會突然就亂了章法，過了一會兒，你痛苦地發現大家正在熱烈討論的，居然是“介面中的方塊太死板了，能不能用圓形代替?”這類本不應該討論的問題。 　　如果你就是這樣的一個視覺設計師，你一定也有過類似的痛苦經歷。但是為什麼一群看起來頭腦清楚的成年人總是無法在視覺評審會上保持同樣的理性呢？答案很簡單，由於缺乏對視覺方案產生的前因後果的瞭解，大部分與會者只能憑著自己的主觀直覺而不是客觀分析來評估它們。 　　為什麼這個過程中存在這樣的主觀性呢?視覺傳達，是一門很微妙的語言，甚至超過了網站建設文字語言。即使在最簡單的應用中也存在著語氣和風格的豐富變化。就像有句話說的，一幅畫勝過千言萬語，而這正是問題的起源。千言萬語──尤其當它們都是不對的時候──就有可能造成一場災難。 　　視覺設計過程基本上由一系列決定構成，這些決定最後產生了一個策略，然後再由此定義出一個視覺系統，這個視覺系統通過提升細節和清晰的程度來最大化地滿足這個策略。依賴主觀判斷來做出這些設計決定是災難性的，同時也會導致這個被團隊集體通過的設計方案難以得到用戶的認同。 　　用研究和人物角色來強化視覺設計過程 　　正確的設計流程，能使你將主觀性和猜測的網頁寄存影響降到最小。客觀代替主觀的第一步是從“研究”開始的。這通常由交互設計師主導一些研究，從用戶行為方面來瞭解商業和用戶的目標，視覺設計師可能不會被邀請去參加與相關人員的談話和研究用戶的課題。可無論如何，視覺設計師都適當地參與這些研究，將有助於成功地用這些知識來武裝自己。 　　與相關人員的溝通 　　作為視覺設計師，你在專案會議期間的主要任務是理解公司的傳播目標、品牌策略，以及在整個競爭環境中的地位。同時，理解關鍵決策人對於這種產品的審美期望也是很必要的。最後，你還需要知道哪些成員將要參加你的視覺評審會。 　　理解公司目標和品牌策略，可以從市場或品牌傳達部門去瞭解公司的網頁設計模板歷史和現狀。你同時也需要去發掘公司的未來的目標和它在行業中應該得到的位置，這將為你提供一個設計視覺系統的主體方向。 　　閱讀品牌指南、風格指南和近期的市場行銷資料，對於建立一個更綜合的市場目標和公司立場的概念是非常有用的(記住要弄清楚這些指南是否是最新和最相關的，因為你拿到手的很可能是一份過期，或是與現在的情況不一致的文檔)。 　　與相關人員多溝通，比如產品或市場經理，去理解他們的觀點、瞭解能幫助你成功地搭建起項目框架的網上商店因素。另一件需要做的事情是去理庥Ω貿氏指沒У慕緱嬤凶釵丶氖泳醺拍瞟ぉび繞涫欽飫銼籆ooper稱為experience keywords(本文後面會提到)的概念。在這個期間，你的目標是從各個相關部門收集關鍵字，以幫助你確定設計模式。 　　下面是你可以提出的一些問題： 　　如果這個介面是一個人的話，他或她看上去是什麼樣的? 　　當用戶第一次看到這個CMS產品時，你希望他有什麼樣的反應? 　　這個產品和競爭對手的產品有什麼不同? 　　這個產品和哪個著名人物(或汽車、電影等等)最相像?最不像?為什麼? 　　這些問題應該在溝通時及時提出，並鼓勵你的談話物件從情感方面講述她對這個產品的一些觀點。在探討這些問題之前記得觀察對方的反應，因為大部分人可能不太感興趣，或者缺乏恰當辭彙去描述這些觀點。比如，如果一個負責架構設計的人只對資料庫系統和產品的技術結構感興趣的話，你去問他這個介面應該長成什麼樣就純屬浪費時間。 　　不久前，我們設計了一個醫用設備，這個設備能幫助老年病人在自己的家中監測自己的健康狀況。我們從相關人員處獲悉，如果它和上門服務的護士有相似的特徵時，用戶更容易接受這個產品。於是我們根據瞭解到的知識，把這個設備的語氣和風格設計成一種體貼、有責任心和可信任的感覺。 　　與相關人員溝通的最後一件事是確定團隊中的哪個成員將參加電子商務視覺評審會。詢問團隊負責人將安排哪些人去參加這些會議。太多的人參加會議將很難管理(我們建議6個人或更少)。最好是幾個關鍵的成員參加，比如專案經理和產品經理，以及來自市場或品牌團隊的員工。如果有一位與用戶有過密切接觸的代表，比如一名銷售或培訓師來參加評審會則會更好。你應該邀請一位來自開發團隊的員工，作為技術代表來評估這些設計方案的技術可行性。記住讓團隊的其餘成員保持資訊的同步。 　　研究用戶 　　用戶訪談提供了一次驗證團隊成員假設的機會，通過用戶訪談你還可以瞭解更多關於用戶和公司以及其產品之間的情感上的聯繫。另外，訪談也提供了一個造訪用戶所處環境的機會，可以直接瞭解當用戶在和你的產品進行交互時，有可能遇到的挑戰。這是一次非常有價值的Web 3.0實踐，照片或任何第二手資料都無法代替。眼見為實。 　　交互設計師和視覺設計師在用戶研究階段所尋找的是不同的模式，理解這一點是非常重要的。舉例來說，交互設計師想找出的是工作流程、心智模型、任務的優先順序別和頻率、障礙點等等，而這時候，視覺設計師應該尋找以下模式： 　　用戶特徵(比如，身體缺陷，尤其是視力); 　　 環境因素(燈光、用戶和介面之間的距離、顯示器上的保護膜); 　　品牌中有可能引起用戶共鳴的因素; 　　用戶對體驗的期望。 　　將影響你的設計的兩個最常見的網站排名用戶特徵，是視覺和身體上的缺陷。比如，供糖尿病人(通常也有一些視力上的問題)使用的血糖儀，常常出現文字的尺寸太小、圖示不夠清晰等設計，這使得病人飽受其苦。如果你曾經看到一個老年用戶在努力辨認網頁上12個圖元的Verdana文字的話，那麼他很容易就會忽略在書本上出現的7個圖元的文字。而針對行動困難的人士的產品，他們的身體缺陷對設計的影響就更大了，因為這意味著他們的產品上的按鈕需要更大的距離和尺寸。 　　當設計用戶介面時，用戶的應用環境也是考慮因素之一。照明環境或產品的位置，都可能對介面的設計方案有著戲劇性的影響，尤其是尺寸和對比度。在一個外科手術室中，我們發現顯示器離用戶有六英尺遠，同時還覆蓋了一層塑膠布。很明顯我們需要設計一個字體很大對比度很高的介面。相反地，另一些介面，比如手機，是那種既可能在戶內也可能在戶外使用的設備，則需要一種在完全不同的照明環境中都可用的靈活設計。 　　通過一些人體測量學的資料的幫助(比如The Measure of Man and Woman: Human Factors in Design by Alvin R. Tilley, Henry Dreyfuss Associates)，你可體驗到獨特的用戶和環境因素，這有助於設計出一個適用於不同身材的Flash製作產品。 　　就之前提到的家用醫學設備而言，我們造訪了一些用戶的家庭，並做了訪談。我們發現病人的年紀一般都比較大，同時大部分都在客廳都放了一把舒服的椅子，它緊挨著用來放置類似設備的桌子。用戶的身體都不太好，同時還有視力和聽力的問題。他們通常把設備放在一伸胳膊就能夠著的地方。我們的設計方案把這些環境因素都納入了考慮之中，包括足夠大和高對比度文字的視覺風格，以及可選擇的聲音提示。 　　除了理解用戶和環境因素之外，花一些時間去討論品牌和個性是很重要的。你應該詢問用戶，關於他們與你的公司或競爭對手的過往經歷(如果你能分享這些資訊的話)，這樣你可以評估這些資訊和團隊中的假設是否一致。你可以詢問用戶類似這樣的問題： 　　X公司與其他同類型的公司有什麼不同? 　　 你為什麼覺得這個產品或公司很特殊? 　　你希望X公司有什麼不同? 　　你也應該花一些時間理解介面應該具有的個性。在The Media Equation，Byron Reeves和Clifford Nass寫了一篇文章，提出一個觀點：“人們實際上是像對待真正的人類一樣對待電腦的，所以需要用人類的個性特徵來考慮電腦的回答。”就像與同事的溝通一樣，你可以問用戶一些類似這樣的問題： 　　如果介面是一個人的話，它會像是什麼樣的人? 　　 你會如何向朋友描述這個產品? 　　這個產品與競爭對手的產品有什麼不一樣? 　　再次強調，這些問題本身並不能提供給你所有的搜索引擎排名答案，但是它們使你能夠得到一個與用戶有關的、關於視覺設計方面的綜合結論。不要僅僅問：“什麼樣的視覺方案更好一點?”因為與你的同事相比，用戶更難用有效的辭彙來描述他們在外觀上的想法。相反地，你可以提供一些例子作為引導，比如：“如果我的電話是一個人的話，我希望它是有禮貌、聰明和友好的。”與用戶進行視覺設計和品牌的交談可能有一定的挑戰性，但是它能提高你的視覺方案的成功率，因為你更多的是基於與用戶有關的故事來設計，而更少依賴於專案中某些專家的意見。 　　以那個家用醫學監視器的例子來講，我們詢問了病人關於“一個好護士應該是怎樣的?”問題，並收集到一些像這樣的特徵：幽默、關注、善於聆聽、落落大方、親切、能幹、自信、可靠，以及樂觀等等。這些辭彙在稍後的視覺設計流程中將用於建立設計策略。 　　形成視覺策略 　　一旦你完成了上面這些研究工作，你就可以分析這些結果並確定模式了。在這裏，你將得到關於用戶的資訊、他們的環境、潛在的experience keywords以及品牌需求等。 　　首先，將你從研究中得到的結論應用到人物角色上，以確定所有情感或行為上的模式。交互設計師會專注于特定的人物角色的目標、背景和觀點，而視覺設計師則應該注重於情感化，以及用戶和環境的因素等方面。 　　在最近的一個“富消息應用”的專案中，我們基於用戶研究創建了一個人物角色，她對於不認識的人發送的郵件具有很強的警惕性，因為她聽說過很多關於電腦病毒的報導。這種情緒會直接影響到介面的設計，因為為了滿足這類人物角色對於“安全感”的需求，介面必須在web site design第一眼就讓人感覺專業和可信任。 　　Experience keywords(體驗關鍵字) 　　當人物角色被創建出來以後，列出從相關設計人員和用戶訪談中得到的所有描述性的辭彙或概念，並將其分組。這些辭彙組合正是形成一套“體驗關鍵字”的基礎，將用於確定和管理視覺策略。 　　這些在研究期間收集的辭彙幫助我們確定了“體驗關鍵字”的核心，我們可以用來驅動整體的視覺策略。我們通常把這些辭彙列表統一成3個或5個概念組合，然後最終發展成一套“體驗關鍵字”。 　　“體驗關鍵字”描述的是這個人物角色在看到介面時，“最初五秒鐘”的情感反應。考慮這種最初反應有兩個好處。首先，通過提供一種積極的第一印象和持續的情感體驗，它可以強化公司的品牌。其次，對於用戶是否接受這個產品和忍受某些不足，它具有重大的意義。研究表明，具有美感的設計被認為比很少有美感的設計更有用(這被稱為美感可用性效應)。同時，當人們喜歡使用它們的時候，介面就會變成更可用(見Donald Norman在《Attractive Things Work Better》中的報告;或更好的方式，聽聽關於新上市的iPhone的新聞)。 　　保證這些“體驗關鍵字”同樣也適用於你的團隊和一些關鍵成員。可信任和從視覺上描述的關鍵字有助於推動視覺策略的討論。選擇你將用於描述某個人的“體驗關鍵字”;這樣的方式能讓你的觀眾容易接受。你最終確定的那套“體驗關鍵字”看上去應該像下面這個圖： 　　在上面這個例子中，有四個體驗關鍵字：體貼、謙虛、有責任心和善於引導。其他的關鍵字都是在闡述它們的含義。用圖片或其他形象的支援方式也同樣有效。 　　一旦團隊達成共識，體驗關鍵字將為視覺設計指出一個明確的方向。“體貼”直接反映在介面上可能就成為柔和的色彩和形狀，而“善於引導”則描述了一個對比度更強和線條更明確的介面。 　　現在你擁有了客觀武器：人物角色、體驗關鍵字、品牌需求等標準，網頁設計公司這也意味著你得到了一個用於決定視覺設計的堅實基礎。你現在可以提供一個更加深思熟慮的視覺設計方案了，它能得到更切合實際的回饋。現在，當產品經理抱怨橙色的時候，你就可以提醒他這個設計是基於某個人物角色的最佳體驗關鍵字做出的，而這些關鍵字早就得到了大家的首肯，從而讓他遠離自己的主觀臆斷。 　　另外，擁有相關成員和用戶訪談中的上下文資訊，將有助於你更集中、更適宜地針對那些將使用你的產品的人確定最初的設計概念。

網頁設計中超鏈結的下劃線

於Web Design超鏈結中的下劃線這個及細節的問題，想必大家都有過討論和思考，最重要的原則即：讓使用者清楚的區分超鏈結文本和其他文本形式，並潛意識知道可以點擊。但對於是否可以潛意識知道可以點擊，還是有爭議的，不同的人，不同的環境會有不同的見解。 　　不妨分幾個場景討論一下： 　　1. 導航區域，潛意識網頁寄存我會去點擊。 　　即便有下劃線也是個“古老形式”的擺設，所以一般沒有下劃線；好的設計不僅滿足點擊，還滿足視覺的層級關係。 　　2. 整頁全是鏈結，下劃線成了可有可無的網頁建設表現。 　　象新浪、搜狐首頁都是可以點擊的，所以下劃線的有無意義也就不大，貓撲在首頁設計中就去掉了可有可無的下劃線。（下圖自上而下依次為：新浪、搜狐、貓撲。） 　　3. 可以點擊嗎？別讓我去猜！ 　　看下面的設計抓圖，只有Google和百度的設計我沒有疑惑，其他兩個CMS的設計我要自己去猜。 　　4. 在超鏈結和文本混排的情況下，下劃線更容易讓我們去點擊。 　　5. 獨立超鏈結，不加下劃線不足以“明示”。 　　6. 需要特別突出顯示的鏈結，必要的時候網頁設計公司使用“偽按鈕”。 　　關於偽按鈕的問題，臭魚在其接受偽按鈕已闡述的比較明確，在此不再贅述。 　　說明：大家根據具體的環境而定，目的是讓超鏈結更容易被潛意識的點擊，避免過多的嘗試和思考而浪費流覽者更多的時間。 　　附：超鏈結的作用 　　 囉嗦一下基本概念，所謂的超鏈結是指從一個網頁指向一個目標的連接關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件位址，一個檔，甚至是一個應用程式。而在一個網頁中用來超鏈結的物件，可以是一段文本或者是一個網站排名圖片。當流覽者單擊已經鏈結的文字或圖片後,鏈結目標將顯示在流覽器上，並且根據目標的類型來打開或運行。 　　超鏈結的基本分類： 　　按照鏈結路徑的不同,網頁中超鏈結一般分為以下3種類型: 內部鏈結,錨點鏈結和外部鏈結。 　　如果按照使用物件的不同，網頁中的鏈結又可以分為：文本超鏈結，圖像超鏈結，E-mail鏈結，錨點鏈結，多媒體檔鏈結，空鏈結等。

什麼樣的圖示更具有可用性

作為WIMP(Window/Icon/Menu/Pointing Device)介面設計的關鍵部分，圖示在人機交互設計中無所不在。隨著人們對審美、時尚、趣味的不斷追求，Web Design也不斷花樣翻新，越來越多精美、新穎、富有創造力和想像力的圖示充斥著我們的視界。可是，從可用性的角度講，並不是越花哨的圖示越被用戶所接受，圖示的可用性要回到它的基本功用去思考。 　　 圖示的功用在於建立起電腦世界與真實世界的一種隱喻，或者映射關係。用戶通過這種隱喻，自動地理解圖示背後的意義，跨越了語言的界限。但是，如果這種映射關係不能被用戶輕鬆並且準確地理解，那麼這種圖示就不應是好的圖示。因此，圖示的設計應該遵守以下的原則。 　　圖示的可用性原則一：圖示指向的映射關係應該盡可能的直接、簡單。 　　可能與我們的直覺相反，一些研究顯示圖示介面與文本介面的比較中，CMS並沒有體現出明顯的優越性，一個主要原因就是文字和意義的映射是直接的，而圖示與意義的映射卻不一定是直接和明顯的。 　　在壞的圖示設計中，用戶需要花費幾秒鐘甚至更長的時間去猜測圖示代表的意義，而且還很可能猜錯，錯誤的理解導致錯誤的操作，錯誤的操作導致糟糕的結果，這決不是美妙的用戶體驗，即便從美學角度講那個圖示可能是上佳的藝術作品。 　　“直接”的意思是：不要繞彎。圖示展現的視覺表像與其背後的意義只需要很短的意義路徑即可網頁寄存連結。譬如對於“剪切”操作，使用“在文稿上打×”的圖示形象比“剪刀”的圖示形象更易理解，因為前者與剪切操作有更短的意義路徑，儘管“剪刀”圖示顯得更加生動活潑。 　　認知心理學家提出過一個啟動擴散模型，就是在人的知識和概念體系中，當一個概念被加工或受到刺激時，該概念結點就產生啟動，然後啟動與該結點直接相連的多個連結，並繼續向四周擴散。與當前概念在概念網路上的連結關係決定了其被啟動的強度。這種連結關係取決於人的知識體系的組織架構(即兩個概念是否屬於同一類別)和概念同時出現或使用的頻率。 　　例如在人的知識和概念架構中，網站建設在紙質文稿上寫字和在電腦上寫字都屬於撰寫文檔的類別，那麼當“在文稿上打×”的圖示形象出現時，被試就會快速地聯想到在電腦上進行剪切操作。而“剪刀”的視覺形象最易歸屬到“衣服裁剪”或“手工勞動”這樣的類別中去，因此映射關係具有教長的路徑和較弱的連結強度。因此在圖示設計中，設計師應該仔細考慮或者直接去調查用戶的知識體系，找到最短的概念連結。 　　圖示的可用性原則二：每個圖示指向的映射關係應該是唯一的。 　　這個原則的意思就是，不要讓圖示產生歧義。想像一下，一個“飛旋的車輪”的網站排名圖示，它代表了什麼?也許設計者的本意，是要用車輪的移動來象徵電腦中檔的移動操作。可是，用戶也許猜測出了其他十幾種對應關係，比如一款3D賽車遊戲。這個原則其實還有一個推論原則： 　　不要使用過於複雜的圖示。 　　因為圖示的視覺元素越多，那麼其意義指向的可能性就越多，用戶越有可能從各種各樣的角度去解讀，那麼該圖示的可用性就可能越差。 　　圖示的可用性原則三：同一個圖示系列中，最好使用相同的映射模式。 　　在真實世界與電腦世界(或網路世界)的對應中，存在很多種映射模式。筆者粗粗地歸納下，可以發現這樣幾種映射模式：外觀映射、功能映射、語詞(字母)映射、部分指代映射和綜合映射。在同一個系列圖示中，用戶極易對圖示形成某種固定的映射模式，如果突然出現了另一種模式的電子商務映射，用戶可能仍將延用先前形成的思維定勢進行理解，從而出現理解困難或理解偏差。 　　圖示的可用性原則四：最好使用簡短文字做為圖示的冗餘編碼。 　　在資訊傳播的過程中，增加資訊的冗餘度是保證網上商店資訊傳輸的可靠性的最有效的方法。在人機交互設計中，最常見的冗餘編碼就是紅綠燈，即每個顏色皆對應位置，使得在人口中占具相當比例的色盲人群也可以通過燈的位置來接收是否可以通行的資訊。圖示設計也需要增加冗餘編碼，以保證絕大多數的人都能夠快速、準確地理解圖示的含義。一個很好的例子出現在手機主功能表的設計中，下面看兩種常見的手機主功能表的設計： 　　圖示都在下方加注了簡單的文字，和圖示一起形成冗餘編碼。這樣即使用戶是第一次使用該手機，也能避免圖示選擇錯誤。而圖二的圖示沒有將文字直接標注在圖示下方，而是在只有選中某個圖示的情況下，在螢幕上方顯示文字標注，這樣無疑增加了用戶操作的負擔。儘管電郵服務某些圖示，用戶很容易理解其含義，比如圖二中第二行第一個“相機”圖示，用戶很容易清楚這是指拍照功能;但有些圖示，在沒有文字標注的情況下，還是令人費解，比如圖二中第四行第一個“禮品盒”圖示。因此，筆者認為，在大多數情況下，給圖示加注文字是比較好的選擇。 　　最後，我要說明的是，圖示設計中的可用性原則與圖示的美學考慮在實踐中可能存在矛盾，這時候權衡兩者是必須的。好的可用性可以讓用戶更方便地使用產品，而漂亮、時尚或者富有情趣的外觀設計可以給用戶帶來喜悅感等良好的心理體驗。很難說哪一方理所應當地取得主導地位，更理想的狀態是交互設計師和視覺(外觀)設計師進行良好的溝通和合作，求得雙贏的設計方案。

9件需要瞭解客戶的事情

作為設計師，你的每個客戶和專案都是獨一無二的。有些事情，你需要瞭解或者熟知你的所有客戶，才能為他們做出最好的Web Design。建設一個有效的解決具體業務需求的網站，需要設計人員準確理解很多業務的細節。 　　在這篇文章中，我們會看到9件設計師與客戶在設計開始前需要討論的事情，以增加成功的可能性。這些是圍繞去瞭解客戶業務與需求的話題，而不是像付款與最後期限這樣的合同問題。 　　1. 商業目的 　　幾乎所有的商業行為都有任務與遠景聲明。如果你想要設計出真實反映業務和對客戶有效的網站建設，瞭解基本的商業存在原因與他的目標是絕對有必要的。 　　如果你不清楚客戶的核心職責或者他們存在的原因，一定要在開始向目前把這些問題弄明白。雖然是很簡單的資料，但是沒有他們，項目很有可能誤入歧途。 　　2. 具體產品與服務的業務 　　一旦清晰了業務存在原因，熟知具體事項與客戶是如何從業務中得到收入也是非常重要的事情。無論是建立電子商務網站，還是普通的資訊站，或者任何其他類型的網站，有必要知道客戶準備為網站用戶提供什麼。 　　3. 客戶的用戶統計資料 　　討論業務的產品和服務會讓你獲得有關為產品與服務付費的用戶的更多資訊，有效果的網站建置是以用戶為中心，這個對身為設計師的你是至關重要的，你的客戶需要準確的瞭解誰將使用這個網站，誰是有可能對提供的業務感興趣。 　　盡可能多的獲取這方面資訊是非常好的做法。比如目標用戶的年齡，性別，職業，收入等等，這些對確定網站的設計風格非常有幫助。此外，為搜集更多有關用戶對產品與服務感興趣的原因而建立網站，有利於提高潛能。 　　4. 企業文化 　　好的網站排名能反映企業，使之成為整體市場行銷和企業形象有效的一部分。為了創建能準確表現企業的網站，你需要在一定程度上瞭解他們的企業文化。很多時 候你可以通過業務人員瞭解他們的文化(如果可能的話)。與不同的員工進行交談，與不同的客戶或者用戶交談(如果可能的話)，通過觀察其現有的行銷材料，比 如小冊子，名片和廣告。 　　5. 目前網站需要改善的地方 　　如果你的專案是需要對現有網站重新設計，這個時候你需要知道的一個重要事情是為什麼他們選擇了重新設計，特別是為改善現狀重新設計他們制定了什麼? 是因為他們網站上了歲數僅需要換換面貌?還是因為發生了業務發生了重大改變需要新的設計與資訊?還是提供的新產品和服務不屬於舊的網站的一部分?還是現在 的Web Design不能為新的業務提供有效的幫助。雖然這是非常合乎邏輯需要考慮的事情，但是需要你向客戶索取資料，並弄清楚他們著手重新設計的原因，這是許多人不會 想到你需要完全明白的。 　　6. 他們對新網站的期望 　　假如目前網站存在失敗或者過時的具體地方。一定要深入瞭解客戶對新網站提高業務水準的期望是怎樣的。期望是決定他們對你的工作的滿意度的巨大因素。所以為了滿足用戶，知道項目最終的結果是什麼非常重要。 　　7. 項目成敗的決定性因素 　　網站的新設計會給企業帶來令人滿意的感覺改善。但是最終將有其他的影響因素，決定專案的成敗。作為設計師，有效的工作會給客戶帶來提高業務的網頁設計。清楚的認知項目成敗的因素是非常重要的。也許是成功僅僅在於增加了銷售量。也許是網站更準確的反應了企業的重大事情。無論是哪種，知道如何衡量能幫助 你把重點放在合適的方面。 　　8. 他們選擇你做設計師的原因 　　有如此眾多的自由設計師和設計公司可供選擇，很明顯客戶選擇了你是有原因的。也有一些是使客戶覺得你是最合適的人選的相關事情。這也許因為你以往作品中的具體專案。也許因為在簽約之前你表現出的有效溝通和對細節的關注。也許是因為你的定價。 　　無論是何種情況，有些關於你或者你的工作的事情，是鼓勵你的客戶和你一起去瞭解其他設計師。這一決定背後的原因往往會幫助你更好的瞭解他們想要的或者對你的期望。 　　9. 他們維護網站的計畫 　　目前幾乎每一個網站的設計開發都會使用某種類型的CMS.他們不斷維護更新網站的需求影響著CMS的選擇和如何建立網站和網上商店。 　　他們計畫增加新的頁面與經常在存在的頁面改動圖片和文字麼?他們需要各種各樣的範本，為不同的目的建立特定頁面嗎? 他們僅僅是偶爾或者很少更新頁面麼?理解客戶不斷前進中的需求能幫助你決定為特定的專案使用正確的CMS。在某些情況下，客戶可能已經有了他們想使用的 CMS,但是這樣的情況不經常遇到。

一個大學生的網頁設計

“從農村到城市，家裏唯一期望就是我，所以我感覺自己壓力很大。” 　　 　　 他困惑，自己看到的和書上的不一樣，感覺自己很無助，很迷失，沒有方向感；他狂喜，年收入6萬元。 　　 　　 “在虛擬的網路中，特別是在自己的網站建設論壇中你隨時可以找到家的感覺，那麼多人都給你祝福，溫情，讚美。” 　　 　　 近在咫尺的成功是現實還是夢境，一個大學生的網頁設計生涯。　　 　　第一步：第一個個人主頁 　　 趙凱出生在河北省保定一個普通的農村家庭，2001年，他以一個並不優異的成績極不情願的邁入了古城南京一所普通的大學，這對於從小就爭強好勝的趙凱來說無疑是一個沉重的精神打擊。趙凱說，自己是在渾渾噩噩的感覺中度過了自己的大一生活。趙凱在大學生學習的電腦應用專業，這個在當時非常時髦的專業或許是唯一的能夠讓他聊以自慰的事情。 　　 　　 雖然趙凱對自己的學校有著種種的不滿，但是趙凱在老師的眼中仍然是一個生活本分的乖孩子，在趙凱邁入自己的第二個年頭的大學生活時，一次由全市舉辦的電腦技能比賽成為了趙凱人生中的第一次轉軌。 　　 　　 “有一天下課老師把我叫住，然後就跟我說現在市里有一個電腦比賽，學校裏希望我能夠代表學校去比賽其中的一個專案，但是我當時想我在班裏的成績並不是很優秀的，怎麼會選擇我去比賽哪？後來老師告訴我，我要參加的那個項目是打字科目的，老師說我的手比較細，而且人穩當，所以選擇了我。”趙凱說，自己都沒有想到，自己真正對電腦的第一次親密接觸竟然是以這樣一種看似掉餡餅的方式砸在自己頭上的。 　　 　　 在全市比賽之前，在學校特許的情況下，趙凱幾乎免除了一切的課程，和幾個同學一起被老師關在機房裏強化集中訓練五筆字型輸入法。而在此之前趙凱僅僅只是在課堂不充裕的時間裏短暫的接觸過電腦。趙凱說自己以前並不能說很喜歡電腦，而這次不得以被趕鴨子上架了。不過這一次趙凱耐心平和的性格再一次幫助了他，趙凱按照老師的安排認認真真的在機房裏苦練了兩個星期之後輸入法的速度已經能夠小組中排名第一。 　　 　　 打字速度給了趙凱很大的信心，雖然當時趙凱甚至連Word這樣普通的辦公軟體的操作都有些陌生，但是手指間飛快的速度讓趙凱前所未有的自信自己能夠學習好電腦。由於每一個參加比賽的小組都需要參加基礎的電腦網路的知識問答和操作，因此在趙凱主攻的打字強項之外，利用集訓練習的空隙時間上網學習網路知識成為了趙凱的另外一項任務，此時Internet的概念對於趙凱腦海中完全是一片空白，網路中世界中的一切對於趙凱來說是如此的新鮮而又新奇的電子商務。 　　 　　 不過正是由於這種好奇＋任務的符合動力讓趙凱打下一個扎實的網路基礎，他很快就瞭解了什麼是WWW，什麼是TCP/IP協議，Outlook的作用，SMTP和POP3的設置等等與網路相關的知識。不過趙凱最好奇的仍然是網路中那些漂亮的網站是如何製作出來的，而老師給趙凱的回答是Word就能夠做網站，於是接下來事情非常順其自然，趙凱有了自己的第一個網頁，一個用Word製作後另存為HTML格式的網頁。雖然這個網頁簡單的有些可憐，但是趙凱還是當作寶貝一樣的放到了自己申請的個人網站空間上，而它每一天都會有一個忠實的訪問者，那就是趙凱自己。 　　第二步：FrontPage到HTML 　　 全市的電腦技能比賽之後，趙凱對網路的已經發生了癡迷的熱愛，此後的日子裏，他幾乎一有時間就往學校的機房鑽。他像擠牙膏一樣的省下來一些生活費購買各種各樣的網路書籍，特別是有關網路製作方面的書籍，趙凱對網路特別是網頁製作方面的濃厚興趣立刻引起了學校一位老師的注意。“這是一位剛剛大學畢業的老師，由於我們年齡基本相仿所以我們之間沒有太多的代溝，而且我們都對網路感興趣，所以就經常在一起聊網路。”趙凱說，遇到這位元老師是他網路人生的第二個轉折。 　　 　　 大二第二個學年正好趕上學校接受上級教育系統的整體教學評估，學校為了準備這次評估專門購置了全新的伺服器，趙凱和那位老師一起摸索著裝配調試成功了伺服器。這一次跟伺服器的親密接觸讓趙凱興奮不已，更加令他想不到的是，學校還給那位老師和他分配了一個新任務，為迎接評估考察團製作一個介紹學校的網站。 　　 　　 趙凱知道這是一個千載難逢的學習機會，但是對於製作網頁剛剛入門的趙凱來說，他很清楚這絕對不是一個輕鬆的任務，而且老師也是剛剛接觸網絡不久，並不能夠在網頁製作方面對趙凱起到一定的指導作用，他們兩個人只能一起在黑暗中摸索。最初的階段，趙凱和老師一直按照網頁Flash製作的教程使用FrontPage這個軟體一頁頁的製作。但是趙凱感覺這樣太慢了，雖然FrontPage這款軟體在操作方面和Word一樣輕鬆，但是往往趙凱花了半天時間做出來的樣子在保存成為HTML網頁之後卻不是自己想要的樣子。 　　 　　 據考察團來參觀的時間越來越近了，趙凱和自己的老師如同熱鍋上的螞蟻一樣著急，而就在這時趙凱發現了Microsoft Office 2000中一個名字叫做Publisher 2000的排版軟體也可以在製作完成效果後另存為HTML檔，而且Publisher 2000的操作非常簡單，你可以把你想調整的圖片放到任何位置，而不必像FrontPage反復的摸索測試再看效果。老師也很快的同意了趙凱使用Publisher 2000製作網頁。 　　 　　 經過通宵達旦的製作，趙凱終於得到了他們想要的網頁效果，不過正當趙凱想和老師慶祝自己的勞動成果時，趙凱突然發現，使用Publisher 2000製作的網頁竟然很多地方都自動變成了整片整片的圖像。此時趙凱才理解了為什麼使用Publisher 2000挪動圖片時那麼輕鬆，因為它完全把網頁的一部分當作了一張大圖片合成了，因為Publisher 2000本身就是做排版的軟體。趙凱說通過這件事情，他下定決心一定要學會如何製作那些精美的網頁。“我一直搞不懂別人很多網頁的特效是如何製作出來的，後來我將網上別人的網頁保存下來，然後使用FrontPage在把這些網頁打開，一頁一頁分析別人的網頁是如何製作的。”通過這種學習方法趙凱學到了自己以前很多不明白的網頁製作方法，例如如何通過控制表格將圖片拆分在拼合。 　　 　　 趙凱說其實最關鍵的是他理解了HTML的真正含義，“我以前一直單純認為HTML是一種檔格式，就如同DOC和EXE一樣，後來同網上看和學習我終於明白了HTML是一種網頁製作的語言，有時候有些想要的效果必須通過HTML根源程式的直接修改才能夠達到想要的效果，而不是單純通過FrontPage修改可以得到的。”修改了兩天之後，學校的網站終於能夠正式啟動了，雖然比預想的的效果要差一些，但是 　　 　　 此後半年的時間趙凱幾乎都在研究HTML和網頁各種製作的方法，“我曾經很長一段時間內不理解為什麼別人製作的網頁的字體可以保持不變形，後來終於搞明白了原來是其中一個尾碼為CSS檔在發揮作用。”隨著趙凱眼界的開闊，他也有FrontPage轉向更加專業的Web Design製作軟體Dreamweaver。 　　 　　 學習Dreamweaver之余，趙凱也不得不面臨另外一個困境，就是他的個人生活問題，由於將附近寄來的生活費都挪作賣書之用了，趙凱的生活開始越來越窘迫，老師看到了趙凱的情況後，向趙凱建議讓他毛遂自薦，去校長那裏接下維護學校網站的活兒，讓學校給他算作勤工儉學，減免他一部分生活費，而且這樣學校還能夠 　　 　　 趙凱說，Dreamweaver與FrontPage有很大的不同，Dreamweaver能夠發揮出更多非常專業的網站建置製作效果，例如層概念等等。“FrontPage是一個非常好的入門網頁製作軟體，它可以很快的讓你理解什麼是超連結，什麼是表格，什麼是框架。而在理解了這些網頁製作的基礎之後，Dreamweaver就是製作出精美網頁的利器了。”也就是在趙凱熟練的掌握了Dreamweaver之後，他認為他已經是一個優秀的網頁設計人員了，這一年他邁入了大學三年級的新階段。 　　 第三步：從編程到藝術 　　 三年級新學年，整天為生活費發愁的趙凱遇到了自己的第一個財神，一家人才公司的老總通過介紹找到了趙凱，他希望趙凱能夠幫助自己設計一個網上人才交流的網站，而籌勞對於趙凱這樣一個學生來說相當具有誘惑力。“設計費＋維護6000元，這對於我來說可是不小的一個數字，足足夠教我一年的學費了，當時我就想，如果我真的整到了這筆錢，家裏的負擔一下子就會減輕許多。”為了證明自己，更為了減輕家裏沉重的負擔，趙凱毫不猶豫的承接了這個網站的製作任務。 　　 　　 在人才市場的任務接下來以後，趙凱很快發現，事情並不象自己原先設想的那麼簡單，這個人才市場的網站根本不可能使用簡單的幾個頁面就可以完成，它需要根據網路人才自薦等一系列的互動網頁支援，能夠後臺管理，更加直白地說，也就是需要動態的網頁設計，例如ASP、CGI等。 　　 　　 ASP即Active Server Page的縮寫。它是一種包含了使用VB Script或Jscript腳本程式碼的網頁。當流覽器流覽ASP網頁時, Web伺服器就會根據請求生成相應的HTML代碼然後再返回給流覽器,這樣流覽器端看到的 就是動態生成的網頁寄存。ASP是微軟公司開發的代替CGI腳本程式的一種應用,它可以與資料庫和其他程式進行交互。是一種簡單、方便的編程工具。在瞭解了VBSCRIPT的基本語法後，只需要清楚各個元件的用途、屬性、方法，就可以輕鬆編寫出自己的ASP系統。ASP的網頁檔的格式是.ASP。 　　 　　 ASP的程式語言與VB很相似，幾乎可以用孿生兄弟來形容。趙凱在大二的時候就學習了VB程式設計的課程，不過趙凱並沒有認真學習VB的課程，他一直認為VB是一種傻瓜編程語言，而且使用VB編寫出的程式需要VB動態連結程式庫的支援才能夠運行，因此趙凱認為VB是一種沒有前途的編程語言，不過現在書到用時方恨少，如果趙凱VB學習的扎實一些，他完全可以順利的過渡到ASP。 　　 　　 “ASP、PHP、CGI的動態網站現如今已經成為了趨勢，一般的中小公司為了維護和更新方面，現如今都會使用動態網站程式，而動態網站排名關鍵的技術就是編程。”不過最後趙凱還是在同. 

八種陋習

一、不要為圖像加入太長的交互文本 使用“ALT=”為圖像加入交互文本是一個好習慣，因為並不是所 有的人都打開圖像載入開關的，這時候這些交互文本給了用戶一個有 用的提示，特別是一些連接。但有部分網站建設者為圖像加入了很長 的交互文本，當用戶載入圖像時，這並不影響結果；但如果用戶不載 入圖像，流覽器就會將所有的文本都顯示出來，以致超出了它本來的 寬度、或高度，對網頁原來的排版影響很大。 例如廣州市某免費個人主頁提供商的網頁，我開始在關閉圖像載 入的情況下訪問，結果該網頁亂七八糟，而且需要使用捲軸才能全 部流覽，每個文字連接都被前面的圖像逼得排成兩行，很不順眼！後來我打開圖像載入再去訪問該站時，發現Web Design原來很整齊。那些用文 件名和長度作為交互文本的圖像只是一些長度、寬度都很小的裝飾圖 案，但因為交互文本太長了，所以才造成了混亂！ 二、不要將連接全部擺在圖像中 以往的網站建置中的連接都是文字，而且用下劃線以資識別。但不久人們就討厭了這些文字連接，於是都採用了圖像連接。後來，更加嫌一個圖像一個連接太麻煩了，於是將所有的連接到擺進了一個圖像中去。但與上忌情況一樣，不是所有的人都打開圖像載入，如果你把所有的連接到擺在圖像中去，而沒有任何同樣功能的文字連接的話，用戶也許會很不知所措。 某網上男孩子的網頁，可能是考慮到這個情況，於是把包含在圖 像中的連接作為交互文本列了出來———呀！足有1000多圖元的寬度 。結果我沒有用滑鼠去“探索”———其實可以用TAB鍵去尋找這些 連接———而是退了出來。與其怕部分用戶望而止步寫了那麼多的交 互文本，為什麼就不可以增加一些同樣目的的文字連接呢？ 三、不要使用自動滾動 曾經到過一個內容“豐富”的網頁，它幾乎使用了所有曾經在 《中國電腦報》中出現過的網頁製作技巧：現在的時間、訪問了的 時間、等等。不過有一個不是使用得很好的，就是視窗的自動滾動。 我只是想發個電郵服務件給網頁的主人，但我卻無法使捲軸停下來讓我點 擊連接，於是我花了很久才“命中”視窗中的E－mail連接———真 後悔軍訓的時候沒有練好射擊！也許自動滾動可以炫耀一下本事，但 就沒有什麼實際價值了。用戶有滑鼠，可以自己移動捲軸，網頁Flash製作者們可以少操心。 四、不要用延時效果的javascript 現在的網頁製作者為了使網站排名更加具有影響力，都瘋狂地加入javascript 。以現在的貓奔跑的速度而言，這些腳本也算不了什麼，用戶不會介 意。但是，如果這些腳本可能導致延時的話，用戶的態度就不同了。 因為這些延時不會因為貓的快慢而改變，任何用戶都必須望著螢幕上 的“雜耍”完了才可以繼續。頭一兩次還會覺得：WELL，棒極了！但 後來，……某個國人網頁的首頁在載入時視窗的底色———視窗裏面 沒有任何內容———由白色逐漸變成黑色，整個過程耗費了幾秒，嘿！ 別小看這幾秒，我能檢查了全部的郵箱了！ 五、不要依賴流覽器 唉！其實留意《中國電腦報》的話，應該看過這類的警告。但 事實上，太多的網站首頁中加入了“請在123＊456解析度下使用789 流覽器流覽本網站”的文字。我是安裝了IE、NC、和Opera，因為我 要製作網頁，需要它們來檢驗網頁的在這些流覽器下的可讀性。但一 般用戶不會安裝那麼多的流覽器，更加不會牢記著哪個網站需要用哪 個流覽器流覽 網頁設計是一門藝術，一門大眾（流行）藝術！就好比音樂，只 使用一種樂器、沒有歌聲，當然也會有人喜歡，但是流行音樂更多的 是採用各種樂器，加上歌手的歌聲，這樣才會被更加多的普羅大眾所 接受，對嗎？ 也許不可能讓網頁在使用所有的流覽器流覽都有一樣的效果，但 儘量地去達到該目的，會讓網頁在這個流覽器下有這樣的特色、在另 一個流覽器下又有不同的特色，這是網頁製作者的工作，不是嗎？ 六、不要濫用留言簿 別誤會，雖然我的個人網頁由於伺服器的問題不能使用留言簿 ( CMS )， 但我絕對不是妒忌！那次在某個網友的網頁上留言，提交之後發現我 的留言和個人的部分資料立即送了上留言網頁，和其他以前的留言一 起展示出來。首先，我的個人資料之所以告訴你是因為想與你交個朋 友，但未經任何提示的情況下就全部擺了上網，好象不是很友善。其 次，更重要的是，我在該留言網頁上發現了某個人的言論似乎很偏激， 有反革命嫌疑———這樣做是很危險的！你的網頁有沒有違法成分你 自己可以控制，但其他訪問者的言論是你所難以估計的，萬一被其他 別有居心的人利用來進行反動宣傳，這樣你豈不成了“同夥”！ 有鑒於此，我奉勸所有使用留言簿的網友，慎之又慎啊！ 七、不要忘記版權 現在，網上的侵犯知識產權問題非常猖獗，某N字頭免費個人網 頁提供商上的網頁尤其嚴重———甚至有盜版光碟販賣呢！為此一些 新的免費網頁設計模板提供商就要求用戶在申請時提交詳細的、真實的個資料，以防備不可預計的事情發生。 不少的網友都很輕視知識產權，覺得自己是個人，大公司不會計 較的。但，《中華人民共和國電腦資訊網路國際聯網安全保護管理 辦法》中第四條規定“任何單位和個人不得利用國際聯網危害國家安 全、洩露國家秘密，不得侵犯國家的、社會的、集體的利益和公民的 合法權益，不得從事違法犯罪活動。”所以，如果你的網頁需要引用 別人的東西的話，要麼你就和他聯繫一下，徵求意見；要麼就在明顯 的位置注明其版權歸屬。這並非多餘，這是你的網頁“長壽”的秘方！ 當然，如果是你自己製作的圖像或自己撰寫的文章，你絕對有權 聲明版權歸你自己所有！ 八、不要懶于更新 某個N字頭的個人電子商務網頁聚居地上有很多的網頁都是很久前建立而至今沒有更新過的，姑且不說這是浪費公用資源的行為，訪問過這些 網頁的人看見網頁主人如此懶惰，你說他還會再去訪問嗎？誰能確定 下次訪問不會又是這般模樣呢？網際網路上的資源如此浩瀚，誰會去訪問一個“從”不更新的網頁呢？ 我誠意地奉勸那些“霸佔”了公用的個人網頁存放地方的人，如 果你們真的那麼忙，為何不讓出空間，給新的網友更多發展的機會呢？

Web Design的“可用性”與“用戶體驗”的區別與聯繫

可用性(Usability，又可譯為易用性)簡單的說，就是easy to use，按照國際標準組織的定義，包括有效性(effectiveness)、效率(efficiency)和主觀滿意度(satisfaction)三個維度;按照Jakob Nielsen的定義，包括可學習性、效率、可記憶性、(低)錯誤和滿意度五個維度，可謂大同小異。可用性一度是產品設計的很重要的原則，尤其在西方國家，頗受重視。近十年來，另一個詞用戶體驗(User Experience，UX)迅速風靡世界尤其是互聯網業和電子商務消費品業界，大有蓋過可用性之勢。在很多人眼中，可用性似乎約等於用戶體驗，常把兩個詞混用起來。殊不知，可用性和用戶體驗雖有交叉重疊，但區別也是明顯的。 　　可用性偏重理性，怎麼樣讓產品更易於使用，內有邏輯可循，比如按照唐•諾曼在《設計心理學》中所說的預設功能、限制因素、自然匹配、即時回饋等幾大原則來設計，一般出不了什麼差錯，八九不離十吧。而用戶體驗偏重感性，更涉及用戶的情感層面，這時設計者的feeling很重要，本身用戶體驗的定義就莫衷一是、難以定論，更別說用戶體驗設計的指導原則了。因此，對於設計者來說，可用性像是一門技術，用戶體驗更像一門藝術。 　　國外有位研究者Thomas Baekdal寫了篇文章：The Battle Between Usability and User-Experience，很有意思。他認為較高可用性的產品並不一定帶來好的用戶體驗，而好的用戶體驗的產品也可能具有不良的可用性設計，他還舉例說高速公路具有較高的可用性，因為又直又寬，非常高效的CMS，可是在上面駕駛卻是十分的乏味;而盤山公路可用性比較差，因為蜿蜒曲折，還比較窄，也不怎麼安全，但是司機開在其中卻別有一番樂趣，不僅道路的變化富有戲劇性，四周還有自然美景可以欣賞，可謂用戶體驗極佳。想想身邊的產品，似乎也有類似之處。有些東西，若是操作起來太簡單，網頁寄存很可能會變得索然無味;如果人為設置點障礙，設計點機關，用戶體驗起來也許會很有興致。我再舉個有點跑題的例子，美劇LOST的“可用性”那是相當差，三季播下來，有70多集了吧，所有的觀眾都不知道它在講一個什麼故事、它的主題是什麼，越看越糊塗，全都Lost了，按照Steve Krug的說法：“Don’t make me think!”，這絕對是一部應該砍掉的電視劇;可從另一個方面來講，LOST的用戶體驗卻相當好(急性子的觀眾除外)，很多粉絲每看完一集都要聚在一起討論，越討論越有興致，不少人還會把關鍵畫面截圖、放大出來分析，幾乎每一個細節都不放過，可見LOST不愧是當前最為熱門的美劇之一。 　　在交互設計中，唯一可以確定的原則就是沒有放之四海而皆準的原則，具體情況具體分析，國外一些設計者還把“It Depends!”的口號印在T恤上。可用性和用戶體驗之間的權衡(如果兩者果真出現衝突的話)也要視不同的產品而定。或許可以把產品(包括硬體產品、軟體和網頁)分成兩類網站排名：工具和玩具。像唐•諾曼在《設計心理學》中列舉的產品，比如門把手、茶壺、開關等，都可算工具一類，對於這些產品，易於使用以實現其功能是第一位的，因此可用性是首先要考慮的要素。而我把注重體驗過程的、以娛樂為主要的目的的產品都稱為“玩具”，這時用戶體驗就至關重要了。當然，事實上每一樣產品都是工具和玩具的混合體，只是兩者的權重有所差異罷了，並且在不同的用戶眼中可以扮演不同的角色。比如郵票，對於正在寄信的人來說，這只是工具，可是對於集郵的人來說，這就是藝術品，要好好賞玩一把。再比如手機，手機是工具還是玩具?簡單的說是兩種的混合體，對於絕大多數30歲以上的用戶來說，手機首先是工具，而對於teenager來說，手機更像是玩具了。 　　講了這麼多可用性和用戶體驗的不同，不能忘掉一點，在大多數的情況下，可用性和用戶體驗是一致的。好的可用性讓用戶更方便、快捷、舒適地使用產品，減少誤操作，便會喚起良好的情感體驗，讓用戶感到快樂。這時我想到了在管理心理學裏面，有一個著名的雙因素理論，又稱激勵-保健因素理論，指員工對企業的看法有兩類因素起作用，一類稱為保健因素，這類因素的改善可以減少員工的不滿但尚不能直接起到激勵員工的作用，這些因素包括公司政策與網上商店管理、監督、工作條件、人際關係、薪金、地位、工作安定等;另一類稱為激勵因素，這些因素可以使員工獲得滿足感，在工作中產生激勵作用，這些因素包括工作成就、提升、任務性質、個人發展的可能性、職務上的責任感等。類比一下，可用性似乎更像是保健因素，它是必不可少的，但未必借此就能夠吸引用戶;而用戶體驗是激勵因素，它帶給用戶良好的情感體驗：有趣、時尚、酷甚至性感。Thomas Baekdal提出了一個創造性綜合的觀點，他認為同時實現兩者可以用一個目標來囊括：Making it easy to be happy。

不良網頁設計用戶體驗設計產生的糟糕感受

網站用戶體驗設計是Web Design中非常重要的部分，我最近在搞一個網站的易用性評估專案，從個人體會中總結了一些不良網站用戶體驗設計會產生的幾種糟糕感受，大家在設計的時候一定要避免。 　　1、不安感：網站在流程方面應該讓用戶在每次點擊下一步時有可預知性，尤其對於一些沒有先驗經歷的線上實施流程或涉及利益攸關的點擊時，如果完全不知道點擊後會發生什麼結果，不安感隨即產生; 　　2、糊塗感：或稱迷惑感，總之就是被介面或流程搞糊裏糊塗，進行不下去的感受。比如前天在深航網站建設訂機票，填了出發時間，卻還有個返回時間，而且是必填項，搞到我莫名其妙，折騰了半天，才發現人家缺省就是往返選項，有這理嗎! 　　3、挫折感：就是不能順利完成任務、未達到目標的那種感受，比如電話號碼必填項，卻沒有給出正確的格式供參考，老填錯被打回重填的那種感受; 　　4、錯愕感：錯愕感的產生，通常源於進程頁面網頁寄存與預期或暗示的不相符。比如你在某網站點擊下一步，卻被帶出到一個介面完全陌生的站點，令人錯愕。 　　5、被騙感：在本次易用性評估中，被評估網站提供積分換獎品，新競爭力的體驗小組成員原本積分不夠，但點進後發現是可兌換的樣子，遂懷著系統出錯的偷著樂心情，興沖沖把送貨位址什麼的全部添完了,一提交,才跳個框框出來說積分不夠——早不說! 　　6、憤怒感：前天晚上在深航新版網站買機票這事，眼看著只剩下幾張票了，卻在網站上半天繞不出來：一會是那個缺省往返問題，一會是找不到購買按鈕，搞到最後產生了砸電腦的高級衝動。 　　除了這幾種感覺，還有幾種體現用戶體驗不佳的CMS狀態： 　　 尋找的狀態，比如找下一步按鈕、找幫助。 　　等待的狀態，比如等flash loading，等緩慢的進程。 　　猶疑的狀態，比如點還是不點、點這個還是點那個……

從平面柵格Web Design看佈局

網頁設計中的髒、亂、差，是我們在設計過程中常會遇到的問題。通常"髒"是由對色彩使用不當所產生的，而色彩使用不當產生的不好效果也分為："花、灰"，花哨、灰頭土臉也就是這裏所說的"髒"。而"差" 基本上是由於我們的技法上不夠嫺熟所產生的。比如細節上的處理不到位，某個局部的效果製作得粗糙。這可以稱之為"差"，特別是在處理帶有2D效果的設計作品時，這種情況常會出現。但是我今天在本文中所要談的是"亂"。 　　什麼是亂？這裏的亂不是指用色亂，也不是指內容亂，而主要是指網頁佈局亂。以前我有幸接觸了平面設計，並且網站建設從中學到了很多平面設計上的一些知識與技法。其中“柵格設計”就是平面設計中用於處理佈局的一種理論。到目前為止我還在研究"柵格設計"。因為著實沒有什麼比較好的語言可以非常簡潔明瞭的概括這個詞。這更像是需要不斷用實踐去理解的。所以很多時候我們們都無法去講述。但是在設計中這個柵格卻是能幫助我們完成更好作品的一個非常好用的利器。對於柵格設計我也不能說是認識深刻，我這裏只是依據我對於柵格設計的理解，將之用於網頁設計中，希望能給更多的朋友們一點啟示，或許能打開一些朋友的思路。 　　單純的文字是沒辦法讓設計師們耐心的看下去的，所以網頁寄存還是老辦法，用示圖來作為講解模型。這次我們使用的網頁是微軟、IBM、ASTRO三個公司網站來講解。希望通過分解這三個公司的網站設計，能把我所理解的柵格設計傳達出來。看示圖： 　　我們看到微軟公司的網站設計中並沒有什麼明顯的線去區隔不同的區塊，但是當我們把當蒙上一層紗，然後用實線把每個部分都畫出來這時我們發現這個網站其實是處在一個柵格陣列中。那麼這個陣列中的內容已經很明顯了，並且我們從中發現了很多區塊在頁面中的位置居然是那麼的有條理，並且有一些並不在一起的區塊，居然也有一定的規律。當然有人可能會說，都用線畫出來了當然顯得條理，整齊了SEO。問題就在於這裏，我們的網站都可以用縱橫線區分開。但是一些設計得不好的網站的縱橫線可能數量非常的多，縱橫線的數量過多並且都擠在一直，這就說明網站的佈局顯得太亂。或者是過於條理而變得佈局平均，沒有對比，缺乏美感。其實只要用這樣的方法去分析一下自己設計的作品也許就能從中看到問題所在。 　　下面我們再來看一下IBM的網站的分解圖： 　　我們看到IBM的柵格與MS的有很大的不同，IBM中還出現了一些差不多大的柵格CMS，但是這裏要注意其實這些柵格是由於底部很小的幾個區塊所產生的，並且這凡個區塊還可以看作是一個橫向的區塊。我們從這裏可以看到IBM的佈局設計是對稱的。但是這種對稱卻是在離在縱橫線上卻不容易注意到的。這是很高明的手法。 　　我們再來看看ASTRO公司的網站，這個網站比起上面兩個公司的網站就更娛樂化，更有趣了。 　　從這三個網站排名中我們可以看到三種不同風格的柵格設計，雖然有所不同，但我們依然可以發現三者都會盡可能的把最重要的資訊放在視覺中心點上，不論是放在左邊的還是右邊的或是中間的，他們都得到了最大的柵格區，得到了足夠的重視!我們的視覺中心也自然盯在了上面! 　　說到這裏我依然覺得沒能把柵格設計的作用講明白。

CSS技術使網頁設計如魚得水

多層模式表單(Cascading Style Sheet, CSS)是一種為超文本置標語言(HyperText Markup Language, HTML)提供增強補充服務的技術，可對每一個HTML的置標(tag)做精雕細刻的修飾。 　　只用HTML製作的Web Design，對頁面內各部分的修飾能力有限且語句煩鎖，CSS正是彌補這一缺陷的有力技術，它語句、文法簡單，只要在源碼中插入STYLE語句就可輕易實現頁面內任意文本顏色、背景、邊框、行距、字距的添刪和修飾等功能，使網頁更加生動活潑，從而獲得滿意的效果。 　　---- CSS在HTML中以STYLE標識出現，其格式為:一對代表CSS檔案技術的STYLE置標，內放被修飾的HTML置標，置標的CSS屬性放於緊隨其後的一對大括弧內，每個屬性賦值用":"，多個屬性之間用";"隔開，例: 　　< style > 　　a{text-decoration:none; color:yellow} 　　a:hover{text-decoration:underline; color:purple} 　　p{font-size:20; background:red; color:blue} 　　< /style > 　　---- 將如上代碼插入任一HTML文檔後，刷新顯示，則所有錨點變為普通字體，顏色為黃，但當滑鼠移至其上時，則錨點的提示字元變為帶下劃線的紫色字體;整個文檔中被置標P包圍的文字將以紅底藍字、字體大小為20個象素的形式出現。如果其中某段文字需另加修飾，可以單獨的的形式出現，例如 　　< p style="font-size:30; font-weight 　　:bolder; background:white;color:blue" > 　　................ 　　< /p > 　　---- 則此段文字白底藍字，30個象素大小，且字體加粗。隨後是一個帶有CSS技術的HTML文檔的完整例子: 　　< html > 　　< head > 　　< title > 如何使用CSS < /title > 　　< /head > 　　< body > 　　< style > 　　a{text-decoration:none; background:red; color:yellow} 　　a:hover{text-decoration:line-through; background:lime} 　　h1{text-align:center; font-weight:900; 　　border-style:ridge; border-width:medium; border-color:red} 　　p.first{font-size:15; font-face:楷體; 　　color:blue; border-style:dotted; 　　border-width:thin; border-color:blue} 　　p.second{font-size:20; word-spacing:10; background:aqua} 　　< /style > 　　< h1 > 帶連框的題頭1 < /h1 > 　　< a href=mailto:wow20000@hotmail.com?subject=CSS > 　　滑鼠移至此處, 背景變化 　　< /a > 　　< p > 未加CSS修飾的段落 < /p > 　　< p class=first > 指定CSS修飾的段落 < /p > 　　< p class=second > 指定另一種CSS修飾的段落 < /p > 　　< /body > 　　< /html > 　　---- 從上例的顯示可以看出，CSS是HTML的一個補充，幾乎可以對每一個HTML置標進行擴充，使網站建設充滿活力，顯示出更加完美的效果。

初學忠告：網頁設計的八種陋習

一、不要為圖像加入太長的交互文本 使用“ALT=”為圖像加入交互文本是一個好習慣，因為並不是所 有的人都打開圖像載入開關的，這時候這些交互文本給了用戶一個有 用的提示，特別是一些連接。但有部分網站建設者為圖像加入了很長 的交互文本，當用戶載入圖像時，這並不影響結果；但如果用戶不載 入圖像，流覽器就會將所有的文本都顯示出來，以致超出了它本來的 寬度、或高度，對網頁原來的排版影響很大。 例如廣州市某免費個人主頁提供商的網頁，我開始在關閉圖像載 入的情況下訪問，結果該網頁亂七八糟，而且需要使用捲軸才能全 部流覽，每個文字連接都被前面的圖像逼得排成兩行，很不順眼！後來我打開圖像載入再去訪問該站時，發現Web Design原來很整齊。那些用文 件名和長度作為交互文本的圖像只是一些長度、寬度都很小的裝飾圖 案，但因為交互文本太長了，所以才造成了混亂！ 二、不要將連接全部擺在圖像中 以往的網站建置中的連接都是文字，而且用下劃線以資識別。但不久人們就討厭了這些文字連接，於是都採用了圖像連接。後來，更加嫌一個圖像一個連接太麻煩了，於是將所有的連接到擺進了一個圖像中去。但與上忌情況一樣，不是所有的人都打開圖像載入，如果你把所有的連接到擺在圖像中去，而沒有任何同樣功能的文字連接的話，用戶也許會很不知所措。 某網上男孩子的網頁，可能是考慮到這個情況，於是把包含在圖 像中的連接作為交互文本列了出來———呀！足有1000多圖元的寬度 。結果我沒有用滑鼠去“探索”———其實可以用TAB鍵去尋找這些 連接———而是退了出來。與其怕部分用戶望而止步寫了那麼多的交 互文本，為什麼就不可以增加一些同樣目的的文字連接呢？ 三、不要使用自動滾動 曾經到過一個內容“豐富”的網頁，它幾乎使用了所有曾經在 《中國電腦報》中出現過的網頁製作技巧：現在的時間、訪問了的 時間、等等。不過有一個不是使用得很好的，就是視窗的自動滾動。 我只是想發個電郵服務件給網頁的主人，但我卻無法使捲軸停下來讓我點 擊連接，於是我花了很久才“命中”視窗中的E－mail連接———真 後悔軍訓的時候沒有練好射擊！也許自動滾動可以炫耀一下本事，但 就沒有什麼實際價值了。用戶有滑鼠，可以自己移動捲軸，網頁Flash製作者們可以少操心。 四、不要用延時效果的javascript 現在的網頁製作者為了使網站排名更加具有影響力，都瘋狂地加入javascript 。以現在的貓奔跑的速度而言，這些腳本也算不了什麼，用戶不會介 意。但是，如果這些腳本可能導致延時的話，用戶的態度就不同了。 因為這些延時不會因為貓的快慢而改變，任何用戶都必須望著螢幕上 的“雜耍”完了才可以繼續。頭一兩次還會覺得：WELL，棒極了！但 後來，……某個國人網頁的首頁在載入時視窗的底色———視窗裏面 沒有任何內容———由白色逐漸變成黑色，整個過程耗費了幾秒，嘿！ 別小看這幾秒，我能檢查了全部的郵箱了！ 五、不要依賴流覽器 唉！其實留意《中國電腦報》的話，應該看過這類的警告。但 事實上，太多的網站首頁中加入了“請在123＊456解析度下使用789 流覽器流覽本網站”的文字。我是安裝了IE、NC、和Opera，因為我 要製作網頁，需要它們來檢驗網頁的在這些流覽器下的可讀性。但一 般用戶不會安裝那麼多的流覽器，更加不會牢記著哪個網站需要用哪 個流覽器流覽 網頁設計是一門藝術，一門大眾（流行）藝術！就好比音樂，只 使用一種樂器、沒有歌聲，當然也會有人喜歡，但是流行音樂更多的 是採用各種樂器，加上歌手的歌聲，這樣才會被更加多的普羅大眾所 接受，對嗎？ 也許不可能讓網頁在使用所有的流覽器流覽都有一樣的效果，但 儘量地去達到該目的，會讓網頁在這個流覽器下有這樣的特色、在另 一個流覽器下又有不同的特色，這是網頁製作者的工作，不是嗎？ 六、不要濫用留言簿 別誤會，雖然我的個人網頁由於伺服器的問題不能使用留言簿 ( CMS )， 但我絕對不是妒忌！那次在某個網友的網頁上留言，提交之後發現我 的留言和個人的部分資料立即送了上留言網頁，和其他以前的留言一 起展示出來。首先，我的個人資料之所以告訴你是因為想與你交個朋 友，但未經任何提示的情況下就全部擺了上網，好象不是很友善。其 次，更重要的是，我在該留言網頁上發現了某個人的言論似乎很偏激， 有反革命嫌疑———這樣做是很危險的！你的網頁有沒有違法成分你 自己可以控制，但其他訪問者的言論是你所難以估計的，萬一被其他 別有居心的人利用來進行反動宣傳，這樣你豈不成了“同夥”！ 有鑒於此，我奉勸所有使用留言簿的網友，慎之又慎啊！ 七、不要忘記版權 現在，網上的侵犯知識產權問題非常猖獗，某N字頭免費個人網 頁提供商上的網頁尤其嚴重———甚至有盜版光碟販賣呢！為此一些 新的免費網頁設計模板提供商就要求用戶在申請時提交詳細的、真實的個資料，以防備不可預計的事情發生。 不少的網友都很輕視知識產權，覺得自己是個人，大公司不會計 較的。但，《中華人民共和國電腦資訊網路國際聯網安全保護管理 辦法》中第四條規定“任何單位和個人不得利用國際聯網危害國家安 全、洩露國家秘密，不得侵犯國家的、社會的、集體的利益和公民的 合法權益，不得從事違法犯罪活動。”所以，如果你的網頁需要引用 別人的東西的話，要麼你就和他聯繫一下，徵求意見；要麼就在明顯 的位置注明其版權歸屬。這並非多餘，這是你的網頁“長壽”的秘方！ 當然，如果是你自己製作的圖像或自己撰寫的文章，你絕對有權 聲明版權歸你自己所有！ 八、不要懶于更新 某個N字頭的個人電子商務網頁聚居地上有很多的網頁都是很久前建立而至今沒有更新過的，姑且不說這是浪費公用資源的行為，訪問過這些 網頁的人看見網頁主人如此懶惰，你說他還會再去訪問嗎？誰能確定 下次訪問不會又是這般模樣呢？網際網路上的資源如此浩瀚，誰會去訪問一個“從”不更新的網頁呢？ 我誠意地奉勸那些“霸佔”了公用的個人網頁存放地方的人，如 果你們真的那麼忙，為何不讓出空間，給新的網友更多發展的機會呢？

WEB開發學堂：一個大學生的網頁設計生涯

　“從農村到城市，家裏唯一期望就是我，所以我感覺自己壓力很大。” 　　 　　 他困惑，自己看到的和書上的不一樣，感覺自己很無助，很迷失，沒有方向感；他狂喜，年收入6萬元。 　　 　　 “在虛擬的網路中，特別是在自己的網站建設論壇中你隨時可以找到家的感覺，那麼多人都給你祝福，溫情，讚美。” 　　 　　 近在咫尺的成功是現實還是夢境，一個大學生的網頁設計生涯。　　 　　第一步：第一個個人主頁 　　 趙凱出生在河北省保定一個普通的農村家庭，2001年，他以一個並不優異的成績極不情願的邁入了古城南京一所普通的大學，這對於從小就爭強好勝的趙凱來說無疑是一個沉重的精神打擊。趙凱說，自己是在渾渾噩噩的感覺中度過了自己的大一生活。趙凱在大學生學習的電腦應用專業，這個在當時非常時髦的專業或許是唯一的能夠讓他聊以自慰的事情。 　　 　　 雖然趙凱對自己的學校有著種種的不滿，但是趙凱在老師的眼中仍然是一個生活本分的乖孩子，在趙凱邁入自己的第二個年頭的大學生活時，一次由全市舉辦的電腦技能比賽成為了趙凱人生中的第一次轉軌。 　　 　　 “有一天下課老師把我叫住，然後就跟我說現在市里有一個電腦比賽，學校裏希望我能夠代表學校去比賽其中的一個專案，但是我當時想我在班裏的成績並不是很優秀的，怎麼會選擇我去比賽哪？後來老師告訴我，我要參加的那個項目是打字科目的，老師說我的手比較細，而且人穩當，所以選擇了我。”趙凱說，自己都沒有想到，自己真正對電腦的第一次親密接觸竟然是以這樣一種看似掉餡餅的方式砸在自己頭上的。 　　 　　 在全市比賽之前，在學校特許的情況下，趙凱幾乎免除了一切的課程，和幾個同學一起被老師關在機房裏強化集中訓練五筆字型輸入法。而在此之前趙凱僅僅只是在課堂不充裕的時間裏短暫的接觸過電腦。趙凱說自己以前並不能說很喜歡電腦，而這次不得以被趕鴨子上架了。不過這一次趙凱耐心平和的性格再一次幫助了他，趙凱按照老師的安排認認真真的在機房裏苦練了兩個星期之後輸入法的速度已經能夠小組中排名第一。 　　 　　 打字速度給了趙凱很大的信心，雖然當時趙凱甚至連Word這樣普通的辦公軟體的操作都有些陌生，但是手指間飛快的速度讓趙凱前所未有的自信自己能夠學習好電腦。由於每一個參加比賽的小組都需要參加基礎的電腦網路的知識問答和操作，因此在趙凱主攻的打字強項之外，利用集訓練習的空隙時間上網學習網路知識成為了趙凱的另外一項任務，此時Internet的概念對於趙凱腦海中完全是一片空白，網路中世界中的一切對於趙凱來說是如此的新鮮而又新奇的電子商務。 　　 　　 不過正是由於這種好奇＋任務的符合動力讓趙凱打下一個扎實的網路基礎，他很快就瞭解了什麼是WWW，什麼是TCP/IP協議，Outlook的作用，SMTP和POP3的設置等等與網路相關的知識。不過趙凱最好奇的仍然是網路中那些漂亮的網站是如何製作出來的，而老師給趙凱的回答是Word就能夠做網站，於是接下來事情非常順其自然，趙凱有了自己的第一個網頁，一個用Word製作後另存為HTML格式的網頁。雖然這個網頁簡單的有些可憐，但是趙凱還是當作寶貝一樣的放到了自己申請的個人網站空間上，而它每一天都會有一個忠實的訪問者，那就是趙凱自己。 　　第二步：FrontPage到HTML 　　 全市的電腦技能比賽之後，趙凱對網路的已經發生了癡迷的熱愛，此後的日子裏，他幾乎一有時間就往學校的機房鑽。他像擠牙膏一樣的省下來一些生活費購買各種各樣的網路書籍，特別是有關網路製作方面的書籍，趙凱對網路特別是網頁製作方面的濃厚興趣立刻引起了學校一位老師的注意。“這是一位剛剛大學畢業的老師，由於我們年齡基本相仿所以我們之間沒有太多的代溝，而且我們都對網路感興趣，所以就經常在一起聊網路。”趙凱說，遇到這位元老師是他網路人生的第二個轉折。 　　 　　 大二第二個學年正好趕上學校接受上級教育系統的整體教學評估，學校為了準備這次評估專門購置了全新的伺服器，趙凱和那位老師一起摸索著裝配調試成功了伺服器。這一次跟伺服器的親密接觸讓趙凱興奮不已，更加令他想不到的是，學校還給那位老師和他分配了一個新任務，為迎接評估考察團製作一個介紹學校的網站。 　　 　　 趙凱知道這是一個千載難逢的學習機會，但是對於製作網頁剛剛入門的趙凱來說，他很清楚這絕對不是一個輕鬆的任務，而且老師也是剛剛接觸網絡不久，並不能夠在網頁製作方面對趙凱起到一定的指導作用，他們兩個人只能一起在黑暗中摸索。最初的階段，趙凱和老師一直按照網頁Flash製作的教程使用FrontPage這個軟體一頁頁的製作。但是趙凱感覺這樣太慢了，雖然FrontPage這款軟體在操作方面和Word一樣輕鬆，但是往往趙凱花了半天時間做出來的樣子在保存成為HTML網頁之後卻不是自己想要的樣子。 　　 　　 據考察團來參觀的時間越來越近了，趙凱和自己的老師如同熱鍋上的螞蟻一樣著急，而就在這時趙凱發現了Microsoft Office 2000中一個名字叫做Publisher 2000的排版軟體也可以在製作完成效果後另存為HTML檔，而且Publisher 2000的操作非常簡單，你可以把你想調整的圖片放到任何位置，而不必像FrontPage反復的摸索測試再看效果。老師也很快的同意了趙凱使用Publisher 2000製作網頁。 　　 　　 經過通宵達旦的製作，趙凱終於得到了他們想要的網頁效果，不過正當趙凱想和老師慶祝自己的勞動成果時，趙凱突然發現，使用Publisher 2000製作的網頁竟然很多地方都自動變成了整片整片的圖像。此時趙凱才理解了為什麼使用Publisher 2000挪動圖片時那麼輕鬆，因為它完全把網頁的一部分當作了一張大圖片合成了，因為Publisher 2000本身就是做排版的軟體。趙凱說通過這件事情，他下定決心一定要學會如何製作那些精美的網頁。“我一直搞不懂別人很多網頁的特效是如何製作出來的，後來我將網上別人的網頁保存下來，然後使用FrontPage在把這些網頁打開，一頁一頁分析別人的網頁是如何製作的。”通過這種學習方法趙凱學到了自己以前很多不明白的網頁製作方法，例如如何通過控制表格將圖片拆分在拼合。 　　 　　 趙凱說其實最關鍵的是他理解了HTML的真正含義，“我以前一直單純認為HTML是一種檔格式，就如同DOC和EXE一樣，後來同網上看和學習我終於明白了HTML是一種網頁製作的語言，有時候有些想要的效果必須通過HTML根源程式的直接修改才能夠達到想要的效果，而不是單純通過FrontPage修改可以得到的。”修改了兩天之後，學校的網站終於能夠正式啟動了，雖然比預想的的效果要差一些，但是 　　 　　 此後半年的時間趙凱幾乎都在研究HTML和網頁各種製作的方法，“我曾經很長一段時間內不理解為什麼別人製作的網頁的字體可以保持不變形，後來終於搞明白了原來是其中一個尾碼為CSS檔在發揮作用。”隨著趙凱眼界的開闊，他也有FrontPage轉向更加專業的Web Design製作軟體Dreamweaver。 　　 　　 學習Dreamweaver之余，趙凱也不得不面臨另外一個困境，就是他的個人生活問題，由於將附近寄來的生活費都挪作賣書之用了，趙凱的生活開始越來越窘迫，老師看到了趙凱的情況後，向趙凱建議讓他毛遂自薦，去校長那裏接下維護學校網站的活兒，讓學校給他算作勤工儉學，減免他一部分生活費，而且這樣學校還能夠 　　 　　 趙凱說，Dreamweaver與FrontPage有很大的不同，Dreamweaver能夠發揮出更多非常專業的網站建置製作效果，例如層概念等等。“FrontPage是一個非常好的入門網頁製作軟體，它可以很快的讓你理解什麼是超連結，什麼是表格，什麼是框架。而在理解了這些網頁製作的基礎之後，Dreamweaver就是製作出精美網頁的利器了。”也就是在趙凱熟練的掌握了Dreamweaver之後，他認為他已經是一個優秀的網頁設計人員了，這一年他邁入了大學三年級的新階段。 　　 第三步：從編程到藝術 　　 三年級新學年，整天為生活費發愁的趙凱遇到了自己的第一個財神，一家人才公司的老總通過介紹找到了趙凱，他希望趙凱能夠幫助自己設計一個網上人才交流的網站，而籌勞對於趙凱這樣一個學生來說相當具有誘惑力。“設計費＋維護6000元，這對於我來說可是不小的一個數字，足足夠教我一年的學費了，當時我就想，如果我真的整到了這筆錢，家裏的負擔一下子就會減輕許多。”為了證明自己，更為了減輕家裏沉重的負擔，趙凱毫不猶豫的承接了這個網站的製作任務。 　　 　　 在人才市場的任務接下來以後，趙凱很快發現，事情並不象自己原先設想的那麼簡單，這個人才市場的網站根本不可能使用簡單的幾個頁面就可以完成，它需要根據網路人才自薦等一系列的互動網頁支援，能夠後臺管理，更加直白地說，也就是需要動態的網頁設計，例如ASP、CGI等。 　　 　　 ASP即Active Server Page的縮寫。它是一種包含了使用VB Script或Jscript腳本程式碼的網頁。當流覽器流覽ASP網頁時, Web伺服器就會根據請求生成相應的HTML代碼然後再返回給流覽器,這樣流覽器端看到的 就是動態生成的網頁寄存。ASP是微軟公司開發的代替CGI腳本程式的一種應用,它可以與資料庫和其他程式進行交互。是一種簡單、方便的編程工具。在瞭解了VBSCRIPT的基本語法後，只需要清楚各個元件的用途、屬性、方法，就可以輕鬆編寫出自己的ASP系統。ASP的網頁檔的格式是.ASP。 　　 　　 ASP的程式語言與VB很相似，幾乎可以用孿生兄弟來形容。趙凱在大二的時候就學習了VB程式設計的課程，不過趙凱並沒有認真學習VB的課程，他一直認為VB是一種傻瓜編程語言，而且使用VB編寫出的程式需要VB動態連結程式庫的支援才能夠運行，因此趙凱認為VB是一種沒有前途的編程語言，不過現在書到用時方恨少，如果趙凱VB學習的扎實一些，他完全可以順利的過渡到ASP。 　　 　　 “ASP、PHP、CGI的動態網站現如今已經成為了趨勢，一般的中小公司為了維護和更新方面，現如今都會使用動態網站程式，而動態網站排名關鍵的技術就是編程。”不過最後趙凱還是在同.

主機租用與網頁寄存服務比較

我們之前已經介紹過很多有關Web Hosting的資料，這篇文章會說說主機租用和網頁寄存比較之下何差別。

網頁寄存(Web Hosting)

收費比較便宜，適合一般個人網站使用，一般都只會接受使用較少的系統資源的客戶。

網頁寄存服務收費比較便宜是因為一台伺服器有多個客戶在使用，所以成本低，相對下收費也比主機租用低

安全性及穩定性一般也比主機租用服務低，因為同一台伺服器其他的客戶如果使用不當影響了伺服器，你也應該會受到影響。

主機租用服務

收費比較貴，因為一台伺服器只有你一個人使用，所以才稱之為主機租用，也有不少網頁寄存公司會稱之為獨立主機服務。

安全性及穩性也應該是同類型服務中最高的，因為整台伺服器只有你/你公司一個使用者(但可以會運作多個網站或服務)，所以只要你自己不作出令伺服器產生當機的行為、或者不運作危險的代碼，一般也不會發生故障。

兩者的比較及選擇

筆者建議一般使用者選擇網頁寄存服務，可用來運作個人網頁或當作小型的論壇空間；
而較有規模的公司或者網站則建議選擇獨立主機租用服務，可用來作大型論壇寄存之用，或中小企公司網站寄存。