整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
久沒(méi)有推薦網(wǎng)站了，最近小美又翻出來(lái)幾個(gè)超級(jí)實(shí)用的，有翻譯、有全能搜索、有打字練習(xí)，還有超好用的音視頻+ PDF 編輯，都是值得收藏的網(wǎng)頁(yè)工具，快來(lái)看看有沒(méi)有你的菜吧~
◆ ◇ ◆
DeepL 因?yàn)槠溥^(guò)于強(qiáng)大的翻譯效果，去年在推特上火了一把，相比谷歌翻譯的機(jī)翻，它可以將一段文字翻譯到盡可能的通順和便于理解，甚至是俚語(yǔ)、方言、名言名句、古詩(shī)詞等內(nèi)容都可以幾乎沒(méi)有任何語(yǔ)病的翻譯出來(lái)，讓體驗(yàn)過(guò)的用戶都直呼**！
自從發(fā)現(xiàn)了 DeepL 后，小美已經(jīng)把它加入了最常用的書(shū)簽位置，日常翻譯內(nèi)容的主力也成了它，因?yàn)樾Ч麑?shí)在是太好了，直觀一點(diǎn)，幫大家舉幾個(gè)栗子看看吧！（和谷歌翻譯及某國(guó)內(nèi)翻譯對(duì)比）
▲ 文言文《滕王閣序》
在這個(gè)文言文對(duì)比中，DeepL 完勝，不光分析出了語(yǔ)句中意象和動(dòng)名詞等之間的關(guān)系，而且?guī)缀跬耆€原了本意，另外兩個(gè)翻譯在每一句基本都有翻車(chē)的地方……
▲（假裝是）方言
在這一部分，DeepL 同樣是完勝，不光完美翻譯了原意，還給出了相近意思，而谷歌翻譯只對(duì)了后半句，而最后那款國(guó)內(nèi)的翻譯工具居然一句都不對(duì)……
▲ 英文新聞
這一局 DeepL 又贏了，意思語(yǔ)序正確，沒(méi)有病句，谷歌翻譯意思基本也對(duì)，但是語(yǔ)序和邏輯很混亂，國(guó)內(nèi)翻譯算是扳回一城，第二三段翻譯地還算準(zhǔn)確一些，但是第一段不太行……
作為一款翻譯工具，基本比較這些內(nèi)容也差不多了，好不好用已經(jīng)很清楚了，雖然文中只做了一點(diǎn)點(diǎn)測(cè)試，但是日常使用會(huì)感受的更明顯一些。
值得一提的是，DeepL 有付費(fèi)版本，免費(fèi)用戶單次翻譯最大字?jǐn)?shù)為 5000 字，支持直接翻譯文檔，但是免費(fèi)用戶不能修改文檔內(nèi)容，另外，還支持自定義術(shù)語(yǔ)，可以在翻譯時(shí)按照你設(shè)置的內(nèi)容翻譯指定內(nèi)容。
◆ ◇ ◆
這是一款搜索聚合的應(yīng)用，支持的搜索引擎和搜索方式非常全面，從百度、谷歌、必應(yīng)到百科、地圖、知乎、豆瓣，甚至是微博、微信文章、京東淘寶、種子磁鏈等都是可以通過(guò)「思谷搜」搜到的，十分強(qiáng)大。
除了搜索功能，思谷搜還是一個(gè)資源站點(diǎn)整合的網(wǎng)頁(yè)，按照音樂(lè)、書(shū)籍、影視、學(xué)習(xí)等不同類(lèi)別整理了很多優(yōu)質(zhì)的網(wǎng)站，完全可以把它當(dāng)成一個(gè)導(dǎo)航頁(yè)來(lái)使用。
除此之外，思谷搜專(zhuān)門(mén)的學(xué)術(shù)版塊，對(duì)于在做學(xué)術(shù)研究和撰寫(xiě)畢業(yè)論文的小伙伴們也是一大利器，它提供了谷歌搜索的鏡像服務(wù)，對(duì)于無(wú)法自行訪問(wèn)谷歌的朋友，可以在這里方便的進(jìn)行谷歌搜索。
◆ ◇ ◆
碼字碼多了越來(lái)越發(fā)現(xiàn)一個(gè)規(guī)范打字姿勢(shì)的重要性，小時(shí)候把金山打字通當(dāng)成游戲玩，并沒(méi)有養(yǎng)成打字習(xí)慣，日常打字更多的還是二指禪三指禪，無(wú)形中增加了工作負(fù)擔(dān)還降低了很多效率。
而打字姿勢(shì)本身就更多的是一種肌肉記憶，充分的練習(xí)是必不可少的，你需要讓自己的身體記住每個(gè)鍵位應(yīng)該用哪個(gè)手指去敲擊是最快捷和省事的。
TypingClub 就是一款專(zhuān)門(mén)針對(duì)這樣的打字練習(xí)而開(kāi)發(fā)的一套網(wǎng)頁(yè)訓(xùn)練工具，他可以從每個(gè)字母對(duì)應(yīng)的鍵位開(kāi)始單一練習(xí)，像這樣：
你可以從一個(gè)字母開(kāi)始逐漸提升復(fù)雜程度，到兩個(gè)、四個(gè)，甚至全鍵位，持續(xù)的練習(xí)養(yǎng)成肌肉記憶，對(duì)日常打字和以后的工作效率都有極大的幫助。
為了提升訓(xùn)練的趣味性和成就感，TypingClub 專(zhuān)門(mén)設(shè)計(jì)了一系列的關(guān)卡和成績(jī)展示，還提供了除了簡(jiǎn)單打字之外的一些小游戲，練習(xí)的過(guò)程會(huì)很豐富。
▲ 關(guān)卡設(shè)置
▲ 成績(jī)展示
另外，在功能方面，還支持設(shè)置指法提示，假如你只有左手不太熟練，可以只提示左手的對(duì)應(yīng)指法加強(qiáng)鍛煉；還支持鍵帽更換，字體修改等視覺(jué)化的自定義設(shè)置等。
效果真的真的非常好！推薦給所有打字不規(guī)范且想要練習(xí)的小伙伴~
◆ ◇ ◆
壓軸的來(lái)了！這是一個(gè)多媒體功能集合的工具型網(wǎng)頁(yè)，主要針對(duì)的是這幾種常見(jiàn)文件類(lèi)型：音樂(lè)、視頻、壓縮包、PDF。
123APPS 作為一個(gè)網(wǎng)頁(yè)工具，它在音視頻編輯方面，提供了剪切、合并和轉(zhuǎn)碼的功能，同時(shí)音頻編輯支持漸入漸出的效果和精確的時(shí)間設(shè)置，而視頻編輯則額外支持了畫(huà)面旋轉(zhuǎn)、裁剪和畫(huà)質(zhì)切換的功能，非常實(shí)用。
▲ 音頻剪切
▲ 視頻剪切
在轉(zhuǎn)碼方面，音視頻也都支持了絕大多數(shù)常見(jiàn)和不常見(jiàn)的的媒體格式，并且支持直接打開(kāi)網(wǎng)盤(pán)中的文件，還可以針對(duì)輸出文件的音質(zhì)和畫(huà)質(zhì)設(shè)置：
另外兩項(xiàng)值得一提的是壓縮包解壓和 PDF 工具合集。
其中，壓縮包解壓功能支持打開(kāi)本地文件和網(wǎng)盤(pán)中的文件，并且支持幾乎所有的壓縮文件格式，超過(guò) 70 種，另外也包括分文件的壓縮格式。
最后，PDF 工具是 123APPS 里功能最豐富的一個(gè)部分，它甚至可以作為單獨(dú)的一個(gè)網(wǎng)頁(yè)工具來(lái)介紹，包括 PDF 分割、合并、縮小文件大小、 Office 三件套互轉(zhuǎn)、圖片互轉(zhuǎn)、文件解鎖加密、HTML 轉(zhuǎn)換、新增頁(yè)等，常用的 PDF 功能幾乎都具備了。
怎么樣？功能這么豐富的一個(gè)工具，只需要?jiǎng)觿?dòng)小手收藏到瀏覽器書(shū)簽，就可以隨時(shí)隨地的打開(kāi)使用了，而且這是一個(gè)完全免費(fèi)的網(wǎng)頁(yè)哦~
好啦~今天的網(wǎng)頁(yè)專(zhuān)題就介紹到這，不知道今天這幾個(gè)網(wǎng)頁(yè)工具你有沒(méi)有 get 到呢？小美之前也介紹過(guò)不少了，如果你還知道哪些有趣實(shí)用的網(wǎng)站，不妨在下面一起分享下哦~
——————
上一篇：php基礎(chǔ)知識(shí)
主要參考：https://www.w3school.com.cn
思維導(dǎo)圖
思維導(dǎo)圖第一版
web網(wǎng)站可以說(shuō)是互聯(lián)網(wǎng)的基礎(chǔ)。每個(gè)網(wǎng)站，可以比喻為一座座房子。寬帶網(wǎng)絡(luò)，就是房子門(mén)前的路。url地址，就是房子的門(mén)牌標(biāo)志。HTML代碼，就是建造房子的建筑材料（磚頭、水泥、鋼筋）；CSS代碼，就是裝修房子的裝修材料；那么Javascript代碼就是這房子的水電了？ JS代碼則更像是未來(lái)世界可以讓房子成為變形金剛的智能機(jī)器。因此，一些展示“老房子”的瀏覽器，可能并不支持Javascript。
定義：
HTML（Hyper Text Markup Language），是使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)的一種超文本標(biāo)記語(yǔ)言。
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容。HTML定義網(wǎng)頁(yè)的內(nèi)容。
CSS（Cascading Style Sheets），指層疊樣式表。樣式定義如何顯示HTML元素，規(guī)定網(wǎng)頁(yè)的布局。
Javascript 則是屬于HTML和Web的編程語(yǔ)言，對(duì)網(wǎng)頁(yè)進(jìn)行編程。
Jquery 是一個(gè)Javascript函數(shù)庫(kù)
參考上一篇：php基礎(chǔ)知識(shí)，安裝-集成環(huán)境與編輯器
推薦使用 phpstudy + phpstorm
操作步驟：1、在phpstudy 安裝目錄下，把代碼文件放大到根目錄www/ 下。
2、瀏覽器直接訪問(wèn) localhost/index.html即可看到效果。
HTML元素：是從開(kāi)始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
例如：<p>前面這個(gè)是開(kāi)始標(biāo)簽，中間文字是元素內(nèi)容，后面這個(gè)是結(jié)束標(biāo)簽</p>
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開(kāi)始標(biāo)簽中規(guī)定。
常用HTML元素屬性：
class ：規(guī)定元素的類(lèi)名（classname），一個(gè)html文件里面多個(gè)標(biāo)簽可以擁有相同的類(lèi)名。
id ：規(guī)定元素的唯一 id，一個(gè)html文件里面id不能相同。
style ：規(guī)定元素的行內(nèi)樣式（inline style）
1、標(biāo)題：標(biāo)題（Heading）是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
2、段落：通過(guò) <p> 標(biāo)簽定義。
3、注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋。
4、鏈接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 屬性規(guī)定鏈接的目標(biāo)。開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。
5、圖像：<img src="yummuu.png" alt="Yummuu" /> 。src 圖像源屬性，alt替換文本屬性。
6、表格標(biāo)簽：
7、列表標(biāo)簽
8、塊級(jí)元素和內(nèi)聯(lián)元素
<div> 元素是塊級(jí)元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒(méi)有特定的含義。除此之外，由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行。如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span> 元素也沒(méi)有特定的含義。
當(dāng)與 CSS 一同使用時(shí)，<span> 元素可用于為部分文本設(shè)置樣式屬性。
兩者的區(qū)別：就是在顯示時(shí)是否起新行。塊級(jí)元素會(huì)起新行，而內(nèi)聯(lián)元素則不會(huì)。
9、框架與內(nèi)聯(lián)框架：frame，<iframe src=" " name=" "></iframe>
10、腳本：<script> 定義客戶端腳本，如Javascript；<noscript> 為不支持客戶端腳本的瀏覽器定義替代內(nèi)容。
11、頭部元素：
<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標(biāo)簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title>：在所有 HTML/XHTML 文檔中都是必需的。它能夠定義瀏覽器工具欄中的標(biāo)題，提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題，顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題。
<base>：為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）
<link> ：定義文檔與外部資源之間的關(guān)系。最常用于連接樣式表。
<style>：用于為 HTML 文檔定義樣式信息。
<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。典型的情況是，meta 元素被用于規(guī)定頁(yè)面的描述、關(guān)鍵詞、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。
<meta> 標(biāo)簽始終位于 head 元素中。元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
<script> 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。
12、HTML實(shí)體
在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）。
13、表單元素：
<form> ：定義 HTML 表單。
<input> ：是最重要的表單元素。<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性。
input的輸入類(lèi)型type有text、password、submit、radio、checkbox、button；（HTML5新增）number、date、color、range、month、week、time、datetime、datetime-local、email、search、tel、url。
input的常用屬性：value、readonly、disabled、size、maxlength；（HTML5新增）required、multiple、pattern、min和max、list、height和width、autocomplete
<select> ：定義下拉列表 <option> 元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)。您能夠通過(guò)添加 selected 屬性來(lái)定義預(yù)定義選項(xiàng)。
<textarea>：定義多行輸入字段（文本域）
<button>：定義可點(diǎn)擊的按鈕
樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。
層疊次序
當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？
一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
1、瀏覽器缺省設(shè)置
2、外部樣式表
3、內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
4、內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)。
selector {property: value}
1、派生選擇器：
通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，例如: h1 span{color:red;}
2、id選擇器：
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來(lái)定義。
3、類(lèi)選擇器：
以一個(gè)點(diǎn)號(hào)顯示，例如： .className{text-align: center;}
4、屬性選擇器：
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。例如： div[rel=’mm’]{ color:’#000’;}
可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。
注釋?zhuān)褐挥性谝?guī)定了 !DOCTYPE 時(shí)，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
5、后代選擇器（包含選擇器）：可以選擇作為某元素后代的元素
6、子元素選擇器：選擇作為某元素子元素的元素。例如：h1>span{font-size:16px;}
7、相鄰兄弟選擇器：可選擇緊接在另一元素后的元素，且二者有相同父元素。
例如：h1 + p {margin-top:50px;}
8、偽類(lèi)：用于向某些選擇器添加特殊的效果。
:active 向被激活的元素添加樣式
:focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式
:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式
:link 向未被訪問(wèn)的鏈接添加樣式
:visited 向已被訪問(wèn)的鏈接添加樣式
:first-child 向元素的第一個(gè)子元素添加樣式（不建議使用）
:lang 向帶有指定lang屬性的元素添加樣式
9、偽元素：用于向某些選擇器設(shè)置特殊效果。
:first-letter 向文本的第一個(gè)字母添加樣式
:first-line 向文本的首行添加樣式
:before 在元素之前添加內(nèi)容
:after 在元素之后添加內(nèi)容
輯導(dǎo)語(yǔ)：個(gè)人資料卡頁(yè)面可以讓用戶更加了解創(chuàng)作者及其創(chuàng)作內(nèi)容，吸引用戶關(guān)注，推動(dòng)后續(xù)留存，進(jìn)而推動(dòng)有效的內(nèi)容漲粉變現(xiàn)。那么，應(yīng)該如何針對(duì)性地做好相應(yīng)頁(yè)面設(shè)計(jì)？本篇文章里，作者結(jié)合實(shí)際案例，就信息流產(chǎn)品如何設(shè)計(jì)個(gè)人資料卡做了總結(jié)，一起來(lái)看一下。
在信息流產(chǎn)品中，個(gè)人資料卡是一個(gè)很重要的頁(yè)面。一方面，創(chuàng)作者通過(guò)這個(gè)頁(yè)面展示賬號(hào)價(jià)值，突顯賬號(hào)魅力，引導(dǎo)用戶關(guān)注；另一方面，消費(fèi)型用戶通過(guò)這個(gè)頁(yè)面了解創(chuàng)作者，查看創(chuàng)作者更多內(nèi)容，是眾多消費(fèi)型用戶消費(fèi)內(nèi)容中重要的一環(huán)。只有把這個(gè)循環(huán)做好才能長(zhǎng)期促進(jìn)平臺(tái)生態(tài)發(fā)展。
這個(gè)頁(yè)面承載著這么多的價(jià)值，該如何設(shè)計(jì)？本篇將以QB看點(diǎn)號(hào)資料卡升級(jí)的設(shè)計(jì)思路為例，進(jìn)行分析解答。
在前期分析過(guò)程中，我們發(fā)現(xiàn)當(dāng)前版本存在諸多問(wèn)題。從數(shù)據(jù)上看，對(duì)比公司內(nèi)同類(lèi)產(chǎn)品，關(guān)注按鈕轉(zhuǎn)化率較低（出于數(shù)據(jù)保護(hù)、數(shù)據(jù)隱藏）。
從樣式上看，信息布局較亂，重點(diǎn)不突出。
基于以上背景，我們開(kāi)始對(duì)資料卡進(jìn)行改版升級(jí)。
做任何一個(gè)設(shè)計(jì)前，都應(yīng)該思考設(shè)計(jì)目標(biāo)，否則設(shè)計(jì)出來(lái)的結(jié)果沒(méi)有意義，也缺乏過(guò)程依據(jù)和支撐。那么資料卡的設(shè)計(jì)目標(biāo)是什么呢？這要從資料卡在信息流產(chǎn)品中的使命和價(jià)值說(shuō)起。
一方面，消費(fèi)型用戶通過(guò)這個(gè)頁(yè)面了解創(chuàng)作者，查看更多內(nèi)容；另一方面，創(chuàng)作者通過(guò)這個(gè)頁(yè)面展示賬號(hào)價(jià)值，突顯賬號(hào)魅力，引導(dǎo)瀏覽者關(guān)注。
如果創(chuàng)作者能夠在資料卡充分展現(xiàn)自己的才華和魅力，帶來(lái)了更多瀏覽者的“關(guān)注”，那他們就更有動(dòng)力分享或生產(chǎn)優(yōu)質(zhì)內(nèi)容，進(jìn)而使產(chǎn)品內(nèi)容更加豐富；從而吸引更多新用戶的瀏覽、留存。
更多新用戶的加入、瀏覽、留存，讓內(nèi)容生產(chǎn)者有更多的漲粉空間，粉絲規(guī)模做起來(lái)之后再進(jìn)行商業(yè)化。這樣對(duì)消費(fèi)型用戶、內(nèi)容生產(chǎn)者、平臺(tái)方都有利，進(jìn)而處于良性循環(huán)。
了解了資料卡的使命和價(jià)值，設(shè)計(jì)目標(biāo)也呼之欲出，作為平臺(tái)方，我們需要幫創(chuàng)作者解決兩個(gè)問(wèn)題：輔助創(chuàng)作者吸粉 & 助力商業(yè)化變現(xiàn)。
當(dāng)然，創(chuàng)作者產(chǎn)出優(yōu)質(zhì)的內(nèi)容才是吸粉的關(guān)鍵，平臺(tái)方只能助攻。但不同的信息流產(chǎn)品有著不同的定位和側(cè)重點(diǎn)，吸引著不同的用戶，所以資料卡設(shè)計(jì)的樣式也不盡相同。
在輔助創(chuàng)作者吸粉這里，有兩個(gè)維度可以思考：
1）內(nèi)容展示分析
在資料卡中，有三個(gè)大區(qū)域：頭圖區(qū)，信息區(qū)和作品區(qū)。
通過(guò)對(duì)比市面20+信息流產(chǎn)品，我們發(fā)現(xiàn)了一些有趣的規(guī)律：
① 頭圖區(qū)：越是社區(qū)向產(chǎn)品，對(duì)頭圖個(gè)性化重視程度越高，而資訊類(lèi)的產(chǎn)品則不太重視。
從產(chǎn)品功能上來(lái)看，越是偏向于社區(qū)類(lèi)屬性產(chǎn)品，頭圖區(qū)域越大，可自定義替換的范圍也越廣。從用戶使用角度來(lái)看，社區(qū)類(lèi)產(chǎn)品的用戶也更愛(ài)展示自我，頭圖替換的比例也更大，風(fēng)格更多樣化。而資訊類(lèi)產(chǎn)品的創(chuàng)作者大多使用默認(rèn)頭圖，并不進(jìn)行個(gè)性化設(shè)置，自定義頭圖的比例很小。
所以我們?cè)谠O(shè)計(jì)頁(yè)面布局時(shí)，需要思考自身產(chǎn)品定位以及創(chuàng)作者需求，把有限的空間利用在刀刃上。
② 信息區(qū)：越是追求多元化收益商業(yè)化的產(chǎn)品，信息區(qū)承載量越大。
創(chuàng)作者不是活雷鋒，想讓他長(zhǎng)久的留在平臺(tái)必然需要給到創(chuàng)作者更多收益（收益除了顯性也有隱形的，比如B站，很多創(chuàng)作者在B站發(fā)文平臺(tái)收益相比其他平臺(tái)少，但因?yàn)槠放坡暳看蟆⒎諊茫@得了巨大的關(guān)注和曝光，所以即使收益低，創(chuàng)作者也會(huì)持續(xù)在平臺(tái)投稿）。
除了流量分成外，平臺(tái)們也在幫助創(chuàng)作者實(shí)現(xiàn)多元化的收益，比如商鋪、直播、付費(fèi)課程粉絲圈等。甚至抖音很多創(chuàng)作者直接把商務(wù)合作寫(xiě)在了個(gè)人簡(jiǎn)介中招商引資。所以這個(gè)區(qū)域，隨著多元化商業(yè)收入的更多嘗試，信息承載量也越來(lái)越大。
③ 內(nèi)容區(qū)：越是長(zhǎng)內(nèi)容，越傾向于展示更多作品和更多信息；越是短內(nèi)容，越是“看就完了”。
對(duì)比多款產(chǎn)品我們發(fā)現(xiàn)，越是長(zhǎng)內(nèi)容的產(chǎn)品，在內(nèi)容區(qū)越是注重效率選擇。通常會(huì)顯示更多內(nèi)容，且單條內(nèi)容會(huì)顯示更多維度幫助瀏覽者決策是否點(diǎn)擊查看。猜測(cè)可能是因?yàn)閮?nèi)容較長(zhǎng)，瀏覽者通常會(huì)花費(fèi)更多精力在選擇上。而越是短內(nèi)容，把單條內(nèi)容放大，促進(jìn)瀏覽者點(diǎn)擊，直接“看就完了”，反正一條也沒(méi)太長(zhǎng)時(shí)間。
所以設(shè)計(jì)資料卡時(shí)，需要設(shè)計(jì)者清晰了解自己平臺(tái)內(nèi)容特征以及用戶行為偏好，做出更合適自己平臺(tái)風(fēng)格的設(shè)計(jì)。
綜上，在做內(nèi)容布局展示時(shí)，需要綜合考慮產(chǎn)品定位，思考這些區(qū)域?qū)τ诋a(chǎn)品和創(chuàng)作者瀏覽者意味著什么。
比如頭圖區(qū)域，資訊類(lèi)產(chǎn)品并不重視，畢竟賬號(hào)還是靠?jī)?nèi)容說(shuō)話，即便是放張個(gè)性化頭圖，瀏覽者也不會(huì)因此而關(guān)注。而且大家都使用默認(rèn)頭圖，個(gè)性化無(wú)從說(shuō)起，就更沒(méi)有什么意義了。
那么如何讓頭圖有價(jià)值？創(chuàng)作者愿意為此更換，而瀏覽者看到能夠感受到帳號(hào)的特殊性？
筆者提供一個(gè)思路拋磚引玉，參考App Store的編輯精選：只有精選的APP才可以有頭圖權(quán)利，其他APP都是默認(rèn)樣式。而稀缺性和被認(rèn)可，正是人類(lèi)所追逐和渴望的。如果平臺(tái)選出一些精選帳號(hào)，賦予其設(shè)置頭圖資格。作為創(chuàng)作者，非常有意愿去更換，因?yàn)榭梢泽w現(xiàn)出和其他賬號(hào)的不同。瀏覽者也可以通過(guò)頭圖感受到當(dāng)前賬號(hào)的優(yōu)質(zhì)屬性。
2）用戶行為關(guān)注調(diào)研
既然要幫賬號(hào)吸粉，那么我需要了解瀏覽者的行為偏好，知曉瀏覽者根據(jù)哪些內(nèi)容判斷是否關(guān)注該賬號(hào)。
這里我們線下調(diào)研了12名用戶，了解他們?cè)谛畔⒘鳟a(chǎn)品中（產(chǎn)品不限于B站、抖音、小紅書(shū)、知乎、快手等）進(jìn)入資料卡后，通過(guò)哪些信息和元素來(lái)決策是否關(guān)注賬號(hào)。
通過(guò)訪談，我們得到了12名用戶的原始表述。
我們發(fā)現(xiàn)，瀏覽者在關(guān)注賬號(hào)的時(shí)候，主要在意“內(nèi)容是不是感興趣” 、“粉絲量多少” 和 “內(nèi)容領(lǐng)域”。少量同學(xué)提到了會(huì)關(guān)注下作品數(shù)，其他信息基本不看。
原話摘錄：
〇主要看作者發(fā)的內(nèi)容，把高播放量的看一下，如果都比較感興趣就會(huì)關(guān)注。會(huì)看一下粉絲量，粉絲量多代表質(zhì)量比較好，關(guān)注不會(huì)踩坑。作品數(shù)會(huì)看一眼，如果作品太少，比如5個(gè)以下就不關(guān)注了直接看。
〇只看內(nèi)容，其他作者資料基本都不看，偶爾看一下粉絲數(shù)。教程不看粉絲數(shù)，教程如果是我需要的內(nèi)容，就算粉絲少我也會(huì)關(guān)注。
〇主要看作者別的視頻，關(guān)注主要是為收藏，不看別的只看所有視頻。會(huì)關(guān)注最近內(nèi)容的播放量怎么樣，其他基本不看。
〇那肯定是看內(nèi)容是不是感興趣啊，關(guān)鍵還是看內(nèi)容，粉絲量和點(diǎn)贊作品數(shù)會(huì)看一下，但不會(huì)作為關(guān)注的主要原因。如果粉絲量作品數(shù)多的話，關(guān)注動(dòng)力會(huì)大一些。其他的都不看。
〇還是看內(nèi)容是不是感興趣。粉絲量分情況，特別需要的內(nèi)容不關(guān)注粉絲量，搞笑類(lèi)生活類(lèi)的會(huì)看下粉絲量再考慮是不是關(guān)注。有一些作者如果只看個(gè)別內(nèi)容感興趣但整個(gè)領(lǐng)域不感興趣的話不會(huì)關(guān)注。通過(guò)標(biāo)題大概判斷是不是自己喜歡的類(lèi)型，最主要的還是內(nèi)容，其他的不看，粉絲量會(huì)看一下別太差就行。
而在操作路徑上，進(jìn)入資料卡后：先到作品區(qū)查看內(nèi)容列表→拖動(dòng)頁(yè)面向上查看更多內(nèi)容→返回信息區(qū)查看粉絲量→關(guān)注賬號(hào)。呈現(xiàn)先下后上的操作路徑。
行為路徑結(jié)合關(guān)注決策，有三個(gè)關(guān)鍵元素是形成操作鏈條并綁定在一起：內(nèi)容、粉絲數(shù)、關(guān)注按鈕。且內(nèi)容為高播放量?jī)?nèi)容，所以高播放量?jī)?nèi)容，粉絲數(shù)是決策關(guān)鍵，激發(fā)下一步關(guān)注行為。
而且我們?cè)谠L談中發(fā)現(xiàn)，關(guān)注行為也是一個(gè)偏沖動(dòng)行為，用戶通常在進(jìn)入資料卡的幾分鐘內(nèi)做出決定，在頁(yè)面停留時(shí)間越長(zhǎng)，越不容易發(fā)生關(guān)注行為。所以在設(shè)計(jì)中，盡量縮短決策路徑，減少?zèng)Q策時(shí)間。
基于以上結(jié)論我們做了兩個(gè)方案再次進(jìn)行測(cè)試：
為什么做一個(gè)傳統(tǒng)方案進(jìn)行對(duì)比測(cè)試也是因?yàn)楝F(xiàn)在很多產(chǎn)品資料卡頁(yè)面趨同，大家已經(jīng)形成了認(rèn)知慣性，而尊重用戶習(xí)慣也是產(chǎn)品設(shè)計(jì)中需要考量的因素。接下來(lái)，我們又找了12名同學(xué)進(jìn)行訪談和測(cè)試。
出乎意料的是，大家對(duì)于新事物的接受程度很高，有八名同學(xué)選擇方案2。雖然只是理論上的選擇，并沒(méi)有延伸到實(shí)際行為，但也佐證了大家對(duì)于高播放量?jī)?nèi)容確實(shí)存在很高的需求。對(duì)于選擇方案1（傳統(tǒng)樣式）的同學(xué)來(lái)說(shuō)，主要是不喜歡橫滑操作和不想改變既有習(xí)慣。
原話摘錄：
〇喜歡方案1，不喜歡橫滑，習(xí)慣豎著操作，標(biāo)題清晰。
〇喜歡方案1，橫著這樣展示好像沒(méi)有豎著這樣展示清晰，喜歡這種長(zhǎng)條的樣式。
〇喜歡方案2，喜歡這個(gè)，重點(diǎn)突出，符合我的習(xí)慣，如果高播放量?jī)?nèi)容都不錯(cuò)我就會(huì)關(guān)注，省得找來(lái)找去了。
〇喜歡方案2，上面這個(gè)類(lèi)似youtube的popular uploads的東西能讓你第一眼看出這個(gè)UP主牛在哪。
不管哪種樣式，內(nèi)容都是重中之重。既然是重中之重，大家也會(huì)注意到，有些內(nèi)容區(qū)視頻是雙列形式，有些視頻是單列形式。那么瀏覽者如何看待這種區(qū)別呢？會(huì)對(duì)關(guān)注產(chǎn)生影響嗎？
基于兩種樣式進(jìn)行訪談，比分最后打成平手。雖然在2選1的要求下大家各有各的選擇，但最后也都表示差不太多，都能接受。從信息利用率上來(lái)講，雙列的形態(tài)展示的內(nèi)容更多，而且對(duì)視頻更加友好，預(yù)覽圖比較大。所以如果是視頻內(nèi)容，可以使用雙列大預(yù)覽圖樣式。
以上是關(guān)注吸粉的部分，設(shè)計(jì)時(shí)需要綜合考慮產(chǎn)品定位和用戶行為特征進(jìn)行頁(yè)面布局。
商業(yè)化能力是創(chuàng)作者與平臺(tái)形成強(qiáng)關(guān)系的紐帶。平臺(tái)為幫助創(chuàng)作者變現(xiàn)，不僅通過(guò)各類(lèi)扶持政策給予補(bǔ)貼， 更是通過(guò)整合各類(lèi)商業(yè)資源，不斷拓展商業(yè)化渠道，打通全流程商業(yè)鏈條，幫助創(chuàng)作者實(shí)現(xiàn)內(nèi)容價(jià)值最大化。一般平臺(tái)提供商業(yè)化有三種類(lèi)型。
1）基礎(chǔ)工具
2）平臺(tái)政策
3）資源整合
商業(yè)資源整合：整合平臺(tái)內(nèi)外部的廣告主資源、商業(yè)活動(dòng)資源、投融資服務(wù)、新媒體賬號(hào)孵化等各類(lèi)資源。
資料卡涉及到的商業(yè)化展示主要為：電商能力、內(nèi)容付費(fèi)、粉絲圈/粉絲付費(fèi)。當(dāng)有這些商業(yè)化內(nèi)容的時(shí)候，通常占用信息區(qū)一行區(qū)域，大多數(shù)信息流產(chǎn)品多如此。
但當(dāng)多種商業(yè)化能力同時(shí)提供時(shí)，不同的產(chǎn)品給出了不同的解決方案。比如大多數(shù)產(chǎn)品合并在信息區(qū)的一行，通過(guò)橫劃展示更多，以保證其他內(nèi)容的露出。畢竟對(duì)于瀏覽者來(lái)講，內(nèi)容才是最重要的。
有一些產(chǎn)品則沒(méi)有選擇合并的方式而每個(gè)占用一行空間，與此同時(shí)，把創(chuàng)作者的信息展示的也更為詳細(xì)，可能和本身社區(qū)類(lèi)產(chǎn)品的定位有關(guān)，希望更能關(guān)注除了內(nèi)容以外，創(chuàng)作者自身的獨(dú)特價(jià)值。
還有一些產(chǎn)品則利用了內(nèi)容tab區(qū)域承載櫥窗和付費(fèi)服務(wù)，減少信息區(qū)的占用，還可以通過(guò)邏輯把不同渠道或不同場(chǎng)景的用戶引導(dǎo)不同tab，讓瀏覽者看到更適合自己的內(nèi)容。
資料卡里承載了很多的信息，從創(chuàng)作者的個(gè)性展示到內(nèi)容到商業(yè)化變現(xiàn)，需要我們不斷平衡每個(gè)區(qū)域的關(guān)系。
別的產(chǎn)品這么做，并不一定適合自己的業(yè)務(wù)，需要我們找準(zhǔn)自己產(chǎn)品的定位，結(jié)合當(dāng)下業(yè)務(wù)重點(diǎn)去綜合考慮。
業(yè)務(wù)是偏資訊的還是偏社區(qū)的？是偏短內(nèi)容平臺(tái)還是長(zhǎng)內(nèi)容？有沒(méi)有提供足夠多的商業(yè)變現(xiàn)能力給到創(chuàng)作者？商業(yè)化能力做得如何？不同模塊的用戶數(shù)據(jù)怎么樣？只有對(duì)現(xiàn)有業(yè)務(wù)充分了解，才知道哪些是現(xiàn)階段的重點(diǎn)，才能對(duì)一個(gè)頁(yè)面做出更有依據(jù)的設(shè)計(jì)。
參考資料：
大牙，《設(shè)計(jì)思考：個(gè)人主頁(yè)和個(gè)人中心有什么區(qū)別？》
http://www.woshipm.com/pd/4174672.html
作者：fifisama，來(lái)自騰訊 FXD 設(shè)計(jì)團(tuán)隊(duì)
推薦關(guān)注公眾號(hào) “騰訊設(shè)計(jì)”（ 微信ID：TencentDesign ），第一時(shí)間獲取騰訊官方的設(shè)計(jì)方法論
本文由 @騰訊設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Pexels，基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
