博學(xué)多聞，不同凡響。
博聞美育，是一款致力于提升用戶文化素養(yǎng)的產(chǎn)品。研發(fā)團(tuán)隊(duì)以“長(zhǎng)見識(shí)，會(huì)思考，懂審美”作為核心理念，設(shè)計(jì)出《中國(guó)故事》《四方采風(fēng)》《高端文學(xué)》等的系列課程。
面對(duì)一個(gè)真正落實(shí)人文素養(yǎng)的全新課程產(chǎn)品，我們作為視覺設(shè)計(jì)師，首先希望的就是為用戶打造出最美的課堂，使用戶在高品質(zhì)的美學(xué)場(chǎng)景中能沉浸式體驗(yàn)到學(xué)習(xí)的樂趣。當(dāng)然，我們同樣希望探尋如何通過設(shè)計(jì)幫助青少年在使用產(chǎn)品時(shí)養(yǎng)成高審美意識(shí)，加強(qiáng)文化自信。
在此次對(duì)博聞產(chǎn)品的視覺品牌設(shè)計(jì)中，設(shè)計(jì)團(tuán)隊(duì)探尋了如何將視覺設(shè)計(jì)體驗(yàn)與課程教學(xué)更好的結(jié)合，以下為我們的設(shè)計(jì)過程以及設(shè)計(jì)成果。
首先，我們通過對(duì)產(chǎn)品特性的分析，明確了此次視覺品牌探索的主要設(shè)計(jì)目標(biāo) —— 重新定義什么是提升學(xué)習(xí)體驗(yàn)的人文素養(yǎng)產(chǎn)品，從用戶視角轉(zhuǎn)變?yōu)閰⑴c者，更加沉浸于課堂。
基于對(duì)設(shè)計(jì)目標(biāo)的進(jìn)一步探索，我們提煉出了提升學(xué)習(xí)體驗(yàn)的三種核心理念：
近年來，國(guó)潮文化與傳統(tǒng)藝術(shù)在青少年群體中“走紅”，成為青年對(duì)話傳統(tǒng)的方式。體現(xiàn)了青少年對(duì)中華優(yōu)秀傳統(tǒng)文化的價(jià)值認(rèn)同和情感認(rèn)同。我們希望在青少年養(yǎng)成審美與內(nèi)在的關(guān)鍵階段，也盡到自己的一份小小的努力。
在保留傳統(tǒng)藝術(shù)精華的基礎(chǔ)上，我們尋求視覺上的創(chuàng)新，突破設(shè)計(jì)的思維慣性，使用戶可以通過現(xiàn)代的視覺表達(dá)形式與經(jīng)典文化產(chǎn)生共鳴，傳達(dá)國(guó)風(fēng)之美，多角度喚起青少年用戶對(duì)于傳統(tǒng)經(jīng)典的文化價(jià)值和藝術(shù)價(jià)值的理解。
我們希望將國(guó)風(fēng)之美呈現(xiàn)在用戶面前，將有道博聞系列課程全面包裝成能夠讓學(xué)生身臨其境的國(guó)風(fēng)互動(dòng)課堂，豐富用戶的心智，發(fā)揮產(chǎn)品的雙重價(jià)值。
確立核心理念后，我們將中國(guó)傳統(tǒng)藝術(shù)中的精髓進(jìn)一步提煉，最終選擇了以下關(guān)鍵詞作為視覺設(shè)計(jì)的表現(xiàn)點(diǎn)：
接下來，我們基于各個(gè)關(guān)鍵詞對(duì)具體方案展開探索
容納承載，歷史淵源。
為了確保博聞三個(gè)系列的課程（《中國(guó)故事》《四方采風(fēng)》《高端文學(xué)》）在品牌視覺設(shè)計(jì)上能夠更好的進(jìn)行拓展應(yīng)用、傳播差異化、與用戶情感共鳴。我們結(jié)合了三個(gè)系列課程的特點(diǎn)與對(duì)傳統(tǒng)文化的研究，分別為各個(gè)課程建立了代表性的元素作為超級(jí)符號(hào)，加強(qiáng)用戶的記憶點(diǎn)：
① 中國(guó)故事 —— 講述中華經(jīng)典
中國(guó)故事系列課程會(huì)通過詩(shī)、詞、歌、賦、散文、小說全類型文學(xué)作品，講述中華經(jīng)典。玉璽作為皇帝的玉印，是至高權(quán)力的象征，在各朝各代中見證了各色各樣的傳奇故事。因此選用【玉璽】作為中國(guó)故事的符號(hào)圖形。
四方采風(fēng)系列課程首次“走出屏幕”，采用文化直播結(jié)合外景采拍的形式，在歷史文化名城中講述各地的風(fēng)土人情。使用【中國(guó)古建筑】作為這一系列課程的超級(jí)符號(hào)，見證和反映了各地社會(huì)的發(fā)展和歷史變遷。
高端文學(xué)系列課程將帶領(lǐng)用戶學(xué)習(xí)重磅文學(xué)作品，該系列選用【卷軸】作為代表符號(hào)，卷軸不僅承載了國(guó)人對(duì)中國(guó)繪畫、書法的認(rèn)識(shí)，更是寫入了古人的思想與信念。
在確認(rèn)好三個(gè)系列的代表符號(hào)后，我們將構(gòu)圖一分為二，左邊作為系列的重點(diǎn)信息區(qū)域，右邊作為符號(hào)以及視覺表現(xiàn)區(qū)域。
濃墨淡彩，總相宜。
在視覺品牌的色彩方面，我們從古代寫意的濃墨重彩中，提取出了富有中國(guó)氣質(zhì)的一抹顏料。
歷史厚重的「紅」，風(fēng)光寫意的「綠」，靜心閱讀的「藍(lán)」代表了三個(gè)系列課程各自獨(dú)有的氣質(zhì)。
剛?cè)岵?jì)，行云流水。
我們依據(jù)行楷的筆畫特點(diǎn)，設(shè)計(jì)了三個(gè)系列的第一識(shí)別字體。「行楷」介于楷書與行書之間，比端正的楷書多一分活潑自由，又比隨性的行書多一份端莊。我們?cè)诖诵锌撵`活中增添一抹穩(wěn)重，剛?cè)岵?jì)，恰到好處。
第二識(shí)別字體的設(shè)計(jì)靈感來源于印章。「印章」的歷史可以追溯到戰(zhàn)國(guó)，至今仍在生活中廣泛應(yīng)用，古人鑿銅刻玉，力艱功深，我們希望這種信念依舊可以傳承在青少年的品格中。受到印章印面形式的啟發(fā)，設(shè)計(jì)了第二識(shí)別字體。文字采用現(xiàn)代字體為基礎(chǔ)，增加辨識(shí)性。
清新淡雅，水天一色。
國(guó)畫，以其永恒的藝術(shù)魅力穿越時(shí)空。國(guó)畫的繪制講求布局、造型、運(yùn)筆、賦彩，不拘泥于自然物象的再現(xiàn)，強(qiáng)調(diào)主觀意境的創(chuàng)造，是中華民族傳統(tǒng)文化的瑰寶。我們借鑒了國(guó)畫中工筆畫的「留白」構(gòu)圖理念，并添加水墨畫中的「墨韻」作為細(xì)節(jié)補(bǔ)充，創(chuàng)作了既符合現(xiàn)代視覺風(fēng)格，又不失古韻的插畫；
最終，我們將提煉出的「符號(hào)」「色彩」「書法」「國(guó)畫」這四個(gè)關(guān)鍵詞融合在系列課程之中。
除了設(shè)計(jì)課程產(chǎn)品常規(guī)的講義以及線上頁面，為了進(jìn)一步提升用戶的沉浸式學(xué)習(xí)體驗(yàn)，有道博聞獨(dú)創(chuàng)了「手賬本」這一教輔材料，并且隨課程附贈(zèng)可以使用戶進(jìn)一步體驗(yàn)傳統(tǒng)藝術(shù)魅力的「國(guó)風(fēng)禮盒」。
「手賬本」可以幫助用戶將課上的知識(shí)融會(huì)貫通，并收入「手抄報(bào)」「旅行MAP」「作家名片」「思維導(dǎo)圖」等模塊，讓用戶深度參與到【輸入-加工-輸出】的產(chǎn)品結(jié)構(gòu)中，使用戶充分吸收課堂知識(shí)、加入自己的思考理解，并最終輸出觀點(diǎn)和總結(jié)?！韭?想-做】循環(huán)，鞏固知識(shí)印象。我們最終會(huì)收集用戶的優(yōu)秀作品，并集結(jié)成刊，出版成冊(cè)，進(jìn)一步提升用戶的參與度，增強(qiáng)他們的學(xué)習(xí)熱情。
在手賬本的視覺設(shè)計(jì)中，我們根據(jù)課程內(nèi)容繪制了精美插圖，考慮到用戶書寫的便捷性，設(shè)計(jì)了古風(fēng)的書寫外框，力求用戶可以時(shí)時(shí)刻刻沉浸在充滿國(guó)風(fēng)之美的課堂中，使視覺設(shè)計(jì)與教學(xué)內(nèi)容完美融合。
「國(guó)風(fēng)禮盒」將“長(zhǎng)見識(shí)，會(huì)思考，懂審美”的概念植入到禮盒的選品和包裝中。封面設(shè)計(jì)我們選用了「時(shí)空穿梭」的概念，通過時(shí)空隧道，串聯(lián)古今，大開眼界。禮品內(nèi)容里，充分尊重用戶的喜好，最終選取了「國(guó)畫顏料」「手繪扇子」「國(guó)風(fēng)筆記本」「考古盲盒」。每一份禮品，都充滿著我們對(duì)它的嚴(yán)格要求和對(duì)用戶參與的期待。
“古老的種子，它生命的胚芽蘊(yùn)藏于內(nèi)部，只是需要在新時(shí)代的土壤里播種。” ——泰戈?duì)?/em>
中華傳統(tǒng)文化正是一顆充滿驚喜和生機(jī)的種子，靜待著我們的細(xì)心發(fā)掘。我們會(huì)繼續(xù)探索，用設(shè)計(jì)在新時(shí)代中傳承優(yōu)秀傳統(tǒng)文化。讓傳統(tǒng)藝術(shù)擁抱青少年，讓東方美學(xué)成為青少年心中最引以為豪的文化。
本次有道博聞項(xiàng)目的設(shè)計(jì)過程中，我們牢記以用戶為中心的理念，做與課程產(chǎn)品融合的設(shè)計(jì)，最終收獲了一份寶貴的經(jīng)驗(yàn)，也獲得了用戶的一致好評(píng)和贊許。未來，設(shè)計(jì)團(tuán)隊(duì)也會(huì)堅(jiān)持做以用戶為中心的產(chǎn)品，傳達(dá)設(shè)計(jì)的力量。
相信種子，相信力量。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者： 有道LCT設(shè)計(jì)團(tuán)隊(duì) 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
你有沒有注意過，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過渡），來完成狀態(tài)切換。
當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對(duì)這3部分。
03 Tab Bar動(dòng)態(tài)類型
動(dòng)態(tài)效果由弱到強(qiáng)，視覺層級(jí)由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來排序，但效果不同會(huì)有所差異）
▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡(jiǎn)單的分為：線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長(zhǎng)。
但只是單色修剪，看起來很單調(diào)。我們可以在這個(gè)動(dòng)畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過多吸引用戶注意力。但對(duì)于帶有娛樂類屬性的產(chǎn)品來說，可能會(huì)顯得有些普通。
我們可以考慮使用遮罩來制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來營(yíng)造氛圍。
對(duì)于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場(chǎng)動(dòng)畫。
（物理狀態(tài)：該物體在現(xiàn)實(shí)場(chǎng)景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場(chǎng)方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場(chǎng)方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來完成移動(dòng)和變形，這樣便能營(yíng)造出3d旋轉(zhuǎn)的錯(cuò)覺。
對(duì)于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動(dòng)態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對(duì)裝飾元素下手。（當(dāng)然這類方案很少見，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來替代文字，讓整體更簡(jiǎn)潔。
國(guó)外設(shè)計(jì)師Tubik，通過讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過蒙版來控制整體動(dòng)畫顯示范圍，這個(gè)方案看起來適合科技或游戲類產(chǎn)品。
通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動(dòng)軌跡，便能通過修剪這條軌跡來完成筆畫的移動(dòng)。
▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見的原因在于其動(dòng)態(tài)效果面積大，視覺層級(jí)高，容易過度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。
我們有更簡(jiǎn)單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡(jiǎn)單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大小）
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團(tuán)外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。
這個(gè)效果靈感來源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。
看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說兩句：
每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對(duì)的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見的動(dòng)態(tài)屬性組合方式，所以請(qǐng)不要局限你的想法。
作者：幺零三 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在產(chǎn)品設(shè)計(jì)中，當(dāng)有新上線的功能或隱藏功能時(shí)，我們通常會(huì)給予用戶提示。常見的有小紅點(diǎn)、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。
而人類是視覺生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動(dòng)態(tài)內(nèi)容吸引。
今天來聊一下頁面中常見的動(dòng)態(tài)引導(dǎo)。
當(dāng)你看到這個(gè)頁面時(shí)
我想你會(huì)先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）
而當(dāng)頁面元素都賦予細(xì)節(jié)時(shí)
假如我想讓你關(guān)注到其中某個(gè)較小元素
其實(shí)只需要為它添加動(dòng)態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計(jì)中的動(dòng)態(tài)引導(dǎo)。
▍新功能提示 ?
當(dāng)產(chǎn)品上線新功能時(shí)，設(shè)計(jì)師們都會(huì)根據(jù)功能重要程度，來決定使用什么形式讓入口元素和其他元素區(qū)分開來。常見的有小紅點(diǎn)、標(biāo)簽、氣泡這類靜態(tài)點(diǎn)綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點(diǎn)擊后就會(huì)消失）。當(dāng)然，也有將上述點(diǎn)綴元素動(dòng)態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動(dòng)畫，這在很多電商產(chǎn)品的品類區(qū)經(jīng)?？梢钥吹健?
動(dòng)態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對(duì)元素的注意力（與動(dòng)態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動(dòng)畫，因此可以持續(xù)吸引用戶注意力。
ps：據(jù)說，每當(dāng)頁面多出一個(gè)會(huì)動(dòng)的元素，后臺(tái)就會(huì)多出這樣一些留言，捅了開發(fā)窩了[Doge]。
▍誘導(dǎo)用戶操作 ?
動(dòng)態(tài)引導(dǎo)還常常被設(shè)計(jì)師用來強(qiáng)調(diào)重要內(nèi)容（有可能被產(chǎn)品、運(yùn)營(yíng)拿刀架脖子），來達(dá)成某些數(shù)據(jù)指標(biāo)，通過利用動(dòng)態(tài)誘導(dǎo)用戶操作。
例如：在會(huì)員卡片中添加光效、在廣告中讓按鈕進(jìn)行縮放、為簽到入口圖標(biāo)設(shè)置動(dòng)畫。
這些都能充分引起用戶注意，甚至提升功能點(diǎn)擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動(dòng)端，受屏幕大小限制，設(shè)計(jì)師通常會(huì)折疊或隱藏不常用的功能，來保持頁面簡(jiǎn)潔。
對(duì)于這些不可見的功能，在初次使用時(shí)需要進(jìn)行引導(dǎo)，才能被用戶感知與使用。
▍操作教學(xué)指引 ?
講到引導(dǎo)，還必須要提的是手勢(shì)引導(dǎo)，通過動(dòng)態(tài)直觀展示不同手勢(shì)的作用，提示用戶如何與產(chǎn)品進(jìn)行交互。
這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當(dāng)你第一打開視頻時(shí)， App 會(huì)提醒你雙擊屏幕可以點(diǎn)贊，上下滑動(dòng)可以切換視頻。
在產(chǎn)品交互設(shè)計(jì)中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動(dòng)態(tài)敘述的直觀性，使得我們可以減少對(duì)復(fù)雜信息進(jìn)行大量文字描述。通過動(dòng)態(tài)設(shè)計(jì)，我們可以創(chuàng)建視覺故事，這有助于將復(fù)雜信息以更簡(jiǎn)單、清晰的方式進(jìn)行傳遞，從而幫助用戶快速完成任務(wù)。
也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開始應(yīng)用。
但是需要注意的是，上述這些大多都只在第一次使用時(shí)才會(huì)觸發(fā)。
當(dāng)然有特例，例如：
在 App Store 每次下載應(yīng)用進(jìn)行驗(yàn)證時(shí)（面容解鎖的情況下），系統(tǒng)會(huì)通過動(dòng)態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進(jìn)行人臉識(shí)別。
在掃碼時(shí)，弱光場(chǎng)景下出現(xiàn)的手電筒，通過動(dòng)態(tài)引起用戶注意，指引用戶使用。
以及作為動(dòng)態(tài)演示，幫助用戶理解如何使用手掌滑動(dòng)截屏
如何進(jìn)行NFC感應(yīng)等等..
動(dòng)態(tài)引導(dǎo)像是設(shè)計(jì)師用來控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗(yàn)，有的人用它提升商業(yè)轉(zhuǎn)化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
感謝大家看到這里，我是幺零三，咱們下期見...
作者：幺零三 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
Web 開發(fā)是設(shè)計(jì)、開發(fā)和維護(hù)網(wǎng)站的數(shù)字過程。SEO，搜索引擎優(yōu)化，是一種優(yōu)化網(wǎng)站內(nèi)容和元數(shù)據(jù)的做法，以提高其在 Google 等搜索引擎中的可見度或排名。在本文中，您將獲得決定走哪條路線所需的所有信息！
在搜索引擎優(yōu)化 (SEO) 中，對(duì)網(wǎng)站或網(wǎng)頁進(jìn)行優(yōu)化以提高其可見性。SEO 可以被認(rèn)為是在線成功的“秘密武器”。它可以幫助您的網(wǎng)站在搜索結(jié)果中排名更高，為您的網(wǎng)站帶來更多流量并增加您的底線。
?基本上有兩種類型的搜索引擎優(yōu)化：內(nèi)容營(yíng)銷和搜索引擎優(yōu)化。內(nèi)容營(yíng)銷就是創(chuàng)造有價(jià)值的、高質(zhì)量的內(nèi)容，這些內(nèi)容將被其他人共享和鏈接。這種類型的優(yōu)化側(cè)重于提高網(wǎng)站上單個(gè)頁面的可見性和排名，而不是整個(gè)網(wǎng)站。
?搜索引擎優(yōu)化：這 是使您的網(wǎng)站或網(wǎng)頁在搜索引擎中盡可能可見和相關(guān)的過程，編寫出色的內(nèi)容并向網(wǎng)站添加 SEO 關(guān)鍵字。目標(biāo)是為您的網(wǎng)站帶來更多流量，以便您可以從廣告收入或通過這些訪問者產(chǎn)生的銷售中獲利。
有許多不同的技術(shù)可用于 SEO，但最終歸結(jié)為確保您的網(wǎng)站經(jīng)過充分研究和設(shè)計(jì)，使其在任何給定搜索引擎中看起來都不錯(cuò)并且排名靠前。
“搜索引擎優(yōu)化”(SEO) 和“網(wǎng)頁開發(fā)”這兩個(gè)術(shù)語可能會(huì)讓很多人感到不解。那么，兩者有什么區(qū)別呢？SEO 是改進(jìn)網(wǎng)站以使其在搜索引擎結(jié)果頁面(SERP) 中顯示更高的做法。這意味著搜索特定主題信息的人會(huì)更頻繁地找到您的網(wǎng)站。
另一方面，Web 開發(fā)是設(shè)計(jì)、創(chuàng)建和維護(hù)網(wǎng)站的過程。雖然 SEO 專注于改善網(wǎng)站在搜索引擎上的外觀和性能，但 Web 開發(fā)不僅僅包含設(shè)計(jì)和布局。
它包括確保網(wǎng)站在各種設(shè)備上正常工作，優(yōu)化社交媒體平臺(tái)的內(nèi)容，以及開發(fā)電子商務(wù)商店或 CRM 解決方案等自定義功能。
最終， SEO 和 Web 開發(fā)之間的區(qū)別 歸結(jié)為目的。SEO 主要側(cè)重于增加網(wǎng)站的訪問量；而網(wǎng)絡(luò)開發(fā)旨在確保用戶一旦到達(dá)那里就可以真正找到他們正在尋找的東西。在大多數(shù)情況下，最好將這兩種做法結(jié)合起來以達(dá)到您想要的結(jié)果。
如果您正在考慮 Web 開發(fā)或搜索引擎優(yōu)化 (SEO)，在做出選擇之前需要考慮一些事項(xiàng)。下面比較了每種方法及其優(yōu)缺點(diǎn)。
優(yōu)點(diǎn)：您可以從頭開始構(gòu)建自己的網(wǎng)站或博客，或者使用 WordPress 等現(xiàn)有平臺(tái)。如果您想自定義網(wǎng)站的外觀，或者不想自己托管和維護(hù)網(wǎng)站，這是一個(gè)多功能選項(xiàng)。
此外，在大多數(shù)情況下，Web 開發(fā)成本低于 SEO，如果您不確定將來是否需要它，這可能是一個(gè)因素。
缺點(diǎn)：如果您沒有任何構(gòu)建網(wǎng)站的經(jīng)驗(yàn)或不熟悉編碼，則 Web 開發(fā)可能具有挑戰(zhàn)性。
此外，Web 開發(fā)并不總是與所有類型的內(nèi)容兼容——例如，某些博客使用的視頻內(nèi)容無法輕松轉(zhuǎn)換為文本。最后，一些在線流行的網(wǎng)站——如福布斯——是使用網(wǎng)絡(luò)開發(fā)技術(shù)構(gòu)建的，但他們的 SEO 工作是密集且昂貴的。
優(yōu)點(diǎn)： SEO 可以幫助您的網(wǎng)站或博客在與您的主題相關(guān)的特定關(guān)鍵字的搜索結(jié)果中排名更高。這可能會(huì)導(dǎo)致流量和轉(zhuǎn)化率增加，從而可以通過兩種方式提高您的底線：
首先，隨著越來越多的人通過 Google 搜索找到您的網(wǎng)站，廣告收入可能會(huì)增加；其次，某些網(wǎng)站（如 Netflix）提供的高級(jí)會(huì)員服務(wù)需要在搜索引擎結(jié)果中獲得較高的排名。
缺點(diǎn)： SEO 是一個(gè)密集且耗時(shí)的過程，從長(zhǎng)遠(yuǎn)來看可能很難獲得一致的結(jié)果。此外，某些網(wǎng)站內(nèi)容（例如產(chǎn)品說明或博客文章）可能更難通過 SEO 技術(shù)進(jìn)行改進(jìn)，因此如果您想要獲得更好的結(jié)果，則可能需要考慮其他策略。最后，SEO 可能很昂貴，尤其是當(dāng)您針對(duì)高流量關(guān)鍵字時(shí)。
Web 開發(fā)和搜索引擎優(yōu)化 (SEO) 各有利弊。但在你做出決定之前，你需要了解你的優(yōu)先事項(xiàng)。這里有四種策略可以幫助您決定哪一種適合您：
如果 Web 開發(fā)更符合您的風(fēng)格，那就去做吧?？吹侥男燎诠ぷ髟谒阉饕娼Y(jié)果頁面 (SERP) 上獲得更好的排名，您會(huì)感到滿意。
但是，如果您更喜歡 SEO，請(qǐng)準(zhǔn)備好長(zhǎng)時(shí)間投入大量精力。您可能更愿意與顧問一起工作，他們將逐步指導(dǎo)您完成整個(gè)過程，但這也意味著要為他們的服務(wù)支付額外費(fèi)用。
如果您知道您的行業(yè)或地區(qū)流行什么類型的網(wǎng)站，那么 SEO 可能更適合您。搜索引擎會(huì)獎(jiǎng)勵(lì)針對(duì)相關(guān)關(guān)鍵字進(jìn)行了優(yōu)化的網(wǎng)站，因此以這些術(shù)語為目標(biāo)將使您的網(wǎng)站在競(jìng)爭(zhēng)中更具優(yōu)勢(shì)。
如果您不確定從哪里開始，請(qǐng)嘗試使用Google 的 AdWords 工具查看相關(guān)頁面上最常搜索的關(guān)鍵字。這會(huì)給你一些關(guān)于從哪里開始優(yōu)化你的網(wǎng)站內(nèi)容和設(shè)計(jì)的想法。
許多初學(xué)者在沒有先學(xué)習(xí)如何優(yōu)化他們的網(wǎng)站的情況下直接進(jìn)行全面的 SEO 計(jì)劃。這可能會(huì)很快適得其反，因?yàn)樗阉饕鏁?huì)懲罰包含不正確或過時(shí)信息的頁面。
更好的方法是從快速提示和技巧開始，然后逐步采用更全面的策略。這樣，您將有更好的機(jī)會(huì)獲得預(yù)期的結(jié)果，而無需預(yù)先花費(fèi)太多時(shí)間和金錢。
如果您不確定哪種方法適合您，請(qǐng)考慮將每種方法中的一部分結(jié)合起來的混合策略。
例如，您可以定位網(wǎng)站上的關(guān)鍵關(guān)鍵字，但也要確保您的網(wǎng)站針對(duì)搜索引擎結(jié)果頁面 (SERP) 進(jìn)行了優(yōu)化。這將為您帶來兩全其美的效果——增加流量和提高排名。
來源：csdn
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
目錄
監(jiān)測(cè)機(jī)制的變化、Fragments（碎片）的更新、API模式的變更、數(shù)據(jù)的存放、生命周期鉤子、父子傳參等。。
來源：csdn
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
/* JS的輸出語句 */ alert("彈出") document.write("直接在寫頁面上面") console.log("打印在控制臺(tái)上面")
效果:
confirm:
var msg1 = confirm("你好!") //我可以將我們點(diǎn)擊確定和取消的結(jié)果當(dāng)做變量的值 console.log(msg1); //當(dāng)我們點(diǎn)擊確定時(shí)候得到值是一個(gè)true,當(dāng)我們點(diǎn)擊取消的時(shí)候得到的結(jié)果是false
效果如下:
prompt:
var msg = prompt("你可以在這上面輸入一句話") //我們可以把這一句話當(dāng)中一個(gè)變量值,賦值給一個(gè)變量 alert(msg) //將變量的值直接彈出來
效果如下:
舉例:
var a = 10; //合法 var name = "張颯" //合法 var var = "李四" //不合法,不能使用關(guān)鍵字 var 1name = "王八" //不合法,不能以數(shù)字開頭 var alert = "老劉" //合法 var name% = "美麗姐" //不合法,變量的命名要以數(shù)字,字母,下劃線,$組成
注意:常見的關(guān)鍵字,有var ,break, for ,if …
比如:
var userName = "張三" //遵守了小駝峰的命名規(guī)范
比如:
console.log(isNaN("張三")) //true console.log(isNaN(10)) //false
比如:
// 因?yàn)樗袛嗍遣皇菙?shù)字 // 如果是一個(gè)數(shù)字,那結(jié)果直接是false // 如果不是一個(gè)數(shù)字,那么他會(huì)判斷這個(gè)值能不能轉(zhuǎn)換成數(shù)值,如果可以,那么結(jié)果是false,如果不可以,那么結(jié)果是true // boolean與number其實(shí)就是相通的 // boolean類型的true 代表數(shù)值類型的一切非0的值 // boolean類型的false 代表數(shù)值類型的0 console.log(isNaN("123"));//false console.log(isNaN("123a"));//true console.log(isNaN(11));//false console.log(isNaN(true));//false
parseInt先看第一位的值,能不能轉(zhuǎn),如果可以轉(zhuǎn),那么就轉(zhuǎn),如果不能轉(zhuǎn),那么就NaN
parseInt再看第二位的值,能不能轉(zhuǎn),如果可以,那么轉(zhuǎn),如果不能轉(zhuǎn),那就停止了
parseFloat 他比parseInt 多認(rèn)識(shí)了一個(gè)小數(shù)點(diǎn) .
console.log(parseInt(“12a2”))
Stringvar res = String(變量)toString()+var a = 10; var a1 = String(a) console.log(a1, typeof a1); var b1 = a.toString() console.log(b1, typeof b1); console.log(a + "~~", typeof (a + ""));
""
來源：csdn
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
目錄
動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏，vue提供了一個(gè)內(nèi)置的<component>組件，專門用來實(shí)現(xiàn)動(dòng)態(tài)組件的渲染。什么意思呢？接著往下看：
那么內(nèi)置的<component>組件是什么情況呢？component 是可以作為標(biāo)簽使用的，其作用：組件的占位符。當(dāng)然其作為標(biāo)簽直接使用是會(huì)報(bào)錯(cuò)的，還需要搭配屬性值 is ，其表示要渲染的組件的名字。如下：
那么如何去動(dòng)態(tài)的切換組件呢？寫一個(gè)簡(jiǎn)單的button按鈕實(shí)現(xiàn)即可，如下：
當(dāng)我們動(dòng)態(tài)的去創(chuàng)建組件時(shí)，這一點(diǎn)和 v-if 很相似，改變組件會(huì)直接將改變之前的組件的數(shù)據(jù)銷毀掉。如下：
我們給Left組件設(shè)置 +1 按鈕，來表示其數(shù)據(jù)：
用生命周期函數(shù)來監(jiān)聽組件的創(chuàng)建和銷毀：
那我們?nèi)绾卧趧?dòng)態(tài)創(chuàng)建組件的同時(shí)還能暴露組件之前的數(shù)據(jù)呢？這里就需要借助keep-alive。
keep-alive對(duì)應(yīng)的生命周期函數(shù)：
當(dāng)組件被緩存時(shí)，會(huì)自動(dòng)觸發(fā)組件的deactivated生命周期函數(shù)。
當(dāng)組件被激活時(shí)，會(huì)自動(dòng)觸發(fā)組件的activated生命周期函數(shù)。
-
created(){
-
console.log('Left組件被"創(chuàng)建"了');
-
},
-
destroyed(){
-
console.log('Left組件被"銷毀"了');
-
},
-
-
// 當(dāng)組件第一次被創(chuàng)建的時(shí)候，既會(huì)創(chuàng)建created生命周期，也會(huì)執(zhí)行activated生命周期
-
// 當(dāng)組件被激活時(shí)，只會(huì)觸發(fā)activated生命周期，不再觸發(fā)created。因?yàn)榻M件沒有被重新創(chuàng)建
-
activated(){
-
console.log('組件被激活了，activated');
-
},
-
deactivated() {
-
console.log('組件被緩存了，deactivated');
-
},
include屬性用來指定：只有名稱匹配的組件會(huì)被緩存。多個(gè)組件名之間使用英文的逗號(hào)分隔：
exclude屬性用來指定：只有名稱匹配的組件“不“會(huì)被緩存。多個(gè)組件名之間使用英文的逗號(hào)分隔：
插槽（Slot）是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時(shí)，把不確定的、希望由用戶指定的部分定義為插槽。其操作如下：
vue官方規(guī)定：每一個(gè)slot插槽，都要有一個(gè)name名稱，如果省略了slot的name屬性，則有一個(gè)默認(rèn)名稱叫做 default ，默認(rèn)情況下，在使用組件的時(shí)候，提供的內(nèi)容都會(huì)被填充到名字為default的插槽之中。
如果要把內(nèi)容填充到指定名稱的插槽中，需要使用 v-slot：這個(gè)指令，v-slot：后面要跟上插槽的名字，注意：v-slot：指令不能直接用在元素身上，必須用在template標(biāo)簽上。當(dāng)然這個(gè)指令也是有簡(jiǎn)寫形式：# 即可。template：這個(gè)標(biāo)簽是一個(gè)虛擬標(biāo)簽，只其到包裹性質(zhì)的作用，不會(huì)被渲染為任何實(shí)質(zhì)性的 html 元素。
后備內(nèi)容：封裝組件時(shí)，可以為預(yù)留的<slot>插槽提供后備內(nèi)容(默認(rèn)內(nèi)容)。如果組件的使用者沒有為插槽提供任何內(nèi)容，則后備內(nèi)容會(huì)生效。
作用域插槽：在封裝組件時(shí)，為預(yù)留的<slot>提供屬性對(duì)應(yīng)的值。如下：
當(dāng)然上面的作用域插槽數(shù)據(jù)明顯是寫死了，那么可以將數(shù)據(jù)動(dòng)態(tài)存儲(chǔ)在data里面嗎？答案是可以的
來源：csdn
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
顏色可以在很大程度上影響一件設(shè)計(jì)作品的調(diào)性和美觀性，要想抓準(zhǔn)一件設(shè)計(jì)作品的調(diào)性，選擇一個(gè)合適的色彩搭配組合尤為關(guān)鍵，為此，蔥爺花兩天時(shí)間整理了19大設(shè)計(jì)調(diào)性，多達(dá)160種配色方案，趕緊收藏起來以備不時(shí)之需吧。
1. 高端
視覺調(diào)性高端的色彩，通常具有明度低、飽和度低、顏色數(shù)量少等特點(diǎn)，所以很多高端的設(shè)計(jì)都會(huì)以深色作為背景色，因?yàn)樯钌@低調(diào)、更具神秘感，所以給人的感覺更高貴。然后以亞金色、銀色、桔紅色、白色等作為輔助色。
2.科技
想要表現(xiàn)科技感，色彩的整體調(diào)性通常會(huì)偏冷色系，明暗對(duì)比要強(qiáng)，且通常會(huì)使用漸變色。比如以深藍(lán)色到藍(lán)色的漸變作為背景色，然后用高飽和度、高亮度的青色和紫色作為輔助色，這時(shí)這些輔助色就會(huì)非常的跳躍，具有一種發(fā)光的效果。
3.時(shí)尚
其實(shí)所有調(diào)性的配色都應(yīng)該要盡量時(shí)尚一點(diǎn)，即使是想表現(xiàn)復(fù)古，也不能太土，所以這里所說的時(shí)尚特指偏向年輕、潮流的時(shí)尚。這種色彩通常具有飽和度高、明度適中、色相對(duì)比較大等特點(diǎn)。蔥爺這里概括了兩類，一類是以純色作為背景，這種色彩比較適合于品牌設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、畫冊(cè)設(shè)計(jì)等；一類是以漸變色作為背景，這種色彩比較適合于電商設(shè)計(jì)、廣告設(shè)計(jì)等。
4.酷炫
酷炫是指那種視覺效果特別張揚(yáng)、甚至是極具個(gè)性的色彩搭配，比如近幾年比較火的蒸汽波風(fēng)格、酸性風(fēng)格、賽博朋克風(fēng)格、故障風(fēng)格，其色彩就屬于酷炫類的。該類設(shè)計(jì)通常也是以深色作為背景，圖片元素會(huì)使用高飽和度且對(duì)比很強(qiáng)的漸變色，色彩相對(duì)較多。
5.好吃
即讓人感覺很有食欲的色彩搭配，這種色彩通常以暖色為主，比如紅色、橙色、黃色。飽和度較高、明度較低的組合方式通常用于餐飲行業(yè)；而飽和度較低、明度較高的色彩組合通常用于甜點(diǎn)、飲料等行業(yè)。
6.夏天
目前正值火熱的夏季，所以蔥爺專門整理了一些適合表現(xiàn)夏季的好看色彩，該類色彩通常會(huì)以藍(lán)色、青色、綠色這種冷色系最為主要顏色，然后以黃色或紅色、白色作為輔助色，這種色彩組合會(huì)給人清涼、快樂的感覺。
7.清新
小清新的視覺感受為輕松、柔和、淡雅，要達(dá)到這樣的效果，顏色的明度通常是比較高的，飽和度偏低，常用的顏色有淺青色、淺綠色、淺黃色、粉紅色等，在奶茶、女性護(hù)膚品的相關(guān)設(shè)計(jì)中比較常見。
8.快樂
快樂是張揚(yáng)的、是活潑的，所以快樂的色彩飽和度較高、明度不會(huì)太低、色彩的種類會(huì)比較多，通常也是以暖色為主，但是會(huì)搭配冷色一起使用。黃色具有很強(qiáng)的快樂、陽光屬性，所以想要表達(dá)快樂，黃色通常是少不了的。
9.可愛
跟兒童、年輕女性相關(guān)的設(shè)計(jì)，通常需要表現(xiàn)出可愛的調(diào)性，這類色彩通常是用冷色和暖色相互組合，顏色的明度同樣不會(huì)太低，否則會(huì)有壓抑的感覺，另外飽和度也不要過高，飽和度稍低一點(diǎn)效果會(huì)更柔和一些。
10.健康
想到健康我們立馬就會(huì)想藍(lán)天白云、青山、綠色的草地和樹葉，還有黃色的小野花等等，所以藍(lán)色、綠色、青色、黃色、白色都是常用于表現(xiàn)健康的色彩，紅色也可以偶爾作為點(diǎn)綴色加進(jìn)來。由于健康的調(diào)性也是要給人一種舒適、輕松的感覺，所以整體的顏色明度不要太低。
11.運(yùn)動(dòng)
要想讓色彩動(dòng)起來，對(duì)比一定要強(qiáng)，可以是色相對(duì)比、也可以是明度對(duì)比和飽和度對(duì)比。橙色和黃色是兩個(gè)很具活力的的顏色，所以常用于表現(xiàn)運(yùn)動(dòng)的設(shè)計(jì)里。
12.科幻
這是一些科幻電影、機(jī)動(dòng)游戲的海報(bào)設(shè)計(jì)常用的色彩搭配組合，給人的視覺感受是穩(wěn)重而大氣，科技感和神秘感并存，所以背景色通常也比較暗，喜歡用青色和黃色這種比較亮的顏色作為點(diǎn)綴。
13.喜慶
在設(shè)計(jì)節(jié)日海報(bào)或促銷海報(bào)時(shí)，通常需要表現(xiàn)出喜慶的調(diào)性，有些設(shè)計(jì)師會(huì)局限在大紅色、黃色、和橙色里，這樣搭配出來的色彩容易土，而想要解決這個(gè)問題，一方面可以加入冷色搭配使用，另一方面顏色的飽和度和亮度也不要過高。
14.復(fù)古
這類色彩的特點(diǎn)是顏色的飽和度會(huì)相對(duì)低一點(diǎn)，而且大多數(shù)情況下，整體的明度通常也不會(huì)太高，常用類比色搭配和對(duì)比色搭配。
15.中國(guó)風(fēng)
具有中國(guó)風(fēng)特色的顏色和色彩組合有很多，蔥爺這里僅列舉了8個(gè)組合。這類色彩同樣飽和度不會(huì)達(dá)到最高，有點(diǎn)復(fù)古和充滿文化氣息的感覺。胭脂（暗紅色）、緗色（中黃）、紺青（深藍(lán)色）、黛（褐色）等是中國(guó)風(fēng)常用的顏色。
16.夢(mèng)幻
夢(mèng)幻具有奇妙和神秘的感覺，好像在黑暗中找到了一點(diǎn)曙光，奇遇了驚喜一般，所以大多數(shù)情況下，背景色會(huì)使用從深色到亮色的漸變。顏色相對(duì)會(huì)比較豐富，而且以漸變色居多。
17.女性
女性是溫柔的，是感性的，所以該類色彩組合通常為類比色，偶爾會(huì)用一點(diǎn)對(duì)比色作為點(diǎn)綴，以增加畫面的活潑氣息，顏色的明度和飽和度都不能太低，當(dāng)然飽和度最好也不要過高，粉色、紫色是常用于表現(xiàn)女性的色彩。
18.優(yōu)雅
優(yōu)雅可以理解為低調(diào)、高級(jí)、溫和、安靜，所以這類色彩的對(duì)比通常不會(huì)太強(qiáng)，飽和度也會(huì)比較低，整體的色彩調(diào)性會(huì)偏中性，常用卡其色、麻色，還有單色組合及類比色組合。
19.經(jīng)典色彩組合
除了以上十八大調(diào)性，蔥爺還給大家推薦一些經(jīng)典的配色，很難把它們具體歸為哪一類，但是我們?cè)谧龊芏嘣O(shè)計(jì)時(shí)，用上這種配色總能得到不錯(cuò)的效果，比如紅黃黑、紅白藍(lán)、黃綠黑、等等，在很多平面海報(bào)設(shè)計(jì)中經(jīng)常能看到。
以上所列舉的色彩組合，矩形色塊為背景色，圓形色塊為畫面中圖片元素或文字使用的顏色。根據(jù)需要可以把其中的某些純色轉(zhuǎn)變?yōu)閱紊珴u變，或者也可以把某些單色漸變轉(zhuǎn)化為純色。另外，在不包含黑白灰的色彩組合里，仍可以根據(jù)需要自行加入黑白灰，比如用于填充文字的顏色。
當(dāng)然，能體現(xiàn)以上這些調(diào)性的顏色還有很多，大家可以自行補(bǔ)充，建立起自己的色庫(kù)。
標(biāo)題排版在畫冊(cè)設(shè)計(jì)中有著很關(guān)鍵的作用，標(biāo)題排得好可以讓整個(gè)版面的氣質(zhì)提升不少，反之亦然，而很多設(shè)計(jì)師在排畫冊(cè)的標(biāo)題時(shí)，通常都是單純選擇一個(gè)筆畫較粗的字體，把字號(hào)拉大與正文對(duì)齊，這種標(biāo)題的排版太過常規(guī)，容易導(dǎo)致整個(gè)版面缺乏設(shè)計(jì)感，比如下圖。
其實(shí)畫冊(cè)的標(biāo)題也能排出許多新意，本篇文章，蔥爺來給大家分享幾個(gè)可以給畫冊(cè)設(shè)計(jì)加分的標(biāo)題排版技巧。
01.描邊字錯(cuò)位組合
上圖是某院校招生畫冊(cè)的“學(xué)院簡(jiǎn)介”排版，由于太過講究對(duì)齊，缺少變化，所以顯得不夠靈活，我們可以把標(biāo)題的中英文詞匯拆開進(jìn)行錯(cuò)位排版，錯(cuò)位時(shí)要注意左右的平衡，另外，三行錯(cuò)位比起兩行錯(cuò)位的變化會(huì)更豐富一些。
單純只是做錯(cuò)位處理，效果并不怎么好，因?yàn)闆]有層級(jí)關(guān)系，所以可以再加上字號(hào)大小的變化，突出重點(diǎn)詞匯，弱化次要詞匯。
這樣層級(jí)豐富多了，但是眾多很粗很黑的字體擠在一起略顯壓抑，把其中部分詞匯改成描邊后，整體就變得更透氣、更有設(shè)計(jì)感一些了，注意描邊要細(xì)一點(diǎn)，以避免描邊的筆畫重疊在一起影響識(shí)別性和美觀性。
標(biāo)題排好以后，再根據(jù)標(biāo)題調(diào)整一下內(nèi)文、頁眉、頁碼的排版，內(nèi)文通常會(huì)對(duì)齊標(biāo)題中的某個(gè)字詞，但一邊對(duì)齊就好，不需要兩端都對(duì)齊，頁眉、頁碼可以作為裝飾來排版，填充一點(diǎn)顏色可以讓版面變得更活躍。
02.彩色標(biāo)題疊加灰色圖片
還是拿前面的那個(gè)案例舉例，把學(xué)校圖片換成一張沒有去底的矩形照片，然后把它處理成黑白色照，移動(dòng)至版面上方，標(biāo)題使用藍(lán)色壓住圖片的左上角，這時(shí)標(biāo)題就不是孤立的幾行文字了，而是與圖片形成了一個(gè)整體，這種排版方式在網(wǎng)頁設(shè)計(jì)中比較常見，用于畫冊(cè)的標(biāo)題排版，效果也是很不錯(cuò)的。
圖片做出血處理顯得更大氣，左下角的頁碼與標(biāo)題左對(duì)齊，可以加強(qiáng)版面的整體性和關(guān)聯(lián)性。
3.手寫體搭配黑體
同一個(gè)標(biāo)題我們通常只會(huì)使用一種字體（不包括英文），但有時(shí)候也可以試試用兩種字體搭配來使用，比如手寫字體搭配無襯線字體，這兩種字體在風(fēng)格上完全不一樣，對(duì)比非常強(qiáng)烈，能夠給版面帶來新意。
由于該中文標(biāo)題過于簡(jiǎn)短，所以搭配上英文會(huì)更豐富一些。
正文刻意與標(biāo)題進(jìn)行了錯(cuò)位排版，當(dāng)然，同時(shí)也保持著某些對(duì)齊關(guān)系，圖片的排版同樣如此，與正文錯(cuò)位，但與標(biāo)題左對(duì)齊，整個(gè)版面既靈活又很有序，符合學(xué)校畫冊(cè)的調(diào)性。
04.文字疊加色塊
加色塊是標(biāo)題設(shè)計(jì)中常用的手法，但如果只是用一個(gè)色塊把標(biāo)題包住，那么效果是比較普通的，很容易像促銷折頁的做法。所以我們可以只把色塊作為標(biāo)題的一個(gè)裝飾元素，用一個(gè)小小的色塊放在標(biāo)題后面，使其視覺上更豐富、更突出。
圖片的刻意錯(cuò)位很關(guān)鍵，如果圖片與正文兩端對(duì)齊，那么英文標(biāo)題、正文、圖片、頁碼都是沿著一條直線對(duì)齊的，整個(gè)版面就會(huì)變得生硬很多。
文字加色塊還有另一種效果也不錯(cuò)，即把文字色塊合并在一起做成補(bǔ)丁效果，首先把文字錯(cuò)位排版，然后分別給每一行文字加一個(gè)色塊把文字框住，色塊與色塊上下相連。
搭配上序號(hào)和英文標(biāo)題，豐富標(biāo)題的對(duì)比關(guān)系，使其更美觀、更有設(shè)計(jì)感，色塊可以根據(jù)需求適當(dāng)超出文字的長(zhǎng)度。
正文的排版我做了一點(diǎn)改變，把第一段單獨(dú)拿出來作為引文使用，剛好這段文字在內(nèi)容上也正好是起到提前說明的作用，這樣處理后這個(gè)版面也變得有了一些新意，標(biāo)題十分顯目。
05.手寫體跨版
在畫冊(cè)設(shè)計(jì)對(duì)于有些版面，可以排得大氣一點(diǎn)，比如把原本可以1P排完的內(nèi)容排成一個(gè)跨P，這時(shí)標(biāo)題也可以拉大跨版排列，這種做法可以加強(qiáng)文字的大小對(duì)比，也會(huì)有更多留白空間。
為什么用手寫體呢？宋體和黑體不行嗎？其實(shí)也可以，不過由于漢字的筆畫比較復(fù)雜，宋體和黑體又比較方正，所以拉太大排列時(shí)會(huì)顯得不夠靈活，如果是英文則會(huì)好一些，所以在排版的時(shí)候我還做了了傾斜與裁剪處理，并且搭配了英文進(jìn)行錯(cuò)位排版，不然會(huì)顯得過于單調(diào)。
06.標(biāo)題與正文左右排版
在豎版的畫冊(cè)中，我們通常喜歡把標(biāo)題排在正文的上方，而如果把標(biāo)題與正文左右擺放，那么又會(huì)有種不一樣的感覺。
但不要把標(biāo)題與正文水平對(duì)齊，那樣的話標(biāo)題的空間就過小了，會(huì)顯得很壓抑，而是要把標(biāo)題放在正文的左上方，并保持某些對(duì)齊關(guān)系。
如果把這種排版方式看成是分欄網(wǎng)格，那么它屬于不對(duì)稱網(wǎng)格，即正文欄應(yīng)該比標(biāo)題欄更大一些，以保證有足夠大的空間排列正文內(nèi)容。標(biāo)題欄可以有大量留白，頁腳可以與標(biāo)題形成呼應(yīng)，豐富版面的細(xì)節(jié)。
07.扭曲標(biāo)題
這種標(biāo)題處理手法在海報(bào)設(shè)計(jì)中比較常見，其實(shí)國(guó)外很多畫冊(cè)也這么做，效果很酷，沖擊力很強(qiáng)。
用中文來做這種效果行不行呢？也可以，不過不適合太嚴(yán)肅的畫冊(cè)，用在設(shè)計(jì)類和時(shí)尚類的畫冊(cè)中會(huì)比較合適，比如前面列舉過的設(shè)計(jì)書籍的排版。
由于文字較多，所以進(jìn)行分行錯(cuò)位處理，然后在頂部菜單欄中選擇對(duì)象-封套扭曲-用網(wǎng)格建立，把網(wǎng)格參數(shù)設(shè)置為3行5列。
移動(dòng)網(wǎng)格的錨點(diǎn)使文字呈波浪形，如下圖。
拉拽錨點(diǎn)左右兩邊的手柄使波浪形變得柔和一點(diǎn)。
波浪效果做得差不多后，按快捷鍵E調(diào)出自由變換工具面板，并選擇自由扭曲工具，把標(biāo)題扭曲成如下效果。
再調(diào)整一下細(xì)節(jié)，然后把它放在版面中，把內(nèi)容篇章的序號(hào)處理成描邊樣式與標(biāo)題疊加在一起，可以起到裝飾的作用。
扭曲的標(biāo)題搭配上鮮艷一點(diǎn)的顏色，效果會(huì)更時(shí)尚，對(duì)于這種版面，正文也不要排得過于規(guī)矩，所以，我刻意把版面中的兩張圖片做了錯(cuò)位處理。
08.打散排列
通常我們會(huì)把標(biāo)題文字集中排放，但對(duì)于設(shè)計(jì)和時(shí)尚類畫冊(cè)，我們可以打破傳統(tǒng)的做法，把標(biāo)題做適當(dāng)?shù)姆稚⑴虐妫Ч埠懿诲e(cuò)，當(dāng)然，標(biāo)題文字如果太少就不合適了。
另外，為了使標(biāo)題更特別 ，給文字加上下劃線效果會(huì)更好，并且下劃線可以根據(jù)需求適當(dāng)延長(zhǎng)，以加強(qiáng)這些分散文字的關(guān)聯(lián)性，甚至還可以加上英文做裝飾。
正文的排版與標(biāo)題文字左右兩端保持對(duì)齊。
設(shè)計(jì)是一個(gè)不斷嘗試、調(diào)整的過程，排標(biāo)題同樣也是如此。另外，標(biāo)題的排版固然是很重要的，但是想要整體效果得到比較大的改善，正文、圖片、頁眉、頁腳、頁碼的配合也很重要，永遠(yuǎn)要把整體的大效果擺在第一位。
隨著各大智能廠商對(duì)用戶行為數(shù)據(jù)的收集積累，拆分提煉出了不同場(chǎng)景下用戶的特定需求，相比以前的大而全臃腫的功能界面，現(xiàn)在的功能、信息更加精確，產(chǎn)品將不同場(chǎng)景下的解決方案為用戶提前準(zhǔn)備好，用戶只需要簡(jiǎn)單的選擇就好，更加人性便捷：
B&O音箱面向的人群是音樂發(fā)燒友，他們對(duì)音樂有獨(dú)到的理解，為了為用戶提供便捷合乎口味的音樂，B&O將歌曲類型與顏色情感相結(jié)合，分別是：黃色代表愉快的歌曲、紅色代表激情的歌曲、紫色代表憂郁的歌曲、藍(lán)色代表輕松的歌曲。用戶只需要選擇顏色就可以播放相應(yīng)風(fēng)格的音樂，給用戶濃烈的感性藝術(shù)氣息。
并且B&O將音樂播放場(chǎng)景做了細(xì)分：只收聽自己收藏的歌曲、收聽與自己品味相似的歌曲、隨便聽聽；這三個(gè)場(chǎng)景下的需求通過三層圓環(huán)來滿足：點(diǎn)擊外環(huán)區(qū)域播放全網(wǎng)歌曲、點(diǎn)擊中環(huán)區(qū)域播放與用戶收藏相似的歌曲、點(diǎn)擊內(nèi)環(huán)區(qū)域播放用戶收藏的歌曲。這種感性的操作方式省去了搜索歌曲的過程，極大的提高了便捷性。
我們先了解一下三星智能冰箱1.0的系統(tǒng)是什么樣的，首頁包含時(shí)間、天氣顯示、音樂播放、購(gòu)物清單、備忘錄、相冊(cè)、留言板、設(shè)備控制，用戶在冰箱面板上什么都能做，整體感覺是一個(gè)臃腫的功能集合。
在2.0中，三星將用戶使用場(chǎng)景做了以下的細(xì)分：烹飪模式、日常模式、娛樂休閑模式、家庭管理模式；在烹飪場(chǎng)景下，為用戶展現(xiàn)菜譜，用戶可以專注的去研究飯菜制作方法；在日常場(chǎng)景下，為用戶提供日歷、照片墻、留言板、日程等日常生活相關(guān)信息；娛樂場(chǎng)景下，用戶可以在廚房一邊忙碌一邊聽音樂，還可以查看社交消息，所有的功能都是圍繞娛樂休閑；家庭管理場(chǎng)景下，全職媽媽可以一邊做著飯，一邊看著監(jiān)控屏幕上兒童房孩子的情況及全屋的安防情況，也可以控制家中的設(shè)備。
場(chǎng)景細(xì)分可以有重點(diǎn)的為用戶提供他們真正需要的服務(wù)，讓用戶感受到產(chǎn)品帶來的貼心感。
Orvibo根據(jù)用戶使用燈光的習(xí)慣，按照用戶對(duì)于光線的需求程度，將燈光使用場(chǎng)景分為：夜晚光線昏暗需要明亮的光照、白天光線充足不需要燈光、休閑時(shí)需要柔和些的光線、閱讀需要不刺眼但明亮的光線、起夜時(shí)微弱的輪廓照明即可。為用戶提供每種場(chǎng)景下的照明方案，準(zhǔn)確快速的滿足用戶不同的需求。
小米根據(jù)用戶對(duì)于空調(diào)各個(gè)功能的操作頻率，羅列出核心功能：開關(guān)、溫度調(diào)節(jié)、冷熱模式，界面中只體現(xiàn)這幾種種信息，將低頻功能隱藏起來，為視覺降噪，突出核心功能，提升了用戶操控效率。
針對(duì)那些上班中不方便看手機(jī)、穿好衣服正要出門、旅游到達(dá)當(dāng)?shù)鼐频晷枰匆谎厶鞖鉅顩r的場(chǎng)景，WOM提供了簡(jiǎn)潔直觀的設(shè)計(jì)方案，產(chǎn)品顯示區(qū)域只保留4種常見天氣類型，高亮的天氣icon代表當(dāng)前的天氣狀況，當(dāng)天氣將要發(fā)生變化時(shí)，相應(yīng)的天氣icon會(huì)閃爍。
此外，通過利用顏色來傳達(dá)不同的溫度，藍(lán)色代表0℃，白色代表10℃，黃色代表20℃，紅色代表30℃，在不需要手機(jī)的情況下為用戶提供了豐富的展現(xiàn)形式。
隨著手機(jī)的普及，家庭對(duì)于電視的需求已不完全是為了收看節(jié)目，往往一個(gè)禮拜也看不了幾回。三星基于這種情況為了延續(xù)電子屏幕的銷量，賦予了電視裝飾屬性，演變?yōu)榧冋故镜碾娮赢嬁?，用戶可以選擇各種風(fēng)格的肖像或風(fēng)景圖片進(jìn)行輪播展示，扮演藝術(shù)裝飾畫的角色，從而滿足用戶日常家庭裝飾需求。
在設(shè)計(jì)中融入圖片，將操作、狀態(tài)可視化，這些具象的形式可以讓用戶快速理解并操作，讓我們看看各大智能產(chǎn)品廠商是如何實(shí)施的：
大多數(shù)智能設(shè)備買回家后，需要用戶自己安裝，有的甚至牽扯到線路問題，Nest溫控器安裝界面采用與實(shí)物一致的模型元素，讓用戶有參照依據(jù)；通過零部件的運(yùn)動(dòng)告訴用戶安裝順序；通過放大細(xì)節(jié)，告訴用戶應(yīng)該選哪一個(gè)部件及如何鏈接。讓用戶有更好的參與感、成就感，還可以降低公司的人力安裝成本、客服成本。
小米智能家居電視背景運(yùn)用實(shí)物圖片，給用戶營(yíng)造家庭的氛圍，設(shè)備卡片icon運(yùn)用半寫實(shí)風(fēng)格，和實(shí)際產(chǎn)品一一對(duì)應(yīng)，便于用戶快速查找設(shè)備；卡片底部體現(xiàn)設(shè)備狀態(tài)，精簡(jiǎn)的卡片信息使得設(shè)備的狀態(tài)更容易被用戶感知到。
三星、蘋果都運(yùn)用圖片作為系統(tǒng)的背景，可以很好的和用戶拉近距離，通過白色或磨砂卡片與背景做區(qū)分，三星的設(shè)備icon采用多彩漸變風(fēng)格，和它趨于年輕化、時(shí)尚個(gè)性的品牌戰(zhàn)略方向保持一致。
由于洗衣機(jī)、烤箱、冰箱的運(yùn)行模式和用戶想要洗的衣物類型、材質(zhì)、烹飪的食物類型、儲(chǔ)藏的食物類型有強(qiáng)關(guān)聯(lián)，Whirlpool運(yùn)用圖片作為模式背景，將功能和物品類型結(jié)合，用戶可以直觀感性的理解和區(qū)分各個(gè)功能，從而快速做出選擇。
Orvibo在大屏智能面板的設(shè)計(jì)上大量使用圖片元素，不僅可以區(qū)分各個(gè)功能模塊，還增添了內(nèi)容的豐富性，要知道智能面板的首屏和設(shè)備控制列表頁功能是不一樣的，它是用來承接并向用戶展示房間內(nèi)各個(gè)信息的，房間圖片作為背景烘托出家的氛圍，每個(gè)房間頁面的左上角顯示屋內(nèi)溫度、濕度、當(dāng)前開啟的設(shè)備類型及數(shù)量，很直觀的向用戶展示屋內(nèi)信息。
每個(gè)場(chǎng)景都用具體的圖片作為卡片背景，可以讓用戶預(yù)想到每個(gè)場(chǎng)景對(duì)應(yīng)的運(yùn)行效果。有的場(chǎng)景卡片中體現(xiàn)所屬房間信息，告訴用戶該場(chǎng)景只聯(lián)動(dòng)運(yùn)行特定區(qū)域的設(shè)備。
運(yùn)用圖片會(huì)有以下問題：1、找到能體現(xiàn)各個(gè)特定功能的圖片增加了人力成本；2、圖片的多樣性容易打破畫面的整體統(tǒng)一感。所以要結(jié)合公司的現(xiàn)狀克制的運(yùn)用圖片。
Amazon的監(jiān)控設(shè)備卡片背景外顯了房間內(nèi)的監(jiān)控畫面，用戶在設(shè)備列表界面就可以直觀的看到監(jiān)控區(qū)域的信息，強(qiáng)調(diào)了用戶關(guān)注的內(nèi)容，縮短了操作步長(zhǎng)。
通常，我們?cè)O(shè)置時(shí)間時(shí)，系統(tǒng)會(huì)給我彈出時(shí)間選擇控件，需要我們上下滑動(dòng)設(shè)置；Lenovo Smart Clock的做法是將時(shí)、分的設(shè)置具象成了時(shí)鐘實(shí)際運(yùn)行的圓形軌跡，與用戶對(duì)于時(shí)間的認(rèn)知保持一致，很貼心的設(shè)計(jì)，這種方式非常值得我們學(xué)習(xí)。
Google Nest Hub 將傳統(tǒng)的定時(shí)列表具象成了一個(gè)個(gè)正在倒計(jì)時(shí)的時(shí)鐘，用戶可以更直觀的每個(gè)定時(shí)的狀態(tài)。點(diǎn)擊某個(gè)定時(shí)卡片可以快速的進(jìn)行暫?；騽h除操作。
小米空氣凈化器界面，每一檔空氣質(zhì)量值都對(duì)應(yīng)不同的顏色，并且將顏色延續(xù)到了其他操控按鈕，讓用戶對(duì)當(dāng)前空氣質(zhì)量有更強(qiáng)的感知；凈化器被關(guān)閉時(shí)，顯示區(qū)域、控制區(qū)域置灰，明確告知用戶設(shè)備狀態(tài)及可操作區(qū)域。
房屋面積大，會(huì)有很多的設(shè)備與多個(gè)網(wǎng)關(guān)連接，家中與網(wǎng)關(guān)連接的智能設(shè)備有時(shí)候會(huì)連接中斷，具體哪個(gè)設(shè)備與哪個(gè)網(wǎng)關(guān)中斷了不容易被查清。三星SmartThings將設(shè)備與網(wǎng)關(guān)的連接情況可視化，可以向用戶直觀的反映出哪個(gè)設(shè)備連接出了問題。
通過利用不同形式的手勢(shì)操控，讓用戶和產(chǎn)品的交互過程更新穎更便捷。要注意的是雖然手勢(shì)不需要操控物理按鍵，但手勢(shì)操控的形式要建立在用戶已有認(rèn)知習(xí)慣之上，請(qǐng)看以下案例：
最左邊的圖為行程信息截屏操作，目前截圖方式有幾個(gè)按鍵一起按下的，也有手機(jī)背面敲擊三下的，這些都需要與設(shè)備接觸，接觸交互的過程就需要花費(fèi)用戶更多的時(shí)間，LG通過雙手捏合截圖的形式體現(xiàn)現(xiàn)實(shí)中“抓取”的語義，用戶使用起來順其自然，瞬間就可以完成截圖的目標(biāo)。
中間的圖為應(yīng)用快速切換操作，用戶只需要對(duì)著屏幕做揮手動(dòng)作，就可以切換至下一個(gè)應(yīng)用，這個(gè)隔空操控的手勢(shì)核心使用場(chǎng)景是：當(dāng)你正在廚房，手上沾著面粉或其他東西時(shí)，需要操控手機(jī)又不想弄臟手機(jī)，那么隔空操作就可以解決這一痛點(diǎn)。
最右邊的圖為多媒體音量調(diào)節(jié)，只需要作出旋鈕的動(dòng)作，就可以實(shí)現(xiàn)音量的控制，是不是覺著很Cool。這種新的控制形式可以讓用戶加深對(duì)產(chǎn)品的印象。
在Google Nest Hub的音樂播放界面，當(dāng)你想開啟或暫停音樂播放，只需要手掌隔空朝著屏幕方向做按壓動(dòng)作，就可以快速觸發(fā)相應(yīng)功能，這種方式讓用戶會(huì)感覺很爽，自己就像有了魔力。
早上鬧鐘響起時(shí)，需要用戶選擇關(guān)閉鬧鐘還是稍后提醒，常見的情景是，用戶睜開眼伸手去點(diǎn)擊某個(gè)選項(xiàng)，會(huì)干擾想要接著睡的用戶。Google Nest Hub在此處增加了隔空操控手勢(shì)，用戶如果想關(guān)閉鬧鐘，只需要閉著眼，手掌朝著屏幕一揮手，就可以搞定了，有沒有被寵愛的感覺。
蘋果用戶如果想將手機(jī)上正在聽的歌曲通過HomePod播放，只需要將手機(jī)靠近HomePod，就可以輕松完成音樂投射，整個(gè)過程就像將一個(gè)容器的內(nèi)容倒入到另一個(gè)容器內(nèi)，既充滿趣味性又大大簡(jiǎn)化了音樂播放設(shè)備切換的過程。
通過設(shè)計(jì)語言為用戶提供更多的視覺風(fēng)格，甚至開放編輯權(quán)限讓用戶更自由的制定自己喜歡的形式，這些都可以滿足用戶的個(gè)性化需求及專屬感，請(qǐng)看以下案例：
Sony HUIS遙控器為用戶提供了最大限度的自主編輯權(quán)，用戶可以從后臺(tái)設(shè)定每個(gè)按鍵的形式及功能，也可以在屏幕中設(shè)置戶型圖，方便控制對(duì)應(yīng)的設(shè)備。
甚至可以繪制只有自己理解的專屬圖案，大大提升了專屬感。
用戶具有喜新厭舊的心理，三星智能冰箱為用戶提供了豐富的屏保：有沒有任何信息展示的抽象幾何藝術(shù)畫風(fēng)格、有配合溫度展示的春夏秋冬風(fēng)格、有簡(jiǎn)潔素雅的時(shí)間顯示風(fēng)格、還有照片背景墻風(fēng)格；兼顧了用戶日常裝飾和功能的需求。
Lenovo Smart Clock對(duì)于時(shí)鐘屏保為用戶提供了不同的風(fēng)格，涵蓋了大多數(shù)的人群風(fēng)格喜好：活潑跳躍、實(shí)用直觀、極簡(jiǎn)現(xiàn)代、抽象藝術(shù)、純文字、純數(shù)字等
甚至在同一種風(fēng)格中再細(xì)分為多種色彩搭配方案供用戶選擇。可以說想盡辦法來滿足用戶的個(gè)性化需求。
這里的統(tǒng)一設(shè)計(jì)語言有兩個(gè)方面：一、同一個(gè)功能在不同的智能設(shè)備上布局要一致；二、同一類設(shè)備在APP中的功能布局要一致；操控邏輯統(tǒng)一指的是：產(chǎn)品中設(shè)備的操控方式要和用戶對(duì)實(shí)際設(shè)備的認(rèn)知一致。一致性可以降低學(xué)習(xí)成本，提升更穩(wěn)定的操控體驗(yàn)。請(qǐng)看以下案例：
Nest溫控器及ecobee溫控器在設(shè)備上的設(shè)計(jì)語言和App上的保持一致，方便用戶在多端設(shè)備上的無縫操控體驗(yàn)。移動(dòng)端與智能設(shè)備界面唯一不同的是，移動(dòng)端，同一層級(jí)上展示的功能入口更多，適合更復(fù)雜的操作；
在移動(dòng)端設(shè)置智能面板功能按鍵的界面中，Orvibo將按鍵列表做成與實(shí)物一致的樣式，便于用戶快速找到對(duì)應(yīng)的按鍵進(jìn)行設(shè)置，這是提升智能家居一致體驗(yàn)常見的方式。
在智能家居App中，由于功能種類繁多、內(nèi)容不確定等因素，承載它們的卡片在布局設(shè)計(jì)上面臨很大挑戰(zhàn)，需要兼容各種功能、還要保證卡片的整體一致性及合理的屏效比；在SmartThings智能家居控制系統(tǒng)中，三星對(duì)功能卡片進(jìn)行了統(tǒng)一的部署，卡片左上角為功能名稱，左下角為狀態(tài)信息，右下角區(qū)域?yàn)椴倏貐^(qū)，并且還考慮了只有功能控制沒有狀態(tài)、只有信息沒有功能控制情況下卡片的拓展形式。充分保證了操控的一致體驗(yàn)。
在調(diào)光燈的操作邏輯里有這么個(gè)問題：是將亮度值調(diào)至0%關(guān)閉燈光還是需要一個(gè)單獨(dú)的開關(guān)按鈕?？纯碐oogle是怎么做的，它將調(diào)光區(qū)域與燈的開關(guān)做了區(qū)分，也就是說亮度通過調(diào)光區(qū)域操作最低為1%，需要通過開關(guān)按鈕進(jìn)行關(guān)閉；這樣做的好處是操作邏輯明確，并且當(dāng)用戶在80%亮度下關(guān)閉燈光，下次開啟時(shí)還是80%的亮度，更加人性。
發(fā)表一下個(gè)人的心得，內(nèi)容是關(guān)于如何選擇正確的產(chǎn)品提升方法，目前網(wǎng)上各平臺(tái)的智能產(chǎn)品界面有很多，然而大多都是不落地的概念稿，里面的設(shè)計(jì)稿由于沒有具體場(chǎng)景及需求的約束，大多都無法解決公司實(shí)際項(xiàng)目中的問題，經(jīng)常瀏覽僅能提升個(gè)人審美。只有平時(shí)通過對(duì)各行業(yè)實(shí)際落地產(chǎn)品的搜集積累和分析，才能發(fā)現(xiàn)它們?cè)谔嵘a(chǎn)品體驗(yàn)道路上的共通點(diǎn)、差異點(diǎn)，從而為公司提供真正有價(jià)值的設(shè)計(jì)方案。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn