網頁中超過95%以上的信息都是通過文字的形式呈現。 然而，頁面文字并非毫無章法的隨意呈現。事實上，更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。
BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設計要求也越來越高，
接下來為大家分享一下我收集到的案例：
（圖片均來源于網絡）
點擊查看更多UI/UE設計案例??????
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
編輯導讀：如今，谷歌可以說是科技領域規模最大、最具有影響力的公司之一。正因為如此，它們的數字產品設計會對整個行業產生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗）設計指南中，設計師們提到了10條原則，不管是iOS還是安卓系統都同樣適用。在這篇文章中，作者從這10條指南出發，加上自己的經驗和相關案例，在設計方面為大家提供一些建議，希望對大家設計產品有幫助。
圖片來自Material
在沒有其他方法的情況下，圖標可以成為理想的指示工具?！豆雀璨牧显O計指南》
在《Design of Everyday Things》一書中，有“以人為本的設計之父”之稱的唐·諾曼（Don Norman）闡述了他對圖標的理解：圖標就是代表動作、同時可以指示該動作以何種方式完成的元素。在數字產品中，我們很少會出現“左滑-刪除”這樣的文字指示，而是通過左滑的動作引出一個紅色的小垃圾桶來闡明“左滑就會刪除”這樣的設定。
在用戶和產品交互之前，插入動畫效果?！豆雀璨牧显O計指南》
如果我們希望一款數字產品有著極簡主義外觀，那么我們可以借助動畫來達到這一點。在上圖的例子中，最開始畫面中甚至不會出現垃圾桶的圖標。在我們手指滑動后，也就是人機交互的動作產生之后，才會出現這一垃圾桶，同時也會強化“滑動表示刪除”這樣的信息。動畫效果有效簡化潔面、改善用戶體驗的功能。
圖片來自Medium｜制圖Eddy Gann
動畫可以展示圖標所代表的執行動作，從而增加流暢感和愉悅感。在兩個視覺效果之間插入帶有動畫效果的圖標，可以反映這兩個視覺效果之間的關聯?！豆雀璨牧显O計指南》
在兩個動作之間增加一個過渡的動畫，這個效果我們應該很熟悉。最簡單的例子就是“播放/暫停”按鈕。在點播放后，該圖標變成了暫停按鈕；點下暫停按鈕，該圖標又變成了播放按鈕。這個變化的圖標展示了播放和暫停兩個動作之間的關系。
這只是一個簡單的案例。現在想象一段更加復雜的經驗：比如將某個產品添加到購物車中，購物車圖標會出現裝進貨物的動畫效果；或者想象某一功能無法使用時圖標的彈出效果。
帶動畫效果的圖標本身并不復雜，我們可以在Adobe XD中完成：通過給圖標添加預設效果，或者加入淡入、淡出的效果即可。
動畫效果可以根據需要設計出簡單或復雜的運動軌跡。圖標雖然小，卻是影響用戶體驗非常重要的一環，我們可以通過設計復雜的運動軌跡來強調它的重要性。——《谷歌材料設計指南》
請記住，如果界面上所有的元素和圖標都在動，那么用戶可能會不知所措。過度使用這一方法反而會削弱你想強調的重點。給圖標添加動畫應該適可而止。
調色板生成工具｜圖片來自Medium
調色板生成工具（Material’s Palette Generator）可以調出任何你需要的顏色，色相，亮度，色度等都可以通過一系列算法調節出來，通過算法調出的色彩實用又美觀?！豆雀璨牧显O計指南》
如果我們無法使用谷歌的調色板生成工具，手動調色就會變成一件非常麻煩的事。調色板生成工具最大的好處就在于它自動給你調出了同一種顏色的不同形態（如藍色從暗到明、從深到淺的形態），你就不需要再對照標準調色板一點點矯正了。不過即使沒有這樣的自動生成工具，你也應該仔細檢查并矯正自己的調色工具。
顏色對于數字產品的重要性，就像是鹽和胡椒粉對吐司的重要性一樣——添加太多了，就蓋過了吐司自身的風味；太少了，味道就會變得寡淡。在選擇配色以求增加品牌視覺效果時，一定要仔細考慮清楚給哪里添加什么顏色。
通過有節制地在APP里添加顏色，你還可以突出相應的內容，如文本、圖片、按鈕等。你可能已經注意到了，Instagram和Twitter上面布滿了色彩鮮艷的圖片和圖標，與之相對應，它的用戶界面非常簡潔，不會喧賓奪主。
色彩也可以是一種交互元素，要考慮它們在什么地方交互，希望達到什么效果。最重要的元素要用最突出的色彩?！豆雀枭试O計指南》
當一個元素的色彩與周圍環境形成對比時，用戶會更理解它的重要性。我們可以給重要的元素增加“色彩權重”，這個概念是說增加色彩的飽和度，使用更加大膽、更吸引人的色彩，制造視覺沖擊。
另外，我們可以將重要的信息加粗顯示，讓它在第一時間進入用戶的眼睛。簡單來說，如果一種信息比另一種信息更重要，那么前者就要在色彩和篇幅上勝過后者，好讓用戶直觀地進行區分。
文字類型生成工具｜圖片來自Medium
Google Fonts是谷歌研發的一款文字類型生成工具，可以使用它來調節字體、大小等。您可以根據需要調整和優化產品的文字設計?！豆雀璨牧显O計指南》
字體設計是一門藝術，它不僅關乎選擇某一種具體的字體，更設計如何使用、粗細調節、比例調節等，目的是增加界面的可讀性，從而增強產品的實用性。谷歌研發的這款文字類型生成工具為設計師提供了多樣的選擇和排版支持。通過這一款文字類型生成工具，可以節省時間，迅速生成段落、標題、正文、按鈕等。
文章來源：人人都是產品經理 作者：Danny Sapio. 譯者：Michiko
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：作為一個設計師，有時候在工作中會過度重視美感和創意，辨識度是有了，但是缺失了品牌感。沒有了品牌感，這個圖標就可以放在任意一個產品上使用，無法與品牌產生強聯系。那么，如何設計一個有品牌感的圖標呢？本文將從三個方面展開分析，希望對你有幫助。
我們在畫圖標的時候，往往會忽略掉一個重要的問題：缺失品牌感。也就是說，這個圖標和我們的實際品牌、業務并沒有什么聯系，它僅僅滿足了可辨識這個溫飽需求。
圖標缺失品牌感，就會導致同質化的問題，這些圖標放在任意一個產品上都可以通用。
對于產品，記憶點的缺失導致用戶看完后對于我們的業務、品牌不會產生任何深刻的印象。對于我們設計師，圖標和業務的斷層則很容易讓我們陷入反復改稿的被動局面，并且設計話語權也越來越小。
那么，有沒有什么系統、易于理解的方法來讓我們的圖標具備品牌感？
當然有。
接下來的這個圖標三步品牌化是我一直在用的辦法，而且屢試不爽，基本用了這個方法，需求方基本一稿過～
文章案例選用了對接京東物流的國際物流項目。當時有一個著陸頁的需求，需要在首屏下的優勢板塊中繪制六個圖標，分別對應平臺的六大優勢。接下來，我將詳細講解如何運用這個圖標三步品牌化方法繪制與品牌息息相關的圖標。
品牌符號從廣義上來講也就是形狀。
比如天貓最近的雙十一購物節，便是用一個貓頭來作為這次大促的品牌符號，通過每年固定時間節點的品牌形象建立心智。
再比如之前大熱的騰訊綜藝《演員請就位》，它的品牌符號就是不同矩形色塊的疊加組合形態。
通過承載的不同信息可以擴展為不同的類型，比如下面的固態層、圖片層和文字層就分別承載了內容、圖片和文字。
Google在18年于material design中新增了一整塊章節來闡述圖形語言。
google原話是：形狀可以引導注意力，讓用戶易于識別組件，識別狀態和品牌語言傳達。
也就是說，形狀并非我們以往認知中的作用，品牌同樣可以借助形狀來加強效應。
最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關的業務icon，顯著加強了品牌記憶點。
再比如國內的螞蟻財富，便是通過提煉logo中的箭頭符號，將其延展到三個優勢圖標當中，一樣得傳達了螞蟻財富的品牌表達。
所以，基于業務目標以及行業特征，我們將倒三角這個符號作為我們這次項目的品牌符號。
至于為什么選擇這個形狀，主要考慮到了穩定性（三角形自身的穩定性、象征專線的穩定可靠）、保障性（倒三角常被用于保障承諾類的徽章標志）、隱喻物流（由飛機和定位的圖標變形而來）和三者的戰略合作（開鑼、中國制造網和京東）。
第二步相對而言就比較簡單了，不過考慮到顏色在各個場景及狀態到通用性，這里需要基于原本的品牌色額外不同明度的顏色。
這里我簡單擴展出淡色和深色，為了避免頁面過冷加入了暖色作為點綴色以提升溫度。
將圖標與業務緊密結合，能夠與其他競品拉開差異化，這是個相對簡單但是很容易出效果的品牌化的方法。
具體的操作辦法就是：首先根據所給文案腦爆出圖標所對應的關鍵詞，然后根據所在行業的特征篩選關鍵詞，或者進行二次聯想及轉化。
下面我通過此項目中的三個圖標案例來簡單講述下設計過程，僅為大家提供下思路：
運營所給文案如下：
這段文案意思就是，由于我們平臺和清關行合作，因此讓我們的業務更具有保障性，貨物可以按時送到客戶手中。
這里我一開始腦爆出了雨傘、鎖和盾牌這三個形象，并且傳統得用了盾牌符號傳達保障性。
這種任何行業平臺都可通用的形象，并不能關聯我們這個物流類的平臺。
后面聯想到到我們跨境、外貿的行業特征，將“雨傘”這個形象變形轉化為降落傘，來代替盾牌符號。
一來，降落傘外形似傘，相當于是貨物的保護傘一樣體現”保障“的感受， 另外，這種”空運“式的表達也額外傳遞出按時遞交的概念，很好得體現出典型的”跨境物流“的行業特征。
運營所給文案如下：
同樣，一開始我著眼于”跟蹤“”實時“”軌跡“這些關鍵詞，腦暴出定位、雷達之類的事物。
但是結合我們行業特征的話，其實有空間去更貼切到業務本身。
我們平臺的業務線包含了兩個站點——美國（主站）和馬來西亞。供應商發貨后，貨物的軌跡必然是反映在世界地圖中，從起點至終點得分布。
因此我用了地球儀映射全球，以定位來映射包裹收貨地，以延展到定位icon中的虛線映射軌跡。這樣產出的圖標，不僅僅是指代了文案意思，同時表達出對應的行業特征，和業務緊密貼合。
文案如下：
一開始，我傳統得想到了一個時鐘圖標來代表。但是仔細想想，這個時鐘圖標僅能代表”時效“的特征，而不能傳達”快“的感受。如何更好得傳達“快”？
發散思維，我聯想到交通運輸工具，飛機、輪船、火箭等等，最終我選取了飛機這類跨境物流專線主要使用的運輸工具，它所帶來的快捷相比輪船更加深入人心，又不像火箭那樣脫離現實。
當然并非所有的圖標一定需要去結合行業特征，其余的三個圖標暫未想到更適合的元素，所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法，但是身為設計師，我們依然需要掌控我們的項目，充分發揮自己的創造力來賦予產品更多的power。
最后，我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力，增加用戶愉悅度，另一方面通過動態的表達引導用戶更好理解平臺優勢，比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫，來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態圖標是不是更好理解了？
更重要的是，動畫的加入也貼合了我們物流行業“運動”的特征~
篇幅原因，動畫的制作今天先略過，后面可能另抽時間單獨出個教程出來。當然，動力來自于你們的在看或轉發啊～～（手動斜眼）
我們每次接手一個需求時，都要想想，這個設計可以在哪些地方和我們的業務、品牌進行關聯？而不是每次都好像在做一個完全獨立于業務外的項目，這很容易讓你陷入反復改稿的被動局面，而且話語權也越來越小。
總之，品牌思維是需要設計師格外關注的！
最后，我們再來回顧一下這個圖標三步品牌化這個方法！
第一步，融入品牌符號；第二步，注入品牌顏色；第三步，結合行業特征。
但愿今日份的分享對你有所幫助！
文章來源：人人都是產品經理 作者：Andrewchen
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
看到知乎上的一個問題：如何找到一家好的高端網站設計公司？
把回答的內容也轉過來記錄一下。
首先回答：何為高端？
高端與低端是對應的，目前網站設計，中低端基本是用模板改改，相對價格低，有一些小型公司或不依靠網站運營收入的公司，“有個網站就好”，所以可以用這種低投入，內容有就行的網站建設公司，特點是馬上就能用，三五天把內容發布進去就可以。備案可能需要一定時間。
高端設計公司，一般是量身定做，為企業做網站策劃、分析，按照用戶研究、網站建站的目的來進行網站的定制欄目頁的設計。做競品分析、研究對方的優缺點，設計的色系和企業標準色、情感表達、人物場景、用戶體驗思維，越深入，思考越成熟，做的網站品質越有保障。所以需要的時間、精力、投入相對多。
因為投入相對多，所以經營業績好的企業、集團公司、營銷類大型網站來定制的比較多。
我們公司“北京藍藍設計”就是為定制的高端企業用戶、政府網站、軟件公司來服務的。我們挺喜歡要求高的客戶，這樣能體現出專業設計的水平，這也是我們和其它建站公司區別開來的地方。
我們主要是給大型軟件公司平臺、系統做UE、交互設計、視覺設計，用戶體驗優化，這個，比網站設計更難，更專業。 往往一個公司的核心產品，值得把精力金錢投入到上面，產出最大的回報。近年來，除了做軟件UI，大屏大數據可視化項目外，我們也擴展了“愿意把公司網站做成核 心產品”這樣的公司成為合作伙伴，更好的為客戶提供全方位的服務。
一旦成為我們的客戶，設計無憂。
我們一定會把該做的事做好，并提供超值服務和額外附加值的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如今，很難用界面動畫給人留下深刻的印象甚至驚喜。它顯示了屏幕之間的交互，解釋了如何使用該應用程序，或者只是引起用戶的注意力。在瀏覽有關動畫的文章時，我發現幾乎所有的文章都只是描述了關于動畫的特定的用例或一般事實，并沒有遇到任何關于界面動畫通用規則的文章。在本文中我收集了界面動畫的主要原則和規則，以便給想要設計動畫界面的設計人員提供一些幫助。
當元素改變它們的狀態或位置時，動畫的持續時間應足夠慢，以使用戶可以注意到變化，但同時也要足夠快，以免引起等待。
在動畫中使用適當的持續時間，不要太快，更不要讓用戶過長等待
大量研究發現，界面動畫的最佳速度在200-500毫秒之間。這些數據是基于人類大腦的特殊性得出的。任何小于100毫秒的動畫都是瞬時的，根本不會被識別。而超過1秒的動畫時長會傳達延遲感，因此對用戶來說很無聊。
最好在界面中保留動畫的持續時間
在移動設備上，《材料設計指南》還建議將動畫的持續時間限制在200-300毫秒之間。至于Web端，持續時間應延長30％，大約為400-450毫秒。原因在于：屏幕尺寸越大，物體在改變位置時可以克服的路徑更長。因此，在可穿戴設備上，持續時間應縮短30％，大約為150-200ms，因為在較小的屏幕上，移動距離更短。
移動設備的大小會影響動畫的持續時間
Web動畫的處理方式有所不同，由于我們已經習慣了在瀏覽器中即時打開網頁，所以我們希望也能在不同狀態之間快速轉換。因此，Web轉換的持續時間應比移動設備短約2倍，150-200毫秒之間。在其他情況下，用戶將不可避免地認為計算機死機或網絡連接出現問題。
但是，如果你要在網站上創建裝飾性動畫或試圖吸引用戶對某些元素的關注，則無需考慮這些規則。在這些情況下，動畫可以更長一些。
大屏幕電腦=慢動畫？決不是！
需要記住的是，無論平臺如何，動畫的持續時間不僅取決于移動距離，還取決于對象的大小。更小的元素或帶有小變化的的動畫應該移動得更快。因此，大而復雜元素的動畫在持續時間稍長的時候看起來更好。
在相同大小的移動物體中，停下來的是經過最短距離的物體。與大物體相比，小物體移動得更慢，因為它們的偏移量更大。
動畫的持續時間取決于對象的大小和移動距離
當物體碰撞時，根據物理定律，碰撞的能量必須均勻分布在物體之間。因此，最好排除反彈效應，只在特殊情況下使用它才有意義。
避免使用彈跳效果，因為它會分散注意力
物體的運動應該是清晰和銳利的，所以不要使用運動模糊。即使在現代移動設備上也很難再現這種效果，并且根本不用于界面動畫中。
不要在動畫中使用模糊效果
列表項(新聞卡片、電子郵件列表等)在其出現之間應該有一個很短的延遲時間，每次出現的新元素應該持續20-25毫秒。元素出現較慢的話可能會惹惱用戶。
列表項的動畫應持續在20–25毫秒
緩和有助于使物體的運動更加自然，這是動畫的基本原則之一。這一點在《迪士尼動畫原則》(The Illusion of Life: Disney Animation)一書中得到了充分的描述，這本書是由兩位重要的迪士尼動畫師——奧利·約翰斯頓和弗蘭克·托馬斯所寫。
為了使動畫看起來不顯得機械和人造，物體應以一定的加速或減速的方式移動，就像物理世界中的所有活動對象一樣。
與線性動畫相比，具有緩動效果的動畫看起來更自然（這里提示下：注意看每段豎格的間距）
不受任何物理力影響的物體直線運動，換句話說就是勻速運動。正因為如此，它們看起來非常不自然，對人眼來說是人為的。
所有動畫應用程序都使用動畫曲線，我將嘗試解釋如何閱讀它們以及它們的含義。曲線顯示了物體的位置( y axis=position )在相同的時間間隔內物體的位置如何變化(x axis=time)。在當前情況下，運動是線性的，因此物體在同一時間行進相同的距離。
直線運動曲線
例如，直線運動只能在物體改變顏色或透明度時使用。一般來說，我們可以用它來表示物體不改變其位置的狀態。
我們可以在曲線上看到，在開始時物體的位置變化緩慢，而速度則逐漸增加，這意味著物體正在以一定的加速度移動。
加速度曲線
當物體以全速飛出屏幕消失時，應使用此曲線，比如說系統通知或者是界面卡片。但請記住，只有當對象永遠離開屏幕且我們無法調用或返回它們時，才應使用這種類型的曲線。
將卡片滑出屏幕的加速曲線
動畫曲線有助于表達正確的情緒。在下面的示例中，我們可以看到所有物體的移動持續時間和距離是相同的，但是即使曲線上的微小變化也可以影響動畫的氣氛。當然，通過改變曲線，你可以使物體盡可能地接近于真實世界。
持續時間和距離相同，但卻是不同的氛圍
它與緩入曲線相反，因此物體會快速覆蓋很長一段距離，然后緩慢的降低速度，直到最終停止。
減速曲線
當元素出現在屏幕上時應使用這種類型的曲線——它以全速向上飛入屏幕中，然后逐漸減速直到完全停止，這也可以應用于從屏幕外部出現的其他卡片或對象。
減速曲線，使動畫更好地呈現
該曲線使物體在開始時獲得速度，然后慢慢地將速度降回零。這種類型的移動是界面動畫中最常用的。當你猶豫在動畫中使用哪種類型的運動時，可以使用標準曲線。
標準曲線
根據《材料設計指南》，最好使用非對稱曲線，使移動看起來更加自然和真實。曲線的末端必須比它的開始更加突出，以使加速的持續時間短于減速的持續時間。在這種情況下，用戶將更加關注元素的最終移動，從而關注元素的新狀態。
查看對稱和非對稱標準曲線之間的區別
當對象從屏幕的一部分移至另一部分時，使用緩入緩出功能。在這種情況下，動畫避免了引人注目的戲劇效果。
卡片在屏幕上的移動以及相應的不對稱曲線
當元素從屏幕上消失時，應該使用相同的移動類型，但用戶可以在任何時候將其返回到先前的位置。它涉及抽屜式導航等。
抽屜式導航從屏幕上隱藏了標準曲線
從這些例子中可以看出，許多初學者忽略了一個基本的規律——開始動畫并不等于結束動畫。與抽屜式導航一樣，它以減速度曲線出現，而以標準曲線消失。另外，根據谷歌的材料設計語言，物體出現的時間應該更長，以吸引更多的關注。
側面菜單的出現和消失，分別通過減速度和標準曲線實現
使用函數cubic-bezier()來描述曲線。之所以稱為立方，是因為它基于四個點。在圖上已經定義了具有坐標的第一個點0;0（左下）和具有坐標的最后一個點1;1（右上）。
基于此，我們僅需描述圖形上的兩個點，這些點由函數的四個參數給出cubic-bezier()：前兩個是坐標x和y第一個點，后兩個是坐標x和y第二個點。
為了簡化曲線的工作，建議使用easings.net和cubic-bezier.com網站。第一個包含最常用曲線的列表，你可以將其參數復制到原型工具中。第二個來源使你可以使用曲線的不同參數，并立即查看到物體將是如何移動的。
函數三次貝塞爾曲線的不同類型的曲線及其參數
就像在芭蕾舞蹈設計中一樣，主要思想是在從一種狀態轉換為另一種狀態的過程中，引導用戶注意一個流動的方向上。舞蹈編排有兩種類型——平等交互和從屬交互。
平等交互意味著所有對象的外觀都遵循一個特定的規則。在這種情況下，所有卡片的外觀都被視為一種流程，可以引導用戶的注意力集中在一個方向上，即從上到下。如果我們不按照順序，那么用戶的注意力將會分散。所有元素同時出現看起來也會很糟糕。
用戶的注意力應引導在一個流動的方向上
對于表格視圖，它有點復雜。在這里，用戶的焦點應指向對角線，所以逐個地顯示元素是一個很糟糕的主意。單個展示元素會使動畫過長，并且用戶的注意力會呈鋸齒狀，這是錯誤的。
卡片形式的對角線外觀
從屬交互意味著我們要有一個吸引用戶注意力的中心對象，而所有其他元素都從屬于它。這種類型的動畫給人一種有序的感覺，從而引起用戶對主要內容的更多關注。
在其他情況下，用戶將很難知道該關注哪個對象，因此他的注意力將被分散。所以，如果有多個要設置動畫的元素，則需要明確它們的運動順序，并盡可能將動畫設置為最小的對象。
只有一個中心對象的動畫很有必要，其余元素應是被引導的。否則，用戶將不知道關注什么對象
根據材料設計語言，當移動的物體尺寸發生不均衡變化時，它們應沿著弧線而不是直線移動。這有助于使動作更自然。“不成比例”是指物體的高度和寬度的增加/減少是不對稱的，即以不同的速度進行(例如，一個正方形的卡片變成了一個長方形)。
當移動的物體不按原有比例變化時，應沿著弧線運動
當物體按比例改變其大小時，使用沿直線的移動。由于這種移動的實現比較容易，因此通常會忽略不成比例的圓弧移動的規則。看看實際應用的例子，你會看到線性運動的主導地位。
尺寸的比例變化是沿著直線上運動的
曲線上的運動可以通過兩種方式實現：第一種稱為垂直向外——物體開始水平移動并以垂直移動結束；第二種是水平向外——物體開始垂直移動并以水平運動結束。
物體沿曲線的移動路徑必須與滾動界面的主軸線重合。例如，在下一張圖片上，我們可以上下滾動界面，相應的卡片以“垂直輸出”的方式展開-首先從右到下，然后向下。反向移動以相反的方式進行-即卡片首先垂直上升，最后水平移動。
卡片的展開/折疊方向應與界面的軸線一致
如果移動物體的路徑彼此相交，則它們將無法彼此移動。這些物體應通過減慢或加快自身的速度，為另一個物體的移動留下足夠的空間。另一種選擇-他們只是推開其他物體。為什么？因為我們假設界面中的所有物體都位于一個平面中。
在移動過程中，物體之間不應相互穿過，而應為另一個物體的移動留下空間
另一種情況，移動物體可以高于其他物體。但也不能通過其他物體消失或移動。為什么？因為我們相信界面元素的行為符合物理定律，現實世界中沒有任何固體物體能夠做到這一點。
物體可以超越其他物體，然后移動
從以上總結的規則和原則能明白，UX界面動畫是反映物理世界中存在的運動，如摩擦、加速等，模仿現實世界存在的行為。我們可以創建一個序列，讓用戶能夠理解期望從界面得到什么。如果動畫是正確構建的，那么它不會太引人注目，并且不會分散用戶的目標，動畫不應該影響用戶使用或完成任務。
但是不要忘記動畫更多的是一種藝術而不是科學，所以最好的方法是在用戶身上試驗和測試你的決定。
文章來源：站酷 作者：UX辭典
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖表是數據可視化的常用表現形式，是對數據的二次加工，可以幫助我們理解數據、洞悉數據背后的真相，讓我們更好地適應這個數據驅動的世界。無論在工作匯報、產品設計、后臺設計以及數據大屏中都能看到它的身影。然而，在實際工作中我發現很多初入行的設計師對于圖表設計并不是很了解，同時市面上對于這方面的資料相對零散，不成體系。所以我結合了平時工作中的理解，梳理了這篇文章，希望能幫助到大家。
當我們把圖表的結構進行拆解后，就會發現一個圖表是由很多個細小構件組成的，這些構件有自己的名字和用途，分別是標題、軸、圖形、圖例、標簽、提示信息。在平常使用的過程中，會根據場景去修飾刪減一些構件元素，以此來減少冗余信息，用最適量的數據墨水比（Data-ink Ratio），幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
標題 - 描述圖表的主題（包含主標題和副標題）
標簽 - 對當前這一組數據進行的內容標注
軸 - 用來定義坐標系中數據在方向和值的映射關系
圖例 - 對圖形本身的概括
提示信息 - 當tap或者hover的時候，以交互提示信息的形式展示該點的數據詳情
圖形 - 統計圖表的視覺通道在形狀上映射的視覺展現
接下來，我會一點一點地為大家講解它們，方便大家合理的使用它們。但在此之前，我們先來了解一個知識點 - 數據墨水比，以便更好的理解接下來的內容。
數據墨水比——"data-ink ratio"，是1983年視覺大師愛德華·塔夫特（Edward Tufte）在《The Visual Display of Quantitative Information》中提出的一個概念：一幅圖表的絕大部分筆墨應該用于展示數據信息，數據變化則筆墨也變化。他將數據油墨比定義為圖表中用于數據的墨水量除以總油墨量。其中數據墨水指的是圖表中不可刪除的核心內容。比如，我可以刪除圖例、刪除坐標軸、刪除網格線，這可能不會影響你從圖表中讀取相關的信息。但如果我刪除柱形圖、餅圖這些圖表的主體元素，那么圖表就失去所要表達的內容了。
我個人更喜歡用“信噪比”= 信號/(信號+噪音) 這個概念去理解，因為通過可視化傳達的信息不僅僅是數據，還有業務洞察，像觀點、結論性的信息往往需要用文字來呈現的也是至關重要。不過無論使用哪個詞，最終的目的都是突出傳達“信息”部分，去除那些干擾的“噪音”。
因此，圖表中的數據墨水占比越多，那么該圖表的冗余信息就越少，信息傳遞效果就越好。所以，在創建圖表和圖形時，我們的目標應該是在合理范圍內最大化數據墨水比。
一個明確、相符的標題可以迅速讓讀者理解圖表要表達的內容。通常圖表的標題是根據圖表所需要表達的內容決定的，大多數小伙伴可能認為命名沒有太多問題。但當這個圖表的結論是單一且唯一的時候，建議在概括圖表內容的標題中加入結論性的信息點。這樣能減少讀者誤解你的意圖的可能，而且能夠確保他們將注意力集中于你想著重強調的數據上 。
軸是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。換句話說，軸的功能像是把可視化對象置于共同的基準上，再以標尺進行數值量測。在數據可視化中，一般存在于笛卡爾坐標系（直角坐標系）和極坐標系中。對軸進行「原子」要素的拆分，我們可以得到以下幾種元素，分別為：軸線、軸刻度線、軸標簽、軸標題（單位）以及網格線。
根據對應變量是連續數據還是離散數據，軸可以分為：分類軸，時間軸，連續軸。
軸線一般只考慮是否顯示，結合上面所講的數據墨水比，在有網格線的情況下，柱狀圖/折線圖會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。
軸刻度線是軸線上的小線段， 可以提供數值標簽在坐標軸上的明確位置。軸刻度線有3種類型，分別為：置內、置中（即交叉方式）、置外。但刻度應置于數值坐標軸外側， 不建議刻度采用置中或置內方式顯示。
軸刻度線的使用就是加強映射關系，快速的對應到數據點。分類軸較多出現在柱狀、條形中，對于映射有天然的對應關系，故在分類軸中習慣隱藏軸上的刻度線。
網格線是用來輔助圖表優化映射關系的。使用網格線可以增加數據的可閱讀性，網格線提供了兩種功能：一是延伸數值刻度至可視化對象中，以便觀察數據值之大??；二是增加可視化對象之間的比較基礎 ，利于比較。
網格線一般跟隨值域軸的位置單向顯示，柱狀圖采用水平網格，條形圖采用垂直網格。在使用網格線時，應該注意遵從主次原則，以軸線為主，網格線為輔，樣式上可采用實線或者虛線。避免顏色過重，不要使用純黑或者純白，在視覺層級上不能搶了圖表中的信息。
軸標題（單位）主要用于說明定義域軸、值域軸的數據含義。當可視化圖表的其他部分內容（標題、圖例、軸標簽等）已經能充分表達數據含義，根據奧卡姆剃刀定律，可以略去軸標題，近一步增大數據油墨比，精簡畫面元素。
軸標簽的設計較為復雜，涉及到的細節點比較多。這里將圍繞直角坐標系的X軸和Y軸這兩個方向進行討論。
x 軸標簽的設計重點在顯示規則上，在可視化圖表設計中，我們常常會碰到軸標簽內容過長的情況，當空間有限時，軸標簽會重疊在一起。如何處理此類問題，這里根據軸的不同類型給了對應的解決方案 。
在連續軸和時間軸中，我們可以利用抽樣顯示的手段來優化軸標簽重疊的問題。這里不推薦使用旋轉來縮減寬度。一方面從美觀度上，旋轉可能會破壞界面整體協調。另一方面，連續/時間軸并不需要顯示所有的軸標簽，參考格式塔中的[連續性原理]，盡管軸標簽未能完全展示，但用戶會在腦海中把缺失的部分補齊，軸標簽仍然會像連續著的一樣。
在分類軸中，由于標簽與標簽之間并沒有緊密的邏輯關聯關系。若采用抽樣規則，隱藏了一些標簽，則加大了用戶對圖表信息的提取難度，這是我們不想看到的。對于分類軸，這里建議通過標簽旋轉或轉換成其他圖表（條形圖）來縮減寬度。
y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度自適應縮放。如果數組是固定的，就寫成固定寬度，節省圖表計算量，提高渲染速度。
軸標簽的數量不建議過多，太多的標簽必定導致橫向網格線變多，造成元素冗余，干擾圖形信息表達。根據 7±2 法則，Y軸標簽數量應盡量控制在這個范圍內。
一般來說，y 軸標簽的取值應從 0 基線開始，以恰當反映數值。展示被截斷的數據可能會誤導用戶做出錯誤的判斷。比如數據本身沒有那么起伏變化，處理上下限的顆粒度，把刻度拉長，一樣能顯得“長勢喜人”。
從上面就能明白，在看圖表的時候千萬不要被表面給欺騙，僅僅觀看柱狀圖的高低趨勢往往不能得出正確結論，需要注意坐標軸起始位置有沒有被人做過虛假處理。
但存在是有根源的，對于此類的取值方式不做過多評價。這里主要想講一下我常用的取值方式：對于Y軸的上限即最大值根據實際數據進行動態計算。比如一排數字中最大的為1190，那么軸標簽最高位為1200；一排數字中最大的是1210，那么軸標簽最高位為1400。其中的1400和2100是根據軸上的分段數決定的。
但有些人對Y軸標簽的取值給出了如下建議：在折線圖中，取值一般保證圖形約占繪圖區域的2/3，或者將柱狀的高度控制在圖表高度的85%左右。
但我認為這種方式太刻意了，并且規則定制的比較細。但是得承認這樣子確認會顯的好看，做案例可以，做真實數據不行。因為考慮到實際數據有的時候會出現極限情況，比如有些特別大有些特別小，為了保證用戶能從圖表中準確地獲取信息，不應該為了美感而破壞了它的真實性。因此并不推薦用這種方式來取值。
關于Y軸標簽的數據格式，這里重點講一些比較容易忽視的設計細節。第一，標簽保留的小數位數保持統一，不要因為某些軸標簽是整數值，就略去小數點。
第二，正負向的 y 軸標簽，由于負值帶“-”符號，整個 y 軸看起來會有視覺偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負向 y 軸給正值標簽帶上“+”，以達到視覺平衡的效果。
圖例是對圖形本身的概括，在圖表元素中屬于輔助內容。它提供讀者以對照的方式來理解可視化對象的項目歸類。由映射圖形形狀和文本組成。
根據數據類型不同，分為連續型圖例和分類型圖例；根據狀態不同，圖例可以被設置為靜態或可交互態。
正如，倫斯勒理工學院的行為經濟學家高拉夫杰恩(Gaurav Jain)所說：“數字有一種語言的力量，能給予人一種特殊的感覺。當我們使用具體的整數數字時，人的衡量會減少。這種行為沒有明顯的原因。”
當人們的大腦在處理不以零結尾的不規則數字時，需要更多的腦力來處理，加大了獲取信息的難度。因此在使用數字時，應該考慮這種偏好，傾向于一些取整的數字。同樣的，這不僅僅適用于圖例中的數字，同樣適用于坐標軸上下限的數字。
帶有連續性的傾向于使用水平圖例，因為更符合人們的閱讀習慣；帶有分類屬性的傾向于使用豎直圖例，圖例的右邊可放置更長的文本。
默認把圖例放在左上角去做一個通用的方案看起來沒毛病。但考慮到人的視覺動線是從上至下，從左到右。這里有一個更好的做法：縮短用戶對照圖例看圖形的本能路徑，可以提升對信息的獲取效率。如下圖所示：
當我們在制作多折線圖時，經常會出現個數據系列之間相互交錯的情形，并使得各種數據標記與之前的出現順序不一致，即與圖例排列順序不同。因此用戶的眼睛必須在圖例與折線之間進行連連看，最佳的做法是采用跟隨圖例形式，去標識出折線所屬于的維值信息，這樣會更直觀有效。
在圖表中，標簽是對當前的一組數據進行的內容標注。包括數據點、拉線、文本數值等元素，根據不同的圖表類型選擇使用。
在繪制的圖表的時候，我們傾向將標簽直接打在圖形外，但在「堆疊類」圖表中，標簽會顯示在圖形內。這樣做會有個后果，標簽的文本和圖形經常需要交疊展示，所以可讀性需要足夠良好，所以通過對 HS 值的判斷，決定文字的顏色是否需要反思。這樣對比度就在可控范圍內，不會出現可讀性的問題。有時，還需要增加描邊，讓標簽更清晰。
當數據特別多并且密的時候會造成全部標簽擠在一起的情況。在標簽重疊時，采用動態計算的抽樣顯示方式，自動隱藏其中一個，同時當 Hover 圖表時，顯示被隱藏的對應的數據。這樣保證了圖表的清晰度，也保證了信息的完整性。
提示信息一般是tap或者hover的時候，圖表以交互的方式吐出該位置的數據，幫助用戶更深入的了解數據。一般由視覺標記圖形，文本標簽，數值標記這3中元素構成。
提示信息的展現形式由4種。按不同的圖表類型，分為懸浮、固定位置、固定在軸上、固定在圖形上。
人類從圖形中獲取信息的效率遠高于文本，可以說如今人類早已進入了讀圖時代。圖形是統計圖表的視覺通道在形狀上映射的視覺展現，是圖表的必備元素，承載著數據背后蘊含的信息。按照組件原子化的思路來定義現在千奇百怪的圖表，大致可以分為六種基礎樣式：折線，面積，散點，氣泡，餅/環，柱形，條形。
這里主要想重點講一下，如何通過設計來強化圖表信息的表達，以便簡化用戶獲取信息的成本。關于具體某個圖表的制作規范和運用場景，會在之后的文章中提及。
通過明暗對比、顏色對比以及色彩對比等手段可以有效的區分信息，在視覺層級上也是明顯的處理了視覺噪音，便于用戶區分信息。
通過添加標注，人為去干預信息的表達，多用于一前一后的標識，便于用戶識別信息。
我們做數據分析的有句話叫“一圖勝千言”，圖表是展現數據的一種重要展現形式，選對了圖表就能幫助我們更加快速、直觀的傳達數據信息。
那如何挑選合適的圖表呢？在我看來大致分為三步：
1. 確定核心內容：明確要用圖表傳達的核心信息；
2.判斷比較關系：判斷數據之間的比較類型（如占比、數量、趨勢等）；
3.選擇圖表類型：選擇對應含義的圖表（如餅圖、柱狀圖、折線圖等）。
很多朋友在判定和選擇圖表類型時會不知所措，但其實你只需要記住一句話：決定圖表形式的不是數據，而是你要傳達的信息。
同一組數據用不同的角度看，有不同的主題，比如下面這組數據：
從另一個角度看同樣是5月份的數據，你還可能會將側重點放在每個產品占銷售額的百分比上。那你的圖表主題應該是“5月份，產品 A 占公司產品總銷售額的比例位居首位”。
綜上所述，選擇合適圖表的關鍵，最初也是最重要的，就是明確要用圖表傳達的核心信息。
在實際工作中需要用圖表反映數據的場景五花八門，但按數據關系分類無非以下幾種情況，給大家簡單舉幾個例子：
“預計在今后 10 年多的時間里，銷售額將增長 ”對應的關系為時間趨勢；
“雇員的最高工資額在 30000 到 35000 美元之間 ”對應的關系為頻率分布；
“汽油并不是牌子越響價格越高其性能就越好”對應的關系為相關性；
“9 月份里，6 個區域的營業額大致相同”對應的關系為排名對比；
“銷售部經理在他的領域內只花費了他 15% 的時間”對應的關系為占比。
國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示，但其實結合我自己的經驗，考慮到日常企業的數據分析場景，圖中有些圖表使用頻率是非常低的。
所以我在此基礎上結合自己多年的經驗，總結出了常用商務圖表的選擇指南，總體我認為這是會更適合商務圖表展示，而且會更接地氣，適合大家參考使用。
折線圖是通過線條的波動（上升或下降）來顯示連續數據隨時間或有序類別變化的圖表，常用于反映數據隨著時間推移而產生的變化趨勢。
橫軸為連續類別（如時間）且注重變化趨勢、預測，適用于折線圖。
舉個例子：比如想看2020年上半年商品的營業額情況，并對走勢做一個分析。由于每個月份的商品營業額相關的，它們代表一種數據在不同時間下的數據值，因此我們可以用折線圖將它們連接起來。
但如果想看2020年上半年北京、上海、廣州、深圳四個省份的營業額情況，由于每個省份的營業額是不相關的，所以我們不能隨便用折線圖來替代柱狀圖。
如果折線圖上下浮動過于劇烈，那么可以嘗試拉長時間間隔，比如不每天采樣而以周為單位來采樣。用戶不太原因去閱讀鋸齒狀的線條，或者說他們不會喜歡這樣的圖表。
但是如果有強需求說是一定要在某個范圍，這條略過。
當有些特定的數值特別重要時，我們可以在線條上標注出他們，但全部標清數據點在大多數情況下標記出來的意義不大，從視覺上來看會顯得非常瑣碎。
若對比數據較多，為了避免信息繁雜?？刹捎脤嵕€的強弱和色彩的對比來區分主次內容，讓用戶更關注在主折線，獲取主數據的波動感知。
折線圖：更關注于點的數據，相對短的一段時間數據隨時間變化的趨勢；
曲線圖：更關注點構成的線點數據，一段時間內整體數據隨時間變化的趨勢。
曲線圖是折線圖中的一種，當圖表數據點過于密集時，使用曲線圖更能表達數據隨時間變化的趨勢、周期性。
面積圖又叫區域圖，是一種隨有序變量的變化，反映數值變化的統計圖表，原理與折線圖相似。它在折線圖的基礎上多了一個面積概念，填充的區域可以表示“累積”的含義（當X軸為連續的數值時）。
當注重隨時間的趨勢變化和累計的值時，適用于面積圖。
例如：想要查看今年10月和去年10月每日的商品營業額走勢，并對整月營業額進行比較，這時就可以采用面積圖。但當自變量不是順序性的變量，則不適合用面積圖。
透明度可以很好的幫助使用者觀察不同序列之間的重疊關系，沒有透明度的面積會導致不同序列之間相互遮蓋減少可以被觀察到的信息。
當數據值相距很遠時，區域是模糊不清的，此時不太適合使用面積圖展示。
如下方示例雖然仔細分析能確定只展示了兩個類別，乍一看，很可能會誤以為圖表上顯示三種不同的顏色，但使用分組柱狀圖就可以很好解決這個問題。
面積圖只適合展現少量的數據，最多建議不要超過四個類別，否則就會導致非常難以識別。因此在多個類別下，要盡量避免使用面積圖，采用相似圖表來表示，比如折線圖。
堆疊面積圖與面積圖類似，都是在折線圖的基礎上，將折線與自變量坐標軸之間區域填充起來的統計圖表。
唯一的區別是堆疊面積圖有多個數據系列，它們一層層的堆疊起來，每個數據系列的起始點是上一個數據系列的結束點。
適用于觀察多變量隨時間的變化情況，且既能看到整體趨勢又能看到各變量的構成情況。
為了保證數據傳遞的準確性，在適用堆疊面積圖時，盡量不要對Y軸進行裁剪。
當數據系列過多時，往往造成難以觀察，所以建議使用堆疊面積圖時數據系列最好不要超過7個。
建議堆疊面積圖中把變化量較大的數據放在上方，變化量較小的數據放在下方會獲得更加的展示效果。
堆積面積圖要展示部分和整體之間的關系，所以不能用于包含負值的數據的展示。
柱狀圖，是一種使用矩形條，對不同類別進行數值比較的統計圖表。使用垂直或水平的柱子的長短對比數值大小，其中一個軸表示需要對比的分類維度；另一個軸代表相應的數值。
在柱狀圖上，分類變量的每個實體都被表示為一個矩形（通俗講即為“柱子”），而數值則決定了柱子的高度?？v向柱狀圖的柱是垂直方向的，如圖：
橫向柱狀圖的柱是水平方向的，又稱條形圖，如圖：
柱狀圖最適合對分類的數據進行比較，尤其是當數值比較接近時，由于人眼對于高度的感知優于其他視覺元素（如面積、角度等），因此使用柱狀圖更加合適。
如下圖所示，5組數據的數值很接近，若采用餅圖，這無法直觀的進行比較，右邊的柱狀圖則能更好地傳遞圖表信息。
當柱子太窄時，用戶的視覺可能會集中在兩個柱中間的負空間，而這里是不承載任何數據的。寬度推薦使用在1/2 柱寬到 1 柱寬之間，但也要視情況而定。
保證柱形圖有的圓角，以確保柱形頂部測量柱形的長度；全圓角則有可能歪曲可視化圖表的表達。
柱形圖一般比較一組分類數據，柱子的高低已經傳遞了相關信息，不必通過顏色來區分，所以建議使用相同的顏色或同一顏色的不同色調，過多的顏色會增加理解成本。
如果需要強調某個數據時，可以使用對比色或者變化色調來突出顯示有意義的數據點。
對多個數據系列排序時，如果不涉及到日期等特定數據，最好能符合一定的邏輯用直觀的方式引導用戶更好的查看數據。
可以通過升序或降序排布，例如按照數量從多到少來對數據進行排序，也可以按照字母順序等來排布。總之，按照邏輯排序可以一定程度上引導人們更好地閱讀數據。
條形圖還可以通過省略橫軸和縱軸，并直接在柱子上表明數值，來降低數據墨水比，進一步提高信息的獲取效率。
堆疊柱狀圖（Stacked Column Chart），又稱堆疊柱形圖，是一種用來分解整體、比較各部分的圖表。
它是柱狀圖的擴展，不同的是，柱狀圖的數據值為并行排列，堆疊柱圖則是一個個疊加起來的。它可以展示每一個分類的總量，以及該分類包含的每個小分類的大小及占比，并且這些子類別一般用不同的顏色來指代。
對比不同類別數據的數值大小，同時對比每一類別數據中，子類別的構成及大小。
例如下圖顯示的是每種化妝品在各個產品的銷售情況，通過堆疊柱狀圖，我們可以很清晰低對比同一種化妝品到底在哪個城市銷量更好。
堆疊柱狀圖最好的展示效果是每個組只包含兩到三個類別，最多不要超過6個，因為太多的數據系列會很容易讓人眼花繚亂， 如下圖：
堆疊條狀圖的數值建議在圖形之間，居中對齊，在圖形左側容易產生誤解。
由于要分析部分數據在整體中的占比，避免用堆疊柱狀圖展示包含負數的數據。因為柱子的高度必須為正數，有負數則無法直觀顯示在圖上。
大多數的堆疊柱狀圖都是垂直繪制的，但是如果你的數據標簽特別長時，考慮更好地展示效果，可以選擇使用水平堆疊的方式。
分組柱狀圖，又叫聚集柱狀圖。跟柱狀圖類似，使用柱子的長短來映射和對比數據值。每個分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區別各個分類，各個分組之間需要保持間隔。
對比不同分組內相同分類的大小，對比相同分組內不同分類的大小。其中，分組個數不要超過 12 個，每個分組下的分類不要超過 6 個。
分組柱狀圖適合比較多組數值差異不大的數據，比如，對于要同時查看一個數值和百分比的時間趨勢，雙軸圖就派上大用場了。
為了瀏覽起來更直觀，建議用柱圖來表示數值類數據，用線圖來表示百分比。
分組柱狀圖強調組的概念，組是一個個重復單元。按照格式塔原理，每兩個分組之間的間距要大于組內不同系列之間的間距，以免造成視覺上錯誤的歸類和區分。
雙向柱狀圖是使用正向和反向的柱子顯示類別之間的數值比較，其中分類軸表示需要對比的分類維度，連續軸代表相應的數值，分為兩種情況，一種是正向刻度值與反向刻度值完全對稱；另一種是正向刻度值與反向刻度值反向對稱，即互為相反數。
同樣的，可分為垂直方和水平兩個方向，其中水平雙向柱狀圖又叫正負條形圖。
雙向柱狀圖一般用于正負兩份相反數據的對比，例如一周內個人收入和支出的統計，其中收入為正數，支出為負數。
使用雙向柱狀圖可以很明確的對收入和支出做出對比，并能從單個系列中分析收入和支出的數值及波動。
雙向柱狀圖多用于展示含相反含義的數據，因此要避免不具有正負含義的數據使用而造成的誤解。
如下圖人口統計圖表中使用雙向柱狀圖一邊繪制男性一邊繪制女性，只是單純的兩類不同數據的對比，并不存在負數。這種情況將兩個數據序列繪制成一個分組柱狀圖是更合適的。
向柱狀圖正向和負向的數據具有對比性，因此一般選用差值較大的具有對比性的顏色，保證的獲取有效的信息。
餅圖，或稱餅狀圖，是一個劃分為幾個扇形的圓形統計圖表。在餅圖中，每個扇形的弧長（以及圓心角和面積）大小，表示該種類占總體的比例，且這些扇形合在一起剛好是一個完全的圓形。
餅圖主要用于展現不同類別數值相對于總數的占比情況，尤其是想要突出表示某個部分在整體中所占比例，且該部分所占比例達到總體的25%或50%時，很適合用餅圖。
餅圖不適用于多分類的數據，因為隨著分類的增多，每個切片的面積變小，視覺區分度隨之降低。
當數據類別較多時，我們可以把較小或不重要的數據合并成第五個模塊命名為”其它”。如果一定要保證數據的完整性和準確性，此時選擇柱狀圖或堆積柱狀圖或許更合適。
由于人類對“角度”的感知力并不如“長度”，在需要準確的表達數值（尤其是當數值接近、或數值很多）時，餅圖常常不能勝任，因此當各類別數據占比較接近時（如下左圖），我們很難對比出每個類別占比的大小。
此時建議選用柱狀圖或南丁格爾玫瑰圖（如下右圖）來獲取更好的展示效果。
大多數人視覺習慣是按照順時針和自上而下的順序去觀察。因此在繪制餅圖時，建議從12點鐘開始沿順時針右邊第一個分塊繪制餅圖最大的數據分塊，有效的強調其重要性。
其余的數據分塊有兩種建議：一種是按照數據大小依次順時針排列；另一種在12點鐘的左邊繪制第二大的分塊，其余的分塊按照逆時針排列，最小的分塊放在底部。
讓用戶的視線焦點集中在上半部分，增強獲取信息的速度。
環形圖，又叫做甜甜圈圖，是由兩個及兩個以上大小不一的餅圖疊在一起，挖去中間的部分所構成的圖形。
適用于展示分類的占比情況，與餅圖用法相似，但環圖相對于餅圖空間的利用率更高，比如我們可以使用它的空心區域顯示文本信息，比如標題等。
關于環圖不適用分類過多的場景，否則閱讀會將很差（如下圖）。
可行的辦法：一是將一些不重要的變量合并為“其他”，避免扇區超過5個；二是改用條形圖或者表格。尤其是，如果你想讓讀者清楚的閱讀到每一條數據，選用表格會更加直截了當。
下圖中游戲公司的不同種類的游戲的銷售量相近，所以不太適合使用環圖，此時可以使用柱狀圖。
南丁格爾玫瑰圖又名雞冠花圖、極坐標區域圖，盡管外形很像餅圖，但它是用半徑來反映數值大小的（而餅圖是以扇形的弧度來表示數據的）。
對比不同分類的大小，且各分類值差異不是太大時。由于半徑和面積之間是平方的關系，視覺上，南丁格爾玫瑰圖會將數據的比例夸大。
如下圖展示一個班級男女同學的個數，這種場景下，使用餅圖或者環形圖比用南丁格爾玫瑰圖更合適。
南丁格爾玫瑰圖是將數值映射到半徑上，而扇形的面積和半徑是平方關系，因此視覺上看，數值的差異會被擴大。
因此，當數值差異較大、或者希望的比較數值大小時，推薦使用柱狀圖。
下面使用南丁格爾玫瑰圖展示各個省份的人口數據，這種場景下使用玫瑰圖不合適，原因是在玫瑰圖中數值過小的分類會非常難以觀察，推薦使用條形圖（橫向柱狀圖）。
散點圖，又名點圖、散布圖、X-Y圖，它是將所有的數據以點的形式展現在平面直角坐標系上的統計圖表。它至少需要兩個不同變量，一個沿x軸繪制，另一個沿y軸繪制，每個點在X、Y軸上都有一個確定的位置。
散點圖適用于分析變量之間是否存在某種關系或相關性。其中，相關性包含正相關（兩個變量值同時增加）、負相關（一個變量值增加另一個變量值下降）、不相關、線性相關、指數相關、U形相關等。
在觀察兩個變量之間的關系時，趨勢線是非常有用的，趨勢線的形狀走向解釋了兩個變量之間的關系類型，還可以用來預測未來的值。但需要注意的是趨勢線最可只能使用兩條，以免干擾正常的數據的閱讀。
散點圖只有有足夠多的數據點，并且數據之間有相關性時才能呈現很好的結果。如果一份數據只有極少的信息或者數據間沒有相關性，那么繪制一個很空的散點圖和不相關的散點圖都是沒有意義的。
如果數據包含不同系列，可以給不同系列使用不同的顏色，例如藍色代表男性，紅色代表女性，并增加圖例標注出藍色代表的含義。
幫助用戶快速獲取相關信息。但要注意，要避免數據分類過多的情況，過多的數據分類，會導致無法快速識別，失去可視化的意義和價值。
氣泡圖是顯示變量之間相關性的一種圖表，由笛卡爾坐標系（直角坐標系）和大小不一的圓組成，可以看作是散點圖的變形。
與散點圖不同的是，氣泡圖是一個多變量圖，它增加了第三個數值即氣泡大小的變量，在氣泡圖中，較大的氣泡表示較大的值。可以通過氣泡的位置分布和大小比例，來分析數據的規律。
一般而言，氣泡圖需要3個變量，其中2個決定了氣泡在笛卡爾坐標系中的位置（即x，y軸上的值），另外一個則通過氣泡的大小來表示。
當然，氣泡圖也可以容納更多維的數據，例如用第4個變量決定氣泡的顏色、透明度等。
特殊地，氣泡圖也可以用于二維數據，即y軸和氣泡大小使用同一維度的數據（y軸和氣泡大小的雙視覺編碼）。
這種情況下，相比于柱狀圖它能達到更美觀的目的。例如，下圖表示了2014年每個季度的銷售額。x軸代表時間，y軸和氣泡大小代表了銷售業績。
繪制氣泡圖時，需注意氣泡的大小是映射到面積而不是半徑或者直徑繪制的。
以下圖為例，如果兩個數值是1：2的關系，如果按照半徑1：2來繪制，那么實際的圓面積，將會是1：4的比例，這就夸大了數據之間的差異。
雷達又叫戴布拉圖、蜘蛛網圖。它是一種顯示多變量數據的圖形方法。通常從同一中心點開始等角度間隔地射出三個以上的軸，每個軸代表一個定量變量，各軸上的點依次連接成線或幾何圖形。
每個變量都有一個從中心向外發射的軸線，所有的軸之間的夾角相等，同時每個軸有相同的刻度，將軸到軸的刻度用網格線鏈接作為輔助元素，連接每個變量在其各自的軸線的數據點成一條多邊形。
雷達圖對于查看哪些變量具有相似的值、變量之間是否有異常值都很有用。雷達圖表也可用于查看哪些變量在數據集內得分較高或較低，因此非常適合顯示性能（見下圖）。
同樣，雷達圖也常用于排名、評估、評論等數據的展示。
一個雷達圖包含的多邊形數量是有限的，如果有五個以上要評估的事物，無論是輪廓還是填充區域，都會產生覆蓋和混亂，使得數據難以閱讀。
如果變量過多，也會造成可讀性下降，因為一個變量對應一個坐標軸，這樣會使坐標軸過于密集，使圖表給人感覺很復雜，所以最佳實踐就是盡可能控制變量的數量使雷達圖保持簡單清晰。
漏斗圖，形如“漏斗”，在開始和結束之間由N個流程環節組成。
漏斗圖總是起始于100%的數量，并在各個環節依次減少，每個環節用一個梯形來表示，整體形如漏斗。與餅圖一樣，漏斗圖呈現的也不是具體的數據，而是該數據相對于總數的占比、漏斗圖不需要使用任何數據軸。
漏斗圖適用于業務流程比較規范、周期長、環節多的單流程單向分析，通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節，進而做出決策。
其中，數據是要有序的，彼此之間有邏輯上的順序關系，階段最好大于3個。
漏斗圖不適合沒有邏輯關系的數據，換句話說，如果數據不構成“流程”，那么不能使用漏斗圖。例如，想要展示不同游戲類型的銷量對比，用漏斗圖就是不合適的。
漏斗圖作為一種統計圖表，漏斗圖的“長相”，本質上是由數據決定的。在傳達數據時，漏斗圖是通過“面積”表示的，對于人眼來說，面積的識別本來就不太容易。
如果我們在制作漏斗圖時，再人為的改變漏斗中每一個梯形的高度，那么識別起來就十分困難。以下圖為例，抹掉數字后，你幾乎不可能知道第一層是第二層的三倍。
以上就是本篇文章的全部內容，關于可視化相關的知識還有很多沒有涉及到，例如可視化圖表的配色、商務儀表盤、以及其他的圖表運用場景等等都還未講到。以后有時間慢慢整理分享給大家，謝謝閱讀！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文將針對酷家樂旗下云端建模工具——酷大師所做的可用性測試，說明工具型產品如何去做可用性測試。
打造一款產品的過程中，我們需要時刻保持警惕：功能是否滿足用戶核心需求？交互流程能否做到簡單流暢？是否還有未知領域可以由用戶帶來啟發？進行一次準備充分的可用性測試，無疑是解答上述問題快捷有效的方式。
下面我將結合本次針對酷家樂旗下云端建模工具——酷大師所做的可用性測試，說明工具型產品如何去做可用性測試。
測試目的不同，安排的測試任務就不同，進而就會影響最終得到的結果。所以測試之初需要考慮清楚測試目的。國際標準化組織在人體工程學設計的人機交互部分（ ISO9241） 把b2可用性c 規定為 3 個指標：
結合這3個指標，我將本次測試目的設定為：
測試時間：
測試環境：
Nielsen在理論中認為5-8位用戶可以測試出85%的可用性問題，實踐下來確實如此，樣本數量建議控制在這個范圍。
在同一個產品的用戶中，新手用戶、永久的的中間用戶、專家用戶這三類角色通常是共存的。我們需要讓新手用戶快速和無痛苦地成為中間用戶；避免為那些想成為專家的用戶設置障礙；最為重要的是，讓永久的中間用戶感到愉快，因為他們的技能將穩定地處于中間層。
本次測試中，我盡量使樣本中包含這3類用戶，比例為2：3：3。測試之后，就可以大概知道對于不同類型用戶來說，產品可用性和
易用性情況，也可以得到多維度差異化的反饋。
測試中需要使用一些管理用戶信息或記錄用戶反饋的表格，在準備階段就要做好表格設計和打印工作。下面是具體的表格，可根據具體需求做相應調整。
《用戶信息&排期表》
在這張表中管理測試用戶信息b2姓名、職業c 、測試安排「時間、地點」、測試工作人員「主持人、觀察員」。一場測試盡量安排一位主持人和一位觀察員作為工作人員相互配合。
主持人負責與用戶溝通互動，推進測試進程；觀察員負責設備和資料保障，以及測試過程中的行為觀察和記錄。一個人獨自承擔主持人+觀察員角色的話，在用戶反饋密集而現場又出現臨時狀況時就會手忙腳亂，所以建議兩個角色分工協作。
《用戶基本信息問卷》
在這張問卷中可以設計與產品相關的用戶基本信息問題，問卷設計原則為：
這張問卷使用在線工具呈現，比如騰訊問卷；也可現場打印紙質問卷進行詢問填寫。大多數用戶比較喜歡現場填寫。
《單任務滿意度問卷》
測試過程中，我們需要讓用戶完成一個完整任務，該任務需要拆解成若干單任務。在每個單任務結束后，立刻對用戶進行該單任務的滿意度詢問。
《SUS系統可用性量表》
用戶結束完整任務后，填寫該量表。該量表由10個題目組成，包括奇數項的正面陳述和偶數項的反面陳述。在結果整理階段，我們再對該量表進行分值計算。
從開始到結束，需要主持人將整場測試的各個環節串聯起來，引導用戶操作，推動測試進程向前發展。為防止意外狀況出現，可以預設測試腳本，規劃情境和話術，并在預測試環節驗證及優化該話術。
比如可以這樣開場：“首先非常感謝您今天能來參加我們的可用性測試，我是主持人XXX，這位是觀察員XXX。我們這次是對酷大師建模工具進行可用性測試，想了解您使用時的體驗和感受。
在這里需要強調的是：我們測試的對象是工具，而不是您，所以您不必感到緊張……當您使用工具時，我們會觀察和記錄。今天的測試大概需要一個小時，測試過程中會有休息時間。測試過程中，請您將手機保持靜音狀態……“
比如可以這樣進行兩個單任務環節串場：“好的，我們已經完成了第一個單任務。現在有一份簡單的問卷，填完后可以稍微休息一下。
「出示問卷，并作簡要填寫說明」「問卷完成后進行簡單訪談，用戶也稍稍休息后繼續」現在，我們開始進行第二個單任務「要清晰且大聲地說出這句話，以“鼓勵”測試參加者和提示記錄人員」……”
具體話術依據需要測試的內容和情境展開，盡量做到專業、友好。
可用性測試往往帶有一定目的性，而這些目的能不能達成，取決于任務與目的的關聯性以及用戶是否能夠給到對應反饋。通常，測試用戶是愿意給予反饋的，那么測試任務的設計就成為整個準備階段最重要的環節。
做好測試任務的設計和拆解：需要具備從全局高度理解產品的能力；需要知道產品全鏈路的過去起源、現狀細節、未來走向；需要把控重點，拎出骨架；需要去繁就簡，以較少的任務成本測出最有價值的信息。
本次測試中，我設計的主流程是：模型創建——材質鋪貼——模型渲染——模型發布——模型分享，并且我還希望測到拉伸、陣列、組編輯、移動、旋轉這樣的主功能。所以我將這兩塊有機結合，給到用戶創建一個「樓梯踏步模型」的任務。
我將任務按照主流程拆解為5個單任務，主功能分布到其中幾個單任務中，且盡量做到兩個單任務中不重復使用同一個主功能。
大多數產品都存在一些限制因素導致的尚未解決的已知問題。這些問題在測試中出現的話，會轉移用戶注意力，削弱本次測試的價值，偏移本次測試的目的。
另外，我們準備階段進行的種種規劃也需要得到驗證。結合這兩個原因，正式測試之前建議進行內部的用戶預測試。找出并修復測試環節中的漏洞，準備好各類突發狀況下的planB，以及修復影響正式測試的已知問題，提高正式測試的執行效率。
第一步.測試開場，填寫《用戶基本信息問卷》
本次測試是在工作日穿插進行8場一對一用戶測試。這樣可以放緩測試節奏，在兩場測試間隙有充足時間簡單整理上一場收集的信息，與下一場用戶確認測試安排，以及對突發狀況及時處理。
正式開始前半小時，觀察員需確認設備都已調試妥當，資料都已打印完成。主持人可與用戶進行聯系，帶領用戶進入測試場所。主持人可以通過填寫《用戶基本信息問卷》了解用戶基本信息，幫助用戶消除在陌生環境下的溝通障礙。也可以使用戶以放松狀態完成測試任務，以開放心態為后續拓展性話題的展開做好準備。
無論是填寫《用戶基本信息問卷》還是后續的問卷，建議采用主持人提問、用戶回答的方式收集信息。用戶的注意力集中于思考和溝通，就能夠提供更多有價值的信息，而不是忙于撰寫問卷。
第二步.完成單任務，填寫《單任務滿意度問卷》
主持人按照順序分步解說單任務。單任務測試過程中，工作人員不要去打擾用戶，也不要給用戶任何提示，所有的問題都等到測試結束再進行解答。
觀察員需仔細觀察用戶操作，記錄用戶是否很容易判斷出如何操作，完成某個重要功能點時是否順暢；需隨時關注用戶表情，記錄下明顯表情相關聯的流程或功能點等等細節。
一個單任務完成后，提示用戶稍事休息，然后提問《單任務滿意度問卷》中的問題。此時可以回答用戶操作過程中的疑問，也可以藉由操作中的細節做延展發散，詢問用戶操作感受。通?？梢垣@得很多針對該單任務的意見和建議。這些意見和建議后續就需要記錄整理，作為優化任務幫助提升產品可用性和易用性。
第三步.填寫《SUS系統可用性量表》，了解整體評估
整個任務完成后，可以藉由填寫《SUS系統可用性量表》，了解用戶對整體的評估。由于量表的10個題目中，包括奇數項的正面陳述和偶數項的反面陳述，所以在提問過程中一定要陳述清楚題目。如果用戶認為有些問題無法回答，則視為其選擇中間值。在后續的結果整理階段，再對量表總分進行計算。
在問題詢問過程中，可以有針對性地詢問原因。比如針對第2個問題“我認為酷大師建模工具的操作較為復雜，其實沒必要這么復雜”。
如果用戶認為不復雜，則可以詢問哪些點非常簡單易用；如果用戶覺得復雜，則可以詢問哪些點覺得復雜。用戶告知原因的同時，常常會說出他認為比較簡單的解決方案。這些解決方案或者來自于競品，或者來自于實踐，或者來自于創新，常常可以幫助我們開拓思路，走出認知盲區。
第四步.拓展性訪談，測試收尾
在這個環節可以不必拘泥于原定的測試任務。建議預留一定時間，大到行業發展，小到產品細節，與用戶進行一番深度探討。這些來自于一線的用戶常常會帶來一些新鮮的靈感，為產品未來的拓展提供一些線索，解決產品當下的一些困惑。
由于我們一開始就對測試樣本進行了分類，所以也可以結合前面幾個環節的信息，對各分類下的用戶訴求和行為習慣進一步驗證、區分、歸納。
第一步.SUS量表分值計算
首先，我們需要計算SUS量表總分。奇數項計分采用“原始得分-1”，偶數項計分采用“5-原始得分”。由于是5點量表，每個題目的得分范圍記為0~4（最大值為40），而SUS的范圍在0~100，故需要把所有項的轉換分相加，最終再乘以2.5，即可獲得SUS分數。
其次，我們可以獲得分量表得分。SUS量表中，第4和第10項構成的子量表為“易學性”（Learnability），其他8項構成的子量表為“可用性”（Usability）。
為了使易學性和可用性分數能夠與整體SUS分數兼容，范圍也是0~100，需要對原始分數進行轉換：易學性量表轉換分數的總和乘以12.5，可用性量表乘以3.125。
最后，我們可以將SUS量表分數換算成百分等級來解釋，找到對應評級。百分等級的意思是指測量的產品或系統相對于總數據庫里其他產品或系統的可用性程度。比如SUS得分是73分，其百分等級大約為67，意味著比大約66%的產品可用性更好。
第二步.整理問題列表，推進迭代優化
做完所有用戶的測試之后，我們一定會收集到很多涉及具體功能點的反饋。對于正向反饋，我們可以謙虛地接受，并且思考這些打動用戶的點如何復用；對于非正向反饋，我們應該冷靜地思考，它們將是本次可用性測試中最直接而有效的收獲！
對這些反饋可以進行分類歸納，將其中能夠立即應用于產品的內容整理出來，按照優先級，放入產品迭代優化任務中。這些任務將提高產品可用性，在數據層面能夠幫助提升留存率。我們這次可用性測試中總共獲取97個有效反饋，其中62個整理進產品迭代任務，并且取得了用戶使用數據上的相應提升。
第三步.撰寫測試報告
整個測試環節通常只有2-3位工作人員，如果希望能和團隊一起分享測試的收獲，建議整理一份總結報告。可以使用word或者ppt形式，說明測試背景、測試用戶信息、主要結論、發現的問題、以及解決問題的行動項。
經過幾場頗具收獲的工具型產品的可用性測試之后，我做了一些總結，希望能夠形成適應于工具型產品的可用性測試體系：
1. 目的性
工具型產品的可用性測試目的比較統一：幫助團隊優化體驗路徑；幫助團隊明確用戶使用產品時的體驗感受；幫助設計師驗證設計指標。
2. 專業性
完整的可用性測試全程都需要專業支撐，從籌備到進行，從任務到結果，每一個細節都需要考慮到位。在這過程中我們要盡量保證：流程規劃清晰；文檔整理完整；分工明確到位。
3. 參與性
大多數可用性測試是用戶體驗相關崗位人員發起，但是用戶對于產品的反饋與團隊每位成員息息相關，所以建議團隊共同參與。比如在這次可用性測試中，就邀請了產品經理和研發人員擔當觀察員或主持人；邀請用研人員給予專業指導培訓；在對測試反饋的問題進行優化過程中，也是團隊通力合作，推進迭代快速進行。
4. 周期性
可用性測試不是進行一次就結束的一場表演。而是結合產品進展情況，可持續實施的一種有效的快速驗證方式。
可以在新產品上線后進行，可以在重要功能上線前進行，也可以在迭代優化后進行。建議周期性進行可用性測試，取得一些結果后立即應用于產品，隔段時間再次驗證，形成良性循環。亦趨近于精益用戶體驗中倡導的基本MVP理念。
當然，每次可用性測試都需要工作人員投入大量時間和精力，所以專業賦能可以成為很好的解決方案。即團隊成員可以學習使用該方法，輪流進行周期性操作。
我們日常其實接觸并積累了大量專業方法，可用性測試只是其中一種。在不斷實踐的過程中才能真正體會到這些方法的魅力之處，在不斷落地的過程中才能打磨自身的方法論體系，形成屬于自己的一套打法，給產品設計帶來新穎的專業思路。
文章來源：優設 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：對于老一輩人來說，他們沒有趕上互聯網興起的時候，等到想要主動“觸網”時，才發現很多操作根本搞不清楚。盡管產品設計師已經極可能考慮到了老人群體的用戶體驗，但在實際操作中，老人家還是一頭霧水。這時，操作越是簡單的產品，越能夠贏得他們的喜愛。本文作者從自身經驗出發，對這類現象進行分析，與你分享。
上周某天吃完晚飯，我媽遞過她的華為手機怯怯地問我：你有空嗎？我想叫你幫我跟那個商家說換一個快遞，我們家這邊的百世快遞的站撤了，叫他們不要用這個快遞。
我腦海中閃過一個念頭：嗯？最近我沒有幫她付款啊。但隨即也是接過她的手機打開了淘寶。我媽立刻阻止我：不是淘寶，是拼多多。隨即自己打開了她微信里的拼多多小程序，演示給我她找不到商家客服。我跟她說，這個功能要用APP才行，于是幫她下載了拼多多APP并很快解決了問題。
弄完之后，我們又展開了這樣的對話：
我媽：哎呀，這個拼多多真是太好了，物美價廉，超方便！你怎么不早教我用！
我：我自己都不怎么用拼多多啊！
我媽：這個是我的舞友上周教我的！我打開一看，哇，好多有用的東西，又便宜！第一天我就買了幾百塊的！
我：但是拼多多很多假貨啊！
我媽：我又不像你們追求什么名牌！有什么假貨可言？一條裙子30塊！
我：……
我媽：而且！以前我在淘寶總要你幫我付款，現在我用拼多多自己用微信就可以支付了。
我：我早就叫你開個支付寶賬號，你自己又不開！
我媽：那么麻煩，我不會，你又不教我！而且又要綁定銀行卡，萬一哪天我的錢被人家騙走，那些什么黑客……
我：哪有黑客黑你，你又不是馬云……
我媽：還有，拼多多退貨很方便！以前我在淘寶的時候，退貨要你幫我搞，還要在家等快遞上門，很不自由，現在我自己去菜鳥驛站退就得了。
我：好吧。
我媽：以后我就用拼多多，我那些舞友都在用！
我：你開心就好。
我回頭想了想，這是一個以用戶定位和產品特征為優勢搶奪用戶的典型場景。
首先看看以我媽為原型的粗略用戶畫像：
為什么我說拼多多是從用戶定位和產品特征這兩個維度搶奪走了我媽這樣的淘寶用戶的呢？
首先，我用的是“搶奪”這個詞。
我并沒有用擠占、分流這樣的詞。因為，在跟我媽的交談里，我已經感受到她心里估計“從此淘寶一生黑”了。也確實，一個月以來我媽沒有再叫我在淘寶付款過。所以，我想我媽大概率未來不會再用淘寶了，也就是說，淘寶直接流失掉了我媽這個用戶。
其次，來看看用戶定位。
根據上面我列出的以我媽為原型的用戶，多嗎？我簡單查了一下。
根據國家統計局官網上發布的《中華人民共和國2019年國民經濟和社會發展統計公報》，60周歲以上的人口約有2.5億人，60-65周歲的人口約有83250000人，分別占人口總數的18.1%和6%；根據中國互聯網信息中心官網發布的《第46次<中國互聯網絡發展狀況統計報告>》，截止2020年6月，我國手機網民用戶規模達9.4億。
那么，根據這個比例可以推算，這樣的用戶大約在5千萬—1億的規模。
這么大的一個用戶群體，實際上是淘寶自己放棄掉的。自從前幾年淘寶打假貨的行動和品牌化（力推天貓）的戰略執行以來，實際上大量的縣城以下、60歲以上的用戶都被淘寶放棄掉了。
以我媽為原型的這批用戶，他們大多數沒有支付寶賬號，但在微信上有錢，但除了平時發發紅包，菜市場便利店買點東西，基本上還是沒有用出去。于是，這批用戶沉淀在微信錢包里的海量的錢，很難直接轉化到淘寶上。
另外一個關鍵的地方在于，他們對淘寶是有怨言的，但在拼多多出來之前，沒有替代物。某種程度上來說，對用戶而言，忠誠度是很虛無的。真正對品牌有感情而產生“忠誠”的用戶極少極少，品牌還是得需要不斷優化產品，滿足用戶的需求。
品牌也好，產品也好，本質上是為用戶提供價值，而不是要跟用戶“談戀愛”。
這是很多品牌的一個誤區。沒有在自身的產品上下功夫，去了解用戶瞬息萬變的需求，而去打“情懷”，講“文化”。所以，我們可以看到當某些品牌醉心于自己的“情懷和文化”之時，其競爭對手在了解用戶需求和優化產品而推出競品后，瞬間打垮行業老大哥的案例。
最后來講講產品特征。
我媽使用淘寶的流程是怎么樣的呢？
挑選商品——下訂單——點擊“找人付款”——發送需支付的訂單到我的淘寶賬號——退出淘寶——打開微信——告訴我發了一個訂單——發紅包給我——我看到微信或淘寶信息——點擊需支付的訂單——支付——退出淘寶——打開微信收紅包。
而她使用拼多多呢？
挑選商品——下訂單——支付。
當我列出這兩個產品使用流程之后，我猜如果你是我媽，你也會用拼多多了。
在我媽跟我的對話里，還突出強調了“退貨難”這個點。實際上是淘寶的物流服務不好嗎？并不是。我一直覺得淘寶的物流雖然不如京東，但并不差，而且也不斷在優化升級。但為什么我媽還是覺得不好呢？這一點不能單純地從物流本身來看，而得回到淘寶的產品來看。
在淘寶上，推出了一個功能，叫“找人付款”。當時我覺得這個功能很好，解決了我幫我媽買單時，她要跳出淘寶從微信給我發鏈接的麻煩。但最終卻帶來了一個重要的弊端：當要退換貨時，我這邊無法執行，她那邊又不知道如何操作。
而當我從PC端登上我媽的淘寶賬號之后，PC端的退換貨服務非常麻煩和繁瑣，讓我都研究了差不多一個小時才解決。而最后，我媽那邊又無法支付退貨費用，我在PC端也支付不了，也不能“找人付款”?？傊麄€過程極其麻煩。雖然淘寶也意識到了產品上的缺陷，但目前的情況而言，這樣的產品還是對于我媽這樣的用戶非常不友好。
而拼多多呢？它基于微信這個社交生態圈。加上沒有什么太多余的功能，我媽很快就能上手了，自己操作還是比別人代操作方便多了。
談到這里，我還意識到一個重要的問題。
從產品對人際關系的影響而言，淘寶是負向的，而拼多多是正向的。從某種程度上而言，60歲以上的這代人，是被互聯網拋棄了，所以當他們想搭上這波潮流時，不得不面對自己的兒女，需要向他們請教，怎么用怎么學。這一點首先就會讓不少子女心煩，不少父母自卑。
再進一步，如果每次父母網購都得“捆綁”上子女時，對人際關系是正向的嗎？而在拼多多上購物時，他們不僅可以大大優化自己的產品使用流程，還能跟自己的老朋友們一起拼單，互惠互利，這對人際關系的影響有很大的正向作用。
你有什么被別的產品搶走的故事嗎？
一點個人小想法，想到哪寫到哪。
如果你有不同的意見和想法，歡迎評論或留言。
文章來源：人人都是產品經理 作者：@源記物語
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Apple 致力于讓每件產品都賞心悅目，與其說官網是產品展示平臺，倒不如說它是蘋果產品分支的延續。從 Apple.com 找設計靈感是每一位設計師都做過的事，那它到底有何魅力？文章對Apple的網頁設計展開了梳理分析，與大家分享。
每當有新產品發布時，我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時間發布的 iPad Pro 也一樣。
這背后是 Apple 基于 webGL 技術，創造的一種沉浸與交互式產品體驗。
我們在產品介紹頁可以看到，蘋果使用了大量的滾動 scroll 來體現連續性。
一方面，滾動作為大多數 Web 用戶最自然的操作，學習成本極低。
另一方面，在冗長的頁面下，滾動能讓產品特性保持更自然的轉場銜接。
iPad Pro 的連續性
另外，采用了大量的動畫式轉換（animated transition），即操作時展示的動態效果，以此來增加趣味性。
伴隨著豐富的、若隱顯現的章節文案，就像電影的旁白一樣，娓娓道來。
通過滾動的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶的操作會受到限制，只能在視頻中前進或后退，毫無樂趣可言。
AirPods的趣味性
說到言之有序，我們看 iPad 的頁面介紹。四款產品，分別是：iPad Pro、iPad Air、iPad、iPad mini。
拍攝角度的秩序感，可謂妙不可言。
iPad的秩序感
如此一來，即顯得有序，也不會導致視覺疲勞。
其次，官網與 iOS 保持協同的設計語言，給用戶呈現了一致的感官體驗。
從 iOS 11 開始，蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合，轉向的 Medium + Bold ，以此增強信息傳播中的識別力。
HomePod
另外，高斯模糊的標題欄背景、產品的投影等設計語言也保持系統一貫的風格。我們可以很清晰的看到 Web 設計的同步轉變。
第三是視差帶來的層次感。
蘋果奉行包豪斯的無裝飾和極簡的理念。當然，它不是那種附庸的美觀及外表的光鮮，而是將復雜難懂的技術以簡潔的形式傳達給用戶。
Mac Pro 視差滾動
在信息層次方面，Apple 的編排設計由淺入深，猶如抽絲剝繭。很好的利用了視差滾動，傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。
不僅如此，樣式上富有視覺張力。或擴張、或收縮、或吸引、或排斥之感覺，呈現刺激與震撼。舉兩個例子：
A13芯片的擴張力
擴張力：整個畫面以 A13芯片 為視覺中心點，元素和布局圍繞這個視覺中心點向外擴張。采用發散式的視覺引導，視覺張力就出現了，讓人感覺巍峨壯觀。
Pro級攝像頭的排斥力
排斥力：通過元素的大小對比，可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫，傳達空間意識。視覺上被其構圖、美感觸動。
再聊聊蘋果的高級感是怎么來的？
我們都知道，高飽和度的色彩，會影響人的情緒波動。相反，低飽和度的配色，對人眼的刺激較弱，會有一種冷靜且克制的高級感。
iMac Pro 高級感
回過頭來看蘋果官網的大部分頁面，除了產品界面色彩 和 按鈕藍 之外，其他的文字、背景、控件一律采用黑白灰色系，以此營造高級感。
甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級灰中加了一點點綠而已。
換言之，減少使用顏色的數量，降低色彩的飽和度都能削減色彩對人的情緒，起到提升產品高級感的效果。
iPad 留白
除此之外，恰當的留白可以更加突出產品內容，讓重要的信息更準確的傳達。并且能營造出廣闊的空間感，讓畫面得到延伸，呈現一種意境美。
所以我們做設計時應當多做減法，避免無意義的視覺元素堆砌，反而能讓你的設計更有高級的氣質。
這又印證了現代主義建筑大師密斯·凡德羅的那句話：Less Is More。
當然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。
蘋果官網大部分的產品都是采用實拍+后期修圖，而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果，這一點能看到蘋果對于品質的追求。
Designed by Apple in California
不僅如此，蘋果產品圣經《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學可以看下面這個幕后制作視頻，相當硬核。
做過英文 Web 的設計師都知道，英文往往比中文更好設計，相同的布局英文出來的效果也更好看。
這不是崇洋媚外，心理學有個詞叫做「母語羞澀」。簡單來說就是，中文對于我們來說，太常見了會讓人產生一種廉價感（實際上是羞澀感）的心理感受。
老外也一樣，你可以看到美國企業：蘋果、麥當勞、星巴克都是使用圖形 Logo，而日本企業不用母語，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一臺電腦，何必是電腦。
回到蘋果官網，我們看到一部分文案是英文產品名稱，這個不會感覺羞澀。
那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差，但基本上能明白字面意思。
其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格，來凸品牌氣質。舉幾個例子：
最后一點。生活要有儀式感，蘋果官網也有儀式感。
國際婦女節專題
在一些特殊的日子里，例如三八節當天，友商選擇打廣告促銷。而蘋果推出了國際婦女節專題，致敬女性的偉大，這一做法頗具人文情懷。
不過話又說回來，感動歸感動，還是參與友商的打折活動香。
文章來源：人人都是產品經理 作者：阿洋
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
