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