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