最近身邊的一些小伙伴，總會遇見B端設計工作，對于這種偏后臺設計的B端設計，總會有大量的表單設計需要做，結合以前自己也有過不少表單設計的工作，在這里給大家分享一下自己對于PC端表單設計的研究，聊一聊表單在PC端中的運用。
商業離不開數據，而數據總會依賴不同的表現形式，不管是word文檔，還是數據可視化，都是瀏覽者通過表現形式來對數據進行閱讀和分析，因此表單的設計就是一種表現形式，我們將捋一捋如何通過表單更好的讓用戶閱讀順暢、操作方便、總而言之就是更好用啦。
無線分割：顧名思義，列表的信息之間正常情況下沒有分割線等方法來分隔，僅僅是用間距來分隔開內容。好處是元素更少，畫面更簡潔，但是視覺可能就沒那么清晰了，使用的出場率一般。
有線分割：同樣字面意思，就是通過簡單的分割線來分割列表中的信息，讓視線左右移動的時候更加穩定、輕松，在表單設計中使用的出場率非常高。
斑馬線：通過深淺交替的色塊，以及色塊產生的對比來分隔列表中的信息，深淺深淺的循環就好像斑馬線，使用時是通過色塊產生對比，所以也可以使用帶有適量飽和度的色塊來區分，占頁面面積比例較大，適當用色可以使得畫面更加活潑、豐滿，斑馬線也是出場率極高的一種展現形式。
斑馬線+分割線：很容易理解，就是斑馬線風格+分割線的結合，用色塊區分的同時又加了分割線，信息之間的區分對比更加強烈，但是畫面層級就多了一些，沒有其他的看起來簡潔，使用出場率也一般。
卡片式：跟卡片式風格其他設計一樣，分別用懸浮的色塊來區分，間隔的地方是背景色，分隔的力度比較強，內容區分的很清晰，弊端是更加占畫面的位置，尤其在信息很多列的時候，會增加大量的高度，用戶需要更多時間進行下翻的操作。使用出場率相對其他形式來說稍低。
場景：用戶需要閱讀大量的表單數據，且需要頻繁的翻頁、跳轉。
如圖，左下角可以設置界面中每頁顯示信息數量的多少，用戶可以根據自己的需要自由設置，當瀏覽的數據較多的時候，不再需要頻繁點擊下一頁來瀏覽信息，只需把每頁顯示的數量調高，如此便減少了大量的操作次數。
像這樣允許用戶可以自由編輯來改進體驗的方式還有很多，比如可以設置顯示密度，就是以一樣的方式自由調整信息與分割線的間距。除了行間距，有的可以自由設置每一列的列間距，用戶可以根據自己的習慣來設置。
場景：用戶需要瀏覽大量的數據，并需要對數據反復進行計算、分析。
在使用大量的文字列表展示數據的同時，使用數據可視化加以配合，用戶可以更好的預覽到數據的大致情況，又可以在列表表單中閱讀到詳細的數據。
場景：用戶想根據某種條件的大小排序，來先后閱讀數據。
通過點擊第一排小標題行，可以選擇不同的方式調整信息的排序方式，就和電商商品排序一樣，可以選擇金額高到低或者低到高排序，也可以選擇別的方式進行排序，從而更快找到自己所需要的內容。
場景：從一大堆混雜的數據當中，尋找符合條件的自己所需要的數據。
添加篩選功能，過濾掉自己不想瀏覽的內容，通過條件篩選，更快的更的找到自己想要的內容、縮小查找范圍、減少達到目的所花的時間。一般通過下拉按鈕的形式選擇不同的條件來進行篩選過濾。
場景：已知列表中某信息的名稱關鍵字，想從大量混雜的列表中快速找到。
跟篩選過濾一樣，添加關鍵字搜索功能，用戶提供部分關鍵字，可通過關鍵字查詢，最快最的找到想要的那一條內容。一般該目標內容是用戶已知的，有時候是針對性的。
場景：精簡設計風格的界面，不想界面中內容過于繁多。
如圖，鼠標懸停在哪一行，哪一行才會顯示該列表后面的操作按鈕，好處是減少了視覺干擾，能更快的找到捕捉到操作位置，弊端是用戶不進行交互的時候無法發現操作按鈕如何出現。
場景：想快速獲取列表中某信息的其他附屬內容。
如圖，點擊某一行后，展現該行的一些附屬信息?？梢圆挥锰D頁面而進一步了解該行信息的詳情。
場景：在瀏覽列表的同時，需要頻繁的對列表中的信息進行編輯。
用戶可以直接對列表信息進行修改、編輯，省去了跳轉再編輯的麻煩步驟，更節約時間，用戶操作起來更加方便。
場景：需要充分了解列表中不同信息的詳細說明，頻繁跳轉又過于麻煩。
和可展開列表的作用類似，但是可展開列表顯示的內容有限，快速預覽的功能可以用側彈框的方式、彈出對話窗口的方式、以及其他方式對選中的內容直接展示詳細信息。用戶不需要跳轉至詳情頁就可以了解到大量信息，省去繁瑣的交互流程。不再需要頻繁的跳轉到詳情-返回-跳轉到另一個詳情-返回-跳轉-返回。使用快速預覽的功能就可以很好的解決這一問題。
（PS：彈出對話窗口的方式，可以同時彈出好幾項列表的詳情信息進行對比，但是側彈框因為高度優勢，可以展現更多內容）
場景：列表中每條內容顯示信息參數過多，且很多不想瀏覽。
自定義列表功能是用戶可以自由設置每行信息參數的內容，比如我不想列表中顯示金額這一項，就可以刪除，想要的時候可以添加回來，這樣用戶可以保留自己想要的那幾項內容，可以更快更方便的閱讀到自己關心的那幾項參數，節省了用戶的有效時間。
場景：列表橫向或者縱向過多，下翻或橫拉的時候標題頭被隱藏，不知道自己當前瀏覽到的參數屬于哪一項。
交互過程中，可以把第一排重要的東西固定，列表內容翻動的同時，第一排仍然在原位不移動而且覆蓋列表中的其他信息，很多自帶的框架都是這樣的形式，使用的出場率也是非常高，這樣用戶可以隨時查看到自己看到的內容是屬于哪一項屬性，或者是屬于哪一條信息，可以是橫向固定，也可以固定豎直的第一排標題，也可以固定最后一塊操作點擊區域，具體如何固定、是否固定，根據整體的需求來選擇。
通常表單都是大量的文字，大多數的文字高度都在該行高度的三分之一左右。過于緊密用戶瀏覽不順暢，過于分開顯得畫面過于松散，不同的分割方式，間距也會有所不同。
其實上面的每一條都是一個小總結，每一條在大部分的列表中都可以用到，主要還是根據實際需求來運用這幾點，比如分割的方式根據主體風格來搭配，不要為了設計而設計盲目運用，畢竟設計都是以內容為主，尤其是表單設計，本身就是更好的表達內容。
本文發布于人人都是產品經理。
有句話叫：「設計無小事」，很多看似不起眼的東西卻起著至關重要的作用，比如這期要說的線條，很多人對于線條的理解有局限性，比如：線條的形態可以是曲線、直線、折線、粗線、細線、實線、虛線等等。其實已經牽扯到了點、線、面的知識，這也是很多科班生在學校必學的知識點，但是這期所說的線與點線面中的線還是有所不同的，點線面中的線可以是線條、可以是文字或者是看不到的視線，而是今天著重說的是設計中很直觀的線條。下面我們還是通過實際的案例逐一分析：
設計類的知識很多都和日常生活息息相關，嘗試著把設計類的知識點與日常生活想結合，對于記憶和理解來說會更加得心應手，例如：
圖中的閃電可以視作為設計中的線條，給人的視覺感受是通過閃電把天與地連接為一個整體，而閃電在圖中的作用就是串聯整體，那么回到這里的正題：線條有引導視覺的作用該怎么理解呢？再舉一個現實生活中的案例：
我們選擇從北京到拉薩開車去，出發之前可能需要在地圖上看下路線，知道途徑哪些省市，規劃好行程路線，這里綠色的虛線就起到了引導視覺的作用?；貧w設計中道理是一樣的，線條可以引導用戶把原本雜亂無章的視覺點規整為有次序的視覺元素，例如：
當看到左側這張海報時我們視覺次序會出現很多變化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多種順序，這時給人的感覺就是雜亂無章的，毫無視覺次序而言；而看右側的海報給人的感覺卻是條例清晰的，相比而言只是多了兩條線，但是卻在整個海報中起到了引導視覺的作用，它可以給與用戶閱讀海報時視覺輔助的作用，讓用戶以右>左>右的視覺次序欣賞、閱讀，看似很不起眼，其作用卻至關重要。
前面也說了，線的形態可以有很多種，例如：
這里是以真實的可口可樂吸管作為設計中的線條，同樣起到了視覺引導的作用，但是我們不難發現，這里的線條不僅僅只有一個作用，也牽扯到另一個作用：線條有串聯整體的作用。
在排版時我們有分組原則，即把互想關聯的元素彼此靠近，無關聯的相互疏遠。在頁面中我們會把同一色塊上的元素視作為一個整體；下面我們說下線條所帶來的串聯整體的作用是如何體現的，比如：
△ 圖一
△ 圖二
圖一因為大面積的留白能使得用戶很容易分辨出自行車與文案是一個整體，但是相較于圖二而言，其整體性略顯不足，而且給人的感覺太過單薄、重心不穩；圖二的整體性更強，這里的矩形線條就起到了串聯主題的作用，類似的還有：
不難看出，這些案例中的線條都有串聯主題的作用，線條使得主題元素整體感更強、畫面板式更加嚴謹；對于整體的視覺傳達也起到了串聯、引導的作用；在文字排版中，也有類似的線條，比如：
同樣是通過線條把文案更加整體化，也起到了串聯的作用。
突出主題的方式有很多種，像我們之前所說到的留白、對比。接下來繼續說下另一個可以突出主題的方式—線條，下面看個案例：
通過對比觀察我們發現，右側海報整體感更強，主題文案信息更加清晰，主體更明確。其中的原理可以理解為：因為線條的存在，使得主題信息有了一定的范圍，在視覺上等于是在海報中劃定了視覺焦點，從而起到了突出主題的作用。當然還有其他的表現形式，比如：
很好的詮釋了線條的作用——突出標題序號。在進行創作時，作品的每個元素都要做到有理有據，否則只是一味的抄襲，到再創作時腦袋里還是一片空白，只有明白了其中的設計原理，才能做到活學活用。再看幾個案例：
突出主題也許一個線條就可以表現的淋漓盡致，因設計目的的不同，線條所發揮的作用也不盡相同。下面繼續分析：
前面說了線條有串聯整體的作用，而這里又說可以分割整體，是否存在矛盾呢？下面舉個簡單的例子：
在小文案的區域中間我加了兩個線條，看似很小的改變，其目的是把文案很準確、嚴謹地分割為三個小整體，希望能給用戶帶來識別性更強的閱讀性，再舉個例子：
這里的線條把月份和日期分割、英文和中文分割開，使得用戶對于信息的捕捉能力以及可辨識性都提升了很多，而線條的作用就起到了分割的作用。
線條也能起到修飾、襯托的作用，很多小伙伴會忽視這一點，其實線條也可以成為海報中襯托畫面、修飾主題的元素，例如：
海報中的線條起到了襯托、修飾主題的作用，假如把這些線條都刪除，畫面整體會顯得相對單薄。
更多設計中線條的應用：
線條的作用我們分為四個逐一分析，其實它們之間也存在著相輔相成的作用，不能以一概全，線條所起到的作用可以是一種，也可以是多種，比如：我們前面「可口可樂」的案例，即有串聯整體的作用，又有引導視覺的作用。只要我們在使用的時候能明確目的，而不是機械式的抄襲，那么最終一定會得心應手。
文章來源：優設 作者：美工美邦
42個設計思維中的一個知識點~
設計思維 - 激活空間
1.激活空間 - 概念
激活空間的意義在于元素與空間的搭配，能讓頁面產生靈動性和活力；另外激活空間還有一個影響比較難理解；?當主元素占用版面的主導位置，其他空間過大就會造成觀眾視線的停頓與停滯；?這樣就會導致主體與次客體不會產生一定的關聯性；?這時就需要“激活空間”來使兩個元素有一定的聯結；
2.空間的概念
在我們理解“激活空間”的概念之前，先來理解一下“空間”的概念。因為平面是一個二維的空間，是二維零曲率廣延的一種面，因此我們在定義空間時不需要考慮三維的“第個三維度（一個方向的向量）”帶來的影響，我們只要定義空間中的最小單位與空間的相對關系，和定義空間的邊際就可以了。如下圖所示，平面二維空間中x軸與y軸無限大，那空間也會隨之變大。而三維空間中z軸的不斷擴大，空間就會隨之變大。
只有在有邊際的空間中置入一個要素，即使這個要素是最小要素，空間也能被界定。例如一個正方塊（一個要素），被放置到一個參照的方框中，這時小的空間就會被界定。如下圖所示，二維平面和三維中坐標軸的范圍就是界定后的空間，而坐標軸中具體的一個單位就相當于平面中的單一要素。當把要素放入一個有邊際的空間中，這個空間就會被界定。
到這里我們只需要了解當我們定義空間中最小的單位，空間也就被界定下來了，理解這個概念就行了。這里的空間中最小的單位指的就是“元素”，而元素被設置好后空間就被界定了下來，這里元素的位置影響著空間，元素激活了部分空間，即激活空間。這了不理解也沒有關系，我用簡單的圖來進行繪制，大家就能理解激活空間的概念了。
3.激活空間 - 理解部分
當我們在一個空間中置入一個元素（一個圓），這時我們就會發現這個元素占了一整個空間。這里如果不好理解就用生活中的例子舉例，例如大家都站在自己家的臥室里，并且站在中心點也就是正中間，那這時候給人的感覺就是你占用的一整個臥室的感覺，也就是說整個臥室的空間就被你（視覺元素等于一個圓）所占據了。
接下來大家仔細看啊，如果當我移動一個元素（一個圓）的位置，大家感覺一下平面會有什么樣的變化。是不是感覺上面有元素，但下面的空間有些空啊。這是因為只元素只激活了上面的空間，而下面就成了空白的空間。
接下來我再把平面中的這個元素，向左移動一些位置，大家注意看會有什么樣的變化。是不是會發現，左面這一小塊的空間被激活了，而右面和下面的一大塊是空白的空間。
這時當我再分裂出一個相同的元素，并把這個元素向右移動，這時我們觀察后會發現，上面一整塊的空間都被激活了，而下面的一整塊還是空白空間。并且兩個元素之間產生了一定的關聯性，它們看上去更像一個整體了。
接下來我再分裂出一個元素，并且把它的位置移動到最下方，這時我們觀察就會發現下面的空間被這個元素激活了，但是中級的部分還是處于空白的，也就是空白空間。如下圖這個狀態呢，我其實可以延伸出另一個設計思維，那就是“把留白當做一種視覺元素”，但今天就不講這么多了。這時我們再觀察，三個元素所占的位置，是不是剛好能填滿一個版面啊，那也就是說他們三個整合到一起，又占據了整個平面。
4.激活空間 - 實際案例1
如果講到這理論講的就差不多了，像細節部分大家通過類似的想法腦補一下就行了，接下來我們講一下激活空間的設計思維如何應用到我們的實際設計當中。我們先來看一個設計作品，如下圖所示，大家通過自己的思考，想一下這個作品哪里有問題？
這個作品的問題在于，藍色標出的部分的視覺重量明顯要比紅色部分大，而且紅色部分之間空白空間占的面積太大了，這樣兩個紅色元素之間就缺少了一定的關聯性，整體也會顯得十分不協調，那要如何解決這個問題呢？
當我們把紅色區域之間的空白空間，用其他元素把它激活，把這里的空間激活，那上下之間就能產生一定的關聯。并且用一個有顏色的元素，這里的左右的視覺重量也達到了一定的平衡。
5.激活空間 - 實際案例2
再講一個案例，咱們看一下第二個案例，我們直接看作品看看它都有啥問題？直接這么一瞅是不是標題的位置不太合適，似乎位置太高了，而下面的冰山看上去很不舒服，不知道哪里有問題，有沒有這種感覺？
這個作品的問題在于冰山這塊的視覺重量偏左，而且冰山的物理重量并不重，再加上企鵝在上面就會造成物理重量上的不平衡，從自然角度來看也不是很和諧；另外標題與冰山之間的留白太大了，這樣就造成了視覺停滯，沒有元素可看了，也沒有辦法引導視線了，也會造成觀眾對作品整體的影響與理解上的差異。
我們要怎么解決這個問題呢，冰山的物理重量不平衡，我們給右側畫一個企鵝，讓它把右面的區域的空間激活，那整體的物理重量相對就平衡了；另外標題與下面元素的距離，可以通過設置新元素-太陽的方式，來使上下之間具有關聯性。
6.激活空間 - 實際案例3
再講一個案例，咱們看一下第三個案例。我們直接看作品看看它都有啥問題？看這個作品總感覺太碎片化了，整體性差沒有統一感，而且也不規整并很混沌，元素之間的關聯性也不強，有沒有這種感覺？
這個作品最主要的原因就是留白產生的負形會對作品產生缺乏整體性的影響。因為這些空間看上去是開放的，沒有約束的，零散的且沒有統一感的，這時我們需要通過增加元素，利用激活空間的方法來布置它們，這樣這些元素就具有了統一性，整體性也就會更強。
這樣的整體感就強了一些有沒有~
轉自：站酷-羅耀_UI
這篇文章來自于 Invision 出品的書籍，圍繞規劃、設計、構建和實現設計系統的實踐經歷來指導讀者，其中包含了經驗豐富專家的真知灼見和一手經驗。我很喜歡，也分享給大家，推薦閱讀。這是一個系列，一共有 7 章，感興趣的話，持續關注吧。
20 世紀 60 年代，計算機硬件技術的升級開始超越軟件發展的速度。計算機的處理速度變得越來越快，價格也越來越便宜，但計算機軟件開發仍然處于緩慢、難以維護的境地，并且還很容易出錯。兩者之間的差距以及解決這個問題的困境被稱之為「軟件危機」。
在 1968 年的北約軟件工程會議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基于組件開發有可能是解決「軟件危機」的方法之一?；诮M件開發是一種通過復用代碼來提高編程潛力的方法，該方法能幫助編程工作更、更易于擴展。這樣做既能減少編程工作量又能提升軟件開發的速度，讓軟件更好地運用現代計算機的力量。
在 50 年后的今天，我們又面臨著類似的挑戰，只不過這一次是在設計領域。在 UI 設計中，設計的角色是在為特定需求量身定做解決方案，所以很難去基于整個應用進行擴展。
你有沒有走查過你輸出的界面，發現自己使用了幾十種類似的藍色，或者同一個按鈕不同的用法，將這些樣式組合對應到你設計的每一個 UI 界面，就會意識到一套不成體系的設計是多么的難以維護。
△ 一份 UI 樣式走查收集的成果，里面羅列的十幾種類似的按鈕樣式說明之前團隊挖的坑有多深。
在這種狀態下，設計要跟上開發的速度，公司可以選擇做以下三件事：
通過復用設計，設計系統能夠幫助團隊更好、更快地構建產品——復用性使規范成為可能。這是設計系統的核心和價值。一個設計系統是一個可復用組件的合集，由清晰的規范作為指導，組合在一起構建成各種的應用程序。
50 多年來，工程師們一直在遵循著這個理念執行工作?，F在是時候讓設計充分發揮其潛力加入他們了。
你可能已經清楚地意識到，設計系統已經成為當今軟件行業的一個熱門話題，并且理由也很充分。很多企業投資設計系統，因為他們認識到產品體驗能夠帶來競爭優勢，不僅能吸引和留住客戶，更降低產品學習成本。
在重視設計系統的公司內部，通常能看見這種情況：
如果你是設計師，那么前面所說對設計的投資聽起來可能會令你很興奮，但其實也帶來很多挑戰。當一個應用由不同的團隊負責迭代各自模塊的時候，你將如何跨平臺設計一致的 UI？又如何使所有團隊能夠進行快速迭代？當團隊的設計師設計出新的獨立樣式時，你又將如何處理這種不可避免的設計需求？
要了解如何應對上述的挑戰，我們要先了解什么是設計系統。設計系統將個體和整體兩個概念各自的優點結合在一起。
1. 標準
擁有 MAC 用戶界面的技術知識是產品設計的關鍵因素，但了解用戶界面背后的理論，才能夠幫助你創造出色的產品。——蘋果人機交互指南
為了設計卓越的用戶體驗，不僅要了解設計系統背后的內容，還要了解其設計的原因。我們一般會通過建立和遵守標準來達成共識，這樣做能消除主觀性和歧義性，保證產品團隊內部不會出現摩擦和混亂。
這套標準的內容涵蓋了設計和開發。例如對命名約定、無障礙標準和文件結構等等，幫助團隊達成共識，減少出錯。
視覺語言是設計標準的核心部分。定義顏色、形狀、類型、圖標、布局和動效的樣式和用法對于創建品牌一致的用戶體驗至關重要。系統中的每個組件都包含這些元素，它們在表達品牌特性中扮演著不可或缺的角色。
沒有標準，決策時就會無據可依。這不僅不能擴展設計，還會造成復雜、差勁的用戶體驗。
超越平臺
視覺語言可以不局限于單一平臺，可以在 Web，iOS，Android 和其他平臺上延續。將規范文檔展示在設計系統網站的醒目位置，能夠幫助系統開發者了解組件的樣式和交互模式。例如，Google 的 Material Design 就深入到其產品視覺語言的各個層面。
2. 組件
組件是系統中復用代碼的一部分，它們充當應用程序界面的基礎。組件的復雜性各不相同。將組件簡化為單個功能（如按鈕或下拉菜單）可以增加其靈活性，使其更易于復用。復雜的組件，如特定類型數據的圖表，可以很好地滿足其應用場景，但是這種復雜性限制它的使用場景數量。組件的復用性越高，需要維護的次數就越少，規模也就越簡單。
基于組件的開發通過復用代碼來減少技術開銷。建立標準規范了這些組件的用途、樣式和用法。兩者結合在一起，就相當于為你的產品團隊配備了一個清晰的系統，讓他們了解到為什么和怎么做。
讓我們詳細看看設計系統如何幫助你解決一直以來的痛苦。
1. 擴展式設計
隨著團隊的成長，設計師通常會將注意力集中在應用程序的獨立功能區域，如搜索和發現、帳戶管理等。這就會導致設計碎片化，就像是一座設計的巴別塔，每個設計師都將他們的設計語言往上添。當設計師單獨而不是系統地去解決問題時，就會發生這種情況。
沒有通用設計語言統一產品和設計，用戶體驗就會開始崩潰。當缺乏設計規范時，設計討論就變得毫無用處。為了使團隊內部保持一致，必須要有一個共享的來源——可供參考的官方樣式庫。
大多數情況下的樣式庫都是靜態的內容，例如設計模版。但是靜態的參考幾乎立刻就會過時。這就是為什么有的團隊會建造像 Shopify’s Polaris 站點這樣的網站——一個設計系統站點，用該設計系統構建而成，記錄系統的所有方面，包括組件、指南和交互最佳使用場景。因為它是與系統一起構建的，所以它能夠保持其永遠是的。
對于產品團隊而言，內部設計系統站點是最佳、最易訪問的共享來源。它提供了一個引力，使團隊成員保持一致和同步。
2. 管理你的債務
隨著應用程序和團隊的時間積累，會慢慢形成債務。這種債務不是金融債務，而是技術和設計債務。這些債務是因為解決獨立問題獲得的。設計債務由大量不可復用和不一致的樣式和慣例組成，而維護它們是不可能完成的任務。隨著時間的推移，這些債務的累積會成為減緩增長的巨大負擔。
創造行為本身并不會產生債務——就像花錢本身并不會產生金融債務一樣。但使用設計系統將使你的設計和代碼保持足夠簡潔，同時仍然允許你進行升級和迭代。
3. 一致的設計
一致且重復使用的標準化組件，使你應用程序的易用性大大提升。標準化的組件還能讓設計師花更少的時間關注樣式，花更多的時間專注于提升用戶體驗。
4. 更快的原型
在設計系統下工作，你可以像玩樂高一樣快速拼湊流程和交互，構建無數的原型和方案進行快速驗證，從而幫助團隊快速獲得數據和結論。
5. 提高可用性
頁面樣式的不一致會影響產品的可用性，當 CSS 因為數不清的不一致樣式元素和交互增加時，頁面加載時間也會加長，這會導致很糟糕的用戶體驗。它還可能產生沖突的 CSS 和 JavaScript，從而可能破壞你的應用程序。通過使用設計程序，通過構建一個整體的組件庫（而不是每頁）來避免這些沖突，從而花費更少的時間來保證產品質量。
6. 建立可訪問性程序
可訪問性在組件級別就可以實現，針對殘疾人士、網速較慢和老舊的計算機上進行優化。這是一個建立易用性程序很好的方法， 在第 3 章「構建設計系統」中，Katie Sylor-Miller 解釋了設計系統如何幫助你改善產品的可用性，并保證遵守你所在國家/地區的法律。
（譯者注：美國殘疾人法案于 1990 年 7 月通過并簽署，其中有規定網站的可用性必須遵守《美國殘疾人法》（ADA）的相關內容。）
即使有上述說的這些好處，在團隊內部推行一個設計系統的時候，仍然很難說服團隊成員。設計師可能會感到局限或束縛，但通常這些被感知到的弱點正是設計系統的最大優勢。
讓我們來揭穿那些你在推行設計系統時經常會遇到的誤區吧。
誤區1：過于局限
誤區：負責深入獨立業務的設計師看到的設計標準可能會與其他需求的不一樣，因此，他們會認為通用的設計系統過于局限，可能無法滿足某些特定業務的需求。
現實：設計師通常會設計出自定義的解決方案以滿足應用中的獨立的業務，從而增加了設計和技術的負擔。而使用設計系統，這些被設計的新解決方案可以被反饋到設計系統里面，使每個人都可以使用這些改進方案。
誤區2：缺乏創造力
誤區：如果設計師被限制在一個設計系統下做設計，那么他將不能去自由地探索設計風格。前端的工作通常包含著各種樣式風格的更新。對應用程序的風格進行改版通常不是一個小任務。這也可能是一個很大的風險，因為從事這項工作會移除一部分的舊資源，可能會對可用性產生負面影響。
現實：設計系統的組成部分是相互關聯的，這意味著當一個位置進行更改時，這項更改會在整個系統中同步，這使得系統內的樣式更新工作變得輕而易舉，但影響卻大得多。以前是幾周甚至幾月的工作量，現在可以在一個下午就能完成。
誤區3：一勞永逸
誤區：設計和構建完設計系統后，工作就完成了。
現實：設計系統是有生命的，這意味著需要不斷對其進行維護和改進。但是由于應用是由設計系統的復用性組件提供支持的，因此該應用會自動同步設計系統的改進內容，從而減少維護應用程序的工作量。這就是設計系統提供的擴展能力。
設計系統不是一時流行的方法，也不是未經檢驗的假設。為了讓設計找到與技術的快速發展相匹配的同等方案，基于組件的設計和開發是一種行之有效的可靠解決方案。
現在你已經了解了創建設計系統的真正價值，讓我們在下一章中深入探討實際的設計過程吧。
文章來源：優設 作者：彩云譯設計
奔馳法（SCAMPER）是能夠幫助我們拓寬解決問題的思路檢查列表。在解決問題的過程中，如果感到束手無策，可以嘗試從列表中顯示的方向重新思考問題，從而打開解決問題的思路。你將通過本文熟練掌握其運用方法。
SCAMPER 是七個英文短語的縮寫，同時也代表著七個解決問題的方向，這七個方向是：
SCAMPER 法的具體實踐步驟：
麥當勞家喻戶曉的知名度得益于極具傳奇色彩的麥當勞創始人雷·克羅克先進的經營理念。畢竟麥當勞的出現讓人們的生活模式發生了翻天覆地的變化。時至今日，我們仍然可以從麥當勞的商業戰略中識別出 SCAMPER 法的蹤跡：
替代
這里需要考慮的總體問題是：何物可被「取代」？
尋找當前選項的替代選項。這些替代選項可以是人，物或方案等一切等同于現有選項的東西。例如產品的替代材料，服務的替代方案以及后備人員等。
思考清單：
整合
這里需要考慮的總體問題是：可與何物合并而成為一體？
將現有產品和別的產品或系統結合在一起使用，或者能否與其它產品合并而成為一個整體？
思考清單：
調整
這里需要考慮的總體問題是：原物是否有需要調整的地方？找出所有可以調整的選項。
思考清單：
修改
這里需要考慮的總體問題是：可否改變原物的某些特質，如意義、顏色、聲音、形式等？修改現有的所有或部分選項，重新組合出新產品。
思考清單：
另用
這里需要考慮的總體問題是：可有其它非傳統的用途？不斷尋找現有產品的新用途，將現有產品推廣到新地方。
思考清單：
消除
這里需要考慮的總體問題是：可否將原物變??？濃縮？或省略某些部分？使其變得更完備、更精致？消除不必要的選項，減少不需要的功能。
思考清單：
逆反
這里需要考慮的總體問題是：可否重組或重新安排原物的排序？或把相對的位置對調？重組或重新安排選項的順序，或把選項的位置對調。
思考清單：
這個檢查列表最早是為頭腦風暴設計的，旨在激活參與人員思路，起到發散思維的作用。心理學家羅伯特·艾伯爾總結了這些列表并做出最終的解釋。目前奔馳法主要用在產品改造和服務升級的過程中，但它對普通問題的解決也有幫助作用。
文章來源：優設 作者：陸小鳳不傳奇
品牌 IP 化最大價值在于：通過挖掘品牌的人性，賦予性格、文化、價值觀更像一個有血有肉有靈魂的人，通過持續的內容生產，吸引用戶參與，進而使用戶產生精神共鳴，在與用戶產生關系的過程中給予情懷和溫度、最終實現商業價值。
IP 在百度上解釋為：（Intellectual Property）知識產權，指的是通過智力創造性勞動所獲得的成果，并由勞動者享受成果的專有權利，是一種無形財產。現在市面上見到的 IP 現象呈現出來的是一種新商業現象、新商業模式、一種新的思維方法，比如我們見到的漫畫、電視劇、明星、小說、游戲等……
用一句話解釋：IP 就是自帶流量、散發魅力、可以吸附粉絲、商業轉化。
十多年前，品牌設計被叫做企業形象設計（VI），他的基本要素就是：企業 logo 圖形、標準字、輔助圖形、吉祥物設計等。設計師通過創意設計出簡潔生動的圖形傳遞品牌的形象，這個圖形就像一個符號占領用戶的心智。
企業的最終是要售賣產品達到盈利的目標，就要投入大量的成本去各種渠道推廣品牌形象，比如燈箱廣告、電視廣告、車體廣告投入等，以保持品牌曝光度。
1. 品牌IP化
近十年來，在早期一些互聯網品牌變化中，我們發現京東、天貓、當當、國美……很多品牌都在打造動物形象。
從 2016 年開始，各個企業的品牌設計出現的一些新的方向，他們打造符合品牌的 IP 形象符號或者 IP family，比如知乎劉看山、 AcFun 的 AC 娘、嗶哩嗶哩的 2233 娘、QQfanmily、MTfamily，用一些傻呆、萌、賤、騷等個性鮮明的形象吸引粉絲，獲得用戶對品牌的好感度。
傻呆、萌、賤騷的個性IP形象：
IP族化：
從過去品牌設計發展到如今品牌 IP 化后，品牌逐漸變得有溫度、有人格靈魂、更容易互動了。
1. 從理性功能定位轉變到情感精神寄托
品牌設計在推廣中強調的是產品功能，屬于漏斗式輸入。而品牌 IP 化追求的用戶對價值和文化認同，提供給消費者的是一種情感的寄托。比如《故宮》不再是過去威武嚴肅的印象，以俏皮、賣萌的周邊形象深受年輕人的喜愛，故宮的文化、傳統元素也找到了新的傳承渠道。
2. 用戶購買行為由需要轉變為熱愛
品牌是通過傳統的定位理論占據用戶的心智，當用戶需要什么產品？選擇什么品牌？是根據產品融入腦海中品牌理念而選擇了這個產品。比如當我們需要買去屑洗發水選擇買海飛絲洗發水。
品牌 IP 后在一定程度上弱化了品牌，利用天生形象優勢、人格魅力、深受用戶追捧。用戶的購買行為是感性的，由內心熱愛驅動購買。比如愛莎這個形象深受女孩子的喜愛，有關愛莎的裙子、玩偶、繪本、電影等孩子會不顧一切要求購買。
對于企業來講，是否可以生產一些吉祥物就可以進行品牌 IP 化嗎？
其實并不是那么簡單！品牌 IP 化遠遠不止于做一個動物卡通形象就可以了。我們在前面說到在 2012-2015 年互聯網品牌大量采用動物形象，但是他們并沒有形成品牌 IP 化。
判斷品牌 IP 化的三個特征是看品牌 IP 化后是否具有內容持續生產力、跨界連接力、商業衍生力。
1. 品牌IP化可以持續輸出內容、具備內容生產力
品牌 IP 化通過自身角色和人格設定，吸附更多的用戶的喜歡和追捧。品牌 IP 化的形象可以成為一個優質的內容源，提供持續的優質內容，不斷引發與用戶的關注和互動。
內容具有持續性：
line 在全球深受粉絲的追捧，這很大一部分原因在于 line 不斷持續制造內容。line 最初是韓國的一家通訊公司，2013 年因為表情包深受用戶的熱愛，并因此帶來 10 億的收入，之后 line 打造了ugc模式，由用戶創作表情上傳帶來 147 萬美金的收入。此后幾年持續創作有新成員加入，制作新的熱點和內容。
2016 年布朗尼妹妹丘可加入
2. 品牌IP化具有連接力，可以連接用戶、跨平臺、跨品牌連接不同圈層
連接不同圈層：
在以往品牌對產品的推廣上，由于產品特點、行業本身的壁壘，品牌難以跨越圈層和其他品類進行營銷方式上的更多嘗試，而 IP 營銷則打破了這一壁壘，跨越了產品品類和行業的界限，帶來了營銷方式和品牌創新上的更多可能。
比如 linefrineds 與京東、天貓、優衣庫、VANS、悅詩風吟、施華洛世奇合作推出了很多聯名款的產品：T 恤、護膚品、項鏈、運動鞋等。這些合作跨越了行業、品牌等。
連接粉絲或用戶：
最初，熊本熊只是熊本縣政府宣傳案的「副產品」，但這只熊火爆程度比肩哆啦 A 夢。在形象產生一個月便策劃一系列神奇而瘋狂的事件，比如聘任熊本熊為臨時公務員，熊本熊大阪失蹤，尋找腮紅事件等。這些具有熱議感、刷屏感、卷入感事件曝光和粉絲持續產生了連接。
品牌 IP 化賦予鮮明的形象與性格，這樣形象與性格能與用戶產生更近的互動，當這個形象持續產生內容輸出后，讓用戶會產生更強的參與感、立場感，品牌與用戶也就更強地連接一起。
延伸閱讀：熊本熊之父的故事
3. 品牌IP化具備衍生力，實現商業閉環
品牌 IP 化只是品牌在互聯網時代的一個新的工具或者方法論，最終都是要實現商業價值。要想實現商業變現、長久發展，必須有不斷跨界合作、衍生周邊產品和服務的能力。比如 line，最初由一個卡通形象，慢慢發展到漫畫、表情、周邊。他可以在不同時代捕捉到當下的流行，并與之緊密結合，達成品牌 IP 在不同品類和不同時期都保持強有力的衍生變現能力。
品牌 IP 化最大價值在于：通過挖掘品牌的人性，賦予性格、文化、價值觀更像一個有血有肉有靈魂的人，通過持續的內容生產，吸引用戶參與，進而使用戶產生精神共鳴，在與用戶產生關系過程中給予情懷和溫度、最終實現商業價值。
文章來源：優設 作者：詠舍
數據可視化是傳達信息的最好的方法之一，它可以直觀地呈現數據，快速吸引用戶的注意力。但是如果設計師對圖表設計的理解有偏差，在界面呈現上可能會對用戶產生錯誤的引導，因此筆者結合自己的工作經驗對圖表設計進行總結，希望每位設計師都能成為優秀的數據搬運工。
下面我將從功能、交互和UI深挖圖表設計的各個知識點，敲黑板劃重點咯～
1.概念
圖表泛指在屏幕中顯示的，可直觀展示統計信息屬性（時間性、數量性等），對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地“可視化”的手段。
如果說表格可以承載數據的全面性，那么圖表可以完美展現數據的特點和變化，它對數據的解讀能力是表格無法做到的。
2.使用場景
(1)比較數據差異情況。基于分類的數據，可以通過比較數據來了解不同分類的差異，比如柱狀圖?；诹鞒痰臄祿?，可以通過比較數據了解數據的變化趨勢，比如折線圖。
(2)分析數據關聯情況。展現數據間相互關系和數據的流向。比如桑葚圖。
(3)查看數據分布情況。對于錯綜復雜的變量之間關系，可以通過圖表來找出規律。比如利用氣泡圖進行回歸分析。
(4)了解數據構成情況。發現各變量的占比情況，比如餅圖。
3.原則
(1)輕量。眾所周知表格是可以承載數據的全面性，但將相同的數據用可視化展示時，設計師總想將所有的信息堆砌在圖表上，顯得圖表非常笨重，因此增加了用戶的思考時間。在此建議明確你圖表類型的特點，將主要信息呈現在圖表上或者分層展示圖表，比如數據鉆取功能。
(2)直觀。設計師應該將數據信息清晰而直觀地表達出來，使用戶一眼就能洞察事實，更快地發掘商業價值并作出決策。
(3)美感。缺乏美感的數據可視化僅僅是數據展示。美感包括兩個部分，第一個部分是整體協調美，比如對圖表中的各個元素（標題、網格、坐標軸、縮略軸、圖例、提示信息、預警線和輔助線等）進行合理的排版和使用協調的配色。第二部分是局部細節美，比如設計師根據流行趨勢給圖表加上漸變色。
我將用一種最復雜的圖表類型-雙軸圖當作示范。
1.標題。包括左對齊、居中對齊和右對齊。在選擇某種對齊方式前，請兼顧圖例的擺放位置。
2.柵格。包含點狀、線狀和斑馬線。
(1)根據數據特點選擇橫縱向輔助線，橫向引導線增強水平方向的導視。縱向引導線增強垂直方向的導視。
(2)線狀建議用虛線，因為不是用戶確定指向值。
4.縮略軸。包括滑面和滑柱。
(1)拖動滑柱滑動，增加或較少滑面，從而改變查看密度。
(2)拖動滑面滑動，保持滑面長度，進行前后移動。不改變查看密度，只改變查看范圍。
5.圖例。離散型數據包括橫向排列和縱向排列，連續型數據包括連續圖例。
(1)所有圖表類型的排列方式要統一，所以要考慮整體的圖表空間是適合橫向排列，還是縱向排列。
(2)所有形式總長度超過內容區換行或換列。
(3)雙軸圖包含了2種圖表類型，不同類型的圖例樣式要有所區分。
(4)連續型數據通過漸變色來展示數據大小的變化。
7.預警線。數據超過閾值就會報警，幫助用戶監控數據。
(1)預警線建議用實線，并用警示的顏色引起用戶的注意，最好用郵件或短信通知用戶。
8.輔助線。用戶設置某值作為數據參考進行比較，比如設置平均分為參考數值。
(1)輔助線建議用虛線，僅起參考作用。
1.加載方式。加載動畫建議使用和圖表相關的樣式。
2.排除異常值。允許用戶剔除高度異常點，因為異常值會影響用戶對整個圖表的分析。
3.數據鉆取。單擊某個數據可以看到該數據的詳細信息，變換分析的粒度。
4.適配
(1)增減留白。圖表大小固定不變，只是增減留白空間。
(2)等比縮放。圖表的長寬都以相同比例縮放。
1.顏色
(1)顏色主題
1)深色背景。適合較少信息內容。
優點：可以通過布局建立良好的視覺層次，深層次地反映內容，而且視覺吸引力強，給人以高端的視覺感受。
缺點：可讀性低。頁面太過聚焦所以對留白的平衡要求較高。
2)淺色背景。適合較多信息內容。
優點：可讀性高，增加了頁面空間。
缺點：內容不聚焦，信息過少則頁面顯得太空。
(3)顏色生成規則。一個變量統一用一種顏色，再按配色方案依次出每個變量的顏色。 使得同一圖表的色彩搭配和諧且具有美感。
(4)視覺缺陷。世界上有一部分人群有視覺缺陷，他們無法通過顏色來得到來精準地區分圖表的維度和變量。作為設計師不能忽略這部分較為龐大的特殊群體。
設計師常用的PS和AI提供了模擬紅色盲和綠色盲的校樣設置，選擇“視圖—校樣設置—紅色盲型/綠色盲型”。
想要從根本上解決這個問題，推薦一篇騰訊設計師的文章信息圖形中的顏色探討—面向色盲人士友好的設計解決方案。
2.布局
視覺層級要符合邏輯層級，利用信息深度引導用戶閱讀。每個元素要保持一致，保證布局的整體協調。
3.插畫
符合主題和整體基調，簡單易懂，數據可視化具有一定的認知門檻，有時候需要插畫來提高用戶的理解力。
4.留白
信息過多容易造成視覺壓力，合理的留白可以增強用戶對信息的吸收能力。
5.字體
避免有個性的襯線字體，字體要保證清晰可見。字體大小適中，太小影響閱讀，太大容易占用圖表控件。普通字體大概12px，標題用14px。
1.使用大廠開放的圖表庫
圖表庫的圖表類型豐富且統一，而且大大節省了開發時間，比如百度的Echart和阿里的G2。
2.在專業數據分析網站獲取靈感
筆者剛開始學習數據可視化就是拿著數據表格不停地在競品上摸索，作為一名用戶去感受這些圖表的交互體驗。這里推薦一份數據可視化網站名單。
1.先懂數據，再談可視化
為此我們要了解圖表類型的適用場景和局限，可以看33種經典圖表類型總結，輕松玩轉數據可視化。了解這些可以幫助大家通過UI設計更好地展現圖表的特點。比如展示各地區的人口密度，可以用柱狀圖來展示，但是我們發現用地圖會更加接近用戶的期望。
2.為了數據，過度可視化
很多時候設計師在圖表上很難展現自己的設計功力，從而會給圖表增加過多的視覺效果，比如3D效果。
3.真實數據，友好可視化
數據產品不要試圖去掩蓋問題，而要反映真實數據，暴露問題，并且和用戶一同解決。比如對數據閾值進行監測，預警線就是很友好的可視化方式。
轉自：簡書
作者：idatadesign
鏈接：https://www.jianshu.com/p/816f10b7d594
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
現如今無論是工作匯報，產品設計，后臺設計甚至是數據大屏，越來越多的設計師需要和數據打交道。尤其是想要做B端的設計師，數據可視化更是必不可少的一個技能。數據可視化，可謂是越來越體現一個設計師的專業能力。
因此掌握數據可視化能力，是面向未來的設計師所必備的能力。然而尷尬的是，國內沒有一款針對于教學數據可視化的全套解決方案，這讓很多渴望學習的設計師摸不著頭腦。所以這也促使我開啟了這個系列――「設計師需要了解的數據可視化」，希望能夠給大家帶來一些不一樣的內容，為大家梳理一個完整的數據可視化框架。
今天帶來的就是這個系列的第一篇，數據可視化的概念以及數據可視化設計的基本準則。最近一直在做國際外包，時間非常的零散，而寫邏輯性強的文章又非常耗費精力。所以從開題到現在，用了將近2個月的時間才將這篇文章徹底收尾。全文總計25000字左右，閱讀需要20分鐘左右，干貨滿滿，請大家做好準備。（如果沒有時間，我之后我也會將該內容錄成音頻，如果有興趣，可以持續關注我）
什么是數據可視化
數據可視化就是借助視覺的表達方式（不局限于文字），將枯燥的，專業的，不直觀的數據內容，有趣的、淺顯的、直觀的傳達給觀眾的一種手段。
非設計師在制作數據可視化時，往往會因為重點突出數據的重要性，而讓可視化圖表變得枯燥乏味。而設計師在制作數據可視化時，又會因為過度注重絢麗多彩而讓數據的呈現效果大打折扣。所以在這種大環境下，催生出了數據可視化行業。作為設計師，如何擁抱這個新興的行業，如何把握設計與功能之間的平衡，從而更好的溝通與傳達信息，即是本文的重點。
信息圖表，就是數據可視化后產生的結果，就是我們在工作匯報中，項目介紹中，以及后臺系統中經常見到的數據圖表。信息圖形由信息和圖形兩個詞語組成，它被稱之為「信息圖形」(Infographics或Information Graphics)。
信息圖形最初是在舊的紙質媒體上刊登的，更加有助于人們理解新聞信息的可視化內容。
信息圖表的分類
根據木村博之的定義，從視覺表現形式的角度，將「信息圖表」的呈現方式分為六大類：圖解(Diagram)、圖表(Chart)、表格(Table)、統計圖(Graph)、地圖(Map)、圖形符號(Pictogram)。
1. 圖解—主要運用插圖對事物進行說明
文字有時候是一種匱乏的信息傳遞方式，而可視化的方式，則是人類最本源的一種信息傳遞方式，圖解就是將很多無法準確或用語言傳達的內容，以生動形象的圖形解釋出來。下圖是一張經典的對于咖啡種類圖解，38種咖啡配方，不必要用多余的文字解釋，直接用圖解表示，簡單明了，清晰易懂。
2. 圖表—運用圖形、線條及插圖等，闡述事物的相關關系
圖表通常用于簡化人們對于大量數據之間的關系的理解。人們通常理解圖表會比理解數據要快很多。圖表和圖解唯一的不同點在于，圖解是用可視化的方式去傳遞信息，而圖表則是用來去闡述信息之間的邏輯關系。流程圖就是典型的圖表。
下圖是一張寵物狗的進化圖，用巧妙的方式清晰地向我們傳遞了，狼是如何被人類馴化成不同種類的寵物狗的。
3. 表格—根據特定信息標準進行區分，設置縱軸和橫軸
表格是按照行和列或者采用更復雜的結構排列的數據，表格廣泛應用于通信、研究和數據分析。其實表格并沒有一個確定的定義，它會因為不同的行業和談論環境而存在差異.
4. 統計圖—通過數值來表現變化趨勢或者進行比較
統計圖是根據統計數字，用 幾何圖形 、事物形象和地圖等繪制的各種圖形。它具有 直觀 、 形象 、 生動 、 具體 等特點。統計圖可以使復雜的統計數字簡單化、通俗化、形象化，使人一目了然，便于理解和比較。因此，統計圖在統計 資料整理 與分析中占有重要地位，并得到廣泛應用。
下圖是大城市通勤的時長統計，通過這些柱狀圖，我們能很清晰的看出各個級別的城市通勤時長的比例關系，并了解他們的擁堵時長和非擁堵時長分別是怎樣的情況。
5. 地圖—描述在特定區域和空間里的位置關系
將真實的世界轉換為平面，在此過程中必然要講一些東西略去。實際上，要說「省略」是地圖上最關鍵的詞也不為過，無論是哪種信息地圖，最重要的是讓用戶找到想要看到的信息。
信息地圖也可分為兩大類：
第一類，將整個區域的布局或結構完整呈現的地圖。
第二類，將特定對象突出顯示的地圖。
以下是美國各州擁有槍支人數占總人數的百分比統計圖。
6. 圖形符號—不使用文字，直接用圖畫傳達信息
所謂圖形符號（也就是我們常說的icon），基本就是通過易于理解、與人直覺相符的圖形傳達信息的一種形式。生活中處處存在圖形符號，包括地鐵站出入口上的地鐵標識，路邊的指示牌與限速標識。人們會約定俗成的運用一些符號來代表一些固定的意思，比如廁所門口的男女標識，很多商店為了個性化設計，使用了不常用的符號來表示男女，這會給消費者造成很大的困擾，因為這脫離了他們常見的理解范圍。
圖形符號的設計原則是盡可能不使用文字，其作用有兩條：
避免語言不通造成的困擾。
更便捷的、更清晰的傳遞信息。
多年來，最經典的圖形符號應用案例可以說是奧運會和殘奧會的運動圖標了。圖形符號可以說已經成為奧運會和殘奧會的重要組成部分，就像火炬傳遞和運動會LOGO一樣，從賽事門票到奧運村的品牌，圖形符號都在被廣泛使用。
下圖即為東京奧運會的運動圖形符號（局部）
達到數據可視化目標的基本方法
目前我們工作中經常遇到的數據可視化，大多數是制作數據圖表（即統計圖 Graph），所以我們本文的主要教學內容也是圍繞著如何制作統計圖來說。
制作統計圖的過程可以被四個步驟，分別是：明確目的、選擇圖表、視覺設計、突出信息。
明確目的：明確數據可視化的目標，通過數據可視化我們要解決什么樣的問題，需要探索什么內容或陳述什么事實，并選擇合適的圖表。
選擇圖表：圍繞目標找到能提供信息的指標或者數據，選擇合適的圖形去展示需要可視化的數據。
視覺設計：以可視化的手段將數據轉化成有趣的設計語言。
突出信息：根據可視化展示目標，將重要信息添加輔助線或更改顏色等手段，進行信息的凸顯，將用戶的注意力引向關鍵信息，幫助用戶理解數據意義。
1. 明確目的
大多數情況，明確圖表本身要達到的目的，比制作好圖表本身更加重要。如果對數據認識不清，就會造成2種結果：
無法擬定合適的圖表標題，從而使讀者失去閱讀圖表的興趣。
無法選擇出正確的可視化方式，從而使圖表難以理解。
知識點 01：好的圖表標題 ―― 等于成功的一半
大多數圖表都需要一個好的標題，這樣才能讓面試官知道他們在看什么。
標題應該是一個結論，是你希望面試官從中獲得的信息（有意義并且有趣的部分），而不僅僅是對圖表展示內容的概括（即無意義且無趣的部分）。
2. 選擇圖表
Andrew Abela 根據統計圖的主要功能，將所有的統計圖分為了四大類：比較、聯系、分布、構成。在其資料的基礎上，我制作了一套更適合設計師的「圖表選擇器」（The Way of Data Visualization）。
所以作為新手的我們，只要能熟練掌握這六種圖表，即可應付大部分的使用場景，而對于我們這種更專業的人士來說，上述的「圖表選擇器」能夠大大提高我們的工作效率。
3. 視覺設計
接下來也是數據可視化中最重要的一步，視覺設計。很多時候我們在設計圖表時沒有既定的規則，全憑借在平面設計和UI設計中獲得的知識來進行設計。但之所以數據可視化被單獨細化成一個類別，并在國外蓬勃發展，甚至衍生出了專業的數據可視化設計師，就證明在數據可視化領域，很多規則是與其他設計不同的。
一個最簡單的例子，市面上大多數的配色方案都在數據可視化領域不適用。
毫無包容性的配色方案
首先，適用于數據可視化的配色方案，一定在明度上是有變化的。很多配色方案不僅不具備這種特性，甚至不會考慮包容性。UI設計的配色方案看起來都很絢麗多彩，但是很明顯，他們是為了用戶界面而設計的。色盲人士往往很難去閱讀那些運用了低包容性配色方案的可視化圖表。
沒有足夠多的顏色種類
另一個問題就是，大多數配色方案并沒有足夠多的顏色種類。
在構建一套完整的可視化圖表時，我們往往至少需要6種顏色的調色板來進行設計，我們見過的大多數配色方案并不具有這么多種顏色。
雖然這些配色方案同樣絢麗多彩，但是他們不能靈活應對圖表中復雜的信息層級。
難以區分層級的配色方案
漸變配色方案可以輕松解決上述兩個問題（顏色之間有明顯的對比，且可以無限細分顏色種類）。但很抱歉，這樣的配色方案同樣不適用數據可視化，我們舉一些簡單的例子大家就可以明白。
這些漸變色看起來沒什么問題，但是當我們選擇其中一個，將其顏色分類擴充到10時，問題就出現了。
你能區分出最左邊的4個顏色之間有什么差別嗎？恐怕很難。
前面的闡述，大多數是為了讓大家對數據可視化有一個清晰的概念。在「視覺設計」這一章我將重點講解，數據可視化（即圖表制作時）需要注意的設計準則。下面的內容主要解決大家在數據可視化中所遇到的三個問題。
如何制作數據可視化圖表？
如何快速的制作數據可視化圖表？
如何制作一份兼具實用性和美觀性的數據可視化圖表？
適用于所有圖表的制作規則
1. 圖表中的線條
有無刻度線
當數據的數值非常重要時，一定要使用刻度線來讓觀眾更清晰的了解數據。
如果你的聽眾只需要了解A數據大于B數據，那么刻度線是沒有必要的，只需在坐標軸上使用小刻度即可。如果你的讀者要花一些時間在柱狀圖上并感興趣A數據是45.65而B數據是37.66，那么使用刻度線將有助于他們理解。
刻度線的顏色
如果確定要使用刻度線，則需要使它們比作為實際數據的點或者線條要層級低。因為這些刻度線也屬于背景的一部分。
總結來說，不要使用全黑或者全白的線條。如果你的背景顏色是白色或者淺色系，那么你應該讓你的線條灰一些。你也同樣可以讓這些線條變成亮灰色，點狀或者虛線.
負空間的刻度線網格
你也可以使用灰色的背景，然后將刻度線反白。這是一種很好的利用負空間做設計的方法?；蛘呖潭染€可以用稍微偏黑色一點的灰色，因為很明顯這樣會讓刻度線更融入背景一些。
坐標線
坐標線應該比刻度線，線條更粗，顏色更深，才能讓整個圖表顯得更有主次的區分。
2. 選擇合適的坐標上下限
選擇合適的坐標下限
一般來講，我們應該把我們的坐標下限設置為0。
有人會問，這樣的話我們的數據就會變得沒有那么起伏變化了。那可能是因為你的數據本身就沒有那么長勢喜人。
但同樣，其實很多事情可以反過來思考，之所以有人愿意不把坐標軸設定為0為起點，其實就是為了在視覺上讓人形成對比強烈的感覺，從而突出業績。這種方法的使用因人而異。
比如在小米的發布會中，為了對比，小米把數據的下限起點設置為了10000，從而使小米的跑分數據看似跑贏了友商一倍還多，但其實小米的數據增長，只比友商高出了25%。
再舉個例子：這張條形圖也是經福克斯新聞準許使用的。
3月31日目標的值為7,066,000，比6,000,000高17.8%，然而第二個柱形幾乎是第一個柱形長度的三倍。
這也同時提醒我們要注意，在觀看別人的圖表時，僅僅觀看柱狀圖的高低趨勢往往不能得出正確結論，需要注意坐標軸起始位置有沒有被人做過虛假處理。
同樣的，有些人為了匯報業績，也會使每個刻度的跨度不一致，從而提高柱狀圖整體的對比度。這種情況也應該多留心觀察，不要被表面的內容所迷惑。
選擇合適的坐標上限
坐標軸中另一個需要注意的點即為坐標上限。上限界定的方式有兩種，可根據需求自行判斷。
如果只是為了比較各個數據的數值，可以用數據的最大值作為坐標軸上限。
如果是需要將數據與某個最大值比較，則用此最大值作為上限.
3. 刻度值
雖然Y軸的刻度值標簽通常放置在刻度線的最左邊，但我們也可以把它們放置在其他的地方，比如刻度線的頂部。（但此時一定要把握好親密性原則，稍不注意就會引起觀眾的困惑，這也是我們經常會在看其他圖表時遇到的問題，到底刻度值標記的是哪一條刻度線？）
刻度線和刻度值相輔相成，這會讓圖表看起來更加規范?？潭戎捣胖迷谀睦餆o所謂好壞，只是需要根據不同的場合加以使用。
間隔均勻
在坐標軸上應該使用均勻的跨度0,5,10,15,20，而非不均勻的跨度0,3,5,16,50。這里即呼應上方「坐標軸下限」中的最后一點，有時圖表制作人也會用不均勻的刻度來蒙騙我們對數據產生誤解。
當然，此處的舉例只是夸大了錯誤的效果，現實生活中的不均勻刻度往往更加隱蔽，需要我們仔細去甄別。
不要使用非水平和豎直的文字標注，也不要使用轉行
有時坐標軸上的注釋文字會很多，所以很多人為了妥協，在小空間內顯示出所有的文字標注內容，而使用傾斜的文本，或者將文本轉行處理。
不要用過于復雜的設計形式，數據可視化的第一要義是簡單易懂，所以在遇到標簽文字過長時，可以采用以下方法進行解決。
4. 數據的處理與排序
我們在每次制作前都對數據進行排序，而不是隨機排布。這樣我們可以在圖表中為觀眾展示更多信息，即某個數據在總的數據庫里面的序列。
大小排序
我們還是從一系列國家的數據開始。
目前的排布很隨機，或者是按照字母表排序的。接下來我們要按照數值從大到小進行排列。
我們隨機挑選一組數據，比如玻利維亞(Bolivia)，再上圖中，我們只能得到玻利維亞的數據值，以及他大概在數據庫中排在中游的位置，僅此而已。但是下圖中，根據大小排列好的數據，我們不僅可以獲得剛才的兩個信息，同時還能馬上知道玻利維亞在整個圖表中的排名（第四名）。同時你還可以看到吉爾吉斯斯坦（Krygyzstan）和越南(Vietnam)居于榜首而美國(America)是倒數第一，這就是好的圖表能給我們帶來的「更多的信息」。
我們再看一遍按照字母表排序的圖表，你能輕易的輸說出「岡比亞(Gambia)」排名第幾嗎？
刻意的序列
在發布會中我們常常見到，為了突出自己產品的強悍，往往要與友商的數據做對比，在這種情況下，我們的數據也不是隨機排布的，我給這種數據排布方法起了個名字，叫「刻意的序列」。
在 魅族 16th 的發布會中，這張旗艦機重量對比的圖表很有講究，可以發現，除了索尼（最重的手機）以及 魅族 16th（最輕的手機）外，其余所有的手機都是按照降序排列。不看顏色對比，把 236g 的索尼和 152g 的魅族放置在一起進行講解，以更加突出魅族的輕薄。
那么這個圖表的數據排序其實經過了三次處理。
把重量從高到低排序。
把重量最高的和的手機單獨放置，并給予特殊顏色單獨顯示。
把這兩個數據放置在最后，再次突出對比，吸引觀眾注意。
這就是我們學習數據可視化時非常需要注意的細節點，在數據可視化中，細節決定成敗。
5. 關于圖例的設計
數字需要四舍五入
我們有時為了保證圖表的清晰整潔，并不能完全選擇符合數據上限和下限的數字作為刻度，而是選擇一些取整的數字。
同樣的，這不僅僅適用于圖例中的數字，同樣適用于坐標軸上下限的數字。
標記圖例的邊界比標記圖例的范圍更好
在需要用多種顏色做區分的圖表中，有時可以通過標記圖例邊界而不是標記圖例范圍的方式，來提高觀眾的閱讀效率。
水平或者垂直方向的圖例
對于數字的刻度，水平圖例往往比垂直圖例更加容易閱讀，因為這符合我們的閱讀習慣。
但是，對于有類別區分的圖例來說，垂直圖例往往效果更好，因為我們可以在圖例的右邊放置更長的文本（跟坐標軸的注釋同樣的道理）
刪除內部邊界
有時我們甚至可以更簡約的表示圖例，當你只想表達一個漸進的過程，24和55之間的差異并不重要，觀眾只需要知道后者比前者大即可。在這種情況下，我們可以嘗試只標記出圖例的最大值和最小值，而不必要標記出每個邊界或者顏色，這樣可以給觀眾減少不必要的信息負擔。
6. 圖表上的文字信息
文字標注的作用，不是來填充空白的，而是用來強調相關信息或拓展額外的背景知識的。
引用消息來源
大多數情況下，我們制作的圖表都不會將原數據附在旁邊，因此最好在圖表中引用你的數據來源。一般來說，引用規則是在左下角防止數據來源信息，往往采用特殊字體
用數字輔助表達
有時你需要在你的圖表中標注出數據值，而不僅僅應該依賴視覺元素向觀眾傳達信息。
通常來說，不需要太嚴謹的圖表，我們會對數據值進行一定程度的處理。
有小數的值四舍五入。(234.19 ―― 234)
在數據的量級非常大時，將一定位數數字取整。（52,133 ―― 52,000)
當所有數據的量級都非常大時，將一定位數的數字縮進單位中。（521,000,000 元 ―― 5.21 億元）
Y軸刻度值盡量轉化為千位分隔符，如K，M，B。
Y軸最大值取值要恰當，保證圖表占據2/3以上。
如果我們不這樣處理，你就會發現你的圖表總是不那么整潔。
7. 控制字體的數量
圖表中的字體數量以及字體大小的種類加起來不要超過3種（標題和副標題除外）。通常來說，我們在制作時會把注釋和坐標軸標簽設置為兩種字體樣式，所以只需要確保將這兩者統一起來，那么就可以保證我們的圖表不超過3種字體樣式。
柱狀圖的制作規范
1. 柱狀過寬或過窄
過寬的柱會讓圖表看起來笨重，盡量保持柱的輕薄，這樣可以保持優雅的外觀，但是太薄了會讓用戶很難對數據進行比較。
標準的數值為，柱的寬度為「柱與柱間距」的2倍，當然這只是個參考值，實際我們根據不同的情況，對寬度作出調整。
2. 盡量不要超過7個值
一般進行數據比較時，柱狀圖建議不要超過5個數據值，對于條形圖來說，建議不要超過7個數據值。
折線圖的制作規范
1. 有層次區分的折線/曲線
當我們在制作一個復雜的折線圖時，我們想要顯示其中的一條數據，最好的方法就是加強它與其他元素的對比，從而提高它的重要性層級。
利用我們之前的方法，把其他的數據變為灰色。
將我們需要強調的曲線置于頂層。
2. 什么時候是用折線圖
2017年1月和2月的大米出口量是相關的，他們代表一種數據在不同時間下的數據值，因此我們可以用折線圖將它們連接起來。但是2017年1月的大米出口量和玉米出口量（16萬噸）是不相關的，所以我們不能隨便用折線圖來代替柱狀圖。
用折線圖可以很好的表示每天去醫院的人數，因為統計每天去醫院的人數可以用來觀察趨勢。
3. 按照時間推進的數據并不能總是用折線圖來表示
有時我們也需要進行一些區分。如果我們想要繪制美國大規模槍擊事件的傷亡人數隨時間推移的圖表。這些槍擊事件確實是一個接一個發生的，但是它們本質上卻沒有關系，所以你不能用折線圖（應該用條形圖）。
但是，如果按年份對它們進行歸類，并計算每年的傷亡人數。這樣的情況下可以使用折線圖進行統計，因為統計結果的趨勢變化是有意義的，是可以得出相應的結論的。
4. 使鋸齒狀的線條平滑
如果你的折線上下浮動過于劇烈，那么你應該嘗試拉長時間間隔，比如不每天采樣而以周為單位來采樣。觀眾們不會去閱讀鋸齒狀的線條，或者說他們不會喜歡這樣的圖表。
5. 在你的折線圖中繪制數據點
當有些特定的數值特別重要時，我們可以在線條上標注出他們，如果你有大量的數據需要展示，或者你只想展示數據的走勢，那么其實你只需要使用折線就足夠了，不需要增加數據點。不信你可以試試，大量的數據點 = 混亂不堪的界面。
餅圖的制作規范
餅圖和圓環圖在數據可視化方面生病狼藉，但卻是使用的最頻繁的圖表之一。餅圖是一種應該避免使用的圖表，因為肉眼對面積大小不敏感，并且幾乎沒有對與角度大小的概念。更何況是肉眼完全無法重合比較的圖形。
例如上面左圖，我們很難去比較每日從肉類（Meat）中攝入的卡路里與從糖類（Sugar&Fat）中攝入的卡路里數量的比例。人眼的直覺中，糖類與肉類的比例應該在2：1左右，但實際的比例卻是1.5：1。
上述右圖將這一現象放大的更加明顯。人眼的直覺中，辦公與接待的數值差距非常大（這是由于我們直覺更習慣從面積上做判斷），但實際上接待與辦公的比例為1.5：1。
很多設計師認為餅圖應該是被禁止使用的圖表，我覺得不能說的太絕對，不管怎樣，迄今為止事實情況是，仍然有很多人在使用餅圖，所以我們至少可以爭取正確的使用他們。
雖然如此，但是在強調個體與總體的比例關系方面，餅圖還是有其獨特的優勢。
1. 避免過度分割餅圖，否則最終會導致根本無法閱讀
那么有同學會問：分割多少塊是過度分割？這是一個需要在實際制作時進行判斷的問題。一個簡單的方法，如果我們已經很難從圖中看出其中一塊扇形是另一塊的兩倍大了，或者好幾塊較小的扇形看起來差不多大時，那么就不能再分割了。此時可以考慮把較小的類目歸入一個更大的：「其他」模塊。
如果一定要給出一個確切的分類數目，我認為一般不要超過9個，超過的話，建議用條形圖來展示，不要太依賴于餅圖。
例：這張餅圖來自維基百科，它展示了國家的不同區域。
左邊這張餅圖已經分割出了無數個扇形了，但旁邊另分離出一張餅圖，顯示出了左圖中更多的，看不到的更小國家的情況，以此來提供更多的信息。其實還有很多的方法可以展示這組數據，例如樹狀圖或者普通的地圖。局限較大的餅圖只適用于展示只有幾組值的數據。
除餅圖外，環形圖（甜甜圈圖）亦可表示占比，其差異是將餅圖的中間區域挖空，在空心區域顯示文本信息，比如標題，優勢是其「空間利用率更高」。
2. 餅圖的起始位置要得當
人們的閱讀習慣往往是從12點鐘開始的（跟表盤類似）。所以我們在制作餅圖時也要遵循觀眾的閱讀習慣，從12點鐘方向開始制作，這樣才能呈現出更加清晰的數據。
3. 餅圖的順序要得當
這個規則與其他的數據圖表一致，我們在拿到數據后，不要急于去進行數據可視化，而是應該對數據進行排序處理，一般來講，我們對于圖表都要進行從大到小的數據排序，才更有利于我們展示數據，但是有一個例外的情況。
當數據中包含一個類別叫「其他」時，無論其他的內容占比為多少，我們最好都把他放置在餅圖的最后來展示。
4. 切割的展示方式
有時，我們可以想一些創意形式來解決餅圖對比不夠明顯的問題。
當我們將餅圖分拆開來設計時，將他們設置為同一起點，我們可以清晰的對比出數據的大小，但嚴格意義上來講這已經不算是餅圖了。
散點圖的制作范圍
1. 散點圖可以承載最多四個維度的變量
當包含多重變量時，散點圖本身包含2個維度的數據，當出現更多維度時，我們可以通過改變散點的顏色和大小甚至是形狀來對數據進行更多維度的劃分，這個時候，散點圖即變成了氣泡圖。
2. 盡量為散點圖添加趨勢線
通過添加趨勢線，可以更好的讓觀眾感受數據的變化，人們不會愿意接受未處理的數據，往往傾向于接受已經被處理好的數據結果。
面積圖的制作規范
面積圖又叫區域圖，與折線圖很相近，都可以用來展示隨著連續時間的推移數據的變化趨勢。區別在于，面積圖在折線與類別數據的水平軸（X軸）之間填充顏色或者紋理，形成一個面表示數據體積。相對于折線而言，被填充的區域可以更好的引起人們對總值趨勢的注意，所以面積圖主要用于傳達趨勢的大小，而不是確切的單個數據值。面積圖有三種不同的形態，根據數據以及背景的不同，均有其最佳的展示環境。
1. 盡量不重疊，使用透明色
當圖表中要展示多組數據時，最好保證所有的數據都不重疊，這樣才可以更好的展示數據。如果無法避免重疊，則應該適當的設置顏色和透明度，使得重疊的區域變得更加易讀。
2. 不要超過四個類別
面積圖只適合展現少量的數據，最多建議不要超過四個類別，否則就會導致非常難以識別。因此在多個類別下，要盡量避免使用面積圖。
突出信息
1. 重要的內容用顏色區分
有時我們為了突出展現某部分數據，需要對它們進行特殊的處理（包括添加輔助線，更改顏色，線條粗細等方法）來加大它們與其他數據的對比，以吸引用戶注意，并表明你想陳述的觀點。
如上左圖，通過添加輔助線和標紅的方式，來顯示快遞公司未達到60萬件派件標準的月份，從而突出顯示公司業績不合格部分。如上右圖，通過對9月份的顏色區分，來突出顯示二手房價格在9月份達到前所未有的高度。
2. 把不重要的內容變為灰色
對于不太重要的內容，我們通常會把它們的層級降低，將其變為灰色往往是一個好方法。（如上左圖中1-6月與9月數據的配色，以及上右圖中1-8月數據的配色）
通常來說，我們會用灰色來標記：
未被選中的元素或者背景。
為重要的數據點做對比的數據。
（在交互圖表中）不是當前選中的元素。
3. 沒有那么多重點信息
如果你覺得每個信息點都很重要，然后為他們都做了特殊的備注，那么請把他們都去掉，因為那恰恰證明他們都不重要。
數據可視化的精髓就在于你去用視覺元素去幫助用戶做篩選，如果觀眾們真的很想知道每個數據代表什么，那或許你應該給他們展現一份表格而不是圖表。
4. 添加必要的輔助說明
關于這個圖表，如果我們不進行標注的話，它只能講述故事的一部分。如果要把故事講述的全面，那么就必須添加一些標注。
如果我告訴你，這個圖表想告訴我們，在第6天的時候該團隊使用了敏捷開發，在使用新技術初期，Bug數量明顯上升，而后瞬間下降。加上了標注，圖表講述了一個跟之前完全不一樣的故事。
所以，我們為了更好的說明我們的目的，有時需要對圖表進行特殊處理，包括做一些突出某些信息的標注。
5. 添加必要的輔助線
這一點主要針對于柱狀圖和折線圖，比如當我們想要呈現兩個不同時期的數據變化時，添加輔助線可以更直觀地體現出其中的變化。
比如像這個圖表，為了體現出響應速度有很大的提升，，添加了相關輔助線并標注了相應的數字，使 PRO5 和 SONY Z3+ 之間的對比更加明顯.
轉自：簡書
作者：極創設計
鏈接：https://www.jianshu.com/p/a8996c452c2d
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.skdbbs.com
