編輯導語：如今隨著科技的不斷發展，人們日常的生活也開始變得智能化，智慧生態逐漸進入到各種領域，從買菜到小區物業等等，如今很多都變得更加智能方便；本文作者分享了關于智慧社區平臺訂單支付及退款結算規則設計，我們一起來了解一下。
筆者現就職于一家房產集團旗下科技公司，整體負責公司各產品線；公司主營智慧社區項目，在當地小有規模，智慧社區平臺包括物業管理系統、社區電商平臺、社區IOT系統、居家養老系統、社區政務系統、二手房交易平臺等6大系統。
各系統后臺獨立，為了方便小區業主，讓用戶在同一個APP上能享受物業服務繳費、線上購物、掃碼充電、會員繳費等等功能，需在用戶端設計不同的支付結算方式。
本文主要分享社區電商系統、物業管理系統、社區IOT系統的訂單支付及退款結算規則設計。
物業系統為SaaS模式，B/S架構，使用平臺公有云服務器，單獨數據庫分區，使用角色為平臺合作的付費物業企業，支付結算需求包括：
社區電商模式以整合社區周邊商家為社區居民提供便捷的O2O服務為主，入駐商家包括社區周邊零售商和服務商。
零售服務場景主要是方便社區居民在線選購社區周邊商品，提供線上下單，線下送貨上門服務，基于之前的業務拓展，支持平臺配送、快遞物流、到店自提、商家送貨上門4種配送方式，其中平臺配送是整合物業服務人員進行社區周邊的送貨上門服務。
綜合各種配送方式及業務場景，支付結算需滿足以下需求：
預約服務場景主要滿足社區居民在線預購社區周邊服務，支付結算需滿足以下需求：
社區IOT系統對接設備包括：社區一卡通、門禁、樓宇對講、停車道閘、電動車充電樁等等；涉及到支付業務的有社區一卡通、電動車充電樁。
社區一卡通支付及結算需滿足以下需求：
電動車充電樁支付及結算需求：
包括以下需求：
由以上需求內容可以看出，各系統的結算場景、結算流程，包括結算對象都存在不一致，但C端支付入口在同一應用端，這就需要在后臺針對不同的業務流程設置不同的結算規則。
筆者對標了國內多個提供聚合支付及分賬服務的平臺，綜合考慮對接成本及費率，最終選擇了某平臺作為對接方。
結算規則設計及注意事項如下：
注意事項：為了保證客戶資金安全及平臺免責，由第三方支付機構與企業直接簽約，且提供單獨的對賬后臺，便于企業查賬，線下支付則直接結算至企業銀行卡賬號，系統只做賬單記錄。
Case1：訂單狀態=待發貨，配送方式=快遞物流/商家送貨上門
計算規則：
示例：
設置店鋪抽成比例5%；
用戶甲下單商品總額為30元，配送方式為快遞物流，物流費5元，使用平臺優惠券抵扣10元，積分抵扣1元，則下單后，用戶需支付24元（24=30+5-10-1）；商家收到結算總額為33.25元(33.25=（30+5）*（1-0.05）)；平臺結算金額為-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），負值，平臺需結算給商家。發生退款后，用戶可收到的退款總額為24元，+積分+優惠券；商家退款總額為33.25元；平臺退款總額為-9.25元，負值，商家需退款給平臺。
Case2：訂單狀態=待發貨，配送方式=平臺快送
計算規則：
示例：
設置店鋪抽成比例5%；
用戶甲下單商品總額為30元，配送方式為小慧快送，物流費5元，使用店鋪優惠券抵扣10元，積分抵扣1元，則下單后，用戶需支付24元（24=30+5-10-1）；商家收到結算總額為19元（19=（30-10）*（1-0.05））；平臺收到的結算金額為5元（5=5-1+（20*0.05））元，正數，用戶結算給平臺。發生退款后，用戶可收到的退款總額為24元，+積分+優惠券；商家退款總額為19元；平臺退款總額為5元，正數，平臺退款給用戶。
Case3：訂單狀態=已完成，配送方式=快遞物流/商家送貨上門，退款商品=全部訂單商品
計算規則：
示例：
設置店鋪抽成比例5%；
用戶甲下單商品總額為30元，配送方式為快遞物流，物流費5元，使用平臺優惠券抵扣10元，積分抵扣1元，則下單后，用戶需支付24元（24=30+5-10-1）；商家收到結算總額為33.25元(33.25=（30+5）*（1-0.05）)；平臺結算金額為-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），負值，平臺需結算給商家。發生退款后，用戶可收到的退款總額為19元（19=24-5），+積分+優惠券；商家退款總額為28.5元（28.5=33.25-5*0.95)；平臺退款總額為-9.5元(-9.5=-9.25-5*0.05)，負值，商家需退款給平臺。
Case4：訂單狀態=已完成，配送方式=平臺快送，退款商品=全部訂單商品
計算規則：
示例：
設置店鋪抽成比例5%；
用戶甲下單商品總額為30元，配送方式為小慧快送，物流費5元，使用店鋪優惠券抵扣10元，積分抵扣1元，則下單后，用戶需支付24元（24=30+5-10-1）；商家收到結算總額為19元（19=（30-10）*（1-0.05））；平臺收到的結算金額為5元（5=5-1+（20*0.05）），正數，用戶結算給平臺。發生退款后，用戶可收到的退款總額為19元（19=24-5），+積分+優惠券；商家退款總額為19元；平臺需退款總額為0元（0=5-5）元，為零，平臺無需退款。
Case5：訂單狀態=已完成，配送方式=快遞物流/商家送貨上門，退款商品=部分商品，部分商品總額/訂單商品總額=α（保留三位小數）
計算規則：
示例：
設置店鋪抽成比例5%；
用戶甲下單商品總額為30元，配送方式為快遞物流，物流費5元，使用平臺優惠券抵扣10元，積分抵扣1元，則下單后，用戶需支付24元（24=30+5-10-1）；商家收到結算總額為33.25元(33.25=（30+5）*（1-0.05）)；平臺結算金額為-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），負值，平臺需結算給商家。用戶申請退款商品總額為20元,α=20/30=0.667，則用戶可收到的退款總額為12.66元（12.66=20-1*0.667-10*0.667），退回積分667；商家退款總額為19元（19=20*0.95）；平臺退款總額為-6.34元（-10*0.667-1*0.667+20*0.05），負值，商家需退款給平臺。
Case6：條件：訂單狀態=已完成，配送方式=平臺快送，退款商品=部分商品，部分商品總額/訂單商品總額=α（保留三位小數）
計算規則：
示例：
設置店鋪抽成比例5%；用戶甲下單商品總額為30元，配送方式為小慧快送，物流費5元，使用店鋪優惠券抵扣10元，積分抵扣1元，則下單后：用戶需支付24元（24=30+5-10-1）；商家收到結算總額為19元（19=（30-10）*（1-0.05））；平臺收到的結算金額為5元（5=5-1+（20*0.05）），正數，用戶結算給平臺。用戶申請退款商品總額為20元,α=20/30=0.667，則用戶可收到的退款總額為12.66元（12.66=20-1*0.667-10*0.667），退回積分667；商家退款總額為12.66元（12.66=（20-10*0.667）*0.95）；平臺需退款總額為0元（0=-1*0.667+(20-10*0.667)*0.05），為零，平臺無需退款。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：人人都是產品經理 作者：正文
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
簡介 ：包容格式是一種用于文本輸入的模式，使用這種模式后，可以讓用戶輸入文本內容時不用關心格式或語法，從而輕松達到預期目標。
例子 ：Google 搜索輸入框
用戶操作界面時只是想完成某件事或某個操作，而不是考慮「正確」的格式或復雜的UI。計算機擅長弄清楚如何處理不同類型的輸入。如果計算機無法正確處理多種類型或格式的文本內容，那么用戶在輸入內容時就會有明顯的受阻感。
所以，讓用戶輸入所需的任何內容，然后讓計算機來處理結構或格式，才是一種比較理想的方法。這種模式可以極大地簡化界面，并使其更容易被用戶理解。
相關資料：
https://zhuanlan.zhihu.com/p/343497540
用戶可能會輸入不同類型、格式的文本內容，而我們希望用戶可以不用太關心格式問題，同時希望界面保持簡潔。很多時候，用戶輸入的數據可能類型、格式不一（例如存在空格、連字符、縮寫或大寫等等），如果提供不同的輸入類型，那么界面就很可能不夠簡潔。這種模式可以很好地將數據類型有效處理。
使用條件：
輸入內容存在不同類型或格式；
希望用戶輸入比較容易；
希望界面簡潔；
核心思想：將界面設計問題轉化為編程問題。
我們需要考慮用戶可能輸入的文本類型：
簡單的例子：只要求輸入一個只有格式不同日期或時間；
復雜的例子：搜索某些關鍵詞，根據關鍵詞獲得不同的結果；
由于業務場景不同，每個應用程序使用此模式的方式可能不同。只要確保軟件對各種輸入格式的響應與用戶期望的一致即可。因此建議與用戶進行真機測試。
用戶需求：將特定股票添加到個人關注列表。
東方財富的股票搜索框，用來幫助用戶快速找到目標股票。該搜索框就使用了「包容格式」這一模式。用戶既可以輸入股票代碼進行查詢，也可以輸入股票的名稱進行查詢。
用戶需求：輸入信用卡號
很多產品都有輸入信用卡號的場景，用戶應該只要輸入16位數字，而不需要明確這 16 位數字的格式。輸入的內容中是否帶有空格對結果不應該有任何影響。
gumroad 的信用卡號輸入框允許用戶隨意輸入他們的信用卡號。信用卡號字段接受空格作為分隔符（不包含空格也可以），然后這個輸入框會立即將輸入的卡號格式化。
用戶需求：創建日程
我們會有很多方式來表示日期，例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日歷中創建日程時，用戶可以輸入各種格式的日期，輸入框都會正常識別到該格式，并按照其日期創建日程。
你可以在下方查看「包容格式」更多的案例：
https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
眾所周知螞蟻集團的B端產品是一個龐大的系統，數量多且功能復雜，而且變動頻繁，常常需要設計師和開發人員能快速做出工作上的配合。同時這類產品中有存在很多類似的頁面以及組件，根據原子設計理論可以得到一些穩定且高復用性的內容。
隨著這兩年B端產品的逐漸白熱化，越來越多的用戶對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻集團體經過大量項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 —— Ant Design。通過組件化設計規范，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
針對B端產品反復出現的一些設計體驗等問題， Ant Design 給出標準的設計原則，實現跨應用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設計界面，既減少了不必要的認知成本，又能夠提升設計的效率?？紤]到需要適應各種定制化的業務場景，設計原則具有一定的靈活性，萬變不離其宗，通過了解設計原則的構建邏輯，高效組織信息、幫助建立用戶與界面的互動等原則性要求，可以衍生出更具場景特性的設計方案。
可以說 Ant design的設計規范攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則，并做了理論之外最佳的設計實踐。其十大設計原則反過來是對書本理論的補充，我在看書的過程結合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補充說明，這也是為什么國內的企業一直以來都很喜歡使用這套組件的原因。
稍微了解 Ant Design 的小伙伴都知道，本系統是針對B端后臺系統，承載媒介是PC端的瀏覽器。使用的人員主要包括：用戶體驗設計師、交互設計師、UI設計師、前端程序員等。
顧名思義『 設計原則 』主要是針對設計師在創作頁面時依照的標準。雖然『 Ant Design的設計原則 』是 Ant Design 系統的一部分，但是前文已經提到，此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華，所以設計師可以把這些原則運用到任何的設計領域，并不要局限于企業后臺系統的PC端產品。
為了方便大家理解，講一個小故事。故事來自于《寫給大家看的設計書》，作者有一年圣誕節收到一份禮物——一本關于植物的百科全書。作者翻閱之后，發現其中有一顆叫約書亞樹的樹，造型奇特，自己從未見過。于是決定出門轉轉，然而發現外面到處都是這種樹。故事到這里就完了。
可能大家會想，這個故事要講一個什么道理呢？簡單來說就是，當你手中有個錘子，滿世界都是釘子。當你了解到下面要講的十個設計原則后，你會發現它們處處都適用。
十大原則如下：
親密原則（Proximity）
對齊原則 (Alignment)
對比原則 (Contrast)
重復原則 (Repetition)
直截了當 (Make it Direct)
簡化交互 (Keep it Lightweight)
足不出戶 (Stay on the Page)
提供邀請 (Provide Invitation)
即時反應 (React Immediately)
巧用過渡 (Use Transition)
對于一個初級設計師而言，想要了解UI用戶體驗等知識，學習 Ant Design 的設計原則算是比較快能上道的，因為 Ant Design 是吸取了很多前輩的精華，提煉而成的系統。打個簡單的比喻，對于設計師而言 Ant Design 就是設計師學習『 視覺規范 』，掌握『 設計原則 』最好的字典。
接下來我就給大家說說我是如何快速理解 Ant Design 的這10條設計原則并運用到工作當中。
Ant Design 定義了10條設計原則，根據『 席克定律 』選項太多不易記憶，于是我找到了這些設計原則的共通性，將其歸為4類，也就是大家只需記住四類設計原則，在工作中適當延展即可。
包含 Ant Design 的設計原則有：『 親密原則 』『 對齊原則 』『 重復原則 』『 對比原則 』。
「視覺層級清晰」的重要性體現在 交互前 用戶看到的內容結構是清晰明確的 。一個層級混亂的界面，任何信息的傳達都是無效的。所以保證清晰的排版布局是人機交互前的基礎。
如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。
縱向間距：在 Ant Design 中，通過「小號間距」「中號間距」「大號間距」這三種規格來劃分信息層次結構。這三種規格分別為：8px（小號間距）、16px（中號間距）、24px（大號間距）。
增加元素：通過增加「分割線」來拉開層次。在這三種規格不適用的情況下，可以通過加減「基礎間距」的倍數，或者增加元素來拉開信息層次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是縱向間距，8 是「基礎間距」。
組合排布：為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。（注：柵格是另外一個模塊的內容，這里不贅述。）
復選框內：在一個組件內部，元素的橫向間距也應該有所不同。
正如「格式塔學派」中的連續律（Law of Continuity）所描述的，人類的視覺系統往往傾向于將看到對象的直線繼續成為直線，曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
格式塔學派（德語：Gestalttheorie）：是心理學重要流派之一，興起于 20 世紀初的德國，又稱為完形心理學；主張人腦的運作原理是整體的，「整體不同于其部件的總和」。——摘自「維基百科」
如果頁面的字段或段落較短、較散時，需要確定一個統一的視覺起點。
推薦使用：標題和正文左對齊，使用了一個視覺起點。
不推薦使用：標題和正文使用了兩個視覺起點，不推薦該種對齊方式，除非刻意強調兩者區別。
冒號對齊：冒號對齊（右對齊）能讓內容鎖定在一定范圍內，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。
為了快速對比數值大小，建議所有數值取相同有效位數，并且右對齊。
對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
注：要實現有效的對比，對比就必須強烈，切不可畏畏縮縮。
為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷， 來突出其中一項相對更重要或者更高頻的操作。
注意：突出的方法，不局限于強化重點項，也可以是弱化其他項。
需要區分主次場景：
不需要區分主次的場景：「通過」和「駁回」都使用次按鈕，系統保持中立。在一些需要用戶慎重決策的場景中，系統應該保持中立，不能替用戶或者誘導用戶做出判斷。
總分關系：通過調整排版、字體、大小等方式來突出層次感，區分總分關系，使得頁面更具張力和節奏感。
常見類型有「靜態對比」、「動態對比」。
靜態對比示例：用不同顏色的點，來表明不同狀態。
動態對比：鼠標懸停時，該項和其他項呈現出明顯不同的視覺效果，響應用戶操作。通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比，以便用戶更好的區分信息。
相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。
重復元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關系等。
線框重復：
設計要素重復：
文案格式重復：
包含 Ant Design 的設計原則有：『 直截了當 』『 足不出戶 』『 簡化交互 』『 即時反應 』。
「交互操作高效」的重要性體現在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題，卻忽略用戶能否理解流程如何操作，那這樣的解決方案也是徒然。有的時候并不是解決實際時間的長短，而是用戶的心理時間是否太長的問題，就像我們打游戲往往會覺得時間過的很快，但是在等待頁面加載時卻不耐煩。
能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉都會引起變化盲視（Change Blindness），導致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。
變化盲視（Change Blindness）：指視覺場景中的某些變化并未被觀察者注意到的心理現象。產生這種現象的原因包括場景中的障礙物，眼球運動、地點的變化，或者是缺乏注意力等。——摘自《維基百科》
心流（Flow）：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產生時同時會有高度的興奮及充實感。——摘自《維基百科》
氣泡提示：對于操作的反饋是必要的，下文會提到，但是為了減少打斷用戶，輕量級的反饋氣泡提示即可。
輸入覆蓋層：鼠標「點擊」圖標觸發；鼠標「點擊」懸浮層以外的其他區塊后，直接保存輸入結果并退出。不用彈窗或跳轉的形式編輯，只需要在觸發圖標附近彈出浮層即可，這樣避免用戶視動線的混亂，減少打斷用戶操作的心流。
正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。eg：不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。
常規的編輯模式，界面都會跳出一個彈窗或者是一個頁面跳轉，無形之中用戶走了更多的流程路徑，如果能在當前頁面就把編輯問題解決掉那就符合了 Ant Design 『 足不出戶 』的設計原則。
文字鏈/圖標編輯：
狀態一：在可編輯行附近出現文字鏈/圖標；
狀態二：鼠標點擊「編輯」后，出現「輸入框」、「確定」、「取消」表單元素，同時光標定位在「輸入框」中。
多字段行內編輯：編輯模式在不破壞整體性的前提下，可擴大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進行編輯模式切換時，需要保證每列的不跳動。
拖放圖片/文件：在早前很多產品在上傳功能上，都是跳出彈窗再選擇文件上傳，現在基本都可以實現拖拽上傳了。這樣的設計大大提高了用戶使用上傳功能的效率。
模糊搜索：系統根據用戶所查詢的關鍵詞，智能匹配可能的結果。
定時自動更新：新增的列表項「高亮」，持續幾秒后恢復正常。不需要用戶手動刷新，減少不冗余的操作。
人們在思考的時候，是需要依靠大腦神經元之間相互傳遞信號，而回憶是需要調用更多的的神經元傳遞信號，簡單地說就是非常費腦子。
搜索歷史：搜索歷史的功能，可以減少用戶的回憶，使得整個體驗更加輕松愉悅。
根據費茨法則（Fitts's Law）所描述的，如果用戶鼠標移動距離越少、對象相對目標越大，那么用戶越容易操作。通過運用上下文工具（即：放在內容中的操作工具），使內容和操作融合，從而簡化交互，起到信息降噪的作用。
費茨法則 ：到達目標的時間是到達目標的距離與目標大小的函數，具體：。其中：1.設備當前位置和目標位置的距離（D）；2.目標的大?。╓）。距離越長，所用時間越長；目標越大，所用時間越短。
列表嵌入層：將列表為多層級時，隱藏弱層級列表內容，可以讓用戶更加直觀地看到重要信息。當我在聚焦某一個列表模塊的內容，鼠標懸浮即可展開。
標簽頁：標簽也換可以將信息內容進行分類，讓用戶更易理解。
漸進式展現：用戶在填寫表單時，會根據當前錄入的數據，展現下一項需要填寫的內容，這樣的展現方式可以屏蔽掉無關緊要的內容。
懸停即現工具：鼠標懸停時，出現操作項。這樣將不重要信息或者操作隱藏起來，不會干擾到用戶瀏覽其他重要內容。
包含 Ant Design 的設計原則有：『 簡化交互 』『 巧用過渡 』『 即時反應 』。
「系統反饋及時」的重要性體現在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣，用戶進行了操作或者內部數據發生了變化，系統就應該立即有一個對應的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。
雖然反饋太多（準確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統，則讓人感覺遲鈍和笨拙，用戶體驗更差。
牛頓第三定律 ：當兩個物體互相作用時，彼此施加于對方的力，其大小相等、方向相反?！浴毒S基百科》
實時預覽：根據用戶的輸入，提供關于密碼強度和有效性的實時反饋提示。
文字鏈熱區：當懸浮在 ID 所在的文字鏈單元格時，鼠標「指針」隨即變為「手型」，單擊即可跳轉。
人腦灰質（Gray Matter）會對動態的事物（eg：移動、形變、色變等）保持敏感。在界面中，適當的加入一些過渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。
Adding: 新加入的信息元素應被告知如何使用，從頁面轉變的信息元素需被重新識別。
Receding: 與當前頁無關的信息元素應采用適當方式移除。
Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。
表格加載：網絡不好或者表格數據過多，都有可能導致加載緩慢，這時有一個小動畫可以緩解用戶的焦慮感。
富列表加載：用戶在打開列表時，頁面無法做到一次性加載所有的數據，同時有為了減少翻頁的繁瑣操作，就有了下拉自動加載的。
頁面加載：當用戶訪問的頁面體量過大時，系統會通過給出倒計時或完成百分比，來緩解用戶焦慮，并且給用戶友好可控的感覺。
滑入與滑出：可以有效構建虛擬空間。
折疊窗口：在視圖切換時，有助于保持上下文，同時也能拓展虛擬空間。
對象增加：在列表/表格中，新增了一個對象。
對象刪除：在列表/表格中，刪除了一個對象。
對象更改：在列表/表格中，更改了一個對象。
狀態一：用戶更改了「詳情」中的值；
狀態二：用戶點擊「保存」后，詳情所在的網格出現「黃底」，表明該對象發生了更改；
狀態三：底色持續幾秒后，恢復正常。
對象呼出：點擊頁面中元素，呼出一個新對象。
用戶常常會疑惑自己的操作是否成功了，哪怕是失敗了也是需要系統反饋，這樣才能安心進行下一步的操作。
頁面反饋結果：
氣泡反饋結果：
包含 Ant Design 的設計原則有：『 提供邀請 』『 足不出戶 』『 即時反應 』。
「用戶自由可控」的重要性體現在 交互前對下一步操作的預判；交互時 不論操作后的結果多嚴重都要允許用戶自主決策；以及交互后 能否對自己的操作結果反悔。
很多富交互模式（eg：「拖放」、「行內編輯」、「上下文工具」）都有一個共同問題，就是缺少易發現性。如果用戶在操作前就能得到下一個交互層次的提醒和暗示，以表明在下一個界面可以做什么。 這樣人機交互的過程往往更加自然、順暢。
點擊刷新：對于設計師而言，最常見的例子要屬花瓣了，我們時長會沉浸在我們瀏覽的瀑布流卡片中，如果系統強行刷新當前頁面，用戶很有可能迷失。邀請用戶主動更新，既不會錯過新的消息，又不會導致我們的心流被打斷。
未完成邀請：用戶在當前頁面無法完成登錄操作，為了減少用戶迷茫的焦慮感，系統告知用戶點擊“更改”鏈接，可以去向何處。
懸停邀請：鼠標「懸?！箷r，出現「選擇此模板」的按鈕。
雖然系統中缺少不了一些危險操作或者不可逆操作(eg：刪除、重置、重裝系統等)，但是仍然要用戶自主決定是否繼續，我們能做的就是讓用戶再三確認。
彈窗提示：雖然彈窗打斷用戶心流，但是對于重要的操作，這樣是最保險的方式。
刪除知識庫提示：是釘釘中，刪除「知識庫」這一重要內容，是不可逆的，系統需要用戶謹慎操作。
如果說「自主決策」中提到的案例都是不可逆的，那「準許反悔」的后果嚴重性會弱一些，系統對用戶的操作沒有那么強的阻斷性，所以要準許用戶反悔的，
刪除撤銷：用戶點擊「刪除」后，直接操作；出現 Message 告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進行下一個操作或者 1 分鐘內不進行任何操作， Message 消失，用戶無法再「撤銷」。
Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業務產品能否成功，但是能幫助業務產品『正確的成功』或者『正確的失敗』。”
如果團隊有一個產品idea，我們需要通過最少的資源開發此產品并投入到市場中，通過聽取用戶反饋，驗證idea是否可行，快速迭代最終做出更完善的產品。但理想是美好的，但現實是骨感的，在前期研發的過程中通常會出現兩個情況。創業團隊沒有足夠的設計資源和時間，前幾個版本的產品通常用戶體驗非常差，這種情況體驗差有可能讓用戶放棄這款產品。創業團隊沒有好的方法論和協作模式，需要磨合，設計和開發進度一延再延，結果錯過了風口，市場被競品搶占，還沒上線就倒閉了。
Ant Design提供了一套完整的界面實現方案，即有代碼框架能直接拿來提高開發效率，每個界面組件都經過螞蟻金服多個項目的考驗，具備優秀的用戶體驗。用Ant Design來做0-1，能快速發布用戶體驗優秀的產品，聽取用戶反饋，快速迭代。
當然，創業是九死一生，市場和用戶口味都充滿了不確定性，誰也沒有能力保證產品是否成功，但是只要你能高效的產出質量優秀的產品，不斷試錯，說不定以后就能成功。
用 Ant Design 就能高效的產出高質量的產品，減少設計和開發的不確定性。
因為我們公司就使用了 Ant Design 的系統，所以時常會與前端小伙伴溝通，以下都是他們在使用過程的感想。
Ant Design 提供的大量功能比較全面且UI風格統一的組件，能幫助開發者快速搭建通用場景下的應用界面。這大概是得益于螞蟻金服業務線上極為廣泛的應用場景，驅動了 Ant Design 團隊通過對使用情況的觀察匯總，整理出來了這么一個組件庫。他們的經驗積累如此之豐富，足以讓這個庫支持大部分其他前端開發者的需要。
其設計團隊給出的設計規范相當詳細且經得起推敲，令許多其他團隊獲益匪淺。
我見過太多宣稱自己在乎用戶體驗的公司，給用戶的產品質量確實比較高，但是自己員工內部使用的系統和管理一團糟。種種不便讓員工經常加班，情緒消極，這樣的團隊抄抄競品達到行業標準體驗還行。要想突破是不可能了，因為創新需要員工有充沛的精力和主動性，天天加班誰還有這精神。
用 Ant Design 系統提供的設計工具和組件框架能給設計師和開發者減少負擔，能用更少的時間呈現給用戶體驗好的產品。這樣帶來的好處不僅僅是設計師和開發者覺得少加班成就感高而幸福，他們重新恢復活力和激情能做出更有創意和競爭力的產品，給公司帶來更大的收益，這是一個三贏的結局。
一定有小伙伴會有這樣的疑問，目前市面上有這么多的第三方設計規范，例如 Ant Design ，Element UI，有必要自己造輪子做一遍嗎？
這里要視情況而定，如果公司產品是初創期，而且研發人手不足，那確實沒有必要自己造輪子。反之在資源足夠的情況下，是有必要設計團隊重新做一套屬于自己產品的規范組件庫的，因為B端自身的業務性決定了市場上沒有萬能的設計規范，那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范，在此基礎上進行修改，效率很低，適配的復雜度和重新開發相差無幾。
對于比較普通的設計解決方案是可以的，但是 Ant Design 包含的組件細節仍有不足，畢竟 Ant Design 沒必要投入過多的精力在組件細節深入度上，規范定義的越是精細，對于產品組件而言可延展性就越差，限制也會越多。而 Ant Design 只需要解決80%企業，80%的通用問題即可。
當市場大部分產品都在使用 Ant Design 設計系統時，產品的同質化就會很嚴重。為了避免這種情況發生，我們就有必要從設計語言、設計原則、設計組件三個部分開始，設計自己的規范。那些大廠的成熟的組件庫該如何用呢？我認為應該把它當成一個字典，有不會的地方，可以去參考人家的成熟的解決方案。
這篇文章簡單的介紹了一下 Ant Design 是什么、 Ant Design 的設計原則是什么以及 Ant Design 的優缺點。當然也重點總結了一下，設計師如何運用 Ant Design 的設計原則，可以將這些原則分為四類：視覺層級清晰、交互操作高效、系統反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設計原則，并將其靈活運用到設計工作中。
參考文獻：
《Ant Design 官網》
《設計心理學 1 》 [美] 唐納德·A·諾曼
《寫給大家看的設計書》 美國羅賓·威廉姆斯(RobinWilliams)
《web界面設計》 Bill Scott Theresa Neil
《維基百科》
《如何評價 Ant Design 這個項目（一個設計語言）？》 龍爪槐守望者
文章來源：站酷 作者：菜菜不甜
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
面對企業級產品，由于系統復雜度和業務領域的專業壁壘，用戶、產品、業務、技術的理解和分析難度都遠遠高于C 端。特別是進入業務深水區，技術術語層出不窮，角色鏈路錯綜交織，場景越來越復雜，在理解和分析業務上設計師需要耗費的精力越來越多，設計師如何高效且深入的分析業務，直接影響到設計解決問題的深入度?；谖浵伣鸱﨏TO 線的業務土壤，我們不斷嘗試打磨，探索出以JCD 為核心的企業級產品設計思維，助力設計師在深耕業務上有章可循，有方法可用。
做企業級產品 3 年多，剛從 C 端業務轉過來時，最大感受是對業務理解起來很艱難。隨著經驗的增加，對 0 到 1 產品駕馭起來輕車熟路，可到業務深水區，還是感覺痛苦。技術術語層出不窮，用戶角色多，一個用戶身兼數個角色，系統之間的關聯關系也很復雜，隨著業務的深入設計師會感覺對產品逐漸失去掌控力。一個簡單的芝麻信用分，需要 20-30 個中后臺產品和各種角色一起協同支撐。然而復雜是守恒的，系統復雜性的總量是一個衡量，當前臺的呈現更簡單時，隱藏在幕后的復雜性就增加了。
我們面臨系統的復雜性表現在三個方面：
多角色，重協同。
鏈路長、錯綜交雜。
技術術語多，業務難理解。
但企業級產品會有一個主線，是從「事情」的角度出發，關注一件又一件事情被完成。企業場景下我們再把事情描述的具體一些，就是一個又一個的 Job 。設計師要做的就是通過設計，包括參與的角色、使用的工具以及協作方式等，讓 Job 被高效完成。
我們先對比一下，從「用戶」視角和從「Job」視角出發，關注的維度有哪些差異呢？從用戶視角出發我們需要關注用戶的個人痛點、情緒、興趣、人種志（年齡、性別、收入）等信息，會更關注人，核心是為了滿足用戶的需求。在Job 視角下，需要關注 Job 的目的、參與角色、協作方式、工具等信息，而且 Job 對角色是有要求的，比如航空公司飛行員，按崗位要求，他需要不斷提升自己業務能力，每年要去復訓兩次，學習新的技能和知識來滿足崗位對飛行員這個角色的要求。
基于我們的業務土壤，以及出發視角，我們探索出一套適合企業級產品的設計思維，JCD（Job - Centered Design ）以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協作關系等。以 Job 被高效完成為決策依據的設計思維。它是一套適用于企業級產品設計的發現問題、解決問題的方法論。
在 JCD 設計思維下，將設計流程分為四個階段，發現、構思、呈現、度量。每個階段下有不同的方法、產出、資產。Ant Design 在「呈現」階段幫設計師大大提升了效能，設計師才有更多的精力投入到「發現」階段去更深入去理解業務和角色。接下來重點分享一下在發現階段的兩個方法，角色分析和業務分析。
常用的 C 端的用戶畫像，如下圖，會關注用戶人口統計學的信息，如名字、性別、年齡、所在地、家庭情況、用戶的習慣、愛好等信息，這些信息在復雜的企業級產品中是不需要去關注的。
在JCD 的視角下，我們企業級產品的角色畫像應該關注的三個維度：角色概覽、工作能力、工作內容。而工作內容是最核心需要關注的信息，包括了工作的描述、工作的痛點、需求和使用的工具。
一個角色往往需要完成多個Job，描述一個Job 包含：
四要素：情景、角色、活動、目標。
一個句式：在什么情景下，角色需要完成什么樣的活動，來達成一個目的。
舉個例子，在飛行前 1.5 小時（情景），角色（飛行員）需要去查看飛機情況（活動 A ）、氣象情況（活動 B ），來判斷能否起飛（目標）。
為了給設計提供具體的依據，我們需要進一步縱向解構Job，來構建 1 個完整 Job 場景，設計師可以階梯式對一個 Job 進行拆分，Job 下面有多個 Activity，Activity 下面有多個 Task 組成，Task 下面有不同的 Action，到這種顆粒度可影響到設計界面中的具體元素。
看一個具體案例，如何拆解一個 Job，首先用我們的上面的四要素和句式描述。Job：飛行前 1.5 小時，飛行員需要查看飛機情況、查看氣象情況，來判斷能否起飛。在飛行員這個角色的 Job 里包含了兩個 Activity ：1. 查看飛機情況；2. 查看氣象情況。查看氣象情況這個 Activity 下包含了三個 Task：1.查看起飛地天氣；2.查看降落地天氣；3.查看備降地天氣。
每個 Task 下面會有不同的 Action。除了 Job 的縱向拆解，我們還需要關注每個 Job 場景下的需求、痛點、費力度、成就感。
做好一件復雜的事情，往往需要多個角色在多個工作場景中協同配合。我們會以Job 場景為核心，梳理角色之間的協作關系，建立全局視角。比如，在飛機起飛前，機組飛行員查看飛機和飛行信息、查看起降地天氣等；同時乘務組空姐們為此次飛行做相應準備工作。準備完畢，機長會通知機組和乘務組開始登機。上飛機后機組需要檢查駕駛艙情況，乘務組檢查客艙情況，檢查完畢，會一起協同機場地勤人員安排乘客登機。完成登機后，飛行員需要聯系機場管制申請起飛........ 設計師可以通過Job 場景去串聯角色之間的協作關系，如下圖。
以上是「角色分析」的方法，是從 Job 出發洞察角色的工作需求以及協作模式，幫助設計師構建角色協同的全局觀。
業務分析的方法是借鑒面向實體的思路幫助設計師去深入分析復雜業務。企業級產品中會有各種技術術語、復雜的數據流轉、業務邏輯等，我們需要一個系統的方法來分析和理解業務，為設計提供準確有深度的信息輸入。我們的用戶大部分是軟件工程師，這個思路可以讓設計師在理解和認知上對齊用戶的心理模型。我們業務分析的有三個維度：
產品定義
實體建模
業務邏輯
通過以上三個維度，從縱向和橫向去深入和全面的理解業務。
通過溝通交流、桌面研究的方法，去了解產品和用戶相關信息，熟悉相關概念和技術背景、沉淀信息資料，來收集產品的信息，具體的產出有名詞庫、產品畫布、產品的關系圖、業務結構圖、產品形態圖等，這里不展開詳述。
實體建模是本次分享的重點，實體建模按照面向實體的思想分析業務，圍繞實體進行問題和內容抽象和分析，聚焦于產品內實體和實體間的關系，以及實體的生命周期的分析。
我們先看什么是實體，參考領域建模（此處感謝幻星給實體的定義）給實體一個定義：實體是產品中客觀存在，具有唯一標識的并可以相互區分的業務載體，通常包含屬性和行為。
企業級產品系統的實體，很多情況下都是熟悉的字母，陌生的單詞，在設計之前設計師如何去準確、系統的去分析實體。
舉個例子，現實世界中，「機票」是一個實體，在產品里，可以把「機票訂單」看成一個實體。圍繞著機票訂單，我們梳理出它的基本屬性信息，以及它具有的所有狀態和對應操作，設計師可以進一步把這些狀態和操作梳理出一個「機票訂單」這個實體從產生到消失整個生命周期經歷的過程。這些分析可以作為后續任務流程和設計細節的信息輸入。
一個實體不能構成一個產品，一個系統會有很多實體存在，我們需要進一步去梳理「機票訂單」與系統中其他實體的聯系。在下圖的案例中，機票訂單與機票是聚合 n：1 關系, 一張機票訂單會包含多張機票，機票訂單與收支明細是關聯 1：n 的關系，一張機票訂單會關聯到多個收支明細，比如會有支付成功、退款等明細。
以上是實體建模的過程，產品定義和實體建模都是對業務內容層進行理解和梳理。但是我們的業務除了內容外，還有很多復雜的業務規則、業務流程，我們也需要進行梳理和分析，這樣設計師才能對業務有全面的理解。
所以我們需要把結合實體、業務規則、業務流程，進一步梳理業務邏輯。最終會得到一張業務邏輯圖，不僅能夠幫助設計師洞察到業務的本質，也能幫設計理解業務的全貌。
第二個方法業務分析，是通過面向對象分析思路去深入的理解業務，為設計提供更精準，更有邏輯的依據。
回顧以上三部分內容，JCD 是什么？Job - Centered Design 是以 Job 為中心的設計思維。JCD 的定義：以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協作關系等。以 Job 被高效完成為決策依據的設計思維。它包含了原則、流程、方法&工具、產出&資產，上面重點分享了其中兩個方法「角色分析」和「業務分析」。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這是5月參加阿里設計周“智能與計算”分論壇后的感想小結，因為論壇大部分在講算法和實現方式，所以在這里我就其中的AI與設計相關部分做一些深入分享。
我的思路大概分為三個部分：AI時代的來臨；AI如何影響設計；未來的設計何去何從。
第一部分：聊聊AI時代來臨，設計的世界發生了什么變化？
每個時代的設計都有不同的定義，農業和工業時代的設計更多是指設計師通過手工制作的方式闡釋自己對美感和藝術的理解。
到了信息時代，設計除了要考慮美感，還要考慮是否實用和好用。設計的對象開始從真實世界轉向數字世界，設計思想開始考慮以用戶為中心的設計；設計方向也增加了很多領域，包括都多媒體藝術、游戲設計、網頁設計、移動應用設計等。
在人工智能時代下，AR設計、智能硬件逐漸發展，設計的改革更多考慮的是如何將真實世界和數字世界進行融合，如何在自己產品上更好地闡釋藝術、美感和實用性。
第二部分，AI如何影響設計，設計因為人工智能而產生了哪些改變呢？
結合論壇的內容，我覺得從以上五個方面產生了較為深遠的影響。
人工智能幫助設計師解決在創意過程中面臨的一系列問題，將重復勞動變得自動化 ，節省設計師大量的時間，減輕設計師的工作量。
數據驅動自動生成，取代人工建模，減少了設計的時間成本。通過組件標準化，來構建三維幾何，然后geometry格式入庫，最后由渲染引擎繪制。
再比如，雙11期間有1.7 億個BANNER，都來自阿里的“鹿班”AI設計系統。設計數據—機器學習、訓練模型—生成設計結果并評估。如果這些工作量由人工來完成，那么設計師真的就成了“沒有感情的作圖機器”了。
當今社會，隨著產業智能的發展，在這個變革中，挑戰不單單來自技術，也來自客戶對智能數字體驗的極致追求。這給開發人員和設計師都提出了全新的難題，在可視化領域，通過技術和設計兩個角色更緊密的捆綁，產生了讓人欣喜的化學反應。
從原始數據到圖表并不是直接的，它需要經過交互的分析，得到指標結果，最終以可視化圖表呈現，而呈現的視覺方式是多樣化的。
這就是所謂的兩種數據，三層講述：
第一步是原始數據的準確轉譯，工具需要數據對接能力，即對現狀的講述。
第二步是分析過程，從腳本模式跨入數據驅動，讓數據的分析變得可知可信。
第三部是觀點數據的表達，也就是創作強化，將結論以可視化的多樣形式被表達。
這是根據地圖的原始數據得到的多種可視化設計方案，同一份原始數據，卻得到了不同的形式表達。
因為僅僅有準確的數據結論是不夠的，因為數據需要更好地被講述和表達，如果僅僅將數據呈現給用戶，那么理解難度將會大大提高，而設計是為了讓產品變得更加容易使被理解和使用。
第二點，體現在建筑的三維可視。
首先，在二維地圖選取建模范圍，通過智能化的處理，根據數據構建初始的三維地圖。
然后通過數據聯動，將城市建筑虛擬還原。
整個過程從數月—> 數周—> 數天，時間大大縮短，人力成本減少，釋放更多的精力去進行創意工作。
建筑三維化的應用：比如車道級地圖。
相比于傳統地圖，車道級地圖導航在信息精細度、定位準確性、動態信息豐富度上有大幅提升。
車道級導航能清晰顯示道路上的虛實標線、自己的車行駛在哪條車道上，還能在地圖上看到車身攝像頭和雷達檢測到的周圍車輛、錐桶、防撞桶等。
當設計對象從單個產品轉變到用戶的經歷和當前環境時，設計師不能只考慮自己的產品體驗，需要從大局出發，思考每個產品之間的聯動，考慮不同場景下自己的產品如何服務用戶以及如何與其他產品聯動。產品設計從單體變成一塊需要考慮兼容上下左右外部環境的拼圖。
智能化的場景的改變對設計有哪些影響呢，我們來看這張圖：設計的場景從有形—>無形、靜態—>動態、永恒—>瞬間的轉變。體驗設計的趨勢從GUI到TUI(實體交互)，再到Radical Atoms，場景的改變對設計的影響維度不是單一的。
設計場景在AI時代不僅局限于手機，還涉及到實時場景的設計情況。
比如谷歌的實時翻譯、語音翻譯。輸入與輸出是同步進行的，這就對設計提出了新的要求。
此外，還有語音智能VUI，徹底打破了以往的交互體驗，改變了人和工具之間的互動關系，反向塑造著人類的認知方式和學習行為。下面來看一個小愛5.0案例：
對話是人與人之間交換信息的普遍方式，語音交互設計涉及系統學、語言學和心理學，因此它比 GUI的交互設計更加復雜。
體驗設計經歷了PC時代、Mobile時代，現在進入IoT體驗時代。設計的解決方案與技術的發展息息相關，設計和技術互相促進帶來新的體驗革命，設計師一直在探討和實踐在新技術環境下的新體驗設計，并基于出行、醫療、社區、政務等行業持續挖掘服務聚合模式與場景體驗的創新。
在新零售的場景下，購買和支付流程發生了改變，這就需要設計師重新思考消費者的心理地圖。例如無人零售、Amazon Go、支付寶IOT支付等等。下面來看一下Amazon Go的案例：
如何讓用戶使用更便捷、體驗更順暢；要向用戶提供什么樣的服務，如何讓用戶注意到我們的產品，如何向他們傳遞企業的服務價值和特點，這是IOT新零售下需要設計深入研究的方面。
在云端實現企業產品的全區域管控，監控的設計視覺和交互又是不一樣的，比如論壇上的案例：荷魯斯之眼、全區域覆蓋的云監控等等。
通過對多個實體空間中的數字設計探索，重新塑造人與空間的交互界面，提升人們對于空間的使用體驗。下面舉個例子：
AT&T discovery district是一個數字化的互動商業社區。
它從重新審視建筑本體開始。通過虛實和光影的變幻，營造出了實體空間體驗，空間本體就是對話的那個界面。實體空間和數字內容的結合，構建出人與建筑之間新的交互界面。
廣場的數字球體入口，人的位置和數量變動，球體內的燈光也會跟隨變動。
人工智能促使了交叉學科的工種產生：數字體驗設計師、創意工程師。這兩種職業是做什么呢？面對正在到來的智能時代，體驗設計師和創意工程師將共同面對“AI”這一全新的命題，在智慧工地、智慧教育、數字警務室、神經符號AI等應用中，提煉出智能感設計方法、利用圖形技術能力自研產品并賦能業務。
數字世界中的設計師：橫跨了藝術、文化、科學、商業多個學科；從傳播學、心理學、應用科學和統計學進行用研，去解決用戶遇到的問題。
它不僅涉及到需求分析和產品設計，還貫穿至產品運維、測試、發布、分析，從設計洞察中做出創新設計。
未來的設計師將融合人工智能和創意編程技術，在世界數智化的大潮中找到新的定位和新的機遇。
第三部分，在人工智能時代下，未來的設計會走向哪里？新時代的設計師怎樣找準自己的定位呢？
人工智能的成熟對部分設計師來說簡直是災難性的打擊，之前無論是通過技法還是數據分析才能完成的工作，人工智能一下子就可以完成，后續根本不需要這么多設計師來完成這些工作。那么設計師是否會被人工智能取代？我們先來看一張人類能力地圖：
這張圖中，海拔高度代表這項任務被計算機執行的難度，不斷上漲的海平面代表計算機現在能做的事情。從圖中可以看出，目前人工智能水平預警線距離代表藝術的山峰還很遠。
人工智能沒有人類的跨領域推理、抽象類比能力，也沒有人類的主觀能力如靈感、感覺和感受；更沒有人類特有的靈魂、愛、意識、理想、意圖、同理心、價值觀、人生觀等，這導致人工智能在未來很長一段時間內都無法很好理解人類的心理和行為是什么，在解決推理和情感問題時會不盡人意。
設計除了解決問題外，還涉及對美的理解和創作，美感是對美的體會和感受，它是復雜的，包含了歷史、文化、環境、情感等客觀因素和主觀因素，所以在不同的時代、階級、民族和環境中，有著不同文化文化修養和個性特征的人對美的定義也不同。
人工智能依賴數據和經驗解決問題，它能解決大部分智力可解決的問題，但解決不了需要情感和美感才能解決的問題。而設計的擅長領域，是人工智能不擅長的：跨領域推理、抽象能力、常識、審美、自我意識與情感。那么AI與設計的關系怎樣的呢？
設計是為了解決問題。人工智能使機器代替人類實現認知、識別、分析、決策等功能，其本質是為了讓機器幫助人類解決問題，也就是說，人工智能在一定程度上也是一種設計，它會創作出與人類思維模式類似的解決方案。所以AI與設計師是一種共生關系。因此設計師不用杞人憂天，擔心自己被人工智能取代。
隨著AI 技術的成熟，設計必定會發生新一輪的變化，在未來，更多領域和行業需要用到界面設計、人機交互等技能，各行各業的設計師需要掌握以上技能才能更好地服務當前業務。那么未來的設計將走向哪里呢？
新一代的設計師是“與互聯網共同成長的一代”，相信在未來幾年里有更多的新晉設計師會掌握編程開發能力以及其他能力，綜合素質會比目前的設計師更強，所以我們要保持終身學習，懂得如何將自己的能力和經驗轉換為優勢，這樣才能在設計道路上不被超越。
那設計師可以從哪些方面來應對智能時代的機遇和挑戰呢？
每一代人都有被下一代人取代的風險，但有些很厲害的人就不容易被取代？因為他們在不斷創造價值。無論在社會、行業還是在企業里，當具備一定的影響力后，他們能更容易積累人脈和資源，然后反哺自己的價值，就跟滾雪球一樣，當雪球越大，他們越不容易被別人取代，設計師需要有這樣的意識。
設計師需要懂得更多領域的知識和技術才能拓寬自己的視野，這些領域包括但不局限于傳感技術、網絡技術、智能仿真技術、虛擬技術、生物技術、納米技術等。因此科學與藝術是可以并且很有必要相通與交融的，設計師一定要學會跨界思考。人工智能時代下，數字世界和物理世界會逐漸融合，大到城市建設、公共服務、衣食住行和醫療；小到智能家居、穿戴式設備，這些機會將會留給已準備好的挑戰者，所以設計師一定要拓寬自己的視野，不要把自己的目光局限在界面設計上。
如果不想被人工智能領先，人類的設計應該是創新的（未成熟、未被發現規律的），包含更多元素的（更多復雜參數如歷史、文化、環境、情感等），“設計”這個詞語就涵蓋了以上元素。人工智能在藝術設計上還遠遠達不到人類的水平，深耕藝術設計將會為設計師帶來更多機會。
在人工智能時代下，當產品基本都能滿足永不需求時，能為產品帶來活力和差異的除了自身的底層技術基礎，更多的是藝術型設計師的理念和風格，以及自身的品牌。就像時尚品牌優衣庫和Gucci，單件商品兩者的品牌和設計所帶來的的利潤差距巨大，相信未來的人工智能產品也會面臨類似的問題，設計師應該考慮如何為產品賦予更多價值，如何彰顯用戶的個性。
既然AI是一個強大的工具，那么我們要思考如何運用它來創造更多的價值。AI能夠快速便捷地獲取大量信息，幫助設計師拓展自己的視野，不斷更新自己的世界觀，從新的視角看待問題和解決問題。除了快速獲取信息外，設計師也應該考慮如何通過AI提高自己的工作效率，例如哪些純勞動力工作交給AI去做效率會更高；哪些工作可以和AI一起協同完成更能激發創意。
最后，用一本科普書改編的話來結尾：一想到，還有95%的問題留給開發同學，我就放心了。
最后附上一張本文的腦圖：
參考資料：
[1]阿里設計周.智能與計算.2021
[2]薛志榮.AI改變設計.2019
[3][美]詹姆斯·弗拉霍斯.智能語音時代.2019
[4][美]梅瑞狄斯·布魯薩德.人工不智能.2018
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
智能家居越來越普及，智能化的生活是由一個個智能設備組成，這次通過近距離體驗智能面板，來研究一下它們是如何提升產品體驗的。
隨著互聯網的發展，生活智能化越來越普及，各類智能產品逐漸出現到人們面前，在體驗的過程中，其實里面有很多細節需要深挖和思考。很多產品細節的背后都是為了提升用戶操作效率、兼容用戶使用場景、滿足用戶情感表達，以最終達到對用戶體驗的提升。作為智能產品的設計師只有充分了解市面上的智能產品，才能設計出更好的產品。
開關對于每個人都不陌生，它用來控制設備的狀態，傳統開關的數量和要控制的設備數量有關，設備越多，開關越多，為了簡化人們的操作，智能面板孕育而出，它不僅可以操控家中單獨的設備，還可以對一系列設備進行聯動控制。
1. 使用場景
室內近場控制，滿足用戶家中近距離控制設備的場景。
2. 產品選擇
Gira、ORVIBO、綠米
為什么選他們？
3. 研究方向
本文將從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
Gira g1
TFT 屏、KNX 協議、定價 8000 元起
KNX 屬于歐洲總線技術，穩定性最好，需要從設計階段介入，高門檻的技術要求讓 KNX 難以實現全民普及。
ORVIBO 智能開關
多點觸控電容屏、Wifi、藍牙、Zigbee、定價 899 元
Wifi、藍牙、Zigbee 屬于無線通信技術，穩定性不如 KNX，但免布線，易擴展，利于全民普及。
Aqara 智能開關 S1 觸摸屏
IPS 屏、zigbee 協議、定價 899 左右
通過以上分析，Gira 的人群定位是有全屋定制需求的高消費人群，其他兩個品牌的人群定位是面向嘗鮮體驗的廣大普通消費群體。
1. 功能點對比
通過功能列表中的對比發現，三個品牌的產品都通過場景聯動設備執行來提高人們的操控體驗，通過左右滑動來快速切換功能模塊類型；
Gira 和 ORVIBO 支持快速返回首頁、面板內排序；
ORVIBO 的個性化體驗最好，它具有語音控制、設備自動添加、設備自動歸類功能，這些差異點讓它比其他兩個產品更加智能。
以 Gira G1 為例，從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
界面整體用以黑白灰為主，搭配少量顏色，給人簡潔干凈的感覺；
思考：智能面板除了具有功能屬性，還具有裝飾屬性，黑白灰為經典搭配，可以更好兼容各種家裝風格，還可以更好的展現內容；少量的顏色用來強調正在運行的設備狀態。
輔助色大方向上使用兩對互補色，在色環上形成了一個矩形，通過調節亮度飽和度達到統一和諧多彩的效果。
主要分為 2 大層級：功能卡片列表、設置為第一層級，設備控制為第二層級；
對于 gira 這種全屋定制的產品，家中一般會有很多設備，功能卡片放置在第一層級的好處是，便于用戶瀏覽鎖定目標功能卡片。
區域 1 顯示 KNX 協議類型，室內外溫度，時間；這部分內容占比很小，說明這些內容用戶不常用，但用戶會偶爾還是會看一下；
區域 2 為房屋名稱，返回上一級、返回首頁、設置、展示形式切換，這一區域全局置頂顯示，用戶在多級操作后，可以很快速的返回到首頁；
區域 3 顯示設備、場景的數量，用戶可以清楚的掌握家中設備場景的數量；
區域 4 為設備場景列表，用灰色背景來強調主操作區域。
一屏最多 6 個設備，通過左右滑動來展示更多設備
思考：為什么不是上下滑動，而是左右滑動
有 2 點猜測：
卡片內容從上到下依次為設備場景 icon、名稱、狀態及快捷操作；
用戶可以通過 icon 快速鎖定設備類型，通過名稱確定目標設備，進行快速操作；
各功能模塊獨立劃分，快捷操作區域可以很好的兼容不同設備的功能鍵。
操控界面劃分為 2 部分，一部分為信息展示區，內容為設備名稱、所屬區域；
另一部分為控制區，這部分區域固定，可以讓不同的設備控制看起來更統一；
大面積區域留給核心功能，輔助功能布局在四周，便于用戶準確操控。
設備控制界面通過左右劃動快速切換其他設備，不需要返回菜單界面。
手掌長按屏幕，可喚起提前設置好的開關功能，這時面板相當于簡單的開關，可以很快速的關閉開啟所在區域的燈。
Gira 這樣做還原了開關的本質，當想要開啟或關閉該房間內的燈時，就不需要到菜單界面找這個設備了。
燈
燈操控界面用刻度形式表現，每一度為一個刻度，并且還可以通過中間的加減號進行精確到 1 個百分比的亮度微調，品牌方想為用戶打造成清晰準確調控的形象；
但在實際使用場景中，我們不大會對燈進行這么精確的調節。
溫控器
溫控界面同樣可以精確調節，每 0.5 攝氏度為一個刻度；
溫控的精準調節，就比較貼近我們日常的使用習慣，溫控器控制界面是沒有開關的，因為目標人群家中多數是中央空調，隨便就可以關閉，對于大戶型的用戶來說是不友好的。
右下角的定時按鈕可以讓設備在特定時間內以某一狀態運行。
窗簾
窗簾的狀態值與操控條左右排列，這樣的排布好處是可以讓操控條長度最大化，便于用戶控制；
窗簾控制界面只分為有調角度的和沒有角度的；
窗簾操控條豎直排列，向上滑到頂部為窗簾全開，滑到底部為全關；
窗簾的行程和角度都用百分比的形式展現。
設計設備控制界面的思考方向一般有 2 種：
1. 界面控制方式要和設備的實際運行方式一致
這種思考方向要考慮實際窗簾有左右運行和上下運行之分，上下劃動的操控方式來控制左右運行的窗簾會有認知上的偏差；
百葉簾的角度有正向和反向轉動之分，如果只按最后的遮光百分比來做，會造成設備兼容問題。
也就是說為了模擬真實的操控方式，需要設計出若干不同種類窗簾控制界面。
2. 界面控制方式與設備運行結果關聯
這種思考方式不需要考慮窗簾的種類及開合方向，將所有種類的窗簾行程及角度歸為開、關兩種結果狀態，
就像 Gira 這樣，只需要做兩套界面就可以兼容幾乎全部的窗簾設備。
Gira 豎排控制條的優勢
如果橫向布局，那么左右滑動切換設備時，會觸發控制條左右手勢，造成誤操作。
背景音樂
設備列表中背景音樂卡片的快捷按鈕很特別，由靜音、播放、下一曲組成，我們設計的時候一般會做成對稱的：上一曲、播放、下一曲，Gira 并沒有這么做，因為在背景音樂的使用中，一般有幾種需要快速響應的場景：用戶在家中發起臨時談話，需要暫時安靜一下；不想聽了；這首歌的風格不喜歡；
背景音樂操控界面功能和音樂應用差不多，唯一不一樣的是，底部可以快速切換歌單，可以很快速切換不同音樂風格。
文件夾功能
隨著設備、場景的增多，用戶可以根據自己的喜好將設備或場景歸類放置，便于快速定位功能卡片；
點擊文件夾卡片，進入到顯示著眾多功能名稱的文件夾界面，點文件夾，才能進入功能卡片列表，為什么要多一個文件夾查看的界面。
我們想象一下有這樣一種場景：面板中有幾十個功能卡片，用戶想開啟娛樂場景，這個場景好像在客廳文件夾或走廊文件夾里，于是去客廳文件夾快速翻看這里面有沒有，再點進去操作。
Gira 這樣做符合用戶在功能卡片多的情況下快速選擇的習慣。
排序功能
可以通過拖動來調節設備卡片在菜單中的位置，省去了去后臺設置的步驟；
定時功能
定時列表用具象的時鐘來體現開始運行時間，還用黑白來區分夜晚和白天，對于用戶來說掃一眼圖片就可以知道運行時間，這種體驗很好。
以 ORVIBO Mix Pad 為例，從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
整體運用深色色調，使用幾何圖案作為背景；
用白色體現基礎信息，用色彩強調設備場景的狀態及天氣信息；
運用圓角元素，更加生活化。
顏色運用比較豐富，以藍、橙兩互補色為主，其他顏色分別為它們的鄰近色；既能保持強對比，還能讓顏色變得柔和。
主要分為 2 大層級：首屏、設備控制界面、場景列表、鬧鐘為第一層級；設備類型、設置為第二層級；
智能面板一般裝在墻面，用戶站立操作，用戶不可能花太長時間來操控；
歐瑞博的人群為廣大普通消費群體，家中的設備不會太多，設備控制界面層級前移，可以方便用戶直達控制區，用完即走。
首頁主要分為 2 個區域：
日期天氣區
時間、日期、天氣狀況信息，可以滿足用戶日常出門關注的內容，并且在這個區域有多種表現形式供用戶選擇，既保持個性化還不失統一感。
快捷控制區
可以將常用的功能置頂在首頁展示，最多設置 2 個，用戶在首屏既能看到日期天氣還可以控制設備，大大提升了屏幕的利用率和用戶的操作效率。
這樣做的好處：
當用戶準備出門時，看了一眼面板上的天氣，點一下關玄關燈，就可以直接出門了，不需要滑到燈的菜單界面找到玄關燈然后再關閉它，真的很方便。
底部有向上滑動提示，告訴用戶下面還有重要內容。
卡片內容左右排布，從左到右依次為 icon、名稱及狀態、快捷控制，這種排布的好處是可以縮小每個卡片的高度，從而提高屏幕利用率；
但有個問題就是，左右排布的方式，內容最多呈現 4 個文字，需要考慮這幾個字能否清楚的定義該卡片功能。
上滑可以查看全部功能卡片，給用戶在手機上瀏覽信息的熟悉感；
在新的操控設備運用用戶熟悉的交互方式可以降低用戶的學習成本；
移動端上常見的手勢對應結果有：左右滑——代表切換，向下滑——代表喚起相關功能設置，向上滑動——瀏覽更多信息。
用戶在首屏左右滑動就可以切換不同功能模塊，不需要返回上一級，在設備類型少的情況下，這種盲操會比較方便。
下滑進入功能類型選擇、系統設置界面，這一區域相當于導航，可以實現功能模塊間的快速切換。
多種手勢的組合可以在有限的屏幕內操作更加靈活，但手勢太多會帶來一些問題：
針對以上問題解決的方法可以是：
場景卡片分為未激活、運行中、運行結束三種狀態；
場景運行狀態變化在卡片 icon 區域體現，既傳達了運行的過程，又不會打擾到用戶。
點擊卡片列表最底部的編輯按鈕，可以選擇將某一功能卡片置頂到首屏，方便用戶快捷操作。
將普通燈、場景、門窗等操控方式相近的設備進行了歸類顯示，并且和空調、色溫燈、背景音樂等設備放置在同一層級；
從交互體驗層講：由于家里的普通燈、場景、門窗的操控方式簡單統一、數量多，按照類別整合在一起便于查找控制；
從視覺層講：設備操控界面布局形式多，會給用戶造成整體視覺上的不統一，增加學習成本。
空調
空調控制界面，只能通過左右滑動以整數的形式來調節溫度，開啟中的時候，背景會有對應模式的色彩氛圍效果，給用戶更直觀的感受；
底部只保留用戶最常用的模式、風速、風向三個功能。
色溫燈
色溫燈界面默認為用戶推薦 6 種不同場景下使用的色溫選項，底部提供亮度調節功能，用戶只需要去選擇，大大縮短了用戶的操作路徑。
個性推薦在電商類產品中很常見，推薦機制基于對用戶行為習慣的分析，需要強大的后臺數據支持，智能家居這一塊通過窮舉用戶生活中的設備使用場景、目的從而提煉出對應的功能選項可以大大提升產品使用體驗。
窗簾
窗簾控制界面采用半寫實風格，給用戶更加直觀感受，學習成本低，拖動窗簾區域就可以進行行程的控制，由于沒有微調按鈕和行程狀態百分比，所以無法做到窗簾精準控制；
選擇這種寫實的設計風格，需要考慮設備控制界面布局、樣式對新增窗簾類型的兼容性。
背景音樂
背景音樂默認界面只保留了當前播放音樂封面元素，更多復雜操作被隱藏到了下一級界面，用戶在當前界面可以進行暫停、播放、收藏等簡單操作；
在小屏幕中做設計時，有時候會在一個層級界面中堆砌許多功能按鈕，使界面變的臃腫，一來容易讓用戶誤操作，二來讓用戶找不到重點功能，操作效率低下；
我們在處理這些信息時應該結合使用場景，按用戶的使用頻率進行權重劃分，將權重低的進行隱藏處理，突出核心功能，減輕用戶操作負擔。
智能家居廠商大多都是靠賣硬件賺錢，歐瑞博巧妙的運用會員機制結合背景音樂功能來售賣音樂服務（49 元一年），更加具有互聯網商業思維。
在語音設置中，可以選擇是否開啟語音控制，系統默認 2 組喚醒詞激活語音控制；
歐瑞博為用戶提供了更便捷的語音控制功能——快捷口令，說出指令就可以快速執行，由于沒有房間、設備名稱的限定，這個功能只能實現面板內所有同類型設備的開或關，適用于小戶型簡單的場景。
傳統上添加一臺新設備需要：選擇要添加的設備——選擇網關——輸入正確Wifi密碼——進入設備配網流程——配網成功——設備名稱設置，操作流程繁瑣，中間稍微有些環節沒有操作對，最后就無法成功添加設備，歐瑞博通過簡化中間過程，成功解決了這一痛點。
用戶可以在面板中直接設置首屏的風格樣式，系統一共有 3 種風格外和一個隨機演示選項供用戶選擇，并且這三種風格的功能架構是一樣的，只是對背景圖、元素大小、布局做了設計區分。
以 AQARA S1 為例，從結構、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
整體使用黑色做背景，用白色體現基礎信息，底部的色塊元素貌似起裝飾作用，和天氣情況并沒有聯系；
首屏主要分為日期時間和環境狀況 2 個區域，天氣、溫度、濕度、空氣質量信息并行排列，個人認為用戶對這 4 個信息的關注度是不一樣的，看看我們手機上的天氣 app 的信息排布就知道了，這樣并列排布會讓用戶分不清主次。
顏色以藍色及其鄰近色為主，搭配少量的對比色，整體色調統一。
主要分為 2 大層級：首屏、設備控制界面、場景列表為第一層級；設置為第二層級；
形式和歐瑞博一致，都是為了讓用戶更便捷的操控；
但進入設置頁面，設置主題類型的步數比歐瑞博的多一步，用戶設置完成后還得一步步返回，這里可以將用戶常用的“顯示”內容上移一個層級，減少頁面跳轉次數；
AI 手勢這種有特色的功能隱藏的太深，不便于用戶的使用。
綠米同樣運用左右滑動進行首屏、場景列表、設備間的快速切換，對于相同類型的窗簾設備，并沒有整合成列表放置同一屏，而是另起一屏，設備多的時候就會存在操控效率低的問題。
下滑進入系統設置界面，這個區域只有一個設置功能，有點浪費空間，索性就把設置下一級的功能選項移到下拉頁面，還能提高用戶的操作效率。
場景運行過程以進度條的形式在卡片底部體現，對用戶的干擾小，并且只傳遞出開始到結束的過程，沒有成功提示，這種邏輯是正確的，因為面板只是傳達出了一個命令出去，具體什么時候傳出、接收設備是否正常運行，這些信息面板是獲取不到的。
場景列表與設備控制界面一個層級，溫控器、調光燈運用半圓的元素作為控制區域，新穎的設計風格是綠米智能面板的特色；
仔細看，會發現設備控制界面不統一，相同功能的開關按鈕，在不同的設備中位置卻不一樣，還有就是普通燈是偏寫實的 3 路開關樣式，其他界面卻是抽象的圓環幾何樣式，不統一的界面會增加用戶的學習成本。
空調
空調控制界面，通過上下滑動以整數的形式來調節溫度，新穎的操控方式讓用戶加深對品牌的印象；
底部開關、模式、風速同級展示，這里存在幾個問題：1、用戶在設置空調時很容易誤點關閉按鈕；2、缺少常用的風向調節，功能缺失造成較差使用體驗。
燈
普通燈可以在 App 中設置 1、2、3 路開關樣式，這種形式同樣存在問題：一屏最多放三個開關，屏幕下方大片區域空置，利用率低。
窗簾
窗簾控制界面顯示窗簾的名稱及行程狀態；窗簾的開、合，綠米給了 2 種方式：滑動控制、全開全關按鈕；
增加暫停功能可以提升使用體驗，因為用戶在操控窗簾設備時，會以窗簾實際的運動行程為依據來決定窗簾需要開合到什么程度，而不是看界面上窗簾的位移，當用戶覺著窗簾行程可以了，按暫停鍵就可以準確停留在用戶想要的位置上。
調色燈
調色燈用戶可以自定義或選擇系統推薦的顏色；
為了涵蓋大多數的用戶偏好，調色燈的 4 個推薦色采用色環上差距大的顏色，并且根據用戶使用場景篩選出常用的幾種色調，排除了用戶不常用的綠色、紫色、粉色。
用戶可以根據自己的使用偏好，將最常用的功能模塊頁面放到第一屏，這個功能在一定程度上可以提升操作效率，當設備多，還是需要切換很多屏。
用戶使用面板分為：緊急情況、常用情況，緊急情況不一定常用，就像出門需要關燈；常用情況不一定緊急，例如看時間
綠米為了讓用戶便捷，給出默認頁自定義功能，存在的問題是：如果用戶把燈作為開機第一頁，那么日常中看時間要翻頁；日期時間作為第一頁，開關燈需要翻頁，都不是特別便捷。實際上可以做成像 Gira 那樣，通過增加手勢喚起快捷開關功能，首屏留給日期時間，既滿足了日常需要，又能滿足緊急需求。
通過上述分析，我們得到了這些產品的共同點與差異點，以及背后的思考方式，了解共同點可以讓我們彌補自己產品的不足，不被市場淘汰；學習它們差異化的思考方式可以幫助提升我們產品的競爭力。
作為一名合格的設計師，除了學習視覺技法和理論，還應該多玩、多看、多思考真實的線上產品，體驗其核心操作流程，推敲和思考產品設計背后的原理和邏輯，才能不斷提升體驗設計思維。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Aaron杜斌
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
智能產品的設計過程中，常常用到動效設計，那么動效設計用在哪些地方及對提升智能設備體驗帶來什么幫助，是這篇文章要講的。
上期回顧：
通過大小、位置和透明度的變化，使得界面與界面之間、界面上元素的出現和消失都有關聯，讓用戶和產品的交互過程更流暢，給用戶更好的體驗。請看以下案例：
1. Nest 溫控器控制界面
Nest 溫控器從時鐘轉變到溫控調節界面的過程中，時鐘的指針向圓心收縮，周圍的時間刻度生長并一起向中心收縮，指針收縮動效對應溫控調節界面溫度值的顯現，時間刻度的生長收縮動效對應溫度刻度的顯現，由于元素之間進行有關聯的變化，操控過程中會有絲滑流暢感。
2. Gira 窗簾設備
當用戶調節行程時，中間的控制點跟隨手指實時運動，而進度條會有延時拖拽效果。為什么會是這樣呢？原因是：用戶在控制面板上的操作是需要由面板向窗簾設備發送指令的，也就是說面板上控制窗簾到窗簾設備運行中間會有一小段時間間隔，用戶會有延遲感，所以 Gira 在控制窗簾行程的過程中，進度條為了與窗簾設備運行同步，加入延時效果，讓用戶感覺操控響應快的錯覺。
3. Nest 新款溫控器
用戶在滑動切換功能時，功能 icon 會按照先后順序由大到小變化，由于連續性運動，每個元素運動都有銜接，會有流暢操控感受。
4. Nest 智能鎖
用戶輸入密碼后至鎖打開這段時間，數字依次向下消失，鎖 icon 逐漸出現并且打開，體現出柔緩的感覺；實際上動效有時候可以彌補設備執行緩慢的不足，當設備需要長時間才能執行時，這段時間加入動效，動效運行時間和設備實際執行時間一致，用戶就會覺得很順暢；也可以讓動效運行時間小于設備執行時間，這時用戶會覺得操控反應更快。
通過動效能夠幫助用戶使用功能，對功能的方向、位置、喚出操作、路徑等進行暗示和指導，方便用戶在最短的時間內來學會操作產品的一些功能。請看以下案例：
1. Amazon Echo
用戶第一次設置好監控后，通過放射動效提示用戶雙擊屏幕，通過上下擴張的箭頭動效提示用戶可以通過手指來進行監控畫面的放大縮小。
2. Lenovo Smart Clock
當設備第一次配好網重新開啟后，通過遮罩、圓點大小位置運動搭配文字告訴用戶長按屏幕可以控制什么功能。
頂部弧形的上下變化，告知用戶下拉可以控制什么功能。通過簡單的元素既能起到提升用戶的作用，還不打擾用戶。
通過動效給用戶展示需要的內容及產品側想讓用戶了解的內容，讓用戶更樂意更易于理解，強化功能感知。請看以下案例：
1. B&O 觸控音箱
雙擊音樂標題，進度條從左向右生長出現、操控點放大出現，既強調了進度條這個隱藏功能，還暗示用戶可以拖動操控點從左向右拖動操作。
2. Google Nest Hub 調光燈界面
用戶從列表進入調光燈界面時，調光條灰底從左向右弧度生長，隨后當前亮度條生長出現、亮度值出現，先暗示了用戶可以從左向右弧度操作，后強調了當前設備狀態。
3. Google Nest Hub 睡眠質量檢測界面
用戶查看睡眠質量數據時，睡眠質量標題信息漸隱漸現，睡眠數據條、數字生長，讓數據展示有主次之分，強調了用戶想要看的內容據，更人性。
在產品設計里面有一個非常重要的原則：讓用戶有操縱感。這種操縱感不僅僅表現在對用戶的操作有了反應、有了顯示，還有一種方式是讓用戶知道當前產品運行的狀態，是正在等待還是正在加載，還是正在下載或變化，那這種狀態的告知也是增強用戶操縱感的方式之一。請看以下案例：
1. LG 智能洗衣機
當用戶往洗衣機里加入衣物后，出現量杯倒入洗衣液的動畫，告知用戶當前洗衣機正在進行哪一個環節，我們分析一下這里加入動效的用意，首先，一般的洗衣機沒有屏幕，有的話也就顯示當前的功能選項，LG 的這款洗衣機是液晶屏，那么它的定位就是高端人群，通過融入動效，打造差異化，提升使用體驗，加深用戶對 LG 品牌的印象。
2. Lenovo Smart Clock 起床鬧鐘功能
用戶設置好起床時間后，系統會根據時間段自動進行背景顏色的過度，來模擬天色的變化，直觀的告知用戶當前的時間是白天還是晚上或是黃昏。
3. Orvibo 除濕界面
設備進行除濕的過程中，面板上圓形元素進行旋轉，伴隨粒子擴散效果，模擬水分子消失的過程，直觀形象的告訴用戶現在正在做什么。
4. Lenovo Smart Clock 貓眼通話界面
用戶接通貓眼后，通話 icon 進行電播擴散動效，模擬聲波擴散效果，準確的向用戶告知當前通話中的狀態。
5. Google Nest Hub 語音喚起
當用戶說話喚起語音控制時，原先的全屏畫面收縮，響應用戶的指令，四周留白，為通話內容提供展示空間，然后彩色點元素起伏變化，通話內容出現，告知用戶已接收到指令；隨后彩色點元素旋轉加載，體現正在執行中。在語音控制的每一個環節都加入動效反饋，會讓用戶覺得他不是在和一個冰冷的機器講話，富有人情味。
6. Orvibo 窗簾控制界面
運用輕擬物效果和與實物一致的運動方式，用戶可以直觀的看到窗簾的行程位置與開合狀況，大大的提升了產品易用性。
面對一款新的智能產品時，用戶可能不知道怎么操作它，通過動效向用戶交待頁面內容之間的關系，讓用戶清楚的知道從哪里來，到哪里去，更易于理解從而可以快速上手使用。請看以下案例：
1. Nest 溫控器設置界面
溫控器的設置模塊通過左右滾動以便在有限的屏幕中展現，那么模塊的下一級頁面跳轉做成像 App 那樣左滑切入是無法明確層級內容的，此時需要一個與左右滑動不一樣的動效來區分模塊的切換，Nest 運用翻轉效果，強化了層級感，清楚交待了頁面翻轉后面的內容與頁面前的關系。
2. Google Nest Hub 設備控制界面
用戶從頂部導航中進入設備列表過程中，設備列表頁面從右向左進入，暗示用戶“當你想返回上一級，可以左滑離開哦”，用戶上下滑動設備列表時，屏幕左邊滑動條出現，更加明確了“左滑返回上一頁”的功能；
當用戶通過列表進入操控界面以及切換功能頁時使用淡入淡出的效果，弱化它們之間的跳出感，來強調它們是一個層級的內容，從細微處可見 Google 的設計師在動效的使用、選擇上非?？酥?，值得我們學習。
3. Google Nest Hub 日程提醒界面
用戶發出查看日程安排的命令時，日歷界面從左到右進入，告訴用戶這是一個新的頁面，接著日期數字 21 進行大小位移變化，月份不做變化，為了強調這是 21 號的日程，2 條日程信息按照時間先后從下向上運動，交代了日程處理的優先級。Google 設計師將信息展現的每一步都讓用戶看的清楚明白。
在可用性良好的前提下，通過一致性、趣味性的動效設計和創新的交互方式為產品增加亮點，帶來更驚喜的體驗，傳達產品的氣質與態度。請看以下案例：
1. Google 多端運行動效
在品牌塑造上，Google 已被證明做得極為成功，而且在視覺表現層面，Google 系產品具備著“一致性”和“連貫性”，這讓 Google 獲得了品牌識別上的利益。在不同設備的動效設計中，Google 都統一使用代表品牌的紅、黃、藍、綠顏色和幾何圖形，遵循化繁為簡的設計準則，通過簡潔貼近真實的運動方式，讓產品更有人情味，讓用戶更加專注于內容。
2. 智能圓鏡
用戶在靠近圓鏡設備時，鏡面中心人臉識別 icon 縮放，周圍點元素波動擴散，吸引用戶的同時，傳達出科技感。
3. Apple HomePod 命令反饋界面
當 HomePod 在執行一項指令時，頂部的屏幕會出現彩球融合翻轉動畫，多變朦朧的色彩可以喚起用戶情緒，球體間的融合過程讓產品生動有趣，讓用戶感受到品牌的人情味。
4. Apple Watch 洗手提示界面
Apple Watch 洗手功能開啟后，會有一個 20 秒的倒計時，倒計時以肥皂泡沫消失擴散的形式展現，很貼合當前洗手的情景，讓原本一個普通的倒計時變得生動且有趣味性，用戶更加樂意使用，強化了用戶對品牌的感知。
5. 智能溫控器
這款溫控器已經有一定年代了，當時那個年代，能用到溫控器，那就很有科技感了，智能溫控器還將流動的線條動效運用至透明背景上，向用戶傳達了超前的科技感，只要見了就會記住這款產品。
下面為大家整理了一份動效在產品中的應用場景以及設計思路：
實際上智能產品中的動效設計，并不是要向用戶炫技，也不是做的越炫酷越好。動效是以解決問題為目的的一種手段。我們要去觀察現有好產品的動效設計落地點及分析他們的小心思，從而運用至自己產品中，提升產品使用體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Aaron杜斌
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相比于去年發布的 macOS 11 和 iOS 14 的 WWCD 2020，今年的 WWDC 確實是顯得變化沒有那么大，在系統視覺層面上，macOS 12，iOS 15，iPadOS 15，watchOS 8 似乎并沒有那么多「革命性」的改變。老實說視作為一次日常的產品功能迭代就好了。
不過，iOS 15 當中有不少頗為不錯的新功能，比如實況文本（Live Text），功能更強的 Spotlight，全新的 Safari 瀏覽器，全新的安全機制，等等等等，這些功能足以為用戶提供更好更安全的使用體驗，但是另外一方面，有很多功能對于設計師和開發者這邊有著巨大的影響。
目前來看，Facetime 的多人通話的升級，共享當前界面和屏幕給他人的 Shareplay 很大程度是為了應對全球疫情之下，用戶被封閉和隔離的使用場景，這些功能需要系統級的支持。
而從照片中獲取文本信息的實況文本功能、超強的聚焦搜索功能，還有新的相冊自動生成回憶視頻的功能，則和蘋果自身在機器學習領域的挖掘息息相關，對于想要在這一領域有所建樹的團隊，可以參考這些內置的功能，如何用好神經網絡的軟硬件，可以參考相關的開發文檔。
關于 iOS 15 在我看來最值得聊且對于設計和運營有較大影響的部分，其實是全新的通知推送系統，以及 「專注模式」這一功能。在整個發布會結束之后，蘋果的 HIG 頁面當中，只有一小部分的內容隨著新系統的發布而隨之更新了，而這其中就包含信息推送和 「專注模式」的部分。
信息推送和當下用戶日常內容和信息消費習慣緊密關聯。越來越多的 APP 和越發頻繁的信息推送給用戶帶來的信息壓力已經成為一個廣泛存在的問題，一直到今天，這個問題都沒有一個足夠完美的解決方案。
針對注意力管理的問題，iOS 15 所給出的解決方案算是一個比較折衷且比較合理的處理機制。
在基礎的信息推送內容的視覺設計上，iOS 15 針對通知欄的小卡片的排版視覺進行了優化，放大了 APP 圖標并置于卡片的左側，對于通訊類 APP 當中用戶發送的信息，則采用了用戶大頭像 + APP 小圖標 的組合形態，增加信息來源的辨識度，并以這種形式更清晰地告知用戶，所收到的信息的來源，以及它的屬性。
iOS 15 還可以根據用戶設置的時間表或者所處的模式，快速收集每天收到的的通知，構建成為一個較大的通知摘要大卡片，而摘要的內容呈現將會按優先級進行智能排序，位于頂部的卡片相關度最高。（所以 APP 通知推送會因為這種機制開始一輪新的內卷么？）
值得注意的是，新的推送摘要因為是按照優先級排列，所以各種 APP 當中優先級最高的通知將會被匯總到一起。
摘要信息的組織并不是借助單一算法來實現的，同樣的，其中用到了機器學習的功能，借助神經網絡芯片來更好地對信息進行針對性的篩選，并推送給用戶，以圖更好的體驗。
在原本的 iOS 14 當中，對于單個 APP 的推送管理方式比較簡單，除了「關閉」，就只能選擇「隱式推送」，
在 iOS 15 當中，用戶可以針對單個 APP 的推送進行更細致的選擇和處理：
更多選項當中，可以選擇讓 APP 「靜音一小時」或者「今天不再推送」以避免干擾。
整個 iOS 15 的通知處理的機制都是圍繞著降低用戶信息載荷的目標來進行的，除了管理層級的細化，專注模式更是之前 iOS 14 中「勿擾模式」的全面升級。
其中，為了對推送通知進行更加細致的處理，通知功能的類型也有了更為詳細的分類，并且在 HIG 設計規范進行了更為詳細的說明。相關詳細內容在第四節。
「專注模式」是為了應對信息過載的問題，并且試圖改善推送通知影響用戶注意力的情況，希望借此來幫助用戶更加專注于進行中的任務。
系統基于常見的幾個使用場景，提供了「個人」「工作」「睡眠」三個場景，并且保留了之前的「勿擾」模式，單擊底部「+」號還能添加更多模式，其中還包括「駕駛」和「游戲」等不同的預設場景模式。
除了「勿擾」模式之外，其他模式下，用戶可能會收到與這些場景相關的應用，而用戶可以在 iOS 15 的系統智能推薦之下，快速增刪當前模式下可以推送通知的 APP。
在指定模式下，用戶收到的推送通知的內容、類別都會高度相關，降低干擾性。
同樣的，為了搭配不同的專注模式，還可以基于模式設置特定的主屏和桌面小插件，成為當前模式下的信息和管理中心，更加方便地管理當下的任務，達到「專注」的目標。
而「專注模式」更為智能的一點，是系統會根據地理位置信息，有意識地提醒用戶是否要切換模式：
同時，當用戶將手機設為特定模式之后，綁定同一帳號的其他設備也會自動切換到同一專注模式之下，達到統一管理的目的：
當然，除了基于位置進行「專注模式」的切換之外，用戶可以通過右上角下拉的「控制中心」對「專注模式」進行手工的切換管理。
而無論是新的通知系統還是「專注模式」，在信息管理的顆粒度上都比以往更加細致，這很大程度上是基于新的推送通知的類別管理，這一部分內容在 HIG 設計規范上已經得到更新，并且有著非常詳細的說明。
下面是關于推送通知章節更新的主要部分（考慮到篇幅，對部分非關鍵內容進行了精簡）。
https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications
用戶希望收到他們關心的事情的通知提醒，但并不總是喜歡被打擾。為了幫助用戶管理整體體驗，需要在發送任何通知提醒之前獲得用戶的許可；系統允許用戶在「設置」>「通知」中更改，并調整推送提醒樣式，可以預覽，并且可以和 Siri 交互。用戶還可以在「設置」>「專注」中讓所有通知都靜音（某些地區的政府警報除外）。
相關開發人員說明，請參閱 UserNotifications。
在 iOS 15 及更高版本中，用戶可以通過指定專注模式時間，設置專注模式下通知推送的具體行為，而進行細粒度的管理。專注模式可幫助用戶在他們為睡眠、工作、閱讀或駕駛等不同狀態下，定義這一時間段內通知推送的具體行為。
用戶可以篩選出哪些通知或者 APP 可以在特定專注模式下，被推送給用戶。比如在工作專注模式下，用戶可能希望收到來自同事、家人以及工作相關的 APP 推送的信息，用戶可能還希望收到時效性較強的通知。
盡管專注模式下，可能會有一些通知被延遲推送給用戶，但是通知信息在收到的時候即立刻發揮作用。
想要定制化地推送信息，那么你需要確保你的 APP 能夠支持信息直接推送，就像電話或者短信樣的通訊通知（communication notifications），而其他類型的弱時效性的推送則使用非通訊通知（noncommunication notifications） ，而想要支持通訊通知，你需要引入 SiriKit ，這也意味著用戶可以使用 Siri 來進行自定義通知推送行為。具體的參閱INSendMessageIntent和UNNotificationContentProviding。
為了更好的方便用戶針對推送通知進行管理，你需要對你的 APP 的推送通知的中斷級別進行定義，不同級別的定義決定了通知何時推送，系統在不同狀態下是否要推送，以及如何處理。目前，將推送通知的中斷級別劃分為4個等級：
具體的屬性還可以參考下面的表單：
值得注意的是，這4個層級是逐漸遞進的，因為后兩種推送通知需要的優先級較高，所以最好獲得用戶的許可。
此外，在設計通知推送系統的時候，還有3個關鍵的注意事項：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：陳子木
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們都知道，數據是支撐決策的重要依據，于是我們可以看到，幾乎所有的產品，都會具有數據統計分析的功能模塊。往大了說，比如數據中臺；往高端了說，比如數據大屏、數據看板、數據駕駛艙；往本質了說，其實就是數據的統計分析。作為一個非數據型產品經理，或者是初級產品經理，該怎樣設計這個功能模塊呢？
如果你剛好為此苦惱，不妨試一下我最近研究的這三步曲：統計+分析+可視化！
關于數據統計分析，首先表達一個我蠻認同的觀點：
好的數據分析師，要像眼科醫生一樣：配眼鏡可能有很多專業的方法，有很多專業的工具，可在配的過程中，醫生糾結的不是自己的理論，而是關注用戶看得清不清楚，不斷問用戶“這樣可以嗎？這樣更清楚嗎？再這樣試試呢？”
—— 接地氣的陳老師
相信在工作中，大家經常會碰到一些“孔乙己”式的數據統計分析，一開口就是“xx 指標體系”，再加上一大堆什么“權威的、標準的、BAT 認定的”這之類的修飾詞匯。這特么就是典型的虛假數據分析啊，因為這些大多數時候，耗時費力，卻沒有解決實際問題。
并且這種虛假的數據統計分析，還有它遵循的理論模型：
而真正的數據統計分析，就像太極拳的精髓一樣：“只重其義，不重其招，你忘記所有的招式，就練成太極拳了?！保ㄒ越鉀Q業務問題為根本）
要搞數據的統計分析，那第一步我們得先有數據，也就是數據的統計工作。提起數據統計，那自然繞不開數據埋點。如果你們公司從來沒整過埋點這個事，那也不用大費周章，因為界內已經有很多成熟的埋點公司了，例如神策、友盟等等，直接花錢辦事就完了，也不貴。
我們今天研究的，是通過埋點，能夠獲得哪些數據呢？總結下來，大概有這么五類：
埋點獲取五類數據
來來來，我們逐個剖析一下，這幾類數據，具體都包含什么，以及獲取這些數據有啥用。
1. 整體概況
實時數據意義：可以獲取到每個小時的產品實時數據，幫助你了解產品目前的實時情況。
使用概況意義：產品整體的使用情況，包括用戶量、訪問情況、留存等，幫助你對產品整體指標有一個大致的了解。
2. 用戶獲取
渠道訪問意義：每個渠道的用戶的使用情況，包括渠道中新用戶的占比、留存等，幫助你了解產品在獲客層面上的優勢與不足。
版本數據意義：每個版本的使用情況，幫助你了解在產品升級的過程中，是否在活躍和留存方面有所改善。
3. 活躍與留存
訪問流量意義：產品的每日訪問數據，指標集中在新老用戶的訪問行為上，提供訪問次數、時長、次數分布、訪問時段高峰等指標，幫助了解新老用戶在使用產品時的一些行為特征。
用戶留存意義：提供用戶 7 日，次日，次周，次月留存的數據，幫助你了解新老用戶的使用粘性。
4. 事件轉化
自定義事件意義：用戶自定義關鍵事件，系統會自動生成該事件的發生次數、人數以及分布情況，也就是能夠看到用戶都在干啥。
收益類事件意義：用戶自定義收益類事件，系統會自動生成該事件的發生次數、人數以及分布情況，會根據你選擇的數值類型屬性，計算該數值的總值、人均值以及次均值。也就是能夠看到用戶都咋花錢的。
5. 用戶特征
用戶特征意義：能夠看到我們的用戶，都是哪些牛鬼蛇神~
有了埋點的數據以后，那就是怎樣利用這些數據，充分發掘這些數據的價值了。數據分析的套路就更多了，把下面這些學會，應該“二八原則”里面的“八”就能夠搞定了~
1. 常見的數據分析指標
綜合性指標：反映產品的整體情況。
流程性指標：反映用戶的使用行為。
業務性指標：反映具體的業務情況。
2. 常見的數據分析維度
數據細分：通過不同的細分維度分析，往往可以追溯到問題發生的原因，還能為后續的一些動作提供參考依據。
數據對比：沒有對比就沒有傷害，一方面是橫向比較，即自身和別人進行對比，如常見的同比、環比；另一方面是縱向比較，即自身和自身進行對比，比如行業競品、全站數據、AB 測試等。
3. 常見的數據分析方法
HEART 模型：Google HEART 模型的提出，可以讓大家反思自己的產品設計思維，同時運用相關設計工具去提高 HEART 五項指標來完善用戶體驗，打造更好的產品。
AARRR 模型：該模型出自于《增長黑客》，它是在 2007 提出，當年的獲客成本還比較低廉，而這種模型很簡單又很直觀地突出了增長的所有重要元素，所以這個模型很長時間內都很受歡迎。
RARRA 模型：而現在獲客的成本與日俱增，市場情況和 2007 年已經完全不同?，F在黑客增長的真正關鍵在于用戶留存，而不是獲客。于是，一個突出了用戶留存重要性的模型 RARRA 誕生了。
有了統計的數據以及分析的維度之后，最后一步工作就是可視化啦！
而想要完成這一步，又快又好的方法，那自然就是參考各種規范啦，首先我們可以去一個叫做「e-charts」的網站，去查看各種可視化圖表，因為開發很多時候，就是依照這些開源的圖表庫進行擼代碼的~
而我們設計的時候，就需要借助各種原型組件啦。數據可視化的內容有很多，我們來舉幾個典型例子：
1. 折線圖
注意事項：選用的線型要相對粗些，線條一般不超過 5 條，不使用傾斜的標簽，縱坐標軸一般刻度從 0 開始。預測值的線條線型改為虛線。
2. 柱形圖
注意事項：同一數據序列使用相同的顏色。不使用傾斜的標簽，縱坐標軸一般刻度從 0 開始。一般來說，柱形圖最好添加數據標簽，如果添加了數據標簽，可以刪除縱坐標刻度線和網格線。
3. 條形圖
注意事項：同一數據序列使用相同的顏色。不使用傾斜的標簽，最好添加數據標簽，盡量讓數據由大到小排列，方便閱讀。
4. 餅圖
注意事項：把數據從 12 點鐘的位置開始排列，最重要的成分緊靠 12 點鐘的位置。數據項不要太多，保持在 6 項以內，不使用爆炸式的餅圖分離。不過可以將某一片的扇區分離出來，前提是你希望強調這片扇區。
餅圖不使用圖例，不使用 3D 效果，當扇區使用顏色填充時，推薦使用白色的邊框線，具有較好的切割感。
5. 其他
這種數據可視化的圖表還有很多，而它的意義就在于，用圖表代替大量堆砌的數字，有助于閱讀者更形象直觀地看清楚問題和結論。我也在工作中搜集到了一些不錯的數據可視化原型組件，有需要的同學可以自行下載啦~
好了，以上就是今天的所有內容了，正如前言所說的，我們今天只討論武功招式，不討論內功心法。
延伸一下：數據統計分析，最終還是要從業務中來，到業務中去，一切的形式，都是次要的，關鍵還是要以解決業務問題為根本、但對于我們這些“新手”來說，經驗主義自然也是要借鑒的！相信今天總結的內容，也足夠支撐大家比葫蘆畫瓢啦。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：曉莊同學產品筆記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
生活在地球上的我們，每時每刻其實都在感受著重力的存在。除了物理層面的影響，重力是否會改變我們對于視覺畫面的認知呢？又或者說，物理學中經常聽到的重力概念，和設計中的構圖、排版又存在著怎樣的關聯呢？
我們或許能夠從格式塔學派對認知心理學的研究里，尋找到一些蛛絲馬跡。
人們的大腦總是會去腦補眼前看到的事物。就像我們看到的這三個被遮擋住的圓形圖案，位于中心的倒三角雖然沒有實際出現，但我們確實認為它是存在的對吧。
視覺本身是很容易被周圍環境影響的，就像我們現在看到的這個畫面。如果忽略掉空間和透視的話，你還會覺得右側的豎線更高嗎？
而實際上的情況是，左邊的豎線高度要遠遠高于右邊的豎線高度。
再看這個例子，兩側位于中央的白色球形，它們之間，誰看起來更大，誰又看起來更??？也許有的朋友會說左邊更大，這個答案是沒錯的，但它也僅僅是看起來更大而已。
如果我們在畫面中拉出兩條輔助線，我們就會發現，原本右邊看起來更小的圓球，要比左邊的圓球更大。
通過剛剛的幾個小測試，相信大家已經對于用眼睛的判斷能力有了一些認識了，是不是有一種眼見不一定為實的感覺？視覺重力原則，其實就是建立在這樣的認知基礎之上的。我們大腦所認為的重心或平衡感，和真實的情況，往往并不相同。
在做版式設計的時候，我們的構圖越接近重心的平穩狀態，就越會激發和諧的美感。因為重力在自然界中是再平常不過的現象了，生活在這樣環境中的我們，自然也會有這種審美上的傾向了。
我們來看這個例子，這張紙最穩定的位置在哪里呢？答案是它的正中心。
我們把信息添加在頁面的中心位置，現在它看起來更平穩了嗎？然而并沒有，可問題出在哪？一定是我們沒有把文字擺正吧？上方的區域（a），看起來要比下方的區域（b）面積更大一些，真的是這樣么？
可實際上，文字確實是在頁面的正中心位置上了，這同樣我們的眼睛在作怪。
所以為了抵消視覺上的這種墜落感，我們需要將文字略微向上移動，這樣我們看這段文字才是真正居中的。
正向
我們再舉個例子，這是一個數字 8，我們來仔細觀察一下它的造型，頂部與底部的負空間看起來是一樣大的對嗎？
垂直翻轉
而事實上并不是這樣的，通過將它倒置，我們就會更明顯的看出來，其實為了抵消人眼的錯覺，我們在做字的時候，需要將上面做的更小，底部做的更大一些。
這是兩個完全等大的黑色圓形，但它在視覺上其實并不是平衡的，人們的眼睛會覺得右邊更輕，這雖然沒有頂部和底部那么明顯，但也確實存在。那么解決的方法就是將左邊的圓形略微縮小一些，現在這個頁面看起來平衡多了。我們總是會下意識的認為左側要更重要些。
? 畫作：The Creation of Adam
看這幅畫，很明顯左側的內容要比右側更少，可如果我們將它鏡像翻轉過來，它原版的平衡感就會被打破了。人們更多會認為左邊看起來更重了。
同樣的，在我們的漢字設計中，也會應用這種做法，比如林字的兩個木字旁，就并不是左右等大的，因為這樣在視覺上會顯得不平衡。所以需要將左側的偏旁削弱，才會在視覺上看起來更加和諧。
具有左右結構的漢字，基本上都遵循了這個原則。形成了左收右放的構成樣式。
漢字“田”的中心十字筆畫，為了看起來是居中的感覺，實際上也特地微調了文字的重心部分。利用輔助線，我們會更容易察覺到這其中的變化?？梢钥吹剑瑱M筆部分，向上移動了很多。豎筆部分也相應向左做了位置上的調整。
人們常說，細節決定成敗。也正是這些不起眼的細節，拉開了專業平面設計和業余設計師之間的距離。相信看到這里的小伙伴們，應該已經領略到了視覺重力原則在設計中的重要地位了。那么光知道有這么一回事兒可不行，我們更應該去了解它的特點，以及嘗試著去掌握它。
我們看到的所有圖像，無論抽象的還是具象的，其實都是具有重量感的。那么都有哪些因素會影響到視覺重力的大小呢？找到視覺重心之后，我們又要怎樣去利用它們？接下來我們就一起去尋找相應的答案。
色彩對視覺重量有影響嗎？我們看畫面中的這兩個圖形，是不是很明顯感覺到右邊更重呢？黃色的色相本身的視覺明度就要比藍色更淺，所以我們會感覺到右邊更重。
為了抵消顏色對視覺重量的影響，我們需要降低藍色的面積，這樣才能讓兩個圖形看起來是平衡的。
那么換成具象的物體呢？道理其實也是一樣的。我們依然可以把它們看成是純粹的色彩。經過這一步分析，我們是不是發現了左側紅色的蘋果，顯然會更深和更重呢？
所以，為了保持左右的平衡感，我們也需要把紅色相應的縮小一些。
我們看這兩個圖形，它們誰更重？左側的八邊形，它的頁面邊緣更復雜，角度變化也更多，所以承載了更多的信息量，相比正方形更簡潔的造型來說，左側會更重。
那么換成大小相同的秤砣和棉花呢？誰更重？幾乎沒懸念了，棉花完敗。當具象的物體出現時，結合以往的視覺經驗后，誰更重誰更輕也就很顯而易見了。
對齊也需要考慮到視覺重力嗎？如果你也有這種疑問的話，接著往下看。這是兩個馬克杯，它們雖然造型類似，但是色彩卻不同。很顯然藍色的版本會更重，而在位置上更靠近左邊，也就顯得更重了。
所以，為了抵消這種重量上的輕微不平穩，我們可以把顏色更淺的橙色放到左側的位置上。這樣雖然色彩上橙色更輕，可由于它的位置更重要，也就不會給人不平穩的感覺了。
那么構圖基本確定之后，我們為這兩個杯子搭配上一段文案信息。這樣兩個商品的展示也就做完了。你發現這兩個組合出現什么問題了嗎？當文字信息加入到頁面之后，是不是覺得哪里不對呢？
電腦是看不懂圖像的，所以用到對齊命令時，它們會圍繞著像素的邊緣去做對齊。可問題在于，并不是所有圖片的視覺重心都剛好在方框的中間位置。
所以我們要去修改的地方，也正是這個視覺重心的對齊位置?，F在再看這兩個組合，是不是感覺和諧了很多。
當西文和漢字相互組合時，需不需要考慮到視覺重心的對齊呢？我們看，如果僅僅是依據邊緣進行對齊的話，就會讓西文部分看上去很小。而正確的做法是需要我們忽略掉一些文字邊緣的。
分別找到兩組文字的視覺大小。只有這樣，才能讓兩組文字在視覺面積上達到相同的重量。當然，文字字重部分也是需要做出相應匹配。我們看，經過調整后，中西文的搭配明顯要更加平穩了。
但也是有例外的，比如這個例子，明明是按照之前的調整方式，僅僅是更換了文字的內容。為什么它看上去依然沒有對齊呢？這里的問題其實出現在西文部分，有些單詞組合，字母并沒有占據下伸部的空間。所以在整體上，就會顯得有高低的錯落感。
這種情況，當然就需要重新去匹配了。解決方法依然是對齊文字之間的視覺重心部分。所以，方法并不是死記硬背的。我們需要根據不同的情況去做出有針對性的調整。
接下來我們來做一個包裝的案例。它是一個螃蟹口味的海鮮調味料。首先，我們選擇這個手繪的螃蟹作為這個畫面中的視覺焦點，把它放在版面的中心位置。經過前面的學習，我們知道了，選擇對齊元素時，我們要忽略掉那些細枝末節的部分，才能找到真正的視覺中心位置。
找到了視覺重心后，我們把它安排到頁面真正的中央部位。頂部和底部的空間，我們就繼續調整其他的信息。首先從層級上來說，在頁面頂部我們需要一個相對第二大面積的文字組合。
而其余的元素，圍繞著底部的負空間去排列就可以了，到這里這個包裝也就做完了。
無論是版式設計，還是繪畫攝影，構圖從來都是一個講究的事情。想要做一版在視覺上平穩的版面，最簡單的辦法，就是把主體固定在頁面的中心位置?？墒沁@種對稱的設計，由于太過完美，也多少會給人一種單調和乏味的印象。那么有沒有一種既讓頁面保持平衡，又能在結構上做出變化的設計方法呢？這就引出了我們接下來的內容了。
這個案例，屬于網頁中會出現的廣告頁面。首先，如果我想要讓版面達到平衡狀態，就需要把主體的重心安排在頁面的中央位置。
但是，為了讓頁面中加入更多信息，我們也不得不讓主體向頁面的一端靠攏，從而預留出足夠的空間。
可這樣就導致了頁面的不平衡，左側的文字重量并不能平衡整個版面。
其實，解決的辦法也很簡單，我們可以試著將主體略微移向頁面的中心部分。這樣一來，就實現了一種動態的平衡狀態。
這背后的知識其實很簡單，就是最基本的杠桿原理。如果天平兩端并不平衡，那就讓更重那個的靠近中心，更輕的遠離中心。這樣也就恢復到平衡狀態了。
這同樣是一個網頁中會出現的廣告頁面。我們看，它都出現了哪些問題。版面中所有的元素都集中到了頂部，這就導致了頁面底部重量過輕，頂部重量過重的極端對比。也就是我們俗稱的頭重腳輕。那么經過調整之后問題依然存在。過多的空白，會讓人們感覺這個版面作品沒有完成。所有的重量都集中到了版面的左側，這依然是一個極端的構圖。
正確的做法應該是怎樣的呢？我們可以將重量最大的元素安排在中心位置。并且讓其他元素以對稱的樣式排布。
當然，你也可以將信息放大，和原本的圖像進行一個疊壓組合，形成一個更重更大的整體。
又或者，采用頂部圖像，底部文字的做法，讓頁面中的重量分配均等。
反過來也是一樣的，頂部安排文字，底部安排圖像。
再或者，我們可以將信息安排在頁面的左側，形成左字右圖的配置。這樣的構成，有助于人們第一眼發現你想傳達的信息。
而反過來呢？圖像就成為了更重要的那個。人們會先看到圖，然后緊接著去閱讀相應的文字信息。
到這里，我們分別從細節的刻畫，再到元素的重心對齊；又從視覺重心的動態調整，一直講解到了宏觀頁面的構建思路。我們可以看到，視覺重力原則幾乎滲透了整個設計流程。很多時候我們其實并不缺乏理論知識的武裝，可一到自己實際動手，就馬上繳槍投降了。矛盾點還是出在對理論知識點靈活運用上，接下來我就帶著大家再做幾個案例。
打算做一套大米的包裝設計。產品的名字就叫高山巖米。它長什么樣子呢，就像我們現在看到的這樣，類似葡萄干一樣，和我們平時見到的大米顏色是有一些區別的，據說營養價值很高，也被譽為米中黃金。
我想利用圖形的切割來表現這個巖米的部分。同時，在輔助一個篆書結構的山字，以這樣的圖形來體現這個主題內容。并且，我也希望這個大米的部分是鏤空的，能夠透過它看到真實的米。
主視覺的刻畫差不多后，接下來我把它放到包裝上，并且將其他信息也一并加入到版面里。不過這樣一來，信息和主視覺相互疊壓，對于內容來說可能會有些相互干擾了。所以我們來試著編排一下。到這里，好像出現了我們前面提到過的問題了，那就是，整個布局顯得頭重腳輕了。
接下來再試著調整一下?，F在我們把底部和頂部的空間都占據了，同時也預留出了三分之一的留白，這該不會有什么問題了吧。相信看到這里的小伙伴應該都能看出問題了，那就是這樣的配置確實有些左重右輕了。留白可以有，但絕對不是這樣做的。
除了我們之前提到的上圖下字，或者是左圖右字之外。我們當然也可以綜合的應用它們。我們現在這個構成，其實就是一種全包圍的結構。
又或者，將一部分內容放在底部，而主要去刻畫上方的文本樣式。這就形成了類似半包圍的結構。
如果說之前的版本是上下樣式的半包圍構成的話。那么接下來的這個構圖，就是融合了重心動態布局的左右樣式半包圍構成了。
當我們不知道怎樣去安排版式構成時，視覺重力原則就成為了一個很好的參考依據。
我們再做一版活動海報。畫面中出現的各種電器，都是經過退底處理的。這樣的處理，能夠讓它們毫無違和感的出現在同一個頁面中。
在頁面的部分，我加入了這個活動的具體內容。展覽的主題叫《模塊世界展》，是著名設計師迪特拉姆斯的個人展覽。
拿到這樣的內容時，最保險的做法就是讓頂部的圖片成為一個更大的組合。上圖下字，很平穩，也很保守。
我們可以看到，圖片部分，我盡量將它們還原成了現實中它們本來的比例關系。
或許，我們也可以再換一種思路，相對的更突破一些。將圖片通過顏色劃分成組。我們能夠看到，其中有全黑的，也有彩色的，更有白色的。
除了像剛剛的堆積到角落，我們也可以把圖片組合規劃成對角線的樣式，在這樣的形式下，版面構圖依然是平衡的。
我們當然也能讓圖片組合劃分成一個更大的組合，以及一個更小的組合。
又或者，打亂圖片的順序，完全依據視覺重心去匹配其中的位置關系。
最終，我決定從展覽的主題中尋找突破口，以“錯位”的手法去呼應“模塊化”這個概念。不僅僅是文字部分的錯位和拆解，圖片部分也通過硬邊的投影，形成了一種嵌套于版面中的視覺印象。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：研習社
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn