圖表作為一個使用頻率不高卻很重要的組件，讓設計者們操碎了心?？粗约涸O計的圖表，總覺得有哪里不好，但又說不上來。本文作者總結了快速提升B端圖表用戶體驗的15小細節，一起來看一下吧。

B端界面中使用頻率不高，但卻無比重要的組件——圖表，可謂是讓設計者們煩透了心。圖表設計起來不難，但想要設計好，也是需要下一番功夫的。

很多小伙伴問我，說：每次在設計圖表的時候，總是找不出自己哪里設計的不好，但看著自己設計的圖表，又沒有那么滿意，該如何辦呢？今天，我們就來一起了解下B端的圖表，挖掘一些設計者們平時未曾捕捉到的細節，獲得這些細節，將從細微之處提升產品的用戶體驗。

本文將從以下五個部分來展開：

1. 什么是圖表
2. 圖表的優勢
3. 開源圖表庫有哪些
4. 15個圖表小細節
5. 總結

一、什么是圖表

百度百科解釋：“圖表，Microsoft Office用語，泛指在屏幕中顯示的，可直觀展示統計信息屬性（時間性，數量性等），對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀，形象的‘可視化’的手段?！?

根據百度百科的解釋，我們來做一個”數據圖表化“的小推導。我從網站找了一段描述低碼的數據（數據來源艾瑞咨詢，并做了一些小修改），如下：

“2016年開始低代碼概念開始從國內逐漸興起，當年低代碼相關產品投融資事件達10起，億元以上融資數量2起，至2020年中國低代碼市場共有59起投融資事件，其中億元以上融資共有13起。2017年融資事件11起，億元以上融資3起；2018年融資事件12起，億元以上融資2起；2019年融資事件12起，億元以上融資3起；2020年融資事件14起，億元以上融資3起。隨著企業對系統敏捷性、易用性需求的增加和對業務部門低代碼接受度的提升，市場會迎來新的發展契機，短期內投融資熱度將持續增長?！?

雖然以上的文字已經做了一些簡練，但閱讀時候不免覺得有些繞，不能很直觀的理解數據，且要記住關鍵數據還是較為困難的。

下面，我們對以上文字進行再次梳理，適當分段，進行結構化排版：

“2016年開始低代碼概念開始從國內逐漸興起，當年低代碼相關產品投融資事件達10起，億元以上融資數量2起。

至2020年中國低代碼市場共有59起投融資事件，其中億元以上融資共有13起。

2017年融資事件11起，億元以上融資3起；

2018年融資事件12起，億元以上融資2起；

2019年融資事件12起，億元以上融資3起；

2020年融資事件14起，億元以上融資3起。

隨著企業對系統敏捷性、易用性需求的增加和對業務部門低代碼接受度的提升，市場會迎來新的發展契機，短期內投融資熱度將持續增長?！?

通過分段描述，以上段落顯得清楚了很多，但是例如”融資事件、億元以上融資“等詞語還是反復出現，整體來說不夠簡練。

那么，我們再將以上數據進行表格化展示來看看，如下：

我們可以發現，表格的展現形式比分段的結構化文本又清晰了太多，使得數據展示非常直觀。不僅用戶可以看清楚數據本身，還可以對比數據，假如表格再設計的人性化一些，可以將最大值進行重點標注（根據業務需要對數據進行差異化標注）。

不過表格也有劣勢，無法展現數據隨時間變化的趨勢等問題。我們再次仔細閱讀上述數據，可以梳理出如下圖表。

上圖將2016年到2020年的融資事件總數進行了重點處理，億元以上融資事件數量進行了次要處理。并且用柱狀圖疊加折線圖的圖表表達了2016年到2020年低碼融資事件數量的趨勢情況。

二、圖表的優勢

綜上所述我們可以發現，從通常意義上來說，圖表優于表格，表格優于結構化文本，結構化文本優于普通段落。那我們來看看圖表有哪些優勢。

1. 針對性

一圖一類型是圖表的特點，例如柱狀圖是用來比較同一指標下不同對象情況的圖表；餅圖是展現部分與部分之間，及部分與整體之間占比的情況。我們在使用圖表時，需要先對數據進行判斷，再選擇合適的圖表進行展現。

2. 直觀性

圖表與文字相比，在數據的表現上非常直觀。不僅可以讓用戶一目了然地看到數據，還能讓用戶將數據進行對比，從而發現問題，定位原因，解決問題。

3. 混合與拓展性

根據數據的屬性，圖表是可以進行混搭與拓展使用的?；齑钍侵笀D表和圖表可以拼搭使用，例如折線圖與柱狀圖經常合體使用。拓展性是指根據基礎圖表可以拓展出一系列個性化圖標。例如堆疊柱狀圖是由基礎柱狀圖衍生出來的。

三、開源圖表庫

目前開源的圖標庫以下幾種：

1. AntV G2

在AntV的官網上，是這么描述G2的：“一套面向常規統計圖表，以數據驅動的高交互可視化圖形語法，具有高度的易用性和擴展性。使用 G2，你可以無需關注圖表各種繁瑣的實現細節，一條語句即可使用 Canvas 或 SVG 構建出各種各樣的可交互的統計圖表?！?

2. ECharts

百度百科：“ECharts是一款基于JavaScript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。ECharts最初由百度團隊開源，并于2018年初捐贈給Apache基金會，成為ASF孵化級項目?！?

3. High Charts

百度百科：“Highcharts 是一個用純JavaScript編寫的一個圖表庫，能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網站和非商業用途使用。HighCharts支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。”

4. Chart.js

Chart.js是一個面向設計人員和開發人員的簡單而靈活的 JavaScript 圖表。以下是Chart.js的文檔鏈接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一個面向設計人員和開發人員的簡單的響應式圖表，是前端圖表生成器。

目前來說B端產品使用最廣泛的圖標庫是AntV G2和ECharts。

四、15個圖表小細節

在大致了解了圖表以后，筆者總結了基于自身經驗、團隊經驗與行業經驗的圖表小技巧。希望這些小技巧能潤物細無聲地影響我們的設計者，從而為B端提升一點小體驗。

1. 折線圖2px

通常在B端中，我們用到線，以1px居多。但在折線圖中，我們經過反復推敲，發現2px線優于1px線。首先，2px線條顯得有力而清晰；其次，在線條多的時候，便于分辨。

2. 柱狀圖間距

柱狀圖中柱子與柱子之間的間距與柱子的寬度一致就好，且最左邊和最右邊柱子距離兩邊的間距為柱子的一半。如下圖所示，若柱子的寬度為X，則柱子與柱子間的間距為X，兩邊柱子距離各自向外間距為X/2。

3. 刻度值

圖表上的刻度值遞增數值根據實際情況需要做適當約束，如最大數值為150，就不適合刻度值上線標記為1000。其次，若業務數據一直處于動態變化中，則圖表Y軸可以設置成動態。

4. 餅圖文字顯示

在餅圖分類較少時候，可以將文字寫在餅圖上，但當分類較多時候，文字適合寫在餅圖外。

5. 餅圖塊排列

餅圖塊排列也是個值得考究的事情，通常來說，餅圖塊呈順時針方向旋轉，且以12點鐘方向為起點，塊面從大到小布局，若有“其他”模塊，則放置在最后。

6. 標簽位置

通常標簽都會放在圖表的上方區域，但這并不是一成不變的規則，例如當折線圖線較多的時候，可以考慮將標簽直接跟在折線的尾部。同時可以做一些交互效果，鼠標點擊標簽可以讓線弱化或者顯示。

7. 圖表色彩

圖表在配色上要使用區分度大的顏色，不要為了好看而使用相鄰的色彩，這會導致圖表的可讀性大大降低。如有條件，建議在色彩上考慮無障礙視覺。

8. 同類色使用

屬于同一色相，不同明度和飽和度的顏色，也是有使用空間的，通常表示同一對象的梯度變化。

9. 顯示重點

當圖表上數據及其多，且產品團隊壓根沒打算將數據量減少時，我們可以考慮展示重點數據（系統默認展示推薦重點，用戶可以自己選擇他所需的重點），弱化其他數據。

10. 標題的妙用

標題不僅僅是用來呈現普通描述的，在特殊場景下，標題描述可以稍微進行變化，從而達到直觀表述圖表核心含義的目標。

11. 時間周期太長

某些業務的數據統計需要跨很長的時間周期，這時，圖表無法滿足如此長周期的時間展示需求，我們不要慌，可以通過以下幾種方式去解決。

11.1 添加縮略滑塊

給圖表添加縮略滑塊，可以通過拖拽滑塊了查看某段時間范圍的數據?；瑝K拉拽的越大，可以看到的時間范圍越大，但注意，會有極限值。

11.2 添加滑動滑塊

給圖表添加滑動滑塊，可以通過滑動一個固定大小的滑塊，查看某短時間范圍的數據。它與縮略滑塊的區別在于，滑動滑塊每次看到的時間段是一致的。

11.3 區塊放大鏡

如果圖表的呈現就是希望時間周期顯示完整，那么當時間周期較長的時候，顆粒度可以展示的稍微粗一些，不用太細，例如無需2月1日、2月2日、2月3日、2月4日、…連續展示，只要2月1日、3月1日、4月1日、5月1日、…間隔展示即可。在交互上，鼠標移入圖表區不斷進行某時間周期數據框選（即放大），就可以讓框選區數據不斷清晰。日K線常用此類方法去做。

12. 時間軸顯示

當時間軸日期跨越在當年時，無需每個時間點都帶上年份；而當跨年時，可以帶上年份，這樣可以保證時間軸顯示更簡單，不擁擠。

13. 等寬字體

若圖表中會采用表格去協助查看某類數據的明細，聯動展示，那么表格中的字體建議使用等寬字體，等寬字體方便用戶用視覺來比較大小。

14. 數據歸類

指標大盤上放置著各類型圖表數據，建議設計者們對數據的進行歸類整理，屬于一類的數據臨近展示，方便用戶連續性查看相關數據。

15. 靜態與動態圖表

圖表分為靜態和動態圖表，當業務呈現較為簡單時，使用靜態圖表就好。而當業務復雜，一張圖表難以表達細節時，就要考慮動態圖表去呈現了，“鼠標交互，數據擴展和下鉆”是動態圖表的特征。

五 、總結

圖表的小細節遠遠不止文中提到的這15種，還有好多好多。由于每時每刻都有設計者因為產品需求創造出新的好用的圖表類型，圖表成為了B端可持續探索的一片海洋。

2021年6月5日~6日，人人都是產品經理舉辦的【2021中國B端產品經理大會·上海站】完美落幕。攜程旅游搜索產品負責人@毛新年 進行了精彩的內容分享，他分享的主題是《聚焦B端產品價值——B端產品的落地實踐指南》。

一、B端產品核心價值解析

他首先將B端產品主要分為企業自身業務對應的B端產品和互聯網業務對應的B端產品。

企業自身業務對應的B端產品服務于企業自己，產品形態多為ERP、CRM等，產品提供者是IBM、用友或者企業自研等；

互聯網業務對應的B端產品服務對象是B端商家形成的商家生態，產品形態如阿里/美團商家系統等，產品提供者則是阿里/美團等互聯網平臺。

企業是市場競爭的主體，B端產品核心目標是為企業降本增效。

二、從企業管理到業務執行，B端產品的價值體現

那么B端產品如何實現助力企業成本降低呢？

針對B端企業工作的重復、繁雜、專業特點，B端產品在產品設計上遵循以下四個邏輯可為降低企業成本發揮自己的價值：

• 人機替代：需要人做的工作盡量少，對應產品功能就要求工作盡量能夠自動化，實現人機替代；
• 智能化：如果工作確實不能系統替代，那么應該使系統盡量降低對人專業知識的依賴，對應產品功能要求系統高度智能化，小白也能做；
• 自主學習：對于小白不會的工作，系統應提供在線指導和交互學習，對應的產品功能要求系統提供便捷自助學習的能力，小白非常方便自我學習來完成工作；
• 無障礙：當有疑似錯誤操作時，系統能智能提示并容錯，對應的產品功能為自檢&容錯

除了降低成本之外，B端產品還能在提升企業效益方面做出自己的貢獻，針對B端業務管理對象多，業務蘊含的價值大的特點，在產品設計遵循如下這三個邏輯，可以充分挖掘大數據價值，提升效益：

• 規范化：將語義相同的各種說法規范為統一說法，有助于大數據的統計、歸一、計算的一致性，有助于挖掘出業務內涵價值，這要求建立業務規范知識庫；
• 標準化：B端企業在標準化業務上往往得心應手，將非標業務標準化，給平臺和商家提供增量業務空間，這就要求B端產品提供業務標準化能力，這要求建立業務標準知識庫；
• 平臺化：將工作成果平臺化共享，平臺化一方面減少商家工作量，另一方面提升了數據準確性，提升平臺和商家經營績效，這就要求建立業務規格知識庫。

接下來用典型案例來展示上述產品邏輯如何在實踐中落地。

以電商平臺商品發布業務為例，店小二發布一款商品要經歷以下步驟，每個步驟的難度不一樣。

首先要選擇商品所屬目錄，接著要填寫商品屬性規格，這是工作難度最大的，也是工作量最大的。還有填寫物流信息、填寫服務信息、上傳商品主圖、上傳商品詳情圖等一系列操作。

這是前端的業務流程，而從產品的角度，可以分成六大模塊。

• 目錄選擇步驟對應的產品后臺能力為目錄智能預測。
• 屬性填寫需要產品后臺規范知識庫、標準知識庫、產品信息庫，實現各類屬性的填寫。
• 物流填寫對應的是地址智能提示，畢竟人不能記住國家地理區劃，這就需要物流地址的智能提示功能。
• 服務填寫對應的是標準服務項目庫。以前服務不是標準化的，但是作為平臺來說需要將服務項目標準化。
• 主圖和詳情的上傳對應的是圖片智能檢測，看看圖片是否符合國家的合規規范和電商平臺的管理規范。
• 后端大數據智能化和各類知識庫支撐商品發布業務的準確、快速、低成本的B端商家訴求。

從商品發布來看如何實現降本增效？

1）重復繁雜工作自動化

每天的商品上新，營銷活動都需要大量修圖摳圖工作，電商平臺和商家每年耗費大量美工投入到圖片制作。

2017年阿里雙11多達4億張圖片，如果靠設計師人工去設計制作，即使是業務熟練的設計師，也需要100位設計師不眠不休工作300年。所以要用人機替代的方式，利用系統來完成上述重復繁雜的工作。這種通過深度學習海量素材，自動生成各種圖片，不僅大大減少了人的工作量，而且系統設計的圖片點擊率增長一倍多，除了電商平臺自己使用外，還直接提供給商家使用，這樣大大降低了商家小二的工作量，為商家節約了大量人工成本。另外，平臺每天需要審核的圖片也有很多，通過系統自動檢測圖片是否涉黃涉敏、圖文不符、違反廣告法，違反電商平臺的運營規范等，大大減少人審核工作量，也為商家降低了大量用人需求，節約了不少成本。

2）專業工作智能化和便捷自主學習

B端產品對商家小二專業知識要求高，商家的用人成本高。

比如在類目選擇環節，需要小二熟悉平臺類目體系。

在屬性填寫環節，需要小二熟悉商品知識。

在圖片制作環節，需要小二熟悉國家電商法律法規以及平臺運營規范。

所以，就需要將專業知識內嵌的產品系統，減少對商家小二知識的依賴，這些要求在產品能力上通過智能化技術進行支撐。

有了智能化支持，在發布商品的時候，小二只需要填寫商品標題或者幾個關鍵詞，系統就會提醒你它可能屬于什么類目，讓你去做選擇。

屬性的填寫也是如此，系統將可能的屬性值羅列出來，讓你做選擇就行。

這樣即使不是一個資深的采購也能明白，將難度降低到中級甚至初級。

如果有些小二對于平臺規則不熟悉，系統會在頁面給出指引或者視頻圖文在線交互學習，引導小二正確操作。

比如小二不知道生產許可證編號是什么，系統會給出相關提示和案例，小二看到案例就會一目了然。為什么電商平臺要做到如此細致，因為商家太多了，比如阿里、拼多多、美團等平臺的商家數量高達千萬，不可能商家有疑問就找平臺客服。通過便捷式學習自助式解決，只要中初級人員就可以完成工作，降低了商家的用人成本，同時也減少了平臺客服的用工人數，降低了電商平臺企業的成本。

3）系統自檢和容錯

在智能化或在線學習前提下，小二仍舊可能發生錯誤操作，或者利益驅使下故意犯錯，或者系統知識不完備，有時候商家是正確操作，但是系統認為是錯誤的。在這樣的情況下，系統要具備實時自檢能力，根據事先內嵌的專業知識，實時校驗并提示商家實時糾錯。如果商家堅持，系統具備容錯能力，業務依舊可以進入后續環節，而不是在線等待。

比如在填寫冰箱的體積時，系統會內設一個最大最小的體積范圍，但是商家的冰箱超出了最大體積，在商家小二進行屬性填寫的時候，系統會根據內嵌的物流體積范圍，校驗小二填寫的體積，超過范圍實時提示商家糾正，如果商家堅持，還可以繼續填寫，但是系統會記錄這個異常數據，平臺客服會與商家小二進行確認，最后更新內嵌知識。

小結：

人口紅利消失，增量業務拓展難度加大的時代背景下，降成本也是提升企業競爭力的有效手段。針對B端業務的重復、繁雜、專業的業務特點，我們B端產品經理應該將B端系統設計成足夠自動化、智能化實現人機替代，并設計友好無縫的交互學習素材實現低專業知識依賴，幫助企業實現降成本的目標。

4）規范化

每個商家對商品的理解可能不同的，所以說法可能就不一樣。比如同一罐奶粉，它適用于一到三歲的孩子，也可以寫作12到36個月。相同含義項目多且雜，商家不知道該選誰、用哪種說法，因此大數據也無法歸一統計，精準分析。這就要求知識盡量規范化，將含義相同表述不同的業務知識規范化，形成業務規范知識庫。

規范化提煉后，盡量讓商家小二選擇屬性值，減少自由填寫錯誤。大數據根據規范之后的知識進行統計分析，提供給商家的數據更精準，這樣對于商家決策來說幫助更大。

而這些知識是從哪里來的呢？從商品說明書，客服、評價、調研中采集而來，屬性值通過歷史數據和商家小二的在線提報補充到知識庫，內嵌于系統中。

5）標準化

隨著電商發展，各種非標商品急需在線上獲得商業機會，同時消費者對服務的要求越來越高，所以，將非標商品或服務標準化，擴大商家的商業機會，同時有助于提供統一的交互語言和商品定價。其中包括服務的標準化，比如保險、物流、售后等，能夠提供這些服務的商家會獲得更多的流量和更高的轉化，也會倒逼其他商家進行服務升級。

將非標商品標準化，例如生鮮水果，通過建立標準，提供統一定價依據，有助于優質商品實現優質優價，同時避免商家描述不一致帶來的客訴。

6）平臺化

平臺上有大量商家做完全相同的工作，那么能否在商家間共享工作結果，節約社會資源，例如有上百個商家賣同樣的蘋果手機，這些商家發布商品都需要填寫商品的參數信息（多達上百項），將這些相同的工作進行平臺化后能讓所有商家共享。

將商品的描述分為產品信息和銷售信息，其中產品信息是相同的，所有商家共享；銷售信息每個商家都不一樣，自己做維護。

建立這樣一個產品信息庫之后，商家只要在發布商品時檢索產品信息，其他信息全部由產品信息庫提供，無需商家輸入，數據一致性有了保障。

例如手機只需要填寫品牌、系列、顏色、內存，其他公共信息可被自動調出來供所有商家使用。

包括快消品，以濕紙巾為例，只要檢索品牌、序列、規格，就能其他信息調出來。非標品的服飾也可以這么做，提供品牌和貨號就可以調出其他信息。

小結：

馬老師曾經說過：“數據就是互聯網時代的石油”，挖掘業務蘊含的數據價值，可以為企業提升經營效益，在B端產品系統中，通過規范化、標準化和平臺化可以提升數據的準確性和一致性，有利于發揮大數據價值。

三、B端產品實施落地的難點剖析

B端產品在實施落地中主要存在兩大難點。

1. 企業內組織問題

很多時候，老板說要做一項工作，產品經理可以給出方案，推動研發并實施上線，但是產品上線后缺乏運營，最終導致產品難以達到預期成效。這主要企業內分工不清晰，有產品無運營，有系統無人背負運營或者經營指標考核，要求產品經理推動無運營無考核不立項進行產品設計，規劃，更別說研發了。

B端產品想要降本增效，但是很多人擔心會因此丟了工作。所以，他們有所顧慮讓降本增效難以推進。因此，在存量業務中找增量業務，把部分員工分流到新業務中去。例如，針對電商業務，我們可以不僅僅只做零售，還可以做批發；不單單做線上，還可以做線下，這樣對員工的技能也是很大的提升。

2. 企業間協作問題

現在企業合并或并購已經非常常見了，弱勢企業B端系統往往被要求對齊到強勢企業，改造過程困難也比較大。

尤其是文化習慣制度方面的差異，這些差異往往也體現在B端產品上。

所以，在企業文化融合方面要建立溝通共識。文化習慣制度靈活把握尺度，非原則問題的差異，可以求同存異，逐步對齊，原則問題需要一步對齊。

除了文化方面，在業務方面，不同公司也不一樣，有成熟的業務也有新業務。這種情形最好是互補，而不是一味用強勢企業取代被并購/合并方，否則不僅可能造成人員的大幅動蕩，而且可能將被收購企業的成熟業務破壞掉。例如某線上的電商平臺，并購了線下的企業，在進行商品融合的時候，給原來線下的企業新增一個線上的渠道。

以賣葡萄酒為例，線下門店是按照國家產區進行分類，比如法國、意大利、澳大利亞；而線上是按葡萄酒類型分類的，比如起泡酒、干紅等。

為什么會出現這樣的差異呢？因為電商起初的進口酒業務是商家C模式，傭金扣點都是相同的，但是線下門店是自營模式經營，來自不同國家進口葡萄酒關稅不同，因此分類體系也不同。

在融合方案的時候，不能只是簡單將線下知識廢棄掉，而是合理地吸收。

因此融合之后，線上的商品主數據多了類別和產地，線下的商品也可以在線上進行銷售。

小結：

B端產品核心價值為企業降本增效。B產品經理是企業降本增效的“引擎”，主導系統架構設計，能否按照降本增效背后本質的產品邏輯，設計出具備人機替代、智能化、規范化、標準化和平臺化系統功能決定降本增效能否實現。同時在業務流程中，我們需要設計好交互學習環節來降低工作人員的專業知識的學習成本，同時建立糾錯容錯能力確保業務順利快速展開。

針對B端產品落地實施難點，產品經理除了需要提升自身專業能力外，也需要關注企業內的組織問題和企業間的協作問題，前者主要通過明確職責分工和尋找增量業務來化解，后者需要掌握融合的原則和抓住業務差異背后的本質原因，對癥下藥。這背后需要我們產品經理具有深刻的業務洞察力，可以說思考力深度決定了產品經理職業天花板的高度。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：人人都是產品經理  作者：人人都是產品經理

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

超級秒殺日是秒殺頻道衍生出來的大促營銷活動，在大促期間扮演著重要的角色。雖然秒殺的商品及價格由業務側主導，但設計師仍可以通過方法論的應用去提升會場的轉化效果。本篇將會介紹如何將 fogg（福格） 模型運用到秒殺會場的設計中。

什么是秒殺？

1. 秒殺的特點

秒殺就是在限定時間內，通過發布一些超低價格的商品，吸引買家搶購的一種銷售方式。因此秒殺具有兩個核心特點，一個是限時降價，一個是限量搶購。

現階段，秒殺作為一種營銷工具，已被各大電商平臺廣泛使用。利用秒殺的特點，平臺可實現用戶活躍、粘性提升、銷售增長等目標。

2. 超級秒殺日的定位

超級秒殺日是京東秒殺頻道推出的營銷活動，旨在輔助平臺銷售的增長，同時提升頻道的知名度，帶來日常流量的增長。在促銷期間，會場承擔著流量分發、單品銷售、商業合作的作用。

FOGG（福格） 模型簡介

Fogg 模型的核心理論比較好理解——想要用戶完成轉化，需要滿足三個條件：

• 用戶有足夠的動機
• 用戶有能力完成轉化
• 有觸發用戶轉化的因素

如下圖所示，當用戶有高動機，并且有較強的能力完成某件事時，很容易成功觸發轉化行為，反之則容易觸發失敗。

FOGG （福格）模型在秒殺會場中的應用

在實際項目中，需要結合具體的場景，綜合考慮三個要素的對應關系，進行針對性的設計。

1. 動機層

動機分層

根據大促的用研報告，將會場用戶的動機分為 3 層：強目的性，弱目的性和無目的性。其中，弱目的性的用戶占大多數，表明用戶的轉化還有很大的提升空間。

因此在會場的整體動線設計上，會對不同動機的用戶進行針對性的內容設置，著重提高會場的可逛性，通過多維度營銷矩陣刺激這部分用戶的消費需求。

動機增強

除了依靠動線去匹配不同的用戶，實現用戶動機的增強外，還可以采用氛圍營造的方法，快速感染用戶的心智，激發用戶的潛在需求。這部分通常通過視覺設計進行表現，例如秒殺會場，會通過鬧鐘元素及鮮亮的顏色，去提示用戶商品是限時的，需要馬上搶購。

2. 能力層

降低價格門檻

降低價格門檻的目的是為了匹配用戶的購買能力。限時降價是秒殺業務的核心特點，在會場中不僅要明確告知用戶商品的價格，還應突出價格優惠的力度，在強調秒殺屬性的同時實現用戶的快速轉化。價格優惠可通過多種形式表現。

減少決策成本

會場中存在過多冗雜的信息會干擾用戶的判斷，導致用戶流失。因此，要減少用戶的決策成本，讓用戶不經過大腦思考便下了決定。例如，可在會場中增加推薦模塊，根據用戶的行為進行實時推薦，實現商品的精準打擊。

3. 觸發器

觸發即是在恰當的時間告知用戶，現在可以去做了。因此觸發器的本質是將目標用戶與目標行為進行連接。在秒殺會場中，觸發通常以消息推送，文案提醒，利益刺激等形式呈現。

在預熱期設置提醒功能，并將優惠券或券包的使用時間定在高潮期，能有效地提升用戶回訪，完成購買。

在樓層和彈窗內設置互動任務，完成后給予獎勵，可以提高樓層的點擊率，而獲得的紅包將進一步刺激轉化。

小結

秒殺會場并不僅僅承載著銷售轉化的功能，因此會場的內容及設計，需要綜合考慮業務目標及業務規劃。FOGG 模型雖然從理論上來看比較容易理解，但實際的應用情況也是靈活多變的。運用 FOGG 模型，可以讓你的設計思路更加清晰，在一些細節上也能更加出彩，只需要加深對它的理解，就能在各種變動中抓住用戶轉化的關鍵點，確保會場的轉化效果不受影響。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設  作者：JellyDesign

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

體驗度量是什么？

簡單來說，用戶體驗度量是通過一套測量體系量化用戶體驗的過程。

盡管體驗很難被科學客觀地分析，但將度量這種手段運用于體驗的管理是非常有必要的。引用管理學大師彼得?德魯克的一句話：If you can’t measure it, you can’t improve it（如果你無法度量它，你就無法改進它）。我們相信更好地衡量體驗設計的價值，可以幫助我們更好地實現產品價值、用戶價值、商業價值，甚至是社會價值。

為什么要做體驗度量？

下面我們再來分析一下做好體驗度量能幫我們解決哪些難題，首先從我們遇到的幾個問題出發。

概念過于抽象主觀：設計師們提出的體驗優化方案被認為過于主觀，難以得到直接證據支持，各部門很難達成共識，方案難以推進落地。怎么辦？

影響因素復雜多元：現有的 NPS 滿意度調研反映了每個季度的商家整體滿意度，但是團隊面對 NPS 結果無法直接定位問題，難以進行有效的診斷和提升。怎么辦？

問題難以閉環管理：現有的 VoB 系統能夠收集到一定數量的商家反饋問題，但是這些零散的應急需求很難被高效地納入體驗優化項目。怎么辦？

相信大家或多或少遇到過類似的問題，雖然大家有著“以用戶為中心”提升“用戶滿意度”的共同目標，但在過程中具體該怎么做，仍然是抽象模糊的。體驗度量恰恰是解決這些問題的關鍵策略，我們希望通過體驗度量幫助京麥達成以下目標做出更好的設計，創造更大的價值。

目標一：讓商家體驗從“抽象”到“具象”，從“玄學”到“科學”，定義一套被各部門認可的衡量標準；

目標二：與商家建立更加直接的聯系，從商家角度直接洞察需求，更有針對性地定位優化問題；

目標三：更好地實現體驗設計價值及體驗設計體系化，與各部門建立合作關系，長期監測跟進優化。

怎么做體驗度量？

體驗度量一般可以分為五個步驟：拆指標、采數據、做診斷、再優化、續監測。

在京麥一期度量中，我們主要完成了前三個步驟，后期我們會嘗試推進后兩個步驟，同時也將繼續完善現有的度量模型和調研方式。

1. 拆指標

首先我們要明確這個產品的用戶體驗由哪幾部分構成，就比如評價一個人的英語水平如何，我們可以從聽、說、讀、寫這四方面進行評價。

通過比對分析業界相對成熟的指標模型，我們發現各個模型有不同的切入點，比如 PULSE 模型以網頁產品商業化為導向，HEART 模型以用戶為核心，PTECH 模型更適合企業級產品，UES 模型更適合技術產品等。涵蓋的維度多種多樣，有的維度是產品相關指標，比如留存率、日活用戶數、轉化率，有的維度是用戶側反饋，如 NPS 凈推薦值、滿意度。

深入分析這些維度，我們發現幾乎所有指標都可以被分為系統表現、用戶行為、用戶感受這三類。

有了前面提到的三大目標和參考指標，我們開始分析京麥移動端的現有情況。

由于京麥在現在這個階段已經有了相對穩定的產品形態，市場上也有了同類型的產品。因此，我們首先把完整性作為反映產品系統表現的重要維度，也就是商家需要的、別人家都有的，京麥“有沒有”？

第二項維度是參與度，店長是否會通過移動端來經營管理店鋪呢？客服是否會通過移動端來答復客戶呢？也就是各類角色“用不用”。

而作為一款 B 端產品，它的使用效率和易用性是至關重要的，我們要關注用戶的行為，也就是商家們是否能“又快又好地使用”。

最后一項指標是滿意度，它代表了用戶的主觀整體感受，這也是所有指標中涵蓋面最廣的一項?？偟膩碚f，商家們是否認為這個產品“令人滿意”？

TIPS：體驗度量具有非常強的業務屬性，不同的業務類型、業務階段、業務規模、資源情況都會有與之相配的不同的合適的度量方式，適合自己的指標才是好指標。

2. 采數據

有了度量指標之后，我們需要通過從不同渠道去收集盡量全面的數據。還是拿英語舉例，我們該如何去給聽、說、讀、寫這四部分打分呢？可以通過聽力、口語、閱讀、寫作的統一考試打分，可以讓老師根據平時上課的表現打分，也可以讓同學互相評價打分。

那么度量的數據也可以有多種來源，比如通過用戶訪談得到用戶主觀使用感受（定性數據），通過問卷調研得到滿意度或是易用性評分（定量數據），通過后臺數據得到用戶的行為數據（定量數據）。

基于移動端京麥現在所處的發展階段階段，我們重新明確了我們的調研目標：

• 清晰與競品差距與機會點；
• 關注核心模塊的使用體驗；
• 了解用戶的主觀感受。

因此，我們在這個階段實施了用戶訪談、問卷調研和競品分析三種不同的調研活動，收集了大量的定性數據及定量數據。

競品功能完整性對比分析

調研目的

通過分析對比現在行業內同類產品的功能，計算京麥功能的完整性得分。以千牛、拼多多、京麥三個平臺六個端為分析對象，測試各一級、二級、三級功能的支持情況。

調研方法

確認競品后，通過使用各家產品的具體功能，拆分一級、二級、三級或更細節的功能，填寫完整性分析表；

計算完整性得分（京麥具體計算以二級功能為標準，分為六個不同等級，分別對應六個分數）。

TIPS：可以通過與產品同學的溝通，共同完成各級功能模塊及相應支持程度的定義；后期可以納入客觀數據指標，結合用戶的參與情況、平臺滿意度計算權重，重新定義重要程度、支持程度；以一個季度為統計周期，及時跟進新上線功能。

線上用戶訪談

調研目的

與用戶直接對話，較為直接、細致地了解不同角色用戶如何使用各功能，以及在使用過程中經常遇到的問題，了解他們的使用習慣和實際需求。獲得用戶畫像、用戶使用感受、用戶問題反饋等定性數據。

調研方法

用戶招募：提前 1 周設計招募問卷，并在 QQ 商家群投放、回收，篩選目標用戶，提前打電話確認訪談意向；

前期溝通：添加商家的微信，了解商家的基本信息，預約商家參與時間，并要求商家提前在手機/電腦上安裝騰訊會議；

訪談大綱：根據具體想要了解的功能模塊、用戶群體等，撰寫訪談大綱，包括開場白、基本信息、具體問題、觀察操作提問、延展問題、結束語等；

實施訪談：提前預約會議室，打印訪談記錄表。需要至少一位主持人、一位觀察記錄員，訪談時長控制在 30-45 分鐘左右；

訪談結果梳理：每場訪談結束，參與者進行快速回顧總結，截取錄屏中關鍵段落，提煉對應的用戶行為、態度、問題、需求等信息，逐步建立猜想，并在后續的訪談中進行驗證、修改；每輪訪談結束，對共性問題進行分類歸納，梳理電子化在線表格；撰寫訪談報告（可能包括用戶體驗地圖、用戶畫像等）；

后續跟進：郵寄周邊禮物，并建立商家體驗群，維護長期合作關系。

TIPS：提前爭取更多利益點吸引商家參與；提前明確目標用戶類型，與產品側配合利用線上使用數據定位篩選訪談用戶（如使用經驗、使用頻率、經營類目等）；提前與受訪者溝通，可以讓商家準備反饋問題列表，與商家反復確認時間；確認用戶接受上訪談使用的設備及場景，對可能出現的意外情況做預案；訪談后，在企業版微信建立相對穩定的商家關系，以便回訪；訪談信息整理需要更多人同時參與，盡量在訪談當天或次日完成轉錄、問題分類，及時補充假設，在后續訪談中驗證/推翻；及時從錄屏中截取關鍵段落、截圖，便于舉證。

線上問卷調研

調研目的

以更大樣本量驗證訪談結論，同時通過對大量用戶的主觀打分、行為習慣的分析，得到對產品整體的使用評價，直接獲得用戶角度滿意度、參與度、易用性得分。

調研方法

問卷設計：提前 1 周開始設計問卷，根據前期訪談結果，有針對性地設計各模塊、各角色對應問題；

問卷投放：針對不同端的問題，分為 2 個問卷，分別投放；（如果需要長期追蹤，建議以季度為單位，以京麥為例，緊跟平臺滿意度調研投放時間，在 1 月/4 月/7 月/10 月初分別投放）；提前與產品、運營側進行溝通，確認上線、下線時間，以及所需物料，如文案、icon、banner 等；

問卷結果梳理：數據清洗、分析；梳理關鍵信息，制作圖表；輸出報告結論。

TIPS：1. 盡量咨詢用戶研究團隊專業人員，聽取他們對問卷題目設置的建議，留出組內討論、線上測試時間，進行 1-2 輪調整；

2. 如果需要長期追蹤，建議以季度為單位投放問卷，以京麥為例，緊跟平臺滿意度調研投放時間，在 1 月/4 月/7 月/10 月初分別投放；

3. 提前與產品、運營同學進行溝通，確認上線、下線時間，以及所需物料，如文案、icon、banner 圖等。

3. 做診斷

收集了大量數據信息之后，我們需要設定不同維度的權重，并通過一定的規則計算出各指標的最終得分。比如工具類產品，可能更強調用戶達成任務的效率，因此易用性和任務效率權重較高，而主觀數據的滿意度權重則相對更低。

同時每項指標的背后都有一種或多種的數據采集方式，每項指標的數據顆粒度也不同，有的可能只針對一個模塊，有的可能涵蓋整個使用過程。因此，我們在設定計算規則的時候，要盡可能的全面客觀。

最后，將度量體系的各個維度進行加權計算，基于數據表現，可以診斷出產品的提升信號。

完整性 | 功能完整性對比分析（客觀）

目前，京麥在整個商家后臺行業中已經處在功能相對較為完善的階段，因此完整性將作為一個重要指標納入整個體驗度量體系中。通過與其他同類產品對比，可以看出各端功能的覆蓋完整度，這一維度是完全客觀的度量指標。

易用性 | 用戶使用難易程度（主觀）

易用性是衡量用戶在使用產品各功能時感受到的難易程度的標準，是完全主觀的度量標準。在比較了各類可用性測試、易用性測試度量體系后，我們選取了表格中的四項維度和對應的七個問題。通過問卷的形式，以李科特五度度量（強烈反對=20 分，反對=40 分，中立=60 分，贊同=80 分，強烈贊同=100 分）換算獲得了易用性的分數。

參與度 | 各角色用戶常用功能模塊的使用率（主觀）

參與度是衡量用戶對各功能模塊的使用率的主觀度量標準。使用京麥的商家可以按照其工作崗位分為店長、運營推廣人員、客服人員、財務人員、技術人員等多種類型，通過對各類人群常用功能模塊的使用率的加權平均值，計算整體的參與度。

任務效率 | 各角色用戶完成特定任務的投入產出比（主觀&客觀）

任務效率是用戶通過使用京麥完成某一特定工作任務（發布新商品、填報活動等）的投入產出比，通常以時間、完成度、出錯率等具體業務指標來具體定義。一期我們以 100%-用戶主觀反饋問題的比例來推測計算任務效率。二期計劃：與各條業務線溝通，以他們的業務指標來定義更具體的任務效率指標，通過用戶行為監控數據來計算客觀的任務效率值。

滿意度 | 用戶對產品整體的使用感受（主觀）

使用季度性《平臺商家滿意度調研報告》統計得分，也可以在問卷中設置相應打分題進行統計。

4. 再改造

通過前面幾個步驟的計算得分，產品已經有了較為宏觀的改造方向，我們可以再結合前期調研收集的用戶反饋問題，重點解析數據表現背后的原因。這個階段需要引入更細致的專家評估等方法，對各類問題的優先級進行排序。

我們計劃結合產品現有的移動化進程，首先提升完整性，然后分批次地針對核心模塊優化易用性、任務效率，并通過概念設計及用戶測試等方式進行產品優化改造的快速驗證。

5. 續檢測

后續，我們也希望引入更多用戶的行為數據指標，如用戶活躍度、用戶增長率、功能插件使用率、頁面點擊率等，從業務指標中獲得更全面的數據信息。

同時引入監測工具，對產品重塑后的關鍵指標進行持續追蹤，周期性監測指標的改善情況，讓各部門同時參與體驗度量的工作，提升優化產品的效率。從體驗度量指標的數據采集到數據分析到數據的可視化，再到最后的優化落地，讓體驗度量的閉環全程可管理。

隨著產品生態的多端化進程，越來越多的跨設備和不同屏幕尺寸導致的問題也逐漸暴露，例如：

XX 能力要在手機上使用，不得不單獨為移動端開發幾個頁面甚至一個產品（反之亦然）；產品數據量很大，Ant Design 默認字體 / 間距太大了，不夠緊湊；版式不夠優化，造成空間浪費；

Ant Design 基于如何在小屏幕中解決信息展示問題這樣的出發點也在很多組件中提供了響應式設計，但擁有更加完備的環境適應性應該是一個設計體系長期的目標之一，因此在全局性地考慮跨端、跨多屏幕尺寸、信息密度等響應式設計方面還值得我們繼續深入研究。

本篇文章橫向調研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企業級產品設計體系的響應式設計部分，從設計策略、設計模式、實施模式、設計方案四個層面大致歸納了一些信息，旨在對響應式設計有一個籠統的了解。

關于 Adaptive Design 與 Responsive Design先厘清兩個概念，關于響應式設計通常會有兩個普遍認識，即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 與 Responsive Web Design (RWD) 概念，它們的核心區別在于 AWD 針對不同的設備或屏幕尺寸定制化設計多個固定布局的尺寸，而 RWD 是同一套代碼做彈性的適應，本質上它們都在解決產品設計如何適應于不同設備以及不同屏幕規格的問題，本篇所指的「響應式設計」 概念包含了兩者，不做明顯區分，關于 Adaptive 與 Responsive 設計怎么界定以及具體的規則本篇也不進行展開。

移動優先設計策略

提響應式設計不得不提「移動優先」設計策略，移動優先的概念最早是 Google 在 2010 年世界移動大會上提出來的一種產品策略，基于 Google 對未來趨勢中移動設備將會逐漸擁有核心地位的判斷。后來「移動優先」更多被提及是作為一種在響應式設計中應用的設計策略，它認為在響應式設計中優先為屏幕限制更大的移動設備設計，再擴展到大屏幕的 PC 端是一種更有效的設計方法。

例如 Alta、Lightning、Fiori 均在設計體系中明確采用「移動優先」的設計方法，Fiori 尤其指出「移動優先」專注核心功能，專注增強而非降級，提前考慮移動端更多的獨特特性以及異常情況，能提供更好的體驗。Material Design 可能算是移動優先的最佳實踐，它本身就誕生于 Android 平臺，而后再通過大量響應式規則擴展到桌面及 Web 端，使得 Material 在多端都擁有一致貫穿的良好體驗。

「移動優先」本質上是基于一種「增強」的設計思想，一個產品如果要同時適應于不同的設備，一直以來有兩種策略：優雅降級 vs. 漸進增強，后者認為先從最小和最受限制的低級設備（移動設備）入手，再為更高級的設備（桌面設備）增強信息和交互，這意味著在更多限制下，迫使設計考慮如何減少、匯總，分組信息，有利于聚焦核心信息以及為更多限制考慮。

然而移動設備已不再是「低級設備」，Fiori 盡管強調「專注增強而非降級」，但它同時提出的「提前考慮移動端更多的獨特特性」卻與漸進增強的設計思想相悖，讓「移動優先」淪為了某種形式化的概念而難以執行。

例如下面這個報告界面的場景里，移動端僅展示匯總的報告圖表信息，但匯總圖表并沒有「擴展」到 Tablet 里而是用明細數據替換圖表，而在桌面端同時包含了明細數據與圖表兩部分信息，這看上去并不像是一個「增強」的設計思路，更像是在全量需求下基于設備限制所采用的「降級」策略。

因此「移動優先」并不一定是形式上優先設計移動端，它被廣泛接受和應用的是背后的漸進增強的核心思想。我認為在移動設備高度發展的當下，「移動優先」不再適合作為單獨概念提出來，而漸進增強的設計思想應該體現在更細分的場景中，例如在布局、信息排版以及交互反饋中，我們應該優先考慮限制更大的移動端；在一些交互方式上，優先考慮限制更大的鼠標操作。甚至在復雜業務場景里，優先滿足核心業務流程順暢也屬于漸進增強的策略范疇。

設計模式

這里講的設計模式是指設計師在具體業務中針對不同的情況可以采用的通用性設計方案，這些設計模式除了單獨應用外，有時候也可以多種模式結合應用。Fluent 歸納了 6 種對應不同情況的響應式設計模式，非常全面地涵蓋了其它設計體系中的絕大部分方案，分別是：調整大小、重新定位、重新排列、顯示/隱藏、替換、重新構建。

Resize – 調整大小

調整大小是最基礎的設計模式，是一個容器默認的響應式模式，通常有等比縮放、固定高度、或是在不同尺寸下按不同比例規格縮放三種形式，即便在無響應式設計的體系里，容器跟隨屏幕尺寸而變化也是一個常見的應用方式。

Reposition – 重新定位

改變 UI 元素的相對位置，以充分利用不同尺寸的空間。重新定位在響應式應用里多見在框架上，或是在組件里對一些特定元素的處理，例如 Material 的全局浮動按鈕與浮動的下拉菜單以 Reposition 的形式分別在桌面端與移動端處于不同的位置。

Reflow – 重新排列

改變 UI 元素的排列方式，這在內容彈性布局里較常見，通常是基于某種排列規則自動向下折行，并結合調整大小與柵格系統應用在響應式布局方面，例如 Carbon 的 Fluid Grid。

（Reflow）

Show / Hide – 顯示 / 隱藏

基于屏幕空間、設備不同特性、特定情況等顯示或隱藏 UI 元素，例如大多數設計體系的框架設計應用在小屏幕上會隱藏側邊菜單。Material 在組件響應式行為里提到的 Expand 也屬于 Show / Hide 的延伸。

（Show / Hide）

Replace – 替換

針對不同尺寸的屏幕采用不同形態的組件，通常應用在對具體的組件做針對性響應式設計中，但需要注意用戶面對變化時的認知成本。

（Replace）

Re-architect – 重新構建

折疊或拆分信息架構，這種模式在 Web 端較難實現，通常出現在一些 Native App 的場景。

（Re-architect）

Density – 內容密度

除了上述 6 種模式以外，我把內容密度也歸納為一種設計模式，Fiori、Material Design、 以及 Atlassian 都提出了內容密度的概念。Fiori 基于移動優先在移動端采用默認密度，而針對大屏幕的 Web 端則提供緊湊密度的方案，他們認為移動端手指交互所需的空間要求更高；Material 則是針對很多組件都定制了 Default、Comfortable、Compact 三種密度的視覺表現。通過被動響應式或主動控制內容密度很好的解決了不同尺寸屏幕的信息獲取效率問題。

（Material Design 的內容密度示例）

值得一提的是 Atlassian 通過柵格系統的間距來控制密度而非對內容密度本身進行設計，越緊湊的布局柵格間距越小，這看上去很合理，卻很容易造成內容密度增加的同時整體信息獲取效率反而降低的問題。Material 也有關于柵格空間的定義，但在內容密度的處理上和 Atlassian 恰恰相反，它認為高密度內容適用更寬松的柵格空間，相對是一個更合理的設計。在信息密度的問題上，我們的核心目的其實是提升信息效率而非單純提高視覺密度，因此解法上需要更完善的考慮。

實施模式

實施模式是指設計體系為實現具體設計方案而定義的一系列基礎規則、解決方案或技術手段，經過整理總結為相對尺寸單位、屏幕斷點、彈性布局、柵格系統 4 個方面。

Rem – 相對尺寸單位

幾乎所有應用于 Web 的設計體系的技術方案中都采用 rem 相對單位，Material、Fiori、Carbon 和 Lightning 均沿用了瀏覽器默認的 root 尺寸，即 1rem = 16px，Alta 默認采用是 14px 的規格，并允許基于不同應用選擇 12px 或 16px 的規格，默認情況 Alta 采用更小規格的單位會在小屏幕電腦上有更好的表現，這也許和他們的產品特性相關。

相對尺寸單位是非常具有實施價值的，它使產品能在保持信息節奏的情況下根據不同的情況等比例縮放內容，這使得設計能更方便地調整內容密度，或許還可以配合 Media Queries 解決部分跨端的尺寸適配問題，且幾乎沒有前端成本。

國內的前端業界包括我們自己的前端同學更多將 Rem 運用在移動端，主要為了兩個目的：方便計算尺寸、在不同寬度的設備上等比縮放內容，這樣的用法是出于前端工程師解決屏幕兼容性的一種技術手段，在使用上本身也存在一定爭議，而在響應式設計領域我們還沒有發揮出 Rem 應該發揮的作用，甚至很多設計師還并不了解相對尺寸單位的使用方法，廣泛應用 Rem 能為我們帶來哪些實際價值是接下來需要繼續研究的。

Breakpoints – 屏幕斷點

屏幕斷點是響應式設計的基礎依據，它決定了我們要適配到什么樣的設備或屏幕規格，并通過 Media Queries 這樣的技術實現不同 Breakpoint 條件下的不同 UI 表現。一般情況 Breakpoints 都是基于 Phone、Tablet、Desktop 的維度來設計的，包括考慮了移動設備的橫評豎屏情況，關于詳細的規格設置其實并沒有太大參考價值，設計體系都是根據自身定位以及設備覆蓋的情況來制訂的，例如 Material 的斷點在低分辨率范圍分得非常細，是因為 Material 主要服務的 Android 平臺有著數量繁多的設備分辨率。在滿足自己需求的前提下，屏幕端點不需要太多，無論怎樣基于數據驅動的屏幕斷點設置將會是一個更科學的方法。

（屏幕斷點分布）

Fiori 的斷點設計比較有意思，在設計文檔中僅有基本的布局規則，沒有明確的 Breakpoints 規則，Fiori 對于不同的組件會設計不同的 Breakpoints，例如在 Table 這個組件中定義了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的規格，而在 Form 的組件中，Breakpoints 變成了 0 < 600 < 1024 < 1440 < ∞，從這點上看出 Fiori 認為不同的組件有不同的表達模式，因此應該針對性對組件進行優化。

（Fiori 的 Table 組件適配情況）

Flex Layout – 彈性布局

Flex 布局是 CSS3 提供的強大布局能力，從更自然更具語義化的角度實現界面元素的自適應。應用于 Web 的設計體系基本上都在組件代碼里廣泛采用了 Flex 布局，Lightning 還將柵格與 Flex 布局結合定義了自己更完善的布局方法。在響應式設計中，Flex 布局通常結合 Breakpoints 使用，在兩個 Breakpoints 之間讓界面做更平滑的過度。除此之外其它平臺也都有類似的彈性布局能力，例如 Fluent 在 windows 采用 XAML 構建布局系統。

無論是 Flex 還是最近興起的 Grid 布局都是 CSS3 的基本布局能力，響應式設計要解決布局的問題將會深度依賴這些基礎技術手段，本篇不進一步展開。

Grid System – 柵格系統

柵格系統是所有設計體系必備的，我們通常將頁面橫向分為 N 列，定義每一列的尺寸與間距，這為界面布局提供了一致性和成本便利。傳統的柵格系統在響應式方面的應用主要是結合 Breakpoints 與一些 Responsive Token 來實現的，通過給 UI 元素指定不同的柵格數來決定他們分別在不同屏幕下占多少列，同時一些設計體系還提供了可見性相關的 token，來控制界面元素在不同屏幕的顯示與隱藏。

Fluent、Fiori、Lightning、Material 以及大多數設計體系都采用了 12 柵格系統，因為 12 的因數夠多，能滿足足夠多的布局細分同時又不至于太復雜，Carbon 的做法更加 geek 一些，他們的「2x grid」采用了 16 柵格系統，布局粒度更細但放棄了 3，6 這樣的因數。 Ant Design 為了滿足復雜的業務情況，采用了 24 柵格系統，24 柵格提供了更高的靈活性的同時，也大大增加了復雜度，面臨柵格系統的響應式設計 24 柵格是否適用還有待商榷。

另外 Material、Carbon 還明確提出了「Fluid Grid – 流體柵格」的概念，核心思想是在較小的屏幕上降低柵格數量，將多余的柵格自動折行彈性布局。

（Carbon 的柵格定義）

在屏幕尺寸變化時，柵格主要有兩種響應模式：Fluid、Fixed

（Fluid）

這種將柵格系統與彈性布局相結合的方式基于一些簡單的規則設置，在不需要特定響應式的場景中不再需要指定繁瑣的 token，且能滿足大部分高頻且通用的情況，在一定程度上降低了成本。

組件應用

除了通用的響應式規則以外，設計體系在具體組件中的響應式方案還有許多值得挖掘，能為我們的組件設計提供參考價值，本篇不再一一展開，僅提兩個典型的應用情況：

框架

框架算是一個特殊的組件，在不同的設備中界面框架的適用有非常大的差異，幾乎提到響應式的所有設計體系都給出了框架響應式方案，例如 Alta 將界面框架分為四塊，以 Off-Canvas 和 Reposition 兩種方式在不同尺寸的屏幕中顯示或隱藏以及通過特定的方式展開或呼出。

通常情況下設計體系的框架組成按形式可以分為：

• Header – 通常情況下常駐

• Sidenav – 分為左側右側兩種情況，一般用于放置導航，在不同設備會有展開，收縮，隱藏三種狀態

• Content – 內容區，通常由 Grid 控制布局

• Footer – 如有，固定在頁面底部

• Float – 浮動框架，用于臨時狀態，通知或彈窗等

設計體系通過對框架的定義，以及控制不同部分基于什么樣的模式響應屏幕尺寸來實施對框架的響應式設計。

組件

Fluent 或 Material 在設計文檔中更多基于基礎的網格，布局，設計模式來闡述通用性的響應式規則，因此他們的響應式設計有非常好的延續性，組件的響應式方案基本上都遵循這些規則。

而 Fiori 以及 Lightning 在通用性響應式設計模式上的定義上沒有那么全面，他們側重于在組件層面對所有組件都考慮了針對性的 Responsive 或 Adaptive 的方案。例如 Fiori 在響應式表格的組件里，在桌面端與移動端分別是 table 和 list 的模式，這個方案并不是通過全局抽象規則得出來的，而是基于對組件的針對性設計，正如他們為不同的組件設計了不同的 Breakpoints，這種針對性也適用于特定的 UI 解決方案。

（Fiori 針對 Table 的響應式設計）

在一定程度上抽象規則的同時，如果我們能夠為每一個組件都考慮到不同場景的響應式，當然就會提供更精細化的體驗。在一個完備的設計體系里，在設計每一個組件資產時都以漸進增強的設計策略，考慮到不同的設備及屏幕適配是非常有必要的。

響應式設計的世界煙波浩渺，書不盡言，言不盡意。Ant Design 目前計劃從布局基礎規則以及內容密度的解決方案切入，逐步完善響應式設計的體系，這是一個重要且漫長的過程，至于文中挖下的坑還需要深入研究逐一補充，本篇初探先到這里，歡迎大家留言指出問題也很希望大家能留下想法共同探討。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

導語：“自選”作為金融類產品的基礎功能，迭代至今已經非常成熟了。放眼望去，市面上主流金融產品的自選功能似乎都大同小異，但是體驗下來會發現，細分領域下的設計側重點卻有所不同。

一、把握需求

如果我們將“自選”轉化為熟悉的C端功能，它類似于“收藏夾”、“關注列表”的概念，是用戶管理交易對象的重要陣地。除了常見的管理對象（交易概念中稱作“標的”）、管理分組外，“自選”還會存在對數據和使用習慣的管理需求。

• 站在業務視角：券商的核心優勢在于“交易”，所以業務目標自然為“交易”服務?！白赃x”相當于一張快捷交易導航，我們提供的諸多功能都是在幫助用戶快速、便捷的調整這張表，直到它達到“為我所用”的程度。
• 站在用戶視角：不同交易習慣的用戶，對自選的操作頻率有高有低，在保證效率的同時，還需要讓每一類用戶都能用的順手。

二、競品調研

1. A梯隊：美港股券商，富途、長橋

• 共同的設計側重點：功能的組織符合用戶心理模型，任務專一，功能精煉，不追求全面、追求使用效率。
• 共同的弊端：“管理分組”的交互設計不夠流暢。

富途“管理分組”采用的交互方案，初期學習成本是很高的，它雖然充分考慮了效率問題，卻低估了用戶理解上的困難。（截止本文發布前，富途最新版對現方案做了視覺樣式上的更新，看來設計師也意識到了該方案目前存在著一些不夠清晰的地方，期待后續交互上的迭代。）

長橋將分組的“新建、排序、刪除、重命名”拆的很散，理解上不困難，操作起來較為繁瑣。

2. B梯隊：平臺類產品，騰訊自選、東方財富

• 共同的設計側重點：相關功能盡可能的聚合在一起
• 共同的弊端：當用戶目前僅想完成一項任務時，產品每次都會同時提供多項任務，操作通常很難專注。用戶不可避免的會多花些時間和好奇，來理解與本次操作任務無關的信息

3. C梯隊：社區類產品，雪球

設計側重點：管理標的、分組與數據、使用習慣的設置完全分開

一些細節問題：比如“管理本頁股票”，在批量操作的場景下，底部欄卻存在不能批量操作的選項

小結：對三類產品的競品調研也驗證了我們最初對需求目標的把握，為券商類產品設計“自選功能”，效率和流暢度是最關鍵的。設計目標明確了，接下來我們看看目前都存在哪些問題，以及對應的解法。

三、問題與解法

1. 當用戶精準搜索一個標的，并將其添加至自選后，并不能在當前完成該標的的分組

如圖所示，現在如果想完成上述任務，需要4步、且每次僅能將標的添加至1個組。優化后我們可以通過3步完成，且每次可以將標的同時添加至多個組。

（注：Snackbar雖然源于安卓原生的MD設計系統，在IOS并無此原生控件。但是隨著二者在設計上日漸趨同，且控件的應用上也早已互通有無，所以Snackbar在IOS的使用，合理即可，不必糾結于平臺差異。）

交互關鍵點：

• 想提升操作效率，不僅局限于步數、路徑的縮短，它還可能是場景的正確連結、重復操作的合并；
• 使用Snackbar，本質上是給用戶選擇的余地。在操作a完成后的2-3秒決定是繼續進行操作b，還是離開當前場景。

2. A功能和B功能在自選場景分別有兩條觸達路徑，不過多路徑的存在不但沒有提升功能的使用體驗，反而帶來了不小的認知負擔

關于“冗余路徑”應該保留還是去除，一直以來都存在爭議。討論這個爭議的前提是：冗余路徑雖然不是最優路徑，但是滿足了特定場景下用戶的特定操作習慣。

當“冗余”只是冗余、沒有任何增益時，也要敢于做減法；因為同時還需要考慮一點：出發前的選擇越多，用戶的決策時間越長。

交互關鍵點：

在業務方提出為同一個功能再添加一條新的路徑時，我們必須要弄清楚，這條新路徑是為解決什么問題存在的。不解決問題的需求，大部分是對產品的無效堆砌。做好產品的“守門員”，給出專業的判斷，是交互設計師的重要職責之一。

3. 關于“自選”的設置功能，這里會討論到幾個典型的“欲速則不達”的交互問題

1）對功能的整理和歸類，是我們為用戶留下的使用線索。如果推理時間過長，說明線索的指向性出了問題。

• 問題：將“管理分組”歸至“設置”，分類不清晰；“數據項”Tab中的設置項沒有根據相關性進行分組；
• 解法：在“設置”中去掉“分組” ；數據設置項根據相關性進行分組 （指標→顯示→排序）。

2）如果層級 1 包含層級 1.x，那么層級 1.x 的操作不應放置在層級 1 的認知區域。

• 問題：數據項Tab的“默認數據”放在頂部導航欄，功能層級不匹配；
• 解法：功能層級調整至匹配。

3）如果用戶設置了一些項目，無法在預期場景看到對應的效果，應提前給與說明。

• 問題：完成數據項設置后，無法在豎屏看到全部生成效果；
• 解法：在數據項設置頁頂部進行生成效果的說明提示。

交互關鍵點：

注重“效率”是沒錯的，比如上述case中看似有“效率”的Tab結構。但是這里面隱藏著更多的“清晰”問題。如果一個功能設計的讓用戶用不明白，也就談不上“效率”的提升。

4. 最后一個case我們看下互聯網產品中最常被忽視的細節-文案

場景1：批量管理標的。

文案問題：按鈕表意都是“刪除”，帶來的實際結果是不同的，存在歧義。

場景2：數據項設置。

文案問題：沒有進行規范化處理，增加了選項的理解難度。

交互關鍵點：

很多時候，一套語義清晰、邏輯順滑的文案，可以等價于某個功能優化的迭代周期。實際功能點不變，只是替換文案，就能讓用戶用的清爽明白。這樣的“好買賣”，卻一直被嚴重低估。

四、總結思考

遇到同質化較高的需求重構時，初期應扔掉“套路”思維，從用戶視角、業務視角推導出主要設計思路。帶著問題去分析競品，推敲競品在此類需求設計上的精細差異。不要對行業top給出的方案習慣性盲從，要經過思考和反復論證，推導出最適合自己所負責產品的交互方案。

當設計深入到細節，出現了可A可B的選擇時，回頭看看我們經過深思熟慮推導出來的設計目標。重新評估A/B方案是否符合目標、是否有助益于實現目標。沒有太多“怎么設計都可以”的方案，從我們的選擇中，也透露了決策的傾向。只是我們需要時刻確認這種“傾向”在整體邏輯中是自洽的。

每一份交互輸出都應該是有觀點的輸出，即使最終我們的觀點被業務方、協作方的諸多因素所淹沒，仍要保持、增進自己提出觀點的能力。那些常被用戶生動提起的、打造出特色和性格的產品，都是由一個個鮮明觀點鑄造而成的。




藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一、項目背景

1. 業務背景

• 3名設計師協同負責APP的設計工作，設計側介入時間晚，周期短，由于是v1.0版本，沒有可以復用的設計組件，從0-1探索設計風格，定義視覺語言。

• 前期每天依賴釘釘傳輸本地設計文件，設計語言不統一，效率低。協作工具不是很理想，后期待優化。

2. 設計背景

• 當我們開始設計系統的制定時，大部分設計師可能都會先去網上找到大廠現成的設計系統，當拿到他們的成品的時候，會把自己的產品進行拆解和借鑒，這的確能快速解決問題，但是如果不理解其中的組織規則和邏輯，只是借鑒他們現成的設計系統，只能了解個大概，知其然而不知其所以然。

• 直接復用其他產品的現有組件庫并不能完美套用在自己的產品上，不能形成自己的產品調性，甚至有些組件不符合自身產品的使用場景。

二、設計規范的價值

1. 設計層面

• 隨著項目開始成熟，設計也需要一套統一的標準，提升設計質量以及設計的一致性。有了規范及標準，輸出才能趨向于穩定，迭代才能有序的進行。

• 沉淀設計資產，使得設計更加持續地輸出價值，減少一次性設計，使設計師不要每天局限在元素樣式設計中，而是可以站在更高的層面上來思考業務與體驗。

2. 開發、測試層面

• 與設計規范同步形成研發資產，避免重復造輪子，保證代碼質量，降低維護和拓展的成本。

• 測試避免重復的無意義走查。

3. 產品體驗層面

• 統一產品體驗，映射品牌心智。

• 規范的制定，能有序統一不同頁面層級的信息架構，視覺表達。用戶在產品終端內，各鏈路、各陣地的體驗是一致的，看到的信息元素，也會有共性的傳達。這些共性的元素，組成了品牌的內核，能夠幫助用戶建立心智。

4. 協作層面

• 降低不同設計師之間以及設計師與開發工程師之間的溝通成本。

• 設計師無需再花精力思考定義新的元素樣式，既能保證統一性，同時通過復用體系，設計師也可以更高的提升效率，釋放一定執行的工作量，可以把更多的精力放在前置思考決策環節，幫助業務、用戶提升價值。

三、設計規范的目標

1. 設計風格一致

不同設計師有不同的設計風格、設計手法，項目有多個設計師協作時會出現不同的設計語言，需要統一產出的設計樣式。

用戶在使用產品時可以感受到統一的設計語言，從而降低用戶的理解成本。

2. 提高設計效率

通過組件庫高效協同工作

3. 建立穩定迭代機制，完善設計流程

版本迭代時，按照設計規范統一設計語言，有不完善之處，和項目設計師討論確定方案，補充規范文檔。

四、如何搭建設計系統

1. 設計原則

對于設計系統而言，在開始的第一步首先要確定一個標準，一個指導原則，在遇到不確定的設計過程中，依靠設計原則來引導方向。   

• 其他產品設計原則

• 有贊：產品原則：產品定義、產品設計、產品研發、產品運營。設計原則：高效、友好、安全

• TED：追求永恒，而不是追求潮流

• Pinterest：清晰易懂、充滿活力、牢不可破

• Airbnb：統一、通用、風格化的、對話式的

• 我們的APP：扁平、親和、簡約

2. 色彩規范

主色

• 采用品牌色紅色，色相根據產品調性有所調整

• 主色色階使用擴展色生成器生成，在開源網站上根據自己的需求調整參數，創建色彩體系。  

• 在制作組件時，將顏色添加 主色、輔助色、中性色為一級分類，例如：01_主色；再添加二級分類，例如：01_主色/red ；三級分類根據顏色飽和度，用x%命名，例如01_主色/red/100%。

• 命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后，將每個顏色轉換成 Symbol，便可統一調用。

輔助色

• 

• 我們不僅需要品牌色來傳遞品牌價值，我們還需要輔助色來組成我們產品體系的顏色搭配，實現不同功能點的視覺呈現。目前編程貓APP輔助色暫定為黑色。

• 對于輔助色的選擇，可以選取了同類色、互補色、對比色三種輔助色系。

• 同類色：

• 色環上相差15-30度的色彩，非常舒適，色彩過渡自然，溫和，給予用戶安心，信任的心理預期。并且于品牌色的色相冷暖性質一致，和諧統一。（將品牌色設置為最中間的點，就可以得到兩個輔助色）如下圖

• 
  

• 互補色：

• 指在色相環上角度為180°的色彩，比如我們最常說到的3組互補色：紅和綠、藍和橙、黃和紫。如下圖：

  
  

• 對比色：

• 沒有互補色那么嚴格，指的是在色相環上角度在120° - 180°之間的色彩，并且理論上來說，互補色應該也是包含于對比色之內的。比如：粉色和綠色就是對比色。如下圖：

• 校正輔助色

• 校正的原則一：色相差值不能超過15近似色的選取，保證色相不超過15，保持統一的視覺體驗。

• 校正的原則二：盡量保持感官明度一致

中性色

• 中性色作為輔助色，也是調和顏色視覺的一種。它本身不帶情感色彩，可中和其他任何顏色，自然界中沒有純黑或者純白的顏色，所以將純黑色降了純度，使之符合感覺舒適程度。中性色也常用于字體的使用，并且以不透明度的形式落地。

• 在中性色組件里，由于文字、背景色都屬于中性色，分別定義了三大類的二級分類，分別BG、Black、Text

功能色

B端產品多用，此處不過多贅述。

3. 字體規范

字體的命名方式為序號_標題類型/字重/對齊方式/字號的層級結構，例如「01_主文字_標題_按鈕文字_正文/加粗/Center/28px」；一級分類定義了五個大類：

• 主要的文字：主文字、標題、按鈕問題、正文；

• 次要文字：副標題、輔助文字、弱標簽字；

• 禁用文字；

• 標簽文字：文本鏈接、功能文字；

• 特殊字體。

4. 柵格系統

我們都知道多數柵格里的間距都采用8/6的倍數，有了8這個基數后其他都很容易定義，但是前期我們2位設計師在設計初期頁面時，1個采用6倍柵格，1個采用了8倍柵格，導致設計稿不統一，浪費了時間修改調整

那具體應該是用6還是8呢？

• Web端常見框架Bootstrap用8為基數，響應式布局更靈活

• 減少出現奇像素偏移造成模糊

• 開發更容易理解的數字8

• 能被最多的屏幕尺寸整除適配

5. 圖標設計

一級分類分為導航類、功能類、系統類三大類，二級分類根據場景和名稱進行細分。前期二級分類用尺寸來進行分類，但是后期討論用尺寸定義尋找某個圖標不夠便捷，如果找「返回」，設計師并不知道這個返回是多大尺寸的，尋找起來就比較費力，所以改成了按照場景分類。

根據圖標形狀，按照方形、圓形、橫向、縱向輸出圖標繪制模版，便于用戶感知到統一的圖標風格，也便于設計師對圖標進行繪制和調整。

6. 通用控件

根據原子理論的定義和命名方式，依次完成對其他通用控件的原子、分子和組織的定義，例如：按鈕、列表、空狀態等，整個過程都是通過 Symbol 的不斷嵌套，最終實現組件庫的創建。

Diolog 彈窗

• 滿足基本組件需求，跟隨文案內容自動適配彈窗高度，按鈕顏色可更換，文案字符樣式可更換

• 使用包含具體動作的動詞，即使不看上下文也可以通過按鈕判斷，而不是使用【確定】、【取消】等寬泛的詞匯。

Default 缺省頁

給用戶提供解決方案，而不是讓用戶自己尋找問題原因

List 列表

• 符合前端-盒子模型

  

• 盒模型是一種描述對象尺寸和間距的方法。它由 4 個組件組成：邊框、邊距、內邊距和元素本身的尺寸。

• 邊框：圍繞元素邊緣的描邊粗細。大多數設計工具不允許這影響整體間距和尺寸。

• Padding：元素邊界與其子元素邊界之間的空間

• 邊距：元素邊界與相鄰對象之間的空間

在做每個模塊時，不僅僅只是把默認的文本/元素制作出來，它的熱區也要讓開發可以理解，按照盒子模型的原理，比如在做List，「單項輸入」文本的行高，整個單元格的高度需要用白底畫出來，明確padding值；與其他元素/設備之間的邊距（Margin）要也表示出來。

五、維護與管理

1. 存儲地址

• sketch cloud云端同步

• 云端管理會有一些較大的優勢。比如更新通知更方便、每次大家訪問，都能下載到最新的規范，維護管理起來也會省事一些。

2. 更新同步

規范的改動性不要過于頻繁，通常半年及1年左右的時間以上，進行一次較大迭代是比較合適的。每次更新以后，需要郵件或者其它形式，周知所有跟規范可能相關的人員。同步的信息主要有  ：

規范本次修改范圍及修改原因；

1. 修改點羅列

2. 優化后的版本號

1. 最新的文件同步

2. 推進變更計劃
   
   
   
   
   藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

   

   
   文章來源：站酷  作者：AmberU
   

   分享此文一切功德，皆悉回向給文章原作者及眾讀者.
   免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
   

   藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務