Dashboard的含義
Dashboard在B端設計的工作中是一個繞不開的話題，在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。
Dashboard的中文直譯是儀表盤，最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序，用作稱為“widget”的小型應用程序之運行基礎。
2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達，對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是：為用戶提供全局概覽，讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據，功能和控件。
Dashboard設計案例
以下是Dashboard常見4點設計不是很好的案例，現在帶大家一個個看下怎么才是更為合理。
案例一：右邊Dashboard上的信息做了層級的區分，相對左邊更加直觀。
案例二：左邊Dashboard顏色偏熒光色，色彩語言相對右邊不適合長期工作使用。
案例三：設計方案時沒有采用格柵格化解決適配對不齊等等問題
案例四：dashboard模塊之間間距沒有呼吸感。
B端設計中，設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出：“業務整體狀況如何？有哪些關鍵指標？各指標的運行情況分別如何？哪些指標出現異常？需要用戶做些什么？”。由此可知，B端Dashboard產品中大多數都以看為主，輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時，可以用戰略概覽場景提供快速入口。
1.監控操作：
使用戶可以一目了然地檢查其狀態，提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。
2.分析處理：
通過數據圖表，配合控件進行不同維度的數據分析。以數據為中心，并顯示盡可能多的相關數據視圖。
數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度，更好分析決策。
綜合性Dashboard，既有提供數據全局概覽可視化，同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求
3.戰略概覽：
在復雜的業務中，可以呈現業務分散的重點信息，用戶可以通過提供入口快速跳轉至相關模塊。
B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后，我們再來了解下用戶場景。例如：用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能：充值。并且需要給到相應充值數據概覽：賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮，可以做到幫助設計師更清晰設計dashboard布局以及設計自查。
因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。
信息處理
當弄清楚需要呈現信息內容后，需要進一步對信息做處理。從用戶的角度，舉個例子在FMS財務系統記賬中，財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求，準確且高效。具體可以從以下四個維度來做進一步處理：覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個，確定核心指標的聯系及優先級。
合理的信息結構能夠幫助用戶高效閱讀，理解內容。如何將信息碎片有邏輯地組合在一起，合理呈現和布局，選擇使用什么結構視內容而定。
舉個例子：
對于管理者的角色來說使用Dashboard的訴求是：及時把控業務情況
信息處理內容：
1.掌握重要業務數據：經營數據，訂單數據，客戶數據；
2.了解員工工作進度；
3.處理急需解決的工作任務。
對于執行者的角色來說使用Dashboard的訴求是：高效完成工作任務
信息處理內容：
1.急需解決的工作任務：待發貨訂單，待退款，待跟進客戶
2.了解自己的工作進度
3.經常使用的功能：發布商品，添加客戶，開單
4.查看重要通知公告：公司發布的公告
Dashboard表現結構常見兩種類型：卡片型、流程型。
卡片型
最常見就是卡片型。即將有相關聯的內容進行分組呈現，讓Dashboard內容歸類而不雜亂無章。
流程型
內容相互之間具有一定的邏輯關系，如地理位置關系、數字包含關系、對象父子關系等，這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。
國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。
1.全局導航
在B端Dashboard中，全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。
1.1平臺LOGO
一般這里都會放LOGO，對于一些壁壘標準化B端服務，這里通常是給好標準規則，后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務，那么就可以直接定制設計。
1.2功能入口導航
就是菜單導航，在B端Dashboard一般都是在側邊。建議最多不要超過9個，遵循7±2原則。盡量將同類型歸類，好好利用下二級分類。另外入口不要太深，用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。
在國內B端產品中，最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統
優點：
拓展性，一級導航的數目可以展示更多；
層級清晰，一二三級導航都可以流暢展示；
操作效率高，用戶在操作和瀏覽中可以快速定位和切換當前位置。
缺點：
視覺動線左右折回，比頂部導航更易疲勞，
內容區的排版空間更小，需要考慮適配問題。
在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式。混合模式就是將功能入口分為頂部與側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。
優點：
層級拓展性強，可達四、五級導航。
缺點：
操作難度上升、視覺動線更復雜。
還有一種模式：頂部模式，這種模式在國外產品中較多，在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式，在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航：saleforces、hubspot、zoho。
優點：
沉浸感比側邊以及混合都要強，幾乎不會對于用戶的閱讀行為有干擾，因為Web也有頂部瀏覽器菜單。
缺點：
一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式
1.3快捷功能導航
一般包含：消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角
在B端Dashboard中，數據概覽通常都是選取最關注的數據指標來展示，而不是全部數據；選取最關注的時間段，而非全部時間段。
構成：數據名稱+數字
這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點，甚至可以采用特殊的數字字體，例如DIN系列，來加強對比。
待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間，避免遺漏任務。
構成：待辦事項名稱+數字+可點擊跳轉的鏈接
待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點，數據必須是要能夠點擊的，因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來，平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下，可以采用tap切換的樣式全部展示出來。
用戶高頻操作快捷入口，點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣，需要仔細反復斟酌是否是用戶需要的高頻功能。
用戶當前最關心的任務，常用進度條或者時間軸的形式表示。
平臺用來觸達企業的信息，一般有產品更新動態，學習培訓，客服，廣告推送，活動消息（這個一般比較常出現在平臺類的b端產品中）
卡片式數據圖表可以拆分成圖表+輔助兩種組成部分
7.1圖表
B端設計師需要準確通過圖表來表達出用戶需要的維度信息。
7.1.1折線圖
隨時間（連續內容）而變化的連續數據，適合表現趨勢。Y 軸刻度值選擇要合理，以數據波動要最大化的顯示
7.1.2面積圖
面積圖和折線圖比較類似，針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個，有2個數據類型時，注意調整面積區域的透明度以及色系保持統一
7.1.3柱狀圖
通常用來統計累積疊加數據，數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值，單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素，不夠嚴謹，太活潑。最多使用兩種顏色，一種默認，一種hover或tap，保持界面統一性
7.1.4扇形圖
有共同的上一級層級作為統計總合，數據之間平級且有占比。數據必須是正整數，至少兩個以上數據，且用不同顏色表示
7.1.5環形圖
與扇形圖很相似，但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗，控制好留白呼吸感
以上是常用的圖形圖表，絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習
EChart：
https://echarts.apache.org/examples/zh/index.html
AntV:
https://antv.gitee.io/zh](https://antv.gitee.io/zh
7.2輔助元素
卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成：標題、軸、提示信息、標簽、氣泡信息、功能（篩選、導出、保存）。當然在實際設計中，會根據場景去修飾刪減一些元素，以此來減少冗余信息，幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
7.2.1標題
標題是區分卡片信息，迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復，簡潔概括。
7.2.2軸
軸上最重要的內容就是單位，將每個數據在同一軸上都是維持同種基準。便于進行數據測量。
7.2.2.1軸的細節
現在知道了軸由哪幾部分構成，那么接著了解細節
軸線
軸線細節一般只考慮是否顯示，在有網格線的情況下，可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏，突出視覺重點，減少不必要的線條。
軸刻度
軸刻度是軸線上的間距不宜過密，確保信息可讀性以及呼吸感，根據 7±2 法則，在可見的卡片內盡量保持這個規則，可以利用抽樣顯示的手段來優化軸標簽重疊的問題，這種一般是在連續性內容上可以使用。若軸上單位信息確實過多，雖然是連續性內容例如展示30天單位，由于本身卡片信息不是過于最重要層級，設計在相對狹小空間尺寸中，那么建議考慮在軸線上安排滾動條，并將重看單位放置前位。設計特別注意點，將滾動條設計作為輔助元素不宜搶視覺。
網格線
網格線是用來輔助圖表數據直觀對比的，增加數據更快速的閱讀性。舉個例子：數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。
7.2.3提示信息
以對照的方式來理解可視化對象的項目歸類信息，總結圖形形狀和文本組成內容。
7.2.4標簽
在圖表中，標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。
7.2.5氣泡信息
當標簽默認不顯示，氣泡信息一般是鼠標tap或者hover時，顯示該位置的數據。在簡潔的頁面中，也能讓用戶直觀看到信息對應數據結果
7.2.6功能
這個模塊涉及的內容偏多，在表單頁面更常出現，以后有機會可以單獨說。一般常用功能如篩選、導出、保存。可以讓用戶控制和友好的體驗
確定B端產品的設計風格
首先tob的產品dashboard說到底還是給使用用戶所使用，也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息，還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感，而是突出一種安全，高效，具有客戶親和力的商業產品特性。那么關鍵詞：服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。
色彩
常說色彩是一種情緒版，在Dashboard設計中，色彩也是映射關鍵詞的非常重要一個環節
字體
B端產品一般都是以數據為主要信息源，針對一些關鍵信息指標時，可以采用特殊的數字字體。由于本身數字字體包內存不大，所以也方便調用。例如DIN系列等等
設計稿尺寸
本篇內容都是針對pc端內容，具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計，但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同，C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶，哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。
設計原則
上面的內容更多是闡述每個部分的內容，實際工作中設計Dashboard時不一定按照那個順序進行，因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景，確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后，再開始考慮Dashboard設計執行。
同時在設計執行上也要特別注意幾個點：
1.突出核心指標（7個左右）
2.信息層級區分
3.減少用戶選擇，盡可能默認給到用戶需要的數據維度
4.界面簡潔嚴謹
5.避免過多顏色與不統一
6.數據維度正確圖表選擇
設計的注意事項以及建議
1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建，以便與研發團隊一起為業務助力。更好更快的發展。
2.在tob的dashboard設計中，設計師要特別注意數據表現的落地效果
3.當dashboard只在設計層面改版，并且改版內容過大時，推薦保留舊版入口，提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計，以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章：《B端必看的引導設計（一）》
4.允許用戶定制和共享dashboard，雖然不適用于所有的B端產品，如果類似于團隊協作中多種角色共用一套的dashboard平臺，可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求，并且能夠增加dashboard的使用率
5.dashboard關鍵信息數據盡量設計在一屏以內，作為數據可視化，內容快速瀏覽獲知全局，并且完成任務是比較重要的。
6. 突出統計數據的變化并對異常情況作出反應
7.數字設置不一定要設置為右對齊，但是單位是金額，那么要將金額設置為右對齊，為了使用用戶識別方便，快速比較。
8.設計完Dashboard一定要自查一遍，是否真的符合工作人員的使用場景。有沒有理解不準確的地方。
為什么b端設計師要懂得Dashboard，在很多b端業務場景中，有個特點，設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知，就有很大的可能性會造成信息雜亂，并且在Dashboard的界面中充斥著一些無關緊要的指標，這就是失去了Dashboard存在的意義。另一方面在b端產品中，Dashboard往往是以首頁的形式出現的,是非常重要的。
文章來源：站酷 作者：一九互七
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當我們設計師輸出了精美的設計稿，然后附帶了一個流暢的手勢動畫，交付給開發的時候，也期待著開發大佬搞出和自己預期一樣體驗流暢。但是等到實際體驗的時候，卻發現有一種說不出的鬧心。
“這個感覺不好按...”
“劃起來咋這么費勁呢？”
“怎么感覺動畫怪怪的?！?
當你正準備和開發一通友好探討的時候，這個時候開發向你發起了一系列靈魂拷問：
“你這個左滑的手勢，劃多少才算觸發？劃多快才算觸發？如果劃了一半劃回去算不算觸發？如果我先點擊后滑動算不算觸發？松手之后的動畫是多快的速度？什么速度曲線？要不要回彈效果？回彈阻尼系數是多少？”
這個時候你發現，自己提出的設計需求根本太天真了。
剛才的問題真實原因是，在做很多手勢識別或者一些我們看起來日常的效果，其實是蘊含了很多復雜邏輯的。
這些復雜邏輯原本被封裝在操作系統內，在系統內時可以隨時調用。但是一旦脫離了操作系統，那手勢的處理邏輯就會比較簡陋，導致最終的體驗不佳。
那這個時候也許你會想問，我們怎么會脫離操作系統呢？我們的手機不都是iOS和Android的嗎？不都是操作系統嗎？其實這里指的操作系統，是指操作系統的原生組件。這類組件只有在原生開發中才能被調用。
如今，很多App都使用前端語言來開發內部頁面(HTML/CSS/JS)。隨著Web混合開發，Flutter等跨端技術棧的出現，越來越多的團隊開始擁抱這樣的跨平臺技術棧。在節約了開發成本的同時，隨之而來的就是，在日常開發過程中，離純原生組件越來越遙遠。
在這樣的背景下，研發團隊的體驗設計師需要自己來研究用戶行為，手勢、組件和動效，實現原生組件類似的復雜邏輯，才能最大程度的接近甚至超越原生組件的體驗。
其實使用各個技術框架，也是有內置一些接口的。例如一些事件監聽器 / 動效曲線等。這也是騰訊文檔之前一直在使用的，但是會遇到一些問題?？偨Y下來，主要有以下幾個問題：
無法精確操作：用戶的操作和操作反饋被自己的手指擋住，無法完成精確操作。
手勢識別誤觸：同一熱區支持了多個手勢，可是用戶的實操時的手勢動作又沒那么標準，導致用戶誤觸其他手勢。
手勢觸發費力：滑動費勁，需要滑動很長距離才能觸發預期的動作。
動畫不流暢：各個技術框架自帶的動畫曲線和插值器，良莠不齊，體驗不統一且不夠流暢。
對于原生組件，我們習以為常的系統控件和手勢設計，里面蘊含的智慧遠比我想象的更多。
舉個簡單的例子：iOS系統的首頁，它可以支持橫豎各個方向的滑動，并且在觸發一個方向的手勢之后，就無法再觸發其他手勢了。
但是其實有個問題，手指和平時演示的不太一樣。
就是手指貼合上屏幕的時候，手指與屏幕的貼合面，并不是均勻向四周擴散的，而是向下的擴散更大一些。對于觸摸中心點，在觸摸的過程中，就會有向下的一個偏移。
如果直接識別，這個偏移直接被識別為向下滑動，那就會無法觸發左右滑動的手勢。
例如在iOS內的手勢識別，有一個專門的接口來做識別：PanGestureRecognizer，這個接口會在10px內先判定手指移動的方向和距離，再對具體觸發的手勢來做定義。例如下圖，雖然剛開始手指位置有些許下移，但是最終還是可以左滑判定成功。
所以你會發現，如果在iOS桌面上輕微的向左右滑動(10pt內)，桌面是不會有任何響應的。就是因為在10pt內，系統還無法確認手勢的方向。
另外，系統還自帶了很多手勢反饋操作，包括回彈效果，甩出效果。里面的小邏輯設計需要非常精準。并且對于滑動的手勢還帶了回彈效果，看起來非常爽。
騰訊文檔是基于Web / Flutter的應用，并且接管了很多原生系統的能力，包括排版能力、光標選區能力，拖動能力等。因此，很多基于Native開發能很簡單解決的問題，在Web下就要重新打磨一套我們日常習以為常卻邏輯復雜的組件。
由于騰訊文檔是基于Web的的應用，接管了很多原生系統的能力，所以不能使用系統的Gesture Recognizer，也不能使用系統的選區光標能力。
如果是簡單的使用前端的操作監聽器，那會要求用戶使用極其標準的手勢操作才能觸發，否則就會觸發失敗。因此需要設計更精準且適應性的規則，來包容用戶不那么標準的實操手勢。需要幫助用戶在粗糙的實操手勢下，猜測用戶原圖，并精準完成的操作。
可能你以為手勢操作并不常用，其實并不是的。
一個單擊，一個雙擊，其實本質上都是手勢。
不過，很多人可能會認為，按說這些操作都有原生的監聽器，不需要再去定義。但是其實如果不做一些進階定義，就會出現操作不靈敏的問題。例如下面這個問題。
在很多安卓手機上，或者是我們自己的騰訊文檔里，時常遇到一個問題：就是原本以為雙擊文本區域可以選中文字，可是卻發現這個雙擊成了一個玄學事件。雙擊有時生效而有時不生效。
理想的雙擊大概是這樣的，是需要2次有效的Tap事件：
這個Bug讓我們來定位一下。讓我們還原一下事情的經過：
哦！原來是因為雙擊的其中一稍微偏移了一下，拖動到了光標，導致系統判定是一次Tap一次Drag的行為，這樣就沒有辦法觸發雙擊行為了。
解決方法也很簡單。把10px偏移距離內的滑動行為都判定為點擊行為就可以了。從這里看，我們其實需要做的是，規范“點擊”這個手勢的定義。
因為原來的系統自帶定義，容易造成誤操作，而且手指貼上屏幕的時候，都會產生輕微位移，或者一不小心滑動了頁面，或者不小心拖動了光標，導致手勢識別的不靈敏。
原定義：“點擊并在500ms內在原處松手”。
需重新定義為：“點擊并在在500ms內，在10px以內處松手”。
另外，文檔移動端也定義了一系列更進階的手勢的操作，在這樣對手勢的進階定義后，操作可以被更精準和智能的判斷。這些定義被寫在了設計規范中，包括了單擊 / 雙擊 / 長按 / 拖拽
騰訊文檔的整個文本編輯區域都是使用Canvas實現的，由前端自主控制渲染。因此，選區光標就無法直接使用系統能力，需要設計師來設計一套選區光標，并且支持系統的各種選區光標的手勢。
由于騰訊文檔的光標選區是非常基礎基礎的編輯組件。這個組件在一般的產品中，都是直接復用的系統組件，但是在騰訊文檔中，就需要重新去考慮光標組件。
首先有個需求，光標是可以在文本中快速拖動的。
經常會遇到拖動。無論是光標拖動，還是長按選中，我們都希望能清楚的看到光標的位置，所以我們在用戶拖動光標和選區的時候，使被拖動的組件放大1.5倍，使用戶可以看到拖動效果。
這就夠了嗎？不夠的。
如果用戶想要精準的控制光標，首先要讓用戶完整的看到光標。用戶在拖動光標的時候，手指經常會不自覺的向下移動。這是為了讓自己看清光標，這個時候，我們不應該把這個移動當做是把光標向下移動一行，光標本身不應該跟隨向下，應該只在同一行，并且只響應左右移動。
但是當我向下拖更多距離的時候，光標就應該一直保持在手的上方，以確保用戶可以精確操作。
同樣，我們定義了長按后可以拖動選擇的手勢。在拖動的過程中，允許用戶向下偏移一定的區域，來看清選區的具體邊界位置。
手機端的光標選區，一個我們日常習以為常的光標，里面竟然有那么多小細節在里面，才能讓光標變得好用。
當一個滑動手勢被觸發時，我應該如何判斷這個手勢已經被觸發了呢？這個判斷并非簡單的橫劃豎劃，而是針對的不同的場景，去做特殊的處理的。
案例1：向下滑動手勢
例如說，一個非常簡單的手勢，半屏向下滑動關閉。我們通常來說我們的日常體驗，會是一個對距離的判斷，當手指拖動容器超過一定的距離，然后松手，就可以觸發手勢。
但是僅僅判斷距離是不夠的。因為手勢是對現實世界的映射。很多時候用戶希望滑動很短的距離，把東西“甩”出去。
如果僅僅判斷距離，那就很難“甩”出去。這時候就還需要判定用戶手指在離屏時的速度了。最后能達成一個比較輕松就能觸發手勢的結果。
案例2：左右切換相機
這是騰訊文檔的文檔掃描頁面。上半屏是大面積的取景畫面，底部是文檔類型的選擇。
因為取景頁面可以點擊對焦和測光，因此輕微的滑動不應該導致整個取景頁面或者底部Tab的滑動，應當是當整個頁面檢測到一個比較大的滑動動作之后，才自動移動切換。
但是如果需要離手才能觸發，如果用戶劃動的速度比較慢，整個體驗也會隨之變得過于拖沓。所以這里還加了一條邏輯：當手指滑動速度的加速度急劇減小時，不用松手也可以觸發手勢。這樣的體驗感會覺得流暢很多。
在騰訊文檔中，點擊、滑動、懸浮、長按等手勢操作貫穿用戶的使用過程，動畫效果是所有交互操作的視覺反饋，也許它沒有那么的「高逼格」，但它卻是這臺精密儀器運轉不可缺少的“潤滑劑”，流暢愉悅的動效能夠讓體驗更美好。
但是由于騰訊文檔起初是基于web混合開發，后面又加入了Flutter框架，這就導致多個平臺、框架的動效邏輯混在一起，在這個背景下，設計師們就需要從多方面重新梳理并定義動畫的基礎規則。
自然流暢是騰訊文檔內所有動效運行的基礎原則。
由于騰訊文檔是基于Web、flutter等多框架混合開發的應用，動畫曲線又都是基于各自框架自帶的貝塞爾曲線（cubic-bezier），這就經常導致一些同類型的手勢操作，最后所呈現的動畫效果卻相差很多。并且原生的動畫曲線，在實際使用上并沒有達到很好的效果，只是能夠比沒有動畫要強上一些。因此，確定一套統一、自然并且適合騰訊文檔的動畫曲線，是設計師優先要解決的問題。
為此我們根據動畫使用的場景，定義了四種標準曲線。同時輸出給開發同學，作為標準可調用的曲線。
緩動曲線應用的場景最為廣泛，也是騰訊文檔的默認曲線。相對于傳統web端或者flutter框架內的默認曲線，騰訊文檔的緩動曲線開始時會比較迅速，這樣能給用戶及時反饋、高效運行的感受；在運動快結束的階段，為了避免快速反饋帶來急躁的負面感受，曲線會更加平緩，進而使正在運動的元素吸引用戶的注意力，并讓用戶能夠有一定的思考時間，保證動畫的合理性。
即減速曲線。運動元素在開始階段時位移變化會很大，但是后面會越來越小。緩出曲線前期快速運動，不需要過多讓用戶留意，在結束的時候逐漸減慢速度，讓用戶關注到其新的狀態，用戶就可以提前切入到定位尋找的階段，等動畫停止后就可以立即進行操作。這種類型的曲線通常是用在元素進入界面時使用。
彈性曲線是一種基于阻尼彈性振蕩的原理實現的復雜曲線，阻尼比決定了曲線具體動畫感受，根絕阻尼比的不同，彈性曲線可以分為三種，分別是欠阻尼運動、臨界阻尼運動及過阻尼運動。在騰訊文檔中，通常只會使用到欠阻尼運動及臨界阻尼運動。
彈性曲線卻并不適合在所有的使用場景中，因為這種運動一般情況會需要相對多一些的時間來完成整個運動過程，讓整個過程變得過于拖沓。同時過于活潑的彈性動畫也會過分的吸引用戶注意力，打斷主進程的操作，影響效率。
時長是元素移動所需的時間，在創建自然流暢的動畫中起著重要作用。如果動畫太慢，會使用戶感到卡頓和厭煩；但是如果速度太快，就會給人緊張急迫的感覺。因此動畫的持續時間應該給與用戶充分的反應時間，同時又不用過久等待為標準。
在移動端上，我們設定動畫的持續時間在300-400ms。而在web端上，我們設定動畫的持續時間在200-300ms內。具體的運動時長視具體動畫而定，時長并不一成不變。
曲線是動效的靈魂，有時候你覺得平凡的動畫，或許只需要簡單地撥動那條運動曲線，就可以讓這個動畫瞬間變得充滿靈氣。盡管曲線可以解決大部分動效問題，但在動畫的實際落地中，還是有一些問題，是它無法解決的。這就會涉及到動畫更底層的渲染及邏輯。比如說在web端，前端動畫卡頓與否其實是和動畫本身實現性能有關系的，瀏覽器的屏幕刷新率都可能被代碼拖慢。這也是騰訊文檔在初期并沒有在web端增加太多動畫的原因，過多的動畫效果其實意味著需要更多的性能資源傾斜到動畫上。
在動畫上除了希望提供自然流暢的積極體驗，我們也希望繼續深入，“讓工具褪去冷冰的外殼，走進與智能隔空對話的新世界”。讓體驗更有情感，讓用戶更愉悅。
在待辦事項上，優化前每當用戶點擊完成一項事項時，完成動畫僅僅是機械的從未完成向完成圖標的替換，反饋效果非常“高效”的完成了它的任務，但是這樣就足夠了么？不一定，當一項事項被列為待辦時，就證明這件事對于用戶來說是重要的。在現實中，當重要的事情完成時，我們都是歡欣的，就像心里在放煙花，完成待辦時候的動畫理應如此，讓用戶在完成的那一刻體驗到“煙花”的綻放。
但是總有一些產品，或者是通用性的考慮，或者是一些歷史原因，或者是一些成本考量，走上了非原生開發的路，這樣的產品在未經打磨的情況下直接一把梭搞出來，的確會顯得卡頓，或者難用。
這其中不僅需要工程師一點一滴的性能優化，這也對體驗設計師對細節的把控提出了更高的要求。只有對用戶的行為處處關照，才能無限接近最極致的體驗。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
正如Redux一樣，當你不知道是否需要Vuex那就是不需要。不要因為想用Vuex而使用它。
用過Vue的人都知道，Vuex是Vue的一個全局狀態管理模塊，它的作用是多個組件共享狀態及數據，當某個組件將全局狀態修改時，在綁定了該狀態的另一個組件也將響應。實際上可以將Vue理解為一個function，在Vue的作用域中有一個數據代理，在每個Vue的實例中都能對其讀和寫
我們都知道Vue的數據驅動原理是用Object.defineProperty()進行數據代理，在setter中對數據綁定的view進行異步響應（vue3.0則是使用proxy）
通過查看Vuex源碼可知Vuex的核心原理就是在Vue的beforeCreate鉤子前混入（mixin）Vuex，并在init中將$store屬性注冊到Vue中
為了使案例更具體，我這還是簡單使用腳手架搭了個項目（可參考另一篇文章），雖然只有兩個組件，但是能清晰的理解其用法，我的src目錄如下，除了最基礎的App.vue和main.js外只有兩個組件和一個store
先說明一下兩個組件的作用，第一個組件是輸入框，在里面輸入字符，在二個組件div中顯示，就是這么簡單
首先我們使用常規方式(EventBus)實現一下，這里只需要在mainjs中創建一個vue實例，然后注冊在vue中就可以通過事件emit和on來進行組件通信
main.js
import Vue
from 'vue'
import App
from './App'
Vue.prototype.$eventBus = new Vue()
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
<template>
<div>
{{
val
}}
</div>
</template>
<script>
export default {
name: "divComp",
data () {
return {
val: ''
}
},
mounted () {
this.$eventBus.$on('changeVal', (e) => {//監聽輸入事件通過eventBus傳遞信息
this.val = e
})
}
}
</script>
<style
scoped>
</style>
如果到這一步，你仍然感覺難度不大，那么恭喜你，Vuex的使用已經掌握了一大半了
下面，我們來說說actions，在說actions之前，我們先回顧一下mutations，mutations中注冊了一些事件，在組件中通過emit對事件進行觸發，達到處理異步且解耦的效果，然而官方并不推薦我們直接對store進行操作
官方對actions的說明是：Action 類似于 mutation，不同在于1.Action 提交的是 mutation，而不是直接變更狀態。2.Action 可以包含任意異步操作。
也就是說，我們要把組件中的emit操作放到actions中，而在組件中通過某些方式來觸發actions中的函數間接調用emit，此時，為了讓action更直觀，我們添加一個清除輸入框字符的方法，當點擊清除按鈕時清除state.val
在輸入框組件中將value綁定到state上
<template>
<input type="text" @input="inputHandler" :value="this.$store.state.val" />
</template>
<script>
export default {
name: "inputComp",
methods: {
inputHandler(e) {
this.$store.dispatch("actionVal", e.target.value);
},
},
};
</script>
<style
scoped>
</style>
在另一個顯示數據的組件中新增刪除按鈕并綁定刪除事件，通過dispatch告知store并通過emit操作state
<template>
<div>
<button @click="clickHandler">清除</button>
<span>{{ this.$store.state.val + this.$store.getters.getValueLength }}</span>
</div>
</template>
<script>
export default {
name: "divComp",
methods: {
clickHandler(){
this.$store.dispatch('actionClearVal')
}
},
};
</script>
<style
scoped>
</style>
最后在store中新建刪除的actions和mutations
import Vue
from "vue";
import Vuex
from "vuex";
Vue.use(Vuex);
const state = {
val: ''
}
const mutations = {
changeVal(state, _val) {
state.val = _val
},
clearVal(state, _val) {
state.val = ''
}
}
const actions = {
actionVal(state, _val) {
state.commit('changeVal', _val)
},
actionClearVal(state) {
state.commit('clearVal')
}
}
const getters = {
getValueLength(state) {
return `長度：${state.val.length}`
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
最終效果如下：
到這里為止，Vuex的基本用法就介紹完畢了。
然而除此之外，Vuex官方還提供了輔助函數（mapState,mapMutations,mapGetters,mapActions）和Modules（store的子模塊，當有許多全局狀態時，我們為了避免代碼臃腫，就可以將各個store分割成模塊）方便我們書寫
下面我們用輔助函數重新實現一下上述功能
輸入框：
<template>
<input type="text" @input="inputHandler" :value="value" />
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
name: "inputComp",
computed: {
...mapState({ value: "val" }),
},
methods: {
...mapMutations({ sendParams: "changeVal" }), // sendParams用來傳遞參數,先把sendParams注冊到mutations上，輸入時觸發sendParams
inputHandler(e) {
this.sendParams(e.target.value);
},
},
};
</script>
<style
scoped>
</style>
顯示框：
<template>
<div>
<button @click="clickHandler">清除</button>
<span>{{ value + valueLength }}</span>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
name: "divComp",
computed: {
...mapState({ value: "val" }),
...mapGetters({ valueLength: "getValueLength" }),
},
methods: {
...mapActions({ clickHandler: "actionClearVal" }),
},
};
</script>
<style
scoped>
</style>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。
接下來為大家分享精美的大屏 UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
什么是SEO簡單地說，這是一個使用技術手段從搜索引擎的自然排名中獲得免費和準確流量的過程，更嚴格地說，搜索引擎優化是指根據搜索引擎的自然排名規則來調整和優化網站的內部和外部，使網站更符合搜索引擎的排名規則，網站排名在關鍵詞之前，從而獲得自由精確的流量優化技術，從定義上看，很容易理解搜索引擎優化的含義，但在實戰中很容易混淆，互聯網上有很多搜索引擎優化知識，比如很多搜索引擎優化論壇，seo搜索引擎優化博客和搜索引擎優化培訓機構，但是當你看完這些搜索引擎優化后，你還是很困惑，事實上，SEO從幾個優化步驟我們將分析什么是SEO，也許對你理解SEO應該更清楚。
關鍵詞搜索引擎優化分析。
搜索引擎優化實際上是做關鍵詞排名優化，在關鍵詞優化的早期階段，有必要對關鍵詞優化的難點進行優化和分析，關鍵詞分析的幾種方法包括關鍵詞競爭度分析，關鍵詞網頁收藏量分析，競價排名的網站數量分析，關鍵詞索引分析，關鍵詞seo優化商業價值分析，競爭對手網絡分析等，不管我們做什么，第一步是調查和分析，是否合適，有多難。
車站結構的搜索引擎優化。
網站優化首先是網站結構的搜索引擎優化，網站結構清晰，一般來說，樹形結構更符合搜索引擎，網站鏈接如何有助于搜索引擎抓取，網頁如何適合用戶瀏覽，以及如何做才符合搜索引擎的規則和用戶體驗，這些都屬于搜索引擎優化內部優化，這些可以由技術人員完成。
網站頁面的搜索引擎優化。
網站的內部快速排名頁面優化是用簡單的英語寫一篇文章，只要你上過初中，你就可以寫一篇文章，在網站上寫文章和寫作文是一樣的，唯一不同的是，作文的第一行根據學校的要求直接縮進兩個單詞，段落清晰，除此之外，網站上文章頁面的優化也應該注意關鍵詞的出現和標簽的使用，除了文章頁面的優化，還有其他優化，根據百度的算法，還有樞軸值和權威值的聲明，當你更深入地研究搜索引擎優化，你可以研究相關的搜索引擎算法。
如何獲取SEO文章內網站seo容，很多SEO優化的日?？鄲朗俏恼碌母?，大家都知道百度喜歡原創文章，但原創文章真的是浪費時間，當文章寫到一定階段時，真的是江郎什么也沒寫，這里有一些寫搜索引擎優化文章的資源。
文章更新知乎文章獲取知乎是中國著名的問答平臺，里面的物品含金量很高，如果沒有文章要寫，你可以在你的網站上找到偽原創字的問答，這樣的文章將會出現，知乎的問答幾乎涵蓋了所有行業，所以你不用擔心沒有內容。
論壇文章。
中網站建設國有很多大型論壇，尤其是天涯論壇的文章絕對值得一讀，天涯論壇的文章都是含金量很高的文章，所以天涯論壇也是一個獲取文章的地方。
個人博客。
互聯網上有很多博客，尤其是搜索引擎優化博客，這些人學習搜索引擎優化從做博客文章，然后做百度排名后，文章是原創的，其中許多文章不包括在百度，但我們不應該偷別人的勞動成果，我們可以向他們學習，百度知道百度知道是百度下的測驗桌，一些百度知道的文章相對較長，也可以用作參考。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
好的， 看到大家這么熱情， 那班班接下來就化身Johnson老師，給大家帶來這次價值連城的分享哦!
大家好，歡迎參加這次分享，作為數據分析正式課程的主講老師Johnson， 非常開心能和你們一起提升數據思維，做好業務決策。在學習這門課之前，你一定聽過許多關于大數據的神奇故事， 比如Netflix(奈飛公司) 如何用大數據打造爆款美劇《紙屋屋》， Google(谷歌公司) 如何用大數據準確預測流感，拯救千萬人的生命，還有美國大選如何利用數據預測結果等等......
知乎和微博上，至今還流傳著“雙十一”銷售額是不是“摻水造假”的熱聞。因為數據大牛用前5年的銷售額，提前預測2019年“雙十一”的最終銷售額是2581億，跟阿里官方最終公布的銷售額相差不到4%：2684億元。一時嘩然，還引發阿里高管官方出來辟謠。
你一定也希望，有朝一日，自己能用數據分析的方法，做出勝人一籌的業務決策，洞察別人無法發現的趨勢和機會。那么回到工作里，我們有沒有需要做分析和預測的場景呢?
比如：
-年初，老板讓你提前制定2020年全年的團隊業績目標
-2020年初的疫情，到底會不會對接下來的“金三銀四”求職季有所影響
-如何判斷我所在的行業到底有沒有前景，要不要看看別的機會
你會發現，小到用戶需求，大到行業發展趨勢，職場里需要我們提前預測和判斷的事情，可謂無處不在。如何利用據做出科學的預測，而不是人云亦云，或者憑經驗拍腦
袋呢?就是這幾節課程需要解決的問題。典型的數據預測場景—需求分析從數據預測的應用場景來分類，我認為典型的預測有三類：
分析能力足夠成熟的公司，還能夠把數據用作業務的探照燈，提前預測最佳的業務決策時間。
Uber(優步) 就是如此。作為一家橫跨歐美亞200多個城市的年輕跨國公司，業務復雜度極高，需要高效匹配乘客和車主的需求，處理和各地出租車公司、司機工會、競爭
對手、法院、政府、行業監管部門的利益和摩擦。但Uber“帶有侵略性”的張， 從來沒有停下腳步， 曾經依靠“三人小分隊”的開城模式，快速打開中國市場，從2014
年進入中國開始， 短短兩年就在60多個城市扎根。Uber的成功，依靠的就是一套高效的數據管理機制。因為各地市場差異化極高，依靠傳統的管理模式復制極慢， Uber索性把總部的關注點放在管理流程和業務系統搭建上。至于當地市場的運營，總部如果都要一一深入了解再做決策，一定會延長決策周期，降低業務靈敏度。所以索性充分授權給了當地團隊。當然，這一些都依靠高度數字化的管理模式。比如， Uber會規定， 一個新用戶的成本， 最高不超過25美元，只要在這個預算范圍內，當地團隊可以自由選擇采用
什么樣的渠道和方式去獲取用戶；
對于每公里定價， Uber也會設定好計算公式， 只要輸入當地的人均收入、出租車起步價、每公里計價等參數，就能計算出價格。同時， Uber也會通過業務數據的反饋， 不斷迭代和優化自己的這套管理系統。舉個例子， Uber會每天分析區域內各個城市的自然用戶注冊量，一旦達到設定的數值，就會通知到業務團隊進入新市場開拓市場，也就是用數據就能預測開城的決策，提前規劃資源和預算，搶占市場先機。在這節課里，我們會通過一個企業案例，講講如何進行業務預測。
典型的數據預測場景——趨勢預測
第三是趨勢預測，比如判斷宏觀趨勢，例如對行業發展前景的預測。在講需求預測時，你可能注意到，其實市場需求是很容易受到突發因素的影響，比如2020年的金三銀四求職季可能就會因為疫情而延遲。具追蹤和預測市場需求的變化，就能成為非常有力的決策武器。但如果投資機構需要預測行業發展趨勢，或者分析宏觀經濟走勢，就需要進行精準的趨勢分析。這種分析方式會需要更多的分析數據和信息，更加專業的方法論支持，分析框架和結論也會復雜很多。這一講，我們會聚焦在最常見的業務預測場景里。下一講，我會重點說一說，如何用數據進行基本的行業分析，幫助你快速判斷行業發展前景。業務預測的兩種方式年初，你所在的公司或者部門一定會做2020年全年預
算，這就是一個典型的需要用數據預測業務的場景。回想一下，你或者你所在的部門是怎么做的呢?其實大致來說， 有兩種可能， 一種是自上而下， CEO給出一個明確的營收或者增長目標，各個業務部門再圍繞公司的大目標進行評估，看看需要哪些努力和資源，才能達成這個目標；另一種方法是自下而上，也就是各個業務部門先對自己未來一年的產出進行評估，設定目標，再匯總到公司統一審核和調整。那么問題來了，假如你是Q公司銷售部門的負責人，2019銷售目標是800萬，實際達成692萬，達成率87%。那么在這兩種情況下，分別應該怎么樣制定2020年的銷售目呢?自上而下的業務預測第一種場景里，公司給定了一個目標，2020年銷售目標是1000萬，需要你按照目標完成業務預測。首先，我想問問你，這次業務預測的結果是什么?這里我會留給你5秒鐘時間，思考一下，你給老板的答案是什么?老板判斷這個目標是不是可行?如果你的回答重點是圍繞目標是否達成，那么基本上你已經偏離了實際工作場景里業務預測的分析方向。事實上，在自上而下設定業績目標的溝通場景里，公司和老板會傾向于給出他們“希望達到”，而不是業務部門覺得“可能達到”的數值。還記得嗎?2019Q公司的銷售目標是800萬，去年大家那么努力也沒有達標，只完成了原定目標的87%，也就是692萬的業績目標。今年能把去年的目標完成就謝天謝地了，萬一做得不錯可能還有小幅增長，現在居然在去年目標基礎上還要再漲
25%，1000萬的指標根本就不可能達成。
我相信這可能是業務部門聽到目標的第一反應，事實上，大多數時候，業務部門永遠覺得公司給出的業務目標無法達成，就是拍腦袋瞎指揮，這幾乎是目標管理上永遠的矛盾。但最后目標聽誰的呢?自然是自上而下，當然是公司和老板說了算。所以，當我們做業務預測的時候，首先要記得，老板給出的大目標是一定需要達成的，我們需要預測的是預期和現狀之間的差距，以及如何做才能縮小這個差距，促使目標達成。在明確了自上而下的場景里，業務預測的結果不是回答Yes和No之后， 我們來看看業務預測到底包含哪些內容和步驟。
第一步是對公司的大目標進行拆解，找到影響大目標最關鍵的3到4個二級指標；
第二步是對二級指標進行評估綜合水平；分析二級指標能夠達到什
三步是對二級指標進行分析，看看為了達成大目標，需要投入哪些資源；
第四步是驗證投入資源之后，大目標是否能夠達成。
我們回到Q公司的案例，作為銷售負責人，首先你可以把公司的大目標，一級級拆解，找到影響目標完成的關鍵指標，這種方法，也叫杜邦分析法。經過拆解，你發現影響銷售額的二級指標主要有三個，分別是客戶總數、客戶轉化率和平均客單價；而二級指標又可以進一步拆解，形成三級甚至更多層級的指標。注意，如果預測的指標過細，會陷入大量細節的業務數據，從數據收集、整理到分析都會耗費大量的時間，對預測結果影響不大，但層層匯總起來，統計誤差卻會越來越大。所以，我們在業務預測時，通常只會關注最重要的3到4個。二級指標，最多拆解到第三級指標。為了后續的工作，你可以對二級指標進一步拆解，發現客戶數包含新客戶和老客戶。新客戶的平均客單價很高，但轉化率很低，耗費大量銷售時間，但對總營收的貢獻度只有25%；而老客戶雖然看起來單子小，但是勝率很高，對于總營收的貢獻度達到75%。
接下來我們就需要對二級指標進行評估，我們可以通過預測模型，比如線性回歸方程，判斷二級指標的自然增長，也就是業務部門預期可以達成的數據；接下來，估算為了達成1000萬銷售目標，我們實際需要成的業務指標數值，也就是公司希望可以達成的數據。現在我們能直觀看到兩個數值之間的差距，第三步就需要結合業務可行的案，看看為了達成大目標，需要投入哪些資源。
第四步，也是非常重要的一步，我們需要對方案進行驗證。除了方案的可行性，也要結合業務數據，看看投入對應資源之后，大目標是否能夠達成；如果不能，就需要回到第三步，尋找新的可行方案，直到預測達成。好，我們來小結一下。在自上而下的場景里，業務預測通常不是回答目標是否能夠達成，而是分析預期和現狀之間的差距，評估可行方案，預知潛在風險，看看如何才能縮小差距，促使目標達成。這樣的好處是，圍繞大目標，各個部門可以預先拆解目標，策劃方案，并且評估所需資源，這樣就為團隊目標的 制定和績效的管理提供了基礎。 在日常管理中，只要定期回顧核心指標，看看和預測值是 否存在偏差，就可以及時發現問題，促進目標達成。 這也是為什么既然有了大目標，還需要進行業務預測，核 心也是幫助公司提前規劃資源分配，預知業務風險。 那你可能會問，萬一老板制定的目標風險很高，能不能和憑多年業務預測的經驗，我幾乎沒有看到過可談的業務大 目標， 尤其是關系到公司用戶數量、GMV、利潤率和用戶 價值的核心目標，但是實現目標的路徑以及資源是可以被 調整的，公司也會結合業務預測的結果，追蹤和調整最終 的經營方案。 所以，現在你知道了，業務預測產出的結果，不是目標是 否可達成，而是需要達成目標所需的資源，包括人力、物
力和財力，以及指出達成目標存在的業務風險。這樣才能 助企業和組織提前規劃，應對挑戰，達成目標。 自下而上的業務預測 有沒有另外一種可能，就是老板沒有明確的標，讓你自 己預測一下2020年的銷售結果，也就是讓你先提預算。 這就是典型的自下而上的業務預測。 首先，有了前面的基礎，你應該知道，業務預測的結果不 是一個數值，哪怕這個數值比老板心里的目標還高。公司 和老板需要的，是滿意的業務結果，以及支持業務結果達 成的可行方案，包括業務規劃、所需資源和風險評估。 操作的步驟也和上面的場景類似，首先明確一級指標是否 發生變化(比如從銷售額增長變成了用戶增量)，然后找 到影響大目標最關鍵的3到4個二級指標，對二級指標進行 分析，提出并驗證可行方案，評估資源投入和業務風險。 這里主要有三點差異： 首先，在自下而上的場景里，業務預測自由發揮的空間更 大，調整指標的思路和可能性也更多，所以一定要清晰定 義和聚焦在二級指標上，避免陷入業務細節?？梢哉f如何 定義目標，直接決定了預測效果；
其次，在自下而上的場景里，業務經驗對于結果的影響可 能會更大，所以對于二級指標的預測，盡量依賴公司內部 的歷史數據、市場上相似公司的實操數據、以及預測模型 來判斷，控制個人經驗對于結果的影響； 最后，通過自下而上的方式得到的業務預測結果，一定會
匯總到公司層面統一討論和調整，再重新下發到業務部 門。所以后續可能會需要結合自上而下的方式，調整業務 預測結果，向公司的大目標看齊。
小結
現在你知道了，無論是自上而下，還是自下而上。本質 上，業務預測就是縮小公司發展目標和業務實現能力之間 的差距。 無論作為專業的數據分析人員，還是業務部門的操盤手， 都需要理解，沒有完美的工具和模型， 實際問題；也沒有絕對的權威，可以脫離數據做出正確的 決策。 可以脫離業務解決 網景(Netscape) 公司前任CEO Jim Barksdale的話， 就 可以概括這種平衡： “如果我們有數據，就讓數據來發聲。如果我們僅僅是意見 不一，那就得聽我的。
好，學完這節課的你已經掌握了業務預測的基本方法，可 以通過指標拆解、評估、分析和驗證四個步驟對公司或者 部門的業務進行更加準確和全面的預測，為全年業務目標 的實現打下扎實的基礎。
用數據思維武裝頭腦、洞察商業，做一個萬事心中“有數”
的思維高手。
今天的分享，你學會了嗎?
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
不同的階段，臨摹的目的不盡相同。一般來說，前期臨摹更多的是練習軟件、技法，后期練習別人的風格表達，綜合運用。所以，我把臨摹分為技法臨摹、半原創到原創 3 個階段，每一個階段沒有絕對的界限，都是在積累創意，完全是可以用到自己的項目中去的。
今天會分享一個我當年做臨摹練習并融入實際項目中的小案例。
大概是在 15 年左右，在網上看到錘子設計師設計的一個圖標，覺得非常驚艷，當時就想把它臨摹下來，這是當時臨摹的一個效果。
△ 原作
△ 這是我當時臨摹的圖
我在臨摹這張圖的時候，想達到的目標是能根據自己的 logo 色及文字，做一個半原創的設計。
然后實際練習中，不斷觀察原作發現有一些細節值得學習：
當時，對我來說，在練習的過程中有一個難點就是關于第 3 個細節水的紋理執行有些難度，因為其中包括了粗細變化、虛實變化、明暗變化等等，單純的用圖層樣式或者矢量去畫的話，難度都比較大。這個細節當時耗費了我不少時間，后面突然想到其實也可以用合成的辦法來實現，然后我去找了真實水紋的圖片進行疊加，很快就搞定了。所以，只要能達到效果，不能太過于局限某一種思路。
分析并完成這些細節后，就是你在做這個練習中學到的點，嘗試把它們學以致用。
記得當時在 360 時需要設計一套關于摩洛哥藍色小鎮的官方定制版主題圖標。從搜集的當地代表性的圖片中發現，多彩顏料是當地的一大特征，所以決定以染料為關鍵詞去畫一個圖標，又因為顏料本身自帶多彩的特點，所以以它為主題圖標就很合適了。
然后在思考這個圖標的時候，首先會應用參考圖中的配色，并結合染缸的造型做出了第一版的效果。
這個效果雖然是表達了那個意思，但缺乏亮點，聯想之前練習過水的技法表達（臨摹中第 3 點細節運用），正好可以利用水的紋理做下強化，這樣就優化出了第二版。
嗯，看起來感覺有了一些特點，但感覺缺乏細節，接著思考水除了有紋理高光，應該還會有邊緣高光（結合臨摹中第 5 點細節），所以在邊緣嘗試加了高光，增加體積感，做出水要漫出來的感覺。
如果只有這一層高光的話，細節度感覺還是不大夠，在之前的文章《如何從優秀作品中偷師，用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學到他們對于 1px 高光的使用（臨摹作用中的第 7 點），這里因為是液體的材質表現，所以增加一個高光點增加水的通透感。
到目前為止，似乎看起來已經差不多了，但考慮到現實世界中，溢出的彩色液體在透光性很好的情況下，也會對周圍環境產生影響，所以我在顏料設計的四周，配上對應的四種顏色的模糊投影（臨摹練習中的第 6 點）。
在思考下，在臨摹的圖標中為了使得圖標更加自然，作品中其實結合了很多真實世界中會發生的情況，比如水的折射，氣泡的比例，深淺等等，那對于染料來說，會有怎樣的真實情況發生呢？我當時想到一點是，染料在用的過程中其實很容易灑出來，所以圖標背板上現在太過于干凈了，增加一些細節能夠使得背板能夠跟主體物產生關聯，也更加自然。嗯，又是一個小細節。
最后，我們對比下第一版和最終版的效果，細節確實豐富了很多。
一張動態圖可以更加清晰的看到變化。
這次圖標的優化過程，我覺得有幾個要點對我來說印象深刻的：
圖標的風格可以是扁平的，但想要增加自然舒服的細節，一樣可以像畫寫實風格那樣仿照現實。你需要留心觀察這個世界，就算是一張照片中也能有非常多可以利用的細節。
碰到難做出來的細節，多想想有沒有更效率的辦法。比如在做水紋理的時候，一開始就想著完全靠鼠繪畫出來，結果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出來。
對于圖標來說，要注意其整體性。比如圖標中的主體物不要跟背景脫離，不要讓圖標背板只是作為一個容器，而要讓背板也成為圖標本身的一部分，這樣圖標的整體性會更好。
臨摹的過程中，一定要多分析，多記錄自己覺得是細節的點。每一次記錄，都可能是將來設計時提升細節的靈感來源。
以上內容只是我在日常練習中應用到實際項目中的一個小案例，其實還有非常多的靈感想法都來自于你平時做的練習，關鍵是要多動手，多總結，才能增強自己對細節的把握能力。
文章來源：優設網 作者：彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn