2013年11月29日星期五

每次點擊下一步

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

區塊所產生

我們看到IBM的柵格與MS的有很大的不同,IBM中還出現了一些差不多大的柵格CMS,但是這裏要注意其實這些柵格是由於底部很小的幾個區塊所產生的,並且這凡個區塊還可以看作是一個橫向的區塊。我們從這裏可以看到IBM的佈局設計是對稱的。但是這種對稱卻是在離在縱橫線上卻不容易注意到的。這是很高明的手法。   我們再來看看ASTRO公司網站,這個網站比起上面兩個公司網站就更娛樂化,更有趣了。   從這三個網站排名中我們可以看到三種不同風格的柵格設計,雖然有所不同,但我們依然可以發現三者都會盡可能的把最重要的資訊放在視覺中心點上,不論是放在左邊的還是右邊的或是中間的,他們都得到了最大的柵格區,得到了足夠的重視!我們的視覺中心也自然盯在了上面!   說到這裏我依然覺得沒能把柵格設計的作用講明白。

概括這個詞

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

2013年11月28日星期四

重要元素

鏈結標籤中的href=“URL”這個URL是個非常強大的東西,當然這不是我們這個專欄的內容,但是也非常推薦讀者們可以認真閱讀一下相關的知識。我從百度百科中找到了相關文檔,請大家點擊閱讀(站外鏈結請讀者們選擇新視窗閱讀)。關於鏈結就暫時只講這麼多,如有什麼疑問請通過文後的聯繫資訊與我聯繫或是線上給我留言。 標題幾乎是所有文章都會有的要素,也是我們用以識實與索引文章的重要元素。我們通過標題去感知文章內的核心。那麼你知道嗎?合理使用標題標籤會讓你的文章更受關注。我們都知道XHTML給我們提供了h1~h6,六個標題標籤,那麼我們如何分配這六個標題標籤的使用呢?下面給出一些建議:h1,在流覽器中顯示最大,那麼自然用來表示最大的標題,對於一個網站來說哪個標題才是最大的?是LOGO,我們通常會在網站的最前面先標注這個網站建設的名稱。所以h1就用來放LOGO,當然如果你的網站沒有LOGO,只有一個網站名稱,那也可以。當然振之是不推薦在大家在h1中放個圖片。我們完全可以通過CSS來實現以圖換字。並且推薦網頁中h1只出現一次。

標籤的真面目

我們都知道網頁設計的最大特性是“鏈結”,是的這個在我們現在看起來習以為常的東西,讓我們的生活發生了巨大的變化,是這個小小的標籤成就了這個世界上無數的互聯網天才。那麼讓我們看看這個標籤的真面目: 文本區,就是這個簡單的標籤,其實大家都在使用,用Dreamweaver可以很簡單的添加鏈結。但是儘管如此我們還是需要知道A的屬性是什麼,這樣才能更好的利用它。A是個內聯標籤,也就是說它本身並不會產生分行。他是流于文本之中的無素。那麼我們都知道內聯元素是不能包含塊元素的。那就是說在A中不能包含段落、DIV等這些塊級的元素。那麼你工作中是否有這樣的情況呢?是否在A里加了無數的塊級標籤呢?那從現在開始改掉這個壞習慣,這樣不光可以避免一些沒必要的BUG問題,同時也能給GOOGLE等這些搜索引擎一個好印象,多點印象分。當然除此之外振之還推薦在大傢伙在A中加入titile屬性。例: 文本區。為什麼這麼做呢,我這裏有這樣一篇文章《當標題不能顯示完整的時候》,大家可以看一下,這只是加title屬性其中一個小小的用處,但是作用非常有效。

常用的單位

網頁設計長度單位分為兩種,一種是相對長度,另一種是絕對長度。   以下為三種相對長度單位:   ◆ em 相對于父物件的大小    ◆ ex 相對於特定字體中的字母x的高度    ◆ px 相對於特定設備的解析度,這是最最常用的單位,也是我們一直堅守的單位。從技術角度來說,px圖元其實是一種相對大小的度量單位,它於特定設備的顯示或列印的解析度有關。例如,一個圖元在被顯示在電腦螢幕上與被列印在紙張上的大小是不同的。

2013年11月27日星期三

“拒之站外”

大多數中小型網站都在投放穀歌AdSense廣告,那麼這裏就以該廣告聯盟為例,講解廣告的一些實用優化手法。   適當過濾低價廣告   在Google網站管理介面( CMS ),有一個廣告的eCPM數值,它指的是每一千次展示可以獲得的廣告收入,通常一些氾濫的廣告會造成廣告單價降低,如一些交友、遊戲等類型的廣告,甚至還有一些引誘點擊的廣告等等,這些廣告通常都有一個特點,就是點擊價格非常低。   其實對於一些與自己網站類型不相關的廣告,可以採用過濾的方式將廣告“拒之站外”,要設置過濾的網址,可以在Google廣告的管理後臺進入設置欄目,而後點擊“競爭性廣告篩檢程式”,在顯示的文本框中填寫需要過濾的網站位址即可(圖2)。在保存後的數個小時內,這些位址的廣告就不會再出現了。   讓廣告與內容更加匹配   如果讓流覽者一眼就看出是廣告,這樣點擊率當然會很低。要使點擊率增加,可以讓廣告與網站內容更加匹配電子商務。在穀歌的廣告聯盟中,可以自己設置廣告的樣式,包括廣告大小、色彩搭配等。如讓廣告不帶邊框,直接放置于文章內容中,將廣告底色設置成文章頁面顏色,將廣告文字顏色設置成網站中字體相似的顏色。這樣用戶在訪問網站的時候,就會很容易地注意到廣告內容。   除了頁面設計方面的搭配,在網站內容上,也可以進行適當配合,因為穀歌廣告採用智慧分析技術,通過網站頁面的內容顯示與主題相關的廣告。要是一個頁面的主題過多,就可能造成廣告與內容不相關的現象,這樣一來就會造成廣告無人點擊的後果,這時就可以將網頁與主題對應,一個網頁只有這個主題的內容。另外,諸如在文章列表頁或者網站首頁等頁面放置穀歌廣告,也是不錯的方法。   經常更換廣告位置   無論是對於穀歌廣告還是其他網上廣告,如果廣告總是出現在網頁的同一位置,就會讓訪客很清楚地知道它是廣告,所以導致每次都直接跳過。這樣一來網站的廣告收入當然就會大大降低。   對於這樣的情況,經常更換廣告位置是不錯的選擇,這一方法特別適用於擁有固定訪客的社區類型的網站。不過需要注意的是,在更換廣告位置的時候同樣需要以用戶體驗為主,不要將廣告放置得太過突兀,也不要在一個頁面放置太多的廣告。

採用Cookies的方式讓彈窗

除了點擊廣告以外,在中小型站點中的另一種熱門的廣告類型就是CPS(按銷售付費)廣告了,它是一種按照產品銷售數量來計算廣告費用的廣告。比如類似卓越亞馬遜等圖書類網站排名廣告,就屬於CPS廣告類型的一種,如果用戶通過廣告鏈結進入網站,並且產生了購買行為,就會按照一定的比例支付廣告費用。   這種廣告類型比較適合專業性質的網站,比如書評類型的網站就適合投放圖書類CPS廣告。如果網站投放了與內容並不相關的CPS廣告,則很難讓人產生購買行為,當然就沒有任何廣告收入了。   彈窗廣告 投放也有好技巧   對於大多數個人網站來說,彈窗廣告也是一種不錯的廣告類型,它的優勢是有著穩定的廣告來源,不需要點擊也能夠產生收入。不過彈窗廣告同樣有著劣勢,因為它並非用戶自願點擊,而是自動在用戶流覽網站時彈出,對於用戶的流覽體驗有著一定的影響。   所以我們在投放彈窗廣告時,必須注意的是要選擇廣告類型,不能選擇有低俗內容的廣告。另外彈窗廣告的數量也不宜過多,通常一個到兩個即可。可以採用Cookies的方式讓彈窗針對一個用戶只顯示一次。選用關閉網頁彈出(即退彈廣告)的方式,同樣可以起到很好的效果。   視頻廣告 不宜影響正常流覽   除了大家常見的各類文字或者圖片、Flash類型的網路廣告,目前視頻廣告聯盟也越來越多,這類視頻廣告通常播放視頻推薦的內容,只要播放就能夠產生廣告費用。對於影視等類型的網頁寄存來說,視頻廣告也能極大地豐富網站內容。   不過需要注意的是,由於視頻廣告通常有聲音等元素,很容易對用戶正常流覽網頁造成影響,所以在投放視頻廣告時要結合網站的類型,比如小說類、新聞類型的網站,就不太適合投放視頻廣告。

投放位置最重要

如果已經申請了廣告聯盟並在網站建設上進行了投放,如何提高收益就成了首要問題。不同的廣告類型有不同的廣告優化方法。下面我們就來具體看一看。   一、擺放不同類型廣告有講究   點擊廣告 投放位置最重要   點擊類型的廣告一般稱為CPC(按點擊付費),一般是根據廣告被點擊的次數,廣告聯盟向網站付費。大多數個人server1_A.htm' style='text-decoration:none;' >網站都會投放這種形式的廣告,它的優勢是只要產生點擊就可以獲得收入。   一般來說,網頁設計中熱門的位置才會被用戶關注到,所以在投放點擊廣告時,一個網頁的頭部和文章部分是廣告投放的最佳位置。對於下載類型的網站來說,在下載地址附近則是最佳的點擊廣告投放位。   除了廣告的投放位置以外,廣告的大小也是能否吸引訪客的關鍵,一般的廣告聯盟都有大矩形336×280大小的廣告(圖1),這種形式的廣告一般比其他類型廣告有著更高的點擊率,這樣一來也就能夠獲得更多的廣告收入。不過要注意的是,廣告不能喧賓奪主,不能佔據網頁中的大部分位置,否則會讓訪客降低對網站的好感度。

2013年11月26日星期二

寫點東西

終於能出來透口氣,寫點東西了。前段太忙,也很鬱悶,現在調整過來點了。 我的網頁設計原則就是在滿足需求的前提下,盡可能的簡化,簡化,再簡化。有一次跟一個朋友聊天,他問我作為交互設計師,你的三個原則是什麼?我回答:1.以用戶為中心去設計,讓事情變得簡單化;2. 平衡商業需求與用戶體驗之間的權重;3. 有下游意識,但不干涉下游二次創新。 “用戶體驗是門妥協的藝術”,一邊是複雜的需求輸入,另一邊要做到簡單的產品輸出,這是件既麻煩又頭疼的事。大框架想好了,摳細節的時候,問題就一個接一個的來了。如果內容為空,提交時如何處理?類似這樣細節末端的問題,怎麼啃下來?

開優酷

用什麼工具來學習HTML呢? 還是推薦大學使用Dreamweaver軟件來學習HTML,Dreamweaver所見即所得軟件是最好的HTML編輯器,全可以一點不懂HTML的知識就可以做出網頁。 如何學習HTML語言呢? 1:一定要多動手,多多修改別人的網頁代碼。(在效果頁上單擊右鍵選擇“查看源文件”即可查看實現該效果的代碼。) 2:記住一些常用的HTML語法。當時盧松松學習HTML的時候只記了一些HTML網頁設計時的常用語法, 如: 貼圖:加入連接:寫上你想寫的字 推薦HTML詳細教程學習地址: 2:HTML視頻教程http://v.youku.com/v_show/id_XMzM0MzM3ODQ=.html(當你點開優酷的時候,你能保證只看教程不看電影嗎?) 總結:Html至今仍是製作網頁時必不可少的代碼。如果能夠熟悉掌握並應用這些代碼,大到做網站,小到博客論壇等都會有莫大的好處。 其實相信大多數人都對HTML已經非常熟悉了,學過HTML的再看一次也許能知道新的東西。沒學過HTML的,看看這篇文章應該能快速掌握要領吧.

拿來主義

學會HTML語言的好處是什麼? 1:很輕鬆的修改你的網站、博客的網頁結構。 2:對SEO網站優化很有用處。 3:拿來主義,通過保存其他網站頁面源代碼,適當的修改,可以仿製出你想要的模板。 4:當你有一張漂亮的PSD源文件圖片時,你可以很輕易的把圖片切割製作成網頁。 5:無論是PHP、ASP、.NET、JSP等網站編程語言,都要用到HTML。 6:可以輕鬆檢測出網站是否中了網頁木馬.和預防網頁木馬。 7:可以向更高一層次進階:DIV+CSS網頁設計。 8:看完這篇文章,接下來就可以修改本站提供的模板了。

2013年11月21日星期四

筆者自認為成長過程

筆者曾經是一個網頁設計的菜鳥,經過自己不斷的摸索和實踐,現在已經可以獨立製作一個完整的靜態站點建設,並且給學校的NN>5 個部門、院系和外面的公司網站,雖然不是一個完全意義上的Web Designer(網頁設計師),但是完成一些要求不是很專業、不是十分完美的站點已經是小事兒了(嘿嘿,是不是有自吹自擂之嫌),自己心裏已經是小有成就感了,所以自封為准Web Designer! 筆者自認為成長過程還算快,所以把本人的經歷向大家介紹一下,給那些有志于此的朋友們一些參考意見。

普通字體

---- 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置標進行擴充,使網站建設充滿活力,顯示出更加完美的效果。

有限且語句

多層模式表單(Cascading Style Sheet, CSS)是一種為超文本置標語言(HyperText Markup Language, HTML)提供增強補充服務的技術,可對每一個HTML的置標(tag)做精雕細刻的修飾。   只用HTML製作的Web Design,對頁面內各部分的修飾能力有限且語句煩鎖,CSS正是彌補這一缺陷的有力技術,它語句、文法簡單,只要在源碼中插入STYLE語句就可輕易實現頁面內任意文本顏色、背景、邊框、行距、字距的添刪和修飾等功能,使網頁更加生動活潑,從而獲得滿意的效果。

2013年11月20日星期三

內容都設定為0

插入表格後,還需對表格內容進行設定。在“表格內容”項中設定該表格所需的內容。   提示:在設定表格時,如果要想覆蓋Web Design的預設邊距,並讓佈局表格跨到文檔視窗的邊緣,可以將表格中的各個邊距的內容都設定為0。   在設計框架時經常需要調整某一行或列的內容,這時可以通過表格中列寬和行高的標籤來完成。在操作視窗中單擊佈局表格需要調整的邊框,每一側都會出現顯示列寬和行高的標籤。每個標籤都包括一個下拉箭頭,如更改行高度時,單擊此下拉箭頭彈出一個下拉功能表,選擇“更改行高”命令,在彈出的“行內容”對話方塊中重新輸入該行高度值即可。   FrontPage2003還提供了一個表格自動功能,它可以按照比例自動伸縮,調整表格的寬度和高度,使用時在邊距標籤下拉功能表中選擇“自動伸縮”命令即可快速地對表格的尺寸進行調整,非常方便。

任務視窗

打開一個空白網頁設計,並切換到“設計”視圖下,單擊“表格”功能表中的“佈局表格和單格”命令,隨後在右側彈出一個任務視窗(圖1),在該任務視窗下面程式提供了多種表格佈局範本,在此單擊其中需要的範本即可將該範本添加到網頁中。

FrontPage2003

很多朋友對FrontPage2003中增加的網頁設計佈局功能很感興趣,現在我們一起來深入瞭解這一實用功能。   用FrontPage2003的“佈局表格和單格”功能佈局Web Design時,需要通過兩部分來完成。   首先通過“佈局表格”功能來為網頁佈局創建一個框架,然後通過“佈局單格”功能為該框架填充包含有網頁內容(包括文本、圖像、Web部件和其他元素)的區域,也就是單格。   下麵我們就以設定一個單位網站首頁為例來瞭解一下用佈局表格給網頁佈局的過程。

2013年11月19日星期二

“剪刀”的視覺形象

例如在人的知識和概念架構中,網站建設在紙質文稿上寫字和在電腦上寫字都屬於撰寫文檔的類別,那麼當“在文稿上打×”的圖示形象出現時,被試就會快速地聯想到在電腦上進行剪切操作。而“剪刀”的視覺形象最易歸屬到“衣服裁剪”或“手工勞動”這樣的類別中去,因此映射關係具有教長的路徑和較弱的連結強度。因此在圖示設計中,設計師應該仔細考慮或者直接去調查用戶的知識體系,找到最短的概念連結。

啟動擴散模型

 “直接”的意思是:不要繞彎。圖示展現的視覺表像與其背後的意義只需要很短的意義路徑即可網頁寄存連結。譬如對於“剪切”操作,使用“在文稿上打×”的圖示形象比“剪刀”的圖示形象更易理解,因為前者與剪切操作有更短的意義路徑,儘管“剪刀”圖示顯得更加生動活潑。   認知心理學家提出過一個啟動擴散模型,就是在人的知識和概念體系中,當一個概念被加工或受到刺激時,該概念結點就產生啟動,然後啟動與該結點直接相連的多個連結,並繼續向四周擴散。與當前概念在概念網路上的連結關係決定了其被啟動的強度。這種連結關係取決於人的知識體系的組織架構(即兩個概念是否屬於同一類別)和概念同時出現或使用的頻率。

更長的時間去猜測圖

可能與我們的直覺相反,一些研究顯示圖示介面與文本介面的比較中,CMS並沒有體現出明顯的優越性,一個主要原因就是文字和意義的映射是直接的,而圖示與意義的映射卻不一定是直接和明顯的。   在壞的圖示設計中,用戶需要花費幾秒鐘甚至更長的時間去猜測圖示代表的意義,而且還很可能猜錯,錯誤的理解導致錯誤的操作,錯誤的操作導致糟糕的結果,這決不是美妙的用戶體驗,即便從美學角度講那個圖示可能是上佳的藝術作品。 

2013年11月18日星期一

一個章節或全文大意

如果將底圖插入文字中,會令人感到融洽、自然。 文字的強調 1.行首的強調 將正文的第一個字或字母放大並作裝飾性處理,嵌入段落的開頭,這在傳統媒體版式設計中稱之為“下墜式”。此技巧的發明溯源於歐洲中世紀的文稿抄寫員。由於它有吸引視線、裝飾和活躍版面的作用,所以被應用於網頁的文字編排中。其下墜幅度應跨越一個網上商店完整字行的上下幅度。至於放大多少,則依據所處網頁環境而定。 2.引文的強調 在進行網頁文字編排時,常常會碰到提綱挈領性的文字,即引文。引文概括一個段落、一個章節或全文大意,因此在編排上應給予特殊的頁面位置和空間來強調。引文的編排方式多種多樣,如將引文嵌入正文的左右側、上方、下方或中心位置等,並且可以在字體或字型大小上與正文相區別而產生變化。 3.個別文字的強調 如果將個別文字作為頁面的訴求重點,則可以通過加粗、加框、加下劃線、加指示性符號、傾斜字體等手段有意識地強化文字的視覺效果,使其在頁面整體中顯得出眾而奪目。另外,改變某些文字的顏色,也可以使這部分文字得到強調。這些方法實際上都是運用了對比的法則。 文字的顏色 在網頁設計中,設計者可以為文字、文字鏈結、已訪問鏈結和當前活動鏈結選用各種顏色。例如,如果你使用FrontPage編輯器,默認的設置是這樣的:正常字體顏色為黑色,默認的鏈結顏色為藍色,滑鼠點擊之後又變為紫紅色。使用不同顏色的文字可以使想要強網站排名調的部分更加引人注目,但應該注意的是,對於文字的顏色,只可少量運用,如果什麼都想強調,其實是什麼都沒有強調。況且,在一個頁面上運用過多的顏色,會影響流覽者閱讀頁面內容,除非你有特殊的設計目的。 顏色的運用除了能夠起到強調整體文字中特殊部分的作用之外,對於整個文案的情感表達也會產生影響。這涉及色彩的情感象徵性問題,限於篇幅,在這裏不做深入探討。 另外需要注意的是文字顏色的對比度,它包括明度上的對比、純度上的對比以及冷暖的對比。這些不僅對文字的可讀性發生作用,更重要的是,你可以通過對顏色的運用實現想要的設計效果、設計情感和設計思想。

閱讀時的習慣

1.文字的圖形化 字體具有兩方面的作用:一是實現字意與語義的功能,二是美學效應。所謂文字的圖形化,即是強調它的美學效應,把記號性的文字作為圖形元素來表現,同時又強化了原有的功能。作為網頁設計者,既可以按照常規的方式來設置字體,也可以對字體進行藝術化的設計。無論怎樣,一切都應圍繞如何更出色地實現自己的設計目標。 將文字圖形化、意象化,以更富創意的形式表達出深層的設計思想,能夠克服網頁的單調與平淡,從而打動人心。 2.文字的疊置 文字與圖像之間或文字與文字之間在經過疊置後,能夠產生空間感、跳躍感、透明感、雜音感和敍事感,從而成為頁面中活躍的、令人注目的元素。雖然電郵服務疊置手法影響了文字的可讀性,但是能造成頁面獨特的視覺效果。這種不追求易讀,而刻意追求“雜音”的表現手法,體現了一種藝術思潮。因而,它不僅大量運用于傳統的版式設計,在網頁設計中也被廣泛採用。 3.標題與正文 在進行標題與正文的編排時,可先考慮將正文作雙欄、三欄或四欄的編排,再進行標題的置入。將正文分欄,是為了求取頁面的空間與彈性,避免通欄的呆板以及標題插入方式的單一性。標題雖是整段或整篇文章的標題,但不一定千篇一律地置於段首之上。可作居中、橫向、豎向或邊置等編排處理,甚至可以直接插入字群中,以新穎的版式來打破舊有的規律。 4.文字編排的四種基本形式 頁面裏的正文部分是由許多單個文字經過編排組成的群體,要充分發揮這個群體形狀在版面整體佈局中的作用。 兩端均齊:文字從左端到右端的長度均齊,字群形成方方正正的面,顯得電子商務端正、嚴謹、美觀。 居中排列:在字距相等的情況下,以頁面中心為軸線排列,這種編排方式使文字更加突出,產生對稱的形式美感。 左對齊或右對齊:左對齊或右對齊使行首或行尾自然形成一條清晰的垂直線,很容易與圖形配合。這種編排方式有松有緊,有虛有實,跳動而飄逸,產生節奏與韻律的形式美感。左對齊符合人們閱讀時的習慣,顯得自然;右對齊因不太符合閱讀習慣而較少採用,但顯得新穎。 繞圖排列:將文字繞圖形邊緣排列。

初學者而言

如今,互聯網越來越走近我們的生活,飆網也漸漸成為我們生活不可缺少的一部分。網路世界五彩繽紛,湧現出大量優秀精美的網頁設計。大量網路資訊的呈現,無非就是通過文本、圖像、Flash動畫等,其中, 文本是網頁中最為重要的設計元素。對於Web Design初學者而言,瞭解和掌握網頁設計中的文字排版設計就顯得尤為重要,下面筆者想談談一己之見。 文字的格式化 1.字型大小、字體、行距 字型大小大小可以用不同的方式來計算,例如磅#quotel.quoter#或圖元(Pixel)。因為以圖元技術為基礎單位列印時需要轉換為磅,所以,建議採用磅為單位。 最適合於網頁正文顯示的字體大小為12磅左右,現在很多的綜合性站點,由於在一個頁面中需要安排的內容較多,通常採用9磅的字型大小。較大的字體可用於標題或其他需要強調的地方,小一些的字體可以用於頁腳和輔助資訊。需要注意的是,小字型大小容易產生整體感和精緻感,但可讀性較差。 網頁建設者可以用字體來更充分地體現設計中要表達的情感。字體選擇是一種感性、直觀的行為。但是,無論選擇什麼字體,都要依據網頁的總體設想和流覽者的需要。例如:粗體字強壯有力,有男性特點,適合機械、建築業等內容;細體字高雅細緻,有女性特點,更適合服裝、化妝品、食品等行業的內容。在同一頁面中,字體種類少,版面雅致,有穩定感;字體種類多,則版面活躍,豐富多彩。關鍵是如何根據頁面內容來掌握這個比例關係。 從加強平臺無關性的角度來考慮,正文內容最好採用缺省字體。因為流覽器是用本地機器上的字形檔顯示頁面內容的。作為網頁設計者必( CMS )須考慮到大多數流覽者的機器裏只裝有三種字體類型及一些相應的特定字體。而你指定的字體在流覽者的機器裏並不一定能夠找到,這給網頁設計帶來很大的局限。解決問題的辦法是:在確有必要使用特殊字體的地方,可以將文字製成圖像,然後插入頁面中。 行距的變化也會對文本的可讀性產生很大影響。一般情況下,接近字體尺寸的行距設置比較適合正文。網頁寄存行距的常規比例為10:12,即用字10點,則行距12點。這主要是出於以下考慮:適當的行距會形成一條明顯的水平空白帶,以引導流覽者的目光,而行距過寬會使一行文字失去較好的延續性。 除了對於可讀性的影響,行距本身也是具有很強表現力的設計語言,為了加強版式的裝飾效果,可以有意識地加寬或縮窄行距,體現獨特的審美意趣。例如,加寬行距可以體現輕鬆、舒展的情緒,應用於娛樂性、抒情性的內容恰如其分。另外,通過精心安排,使寬、窄行距並存,可增強版面的空間層次與彈性,表現出獨到的匠心。 行距可以用行高(line-height)屬性來設置,建議以磅或默認行高的百分數為單位。例如:{line-height:20pt}、{line-height:150%}。 文字的整體編排 頁面裏的正文部分是由許多單個文字經過編排組成的群體,要充分發揮這個群體形狀在版面整體佈局中的作用。從藝術的角度可以將字體本身看成是一種藝術形式,它在個性和情感方面對人們有著很大影響。在網頁設計中,字體的處理與顏色、版式、網路行銷圖形等其他設計元素的處理一樣非常關鍵。從某種意義上來講,所有的設計元素都可以理解為圖形。

2013年11月17日星期日

全文大意

如今,互聯網越來越走近我們的生活,飆網也漸漸成為我們生活不可缺少的一部分。網路世界五彩繽紛,湧現出大量優秀精美的網頁設計。大量網路資訊的呈現,無非就是通過文本、圖像、Flash動畫等,其中, 文本是網頁中最為重要的設計元素。對於Web Design初學者而言,瞭解和掌握網頁設計中的文字排版設計就顯得尤為重要,下面筆者想談談一己之見。 文字的格式化 1.字型大小、字體、行距 字型大小大小可以用不同的方式來計算,例如磅#quotel.quoter#或圖元(Pixel)。因為以圖元技術為基礎單位列印時需要轉換為磅,所以,建議採用磅為單位。 最適合於網頁正文顯示的字體大小為12磅左右,現在很多的綜合性站點,由於在一個頁面中需要安排的內容較多,通常採用9磅的字型大小。較大的字體可用於標題或其他需要強調的地方,小一些的字體可以用於頁腳和輔助資訊。需要注意的是,小字型大小容易產生整體感和精緻感,但可讀性較差。 網頁建設者可以用字體來更充分地體現設計中要表達的情感。字體選擇是一種感性、直觀的行為。但是,無論選擇什麼字體,都要依據網頁的總體設想和流覽者的需要。例如:粗體字強壯有力,有男性特點,適合機械、建築業等內容;細體字高雅細緻,有女性特點,更適合服裝、化妝品、食品等行業的內容。在同一頁面中,字體種類少,版面雅致,有穩定感;字體種類多,則版面活躍,豐富多彩。關鍵是如何根據頁面內容來掌握這個比例關係。 從加強平臺無關性的角度來考慮,正文內容最好採用缺省字體。因為流覽器是用本地機器上的字形檔顯示頁面內容的。作為網頁設計者必( CMS )須考慮到大多數流覽者的機器裏只裝有三種字體類型及一些相應的特定字體。而你指定的字體在流覽者的機器裏並不一定能夠找到,這給網頁設計帶來很大的局限。解決問題的辦法是:在確有必要使用特殊字體的地方,可以將文字製成圖像,然後插入頁面中。 行距的變化也會對文本的可讀性產生很大影響。一般情況下,接近字體尺寸的行距設置比較適合正文。網頁寄存行距的常規比例為10:12,即用字10點,則行距12點。這主要是出於以下考慮:適當的行距會形成一條明顯的水平空白帶,以引導流覽者的目光,而行距過寬會使一行文字失去較好的延續性。 除了對於可讀性的影響,行距本身也是具有很強表現力的設計語言,為了加強版式的裝飾效果,可以有意識地加寬或縮窄行距,體現獨特的審美意趣。例如,加寬行距可以體現輕鬆、舒展的情緒,應用於娛樂性、抒情性的內容恰如其分。另外,通過精心安排,使寬、窄行距並存,可增強版面的空間層次與彈性,表現出獨到的匠心。 行距可以用行高(line-height)屬性來設置,建議以磅或默認行高的百分數為單位。例如:{line-height:20pt}、{line-height:150%}。 文字的整體編排 頁面裏的正文部分是由許多單個文字經過編排組成的群體,要充分發揮這個群體形狀在版面整體佈局中的作用。從藝術的角度可以將字體本身看成是一種藝術形式,它在個性和情感方面對人們有著很大影響。在網頁設計中,字體的處理與顏色、版式、網路行銷圖形等其他設計元素的處理一樣非常關鍵。從某種意義上來講,所有的設計元素都可以理解為圖形。 1.文字的圖形化 字體具有兩方面的作用:一是實現字意與語義的功能,二是美學效應。所謂文字的圖形化,即是強調它的美學效應,把記號性的文字作為圖形元素來表現,同時又強化了原有的功能。作為網頁設計者,既可以按照常規的方式來設置字體,也可以對字體進行藝術化的設計。無論怎樣,一切都應圍繞如何更出色地實現自己的設計目標。 將文字圖形化、意象化,以更富創意的形式表達出深層的設計思想,能夠克服網頁的單調與平淡,從而打動人心。 2.文字的疊置 文字與圖像之間或文字與文字之間在經過疊置後,能夠產生空間感、跳躍感、透明感、雜音感和敍事感,從而成為頁面中活躍的、令人注目的元素。雖然電郵服務疊置手法影響了文字的可讀性,但是能造成頁面獨特的視覺效果。這種不追求易讀,而刻意追求“雜音”的表現手法,體現了一種藝術思潮。因而,它不僅大量運用于傳統的版式設計,在網頁設計中也被廣泛採用。 3.標題與正文 在進行標題與正文的編排時,可先考慮將正文作雙欄、三欄或四欄的編排,再進行標題的置入。將正文分欄,是為了求取頁面的空間與彈性,避免通欄的呆板以及標題插入方式的單一性。標題雖是整段或整篇文章的標題,但不一定千篇一律地置於段首之上。可作居中、橫向、豎向或邊置等編排處理,甚至可以直接插入字群中,以新穎的版式來打破舊有的規律。 4.文字編排的四種基本形式 頁面裏的正文部分是由許多單個文字經過編排組成的群體,要充分發揮這個群體形狀在版面整體佈局中的作用。 兩端均齊:文字從左端到右端的長度均齊,字群形成方方正正的面,顯得電子商務端正、嚴謹、美觀。 居中排列:在字距相等的情況下,以頁面中心為軸線排列,這種編排方式使文字更加突出,產生對稱的形式美感。 左對齊或右對齊:左對齊或右對齊使行首或行尾自然形成一條清晰的垂直線,很容易與圖形配合。這種編排方式有松有緊,有虛有實,跳動而飄逸,產生節奏與韻律的形式美感。左對齊符合人們閱讀時的習慣,顯得自然;右對齊因不太符合閱讀習慣而較少採用,但顯得新穎。 繞圖排列:將文字繞圖形邊緣排列。如果將底圖插入文字中,會令人感到融洽、自然。 文字的強調 1.行首的強調 將正文的第一個字或字母放大並作裝飾性處理,嵌入段落的開頭,這在傳統媒體版式設計中稱之為“下墜式”。此技巧的發明溯源於歐洲中世紀的文稿抄寫員。由於它有吸引視線、裝飾和活躍版面的作用,所以被應用於網頁的文字編排中。其下墜幅度應跨越一個網上商店完整字行的上下幅度。至於放大多少,則依據所處網頁環境而定。 2.引文的強調 在進行網頁文字編排時,常常會碰到提綱挈領性的文字,即引文。引文概括一個段落、一個章節或全文大意,因此在編排上應給予特殊的頁面位置和空間來強調。引文的編排方式多種多樣,如將引文嵌入正文的左右側、上方、下方或中心位置等,並且可以在字體或字型大小上與正文相區別而產生變化。 3.個別文字的強調 如果將個別文字作為頁面的訴求重點,則可以通過加粗、加框、加下劃線、加指示性符號、傾斜字體等手段有意識地強化文字的視覺效果,使其在頁面整體中顯得出眾而奪目。另外,改變某些文字的顏色,也可以使這部分文字得到強調。這些方法實際上都是運用了對比的法則。 文字的顏色 在網頁設計中,設計者可以為文字、文字鏈結、已訪問鏈結和當前活動鏈結選用各種顏色。例如,如果你使用FrontPage編輯器,默認的設置是這樣的:正常字體顏色為黑色,默認的鏈結顏色為藍色,滑鼠點擊之後又變為紫紅色。使用不同顏色的文字可以使想要強網站排名調的部分更加引人注目,但應該注意的是,對於文字的顏色,只可少量運用,如果什麼都想強調,其實是什麼都沒有強調。況且,在一個頁面上運用過多的顏色,會影響流覽者閱讀頁面內容,除非你有特殊的設計目的。 顏色的運用除了能夠起到強調整體文字中特殊部分的作用之外,對於整個文案的情感表達也會產生影響。這涉及色彩的情感象徵性問題,限於篇幅,在這裏不做深入探討。 另外需要注意的是文字顏色的對比度,它包括明度上的對比、純度上的對比以及冷暖的對比。這些不僅對文字的可讀性發生作用,更重要的是,你可以通過對顏色的運用實現想要的設計效果、設計情感和設計思想。

消息轉移

根據Macromedia 頂級Flash製作設計者,開發者以及可用性專家的建議,我們收集了創建一個具備可用性的Macromedia Flash站點的十大技巧。    這些技巧只是一個開始,我們將繼續提供更多的研究,學習與技巧。 1.記住用戶的目標   用戶往往帶著目的訪問一個站點的網頁設計,每個鏈結,每次點擊都要合乎他們的經驗並且引導他們通向他們的目標。當傳輸你的頁面時,應該讓關鍵的導航鏈結首先裝載——萬一用戶想轉到網站其他的區域。模仿通常的用戶圖形介面往往可以增加可用性。   2. 記住網站的目的   網站建設應該反應商業或者客戶的需求,有效的傳播主要資訊與促進品牌。然而網站的目標最好通過尊重用戶的習慣來達到,所以站點結構必須滿足用戶的需要,快速的將用戶引導至其目標而避免任何公司和區域行話。 3. 避免沒有必要的介紹   雖然介紹的動畫非常精彩,但是它們往往延誤了用戶訪問他們正在尋找的資訊。應該經常提供給用戶一個忽略介紹的命令或者訪問你的電子商務主頁的選擇,當他們第二次訪問您的主頁時,對所有的用戶都應該忽略簡介動畫(使用用戶端的javascript來完成這個功能),然後在目標頁面提供返回到動畫頁面的選擇。   4. 提供合乎邏輯的導航與交互   • 保證用戶的導航: 顯示用戶訪問過的上一個位址和他即將訪問的下一個位址. 通過鏈結的不同顏色在用戶訪問後提醒他們訪問過的頁面Web Design.    • 提供用戶一個輕鬆跳出他們正在訪問的部分回到出發點的的鏈結.    • 明確說明每個鏈結的位置. 保證鏈結的結構和命名法的可視性,而不是隱藏它們直到用戶觸發了某個事件(比如滑鼠移近).    • 確保按鈕定義了足夠好的反應區域.    • 利用Flash流的特性首先裝載主要的導航元素.    • 確保導航的後退按鈕. 為了做到這一點可以使用流覽器內置的前進和後退導航系統,將Flash影片邏輯的分成幾塊並置於獨立的HTML頁面中. 做為一種選擇, 為影片建立一個基於Flash的後退按鈕以便用戶可以利用它後退到一個包含上一個訪問頁面的場景或楨.   5. 設計的連貫性   提高您的站點網站排名性能的最好方法是用戶介面的一致性. 元素結構的再使用,元素的設計以及命名的習慣將使用戶在導向他們的目標時對站點傳達的資訊的注意力更加豐富, 而且這也有利於站點的維護. 你可以在整個站點中使用小影片(Smart Clip)來重複使用交互元素, 還可以讓最初導航系統的文字和圖片在目標頁面中重新使用.   6. 不要過度使用動畫   避免不必要的動畫. 最好的動畫應該是可以增加站點的設計目標的動畫, 在導航的時候講述一個故事或者有幫助的事情. 在包含大量文字的頁面使用重複的動畫將使視線從消息轉移.   7. 慎重使用聲音   聲音可以為你的站點錦上添花但是絕對不是必要的. 例如:使用聲音來說明用戶剛剛觸發了一個時間. 確保使用了聲音的開關與音量調節方法, 並且要記住聲音會顯著的增加檔案的大小. 當你確實使用了聲音的時候,Macromedia Flash會將聲音轉換為MP3檔案甚至流媒體化網頁寄存.   8. 面向低帶寬的用戶   越少的下載越好. 初始的下載頁面大小不能超過40K, 包括所有Macromedia檔案,圖像和HTML檔案. 為了減少下載時間, 使用向量圖形(除非圖像使壓縮過的BMP, 那樣最好仍保持為BMP格式), 並且只有在用戶確定的要用到某個檔案時才使用Load Movie動作. 如果用戶必須等待, 提供一個裝載的時間序列與進度條, 只要可能,必須在前5秒內裝載導航系統.   9. 設計的易用性   確保你的站點的內容能被所有的用戶閱讀, 包括那些殘疾用戶. 高度使用ALT標籤可以確保網站建置內容能被輔助工具解釋. 影片的可縮放性是讓更多用戶瞭解網站內容的另一項易用的Macromedia特色. 如果需要一個徹底的Macromedia Flash內容可用性的討論,請登陸Macromedia Flash可用性網站.   10. 可用性測試   讓一些新手來訪問站點網路行銷並同時完成用戶目標與站點目標. 甚至簡短的Macromedia Flash動畫都有可能阻擋用戶實現目標, 所以使用Macromedia Flash的帶寬模擬器(Bandwidth Profiler——譯者注)(在視圖功能表的測試影片模式下)來分析站點在不同帶寬模式下的性能.每次 重複測試影片哪怕是很小的改動. 確保站點的測試者從人口統計學上合乎站點的預定用戶—特別是預定用戶中有對站點的導航有不同級別的滿意程度.

只要20天

筆者曾經是一個網頁設計的菜鳥,經過自己不斷的摸索和實踐,現在已經可以獨立製作一個完整的靜態站點建設,並且給學校的NN>5 個部門、院系和外面的公司網站,雖然不是一個完全意義上的Web Designer(網頁設計師),但是完成一些要求不是很專業、不是十分完美的站點已經是小事兒了(嘿嘿,是不是有自吹自擂之嫌),自己心裏已經是小有成就感了,所以自封為准Web Designer! 筆者自認為成長過程還算快,所以把本人的經歷向大家介紹一下,給那些有志于此的朋友們一些參考意見。 循序漸進學知識 先學一學HTML,找本自己能看懂的教材,流覽為主,不用記住所有的概念,只要記住使用原理就行了,這一階段,估計三天就夠了;然後用兩天時間學CSS,方法同上;進而再花些時間瞭解一下JavaScript。 然後就可以用記事本嘗試寫幾個網上商店,記住這時千萬不要用那些視覺化工具,比如FrontPage、Deamweaver(那些以後再學)。 有一個提高自己“寫網頁”的捷徑,就是上各大網站,把網頁保存下來(什麼?你說你不會保存網頁?就是“檔→另存為”),然後打開保存下來的網頁 CMS,點擊右鍵→查看原始檔案,看看人家的網頁是怎麼寫的,然後模仿他們的寫法,不斷規範自己的代碼。嘿嘿,這個方法不錯吧。先好好模仿一下吧。 接下來該學一下Fireworks了。建議一開始就到網上找些實例教程,這些實例教程一般都介紹得很詳細,跟著它一步一步做下來,每學會一個實例就掌握了幾項操作,而且也有了自己的作品,很有成就感的,長期積累下來對自己的提高很有幫助。學Fireworks主要是學圖片處理,比如加一些效果,還有很重要的就是切圖,這對於初學者是很重要的。 這時還可以結合Dreamweaver進行學習,你就可以體會到Dreamweaver和Fireworks的無縫集成了。利用這些工具多做幾個網頁,你就可以達到一定水準了。 要是想讓你的網頁多一些炫目的效果,建議你學一下Flash,電子商務難度並不大,而且要是前面的JavaScript基礎打得好的話,學到Flash中ActionScript時,你會有一種似曾相識的感覺,因為這兩種語法幾乎是一模一樣的。 到這時,相信你就可以真正領會到“網頁三劍客"的威力了 。 在實踐中不斷提高 要是每天能拿出兩個小時來學習網路行銷,完成以上這些學習估計只要20天就差不多了。要是天賦高的話(比如說像我這樣的,呵呵),那需要的時間就更少了。接下來該實習了,找個地方鍛煉一下自己,比如可以去一些公司幹幹兼職,或是給自己的單位設計一下主頁等。 最好是能進入一個正規的開發團隊,你就會學會如何以團隊合作的方式開發網站,特別是怎樣和程式組合作,把頁面與後臺程式資料庫配合起來。可能你會擔心自己是新手,人家會嫌棄你,沒關係,只要努力去找,總會有機會的。 我特別感謝我們學校的學生線上網站給了我一個機會。有一天正趕上應聘,我拿著自己做的兩個Flash作品就去了,沒想到面試還通過了,於是我就這樣有了在專業開發團隊中實踐的機會,通過自己的不斷努力以及向高手的不斷提問,水準飛快提高,兩三個月後,就可以獨立完成一些站點了,當然只是靜態電郵服務的。在此,我想指出,千萬不要不好意思,不會就問,高手們是很樂意回答你的,而且你能向他請教,這本來就是對他的一種肯定,他會很高興的,呵呵。 到此,你就基本可以稱作是一個“准Web Designer”了,不過要從根本上提高自己,最好去學學美術,這是當一個server.htm' style='text-decoration:none;' >網頁server3.htm' style='text-decoration:none;' >設計師的基本功。 筆者剛開始做網頁純粹是自娛自樂,但在這個過程中,我逐漸開始深深喜歡上了這項工作。這個學習過程是人生的一筆寶貴財富,至少我是這麼認為的。

2013年11月15日星期五

目標客戶

在傳統的市場推廣活動裡面, 接觸到的網上客戶對象很多時候都不是目標客戶. 舉個例子, 當一本雜誌宣傳最新型號的 Lexus , 其實很多閱讀該雜誌的讀者都沒有駕駛執照. 當然傳統的 做法有它的效益, 這兒我們只是想突出ZOAP SEO優化網站網上推廣的目標客戶的比率非常高, 因為是客戶主動來找你. 讓ZOAP SEO服務重申, 每一個點擊都是免費的,而我們會幫客人找尋 合式的關鍵字,和提升有關網站或網上商店的生意!

搜索引擎

或許曾經點擊過多少次banner ads或電郵廣告? 現時已經很少了.   但現在有100%網民每天都要會花18小時每上搜索引擎如Yahoo或Google 來進行搜索 網站? 在過去人們花了很多的時間來尋找他們的目標客戶, 可是我們已經來到了一個不同的年代! 現 在開始讓網上的客人主動來找你吧!

想想

現在最有效的網上宣傳是,公司網站能出現在搜索引擎中, 例如Yahoo和Google的自然搜 索結果前十名.你可以透過ZOAP的 SEO (搜尋引擎優化) 做得到! 在搜尋引擎中自然排名意味 著每一個進入你網站的點擊都是免費的! 想想, 他們都是對你的公司產品或服務有興趣的目標 客戶. 透過ZOAP的網頁設計Web Design,網站優化的SEO技術和E-Marketing電子商務顧問 服務可以為你的公司網站提高在搜索引擎如 Google 和 Yahoo中自然的網絡上排名. 這種服 務並不同其他廣告, 搜索引擎的顧客對客觀的自然網上排名更加有信心.

2013年11月14日星期四

抓住用戶

網站中有哪些關鍵技巧?有哪些陷阱?在這裏,世界上一流的網站設計專家,讓你共用他們的秘密,告訴你:使Web Design賦予情趣的訣竅、應該避免做什麼、應使用什麼工具軟體以及他們喜愛和厭惡的網站。 01 明確內容 如果你想成為一個網站設計者,並正想建一個網站的話,首先應該考慮網站的內容,包括網站功能和你的用戶需要什麼。你的整個設計都應該圍繞這些方面來進行。 02 抓住用戶 如果用戶不能夠迅速地進入你的網站,或操作不便捷,網站建設就是失敗的。不要讓用戶失望而轉向你的對手的網站。 03 優化內容 內容是核心。大約在兩年以前,企業網站就像一本廣告冊子,更槽糕的是,網站使用了大量的圖片,似乎要幾個世紀才能下載完。 04 快速下載 沒有什麼比要花很長時間下載頁面更槽糕的了。作為一條經驗,一個標準的網頁應不大於60K,通過56K數據機載入花30秒的時間。有的設計者說網頁載入應在15秒內。 05 網站升級 時刻注意網頁設計模板的運行狀況。性能很好的主機隨著訪問人數的增加,可能會運行緩慢。但是,如果你不想失去訪問者的話,一定要仔細計畫好你的升級計畫。

基本身份驗證

症狀舉例:   HTTP 錯誤 404 - 檔或目錄未找到。   原因分析:   在網頁設計模板中新增了web程式擴展這一選項,你可以在其中對ASP、ASP.NET、CGI、IDC等程式進行允許或禁止,默認情況下ASP等程式是禁止的。   解決方法:   在IIS中的Web服務擴展中選中Active Server Pages,點擊“允許”。   問題3:身份認證配置不當   症狀舉例:   HTTP 錯誤 401.2 - 未經授權:訪問由於伺服器配置被拒絕。   原因分析:IIS 支援以下幾種 Web 身份驗證方法:   匿名身份驗證   IIS 創建 IUSR_電腦名稱 帳戶(其中 電腦名稱 是正在運行 IIS 的伺服器的名稱),用來在CMS匿名用戶請求 Web 內容時對他們進行身份驗證。此帳戶授予用戶本地登錄許可權。你可以將匿名用戶訪 問重置為使用任何有效的 Windows 帳戶。   基本身份驗證   使用基本身份驗證可限制對 NTFS 格式 Web 伺服器上的檔的訪問。使用基本身份驗證,用戶必須輸入憑據,而且訪問是基於用戶 ID 的。用戶 ID 和密碼都以明文形式在網路間進行發送。   Windows 集成身份驗證   Windows 集成身份驗證比基本身份驗證安全,而且在用戶具有 Windows 域帳戶的內部網環境中能很好地發揮作用。在集成的 Windows 身份驗證中,流覽器嘗試使用當前用戶在域登錄過程中使用的 憑據,如果嘗試失敗,就會提示該用戶輸入用戶名和密碼。如果你使用集成的 Windows 身份驗證,則用戶的密碼將不傳送到伺服器。如果該用戶作為域用戶登錄到本地電腦,則他在訪問此域中的網路 電腦時不必再次進行身份驗證。   摘要身份驗證   摘要身份驗證克服了基本身份驗證的許多缺點。在使用摘要身份驗證時,密碼不是以明文形式發送的。另外,你可以通過代理伺服器使用摘要身份驗證。摘要身份驗證使用一種挑戰/回應機制(集成 Windows 身份驗證使用的機制),其中的密碼是以加密形式發送的。   .NET Passport 身份驗證   Microsoft .NET Passport 是一項用戶身份驗證服務,它允許單一簽入安全性,可使用戶在訪問啟用了 .NET Passport 的 Web 站點和服務時更加安全。啟用了 .NET Passport 的站點會依靠 .NET Passport 中央伺服器來對用戶進行身份驗證。但是,該中心伺服器不會授權或拒絕特定用戶訪問各個啟用了 .NET Passport 的站點。   解決方法:   根據需要配置不同的身份認證(一般為匿名身份認證,這是大多數站點使用的認證方法)。認證選項在IIS的屬性->安全性->身份驗證和訪問控制下配置。
source:

大家幫上忙

很多朋友在用IIS6架網站的時候遇到不少問題,而這些問題有些在過去的IIS5裏面就遇到過,有些是新出來的,俺忙活了一下午,做了很多次試驗,結合以前的Web Design經驗,做出了這個總結,希望能給大家幫上忙:)   問題1:未啟用父路徑   症狀舉例:   Server.MapPath() 錯誤 'ASP 0175 : 80004005'   不允許的 Path 字元   /0709/dqyllhsub/news/OpenDatabase.asp,行 4   在 MapPath 的 Path 參數中不允許字元 '..'。   原因分析:   許多網站建設頁面裏要用到諸如../格式的語句(即回到上一層的頁面,也就是父路徑),而IIS6.0出於安全考慮,這一選項默認是關閉的。   解決方法:   在IIS中屬性->主目錄->配置->選項中。把”啟用父路徑“前面打上勾。確認刷新。

2013年11月13日星期三

巴士站

迷你倉為方便大眾市民隨時存取的方便而蓬勃發展起來,如果你是駕車人士,你當然希望尋找一個可以提供泊車的迷你倉,如果你並非駕車人士,不妨選擇一個鄰近地鐵站或巴士站的迷你倉。server香港當代迷你倉地處交通方便的地鐵站及巴士站,更在各大廈設有停車場,一次過滿足你多個願望。當代迷你倉提供文件櫃、儲存櫃、迷你倉、自存倉、迷你辦公室、迷你寫字樓、信箱等服務,多元化得服務滿足你不同的需要。同時,當代迷你倉提供不同尺吋的迷你倉、文件櫃及辦公室,總有一個合適你的需要。租用當代迷你倉後,你只需要憑當代迷你倉提供的輕觸式智能卡,就能無限次免費自由出入迷你倉存取你的物品,無需預約。當你在進出迷你倉的時候遇到任何困難,均可在當代迷你倉辦公時間內致電,當代迷你倉擁有一支專業而熱情的服務團隊,為你解答各種疑問,協助你解決問題。

前者與剪切

可能與我們的直覺相反,一些研究顯示圖示介面與文本介面的比較中,CMS並沒有體現出明顯的優越性,一個主要原因就是文字和意義的映射是直接的,而圖示與意義的映射卻不一定是直接和明顯的。   在壞的圖示設計中,用戶需要花費幾秒鐘甚至更長的時間去猜測圖示代表的意義,而且還很可能猜錯,錯誤的理解導致錯誤的操作,錯誤的操作導致糟糕的結果,這決不是美妙的用戶體驗,即便從美學角度講那個圖示可能是上佳的藝術作品。   “直接”的意思是:不要繞彎。圖示展現的視覺表像與其背後的意義只需要很短的意義路徑即可網頁寄存連結。譬如對於“剪切”操作,使用“在文稿上打×”的圖示形象比“剪刀”的圖示形象更易理解,因為前者與剪切操作有更短的意義路徑,儘管“剪刀”圖示顯得更加生動活潑。   認知心理學家提出過一個啟動擴散模型,就是在人的知識和概念體系中,當一個概念被加工或受到刺激時,該概念結點就產生啟動,然後啟動與該結點直接相連的多個連結,並繼續向四周擴散。與當前概念在概念網路上的連結關係決定了其被啟動的強度。這種連結關係取決於人的知識體系的組織架構(即兩個概念是否屬於同一類別)和概念同時出現或使用的頻率。   例如在人的知識和概念架構中,網站建設在紙質文稿上寫字和在電腦上寫字都屬於撰寫文檔的類別,那麼當“在文稿上打×”的圖示形象出現時,被試就會快速地聯想到在電腦上進行剪切操作。而“剪刀”的視覺形象最易歸屬到“衣服裁剪”或“手工勞動”這樣的類別中去,因此映射關係具有教長的路徑和較弱的連結強度。因此在圖示設計中,設計師應該仔細考慮或者直接去調查用戶的知識體系,找到最短的概念連結。

想像力的圖示

作為WIMP(Window/Icon/Menu/Pointing Device)介面設計的關鍵部分,圖示在人機交互設計中無所不在。隨著人們對審美、時尚、趣味的不斷追求,Web Design也不斷花樣翻新,越來越多精美、新穎、富有創造力和想像力的圖示充斥著我們的視界。可是,從可用性的角度講,並不是越花哨的圖示越被用戶所接受,圖示的可用性要回到它的基本功用去思考。    圖示的功用在於建立起電腦世界與真實世界的一種隱喻,或者映射關係。用戶通過這種隱喻,自動地理解圖示背後的意義,跨越了語言的界限。但是,如果這種映射關係不能被用戶輕鬆並且準確地理解,那麼這種圖示就不應是好的圖示。因此,圖示的設計應該遵守以下的原則。

2013年11月12日星期二

基本身份驗證安全

身份認證配置不當

症狀舉例:
  HTTP 錯誤 401.2 - 未經授權:訪問由於伺服器配置被拒絕。
  原因分析:IIS 支援以下幾種 Web 身份驗證方法:
  匿名身份驗證
  IIS 創建 IUSR_電腦名稱 帳戶域名註冊(其中 電腦名稱 是正在運行 IIS 的伺服器的名稱),用來在CMS匿名用戶請求 Web 內容時對他們進行身份驗證。主機託管此帳戶授予用戶本地登錄許可權。你可以將匿名用戶訪
問重置為使用任何有效的 Windows 帳戶。
  基本身份驗證
  使用基本身份驗證可限制對 NTFS 格式 Web 伺服器上的檔的訪問。主機代管使用基本身份驗證,用戶必須輸入憑據,網頁寄存而且訪問是基於用戶 ID 的。用戶 ID 和密碼都以明文形式在網路間進行發送。
  Windows 集成身份驗證
  Windows 集成身份驗證比基本身份驗證安全,服務器托管而且在用戶具有 Windows 域帳戶的內部網環境中能很好地發揮作用。在集成的 Windows 身份驗證中,流覽器嘗試使用當前用戶在域登錄過程中使用的
憑據,如果嘗試失敗,服務器租用就會提示該用戶輸入用戶名和密碼。如果你使用集成的 Windows 身份驗證,則用戶的密碼將不傳送到伺服器。如果該用戶作為域用戶登錄到本地電腦,則他在訪問此域中的網路
電腦時不必再次進行身份驗證。
  摘要身份驗證
  摘要身份驗證克服了基本身份驗證的許多缺點。在使用摘要身份驗證時,伺服器托管密碼不是以明文形式發送的。另外,你可以通過代理伺服器使用摘要身份驗證。摘要身份驗證使用一種挑戰/回應機制(集成
Windows 身份驗證使用的機制),其中的密碼是以加密形式發送的。
  .NET Passport 身份驗證
  Microsoft .NET Passport 是一項用戶身份驗證服務,伺服器租用它允許單一簽入安全性,可使用戶在訪問啟用了 .NET Passport  Web 站點和服務時更加安全。啟用了 .NET Passport 的站點會依靠 .NET
Passport 中央伺服器來對用戶進行身份驗證。但是,該中心伺服器不會授權或拒絕特定用戶訪問各個啟用了.NET Passport 的站點。
  解決方法:
  根據需要配置不同的身份認證(一般為匿名身份認證,這是大多數站點使用的認證方法)。認證選項在IIS的屬性->安全性->身份驗證和訪問控制下配置。