若想戰勝競爭對手，產品無疑需要在設計上做好提前規劃，并時刻樹立優化意識，盡量滿足用戶的體驗期望。然而研發團隊有時總容易陷入誤區，本篇文章里，作者就產品研發過程中可能忽略的、對用戶體驗具有破壞性的因素做了總結，一起來看一下。

毫無疑問，要想獲得出色的用戶體驗 (UX) 需要在數字世界中保持競爭優勢。盡管如此，由于某些關鍵盲點，改善用戶體驗的努力并不總能取得成功。如果忽略這些盲點，那么無論預算大小和團隊的努力如何，失敗都會預先留存在項目中。事實上，如果實施不準確，可能會導致所謂的“經驗差距”造成的設計上的損失。

上圖所示的具體案例：某銀行投資了近 50 萬美元改進其手機銀行應用程序，卻導致整體客戶滿意度下降。其根本原因是金融公司未能發現和預防不同級別的內部經驗差距。那么，該如何及時識別和避開這些盲點，以保障耗資巨大的大規模數字化項目的成功呢？

一、即使預算龐大，用戶體驗工作也可能失敗 UX efforts can fail even with huge budgets

在過去十年中，大量研究證實，用戶體驗對公司市場效率存在優先影響。根據甲骨文的一份報告，如果糟糕的用戶體驗導致多個業務問題，那么積極的用戶體驗會增加推薦、保留率和收入，因為 86% 的客戶愿意為更好的用戶體驗支付更多費用。

看起來一切都很簡單——只要增加預算和成本，就足以提供最好的體驗？但在實際操作中，這并不容易。根據貝恩公司的研究，80% 的 CEO 認為他們提供了卓越的體驗，而只有 8% 的客戶同意這一點。

其主要原因可以用“經驗鴻溝”來解釋——這是客戶期望的體驗與他們從數字服務中獲得的體驗之間的負面差異。如果體驗比預期的差很多，就會產生許多令人不快的后果，比如客戶忠誠度下降、大量負面評論，甚至客戶決定離開品牌。

在大多數情況下，人們往往無法認識到真正的經驗鴻溝。

即使公司的領導和員工覺得有些地方不對勁，他們也往往不明白“要改進什么”以及“為什么要改進”。如果沒有意識到某件事，就不可能管理它。

二、現實生活中的例子：行動中的經驗鴻溝 Real-life example: Experience gap in action

為了解釋“經驗鴻溝”可能導致麻煩的基本原理，我想分享一個現實生活中的例子。

幾年前，一家知名且受人尊敬的中歐銀行開始了大規模的數字化轉型之旅。當時，該銀行的應用程序的評級為 3.5，并且已經過時。所以，為了實現數字化、提升銀行形象，并在不斷增長的數字市場中獲得競爭機會，管理層打算緊急創建并推出一款現代化的銀行應用程序。因此，最初的設計和開發周期為 6 個月。

盡管如此，銀行還是花了三倍時間（1 年零八個月）自主構建新應用程序。無論從時間來說，還是從投資預算來說，這都可以稱得上是一個重要項目。從項目的范圍、所做改進和時間表來看，總成本估計在 50 萬左右。

然而，結果完全沒有達到預期。新應用發布后，它從之前的 3.5 下降到 2.4，并且因為它沒有改進，以至一年后，其評分仍在下降，其用戶體驗也日漸惡化。

銀行盡一切努力改善用戶體驗，整個團隊努力工作近兩年，怎么會發生這種情況？

這種情況的產生，正是由于“經驗鴻溝”的存在。盡管該銀行啟動數十名頂級專業人士花費了 20 個月和 50 萬來改良產品，但它仍未滿足用戶的期望。

雖然客戶不滿意的真正原因是無意識的“體驗鴻溝”，但公司往往傾向于通過指責外部環境來解釋它。例如市場的變化、競爭對手的活動、創新的出現、消費模式的變化。當然，這也是客觀事實，但一家適應性強的公司應該考慮將這些因素用于其增長，而不是作為“替罪羊”。

但衡量適應效果的最重要方式是公司服務在多大程度上滿足甚至超過了消費者的期望。沒有意識到他們服務和客戶期望之間存在差距的公司注定無法適應外部環境的變化。

在某些情況下，公司的行為甚至會導致經驗鴻溝擴大到臨界水平。這通常會導致目標客戶對公司產品和服務的需求急劇下降。

如果我們回到這個例子，似乎管理層對重大改進是否可以成功充滿信心，并投入了大量資金和精力進行廣告宣傳。同時，那些宣傳此應用程序現代、創新和友好的廣告，激發了消費者的高期望，以至于大大超出了其服務的實際質量。

結果，當產品最終發布時，客戶驚訝地發現他們的期望落空了，新應用程序比改良前更糟糕。并且相關的負面評論不僅出現在 App Store 和 Google Play 上，也在社交媒體上大量涌現，人們在推特上不斷諷刺該銀行失敗的數字化項目。

三、對鴻溝的不了解是主要威脅 Unawareness of the Gap is the main threat

接下來，讓我們探討一下數字服務和用戶期望之間的鴻溝是如何形成的，以及為什么沒有人能夠阻止它。

事實上，最大的挑戰是大家往往很難注意到這些差距。他們的原因并不明顯，并且可以同時存在于各個組織架構之上。此外，它們的影響令人難以察覺，以至于最終會導致意想不到的破壞性后果。最終，直到團隊面對產品在市場上的失敗，才有人明白原因是什么。

彌合鴻溝的主要困難在于，級別越高，對經驗鴻溝的不了解程度越高。實際上，在組織架構的頂部，通常會找到造成鴻溝的根源。級別越低，離用戶越近，員工越能覺察到問題和差距，但他們往往沒有權力和能力去消除它們，他們受制于文化。

在這種特殊情況下，售后部門每天都會接到數千個關于產品問題的電話，但由于業務流程分散，他們對此也無能為力。

客戶的挫敗感變得更加強烈。即使是最簡單的日常場景，他們面臨的問題也難以執行，但他們從銀行員工那里得到的反饋是，他們并不是唯一產生困惑的人，而且目前銀行正忙于交付新功能，而不是修復當前問題。

使事情變得復雜的是，經驗鴻溝背后的內部流程，是由過去促進公司生存和增長的相同機制引起的。該公司受制于過去的成功。就像諾基亞一樣，這家全球最大的以硬件為中心的手機工廠，在蘋果智能手機引領的軟件革命中被徹底擊敗。

由于任何組織都有惰性，這些機制受到內在信念和價值觀的影響，對適應市場和彌合經驗鴻溝造成了阻礙。

首先，應該在管理層面解決鴻溝。因此，級別越低，離領導層越遠，離客戶越近，就越能感受和認識到鴻溝的存在。自然，一線員工將擁有從那些期望沒有得到滿足的客戶那里得到最多的數據。

四、7 種體驗鴻溝盲點 The 7 types of experience gap blind spots

主要的體驗鴻溝可能是由組織中七個層次（文化、反饋、執行、設計、價值、品牌承諾、情感聯系）中的一個或幾個盲點造成的。

1. 文化鴻溝

在文化層面缺乏以顧客為中心的理念，員工無法使服務更接近客戶期望，導致了“文化鴻溝”。在具有“文化鴻溝”的公司中，有助于以客戶為中心的流程和活動都是處于低優先級的，相應的，它們也不會得到相關的資源。

2. 反饋鴻溝

缺乏關于客戶期望和他們對產品或服務的體驗數據會造成“反饋鴻溝”。在這種情況下，公司可能經常收集數據，但沒有對其進行分析，也沒有采取任何措施來改善這種情況。

3. 設計鴻溝

即使優先考慮以客戶為中心的方法，并且收集了大量有關客戶期望的數據，但在設計能力和方法上仍可能存在鴻溝。擁有合適的專業知識，就可以構建高質量的數字產品生態系統，從而根據客戶需求提供最佳服務。

4. 執行鴻溝

這種鴻溝與糟糕的設計執行有關。如果不優先以用戶為中心的來設計產品，那么創建最終產品和服務的決策和努力將注定是低質量和低效率的。這決定了公司在數字時代創造有競爭力的服務和產品的能力。

5. 價值鴻溝

如果設計生態系統在 價值金字塔的五個層次（功能、可用性、美學、地位、使命）上不符合用戶的期望，就會形成價值鴻溝。

6. 過度承諾的鴻溝

正如我在上述銀行案例中所表明的那樣，如果一家公司只顧著積極推廣其服務，承諾一些產品無法提供的東西，它會導致用戶對期望的更大失望。因此，由于廣告承諾與現實不符，對該服務的負面評價可能會翻倍。

7. 情感鴻溝

如果品牌傳播是純粹的信息傳播，專注于功能特征，那么就無法與用戶形成情感聯系。由于人類基于情感做出決策，因此基于情感構建服務價值會對客戶期望和最終用戶體驗產生積極影響。

五、彌合經驗鴻溝 Bridging the experience gap

每個客戶都會不知不覺地根據自己的期望來評估他們所接受的服務。用戶體驗質量所引發的情感將形成品牌的聲譽。

在現代世界，數字渠道已成為品牌的主要“營銷”和公關渠道。

一個應用程序，即使有一百年的服務客戶歷史和其他渠道的優質服務，負面體驗也會破壞品牌推廣的所有努力。

這僅僅是因為在數字時代，移動渠道占主導地位，對于某些人來說，它正在成為與品牌互動的唯一途徑。這就是為什么了解如何彌合數字產品出現的七個體驗鴻溝的方法如此重要。

1. 彌合文化鴻溝

在文化方面，轉型基于高層心態的改變，并將這種影響滲透到整個的公司文化和內部價值觀。特別是，可形成“以客戶為中心”的體驗思維模式。

2. 彌合反饋鴻溝

在銀行案例中，開始彌合反饋鴻溝的第一步，是深入了解社交媒體上的負面評論以及致電售后部門的電話。接近這些客戶才容易消除反饋鴻溝。事實上，他們比管理層更了解應解決哪些問題，并且往往渴望積極分享自己的情緒并希望得到傾聽。如果一家公司足夠開放并準備好接受批評，它可以使用這些數據來彌合鴻溝并提高產品迭代的敏捷性。

3. 彌合設計鴻溝

通過整合設計方法和設計思維來制定彌合鴻溝的策略，可以使用設計金字塔。該框架從五個層次（流程、團隊、行動、結果和價值）確定了能夠提高公司整體效率的設計集成。

4. 彌合執行鴻溝

組織必須將經過驗證的設計執行方法（例如設計思維、HCD 或 UX 設計方法）與分步系統相結合，以設計符合客戶期望并能夠彌合執行鴻溝的數字產品。

5. 彌合價值鴻溝

產品的功能級別為客戶創造真正的價值和利益，并通過提供卓越的可用性進行功能擴展；美學 ——令人驚嘆的視覺識別；狀態 —— 針對產品特定受眾的個性化，最后是建立產品的價值觀與使命。

6. 彌補過度承諾的鴻溝

數字時代的客戶要求透明、關懷、誠實和開放的溝通。由于網絡效應，幾乎不可能銷售劣質產品，因為每個人都可以在社交媒體上發布負面反饋，而這些負面反饋將深深地損害客戶的信任。因此，做出不僅可以兌現，甚至可以超額兌現的承諾至關重要。

7. 彌合情感鴻溝

對客戶的同情和關懷比以往任何時候都更加重要。在品牌與客戶之間建立情感聯系對于確保長期忠誠度和需求至關重要。這種聯系是通過之前涵蓋的所有階段建立的——將客戶放在第一位的正確心態；收集反饋并在此基礎上進行改進；使用正確的工具和方法來創建產品設計和生態系統；創造真正的價值和利益，最后，通過誠實和超額兌現承諾。

六、成為深受喜愛品牌的途徑 The pathway toward becoming a beloved brand

該途徑涵蓋了可能破壞數字產品創造的 7 個主要體驗鴻溝，以及可以幫助避免和解決這些鴻溝的 7 個橋梁。如果一個品牌能意識到這些盲點，它可以立即獲得比仍處于盲點的競爭對手的顯著市場優勢。

僅憑意識就可以產生巨大的差異，但將意識與行動相結合會導致長期成功，成為一個需求量很大和深受喜愛的品牌。

本文翻譯已獲得作者的正式授權（授權截圖如下）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

今日，有消息稱字節跳動將會推出一款名為“飛樂”的音樂流媒體產品。字節跳動的入局，或將引起音樂行業的新波瀾。本文作者對此發表了自己的觀點，一起來看看吧。

擅長“四路出擊”的字節跳動，又雙叒叕出手了……

長期以來，關于字節跳動擴張的消息就一直不斷。前有抖音內測“心動外賣”進軍外賣領域，后有字節跳動收購VR公司的消息登上熱搜……近日，有報道稱字節跳動將于今年下半年推出一款音樂流媒體產品，產品的名稱暫定為“飛樂”，項目內部代號為“luna”。而字節跳動的再次入局，或將引起音樂行業的新波瀾。

一、堅持不懈的音樂夢

今年4月，字節跳動成立了音樂事業部；7月份的時候，字節跳動將音樂升級為P1優先級業務，與游戲業務和教育業務平級；不久之后還內測了音樂代理發行平臺“銀河方舟”。除了自身做音樂之外，字節跳動還投資了校園音樂平臺。這一系列動作無一不展現了字節跳動發力音樂領域的決心，而字節跳動之所以如此看重音樂業務也是有一定原因的。

首先，音樂業務有助于字節跳動獲取新流量。據CNNIC發布的第47次《中國互聯網絡發展狀況統計報告》顯示，截至2020年12月，我國的網絡音樂用戶規模達6.58億，與2020年3月相比增長了2311萬，占網民整體的66.6%。其中，手機網絡音樂用戶規模達6.57億，與2020年3月相比增長了2379萬。隨著短視頻領域流量見頂，字節跳動亟需找尋到新的流量增長點。

其次，音樂行業用戶的付費意愿在逐步增強。據前瞻產業研究院發布的相關報告顯示，我國的網絡音樂付費用戶規模已經由2016年的2017萬人，增長至2020年的7192萬人，網絡音樂付費滲透率也由2016年的4.0%增長至2020年的10.9%。網絡音樂用戶的月度消費金額也由2017年的8.5元，增長至2020年的9.5元。

以騰訊音樂為例，據其最新發布的二季度財報顯示，截至2021年6月30日，騰訊音樂的在線音樂付費用戶人數達到了6620萬，同比增長了40.6%，與今年一季度相比凈增長了530萬人；付費率為10.6%，與去年同期和今年一季度的付費率相比均有所提升。

最后，音樂業務與字節跳動旗下的短視頻業務相輔相成。配樂是制作短視頻必不可少的環節之一，配樂和內容契合度極高的優質短視頻往往能收獲很高的播放量，但也正因短視頻配樂使抖音多次陷入侵權局面，不少短視頻也因其所使用的音樂無版權而被做下架處理。倘若字節跳動推出音樂產品，就能夠為短視頻用戶提供更為方便的曲庫支持，有利于短視頻用戶進行創作。

二、逐夢音樂有“加成”

7月24日，國家市場監管總局責令騰訊音樂解除其網絡音樂獨家版權；8月31日，騰訊發布了《關于放棄音樂版權獨家授權權利的聲明》。眾多音樂平臺不再被音樂版權“卡脖子”，字節跳動于此時再度發力數字音樂，自然也能享受到行業大環境變化所帶來的重大利好。除此之外，還有其他原因也會對字節跳動發展音樂業務產生積極影響。

其一，是其擁有龐大的流量優勢。據抖音發布的《2020抖音數據報告》顯示，截止2020年12月，抖音的日均視頻搜索次數突破4億；截止2020年8月，抖音的日活躍用戶數量突破6億。有抖音這一巨大流量池為其引流，無論是音樂流媒體產品的用戶獲取，還是音樂作品宣發都會容易一些。

9月9日，工信部相關業務部門召開了“屏蔽網址鏈接問題行政指導會”，提出有關即時通信軟件的合規標準，要求9月17日前各平臺按標準解除屏蔽。隨著屏蔽外鏈的解除，字節跳動也將從中獲益，迎來新一波流量增長。

其二，是創作者扶持計劃成效顯現。早在2018年，抖音就啟動了“看見音樂計劃”以扶持原創音樂，隨著不斷進行的音樂扶持計劃，抖音的音樂生態也在逐漸完善。據《2020抖音音樂生態數據報告》顯示，2020上半年抖音的音樂人入駐數量增長近3萬；近半年抖音音樂人漲粉累計超3億，其中漲粉超1000萬的音樂人有6位，漲粉超500萬的音樂人有23位。

而抖音扶持音樂計劃的成功，也給字節跳動的音樂流媒體產品打了樣。字節跳動在發展音樂業務時，也可以采用類似的策略進行音樂產品內容生態的完善。另外，部分抖音音樂人也可能成為字節跳動音樂業務的潛在音樂人，為字節跳動音樂業務的發展添磚加瓦。

其三，算法優勢助力音樂業務發展。眾所周知，算法是字節跳動的一大特色，今日頭條和抖音能取得當前的成績，與字節跳動的算法推薦不無關系。據悉，字節跳動的音樂業務主要由前臺和市場、算法兩大中臺支持構成。在中臺方面，由抖音的市場團隊承擔國內音樂人合作與版權宣發，算法團隊負責提供智能配樂、安全風控等技術支持。

三、在線音樂硝煙起

無論是后版權時代的來臨，還是字節跳動自身的優勢都對其發展音樂業務大有裨益，但機遇與挑戰并存，字節跳動在迎來重大利好的同時，依然面臨著不小的挑戰。

一方面，騰訊音樂的霸主地位難以動搖。在“取消網絡音樂獨家版權”尚未落地之前，騰訊音樂憑借海量的正版歌曲曲庫以及持續建設的內容生態，穩居行業頭部。據騰訊音樂發布的財報顯示，今年二季度騰訊音樂的在線音樂月活躍用戶數為6.23億，僅月活躍用戶數這一項指標，字節跳動在短時期內就很難與之相匹敵。

另一方面，網易云音樂的音樂社區文化別具一格。在被音樂版權“卡脖子”的時期，網易云音樂憑借其音樂社區文化，成功地從眾多音樂平臺中脫穎而出，濃郁的社區氛圍也極大地提高了用戶的黏性。另外，網易云音樂不斷推出的扶持計劃也增強了其內容競爭力。

網易云音樂的這些特色化優勢，也將為其在今后的發展中提供助力，但對字節跳動來說，擁有這些差異化優勢的網易云音樂，無疑是一位強勁的對手。

另外，快手也在音樂領域有所布局。早在2018年的時候，快手就推出了一款音樂產品“光音Mulight”；今年2月26日，快手推出了音樂K歌APP“回森”；5月份的時候，快手推出了音樂APP“小森唱”，該軟件的核心功能是AI創作詞曲用戶進行演唱，在演唱之后還可以通過點贊評論等方式進行互動，最終達到社交的目的。隨著快手在音樂領域的不斷加碼，也會對字節跳動音樂流媒體產品的發展產生影響。

目前來看，隨著行業大環境的變化，在線音樂領域的競爭愈發激烈已經是無可辯駁的事實。無論是穩居頭部的騰訊音樂，還是擅長打情懷牌的網易云音樂，亦或是跨界而來的快手，都是字節跳動音樂流媒體產品的強勁對手。而字節跳動能否在強手如云的音樂行業闖出一片天，仍待時間驗證。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

做好行業研究，有助于企業或個體從業人員更好地洞察市場，進一步發現機會，或者找準產品定位，推動企業戰略決策和后續實施。本篇文章里，作者就行業研究的分析框架與思考維度做了總結和梳理，一起來看一下。

一、行業研究的目的

以始為終，構建行業研究的方法論和分析框架，需要從目的出發，下面列舉幾類典型的行業研究報告目的。

券商的報告（二級市場），分析某個行業是否有投資價值，從行業賽道的選擇過渡到這個行業賽道中的值得被投資的公司，說明這個行業中哪些公司更有投資價值。報告結果是要用于股票投資服務的。二級市場由于公司財務報告的披露性質，公司的財報分析在行業報告中也是重要的構成部分。

互聯網戰略投資部門/VC的報告（一級市場），互聯網戰略投資部門通常以公司的戰略發展目標為出發點，布局上/下游產業鏈，或通過收購競品公司，鞏固和發展公司在行業的競爭力，提升市場占有率，開拓新的市場；VC通過布局細分的賽道，選擇合適的投資標的，參與風險投資。

值得注意的是在互聯網初創企業的財報分析通常不作為重要參考因素，多數互聯網公司在初創期將投入大量資金，長期處于虧損狀態，此時，市場份額和估值與傳統二級市場的分析方式有較大差異。

咨詢公司的報告，目的是為行業內的公司服務的，說明該行業的行業規律、行業風險、行業機會、行業發展趨勢等。在行業研究的內容方面，咨詢公司常見的模式還包括訪談調研行業內公司高管。

二、行業研究的常規分析框架

基于行業研究的目的，常規的行業研究框架，包括一下幾個核心部分：宏觀分析、行業分析、公司分析、消費者分析、競爭者分析，其中宏觀分析和行業分析的視角都是從賽道鏈路的角度，進行整體分析，而公司、消費者和競爭者則是從市場參與者的角度進行分析。

1. 宏觀分析

1）宏觀分析思考的維度

1. 宏觀分析的因素大多非直接影響行業和公司，而是通過影響宏觀基本面，進而對行業產生間接影響。
2. 在宏觀分析中，多數分析不是僅僅是單因子影響，而是混合因子影響的結合。
3. 除了行業分析的分析范圍，宏觀分析應該考慮更廣闊的范圍要素，例如如果限定為某一國家的具體的某一行業研究，需要將宏觀分析的內容范圍擴展至全球范圍內的影響要素分析，將中外的宏觀影響影響都考慮到。
4. 最后，宏觀分析需要考慮時間維度，不能局限于靜態分析，既要考慮存量數據，也要考慮趨勢變化，同時考慮增量數據。

2）宏觀分析考慮的內容：

宏觀分析中考慮的因素點對行業環境的影響，因素點可采用PEST模型分類，但不必拘泥于PEST模型，因素點間可能是組成多因素，從而對行業環境產生間接或直接影響?；赑EST模型，因素點可以分為：

① 經濟類

包括經濟發展水平、社會經濟結構和宏觀經濟政策，其中經濟發展水平可以通過較為典型的量化指標進行衡量，例如GDP\CPI\進出口規模等；宏觀經濟政策主要包括貨幣政策和財政政策；社會經濟結構主要體現在經濟體制和產業結構構成。

② 政治類

包括政治體制、政局穩定性、和相關的政治政策。

其中政治體制包括資本主義、社會主義和中國特色社會主義等，政治體制對行業的影響為間接影響；政策包括投資政策、環保政策、進出口政策、貨幣政策和財政政策等，也有針對具體行業的政策，例如近期發布的教育“雙減”政策就對在線教育行業產生了不小沖擊，網絡安全隱私數據保護政策對互聯網公司獲取用戶使用偏好數據，產生了非常大的影響。

其次，除了政治政策，政局的穩定性對行業發展穩定產生重要影響。

③ 文化環境類

包括人口因素、社會流動性和消費心理，此類因素可與消費者分析關聯，對消費者細分市場和市場定位產生了重要的影響，主要從聚類的角度，對消費群進行分析。

人口因素主要考慮人口總數、年齡構成、性別比例、教育水平、人口地理分布等，社會流動性主要考慮社會階級流動性和貧富差距；消費心理主要包括生活方式、文化傳統和價值觀等，對消費者偏好心理產生影響，從而影響消費者的行為決策。

④ 科技類

主要包括專利技術數量和質量、相關產業技術等，科技對一個產業的生產效率與產品更新，甚至一個產業的萌芽和滅亡都將產生巨大的影響，例如智能芯片對手機行業產生了巨大的沖擊，原有的非智能手機迅速被智能手機取代，生產非智能手機的廠商迅速破產。

綜上，宏觀類因素多數為混合因子對產業產生直接或者間接的影響。

2. 產業分析

1）產業分析思考的維度

① 整體市場分析

整體市場分析除了關注靜態的存量市場，也需要關注動態的增量市場。市場的現有市場規模和增速決定了市場的規模，體現為市場的“寬”度和市場的“長”度，行業壁壘和驅動因素影響參與市場的玩家數量，體現為市場的“陡”度。

② 市場參與者

市場參與者從各個角度，在產業分析上有不同的分析時間，例如從產業鏈角度，分析上下游供應商和購買者、從行業參與者的角度，分析競爭者和行業集中程度。

③ 影響因素

產業影響因素和宏觀影響因素的區別在于，產業影響因素從供給需求、驅動和壁壘的角度分析更為直接的影響因素對產業產生的影響。

2）宏觀分析考慮的內容

① 產業規模

產業規?？梢詮目臻g維度進行解析，產業的寬度代表現有市場規模，產業的長度以時間為維度，代表增長率和增長率增速，而產業規模=現有市場規模*增速。

由此可見產業規模的衡量有兩個重要的衡量標準和指標，即市場規模與復合年均增長率（CAGR），市場有多寬指行業規模有多大、增長的天花板有多高，是衡量一個行業現有市場容量和將來市場發展空間的最重要的標準，現有市場容量決定了該市場有多少蛋糕可以分，而市場增速決定了行業發展潛力，行業增速可與行業的成熟度曲線緊密聯系。

② 產業生命周期

產業的生命周期以時間為維度，一般分為導入期、成長期、成熟期和衰退期。產業生命周期在導入期、成長期、成熟期和衰退期的不同階段，可以從經營風險、財務風險、產品差異、單位利潤、產品特征等不同維度進行分析，詳見下圖。

③ 產業鏈

產業鏈分為上游供應商、下游購買者、潛在進入者和現在競爭者，將企業放在產業鏈進行分析，需要對供應商和購買者有較高的議價權，能有效面對競爭者。

其中，影響供應商議價能力的影響因素包括市場占有率、轉換成本和供應商戰略，影響購買者議價能力的影響因素包括價格敏感度，相對議價能力等，影響潛在進入者的障礙有結構性障礙和行為障礙，影響替代品威脅的主要因素包括產品同質化程度和勞動生產效率等。

④ 產業驅動因素與行業壁壘

產業的驅動因素主要分為兩個部分，第一是生產要素驅動，第二是相關支持性產業驅動，其中，生產要素包括高級生產要素和初級生產要素，而相關支持性產業，則表現為產業鏈上下游的聚集驅動。

行業壁壘：行業壁壘分為限制性要素和市場壁壘，可以通俗理解為一只“看得見”的手和“看不見”的手，即政策限制和市場限制。

政策限制如進出口限制、許可證、配額等，實現限制如規模效益使得成本降低，對新進入的小規模玩家形成行業壁壘，又比如缺乏品牌技術，而只能成為代加工企業，獲取最低的生產制造利潤等。

如果行業的門檻很高，競爭者難以進入市場，行業的壟斷程度也相應比較高，通常用行業集中度來分析衡量，即CR5（行業中前5名的企業占據的市場份額）。

但是，壟斷程度越高，企業越有機會獲得超額利潤，但行業的壟斷程度并非僅僅由行業壁壘所決定，消費者的需求差異也會對壟斷程度產生重要影響，例如手機行業的壟斷程度較高，而餐飲行業卻很難出現寡頭壟斷，因為餐飲的消費者偏好差異非常大。

⑤ 供求分析

供給側主要包括產能分析，同時也受行業集中程度的影響，即上文所述的行業壟斷程度，產能分析包括產能利用率水平、庫存周期、產品使用壽命、訂單周期，這里比較典型的行業是電子產品生產制造業。

需求側主要從消費者市場出發進行分析，同時考慮替代品，需求預測包括消費者整體購買力和細分需求市場，這里的消費者整體購買力受到宏觀因素的影響，例如人均可支配收入、貧富差距等；替代品的細分影響因素包括國家進出口和國內市場替代品。

⑥ 產業結構

產品結構：產品結構可以從加工階段和主導構成不同的視角進行分析，加工階段主要以產業鏈維度為分析視角，從初級產品、中間產品和最終產品進行分析，主導構成主要從驅動因素進行分析，分為勞動密集型產品、資金密集型產品和技術密集型產品等。

市場結構：市場結構從分類上可以分為市場主體結構、市場客體結構、市場空間結構和市場 時間結構，從行業集中程度，可以分為完全競爭市場、完全壟斷市場、壟斷競爭市場和寡頭壟斷市場等，影響行業集中程度的因素在前文已經提及。

3. 市場參與者——公司與競爭者

1）公司思考的維度

① 戰略

戰略需要將企業放置在宏觀和產業的角度，通過對賽道、競爭者和消費者的分析，制定戰略，從整體分配資源，規劃產品和服務。

② 經營分析

經營分析從數據量化的指標，動態指導經營過程中的業務發展。運用定量分析、業務分析和行為分析相結合的方法，對企業進行綜合分析的一種現代經營分析體系。包括:經營基礎分析、財務分析、市場分析、勞務分析、生產分析、物資分析等。從業務單元的視角優化運營。

2）公司分析考慮的內容

① 戰略分析

戰略分析包括企業能力與資源分析、價值鏈分析、產品組合分析、外部分析、內部分析、財務指標分析和商業模式分析等。

• 外部分析：外部分析從企業所面臨的產業環境出發，分析企業在產業環境中所面臨的機會和威脅
• 內部分析：內部分析從企業內部經營的角度出發，分析企業所擁有的資源與能力的優勢和劣勢，即下文所展開的企業能力與資源。企業的外部分析和內部分析構成了SWOT模型。
• 企業能力與資源：從企業能力的視角可以分為研發能力、生產管理能力、營銷能力、組織管理能力、財務能力等，這些能力構成了企業的核心能力，成為企業在市場中競爭的制勝因素，構成了企業的護城河，其次，從企業資源的視角，可以分為有形資源和無形資源。
• 價值鏈：可以分為基礎設施和基本活動兩大類，其中基礎設施包括財務、戰略、法務、人力資源、技術開發和采購管理，基本活動包括內部后勤、生產經營、外部后勤、市場營銷和運營。
• 商業模式：從企業提供產品和盈利模式出發，主要關注一類企業在市場中與用戶、供應商、其他合作伙伴（即營銷的任務環境的各主體）的關系，尤其是彼此間的物流、信息流和資金流。
• 產品組合：從提供的服務和產品出發，例如零售行業中的品類策略，包括產品線的和SKU的設置，即品類的長度和深度，也可以從經典的波士頓矩陣出發，分析銷售增長率和市場占有率的矩陣，針對明星業務、問題業務、瘦狗業務和金牛業務制定不同的策略。
• 財務指標：從財務指標，以始為終，進行測算和分析，包括毛利率、現金流、ROE等。

② 戰略選擇

戰略選擇可以從總體戰略和智能單元戰略出發，如果業務涉及海外業務，需要分析選擇國際化經營戰略。

• 總體戰略：總體策略是公司的總策略，可分為發展戰略、穩定戰略和收縮戰略，其中發展戰略可以分為一體化、密集型和多元化戰略。
• 職能戰略：從業務單元視角，制定單元戰略，一般包括營銷、生產研發、運營、人力和采購戰略。例如營銷戰略中需要制定細分市場STP，進行營銷戰略的選擇，包括產品、渠道、促銷和分銷（4P）等，其余業務單元策略，在此不做過多的贅述。
• 國際經營戰略：根據全球化協作程度和本土獨立性和適應能力的差別，本土企業的國際化經營戰略可以分為四種類型，即國際化戰略、多國本土化戰略、全球戰略與跨國戰略。

3）競爭者思考的維度

• 優勢：競爭者分析的思路可以簡單分為，發現優勢是什么，以及采取何種策略發大優勢，形成企業的護城河。
• 劣勢：其次，競爭者分析需要思考與競爭者相比，企業的劣勢是什么，如何縮小這種劣勢。

4）競爭者分析考慮的內容

• 競爭分析：競爭分析主要從前文所述的企業資源和能力角度進行分析，包括產品優勢，技術壁壘、分銷渠道優勢、用戶增量和存量、財務狀況、組織架構、核心管理層（人才資源）等視角分析，同一賽道的不同玩家在市場中的競爭力。
• 戰略選擇：基于競爭分析，針對賽道中的競爭者，可以采取不同的競爭者戰略，主要包括三類，即藍海戰略、中小企業戰略和基本競爭戰略，其中，基本競爭戰略可以分為成本領先戰略，差異化戰略和集中化戰略。

4. 消費者

1）消費者思考的維度

細分市場與精準營銷：在互聯網數字化的革新下，原有的消費者聚類分析越來越精細化，不僅有群體的聚類標簽，個體消費者的標簽也能層層穿透，為精準營銷運營提供了條件。

2）消費者分析考慮的內容

基本屬性：基本屬性包括年齡、收入、性別、受教育程度和地域分布等。

購買動機和購買行為：根據MBA智庫的定義，營銷學家把消費者的購買動機和購買行為概括為6W和6O，從而形成消費者購買行為研究的基本框架。

① 市場需要什么（What）——有關產品（Objects）是什么。通過分析消費者希望購買什么，為什么需要這種商品而不是需要那種商品，研究企業應如何提供適銷對路的產品去滿足消費者的需求。

② 為何購買（Why）——購買目的（Objectives）是什么。通過分析購買動機的形成（生理的、自然的、經濟的、社會的、心理因素的共同作用），了解消費者的購買目的，采取相應的市場策略。

③ 購買者是誰（Who）——購買組織（Organizations）是什么。分析購買者是個人、家庭還是集團，購買的產品供誰使用，誰是購買的決策者、執行者、影響者。根據分析，組合相應的產品、渠道、定價和促銷。

④ 如何購買（How）——購買組織的作業行為（Operations）是什么。分析購買者對購買方式的不同要求，有針對性地提供不同的營銷服務。在消費者市場，分析不同的類型消費者的特點，如經濟型購買者對性能和廉價的追求，沖動性者對情趣和外觀的喜好，手頭拮據的購買者要求分期付款，工作繁忙的購買者重視購買方便和送貨上門等。

⑤ 何時購買（When）——購買時機（Occasions）是什么。分析購買者對特定產品的購買時間的要求,把握時機，適時推出產品，如分析自然季節和傳統節假日對市場購買的影響程度等。

⑥ 何處購買（Where）——購買場合（Outlets）是什么。分析購買者對不同產品的購買地點的要求，如快速消費品，顧客一般要求就近購買，而選購品則要求在商業區購買，一邊挑選對比，特殊品往往會要求直接到企業或專賣店購買等。

三、總結

綜上所述，行業研究的框架可從宏觀、賽道、市場參與者進行分析。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

什么是登錄？

登錄是進入一個應用程序 、網站或服務的入口。幫助用戶建立他們的賬戶。

• 一個登錄流程通常包括一個主要的登錄頁和一個相當復雜的重置流程，其中包括 “忘記密碼”、重置密碼和其他登錄方法。
• 登錄的首要目標是確保用戶成功登錄到他們的賬戶。

什么是登錄目標？

讓我們花點時間來定義一下“登錄目標”這個術語，這是在做設計決策時的關鍵。

登錄目標是指用戶進入登錄流程的意愿。以有聲思維來表達，它可以是 “我想登錄”、“我想檢查我的電子郵件”、“帶我去那里”，等等。

當用戶進入到登錄頁時，他們可能沒有登錄意愿?？赡軙a生“嗯，我不在乎，以后再做”或“這太麻煩了”或“呀，我現在該怎么辦？”的想法。忘記密碼、半路遇到困難或切換到另一個頁面/設備，都可能是缺乏登陸意愿的跡象。

我們得到了登陸目標

保留或增強登錄流程中的登陸意愿是很好的目標，下面的準則都是為這個目標量身定做的。

設計熟悉的體驗

設計熟悉的體驗，雖說不是設計師最喜歡的設計準則，但是與整個生態系統中最好的體驗保持一致是非常重要的。例如使用簡單、公認的布局，使用眾所周知的術語和文案，都有助于用戶自信而輕松地進行熟悉的操作。

保持通用的設計也有助于將頁面輕松擴展到不同的形式和設備。

Pinterest 有一個傳統的、居中的覆蓋式登錄頁。它有一個亮紅色的主要登錄按鈕，并提供 Google 和 Facebook 作為額外的社交登錄選項。

滑到最后，有我對網絡上流行的成功登錄經驗的總結。這就把我們帶到了下一個問題 —— 創新的界限在哪里？

登錄是一個品牌展示的絕佳機會點。在視覺上，它可能使用品牌色、品牌照片、品牌插圖，甚至是營銷信息。和大多數設計問題一樣，登錄頁品牌展示的關鍵在于平衡。登錄操作應該一直占據中心位置。頁面上的其他元素必須謹慎規劃好，不應該奪走登陸操作的注意力。

一條優秀的經驗之談：用戶在登錄頁面上花費的時間越少越好。幫助他們繼續前進，盡快發現產品中的優點和價值。

聚焦設計

快速回顧一下：用戶在登錄頁面上花費的時間越少越好。根據這一點，登錄（或恢復）操作應當占據用戶的全部注意力。

• 最好是把登錄框放在頁面的中心。如果你打算把它放在一側，最好是賦予它核心視覺效果。
• 對于文案寫作來說，指明用戶在某一步驟中到底需要做什么才是很重要的！比起冗長的解釋，一句簡單的 “輸入密碼”就能起效。幽默、復雜的行話、技術術語和花哨的文筆在登錄體驗中是沒有用武之地的。

在恢復體驗中，將一套復雜的操作分解成多個步驟是很有效的。安排用戶一次只做一件重要的事情！例如：輸入你的手機號碼和輸入發送到你手機上的驗證碼是兩個獨立的步驟。

Facebook 在頁面中保持用戶信息在右側，并將恢復流程分解為多個步驟。

亞馬遜把它的恢復流程分解成多個步驟。它將次要的恢復選項設置為 “我需要更多幫助 ”的可擴展部分，這有助于保持注意力集中在主要操作。

保持注意力集中在主要操作的技巧：

• 登錄框可以布局在一個主頁、疊加頁，或一個獨立頁面。
• 使用卡片式布局
• 將操作分為主要和次要操作
• 使用一個大而醒目的登錄按鈕
• 盡量減少次要操作的數量 —— 避免出現任何與核心登錄操作無關的內容。

給予明確的反饋并在用戶失敗時提供幫助

在登錄過程的每個階段，用戶都可能失敗。電子郵件地址輸入錯誤、密碼輸入錯誤或忘記密碼、網絡問題，所有這些都可能導致登錄意愿的急劇下降。因此，登錄界面以最恰當的方式回應用戶是非常重要的。清晰、及時、精心編輯的錯誤提示信息能起到很大幫助。

錯誤信息包含有用的提示/暗示，指明你在失敗時可以做什么

當你密碼登陸失敗，但你有一個 Gmail ID 時，Facebook 會增加一個 “用 Google 賬號登錄 ”的功能

指導用戶恢復的技巧：

• 鼓勵用戶嘗試合適的替代方案
• 在用戶失敗后，安排替代的登錄方案，同時將用戶導航至一個獨立的頁面
• 在文本中展示出最有用的登錄方案，并在出現錯誤時對用戶做出積極響應！

盡量保留登錄痕跡

重點是讓用戶知道平臺識別出了他們，并提供一個歡迎回歸的體驗。這有助于提升用戶的登錄意愿。

保留登錄痕跡的方法：

• 像 “記住我”這樣的功能
• 預先填寫上一步收集到的字段，例如：在跳轉到恢復流程時，預先填寫登錄步驟中收集到的電子郵件 ID
• 如果使用的是兩步式登錄，為用戶提供個性化的登錄方式是個不錯的主意 —— 用戶對電話OTP（一次性驗證碼）登錄更滿意？還是電子郵件+密碼？記住用戶上次選擇的登陸方式可以提升用戶的登錄意愿，并讓他們感覺到登錄體驗的自然和舒適。
• 在企業 SSO（單點登錄） 中，用戶可能會用多個賬戶登錄。在檢測到多個賬戶的情況下，最好是將這些賬戶選項呈現給用戶，讓他們選擇他們想使用的賬戶。

靈活提供多種登錄方式

對于你的平臺應該提供哪些登錄方法，沒有一個放之四海而皆準的方案。最好是提供一到兩種額外的方法（除了用戶名+密碼），這樣用戶就有了選擇，以防他們忘記密碼。這些方法可以是基于電話號碼的登錄、人臉識別，或最常見的社交登錄，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考慮社交登錄，思考為平臺添加最流行和最安全的方案。

需要注意的是 —— 增加很多的登陸方法會使頁面變得混亂，可能會導致登錄意愿降低！將額外的選項限制在 2 或 3 種。

針對最常用的登陸方式進行優化，并明確區分主要和次要方式。這些選項通常被證明是需要重置密碼（以防用戶忘記密碼）的很好的替代方法，但同時也被認為是一個乏味的步驟。情況允許時，應智能地浮現其他登陸選項并進行個性化處理。例如：如果用戶是通過電子郵件登錄，提供一個帶有一次性鏈接的登錄選項可能會有效。

在此提供 Medium 登錄頁的案例。雖然清晰且設計良好，但它確實有太多的登錄方法。不得不回訪 Medium 的設計者，如果這個設計對他們來說是好的！

無密碼登錄正火速流行起來。特別對于只有移動端的應用程序來說，基于電話號碼的認證已常態化。指紋和 FaceID 在許多地方出現，使認證流程變得快速、安全。為平臺找到最適合（且可開發）的方法，并將其作為主要登錄選項。

登錄是信任敏感的時刻

登錄涉及到用戶輸入敏感的個人數據，如電子郵件、密碼和電話號碼 —— 這是決定了他們與平臺關系的敏感時刻。

登錄框代表了品牌，任何視覺上的改變都必須緩慢進行——因為整體的視覺變化可能會失去用戶信任。

登錄也是（有用的）保障 —— 足以讓壞人無法進入系統!

雖然減少普通用戶的操作是很重要的，但如果我們懷疑用戶可能是黑客，那么出現額外的認證也變得很重要。這可能是一個很好的機會去提醒用戶能夠采取哪些措施來加強他們賬戶的安全性 —— 例如：強密碼、雙重認證等。

通過調研確定用戶類型

之前有提到過，投入足夠的時間去調研用戶，有助于提高登錄意愿！這一點是很重要的。

登錄是一種體驗，你的用戶角色可以是各種各樣的 —— 每個人都可能擁有一個你平臺的服務賬戶！如果可能的話，縮小你的角色范圍。

情況允許時，像我這樣（為社交媒體平臺設計），可以嘗試以下方案：

1. 登錄漏斗 —— 與項目管理人員合作，找出用戶在登錄流程中互動和放棄的關鍵點。
2. 登錄入口 —— 用戶是通過電子郵件進入登錄頁面？還是通過搜索引擎的結果？還是當他們在使用產品時？或是在應用程序中？你可以利用這些入口點作為線索，為用戶展現出最相關的選項。
3. 已知的設備 —— 手機、瀏覽器和已知的設備可以有助于為用戶提供受歡迎的、個性化的登陸體驗。
4. 用戶群組 —— 根據用戶特性進行劃分，如網絡/移動、年齡組和地域，也能有幫助。
5. 在用戶沒有登錄時，使用這些線索可以增加用戶的登錄意愿。采取微小的步驟進行用戶識別，并且使用戶易于接受。這有助于你提高登錄成功率！反之這也會為你的平臺帶來更多的活躍用戶，每個人都能成為贏家。

案例介紹

以下是我對網絡上我最喜歡的登錄頁進行的總結，包含一些我經常訪問的平臺。歡迎推薦更多登錄頁！

Google（谷歌）打破了標識優先的格式 —— 改成了分步式登錄模式，在不同的步驟中輸入電子郵件和密碼。這種模式對于 Google 有安全優勢，也可以使他們在接下來的步驟中為用戶提供個性化的選擇。頁面也是最小的、全白的、聚焦的。

Uber 的登錄頁是簡單且聚焦的，允許用戶輸入他們的電話號碼并進入下一步。

Facebook 有幾個登錄方案，他們用這些方案進行實驗和 A/B 測試 —— 這是一個右對齊的登錄框案例，它很好地突出了重點。左側的空間被用來打造積極的品牌形象 —— 總體來說是成功的登錄體驗。

Pinterest 做了 一個簡單居中的疊加表單，有碩大的輸入框 —— 不斷吸引用戶！還有一個亮紅色的登錄主按鈕，以及一些額外的社交登錄選項。

盡管 Airbnb（愛彼迎）在很多方面都做得很好，但它的登錄頁讓人感到操作繁多，這也許是因為基于手機號碼登錄，也許是因為大量的次要登錄選項，導致相當多的認知負荷！

LinkedIn（領英）很好地保持登錄框的簡介、聚焦和居中，有一個醒目的主登錄按鈕。

我對 Dropbox 的登錄頁面持猶豫態度——插圖很好看，但它的顏色與界面按鈕的顏色相似。這是附加元素分散注意力的案例。就我個人而言，我喜歡在界面中大膽使用插圖，但評估插圖的使用環境也很重要。

Amazon（亞馬遜）的登陸頁視覺設計上有些老舊，但對于管理用戶注意力是一個很好的案例，巨大的黃色“繼續”按鈕以及頁面上沒有任何干擾，使登錄任務看起來簡單快速。

在登錄頁面上放置廣告可能不是一個好主意，但同時 Yahoo（雅虎）有一個與眾不同的標識在登錄框中，其中設計了一些巧妙的功能，幫助用戶減少輸入。(參考下圖)

我想把 Figma 納入優秀的登錄案例中，該頁居中于浮層，Google 登錄被突出展示（也許是 Figma 的首選和推廣的登錄形式？），它非常簡潔，幾乎是線框式的。用戶體驗非常好。

感謝我的產品合作伙伴 Apurva 和我一起學習。采取微小的步驟進行用戶識別，并且使用戶易于接受。這會使你的用戶登錄成功率越來越高！同時這也會為平臺帶來更多的活躍用戶。:)希望你能從這篇文章中得到啟發，并應用于你自己的產品和設計工作中。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

一、準備合約

本節課程教大家如何講智能合約部署到conflux公鏈上，首先大家可以看到下面的這個智能合約是不是很簡單。我們將會以這個合約演示部署到conflux公鏈的過程。

pragma solidity ^0.5.0;

contract Counter {
    uint public count=0;
    event SelfEvent(address indexed sender, uint current);

    constructor() public {
    } function inc(uint num) public returns (uint){ return count += num;
    } function self() public {
        emit SelfEvent(msg.sender, count);
    }
} 復制代碼

二、conflux的sdk安裝

我們使用js-conflux-sdk作為本教程的web教程，交互首先我們需要進行安裝nodejs作為我們的運行環境。飛機票一張收下吧，我們安裝好nodejs后，就可以來玩我們的sdk了。廢話不多說，直接開始擼。

我們使用WIN + R鍵打開命令行，然后創建一個文件夾（溫馨提示切換到非系統盤玩切換方式“D:”就切換到D盤了）使用“mkdir my-project && cd my-project” 創建好項目后自動進入文件夾，然后我們運行“npm init” 進行初始化node項目，這一步會讓你確認一些東西，如果你是小白一路回車（Enter鍵）就好。如果你是前端大神，我也沒啥好教的我也不太懂。為了穩定我們使用固定版本號方式安裝依賴，我們運行 “npm install js-conflux-sdk@0.9.2” 命令進行安裝js-conflux-sdk的0.9.2版本依賴（可以使用“npm uninstall package-name” 命令刪除對應依賴）。前置準備到這里基本已經完成。

三、編寫調用合約js代碼

下面請看我的目錄結構跟隨我一起來學習，下面的目錄結構請不要直接看到了就創建，因為你不知道都是什么意思，看玩我的解釋在回頭創建。

 

 

小伙伴應該已經發現了 node_modules、package-lock.json、package.json 這些文件是我們在進行安裝 sdk依賴時自動生成的。其他文件目前都沒有，我們來按順序生成他們。

先創建sol這個文件夾，然后創建這三個文件。test.sol就是上面我們的合約代碼直接拷入文件中。abi.json和code.json兩個文件是通過這個工具 remix 在線生成的。我來說下生成過程。 首先我們將里面的文件全部刪除，然后點擊這里找到我們的項目目錄下的test.sol 文件

 

 

 

 

我們應該看到下方我框出來的兩個按鈕了吧，那兩個按鈕就是abi.json和code.json文件的來源。abi.json我們可以直接復制過去，code.json文件我們要改點東西。

首先我們看到的code文件應該是這樣的

{ "linkReferences": {}, "object": "608060405260...c63430005110032", "opcodes": "PUSH1 0x80 PUSH1 ... 1100 ORIGIN ", "sourceMap": "27:337:0 ... 37;;;;;;" } 復制代碼

代碼有省略，太長不好看，我們看到object這個key值了吧，我們把它的值考出來然后在頭部加0x 就好了放在code.json文件中。code.js文件中只存放object的內容前面加0x，也就是下面的代碼，其他信息都不要，千萬記住了。這點很重要?。。。?

"0x608060405260...c63430005110032" 復制代碼

就是這樣的。然后我們在寫另外兩個call和deploy兩個文件

先寫deploy文件

 // 私鑰地址
const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e';
// 合約地址
const CONTRACT = '';
const { Conflux } = require('js-conflux-sdk');

async function main() {
  const cfx = new Conflux({
    url: 'http://mainnet-jsonrpc.conflux-chain.org:12537',
    defaultGasPrice: 100,
    defaultGas: 1000000,
  });
  const account = cfx.Account(PRIVATE_KEY); // create account instance
  console.log(account.address); 

  // create contract instance
  const contract = cfx.Contract({
    abi: require('./sol/RC20.abi.json'),
    bytecode: require('./sol/RC20.code.json'),
  });

  const receipt = await contract.constructor()
    .sendTransaction({ from: account })
    .confirmed();
  console.log(receipt.contractCreated); 
}
main().catch(e => console.error(e)); 復制代碼

打開項目cmd窗口在上面的目錄下 運行命令 “node deploy.js”就將合約部署上去了

receipt.contractCreated 這個會打印出合約地址。

作者：悠悠_15832013094

鏈接：https://juejin.im/post/5ef563f75188252e99702335

來源：掘金

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

Conflux DApp 開發教程

對本教程有任何疑問或建議可以在 GitHub 給我們留言。

簡介

Conflux DApp 開發教程將使用 Conflux Studio 在 Oceanus 網絡下開發一個簡單的代幣應用 Coin。

通過這個開發教程，你將會學習到如何進行 Conflux 智能合約的編寫、調用，配置智能合約的代付以及如何使用 Web 前端項目與智能合約進行交互，從而實現一個包含前端和智能合約的完整的 DApp。

在閱讀教程中遇到任何問題，歡迎在 Issues 中向我們反饋。

準備工作

安裝 IDE

請在 GitHub 下載頁面下載 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系統，請根據系統下載對應的版本。

正確安裝 Conflux Studio 并初次啟動后，Conflux Studio 將顯示歡迎頁面，根據提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下載、安裝及啟動。

創建錢包

完成所有的安裝步驟后，首先需要創建鑰匙對來完成后續的合約部署以及調用。

在 Conflux Studio 的任意界面，點擊應用左下?的鑰匙圖標，打開密鑰管理器。點擊 Create 按鈕打開新鑰匙對彈窗，輸入鑰匙對的名字并點擊 Save 按鈕。完成后將在密鑰管理器中看到剛剛生成的鑰匙對的地址。鑰匙對由私鑰和公鑰組成，公鑰在智能合約中也常被稱作地址。

導出私鑰可以通過點擊每個地址后面的眼睛按鈕打開查看私鑰彈窗，彈窗顯示地址以及私鑰。后續教程中會需要通過管理器導出私鑰。

為了順利完成教程，首先需要創建三個鑰匙對：

• minter_key 用于 Coin 合約部署時的簽名，是這個教程中最常使用的鑰匙對
• receiver_key 用于 Coin 合約接收轉賬，將在后文中介紹轉賬時用到
• sponsor_key 用于 Coin 合約代付功能，將在后文中介紹代付功能時用到

連接 Conflux 網絡

教程將在 Oceanus 網絡進行合約的部署以及合約的調用。點擊頂部 Network 標簽的倒三角打開下拉菜單，點擊選擇 Oceanus 網絡進行切換。

切換完成后，可以在主頁面中看到當前網絡為 oceanus。頁面左邊包括了當前網絡的節點 URL，Chain ID，TPS 信息，頁面右邊包含了當前網絡區塊的信息。

申請測試 CFX

點擊頂部 Explorer 標簽打開區塊瀏覽器，并在地址欄粘貼鑰匙對地址，可以在左邊看到當前地址的 CFX 余額信息。

在區塊鏈的世界中，大家通常將申請測試 Token 的方式稱為 faucet，目前在 Oceanus 網絡下每次 faucet 申請到的 Token 為 100 CFX。

獲取 CFX 的方式有兩種方式：

• 輸入地址后點擊地址欄右邊的水龍頭按鈕，Conflux Studio 將為地址自動申請 CFX
• 你也可以直接在瀏覽器中輸入 https://wallet.confluxscan.io/faucet/dev/ask?address={address} 來申請 CFX
  

使用上述方法在 Conflux Studio 中為 minter_key 和 sponsor_key 申請 CFX Token。完成申請后，這兩個賬戶上的余額將會從 0 CFX 更新為 100 CFX。

目前余額信息為：

• minter_key 余額 100 CFX
• receiver_key 余額 0 CFX
• sponsor_key 余額 100 CFX

智能合約

創建項目

點擊頂部左邊的 Project 標簽切換至項目列表頁面，點擊頁面中的 New 按鈕打開項目創建窗口，輸入項目的名稱并選擇 coin 模版，點擊 Create Project 完成項目的創建。

合約代碼

Coin 合約是一個簡單的代幣合約，其中：

• 通過 mint 方法可以增發代幣數量
• 通過 send 方法可以將一定數量的代幣轉賬給別的用戶，同時會在事件中記錄下這筆轉賬的信息
• 通過 balanceOf 方法可以查詢到指定賬戶地址的代幣余額
• 通過 add_privilege 方法可以為合約添加代付白名單
• 通過 remove_privilege 方法可以為合約移除代付白名單
  

Conflux 智能合約使用 Solidity 語言進行開發，打開目錄下的 contracts/Coin.sol 文件，這個是本項目的核心代碼：

// 指定了 Solidity 的版本，通過 Pragmas(https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragmas) 告訴編譯器本代碼可以兼容的版本為 0.5.0 到 0.7.0
pragma solidity >=0.5.0 <0.7.0;

// 導入 SponsorWhitelistControl 合約
import "./SponsorWhitelistControl.sol";

// 定義 Coin 的合約
contract Coin {
    // 定義了兩個 State Variables(https://solidity.readthedocs.io/en/latest/structure-of-a-contract.html#state-variables)
    address public minter;
    mapping (address => uint) private balances;

    // 使用 SponsorWhitelistControl 合約連接系統合約
    SponsorWhitelistControl constant private SPONSOR = SponsorWhitelistControl(address(0x0888000000000000000000000000000000000001));

    // 定義了 `Sent` 的事件，定義了 from / to / amount 列
    event Sent(address from, address to, uint amount);

    // Coin 合約的 constructor ，在 constructor 中指定了 minter 的地址
    constructor() public {
        // msg.sender 為部署合約時簽名的賬戶地址，將這個地址賦值給 minter
        minter = msg.sender;
    }

    // 定義 mint 方法，通過此方法來增發代幣
    function mint(address receiver, uint amount) public {
        require(msg.sender == minter);
        require(amount < 1e60);
        balances[receiver] += amount;
    }

    // 定義 send 方法，通過此方法可以給別的賬戶轉賬代幣
    function send(address receiver, uint amount) public {
        require(amount <= balances[msg.sender], "Insufficient balance.");
        balances[msg.sender] -= amount;
        balances[receiver] += amount;
        // 通過 emit 觸發 Sent 事件，記錄這筆轉賬的信息
        emit Sent(msg.sender, receiver, amount);
    }

    // 定義 balanceOf 方法，這是個 view 類型的方法，用于查詢賬戶余額
    function balanceOf(address tokenOwner) public view returns(uint balance){
      return balances[tokenOwner];
    }

    // 定義了 add_privilege 方法，調用系統合約 add_privilege 方法添加地址到代付白名單
    function add_privilege(address account) public payable {
        address[] memory a = new address[](1);
        a[0] = account;
        SPONSOR.add_privilege(a);
    }

    // 定義了 remove_privilege 方法，調用系統合約 remove_privilege 從合約代付白名單中移除地址
    function remove_privilege(address account) public payable {
        address[] memory a = new address[](1);
        a[0] = account;
        SPONSOR.remove_privilege(a);
    }
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

編譯及部署合約

點擊工具欄的 Build 按鈕進行合約的編譯，編譯的結果將會保存在 build/Coin.json 文件中。

在部署合約前，首先需要確認在 Explorer 中選擇合約部署所使用的地址，Conflux Studio 會使用這個地址將部署合約這筆交易進行簽名（選擇的方法為在 Explorer 的地址欄中輸入地址）。在合約代碼的 constructor 中，minter 被賦值為 msg.sender，這個 msg.sender 就是 Explorer 所選擇的地址。

在此我們選擇 minter_key 作為部署合約的簽名者。

點擊工具欄的部署按鈕進行部署，部署完成后，部署結果會在 deploys 的 JSON 文件中，在這個文件中可以在 contractCreated 中找到當前合約部署的地址，后文中使用 contract_addr 來代表這個合約地址。

調用合約

點擊頂部的 Contract 標簽切換至合約頁面，在地址欄輸入 contract_addr 地址并加載合約。

合約頁面由三個部分組成：

• 左邊為合約調用區域
• 中間為合約數據查詢區域
• 右邊為事件查詢區域

合約調用及查詢

增發代幣

點擊合約調用的下拉菜單中選擇 mint 方法，在下方的參數區域分別填入以下信息：

• receiver 接收代幣的地址。填入 minter_key 地址
• amount 發行的代幣總數。填入整數 1000
• Value 選填項，具體可查看 Value 詳解。填 0 或者不填
• Signer 這筆交易的簽名地址，如果沒有開通代付功能，交易手續費將在這個賬戶地址中扣除，在合約代碼中通過 msg.sender 獲取到這個地址。填入 minter_key 地址

填寫完成后點擊執行按鈕，Conflux Studio 將自動構造交易并推送到網絡中。成功執行后可以在下方 Result 中看到這筆成功的交易。

查詢代幣余額

點擊查詢區域的下拉菜單并且選擇 balanceOf 方法，這是在代碼中定義的查詢方法。在下方的 tokenOwner 填入 minter_key 地址并點擊執行，就可以在下方的 Result 中看到 minter_key 賬戶的 Coin 代幣的余額信息為 1000。使用同樣方法可以查詢到 receiver_key 賬戶的代幣余額為 0。

轉賬代幣

在合約調用區域選擇 send 方法，在 Parameters 中分別填入：

• receiver 收款人地址。填入 receiver_key 地址
• amount 轉賬的代幣數量。填入整數 200
• Signer 這筆交易的簽名地址，代幣轉出的數量將會在這個賬戶中扣除。填入 minter_key 地址，

點擊執行完成轉賬，再次查詢代幣余額可以看到 minter_key 賬戶只剩下 800 代幣，而 receiver_key 賬戶則從 0 變成了 200 代幣。

Value 參數

Conflux 智能合約的每個調用的方法都可以帶上 Value 參數，這是一個可選的參數。如果帶上了這個值，智能合約出了在執行這個方法的邏輯外，還會額外轉 Value 中指定數量的 CFX token 到 receiver 賬戶，轉賬金額為 Value 中所填的值。有些智能合約的方法需要這個參數才可以完成調用，但是在 Coin 合約不需要這個參數。

后文中的代付功能將會使用到 Value 參數。

查詢事件

在事件區域選擇 Sent 并點擊執行，下方的 Event Logs 可以看到轉賬的記錄。Sent 事件的列都是由代碼中的 Sent 事件的參數來定義的（其中 epoch 為事件發生的時間，這個為系統默認列）。在代碼中定義了 Sent 方法的參數為 from， to 和 amount，分別對應了這筆轉賬的發起者地址，接受者地址以及轉賬的數量。

代付功能

Conflux Studio 支持 Conflux 系統合約提供的代付功能。

通過系統合約可以為別的合約設置代付功能，系統合約提供給了四個方法：

• add_privilege 添加合約代付白名單，在代付白名單中的地址調用該合約的方法時不需要付手續費，費用由代付賬戶支付。其中添加特殊地址 0x0000000000000000000000000000000000000000 代表為所有調用該合約的地址代付費用
• remove_privilege 移除合約代付白名單
• set_sponsor_for_collateral 設置合約儲存費 (collateral for storage) 的代付賬戶及代付金額
• set_sponsor_for_gas 設置合約手續費 (gas fee) 的代付賬戶、代付金額及每筆交易代付金額上限

啟用一個合約的代付需要設置代付的賬戶、代付金額的及代付白名單。教程將會使用 Conflux Studio 通過系統合約設置代付賬戶及代付金額，通過 Coin 合約添加代付白名單。設置完成后，minter_key 賬戶調用 Coin 合約的方法時將不會被扣除手續費，手續費由 sponsor_key 賬戶代付。

設置代付賬戶及代付金額

在 Conflux Studio 中訪問系統合約地址 0x0888000000000000000000000000000000000001，在合約調用區域能看到前文中提及的四個設置代付的方法。

選擇 set_sponsor_for_collateral 方法，該方法有三個參數：

• contract_addr 設置代付的合約地址。填入 contract_addr
• Value 設置代付金額。填入整數 40
• Signer 代付賬戶地址。填入 sponsor_key 地址
  
  填好以上參數并執行運行，系統合約將為 Coin 合約設置好儲存費代付賬戶，此時 sponsor_key 賬戶將會被扣除 40 CFX。

選擇 set_sponsor_for_gas 方法，該方法有四個參數：

• contract_addr 設置代付的合約地址。填入 contract_addr
• upper_bound 設置每筆交易代付的上限。填入 1000000000000
• Value 設置代付金額。填入整數 40
• Signer 代付賬戶地址。填入 sponsor_key 地址
  
  填好以上參數并再次執行運行，系統合約將為 Coin 合約設置好手續費代付賬戶，此時 sponsor_key 賬戶將會再次被扣除 40 CFX。

完成這兩個方法的調用后 Coin 合約代付賬戶便設置好了，sponsor_key 賬戶將為 Coin 合約的手續費和儲存費各提供為 40 CFX Token 的代付服務。由于目前代付白名單中并沒有賬戶地址，因此還需要添加白名單地址才能完成代付設置。

添加代付白名單

在 Coin 合約中集成了設置代付白名單的方法，通過調用此方法可以添加或刪除代付白名單。

在 Conflux Studio 中訪問 contract_addr 合約，選擇 add_privilege 方法：

• account 添加白名單的地址。填入 minter_key 地址
• Value 不填
• Signer 這筆交易的簽名地址。填入 minter_key 地址

運行后就成功設置了代付白名單了，至此 Coin 合約的代付功能設置好了。

代付測試

在進行代付測試前，先查詢并記錄下 minter_key 賬戶的 CFX 余額。例如本教程中，minter_key 的初始余額為 97.6210937497093952 CFX。

回到 Coin 合約調用頁面，再次調用 mint 方法并使用 minter_key 地址增發代幣 1000，完成代幣增發后再次查詢 minter_key 的余額，仍然為 97.6210937497093952 CFX。

可以看到增發代幣的這筆交易，原本應該由 minter_key 賬戶支付的手續費，變成了由 sponsor_key 賬戶支付。

前端項目

前端項目源碼可以前往 Conflux 前端。

預備

下載項目并安裝依賴

• 下載前端項目：git clone https://github.com/ObsidianLabs/conflux-frontend-react
• 使用 npm install 或者 yarn 進行項目依賴安裝

Conflux Portal 的安裝及配置

Conflux Portal 是由 Conflux 提供的瀏覽器插件，目前提供了 Chrome 及 Firefox 的支持，用戶可以使用 Conflux Portal 進行私鑰的管理以及交易簽名。

前往 Conflux Portal GitHub 下載安裝。項目的源代碼在 GitHub 中可以找到。

在這里需要將 Conflux Studio 中生成的地址導入到 Conflux Portal 中。完成插件安裝后，在 Conflux Portal 的頁面中選擇 Import，將 Conflux Studio 中的 minter_key 的私鑰（在創建錢包章節中介紹了如何將私鑰導出）粘貼到輸入框中，點擊 Import 按鈕完成私鑰導入。

運行前端項目

在運行項目之前，需要修改一些默認的環境變量。

在前面的教程中部署合約后會生成一個 contractCreated，這個值便是部署在網絡中智能合約的地址。打開項目根目錄并找到 .env 文件，這個文件提供了項目的環境變量，將 REACT_APP_CONFLUX_COIN_ADDRESS 的值修改為 contract_addr。

使用 yarn start 啟動前端項目，開發服務器運行起來后會在瀏覽器中打開前端頁面（如果沒有打開，請在瀏覽器中訪問 http://localhost:3000）。

項目運行起來后，頁面將顯示四個卡片信息，分別為

• 左上角 Conflux 網絡信息模塊
• 右上角 Conflux Portal 模塊
• 左下角 Coin 合約模塊
• 右下角 SponsorWhitelistControl 合約模塊
  

連接 Conflux Portal

點擊右上角組件中的 Connect to Conflux Portal 按鈕，Conflux Portal 頁面將被打開，輸入密碼和選擇賬戶后完成連接。連接成功后，將會在按鈕下看到當前連接的賬戶地址以及賬戶中的 CFX 余額。

運行 Coin 合約代幣增發和代幣轉賬操作

左下角的組件為 Coin 合約組件，可以通過這個組件調用代幣增發和代幣轉賬功能。

• 代幣增發：選擇 mint 方法并在 receiver 中填入增發地址 minter_key 地址和在 amount 中填入增發代幣的數量 100，點擊 Push Transaction，在彈出的 ConfluxPortal Notification 窗口中點擊 Confirm 按鈕來確認交易。

• 代幣轉賬：選擇 send 方法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中轉賬代幣的數量 20，點擊 Push Transaction，在彈出的 ConfluxPortal Notification 窗口中點擊 Confirm 按鈕來確認交易。
  

查看 Coin 合約中的余額

選擇 balanceOf 方法并在 tokenOwner 輸入框中填入查詢的地址，點擊 Query Data 按鈕可以查詢到賬戶的余額。

查看 Sent 事件

選擇 Sent 事件并點擊 Query Data 可以查詢到轉賬操作所觸發的轉賬事件的記錄。

前端項目解析

項目使用 React 進行開發。主要由三大部分組成：視圖組件、js-conflux-sdk 以及 Conflux Portal。

項目根目錄下的 .env 環境變量，在這里定義了兩個環境變量，分別為

• REACT_APP_CONFLUX_NODE_RPC：Conflux 的網絡節點地址，目前默認為 Oceanus 網絡的地址
• REACT_APP_CONFLUX_COIN_ADDRESS：已部署的 Coin 智能合約地址

視圖組件

視圖組件在項目的 src/components 中，其中 App.js 為頁面的主入口，負責頁面的排列及合約信息的讀取。

ConfluxNetwork.js

負責渲染 Conflux 網絡信息，Node URL 的值為 .env 環境變量文件下的 REACT_APP_CONFLUX_NODE_RPC 設置的值（默認為 Oceanus 網絡）。

ConfluxPortal.js

負責渲染 Conflux Portal 的連接信息，并提供了連接 Conflux Portal 的交互按鈕。

• connectConfluxPortal 調用 Conflux Portal 的 enable 方法啟用 conflux （conflux portal 實例由瀏覽器插件注入到 windows.portal 中），完成 enable 后調用 getAccount 方法獲取到 Portal 中的賬戶。
• refreshBalance 調用 Conflux SDK 的 getBalance 方法來更新賬戶余額信息
• renderPortalButton 根據當前不同的狀態，渲染連接 Portal 的按鈕

ConfluxContract.js

負責渲染 Conflux 合約信息，本項目中提供了 Coin 和 SponsorWhitelistControl 兩個合約。

ConfluxContract.js 由三個組件組成，分別為：

• ConfluxContract 負責根據傳入的合約 abi 來渲染合約的信息，包括合約地址、合約方法和事件，合約提交的交互邏輯及顯示執行后的結果
• ContractMethods 負責渲染合約 abi 中的方法和事件的表單及相對應的按鈕
• ConfluxForm 負責根據方法或事件的 abi 來渲染輸入表單

lib

lib 在項目的 src/lib 中，這里的文件主要是為視圖提供包括連接網絡、構造交易、獲取賬戶、讀取合約等服務。

conflux.js

conflux.js 是 js-conflux-sdk 的封裝。js-conflux-sdk 是由 Conflux 提供的 JavaScript SDK，本前端項目使用 SDK 來連接 Conflux 網絡，和合約進行交互以及構造合約中的實例。

conflux-portal.js

conflux-portal.js 是 Conflux Portal 的封裝，本前端項目通過調用瀏覽器插件來完成交易的簽名。調用 Conflux Portal 提供的 enable 方法可以啟動項目和 Conflux Portal 的連接（需要提前檢查瀏覽器是否正確安裝插件，在 constructor 中通過檢查 window.conflux 是否為空來判斷）。conflux-portal.js 提供了獲取賬戶 getAccount 和發送交易 sendTransaction 兩個主要的方法。

abi

lib/abi 文件夾下提供了兩個 json 文件，分別為 Coin.json 和 SponsorWhitelistControl.json，這兩個文件是構造合約所需要使用的 abi 文件。

總結

在本開發教程中，我們學習了如何使用 Conflux Studio 來完成一個完整的 Coin DApp 開發，其中包括了：

• 使用鑰匙對管理器創建賬戶及導出賬戶私鑰
• 切換 Oceanus 網絡，查看網絡信息
• 賬戶申請 CFX Token
• 創建、編譯并部署項目
• 解析 Coin 合約代碼，學習如何編寫合約的讀寫方法及事件
• 使用合約瀏覽器調用 Coin 合約的代幣增發、轉賬、查詢余額及查詢事件
• 設置并使用智能合約的代付功能
• 將私鑰導入 Conflux Portal 并連接前端項目
• 在前端項目中調用 Coin 合約的代幣增發、轉賬、查詢余額及查詢事件
• 解析前端項目代碼，學習如何通過 Conflux Portal 和 Conflux JavaScript SDK 連接網絡并實現交易

關于 Conflux Bounty

Conflux 基金會為了鼓勵用戶參與生態建設，提供了 Conflux Bounty 賞金平臺。通過完成 Bounty 賞金平臺發布的各項任務，參與者可以獲得 FC (Fans Token) 作為獎勵。

FC 的價值

FC，全稱 Fans Coin，是由 Conflux 基金會與社區成員共同研發的生態代幣，用于記錄和感謝對 Conflux 生態建設做出貢獻的社區成員。FC 目前在 Oceanus 上運行，Conflux 基金會承諾，在主網上線后，鎖定和未鎖定的 FC 都可以與主網 CFX 進行 1:1 承兌，以此保障所有社區成員的勞動成果都可以獲得獎勵。

FC 賞金分配方案會展示在賞金任務詳情頁中，包括最高獎金數量、獎金分配人數、獎金數量分布、排行名次確定方式等信息。賬號余額中的賞金獎勵可以隨時申請提現至 Conflux 錢包。Conflux 團隊會對所有的提現申請進行審核。

對于已經通過的提現申請，Conflux 團隊會在每周二中午 12 點（如遇節假日，往后順延至下一個工作日）進行提幣操作。完成提幣操作后，您的 Conflux 錢包將會收到您提現的賞金獎勵。

Bounty 的價值

Conflux Bounty (https://bounty.conflux-chain.org) 的宗旨是為每一個通證找到價值。Bounty 分為幾個板塊：技術、品牌、社群、資源、其他等。

• 技術板塊：分為產品、SDK、教程、開發、測試等；主要是獎勵社區的一些技術資源貢獻者。
• 品牌板塊：分為文案、設計、視頻、媒體、推廣等；主要是獎勵在各大網絡平臺分享 Conflux 的各種最新動態，擴大 Conflux 的生態影響力的活躍貢獻者；
• 社群板塊：分為活動、推廣等；主要是獎勵舉辦各種 Conflux 相關線上線下活動，幫助解答社群問題，活躍日常氣氛等。
• 資源板塊：分為政務、商務、人力等；主要是獎勵為生態中引進企業資源，擴建Conflux 生態等。
• 其他板塊：分為周邊、采購等；主要是獎勵一些其他的零散任務。

關于 Obsidian Labs

黑曜石實驗室（Obsidian Labs) 是全球最大的區塊鏈開發工具（IDE）提供商，也是 Conflux Studio 的開發團隊，致力于為區塊鏈開發者提供必備的工具及服務，幫助鏈上應用生態快速發展。目前，除了 Conflux Studio 外，Obsidian Labs 還為 EOS、Nervos、Substrate、Alogorand 等明星項目提供了專屬的 IDE 和框架工具。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
原文鏈接：https://blog.csdn.net/weixin_45029854/article/details/107638406
作者：Sam @黑曜石實驗室
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

web3.js是以太坊提供的一個Javascript庫，它封裝了以太坊的JSON RPC API，提供了一系列與區塊鏈交互的Javascript對象和函數，包括查看網絡狀態，查看本地賬戶、查看交易和區塊、發送交易、編譯/部署智能合約、調用智能合約等，其中最重要的就是與智能合約交互的API。

下面就介紹如何使用web3.js提供的接口調用智能合約。

系統和軟件

    


        


            


            

        

        


            

                Ubuntu 16.04 64位
            

        

    

    


        


            


            

        

        


            

                nodejs 6.10.0
            

        

    

    


        


            


            

        

        


            

                npm 3.10.10
            

        

    

示例合約

本文以下面的MetaCoin合約為例，說明在應用中使用web3.js操作智能合約的方法。

    


        


            


            

        

        


            

                // 本文中用到的MetaCoin合約
            

        

    

    


        


            


            

        

        


            

                pragma solidity ^0.4.2;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                contract MetaCoin {
            

        

    

    


        


            


            

        

        


            

                mapping (address => uint) balances;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                event Transfer(address indexed _from, address indexed _to, uint256 _value);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function MetaCoin() {
            

        

    

    


        


            


            

        

        


            

                balances[tx.origin] = 10000;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function sendCoin(address receiver, uint amount) returns(bool sufficient) {
            

        

    

    


        


            


            

        

        


            

                if (balances[msg.sender] < amount) return false;
            

        

    

    


        


            


            

        

        


            

                balances[msg.sender] -= amount;
            

        

    

    


        


            


            

        

        


            

                balances[receiver] += amount;
            

        

    

    


        


            


            

        

        


            

                Transfer(msg.sender, receiver, amount);
            

        

    

    


        


            


            

        

        


            

                return true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function getBalance(address addr) returns(uint) {
            

        

    

    


        


            


            

        

        


            

                return balances[addr];
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

這個合約有三個函數：

MetaCoin：構造函數，在合約被部署到區塊鏈時執行 
getBalance：返回某賬戶的余額，它只讀數據，不會修改數據 
sendCoin：向另一個賬戶發送指定數量的MetaCoin，它會改變狀態變量balances 
啟動一個以太坊節點，將上面的合約部署到區塊鏈中，并記錄下合約的地址，可以通過truffle部署，具體參考這篇文章。 接下來就可以按照下面的步驟在項目中通過web3.js來使用這個合約。

添加web3到項目中

首先新建一個Nodejs項目并初始化：

    


        


            


            

        

        


            

                $ mkdir web3test && cd web3test
            

        

    

    


        


            


            

        

        


            

                $ npm init
            

        

    

會提示輸入項目信息，全部默認即可。 
接下來下載web3.js到項目中：

$ npm install web3 --save 

• 1
• 2

以上命令會將web3.js下載到web3test/node_modules目錄下，其中–save參數會web3.js添加到package.json配置文件中。

創建web3對象

要使用web3.js與區塊鏈交互，需要先創建web3對象，然后連接到以太坊節點。 在web3test目錄下新建index.js文件，在其中輸入以下代碼：

    


        


            


            

        

        


            

                var Web3 = require("web3");
            

        

    

    


        


            


            

        

        


            

                // 創建web3對象
            

        

    

    


        


            


            

        

        


            

                var web3 = new Web3();
            

        

    

    


        


            


            

        

        


            

                // 連接到以太坊節點
            

        

    

    


        


            


            

        

        


            

                web3.setProvider(new Web3.providers.HttpProvider("http://localhost:8545"));
            

        

    

獲取已部署的合約實例

要使用智能合約，必須先從區塊鏈中獲取到合約實例，獲取合約實例需要合約的ABI和合約的地址：

    


        


            


            

        

        


            

                // 合約ABI
            

        

    

    


        


            


            

        

        


            

                var abi = [{"constant":false,"inputs":[{"name":"receiver","type":"address"},{"name":"amount","type":"uint256"}],"name":"sendCoin","outputs":[{"name":"sufficient","type":"bool"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"addr","type":"address"}],"name":"getBalance","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"inputs":[],"payable":false,"type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_from","type":"address"},{"indexed":true,"name":"_to","type":"address"},{"indexed":false,"name":"_value","type":"uint256"}],"name":"Transfer","type":"event"}];
            

        

    

    


        


            


            

        

        


            

                // 合約地址
            

        

    

    


        


            


            

        

        


            

                var address = "0xb2cdd356e58280906ce53e1665697b50f88aac56";
            

        

    

    


        


            


            

        

        


            

                // 通過ABI和地址獲取已部署的合約對象
            

        

    

    


        


            


            

        

        


            

                var metacoin = web3.eth.contract(abi).at(address);
            

        

    

metacoin就是獲取到的合約對象實例，此時metacoin對象中就包含了與合約函數同名的Javascript函數，之后就可以通過metacoin對象來調用合約中的函數了。

調用合約函數

MetaCoin合約中有兩個函數：getBalance和sendCoin，可以通過metacoin對象直接調用這兩個函數。

首先來看getBalance，由于getBalance函數只是從區塊鏈中讀數據，而不修改數據，因此我們通過在getBalance后面加上.call()的方式調用：

    


        


            


            

        

        


            

                var account_one = web3.eth.accounts[0];
            

        

    

    


        


            


            

        

        


            

                var account_one_balance = metacoin.getBalance.call(account_one);
            

        

    

    


        


            


            

        

        


            

                console.log("account one balance: ", account_one_balance.toNumber());
            

        

    

這里：

在getBalance后加上.call()來顯式指明用call的方式調用 
通過call的方式調用可以得到getBalance函數的返回值 
通過call的方式調用的函數只在節點本地虛擬機中執行，不會產生交易，不會花費費用，不會修改數據 
下面來看sendCoin函數，由于sendCoin要修改合約內部的數據，所以要使sendCoin生效，必須要向區塊鏈發送交易，可以在sendCoin后面加上.sendTransaction()來指明這是一筆交易：

    


        


            


            

        

        


            

                var account_one = web3.eth.accounts[0];
            

        

    

    


        


            


            

        

        


            

                var account_two = web3.eth.accounts[1];
            

        

    

    


        


            


            

        

        


            

                // 提交交易到區塊鏈，會立即返回交易hash，但是交易要等到被礦工收錄到區塊中后才生效
            

        

    

    


        


            


            

        

        


            

                var txhash = metacoin.sendCoin.sendTransaction(account_two, 100, {from:account_one});
            

        

    

    


        


            


            

        

        


            

                console.log(txhash);
            

        

    

這里：

在sendCoin函數后加上.sendTransaction()指明要向區塊鏈發送交易 
合約代碼中sendCoin函數只有兩個參數，而在web3中通過.sendTransaction()調用合約函數的時候需要增加最后一個參數，它是一個javascript對象，里面可以指定from/value/gas等屬性，上面的例子用from來指定交易的發送者 
上面的調用語句執行后，會向區塊鏈提交一筆交易，這筆交易的發送者是account_one，接收者是metacoin的地址，交易的作用是以account_two和100作為參數執行合約的sendCoin函數 
函數會立即返回交易的hash，表明交易已經提交到區塊鏈，但是并不知道交易何時處理完成，交易要等到被曠工收錄到區塊中后才會生效 
監聽合約事件

當通過.sendTransaction()調用合約的時候，交易會被提交到區塊鏈進行處理，這個處理需要一定的時間，如果需要等交易完成之后再執行其他操作，就必須要知道交易何時完成，那么如何知道交易何時完成呢？可以通過監聽合約事件來實現。

在合約中可以定義事件，事件可以帶有參數，在合約函數內部完成某些操作時，可以觸發事件，向外界傳達一些信息。例如，在MetaCoin合約中定義了一個事件叫做Transfer，表示一個轉賬的事件，它帶有三個參數：交易的發送者、接受者、轉賬數量。在sendCoin函數中，轉賬成功后就會觸發Transfer事件，將對應的參數傳給該事件，這樣外部監聽到事件后，可以取出事件的參數來獲得交易發送者、接收者、數量。同時事件中還帶有其他信息，比如交易hash等。

在web3中使用事件，要首先獲取事件對象，然后監聽事件，如果事件發生，就會在回調函數中獲取到事件信息：

    


        


            


            

        

        


            

                // 獲取事件對象
            

        

    

    


        


            


            

        

        


            

                var myEvent = metacoin.Transfer();
            

        

    

    


        


            


            

        

        


            

                // 監聽事件，監聽到事件后會執行回調函數
            

        

    

    


        


            


            

        

        


            

                myEvent.watch(function(err, result) {
            

        

    

    


        


            


            

        

        


            

                if (!err) {
            

        

    

    


        


            


            

        

        


            

                console.log(result);
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                console.log(err);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                myEvent.stopWatching();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 輸出：
            

        

    

    


        


            


            

        

        


            

                { address: '0xb2cdd356e58280906ce53e1665697b50f88aac56',
            

        

    

    


        


            


            

        

        


            

                blockNumber: 651,
            

        

    

    


        


            


            

        

        


            

                transactionIndex: 0,
            

        

    

    


        


            


            

        

        


            

                transactionHash: '0xcc71bc2824cc84d1ee831c46189e3a80cf0af05697ba0370693aa97390c8067b',
            

        

    

    


        


            


            

        

        


            

                blockHash: '0x1d53f04206f3926d0f311b1230a9dd0b0c5aadac35b169a6a609e384ab130c6f',
            

        

    

    


        


            


            

        

        


            

                logIndex: 0,
            

        

    

    


        


            


            

        

        


            

                removed: false,
            

        

    

    


        


            


            

        

        


            

                event: 'Transfer',
            

        

    

    


        


            


            

        

        


            

                args:
            

        

    

    


        


            


            

        

        


            

                { _from: '0x68b73956d704007514e9257813bdc58cdf3c969a',
            

        

    

    


        


            


            

        

        


            

                _to: '0x9c3c1a2f5ef913fac44f0348a78f68d835f3f26e',
            

        

    

    


        


            


            

        

        


            

                _value: { [String: '100'] s: 1, e: 2, c: [Object] } } }
            

        

    

從輸出可以看出，獲取到的事件信息包括事件的參數、事件名、區塊號、交易hash等。

通過檢測事件中的transactionHash與調用合約函數返回的交易hash是否一致，可以判定某一筆交易是否已完成：

    


        


            


            

        

        


            

                var account_one = web3.eth.accounts[0];
            

        

    

    


        


            


            

        

        


            

                var account_two = web3.eth.accounts[1];
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var account_one_balance = metacoin.getBalance.call(account_one);
            

        

    

    


        


            


            

        

        


            

                console.log("account one balance:", account_one_balance.toNumber());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var txhash = metacoin.sendCoin.sendTransaction(account_two, 100, { from: account_one });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var myEvent = metacoin.Transfer();
            

        

    

    


        


            


            

        

        


            

                myEvent.watch(function (err, result) {
            

        

    

    


        


            


            

        

        


            

                if (!err) {
            

        

    

    


        


            


            

        

        


            

                if (result.transactionHash == txhash) {
            

        

    

    


        


            


            

        

        


            

                var account_one_balance = metacoin.getBalance.call(account_one);
            

        

    

    


        


            


            

        

        


            

                console.log("account one balance after sendCoin:", account_one_balance.toNumber());
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                console.log(err);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                myEvent.stopWatching();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 輸出：
            

        

    

    


        


            


            

        

        


            

                account one balance: 7000
            

        

    

    


        


            


            

        

        


            

                account one balance after sendCoin: 6900
            

        

    

watch中的回調函數如果被執行，說明事件已被觸發，也就是說某筆交易已經處理完，檢查交易hash是否一致，可以判定產生這個事件的交易是否是自己發送的交易，如果是，就可以進行其他操作，比如查詢最新的余額

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

這篇文章多看幾遍加深理解

async function 聲明定義了一個異步函數，它返回一個AsyncFunction對象。異步函數 是指通過 事件循環（event loop） 異步執行的函數，通過返回一個隱式的 Promise 作為其結果。使用異步函數的代碼的語法和結構更像使用標準同步功能。（The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.
）

語法

async function name([param[, param[, ... param]]]) { statements } 


    

        1
    

參數：

• name：函數名稱
• param：要傳遞給函數的參數。
• statements：函數體語句。

返回值：返回一個promise對象，將返回異步函數返回的值（如果異步函數是resolved則返回resolved的值；如果拋出異常，則rejected從異步函數中拋出的異常）。（A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.）

異步函數可以包含await表達式，該表達式暫停異步函數的執行 并等待 Promise的執行結果返回，結果返回后就恢復異步函數的執行。

await 關鍵字只在異步函數（async functions）內有效。如果在異步函數外使用它，會拋出語法錯誤。
當異步函數暫停時，它調用的函數仍會繼續執行。

舉例一：

function resolveAfter5Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 5000); }); } async function asyncCall() { console.log('calling'); let result = await resolveAfter5Seconds(); console.log(result); // 5s之后輸出結果 } asyncCall(); //返回的是一個promise對象 // console.log(asyncCall()); // Promise { <pending> } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

運行效果：

舉例二：

let resolveAfter6Second = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Second = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let sequentialStart = async function () { console.log('sequential start'); const slow = await resolveAfter6Second(); console.log(slow); const fast = await resolveAfter4Second(); console.log(fast); } sequentialStart() //立即輸出 // sequential start // start slow promise //再過6秒后輸出 // slow promise is done // slow // start fast promise //再過4秒后輸出 // fast promise is done // fast 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

運行效果：

換一種await的寫法，結果完全不同：兩個計時器被同時創建

let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let concurrentStart = async function () { console.log('concurrent start'); let slow = resolveAfter6Seconds(); let fast = resolveAfter4Seconds(); console.log(await slow); console.log(await fast); } setTimeout(() => { concurrentStart(); }, 2000); //2秒后執行 // concurrent start // start slow promise // start fast promise //再過4秒后執行 // fast promise is done //再過2秒后執行 // slow promise is done // slow // fast 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

運行效果：

在 concurrentStart 中，兩個計時器被同時創建，接著執行await。等待的是 promise的resolve回調，resolve后面的代碼（ console.log(‘fast promise is done’);）會繼續執行。
這兩個計時器同時運行。但是 await 仍舊是順序執行的，第二個 await 還是得等待第一個執行完。在這個例子中，這使得先運行結束的輸出出現在最慢的輸出之后。
也可以把 concurrentStart 改寫成如下，運行效果一樣：

let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let concurrentPromise = async function () { console.log('concurrent start'); return Promise.all([resolveAfter6Seconds(), resolveAfter4Seconds()]).then((messages) => { console.log(messages[0]); // slow console.log(messages[1]); // fast }); } setTimeout(() => { concurrentPromise(); }, 2000); //2秒后輸出 // concurrent start // start slow promise // start fast promise //再過6秒后輸出 // fast promise is done //再過2秒后輸出 // slow promise is done // slow // fast 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

并行執行兩個或更多的任務，如下例所示：

let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let parallel = async function () { console.log('start paralel'); await Promise.all([ (async () => console.log(await resolveAfter6Seconds()))(), (async () => console.log(await resolveAfter4Seconds()))() ]); } setTimeout(parallel, 2000); //2秒后輸出 // start paralel // start slow promise // start fast promise //再過4秒后輸出 // fast promise is done // fast //再過2秒后輸出 // slow promise is done // slow 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

運行效果：

如果希望并行執行兩個或更多的任務，你必須像在parallel中一樣使用await Promise.all([job1(), job2()])

也可以把parallel改寫成如下，運行效果一樣：

let resolveAfter6Seconds = function(){ console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }); } let resolveAfter4Seconds = function(){ console.log('start fast promise'); return new Promise(resolve =>{ setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let parallelPromise = function(){ console.log('parallelPromise start'); resolveAfter6Seconds().then(msg => console.log(msg)); resolveAfter4Seconds().then(msg => console.log(msg)); } setTimeout(() => { parallelPromise(); }, 2000); //2秒后輸出 // parallelPromise start // start slow promise // start fast promise //再過4秒后輸出 // fast promise is done // fast //再過2秒后輸出 // slow promise is done // slow 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

async/await和Promise#then對比以及錯誤處理：
大多數異步函數（async functions ）也可以使用 Promises函數 編寫。然而，當涉及到錯誤處理時，異步函數不太容易出錯。
上面例子中的concurrentStart函數和concurrentPromise函數在功能上都是等效的。在concurrentStart函數中，如果任一awaited調用失敗，它將自動捕獲異常，異步函數執行中斷，并通過隱式返回Promise將錯誤傳遞給調用者。
在Promise例子中這種情況同樣會發生，函數必須負責返回一個捕獲函數完成的Promise。在concurrentPromise函數中，這意味著它從Promise.all([]).then()中返回一個Promise。事實上，在此示例的先前版本忘記了這樣做！
但是，async函數仍有可能然可能錯誤地忽略錯誤。
以parallel異步函數為例。 如果它沒有等待await（或 return）Promise.all([])調用的結果，則不會傳播任何錯誤。
雖然parallelPromise函數示例看起來很簡單，但它根本不會處理錯誤！ 這樣做需要一個類似于return Promise.all([])處理方式。（詳見）

使用async函數重寫 promise 鏈

返回 Promise的 API 將會產生一個 promise 鏈，它將函數分解成許多部分。例如下面的代碼：

function getProcessedData(url) { return downloadData(url)// returns a promise .catch(e => { return downloadFallbackData(url);// returns a promise }) .then(v => { return processDataInWorker(v);// returns a promise }) } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

可以重寫為單個async函數：

async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch (e) { v = await downloadFallbackData(); } return processDataInWorker(v); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

在上述示例中，return 語句中沒有 await 操作符，因為 async function 的返回值將被隱式地傳遞給 Promise.resolve。

return await promiseValue; 與 return promiseValue;的比較

返回值隱式的傳遞給Promise.resolve，并不意味著return await promiseValue;，只是在功能上等同于返回return promiseValue;。
重寫的上面代碼，在processDataInWorker拋出異常時返回null：

async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch(e) { v = await downloadFallbackData(url); } try { return await processDataInWorker(v); // 注意 `return await` 和單獨 `return` 的比較 } catch (e) { return null; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

簡單地寫上return processDataInworker(v);將導致在processDataInWorker(v)出錯時function返回值為Promise而不是返回null。

return foo;和return await foo;有一些細微的差異：
return foo;不管foo是promise還是rejects都將會直接返回foo。相反地，如果foo是一個Promise，return await foo;將等待foo執行(resolve)或拒絕(reject)，如果是拒絕，將會在返回前拋出異常。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

一套完善的產品化設計系統，可以解決內部協作的一致性問題，解決設計系統更新的周期性問題，解決一群設計師與工程師如何規模化的生產各種業務、UI的問題，從而最終解決用戶體驗一致性的問題。說到自己，公司的產品從接手開始便是以antdesign作為前端框架，所以很多人會說后臺用antdesign、Element或者Taro的框架就足夠了呀，當然不～在已有的成熟框架下，也并不能完全滿足產品日（sang）益（xin）旺（bing）盛（kuang）的需求，所以設設計規范還是很有必要的。

作為B端設計師，視覺表現層面權重逐漸減少，更多的是需要梳理邏輯流程，將線下業務更好的梳理到線上流程，所以熟知設計規范可以更效率的完成工作。

設計規范的目的：

1、解決內部協作的一致性問題

為設計師內部溝通協作起到決定作用，當同一個項目存在多個設計師橫向設計的時候，設計規范會避免顏色錯誤、間距失調、控件混亂等問題。

2、解決設計系統更新的周期性問題

隨著產品的不斷推進和發展，為了新增的需求和不斷優化的用戶體驗，這時候會需要對某些規范控件進行調整，在有設計規范的情況下，可以迅速對接開發快速全局調整控件，極大的提升了設計和開發的工作效率。

3、解決設計師與工程師如何規?；纳a各種業務

關于和開發對接，圖標在如今有了iconfont的項目管理下，項目可以建立自己的圖標庫。再加上設計建立的可復用的公共控件庫，開發可以更加快捷的復用控件，減少返工率，也為后期的修改降低開發成本。

關于建立后臺設計規范：

首先要了解項目適用的主要場景，也就是用戶爸爸一般是在什么情況下用什么樣的設備來進行操作的，然鵝你永遠不知道會有什么的場景和什么樣奇葩的設備在等待你。在后臺的設計群一直有一個經久不衰的話題，那就是后臺設計的設計分辨率是向下適配還是向上適配更合適（是1980*1080 還是 1440*900 ），這兩者都是可以的，本案由于用戶使用筆記本的情況居多，且設備并不是很新所以采用1440*900的分辨率向上適配1980向下適配1200。
在清楚的了解到項目背景之后，開始著手于設計規范的建立，這里關于設計規范的建立是隨著設計的不斷深入從而不斷完善的，不必刻意深入，但是要隨時更新規范文檔。

關于頁面構成

開發與設計所理解的頁面是不一樣的，所以會造成開發出來的頁面有時候會因為各種原因與高保真相差較大，在設計看來（比如sketch），一個頁面是由多個組結合而來，每個組里包含一個或多個字段、圖片和圖標等，在調整大小、間距、顏色之后慢慢成為高保真。而在開發的角度來看，整個頁面就是由多個box構成，盒子與盒子之間存在空白間隔，且盒子存在一定的屬性，例如盒子默認對齊于左上，盒子之間相互嵌套或覆蓋需要基于所屬盒子來定位。

顏色

根據品牌背景和產品定位來確定你的品牌色，用于字體、icon、按鈕、插畫等業務流程。功能色則是為特殊場景，例如失敗、成功、提醒等情況。

字體

通過購買商用字體或使用免費字體來使用，如果選用免費字體同時也要注意區分系統，通常情況下mac系統使用默認字體蘋方字體，windows系統使用微軟雅黑。如今免費等字庫已經越來越多了，所以這對設計師來說是一個好消息，今年阿里也在UCAN上公布了普惠體，年尾oppo也推出了自己的免費字體，文章末尾附上群友整理的免費字體導圖。

邊角

倒角的使用可以起到樣式的區分，從而讓用戶感知到功能區域的分別。

圖標

快速幫助用戶理解產品并順利完成操作，好的圖標具有高度濃縮并快捷傳達、便于記憶的特性，能夠更好的傳達品牌特性。

陰影

陰影的添加可以更好的提高界面品質，讓用戶易于區分功能區域

按鈕

按鈕是傳達它將要發起動作的載體。 用戶可以點擊一個按鈕來開始一個過程或工作流程，或觸發一個動作。

用法：

1、要傳達重要的行動。如：提交表單；

2、要導航到另一個屏幕，觸發一個模式或啟動一個動作。如：在進程中指定新的動作或模式；

3、按鈕上的文本應保持簡潔，帶著明確、可操作的動詞，例如：注冊、下一步、下載 ；

4、優先考慮最重要的行動。行動號召太多會引起混亂，并使用戶不知道下一步該做什么。

選擇輸入框

如無特殊需求，則默認采用框架內輸入框，特殊情況可同研發一起討論修改。這邊因為一些特殊原因，在修改了代碼的情況下實現了標題、選擇、輸入同時在框架內，這樣為寸土寸金的后臺界面留出了更多的空間。

表格

表格在后臺系統中無處不在，對數據管理和分析起到了重要的作用，方便用戶閱讀，分析和比較數據。表格一般由表頭、表尾、數據單元格組成。

模態/非模態彈窗

用戶交互的兩種方式，模態彈窗強制交互完成當前操作流程，非模態則是弱提示。

缺省狀態

缺省頁是指操作異常狀態下給予用戶反饋的提示頁面，它的作用不僅是提醒用戶，安撫情緒；更重要的是用“空白”觸發用戶的操作行為，營造良好用戶體驗。

結語

以上是我對于設計規范的部分總結，還有很多沒有涉及到，包括非常重要的可視化部分，可以多了解一下ECharts（https://www.echartsjs.com/zh/index.html），然后希望可以和大家互相學習。設計規范的建立是長征的第一步，貫徹執行才是根本，在B端龐大的設計系統中，我們需要維護好產品的組件庫，不斷的完善用戶體驗和清晰的梳理線上業務，保證產品的功能需求才是重中之重。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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