Apple One里面有6款不同類型的應用捆綁在一起，頁面開篇這6款應用圖標橫向平鋪，隨后依次翻轉，接著Apple One也翻轉出來，向用戶強調它們被包含在該產品里。
品牌圖標演化出多種圓形內容，內容還會不斷變化切換，最后又融合成品牌圖標，簡單明了直觀告訴用戶這個功能可以解決用戶哪些問題。
開篇在淺黃色背景上告訴用戶智能家居應用被重新設計，隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來組成了Home app的圖標，引出介紹內容；通過放大品牌情感溫度從而向用戶傳達品牌理念。
為了讓更多的人使用Apple Pay，蘋果向用戶展示了真實的使用過程，降低認知成本，讓用戶更容易接受并使用。
用全屏視頻內容刺激用戶感官，然后內容逐漸縮放到電視內，一開始就把試聽體驗注入到了用戶腦海中。
背景顏色及內容伴隨電視中的視頻一同切換，讓用戶明確感知產品能做哪些內容。
特寫展示遙控器，隨著遙控器角度變化，內容也跟著變化，就像有位銷售拿著產品在你面前，詳細為你講解每一個按鍵的功能。
蘋果錢包圖標及文字逐漸放大向下移動，并將文字頂出屏幕以外；整體接著放大，錢包底子繼續下移消失，只留下錢包內的彩色卡片，說明文字上升出現。
隨著頁面往下，藍色卡片向上移動，卡片內文字漸顯，頁面整體變成藍色，蘋果巧妙的將圖標元素與賣點內容結合，并通過不同顏色來區分不同內容。
滑到頁面最底部，四張彩色卡片又逐漸插到錢包里，最后再強調用戶去使用。
賣點先后出現，層層遞進，隨后產品被新功能及核心特點彈開， 將產品大、有多大、續航強以及新功能先后映射到了消費者腦海里。
產品用廣角的視角依次出現，一方面展示產品顏色規格、另一方面暗示產品屏幕大。
Plus和電池一同進行充電動畫，僅僅一個關鍵詞和一個圖標，就形象的描述了電池容量大的事實，緊接著更加具體的參數逐一顯示，強化究竟有多大。
產品旋轉運動最后合并成一個由大變小，最后出現價格，強調改產品很實惠。
手機旋轉放大，原來的桌面壁紙變成了產品賣點的背景，將產品和賣點順滑的聯系在一起。
電池圖標與賣點一起進行充電動畫，將賣點順其自然的表達出來。
讓每一句文案絲滑的連接出現，讓用戶能夠感知出產品低延遲的優點，接著產品側影出現將之前內容擦除，引出處理器的強大。
就如賣點所說，產品很貼心的前后為你旋轉展示它的面板，讓用戶看的真真切切。
水花下落被手機彈開，直觀的告訴用戶它是防水的。
漆黑的背景寫著14Pro的標題，隨后標題消失，同時產品從無限大縮小，看完這個動畫才發現，原來之前漆黑背景是新款產品的靈動島，隨后靈動島展示了在不同場景下的狀態，吸引了用戶注意。
產品說明內容使用新款手機墻紙進行漸變顯示，加強了用戶對新款產品的感知。
運用視差，營造空間感，手機和里面的內容先是很大，并且展示第一段說明內容；隨著鼠標往下滑，手機縮小屏幕內容變化，營造了一個真實的場景畫面，來強化新功能的賣點。
標題不斷放大，文字中間的圓逐漸演變成一個圓角矩形，隨后帶出靈動島功能動畫，用戶從頭到尾都沉浸在蘋果編排的情節中，用戶喜歡了解新功能也就順理成章了。
內容往下看，箭頭按鈕從左向右滑動，顯示查看詳細內容的入口，引導用戶點擊查看，這樣做沒有哪位用戶會拒絕自己的好奇心點進去看看。
最開始只有大標題和一個科技感的芯片，隨著頁面下滑，詳細內容顯現，芯片伴隨著分層鏡頭元素逐漸組裝起來，展現出了產品的科技與精密。
手機背部攝像頭用特寫鏡頭伴隨機身從平視到俯視的角度變化，將用戶視線引到攝像頭上，隨后顯示說明文案強化產品宣傳。
開篇全屏出現一朵具有科技感的3d花朵收攏綻放的視頻，隨后鏡頭后推，2臺產品旋轉展開，呈現出一個展翅翱翔的造型，傳達出產品性能強勁展翅高飛的勢能。
處于合起的筆記本漸漸被打開，里面播放著三維動畫界面，暗示用戶它正在處理三維任務，隨后旋轉出2臺電腦，關于電腦的核心參數被顯示出來，告訴用戶具體哪些性能有了提升。
電腦屏幕做爆炸圖動畫處理，形象展示內部結構，吸引用戶關注產品特點內容。
多臺不同顏色的電腦旋轉排列，鏡頭不斷變換角度，最后依次排在一起用側視圖來喚出標題，在營造出歡快的氛圍的同時，還體現出產品多彩的特點。
顏色文案內容不斷切換，電腦變換不同組合方式輪番切換展示，接著營造歡快氛圍。
體現電腦薄的文案放大顯示，隨著頁面往下，文字縮小，逐漸被電腦側邊遮住，用動態對比的方式讓用戶感受到電腦的厚度很薄，再往下，屏幕微抬，搭配關于屏幕旋轉角度的賣點。
電腦切換顏色體現內容發生變化，旋轉角度可以全方位看清新版插口的位置以及體現更方便的使用。
支持多方應用的文案在應用圖標的包圍中下落，下落的過程中同步顯示的應用可以體現支持的應用多，最后和詳細介紹文案碰撞，可以很好的銜接用戶的閱讀視線。
產品逐漸被放大，鏡頭進入內部，里面迸發碰撞的液體體現產品內部有著強勁動力。
承接上一個內容，體現剛才那么強大的動力的源泉就在你眼前，去選一個吧，伴隨著芯片的光影運動，讓你覺得這是一個具有魔法般的嶄新器物。
深入產品內部，不同顏色的光束旋轉流動，用具象的形式體現產品在散熱方面的工作原理以及性能是多么強。
產品快速運動對文字造成拖尾效果，體現產品的輕，以及速度快。
文案內容居于2臺電腦狹小縫隙之間，有一種壓迫感，體現出新產品的實力很強大，緊接著M2芯片由大變小出現，交代出產品之所以強大得益于芯片。
屏幕里的應用在不停的變換，體現電腦在進行不同的應用操作，隨后文字出現，強調續航能力很高。
2臺電腦屏幕旋轉變化，對比出2者間攝像頭位置做了更新。
產品旋轉，展現輕薄側面，搭配攜帶更少，攜帶更多的文案，讓消費者更加肯定它的輕薄。
看了蘋果公司網站中的動畫，不難看出，動畫的核心功能就是用關聯的方式強調、強化賣點
具體方法如下：
1、產品如果有多種顏色，那就盡量在畫面中一起體現
2、讓產品自己說話，善于利用產品的不同角度、運動方式強化產品功能特征
3、不做無用動畫，讓每一個動畫表達明確的意圖，不要讓用戶覺得它只是在動
4、把控文案展現在用戶眼前的先后順序，用故事把它們串聯在一起，從而掌控用戶閱讀節奏
最后我們試想一下，如果網站中的動畫內容全部變成靜態，那會帶來什么樣的后果
1、內容會變得枯燥，賣點得不到強化，用戶購買欲下降
2、靜態內容很難描述一些抽象的功能，例如：如何體現產品散熱很好，音質怎么個好法
3、內容太多占空，原本一個動畫就能說明的內容，非要寫大篇文字
行為設計就是通過一些方法來引導行為，博取用戶的注意力和時間。用戶每次使用產品都是一次和產品交流的旅程，在這個旅程中，我們可以通過一些方法來影響用戶的決策，引導用戶的行為，從而達到產品目的。
斯坦福大學的B.J.福格總結了行為模型：
從這個模型中可以看出，福格教授把行為歸結為3個影響因素：動機、能力和提示
這三個因素又是以什么樣的具體方法對我們的行為進行影響的呢？有以下幾個方面：
動機是做出行為的欲望，是人行為的動力源泉，動機也是最難提高的。
人是群居動物，有強烈的社會屬性，在判斷什么是正確的時候，人們通常會根據其他人的意見行事。而且通常我們對社會認同的反應方式是無意識的，特別是在自己內心有不確定性時，最有可能認為大多數人的選擇是正確的。
在產品設計中，“多數人的選擇” 常常會作為一個重要的信息展現給用戶。比如寸土寸金的淘寶首頁推薦卡片里會把XX人付款作為露出信息。網易云音樂會把播放量當做歌單的必要信息之一。都是告訴用戶，看，許多人都購買了這件商品；看，好多人都選擇聽這首歌，如果你也這么選應該不會錯。
在 「Airbnb」 的詳情頁，有XX條評價，XX人推薦，都是在告訴用戶，這是一間靠譜的，讓人放心的好民宿，是眾多人的選擇，你可以放心的按下“預訂”按鈕。
「 權利服從研究試驗 」
1961年，耶魯大學心理學教授斯坦利·米爾格拉姆做了“權力服從研究”實驗，證明了絕大多數人對權威有服從性和信任感。 實驗中有一個學生單獨在一個房間里，負責實驗的科學家向他進行提問，如果回答錯誤，科學家就會要求接受實驗者通過控制臺對學生進行電擊，電壓從15V到用紅字標注著危險的450V。盡管電壓上升，學生尖叫時，大多數接受實驗者都會有所猶豫或抗議，但還是有65%的參加者服從了科學家的指令。這些參加者涵蓋了20-50歲，各種教育背景的人。這個實驗證明了大多數人都會對權威信服，甚至去虐待一個陌生人。
人對權威有天然的服從性。在產品應用上，我們可以通過放權威性的信息，獲得用戶信任感，從而促進行為的發生。比如五常大米會把自己的官方認證碼放在上面，告訴用戶自己是官方五常大米；被李佳琦這種意見領袖推薦過的商品會寫明自己是李佳琦推薦；
「 得物 」則提供第三方平臺檢驗真偽后再發貨，讓用戶買的放心。而大眾點評則開創了黑珍珠甄選，作為優秀餐廳的官方認證背書。都是用“權威”觸發用戶的順從心里，獲得用戶的信任感。
人們普遍相信“物以稀為貴”，對某樣東西失去的恐懼，會比獲得這樣東西的渴望，更能激發人們的行動力?？释麚碛幸患娙藸帗尩臇|西，幾乎是一種本能。限量版的球鞋，限量版的手辦都讓人狂熱，仿佛沾上“限量”兩個字，它的價值就可以翻上幾翻。
淘寶的收藏，京東的“即將售罄”等都告訴你有限的貨物已經是低庫存狀態，已經快要賣完了，你若再不快點購買就很有可能會失去擁有它的機會，來增加緊迫感。
而商家經常推出的限時優惠、限時秒殺功能，則是用營造時間的稀缺感，告訴用戶時間有限，再不買便會錯過這難得一見的低廉價格，促使用戶馬上行動。
「 舒茲多巴胺試驗」
劍橋大學神經科學教授沃夫藍.舒茲（Wolfram Schultz）做了一個實驗，研究腦內獎賞系統。這個實驗也很有趣，它不僅可以作為預熱行為的論證實驗，還可以作為行為設計另一個重要模型峰終效應的論證實驗多巴胺是大腦中傳遞興奮、開心的物質?？梢砸鸺痈?、迫切感或渴望感。猴子每次在得到香蕉之前都會先點亮一盞燈，而后才會得到香蕉，幾次過后，研究人員發現，每次燈亮時猴子分泌的多巴胺越來越多，而在得到香蕉時分泌的多巴胺越來越少。多巴胺分泌峰值是在亮燈時。這種期待的快感比實際吃到的快感更強烈。
「 淘寶試妝 」 用AR技術讓我提前體會到的“擁有這只口紅”的快樂。在貝殼用AR看老破小的時候，因為房間破舊雜亂給房子的感官大大減分，但經過一鍵AR裝修后，仿佛看到了我擁有這套房子改造之后的樣子，怎能不心動。
「 海淘的APP考拉 」 在讓我續費會員時，會告訴我之前購買的會員卡為我省了一筆大錢，用300多元卡費省下1989元是多么明智之舉。所以，“放心續費，這波不虧”。同時買會員卡還可以領其它家會員，續費還可以用紅包低價購買我常買的東西，統統都是在告訴我續費會員卡的價值。
「 拼多多的月卡 」讓我印象深刻，在讓我開月卡的詳情頁，會直接把紅包列出來：給4張5元的無門檻券，還有價值174的別的券。這些明明白白的優惠只需要7.8元就可以擁有三個月，簡直不要太劃算。
“宜家效應”是由美國行為經濟學家Dan Ariely提出。源自有很多人熱衷于購買宜家的半成品家具，付出勞動自己進行組裝，并為此感到成就感。 當人們對某件事物的投入越高，對它的感情就會越深，就越會認為它有更高的價值。宜家效應是一種認知偏差，也是一種內在動力。
在產品設計中任務系統勛章設計正是用了這個原理 ，
比如QQ的能量值，需要通過互動、購買等行為獲得的，這圖標本身的意義是不大的，但它卻是在qq中行為活動的象征，炫耀的資本；
想要獲得運動軟件KEEP中的勛章，就要付出體力：進行。這些勛章不僅僅只是一個標識，因為我的付出，讓它們每一個都很有意義。
好奇心也是人的一種內在動力。 激發好奇心，喚醒用戶興趣，促使用戶進行下一步行動。
尤瓦爾·赫拉利的著作人類簡史中里面有個觀點：
人類發展成尼安德特人之后有一部分發展成智人，另一部分沒有。是什么讓尼安德特人發展成智人呢？是好奇——強烈的窺探欲和交流欲，讓尼安德特人慢慢發明了語言，最后成為智人。好奇心，是人類本能。
比如「 知乎 」，首頁信息流都是用問問題的方式勾起用戶對不同內容的好奇心，是點進去查看的動力。社交軟件Soul則通過好奇心驅使用戶進行多維度的靈魂測試，看看自己是個什么樣的靈魂以及需要什么樣的契合。
淘寶的收藏，京東的“即將售罄”等都告訴你有限的貨物已經是低庫存狀態，已經快要賣完了，你若再不快點購買就很有可能會失去擁有它的機會，來增加緊迫感
從福格行為設計模型里面可以看出，用戶對做一件事情的能力越強，干擾和糾結越少，能力門檻越低，這個行為就越容易觸發成功。
比如很多軟件在截圖之后會直接彈出分享或下載選項，讓我在當前頁面便可以進行操作。 在登錄注冊時很多軟件可以直接記錄手機號，讓用戶可以不用輸入信息一鍵登錄，減少操作步驟，促進登陸行為的發生。
有研究證明一個成年人的閱讀速度大約是每個字250毫秒，多行的文字會給人造成壓力，專業性文字會讓人覺得難以理解。
一個小程序中的一個刪除確認彈窗，之前的有個版本放了大段文字想要解釋如何把刪除的任務從回收站復原，在做調研時發現到這個流程時用戶就會卡住，閱讀這長段的文字，雙眉緊簇，不知如何是好。
美國認知心理學先驅，G.A.米勒 做了一系列的實驗，得到了得出了人類工作記憶的上限徘徊在7+-2項。稱為“米勒定律”。后來的科學家們重新評估回憶結果并修正實驗方法后，目前的數據表明，真實的工作記憶是4到5項。
在「貝殼APP」中，對用戶提問不能接受最老的房子，給出的選項并未對時間做過多的細分，可以讓用戶用最快的速度分辨信息做出選擇，不耽誤繼續瀏覽信息流。在租房提示面板中看房時間和入住時間也只給出4個選項，讓用戶快速閱讀快速選擇。
同樣是做用戶反饋，「 餓了么 」使用了簡潔的文案和2個選項，「 美團買菜 」擇用了兩行文案和一個很多選擇的選項，相比之下，美團買菜的用戶調研讓我太有壓力了
有時會因為某些原因不得不給用戶提供多種選擇，過多選擇帶來的內心糾結和思來想去往往只會拖延行動，甚至還會讓行動不了了之。因此
「 貝殼APP 」會幫助用戶做房源對比，在價格，戶型，面積，朝向，裝修等等方面進行對比，幫助用戶進行更好的決策。「 喜馬拉雅 」會在我聽完一個節目后根據我近期所聽內容推薦我可能喜歡的內容，而不用用戶再去費心費勁的搜索。
對于用戶想做，但能力又不足的事情，降低門檻可以有效的促進用戶行為的發生。
比如「 微信讀書 」的無限卡兌換門檻很低，讀1分鐘，讀1小時，讀3小時就都可以兌換，除此之外還有很多很多的常駐活動都能兌換無限卡，降低讀書行為的門檻，讓沒卡這件事，盡量不要成為讀書的阻力。
「 京東支付 」會有京東白條的選項，可以分期付款，降低消費能力的門檻，促進購買行為的發生。
提示是提醒行動的信號，仿佛在對你說“現在就行動”，它必須是個明顯的存在。大多數人都無法抗拒的想要點APP上的紅色數字標簽，它們就是被刻意設計出來吸引注意力，促使我們行動的。
比如「 閑魚APP 」首頁的標簽欄中，把賣閑置這個按鈕做了顏色和形狀的特殊處理，讓它成為底部欄中最與眾不同的一個，吸引用戶觸發點擊。美團優選“新人禮包”彈窗用鮮明的高飽和度紅黃配色，讓用戶滿眼都是“它”
編寫程序是為了讓我們更高效的處理問題，但在生活中我們常常遇到一些重復性的動作，也就是當我們希望一遍又一遍的執行多次代碼，但是每一次執行代碼的值有不同的時候我們就可以使用循環語句來解決問題。
JavaScript支持不同類型的循環:
循環：具備的四個條件
do...while語句可以在某個條件表達式為真的前提下，循環執行指定的一段代碼，直到那個表達式不為真時結束循環。
語法:
while(條件){
需要執行的代碼
}
比如:
//打印0~3
let n = 0;
while (n < 3) {
n++;
}
do...while語句創建一個執行指定語句的循環，直到condition值為 false。在執行statement 后檢測condition，所以指定的statement至少執行一次，理論上,所有的while循環都可以使用doWhile
語法:
//初始化條件
var index = 0;
do{
//遞歸條件
index++;
//循環體;
}while(條件);//同樣的這個條件是一個Boolean
比如:
//列出1~10之間的所有奇數
var index = 0;
do{
index++;
if(index % 2 == 1){
console.log(index);
}
}while(index<10);
比如:
var a = 10;
//while循環
while(a<4){
console.log("執行while循環");
}
//dowhile循環
do{
console.log("這是doWhile循環");
}while(a<4)
for 語句用于創建一個循環，它包含了三個可選的表達式，這三個表達式被包圍在圓括號之中，使用分號分隔，后跟一個用于在循環中執行的語句（通常是一個塊語句）。
語法:
for(初始條件;循環條件;迭代條件){
//循環體
}
比如:
for(var i = 0 ; i < 10 ; i++){
console.log("輸出第"+i+"次循環");
}
上面的執行順序如下：
for...in語句以任意順序迭代一個對象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。
語法:
var 對象名 = {}
for(屬性名 in 對象名){
//循環體
}
比如:
var info={name:"xiaoming",sex:"man",age:18};
for (x in info){
txt=txt + person[x];
}
for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments對象等等）上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句
語法:
for (屬性名 of 對象名) {
//statements
}
比如:
var arr = ['nick','freddy','mike','james'];
for(var item of arr){
console.log(item);
}
拓展
- 拓展1 數組的長度 數組的名字.length
- 拓展2 數組的元素當中 可以是不同的數據類型
來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言：
本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOW
http://t.csdn.cn/oHEOW
代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。
綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list組件收到了傳來的用戶數據',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
-
前言：
本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOW
代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。
綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list組件收到了傳來的用戶數據',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
來源：csdn 藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
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核心對象，進行數據綁定
創建 Vue 對象時，需要傳遞一個 js 對象，而該對象中需要如下屬性：
● `el` ： 用來指定哪個地方的標簽受 Vue 管理。 該屬性取值 `#app` 中的 `app` 需要是受管理的標簽的id屬性值
● `data` ：用來定義數據模型
● `methods` ：用來定義函數。這個我們在后面就會用到3. 編寫視圖
`{{}}` 是 Vue 中定義的 `插值表達式` ，在里面寫數據模型，到時候會將該模型的數據值展示在這個位置。
? 整體代碼如下：
2、Vue 指令
指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同含義。例如：v-if，v-for…
? v-bind & v-model 指令
? v-bind
該指令可以給標簽原有屬性綁定模型數據。這樣模型數據發生變化，標簽屬性值也隨之發生變化，例如：
<a v-bind:href="url">百度一下</a>上面的 `v-bind:"` 可以簡化寫成 `:` ，如下：
? v-model
該指令可以給表單項標簽綁定模型數據。這樣就能實現雙向綁定效果。例如：
<input name="username" v-model="username">? 代碼演示：
通過瀏覽器打開上面頁面，并且使用檢查查看超鏈接的路徑，該路徑會根據輸入框輸入的路徑變化而變化，這是因為超鏈接和輸入框綁定的是同一個模型數據
? 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` 屬性中定義出來
注意：`v-on:` 后面的事件名稱是之前原生事件屬性名去掉on。
例如：
● 單擊事件 ： 事件屬性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦點事件：事件屬性名是 onblur，而在vue中使用時 `v-on:blur`? 整體頁面代碼如下：
? 條件判斷指令
接下來通過代碼演示一下。在 Vue中定義一個 `count` 的數據模型，如下
現在要實現，當 `count` 模型的數據是3時，在頁面上展示 `div1` 內容；當 `count` 模型的數據是4時，在頁面上展示 `div2` 內容；`count` 模型數據是其他值時，在頁面上展示 `div3`。這里為了動態改變模型數據 `count` 的值，再定義一個輸入框綁定 `count` 模型數據。html 代碼如下：
? 整體頁面代碼如下：
通過瀏覽器打開頁面并在輸入框輸入不同的值，效果如下
然后我們在看看 `v-show` 指令的效果，如果模型數據 `count ` 的值是3時，展示 `div v-show` 內容，否則不展示，html頁面代碼如下
瀏覽器打開效果如下：
通過上面的演示，發現 `v-show` 和 `v-if` 效果一樣，那它們到底有什么區別呢？我們根據瀏覽器的檢查功能查看源代碼：
通過上圖可以看出 `v-show` 不展示的原理是給對應的標簽添加 `display` css屬性，并將該屬性值設置為 `none` ，這樣就達到了隱藏的效果。而 `v-if` 指令是條件不滿足時根本就不會渲染。
? v-for 指令
這個指令看到名字就知道是用來遍歷的，該指令使用的格式如下：
注意：需要循環那個標簽，`v-for` 指令就寫在那個標簽上。
如果在頁面需要使用到集合模型數據的索引，就需要使用如下格式：
? 代碼演示：
通過瀏覽器打開效果如下
3、生命周期
生命周期的八個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法，這些生命周期方法也被稱為鉤子方法。
下圖是 Vue 官網提供的從創建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數
看到上面的圖，大家無需過多的關注這張圖。這些鉤子方法我們只關注 `mounted` 就行了。
`mounted`：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以后我們會在該方法中發送異步請求，加載數據。
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>` 標簽內。
? 整體頁面代碼如下：
現在需要添加一行，要求該行顯示8個格子，通過計算每個格子占 3 欄，具體的html 代碼如下
? Container 布局容器
用于布局的容器組件，方便快速搭建頁面的基本結構。如下圖就是布局容器效果。
如下圖是官網提供的 Container 布局容器實例：
該效果代碼中包含了樣式、頁面標簽、模型數據。將里面的樣式 `<style>` 拷貝到我們自己頁面的 `head` 標簽中；將html標簽拷貝到 `<div id="app"></div>` 標簽中，再將數據模型拷貝到 `vue` 對象的 `data()` 中。
? 整體頁面代碼如下：
? 完成分頁條展示
在 Element 官網找到 `Pagination 分頁` ，在頁面主體部分找到我們需要的效果，如下
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家好，我是清風。今天給大家分享一個項目中遇到問題解決問題的案例，編程其實就是一個思考的過程，缺少思考就沒有靈魂，遇到問題先靜下心去思考，想到方法后再去實踐。我們要學會靈活變通去解決問題，掌握方法，這樣才能舉一反三，臨危不亂，遇到所有問題都能很好地去解決。
事情是這樣的，做的一個答題小程序，要求在后臺編輯題目，編輯題目是用的textarea文本域，即輸入的是文本內容，配置之后小程序里查詢顯示后臺配置的題目列表。
當然在測試時后臺去配置文本內容，小程序顯示是沒有問題的。因為配置的題目是純文本，小程序里也是直接在text里顯示的，沒有問題。
后臺配置題目
小程序顯示題目
問題往往只有在用的時候才會發現，用戶或管理員的各種操作才能顯現出各種問題。現在小程序里已經不能正常顯示了，有些顯示的是html格式富文本格式，有些不顯示。顯然和需求大相徑庭，已經出現問題了。
如上圖，在用的時候因為是從word文檔里直接復制過去的題目（事先在word里整理好了題目，由于各部門工作對接，先是在word文檔進行審核），直接復制會把富文本內容也攜帶過去，攜帶過去的當然也有style樣式，小程序里不顯示的原因是富文本的字體顏色是黑色字體，和小程序面背景都是黑色，導致看不到文字。打開控制臺調試，問題確實是這么出現的。
word文檔編輯的題目會出現不同的富文本的樣式格式，這都會導致小程序的不正常顯示。
富文本的文字顏色是黑色，這導致的小程序頁里題目的不顯示。
既然后臺有可能出現富文本，我們直接把小程序題目的渲染方式換成富文本渲染，這樣就算是純文本也可以顯示的。而第二個問題，由于小程序頁面背景顏色是黑色，所以題目的字體顏色不能是黑色，我們做一個查找替換，把style樣式里的字體樣式替換掉就可以了。
樣式可能是各種各樣的，通過查找style樣式里的字體樣式考慮的匹配太多了，比如說color屬性值可以是rgb形式，也可是rgba形式，也可能是#號顏色值形式，還有可能是英文形式顏色，所以不可取。我們換一種思路，直接把style屬性替換掉，即查找到style，換成一個無效的屬性名。案例中我們替換成了c，c是一個無效的屬性，不會觸發節點的查找和計算。
replace函數
我們用到replace函數，replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
參數
請注意，regexp/substr 是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp對象，返回值是一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
that.setData({
_list: res.data
})
let data = that.data._list
data.forEach((element, index) => {
var stemContent = '_list[' + index + '].stemContent'
that.setData({
[stemContent]: element.stemContent.replace(/style/g, 'c')
})
element.choiceTopicVos.forEach((item, i) => {
var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
that.setData({
[listCheck]: item.optionDes.replace(/style/g, 'c')
})
})
})
用到的replace函數，進行了字符串的查找替換，查找到style屬性，把它替換到了無效的屬性c，沒有了樣式屬性，從而達到了去除內聯樣式的效果，經過調試，完美解決問題。
這是一個小問題，我為什么要拿出來說呢？拋去開發的測試流程不說，我認為它能引發一些思考。寫代碼的過程必須是一個思考的過程，怎么樣更好地去實現效果，怎么樣更簡單有效地解決問題，怎么樣優化，要去考慮一個大的方面。善于發現問題，解決問題，并不是說用了什么高級語言就鄙棄了思考，機器語言是相通的，開發中各種各樣地應用才是魅力所在。編程是一門是藝術，最重要的是你怎樣去巧妙地運用，就像解一道數學題，精絕巧妙的解法會讓人眼前一亮，增色太多。同樣都做出來了，但是你做的就顯得十分優雅！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數據可視化
數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律
關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。
1. 分析數據關系
根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。
構成關系
構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯與流轉
流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。
常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉化、關系”
2. 分析數據特征
按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類
層級特征
多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。
流程特征
流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是桑基圖重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。
1. 強化數據特性
使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。
我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調來進行分類
數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調內在順序
如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。
1. 布局框架適配
在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結語
數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、項目背景
語音搜索場景在功能不斷迭代的同時，也在探索更年輕化的玩法、傳遞更多元的體驗感受。在產品初期，我們嘗試在語音搜索場景下增加AI伙伴的形象，雖然線上版本已經實現，但從產品形態以及用戶反饋上看，還沒有達到可情感互動的效果。所以在本次迭代上，我們著重從情感聯結、閑聊互動的維度，對語音搜索進行創新性嘗試。
二、設計挑戰與目標
圍繞項目背景，從現在語音搜索的用戶行為與框架來看，有幾個比較明確的問題：
因為前期在語音搜索的優化中，已經嘗試在面板中引入AI形象，上線后用戶反響強烈，用戶的行為中聊天、互動的訴求也明顯增加。由此可見，滿足用戶對AI伙伴的情感化訴求是十分有必要的，同時語音搜索引入AI伙伴是體現同行業差異化的有力創新點，從行業報告《2021年中國智能語音市場分析報告》中，也闡述了打造沉浸感語音搜索體驗與引入AI是目前智能語音市場的發展趨勢。
綜合以上原因，設計團隊在與產品討論過后，達成本次升級的核心目標：
三、設計舉措
1、構建認知 - 語音搜索基礎框架升級
在舊頁面中，語音面板限制了人物與按鈕的展現，人物既要承載功能反饋又需要作為物理操作按鍵進行點擊操作，與用戶認知相悖且也不利于功能擴展。因此在新版本設計中，需要明確“人”在語音搜索里的屬性，以及AI伙伴與語音搜索的關系。
我們將語音搜索頁面框架分為主要功能與輔助功能區。從舊語音面板中剝離出人物，并保留收音球在面板中做物理交互功能（發起收音、停止收音操作），利用AI伙伴的人物屬性，打造智能擬人的交互反饋，滿足用戶情感訴求。以“人”為中心，最大化展示AI形象，增強情緒傳遞感的同時保證框架可拓展性。
同時，將原堆積在面板中的功能與信息按優先級歸位，確保頁面信息清晰易讀、功能操作熱區無重疊、信息反饋區無干擾。新框架上線后，AI伙伴互動與語音搜索的認知關系更加清晰，語音搜索跳框量明顯增加，AI伙伴帶動面板整體導流增加，面板退出率下降。
2、引入情感 - 全場景情感化體驗提升
除了通過框架層面進行認知優化之外，為營造更貼合“人”的互動體驗與情感建立，我們又根據語音場景對每個狀態進行了情感體驗升級。改版上線后，用戶閑聊訴求和互動點擊行為均有所提升，從而驗證情感化的體驗提升，滿足了用戶互動訴求。
1）情感化引導提示：視覺上人物破框展示配合AI招手/比心的動作展示，不再是圖片，而是可以對話的實體，同時使用年輕化的引導語氣拉近與用戶間的距離，增加數字人曝光，建立新用戶心理預期，激發興趣點提轉化。
2）互動提示規則升級：圍繞“人”的真實情感，通過彈出氣泡的方式模擬AI伙伴狀態，比如聽歌、讀書、游戲。以此引發用戶點擊或進行互動行為嘗試。并且配合AI伙伴升級引導規則，使引導能夠根據不同場景進行適配，保證其既可以承接語音常規引導功能，又可以承接負一樓聊天互動，點擊氣泡可跳轉對應負一樓場景、聯動數字人語境內容，避免造成場景情感化割裂。
3）增加“AI伙伴”情感反饋：增加人物動作、豐富情感化動態反饋，想要模擬更真實的“人”的狀態，就需要滿足更多擬人反饋。將語音搜索常見場景劃分為聆聽、識別解析、異常狀態、指令響應、引導等5種狀態。對應不同的狀態，規劃相應的數字人反饋動作或組合使用方式，可復用拓展其他相關場景，為設計與開發提效。
3、感知升級 - 營造沉浸視覺氛圍
確定了產品主要改版方向后，通過對目標的提煉，提取設計關鍵點「年輕化」與「情感化」，配合AI伙伴形象，需要呈現出輕松活力的氛圍感，設計中運用了大面積的毛玻璃質感，使場景更加輕盈、沉浸。通過對色彩的運用來演繹年輕的視覺效果，詮釋語音搜索年輕化的設計突破。
1）定義視覺風格：圍繞改版目標，定義設計關鍵詞，由關鍵詞延伸設計風格要點。
2）形色字構質動：從「形色字質構」5個方面提煉設計特征。
基于視覺方向及特征提煉，在質感、形狀、顏色三個設計中改動最大的方向詳細描述。
考慮到語音搜索場景日后的拓展，色彩上希望可以營造給用戶一種輕松柔和的視覺氛圍，并且元素的色彩需要與AI伙伴服飾相呼應，從而使AI伙伴形象更加靈動、場景搭配更加和諧生動。
①基礎色彩范圍制定：
以度曉曉為示例，遍歷目前線上所有度曉曉服飾裝扮，對色彩進行歸類處理，從中提取主題色系，從搜索色庫中對應選出主題色環。
②如何在數字人裝扮中提取主體色：
我們需要把色彩量化，建立特定場景取色規則，根據規則層層篩選，我們可以從中獲取N種主體侯選色。
③校正主體色，與搜索智庫色彩形成映射關系：
通過對數字人裝扮的色彩分類，我們以H值為標準，通過調整S值與B值，劃分了12個色相，設定對應色系的H值區間范圍，如智能取色色值在該色相區間范圍內，且吸取到的候選色個數最多，就在對應的色庫卡中選取主體色。
校正原則：色相必須保持是同類色、保持感官明度同頻、保證視障人群的識別度
④建立輔助色搭配規則：
為了保持背景層的色彩氛圍營造，保證其具有清晰的識別度，我們以主體色為起點，選擇了顏色相對較多的鄰近色，在色溫上保持整體色調的一致性，其次利用對比色和互補色，選擇更加豐富多元的色相，制造更強烈的色彩對比，以保證滿足各種使用場景下對色彩的需求。
⑤組件化思維拆解頁面元素：
在梳理了智能取色機制后，我們也在思考，語音面板涉及到的元素過多，往往會面臨不同場景不同適配的情況出現，那么在做到視覺減負的同時，如何能靈活的替換對應元素呢？
我們以組件化思維去拆分設計，進行立體化的分層，將引導層（熱詞推薦引導關注）、信息展示層（承接語音各類狀態與信息）、形象層（強化AI伙伴智能感知）、背景層（烘托視覺氛圍感）羅列出來，各場景可根據需要進行顏色延展，保證視覺樣式達成橫向統一，呈現出更加豐富的視覺內容，避免審美疲勞。
總結本次語音搜索的改版升級，我們通過“構建伙伴認知、滿足情感互動、增強沉浸體驗”等手段，增強AI伙伴的曝光率，進一步向用戶傳達智能搜索的感知，從而促進搜索行為轉化。
構建認知過程中強化AI伙伴形象，增強語音搜索功能拓展性；同時結合“情感化”等全場景引導手段，營造更貼合“人”的互動體驗與情感建立，對每個狀態進行了情感體驗升級；最后重新定制視覺風格，圍繞「年輕化」關鍵點對整體氛圍進行強化，讓語音搜索場景更加年輕、有氛圍感。本次改版上線后，搜索行為、互動行為均有所提升，用戶體驗也得到了顯著提升。
四、寫在最后
我們正處于數字化快速變革的時代，傳統工具的基礎功能已不再滿足用戶的訴求，人們的感官也從現實空間延伸到虛擬空間，AI伙伴會逐漸融入人們的生活，未來語音搜索將不再是一個信息輸入-結果輸出的傳統搜索工具，引入AI伙伴，可以讓搜索更加智能，擁有人類一樣的思維、表達、情感和學習能力，滿足人們更高層次的情感訴求的同時，也可以讓搜索更加簡單有趣。
未來我們持續對語音搜索進行升級，將AI伙伴與搜索鏈接的更加緊密，提升用戶體驗，創造出更多有趣的、創新的、別出心裁的年輕化設計。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn