歷史長(zhǎng)廊

在早期，硬件設(shè)備落后，網(wǎng)頁使用的是絕對(duì)靜態(tài)布局為主，絕對(duì)固定寬度的布局被稱為是靜態(tài)布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后隨時(shí)代變遷，技術(shù)發(fā)展。因?yàn)g覽器的增多，開發(fā)者們忙于兼容各種瀏覽器。在這個(gè)期間，實(shí)際已經(jīng)有了針對(duì)各設(shè)備適配的解決方案，只是未成為主流，這種新布局方式叫自適應(yīng)布局（Adaptive Web Design，簡(jiǎn)稱AWD）。

在當(dāng)時(shí)，大多指的就是寬度自適應(yīng)布局。在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

在當(dāng)時(shí)，大家都還沒有響應(yīng)式布局的概念，但此時(shí)出現(xiàn)了一個(gè)新的詞–漸進(jìn)增強(qiáng)。漸進(jìn)增強(qiáng)出現(xiàn)后，另一個(gè)詞優(yōu)雅降級(jí)也隨之出現(xiàn)了。這里只是舉個(gè)典型的例子：gmail和qqmail。這兩個(gè)都是百分比寬度布局，都屬于自適應(yīng)布局，但有區(qū)別。

qqmail就是css hack的完美體現(xiàn)，你用任何一個(gè)瀏覽器，幾乎可以看到同一個(gè)樣子的郵箱，為的是用戶體驗(yàn)統(tǒng)一。gmail則使用了漸進(jìn)增強(qiáng)，你的瀏覽器越新越強(qiáng)，你看到的效果就越好，為的是用戶體驗(yàn)增強(qiáng)。再后來，Google發(fā)布了Android，移動(dòng)互聯(lián)網(wǎng)爆發(fā)，html5標(biāo)準(zhǔn)發(fā)布。

互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機(jī)。手機(jī)雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗(yàn)了，所以，谷歌式的漸進(jìn)增強(qiáng)被廣泛認(rèn)可，結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述響應(yīng)式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。

現(xiàn)如今，為何需要考慮多設(shè)備的兼顧呢，依然是因?yàn)闀r(shí)代發(fā)展與生活方式的變遷：

• 即便是PC或Mac用戶，有查顯示只有一半的人會(huì)將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預(yù)知；
• 臺(tái)式機(jī)、投影、電視、筆記本、手機(jī)、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失；
• 屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來，大小可能天差地別。結(jié)合自身產(chǎn)品用戶訪問瀏覽器分辨率
• 鼠標(biāo)、觸屏、筆、攝像頭手勢(shì)……不可預(yù)期的操控方式正在不斷出現(xiàn)。

因此我們需要在了解基本布局方式的特征下，選擇適合自身產(chǎn)品的布局實(shí)現(xiàn)方式。

布局方式對(duì)比

靜態(tài)式、自適應(yīng)、流體式、響應(yīng)式布局，A+R混合布局的特點(diǎn)對(duì)比如下：

靜態(tài)式布局：

窗口縮小后內(nèi)容被遮擋時(shí)，拖動(dòng)滾動(dòng)條顯示布局。不管在哪種設(shè)備，哪種瀏覽器上瀏覽都是一個(gè)樣。移動(dòng)設(shè)備上則顯示太小或不全。

自適應(yīng)布局：

用自適應(yīng)技術(shù)(Adaptive)我們可以開發(fā)和提供不同的布局來為類似純觸屏或者混合觸屏設(shè)備這樣的一類具體場(chǎng)景提供最好的體驗(yàn)。

分別為不同的屏幕分辨率設(shè)備設(shè)計(jì)不同的樣式布局，相當(dāng)于多個(gè)靜態(tài)布局組成的一個(gè)系列合集，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍，頁面通過百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小，當(dāng)可視窗口改變時(shí)，不會(huì)出現(xiàn)橫向滾動(dòng)條，UI，圖片，文字會(huì)自動(dòng)縮放，元素內(nèi)容、布局、交互方式基本不變。

彈性布局：

以百分比作為頁面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。

流體式布局：

屬于自適應(yīng)的一個(gè)子集，也是通過百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小，不同于百分比自適應(yīng)的是隨著窗口大小的改變，頁面的布局會(huì)發(fā)生小的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)相補(bǔ)。

響應(yīng)式布局：

如果從廣義上講，響應(yīng)式布局實(shí)際上就是更好、更機(jī)智、更靈活的去實(shí)現(xiàn)自適應(yīng)，他們都算是一種彈性布局。再通俗點(diǎn)講響應(yīng)式重在于「響應(yīng)」它會(huì)隨著設(shè)備屬性（如寬高）的變化。

頁面的設(shè)計(jì)和開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和刪格、布局、圖片、css media query的使用等。

狹義上講，響應(yīng)式網(wǎng)頁設(shè)計(jì)指的是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

A+R混合模型布局

• R和A上的區(qū)別

當(dāng)響應(yīng)式設(shè)計(jì)在基于預(yù)定義斷點(diǎn)之上用CSS或者JS調(diào)整布局和內(nèi)容。調(diào)整方法提供基于用戶代理和設(shè)備類型的預(yù)結(jié)構(gòu)化模版。

他們之間主要的區(qū)別是DOM結(jié)構(gòu)，當(dāng)采用響應(yīng)式思維開發(fā)時(shí)，HTML代碼在各種情況下都會(huì)一樣（除非你用JS移除某些DOM節(jié)點(diǎn)），而在自適應(yīng)開發(fā)中我們可能會(huì)有不一樣的代碼結(jié)構(gòu)和體驗(yàn)。

R采用流體＋斷點(diǎn)，在斷點(diǎn)之間，頁面依然會(huì)隨窗口大小自動(dòng)縮放（通過fluid grid），直到遇到斷點(diǎn)改變界面樣式布局甚至內(nèi)容。R一般來說需要在網(wǎng)頁設(shè)計(jì)初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。

A只在針對(duì)幾種分辨率（如320，480，760，960，1200，1600px）進(jìn)行優(yōu)化，在斷點(diǎn)之間的自動(dòng)過渡比較少。A采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對(duì)于更小的分辨率做針對(duì)性的優(yōu)化（適應(yīng)），減小重構(gòu)的成本。

兩種設(shè)計(jì)思維都是有效的，需衡量在項(xiàng)目中有多少組件、復(fù)雜性如何以及是否存在一種體驗(yàn)是適合所有用戶的。開發(fā)web應(yīng)用時(shí)經(jīng)常會(huì)用到響應(yīng)式設(shè)計(jì)，例如通過自適應(yīng)開發(fā)來構(gòu)建定制化體驗(yàn)。

兩種方法各有利弊，但是如果同時(shí)使用它們到底會(huì)得到什么呢？

• A+R模型結(jié)合了基于單個(gè)主要臨界點(diǎn)的自適應(yīng)和響應(yīng)式方法。

混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機(jī)、穿戴設(shè)備等等），在每個(gè)布局中，頁面元素隨著窗口調(diào)整而自動(dòng)適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應(yīng)布局的融合。

自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實(shí)現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實(shí)現(xiàn)方式。

很多時(shí)候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡(jiǎn)單輕巧，而且同一斷點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)，后面內(nèi)容會(huì)講到）保持統(tǒng)一邏輯。

否則頁面實(shí)現(xiàn)太過復(fù)雜也會(huì)影響整體體驗(yàn)和頁面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實(shí)現(xiàn)方式。

選型

如何考慮實(shí)踐過程中的判斷呢。一是看應(yīng)用場(chǎng)景，二是看如何設(shè)計(jì)“響應(yīng)式”方案。簡(jiǎn)單、輕量的頁面直接用media query實(shí)現(xiàn)響應(yīng)性就很好。比如blog、小型企業(yè)站之類?，F(xiàn)在的CSS框架基本都具備響應(yīng)性。

但請(qǐng)注意響應(yīng)式不僅僅是響應(yīng)式布局。對(duì)于大型站簡(jiǎn)單用media query是遠(yuǎn)遠(yuǎn)不夠的。于是在同一個(gè)controller層上，識(shí)別UA，渲染不同版本的模板，組合相應(yīng)的靜態(tài)資源。這也算是響應(yīng)式。開發(fā)及維護(hù)成本明顯提高。

當(dāng)各個(gè)版本間的差異很大時(shí)，維護(hù)成本很可能會(huì)大到無法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務(wù)化，應(yīng)用層app化。

根據(jù)不同公司的技術(shù)特點(diǎn)，調(diào)整的成本也難講是否可行。對(duì)于大型站，分開做更清晰，同時(shí)用響應(yīng)式組件解決復(fù)用、功能同步的問題?？傊?，根據(jù)場(chǎng)景響應(yīng)式可以從各種層面，各種粒度上做。這是現(xiàn)代web開發(fā)的特點(diǎn)。

建議開發(fā)一套響應(yīng)式電腦網(wǎng)站（過渡到平板端，不過渡到手機(jī)端）和開發(fā)一套響應(yīng)式手機(jī)端網(wǎng)站（過渡到平板端以下的尺寸，不過渡到平板端）

響應(yīng)式布局有可能造成冗余的代碼較多，對(duì)研發(fā)的要求也更高，比如如何更好地讓圖片，適配，UI動(dòng)畫自適應(yīng)各種布局。

大站還是要考慮數(shù)據(jù)計(jì)算和承載的問題，會(huì)對(duì)桌面和移動(dòng)端輸出不同數(shù)據(jù)，減輕壓力。

實(shí)踐與技巧

首先，我們需要了解幾種分辨率的差別。

ps：原生應(yīng)用可查詢橫縱兩個(gè)方向的像素密度，通常瀏覽器可查詢1個(gè)系統(tǒng)像素對(duì)應(yīng)多少物理像素。而設(shè)計(jì)角度通常需要參考的是所獲取的系統(tǒng)分辨率

以一個(gè)SaaS類后臺(tái)產(chǎn)品為例，對(duì)于基本流量來自Web端網(wǎng)頁的產(chǎn)品而言，需要了解當(dāng)下的瀏覽器分辨率現(xiàn)狀 Web端不同屏幕分辨率占比情況，數(shù)據(jù)來源百度統(tǒng)計(jì)，如圖所示：

如上所述，選擇適配方式時(shí)，設(shè)計(jì)目標(biāo)為：區(qū)分web與pad端可共享的設(shè)計(jì)布局大于手機(jī)端，且產(chǎn)品規(guī)劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術(shù)維護(hù)成本與開發(fā)成本的平衡，于是判斷需要選擇A+R模式來完成產(chǎn)品的跨端設(shè)計(jì)。

自適應(yīng)（A）方法能讓我們?cè)诓煌脑O(shè)備上有不同的體驗(yàn)、內(nèi)容甚至是功能。如將960px作為主要的自適應(yīng)臨界點(diǎn)，根據(jù)全局統(tǒng)計(jì)信息定義，我們會(huì)得到一些相似處：

• 左側(cè)的可視區(qū)代表整個(gè)屏幕小于960px時(shí)的具體布局和內(nèi)容
• 右側(cè)的可視區(qū)代表整個(gè)屏幕大于等于960px時(shí)的另一種布局

在使用響應(yīng)式（R）技術(shù)時(shí)，我們可以利用主要臨界點(diǎn)創(chuàng)建兩個(gè)互不相同的體驗(yàn)情景，每種體驗(yàn)里，我們都可以在可用空間內(nèi)定義二級(jí)臨界點(diǎn)去調(diào)整布局。

通過結(jié)合自適應(yīng)和響應(yīng)的方法，我們得到A+R模型。利用自適應(yīng)技術(shù)，我們將致力于體驗(yàn)和功能，作出兩種不同的情景設(shè)計(jì)。使用響應(yīng)式組件，我們可以處理上下文內(nèi)的UI組件和布局。

這種設(shè)計(jì)方法要求設(shè)計(jì)師真正了解他們想要提供的體驗(yàn)，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結(jié)構(gòu)完全不同的小型移動(dòng)設(shè)備上運(yùn)行的大型APP。就像你看到的，你的產(chǎn)品將具有很強(qiáng)的靈活性，但同時(shí)也很復(fù)雜。

因?yàn)槟阋幚聿煌拇a庫和環(huán)境（非強(qiáng)制性）,Twitter、Facebook和Github將此模式應(yīng)用在他們的移動(dòng)網(wǎng)站上。如果你在移動(dòng)設(shè)備上瀏覽這些網(wǎng)站，則可以根據(jù)移動(dòng)用戶的期望來檢驗(yàn)它們是如何改變的用戶體驗(yàn)的。

其他輔助手段

刪格

柵格系統(tǒng)可以幫助我們?cè)O(shè)計(jì)，但卻不能保證我們的設(shè)計(jì)。它有多種可能的用途，并且每個(gè)設(shè)計(jì)師都可以尋找適合其個(gè)人風(fēng)格的解決方案。對(duì)于簡(jiǎn)化復(fù)雜的響應(yīng)式布局規(guī)則而言，這是一項(xiàng)十分有效的輔助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于對(duì)齊內(nèi)容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內(nèi)容。

2. 頁面邊距（Side Margins）

頁邊距是指內(nèi)容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個(gè)屏幕尺寸的最小呼吸空間。

3. 用于組成柵格的列數(shù)稱為列結(jié)構(gòu)。

8、12、16和20是響應(yīng)式布局中最常見的幾種列結(jié)構(gòu)。而這取決于我們對(duì)產(chǎn)品的設(shè)計(jì)要求。12列結(jié)構(gòu)是相對(duì)靈活的。它可以進(jìn)一步細(xì)分，將內(nèi)容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設(shè)計(jì)系統(tǒng)采用來24列的形式，如Ant-D

4. 斷點(diǎn)

是指屏幕尺寸的特定范圍，列結(jié)構(gòu)、列寬、槽寬和邊距都取決于斷點(diǎn)。在這個(gè)范圍內(nèi)，布局會(huì)根據(jù)可用的屏幕尺寸重新調(diào)整，以獲得最佳的布局視圖。

如果較小的屏幕有足夠的可用空間容納內(nèi)容，則列將按比例縮小。如果一列的內(nèi)容無法在較小屏幕上顯示，該列將垂直放置圖文內(nèi)容。

5. 網(wǎng)格規(guī)則

列跟槽的寬度是以網(wǎng)格作為基本單位來做增減，所以應(yīng)該先定義好柵格的原子單位，“網(wǎng)紅款”8點(diǎn)網(wǎng)格指的是設(shè)計(jì)頁面時(shí)，也應(yīng)該遵循8點(diǎn)規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。

產(chǎn)品中各類元素應(yīng)該遵循這個(gè)倍數(shù)原則（圖標(biāo)、組件大小等），不同的設(shè)計(jì)系統(tǒng)根據(jù)自身需求，設(shè)定這個(gè)規(guī)則。例如在Material Design中使用的是2X網(wǎng)格。

6. 流體柵格與混合刪格

流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內(nèi)容寬度，根據(jù)屏幕大小變化在流體柵格中，列可以增長(zhǎng)或收縮以適應(yīng)可用空間。

混合柵格既有不同的寬度，也有固定寬度。在現(xiàn)代布局中，一些元素超出了網(wǎng)格邊緣，與屏幕邊緣對(duì)齊。頁眉、頁腳、出血都是一些常見的例子。

如果內(nèi)容寬度大于可用的屏幕尺寸，那么一個(gè)固定柵格就會(huì)轉(zhuǎn)變成一個(gè)適應(yīng)屏幕可用空間的流動(dòng)?xùn)鸥?，以充分適應(yīng)內(nèi)容。

結(jié)語

設(shè)計(jì)需在技術(shù)方案前介入，根據(jù)你的產(chǎn)品特點(diǎn)，進(jìn)行設(shè)計(jì)方案評(píng)估，可借助的手段有刪格，網(wǎng)格規(guī)則等，設(shè)計(jì)斷點(diǎn)規(guī)則時(shí)，需關(guān)注設(shè)備的常見系統(tǒng)分辨率。

移動(dòng)和桌面設(shè)計(jì)的差別遠(yuǎn)不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應(yīng)式設(shè)計(jì)來解決的。事實(shí)上，你可以認(rèn)為如果一種設(shè)計(jì)不能兼顧兩種平臺(tái)的主要差別，就不能算是合格的響應(yīng)式設(shè)計(jì)。

但是，如果確實(shí)想要處理好平臺(tái)間的所有差異，我們就回到了原點(diǎn)：進(jìn)行兩種不同的設(shè)計(jì)或者使用A+R的模型，在尋求合適的過程中，關(guān)注技術(shù)的革新。

A與B不是硬幣的正反面，它們?yōu)榱私鉀Q同一個(gè)問題而生，是同一種思想的延伸。

作者：神樂

配圖：沙拉

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》Web產(chǎn)品的適配設(shè)計(jì)選型

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

這是一個(gè)科技類網(wǎng)頁的小插圖，這樣看是OK的，但第一版的圖就一言難盡了，如下：

做完設(shè)計(jì)之后，我往回看看了，發(fā)現(xiàn)第一稿真讓人頭皮發(fā)麻呀～
最后的呈現(xiàn)效果比之前做的都要強(qiáng)太多了。

不管是顏色方向、質(zhì)感、細(xì)節(jié)上都甩前者一大截，原因是什么呢？我總結(jié)了以下幾點(diǎn)：

一、層次關(guān)系

客戶就說“畫面視覺太平了，沒有層次，黑白灰關(guān)系沒有拉開！細(xì)節(jié)也沒有！顏色不好看！自己回去再想想吧！”……

黑白灰關(guān)系什么意思呢？我的理解就是先把設(shè)計(jì)稿去色不就能看到黑白灰了嗎？

很多同學(xué)在做設(shè)計(jì)時(shí)不會(huì)考慮黑白灰這個(gè)問題，但其實(shí)顏色也是有變化的；在顏色中黑白灰的關(guān)系就是色彩的明度關(guān)系，明度越高就越白。
正常情況下畫面中的黑白灰關(guān)系拉得越開，就越有空間感、層次感。

如果畫面中黑白灰關(guān)系沒有拉開，就會(huì)使畫面飄飄的，很奇怪、不接地氣。

如上圖就是一個(gè)正常的黑白灰關(guān)系，每一層都區(qū)分的很開，它就會(huì)有空間層次感。

而且我們也需要保持畫面的平衡感，黑色多了就會(huì)使得畫面沉，白色多了就會(huì)使畫面飄，灰色多了就會(huì)使畫面悶。

所以我們得把握一個(gè)度，把握黑白灰在畫面中的節(jié)奏感！

我們?cè)侔押诎谆谊P(guān)系運(yùn)用到實(shí)際工作中：

整個(gè)背景采用暗灰色調(diào)，主體底板用亮灰色，內(nèi)容就用亮色系，陰影及厚度用暗色調(diào)。這樣一來畫面的層次拉開了。

那么客戶說的細(xì)節(jié)該怎么去加呢？

二、細(xì)節(jié)

沒有細(xì)節(jié)、太平了，我就想到把它做成立體的感覺，讓畫面豐富起來，也可以加一些點(diǎn)綴的小元素來修飾畫面。

從平面二維到立體三維畫面的細(xì)節(jié)就豐富多了,而且三維空間更加容易出效果。

在加細(xì)節(jié)的過程中，我感覺到了畫面中有點(diǎn)太過于規(guī)規(guī)矩矩了，全是方方正正形狀，就很呆板的感覺，特別是左下角的矩形框，與整個(gè)畫面之間沒有聯(lián)系、不協(xié)調(diào)。

這就是構(gòu)圖出了問題。

解決的方法很簡(jiǎn)單，只要讓圖形與圖形之間互相穿插、疊加，讓它們你中有我我中中有你；甚至可以把圖形加以旋轉(zhuǎn)，讓圖形產(chǎn)生“正”與“斜”的對(duì)比。

這種方法就可以解決畫面死板的問題。

但是我覺得不能夠加矩形了，畫面中方形形狀已經(jīng)很多了，那么我們是不是可以考慮一下用圓去增加畫面節(jié)奏感。

方的對(duì)比是圓，也是一個(gè)對(duì)比關(guān)系，但圓的占比面積太大了，咱們就可以用弧線去代替。

這不，弧線把方正的矩形打破了，畫面就更加生動(dòng)有節(jié)奏。

還有一個(gè)細(xì)節(jié)：

如圖所示，這里就涉及到一個(gè)識(shí)別度的問題，我們?cè)谧鲈O(shè)計(jì)的時(shí)候，一定要把形體交代清楚；

我做了一個(gè)銀幣的效果，但是形體邊緣輪廓沒有交代清楚，整個(gè)銀幣糊在一堆了，看不清里面的字符是什么，這樣的感覺不是很好，整個(gè)元素是虛的。

還有上升的線條取消發(fā)光效果是不是去掉會(huì)更好呢？

這樣是不是畫面會(huì)更加的完整呢，這點(diǎn)很重要呀，我們得把物體交代清楚，不能模棱兩可就糊弄過去了！物體虛虛的給人感覺很飄，不穩(wěn)。

其實(shí)還有中間的一稿，但是顏色一不小心就弄臟了：

三、顏色臟的小技巧

經(jīng)過嘗試，我總算明白為什么顏色漸變會(huì)偏臟了；我總結(jié)了以下幾點(diǎn)：

1、飽和度低的顏色占比不要太多，多了顏色就容易顯得臟。

如圖，右邊的顏色飽和度偏低，這類顏色就會(huì)發(fā)灰，灰色多了能不臟嗎？

2、盡量不要用對(duì)比色去拉漸變，對(duì)比色漸變對(duì)于新手來說不太友好，“紅配綠賽狗屁”就是這種說法。

只要注意到這兩點(diǎn)就基本可以避開顏色太臟的情況

總結(jié)

以上就是這次小案例帶給我的啟發(fā)和思考，希望當(dāng)遇到類似我這種問題的時(shí)候能夠給你點(diǎn)啟發(fā)，能夠幫助到你！

怎么樣，是不是很耐思~有沒有想動(dòng)筆的沖動(dòng)！那接下來把話筒交給青燈，讓他開始他的表演吧！

YoYo，大家好！我是最近畫到手痛的青燈，這次是我第一次做插畫教程，做的不夠好的地方就請(qǐng)大家多多指教啦！

這期的彩鉛顆粒風(fēng)格主要是用扁平人物和元素+方型構(gòu)圖+彩鉛肌理刻畫的結(jié)合。

構(gòu)圖靈感來源自法國藝術(shù)家 Gasp art 的插畫作品，這個(gè)系列作品以扁平人物為主，用演奏樂器的方式結(jié)合了植物的生長(zhǎng)，可以很直觀的感受到每個(gè)人物的動(dòng)作和元素都是框在一個(gè)正方形里，給人一種規(guī)整又舒適的感覺。

藝術(shù)家 Gasp art 的插畫作品，僅供賞析

總結(jié)一下 Gasp art 的插畫構(gòu)圖，其實(shí)主要就是人物加元素組成方型構(gòu)圖，可以用植物和道具元素或者是人物動(dòng)作彎折的形式構(gòu)成方形邊框。

這次的刻畫方式我們選擇了兩種風(fēng)格：一種是偏粗糙的鉛筆肌理風(fēng)格，第二種是偏柔和的細(xì)膩噪點(diǎn)風(fēng)格，讓我們來欣賞一下圖片：

藝術(shù)家 Nadiia Zhelieznova 的插畫作品，僅供賞析

藝術(shù)家 Wnjing Yang 的插畫作品，僅供賞析

我們截取第一種風(fēng)格的局部，放大觀察并總結(jié)一下：

1. 噪點(diǎn)顆粒明顯，并且噪點(diǎn)的間隙會(huì)把底部的顏色透出來。

2. 疊加肌理時(shí)會(huì)透出上一層肌理，但是疊加的越重就會(huì)越實(shí)。

3. 在結(jié)構(gòu)轉(zhuǎn)折處和邊緣有描邊。

再總結(jié)一下第二種風(fēng)格的插畫特點(diǎn)：

1. 顏色和噪點(diǎn)的過渡柔和

2. 邊緣用亮色或重色拉開對(duì)比，輪廓清晰

3. 在最亮處有高光點(diǎn)

把這 6 點(diǎn)結(jié)合起來就是我們這次的刻畫風(fēng)格啦~

1. 確定主題收集圖片素材：

在開始之前，要先想想畫啥。咱們列個(gè)思維導(dǎo)圖，把場(chǎng)景分成室內(nèi)室外都在干啥，可以多想一些好玩的事。這里我選了做瑜伽，躺著玩手機(jī)，路上踩到了口香糖和快樂逛街這 4 個(gè)。

現(xiàn)在關(guān)鍵的來了，根據(jù)這 4 個(gè)小場(chǎng)景來找合適的人物動(dòng)作參考和一些道具參考，一定要多找參考?。?！多找參考?。?！找參考！??！重要的事情說三遍！

• 瑜伽篇：

瑜伽這張我找了個(gè)動(dòng)作接近框型的一個(gè)動(dòng)作，然后根據(jù)瑜伽休閑愜意的感覺，我找了個(gè)室內(nèi)植物還有小鳥和紙飛機(jī)，想代表她隨著身體的放松，精神也慢慢飛向了遠(yuǎn)方。

在動(dòng)筆之前我們先分析一下人物的比例和特點(diǎn)。

人物風(fēng)格分析：

① 人物頭身比特點(diǎn)：人物比例在 11 頭身左右，因?yàn)槿宋飫?dòng)作有折疊，頭占畫面七分之一左右。

人物上半身在 4 頭左右，腿長(zhǎng) 7 個(gè)頭左右，手長(zhǎng) 6 頭左右。

② 人物四肢特點(diǎn)：四肢偏粗方，可以想象是多個(gè)矩形和梯形相接，銜接的時(shí)候注意關(guān)節(jié)弧度。

2. 畫草圖

① 先提取動(dòng)作框架，根據(jù)我們分析好的頭身比例調(diào)整放在框里使得四肢貼邊呈方形。 

② 給框架加肉，根據(jù)之前的四肢分析，多用方形和圓矩形概括，這里我把女生的頭發(fā)換成了大波浪，增加了飄逸的感覺。同時(shí)曲線也會(huì)方便后期刻畫。

③ 同理，植物直接用一個(gè)彎的水滴型概括葉片和葉莖，鳥用半圓形概括身子加上小半圓的頭和四邊形的尾巴就概括出來了啦~

④ 最后整合一下元素開了個(gè)“天窗腦洞”，紙飛機(jī)飛進(jìn)這個(gè)天窗。然后在植物邊上用黃色的線條加了一些靈動(dòng)的水滴，這張瑜伽就做好了。

• 快樂逛街篇：

第二張購物的也是同理先找參考，大部分逛街的動(dòng)作都是比較平緩的走路類的姿勢(shì)，這里我特意找了一個(gè)幅度較大的舞蹈動(dòng)作，再找了一些服裝參考。另外我打算用水加上金幣流入黑洞的方式表現(xiàn)“花錢如流水”的概念。

步驟和之前的都是一樣的，這里加入一個(gè)水流小 tip：

• 踩到口香糖篇：

第三張我想的是男生在趕去上班的路上踩口香糖，草圖同樣是從動(dòng)態(tài)提取入手，我想讓手和腳上的口香糖有個(gè)互動(dòng)，就把原動(dòng)作的腳抬起來了一點(diǎn)，讓手靠近鞋子去抓口香糖。另外我把左邊的手大臂伸平小臂轉(zhuǎn)過來做一個(gè)看手表的動(dòng)作，表示他要遲到的焦急。

• 躺著玩手機(jī)篇：

第四張我這邊提取的是一個(gè)躺著翹腿的人物動(dòng)態(tài)，為了讓整個(gè)人物能符合方形構(gòu)圖，我把人物左手抵著地把人物上半身撐起來了點(diǎn)，頭發(fā)用大小不一的泡泡在邊緣處排列，接著我夸張了翹起來的腿使得整個(gè)動(dòng)作幅度更大，同時(shí)也讓整個(gè)構(gòu)圖更充實(shí)。最后我在手機(jī)前面加入了一個(gè)大泡泡的元素，暗示我們時(shí)常沉浸在手機(jī)信息帶來的巨大泡影里。

鋪色可以用鋼筆勾閉合形狀，也可以用 ps 自帶的硬邊緣筆刷畫。

配色以補(bǔ)色為主，在色輪上呈 180 度的變化，以這張瑜伽舉例，能看到比較明顯的橙色和藍(lán)色，在這對(duì)顏色基礎(chǔ)上再加入了它們的相鄰色作為點(diǎn)綴色，在色輪上呈 30 度左右變化。

• 筆刷介紹

終于到了激動(dòng)人心的刻畫環(huán)節(jié)了，這次給大家準(zhǔn)備了村口高質(zhì)量彩鉛噪點(diǎn)筆刷~~我這邊已經(jīng)按照繪畫順序和效果類別整理好了~~（后臺(tái)回復(fù)【插畫046】領(lǐng)取）

這里重點(diǎn)介紹一下這幾個(gè)筆刷！

• 皮膚刻畫

給皮膚增加色素，首先我們要增加的區(qū)域分為：

1. 五官例如：鼻子，眼睛，腮紅，耳朵

2. 陰影例如：脖子，腋下，衣服的陰影，以及身體轉(zhuǎn)折處來加重

以人物面部舉例，選一個(gè)比皮膚更深一點(diǎn)的顏色用【軟底紋筆刷】由重到輕地上色素，顏色就會(huì)自然的過渡過去。

接著用【點(diǎn)狀排線筆】再加重一遍。

用一樣的方法把身體部分畫完，最后可以在邊緣處（比如手腳接觸的地方，手指縫）加重線用于區(qū)分色塊

• 服裝道具刻畫：

畫衣服和道具這類面積比較大元素時(shí)，第一步先把顏色提亮，第二步再鋪排線紋理（選一個(gè)你喜歡的方向）并在關(guān)節(jié)處加重。

第三步用【軟底紋筆刷】根據(jù)光源加重褲子陰影，腿彎折處用套索工具勾出來鋪色加重，第四步用【點(diǎn)狀排線筆刷】加重陰影處，顏色越重面積越小。

最后在轉(zhuǎn)折處勾勒更深的邊線就 ok 了~

• 背景元素刻畫：

用【軟底紋筆刷】加肌理，【速寫鉛筆】加裝飾線的方式把其他的植物和小鳥元素刻畫完。

暗色背景的星星第一步在星星里鋪上背景色，然后用亮色把中間提亮，第二步給星星中間用白色畫個(gè)細(xì)十字線，星星底部順著四個(gè)角畫延長(zhǎng)線條再復(fù)制一層縮小旋轉(zhuǎn) 45 度，最后用【高光筆】點(diǎn)底部點(diǎn)一個(gè)亮光，亮色背景的星星不用刻畫直接做延長(zhǎng)線和提亮高光就可以。

• 頭發(fā)刻畫：

首先第一步也是把頭發(fā)底色提亮，第二步用波浪線把頭發(fā)分成中間粗兩邊細(xì)的葉片形式，然后第三步在葉片里加線條，線條遵循兩側(cè)密中間疏的原則向焦點(diǎn)聚攏。

第四步在線條密集的地方用使用【軟底紋筆刷】加重，中間輕輕帶過，頭發(fā)體積感就出來了。

最后再在頭發(fā)亮的地方用線性減淡的圖層模式用【高光筆刷】提亮一下，邊緣用【速寫鉛筆】輕輕勾勒一條淺色邊緣就ok了~

• 背景肌理：

第一步先把背景提亮至白色，第二步用【軟底紋筆刷】用力的涂色，這樣鋪完色后就會(huì)有些白色的點(diǎn)點(diǎn)透出來了。

第三步用【點(diǎn)狀排線筆刷】加重物體下方讓他們看起來有點(diǎn)投影的狀態(tài)就 ok 了！

• 材質(zhì)和質(zhì)感表現(xiàn)：

1. 水滴材質(zhì)：

來到了我們畫面的點(diǎn)睛之筆的部分了，在畫這種半透明狀的物件東西是可以吸環(huán)境色涂在中間，讓水滴兩側(cè)保持亮色就會(huì)有透明的質(zhì)感呈現(xiàn)出來，最后點(diǎn)上高光水滴的透明質(zhì)感就做出來了。

2. 泡泡材質(zhì)： 

在這張?zhí)芍词謾C(jī)里有一個(gè)泡泡的材質(zhì)，它的繪制邏輯其實(shí)跟紙飛機(jī)拖尾是一樣的，但是泡泡的顏色會(huì)更復(fù)雜一點(diǎn)，所以我們先來分析一下泡泡的顏色怎么畫。

拿泡泡的一個(gè)小弧度邊舉例，從左到右的顏色就是從黃→紅→粉→紫→藍(lán)→綠這樣的顏色變化。

所以我們照葫蘆畫瓢，先畫出一個(gè)一樣的形狀，用【后悔藥】橡皮擦，擦出透明漸變，擦的時(shí)候在弧度凸的地方多保留一點(diǎn)，凹的地方輕輕擦。

接著用【軟底紋筆刷】畫出顏色，注意顏色的位置和占比也一樣參考照片。在顏色銜接的地方用筆刷輕輕的覆蓋上去就會(huì)比較自然，在光源位置畫出白色的高光。

繼續(xù)把完整的泡泡畫出來，再加上一點(diǎn)線條裝飾一個(gè)泡泡就畫好了！

3. 畫面光澤：

用【高光筆刷】把圖層模式調(diào)成線性減淡模式在光源方向提亮，再用【速寫鉛筆】在最亮處點(diǎn)一個(gè)小高光，整張就畫完啦~

掌握了這些刻畫方式，再加一點(diǎn)耐心和時(shí)間這 4 張就畫好啦~~

1. 人物動(dòng)作轉(zhuǎn)化和道具的分配要貼合方形構(gòu)圖。

2. 加入主色的鄰近色豐富畫面。

3. 刻畫顏色遵循陰影顏色越重面積越小，高光越亮面積越小的邏輯，讓重的更重，亮的更亮，拉開對(duì)比。

4. 你永遠(yuǎn)可以相信后悔藥橡皮擦，畫多了就擦掉所以大膽畫吧~

作者：藍(lán)貴蓮

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》從構(gòu)思講起，手把手帶你繪制一套彩鉛噪點(diǎn)人物插畫！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)經(jīng)濟(jì)最根本的是“互通有無，各取所需”這八個(gè)字。更高效的生產(chǎn)力決定了更好的交換能力。只要制造業(yè)的生產(chǎn)線還能繼續(xù)開足馬力，源源不斷的生產(chǎn)出生活必需品，那么就有相應(yīng)的“場(chǎng)景”去交換它們。這個(gè)“場(chǎng)景”最終的末端形式就是“店”。有了互聯(lián)網(wǎng)交易這個(gè)場(chǎng)景之后，門店（門市）就成了“線下店”?！熬€上店”就啥都好嗎？

顯然不是。人跟人之間隔著一個(gè)“網(wǎng)線”，我們對(duì)小物件或者低價(jià)值的小商品或許還有很大的容忍度。但是，對(duì)于你的家庭服務(wù)需求，你要找的是一位共同在家里生活朝夕相處、帶娃、護(hù)老的阿姨，不見一見，放心嗎？所以就需要這么“一個(gè)專業(yè)的家庭服務(wù)門店”來提供面對(duì)面的咨詢，以及培訓(xùn)出優(yōu)秀的阿姨來提供令你和你的家人滿意的服務(wù)。

不得不說，在這個(gè)領(lǐng)域里，還沒有一個(gè)“一統(tǒng)天下”的品牌和絕對(duì)“統(tǒng)治力”的產(chǎn)品。而順應(yīng)趨勢(shì)來看，開放生育和老齡化，這確實(shí)是一個(gè)“有發(fā)展空間”的行業(yè)，需要這么一個(gè)“門店”。有的行業(yè)在沒落，有的，則在生長(zhǎng)。

門店標(biāo)準(zhǔn)化背后有怎樣的運(yùn)作邏輯？它的本質(zhì)是什么？后疫情時(shí)代如何做門店形象標(biāo)準(zhǔn)化？

門店做標(biāo)準(zhǔn)化當(dāng)然不僅是說品牌露出好、有助于打開潛在客戶心智、顧客選擇偏向這些理由。標(biāo)準(zhǔn)化本身除了品牌、效率之外的比較重要一點(diǎn)，就是這套運(yùn)營標(biāo)準(zhǔn)能使加盟老板、乃至員工都能夠迅速進(jìn)入“經(jīng)營”的狀態(tài)，并逐步迭代總結(jié)，再通過標(biāo)準(zhǔn)化把經(jīng)驗(yàn)傳遞下去。標(biāo)準(zhǔn)化這套法子能使老板少走彎路，早盈利。老板盈利賺到錢了，品牌方就有了更大的話語權(quán)，實(shí)現(xiàn)更大的商業(yè)企圖。

在后疫情時(shí)代，人們的錢袋子緊了，老板在經(jīng)營投入上謹(jǐn)慎了，設(shè)計(jì)上的發(fā)揮空間狹窄了。門店的裝修標(biāo)準(zhǔn)化不妨從“設(shè)計(jì)形式上比友商好一點(diǎn)，材料便宜點(diǎn)，執(zhí)行容易點(diǎn)”上入手。

設(shè)計(jì)形式好一點(diǎn)

往大了說是“差異化”。從材料、顏色、鋪貼方式三個(gè)角度去探索，任何一個(gè)角度提上一個(gè)LEVEL就可以。

如果只差一點(diǎn)，等友商迭代升級(jí)怎么辦？

不同于“線上店”，線下門店的裝修周期有比較明確的規(guī)律。三年小裝，五年大裝，裝修早了不賺錢，裝修晚了不符合當(dāng)下品牌發(fā)展階段了，保持小步迭代的策略即可。

材料便宜點(diǎn)

裝修材料水深，不探討材料的品牌和產(chǎn)地。這里的便宜體現(xiàn)在品牌商的標(biāo)準(zhǔn)化管理成本，就是加盟商對(duì)材料的采購難易程度。如果買不到或者總?cè)必?，加盟商的免租期是有限的，很可能?dǎo)致“平替”的事情發(fā)生，但這個(gè)“平替”不是真的能平，很可能是向下“平”。從而出現(xiàn)失控的設(shè)計(jì)落地結(jié)果。同時(shí)，對(duì)品牌元素應(yīng)保持絕對(duì)的掌控力，統(tǒng)一采購配發(fā)（路邊廣告店自由發(fā)揮的結(jié)果超乎想象）。

上面提到的裝修周期，這也決定了在選材上要選擇符合盈利模型的材料。不要追求極致的耐用而導(dǎo)致成本提升。

執(zhí)行容易點(diǎn)

讓施工的人能明白標(biāo)準(zhǔn)化的設(shè)計(jì)意圖。不同的施工師傅對(duì)同樣的設(shè)計(jì)圖紙理解而施工出來的結(jié)果可能是不同的。所以做出明確設(shè)計(jì)意圖、圖紙、以往項(xiàng)目中的錯(cuò)誤做法。并不是說，寫得越多越詳細(xì)越好。我恰恰在這上面深有體會(huì)，忽略了施工師傅的辦公環(huán)境和項(xiàng)目節(jié)奏。我們管這叫“由于缺少用戶習(xí)慣調(diào)研導(dǎo)致產(chǎn)品無法觸達(dá)用戶心智?！?

要知道，用戶面對(duì)，洋洋灑灑幾大篇的描述，往往不愿意去閱讀，所以盡量采用短視頻的形式去說明效果會(huì)更好。

在弱矩陣組織中設(shè)計(jì)的影響力邊界在哪？受控環(huán)境下的設(shè)計(jì)管理如何發(fā)揮最大效能？

說到這，終于到了正題。似乎設(shè)計(jì)師往往都是弱勢(shì)群體，很大程度上取決于組織架構(gòu)的形式。大多數(shù)品牌公司的設(shè)計(jì)組織都是依托于產(chǎn)品側(cè)的訴求。例外的是乙方設(shè)計(jì)公司，因?yàn)樵O(shè)計(jì)本身對(duì)公司來說就是產(chǎn)品。

弱矩陣的組織更像是臨時(shí)抽調(diào)人力組成的作戰(zhàn)小組，平時(shí)各職能人員都在自己組織內(nèi)處理常規(guī)業(yè)務(wù)需求發(fā)揮職能。這個(gè)組織形式上，也影響了參與者在項(xiàng)目中的投入精力。設(shè)計(jì)師在有限投入的情況下，需要更好的把設(shè)計(jì)流程和設(shè)計(jì)落地規(guī)則以及檢驗(yàn)標(biāo)準(zhǔn)沉淀，以供其他各個(gè)環(huán)節(jié)的職能人員查閱和重復(fù)利用。

上面所說的，經(jīng)驗(yàn)豐富的設(shè)計(jì)師可能已經(jīng)駕輕就熟了。再說說另外的思考。

我想，還可以做進(jìn)一步完善審批流程、輔助工具、權(quán)重區(qū)分、沉淀文檔四個(gè)部分。

審批流程

提到審批流程，十幾年前新興的互聯(lián)網(wǎng)行業(yè)熱衷于“扁平化”，對(duì)傳統(tǒng)行業(yè)的審批流程嗤之以鼻。時(shí)至今日，當(dāng)年的新興的互聯(lián)網(wǎng)也演化成了傳統(tǒng)互聯(lián)網(wǎng)，組織架構(gòu)越發(fā)龐大，職能劃分也越來越細(xì)，業(yè)務(wù)也趨近于穩(wěn)定?，F(xiàn)在再看扁平化，不過是企業(yè)或者行業(yè)在發(fā)展初期無法形成穩(wěn)定的流程體系和組織結(jié)構(gòu)。審批流程在高并發(fā)、時(shí)效性強(qiáng)的項(xiàng)目中，可以為你分擔(dān)更多的監(jiān)督節(jié)點(diǎn)。各個(gè)職能去監(jiān)督各自擅長(zhǎng)領(lǐng)域，識(shí)別和規(guī)避風(fēng)險(xiǎn)。

輔助工具

這一年最大的感觸就是資源同步問題。從以郵件分發(fā)演進(jìn)到網(wǎng)盤云端下載，都沒能很好的解決這個(gè)問題。家庭服務(wù)行業(yè)之前從未真正有過的品牌化的運(yùn)營。加盟商對(duì)品牌的理解力和協(xié)同力是非常初步的。并不像隔壁的3C數(shù)碼行業(yè)駕輕就熟，隔壁的加盟商甚至形成了自己的一套品牌管理組織架構(gòu)，主動(dòng)去擁抱品牌。品牌標(biāo)準(zhǔn)化的落地不要局限于“手冊(cè)”，讓“手冊(cè)”靈活起來并不是一件難事。嘗試通過線上智能客服的方式，使加盟商通過關(guān)鍵字獲得資源同步，或常見疑問解答。要保證溝通平臺(tái)不能跳躍，比如常用微信群溝通，就不要一竿子支到公眾號(hào)，這反而增加了理解成本。好的工具可以事半功倍，將設(shè)計(jì)師從重復(fù)的溝通中解放出來，將其精力投入到設(shè)計(jì)當(dāng)中。

權(quán)重區(qū)分

加盟商開店和裝修項(xiàng)目是一個(gè)高并發(fā)的項(xiàng)目。往往集中在行業(yè)淡季，這就導(dǎo)致在有限時(shí)間和有限資源配置下，做出權(quán)重區(qū)分。厘清各個(gè)項(xiàng)目條件的輕重緩急，比如說：搬家新址的項(xiàng)目權(quán)重是最高的，因?yàn)樗媾R舊址無法繼續(xù)運(yùn)營的情況。翻新升級(jí)的可以稍等一段時(shí)間，不影響他的正常運(yùn)營。

沉淀經(jīng)驗(yàn)

不總結(jié)不沉淀，就跟人失憶是一樣的。好的經(jīng)驗(yàn)要沉淀，失敗的經(jīng)驗(yàn)也要沉淀。甚至說，失敗的經(jīng)驗(yàn)比正確的經(jīng)驗(yàn)更有用。這說明它有盲區(qū)，也許是管理上的盲區(qū)，也許是執(zhí)行上的盲區(qū)，它可能是系統(tǒng)性的問題。這在跨部門溝通和團(tuán)隊(duì)擴(kuò)張的過程中會(huì)幫助業(yè)務(wù)變得更加穩(wěn)定，為項(xiàng)目增加抗體。

以上就是我分享的內(nèi)容。當(dāng)然，我并不是都做到了盡如人意，也有還在進(jìn)行和改進(jìn)中的事項(xiàng)。如果整套搬運(yùn)項(xiàng)目管理體系會(huì)與項(xiàng)目的“土壤”不匹配。做好流程裁剪，因地制宜吧。

設(shè)計(jì)更多的是事前去思考和謀劃如何去實(shí)現(xiàn)，這其中少不了去理解行業(yè)和落地流程，深入思考和理清邏輯。設(shè)計(jì)師的認(rèn)知邊界在哪里，影響力的邊界就在哪里。

逆水行舟，不進(jìn)則退。

作者：環(huán)鐵藝術(shù)家

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》當(dāng)互聯(lián)網(wǎng)遇上線下門店，設(shè)計(jì)師能做些什么？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

• 產(chǎn)品需求與設(shè)計(jì)研發(fā)的良性循環(huán)
• 今日事今日畢
• 設(shè)計(jì)文檔的規(guī)范性
• 多渠道溝通
• 驗(yàn)收不僅僅是記錄問題
• 沉淀業(yè)務(wù)組件的必要性

一、產(chǎn)品需求與設(shè)計(jì)研發(fā)的良性循環(huán)

從產(chǎn)品經(jīng)理提出需求開始，到研發(fā)開發(fā)完成上線，整個(gè)過程我們可以看作是一個(gè)迭代。倘若與研發(fā)同一個(gè)迭代完成產(chǎn)品設(shè)計(jì)，時(shí)間上肯定是不夠用。需求是永遠(yuǎn)都做不完的，一個(gè)人無論怎么埋頭苦干，還是會(huì)時(shí)間緊迫無法喘息！這時(shí)候團(tuán)隊(duì)合作顯得至關(guān)重要。我們需要進(jìn)行合理的任務(wù)管理，利用工具達(dá)到更好的效果。目前我們敏捷組產(chǎn)品與設(shè)計(jì)小團(tuán)隊(duì)用的是飛書文檔，它可以新建所需要的任務(wù)看板，清晰直觀的看到此任務(wù)當(dāng)前流轉(zhuǎn)的階段，任意拖拽方便快捷。

完善需求的詳細(xì)信息，比如：所屬項(xiàng)目、任務(wù)執(zhí)行人、優(yōu)先級(jí)、外審狀態(tài)、敏捷組、文檔鏈接等等，就可以從不同維度去管理任務(wù)，篩選我們想要了解的重點(diǎn)。

那么基于此，如果我是視覺設(shè)計(jì)，完成需求后就可以將它拖入下一泳道，等待排期。未完成的也就不會(huì)進(jìn)入到排期和研發(fā)階段，這樣基本上每個(gè)迭代研發(fā)都會(huì)提前拿到相應(yīng)的設(shè)計(jì)稿，盡管后續(xù)可能會(huì)有細(xì)節(jié)上的修改和返工，也不會(huì)很倉促。

二、今日事今日畢

三、設(shè)計(jì)文檔的規(guī)范性

每個(gè)人都有自己習(xí)慣的設(shè)計(jì)稿排列方式。整齊、清晰、直觀的布局，有利于研發(fā)快速捕捉到想要查看的信息。

?? 設(shè)計(jì)文檔基本由以下部分組成：目錄、交互原型、交互說明、視覺稿。交互稿與視覺稿最好合并在一個(gè)文檔中，方便研發(fā)查看。

?? 具體到頁面細(xì)節(jié)說明，可以安排在相應(yīng)設(shè)計(jì)界面的附近，用清晰的數(shù)字或者標(biāo)簽展示。

?? 如不同狀態(tài)，不同變量的變化，也需要詳細(xì)標(biāo)注。

?? 設(shè)計(jì)內(nèi)容過多時(shí)，像以下細(xì)節(jié)單純?cè)陧撁嫔险故竞苋菀妆缓雎?，需要單?dú)拿出來在旁邊重點(diǎn)強(qiáng)調(diào)一下。

?? 如今標(biāo)注插件很多，不需要全部手動(dòng)標(biāo)注了，但對(duì)于一些我們認(rèn)為研發(fā)會(huì)忽略和寫錯(cuò)的尺寸、間距等，可以表示一下。設(shè)計(jì)軟件的自動(dòng)展示標(biāo)注有時(shí)候會(huì)因?yàn)閳D層覆蓋之類的問題點(diǎn)不到某些元素，這個(gè)也需要檢查一下。不然研發(fā)就自由發(fā)揮了喲～

?? 各式各樣的組件有非常多的形式和狀態(tài)，設(shè)計(jì)在引用時(shí)要明確類型，避免研發(fā)亂用。

?? 比如這個(gè)全局提示組件，組件本身可以提供多行展示的樣式和規(guī)則，但研發(fā)很有可能不知道某種情況下對(duì)應(yīng)的展示樣式，實(shí)現(xiàn)的不是我們預(yù)期。以下是日常迭代中研發(fā)實(shí)現(xiàn)的有問題的樣式與正確的對(duì)比：

如上述所講，完善補(bǔ)充細(xì)節(jié)，譬如圖標(biāo)的顏色變量，懸停變化，狀態(tài)變化，引用組件備注等等，這些都是開發(fā)還原落地視覺設(shè)計(jì)的基礎(chǔ)。頁面設(shè)計(jì)中，所需的圖標(biāo)、圖例、圖片等素材，切圖并壓縮給到研發(fā)，最好用統(tǒng)一的方式去管理圖標(biāo)，比如iconfont，或者自己公司的組件平臺(tái)等。

四、多渠道溝通

當(dāng)接到新的需求并且拿到交互稿，前幾周也參加了需求&交互內(nèi)審，基本不會(huì)出現(xiàn)需求和框架大改的問題。大體了解背景和設(shè)計(jì)重點(diǎn)后，可完善視覺細(xì)節(jié)。

做完設(shè)計(jì)稿只是成功了一半，還需在設(shè)計(jì)內(nèi)審前，發(fā)給對(duì)應(yīng)的產(chǎn)品和交互同學(xué)評(píng)論提意見，先修改掉一波明顯的問題。這是視覺設(shè)計(jì)階段第一個(gè)比較重要的溝通，提前在大部分內(nèi)容上達(dá)成共識(shí)，節(jié)省了后續(xù)評(píng)審的時(shí)間。

五、驗(yàn)收不僅僅是記錄問題

1、項(xiàng)目上線前驗(yàn)收

提到驗(yàn)收是我非常頭疼的事。前期設(shè)計(jì)稿準(zhǔn)備充足的情況下，研發(fā)如果能實(shí)現(xiàn)到視覺稿的80%，驗(yàn)收起來不會(huì)特別吃力。有時(shí)會(huì)遇到驗(yàn)收內(nèi)容多，前端還原度低，耗費(fèi)設(shè)計(jì)同學(xué)大量時(shí)間，建立良好的驗(yàn)收機(jī)制非常關(guān)鍵，與研發(fā)同學(xué)的溝通和磨合也是必不可少的。

涉及到人員較少時(shí)，可以坐到一起面對(duì)面去溝通；若此次內(nèi)容較多，涉及不同人，可建立文檔。

一遍驗(yàn)收后并不完美，基本要2-3輪的繼續(xù)走查，針對(duì)優(yōu)先級(jí)比較高或者問題重災(zāi)區(qū)，標(biāo)紅后給到相應(yīng)負(fù)責(zé)的前端繼續(xù)修改，保證上線前90%以上的問題得到解決。若還有問題遺留，可新建kaptain任務(wù)后續(xù)優(yōu)化，讓驗(yàn)收問題有跡可循。

線上已有問題，按照模塊集中歸納，建立對(duì)應(yīng)的研發(fā)任務(wù)。開發(fā)過程中可與前端同學(xué)隨時(shí)溝通，提供細(xì)節(jié)補(bǔ)充。

有時(shí)我們認(rèn)為很簡(jiǎn)單的去掉一條間隔線或者間距，可能涉及到非常多不同的場(chǎng)景面板，提前溝通也有利于研發(fā)評(píng)估工作量。

六、沉淀業(yè)務(wù)組件的必要性

每當(dāng)開始新的項(xiàng)目設(shè)計(jì)，要費(fèi)好大功夫找源文件呀。適當(dāng)?shù)臍w納整理歷史文檔，也有助于我們快速的進(jìn)入設(shè)計(jì)狀態(tài)，對(duì)新人也很友好！

以業(yè)務(wù)需求為背景，在組件庫的基礎(chǔ)之上，業(yè)務(wù)組件的整理尤為重要。按照每個(gè)人的使用習(xí)慣，我們可以建立自己的“業(yè)務(wù)”組件庫，方便需求迭代時(shí)快速定位。

比如，我們可以將業(yè)務(wù)組件分為幾部分：圖標(biāo)、圖例、場(chǎng)景等，進(jìn)而細(xì)化場(chǎng)景中的內(nèi)容。至于怎么去命名和排版細(xì)節(jié)，都可以按照自己的習(xí)慣來整理，當(dāng)然組件形成后也可以擴(kuò)大到我們同業(yè)務(wù)線的UX或交互同學(xué)一起使用，提高設(shè)計(jì)效率。

可能對(duì)于非設(shè)計(jì)崗位來說，看到的僅僅是一張?jiān)O(shè)計(jì)圖，但在設(shè)計(jì)稿背后我們需要去支持和處理的細(xì)節(jié)也是非常有價(jià)值的存在。

希望這篇小小滴文章可以帶給你一定的幫助 ~(≧▽≦)/~

作者：小柴

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這些設(shè)計(jì)細(xì)節(jié)你知道嗎？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

低代碼開發(fā)平臺(tái)（LCDP，英文全稱為 Low-Code Development Platform），顧名思義，就是僅需通過少量代碼或無需代碼就可以快速生成應(yīng)用程序的開發(fā)平臺(tái)。借助低代碼平臺(tái)，你不需要像程序員一樣寫代碼，而是僅通過對(duì)于組件和模塊的拖、拉、拼、接就可以很迅速地搭建出一系列頁面，完成一個(gè)基礎(chǔ)產(chǎn)品。

低代碼平臺(tái) OutSystems 的功能界面

低代碼平臺(tái)的誕生和發(fā)展的進(jìn)程簡(jiǎn)述如下：

– 2000年：可視化編程語言誕生，通過一些可視化的界面來輔助用戶進(jìn)行編程；

– 2014年：著名的研究機(jī)構(gòu) Forrester 正式提出低代碼開發(fā)概念，并投身對(duì)該平臺(tái)的研究當(dāng)中，低代碼平臺(tái)在國外興起；

– 2016年：國內(nèi)的低代碼平臺(tái)相繼發(fā)布；

– 2021年：中國市場(chǎng)的低代碼生態(tài)體系也逐步建立了起來，且正在加速發(fā)展，待開啟一個(gè)新紀(jì)元。

作為幫助企業(yè)和團(tuán)隊(duì)快速搭建產(chǎn)品、實(shí)現(xiàn)數(shù)字化的新工具，低代碼平臺(tái)的核心功能有以下幾點(diǎn)：

1.可視化

以簡(jiǎn)潔的圖形化操作界面為主，做到通俗易懂，降低使用者的操作門檻，開箱即用；同時(shí)你可以在搭建好的界面中進(jìn)行試用操作，所見即所得。

2.模型化

可以通過拖、拉、拽等方式拼接平臺(tái)上的組件，用來搭建頁面。可以靈活定義模型中的字段、元素和大部分布局。

3.工程化

通常包含開發(fā)調(diào)試、自動(dòng)發(fā)布上線、數(shù)據(jù)監(jiān)測(cè)等一站式的產(chǎn)品開發(fā)能力。

4.擴(kuò)展性

支持少量的代碼擴(kuò)展，可以實(shí)現(xiàn)一部分個(gè)性化的產(chǎn)品設(shè)計(jì)和開發(fā)需求，也可以和更多第三方工具聯(lián)動(dòng)應(yīng)用，做到功能和信息的互通共享。

和組件庫一樣，低代碼平臺(tái)也是一種提效工具。但它與組件庫的不同之處在于：

1、有成套的成熟解決方案。

低代碼平臺(tái)提供的不僅是原子級(jí)別的組件，也包括頁面的模版、產(chǎn)品功能的框架和操作流程，比如提供各類企業(yè)級(jí)應(yīng)用常見的聚合表、儀表盤、報(bào)表等已經(jīng)成熟的功能界面解決方案。

2、能順暢銜接第三方工具。

3、注重流程而非單點(diǎn)提效。

讓各個(gè)產(chǎn)研環(huán)節(jié)之間更易產(chǎn)生聯(lián)動(dòng)，適用于互聯(lián)網(wǎng)產(chǎn)品研發(fā)的全流程，不再局限于設(shè)計(jì)和開發(fā)環(huán)節(jié)，也可以從業(yè)務(wù)、產(chǎn)品側(cè)直接做輸入。

理想化的情況是，業(yè)務(wù)側(cè)和產(chǎn)品側(cè)也可以輕松地使用低代碼平臺(tái)上提供的解決方案做出高質(zhì)量的“原型圖”，甚至是產(chǎn)品的基礎(chǔ)版本，設(shè)計(jì)師僅需要做部分調(diào)整，開發(fā)檢查優(yōu)化下代碼，產(chǎn)品就可以直接上線，比現(xiàn)在的工作流程要高效很多。

而且當(dāng)產(chǎn)品側(cè)在低代碼平臺(tái)上對(duì)文案做出調(diào)整后，相應(yīng)的代碼也會(huì)直接產(chǎn)生變化，這樣就大大減少 “產(chǎn)品 – 設(shè)計(jì) – 開發(fā)” 這種單線程的溝通方式帶來的細(xì)節(jié)調(diào)整上的時(shí)間成本和錯(cuò)誤率。

二、對(duì)于設(shè)計(jì)師工作的影響

低代碼平臺(tái)帶來的產(chǎn)研方式的革新，對(duì)于不追求個(gè)性化體驗(yàn)的、從0-1的、功能相對(duì)單一、通用的企業(yè)級(jí)產(chǎn)品是合適使用的。這類產(chǎn)品的產(chǎn)研場(chǎng)景中，低代碼平臺(tái)可以代替設(shè)計(jì)師和開發(fā)完成重復(fù)性、低價(jià)值的體力勞動(dòng)。

不過，低代碼平臺(tái)在現(xiàn)階段也并非適用于所有產(chǎn)品。這種方式做出的頁面質(zhì)量和功能自由度會(huì)受限于可視化編輯器所提供的服務(wù)和能力，如果編輯器不支持某種自定義的功能樣式，那么產(chǎn)品形態(tài)在實(shí)現(xiàn)業(yè)務(wù)需求的過程中就會(huì)受限。所以對(duì)于業(yè)務(wù)需求和用戶體驗(yàn)要求較高的業(yè)務(wù)領(lǐng)域，低代碼平臺(tái)目前起到的作用還是有限的。

目前，接觸低代碼平臺(tái)的設(shè)計(jì)師可以被分為兩類，一類是用低代碼平臺(tái)的“用戶”，也就是自己參與的業(yè)務(wù)已經(jīng)開始使用低代碼平臺(tái)做提效工具來做設(shè)計(jì)和研發(fā)了；另一類是設(shè)計(jì)低代碼平臺(tái)的“設(shè)計(jì)師”，也就是自己參與的業(yè)務(wù)就是低代碼平臺(tái)產(chǎn)品的設(shè)計(jì)。

1、對(duì)于「用戶」類的設(shè)計(jì)師

使用低代碼平臺(tái)的一個(gè)核心思想是：低代碼平臺(tái)只是協(xié)助你工作的工具，不是你的替代品。它是手，而你是腦。你的思維和判斷不要被工具所限制。你可以從重復(fù)性和低價(jià)值的工作中解脫出來，更多把工作的重心放在：

1.吃透業(yè)務(wù)

把時(shí)間和精力放在理解業(yè)務(wù)和用戶需求、參與構(gòu)建產(chǎn)品上，嘗試讓設(shè)計(jì)思維更早地介入到產(chǎn)品構(gòu)建的過程中。低代碼平臺(tái)也可以變成你與產(chǎn)品和業(yè)務(wù)的無縫對(duì)接的橋梁，也更便于你了解他們的工作目標(biāo)和方向。

2.去同質(zhì)化

低代碼平臺(tái)的普遍應(yīng)用會(huì)進(jìn)一步帶來企業(yè)級(jí)產(chǎn)品的同質(zhì)化，這個(gè)時(shí)候更需要從用戶需求切入，以商業(yè)、社會(huì)、人文等不同維度的設(shè)計(jì)創(chuàng)新來綜合性地思考去同質(zhì)化的解決方案，提升用戶對(duì)于產(chǎn)品的認(rèn)知，增強(qiáng)產(chǎn)品的差異化。

3.學(xué)新技能

工具在變化，你所掌握的技能也要隨之更新。要充分關(guān)注和了解低代碼平臺(tái)的功能和進(jìn)展，不僅不排斥使用，還要隨之一同發(fā)展。你的工作技能將不再以設(shè)計(jì)繪圖技法為主，要在低代碼平臺(tái)帶來的協(xié)作方式變革中提升新的工作技能。

2、對(duì)于低代碼平臺(tái)的設(shè)計(jì)師

設(shè)計(jì)低代碼平臺(tái)的一個(gè)核心思想是：低代碼平臺(tái)本質(zhì)上研究的是“業(yè)務(wù)模型”、“界面設(shè)計(jì)”與“代碼實(shí)現(xiàn)”三者之間的關(guān)系。所以你可以：

1.從流程側(cè)切入

需求、界面、代碼通過一個(gè)可視化編輯器實(shí)現(xiàn)綁定在一起，其背后所對(duì)應(yīng)的業(yè)務(wù)、設(shè)計(jì)和研發(fā)之間的關(guān)系不可忽視。要保證流程上的無縫對(duì)接和通暢性就需要多了解他們之間的工作協(xié)同方式。

2.從用戶側(cè)切入

從低代碼平臺(tái)的核心用戶入手，為業(yè)務(wù)、設(shè)計(jì)和研發(fā)分別提供有針對(duì)性的功能服務(wù)，以此提高平臺(tái)功能的豐富性、易用性和可拓展性。

現(xiàn)階段也只是低代碼平臺(tái)的起步階段，前路漫漫。如何最大限度地賦予不同類型的用戶操作權(quán)力、最大程度上實(shí)現(xiàn)定制化、擴(kuò)展到更多業(yè)務(wù)領(lǐng)域，都是需要繼續(xù)研究的可課題。

作者：元堯

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》工作經(jīng)驗(yàn)｜低代碼平臺(tái)，會(huì)給設(shè)計(jì)師的工作帶來哪些影響？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

下手前的第一步當(dāng)然是要先搞明白使用場(chǎng)景和功能用途，這個(gè)太基礎(chǔ)了，想必大家都懂。具體到這個(gè)項(xiàng)目來說，它是一個(gè)用于數(shù)據(jù)分析的服務(wù)，后臺(tái)有一個(gè)信息量很大的數(shù)據(jù)庫，通過前臺(tái)進(jìn)行條件過濾后即可得到一張數(shù)據(jù)表。

看到原型我的第一反應(yīng)是：該從哪里開始操作？頁面功能的終點(diǎn)在哪？原因在于，頁面中有三個(gè)主按鈕“生成表格”，“預(yù)覽”和“應(yīng)用條件”，且視覺結(jié)構(gòu)基本扁平。和產(chǎn)品溝通后了解到，當(dāng)前的邏輯是先選擇指標(biāo)，給指標(biāo)排序后就可以生成表格了，針對(duì)表格可以再應(yīng)用條件篩選，最終形成的表格可以導(dǎo)出。

二、結(jié)構(gòu)梳理

2.1 拆分重組功能

設(shè)計(jì)改造一般從大到小作調(diào)整。先優(yōu)化整體結(jié)構(gòu)，盡可能讓功能分區(qū)更明確。理解了原型后不難看出，頁面的配置項(xiàng)分的很開，先在左邊欄加指標(biāo)，再在內(nèi)容去上方排序，生成表格后再去右邊欄條件篩選。這種需要用戶點(diǎn)來點(diǎn)去的結(jié)構(gòu)顯然不太友好，而且細(xì)碎的分割消耗了大量的空間。

該頁面功能大概分為配置和數(shù)據(jù)展示兩大部分，不妨從這個(gè)角度重組頁面功能。配置生成類頁面有這樣幾種常見交互形式：一，分兩步，先配置再生成；二，模態(tài)浮層，通過彈窗或者抽屜配置；三，非模態(tài)，用工具欄或抽屜容納配置項(xiàng)目。為了便于比對(duì)或調(diào)整配置項(xiàng)，非模態(tài)的抽屜更適合操作場(chǎng)景。

功能結(jié)構(gòu)的優(yōu)化得到了如下的改進(jìn)：

• 易于統(tǒng)一卷展配置抽屜，避免了各個(gè)面板獨(dú)立控制和空間浪費(fèi)。
• 減少了配置時(shí)的操作步驟，選好配置項(xiàng)即可一鍵生成。
• 分區(qū)明顯，一邊操作另一邊展示，各司其職。

2.2 方案對(duì)比測(cè)試

對(duì)比測(cè)試方案的目的是盡可能考慮全各種設(shè)計(jì)方案，確定出一個(gè)最符合使用習(xí)慣和操作流程的布置。不論是手畫草圖還是用電腦畫線框圖都可以，期間多和產(chǎn)品或業(yè)務(wù)討論，可以讓對(duì)方理解整個(gè)的推導(dǎo)過程。

不過溝通中有兩點(diǎn)需要注意，首先討論方案前先過濾掉從設(shè)計(jì)的角度看明顯不合理的，評(píng)審的目的是通過多方意見調(diào)解讓方案達(dá)到最優(yōu)，而不是展示工作量。其次是結(jié)構(gòu)和視覺方案盡量分開評(píng)估，否則對(duì)方會(huì)收到海量排列組合后的設(shè)計(jì)方案，評(píng)起來抓不住重點(diǎn)。下面是當(dāng)時(shí)和產(chǎn)品一塊研討的三個(gè)方案：

• 方案一：指標(biāo)一列，過濾條件一列。其中指標(biāo)可以通過頁簽切換全部和已選。
• 方案二：同方案一，但全部指標(biāo)和已選指標(biāo)上下顯示。
• 方案三：全部指標(biāo)單占一列，已選指標(biāo)和過濾條件單占一列。

最終選定了方案三，綜合來看有如下原因：用戶添加條件篩選的頻次低，所以沒有單放一列并且可單獨(dú)卷展；并且方案三的布局在語義上更容易被理解為“庫和待應(yīng)用項(xiàng)”，提供更典型的心理暗示。

過濾條件的結(jié)構(gòu)做了一些特定的優(yōu)化：一，新增功能保持在頭部，避免被擠下去；二，條件關(guān)系配置直接外露，減少點(diǎn)擊的同時(shí)也沒有占用更多空間；三，條件卡片增加了。

至此，需求頁面的結(jié)構(gòu)已經(jīng)定了下來，之后就是常規(guī)意義上的視覺處理了。因?yàn)檫@部分比較細(xì)碎，單獨(dú)來講可能缺乏普適性，所以下面一章總結(jié)了一些常見且通用的設(shè)計(jì)點(diǎn)供大家參考，最后再提供頁面的最終視覺效果供大家參考。

三、視覺效果構(gòu)建

3.1 內(nèi)容元素的背景色

盡量讓內(nèi)容和表單展示在白色卡片上。大部分基礎(chǔ)組件樣式是按白色底色的場(chǎng)景來做的，放在其他顏色的背景上很容易出問題，比如表單的禁用態(tài)或者標(biāo)簽的顏色和底色融為一體時(shí)，可讀性很差，而且有一種不干凈的感覺。當(dāng)然這一條不絕對(duì)，如果深度定制了基礎(chǔ)組件的樣式，或是結(jié)構(gòu)功能簡(jiǎn)單，背景采用其他顏色也是沒問題的。

3.2 陰影和描邊

陰影分割是一種常見的視覺表達(dá)手法，然而B端用戶的顯示器普遍比較糟糕，分辨率低且色域小，太輕的陰影效果不如描邊，有時(shí)甚至?xí)寛D形邊緣看起來很模糊。擔(dān)心顯示效果的話，實(shí)際上可以看一看 macOS 窗口的陰影尺寸和透明度。B端工具設(shè)計(jì)中，功能性比美觀度重要的多。

3.3 易讀性與復(fù)雜度

下次去宜家的時(shí)候可以觀察下結(jié)賬的柜員機(jī)，你會(huì)震驚地看到里面仍然顯示著擬物化界面。元素的質(zhì)感對(duì)現(xiàn)代界面設(shè)計(jì)來說可能是增加了頁面復(fù)雜度，然而放到具體的操作場(chǎng)景中，擬物化界面可以給高速操作的收銀員提供更佳的功能可見性，有益于培養(yǎng)肌肉記憶。所以頁面易讀性與復(fù)雜度之間的平衡，取決于用戶在場(chǎng)景中的操作方式。

3.4 功能顏色的數(shù)量

功能顏色讓用戶不閱讀內(nèi)容就可以初步感知數(shù)據(jù)狀態(tài)，比如警告色，標(biāo)識(shí)色等等。數(shù)量太多時(shí)用戶會(huì)記不住映射關(guān)系，顏色就失去了功能性。一個(gè)常見的錯(cuò)誤是標(biāo)簽的配色，假如一個(gè)系統(tǒng)里有十種標(biāo)簽，千萬不要設(shè)計(jì)十種配色，不僅區(qū)分度低而且視覺上很混亂，盡可能先歸類再配色。再舉審核狀態(tài)的例子，除了成功失敗之外，審核流程還有各式各樣的中間態(tài)，需要異化表現(xiàn)時(shí)，不妨嘗試通過圖形視覺信號(hào)區(qū)分，比如增加圖標(biāo)。

3.5 避免攤大餅

非必要不攤餅。隨著層級(jí)增多，用戶對(duì)層級(jí)歸屬的感知逐漸變差，內(nèi)容區(qū)也越來越窄，視覺效果難以把控。當(dāng)然，在B端系統(tǒng)設(shè)計(jì)中沒有什么完全不可打破規(guī)則，實(shí)在避免不了的話，可以著重突出頂層內(nèi)容或動(dòng)態(tài)提示用戶當(dāng)前聚焦的層級(jí)。比如鼠標(biāo)懸停時(shí)高亮層級(jí)關(guān)系，類似編譯器的代碼區(qū)塊高亮功能。

3.6 數(shù)據(jù)與提示

• 用真實(shí)字段內(nèi)容設(shè)計(jì)：視覺設(shè)計(jì)前找產(chǎn)品或者研發(fā)要一份內(nèi)容字段樣本，有助于提高視覺保真度，同時(shí)避免開發(fā)上線后內(nèi)容擠不下或大面積留白的情況。
• 表單項(xiàng)默認(rèn)值：表單中可以通過感知預(yù)測(cè)填充內(nèi)容，或設(shè)置常用的默認(rèn)配置，提高表單的填寫效率，減少機(jī)械操作。
• 提示信息：提示信息的暴露程度取決于系統(tǒng)功能是否常規(guī)，以及目標(biāo)用戶的理解能力。常用操作不提示，常用但晦澀的功能采用懸停提示，不常用且難懂的功能可以露出提示或幫助中心鏈接。

3.7 數(shù)據(jù)分析頁最終效果

經(jīng)過以上粗略的講解，希望大家對(duì)頁面控件和整體的視覺處理有了一定了解。針對(duì)高度定制化的B端頁面，視覺的核心目的是提高功能可見性和操作易用性，不是單純地去套規(guī)范。

四、工期管理及研發(fā)對(duì)接

除了頁面的設(shè)計(jì)流程，項(xiàng)目管理則是另一個(gè)重點(diǎn)，B端項(xiàng)目經(jīng)常會(huì)倒排工期，個(gè)別戰(zhàn)略導(dǎo)向型的需求更是火燒眉毛。毋庸置疑，兩天工期的設(shè)計(jì)質(zhì)量多半是比不上一周工期的，下面講一講在時(shí)間緊張時(shí)如何保障輸出質(zhì)量。

4.1 按需求表單規(guī)劃

開始設(shè)計(jì)前，根據(jù) PRD 整理出一個(gè)任務(wù)表單，即當(dāng)期需求覆蓋的功能范圍。遇到緊急需求時(shí)，可以按照拆分出來的功能模塊分批交付開發(fā)。B端模塊的設(shè)計(jì)時(shí)間很少會(huì)完全符合預(yù)期，比如在設(shè)計(jì)時(shí)發(fā)現(xiàn)了一個(gè)重大優(yōu)化點(diǎn)，從構(gòu)思概念方案到各方評(píng)估影響需要占用一部分工期，而通過模塊排期表可以更穩(wěn)妥地評(píng)估突發(fā)事件對(duì)后續(xù)輸出的影響，幫助產(chǎn)品評(píng)估是否投入資源做優(yōu)化。

4.2 先輸出核心頁面確認(rèn)方向

先輸出關(guān)鍵頁面給產(chǎn)品和業(yè)務(wù)確認(rèn)，一來讓研發(fā)心里有底，二來控制改稿成本。返工在 B 端項(xiàng)目中很常見，有時(shí)候我甚至?xí)之嫴莞迦フ耶a(chǎn)品過方案，提前評(píng)估可行性，避免方案走了很遠(yuǎn)再被駁回。切忌等到交稿節(jié)點(diǎn)給產(chǎn)品一個(gè)突然驚喜。

4.3 組件與組件狀態(tài)

B端原型通?？此浦挥幸粋€(gè)頁面，而算上各種面板的打開和關(guān)閉，頁面操作狀態(tài)，彈窗，包括定制化組件樣式的說明，工作量并不小。組件狀態(tài)可以留到最后再補(bǔ)充，但務(wù)必和研發(fā)提前協(xié)商技術(shù)方案：首先確定常規(guī)功能能否用現(xiàn)成組件，采用哪款組件，這一部分之后就不再出交互視覺樣式了。其次和研發(fā)同事溝通非標(biāo)組件的交互形式，這樣他們可以先寫框架最后再加樣式，不會(huì)出現(xiàn)研發(fā)空窗。

五、初步排錯(cuò)

交付設(shè)計(jì)稿或者做用戶測(cè)試之前，還差一步驗(yàn)證的工序。過濾掉明顯且粗粒度的問題，可以顯著提高后續(xù)的測(cè)試效率?？陀^上驗(yàn)證可用性，主觀上評(píng)估體驗(yàn)。

5.1 小黃鴨調(diào)試法

小黃鴨調(diào)試法是一個(gè)工程師都知道，但設(shè)計(jì)師很少聽說的測(cè)試方法，本意是通過給桌上的橡皮鴨逐行解釋代碼來排查問題。驗(yàn)證階段不妨也試試這個(gè)方法，給想象中的人物講講界面的使用方法和元素的設(shè)計(jì)原因，講都講不通的功能，想必也不會(huì)特別好用。（認(rèn)識(shí)我的同事都知道我辦公桌上有張青年 Gary Anderson 給一個(gè)領(lǐng)導(dǎo)樣子的人解釋可回收標(biāo)識(shí)設(shè)計(jì)的照片。我的講解對(duì)象就是這個(gè)領(lǐng)導(dǎo)樣子的人，他已經(jīng)駁回了我的很多爛方案。）

5.2 走用戶流程

核對(duì)產(chǎn)品功能沒有缺漏后，就可以檢查用戶流程的流程度了。幾種常見的流程問題包括：不知從何下手；找不到功能入口；操作失誤難以補(bǔ)救；系統(tǒng)出錯(cuò)原因不明。這些問題會(huì)突然地卡住用戶，感受上很糟糕。我們可以找出類似的卡點(diǎn)，提供適當(dāng)?shù)囊龑?dǎo)。假如從設(shè)計(jì)上找不到解決方案，則需要提供可檢索的幫助中心以便用戶自行查閱解決。

結(jié)語

B端產(chǎn)品一般會(huì)有詳細(xì)的文檔，或者培訓(xùn)操作人員。然而以B端產(chǎn)品的體量和非常規(guī)的交互方式，很多操作不好記憶。單純按照原型施工，難以保障易用性。作為設(shè)計(jì)師的一個(gè)關(guān)鍵職責(zé)，便是將產(chǎn)品操作邏輯翻譯成簡(jiǎn)明易懂的頁面和圖形，盡可能鋪平體驗(yàn)的道路。

注1：文章示意圖內(nèi)容由于脫敏需要進(jìn)行了處理，實(shí)際設(shè)計(jì)時(shí)請(qǐng)記得盡量使用真實(shí)字段內(nèi)容。

注2：本文主要介紹流程處理，為避免繁瑣略去了一些視覺設(shè)計(jì)點(diǎn)，想要了解更多可以參考上一篇文章《引起舒適！什么是好用的界面》。

作者：邢禹

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何解析產(chǎn)品原型

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)上，要與產(chǎn)品經(jīng)理保持溝通，清楚地知道產(chǎn)品當(dāng)前的工作方向、目標(biāo)，以及未來的工作計(jì)劃，甚至要通過與產(chǎn)品經(jīng)理溝通，側(cè)面了解領(lǐng)導(dǎo)的期望。
• 對(duì)下，則要跟開發(fā)人員密切配合，跟進(jìn)開發(fā)，推動(dòng)設(shè)計(jì)落地。

與人溝通不是一項(xiàng)簡(jiǎn)單的工作，其中包含了很多為人處事的技巧，這方面我并不在行。但是單純工作層面的溝通而言，我覺得并不復(fù)雜。

今天我們就來討論下設(shè)計(jì)師應(yīng)該如何做好設(shè)計(jì)溝通。主要有以下幾個(gè)方面：

1、深入理解需求，給自己增值

2、找準(zhǔn)關(guān)鍵角色，影響他人

3、主動(dòng)溝通，拉近工作關(guān)系

4、基于用戶場(chǎng)景，提高溝通準(zhǔn)確性

5、重視設(shè)計(jì)評(píng)審，獲得多方認(rèn)可

一、深入理解需求，給自己增值

設(shè)計(jì)師是為產(chǎn)品服務(wù)的，打交道最多的就是產(chǎn)品經(jīng)理，但是產(chǎn)生分歧最多的應(yīng)該也是產(chǎn)品經(jīng)理。根本原因就是產(chǎn)品經(jīng)理和設(shè)計(jì)師會(huì)站在不同的維度去理解需求，產(chǎn)品經(jīng)理主要是從需求價(jià)值、功能設(shè)計(jì)的維度定義需求，而設(shè)計(jì)師則是從用戶體驗(yàn)角度理解需求。

現(xiàn)在很多的設(shè)計(jì)團(tuán)隊(duì)要求設(shè)計(jì)師要去理解業(yè)務(wù)場(chǎng)景、商業(yè)模式，要站在產(chǎn)品的角度思考需求，就是保證設(shè)計(jì)師能與產(chǎn)品經(jīng)理在一個(gè)頻道上溝通，這樣才能產(chǎn)出有價(jià)值的設(shè)計(jì)方案。才能讓產(chǎn)品經(jīng)理認(rèn)可你的能力，讓他覺得你的設(shè)計(jì)方案確實(shí)更加合理、有效，甚至對(duì)你產(chǎn)生依賴性，最終贏得話語權(quán)。

當(dāng)然這非常難，畢竟離了誰，地球都照樣轉(zhuǎn)。但是一旦形成了這樣的工作方法，你會(huì)發(fā)現(xiàn)設(shè)計(jì)工作會(huì)更加容易推進(jìn)，溝通交流也會(huì)更加順暢。

二、找準(zhǔn)關(guān)鍵角色，影響他人

設(shè)計(jì)師想要做成事，需要自下而上地影響別人。

有些時(shí)候，產(chǎn)品經(jīng)理的需求并不清晰準(zhǔn)確。必要時(shí)，設(shè)計(jì)師要拉上更高一級(jí)的角色與產(chǎn)品經(jīng)理一起溝通，例如產(chǎn)品總監(jiān)，將需求進(jìn)一步確定下來。

總監(jiān)這類角色比較重要，平時(shí)設(shè)計(jì)師很難有機(jī)會(huì)直接給領(lǐng)導(dǎo)匯報(bào)，跟產(chǎn)品總監(jiān)或者設(shè)計(jì)總監(jiān)溝通匯報(bào)的機(jī)會(huì)更多。一方面他們的意見比較受領(lǐng)導(dǎo)重視，另一方面他們也比較清楚領(lǐng)導(dǎo)的想法。產(chǎn)品總監(jiān)會(huì)決定是否需要跟領(lǐng)導(dǎo)進(jìn)一步溝通，或者由他們直接跟領(lǐng)導(dǎo)匯報(bào)。

所以跟總監(jiān)匯報(bào)，要能夠?qū)⒃O(shè)計(jì)方案的精髓有效地傳遞給他們，讓他們充分了解并信服設(shè)計(jì)方案。

當(dāng)然如果有機(jī)會(huì)，設(shè)計(jì)師還是要爭(zhēng)取直接給領(lǐng)導(dǎo)匯報(bào)，畢竟自己產(chǎn)出的方案只有自己最熟悉，并且通過匯報(bào)也可以面對(duì)面了解領(lǐng)導(dǎo)的真實(shí)想法。

三、主動(dòng)溝通，拉近工作關(guān)系

1、日常工作溝通

在我們的工作中，會(huì)遇到各種類型的產(chǎn)品經(jīng)理。有強(qiáng)勢(shì)的、有自以為是的等等，但是所謂“伸手不打笑臉人”，大家都是為了產(chǎn)品更好地發(fā)展在積極合作，當(dāng)你主動(dòng)的、真誠地站在產(chǎn)品角度去請(qǐng)教業(yè)務(wù)或者需求時(shí)，大多人還是很配合。

講一下我的個(gè)人經(jīng)歷。

隨著產(chǎn)品線的擴(kuò)張，部門的產(chǎn)品經(jīng)理越來越多，有些沒有太多的交集，最開始對(duì)設(shè)計(jì)師缺少足夠信任，個(gè)別產(chǎn)品經(jīng)理會(huì)繞過交互設(shè)計(jì)師，直接找視覺完成方案后，推動(dòng)開發(fā)上線。有的只是找交互設(shè)計(jì)師做下原型評(píng)審，并不傳達(dá)需求內(nèi)容，效果非常有限，導(dǎo)致設(shè)計(jì)師工作比較被動(dòng)。

這一方面需要在流程制度上去約束產(chǎn)品經(jīng)理，另一方面設(shè)計(jì)師也要與產(chǎn)品經(jīng)理多溝通，提前知道產(chǎn)品規(guī)劃、介入需求?；蛘邔?duì)沒有參與的需求進(jìn)行體驗(yàn)走查，帶著問題去找產(chǎn)品，并提出改進(jìn)方案，讓產(chǎn)品經(jīng)理意識(shí)到設(shè)計(jì)師對(duì)產(chǎn)品的價(jià)值，逐步扭轉(zhuǎn)不利的局面。

剛好最近在搞下季度的產(chǎn)品規(guī)劃，產(chǎn)品經(jīng)理搞得熱火朝天，但是都沒有主動(dòng)將信息同步給設(shè)計(jì)師。

作為產(chǎn)品需求的下游，這種情況似乎也無可厚非。不過如果等著所有的需求都確定了，工作鋪天蓋地壓過來，設(shè)計(jì)師也承受不了大量的設(shè)計(jì)任務(wù)。

在我看來，提前了解需求信息，可以更好地開展后續(xù)設(shè)計(jì)工作。所以就主動(dòng)出擊，找產(chǎn)品經(jīng)理聊聊工作，于是有了以下對(duì)話。

而當(dāng)產(chǎn)品經(jīng)理不知道該做什么或者怎么做時(shí)，設(shè)計(jì)師可以通過自己的專業(yè)能力，例如競(jìng)品分析、數(shù)據(jù)分析等，介入到需求分析中，幫助產(chǎn)品經(jīng)理梳理需求，或者推進(jìn)產(chǎn)品體驗(yàn)升級(jí)。這時(shí)候你的設(shè)計(jì)建議，產(chǎn)品也更容易接納。

2、設(shè)計(jì)目標(biāo)溝通

對(duì)于成熟的設(shè)計(jì)團(tuán)隊(duì)，設(shè)計(jì)師一般都有明確的分工協(xié)作，職責(zé)也比較清晰。單打獨(dú)斗的設(shè)計(jì)師，相對(duì)比較慘。容易陷入被動(dòng)接受工作的局面，今天做個(gè)A產(chǎn)品頁面，明天改個(gè)B產(chǎn)品PPT，后天做C產(chǎn)品的頁面，誰都能提需求。天天看似很忙，結(jié)果工作上不成體系，工作績(jī)效都不知道該怎么寫。

所以設(shè)計(jì)師要做好自我工作的管理，建議設(shè)計(jì)師可以主動(dòng)向產(chǎn)品團(tuán)隊(duì)靠攏。除了日常的項(xiàng)目工作，還要能夠找到一些體現(xiàn)自我價(jià)值的工作，可以更好地展現(xiàn)自驅(qū)能力。例如開展競(jìng)品分析報(bào)告、系統(tǒng)走查、設(shè)計(jì)規(guī)范、組件庫建設(shè)沉淀等等。

這些偏向產(chǎn)品頂層規(guī)劃與設(shè)計(jì)工作，要及時(shí)與產(chǎn)品負(fù)責(zé)人進(jìn)行溝通，保證工作的方向和目標(biāo)與產(chǎn)品整體發(fā)展保持一致，并且最好能夠納入到產(chǎn)品規(guī)劃中，方便后續(xù)工作的開展。

3、抓住問題本質(zhì)、帶著方案溝通

設(shè)計(jì)是具象工作，看到設(shè)計(jì)方案才能做出評(píng)判。在工作溝通時(shí)，除了提出問題，還要盡量帶著方案解決問題。尤其是與領(lǐng)導(dǎo)溝通，不要直接問領(lǐng)導(dǎo)該怎做，而是應(yīng)該告訴領(lǐng)導(dǎo)我的方案是什么，請(qǐng)領(lǐng)導(dǎo)決策。

例如領(lǐng)導(dǎo)對(duì)現(xiàn)在版本不滿意，要改版。我們?cè)撛趺醋瞿兀?

我認(rèn)為，首先要弄清楚領(lǐng)導(dǎo)對(duì)哪些方面不滿意，例如風(fēng)格、顏色，還是框架布局。因?yàn)殡p方對(duì)改版的認(rèn)知可能不一致。搞清楚問題之后，才能更好地開展具體工作。另一方面如果不好與領(lǐng)導(dǎo)直接溝通，還可以與總監(jiān)，產(chǎn)品經(jīng)理溝通討論，他們跟領(lǐng)導(dǎo)接觸更多，得到的信息也更多，可以側(cè)面了解領(lǐng)導(dǎo)的期望。

試圖搞清楚領(lǐng)導(dǎo)喜歡什么風(fēng)格，再著手進(jìn)行設(shè)計(jì)，這種方法可能很難奏效。因?yàn)轭I(lǐng)導(dǎo)的喜好會(huì)發(fā)生變化，可能不經(jīng)意看到的頁面就讓他產(chǎn)生了改版的想法。又或者他今天喜歡這種風(fēng)格，明天喜歡另一種風(fēng)格，這樣會(huì)讓設(shè)計(jì)很難適從。

設(shè)計(jì)師還是需要通過主動(dòng)調(diào)研分析，完成多個(gè)方案后，讓領(lǐng)導(dǎo)做出選擇，這樣可以更深刻地影響領(lǐng)導(dǎo)的思維。

四、基于用戶場(chǎng)景，提高溝通準(zhǔn)確性

例如最近有個(gè)產(chǎn)品需求，最開始是產(chǎn)品經(jīng)理跟我單線溝通的，感覺需求比較簡(jiǎn)單，確實(shí)沒有仔細(xì)地了解用戶場(chǎng)景，就在產(chǎn)品原型基礎(chǔ)上修改了一版交互方案。后來產(chǎn)品經(jīng)理找到我說，業(yè)務(wù)需求方對(duì)方案還有些異議。于是進(jìn)行了第二輪溝通，這次邀請(qǐng)了產(chǎn)品經(jīng)理、業(yè)務(wù)方、還有開發(fā)同事參會(huì)。

剛開始討論的是第一輪的交互方案，發(fā)現(xiàn)產(chǎn)品經(jīng)理轉(zhuǎn)述業(yè)務(wù)方需求時(shí)，對(duì)信息理解有誤，于是重新討論用戶場(chǎng)景和需求。在會(huì)上快速完成了一版框圖原型，但是緊接著業(yè)務(wù)需求方又考慮到了一個(gè)新的場(chǎng)景，發(fā)現(xiàn)框圖方案仍然無法滿足要求，于是方案又被推翻了。

最后的會(huì)議由于時(shí)間關(guān)系，只是討論清楚了用戶場(chǎng)景，產(chǎn)品經(jīng)理還要再梳理一下才能轉(zhuǎn)化為產(chǎn)品需求，后續(xù)還要再拉會(huì)討論。

一個(gè)產(chǎn)品需求涉及到各種崗位角色，單方面溝通容易出現(xiàn)信息偏差，或者信息傳遞不到位。在關(guān)鍵的節(jié)點(diǎn)，例如需求討論、設(shè)計(jì)評(píng)審，應(yīng)當(dāng)召集所有相關(guān)人員，盡量避免單線溝通。

同時(shí)要基于用戶場(chǎng)景溝通，不能含糊其詞，可以通過5WH方法刨根問底，真正地理解需求，否則就可能出現(xiàn)設(shè)計(jì)返工。

五、重視設(shè)計(jì)評(píng)審，獲得多方認(rèn)可

設(shè)計(jì)評(píng)審是非常重要的溝通方式，一般分為兩種，內(nèi)部評(píng)審和外部評(píng)審。

1、內(nèi)部評(píng)審

內(nèi)部評(píng)審指的是設(shè)計(jì)團(tuán)隊(duì)內(nèi)部的評(píng)審，主要作用是方案查缺補(bǔ)漏和正式評(píng)審預(yù)演。

設(shè)計(jì)師在評(píng)審過程中需要講清楚產(chǎn)品需求是什么，業(yè)務(wù)流程、競(jìng)品分析、用戶分析，設(shè)計(jì)思考、以及設(shè)計(jì)方案等等。當(dāng)然由于現(xiàn)在都是敏捷開發(fā)，一些需求都是比較小的迭代，所以前期的分析可以簡(jiǎn)單講解下，重點(diǎn)是要講清楚需求和設(shè)計(jì)方案，讓其他設(shè)計(jì)師了解需求背景和內(nèi)容，并對(duì)設(shè)計(jì)方案提出改進(jìn)意見。

2、外部評(píng)審

外部評(píng)審更多的是確認(rèn)設(shè)計(jì)方案，而不是討論設(shè)計(jì)方案。同時(shí)可以拉通各方面信息，并將最后的評(píng)審結(jié)果傳遞給需求的相關(guān)責(zé)任人，作為后續(xù)工作的依據(jù)。

為了評(píng)審效率，在正式評(píng)審前，設(shè)計(jì)師可以拉上業(yè)務(wù)方、產(chǎn)品經(jīng)理做小范圍的方案評(píng)審，讓需求最直接的相關(guān)人員，確認(rèn)方案是否正確，并達(dá)成一致。保證正式外審方案受到質(zhì)疑時(shí)，獲得他們的支持，或者由他們出面解釋一些業(yè)務(wù)問題，更容易讓其他人員接受。

正式的外部評(píng)審可能會(huì)包括一些業(yè)務(wù)方的領(lǐng)導(dǎo)、產(chǎn)品總監(jiān)、設(shè)計(jì)總監(jiān)、開發(fā)、測(cè)試等人員。設(shè)計(jì)師需要重點(diǎn)講解從用戶體驗(yàn)角度對(duì)需求的拆解和分析，以及完整的設(shè)計(jì)方案。當(dāng)發(fā)生意見分歧時(shí)，可以通過競(jìng)品分析、數(shù)據(jù)分析等輔助論證方案。

設(shè)計(jì)外審時(shí)，設(shè)計(jì)師要面對(duì)各個(gè)團(tuán)隊(duì)的挑戰(zhàn)，但是也是展示個(gè)人能力的好機(jī)會(huì)。畢竟平時(shí)不會(huì)有各個(gè)崗位的領(lǐng)導(dǎo)、同事，能夠坐下來聽你講方案。

如果不重視設(shè)計(jì)評(píng)審，完成了設(shè)計(jì)方案，往群里一丟或者發(fā)個(gè)郵件就萬事大吉了。其實(shí)是失去了一次表現(xiàn)自己的機(jī)會(huì)。同時(shí)也無法將足夠的設(shè)計(jì)信息有效地傳遞給上下游，缺少了確認(rèn)的過程，后面容易造成各方面的信息混亂、扯皮。

總結(jié)

立足于做事本身，你會(huì)發(fā)現(xiàn)工作中的溝通相對(duì)要簡(jiǎn)單很多。上面說了那么多，可以歸納為以下3點(diǎn)：

1、用心溝通

2、主動(dòng)溝通

3、及時(shí)溝通

作者：子牧先生

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)師能力建設(shè)（1）:如何更好地進(jìn)行設(shè)計(jì)溝通

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司