筆者在車聯(lián)網(wǎng)行業(yè)任職HMI視覺(jué)設(shè)計(jì)師，由于HMI設(shè)計(jì)發(fā)展的較晚，所以基本上在開始進(jìn)入到這個(gè)領(lǐng)域的人，大多來(lái)自于互聯(lián)網(wǎng)行業(yè)。由于互聯(lián)網(wǎng)行業(yè)發(fā)展的比較早，形成了一套成熟的工作流程，即：分工明確的遞進(jìn)式協(xié)作：交互設(shè)計(jì)師要等到產(chǎn)品PRD評(píng)審結(jié)束才開始介入需求，然后交付黑白線框稿等給到視覺(jué)設(shè)計(jì)師繼續(xù)跟進(jìn)。這種工作模式可以讓每個(gè)人在自己的崗位上做得更加專業(yè)，成為垂直領(lǐng)域的專家。在車聯(lián)網(wǎng)行業(yè)發(fā)展初期的時(shí)候，這種工作模式對(duì)于傳統(tǒng)行業(yè)的來(lái)講，比較新穎、高效，所以在一定程度上促進(jìn)了行業(yè)發(fā)展，但汽車操作系統(tǒng)的設(shè)計(jì)還是有很多不同于互聯(lián)網(wǎng)設(shè)計(jì)的地方，所以本文旨在討論HMI工作流程，如何分工，怎樣高效的進(jìn)行設(shè)計(jì)協(xié)同，以期望探索更適合車聯(lián)網(wǎng)行業(yè)的設(shè)計(jì)協(xié)同方案，希望對(duì)你可以有所助益。
對(duì)于HMI設(shè)計(jì)來(lái)講，需要了解很多專業(yè)知識(shí)，比如：屏幕、硬件、三電、法規(guī)……這些東西都會(huì)影響到設(shè)計(jì)的視覺(jué)表達(dá)，所以設(shè)計(jì)協(xié)同就顯得尤為重要，那么什么是設(shè)計(jì)協(xié)同呢？指設(shè)計(jì)師在設(shè)計(jì)之初，即可開啟分享與協(xié)作，讓協(xié)同者盡可能早的參與到設(shè)計(jì)中，通過(guò)提供一系列工具，讓協(xié)同者有更加友好地體驗(yàn)，保證每個(gè)人都可以準(zhǔn)確找到相應(yīng)需求的內(nèi)容，并且快速提出修改意見(jiàn)與反饋。簡(jiǎn)單地講，就是讓每個(gè)人都參與到設(shè)計(jì)過(guò)程中，以使最終的結(jié)果能夠滿足用戶的需求。
從產(chǎn)品功能邏輯層面來(lái)講，HMI設(shè)計(jì)的“復(fù)雜度”是具有有一定的“限制性”的，即保證安全第一，過(guò)度復(fù)雜的設(shè)計(jì)必然影響駕駛和乘坐人的安全。所以對(duì)于設(shè)計(jì)，是需要進(jìn)行全方位評(píng)估的，必然會(huì)涉及到不同的角色。同時(shí)隨著項(xiàng)目的不斷發(fā)展，設(shè)計(jì)團(tuán)隊(duì)也在不斷壯大，設(shè)計(jì)師之間的協(xié)作也越來(lái)越多，相應(yīng)的溝通和協(xié)作成本就會(huì)不斷增加。如何才能更高效的合作，并把設(shè)計(jì)質(zhì)量和一致性做得更好，是我們需要解決的問(wèn)題。所以設(shè)計(jì)協(xié)同的最終目的是為了解決問(wèn)題，做正確的事，讓設(shè)計(jì)師做真正該做的事情。
讓設(shè)計(jì)師專注于真正重要的事情，而不是把精力放在可以自動(dòng)化處理的事情上。對(duì)所有人員的工作進(jìn)行集中化管理，所有人員基于統(tǒng)一數(shù)據(jù)源進(jìn)行協(xié)作。
通過(guò)構(gòu)建團(tuán)隊(duì)資產(chǎn)庫(kù)，比如設(shè)計(jì)規(guī)范、控件組件庫(kù)等，通過(guò)建立健全設(shè)計(jì)規(guī)范，讓數(shù)據(jù)沉淀，一方面讓設(shè)計(jì)師的設(shè)計(jì)有據(jù)可依，提升設(shè)計(jì)的專業(yè)性，另一方面，減少因?yàn)槿藛T變動(dòng)造成的數(shù)據(jù)丟失。
在設(shè)計(jì)之初，就讓協(xié)同者參與到設(shè)計(jì)之中，保證每個(gè)人都可以準(zhǔn)確的找到他們的需求內(nèi)容，并快速提出修改意見(jiàn)與反饋，讓設(shè)計(jì)師更有針對(duì)性的解決問(wèn)題，讓設(shè)計(jì)師無(wú)需做重復(fù)性的工作。
在HMI設(shè)計(jì)的工作流程中，主要涉及到的角色有產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、研發(fā)工程師、測(cè)試工程師、項(xiàng)目經(jīng)理。
不同角色主要工作內(nèi)容是：
圍繞著HMI設(shè)計(jì)的整個(gè)工作流程是：
產(chǎn)品經(jīng)理確認(rèn)需求，輸出PRD文檔；交互設(shè)計(jì)師收到PRD文檔以后，基于需求，梳理功能，完善業(yè)務(wù)流程，完成交互文檔的制作，輸出UE文檔；視覺(jué)設(shè)計(jì)師在收到UE文檔以后，針對(duì)交互文檔中的流程頁(yè)面，進(jìn)行視覺(jué)設(shè)計(jì)，輸出UI文件給到研發(fā)同學(xué)；研發(fā)同學(xué)根據(jù)UI文件和交互文檔進(jìn)行代碼化，完成以后進(jìn)入測(cè)試環(huán)節(jié)，測(cè)試工程師和產(chǎn)品、交互、視覺(jué)都需要參與到測(cè)試過(guò)程中，當(dāng)完成測(cè)試工作以后進(jìn)行發(fā)版。
涉及角色
自己、設(shè)計(jì)師小團(tuán)隊(duì)。
痛點(diǎn)
工作中很多重復(fù)的內(nèi)容，比如：Button、List等使用的地方很多，如果每個(gè)元素都重新繪制，勢(shì)必會(huì)投入很多時(shí)間，同時(shí)因?yàn)槿藶橐蛩兀y免會(huì)出現(xiàn)不統(tǒng)一的地方。那么怎么樣解決這個(gè)問(wèn)題呢？
協(xié)同方式
當(dāng)團(tuán)隊(duì)初期發(fā)展的時(shí)候，或者整個(gè)團(tuán)隊(duì)只有少數(shù)幾個(gè)設(shè)計(jì)師的時(shí)候，通過(guò)匯總通用樣式和組件，形成視覺(jué)指導(dǎo)Guide，方便通用樣式的復(fù)用，減少重復(fù)工作量，達(dá)到快速完成視覺(jué)設(shè)計(jì)的目的。
優(yōu)點(diǎn)
通過(guò)樣式庫(kù)和控件組件庫(kù)的搭建，形成了一定的共有樣式，方便復(fù)用，有效的減少了重復(fù)工作量。
缺點(diǎn)
由于控件組件庫(kù)是在設(shè)計(jì)進(jìn)行到一定程度以后提煉的，會(huì)存在滯后性，并且隨著設(shè)計(jì)工作越來(lái)越往后，會(huì)發(fā)現(xiàn)前期的控件組件存在不合適的地方，需要對(duì)之前的工作進(jìn)行修正。
涉及角色
設(shè)計(jì)團(tuán)隊(duì)內(nèi)部。
痛點(diǎn)
當(dāng)公司發(fā)展到一定的階段：
當(dāng)設(shè)計(jì)團(tuán)隊(duì)越來(lái)越大，大家分工越來(lái)越細(xì)，想法越來(lái)越多，就會(huì)發(fā)現(xiàn)，復(fù)制粘貼guide的方式，已經(jīng)無(wú)法滿足團(tuán)隊(duì)的發(fā)展了，經(jīng)常出現(xiàn)組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問(wèn)題。
同時(shí)因?yàn)闆](méi)有統(tǒng)一的流程，會(huì)發(fā)現(xiàn)不同的業(yè)務(wù)對(duì)于同一功能交互邏輯的不統(tǒng)一現(xiàn)象，比如：搜索是很多業(yè)務(wù)都會(huì)使用的功能，因?yàn)闆](méi)有統(tǒng)一定義，有的業(yè)務(wù)會(huì)采用即時(shí)搜索模式，有的業(yè)務(wù)必須點(diǎn)擊搜索以后才可以進(jìn)行搜索，并且這種問(wèn)題，前期很難發(fā)現(xiàn)，只有到了中后期走查的時(shí)候才會(huì)發(fā)現(xiàn)。
所以在后期會(huì)針對(duì)每一個(gè)差異點(diǎn)進(jìn)行統(tǒng)一，需要全流程重新來(lái)一遍，費(fèi)時(shí)費(fèi)力。那么怎么才可以避免這種情況的發(fā)生呢？答案就是構(gòu)建設(shè)計(jì)系統(tǒng)。
協(xié)同方式
設(shè)計(jì)系統(tǒng)不同于guide的地方是：樣式，控件組件只是設(shè)計(jì)系統(tǒng)中的兩個(gè)組成部分，除此以外，設(shè)計(jì)系統(tǒng)還包括了一系列的標(biāo)準(zhǔn)來(lái)指導(dǎo)設(shè)計(jì)。比如：圖標(biāo)、動(dòng)效、音效等。這些標(biāo)準(zhǔn)記錄了設(shè)計(jì)團(tuán)隊(duì)內(nèi)達(dá)成一致的一系列的決定，比如如何選擇控件，如何在不同的控件中選擇。正是這些標(biāo)準(zhǔn)才確保了設(shè)計(jì)方案不僅僅只解決一個(gè)問(wèn)題，而是可以被復(fù)用的。這些標(biāo)準(zhǔn)也是為什么用戶能獲得一致的體驗(yàn)的原因。
通過(guò)設(shè)計(jì)系統(tǒng)的建立，讓設(shè)計(jì)規(guī)?；?，繼而進(jìn)一步強(qiáng)化車機(jī)系統(tǒng)的統(tǒng)一性，同時(shí)為設(shè)計(jì)師在做設(shè)計(jì)時(shí)提供一個(gè)很好的指導(dǎo)方向，讓團(tuán)隊(duì)內(nèi)不同成員的設(shè)計(jì)在風(fēng)格上保持一致，提升設(shè)計(jì)團(tuán)隊(duì)的專業(yè)度。關(guān)于設(shè)計(jì)系統(tǒng)的建立本文就不再過(guò)多描述，后續(xù)會(huì)出專門的文章進(jìn)行詳述，這里主要是講述設(shè)計(jì)系統(tǒng)搭建以后的協(xié)同方式。
設(shè)計(jì)系統(tǒng)的搭建需要專門的人或者團(tuán)隊(duì)進(jìn)行，當(dāng)搭建完成以后，需要輸出的資源有：UE控件組件庫(kù)、顏色/字體樣式庫(kù)、UI控件組件庫(kù)、UI控件組件說(shuō)明文檔。這些資源各有什么用呢，接下來(lái)進(jìn)行詳細(xì)說(shuō)明：
UE控件組件庫(kù)
提供給交互設(shè)計(jì)師，基于提供的內(nèi)容，交互可以快速的構(gòu)建界面、交互和流程等，就像搭樂(lè)高一樣?？梢钥焖俚臉?gòu)建一些產(chǎn)品原型或者是實(shí)驗(yàn)性的功能，來(lái)進(jìn)行測(cè)試以快速驗(yàn)證想法。
顏色/字體樣式庫(kù)、UI控件組件庫(kù)
提供給UI設(shè)計(jì)師，形式可以是Sketch Libraries，一方面方便設(shè)計(jì)師調(diào)用，使不同的設(shè)計(jì)師的設(shè)計(jì)變得更加統(tǒng)一，且更加可預(yù)測(cè)，同時(shí)組件也可以讓設(shè)計(jì)師更多的時(shí)間專注于如何構(gòu)建更好的用戶體驗(yàn)，而不是去糾結(jié)于樣式的調(diào)整。
UI控件組件說(shuō)明文檔
提供給研發(fā)，可以是pdf之類的文檔形式，主要是詳細(xì)的描述每一個(gè)組件的各種屬性，以及里面包含的交互邏輯等，幫助研發(fā)搭建起研發(fā)自己的底層代碼平臺(tái)。
那么這些資源和不同的角色之間是怎么協(xié)作呢？UE控件組件庫(kù)不需要常常更新，完成后給到交互設(shè)計(jì)團(tuán)隊(duì)，供交互設(shè)計(jì)師使用搭建UE文檔。在項(xiàng)目開始之前，負(fù)責(zé)設(shè)計(jì)系統(tǒng)的UI團(tuán)隊(duì)進(jìn)行顏色/字體樣式庫(kù)、UI控件組件庫(kù)制作，完成以后分享到團(tuán)隊(duì)內(nèi)，供業(yè)務(wù)設(shè)計(jì)師使用進(jìn)行界面設(shè)計(jì)，同時(shí)進(jìn)行UI控件組件說(shuō)明文檔的編撰，完成以后提供給相應(yīng)的平臺(tái)研發(fā)，讓平臺(tái)研發(fā)進(jìn)行組件代碼化。當(dāng)代碼實(shí)現(xiàn)以后進(jìn)行走查，檢查是否按照UI準(zhǔn)確的實(shí)現(xiàn)。當(dāng)業(yè)務(wù)設(shè)計(jì)師完成了業(yè)務(wù)的界面設(shè)計(jì)以后，進(jìn)行評(píng)審，輸出給對(duì)應(yīng)的業(yè)務(wù)研發(fā)，研發(fā)對(duì)于相應(yīng)的視覺(jué)界面進(jìn)行對(duì)應(yīng)的代碼化，使用組件的地方直接調(diào)用平臺(tái)代碼，剩下的由業(yè)務(wù)研發(fā)進(jìn)行代碼化。
優(yōu)點(diǎn)
組件由專門的UI設(shè)計(jì)師和研發(fā)團(tuán)隊(duì)負(fù)責(zé)，當(dāng)出現(xiàn)設(shè)計(jì)變更以后，業(yè)務(wù)設(shè)計(jì)師可以快速通過(guò)組件庫(kù)更新最新的視覺(jué)樣式，同時(shí)和平臺(tái)研發(fā)對(duì)接，進(jìn)行代碼修改，而不需要每個(gè)業(yè)務(wù)研發(fā)單獨(dú)修改，大大減少了跨部門的協(xié)作溝通成本。
缺點(diǎn)
團(tuán)隊(duì)內(nèi)需要專門的設(shè)計(jì)師構(gòu)建設(shè)計(jì)系統(tǒng)并負(fù)責(zé)日常維護(hù)。
涉及角色
設(shè)計(jì)、交互團(tuán)隊(duì)。
痛點(diǎn)
由于需求的不確定性，以及車聯(lián)網(wǎng)項(xiàng)目周期較長(zhǎng)等特點(diǎn)，會(huì)出現(xiàn)需求經(jīng)常變更的情況，那么交互就需要不停的更新交互文檔，UI也需要不停的輸出視覺(jué)文檔，往往一個(gè)項(xiàng)目結(jié)束以后，會(huì)有幾十份甚至上百份的設(shè)計(jì)文檔的情況出現(xiàn)。
協(xié)同方式
隨著云端化辦公軟件Figma的興起，為多角色協(xié)作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即時(shí)設(shè)計(jì)等在線軟件。
設(shè)計(jì)文件現(xiàn)在是一個(gè)鏈接，這意味著：
UI設(shè)計(jì)師不必再等到交互完成評(píng)審，輸出交互文檔以后進(jìn)行視覺(jué)設(shè)計(jì)，交互和設(shè)計(jì)完全可以合二為一，輸出一份高保真交互流程文檔，并且輸出的文檔可以供研發(fā)直接瀏覽器查看，而不需要像之前一樣，不停的進(jìn)行設(shè)計(jì)資源的輸出。極大的節(jié)省了設(shè)計(jì)師輸出時(shí)間。優(yōu)化了協(xié)作工作流。
優(yōu)點(diǎn)
協(xié)作設(shè)計(jì)，云端辦公，多角色參與。
一鍵獲取文件，不需要通過(guò)其他平臺(tái)轉(zhuǎn)化，步驟簡(jiǎn)單；自動(dòng)生成代碼與標(biāo)注。設(shè)計(jì)稿修改后自動(dòng)更新，無(wú)需重復(fù)下載。
缺點(diǎn)
云端保存，會(huì)有數(shù)據(jù)泄露的風(fēng)險(xiǎn)。
必須在線操作。
涉及角色
UE、UI、研發(fā)。
痛點(diǎn)
由于公司發(fā)展，業(yè)務(wù)線增加了很多適配線，這塊的工作基本上屬于：把已有的UI適配到另一個(gè)屏幕尺寸下，需要設(shè)計(jì)的地方不太多，需要花更多的時(shí)間去重新按照最新的屏幕尺寸搭建一遍UI界面，屬于用時(shí)間換業(yè)績(jī)，為了達(dá)到這個(gè)目標(biāo)，可以采取的方式大致分為兩種：
第一種是增加更多的人力，不管是招更多的人，還是增加更多的供應(yīng)商人員，都會(huì)增加業(yè)務(wù)支出，并且由于業(yè)務(wù)無(wú)法一直保證飽和，所以會(huì)出現(xiàn)一段時(shí)間忙的要命，招了很多人員，過(guò)了這段時(shí)間，業(yè)務(wù)不太多了，大家都閑了下來(lái)，但是開支還是必要的，所以這算是一種沒(méi)有辦法的辦法，對(duì)于團(tuán)隊(duì)或是公司來(lái)講，并不可持續(xù)。
另外一種方式就是重新梳理工作流，減少一些重復(fù)無(wú)意義的工作，比如像是系統(tǒng)設(shè)置等瀑布流式的界面，不同車型下的區(qū)別只來(lái)自于功能的有無(wú)，界面上并無(wú)太大區(qū)別，這里所說(shuō)的工作，不僅僅指設(shè)計(jì)師的界面設(shè)計(jì)工作，同時(shí)也包括了研發(fā)同學(xué)的研發(fā)落地工作，同時(shí)因?yàn)檠邪l(fā)同學(xué)的適配，也會(huì)造成測(cè)試走查環(huán)節(jié)，這些都是一些重復(fù)性的工作量，所以是否有一種更好的協(xié)作方式可以避免這種情況的發(fā)生呢？
答案就是我們接下來(lái)要講的一種全新的工作模式：C2D2C模式。
協(xié)同方式
由于設(shè)計(jì)團(tuán)隊(duì)在早期的發(fā)展中，積累了大量的設(shè)計(jì)資產(chǎn)。這些設(shè)計(jì)資產(chǎn)的沉淀就是設(shè)計(jì)標(biāo)準(zhǔn)化的基礎(chǔ)，將設(shè)計(jì)資產(chǎn)轉(zhuǎn)為封裝好的代碼組件，也就是C2D的過(guò)程。然后將封裝好的組件通過(guò)低代碼平臺(tái)進(jìn)行屬性配置、搭建頁(yè)面、布局調(diào)整實(shí)現(xiàn)頁(yè)面的設(shè)計(jì)就是 D2C 的過(guò)程。通過(guò)平臺(tái)設(shè)定交互行為和綁定后臺(tái)數(shù)據(jù)，完成整個(gè)系統(tǒng)，最后再進(jìn)行站點(diǎn)發(fā)布，就實(shí)現(xiàn)了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，簡(jiǎn)單講就是研發(fā)同學(xué)把設(shè)計(jì)資產(chǎn)通過(guò)設(shè)計(jì)標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式完成代碼化，然后讓設(shè)計(jì)師調(diào)用已經(jīng)代碼化的設(shè)計(jì)資產(chǎn)進(jìn)行設(shè)計(jì)工作，這樣子當(dāng)設(shè)計(jì)師完成了界面設(shè)計(jì)的時(shí)候，相當(dāng)于同時(shí)完成了前端開發(fā)，接下來(lái)研發(fā)同學(xué)只需要根據(jù)拿到的界面添加簡(jiǎn)單的邏輯就算完成了研發(fā)工作，實(shí)現(xiàn)中后臺(tái)設(shè)計(jì)研發(fā)流程的整體提效。
優(yōu)點(diǎn)
由于樣式、組件已經(jīng)完成了代碼化，那么在適配工作中，控件組件化高的界面就可以直接生成代碼，不需要設(shè)計(jì)師重復(fù)設(shè)計(jì)，同時(shí)由于減少了設(shè)計(jì)師和研發(fā)的參與，節(jié)省了大量溝通成本，也減少了很多因?yàn)槿藶橐蛩囟a(chǎn)生的bug。
由于設(shè)計(jì)師減少了重復(fù)工作量，可以有更多的時(shí)間集中在視覺(jué)表現(xiàn)上，有效提升了設(shè)計(jì)輸出的質(zhì)量，保證了產(chǎn)品的設(shè)計(jì)感。
對(duì)于大量適配項(xiàng)目的團(tuán)隊(duì)，可以由設(shè)計(jì)師直接配置項(xiàng)目組件，無(wú)需經(jīng)過(guò)研發(fā)，減少出錯(cuò)概率，極大提升工作效率。
缺點(diǎn)
前期需要研發(fā)同學(xué)代碼化基礎(chǔ)控件，所以需要投入人力、精力進(jìn)行前期的工作。
由于控件提前進(jìn)行了代碼化，后續(xù)可能會(huì)出現(xiàn)無(wú)法滿足業(yè)務(wù)需求等情況出現(xiàn)，所以需要有人及時(shí)對(duì)代碼進(jìn)行維護(hù)更新。
涉及角色
產(chǎn)品、UE、UI、研發(fā)、測(cè)試。
痛點(diǎn)
基于上面講述的C2D2C模式，已經(jīng)完成了一個(gè)共享平臺(tái)的搭建，由于配置需要研發(fā)的參與，所以始終需要研發(fā)同學(xué)作為集成人員，并不利于其他角色的使用，那么怎么樣可以讓產(chǎn)品同學(xué)，設(shè)計(jì)同學(xué)，或者說(shuō)是普通用戶使用呢？
協(xié)同方式
一個(gè)優(yōu)秀的共享平臺(tái)是需要所有人都可以在其中使用的，所以，當(dāng)公司或者團(tuán)隊(duì)發(fā)展到穩(wěn)定階段，我們需要重構(gòu)工作流，以需求為導(dǎo)向，搭建全員工作平臺(tái)，基于設(shè)計(jì)師和研發(fā)搭建的平臺(tái)基礎(chǔ)上，提煉需求，強(qiáng)化個(gè)性化和定制化，滿足品牌產(chǎn)品的個(gè)性化需求，具體來(lái)講，就是把UI界面中元素提煉出相應(yīng)的功能，生成功能清單，通過(guò)選擇不同的功能，生成相對(duì)應(yīng)的界面。
當(dāng)完整的共享平臺(tái)搭建完成以后，團(tuán)隊(duì)中的每個(gè)角色的工作內(nèi)容都發(fā)生了變化，產(chǎn)品的工作是構(gòu)建更多的需求，交互設(shè)計(jì)師的工作是構(gòu)建更多的交互形式，產(chǎn)品架構(gòu)，UI設(shè)計(jì)師的工作是設(shè)計(jì)更多更好的界面布局，視覺(jué)表現(xiàn)，然后研發(fā)把上述內(nèi)容通過(guò)代碼匯總進(jìn)我們的需求池中，擴(kuò)展我們的平臺(tái)豐富度。
HMI設(shè)計(jì)工作，就變成了：客戶在我們的配置面板中選擇需要的需求，喜歡的布局，想要的視覺(jué)，點(diǎn)擊完成，就可以即刻看到高度定制化的一套系統(tǒng)。
優(yōu)點(diǎn)
讓每個(gè)人回歸工作的本質(zhì)，不需要為了一些重復(fù)的繁雜的內(nèi)容而疲于奔命，做更有價(jià)值的工作，實(shí)現(xiàn)工作的價(jià)值
賦能行業(yè)，可以滿足車企定制化的需求，提供車企一套完整的車機(jī)系統(tǒng)解決方案。
缺點(diǎn)
投入大，對(duì)于小體量的業(yè)務(wù)來(lái)講短期無(wú)法創(chuàng)造價(jià)值。
對(duì)于現(xiàn)在的行業(yè)環(huán)境，增速提效已經(jīng)達(dá)成了基本共識(shí)，設(shè)計(jì)協(xié)同就成了一個(gè)大課題，但是不同的企業(yè)，不同的團(tuán)隊(duì)面對(duì)的具體問(wèn)題不一樣，可使用的資源也不太一樣，那么采用哪種協(xié)同方式并無(wú)定式，需要根據(jù)實(shí)際情況，進(jìn)行具體分析，畢竟效率的提升是為了創(chuàng)造最大的價(jià)值。我們所有的努力最終目的是為了解決問(wèn)題，做正確的事。
作者：菘藍(lán)C 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
最近 AI 繪畫越來(lái)越成熟，能做的事情也越來(lái)越多，很多同學(xué)經(jīng)常在群里或私信中問(wèn)我關(guān)于對(duì) AI 繪畫的觀點(diǎn)和看法，以及 AI 繪畫對(duì) UI 設(shè)計(jì)師有什么影響，所以今天獨(dú)立寫一篇內(nèi)容，來(lái)具體討論下這個(gè)話題。
首先輸出一個(gè)太長(zhǎng)不看版的結(jié)論：
AI 繪圖可以協(xié)作 UI 設(shè)計(jì)師更快地完成一些邊角料工作，但無(wú)法取代 UI 設(shè)計(jì)師的核心價(jià)值，不會(huì)對(duì) UI 崗位造成大范圍沖擊……
那下面就來(lái)具體討論吧！
相信大家都有這種感覺(jué)，2022年開始，AI 繪畫突然就毫無(wú)征兆地火起來(lái)了，用火遍大街小巷來(lái)形容一點(diǎn)也不過(guò)分，當(dāng)我走在地鐵和機(jī)場(chǎng)等公共場(chǎng)所都能隨處可見(jiàn) AI 繪畫作品的展示。
其實(shí)AI繪畫這個(gè)技術(shù)一直都有，比如 OpenAi 的 Dall·E，但真正產(chǎn)生質(zhì)變的時(shí)候是從 2022 年2月 Disco Diffusion 發(fā)布以后，讓 AI 繪畫的能力得到了質(zhì)的飛躍。
隨后一些使用它創(chuàng)作的作品開始流通，且在美國(guó)的某數(shù)碼繪畫比賽中由 AI 作品獲得冠軍，徹底吸引了公眾的視線。隨后，一系列新的 AI 繪畫工具開始開發(fā)和上線，包括目前為大家所熟知的 Stable Diffusion 和 Midjourney、NovelAI。
從上線到現(xiàn)在不到1年的時(shí)間里，這些軟件都完成了多次的大版本更新和迭代，讓 AI 繪圖的能力越來(lái)越強(qiáng)，準(zhǔn)確性越來(lái)越高，我們甚至很難想象再過(guò)五年以后會(huì)發(fā)展到什么可怕的地步。
除了目前已經(jīng)正式發(fā)布的繪圖工具外，還有很多新的產(chǎn)品正在熱火朝天的開發(fā)階段，如巨頭 Adobe 的 Firefly ，Stability 的新產(chǎn)品 REimagine 等。
產(chǎn)品的多樣性，差異化，以及本身的進(jìn)化，為視覺(jué)設(shè)計(jì)和藝術(shù)創(chuàng)作提供了全方位的支持和可能性，也對(duì)相關(guān)行業(yè)產(chǎn)生了巨大的沖擊。
我們不得不面臨一個(gè)很現(xiàn)實(shí)的問(wèn)題，AI 是不是會(huì)取代大多數(shù)插畫、設(shè)計(jì)師？
這是很有可能的，不管是從網(wǎng)上，還是認(rèn)識(shí)的朋友學(xué)員那邊獲得的反饋，高度依賴插畫、場(chǎng)景建模的行業(yè)，都在受到 AI 的劇烈沖擊，有的將接入 AI 制定成 KPI 要求全團(tuán)隊(duì) ALL IN，有的在跑通AI工作流以后直接啟動(dòng)裁員進(jìn)程或關(guān)閉外包渠道。
AI 的出現(xiàn)對(duì)于美術(shù)行業(yè)，就像燃油車出現(xiàn)對(duì)馬車的革命，照相機(jī)的出現(xiàn)對(duì)手繪的沖擊，是非常值得思考的，因?yàn)槲覀兓蚨嗷蛏僖采碓谄渲小?/span>
因?yàn)樵诋a(chǎn)品方向，Midjourney 已經(jīng)可以通過(guò)指令生成用戶界面了，試用 ChatGPT-4 已經(jīng)可以用指令10秒創(chuàng)建一個(gè)可以操作和訪問(wèn)的網(wǎng)頁(yè)，看起來(lái)未來(lái)已經(jīng)提前朝我們走來(lái)。
所以 UI 設(shè)計(jì)師是不是很快也要被取代直至消亡？
相信有長(zhǎng)期看我們公眾號(hào)分享和公開課的同學(xué)，應(yīng)該知道我一直在強(qiáng)調(diào)，界面對(duì)于 UI 設(shè)計(jì)師的工作只是必要但占比并不高的部分，如果認(rèn)為我們的工作價(jià)值僅僅是最后產(chǎn)出的視覺(jué)界面，那淘汰多數(shù) UI 設(shè)計(jì)師的方式根本輪不到 AI 來(lái)動(dòng)手，按目前市面流通的前端框架和組件庫(kù)就夠了。
之所以有大量的現(xiàn)成素材、模版、組件庫(kù)，還不能淘汰 UI 設(shè)計(jì)師，原因就是整個(gè)項(xiàng)目設(shè)計(jì)過(guò)程中所需的變通、靈活性、抽象思維要求，是它們完全無(wú)法覆蓋的。
一個(gè)稍微成熟點(diǎn)的項(xiàng)目設(shè)計(jì)圖產(chǎn)出和交付，是需要經(jīng)過(guò)下面這個(gè)流程的：
從這個(gè)簡(jiǎn)化的流程模型里，大家要明白專業(yè)的設(shè)計(jì)稿輸出是有 “黑箱” 加工步驟的，要在這階段，對(duì)工作的需求進(jìn)行大量的研究、分析，并做出決策確定出設(shè)計(jì)目標(biāo)或者方案。
在現(xiàn)代設(shè)計(jì)團(tuán)隊(duì)中，直接拿到需求就做設(shè)計(jì)稿的模式是很難產(chǎn)出高質(zhì)量設(shè)計(jì)的，或者應(yīng)對(duì)更專業(yè)嚴(yán)格的要求。設(shè)計(jì)師需要在這個(gè)階段投入大量精力，盡可能提升設(shè)計(jì)產(chǎn)生的價(jià)值，減少出現(xiàn)不良影響的風(fēng)險(xiǎn)，以及 —— 說(shuō)服團(tuán)隊(duì)接受當(dāng)前的設(shè)計(jì)思路。
而這是 AI 繪圖完全無(wú)法實(shí)現(xiàn)的東西，我們使用 AI 繪畫僅僅是輸入做好的決策，讓它生成結(jié)果，但沒(méi)辦法通過(guò)輸入業(yè)務(wù)、需求的疑問(wèn)，讓它給出一個(gè)有詳盡理由和邏輯的設(shè)計(jì)成果。
可能有同學(xué)會(huì)下意識(shí)的想到，那我們用 ChatGPT 這樣的工具，提出問(wèn)題，讓它自己給出解答并直接給出繪圖指令操作繪圖工具生成界面，順帶再自己開發(fā)號(hào)產(chǎn)品，不就行了，一個(gè)人就是一個(gè)團(tuán)隊(duì)，人人都是產(chǎn)品經(jīng)理終于實(shí)現(xiàn)……
這個(gè)業(yè)務(wù)模型非常合理，看起來(lái)似乎完全可以實(shí)現(xiàn)。但真的有項(xiàng)目經(jīng)驗(yàn)的自己去思考一下，就會(huì)發(fā)現(xiàn)中間存在的問(wèn)題無(wú)窮無(wú)盡。
第一點(diǎn)，“黑箱” 是給出問(wèn)題答案的分析處理過(guò)程，ChatGPT 再怎么神通廣大，也需要我們?nèi)ソo到有效的問(wèn)題和需求，它才能給你有用的答案。那么問(wèn)題來(lái)了，你怎么和它描述具體的業(yè)務(wù)需求、產(chǎn)品需求、體驗(yàn)問(wèn)題和各類用戶痛點(diǎn)？
以上一篇分享為例，我們優(yōu)化 Stable Diffusion 的輸入框，光和 AI 說(shuō)優(yōu)化輸入框約等于廢話，你得告訴它怎么優(yōu)化，那怎么優(yōu)化這件事不就是得去找出原產(chǎn)品問(wèn)題的缺陷嘛？如果我自己去找完缺陷了，那最后畫那點(diǎn)圖例的工作量有什么了不起的呢？
更何況一些復(fù)雜的業(yè)務(wù)，尤其是B端行業(yè)，完全無(wú)法用簡(jiǎn)單的幾句話描述清楚，要搭配各種框架圖和流程圖，光開一個(gè)業(yè)務(wù)評(píng)審和培訓(xùn)的會(huì)議，可能就要花非常長(zhǎng)的時(shí)間。
所以該用什么形式去和 AI 描述這些抽象的信息內(nèi)容？
第二點(diǎn)，還是以上面案例為例，在這個(gè)輸入框中，包含很多交互的小細(xì)節(jié)，輸入框內(nèi)光標(biāo)的操作，鍵盤的操作邊界在哪里，輸入文字后提示關(guān)聯(lián)的邏輯，不同輸入指令類型要區(qū)分怎么和 AI 描述，全都成為問(wèn)題。
所以光生成一個(gè)界面是沒(méi)有意義的，這個(gè)界面做的再好看再美觀，也不代表它有真實(shí)落地的可能，只是完成了設(shè)計(jì)工作的一小部分而已。所以看到這里是不是感覺(jué)很熟悉？和我們?cè)谧凡ㄉ峡吹降母黝愶w機(jī)稿案例沒(méi)有太大的區(qū)別。
第三點(diǎn)，上面的模型只是一個(gè)非常簡(jiǎn)化的流程，有過(guò)真實(shí)的項(xiàng)目經(jīng)驗(yàn)就應(yīng)該知道流程中會(huì)有反復(fù)拉鋸的事件，需求的變動(dòng)，設(shè)計(jì)稿的修改，方案的調(diào)整，這些零碎的工作去和 AI 提，你會(huì)發(fā)現(xiàn)有輸入問(wèn)題的時(shí)間，可能設(shè)計(jì)早就修改完了。
尤其在最終的標(biāo)注和切圖環(huán)節(jié)，涉及到設(shè)計(jì)時(shí)對(duì)設(shè)計(jì)稿的制定，標(biāo)注和切圖實(shí)際上有很多主觀性和經(jīng)驗(yàn)化、場(chǎng)景化的輸出要求，它需要設(shè)計(jì)師在經(jīng)歷整個(gè)項(xiàng)目流程后自行判斷。
除了以上三點(diǎn)，還有很多其它的問(wèn)題難以解決，而這些問(wèn)題的總和，決定了沒(méi)有出現(xiàn)真正的人工智能之前，使用 AI 來(lái)輸出 UI 界面是一件不靠譜的事情。
只有視覺(jué)領(lǐng)域沒(méi)有前期那么多條條框框，也沒(méi)有后續(xù)一系列交付和維護(hù)需求的場(chǎng)景，才是 AI 真正產(chǎn)生價(jià)值和影響的方向。
用 AI 做 UI 設(shè)計(jì)不靠譜，但是不代表對(duì)UI設(shè)計(jì)師沒(méi)價(jià)值。這話聽(tīng)著可能挺拗口的，但事實(shí)如此，因?yàn)樵趪?guó)內(nèi)的UI設(shè)計(jì)環(huán)境中，UI 設(shè)計(jì)師的工作內(nèi)容往往不局限于產(chǎn)品設(shè)計(jì)一個(gè)領(lǐng)域內(nèi)。
還包含下面這些操作：
我相信大多數(shù) UI 設(shè)計(jì)師做平面和運(yùn)營(yíng)設(shè)計(jì)的感受就和上墳的狀態(tài)是一樣的，上墳起碼是懷有對(duì)先人獻(xiàn)花，做平面和運(yùn)營(yíng)設(shè)計(jì)只會(huì)產(chǎn)生對(duì)自己深深的唾棄……
所以 AI 的出現(xiàn)可以很好的處理這部分的需求，比如一些雖然用處不大，但就是甲方還是老板就是想用的 3D 風(fēng)格圖標(biāo)。
或者，在登陸頁(yè)用的比較濫俗的 3D 場(chǎng)景背景，為了這樣的東西花很長(zhǎng)的時(shí)間去建模和渲染，投入和收益是完全不成正比的。所幸使用 AI 也可以幫助我們非常短的時(shí)間內(nèi)獲取想要的效果。
還有就是各類運(yùn)營(yíng)設(shè)計(jì)圖，互聯(lián)網(wǎng)運(yùn)營(yíng)設(shè)計(jì)和一般的品牌廣告視覺(jué)比較起來(lái)，就是對(duì)創(chuàng)意性的忽視，畫面并不需要埋伏大量的隱喻、內(nèi)涵或故事，就是單純的應(yīng)景和吸引用戶注意力，這恰恰也是 AI 最適合輸出的東西。
包括廣告 Banner、H5、啟動(dòng)頁(yè)等，都可以通過(guò) AI 快速生成一些高質(zhì)量的插畫，來(lái)替代我們自己從頭開始繪制的苦惱。
所以你看，對(duì)于我們職業(yè)價(jià)值不高的這些雜活，AI 都可以很好的去完成，而且可以肯定未來(lái)可以完成得越來(lái)越好，我們就可以節(jié)省更多的時(shí)間，不管是投入精力給體驗(yàn)和交互，還是準(zhǔn)點(diǎn)下班，都符合我們自身的利益。
所以，UI 設(shè)計(jì)師對(duì) AI 的態(tài)度并不是敵視和悲觀，而是要把它當(dāng)作救星和幫手，把我們從運(yùn)營(yíng)設(shè)計(jì)的水火中拯救出來(lái)……
不僅是觀念上的調(diào)整，掌握一定的 AI 繪制技巧也是必要的，將他們?nèi)谌氲侥阏降墓ぷ髁鞒讨校柰度氲木σ策h(yuǎn)遠(yuǎn)小于你從頭開始學(xué)插畫和 3D 渲染。
相信不久的將來(lái)，UI 設(shè)計(jì)師的招聘中部分要求手繪和建模的 JD，會(huì)替換成熟練使用 AI 繪圖。
作者：酸梅干超人 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1，什么是彈窗？
2，彈窗的規(guī)范如何定義？
3，彈窗使用規(guī)則是什么？
4，什么是抽屜？和彈窗對(duì)比優(yōu)缺點(diǎn)是什么？
一、什么是彈窗？
彈窗是在保留當(dāng)前頁(yè)面狀態(tài)的情況下，告知用戶并承載相關(guān)操作。
思考：彈窗里面哪些構(gòu)成原件可以根據(jù)業(yè)務(wù)屬性可以有可以沒(méi)有呢？
答案：標(biāo)題區(qū)和操作區(qū)。
二、彈窗的規(guī)范如何定義？
1、定義彈窗的大小規(guī)范
彈窗的的大小有兩種定義方式。一種是固定大小，一種是自定義大小。需要根據(jù)自己的業(yè)務(wù)場(chǎng)景二選一。
彈窗寬度一般定義為三種。分別為560px，720px，960px，都是8的倍數(shù)方便記憶。尺寸并不是定死的，可以根據(jù)自身業(yè)務(wù)場(chǎng)景調(diào)節(jié)。
彈框固定高度會(huì)有一個(gè)最小高度200px，一個(gè)最大高度560px。在其之間的高度是由內(nèi)容區(qū)的內(nèi)容決定，超過(guò)最大高度560px時(shí)出滾動(dòng)條。
彈窗自定義高度，只定義最大高度，隨著頁(yè)面拉升縮小，彈窗邊距不變。
2、定義彈窗內(nèi)容規(guī)范
定義：標(biāo)題欄操作欄高度，內(nèi)容區(qū)邊距。
3、彈窗類型
彈框類型是根據(jù)使用場(chǎng)景區(qū)分提示彈窗，自定義彈窗兩種
彈窗優(yōu)點(diǎn)：沒(méi)有跳出父級(jí)頁(yè)面，彈窗任務(wù)完成后仍然會(huì)留在父頁(yè)面進(jìn)行操作，減少用戶操作中步驟體感
彈窗缺點(diǎn)：信息承載量少，信息內(nèi)容過(guò)多的時(shí)候會(huì)出現(xiàn)上下左右滾動(dòng)條，彈窗會(huì)降低用戶操作效率
三、彈窗使用規(guī)則是什么？
1、不超過(guò)兩種操作選項(xiàng)
假如承載的操作項(xiàng)比較多，建議新跳轉(zhuǎn)一個(gè)落地頁(yè)。
2、多步驟操作，選擇用頁(yè)面承載
3、盡量避免彈窗疊彈窗
第一個(gè)彈窗的內(nèi)容考慮用頁(yè)面承載或者第二個(gè)彈窗是否可以用氣泡或者下拉來(lái)承載。
假設(shè)一定要疊，二級(jí)彈窗的復(fù)雜度要低于一級(jí)彈窗，滿足形式上的平衡，遵循從大到小的邏輯或者是覆蓋上級(jí)，完成任務(wù)后點(diǎn)“返回”返回。
四、什么是抽屜？和彈窗相比優(yōu)缺點(diǎn)是什么？
抽屜是信息承載量和頁(yè)面比肩，又兼具彈窗的優(yōu)點(diǎn)。
作者：鯤sky 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1， 什么是表單頁(yè)？
2，表單頁(yè)設(shè)計(jì)原則
3，表單的構(gòu)成
4，表單的交互
5，頁(yè)面布局
6，提升表單易用性
7，體驗(yàn)衡量指標(biāo)
1、采集/錄入數(shù)據(jù)信息。2、編輯數(shù)據(jù)信息。3、特殊的條件設(shè)置。后臺(tái)產(chǎn)品的本質(zhì)是針對(duì)數(shù)據(jù)的增、刪、改、查。而增、改、查都可以用表單完成。
OA系統(tǒng)里面的請(qǐng)假申請(qǐng)，報(bào)銷申請(qǐng)，錄入員工，新建會(huì)議。教育類的創(chuàng)建課程。HRM系統(tǒng)里面發(fā)布職位以及物聯(lián)網(wǎng)管理系統(tǒng)新建設(shè)備等等。
用戶快速定位重要信息和目標(biāo)選項(xiàng)同時(shí)文案和組件能夠準(zhǔn)確傳達(dá)相應(yīng)含義
整體表單排布有合理的交互形式；科學(xué)的信息布局和組織形式；盡可能“少操作一步”用戶在面對(duì)50和表單和500個(gè)表單的心理壓力是不一樣的。
操作前：提示和防錯(cuò)。
操作中：實(shí)時(shí)反饋與糾錯(cuò)
操作后：合理的保存、清空、取消、撤銷機(jī)制。
表單通常由表單標(biāo)簽、表單域、提示提示、操作按鈕四部分構(gòu)成。
左標(biāo)簽
優(yōu)點(diǎn)：表意明確，節(jié)約縱向空間，多用于web端
缺點(diǎn)：不太適用于移動(dòng)端等狹長(zhǎng)空間
頂標(biāo)簽
優(yōu)點(diǎn)：對(duì)齊舒適，節(jié)約橫向空間，多用于移動(dòng)端及英文場(chǎng)景下。
缺點(diǎn)：縱向空間利用率不高
行內(nèi)標(biāo)簽
優(yōu)點(diǎn)：最節(jié)省空間，多用于注冊(cè)登錄
缺點(diǎn)：輸入狀態(tài)標(biāo)簽消失，用戶陷入迷茫
左對(duì)齊標(biāo)簽
視線從標(biāo)簽移動(dòng)到表單域時(shí)間為500ms，這比右對(duì)齊標(biāo)簽所用的時(shí)間長(zhǎng)的多，所以更適合閱讀，用于詳情的陳列。
特點(diǎn)：閱讀效率高，操作效率較低；
右對(duì)齊標(biāo)簽
視覺(jué)動(dòng)線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫。
特點(diǎn)：閱讀效率不高，標(biāo)簽指向明確，操作效率高
步驟一：根據(jù)業(yè)務(wù)已經(jīng)有的字段長(zhǎng)度定義4-5種寬度規(guī)范，建議寬度可以是8或者是40的倍數(shù)。
步驟二：根據(jù)你要搭建的表單，選用合適的規(guī)范，長(zhǎng)度與輸入預(yù)期成正比。有人會(huì)說(shuō)排出來(lái)的表單左邊沒(méi)對(duì)齊，右邊也沒(méi)對(duì)齊，其實(shí)這就是B端產(chǎn)品特征那就是是好用大于好看，就要給用戶一種心智那就是給你的這個(gè)長(zhǎng)度那就是要輸入一個(gè)這么長(zhǎng)的內(nèi)容。
避免“正確的廢話”：給不到用戶任何的幫助還增加了用戶的閱讀成本。
按鈕常見(jiàn)位置：一般出現(xiàn)在頁(yè)面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁(yè)面底部。
按鈕閱讀順序：按鈕出現(xiàn)頁(yè)面右上角或右下角時(shí)，閱讀順序是從右往左，這符合pc端操作習(xí)慣以及人閱讀習(xí)慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時(shí)，閱讀順序?yàn)閺淖笸?，這符合人的填寫順序從上往下，從左往右。
底部按鈕右對(duì)齊：一般用在彈框，因?yàn)閺椏蝽?yè)面比較小，右對(duì)齊比較符合操作習(xí)慣。
底部按鈕居中：一般用在頁(yè)面中，因?yàn)橛蚁陆遣僮骶嚯x會(huì)有點(diǎn)遠(yuǎn)，所以表單用頁(yè)面承載的話按鈕建議居中。
表單中字體全部統(tǒng)一采用14px。表單上下間距一般有三種，1.內(nèi)容與內(nèi)容間距為24px。2.內(nèi)容與說(shuō)明文案間距為4px。3.內(nèi)容與子內(nèi)容間距以及及子內(nèi)容之間的間距為8px。
表單交互方式有四種。1.原位編輯；2.氣泡卡片；3.彈窗/抽屜；4.頁(yè)面跳轉(zhuǎn)。
原位編輯
編輯內(nèi)容即為展示內(nèi)容，容量低于5個(gè)時(shí)使用。
氣泡卡片
設(shè)置項(xiàng)與看板內(nèi)容緊密相關(guān)時(shí)使用氣泡卡片，建議設(shè)置項(xiàng)低于5個(gè)。
彈窗/抽屜
設(shè)置項(xiàng)與看板內(nèi)容可以有關(guān)聯(lián)也不可以沒(méi)有，大于三個(gè)以上的錄入項(xiàng)使用。
如果錄入項(xiàng)較多，用彈框承載出現(xiàn)翻頁(yè)的情況下可考慮使用抽屜。
頁(yè)面跳轉(zhuǎn)
如果容量超出了彈框/抽屜的承載量并且錄入項(xiàng)與看板沒(méi)有那么強(qiáng)的關(guān)聯(lián)性可采用頁(yè)面跳轉(zhuǎn)的方式。
頁(yè)面布局方式有四種。1.分組；2.錨點(diǎn)定位；3.標(biāo)簽頁(yè)；4.分步驟
5.1.1標(biāo)題分組
設(shè)置項(xiàng)超過(guò)7個(gè)；彼此間的關(guān)聯(lián)性較弱且可以分類去歸納
5.1.2卡片分組
有多個(gè)設(shè)置項(xiàng)，多個(gè)分類；彼此之間的關(guān)聯(lián)性更弱，分類明確
有多個(gè)分類的情況可通過(guò)錨點(diǎn)定位迅速找到相關(guān)信息
彼此之間沒(méi)有特定的相關(guān)性，可以獨(dú)立設(shè)置。每個(gè)設(shè)置包含了多個(gè)錄入項(xiàng)且使用了標(biāo)題分組。
小結(jié)
當(dāng)錄入項(xiàng)少于7個(gè)時(shí)使用基礎(chǔ)布局；當(dāng)錄入項(xiàng)在7-15個(gè)時(shí)可采用標(biāo)題分組，卡片分組、錨點(diǎn)定位布局；當(dāng)錄入項(xiàng)大于15個(gè)時(shí)需采用標(biāo)簽頁(yè)布局。
利用步驟條將大型，復(fù)雜任務(wù)拆解為多個(gè)部分，并按照相關(guān)性分組。
建議3種分組依據(jù)
1.采用必填項(xiàng)劃分，把必填的選項(xiàng)分在一起；2.采用相關(guān)性劃分；3.以操作成本劃分。把好填的簡(jiǎn)單的表單放在前面，復(fù)雜的放在后面。
提升表單易用性方式有5種。1.信息降噪；2.清晰易讀；3.高效智能；4.防錯(cuò)糾錯(cuò)；5.所見(jiàn)即所得
場(chǎng)景一：當(dāng)表單中大多數(shù)都是必填只有極少數(shù)非必填時(shí)
場(chǎng)景二：表單項(xiàng)非必填項(xiàng)比較多，可將低頻的非必填項(xiàng)收起
場(chǎng)景一：盡量采用單列布局，視覺(jué)動(dòng)線流暢，不容易遺漏信息；按enter鍵換行。
場(chǎng)景二：如果出于業(yè)務(wù)方需要，必須在橫向添加內(nèi)容，那最好有一定的分組依據(jù)。但這樣就不應(yīng)該出現(xiàn)豎向分組，以免遺漏信息。
6.3.1根據(jù)上下文信息可以自動(dòng)獲取的，無(wú)需用戶再次填寫。
例如根據(jù)手機(jī)號(hào)帶出用戶姓名；根據(jù)地址帶出郵政編碼；根據(jù)身份信息帶出生日。
6.3.2提供合適的“默認(rèn)項(xiàng)”。
例如根據(jù)行業(yè)現(xiàn)狀提供常規(guī)的比例分配；根據(jù)定位把地區(qū)做默認(rèn)的填充。
6.3.3提供搜索、聯(lián)想，自動(dòng)顯示匹配的信息
用戶在進(jìn)行輸入等操作時(shí)可以提供智能輔助，例如表單填寫時(shí)對(duì)需要錄入信息的區(qū)域提供輔助提示，通過(guò)自動(dòng)補(bǔ)全或聯(lián)想詞來(lái)幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
6.3.4 OCR識(shí)別文件內(nèi)容
對(duì)于一些標(biāo)準(zhǔn)證件信息的錄入，可以通過(guò)OCR識(shí)別文件內(nèi)容。當(dāng)用戶上傳圖片后，運(yùn)用圖像識(shí)別技術(shù)提取關(guān)鍵信息并自動(dòng)填入結(jié)果。
6.4.1對(duì)于長(zhǎng)數(shù)字，四位一空格，用來(lái)分段
例如輸入銀行卡號(hào)；充值場(chǎng)景下輸入手機(jī)號(hào)等
6.4.2為用戶封閉不正確道路
將超出時(shí)間選擇范圍的日期置灰。電話號(hào)、身份證錄入時(shí)只允許輸入數(shù)字同時(shí)設(shè)置字?jǐn)?shù)上限。
6.4.3告訴用戶哪里錯(cuò)了，而非簡(jiǎn)單粗暴的錯(cuò)誤提示
表單頁(yè)對(duì)填寫的物料內(nèi)容進(jìn)行映射，展示真實(shí)效果預(yù)覽，降低用戶心理的不確定性。適合對(duì)移動(dòng)端、小程序、H5頁(yè)面的設(shè)置。
體驗(yàn)衡量指標(biāo)有4種。1.任務(wù)完成率；2.任務(wù)完成時(shí)長(zhǎng)；3.必填項(xiàng)目數(shù)；4.易用度評(píng)分
7.1任務(wù)完成率
7.2任務(wù)完成時(shí)長(zhǎng)
7.3必填項(xiàng)目數(shù)
結(jié)合業(yè)務(wù)場(chǎng)景給出最適合的必填項(xiàng)設(shè)定，提高用戶填寫效率。
7.4易用度評(píng)分（用戶完成某項(xiàng)任務(wù)的難易程度）
易用度可通過(guò)調(diào)研問(wèn)卷和評(píng)分量表獲取。
作者：鯤sky 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
設(shè)計(jì)做到極致注重的就是對(duì)于細(xì)節(jié)的把控力，大廠的設(shè)計(jì)師之所以比較優(yōu)秀，就是他們具備很好的細(xì)節(jié)把控力。想要提高產(chǎn)品設(shè)計(jì)的能力，發(fā)現(xiàn)設(shè)計(jì)細(xì)節(jié)和思考設(shè)計(jì)深入的能力至關(guān)重要。
最近在體驗(yàn)產(chǎn)品的時(shí)候，發(fā)現(xiàn)了一些設(shè)計(jì)細(xì)節(jié)做得比較好的優(yōu)秀案例，分享給大家學(xué)習(xí)一下。
分享目錄
一、Banner 輪播轉(zhuǎn)場(chǎng)的品牌化
二、情感化的彈窗設(shè)計(jì)
三、最小化顯示提高空間利用率
四、動(dòng)態(tài)化的設(shè)置引導(dǎo)
五、沉浸式的活動(dòng)氛圍設(shè)計(jì)
六、人性化的提示設(shè)置
七、動(dòng)態(tài)感知的溫度設(shè)計(jì)
八、無(wú)處不在的廣告位開發(fā)
九、主題化的圖標(biāo)設(shè)計(jì)
十、新穎的卡片式設(shè)計(jì)
一、Banner 輪播轉(zhuǎn)場(chǎng)的品牌化
立足于品牌做設(shè)計(jì)，才能強(qiáng)化自身產(chǎn)品的差異化。如何在更多設(shè)計(jì)場(chǎng)景中融入品牌基因，是設(shè)計(jì)師需要深入思考的關(guān)鍵。
最近在使用騰訊視頻 APP 時(shí)，發(fā)現(xiàn)首頁(yè) Banner 圖在輪播的轉(zhuǎn)場(chǎng)過(guò)程中，以品牌 LOGO 造型作為轉(zhuǎn)場(chǎng)過(guò)度。一個(gè)小小的細(xì)節(jié)強(qiáng)化了用戶對(duì)于品牌的記憶度，也體現(xiàn)出專屬的設(shè)計(jì)差異。
二、情感化的彈窗設(shè)計(jì)
通過(guò)彈窗設(shè)計(jì)可以提高用戶操作效率，也是傳播信息（活動(dòng)/廣告）最直觀的形式。但是體驗(yàn)多了用戶便會(huì)開始排斥，提高彈窗的情感化設(shè)計(jì)變得尤為重要，降低用戶的排斥感才能提高彈窗的作用。
很多娛樂(lè)影視等 APP 都會(huì)有“青少年模式”彈窗提示，抖音將彈窗視覺(jué)表達(dá)融入了精美的國(guó)風(fēng)插畫。也通過(guò)針對(duì)性的內(nèi)容作為設(shè)置的引導(dǎo)，提高了用戶對(duì)“青少年模式”的深入理解，增強(qiáng)了體驗(yàn)的積極性。
插畫的形式在彈窗設(shè)計(jì)中表現(xiàn)比較突出，比如嘀嗒出行 APP 將“推送通知”的彈窗設(shè)計(jì)運(yùn)用插畫增強(qiáng)情感化表達(dá)。相較于生硬的表達(dá)方式用戶更能接受，通過(guò)營(yíng)銷的文案引導(dǎo)用戶授權(quán)，提高了產(chǎn)品的感官體驗(yàn)。
三、最小化顯示提高空間利用率
對(duì)于工具型產(chǎn)品不同用戶的操作焦點(diǎn)不同，更多定制化的體驗(yàn)才能提高用戶的操作效率。
釘釘 APP 在協(xié)作欄目中，默認(rèn)展示的各類工具可以進(jìn)行收起，實(shí)現(xiàn)最小化顯示。用戶可以根據(jù)使用習(xí)慣和操作方式選擇收起/展開，提高了當(dāng)前空間的利用率，自定義的功能設(shè)計(jì)可以提高用戶的操作體驗(yàn)。
四、動(dòng)態(tài)化的設(shè)置引導(dǎo)
為了提高用戶隱私權(quán)益，手機(jī)系統(tǒng)針對(duì)產(chǎn)品調(diào)用權(quán)限進(jìn)行了阻力設(shè)計(jì)，需要用戶的授權(quán)操作。提高用戶的各類功能授權(quán)就需要設(shè)計(jì)師探索，降低用戶的排斥感和提高授權(quán)的利好政策才能獲得授權(quán)。
抖音在引導(dǎo)用戶開啟通知權(quán)限的設(shè)計(jì)中，采用了動(dòng)態(tài)畫面的表達(dá)來(lái)強(qiáng)調(diào)開啟通知的利好政策，以此來(lái)攻破用戶的心理防備。相較于生硬的彈窗提示，動(dòng)態(tài)的表達(dá)和引導(dǎo)性的文案更能拉近與用戶的距離感。
五、沉浸式的活動(dòng)氛圍設(shè)計(jì)
沉浸式的體驗(yàn)可以帶給用戶更好的場(chǎng)景感，提高用戶的參與度。在活動(dòng)的設(shè)計(jì)中，不斷向游戲化和沉浸式方向加強(qiáng)體驗(yàn)，提高活動(dòng)的趣味性和強(qiáng)化用戶參與的積極性。
騰訊視頻在情人節(jié)的互動(dòng)活動(dòng)設(shè)計(jì)中，就將搶紅包的活動(dòng)融入到當(dāng)前的界面中，紅包雨鋪滿整個(gè)屏幕，以趣味性的形式滿足用戶心理。不隔斷與界面之間的聯(lián)系，降低活動(dòng)對(duì)用戶的干擾，進(jìn)而提高活動(dòng)氛圍感和參與度。
六、人性化的提示設(shè)置
短視頻近些年改變了大家的生活方式和娛樂(lè)形式，也有用戶容易過(guò)度依賴進(jìn)而影響休息質(zhì)量。
抖音作為短視頻領(lǐng)域的頭部產(chǎn)品之一，在增強(qiáng)用戶體驗(yàn)的同時(shí)也要起到良性的引導(dǎo)作用。當(dāng)用戶刷短視頻一定時(shí)間后會(huì)彈窗提示休息，而提示時(shí)間用戶可以根據(jù)自己的實(shí)際情況進(jìn)行設(shè)置，靈活的設(shè)置可以讓用戶合理分配時(shí)間。健康使用的引導(dǎo)可以讓用戶感受到產(chǎn)品的溫度，提高用戶體驗(yàn)的認(rèn)可度。
七、動(dòng)態(tài)感知的溫度設(shè)計(jì)
天氣預(yù)報(bào)是用戶關(guān)注度較高的信息，對(duì)于溫度的感知可以讓我們出行更容易把控。在產(chǎn)品中顯示天氣情況也是一種情感化的升級(jí)，可以帶給用戶更有溫度的體驗(yàn)。
利用餓了么 APP 點(diǎn)餐之后，首頁(yè)會(huì)顯示配送情況和當(dāng)前的天氣溫度，背景以動(dòng)態(tài)的天氣畫面增強(qiáng)視覺(jué)感知。也希望用戶可以根據(jù)天氣情況對(duì)外賣員多一份理解，加強(qiáng)人與人之間的寬容心，帶給用戶更強(qiáng)的情感化體驗(yàn)。
最近在使用愛(ài)奇藝 APP 時(shí)，發(fā)現(xiàn)左上角的品牌位置也結(jié)合了天氣情況，結(jié)合頂部視覺(jué)區(qū)域的流體漸變，新增的天氣預(yù)報(bào)和品牌 LOGO 完美的通過(guò)動(dòng)效過(guò)度。整個(gè)設(shè)計(jì)表達(dá)流暢自然，感官體驗(yàn)也是非常值得學(xué)習(xí)的。
八、無(wú)處不在的廣告位開發(fā)
廣告是眾多產(chǎn)品實(shí)現(xiàn)流量變現(xiàn)的方式之一，廣告位的開發(fā)也是見(jiàn)縫插針，如何在僅有的空間增加更多廣告位，產(chǎn)品設(shè)計(jì)師也在不斷探索。
最近在使用騰訊視頻 APP 時(shí)，進(jìn)入到個(gè)人中心時(shí)會(huì)默認(rèn)有個(gè)下拉廣告。這個(gè)見(jiàn)縫插針的廣告位新增，對(duì)于設(shè)計(jì)師來(lái)說(shuō)讓我感受到了廣告的無(wú)處不在，不過(guò)對(duì)于用戶來(lái)說(shuō)是否會(huì)心生排斥感得通過(guò)數(shù)據(jù)去驗(yàn)證。但是作為產(chǎn)品設(shè)計(jì)師這也是一個(gè)啟發(fā)，將有限的空間進(jìn)行深度開發(fā)，還不會(huì)影響已有的結(jié)構(gòu)布局，這也是一個(gè)啟發(fā)性的案例。
九、主題化的圖標(biāo)設(shè)計(jì)
圖標(biāo)是產(chǎn)品中不可或缺的存在，圖標(biāo)設(shè)計(jì)的研究也是設(shè)計(jì)師需要重點(diǎn)對(duì)待的技能范圍。精美的圖標(biāo)不僅可以提高產(chǎn)品的感官體驗(yàn)，也能吸引用戶的關(guān)注度，進(jìn)而提高業(yè)務(wù)模塊的點(diǎn)擊欲。
最近在使用順豐速運(yùn)小程序時(shí)，寄快遞欄目的各業(yè)務(wù)入口圖標(biāo)設(shè)計(jì)非常引人注目，結(jié)合主題化的圖標(biāo)設(shè)計(jì)突出了活動(dòng)傳播力度。對(duì)于工具型產(chǎn)品而言，強(qiáng)化氛圍感可以打破用戶原有的認(rèn)知，不僅可以突出活動(dòng)主題，也能強(qiáng)化用戶對(duì)產(chǎn)品的視覺(jué)感知。
十、新穎的卡片式設(shè)計(jì)
卡片式設(shè)計(jì)已經(jīng)流行好幾年了，目前依然是非常普及的 UI 設(shè)計(jì)趨勢(shì)之一。如何進(jìn)一步強(qiáng)化卡片式設(shè)計(jì)的創(chuàng)新度，我們需要不斷的嘗試和總結(jié)。
嘩哩嘩哩 APP 的創(chuàng)作中心設(shè)計(jì)也許是一個(gè)不錯(cuò)的啟發(fā)，卡片內(nèi)部右上角的視覺(jué)強(qiáng)化使得原本普通的表達(dá)變得更有視覺(jué)感。突出的設(shè)計(jì)也成功的吸引了 UP 主的注意力，強(qiáng)化了該入口的點(diǎn)擊欲。這樣的設(shè)計(jì)表達(dá)在保留卡片式設(shè)計(jì)的基礎(chǔ)上，也是一種新穎的視覺(jué)表現(xiàn)，可以作為突出業(yè)務(wù)入口的表現(xiàn)方式進(jìn)行探索。
作者：黑馬青年 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
一、前言 —— 1.1 閱讀之前、1.2 調(diào)研背景、1.3 分享目的、1.4 術(shù)語(yǔ)說(shuō)明
二、市場(chǎng)分析 —— 2.1 行業(yè)背景PEST、2.2 市場(chǎng)現(xiàn)狀
三、主流工具 —— 3.1 調(diào)查篩選、3.2 工具介紹、3.3 分析模型、3.4 結(jié)構(gòu)層、3.5 框架&表現(xiàn)層
四、功能體驗(yàn) —— 4.1 創(chuàng)建大屏、4.2 分享導(dǎo)出、4.3 更多玩法
五、探索思考 —— 5.1 未來(lái)迭代、5.2 設(shè)計(jì)價(jià)值
閱讀提醒
1、文章上篇約10300字，閱讀時(shí)長(zhǎng)約20分鐘。全文主要分享本人對(duì)當(dāng)下主流可視化大屏搭建工具的調(diào)研分析，淺談對(duì)可視化行業(yè)的探索思考。由于篇幅有限，閱讀體驗(yàn)更佳，故分為上下兩篇，上篇簡(jiǎn)述可視化行業(yè)的市場(chǎng)分析，拆解分析主流工具（DataV、Raydata、EasyV、森大屏）的結(jié)構(gòu)層、框架層和表現(xiàn)層。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗(yàn)，淺談可視化行業(yè)未來(lái)的探索和思考。
2、文中的拆解分析部分，多款工具可能存在較多重復(fù)觀點(diǎn)，由于篇幅有限，故不再贅述。
適合讀者
B端UI設(shè)計(jì)師、產(chǎn)品經(jīng)理，可視化行業(yè)相關(guān)從業(yè)者及愛(ài)好者。
調(diào)研時(shí)間
2022年9~10月
調(diào)研方式
桌面研究、問(wèn)卷調(diào)查
首先，本次分享僅作為個(gè)人學(xué)習(xí)交流，文章觀點(diǎn)僅代表個(gè)人。目前比較少有可視化工具的產(chǎn)品分析，本次通過(guò)調(diào)研，希望了解更多可視化大屏工具的背景、知識(shí)，也希望能通過(guò)文章的形式，達(dá)成兩個(gè)分享目的：一、提升自身的復(fù)盤總結(jié)能力，鼓勵(lì)將知識(shí)沉淀后輸出分享；二、借此機(jī)會(huì)與更多行業(yè)相關(guān)者分享交流學(xué)習(xí)。
數(shù)據(jù)可視化
關(guān)于數(shù)據(jù)視覺(jué)表現(xiàn)形式的科學(xué)技術(shù)研究。
數(shù)據(jù)可視化平合
它是大數(shù)據(jù)內(nèi)在價(jià)值的最終呈現(xiàn)手殷，它利用各類圖表、趨勢(shì)圖、視覺(jué)效果對(duì)數(shù)據(jù)進(jìn)行分析并展現(xiàn)，幫助用戶發(fā)現(xiàn)內(nèi)在規(guī)律、發(fā)掘深度規(guī)律、指導(dǎo)經(jīng)營(yíng)決策。
大屏搭建工具
利用簡(jiǎn)單拖拉拽、低代碼開發(fā)等方式，幫助非專業(yè)工程師快速實(shí)現(xiàn)炫酷大屏的數(shù)據(jù)可視化大屏效果的互聯(lián)網(wǎng)工具類產(chǎn)品。業(yè)務(wù)場(chǎng)景主要有行業(yè)可視化、智能終端、模擬演示、數(shù)據(jù)統(tǒng)計(jì)分析。
在2011年左右，國(guó)內(nèi)帆軟公司研發(fā)簡(jiǎn)單的可視化產(chǎn)品，起名“FineBI”，解決了用戶個(gè)性化的可視化分析的需求。隨著技術(shù)發(fā)展和行業(yè)趨勢(shì)發(fā)展，在滿足智能分析報(bào)表的基礎(chǔ)上，又迎來(lái)了更高的可視化大屏的挑戰(zhàn)，國(guó)內(nèi)如光啟元Raydata、阿里DataV等可視化大屏工具開始出現(xiàn)，各大廠商如京東、百度、網(wǎng)易有數(shù)等紛紛踏上可視化賽道，隨著近年的政策支持企業(yè)數(shù)字化轉(zhuǎn)型的浪潮下，可視化行業(yè)得以快速發(fā)展成熟，為企事業(yè)單位解決了一個(gè)又一個(gè)可視化分析難題……
本次調(diào)研經(jīng)過(guò)桌面研究，分析出近年來(lái)可視化行業(yè)背景和市場(chǎng)現(xiàn)狀。
從政策、經(jīng)濟(jì)、社會(huì)、技術(shù)這四個(gè)方面，分析數(shù)據(jù)可視化行業(yè)的背景，得出以下結(jié)論：
一、在政策方面，數(shù)據(jù)可視化行業(yè)受到政策扶持；
二、在經(jīng)濟(jì)方面，IT產(chǎn)業(yè)體系擴(kuò)大且成熟；
三、在社會(huì)方面，數(shù)據(jù)可視化解決企業(yè)痛點(diǎn)，機(jī)會(huì)點(diǎn)在政企和醫(yī)療行業(yè)；
四、在技術(shù)方面，企業(yè)通過(guò)數(shù)據(jù)可視化進(jìn)行精細(xì)化管理成為現(xiàn)實(shí)。
* PEST分析法 是對(duì)宏觀環(huán)境進(jìn)行分析，以便找到機(jī)會(huì)，認(rèn)清威脅與挑戰(zhàn)。所謂PEST，P是政治(Polotics)，E是經(jīng)濟(jì)(Economy）, S是社會(huì)(Society），T是技術(shù)(Technology)。這種方法就是將這4個(gè)元素分別寫在4個(gè)格子中，并羅列出這4個(gè)元素相關(guān)聯(lián)的與產(chǎn)品有關(guān)的環(huán)境因素，最后投票選出3~5個(gè)點(diǎn)子作為PEST分析的結(jié)果。
P政策
中國(guó)相繼出臺(tái)多項(xiàng)政策（如《“十四五”大數(shù)據(jù)產(chǎn)業(yè)發(fā)展規(guī)劃》）重點(diǎn)扶持?jǐn)?shù)據(jù)采集、數(shù)據(jù)安全、數(shù)據(jù)處理、數(shù)據(jù)存儲(chǔ)及大數(shù)據(jù)在產(chǎn)業(yè)端的應(yīng)用等方面的快速提升，進(jìn)一步利好數(shù)據(jù)可視化平臺(tái)等相關(guān)細(xì)分產(chǎn)業(yè)的快速發(fā)展。
制定5個(gè)發(fā)展目標(biāo)、6大主要任務(wù)，明確大數(shù)據(jù)產(chǎn)業(yè)將步入“集成創(chuàng)新、快速發(fā)展、深度應(yīng)用、結(jié)構(gòu)優(yōu)化"的高質(zhì)量發(fā)展新階段設(shè)置數(shù)據(jù)治理能力提升、重點(diǎn)標(biāo)準(zhǔn)研制及應(yīng)用推廣工業(yè)大數(shù)據(jù)價(jià)值提升、行業(yè)大數(shù)據(jù)開發(fā)利用、企業(yè)主體發(fā)展能級(jí)躍升、數(shù)據(jù)安全鑄盾六個(gè)專項(xiàng)行動(dòng)。（參考來(lái)源：頭豹研究院）
E經(jīng)濟(jì)
2021全年國(guó)內(nèi)生產(chǎn)總值突破110萬(wàn)億，GDP達(dá)114萬(wàn)億元，按不變價(jià)格計(jì)算，比上年增長(zhǎng)8.1%，兩年平均增長(zhǎng)5.1%。
我國(guó)IT產(chǎn)業(yè)在經(jīng)歷了三十多年的發(fā)展后，已經(jīng)基本形成了產(chǎn)業(yè)規(guī)模龐大、專業(yè)門類齊全的IT產(chǎn)業(yè)體系，2020年我國(guó)IT支出達(dá)2.9萬(wàn)億人民幣。
在應(yīng)用軟件領(lǐng)域百花齊放，2021年上半年我國(guó)軟件業(yè)完成軟件業(yè)務(wù)收入44198億元，同比增長(zhǎng)23.2%；全行業(yè)實(shí)現(xiàn)利潤(rùn)總額4999億元，同比增長(zhǎng)13.6%。另外，對(duì)于云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)、人工智能等新一代技術(shù)，我國(guó)也由單點(diǎn)向融合互動(dòng)不斷演進(jìn)。（參考來(lái)源：頭豹研究院）
S社會(huì)
數(shù)據(jù)可視化可有效解決企事業(yè)單位在傳統(tǒng)數(shù)據(jù)分析的痛點(diǎn)，降低了企業(yè)數(shù)據(jù)分析成本，助力企業(yè)在技術(shù)層、業(yè)務(wù)層、管理層及決策層等層面的決策能力。
受疫情影響，政務(wù)及醫(yī)療領(lǐng)域?qū)残l(wèi)生等等公共領(lǐng)域掌控力度加強(qiáng)，因此，中國(guó)數(shù)據(jù)可視化未來(lái)市場(chǎng)增長(zhǎng)點(diǎn)將主要集中在政務(wù)及醫(yī)療衛(wèi)生領(lǐng)域。（參考來(lái)源：頭豹研究院）
T技術(shù)
伴隨著互聯(lián)網(wǎng)、物聯(lián)網(wǎng)快速發(fā)展，中國(guó)數(shù)據(jù)量持續(xù)增加，通過(guò)對(duì)數(shù)據(jù)的可視化處理及分析，企業(yè)端對(duì)日常精細(xì)化管理成為現(xiàn)實(shí)。
過(guò)去5年間，中國(guó)數(shù)據(jù)產(chǎn)生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。預(yù)計(jì)未來(lái)5年中國(guó)數(shù)據(jù)產(chǎn)生量將繼續(xù)增加，有望于2026年達(dá)到62ZB。（參考來(lái)源：頭豹研究院）
分為市場(chǎng)階段和市場(chǎng)規(guī)模，說(shuō)明當(dāng)前數(shù)據(jù)可視化行業(yè)的市場(chǎng)現(xiàn)狀。結(jié)論如下：
一、國(guó)內(nèi)數(shù)據(jù)可視化平臺(tái)市場(chǎng)尚處于發(fā)展期，潛在市場(chǎng)容量非常巨大，前景廣闊；
二、預(yù)計(jì)未來(lái)5年國(guó)內(nèi)數(shù)據(jù)可視化平臺(tái)市場(chǎng)規(guī)模快速增加，復(fù)合增長(zhǎng)率達(dá)32.5%。
市場(chǎng)階段
國(guó)外可視化展現(xiàn)平臺(tái)行業(yè)起步較早，市場(chǎng)相對(duì)成熟，消費(fèi)者認(rèn)可較高，而國(guó)內(nèi)可視化展現(xiàn)平臺(tái)行業(yè)市場(chǎng)還處于發(fā)展期，雖然2012年呈現(xiàn)出小爆發(fā)式增長(zhǎng)，但市場(chǎng)尚不成熟，還有待于培育，然而國(guó)內(nèi)人口基數(shù)大，隨著國(guó)內(nèi)經(jīng)濟(jì)的發(fā)展，人民生活水平的提高，收入的增長(zhǎng)，對(duì)精神生活方面的消費(fèi)也不斷增加，國(guó)內(nèi)潛在市場(chǎng)容量非常巨大，前景廣闊，因此，可視化展現(xiàn)平臺(tái)行業(yè)的發(fā)展將逐漸向本土化轉(zhuǎn)移。
當(dāng)前，中國(guó)數(shù)據(jù)可視化平臺(tái)行業(yè)尚處于發(fā)展早期，36.8%投融資事件主要發(fā)生在早期A輪階段，行業(yè)尚具有較大發(fā)展?jié)摿?。從地域分布情況來(lái)看，中國(guó)數(shù)據(jù)可視化企業(yè)主要分布于廣東省、北京市、上海市、江蘇省及浙江省等區(qū)域，約占總體的93.5%。當(dāng)前，中國(guó)數(shù)據(jù)可視化行業(yè)投融資較為活躍。其中約36.8%的企業(yè)處于A輪融資階段，2家企業(yè)已于新三板掛板，其中，觀遠(yuǎn)數(shù)據(jù)于2022年2月完成C輪融資，共計(jì)2.8億元。（參考來(lái)源：頭豹研究院）
市場(chǎng)規(guī)模
過(guò)去5年間，中國(guó)數(shù)據(jù)可視化平合市場(chǎng)快速增加，由2017年的13.2億元快速增加至2021年的43.8億元，復(fù)合增長(zhǎng)率達(dá)27.1%。預(yù)計(jì)未來(lái)五年中國(guó)數(shù)據(jù)可視化平臺(tái)市場(chǎng)年復(fù)合增長(zhǎng)率有望達(dá)到32.5%。（參考來(lái)源：頭豹研究院）
根據(jù)上面的行業(yè)背景和市場(chǎng)現(xiàn)狀，從政策扶持、經(jīng)濟(jì)增長(zhǎng)、社會(huì)機(jī)會(huì)點(diǎn)增加、技術(shù)革新、市場(chǎng)階段成熟、市場(chǎng)規(guī)模擴(kuò)大方面都是正向推動(dòng)著可視化行業(yè)的快速發(fā)展，于是，市面上逐漸出現(xiàn)了很多數(shù)據(jù)可視化大屏搭建工具，目的是有效解決企事業(yè)單位在傳統(tǒng)數(shù)據(jù)分析的痛點(diǎn)，助力企事業(yè)單位快速進(jìn)行數(shù)字化轉(zhuǎn)型，整合數(shù)據(jù)、提高數(shù)據(jù)展示效率及輔助管理決策。
經(jīng)桌面研究、問(wèn)卷調(diào)查后，發(fā)現(xiàn)并整理出市面主流的數(shù)據(jù)可視化大屏搭建工具梯度說(shuō)明。以工具滿意度、行業(yè)普及率、用戶量幾個(gè)維度來(lái)劃分梯度：
第一梯隊(duì)有阿里云DataV、騰訊RayData、袋鼠云易知微；
第二梯隊(duì)有騰訊Banber（現(xiàn)改名RayData Report）、山海鯨可視化、森工廠森大屏、51WORLD、華為云DLV；
第三梯隊(duì)有微兔可視化、ByteV中臺(tái)等。
*本次未歸入調(diào)研范圍內(nèi)：京東、百度、網(wǎng)易有數(shù)等廠商可視化產(chǎn)品，以及一些開發(fā)大佬的開源大屏工具
*使用騰訊問(wèn)卷自發(fā)進(jìn)行問(wèn)卷調(diào)查，主要渠道為微信群，有效樣本量較少，數(shù)據(jù)僅供參考
第一梯度的阿里云DataV、騰訊RayData、袋鼠云易知微的工具滿意度、行業(yè)普及率、用戶量綜合評(píng)分較高，還有第二梯度的森工廠森大屏對(duì)比其他競(jìng)品產(chǎn)來(lái)說(shuō)，產(chǎn)品形式不同，后面將以阿里云DataV、騰訊RayData、袋鼠云易知微、森工廠森大屏這4個(gè)工具產(chǎn)品來(lái)進(jìn)行體驗(yàn)分析。
調(diào)研版本：*阿里云DataV - 企業(yè)版試用 - V6.2； 騰訊RayData - Web版 - V2.6.0； 袋鼠云易知微EasyV - 個(gè)人版 - V5.1.0； 森工廠森大屏 - V2.10.11 。
*EasyV2022年12月上新了「節(jié)點(diǎn)管理」功能（類似DataV的「藍(lán)圖」功能) 會(huì)與本次調(diào)研版本有一定差異。
*由于阿里云DataV在調(diào)研后2023年UI進(jìn)行較大更新，所以會(huì)與本次調(diào)研版本有一定差異，更新日志傳送門：https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12
阿里云DataV
a.產(chǎn)品簡(jiǎn)介
使用可視化應(yīng)用的方式來(lái)分析并展示龐雜數(shù)據(jù)的阿里云產(chǎn)品。其中DataV企業(yè)版試用是適合剛接觸DataV的新用戶，輕松搭建可視化大屏，匯報(bào)、客戶參觀必備。而DataV數(shù)據(jù)可視化企業(yè)版是開箱即用實(shí)時(shí)數(shù)據(jù)大屏搭建工具。
b.產(chǎn)品特點(diǎn)
智能識(shí)圖；藍(lán)圖節(jié)點(diǎn)編輯器；三維城市編輯器；BI分析組件
c.產(chǎn)品版本
企業(yè)版（本次調(diào)研）、專業(yè)版、尊享版
騰訊光啟元RayData
a.產(chǎn)品簡(jiǎn)介
專注3D數(shù)據(jù)可視化原型設(shè)計(jì)。RayData Web是B/S架構(gòu)開發(fā)的網(wǎng)頁(yè)端可視化系統(tǒng)搭建工具，支持在線3D可視化編輯，輕松構(gòu)建商業(yè)級(jí)數(shù)字孿生項(xiàng)目。
b.產(chǎn)品特點(diǎn)
3D模型風(fēng)格獨(dú)特；圖表工作站；模型場(chǎng)景工作站；提供定制服務(wù)
c.產(chǎn)品版本
個(gè)人版、Web版（原名專業(yè)版，本次調(diào)研）、Plus版（私有化部署）
袋鼠云易知微EasyV
a.產(chǎn)品簡(jiǎn)介：
數(shù)字孿生，EasyV是低成本無(wú)門檻上手?jǐn)?shù)據(jù)可視化大屏的工具，數(shù)據(jù)看板可視化，輕松設(shè)計(jì) 高效搭建。
b.產(chǎn)品特點(diǎn)：
素材資源豐富；資源社區(qū)氛圍好；提供定制服務(wù)
c.產(chǎn)品版本：
個(gè)人版（本次調(diào)研）、高級(jí)版、尊享版、運(yùn)行平臺(tái)（私有化部署）
a.產(chǎn)品簡(jiǎn)介：
拖拉拽搭建可視化大屏，內(nèi)置豐富模板和在線圖表開發(fā)工具
b.產(chǎn)品特點(diǎn)：
數(shù)字孿生工具鏈生態(tài)完善；藍(lán)圖節(jié)點(diǎn)編輯器；圖表工作站；提供建模服務(wù)
c.產(chǎn)品版本：
基礎(chǔ)版（本次調(diào)研）、專業(yè)版、高級(jí)版
本次調(diào)研使用【用戶體驗(yàn)五要素】模型方法來(lái)分析主流工具DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版，主要側(cè)重在表現(xiàn)層、框架層、結(jié)構(gòu)層。
此處說(shuō)明一下，例如本次調(diào)研的屬于功能型產(chǎn)品，那么功能型產(chǎn)品的結(jié)構(gòu)層側(cè)重于交互設(shè)計(jì)，通?？捎盟季S導(dǎo)圖、流程圖方式來(lái)說(shuō)明情況。再往上看，功能型產(chǎn)品的框架層側(cè)重于信息設(shè)計(jì)、界面設(shè)計(jì)，大致模塊尺寸大小、位置擺放，通?？捎玫捅Ｕ嬖?、交互文檔來(lái)說(shuō)明情況。到了模型最頂層，不論功能型還是信息型產(chǎn)品的表現(xiàn)層都是感知設(shè)計(jì)，關(guān)注視覺(jué)如何呈現(xiàn)，通常運(yùn)用形、色、字、質(zhì)、構(gòu)、動(dòng)著6個(gè)維度進(jìn)行整體視覺(jué)設(shè)計(jì)。
用戶體驗(yàn)五要素來(lái)自Jesse James Garrett 的《用戶體驗(yàn)要素》一書：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
在結(jié)構(gòu)層中，DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版4款產(chǎn)品略有不同（且名稱叫法不一），整理總結(jié)出共性，產(chǎn)品包括系統(tǒng)頁(yè)和編輯器，系統(tǒng)頁(yè)下包括項(xiàng)目列表、資源管理、用戶管理、幫助中心，編輯器下包括頂部導(dǎo)航欄、組件庫(kù)、圖層面板、畫布區(qū)、信息面板。
為了更清晰了解4款產(chǎn)品的產(chǎn)品設(shè)計(jì)側(cè)重點(diǎn)，接下來(lái)，對(duì)比分析它們的結(jié)構(gòu)層。
關(guān)鍵詞：強(qiáng)調(diào)品牌感、幫助中心、靈活切換藍(lán)圖
DataV企業(yè)版試用分為系統(tǒng)頁(yè)+編輯器。系統(tǒng)頁(yè)頂部是輪播banner圖，強(qiáng)調(diào)品牌感和打造產(chǎn)品差異化。
系統(tǒng)頁(yè)主要包括我的可視化、我的數(shù)據(jù)、我的資產(chǎn)、教程，其中我的可視化包括3個(gè)創(chuàng)建入口，分別是PC創(chuàng)建、移動(dòng)端創(chuàng)建和識(shí)圖創(chuàng)建，滿足用戶在不同場(chǎng)景的使用需求。系統(tǒng)頁(yè)中教程層級(jí)放在一級(jí)菜單下容易被用戶發(fā)現(xiàn)，對(duì)小白用戶比較友好，快速觀看視頻教程。
編輯器中包含畫布編輯器和藍(lán)圖編輯器。進(jìn)入編輯器后，可切換畫布編輯器與藍(lán)圖編輯器，放在同一層級(jí)，方便用戶從畫布編輯器中添加圖層到藍(lán)圖編輯器中。
畫布編輯器（PC和移動(dòng)端基本一致）包括圖層、資產(chǎn)列表（資產(chǎn)包、組件庫(kù)）、工具欄、畫布、頁(yè)面設(shè)置、組件設(shè)置。藍(lán)圖編輯器包括導(dǎo)入節(jié)點(diǎn)、邏輯節(jié)點(diǎn)、工具欄、配置面板。
關(guān)鍵詞：可視化統(tǒng)計(jì)、定位專業(yè)用戶、畫布占比大
Raydata Web專業(yè)版分為系統(tǒng)頁(yè)+編輯器。系統(tǒng)頁(yè)主要包括工程列表、資源管理、數(shù)據(jù)管理、權(quán)限管理。因?yàn)楫a(chǎn)品定位是專業(yè)版，所以弱化了幫助手冊(cè)的入口，同時(shí)編輯器中也是基于熟悉掌握工具的用戶而設(shè)計(jì)的。類比于Raydata Web個(gè)人版，系統(tǒng)頁(yè)的更多幫助入口更為明顯，適用于新手小白使用。
系統(tǒng)中的資源管理包括3D資源和2D資源，顯示資源數(shù)量，以環(huán)圖可視化的形式表現(xiàn)，系統(tǒng)中的權(quán)限管理也同樣顯示人員數(shù)量，數(shù)據(jù)統(tǒng)計(jì)一目了然。
編輯器中的大綱、概要與其他產(chǎn)品結(jié)構(gòu)不同，大綱包括系統(tǒng)UI層（放2D）、層級(jí)（放3D）、頁(yè)面（2D&3D），概要分不同情況而定，處于UI層時(shí)顯示2D組件，處于場(chǎng)景層時(shí)顯示3D組件。
畫布編輯器包括頂部欄（基礎(chǔ)功能、組件庫(kù)）、概要、大綱、畫布、頁(yè)面設(shè)置，頁(yè)面設(shè)置（畫布設(shè)置、組件設(shè)置）。其中組件庫(kù)折疊在頂部欄中，增大了編輯器中畫布的占比，讓用戶更關(guān)注當(dāng)前畫布操作。
關(guān)鍵詞：素材資源、幫助中心、畫布占比大
EasyV個(gè)人版分為系統(tǒng)頁(yè)+編輯器。系統(tǒng)頁(yè)包括我的應(yīng)用、我的數(shù)據(jù)、終端交互（高級(jí)版有）、組件開發(fā)（尊享版有）、后臺(tái)管理、門戶管理（高級(jí)版有）、資源中心。
其中系統(tǒng)頁(yè)的資源中心包括應(yīng)用模板、設(shè)計(jì)素材、主題資源，有入口可跳往素材廣場(chǎng)，EasyV的素材資源十分豐富，該跳轉(zhuǎn)入口可以很好引導(dǎo)用戶去使用官網(wǎng)設(shè)計(jì)素材，輕松搭建大屏。幫助菜單位于常駐懸浮于系統(tǒng)頁(yè)側(cè)邊欄，其包括操作日志、幫助文檔、視頻教程、問(wèn)答中心、版本日志，幫助菜單對(duì)于新手小白比較友好，操作路徑簡(jiǎn)短，方便新手查閱幫助資料。
編輯器包括任務(wù)欄（基礎(chǔ)功能、組件、資源）、圖層、畫布、詳情設(shè)置（頁(yè)面設(shè)置、組件設(shè)置）。同Raydata Web專業(yè)版產(chǎn)品，其中組件庫(kù)折疊在任務(wù)欄中，增大了編輯器中畫布的占比，讓用戶更關(guān)注當(dāng)前畫布操作。
關(guān)鍵詞：工具鏈、模板推薦、藍(lán)圖和代碼二開
森大屏基礎(chǔ)版分為系統(tǒng)頁(yè)+編輯器。森大屏的結(jié)構(gòu)和其他產(chǎn)品不同，由于數(shù)字孿生工具鏈生態(tài)比較完善，打通其他工具鏈入口（森工廠旗下有低代碼、零代碼、森大屏、森城市、森園區(qū)、森展廳、森拓?fù)洹⑸瓟?shù)據(jù)、森模型等），所以系統(tǒng)頁(yè)頂部導(dǎo)航菜單可快速切換工具。
系統(tǒng)頁(yè)包括了個(gè)人中心、幫助手冊(cè)、我的大屏、推薦大屏（模板），側(cè)重展示推薦大屏，引導(dǎo)用戶優(yōu)先選用模板進(jìn)行大屏快速搭建，生產(chǎn)提效。
編輯器包括大綱、工具欄、畫布、畫布屬性、資源管理、菜單欄、資源中心、藍(lán)圖和代碼二開。編輯器中與DataV不同的是，藍(lán)圖、代碼與畫布位于同一層級(jí)，用戶可隨時(shí)使用藍(lán)圖來(lái)鏈接交互事件，也可進(jìn)行代碼二次開發(fā)操作。
將4款產(chǎn)品的框架層和表現(xiàn)層進(jìn)行拆解分析。
在框架層中，大體而言按鈕、輸入框等控件圓角較小，看起來(lái)比較方正，弧線的異形設(shè)計(jì)，容易體現(xiàn)科幻造型。在登錄頁(yè)中，頁(yè)面布局各有差異。在編輯器中的布局大體一致，畫布都位于界面中心，強(qiáng)調(diào)用戶最關(guān)注大屏設(shè)計(jì)的畫布區(qū)域。高頻操作的組件庫(kù)在頁(yè)面的位置各有差異。
在表現(xiàn)層中，主要通過(guò)形、色、字、質(zhì)、構(gòu)、動(dòng)這6個(gè)維度來(lái)進(jìn)行對(duì)比分析。DataV企業(yè)版試用、Raydata Web專業(yè)版、EasyV個(gè)人版、森大屏基礎(chǔ)版4款產(chǎn)品的整體視覺(jué)調(diào)性都是以暗色、科幻風(fēng)格為主。登錄頁(yè)都選擇了亮色風(fēng)格界面，系統(tǒng)頁(yè)和編輯器都是暗黑風(fēng)格。部分產(chǎn)品品牌字體以直線為主并加入弧線和粒子元素，科幻的界面動(dòng)效主要體現(xiàn)在加載頁(yè)面。
阿里云（DataV企業(yè)版試用）- 登錄頁(yè)
DataV 的登錄頁(yè)統(tǒng)一由阿里云登錄頁(yè)進(jìn)入。以中心布局（核心面板偏右），三維模型+灰色背景+線條點(diǎn)綴的形式進(jìn)行設(shè)計(jì)，主題色是阿里的橙色。因?yàn)镈ataV是阿里云旗下的產(chǎn)品，共用入口，所以此處沒(méi)做額外的產(chǎn)品登錄頁(yè)以強(qiáng)調(diào) DataV 產(chǎn)品一致的品牌感。
Raydata Web專業(yè)版 - 登錄頁(yè)
Raydata Web 登錄頁(yè)以中心布局的形式，無(wú)其他設(shè)計(jì)元素，只保留關(guān)鍵信息，同其他競(jìng)品相比略顯單調(diào)。登錄頁(yè)的淺色風(fēng)格與進(jìn)入系統(tǒng)頁(yè)和編輯器的暗黑風(fēng)格，缺乏界面整體色調(diào)的一致性。界面控件主題色使用藍(lán)紫漸變色，與系統(tǒng)頁(yè)和編輯器的藍(lán)色也略有差異。（可從Raychart產(chǎn)品使用手冊(cè)發(fā)現(xiàn)，舊版布局為同EasyV）
EasyV個(gè)人版 - 登錄頁(yè)
EasyV 的登錄頁(yè)有2處觸發(fā)，常規(guī)觸發(fā)和資源中心觸發(fā)，分別以左右布局的全頁(yè)和彈窗形式進(jìn)行框架設(shè)計(jì)。彈窗的形式不需額外跳轉(zhuǎn)，讓用戶在資源中心挑選素材時(shí)能更快進(jìn)行登錄操作。登錄頁(yè)以左右布局的形式，插圖與登錄模塊大致各占50%，深色插圖的和淺色登錄模塊的兩個(gè)色塊形成強(qiáng)烈視覺(jué)對(duì)比，更能吸引用戶注意。
森工廠（森大屏基礎(chǔ)版) - 登錄頁(yè)
森大屏的登錄頁(yè)以中心布局的形式，有利于聚焦視覺(jué)，背景使用簡(jiǎn)約抽象的形狀來(lái)點(diǎn)綴畫面?；疑尘?抽象圖形點(diǎn)綴，與淺色登錄模塊拉開視覺(jué)對(duì)比。按鈕主題色是橙色，是因?yàn)樯笃潦莾?yōu)锘科技森工廠旗下的產(chǎn)品，共用入口，所以此處沒(méi)做額外的產(chǎn)品登錄頁(yè)以強(qiáng)調(diào)森大屏產(chǎn)品一致的品牌感。
DataV企業(yè)版試用 - 系統(tǒng)頁(yè)
頂部輪播圖占整個(gè)頁(yè)面四分之一左右，強(qiáng)調(diào)品牌感同時(shí)打造產(chǎn)品差異化，Banner內(nèi)容為統(tǒng)一風(fēng)格的3D模型場(chǎng)景+無(wú)襯線字體標(biāo)題為主，一級(jí)導(dǎo)航邊緣弧線的流光動(dòng)效表現(xiàn)科幻酷炫風(fēng)格。
一級(jí)導(dǎo)航欄與輪播圖的重疊關(guān)系，半透的玻璃質(zhì)感，仿佛是用戶透過(guò)一層玻璃，打開可視化世界的大門，結(jié)合暗黑風(fēng)格的界面，給用戶一種進(jìn)入游戲的沉浸感、躍躍欲試的沖動(dòng)?？v向與橫向結(jié)合的混合導(dǎo)航，對(duì)于后期有規(guī)劃新功能而言，拓展性較強(qiáng)，缺點(diǎn)是占用面積大、交互路徑長(zhǎng)，適用于大屏項(xiàng)目數(shù)不多的情況下，若項(xiàng)目數(shù)量較多，可能有空間不夠的焦慮。
我的可視化中的3個(gè)創(chuàng)建入口按鈕使用了扁平加光感強(qiáng)、冷色調(diào)風(fēng)格插畫，引起用戶注意，快速識(shí)別創(chuàng)建功能入口。主題色使用比較鮮艷活躍的藍(lán)色，輔助色為青色，占用面積不多，起到豐富點(diǎn)綴畫面的作用。設(shè)計(jì)元素的四周輪廓不做圓角處理，顯得整體界面比較方正端正、硬朗嚴(yán)肅的印象。
Raydata Web專業(yè)版 - 系統(tǒng)頁(yè)
左上方展示品牌Logo，清晰寫明當(dāng)前產(chǎn)品及版本，符合用戶認(rèn)知。品牌元素融入進(jìn)頂部欄右側(cè)頭像及皇冠圖標(biāo)，加深品牌印象。
以側(cè)邊懸浮導(dǎo)航的形式使用戶快速定位查找功能模塊的位置，拓展性較強(qiáng)，以較瓷片“大包小”的結(jié)構(gòu)，聚合了較多功能模塊，如果是小分辨率屏幕的情況下，經(jīng)常要鼠標(biāo)輪滑來(lái)回滾動(dòng)才可看到下方功能模塊，導(dǎo)致不夠靈活高效。側(cè)邊導(dǎo)航模塊中的圖標(biāo)統(tǒng)一為形狀較方正、偏冷的中性色、扁平微漸變風(fēng)格。敬請(qǐng)期待的藍(lán)色沙漏圖標(biāo)在界面中略微突兀出，缺少圖標(biāo)風(fēng)格一致性。
界面為偏冷中性純色，無(wú)背景裝飾，同登錄頁(yè)只保留關(guān)鍵信息（如大屏項(xiàng)目卡片），不加過(guò)多裝飾的簡(jiǎn)約風(fēng)格調(diào)性保持一致。按鈕主題色使用比較灰的藍(lán)色，透出沉穩(wěn)柔和的調(diào)性。設(shè)計(jì)元素的四周輪廓略微加了些圓角，同DataV硬朗的感覺(jué)則稍微緩和一些。
EasyV個(gè)人版 - 系統(tǒng)頁(yè)
上方展示品牌Logo，同Raydata，不再贅述。對(duì)于創(chuàng)建大屏按鈕而言，DataV用的是插畫按鈕的形式，Raydata是用卡片按鈕的形式，而EasyV則用圖文按鈕的形式，而圖文按鈕的優(yōu)點(diǎn)是占用面積少。
同DataV，選用了縱向與橫向結(jié)合的混合導(dǎo)航，拓展性較強(qiáng)，不再贅述。二級(jí)導(dǎo)航底部使用了動(dòng)態(tài)插圖點(diǎn)綴界面，插圖是不斷旋轉(zhuǎn)的科幻裝置，角度帶有透視，讓扁平的整體界面附帶了層次感、空間感。右側(cè)側(cè)邊菜單的幫助圖標(biāo)提供給用戶快捷操作，對(duì)新手小白友好。
缺省頁(yè)運(yùn)用情感化設(shè)計(jì)，以2.5d插圖的表現(xiàn)形式緩解用戶負(fù)面情緒，配色在深色界面中顯得比較明顯，個(gè)人認(rèn)為可以適當(dāng)弱化插畫亮色部分。主題色使用鮮艷活躍的藍(lán)色為主，在深色的界面中同樣相對(duì)明顯、突出。設(shè)計(jì)元素的四周輪廓既有全圓角，也有小圓角，界面形狀統(tǒng)一性待加強(qiáng)。
森工廠（森大屏基礎(chǔ)版) - 系統(tǒng)頁(yè)
左上方展示品牌Logo，同Raydata，不再贅述。由于是森工廠旗下的工具鏈，所以森大屏的系統(tǒng)頁(yè)頂部欄可進(jìn)行工具切換，界面左右兩側(cè)留白很多、版心小、淺色風(fēng)格，讓整體界面更像是一個(gè)前臺(tái)官網(wǎng)的印象。
使用了像是混合導(dǎo)航的方式，用“像”這樣表達(dá)是因?yàn)?，頂部欄是工具切換欄，而側(cè)邊懸浮導(dǎo)航1竟然是所有工具的個(gè)人中心，側(cè)邊懸浮導(dǎo)航2卻是當(dāng)前工具森大屏的資源中心，右側(cè)內(nèi)容區(qū)是當(dāng)前工具森大屏的我的大屏、推薦大屏模塊?？蚣苌嫌幸欢ǔ潭炔惶嫌脩粽J(rèn)知，導(dǎo)致引起疑惑和誤解。盡管如此，配色上使用橙色（森工廠）和具體工具主題色來(lái)區(qū)分當(dāng)前位置，能一定程度防止用戶混淆概念，通過(guò)多次在頂部欄切換工具，可預(yù)知上面提到的導(dǎo)航1是指所有工具而言的，而導(dǎo)航2則是指當(dāng)前具體工具而言。
右側(cè)側(cè)邊菜單提供用戶快速反饋的入口，簡(jiǎn)單便捷。其中側(cè)邊菜單的問(wèn)號(hào)圖標(biāo)與頂部欄的一樣，跳轉(zhuǎn)鏈接一致，而文案卻使用了“常見(jiàn)問(wèn)題”和“幫助中心”2種，重復(fù)功能入口也許考慮的是為了增加點(diǎn)擊，而同個(gè)界面重復(fù)堆放功能入口的合理性還有待考究。圖標(biāo)使用了毛玻璃和線性圖標(biāo)的表現(xiàn)手法，為界面提升質(zhì)感。設(shè)計(jì)元素的四周輪廓加了小圓角，整體給人的感覺(jué)更為親切、友好。
DataV企業(yè)版試用 - 畫布/藍(lán)圖編輯器
整體暗黑風(fēng)格的界面下，能使得用戶設(shè)計(jì)深色風(fēng)格的可視化大屏?xí)r，保持更專注的狀態(tài)。題外話，DataV新版本的編輯器界面可切換有淺色風(fēng)格，同理，淺色編輯器界面則更適合在設(shè)計(jì)淺色風(fēng)格的大屏的場(chǎng)景。通過(guò)不同深色色階的背景色塊讓每個(gè)功能模塊的框架位置區(qū)分得清晰明了，另外整體配色、形狀方面都遵循視覺(jué)呈現(xiàn)一致性，降低用戶認(rèn)知成本。
在編輯器左上方無(wú)退回系統(tǒng)頁(yè)的返回按鈕，用戶只能通過(guò)切換瀏覽器標(biāo)簽頁(yè)回看系統(tǒng)頁(yè)，而無(wú)法在當(dāng)前頁(yè)返回上一層級(jí)回到系統(tǒng)頁(yè)，所以對(duì)于想要快速返回上層的場(chǎng)景下，則顯得不那么便捷。頂部欄左側(cè)的畫布編輯器與藍(lán)圖編輯器選項(xiàng)按鈕歸于一組符合用戶認(rèn)知，可快速切換當(dāng)前編輯器進(jìn)行大屏視覺(jué)設(shè)計(jì)或鏈接交互事件。畫布編輯器和藍(lán)圖編輯器的畫布外區(qū)域保持視覺(jué)統(tǒng)一，使用了點(diǎn)平鋪的背景與畫布做出層次區(qū)分。
右側(cè)的屬性面板中展示組件的配置功能，當(dāng)信息較多時(shí)，用視覺(jué)較弱的分割線區(qū)分每組的配置信息，數(shù)據(jù)之間比較緊湊，提高面積利用率。編輯器中多處的功能組使用了格式塔原則的接近性，讓距離更近的功能組更有關(guān)聯(lián)性，層次清晰有序，降低用戶認(rèn)知成本。
圖標(biāo)表現(xiàn)方式只使用了單色線性圖標(biāo)一種，讓整體界面表現(xiàn)得更簡(jiǎn)潔、輕量化，忽略圖標(biāo)形狀而讓用戶更多去關(guān)注功能。配色、圓角遵循視覺(jué)呈現(xiàn)一致性，當(dāng)功能被選中時(shí)，會(huì)以藍(lán)色背景、圖標(biāo)反白的方式強(qiáng)調(diào)該功能的狀態(tài)、位置。
Raydata Web專業(yè)版 - 編輯器
同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無(wú)退回系統(tǒng)頁(yè)的返回按鈕，不太便捷，不贅述。
大綱與概要類似于頁(yè)面與圖層的關(guān)系，像設(shè)計(jì)軟件Figma的Page（頁(yè)面）與Layer（圖層），大綱與概要位于界面左側(cè)的區(qū)分上下模塊，框架從上至下擺放，符合用戶認(rèn)知。對(duì)于新手小白，還需額外查看教程引導(dǎo)才能認(rèn)知大綱與概要的框架，因?yàn)榇税姹径ㄎ粸閷I(yè)版，所以弱化了幫助指引，簡(jiǎn)化界面，讓專家級(jí)用戶更沉浸地、不受過(guò)多干擾地使用。
組件庫(kù)位于頂部，占用面積小，前面結(jié)構(gòu)層提過(guò)，作用是增大了畫布占比，讓用戶更專注設(shè)計(jì)，不贅述。
圖標(biāo)表現(xiàn)方式使用了單色面性圖標(biāo)和微漸變扁平投影圖標(biāo)，界面頂部是組件庫(kù)，這些微漸變圖標(biāo)呼應(yīng)了系統(tǒng)頁(yè)同樣使用了為漸變風(fēng)風(fēng)格。為了強(qiáng)調(diào)組件庫(kù)這種用戶高頻操作區(qū)域，使用了更吸引用戶注意力的微漸變扁平投影圖標(biāo)，而其他區(qū)域則使用單色面性圖標(biāo)，弱化視覺(jué)，讓界面輕量化，讓用戶更多去關(guān)注功能。同DataV，同樣使用格式塔原則的接近性，層次清晰，降低認(rèn)知成本，不贅述。
配色、圓角遵循視覺(jué)呈現(xiàn)一致性，當(dāng)功能被選中時(shí)，會(huì)以藍(lán)色背景、圖標(biāo)反白的方式強(qiáng)調(diào)該功能的狀態(tài)、位置。
EasyV個(gè)人版 - 編輯器
與其余3款工具不同，EasyV在編輯器左上方有退回系統(tǒng)頁(yè)的返回按鈕，方便用戶快速返回上層的系統(tǒng)頁(yè)。
同Raydata，組件庫(kù)位于頂部任務(wù)欄中，占用面積小，前面結(jié)構(gòu)層提過(guò)，作用是增大了畫布占比，讓用戶更專注設(shè)計(jì)，不贅述。
圖標(biāo)表現(xiàn)方式使用了單色微漸變線性圖標(biāo)，部分圖標(biāo)線細(xì)節(jié)還用半透明效果，而部分則用了不透明度漸變的方式，提升圖標(biāo)質(zhì)感，讓整體界面輕量化而不至于過(guò)于單調(diào)。配色、圓角遵循視覺(jué)呈現(xiàn)一致性，降低用戶認(rèn)知成本。
森工廠（森大屏基礎(chǔ)版) - 編輯器
同DataV，暗黑風(fēng)格界面，不同深淺色塊背景區(qū)分功能模塊，且界面左上方無(wú)退回系統(tǒng)頁(yè)的返回按鈕，不太便捷，不贅述。
編輯器的任務(wù)欄設(shè)計(jì)類似本地客戶端軟件的頂部菜單欄，通用的“文件、編輯、視圖、排列、圖表、調(diào)試、幫助”菜單都放在了頂部任務(wù)欄，符合用戶交互習(xí)慣，缺點(diǎn)占用面積較大。
與Raydata結(jié)構(gòu)一樣，同樣有類似設(shè)計(jì)軟件Figma的Page（頁(yè)面）與Layer（圖層）的關(guān)系，森大屏把圖層放在畫布底部欄，而大綱放在組件庫(kù)的左下角位置。可能考慮不占用過(guò)多面積而折疊在左下角，但缺點(diǎn)也很明顯，層級(jí)較深，難以找到大綱中的畫布元素，對(duì)新手小白不太友好。通過(guò)畫布底部欄切換圖層，這里圖層也是分2D和3D，還可設(shè)置圖層為全局圖層，即預(yù)覽大屏?xí)r跳轉(zhuǎn)任何地方都始終顯示該圖層，可減少重復(fù)勞動(dòng)設(shè)計(jì)。
藍(lán)圖和代碼二開也位于畫布底部區(qū)域，同DataV，森大屏也有藍(lán)圖功能。底部有藍(lán)圖和代碼二開的切換按鈕，方便用戶鏈接交互事件和調(diào)試二改組件的時(shí)候，不完全遮擋畫布，讓用戶更易感知當(dāng)前所處位置和狀態(tài)，無(wú)需來(lái)回切換頁(yè)面而增加操作成本。
界面圖標(biāo)表現(xiàn)方式同DataV，只使用了單色線性圖標(biāo)，讓整體界面表現(xiàn)得更簡(jiǎn)潔、輕量化，不贅述。畫布外區(qū)域使用了點(diǎn)平鋪的背景與畫布做出層次區(qū)分。
上篇簡(jiǎn)述可視化行業(yè)的市場(chǎng)分析，了解到國(guó)家政策如《“十四五”大數(shù)據(jù)產(chǎn)業(yè)發(fā)展規(guī)劃》大力支持可視化行業(yè)的發(fā)展，可視化行業(yè)解決企業(yè)痛點(diǎn)，助力企事業(yè)單位進(jìn)行數(shù)字化轉(zhuǎn)型。隨著數(shù)據(jù)可視化行業(yè)的發(fā)展，可視化報(bào)表分析工具逐漸衍生出更利于輔助分析的可視化大屏工具，隨后進(jìn)行桌面研究、問(wèn)卷調(diào)查后，篩選出4款主流工具（DataV、Raydata、EasyV、森大屏），分別對(duì)它們的結(jié)構(gòu)層、框架層和表現(xiàn)層進(jìn)行拆解分析。
設(shè)計(jì)師在了解和體驗(yàn)工具型產(chǎn)品時(shí)，也要對(duì)其行業(yè)有一定的思考，這樣更有利于了解業(yè)務(wù)、用戶以及產(chǎn)品。下篇接著講主流工具（DataV、Raydata、EasyV、森大屏）的功能體驗(yàn)，淺談可視化行業(yè)未來(lái)的探索和思考。
那么，下篇再見(jiàn)！
如何讓自己的產(chǎn)品在保證基本的可用性和易用性的同時(shí)，還能讓界面看起來(lái)柔和、更富有親和力？一個(gè)產(chǎn)品能留住用戶的雖然是內(nèi)容本身的質(zhì)量與吸引力，但一個(gè)小小的細(xì)節(jié)卻能夠阻止用戶的流失，成為內(nèi)容轉(zhuǎn)化的最后一道防線，讓人眼前一亮，值得借鑒。
體驗(yàn)?zāi)夸洠?/strong>
01. 【剪映】化繁為簡(jiǎn)，突破性的C端深度編輯交互界面！
02.【剪映】組合操作，簡(jiǎn)化界面跳轉(zhuǎn)的“批量編輯”
03.【必剪】軌道按鈕文案自適應(yīng)滑動(dòng)跟隨
04.【剪映/IOS】首頁(yè)新增（試試看）教程專區(qū)板塊，快速入門軟件
05.【剪映】“剪同款”功能，讓用戶快速出片
06.【剪映】上滑升起列表，讓用戶查看選擇更加直觀
07.【剪映】不同類型的模塊，分區(qū)展示
08.【剪映】選中特效后，自動(dòng)播放（特效預(yù)覽效果）
09.【剪映】濾鏡功能“單行瀏覽”的原因以及必要性
產(chǎn)品體驗(yàn)：
在此前，用戶想要對(duì)視頻進(jìn)行剪輯操作，用戶大多都需要使用電腦的Ae、Pr等剪輯軟件，此類軟件體量大，操作門檻高，而且需要有電腦的存在，在人手一臺(tái)智能手機(jī)的今天，剪映等專業(yè)剪輯APP的出現(xiàn)，填補(bǔ)了用戶需要在手機(jī)上進(jìn)行視頻剪輯的需求空白。
剪映的UI交互界面，既保留了Ae、Pr等專業(yè)剪輯軟件的界面特點(diǎn)（畫面軌道，音頻軌道），也大大的降低了剪輯軟件的操作門檻。
剪映的UI交互精明之處在于，它將專業(yè)剪輯軟件的復(fù)雜，位置隱蔽，但又常用的剪輯操作。「整合」成為底部一個(gè)個(gè)顯眼的功能圖標(biāo)，并且用極為精簡(jiǎn)易懂的文案，對(duì)功能進(jìn)行了一個(gè)充分的描述。這一舉動(dòng)，大大降低了用戶對(duì)剪輯軟件復(fù)雜功能的理解門檻，用一種整合式的思維，提供功能給用戶合成使用。這簡(jiǎn)單易懂的交互體驗(yàn)，也大大提高了用戶的黏度，忠誠(chéng)度。讓小白用戶接觸了剪映后，再也無(wú)法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切機(jī)器輔助，機(jī)器完成，需要人效的地方越來(lái)越少，在這大背景下，我們軟件的用戶只會(huì)變得越來(lái)越懶。
在新時(shí)代的背景下，我們UI、交互設(shè)計(jì)師，需要一種寶貴的「化繁為簡(jiǎn)」能力，在不影響最終呈現(xiàn)效果的前提下，將一個(gè)軟件的交互體驗(yàn)，文案、功能理解，以及功能使用操作做得越簡(jiǎn)單，用戶的黏度，忠誠(chéng)度就會(huì)越高。
一個(gè)工具類APP何為「好用」？也許就是像剪上映一樣，“化繁為簡(jiǎn)，成效依然”
產(chǎn)品體驗(yàn)：
在剪映中，識(shí)別字幕的交互邏輯，是自動(dòng)識(shí)別所有視頻片段的語(yǔ)音，并且插入時(shí)間線中，識(shí)別字幕是【批量進(jìn)入時(shí)間軸】的。所以想統(tǒng)一進(jìn)行編輯，得一個(gè)個(gè)反復(fù)選中，然后逐一檢查，這種累人的交互體驗(yàn)，讓用戶用了第一次就不會(huì)想用第二次。
剪映推出了「批量編輯」交互功能。
語(yǔ)音識(shí)別后，用戶點(diǎn)擊其中一個(gè)識(shí)別字幕，底部第一個(gè)功能就是「批量剪輯」功能，點(diǎn)擊后，可以一鍵編輯全體的識(shí)別字幕內(nèi)容，減少了用戶調(diào)整識(shí)別字幕是的操作交互時(shí)間，增加了用戶操作效率
設(shè)計(jì)思考：
在產(chǎn)品的功能交互設(shè)計(jì)中，不妨使用剪映的「整合思維」，將一些重復(fù)性高，標(biāo)簽統(tǒng)一，可統(tǒng)一操作的元素整合在一個(gè)功能中統(tǒng)一編輯，減少用戶的操作切換與跳轉(zhuǎn)，增加用戶的交互體驗(yàn)與操作效率
產(chǎn)品體驗(yàn)：
在必剪中隨著用戶左右移動(dòng)，軌道按鈕的文案也會(huì)跟隨移動(dòng)，讓用戶無(wú)論滑動(dòng)到何處，什么位置，都能清晰的知道軌道的應(yīng)用名稱，而不會(huì)出現(xiàn)混淆的情況。最大程度上，減輕了用戶的理解成本
設(shè)計(jì)思考：
當(dāng)我們的圖標(biāo)，功能板塊，或者某些重要信息，被用戶左右、上下滑動(dòng)導(dǎo)致超出屏幕展示區(qū)域，用戶想回頭找到這些元素，就得重新滑動(dòng)到對(duì)應(yīng)位置，走一趟“回頭路操作” 。這對(duì)用戶來(lái)說(shuō)其實(shí)是不便捷的，對(duì)交互設(shè)計(jì)來(lái)說(shuō)，是不聰明的
我們可以利用【必剪】的文字跟隨交互，來(lái)舉一反三，讓一些重要的功能，信息區(qū)域，隨著用戶的滑動(dòng)而自適應(yīng)跟隨，最大限度地保證用戶他不錯(cuò)過(guò)這些重要的功能、信息。
產(chǎn)品體驗(yàn)：
在用戶（特別是大齡用戶），在初次使用【剪映】這種有一定入門難度的APP的時(shí)候，其實(shí)都是感到陌生的，新手指引雖然能一定程度解決此問(wèn)題，但是新手引導(dǎo)只能在第一次打開APP時(shí)展示，而且新手指引有非常強(qiáng)的局限性，它只能告訴能這功能要怎么用，而無(wú)法告訴你這功能的使用場(chǎng)景。
所以在首頁(yè)中新增一個(gè)軟件使用技巧、教程專區(qū)，可以讓有需要的用戶第一時(shí)間觀看課程，入門軟件，而且課程用戶可反復(fù)觀看，不像新手指引般一次性展示。
這種交互體驗(yàn)，大大減輕了用戶入門軟件的難度。
設(shè)計(jì)思考：
在我們?cè)O(shè)計(jì)的產(chǎn)品是一個(gè)工具型軟件，且有一定入門、使用難度的時(shí)候，不妨參考一下【剪映】的首頁(yè)+軟件使用教程 的交互思維。
用最低成本教會(huì)用戶如何使用這個(gè)軟件，而且展示位置是每次打開APP時(shí)都會(huì)看到的首頁(yè)，不用擔(dān)心一些粗心的用戶錯(cuò)過(guò)。
產(chǎn)品體驗(yàn)：
在剪映Tap欄中，有一個(gè) “剪同款” 功能，選中對(duì)應(yīng)的視頻模版后，填入自己相冊(cè)的素材，聽(tīng)過(guò)自動(dòng)剪輯，特效覆蓋，自動(dòng)填充文字、BGM等一系列操作，支持用戶一鍵快速成片。
設(shè)計(jì)思考：
在流量為王的時(shí)代，內(nèi)容輸出效率就代表了一切，剪映的 “剪同款” 功能，就是讓用戶的內(nèi)容輸出效率大大提高，將輸出內(nèi)容的過(guò)程簡(jiǎn)單化，無(wú)腦化，用戶無(wú)需再去想用什么創(chuàng)意，視頻用什么BGM，以及視頻特效如何制作，這些都由APP的模版設(shè)計(jì)師幫你搞定，用戶需要做的，就是提供出自己的素材即可。
這給予了我們產(chǎn)品設(shè)計(jì)師一個(gè)啟發(fā)，在我們?cè)O(shè)計(jì)產(chǎn)品時(shí)，是否也能關(guān)注一下，急需內(nèi)容輸出，但內(nèi)容輸出困難的領(lǐng)域呢？也能把一些可自動(dòng)化實(shí)現(xiàn)的步驟（如特效，BGM，字幕等等），交給系統(tǒng)，用戶只需參與拍攝或提供一小部分素材，即可生成一條優(yōu)質(zhì)的內(nèi)容。解決用戶輸出內(nèi)容痛點(diǎn)，從而留存用戶數(shù)量，從而實(shí)現(xiàn)用戶量變現(xiàn)。
產(chǎn)品體驗(yàn)：
在剪映APP中，一些展示選擇列表的功能中，用戶上滑，列表都會(huì)隨之升起，讓用戶可以更直觀的查看選中其中內(nèi)容，大大增加視覺(jué)傳達(dá)效率。
讓用戶不會(huì)被窗口高度限制，更高效地瀏覽、選用列表中的元素，增加產(chǎn)品功能成效效率
設(shè)計(jì)思考：
當(dāng)我們的瀏覽窗口，因UI布局高度受限時(shí)，設(shè)計(jì)師可以通過(guò)【窗口隨著滑動(dòng)響應(yīng)移動(dòng)】的交互方式，使得界面UI交互更多變幻，更為靈活。
產(chǎn)品體驗(yàn)：
在剪輯APP中，難免會(huì)有許多種類不同，作用各樣的模塊，但是剪輯軌道UI展示的空間有限，如果沒(méi)有分區(qū)思維，那么整個(gè)剪輯軌道將會(huì)變得雜亂不堪，用戶用久了看到各種軌道模塊，也會(huì)疲勞過(guò)載
而剪映提供的UI解決方案也非常值得參考，將各種不同種類的效果軌道模塊，分區(qū)展示，在用戶點(diǎn)擊【特效】前，剪輯軌道不展示所有的【特效模塊】，在用戶點(diǎn)擊【特效】功能后，才展示對(duì)應(yīng)的【特效模塊】軌道
設(shè)計(jì)思考：
在我們面對(duì)多種不同類型，但是作用相同對(duì)象的作用對(duì)象時(shí)，利用交互思維，在UI界面上進(jìn)行視覺(jué)分類很重要，否則你整個(gè)APP的操作界面將會(huì)雜亂無(wú)章。
剪映給了我們一個(gè)很好的參考，就是將不同種類的對(duì)象 【分區(qū)展示，分區(qū)管理，分區(qū)操作】，最大限度的保證交互界面的簡(jiǎn)潔舒適，且分類也能讓用戶更好的“點(diǎn)對(duì)點(diǎn)”進(jìn)行操作，節(jié)省尋找對(duì)應(yīng)操作對(duì)象的時(shí)間，所以，分類思維 是目前作為交互設(shè)計(jì)師的一項(xiàng)必不可少的技能了。
產(chǎn)品體驗(yàn)：
在剪映APP中，當(dāng)用戶選中特效，系統(tǒng)會(huì)自動(dòng)播放【特效預(yù)覽效果】，且自動(dòng)暫停（如特效時(shí)長(zhǎng)3s，那么系統(tǒng)播放完3s特效效果后會(huì)自動(dòng)暫停，不會(huì)繼續(xù)播放）
用戶可以直接了當(dāng)?shù)夭榭刺匦c畫面融合的效果，而不用選中后，再點(diǎn)擊播放預(yù)覽效果，覺(jué)得效果不滿意，還得反復(fù)切換。這種交互方式，大大節(jié)省了用戶的選擇模版時(shí)間，讓其成為（選擇+預(yù)覽=選中） 的高效交互流程
設(shè)計(jì)思考：
在我們?cè)O(shè)計(jì)一些需要實(shí)時(shí)預(yù)覽的功能時(shí)，我們不妨參考一下剪映的（選擇+預(yù)覽=選中）的高效交互流程，讓用戶免去反復(fù)操作預(yù)覽，重復(fù)選擇的無(wú)效交互，提升用戶在工具型APP的內(nèi)容輸出效率
產(chǎn)品體驗(yàn)：
當(dāng)用戶在剪映中喚起濾鏡功能列表時(shí)，難免會(huì)感到驚訝，以及提出疑問(wèn)：“為什么剪映要用單行瀏覽這種低效的交互方式？”
但是只要你仔細(xì)思考，并付出實(shí)踐你就會(huì)明白，剪映在濾鏡列表中，使用單行瀏覽的原因。
因?yàn)橛脩魧?duì)濾鏡的選擇，是出于此濾鏡的畫面效果，所以展示濾鏡效果時(shí)，濾鏡效果圖的比例大小是否清晰顯得尤為重要，所以，剪映犧牲了一些瀏覽效率，但是大大保證了用戶對(duì)此濾鏡的瀏覽精讀。
另外，濾鏡列表不同于特效列表，具有大量重復(fù)圖片填充。濾鏡幾乎每張?zhí)畛涞膱D片都是有所不同的，所以使用多行列表式排列，在多種不同顏色，不同風(fēng)格的圖片填充下，畫面會(huì)變得雜亂不堪
設(shè)計(jì)思考：
當(dāng)我們遇到，填充圖片風(fēng)格各異、或者注重展示畫面的列表設(shè)計(jì)時(shí)，可以參考剪映，犧牲一下瀏覽效率，保證瀏覽舒適度，精讀的設(shè)計(jì)方式，來(lái)防止我們?cè)O(shè)計(jì)的列表在視覺(jué)交互上顯得雜亂無(wú)章
作者：堅(jiān)行 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
追波年度最佳作品來(lái)自大家最熟悉的UI8團(tuán)隊(duì)中的Tran Mau Tri Tam ?，作者來(lái)自越南西貢，最佳作品截止目前355K瀏覽量，2933個(gè)贊。
為什么看似平平無(wú)奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個(gè)網(wǎng)頁(yè)與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕，你可以理解它就是一個(gè)平面作品，一個(gè)字體加幾何形體構(gòu)建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標(biāo)題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標(biāo)題文字中脫穎而出，這種使用線條突出重要信息的設(shè)計(jì)也是今年追波設(shè)計(jì)流行趨勢(shì)之一。
MetroUI是Windows8的界面設(shè)計(jì)語(yǔ)言，在2010年至2013年間曾經(jīng)風(fēng)靡一時(shí)，那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年，現(xiàn)在國(guó)家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng)To B 、To G 的發(fā)展元年，通過(guò)幾何色塊（MetroUI）實(shí)現(xiàn)B端產(chǎn)品與C端設(shè)計(jì)風(fēng)格的傳承與銜接，你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng)，毛玻璃的多彩高斯模糊漸變風(fēng)，年度作品當(dāng)之無(wú)愧。
最后來(lái)看下按鈕的設(shè)計(jì)，正常的按鈕要么文字加色塊，要么左圖標(biāo)加右文字，它設(shè)計(jì)成左文本加右圖標(biāo)，更加注重信息的可讀性和易讀性，也體現(xiàn)B端設(shè)計(jì)重功能和交互體驗(yàn)，視覺(jué)點(diǎn)到為止的設(shè)計(jì)理念。
下面我們來(lái)欣賞年度最佳作品里面的流行趨勢(shì)吧。
字體三原則：可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章，肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上，不能過(guò)于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān)，因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí)，不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感，更加適合用戶閱讀。
通過(guò)給用戶制作停頓感來(lái)增加用戶的易讀性?？梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來(lái)更好的理解文本內(nèi)容，豐富文本內(nèi)涵。比如情侶間表達(dá)愛(ài)意時(shí)會(huì)輸入文本，“我愛(ài)你”、“我Love你”、“我ai你”、“我??你”，哪個(gè)更加會(huì)有情感共鳴呢？不言而喻，相信你心中已經(jīng)有答案了。
在標(biāo)題文字上添加曲線來(lái)突出重要文案是2021追波最流行的趨勢(shì)之一，第一個(gè)設(shè)計(jì)目的就是突顯文字，其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺(jué)。之前很多帶有簽名的設(shè)計(jì)中，簽字的文本都是手寫體的感覺(jué)，手寫體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息，也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。
除了突顯文本外，曲線還有視覺(jué)引導(dǎo)的作用。通過(guò)視覺(jué)引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測(cè)試，通過(guò)真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。
多彩高斯?jié)u變風(fēng)是從色彩的角度來(lái)傳達(dá)和豐富畫面的，多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過(guò)程，多彩漸變多為冷暖對(duì)比來(lái)制造畫面的沖突，需要控制冷暖畫面的大小來(lái)實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新，給用戶呈現(xiàn)一種更加新穎的視覺(jué)表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上，為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺(jué)風(fēng)格。
B端設(shè)計(jì)的火爆帶動(dòng)了B端相關(guān)模塊設(shè)計(jì)，更多的人也愿意嘗試B端相關(guān)模塊設(shè)計(jì)，側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng)，好的側(cè)邊欄設(shè)計(jì)能為用戶帶來(lái)更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì)，而是一套實(shí)用美觀可落地的設(shè)計(jì)。
儀表盤設(shè)計(jì)是一個(gè)很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺(tái)界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài)，大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù)，團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長(zhǎng)等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同，自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài)，需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。
復(fù)雜的事情簡(jiǎn)單化，簡(jiǎn)單的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情流程化，流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù)，可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計(jì)的難點(diǎn)，需要對(duì)業(yè)務(wù)高度抽象，讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。
B端C化是B端產(chǎn)品設(shè)計(jì)的視覺(jué)表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計(jì)的視覺(jué)靠齊，國(guó)內(nèi)B端產(chǎn)品界面設(shè)計(jì)視覺(jué)水平還有很大的提高空間。除了視覺(jué)上的提升外，由于業(yè)務(wù)的發(fā)展，B端產(chǎn)品也開始移動(dòng)化、智能化，國(guó)內(nèi)主流還是通過(guò)小程序、H5來(lái)現(xiàn)實(shí)B端產(chǎn)品C端化。
輕代碼化是一種低代碼賦能無(wú)代碼的方式，彌補(bǔ)無(wú)代碼拓展性差、覆蓋場(chǎng)景少的問(wèn)題。在保有無(wú)代碼靈活、易用、快捷的同時(shí)，又能覆蓋低代碼使用場(chǎng)景。簡(jiǎn)單理解就是無(wú)需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng)，輕松實(shí)現(xiàn)多元業(yè)務(wù)場(chǎng)景的數(shù)字化管理。
輕代碼化將功能進(jìn)行打包，升級(jí)成全局可以用的配置，技術(shù)人員配置好后，業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版，綁定對(duì)應(yīng)的變量即可使用。
為什么人加色塊的組合方式能流行起來(lái)？還是B端行業(yè)流行帶動(dòng)的。B端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外，還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。
當(dāng)然企業(yè)也需要進(jìn)行營(yíng)銷，抓人眼球。幾千年來(lái)的遺傳證明了，人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營(yíng)銷的功能。真可謂一舉兩得。
這種風(fēng)格更適合大公司，國(guó)內(nèi)的一些手機(jī)廠商OPPO、VIVO等也會(huì)通過(guò)手機(jī)+背景+人物來(lái)體現(xiàn)科技與人文的結(jié)合，而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應(yīng)當(dāng)下UI扁平化的設(shè)計(jì)趨勢(shì)。蘋果Mac OS Big Sur系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個(gè)技法”，完全能滿足UI設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是Mac用戶可以享有OC一年免費(fèi)的使用權(quán)，具體安裝購(gòu)買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物這幾年一直流行，在UI設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物，其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺(jué)感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光（環(huán)境光）五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡(jiǎn)潔的畫面中，扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中，比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡(jiǎn)單且出彩。
簡(jiǎn)潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則，在B端產(chǎn)品界面中更加需要簡(jiǎn)潔設(shè)計(jì)，我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮?jiǎn)潔了?；氐浆F(xiàn)實(shí)當(dāng)需求功能不斷增加，產(chǎn)品界面的編排如何取舍，如何保證界面的簡(jiǎn)潔是設(shè)計(jì)師需要深度思考的問(wèn)題？如何與上級(jí)溝通？該功能是否可做可不做？是否需要埋點(diǎn)用數(shù)據(jù)說(shuō)話？如果只是一味競(jìng)品有我們就需要有，功能不斷累加只會(huì)讓界面越來(lái)越重。
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，產(chǎn)品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個(gè)整體。B端產(chǎn)品視覺(jué)設(shè)計(jì)C端化的進(jìn)程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產(chǎn)品的視覺(jué)設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。
幾何圖形另一個(gè)場(chǎng)景化的地方就是品牌，作為一名UI設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過(guò)程，品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主，至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。
暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長(zhǎng)增大，如何在夜晚這個(gè)特定場(chǎng)景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設(shè)計(jì)暗黑主題時(shí)，不能為了突顯視覺(jué)上的逼格，而去使用高飽和度鮮艷的色彩來(lái)突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計(jì)準(zhǔn)則，即正文和背景之間的對(duì)比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì)，可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”（Figma、Sketch、XD、Chrome插件）用來(lái)測(cè)試界面的對(duì)比度。
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁(yè)面來(lái)快速的搭建界面，但在B端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一，它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分，也就是幾個(gè)模塊，每一部分都是具有獨(dú)立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產(chǎn)品族中可以重用和互換，相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過(guò)模塊的組合配置，就可以創(chuàng)建不同需求的產(chǎn)品，滿足客戶的定制需求 。
插畫作為設(shè)計(jì)的一大品類，不同的插畫師都有自己擅長(zhǎng)的風(fēng)格，本質(zhì)是都有自己的個(gè)性，但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來(lái)講故事，表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合，插畫不會(huì)過(guò)時(shí)，而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。
幾何插畫算是插畫簡(jiǎn)化的一種表現(xiàn)形式，人和物的形態(tài)不再寫實(shí)，而是抽象成幾何圖形拼湊的感覺(jué)，同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn)，傳達(dá)出簡(jiǎn)潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上，平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。
線面插畫最近一兩年非常流行，準(zhǔn)確的說(shuō)是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來(lái)，這時(shí)候用線條簡(jiǎn)單勾勒后，結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí)，可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí)，還能保持界面的干凈整潔。
界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì)，微交互和動(dòng)效設(shè)計(jì)是繞不開的，UI界面設(shè)計(jì)通過(guò)微交互反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒，取悅用戶。C端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了，一部分功勞來(lái)自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品，還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值，共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。
Mg動(dòng)畫需要很好的節(jié)奏感、韻律，每一個(gè)場(chǎng)景動(dòng)畫都需要其中的元素進(jìn)行連接變化，讓轉(zhuǎn)場(chǎng)動(dòng)畫更加自然，MG人物動(dòng)畫通過(guò)點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然，通過(guò)粒子效果讓特定場(chǎng)景無(wú)限循環(huán)會(huì)讓人更加印象深刻。
MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行，三維圖標(biāo)的應(yīng)該場(chǎng)景還是需要有較大留白空間的界面，因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺(jué)又回到了擬物化和扁平化哪個(gè)更好的問(wèn)題上？設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合，存在即合理。合適最重要，它們都會(huì)有適合自己的場(chǎng)景和設(shè)計(jì)價(jià)值。
為什么輕三維在界面設(shè)計(jì)中占有一席之位？一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容，并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來(lái)自手機(jī)界面中的各種元素，比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等，這些都是用戶日常使用系統(tǒng)軟件常見(jiàn)的元素，通過(guò)簡(jiǎn)單的幾何形體建?！驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角，結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加，特別是當(dāng)下流行的毛玻璃效果，玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光，局部的漸變色或環(huán)境光更佳出彩。
P4D是PS加C4D的設(shè)計(jì)表現(xiàn)技法，也是視覺(jué)設(shè)計(jì)的最后一個(gè)環(huán)節(jié)，通過(guò)PS對(duì)C4D的渲染圖片進(jìn)行調(diào)色，利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強(qiáng)大的合成功能，將渲染圖片與圖片素材進(jìn)行合成，來(lái)表現(xiàn)畫面的視覺(jué)度，當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果，也可以通過(guò)PS的后期合成來(lái)實(shí)現(xiàn)，這也是P4D的強(qiáng)大之處。
卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟，卡通IP也從傳統(tǒng)的純PS手繪技法，轉(zhuǎn)到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態(tài)）/AE（動(dòng)態(tài)）調(diào)色。
卡通IP火的本質(zhì)更適合做營(yíng)銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱，受互聯(lián)網(wǎng)大廠影響下，卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒(méi)有這樣能力的人，也可以通過(guò)繪制好二維，一套三維可以選擇外包完成。
對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)學(xué)習(xí)是有成本的，暫時(shí)并不是必備技能，如果喜歡完全可以學(xué)習(xí)，從設(shè)計(jì)差異化的角度來(lái)看三維視覺(jué)確實(shí)有一定的競(jìng)爭(zhēng)力。
C4D三維場(chǎng)景動(dòng)畫通過(guò)構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景，會(huì)讓用戶體驗(yàn)真實(shí)感，三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過(guò)動(dòng)力學(xué)和表達(dá)式來(lái)模擬真實(shí)感，未來(lái)在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫中C4D軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢(shì)。
作者：水手哥。 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
設(shè)計(jì)過(guò)程被描述為多個(gè)階段，每個(gè)階段都包含不同的活動(dòng)來(lái)完成該階段，它沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)流程，每個(gè)公司和設(shè)計(jì)師都有自己的流程版本。
盡管存在多個(gè)流程，但一般流程和階段類似于以下內(nèi)容:
了解問(wèn)題：初步了解問(wèn)題。觀察、采訪和傾聽(tīng)用戶。
定義問(wèn)題：解釋和定義要解決的問(wèn)題。
構(gòu)思：通過(guò)頭腦風(fēng)暴產(chǎn)生盡可能多的想法。
原型設(shè)計(jì)：構(gòu)建原型并與其他人分享（ 再次縮小解決方案空間，為實(shí)驗(yàn)階段 ）。
測(cè)試：測(cè)試可能的解決方案、實(shí)施、改進(jìn)或重新設(shè)計(jì)。
傳統(tǒng)的問(wèn)題解決采取有條不紊而又科學(xué)的形式。該過(guò)程從一個(gè)問(wèn)題開始，定義要采取的步驟以及達(dá)到解決方案的工具或方法。
設(shè)計(jì)思維是一種創(chuàng)造性的策略，可以產(chǎn)生創(chuàng)造性的未來(lái)結(jié)果和/或創(chuàng)造性的問(wèn)題解決方式，它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。
它通常被描述為一種創(chuàng)造性、主觀和感性的對(duì)許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創(chuàng)造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設(shè)計(jì)思維來(lái)源于常規(guī)問(wèn)題解決方法，常規(guī)問(wèn)題解法是設(shè)計(jì)思維的基礎(chǔ)。
從解決問(wèn)題到設(shè)計(jì)思維，Liedtka (2013)
結(jié)果發(fā)現(xiàn)，設(shè)計(jì)思維實(shí)際上也是一個(gè)解決問(wèn)題的過(guò)程，而不僅僅是一個(gè)創(chuàng)新過(guò)程（ 利特卡，2013）
一個(gè)例子是，豐田采用設(shè)計(jì)思維從頭開始分析其西海岸的一個(gè)客戶聯(lián)絡(luò)中心，在重新設(shè)計(jì)過(guò)程中，組建了一個(gè)由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊(duì)，這一舉動(dòng)最終改變了客戶和員工的服務(wù)中心體驗(yàn)。
我們每天都會(huì)遇到問(wèn)題，但是當(dāng)我們解決同樣的問(wèn)題時(shí)，它們就成了例行公事（ 似乎已經(jīng)忘記它們是問(wèn)題了 ），我們甚至都沒(méi)有意識(shí)到正在解決這些問(wèn)題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達(dá)那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達(dá)辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語(yǔ)：“設(shè)計(jì)思維”，并將多年來(lái)醞釀的方法和想法封裝成一個(gè)統(tǒng)一的概念。
設(shè)計(jì)思維是以人為中心、開放式、基于問(wèn)題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式，而工程師處理和解決問(wèn)題的方式有其設(shè)計(jì)思維的基礎(chǔ)。
設(shè)計(jì)思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設(shè)計(jì)思維?！?他描述工程師和建筑師處理問(wèn)題的方法有很大不同。
90 年代初，認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊(duì)，擔(dān)任他們的用戶體驗(yàn)架構(gòu)師，這使他成為第一個(gè)在職位中包含 UX 的人。他提出了“用戶體驗(yàn)設(shè)計(jì)”這個(gè)術(shù)語(yǔ)，因?yàn)樗搿昂w人們對(duì)系統(tǒng)體驗(yàn)的所有方面，包括工業(yè)設(shè)計(jì)、圖形、界面、物理交互和手冊(cè)?！?從那時(shí)起，這些領(lǐng)域中的每一個(gè)都將用戶體驗(yàn)，擴(kuò)展到了自己的專業(yè)領(lǐng)域。
設(shè)計(jì)思維在解決“棘手問(wèn)題”時(shí)特別有用。
棘手問(wèn)題的特征
“棘手問(wèn)題”一詞是由設(shè)計(jì)理論家 Horst Rittel 在 1972 年創(chuàng)造的，用來(lái)描述本質(zhì)上非常模糊 \ 特別棘手的問(wèn)題。棘手問(wèn)題，有很多未知因素，沒(méi)有確定的解決方案。問(wèn)題或解決方案可能與另一個(gè)棘手的問(wèn)題有關(guān)，因此這是一個(gè)需要設(shè)計(jì)思維的持續(xù)過(guò)程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問(wèn)題。
設(shè)計(jì)主題的范圍是普遍的，因?yàn)?設(shè)計(jì)思維可以應(yīng)用于人類經(jīng)驗(yàn)的任何領(lǐng)域。
它可以用于：
符號(hào)和視覺(jué)傳達(dá)：這包括平面設(shè)計(jì)的傳統(tǒng)工作，如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計(jì)算機(jī)顯示。
材料：這包括對(duì)日常用品的形式和視覺(jué)外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車輛。
人類活動(dòng)和組織性服務(wù)：包括對(duì)物流的傳統(tǒng)管理關(guān)注，結(jié)合物質(zhì)資源、工具和人類低效的序列和時(shí)間表，以達(dá)到特定的目標(biāo)。
復(fù)雜的系統(tǒng)或環(huán)境：生活、工作、娛樂(lè)和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點(diǎn)，或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。
設(shè)計(jì)思維起源于設(shè)計(jì)師的培訓(xùn)和專業(yè)實(shí)踐，但這些原則可以被每個(gè)人實(shí)踐并擴(kuò)展到每個(gè)活動(dòng)領(lǐng)域。（布朗，2013 年）
在企業(yè)中，設(shè)計(jì)過(guò)程可以為企業(yè)環(huán)境中的問(wèn)題解決帶來(lái)創(chuàng)新思維。它還可以用于醫(yī)療保健，通過(guò)向護(hù)士、醫(yī)生和管理人員教授設(shè)計(jì)思維技術(shù)，我們可以激勵(lì)相關(guān)從業(yè)者貢獻(xiàn)新的想法。
不管是什么設(shè)計(jì)，理解和研究問(wèn)題是必不可少的，因?yàn)槲覀兡軌驈钠涑霭l(fā)，從而進(jìn)行以用戶為中心的設(shè)計(jì)。
設(shè)計(jì)思維的最早階段是搞懂你能帶來(lái)的情感價(jià)值。設(shè)計(jì)思維方法迫使你停留在提問(wèn)與質(zhì)疑階段，而不是準(zhǔn)確定義出問(wèn)題后進(jìn)入下一階段。我們都有過(guò)快進(jìn)入解決方案模式的傾向，所以設(shè)計(jì)思維方法迫使你真實(shí)地存在于這個(gè)不清楚、有時(shí)還非常混亂的時(shí)刻，從而使你對(duì)要解決的問(wèn)題產(chǎn)生更好的理解。（利特克，2013）
傳統(tǒng)的問(wèn)題解決涉及提出一個(gè)解決方案，但設(shè)計(jì)思維首先使我們發(fā)散，試圖為問(wèn)題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據(jù)利特卡和奧美 (2011) 的說(shuō)法，設(shè)計(jì)思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問(wèn)題的方法。正如我們思考創(chuàng)造力一樣，即使是設(shè)計(jì)思維也可以通過(guò)實(shí)踐來(lái)教授和改進(jìn)。
設(shè)計(jì)過(guò)程從來(lái)都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設(shè)計(jì)師試圖將問(wèn)題與過(guò)去的類似案例聯(lián)系起來(lái)。如果這種方法不能提供任何解決方案，下一步就是使用知識(shí)和創(chuàng)造力作為一種實(shí)驗(yàn)思維形式來(lái)產(chǎn)生新的想法。使用決策矩陣對(duì)這些想法進(jìn)行評(píng)估，從而會(huì)產(chǎn)生被進(jìn)一步分析和測(cè)試的解決方案。如果成功，它將被實(shí)施。如果不成功，則需要重新表述問(wèn)題，并重復(fù)該過(guò)程。這是一個(gè)迭代過(guò)程，即循環(huán)方法。
這一持續(xù)不斷的重新再設(shè)計(jì)過(guò)程，源于和客戶親密接觸的洞察。
學(xué)習(xí)設(shè)計(jì)思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著：學(xué)習(xí)收集和分析大量數(shù)據(jù)；學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么；學(xué)習(xí)管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進(jìn)行的研究類型分為三類：生成性研究、評(píng)估性研究和驗(yàn)證性研究。
一種常見(jiàn)的表述 —— 實(shí)際上是設(shè)計(jì)思維的另一種視角 —— 即設(shè)計(jì)師應(yīng)該預(yù)料到會(huì)“很快失敗或經(jīng)常失敗”（布朗，2009）。
當(dāng)過(guò)程早期發(fā)生故障時(shí)，例如被拒絕的原型，實(shí)質(zhì)上它可以為有效解決方案提供關(guān)鍵見(jiàn)解。這種觀點(diǎn)與傳統(tǒng)的先形成理論，再檢驗(yàn)正誤的方式相矛盾。
Airbnb、Braun 和百事可樂(lè)等多元化公司都在 采用設(shè)計(jì)思維并將其作為核心戰(zhàn)略。例如，IBM 為全球旗下的 44 個(gè)設(shè)計(jì)工作室聘請(qǐng)了 1600 名設(shè)計(jì)師，并且正在培訓(xùn)數(shù)以萬(wàn)計(jì)的設(shè)計(jì)師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )
設(shè)計(jì)思維為我們解決問(wèn)題添加了以人為本的元素。當(dāng)我們?cè)噲D通過(guò)牢記人們的想法來(lái)解決問(wèn)題，并使用基于直接觀察乃至訪談的研究時(shí)，我們便會(huì)捕捉到與消費(fèi)者需求一致的意外見(jiàn)解和創(chuàng)新。
它有助于將成功的產(chǎn)品更快地推向市場(chǎng)，最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計(jì)思維實(shí)踐，通過(guò)有效使用設(shè)計(jì)和設(shè)計(jì)思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計(jì)算出的 ROI 超過(guò) 300%。
由于復(fù)雜的問(wèn)題從來(lái)不能被所有人完全理解，因此在嘗試設(shè)計(jì)解決方案時(shí)，處理歧義和多個(gè)并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。
設(shè)計(jì)思維通過(guò)綜合和歸納思維，幫助實(shí)現(xiàn)質(zhì)的飛躍。它允許通過(guò)解構(gòu)來(lái)測(cè)試約束，并允許通過(guò)多樣性思維和批評(píng)思維，來(lái)?yè)肀Ш吞剿髌缌x。
消費(fèi)者通常不知道他們有什么問(wèn)題需要解決，或者他們無(wú)法用語(yǔ)言表達(dá)出來(lái)。只有經(jīng)過(guò)仔細(xì)觀察，設(shè)計(jì)者才能根據(jù)真實(shí)消費(fèi)者行為中看到的東西來(lái)識(shí)別問(wèn)題，而不是簡(jiǎn)單地根據(jù)對(duì)消費(fèi)者的想法來(lái)確定問(wèn)題。這有助于定義模棱兩可的問(wèn)題，并找到解決方案。
該方法鼓勵(lì)“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見(jiàn)的事物并采用更具實(shí)驗(yàn)性的方法。
在早期的流程階段鼓勵(lì)大膽的想法，以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計(jì)師可以嘗試開發(fā)新的不受約束的思維方式，或?qū)ΤＲ?jiàn)問(wèn)題的創(chuàng)新解覺(jué)方法。
根據(jù)大多數(shù)設(shè)計(jì)學(xué)院的說(shuō)法，具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計(jì)思維的作用。
同理心：從多個(gè)角度想象世界 —— 同事、甲方客戶、實(shí)際使用者和消費(fèi)者的角度。要成為更好的同理心，必須傾聽(tīng)和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺(jué)。
樂(lè)觀：除非你相信有解決方案，否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時(shí)，你可能會(huì)放棄。
實(shí)驗(yàn)主義：重大創(chuàng)新并非來(lái)自漸進(jìn)式調(diào)整。設(shè)計(jì)思想家以創(chuàng)造性的方式提出問(wèn)題并探索限制因素，并朝著全新的方向發(fā)展。
協(xié)作：產(chǎn)品、服務(wù)和體驗(yàn)日益復(fù)雜，因此必須擁有一支具有不同背景的團(tuán)隊(duì)，以幫助從多個(gè)角度看待問(wèn)題。
當(dāng)我們想到一個(gè)問(wèn)題的多種解決方案時(shí)，對(duì)我們解決問(wèn)題會(huì)非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問(wèn)題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡(jiǎn)單的彈簧門鎖。
為了幫助設(shè)計(jì)師利用文科和技術(shù)理論，整合多個(gè)領(lǐng)域的知識(shí)以找到創(chuàng)新的解決方案，我們采用設(shè)計(jì)思維來(lái)獲得洞察力。該方法側(cè)重于可視化和操作，因而幫助我們更容易地了解實(shí)際解法，而不僅僅是理論模型。
第一批美國(guó)公司在 2000 年代初期開始實(shí)施設(shè)計(jì)思維，這一概念引起了德國(guó)投資者 Hasso Plattner 的興趣，他于 2006 年資助創(chuàng)建了兩所設(shè)計(jì)學(xué)校（d.schools），其中一所位于波茨坦大學(xué)（德國(guó)），另一所位于美國(guó)斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計(jì)思維培訓(xùn)，因此該研究重點(diǎn)關(guān)注這些國(guó)家，以尋找早期實(shí)施者。
設(shè)計(jì)思維通常涉及希望參與整個(gè)設(shè)計(jì)和開發(fā)過(guò)程的龐大利益相關(guān)者團(tuán)隊(duì)。
觀點(diǎn)、才能和經(jīng)驗(yàn)的多樣性被認(rèn)為是注入新思維的部分重要來(lái)源。多樣性確保通過(guò)融合不同的觀點(diǎn)、技能和知識(shí)來(lái)產(chǎn)生創(chuàng)意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設(shè)計(jì)思維的協(xié)作方法和工具可幫助團(tuán)隊(duì)以積極的方式利用他們的差異。
決策是平等的，因?yàn)槊總€(gè)成員的意見(jiàn)都被征求和使用（卡爾格倫等，2016）。
當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時(shí)，它不是什么花哨的設(shè)備，而是一個(gè)用膠帶粘起來(lái)的原型。
低保真原型制作起來(lái)既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗(yàn)證、廉價(jià)試錯(cuò)的原則。為每個(gè)想法投入盡可能少的資源意味著前期投入的時(shí)間和金錢更少。此外，將多個(gè)原型帶到現(xiàn)場(chǎng)進(jìn)行測(cè)試為用戶提供了比較的基礎(chǔ)參考，同時(shí)也有助于揭示某些需求。
為了創(chuàng)新，設(shè)計(jì)思維意識(shí)到認(rèn)知和行動(dòng)對(duì)創(chuàng)新過(guò)程很重要。認(rèn)知包括接受度、樂(lè)觀和創(chuàng)造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動(dòng)包括快速原型設(shè)計(jì)、旅程地圖和假設(shè)浮現(xiàn)（ 假設(shè)浮現(xiàn)：assumption surfacing，這是一種評(píng)估技術(shù)，涉及寫出潛在的假設(shè)和反假設(shè)。）（ 卡爾格倫等，2016；利特卡，2015）
如果領(lǐng)導(dǎo)層不歡迎風(fēng)險(xiǎn)、模棱兩可和風(fēng)格的改變，實(shí)施起來(lái)就會(huì)變得更加困難。它會(huì)被管理者“質(zhì)疑”其具體指標(biāo)
沃爾特斯 ( 2011 ) 聲稱，由于設(shè)計(jì)思維的模糊性，它與組織文化相沖突。
據(jù)受訪者稱，在日常業(yè)務(wù)中使用設(shè)計(jì)思維之所以不會(huì)是最優(yōu)選項(xiàng)， 因?yàn)樗琴Y源密集型的，增加了工作量。（ 麗莎等，2016）
在醫(yī)療保健等規(guī)避風(fēng)險(xiǎn)的行業(yè)和公司中，“經(jīng)常和早點(diǎn)失敗”的方法被認(rèn)為是非常困難的。
許多設(shè)計(jì)師反對(duì)設(shè)計(jì)思維這一觀點(diǎn)，設(shè)計(jì)思維不僅關(guān)乎一個(gè)過(guò)程，而且關(guān)乎改變思維過(guò)程并提高人們可能提出的解決方案的創(chuàng)造力。
“設(shè)計(jì)思維”的推廣已被大型全球公司用來(lái)增加業(yè)務(wù)。不過(guò)，在更廣泛的設(shè)計(jì)世界中，我甚至?xí)f(shuō)“設(shè)計(jì)思維”的過(guò)度宣傳導(dǎo)致了所提供設(shè)計(jì)質(zhì)量的下降?！?Yasushi Kusume
弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會(huì)助理教授 Lee Vinsel 在《設(shè)計(jì)思維運(yùn)動(dòng)是荒謬的》中寫道，“歸根結(jié)底，設(shè)計(jì)思維與設(shè)計(jì)無(wú)關(guān)。這與文科無(wú)關(guān)。這與任何有意義的創(chuàng)新無(wú)關(guān)。如果這意味著重大的社會(huì)變革，那肯定不是關(guān)于“社會(huì)創(chuàng)新”。這是關(guān)于商業(yè)化的?！?
觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動(dòng)，可以為你提供有關(guān)人們想法和感受的線索。
你可能認(rèn)為你知道問(wèn)題所在，但只有通過(guò)觀察才能了解消費(fèi)者真正需要什么。
宜家派設(shè)計(jì)師到人們家中，觀測(cè)他們的互動(dòng)行為來(lái)了解他們的需求。這將使設(shè)計(jì)者能夠推斷這些經(jīng)歷的無(wú)形含義，以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實(shí)上，最好的解決方案來(lái)自于對(duì)人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會(huì)服務(wù)機(jī)構(gòu)。起初的問(wèn)題似乎是設(shè)計(jì)不當(dāng)?shù)纳攀巢藛?。然后設(shè)計(jì)思維揭示了無(wú)數(shù)問(wèn)題，所有問(wèn)題都源于服務(wù)本身的性質(zhì)。因此，經(jīng)由對(duì)服務(wù)進(jìn)行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
作者：用盡晴天來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
對(duì)話框是一種重要的交互方式，主要用于完成信息傳遞。對(duì)話框很常見(jiàn)，但并不見(jiàn)得每一個(gè)設(shè)計(jì)師都可以百分百地弄明白對(duì)話框這個(gè)概念。這篇文章是對(duì)「對(duì)話框」的一個(gè)簡(jiǎn)單梳理和總結(jié)，希望可以解決大家心中的一些疑惑。
01
了解對(duì)話框
對(duì)話框是疊加在應(yīng)用主窗口上的彈出式的窗口。對(duì)話框以對(duì)話的方式讓用戶參與進(jìn)來(lái)，在對(duì)話中它給出消息或要求輸入。
當(dāng)用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對(duì)話框，之后，這個(gè)對(duì)話框便消失了，把應(yīng)用的主窗口交還給用戶。
關(guān)于對(duì)話框的概念，以下是百度百科的解釋：
對(duì)話框越來(lái)越廣泛地被應(yīng)用于軟件、網(wǎng)頁(yè)、以及移動(dòng)設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個(gè)特定的操作 。
按照對(duì)話框的交互方式，可將其分為「模態(tài)[1]對(duì)話框」和「非模態(tài)對(duì)話框」。我們可以把他們看作是兩個(gè)小家族，模態(tài)家族的人比較強(qiáng)硬，而非模態(tài)家族的人相對(duì)溫柔一點(diǎn)。兩個(gè)家族的主要區(qū)別：是否強(qiáng)制用戶對(duì)其進(jìn)行回應(yīng)。
模態(tài)對(duì)話框：是位于瀏覽器的主頁(yè)面核心區(qū)域，需要用戶對(duì)它做出相應(yīng)交互，模態(tài)才會(huì)消失。而對(duì)話框會(huì)因?yàn)樽陨淼奈潭?、停留時(shí)間、信息量承載多少被劃分為多種對(duì)話框類型進(jìn)行區(qū)分，常見(jiàn)的對(duì)話框分別為：普通對(duì)話框、內(nèi)嵌表單對(duì)話框、分步表單對(duì)話框、文件選擇對(duì)話框、復(fù)雜信息展示對(duì)話框。
△ 何時(shí)使用模態(tài)對(duì)話框
1）在重要的警告時(shí)使用，避免出現(xiàn)嚴(yán)重問(wèn)題、或修正已出現(xiàn)的問(wèn)題。
例如：用戶錄入信息后未保存就要關(guān)閉時(shí)，彈出模態(tài)對(duì)話框提示用戶保存。
2）在需要用戶輸入信息或進(jìn)行某操作，才能繼續(xù)當(dāng)前流程的時(shí)候使用。
例如：在使用Canva資源網(wǎng)站時(shí)，點(diǎn)擊“上傳”會(huì)彈出模態(tài)化的登錄/注冊(cè)窗口，引導(dǎo)登錄/注冊(cè)后使用。
3）用來(lái)將復(fù)雜流程拆分成簡(jiǎn)單步驟。
例如：Teambition-分步驟的模態(tài)對(duì)話框式創(chuàng)建項(xiàng)目。
4）用來(lái)獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。
例如：在轉(zhuǎn)賬場(chǎng)景中，如果先復(fù)制一個(gè)賬號(hào)，打開手機(jī)銀行APP（以招商銀行或平安口袋銀行為例），系統(tǒng)會(huì)通過(guò)模式對(duì)話框詢問(wèn)用戶是否向這個(gè)賬號(hào)轉(zhuǎn)賬，這樣的設(shè)計(jì)做到了預(yù)判用戶行為，節(jié)省用戶后面的操作成本。
非模態(tài)對(duì)話框：與模態(tài)完全相反，它更加溫和，不會(huì)強(qiáng)制打斷用戶正在進(jìn)行的現(xiàn)有流程，對(duì)用戶的干擾比較小。通常這類對(duì)話框只會(huì)在屏幕上短暫停留，幾秒就會(huì)消失，也因此用戶容易忽略它們的存在。因此非模態(tài)對(duì)話框不適合展示重要信息、不能承載大量文案，常見(jiàn)的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。
△ 何時(shí)使用非模態(tài)對(duì)話框
1）在獲取與當(dāng)前流程不必要信息的時(shí)候使用。
例如：平安口袋銀行和平安數(shù)字口袋采用氣泡卡片展示更多功能或引導(dǎo)用戶登錄。
2）不打斷重要流程中使用。
例如：在平安口袋銀行APP中購(gòu)買理財(cái)時(shí)，如果遇到疑問(wèn)的話，不會(huì)彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購(gòu)買。
簡(jiǎn)單來(lái)說(shuō)，兩者的優(yōu)缺點(diǎn)見(jiàn)下表：
02
從前面講到的定義來(lái)看，對(duì)話框最主要的目的是：傳遞信息。那么從目標(biāo)導(dǎo)向的角度來(lái)看對(duì)話框，對(duì)話框要傳遞的信息的常見(jiàn)應(yīng)用場(chǎng)景主要有以下五種：
屬性對(duì)話框是向用戶呈現(xiàn)或讓用戶改變所選對(duì)象的屬性或者設(shè)置。一般來(lái)說(shuō)，在屬性對(duì)話框中，用戶可以修改當(dāng)前的選擇，也可以設(shè)置應(yīng)用程序的全局屬性。該對(duì)話框適用于非頻繁操作和或僅需要設(shè)置一次的屬性，屬性對(duì)話框常見(jiàn)在一些設(shè)置、詳情中。
例如：Windows 11系統(tǒng)的設(shè)置界面，可設(shè)置系統(tǒng)的全局屬性。
功能對(duì)話框通常從菜單中打開，是最常見(jiàn)的模態(tài)對(duì)話框，只控制單一功能，如打印、文件上傳/導(dǎo)入、插入對(duì)象或拼寫檢查。該對(duì)話框不僅允許用戶啟動(dòng)一個(gè)動(dòng)作，而且也允許用戶設(shè)置動(dòng)作的細(xì)節(jié)，屬于模態(tài)對(duì)話框。
例如：瀏覽器的打印功能，會(huì)彈出模態(tài)化的打印窗口，用戶可設(shè)置打印的細(xì)節(jié)。
例如：飛書的文檔導(dǎo)入功能，使用模態(tài)化對(duì)話框，引導(dǎo)用戶選擇文件類型或進(jìn)行批量導(dǎo)入操作。
進(jìn)度對(duì)話框是由應(yīng)用程序啟動(dòng)的，而不是由用戶請(qǐng)求而啟動(dòng)的。它們向用戶表明當(dāng)前應(yīng)用正在忙于某些內(nèi)部功能，其他功能的處理能力可能會(huì)降低。
每個(gè)進(jìn)度對(duì)話框都應(yīng)該向用戶清晰地展現(xiàn)如下信息：
例如：使用Axure軟件導(dǎo)出html文件時(shí)的進(jìn)度提示，既提醒用戶當(dāng)前Axure正在運(yùn)行，又告知用戶當(dāng)前文件導(dǎo)出進(jìn)度。
例如：使用Sketch軟件導(dǎo)出文件時(shí)的進(jìn)度提示
通知對(duì)話框?qū)⒁恍┲匾畔?bào)告給用戶。來(lái)源可以是一些觸發(fā)的事件，也可以是其他用戶的通知。
常見(jiàn)的有通知中心對(duì)話框，處理完成某個(gè)操作的告知等等。
例如：花瓣的通知提醒
例如：脈脈的隱私政策閱讀提示和汽車之家的開啟通知提示，均采用模態(tài)對(duì)話框方式。
公告對(duì)話框，和進(jìn)度對(duì)話框一樣，由應(yīng)用程序直接啟動(dòng)，不是由用戶請(qǐng)求發(fā)起的。公告對(duì)話框有三種：錯(cuò)誤、警告、確認(rèn)。
這種對(duì)話框通常不會(huì)要求用戶填寫什么，只會(huì)詢問(wèn)你“真的要進(jìn)行嗎？”或者告訴你一件事情。所以在這種對(duì)話框上，一般只會(huì)有只有[取消]和[確認(rèn)]，或者[OK]。
屬性、功能、進(jìn)度對(duì)話框，是用戶主動(dòng)請(qǐng)求的--它們?yōu)橛脩舴?wù)。但是，應(yīng)用程序發(fā)起的公告對(duì)話框--它們?yōu)閼?yīng)用程序服務(wù)，常常會(huì)犧牲用戶利益。由于公告對(duì)話框比較常見(jiàn)且常常犧牲用戶利益，那么我們?cè)趺窗堰@些討厭且無(wú)用的公告對(duì)話框直接鏟除掉，換成更加友好、能給用戶帶來(lái)真正幫助的交互方式呢？接下來(lái)我們來(lái)一起看看怎么讓公告對(duì)話框“名聲鵲起”。
03
我們可以從應(yīng)用本身和對(duì)話框本身著手提供友好的交互方式，減少公告對(duì)話框的出現(xiàn)頻率。
解決用戶錯(cuò)誤的方法不是指責(zé)用戶，讓用戶再認(rèn)真一些，或者給他們更多的指導(dǎo)練習(xí)，而應(yīng)該優(yōu)化應(yīng)用設(shè)計(jì)，讓犯錯(cuò)變得困難。
示例：登錄藍(lán)湖時(shí)的短信驗(yàn)證碼輸入框
示例：轉(zhuǎn)賬時(shí)輸入金額的數(shù)字鍵盤，金額大小的位數(shù)提示；平安口袋銀行的身份證號(hào)專屬鍵盤。
示例：輸錯(cuò)密碼是一個(gè)很難避免的錯(cuò)誤場(chǎng)景，語(yǔ)雀密碼登錄支持可見(jiàn)密碼，一來(lái)是考慮安全問(wèn)題，二來(lái)在用戶輸錯(cuò)的場(chǎng)景下可以打開眼睛，即可見(jiàn)密碼，減少出現(xiàn)錯(cuò)誤頻率。
示例：在支付寶聊天窗輸入一串?dāng)?shù)字，支付寶發(fā)現(xiàn)這個(gè)問(wèn)題后，提供了識(shí)別后直接轉(zhuǎn)賬的功能，預(yù)判了用戶的慣性，減少錯(cuò)誤發(fā)生。
Zoom - 拉會(huì)前預(yù)設(shè)值在加入會(huì)議室的界面，提前選擇是否在進(jìn)入會(huì)議房間后“不自動(dòng)連接語(yǔ)音”和“保持?jǐn)z像頭關(guān)閉”，有效避免忘記閉麥或者忘記關(guān)攝像頭就直接加入了線上會(huì)議的意外尷尬。
在很多破壞性的操作都會(huì)二次進(jìn)行提醒，讓用戶確認(rèn)操作，比如說(shuō)刪除操作。在刪除之前都會(huì)詢問(wèn)用戶“你真的要?jiǎng)h除嗎？”想一想……你在看到這些提示的時(shí)候，是不是眼疾手快地按下那個(gè)「確認(rèn)」按鈕？
這種對(duì)話框在沒(méi)有容錯(cuò)處理時(shí)，非常容易被我們這種無(wú)腦按「確認(rèn)」的用戶釀成大錯(cuò)。比如我“手賤”只是試試這個(gè)刪除，然后就把某個(gè)表幾千條辛苦寫了一個(gè)月的數(shù)據(jù)刪掉了，由此可見(jiàn)系統(tǒng)的容錯(cuò)處理有多么重要。
示例：Windows系統(tǒng)在早期的時(shí)候，刪除文件時(shí)會(huì)讓用戶進(jìn)行二次確認(rèn)，但這是完全沒(méi)必要的，因?yàn)閯h除文件不是真正的刪除，還會(huì)在回收站里面。
Mac系統(tǒng)：在回收站刪除文件將是永久性刪除，此時(shí)的確認(rèn)對(duì)話框才是對(duì)用戶有用的。
從對(duì)話框本身的設(shè)計(jì)優(yōu)化出發(fā)，我們可以對(duì)話框的使用場(chǎng)景和文案方面著手進(jìn)行優(yōu)化設(shè)計(jì)。
其實(shí)什么時(shí)候使用對(duì)話框、是否使用取決于你要給用戶展示的信息是否重要。
例如你在手機(jī)上買了一張電影票，支付失敗的結(jié)果如果用toast展示就會(huì)容易被用戶忽視。那么等到用戶到了電影院才發(fā)現(xiàn)自己購(gòu)買失敗，那么用戶極有可能當(dāng)場(chǎng)卸載你的產(chǎn)品。
模態(tài)彈框會(huì)打斷用戶當(dāng)前操作流程，所以「使用對(duì)話框要克制」?？傇瓌t是：能在界面展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框?？傊?，重要的信息優(yōu)先考慮使用對(duì)話框。
具體的使用原則有：
如果非要使用對(duì)話框，那么請(qǐng)使用友好尊重用戶的方式。當(dāng)我們說(shuō)到人與人之間的交流時(shí)，語(yǔ)言是重要的媒介，而用戶與產(chǎn)品之間同樣如此。
在設(shè)計(jì)過(guò)程中應(yīng)始終努力設(shè)計(jì)出有效的提示性文案，但是, 一定是有比沒(méi)有要好嗎？個(gè)人認(rèn)為也是不必要的，糟糕的提示性文案甚至?xí)茐漠a(chǎn)品中最好的用戶體驗(yàn)。例如以下幾種情況：
因此糟糕的提示文案設(shè)計(jì)會(huì)誤導(dǎo)用戶在產(chǎn)品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會(huì)破壞品牌對(duì)用戶的忠誠(chéng)度，產(chǎn)生本末倒置的結(jié)果， 也給用戶帶來(lái)不佳體驗(yàn)。
所以，語(yǔ)言是使產(chǎn)品更加人性化的主要因素。產(chǎn)品的文案則充當(dāng)了語(yǔ)言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機(jī)的功能性關(guān)系轉(zhuǎn)化成人類的個(gè)人情感體驗(yàn)。而這種用戶的情感體驗(yàn)才能夠真正的彰顯品牌個(gè)性，從而與其他產(chǎn)品區(qū)分開來(lái)。
△ 錯(cuò)誤提示設(shè)計(jì)三步法
總結(jié)：
對(duì)話框可以成為幫助用戶完成目標(biāo)的有用助手，而不是讓他們?cè)诿恳徊讲偈卮鞌〉目膳陆O腳石。通過(guò)保持對(duì)話框的可管理性，并且只有在他們的功能真的屬于另一個(gè)房間的情況下才調(diào)用他們，你將很好地維持用戶的工作流狀態(tài)，保證他們會(huì)成功完成任務(wù)，并且滿懷感激。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn