如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在設(shè)計(jì)的時(shí)候，各種視覺(jué)要素以有序的方式排列，設(shè)計(jì)師需要通過(guò)對(duì)各部分空間的精妙設(shè)置來(lái)實(shí)現(xiàn)這一點(diǎn)。通常而言，我們的目光總會(huì)被最引人注目的部分吸引——無(wú)論它是視覺(jué)主體還是負(fù)空間。視覺(jué)主體和負(fù)空間，兩者都很重要，尤其當(dāng)你需要平和地呈現(xiàn)一個(gè)和諧、連貫、天衣無(wú)縫的設(shè)計(jì)。那么在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品中，設(shè)計(jì)師到底利用空間傳達(dá)出怎樣的一個(gè)故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。

人類(lèi)的大腦天生就能把規(guī)律性的散點(diǎn)連接起來(lái)，并對(duì)目之所及的事物賦予意義。設(shè)計(jì)是一個(gè)創(chuàng)造性的領(lǐng)域，是形式和空間的相互融合，并隨之創(chuàng)造各種各樣的體驗(yàn)。無(wú)論我們接觸到什么樣的設(shè)計(jì)作品，我們的大腦都會(huì)本能地將作品解構(gòu)為更簡(jiǎn)單的各個(gè)組件，這些組件由基本的形狀和不同的形態(tài)組成，而這些形狀和形態(tài)則與空間息息相關(guān)。過(guò)往豐富的體驗(yàn)與經(jīng)歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識(shí)別出這些特定的設(shè)計(jì)形式。

正空間，或者說(shuō)顯著的設(shè)計(jì)主體，構(gòu)成了設(shè)計(jì)的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負(fù)空間多數(shù)情況下是指背景或大量留白。

文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個(gè)以正負(fù)空間之間有著強(qiáng)對(duì)比的經(jīng)典設(shè)計(jì)案例。

就像正空間似乎支配著負(fù)空間一樣，兩者都被用來(lái)平衡地傳達(dá)一個(gè)和諧、連貫的設(shè)計(jì)理念。

在平衡的構(gòu)圖中，設(shè)計(jì)的正負(fù)空間都是相互配合、相互補(bǔ)充的，形成一個(gè)無(wú)縫、美觀的整體。相反，不平衡的構(gòu)圖會(huì)讓觀眾感到不適，傳達(dá)出一個(gè)不完整的、扭曲的故事。

我們的設(shè)計(jì)在表達(dá)什么？

網(wǎng)頁(yè)設(shè)計(jì)的好壞很大程度上取決于它的實(shí)用性和可用性。如果你的設(shè)計(jì)技巧很差，那么網(wǎng)頁(yè)設(shè)計(jì)的整體效果和表現(xiàn)都會(huì)受到影響。但從另一個(gè)角度來(lái)看，在「內(nèi)容為王」的時(shí)代，如果空間布局使用不當(dāng)，內(nèi)容將對(duì)您的網(wǎng)站產(chǎn)生顯著的負(fù)面影響。

如果你認(rèn)為你的開(kāi)發(fā)技能很棒，但你的設(shè)計(jì)技能可能需要更多的改進(jìn)，那這篇文章對(duì)你就太合適了。在本文中，我們將討論：

• 正負(fù)空間之間的關(guān)系、重要性及應(yīng)用；
• 空間與認(rèn)知知覺(jué)的關(guān)系；
• 格式塔原理及其它在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

我們還將討論一些真實(shí)的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例，探討每個(gè)案例如何體現(xiàn)格式塔原理，以及它對(duì)空間的創(chuàng)造性使用。

話不多說(shuō)，一起開(kāi)始學(xué)習(xí)吧。

一、正負(fù)空間的關(guān)系、重要性及應(yīng)用

空間由兩個(gè)主要維度組成：正空間和負(fù)空間。正空間是可被直接感知到的視覺(jué)元素，負(fù)空間則為元素以外的留白和間隙。如前所述，正的是物體，負(fù)的是物體后面可以通常被忽略的留白區(qū)域。一個(gè)是焦點(diǎn)，另一個(gè)是背景。在前者產(chǎn)生活動(dòng)和刺激時(shí)，后者則保持靜止和模糊。一個(gè)是月亮，另一個(gè)是環(huán)繞著它的暗夜。

在網(wǎng)頁(yè)設(shè)計(jì)中，正負(fù)空間相互作用，共同形成構(gòu)圖，傳達(dá)理念。只有當(dāng)正負(fù)空間通過(guò)對(duì)比來(lái)區(qū)分，同時(shí)又向更大的區(qū)域延伸時(shí)，才會(huì)產(chǎn)生視覺(jué)層次（腦補(bǔ)一下陰陽(yáng)太極圖吧）。

正負(fù)空間的交匯之處就是信息的交匯點(diǎn)。負(fù)空間拱衛(wèi)著正空間元素，讓后者更加突出和顯著。

通常而言，正空間在絕大多數(shù)時(shí)候起主導(dǎo)作用，實(shí)際上負(fù)空間同樣重要。負(fù)空間的優(yōu)點(diǎn)在于:

• 創(chuàng)建易于遵循的視覺(jué)層次；
• 吸引注意力，營(yíng)造焦點(diǎn)，減少分心；
• 幫助營(yíng)造邊界，突出焦點(diǎn)；
• 讓頁(yè)面更容易被掃讀；
• 使頁(yè)面看起來(lái)自然；
• 不借助外力的情況下，闡明視覺(jué)元素之間的關(guān)系；
• 有助于保持頁(yè)面干凈清爽；
• 強(qiáng)化網(wǎng)頁(yè)的視覺(jué)風(fēng)格和外觀。

設(shè)計(jì)中的負(fù)空間相反并不是負(fù)面的。當(dāng)正負(fù)空間比例平衡得當(dāng)時(shí)，兩者在視覺(jué)上會(huì)顯得非常舒適。而當(dāng)其中一個(gè)占據(jù)主導(dǎo)地位，并給人一種「過(guò)于擁擠」或「空洞無(wú)物」的印象時(shí)，混亂才會(huì)發(fā)生。在這兩種情況下，受眾都無(wú)法處理如此復(fù)雜的信息，因此，而這樣的空間設(shè)計(jì)是不符合網(wǎng)頁(yè)設(shè)計(jì)的基本原則和設(shè)計(jì)動(dòng)機(jī)的。

這是一個(gè)網(wǎng)頁(yè)模板，它展現(xiàn)了何為「內(nèi)容錯(cuò)位」和「空間混亂」:

△ 布局混亂

△ 空間失衡

△ 適當(dāng)?shù)牟季终{(diào)整

△ 網(wǎng)頁(yè)設(shè)計(jì)中空間的合理運(yùn)用

有意思的是，當(dāng)談到空間的概念和布局出現(xiàn)時(shí)，質(zhì)疑聲也隨之而起。

• 是正空間被負(fù)空間包圍，還是負(fù)空間被正空間吞噬？
• 如何確定正負(fù)空間的比例？
• 兩種空間類(lèi)型中，哪一個(gè)作為焦點(diǎn)對(duì)象？
• 是否必須突出其中一個(gè)而忽略另一個(gè)，以便向觀眾傳達(dá)設(shè)計(jì)師的預(yù)期感知？
• 我將如何通過(guò)正負(fù)空間之間的變化讓設(shè)計(jì)出現(xiàn)質(zhì)的變化？

類(lèi)似的問(wèn)題只能在理解基本概念后再來(lái)作答。黃金經(jīng)驗(yàn)法則告訴我們——簡(jiǎn)單是最好的策略。

在文章開(kāi)頭，我曾提到在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，盡量創(chuàng)建簡(jiǎn)單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶?；驈谋砻嫔峡?，網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)在于增加網(wǎng)站的視覺(jué)吸引力，使用戶操作更為簡(jiǎn)便。

二、空間與認(rèn)知知覺(jué)之間的聯(lián)系

我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯(lián)系。因此它會(huì)將當(dāng)前的視覺(jué)信息與之前的經(jīng)驗(yàn)進(jìn)行比對(duì)。為了成為一名的網(wǎng)頁(yè)設(shè)計(jì)師，你必須先了解大腦是如何感知周?chē)h(huán)境的。它可以幫助你選擇特定的視覺(jué)元素，利用它們來(lái)影響觀眾的感知。

偉大的設(shè)計(jì)師明白心理學(xué)在視覺(jué)感知中所扮演的強(qiáng)大角色。當(dāng)某人的目光與你的設(shè)計(jì)作品相遇時(shí)會(huì)發(fā)生什么？他們對(duì)你的文章所傳達(dá)的信息有何反應(yīng)？——?jiǎng)诶げ际玻珹utodesk 品牌內(nèi)容策略師

作為設(shè)計(jì)師，你必須清楚地了解視覺(jué)設(shè)計(jì)和心理學(xué)是如何相互聯(lián)系、相互影響的。換句話說(shuō)，開(kāi)發(fā)以用戶為中心的簡(jiǎn)單界面，借助正負(fù)空間進(jìn)行設(shè)計(jì)主要依靠格式塔原理，它可以幫助你理解和控制視覺(jué)和心理的聯(lián)系。

三、網(wǎng)頁(yè)設(shè)計(jì)中的「格式塔原則」

格式塔在德語(yǔ)中是「形式」的意思。它更多的是一個(gè)概念而不是一個(gè)單純的詞匯，它最基本的概念是：

整體大于各個(gè)部分的總和?！獛?kù)爾特·考夫卡（美籍德裔心理學(xué)家，格式塔心理學(xué)的代表人物之一）

當(dāng)單個(gè)部分的集合以某種方式統(tǒng)一時(shí)，它們?cè)谖覀兊母兄?dāng)中就是一組。我們把元素看作一個(gè)整體，這一概念或理論基本適用于所有的設(shè)計(jì)媒介：我們不把文本、顏色和形狀看作單獨(dú)的元素，而是把整個(gè)網(wǎng)頁(yè)看作一個(gè)整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹(shù)，就像我們?cè)诳春Ｑ髸r(shí)看不到水滴一樣。

格式塔原則描述了當(dāng)特定的條件出現(xiàn)時(shí)，人類(lèi)大腦是如何感知視覺(jué)成分的。它幫助大腦創(chuàng)造視覺(jué)圖像。因此，格式塔原理通常會(huì)應(yīng)到下面六個(gè)主要類(lèi)別：

• 圖形和背景
• 接近性原則
• 對(duì)稱和秩序
• 相似性
• 封閉性
• 連續(xù)性

1. 圖像和背景

「圖形」是直觀地、明顯地與背景分離的物體。

目前最經(jīng)典的例子是圣杯——兩個(gè)鏡面對(duì)稱輪廓構(gòu)成了花瓶。當(dāng)你第一次看到這張照片的時(shí)候，你的眼睛會(huì)立即被吸引到畫(huà)面上看起來(lái)最聚焦的視覺(jué)主體上，可能是相互對(duì)立的面孔，也可能是花瓶。當(dāng)你的大腦在調(diào)整你的焦點(diǎn)時(shí)，背景或花瓶被模糊了，在那一刻，你的大腦直覺(jué)地在圖像中感知到背景。

過(guò)了一會(huì)兒，你會(huì)注意到背景中的花瓶，并意識(shí)到它本來(lái)就在那里。盡管圖形和基本原則看起來(lái)模棱兩可，設(shè)計(jì)師常常創(chuàng)造視覺(jué)上吸引人的超現(xiàn)實(shí)和虛幻藝術(shù)，并將之運(yùn)用于網(wǎng)頁(yè)設(shè)計(jì)。

有時(shí)，圖形與背景之間的關(guān)系是穩(wěn)定的，而這種穩(wěn)固的視覺(jué)關(guān)系使得兩者之間，產(chǎn)生區(qū)別。這種關(guān)系有的時(shí)候又是不穩(wěn)定的，這意味著圖形和背景是無(wú)法清晰區(qū)分的。由于這種關(guān)系的模糊性，用戶會(huì)很自然地開(kāi)始困惑。

為了讓大家直觀地感受到圖形和背景之間的關(guān)系，讓我們?cè)敿?xì)的拿幾個(gè)案例來(lái)進(jìn)行討論。這些例子都集中在圖形-背景關(guān)系中的三個(gè)主要方面：對(duì)比度、Box 區(qū)塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關(guān)系到內(nèi)容的區(qū)分和視覺(jué)的縱深。

在下面的第一個(gè)例子中，Trellis 使用了一個(gè)全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關(guān)系明確，該關(guān)系清楚地展示出了細(xì)節(jié)、色彩和尺寸上的差異。

頁(yè)面中的文字是位于中央的手寫(xiě)風(fēng)格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構(gòu)成對(duì)比的白色文本是吸引用戶注意力的焦點(diǎn)，這使得文本在畫(huà)面中是高度可見(jiàn)的。從另一個(gè)角度來(lái)看，背景圖片是模糊的，所以清晰的文本會(huì)非常醒目。這些都表明，這里的文本被優(yōu)先考慮為圖形或正空間，而模糊的圖像被用作背景或負(fù)空間，從而強(qiáng)烈地暗示了圖形和背景之間的關(guān)系。

下一個(gè)案例是下圖方框里的內(nèi)容。 Ocean Health Index 巧妙地利用了框內(nèi)區(qū)域的內(nèi)容將圖片與背景分離開(kāi)來(lái)。這是你在瀏覽他們的網(wǎng)站時(shí)看到的：

當(dāng)你第一次瀏覽這個(gè)頁(yè)面時(shí)，哪個(gè)部分會(huì)吸引你的注意力？你會(huì)發(fā)現(xiàn)，它的主要文本為白色和藍(lán)色背景構(gòu)成對(duì)比，而更加醒目的是是兩個(gè)與文字對(duì)比鮮明的 Box 區(qū)塊。前者借助了深色背景和文本色彩上的差異，構(gòu)造對(duì)比度。而 Box 區(qū)塊本身的色彩和背景色構(gòu)成對(duì)比的同時(shí)，還和更靠前的文本構(gòu)成色彩對(duì)比。

背景使用了微妙的色調(diào)，使數(shù)字得以鮮明地展現(xiàn)，并突出細(xì)節(jié)。方框的運(yùn)用使它們?cè)陧?yè)面上清晰可見(jiàn)。

一些網(wǎng)站還通過(guò)添加陰影來(lái)表現(xiàn)物與背景的關(guān)系，產(chǎn)生一種圖象被置于背景之上的感覺(jué)。以下截圖來(lái)自于 serious unsweet.com：

Seriously Unsweetened 的著陸頁(yè)使用了不止一種方法來(lái)保持圖形與背景的平衡關(guān)系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來(lái)。背景之上的元素都是「正空間」，圖中的物體呈現(xiàn)在背景的映襯下，有一種被置于「頂部」的錯(cuò)覺(jué)。而陰影并沒(méi)有直接用在圖片和文本上，而是應(yīng)用在圖片的內(nèi)部，這讓我們注意到在主要圖像內(nèi)部還有另一層視覺(jué)元素，這意味著里面還有一層圖片-背景關(guān)系——這是一個(gè)非常智慧的設(shè)計(jì)。

2. 接近性原理

接近性是指頁(yè)面中元素之間的接近程度。網(wǎng)頁(yè)中的不同元素可以組合在一起，不同的接近程度會(huì)帶來(lái)不同的關(guān)聯(lián)屬性。除了視覺(jué)特征上的接近性之外，這些元素與其他頁(yè)面元素之間的距離接近度也會(huì)自動(dòng)地在觀眾的腦海中產(chǎn)生關(guān)聯(lián)感。

從圖像到文本、導(dǎo)航欄到網(wǎng)頁(yè)表單，這種接近性原則在網(wǎng)頁(yè)設(shè)計(jì)中適用范圍非常廣。將類(lèi)似的內(nèi)容組合在一起時(shí)，它將在元素之間創(chuàng)建關(guān)聯(lián)，為觀者提供更好的視覺(jué)體驗(yàn)。

以下是 Mashable 網(wǎng)站導(dǎo)航顯示的運(yùn)用接近度的案例：

在上方的截圖中，我們可以清楚地看到如何將相同類(lèi)別的元素放在一起，以顯示它們與主菜單的關(guān)系。由于顏色和文本大小的選擇，使觀者的目光自動(dòng)被吸引到主標(biāo)題下的子欄目上。

除了導(dǎo)航欄外，基于網(wǎng)格的內(nèi)容也符合黃金比例的接近性。亞馬遜的產(chǎn)品列表就是最好的例子：

這個(gè)案例體現(xiàn)的是接近性還是相似性還有待討論。如你所見(jiàn)，具備視覺(jué)接近性的同類(lèi)產(chǎn)品使用狹窄的留白進(jìn)行分組和分隔。這種接近性會(huì)指示用戶在類(lèi)似的產(chǎn)品列表中，對(duì)其目標(biāo)產(chǎn)品基于購(gòu)買(mǎi)偏好進(jìn)行排序。此外，封閉性原則也在類(lèi)似項(xiàng)目的清單中發(fā)揮了作用。

現(xiàn)在，我們來(lái)仔細(xì)看看 Basecamp 的網(wǎng)頁(yè)表單設(shè)計(jì)，它在網(wǎng)頁(yè)設(shè)計(jì)中顯示了另一種接近性的理想情況：

可以看到上圖中的表單是被劃分為兩個(gè)主要部分的：個(gè)人信息和 ID 生成兩個(gè)部分。第一部分被暗示為最重要的字段，第二部分則是一個(gè)次要的需求。這兩個(gè)部分的標(biāo)題都因顏色和字體大小的不同而產(chǎn)生區(qū)別。在這個(gè)網(wǎng)頁(yè)表單中，接近度是一個(gè)重要指標(biāo)，它將網(wǎng)頁(yè)中呈現(xiàn)的信息按優(yōu)先級(jí)排列。

3. 對(duì)稱和秩序

對(duì)稱是指兩個(gè)元素呈現(xiàn)出鏡像關(guān)系。它可以被看作是把一個(gè)物體一分為二的平衡。真實(shí)的對(duì)稱圖形包括等邊三角形、圓形和正方形等幾何圖像。

人類(lèi)的大腦會(huì)本能地渴望在面孔中找尋「平衡」和「對(duì)稱」，這在美學(xué)上是令人愉悅的。大腦也傾向于在其他物體中找到對(duì)稱，因?yàn)閷?duì)稱創(chuàng)造和諧，讓觀者在觀看圖像時(shí)感到舒適。

下面是 HvD Fonts 在網(wǎng)頁(yè)設(shè)計(jì)中體現(xiàn)對(duì)稱性的一個(gè)很好的案例：

這個(gè)頁(yè)面不僅顯示了典型的圖形-背景關(guān)系，而且強(qiáng)調(diào)了對(duì)稱性原則的運(yùn)用。頁(yè)面被分成四等份，字體大小和顏色相似。四個(gè)部分中的每個(gè)部分的背景都具有相同的主題色和灰度效果。你也可以注意到負(fù)空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。

對(duì)稱性原則還可以衍生出了另一個(gè)概念：在網(wǎng)頁(yè)設(shè)計(jì)中，不對(duì)稱會(huì)使觀感不佳，必須謹(jǐn)慎使用。許多網(wǎng)站使用不對(duì)稱作為平衡間距的元素——非常規(guī)的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營(yíng)銷(xiāo)理念是不對(duì)稱，Xplode 以獨(dú)特的美觀悅目的方式引發(fā)不對(duì)稱。

這個(gè)網(wǎng)頁(yè)利用視覺(jué)錯(cuò)覺(jué)和不對(duì)稱，抓住了觀者的眼球。作為正空間的物體被放置在一個(gè)不對(duì)稱的布局之下，在負(fù)空間中創(chuàng)造了強(qiáng)烈的視覺(jué)吸引力。色彩是兩個(gè)空間和諧的主要因素，并為觀者創(chuàng)造了一種自然的聯(lián)系。左邊的圖形也有很強(qiáng)的平衡性，而右邊的則是帶來(lái)更強(qiáng)的視覺(jué)吸引力。你覺(jué)得這個(gè)設(shè)計(jì)如何呢？

4. 相似性原理

相似性與接近性原理密切相關(guān)的原因，是相似分組對(duì)象之間共享屬性的質(zhì)量。無(wú)論是顏色、形狀、形態(tài)、大小、方向或任何其他屬性，當(dāng)這些屬性中的一個(gè)或多個(gè)在鄰近對(duì)象中共享時(shí)，相似性將占上風(fēng)。

即使正空間的元素看起來(lái)沒(méi)有明顯的聯(lián)系，由于相似性原理，它們也會(huì)與負(fù)空間元素區(qū)分開(kāi)。

看看這些 UrbanDecay 的商品列表：

雖然上面的商品各不相同，但在位置、色彩、產(chǎn)品布局、表現(xiàn)方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類(lèi)產(chǎn)品中獨(dú)樹(shù)一幟。這顯然是一種營(yíng)銷(xiāo)策略，目的是在不損害頁(yè)面整體對(duì)稱和美觀的情況下吸引注意力。這里要考慮的另一點(diǎn)是，尺寸上的相似性使其他圖像與相似的產(chǎn)品類(lèi)別區(qū)分開(kāi)來(lái)。

除了產(chǎn)品展示之外，正空間可以與相似度結(jié)合使用，也可以與負(fù)空間結(jié)合使用。

讓我們來(lái)看看 influenster 的著陸頁(yè)：

上面例子中對(duì)齊的邊框也運(yùn)用了相似性原理。雖然每個(gè)正空間元素是不同的，但是相似的感覺(jué)是通過(guò)整個(gè)頁(yè)面中一致的文本字段來(lái)傳達(dá)的。風(fēng)格、布局和主題都是相似的，因此帶來(lái)了統(tǒng)一的視覺(jué)效果。

5. 封閉性原理

你是否曾經(jīng)遇到過(guò)這樣一幅畫(huà)面，看上去是閉合的，但實(shí)際上是開(kāi)放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補(bǔ)」不完整物體的空白，并利用我們的視覺(jué)感知來(lái)使圖形完整化。

正空間和負(fù)空間一起構(gòu)成一個(gè)整體。最好的案例就是負(fù)空間中隱藏的形狀和形式，這要求對(duì)正空間中要傳達(dá)的信息進(jìn)行評(píng)估。在封閉空間創(chuàng)造性地使用著正負(fù)空間，可以產(chǎn)生有趣但簡(jiǎn)單的設(shè)計(jì)。

下面是 Magu Kambucha 的設(shè)計(jì)圖：

在這個(gè)案例中，可以看到封閉性和圖形-背景關(guān)系的平衡。瓶子和后面的粗體文字構(gòu)成對(duì)比，背景則是和兩者都構(gòu)成對(duì)比的柔粉色。封閉性體現(xiàn)在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個(gè)「K」和最后一個(gè)「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺(jué)自動(dòng)完成的，整個(gè)形式開(kāi)始成形，意義也隨之成形。

下面是 Cult 的截圖：

即使文本沒(méi)有寫(xiě)得很清楚，我們的頭腦可以很容易地讀到 CULT 這個(gè)詞。即使單詞不完整，文本的排列和對(duì)齊也可以使其易于辨認(rèn)。

6. 連續(xù)性原理

最后，根據(jù)一般格式塔原則，連續(xù)性遵循模式，即引導(dǎo)實(shí)現(xiàn)遵循一致的路徑，建立從一個(gè)對(duì)象到另一個(gè)對(duì)象的線性模式。

在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續(xù)性的原理比色彩的力量更能引導(dǎo)用戶的視覺(jué)感知。當(dāng)我們借助負(fù)空間在視覺(jué)元素中畫(huà)出路徑，我們的眼睛傾向于優(yōu)先感知正負(fù)空間之間的界限。

腦補(bǔ)出來(lái)的這條連續(xù)的線條是我們?cè)谠O(shè)計(jì)中更應(yīng)該引入的視覺(jué)線索。

讓我們來(lái)看看 Crypton Trading 網(wǎng)站中的視覺(jué)線索設(shè)計(jì)：

看到頁(yè)面右半部分設(shè)計(jì)的完美延續(xù)了嗎？不管背景的明暗色調(diào)如何變化，圖案在頁(yè)面上的變化都非常顯著。當(dāng)你向下滾動(dòng)時(shí)，你會(huì)看到圖案和顏色是如何以連續(xù)和無(wú)縫的運(yùn)動(dòng)變化的。在這里，色調(diào)的變化是可以忽略的，我們所看到的是一個(gè)連續(xù)的線和點(diǎn)的模式。

另一個(gè)很好的例子是 OscilloScope 網(wǎng)站：

該網(wǎng)站借用連續(xù)性法則，將網(wǎng)站用戶引入到工作室的 360 度視角中，他們可以在導(dǎo)航中選擇所需的子欄目。

影片《Cargo》的著陸頁(yè)也使用了連續(xù)性法則：滾動(dòng)式的導(dǎo)航，以線性運(yùn)動(dòng)的方式讓文本漂浮在網(wǎng)站上。由于 LOGO 是垂直展現(xiàn)的，所以用戶必須向下滾動(dòng)才能看到它的全貌。當(dāng)頁(yè)面向下滾動(dòng)時(shí)，靜態(tài) LOGO 開(kāi)始與并行的文本塊一起浮動(dòng)。導(dǎo)航引導(dǎo)用戶經(jīng)歷不同層次的體驗(yàn)，而不會(huì)干擾隱藏在下面的內(nèi)容。

由于我們的眼睛通常遵循最平滑的路徑，設(shè)計(jì)師可以使用這樣的方式來(lái)創(chuàng)建引導(dǎo)路徑。

總結(jié)

在這篇文章中，我們討論了格式塔原則與網(wǎng)站 UI 的正負(fù)空間之間的關(guān)系。通過(guò)一些真實(shí)的案例，讓大家清楚地知道如何運(yùn)用簡(jiǎn)單有效的方法來(lái)改變?cè)O(shè)計(jì)的觀感。關(guān)鍵是使用這些原理來(lái)設(shè)計(jì)的時(shí)候，可以達(dá)到 1 + 1 > 2 的效果。

人類(lèi)是根據(jù)感知來(lái)思考的——主要是基于視覺(jué)。根據(jù)格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個(gè)元素。

正負(fù)空間幫助我們區(qū)分、回憶、感知并識(shí)別理解。在格式塔原理的引導(dǎo)下，我們能夠更好地在網(wǎng)頁(yè)設(shè)計(jì)中利用不同元素來(lái)創(chuàng)造吸引人的作品。因?yàn)榭臻g對(duì)于任何設(shè)計(jì)師來(lái)說(shuō)都是一件復(fù)雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認(rèn)識(shí)到空間在設(shè)計(jì)中的重要性、有效性，繼而使自己成為網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的佼佼者。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

篩選是資源聚合類(lèi)APP中不可缺少的功能，可幫用戶快速、精準(zhǔn)地找到需要內(nèi)容信息，根據(jù)資源分類(lèi)形式的不同有多種篩選類(lèi)型，并且不同的篩選類(lèi)型還可以進(jìn)行自由組合，讓復(fù)雜的內(nèi)容信息更容易被篩選出來(lái)。

目錄

1. 橫向tab式篩選

2. 標(biāo)簽篩選

3. 下拉篩選

4. 底部篩選

5. 抽屜式篩選

1. 橫向tab式篩選

這是最常見(jiàn)的篩選樣式，屬于一級(jí)篩選。通常出現(xiàn)在導(dǎo)航欄或者是導(dǎo)航欄目的下方，根據(jù)分類(lèi)層級(jí)的多少有4種展現(xiàn)形式。

一個(gè)層級(jí)

• 分類(lèi)2~5個(gè)：所有類(lèi)目都可以直接在tab欄目上展示出來(lái)，用戶可快速地在各個(gè)分類(lèi)之間進(jìn)行切換；

• 分類(lèi)大于5個(gè)：所有類(lèi)目以相同的間距進(jìn)行橫向排布，引入橫滑操作，方便用戶瀏覽被隱藏的分類(lèi)信息；有些產(chǎn)品也會(huì)在欄目右側(cè)增加下拉操作，點(diǎn)擊后下拉展示所有的分類(lèi)，用戶可對(duì)所有分類(lèi)進(jìn)行直觀的瀏覽；

• 
  

兩個(gè)層級(jí)分類(lèi)

• Tab 欄目上只展示推薦分類(lèi)或者用戶自己選擇的分類(lèi)

當(dāng)內(nèi)容分類(lèi)有兩個(gè)層級(jí)且分類(lèi)比較多的時(shí)候，產(chǎn)品會(huì)根據(jù)用戶的喜好推薦幾種分類(lèi)在tab上進(jìn)行展示；右側(cè)有篩選操作，點(diǎn)擊后在一個(gè)頁(yè)面里展示所有的分類(lèi)。用戶可以在這個(gè)頁(yè)面自主選擇增減展示在tab上的分類(lèi)，并且可以調(diào)整展示的順序。

交互細(xì)節(jié)

• 用戶在不同的類(lèi)目間進(jìn)行切換的時(shí)候，篩選內(nèi)容在當(dāng)前頁(yè)面刷新展示；

• 不同的tab分類(lèi)可以通過(guò)橫滑進(jìn)行切換；

• 位于內(nèi)容信息的上方，對(duì)下方的列表內(nèi)容進(jìn)行控制；

• 當(dāng)觸發(fā)篩選條件時(shí)，篩選欄目直接定位到導(dǎo)航欄下方。

2. 標(biāo)簽篩選

是一種輔助篩選樣式，通常位于某一分類(lèi)標(biāo)題下方，或者跟tab篩選和下拉篩選搭配使用，有4種表現(xiàn)形式

① 內(nèi)容分類(lèi)標(biāo)簽，充當(dāng)內(nèi)容入口。產(chǎn)品設(shè)定的內(nèi)容分類(lèi)，分類(lèi)層級(jí)較高，且內(nèi)容之間無(wú)交集，當(dāng)觸發(fā)操作的時(shí)候，會(huì)跳轉(zhuǎn)頁(yè)面進(jìn)行內(nèi)容展示。

② 大分類(lèi)下的子篩選條件，分類(lèi)層級(jí)比較低，當(dāng)用戶觸發(fā)操作時(shí)，內(nèi)容在當(dāng)前頁(yè)面進(jìn)行展示。

③ 篩選頁(yè)面，多維度的篩選條件以列表的形式進(jìn)行排布，標(biāo)簽是單一維度下的多種分類(lèi)，可橫滑操作，這種方式可以幫助用戶快速進(jìn)行多維度的內(nèi)容篩選。篩選的結(jié)果直接展示在篩選條件下方，最常出現(xiàn)在視頻類(lèi)APP內(nèi)做電影、電視篩選；馬蜂窩游記中也使用了這種分類(lèi)形式。

3.下拉篩選

通常是在一個(gè)大的分類(lèi)下做具體選擇的時(shí)候使用，這種篩選樣式可以承載1~3級(jí)分類(lèi)層級(jí)。

單一層級(jí)

分類(lèi)以列表的形式展示在頁(yè)面中，當(dāng)分類(lèi)字段少且分類(lèi)較多的時(shí)候也可以排2~3列進(jìn)行展示。

 

兩個(gè)層級(jí)

有三種排布方式

• ①直接以欄目標(biāo)題加列表內(nèi)容的形式排列。適用于兩個(gè)層級(jí)分類(lèi)都較少，或需要用戶進(jìn)行操作（比較輸入框、滑塊）的場(chǎng)景使用。

• ②左側(cè)為一級(jí)分類(lèi)信息展示區(qū)，右側(cè)為二級(jí)分類(lèi)信息展示區(qū)，可以通過(guò)左側(cè)的一級(jí)分類(lèi)控制右側(cè)的二級(jí)分類(lèi)。適用于兩個(gè)層級(jí)分類(lèi)都比較多的情況使用。

• ③上面為tab式的一級(jí)分類(lèi)，下面是二級(jí)分類(lèi)內(nèi)容的展示。適用于一級(jí)分類(lèi)較少，二級(jí)分類(lèi)較多的場(chǎng)景使用。

• 
  

三個(gè)層級(jí)

一級(jí)分類(lèi)為tab形式展示在最上面，二三級(jí)為左右排布形式。

交互細(xì)節(jié)

• 放在內(nèi)容信息的上面，對(duì)下方內(nèi)容進(jìn)行控制；

• 當(dāng)觸發(fā)篩選條件時(shí)，篩選欄目直接定位在導(dǎo)航欄下方；

• 有2~3種信息層級(jí)的篩選，結(jié)果通常取得是不同信息之間的交集，所以需要在篩選中向用戶展示篩選結(jié)果數(shù)量，幫助用戶判斷是否調(diào)整篩選條件 ；如圖左

• 我們也可以選擇在篩選結(jié)果頁(yè)展示篩選標(biāo)簽，用戶可以在當(dāng)前頁(yè)面刪除部分標(biāo)簽，以查看更多的內(nèi)容信息；如下圖

備注：下拉篩選通常是多維度組合在一個(gè)欄目上展示，通常應(yīng)用在電商、外賣(mài)等內(nèi)容分類(lèi)層級(jí)比較多，且層級(jí)內(nèi)的分類(lèi)也比較多的場(chǎng)景里

4. 底部篩選

某一具體內(nèi)容需要通過(guò)多個(gè)篩選維度輔助篩選時(shí)使用，比如XX-XX的火車(chē)票展示列表、馬蜂窩的地圖酒店篩選。這種篩選通常能承載1~2級(jí)的篩選層級(jí)，每種層級(jí)下的分類(lèi)目都不能過(guò)多，是一種比較簡(jiǎn)單輕便的篩選過(guò)程

單一篩選層級(jí)

① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內(nèi)容

 

兩個(gè)篩選層級(jí)

① 直接以欄目標(biāo)題加列表內(nèi)容的形式排列。

② 左側(cè)為一級(jí)分類(lèi)信息展示區(qū)，右側(cè)為二級(jí)分類(lèi)信息展示區(qū)

交互細(xì)節(jié)

處于頁(yè)面的底部導(dǎo)航欄的位置

當(dāng)用戶出發(fā)操作的時(shí)候，內(nèi)容從下往上彈出展示。

5. 抽屜式篩選

電商平臺(tái)應(yīng)用較多的分類(lèi)形式，通常是有兩個(gè)分類(lèi)層級(jí)，一、二級(jí)的分類(lèi)類(lèi)目都比較多，默認(rèn)情況下，如果分類(lèi)特別多時(shí)可以只展示第一層級(jí)信息，用展開(kāi)收起輔助用戶瀏覽二級(jí)類(lèi)目信息。

交互細(xì)節(jié)

• 因?yàn)楹Y選的分類(lèi)比較多，且通過(guò)展開(kāi)收起會(huì)將已選擇的內(nèi)容遮擋上，所以我們需要以一種方式將已篩選的條件展示出來(lái)，方便用戶及時(shí)調(diào)整。eg.馬蜂窩將所有用戶選擇的內(nèi)容都放置在最前面，而京東選擇在欄目上方展示出來(lái)。

• 顯示有多少個(gè)符合篩選條件的內(nèi)容，幫助用戶決策篩選條件是否合理。

總結(jié)

本文主要講述了5種內(nèi)容篩選種類(lèi)：tab篩選、標(biāo)簽篩選、下拉篩選、底部篩選和抽屜式篩選，選擇何種篩選類(lèi)型跟內(nèi)容分類(lèi)層級(jí)和分類(lèi)數(shù)量相關(guān)，所以設(shè)計(jì)之前要先了解產(chǎn)品的分類(lèi)及數(shù)量，有助于選擇更適合用戶使用的篩選樣式。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè)、平面設(shè)計(jì)服務(wù)。

 

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

情感化設(shè)計(jì)已經(jīng)不是一個(gè)新概念，唐納德·諾曼在《情感化設(shè)計(jì)》一書(shū)中，清晰地闡述了情感化設(shè)計(jì)的重要地位與作用?，F(xiàn)階段，同類(lèi)型的產(chǎn)品在功能、服務(wù)、內(nèi)容上日益趨同，差異越來(lái)越小，想讓產(chǎn)品觸及用戶的內(nèi)心，除了功能滿足需求之外，也需要進(jìn)行情感化運(yùn)營(yíng)。

微云在不斷完善基礎(chǔ)功能的同時(shí)，還基于用戶行為，增加了許多情感化的體驗(yàn)，比如往年今日、人臉相冊(cè)等。在情感化運(yùn)營(yíng)上，微云在2018年開(kāi)始了較為完整的節(jié)日閃屏設(shè)計(jì)，希望向用戶傳達(dá)節(jié)日的祝福，拉近產(chǎn)品與用戶的距離。

什么是節(jié)日閃屏？

節(jié)日閃屏是指在特定的節(jié)日進(jìn)行情感化設(shè)計(jì)，傳遞品牌關(guān)懷的閃屏。優(yōu)秀的節(jié)日閃屏，在內(nèi)容上不僅能夠觸達(dá)用戶的記憶點(diǎn)，也能夠與品牌相融合，這樣既拉近了用戶與產(chǎn)品的距離，也強(qiáng)化了品牌的認(rèn)知和記憶。

確定設(shè)計(jì)目標(biāo)

在開(kāi)始設(shè)計(jì)之前，我們期望節(jié)日閃屏能夠達(dá)到以下兩個(gè)目標(biāo)：

• 傳達(dá)節(jié)日祝福喚起用戶回憶
• 體現(xiàn)微云品牌調(diào)性

不同的節(jié)日有不同的文化背景和風(fēng)俗習(xí)慣，節(jié)日祝?？梢越Y(jié)合最典型的特征，這樣更有利于喚起用戶回憶，后文會(huì)結(jié)合案例進(jìn)行分析。然而，品牌調(diào)性是貫穿所有節(jié)日的，在設(shè)計(jì)之初，我們明確微云的品牌調(diào)性，這樣更有利于品牌的傳達(dá)。

1. 品牌調(diào)性研究

Alan Cooper在《About face 4》中提到，在傳達(dá)品牌調(diào)性時(shí)，可以用一組形容詞來(lái)描述產(chǎn)品及體驗(yàn)，這些詞可以組成詞云，用來(lái)指導(dǎo)視覺(jué)設(shè)計(jì)。如何創(chuàng)建這組詞云呢？Allan Cooper 提供了四個(gè)方法：從品牌大綱提煉關(guān)鍵詞、分析現(xiàn)有產(chǎn)品的界面和服務(wù)、分析競(jìng)品的界面和服務(wù)、收集用戶反饋。

結(jié)合微云的特征，我們從現(xiàn)有產(chǎn)品的界面和用戶反饋兩個(gè)角度進(jìn)行分析，提煉符合微云調(diào)性的詞云。

2. 分析現(xiàn)有產(chǎn)品界面

微云的平臺(tái)較多，包括WEB端、PC端、移動(dòng)端、小程序等，其中WEB端和移動(dòng)端的用戶最多，就從這兩個(gè)端入手，分析產(chǎn)品界面的品牌特征。從結(jié)構(gòu)布局和色彩比例上，可以歸納兩端的共同點(diǎn)：結(jié)構(gòu)清晰、留白較多、簡(jiǎn)約干凈。

3. 分析用戶反饋

微云用戶在職業(yè)分布上，白領(lǐng)用戶占最大。結(jié)合使用場(chǎng)景分析，用戶反饋?zhàn)疃嗟脑~是：輕量、方便、下載快速。

4. 提煉微云品牌詞云

結(jié)合產(chǎn)品界面「結(jié)構(gòu)清晰、留白較多、簡(jiǎn)約干凈」的特征和「輕量、方便、下載快速」的用戶反饋，我們提煉出適合描述微云品牌的詞云：簡(jiǎn)約、干凈、留白。

如何做一個(gè)節(jié)日閃屏？

接下來(lái)就以勞動(dòng)節(jié)閃屏為例，從節(jié)日特征和品牌調(diào)性兩個(gè)維度來(lái)闡述節(jié)日閃屏的設(shè)計(jì)過(guò)程。

1. 節(jié)日特征

利用窮舉法，篩選最典型的節(jié)日特征。

微云是一個(gè)工具化的產(chǎn)品，旅行/度假更適合旅行類(lèi)產(chǎn)品，勞動(dòng)/休息與微云更契合。結(jié)合產(chǎn)品功能，定了兩個(gè)方向，第一個(gè)是「五一不勞你動(dòng)，微云幫你整理」，與備份照片功能結(jié)合；第二個(gè)是「勞動(dòng)光榮」，凸顯節(jié)日氣氛。以下是一些草圖方案：

2. 品牌調(diào)性

前面三個(gè)方案重點(diǎn)在于功能的表達(dá)，把用戶目光吸引到場(chǎng)景上，內(nèi)容豐富，但可能造成用戶在3秒內(nèi)無(wú)法明白畫(huà)面主題。方案四重點(diǎn)在于氣氛的表達(dá)，關(guān)注人物故事，角色正在辛勤的勞動(dòng)，直接點(diǎn)題，場(chǎng)景只起烘托作用。結(jié)合「簡(jiǎn)約、干凈、留白」的品牌調(diào)性和「喚起美好回憶」的品牌期望，我們選擇了氛圍方向進(jìn)行深入設(shè)計(jì)。

主題確定之后，就開(kāi)始進(jìn)行優(yōu)化設(shè)計(jì)了。圍繞著關(guān)鍵詞，采用扁平化的設(shè)計(jì)手法，在色彩搭配上，由于勞動(dòng)節(jié)沒(méi)有明顯的色彩傾向，故以品牌藍(lán)為主色調(diào)，橙色來(lái)源于產(chǎn)品的圖標(biāo)，作為輔助色提亮整體畫(huà)面；在頁(yè)面排版上，保持大面積的留白，簡(jiǎn)約清爽。

3. 小結(jié)

勞動(dòng)節(jié)閃屏上線后，我們進(jìn)行了復(fù)盤(pán)，我們希望微云的節(jié)日閃屏給用戶傳達(dá)的是「你的珍貴回憶微云幫你記錄」這樣的小心思，而不是「我們有xx功能」之類(lèi)的廣告，所以在以后的節(jié)日閃屏中，我們會(huì)更加傾向節(jié)日故事性的表達(dá)。視覺(jué)風(fēng)格則采用簡(jiǎn)約、干凈、留白的方式，重點(diǎn)突出人物故事，不在場(chǎng)景上過(guò)多渲染。

4. 其他的節(jié)日閃屏設(shè)計(jì)

按照上面的思路，我們完善了其他的節(jié)日閃屏設(shè)計(jì)。

母親節(jié)閃屏

母親節(jié)是一個(gè)西方的節(jié)日，在這一天，孩子給母親送康乃馨，來(lái)表達(dá)自己的愛(ài)意。在節(jié)日故事上選擇了最具代表性的孩子給母親送花的場(chǎng)景。

端午節(jié)閃屏

一提到端午節(jié)，就會(huì)想起粽子的「甜咸之戰(zhàn)」，可見(jiàn)粽子在端午節(jié)的重要地位，所以端午節(jié)的節(jié)日故事就圍繞粽子開(kāi)展，三個(gè)好友齊心協(xié)力包粽子。

七夕閃屏

牛郎織女，鵲橋相會(huì)，是七夕節(jié)的美麗傳說(shuō)，這一天情侶相聚，相互表達(dá)愛(ài)意。七夕故事定格在情侶相會(huì)的瞬間，女生飛奔向男生，在銀河上翩翩起舞，表達(dá)久別重逢的喜悅。

中秋閃屏&圣誕節(jié)閃屏

中秋節(jié)故事主題是合家團(tuán)圓、賞月吃餅。圣誕節(jié)故事則以父女二人齊心協(xié)力裝飾圣誕樹(shù)為主題。

△ 備注：圣誕節(jié)最終效果圖由另一同事繪制

所有節(jié)日閃屏合集

輸出節(jié)日閃屏規(guī)范

節(jié)日閃屏除了故事性的表達(dá)之外，在設(shè)計(jì)上我們也輸出了一部分規(guī)范，用來(lái)把控風(fēng)格的統(tǒng)一。

1. 配色規(guī)范

色彩作為用戶最容易感知的部分，使用時(shí)與品牌相呼應(yīng)，主色與輔助色均來(lái)源于產(chǎn)品圖標(biāo)。有明顯色彩屬性的節(jié)日，以節(jié)日固有色為主，比如春節(jié)紅色，中秋黃色等等。無(wú)明顯色彩屬性的節(jié)日，可以以品牌藍(lán)為主，強(qiáng)化品牌印記。

2. 角色規(guī)范

我們希望重點(diǎn)展示的是人物的珍貴回憶，基于此，我們?cè)O(shè)計(jì)了一批角色，講述角色的故事，讓用戶產(chǎn)生代入感。為了保證統(tǒng)一性，我們制定了人物的細(xì)節(jié)規(guī)范，包括角色頭身比=1 : 9、服裝款式以休閑為主、服飾顏色與品牌色呼應(yīng)等。

在設(shè)定好人物細(xì)節(jié)規(guī)范之后，我們也完善了角色資源庫(kù)，方便后期在其他場(chǎng)景的應(yīng)用。

3. 場(chǎng)景規(guī)范

在場(chǎng)景設(shè)計(jì)上，我們以簡(jiǎn)潔，明確為主，場(chǎng)景主要起烘托人物故事的作用，而不進(jìn)行過(guò)多的渲染。

拓展場(chǎng)景的使用

做了一系列閃屏之后，這些插圖和角色并沒(méi)有閑置，我們?cè)诰€下挖掘了一些新的使用場(chǎng)景。這些素材被重新利用起來(lái)，變身為辦公室的裝飾掛畫(huà)，營(yíng)造出一個(gè)充滿品牌氣氛的辦公環(huán)境。

總結(jié)

2018年微云希望通過(guò)節(jié)日閃屏的情感化運(yùn)營(yíng)，給用戶傳達(dá)節(jié)日關(guān)懷的同時(shí)也強(qiáng)化微云的品牌認(rèn)知。在后續(xù)的規(guī)劃中，我們希望節(jié)日閃屏不僅僅是單方面的給用戶傳遞關(guān)懷，還能夠和用戶互動(dòng)，實(shí)現(xiàn)更深層次的情感交流，比如點(diǎn)擊節(jié)日閃屏，跳轉(zhuǎn)到往年今日，幫助用戶回憶起以往的美好回憶，增加用戶粘性。2019年微云會(huì)繼續(xù)給大家傳遞節(jié)日的祝福，也會(huì)不斷探索新的閃屏設(shè)計(jì)風(fēng)格，敬請(qǐng)大家期待。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

我們已經(jīng)或多或少看過(guò)一些優(yōu)秀作品，也知道了一些設(shè)計(jì)方法和技巧，了解到了一些相關(guān)的理論知識(shí)，自己也做過(guò)一些項(xiàng)目或者是練習(xí)，總體來(lái)說(shuō)都掌握了一定的設(shè)計(jì)能力；但是設(shè)計(jì)師想要擁有更多的資源（指薪資、工作機(jī)會(huì)等等）或者是想職業(yè)進(jìn)階，除了一定的設(shè)計(jì)能力之外是遠(yuǎn)遠(yuǎn)不夠的。

設(shè)計(jì)師還需要掌握更多的能力，才能讓自己成長(zhǎng)提升，并且擁有他人無(wú)法取代的價(jià)值。我通過(guò)自己的經(jīng)歷和整理收集，發(fā)現(xiàn)目前如今不同階段的設(shè)計(jì)師對(duì)待同一個(gè)問(wèn)題不同的角度以及特征，如下圖所示：

不難發(fā)現(xiàn)，當(dāng)大家還是初級(jí)設(shè)計(jì)師的時(shí)候，剛剛接觸設(shè)計(jì)行業(yè)，我們更多的是去觀察、學(xué)習(xí)、臨摹一些“好看”的作品，熟練地使用設(shè)計(jì)軟件和提升設(shè)計(jì)技法，最后的是自己做出來(lái)的產(chǎn)品是否漂亮美觀，最重要的是客戶/老板是否會(huì)買(mǎi)單，而自己無(wú)法清晰地定義自己設(shè)計(jì)的產(chǎn)品價(jià)值，也不能很好表達(dá)出自己的想法和觀點(diǎn)。所以產(chǎn)品走向會(huì)根據(jù)老板/客戶的水準(zhǔn)來(lái)定義，輪到自己表達(dá)只是支支吾吾，最后只是做為執(zhí)行無(wú)休止地改改改。一切由老板/客戶說(shuō)的算，無(wú)法清晰地了解自己產(chǎn)品的定位，缺乏表達(dá)觀點(diǎn)的能力，缺乏一定的審美，作為執(zhí)行角色無(wú)休止加班成為了初級(jí)設(shè)計(jì)師最大的痛點(diǎn)。

而經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)和工作后，逐漸轉(zhuǎn)型成為中級(jí)設(shè)計(jì)師后，有了一定的設(shè)計(jì)技法和軟件使用熟練度，有了一定的審美和視覺(jué)表現(xiàn)能力，平臺(tái)規(guī)模合作團(tuán)隊(duì)也逐漸變大，基本能滿足老板/客戶/業(yè)務(wù)方提出的需求。開(kāi)始學(xué)習(xí)一些設(shè)計(jì)相關(guān)理論，開(kāi)始拆解自己或別人產(chǎn)品的交互架構(gòu)，更多地開(kāi)始關(guān)注用戶體驗(yàn)起來(lái)，也會(huì)融入品牌元素到自己的產(chǎn)品當(dāng)中，為自己的產(chǎn)品做情感化設(shè)計(jì)和制定設(shè)計(jì)規(guī)范，會(huì)組織一些專業(yè)語(yǔ)言和業(yè)務(wù)溝通以及陳述自己的產(chǎn)品。但是如何從眾多的設(shè)計(jì)方案中找到最優(yōu)的方案來(lái)解決問(wèn)題，如何更多地體現(xiàn)產(chǎn)品的價(jià)值，產(chǎn)品利益鏈如何形成商業(yè)閉環(huán)，如何在團(tuán)隊(duì)/設(shè)計(jì)圈體現(xiàn)自己個(gè)人的價(jià)值，如何提升自己的個(gè)人影響力，成為了中級(jí)設(shè)計(jì)師這階段的痛點(diǎn)。

通過(guò)三年五年的沉淀，成為高級(jí)設(shè)計(jì)師后，形成了自己獨(dú)有的一套方法論和設(shè)計(jì)思維，能熟練地拆解每款產(chǎn)品和定義產(chǎn)品，視覺(jué)表現(xiàn)層已經(jīng)完全能駕馭，能清晰地闡述自己的設(shè)計(jì)思路和結(jié)論，產(chǎn)品用戶體驗(yàn)層也有了一定的經(jīng)驗(yàn)和方法，在團(tuán)隊(duì)中或者設(shè)計(jì)圈有自己一定的個(gè)人影響力，更多地會(huì)在工作中思考產(chǎn)品帶來(lái)的社會(huì)價(jià)值和商業(yè)價(jià)值，會(huì)用不同的思維去思考產(chǎn)品的各個(gè)維度，找到最優(yōu)的方法解決問(wèn)題，會(huì)把固有的利益鏈轉(zhuǎn)換成商業(yè)閉環(huán)，提升用戶轉(zhuǎn)化率等等。而這階段的設(shè)計(jì)師的主要痛點(diǎn)就是面臨著團(tuán)隊(duì)管理和溝通，朝著資深設(shè)計(jì)師和設(shè)計(jì)專家轉(zhuǎn)型，以及如何為平臺(tái)帶來(lái)的利益價(jià)值考核等等問(wèn)題。

資深設(shè)計(jì)師或者設(shè)計(jì)專家這里不談，因?yàn)檫@階段所思考的問(wèn)題大都和設(shè)計(jì)無(wú)關(guān)了。通過(guò)上述不難發(fā)現(xiàn)，每個(gè)階段的設(shè)計(jì)師都有各自的特征和痛點(diǎn)，雖然其中都包含著設(shè)計(jì)相關(guān)的能力，但是隨著階段的進(jìn)階設(shè)計(jì)相關(guān)的能力占比逐漸變少，更多的是其他的能力增長(zhǎng)，所以設(shè)計(jì)師除了設(shè)計(jì)以外其他能力的重要程度顯而易見(jiàn)，那么我們來(lái)看看除了設(shè)計(jì)以外，設(shè)計(jì)師應(yīng)該掌握其他什么能力。

思考能力(Thinking)

思考能力作為首要的能力，不僅僅是設(shè)計(jì)師，其他職業(yè)一樣需要這個(gè)能力，這里所涵蓋的面太廣泛了也說(shuō)不了，這里主要針對(duì)三點(diǎn)來(lái)講：核心競(jìng)爭(zhēng)力、批判思維和分析能力。思考分為兩個(gè)層面：自我層面的和業(yè)務(wù)層面的思考；自我層面的思考就是要通過(guò)深度剖析自我，發(fā)掘自己處于哪個(gè)階段，有什么長(zhǎng)處和不足，自己想要什么，需要往怎樣的方向發(fā)展；而業(yè)務(wù)層面的則是要需要思考業(yè)務(wù)產(chǎn)品的結(jié)構(gòu)框架、用戶體驗(yàn)、商業(yè)價(jià)值等等等等，前者更加關(guān)注自身的成長(zhǎng)，后者更加關(guān)注業(yè)務(wù)的成長(zhǎng)。

· 核心競(jìng)爭(zhēng)力

核心競(jìng)爭(zhēng)力就是有與別人不一樣的競(jìng)爭(zhēng)力，想要做到別人無(wú)法替代你的地步，就要有自己個(gè)人核心的競(jìng)爭(zhēng)力。如果你會(huì)做一張 Banner，我也會(huì)做一張 Banner，你會(huì)搞一個(gè)頁(yè)面，我也會(huì)搞一個(gè)頁(yè)面，那么你這個(gè)人就成為了可有可無(wú)的螺絲釘，唯一的優(yōu)勢(shì)就是年輕能拼能熬，等你熬銹了老了，隨時(shí)可以換一顆新的螺絲釘來(lái)取代你的位置。所以不管什么階段，我們要深度剖析自己，認(rèn)清自己的優(yōu)勢(shì)劣勢(shì)，并采取相應(yīng)的措施。

剖析自己的核心競(jìng)爭(zhēng)力給大家一個(gè)大致思路，從異樣性和共通性入手。自己周?chē)蚨嗷蛏儆袌F(tuán)隊(duì)，條件不足的話現(xiàn)在網(wǎng)絡(luò)各大平臺(tái)都很發(fā)達(dá)，也能融入一些設(shè)計(jì)圈子中，和不同的人對(duì)比尋找自己的核心競(jìng)爭(zhēng)力。異樣性是當(dāng)前的優(yōu)勢(shì)，找出其中的優(yōu)點(diǎn)，不斷地放大深造，變成你的核心競(jìng)爭(zhēng)力，而和別人不一樣的缺點(diǎn)找出來(lái)摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢(shì)，因?yàn)橹T多共通性中總有你最喜歡最擅長(zhǎng)的一個(gè)，將它單獨(dú)拿出來(lái)不斷擴(kuò)大，逐漸就拉開(kāi)了差異性，慢慢就轉(zhuǎn)化成你的核心競(jìng)爭(zhēng)力了，而大家都有的缺點(diǎn)，你把它糾正了，就成為你的核心競(jìng)爭(zhēng)力了。

來(lái)舉一個(gè)栗子：小王是一名工作了3年的設(shè)計(jì)師，研究生畢業(yè)，由于公司的原因平時(shí)工作最多接觸的就是一些運(yùn)營(yíng)圖 banner，也有過(guò)很多品牌 VI 的經(jīng)驗(yàn)，逐漸自己在視覺(jué)表現(xiàn)上有自己一定的見(jiàn)解和想法，也更加感興趣做視覺(jué)表現(xiàn)的東西。

那么他的共通性就有：1.工作3年之久；2.研究生畢業(yè)；3.視覺(jué)表現(xiàn)能力強(qiáng)也更感興趣；4.做過(guò)品牌 VI 的經(jīng)驗(yàn)；5.有自己的見(jiàn)解和想法。

由此推斷出小王的共通性是：1.工作經(jīng)驗(yàn)豐富；2.視覺(jué)表現(xiàn)力強(qiáng)；3.有想法和見(jiàn)解；

異樣性是：1.學(xué)歷優(yōu)勢(shì)；2.品牌 VI 相關(guān)經(jīng)驗(yàn)

那么小王可以保持自己學(xué)歷優(yōu)勢(shì)下，可以繼續(xù)深造品牌 VI 相關(guān)，逐漸轉(zhuǎn)型成為高學(xué)歷的品牌 VI 設(shè)計(jì)師，那么學(xué)歷和很多品牌 VI 的經(jīng)驗(yàn)就是小王的核心競(jìng)爭(zhēng)力；也可以通過(guò)熱愛(ài)去學(xué)習(xí) C4D 動(dòng)效等軟件繼續(xù)增強(qiáng)自己視覺(jué)表現(xiàn)力，配合自己豐富的工作經(jīng)驗(yàn)逐漸轉(zhuǎn)型成高學(xué)歷的創(chuàng)意藝術(shù)設(shè)計(jì)師，然后通過(guò)將自己的想法見(jiàn)解通過(guò)分享會(huì)、文章等模式產(chǎn)出，將這一點(diǎn)升級(jí)成個(gè)人影響力，那么綜合下來(lái)更加優(yōu)秀的視覺(jué)表現(xiàn)力、豐富的工作經(jīng)驗(yàn)和個(gè)人影響力也會(huì)逐漸變成小王的核心競(jìng)爭(zhēng)力。

只有通過(guò)不同維度深度地剖析自己，找到自己的共通和異樣點(diǎn)，清晰自己的價(jià)值定位，然后制定出適合自己成長(zhǎng)目標(biāo)和方案，不斷放大增加自己的核心競(jìng)爭(zhēng)力，成為不可取代的那個(gè)人。

· 批判思維

批判思維是一名設(shè)計(jì)師必須具備的思維能力，我們不僅僅要學(xué)會(huì)批判別人的作品，還要學(xué)會(huì)自我批判。這里不是指無(wú)腦的批判（之前遇到過(guò)一個(gè)實(shí)習(xí)生剛進(jìn)到公司里，就把之前所有人做的東西全部批判了一遍，重點(diǎn)是只說(shuō)產(chǎn)品好看與否，完全不顧及平臺(tái)一致性商業(yè)價(jià)值用戶體驗(yàn)等等，最后只批判卻沒(méi)有任何實(shí)質(zhì)性的建議，頗有一種指點(diǎn)江山的感覺(jué)，然后后面再也沒(méi)見(jiàn)到過(guò)他了），這里是指在自己通過(guò)批判別人或自我的方案，不斷地優(yōu)化糾正，最后產(chǎn)出最優(yōu)質(zhì)的方案，這是批判思維的出發(fā)點(diǎn)。

不同的人有不同的經(jīng)歷，看待問(wèn)題的維度是多種多樣的，所以一個(gè)方案產(chǎn)出后，通過(guò)不同的人思考后的結(jié)果是最好的解決方案。這也印證了波克定理：只有在爭(zhēng)辯中，才可能誕生最好的主意和最好的決定。所以當(dāng)設(shè)計(jì)師接到產(chǎn)品交互給到的原型圖后，不要上手就做圖，要通過(guò)自己經(jīng)驗(yàn)和想法去看待原型圖，然后提出更加優(yōu)質(zhì)的方案進(jìn)行討論，如果你的方案更加優(yōu)質(zhì)，那么不僅是產(chǎn)品的質(zhì)量得到了優(yōu)化，你個(gè)人的經(jīng)驗(yàn)也得到了沉淀，下次遇到相同的場(chǎng)景就可以拿出來(lái)復(fù)用，直到遇到更好的方案。

唯一注意的事項(xiàng)就是注意溝通的方法，這里后文會(huì)提到，比你資歷高的人提出的觀點(diǎn)更加具有建設(shè)性，在毫無(wú)頭緒沒(méi)有創(chuàng)新的情況下就聽(tīng)比你更有經(jīng)驗(yàn)的人的；遇到比你資歷低的人提出的觀點(diǎn)也不要嗤之以鼻，抓取其中有用的點(diǎn)，沒(méi)準(zhǔn)是一個(gè)新的思維方向；總之，有數(shù)據(jù)說(shuō)數(shù)據(jù)，沒(méi)數(shù)據(jù)舉案例，沒(méi)案例講觀點(diǎn)，如果連觀點(diǎn)都沒(méi)有的話，照著大佬說(shuō)的話做就是了。

· 分析能力

分析能力也是設(shè)計(jì)師必須掌握的能力之一，無(wú)論你是創(chuàng)意藝術(shù)設(shè)計(jì)師，還是用戶體驗(yàn)設(shè)計(jì)師，譬如一張 Banner 氛圍傳遞或者文案排版，譬如插畫(huà)的配色或者場(chǎng)景搭建，譬如產(chǎn)品的布局結(jié)構(gòu)或者用戶體驗(yàn)，這些都需要有一定的分析能力。通過(guò)拆解改版/競(jìng)品/參照產(chǎn)品等，明確產(chǎn)品的最終目的、商業(yè)價(jià)值等等，有了這些準(zhǔn)備后才能對(duì)自己的產(chǎn)品進(jìn)行設(shè)計(jì)或者改版。而分析產(chǎn)品可以以用戶體驗(yàn)五要素的角度來(lái)分析，分別是：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，具體相關(guān)的文章站酷、PM 社區(qū)、36氪等等都搜的到，這里不再細(xì)說(shuō)；之前在分析產(chǎn)品的時(shí)候發(fā)現(xiàn)有些產(chǎn)品強(qiáng)行套用這五個(gè)要素進(jìn)去不適用，因?yàn)橛行┊a(chǎn)品的頁(yè)面它不存在戰(zhàn)略層或者范圍層的東西，所以我總結(jié)歸納了三個(gè)角度來(lái)分析產(chǎn)品。

案例就用淘搶購(gòu) v4.1 頁(yè)面（已上線）來(lái)講，三個(gè)角度主要是：表現(xiàn)層、用戶體驗(yàn)層和價(jià)值層。表現(xiàn)層主要就是產(chǎn)品頁(yè)面的配色、布局結(jié)構(gòu)之類(lèi)的；用戶體驗(yàn)層就是產(chǎn)品的心智透出、交互流程之類(lèi)的；價(jià)值層就是產(chǎn)品深度的價(jià)值體現(xiàn)了，比如商業(yè)價(jià)值、社會(huì)價(jià)值和用戶留存率之類(lèi)的；大致可以套用這個(gè)公式去思考：為什么這里會(huì)用這種表現(xiàn)形式，它想要表達(dá)怎樣的效果，它要達(dá)到怎樣的最終目的，如果是自己去設(shè)計(jì)會(huì)怎樣做。舉例：因?yàn)樘詫氁?guī)范為卡片式設(shè)計(jì)，在視覺(jué)表現(xiàn)上要統(tǒng)一，所以淘搶購(gòu) v4.1 的業(yè)務(wù)目的是統(tǒng)一視覺(jué)樣式，并且它需要給用戶產(chǎn)生一種“商品很便宜快去搶購(gòu)再不搶購(gòu)就沒(méi)了”的心智認(rèn)知，它的最終目的是引導(dǎo)用戶去商品 Detail 頁(yè)面購(gòu)買(mǎi)商品和提高商品的點(diǎn)擊率，這樣通過(guò)協(xié)調(diào)關(guān)系形成平臺(tái)、商家和用戶之間的利益鏈商業(yè)閉環(huán)。

想要提升自己的分析能力除了項(xiàng)目和時(shí)間的沉淀外，更多的時(shí)候需要自己平時(shí)的積累，站酷等平臺(tái)有很多優(yōu)秀的作品，作者會(huì)把自己設(shè)計(jì)的分析和思路寫(xiě)出來(lái)，我們可以看看別人的想法是否值得借鑒，然后再去分析一下，最后思考如果是自己的話會(huì)怎么去做；其次做設(shè)計(jì)的時(shí)候帶著同理心去做，把自己當(dāng)作用戶去看待自己的產(chǎn)品，通過(guò)不斷的積累提升自己對(duì)產(chǎn)品的敏銳度，將一些產(chǎn)品的隱性問(wèn)題挖掘出來(lái)；另外可以多看一些好的設(shè)計(jì)分析書(shū)，比如《U一點(diǎn)料1、2》、《以匠心 致設(shè)計(jì)》等等，將學(xué)到的分析方法代入自己的產(chǎn)品或作品中，逐漸分析能力就增強(qiáng)了。

規(guī)劃能力(Plan)

規(guī)劃能力是日常工作生活中所需要掌握的能力，主要講業(yè)務(wù)規(guī)劃和職業(yè)生涯規(guī)劃，業(yè)務(wù)規(guī)劃能力應(yīng)對(duì)的是我們工作中處理業(yè)務(wù)所需要具備的能力，而職業(yè)生涯規(guī)劃應(yīng)對(duì)的是我們整個(gè)人生職業(yè)生涯規(guī)劃的能力。掌握這個(gè)能力后前者會(huì)給我們帶來(lái)業(yè)務(wù)處理效率上的提升，后者給我們帶來(lái)整個(gè)人生有益的好處，所以這個(gè)能力非常重要。

· 業(yè)務(wù)規(guī)劃

很多時(shí)候我們還在有條不紊地處理某個(gè)需求，心想著下班去吃個(gè)飯買(mǎi)水果回家洗澡睡覺(jué)的時(shí)候，突然來(lái)了一個(gè)緊急的需求，就把我們整天的計(jì)劃給打亂了，火急火燎地處理完這個(gè)需求，然后又把之前的需求做了，最后加班改改改導(dǎo)致整個(gè)計(jì)劃泡湯了。工作中遇到這樣的情況很多很多，處理方法有很多種，最經(jīng)典的就是四象限法則，把事情的緊急重要程度分為：重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個(gè)象限。

很多時(shí)候都是道理我們都懂，可是一遇到情況依舊手忙腳亂，根本原因是沒(méi)有認(rèn)真地把它代入自己的工作生活當(dāng)中。畫(huà)一個(gè)象限表，把自己今天所要處理的事務(wù)陳列出來(lái)五分鐘都不需要，一開(kāi)始可能因?yàn)槭虑椴欢嗑蜎](méi)堅(jiān)持下去，一旦養(yǎng)成習(xí)慣后，將來(lái)遇到多種緊急情況突發(fā)的時(shí)候就能認(rèn)識(shí)到這個(gè)習(xí)慣給你帶來(lái)的好處了，所謂養(yǎng)兵千日，用兵一時(shí)就是這個(gè)道理。

在做業(yè)務(wù)需求的時(shí)候，可能會(huì)碰到有些需求價(jià)值高，有些需求價(jià)值低但又很緊急，不知道怎么處理之間的關(guān)系，我們依舊可以套用四象限法則來(lái)制定一個(gè)四象限表：價(jià)值高且緊急、緊急但價(jià)值低、價(jià)值高不緊急和價(jià)值低不緊急。什么是價(jià)值高的需求呢，就是能讓你有充分思考和分析的需求，比如某個(gè)頁(yè)面的改版；價(jià)值低的需求則是相對(duì)不怎么需要思考和分析的需求，比如根據(jù)已有的規(guī)范改個(gè)顏色之類(lèi)的。在時(shí)間的優(yōu)先級(jí)前，價(jià)值高的需求大于價(jià)值低的，最后剩下的就是價(jià)值不高且不緊急的。因?yàn)槲覀儫o(wú)法拒絕需求，需求來(lái)了肯定要是做的，工作不是愛(ài)好可以有多種選擇性，但我們要學(xué)會(huì)將需求分解成不同類(lèi)型的，對(duì)自己有成長(zhǎng)沉淀的需求那可以作為最高優(yōu)先級(jí)去處理，留夠充裕的時(shí)間去思考分析，然后沉淀經(jīng)驗(yàn)穩(wěn)定提升。

· 職業(yè)生涯規(guī)劃

這個(gè)在大學(xué)期間就學(xué)過(guò)相關(guān)的課程，只不過(guò)當(dāng)時(shí)并沒(méi)有太深的感觸，而是等工作以后才知道這項(xiàng)能力的重要性，它相當(dāng)于關(guān)系著你每個(gè)階段的里程碑，當(dāng)成游戲中的成就任務(wù)也不為過(guò)，還是自己設(shè)定的成就任務(wù)。某個(gè)階段想要達(dá)成什么樣的目標(biāo)，想要獲得怎樣的成就，都是要自己一步一步慢慢規(guī)劃并且完成出來(lái)的。

因?yàn)槲矣龅竭^(guò)幾個(gè)非常努力的人，努力到讓人心悸的地步，每天除去吃飯睡覺(jué)工作時(shí)間就是在努力學(xué)習(xí)，到最后還是很迷茫，不知道做什么，不知道如何體現(xiàn)自己的價(jià)值。這類(lèi)沒(méi)有目的的努力的人是很可怕的，他們努力得沒(méi)有錯(cuò)，但是這樣下去沒(méi)有成效的努力會(huì)讓他們覺(jué)得努力并沒(méi)什么用，然后逐漸開(kāi)始產(chǎn)生抱怨、泄氣和放棄等負(fù)面情緒。

舉個(gè)例子來(lái)說(shuō)明：如果你剛畢業(yè)，給自己制定的長(zhǎng)遠(yuǎn)的職業(yè)生涯規(guī)劃是在工作3～5年后進(jìn)到大廠工作提升自己，那么所拆分下來(lái)就需要一些項(xiàng)目工作經(jīng)驗(yàn)和優(yōu)秀的作品，再拆分下來(lái)就是如何做出優(yōu)秀的作品，細(xì)分到最后就是作品當(dāng)中的元素，比如圖標(biāo)排版布局之類(lèi)的，那么就制定一段時(shí)間內(nèi)的練習(xí)就按照各類(lèi)元素去做，比如圖標(biāo)畫(huà)兩個(gè)星期，APP 設(shè)計(jì)排版布局練習(xí)兩個(gè)星期，插畫(huà)練習(xí)畫(huà)兩個(gè)星期，這樣堅(jiān)持下來(lái)就組成一個(gè)完整的項(xiàng)目作品了，以此類(lèi)推。有了規(guī)劃目標(biāo)并且在自我驅(qū)動(dòng)的推動(dòng)下，逐漸實(shí)現(xiàn)自己的職業(yè)目標(biāo)。

執(zhí)行能力(Execute)

執(zhí)行能力是指自我在工作&學(xué)習(xí)中執(zhí)行的能力，執(zhí)行能力為一個(gè)設(shè)計(jì)師最主要的核心技能，一切的能力都凌駕于這個(gè)基礎(chǔ)之上；哪怕你再能說(shuō)會(huì)道，能賦予你的設(shè)計(jì)各種價(jià)值，能給予你的設(shè)計(jì)各種環(huán)境，但這些都是第二步，第一步就是你的設(shè)計(jì)表現(xiàn)達(dá)到期望值，如若第一步稿子都不好看，那么沒(méi)人愿意會(huì)聽(tīng)你敘述的。前文已經(jīng)提及到了，設(shè)計(jì)師在初級(jí)至中級(jí)階段的時(shí)候大多數(shù)注重的就是表現(xiàn)手法，如同學(xué)說(shuō)話一樣，表現(xiàn)手法可以看作是漢語(yǔ)拼音，然后才是組成一個(gè)個(gè)字，最后組成一句完整的話語(yǔ)。

· 自我執(zhí)行力

提升自我執(zhí)行的能力我大致分為兩個(gè)步驟：看和做。

首先先來(lái)說(shuō)看，看其實(shí)是提高自己審美的一個(gè)過(guò)程，通過(guò)看一些平臺(tái)網(wǎng)站的優(yōu)秀設(shè)計(jì)作品，久而久之自己的審美能力才會(huì)提高，然而看分下來(lái)一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或?qū)W習(xí)時(shí)間，通過(guò)瀏覽設(shè)計(jì)網(wǎng)站采集學(xué)習(xí)一些你覺(jué)得好看的作品；采集是一個(gè)很好的習(xí)慣，我覺(jué)得是每個(gè)設(shè)計(jì)師必須養(yǎng)成的習(xí)慣，把自己平時(shí)覺(jué)得好的表現(xiàn)形式收集起來(lái)，等到某一天需要用到的時(shí)候，腦海中對(duì)當(dāng)前場(chǎng)景會(huì)有一定的印象，再根據(jù)印象去尋找采集到的作品，能很大程度上節(jié)省自己腦爆的時(shí)間，哪怕沒(méi)有采集或者文件丟失，自己的腦中大致也會(huì)有一個(gè)雛形方向。而帶有目的性地看是指針對(duì)某一個(gè)模塊去搜集整理，比如今天我需要做一個(gè)關(guān)于內(nèi)容的模塊，那么我就會(huì)去尋找一些做內(nèi)容的產(chǎn)品設(shè)計(jì)，搜集到的各類(lèi)關(guān)于內(nèi)容的表現(xiàn)手法，然后結(jié)合自己的經(jīng)驗(yàn)和分析，找出最適合自己產(chǎn)品的一種。

僅僅看是不夠的，在看過(guò)之后我們需要?jiǎng)邮謬L試才能算真正地沉淀自己所看到、學(xué)到的東西。做設(shè)計(jì)最忌諱的就是“眼高手低或者眼低手高”這種狀態(tài)，有了審美但表現(xiàn)手法跟不上，或者說(shuō)表現(xiàn)手法有但是審美跟不上。一定要在自己吸收了一定的審美后，通過(guò)自己的嘗試去做出來(lái)，才能真正的沉淀到自己的大腦當(dāng)中，變成自己的表現(xiàn)手法之一。最后通過(guò)大量的積累，結(jié)合對(duì)商業(yè)需求的判斷形成設(shè)計(jì)策略，才能從容應(yīng)對(duì)不同的產(chǎn)品需求，哪怕你今天做金融相關(guān)的產(chǎn)品，還是明天做電商的產(chǎn)品，后天又改做工具類(lèi)產(chǎn)品，一旦形成了自己不同的應(yīng)對(duì)策略，才能做到真正意義上的游刃有余。

很多時(shí)候我們只關(guān)注到魚(yú)的大小、魚(yú)的肉質(zhì)是否鮮美那20%層面的東西，往往忽視了80%最重要的捕魚(yú)技巧和方法；看到的只是產(chǎn)品是否好看，交互是否流暢，體驗(yàn)是否良好，沒(méi)有往更深層次地去想這個(gè)產(chǎn)品的商業(yè)背景是什么，設(shè)計(jì)師為什么要這樣設(shè)計(jì)，如果換做自己的話會(huì)去怎么做；畢竟我們所做的一切訓(xùn)練、思考都是為了更好地為工作服務(wù)，就如同脫離了商業(yè)背景以后，有些設(shè)計(jì)就只是單純的炫技，并沒(méi)有解決問(wèn)題的價(jià)值，而設(shè)計(jì)師的工作核心就是解決問(wèn)題，所以我們要結(jié)合作品的背景、價(jià)值等因素，去看、去做、去學(xué)相應(yīng)的表現(xiàn)手法才是自我執(zhí)行的核心所在。

表達(dá)能力(Express)

表達(dá)能力是設(shè)計(jì)師除去執(zhí)行能力外第二重要的能力，小到平日里的溝通對(duì)接，大到述職晉升面試，都離不開(kāi)表達(dá)能力的支持。有些設(shè)計(jì)師經(jīng)常面試怎么都過(guò)不了關(guān)，我本以為是作品集的問(wèn)題，可是看完之后作品方面完全沒(méi)有什么問(wèn)題，具體了解后才知道是在面試過(guò)程當(dāng)中不知如何闡述自己的作品和思路或者在闡述過(guò)程中由于緊張等因素導(dǎo)致表達(dá)斷斷續(xù)續(xù)不順暢，面試官就會(huì)覺(jué)得這個(gè)人不靠譜然后 PASS，明明做圖很優(yōu)秀卻輸在了表達(dá)上，這種情況就很憋屈。在廣告公司中，一個(gè) LOGO 或者廣告視頻往往只是贈(zèng)品，出售的卻是這個(gè)品牌VI的故事；如果一個(gè)設(shè)計(jì)師不懂得怎么闡述自己的業(yè)務(wù)，不懂得怎么推銷(xiāo)自己的方案，不懂得拓寬自己的個(gè)人影響力，就單純的只會(huì)執(zhí)行作圖的話，那么這名設(shè)計(jì)師是不合格的。網(wǎng)傳有一個(gè)段子“一個(gè)公司的工資排名規(guī)律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如講 PPT 的，講 PPT 的不如聽(tīng) PPT 的，聽(tīng) PPT 的不如聽(tīng)匯報(bào)的，聽(tīng)匯報(bào)的不如決定的，決定的不如簽字的”，由此可見(jiàn)表達(dá)能力在職場(chǎng)中的重要性。

· 業(yè)務(wù)表達(dá)

業(yè)務(wù)表達(dá)是指在自己工作的過(guò)程當(dāng)中，對(duì)自己的設(shè)計(jì)方案進(jìn)行闡述。大部分設(shè)計(jì)師會(huì)遇到一個(gè)困擾，當(dāng)設(shè)計(jì)稿做完以后就不知道怎么去表達(dá)自己的設(shè)計(jì)理念，被業(yè)務(wù)方/面試官/老板提出質(zhì)疑時(shí)，比如：“你這產(chǎn)品的設(shè)計(jì)為什么要用紅色？”、“聊天信息這塊兒為什么要用小氣泡的樣式？”，往往不知道怎么去說(shuō)，有一種當(dāng)時(shí)就覺(jué)得好看所以這樣做了，也沒(méi)有去想那么多的感覺(jué)，或者其他優(yōu)秀的作品/競(jìng)品是這樣做的，我也就這樣做了；那么結(jié)果往往就是自己的專業(yè)性遭到質(zhì)疑，然后轉(zhuǎn)變成業(yè)務(wù)方/老板進(jìn)行設(shè)計(jì)主導(dǎo)，形成“改來(lái)改去還是第一版好”這樣類(lèi)似的惡性循環(huán)中。

那么如何提升自己的業(yè)務(wù)表達(dá)能力呢？首先設(shè)計(jì)師要提升在設(shè)計(jì)領(lǐng)域的專業(yè)度，通過(guò)學(xué)習(xí)吸納設(shè)計(jì)相關(guān)的知識(shí)，然后代入自己的設(shè)計(jì)當(dāng)中去試著闡述設(shè)計(jì)稿，準(zhǔn)備工作先做到位，收集相關(guān)的數(shù)據(jù)，掌握相對(duì)應(yīng)的設(shè)計(jì)理論，先說(shuō)服自己再去說(shuō)服別人。比如：“通過(guò)色彩心理學(xué)得知，紅色能帶給人興奮、激動(dòng)、熱情等積極情緒，而我們產(chǎn)品所需要透出的氛圍是熱情的、積極向上的，相對(duì)應(yīng)地激發(fā)出用戶的正向情緒，所以我這里使用紅色?！?、“根據(jù)近半年數(shù)據(jù)研究得出，產(chǎn)品聊天信息模塊使用過(guò)程當(dāng)中女性用戶占總用戶數(shù)的85.9%，而小氣泡樣式相對(duì)比其他樣式更能迎合女性用戶群體的喜好，通過(guò) A/B 測(cè)試結(jié)果得出，使用小氣泡樣式后數(shù)據(jù)上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式?！?

通過(guò)自己前期的準(zhǔn)備（設(shè)計(jì)理論知識(shí)補(bǔ)充、用戶調(diào)研、數(shù)據(jù)測(cè)試等），將自己的設(shè)計(jì)理念表達(dá)出來(lái)，主導(dǎo)整個(gè)設(shè)計(jì)的方向，必要時(shí)可以理性地堅(jiān)持自己的設(shè)計(jì)方案，畢竟無(wú)論是老板還是業(yè)務(wù)方，出發(fā)點(diǎn)都是希望自己的產(chǎn)品能做到最好最完善，只要你給出數(shù)據(jù)支撐和專業(yè)性的建議，他們一定都會(huì)采納接受的，而最后你的能力和專業(yè)性也得到了對(duì)應(yīng)的認(rèn)可。

· 書(shū)面表達(dá)

我本人是強(qiáng)烈建議在能力達(dá)到一定程度的時(shí)候，通過(guò)寫(xiě)作來(lái)檢視自己成果的。因?yàn)橥芏鄸|西自己是明白的，但是寫(xiě)出來(lái)讓其他人看懂是另外一種能力了。自己一段時(shí)間的職業(yè)經(jīng)驗(yàn)總結(jié)、對(duì)設(shè)計(jì)的見(jiàn)解看法、自己獨(dú)特的設(shè)計(jì)思維、一本書(shū)的讀后感等等都可以通過(guò)書(shū)面表達(dá)出來(lái)，某個(gè)知識(shí)理論難的不是學(xué)習(xí)，而是將它教授出去，因?yàn)橹挥心阆胍涯臣抡f(shuō)明白，闡述得其他人都能看懂，那么首先你要對(duì)這件事理解得很透徹，然后通過(guò)自己的經(jīng)驗(yàn)和見(jiàn)解，轉(zhuǎn)化成通俗的語(yǔ)言說(shuō)給別人聽(tīng)。最好的狀態(tài)就是與你同樣級(jí)別的人你能與他用專業(yè)術(shù)語(yǔ)對(duì)話，級(jí)別比你低的人你能把理論轉(zhuǎn)換成他能聽(tīng)懂的語(yǔ)言進(jìn)行交流，這樣才算是對(duì)理論概念理解透徹到位。

大家也明白，學(xué)習(xí)最有效的方法不是輸入而是輸出，設(shè)計(jì)也是一樣的。在學(xué)習(xí)某種理論方法后，通過(guò)書(shū)面表達(dá)出自己的見(jiàn)解和想法，并代入到相應(yīng)的例子當(dāng)中，做到舉一反三才能算是真正的學(xué)到了這個(gè)知識(shí)點(diǎn)。

· 述職

述職一般出現(xiàn)在晉升報(bào)告或者面試當(dāng)中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f(shuō)是工作報(bào)告中的總結(jié)性報(bào)告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機(jī)會(huì)；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無(wú)成效的工作，述職沒(méi)有想象的那么簡(jiǎn)單，但是也沒(méi)有那么難，很多人都會(huì)經(jīng)歷兩個(gè)述職的誤區(qū)，這些誤區(qū)我經(jīng)歷過(guò)也看到過(guò)，所以總結(jié)出來(lái)警醒大家。

一、把述職當(dāng)作流水賬

把述職當(dāng)作流水賬是很多新人容易犯的錯(cuò)誤，當(dāng)述職的時(shí)候，有的人就會(huì)陳列出自己今年做了多少多少工作：“我今年改版了 XXX 模塊”、“我設(shè)計(jì)了 XXX 的首頁(yè)”、“我通過(guò)調(diào)查研究自主推導(dǎo)改版了 XXX 模塊并落地成功”等等，這時(shí)候你的老板/面試官會(huì)心里會(huì)想：“所以呢？”“然后呢？”，工作結(jié)果固然重要，但是決定你能否晉升/錄用的，不僅僅是把你做的工作進(jìn)行流水賬般的描述就夠了的。

二、把述職當(dāng)作邀功大會(huì)

這個(gè)誤區(qū)相對(duì)來(lái)說(shuō)更高端一些，述職的時(shí)候有的人常常會(huì)像邀功一樣：“我今年通過(guò)改版了 XXX 模塊，導(dǎo)致用戶量從50%上漲到了80%”、“通過(guò)調(diào)查研究改版了 XXX 模塊，最后通過(guò) A/B 測(cè)試發(fā)現(xiàn)數(shù)據(jù)上漲了5%，最后落地全部實(shí)施新的設(shè)計(jì)方案”，這些看似闡述了產(chǎn)品的背景、自己做了什么以及結(jié)果，但是往往來(lái)說(shuō)還是不夠的，以上統(tǒng)統(tǒng)可以歸為無(wú)效述職。

你做了什么重要嗎？沒(méi)那么重要，重要的是你帶了什么樣的價(jià)值。述職所需要你做的，老板/面試官所想要了解的就是：分析為什么產(chǎn)品之前數(shù)據(jù)會(huì)那么低？你是通過(guò)那些方法得出解決方案的？為什么那么多種解決方案里你要選擇這一種？你這樣的方法能否沉淀成體系？如果換一個(gè)人來(lái)按照你的方法做是否可以得到同樣的效果？有效述職也就是決定你能向上一步的，是把你在工作中的感性認(rèn)知上升到理性規(guī)律的歸納總結(jié)的能力體現(xiàn)。

· SCQA 模型

SCQA 模型是一個(gè)“結(jié)構(gòu)化表達(dá)”工具，是麥肯錫咨詢顧問(wèn)芭芭拉·明托在《金字塔原理》中提出的，而這個(gè)模型可以套用在業(yè)務(wù)表達(dá)、書(shū)面表達(dá)以及述職任何場(chǎng)景當(dāng)中；S是指場(chǎng)景(Situation)，C是指沖突(Complication),Q是指問(wèn)題(Question)，A是指解決方案(Answer)。

無(wú)論你是在向業(yè)務(wù)方/老板闡述方案做工作匯報(bào)，還是自己寫(xiě)作梳理都可以用到這個(gè)模型；S場(chǎng)景陳述的通常是大家都熟悉的事、普遍認(rèn)同的事、事情發(fā)生的背景。由此切入既不突兀交代了事情背景又容易讓大家產(chǎn)生共鳴，產(chǎn)生代入感，然后引出沖突C。Q是其中發(fā)現(xiàn)的問(wèn)題，最后A給出相對(duì)應(yīng)的解決方案，是對(duì)Q的回答也是接下來(lái)我們要闡述的內(nèi)容。整個(gè)結(jié)構(gòu)其實(shí)是形成良好的溝通氛圍，然后帶出沖突和疑問(wèn)，最后提供可行的解決方案。

我們熟知的廣告詞經(jīng)常使用這個(gè)套路：

得了灰指甲——描述場(chǎng)景【S】

一個(gè)傳染兩——發(fā)生了沖突【C】

問(wèn)我怎么辦？——提出問(wèn)題【Q】

馬上用亮甲！——給出解決方案【A】

這個(gè)模型無(wú)論作為演講的開(kāi)場(chǎng)白，作為向業(yè)務(wù)方/老板闡述設(shè)計(jì)方案的開(kāi)場(chǎng)，還是作為一篇文章的序言都是屢試不爽的。S場(chǎng)景需要讓對(duì)方產(chǎn)生共鳴，必須讓對(duì)方產(chǎn)生一種：“是的，你說(shuō)的好有道理”的反應(yīng)，只有場(chǎng)景被認(rèn)同了才能繼續(xù)故事的發(fā)展，這時(shí)候打破你給對(duì)方營(yíng)造的安全感，制造C沖突，相繼提出Q問(wèn)題，共同確認(rèn)面臨的一個(gè)問(wèn)題，然后你給出你的A解決方案，而這個(gè)解決方案就是你整個(gè)敘述的核心和中心思想。

比如你要向業(yè)務(wù)方/老板闡述你的設(shè)計(jì)方案，就可以這樣來(lái)描述：“在 XXv2.0 版本上線后（交代場(chǎng)景），收集了近半年以來(lái)的數(shù)據(jù)發(fā)現(xiàn)，女性用戶相對(duì)減少了20%（發(fā)生沖突），為什么會(huì)減少20%的女性用戶（提出疑問(wèn)），根據(jù)我的調(diào)查研究發(fā)現(xiàn)原因是改版后整個(gè)產(chǎn)品色調(diào)偏男性化，由于我們產(chǎn)品的受眾群體大多是女性用戶，男女比例為1:3，所以在 v.2.1 的改版中我將整個(gè)產(chǎn)品色調(diào)改為偏女性化的方向（給出解決方案）”。

同樣，我寫(xiě)這個(gè)章節(jié)的思路就可以這樣理解：設(shè)計(jì)師們工作中通常會(huì)面臨述職、面試以及寫(xiě)文章等情況（交代場(chǎng)景），但是往往很多設(shè)計(jì)師不知道如何去表達(dá)，思路也不是很清晰，導(dǎo)致述職無(wú)效、面試失敗等情況（發(fā)生沖突），要如何避免這種情況發(fā)生？如何鍛煉自己的表達(dá)能力？（提出疑問(wèn)），那就要多通過(guò) SCQA 模型在生活工作中去練習(xí)表達(dá)（給出解決方案）。

生活能力(Lives)

最后是生活能力，設(shè)計(jì)不是工作的全部，工作不是生活的全部，我們應(yīng)該過(guò)好自己的生活，產(chǎn)品設(shè)計(jì)都是從生活中獲得靈感和啟發(fā)的，我們?nèi)绾螌?duì)待自己的生活，我們就會(huì)得到怎樣的反饋。多陪伴下自己的家人、培養(yǎng)一個(gè)興趣愛(ài)好、保持學(xué)習(xí)新鮮事物的動(dòng)力等等，成為一個(gè)有趣的靈魂。往往設(shè)計(jì)師能從多樣化的生活中發(fā)現(xiàn)靈感和啟發(fā)，也能從生活中找到不同用戶的痛點(diǎn)和感知；如何做一名好的設(shè)計(jì)師，就是帶著同理心去做設(shè)計(jì)，如何帶著同理心做設(shè)計(jì)，就是將自己當(dāng)作用戶，而用戶是融入到生活中的。下面我就來(lái)例舉兩個(gè)通過(guò)生活中的啟發(fā)改變產(chǎn)品設(shè)計(jì)的例子。

· 用戶擁有感

在購(gòu)買(mǎi)星巴克的時(shí)候，為什么服務(wù)員要把顧客的名字寫(xiě)在杯子上呢？難道僅僅是為了分辨嘛？像其他奶茶店一樣貼一張打印好的便簽不就好了么？去宜家購(gòu)置家具的時(shí)候，為什么要讓顧客自己親手組裝家具？可口可樂(lè)為什么可以定制自己城市的易拉罐？因?yàn)檫@一切都是要給用戶塑造擁有感，人是一種很不理性的生物，只要先拿到一個(gè)東西，就會(huì)覺(jué)得自己擁有這個(gè)東西，就不想放掉它了，這就是擁有感最根本的示范。從心理學(xué)的角度來(lái)說(shuō)這被稱為稟賦效應(yīng)，意思就是我們對(duì)于自己所擁有東西的價(jià)值往往會(huì)看得更重。這就是為什么小時(shí)候玩的玩具、收集的畫(huà)冊(cè)、穿的衣服都已經(jīng)沒(méi)什么用了，我們還要留著當(dāng)紀(jì)念的原因。因?yàn)槲覀兊娜诵詫?duì)于擁有感非常執(zhí)著，對(duì)于自己得到的東西非常迷戀，當(dāng)我們覺(jué)得要失去它的時(shí)候，會(huì)有一種損失感，覺(jué)得很不舍，會(huì)覺(jué)得心里很難受，這就是稟賦效應(yīng)在我們身上發(fā)生了最明顯的效果。

而這樣的營(yíng)銷(xiāo)策略被用到產(chǎn)品設(shè)計(jì)當(dāng)中，例如前段時(shí)間很火的軟件 Zepeto，每個(gè)人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網(wǎng)易云音樂(lè)總結(jié)等等，賬單它只是一份賬單，根據(jù)不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測(cè)試生成的分享卡等等，這些都是產(chǎn)品設(shè)計(jì)中從生活中營(yíng)銷(xiāo)案例中汲取經(jīng)驗(yàn)的體現(xiàn)。

· 線下導(dǎo)購(gòu)轉(zhuǎn)線上

每當(dāng)我們?nèi)サ缴虉?chǎng)線下商店的時(shí)候，導(dǎo)購(gòu)員和我們素未謀面，但是卻可以通過(guò)我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產(chǎn)品，然后向我們推銷(xiāo)對(duì)應(yīng)的產(chǎn)品，如若剛好觸動(dòng)我們的需求，于是我們就會(huì)發(fā)生購(gòu)買(mǎi)這個(gè)行為。生活中線下導(dǎo)購(gòu)的方式也被運(yùn)用到線上導(dǎo)購(gòu)的產(chǎn)品中，同樣平臺(tái)和用戶素未謀面，可是可以通過(guò)掌握大數(shù)據(jù)，分析用戶近半年、近一個(gè)月的購(gòu)買(mǎi)和瀏覽商品的數(shù)據(jù)，結(jié)合相對(duì)應(yīng)季節(jié)等因素推送給用戶所需要的產(chǎn)品。比如我平時(shí)經(jīng)常瀏覽一些潮牌個(gè)性的衣物，現(xiàn)在正值冬季，想買(mǎi)一件冬季穿的棉衣，那么當(dāng)我打開(kāi)淘寶的時(shí)候，系統(tǒng)會(huì)推送一些潮牌大衣等冬季衣物在首頁(yè)，我正好有這個(gè)需求又符合我的口味愛(ài)好，自然而然就會(huì)點(diǎn)進(jìn)去購(gòu)買(mǎi)了。

有一條創(chuàng)業(yè)準(zhǔn)則是這樣說(shuō)的：“如果有點(diǎn)兒閑錢(qián)，還有點(diǎn)時(shí)間，但又找不到商機(jī)，最好的辦法就是去鬧市、電梯、小區(qū)人流量最高的那個(gè)大門(mén)口，端杯茶，靜靜的聽(tīng)人們抱怨?！?，谷歌、蘋(píng)果公司的設(shè)計(jì)思維首當(dāng)其沖的就是帶著同理心去設(shè)計(jì)、去制定設(shè)計(jì)策略，同理心來(lái)源于生活，而這一切只有設(shè)計(jì)師把自己的生活經(jīng)營(yíng)好，才能從當(dāng)中獲得啟發(fā)和感悟，然后代入自己的設(shè)計(jì)理念當(dāng)中，設(shè)計(jì)出真正能根本解決問(wèn)題的產(chǎn)品。

其次偶爾會(huì)從網(wǎng)上看到或者聽(tīng)說(shuō) XX 設(shè)計(jì)師猝死，XX 設(shè)計(jì)師檢驗(yàn)出 XX 疾病等等，每每看到此類(lèi)消息都會(huì)感到痛心，工作不是生活的全部，如果連自己的工作和生活都處理不好的話，那么說(shuō)明這個(gè)人生活能力真的很糟糕。如果一個(gè)人整天筋疲力盡打不起精神，那么他的工作會(huì)做得好嘛？所以在這請(qǐng)求大家合理安排好工作時(shí)間，勞逸結(jié)合，多鍛煉身體，多花些時(shí)間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個(gè)良性的循環(huán)。你怎樣對(duì)待生活，生活就會(huì)怎樣對(duì)待你。

總結(jié)

以上是我總結(jié)的除設(shè)計(jì)之外設(shè)計(jì)師需要掌握的技能，如果將這些比喻成大樹(shù)的話，設(shè)計(jì)能力是大樹(shù)的根部，是設(shè)計(jì)師立足的根本；而執(zhí)行能力則是這根樹(shù)的枝干，是支撐設(shè)計(jì)師全部的基礎(chǔ)；表達(dá)能力是樹(shù)枝，撐起設(shè)計(jì)師的整個(gè)世界；思考能力則是樹(shù)葉花果，是設(shè)計(jì)師綜合的產(chǎn)物；大地就是生活能力，當(dāng)設(shè)計(jì)師的產(chǎn)物（物質(zhì)、地位等）“落地”時(shí)，滋養(yǎng)著大地，大地越“肥沃”，越能催生出茂盛的枝葉；而規(guī)劃能力就是一位辛勤的園丁，什么時(shí)候需要澆水，什么時(shí)候需要修剪枝葉，都是由園丁來(lái)承擔(dān)。

想要跑贏別人，首先得跑過(guò)那個(gè)跑得最快的自己。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

五大漸變趨勢(shì)是什么？如何在你的工作中有效地使用?

你可能已經(jīng)注意到，在17、18年的時(shí)候，漸變?cè)谟∷⒑蛍eb設(shè)計(jì)中的使用的越來(lái)越多了?？雌饋?lái)設(shè)計(jì)行業(yè)已經(jīng)接受了這種趨勢(shì)，這種漸變過(guò)渡在形狀和顏色上只會(huì)越來(lái)越動(dòng)態(tài)。如果你不知道如何將彩色的形狀和背景應(yīng)用到你想要通過(guò)設(shè)計(jì)傳達(dá)的信息中去，那么使用彩色的形狀和背景是一件棘手的事情。

5大漸變趨勢(shì)是什么，如何在你的工作中有效地使用漸變呢?

1、 雙色版的漸變

雙色調(diào)漸變是兩種顏色，它們之間有平滑過(guò)渡。沒(méi)有更多，沒(méi)有更少。使用Illustrator中的漸變工具創(chuàng)建這些類(lèi)型的顏色過(guò)渡非常簡(jiǎn)單。當(dāng)為Duotone漸變組合顏色時(shí)，沒(méi)有規(guī)則。當(dāng)你混合3種顏色或更多顏色時(shí)，規(guī)則就會(huì)出現(xiàn).但是兩個(gè)，你可以做任何你想做的事情。這一切都取決于你對(duì)設(shè)計(jì)本身的意圖。如果你需要強(qiáng)大而大膽的信息，那么你可能需要考慮使用更鮮明，更高對(duì)比度的顏色組合。另一方面，如果你希望采用柔和，更安靜的方法，則使用較少飽和的顏色就好了。看你怎么用了

如何使用雙色版的漸變？

你可以像Duotone Gradients一樣有創(chuàng)意。這種類(lèi)型的漸變最廣泛使用是照片疊加。漸變主要用作內(nèi)容的簡(jiǎn)單背景。以下示例是由JessicaH?gg和Stink Studios為Spotify創(chuàng)建的此類(lèi)案例之一。

Duotone Gradient的另一個(gè)例子是由Barthelemy Chalvet為AgenceMe創(chuàng)建的家庭導(dǎo)航設(shè)計(jì)。在這里，我們?cè)俅螌uotone視為內(nèi)容的背景。內(nèi)容包括文本和插圖。但是，圖中使用的顏色非常謹(jǐn)慎。插圖主要是淺色調(diào)，只是一些色彩鮮艷的細(xì)節(jié)，與背景雙色調(diào)（溫暖）相反（冷）。

總而言之，使用雙色調(diào)漸變趨勢(shì)的最安全方法是將漸變背景與黑白照片混合，或?qū)⑺鼈冏鳛檎掌B加層應(yīng)用。如果你將它們與其他顏色混合，請(qǐng)確保不要過(guò)分。多種顏色在設(shè)計(jì)中可能非常出色，但如果匹配不當(dāng)，它們也會(huì)引入混亂和混亂。如有疑問(wèn)，請(qǐng)使用較少的顏色。在大多數(shù)情況下，少即是多。

2、半透明漸變

前五大漸變趨勢(shì)包括半透明漸變。這些類(lèi)型的漸變?cè)谒鼈冎芯哂型噬Ч?，它們?cè)谝欢司哂腥{(diào)，而在另一端具有0％顏色不透明度。

這些半透明漸變可以是雙色調(diào)甚至是三色調(diào)漸變，但它們總是以透明度結(jié)束或開(kāi)始。

如何使用半透明漸變？

使用半透明漸變的一種方法是將它們與其他漸變形狀和背景重疊，或者作為照片上的疊加層。下面的示例顯示了Studio-JQ制作的藝術(shù)作品

在這里，我們可以看到在三色漸變圓上使用一個(gè)半透明形狀。微妙的半透明形狀在漸變圓形前形成霧氣氛，就像褪色的月亮，簡(jiǎn)單而有效地使用透明效果。

在Magdiel Lopez制作的海報(bào)藝術(shù)品中可以看到混合了攝影和紋理的半透明漸變的另一種奇妙用法。

三、網(wǎng)格漸變

網(wǎng)格漸變是在Illustrator中使用網(wǎng)格工具制作的漸變，因此是標(biāo)題。這種類(lèi)型的漸變需要更多的技巧來(lái)制作。通常它們將多種顏色混合在一起，這應(yīng)該小心生產(chǎn)，因?yàn)槟承╊伾荒芎芎玫仄ヅ洹３藢⒍喾N顏色混合在一起外，它們還形成一種類(lèi)似于液體的紋理圖案，使其具有更加動(dòng)感的外觀。

到目前為止，您可能已經(jīng)注意到所有漸變?nèi)绾闻c黑白照片完美配合，為他們提供增強(qiáng)色彩強(qiáng)度所需的對(duì)比度。它還消除了設(shè)計(jì)中“過(guò)多”的混亂和感覺(jué)。

如何使用網(wǎng)格漸變？

網(wǎng)格漸變可以用作獨(dú)立模式。由于它們通常具有動(dòng)態(tài)外觀，因此可以作為簡(jiǎn)約模式應(yīng)用，并輔以創(chuàng)意印刷術(shù)。

使用網(wǎng)格漸變進(jìn)行品牌推廣也越來(lái)越受歡迎。這種類(lèi)型的使用可以在下面由Focus Lab制作的簡(jiǎn)約品牌項(xiàng)目中看到。

4.漸變模糊

這是事情變得有趣的地方......。介紹漸變模糊！我相信你已經(jīng)看到了這些有趣的外觀，有一種強(qiáng)烈的“藝術(shù)”感覺(jué)。它們現(xiàn)在是Top 5 Gradient Trends的一部分。

如何使用漸變模糊？

它們似乎經(jīng)常被用作海報(bào)設(shè)計(jì)的一部分。抽象的偉大之處在于它可以用來(lái)描述各種情感和抽象概念。它可以說(shuō)明聲音，光線，宇宙，幸?；虮瘋?。我們根本不知道如何描述這些單詞中的許多單詞，但精心挑選的模糊彩色形狀可以幫助我們。

讓我們看一些使用漸變模糊的示例：

5.漸變球體

最后的漸變趨勢(shì)是漸變球體，具有強(qiáng)烈三維形狀的網(wǎng)狀圓圈，提醒我們?cè)谛行呛蜌馀萆稀?

如何使用漸變球體？

Gradient Spheres在應(yīng)用程序和網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)了一席之地。由于它們與行星類(lèi)似物體相似，因此它們通常用于技術(shù)未來(lái)類(lèi)型的項(xiàng)目中。例如，Jiyoon Kim使用Gradient Spheres設(shè)計(jì)一個(gè)具有輕盈未來(lái)感的創(chuàng)意手表UI。

Mirtho Prepont為Asana制作的海報(bào)設(shè)計(jì)中使用的Gradient Sphere的另一個(gè)創(chuàng)意示例：

寫(xiě)在最后

如果你使用漸變的照片，第一步應(yīng)該是選擇正確的照片。最好的選擇是具有清晰焦點(diǎn)的照片，如果可能的話，焦點(diǎn)周?chē)鷽](méi)有其他任何東西。值得花時(shí)間的第二件事是照片的顏色。如果顏色與你的漸變無(wú)任何關(guān)系，最安全的做法是將照片切換為黑白模式。

但是，有時(shí)可以通過(guò)在Photoshop中使用“顏色飽和度”工具或“顏色平衡”來(lái)調(diào)整顏色。這正是我在這個(gè)例子中所做的。第三是選擇漸變形狀和背景。

選擇正確的漸變對(duì)象時(shí)，請(qǐng)確保它們都具有相似的色調(diào)。在我的例子中，我使用藍(lán)色/紫色物體與粉紅色/黃色物體形成鮮明對(duì)比。這些都是我需要的顏色。任何更多的東西，組成會(huì)感到混亂。雖然很容易穿過(guò)線，所以如果你不確定，只需要減少顏色和減少形狀。

如果你感覺(jué)某些東西仍然缺失，請(qǐng)?zhí)砑又行詭缀涡螤?，如果背景為淺色，則為白色;如果背景為暗，則為黑色。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

讓設(shè)計(jì)師和開(kāi)發(fā)團(tuán)隊(duì)有意識(shí)的利用好間距系統(tǒng)，可以提高產(chǎn)品的可讀性和一致性。

Cheatsheet總結(jié)了我的方法

我最近致力于為電子健康記錄（EHR）產(chǎn)品定義間距系統(tǒng)，以改善產(chǎn)品頁(yè)面的可讀性和一致性。我提出了3個(gè)間距規(guī)則（3C規(guī)則）和以4為基準(zhǔn)的間距網(wǎng)格，并且這些規(guī)則與新的印刷系統(tǒng)配合得非常好。

存在的問(wèn)題

當(dāng)定位垂直元素時(shí)，設(shè)計(jì)師不應(yīng)做出隨意或者任其自然的判斷。通常設(shè)計(jì)師通過(guò)按住Shift和上下箭頭鍵在Photoshop中實(shí)現(xiàn)垂直增量：“根據(jù)實(shí)際情況來(lái)決定使用5px或10px?！边@種方法雖然是10的倍數(shù)并且可用，但是它不符合任何印刷要求的規(guī)范。

——Robert Bringhurst，著有《印刷風(fēng)格元素》一書(shū)。

• 我們?cè)贓HR產(chǎn)品中使用了5px、10px、15px、20px的邊距/填充，但是在何時(shí)何種情況下使用這些間距，我們并沒(méi)有一個(gè)嚴(yán)格的規(guī)范。

• 邊距/填充只是間距系統(tǒng)的一部分，字體行高也會(huì)增加額外的高度空間，但目前我們沒(méi)有為現(xiàn)有（舊的）文字樣式創(chuàng)建行高規(guī)范。

• 相似的組件和內(nèi)容在產(chǎn)品中看起來(lái)不一致，這造成了EHR產(chǎn)品的整體樣式不統(tǒng)一，并且因?yàn)閿?shù)據(jù)疏密程度不同，造成了閱讀體驗(yàn)的不流暢。

解決問(wèn)題

步驟1：確定文本行高（確定基準(zhǔn)網(wǎng)格）

首先我們假設(shè)使用非常流行的8點(diǎn)基準(zhǔn)網(wǎng)格（即以8的倍數(shù)為一個(gè)間距規(guī)單位）會(huì)達(dá)到好的效果，因此在實(shí)驗(yàn)中，我把基準(zhǔn)主體字體大小設(shè)置為13px，行高設(shè)置為8的倍數(shù)即16px或則24px然后看看這兩個(gè)行高規(guī)則是否有用。如果沒(méi)用，則意味著8點(diǎn)基準(zhǔn)網(wǎng)格是不適用的。

然后我將基準(zhǔn)字體大小設(shè)置為13px，并在16px和24px之間的偶數(shù)尋找行高值。開(kāi)始我將它與18px（6的倍數(shù)）匹配，如果成功那就意味著我采用了6點(diǎn)基準(zhǔn)網(wǎng)格，也就是6的倍數(shù)（間距會(huì)是3、6、12、18、24）。后來(lái)我嘗試了20px的行高，使用起來(lái)效果很好，所以我采用了4點(diǎn)基準(zhǔn)柵格（也就是間距為2、4、8、12、16、20等）。

步驟2：用?？硕珊蛶缀渭?jí)數(shù)來(lái)確定間距值

“隨著可選擇數(shù)量的增加，做出決定的難度將會(huì)增加。”

——?？硕?/span>

我們要想出一個(gè)可感知的間距系統(tǒng)來(lái)簡(jiǎn)化設(shè)計(jì)決策，另外將所需值的數(shù)量保持在一個(gè)最小范圍內(nèi)。

• 間距值是基準(zhǔn)網(wǎng)格的倍數(shù)數(shù)值（如步驟1中確定的4點(diǎn)基準(zhǔn)網(wǎng)格），因此我的間距值為4點(diǎn)基網(wǎng)格（2、4、8、12、16、20、24、28…)

• 一般來(lái)說(shuō)，4–-5個(gè)間距值已經(jīng)為產(chǎn)品設(shè)計(jì)提供了足夠的差異性，即使對(duì)于復(fù)雜的企業(yè)產(chǎn)品也足夠了，但是在實(shí)際過(guò)程中可能需要靈活的在規(guī)范中增加間距值。

•    我決定使用4點(diǎn)基準(zhǔn)網(wǎng)格，因?yàn)樗峁┝烁玫囊曈X(jué)可感知區(qū)間，對(duì)于層次結(jié)構(gòu)的展示來(lái)說(shuō)非常好，因此間距值應(yīng)該是(2、4、8、16)。

如何以可預(yù)見(jiàn)的方式應(yīng)用這些間距值？3C法則來(lái)拯救你。

我深受Nathan Curtis上面文章中介紹的Insets，Stacks＆Inline等間距詞匯的影響。我決定在其基礎(chǔ)上構(gòu)建一個(gè)額外的詞匯組，以便我的團(tuán)隊(duì)更容易理解每個(gè)詞匯的使用環(huán)境。我將所有的間距規(guī)則分解成3個(gè)C：容器、內(nèi)容和組件。

· 容器規(guī)則使用了平方差的概念（使用16px）

· 內(nèi)容規(guī)則使用了堆棧的概念（頭部堆棧使用2px，葉節(jié)點(diǎn)堆棧使用0、4、8、16px具體取決于內(nèi)容類(lèi)型）

· 組件規(guī)則使用內(nèi)聯(lián)的概念（大多數(shù)情況下使用8px，4px表示關(guān)聯(lián)關(guān)系）

第1C：容器規(guī)則

容器是UI中的框架，其中包含內(nèi)容，通常這些內(nèi)容是頁(yè)面、卡片、模態(tài)、彈窗等。由于容器在層次結(jié)構(gòu)中處于最高層次，所以我確保所有容器的間距值（在我的例子中是16px）。提示：切勿在任何間距計(jì)算中包含邊框。

第2C：內(nèi)容規(guī)則

• 內(nèi)容存在于容器內(nèi)部，內(nèi)容包含：

• 標(biāo)題（h1、h2、h3、h4、h5） 以段落，列表，表格，表格的形式穿插數(shù)據(jù)。

所有這些內(nèi)容都是使用頁(yè)邊距垂直疊加的，但字體行高也為指定的頁(yè)邊距增加了額外的間距。我無(wú)法以一致的方式解決這個(gè)問(wèn)題，因此我同時(shí)考慮了行高和邊距，創(chuàng)建了自己的處理堆棧的方法，以下是我的過(guò)程：

A）首先解決頭部堆棧

• 如下圖，我通過(guò)使用2個(gè)選項(xiàng)來(lái)獲取標(biāo)題的行高。

• 為了簡(jiǎn)化這2個(gè)選項(xiàng)之間的行高決策，我計(jì)算了每個(gè)行高比，并決定使用等于1.5或更高的行高。對(duì)于選擇哪個(gè)行高，我仍然猶豫不決，但是在進(jìn)行了視覺(jué)探索并回顧了設(shè)計(jì)團(tuán)隊(duì)的結(jié)果之后，我們確定了應(yīng)該采用那個(gè)行高選項(xiàng)。

視覺(jué)探索的過(guò)程

• 我從頂部的H1開(kāi)始，嘗試使用2px、4px、8px等的不同間距選項(xiàng)。行高為36px的間距選項(xiàng)都很緊湊，但4px間距與行高40px感覺(jué)恰到好處！

 

• 接下來(lái)我解決了H2問(wèn)題，在我們的產(chǎn)品中，H2恰好是白色頁(yè)面的第一個(gè)標(biāo)題。所以根據(jù)容器規(guī)則，最上面的H2在頂部有16px。我決定在所有H2標(biāo)題上面給出16px間距高度（最大允許間距值），因?yàn)檫@個(gè)值使得層次結(jié)構(gòu)非常清晰。

 

• 然后我在所有標(biāo)題（H2、H3、H4、H5）和列表、段落、表格之間進(jìn)行了間距值0px、2px、4px和8px的實(shí)驗(yàn)。2px和4px的間距相差無(wú)多，但是我們?cè)谠O(shè)計(jì)團(tuán)隊(duì)內(nèi)部審查結(jié)果時(shí)，2px的視覺(jué)感知更好，盡可能的堅(jiān)持只有一個(gè)邊際數(shù)值，因?yàn)樗?jiǎn)化了設(shè)計(jì)和開(kāi)發(fā)過(guò)程。

標(biāo)題和葉節(jié)點(diǎn)間距實(shí)驗(yàn)

標(biāo)頭堆棧 - 間距為2px和4px

B）接下來(lái)解決葉節(jié)點(diǎn)堆棧

EHR有4種主要類(lèi)型的葉節(jié)點(diǎn)：

• 表單（幾乎50％的產(chǎn)品）
• 列表（幾乎30％的產(chǎn)品）
• 表格（可能是產(chǎn)品的15％）
• 段落（可能是產(chǎn)品的5％）

我開(kāi)始為最簡(jiǎn)單的內(nèi)容類(lèi)型——段落來(lái)處理間距。

每個(gè)段落內(nèi)的間距

這非常簡(jiǎn)單，只需要清空段落中的所有文本行空間，這樣兩行之間就有0px邊距。

Sketch中的排版段落（行高20px是通過(guò)視覺(jué)探索得出的，并使用WCAG SC 1.4.8進(jìn)行驗(yàn)證，其中規(guī)定“ 行間距至少是段落內(nèi)的空間的1.5倍 ”（20/13 = 1.538）

兩個(gè)連續(xù)段落之間的間距

我第一個(gè)想法是使用行高為20px的間距，但后來(lái)看到了WCAG SC 1.4.8，其中指出 ? “段落間距至少要比行間距大1.5倍，因此一段最后一行的行高為250％，這樣可以保持距離下一段第一行間距更合適。 假設(shè)％值是根據(jù)基本字體為13px的大小計(jì)算的，我計(jì)算出兩段之間的實(shí)際間距應(yīng)約為（ps - ls）= 13px，將使用margin-bottom：13px在CSS中定義。但是13px不是我們?cè)诓襟E2中確定的間距值之一，因此我選擇了16px作為段落底部的邊距。

解釋W(xué)CAG SC 1.4.8中的段落間隔規(guī)則

在Sketch中多段落排版

如果對(duì)計(jì)算結(jié)果有疑問(wèn)，我總是用視覺(jué)探索進(jìn)行交叉檢查。與其他可能的值相比，段落之間的16px間距最佳。其實(shí)我認(rèn)為12px間距會(huì)更好。但是我不想僅為這個(gè)用例為整個(gè)間距系統(tǒng)添加額外的值，另外我們的EHR產(chǎn)品沒(méi)有很多段落，幾乎沒(méi)有任何連續(xù)的段落。

列表中列表項(xiàng)內(nèi)的間距

列表是由多個(gè)同質(zhì)數(shù)據(jù)項(xiàng)組成的數(shù)據(jù)結(jié)構(gòu)，由于列表將所有這些同質(zhì)數(shù)據(jù)項(xiàng)組合在一起，因此列表項(xiàng)不像段落（它們之間有16px）那樣間距很重要。同時(shí)列表項(xiàng)仍然需要稍微分開(kāi)，所以我嘗試了0px和16px之間的間距，我只有3個(gè)值可以試驗(yàn)2、4、8，總體看起來(lái)列表項(xiàng)之間的間距為8px看起來(lái)最適合層次結(jié)構(gòu)。

帶有標(biāo)簽的2個(gè)連續(xù)輸入字段之間的間距

表單有連續(xù)的輸入字段，一個(gè)接一個(gè)地疊加在另一個(gè)之下。

無(wú)標(biāo)簽2個(gè)連續(xù)輸入字段之間的間距

無(wú)標(biāo)簽對(duì)于可訪問(wèn)性來(lái)說(shuō)并不是一個(gè)好的處理方式。然而在某些情況下，標(biāo)簽最好不要顯示，這些情況是：

• 當(dāng)多個(gè)輸入字段一起表示1個(gè)對(duì)象時(shí)（例如在下面的地址部分，“地址”字段包括街道地址1，街道地址2，城市，州，郵編）
•   當(dāng)標(biāo)簽過(guò)于明顯/重復(fù)且無(wú)法拼寫(xiě)時(shí)，例如搜索。

 

第3C：組件規(guī)則

組件有按鈕、輸入字段、圖標(biāo)等，這些組件通常放置在一起（內(nèi)聯(lián)）。此外所有的組件的尺寸均為4的倍數(shù)（也是8的倍數(shù)），因此按鈕和輸入域內(nèi)部有一個(gè)24px高度的空間（加上1px 頂部和1px的底部邊框，整體高度為26px）。當(dāng)組件能完美利用好基準(zhǔn)網(wǎng)格，并且按規(guī)則設(shè)置間距時(shí)，整體布局才會(huì)完美和諧。

2個(gè)組件的間距

我用了一個(gè)簡(jiǎn)單的規(guī)則，即在大多數(shù)時(shí)候任意2個(gè)相鄰組件之間使用8px間距。在少數(shù)情況下使用4px來(lái)顯示兩個(gè)組件之間更緊密的關(guān)系（格式塔的接近性原則）。

組件內(nèi)部間距

我對(duì)組件內(nèi)部的任何左/右填充都使用了8px。

圖標(biāo)在組件內(nèi)部間距

根據(jù)格式塔的接近性原則，將圖標(biāo)放在組件內(nèi)，將他們的間距設(shè)置為4px，而不是通常的8px。

外部圖標(biāo)與組件間距

如果圖標(biāo)與組件關(guān)聯(lián)組合，則其與組件間距為4px以顯示其關(guān)聯(lián)關(guān)系（格式塔的鄰近原則）。但是如果圖標(biāo)與一組組件關(guān)聯(lián)，那么它與最后一個(gè)組件間距8px，以表明它不僅僅是與最后一個(gè)組件關(guān)聯(lián)，而是與整個(gè)組件關(guān)聯(lián)。

結(jié)論

• 你將提出一個(gè)具有有限數(shù)值和有明確使用規(guī)范的間距系統(tǒng)，這非常易于使用并且合乎邏輯記憶。
• 在UI中使用間距，使其信息層次結(jié)構(gòu)更加合理清晰，并遵守可訪問(wèn)性指南WCAG1.4.8，這有助于不同能力的人更好的掌握和理解信息。
• 開(kāi)發(fā)工程師了解間距系統(tǒng)，并且熟悉其應(yīng)用的場(chǎng)景和規(guī)則，這樣可以讓設(shè)計(jì)和開(kāi)發(fā)之間的溝通更順暢，工作效率更高等。
• 設(shè)計(jì)師不再需要對(duì)所有內(nèi)容進(jìn)行排查，開(kāi)發(fā)工程師不再需要花時(shí)間檢查Zeplin等其他工具中樣式問(wèn)題。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

UI走查表有什么用？

一套成熟的UI走查表能更科學(xué)更地改稿；減少設(shè)計(jì)中的反復(fù)試錯(cuò)、評(píng)審交付時(shí)更言之有物；不僅僅停留于“看上去順眼”、“我覺(jué)得挺好”、“先這樣”的視覺(jué)表層。更深一層來(lái)說(shuō)，走查表有助于培養(yǎng)設(shè)計(jì)師的結(jié)構(gòu)化思維，形成一個(gè)完整的設(shè)計(jì)體系。

01.頁(yè)面要表達(dá)的意思是否正確

在設(shè)計(jì)頁(yè)面的時(shí)候，需要注意頁(yè)面要傳達(dá)給用戶的信息重點(diǎn)，例如本次案例的產(chǎn)品需求中，該頁(yè)面的功能是促使用戶快速下單，信息上則要側(cè)重于價(jià)格與優(yōu)惠信息。

首屏信息是給用戶的第一印象，在用戶打開(kāi)頁(yè)面，盡可能展現(xiàn)出更多用戶感興趣的內(nèi)容， 而此次頁(yè)面需要突出促銷(xiāo)優(yōu)惠信息，次要信息則放在后面。

02.頁(yè)面視覺(jué)重點(diǎn)

相信大家平時(shí)經(jīng)常聽(tīng)說(shuō)0.618的黃金比例（斐波那契數(shù)列），屏幕方寸間合理運(yùn)用黃金比例可以讓界面視覺(jué)重心更加平穩(wěn)，視覺(jué)更加舒適。同時(shí)有助界面區(qū)域分割，集中視覺(jué)焦點(diǎn)，承載更重要的信息，讓整個(gè)界面布局更加合理。

淘寶、京東到家等成熟的一線產(chǎn)品黃金比例運(yùn)用，o在視覺(jué)焦點(diǎn)區(qū)域都向用戶展示了關(guān)鍵信息。

02.元素間距符合各層級(jí)的關(guān)系

為什么頁(yè)面會(huì)雜亂無(wú)章？主要是信息一味地堆砌，分布沒(méi)有區(qū)別，但只要遵從以下方法，頁(yè)面就會(huì)清晰很多，有節(jié)奏的呼吸感也出來(lái)了。

同類(lèi)的板塊不應(yīng)被混亂的間距區(qū)隔開(kāi)來(lái)，他們應(yīng)該更集中，并且整體與別的板塊區(qū)別開(kāi)來(lái)，同理，不僅僅是板塊，元素與元素之間也是如此，這樣用戶可以更加快速地看到自己想要的東西。

那么，如何更好地讓信息按照相似屬性分布合理呢？這就要利用5分、等分原則來(lái)讓分布變得更合理，假設(shè)相同板塊的間距值為a px，則不同板塊為2apx。這樣不僅在視覺(jué)可以將信息分布開(kāi)來(lái)，還能讓整體的布局更加規(guī)整，不會(huì)凌亂，盡可能使用同一或者同倍數(shù)的間距，更便于開(kāi)發(fā)。

案例中，相近元素的間距為16px（a px），則不同類(lèi)別的元素則為32px（2a px）。

01.字體種類(lèi)的控制

一個(gè)產(chǎn)品如果字體種類(lèi)過(guò)多，會(huì)導(dǎo)致界面的不統(tǒng)一與混亂。通常字體控制盡量在3種以內(nèi)，中文字體、英文字體以及特殊數(shù)字字體。如下圖：

02.字號(hào)與粗細(xì)控制

字號(hào)過(guò)多使信息失去重點(diǎn)，基礎(chǔ)字號(hào)控制在3種以內(nèi)，目的在于清晰區(qū)分信息的層級(jí)。正文字號(hào)建議為28px，副文案為24px，大標(biāo)題、價(jià)格等重要信息需按實(shí)際情況加大，令信息的層級(jí)區(qū)分更明顯。

加粗字體往往是整個(gè)界面的視覺(jué)焦點(diǎn)，重點(diǎn)的文本（如標(biāo)題、價(jià)格）需要加粗處理，注意控制字體加粗的使用，以免造成信息層級(jí)的混亂。 下圖為調(diào)整字號(hào)及粗細(xì)的前后對(duì)比：

03.行距控制

行距太小不便于用戶閱讀，太大會(huì)顯得松散，所以控制在1.2-1.5倍的范圍是較為舒適的范圍。下圖為調(diào)整行距的前后對(duì)比：

04.字體顏色

字體主要以黑白灰為主：#333333?#666666?#999999；字體顏色深淺有序能讓信息層級(jí)主次分明，產(chǎn)品應(yīng)該根據(jù)不同模塊以及同一模塊的層級(jí)需要調(diào)整不同的灰度值，并在產(chǎn)品中反復(fù)使用，統(tǒng)一規(guī)范輸出。

信息越重要，字體顏色越深。除此之外我們還需要注意到什么呢？也是很多剛?cè)胄械脑O(shè)計(jì)小伙伴很容易忽略的細(xì)節(jié)，產(chǎn)品的實(shí)際使用環(huán)境。比如，我們此次改版的產(chǎn)品詳情界面就是線上下單，線下提貨的運(yùn)營(yíng)模式，不僅需要考慮室內(nèi)使用環(huán)境，還需要考慮到特殊的室外強(qiáng)光環(huán)境。結(jié)合下圖感受一下。

如何在強(qiáng)光環(huán)境下保證產(chǎn)品良好的視覺(jué)體驗(yàn)?zāi)兀窟@也是UI走查表需要注意到的細(xì)節(jié)點(diǎn)：強(qiáng)光測(cè)試(大于4.5:1)。

4.5：1經(jīng)驗(yàn)數(shù)值參考前輩行業(yè)經(jīng)驗(yàn)總結(jié)：

https://www.w3.org/TR/WCAG20/

https://www.sitepoint.com/making-bootstrap-accessible/

我們先觀察一組顏色對(duì)比，如下圖：

我們會(huì)發(fā)現(xiàn)字體顏色層級(jí)依然是深黑色、中黑色、淺黑色，相信很多設(shè)計(jì)師朋友已經(jīng)注意到我們使用的顏色更深了，為什么呢？為了保證好在強(qiáng)光環(huán)境下的信息閱讀可閱讀性，如下圖：字體信息最淺層級(jí)，淺黑色的色彩數(shù)值對(duì)比數(shù)值都大于4.5:1。

強(qiáng)光測(cè)試鏈接：https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF

有細(xì)心的設(shè)計(jì)師朋友或許已經(jīng)注意到色彩值并沒(méi)#333/#666/#999那么便于記憶了，為什么呢？

為了提升更好的視覺(jué)感受與界面的品質(zhì)感，我們?cè)谧煮w顏色中采用了偏藍(lán)灰，至于為什么，大家不防給我一起觀察下圖，上圖灰色看上去略微有一些臟臟的感覺(jué)，下圖視覺(jué)更耐看、更有質(zhì)感。

騰訊新聞、金色財(cái)經(jīng)App中的也應(yīng)用到了偏藍(lán)灰，帶來(lái)種撲面而來(lái)的清爽。

除了常用字體層級(jí)的顏色對(duì)比，在界面中針對(duì)關(guān)鍵的賣(mài)點(diǎn)信息還用到強(qiáng)調(diào)色，即品牌色

品牌色也會(huì)經(jīng)常運(yùn)用到特殊字體、提示文字、鏈接等等。

改版前，促銷(xiāo)信息缺少提示入口；改版后，以品牌色作為入口字體顏色，引起用戶注意。

01.視覺(jué)比例

由于圖標(biāo)通常都是成群結(jié)對(duì)的出現(xiàn)，彼此之際的統(tǒng)一性顯得非常重要，但是常常容易被忽略，可以制定如下圖的圖標(biāo)盒子來(lái)規(guī)范尺寸。

02.圖標(biāo)設(shè)計(jì)要點(diǎn)

設(shè)計(jì)圖標(biāo)時(shí)應(yīng)注意基礎(chǔ)形狀復(fù)用，保持整體識(shí)別性。如下圖重復(fù)使用矩形、圓形、橢圓形等基礎(chǔ)形狀進(jìn)行設(shè)計(jì)，既能統(tǒng)一大小又有整體感。

面性圖標(biāo)

設(shè)計(jì)時(shí)需要注意挖空比例的一致性，保持圖標(biāo)的整體性。如價(jià)格走勢(shì)、降價(jià)通知這一排圖標(biāo)，挖空比例控制在20%

線性圖標(biāo)

設(shè)計(jì)時(shí)應(yīng)注意保持良好的線條粗細(xì)的統(tǒng)一，案例中使用2px的粗細(xì)線條重復(fù)使用，所有圖標(biāo)的粗細(xì)與文字粗細(xì)一致，和諧統(tǒng)一

03.圖標(biāo)尺寸

在app中，功能圖標(biāo)大致可分成兩種：可以點(diǎn)擊的按鈕；不可點(diǎn)擊的展示圖標(biāo)。

可以點(diǎn)擊的按鈕常用于導(dǎo)航欄、tab欄、操作欄（吸底按鈕圖示）常用尺寸為：48x48px 64x64px。如下如的導(dǎo)航和吸底按鈕都用了48x48px的大小。

不可點(diǎn)擊的展示圖標(biāo)常用于信息展示位置（價(jià)格走勢(shì)/規(guī)格/評(píng)論等圖示）常用尺寸為：24x24px 32x32px，如下圖，評(píng)論模塊中的展示圖標(biāo)使用24x24px，價(jià)格走勢(shì)則使用了32x32px的尺寸。

04.標(biāo)簽的走查規(guī)范

從商業(yè)的角度，標(biāo)簽是為了凸顯產(chǎn)品賣(mài)點(diǎn)，比如你在商場(chǎng)時(shí)常能看到“全場(chǎng)低至2.9折”這類(lèi)的促銷(xiāo)信息，其實(shí)在界面中同樣也會(huì)有，目的就是為了抓住用戶貪小便宜的消費(fèi)心理，對(duì)比沒(méi)有標(biāo)簽的同類(lèi)商品，用戶會(huì)更佳傾向與有有標(biāo)簽的商品。

常用標(biāo)簽樣式有三種表現(xiàn)樣式，面性：填充一整個(gè)色塊；線面結(jié)合：低飽和度的色塊結(jié)合高飽和度的描邊；線性描邊：1px粗細(xì)描邊；

如上圖：為展示清楚，在原來(lái)基礎(chǔ)上放大了1倍，運(yùn)用規(guī)則與之前提到的圖標(biāo)一樣，根據(jù)模塊功能的重要性去搭配，按照重要到次要的排序是：面性>線面>線性

標(biāo)簽呼吸感規(guī)律：

很多初級(jí)設(shè)計(jì)師都在疑惑到底標(biāo)簽文字定多大合適呢？標(biāo)簽字號(hào)一般為：18-22px

以"自營(yíng)"標(biāo)簽為例

如上圖：外框邊距橫縱向成2倍的倍數(shù)關(guān)系，所以以后在畫(huà)標(biāo)簽，只要先定好字號(hào)大小，剩下的邊框邊距就按照2倍的關(guān)系去拓展

為了確保我們做視覺(jué)稿的時(shí)候易于文本的閱讀我們通常會(huì)用到一些配圖，而這些配圖通常也影響著我們整個(gè)界面的美觀度，一個(gè)優(yōu)秀的設(shè)計(jì)師在設(shè)計(jì)作品時(shí)都會(huì)特別的注重圖形與圖象的比例，圖片的選取當(dāng)然也是重中之重，那么我們?cè)陧?xiàng)目中應(yīng)該如何選取圖片并且正確的使用圖片的比例呢？

01.圖片使用的規(guī)范

第一點(diǎn)：首先就是要做到讓圖片的背景保持統(tǒng)一并且做到干凈整潔

第二點(diǎn)：圖片主體的比例大小跟其他圖片保持統(tǒng)一避免出現(xiàn)有些圖片展示局部有些圖片展示整體

02.圖片模塊的常用使用比例

UI設(shè)計(jì)中圖片的比例會(huì)比較的多常用的有下列幾種

1：1，這種比例比較適用于電商，它可以讓商品圖片展示最大化。也是目前電商最主流的圖片使用尺寸。如下圖：

16：9，這種比例比較適用于視頻，這是標(biāo)準(zhǔn)的人體工程學(xué)比例，根據(jù)人體工程學(xué)家的研究發(fā)現(xiàn)人的兩只眼睛的視野范圍并不是方的，而是一個(gè)長(zhǎng)寬比例為16：9的長(zhǎng)方形，所以我們看到的視頻比例通常會(huì)采用16：9。如下圖：

4：3，這種比例應(yīng)用于新聞?lì)怉PP比較的多，它源自于一些微小型相機(jī)最原始的尺寸比例，不需要進(jìn)行過(guò)多比例的裁剪，應(yīng)用起來(lái)比較方便，對(duì)于需要展示大量的圖片信息類(lèi)的產(chǎn)品來(lái)說(shuō)特別的適用。如下圖：

如果你還是不知道如何去使用尺寸，那么你可以直接查找相關(guān)競(jìng)品進(jìn)行設(shè)計(jì)。

壓軸給大家?guī)?lái)一個(gè)小驚喜，我們整理了一個(gè)較為完整的設(shè)計(jì)走查表，希望在實(shí)踐中能夠幫到大家。

藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)