在產品設計中，當有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點、角標、黑色遮罩+文字提示等這類靜態提示。
而人類是視覺生物，相比于靜態內容，我們的注意力更容易被動態內容吸引。
今天來聊一下頁面中常見的動態引導。
當你看到這個頁面時
我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據閱讀習慣從上到下，從左到右，依次查看其他內容。（大致如下圖）
而當頁面元素都賦予細節時
假如我想讓你關注到其中某個較小元素
其實只需要為它添加動態，便能使其脫穎而出，這就是產品設計中的動態引導。
▍新功能提示 ?
當產品上線新功能時，設計師們都會根據功能重要程度，來決定使用什么形式讓入口元素和其他元素區分開來。常見的有小紅點、標簽、氣泡這類靜態點綴元素（通常這類形式只出現一次，當用戶點擊后就會消失）。當然，也有將上述點綴元素動態處理的。如果入口是圖標，甚至可以為圖標制作動畫，這在很多電商產品的品類區經?？梢钥吹?。
動態處理的形式，比原本的靜態更容易引起用戶對元素的注意力（與動態方式有關），甚至傳遞某種情緒。由于是循環播放的動畫，因此可以持續吸引用戶注意力。
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 開發更符合您的風格，那就去做吧?？吹侥男燎诠ぷ髟谒阉饕娼Y果頁面 (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對于時鐘屏保為用戶提供了不同的風格，涵蓋了大多數的人群風格喜好：活潑跳躍、實用直觀、極簡現代、抽象藝術、純文字、純數字等
甚至在同一種風格中再細分為多種色彩搭配方案供用戶選擇?？梢哉f想盡辦法來滿足用戶的個性化需求。
這里的統一設計語言有兩個方面：一、同一個功能在不同的智能設備上布局要一致；二、同一類設備在APP中的功能布局要一致；操控邏輯統一指的是：產品中設備的操控方式要和用戶對實際設備的認知一致。一致性可以降低學習成本，提升更穩定的操控體驗。請看以下案例：
Nest溫控器及ecobee溫控器在設備上的設計語言和App上的保持一致，方便用戶在多端設備上的無縫操控體驗。移動端與智能設備界面唯一不同的是，移動端，同一層級上展示的功能入口更多，適合更復雜的操作；
在移動端設置智能面板功能按鍵的界面中，Orvibo將按鍵列表做成與實物一致的樣式，便于用戶快速找到對應的按鍵進行設置，這是提升智能家居一致體驗常見的方式。
在智能家居App中，由于功能種類繁多、內容不確定等因素，承載它們的卡片在布局設計上面臨很大挑戰，需要兼容各種功能、還要保證卡片的整體一致性及合理的屏效比；在SmartThings智能家居控制系統中，三星對功能卡片進行了統一的部署，卡片左上角為功能名稱，左下角為狀態信息，右下角區域為操控區，并且還考慮了只有功能控制沒有狀態、只有信息沒有功能控制情況下卡片的拓展形式。充分保證了操控的一致體驗。
在調光燈的操作邏輯里有這么個問題：是將亮度值調至0%關閉燈光還是需要一個單獨的開關按鈕?？纯碐oogle是怎么做的，它將調光區域與燈的開關做了區分，也就是說亮度通過調光區域操作最低為1%，需要通過開關按鈕進行關閉；這樣做的好處是操作邏輯明確，并且當用戶在80%亮度下關閉燈光，下次開啟時還是80%的亮度，更加人性。
發表一下個人的心得，內容是關于如何選擇正確的產品提升方法，目前網上各平臺的智能產品界面有很多，然而大多都是不落地的概念稿，里面的設計稿由于沒有具體場景及需求的約束，大多都無法解決公司實際項目中的問題，經常瀏覽僅能提升個人審美。只有平時通過對各行業實際落地產品的搜集積累和分析，才能發現它們在提升產品體驗道路上的共通點、差異點，從而為公司提供真正有價值的設計方案。
三星上一版本界面標題選用細體字，頭部區域留白，卡片功能區域小，背景選用寫實簡約照片，體現文藝感。
圓形的場景卡片與矩形的設備卡片形成對比，場景卡片與文字上下排列，更加凸顯場景圖片，但文字存在多行、單行顯示，這種表現方式會顯得凌亂。
設備卡片從上到下依次為圖標、設備名、狀態。
新版本標題選用粗體字，標題區域更加緊湊，功能區域展示空間變大，背景使用抽線雙色漸變，更現代時尚。
功能卡片為統一圓角矩形，場景卡片圖文左右排布，底部白色卡片區域可以很好兼容多行、單行文字的情況。
設備卡片從上到下依次為圖標、房間名、設備名、狀態。
底部新增Tab區域，細分為收藏、設備、生活、自動化、菜單5個模塊。
風格布局總結：新版本屏幕利用率更高，粗體字和抽象背景使得內容更凸顯，底部的Tab提供了更多模塊入口，功能分類更合理。
舊版本只有一個首頁，功能都在此被分發，并且功能較為單一。
新版本增加收藏、設備、生活、自動、更多模塊，對用戶使用場景做了細分。
界面頂部的房屋設置、添加、編輯為全局設計，不過在每個模塊中添加的內容不同。
收藏作為用戶每次進入App的第一屏，說明是用戶常用的重要功能，在收藏模塊中，可以添加的內容最多，用戶在此頁面可以完成大多數常用操作。
設備模塊是全屋設備的合集，自動模塊是場景、自動化的合集。
生活模塊主要提供家庭安全監控信息，還可接入其他服務，例如：智能家電監控、智能烹飪服務。
新版本設備卡片主要由設備圖標、房間名、設備名、狀態、控制區構成；房間名域為預留區，保證在不同頁面下的統一性。
設備在離線狀態下，右上角會顯示離線圖標，代替控制按鈕。
只有我們提前羅列出更多的頁面顯示情況，整合并預留可變區域，才能使頁面更統一。
收藏模塊分為3大區域，區域1為狀態通知區；區域2為收藏的場景區；區域3為收藏的服務或設備。這3個區域展示順序是固定的，可以選擇是否展示，無法改變展示順序。
因為每個區域的卡片尺寸是不一樣的，區域固定的好處是，可以保證顯示的統一性。否則大小卡片穿插顯示，還可能會空缺幾個，很影響美觀。并且操控邏輯也是固定的，用戶更容易理解。
點擊收藏模塊右上角添加，可批量選擇內容快速添加收藏。
在非收藏頁，長按卡片，可單獨添加收藏內容。
在設備、場景等新建或編輯界面，可以選擇添加至收藏的選項。省去了后續的單獨添加動作。
在收藏頁，長按卡片，可以進行單獨移除操作。
在收藏編輯頁面，可以批量快速移除移除。滿足了不同的用戶需求。
首次進入，展示的是某個房間內的設備，通過左右滑動進行切換房間，三星可能想為用戶提供模糊操作來提升效率，在房間少的情況下，這種方式比較好。當房間多了，用戶會滑動多次才能到目標房間；當然三星給出了針對精確選擇的方式，點擊左上角的房間入口，可以選擇、編輯房間。
房間多的情況下這2種方式都不是很好的解決方案。
這里要注意的是，三星把“沒有房間”也放進房間列表，供用戶選擇。現實中，有好多設備是不屬于任何房間或者用戶暫時不想放到某個房間，增加無房間選擇可以更靈活的滿足實際使用場景。
在房屋編輯頁面，可以添加房間，在這里三星已經為用戶預設了很多房間類型選項，用戶只需要做選擇，很方便，即使沒有要的，還可以在列表底部選擇自定義。
在設備頁面，只能添加設備、燈光組、監控組。
用戶可以通過關鍵詞搜索、掃碼、設備類型篩選、品牌篩選進行設備添加。
很全，幾乎涵蓋了所有的添加方式。
在添加頁面，第一步要先填寫組的名稱、選擇所在房間，第二步選擇要合并的燈，添加完成跳轉至設備組詳情，方便立即調控。
設備控制頁面采用了模塊化的設計方式，控制區域均為列表形式，不同的設備只需要替換圖標和文字及對應的操控列表，降低新設備重新創作新界面的設計成本。
長按設備卡片，選擇目標房間，可完成單個設備轉移。
選擇設備頁面右上角的移動方式，可以批量進行設備的轉移。
自動模塊包含場景、自動化、第三方設備，它們不具備房間屬性；
點擊右上角的箭頭可以展開或收起對應列表，方便查找內容。
第一步，先填寫場景名稱、選擇圖標、是否要添加到收藏；
第二步，選擇執行的設備，可以根據設備名稱、房間名稱進行快速定位，并且可以批量選擇設備；
第三步，設備添加成功后，根據需要，單獨對設備執行狀態設置。
新建場景的邏輯是：先批量選擇要執行的設備，再單獨設置執行內容。
這種方式的好處是，不易打斷用戶的設置思路，還可以減少操作步長。
新建自動化界面分為觸發條件、執行內容兩大塊；
初始狀態會為用戶提供使用描述，便于用戶操作。
可以通過時間的變化、設備狀態變化、位置變化、天氣變化、安防變化來觸發執行命令。
將設備狀態變化作為觸發條件時，設置邏輯是，完成一個設備的設置才能設置下一個，不能批量選擇。為什么和新建場景的流程不一樣？可能是因為在設置執行條件時，用戶心智里認為設備和狀態聯系更緊一些，并且條件種類不會太多。
當添加了一個以上的設備作為觸發條件時，界面會顯示“同時滿足或滿足任何一個”的選項。
執行內容可以是控制設備、通知給用戶、運行場景、改變安防模式。
可以批量選擇設備，并且可以設置執行延遲時間、自動復位，滿足用戶不同需求。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：土木君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
根據互聯網消費調研中心，了解到戴森的消費者大致有三個特征：高品質消費、重視生活之美、新生活開啟者。重視生活之美的消費者更注重設計美觀、獨特、有辨識度的產品。
戴森品牌定位：高端、黑科技、高顏值。
下面我們通過案例去了解戴森是如何通過設計滿足品牌方和消費人群的。
戴森APP 1.0首頁通過模擬房屋、顏色變化來向用戶直觀展示屋外、屋內的空氣狀態；整體來看擬物化可以很直觀的向用戶展示信息，房屋的造型給用戶一種溫馨家的生活之美，更有辨識度。
屋外主要有天氣、AQI（空氣質量）、溫度、濕度、PM2.5、紫外線等信息；
屋內主要有Wifi強度、房間名稱、屋內空氣質量、溫度、濕度其它信息、設備圖片；
頁面左下角為設備控制入口、右下角為時間設置；底部可以通過左右滑動切換設備類型。
繁多的信息雖然給用戶專業的感覺，但無形之中削弱了信息的層級，并且有的圖標使用不準確，用戶不知道是什么。頁面中使用產品圖可以強化自身產品品牌，增強產品辨識度。
戴森APP 2.0首頁相比1.0，區分了信息層級，增強了操控體驗。
根據用戶使用習慣，屋外只保留了空氣質量等級、溫度、濕度這些常用的信息；
擴大了房間區域，為信息提供更多展示空間，降低視覺干擾。屋內保留Wifi強度、房間名稱、屋內空氣質量、溫度濕度，將設備核心功能入口外顯，用戶可以更便捷去操控設備，提升了易用性。
使用局部放大的產品，用圓形襯底，并且還可以體現設備開關狀態，這樣做可以統一不同產品下的畫面，增強了用戶對于產品狀態的感知，從而強化了產品品牌。
首頁通過上滑、下拉等手勢可以查看關于空氣質量的更多詳細信息，將主次信息分級，既能凸顯首頁主要信息，還不影響用戶快速查看詳情的效率。
相比戴森，Smartmi P1在灰底上只保留空氣質量、Pm2.5、產品圖，大留白，從而凸顯的是簡潔的科技感。
功能上也做了整合，簡化了操控細節，為用戶提供了自動、睡眠、中速、自定義等快捷選擇。
兩個品牌對比來看，戴森體現了家的溫情，Smartmi P1則體現了簡約的科技。
在家電市場中，廠家都希望消費者提高購買頻次，界面底部濾芯的剩余使用時長，可以起到提示用戶及時更換濾芯的作用，從而提高購買頻次。這一點還是值得借鑒的。
通過查看戴森店鋪裝修風格、流程界面縮略圖，發現戴森將它的品牌色——黑色、紫色貫穿至每一個需要引起用戶注意的元素上，視覺感受上更有一種“黑”科技的感覺，強化了品牌感知。
對于空氣質量等級顏色的選擇，戴森與空氣質量指數（AQI）等級顏色保持一致性。
室內室外顏色均可根據空氣質量等級顯示不同效果，可以給用戶提供更加直觀的感受。
Smartmi P1 則是通過文字和部分顏色來體現空氣質量等級，用戶感知弱。
空氣質量詳情頁，戴森和SmartP1均使用色塊體現等級，戴森使用的面積更大，更加明顯，P1則一貫延續留白的簡潔科技感。兩者都有數據分析功能，戴森通過刻度、細線條、更加規整的布局，看上去更具專業性，品質感。
戴森和Smart P1都有各個空氣污染物等級的說明，用戶可以了解當前空氣質量情況及顯示規則。
Smart P1 可以讓用戶設置哪些空氣污染物顯示，空氣污染物等級說明在一頁顯示，用戶需要上下滑動來查找相關污染物。
戴森將污染物類型做成導航形式，用戶可以快速選擇要看的類型；
范圍區間和對應的顏色放一起，強調了他們之間的關聯性，并且可以承載更多的說明信息。
對于硬件廠商，在設計界面時，其中一個重要的需求就是“在界面中體現產品”，從而增強產品的獨特性、辨識度。那么如何做才能恰到好處的向用戶展示產品信息呢？來看看戴森怎么做的，具體主要有兩方面：
1、App中產品出現的節點；2、以什么形式展示產品。
最順其自然的就是在設備控制界面放置對應的產品，其次就是在引導頁中體現，可以很直觀的告知用戶如何操作及產品當前的狀態反饋。
最后還可以在登錄頁、空狀態頁作為裝飾元素出現。
產品展現形式在控制界面及引導頁面要盡可能展示產品當前場景下的樣子。
例如：在調節角度界面，用俯視圖可以更加直觀體現旋轉角度的狀態。
在房屋界面，由于只需要體現設備狀態，所以用45度視角盡可能體現產品獨特的造型細節。
在登錄頁使用產品線框圖作為裝飾元素，減少對文本內容的干擾。
首頁上空氣凈化器選取常用的功能作為快速入口，并且使用圓、圓角矩形作為按鍵外框，我們看它的實體遙控器、產品造型，就知道為什么要用這2種形態了，這樣可以延續戴森的產品特征，使得整體品牌更具辨識度，達到強化品牌滲透的目的。
右下角為設備控制詳情入口，通過使用不透明白底與快捷功能鍵作出區分，還能保持整體性，品質感。
控制詳情頁放置產品實物圖，可以直觀展示產品狀態，功能圖標前期做了區分歸類，保證每一行的圖標尺寸一致的同時確保它們之間的相關性。角度設置界面，產品使用俯視圖，可以直觀展示角度信息。
對于用戶常用的操作使用滑動手勢，例如：風量，長按上下滑動可以很方便設置等級，松手返回確認，風量按鈕可以顯示風量等級條，用戶不僅可以通過數字了解風量等級，還可以通過進度條更直觀感知風量大小。
從畫面中可以看出，同樣的風向設置按鈕，在首頁，點擊后只能進行開啟、關閉風向；進入控制詳情頁，則可以設置具體的角度值；保證在不同場景下即可以快速便捷控制設備，也可以精確控制設備。
最左邊的控制界面是最早的版本，只有啟動或停止機器的功能，使用帶角度的視角來展示機器與場景，并且機器是可以進行移動擦除動畫，體現運行中的狀態，這種方式比較耗費開發時間。
中間的界面是過渡版本，較上一個版本做了優化，采用正視圖，并且增加了運行強度、運行區域、定時功能，底部的地板元素漸變處理減少了畫面對功能入口的干擾，既能體現場景，還更加易用。
最右邊界面為最新版本，放大了產品，減少了不必要的視覺元素，弱化了地板背景；充電圖標和設備狀態放置頂部，與功能區做區分；運行強度選項由展開變成收起，估計這個功能使用頻率較低；運行區域、定時功能的圖標做了優化，更加貼切。視覺和功能得到了完美的平衡。
燈光控制界面，主畫面是燈頂部實物圖，值得一提的是，點擊圖片上的開關按鈕就可以實現燈的開啟關閉，很直接；點擊開關上部的區域，會彈出色溫、亮度調節界面。功能區域和實物結合的形式值得我們學習。
右下角為場景選擇，可以選擇系統自帶的燈光使用場景，例如：讀書模式、休閑模式，也可以自定義，可以方便快速設定光線。
通過對戴森App的分析，我們了解到了可以通過擬物或者將功能控制區與實物結合的方式，提升用戶操控體驗及產品品牌辨識度；對于硬件產品App，要盡可能保持與實物的一致性，突出產品特征，包括按鈕形狀、色彩；還有就是可以學習到戴森為了平衡用戶與品牌方的需求，在視覺層面、交互層面的細微改動下的思考方式。
藍藍設計的小編 http://www.syprn.cn