先看目錄，大家按需取用，當然更建議全文閱讀（全文7756字，建議閱讀20分鐘）
大部分設計師應該都遇到過這種場景：在做設計前并沒有考慮到加載，但在進行還原度走查或者驗收的時候才發現，由于某些頁面數據請求較慢，導致在頁面中會出現空屏狀態。這時才想起需要在這些頁面添加動畫來承載頁面的過渡。
歸根結底是因為設計師在設計過程中，更多關注頁面本身，而很少去思考頁面在呈現過程中何時會出現白屏狀態，都是后知后覺去補充完善。加載作為必備的一環，卻總是被忽略。目前很多B端產品在這方面都沒有一個系統合理的規劃，導致系統的加載體驗缺失或者不統一。
因此希望這篇文章能夠講清楚中后臺加載出現的場景和規則，對需要深入了解加載以及在制定加載規則的設計師朋友們帶來一些幫助。
加載通俗來講就是用戶從觸發頁面操作，到頁面最終呈現的一個等待過程。這個過程始終存在不可避免，只是時間有快有慢。快的加載只需要幾百毫秒就結束，但慢的加載就可能會達到幾秒甚至十幾秒，讓人產生焦慮。
而為什么會有如此大的差距，這就需要從頁面渲染的整體過程來進行說明。當我們從瀏覽器輸入網址，再到我們看到完整頁面的這個過程，網頁到底經過了哪些步驟呢。經過資料查詢和與前端確認，整體過程可以闡述如下：
從這里我們可以看到頁面的呈現是程序經過了一系列操作才最終呈現到我們面前的。在這里可以將其簡化為四個階段：用戶操作功能→頁面向服務器發送請求→服務器接受并返回數據→頁面呈現。
而決定整個頁面加載快慢的就在于請求與數據這里。一般我們可以將頁面的數據分為2種類型：靜態資源和動態資源。
靜態資源：前端的固定頁面，這里面包含HTML、CSS、JS、圖片等等，不需要查數據庫也不需要程序處理，直接就能夠顯示的頁面?？梢院唵卫斫鉃槟?strong style="outline:0px;margin:0px;padding:0px;">頁面上的固定字段和結構。這種頁面一般加載速度比較快，比如我們看到的展示型官網一般都是前端寫好的靜態資源。
動態資源：而對于頁面上的動態變化的，需要程序處理或者從數據庫中讀數據，能根據不同的條件在頁面顯示不同的數據，比如表格數據、統計數據等稱為動態資源，這種都需要調用后臺接口來進行返回，因此加載速度相比于靜態資源就會更慢。
而它們的區分點用下圖可以表示：
可以看到靜態資源基本是直接返回，而動態資源還需要連接數據庫調取資源，尤其是在遇到數據庫調取較慢時就會花費更多時間。而我們加載緩慢的大多數問題，也基本上更多出現在動態資源的獲取上。
當我們清楚加載形成的原因，接下來要做的就是在需要加載的地方對其進行處理。這也是在設計過程中我們經常遺漏的地方。我們先看一下目前常見的2種處理方式：「默認處理」和「使用進度指示器」
當我們對加載過程不進行任何處理時，程序就會以默認的方式進行-即根據資源獲取速度一步步呈現。可以看到嘿店后臺的處理過程就是一種默認處理方式：
但是這種做法就會導致我們在頁面加載過程中會出現空屏狀態，比如上圖切換到概覽時出現了空屏狀態，尤其是當遇到了網絡緩慢的情況，會造成在加載時頁面停留在當前狀態下不動，往往會讓用戶陷入到「系統故障」的錯覺。
這個名詞說起來可能比較陌生，它指代的就是我們平時經常看到的加載動畫、骨架屏或者進度條等。進度指示器的作用就是告知用戶當前頁面并沒有故障，而是正在讀取數據。
通過添加進度指示器來對空屏狀態進行承載，能夠減輕用戶的焦慮感。目前很多B端產品更通用的形式是添加動畫來過渡。
但是在體驗過程中很容易發現一個問題，就是在產品的整體加載過程中，某些空屏狀態是沒被加載動畫覆蓋到的。當這些沒被覆蓋到的加載過程過長時，很容易出現焦慮感。比如神策數據在左側列表切換時的加載過程就沒被覆蓋：
想要更全面的把加載動畫覆蓋到所有頁面，我們就需要弄清頁面在哪些狀態下會出現空屏狀態，從而制定統一的加載動畫規則。這個問題可以先思考一下，后面解答。
在制定統一加載規則之前，我們需要明確一個概念，就是加載的模態與非模態。
模態加載的含義就是當前加載會中斷用戶其余操作，用戶在這個期間只能等待加載而不能進行其他操作（有的模態會提供取消按鈕）。如果你的頁面涉及到以下2種情況，可以考慮使用：
1.用戶當前的操作本身不能與其他操作同時進行。比如系統更新，或者工具類的導入導出相關操作，我們只能等待更新、導出完成才能繼續進行后續的操作。這時候可以使用模態加載來承載，比如protopie的導入操作；
2.當用戶進入到一個全新的頁面時，這個時候頁面什么都沒有，我們只能等待頁面加載完成才能進行后續的操作，因此在這種情況下也可以采用模態加載，比如我們剛進入Asanan產品頁面看到的首屏加載動畫：
除了上述2種情況外，你也可以根據你的業務場景來進行模態加載的選擇，但建議是盡量少用模態加載，其會對用戶的打斷和干擾性比較強。
非模態加載的話，這種加載通常只會出現在需要加載的部分，不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數據篩選加載等都屬于非模態加載。
非模態加載相比于模態加載會更輕量，因為用戶隨時都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態彈窗來進行承載，比如飛書的左側欄切換操作：
接下來我們進入正題，在這里我從加載的角度將網頁整體加載過程分為呈現加載規則和操作加載規則。
我們先談頁面呈現規則。前面已經明確加載產生的原因和類型后，我們就可以開始為我們的產品制定統一的加載規則，以保證后續頁面加載的一致性。
在拆解頁面的加載過程前，我們進一步闡述之前提到的渲染原則，從前文中提到最后會經過「解碼」和「渲染」2個步驟，這也是決定了我們看到的頁面的最終呈現順序：
我們看到的頁面是由HTML、CSS和JavaScript來進行構成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式，JavaScript則是負責頁面中的交互(當然JS也可以控制樣式，這里只描述主要功能)。
頁面在「解碼」階段，拿到的HTML文檔會被解碼為DOM樹，同時將CSS文件解析成CSSOM，這兩者結合后一起渲染頁面，JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染，最后渲染交互。視覺的角度來講就是先看到元素樣式，然后才能進行對應操作。
由于瀏覽器渲染順序一般會根據代碼的順序進行渲染，而代碼在頁面中的構建一般也是按照頁面的上下和左右的順序去寫的，因此我們看到的頁面的視覺呈現順序也是遵循從上到下，從左到右。
所以幾乎所有的產品都是先看到頂欄，然后左側邊欄，然后其他內容。因此我們可以通過這個原則來拆解對應的頁面，我們按照頁面常規結構可以將其分為三個加載部分：頂欄、左側導航欄、內容區域。而其加載順序如圖所示：
當知道對應頁面的渲染順序后，我們就能夠清楚在頁面渲染的過程中哪些地方會出現空屏了。因此將頁面加載過程拆解為如下順序：
我們的加載動畫需要承載的就是上述這些白屏的地方，從而將加載細化為三種場景的拆分：全局加載+局部加載+內部加載。如圖所示：
通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細闡述一下這三種類型的定義和用法。
如上圖所示，全局加載的目的是為了覆蓋用戶從輸入網址到頁面的資源渲染的這個中間過程的空屏狀態而存在的。而這種狀態會涉及三種場景：
1.通過網址進入到一個新的頁面時；
2.通過鼠標右鍵或網頁刷新按鈕對該頁面刷新時；
3.通過頁面操作需要新開頁面時。
該全局加載的動畫構成為：
1：覆蓋整個頁面的加載，由純白色+加載動畫構成；
2：加載類型為模態加載，因為用戶在這種頁面狀態下并不能進行其它操作。
但在這里我們需要注意全局加載的開始和結束時間：
開始時間：當進入頁面時立即呈現加載動畫；
結束時間：當頁面加載出頂欄的時候，此時停止加載。
為何要這么處理結束時間，原因其實圖中已經給出了。這里再解釋一下原則：只要有頁面資源返回，我們的全局加載動畫就會結束，隨后啟用局部加載來承接后續的狀態，避免用戶在當前狀態長時間等待。而頂欄在一般情況下都是最先加載出來的，所以以頂欄出現作為結束全局加載的標準。當然如果你的結構沒有頂欄，可以以左側欄來作為結束標準。
局部加載是用在頁面整體框架加載的過程中，承接在全局加載后。局部加載的使用場景可以概括如下：
1.頂欄加載結束后，用在剩余框架的加載效果（具體體現為左側邊欄和右側內容區域）；
2.對于涉及到局部頁面的切換操作都會進行局部加載（比如左側邊欄的切換）；
光看文字可能不是特別清晰，在這里可以舉一個動態的例子來幫助理解：
上述展示的是在頁面呈現的時候一個完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區分的，可以通過程序控制讓這種加載動畫只在初次加載時出現。
第一次加載時出現是因為我們需要有加載動畫來承接框架首次加載的空屏時間：
但第二次的時候由于有緩存（緩存會加載我們的靜態資源，能夠讓我們的頁面框架在第二次時更快顯示），這樣在讀取框架時基本不需要加載，我們就可以通過程序來直接去掉其中的局部加載動畫，直接顯示框架來進行呈現。
目前在飛書和釘釘等B端產品后臺均采用了這種處理方式?？梢钥吹綀D中我在第一次切換到角色管理時是有碰撞小球的局部動畫存在的，而第二次再次進入時則直接出現框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態，又避免了局部加載動畫的頻繁出現。
內部加載是用在頁面內部不同模塊數據間的加載。當框架都已經加載結束，但某些數據由于接口比較慢，此時還沒有返回，這時我們就可以用內部加載來進行承載。這應該是我們更常見的加載情況：
在進行內部加載的時候，需要注意，內部加載的時候一般標題是存在的，因為標題基本都是固定的，所以能夠很快被拉取。比如Zoho的內部加載，加載時標題已經出現了：
通過這三種類型的加載，能夠覆蓋從用戶輸入網址，到頁面渲染完成這個頁面呈現過程中的全部加載場景。
說完頁面的呈現規則，再談頁面操作加載規則。頁面的操作其實對應的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態，而且需要考慮到控件影響的其他頁面范圍。
控件的加載并不是隨時都需要，我們要根據實際的數據量大小及業務場景來選擇性使用。目前我們需要考慮的控件及其加載狀態主要有如下：
比如圖中的按鈕的加載狀態是必備的，在很多場景下都會用到。但是下拉列表和級聯列表，在一般的場景下都不太需要進行加載，當遇到列表中的數據特別多或者調取特別慢時就可以考慮為其加上加載狀態。
這種控件比如日期篩選、表格篩選或者保存等操作，當你切換篩選條件后所有與其相關的頁面元素都會發生變化。在這種情況下我們需要考慮到被影響元素的狀態。目前的設計實現上有兩種做法：
1.被影響元素不可被操作，且該區域有遮罩+加載動畫來覆蓋；
2.被影響元素可進行操作，無任何動畫，但操作并不會影響之前提交的結果；
這兩種方案一種是利用遮罩防止用戶無效操作，另一種則是保持了足夠的操作自由性。個人在這里更傾向于處理方式1，我認為被影響的元素是需要有遮罩+動畫的，來避免用戶在加載期間對其進行無效操作，比如示例中方案2后面修改的名稱是沒有被系統保存的。
需要注意的是如果在產品中使用方案1，我們的遮罩區域只需要覆蓋被影響的元素就可以了（保存這種可以將按鈕一起覆蓋），比如通過篩選導致圖表數據發生變化，這時只需覆蓋圖表區域，而不用覆蓋篩選區域。這樣的好處是當某些篩選數據出現加載過慢問題時，用戶可以通過切換篩選項來打斷當前加載。
上述描述的操作都是針對于當前頁加載。當控件導致頁面刷新或者跳轉時，則整體遵照頁面呈現的規則進行加載。
上面闡述的加載已經完全能夠覆蓋我們頁面整體的加載，但是還是需要提及一下骨架屏和進度條這兩種加載形式。
先說骨架屏。實際上骨架屏的使用效果體驗是優于加載動畫的體驗的（骨架屏的加入使用會讓用戶感覺網頁出現的更快）。那么為什么在大部分的B端業務頁面中沒被用到呢，主要有2點原因：
1.每種骨架屏都需要進行對應的定制開發，需要與加載后的頁面框架保持一致，這會增加了開發成本。
2.中后臺的業務界面對來說固定結構的頁面會較少，這對于骨架屏的使用機會就相對較少。
個人認為在前期可以以統一加載體驗為主，在后期業務相對成熟后，可以針對固定結構，通過骨架屏的使用優化加載體驗。
再說進度條。我理解的進度條的使用條件：對于加載時間較長的規定場景可以考慮用進度條來承載，比如我們常見的游戲加載中進度條就用得比較多，因為游戲一般資源比較大。還比如figma在進入設計文件的過程中也采用了進度條加載也是因為設計文件可能會很大。
進度條在特定場景下能夠緩解用戶焦慮，讓用戶知道進展。但進度條在多數情況下都抓取不到程序的真實進度，這也會導致有時候我們看著加載到99%，那最后的1%遲遲加載不出來的的原因。目前很多中后臺產品對于進度條加載使用相對較少的原因，很大程度是沒有那種加載特別長的場景。
因此這兩種加載場景的使用會更加定制化，如果需要使用請根據具體的業務場景來進行選擇。
如果把加載動畫等比作頁面加載的外在，那么緩存和加載策略則是頁面加載的內核，合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度，讓用戶更快速地看到頁面。
大家肯定聽過緩存這個概念，前后端都可以使用緩存。緩存就是數據交換的緩沖區（稱作Cache），是存貯數據（使用頻繁的數據）的臨時地方。在這里主要講一下瀏覽器緩存：
從這張圖可以看出，服務器在請求數據時，會進行緩存的判斷，如果有緩存則首先讀取緩存，如果沒有則從服務器中拿取。調取緩存會在很大程度上提升頁面的加載速度，縮短了從服務獲取數據的時間。通常瀏覽器會主動對頁面的靜態資源進行對應的緩存，這也就解釋了我們第二次進入頁面會比初次進入頁面時加載快的原因。
但程序其實也可以對動態資源（也就是需要從數據庫等拿到的資源）進行緩存的，并且可以設置緩存的過期時間（比如設置過期時間為1小時，那么1小時過后就會重新拉取新資源）。對于某些動態資源拉取過慢并且更新頻率不高的我們可以采用動態資源緩存的策略，從而提升整體的頁面加載體驗。
現階段我們常用的主要有下列6種加載策略：
加載策略的本質就是通過對應的加載設置來縮短產品與服務器交換數據的時間，接下來我們詳細看一下每種加載策略的具體使用策略：
懶加載是當內容落入視窗被用戶看到時，才會進行加載。這種比較節省資源和減輕服務器壓力。對于當前頁面內容很多的可以采用這種加載策略。而這種加載策略的設計，能夠讓用戶更快看到當前屏幕內的內容，減少等待時間。
比如蘋果官網的加載策略就采取了這樣的一種方式。我們可以看到右側的資源只有在我們向下滾動出現在屏幕中時才會進行對應的加載，這樣能夠保證用戶在進入網頁第一時間看到首屏內容，并且用戶幾乎感知不到這種加載延遲。
預加載是在頁面空閑的時候就把用戶即將用到的資源加載完存到緩存中，等用戶需要使用時，通過緩存直接調用呈現。比如用戶在看A頁面的時候，就可以通過預加載來準備用戶需要的B頁面資源。當用戶需要B頁面的時候，立刻就可以呈現。
比如某些頁面在實際中加載比較慢，這個時候就可以考慮是否用預加載的策略來提升網頁整體加載速度。比如知乎的視頻和文字在都進行了對應的預加載。即使當你處于斷網狀態（圖中我將頁面網絡切換為斷開狀態），可以看到依舊可以點擊全文進行查看和視頻的部分預覽。
當頁面中有文字和圖片時，優先加載占用網絡資源小的，比如文字資源，然后再進行占用資源較大的加載，比如圖片資源。通過分步加載也能有效減少頁面等待時間。比如大眾點評等圖片很多的網站往往會采用這種加載策略。
分頁加載是我們目前很常見的方式，比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載，分頁適用于數據量比較大的內容，比如表格數據或者大數據搜索場景可以使用。
分頁加載可以理解為當前獲取到100條數據，但是將100條數據分別拆成5頁每頁20條數據提供給用戶，這樣也可以讓用戶減少等待時間：
在目前還有一種滾動分頁的加載，就是不提供視覺上的分頁，而是當用戶進行滾動時，自動加載一定數量的內容，這樣從用戶的視角看就是一個連續不間斷的數據展示。比如一些資訊類的網站就是采用的這種加載策略，有的也把這種滾動分頁的方式稱為自動加載。
這里講的延遲加載更多的是一種防護加載機制，一般延遲設置的時間為300ms。這里的延遲加載有2種使用，第一種多用于搜索，通過延遲加載能夠讓用戶更好進行連續輸入，避免搜索結果被高頻率刷新，同時緩解服務器壓力。如下圖，可以看到我在輸入1后會有個延遲才出現加載列表，并且我在連續輸入12306的過程中是沒有對結果進行更新的，當我輸入完后才更新。
第二種則是通過延遲加載可以更好防止反復操作。當用戶在同一組件上面進行切換時，如果該操作小于300ms,則只記錄最后的點擊操作。這種情況可以用在我們的表格翻頁和開關等狀態上，防止用戶瘋狂點擊導致數據反復請求和屏幕閃爍的情況。我們可以通過下面這個組件演示例子來進行對應的感知：
延遲加載更多用于上述2種場景，對于其他情況的加載，直接加上就可以了，并不需要刻意設置延遲。
這里想要表達的含義是當用戶在操作后，客戶端立即反饋操作成功，然后把請求放到后臺與服務器交互，這一過程用戶不需要了解，不需要等待。無論在什么網絡環境下你基本上都能操作成功。比如微信的朋友圈發布就是這樣的操作，即使你在斷網的情況下都能夠立刻發布，但實際上這個時候并沒有發送成功，還需要上傳到服務器后才你的朋友們才能看見。
這樣的好處是用戶使用起來非常流暢，但是壞處就是，當操作不成功時，用戶并不能及時進行感知，仍然以為操作已經成功了。所以這種場景我們也需要根據場景進行對應的判斷和選擇。對于復雜的B端場景個人建議慎用或者不用這種操作，畢竟很多發布的功能會同時影響很多業務線。
這里就拿微信的朋友圈發布來進行舉例，下方手機狀態都為斷網狀態，可以看到微信立即發布，而貼吧在這種狀態下提示網絡錯誤。
通過這些加載策略的選擇性使用，能夠在特定環境下提升我們系統的整體使用體驗。因此我們需要對這些加載策略有一個比較全面的認識，這樣我們不僅知道加載慢的原因，還可以利用加載策略去提升頁面性能。
在整體的加載過程中，別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網絡速度過慢或者突然斷網這兩種狀況讓頁面一直加載不出來，這時我們需要考慮對長時間的加載過程進行處理。
通常做法是我們要對加載狀態有一個最長時間的限制，一般為加載不超過10s，超過最長時間后就進行異常狀態顯示（提示語+刷新按鈕）。這樣用戶可以選擇重新加載或者離開此頁面，而不是一直等待。
在這里還想到一點，就是對于編輯頁面，我們應當加入網絡連接是否異常的判斷，比如當進入到編輯頁面后，如果遇到網絡斷開，需要在頁面的頂部加上常駐提示條【當前網絡連接斷開】，這樣用戶能夠及時進行察覺并修復。避免在無網環境下繼續輸入。這對于某些需要輸入很多內容且并不提供本地保存的頁面來講是非常有必要的。
加載在設計中是非常容易被忽略的模塊，因為在大部分情況下網絡速度都較快，人們很難深刻地感受到加載過程。但加載卻在產品運行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個點：
1.我們需要明白加載為什么會出現，這個過程是怎么樣的；
2.加載的通用處理手段是怎么樣的，非通用處理方式有哪些；
3.通過緩存和對應加載策略能夠讓頁面加載速度有本質上的提升。
這樣當我們在頁面上遇到加載速度慢的問題時，在為其加上動畫承載過渡的同時，還應該思考其加載緩慢背后的原因，是因為數據量太大還是加載策略的相關問題，是否可以將其進行懶加載或者分步加載，這時我應該去找前端或者后端如何溝通。從源頭上解決加載時間長的問題，才是后續產品設計過程中的長久思路。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
提及“設計的溫度”，不得不提我們老生常談的“情感化設計”，提出這一概念的美國認知心理學家唐納德·諾曼將設計拆解為三個層次：本能層、行為層、反思層，層層遞進。
1/ 本能層的設計，是視覺的直接反饋，是指用戶第一眼看到的、感覺到的東西是否會激發用戶興趣；
2/ 行為層的設計，注重的是效用，產品功能是否好用，易用，用戶使用產品過程中能否高效解決問題；
3/ 反思層的設計，是情感化設計的最高層次，指用戶使用產品后，是否建立情感連接和記憶反饋。
因而，它們是從美學訴求到效率訴求再到情感訴求的一個進階關系。
如果一款產品在滿足基本功能，對于用戶有用，同時好看并且易用，使用完之后還能產生愉悅以及滿足感的話，那么這將是一款好的情感化設計產品，那必然是一個有“溫度”的設計。
如果一個項目本身充滿社會使命和責任感，那么“有溫度的設計”將可以助推項目的落地鏈條，讓使用平臺的用戶有“溫度”，更讓項目背后的人員感受到“溫度”。
因為，接下來陳述的項目是一個很有“溫度”的項目——用互聯網工具去溫熱社會中的窮苦灰暗，用互聯網思維去幫扶社會的鄉村孤寡老人和留守兒童，用有溫度的設計去踐行有溫度的項目。
隨著我國社會經濟的快速發展，農村青壯年勞動力轉入城市，人口老齡化趨勢加劇和家庭結構的演變，“空心村”越來越多，因此在鄉村出現大量的“留守兒童”和“孤寡老人”。據統計，在農村獨居和空巢老人超過3000萬人，留守兒童也達到了近2000萬人
孤寡老人因為獨居生活、物質困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題；而留守兒童因為缺少父母監管和陪伴，極易產生很多身體及心理問題，這兩大群體是我國人群結構的重大組成部分，一個是未來的花朵和希望，一個是曾經發過光熱的遲暮老人，他們需要關愛和守護，需要有一座“有溫度”的橋梁，為留守兒童撐起藍天、健康成長；為孤寡老人送達溫暖、安享晚年。
基于社會現狀，踐行社會責任，騰訊為村平臺聯合中國社會福利基金會、騰訊公益慈善基金會，預想搭建一個線上與線下結合的平臺，成立“為村暖心小站”，立足于脫貧地區的農村社區，主要服務農村的一老一小以及其他需要幫助的困難群體，解決日間照料、健康護理及心理關懷等諸多問題。
“暖心小站”的整個幫扶路徑是以線上+線下相結合的模式，依據產品需求，在線上可以招募志愿者、發布救助需求、觸達愛心人群；在線下建設實體服務站，開展具體的幫扶活動。從而形成一個從線上到線下的一個完整幫扶閉環。
那在線上的呈現形態上，主要考慮APP和小程序兩種方式，經過對比分析，APP穩定性高、體驗好，但是在鄉村的受眾群體內，互聯網基礎還是很薄弱的，要讓村民朋友下載和適應一個新APP是一個難度非常大的事。而微信在鄉村的覆蓋面非常廣，占有率很高，那么依托于微信的生態、建立小程序，在推廣層面會更加便捷和高效。同時，暖心小站本身結構簡單，是一個非常輕量化的應用，這種特性也更適合以小程序為載體。
在線上的產品框架上，設立兩大專區：關愛老人專區和呵護小孩專區，各自創建知識宣導、在線課堂、愛心募捐等版塊內容，同時在線上召集志愿者，在線下成立社區服務站，開展幫扶活動，然后志愿者們在線下實地服務打卡同步展示在線上的暖心小站。
確定框架之后，梳理角色和場景。本項目主要包含線下服務站的站長，工作人員，志愿者以及社會的愛心人士。
站長、工作人員、志愿者主要是通過線上為村暖心小站這個平臺發布活動信息、記錄服務概況、展示志愿者風采，社會的愛心人士通過線上平臺查看對應信息并參與對應活動，最終幫助農村的一老一小解決各種幫扶問題。
經過梳理分析，平臺使用人群的年齡跨度較大，30歲到60歲這個群體占到了80%左右，所以在產品的呈現形式上將兼顧青年到老年的年齡跨度，讓設計更友好，讓產品有溫度。
基于前面分析，在農村現實環境中的孤寡老人和留守兒童，他們生活是灰暗的，情感是封閉的，他們需要有更多志愿者以及愛心人士給他們帶去陽光和溫暖，讓孤寡老人可以健康生活，讓留守兒童可以健康成長。
所以在設計目標的確定上：讓產品形成一個“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽光、感受溫暖、看到希望。
品牌色的推導，是站在線下的實際場景感受來提煉，鄉村的孤寡老人和留守兒童的生活是貧苦的、灰暗的，他們需要金燦燦的陽光給生活帶來希望，而我們日常所的見的公益組織通常都是以紅色系為主，似乎已經形成了作為公益組織的標識色，因為這種大紅色傳遞愛心、帶來溫暖。
這些顏色都很有代表性，黃色代表陽光，紅色代表公益，而暖心小站，將這兩種顏色進行疊加融合，形成陽光橙，再以陽光黃納入輔助色，形成溫暖、友愛、活力、陽光的色彩體系。
在設計原則上，考慮到我們的用戶群體年齡跨度比較大，一些年長用戶互聯網基礎薄弱，為了讓產品更有親和力，讓年長用戶都能輕松上手，所以在策略上制定簡單、易用、溫暖的設計原則，保持框架簡單清晰、交互簡單易用，讓產品有溫度，讓用戶覺得有用、好用、還想用。
在“簡單”方面，保持產品的頁面框架要簡單，結構要清晰，讓用戶清楚知道自己在哪里，所以在產品形態上只做了內容頁的垂直展示，沒有過多瑣碎的信息入口，讓頁面信息更集中，瀏覽體驗更聚焦，讓年長用戶也可以簡單使用。
在“易用”方面，簡單的框架和結構是易用的基礎，在視覺元素的排列上，通過加大的圖片、加大的間距、加大的圓角，通透的頁面布局可以讓內容陳列更集中，獲取信息更高效。頁面的間距以4px為基數，分為5個跨度，在統一性的基礎上讓界面更有節奏感，層級更清晰，從而提高產品的易用性。
在“溫暖”方面，主要體現在在調性、元素、和內容上：
調性：以“溫暖橙”+“陽光黃”為品牌色系貫穿始終，形成溫暖、陽光的整體基調；
元素：在常規尺度上進行適當加大，加大的字體，加大的卡片占符，加大的點擊區域，讓產品更照顧年長用戶的操作習慣，讓產品更有溫度；
內容：在內容及主圖的運營展示上，突出“溫暖”的調性，增強用戶的共鳴，拉近用戶與產品之間的距離。
整體以大面積的“溫暖橙”為基調進行鋪設，營造溫暖陽光的質感，頂部展示產品名稱和合作logo，增加產品的權威性和信賴度。
自上而下，控制大的間距和留白，分別設置了熱門小站、一老一小專區、志愿者風采、活動回顧、學習園地等版塊。全方面展示了小站的基礎信息、輸送了對孤寡老人和留守兒童的健康資訊、匯集了志愿者服務的風采、記錄了幫扶活動的結果反饋、以及陳列了關愛老人和小孩的相關線上課程。
一老一小的入口及詳情：通過大頭圖的形式加強專題感知，引導用戶點擊。詳情內展示相關的關愛資訊和助力入口，讓用戶可以選擇性的進行點對點幫扶。
小站詳情：分為小站介紹、人員風采、小站活動、和運營概況四個部分，清晰展示線下暖心小站的各項事務，讓線上用戶對線下小站有更全面的了解。
個人中心：功能簡單，布局簡潔，根據不同身份類型展示不同入口。作為站長的話，擁有志愿者審核、活動管理的權限，整體表現形式以統一的卡片式陳列，讓內容更聚焦。
秉持“簡單、易用、溫暖”的設計原則，盡可能地讓產品陳列簡單、操作流程易用、設計滿足功能凸顯溫暖，讓用戶想用，讓產品好用。
經過多次推導與線下團隊配合，小站1.0在今年5月初上線，第一批試點小站正在使用中，得到了較多正向良好的反饋，為鄉村的一老一小帶去了許多暖心的幫扶行動。
產品上線之后，通過在線上發布活動信息召集志愿者。在線上順利舉行了多場暖心活動，比如在重慶馬蜂社區的服務站內為當地留守兒童舉辦了多項課業輔導的活動，在重慶周家寨服務站新建了日間照料室，提升老人的居住生活質量。
今年5月20號，在中國互聯網公益峰會上，為村暖心小站進行線上交流展示，獲得了很多與會代表的關注和認可。
截止2021年7月，平臺上線了兩個試點小站，共舉辦了數10次線上+線下結合的活動，活動參與了520人，受到36000人以上的關注。暖心小站的建立和運營，對鄉村的“一老一小”提供了更加有針對性和個性化的服務，同時加強對當地社會組織的培育和孵化，提升了服務對象的生活質量，促進和諧社區建設，助力鄉村振興。
通過這些試點小站的成果和反饋，讓設計目標也得到一定程度的印證，讓產品體現了“有溫度、有故事、可以連接情感”的橋梁。
隨著互聯網的發展，人們對于產品不再是簡單的形式服從功能，而是逐步轉向形式服從情感。讓設計回歸情感，讓有溫度的設計去創造有溫度的產品，可以增進人與產品之間的情感連接，讓產品更有生命力。再者，用有“溫度”的設計思維，去捕捉和解決社會問題，通過具有社會責任感的設計，推動社會進步，形成堅實有用的“設計力”。
那么，如何提升自己的設計力呢？可以概述三個保持一個向善。
設計需要堅持，而堅持源于熱愛，保持熱忱之心會發現許多美好的事物，同一個需求會自發性地探索很多不同的解決方案，因此會洞察需求背后最本質的東西，切入要點尋找最優解。
還有一句話：“設計路上，唯有熱愛，方能抵御歲月漫長”。
這里的“敏感”指的是設計師要有好奇心，善于發現新事物，善于追蹤最新行業動態，是一種職業敏感，是一種自覺行為，表現為熱情、興奮、敏銳，對新事物充滿熱情，對于新發現充滿興奮，能夠特別敏銳的捕捉社會痛點解決設計難題。
生活中常說，有共情的人往往都特別感性、多愁善感，淚點低笑點也低，因為特別有代入感，而且對事物特別專注。
設計上所說的共情力則需要保持感性，同時也需要理性加持，不偏不倚。讓設計師自己能切換到項目內的各種角色，不把自己當成局外人，將自己融于產品本身，隨時切換為不同用戶的視角，更能深入地發現、分析和解決問題，讓設計站得住腳、更接地氣，讓設計有依有據。
設計的最終目的是傳遞需求、解決問題，這就意味著設計的初衷不同，那么最終的導向也會截然不同。
設計向善，保持“善”的初心，主張設計回歸社會、回歸到人心最本質的出發點，做有溫度的設計、有仁心的設計、可持續的設計。
關注社會問題，保持一顆敏感而善良的心，用“設計向善”解決社會痛點，堅實鞏固自己的設計力。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關于樹形選擇，我們必須先知道它的基礎概念，“樹” 究竟是什么？我們先來看看樹狀結構的定義
樹狀結構其實是作為一種層次結構化的表達方式，它能夠將樹的抽象出來表達完整的構造關系，為什么叫做樹，是因為它更像是一個上下顛倒的樹，根部在最頂端，枝葉反而變為下方。
同樣在對樹狀結構的整體命名上，也遵循了與之類似的表達方式：
節點（Node）：是樹狀結構當中的基本單位，使用節點可以表示 不同數據間的 組成關系（從屬關系與并列關系）通常節點會分為幾類特殊情況。
1.根節點：整個樹狀結構的開端被稱為根節點。一個樹狀結構一定只有一個根，在思維導圖中，根節點就代表著它的開端，用于延展出更多的樹狀結構。不過在目前的樹形選擇當中，因為對易用性的要求，通常會隱藏根節點，只展示子節點。而根節點隱藏在 標題、選項文本 當中。
2.子節點：根節點之外的節點被稱為子節點。一個樹狀結構子節點數量是沒有具體限制，在樹形選擇當中是直接展示出來的部分。
3.葉節點：沒有連接到其他子節點的節點。葉節點屬于一類特殊的子節點，它是整個樹狀結構的最末端節點，在樹形選擇當中是一個重要的概念，下面會展開來講。
分支（Branch）：節點之間的鏈接，在我們樹形選擇當中，分支的線條可以選擇顯隱。其搭配的使用方式也有所不同
同時我們還會用到節點的幾個基礎的概念：
節點層級：指當前節點所在的層級，比如根節點為第一層級，根的子節點為第二層級，以此類推；
節點高度：對于某一節點的高度，便是該節點下所有葉節點從上到下的個數；
節點深度：指該節點到根節點的唯一路徑長度，深度與層級較為類似。
樹狀結構究竟出現在生活中的什么地方呢？樹狀結構對于我們又有什么用呢？大家可能理解上會覺得很枯燥，我給大家舉一個例子：
回憶一下我們小學使用字典時的場景，首先我們是先通過聲母，去確定這個漢字的大概的頁數范圍，然后通過韻母去確定這個漢字的詳細位置，最后通過音調找到想要尋找的漢字：
其實字典的設計，便是一個典型的樹形結構。而在 B端系統中我們常見的公司組織架構、省 市 縣 地址選擇、在線教育的班級結構 等等，這些都是使用了完整的樹形結構。
采用樹形可以快速進行結構化的表達，其目的是為了用戶能夠快速地增刪改查，想要更多了解結構化表達的同學推薦大家看一本書《金字塔原理》，里面講了非常多的邏輯化思維、表達的方法與內容，內容比較多，而這種思維其實在我們工作生活中都能夠用到。
1.層級縮進
為了將樹的整個結構完整的表達出來，會使用層級縮進的方式進行區分，通常會使用 8px 對下一級節點進行縮進，這樣能夠表達更為完整的層級關系。
這里要注意，如果想要更為強調樹形選擇的層級關系或者樹形內容本身就比較多的情況下，可以見解 Coding 編輯器的思路，即：將縮進內容使用“分支線”進行表達，更明確清晰。 這里使用層級線后，折疊圖標也會有所不同，下面有明確解釋。
2.折疊圖標（節點按鈕）
主要是將節點下的所有樹葉與子節點進行展示，在整個樹的結構中，折疊圖標一般分為兩種：三角折疊、方形折疊
三角折疊：為頁面層級較少時使用。因為在較少的層級下，用戶不用特意去思考當前節點所在層級究竟在哪。
方形折疊： 更多與頁面層級線進行配合使用，通過層級縮進，將頁面層級線標識清楚，能夠更好的在多層級情況下進行合理區分。
3.選擇控件
整個樹形結構依舊是在選擇錄入框架下，分為單選和多選。因此需要對其類型有所展示，特別是在多選的場景下，一定要標明它的類型，方便用戶進行理解使用。
通常這個控件可以在單選的時候進行隱藏，這里先按下不表，我在樹形選擇的類型當中深入給同學們進行分析理解。
4.選項文本
注意字數限制、超出后如何處理即可，我就不做過多介紹。
在講樹形選擇之前，我先為大家講解關于與其相關的同類型產品，為了方便大家的記憶，我選擇出了兩類不同的組件進行對比，感興趣的同學可以關注“CE青年” 后臺回復樹形對比進行查看。我通過視頻的形式為大家進行了講解，相信大家在看完之后一定會有所收獲。
單選樹只能選擇葉節點，也就是需要將每個樹展開過后才能進行選擇。
它是一個較為傳統的選擇方式，因為它的選擇熱區較小并且理解成本較高，因此這種方式不太滿足現如今對于B端產品效率提升方面的要求，并且要求十分特殊，因此使用較少，現多以單選節點樹為主。
單選節點樹與單選樹最大的區別在于其能夠選擇子節點，這樣可快速選擇該子節點以及其各種葉節點。
同時傳統的單選節點樹中是采取單選按鈕的方式，隨著對B端要求的不斷提高，并且在樹的功能越發的復雜過后，幾乎取消了 單選按鈕 的形式，取而代之的是將整個 文本標簽 作為選擇的熱區，用戶點擊過后即可進行選擇。
因此在樹形選擇當中，逐漸將單選節點樹演變成由兩部分熱區所組成的一個控件：
在左側，主要以樹類型的展開折疊操作，熱區通常就是圖標折疊圖標這一部分；
在右側，以選擇該選項、節點的操作為主，熱區范圍以整個選項文本作為基礎，進行延展即可。
這里還是提示以下新讀者，這類選擇一定要進行 Hover 狀態處理，不然用戶無法根據光標的變化判斷是否可點擊，當然老讀者跳過就行～
大家在對比單選與多選時會發現，為什么不會存在多選樹？不存在只選擇選項的多選呢？
思考時間又到了，別忘下劃，自己先想想呢～
雖然在理論上會存在多選樹的情況，但是它存在的價值比較詭異。首先在樹的節點當中，我選擇一個子節點就是選擇該節點下的所有。因此可以說是選擇了一個節點；或者說它選擇了該節點下的多個選項，因此在實際情況中這類場景過于的少，更多會用多選節點樹進行代替。
當然，多選節點樹與單選節點樹在結構上是十分接近的，就是將復選框展示出來，方便大家進行選擇。考慮到大家經驗不足，建議這里復選框放在折疊圖標前側，原因有二：
在樹形選擇后續的拓展當中，經常會遇到選擇增加一些操作功能，比如 新增、刪除、復制、粘貼、拖動排序。我看很多設計師最開始因為種種原因將選擇組件部分放在后側，導致之后的操作無法進行更多的拓展，隨之崩潰，對樹形選擇又是一頓亂造～
現有的基礎架構基本都是沿用了這類設計，可減少前端同學的工作量，同時也減少他 BUG 的產生。
多選節點樹的使用場景非常多，我舉一個大家在樹形選擇中都會犯的例子，希望大家能夠多理解其中存在的特殊邏輯：
比如在一個大型上市公司當中，我作為老板會去設定整個“設計部”的權限，并且想要得到的效果是之后有任何新員工都是使用這個權限。如果作為一個新人設計師，很容易就會使用多選節點樹，將整個組織架構進行選擇，但是這樣的選擇與用戶實際想要的內容是存在較大差異的。
在產品設計中，對于上訴的“設計部”這個概念其實是一個動態數據，即在之后新增到“設計部”的所有員工，我不必再去權限管理中重新配置。我們遇到動態數據的情況時，首先不建議大家采取樹形選擇，因為首先對于這個概念的理解成本很高，無法通過樹形選擇這樣的方式讓用戶理解；同時系統對于這類動態數據的情況都建議特殊處理，至于怎么處理，大家可以在評論區討論，我也會在后續文章當中為大家進行講解。
易理解：
因為樹狀結構本身就已經存在很久，早在 DOS 計算機時代就有它的影子，經過長期累月的發展，用戶在理解上也會相對更加容易
快瀏覽：
在數據量特別大的時候，能夠根據子節點優先找到自己想要的葉節點，從而提升選擇效率，與《選擇錄入02》當中講到的 Tab選擇十分類似，沒看過的同學建議先去看看。
看結構：
結構，能夠輔助人們進行快速記憶，從而對整體框架有著更深了解。而樹形選擇正是有了這種結構能夠更為方便的讓更多人熟知，從而更快了解業務。
首先對于樹形選擇本身的控件形式，你就需要去分析其能承載的內容數據量。應該是在什么范圍內較為合適。
當數據量過大時一定會出現異步加載、數據分頁等諸多情況，因此在設計中，需對這類情況進行設計。
全選功能本身較為簡答，無外乎就是一個復選框的事情，但是在上面提到的數據量過大 + 全選的存在，會有些問題還需要大家進行留意。
在樹形選擇當中，都可以采取鍵盤操作從而提高效率。基本規則是：
↑鍵：向上切換同級節點；從第一子節點，順序返回父節點；
↓鍵：向下切換同級節點；順序進入已展開的第一子節點；
←鍵：關閉當前級別節點；返回上一級父節點；
→鍵：展開子節點列表；順序進入已經展開的第一子節點；
回車鍵：提交當前 foucs 的節點選項；
樹形選擇是較為常見的一類方式，但由于大家對 基本的樹形結構 認識不足，導致對其設計會有許多誤區。
關于樹形選擇大家還有什么疑惑，可以在評論區咱們一起討論～
任何一個新穎的設計浪潮，都會影響設計師的設計表達。我們能做的就是感受浪潮、尋找源頭、思考走向，隨時精準有力的擁抱變化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年至今「逆反差字體」這個原本偏小眾的字體設計風格，從卷土重來到廣泛應用，再次受到諸多設計師的追捧，一股新浪潮撲面而來。
縱觀它的出現、流行與發展，身為設計師，期待本文可以通過對經典設計的客觀分析，蓄力字體設計領域的經驗和技巧，為2022年的創作積累更多靈感。
Reverse contrast現在國內被稱為「逆反差字體」。設計師皮特·比亞克（Peter Bi?ak）在2012年發表的文章中曾提到：這種逆反差字體的設計是有意通過違背讀者的預期來吸引注意的，怪異的字母形式在日益飽和的商業信息世界中脫穎而出。
二十世紀中，荷蘭著名書法家和設計師格里特·諾澤爾（Gerrit Noordzij）倡導以書寫走向作為字體設計的基礎，通過習慣來定義書寫理論：平移和擴張。這個邏輯反映出人們對拉丁字母普遍造型認知：橫細豎粗。
豎筆畫在西文字體中起到承重、平衡結構的作用。如果顛倒粗細對比關系，使其橫粗豎細，就會造成橫向視覺，讓人產生印錯的感覺，這與傳統的三大主流西文字體的設計方法也是相差甚遠。
逆向設計的規則營造出視覺上強烈的差異感，比起普通字體更怪誕、夸張，更具有戲劇性和情緒化，讓人印象深刻。它最大的特點是重構了拉丁字母的視覺比例。經發展，中文表達上使用“逆反差”還是生動準確的。
在商業廣告海報張貼應用中Caslon Italian字體被鑄造出來。這是19世紀初，工業革命在金屬活字印刷領域的一個新奇的創新。
1825年，印刷工和社會改革家托馬斯·卡森·漢薩德（Thomas Curson Hansard）把逆反差字體描述為“排版怪物”。
1854年，French Antique字體發行，造型如鐵軌般的字型引來了一種新的風格——French Clarendon。它在美國廣告制作中展開了大量生產使用。在獲得市場認可后的半個多世紀，它仍在馬戲團的海報和西部電影宣傳上被廣泛應用。
這組彩色的活字印刷樣本，讓逆反差的設計風格在當下更顯復古。
19世紀，在追求創新的歐洲人看來，逆反差字體的古怪造型仍是離經叛道的。而現代設計師則帶著更多反思和辯證，以非傳統的審美來認識這種字體風格。
20世紀，逆反差字體的浪潮席卷歐洲。瑞士著名的字體設計師馬克斯·米丁格（Max Miedinger）于 1954年設計了自己的第一款逆反差字體Pro Arte。大名鼎鼎的Helvetica字體就是由他設計的。
20世紀80年代，遠在亞洲的日本也接受了這股“逆浪潮”。當時的動漫和游戲開始風靡，熱血與科幻的世界里結合字體夸張的造型，讓設計簡直天衣無縫。
1980年，在游戲UI中誕生了世界上第一款逆反差像素字體，讓游戲世界充滿著奇幻感。
這種像素化的設計方法，如今是很潮的視覺表達。
80年代，逆反差字體在音樂和書籍等多個包裝領域的應用也是繼往開來。
逆反差字體從未真正流行但也從未被拋棄過。如今，除了趣味盎然，又增加了更加瘋狂的風格效果，最為典型的是Maelstrom。很多字體的誕生，都證明著逆反差的無無限可能性。
西文有著較為完整的逆反差字體更迭歷史，漢字相對創造力偏弱。中國設計師在進行漢字逆反差設計的探索時，不妨大膽些，打破局限，從中國書法中吸取創作養分，這是民族文化理解上的考驗，也是對民族文化的尊重。
大多書法風格多變，并沒有嚴謹的橫粗豎細。不過，難得能在清代的漆書中找到橫粗豎細的規律存在，它犧牲了部分漢字的視覺結構，傳達出一種鈍拙感和趣味性，這正是漆書的魅力所在。
漢儀2020年1月出品一款漢儀吉金，靈感來源就是漆書，在其基礎之上造型更加現代。
民國時期，在廣告招貼、書籍封面上，也能發現很多逆反差風格的字體設計。這些都是漢字設計上逆反差的初次實驗。
徐學成是中國第一代字體設計師，在晚年仍堅持實驗性設計的嘗試，1998年他主持設計出華康雅藝體這款逆反差字體。
造字工房也推出過幾款視覺沖擊力強、節奏分明、充滿藝術張力的字體：造字工房溢尚真體、彩體、超凡體等。
3type（三言）設計研發的基本美術體，在2020年10月進入試用階段。它簡單明了，擁有大膽靈動的字形，是為數不多的優秀中字逆反差字體。
基本美術體也是本文的靈感來源。曾路過順愛烤肉公司，被牌匾上的字體所吸引，便開始了我對逆反差風格字體的探索研究。
日本一度受到美國Fantail（扇形尾）風格的西字影響，也展開過一系列的實驗性嘗試。最為典型的是寫研在80年代，推出的「扇尾蘭」字體，它憑借寫研在行業內的影響力得以廣泛的運用。
其后，C&G 花束字體、TA-Sigma字體等，這些極具逆反差風格的扇尾字形也在市場應用中大放異彩。
歷經200年的鍛造與發展，逆反差字體如今獲得了越來越多設計師的青睞，中外設計有目共睹。
野獸派美學（The brutalist aesthetic）頻繁的應用于當代平面設計和網頁設計中，逆反差字體有著原始且未經雕琢的質樸風格，往往在簡潔精致的物體上形成鮮明對比，增加設計內容的趣味性。
近兩年，看到了很多比例夸張、造型狂野的驗性字體形式出現，這要歸功于酸性設計的盛行。
酸性設計，是一種主觀情緒化、美感與欲望交織、傳達致幻又辛辣酸澀的一種復雜感受的體現。它強調出了失調和混沌共存的狀態，這和逆反差字體的反叛精神極為契合，二者結合來表達科幻感與未來主義時情緒飽滿而熱烈。希望本文能幫助更多朋友梳理逆反差字體與設計風格的關聯性。
逆反差字體是一場字體設計的視覺革命?？此乒终Q，其實是對視覺設計規律的突破與創新，雖“有悖常理”，但并非曇花一現，它在字體設計的歷史上擁有自己長久的舞臺。
任何一個新穎的設計浪潮，都會影響設計師的設計表達。我們能做的就是感受浪潮、尋找源頭、思考走向，隨時精準有力的擁抱變化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1 列表
客服系統常規使用的列表由頂部操作欄、表頭、表體、底部操作欄構成。表格是為可讀性而生，所以表格的易讀、易對比、易操作才是表格設計的首要目標。
1.1應用場景
（1）展示大量結構化的數據。
（2）需要對數據進行排列、搜索、分頁、操作等復雜行為。
1.2設計原則
(1)易讀性
1）表頭。保證表頭字段名稱精簡易懂，既能節省列表空間，又能減輕視覺壓力。表頭的固定功能也能夠很好體現系統界面的友好性，尤其當表頭字段過多，數據類型不好識別的情況，固定表頭能夠大大提升用戶的數據瀏覽效率。
2）行高。較小的行高可以承載更多的信息，但會降低視覺掃描效果，適宜的行高更利于閱讀。目前客服系統常用規格為36px行高，但有些數據量大空間小的專區，需要展示盡可能多的數據時，會考慮會采用24px或30px等小行高，需要基于場景的需求進行選擇。
3）行排序。可根據字段以及列表內容的必要性配備排序、篩選、搜索等功能，方便用戶快速篩選信息或進行信息對比查看。
4）斑馬線。斑馬線能夠增強用戶視覺的橫向引導，尤其閱讀較寬表格且數量還多的列表，可以避免表格內容過多時，出現錯行的現象。
5）分割線。橫向分割線能夠減輕列表豎直方向的視覺重量，只要采用合適的對齊方式，縱向分割線的作用就可有可無。當表頭字段內容少，且易于區分時，可以考慮取掉單元格的縱向分割線，弱化表格形式，便于橫向信息閱讀、信息獲取和信息間對比的同時，又能夠簡化頁面。當數據量太多或單元表格較寬時，保留縱向分割線幫助提升瀏覽速度。
6）列寬。盡量減少展示的列的數量，關注用戶需要的必要信息，當表頭字段過多時采用橫向滾動條的形式，保證列與列之間足夠的呼吸感。
7）自定義列。不同用戶信息側重可能會有所不同，可通過自定義列的下拉面板對列表內容自定義展示。
8）列對齊。標題和內容一般采用左對齊，更符合用戶的閱讀順序。金額數值排列采用右對齊，既方便用戶讀取數據，又方便進行縱向數據對比。
9）空白格。對于無數據項用-占位，不留白。
10）分頁?？头到y列表數據龐大，通常采用分頁來緩解加載壓力，相對用戶而言，通常滾屏會比分頁更便利，所以，若無展示數據量要求且一屏能展示完時，會盡量避免使用分頁。
當使用分頁時，考慮到用戶的操作習慣，可讓用戶自定義每頁展示數量。
11）特殊標識。對于用戶關注的數據狀態變化，可以采用一些符號標識，便于用戶快速定位信息的同時，也能更加直觀的呈現數據變化。如下圖，通過不同顏色和方向的箭頭來反映數據變化。
12）全屏。全屏展示能夠避免和表格無關內容的干擾，提供沉浸式閱讀體驗，可根據場景需要配置全屏閱讀功能。
13）操作項。對于用戶需要進行業務辦理或高頻點擊的操作欄可以固定在列表的兩側，更方便用戶對數據進行操作。當操作項太多或操作項不常用時，可通過收起較低頻操作項，來節省頁面空間，保證用戶閱讀高效性。
(2)易搜索
1）條件查詢。一般位于表單查詢頁面上方查詢條件模塊，當查詢區域內容過多時，可展示第一行的篩選項，其余收起。
2）表頭篩選。在表頭單元格右側增加篩選圖標，點擊后出現篩選覆蓋層，根據不同篩選類別，配置相對應的表單組件，可快速查找數據。
3）標簽篩選。將用戶常用篩選條件或關注目標設置為默認選項，如時間、狀態、范圍，一般位于頂部操作欄或表頭區域。
(3)易操作
1）單條操作。單條數據操作一般固定在列表左側或右側。
2）批量操作。當對批量數據進行相同操作時，沿著用戶的操作路徑，建議將此類操作按鈕放至底部操作欄。
3）全局操作。當進行一些“導入、新增、導出、其他頁面跳轉入口”等列表的全局操作，或進行模糊搜索、條件篩選等操作時，建議將操作按鈕放至頂部操作欄。
4）詳情?？稍诓僮骼锛印霸斍椤卑粹o，也可將名稱項做成可點擊樣式，跳轉詳情。
5）樹形結構展示。無須用戶進行頁面跳轉，展開父級節點即可查看子級列表內容，一般控制在三層以內。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
B端全稱是Business即商家（泛指企業）的產品，通常是企業或商家，為工作或商業目的而使用的系統型軟件、工具或平臺。相對于C端產品，B端產品對業務邏輯和產品邏輯要求會更高。
本篇筆記將羅列B端設計過程中的核心設計思維和高頻設計要點，結尾附上大廠設計規范鏈接。供大家下載查閱。
設計開始要了解設計的目標，用戶的行為都是有「目標動機」的，B端產品的業務目標往往都是為了為企業或個人為了解決某一項工作上的問題。
當設計過程以「目標」為出發點，可以增強設計判斷力，輸出更有效設計解決方案。
B端產品的設計原則：提高使用者的工作效率，同時降低業務鏈路的操作及學習成本。
當你有了目標以后你的設計就可以圍繞這個目標展開：
對于B端的產品而言，用戶最關心它能為實際的工作帶來哪些便利，而并非這個界面做的多么的好看，以及用戶體驗多么棒。所以B端產品設計價值優先級往往是 功能性＞表現力
B端產品設計需要站在整個業務線全局角度去把控各個設計點，不再是「用戶體驗」至上，為實現「任務目標」，「犧牲」一部分「用戶體驗」是必要的，這個時候視覺和一些體驗就不那么重要了。通過調研業務去了解各個角色職能的工作流程、相關痛點，讓產品能用，好用。
理想的B端設計需要了解業務目標以及業務鏈路中每一個環節的過程。將業務邏輯理解透徹再考慮應該如何進行設計實現。
這樣做的原因當你站在使用者的角度進行同理心設計可以更好的幫助用戶完成他要完成的工作，從而提高效率。產品原型一般基于「功能」本身，而設計師從用戶實際場景規劃用戶的任務流，可以優化產品邏輯，補全缺失場景，通過了解業務流程也能給予創造性解決方案
B端產品往往是是服務于企業用戶，用戶畫像需要專注于用戶特征中的「群體職業身份」這類人無論性別、年齡、地區有何差異，他們都是一類角色，我們的產品要提供給這類角色使用，而不是某個人使用。
由于B端設計師不是產品的用戶，無法沉浸在與用戶相同的真實場景中，建立共情。所以設計師最好親自感受一下業務流程，獲得一手的用戶洞察，
「通過業務人員交流」業務人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫像。
「實地走訪」：觀察在自然狀態下用戶如何完成工作任務，并提問題：「你怎么做？」或者「為什么這么做？」
「建立種子用戶群」：聚集活躍的種子用戶群，收集意見和建議，并在群里驗證設計想法。
「親身體驗」：成為真正的客服小二，接聽客戶電話，記錄自己在工作臺場景下的真實體驗和感受。
獲取用戶畫像后了解該群體背后工作感受，行為習慣，以及任務類型。
安全感和信任感建立：人們越來越關注隱私和信息安全。如果你要求必須填寫敏感信息，請確保使用字段下方的注釋文本解釋為什么需要這些信息。
實際工作中我們曾經自動獲取過用戶之前表單中填寫的的支付類賬戶信息，在收集的用戶反饋中，用戶會感覺到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗會更好，但是考慮到信任感，敏感類信息請不要自動獲取。
讓用戶感受到你正在幫助他操作：Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導原則）是搭建B端用戶幫助體系的核心準則，在理想情況下，沒有幫助文檔就可以使用系統是最好的，但在某些情況下（尤其是B端系統），提供一些引導性的幫助其實是必要的。
B端系統中可以嘗試搭建用戶幫助系統：
對B端產品來講，設計師在設計的時候是不需要耗費太多的思考的，只是去按照交互設計師的規劃堆砌圖表和列表。但是對于使用者來講，其中縱橫交錯的商業邏輯和業務邏輯卻是給用戶搭建了一個十分高的門檻。
例如修改資料的時候，使用彈窗、浮層等等交互操作會減少頁面跳轉的頻率。
但是與此同時，減少頁面跳轉并不代表真正的高效，例如瑞幸的供應商系統，供應商所產生的訂單需要按照指定的流程一步步進行操作確保不會出現問題這樣雖然頁面的跳轉增加，但是可以避免操作出錯給用戶帶來更大的困擾。
設計要根據用戶的瀏覽習慣和視覺動線。要嘗試引導用戶的視覺，舉個例子，如何引導：
B 端產品是以業務為核心，是需要用戶長時間操作并完成工作任務的，對于操作和展示內容無關的元素，越少越好。視覺為功能讓步，追求簡潔、清晰、克制、理性的視覺風格。設計語言盡量做到不干擾不打擾。
輸入順序：先易后難；先必填后選填；先公開信息后隱私信息；有關聯性的合成一組，特殊問題后置，用戶輸入時、不會覺得突兀、門檻太高 。
自動對焦（PC端）進行表單頁面，自動對焦第一個輸入字段可以引導用戶開始進行輸入。
標題：標題是對下文最短最精的概括。用戶一般都會跳過表單內容，而且幾乎都不會仔細閱讀那種特別詳細的描述。所以用最少的文字說清楚一個表單的目的尤其重要。
用戶應該可以看一眼標題就知道他們應該怎么做，而不是非得把剩下的全部看完，
（附：這部分感興趣的同學可以搜索“微文案設計”）
在表單編寫方面，或者說各種寫作中，刪減詞語都要比添加詞語更加有益。 在仔細檢查不必要的詞語后，文章會更篤實，更連貫，更吸引人。
這個鏈接有什么用？關閉是點擊右上角的按鈕嗎？如果并沒有增效，那就是減效。每一個字，每一張圖片，都不是100% 必需的，這些都會降低你表單的轉換率。
刪除一個字段，表單提交率就可以提高 26%。（本篇筆記原本有12000余字，為了避免浪費大家時間，我僅保留4000余字的高頻要點內容）
PC端產品提示文字盡量不要放在框內
提示文字存在于框內常用在移動端，它的空間占比很小，對移動端的小屏來說，是非常友好的，但如果在交互上處理不好，會有很大的缺陷。
內部標簽結構，只有提示性文字，用作提示用戶應該輸入什么內容，但用戶在輸入的時候，內部的標簽/提示性文字就會消失，這時候，用戶會失去它是否輸入準確的唯一判別標準。
字段輸入通過部分人工智能自動將操作步驟可以變得簡潔高效 ，也包括諸如一些、自動定位、圖片識別、自動獲取，第三方導入等方式來使用戶的效率得以提升的功能。
打字是在線表單中最耗時、最密集的部分，而且經常會導致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能，將減少工作量并提高轉化率。
文本塊會更容易讓用戶記住內容：例如銀行賬戶、電話號碼等等。它指的是將信息排列成「塊」的過程，使內容更容易保留、處理和回憶。一份研究聲稱數字 3 是幫助人們吸收和回憶信息的神奇數字。
如果一個字段需要特定的格式輸入，請告訴用戶。例如密碼要求、語法規則、編號間距等等。
可以用輸入框長度提示用戶輸入的內容是否正確。
德萊厄斯研究所的可用性研究發現，如果一個字段太長或太短，用戶開始懷疑他們是否正確理解了標簽。
在用戶輸入的時候，右下角告訴用戶已經輸入了多少字，如果超過 80 字后會變紅色，用來警示用戶，并且此時的表單域也無法輸入新的內容。
如果用戶填寫錯誤，向用戶顯示錯誤發生的位置，并說明原因。
如果你的表單里的選項少于5個可以列出所有選項供用戶快速選擇，當大于5個時候可以嘗試用下拉框解決。
將第一個選項作為用戶最有可能的默認選項，且是最安全的選項，提前預判用戶的操作提升選擇效率。排列方式推薦數直排列，豎直排列相對于水平排列容易讀取和定位，提高用戶的瀏覽順序。
當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。
完成表單的設計后可以給業務用戶進行簡單的測試，并記錄他們填寫的時間收集反饋，以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設計。
最后在情感化設計系統里記得感謝用戶填寫或者反饋問題，因為用戶是花時間的。所以請表示感謝。
表格的設計圍繞著「可讀性」和「易操作」兩個設計原則。設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。
列寬有三種常見處理方式：
1. 根據內容的極限長度給出足夠的固定寬度；
2. 可以固定部分列的寬，其余列按百分比處理；
3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態，內容為空狀態顯示方案；
4.需要設置列之間的最小寬度，表格響應式布局情況下最小不小于此寬度。
M-Densign規范中對齊方式會遵循如下規則：
表格的排序，應從用戶目的出發，遵循用戶查看數據的習慣，尊重數據之間的關聯性，設計用戶查看、操作數據的路徑，而非隨機排列（這部分可以在業務側調研時驗證，提高用戶體驗和閱讀效率）。
1. 文本信息/混合型文本左對齊，符合從左到右的閱讀習慣；
2. 數字信息右對齊，方便數字之間的直觀對比；
設計規范需要定義按鈕的四種狀態：正常狀態(Normal)、懸停狀態(Hover)、激活狀態(Active)、加載狀態(Loading)、禁用狀態(Disabled)
B端產品的開發一般涉及多個開發團隊協作，例如瑞幸的后臺修改按鈕顏色，都可能牽動10+工程師的協同。
所以B端產品在進行設計改版以及設計側調整時候要思考調整對于業務側是否有直接幫助，在設計和規范建立之前，切勿頻繁改動。
除了完全獨立設計開發的項目以外，還有大量的 B 端項目是采用第三方框架開發而成的，如 Ant、Element 等等。這是因為這些第三方程序可以幫助團隊節省大量的開發時間和精力。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多時候既讓初入B端行業的設計師感到一絲絲迷茫，因為不同的B端系統也就意味著，它的業務一定就會有所不同。比如CRM系統當中的客戶生命周期管理，OA的辦公自動化，特定的行業往往都會蘊含著不同的業務類型
而作為設計師，如果只了解設計模式、設計組件，不去分析設計最后的業務訴求，其實是沒有任何意義。因此想要通過B端設計指南，和大家一起聊聊B端業務，以及背后所牽涉的具體邏輯。今天就簡單聊聊最為常見的 審批
開始之前，還得再多說兩句，因為一個系統當中，業務本身就不是獨立存在的。因此在去講述審批的過程，一定會涉及到 流程、權限、表單配置 等一些基礎內容，建議可以先做初步了解，再結合文章進行閱讀
雖然在說起源，其實我更想給大家講清楚 審批在B端系統 當中的重要性
審批字面意思是審查并加以批示，通常指對 下級呈報上級的公文進行審查批示，報請上級審批
現如今，任何事情一定都會有分工協作，而使用審批的好處是可以
規范員工行為
提高企業運轉效率
系統存檔便于溯源
保護環境（畢竟減少了紙張浪費）
當然在不同的階段的公司，對于審批的訴求是不太一樣
小公司：因為審批的決策路徑短、流程上都非常簡單，但因此就會缺乏規范保障。比如在外出辦公時，看似只需要與老板當面進行口頭上的溝通即可，但是在外出出現意外時，由于缺乏外出辦公的相關證據，員工的權益則很難得到保障
大公司：因為審批的決策路徑長，流程上都極其復雜，因此會在多人協作下完成整個流程審批。比如想要申請購買辦公用品時，會由 行政、Leader、財務 層層審批，從提交審批到最終落實可能需要十天半個月，但是這樣的流程，能夠確保企業在清查財務狀況時，更加有理有據
審批的演變，就是從最開始的規章制度而來。比如在早期去政務機構辦理各種業務時，會讓你去填寫各種紙質表單。在審核過程中，則需要有各個機關的蓋章及批準，而這種形式正是政府對于普通市民的自上而下的管理方式
審批其實是整個B端系統的靈魂，因為在B端系統當中，企業想要使用系統的一大痛點便是 核心的管控
因此你會發現，只要一個獨立的系統，一定會存在獨立的審批模塊。因為B端管理系統當中企業的最終目的，是管理手中的人，而審批便是最為常見的一種手段
審批在如今的B端系統當中，可以理解為它是一組消息，在這一組消息當中會有：“具體的文本、對應的附件、以及照片視頻”這些內容都是輔佐 申請人 去講訴你需要申請的內容
比如我們在申請病假時，往往需要出示 三甲醫院所開設的證明，對于這個證明，如何在表單當中出現，你會發現最為常見的便是拍攝證明圖片，然后上傳到表單當中（這個與字段屬性緊密相連，我就不做不過介紹）
審批的這組消息還會有些特殊，因為它非常重要，你可以理解為它是一則“加急消息”會提醒審批人快速的進行處理，同時會告知相關的參與人（處理人、抄送人）審批的進度、并且無論成功與否，都會在系統當中留下 足跡，因此它起到了 “追蹤、通知、留存” 三個非常重要的作用，我們首先對于審批進行一個基礎的拆解
如果把審批單獨拿出來，你會發現審批會牽涉到 發起人、處理人、抄送人
審批的發起人，也是整個審批流程的歸屬人，他最關心整個審批進展
因為在發起人的角度，創建完審批事項后，可能還需要進入審批頁面，完善 后續附加信息、及時了解審批狀態、催促審批人的審核、處理駁回意見 等等，因此站在發起人的角度，審批需要盡可能詳細的展示 當前審批的狀態、完整的審批流程、駁回信息的快速操作、成功信息的必要通知
審批的處理人主要在審批過程做出決策，因此他更在乎的是審批申請內容的信息。比如 審批的信息內容、直接的審批操作、多條審批的管理
當然，在一些大型的集團企業當中，會將審批分為審批「直接處理人」與「間接處理人」（后文以 直處人、間處人 簡稱）
「直處人」作為審批的第一處理人，也就意味著他的意見至關重要，如果「直處人」通過過后，相對而言整條審批的通過幾率會大大增加。通?！钢碧幦恕故亲鳛樯暾埲说闹毕殿I導居多，因此多數情況下可以理解為直屬領導進行 “把關”
「間處人」作為審批的后續處理人，同樣在流程當中也十分重要。但在有些情況下，比如一些偏平化管理的企業，「間處人」更多像是“權利”的象征，因為權利已經下放給「直處人」，而「間處人」起到知曉審批以及企業的規章制度要求
審批抄送人主要起到通知對應角色的作用，因為一條審批的出現，會造成諸多影響，假設今天你需要申請事假，如何通知同部門的其他成員呢？
發送即時消息，顯得過于簡單；每個打電話，又有些麻煩；發送企業郵件，又怕他們沒有看到
這時候抄送人會顯得尤為關鍵
通常抄送會有企業流程上管理員配置的固定抄送人，以及發起人選擇的自行抄送人 兩種類型
固定抄送人 角色通常與管理員配置整個流程有關，他是角色當中 管理員 所配置的重要通知人，比如今天你的請假信息，肯定會告知行政，像這類默認的通知流程，則可以將其設為固定抄送人
自行選擇抄送人 則是提供給發起人自行選擇，該條審批可能會影響到的相關人群。比如就是發送給同事，讓他們知曉今天你不在崗位上，因此自行選擇可以增加審批抄送的靈活性
這里肯定會有很多讀者會問，我選擇抄送人與我發消息給同事，有什么區別么？
看似完全相同，實則有明確的區分
通過消息，將審批內容傳達，本質上是你自行將內容發送給對方，對方會對于你這個消息的真實性會產生疑問？你是否通知了
而選擇抄送，更為權威，更能體現你這條消息的真實性，并且整個流程都已經由領導進行批準，因此不會存在太大問題
其實審批的本質就是一組消息，而這一組消息當中，申請人 通過 表單配置 去獲取需要補充的消息內容，而流程會根據企業所配置的流程方式將這一組消息進行合并轉發給對應人，而審批人則需要對這一組消息進行回復“通過、駁回” 來讓整個流程繼續延續
審批當中，最主要的便是流程。因為你可以通過查看流程圖，去了解整個企業的組織架構、規章制度、員工管理方式
串行審批主要是指當一個審核節點通過后，才能進入下一個審核節點。如果節點駁回，則可以根據業務實際需要，配置駁回的返回路徑，會有：撥回到發起人、駁回到上一個節點、或駁回之前任意一個節點 重新審批
并行審批是指一個審批節點存在多個角色同時審批，這里會存在兩種情況
任何一個人審批通過，則可以進入下個節點，這也就是系統當中常說的 「或簽」
所有審批人員通過，才能進入下個節點，這也是系統當中常說的 「會簽」
條件審批就是將企業當中的規章制度映射到實際的項目當中，通常就是某個審批內容會根據 金額多少、實際數量 等 進而選擇哪個角色進行審批
比如銷售人員在申請一個合同審批時，會根據合同金額的不同，審批人也會有所差異
當金額小于8000時，合同直接由財務專員進行審批，進而讓流程進行快速審批
當金額大于8000時，合同會由銷售主管進行審批，讓銷售主管能夠掌握企業的重要合同
通過發起人選定一個審批事項后，將自主選擇后續的審批內容，進而實現審批的后續選擇。這是一種較為靈活的審批流程，當企業尚未形成標準化流程時，自主的核心就是當發起人發起一個審批，提交時需要自行選擇下一個環節的審批人。而下一個環節的審批人審批通過后，可以選擇繼續流轉到再下一個人去審批，或者結束這個流程
審批的背后，它映射的其實是企業的一條條管理制度，而它的設計一定是要滿足企業的實際需求。因為你負責的產品不是為某一家企業提供的服務（定制化產品），并且企業管理制度的變動其實是家常便飯，你需要去考慮一個通用的解決方案，這個解決方案拆解下來會分為三個內容，分別是：申請表單、流程配置、更多配置 進行講解
審批表單是最為一個“簡單”的用戶可配置化表單，因為現如今大多數B端產品都是以 SaaS 作為基礎（如果是定制化產品 它的審批內容、流程也不會是固定不變的）也就意味著審批表單需要為企業提供“DIY”的方式，通過表單提供不同的字段類型，去構建審批的實際要求
比如在一個選擇請假時，年假、事假、病假、婚假 等的要求都會有所不同
如何知道他們的差別，其實可以根據《勞動法》的相關規定 以及 各個其實的實際公司制度，進行個性化的處理
在申請婚假時，需要上傳你的結婚證，以證明其真實性；在病假時，需要有3甲醫院的病情證明；在年假時，則需要有你的剩余年假天數。而這些特殊訴求，其實都需要在表單當中進行各種定制化表單
當然這只是極為常見的 請假 場景，而在實際業務當中的復雜場景（更多需要將 審批與其他系統關聯）一個簡單的表單是沒有辦法進行滿足
這也是很多企業會發現，無論是飛書、釘釘、企業微信，都沒有辦法滿足其實際流程需求。又沒有辦法改變自身流程，只能夠自研、定制化 產品，這也是為什么即便各行各業都有了初具規模的 SaaS 產品，但是還是會有很多企業愿意自行研發軟件
企業可以根據自身的系統流程，在流程配置當中去定制特定的流程。在這個頁面的設計上，需要注意不同參與人的狀態，以及復雜流程時如何才能夠進行清晰的閱讀，因此增加了 顏色區分（發起人、審批人、抄送人）+ 視圖縮放 功能
顏色自然不必多說，整個系統需要統一，因此不能夠只考慮在管理后臺的顏色，是一定要在詳情頁當中也能過保證顏色的一致。這樣才能夠滿足實際業務所需
視圖縮放只是小小提一下，常見的視圖縮放會放在左側，至于為什么，自己稍稍揣摩揣摩
由于流程配置的屬性頁面會涉及很多表單的復雜邏輯，這個只能夠留在我的 訓練營的課程 當中進行拆解，這里就不過多贅述
更多配置項則是審批在實際情況下的特殊處理，比如：申請人修改審批的具體時間、能夠將審批轉發給其他人、出現多次相同的審批人是否去重 等等... 其實就是將審批的設計方案進行“賦能”，去滿足更多企業在實際場景當中的需求，感興趣的同學可以去 釘釘、飛書 了解詳情
審批，核心還是提高企業運轉效率，如果在審批之間，還需要不同角色私下反復溝通，本質上就失去了審批的意義。而審批本身，就是一個典型的B端產品 從場景到需求，進而研發功能，最后又回歸場景，你設計的好與壞，落地到真實的場景當中，試試便知
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為設計師，日常工作中我們經常要思考如何吸引用戶轉化。如果僅把“界面設計美觀”作為設計的發力點，很難形成完整的判斷鏈條，完成預期的商業目標。因此，在交互行為層面嘗試“破解”用戶行為發生的背后原因，通過科學的方法“設計用戶行為”就變得更加重要。
行為設計領域有三個非常重要的模型：福格行為模型，成癮性模型以及峰終效應。其中福格模型在輔助我們做行為預判的過程中扮演了重要角色。
福格模型是以耶魯大學教師 Fogg，2009 年發表的一篇論文為中心，闡述了任何一個行為的發生，都需要滿足以下三個要素：
任何一個行為的發生，都離不開3要素：動機、能力和觸發器。因此在設計時需要考慮：
人們是否有產生行為的動機、發生行為的能力，以及一個合適的觸發點。
高動機高能力
這類用戶有付費動機且熟悉產品使用流程，屬于高價值用戶，是產品的真愛粉。在后續設計過程中，我們可以收集用戶反饋，并針對問題改善體驗就行。
高動機低能力
這類用戶需要降低門檻，必要時可以提供幫助和引導。提高操作能力，優化用戶體驗。例如一些應用為低能力群體設計“專屬版”，如針對老年人，推出適老版應用，精簡用戶操作步驟，突出核心功能，便于這部分用戶完成產品主流程操作。
低動機高能力
這類用戶需要提高動機，可以結合馬斯洛需求層次理論找出用戶不同階段的需求。分析用戶需求，挖掘用戶痛點，尋找用戶動機。例如“分享領取大額優惠券”、“每日簽到送積分”、“走路得能量”等，我們可以同過激勵來增強用戶動機。
低動機低能力
這類用戶需要適當放棄，投入產出比較低，不屬于我們的目標用戶。
本次將以 “為家人購買保險” 的優化過程為例，分享運用福格模型把行為設計和商業場景聯系在一起。通過設計引導用戶行為進而助力產品轉化。
背景：
用戶在為自己成功投?！搬t療險”后，會為本人再推薦一份其他險種的產品，打造“完善雙重保障”的概念。但某年齡段歲下的用戶因保費過低，在收入來源中屬于ROI較低的群體。
產品目標：
希望該年齡群體在為自己購買完保險后，優先推薦為“家人購買”，因其所獲得的商業價值效益更大。預期通過為家人購買保險，拉動這部分用戶的整體ROI。
設計目標：
引導用戶為“家人購買”一份“醫療險”
用戶已經為自己購買過一單保險的情況下。大部分用戶具有健康保障需求，其本身也有購買保險的動機。在模型中偏向于“高動機”人群，
本次設計的發力點：強化這部分用戶“為家人購買”的動機，降低購買保險的行為成本，同時在適當場景給予用戶觸發提醒。
我們一般通過兩種途徑增強用戶的行為動機：心理刺激和物質刺激。
1.營造稀缺性：通過限時限量等方式營造稀缺性。
2.強化“家庭健康保障”需求。安全需求是人的基本型需求。通過“父母有保障，我更安心”等文案迎合用戶對安全生活的向往。
3.顯示社會認同信息。尋求社會認同是更好一層的心理需求。通過標簽外露承保公司名稱，尋求社會認同，并側面透傳出專業性，建立用戶信任感。
“物超所值”，便會促進行動。在頂部向用戶宣傳為家人買的“產品優勢”，增強付費動機
我們可以通過降低用戶門檻，來提高用戶完成這件事的能力。
1.降低門檻—降低用戶成本（金錢）
1元為父母升級,降低用戶參與成本。
2.降低門檻-降低操作成本—簡化選擇（時間）
根據業務目標，指定最優推薦策略。如本次流程最優推薦策略是為父母購買，去掉可能影響用戶決策的其他選擇項，改為僅顯示最優推薦策略下的唯一指定模塊。
3.降低門檻-降低認知成本—結合圖像（精力）
“ 產品適用群體圖片+文字”的表達，在當前情景下可快速傳遞信息。便于用戶快速理解當前流程是在“為誰購買保險”，從而降低以往用戶將“家人身份信息填寫錯誤”的情況發生。這樣設計減輕了用戶的認知成本，提?了信息傳遞的效率。
1.觸發器“醒目”
膠囊形狀的「提交訂單」按鈕在“方形卡片”上十分醒目，是觸發用戶行動的視覺提醒。
簡潔按鈕文案設計，如“限時升級”，將有助于加速用戶的決策，從而促進轉化。
在日常工作中，可以借助福格行為模型解決商業目標中的引導、轉化、留存等問題。在做設計時，我們首先也需要思考設計目標 ： “我們想要用戶發生什么行為？”
我們可以通過福格模型從“動機、能力、觸發因素”等角度進行設計思考，更加深入的理解用戶行為背后發生的原因和影響用戶決策的因素，幫助我們更好的完成產品優化和體驗升級，最終達到商業目標。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
定量研究指的是對用戶的某些特性進行數字化測量并進行統計研究。對于定量研究來說，數據的統計以及數據的分析是尤為重要的。
首先，需要說明數據修養，與統計技術的水平無關。
數據修養指的是培養科學的、正確的對待數據的態度，在收集、分析和解讀數據的過程中做到求真務實。
良好完善的研究設計是正確進行數據分析的前提，如果沒有科學的設計，良好的數據質量，那么無論用什么方法和軟件都無法獲得真實的結果，統計就變成了“數字游戲”。
從預期的研究結果出發，向前逆推數據分析方法和研究設計
Step1 · 要解決什么問題
Step2 · 期望得到的研究結果
Step3 · 需要的統計分析方法
Step4 · 需要的數據類型
Step5 · 對應的調查方法
Step6 · 研究的設計
在問卷開始前將問卷框架設計做好
線上問卷調查是目前我們所用到最主要的調查形式，進行線上問卷調查時，誤差的主要來源包括抽樣誤差和非抽樣誤差兩類。
抽樣框誤差：抽樣框誤差產生于目標總體與抽樣框的不一致，因抽樣框引起的誤差主要有樣本的代表性問題（如是否能代表網民、是否能代表某類用戶總體等）以及抽樣框重復（用戶重復回答）以及抽樣遺漏（如無法包括競品用戶等）。
解決方案：正確界定網絡調查的適用范圍，網絡調查應主要針對以網民為對象的項目。
無回答誤差：樣本中的部分個體不愿意或是無法完成調查問卷而產生的誤差，原因：
（1）激勵手段不夠，缺乏交流。
（2）技術障礙，如網速不穩，瀏覽器不兼容。
（3）對隱私的顧慮。
解決方案：網絡調查與抽樣技術相結合，進行問卷投放跟蹤（如提醒用戶填寫），或者結合有一定激勵性質的產品運營手段。
計量誤差：計量誤差又稱登記誤差，是指由于各種原因使得調查和計量的結果與真實情況不符而引起的誤差，如，問卷歧義，被調查者對調查內容定義和概念誤解所造成的誤差。
解決方案：科學設計調查問卷，要求調查問卷更易于理解、更加完整、更具有親和力，保證被調查者做出準確而真實的回答。
是指用戶對一種產品或服務進行消費體驗后的感知，與其期望值進行比較后，所產生的的一種心理狀態。
1974年，本田公司就進行了有關客戶對汽車評價的調查，但是當時沒有“顧客滿意”的概念。
1989年，美國密歇根大學商學院質量研究中心的費耐爾博士將計量經濟模型引入顧客滿意度測評建立了費耐爾邏輯模型，得到廣泛的應用。
20世紀90年代后期，CS（顧客滿意度）理論已成為在全球工商界開始盛行的一種新型的企業文化和管理哲學。
與此同時，許多國家（地區）先后對顧客滿意度指數測評的理論、模型和方法開展了全面深入的研究。
對事物的特性變量可以用不同的規則賦值，因此形成了不同測量水平的測量量表?；镜臏y量量表有四種：類別量表、順序量表、等距量表和等比量表。顧客滿意度指數測評中應用的五級李克特量表就屬于其中的順序量表。一般采用的五級態度是：滿意、較滿意、一般、較不滿意和不滿意，相應賦值為5、4、3、2、1。也可為相反的順序，將五級態度在題目開頭給出，然后讓被訪者根據對每個測評指標滿意程度直接在相應的方框上打鉤或者畫圈。
顧客滿意度指數測評體系反映測試對象的質量水平狀況和特征，而每一測評指標的變化對顧客滿意度指數變化的影響程度是有所不同的。反映影響程度的重要尺度是權重，權重的確定與分配是測評指標體系設計中非常關鍵的一個步驟，對于能否客觀、真實的反映顧客滿意度起著至關重要的作用。
即以同級指標集內重要程度最小的指標為基礎，其他指標與之比較，作出是其多少倍的重要程度的判斷，然后逐一分析，得出各指標的權重。
我們將重要程度分為非常重要、重要、比較重要和不重要四個等級，把所要比較的指標配成對，然后一對一地對指標的某一特征進行比較，做出重要程度判斷：
a、當A與B比較時，A非常重要，B不重要，則A=4，B=0；
b、當A與B比較時，A重要，B比較重要，A=3，B=1；
c、當A與B一樣重要，則A與B分別記為2。
是美國著名運籌學家賽迪給出的1~9標度法，它根據各測評指標的相對重要性來確定權重。層次分析法可以通過測評指標兩兩比較，使復雜的無序的定性問題能夠進行量化處理。
主要作用是分析顧客滿意度指數模型中各結構變量之間的關系，分析顧客滿意度指數主要受什么影響，從宏觀上如何進行調控才能更有效提升CSI。具體來講，就是在百分制的計分方式中，因變量變動1分，直接影響到后面結果變量變化的分值。
如圖中所示，產品質量提高1分，將直接影響顧客滿意度提高0.36分，結構變量除了這種直接影響外，還可以再模型中箭頭所指的方向上產生間接的影響。如圖中顧客期望除了對顧客滿意度的直接影響是-0.11外，還通過顧客對質量的感知和顧客對價值的感知對顧客滿意度產生間接影響，間接影響系數的大小可以由所有從顧客期望到顧客滿意度的路徑上的系數乘積的累加和表示，計算方法為：
（-0.41）x0.94x0.26+（-0.41）x0.36+（-0.01）x0.26=-0.25
顧客期望對顧客滿意度的直接影響系數和間接影響系數相加可以得到全部影響系數，即（-0.11）+（-0.25）=-0.36
同理，可以計算出其他結構變量對顧客滿意度的直接影響系數、間接影響系數和全部影響系數。
如果能將競爭對手的指標分值也進行路徑系數分析，那么多企業的戰略決策制定，為推進企業發展將會更具有實際指導意義。
可用于分析顧客特征的類型，例如（1）價值取向型。（2）質量取向型。根據不同顧客的需求和體驗，提升其滿意程度。更有利于精細化運營。
進行顧客滿意度研究，其主要目的，就是要不斷提升顧客的滿意度，從而建立更多的忠誠顧客群，為企業帶來更大的利潤和收益。通過“顧客凈推介值”分析，我們可以進行顧客忠誠度的深入分析、研究，以在這方面能提供更多的數據給企業作為經營的決策參考。
“顧客凈推介值”（NPS:Net Promoter Score）,顧名思義，“顧客凈推介值”指的就是公司現有顧客將公司的產品或服務向其他人推薦的程度如何的測量。這也是預測企業有機增長和區分公司“利潤良性”和“不良利潤”的一種手段。
分析假設：我們可以把企業的利潤分為“不良利潤”和“良性利潤”兩種。
“不良利潤”是以損害客戶關系為代價換來的利潤。如果客戶覺得所受到的待遇不周，則產生的利潤就是不良的。即不良利潤是通過降低客戶體驗的質量來省錢，是向顧客榨取價值而非創造價值。
“良性利潤”則截然不同，如果客戶自愿回頭購買更多產品與服務，而且還建議其他人購買，這樣公司便實現了良性利潤。實際上，滿意的顧客變成了公司營銷部門的一部分，即他們成為了推介型客戶，是公司的最佳營銷員。
例如：
根據本次調查，我們的問題是“您有多大的可能推薦此產品呢？”這個問題作出評價，并把被訪者分成三類，即“推介者”（90分~100分）、“消極滿意者”（60分~90分）和“貶低者”（0分~60分）。用推介者所占百分比減去貶低者所占百分比，就得到顧客凈推介值。
受行為科學家赫茨伯格的雙因素理論的啟發，東京理工大學教授狩野紀昭（Noriaki Kano）和他的同事Fumio Takahashi于1979年10月發表了《質量的保健因素和激勵因素》一文，第一次將滿意與不滿意標準引入質量管理領域，并于1982年日本質量管理大會第12屆年會上宣讀了《魅力質量與必備質量》的研究報告。該論文于1984年1月18日正式發表在日本質量管理學會的雜志《質量》上，標志著狩野模式（Kano model）的確立和魅力質量理論的成熟。
雙因素理論又稱激勵 — 保健理論，是美國的行為科學家弗雷德里克·赫茨伯格提出來的。雙因素理論認為引起人們工作動機的因素主要有兩個：一是保健因素，二是激勵因素。只有激勵因素才能夠給人們帶來滿意感，而保健因素只能消除人們的不滿，但不會帶來滿意感。
第一，不是所有的需要得到滿足就能激勵起人們的積極性，只有那些被稱為激勵因素的需要得到滿足才能調動人們的積極性。
第二，不具備保健因素時將引起強烈的不滿，但具備時并不一定會調動強烈的積極性。
第三，激勵因素是以工作為核心的，主要是在職工進行工作時發生的。
保健因素 - 是指造成員工不滿的因素。保健因素不能得到滿足，則使員工產生不滿情緒、消極怠工，甚至引起罷工等對抗行為；但在保健因素得到一定程度改善以后，無論再如何進行改善的努力往往也很難使員工感到滿意，因此也就難以再由此激發員工的工作積極性，所以就保健因素來說：“不滿意”的對立面應該是“沒有不滿意”。
激勵因素 - 是指能造成員工感到滿意的因素。激勵因素的改善而使員工感到滿意的結果，能夠極大地激發員工工作的熱情，提高勞動生產效率；但激勵因素即使管理層不給予滿意滿足，往往也不會因此使員工感到不滿意，所以就激勵因素來說：“滿意”的對立面應該是“沒有滿意”。
（1）A—魅力質量要素：此質量要素具備時，會讓顧客感到滿意；反之未具備時，顧客也能接受，同時不會感到不滿意。
例如說，海底撈等桌做美甲。
（2）O—一維質量要素：此質量要素具備時，會讓顧客感到滿意，反之未具備時，則會導致顧客不滿意。
例如，火鍋店羊肉越便宜越爽，上網的速度越快越爽。
（3）M—必備質量要素：此質量要素具備時，顧客認為這是應該的，反之未具備時，會導致顧客不滿意。
例如，火鍋店要有牛肉，手機能打電話。
（4）I—無關質量要素：此質量要素無論具備與否，對于顧客，都不會有任何滿意或者不滿意的感覺。
例如，山寨機可以刮胡子。
（5）R—反向質量要素：此質量要素具備時，會導致顧客不滿意，反之不具備時，顧客反而會感到滿意。
1、判斷產品的某一質量特性對于顧客而言，屬于何種質量要素
“顧客就是上帝，但是用戶往往需要的不多，想要的卻太多，為了讓他們更滿意，我們是不是要一一滿足他們？”
2、通過滿意的敏感性分析來篩選顧客滿意度的改進因素
“用戶可能根本不知道他們想要什么，而我們能提供的東西很多，但是資源卻是有限的，應該怎么利用有限的資源來使用戶更加滿意”
Step1，定義質量要素
Step2，構建卡諾問卷
Step3，進行問卷調查
Step4，分析調查結果
Step5，篩選改進因素
列出需要使用卡諾模型問卷進行調查的指標，這些指標可以是滿意度所涉及的系統指標體系中的所有指標，也可以是關注的部分指標。
“官網中xxx方面的信息”
“產品中的xxx功能”
“線下戶外廣告宣傳”
“......”
卡諾問卷的設計思想是從正反兩方面進行提問，以便了解顧客對某一改進因素的看法，然后將這些改進因素區分為“魅力質量要素”、“一維質量要素”、“必備質量要素”、“無關質量要素”和“反向質量要素”.
在卡諾問卷中，每個改進因素都由正向和負向兩個問題構成。正向問題是測量顧客在具有某項因素時的反應；負向問題則是測量顧客不具有該項改進因素時的反應?？ㄖZ問卷中的問題答案采用五種程度選項，他們分別是“我喜歡這樣”、“它必須這樣”、“我無所謂”、“我能夠忍受”、“我討厭這樣”。無論是正向還是負向問題，都是同樣的答案選項。
問卷調查的方法有很多，卡諾問卷并沒有限定必須要什么方法調查，例如，入戶訪問法、攔截訪問法、傳統訪問法、計算機輔助等等。
在獲得了每個改進因素的卡諾需求分類數據之后，分析調查結果，分析調查結果的目的是為了了解每個改進因素的顧客需求分類狀況。需求分類最簡單有效的方式是計算每個改進因素在不同需求類型中出現的頻率。
將顧客對某項改進因素的正向和負向問題的答案填入卡諾評價表，就可以得到顧客此項因素的需求分類：
如果顧客對正向問題的回答是“我喜歡這樣”，對負向問題的回答是“我討厭這樣”，那么在卡諾評價表中，這項改進因素就被分類為“O”，即“一維質量要素”。
如果顧客對某項因素正負向問題的回答結合后，分類是M、A、I或者R，那么該因素就被分別分類為“必備質量要素”、“魅力質量要素”、“無關質量要素”或者“反向質量要素”
另外，卡諾評價表中的分類“Q”，是指有疑問的（questionable）結果，顧客的回答一般不會進入到這個類別，除非這個問題的問法不合理，或者是顧客沒有很好的理解這個問題，或者是顧客在填寫問卷時出現錯誤。
對改進因素的顧客需求進行分類，還不能完全說準確的說明這些因素的改進次序，因此，還需要通過滿意的敏感性分析來篩選改進因素。
滿意敏感性分析是指通過對各種改進因素的滿意影響力和不滿意影響力的分析，來判斷顧客對這些因素滿意水平變化的敏感程度，其目的是確定改進哪些因素會更有利于提升顧客滿意度。
滿意敏感性分析是通過滿意影響力（SI）和不滿意影響力（DSI）兩個方面來測量的，他們的測量公式如下：
滿意影響力（SI）
滿意影響力SI是以魅力質量要素A與一維質量要素O的頻率之和為分子，以魅力質量要素A、一維質量要素O、必備質量要素M、無關質量要素I的評率之和為分母計算得到的，滿意影響力的大小顯示，如果某項因素得到改進，顧客滿意強度會有多大的提升。
不滿意影響力（DSI）
不滿意影響力DSI是以一維質量要素O與必備質量要素M的頻率之和為分子，以魅力質量要素A、一維質量要素O、必備質量要素M、無關質量要素I之和為分母，并乘以（-1）計算得到的，不滿意影響力的大小顯示，如果某項因素未滿足顧客的需求，會對顧客滿意的降低產生多大的影響。
將各因素以SI值為橫坐標、DSI值為縱坐標納入改進滿意因素敏感性比較矩陣中，同時以左上原點為圓點，用半徑為0.707的四分之一圓弧將不同的改進因素進行分割，如下圖：
在因素選擇線右側的因素就是需要實施改進的因素，并且離圓心越遠的因素，顧客的滿意敏感性越大。從圖中可以看出，A和D因素暫時不需要改進，需要改進的因素為B、C、E和F方面，按照重點次序排列為F、E、B、C。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
