過去一年，一些新詞頻繁在行業中出現。諸如“元宇宙是什么？NFT能賺錢嗎？AIGC前景在哪里？虛擬數字人怎么帶貨？XR有未來嗎”這樣的問題，不斷被提及和討論。

或許是因為行業內卷帶來的焦慮，很多人渴望在新世界中尋求紅利，發掘機會，2022年也確實涌現出不少新行業、新趨勢。

今天，新榜編輯部篩選出去年最值得關注的6大行業新趨勢，希望能和各位一起回顧2022，展望2023。

01 熱鬧非常的元宇宙

以Meta為代表，元宇宙堪稱2022年最火的商業概念之一。

自2021年10月將Facebook更名為Meta，雖然飽受質疑，但扎克伯格對元宇宙的投入堪稱堅決。有報道稱Meta2022年在元宇宙上的研發投入高達百億美元。

2022年1月18日，微軟宣布以687億美元收購動視暴雪，希望為微軟構建元宇宙打下基礎。據麥肯錫公司估計，2022年前五個月，企業、私募股權公司和風險資本家共進行了總額高達1200億美元的元宇宙相關投資。

而在國內，更是呈現出一片熱鬧景象。

城市方面，除了上海發布《上海市培育“元宇宙”新賽道行動方案（2022—2025年）》外，深圳、成都、杭州等城市也有元宇宙相關規劃或園區布局。

圖源：上海市人民政府

大廠方面，騰訊上線“超級QQ秀”，字節上線“派對島”，快手內測基于“附近同城”的虛擬形象社交，抖音上線虛擬空間“抖音小窩”，芒果上線元宇宙平臺“芒果幻城”，映客更是宣布更名“映宇宙”，要全面進軍元宇宙。

騰訊的“超級QQ秀”和字節的“派對島”

2022年11月17日，B站董事長陳睿談及“B站元宇宙構想”時曾稱B站是中國最適合去實現“元宇宙”概念的公司之一。

但熱鬧非常的元宇宙也飽受質疑。在擁護者看來，元宇宙會是下一代互聯網，被稱為“元宇宙第一股”的沙盒游戲平臺Roblox還總結了元宇宙的八大要素：身份、朋友、沉浸感、低延遲、多元化、隨時隨地、經濟系統和文明。

但在質疑者看來，元宇宙只不過是一次舊技術的拼接，是一個營銷游戲。中國工程院院士鄔賀銓認為，元宇宙不會是下一代互聯網。元宇宙是現代信息技術的集成，它涉及5G、IP網、云計算、人工智能、虛擬現實、區塊鏈、數字貨幣、物聯網、人機交互等，要滿足元宇宙的技術需要，幾年之內還不太可能。

2022年2月11日，元宇宙社交App“啫喱”曾一度超過微信、QQ，登上AppStore第一，但爆火3天后，就宣布主動下架。同年10月，字節的同類產品“派對島”，同樣在上線3個月后宣布裁撤團隊；8月底，號稱要成為“元宇宙時代的微軟”的影創科技被曝欠薪200多人。

同年8月中旬，扎克伯格曾發布自己的一張虛擬自拍照，結果遭全網群嘲。截至當前，Meta已經連續第四個季度利潤下滑。

不過就在2022年12月19日，Meta發布博客《為什么我們仍然相信未來》，表示將繼續把20%的支出用于投資VR部門Reality Labs，這是他們元宇宙計劃不可或缺的一部分。

顯然，扎克伯格始終堅信元宇宙會是未來。

我們認為，受限于技術，類似頭號玩家那樣的全真元宇宙仍然非常遙遠，但聚焦工業、娛樂等特定領域的元宇宙產品已開始初步落地。2023年，元宇宙也許能出現更具想象力的產品。

02 突飛猛進的AIGC

2022年或許可以說是AIGC元年。

AIGC（AI-Generated Content，人工智能生成內容）按照模態區分，可分為音頻生成、文本生成、圖像生成、視頻生成等細分領域，以及文字生成圖片、文字生成視頻等跨模態生成。

引起熱議的AI繪畫獲獎作品《太空歌劇院》

很多人是從2022年爆火的AI繪畫開始了解AIGC的：4月Midjourney內測，7月Stable Diffusion橫空出世，10月二次元模型NovelAI走紅，11月無數人試圖馴服AI繪畫小程序，層出不窮的AI工具讓人們看到了AI在藝術創作方面蘊藏的巨大潛力，同時也引起了猛烈的質疑和抗議：關于版權與道德，關于公平、安全、責任，關于人類和機器之間的關系。（相關閱讀：《不明覺厲的AI繪畫，對內容創作者來說有什么用？》《千萬網友試圖馴服的AI繪畫，背后誰在賺錢？》）

到了2022年年底，對話式AI語言模型ChatGPT驚艷了海內外網友，它像人一樣可以連續對話，幫助人們寫作、寫代碼、回答一些常識性、生活性問題等，盡管有時會一本正經地胡說八道，但AI生成內容的能力已經突破我們的想象。（相關閱讀：《刷屏的ChatGPT能幫自媒體人寫稿嗎？我們幫你試了試》《27個問題，讓新晉懂王ChatGPT教我做網紅》）

從PGC到UGC再到AIGC，內容生產范式的改變是大趨勢，AI正在愈加滲透內容行業。

AIGC相關公司，圖源硅谷Leonis Capital

百度創始人李彥宏曾在2022年7月的百度世界大會上表示：“AIGC或許將顛覆現有內容生產模式，實現以‘十分之一的成本’，以百倍千倍的生產速度，去生成AI原創內容?！?

不過，目前國內的AIGC行業尚未進入大規模落地和體系化發展階段，仍處于發展初期，大力投入大模型研發和落地的主要以大型云廠商為主，還有一些將AI技術產品化的互聯網大廠和初創公司。除了存在算力成本高、技術不完善等難題外，C端用戶的付費意愿也比較有限。

相對來說，B端客戶的可發展空間較大，據Forrester預估，2023年財富五百大企業中將有1成通過AI工具創造內容，因為人工制作內容的速度永遠無法大規模滿足定制化內容需求。

圖片來源：西湖心辰創始人藍振忠在知乎的演講

2023年可能會有越來越多的企業和個人使用AI來提高內容生成效率，激發創作靈感。正如Stability AI的CTO Tom Mason在極客公園的大會上提到的：“生成式AI正在做的，就是讓消費者成為創作者，給他們創作他們自己消費的媒體內容的能力?！彼袛啵^文字生成圖像后，下一波浪潮肯定是視頻、音頻和3D。

03 目不暇接的虛擬數字人

相比元宇宙，虛擬數字人可能更“實在”一些，至少是已經可見的。

關于虛擬數字人，新榜編輯部曾在“虛擬人專欄”中推出系列文章：《造價從100元到100萬，虛擬人究竟是什么？》《90%玩家處在早期階段，虛擬人靠什么賺錢？》《虛擬人四大難題：技術、產品、市場、中之人》。

按照“技術炒作周期曲線”

虛擬數字人行業正處于期望頂峰期

一個普遍共識是，目前虛擬人行業仍處于早期階段，殺手級產品也尚未出現。也因此，去年虛擬人行業的一個主旋律是各類粉墨登場的虛擬數字人。

抖音方面，許安一、金桔2049等依靠直播成為了人氣網紅；快手方面，狐璃璃40天漲粉百萬，快手技術團隊還推出“快手虛擬演播助手KVS”；B站方面，海外虛擬主播vox的直播首秀，當晚直播1.7小時，營收達111萬元。

此外，蒙牛、雪花啤酒、長安汽車等品牌也相繼推出了自己的虛擬代言人。

虛擬數字人背后，則是動作不斷的虛擬數字人公司、平臺。

李未可科技、魔琺科技等相繼完成融資，前者由字節獨家投資，后者則由紅杉中國等投資機構投資，B輪、C輪融資總金額達1.3億美元。

百度除發布AI數字人希加加外，百度智能云曦靈還推出了兩大SaaS平臺“數字明星運營平臺1.0”及“數字人直播平臺2.0”，不斷加碼虛擬數字人基建。

2022年6月8日，日本知名虛擬主播事務所彩虹社成功登陸資本市場，成為VTuber界首家上市公司。在其招股書上，B站位列第三大股東。

企查查數據顯示，截至2023年1月初，國內虛擬人/虛擬偶像相關現存企業近5千家，其中2022年共新注冊1300余家，同比增長超25%。

政策方面同樣傳來利好消息。《北京市促進數字人產業創新發展行動計劃（2022—2025 年）》《虛擬現實與行業應用融合發展行動計劃（2022-2026年）》等政策相繼發布，虛擬數字人價值得到肯定。

目前，業內普遍相信虛擬數字人的價值，但受限于技術、運營，如何發揮其價值仍然存在不小的難題。

2022年5月10日，國內虛擬偶像團體A-SOUL成員珈樂宣布進入“直播休眠”狀態，引發粉絲極大不滿，也由此引發對中之人的相關討論。目前，市場對虛擬數字人的接受度仍是一個未知解。

截至目前，虛擬數字人已經嘗試了廣告、電商以及短視頻、直播等多種形式、場景的應用，但仍處于嘗鮮階段，未出現普遍性的成功案例。

合理推測，誰能率先實現技術突破，孵化出第一個現象級虛擬數字人IP，誰就能第一個吃到紅利。

04 更加大眾化的XR

歷經多年市場低迷期，2022年，基于XR的技術、設備和內容生態受到了越來越多的消費者關注。

XR（Extended Reality，擴展現實）是指通過計算機將現實與虛擬相結合，打造一個人機交互的虛擬環境，涵蓋虛擬現實（VR）、增強現實（AR）和混合現實（MR）等多種沉浸式技術。就像智能手機是移動互聯網的入口一樣，未來，XR設備被廣泛認為是元宇宙的重要入口。

12月，國產AR眼鏡Nreal的累計產量已達成10萬臺

Meta、蘋果、谷歌、三星、字節跳動、騰訊、華為、愛奇藝等國內外科技巨頭均有布局XR賽道。其中，Meta旗下VR產品Oculus系列在全球VR市場的占有量遙遙領先，字節跳動旗下的PICO系列位居全球第二，并在國內市場穩居第一。

XR設備雙11銷售榜單，圖源天貓

2022年下半年，PICO 4和Meta Quest Pro的發布又掀起了VR硬件的市場熱潮?？梢钥吹?，技術的進步帶動了消費體驗的提升，比如Pancake方案的規模化商用讓VR一體機變得更小巧，彩色透視讓VR向MR應用跨越。

PICO宣傳圖

PICO總裁周宏偉曾在接受采訪時表示，目前VR行業雖然產品硬件在每一代都有進步，但整體上還是處于比較早期的階段，用戶基數比較少，還有很大的發展空間，“現在的大環境不是你死我活的問題，是你活我活的問題”。

一直以來，XR領域的護城河并不是硬件，很大程度上需要優質的內容生態來推動設備普及。

目前VR設備的應用場景主要集中在游戲社交和影視直播。

作為最大的VR內容平臺，Steam截至2022年底已經有超7000款支持VR的游戲和應用。11月，PICO“輕世界”正式公測，提供各種3D場景創作工具和操作方式，希望開放生態讓更多玩家在VR世界里創作內容。但相對來說，國內的VR平臺內容生態還是略顯薄弱，首發、獨占內容較少，還處于“易落灰”的階段。（相關閱讀：《看完VR版世界杯總決賽，聊聊我對PICO 4的使用體驗》）

根據IDC全球增強現實和虛擬現實頭顯季度跟蹤報告的最新數據，2022年，全球VR頭顯和AR設備的出貨量下降12.8%，降至970萬臺，預計2023年將恢復增長。出貨量大降除了大環境的影響，XR產品本身及相關生態不夠完善仍是主要原因。

展望2023年，XR產業正在進入一個新的發展階段。蘋果MR設備、索尼PS VR2等更多新產品或將登場，各類應用場景也等待著創業者和用戶不斷發掘。隨著《虛擬現實與行業應用融合發展行動計劃（2022-2026年）》的發布，國內XR市場也迎來政策利好。

羅永浩曾提到，AR行業正處于一兩年后就能實現大規模商業化的節點，在科技巨頭大規模入場之前，目前正是創業公司入局的好時機。

我們認為，除了產品形態的創新，內容生態的建設可能才是接下來XR大眾化的關鍵，不僅是游戲，社交、辦公、健身、視頻、演唱會等多維度內容都需要共同發展，虛實之間，存在極大的發展機遇。

05 大起大落的數字藏品

背靠區塊鏈技術，數字藏品成為“元宇宙”概念下最快的變現途徑之一。

2021年底NFT在海外爆火，2022年國內以“數字藏品”之名對NFT進行了本土化改造，迎來了快速發展。據國家語言資源監測與研究中心，“數字藏品”入選2022年度十大新詞語。

數藏使用區塊鏈技術為作品生成相對應的數字憑證，具有可追溯、難以篡改、唯一性等特點。知名IP作品上鏈限量發售，既可以保護原創版權，又能用新概念進行營銷宣傳，具備稀缺性和收藏價值。數藏和NFT的主要區別在于國內數藏禁止加密貨幣炒作，不開放二級市場；以聯盟鏈為主，創作及定價方式由平臺方決定。

整體來看，數藏行業在2022年經歷了從爆發式增長到陷入寒冬的大起大落。

起初“萬物皆可數藏”，國內媒體、政府、互聯網平臺等多與文博、書畫、影視、藝術家合作發行數藏，明星名人也引領了一波數字時尚風潮。騰訊、阿里、百度、京東、B站、小紅書等新老大廠紛紛布局數字藏品，據不完全統計，國內大大小小的數藏平臺已經超過1000家。（相關閱讀：《B站UP主定制的數字藏品，誰來買單？》《從爆火到理性，數字藏品還值得創作者入局嗎？》）

圖片來源：元飛船數藏艦

空投、合成、白名單、IP賦能……火熱市場背后卻是一片炒作亂象。很快，監管部門相繼發布對數藏合規化的倡議。

2022年下半年，國內數藏市場虛假繁榮的泡沫開始顯現，不乏平臺暴雷、創始人“跑路”導致用戶維權等現象，頭部平臺的藏品也出現了滯銷情況。同年8月，騰訊幻核體面退場；10月~11月，至少有超過60家數藏平臺主動發布清退公告。

即使在國外，加密貨幣交易所FTX崩盤之前，NFT市場就已經受到加密寒冬的影響，截至2022年底，日交易量從近10億美元的高位下降到僅1800萬美元。

據速途元宇宙研究院，目前數字藏品熊市的原因是供需關系的反轉，“通貨膨脹”的藏品缺乏與用戶之間的聯系或附加權益，難以產生更多價值增量。

很多新事物在發展初期都不可避免地產生投機炒作現象，只有當行業回歸理性，虛火褪去后，數藏的價值才能真正顯現出來。

NFT和數藏是區塊鏈的新生產力發展帶來的生產關系創新變化，高樟資本告訴新榜編輯部，這種生產關系對于解鎖、賦能精神消費領域的生產力的作用是深遠的，他們仍然看好該市場未來的機會和空間。

數字藏品行業全景圖譜，圖源億歐智庫

2023年起，國家隊正式入場，全國首個國家級合規數字資產二級交易平臺——“中國數字資產交易平臺”于元旦上線。這標志著包括數字藏品在內的數字資產二級交易市場將迎來合規健康可持續發展階段。

在合規趨勢下，我們認為，數藏平臺會趨向細分化，比如與實體經濟的垂直領域進一步結合，或者融入AIGC，加強社區運營和賦能創作者生態，這些都是未來可能的發展方向。

06 缺乏共識的Web3.0

Web3.0在2022年的第一波熱度從一款游戲開始。

StepN，這款由浙大畢業生開發的Web3.0 App，曾在短短幾個月時間里就賣出了上百萬雙虛擬鞋，月收入一度超過1億美元。

財富效應之下，Web3.0成為2022年的顯學之一。

2022年1月，NFT市場OpenSea的月交易量超過50億美元；2月，紅杉資本宣布推出一支專注于投資Web3.0相關技術創業公司的基金，資金規模在5億至6億美元之間；11月，耐克宣布將推出一個新的Web3.0平臺Swoosh。目前，包括谷歌、Meta、阿里、騰訊等數十家大公司都開始探索Web3.0相關業務。

a16z在Web3.0的生態布局。圖源：36氪

如何抓住Web3.0的機會？第一步就是要搞清楚什么是Web3.0。這也是Web3.0在2022年的重要主題之一。

因為Web3.0涵蓋了區塊鏈、數字貨幣、智能合約、DAO、DeFi、SciTS、CeSMO、CMO、DeSci、DeSoc、DeEco等一系列復雜概念，時至今日，仍然沒人能給出一個服眾的定義。

目前傳播度最廣的Web3.0定義來自研究員Eshita：Web1.0的特征是“可讀”；Web2.0的特征是“可讀+可寫”；Web3.0的特征則是“可讀+可寫+擁有”。去中心化、確權、互聯互通則是在Web3.0的相關討論中最常出現的幾個關鍵詞。

但與此同時，特斯拉創始人馬斯克曾表示“我不認為Web3.0真實存在，現在更像是市場營銷的熱詞”，推特前首席執行官多爾西則認為“用戶并不實際擁有Web3.0產品，Web3.0的實際擁有者是項目背后的風投機構，及其有限合伙人”。

因為共識的缺失，Web3.0顯現出冰火兩重天般的境遇。有人熱情擁抱，有人態度謹慎，有人充滿質疑。

2022年10月，周星馳在Instagram上公開招募Web3.0人才

截至目前，針對Web3.0數字資產的金融監管，美國仍未形成統一的監管架構，呈現出“多頭監管”的態勢。而在國內，強監管則是Web3.0從業者最大的共識。

回看去年，Web3.0就仿佛是一個充斥瘋子、騙子、傻子以及理想主義者的蠻荒世界，每個人都希望能在Web3.0身上得到自己想要的。

2022年9月15日14時，以太坊正式完成“合并”，結束了區塊鏈對挖礦的依賴，也成為Web3.0歷史上的一個里程碑。但在2023年Web3.0能否邁入新的歷史階段，目前仍是一個未知數。

我們認為，Web3.0現在最大的困難在于如何從概念炒作轉向項目落地，為市場提供一個真正的殺手級產品，只有如此，Web3.0才能真正獲得持久的生命力，擺脫割韭菜的質疑。

07 結語

不斷涌現的新技術、新產品正為創作者和內容行業注入新的活力，我們相信，2023年會是充滿可能性的一年，面對方興未艾的技術應用和熱點話題，新榜編輯部也將繼續關注和跟蹤，與你一起探討和見證內容行業的大變革。


作者：新榜
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

export NODE_OPTIONS=--openssl-legacy-provider 
        


            

                1
            

        

set NODE_OPTIONS=--openssl-legacy-provider 
        


            

                1
            

        

node_mirror:https://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/ 
        


            

                1
            

            

                2
            

        

npm run dev 
        


            

                1
            

        

 來源：csdn



藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

TypeScript從入門到實踐專欄是博主在學習和工作過程中的總結，實用性非常強，歡迎訂閱哦，學會TS不迷路。

函數默認參數/可選參數

對于同一個函數我們在不同場景下傳參，參數有時候全部需要，有時候部分需要，定義多個同名函數就會報錯，那么該怎么實現這個操作呢？我們可以為函數設置默認參數和可選參數。
給每個參數添加類型之后，可以不用給函數本身添加返回值類型，因為TS能根據返回語句自動推斷出返回值類型

function start(name:string,age:number,phone?:number,sex?:string):string{ if(phone&&sex){ return `name:${name},age:${age},phone:${phone},sex:${sex}` }else{ return `name:${name},age:${age}` } } start('zhangsan','14')//name:zhangsan,age:14 start('zhangsan','14',15678777777,'男')//name:zhangsan,age:14,phone:15678777777,sex:男 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

另外我們看它編譯后的樣子，其中返回值使用了concat來連接字符串，也讓我們學習到模版字符串的實現原理。

function start(name, age, phone, sex) { if (phone && sex) { return "name:".concat(name, ",age:").concat(age, ",phone:").concat(phone, ",sex:").concat(sex); } else { return "name:".concat(name, ",age:").concat(age); } } start('zhangsan', 14); //name:zhangsan,age:14 start('zhangsan', 14, 15678777777, '男'); //name:zhangsan,age:14,phone:15678777777,sex:男 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

但是我們要是有很多場景，參數類型也都不一致，我們這樣寫很難維護，并且定義的規范很難適用于實際多個場景，那么我們可以使用函數重載來處理。

函數重載

什么事函數重載呢？當我們多次調用函數時傳遞不同參數數量或者類型，函數會做出不同處理。

1、函數簽名

這里介紹個名次「函數簽名」，顧名思義，函數簽名主要定義了參數及參數類型，返回值及返回值類型。函數簽名不同，函數會做出不同的處理，這是我對函數重載的理解。

2、構造器重載

舉個例子，聲明一個類Course，里面寫一個start的方法，我們調用 start時傳入不同參數類型已經參數個數，start方法會做出不同處理，那么怎么實現呢？具體如下：

type Combinable = number | string; class Course { //定義重載簽名 begin(name: number, score: number): string; begin(name: string, score: string): string; begin(name: string, score: number): string; begin(name: number, score: string): string; //定義實現簽名 begin(name: Combinable, score: Combinable) { if (typeof name === 'string' || typeof score === 'string') { return 'student:' + name + ':' + score; } } } const course = new Course(); course.begin(111, 5);//沒有輸出 course.begin('zhangsan', 5);//student:zhangsan:5 course.begin(5, 'zhangsan');//student:5:zhangsan 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

以上代碼中定義了4個重載前面和1個實現簽名。

3、聯合類型函數重載

聲明一個函數arithmetic，參數類型為聯合類型，返回值也是聯合類型，但是如下代碼卻報錯了。

function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).length; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

原因是沒有明確函數string類型沒有toFixed屬性`，那么怎么用函數重載解決這個報錯問題呢？
我們可以可以根據傳參的類型和函數返回值聲明多個同名的函數，只是類型和返回值不同而已。

function arithmetic(x: number): number; function arithmetic(x: string): string; function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).toFixed(1); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

這樣就不會報錯啦，因為已經識別到arithmetic(1)的返回值是number類型。

拓展JS中函數重載

JS中函數重載怎么實現呢？

1、利用arguments參數

var arr = [1,2,3,4,5]; //注意:這里不能寫成箭頭函數，否則this指向的是window對象 Array.prototype.search = function() { var len = arguments.length; switch(len){ case 0: return this; case 1: return `${arguments[0]}`; case 2: return `${arguments[0]},${arguments[1]}`; } } console.log(arr.search()) //[1,2,3,4,5] console.log(arr.search(1)) //1 console.log(arr.search(1,2)) //1,2 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

2、利用閉包和arguments

 function addMethod (obj, name, fn) { var old = obj[name]; obj[name] = function () { if (fn.length === arguments.length) { return fn.apply(this, arguments) } else if (typeof old === 'function') { return old.apply(this, arguments) } } } var person = {name: 'zhangsan'} addMethod(person, 'getName', function () { console.log(this.name + '---->' + 'getName1') }) addMethod(person, 'getName', function (str) { console.log(this.name + '---->' + str) }) addMethod(person, 'getName', function (a, b) { console.log(this.name + '---->' + (a + b)) }) person.getName() person.getName('zhangsan') person.getName(10, 20) 





     來源：csdn  藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。  分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。  藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

目錄

一、VUE

1、基本介紹

2、Vue 指令

3、生命周期 

二、Element

1、基本介紹

2、Element 布局

一、VUE

1、基本介紹

? 概述

  Vue 是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫。

  我們之前也學習過后端的框架 `Mybatis` ，`Mybatis` 是用來簡化 `jdbc` 代碼編寫的；而 `VUE` 是前端的框架，是用來簡化 `JavaScript` 代碼編寫的。前面的綜合性案例，里面進行了大量的DOM操作，如下

  使用 `VUE` 后，這部分代碼我們就不需要再寫了。那么 `VUE` 是如何簡化 DOM 書寫呢？基于MVVM(Model-View-ViewModel)思想，實現數據的雙向綁定，將編程的關注點放在數據上。之前我們是將關注點放在了 DOM 操作上；而要了解 `MVVM` 思想，必須先了解 `MVC` 思想，如下圖就是 `MVC` 思想圖解

其中的C 就是咱們 js 代碼，M 就是數據，而 V 是頁面上展示的內容，如下圖：

 `MVC` 思想是沒法進行雙向綁定的。雙向綁定是指當數據模型數據發生變化時，頁面展示的會隨之發生變化，而如果表單數據發生變化，綁定的模型數據也隨之發生變化。接下來了解`MVVM` 思想，如下圖是三個組件圖解：

 圖中的 `Model` 就是我們的數據，`View` 是視圖，也就是頁面標簽，用戶可以通過瀏覽器看到的內容；`Model` 和 `View` 是通過 `ViewModel` 對象進行雙向綁定的，而 `ViewModel` 對象是 `Vue` 提供的。雙向綁定的效果：下圖是提前準備的代碼寫出來的，輸入框綁定了 `username` 模型數據，而在頁面上也使用 `{{}}` 綁定了 `username` 模型數據

通過瀏覽器打開該頁面可以看到如下頁面

當我們在輸入框中輸入內容，而輸入框后面隨之實時的展示我們輸入的內容，這就是雙向綁定的效果。

? 快速入門

Vue 使用起來是比較簡單的，總共分為如下三步：

1. 新建 HTML 頁面，引入 Vue.js文件

<script src="js/vue.js"></scrip>

 2. 在JS代碼區域，創建Vue核心對象，進行數據綁定

    


        


            


                


                

            

            


                

                    new Vue({
                

            

        

        


            


                


                

            

            


                

                           el: "#app",
                

            

        

        


            


                


                

            

            


                

                           data() {
                

            

        

        


            


                


                

            

            


                

                               return {
                

            

        

        


            


                


                

            

            


                

                                   username: ""
                

            

        

        


            


                


                

            

            


                

                               }
                

            

        

        


            


                


                

            

            


                

                           }
                

            

        

        


            


                


                

            

            


                

                       });
                

            

        

    

   創建 Vue 對象時，需要傳遞一個 js 對象，而該對象中需要如下屬性：

   ●  `el` ： 用來指定哪個地方的標簽受 Vue 管理。 該屬性取值 `#app` 中的 `app` 需要是受管理的標簽的id屬性值
   ● `data` ：用來定義數據模型
   ● `methods` ：用來定義函數。這個我們在后面就會用到

3. 編寫視圖

    


        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                           <input name="username" v-model="username" >
                

            

        

        


            


                


                

            

            


                

                           {{username}}
                

            

        

        


            


                


                

            

            


                

                       </div>
                

            

        

    

   `{{}}` 是 Vue 中定義的 `插值表達式` ，在里面寫數據模型，到時候會將該模型的數據值展示在這個位置。

? 整體代碼如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <input v-model="username">
                

            

        

        


            


                


                

            

            


                

                        <!--插值表達式-->
                

            

        

        


            


                


                

            

            


                

                        {{username}}
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 創建Vue核心對象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){  // data() 是 ECMAScript 6 版本的新的寫法
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:""
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                            /*data: function () {
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:""
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }*/
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

2、Vue 指令

指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同含義。例如：v-if，v-for…

? v-bind & v-model 指令

? v-bind

  該指令可以給標簽原有屬性綁定模型數據。這樣模型數據發生變化，標簽屬性值也隨之發生變化，例如：

<a v-bind:href="url">百度一下</a>

  上面的 `v-bind:"`  可以簡化寫成 `:`  ，如下：

    


        


            


                


                

            

            


                

                    <!--
                

            

        

        


            


                


                

            

            


                

                          v-bind 可以省略
                

            

        

        


            


                


                

            

            


                

                      -->
                

            

        

        


            


                


                

            

            


                

                      <a :href="url">百度一下</a>
                

            

        

    

? v-model

  該指令可以給表單項標簽綁定模型數據。這樣就能實現雙向綁定效果。例如：

<input name="username" v-model="username">

 ? 代碼演示：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <a v-bind:href="url">點擊一下</a>
                

            

        

        


            


                


                

            

            


                

                        <a :href="url">點擊一下</a>
                

            

        

        


            


                


                

            

            


                

                        <input v-model="url">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 創建Vue核心對象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:"",
                

            

        

        


            


                


                

            

            


                

                                    url:"https://www.baidu.com"
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

  通過瀏覽器打開上面頁面，并且使用檢查查看超鏈接的路徑，該路徑會根據輸入框輸入的路徑變化而變化，這是因為超鏈接和輸入框綁定的是同一個模型數據

? v-on 指令

我們在頁面定義一個按鈕，并給該按鈕使用 `v-on` 指令綁定單擊事件，html代碼如下：

<input type="button" value="一個按鈕" v-on:click="show()">

而使用 `v-on` 時還可以使用簡化的寫法，將 `v-on:` 替換成 `@`，html代碼如下

<input type="button" value="一個按鈕" @click="show()">

上面代碼綁定的 `show()` 需要在 Vue 對象中的 `methods` 屬性中定義出來

    


        


            


                


                

            

            


                

                    new Vue({
                

            

        

        


            


                


                

            

            


                

                        el: "#app",
                

            

        

        


            


                


                

            

            


                

                        methods: {
                

            

        

        


            


                


                

            

            


                

                            show(){
                

            

        

        


            


                


                

            

            


                

                                alert("我被點了");
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        }
                

            

        

        


            


                


                

            

            


                

                    });
                

            

        

    

注意：`v-on:` 后面的事件名稱是之前原生事件屬性名去掉on。
例如：
 ● 單擊事件 ： 事件屬性名是 onclick，而在vue中使用是 `v-on:click`
 ● 失去焦點事件：事件屬性名是 onblur，而在vue中使用時 `v-on:blur`

? 整體頁面代碼如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <input type="button" value="一個按鈕" v-on:click="show()"><br>
                

            

        

        


            


                


                

            

            


                

                        <input type="button" value="一個按鈕" @click="show()">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 創建Vue核心對象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    username:"",
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            },
                

            

        

        


            


                


                

            

            


                

                            methods:{
                

            

        

        


            


                


                

            

            


                

                                show(){
                

            

        

        


            


                


                

            

            


                

                                    alert("我被點了...");
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

? 條件判斷指令

接下來通過代碼演示一下。在 Vue中定義一個 `count` 的數據模型，如下

    


        


            


                


                

            

            


                

                    //1. 創建Vue核心對象
                

            

        

        


            


                


                

            

            


                

                    new Vue({
                

            

        

        


            


                


                

            

            


                

                        el:"#app",
                

            

        

        


            


                


                

            

            


                

                        data(){
                

            

        

        


            


                


                

            

            


                

                            return {
                

            

        

        


            


                


                

            

            


                

                                count:3
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        }
                

            

        

        


            


                


                

            

            


                

                    });
                

            

        

    

  現在要實現，當 `count` 模型的數據是3時，在頁面上展示 `div1` 內容；當 `count` 模型的數據是4時，在頁面上展示 `div2` 內容；`count` 模型數據是其他值時，在頁面上展示 `div3`。這里為了動態改變模型數據 `count` 的值，再定義一個輸入框綁定 `count` 模型數據。html 代碼如下：

    


        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <div v-if="count == 3">div1</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else-if="count == 4">div2</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else>div3</div>
                

            

        

        


            


                


                

            

            


                

                        <hr>
                

            

        

        


            


                


                

            

            


                

                        <input v-model="count">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

    

? 整體頁面代碼如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <div v-if="count == 3">div1</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else-if="count == 4">div2</div>
                

            

        

        


            


                


                

            

            


                

                        <div v-else>div3</div>
                

            

        

        


            


                


                

            

            


                

                        <hr>
                

            

        

        


            


                


                

            

            


                

                        <input v-model="count">
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        //1. 創建Vue核心對象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    count:3
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

通過瀏覽器打開頁面并在輸入框輸入不同的值，效果如下

然后我們在看看 `v-show` 指令的效果，如果模型數據 `count ` 的值是3時，展示 `div v-show` 內容，否則不展示，html頁面代碼如下

    


        


            


                


                

            

            


                

                    <div v-show="count == 3">div v-show</div>
                

            

        

        


            


                


                

            

            


                

                    <br>
                

            

        

        


            


                


                

            

            


                

                    <input v-model="count">
                

            

        

    

瀏覽器打開效果如下：

通過上面的演示，發現 `v-show` 和 `v-if` 效果一樣，那它們到底有什么區別呢？我們根據瀏覽器的檢查功能查看源代碼：

通過上圖可以看出 `v-show` 不展示的原理是給對應的標簽添加 `display` css屬性，并將該屬性值設置為 `none` ，這樣就達到了隱藏的效果。而 `v-if` 指令是條件不滿足時根本就不會渲染。

? v-for 指令

這個指令看到名字就知道是用來遍歷的，該指令使用的格式如下：

    


        


            


                


                

            

            


                

                    <標簽 v-for="變量名 in 集合模型數據">
                

            

        

        


            


                


                

            

            


                

                        {{變量名}}
                

            

        

        


            


                


                

            

            


                

                    </標簽>
                

            

        

    

注意：需要循環那個標簽，`v-for` 指令就寫在那個標簽上。

如果在頁面需要使用到集合模型數據的索引，就需要使用如下格式：

    


        


            


                


                

            

            


                

                    <標簽 v-for="(變量名,索引變量) in 集合模型數據">
                

            

        

        


            


                


                

            

            


                

                        <!--索引變量是從0開始，所以要表示序號的話，需要手動的加1-->
                

            

        

        


            


                


                

            

            


                

                       {{索引變量 + 1}} {{變量名}}
                

            

        

        


            


                


                

            

            


                

                    </標簽>
                

            

        

    

? 代碼演示：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <div v-for="addr in addrs">
                

            

        

        


            


                


                

            

            


                

                            {{addr}} <br>
                

            

        

        


            


                


                

            

            


                

                        </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        <hr>
                

            

        

        


            


                


                

            

            


                

                        <div v-for="(addr,i) in addrs">
                

            

        

        


            


                


                

            

            


                

                            {{i+1}}--{{addr}} <br>
                

            

        

        


            


                


                

            

            


                

                        </div>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        //1. 創建Vue核心對象
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data(){
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    addrs:["北京","上海","西安"]
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        });
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

通過瀏覽器打開效果如下

3、生命周期 

生命周期的八個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法，這些生命周期方法也被稱為鉤子方法。

下圖是 Vue 官網提供的從創建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數

看到上面的圖，大家無需過多的關注這張圖。這些鉤子方法我們只關注 `mounted` 就行了。

`mounted`：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以后我們會在該方法中發送異步請求，加載數據。

二、Element

 1、基本介紹

? 概述

 Element：是餓了么公司前端開發團隊提供的一套基于 Vue 的網站組件庫，用于快速構建網頁。

Element 提供了很多組件（組成網頁的部件）供我們使用。例如 超鏈接、按鈕、圖片、表格等等~

如下圖左邊的是我們編寫頁面看到的按鈕，上圖右邊的是 Element 提供的頁面效果，效果一目了然。

我們學習 Element 其實就是學習怎么從官網拷貝組件到我們自己的頁面并進行修改，官網網址是：元素 - 全球最受歡迎的 Vue UI 框架 (eleme.cn)

進入官網能看到如下頁面

 接下來直接點擊 `組件` ，頁面如下

2、Element 布局

Element 提供了兩種布局方式，分別是：

 ● Layout 布局
 ● Container 布局容器

? Layout 局部

通過基礎的 24 分欄，迅速簡便地創建布局。也就是默認將一行分為 24 欄，根據頁面要求給每一列設置所占的欄數。

在左菜單欄找到 `Layout 布局` ，然后找到自己喜歡的按鈕樣式，點擊 `顯示代碼` ，在下面就會展示出對應的代碼，顯示出的代碼中有樣式，有html標簽。將樣式拷貝我們自己頁面的 `head` 標簽內，將html標簽拷貝到  `<div id="app"></div>` 標簽內。

? 整體頁面代碼如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        <style>
                

            

        

        


            


                


                

            

            


                

                            .el-row {
                

            

        

        


            


                


                

            

            


                

                                margin-bottom: 20px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .el-col {
                

            

        

        


            


                


                

            

            


                

                                border-radius: 4px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .bg-purple-dark {
                

            

        

        


            


                


                

            

            


                

                                background: #99a9bf;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .bg-purple {
                

            

        

        


            


                


                

            

            


                

                                background: #d3dce6;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .bg-purple-light {
                

            

        

        


            


                


                

            

            


                

                                background: #e5e9f2;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .grid-content {
                

            

        

        


            


                


                

            

            


                

                                border-radius: 4px;
                

            

        

        


            


                


                

            

            


                

                                min-height: 36px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                            .row-bg {
                

            

        

        


            


                


                

            

            


                

                                padding: 10px 0;
                

            

        

        


            


                


                

            

            


                

                                background-color: #f9fafc;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        </style>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-row>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        </el-row>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script src="element-ui/lib/index.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app"
                

            

        

        


            


                


                

            

            


                

                        })
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

現在需要添加一行，要求該行顯示8個格子，通過計算每個格子占 3 欄，具體的html 代碼如下

    


        


            


                


                

            

            


                

                    <!--
                

            

        

        


            


                


                

            

            


                

                    添加一行，8個格子  24/8 = 3
                

            

        

        


            


                


                

            

            


                

                    -->
                

            

        

        


            


                


                

            

            


                

                    <el-row>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
                

            

        

        


            


                


                

            

            


                

                    </el-row>
                

            

        

    

? Container 布局容器

用于布局的容器組件，方便快速搭建頁面的基本結構。如下圖就是布局容器效果。

如下圖是官網提供的 Container 布局容器實例：

該效果代碼中包含了樣式、頁面標簽、模型數據。將里面的樣式 `<style>` 拷貝到我們自己頁面的 `head` 標簽中；將html標簽拷貝到 `<div id="app"></div>` 標簽中，再將數據模型拷貝到 `vue` 對象的 `data()` 中。

? 整體頁面代碼如下：

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                        <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                        <title>Title</title>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                        <style>
                

            

        

        


            


                


                

            

            


                

                            .el-header {
                

            

        

        


            


                


                

            

            


                

                                background-color: #B3C0D1;
                

            

        

        


            


                


                

            

            


                

                                color: #333;
                

            

        

        


            


                


                

            

            


                

                                line-height: 60px;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                            .el-aside {
                

            

        

        


            


                


                

            

            


                

                                color: #333;
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        </style>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <div id="app">
                

            

        

        


            


                


                

            

            


                

                        <el-container style="height: 500px; border: 1px solid #eee">
                

            

        

        


            


                


                

            

            


                

                            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                

            

        

        


            


                


                

            

            


                

                                <el-menu :default-openeds="['1', '3']">
                

            

        

        


            


                


                

            

            


                

                                    <el-submenu index="1">
                

            

        

        


            


                


                

            

            


                

                                        <template slot="title"><i class="el-icon-message"></i>導航一</template>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">分組一</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-1">選項1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-2">選項2</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group title="分組2">
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-3">選項3</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-submenu index="1-4">
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">選項4</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="1-4-1">選項4-1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    <el-submenu index="2">
                

            

        

        


            


                


                

            

            


                

                                        <template slot="title"><i class="el-icon-menu"></i>導航二</template>
                

            

        

        


            


                


                

            

            


                

                                        <el-submenu index="2-1">
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">選項1</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="2-1-1">選項1-1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    <el-submenu index="3">
                

            

        

        


            


                


                

            

            


                

                                        <template slot="title"><i class="el-icon-setting"></i>導航三</template>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">分組一</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-1">選項1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-2">選項2</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-menu-item-group title="分組2">
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-3">選項3</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-menu-item-group>
                

            

        

        


            


                


                

            

            


                

                                        <el-submenu index="3-4">
                

            

        

        


            


                


                

            

            


                

                                            <template slot="title">選項4</template>
                

            

        

        


            


                


                

            

            


                

                                            <el-menu-item index="3-4-1">選項4-1</el-menu-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                    </el-submenu>
                

            

        

        


            


                


                

            

            


                

                                </el-menu>
                

            

        

        


            


                


                

            

            


                

                            </el-aside>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                            <el-container>
                

            

        

        


            


                


                

            

            


                

                                <el-header style="text-align: right; font-size: 12px">
                

            

        

        


            


                


                

            

            


                

                                    <el-dropdown>
                

            

        

        


            


                


                

            

            


                

                                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                

            

        

        


            


                


                

            

            


                

                                        <el-dropdown-menu slot="dropdown">
                

            

        

        


            


                


                

            

            


                

                                            <el-dropdown-item>查看</el-dropdown-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-dropdown-item>新增</el-dropdown-item>
                

            

        

        


            


                


                

            

            


                

                                            <el-dropdown-item>刪除</el-dropdown-item>
                

            

        

        


            


                


                

            

            


                

                                        </el-dropdown-menu>
                

            

        

        


            


                


                

            

            


                

                                    </el-dropdown>
                

            

        

        


            


                


                

            

            


                

                                    <span>王小虎</span>
                

            

        

        


            


                


                

            

            


                

                                </el-header>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                                <el-main>
                

            

        

        


            


                


                

            

            


                

                                    <el-table :data="tableData">
                

            

        

        


            


                


                

            

            


                

                                        <el-table-column prop="date" label="日期" width="140">
                

            

        

        


            


                


                

            

            


                

                                        </el-table-column>
                

            

        

        


            


                


                

            

            


                

                                        <el-table-column prop="name" label="姓名" width="120">
                

            

        

        


            


                


                

            

            


                

                                        </el-table-column>
                

            

        

        


            


                


                

            

            


                

                                        <el-table-column prop="address" label="地址">
                

            

        

        


            


                


                

            

            


                

                                        </el-table-column>
                

            

        

        


            


                


                

            

            


                

                                    </el-table>
                

            

        

        


            


                


                

            

            


                

                                </el-main>
                

            

        

        


            


                


                

            

            


                

                            </el-container>
                

            

        

        


            


                


                

            

            


                

                        </el-container>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    <script src="js/vue.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <script src="element-ui/lib/index.js"></script>
                

            

        

        


            


                


                

            

            


                

                    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                        new Vue({
                

            

        

        


            


                


                

            

            


                

                            el:"#app",
                

            

        

        


            


                


                

            

            


                

                            data() {
                

            

        

        


            


                


                

            

            


                

                                const item = {
                

            

        

        


            


                


                

            

            


                

                                    date: '2016-05-02',
                

            

        

        


            


                


                

            

            


                

                                    name: '王小虎',
                

            

        

        


            


                


                

            

            


                

                                    address: '上海市普陀區金沙江路 1518 弄'
                

            

        

        


            


                


                

            

            


                

                                };
                

            

        

        


            


                


                

            

            


                

                                return {
                

            

        

        


            


                


                

            

            


                

                                    tableData: Array(20).fill(item)
                

            

        

        


            


                


                

            

            


                

                                }
                

            

        

        


            


                


                

            

            


                

                            }
                

            

        

        


            


                


                

            

            


                

                        })
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    

        
    

? 完成分頁條展示

在 Element 官網找到 `Pagination 分頁` ，在頁面主體部分找到我們需要的效果，如下

點擊 `顯示代碼` ，找到 `完整功能` 對應的代碼，接下來對該代碼進行分析

? 上面代碼屬性說明：

●  `page-size` ：每頁顯示的條目數

● `page-sizes` ： 每頁顯示個數選擇器的選項設置。

 `:page-sizes="[100,200,300,400]"`  對應的頁面效果如下：

 ● `currentPage` ：當前頁碼。我們點擊那個頁碼，此屬性值就是幾。
 ● `total` ：總記錄數。用來設置總的數據條目數，該屬性設置后， Element 會自動計算出需分多少頁并給我們展示對應的頁碼。

? 事件說明：

● `size-change` ：pageSize 改變時會觸發。也就是當我們改變了每頁顯示的條目數后，該事件會觸發。
● `current-change` ：currentPage 改變時會觸發。也就是當我們點擊了其他的頁碼后，該事件會觸發。

 來源：csdn



藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

正如題目所說：細節決定成敗，微交互就是利用細節提升產品體驗和設立品牌標志。

一、摘要

直到今天，人機交互已經有很長時間的發展。從例如烤面包機的簡單產品到銀行應用程序類的復雜數字產品，我們每天進行上百次的交互。這些交互轉化為產品的可用性，最終轉化成用戶滿意度、信任度和產品整體體驗。

在過去的二十年里，設計師們一直在關注這些交互（按鈕、滾動、長按等）。從電腦大屏幕到移動設備、智能手表以及現在的可折疊設備，交互也在不斷地發展。本文研究了微交互的結構及其與交互模型的關系，審美體驗的不同驅動力，以及我們如何通過改變微交互的元素來優化體驗。最后，我們討論了自下而上的產品構建方法。

二、簡介

自燈泡、收音機、門鈴等電氣設備出現以來，微交互一直存在于我們的生活。微交互和技術共同出現、發展。在我們的日常生活中充滿了與周圍物體的微交互，例如使用烤面包機、解鎖手機、將手機切換到靜音模式、控制音量等。

從簡單的按下按鈕到搖動手腕激活智能手表，微交互隨著技術的進步而不斷發展。像復制文本或移動文件這類我們如今習以為常的、無形之中的微交互，都曾是新穎的微交互。觀察微交互有助于設計師改進產品。

有趣的是，設計師將現實生活場景投射到產品來建立微交互，如剪切-粘貼、放大-縮小等。這些細節不僅提高了產品的可用性，也通過直觀的互動降低用戶學習難度。

我們如何準確定義什么是微交互，什么是交互？

論文《開啟移動微交互》（Ashbrook，2010）將微交互定義為“接觸設備開始到完成的時間不超過4秒的互動”。而《微交互》一書（Saffer，2013）將其定義為：“微交互是圍繞著單個用例的產品使用場景——它們有一個主要任務。”整個應用程序或產品可能只是一個微交互，例如，天氣應用程序（圖1.1）或烤面包機，因為它們只關注一件事。

圖1.1 天氣應用程序能被看作是一個微交互，因為它只顯示天氣。

圖1.2 LinkedIn 的“喜歡”按鈕由兩個微交互組成，（a）當你長按“喜歡”按鈕時，它會打開一個空間展示多個表情符號以供選擇（b）你選擇表情符號發送給帖子。

一個功能可以由多個微交互構成，例如LinkedIn的“喜歡”按鈕（圖1.2），人們可以對帖子發送不同的表情符號。因此，微交互是一個功能模塊，或者是整個產品。與產品互動時，微交互也許能幫助用戶了解做什么，如何做，后續是怎樣。精心設計的微交互使產品變得直觀，優化了產品的用戶體驗。

當微交互打造了與品牌產生共鳴的特殊體驗時，它化身為了品牌標志。專業術語稱之為“標志性時刻——產品或服務中給人留下持久而難忘印象的突出互動”（Janhagen, Leitch & Judelson, 2020）。

Facebook的“喜歡”按鈕是它的標志性時刻。微交互并不僅僅局限于視覺，它們可以是聲音、觸覺、實體硬件或手勢交互。Snapchat的通知作為產品的標志性時刻是因其獨特的聲音。同樣地，iPhone有一個中心按鈕作為蘋果的標志，它有多個微交互方式。

微交互通常首選（Narvhus, J.M. 2016）：

• 溝通反饋。
• 開啟和關閉某項功能，如將手機靜音。
• 實現一個單一的任務，如喜歡一個Facebook上的帖子。
• 控制一個正在進行的進程：顯示更改或系統狀態，如加載條或狀態圖標。
• 改變一個設置。
• 防止人為錯誤。
• 查看或制作內容。

我們將在之后的章節中研究一些微交互案例。

三、交互模型與微交互結構

1. 人類處理器模型

在進入交互模型之前，我們將嘗試研究心智和心智表征，以更好地理解人類如何與世界上的物體互動。(Newell & Card, 1985)文章談到了三個不同的處理器：感知處理器、認知處理器和運動處理器是如何工作以理解周圍世界。

認知處理器與長期記憶和工作記憶一起工作，從現有的知識中提取物體、感覺、行動等的表征，以理解來自知覺處理器的輸入。一旦認知處理器完成處理，它就會向運動處理器發出信號，以特定方式對特定情況采取行動。心智表征是現實世界中事物如何運作的心智模型或理解。

2. 諾曼交互模型

唐-諾曼的七個行為階段（諾曼，2013）（圖2）是一種更清晰的心智學形式，解釋了人類如何與物體互動以實現目標。目標可能是打開一盞燈或在移動應用程序上進行在線交易。讓我們把手機解鎖的簡單目標分解成七個行動階段。

1. 目標是手機解鎖。
2. 我如何解鎖手機？輸入密碼或掃描手指指紋。
3. 選擇哪個方式？如果我選擇輸入密碼，那么就在屏幕上按順序點擊密碼。
4. 一旦我有了行動規范，就可以執行任務。
5. 點擊回車鍵后，將看到后續發生的事情。
6. 我看到我已經到達了主界面。
7. 我根據以往經驗判斷是否已經完成了目標。

在這個循環的每個階段，都有一個輸入->處理->輸出的過程。在宏觀層面上，我們也在遵循同樣的過程來達到我們的目標。我們可以從行動模型的七個階段推導出互動周期（Norman, 2013）（圖3）。

交互周期包括執行過程和評估過程，前者是行動所需信息差，后者是行動發生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標是消除差距，使產品變得直觀?，F在讓我們看看微交互的基礎結構，了解它們如何幫助消除信息差。

3. 微交互的結構

微交互之所以強大，不僅僅是因為它們的細微交互差別或迷你尺寸，還因為它們構建的方式。微交互的結構包括四個部分（圖4）（Saffer，2013）：開啟微交互的觸發器，決定微交互如何運作的規則，以及影響微互動的元規則——闡明規則、循環和模式的反饋。

觸發器可以由用戶觸發，例如點擊圖標、填寫表格等，觸發器也可以由系統產生，例如低電量提示框，通知用戶電池電量不足。

讓我們以Duo應用中驗證用戶的微交互為例。

• 觸發器：向我發一個推送通知是微交互的觸發器（圖5(a)）。
• 規則：它將發送帶有兩個動作的通知（圖5(b)）。用戶必須點擊這兩個動作中的一個（圖5.(c)）。
• 反饋：一旦用戶點擊批準，它將顯示帶有“登陸”的綠色提示。(圖5.(d))
• 循環和模式：如果你選擇了在7天內記住本次登陸，下次登錄時它將直接顯示綠色提示，而不是向你發送推送通知。

現在當我們解構微交互并理解其結構時，微交互的結構支持行動七階段理論，最終幫助消除執行和評估之間的鴻溝。精心設計的觸發器便于用戶進行計劃->指定->執行行動，精心設計的規則和反饋便于用戶進行感知->解釋->對比結果確認完成目標。我們將在下一節中談論觸發器、規則和反饋的設計，以了解微交互如何有效構建所需的用戶體驗。

我們回看心智部分，認知處理器不僅包含了不同事物如何工作的心智模型，并且隨著我們在日常生活中對新物體的體驗而不斷地發展。從這些心智模型中，設計師可以創建概念模型。作為關于產品和功能運作的高級計劃，概念模型一旦被建立就能被轉化為行動模型的七個階段，從而幫助我們創建對用戶來說很直觀的微交互。這是一種自下而上的方法，用于建立交互 -> 功能 -> 產品。

四、審美與微交互

在上一節中，我們談到了交互模型和微交互的結構，并探討了它們如何攜手使產品變得直觀好用?，F在我們將關注動態審美體驗，以及微交互如何在產品的微觀層面建立體驗。

審美體驗的韻律之舞有一個內在的、動態的結構。杜威指出了體驗建立的相關過程，如累積、保存、緊張張力和預期，來指稱體驗的內部動態（McCarthy & Wright, 2004）。

完整的用戶體驗是這些動態的集合，它可以根據用戶過往經驗和知識認知而變化。過往經驗和任何審美經驗都取決于上下文：用戶的過往和能力，人工制品的技術，以及互動發生的任一物理、社會空間（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。當我們與物體/產品互動時，觸覺、嗅覺、視覺和聽覺都會喚起體驗。

在過去的幾十年里，設計師們一直在關注這些觸發奇跡的交互。交互不應該僅僅是傳達內容和完成任務，它應該引人思考，并鼓勵人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗的動態微交互案例。

1）積累：指伴隨著體驗時間展開的積聚。我認為谷歌支付作為微交互建立了用戶體驗，并包含非常優秀的展開界面和支付完成音效。

這個之所以判定為其微交互，是因為它只專注于一件事，而且建立了非常充實的體驗。這個交互開始于點擊支付端->選擇銀行卡->加載->支付完成（圖6）。動畫和音效帶來了一步步徐徐展開的體驗感受。

2）留存：指保留一些過往事物的趨勢，不論體驗還是內容。文本或信息的保存對優秀用戶體驗來說確實是必要的，畢竟這樣能減少認知負擔。在網站和應用程序上填寫表格時，許多微交互都保留了之前的填寫信息。

這類微交互的一個非常簡單的例子是，當你復制一個鏈接并試圖將其輸入網絡瀏覽器時，瀏覽器會顯示直接粘貼鏈接的選項，甚至顯示你復制的內容（圖7）。我們在這此觀察到與微交互的結構不同的是重點更多地放在了交互的反饋上，它傳達的狀態是：你復制的內容已保存，并可以用來搜索網頁瀏覽器。這是一個展示了我們如何調整微交互側重點來優化體驗的優秀案例。

3）張力：指體驗內和參與體驗的人之間的關聯。這是社交媒體和流媒體平臺使用的一種技術，當用戶期待在短時間內快速閱覽內容時，用戶不斷下滑來反復觸發刷新的微交互（圖8.） 。微交互帶給用戶參與感以牢牢抓住其注意力。它帶來的延遲滿足，讓用戶在想快速瀏覽內容時耐心等待。

這個特殊的微交互的重點是方式：即在內容加載之前顯示一個加載器。

4）預期：它包含兩個時間階段。第一階段是用戶在交互中開始期待，第二階段是用戶從交互中得到期望反饋。我想到的微交互是Google Pay India的刮刮卡獎勵（圖9）。

這個特殊的微交互為它在印度帶來了巨大的成功。人們喜歡期待好事發生，即使期望沒有發生。若是期望發生，那期待就是值得的。支付完成后，用戶進入刮刮卡獎勵界面，對刮獎產生期待，點擊卡片進行刮獎。刮獎微交互的重點是動作的觸發上，兼具有趣性和參與感，觸發本來可以只是一個點擊按鈕，但他們設計了一個刮擦動作作為觸發。

上文提到的各種例子可看出：通過調整微交互的元素來優化體驗。微交互小而強的原因在于：它們是產品的差異化細節。好的微交互能讓產品提升一個等級。

五、微交互會引人討厭嗎？

我們認識了精心設計的微交互在創造美好體驗方面的力量，現在讓我們來探討一下，如果糟糕的微交互可能會引發什么問題。

我想到的案例是手機通知。并不是說通知很糟糕，而是它設計得如此之好，以至于它有違用戶的意愿。通知是由系統發起的觸發器，它僅顯示部分信息來吸引用戶點擊。

每個人都會遇到這樣的情況：明明只是想看看時間，但在看到通知時點擊進入信息，無聲無息之中半個小時就耗費了。這不僅僅耗費了時間，更嚴重的是人們在駕駛時也會分心看通知。

另一個案例是 Facebook 的著名的“喜歡”按鈕。這個精心設計的微互動，是 Facebook 的標志，但沒有人意識到一個微互動可以對人們的生活產生如此大的影響。近期 Instagram 停止顯示帖子上的點贊數，因為它對用戶行為產生了負面影響。上面的例子也顯示出：小事情可以產生大影響。

微交互也會令人討厭，例如，在填寫表單最后點擊提交時，彈出一個對話框（圖10），說表單填寫中存在錯誤。這里的觸發器是提交按鈕，規則是顯示一個對話框，反饋是靜態文本——“有填寫有誤”。

這里的微交互形式是錯誤的，如果填寫有誤，提示應該在出錯點附近。而且這里的反饋是糟糕的靜態文本，對用戶沒有任何用處，因為它沒有說明出錯的位置和類型。因此，微交互的使用和場景真的很重要。

六、結論

縱觀全文，我們探討了什么是微交互，以及如何創建符合交互模型的微交互來消除執行和評估之間的差距。接下來，我們研究了動態審美體驗，以及我們如何在產品的微觀層面上用微交互創造美好體驗。

設計師有幾種方法來創建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一種方法是把整個產品看成是一個微交互，如果你想增加另一個功能，那么就把它看成是另一個只包含一個微交互的產品。

我相信谷歌支付是以這種方式創建的，因為它是從支付開始，且只專注于支付，后來才引入了獎勵和其他內容。

微交互有助于建立一個品牌標志和提升用戶體驗。我們喜歡或者討厭產品的根源正是細節。細節是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會帶來巨大差異的原因。

作者：三分設

來源：人人都是產品經理

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

講到UX文案，大家可能并不陌生：一個按鈕、一個彈窗的文案填充，我們幾乎每天都要與他接觸。但即便如此，大家對他的態度通常是得過且過的：“文案嘛，有了就行，看得懂不出錯就好，沒什么值得注意的”。

確實，作為設計師，我們關注交互流程、視覺呈現，但UX文案似乎從來不是我們的首要考慮；在很多時候，文案與我們的設計流程是分裂的：要不就是設計完成后再填入，要不甚至直接讓產品經理來提供文案素材；文案撰寫，好像從來沒有被我們真正重視過。

但UX文案真的只是一個無足輕重的輔助位嗎？

一、 UX文案的重要性

首先，先拋結論，UX文案并不是無足輕重，相反的，它是好的產品體驗中不可或缺的一部分。并且隨著時代的發展和新興應用場景的涌現，它對于產品體驗的重要性正直線拉升。

在我們還將UX文案看作一個可有可無的流程時，一些先進的企業就有遠見的意識到了它的重要性：早在2017年的I/O谷歌年度開發者大會上，三位職業UX文案作家就向我們展示了UX文案如何切實地為谷歌帶來了產品數據的提升：

在用戶在搜索”酒店“相關內容時，谷歌將直白的文案 “預定房間” 改為了更貼合用戶心智的 “查看房源情況”；這一小小的改動，帶來了17%點擊量提升。

隨著UX文案的價值不斷的被發掘，在海外，已經有越來越多的團隊將UX文案寫作作為一個細分的的獨立專業來看待。例如，在國際最大的旅游電子商務公司之一Booking.com，曾在不到一年的時間里增加了40名UX文案崗位，達到了每5或6個設計師中就有一個UX文案設計師的夸張比例。

二、 重新認識UX文案

面對海外對于UX文案的重視度激增場面，我們心中可能不免疑惑：“不還是為頁面配文而已嗎？平常不起眼的工作，怎么現在就好像突然變特殊了呢？”。

存在這樣的誤解，是因為我們對UX文案的認知還停留在過去，始終認為它僅僅是一個輔助位，最多起到“錦上添花”的作用，并不能真正影響核心用戶體驗的好壞。

而實際上，與我們印象中的邊緣形象不同，UX文案（UX Writing），也叫內容設計（Content Design），所涉及的知識橫跨體驗設計、內容策略、用戶調研，是一個多元的、完整的設計學科；旨在基于同理心與專業溝通技巧，通過合適的文字信息，在產品使用過程中為用戶提供愉悅的體驗，遠不只是“為按鈕填詞”這么簡單。

而隨著時代的發展，UX文案的覆蓋范圍、呈現方式以及工作流程等都已經發生了巨大的變化；站在設計師的角度，我們希望通過以下幾個方面介紹UX文案與過去相比發生了哪些變化，來幫助大家消除對UX文案的刻板印象，重新認識它在我們設計中扮演的角色，并學會運用它為用戶呈現出更加優秀的產品體驗。

1. 從「文字」到「語言」

首先，如今的UX文案有著比之前更廣闊的范疇：過去關于文字，如今關于語言。

以前，我們講到UX文案，指代的可能只包含APP里的標題、按鈕等靜態文字；但如今，隨著智能家居、智能車機等新興領域對于語音交互能力展現出的強需求，以及類似喜馬拉雅等播客產品的持續火熱，UX文案已經慢慢跳出了文字的范圍，有了更廣闊的發揮空間。

想象一下，當你結束疲憊的一天回到家時，你的智能家居助手應該以怎樣的語氣向你問好？應該使用什么措辭能最精準地得知你的意圖？這些動態的、無實體的語音內容，也逐漸成為UX寫作要關注的重點內容。

簡單說，如今所有用戶和產品產生交流的場景，都可以劃分于UX寫作的范疇。得益于科技的發展，UX寫作逐漸地更接近了自己最終的目標，慢慢跳出了靜態頁面的框架，得以真正的與用戶產生有意義的、愉悅的語言的交流。

2. 從「填充頁面」到「主導頁面」

其次，UX文案與過去最顯著的不同之一是：不再僅是為頁面填充文本，更多的是根據信息主導頁面。

以下面一個常見的對話框為例，僅有一個小小的對話框來承載超額的信息；如果根據之前的“填充頁面”的觀念，我們要做的其實很簡單，就是根據行文規范刪減、重新排列文字，試圖把過量的內容塞進小小的容器。

這樣得到的結果在視覺上看起來可讀了一些，但似乎也不盡人意。

這就是典型的機械性的填充頁面，信息的展現完全受制于已給頁面的結構，實際上已經脫離了更好傳遞信息的初衷。

如果我們調轉思路，試著真正從傳遞信息本身出發，就能很明顯的發現，原來的對話框最大的問題不是文字長短，而是信息過載—強迫用戶在有限的空間里一次性確認兩類信息：更改時間和通知參會人。而在我們上面的方案里，這個問題并沒有被解決。

當我們真正開始用信息主導頁面，應該做的是將一頁多個問題拆分為每頁一個問題，分步響應用戶，對冗雜的信息進行分解，以真正創造清晰有效的對話。

如果體驗沒有達到理想的效果，通常需要改進的是整個設計，而不單單是文字。我們需要逐漸去理解的是，頁面在根本上是信息傳達的媒介，一昧的修改文本來適應頁面，反而是本末倒置的做法。

3. 從「單純可用性」到「體現品牌聲音」

目前，UX文案通常僅需要保證基本的功能可用性；即使是已經有文案規范的團隊，更多的也是將其作為輔助位，保證文案“有一致性，不出錯”即可；對于品牌形象、差異化的訴求則基本一筆帶過。

相較于UX文案，大家習慣用Icon的質感、品牌色的搭配等視覺的呈現去傳遞品牌聲音，因為這樣的效果簡單直觀，是可以直接被“看得見”的，這點無可厚非。

但隨著語音交互的興起，以及近年來轟轟烈烈的品牌去色化趨勢，單純的利用純視覺的呈現來塑造品牌形象變得沒那么萬能了，與此同時，UX文案對于品牌形象的重要性也逐漸被發掘；我們發現，在很多時候，一句措辭得體的語音信息，或者是一句抓人眼球的標語（Slogan），就足以彌補視覺上品牌呈現的缺憾，甚至更能與用戶產生共鳴。

這就需要UX文案在保證基本的可用性的基礎上，更要考慮什么才是真正適合自己品牌的聲音。

例如Google Earth 過去的一句經典的標語：“Hello, Earth”，這句標語完美的契合了Google Earth的品牌形象，它簡潔正向，并且和產品名稱之間有巧妙的雙關，即代表了產品本身，也暗示了Google Earth帶領用戶去探索世界的功能定位。

仔細觀察蘋果、谷歌的產品，你就會發現從他們的UX文案除了保證了基本的一致性和可用性外，偶爾會隱藏一些小巧思，這些小巧思與他們的品牌形象相互呼應，能讓用戶在產品使用中潛移默化地對其品牌形象、產品價值觀形成認知，而這樣與產品體驗本身結合的認知構成往往更加堅固，比傳統的廣告宣傳更容易讓人信服與認可。

三、 怎樣做得更好，一些實用小tips

隨著UX文案越來越廣闊的范疇，我們過去熟悉的工作方法已經并不完全匹配如今UX文案的目標了；因為它包括的已經不僅是單純的文字內容，更多的還有文案之間的層級結構、什么時候出現這段文字，以及這段文案向用戶傳遞了什么情感等等，這已經超出簡單的行文規則所涵蓋的了。

那么，我們怎么才能真的做好UX文案呢？

我們根據以往的項目經驗，總結出了除了通用行文規則之外，三個在關鍵節點上可以做到的幾件小事，希望幫助大家能找到真正適合、高效的設計方法，并打造出優秀的UX文案。

1. 流程——更早地加入

首先，最基本也是最重要的：在流程上，永遠要盡早的考慮文案問題。

我們過去熟悉的設計步驟是：“先把產品設計好，將有文字的地方空出，最后再填充?！?

這樣帶來的問題是：關鍵的體驗問題直到最后期才會被注意到，留給UX文案的發揮空間十分有限，能做的只是為糟糕的體驗貼上掩飾的創可貼，并不能真正避免糟糕體驗為用戶帶來的傷害。

正如我們上面所說，UX文案不僅僅是填充文字，它的核心是在產品與用戶之間創造合適、愉悅的對話，所涵蓋的內容幾乎橫跨產品體驗的每個流程。

因此，要想真正締造好的UX文案，永遠要盡早地參與到設計流程中，這樣才能真正的找出體驗的問題，并最大限度的發掘UX文案究竟可以為此做些什么，創造與用戶真正有效的交流。

2. 方法——模擬真實的對話

其次，在我們著手輸出UX文案時，請盡量在腦海中模擬真實的對話場景。

這個方法來自于最近的全球開發者大會（WWDC22）上，蘋果設計團隊向大家分享的UX寫作方法框架：“PACE”：Purpose（目的）、Anticipation（預判）、Context（環境）、Empathy（共情）。

其中，在Anticipation（預判）里提到了 “將UX文案想象成一種對話” 的概念，意思是在設計產品的過程中，應該把頁面上的文字看作一個與用戶的對話，而不只是一個靜態的短語；這樣能更好的幫助我們預判用戶的訴求。

想象在這樣的場景：當你的用戶在周末的晚上打開手機，開始調節明早起床的鬧鐘時間；你會怎么設計這里的UX文案呢？

使用流程似乎很簡單：打開鬧鐘app，調節明早鬧鐘時間，確認設置完成。

上述的交互沒有問題，用戶可以清晰的完成設置。但如果考慮到上面提到的 “想象成一種對話”，那這個流程就還有可改進的地方。

因為在一段有效的對話中，交流應該是有來有往的：其中的角色應該有時在聆聽，有時在發言；而不應該僅僅一方是單方面的輸出（在上述的場景里，僅僅是用戶一股腦的對鬧鐘app進行信息輸出，鬧鐘app只是單純的服從命令，這不是一個正常對話的模式）。

讓我們想象是自己在跟用戶在交流，就能很容易地發現用戶想傳遞的底層信息并不是 “我要調鬧鐘了 ”，而是 “好不容易到周末了，我明天要多睡一會”，能解讀到這一層話外音，我們就成功利用“對話”預判了用戶的目的。

打開ios的起床鬧鐘試一下，你會發現它比我們的基礎流程多了一個貼心的詢問 ：“你要將此更改應用到這個定時中的所有周末嗎？”；在這里，蘋果實際上做了兩層預判，第一層是預判絕大多數人的周末和工作日起床時間是不一樣的，所以將復用的范圍限定在了周末；第二層預判是在大多數情況下人們只能確認明天的起床時間，所以主選項是“僅更改下個鬧鐘”。

簡單的一個改動，就把機械性服從命令的程序，變為一個有智慧、思想的助手。如果我們在每次輸出文案時，都能試著想象真實的對話并剖析，可能就能逐漸把一個“可用的產品“變成“貼心的朋友”，真正地走進用戶的內心。

3. 驗證——大聲地念出來！

最后，如果你還是覺得心里沒譜，不確定是否輸出了合適的文案，有一條被蘋果和谷歌共同推薦的驗證方法，簡單粗暴但有效，那就是 “大聲將你的文案念出來”。

就像我們剛剛反復強調的，UX寫作其實就是與用戶創造有效的交談，那么最簡單的驗證方法就是真正說出來，將它真正變成一段對話，然后再去聆聽，最直觀的感受到你的語言聽起來是否自然不生硬？是否有一些不易察覺的重復或語法錯誤等等？

大聲地將你的文案念出來，如果能使你自己信服，相信也能使你的用戶信服。

四、結語

最后，讀到這里，相信你已經對于UX文案有了一個全新的認識，并對如何做好它有了基本的概念。其實在日常工作中，每個產品對于UX文案的要求可能不盡相同，但重要的是作為設計師，我們能意識到他逐漸攀升的重要性并真正對他加以關注。引用蘋果開發者大會上的一句話：UX寫作其實就是始于對屏幕另一側用戶的好奇心，并真正懷著尊重和理解與其交流。只要能意識到這一點，相信大家都能呈現出真正有效的、令人愉悅的UX文案。

作者：騰訊ISUX
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司