輯導語：如今人們已經(jīng)習慣于使用各種智能設備，然而全球有3億左右殘障人群，他們的需求不該被忽略，于是無障礙設計便應運而生。本文作者從色盲用戶的角度出發(fā)，分享如何做色彩無障礙設計，一起來學習一下吧。

隨著科技的普及和快速發(fā)展，人們越來越頻繁和習慣于使用智能設備，然而全球有3億左右的殘障人群， 無論是從科技還是法律的角度，這群人的需求不該被忽略。

于是無障礙設計應運而生。無障礙具體可拆分為視覺、聽覺、操作、認知、言語交流無障礙. 而色彩是視覺中很重要的部分，我們的世界是五彩繽紛的，不同的色彩被賦予不同的意義，對于色覺障礙人群，我們該如何包容性地設計，讓他們的生活更加便利和美好呢？

無障礙設計無處不在，舉個例子：Spotify有兩種播放模式，一個是隨機播放，一個是循環(huán)播放.它通過改變圖標的顏色為綠色，表明激活狀態(tài)，但是如果僅僅只是改變顏色，對于色盲用戶來說，不容易識別，因為原本鮮艷的綠色在他們看來是暗淡的：

但是加上小綠點之后，不去依靠顏色也很容易判斷當前的狀態(tài)：

再舉個例子：有一款名為FODMAP的應用程序值得借鑒，FODMAP是在腸道中不能正確吸收的糖， 這是一款通過列出食物中各種含糖量，來給用戶提供飲食參考的軟件。

軟件中用紅黃綠表示不同的FODMAP等級，但是這讓色盲用戶感到很困擾：

幸運的是，這個軟件的設置中，可以打開色盲幫助選項， 打開后你看到的界面就變成了這樣：

用顯而易見的符號替換顏色，無論對色盲用戶還是普通用戶，都很友好。

再舉個例子， 英國的在線足球網(wǎng)站在2012年時是這樣的：

色盲用戶根本無法分辨輸贏情況，此舉無疑是白白流失了全國的色盲用戶。后來，他們也意識到了問題，于是現(xiàn)在的設計時這樣的：

每個顏色色塊中填入字母，W代表贏，L代表輸，D代表平局，色盲用戶也可以輕松獲得信息。

但是目前無障礙的普及程度并不高，色盲用戶在日常生活中仍然面臨很多的問題，比如在商店買衣服問題、在線選座問題、無法使用色彩標簽等等。本文將帶你全面地了解如何做好色彩無障礙設計。

01 色盲類型

色盲的頻率相當高，十二分之一的高加索人（8%），二十分之一的亞洲人（5%）和25分之一的非洲男性（4%）是所謂的“紅綠”色盲。它比AB血型更常見，據(jù)統(tǒng)計，平均每12名男性中就有1人有某種形式的色盲， 每200名女性中就有1人， 占人口的4.25%。麥當勞每天為300萬色盲客戶提供服務。亞馬遜每天超過110萬客戶是色盲。

色盲遠比我們想象中的數(shù)量要龐大的多，所以設計色盲友好的互聯(lián)網(wǎng)產(chǎn)品，這件事情應當被重視和完善。

正常的彩色視覺需要用到三種功能正常的錐形細胞，紅色、綠色和藍色錐形細胞，根據(jù)三色錐形細胞的是否缺失，又可以將色盲分為全色盲，雙色色盲和三色色盲。

1. 三色色盲

三色色盲擁有三種錐形細胞， 但是其中一種錐細胞感知的光略微偏離對齊，根據(jù)哪種錐形細胞類型“有缺陷”，產(chǎn)生三種不同類型的效果，并且還具有不同的嚴重性。

三種情況分別是是紅色弱，即對紅光的敏感性降低，綠色弱: 對綠光（最常見的色盲形式）的敏感性降低，以及藍色弱: 對藍光的敏感性降低（極為罕見，只有0.001%的發(fā)生率）。

對某種類型光的感知力，有敏感性降低的，也有完全感知不到的，程度不一。

因為紅色和綠色錐形細胞感知到的光譜部分明顯重疊，因此紅色和綠色色弱都難以分辨紅色、綠色、褐色和橙色， 所以在診斷的時候常常被統(tǒng)稱為“紅綠色盲”，他們對藍色和紫色以及多種顏色的組合也常常難以區(qū)分。

藍色弱很難分辨藍色VS黃色，紫羅蘭VS紅色，藍色VS綠色. 藍色弱眼中是紅粉色，黑白色和青綠色的世界。

1）紅色色弱

2）綠色色弱

3）藍色色弱

2. 雙色色盲

雙色色盲只有兩種顏色的錐形細胞，第三種類型的細胞完全缺失. 所以，紅色盲完全無法感知到紅色，綠色盲完全無法感知到綠色，藍色盲完全無法感知到藍色。

同時喪失了紅色和綠色感知力的人生活在暗綠色的世界，所以藍色和黃色會非常突出。

大約1/2的三色色盲看到的世界與雙色色盲看到的很相似，但是三色色盲色彩感知力受光照影響較大，在良好的光照下，他們對色彩的感知力就更好，反之久更糟糕。總的來說， 雙色色盲在辨別色彩方面比三色色盲更容易些。

為了讓大家更清晰的了解不同色盲眼中的世界，這里做一些展示：

1）紅色色盲

2）綠色色盲

3）藍色色盲

3. 全色盲

全色盲完全沒有任何一種顏色細胞，他們眼中世界是完全的黑白色，就像是黑白電視機那樣.但是我們在做產(chǎn)品無障礙時，基本不會考慮這一類人群，因為全色盲發(fā)生的概率實在是太低了，33000人中僅有1人，他們的生活因此有很多阻礙，在正常的光照條件下，也需要戴深色墨鏡。

02 WCAG 2.1指南是什么？

1. 什么是WCAG

WAI制定了幾項W3C建議，包括：

• Web內(nèi)容可訪問性指南（Web Content Accessibility Guidelines）， 即 WCAG（2.1）
• 創(chuàng)作工具輔助功能指南（Authoring Tool Accessibility Guidelines）， 即ATAG（2.0）
• 用戶代理輔助功能指南（User Agent Accessibility Guidelines），即UAAG（2.0）
• 可訪問的豐富互聯(lián)網(wǎng)應用程序（the Accessible Rich Internet Applications suite of web standards），即WAI-ARIA

WCAG有三種評級: A、AA和AAA，標準從低到高：

1. A是最低等級的需求：這是所有的網(wǎng)站、軟件和數(shù)字內(nèi)容都應該做到的，可以被認為是及格線。
2. AA：補償20/40（通常被報告為大約80歲老年人的典型視力）視力喪失的用戶的對比度敏感性損失，也是大多數(shù)網(wǎng)站可以接受的標準，電腦端和手機端的輔助技術都可以運行良好。
3. AAA：補償視力損失為20/80（通常使用輔助技術來訪問他們的內(nèi)容， 輔助技術通常具有對比度增強， 以及內(nèi)置放大能力）或以上的低視力用戶的對比度敏感性損失，這個等級是無障礙的黃金級別，幾乎一切都能夠達到無障礙，包括一些很細小的環(huán)節(jié)。

2. WCAG傳送門

WCAG2.1詳細指南完整版可查看: https://www.w3.org/TR/WCAG21/

快速參考WCAG標準: https://www.w3.org/WAI/WCAG21/quickref/？currentsidebar=%23col_overview#use-of-color

WCAG關于顏色的要求描述:https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

03 色彩無障礙的八個要點

1. 對比度達到AA評級

WCAG中將字體分為一般字體和大字體。

大字體是這樣定義的:“大于等于18點常規(guī)體或者大于等于14點的粗體，如果是中日韓的語言，就要換算成同等大小”，除卻大字體之外的就是一般文字。

AA評級對于一般文字來說，文字和背景的顏色對比度不少于4.5:1的對比度;對于大字體和（如圖標、表格等等）組件的要求就沒那么嚴格，只要顏色對比不低于3:1即可。

如果帶有文本的按鈕也有彩色邊框，因為邊框沒有提供輔助信息，所以對邊框沒有對比度要求，只要該文字符合AA評級即可。

2. 不要只依賴顏色來區(qū)分不同含義

顏色在特定的語境中，會被賦予特殊的含義，如常見的紅色代表警告，綠色代表合格通過的意思等等，而患有色彩缺陷、視力衰退的老齡化群體、還有使用單色閱讀器（如kindle紙墨水）的人都可能會因此遺漏了顏色所傳達出的重要信息。

同時在用顏色表達某種信息時，為了確保所有的用戶都能接受到信息，需要添加另一種視覺形式，下面給大家舉例說明：

1）文字

文字是最容易讓色盲用戶了解到顏色含義的元素，也是我們首先會考慮到的。

一個典型例子是表單字段上的錯誤狀態(tài)， 紅色通常用于表示文本字段中的錯誤， 但是標紅不足以引起色盲用戶的注意，因為從他們的視角看， 紅色的字體在一群黑色的字體中顯得很暗， 很難分辨出來。因此，你需要一個額外的提示，例如文本或圖標，來指示錯誤狀態(tài)。

2）圖標

圖標是使用頻率很高的組件， 一些通用圖標的含義甚至不需要Tooltip來解釋，用戶就能一眼識別， 比如設置、警告、成功等等圖標，舉個例子：許多B端界面會通過不同的語義顏色，告知用戶某個流程的狀態(tài)，但是對于色盲用戶來說，識別顏色對應的狀態(tài)圖例是一件很艱難的事情，但是如果添加圖標輔助信息，一切就變得容易多了！

3）明暗對比

這一點常常被大家忽略.如果兩種顏色的色調不同，但是擁有強烈的明暗對比，那么在這里， 明暗對比也算是另一種視覺輔助形式，只要這兩種顏色的對比不低于3:1（AA）。

只有一種情況例外， 就是用戶需要準確地識別一種特定的顏色，這個時候對比度就不能算在內(nèi)。

4）符號

舉個例子，標注紅色的文字標簽是必填項，出于無障礙的需要，我們可以在紅色標簽上打一個星號，這樣即使注意不到顏色差異，看到星號也會意識到此項必填。

但是！大多數(shù)情況下，星號的尺寸很小（位于左上角），不容易被屏幕閱讀器捕捉到，為了改善這樣的情況，設計者可以增大星號的尺寸，以及為星號添加注釋（Tooltip）， 這個注釋是由開發(fā)者完成的， 不借助屏幕閱讀器是無法捕捉這個信息。

5）數(shù)字

這是一個丙烯結構式，三個碳原子被標上了三種顏色（化學老師會教我們標記碳原子序號的規(guī)律，不過就假設這是老師在給一群初學者的課件吧），那么老師提問“黃色的碳原子和紫色的碳原子中間用的是什么鍵”，色盲學生可能就沒辦法辨別顏色所對應的碳原子了，但是如果標上序號，這樣提問:“1號碳原子和2號碳原子中間用的是什么鍵？”，是不是所有的學生就一目了然了？

6）圖形

減少使用顏色的數(shù)量，增加圖形樣式，這樣盲人用戶能夠花費更少的力氣在辨別顏色上。

7）圖案

在顯示圖形或者圖表時，可以提供一些圖案供用戶填充，色盲雖然對顏色不敏感，但是對于圖案卻非常容易察覺區(qū)別。

這里推薦幾個提供大量圖案樣式的網(wǎng)站：Http://pattern.monster

交互式地圖（付費使用）：https://www.arcgis.com/index.html

Figma圖案填充插件：Hero Pattern for Image https://www.figma.com/community/plugin/743134103711120154

3. 圖表中要注意的點

以折線圖舉例：

• 避免使用圖例，盡量在圖形旁邊注釋，因為盲人在距離拉遠的時候，就更難去識別并且對應名字
• 避免使用細線條，建議組合不同的虛線/實線，虛線的間距差異化
• 關鍵數(shù)據(jù)點可以采用不同的幾何圖形標記，更便于識別

再以堆疊條形圖為例：

• 使用飽和度高的顏色，避免使用飽和度低且相近的顏色
• 盲人盡管不能識別有些顏色，但他們對明暗和圖案非常敏感，嘗試用不同的圖案代替顏色
• 在不同的圖案之間，創(chuàng)造明暗對比

再舉個倫敦地鐵圖和上海地鐵圖的例子：

4. 白色字體還是黑色字體

WCAG的標準被許多人奉為無障礙法則，但是有些情況下，并不適用。舉個例子：你覺得黑色字體和白色字體在橙色的背景上，哪一種看起來更清晰？

相信有不少人覺得白色字體看起來更舒服，更清晰，但是WCAG的顏色標準卻告訴我們，黑色達到了AAA的級別，而白色卻連AA級別都沒有達到：

不僅僅是我們，在很早之前，就有設計師對此產(chǎn)生疑惑，并做了用戶調研。

Ericka Seastrand 曾在2019年做過一項用戶調研，調研對象是20名色盲用戶，測試問題是: 黑色還是白色的字體在該背景下更突出？ 最后的結果顯示: 61%的用戶認為白色字體更清晰。

這些用戶也給出了具體的原因：

所以謹記：盡信書，則不如無書。WCAG的標準僅供參考，但是實際運用中，應當以用戶的感受為參考，質疑精神是很可貴的！

5. 按鈕二三事

1）灰色按鈕

有些人認為不能夠使用灰色的按鈕，因為灰色給人以不可用的暗示，但是其實并沒有領悟不可用狀態(tài)的本質. 視覺深度才是幫助用戶判斷按鈕狀態(tài)的核心.活動狀態(tài)是通過顏色對比度而不是色調傳達的。

正常狀態(tài)的按鈕的文字與背景對比起來，看上去更接近和占主導地位，而不可用狀態(tài)缺乏對比度，文字看起來在更遠的地方。不過灰色按鈕經(jīng)常被用作二級按鈕，主按鈕都是需要使用彩色。

同樣地，按鈕的各種交互狀態(tài)，只要對比度有差異性，能夠傳達視覺深度變化，就是符合無障礙的標準的，以Ant Design舉例：

2）讓你的主按鈕最顯眼

在大多數(shù)情況下，設計師們都是通過賦予主按鈕顏色，吸引用戶注意，但是在色盲用戶眼中，主按鈕的顏色差異很難被捕捉到，甚至在有些色盲眼中無法分辨顏色：

為了增加主按鈕和次按鈕的對比， 這個時候我們可以嘗試：

• 增加主按鈕尺寸的大小
• 把主按鈕和次按鈕放在不同的位置
• 描邊、圖標、字重差異化

6. 色彩組合黑榜

當你在為你的產(chǎn)品或者品牌選擇色彩時，一定要避免下面的色彩組合：

7. 超鏈接文字

網(wǎng)頁中超鏈接文本很常見，比如百度百科，如果只是用顏色區(qū)別超鏈接，對于有些色盲很難注意到這是一個超鏈接，他需要將鼠標滑過時，發(fā)現(xiàn)變成一只手，才能知道。

所以對于超鏈接文本，添加下劃線是一個很好的方式：

8. 解決色盲買衣服難題

曾經(jīng)看過一個色盲講述自己買衣服的難題， 他來到商場，看到一件衣服，但是不確定這個衣服是什么顏色，可是衣服上的標簽也沒有寫顏色，所以他只好硬著頭皮去問商店里其他的人，承受著一些不解和懷疑的目光，如果這件衣服有清晰的顏色標簽的話，就能輕松解決這個問題了。這一點對于購物網(wǎng)站來說，尤其重要。

04 如何制作色盲友好的PPT

1. PPT本身注意

1. 避免文本和對象被背景遮擋的情況。 例如，文本/對象和背景之間的亮度和飽和度應該有足夠的對比度。避免組合亮度相同但色調不同的顏色。例如，綠色背景上的紅色字符對色盲來說是不可讀的。在深色背景上使用明亮的文本/對象，反之亦然。

2. 文本和對象盡可能粗或大，色盲人很難區(qū)分細線和小符號的顏色， 對于彩色文本，一定要使用粗體字體。

3. 小心使用紅色和綠色，對于視覺正常的人來說，純紅色是明亮生動的顏色。但對于色盲來說，它就像藍色或深綠色一樣暗淡。特別是對于紅色盲來說，深紅色看起來幾乎是黑色的。因此，避免在黑色背景上使用紅色字符，包括黑板。但是有一些紅色對色盲來說是鮮活的， 比如：

避免使用純綠色，使用偏藍一點的綠色。

4. 在深藍色背景上無法看清：深紅色、明亮的紫紅色、細線條。

5. 在一堆黑色字體中，很難看到深紅色強調的字體。

6. 盡量減少顏色的數(shù)量，可以使用不同的外形和少量容易識別的顏色的組合。

7. 保持顏色色調的對比的同時，也可以添加亮度的對比。

8. 使用種類少且容易識別的字體。

2. 演講者要注意

盡量不要使用顏色的名字交流信息. 在演講時，去指代ppt上的某個東西時，不要說“那個紅色的細胞”，嘗試描述除了顏色信息之外的，比如“那個紅色的方形的位于PPT左上角的細胞”。

3. 設備和環(huán)境的選擇

• 選擇綠色激光筆，由于紅色激光筆使用長波長的光， 色盲通常很難看到指向哪里最近， 綠色激光筆可用， 色盲和非色盲都很容易看到。
• 1兆瓦的光線適合普通研討室，如果是很大很大的禮堂，可以使用5兆瓦的燈光。

05 色彩無障礙工具推薦

1. 色盲模擬工具

Stark: 色盲模擬器和顏色對比度檢查器網(wǎng)站， sketch/figma/XD插件 https://www.getstark.co

Color Oracle: 一款免費的色盲模擬軟件，支持Windows，Mac 和 Linux. https://colororacle.org

Sim Daltonism: 一款色盲模擬軟件，可以選擇不同類型的色盲.只有mac版本. https://michelf.ca/projects/mac/sim-daltonism/

Toptal:一款在線模擬色盲工具. https://www.toptal.com/designers/colorfilter

2. 顏色對比度工具

Color-contrast-checker: 顏色對比度檢查器，提供快速調節(jié)， figma插件 https://www.figma.com/community/plugin/733159460536249875/A11y—Color-Contrast-Checker

Tanaguru Contrast Finder: 檢測顏色對比度，如果你的顏色沒有達到要求，還會提供新顏色建議. https://contrast-finder.tanaguru.com

Color Review: 提供兩種顏色組合在一起的預覽，檢測結果失敗還會提供顏色建議https://color.review

color contrast checker from polypane: 提供顏色對比和修改建議. https://polypane.app/color-contrast

Accessible colors: 提供顏色對比、修改建議、還可以輸入字體大小和字重. https://accessible-colors.com

3. 為你的產(chǎn)品搭建無障礙色板

Accessible color palette builder:選擇5個顏色，網(wǎng)站會通過分析這些的顏色的排列組合，判斷你的色板是否符合無障礙標準https://toolness.github.io/accessible-color-matrix

contrast grid:通過在左側邊欄手動添加/刪減行列、編輯行列的色值，為您提供這些顏色排列組合的對比度結果，非常高效而且一目了然https://contrast-grid.eightshapes.com

Cloudflare color tool:當你不知道選擇什么顏色毫無頭緒時，你可以嘗試這個網(wǎng)站！它會幫你提取來自某個鏈接、某個圖片的顏色色板，當然你也能輸入色值.然后把這些顏色拖到對應的功能（底色、主色、背景色、描邊色），你就可以預覽下你的產(chǎn)品用了這個色板大概是什么樣子了.它同時也提供這些顏色的排列組合分析https://color.cloudflare.design

06 結語

少數(shù)群體如色盲、老齡化群體、殘障群體等等，在近些年來，他們對無障礙使用互聯(lián)網(wǎng)的需求，越來越受到關注，也許你在現(xiàn)在不需要無障礙技術的幫助，但是隨著你變老，在未來的某個階段也許無障礙技術就會大大的幫助你。

色彩無障礙只是無障礙的一小步，但是卻是證明無障礙普及進步的一大步。

參考文章:

https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c

https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness

https://modus.medium.com/the-myths-of-color-contrast-accessibility-4b7fcba77317

https://jfly.uni-koeln.de/color

https://www.bounteous.com/insights/2019/03/22/orange-you-accessible-mini-case-study-color-ratio

本文由郝小七指導http：//www.woshipm.com/u/917803

本文由 @自來卷夏憶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協(xié)議

家好，我是中科院國家天文臺的王匯娟，今天，讓我們一起來漫游太陽系！

首先，太陽系在哪里呢？縱觀正加速膨脹的宇宙，我們從數(shù)以千億的星系中，鎖定一個并不起眼的像漩渦一樣的星系，這就是銀河系。銀河系從中心旋轉出多條旋臂，太陽系就位于其中一條叫作獵戶座小旋臂的邊緣地帶。銀河系中有千億顆像太陽這樣的恒星，最新研究表明，恒星周圍存在行星是比較普遍的現(xiàn)象。就是這樣一個如滄海一粟的暗淡角落，卻幾乎是我們?nèi)祟愘囈陨娴恼麄€世界。如同生存在池塘中的魚，人類從未走出這片池塘，而人類發(fā)射的探測器也才剛剛飛出這個池塘的邊緣。

圖1. 銀河系示意圖 來源：https://www.nasa.gov/sites/default/files/images/620057main_milkyway_full.jpg

太陽系核心的天體是太陽，它的直徑是地球的109倍，體積是地球的130萬倍。如果用一枚普通雞蛋的高度（約5厘米）來代表地球的直徑，那太陽的直徑約相當于一輛大型家庭轎車的長度，太陽和地球在宇宙間就如同相隔20個籃球場的一輛轎車和一枚雞蛋。

太陽大約占據(jù)了整個太陽系總質量的99.87%，所以太陽系的其他天體都圍繞太陽公轉。太陽距離地球1.5億公里，這個距離意味著光以每秒30萬公里的速度也要跑500秒，所以我們現(xiàn)在所看到的太陽是它500秒之前的樣子。換句話說，我們每看一眼太陽，都做了一次短暫的時空穿越（備注：請注意不要在沒有專業(yè)保護的情況下通過望遠鏡直接看太陽，會對眼睛造成不可逆?zhèn)Γ。＿@里有個問題留給大家：你還能親眼看到你或你的父母出生那年的星光么？

圖2. 太陽和八大行星示意圖 來源：https://www.nasa.gov/sites/default/files/images/620057main_milkyway_full.jpg

太陽的體溫如何呢？它表面的有效溫度約為5500攝氏度，主要輻射能量集中在550納米左右，所以太陽輻射最強的是黃綠色的可見光，這也是我們?nèi)搜圩蠲舾械膮^(qū)域。太陽有約11年的活動周期，在太陽比較活躍的時期，其表面會有很多黑子。現(xiàn)在太陽正處于相對寧靜的時期。

圖3. 可見光波段的太陽和黑子 來源：https://sdo.gsfc.nasa.gov/assets/img/latest/latest_1024_HMIIF.jpg

太陽的相貌如何呢？在不同波段看到的太陽是不一樣的，通常肉眼所看到的是太陽的光球層，這也是太陽大氣的最內(nèi)層。光球層的外面是色球層，僅為光球層亮度的千分之一，平時一直淹沒在光球的光輝里，僅在日全食的時候，我們才有機會親眼見到紅色的色球層。當然，平時也可以通過專業(yè)的日珥鏡欣賞到太陽的色球層。色球上最顯著的特征就是日珥。色球的外面是日冕層，非常稀薄，但溫度卻高達百萬度。

圖4.不同波段觀測的太陽 來源：https://www.nasa.gov/mission_pages/sdo/images/index.html

太陽是由什么組成的呢？天文學家通過研究太陽光譜，可以確定太陽大氣的化學成分，按質量計算，約含70%的氫，28%的氦和2%的比氫和氦更重的元素。光譜就像是太陽的指紋。

圖5. 太陽的光譜 來源：https://apod.nasa.gov/apod/ap030629.html

太陽的能量從何而來呢？太陽的能源主要來自其中心的核聚變反應。除了核能以外，地球上所有的能量幾乎全都直接或間接來自太陽，正是這些能量孕育了地球的生命。太陽已經(jīng)走過了生命的46億年，按目前的恒星演化理論，它還能穩(wěn)定燃燒約50億年，然后會變成一個紅胖子，接近地球軌道。希望那之前我們的地球可以平安流浪或人類已找到新的家園。

主講人簡介:姜曉軍，系國家天文臺研究員，國家天文臺興隆觀測基地主任。主要從事恒星物理和天文技術研究。王匯娟，系國家天文臺星云計劃研究員。主要從事恒星物理研究。

談移動端市場下的兩大形態(tài)：應用(App)和移動端網(wǎng)站(Mobile Web) 的優(yōu)缺點及適用領域

當今移動互聯(lián)網(wǎng)的發(fā)展速度有目共睹，并且智能手機同樣保持高增速。Mary Meeker 的《2014互聯(lián)網(wǎng)趨勢報告》中提到，2013 年智能手機用戶全球已經(jīng)達到 16 億，而平板用戶也達到 4.39 億。在如此大的市場誘惑下，“得移動端者得天下”的呼聲也越來越大。

但是誰才是移動端的成功之門呢？

從現(xiàn)今行業(yè)內(nèi)的產(chǎn)品來看，切入移動端的途徑主要分為兩種：APP 應用或者移動網(wǎng)站。而這兩者又有各自適合的領域和使用場景，如果選擇不適，反而事倍功半。

APP：移動應用

如果說到誰才是占領移動端的王者，APP 可能是很多人心中的最佳答案。Flurry Analytics 在報告中提到，美國消費者每人每天將近花費 3 小時在移動設備上，而其中 86％的時間是被 APP 占領。

不可否認，APP 的表現(xiàn)確實驚人，這也吸引了公司和團隊將大量的時間和資金投入到 APP 市場的大浪淘沙中。但同樣不能忽視的是，APP 的運營永遠是繞不過的問題。如何讓用戶從：知道產(chǎn)品－>下載試用－>持續(xù)使用－>依賴，每一個過程都可能是攸關產(chǎn)品生死的關卡。前幾天看到那篇《【創(chuàng)業(yè)說】零經(jīng)驗接手APP運營推廣，聊聊這兩個月我是怎么熬過來的》，可以說是詳盡記述了 APP 這條道路的不容易。

雖然中國的人口紅利讓幾十萬甚至百千萬的 APP 下載成為可能（對于獨立 APP 來說，這在其他國家的市場是相當驚人的數(shù)字），但是在同范圍競爭下，新上線的 APP 依舊面臨了很大壓力。高投入下，更像是一場破斧沉舟的賭博。

總體而言，可能適合選擇 APP 作為產(chǎn)品載體的領域有：

· 產(chǎn)品或公司本身具有知名度，已具有一定用戶群

微信的成功不僅僅是它的產(chǎn)品本身的優(yōu)勢，也是由于騰訊和 QQ 已經(jīng)積累了大量用戶群，使得微信在推廣的時候能夠較容易的獲得 APP 用戶

· 游戲、社交類強互動產(chǎn)品

對于這兩種類型的產(chǎn)品，APP 是最好的選擇（微信的成功同樣也是因為其社交類的產(chǎn)品屬性）。因為這兩者都需要用戶投入大量時間，并且對產(chǎn)品本身質量有著較高的要求。APP 存儲于移動設備上，相較于網(wǎng)頁來說更方便用戶打開和使用；同時 APP 在產(chǎn)品上的可塑性更強，功能更完整，運行也更快更穩(wěn)定。而這些特制，都是優(yōu)秀的游戲、社交類產(chǎn)品不可或缺的要素。

· 生活必須類產(chǎn)品

比如天氣、音樂、通訊（微信同樣符合）這些與我們生活息息相關的領域，APP 是很適合的產(chǎn)品載體。早起查看天氣，用戶會直接打開天氣類應用，而很少打開瀏覽器搜索。這是因為“打開應用”一步就可以得到的信息，上網(wǎng)搜索至少須要三步。Google 將天氣、路線都整合進自己的 Google Now 應用里，也是基于同樣的理念。

當然這些只是大方向判斷的參考，真正成功的應用產(chǎn)品往往又不在條條框框之內(nèi)。還是回到最初的問題，對于 APP 來說，如何完成從“下載量”到“活躍用戶數(shù)”的轉化，才是決勝的節(jié)點。

Mobile Web : 移動端網(wǎng)站

相較于 APP 來說，Mobile Web 的關注則是黯淡許多，從時間占有來看也只有 14％（Flurry Analytics 關于美國消費者移動端使用的報告）。但是移動端網(wǎng)站具有自己獨特的優(yōu)勢：投入相對較小，可以快速更新和改版。和 APP 每次更新需要用戶重新登陸應用平臺商店不同，網(wǎng)站可以反復多次修復 bug，完全不需要用戶進行任何操作。

而移動端網(wǎng)站最重要的優(yōu)勢是：用戶試用門檻幾近于零，并且易于分享和傳播。對于 APP 來說，讓用戶愿意下載這個 APP 本身就是運營的第一道難題。即使用戶點擊了廣告，它也只能把用戶帶到應用商店，而下載與否還是要看用戶個人意愿；同時，用戶在下載 APP 時也會考慮設備的儲存空間以及個人隱私等其他問題。而移動端網(wǎng)頁則沒有這個難題，如果用戶在手機上點擊鏈接便可直接到達網(wǎng)頁。同樣網(wǎng)站的分享基本沒有平臺限制，不論是在其他網(wǎng)站，還是在某 APP 內(nèi)部，只要粘貼網(wǎng)址就可以進行信息分享擴散。

同樣，移動端網(wǎng)站也有自己的軟肋：即使 HTML 5 已經(jīng)可以完成較高難度的交互腳本，但是依然存在很多限制，這和 APP 的使用效果是不能相比的；另一點是由于不同的瀏覽器會影響網(wǎng)站的呈現(xiàn)。比如說已經(jīng)落伍很久的 IE 6，那是基本上都跑不起來的??

就用戶黏著性來說，移動網(wǎng)站比 APP 低很多。因為除了忠實用戶，很少有人會每天主動搜索特定的網(wǎng)站。但是現(xiàn)在移動網(wǎng)站的瀏覽量已經(jīng)不依靠搜索引擎，而是社交應用。舉例來說，F(xiàn)acebook 對新聞媒體類網(wǎng)站的導流已經(jīng)達到 30～40％。這一趨勢也使得用戶會直接進入網(wǎng)站某一內(nèi)容頁面，而主頁的瀏覽量驟減。

可能適合 Mobile Web 的領域有：

· 新聞媒體：

信息量大、更新速度快是媒體的兩大重點，而移動網(wǎng)站相對投入壓力較小，可以反復更改。而且當前技術已經(jīng)可以支持媒體類網(wǎng)站進行“類 APP”的交互，時代周刊 Time.com 以及美國美妝類雜志 Lipstick.com 就是針對移動端使用情景，進行了有針對性的優(yōu)化設計。

· 獨立品牌：

這里提到的電商是指品牌，比如雅詩蘭黛或者優(yōu)衣庫，而不是亞馬遜、淘寶一類的平臺網(wǎng)站。這種品牌網(wǎng)站用戶可能會在移動端進行消費，但是使用頻率較低。在一個月就打開一兩次的情況下，大部分用戶不會愿意為此專門下載一個占空間的 APP。

· 兼有網(wǎng)站和APP的產(chǎn)品：

如果產(chǎn)品本身就有網(wǎng)站，那么移動端網(wǎng)站就是最好的 APP 下載前哨戰(zhàn)。以 LinkedIn 為例，如果打開它的移動端網(wǎng)站，屏幕最上方會推送 LinkedIn APP 的廣告。如果用戶在移動端網(wǎng)站反復看到這個推送，很可能會直接下載 APP。

以上是個人對于 Mobile App 和 Mobile Web 的淺見。雖然我們依舊相信“真金”的產(chǎn)品是不拘泥于產(chǎn)品形態(tài)的“火煉”，但是如何更好的發(fā)揮 App 以及 Web 的優(yōu)勢則是產(chǎn)品設計與開發(fā)中應該考慮的問題。至于其他的硬件障礙，比如 App 的運行配置以及網(wǎng)站的網(wǎng)速和流量，就交給硬件團隊和移動運營商吧。

iPhone 都有了大屏，4G 網(wǎng)絡也即將擴大覆蓋區(qū)域。東風已俱，你的產(chǎn)品準備好了嗎？

作者簡介：本文作者為 36氪特約作者雁云，她是一位用戶體驗設計師，現(xiàn)居紐約，就職于某國際傳媒集團。相信互聯(lián)網(wǎng)改變了人們的生活，而設計提高了生活的質量，讓一切更美好。

[36氪原創(chuàng)文章，作者: 雁云]

AD: Windows Phone 開發(fā)者交流沙龍 北京站啟動 立即報名