整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
輯導(dǎo)語：在產(chǎn)品設(shè)計(jì)中，細(xì)節(jié)之處有時(shí)隱含著許多值得思考的地方。Web表單界面設(shè)計(jì)便是如此，比如標(biāo)簽設(shè)計(jì)中，哪種標(biāo)簽對(duì)齊方式更好？標(biāo)簽?zāi)┪灿质欠裥枰用疤?hào)……設(shè)計(jì)師應(yīng)該如何解決這些細(xì)碎的問題？本篇文章里，作者就Web表單設(shè)計(jì)中的“冷知識(shí)”進(jìn)行了總結(jié)，一起來看一下。
當(dāng)我們?cè)O(shè)計(jì)Web表單時(shí)，往往用最直覺的設(shè)計(jì)經(jīng)驗(yàn)本能驅(qū)動(dòng)我們?nèi)ソ鉀Q一些看似在界面設(shè)計(jì)中最簡(jiǎn)單的問題，但每每到細(xì)微之處，又會(huì)有無數(shù)疑問從細(xì)節(jié)中冒出來給我們的設(shè)計(jì)造成困擾。
例如：在表單界面Label（標(biāo)簽） 和 Input（輸入框） 上下還是左右排列合理、Label要不要加冒號(hào)、輸入框到底多寬合適等等……
以上這類問題看起來并不影響用戶完成任務(wù)，很久以來也少有人關(guān)心這些細(xì)微之處會(huì)不會(huì)對(duì)用戶有什么影響。
以至于，我表達(dá)想寫一篇探究這些細(xì)節(jié)的文章時(shí)，同事會(huì)偷笑說：你都開始研究標(biāo)簽?zāi)┪惨灰用疤?hào)了嗎……太冷了——真是個(gè)冷知識(shí)！
確實(shí)如此，這些偏門、細(xì)碎的內(nèi)容，鮮少有人會(huì)去留意和思考。因此我在寫下這些分享內(nèi)容時(shí)期望可以達(dá)到目標(biāo)是：“冷知識(shí)雖然冷，但有用”。用我了解的這些表單設(shè)計(jì)冷知識(shí)：?jiǎn)l(fā)你的冷思維、引出你的熱思考。
話不閑聊，我們開始討論第一個(gè)問題。
有個(gè)表單細(xì)節(jié)不知道你有沒有想過，標(biāo)簽?zāi)┪彩欠褚用疤?hào)？
這個(gè)問題在我前團(tuán)隊(duì)發(fā)生過激烈爭(zhēng)論，有同事說：“不要加，占用間距，而且沒人會(huì)留意它……”,也有人說：“要加，從含義上講，冒號(hào)的作用就是提示上下文或總結(jié)上下文的停頓。加上之后能更好表示標(biāo)簽與輸入域的關(guān)聯(lián)…….”。
聽起來好像都有些道理，那到底誰更對(duì)呢！
首先，我們追溯一下 Web 發(fā)展史，早期可訪問性核對(duì)清單中通常堅(jiān)持要標(biāo)簽帶冒號(hào)，因?yàn)槠聊婚喿x器一度必須依賴各種技巧才能理解標(biāo)記不明的表單。
而隨著技術(shù)發(fā)展，Web表單使用“l(fā)abel”標(biāo)簽（tag）可以做正確的標(biāo)記，那么屏幕閱讀器就能通過標(biāo)記（markup）把標(biāo)簽（label）和相應(yīng)的字段對(duì)應(yīng)起來則無需再借助冒號(hào)。
不過在客戶端又有些意外！曾經(jīng) Windows Vista 指南中明確要求使用冒號(hào)， Mac Aqua 也有此要求但規(guī)則會(huì)稍靈活一些。
這種情況是因?yàn)槟承┣闆r下屏幕閱讀器在桌面環(huán)境與可閱讀源代碼的網(wǎng)頁(yè)標(biāo)記相比會(huì)遇到一些困難，桌面環(huán)境不會(huì)直接顯示代碼。也是這個(gè)歷史原因，造成 Vista 和 Aqua 各自都有大量其標(biāo)簽包含冒號(hào)的歷史表單。因?yàn)閷?shí)在沒有必要把它們?nèi)扛牡簦钡浇裉炜蛻舳说谋韱我琅f延續(xù)這一規(guī)則。
通過Web發(fā)展史我們明白表單標(biāo)簽帶冒號(hào)的產(chǎn)生是為了解決早期屏幕閱讀器的識(shí)別，如今的屏幕閱讀器技術(shù)已轉(zhuǎn)變?yōu)樽R(shí)別標(biāo)簽的底層代碼，無需借助這種形式了。所以從這點(diǎn)來看要求標(biāo)簽帶冒號(hào)已經(jīng)站不住腳了。
那從情感角度分析標(biāo)簽帶冒號(hào)的是否對(duì)用戶體驗(yàn)有影響呢？
回到最開始，我和同事們的爭(zhēng)論……
先簡(jiǎn)單說下答案，無任何影響！
在《Web表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁(yè)表單》中，作者（卡羅琳·賈雷特）曾經(jīng)做過大量的表單測(cè)試，最終證明從未有一名用戶談?wù)撁疤?hào)是否出現(xiàn)，即使是有些在其他環(huán)境中很介意標(biāo)點(diǎn)符號(hào)的人似乎在線上表單中也未曾注意到。
從以上兩個(gè)角度不難發(fā)現(xiàn)，無論是從技術(shù)發(fā)展還是情感體驗(yàn)，都證明可不必要求表單帶冒號(hào)；因?yàn)榭捎眯栽L問清單不再有這樣的要求，用戶研究也證明幾乎沒有人會(huì)留意表單冒號(hào)是否出現(xiàn)。
這樣的結(jié)論，看似表單帶冒號(hào)是失敗了……但這并不妨礙它作為一種習(xí)慣或傳統(tǒng)延續(xù)至今，無論在客戶端還是Web設(shè)計(jì)系統(tǒng)中仍然常見。例如：蘋果電腦的Mac系統(tǒng)，國(guó)內(nèi)阿里的Ant Design Web設(shè)計(jì)系統(tǒng)。
因此，得到以下幾點(diǎn)建議：
在表單中標(biāo)簽與表單域的對(duì)齊方式，如果你的團(tuán)隊(duì)已有明確的規(guī)范和使用場(chǎng)景，你只要拿來主義即可。可如果某天由你主導(dǎo)定義一個(gè)新的表單規(guī)范時(shí)，不知道你會(huì)不會(huì)重新考慮哪種標(biāo)簽對(duì)齊方式更好，怎樣區(qū)分使用場(chǎng)景！
通過科學(xué)實(shí)驗(yàn)發(fā)現(xiàn)，無論是在眼動(dòng)儀的熱圖，還是在許多可用性測(cè)試的觀察結(jié)果中，用戶在填寫網(wǎng)頁(yè)表單時(shí)視線主要集中在輸入框的左側(cè)。他們的視線幾乎不會(huì)落到輸入框的右側(cè)，甚至都不會(huì)瞟上一眼。
以此為基礎(chǔ)，我們?cè)诰W(wǎng)頁(yè)表單設(shè)計(jì)中有3種最常見的標(biāo)簽對(duì)齊方式：頂對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽和左對(duì)齊標(biāo)簽。你可能會(huì)說還有混合對(duì)齊標(biāo)簽、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽等，這些確實(shí)存在但并不是最核心的幾種對(duì)齊方式，它們基本是在這3種形式上變化，不脫離本質(zhì)。
下面我們逐個(gè)分析一下。
馬泰奧·彭佐從2006年7月進(jìn)行眼動(dòng)研究發(fā)現(xiàn)，從標(biāo)簽移動(dòng)到輸入框只需50毫秒。比左對(duì)齊標(biāo)簽快了10倍，后者需要500毫秒；比右對(duì)齊標(biāo)簽方式快2倍，后者高達(dá)240秒。能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動(dòng)。
1）優(yōu)勢(shì)
最利于減少表單填寫時(shí)間（標(biāo)簽和輸入框位置最為靠近）；用戶視線固定，動(dòng)線一直向下（清晰的完成路徑）；節(jié)省大量橫向空間（可用于以多種方式組合的相關(guān)輸入框）。
2）劣勢(shì)
占用額外的垂直空間（如果可提供使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對(duì)齊標(biāo)簽）；建議使用輸入框50%至75%的高度作為相鄰輸入框間距。
3）適用場(chǎng)景
希望用戶快速填寫表單，完成任務(wù)；同時(shí)，當(dāng)輸入項(xiàng)存在主次之分時(shí)，對(duì)標(biāo)簽擴(kuò)展性要求高。
如果要盡量減少表單占用垂直屏幕空間，右對(duì)齊能提供快速完成時(shí)間。馬泰奧·彭佐的眼動(dòng)研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運(yùn)動(dòng)）右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在170毫秒和240毫秒，而填寫完成時(shí)間比左對(duì)齊快2倍。
1）優(yōu)勢(shì)
標(biāo)簽與輸入框相鄰（方便快速填寫）。
2）劣勢(shì)
右對(duì)齊布局造成左側(cè)不齊，影響了快速游覽表單的效率問題；若標(biāo)簽文字寬度變寬，右對(duì)齊還存在靈活度問題。
3）適用場(chǎng)景
既要減少垂直空間，又要加快填寫速度的場(chǎng)景。
在頂、右、左三種方案中，左對(duì)齊表單填寫速度最慢。因?yàn)樽髮?duì)齊表單解析問題時(shí)眼球定位次數(shù)最多，用戶一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費(fèi)時(shí)間較長(zhǎng)。根據(jù)馬泰奧·彭佐的研究，典型掃視時(shí)間為500毫秒，很長(zhǎng)說明用戶經(jīng)歷了沉重的認(rèn)知壓力。
1）優(yōu)勢(shì)
容易游覽標(biāo)簽；占用垂直空間較少。
2）劣勢(shì)
標(biāo)簽和輸入框的相鄰間距增大；適合于用戶不熟悉表單要收集的數(shù)據(jù)或問題無法分成易處理的內(nèi)容組，左對(duì)齊標(biāo)簽游覽表單問題會(huì)更容易。用戶只要上上下下閱讀標(biāo)簽左欄，不會(huì)被輸入框打斷。
3）適用場(chǎng)景
表單中存在較多的復(fù)雜或敏感信息，希望用戶放慢速度、仔細(xì)思考（在一些注冊(cè)類表單中較多使用）。
單從效率角度看，頂對(duì)齊標(biāo)簽>右對(duì)齊>左對(duì)齊，但是根據(jù)應(yīng)用場(chǎng)景，效率快并不是我們選擇標(biāo)簽對(duì)齊方式的唯一的指標(biāo)。
因此，得到以下幾點(diǎn)建議。
如果你希望用戶放慢速度，仔細(xì)思考表單中每個(gè)表單項(xiàng)，左對(duì)齊標(biāo)簽是個(gè)好選擇，特別是含有大量可選輸入框或高級(jí)設(shè)置的陌生數(shù)據(jù)時(shí)。
而頂對(duì)齊標(biāo)簽在一些國(guó)際化產(chǎn)品的表單設(shè)計(jì)時(shí)，會(huì)有更好的延展性。
至于，右對(duì)齊標(biāo)簽雖然與表單域聯(lián)系緊密，便于用戶填寫，但是要考慮好標(biāo)簽的長(zhǎng)短不齊如何解決。能否精簡(jiǎn)標(biāo)簽內(nèi)容，以及確定好表單與界面的邊距。
許多表單設(shè)計(jì)中，有個(gè)常見問題：是否應(yīng)該標(biāo)記必填字段？如果表單中的大多數(shù)字段或全部都是必填的，我們是否仍然應(yīng)該標(biāo)記它們？
先簡(jiǎn)單回答：是肯定的，用戶有時(shí)需要通過必填標(biāo)記來評(píng)估工作量，了解輸入信息量的最低限度。我會(huì)在下面具體解釋原因。
通常，設(shè)計(jì)師會(huì)覺得每個(gè)必填字段都有一個(gè)標(biāo)記是重復(fù)的、丑陋的、占空間，而且干擾界面，甚至可能看起來很擾亂（有認(rèn)知負(fù)擔(dān)！）。因此通常采取以下一種或兩種策略：
1）用戶一般不喜歡閱讀表單頂部說明。不難想象，用戶不太可能閱讀表單頂部的說明。表單字段需要自給自足，畢竟，每個(gè)字段都有特定指令——它的標(biāo)簽，為什么用戶需要閱讀其他任何東西來填寫它呢？
2）即使用戶閱讀了說明，也可能忘記。你可能會(huì)說：用戶閱讀了頂部的說明，怎么就會(huì)忘記——這么簡(jiǎn)單的事情？
的確容易忘記，特別是當(dāng)表單很長(zhǎng)或填寫表單被打斷時(shí)（這種情況在移動(dòng)端很常見）。即使用戶記得，但這占用了工作記憶，增加了認(rèn)知負(fù)荷。換句話說，你讓用戶完成任務(wù)更難了。填寫表單本身對(duì)用戶來說就相當(dāng)有挑戰(zhàn)性——為什么要讓它更具有挑戰(zhàn)性？
3）用戶必須掃描表單以確定是否為必填字段。不難發(fā)現(xiàn)，無論是否在表單頂部包含說明，結(jié)果都可能相同，用戶會(huì)忽略或忘記。他們會(huì)掃視表單，找到一個(gè)標(biāo)記為必填或可選的標(biāo)識(shí)。
而且有些用戶甚至不會(huì)費(fèi)心去環(huán)顧四周，他們只會(huì)做出假設(shè)。他們會(huì)想——“嗯，郵箱——不需要我的郵箱吧？先空著呢”。即使用戶沒有留空，也不得不暫停來思考一個(gè)字段是否需要填寫，減慢交互速度并使過程看起來更長(zhǎng)、更乏味。
想要解決以上問題很簡(jiǎn)單：標(biāo)記所有必填字段。盡量明確和清晰展示每個(gè)必填字段，并標(biāo)記它。當(dāng)然，就像有些設(shè)計(jì)師所說：界面出現(xiàn)大量必填標(biāo)識(shí)（紅色星號(hào)*）確實(shí)會(huì)增加視覺噪聲。甚至重復(fù)的星號(hào) * 會(huì)帶來一些認(rèn)知恐慌。但相比之下，兩害取其輕，這些負(fù)面因素是輕微的。
這里包含至少有兩種方式：星號(hào)*（紅色）和“必填”提示。星號(hào)*在網(wǎng)頁(yè)上已經(jīng)很常見，用戶熟悉其含義。優(yōu)點(diǎn)是它不占用太多空間，也看起來與標(biāo)簽文字足夠不同，所以使用它。
可以使用其他標(biāo)記形式嗎？當(dāng)然可以，但是最好遵循市面上常見的形式（雅各布定律），這樣更符合用戶認(rèn)知。
星號(hào)應(yīng)該在字段標(biāo)簽之前還是在字段標(biāo)簽之后？
這不一定有實(shí)際影響，但將其放在標(biāo)簽之前的一個(gè)原因是，只需掃視標(biāo)簽的最左邊字符，就能輕松定位必填哪些字段。
星號(hào)*是一種視覺標(biāo)記，應(yīng)當(dāng)仔細(xì)考慮表單中的標(biāo)識(shí)位置。標(biāo)識(shí)在標(biāo)簽左邊能指引用戶迅速瀏覽界面，并判斷出必填項(xiàng)。如果在右側(cè)由于輸入框形式、長(zhǎng)度各不相同，標(biāo)識(shí)和輸入框?qū)R會(huì)導(dǎo)致難以瀏覽和判斷。
雖然這不是強(qiáng)制性的，但標(biāo)記可選字段確實(shí)減輕了用戶思考：如果沒有這個(gè)標(biāo)識(shí)，用戶要環(huán)顧四周，并根據(jù)其他標(biāo)記字段推斷該字段是可選的。如果“非必填”在字段標(biāo)簽旁邊，那該任務(wù)會(huì)變得更容易。不描述可選字段，這沒問題，但這樣做會(huì)是一個(gè)很好的額外幫助。
登錄表單很短，一般由兩個(gè)字段組成：用戶名和密碼，這兩個(gè)字段總是必填的。如果使用星號(hào)*，標(biāo)記這些字段的成本很低，并不會(huì)出錯(cuò)。但是，絕大多數(shù)用戶都使用過很多登錄表單，他們是知道要登錄需要輸入郵箱/用戶名和密碼的。所以，在登錄表單中，可以省略這種形式。
而在注冊(cè)表中不標(biāo)記必填字段是危險(xiǎn)的。注冊(cè)表單因產(chǎn)品而異——不同公司在創(chuàng)建帳戶時(shí)需要不同類型的信息。它不僅僅包含用戶名和密碼，所以請(qǐng)標(biāo)記所有必填字段（包括用戶名和密碼）。
因此，提出以下幾點(diǎn)建議。
基礎(chǔ)前提，盡量去除任何不需要回答的問題，特別是涉及到用戶隱私的內(nèi)容。可以更容易讓用戶填完表單。
為了增加表單填寫的機(jī)會(huì)，請(qǐng)盡量減少用戶需要付出的努力和他們需要記住的信息。有很多方面有助于解決這些問題，但標(biāo)記必填字段（以及可選字段）是最容易的方法之一。
先給出答案：這是肯定的！
在《選擇的悖論》一書中，作者巴里·施瓦茨討論了生活中選擇過多的影響。并提出策略應(yīng)付無處不在的過多選擇。他特別敘述了智能默認(rèn)的能量——即在滿足多數(shù)人需要的地方放置選擇——來幫助人們做出明智的選擇。
而在Web表單中也有很多地方能利用智能默認(rèn)減少不必要的選擇次數(shù)或輸入，加速表單完成過程。所以，只要合適就在表單域中預(yù)先為用戶填寫你認(rèn)為他們想要的輸入值。
通過提供合理的默認(rèn)，能有效節(jié)省用戶時(shí)間，就是這么簡(jiǎn)單。應(yīng)用分擔(dān)了用戶思考或輸入答案的工作。填寫表單永遠(yuǎn)不是一件有趣的事情，如果這個(gè)模式能把表單填寫的時(shí)間減少一半，用戶會(huì)非常感激。
你可能會(huì)問：默認(rèn)值不是用戶想要的，誤導(dǎo)用戶怎么辦？
在設(shè)計(jì)有默認(rèn)值的表單域時(shí)，你要思考默認(rèn)值是否是大多數(shù)用戶可以接受的答案，如果不確信可以先去做一下用戶調(diào)研，了解用戶的心聲。
就算默認(rèn)值真的不是用戶想要的，至少你也為他提供了一個(gè)示例來告訴用戶答案應(yīng)該是什么樣子的。這一點(diǎn)也可以節(jié)省用戶幾秒的思考時(shí)間——或避免一條錯(cuò)誤信息。
但并不代表所有的表單域都要給出默認(rèn)值，我們只是盡可能的讓用戶節(jié)省時(shí)間。
如何使用：
在第一次向用戶顯示表單時(shí)，用一個(gè)合理的默認(rèn)值預(yù)先填寫文本框、組合框或者其他控件。也可以使用用戶之前提供給應(yīng)用的信息來動(dòng)態(tài)地給出默認(rèn)值（例：通過身份證自動(dòng)識(shí)別出生日期；利用郵編，推導(dǎo)出對(duì)應(yīng)省/市）。
如果只是因?yàn)槟阌X得不應(yīng)該留下空白的輸入域，那么不要使用默認(rèn)模式。只有當(dāng)你有理由確信絕大部分用戶，在絕大多數(shù)情況下，不會(huì)修改這個(gè)取值時(shí)才提供默認(rèn)值——否則，這將會(huì)給用戶帶來額外的工作！
有一個(gè)容易被忽視但實(shí)則舉重若輕的問題，表單中輸入框?qū)挾热绾卧O(shè)定？
在表單設(shè)計(jì)中，對(duì)于 Checkbox、Radio 等控件，很明確必須跟隨內(nèi)容自適應(yīng)處理。但對(duì)于Input、Select等你會(huì)不會(huì)產(chǎn)生困惑，是定寬處理還是跟隨內(nèi)容更好。
不知道你是否試圖這么理解過？輸入框作為用戶填寫信息的主要方式，其表現(xiàn)形式是否可以提供給用戶填寫表單的有用線索。
唐納德·諾曼的著作《設(shè)計(jì)心理學(xué)》中詳細(xì)講解過心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。
在真實(shí)場(chǎng)景中，大部分輸入框是存在理想長(zhǎng)度的，那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度來減輕判斷負(fù)擔(dān)。
下圖就是典型案例，一個(gè)實(shí)際不需要花多少錢的金額輸入框在左圖中進(jìn)行等寬處理，反而容易誤導(dǎo)用戶對(duì)輸入金額的判斷，造成一種不安全感。
表現(xiàn)形式要為用戶填寫提供有用線索，采用不同長(zhǎng)度的文本框提供了暗示；這種暗示是一種有用線索，當(dāng)輸入框長(zhǎng)度長(zhǎng)短不定時(shí)，用戶會(huì)很自然地思考為什么這樣；填寫輸入框時(shí)會(huì)自然考慮這些線索。
請(qǐng)注意！保證暗示效果的同時(shí)，不要設(shè)定太多的寬度，反而會(huì)讓表單顯得凌亂；太少又會(huì)讓表單看起來都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。
什么是模度值和數(shù)量呢！
落在具體設(shè)計(jì)上要先梳理產(chǎn)品中常見的表單類型，然后設(shè)置一個(gè)默認(rèn)寬度。以此為基礎(chǔ)來有規(guī)律的增加長(zhǎng)度，并考慮清楚它們的適用場(chǎng)景；從而定義出不同的模度，最終制定出整潔有序的模度規(guī)范。這樣就可以讓一線的設(shè)計(jì)師們跳過部分繁瑣磨人的細(xì)節(jié)思考，快速搭建出合適的表單寬度并合理有效。
本篇文章更多是從表單設(shè)計(jì)中的一些冷門內(nèi)容，即易忽略的一些設(shè)計(jì)點(diǎn)在展開討論，利用問題加案例的形式對(duì)表單設(shè)計(jì)進(jìn)行剝離拆解，沒有系統(tǒng)地、成本成套的來分析表單的構(gòu)成和交互細(xì)節(jié)等等。因?yàn)檫@類內(nèi)容講的人太多了，我也認(rèn)為講的要比我精彩。
所以，我把講的內(nèi)容稱為“私房菜”，更多是我總結(jié)了日常工作中會(huì)遇到的表單設(shè)計(jì)疑問和思考，幫助大家換一個(gè)口味來品味表單設(shè)計(jì)，大家可結(jié)合文章中給出的建議作為參考去靈活應(yīng)用。
同時(shí)，我也希望能夠通過這篇文章給到大家更多的啟發(fā)。內(nèi)容如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方還望大家給與指正。
作者：百度MEUX，百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)
本文由 @百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
動(dòng)設(shè)備正超過桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。于是，網(wǎng)頁(yè)設(shè)計(jì)師不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)？自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的出現(xiàn)很好的解決了這個(gè)問題。這篇文章將帶你了解一些關(guān)于自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和設(shè)計(jì)范例。
2011年，網(wǎng)頁(yè)設(shè)計(jì)師Aaron Gustafson在他的書《自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)》里率先提出了自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念。
Adaptive design (自適應(yīng)設(shè)計(jì))：為不同類別的設(shè)備建立不同的網(wǎng)頁(yè)，檢測(cè)到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁(yè)。目前AWD網(wǎng)頁(yè)主要針對(duì)這幾種分辨率（320，480，760，960，1200，1600）
和響應(yīng)式網(wǎng)頁(yè)不同，自適應(yīng)設(shè)計(jì)是基于斷點(diǎn)使用靜態(tài)布局，一旦頁(yè)面被加載就無法再進(jìn)行自動(dòng)適應(yīng)，自適應(yīng)會(huì)自動(dòng)檢測(cè)屏幕的大小來加載適當(dāng)?shù)墓ぷ鞑季帧Ｒ虼耍?dāng)您在電腦上打開瀏覽器瀏覽網(wǎng)頁(yè)時(shí)，該網(wǎng)站會(huì)自動(dòng)檢測(cè)并選擇該桌面屏幕的最佳布局。
基礎(chǔ)的網(wǎng)頁(yè)設(shè)計(jì)涵蓋了幾大重要環(huán)節(jié)：
而做好自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)則需要遵循以下幾個(gè)步驟：
為了適應(yīng)屏幕，不少移動(dòng)瀏覽器都會(huì)把HTML頁(yè)面置于較大視口寬度（一般會(huì)大于屏幕寬度），你可以使用viewport meta標(biāo)簽來設(shè)定。以下viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進(jìn)行初始縮放：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
在這個(gè)例子中，頁(yè)面布局包括 Header, Content, Sidebar和Footer. Header固定高度為180px, Content寬600px, Sidebar寬300px。
CSS3 media query是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵，就像高級(jí)語言里的if條件語句，告訴瀏覽器根據(jù)不同的視口寬度（這里等于瀏覽器寬度）來渲染網(wǎng)頁(yè)。
目前很多網(wǎng)站在PC端和手機(jī)端已經(jīng)采用了自適應(yīng)設(shè)計(jì)，在不同的設(shè)備上瀏覽網(wǎng)頁(yè)時(shí)已經(jīng)可以很好的體驗(yàn)到自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。比如，Amazon, USA Today, Apple, and About.com等。但自適應(yīng)設(shè)計(jì)在移動(dòng)網(wǎng)站上顯示的布局可能與桌面版本會(huì)有所不同。所以，做自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)時(shí)，設(shè)計(jì)師需要做更多的工作來滿足至少6種常見的布局需求。
這里有一些優(yōu)秀的自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)范例供各位設(shè)計(jì)師朋友參考。
與使用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（如CNN）的其他網(wǎng)站類似，亞馬遜鼓勵(lì)用戶下載其品牌應(yīng)用。 據(jù)報(bào)道，通過采用自適應(yīng)設(shè)計(jì)，亞馬遜移動(dòng)端的訪問速度比以往的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)提高了40%。并且，此外，亞馬遜的自適應(yīng)網(wǎng)站為移動(dòng)用戶提供了在移動(dòng)設(shè)備上使用“Amazon.com全站點(diǎn)”的機(jī)會(huì)，而響應(yīng)式設(shè)計(jì)并不會(huì)提供。
蘋果的設(shè)計(jì)向來以簡(jiǎn)潔著稱，不論是它的網(wǎng)站、商店，還是產(chǎn)品設(shè)計(jì)無不體現(xiàn)著這一主題。沒有采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，這一點(diǎn)讓蘋果飽受詬病。畢竟，它的一系列智能產(chǎn)品就是響應(yīng)式設(shè)計(jì)存在的原因之一。現(xiàn)在，蘋果采用了自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)，這也意味著蘋果的官網(wǎng)將會(huì)隨著設(shè)備類型和功能做出改變。
在線奢侈品購(gòu)物網(wǎng)站Avenue 32是一家采用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的典范。該品牌的特色是設(shè)計(jì)師與Usablenet合作，創(chuàng)造出無縫，直觀和極具視覺吸引力的移動(dòng)和平板電腦體驗(yàn)。根據(jù)Usablenet的說法，桌面版網(wǎng)站上充滿了內(nèi)容豐富的網(wǎng)頁(yè)，包括產(chǎn)品圖片，設(shè)計(jì)師細(xì)節(jié)，策展的外觀等等，這個(gè)品牌必須創(chuàng)建一個(gè)視覺和功能上與這種桌面體驗(yàn)一致的多渠道網(wǎng)絡(luò)產(chǎn)品。
Usablenet首席營(yíng)銷官Carin van Cuuren表示：“采用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)使Avenue 32能夠突出其移動(dòng)端的發(fā)現(xiàn)和商務(wù)功能，從而使客戶能夠隨時(shí)隨地瀏覽和購(gòu)物。 “而且，智能手機(jī)和平板電腦的訂單增長(zhǎng)了40%，移動(dòng)流量翻了一番，平均移動(dòng)交易增長(zhǎng)了27%。”
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)讓“今日美國(guó)”（USA Today）選擇了一種自適應(yīng)方法，因?yàn)樵摷夹g(shù)允許品牌通過考慮操作系統(tǒng)和屏幕尺寸來檢測(cè)特定設(shè)備，以提供量身定制的體驗(yàn)。” 因此，提供比響應(yīng)式更豐富的新聞體驗(yàn)可能會(huì)更受歡迎。
各類新聞網(wǎng)站都采用了自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)，因?yàn)樗芸焖偌虞d網(wǎng)頁(yè)和滿足所有不同設(shè)備的讀者訪問網(wǎng)站。
以上5個(gè)自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的案例從各自不同的角度，不管是網(wǎng)頁(yè)的訪問速度，品牌影響效應(yīng)，或是用戶體驗(yàn)方面都極大的說明了為什么自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)會(huì)變的流行起來。
本文由 @安靜的熊先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
TML: HyperText Markup Language 超文本標(biāo)記語言
HTML代碼不區(qū)分大小寫, 包括HTML標(biāo)記、屬性、屬性值都不區(qū)分大小寫;
任何空格或回車鍵在代碼中都無效，插入空格或回車有專用的標(biāo)記，分別是 、<br>
HTML標(biāo)記中不要有空格，否則瀏覽器可能無法識(shí)別。
如何添加注釋(comment:評(píng)論;注釋)
<!-- -->
<comment></comment>
<!-- --> 不能留有空格字符集
<meta http-equiv="Content-Type" content="text/html;charset=#"/><base target="_blank">可以將a鏈接的默認(rèn)屬性設(shè)置為_blank屬性
單個(gè)標(biāo)簽要有最好有結(jié)束符(可以沒有結(jié)束符)
<br/> <img src="" width="" /> 便于兼容XHTML(XHTML必須要有結(jié)束符)
HTML標(biāo)簽的屬性值可以有引號(hào),可以沒有引號(hào),為了提高代碼的可讀性,推薦使用引號(hào)(單引號(hào)和雙引號(hào))，盡管屬性值是整數(shù)，也推薦加上引號(hào)。
<marquee behavior="slide"></marquee> 便于兼容XHTML(XHTML必須要有引號(hào))
<marquee behavior=slide></marquee>經(jīng)過測(cè)試,以上程序都可以正確運(yùn)行
HTML標(biāo)簽涉及到的顏色值格式:
color_name 規(guī)定顏色值為顏色名稱的文本顏色(比如 "red")。
hex_number 規(guī)定顏色值為十六進(jìn)制值的文本顏色(比如 "#ff0000")。
rgb_number 規(guī)定顏色值為 rgb 代碼的文本顏色(比如 "rgb(255,0,0)")。
transparent 透明色 color:transparent
rgba(紅0-255,綠0-255,藍(lán)0-255,透明度0-1)
opacity屬性: 就是葫蘆娃兄弟老六(技能包隱身)
css:
div{opacity:0.1} /*取值為0-1*/英文(顏色值)不區(qū)分大小寫
HTML中顏色值：采用十六進(jìn)制兼容性最好(十六進(jìn)制顯示顏色效果最佳)
CSS中顏色值：不存在兼容性
紅色 #FF0000
綠色 #00FF00
藍(lán)色 #0000FF
黑色： #000000
灰色 #CCCCCC
白色 #FFFFFF
青色 #00FFFF
洋紅 #FF00FF
黃色 #FFFF00
請(qǐng)問后綴 html 和 htm 有什么區(qū)別?
答: 1. 如果一個(gè)網(wǎng)站有 index.html和index.htm，默認(rèn)情況下，優(yōu)先訪問.html
2. htm后綴是為了兼容以前的DOS系統(tǒng)8.3的命名規(guī)范
XHTML與HTML之間的關(guān)系?
XHTML是EXtensible HyperText Markup Language的英文縮寫,即可擴(kuò)展的超文本標(biāo)記語言.
XHTML語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行.
XHTML是用來代替HTML的, 是2000年w3c公布發(fā)行的.
XHTML是一種增強(qiáng)了的HTML,它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求.
XHTML是基于XML的應(yīng)用.
XHTML更簡(jiǎn)潔更嚴(yán)謹(jǐn).
XHTML也可以說就是HTML一個(gè)升級(jí)版本.(w3c描述它為'HTML 4.01')
XHTML是大小寫敏感的,XHTML與HTML是不一樣的;HTML不區(qū)分大小寫,標(biāo)準(zhǔn)的XHTML標(biāo)簽應(yīng)該使用小寫.
XHTML屬性值必須使用引號(hào),而HTML屬性值可用引號(hào),可不要引號(hào)
XHTML屬性不能簡(jiǎn)寫：如checked必須寫成checked="checked"
單標(biāo)記<br>, XHTML必須有結(jié)束符<br/>,而HTML可以使用<br>,也可以使用<br/>
除此之外XHTML和HTML基本相同.
網(wǎng)頁(yè)寬度設(shè)置多少為最佳?
960px
target屬性值理解
_self 在當(dāng)前窗口中打開鏈接文件,是默認(rèn)值
_blank 開啟一個(gè)新的窗口打開鏈接文件
_parent 在父級(jí)窗口中打開文件,常用于框架頁(yè)面
_top 在頂層窗口中打開文件,常用語框架頁(yè)面
字符集：
charset=utf-8
Gb2312 簡(jiǎn)單中文字符集, 最常用的中文字符
Gbk 簡(jiǎn)繁體字符集, 中文字符集
Big5 繁體字符集, 臺(tái)灣等等
Utf-8 世界性語言的字符集
ANSI編碼格式編碼格式的擴(kuò)展字符集有g(shù)b2312和gbk
單位問題：
HTML屬性值數(shù)值型的一般不帶單位, CSS必須帶單位;
強(qiáng)制刷新
ctrl+F5
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
