inspirrol: 十月 2011

2011年10月13日星期四

網站頂部導航條必須要提供的內容和功能

http://www.inspirr.com

頂部導航條提供給用戶一種很方便,簡潔分類展示方式,讓用戶訪問品類繁多的有組織的內容，用戶為了完成任務需要找到必要的內容和功能. 這個可能是最簡單也最常用的組件了,所以內容也不多…….
原文地址: http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

解決什么問題? 用戶為了完成任務需要找到必要的內容和功能.
什么時候用? 2-12個分類的時候分類的標題相對較短并且可預測的時候分類數量基本不會變的時候為一個web產品展示頂級導航時配合標簽來展示二級導航如果頁面寬度很重要,用它來替代左側導航條通過控制導航條的狀態來跟蹤和展示用戶當前位置很困難,成本很大時,用它來替代標簽. 分類都屬于一個產品時具體解決辦法是什么?

在一個水平的橫條上顯示一系列單行的鏈接,如果有網站頭部,則放到頭部之下. 可以通過與”標簽”一起使用,在導航條中同時顯示一級和二級導航如果只使用頂部導航條,最好第一個鏈接是”首頁(Home)”.應該指向網站的首頁但是如果頂部導航條是用在一組標簽下,那么標簽的第一個應該是”首頁”并且具有同樣的功能在導航條中用留白和”管道符” “|”(或者是垂直居中的”點”,或者是簡單的視覺元素)來分隔每一個分類頂部導航條中鏈接的所有頁面本身也一定要顯示在頂部導航條當頂部導航條數量過多時,建議使用”更多..”的鏈接,或者考慮使用左側導航條與標簽一起使用來顯示高級別的內容跟左側導航條一起使用來顯示二級或三級內容關注內容的劃分范圍(符合用戶的心智模型)比關注頁面的展示更重要.因為最常見的錯誤是將一系列沒意義的內容歸在一類.

盡可能降低分類之間的交集讓分類之間的界限盡可能的清晰(例如,很容易猜到想要的東西是否在一個分類中) 避免過于寬泛或者過于特殊的分類名字. 為什么使用這個組件? 頂部導航條提供給用戶一種很方便,簡潔分類展示方式,讓用戶訪問品類繁多的有組織的內容

網站用戶引導設計：利用數字引導用戶選擇

http://www.inspirr.com

SociaBeta之前發過一篇文章“4種巧用“數字”激勵用戶行為的方法”，描述了一些利用數字來激勵用戶行為的案例設計。最近正好在進行一個項目，涉及到數字方面的引導，找了下相關文章，做了一些對比思考，記錄下來。
目前在用戶引導設計里面采取數字引導設計的主要集中四類網站或產品：（1）購物網站，譬如團購站，他們使用數字來制造稀缺印象以及激勵跟風；（2）系統優化軟件，譬如360軟件等，利用數字來造成用戶心理恐慌和使用愉悅；（3）社交網站，利用數字提醒來滿足用戶的期待心理；（4）排行榜，利用數字來引導用戶選擇。
可以看出，數字引導設計幾乎都是在利用和發掘用戶的心理影響用戶行為。在很多時候，這種數字的激勵方式確實對用戶產生好的引導，讓用戶按照設計的軌跡行動。但是數字引導并不是萬能的，在一些情景下這種引導設計如果不當的話，很可能會產生負面效果。

情景一：團購站，最低成交人數100，現在成交人數20，剩余時間4小時。這三個數字是團購站在最重要的價格數字之外的數字引導設計，但是在這種情景下，這種數字展示只會隨著剩余時間的縮減讓越來越少的人參與購買。“都這么久了，才這么點兒人購買，不是好東西？或者這次團購肯定不能成功，我還是算了吧。”
這時候，在用戶心里，這里的底限、現狀以及剩余時間三者之間產生的消極影響，讓用戶造成了一種放棄沖動。
當然，很多團購站都作假，這話不表。
情景二：訂閱頁面，在郵件訂閱表單下顯示目前已有XXX人注冊。社會認同，Social Proof，在引導用戶做決定時經常發揮很大的作用，這也是很多產品站會突出用戶評論、優質用戶量的一個原因。“這么多人都注冊/購買了，那估計沒錯的！”這個就跟經常性的進入已經人滿為患的飯館排隊等餐一樣，都是利用跟風心理來增加猶豫的用戶心理安慰和行動暗示。feedsky和feedburner顯示訂閱數的設計對于網站瀏覽者來說也是一種引誘。
但是，Wordpress用戶熟悉的Diythemes網站在設計郵件訂閱表單的時候就遇到一個問題。經過A/B測試，他們發現在表單里顯示已訂閱用戶數的設計產生的效果并不是最好。“已有14752人訂閱，免費獲取更新信息”的信息提示去掉之后，轉化率幾乎翻番。為什么這接近1.5萬的數字提醒反而造成不好的效果呢？

有用戶的評論很有意思：我本來很樂意去訂閱的，但是看到這數字之后，我就開始想這1.5萬到底是多是少？很多人的觀點類似，這個數字提醒實際上是對用戶預期行為造成了干擾，增加了猶豫。（當然，我認為diythemes的訂閱表單設計有問題，提醒信息實際對用戶的行為造成了中斷干擾。）
另外，豆瓣首頁的數字提醒設計有讓你感覺到過沖動和興趣嗎？
情景三：社交網站某人的follow人數設計。在這種交互性比較強的網站，一些用戶期待的是自己的行為所能產生的效果，譬如我有機會與明星對話，有機會與名人產生互動。但是在看到一個人follow人數太多的時候，會產生這種想法：即使我去follow他了，估計也不會產生互動，他很難關注到我，還是不follow他了吧。
當然，不可否認的是在大多數情況下，數字引導還是充分利用和激勵了用戶心理的。上面的情景相對比較受眾小，而且變故多，很難被產品設計者完全把握。不能因為這些特例就放棄使用這種非常有效的用戶激勵用戶行為的引導模式，但是針對不同的網站產品，在數字引導設計的時候還是需要根據不同情況作出正確判斷的：
網站本身的定位以及用戶群體特性譬如，奢侈品站是不適合采取數字引導設計的，因為用戶追求的特立獨行和尊貴感。全球通，你還要用用戶量大來宣傳高端嗎？
在可能產生消極引導的時候，是否有辦法取消消極因素譬如團購快到期時，取消底限人數顯示。
數字往往跟情景和行為操作是關聯的，文案和行動按鈕的設計是否與之匹配非行為流程中的信息提醒盡量獨立設計，不要放到操作流程路徑里。

我們為什么要花時間和精力在設計上

http://www.inspirr.com

最近通過各種渠道和形式接觸了幾位設計師，他們來自不同的公司，做著迥異的產品，但當我問起類似于“設計的意義”這樣的問題時，他們的回答均不能讓人滿意。最常見的回答是：比原來好用了、好看了，或者這是業務部門的需求。
我們為什么要花時間和精力在設計上？
有人可能會說，這是為了提升可用性和用戶體驗。這沒錯，可是然后呢？可用性和用戶體驗的提升能帶來什么呢？這一定有商業價值嗎？不一定。要知道，目前沒有任何人能夠證明它們和公司的經營業績有著必然的聯系。不是說我們做出極高可用性和用戶體驗的產品，公司的商業目標就一定達到，用戶就會不請自來，擠破頭想花錢買我們的產品或服務。可用性和用戶體驗的確是設計的目標，但絕對不是最重要的目標和意義。如果地說，我們在設計上所付出的所有努力，最重要的意義，就是很好地滿足公司在業務上的需求，幫助公司達成其商業目標。
以滿足業務目標為首要考慮，應成為所有設計師基本的工作原則。只有作品為公司在業務上帶來實際的用處，設計師的工作才有價值，這是公司這一組織形式在經濟上對每個人天生的要求。你作為設計師想對某個功能做出修改？沒問題，這對我們業務指標的增長有促進作用嗎？如果沒有，為什么不去做能提升業務數據的設計完善？畢竟，在公司里的任何人做事情都是有成本的，設計師如果自己想不明白做某事的成本和收益的關系，繼而被指派去做其它工作，也只能怪他/她自己了。
但要強調的是，商業目標雖然是最重要的目標，可這當然不等于我們可以無底線地做事。對于設計師來說，緊隨其后要考慮的，就是設計的用戶體驗目標。無論是做一個新的設計還是完善已有的設計，都要考慮對用戶的影響是什么。這個目標的設定，就自然地平衡了第一目標對用戶體驗可能的損害，使得我們在考慮商業目標的同時，努力提升用戶的體驗，至少不傷害他們的感受。
在具體的工作當中，我提倡所有的事情都落實到數據上，以歷史數據為輔助，以預測數據為目標。在做設計改動前，先通過歷史數據仔細地評估目前的情況，比如現在的轉換率、頁面停留時間、任務完成時間和各種業務數據等，找出可能提升的空間，接著設定一個可行的目標，新設計上線以后觀察數據的變化。通過這種方法，你實實在在地知道自己的改動行還是不行，訪談中用戶可能表達不清楚，但他們的行為也就是數據不會說謊。在我看來，這是設計師積累經驗最有效的方式，也是對公司最有幫助的工作方法。

新手站長經驗分享:網站被放入百度沙盒的分析

http://www.inspirr.com

對于一個新手站長來說，自己花費了很大的精力弄了一個網站，每天都充滿著希望等待著自己新站能夠有所表現，在搜索引擎里可以有個適合的位置留給自己，然而有時卻總不能讓人那么如意，往往有時你希望越大，失望就越大，特別對于一個新站來說，搜索引擎對它的考核是十分嚴格的，一個弄不好就會滿盤皆輸。
一、軟文外鏈狂增
自己在做微博營銷站時有點心急，想要快點讓自己的網站隔夜更新，能夠在四月份的時候有個好的排名，自己就加大了對外鏈的建設，每天都會在A5，CHINAZ等站點投一篇軟文，第一天的效果并不理想，發現一天發下來也沒幾個人轉載，因此，我就在發軟文的同時也會到一些論壇或是知道問答，博客留言等再適合的做點外鏈。但這樣堅持幾天下來我就發現有點很不對勁，外鏈增加數量再也不是我能控制的了，有一個晚上增加三十的，也有一百的，四十的，總之就是很不穩定，對于一個不到一月的新站來說，無疑是將自己推上了斷頭臺。
二、垃圾站點外鏈超度
本來只是想宣傳一下自己的博客，能夠給自己帶來點流量而已，沒想到自己在做博客留言的時候，沒有把握住度，一次性的做的太多了，我這人就是這點很不好，什么事要嘛不做，要做就死做，因此，這也把自己給害苦了，自己精心維護的一個新站就這樣被丟進了百度沙盒。
三、網站后臺總打不開
自己的網站后臺經常打不開，或是打開速度非常慢，這也不能怪別人，只能怪自己在當初建站時沒有好好的找個好空間，以致于有可能蜘蛛來抓取的時候，而我的網站當時正處于打不開的窘態。蜘蛛這次無法抓取，來了連門都不給進，相信它一定會生氣的，因此，你的網站想要有很好的發展，一定要找個好的空間，能夠討得蜘蛛喜歡的最好，其實蜘蛛要求的并不高，只要它每次來的時候，你在家，它能進去也就OK了。
這就是我在做微博營銷博客時，出現的失誤，以至于昨天百度把我精心維護，賴以生存的微博營銷網站放進了百度沙盒，雖然感到很難過，但卻也真是自己的過失，因此，在接下來的日子里我會想辦法把它盡快的從百度沙盒里光明正大的走出來。
微博營銷賺錢（http://www.weiboyingxiao.org/）轉載請注明出處。

敘詞表:以索引形式列出各種術語便于用戶檢索

http://www.inspirr.com

　　說敘詞表這個名詞之前，我們先來看看下面這些日常見到的吧。
漫畫人物表：
常見于漫畫書開頭部分，描述角色形象與對應名字，幫助讀著搞清誰是誰。
摘自漫畫《圣斗士星矢》——車田正美
世界杯小組賽分組表：
用于介紹世界杯小組賽各隊分組情況，描述組名與球隊的包含關系，讓觀眾一目了然了解賽事。
西餐菜單：
點餐之前不看不行的東西，描述類別、菜名、所含食材、價格。話說西餐菜單的食材描述著實是make sense的。
以上列舉的漫畫人物表、世界杯小組賽分組表、西餐菜單正和敘詞表有著很大的共性，都是正式開工前的必備工具。可以把他們理解為敘詞表的各種變形體。言歸正傳，在項目里的設計階段，我們很容易遇到對產品某個局部稱謂不統一的問題，或者即使內部稱謂統一了但是向用戶傳達又不靠譜的情況。于是，設計師與產品經理就會著手整理一份敘詞表（也就是術語表），幫助規范術語。
什么是敘詞表？
簡單來說，敘詞表就好比《新華字典》，是一本能查到什么是什么的工具書。遇到奇怪詞匯，人人都有意識到里面去查閱的地方。
Msdn（下圖）大家都熟悉不過了，她就是一個典型的敘詞表，以索引形式列出各種術語便于用戶檢索。

敘詞表的歷史:
“其實敘詞表的發展已經有一段很長的歷史。這么豐富的歷史可以讓我們從一堆國家標準和國際標準中汲取經驗，包含單語種敘詞表的構造。例如：
ISO 2788 (1974, 1985, 1986, 國際標準)
BS 5723 (1987, 英國)
AFNOR NFZ 47-100 (1981, 法國)
DIN 1463 (1987-1993, 德國)
ANSI/NISO Z39.19 (1994, 1998, 2005, 美國)”
　　摘自《Web信息架構-設計大型網站》
ANSI/NISO Z39.19的標題如下圖，“單語種受控詞表的結構、格式、管理規范”。

摘自<ANSI/NISO Z39.19-2005>文檔
文件中受控詞表說明部分以敘詞表方式呈現，左術語右定義（如下圖）：
摘自<ANSI/NISO Z39.19-2005>文檔
ANSI/NISO Z39.19規范的目的是為檢索系統和網站導航提高信息存儲效率，同時確保描述一致性。她主要梳理了多詞同義與同詞多義的術語。多詞同義例如：VHF與Very High Frequency同為高頻率意思。同詞多義例如Mercury在不同領域可解釋為水星、水銀或者精神等多種意思。該規范主要從定義范圍含義、用等價關系鏈接近義詞、區別同形異義詞來管理詞表。
技術行話
專家溝通時，專業行話能帶來效率和專業性，不過考慮到教育成本，也不妨采用樸實易懂的詞匯。下面列出的行話大家知道即可。
優選術語（Preferred Term, PT）
也稱為可接受術語。所有關系都是根據優選術語定義的。
異形術語（Variant Term, VT）
等價于優選術語，或者大致上與優選術語同義。
上位類術語（Broader Term, BT）
上位類術語是優選術語的上層術語，在等級中的高一層位置。
下位類術語（Narrower Term, NT）
下位類術語是優選術語的子術語，在等級中的低一層位置。
相關術語（Related Term, RT）
相關術語與優選術語為并列關系，同為上位類術語的下層術語，用相關關系連接。
將以上結構用英文縮寫再縮寫后得到一個單字母小模型，結合方位關系便于大家記憶。這也是ANSI/NISO Z39.19術語結構的精髓部分。
語義關系
敘詞表的術語之間包含著比較豐富的語義關系，我們來深入了解一下：

等級關系
從圖中十分明了地看出A包含B的等級關系，可以寫作：A NT B （NT即下位類術語）
術語的等級關系會有三種類型：
屬
同生物學“界門綱目科屬種”關系。例如：鳥 NT 鵲
整體-部分
局部B是整體A的一部分。例如：腳 NT 大腳趾
實例
B是A的一個實例。例如：海 NT 地中海
等價關系
圖中的等價關系可以是同義詞、近義詞、縮寫、詞語變體等。可寫作：A VT B （VT即異形術語）。例如：70-200 f/2.8 L USM VT 小白；70-200 f/4 L USM VT 小小白；70-200 f/4 USM IS VT 愛死小小白（這里的小白、小小白、愛死小小白是指佳能的幾支經典長焦鏡頭，這些名詞在攝影圈算得上“術語”了）
相關關系
同類別中并列的部分，用相關關系連接。可寫作：A RT B （RT即相關術語）。例如：小小白 RT 愛死小小白，小白，愛死小白，大白（你們懂的~）
其他寫法
用（Use, U）
即：異形術語用優選術語。中文也可以寫作：“見”（See）。
摘自<ANSI/NISO Z39.19-2005>文檔

代（Used for, UF）
即：優選術語代異形術語。
原則：
If Term A Use Term B, then Term B UF Term A.
例如：
outline USE shape
shape UF outline
總結
以上我們主要了解了ANSI/NISO Z39.19敘詞表的發展史，術語行話，術語關系模型，以及一些常用的語義關系和寫法。結合項目中應用到術語表的話，我們還需要根據實際工作的情況靈活的運用這些規范，避免因溝通和理解的問題導致術語表的推動效果受到影響。

頁面構建事半功倍:頁面構建常用的一些小工具

http://www.inspirr.com

我們將在本文中介紹一些關于頁面構建常用的一些小工具,大部分是基于firefox的插件,通過這些小工具可以讓我們在頁面構建中事半功倍.

頁面bug調試工具–Firebug
實時測量工具–Measureit
實時顏色選取工具–Colorzilla
SEO優化工具–SenSEO
CSS使用效率優化工具–CSS usage
網頁截圖存儲工具–Pearl crescent page saver basic
HTML頁面與設計稿比對工具–Pixel perfect
本地調試頁面樣式利器–Fiddler
DNS刷新工具–DNS flusher
網頁評級工具–Yslow
頁面構建必備工具 — Firebug 相信每個頁面構建的同學都有這個工具吧？如果沒有的話，你趕緊安裝（點擊此處安裝）,Firebug就像它的名字一樣，幫你找到蟲子，燒掉它！同時有一些firefox的頁面調試工具也是基于Firebug的，比如Yslow , CSS Usage

網頁測量利器– MeasureIt 當我們拿到一個設計稿,寫完基本的結構后,我們的測量工具可能就開始了,那些間距\高度\寬度\對齊,就需要一把好尺子來協助我們了,這里我像大家推薦 MeasureIt Firefox點擊安裝,通過這把尺子,我們就能很方便的進行一些測量對齊工作,但是這個工具的缺陷是由于那個尺子的邊框,我們不容易達到像素級的標準,那我們就需要下面將要介紹的工具 Pixel perfect

實時顏色選取工具–Colorzilla 將版式調整好后的任務應該就是處理顏色方面的問題，通常我們會將其放到ps等圖片編輯軟件中來查看相應的色值，如果有了Colorzilla，我們就能更直觀的使用顏色，特別是有時候我們用文本編輯軟件編寫CSS色值的時候，我們甚至可以將設計稿直接拖到瀏覽器里面直接去想要位置的顏色,而且支持RGB，RGBa，HSL，十六進制，可以直接復制。同時這個軟件還提供了色板和漸變生成工具。點擊此處立刻體驗

檢查網頁的相關信息–Web Developer 一個頁面相關信息的集大成者，任何關于網頁前端的信息你都能從里面找到，我們可以很方便的查看網頁的大綱、無CSS，查看DOM節點等。只要你想，基本都有了。

讓你的CSS更瘦一些 — CSS usage 隨著產品經理一遍遍的調整產品，你是不是也感覺你的css文件慢慢變胖，但是又不敢輕易刪掉一些樣式，因為你不知道它們是不是被用到過，那就讓下面的CSSUsage來幫你。
通過檢查class名稱使用情況，來查看頁面中的CSS信息，從而方便開發者優化CSS樣式表。

可顯示4類信息
Seen css中當頁所使用的class
Seen before 此class曾經出現在此網站的其他網頁，當然是在已經瀏覽過其他網頁的情況下
Unseen css中的class，此頁面并未使用過
:hover 偽類信息
我們以前曾稍微深入的探討,請移步至CSS減肥工具 — CSS Usage
網頁評級工具–Yslow Yslow是基于firebug的一個網頁評級工具,它根據Yahoo用戶體驗部門訂制的34條可能對網頁前段表現產生影響的規則,這些規則中有23條可以通過這個工具來測試.即使我們不使用這個工具,了解這些規則也是很不錯的.
網頁截圖存儲工具 –Pearl crescent page saver basic Page Saver可以將網頁轉化為圖片，包括網頁上的Flash也能同時被轉化。網頁可以按照你的要求保存為PNG或者JPEG格式。可以將整個網頁或者在屏幕上看到的部分轉化為圖片。為了方便截取網頁，插件提供了大量的設置選項，包括默認的文件名、文件后綴名、圖片的質量。可以通過工具欄按鈕截取圖片，也可以通過瀏覽器的菜單選項截取圖片，還可以通過命令行截取圖片。

當前可見區域保存為圖片：

將整個頁面保存為圖片

HTML頁面與設計稿像素級比對工具–Pixel perfect 可以將設計師的設計圖通過此插件作為蒙版加載到瀏覽器上，通過調節圖片的透明度以及位置，可以進行設計稿與頁面的細節比對，來優化提高頁面樣式的精確度。
先將設計稿添加到需要對比的頁面中來：
讓圖片顯示：
可以通過調整透明度和具體坐標位置來重合圖片和網頁，然后對樣式進行修正。
讓圖片顯示：
本地調試頁面樣式利器–Fiddler 當我們的靜態頁面經過前端工程師、程序員同事的工作后，盼望著旁望著，終于上線了，這時咱們這邊也又要忙碌了，因為一些在靜態頁面沒有考慮到的情況和相關前端和程序同事的加工后，頁面上出現了一些bug，特別是有時候這些BUG在不同的瀏覽器下展現還不一樣，單靠Firebug工具我們燒不死這些蟲，那我們就可以通過Fildder工具，來監視所有 HTTP 請求和響應的工具，選出我們需要的樣式文件，通過調試本地文件來尋找線上bug出現的原因：http://www.fiddlertool.com
我們一般用來調試樣式問題.
1. 第一步：存儲所需要修改的CSS文件
2. 第二步：打開Fiddler，刷新頁面
3. 第三步：選中所需要調試修改的文件
  
  點擊右側的autoresponder –> Add
  
  即將線上的也是我們需要調試的樣式文件添加進來。
4. 第四步，將之前存好的樣式表文件，添加到Fiddler中
  
  選擇文件后，點擊Save，大功告成。接下來就可以進行調試了。
  修改CSS文件后，直接刷新頁面，即可顯示出最新更改調試的新樣式。
當然，Fiddler 工具的作用不止于此，比如網速模擬等
DNS刷新工具–DNS flusher 頁面開發的同學每天游走在開發環境、測試環境、仿真環境等等，為每個環境更改HOST是家常便飯，改完host之后，就按著ctrl+f5狂刷頁面，頁面的host ip 地址真的就變了嗎？我們需要一個直觀的工具來強制瀏覽器更新host，DNS Flusher就是一個不錯的工具，我們每次只要輕輕的優雅點擊就能更新至新的host地址，現在安裝。

讓搜索機器人更容易找到你–SenSEO 頁面構建的工作不僅是要讓頁面盡可能的達到設計稿的藝術要求，網絡傳輸的速度要求，還要為搜索引擎更容易找到你做出相應的努力。以前我們相對少得談及此，SenSEO是一款SEO診斷的火狐插件，你打開面板在里面輸入你的關鍵字，之后點擊后面的幾個按鈕。可以給你一個綜合打分，分析你的Title、Description、 Keywords、robots、Number of Words、Number of matching Keywords、Keyword-Density、Number of HTML等等。這個插件提出的有一些分析建議還是很有借鑒意義的。
1. Inspect SEO Criteria SEO標準檢查及建議
此處有分數評級，綠色代表符合標準，黃色代表警告、小問題，紅色代表問題嚴重、需要重新優化
Title 標簽使用正確情況

(1) 只使用一次

(2) Title標簽應該包含所有關鍵詞

(3) Title標簽長度應少于65個字符

(4) Title標簽所包含的關鍵詞應該少于15個
Meta標簽
例：<meta name=”description” content=”新浪網為全球用戶24小時提供全面及時的中文資訊，內容覆蓋國內外突發新聞事件、體壇賽事、娛樂時尚、產業資訊、實用信息等，設有新聞、體育、娛樂、財經、科技、房產、汽車等30多個內容頻道，同時開設博客、視頻、論壇等自由互動交流空間。” >
meta name=”description”標簽使用正確情況

(1) 只使用一次

(2) 標簽應該包含所有關鍵詞

(3) 標簽長度應少于150個字符

(4) 標簽所包含的關鍵詞應該少于30個
先介紹一下robots.txt是什么：搜索引擎通過一種程序robot（又稱spider），自動訪問互聯網上的網頁并獲取網頁信息。可以在網站中創建一個純文本文件robots.txt，在這個文件中聲明該網站中不想被robot 訪問的部分，這樣，該網站的部分或全部內容就可以不被搜索引擎收錄了。
(1) 使用機器人的聲明，即創建robot.txt文件，以控制搜索引擎訪問
(2) 提供一個網站地圖，使用谷歌網站管理員工具提交
H標簽使用優化(下面的這幾條建議,如果我們使用html5構建頁面的話,可能要重新審視了.)

(1) 使用H標簽構建頁面結構

(2) H1標簽只能使用一次

(3) 關鍵詞應該使用H1標簽

(4) 在頁面中使用H2 和 H3標簽頁面內容優化

(1) 使用獨特內容

(2) 避免重復內容

(3) 內容要清晰流暢

(4) 圖片要使用可替代的文字描述，即使用alt=”"

(5) 盡量少的重復使用關鍵詞

(6) 鏈接最好少于100個

(7) 代碼語義化并合理有效

(8) 優化頁面載入時間

(9) 使用微格式來標記的評價，地址等 DOMAIN域名

(1) 域名應該包含關鍵詞

(2) 不要使用國際域名(域名不要包含特殊字符)

(3) 域名中使用連字符來連接不同單詞（URL中使用下劃線，谷歌不能將它們拆分為不同關鍵詞）

(4) 域名使用2年以上

(5) 管理域名以提高排名路徑地址優化

(1) 路徑最好是短小精悍

(2) 不使用動態參數

(3) 使用連字符連接不同單詞

(4) 使用小寫字母

(5) 路徑層級不要超過3層 2. Show components 頁面中有助于進行SEO優化的信息情況
3. Printview 打印網頁信息此內容將inspect SEO Criteria 和 components信息集合起來，可以進行打印

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

應聘網頁設計師常見的8個面試試題和答案

http://www.inspirr.com

CSSer與其他IT職位一樣，在找工作的時候，都會面臨著面試官提出的問題，或者給出的試卷。今天webjx.com收集了常見的8條面試題目，希望對您有所幫助。

一、超鏈接點擊過后hover樣式就不出現的問題？

被點擊訪問過的超鏈接樣式不再具有hover和active樣式了,解決方法是改變CSS屬性的排列順序:L-V-H-A

二、IE6的margin雙倍邊距bug問題

例如：

<styletype="text/css">
body{margin:0;}
div{float:left;margin-left:10px;width:200px;height:200px;border:1pxsolidred;}
</style>
浮動后本來外邊距10px,但IE解釋為20px,解決辦法是加上display:inline

三、為什么中火狐瀏覽器下文本無法撐開容器的高度？

標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度，又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px;這里為了照顧不認識min-height的IE6可以這樣定義：

div{height:auto!important;height:200px;min-height:200px;}
四、為什么web標準中無法設置IE瀏覽器滾動條顏色了？

原來樣式設置：

<styletype="text/css">
body{scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#000;scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;}
</style>
解決辦法是將body換成html

五、如何定義1px左右高度的容器？

IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：overflow:hidden|zoom:0.08|line-height:1px

六、怎么樣才能讓層顯示在FLASH之上呢？

解決的辦法是給FLASH設置透明:

<ahref="http://www.webjx.com/">:</a>
<prelang="html"line="1">
<paramname="wmode"value="transparent"/>
注：在webjx.com中有專門討論此問題的文章，大家可以搜索一下。

七、怎樣使一個div層居中于瀏覽器中？

<styletype="text/css">

</style>
這里使用百分比絕對定位，與外補丁負值的方法，負值的大小為其自身寬度高度除以二

八、firefox瀏覽器中嵌套div標簽的居中問題的解決方法

假定有如下情況：

<divid="a">
<divid="b"></div>
</div>
如果要實現b在a中居中放置，一般只需用CSS設置a的text-align屬性為center。這樣的方法在IE里看起來一切正常；但是在Firefox中b卻會是居左的。
解決辦法就是設置b的橫向margin為auto。例如設置b的CSS樣式為：margin:0auto;。

用戶研究:男人和女人廣告的關注重點

http://www.inspirr.com

男人和女人的大腦構造真的不一樣，這一點從廣告的關注重點都可以看出，不信的話請往下看這份報告：
這是H&M 的網頁，雖然男人和女人都很注重模特兒的臉，但是男人明顯比較不注意品牌及文字訊息(越紅表示越注意)
下圖顯示男人第一眼先看臉，女人第一眼先看胸(是在偷偷和自己比較嗎?)
和女人相比，男人目光停留在模特兒臉上的時間長了40%，腿上的時間卻短了20% (結果是女生更愛看美腿)，身體部分則是差不多
第二個實驗是Reebok 的球鞋廣告，不是我在說，男人幾乎完全沒有注意到產品嘛
結果男人看臉的時間再次比女人長了40%，看臀部的時間更是多了50%，但就是不怎么看鞋子(時間短36% )
最后這個SAAB 汽車廣告沒有美女，但也再次證明男人真的不是那么關心文字訊息
天生愛車的男人，看車的時間也比女人多了85%，但是看品牌logo的時間短了50%
不知道要做什么結論，所以這個研究是告訴我們，男人是視覺的動物，而且非常在意女生的臉正不正嗎XD
（消息來源：Business Insider）

語義化的網頁:XHTML語義化標記

http://www.inspirr.com

分離結構與表現的另一個重要方面是使用語義化的標記來構造文檔內容。一個 XHTML 元素的存在就意味被標記內容的那部分有相應的結構化的意義，沒有理由使用其他的標記。換句話說，不要讓 CSS 使一個 HTML 元素看起來就像另一個 HTML 元素，比如用<div>來代替<p>標記標題。

首先是關于語義（Semantics）和默認樣式的區別，默認樣式是瀏覽器設定的一些常用tag的表現形式，個人認為他的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用，很明顯Hx系列看起來很像標題，因為擁有粗體和較大的字號。<strong>,<em>用來區別于其他文字，起到了強調的作用。至于列表和表格很明顯的告訴你他們是做什么的。

其次，語義化的網頁的好處，最主要的就是對搜索引擎友好，又了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取，你網站的推廣便可以省下不少的功夫。

具體的語義和用途在，XHTML1.0 TAG 參考中都已經說明，這里將一些容易遺忘或者混淆的TAGS和屬性予以補充。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標題使用，并且依據重要性遞減。<h1>是最高的等級。
例如:
代碼:

<h1>文檔標題</h1>

<h2>次級標題</h2>

而不要使用
<div class="title">文檔標題</div>，或者<span class="title">文檔標題</span>.很明顯搜索引擎對于后者是不會認為他是標題的。

<p>

段落標記，知道了<p>作為段落，你就不會再使用<br/>來換行了，而且不需要<br/><br/>來區分段落與段落。<p></p>中的文字會自動換行，而且換行的效果優于<br>。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。
例如：代碼:

<p>藍色理想 www.blueidea.com  誕生于1999年的10月。從成立之初，藍色理想就以建設網站設計與開發人員之家為宗旨，以介紹網絡開發技術與網站創作設計交流為主要內容。其網站內容制作精良，每天都會有會員精心制作的教程發布，無私地對網友進行幫助，而且還舉辦過不少設計比賽并開發了很多目前仍被許多網站應用的相關程序。而所發布的作品與點評受到了多家媒體關注及行家的好評，同時也從中確立了自己的社會地位，于是一批又一批的網絡同仁加盟了藍色理想，成為國內最大的設計類站點之一。  

</p>

<p>多年來，藍色理想的內容不斷充實，先后被國內一些知名網站、傳統媒體重點推介過，并陸續被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站點收藏，并在Google、百度、Yahoo三大搜索引擎中以簡體漢字關鍵詞"網站設計與開發”搜索排名均為第一，現在藍色理想已發展成為國內影響最大的網站設計、開發的專業網站之一。</p>

<ul>、<ol>、<li>

<ul>無序列表，很常見的到了大家廣泛的使用，<ol>有序列表也挺常用。在web標準化過程中，<ul>還被更多的用于導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支持CSS的時候，導航鏈接仍然很好使，就是美觀方面差了一點。
例如: 代碼:

<ul>

<li>項目一</li>

<li>項目二</li>

<li>項目三</li>

</ul>

代碼:

<ol>

<li>第一章</li>

<li>第二章</li>

<li>第三章</li>

</ol>

<dl>、<dt>、<dd>

dl就是“定義列表”。比如說詞典里面的詞的解釋、定義就可以用這種列表。
例如：代碼:

<dl>

<dt>Dog</dt>

<dd>A carnivorous  mammal of the family Canidae.</dd>

</dl>

代碼:

<dl>

<dt>上海灘</dt>

<dd>這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。

當年在香港播出以后，產生了巨大的轟動效應。</dd>

<dt>周潤發</dt>

<dd>和所有偉大的影星一樣，周潤發印證了一個時代，一個香港電影的黃金時代。

風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發哥已被刻為一個時代的坐標。</dd>

</dl>

<cite>、cite 、<q>、 <blockquote>

論壇和blog經常會用到引用別人的話，用<q>來標記簡短的單行引用。Web瀏覽器會自動識別在<q> 之間的內容。不幸的是，IE不能識別，并且有些時候， <q>會引起一些可訪問性(Accessibility)的問題。正因為如此，一些人建議盡量不要使用 <q>,手動的插入引用標記。在一個包含適當的類的 <span>中加入單行的引用內容，那么就可以用CSS來給引用設計樣式了，但是這個沒有語義上的意義。您可以讀讀Mark Pilgrim寫的The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag )關于處理<q>相關問題的看法。
對于那些一段或者好幾段的長篇引用，就應當使用 <blockquote>了。CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在<blockquote>中的，引用的內容還必須包含在一個元素中，通常是<p>。屬性cite既可以與<q> 一起用，也可以與<blockquote>一起用，用來提供引用內容的來源地址。需要注意的是，如果你使用 <span>來代替 <q>標記引用內容,那么你就不能使用 cite屬性了。

例如: 代碼: <cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman. 代碼: <p> <cite>孔子</cite>曰：<q>學而不思則罔，思而不學則殆</q>.</p> 代碼:

<p>The W3C says that <q  cite="http://www.w3.org/TR/REC-html40/

struct/text.html#h-9.2.1">The  presentation of phrase elements

depends on the user  agent.</q>.</p>

代碼:

<blockquote  cite="http://www.w3cn.org/">

<p>“我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，

我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的"瀏覽器大戰"，

為了兼容  Netscape 和  IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，

每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，

例如支持手機上網的  WAP 技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；

針對某種瀏覽器的 DHTML  特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。

這是一種惡性循環，是一種巨大的浪費。”</p>

</blockquote>

<em>、 <strong>

<em> 是用作強調的，<strong>是用作重點強調的。大部分瀏覽器用斜體顯示強調的內容，用粗體來顯示重點強調的內容，然而，這是沒有必要的，如果是為了確定強調內容的顯示方式，最好的方法就是使用CSS來定義他們的表現。當你想要的只是視覺上的效果時，就不要使用強調了。而且如果你想要強調但是還覺得粗體或者斜體不視覺效果沒那么好，特別是斜體對于中文來說，那么你完全可以定義一些其他的比較醒目的樣式達到強調的效果。
例如: 代碼:

<p><em>強調</em> 的文本通常用斜體顯示，

然而，  <strong>特別強調</strong> 的文本通常以粗體顯示。</p>

<table>、<td>、<th>、< caption >、 summary

XHTML中的表格不應用來布局。然而如果是為了標記列表的數據，就應該使用表格了。<th>為表格標題，屬性summar為摘要，<caption>標簽為首部說明，<thead>標簽為表格頭部，<tbody>標簽為表格主體內容，<tfoot>標簽為表格尾部。
其中還可以使用scope 可用于取代headers屬性，標記含有表頭信息的單元格，其中各數值的內容如下：
row 指示當前單元格，為包含當前單元格的行提供相關的表頭信息。
col 指示當前單元格，為根據當前單元格指定的列提供相應的表頭信息。
rowgroup 指示當前單元格，為包含當前單元格的其余行組提供相關的表頭信息。
colgroup 指示當前單元格，為根據當前單元格指定的其余列組提供相應的表頭信息。
abbr 用于定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將默認單元格內容為節略形式。
例如: 代碼:

<table id="mytable"  cellspacing="0" summary="The technical specifications of the Apple PowerMac G5  series">

<caption>Table 1: Power Mac G5 tech specs  </caption>

<tr>

<th scope="col" abbr="Configurations"  class="nobg">Configurations</th>

<th scope="col" abbr="Dual  1.8">Dual 1.8GHz</th>

<th scope="col" abbr="Dual 2">Dual  2GHz</th>

<th scope="col" abbr="Dual 2.5">Dual  2.5GHz</th>

</tr>

<tr>

<th scope="row"  abbr="Model"  class="spec">Model</th>

<td>M9454LL/A</td>

<td>M9455LL/A</td>

<td>M9457LL/A</td>

</tr>

<tr>

<th  scope="row" abbr="G5 Processor" class="specalt">G5  Processor</th>

<td class="alt">Dual 1.8GHz PowerPC  G5</td>

<td class="alt">Dual 2GHz PowerPC G5</td>

<td  class="alt">Dual 2.5GHz PowerPC  G5</td>

</tr>

<tr>

<th scope="row" abbr="Frontside  bus" class="spec">Frontside bus</th>

<td>900MHz per  processor</td>

<td>1GHz per  processor</td>

<td>1.25GHz per  processor</td>

</tr>

<tr>

<th scope="row" abbr="L2  Cache" class="specalt">Level2 Cache</th>

<td class="alt">512K  per processor</td>

<td class="alt">512K per  processor</td>

<td class="alt">512K per  processor</td>

</tr>

</table>

效果察看：http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

<dfn> 代碼: <p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p> <ins>, <del>

知道del，就不要再用<s>做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入，也有這樣的屬性。
例如：代碼: <p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p> <code>

表示是計算機代碼。而默認樣式為打字體。技術論壇和blog中經常遇到。
例如：代碼: <code>p{margin:2px 0;}</code> <abbr>、<acronym>

<abbr>標簽是表示web頁面上的簡稱，<acronym>標簽為取首字母縮寫。（注：這里把簡稱和縮寫分開而論，簡稱范圍比縮寫大，取首字母的縮
寫用<acronym>標簽）Windows的IE6.0以下的瀏覽器暫不支持<abbr>標簽。在IE里，你可以應用CSS給<acronym>但是不能應用給<abbr>標簽，
IE會為<acronym>標簽的title屬性顯示提示，但是會忽略<abbr>標簽。
解決方法見: http://www.w3cn.org/article/translate/2005/115.html
例如: 代碼: <abbr title="Cascading Style Sheets">CSS</abbr> 代碼: <acronym title="Cascading Style Sheets">CSS</acronym > alt屬性和title屬性

title屬性用來為元素提供額外說明信息title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。但是并不是必須的。
alt屬性為不能顯示圖像、窗體或applets的用戶代理（UA），指定替換文字。替換文字的語言由lang屬性指定。代碼: <img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com"> 代碼:

<a  href="http://www.jluvip.com/blog/article.asp?id=260"  title="js獲取單選按鈕的數據">js獲取單選按鈕的數據</a>

參考資料:
默認樣式：
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
語義化:
http://www.456bereastreet.com/lab/developing_with_web_standards/zh
http://www.456bereastreet.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/TR/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/

資源鏈接：
Bad Tags：
http://www.htmldog.com/guides/htmlintermediate/badtags/
The Q tag
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML, XHTML, semantics and the future of the web
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html

怎樣解決DIV層被Flash動畫遮蓋問題？

http://www.inspirr.com

今天測試div層和flash的交互，發現div層總是被flash層遮蓋，在百度上找了一會，說是加個就成了，我加完后在IE下問題是解決了，但是FF下好像沒有反應，后來才知道IE中和FF加的代碼是不一樣的，如下：　　IE瀏覽器下可用
firefox下可用
關于wmode屬性資料：
(可選)允許使用 Internet Explorer 4.0 中的透明 Flash 內容、絕對定位和分層顯示功能。此標記/屬性僅在帶有 Flash Player ActiveX 控件的 Windows 中有效。
"Window"在 Web 頁上用影片自己的矩形窗口來播放應用程序。"Window"表明此 Flash 應用程序與 HTML 層沒有任何交互，并且始終位于最頂層。
"Opaque" 使應用程序隱藏頁面上位于它后面的所有內容。
"Transparent"使 HTML 頁的背景可以透過應用程序的所有透明部分顯示出來，并且可能會降低動畫性能。
"Opaque windowless"和"Transparent windowless"都可與 HTML 層交互，從而允許 SWF 文件上方的層遮蔽應用程序。這兩種選項之間的差異在于"Transparent"允許透明，因此，如果 SWF 文件的某一部分是透明的，則 SWF 文件下方的 HTML 層可以透過該部分顯示出來，而"opaque"則不會顯示。

订阅：评论 (Atom)

2011年10月13日星期四

檢查網頁的相關信息–Web Developer 一個頁面相關信息的集大成者，任何關于網頁前端的信息你都能從里面找到，我們可以很方便的查看網頁的大綱、無CSS，查看DOM節點等。只要你想，基本都有了。