做b端產(chǎn)品的設(shè)計(jì)師都知道，為了提升開(kāi)發(fā)效率，我們的前端在投入開(kāi)發(fā)前，一般會(huì)選擇一種第三方前端框架作為底層來(lái)進(jìn)行組件封裝。所以開(kāi)始內(nèi)容前，我想先聊一聊第三方的UI框架。
目前國(guó)內(nèi)主流UI框架且個(gè)人工作過(guò)程中接觸使用過(guò)的有：
其他不太常用的框架我自己了解不多，如果有了解的朋友，歡迎在留言區(qū)討論。
我個(gè)人比較喜歡使用【Ant design】，一方面最先接觸Ant design，另一方面資源很全，下載的源文件基本能滿(mǎn)足大部分通用功能，很多控件（比如：各類(lèi)選擇器、穿梭框等）的視覺(jué)與交互體驗(yàn)也相對(duì)較好，可直接復(fù)制組件粘貼至設(shè)計(jì)稿中。
但前端同學(xué)更傾向于【Element】，我目前做的幾個(gè)項(xiàng)目都是基于Element組件封裝的，據(jù)前端同學(xué)說(shuō)他的組件封裝簡(jiǎn)單容易修改，對(duì)于沒(méi)接觸過(guò)框架的同學(xué)也方便上手無(wú)障礙。所以基于此，為了提升開(kāi)發(fā)效率，兼顧全局，我們的項(xiàng)目都是采用的【Element】，我也是花了一些時(shí)間專(zhuān)門(mén)熟悉新的組件。
1.1UI樣式對(duì)比：
截取各官網(wǎng)中 Table 的基礎(chǔ)界面樣式，如下圖：
兩個(gè)產(chǎn)品示例出的默認(rèn)組件樣式有些許區(qū)別，【Element】直接列出了不同的樣式類(lèi)型， 而【Ant design】是結(jié)合功能綜合展示的。樣式皆可根據(jù)相對(duì)應(yīng)的參數(shù)進(jìn)行修改，前端同學(xué)在開(kāi)發(fā)過(guò)程中可直接按照設(shè)計(jì)稿的標(biāo)注進(jìn)行修改樣式即可。如果風(fēng)格一致，直接使用組件默認(rèn)樣式也是可行的。
如果是數(shù)據(jù)信息平鋪且單一的項(xiàng)目，直接使用第三方組件庫(kù)表格的基礎(chǔ)用法，視覺(jué)與交互也能夠滿(mǎn)足大眾審美和習(xí)慣，普通后臺(tái)簡(jiǎn)單數(shù)據(jù)表格是能夠滿(mǎn)足需求的。
像我現(xiàn)在負(fù)責(zé)的其中一個(gè)項(xiàng)目是供應(yīng)商后臺(tái)管理系統(tǒng)。就是直接用【Element】，作為數(shù)據(jù)統(tǒng)計(jì)信息展示完全足夠，運(yùn)營(yíng)運(yùn)維同事使用時(shí)也表示還算滿(mǎn)意。
但有些復(fù)雜的B端后臺(tái)界面除了承載信息，還有很多相關(guān)的操作與處理。產(chǎn)品供給B端客戶(hù)使用，數(shù)據(jù)文檔量大且類(lèi)型繁雜，并且相互間有不同的關(guān)聯(lián)關(guān)系。很多情況下需要重新根據(jù)需求設(shè)計(jì)，且為了兼顧開(kāi)發(fā)工作量盡可能的在設(shè)計(jì)上找到折中方案。這就要求最好能夠從框架組件中衍生出來(lái)，最少的修改滿(mǎn)足更多的需求。
因我們已確定使用【Element】故而以下所有的對(duì)比，以此框架中的 Table 組件功能為基準(zhǔn)，進(jìn)行功能有無(wú)與相關(guān)差別性的比較。
由上對(duì)比看來(lái)【Element】與【Ant design】功能基本一致。
需要注意的是：上圖沒(méi)有的功能組件，并不代表是不能夠?qū)崿F(xiàn)，前端同學(xué)是可以基于組件重新寫(xiě)的。
可能很多人會(huì)問(wèn)市面上已經(jīng)有 Ant Design 如此成熟的 B端設(shè)計(jì)框架后，可以選擇直接使用，為什么還要增加開(kāi)發(fā)的負(fù)擔(dān)。
開(kāi)源確實(shí)是非常好的一件事，但是從另一方面考慮，市面上包含Ant Design和Element這一類(lèi)平臺(tái)，都有很多不同點(diǎn)，同時(shí)并不是所有的組件Ant Design 都會(huì)提供，企業(yè)級(jí)產(chǎn)品會(huì)有很多自身個(gè)性化的需求，我接觸的項(xiàng)目一般是把 Ant Design 當(dāng)作基礎(chǔ)框架，或者底層參考，在此基礎(chǔ)上去做設(shè)計(jì)框架。
當(dāng)然在小項(xiàng)目或者初期產(chǎn)品的情況，為了提升效率降低成本會(huì)直接使用開(kāi)源組件庫(kù)，各有千秋，最終目的是為了更加有效、好用的完成項(xiàng)目。
當(dāng)使用組件時(shí)，并不需要設(shè)置間距等規(guī)范，可直接選擇一種一般不會(huì)有太大問(wèn)題。更多的是關(guān)注表格中承載的數(shù)據(jù)字段類(lèi)型。比如：
文本字段：可點(diǎn)擊的字段、普通文本類(lèi)、數(shù)字字母等，此類(lèi)長(zhǎng)短參差不齊的，最好給出左對(duì)齊；
既定字段：日期、時(shí)間、部分枚舉類(lèi)等，字符數(shù)一致且較短的，可與表頭標(biāo)題居中對(duì)齊；
特殊字段：金額、狀態(tài)標(biāo)簽、類(lèi)型標(biāo)識(shí)等業(yè)務(wù)性較強(qiáng)的，可根據(jù)相關(guān)特性與閱讀習(xí)慣確定其對(duì)齊方式。
不論何種對(duì)齊方式，都需要考慮到該字段可能存在的極端情況。比如：普通文本若超長(zhǎng)，可在鼠標(biāo)hover狀態(tài)時(shí)將該單元格展開(kāi)列出全部字段信息。或以tips形式，跟隨鼠標(biāo)位置展示全部信息。
表格（Table），又稱(chēng)為表，是用來(lái)收集、整理、組織、分析數(shù)據(jù)的二維矩陣。是B端產(chǎn)品中一種常見(jiàn)的信息展現(xiàn)形式，它是所有B端組件中信息展示密度最高，同時(shí)涵蓋了B端的所有場(chǎng)景的一個(gè)重要的組件。
表格屬于列表的一種。列表分為兩種：
列表?yè)碛幸粚?duì)多的數(shù)據(jù)結(jié)構(gòu)，能夠讓用戶(hù)理清一條數(shù)據(jù)下的多個(gè)對(duì)應(yīng)關(guān)系，并且多個(gè)對(duì)應(yīng)關(guān)系是相互并列。列表能夠?qū)?shù)據(jù)在一列中井然有序地展示，保持?jǐn)?shù)據(jù)的有序與整潔。常見(jiàn)的使用場(chǎng)景比如郵件、待辦事項(xiàng)等等。
在多維度的數(shù)據(jù)分析中，最常見(jiàn)的就是表格，使用多維度數(shù)據(jù)進(jìn)行統(tǒng)一的結(jié)構(gòu)化展示，讓用戶(hù)清晰地看到在同一主題下的多條數(shù)據(jù)的對(duì)比，使數(shù)據(jù)能夠進(jìn)行多維度的展示，保證數(shù)據(jù)的完整性。
本篇文章想要說(shuō)明的重點(diǎn)就是多維度表格樣式。
表格常和排序、搜索、篩選、分頁(yè)等其他界面元素一起協(xié)同出現(xiàn)。在企業(yè)級(jí)中后臺(tái)中，具有以下優(yōu)勢(shì)：
列表屬于形式十分單一的組件，對(duì)于沒(méi)有經(jīng)驗(yàn)的設(shè)計(jì)師來(lái)說(shuō)，會(huì)認(rèn)為能夠調(diào)整的地方實(shí)在太少，往往在思考層面就會(huì)有所不足。對(duì)于一個(gè)B端表格來(lái)說(shuō)，它需要具備數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計(jì)，因此功能多而全，很難思考解決問(wèn)題思路。
通常設(shè)計(jì)師設(shè)計(jì)單個(gè)組件，都會(huì)有較好的全局意識(shí)。而到了多組件的聯(lián)動(dòng)時(shí)，就會(huì)出現(xiàn)問(wèn)題。比如在表格中，除了表格本身，還會(huì)有搜索、篩選、視圖、分頁(yè)等操作，如果不對(duì)多組件的交叉使用進(jìn)行思考，也會(huì)缺少對(duì)于這些場(chǎng)景的設(shè)計(jì)。
在列表中，會(huì)承載多種多樣的字段類(lèi)型，而每一個(gè)字段類(lèi)型都會(huì)有相應(yīng)的差異。形式的不同落到列表上就會(huì)有不同的呈現(xiàn)形式，在關(guān)鍵數(shù)值的處理上，也會(huì)差強(qiáng)人意。因此看上去簡(jiǎn)單的一個(gè)列表，其實(shí)會(huì)有很多需要設(shè)計(jì)的點(diǎn)。
設(shè)計(jì)過(guò)程中如何在滿(mǎn)足業(yè)務(wù)需求的基礎(chǔ)上平衡用戶(hù)的瀏覽目的和設(shè)計(jì)者的傳達(dá)目的，如何讓表格在表現(xiàn)層更合理、在操作層更易用，是很考驗(yàn)產(chǎn)品設(shè)計(jì)師的數(shù)據(jù)整合能力。
對(duì)于多數(shù)B端管理系統(tǒng)而言，數(shù)據(jù)的查詢(xún)和管理都是非常重要且高頻使用的功能，所以常規(guī)項(xiàng)目中會(huì)包含大量的表格頁(yè)面。甚至，有的中小型項(xiàng)目的90%的導(dǎo)航一級(jí)頁(yè)面都是使用表格，而不存在其它頁(yè)面形式。所以，表格的優(yōu)劣對(duì)用戶(hù)工作效率和平臺(tái)體驗(yàn)可以產(chǎn)生決定性的影響。
而優(yōu)秀的 B 端項(xiàng)目表格又不能只像 Excel 一樣可以使用固定的模版，不同項(xiàng)目、頁(yè)面、模塊對(duì)表格的可視需求天差地別，需要根據(jù)具體情況具體分析。
表格的使用場(chǎng)景主要分為四類(lèi)：數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作與數(shù)據(jù)統(tǒng)計(jì)。
表格的數(shù)據(jù)瀏覽從本質(zhì)上就是對(duì)大量數(shù)據(jù)進(jìn)行尋找與操作，在此場(chǎng)景下用戶(hù)需要進(jìn)行高效準(zhǔn)確的數(shù)據(jù)查找。當(dāng)用戶(hù)需要對(duì)信息進(jìn)行排序、搜索、篩選、以及相關(guān)業(yè)務(wù)處理等復(fù)雜操作時(shí)，表格結(jié)構(gòu)能夠很好地保持頁(yè)面效果的穩(wěn)定性與一致性，提升用戶(hù)的操作和閱讀效率。
表格的數(shù)據(jù)新增場(chǎng)景從本質(zhì)上是將復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，通過(guò)系統(tǒng)字段類(lèi)型的相應(yīng)規(guī)則，錄入保存到系統(tǒng)中。這也就我們常說(shuō)的增刪改查的“增”，通常是一個(gè)比較常規(guī)且高頻的操作。
分為對(duì)單個(gè)數(shù)據(jù)的操作、單行數(shù)據(jù)的操作、多行數(shù)據(jù)的操作三種情況。
單個(gè)數(shù)據(jù)的操作：就是常見(jiàn)的快捷編輯，可以點(diǎn)擊快捷編輯按鈕，在原位對(duì)單個(gè)數(shù)據(jù)進(jìn)行操作。入口一般在數(shù)據(jù)行內(nèi)。
單行數(shù)據(jù)的操作：主要通常會(huì)采取兩種路徑進(jìn)行操作：一種是進(jìn)入用戶(hù)詳情頁(yè)界面，對(duì)一整列數(shù)據(jù)進(jìn)行編輯，這種情況通常都需要多個(gè)數(shù)據(jù)進(jìn)行處理，因此進(jìn)入編輯頁(yè)面更容易尋找。另一種是進(jìn)入彈窗進(jìn)行操作，這一方案路徑更加清晰便捷，同時(shí)和新增可以共用一套控件。
多行數(shù)據(jù)的操作：主要采取多選過(guò)后的操作方式：當(dāng)用戶(hù)想要對(duì)多條數(shù)據(jù)進(jìn)行操作時(shí)，就需要對(duì)多個(gè)數(shù)據(jù)進(jìn)行checkbox 的勾選，從而滿(mǎn)足多行操作的需求。入口一般在篩選操作欄。
表格適合信息的歸納與分類(lèi)，數(shù)據(jù)經(jīng)過(guò)歸納整理和合理布局后，更易于用戶(hù)在信息之間進(jìn)行對(duì)比，快速定位、查詢(xún)其中的差異與變化、關(guān)聯(lián)和區(qū)別。
主要針對(duì)用戶(hù)需要審查分析。目的是在通過(guò)大量的數(shù)據(jù)分析去得出某一些結(jié)論，由于關(guān)注的數(shù)據(jù)會(huì)有主次之分，數(shù)據(jù)與數(shù)據(jù)之間也會(huì)有內(nèi)在聯(lián)系，用戶(hù)會(huì)更加跳躍地掃視頁(yè)面，而且會(huì)更加反復(fù)地審查數(shù)據(jù)。
表格的基本設(shè)計(jì)原則是“全面整合并呈現(xiàn)業(yè)務(wù)數(shù)據(jù)，提供順暢閱讀體驗(yàn)，便于用戶(hù)發(fā)掘重要信息，進(jìn)行便捷操作”，滿(mǎn)足業(yè)務(wù)需求+符合用戶(hù)心智模型。簡(jiǎn)而言之設(shè)計(jì)易讀，易掃視，易比較，易操作的表格結(jié)構(gòu)是表格設(shè)計(jì)的首要目標(biāo)。
表格層級(jí)分明、一目了然，讓用戶(hù)更多地感受表格承載的內(nèi)容信息而不是表格的形式。
對(duì)于提高表格查找效率，這里給出一些我個(gè)人的建議：
列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶(hù)快速查找信息。
表格應(yīng)該是可交互的，對(duì)于查找好的數(shù)據(jù)能讓用戶(hù)迅速找到對(duì)應(yīng)操作進(jìn)行決策，如導(dǎo)出、編輯等的快捷操作處理。
處理交互提效建議：
B端產(chǎn)品大多數(shù)業(yè)務(wù)場(chǎng)景都是使用基礎(chǔ)表格，但在B端產(chǎn)品的業(yè)務(wù)多樣性使得很多特殊的表格有它獨(dú)特發(fā)揮的空間。除了了解基礎(chǔ)表格樣式以外，了解更多的表格類(lèi)型也能幫助設(shè)計(jì)師在做復(fù)雜項(xiàng)目時(shí)更加得心應(yīng)手。
基礎(chǔ)表格樣式，是由行與列的單元格組成，能滿(mǎn)足用戶(hù)多維度查看數(shù)據(jù)的需求。通常用于橫向表格的縱列數(shù)據(jù)較少時(shí)，使頁(yè)面不需要滑動(dòng)條也可以展示完全。操作項(xiàng)一般置于頁(yè)面最右側(cè)，便于用戶(hù)瀏覽完成后進(jìn)行操作。
表格中的數(shù)據(jù)為包含與被包含的結(jié)構(gòu)時(shí)，可采取樹(shù)形表格。
每一個(gè)條目可展開(kāi)或折疊包含的更詳細(xì)的信息，也包含嵌套子表格。通過(guò)逐級(jí)大綱的形式來(lái)展現(xiàn)數(shù)據(jù)間的層級(jí)關(guān)系，讓整個(gè)信息結(jié)構(gòu)變得一目了然。非常適合大型數(shù)據(jù)表或者項(xiàng)目管理工具中。
一條主數(shù)據(jù)下有多條數(shù)據(jù)結(jié)構(gòu)不同的關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套時(shí)，這時(shí)候就可以用子表格進(jìn)行創(chuàng)建。它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋?zhuān)敿?xì)地了解主數(shù)據(jù)中數(shù)據(jù)的含義。結(jié)合層級(jí)表的使用場(chǎng)景，多以查看為主，編輯需求較少。
設(shè)計(jì)中需要考慮：表格中當(dāng)父數(shù)據(jù)刪除時(shí)，子數(shù)據(jù)如何處理？設(shè)計(jì)上對(duì)父子之間的關(guān)聯(lián)有著何種限制？
當(dāng)一條主數(shù)據(jù)下有多條數(shù)據(jù)結(jié)構(gòu)不同的關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套時(shí)，這時(shí)候就可以用子表格進(jìn)行創(chuàng)建。
它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋?zhuān)敿?xì)地了解主數(shù)據(jù)中數(shù)據(jù)的含義。從表象上看，就是在一個(gè)表格中還能嵌套另一個(gè)表格或其他信息。
當(dāng)一個(gè)表格里面有多條數(shù)據(jù)在同一個(gè)小范圍的維度進(jìn)行展示時(shí)，或者說(shuō)表頭有很多分組進(jìn)行區(qū)分，它就是交叉表格。
它能夠通過(guò)硬拆分將數(shù)據(jù)進(jìn)行切割，能夠滿(mǎn)足具體業(yè)務(wù)上的需求。
當(dāng)一個(gè)表格里面有多種圖表數(shù)據(jù)進(jìn)行展示時(shí)，他就是圖表表格。用戶(hù)點(diǎn)擊某一數(shù)據(jù)后，直接跳出數(shù)據(jù)的統(tǒng)計(jì)圖，方便用戶(hù)進(jìn)行對(duì)比。同時(shí)這一功能也可以通過(guò)儀表盤(pán)這樣的功能去解決，是目前很多產(chǎn)品最?lèi)?ài)做的數(shù)據(jù)可視化。
除了在單元格中引用圖表之外，很多時(shí)候都會(huì)提供圖表/表格視圖切換，便于用戶(hù)從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時(shí)也會(huì)有“圖表+表格”的形式，這時(shí)候，表格往往只作為明細(xì)放在頁(yè)面底部。大量的表格也會(huì)導(dǎo)致視覺(jué)的單調(diào)。
可以用卡片的形式來(lái)展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級(jí)進(jìn)行排列。此外，卡片彼此之間又形成一個(gè)整體。
卡片是一種承載信息的容器，對(duì)可承載的內(nèi)容類(lèi)型無(wú)過(guò)多限制，它讓一類(lèi)信息集中化，增強(qiáng)區(qū)塊感的同時(shí)更易于操作；卡片通常以網(wǎng)格或矩陣的方式排列，傳達(dá)相互之間的層級(jí)關(guān)系。適合較為輕量級(jí)和個(gè)性化較強(qiáng)的信息區(qū)塊展示。
注意：在有限的表格空間內(nèi)需注意卡片信息之間的間距，若卡片信息過(guò)長(zhǎng)可做截?cái)嗵幚怼?/span>
在實(shí)際工作中，上述表格類(lèi)型還有可能互相結(jié)合，以更好地達(dá)到相應(yīng)的分析目的。比如垂直–層級(jí)，矩陣–數(shù)據(jù)立體表等。
信息內(nèi)容的有效傳達(dá)是表格設(shè)計(jì)的本質(zhì)，就表格本身而言應(yīng)該是隱型的，應(yīng)該讓用戶(hù)注意力聚焦在核心內(nèi)容上。所以，邊框的顏色應(yīng)非常淡，不能妨礙快速瀏覽。
表格有均勻而明顯的分割線(xiàn)，邊框單元格比較明顯。
適合：對(duì)于數(shù)據(jù)之間的關(guān)系緊密（列信息較多而沒(méi)有足夠空間用留白來(lái)分割信息）且有對(duì)比關(guān)系的。
僅顯示水平線(xiàn)可減少整個(gè)網(wǎng)格的視覺(jué)噪聲。
適合：它能顯著減輕表格在垂直方向的視覺(jué)重量，提升用戶(hù)進(jìn)行大量數(shù)據(jù)對(duì)比時(shí)的速度；因此對(duì)于所有數(shù)據(jù)集大小，此樣式都是最常見(jiàn)的。
隔行交替使用不同底色來(lái)區(qū)分?jǐn)?shù)據(jù)。
適合：每行交替使用不同的顏色背景是幫助用戶(hù)在閱讀時(shí)保持其位置的另一種好方法；對(duì)于較大的數(shù)據(jù)集，建議使用此樣式，在較大的數(shù)據(jù)集中，交替模式將很清晰，并且不會(huì)引起特定行突出顯示的混亂。
移除所有分割線(xiàn)，通過(guò)盡可能減少視覺(jué)噪聲來(lái)創(chuàng)建極簡(jiǎn)外觀(guān)。
適合：對(duì)于小型數(shù)據(jù)集，如果用戶(hù)在閱讀時(shí)不需要幫助就可以保持位置，則建議使用此樣式。
前面我們聊了表格的行元素和列元素相交就會(huì)形成一個(gè)簡(jiǎn)單的二維表，行，列元素的空間組合就確定了一個(gè)個(gè)單元格。常見(jiàn)的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強(qiáng)調(diào)行、列、單元格。
水平型會(huì)弱化列的存在，強(qiáng)調(diào)行信息的連貫性，適用于用戶(hù)閱讀信息時(shí)是從左到右，然后自上而下逐條掃描，適合大量信息的瀏覽，是b端產(chǎn)品用的比較多的一種布局。
垂直型是在行分割的基礎(chǔ)上，通過(guò)強(qiáng)化列的視覺(jué)特征來(lái)突出不同列信息的對(duì)比。
矩陣型的表格有均勻統(tǒng)一的分割線(xiàn)，邊框單元格比較明顯，適用于列信息較多而沒(méi)有足夠空間用留白來(lái)分割信息的表格，同時(shí)我認(rèn)為單元格合并的情況也屬于矩陣型。
設(shè)計(jì)建議：
表格中所承載的數(shù)據(jù)信息才是主體，在進(jìn)行表格設(shè)計(jì)時(shí)，尤其要注意去除所有非必要的視覺(jué)元素，讓用戶(hù)將注意力集中在數(shù)據(jù)信息上，而不是無(wú)關(guān)的邊框、底色等。
表格由內(nèi)（展示項(xiàng)）、外（操作項(xiàng)）兩部分組成，其中內(nèi)部構(gòu)成元素包括標(biāo)題、表頭、表體等；外部元素包括篩選區(qū)、按鈕區(qū)、底欄等，如圖：
除了表頭和列表內(nèi)容外，其它模塊內(nèi)容都根據(jù)實(shí)際需求應(yīng)用。任何表格設(shè)計(jì)的第一步都是制定大框架，即包含的模塊和對(duì)應(yīng)分布位置，再展開(kāi)后續(xù)的細(xì)節(jié)設(shè)計(jì)。
1. 標(biāo)題
標(biāo)題是整個(gè)表格內(nèi)容概述的名稱(chēng)，一般會(huì)放在表格的左上角，符合用戶(hù)的閱讀習(xí)慣，同時(shí)也能突出標(biāo)題的重要性。但在有些情況嚴(yán)格意義上的標(biāo)題則不存在，會(huì)被頁(yè)面標(biāo)題、面包屑或其他內(nèi)容代替，主要看其能否表達(dá)對(duì)表格的概括。
標(biāo)題盡量簡(jiǎn)潔明了，不要太長(zhǎng)。如果標(biāo)題名稱(chēng)難以理解的話(huà)，可以加二級(jí)提示，有兩種常用樣式：tooltips（常用）、二級(jí)提示語(yǔ)。
篩選操作區(qū)方便用戶(hù)快速定位查詢(xún)數(shù)據(jù)與操作數(shù)據(jù)，是承載表格核心功能“增刪改查”的重要橋梁。篩選操作區(qū)的排序方式對(duì)整個(gè)表格“好查找”起到了至關(guān)重要的作用，所以表格設(shè)計(jì)篩選操作區(qū)的設(shè)計(jì)至關(guān)重要。
表頭信息是對(duì)數(shù)據(jù)屬性的分類(lèi)或基本概括，可以理解為表格總結(jié)，表頭也可以指行列標(biāo)簽，是對(duì)所屬行或列的描述。表頭也可以承擔(dān)一些簡(jiǎn)單的篩選、凍結(jié)與排序，方便用戶(hù)對(duì)具體的行列進(jìn)行篩選操作。
表頭是用戶(hù)快速瀏覽表格布局的關(guān)鍵信息，表頭字段應(yīng)當(dāng)符合人們的思維慣性，保證大部分用戶(hù)能理解數(shù)據(jù)。
是表格的主體區(qū)，承載用戶(hù)的每一條數(shù)據(jù)，也是整個(gè)表格的核心。是由一個(gè)個(gè)的單元格組成，單元格的排列組成行或列，行/列中的數(shù)據(jù)可以是文本、計(jì)數(shù)、百分比、狀態(tài)、操作等任何形式，在表尾還可以進(jìn)行數(shù)據(jù)統(tǒng)計(jì)，例如合計(jì)、平均值等。
單元格的大小行高都會(huì)直接影響用戶(hù)使用表格的體驗(yàn)。單元格的設(shè)計(jì)上也會(huì)有很多設(shè)計(jì)思路，在后半部分也給他家提供了我自己的看法。
底欄位于表格最下方，一般展示正文的數(shù)據(jù)概要信息，有時(shí)也做數(shù)據(jù)的分類(lèi)統(tǒng)計(jì)，或者配合篩選操作區(qū)放置批量處理操作、備注說(shuō)明等內(nèi)容。
分頁(yè)是不屬于表格當(dāng)中，但當(dāng)數(shù)據(jù)超過(guò)用戶(hù)所設(shè)定的閾值時(shí)，就需要使用分頁(yè)拆解數(shù)據(jù)，所以分頁(yè)和表格是經(jīng)常聯(lián)系在一起的。分頁(yè)一共有：基礎(chǔ)型、迷你型、完整型三種類(lèi)型。而如何進(jìn)行跨頁(yè)的操作，一直都是分頁(yè)在B端中的難點(diǎn)，需要有好的思路與邏輯，在分頁(yè)模塊中與大家聊聊。
作者：789研習(xí)社 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
表格系列第一篇我們聊了表格的基礎(chǔ)內(nèi)容和表格的組成要素，包含表格由內(nèi)（展示項(xiàng)）、外（操作項(xiàng)）兩部分組成，如圖：
表格作為展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式，常和按鈕、搜索、篩選、分頁(yè)等其他元素一起協(xié)同，構(gòu)成表格頁(yè)。通常表格頁(yè)面包含三個(gè)部分：數(shù)據(jù)過(guò)濾、數(shù)據(jù)操作、數(shù)據(jù)查看。
數(shù)據(jù)過(guò)濾是對(duì)數(shù)據(jù)進(jìn)行篩選的部分，由搜索、篩選、標(biāo)簽這三個(gè)部分組成。產(chǎn)品設(shè)計(jì)上提供多維的篩選和排序，將操作者所關(guān)注的數(shù)據(jù)展示到前面，便于快速查看、對(duì)比、分析信息，是一種增加用戶(hù)效率的有效方式。
一般搜索和篩選會(huì)同時(shí)出現(xiàn)，但是兩者一般很少同時(shí)使用來(lái)對(duì)數(shù)據(jù)進(jìn)行定位；
搜索的交互觸發(fā)方式有“實(shí)時(shí)篩選”和“點(diǎn)擊按鈕觸發(fā)篩選”。實(shí)時(shí)篩選只適合數(shù)據(jù)量較小、數(shù)據(jù)嚴(yán)謹(jǐn)?shù)谋砀耥?yè)面，建議謹(jǐn)慎使用。“點(diǎn)擊按鈕觸發(fā)篩選”適合大部分表格場(chǎng)景。
因用戶(hù)需要手動(dòng)輸入，很難保證精準(zhǔn)搜索，原則上所有搜索均為模糊搜索，必要精準(zhǔn)搜索的地方使用篩選功能，給用戶(hù)提供篩選選項(xiàng)。
用戶(hù)搜索意圖不明確時(shí)，將用戶(hù)的查詢(xún)與待檢索的內(nèi)容進(jìn)行模糊匹配，使用模糊搜索時(shí)一定要結(jié)合自己的實(shí)際場(chǎng)景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶來(lái)的記憶負(fù)擔(dān)；
缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索地址廣州，把廣州的相關(guān)編碼也匹配出來(lái)。
用戶(hù)在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。
缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索。
搜索根據(jù)表現(xiàn)形式，可以分為以下四種類(lèi)型：
單屬性精確搜索：通過(guò)某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，具有唯一識(shí)別性的、高使用頻率的、對(duì)用戶(hù)決策有意義的。
切換屬性搜索：可以設(shè)置幾個(gè)常用的類(lèi)別來(lái)快速切換搜索的維度，方便用戶(hù)使用。
多標(biāo)簽?zāi)：阉鳎罕砀穸鄠€(gè)數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對(duì)數(shù)據(jù)的精確度較高。
多屬性組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），對(duì)空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。
篩選是將用戶(hù)所需數(shù)據(jù)選出展示，其余數(shù)據(jù)暫時(shí)隱藏，通過(guò)篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶(hù)輸入的過(guò)程，提升查找效率。一般篩選有三種形式：
平鋪篩選就是將篩選項(xiàng)的內(nèi)容，直接展示于頁(yè)面之上，用于篩選條件很多，單獨(dú)篩選條件對(duì)應(yīng)數(shù)據(jù)無(wú)交叉，常見(jiàn)于信息密集型產(chǎn)品。
優(yōu)點(diǎn)：可以承載多維的數(shù)據(jù)信息，選中項(xiàng)的可見(jiàn)性高，用戶(hù)理解成本與操作成本低，且提高了用戶(hù)篩選的效率。
缺點(diǎn)：占用太多頁(yè)面空間，影響首屏的展示效率，增加用戶(hù)的決策時(shí)間。一般配合“勾選即執(zhí)行”使用，因此在執(zhí)行篩選的過(guò)程（動(dòng)畫(huà)或加載時(shí)長(zhǎng)）可能分散用戶(hù)精力。
通常電商類(lèi)產(chǎn)品在篩選區(qū)往往采用平鋪布局。
條件篩選是最常用的篩選交互，便于從多個(gè)維度篩選，應(yīng)對(duì)各種復(fù)雜的篩選情況。條件選擇完后，選擇觸發(fā)篩選（若篩選條件不交叉可以選擇實(shí)時(shí)篩選）。
優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用，整體頁(yè)面更加美觀(guān)。
缺點(diǎn)：當(dāng)篩選過(guò)多時(shí)，信息量過(guò)于冗雜繁多。
2.3 表頭篩選
優(yōu)點(diǎn)：篩選當(dāng)前列，更直觀(guān)，一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高。
缺點(diǎn)：篩選的內(nèi)容僅限于特定、單次列的篩選，對(duì)于首次使用者來(lái)說(shuō)陌生，交互形式需要學(xué)習(xí)
2.4 如何合理的使用篩選項(xiàng)
信息排序：基于用戶(hù)使用場(chǎng)景，以目標(biāo)導(dǎo)向?yàn)橐罁?jù)，將高頻的篩選項(xiàng)排列到前面，低頻的篩選項(xiàng)置于后面。
默認(rèn)折疊低頻篩選項(xiàng)：當(dāng)篩選條件有高低頻之分，且對(duì)頁(yè)面空間要求較高時(shí)，通過(guò)展示高頻篩選項(xiàng)、隱藏低頻篩選項(xiàng)，更好的提升用戶(hù)體驗(yàn)。
所有篩選項(xiàng)都很低頻：以點(diǎn)擊高級(jí)篩選按鈕的形式觸發(fā)，將全部篩選項(xiàng)置于氣泡或者彈窗之中。
在企業(yè)級(jí)中后臺(tái)中，用戶(hù)查看的數(shù)據(jù)往往屬性較多且不唯一，通過(guò)簡(jiǎn)單的檢索方式很難精確定位到目標(biāo)數(shù)據(jù)，所以，在實(shí)際使用時(shí)，常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、標(biāo)簽切換組合出現(xiàn)，形成多屬性組合檢索。
三、tab標(biāo)簽
標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒(méi)有交集的數(shù)據(jù)內(nèi)容。數(shù)據(jù)類(lèi)型在5個(gè)以下的建議采用tab頁(yè)切換的方式進(jìn)行交互，展示清晰，用戶(hù)操作效率高；超過(guò)5個(gè)可以考慮下拉選擇或模糊搜索。
優(yōu)點(diǎn)：根據(jù)標(biāo)簽，可以很清楚知道劃分，篩選的準(zhǔn)確性高，切換tab就可以篩選內(nèi)容。
缺點(diǎn)：分類(lèi)需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒(méi)有交集，分類(lèi)不能過(guò)多，超過(guò)7±2個(gè)選項(xiàng)可選擇下拉篩選。
在使用中，索引本身應(yīng)該是0思考成本的，否則就失去了索引的核心價(jià)值。圍繞這一點(diǎn)，有兩個(gè)設(shè)計(jì)原則：
1）寧少勿多和高頻前置：即不要揣測(cè)用戶(hù)需要，最常使用的展示位置盡量靠前。
2）當(dāng)搜索項(xiàng)不可避免的比較多時(shí)，可以進(jìn)行分類(lèi)展示，降低尋找成本。
數(shù)據(jù)操作是表格的操作部分，根據(jù)操作對(duì)象的不同，可以分為：
單行操作也稱(chēng)行內(nèi)操作，常見(jiàn)的顯性與隱性?xún)煞N方式。
1.1 顯性操作：
操作項(xiàng)顯示在行內(nèi)，直觀(guān)；文字按鈕操作項(xiàng)一般不多于三個(gè)，圖標(biāo)按鈕不多于四個(gè)時(shí)，操作項(xiàng)跟在行條目后面；當(dāng)超過(guò)時(shí)，建議將相對(duì)低頻操作選項(xiàng)折疊收起，點(diǎn)擊"更多"或“...”下拉顯示。操作按鈕致灰時(shí)，鼠標(biāo)選中可顯示原因。
如果單行操作不那么重要，或者說(shuō)行操作過(guò)多影響用戶(hù)閱讀時(shí)，可將所有的操作進(jìn)行隱藏；
當(dāng)用戶(hù)鼠標(biāo)懸停時(shí)進(jìn)行展開(kāi)所有操作，界面簡(jiǎn)潔，留更多的空間給需要查看的數(shù)據(jù)內(nèi)容，減輕空間壓力，減少干擾。這種方式能最大程度上滿(mǎn)足用戶(hù)快速查看與編輯的需求，但是在實(shí)際使用中，用戶(hù)的初次使用門(mén)檻較高，需要有一定的學(xué)習(xí)成本。
a、對(duì)齊式
將所有操作進(jìn)行整齊排列，一般是一個(gè)操作對(duì)應(yīng)一列，當(dāng)有操作缺失時(shí)，展示為空，這種方式能夠讓用戶(hù)直接了解到操作的缺失，但反復(fù)的出現(xiàn)會(huì)造成表格視覺(jué)上的冗余，適合列數(shù)較少的表格使用。
將所有操作按照一定的預(yù)設(shè)排列順序進(jìn)行平鋪，這種方式能夠適應(yīng)B端的大多數(shù)場(chǎng)景，將操作都簡(jiǎn)單平鋪出來(lái)雖然看上去簡(jiǎn)單粗暴，但是在實(shí)際工作中，也是一種不錯(cuò)的處理方式
設(shè)計(jì)點(diǎn)：操作按按鈕是全局操作還是單行操作其實(shí)是可以根據(jù)具體業(yè)務(wù)場(chǎng)景來(lái)決定的，判斷用戶(hù)批量操作是不是高頻功能，如果是，就采用全局操作，如果操作是低頻操作，那么完全可以只提供單個(gè)操作功能。
二、批量操作（表格外）
批量操作適用于數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷。批量操作允許用戶(hù)對(duì)一行或多行對(duì)象執(zhí)行操作，通常與復(fù)選框操作配合使用，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準(zhǔn)、拒絕、復(fù)制之類(lèi)的操作，這將節(jié)省用戶(hù)時(shí)間，避免重復(fù)對(duì)多行進(jìn)行相同操作，分顯隱性操作：
較為常用，外漏操作簡(jiǎn)單易懂。如有贊的批量操作，表格左上角和左下角都有，這樣不管用戶(hù)從上往下選還是從下往上選的場(chǎng)景都能覆蓋；飛書(shū)的批量操作外漏在表格表格的右上角，雖然按鈕放在右側(cè)符合用戶(hù)右手操作鼠標(biāo)的習(xí)慣，而且考慮到適配問(wèn)題，但是批量操作的路徑不符合用戶(hù)的操作動(dòng)線(xiàn)，路徑變長(zhǎng)，大家可自行抉擇
容易造成記憶負(fù)擔(dān)，增加學(xué)習(xí)成本，適合批量操作較低頻的操作，產(chǎn)品沒(méi)有那么復(fù)雜的產(chǎn)品。如飛書(shū)文檔
統(tǒng)攬全局，無(wú)需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見(jiàn)的【新增】、【導(dǎo)入】操作。
數(shù)據(jù)查看是表格的主體部分，是信息的主要承載區(qū)域。在開(kāi)始之前，我們先來(lái)看看該區(qū)的結(jié)構(gòu)：主要由表頭、行、列、單元格四個(gè)部分組成。
每個(gè)表頭代表一個(gè)對(duì)象的屬性，決定了下方每行對(duì)象要顯示的數(shù)據(jù)類(lèi)型。
表頭在展示信息的時(shí)候盡量概括、準(zhǔn)確、簡(jiǎn)化，達(dá)到節(jié)省表格頭部空間，引導(dǎo)用戶(hù)的注意力聚焦于表格中的數(shù)據(jù)本身。表頭并不是表格的必要元素，當(dāng)數(shù)據(jù)本身能自我表意的時(shí)候（例如郵箱），表頭是可以刪減掉的。
通常，表頭的設(shè)計(jì)會(huì)和下方列表設(shè)計(jì)有一定的區(qū)分，標(biāo)頭文字有一定的標(biāo)題屬性，所以會(huì)通過(guò)背景色、分割線(xiàn)、文字加粗等方式來(lái)做區(qū)分。
根據(jù)表頭的構(gòu)成，可以分為以下三類(lèi)：
除了容納行標(biāo)簽之外，表頭也可以添加排序、搜索、篩選等功能，通過(guò)對(duì)表頭標(biāo)簽的篩選可快速完成篩選條件。這些功能受列的影響，一般只能做單次篩選。雖然表頭篩選能在一定程度上節(jié)約空間，但對(duì)于復(fù)雜業(yè)務(wù)的產(chǎn)品來(lái)說(shuō)，數(shù)據(jù)信息列多，高頻篩選功能可能會(huì)被遮蓋，表頭復(fù)雜影響用戶(hù)表格閱讀，不推薦使用。
可配置列與配置篩選條件的功能類(lèi)似，同樣是考慮到不同角色的用戶(hù)，查看數(shù)據(jù)的視角不一樣，對(duì)應(yīng)的關(guān)心的字段也會(huì)不一樣。
有些表格由于數(shù)據(jù)量較大，需要對(duì)頁(yè)面的上下滾動(dòng)完成對(duì)數(shù)據(jù)的查閱，對(duì)表頭進(jìn)行固定，可以幫助用戶(hù)更快地找到單元格的屬性和含義，尤其是單元格屬性信息數(shù)據(jù)沒(méi)有特征時(shí)（比如都是數(shù)字、百分比、姓名等）固定表頭可以大大提高使用效率。
當(dāng)然還有固定列，當(dāng)表格需要展示不同類(lèi)別的數(shù)據(jù)較多一屏展示不下，可以對(duì)首尾字段進(jìn)行固定，讓用戶(hù)通過(guò)左右滑動(dòng)來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)的快速翻閱，滿(mǎn)足用戶(hù)對(duì)數(shù)據(jù)的認(rèn)知以及對(duì)數(shù)據(jù)操作的需求。
注意盡量避免橫向滾動(dòng)：正常鼠標(biāo)橫向滾動(dòng)是需要用戶(hù)按住 「Shift + 滾動(dòng)」 才會(huì)使表格進(jìn)行滾動(dòng)，對(duì)于所有的鼠標(biāo)用戶(hù)而言，橫向滾動(dòng)都是極為痛苦的。
表頭在能夠概括的情況下，盡量簡(jiǎn)煉、準(zhǔn)確，一般可根據(jù)上下文關(guān)系來(lái)進(jìn)行減短簡(jiǎn)化，以達(dá)到節(jié)省表格頭部空間和減輕視覺(jué)壓力的作用。當(dāng)數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時(shí)候，使用多級(jí)表頭來(lái)體現(xiàn)表頭與數(shù)據(jù)的層次關(guān)系。
對(duì)于比較復(fù)雜的表頭，可以定義一個(gè)專(zhuān)有名詞，如果有需要解釋?zhuān)瑒t在字段名稱(chēng)旁邊加說(shuō)明小圖標(biāo)(小問(wèn)號(hào))。鼠標(biāo)hover上去對(duì)專(zhuān)業(yè)術(shù)語(yǔ)或用戶(hù)不常見(jiàn)的名詞給予該字段的詳細(xì)解釋?zhuān)瑫r(shí)滿(mǎn)足新手、普通、專(zhuān)家用戶(hù)的需求。
如果表格數(shù)據(jù)可以自我解釋?zhuān)眍^就不是必須的。例如電子郵箱的收件表格，每列數(shù)據(jù)區(qū)別度高不會(huì)混淆，去掉表頭也能輕易閱讀。
表體部分所需要注意的設(shè)計(jì)點(diǎn)比較多，內(nèi)容包括了數(shù)據(jù)的對(duì)齊方式、字體、分割線(xiàn)、行高、數(shù)據(jù)顯示、單元格、行與列等，下面我們來(lái)依次聊聊。
表格內(nèi)數(shù)據(jù)按照格式塔原理進(jìn)行對(duì)齊，能讓表格更加規(guī)范易理解，營(yíng)造出良好的視覺(jué)引導(dǎo)線(xiàn)，視線(xiàn)流動(dòng)更順暢,提升數(shù)據(jù)的瀏覽效率，讓用戶(hù)快速的捕捉到所需內(nèi)容。其對(duì)齊規(guī)則如下：
符合正常的心智模型，便于用戶(hù)掃描過(guò)程中快速定位到下一行文本，左對(duì)齊的文本在展示的時(shí)候起到了縱向分割線(xiàn)的作用。多行情況下，居中和頂部對(duì)齊都是可以的。
包含金額、長(zhǎng)寬高等需要關(guān)聯(lián)比較的數(shù)字字段，這是因?yàn)槲覀冊(cè)趯?duì)比數(shù)字時(shí)，首先看個(gè)位，然后十位、百位等。
比如日期（2020-11-11），狀態(tài)文字（未審核、已收款等）或者存在布爾關(guān)系的文本（是/否、男/女等），字段固定不變，居中對(duì)齊能更好地信息呈現(xiàn)。這里根據(jù)業(yè)務(wù)也可以按照文本型左對(duì)齊處理，讓用戶(hù)查看表格不會(huì)感覺(jué)混亂。
對(duì)齊方式保持相同可以使表格更好閱讀，上下文保持一致，能保持表格豎直方向整潔，營(yíng)造一致性和上下文環(huán)境。多級(jí)表頭：多行或多列合并居中對(duì)齊，最底層表頭可以按其數(shù)據(jù)對(duì)齊方式對(duì)齊。
使表格更加規(guī)則，視覺(jué)統(tǒng)一提高操作效率。
表格數(shù)據(jù)一般包含文本和數(shù)字，良好的字體能提高表格本身的閱讀性。設(shè)計(jì)上需要注意以下幾點(diǎn)：
表格中的數(shù)據(jù)要根據(jù)數(shù)量級(jí)確定展示形式，不需要精確的數(shù)學(xué)呈現(xiàn)，可以讓用戶(hù)更快地查找信息，下面是展示形式的建議。數(shù)據(jù)的度量單位無(wú)需重復(fù)標(biāo)注，只需要在表頭標(biāo)識(shí)清楚即可，注意同一列單位保持一致。
深入了解用戶(hù)需求，根據(jù)需求為用戶(hù)提供差值、升降變化、合計(jì)值、平均值等直接展示形式。
表格中字體保持一致，文字信息字體統(tǒng)一、數(shù)字信息字體統(tǒng)一即可。數(shù)字信息字體選擇——建議等寬等高字體，等寬的數(shù)字在同一豎線(xiàn)時(shí)更容易對(duì)比。推薦以下幾款數(shù)字字體在表格中有更好的呈現(xiàn)效果，分別為：微軟雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。
設(shè)計(jì)表格時(shí)，盡量避免任何裝飾性字體，簡(jiǎn)約至上才是關(guān)鍵
不要出現(xiàn)襯線(xiàn)字體：因?yàn)閭€(gè)性會(huì)產(chǎn)生閱讀噪音，不利于用戶(hù)對(duì)數(shù)據(jù)的理解和思考。
不要出現(xiàn)全大寫(xiě)字體：因?yàn)樗茈y讀，需要轉(zhuǎn)化思維。
不要出現(xiàn)使用斜體：易引起視線(xiàn)疲勞，影響閱讀。不要出現(xiàn)多種字體：保持風(fēng)格統(tǒng)一。
在表格設(shè)計(jì)當(dāng)中，每一條線(xiàn)都有著它存在的意義，比如：
當(dāng)表格中展示橫線(xiàn)，隱藏縱線(xiàn)：用戶(hù)的橫向閱讀體驗(yàn)更佳，強(qiáng)調(diào)一條數(shù)據(jù)的完整性，能夠讓用戶(hù)進(jìn)行快速地對(duì)應(yīng)。
當(dāng)表格中展示縱線(xiàn)，隱藏橫線(xiàn)：用戶(hù)的縱向閱讀體驗(yàn)更佳，強(qiáng)調(diào)數(shù)據(jù)上下間的對(duì)比，能夠讓用戶(hù)找到同一緯度數(shù)據(jù)下的對(duì)比。
在表格設(shè)計(jì)中，合理地使用分割線(xiàn)可以實(shí)現(xiàn)對(duì)表格行與列的強(qiáng)調(diào)。按照分割線(xiàn)的分布情況，可以分為4種類(lèi)型：網(wǎng)格型、水平線(xiàn)型、斑馬條紋型、極簡(jiǎn)留白型。這個(gè)部分在上一篇已詳細(xì)說(shuō)明。
設(shè)計(jì)tips：表格具有的顏色盡可能少，顏色和可讀性是密切相關(guān)的，要合理的使用顏色，普通表盡量使用簡(jiǎn)單的背景色和點(diǎn)綴色。
背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線(xiàn))、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法，還可以對(duì)表頭表尾進(jìn)行視覺(jué)區(qū)分，但不能增加過(guò)多顏色以引起混亂。
分割線(xiàn)顏色盡量不要與背景色相差太大。當(dāng)字體選擇深灰色，背景為淺白色時(shí)，邊框選擇淺灰色，這樣可以減少我們視覺(jué)疲勞，不會(huì)使表格看起來(lái)令人生畏。
分割線(xiàn)和斑馬紋的應(yīng)用色彩都不應(yīng)該太深，如果你項(xiàng)目中對(duì)表格有比較多的選中需求，那么就不太建議使用斑馬紋的格式，因?yàn)檫x中背景需要被高亮，那么一個(gè)列表就會(huì)出現(xiàn) 3 種顏色，是要盡力避免發(fā)生的。
開(kāi)發(fā)同學(xué)工作的時(shí)候，使用的是盒子模型，設(shè)計(jì)師在出設(shè)計(jì)圖的時(shí)候也要遵循開(kāi)發(fā)邏輯。
為了讓表格中的文字高度看起來(lái)舒適，有著視覺(jué)的呼吸感。我們首先得了解影響行高是由文字的高度以及上下間距組成。因此我們得出：
單元格高度=內(nèi)容高度+上間距+下間距
單元格的尺寸包含：文字行高建議設(shè)為字號(hào)的1.5倍，上下間距設(shè)為字號(hào)的1.2倍。
對(duì)于單行顯示數(shù)據(jù)內(nèi)容的表格，建議行高約為內(nèi)容高度的2.5-3倍；對(duì)于多行顯示數(shù)據(jù)的表格，建議行中內(nèi)容的最高點(diǎn)與最低點(diǎn)到行框的上下邊距略小于文字高度。
當(dāng)數(shù)據(jù)有單行信息展示有多行信息展示時(shí)（或長(zhǎng)度不固定），要定義內(nèi)容的行數(shù)（根據(jù)業(yè)務(wù)），根據(jù)行數(shù)確定行高多出的內(nèi)容做省略處理。
固定行高時(shí)可以規(guī)范幾種不同的表格行高，例如在我日常工作中規(guī)定了3種行高56px80px110px，行高較高時(shí)，我們數(shù)據(jù)內(nèi)容都進(jìn)行居中對(duì)齊就會(huì)有一些問(wèn)題。有些單元格只有一行信息，有些有多行信息，會(huì)使頁(yè)面看起來(lái)更混亂，信息查找速度降低。
表格行高跟隨行內(nèi)占用最多行數(shù)的單元格變化，設(shè)置固定的上下邊距，表格行高隨著數(shù)據(jù)信息的換行而變化如下圖。
單元格數(shù)據(jù)一般有文字、圖標(biāo)、頭像、進(jìn)度等，在具體業(yè)務(wù)中，如果你找對(duì)了用戶(hù)想看的關(guān)鍵數(shù)據(jù)，將會(huì)大大提升用戶(hù)體驗(yàn)，反之則干擾用戶(hù)查找信息，對(duì)于較為重要的數(shù)據(jù)可以進(jìn)行關(guān)鍵數(shù)據(jù)的標(biāo)識(shí)設(shè)計(jì)。
標(biāo)簽：關(guān)鍵數(shù)據(jù)較多，顏色與視覺(jué)重量要做區(qū)分。
圖標(biāo)：名稱(chēng)與文件類(lèi)型圖標(biāo)區(qū)分。
人員信息：展示在表格中也十分常見(jiàn)，通常會(huì)用頭像+名稱(chēng)的方式，例如下圖temabition和飛書(shū)中對(duì)人員信息的展示。
度量單位的使用：其中的關(guān)鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無(wú)需重復(fù)，一般在表頭標(biāo)識(shí)清楚即可。
進(jìn)度條：進(jìn)度條或簡(jiǎn)單的數(shù)據(jù)圖，它更能直觀(guān)地展示數(shù)據(jù)的進(jìn)度狀態(tài)，方便用戶(hù)對(duì)數(shù)據(jù)信息做判斷如下圖。
關(guān)鍵屬性標(biāo)識(shí)：比如用戶(hù)重點(diǎn)關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可用符號(hào)進(jìn)行標(biāo)識(shí)，幫助用戶(hù)快速定位到目標(biāo)信息。
空表格：表格數(shù)據(jù)為空時(shí)要給予一定的提示信息或快捷操作，讓用戶(hù)更快地進(jìn)行對(duì)數(shù)據(jù)的操作。
空單元格：當(dāng)表格單元格中沒(méi)有相應(yīng)數(shù)據(jù)時(shí)，要避免直接留出空白單元格?？瞻赘袢菀自斐捎脩?hù)的困惑甚至誤解，用戶(hù)會(huì)搞不清楚到底是沒(méi)有數(shù)據(jù)，還是根本沒(méi)有值？
正確做法是，數(shù)據(jù)不存在（數(shù)據(jù)庫(kù)中沒(méi)有該字段）用“-”，沒(méi)有數(shù)量（數(shù)據(jù)庫(kù)中有該字段）用“0”，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下單元格保持一致
是對(duì)單條數(shù)據(jù)的修改，直接在單元格編輯信息的形式有很多，針對(duì)不同的數(shù)據(jù)提供對(duì)應(yīng)的編輯方案。
包含：原位編輯，懸停氣泡編輯，下拉狀態(tài)編輯，點(diǎn)擊彈窗編輯拖曳排序等等。針對(duì)不同的業(yè)務(wù)性質(zhì)對(duì)單元格采用不同的交互形式。
拖拽排序?yàn)橛脩?hù)的自定義排序，在用戶(hù)拖拽時(shí)頁(yè)面布局保持不變，適用于數(shù)據(jù)量較小有自定義排序的情況下。
可以通過(guò)視圖切換查看更多細(xì)節(jié)，例如在teambition中支持對(duì)任務(wù)的表格/列表/看板三種視圖的查看，每種視圖的側(cè)重點(diǎn)不同，可以 適應(yīng)不同角色用戶(hù)的不同專(zhuān)注點(diǎn)。
工作中常常會(huì)遇到單元格數(shù)據(jù)過(guò)多的情況，常見(jiàn)的方法有兩種：
1、定義一個(gè)單元格長(zhǎng)度或字?jǐn)?shù)限制，超過(guò)該范圍以"..."顯示，鼠標(biāo)懸停時(shí)出現(xiàn)氣泡顯示完整內(nèi)容。
2、折行顯示，這種方法讓平鋪直敘，用戶(hù)可以直接了當(dāng)?shù)目吹剿行畔?，建議不要超過(guò)三行，超出可“...”顯示。
3、允許用戶(hù)拖邊框設(shè)置列寬，并記錄設(shè)置。這種方案弊端是會(huì)占用橫向的空間。
列寬的設(shè)置對(duì)于用戶(hù)的高效閱讀還是很有作用的，在設(shè)計(jì)時(shí)要根據(jù)具體的業(yè)務(wù)信息進(jìn)行分析，列寬嚴(yán)謹(jǐn)?shù)奶幚矸绞接腥N：
第一，通過(guò)柵格，由列的數(shù)量決定列寬，主流框架組件一般是這種；
第二，可以固定部分列的寬度，其余列則按百分比處理；
第三，在固定寬度的基礎(chǔ)上，允許用戶(hù)自由拖動(dòng)調(diào)整列寬的大小。（當(dāng)然我覺(jué)得不要太拘泥這個(gè)，合適就好）
為了讓不同數(shù)據(jù)在表格中相互獨(dú)立，不混淆。我們需要保證首尾列的內(nèi)容與表格兩邊的間距N1保持固定，不同列之間的間距N2在最小寬度的基礎(chǔ)上，隨著表格的尺寸不同而做自適應(yīng)的變化。
在設(shè)計(jì)表格的初期，就需要做好設(shè)計(jì)規(guī)范，表格的邊距要統(tǒng)一制定。
列的數(shù)量建議最多展示9條，因?yàn)槿藗兊挠洃浽?±2之間，數(shù)據(jù)太多用戶(hù)會(huì)找不到重點(diǎn)。但也不是必須，根據(jù)業(yè)務(wù)需求，如果需要大量數(shù)據(jù)展示時(shí)也要展示，因?yàn)橐曈X(jué)永遠(yuǎn)低于業(yè)務(wù)（好用比好看更重要）。
列信息從左往右視覺(jué)權(quán)重程度逐漸降低，最后一列權(quán)重高（以眼動(dòng)實(shí)驗(yàn)或點(diǎn)擊數(shù)據(jù)為依據(jù)得出權(quán)重高低）。所以盡量減少列的數(shù)量，關(guān)注用戶(hù)需要的必要信息。當(dāng)數(shù)據(jù)列過(guò)多時(shí)，要分清主次列，非重點(diǎn)、輔助性信息可以通過(guò)次級(jí)入口來(lái)解決，如固定重要列(主體名稱(chēng)/操作列)，次級(jí)列在表格中間區(qū)域左右拖動(dòng)。
為便于用戶(hù)對(duì)數(shù)據(jù)進(jìn)行對(duì)比分析，可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化等數(shù)據(jù)處理結(jié)果，減少用戶(hù)數(shù)據(jù)加工的過(guò)程，直達(dá)用戶(hù)獲取信息的目標(biāo)(需要明確用戶(hù)目標(biāo))，提高用戶(hù)的閱讀速度。
在一些用戶(hù)高度自定義表格中，數(shù)據(jù)的列寬不好確定的情況下，可以允許用戶(hù)對(duì)列寬進(jìn)行調(diào)節(jié)。通過(guò)光標(biāo)的變化提示列寬自定義操作，拖動(dòng)可完成列寬設(shè)置。
列數(shù)據(jù)還可以根據(jù)用戶(hù)需求進(jìn)行自定義設(shè)置，可以選擇要展示的列，在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)（如下圖），也可以對(duì)列進(jìn)行排序。在表格右上方的設(shè)置按鈕對(duì)表格進(jìn)行設(shè)置，清晰高效。用戶(hù)可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。但需注意系統(tǒng)應(yīng)記住用戶(hù)上一次的自定義列設(shè)置，減少用戶(hù)重復(fù)操作。
底欄在表格最下方，一般是統(tǒng)計(jì)信息、分頁(yè)控件、備注說(shuō)明、操作按鈕(加載更多)等內(nèi)容。
底欄最常見(jiàn)的元素就是分頁(yè)，分頁(yè)固定能省去用戶(hù)需要翻到頂部或底部進(jìn)行操作的麻煩。
1. 良好轉(zhuǎn)換：用戶(hù)在結(jié)果列表中查找特定信息而不僅僅瀏覽信息流。
2. 掌控感：分頁(yè)可以讓用戶(hù)知道表格的總量以及當(dāng)前頁(yè)面在總量中的位置，知道瀏覽完頁(yè)面需要多長(zhǎng)時(shí)間。
3. 數(shù)據(jù)加載快：通過(guò)對(duì)加載內(nèi)容的限制，可以極大的減少數(shù)據(jù)加載的時(shí)間。
額外的動(dòng)作：用戶(hù)要到達(dá)下一頁(yè)表內(nèi)容，就必須點(diǎn)擊分頁(yè)控件上的按鈕跳轉(zhuǎn)，等待表格新內(nèi)容的加載。
簡(jiǎn)潔型：當(dāng)分頁(yè)數(shù)量較少時(shí)，通常在7頁(yè)以?xún)?nèi)，就只有最基礎(chǔ)的展示。
迷你型：當(dāng)頁(yè)面空間不足或者降低分頁(yè)的視覺(jué)影響時(shí)，可以采用迷你型。
多功能型：當(dāng)表格數(shù)據(jù)較多，為了滿(mǎn)足更多的用戶(hù)需求，可以根據(jù)需求選擇分頁(yè)類(lèi)型。完整型的雖然滿(mǎn)足各種功能需求，但是所占空間較大，所以我們要根據(jù)自己的需求合理拆分使用。
分頁(yè)的選擇需要根據(jù)不同的場(chǎng)景選擇最優(yōu)的設(shè)計(jì)方案。
表格無(wú)限下拉加載使用戶(hù)在數(shù)據(jù)內(nèi)容面前一直滾動(dòng)查看。向下滾動(dòng)的時(shí)候不斷加載新內(nèi)容，雖然十分方便與誘人，但不是什么場(chǎng)景都適用。一般來(lái)說(shuō)，無(wú)限滾動(dòng)適用于在數(shù)據(jù)有限且信息重復(fù)的表格，有利于內(nèi)容探索。分頁(yè)則適用用戶(hù)在尋找特定信息及瀏覽記錄，易快速訪(fǎng)問(wèn)。
1.高效瀏覽：一個(gè)高效的方法讓用戶(hù)瀏覽表格數(shù)據(jù)信息。
2.體驗(yàn)更好：用戶(hù)使用滾動(dòng)能獲得比點(diǎn)擊分頁(yè)有更好的體驗(yàn)。
1.受限性能：緩慢的加載速度會(huì)造成用戶(hù)的不耐煩與離開(kāi)。當(dāng)數(shù)據(jù)量過(guò)大時(shí)，結(jié)果就是頁(yè)面性能越來(lái)越低。
2.位置丟失：沒(méi)法標(biāo)記當(dāng)前位置且不能再隨意回到之前位置。一旦離開(kāi)，就會(huì)丟失當(dāng)前的瀏覽記錄，要回到上次的位置，必須得重新滾動(dòng)去尋找。
3.信息缺失：滾動(dòng)條并沒(méi)有反映出實(shí)際數(shù)據(jù)量。
除了分頁(yè)的使用還可以進(jìn)行無(wú)限滾動(dòng)的交互，鼠標(biāo)點(diǎn)擊“加載更多”按鈕以查看更多數(shù)據(jù)。這個(gè)功能不太適合數(shù)據(jù)量較大的表格，在具體業(yè)務(wù)中一定要慎用。
分析產(chǎn)品，也是難到很多 UI 設(shè)計(jì)師的問(wèn)題。很多人認(rèn)為這屬于產(chǎn)品經(jīng)理的工作，但實(shí)際上 UI 設(shè)計(jì)師也離不開(kāi)使用產(chǎn)品分析的技能來(lái)處理日常的工作，以及提升自己的產(chǎn)出質(zhì)量。
產(chǎn)品的分析其實(shí)遠(yuǎn)遠(yuǎn)沒(méi)有想象中那么玄乎，這篇文章就要教會(huì)大家如何通過(guò)正確的步驟完成對(duì)產(chǎn)品的分析。
以下為正文。
產(chǎn)品分析，顧名思義，就是對(duì)某互聯(lián)網(wǎng)產(chǎn)品，進(jìn)行系統(tǒng)的、多緯度的分析，并最終完成一份邏輯清晰，符合客觀(guān)事實(shí)的商業(yè)報(bào)告。
為什么我們需要這個(gè)報(bào)告？那是因?yàn)閷?duì)于我們工作的決策來(lái)說(shuō)，獲取越多有效的參考信息，就越能幫助我們做出正確的選擇。
舉個(gè)例子，如果我準(zhǔn)備做一款針對(duì)定制奶茶外賣(mài)的 APP，那么就要了解這樣的 APP 產(chǎn)品通常有哪些模塊和功能，通過(guò) APP 下單的流程是什么樣的，以及用戶(hù)更喜歡什么樣的設(shè)計(jì)或者交互。這時(shí)候，光靠我自己腦補(bǔ)是沒(méi)用的，我得分析同行或者相關(guān)外賣(mài) APP 產(chǎn)品，才能得到明確的結(jié)論，然后作為依據(jù)開(kāi)始設(shè)計(jì)我自己的產(chǎn)品。
或者，我們?cè)诿嬖嚮蛘呖蛻?hù)談判之前，有認(rèn)真的分析過(guò)對(duì)方的產(chǎn)品，那么在溝通過(guò)程中就可以讓我們的處境更有利，能進(jìn)行更有質(zhì)量的溝通和探討。
產(chǎn)品分析的好處很多，不僅能幫助我們解決當(dāng)前的問(wèn)題，也可以幫助設(shè)計(jì)師鍛煉自己的邏輯思維能力，產(chǎn)品能力以及業(yè)務(wù)能力，是升職加薪的必備技能。
接下來(lái)，可能很多同學(xué)已經(jīng)忍不住摩拳擦掌，想要知道產(chǎn)品分析應(yīng)該怎么開(kāi)始了，但別急，我要先講講一個(gè)被很多人忽略，以及在眾多講解文章中都沒(méi)有提及的東西，就是產(chǎn)品分析的 —— 目標(biāo)。
前面提到，產(chǎn)品分析最后要以商業(yè)報(bào)告的形式呈現(xiàn)，而一份合格商業(yè)報(bào)告是要提供 “明確的結(jié)論” 的。如果這份報(bào)告指向性不清晰，洋洋灑灑寫(xiě)了一百頁(yè)，像流水帳一樣把所有能羅列的分析內(nèi)容全都一股腦做進(jìn)去，那對(duì)于自己和看的人都是一場(chǎng)災(zāi)難。因?yàn)檫@樣的報(bào)告沒(méi)有重點(diǎn)，缺乏閱讀性。
開(kāi)始分析前，我們要確定一個(gè)明確的目標(biāo)，即想要通過(guò)這份報(bào)告獲得哪些信息。在獲取的內(nèi)容上，往往不會(huì)只想得到一個(gè)結(jié)果，很可能會(huì)是復(fù)數(shù)形式，所以我們需要列一個(gè)表格，將它們羅列出來(lái)。
比如我們?cè)儆孟胱瞿滩柰赓u(mài)服務(wù)的APP為出發(fā)點(diǎn)，那么我們分析美團(tuán)或者餓了么的產(chǎn)品，定了下面這些目標(biāo)：
可以看出，對(duì)于產(chǎn)品、交互層面的分析明顯要大于設(shè)計(jì)的權(quán)重，根據(jù) MVP 原則，第一個(gè)版本應(yīng)該要得出的是一個(gè)流程可以跑通的產(chǎn)品，在前期過(guò)分關(guān)注設(shè)計(jì)和細(xì)節(jié)并不是首要任務(wù)。
所以，在不同的場(chǎng)景、時(shí)期、戰(zhàn)略上，產(chǎn)品分析的側(cè)重點(diǎn)就不同，而且留給我們的分析時(shí)間也不可能足夠充足的，所以也要將精力集中在最重要的事情上，提升效率，才可以真正解決問(wèn)題。
整個(gè)產(chǎn)品分析的內(nèi)容，可以劃分成多個(gè)緯度和若干的細(xì)節(jié)，我用下面這個(gè)思維導(dǎo)圖表示出來(lái)。
這樣的圖表讓人望而生畏，如果每一部分我們都認(rèn)真做分析，那么勢(shì)必得寫(xiě)出非常多的內(nèi)容不可，所以才有了前面所說(shuō)的要規(guī)劃分析的目標(biāo)，在實(shí)際執(zhí)行過(guò)程中有很多分析項(xiàng)是不需要提及的。
再者，產(chǎn)品分析中還包競(jìng)品分析、運(yùn)營(yíng)分析、交互分析、視覺(jué)分析、文案分析等分支，它們各有側(cè)重和取舍，所以不要為此而感到恐慌。
下面，我們分別對(duì)這些內(nèi)容進(jìn)行簡(jiǎn)單的說(shuō)明。
1.產(chǎn)品的基本信息
分析任何產(chǎn)品的第一步，就是對(duì)它有一個(gè)大致的認(rèn)識(shí)，首先就是去下載和體驗(yàn)它，并且能用一句話(huà)來(lái)概括它的功能，然后通過(guò)該功能解決了用戶(hù)什么樣的需求。
然后就是它所處的行業(yè)目前的狀態(tài)，是否規(guī)模連年上升，有什么重量級(jí)新聞或者革新，未來(lái)的發(fā)展趨勢(shì)是什么。如果我們不了解的情況下，可以多在百度、知乎、新聞門(mén)戶(hù)上進(jìn)行搜索和了解
盡可能收集可信的數(shù)據(jù)報(bào)告或者圖表，便于信息的整理。
對(duì)于一些新上線(xiàn)不太久的應(yīng)用，通常會(huì)帶有非常明顯的初創(chuàng)團(tuán)隊(duì)烙印，可能有一些匪夷所思的交互或者功能，這時(shí)候在應(yīng)用上浪費(fèi)時(shí)間干想是沒(méi)有用的，可以花點(diǎn)時(shí)間在網(wǎng)上找找創(chuàng)始成員的履歷，會(huì)對(duì)我們認(rèn)識(shí)應(yīng)用有更大的幫助。比如拼多多創(chuàng)始人在上線(xiàn)前有 “拼好貨” 的多年積累，產(chǎn)品模式是經(jīng)過(guò)檢驗(yàn)的產(chǎn)物，有大量相似的特征。
最后，還可以對(duì)產(chǎn)品當(dāng)前的處境做簡(jiǎn)單的收集，有沒(méi)有強(qiáng)大的外部競(jìng)爭(zhēng)，它們各自在市場(chǎng)中占比的數(shù)據(jù)，以及用戶(hù)在不同商店、社交平臺(tái)中對(duì)其的評(píng)價(jià)。這可以幫助我們對(duì)該產(chǎn)品的競(jìng)爭(zhēng)力和商譽(yù)做出初步的認(rèn)識(shí)。
2.用戶(hù)研究
用戶(hù)研究這個(gè)名詞出現(xiàn)得非常頻繁，想不看見(jiàn)都難，它是專(zhuān)業(yè)產(chǎn)品團(tuán)隊(duì)必備的項(xiàng)目準(zhǔn)備工作。用戶(hù)研究的方式和產(chǎn)出物多種多樣，通常我們會(huì)建立清晰的目標(biāo)畫(huà)像找出目標(biāo)用戶(hù)，然后對(duì)他們進(jìn)行訪(fǎng)談、調(diào)研，設(shè)計(jì)可用性測(cè)試、眼動(dòng)測(cè)試等等，幫助我們更好的推出可以被用戶(hù)喜愛(ài)的產(chǎn)品。
但在我們研究外部產(chǎn)品的時(shí)候，往往不需要將它想得太復(fù)雜（除非是對(duì)直接競(jìng)爭(zhēng)對(duì)手的分析），否則只需要整理該產(chǎn)品的目標(biāo)用戶(hù)畫(huà)像即可。
用戶(hù)畫(huà)像即總結(jié)核心用戶(hù)多個(gè)緯度的特征，主要分成三個(gè)部分。
生理主要就是用戶(hù)的年齡、性別、身高或體重等特性，外在的則是諸如學(xué)歷、工作履歷、所處城市、薪資狀況等可以直接收集的內(nèi)容，內(nèi)在的則是性格、愛(ài)好、行為（喜好女裝之類(lèi)的……）等等和關(guān)聯(lián)主觀(guān)特征的內(nèi)容。
根據(jù)我們的需要對(duì)這些屬性進(jìn)行篩選，就可以制作幾個(gè)標(biāo)準(zhǔn)的用戶(hù)畫(huà)像卡片出來(lái)，比如下方這種。
3.用戶(hù)體驗(yàn)要素
因?yàn)檫@兩年對(duì)于產(chǎn)品、體驗(yàn)、設(shè)計(jì)的專(zhuān)業(yè)分析需求高漲，所以 《用戶(hù)體驗(yàn)要素》 中的五要素就成為大家喜聞樂(lè)見(jiàn)的分析模型，它給我們提供了明確的分析步驟和方向，易于上手。
戰(zhàn)略層：
戰(zhàn)略層指的是產(chǎn)品在宏觀(guān)、商業(yè)層面上的的考慮，需要我們自己的判斷，因?yàn)槿绻皇莾?nèi)部人員，那么對(duì)于一款產(chǎn)品的戰(zhàn)略層思考是無(wú)法做到絕對(duì)準(zhǔn)確的。雖然網(wǎng)上可以搜索到很多商業(yè)分析和企業(yè) PR 稿，但是這些內(nèi)容的使用往往是具有欺騙性的，是基于運(yùn)營(yíng)需求拋給大眾的障眼法。
比如我之前分析的一篇關(guān)于瑞幸咖啡的總結(jié)（個(gè)人總結(jié)）：
https://www.zhihu.com/question/306547560/answer/559771838
所以，報(bào)告中沒(méi)有充足的把握時(shí)就不要在這個(gè)問(wèn)題上侃侃而談，只需要回答，一款什么樣的產(chǎn)品才可以滿(mǎn)足用戶(hù)的需求獲得商業(yè)上的成功。
范圍層：
戰(zhàn)略層可以獲得的信息通常是一個(gè)比較宏觀(guān)、含糊的概念，所以，我們要來(lái)制定更具體的方案，明確產(chǎn)品應(yīng)該包含那些功能和服務(wù)，規(guī)劃產(chǎn)品功能要覆蓋的范圍。
比如提供奶茶的外賣(mài)服務(wù) APP，初期我們的功能包含選擇店鋪商品、加入購(gòu)物車(chē)、交易結(jié)算系統(tǒng)，但不包含資訊推送、曬單社區(qū)等功能。
所以，范圍層就是將該產(chǎn)品提供的最重要的服務(wù)、產(chǎn)品內(nèi)容羅列出來(lái)。
結(jié)構(gòu)層：
這就是一個(gè)產(chǎn)品的功能或者信息結(jié)構(gòu)，通常我們可以用思維導(dǎo)圖或者樹(shù)狀圖的方式進(jìn)行梳理。最初級(jí)的方法是通過(guò)對(duì)可視頁(yè)面的層級(jí)做梳理，整理出產(chǎn)品的頁(yè)面層級(jí)結(jié)構(gòu)。
而更好的方式，是根據(jù)產(chǎn)品的幾個(gè)核心功能建立產(chǎn)品流程圖，將操作的結(jié)構(gòu)與邏輯展示出來(lái)，繪制這個(gè)圖表的過(guò)程中可以更好的加深我們對(duì)產(chǎn)品的理解。
框架層：
框架層即頁(yè)面的布局結(jié)構(gòu)，以及組件層面的交互和展示，一般來(lái)說(shuō)，可以研究產(chǎn)品的主要流程頁(yè)面，每個(gè)頁(yè)面的布局和信息展示是否合理，操作是否順暢。
如果覺(jué)得沒(méi)法很好的理解，書(shū)中建議是通過(guò) “界面設(shè)計(jì)”、“導(dǎo)航設(shè)計(jì)”、“信息設(shè)計(jì)” 三個(gè)角度切入，但這樣操作性太差。建議在分析這個(gè)界面的時(shí)候，只要關(guān)注內(nèi)容從上到下的布局內(nèi)容有沒(méi)有契合主題，并且重要的組件中，字段權(quán)重能不能很好的被表現(xiàn)出來(lái)即可。
比如我們看下面飛豬的航班頁(yè)面，頁(yè)面模塊依次是城市、日期、班次列表、排序篩選。在航班列表中，最被用戶(hù)關(guān)注的價(jià)格信息得到凸顯（證明買(mǎi)機(jī)票的用戶(hù)對(duì)價(jià)格更敏感），時(shí)間作為次級(jí)權(quán)重元素相對(duì)被弱化但依舊易于識(shí)別。
表現(xiàn)層：
這里就是著重分析產(chǎn)品設(shè)計(jì)本身的特點(diǎn)了，相對(duì)就容易了不少，只要分析配色的方案，設(shè)計(jì)的一致性，捕捉動(dòng)效和情感化設(shè)計(jì)的細(xì)節(jié)即可。
就不展開(kāi)更多的說(shuō)明了。
用戶(hù)體驗(yàn)五要素的分析一樣不是散亂的拋出結(jié)果而已，如果按原書(shū)的方法做分析，肯定也會(huì)作出非常復(fù)雜的報(bào)告，所以我再提煉一次用戶(hù)體驗(yàn)分析的思路。
通過(guò)分析產(chǎn)品的商業(yè)目標(biāo)，進(jìn)入劃分功能和服務(wù)的范圍，之后根據(jù)核心的服務(wù)總結(jié)主要操作流程，并在最后的交互、布局、設(shè)計(jì)的幾個(gè)方向來(lái)判斷它們是否有益于核心流程，能被用戶(hù)接受。然后得出結(jié)論，如果有益，那么產(chǎn)品符合商業(yè)目標(biāo)的條件，如果沒(méi)有，則難以達(dá)成。
4.盈利模式
有一些產(chǎn)品本身就有購(gòu)買(mǎi)要素，或者有付費(fèi)的項(xiàng)目，那么對(duì)它作出分析是非常重要的。因?yàn)槿魏紊虡I(yè)產(chǎn)品最終的目的都是為了盈利，所以多數(shù)產(chǎn)品會(huì)在這方面下足功夫。
如果是電商、外賣(mài)、快遞這類(lèi)直接發(fā)生交易的應(yīng)用類(lèi)型，只要分析產(chǎn)品本身的交流流程即可，相對(duì)比較直觀(guān)。
如果是類(lèi)似社交、資訊、工具類(lèi)的應(yīng)用，往往在盈利點(diǎn)上會(huì)比較隱晦，并通常包含較多零散的盈利來(lái)源，比如不同位置的廣告位，訂閱服務(wù)，付費(fèi)道具等等。
我們要做的就是把這些盈利來(lái)源全部羅列下來(lái)，如果知道價(jià)格也對(duì)應(yīng)填寫(xiě)上去即可。
5.運(yùn)營(yíng)策略
如果不是以工具為導(dǎo)向的產(chǎn)品，通常就有比較重的日常運(yùn)營(yíng)。包括用戶(hù)運(yùn)營(yíng)、社區(qū)運(yùn)營(yíng)、媒體運(yùn)營(yíng)、內(nèi)容運(yùn)營(yíng)和活動(dòng)運(yùn)營(yíng)。
有不少產(chǎn)品的迭代是以運(yùn)營(yíng)為導(dǎo)向的，我們直接通過(guò)產(chǎn)品功能本身去分析它往往得不到理想的結(jié)果，所以需要從運(yùn)營(yíng)的角度進(jìn)行切入。
比如每日優(yōu)鮮這樣的生鮮電商，如果仔細(xì)研究用過(guò)它的服務(wù)，就會(huì)發(fā)現(xiàn)這款產(chǎn)品本身交易的流程乏善可陳，但是出彩的地方是在于層出不窮的運(yùn)營(yíng)策略，無(wú)論是選品的內(nèi)容運(yùn)營(yíng)或者活動(dòng)運(yùn)營(yíng)上，而這些運(yùn)營(yíng)方式才是推動(dòng)產(chǎn)品的改動(dòng)和優(yōu)化的主要因素。
作者：酸梅干超人 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
新手和初學(xué)者總會(huì)錯(cuò)誤的將審美的能力托付給天賦或是科班教育，作為自己審美水平低下的借口。如果這么想，那肯定不會(huì)為自己帶來(lái)任何改善。
今天，我要寫(xiě)一些不一樣的東西出來(lái)。
按我一貫的風(fēng)格，我不喜歡在入門(mén)問(wèn)題上高開(kāi)高走，一開(kāi)始就討論比較概念或者藝術(shù)性的問(wèn)題，就講講在最初級(jí)月薪不過(guò)萬(wàn)，連自己工作設(shè)計(jì)類(lèi)型相關(guān)的作品都沒(méi)辦法評(píng)判好壞的情況下，展開(kāi)討論。
所以，我要寫(xiě)一篇接地氣的提高審美的回答。
關(guān)于比較
審美是一個(gè)宏大的話(huà)題，無(wú)論是文學(xué)、影視、視覺(jué)、時(shí)尚等我們都可以審視它們的 “美”。不同領(lǐng)域的 “美” 有不同的形式，不同的立場(chǎng)，不同的角度，不同的原則。
在這里，我們不談具體某個(gè)領(lǐng)域?qū)徝赖囊?guī)則和方式，我們來(lái)講講提升審美的具體做法。
講一個(gè)例子，在國(guó)內(nèi)，我們普遍覺(jué)得女生在對(duì)穿衣打扮的審美上比男生更優(yōu)，對(duì)于其它經(jīng)過(guò)設(shè)計(jì)的事物所展現(xiàn)的審美也比男生更好。這種差別在高中時(shí)期便逐漸放大，在大學(xué)中就能明顯得感覺(jué)出來(lái)這一點(diǎn)。
這是由于基因天賦論導(dǎo)致的嗎？
是也不是。女生愛(ài)美這點(diǎn)是一個(gè)既成的事實(shí)，有比較大的先天因素，而因?yàn)閷?duì)美好事物的追求比男生更強(qiáng)烈，所以在審美上整體大于男性。
但大家要注意，這個(gè)因果關(guān)系的模型太過(guò)簡(jiǎn)陋，我們要進(jìn)一步來(lái)分析為什么對(duì)美好事物的追求就能導(dǎo)致審美上的差異，這就是我們提升審美的關(guān)鍵，先從衣品講起。
原因1：
基于對(duì)美的追求，女生往往會(huì)花更多的時(shí)間在穿衣打扮上，也就意味著要購(gòu)物。無(wú)論是在商場(chǎng)還是淘寶，女生逛起來(lái)的熱情與時(shí)長(zhǎng)都遠(yuǎn)遠(yuǎn)大于男生，這造成了女生在查看數(shù)量上也遠(yuǎn)遠(yuǎn)大于男生。
這就和很多設(shè)計(jì)前輩告訴你要 “多看” 的做法是一樣的，通過(guò)量變引起質(zhì)變，只要你看的夠多，審美自然就可以提升了。
這話(huà)說(shuō)的頗有道理，但依舊在推理上站不住腳。因?yàn)?，量變?yōu)槭裁匆欢ň湍墚a(chǎn)生質(zhì)變？這個(gè)變化的邏輯依據(jù)是什么？在青銅段位里打了一萬(wàn)盤(pán)，也不代表一定能打進(jìn)最強(qiáng)王者不是。
所以，這就是要引入第二個(gè)原因，關(guān)于對(duì)比。
原因2：
女生逛街能逛這么久，往往在除了看以外，還會(huì)做一件事，就是大量的試衣服（此處被我言中的女性同學(xué)可以點(diǎn)個(gè)贊讓我看見(jiàn)你們的雙手），經(jīng)常抱了一整籮筐的衣服進(jìn)試衣間，在里面對(duì)著鏡子鼓搗擺 Pose 大半個(gè)小時(shí)，然后才能挑選一兩件自己喜歡的出來(lái)，或者干脆一件也不要。
嗯，不要問(wèn)我是怎么知道的……
在這個(gè)過(guò)程里，就發(fā)生了提升審美中最重要的一環(huán) —— 對(duì)比。通過(guò)大量的對(duì)比，來(lái)找出好看的、高級(jí)的、適合自己的衣服。也因?yàn)閷?duì)比，女生們就通過(guò)實(shí)踐來(lái)了解到，什么樣的衣服是好看的，什么樣的是丑的不適合自己的。
這個(gè)過(guò)程實(shí)際上收窄了選擇的范圍，比如一個(gè)個(gè)子比較高挑五官比較立體的女生，是很難在比較過(guò)后還會(huì)選擇那些可愛(ài)、少女、小鳥(niǎo)依人的設(shè)計(jì)。很可能會(huì)偏向運(yùn)動(dòng)、男友、中性等風(fēng)格。
而在有了具體的偏向以后，她們依舊會(huì)深入到這個(gè)范圍，繼續(xù)觀(guān)察、嘗試、對(duì)比，然后再次提升對(duì)這些東西的理解和審美。
所以，看吧，審美的提升第一步就是這么簡(jiǎn)單，通過(guò)大量的觀(guān)察，然后對(duì)比和篩選，就能非常直接的提升我們的審美，這個(gè)提升的過(guò)程完全依靠的是人的主觀(guān)能動(dòng)性。
日常生活中我們遇到的絕大多數(shù)某些人審美比自己更好的人，都是因?yàn)樗麄冊(cè)谀承┓矫婵催^(guò)的，比較的比我們更多，而不是依靠天賦的加持，這個(gè)思路落實(shí)到創(chuàng)作中也一樣。
當(dāng)然，我絲毫不懷疑人類(lèi)的歷史長(zhǎng)河里，有極少數(shù)人打娘胎里就因?yàn)槿旧w中某些基因片段神秘的律動(dòng)，而獲得了獨(dú)特的審美與創(chuàng)作天賦，但那始終是一個(gè)可以忽略的概率。審美的提升是個(gè)人主動(dòng)的行為，不要祈禱上帝在你身上投的骰子能得到你要的結(jié)果。
即使拋開(kāi)這群有 “天賦” 的神仙，也依舊還有很多第二梯隊(duì)、第三梯隊(duì)的老法師們通過(guò)奮斗逼的經(jīng)歷功成名就不是。
所以別這么自戀總要搬達(dá)芬奇、畢加索、梵高等人舉例，每次忍不住想要把鍋甩給天賦前，就問(wèn)問(wèn)自己鑰匙配嘛？
什么？您配？
您配幾把……
具體案例
不正經(jīng)到此為止，正經(jīng)臉……
既然說(shuō)了那么多關(guān)于比較的問(wèn)題，空口白話(huà)難以令人信服，所謂沒(méi)圖我說(shuō)個(gè)……錘子。因?yàn)楹芏嘈氯硕紩?huì)說(shuō)，你覺(jué)得大多數(shù)設(shè)計(jì)案例看起來(lái)都挺好，覺(jué)得挑不出什么毛病啊。
所以，下面我挑了幾個(gè)與設(shè)計(jì)有關(guān)的方向，并找了一些案例出來(lái)，你們來(lái)看看同類(lèi)型中，哪一張圖是最優(yōu)的。
而沒(méi)被選上的那些，對(duì)于你選出來(lái)的圖而言，它們當(dāng)然都是有 “問(wèn)題的”。
人像攝影
美食攝影
室內(nèi)設(shè)計(jì)
產(chǎn)品設(shè)計(jì)
海報(bào)設(shè)計(jì)
管理界面
UI APP 界面
小結(jié)
審美提升的第一步，就是從對(duì)比開(kāi)始，因?yàn)檫@個(gè)世界對(duì)所有事物的評(píng)判，都有不同方向的兩個(gè)極端。善惡、美丑、高矮、胖瘦，是對(duì)立而相互依存。
就像左拉的《陪襯人》中所講的：
“……另一個(gè)卻總是奇丑無(wú)比，丑得刺眼，使路人不禁要看她幾眼，并且拿她和她的同伴作個(gè)比較。要知道，你上了圈套。那個(gè)丑女子要是獨(dú)自走在街上，會(huì)嚇你一跳；那個(gè)相貌平常的，會(huì)被你毫不在意地忽略過(guò)去。但當(dāng)她們結(jié)伴而行時(shí)，一個(gè)人的丑就提高了另一個(gè)人的美?！?
之前我們講了關(guān)于審美提升的第一步對(duì)比，但是我們留了一個(gè)疑問(wèn)，為什么依靠對(duì)比我們可以提升，或者只靠對(duì)比我們就一定可以提升審美嘛？審美提升起來(lái)就如此容易？
當(dāng)然不是！
對(duì)比的過(guò)程只是表象，我們還要追究深層次的原因，那就是“推理”。
在系統(tǒng)性提升審美的道路上，最大的敵人就是——主觀(guān)感受。因?yàn)闊o(wú)論我怎么解釋和審美提升相關(guān)的方法，總有人會(huì)覺(jué)得它就是依靠個(gè)人審美，不同人審美不一樣，總能找出有的人就喜歡網(wǎng)紅臉但看不上湯唯或者高圓圓的案例。
沒(méi)錯(cuò)，每個(gè)人都有自己的審美，無(wú)論喜歡什么稀奇古怪的東西都可以，存在即合理。但是，設(shè)計(jì)師該擁有的審美是不能這么隨意的，因?yàn)樽鳛閷?zhuān)業(yè)人士，我們的審美就要符合 “專(zhuān)業(yè)” 的要求，即通過(guò)客觀(guān)標(biāo)準(zhǔn)來(lái)評(píng)價(jià)事物的內(nèi)在價(jià)值。
比如茶、酒、咖啡這類(lèi)飲品，都已經(jīng)擁有非常成熟的市場(chǎng)，會(huì)根據(jù)產(chǎn)品的價(jià)值形成對(duì)應(yīng)的價(jià)格。而有趣的是，這些飲品都不是甜的，都不符合我們本能的喜好。所以，還有很多人不接受它們，只喜歡帶有甜味的飲料。這種個(gè)人的選擇上，任何人都可以偏愛(ài)一杯 1 元不到的雀巢的速溶拿鐵，厭棄紅標(biāo)瑰夏冰滴，但無(wú)論你怎么想，也無(wú)法改變它們價(jià)值不對(duì)等的事實(shí)，瑰夏手沖有遠(yuǎn)遠(yuǎn)超出速溶的口感和品質(zhì)。
但超出的部分在哪里？答不答得上來(lái)，就是內(nèi)行和外行的區(qū)別。
內(nèi)行經(jīng)過(guò)專(zhuān)業(yè)的訓(xùn)練可以品嘗出其中蘊(yùn)含的風(fēng)味、口感，解釋它們與產(chǎn)地氣候的聯(lián)系，儲(chǔ)藏運(yùn)輸?shù)臈l件，以及沖制過(guò)程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類(lèi)零碎、沒(méi)有體系的評(píng)價(jià)。
如果設(shè)計(jì)師對(duì)設(shè)計(jì)相關(guān)的作品只能做到和外行一樣的水平，那么他也只能是設(shè)計(jì)師中的外行，并且缺乏成為優(yōu)秀設(shè)計(jì)師的必要基礎(chǔ)。
所以，接下來(lái)我們來(lái)探究一下，作品的評(píng)價(jià)為什么重要！
丹尼爾·卡尼曼的暢銷(xiāo)書(shū)《思考快與慢》中，將我們的思考方式簡(jiǎn)單的劃分成了兩個(gè)部分，用了非常簡(jiǎn)單粗暴的 “系統(tǒng)1”、“系統(tǒng)2” 命名。簡(jiǎn)單概括它們的含義，就是系統(tǒng) 1 是聯(lián)想式思維，系統(tǒng)2是規(guī)則式思維，也可以看成是直覺(jué)與慎思的區(qū)別。
先說(shuō)系統(tǒng)1，直覺(jué)是我們大腦對(duì)日常接受信息簡(jiǎn)化處理的產(chǎn)物，我們的大腦就像處理器一樣，每天都要面對(duì)海量的信息通過(guò)視覺(jué)、味覺(jué)等五感導(dǎo)入，如果它沒(méi)有任何區(qū)別的對(duì)這些內(nèi)容進(jìn)行深度、縝密的分析，那么它一定會(huì)超負(fù)荷運(yùn)轉(zhuǎn)并最終自我毀滅。
所以生物的演化，讓我們的大腦進(jìn)化出了一套可以對(duì)信息進(jìn)行過(guò)濾和簡(jiǎn)化的系統(tǒng)，格式塔心理學(xué)中關(guān)于視覺(jué)對(duì)物體簡(jiǎn)化、完形的理論，也是由其產(chǎn)生，這就是我們對(duì)很多事物下意識(shí)反應(yīng)的來(lái)源。比如在走路的過(guò)程中，看見(jiàn)一輛自行車(chē)直挺挺的從遠(yuǎn)處像你沖過(guò)來(lái)，那么你會(huì)馬上感覺(jué)到危險(xiǎn)并往某個(gè)方向規(guī)避，整個(gè)過(guò)程會(huì)在不到1秒的時(shí)間內(nèi)完成。
而系統(tǒng)2，就是對(duì)事物進(jìn)行邏輯推導(dǎo)的深入思考，如果用它來(lái)處理危險(xiǎn)的事件，那么結(jié)果可能是我們先判斷這輛自行車(chē)行駛的軌跡并得出它前進(jìn)的方向與我站立的位置相交，并且它的時(shí)速約為 40km， 在撞到我的時(shí)間還有3S，如果以這種速度撞在我們身上，大概率會(huì)發(fā)生……
“BONG～”
那就不用想可能會(huì)發(fā)生什么事情，你已經(jīng)被撞飛了，可以直接得到結(jié)果。類(lèi)似的事情還有很多，無(wú)論是對(duì)與危險(xiǎn)的，還是日常事務(wù)的作用，系統(tǒng)1都發(fā)揮出了極其重要的作用。也因?yàn)樗挠行?，而?dǎo)致我們對(duì)它依賴(lài)過(guò)度。所以，很多人在對(duì)于美丑的審視上只依靠系統(tǒng) 1 來(lái)完成，而不會(huì)深入去思考各中原由。
系統(tǒng) 1 對(duì)美丑的判斷，是個(gè)人的，但它并沒(méi)有 “審” 的過(guò)程，專(zhuān)業(yè)的分析也就無(wú)從談起。斯洛曼和費(fèi)恩巴赫所著的 《知識(shí)的錯(cuò)覺(jué)》 里提到：
"直覺(jué)給予我們一個(gè)簡(jiǎn)化的、粗略的，而且通常足夠好的分析，這讓我們產(chǎn)生錯(cuò)覺(jué)，自以為所知甚廣。但是當(dāng)我們慎思時(shí)，我們才意識(shí)到事物實(shí)際上何其復(fù)雜，我們真的只是略知皮毛。"
審美和品嘗美酒、咖啡一樣，需要通過(guò)了解專(zhuān)業(yè)的知識(shí)，培養(yǎng)系統(tǒng)的分析方式進(jìn)行刻意練習(xí)，逐漸擺脫依靠我們直覺(jué)做出的不可靠的判斷。
因?yàn)槿魏蝺?yōu)秀的設(shè)計(jì)作品，在創(chuàng)作過(guò)程中都不可能是隨性而為的，都是經(jīng)過(guò)創(chuàng)作者深思熟慮后的產(chǎn)物，我們對(duì)優(yōu)秀作品的評(píng)價(jià)，就是通過(guò)專(zhuān)業(yè)的知識(shí)對(duì)其創(chuàng)作邏輯進(jìn)行推導(dǎo)，哪里有亮點(diǎn)，哪些是敗筆，都是清晰可見(jiàn)的。
它不僅幫助我們判斷別人作品的優(yōu)劣，也可以分析我們自己作品的不足，從而得到改進(jìn)的思路。所以為什么說(shuō)審美要先于實(shí)踐，如果連什么是好的都不了解，自己設(shè)計(jì)出來(lái)的東西都不知道如何評(píng)價(jià)，又談何進(jìn)步？
在我自己的教學(xué)經(jīng)驗(yàn)中，這個(gè)問(wèn)題所表現(xiàn)出來(lái)的差異就很有意思。如有一些審美能力較差的學(xué)生第一次設(shè)計(jì) Banner ，花了非常多精力和時(shí)間，自我感覺(jué)不錯(cuò)，但是作品質(zhì)量極差，會(huì)在得到否定的評(píng)價(jià)以后表示詫異和茫然，因?yàn)樗麄円呀?jīng)預(yù)感應(yīng)該得到贊美與肯定。而審美較好的學(xué)生則是在完成作業(yè)以后充分的發(fā)現(xiàn)自己設(shè)計(jì)的東西和較好的作品之間的差距，那么他希望在我這里獲取的，就是如何縮小這種差距的具體方式，而不是對(duì)其作品做出評(píng)價(jià)，因?yàn)樗麄冏约阂矔?huì)覺(jué)得作品質(zhì)量差的沒(méi)評(píng)價(jià)的必要。
但不幸的是，在商業(yè)視覺(jué)設(shè)計(jì)的領(lǐng)域中，提升我們的專(zhuān)業(yè)評(píng)價(jià)的能力，并不如其它行業(yè)一般有固定的流程和教學(xué)，按筆者自己長(zhǎng)期的經(jīng)驗(yàn)來(lái)看，如果我們盲目的從藝術(shù)、設(shè)計(jì)、心理多個(gè)學(xué)科的基礎(chǔ)理論開(kāi)始學(xué)起，那提升的速度太緩慢，需要的周期太長(zhǎng)，而且有非常強(qiáng)烈的挫敗感，如果沒(méi)有好老師的引導(dǎo)，還容易鉆牛角尖誤入歧途。
所以，第一部分的對(duì)比，重要性才能體現(xiàn)出來(lái)。我們要通過(guò)實(shí)踐作為基礎(chǔ)，來(lái)系統(tǒng)性的提升我們的專(zhuān)業(yè)審美能力，通過(guò)應(yīng)用推理的能力，抑制我們無(wú)所不在的直覺(jué)。
前面扯了這么一大堆，都是在紙面上的探討，不太接地氣，只分析一通原因，和你該如何提升審美沒(méi)太多關(guān)系，這是最氣人的。所以，最后一部分，我們來(lái)講講具體實(shí)施的做法。
先聲明，審美提升是要通過(guò)刻意練習(xí)的步驟的，誰(shuí)也不可能只通過(guò)區(qū)區(qū)幾篇文章就以為自己已經(jīng)明白了，所以需要執(zhí)行下面這個(gè)循環(huán)步驟：
? 采集：大量觀(guān)察和收集作品
? 對(duì)比：留下它們中最好的
? 分析：尋找優(yōu)劣差異的原因
開(kāi)始前，還要解釋一件事，就是我們提升審美都要先從某個(gè)點(diǎn)開(kāi)始突破，從你最感興趣的，或是工作關(guān)聯(lián)度最高的設(shè)計(jì)類(lèi)型開(kāi)始，而不是無(wú)差別的亂看。與美術(shù)學(xué)相關(guān)的所有設(shè)計(jì)中，底層的原則都是近似的，精通一種，就能更容易理解其它種類(lèi)的作品。
1.采集
觀(guān)察的來(lái)源多種多樣，強(qiáng)烈建議初期只使用花瓣即可，不要分心到太多的平臺(tái)上，選擇太多往往不是好事，會(huì)增加干擾，讓我們疲于奔命，模糊一開(kāi)始的目標(biāo)。
例如首先要提升在 APP 方面的審美，我們先在花瓣中創(chuàng)建一個(gè) APP 的畫(huà)板，然后搜索 APP 相關(guān)的關(guān)鍵字，但不需要關(guān)注第一頁(yè)彈出的采集結(jié)果，直接查看 “畫(huà)板” 選項(xiàng)。
畫(huà)板是別的用戶(hù)自己整理的采集合集，我們可以通過(guò)封面簡(jiǎn)單篩選出你喜歡的，然后打開(kāi)它們，瀏覽里面收集的作品。
然后盡量按自己最高的要求來(lái)找到能讓自己覺(jué)得滿(mǎn)意的作品，再將它們 “采集” 到自己創(chuàng)建的畫(huà)板中，并設(shè)定一個(gè)數(shù)量，比如采集到500張為止。
2.對(duì)比：
達(dá)到目標(biāo)的數(shù)量就停下來(lái)，因?yàn)樵俨杉氯ツ軒?lái)的作用已經(jīng)非常有限了。雖然采集中已經(jīng)包含了選擇和對(duì)比的過(guò)程，但我們要更進(jìn)一步，在自己的選出來(lái)的作品里進(jìn)行比較。相信在完成這個(gè)步驟以后，你們已經(jīng)可以明顯感覺(jué)到最后 100 張收集的質(zhì)量是遠(yuǎn)遠(yuǎn)高于前 100 張的。在羅子雄 TEDX 的演講中就說(shuō)過(guò)：你回頭看三個(gè)月前收集的作品，會(huì)發(fā)現(xiàn)它們都是垃圾……
更極端一點(diǎn)，那就是我們只在挑選的作品中留下最好的十分之一，聽(tīng)起來(lái)是不是很刺激。
也就是我們要開(kāi)始在自己選出來(lái)的作品中，你要?jiǎng)h掉其中的 450 張作品 （最好有留底），即使當(dāng)中有一些你非常喜歡，而且它們都是你的勞動(dòng)果實(shí)。但就因?yàn)檫@樣，你才會(huì)更慎重的進(jìn)行比較。因?yàn)槎鄶?shù)人的采集只是走馬觀(guān)花，后面根本就不會(huì)看這些東西。
當(dāng)然，這個(gè)過(guò)程推薦用 Eagle 或者 花瓣 PRO 客戶(hù)端，操作起來(lái)會(huì)更順手一點(diǎn)。
3.分析：
在上一步操作里，我們會(huì)動(dòng)用我們腦海里所有關(guān)于理性的分析方法來(lái)解釋它們的優(yōu)劣，并得出結(jié)論，雖然這些想法可能很幼稚或漏洞百出，但不要擔(dān)心，最后一步就是用來(lái)解決這個(gè)問(wèn)題的。
我們捉對(duì)挑選一些作品出來(lái)，在剩下的作品中和已經(jīng)被你否決掉的作品各選一張，然后將它們排列到一起，對(duì)比它們的優(yōu)缺點(diǎn)，比如下圖是我從我自己畫(huà)板中找出的近期和早期的采集作品。
專(zhuān)業(yè)的分析是怎么得出的？當(dāng)然不像朱熹提出的 “格物致知” 一般盯著它們思考，就能把設(shè)計(jì)的理論給格出來(lái)，這條路是走不通的，所以才有王陽(yáng)明 “知行合一” 的教誨。
我們要把對(duì)比的內(nèi)容進(jìn)行細(xì)化，把一套作品看成若干細(xì)節(jié)的合集，明確比較的目標(biāo)，這樣才能得到理想的結(jié)果，比如：
? 字體
? 配色
? 布局
? 配圖
? ……
比如我們挑文字出來(lái)分析，這時(shí)候局勢(shì)已經(jīng)比較明朗了，上側(cè)的設(shè)計(jì)中文字是能被清晰識(shí)別的，在不同的字段類(lèi)型中字重有對(duì)應(yīng)的調(diào)整，主次有序。而下側(cè)的文字應(yīng)用則缺乏對(duì)比，部分文字甚至和背景都無(wú)法做出區(qū)分，且字重幾乎沒(méi)有變化，使用了多種字體沒(méi)有整體性，導(dǎo)致最后的閱讀感受極差。
同理，你可以再試試分析其它幾個(gè)細(xì)節(jié)，是不是簡(jiǎn)單多了。如果這時(shí)候你再覺(jué)得手足無(wú)措，完全分析不出什么具體的東西怎么辦？
學(xué)??！
如對(duì)比到配色，我們解釋不出為什么右圖的配色不行，那就針對(duì)配色去了解相關(guān)的配色技巧、理論，網(wǎng)上可以搜索的分享就一大堆了，比如關(guān)于色彩對(duì)比、用色比例等等，將你學(xué)到的知識(shí)現(xiàn)學(xué)現(xiàn)用套進(jìn)這兩張作品中，也就可以很快的得到驗(yàn)證。
后面每出現(xiàn)這樣的問(wèn)題，就現(xiàn)學(xué)現(xiàn)賣(mài)，不僅可以直接提升我們對(duì)作品的理解能力，還能鞏固我們學(xué)過(guò)的理論知識(shí)。多分析幾組對(duì)比，你就會(huì)發(fā)現(xiàn)對(duì)于這類(lèi)作品的審美和理解已經(jīng)得到了質(zhì)的飛躍，這時(shí)候，你就可以以留下的這幾十張作品作為你接受的下限，去收集新的作品，完成下一次循環(huán)。
結(jié)尾
對(duì)于設(shè)計(jì)基礎(chǔ)審美的提升就解釋到這里了，再寫(xiě)下去也沒(méi)人看了（寫(xiě)不動(dòng)了）。我們?cè)诼殬I(yè)相關(guān)的審美提升一定要具有實(shí)用性，接地氣，目標(biāo)準(zhǔn)確的特點(diǎn)，不要這個(gè)階段跑去聽(tīng)古典，看畫(huà)展，讀詩(shī)歌，所以整個(gè)回答我都盡量避開(kāi)這些坑不提。
設(shè)計(jì)師的專(zhuān)業(yè)性首先不是追求審美的極限，而是先提高自己的下限。只有超出自己動(dòng)手能力的下限，才能讓我們拒絕粗制濫造的作品，驅(qū)動(dòng)我們進(jìn)步。
最后，在同意我前面觀(guān)點(diǎn)的基礎(chǔ)上，大家可以嘗試我最后給出的方法，如果你覺(jué)得你的審美還提升不上去，那歡迎你們隨時(shí)找我算賬！而只是看完卻沒(méi)有實(shí)質(zhì)行動(dòng)，那就不要再抱怨自己什么提升上去了。
作者：酸梅干超人 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在今天的 UI 設(shè)計(jì)領(lǐng)域，由扁平化設(shè)計(jì)風(fēng)格占據(jù)主導(dǎo)地位，已經(jīng)是無(wú)可辯駁的事實(shí)了。扁平化應(yīng)用除了提升用戶(hù)獲取信息的效率外，對(duì)設(shè)計(jì)師而言就是設(shè)計(jì)的難度大大降低了。
一個(gè)界面的 UI 視覺(jué)元素，僅僅只需要圖片素材、矢量圖標(biāo)、幾何、文字，UI 設(shè)計(jì)師的工作僅僅是對(duì)內(nèi)容進(jìn)行組織和排版，涉及到原創(chuàng)的也僅僅只有少量的圖標(biāo)（大多數(shù)人還畫(huà)不好）。
這種狀態(tài)持續(xù)了很多年，看起來(lái)歲月一片靜好。
但是，這兩年市場(chǎng)發(fā)出了一些不同的聲音，那就是打破純扁平風(fēng)格的 UI 風(fēng)格、元素開(kāi)始越來(lái)越盛行了。
比如新擬態(tài)風(fēng)格在年初炒了一波熱度，各大平臺(tái)和公眾號(hào)都鋪天蓋地的發(fā)文和介紹，介紹它的設(shè)計(jì)理念和設(shè)計(jì)方法。
還有就是以餓了么、美團(tuán)為首的國(guó)民級(jí)應(yīng)用在主頁(yè)顯眼的位置里使用極具識(shí)別性的擬物圖標(biāo)，引起設(shè)計(jì)圈的熱議。
首先講講新擬態(tài)設(shè)計(jì)，之所以之前只字不提，是因?yàn)槲覍?duì)這個(gè)風(fēng)格實(shí)在沒(méi)什么好感，有種對(duì)純擬物借尸還魂的味道，且它的樣式對(duì)于信息密度高的應(yīng)用是完全不適用的，只能活在飛機(jī)稿里。
而國(guó)內(nèi)大型應(yīng)用開(kāi)始在實(shí)際項(xiàng)目中上線(xiàn)擬物圖標(biāo)，意義就不一樣了，證明這樣的設(shè)計(jì)是經(jīng)過(guò)幾個(gè)大廠(chǎng)團(tuán)隊(duì)認(rèn)可，且有共識(shí)的。
當(dāng)然，這并不因?yàn)榇髲S(chǎng)用了就無(wú)腦推崇。而是純扁平的設(shè)計(jì)已經(jīng)越來(lái)越難滿(mǎn)足部分需要強(qiáng)視覺(jué)效果的頁(yè)面設(shè)計(jì)了。
今天的互聯(lián)網(wǎng)和過(guò)去不一樣，用戶(hù)的增長(zhǎng)留存不再是過(guò)去一樣通過(guò)裂變和口碑完成，一個(gè)產(chǎn)品只要認(rèn)真打磨體驗(yàn)、功能就能獲得用戶(hù)的青睞和駐留。用戶(hù)的精力時(shí)間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶(hù)臨幸是沒(méi)有出路，這種現(xiàn)狀也被稱(chēng)為互聯(lián)網(wǎng)的下半場(chǎng)。
佛系不行，當(dāng)舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對(duì)待用戶(hù)的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來(lái)越高，運(yùn)營(yíng)活動(dòng)越來(lái)越密集，廣告和強(qiáng)提示也越來(lái)越多。比如剛打開(kāi)了三個(gè)應(yīng)用，進(jìn)入的首頁(yè)大家自己意會(huì)……
有點(diǎn)扯遠(yuǎn)了，回到話(huà)題上。在這種掠奪用戶(hù)注意力的思路指引下，再做所謂的性冷淡、大留白、極簡(jiǎn)風(fēng)就不會(huì)合適。當(dāng)對(duì)扁平的視覺(jué)效果已經(jīng)開(kāi)發(fā)到極限以后，那么進(jìn)一步在一些細(xì)節(jié)處應(yīng)用擬物就成為必然的選擇。
而擬物的應(yīng)用并不可能鋪設(shè)到整個(gè)應(yīng)用中去，因?yàn)橥耆珨M物化的設(shè)計(jì)降低信息瀏覽效率是必然的，所以它只適合做局部的視覺(jué)強(qiáng)化，來(lái)加強(qiáng)用戶(hù)對(duì)特定區(qū)域的感知。
最常見(jiàn)的需要被凸出的要素，就是首頁(yè)中應(yīng)用的快速入口圖標(biāo)、分類(lèi)圖標(biāo)和底部導(dǎo)航欄圖標(biāo)了。這些區(qū)域長(zhǎng)期受運(yùn)營(yíng)活動(dòng)支配，相信大家已經(jīng)很習(xí)慣了。
只是，這些圖標(biāo)開(kāi)始在脫離運(yùn)營(yíng)活動(dòng)的狀態(tài)下，也開(kāi)始使用非扁平模式，那就不再是運(yùn)營(yíng)設(shè)計(jì)師的工作職責(zé)，而是 UI 設(shè)計(jì)師們繞不過(guò)去的檻了（知識(shí)盲區(qū)）！
且除了 APP 外，其它領(lǐng)域?qū)τ跀M物設(shè)計(jì)的需求也會(huì)開(kāi)始逐漸提升，尤其是目前越來(lái)越復(fù)（fu）雜（kua）的大屏數(shù)據(jù)展示、車(chē)載界面、定制系統(tǒng)等等。
作為新世代的 UI 設(shè)計(jì)師，多數(shù)人對(duì)擬物的設(shè)計(jì)可以說(shuō)是完全空白的狀態(tài)，所以是時(shí)候要重拾擬物設(shè)計(jì)這個(gè)傳統(tǒng)藝能了。
前面我有提到，擬物主要應(yīng)用在關(guān)鍵的圖標(biāo)上，但應(yīng)用的擬物風(fēng)格并不是過(guò)去我們追求的那種極其真實(shí)、復(fù)雜的擬物，而是經(jīng)過(guò)一定簡(jiǎn)化、抽象后的擬物 —— 輕擬物。我們要先來(lái)明確一下輕擬物到底是什么。
首先我們看看，過(guò)去優(yōu)秀的擬物圖標(biāo)和設(shè)計(jì)案例，它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造，甚至?xí)浅Ｍ暾谋憩F(xiàn)物體表面的材質(zhì)和肌理。
這種圖標(biāo)單看起來(lái)確實(shí)很好看、細(xì)致。但是，把它丟進(jìn)我們當(dāng)前的頁(yè)面中是非常違和的，因?yàn)樗鼈兗?xì)節(jié)實(shí)在太多了，而且畫(huà)起來(lái)非常耗時(shí)間，不利于項(xiàng)目整體的推進(jìn)。
所以為了符合畫(huà)面的質(zhì)感，又要考慮項(xiàng)目效率，輕擬物這個(gè)概念開(kāi)始被提出和應(yīng)用，作為一個(gè)折中的解決方案。
它和純擬物設(shè)計(jì)的共同點(diǎn)在于，也表現(xiàn)光影、結(jié)構(gòu)、透視，但它盡可能精簡(jiǎn)了輪廓的復(fù)雜度、肌理和層級(jí)，呈現(xiàn)出更概念化、理想化、易于辨識(shí)的擬物圖形。
所以，我們主要去學(xué)習(xí)的內(nèi)容是輕擬物的設(shè)計(jì)方法，而不是徒手畫(huà)照片（這個(gè)可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實(shí)體質(zhì)感的。但是扁平從插畫(huà)到圖標(biāo)設(shè)計(jì)經(jīng)過(guò)多年的改版，有各種嘆（hua）為（li）觀(guān)（hu）止（shao）的設(shè)計(jì)，應(yīng)用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標(biāo)的系列干貨中有提過(guò)，這類(lèi)設(shè)計(jì)是面性圖標(biāo)的進(jìn)階版，它們依舊屬于扁平風(fēng)格的范疇之內(nèi)，不能和輕擬物劃上等號(hào)。
對(duì)于這幾年才開(kāi)始學(xué)習(xí) UI 設(shè)計(jì)的新手來(lái)講，擬物已經(jīng)變成一個(gè)很陌生的事物，這對(duì)行業(yè)來(lái)說(shuō)是比較悲哀的一件事。
因?yàn)閿M物的設(shè)計(jì)不僅僅是畫(huà)圖標(biāo)而已，對(duì)它的學(xué)習(xí)可以全方位的提升設(shè)計(jì)師的基礎(chǔ)素養(yǎng)，不僅包括對(duì)傳統(tǒng)美術(shù)（結(jié)構(gòu)、光影、色彩、透視）知識(shí)點(diǎn)的剖析，還包含對(duì) PS 使用的深入探索。
可以說(shuō)，自從擬物不成為必修題材以后，九成以上的UI設(shè)計(jì)師是不會(huì)用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計(jì)師一致的，只是省略了更多復(fù)雜的細(xì)節(jié)。而對(duì)于整個(gè)擬物的體系來(lái)講，最重要的東西實(shí)際上只有2個(gè)，形體、光影。
形體的表現(xiàn)，就是對(duì)圖形外輪廓的樣式的呈現(xiàn)。在過(guò)去我們寫(xiě)的圖標(biāo)分享中，有寫(xiě)過(guò)面性圖標(biāo)進(jìn)階的設(shè)計(jì)中，可以包含更多的細(xì)節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設(shè)計(jì)就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上，即你要把這個(gè)圖形的內(nèi)容有明確的示意并畫(huà)出來(lái)，而不是用抽象的圖形做填充而已。
比如大眾點(diǎn)評(píng)的快速入口圖標(biāo)，雖然看起來(lái)很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。
換句話(huà)說(shuō)，擬物插畫(huà)的圖形基底，類(lèi)似扁平插畫(huà)風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過(guò)多的細(xì)節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非常考驗(yàn)設(shè)計(jì)師的判斷和經(jīng)驗(yàn)了。
并且，在描繪輪廓的時(shí)候，新手盡可能的采取正視圖來(lái)進(jìn)行繪制，而不要通過(guò)俯視圖、側(cè)視圖、斜視圖等方法來(lái)呈現(xiàn)圖形的多個(gè)面，這樣難度會(huì)大幅度上升，比如下面這種情況。
除了形體外，光影就是整個(gè)擬物的靈魂了。
當(dāng)一個(gè)完整的圖形完成填充色時(shí)，它是扁平圖案，如果完成光影呈現(xiàn)的時(shí)候，它就是三維空間的立體圖形，比如下面這個(gè)圓的案例：
在擬物的設(shè)計(jì)中，我們對(duì)光影的定義是至關(guān)重要的，所以首先就是針對(duì)該圖形確定光源的方向，是上方、前方、左上還右上，這對(duì)后續(xù)的設(shè)計(jì)有一連串的影響。
如果對(duì)光影沒(méi)有正確的解釋?zhuān)敲丛谥谱骷?xì)節(jié)的漸變角度、投影的使用上，就會(huì)產(chǎn)生錯(cuò)誤的設(shè)計(jì)，造成光影視覺(jué)沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線(xiàn)的影響就會(huì)產(chǎn)生明暗面和投影，可以簡(jiǎn)單劃分成4個(gè)部分，高光、亮部、暗部、投影。
這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對(duì)光影的表現(xiàn)害會(huì)包含明暗交界、反光面，這對(duì)于輕擬物的來(lái)說(shuō)負(fù)擔(dān)太重，所以我們要去掉它們，接下來(lái)重點(diǎn)講講高光和暗部。
高光是物體作為受光物對(duì)光源的直接反映，比如人像攝影中人眼眸中的高光就是對(duì)閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長(zhǎng)期存在的高光配飾（多數(shù)動(dòng)畫(huà)的光頭角色都有）……
高光可以非常有效的增加畫(huà)面的層次和對(duì)比性，讓物體看上去更有沖擊力和觀(guān)賞性。
而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因?yàn)椴辉谑芄饷?，所以顏色?huì)變暗。在實(shí)際操作過(guò)程中，我們可以通過(guò)漸變的方式開(kāi)控制明暗的表達(dá)，但盡量不要直接手動(dòng)設(shè)置一個(gè)漸變色出來(lái)，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個(gè)特性以后，下面，我們就通過(guò)一個(gè)實(shí)例來(lái)講解一下輕擬物設(shè)計(jì)的過(guò)程吧。
作為輕擬物的演示，直接畫(huà)個(gè)圖標(biāo)講一遍怎么操作是沒(méi)什么用的，我們要從實(shí)際場(chǎng)景出發(fā)，用它來(lái)解決一些真實(shí)的問(wèn)題。比如看看下面的 KFC 官方 APP 首頁(yè)：
總結(jié)它的問(wèn)題，不難發(fā)現(xiàn)首頁(yè)頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個(gè)（加滑動(dòng)的），雖然每個(gè)模塊圖標(biāo)單看都沒(méi)有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級(jí)和對(duì)比性。
我們要做的，就是通過(guò)輕擬物的方式，調(diào)整快速入口最大的三個(gè)圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺(jué)差異性。先從第一個(gè)圖標(biāo)開(kāi)始，講解一下如何完成輕擬物化設(shè)計(jì)的升級(jí)。
第一步：確認(rèn)輪廓造型
第一個(gè)操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動(dòng)，包括加粗車(chē)頭，減少高度，增加車(chē)燈等。并對(duì)每一個(gè)模塊進(jìn)行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對(duì)圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達(dá)意。
第二步：完善圖形細(xì)節(jié)
這一步，就要在原有基礎(chǔ)上，進(jìn)行下一步的深入。包括對(duì)一些細(xì)節(jié)交代得更清楚一點(diǎn)，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎(chǔ)的暗部表現(xiàn)
在這里，我們就要開(kāi)始為圖標(biāo)增加高光了，高光從右上角打下來(lái)，那么有疊加關(guān)系的元素就會(huì)產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強(qiáng)。
這一步在軟件中主要使用蒙版功能，通過(guò)蒙版在背景上方創(chuàng)建一個(gè)圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對(duì)暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫(huà)面中來(lái)，講整個(gè)圖標(biāo)的質(zhì)感進(jìn)行拉升，
通過(guò)上面的演示，我們可以將整個(gè)擬物設(shè)計(jì)流程精簡(jiǎn)成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細(xì)節(jié)樣式增加趣味性和適當(dāng)?shù)臄M真感
3.通過(guò)蒙版添加暗部來(lái)完善表現(xiàn)的明暗和層級(jí)關(guān)系
4.添加高光元素作為圖形的亮點(diǎn)，拉升層次感
然后，通過(guò)這樣的步驟，再來(lái)完成后續(xù)的兩個(gè)圖形，拆解完的效果如下。
然后，再用這三個(gè)修改后圖標(biāo)套用進(jìn)原來(lái)的頁(yè)面，并做出對(duì)應(yīng)的修改，再來(lái)看看前后對(duì)比：
通過(guò)這個(gè)對(duì)比，我們就可以看出在這個(gè)復(fù)雜的首頁(yè)頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來(lái)，且不會(huì)顯得太突兀和復(fù)雜。
而這就是輕擬物在項(xiàng)目設(shè)計(jì)中的實(shí)際作用，當(dāng)畫(huà)面元素已經(jīng)開(kāi)始超負(fù)荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時(shí)，就是輕擬物登場(chǎng)的時(shí)候了。
在如今的界面設(shè)計(jì)中，投影使用的范圍和頻次越來(lái)越高。無(wú)論線(xiàn)上項(xiàng)目或是追波上飛機(jī)稿，都可以看見(jiàn)各種各樣的投影樣式。
投影的使用，是 UI 設(shè)計(jì)師必須掌握好的視覺(jué)設(shè)計(jì)基礎(chǔ)。投影遠(yuǎn)沒(méi)有大家想象的那么簡(jiǎn)單，即使軟件中可以設(shè)置的參數(shù)并不多，很多設(shè)計(jì)師始終沒(méi)辦法很好的應(yīng)用投影來(lái)提升自己的設(shè)計(jì)質(zhì)感。
所以，這篇文章就會(huì)詳細(xì)講解設(shè)計(jì)投影的正確姿勢(shì)。
有了光，才有影。光影是美術(shù)和攝影最核心的基礎(chǔ)。
如果沒(méi)有系統(tǒng)學(xué)習(xí)過(guò)相關(guān)理論，對(duì)投影的認(rèn)識(shí)會(huì)有失偏頗，會(huì)認(rèn)為投影只是將一個(gè)物體的輪廓（遮擋光源的部分）完整映射在其它平面上而已，一個(gè)光源下只有一個(gè)影子，比如下圖設(shè)計(jì)出來(lái)的情況。
但是，真實(shí)世界中的投影，卻并沒(méi)有這么簡(jiǎn)單，往往虛實(shí)即不統(tǒng)一，明暗也不一致。就像下面這個(gè)物體的陰影。
在光學(xué)原理中，不透明物體遮擋光源，所產(chǎn)生的影子有兩個(gè)部分，本影和半影。本影是影子中間最暗的部分（還有偽本影的概念，我們暫時(shí)將它合并起來(lái)理解），而四周開(kāi)始變淺變淡，有彌散質(zhì)感的影子稱(chēng)為半影，就像下圖所示。
現(xiàn)實(shí)世界中可見(jiàn)的投影都會(huì)形成這兩種影子，因?yàn)楣庠从猩⑸涞奶卣鳎?dāng)光線(xiàn)照射在物體上時(shí)勢(shì)必會(huì)產(chǎn)生非垂直角度的光線(xiàn)，于是其中作用最大，重疊最多的一部分形成本影，而其余比較極限的切線(xiàn)部分形成半影，如下圖的案例。
通過(guò)案例我們也可以發(fā)現(xiàn)，當(dāng)光源、物體、陰影面的距離不同時(shí)，產(chǎn)生的本影和半影面積也就不同。反過(guò)來(lái)講，我們還可以通過(guò)物體本影和半影的面積，來(lái)判斷它的空間關(guān)系，比如下方的兩個(gè)物體，明顯能感受到下側(cè)懸浮的高度大于上側(cè)。
或者，通過(guò)陰影來(lái)判斷光源對(duì)于物體的方向和強(qiáng)弱。比如下圖案例，就可以明顯判斷光源位于畫(huà)面的左側(cè)，所以即使擺入其它物體，陰影也會(huì)朝反方向延伸。
除此之外，投影還可以反應(yīng)很多其它隱藏的三維信息，只要使用得當(dāng)，它就可以幫助設(shè)計(jì)師表達(dá)呈現(xiàn)各種不同的空間位置。比如可以通過(guò)投影判斷物體是處于懸空或者是平躺，以及物體的厚度如何。
根據(jù)生活的經(jīng)驗(yàn)，我們已經(jīng)對(duì)投影所產(chǎn)生的暗示習(xí)以為常，能根據(jù)投影的結(jié)果下意識(shí)的對(duì)界面內(nèi)容做出判斷。所以，設(shè)計(jì)師在設(shè)計(jì)過(guò)程中如果對(duì)投影沒(méi)有進(jìn)行很好的思考，就無(wú)法設(shè)計(jì)出符合規(guī)律和邏輯的投影，界面就會(huì)產(chǎn)生違和感，而作品也因此大幅降低了質(zhì)感。
在進(jìn)入了扁平化的設(shè)計(jì)環(huán)境后，投影有很長(zhǎng)一段時(shí)間被抹除，因?yàn)榇蠹艺J(rèn)為那是擬物的遺毒，就怕設(shè)計(jì)里用到擬物元素顯得不夠時(shí)髦。
到了 Material Design 發(fā)布以后，谷歌在規(guī)范中增加了 Z 軸的概念，也就是為平面預(yù)設(shè)了立體的空間，設(shè)計(jì)元素可以定義與空間中水平面的距離，并通過(guò)投影來(lái)表現(xiàn)。
下圖中，Z 軸數(shù)字越大，代表和水平面的距離越遠(yuǎn)，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的 XY 坐標(biāo)并沒(méi)有任何改變。
即然增加了投影，那么谷歌的專(zhuān)業(yè)設(shè)計(jì)團(tuán)隊(duì)，肯定不會(huì)很隨意的制定其參數(shù)。當(dāng)我們打開(kāi)谷歌的官方 UI kits 源文件進(jìn)行查看時(shí)，就能發(fā)現(xiàn)其中的奧妙。它們?yōu)樵貏?chuàng)建了兩層投影，即本影和半影，有時(shí)也稱(chēng)為 top shadow 和 bottom shadow。
并且，還有一個(gè)在第一部分沒(méi)有提及的要點(diǎn)，投影的深淺與元素的距離是非線(xiàn)性的，即中心到邊緣衰減的速度是越來(lái)越大的，用坐標(biāo)軸標(biāo)示就是非線(xiàn)性的函數(shù)關(guān)系，而大多數(shù)軟件中的投影只能以線(xiàn)性的模式呈現(xiàn)。
在 UI 設(shè)計(jì)師接觸的平面類(lèi)軟件中，只有 PS 具備完美復(fù)現(xiàn)這種投影的能力，即控制投影的等高線(xiàn)。
上面出現(xiàn)的投影都是黑白灰，但在現(xiàn)在流行的設(shè)計(jì)作品中，最常見(jiàn)的是應(yīng)用了彩色的投影，攝影中也經(jīng)常會(huì)應(yīng)用彩色的投影渲染氛圍。
但是，投影中的這些彩色區(qū)域，并不完全都是投影，還包含了折射和漫反射等混雜的色光。為了簡(jiǎn)化（完整的闡述可以寫(xiě)一本書(shū)了），我們可以認(rèn)為是光線(xiàn)穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽(yáng)傘，傘下的人頭頂也會(huì)彌漫著草原的芬芳……
在開(kāi)始展示具體的設(shè)計(jì)案例前，我們要先明確一個(gè)原則，即：優(yōu)雅的投影是讓你感受到它的存在，但不會(huì)吸引你去關(guān)注它！
一般的設(shè)計(jì)軟件中，元素的陰影即是在元素的背后添加了一個(gè)相同輪廓的純色矢量圖形，我們可以通過(guò) XY 軸移動(dòng)它的位置，并使用模糊的參數(shù)來(lái)設(shè)置它的彌散度。
當(dāng)元素距離水平面越近，陰影距離元素也就越近，即投影的 XY 值越小，模糊也越小，如果離得遠(yuǎn)則相反。
3.1 常規(guī)投影類(lèi)型
第一種投影的類(lèi)型，即假定元素平躺，光源正對(duì)著元素的平面，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標(biāo)為0，只添加模糊的參數(shù)，透明度較低。第二層陰影使用相同的模糊參數(shù)，增加 Y 軸坐標(biāo)，透明度較高。
在非 MD 設(shè)計(jì)中，它濃郁的投影參數(shù)會(huì)讓整個(gè)界面變“臟”，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是，當(dāng)使用純黑色做陰影時(shí)，透明度無(wú)論如何都不應(yīng)該高于 20%，正常區(qū)間在 5%-15%。
既然知道陰影屬性的規(guī)律，我們還可以復(fù)制這個(gè)矢量圖層做高斯模糊也可以得到一樣的效果，這種方法可以支持我們?cè)O(shè)計(jì)出更真實(shí)的投影。即將 Bottom Shadow 獨(dú)立出來(lái)，縮小并向下移動(dòng)。
如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺(jué)去調(diào)整它們的透明度。
如果感覺(jué)不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。
既然前面提到彩色投影是由于光線(xiàn)穿透了元素，那么當(dāng)使用了漸變色或者是圖片的投影，我們?cè)谥疤岬降膹?fù)制出的那層充當(dāng) Bottom shadow 的矢量圖形，就可以不使用填充色，而是直接用漸變或者是原圖進(jìn)行模糊和透明度調(diào)整。
3.2 非常規(guī)投影類(lèi)型
光既然可以垂直于被照射平面，那么發(fā)揮想象力，我們還可以更改光與面的位置，讓光線(xiàn)與平面之間的夾角變小，如下圖所示。
在這個(gè)場(chǎng)景中，投影就作用在圖片下方的地面，只有地面處于透視狀態(tài)時(shí)，才能可以看見(jiàn)它的投影，所以，我們就可以得到下方的效果。
當(dāng)然，我們還可以結(jié)合光源的類(lèi)型，比如使用聚光燈等，那么陰影的輪廓就會(huì)發(fā)生變化。
我們甚至可以假設(shè)元素本身產(chǎn)生了一定的變形，如邊緣翹起，那么就會(huì)出現(xiàn)獨(dú)特的陰影形狀。
我們可以從日常生活中的觀(guān)察將各種不同的投影形式引用進(jìn)我們的設(shè)計(jì)中，讓我們?cè)O(shè)計(jì)中的視覺(jué)形式更豐富有趣。
學(xué)會(huì)正確的投影設(shè)計(jì)方式，并不是僅僅讓我們局限在 UI 元素的設(shè)計(jì)上。它還能給我們帶來(lái)很多意想不到的幫助，比如做設(shè)計(jì)作品的包裝。
通過(guò)前面講解的知識(shí)點(diǎn)，上方展示案例中應(yīng)用的陰影方式相信你們已經(jīng)可以看出端倪了，如果使用基礎(chǔ)的陰影設(shè)置去創(chuàng)建展示的陰影，就會(huì)發(fā)現(xiàn)效果遠(yuǎn)遠(yuǎn)不如案例的高級(jí)，自然也難以帶給別人良好的視覺(jué)體驗(yàn)。
最后，在項(xiàng)目中，想要將設(shè)計(jì)出來(lái)的陰影交付給開(kāi)發(fā)，真正落地實(shí)現(xiàn)出來(lái)，無(wú)論安卓或是 iOS ，陰影的渲染和設(shè)計(jì)軟件的參數(shù)是不一致的，這就需要大家自己鉆研究了。
作者：酸梅干超人 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
從平面到屏幕，CMYK 到 RGB，墨點(diǎn)到像素，色彩越來(lái)越豐富，形式越來(lái)越復(fù)雜。而 UI 的發(fā)展從擬物的繁瑣細(xì)節(jié)中掙脫出來(lái)，卻在色彩的展現(xiàn)中放飛了自我。
零售業(yè)有個(gè)有趣的研究成果 —— “七秒鐘定律”：人們?cè)谔暨x商品和服務(wù)時(shí) ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。
要在小小的手機(jī)屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實(shí)不易。如果你還對(duì)配色一無(wú)所知，完全不知道配色應(yīng)該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗(yàn)總結(jié)的配色思路。
無(wú)論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來(lái)看看這些案例：
雖然是不同的應(yīng)用，但是這個(gè)拾色器的用法大同小異，但是，很多新人并沒(méi)有搞懂拾色器的正確應(yīng)用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學(xué)中對(duì)所有顏色屬性的理論劃分，是種概念上的定義，可以用來(lái)解釋任何色彩，也就是說(shuō)可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡(jiǎn)潔、干練。
因?yàn)橐粋€(gè)正確的選色過(guò)程，是先確定出色相，然后再在這個(gè)色相維度下選出明度和飽和度，所以我們首先要關(guān)注色相選擇條。
細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因?yàn)樯嗟男蛄惺且粋€(gè)首尾相接的環(huán)形模式，所以它實(shí)際上就是色環(huán)的柱狀展示圖，應(yīng)用起來(lái)和色環(huán)沒(méi)有實(shí)際區(qū)別。
接下來(lái)就要說(shuō)到重點(diǎn)，飽和度和明度選擇區(qū)，我自己使用的習(xí)慣，是將這個(gè)選擇區(qū)通過(guò)黃金三分法的方式切割成等比的 9 個(gè)區(qū)域，然后明確它們?cè)?UI 中的對(duì)應(yīng)情緒和應(yīng)用場(chǎng)景。
在過(guò)去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會(huì)往右上角聚集，一些次要、不可點(diǎn)的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無(wú)人區(qū)則是我們重點(diǎn)避開(kāi)的對(duì)象。
下面我們分析幾個(gè)案例，看看它們?cè)谶@個(gè)選擇區(qū)中的色彩分布情況：
大家也可以自己拿一些主流的應(yīng)用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會(huì)得到基本一致的結(jié)果。牢記這 9 個(gè)區(qū)域的場(chǎng)景劃分，可以幫助我們非常高效、安全地完成 UI 配色。
在眾多的 UI 設(shè)計(jì)規(guī)范中，色彩部分的介紹，都必然包含三種類(lèi)型，分別是：
主色：應(yīng)用的核心色彩，品牌色
輔色：豐富頁(yè)面視覺(jué)和傳達(dá)效果的次要顏色
中性：沒(méi)有色相的文字、背景用色
主色是一個(gè)應(yīng)用的最核心的色彩，品牌的象征色，比如想到餓了么的藍(lán)色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒(méi)有大家想象的那么復(fù)雜，它的要點(diǎn)在于 —— 你想讓用戶(hù)感受到哪種情緒，然后通過(guò)情緒關(guān)聯(lián)一個(gè)大致的色彩范圍，再進(jìn)行微調(diào)。
在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應(yīng)用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設(shè)計(jì)中的用色有非常大的不同。
移動(dòng)端產(chǎn)品要在一個(gè)方寸大的空間中爭(zhēng)奪用戶(hù)的注意力，引起用戶(hù)的興趣，那么低飽和清淡的色調(diào)是無(wú)法實(shí)現(xiàn)這個(gè)目標(biāo)的，所以今天主色飽和度越來(lái)越極致，比如我們之前整理的，發(fā)在站酷的一篇總結(jié)：
再加上屏幕的 RGB 顯示特性，高對(duì)比度，高動(dòng)態(tài)范圍的特質(zhì)能給用戶(hù)提供更好的觀(guān)感。所以選擇主色最安全的做法，就是在確定色相類(lèi)型后，在右上方區(qū)域選出合適的色值。
輔助色是豐富應(yīng)用中的次要色彩，它會(huì)包含一到若干個(gè)和主色不同的色彩，除了品牌傳達(dá)外，具有更強(qiáng)的實(shí)用性。
前面我們提到過(guò)色環(huán)，這里就要派上用場(chǎng)了。我們知道色環(huán)是個(gè)色彩序列首尾相連的環(huán)形模型，它蘊(yùn)含一個(gè)最樸素的原則，即兩個(gè)顏色在這個(gè)環(huán)形中角度越大，那么視覺(jué)差異性越大，對(duì)比越強(qiáng)，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個(gè)色彩對(duì)比度的判斷標(biāo)準(zhǔn)。而真正輔助色的選擇，是根據(jù)實(shí)際場(chǎng)景的功能決定的。
比如通知、提醒、取消用大紅色，確認(rèn)、同意用綠色或者藍(lán)色，收藏、打分、評(píng)價(jià)用橙黃色。都是已經(jīng)在用戶(hù)心智中建立了標(biāo)準(zhǔn)的用色類(lèi)型，跟著常規(guī)方法來(lái)做，是沒(méi)有其它思路的情況下最簡(jiǎn)單、最安全的輔助色選擇方式。
沒(méi)有標(biāo)準(zhǔn)元素用色的情況下，再考慮應(yīng)用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠(yuǎn)，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍(lán)色的情況下，支付、保險(xiǎn)金標(biāo)簽這些需要被重點(diǎn)突出的色彩，使用了主色的互補(bǔ)色， 讓我們一眼就能看見(jiàn)并產(chǎn)生強(qiáng)烈的操作欲望。
中性色，是頁(yè)面中文字、背景用到的顏色，它們承擔(dān)起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺(jué)得中性色無(wú)關(guān)緊要，實(shí)際情況恰恰相反。
主色輔助色決定了界面視覺(jué)是否出彩，而中性色的應(yīng)用直接決定了頁(yè)面能不能正常使用。如果看過(guò)比較多的原型案例，就應(yīng)該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁(yè)面和進(jìn)行使用也不會(huì)有絲毫的障礙。
中性色的配置，就是制定一個(gè)由深到淺的灰度階梯，應(yīng)用在對(duì)應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。
中性色雖然指的是無(wú)個(gè)性，但并不是只能用純灰色，常見(jiàn)的一種做法，就是為中性色添加適量的藍(lán)色飽和度，提升觀(guān)看體驗(yàn)（滿(mǎn)足 RGB 的某種特性）。
這種做法，顏色越淺的時(shí)候飽和度應(yīng)用色值就越低，將這個(gè)規(guī)律在拾色器中進(jìn)行表現(xiàn)，那么我們就可以得到一個(gè) L 型曲線(xiàn)，我稱(chēng)它為 “中性曲線(xiàn)”。
掌握對(duì)于主色、輔助色、中性色的選擇方法，那么對(duì)于 UI 配色的奧義來(lái)說(shuō)，你已經(jīng)掌握了一半，接下來(lái)就要了解更具體的實(shí)踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學(xué)和理論，卻很少關(guān)心它們應(yīng)用如何應(yīng)用，如何配置。
所以，我根據(jù)主色和輔助色應(yīng)用總結(jié)了一個(gè)配色的四象限表格，在分別看看它們對(duì)應(yīng)的案例：
主色會(huì)作為頂部標(biāo)題欄或其它重要模塊中的背景色，進(jìn)行大面積應(yīng)用，加深用戶(hù)對(duì)品牌的認(rèn)知和辨識(shí)度。而產(chǎn)品中又包含了大量功能和服務(wù)，需要用豐富的色彩來(lái)進(jìn)行暗示，吸引用戶(hù)關(guān)注。
這類(lèi)配色中，主色的應(yīng)用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對(duì)正式、品牌感強(qiáng)的應(yīng)用。
這是多數(shù)主流應(yīng)用的趨勢(shì)，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務(wù)和功能。
通常，會(huì)應(yīng)用這種方式是因?yàn)楫a(chǎn)品的服務(wù)是相對(duì)單一，但也需要用戶(hù)投入注意力的應(yīng)用，設(shè)計(jì)師就會(huì)盡力避免給予用戶(hù)過(guò)多的干擾。
每次在進(jìn)行配色的時(shí)候，我們都需要對(duì)自己要應(yīng)用哪種配色應(yīng)用方式做出規(guī)劃，然后再動(dòng)手執(zhí)行。有了這個(gè)目標(biāo)，后面在整個(gè)項(xiàng)目的設(shè)計(jì)中的配色步驟就是水到渠成的事情了。
在實(shí)踐前，我們要簡(jiǎn)單講講一個(gè)應(yīng)用或者界面的標(biāo)準(zhǔn)配色的流程了，流程順序如下：
具體應(yīng)該怎么使用這套流程，我們用一個(gè)圖蟲(chóng) APP 改版的案例來(lái)做演示，首先從四象限中的第一個(gè)主色占比高、色彩豐富度高的類(lèi)型做起。
原型是 UI 設(shè)計(jì)的基本藝能了，在開(kāi)始具體設(shè)計(jì)、配色前，搭建頁(yè)面的框架原型是一個(gè)必備的條件，下面，是我們已經(jīng)準(zhǔn)備好的原型案例。
然后，我們確定以橙色作為應(yīng)用主色，并在拾色器中進(jìn)行確認(rèn)。
有了主色，就可以對(duì)頁(yè)面進(jìn)行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標(biāo)題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開(kāi)始整理中性色的使用，選擇新的顏色來(lái)填充文字和背景，清晰的表現(xiàn)模塊層級(jí)，文字信息的權(quán)重。
最后，就是添加輔助色和其它色彩的元素了，這個(gè)步驟建議都是放在最后一步操作。因?yàn)樯试截S富，越難控制，容易讓整個(gè)畫(huà)面顯得雜亂無(wú)序，所以先完成基礎(chǔ)搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區(qū)圖標(biāo)，然后將用戶(hù)關(guān)注、認(rèn)證用戶(hù)、標(biāo)簽等元素使用其它色彩，來(lái)豐富頁(yè)面的色彩內(nèi)容。
根據(jù)第一個(gè)方案，我們可以再用這個(gè)原型來(lái)實(shí)現(xiàn)其余的三個(gè)方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因?yàn)橐呀?jīng)不太應(yīng)用其它輔助色，所以主色填充上我們不再填充頂部導(dǎo)航欄的背景，而是將更多元素應(yīng)用主色，減少輔助色數(shù)量。
然后是主色占比小，色彩豐富度高的方案，進(jìn)一步降低主色應(yīng)用的比例，然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開(kāi)始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風(fēng)格，在每次設(shè)計(jì)開(kāi)始實(shí)施前，我們都可以根據(jù)這種做法來(lái)做嘗試，并選出自己滿(mǎn)意的方案。
要再次強(qiáng)調(diào)，UI 配色是極其強(qiáng)調(diào)形式的應(yīng)用科學(xué)，最后做的往往會(huì)和一開(kāi)始想的效果有極大出入，所以需要我們有幾個(gè)備選方案，可以隨時(shí)進(jìn)行調(diào)整，并選出合理的那個(gè)。
作者：酸梅干超人 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
導(dǎo)讀
為什么B端產(chǎn)品總是容易“失控”？B端產(chǎn)品設(shè)計(jì)與C端有何差異？如何在不斷復(fù)雜的系統(tǒng)中，權(quán)衡效率、成本、體驗(yàn)之間的關(guān)系？
本文將帶你從B端產(chǎn)品的本質(zhì)出發(fā)，了解產(chǎn)品發(fā)展過(guò)程中容易出現(xiàn)的問(wèn)題，并從復(fù)雜系統(tǒng)的角度去探討設(shè)計(jì)體系的構(gòu)建方式。
目錄
一、「 困局 」容易“失控”的B端產(chǎn)品
A .「 關(guān)注重點(diǎn)的差異性 」
B .「 微小差異的不斷疊加 」
C .「 產(chǎn)品發(fā)展進(jìn)入惡性循環(huán) 」
D .「 進(jìn)入效率拐點(diǎn)，產(chǎn)品失控 」
二、「 啟發(fā) 」從復(fù)雜科學(xué)的角度思考設(shè)計(jì)
A.「 自然算法 」
B.「 物質(zhì)的構(gòu)成原理 」
三、「 探究 」什么是產(chǎn)品設(shè)計(jì)體系？
A.「 定義 」
B .「 組成部分 」
C .「團(tuán)隊(duì)能力要求 」
D .「 構(gòu)建方向 」
四、「 剖析 」B端產(chǎn)品的生命周期
「 產(chǎn)品生命周期概述 」
A .「 初創(chuàng)期 」解決核心問(wèn)題，產(chǎn)生價(jià)值
B .「 成長(zhǎng)期 」能力完善，產(chǎn)品擴(kuò)張
C .「 成熟期 」效率提升，快速增長(zhǎng)
D .「 暮年期 」商業(yè)價(jià)值降低，發(fā)展逐漸停滯
NEXT、「 下期預(yù)告 」設(shè)計(jì)體系的構(gòu)建法則
前言
隨著產(chǎn)業(yè)互聯(lián)網(wǎng)時(shí)代的到來(lái)，市場(chǎng)對(duì)B端產(chǎn)品的重視程度逐漸提升。然而，談及B端產(chǎn)品，特別是SaaS產(chǎn)品，大多數(shù)設(shè)計(jì)師對(duì)此并不是特別感興趣。一來(lái)，SaaS更注重功能層面，似乎本身對(duì)設(shè)計(jì)的要求并不高；二來(lái)，SaaS產(chǎn)品的最終實(shí)現(xiàn)效果總是不盡人意，就算設(shè)計(jì)得再好看，實(shí)現(xiàn)出來(lái)也難以出彩。
確實(shí)，若設(shè)計(jì)師僅僅只是關(guān)注視覺(jué)層面本身，那么B端產(chǎn)品確實(shí)不像C端那么吸引人。但是，若你能以整個(gè)產(chǎn)品構(gòu)建的角度去思考B端產(chǎn)品設(shè)計(jì)，那么設(shè)計(jì)師能夠在其中發(fā)揮的空間是巨大的。
假如把C端產(chǎn)品比作精致的小房子，那B端產(chǎn)品就是一幢巨大的高層建筑。建造小房子，你可以盡情地發(fā)揮創(chuàng)意，追逐潮流，大不了推倒重來(lái)。而建造大房子，則需要設(shè)計(jì)師考慮更多的維度，因?yàn)檫@是一個(gè)長(zhǎng)期而復(fù)雜的工程。
建筑的外觀(guān)不僅需要好看，更需要足夠耐看、穩(wěn)定；為了適應(yīng)更多人的需求，你不僅要考慮房子的軟裝，還要考慮戶(hù)型的合理性、通用性；而為了降低成本，你還需要考慮家具、硬裝的標(biāo)準(zhǔn)化、房間的兼容性等等…
“你是否有信心建造一個(gè)宏偉的高樓大廈？”
這是我在B端設(shè)計(jì)中，反復(fù)強(qiáng)調(diào)體系化思維的原因之一。想要建造一個(gè)大型建筑，沒(méi)有體系化思維、沒(méi)有更完善的多職能協(xié)作流程，那么這座高樓一定會(huì)在建設(shè)過(guò)程中埋下隱患。而當(dāng)問(wèn)題一旦出現(xiàn)，涉及到的沉沒(méi)成本也將會(huì)非常巨大。
當(dāng)然，對(duì)于C端產(chǎn)品來(lái)說(shuō)，體系化也愈發(fā)重要了。隨著互聯(lián)網(wǎng)時(shí)代的持續(xù)發(fā)展，一些C端產(chǎn)品的復(fù)雜性也堪比B端。我在之前的文章中提到過(guò)一個(gè)觀(guān)點(diǎn)：“C端B化，B端C化”。在未來(lái)的數(shù)字產(chǎn)品設(shè)計(jì)中，B端產(chǎn)品將會(huì)逐漸開(kāi)始重視產(chǎn)品的外觀(guān)與體驗(yàn)，因?yàn)橛|達(dá)的人群更年輕化、對(duì)體驗(yàn)要求更高了。而C端產(chǎn)品也會(huì)更注重體系化建設(shè)，因?yàn)楫a(chǎn)品體量越來(lái)越大，需要尋求效率與成本之間的平衡點(diǎn)。
產(chǎn)品設(shè)計(jì)體系，本質(zhì)上是一套更科學(xué)的復(fù)雜性數(shù)字產(chǎn)品的設(shè)計(jì)方法與工作流程。因此，不管是B端產(chǎn)品還是C端產(chǎn)品，設(shè)計(jì)體系能夠在提升設(shè)計(jì)品質(zhì)的同時(shí)，讓產(chǎn)品更“可控”，提升效能，降低成本。
這套設(shè)計(jì)方法論，是我在工作中不斷實(shí)踐與完善的一些經(jīng)驗(yàn)與方法。希望能借此分享一些自己淺薄的經(jīng)驗(yàn)，也探討一下數(shù)字產(chǎn)品設(shè)計(jì)未來(lái)的形態(tài)。
?
一、「 困局 」容易“失控”的B端產(chǎn)品
-
作為較為復(fù)雜的數(shù)字產(chǎn)品，B端產(chǎn)品在快速發(fā)展的過(guò)程中，總是容易出現(xiàn)一些問(wèn)題。特別是當(dāng)產(chǎn)品體量到達(dá)一定階段后，問(wèn)題就會(huì)逐漸暴露出來(lái)，比如：
1. 產(chǎn)品丑、設(shè)計(jì)質(zhì)量低；
2. 組件樣式繁多，操作習(xí)慣不一致；
3. 新老系統(tǒng)差異大，不同模塊體驗(yàn)差異大；
4. 頁(yè)面結(jié)構(gòu)混亂。
等等…
很多問(wèn)題大家都能明顯地意識(shí)到，但往往因?yàn)椤安挥绊懯圪u(mài)”、“價(jià)值不高”、“新功能優(yōu)先”等理由被擱置。
隨著問(wèn)題逐漸積累，產(chǎn)品的優(yōu)化成本也變得越來(lái)越高，最終使整個(gè)產(chǎn)品已經(jīng)積重難返。若只是多部分頁(yè)面/組件進(jìn)行優(yōu)化，小修小補(bǔ)，雖然成本低，但成效甚微；若是進(jìn)行大修大補(bǔ)，那么優(yōu)化成本將遠(yuǎn)大于研發(fā)新功能的成本。
這種普遍的B端產(chǎn)品現(xiàn)象，被稱(chēng)為“產(chǎn)品失控”，即——團(tuán)隊(duì)已經(jīng)對(duì)整個(gè)產(chǎn)品的形態(tài)失去控制力。
那么，為什么B端產(chǎn)品特別容易出現(xiàn)這種問(wèn)題呢？
A .「 關(guān)注重點(diǎn)的差異性 」
首先，產(chǎn)品的本質(zhì)決定了其關(guān)注重點(diǎn)的差異性。
與C端產(chǎn)品不同的是，B端產(chǎn)品往往更看重“能力”（為企業(yè)用戶(hù)解決問(wèn)題），而產(chǎn)品的銷(xiāo)售方式與付費(fèi)模式，也決定了產(chǎn)品體驗(yàn)并非首要關(guān)注的對(duì)象。由于B端產(chǎn)品通常針對(duì)企業(yè)用戶(hù)，需要更長(zhǎng)的研發(fā)過(guò)程，產(chǎn)品的體量和復(fù)雜性也相對(duì)較高。因此，除了產(chǎn)品解決問(wèn)題的“能力”之外，產(chǎn)品還需要關(guān)注研發(fā)的效率及成本。
因此，在產(chǎn)品的發(fā)展初期，企業(yè)通常對(duì)效率最為關(guān)注，其次是成本，最后才是體驗(yàn)（能用就行）。絕大多數(shù)B端企業(yè)，只有在產(chǎn)品跑通商業(yè)邏輯，并具備一定用戶(hù)與盈利預(yù)期之后，才會(huì)對(duì)產(chǎn)品的體驗(yàn)逐漸重視起來(lái)。
B .「 微小差異的不斷疊加 」
任何微小的差異，在無(wú)數(shù)次的疊加之后，都會(huì)被快速放大。特別是當(dāng)團(tuán)隊(duì)的人員逐漸增多后，放大速度將會(huì)呈指數(shù)級(jí)上升。
為了配合產(chǎn)品的快速發(fā)展，產(chǎn)品往往會(huì)采用“堆量”的研發(fā)模式。增加研發(fā)效率，最簡(jiǎn)單直接的方法便是投入更多的資源。隨著產(chǎn)品不斷增加模塊、功能、頁(yè)面，團(tuán)隊(duì)人員也在不斷地?cái)U(kuò)充。
但是，人類(lèi)不是機(jī)器，并非簡(jiǎn)單的1+1=2。團(tuán)隊(duì)數(shù)量的上升雖然會(huì)帶來(lái)效率的短期提升，但同樣也會(huì)增加團(tuán)隊(duì)的管理成本。不同的產(chǎn)品經(jīng)理、設(shè)計(jì)師、研發(fā)人員，對(duì)于產(chǎn)品的認(rèn)知是不同的。隨著團(tuán)隊(duì)人員的不斷增加，“個(gè)體差異性”將會(huì)被不斷地疊加與放大。
就像“傳話(huà)筒”的游戲一樣，同一個(gè)事物，不同的人理解總是不同的，經(jīng)過(guò)多次的“傳話(huà)”以后，往往與原本的意思已經(jīng)大相徑庭了。
這種情況表現(xiàn)在產(chǎn)品設(shè)計(jì)中，則會(huì)出現(xiàn)：當(dāng)相同的組件由不同的人做時(shí)，總是會(huì)在基本樣式、實(shí)現(xiàn)原理、交互細(xì)節(jié)等不同的維度出現(xiàn)差異。比如上圖中的導(dǎo)航菜單組件，不同的模塊在開(kāi)發(fā)時(shí)總是會(huì)存在差異，最后差異越來(lái)越大，形成了五花八門(mén)的導(dǎo)航菜單形式。
C .「 產(chǎn)品發(fā)展進(jìn)入惡性循環(huán) 」
令人遺憾的是，雖然問(wèn)題很明顯。但是在不斷的“成本考量”中，產(chǎn)品團(tuán)隊(duì)往往優(yōu)先關(guān)注新功能的開(kāi)發(fā)，而忽略底層問(wèn)題的優(yōu)化。
隨著產(chǎn)品的快速發(fā)展，產(chǎn)品的優(yōu)化/迭代成本將會(huì)逐漸大于研發(fā)新功能的成本。要么背負(fù)巨大的成本進(jìn)行整體重構(gòu)；要么降低標(biāo)準(zhǔn)，繼續(xù)以這種模式不斷疊加新功能。
在這種情況下，大部分B端產(chǎn)品往往會(huì)選擇后者。于是，產(chǎn)品的發(fā)展將會(huì)進(jìn)入一個(gè)“惡性循環(huán)”：
產(chǎn)品快速發(fā)展，功能不斷疊加；
各模塊由不同的產(chǎn)品、不同的開(kāi)發(fā)研發(fā)，導(dǎo)致各模塊之間差異增加；
產(chǎn)品丑、體驗(yàn)不統(tǒng)一，但老系統(tǒng)優(yōu)化成本過(guò)高。綜合衡量，優(yōu)先進(jìn)行新功能研發(fā)；
所有模塊標(biāo)準(zhǔn)不統(tǒng)一，產(chǎn)品迭代效率持續(xù)降低，維護(hù)成本持續(xù)增加。
…
D .「 進(jìn)入效率拐點(diǎn)，產(chǎn)品失控 」
產(chǎn)品的發(fā)展猶如一輛快速奔馳的巨型列車(chē)，一旦加速便難以停止。
隨著問(wèn)題的反復(fù)出現(xiàn)，以及在一次次的“利益權(quán)衡”中選擇性的忽略，產(chǎn)品的惡性循環(huán)不斷重復(fù)，而問(wèn)題也逐漸疊加、沉積下來(lái)。
當(dāng)這個(gè)問(wèn)題已經(jīng)大到我們無(wú)法回避時(shí)，我們才發(fā)現(xiàn)：產(chǎn)品的單位迭代/優(yōu)化成本，已經(jīng)遠(yuǎn)遠(yuǎn)大于新功能的研發(fā)成本。而新功能帶來(lái)的增量，已經(jīng)無(wú)法抵消現(xiàn)有模塊的迭代成本——產(chǎn)品迎來(lái)了效率拐點(diǎn)。
就像一個(gè)龐大而復(fù)雜的機(jī)器，雖然依舊可以運(yùn)行，但整體效率已經(jīng)很低了，而與之對(duì)應(yīng)的維修成本則非常巨大。小修小補(bǔ)根本無(wú)法解決問(wèn)題，而大修大補(bǔ)則很有可能會(huì)帶來(lái)更大的虧損。
最終，產(chǎn)品逐漸在“失控”中難以自拔，競(jìng)爭(zhēng)力逐漸降低，但整個(gè)團(tuán)隊(duì)對(duì)此卻無(wú)能為力，嚴(yán)重影響了企業(yè)的發(fā)展。
那么，在產(chǎn)品發(fā)展中，我們應(yīng)該如何避免這種情況呢？換而言之，一個(gè)高度復(fù)雜的數(shù)字產(chǎn)品，我們應(yīng)該如何設(shè)計(jì)，才能避免其逐步走向混亂？
?
二、「 啟發(fā) 」從復(fù)雜科學(xué)的角度思考設(shè)計(jì)
-
如果我們將B端產(chǎn)品看作是一個(gè)復(fù)雜系統(tǒng)，那么產(chǎn)品“失控”的本質(zhì)即——在不斷復(fù)雜化的形態(tài)中，缺乏有效的控制機(jī)制，最終導(dǎo)致整個(gè)系統(tǒng)失去控制。
但是，在大自然面前，B端產(chǎn)品這種復(fù)雜程度顯然不值得一提。
像大自然這樣的復(fù)雜系統(tǒng)，是如何構(gòu)成的？所有的物體都由原子所構(gòu)成，為什么簡(jiǎn)單的一百多種原子，能夠構(gòu)成如此復(fù)雜的世界？生命又是如何在無(wú)機(jī)物的世界中誕生，并逐步進(jìn)化成如此復(fù)雜的個(gè)體的？
A.「 自然算法 」
道生一、一生二、二生三、三生萬(wàn)物...無(wú)論是老子的《道德經(jīng)》，還是《深?yuàn)W的簡(jiǎn)潔》、《萬(wàn)物皆數(shù)》、《復(fù)雜》這些現(xiàn)代的書(shū)籍中都闡述了這樣一個(gè)觀(guān)點(diǎn)：
任何看似復(fù)雜而又可控的系統(tǒng)，一定存在著精簡(jiǎn)的“算法”，通過(guò)不斷的疊加從而形成復(fù)雜系統(tǒng)。
就像愛(ài)因斯坦說(shuō)的：“宇宙最不可理解之處，就是它居然是可以被理解。”
在大自然中，有很多的花紋與圖案的形狀都存在相同的規(guī)律。比如上圖中的羊齒草分形圖案，這種圖案在森林當(dāng)中到處可見(jiàn)，我們看到很多樹(shù)的形狀跟葉子的形狀是一致的，這就是一種分形圖案。而這種分形的圖案本質(zhì)上是一個(gè)公式，通過(guò)不斷地自我引用進(jìn)行迭代，這便是分形。
科赫曲線(xiàn)（Koch curve）就是一種分形。其形態(tài)似雪花，又稱(chēng)科赫雪花（Koch snowflake）、科赫星（Koch star）、科赫島（Koch island）或雪花曲線(xiàn)（Snowflake curve）。
它最早出現(xiàn)在瑞典數(shù)學(xué)家海里格·馮·科赫的論文中。我們將一根直線(xiàn)分成四段，然后向中間擠壓形成等邊的倒V形狀；接著再將每個(gè)倒V的邊進(jìn)行相同的操作，不斷地重復(fù)之后，我們發(fā)現(xiàn)：第一步是倒V型、第二步變成了大衛(wèi)星，第三部變成了楓葉，第四步… 經(jīng)過(guò)無(wú)數(shù)步以后，最終成了越來(lái)越復(fù)雜的“雪花”形態(tài)。
科赫曲線(xiàn)便是“自然算法”的一種。海岸線(xiàn)雖然很復(fù)雜，但是卻有一個(gè)重要的特性——自相似性。從不同比例尺的地形圖上，我們可以看出海岸線(xiàn)的形狀大體相同，其曲折、復(fù)雜程度也很相似，換句話(huà)說(shuō)，任意一段海岸線(xiàn)就像是整個(gè)海岸線(xiàn)按比例縮小的結(jié)果。而海岸線(xiàn)的構(gòu)成原理就是這種科赫曲線(xiàn)，它是通過(guò)天然的演化，不斷折疊最終形成了這種形狀。
可以發(fā)現(xiàn)，他們都是由 基礎(chǔ)物質(zhì) x 簡(jiǎn)單算法 x 隨機(jī)變量，經(jīng)過(guò)無(wú)數(shù)次疊加后，最終形成了一個(gè)復(fù)雜而多變的整體。
B.「 物質(zhì)的構(gòu)成原理 」
宇宙中還有其他各種驚人的“巧合”。愛(ài)因斯坦的相對(duì)論揭示了宏觀(guān)世界的規(guī)律性，普朗克和海森堡的量子力學(xué)揭示了微觀(guān)物質(zhì)世界的規(guī)律。當(dāng)我們從微觀(guān)世界到天文學(xué)會(huì)發(fā)現(xiàn)——原子核的構(gòu)成方式居然與天體的構(gòu)成非常相似。粒子圍繞原子核的運(yùn)動(dòng)方式，就好像行星圍繞太陽(yáng)運(yùn)動(dòng)一樣。
不管是整個(gè)宇宙，還是生命體，將其置于復(fù)雜科學(xué)的研究框架中，那些基本定律最終也會(huì)變得極其簡(jiǎn)單。
在宇宙中所知最為復(fù)雜的形態(tài)，便是如同我們自身的生物。這些復(fù)雜體由已知存在于銀河系中最普通的物質(zhì)所構(gòu)成。但是，通過(guò)氨基酸的形態(tài)，這些基本原料竟能自然地將自己組合成一個(gè)自組織系統(tǒng)。
混沌中隱藏的算法，使宇宙成為極有秩序的地方。而在秩序中隱藏的隨機(jī)數(shù)，又使得宇宙成為極為豐富的世界。
也正是因?yàn)樗惴ǖ木?jiǎn)，一切物質(zhì)的創(chuàng)造才能具備復(fù)制性、延續(xù)性、進(jìn)化性。
那么，我們反過(guò)來(lái)思考——想要使復(fù)雜的系統(tǒng)簡(jiǎn)單可控，是否就需要一套簡(jiǎn)潔、有效的“算法”？通過(guò)“算法”，將基礎(chǔ)的“物質(zhì)”不斷地“有序疊加”，形成一個(gè)可控的復(fù)雜體系。
因此，對(duì)于復(fù)雜的SaaS系統(tǒng)設(shè)計(jì)，我開(kāi)始引入“設(shè)計(jì)體系”這一概念，希望能夠找到未來(lái)SaaS產(chǎn)品設(shè)計(jì)的發(fā)展方向。只有設(shè)計(jì)體系的建立，才能保證產(chǎn)品可控性，才能在不斷復(fù)雜系統(tǒng)中，保證效率、成本、體驗(yàn)之間的平衡。
?
三、「 探究 」什么是產(chǎn)品設(shè)計(jì)體系？
-
產(chǎn)品設(shè)計(jì)體系，在國(guó)內(nèi)仍舊是較為陌生的詞匯。什么是設(shè)計(jì)體系？
A.「 定義 」
一個(gè)成熟的數(shù)字產(chǎn)品，需要有一個(gè)穩(wěn)定、且持續(xù)迭代的形態(tài)。創(chuàng)造這個(gè)形態(tài)的過(guò)程，我們稱(chēng)之為廣義上的產(chǎn)品設(shè)計(jì)（這里指產(chǎn)品的整個(gè)策劃和設(shè)計(jì)過(guò)程，包含策劃、交互、視覺(jué)及部分前端開(kāi)發(fā)）。而負(fù)責(zé)控制和維護(hù)這個(gè)形態(tài)的這套系統(tǒng)，便是產(chǎn)品設(shè)計(jì)體系。
我們接觸到的更多是設(shè)計(jì)系統(tǒng)（Design System），比如平臺(tái)級(jí)的設(shè)計(jì)體系，Apple、Google、Microsoft等系統(tǒng)級(jí)的設(shè)計(jì)系統(tǒng)，及其設(shè)計(jì)開(kāi)發(fā)套件、應(yīng)用生態(tài)。公司級(jí)的設(shè)計(jì)系統(tǒng)，如Airbnb設(shè)計(jì)系統(tǒng)、IBM的Carbon設(shè)計(jì)系統(tǒng)、螞蟻金服的Alipay Design等。
但是，在一個(gè)企業(yè)內(nèi)部，想要Design System能夠系統(tǒng)性地運(yùn)轉(zhuǎn)，還需要基于這套標(biāo)準(zhǔn)建立的團(tuán)隊(duì)協(xié)作機(jī)制。只有設(shè)計(jì)標(biāo)準(zhǔn)與團(tuán)隊(duì)協(xié)作標(biāo)準(zhǔn)完美融合，才能建立真正的設(shè)計(jì)體系。
B .「 組成部分 」
如果將數(shù)字產(chǎn)品比作復(fù)雜的“生命體”，產(chǎn)品的發(fā)展比作競(jìng)爭(zhēng)中“自我進(jìn)化”，那么設(shè)計(jì)體系便是產(chǎn)品的DNA。它既是產(chǎn)品形態(tài)的控制源，又是不斷自我迭代的進(jìn)化源，它的作用是：
控制產(chǎn)品外觀(guān)——感知性模型（視覺(jué)風(fēng)格/規(guī)范）
制造基礎(chǔ)構(gòu)件——功能性模型（基礎(chǔ)/復(fù)合組件）
模塊的構(gòu)建規(guī)則——模式語(yǔ)言（產(chǎn)品框架規(guī)范）
產(chǎn)品標(biāo)準(zhǔn)定義、生產(chǎn)方式制定——協(xié)作模型（高度協(xié)同的工作流程）
它不僅能控制產(chǎn)品的“生產(chǎn)結(jié)果”，提升產(chǎn)品質(zhì)量；還能規(guī)范產(chǎn)品的“生產(chǎn)過(guò)程”，形成一套完整的多職能協(xié)作流程，提升產(chǎn)品的生產(chǎn)、迭代和維護(hù)效率。
從宏觀(guān)來(lái)看，設(shè)計(jì)體系像是一個(gè)“規(guī)范的復(fù)合體”，它是各職能之間規(guī)范的有效整合，產(chǎn)品框架、交互規(guī)范、視覺(jué)規(guī)范、前端規(guī)則，同時(shí)也是基于整合規(guī)范所創(chuàng)造的一套創(chuàng)新的工作模式。
C .「團(tuán)隊(duì)能力要求 」
設(shè)計(jì)體系的建立，需要整個(gè)產(chǎn)品團(tuán)隊(duì)擁有一致的目標(biāo)，并為之通力協(xié)作才能完成。這就需要整個(gè)團(tuán)隊(duì)擁有較高的平均素質(zhì)與契合度。
同時(shí)，體系化的建立和推動(dòng)，也需要團(tuán)隊(duì)中有人牽頭去推動(dòng)。設(shè)計(jì)師作為“產(chǎn)品-開(kāi)發(fā)”的中間環(huán)節(jié)，是非常有條件成為推動(dòng)者的角色的。
當(dāng)然，這就要求設(shè)計(jì)師擁有更豐富的橫向能力。
一方面，設(shè)計(jì)師需要將自身的能力邊界進(jìn)行拓展，與上下游的職能保持密切的溝通，并解他們的訴求。只有當(dāng)設(shè)計(jì)體系滿(mǎn)足各方利益時(shí)，體系化才有推動(dòng)的空間。
另一方面，對(duì)于產(chǎn)品側(cè)與開(kāi)發(fā)側(cè)人員，設(shè)計(jì)團(tuán)隊(duì)也可以通過(guò)培訓(xùn)來(lái)提升他們的能力邊界。比如針對(duì)產(chǎn)品的交互培訓(xùn)、針對(duì)開(kāi)發(fā)人員的基礎(chǔ)審美培訓(xùn)等。這樣才能提升產(chǎn)品的下限與上限，增強(qiáng)產(chǎn)品的綜合競(jìng)爭(zhēng)力。
D .「 構(gòu)建方向 」
設(shè)計(jì)體系并非超脫于產(chǎn)品之上，而是根植于產(chǎn)品的成長(zhǎng)過(guò)程中。
想要推動(dòng)體系化的建立，必須充分了解產(chǎn)品發(fā)展的基本規(guī)律。產(chǎn)品處于不同的生命周期，所要解決的問(wèn)題是不同的。在正確的時(shí)間做正確的事情，并對(duì)未來(lái)的形態(tài)進(jìn)行規(guī)劃，才能逐步讓設(shè)計(jì)體系根植于產(chǎn)品、融合于產(chǎn)品。
因此，在下一章，我們首先來(lái)了解一下B端產(chǎn)品的生命周期。
?
四、「 剖析 」B端產(chǎn)品的生命周期
-
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，首先要更宏觀(guān)地了解產(chǎn)品所處的生命階段，才能知道設(shè)計(jì)需要解決的問(wèn)題是什么，并以此有針對(duì)性制定不同的設(shè)計(jì)策略，最終幫助產(chǎn)品構(gòu)建完善設(shè)計(jì)體系。
本章更多的是對(duì)B端產(chǎn)品的發(fā)展階段做一個(gè)剖析，而不同階段具體的實(shí)施策略，會(huì)在后面講解。
「 產(chǎn)品生命周期概述 」
類(lèi)似于人的成長(zhǎng)歷程，一個(gè)新的B端產(chǎn)品從誕生到逐步擴(kuò)大，通常都會(huì)經(jīng)歷幾個(gè)不同的生命階段。
B端產(chǎn)品研發(fā)是一個(gè)漫長(zhǎng)而系統(tǒng)化的過(guò)程。這個(gè)過(guò)程通常伴隨著商業(yè)業(yè)務(wù)發(fā)展與商業(yè)戰(zhàn)略模式的不斷調(diào)整。
B端產(chǎn)品從立項(xiàng)到下線(xiàn)，產(chǎn)品會(huì)處于幾個(gè)典型的不同狀態(tài)中，這就是產(chǎn)品的生命周期。通常來(lái)看，大多數(shù)產(chǎn)品都會(huì)經(jīng)歷以下幾個(gè)生命周期。初創(chuàng)期-成長(zhǎng)期-成熟期，直至最終進(jìn)入暮年期。
而產(chǎn)品的商業(yè)價(jià)值，也會(huì)伴隨著產(chǎn)品的發(fā)展而變化。在通常情況下，伴隨著產(chǎn)品的逐漸成長(zhǎng)，其商業(yè)價(jià)值也會(huì)隨之增長(zhǎng)，并在成熟期進(jìn)入黃金的商業(yè)價(jià)值期。而當(dāng)商業(yè)價(jià)值出現(xiàn)大幅、持續(xù)性的降低時(shí)，則基本算是進(jìn)入了暮年期。
那么，不同的生命周期中，產(chǎn)品將會(huì)遇到哪些問(wèn)題？而為了保證產(chǎn)品的持續(xù)發(fā)展，產(chǎn)品團(tuán)隊(duì)又需要做哪些事情呢？
A .「 初創(chuàng)期 」解決核心問(wèn)題，產(chǎn)生價(jià)值
初創(chuàng)期，即產(chǎn)品已經(jīng)從構(gòu)思到研發(fā)，并成為了初步的產(chǎn)品。這個(gè)時(shí)期，產(chǎn)品雖然還不能覆蓋完整業(yè)務(wù)，但已經(jīng)能夠順利運(yùn)行。
從構(gòu)思到創(chuàng)意，再到實(shí)踐落地。B端產(chǎn)品的誕生，通常源于在行業(yè)內(nèi)深耕多年的資深玩家。在不斷地實(shí)踐中，通過(guò)創(chuàng)意與實(shí)踐，找到了一條能夠幫助行業(yè)解決問(wèn)題、提升效率的路徑。
1）用戶(hù)是誰(shuí)？
B端業(yè)務(wù)的本質(zhì)，就是“向組織銷(xiāo)售服務(wù)來(lái)獲得盈利”。哪些企業(yè)最需要你的產(chǎn)品？哪一類(lèi)用戶(hù)的問(wèn)題最需要通過(guò)這種方式得到解決的？這些都是需要在早期非常明確的。
站在普羅大眾的角度去規(guī)劃產(chǎn)品固然是好的，但成功的產(chǎn)品都始于一小部分早期用戶(hù)；B端產(chǎn)品的用戶(hù)通常來(lái)自某一垂直領(lǐng)域，首先讓他們喜歡上你的產(chǎn)品，然后慢慢向外拓展至更大的人群當(dāng)中。
想想看，最初一千名喜歡你產(chǎn)品的種子用戶(hù)可能是哪些人？
2）產(chǎn)品能夠解決什么問(wèn)題？
我們要為用戶(hù)解決什么問(wèn)題？“用戶(hù)的問(wèn)題”可能是一個(gè)需求、一個(gè)困擾或是一個(gè)機(jī)遇。他們的需求是否真的是痛點(diǎn)？
這個(gè)時(shí)期，團(tuán)隊(duì)需要拜訪(fǎng)大量的目標(biāo)用戶(hù)，通過(guò)交流獲取痛點(diǎn)。我們必須驗(yàn)證這個(gè)需求的真實(shí)性，以及我們的解決方案是否具備一定的可實(shí)施性。
我們可以通過(guò)更具象的UI或流程，初步展示想法，不斷優(yōu)化。最終形成一個(gè)可驗(yàn)證的初步產(chǎn)品Demo，并通過(guò)Demo進(jìn)一步與潛在用戶(hù)進(jìn)行溝通。
3）這個(gè)問(wèn)題是否普遍？是否具備標(biāo)準(zhǔn)化的可能？
不同企業(yè)的需求是有差異的，如何將個(gè)性化的需求抽象成共性的解決方案？如何權(quán)衡范圍與成本之間的關(guān)系？我們要將不同企業(yè)的需求進(jìn)行抽象，形成標(biāo)準(zhǔn)化的解決路徑。
這個(gè)階段，我們需要為種子用戶(hù)創(chuàng)建方向聚焦的MVP。MVP必須是名副其實(shí)的最小化可行產(chǎn)品，要為種子用戶(hù)帶來(lái)端到端的精準(zhǔn)體驗(yàn)。如果他們不理解產(chǎn)品功能，不知道如何或?yàn)槭裁词褂?，或是發(fā)現(xiàn)其性能低劣、bug 太多，無(wú)法達(dá)到“可行”的程度，那么你的假設(shè)就難以得到有效驗(yàn)證。
4）是否能夠形成完整的商業(yè)閉環(huán)？
用戶(hù)是否真的會(huì)為這個(gè)產(chǎn)品買(mǎi)單？換句話(huà)說(shuō)，產(chǎn)品是否能賺錢(qián)并且養(yǎng)活整個(gè)團(tuán)隊(duì)？
B端產(chǎn)品在初創(chuàng)期，最重要的是快速驗(yàn)證產(chǎn)品與業(yè)務(wù)的親密性，能否完成既定的商業(yè)戰(zhàn)略。產(chǎn)品團(tuán)隊(duì)需要通過(guò)磨合業(yè)務(wù)，快速調(diào)整業(yè)務(wù)解決方案和產(chǎn)品架構(gòu)。
不僅是產(chǎn)品的打磨，整個(gè)團(tuán)隊(duì)也要形成完整的閉環(huán)。工作流程、產(chǎn)品的商業(yè)運(yùn)轉(zhuǎn)機(jī)制也要初步跑起來(lái)。產(chǎn)品的售前、解決方案、產(chǎn)品研發(fā)、實(shí)施、客戶(hù)成功，我們需要真實(shí)地完成這一套閉環(huán)的操作，并基于此做團(tuán)隊(duì)毛利模型的測(cè)算。
解決問(wèn)題，帶來(lái)價(jià)值，并且能夠?qū)r(jià)值轉(zhuǎn)化為收益，這才是產(chǎn)品可持續(xù)發(fā)展的關(guān)鍵。只有跑通完整的商業(yè)模式，擁有長(zhǎng)期的盈利預(yù)期，產(chǎn)品才能順利進(jìn)入下一個(gè)階段。
B .「 成長(zhǎng)期 」能力完善，產(chǎn)品擴(kuò)張
成長(zhǎng)期，即產(chǎn)品形態(tài)初具完善，并具備完整商業(yè)閉環(huán)之后，處于快速成長(zhǎng)的時(shí)期。這個(gè)時(shí)期，產(chǎn)品將進(jìn)行快速的迭代，覆蓋的業(yè)務(wù)一天比一天完整，能滿(mǎn)足的業(yè)務(wù)需求越來(lái)越多，而產(chǎn)品為業(yè)務(wù)帶來(lái)的價(jià)值越來(lái)越大。
與新生期的區(qū)別在于，新生期時(shí)的迭代方向還未完全明確，迭代更多的是嘗試，磨合業(yè)務(wù)與產(chǎn)品。而在成長(zhǎng)期時(shí)，產(chǎn)品的迭代方向已經(jīng)是非常清晰了的。
1）更多用戶(hù)，更多真實(shí)需求
產(chǎn)品在真正投入運(yùn)營(yíng)之后，所遇到的情況一定與MVP時(shí)期有所區(qū)別。隨著產(chǎn)品的不斷售賣(mài)，我們將會(huì)接觸到越來(lái)越多的真實(shí)用戶(hù)，以及更多的真實(shí)需求。而這些用戶(hù)與他們的訴求，將會(huì)成為產(chǎn)品發(fā)展的指引。
2）解決更多問(wèn)題，業(yè)務(wù)范圍擴(kuò)張
經(jīng)過(guò)長(zhǎng)期的打磨，產(chǎn)品的形態(tài)和可用性已經(jīng)初步成熟了，商業(yè)模式也已經(jīng)初步跑通。隨著更多的真實(shí)需求，產(chǎn)品將會(huì)選擇有價(jià)值的方向擴(kuò)張業(yè)務(wù)范圍，從“解決一個(gè)問(wèn)題”逐漸走向“解決一系列問(wèn)題”。
3）功能完善，產(chǎn)品體量快速增加
伴隨產(chǎn)品的快速迭代，產(chǎn)品的基礎(chǔ)功能會(huì)逐漸完善，同時(shí)也會(huì)基于核心功能去搭建更為豐富的功能矩陣。更多的能力、產(chǎn)品模塊、頁(yè)面，最終逐漸疊加為一個(gè)完整的大型產(chǎn)品。
4）組織逐漸完善，人員專(zhuān)業(yè)化
隨著業(yè)務(wù)擴(kuò)張，組織架構(gòu)逐漸完善。為了提高專(zhuān)業(yè)性與效率，團(tuán)隊(duì)人員從“多面手”逐漸轉(zhuǎn)化為專(zhuān)業(yè)化方向。與之對(duì)應(yīng)的是，團(tuán)隊(duì)成員的數(shù)量也會(huì)在這個(gè)時(shí)期快速增加。售前、解決方案、產(chǎn)品研發(fā)、實(shí)施、客戶(hù)成功，這一套完整的團(tuán)隊(duì)模型在各模塊中不斷地復(fù)制。
C .「 成熟期 」效率提升，快速增長(zhǎng)
成熟期，即產(chǎn)品的形態(tài)已經(jīng)穩(wěn)定，并能夠創(chuàng)造持續(xù)的商業(yè)價(jià)值。處于成熟期的產(chǎn)品，肯定是已經(jīng)進(jìn)行商業(yè)化運(yùn)行的。反之，沒(méi)有達(dá)到預(yù)期的商業(yè)價(jià)值的產(chǎn)品，不能算成熟期。
進(jìn)入這個(gè)階段時(shí)，產(chǎn)品已經(jīng)實(shí)現(xiàn)了產(chǎn)品-市場(chǎng)匹配。但是，我們需要對(duì)整個(gè)產(chǎn)品、以及團(tuán)隊(duì)進(jìn)行一系列的調(diào)和與優(yōu)化，才能讓整個(gè)產(chǎn)品的形態(tài)與運(yùn)作方式更加合理，以便將產(chǎn)品推向更廣闊的市場(chǎng)。
1）產(chǎn)品效率、組織效能提升
經(jīng)過(guò)一系列的快速發(fā)展，產(chǎn)品體量通常都會(huì)比較大，而團(tuán)隊(duì)成員也快速擴(kuò)張。隨著一致性成本、溝通成本增加，勢(shì)必會(huì)造成研發(fā)效率、組織效能會(huì)下降。因此，如何降低產(chǎn)品的單位研發(fā)成本？如何讓整個(gè)團(tuán)隊(duì)的組織效能達(dá)到最佳狀態(tài)？是需要解決的問(wèn)題。特別是當(dāng)產(chǎn)品具備一定的客戶(hù)數(shù)量以后，單位研發(fā)成本的降低將會(huì)極大提升產(chǎn)品整體的利潤(rùn)率。
2）產(chǎn)品設(shè)計(jì)-研發(fā)標(biāo)準(zhǔn)化，構(gòu)建完整鏈路
通過(guò)產(chǎn)品設(shè)計(jì)-研發(fā)標(biāo)準(zhǔn)化、數(shù)據(jù)架構(gòu)標(biāo)準(zhǔn)化，打通不同模塊的壁壘，提升模塊化與靈活性。將單點(diǎn)之間的競(jìng)爭(zhēng)力相互配合，形成“場(chǎng)域”競(jìng)爭(zhēng)力。
產(chǎn)品的單點(diǎn)也許不能保證都有最佳的競(jìng)爭(zhēng)力，但如果我們能夠提供一系列的、高質(zhì)量、無(wú)縫銜接的配套服務(wù)形成閉環(huán)，將會(huì)形成強(qiáng)大的整體競(jìng)爭(zhēng)優(yōu)勢(shì)。同時(shí)，產(chǎn)品設(shè)計(jì)-研發(fā)標(biāo)準(zhǔn)化，能夠增加產(chǎn)品售賣(mài)的靈活性，通過(guò)靈活的組合方式吸引不同的用戶(hù)，提升銷(xiāo)售靈活性與成單率。
3）提供高質(zhì)量的用戶(hù)體驗(yàn)
產(chǎn)品最終是給人用的，用戶(hù)體驗(yàn)也會(huì)在將來(lái)逐漸成為B端產(chǎn)品的核心競(jìng)爭(zhēng)力。隨著競(jìng)爭(zhēng)的加劇，以及用戶(hù)群體的逐漸年輕化，用戶(hù)體驗(yàn)將成為企業(yè)在選擇產(chǎn)品時(shí)的重要考量因素，也是口碑傳播的重要途徑。
由于在“產(chǎn)品-市場(chǎng)匹配”階段需要盡快地推出產(chǎn)品，所以在設(shè)計(jì)開(kāi)發(fā)過(guò)程中可能遺留諸多問(wèn)題，需要進(jìn)一步打磨優(yōu)化。產(chǎn)品設(shè)計(jì)需要與開(kāi)發(fā)具備高度的一致性，視覺(jué)交互是否合理，前端代碼是否準(zhǔn)確合理，操作反饋是否高效等問(wèn)題，都需要這個(gè)階段來(lái)進(jìn)行調(diào)和。
4）教育市場(chǎng)，賣(mài)給更多的人
當(dāng)產(chǎn)品逐漸成熟并具備一定體量之后，單靠銷(xiāo)售跑單是遠(yuǎn)遠(yuǎn)達(dá)不到發(fā)展要求。這個(gè)階段，需要市場(chǎng)部人員對(duì)市場(chǎng)進(jìn)行教育，聚焦不同的行業(yè)領(lǐng)域，從“點(diǎn)式營(yíng)銷(xiāo)”轉(zhuǎn)變?yōu)椤懊媸綘I(yíng)銷(xiāo)”，并配合銷(xiāo)售人員進(jìn)行產(chǎn)品的售賣(mài)。因此，在這個(gè)階段，產(chǎn)品的品牌力、核心能力的傳播將至關(guān)重要。
D .「 暮年期 」商業(yè)價(jià)值降低，發(fā)展逐漸停滯
暮年期，即產(chǎn)品發(fā)展停滯甚至倒退，逐漸失去商業(yè)價(jià)值的產(chǎn)品。
B端產(chǎn)品進(jìn)入暮年期的原因，主要有兩個(gè)。一是，伴隨著業(yè)務(wù)的發(fā)展，產(chǎn)品已經(jīng)很難滿(mǎn)足業(yè)務(wù)需求。且翻新產(chǎn)品的投入產(chǎn)出比較低。二是，伴隨產(chǎn)品的使用時(shí)長(zhǎng)，產(chǎn)品將變得臃腫和遲鈍，逐漸難以敏捷地滿(mǎn)足業(yè)務(wù)需求。
很多時(shí)候，商業(yè)環(huán)境的快速發(fā)展、技術(shù)的更新迭代都有可能成為產(chǎn)品進(jìn)入暮年期的原因。對(duì)于暮年期的產(chǎn)品，根據(jù)商業(yè)戰(zhàn)略，產(chǎn)品經(jīng)理既有可能要延長(zhǎng)產(chǎn)品的壽命，也有可能持續(xù)保障產(chǎn)品完成順利換代。當(dāng)然，更多暮年期的B端產(chǎn)品，由于業(yè)務(wù)的調(diào)整，最終迎來(lái)生命的終結(jié)。
需要注意的是，很多產(chǎn)品因?yàn)?strong style="outline:0px;margin:0px;padding:0px;">在成長(zhǎng)期、發(fā)展期無(wú)法建立有效的產(chǎn)品控制機(jī)制，導(dǎo)致產(chǎn)品過(guò)早的進(jìn)入臃腫階段。也就是前文中所講的“產(chǎn)品失控”，非常有可能加速產(chǎn)品暮年期的到來(lái)。
因此，是否能在前三個(gè)階段建立健康、完善的設(shè)計(jì)體系，是產(chǎn)品能夠獲得更長(zhǎng)生命力、更多價(jià)值的關(guān)鍵。
?
NEXT
「 下期預(yù)告 」設(shè)計(jì)體系的構(gòu)建法則
-
你的B端產(chǎn)品處于什么生命周期？在這個(gè)階段產(chǎn)品要解決的問(wèn)題是什么？而在這些過(guò)程中設(shè)計(jì)體系又應(yīng)該如何構(gòu)建？
設(shè)計(jì)體系的建設(shè)并非一蹴而就，通常是伴隨著產(chǎn)品的而發(fā)展逐步建立的。在下一篇文章中，我們將基于B端產(chǎn)品的發(fā)展階段，帶你詳細(xì)了解設(shè)計(jì)體系的正確構(gòu)建方式。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
服務(wù)設(shè)計(jì)大家也不陌生了吧，關(guān)注我們的同學(xué)也看過(guò)我們寫(xiě)過(guò)很多關(guān)于服務(wù)設(shè)計(jì)的文章這其中也有一些枯燥的科普文還有理性討論的文章，當(dāng)然也有很多不了解服務(wù)設(shè)計(jì)的小伙伴，所以這篇文章就來(lái)幫大家介紹一下：服務(wù)設(shè)計(jì)。
《從用戶(hù)體驗(yàn)到服務(wù)設(shè)計(jì)：沒(méi)有人會(huì)告訴你這赤裸裸的真相》
《如果你想學(xué)服務(wù)設(shè)計(jì)，有哪些可選專(zhuān)業(yè)？[備查]》
《為什么要應(yīng)用服務(wù)設(shè)計(jì)？》
《服務(wù)設(shè)計(jì)和用戶(hù)體驗(yàn)設(shè)計(jì):有什么區(qū)別?》
吸引客戶(hù)并與公司建立聯(lián)系
服務(wù)設(shè)計(jì)方法幫助公司更有效地執(zhí)行新思想、滿(mǎn)足客戶(hù)期望、打破藩籬并創(chuàng)造商業(yè)價(jià)值。通過(guò)可視化新的想法和客戶(hù)旅程，并從第一天就與客戶(hù)和員工進(jìn)行測(cè)試，這種方法突出了潛在的挑戰(zhàn)，并產(chǎn)生想法來(lái)緩解它們，從而增強(qiáng)了對(duì)想法的信心和對(duì)行動(dòng)的更高承諾。
結(jié)論
服務(wù)設(shè)計(jì)關(guān)注客戶(hù)需求，執(zhí)行想法并創(chuàng)造商業(yè)價(jià)值。
從最開(kāi)始，服務(wù)設(shè)計(jì)就通過(guò)與客戶(hù)和員工進(jìn)行測(cè)試來(lái)降低商業(yè)風(fēng)險(xiǎn)。
在整個(gè)公司中共享客戶(hù)洞見(jiàn)，可以打破藩籬，并使工作一致。
沒(méi)有良好執(zhí)行的聰明策略很少能實(shí)現(xiàn)卓越的服務(wù)。需要工藝、正確的方法和技能，才能以具體的方式將客戶(hù)與企業(yè)聯(lián)系起來(lái)。服務(wù)設(shè)計(jì)是幫助公司實(shí)現(xiàn)新的客戶(hù)體驗(yàn)、滿(mǎn)足客戶(hù)期望、處理內(nèi)部挑戰(zhàn)和創(chuàng)造商業(yè)價(jià)值的強(qiáng)大工具。
顧客的視角
服務(wù)設(shè)計(jì)方法將人的關(guān)注點(diǎn)引入到服務(wù)的開(kāi)發(fā)中。它幫助公司以客戶(hù)的眼光來(lái)看待全局，并提供工具來(lái)設(shè)計(jì)客戶(hù)與整個(gè)公司之間的每一個(gè)小小的互動(dòng)。
客戶(hù)洞見(jiàn)是有價(jià)值的
市場(chǎng)調(diào)查告訴你客戶(hù)喜歡什么，但可能無(wú)法告訴你為什么。
服務(wù)設(shè)計(jì)者使企業(yè)能夠更深層次地了解客戶(hù)。從深度訪(fǎng)談和觀(guān)察到創(chuàng)意客戶(hù)研討會(huì)，這些方法幫助公司理解為什么人們經(jīng)常言行不一，以及尋找下一個(gè)大創(chuàng)意。
在整個(gè)公司中分享客戶(hù)洞見(jiàn)也可以有效地打破藩籬并協(xié)調(diào)工作，這樣公司就能夠交付通過(guò)多種渠道與客戶(hù)互動(dòng)的體驗(yàn)。
觀(guān)察顧客去了哪里，他們看到了什么，聽(tīng)他們說(shuō)了什么。獲得深刻的客戶(hù)洞見(jiàn)，推動(dòng)新想法。
眼見(jiàn)為實(shí)
讓想法看得見(jiàn)摸得著是在組織內(nèi)部澄清和獲得新概念認(rèn)同的有力方式。這種方法也突出了可能出現(xiàn)的潛在挑戰(zhàn)，并有助于產(chǎn)生緩解這些挑戰(zhàn)的想法，從而增強(qiáng)對(duì)這些想法的信心，提高對(duì)行動(dòng)的承諾。
這就是為什么服務(wù)設(shè)計(jì)者總是在想法和解決方案出現(xiàn)時(shí)就將其可視化的原因。一種策略可以以可視的格式更有效地進(jìn)行溝通，客戶(hù)和員工之間的交流配上一段動(dòng)畫(huà)就會(huì)更容易理解，一個(gè)提議可以通過(guò)web界面的設(shè)計(jì)細(xì)節(jié)得到強(qiáng)化。
服務(wù)場(chǎng)景可以讓企業(yè)立即了解新服務(wù)對(duì)客戶(hù)和員工意味著什么。
服務(wù)藍(lán)圖
客戶(hù)互動(dòng)或接觸點(diǎn)的關(guān)鍵時(shí)刻，越來(lái)越多地蔓延到公司的不同部分。
服務(wù)藍(lán)圖是一個(gè)可視化的工具，幫助公司協(xié)調(diào)不同的部門(mén)作為一個(gè)整體一起工作，以創(chuàng)建一個(gè)好的、一致的客戶(hù)體驗(yàn)。藍(lán)圖是一幅地圖，描述了客戶(hù)通過(guò)新服務(wù)的旅程，以及公司如何通過(guò)各種渠道與他們接觸。新客戶(hù)體驗(yàn)的愿景共享有助于部門(mén)之間的協(xié)調(diào)，并使他們更致力于項(xiàng)目。
服務(wù)藍(lán)圖使公司能夠看到各個(gè)渠道必須如何協(xié)同工作才能提供良好的服務(wù)體驗(yàn)。
測(cè)試體驗(yàn)
盡管在研發(fā)方面投入了大量資金，但仍有很多產(chǎn)品和服務(wù)在客戶(hù)或交付成本方面失敗的例子。
服務(wù)設(shè)計(jì)者通過(guò)讓客戶(hù)和員工從第一天就參與到測(cè)試中來(lái)降低這些風(fēng)險(xiǎn)。因此，在大量資金投入技術(shù)或公司變革之前，公司就可以學(xué)習(xí)、改變和完善理念。
可以快速而廉價(jià)地構(gòu)建服務(wù)原型。設(shè)計(jì)師使用簡(jiǎn)單的模型和場(chǎng)景對(duì)少量客戶(hù)和員工進(jìn)行測(cè)試。在后期階段，客戶(hù)和部門(mén)數(shù)量有限的試點(diǎn)也可以產(chǎn)生更多的證據(jù)，證明服務(wù)可以在更大的范圍內(nèi)發(fā)揮作用。
一項(xiàng)針對(duì)英國(guó)無(wú)工作人群的為期9個(gè)月的試驗(yàn)證明了不同的人群是如何成功進(jìn)入職場(chǎng)的。
它很有趣！
服務(wù)設(shè)計(jì)師被訓(xùn)練成以高度協(xié)作的方式工作，并擁有廣泛的創(chuàng)造性方法來(lái)將這種思維模式帶到公司中。
系統(tǒng)的、創(chuàng)造性的解決問(wèn)題的方法的結(jié)合產(chǎn)生了大量的解決方案，并激勵(lì)著團(tuán)隊(duì)不斷創(chuàng)新。讓我們玩得開(kāi)心!服務(wù)設(shè)計(jì)方法放大了你克服障礙的潛力，使雄心勃勃的想法成為成功的現(xiàn)實(shí)。
我認(rèn)為服務(wù)設(shè)計(jì)是當(dāng)今商業(yè)世界中最重要的設(shè)計(jì)分支。-Kerry Bodine, Forrester Research副總裁兼客戶(hù)體驗(yàn)部首席分析師
持久的客戶(hù)關(guān)系
服務(wù)設(shè)計(jì)提供了創(chuàng)造性的、以人為中心的方法、工具和技能來(lái)執(zhí)行策略。用這種方法來(lái)彌補(bǔ)公司所能做的和人們需要和想要的之間的差距。其結(jié)果將是創(chuàng)造更好的體驗(yàn)，建立持久的客戶(hù)關(guān)系。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：站酷 作者：馬克筆設(shè)計(jì)留學(xué)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在工作中，由于每個(gè)人對(duì)用戶(hù)目標(biāo)、用戶(hù)需求的理解點(diǎn)不同，而且每個(gè)人多多少少?gòu)淖陨眢w驗(yàn)出發(fā)，設(shè)計(jì)師、產(chǎn)品、技術(shù)人員很難對(duì)產(chǎn)品達(dá)成一致，導(dǎo)致產(chǎn)品需求評(píng)審、設(shè)計(jì)評(píng)審過(guò)程中發(fā)生很多爭(zhēng)論、分歧，而且很難說(shuō)服彼此。大家可以回想一下，是不是也經(jīng)歷過(guò)這些？
設(shè)計(jì)師和開(kāi)發(fā)、產(chǎn)品經(jīng)歷，通常來(lái)自不同背景和經(jīng)驗(yàn)的團(tuán)隊(duì)，他們必須就項(xiàng)目目標(biāo)、用戶(hù)需求和行為，甚至所涉及的組件流程達(dá)成共識(shí)。這種共同理解通常是通過(guò)可視化（通常稱(chēng)為映射）構(gòu)建的。映射理解并描述了與產(chǎn)品相關(guān)的各個(gè)方面和過(guò)程。
本文概述了四種常用映射、它們的定義特征以及何時(shí)使用：
同理心地圖
客戶(hù)旅程地圖
體驗(yàn)地圖
服務(wù)藍(lán)圖
外，本文將概述在創(chuàng)建這些映射之前必須做出的準(zhǔn)備。
同理心地圖幫助團(tuán)隊(duì)成員了解用戶(hù)的心態(tài)。
定義： 同理心地圖是用來(lái)表述我們所知道的一個(gè)特定類(lèi)型的用戶(hù)的工具。它將用戶(hù)知識(shí)外化，以便 1) 建立共同的理解，以及 2) 輔助決策。
特征：
地圖分為 4 個(gè)象限：所說(shuō)、所想、所做、感覺(jué)。
它顯示了用戶(hù)對(duì)與產(chǎn)品相關(guān)任務(wù)的看法。
它不是按時(shí)間順序或任務(wù)順序排列的。
每個(gè)角色或用戶(hù)類(lèi)型都有一個(gè)移情圖（1:1 映射）。
為什么使用它：
與用戶(hù)建立同理心
強(qiáng)制團(tuán)隊(duì)內(nèi)部人員對(duì)齊和理解用戶(hù)類(lèi)型
何時(shí)使用：
任何設(shè)計(jì)過(guò)程的開(kāi)始
在對(duì)用戶(hù)訪(fǎng)談中的研究筆記進(jìn)行分類(lèi)時(shí)
客戶(hù)旅程地圖側(cè)重于特定客戶(hù)與產(chǎn)品或服務(wù)的互動(dòng)。
定義： 客戶(hù)的旅程地圖是過(guò)程的可視化：一個(gè)人為了實(shí)現(xiàn)特定的業(yè)務(wù)或產(chǎn)品目標(biāo)的過(guò)程。它用于理解和解決客戶(hù)的需求和痛點(diǎn)。
在最基本的形式中，旅程地圖首先將一系列用戶(hù)目標(biāo)和操作編譯到時(shí)間線(xiàn)框架中。接下來(lái)，用用戶(hù)的想法和情感充實(shí)骨架以創(chuàng)建敘事。最后，該敘述被濃縮為一個(gè)可視化、用于傳達(dá)將為設(shè)計(jì)過(guò)程提供信息的工具。
特征：
該地圖與特定產(chǎn)品或服務(wù)相關(guān)聯(lián)。
它分為 4 個(gè)泳道：階段、行動(dòng)、思想、心態(tài)/情緒。
它反映了用戶(hù)的觀(guān)點(diǎn)：
包括她的心態(tài)、想法和情感
省略大部分流程細(xì)節(jié)
它是按時(shí)間順序的。
每個(gè)角色/用戶(hù)類(lèi)型有一張地圖（1:1 映射）。
為什么使用它：
確定導(dǎo)致痛苦或愉悅的特定客戶(hù)旅程接觸點(diǎn)
打破孤島，對(duì)客戶(hù)旅程建立一種共享的、組織范圍內(nèi)的理解
將旅程中關(guān)鍵接觸點(diǎn)的所有權(quán)分配給內(nèi)部部門(mén)
何時(shí)使用：
在設(shè)計(jì)過(guò)程的任何時(shí)候，作為整個(gè)產(chǎn)品設(shè)計(jì)周期中團(tuán)隊(duì)之間的參考點(diǎn)
體驗(yàn)地圖概括了跨用戶(hù)類(lèi)型和產(chǎn)品的客戶(hù)旅程地圖的概念。
定義： 體驗(yàn)地圖是“一般”人為實(shí)現(xiàn)目標(biāo)而經(jīng)歷的整個(gè)端到端體驗(yàn)的可視化。這種體驗(yàn)與特定業(yè)務(wù)或產(chǎn)品無(wú)關(guān)。它用于理解一般的人類(lèi)行為（與客戶(hù)旅程地圖相反，后者更具體并專(zhuān)注于與特定業(yè)務(wù)相關(guān)）。
特征：
它與特定的產(chǎn)品或服務(wù)無(wú)關(guān)。
它分為 4 個(gè)泳道：階段、行動(dòng)、思想、心態(tài)/情緒。
它提供了一個(gè)普遍的人類(lèi)視角；它不是特定于特定用戶(hù)類(lèi)型或產(chǎn)品/服務(wù)的。
它按時(shí)間順序描述事件。
為什么使用它：
了解一般人類(lèi)行為
創(chuàng)建對(duì)產(chǎn)品/服務(wù)不可知的體驗(yàn)的基線(xiàn)理解
何時(shí)使用：
在客戶(hù)旅程地圖之前，以獲得對(duì)一般人類(lèi)行為的理解
將多種體驗(yàn)（工具和特定用戶(hù)不可知）融合到一個(gè)可視化中時(shí)
服務(wù)藍(lán)圖是客戶(hù)旅程地圖的對(duì)應(yīng)物，專(zhuān)注于員工。
定義： 服務(wù)藍(lán)圖可視化不同的業(yè)務(wù)組件之間的關(guān)系-人、道具（物理或數(shù)字證據(jù)）和流程-這是直接與接觸點(diǎn)在特定客戶(hù)的旅程。
將服務(wù)藍(lán)圖視為客戶(hù)旅程地圖的第二部分。與客戶(hù)旅程地圖類(lèi)似，藍(lán)圖在涉及許多服務(wù)相關(guān)產(chǎn)品的復(fù)雜場(chǎng)景中發(fā)揮著重要作用。藍(lán)圖是實(shí)現(xiàn)全渠道、涉及多個(gè)接觸點(diǎn)或需要跨職能工作（即多個(gè)部門(mén)的協(xié)調(diào)）的體驗(yàn)的理想方法。
特征：
它與特定服務(wù)相關(guān)聯(lián)。
它分為 4 個(gè)泳道：客戶(hù)行動(dòng)、前臺(tái)行動(dòng)、后臺(tái)行動(dòng)和支持流程。
它反映了組織的觀(guān)點(diǎn)：
專(zhuān)注于服務(wù)提供商和員工
遺漏了大多數(shù)客戶(hù)詳細(xì)信息
它是按時(shí)間順序和等級(jí)劃分的。
為什么使用它：
發(fā)現(xiàn)組織中的弱點(diǎn)
確定優(yōu)化機(jī)會(huì)
彌合跨部門(mén)的努力
打破孤島并創(chuàng)建一種對(duì)如何提供服務(wù)的組織范圍內(nèi)的共享理解
何時(shí)使用：
客戶(hù)旅程映射之后
在進(jìn)行組織或流程變更之前
在內(nèi)部查明漏斗或斷點(diǎn)時(shí)
在開(kāi)始任何映射工作（無(wú)論類(lèi)型如何）之前，必須做出 3 個(gè)決定：
這個(gè)決定涉及可視化中描述的動(dòng)作和狀態(tài)：它們反映了當(dāng)前狀態(tài)還是理想狀態(tài)？
當(dāng)前映射基于您正在映射的實(shí)際“今天”狀態(tài)。當(dāng)映射目標(biāo)是識(shí)別和記錄現(xiàn)有問(wèn)題和痛點(diǎn)時(shí)，這種方法是理想的。使用當(dāng)前狀態(tài)圖幫助分析研究或圍繞數(shù)據(jù)驗(yàn)證問(wèn)題調(diào)整團(tuán)隊(duì)。
未來(lái)的映射基于用戶(hù)類(lèi)型、體驗(yàn)或未來(lái)服務(wù)結(jié)構(gòu)的“理想”狀態(tài)。未來(lái)狀態(tài)圖有助于重塑和構(gòu)思用戶(hù)或體驗(yàn)在未來(lái)的感受。使用未來(lái)狀態(tài)圖為您的產(chǎn)品或服務(wù)的理想形式設(shè)置基準(zhǔn)或目標(biāo)。
此決定取決于您將用于構(gòu)建映射的輸入類(lèi)型。
假設(shè)映射基于團(tuán)隊(duì)或組織內(nèi)現(xiàn)有理解的積累。這種方法是合并多個(gè)現(xiàn)有團(tuán)隊(duì)視圖、創(chuàng)建研究計(jì)劃（基于假設(shè)圖中出現(xiàn)的差距）以及邁向更高保真度、基于研究的地圖的第一步的好方法。
研究制圖基于專(zhuān)門(mén)為構(gòu)建地圖而收集的數(shù)據(jù)。當(dāng)有時(shí)間和資源專(zhuān)門(mén)用于制定研究計(jì)劃時(shí)，這種方法是最好的。雖然這種方法可以創(chuàng)建最好的地圖，但它需要時(shí)間和大量的支持。無(wú)論您從哪里開(kāi)始，您的地圖都應(yīng)該是迭代的，并隨著新發(fā)現(xiàn)不斷更新。
該決定與最終地圖可視化的質(zhì)量有關(guān)。
低保真地圖未經(jīng)打磨，通常以靈活、未經(jīng)修飾的方式使用便簽創(chuàng)建。這些地圖在過(guò)程的早期階段是最好的。低保真度意味著人們能夠根據(jù)需要進(jìn)行協(xié)作、修改和更新。使用便利貼（物理貼在墻上或使用 Mural.co 等工具以數(shù)字方式進(jìn)行）或協(xié)作 Excel 表格。
高保真地圖經(jīng)過(guò)打磨、數(shù)字化創(chuàng)建，看起來(lái)很完美。高保真地圖最適合創(chuàng)建將在許多人之間共享的工件。高保真可以更容易閱讀，但由于產(chǎn)品的“完成”性質(zhì)，靈活性較差。這些地圖通常以數(shù)字方式創(chuàng)建，然后分散。
所有 UX 映射都有兩個(gè)好處。首先，創(chuàng)建地圖的過(guò)程會(huì)迫使對(duì)話(huà)和一致的心理模型。其次，映射產(chǎn)生的共享工件可在團(tuán)隊(duì)、組織或合作伙伴之間使用，以傳達(dá)對(duì)用戶(hù)或服務(wù)的理解。隨著團(tuán)隊(duì)的前進(jìn)，這個(gè)工件也可以成為決策的基礎(chǔ)。
在一種映射方法上使用另一種映射方法不會(huì)對(duì)項(xiàng)目造成破壞，理想情況下，可以根據(jù)需要在產(chǎn)品設(shè)計(jì)流程的不同節(jié)點(diǎn)使用所有四項(xiàng)的組合，以深入了解用戶(hù)需求。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn