<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          內容創作生態是什么?

          資深UI設計者

          編輯導讀:內容生態產品,連接著兩方,一方是內容創作者,一方是消費內容的用戶。如何建立運行機制,讓平臺健康自由成長是每個平臺建設方頭疼的問題。本文作者對此發表了自己的看法,與你分享。


          寫這篇文章是源于我之前的工作,之前的工作是做內容生態方向的產品。那時候我們天天把“生態”這個詞掛嘴邊,雖然每天都有工作做,也很忙,但是卻很少靜下心來想想內容生態是什么,去描繪它的樣子。

          最近看了一本書《簡讀中國史》,書中講到當年英國、法國、西班牙這三個強國,其實剛開始英國并不是最強大的,英國的崛起有幾個重要因素,其中非常重要的一點就是國會制度,不像我國古代似的,皇帝一人說了算。英國的國會制度,讓國家有了很高的信任度,雖然沒錢,但是有了借錢能力,這樣使其在擴張的時候有了很大的財力支持,最終成了歐洲最強的國家。

          在做內容生態產品這件事上,給我的一個啟發是作為平臺建設方,很重要的一點也是建立機制,建立一套運行規則,讓平臺自由健康生長。

          01 建立內容生態

          一個內容平臺,連接著兩方,一方是內容創作者,一方是消費內容的用戶。當然這兩個角色也很有可能是同一個人。

          首先要做的基礎工作就是建立賬號體系,這是任何一個平臺最基礎的工作,創作者要有身份。

          既然是內容產品,自然就要有內容來源的通道,提供創作工具,讓用戶提供內容。例如抖音的剪映,快手的快影,包括荔枝和喜馬拉雅都推出了自家的創作工具。所有的內容產品都在搭建自己的創作平臺,從戰略上來講,這是必做的一環,主要負責內容的引入。誰也不愿說在內容的源頭不占據主動作用。

          創作工具也可以單獨作為一個工具存在,把功能和體驗做好一點,在這個環節,需要做的就是工具的多樣性和易用性,多是一些體驗層面的東西。而給自家平臺導內容就是一件自然而然的事情了。

          基礎工作中,還有很重要的一點就是給創作者反饋。當創作者把內容放到你這里,產生了什么效果應該告訴他們。不僅平臺自己關心內容的效果,創作者也很關心,而且越詳細越好,便于他們對自己的內容進行分析。之前我接觸過有的產品不太重視這一環節,其實你真正了解就會發現,很多創作者他們都很專業,他們非常關心自己作品的數據,也會根據數據去調整自己的創作方向。

          現在內容平臺之間競爭激烈,無論是上游的創作工具,還是內容的反饋和數據分析這些創作者服務,都已經成最基本功能了。

          有了身份,有了內容來源的入口,我們就要為內容源源不斷的流入做準備了。

          因為流入的內容肯定有好有壞,所以我們要對內容進行分級。關于內容評級的方式,主要有兩種:一種是內容自身的數據,如播放量,分享數等,根據這些數據來判定一個內容的等級;第二是通過一些技術手段對內容進行提煉,判斷其內容質量,也會根據里面的主要內容做推薦。這兩種方式都是比較機械化的,而內容是有溫度,有情感的,判定內容的優劣還有一些不確定因素。所以我們也要增加人為因素,提供一些方式讓運營人員人工篩選,發現新來的好內容,好作者。

          內容分級后,間接的我們對創作者也相應的分出等級了。對于好的創作者,平臺通常都會主動建立聯系,維持好關系。而對于普通的生產者,可能就采取放任不管的態度。合規的基礎之上,隨意玩,但是不給你曝光機會。說白了,即使內容不好,也不至于濺起大的浪花。

          時間長了,平臺心中會逐步會有一桿秤,對內容的優劣有個判別。建立一套標準,至于說誰能勝出,關鍵的還是看內容自己,作者自己。至于說平臺是否要強制干預,自己完全有主動權。

          內容優劣,創作者等級,獎勵的程度,這三者關聯性很大,呈正比例關系。

          在給予創作者的獎勵方面,最主要的做法有兩個,一個是流量的扶持,一個是金錢的獎勵。

          什么等級的內容該推到什么位置,展示多長時間,需要定義一個標準。畢竟推薦位是有限的,平臺對于推薦位的權重心里也要有桿秤。現在很多家平臺,在用戶端的流量渠道都不只一個,這就涉及到更復雜的內容分發問題,把什么樣的內容分發給哪個渠道,哪個用戶,這也需要制定規則。

          流量是最基本的,但只是靠著流量已經難以俘獲作者的心了,特別是在一個競爭激烈的內容領域。對于大牌的創作者,很多平臺都推出了物質獎勵。內容達到什么程度,給予多少物質回報,平臺也需要制定一個獎勵制度。

          說到物質獎勵,如果只是平臺自掏腰包的話,不可持續發展。最健康的生態的就是建立一個利用內容賺錢的機制,比如廣告,內容吸引了流量,然后平臺在內容中植入廣告,賺了錢大家一起分。這樣一來給創作者的錢,并不是平臺掏的,來自于廣告商。也是一個非常傳統,使用非常廣泛的商業模式。

          這還不夠,單純靠著廣告的話,估計大多數創作者的收益都不如預期,所以現在很多平臺也把電商加入其中,給作者提供了直播帶貨的工具。

          說到底,創作者的錢都是自己賺的,平臺開發了功能,提供了土壤,也能從中享受分成。這個思路總的來說就一點,給創作者提供更多自身可創造收益的工具,包括打賞、虛擬禮物等。設計更多酷炫的虛擬禮物,用戶通過視覺上的愉悅來給自己喜歡的創作者送禮物。

          除此之外,有的平臺還會做一套成長體系,一切都來源于的內容,一切的判斷標準也都依賴于內容。不同的內容數據,累計不同的積分,不同的積分代表不同的等級,不同的等級又代表著權益不同。而權益跟獎勵又是掛鉤的,建立這樣一個關系鏈條,只有這樣用戶才會有動力去升級。其實這個工作主要也是對創作者進行分層,平臺的運營者畢竟不可能服務好每個創作者。通過這種方式,一來對創作者進行篩選,第二也是彼此建立信任的一個過程。我們都會關注內容風險,有了信任之后才放心把更多功能開放給創作者。

          有了內容源,有了分發規則,有了判定標準,有了獎勵,這樣一個內容產品基礎的循環就算有了。

          為了更好的服務創作者,平臺還要扮演一個導師的作用,給創作者做指導,撰寫攻略分享給創作者。主要分三方面:一是產品功能的使用;二是如何把內容寫好;三是傳授一些運營知識。定期搞一些活動,激勵用戶生產內容的積極性,平臺要與用戶共同成長。

          再往深了說,平臺要繼續提高競爭門檻。幫著用戶保護他們的內容不被侵犯,如果被侵犯了能夠及時的告訴他們。更激進的方式是跟他們簽約,建立一個法律上的合作關系和約束力,這樣對于創作者以后繼續給你內容提供了法律上的保障。

          上面所說的這些,到今天為止仍然是所有內容平臺都會做的,任何一個新的內容誕生還是沿著這條路線發展。做了這么多年內容產品,我一直希望搭建一個可持續、健康的內容生態。平臺作為規則的制定者,少一些人為干預。

          02 平臺的價值

          平臺還要做的很重要的一件事,就是建立內容與用戶之間的通道。歸納總結內容到達用戶的路徑有3個:一個是官方的推薦;一個是個性化推薦;還有一個是用戶與內容的訂閱關系,與作者的關注關系。

          理想情況下,如果把內容生態搭建好了,等著自由循環就可以。但對于創作者而言,最看重的就是粉絲,有了粉絲,即使沒有平臺的流量支持,內容也會有數據。而任何一個內容產品,如果沒有粉絲關注這個關系,那創作者的角色都會比較被動,沒有安全感。

          從現實的角度講,創作者的創作動力本身是基于興趣和個人的能力,但是時間長了,大家的驅動力也會參雜一些利息因素。而單純靠著平臺基于內容給予的獎勵或者是說平臺插入廣告的分成,并不能讓創作者滿意,或者說這個量級還是太少了。如果內容是廣告的話,平臺肯定是不會給予推薦的,所以最后只能通過這個關注關系來傳播。雖然作為平臺不希望有廣告,但想要創作者有持續創作的動力,需要給予創作者一定的空間。

          上面說的是產品功能,可功能誰都會做,關鍵還是看誰做出來的有效。有的平臺,創作者盡管有十幾萬粉絲,但是發布的內容卻沒有人看,主要原因還是用戶的活躍度不行。平臺需要從用戶這一端想辦法提高其活躍度,要不然創作者的熱情就會減退,搭建的這個機制也沒法很好的運行起來。

          可提高活躍度又談何容易,說到更深層次的原因,跟平臺本身內容的類型和媒介有很大關系。有的內容雖然有價值,但是用戶的接收門檻比較高,用戶主動去接觸內容的動力自然不足,這種情況下想去提高用戶活躍度勢必會非常困難。

          對于創作者而言,不同平臺的價值也是不一樣的。有的平臺創作內容的成本很高,但是效果卻很差,但有的平臺創作成本比較低,卻能收到不錯的效果。差異之大,跟平臺自身的定位和覆蓋的用戶群有關,前者決定了內容的衡量標準,后者決定了內容的用戶接受程度。

          很無奈,用時下流行的一個詞來說,這就是賽道不同造成的優劣勢吧。

          03 媒介的影響

          現在的內容平臺也有媒介之分,像B站和抖音是以視頻為主,喜馬拉雅主要是音頻,今日頭條是所有媒介都有的綜合平臺。

          媒介的一個很重要的影響就是,不同的媒介覆蓋的用戶群體不一樣,視頻>音頻>圖文。今天我們看以視頻為主的,不管是愛奇藝、騰訊視頻還是抖音,日活都是上億規模,而在音頻領域,即使喜馬拉雅這樣的行業領頭羊,日活數據也比視頻平臺低了好幾倍。兩者完全不是一個量級,單純做圖文產品的日活就更小了。

          一個音頻產品怎么去超過一個視頻產品的用戶呢?其實我覺得沒必要,各自安好,但是有的單一媒介產品有這樣的夢想,做內容的,本來賺錢就難,用戶量少的話,吃飯更困難。

          從內容源頭上來說,不同媒介的內容可能都來自于一個創作者,創作者可以把同樣的內容寫成文章,錄制成音頻,也可以制作成視頻,放到不同的平臺上傳播。內容的本質沒變,只是媒介形式變了而已。

          然后這個問題就變成了平臺對于創作者的吸引力,哪種媒介平臺對于創作者更有吸引力?雖然說創作者可以把內容制作成不同的媒介,但這是有成本的,看創作者的動力。再探究,到頭來還是得看內容生態的規模,用戶量,內容數據,服務,收益的方式和數量,關注這幾個方面。

          這幾年,我平時也有寫一些文章,放到一些垂直類的內容平臺。感嘆一點,一些垂直領域的內容平臺,本身用戶量很少,內容又無法直接收費,平臺的營收又比較困難,所以在吸引創作者方面非常尷尬。給予的東西吸引力非常弱,如果在同行業還有競爭對手,且不說能不能發展成功,速度一定是非常慢的。


          文章來源:人人都是產品經理   作者:云瑞

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          用經濟學思維看產品之企業協同

          資深UI設計者

          由于之前疫情帶來的沖擊,同時如今很多企業都在進行數字化轉型,一些企業協同工具就發揮了重要的作用;像這類企業協同產品更多的需要注重用戶的角度,以及一些對應的功能;本文作者分享了關于用經濟學思維看產品之企業協同的思考,我們一起來了解一下。

          科斯定理:一項有價值的資源,不管從一開始它的產權歸誰,最后這項資源都會流動到能最大化利用其價值的人手里去。

          網絡效應:有一種產品或者服務,它隨著每一個用戶人數的增加,自己本身的價值也會增加;簡單來說就是,「用的人越多,產品越好用」。

          2020疫情給線上協同辦公帶來了大量的新用戶,使得市場規模增速顯著提升,除釘釘、企業微信類老牌產品繼續擴大服務范圍外,飛書、閃布、Welink等新興成員也隨著這一波云辦公的潮流極速成長吸收用戶。

          從艾瑞數據發布的市場報告來看,2020年中國協同辦公市場規模已然達到440億元,同比增長率為43.5%,至2021年市場規模預計將突破500億元。

          企業協同SaaS屬于B端產品中的企業服務領域,不僅需要企業負責人的拍板使用,也需要保證員工工作中使用的可靠性;這讓協同SaaS在設計開發的過程中充滿了多項挑戰,因為老板與員工似乎本身就處在對立面,需要滿足兩個對立面的需求并不是一件容易的事。

          企業協同實際上是一個非常大的概念,涉及到的產品也非常之多,細分領域可涉及文件存儲與共享、企業郵箱、項目管理、員工管理、聚合平臺等。

          下圖為艾瑞數據在《2021年中國協同辦公市場研究報告》列舉的部分協同軟件:

          今天我們將重點放在綜合協同平臺上,聊聊如何用經濟學思維來幫助和協助產品的設計,選取的對象為我自己較為熟悉的三個產品:釘釘、飛書、閃布。

          一、產品的本質

          首先我們要知道,企業的本質就是一種團隊,企業存在是因為“團隊效應”(能夠帶來比每一個成員單獨產出之合還要大的產出的組織)。

          從經濟學角度來說,企業的存在降低了每個人的交易費用,避免了單干造成的無謂損失;既然成為企業是為了降低損失,那么因為企業的成立,增加的內部管理成本以及隨著員工人數增加、業務的冗雜等原因造成的協調工作的難度急劇增加,這個損失該如何解決?

          產品的本質就是解決人們的問題。

          而協同辦公產品的本質就是降低成本,提高效能,為解決企業內部的損耗提供相應的解決方案。

          以現有的產品形態舉例:企業云盤可以解決員工之間文件的儲存和分享;線上會議可以解決員工異地或在家辦公實現云討論;項目管理可以幫助企業更好的進行項目的分解計劃于實行;線上審批可以推動企業管理數字化……

          對于協同產品而言,除了需要能夠滿足企業現實需求外,如何形成自己的網絡效應也是極為關鍵的。

          協同是指協調兩個或者兩個以上的不同資源或者個體,協同一致地完成某一目標的過程或能力;因此協同產品只有在人數達到一定量后才能真正發揮和檢驗他的價值,如果一個企業僅有部分人使用同一個協同產品,他們不僅要承擔高昂的運營成本,而且只能與數量有限的人交流信息,顯然是沒辦法達到用戶需求與產品目標的。

          且協同產品因為其復雜性,企業更替的成本是極高的,員工不會愿意頻繁更換自己的辦公工具,對于企業負責人而言也一定不愿意因為選擇錯誤導致高額的無謂損失;選擇協同產品就好比走上了一條不歸路,慣性的力量會使這一選擇不斷自我強化。

          所以企業會努力往最大的平臺上靠或找到可以與自身完全匹配的產品,趨利避害降低風險;以此出發產品可以找準自己關鍵點,你是否足夠全面以支撐來自各行各業的需求實現,亦或者你足夠靈活可以輕松的承接獨立且個性的需求,找到他,并對外宣傳他,形成自己的路徑依賴,不要妄想自己的產品能夠兼顧各方。

          在現如今的互聯網產品浪潮中,每一片浪花都只能蕩起自己的小船,鎖住用戶才能真正存活下來。

          二、產品的白與黑

          說到B端市場,大家腦海里循環播放的一定是KP、KP、KP(關鍵人)。

          B端產品的KP就是“老板”,那是因為老板往往是企業的專用資源(必須在特定平臺上發揮作用且投入很難再收回);而普通員工往往是企業的通用資源,其投入往往僅有個人勞動,可以隨時收回。因此為了防止勞動力濫用資本,老板需要更多的特權與保護;因此在企業中的話語權也更重。從這個角度看,協同產品使用的關鍵同樣也是老板,擒賊先擒王,正如釘釘做的一樣。

          釘釘的很多產品功能點,與其說是在實現企業內部的協作需求,倒不如說在實現“老板”的管理需求;因為需要快速的找到人而誕生的“釘一下”為釘釘的前期發展帶來了直線性的發展,而與之一起打組合拳的已讀未讀功能,更是讓員工在辦公中無處可藏,把釘釘帶上了一個新高度,也為后續中國企業協同產品奠定了一個產品基調,放眼當前協同產品池,強提醒+消息狀態已然成為了企業溝通工具的標配。

          而為了企業更好的嘉獎與“刺激”員工成長,釘釘推出了獨有的專屬紅包,不僅可以隨時隨地發送指定員工領取的紅包,還可以在群組內出現撒花等慶祝的交互樣式,真正成為了老板們弘揚企業價值的工具。

          類似的場景你也可以在閃布中看到,作為傳統行業出身的協同辦公產品,自上而下的體系仍然深深影響著產品的整體邏輯與優先級。

          閃布的用戶狀態,去除了多種可能性的復雜度,屏蔽了用戶手動操作的機會;簡單粗暴的反映出員工的在線情況,簡單的狀態展示有別于釘釘與飛書的多種自定義選項,以此減少員工之間溝通的時間等待成本,加強了管理者的把控程度。

          但是,協同產品真的只要做到搞定老板就可以了嗎?

          科斯定理所說,一項有價值的資源,不管從一開始它的產權歸誰,最后這項資源都會流動到能最大化利用其價值的人手里去;而企業協同是員工用來相互協作的工具,其價值必然也會體現在員工上,因此企業協同不僅需要有決策者的考量與拍板,同樣需要有使用者的易用與喜愛,正如飛書在做的一樣。

          基于對 “生產力工具缺乏變革、工具不應管控人而要激發人、B 端產品應具有和 C 端產品同樣友好的用戶體驗”三方面的思考,字節跳動啟動了飛書項目;因此飛書自娘胎里就把使用者放在了自己的意識中,不論是視覺與交互的感官體驗,還是各模塊間產品功能的強耦合,直至深層的極致系統性能。

          飛書都給用戶們帶來了與普通辦公軟件及其不同的感受,翻看飛書的軟文、App Store等各渠道的用戶評論,夸贊與認同占了極大的比例。

          那么我們究竟該如何處理這白與黑的關系呢?

          茲認為作為企業服務領域的標志性產品,企業協同仍然需要將解決企業問題,降低企業損耗,提升企業效率作為迭代的基礎,通過產品的方式將線下的流程電子化,人工的行為系統化,化繁為簡實現產品的目標;因此不論是產品需求的優先級排序還是產品的北極星指標,讓協同真正在企業間實現價值是首位的;同時在降本提效的基礎上也需要保證維護員工的個人權益,不以犧牲使用者的主觀意愿為代價實現目標,最后逐步提升產品的易用性與優秀的使用體驗。

          舉閃布的案例,閃布的工作臺初期是由企業的運營管理人員進行全局配置,用于推廣與運營企業內部應用,隱藏每個員工看到的工作應用都一模一樣,有些自己不常用的或根本不接觸的應用也常常被強制掛在首頁突出位置。

          在接收到各方需求反饋后,閃布將工作臺的應用分成了“我的應用”與“全部應用”兩部分,并且允許用戶主動選擇應用與相應位置,且當用戶自定義后系統將不再推送后臺運營配置的默認應用;這個方案不僅能滿足企業針對員工(大部分用戶都不會修改默認配置)的內部應用推廣需求,也可以保證員工(小部分會修改配置)的自身權利得到保障,很好地詮釋了白與黑,天與地的融合之道。

          三、實現更好的協同

          中國有句古話叫做授人以魚不如授人以漁,經濟學里也有一句話叫給窮人錢比給窮人食物更有幫助,因為錢有選擇的權利。這些意思用在協同產品上也最為合適不過了。

          協同產品不只是單純的給用戶一個工具,更需要傳遞更高效的工作方法。

          就好像Xmind給普通大眾帶來思維導圖框架的思考方式、Visio給用戶帶來具體嚴謹的邏輯思維流程一樣,協同產品也需要通過探尋用戶的日常使用情況(包括痛點、癢點、爽點燈),獲取一些反饋的信息;能夠支持并滿足用戶在日常辦公過程中的需求,并可以將各類需求整合成一種工作方式與工作方法,并將此反哺給用戶,幫助用戶規范工作流程、加強管理能力、找到正確的辦公方法。

          再次舉個栗子,飛書在21年全新的π版本中上線了飛閱會的線上會議功能,采用了發揚于谷歌的靜默會議的方式,支持文件提前上傳且可在文件中實時提出疑問并標注、支持同時段語音轉義并自動保存會議紀要、支持會后根據會議情況創建日程待辦并整理會議相關內容發送給參會者,詳情可見下圖。

          這整一個產品鏈路對于很多企業、員工來說都是一中全新的會議方式,飛書也正是通過這個產品模塊與功能的介紹向用戶展示了如何進行一場高效的會議,這個方法的效果甚至比產品本身更重要。

          當然除了方法論,真真切切的實現分工與合作也可以為企業協同帶來更好的結果。分工與合作可以給人們帶來更大財富,自己有什么優勢集中做,社會的餅就能做大;而一個企業一個部門的每個人都處在自己獨特的工作環節中,其所面對的人與事件都是獨立的。

          因此,產品需要考慮不同情況下如何實現最優分工,又在何種場景中最需合作,如將員工根據不同的崗位與崗級進行相應的標簽分類,后期功能均可根據不同的角色標簽給予不同的權限;而針對不同行業,產品也可以做到個性化定制與特殊化處理,比如釘釘就會針對學校場景設計獨特的表單、群聊信息、線上會議模式等;而飛書則會針對互聯網企業設計相應的話題群、Markdown格式文件等,這些種種是都是為了讓人們能有更好的分工的基礎,并最終完成合作的目標。


          文章來源:人人都是產品經理   作者:碌碌無為的阿栓

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          分析產品設計策略-以攜程旅拍為例

          資深UI設計者

          關鍵詞:產品策略分析、體驗設計方法論、分析問題方法


          聲明:本篇案例的分析范圍是聚焦在體驗設計的前期流程,分析產品的產品策略、需求分析、用戶研究。同時這是一個As is分析而非To be創新設計,側重點是和大家分享討論如何去分析產品設計的前期策略定義,以及這些結論如何幫助我們去設計產品。




          分析思路:提出問題


          我拿到的課題是分析攜程旅拍社區的產品策略,要分析這個事情,我們需要把問題進行一下拆解。首先我們應該意識到問題涉及到兩個行業,一個是攜程所處的OTA行業,一個是旅拍社區所處的社交行業,需要我們先分別去看待再統一進行思考。其次根據經典的5w1h問題分析法(我們在這里精簡為2w1h,即what、why、how)我們需要把問題拆解為三個:攜程旅拍社區是什么?攜程為什么要做旅拍社區?攜程是如何做旅拍社區的?


          經過第一步對問題的拆解我們對問題分析的角度有了大致的方向,但是這并不足以開始分析,我們還需要對已經提出的問題進行進一步的拆解來更加明確我們如何解答這些問題。在這里我們使用著名的金字塔原理結構來對問題進行細化,并且推導出如何回答這些問題。在這篇文章,我們重點看最關鍵的問題 “攜程為什么要做旅拍社區?”



          到這一步,我們已經建立起分析問題的整體框架,當然在具體的問題分析中一開始就建立一個完善的分析框架是很理想的情況。大部分情況下我們需要在定義框架和具體分析中來回的完善和優化我們的框架,夯實它的邏輯性和完整性。我也是在實際的問題分析中不斷發現新的問題、產生新的思路從而一步一步的讓分析點能夠更加完整和邏輯,同時對于問題的拆分角度和研究角度屬于定性研究的范疇,它沒有一定正確的答案,每個人都有自己的經驗和想法,所以不必糾結自己看問題的方式,只要不遺漏關鍵的信息和出現邏輯推導上的錯誤即可。接來下我們就按照這個框架來進行數據的收集、歸納、總結從而回答我們一開始提出的問題。




          第一部分:OTA行業的現狀


          1.1 OTA的定義


          首先我們先理解OTA行業的定義是什么,OTA(在線旅游)指“旅游消費者通過網絡向旅游服務提供商預定旅游產品或服務,并通過網上支付或者線下付費,即各旅游主體可以通過網絡進行產品營銷或產品銷售”。為了更好的理解這個概念,我們可以從如下兩張圖業務范圍和行業產業鏈來理解。



          通過上兩張圖我們可以基本詮釋清楚OTA是一個什么樣的行業,同時我們也能總結出它的特點

          在線旅游行業是一個經營范圍廣,產業渠道多鏈路長的行業。經營范圍廣是指對于旅行對于交通、住宿、娛樂等資源的需求,使得OTA企業必須要考慮資源端的供應,甚至是自己建立資源供應。產業渠道多鏈路長是指從上游資源供應最后到達用戶手中,產品銷售的鏈路長,渠道也多樣,使得OTA企業必須重視對于上下游資源的掌控和多渠道的建立,搭建起自己的生態才能在競爭中游刃有余。



          1.2 OTA的行業發展


          其次,我們需要了解OTA行業目前的發展情況如何。通過對數據的收集,我們發現這個OTA行業目前的發展情況是:行業規模與用戶規模不斷增長但增速放緩,同時三四線城市成為重要的增量市場。


          針對以上數據的收集和分析,我們發現整個行業的規模還在不斷增長但是增速已經明顯放緩,增長的動力主要來自下沉市場。

          首先我們先看增長放緩,一方面中國經濟增長放緩導致的人們消費能力和消費信心的下降影響了整個旅游行業,在線旅游則必然受到沖擊。另一方面互聯網的紅利期已經結束,在線旅游依靠投資輸血搶用戶的時代已經過去,現有的一二線增量市場已經被挖掘殆盡,線上游客的增量時代結束進入拼質的存量時代。但是隨著國家政策對于中低收入地區的傾斜和互聯網技術發展,以前難觸達的下沉市場變得容易觸達,消費潛力得到挖掘和釋放,三四線城市成為新的增長引擎。




          第二部分:攜程現狀和發展


          2.1 攜程的現狀


          攜程的現狀我們可以概括為:OTA行業的獨角獸,無論是在市場占有和用戶規模上都遙遙領先,但是競爭者也不容小噓。




          2.2 攜程的發展


          為了了解攜程的發展布局,首先我們看攜程最近幾年較大的戰略布局動作



          在搜集了攜程近些年的商業動態后,我們發現攜程在成為國內OTA行業的霸主后,分為兩個方向進行進一步發展,

          一.橫向發展

          1.進軍三四線城市下沉市場,通過線下旅行社的方式把業務帶入滲透率低的市場

          2.把OTA業務觸角伸向海外,通過投資收購等方式進軍海外市場

          二.縱向布局

          1.同產業的上游的壟斷行業供應商(高鐵/民航等)戰略合作,收購建立自己的非壟斷行業供應商(租車/酒店等)

          2.建立下游內容營銷平臺(攜程旅拍等)填補了自己在下游產業鏈的空白



          第三部分:內容社交的價值和現狀


          3.1 內容社交的價值和現狀


          內容社交,指用戶第一目的是為了獲取內容,內容的生產方式可以是普通用戶(UGC),也可以是專業媒體或者作者(OGC、PGC)。內容社交平臺通過提供用戶感興趣的內容(咨詢、娛樂、知識等等)來吸引用戶瀏覽,再通過內容流量產生價值。通過下圖我們可以發現,通過不同媒介和細分領域的搭配,內容社交領域的玩法非常豐富,尤其是在垂直領域還有很大的想象空間。



          3.2內容社交本身的作用價值


          3.2.1商業價值

          內容社交平臺的商業價值主要體現在:

          第一,目前內容平臺已經成為重要的社會化營銷渠道,用戶規模大,市場規模增長迅猛。

          第二,對于平臺來說有效的利用了用戶流量進行商業變現,對于廣告主來說能夠有效提高品牌營銷的效果,廣告主的營銷預算正在向這一類平臺傾斜。

          下面我們以典型的內容產業,短視頻行業為例具體看待

          3.2.2產品價值

          對于內容社交平臺本來而言,其產品價值主要體現在相比較其他領域而言內容社交平臺用戶使用時間長、活躍度高,能夠幫助產品爭取用戶注意力、搶奪用戶時間。


          3.2.3用戶價值

          互聯網的本質在于連接,而「連接人與信息」正是最初級也是最基本的用戶需求之一,在內容社交中用戶不再只是觀眾,而是成為互聯網內容的生產者和供應者,體驗式互聯網服務得以更深入的進行,用戶的高層次需求得到進一步滿足。



          在內容社交這一領域,垂直領域的用戶需求探索還有很大空間。

          根據四個平臺的數據結果,我們發現旅行這一主題無論在哪個平臺都擁有非常高的用戶關注度和互動性,可見旅行內容這一需求對于用戶來說的價值還是巨大的。而目前這個主題絕大多是還是依附在綜合性的內容社交平臺上,在這一細分領域只有馬蜂窩這一個較為有影響力的平臺。





          3.3內容社交在下沉市場的作用價值


          3.3.1商業價值

          上面我們分析了內容社交平臺滿足用戶基本需求的案例,而對于下沉市場的用戶而言,雖然傳統的熟人社交、口碑傳播還是占據了強勢地位,但是內容正在逐漸成為他們消費決策時的依據。



          3.3.2產品價值

          內容平臺在下沉市場增長明顯,下沉市場用戶對于旅行高相關內容興趣度高,這是OTA行業下沉趨勢的有力支持。



          3.3.3用戶價值

          對于下沉市場用戶而言,內容社交平臺已經成為他們記錄和分享旅行不可或缺的手段。





          3.4內容社交對攜程的作用價值


          3.4.1商業價值:從產業布局來看


          上文分析過攜程目前的產業鏈布局和渠道現狀,在旅拍上線以前,攜程是沒有自己的社會化營銷渠道的。那么攜程只能在第三方的渠道進行產品和商品營銷,是自身渠道上的一個缺陷。而在上線旅拍之后,攜程有了自己的社會化營銷渠道,并且作為一個旅行社區,其用戶營銷的范圍更加匹配平臺屬性更加精準。


          3.4.2產品價值:從攜程用戶生命周期來看


          通過整個用戶生命周期的研究我們可以發現,旅拍社區在用戶的整個生命周期里都為攜程提供了巨大的價值。最核心的就在于,之前的攜程產品策略都是建立在自身是一個OTA平臺這個基礎之上。旅拍社區的建立,讓攜程可以從內容平臺這個角度,在產品策略上發展更多的玩法和思路,來提升整個產品生命周期的用戶指標。


          3.4.3用戶價值

          從用戶價值來看,我們主要看旅拍社區是如何更全面的觸達用戶需求的。首先我們先梳理出攜程的用戶畫像,然后從用戶旅程和需求層級這兩個維度去分析旅拍社區的用戶價值。



          通過上面的分析,在旅行的用戶旅程和用戶需求方面傳統的OTA業務并不能覆蓋到全部的需求。通過旅拍社區業務,攜程真正做到了整個旅行需求的覆蓋。用戶不在是只在攜程上進行商品交易,而是在整個旅行的用戶旅程中,都可以使用攜程來滿足自己的需求。





          第四部分:競爭對手的現狀


          4.1 競品的定義



          我們主要聚焦在直接競品的分析上,結合前文的攜程現狀分析,飛豬和馬蜂窩這兩個是目前在市場除了攜程之外比較有代表性的產品,飛豬是阿里巴巴在旅行領域的強力產品,而馬蜂窩之前深耕旅行內容領域在取得足夠的成績之后開始拓展OTA業務和攜程相反,所以我們重點分析這兩個產品。



          4.2 競品的現狀和對比



          通過對產品定位和商業畫布的梳理我們發現攜程、飛豬、馬蜂窩目前都是以OTA業務為主的平臺,但是還有很大差異主要體現在:

          1.飛豬是OTA行業的新玩家,但是卻發展迅猛,在攜程已經統一江湖的情況下確硬生生搶下一塊市場。主要在于兩點,一是有阿里強大的資源支持,包括技術、資源和品牌等

          二是年輕化的產品定位,讓飛豬更受年輕人喜愛。

          2.馬蜂窩是國內旅行內容平臺的第一,最近幾年開始進軍傳統的OTA業務,恰恰和攜程相反。馬蜂窩的優勢就在于,一是積累起來的用戶忠誠和口碑能夠順利幫助其完成前期的渠道建立,二是作為旅行前決策平臺切入旅行產品預訂,場景銜接非常順滑不會讓用戶有違和的感覺。

          接下來我們看這兩個虎視眈眈的對手在內容社交領域的布局情況



          4.3 競品在內容社交的布局



          無論是飛豬、還是馬蜂窩都在內容社交領域大步躍進,雖然具體的形式不同,核心思路都是要利用內容社交這一手段,來提升平臺的商業價值、產品價值和用戶價值。既然競品已經發現了內容社交對于自身的巨大價值,那么攜程的跟進也是非常正確的。




          回答問題:攜程為什么要做攜程旅拍?


          到此之前所拆解出的四個維度我們已經全部分析完成,并且每個部分都產生了結論和洞見,那么我們就可以根據上面得到的結論來回答最開始提出的問題了



          后記


          對于之前提出的第一個問題攜程為什么要做旅拍社區(Why)這件事情已經有了我自己的分析思路和結果了。那么攜程是如何做旅拍社區的(How)有機會的話會繼續分享我的產出。


          文章來源:站酷   作者:龍龍真調皮

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          情緒版設計-助你打開設計創意

          ui設計分享達人

          1.情緒版的概念

          首先我們要明確什么是情緒版?我的理解是:情緒版既不是初稿也不是最終的風格方向,而是設計師在了解了相關的產品背景后,基于自己對于產品的理解給出的一個較為初始的設計建議,并且希望可以通過這個初始的建議與產品側達成一些相關的設計共識。

           

          2.情緒版的大概流程

          情緒版的設計流程大概分為前中后三個階段,前期:分析-收集,中期:篩選-組合,后期:打磨-呈現。

           

          前期:分析-收集

          主要是分析產品相關背景或需求本身的方向,結合產品背景及需求本身再進一步分析大概的設計方向并收集相關素材內容。

           

          中期:篩選-組合

          當我們收集完成后需要對現有素材進行二次篩選并組合,基于現有素材組合大概的設計方案結構。

           

          后期:打磨-呈現

          基礎方案組合完成后需要進行二次打磨,細化方案的內容表現,檢查整體的一致性及完整度,最后呈現給產品方。

           

          3.為什么要做情緒版

          可能很多設計師會疑惑為什么要做情緒版,直接設計初稿不就好了嗎?如果有這個疑問,可能還沒實際了解到情緒版到作用。但我們可以試著從我們在設計過程中遇到的痛點來了解情緒版的作用或者意義。

          在設計的過程中你是否會存在下面幾個問題:

          前期思考不夠——設計產出方案少;

          設計不懼探索性——設計來源沒有考究;

          初稿多次修改沒能達成共識——設計表達不出對方想要的;

          設計中期出現不一致——設計沒有貫徹始終。

           

          4.情緒版的作用

          從這幾個問題中,我們可以得到一個比較統一的結論就是:前期設計呈現內容不夠,導致溝通不足而產生方向不統一。因此基于這個關鍵點,我們再來看情緒版的作用

           

          (1)輔助構建世界觀

          在前期,世界觀、背景方面的內容大多是以文字的方式呈現,因此設計師可以通過情緒版的方式,來輸出對應的世界觀設計表現,這樣可以更加直觀的表現出對應的視覺語言。

           

          (2)具象設計想法

          在初期與產品側溝通時,單純靠語言表達的方式很難讓對方達到一種腦補的狀態。因此借助情緒版的方式更加直觀的呈現設計想法,通過具象的圖形或者圖形,大大降低雙方的溝通成本。

           

          (3)明確設計方向

          基于第二點的溝通,我們可以明確的了解到產品側的一些喜好。為后續設計初稿時起到一個清晰的方向作用。

           

          (4)提高前期設計的效率

          從零到一設計一套完整的方案往往需要耗費較長的時間,借助情緒版設計的方式來快速響應一些想法及創意,這樣可以大大提高前期的輸出效率。

           

          5.情緒版的基本原則

          從多次的嘗試中,我總結梳理了幾個基本原則,了解這些原則可以讓我們在做的時候更加嚴謹,輸出更加準確的設計方案。

           

          (1)多方向性

          情緒版的設計與我們日常設計一樣,需要給出不同的方向建議,單一的方案往往難以抉擇。多方案輸出除了提升抉擇空間之外,還可以增加方案碰撞的情況,往往可能是方案A的某部分內容疊加方案B的某部分內容才能產生最初的方向。

           

          (2)嘗試性

          此階段的所有輸出皆屬于嘗試與探索,因此不必過于考究設計細節,重點在于表達出需要相關的設計概念及思考想法,把更多的時間留作設計思考及方案嘗試。

           

          (3)效率性

          情緒版的輸出重點在于前期溝通而達到一個比較好的共識,因此在保證質量的情況下,避免花費過多的時間而影響輸出的效率性。盡量做到快與準。在過往中項目組,基本上是以半天(4個小時左右)為一個單位來完成一套方案。

           

          (4)試探性

          情緒版是一種非常有效試探產品側想要往那種方向去推動的方式,因為我們在實際的設計過程中,產品側可能也對整體的設計大調并不少特別有明確的腦補,因此設計師可以借助情緒版的設計來挖掘產品側想要往哪個方向進行發力。

           

          6.情緒版設計的方法

          這里總結情緒版的設計方法大概有這幾種:1.借助圖像/插圖、2.結合實際場景引申、3.借鑒摘取同類型設計、4.繪制草稿。

           

          (1)借鑒圖像/插圖

          在我們設計一些專題活動或者繪制插圖相關的一些設計時,可以考慮使用這種方法來輸出你的情緒版設計,可以通過借鑒一些設計網站或插圖網站上的現有素材來拼接,并表達自己在這方法的一些設計意圖及想法。

           

          (2)結合實際場景引申

          從更概念化的角度出發,通過引用一些實際場景、物品、圖像,來拓展相關的圖形、質感、色彩方面的設計,并且輸出相關的設計雛形。例如我們在設計LOGO或者圖形類的一些設計,使用這種方法就可以幫助我們突破一些現有的認知壁壘。

           

          (3)借鑒摘取同類型設計

          在設計之初,我們通常會有一個大概的思考雛形,但如果直接開始設計往往效率上并不高。因此可以借助一些設計網站上的設計,通過摘取組合的方式呈現自己的初步想法。我通常會在UI新版或者改版的時候使用這種方式,但只能表達大概的想法且不能代表最終的初稿設計。

           

          (4)繪制草稿

          當我們想要表達一些溝通或者框架的設計時,我們可以使用草稿繪制的方式來表現,這個方式簡單快捷,可以很有效率的對齊大部分的設計共識。

           

          7.情緒版設計的注意事項

          基于原則及方法,我們可以來簡單了解下情緒版設計中需要注意的一些事項,通過這些內容讓你在實際操作過程中少踩一些坑。

           

          (1)控制方案的數量

          設計方案控制在2-3個左右即可,前期大多是屬于試探性方案呈現及找方向,太多則容易導致選擇困難。

           

          (2)避免篇幅過長

          篇幅過長往往容易降低別人閱讀的耐心,對于情緒版的輸出也是如此。結合過往的經驗,建議以16:9的畫面為一頁來呈現一個方案。

           

          (3)區分重點次要

          在一頁內呈現的方案避免過于平均,可以適當突出某些想要重點表達的內容,例如在這個方案中想要重點突出圖標、顏色等,那么這里需要突出這部分在畫面中的比例,適當縮小其他模塊的尺寸。

           

          (4)結合世界觀

          在輸出情緒版設計方案時還可以適當考慮結合產品的世界觀,通過一些具象化的圖形或者插圖來表現相關的內容。例如我們之前在游戲中心改版的嘗試中,就發散了幾個相關的世界觀,因此我們在輸出方案時,則只需要把對應的世界觀作為方案,通過情緒版的方式表現出來即可。

           

          (5)保持整體風格一致性

          一致性是表現一個設計師是否具有系統化、全局觀的思考思維,因此我們在表現情緒版時也需要關注這方面的內容,避免整體的調性不匹配。

           

          (6)完整性表達

          在呈現方案時,盡量多維度的進行對比,呈現一個完整性、系統性的設計。例如我們在設計UI相關的內容,從圖標、顏色、字體等等一系列的內容需要細致的闡述清楚,讓人更加能夠了解你的意圖。

           

          8.UI情緒版模版分享

          由于我日常以設計UI為主,因此可以給大家重點分享我在UI情緒版設計的經驗。希望可以幫助到大家快速上手。

          當你在做UI設計情緒版時,需要明確了解UI設計中的結構,更系統性的去思考整體的內容。我們在UI設計中往往需要包含以下這些內容:圖形系統(圖標+輔助圖形)、顏色系統、字體字形系統、質感形態、界面形態、插圖風格、動效系統、影像系統,等等這些部分的內容。

           

          UI情緒版模版

           

          過往實際案例分享

          案例一:整體風格比較偏個性一些,頁面嘗試用深色的背景設計

          優點:整體風格比較酷,配色比較未來感符合年輕的人的審美,深色的背景讓內容更加聚焦。

          缺點:深色的設計接受度是否可以,是否適合平臺類APP設計

           

          案例二:整體風格3D化的設計,包括頁面的一些體驗上都可以增加視察的效果來設計

          優點:整體設計風格比較新穎,符合現在的設計趨勢,整體感覺也比較年輕多彩

          缺點:3D的制作成本相對較大。

           

          案例三:整體風格比較清爽,白色融入漸變的設計也會顯得比較年輕

          優點:整體頁面清爽,可以滿足任何內容的透出,漸變色的圖標和按鈕的設計補充了細節

          缺點:整體氛圍感、娛樂感較弱。

           

          9.最后總結

          很多時候我們會覺得情緒版設計可有可無,或者因為時間的關系不允許我們經過這一步。但,如我一開始提到的點,情緒版可以在前期幫助我們去打通很多思考的壁壘,輔助設計師在前期直觀的與產品側進行方向上的探討,從而找到大方向上的共識。


          文章來源:學UI網   作者:妙妙

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          B2B用戶畫像的創建與使用

          ui設計分享達人

          01 什么是用戶畫像(what)

          02 B2B用戶畫像的特色(what)

          03 為什么要構建B2B用戶畫像(why)

          04 如何構建B2B用戶畫像(how)

          05 B2B用戶畫像的傳播與使用(how)

          本文嘗試通過what-why-how的結構,結合自己的工作做一些實踐,和大家分享下B2B用戶畫像的整體概念框架以及構建方法。出于對我司數據的保密,無法直接分享給大家細粒度且對應的數據,所以分享過程中我會結合業界和其他前輩在網上分享的內容和數據作為案例,如有不足和錯誤之處,還望大家批評指正。

           

          那在講B2B用戶畫像之前,我想先來說說用戶畫像的概念,在看一些文章時發現有些作者混淆了用戶畫像的兩種概念??赡芎芏嗳藳]有注意到,用戶畫像這個詞包含了2種不同的含義,一種是User Persona,一種Use Profile。

           

          1.1 User Persona

          User Persona是對一個用戶群體的整體抽象。這一概念最早源于交互設計領域,是Alan Cooper在《About Face:交互設計精髓》一書中提到的研究用戶的系統化方法?!摆A在用戶”這本書將其翻譯為“人物角色”,目前業內使用“用戶畫像”這個術語。表達的意思一樣,是真實用戶的虛擬代表,是在深刻理解真實數據的基礎上得出的一個的虛擬用戶。

          • 研究方法:定量+定性研究,更注重的是定性的研究;
          • 畫像用途產品&交互&設計使用,是他們了解用戶目標和需求、與開發團隊及相關人交流、避免設計陷阱的重要工具;
          • 研究方向:更深和細,會更為深入的去挖掘底層用戶的動機、原因、動機、欲望、痛點等屬性,Persona幫助我們了解why產品的用戶為什么會有這個行為。

           

          1.2 User Profile

          User Profile是對每一個個體的畫像,是在產品用戶量有一定規模以后進行的。利用用戶的行為數據或者填報的資料進行的用戶屬性標簽提取,更多被運營和數據分析師使用,它是各類描述用戶數據的變量集合。在大數據時代,企業通過對海量數據信息進行清洗、聚類、分析,將數據抽象成標簽,再利用這些標簽將用戶形象具體化的過程。

          • 研究方法:偏向于定量研究與數據分析;
          • 畫像用途:主要運營&市場使用,個性化推薦、廣告系統、活動營銷、內容推薦、興趣偏好都是基于用戶畫像的應用,比如說我們通??吹胶芏嗑W站,千人千面,其實也是User Profile 精細化運營的結果;
          • 研究方向:更廣和全,更多的是研究人的基礎屬性、社會屬性和行為習慣,更關注的相關性的數據分析和挖掘。幫助我們了解what產品為誰而設計。

          兩類畫像的對比如下圖:

          明確了兩種畫像的區別,那本文我們就重點談談User Persona類型的B2B用戶畫像(后續文中簡稱“用戶畫像”)。至于User Profile,比較適合用戶體量大的產品,而B端產品除了頭部企業,很難達到這個量級,無疑用User Persona更合適,本文就不再贅述。

           

          不管是B2B還是B2C產品也好,不論是商業層面上(比如在資源有限情況下聚焦關鍵用戶類型)、或是在產品層面上(更好理解用戶想要什么,確定功能的范圍和優先級),建立用戶畫像的本質都是為了輔助一些決策。

          不同之處在于C端面向的是大量且分散的個人用戶,用戶畫像的主要目的是把用戶聚類,更好的了解不同類型用戶的特點和偏好。而B端產品,面向的是企業級用戶,滿足的是企業的管理或經營需求,關注的是成本和效率。畫像的目的是針對業務不同環節中、具有類似任務的用戶進行更立體、豐富的需求整理和挖掘,往往和角色相關。

          其決定了B2B用戶畫像的幾個特點:

           

          2.1 受企業生命周期的影響

          伊查克·愛迪思(IchakAdizes)提出了企業生命周期理論,企業的發展大致有初創期、成長期、成熟期和衰退期四個階段。不同階段的企業,其組織形態、關注點、管理方式等都會有所不同,產品需求側重點不同,用戶畫像的方向和調研方式也會有不同。

          初創期:產品立項階段

          這個階段往往指的是公司剛成立,此時產品、企業文化尚未成形,處于客戶積累階段,較為關注引流。需要通過用戶畫像定位細分市場、產品模式及功能,這個階段需做定性調研了解目標用戶,初步形成用戶畫像為需求做底層支撐,這個階段的用戶畫像顆粒度可以粗些,旨在幫助團隊快速就“我們的用戶是誰”達成共識。

           

          成長期:產品運營中(已有數據積累)

          這個時候產品已有demo或已上線迭代,產品處于完善、升級的階段。可使用“數據挖掘+定量篩選+定性豐富”的方式,結合項目的已有數據,使用定量篩選用戶,做大量微觀且具體的用戶調研,基于后臺、第三方平臺監控發現問題,定位問題關鍵及原因分析,優化產品功能及運營模式,再通過調研訪談了解具體的行為細節和態度。該階段的用戶畫像可用來驗證問題、完善或發現新的機會點。

           

          成熟期:產品相對穩定

          客戶資源相對穩定,可能已有一定的規模,內部管理需求增長,市場地位趨于穩定,日常工作也大多以維護為主。且現有增長點已遇上了瓶頸,用戶活躍將不可阻逆地緩慢下降,即使你做再多產品優化、燒錢運營都無法改變產品終將走向衰退的命運,時間問題。企業急于尋找突破口和新的增長點,用戶畫像又將被賦予新的使命:基于用戶畫像進行“新增長點”的分析,定性挖掘藍海,再定量進行驗證

           

          衰退期:產品活躍度快速下降

          進入到這個階段,說明產品沒有成功轉型。這時候再做用戶畫像的意義其實不大,如果一定要做,除了提高回流率、挖掘增長點外,可以定性了解原因,調整產品。

           

          2.2 產品使用角色多樣性

          不同于C端產品的的用戶單一性,B端產品的用戶畫像對應的不是一個個體,而是一個組織或機構,同時涵蓋組織機構中不同的人員。產品面向的使用對象可能從普通員工到企業高層,覆蓋銷售、技術、行政人事部分等,基于工作場景不一樣,對產品的需求可能也大相徑庭。

          以一個CRM系統為例,一個復雜的B端產品可能會涉及以下四種角色的用戶:決策者、主要使用者、次要使用者、間接使用者。如下圖所示:

          決策者:下決策購買產品或服務的人,可能是業務線負責人,也可能是公司董事長、CEO,他們常常不是產品的使用者,使用頻次低甚至完全不用,他們通常都是從公司的整體利益出發,更關注產品能否給公司業務帶來幫助,降本還是提效了。其評價某個功能的好壞,往往與使用者的感受是相悖的,如釘釘的“DING一下”,他們并不太關注使用過程、體驗,更關注產品的核心價值,將利益最大化。

          滿足決策者的需要是做好B端產品的前提,也是制作用戶畫像所要明確的方向;很多體驗做的不好、難看的產品之所以也能在B端市場有一席之地,就是因為滿足了企業的需要。比較理想的情況下,團隊對目標客群有一定深入的研究,形成趨于標準化的產品,就能打動目標客戶群的大部分決策者。

          主要使用者:真正頻繁使用產品的人,也是產品/設計師想要提升產品體驗要瞄準的人群

          他們可能更關注產品的具體使用,是不是易用,有沒有幫助他們更便捷地完成工作,有沒有提高他們的工作效率。主要使用者是最容易識別的,以CRM系統為例,如果沒有銷售日常在系統中錄入客戶數據,管理層就無法查看成單量、進度等他們所關注的信息。

          次要使用者:使用產品頻率相對主要使用者更低,用到的功能也比較少,只在某個中間流程涉及少量操作。如CRM系統中人事、財務會涉及到其中錢或出差的審批對他們而言,主要需求是能快速找到自己的任務并完成就可以了。

          間接使用者:不直接使用產品但會被產品影響的人群,產品和設計師在設計過程如果有資源和精力能兼顧他們的需求和體驗,那就太貼心了。如審計、政府人員,屬于不緊急,非必要需求。

           

          2.3 崗位職責決定了用戶目標和使用場景

          B端用戶使用場景多和業務形態密切相關,產品通常要解決的是某類角色工作時發生的問題,所以不同于C端用戶畫像,從用戶視角出發,關注用戶個人的場景、訴求、痛點和情緒,核心是滿足用戶的需求,關注用戶的年齡、性別、收入、個性、習慣、消費模式等標簽。

          但是在B端產品中,我們拋開了用戶作為個人存在的標簽,我們更關注用戶所代表的角色,他的崗位職責是什么,它在工作場景中需要完成哪些任務,這些任務要做什么的,其崗位職責決定了它完成任務的目標、場景、使用什么工具去,需要跟其他角色配合嗎等信息。

          所以B2B畫像更關注角色的分類、工作/使用場景、用戶目標、操作鏈路、角色協同等信息,很難看到類似這個人是不是已婚,小孩多大這些不知道如何應用于產品設計的內容。而在一個C端產品用戶畫像上很少看到有哪些讓他壓力山大的KPI等信息。

          仍然以CRM系統為例,其主要使用者-銷售的目標就是用該系統錄入商機、線索等,然后根據數據情況制定客戶溝通回訪計劃等,聚焦的是該系統能否讓他很好的履行了其崗位責任。和他這個人在哪個城市、已婚未婚等個人特性是無關的。

           

          2.4 由客戶畫像和角色畫像構成

          B2B產品面向的是企業用戶,滿足的是產業鏈中各企業的經營需求,這時B2B畫像應該具備行業、客戶屬性這一維度;但是最終購買者、使用者都是企業中的某一角色,這決定了B2B畫像還有角色這一維度。所以,小編認為,B2B用戶畫像是企業和多個核心角色共同構成的畫像,建立B2B畫像,需要客戶(企業)畫像和角色畫像兩部分的信息。

           

          1)客戶畫像

          客戶畫像指的是使用B端產品或服務的企業用戶,具有行業特征、企業特征及角色特征。其的目標是促成銷售,主要用來幫助銷售/運營人員他們快速定位目標企業,幫助他們更好的認識我們客戶是什么樣的人,讓他們的工作更有方向。

          一個典型的客戶色畫像會包括:

          基本信息:外在的標簽,如所處行業、地域、人員規模、收入規模(年營業額)

          業務模式:線下的實際業務流程-視行業而定,如商業模式(靠什么賺錢)、業務模式(業務怎么運作)

          組織機構:自上而下都有哪些機構,彼此之間的關系。

          關鍵角色:各個機構里有哪些崗位/工種,決策鏈上有哪些角色、誰才是有價值的關鍵角色,角色話語權。企業的關鍵決策人隨企業大小而不同,一般中小型企業都是老板、合伙人等。而大型企業采購B端軟件都是需要經過內部流程的,最終審核人是老板,但其中影響決策最大的往往是商務經理負責人。

           

          2)角色畫像

          B端產品雖然面向企業,但是最終使用執行的還是人,這些執行層(終端使用者)也是產品的檢驗者。在企業決定購買產品之前,執行層沒有話語權,但是在續費的時候,他們的話語權比重會開始顯著提升。

          因此在我們的產品設計階段,會更關注執行層的角色畫像。當我們討論產品、需求、場景、用戶體驗的時候,往往需要將焦點聚集在這類人群上。

          一個典型的角色畫像會包括:

          基本信息:如角色名稱、照片、角色/工種、平臺偏好、文化水平、辦公場地、使用頻次,角色名稱以及照片是為了更有代入感的個人情況說明,但值得注意的是,這里的情況更多圍繞職業情況展開,比如工作年限,工作職責,能力維度等,那些在C端中常見的家庭情況,幾個孩子什么的統統不重要。

          用戶行為驅動:用戶的工作目標、工作任務和考核指標,B端角色通常是企業員工,為了薪酬,有一般都會有結合任務而完成的考核指標,了解考核指標可以在設計過程中更明確知道哪些內容是用戶最關注的東西;

          使用場景:工作的時間、地點及工作內容是什么,使用場景是重要但容易被忽略的一個內容,尤其要搞清楚使用產品的場景有哪些、用戶平時的工作流程是如何的、主要使用什么功能??捎靡粋€真實、普遍、易懂的故事勾勒一下

          使用期望:日常工作面臨的挑戰和痛點,期望獲得的幫助。

          角色畫像和客戶畫像之間沒有直接關系。因為目標不同,所以會有不同的用戶細分:客戶畫像的目標是成銷售,獲取利益;角色畫像是為了解決問題和為用戶創造價值,進一步為公司創造價值。但是在刻畫B2B用戶畫像時,如果只考慮執行者的話,沒有客戶畫像作為指引、摸清決策者的特征與行為,你的產品功能或者體驗設計上可能就會出現嚴重偏差,甚至方向錯誤。

          3.1 客戶畫像的價值

          產品和服務只是企業將價值傳遞給客戶的一種工具和媒介,無論產品形態如何,其本質都是在解決客戶的問題。如果沒法滿足客戶的業務需求,基本上該產品對客戶是沒有價值的??蛻舢嬒褡饔秘灤┊a品生命全周期,產品/市場/銷售較為關注,它的價值主要體現有三點:

          對產品:明確為誰服務,快速的了解客戶的需求和狀況,確定產品功能設計,學會識別用戶的解決方案和用戶在場景下的訴求,不斷迭代調整產品;

          對市場/運營人員:建立對客戶盡量全面的了解并基于客戶畫像確定營銷內容、營銷策略和渠道選擇,使產品的服務對象更聚焦;

          對銷售人員:幫助銷售進行客戶篩選,找到有效客戶,提高轉化率,確定業務方向和銷售打法。合理配置團隊,完成KPI。

          客戶畫像越早建立越好,但是務必注意控制深度和成本,因為不同階段的企業其側重點有所不同。在初創期,產品團隊可以通過關注典型客戶來積累定性數據,從而低成本搭建客戶畫像;而到了成長期和成熟期,在擁有大量客戶數據的前提下,企業可以逐漸過渡到使用定性&定量相結合的方式來形成更為清晰的客戶畫像。

           

          3.2 角色畫像的價值

          以前業界有種說法,做B端,能用是第一位,用戶體驗不重要。所以除了一些成規模的SaaS公司,設計師在B端幾乎無用武之地,成了組件化的搬運工、工具人。所以大部分的企業在跑馬圈地時期是不注重用戶體驗的,企業有客戶畫像,卻未必有角色畫像。

          還說用戶體驗不重要的人,可以看看有贊CEO白鴉的公開說明。

          圖片來源于網絡

          2020年,疫情為企業級SaaS帶來流量,在今年2月宣布延期復工后,釘釘搜索量激增數倍,無論中大型企業還是小微企業都紛紛加入了遠程辦公的行列,協同辦公SaaS獲得了大量的“試用客戶”,加快了市場激活的進程,但接下來,流量轉化和用戶留存成為后疫情時代的核心關注點。

          后疫情時代,對企業來說,改善產品用戶體驗,了解使用產品的終端用戶,構建角色畫像愈加重要。而角色畫像作為產品和設計師比較關注的畫像,有以下三點價值

          設計前:幫助確立設計目標、設計策略與準則

          設計中:解決架構混亂問題,明確需求功能的合理性和優先級;解決需求爭議問題和溝通問題,與團隊成員就服務目標達成共識,

          設計后:解決可用性測試問題,幫助我們鎖定合適的測試用戶;

          總結一下就是角色畫像是產品的根基,客戶畫像是產品的外延生命力的象征,兩者相輔相成。

           

          對于這個章節。我將以我所負責的一款企業產品為例,來講述用戶畫像的創建過程。在這個項目中我們通過定性研究創建了用戶畫像,當然如果必要,大家也可以在后期再通過定量研究對得到的用戶畫像進行驗證。

          用戶畫像的創建可分為以下幾個步驟:

           

          Step 1:研究準備與數據收集

          B端用研和C端有一點不同,企業用戶的使用場景基于業務,背景復雜、角色多樣、使用工具特殊(如企業自有后臺系統)等,導致無法在可用性實驗室中切實地模擬出來,所以我們得接近用戶、基于業務場景去了解用戶。

          小編大致總結了一下,B端用研有以下3大痛點:

          信息獲取難:B端產品主要針對用戶工作和業務開展,一般都是強制使用產品不存在“挑剔”的選擇空間,導致用戶的反饋就非常少,信息的獲取壁壘較高?!吧疃仍L談”是最核心也是獲取信息性價比最高的一種方法,但是出于對信息用途的不了解,對商業隱私、生意經驗泄露的擔憂,B端用戶可能不愿意配合調研或不信任你。

          業務復雜:缺乏行業經驗,難以理解業務,這會讓用研對象覺得你不專業,仿佛雞同鴨講、對牛談琴。而且在不理解業務的情況下,設計師在訪談過程中會過于關注基礎業務,無法進行更深層次的訪談,采集的信息并非用戶的真正需求。

          視角不同:設計師視角容易缺乏框架性思考,搞不清每個業務模塊/功能的邊界以及它們之間的關系,不能站在用戶(決策者、使用者)的角度思考問題,以至于被用戶牽著鼻子走,用戶說什么就是什么,能和用戶產生共鳴的部分極少。

          俗話說“磨刀不誤砍柴工”,針對以上三大痛點,項目伊始有必要進行一輪全面的桌面研究,幫助我們快速建立對行業的全局認知并了解業務,另一方面,也有助于我們更好地和用戶進行溝通。

           

          研究內容:

          • 1.產品的定位、盈利點及目標客戶
          • 2.當前的業務目標是什么,主要解決什么問題
          • 3.整體業務框架,核心業務流程和使用場景
          • 4.不同角色之間如何協同以及每種角色的價值和目標
          • 5.專業術語的理解
          • 6.達成業務目標的關鍵資源和能力

           

          研究途徑:

          • 1.公司官網、競品網站、查閱行業內相關報告、參加行業會議等,形成對行業的整體認知,如艾瑞網、易觀、CBDNData等專業網站。(部分報告需開通會員才能查閱)
          • 2.通過搜索引擎查詢關鍵詞查詢相關文章。
          • 3.最快捷的方式是向產品經理/業務方要相關文檔或直接向他們請教。
          • 4.銷售??/客服/實施顧問等,一般上線的產品都會有客戶反饋群或來收集整理客戶實時反饋的需求信息,可以通過他們大概了解到目前產品有哪些問題
          • 5.如果有這方面的專家用戶,可以虛心向這些專家用戶請教,他們對業務的理解更加深入。

           

          Step 2:確定目標與畫像維度

          此處有2個注意點:

          • 1.如何篩選出目標用戶?
          • 2.畫像維度有哪些?

          針對以上2三點,下文將依次展開說明。

           

          1、如何篩選出目標用戶?

          Cooper指出,不能為超過3個以上的用戶畫像設計產品,這樣容易產生需求沖。當有多個用戶畫像的時候,需要考慮用戶畫像的優先級。前面講B2B畫像特點的提到過,由于是企業產品,僅僅產品中一條業務線,角色也是多樣的,所以在篩選目標用戶時有一點尤其要注意:應識別出關鍵的用戶畫像。

          以我公司的招聘業務為例,為了便于大家在宏觀上確定什么樣的企業是我們主要的目標用戶,我們的做法是按企業類型定義了三個KA客戶畫像。由產品、市場、以及各組leader一起來完成用戶畫像的優先級排序工作。確定用戶畫像優先級時,我們可以主要從以下幾個方面來考慮:

          • 使用頻率
          • 市場大小
          • 收益的潛力
          • 競爭優勢/策略等

          然后再找關鍵的角色畫像,即角色畫像中的決策者和主要使用者,次要使用者和間接使用者因時間、金錢的關系,現階段不做考慮。我司產品的客戶主要是勞動密集型企業,作用是幫助客戶解決藍領用工問題和發薪合規問題。以招聘業務線為例,想把這個產品賣給某企業,首先要打動該企業的HR總監,再說服CEO/董事長,再讓招聘部員工-HR試用。

          那么這條決策鏈上的關鍵人就包括了HR總監、CEO/董事長、HR。那在這個案例中,HR總監是決策鏈的關鍵人物,因為只有他認可之后,才會申請購買或在CEO面前夸這個產品。而HR是最終產品的使用者,雖然他們在企業購買產品前沒有話語權,但是在續費階段,他們的話語權最大。對于處于成長期的產品來說,我們現階段的調研目標也是為了獲取HR總監和HR兩類角色的用戶畫像,每個角色訪談4~6人;

           

          2、畫像維度有哪些?

          篩選出了目標用戶,那畫像維度有哪些呢?。以本案例為例,在本次用戶畫像的設計中,因我司產品處于優化迭代階段,做用戶畫像的目的是了解用戶的使用情況,比如各功能的使用頻率、使用中遇到的問題,定位問題關鍵及原因分析,優化產品功能及運營模式,同時也希望通過了解用戶的具體行為細節和態度,發現新的機會點。

          對于企業,主要了解其企業規模、行業屬性、業務流程、組織架構、機構里有哪些崗位/工種。這個信息主要由產品或銷售采集,應該前置于角色畫像。而我們第一步的業務研究中,很大一部分內容也來自于此。

          對于決策者,主要向其了解企業管理、業務等方面的需求信息,對于本產品決策者關注的是營收增長、效率提高還是減少成本等方面的問題。

          對于主要使用者,側重了解用戶特征、產品認知、使用場景與痛點,各功能的使用頻率、使用中遇到的問題等

          根據前面前文提到的的用戶畫像構成要素和自身業務情況,有選擇性的摘取,最終梳理出本案的用戶畫像維度如下:

           

          Step 3:確定調研方法

          明確了調研對象后,就可以展開調研了。一般有三種方式:

          • 定性研究,基于小樣本的研究,如用戶訪談、實地調研、輪崗-理解現象原因;
          • 定量研究,收集更大規模樣本的調查數據,如問卷調研、數據分析-發現現象;
          • 定量+定性研究,兩者的結合。

          定量和定性調研究雖各有優劣,但定量較為昂貴、費時,也需要有精通統計分析的認為協助,在B端調研方式中并不太實用。對大多數團隊而言,定性是性價比最高、最合適的。它不僅提供了“用戶是誰、他們想要什么”,還是基于數據、經濟高效較為快捷的一種方式。

          采用何種研究方法,主要根據企業生命周期、研究目的、項目時間和經費等進行綜合考量,本案中我們選擇深度訪談收集一手資料。

           

          Step 4:采集角色資料

          在明確目標與方法后,需要對整個研究進行細化,制定具體詳實的執行計劃并開始招募用戶采集資料了??赏ㄟ^前中后三個階段性策略的來進行訪談。

           

          1. 訪談前:搭建信任基礎

          在構建用戶畫像的step 1中,我們已經對業務和要訪談的用戶角色有了一定的了解。只需在訪談時間的4-7天前,根據確定的畫像維度來設計訪談大綱。設計大綱的目的是避免訪談過程中對話內容發散、混亂而無法收集到足夠多的有效信息。

          需要注意的是:大綱需要針對訪談的每一條需求,做到詳細、縝密,同時要考慮用戶對訪談題目的理解,可根據產品使用順序,由易到難、客觀到主觀、概括到具體的順序展開,比如產品功能的使用頻率就可以作為一個客觀問題放在問題的開始。且要考慮訪談的時間,因為訪談的時間不易過長,所以訪談提綱也不能過于冗長,典型的訪談大綱模板如下圖所示:

          并提前將訪談目的告知受訪者,能讓他們看到訪談的直接或間接價值(提高工作效率、降低成本等),也就能更好地建立雙方的信任。因此,我們需要提前確認整個訪談的規劃,并主動將相關信息告知受訪者,包括訪談的時間、地點、方式、目的、流程,還有過程中可能涉及的問題、后續發放的獎品等。

           

          2. 訪談中:表現專業特質

          開場介紹

          跟C端訪談一樣,正式訪談開始之前的開場白非常重要!除了再次介紹自己(不管是什么崗位,此刻我就是用戶研究員),說明這次訪談的目的,一定還要強調訪談的隱私性和數據安全性,畢竟他們面對的是真金白銀的生意。

           

          暖場

          在正式訪談前,可以先和用戶閑聊2~3分鐘,通過一定的溝通活躍氣氛,讓用戶更加放松,同時增強用戶對我們信任。暖場和開場介紹可穿插進行,沒有絕對的先后之分,在訪談者自我介紹完成之后,也可以讓被訪者進行自我介紹。

           

          一般問題

          一般問題是指一些比較基礎性問題,用戶不需要進行太多思考即可回答,比如“你最常用的功能是哪些”、“使用時間多長”。

           

          深入問題

          深入問題是用戶行為和想法更加深入的探索,會更關注用戶行為細節和行為背后的動機。一般在問這些問題時,訪談者需要不斷地詢問用戶為什么,直到用戶無法繼續回答。深入問題是整個訪談的核心,也最容易挖掘到用戶需求和痛點。

           

          回顧與總結

          每部分的訪談結束后可進行簡單的小結。訪談者通過回顧訪談過程對用戶的行為和態度進行客觀闡述,一方便有助于訪談者梳理思路,另一方面讓用戶對訪談結果再次確認。

           

          3. 訪談后:實現長線共贏

          最好和訪談對象建立長期聯系,尤其是一線業務人員。人和人面對面聊過后,會產生基本的信任感和好感,要借助訪談的機會,拉近和業務人員的距離。如果后續項目中遇到問題,想獲取最真實的一線反饋,可以聯系之前的訪談對象,尋求幫助。

           

          Step 5:分析建模

          1)根據角色對訪談對象分組

          將用戶訪談后得出的重點信息寫在便利貼上(或Excel表中打印后切片),設計師需要根據產品用戶角色不同,將受訪的用戶歸類分組,如HR和HR總監。

           

          2)找出行為變量

          分組后,需要識別關鍵的行為變量,將調研到的用戶與行為變量進行一一對應,并識別差異化行為模式。如下圖所示

           

          3)映射訪談對象與行為變量的關系

          再將不同的角色間同類行為模式歸納(合并同類項),進行行為描述。此處需注意以行為變量為依據進行用戶對應時,不必追求絕對的精準,只要相對能映射清楚即可。梳理完后,觀察可發現某些用戶群體聚集在幾個行為變量上,它們構成了一個顯著的行為模式,由此聚類出某個角色類型。依此類推,可以發現幾個不同的行為模式。為保證全面,映射完最好遍歷一下,檢查是否有用戶或變量的遺漏。

           

          4)找出共性行為模式

          完成映射后,尋找在變量軸上的對象群。梳理完后,如果一組對象聚集在多個不同的變量上,則可以代表一類角色存在顯著的共性行為表現(通常每類角色會有2~3個共性行為)。共性行為能幫我們識別標準化產品需要滿足的用戶需求,而差異化行為可以根據企業需求做定制化服務,一個B端產品是不太可能滿足所有用戶的需求的。

           

          Step 6:畫像呈現

          一旦我們找到共性行為,就可以創造用戶畫像了。梳理出每類角色的行為、目標、痛點等維度特征,形成畫像的基本框架。最后再完善用戶畫像,此時我們需要做的事情主要是:

          • 1)結合真實的數據,選擇典型特征加入到用戶畫像中
          • 2)結合使用場景進行故事描述,在描述中體現行為變量等因素,讓畫像更加豐滿、真實。
          • 3)讓用戶畫像容易記憶,比如用照片、名字、年齡、幾條簡單的關鍵特征描述,都可以減輕讀者的記憶負擔

          最終客戶畫像呈現如下圖

          數據已脫敏,非真實數據

           

          最終角色畫像呈現如下圖 

          數據已脫敏,非真實數據

           

          用戶畫像作為一個強大的設計和交流工具,能夠讓利益相關人目標始終保持一致,它的價值在于傳播與使用。舉個例子,90年代,庫珀將用戶畫像的描述做成一頁紙貼在墻上,一個產品的一個用戶畫像做一頁紙,這樣設計團隊成員每天走進辦公室就能看到。

          用戶畫像制作出來后,與整個項目團隊共享定義的用戶畫像是很重要的,千萬不要讓他在共享文檔里積灰或掛在墻上當擺設。你要做的是讓用戶畫像從紙上躍起,走進你同事的心里,讓他在每次討論、每個決策時,自然、自發地被提起。所以用戶畫像的使用也是極其重要的,不然前面的工作都是無用之功。

          所以,你可能需要:

          向團隊介紹用戶畫像?;c時間介紹研究的過程,展示照片給他們看,聊一聊畫像的需求,期望,痛點,性格等。最好以故事性的方式進行引導,并長期地在會議里提到并討論它

           

          在你的用戶故事中使用用戶畫像。“如果我是**業務招聘員,我想要快速識別出今天某門店招聘的人數和到崗的人數”。設計時,花點時間想象一下軟件會被用戶在工作中如何應用。

           

          造訪不同團隊,介紹用戶畫像,包括它從何來,如何用。教他們怎么招募有代表性的用戶進行測驗,如何寫用戶情景來啟發設計或作為可用性測試任務

           

          總的來說,在你能力范圍之類的地方,宣傳用戶畫像的商業價值,提升大家的信任。畢竟用戶畫像可以幫助產研團隊跳出自己的需求,了解真正使用產品的人的需求。當越來越多的團隊使用用戶畫像,那么用戶畫像就會越來越像一個真實的用戶,幫助團隊從用戶的角度出發去設計產品。

           

          值得注意的一點是,用戶畫像并非一成不變的,很大程度上受環境和周期的影響,所以我們要定期回顧自己的用戶畫像,對他們進行一些更新,確保和現實一致性。市場變化和策略的變化可能會重新定義你的業務受眾,也可能出現其他的細分,這也是重新調整用戶畫像的好機會,否則它們最終將失去生命力。希望你的用戶畫像也能始終對業務起到幫助,為體驗助力。

          文章來源:學UI網   作者:小紐扣

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          前端性能優化指北-關于有些細節和思路

          前端達人

          目錄

          1. 比你最強的競爭對手快20%

          2. 反應時間為100毫秒,幀數是每秒60幀

          3. 首次有效渲染時間要低于1.25秒,速度指數要低于1000

          定義你所需要的環境

          4. 選擇和安裝你的開發環境

          5. 漸進增強(progressive enhancement)

          6. AMP還是Instant Articles?

          7. 選擇適合你的CDN

          開始優化

          8. 直接確定優化順序

          9. 使用符合標準的技術

          10. 考慮微優化和漸進啟動

          12. HTTP的緩存頭使用的合理嗎?

          13. 減少使用第三方庫,加載JavaScript異步操作

          14. 圖片是否被正確優化?

          15. 圖片的進一步優化

          15.1 如何使用webpack將靜態素材快速托管到ImageX,并開啟http/2

          16. 網頁字體優化了嗎?

          17. 快速執行關鍵部分的CSS

          18. 通過tree-shaking和code-splitting減少凈負載

          19. 提升渲染性能

          20. 預熱網絡連接,加快傳輸速度

          HTTP/2

          21. 準備好使用HTTP/2

          22. 適當部署HTTP/2

          23. 確保服務器安全可靠

          快速入門

           

          微優化是保持性能最好的辦法,但是又不能有太過明確的優化目標,因為過于明確的目標會影響在項目中做的每一個決定。以下是一些不同的模型,請按照自己舒服的順序閱讀

          1. 比你最強的競爭對手快20%

          根據一個心理學研究,你的網站最少在速度上比別人快20%,才能讓用戶感覺到你的網站比別人的更快。這個速度說的不是整個頁面的加載時間,而是開始加載渲染的時間,首次有效渲染時間(例如頁面需要加載主要內容的時間),或者交互時間(指的是頁面或者應用中主要的頁面加載完成,并主備好與用戶進行交互的時間)。

          在Moto G(一個中端三星設備)和Nexus 4(比較主流的設備)上衡量開始渲染時間(用WebPagetest)以及首頁有效渲染時間(用Lighthouse),最好是在一個開放的實驗室中,使用規范的3G,4G和Wi-Fi鏈接。

           

          你可以通過你的分析報告看看你的用戶處在哪個階段,選取其中前90%的用戶體驗來做測試。接著收集數據,建一個表格,篩去20%的數據并預設一個目標(如:性能預算)?,F在你可以將上述兩個值進行對比檢測。如果你始終維持著你的目標并且通過一點一點改變腳本去加快交互時間,那么上述方法就是合理可行的。

           

          如果前端工程師們都在積極的參與項目概念,UX以及視覺設計的決定,這將會給整個項目帶來巨大收益。地圖設計的決定違背了性能理念,所以他在這份清單內的順序有待考慮。

          2. 反應時間為100毫秒,幀數是每秒60幀

          RAIL性能模型會為你提供一個優秀的目標,既盡最大的努力在用戶初始操作后的100毫秒內提供反饋。為了達到這個目標,頁面需要放棄權限,并將權限在50毫秒內交回給主線程。對于像動畫一樣的高壓點,最好的方法就是什么都不做,因為你永遠無法達到最小絕對值。
          同理,動畫的每一幀都需要在16毫秒內完成,這樣才能保證每秒60幀(一秒/60=16.6毫秒),如果可以的話最好能在10毫秒內完成。因為瀏覽器需要一定的時間去在屏幕上渲染新的幀,而且你的代碼需要在16.6毫秒內完成執行。要注意,上述目標應用于衡量項目的運行性能,而非加載性能。

          3. 首次有效渲染時間要低于1.25秒,速度指數要低于1000

          縱使這個目標實現起來非常困難,你的最終目標也應該是讓開始渲染時間低于1秒且速度指數低于1000(在網速快的地方)。對于首次有效渲染時間,上限最好是1250毫秒。對于移動端,3G下移動設備首次渲染時間低于3秒都是可以接受的。稍微高一點也沒關系,但千萬別高太多。

          定義你所需要的環境

          4. 選擇和安裝你的開發環境

          不要過多的關注當下最流行的工具,堅持選擇適合自己開發環境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者組合起來的工具。只要這個工具運行的速度夠快,而且沒有給你的維護帶來太大問題,這就夠了。

          5. 漸進增強(progressive enhancement)

          在構建前端結構的時候,應始終將漸進增強作為你的指導原則。首先設計并且構建核心體驗,隨后再完善那些為高性能瀏覽器設計的高級特性的相關體驗,創建彈性體驗。如果你的網頁可以在使用低速網絡、老舊顯示器的很慢的電腦上運行飛快,那么在光纖高配電腦上它只會運行的更快。

          6. AMP還是Instant Articles?

          根據你整體組織結構的優先順序和策略,你可以考慮使用Google的AMP或Facebook的Instant Articles。要知道沒有這些你也可以達到不錯的性能,但是AMP可以提供一個性能不錯的免費的內容分發網絡框架(CDN),Instant Articles可以在Facebook上促進你的性能。你也可以建立progressive web AMP。

          7. 選擇適合你的CDN

          根據你的動態數據量,可以將一部分內容外包給靜態網站生成工具,將它置于CDN上,從中生成一個靜態版本,從而避免那些數據庫的請求。也可以選擇基于CDN的靜態主機平臺,通過交互組件豐富你的頁面(JAMStack)。注意CDN是否可以很好的處理(或分流)動態內容。沒必要單純的將你的CDN限制為靜態。反復檢查CDN是否執行了內容的壓縮和轉化,檢查智能HTTP/2傳輸和緩存服務器(ESI),注意哪些靜態或動態的部分處在CDN的邊緣(最接近用戶的服務器)。

          開始優化

          8. 直接確定優化順序

          首先應該弄清楚你想解決的問題是什么。檢查一遍你所有的文件(JavaScript,圖片,字體,第三方script文件以及頁面中重要的模塊,例如輪播,復雜信息圖標和多媒體內容),并將他們分類。
          列一個表格。明確瀏覽器上應該有的基礎核心內容,哪些部分屬于為高性能瀏覽器設計的升級體驗,哪些是附加內容(那些不必要或者可以被延時加載的部分,例如字體,不必要的樣式,輪播組件,播放器,社交網站入口,很大的圖片)。

          9. 使用符合標準的技術

          使用符合標準的技術向過時的瀏覽器提供核心體驗,向老式瀏覽器提供增強體驗, 同時對所加載的內容要有嚴格的把控。即首要加載核心體驗部分,將增強部分放在DomContentLoaded,把額外內容發在load事件中。以前我們可以通過瀏覽器的版本推斷出設備的性能,但現在我們已經無法推測了。因為現在市場上很多廉價的安卓手機都不考慮內存限制和CPU性能,直接使用高版本的Chrome瀏覽器。一定要注意,在我們沒有其他選擇的時候,我們選擇的技術同時可能成為我們的限制。

          10. 考慮微優化和漸進啟動

          在一些應用中,可以在渲染頁面前先初始化應用。最好先顯示框架,而不是一個進度條或指示器。使用可以加速初始渲染時間的模塊或技術(例如tree-shakingcode-splitting),因為大部分性能問題來自于應用引導程序的初始分析時間。還可以在服務器上提前編譯,從而減輕部分客戶端的渲染過程,從而快速輸出結果。最后,考慮使用Optimize.js來加快初始加載速度,它的原理是包裝優先級高的調用函數(雖然現在已經沒什么必要了)。

           

          到底采用客戶端渲染還是服務器端渲染?不論哪種做法,我們的目標都是建立漸進啟動:使用服務器端渲染可以得到很短的首次有效渲染時間,這個渲染過程也包括小部分的JavaScript文件,目的是使交互時間盡可能的接近首次有效渲染時間。接下來,盡可能的增加一些應用的非必要功能。不幸的是,正如Paul Lewis所說,框架基本上對開發者是沒有優先級的概念的,因此漸進啟動在很多庫和框架上是很難實施的。如果你有時間的話,還是考慮使用策略去優化你的性能吧。

          12. HTTP的緩存頭使用的合理嗎?

          仔細檢查一下例如expires,cache-control,max-age以及其他HTTP緩存頭是否被正確的使用。一般來說,資源不論在短時間(如果它會被頻繁改動)還是不確定的時間內(如果它是靜態的)都是可緩存的——你大可在需要的時候在URL中成改版本。如果可能,使用為指紋靜態資源設計的Cache-control:immutable,從而避免二次驗證(2016年12月,只有FireFox在https://處理中支持)。你可以使用,Heroku的primer on HTTP caching headers,Jake Archibald的 ”Caching Best Practices”,還有IIya Grigorik的HTTP caching primer作為指導。

          13. 減少使用第三方庫,加載JavaScript異步操作

          當用戶請求頁面時,瀏覽器會抓取HTML同時生成DOM,然后抓取CSS并建立CSS對象模型,最后通過匹配DOM和CSS對象生成渲染樹。在需要處理的JavaScript文件被解決之前,瀏覽器不會開始對頁面進行渲染。作為開發者,我們要明確的告訴瀏覽器不要等待,直接開始渲染。具體方法是使用HTML中的deferasync兩個屬性。事實上,defer更好一些(因為對于IE9及以下用戶對于IE9及以下用戶,很有可能會中斷腳本)。同時,減少第三方庫和腳本的使用,尤其是社交網站的分享按鍵和<iframe>嵌入(比如地圖)。你可以使用靜態的社交網站分享按鍵(例如SSBG的)和指向交互地圖的靜態鏈接去代替他們。

          14. 圖片是否被正確優化?

          盡可能的使用帶有srcset,sizes還有<picture>元素的響應式圖片。你也可以利用<picture>元素的AVIF、WEBP格式,用JPEG格式作為替補(參見Andreas Bovens的code snippet)或是使用內容協商(使用接受頭)。本身可以使用自己的PS或者skecth嘗試導出,若不能導出,可以嘗試 火山引擎的ImageX圖像處理服務(不知道怎么使用可以自行百度搜索 "火山引擎 ImageX")可以支持多種格式輸出,比如AVIF、webp格式;

          我曾經寫過這篇文檔可以對照一下:高效率圖像壓縮處理服務, 參考截圖:

           

          你也可以使用客戶端提示,現在瀏覽器也可以做到。在用來生成響應圖片的源文件過少時,使用響應圖片斷點生成器。

          15. 圖片的進一步優化

          當你在編寫登錄界面的時候,發現頁面上的圖片加載的特別快,這時你需要確認一下圖片進一步優化的思路只要有三點:

          • 降低圖片的分辨率,如果瀏覽器中展示區域100*100,此時展示 400*400 就屬于資源浪費,這也是顯著提高圖片響應速度最直接的方法;
          • 降低圖片壓縮的質量,圖片壓縮質量,使用有損壓縮,比如圖片壓縮質量90 和75對人眼可見的范圍內都可以接受,常見支持有損壓縮的圖片格式比如,jpeg、wepb、heic、avif等圖片格式支持圖片有損壓縮;
          • 改變圖像壓縮的壓縮方式,改變圖片的壓縮算法也能更高效的提高圖片優化圖片提高速度,比如 常見圖像壓縮率(圖像畫質等同前提下): HEIF (heic) > AVIF (avif、avis) >webP(awebp) > jpeg > png 等;

          正常情況下PNG是原圖格式,體積特別大,巧的是業界對PNG 有pngquant 使用Median Cut量化算法的修改版本和其他技術來緩解Median Cut的不足,可以最大效率保留信息的前提下降低png 的體積大??;如果我們把如上的一些優化處理起來,我使用的過程中發現,火山引擎的imagex 已經完美的支持了上面三者的使用方法:下面我舉個例子做一下說明:

          http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/public/attachments/2021/03/11/GyVrojIWFkQOKSAzYnUmlQxvaESnPaZYxgpu9v1Z.png~tplv-n9b2vwdhz3-12:300:200.webp 這個是 png的原圖處理好的結果,在這個url中imagex 給出了一種url語義,"~tplv--模板名稱:[模板參數].圖像格式"  通過改變300:300 能改改變壓縮率,通過參數能夠調整壓縮質量,通過改變webp-->avif 可以轉換成不同的壓縮方法;

          更巧妙的是在這,就算指定輸出png后仍然還可以設置質量參數

           

          如果你還覺得不夠,那你可以通過多重背景圖片技術來提高圖片的感知性能。

          15.1 如何使用webpack將靜態素材快速托管到ImageX,并開啟http/2

          這里發現一個第三方寫的但被官方推薦的開源插件https://github.com/Cmaxd/veimagex-webpack-loader ,通過配置webpack-loader 插件的方式可以將圖片上傳到ImageX,然后將圖片使用不同的圖片模板訪問就可以滿足需求,同一個圖片可以使用多個地址,例如avif、webp、jpeg 使用 <picture> 標簽進行降級 或者判斷瀏覽器支持降級;

           

          16. 網頁字體優化了嗎?

          你用來修飾網頁字體的服務很有可能毫無用處,包括字形和額外的特性。如果你在使用開源的字體,嘗試用字體庫中某一個小的子集或是自己歸類一個小的子集從而壓縮文件大小(例如通過一些特殊的注音符號引用Latin)。WOFF2 support是個非常不錯的選擇,如果瀏覽器不支持,那你可以將WOFF和OTF作為備用。你也可以從Zach Leatherman的“Comprehensive Guide to Font-Loading Strategies”一文中選擇一個合適的策略,然后使用服務器來緩存字體。如果想要快速入門,Pixel Ambacht的教程與案例會讓你的字體變得盡然有序。如果你用的是第三方服務器主機,沒辦法自己在服務器上對字體進行操作,一定看看Web Font Loader

          17. 快速執行關鍵部分的CSS

          為了確保瀏覽器盡可能快的渲染你的頁面,先收集頁面首次可見部分的CSS文件(也叫決定性CSS或上半版CSS)進行渲染,然后將它加入頁面的<head>部分,從而避免重復操作。因為慢啟動階段對交換包大小的限制,你關鍵CSS文件的大小也被限制在14KB左右。如果高于這個值,瀏覽器需要重復一些步驟來獲取更多的樣式。關鍵CSS是允許你這樣做的??赡軐γ總€模板都需要這個操作。如果可能,考慮一下用Fiament Group用的條件內斂方法

          通過HTTP/2,關鍵CSS可以單獨存為CSS文件,通過服務器傳輸,而且可以避免HTML膨脹。服務器傳輸缺乏連續支持,并且存在一些超高速緩存的問題(Hooman Beheshti演示的前144頁)。事實上,這樣會導致網絡緩沖區膨脹。因為TCP的慢啟動,服務器傳輸在穩定的連接下會更有效率。所以你可能需要建立帶有緩存的HTTP/2服務器傳輸機制。但請記住,新的cache-digest規則會否定手動建立的需要緩存的服務器的請求。

          18. 通過tree-shaking和code-splitting減少凈負載

          Tree-shaking是通過保留那些在項目過程中真正需要的代碼從而清理你的構建過程的一種方式。你可以用Webpack 2來提出那些沒用的住配置文件,用UnCSSHelium從CSS中取出不需要的樣式。同理,也可以考慮學習一下如何編寫高效的CSS選擇器,以及如何避免膨脹和高費的樣式。

          Code-splitting是另一個Webpack特性,它可以根據按需加載的塊將你的代碼分開。只要你在代碼中定義了分離點,Webpack便會處理好相關的輸出文件。它基本上能保證你初始下載的內容很小,而且在需求被添加時按需請求代碼。

          Rollup所展示的結果要比Browserify配置文件所顯示的好得多。所以當我們想使用類似工具的時候,或許應該看看Rollupify,它將ECMAScript2015模塊變成了一個更大的CommonJS模塊——因為小模塊沒準有出乎意料的高性能成本,這源自于你對打包工具模塊系統的選擇。

          19. 提升渲染性能

          使用類似CSS containment的方法對高消耗組建進行隔離,從而限制瀏覽器樣式的范圍,可以作用在為無canvas的瀏覽工作的布局和裝飾工作中,或是用在第三方工具上。要確保頁面滾動和出現動畫效果時沒有延遲,別忘了之前提到過的每秒60幀的原則。如果沒辦法做到,那就盡可能保證每秒幀數的大致范圍在15到60幀。使用CSS中的will-change通知瀏覽器哪些元素和屬性發生了變化。也記得要衡量渲染執行中的性能(可以用DevTools)??梢詤⒄誙dacity上Paul Lewis的免費課程——瀏覽器渲染優化,作為入門。還有一篇Sergey Chikuyonok的文章講了如何正確的用GPU動畫

          20. 預熱網絡連接,加快傳輸速度

          使用頁面框架,對高消耗組建延遲加載(字體,JS文件,循環播放,視頻和內嵌框架)。使用資源提示來節省在dns-prefetch(指的是在后臺執行DNS檢索),preconnect(指要求瀏覽器在后臺進行握手鏈接(DNS,TCP,TLS)),prerender(指要求瀏覽器在后臺對特定頁面進行渲染),preload(指的是提前取出暫不執行的源文件)。根據你瀏覽器的支持情況,盡量使用preconnect來代替dns-prefetch,而且在使用prefetchprerender要特別小心——后者(prerender)只有在你非常確信用戶下一步操作的情況下再去使用(比如購買流程中)。

          HTTP/2

          21. 準備好使用HTTP/2

          Google開始向著更安全網頁的方向努力,并且將所有Chrome上的HTTP網頁定義為“不安全”時,你或許應該考慮是繼續使用HTTP/1.1,還是將目光轉向HTTP/2環境。雖然初期投入比較大,但是使用HTTP/是大趨勢,而且在熟練掌握之后,你可以使用service worker和服務器推送技術讓行性能再提升一大截。
          現在,Google計劃把所有HTTP頁面標記為不安全,并且將HTTP安全指示器設置為與Chrome用來攔截HTTPS的紅色三角相同的圖標。

          使用HTTP/2的環境的缺點在于你要轉移到HTTPS上,并且根據你HTTP/1.1用戶的數量(主要指使用過時操作系統和過時瀏覽器的用戶),你需要適應不同的建構過程,才能發送不同的建構。注意:不論是遷移還是新的構建過程都可能非常棘手而且耗時很多。

           

          22. 適當部署HTTP/2

          重申,使用HTTP/2協議之前,你需要徹底排查目前為止你所使用協議的情況。你需要在打包組建和同時加載很多小組間之間找到平衡。

          一方面,你可能想要避免將很多資源鏈式鏈接,與其將你全部的界面分割成許多小模塊,不如將他們壓縮使之成為建構過程的一部分,之后給它們賦予可檢索的信息并加載它們。這樣的話,對一文件將不再需要重新下載整個樣式清單或JavaScript文件。

          另一方面,封裝是很有必要的,因為一次向瀏覽器發送太多JavaScript文件會出問題。首先,壓縮會造成損壞。得益于dictionary reuse,壓縮大文件不會對文件造成損害,壓縮小文件則不然。確實有方法可以解決這個問題,但這不是本文討論的范疇。其次,瀏覽器還沒有優化到可以對類似工作流進行優化。例如,Chrome會引發進程間通信(IPCs),這些通信的數量與資源的數量成正比,而這成百上千個資源將會消耗大量的瀏覽器的執行時間。
          Chrome的Jake Archibald建議,為了用HTTP/2達到最好的效果,考慮一下逐步加載CSS文件

          當然你可以考慮逐步加載CSS文件。很顯然,你這樣做對HTTP/1.1的用戶非常不利,所以你可能需要根據不同的瀏覽器建立多個版本來應對你的調度過程,這樣就會使過程略微復雜。你也可以避免HTTP/2連接的合并,同時受益于HTTP/2來使用域名碎片,但是實現起來有些困難。

          我們到底應該做什么呢?如果你粗略的用過HTTP/2,似乎成功的發送過10個左右的包(在老是瀏覽器上運行的也不錯)。那你就能著手開始試驗并且為你的網站找到平衡點。

          23. 確保服務器安全可靠

          所有的瀏覽器都支持HTTP/2并且使用TLS,這是有你可能想要避免安全警告,并刪除頁面上沒用的元素。好好檢查你的安全頭部是否設置正確,排除已知的缺陷檢查證書

          如果還沒有遷移到HTTP, 你那可以先看看HTTPS準則(The HTTPS-Only Standard)。確保所有外部插件和監視腳本都能被HTTPS正確加載,確保沒有跨站腳本出現,HTTP腳本傳輸的安全頭內容安全頭也都設置正確。

          快速入門

          這份清單綜合性很強,幾乎介紹了所有的可用的優化方式。那么,如果你只有一個小時進行優化,你應該干什么呢?讓我們從中總結10個最有用的來。別忘了在你開始優化前和結束優化后,記錄你的結果,包括開始渲染時間以及在3G,有限連接下的速度。

          但沒關系,本文只是一個普通大綱(希望能做到綜合性強),你應該根據自己的工作環境列一份適合自己的清單。最重要的,在開始優化之前,先對項目中存在的問題有一個明確的了解。


          轉自:csdn論壇 ,

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          Web前端:CSS最強總結 附詳細代碼

          前端達人

          Web前端總結:
          Web前端:HTML最強總結 附詳細代碼
          Web前端:CSS最強總結 附詳細代碼
          Web前端:JavaScript最強總結 附詳細代碼

          基本知識

          基本概念

          層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
          層疊:多個樣式可以作用在同一個html的元素上,同時生效

          • 樣式定義如何顯示HTML 元素
          • 樣式通常存儲在樣式表中
          • 把樣式添加到 HTML 4.0 中,是為了解決內容與表現分離的問題
          • 外部樣式表可以極大提高工作效率
          • 外部樣式表通常存儲在 CSS 文件中

          多個樣式定義可層疊為一個CSS很像化妝,通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。 所以,前端程序員相互表白的時候可以說:you are the CSS to my HTML. 這是不是CSS是對HTML進行美化和布局作用的最好總結?

          優點

          1. 功能強大
          2. 將內容展示和樣式控制分離
            降低耦合度。解耦
            讓分工協作更容易
            提高開發效率

          CSS的使用

          CSS與html結合使用
          根據定義CSS的位置不同,分為行內樣式、內部樣式和外部樣式

          行內樣式

          也稱為內聯樣式
          直接在標簽中編寫樣式,通過使用標簽內部的style屬性;

          代碼樣式:

          弊端:只能對當前的標簽生效,沒有做到內容和樣式相分離,耦合度太高。

          內部樣式

          定義在head標簽內,通過style標簽,該標簽內容就是CSS代碼

          <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>內部樣式</title> <style> div{ color: red; } </style> </head> <body> <div>hello my css</div> </body> </html>

          區別

          • 作用域的范圍:外部樣式表>內部樣式表>行內樣式表
          • 優先級:外部樣式表<內部樣式表<行內樣式表;
          • 同樣的樣式作用在同一個標簽身上:就近原則。
          • 不同樣式作用在同一個標簽身上,疊加生效。

          CSS語法

          基本格式由兩個主要的部分構成:

          • 選擇器
          • 一條或多條聲明

          基本選擇器

          篩選具有相似特征的元素

          id選擇器

          選擇具有相同id屬性值的元素,建議html頁面中的id值唯一

          id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
          HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 “#” 來定義。

          PS: ID屬性不要以數字開頭,數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

          雖然多個元素可以使用同一個id選擇器控制樣式,但是不推薦。如果需要同樣的樣式對多個標簽生效, 使用class選擇器。

          class選擇器

          選擇具有相同的class屬性值的元素。

          • class 選擇器用于描述一組元素的樣式,class 選擇器有別于id選擇器。
          • class可以在多個元素中使用。 class 選擇器在HTML中以class屬性表示, 在 CSS 中,類選擇器以一個點"."號顯示

          PS:類名的第一個字符不能使用數字!它無法在 Mozilla 或 Firefox 中起作用

          元素選擇器/標簽選擇器

          選擇具有相同標簽名稱的元素。

          定義選擇器語法:標簽名稱{};PS:標簽名稱必須是html提供好的標簽。

          使用標簽選擇器:自動使用在所有的同名的標簽上


          優先級

          選擇器的優先級

          ID選擇器 > 類選擇器 > 標簽選擇器
          當多個選擇器作用在同一個標簽上的時候,如果屬性沖突,看優先級;如果不沖突,樣式疊加生效

          樣式表的優先級

          行內樣式 > 內部樣式 >外部樣式

          同樣,三個樣式表中都有內容作用在同一個html標簽的時候,如果屬性沖突,看優先級;如果不沖突, 樣式疊加生效

          CSS常用樣式

          color:字體顏色

          跟顏色相關的取值分3種:

          1. 顏色的單詞 red blue…
          2. rgb(紅,綠,藍)三色的取值范圍是0-255 rgb(255,0,0)
            rgba(紅,綠,藍,透明度),透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
          3. #值1值2值3 :值的范式是00-FF 十六進制數字組成的 例如:#FF0000

          width height:寬高

          PS:只有塊狀元素可以設置寬高,行級元素設置不生效

          取值方式有2種:

          • 數值 絕對數字 單位是像素PX
          • 百分比:占據父元素的比例

          背景樣式

          在這里插入圖片描述
          在這里插入圖片描述

          文本樣式

          在這里插入圖片描述

          列表樣式

          在這里插入圖片描述

          邊框樣式

          在這里插入圖片描述

          HTML&CSS調試利器

          以谷歌瀏覽器為例說明。
          快捷鍵F12或者工具條中的開發者工具調出以下內容。
          在elements中可以看到當前頁面的所有標簽,在styles中可以看到html元素對應的樣式。

          交集選擇器

          條件:交集選擇器由兩個選擇器構成,找到的標簽必須滿足:既有標簽一的特點,也有標簽二的特點。

          語法:h3.class{ color:red; } 其中第一個為標簽選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,例如div.list。

          交集選擇器是并且的意思。 即…又…的意思

          例如: table.bg 選擇的是: 類名為 .bg 的 表格標簽,但用的相對來說比較少。

          后代選擇器

          概念
          后代選擇器又稱為包含選擇器。

          作用
          用來選擇元素或元素組的子孫后代

          其寫法就是把外層標簽寫在前面,內層標簽寫在后面,中間用空格分隔,先寫父親爺爺,再寫兒子孫子。

          格式:父級 子級{屬性:屬性值;屬性:屬性值;}
          語法:.class h3{color:red;font-size:16px;}

          當標簽發生嵌套時,內層標簽就成為外層標簽的后代。 子孫后代都可以這么選擇。 或者說,它能選擇任何包含在內 的標簽。

          子元素選擇器

          作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。 其寫法就是把父級標簽寫在前面,子級標簽寫在后面,中間跟一個 > 進行連接。
          語法:.class>h3{color:red;font-size:14px;}
          比如:
          .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3


          轉自:csdn論壇 ,

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          從零開始畫圖標系列:超全面的基礎知識

          周周


          在 UI 的設計體系中,圖標是最重要的組成部分之一,是任何 UI 界面中都不可或缺的視覺元素。了解圖標相關的概念,以及正確繪制的方法,是入門 UI設計的必備條件。

          網上現存不少關于圖標繪制的文章和教學,但不是太籠統,就是太片面。即使看了很多這種碎片化的知識,也很難在我們的認知中對它有比較全面、系統的認識,所以大多數初級的 UI設計師,始終畫不好圖標。

          針對這個問題,我希望用一篇長文來講清楚圖標設計的所有要點和具體的設計方法,讓所有設計新人更快地上手圖標設計。

          本文共分為5個部分:

          • 圖標簡介:先對圖標有個整體的認識,了解圖標總共有哪些類型和應用場景。
          • 工具圖標:最常見的工具型圖標的相關規范,以及對應的設計案例演示。
          • 裝飾圖標:近年來使用越來越廣泛的視覺型圖標設計認識,以及對應的講解。
          • 啟動圖標:講解啟動圖標的相關規范,如何高效的進行設計。
          • 應用案例:介紹在一個 UI項目中,要應用多少種圖標規格,如何設計出正確的圖標。

          圖標的基本認識

          圖標,是一種圖形化的標識,它有廣義和狹義兩種概念,廣義指的是所有現實中有明確指向含義的圖形符號,狹義主要指在計算機設備界面中的圖形符號,有非常大的覆蓋范圍。

          對于 UI設計師而言,我們主要針對的就是狹義的概念,它是 UI 界面視覺組成的關鍵元素之一。

          在當下最常見的扁平化設計風格中,界面的實際視覺組成只有4種元素,圖片、文字、幾何圖形、圖標。

          從零開始畫圖標系列:超全面的基礎知識

          △ 由圖片、文字、幾何、圖標組成的界面

          可以說,圖片、文字、幾何圖形的運用,都只用到排版的技巧,而圖標,是 UI設計中除了插畫元素以外唯一需要我們「繪制」、「創作」的元素,一涉及到這兩件事,難度就直線上升了。

          本來往界面里丟一些方方圓圓、貼幾張圖、填一些字,就可以把界面做出來了,比如 Clear APP,不僅工作量少,而且還符合極簡原則,為什么還要吃力不討好的設計圖標?

          從零開始畫圖標系列:超全面的基礎知識

          △ Clear APP 的截圖

          這就涉及圖標作用的探討了,為了節約篇幅,更快進入大家最想看的重點干貨,我就不長篇大論從上古時期人類與圖形符號的糾葛開始寫了,就談對于圖形界面本身,為什么圖標有這么重要的地位,沒它不行?

          有兩個原因,第一文字雖然也是一種圖形符號,但相對于圖標而言,文字實在太復雜了,在識別效率上有先天的劣勢。再者,不同的語言,文字的長度也不同,如果換成阿拉伯語或者俄羅斯語,或許一行還裝不下所有文字。圖標可以以一種更高效的方式,將我們想要傳遞的信息進行濃縮,不僅易于識別,也能讓界面更簡潔,利于排版,比如下方案例。

          從零開始畫圖標系列:超全面的基礎知識

          △ 應用文字替換了圖標的對比

          第二點,就是關于視覺的觀賞性。有些頁面中,如果把圖標去掉了,也絲毫不會影響我們的操作效率,以及對內容的理解。但沒有圖標,缺少這些點綴,我們就會覺得這個頁面看起來太枯燥了,不得勁,最好的例子就是應用的設置頁了,見下方案例。

          從零開始畫圖標系列:超全面的基礎知識

          △ 設置頁有圖標和沒有圖標的對比

          既然知道了圖標的作用和重要性,那么接下來,就要進一步了解在工作中我們要設計哪些圖標。

          可以先劃分成三種大類:

          • 工具圖標
          • 裝飾圖標
          • 啟動圖標

          下面,我們將對它們分別進行介紹,以及展示相關的設計類型,方便讀者在開始學習具體設計前,對 UI設計會創作的圖標有更全面的認識。

          工具圖標

          首先,我們要說的是工具圖標。這是我們在日常討論中提及最頻繁的圖標類型,即應用內有明確功能、提示含義的標識。作為最常見的圖標類型,我們就不需要做太多的說明了。

          從零開始畫圖標系列:超全面的基礎知識

          △ 常見的工具圖標

          雖然理解起來容易,但是它所包含的設計樣式卻并不少,可以把它們歸納成線性、面性兩個大類,再分別進行細分。

          1. 風格1:線性風格

          線性圖標,即圖形是通過線條的描邊輪廓勾勒出來的。多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓,比如上圖案例,線性圖標的創作空間看似不多,但實際上有非常多的調整空間。

          下面我們把它們羅列出來。

          從零開始畫圖標系列:超全面的基礎知識

          △ 線性風格的工具圖標

          2. 風格2:面性風格

          面性圖標,即使用對內容區域進行色彩填充的圖標樣式。同樣,在這類圖標中,也不是只能應用純色的方式進行填充,還有非常多的視覺表現類型。

          從零開始畫圖標系列:超全面的基礎知識

          △ 面性風格的工具圖標

          3. 風格3:混合風格

          當然,在設計圖標類型的時候,也不一定非線性和面性不可,有一些熱衷創造和嘗試的設計師,還創作出了混合型的圖標,既有線性描邊的輪廓,又有色彩填充的區域。常見的樣式類型如下:

          從零開始畫圖標系列:超全面的基礎知識

          △ 混合風格的工具圖標

          裝飾圖標

          和工具圖標比起來,裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說,過分的簡約并不能彌補信息過多的信噪問題,我們要通過豐富視覺體驗的方法來增加內容的觀賞性,減少一屏內顯示內容的數量。

          比如在分類列表里,是可以只使用線框和文字把大量內容濃縮到一屏以內,但實際瀏覽效率并不會增加,而且并不美觀。

          從零開始畫圖標系列:超全面的基礎知識

          △ 裝飾圖標在識別性上的作用

          還有就是國內的界面設計環境,會根據運營需求設計進行特殊化處理,尤其在電商領域,首屏的圖標都會改成首頁風格的樣式,增加活動氛圍。

          從零開始畫圖標系列:超全面的基礎知識

          △ 節日活動中的裝飾圖標

          裝飾性的圖標設計,雖然沒有明確的規范該怎么做,效果怎么好怎么來,但最常見的類型有四種,下面分別進行介紹。

          1. 扁平風格

          扁平風格的裝飾圖標,通??梢岳斫獬墒怯帽馄讲瀹嫷姆绞疆嫵鰜淼膱D標,除了繼承扁平的純色填充特性以外,也比普通圖標有更豐富的細節與趣味性。

          從零開始畫圖標系列:超全面的基礎知識

          △ 扁平風格的裝飾圖標

          2. 擬物風格

          擬物風格的圖標現在出現的頻率越來越高,集中在大型的運營活動中,通常這些活動會通過擬物的方式將頭部設計成有故事性的場景,所以自然頂部的相關圖標使用擬物的設計形式會更貼合。

          從零開始畫圖標系列:超全面的基礎知識

          △ 擬物風格的裝飾圖標

          3. 2.5D風格

          2.5D是一種偏卡通、像素畫風格的扁平設計類型,在一些非必要的設計環境中,使用2.5D會比較容易搭配主流的界面設計風格,有更強的趣味性和層次感。

          從零開始畫圖標系列:超全面的基礎知識

          △ 2.5D風格的裝飾圖標

          4. 炫彩漸變

          這是一個拗口的原創名詞,找不到更合適的形容,還是覺得浮夸點符合它的氣質。這種圖標,就是通過一系列非常激進的漸變和撞色實現,通常還會使用彩色的陰影。

          使用這樣圖標的區域,通常都會呈現出一副五彩斑斕的景象,只有在內容非常豐富且用戶偏向年輕化的產品中可以使用,是一種非常難駕馭的設計風格。

          從零開始畫圖標系列:超全面的基礎知識

          △ 炫彩漸變風格的裝飾圖標

          5. 實物貼圖

          最后一種,就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創作和繪制出來的,但想想還是放進來合適。因為這種圖標的出現頻率非常高,有必要在后面掌握它的做法。

          從零開始畫圖標系列:超全面的基礎知識

          △ 應用攝影實物的裝飾圖標

          啟動圖標

          最后,就要說說啟動圖標了。啟動圖標的設計比前面兩種類型的圖標說起來更難,因為它實際上就是把「LOGO嵌套進系統圖標模版」的圖標。

          除了掌握必要的規范以外,啟動圖標的主體物設計就是 LOGO 的設計,已經超出了圖標繪制本身的知識點。所以,在后面我會針對這個問題講解一些比較套路易懂的設計方案供新手學習,這里我們先來了解一下它有哪幾種設計形式。

          1. 文字形式

          使用了文字作為圖標主體物的類型,通常是這類應用本身的品牌 LOGO 就使用了文字,所以這里就把字體照搬過來。

          從零開始畫圖標系列:超全面的基礎知識

          △ 文字類的啟動圖標

          2. 圖標形式

          對于一些偏工具,適合用簡單圖形傳達應用功能的啟動圖標,就會采取使用工具圖標的方式設計。

          從零開始畫圖標系列:超全面的基礎知識

          △ 圖標類的啟動圖標

          3. 圖形圖標

          圖形形式看起來和圖標形式很接近,但實際上完全不屬于同一類型,之所以它不是圖標,是因為這類圖標的主體圖形是一種經過高度抽象化的標識,傳達的是品牌性,而不是圖形的含義。

          從零開始畫圖標系列:超全面的基礎知識

          △ 圖形類的啟動圖標

          4. 插畫形式

          對于一些比較純粹的應用,如讀本、漫畫、幼兒類應用,就熱衷于采用卡通形象作為圖標的主體進行設計。

          從零開始畫圖標系列:超全面的基礎知識

          △ 插畫類的啟動圖標

          5. 擬物形式

          雖然現在扁平化的設計占據主導地位,但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說,擬物設計所傳遞的信息往往更直觀和準確。

          從零開始畫圖標系列:超全面的基礎知識

          △ 擬物類的啟動圖標

          當然,還有其它的數之不盡的啟動圖標設計方式,比如明星大頭照、攝影圖、游戲原畫等,但理解上面這些類型就夠了。

          前面介紹的三種圖標,就是今后在進入 UI 行業設計的內容。雖然圖標看起來簡單,但可以玩出的花樣不少。除了正確設計出圖標以外,高低階的 UI設計師之間的區別也包含圖標設計類型掌握的多寡。

          所以,在開始學習前,不要將設計圖標的目標局限在最簡單的圖形繪制上,還有很多有趣的設計形式等待你們去嘗試。

          學習圖標所需的軟件

          了解了圖標的類型,就要開始了解做出這些圖標應該使用哪些軟件了。通常,UI 主要使用的設計軟件包含 PS、AI、Sketch、XD四款,理論上,它們都包含了圖標繪制的功能,如果我直接告訴大家去精通這4款軟件那么畫圖標就一點難度都沒有了,這是非常不負責任的,所以為了對新人更友好一點(如果已經全部精通了,就直接略過),我會分析一遍這四款軟件對于圖標設計的優劣,以及需要掌握的部分。

          從零開始畫圖標系列:超全面的基礎知識

          1. Sketch / XD

          這兩款軟件是我們設計 UI 界面的主力。但大家一定要記得,它們主要的功能是用來完成 UI 界面元素的排版,而不是創作和繪圖。

          雖然它們都包含路徑、鋼筆、布爾運算等功能(Sketch 相對 XD 更完善一點),想要繪制一些非?;A的線性或面性圖標時沒有問題,但只要涉及到比較復雜的圖形,往往就束手無策。

          所以,我建議所有學習 UI 的新人,都不要從這兩個軟件中入手,而是先掌握 PS 和 AI,后面想要快速實現一些簡單的圖標時,自然懂得如何使用 Sketch 和 XD。

          可以說,PS 和 AI 的應用決定了我們圖標設計的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。

          2. Photoshop

          從零開始畫圖標系列:超全面的基礎知識

          PS 是一款無論什么東西都設計得出來的設計軟件,但是,它本質上是一款「位圖軟件」。后續的文章中會提及,在界面中采用矢量格式的圖標是最理想的,而 PS 針對矢量的操作并不便捷,比如將矢量圖層復制到其它軟件中。

          實際項目中,我們會用 PS 設計一些視覺表現相對復雜的圖標,例如啟動圖標、擬物圖標、實物圖標等等。

          繪制圖標需要用到的 PS 功能并不太多,需要在前期學習這個軟件的過程中加以篩選,重點是以下知識點:

          • 路徑創建和調整
          • 鋼筆工具和錨點
          • 路徑圖層
          • 布爾運算
          • 圖層屬性

          雖然 PS 在實際項目中是用來畫復雜的圖標,但并不妨礙我們使用 PS 從最基礎的圖標開始畫起,因為想要熟練掌握上方的知識點,簡易的工具圖標是最好的磨刀石,之后再學習 AI 的操作,就可以更快的上手。

          3. Illastrator

          從零開始畫圖標系列:超全面的基礎知識

          AI 也是 UI 設計必學的一款軟件,它的功能異常豐富,主要用來設計矢量圖形。對比 PS,它有更好的矢量操作支持,對于路徑細節的調整上,是最全面最細膩的軟件,并且 AI 中的圖形還可以直接復制粘貼到其它應用的畫布中。

          如果掌握了上方提及的 PS 基礎,那么學習 AI 也就輕松了不少,其中,AI 設計圖標中有三個特殊的功能是需要重點掌握和學習的:

          • 形狀生成器
          • 輪廓化描邊
          • 路徑查找器

          花幾個晚上,掌握了 PS 和 AI 的相關知識點以后,就為我們后續的學習提供了技術支持,可以進入下一階段了。

          結尾

          這是圖標系列文章的第一篇,信息量不算少。所以我們在結尾再總結一次,方便大家記憶。

          • 知識點一:在 UI 的界面中,圖標的主要作用是用來高效地傳遞信息,以及起到美化界面的作用。
          • 知識點二:UI 會涉及的圖標類型主要有三種,工具圖標、裝飾圖標、應用圖標。
          • 知識點三:工具圖標,是界面中用來傳遞信息的圖形符號,主要包含線性、面性、混合三種設計風格。
          • 知識點四:裝飾圖標,是界面中用來提升視覺體驗的圖形,主要包含扁平、擬物、2.5D、漸變炫彩等設計風格。
          • 知識點五:應用圖標,是用來啟動應用的圖標,主要包含文字、圖標、圖形、插畫、擬物等設計形式。
          • 知識點六:學習繪制圖標,優先學習 PS、AI 的路徑相關功能,而不是 Sketch 和 XD。




          文章來源:優設網     作者:超人的電話亭



          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          什么是SEO?SEO為什么對企業營銷如此重要?

          seo達人

           

              搜索引擎優化(通常稱為SEO)是提高網站流量的數量和質量的一種做法。網站SEO使用自然搜索結果來增加品牌知名度和網站流量。這是關于了解人們及其在網上尋找的內容。了解了受眾之后,就可以提供他們想要的內容,從而提高參與度。讓我們討論為什么SEO如此重要,并學習一些最重要的技巧,您可以將其應用到您的企業中,以在所有重要的搜索引擎排名中列出更高的排名。

              SEO為什么重要?

              SEO非常重要,因為搜索引擎是在線流量的核心。盡管付費廣告和社交媒體仍然有效,但大多數在線流量來自搜索引擎。

              搜索引擎涵蓋了更多的數字房地產,并在更多的人面前發現了自己。SEO結果也比付費廣告獲得更多的點擊。大約3%(2.8%)的人點擊了付費廣告。SEO提供的流量是付費廣告的20倍。使用此類統計數據,您根本無法忽略其重要性。如果SEO似乎太復雜而難以掌握,請考慮雇用一家專門從事SEO的公司。

              如果不認識SEO的潛力,就不可能談論SEO。公司提供的優質SEO是常綠的。內容將始終存在于您的網站上,并持續數周,數月和數年產生流量。付費廣告只能持續到賺錢為止。SEO永遠不會消失。

              SEO公司將使用幾種不同類型的網站SEO。最常見的是內容SEO,圖像SEO和異地SEO。內容SEO是經過優化的網站內容,例如文章和博客文章。圖片SEO涵蓋了網站上圖片的元描述和名稱。站外SEO是指網站之外可能影響搜索引擎排名的內容,例如高質量的反向鏈接。所有這些共同創造了更高的排名。

              網站SEO分析

              SEO分析是SEO公司為網站提供SEO提示的多種方式之一。該分析將檢查您的站點當前的運行狀況,以便公司可以了解從那里到哪里去。搜索引擎使用許多不同的因素來對網站進行分析和排名。SEO公司將使用審核來檢查您的網站在這些因素上的表現。它有助于確定需要修復的問題區域,以使您的網站更上一層樓。他們將為您提供在審核后您可以做的所有改進網站SEO的工作清單。

              該分析涵蓋諸如現場SEO和超鏈接,SEO內容的當前狀態以及從其他網站獲得的反向鏈接之類的內容。反向鏈接是SEO策略的重要組成部分,但并非所有鏈接都是一樣的。如果您通過可疑來源鏈接到網站,則該網站的效果不佳。審核非常有用,因為網站SEO的第一步是了解您的當前狀況。

              創建高質量的有益內容

              人們在為網站SEO編寫內容時犯的最常見的錯誤是對人類的關注不足。高質量的內容首先是寫給人類的,其次是搜索引擎爬蟲。如果您過多地關注關鍵字,則會導致亂碼。而是圍繞用戶喜歡閱讀的有用和高質量內容來制定內容策略。

              確保您將博客文章和文章分為標題和小標題。這些標題會在內容中產生停頓,使人類和機器人都更容易處理。該標題應提供有關以下段落將討論的內容的一些信息。這些天人們很少閱讀整個博客文章。他們傾向于專注于他們認為與他們最相關的事物。標題從其余內容中脫穎而出,引人注目。人們可以瀏覽該職位的特定標題并閱讀該部分。

              有效地使用反向鏈接

              反向鏈接是最重要的網站SEO工具之一。反向鏈接已用于市場營銷和SEO多年。您與網站的鏈接越多,訪問量和聲譽就越高,更不用說您在搜索引擎結果頁上的排名了。

              雖然高質量的反向鏈接與以往一樣有效,但是隨著時間的推移,開發這些反向鏈接的方式已經發生了變化。曾經有一段時間,您只能在任何網站上獲得反向鏈接,并且已經足夠。但是,這些天有些麻煩。

              鏈接不僅應在具有較高權限的網站上生成,而且應與原始網站相關。例如,一家餐館應該致力于從目錄和評論站點中獲取鏈接。即使滑板銷售網站是其利基市場中最具權威性的公司,也不適用于將滑板連接到嬰兒產品網站的公司。成功的SEO公司會將反向鏈接策略納入整體內容營銷策略。

              不再有效的另一種常見策略是在博客文章和論壇中發布指向您網站的鏈接。從技術上來講,這將創建至您網站的鏈接,但這是一個質量較弱的鏈接,搜索引擎會因此而受到懲罰。從高質量來源獲取高質量鏈接。

              使用關鍵詞

              關鍵字是SEO的命脈。這是每個人都知道的。問題在于并非每個人都知道如何正確使用它們。對于網站所有者而言,最重要的SEO技巧之一就是充分利用正確的關鍵字。

              讀者和搜索引擎都看不起關鍵字垃圾郵件-盡可能多地使用關鍵字的行為。人們會告訴您何時嘗試發送盡可能多的垃圾郵件,而他們卻不喜歡。這對于搜索引擎也不利,因為他們希望看到關鍵字的正確使用。關鍵字在文本中應使用幾次,關鍵字密度最多為2-4%。

              嘗試著眼于唯一且長尾的關鍵字,以減少競爭。不要使用與其他人相同的關鍵字。嘗試找到人們正在尋找的東西以找到您。有很多方法可以找到并創建好的長尾關鍵字。

              優化頁面內容

              他們稱其為“搜索引擎優化”是有原因的-您需要對所有內容進行優化。優化您的頁面意味著找到快速有效地加載網站的方法。分散內容以使其更具可讀性,因此人們不容易感到不知所措并單擊該站點。

              用戶參與度是網站SEO的關鍵方面,如果未優化體驗,他們將迅速離開您的網站。較高的跳出率可能會降低網站在搜索引擎中的排名。

              您可以做很多事情來優化內容。壓縮圖像,以便更快地加載它們,考慮項目在頁面上的放置方式,并在可能的情況下包括現場鏈接和導航。網頁的優化效果越好,它們在捕獲潛在客戶并將其轉化為客戶方面越有效。查看圖形以查看有關如何有效優化頁面的更多信息。完美優化的頁面是所有這些元素都一起實現的頁面。即使是一個優化不佳的方面也會破壞其他方面的有效性。

              什么是SEO?事實證明,答案比您預期的要復雜。SEO使您的網站快速有效地加載。它正在獲得指向您網站的鏈接,以便人們訪問。它正確使用了關鍵字。歸根結底,SEO就是要以一種有效的方式為您的網站生成自然流量.

           

          文章來源:云優網

           

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

           

          網站做好品牌SEO優化——打造高質量內容引流量

          seo達人

           

           

          網站做好品牌SEO優化——打造高質量內容引流量

          網站建設,需經歷頁面布局規劃-頁面設計-程序-內容填充-測試等多個過程,而在這其中,網站內容的好壞,將直接影響用戶對企業、品牌或整個網站的整體評價,同時,也對嚴重影響著網站品牌SEO優化排名。那么,一個新搭建的網站,要如何打造高質量的內容呢?

          1、審視自己網站的文章是否有趣、有用?

          包含足量有用信息是贏得訪客關注的基礎;若能施以輕松、明快、流暢的筆調,則會錦上添花。

          2、撰寫網站文章,需要抓住用戶某個痛點

          如果文章能夠為客戶的搜素目的提供一種解答,則這篇文章成功的機會更高。

          3、強有吸引力的標題,讓你的文章錦上添花

          這并不是鼓勵以標題騙取點擊,而是在概述相關內容的基礎上,標題最好能夠具備亮點。

          4、網站文章是否具有可讀性

          內容上:撰寫內容時,需要考慮目標讀者的閱讀感受,把握行文風格、用詞、節奏等等;形式上:文章的結構要清晰簡明,重點突出,層次分明,合理使用小標題、插圖等方法遠比“一逗到底”的大段純文字好得多。

          5、網站文章是否克服了高“跳出率”?

          跳離率通俗來說,就是用戶進入網站瀏覽該頁內容,在很短時間內立即離開的比率。如果用戶點擊進入瀏覽一篇文章,在該頁面停留一段時間獲取所需信息,那么這會給搜索引擎發送一種積極信號,表示該頁面的內容滿足了客戶的需求,從而有利于頁面顯示在相關搜索結果頁面的有利位置。

          網絡推廣

          6、網站文章是否考慮了SEO優化排名?

          撰寫文章考慮用戶的同時,也需要考慮SEO優化排名,具體來說應該做到兩點:在文中使用關鍵詞;并且通過內鏈等方式通過網站的其他頁面對該頁面提供支持。

          做網站建設的人都知道,網站獲取流量的最大入口就是搜索引擎SEO優化排名,也就是百度搜索、谷歌搜索、360搜索、雅虎以及搜狗搜索等,然而在這些平臺中獲取流量時要么就是競爭性過大難以獲取排名,要么就是需要花費大量的金錢和人力進行維護,甚至某些時候入不敷出。網站建設的難度也就是在于此,建設網站十分容易,獲取流量就是一件涉及到品牌SEO優化的任務。

          現代化互聯網營銷除了seo優化排名,還有微博營銷、QQ營銷、微信營銷、論壇營銷、短視頻營銷等方式,這都是借助平臺的用戶來引流到網站,這種方式不但有效而且效果明顯。

          1、百度平臺。

          在中國的互聯網,百度我相信中國的網民應該沒有不知道,沒有沒登陸過百度的吧。既然百度有這么多的用戶,這么多的流量,那你就要重視起來。百度渠道必須要做的幾個平臺:百度百科、百度知道、百度帖吧、百度知道、百度百家號。這幾個網站在我們上網搜索的時候,權重都是前幾位的。高質量的軟文加上合適的外鏈。你的流量肯定會大爆炸的。

          2、騰訊平臺。

          騰訊最珍貴的是什么?不就是他巨大的客戶群體嗎?,F在應該有十億了吧,中國的網民應該都會有自己的QQ號,我小學2年紀的農村小孩都有了。這么大的用戶群體,該如何告訴他們你的存在呢?答案很簡單,你的空間和你的QQ群、微信群是主要的陣地,多申請一些賬號,每個賬號加很多很多的QQ群,那么多的人,你還愁沒有人看到你嗎?把你的空間布滿你的廣告信息,只要是進入你空間的人,認識不認識的都會點開看一下的,這個是有統計的。

          3、微博、微信平臺。

          雖說微博影響力已大不如前,但相信,搭建一個認證標志的微博,可以給新用戶帶來更多信賴感。而微信公眾號,相信更不用多說?,F如今但凡推廣,絕對離不開微信,如何運用好公眾號廣告、朋友圈廣告等渠道,也是十分必要。

          4、短視頻與直播。

          現如今的網絡,短視頻的影響力不斷擴大。此時,運用好秒拍、抖音、快手等短視頻、直播平臺營銷自己則更為重要。但隨之而來的難題是,你必須如何將產品、網站等轉化為富有噱頭的短視頻,這就考驗了運營人員的點子是否多,是否能瞬間抓住各年齡段用戶群體。

          網站做好品牌SEO優化——打造高質量內容引流量

          網站建設,需經歷頁面布局規劃-頁面設計-程序-內容填充-測試等多個過程,而在這其中,網站內容的好壞,將直接影響用戶對企業、品牌或整個網站的整體評價,同時,也對嚴重影響著網站品牌SEO優化排名。那么,一個新搭建的網站,要如何打造高質量的內容呢?

          1、審視自己網站的文章是否有趣、有用?

          包含足量有用信息是贏得訪客關注的基礎;若能施以輕松、明快、流暢的筆調,則會錦上添花。

          2、撰寫網站文章,需要抓住用戶某個痛點

          如果文章能夠為客戶的搜素目的提供一種解答,則這篇文章成功的機會更高。

          3、強有吸引力的標題,讓你的文章錦上添花

          這并不是鼓勵以標題騙取點擊,而是在概述相關內容的基礎上,標題最好能夠具備亮點。

          4、網站文章是否具有可讀性

          內容上:撰寫內容時,需要考慮目標讀者的閱讀感受,把握行文風格、用詞、節奏等等;形式上:文章的結構要清晰簡明,重點突出,層次分明,合理使用小標題、插圖等方法遠比“一逗到底”的大段純文字好得多。

          5、網站文章是否克服了高“跳出率”?

          跳離率通俗來說,就是用戶進入網站瀏覽該頁內容,在很短時間內立即離開的比率。如果用戶點擊進入瀏覽一篇文章,在該頁面停留一段時間獲取所需信息,那么這會給搜索引擎發送一種積極信號,表示該頁面的內容滿足了客戶的需求,從而有利于頁面顯示在相關搜索結果頁面的有利位置。

          網絡推廣

          6、網站文章是否考慮了SEO優化排名?

          撰寫文章考慮用戶的同時,也需要考慮SEO優化排名,具體來說應該做到兩點:在文中使用關鍵詞;并且通過內鏈等方式通過網站的其他頁面對該頁面提供支持。

          做網站建設的人都知道,網站獲取流量的最大入口就是搜索引擎SEO優化排名,也就是百度搜索、谷歌搜索、360搜索、雅虎以及搜狗搜索等,然而在這些平臺中獲取流量時要么就是競爭性過大難以獲取排名,要么就是需要花費大量的金錢和人力進行維護,甚至某些時候入不敷出。網站建設的難度也就是在于此,建設網站十分容易,獲取流量就是一件涉及到品牌SEO優化的任務。

          現代化互聯網營銷除了seo優化排名,還有微博營銷、QQ營銷、微信營銷、論壇營銷、短視頻營銷等方式,這都是借助平臺的用戶來引流到網站,這種方式不但有效而且效果明顯。

          1、百度平臺。

          在中國的互聯網,百度我相信中國的網民應該沒有不知道,沒有沒登陸過百度的吧。既然百度有這么多的用戶,這么多的流量,那你就要重視起來。百度渠道必須要做的幾個平臺:百度百科、百度知道、百度帖吧、百度知道、百度百家號。這幾個網站在我們上網搜索的時候,權重都是前幾位的。高質量的軟文加上合適的外鏈。你的流量肯定會大爆炸的。

          2、騰訊平臺。

          騰訊最珍貴的是什么?不就是他巨大的客戶群體嗎?,F在應該有十億了吧,中國的網民應該都會有自己的QQ號,我小學2年紀的農村小孩都有了。這么大的用戶群體,該如何告訴他們你的存在呢?答案很簡單,你的空間和你的QQ群、微信群是主要的陣地,多申請一些賬號,每個賬號加很多很多的QQ群,那么多的人,你還愁沒有人看到你嗎?把你的空間布滿你的廣告信息,只要是進入你空間的人,認識不認識的都會點開看一下的,這個是有統計的。

          3、微博、微信平臺。

          雖說微博影響力已大不如前,但相信,搭建一個認證標志的微博,可以給新用戶帶來更多信賴感。而微信公眾號,相信更不用多說?,F如今但凡推廣,絕對離不開微信,如何運用好公眾號廣告、朋友圈廣告等渠道,也是十分必要。

          4、短視頻與直播。

          現如今的網絡,短視頻的影響力不斷擴大。此時,運用好秒拍、抖音、快手等短視頻、直播平臺營銷自己則更為重要。但隨之而來的難題是,你必須如何將產品、網站等轉化為富有噱頭的短視頻,這就考驗了運營人員的點子是否多,是否能瞬間抓住各年齡段用戶群體。

          轉載請注明:seo-網站優化-網站建設-外鏈代發

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

           

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合