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

 

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

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

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

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

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

1、 雙色版的漸變

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

如何使用雙色版的漸變？

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

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

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

2、半透明漸變

前五大漸變趨勢包括半透明漸變。這些類型的漸變在它們中具有褪色效果，它們在一端具有全色調(diào)，而在另一端具有0％顏色不透明度。

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

如何使用半透明漸變？

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

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

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

三、網(wǎng)格漸變

網(wǎng)格漸變是在Illustrator中使用網(wǎng)格工具制作的漸變，因此是標題。這種類型的漸變需要更多的技巧來制作。通常它們將多種顏色混合在一起，這應(yīng)該小心生產(chǎn)，因為某些顏色不能很好地匹配。除了將多種顏色混合在一起外，它們還形成一種類似于液體的紋理圖案，使其具有更加動感的外觀。

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

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

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

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

4.漸變模糊

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

如何使用漸變模糊？

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

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

5.漸變球體

最后的漸變趨勢是漸變球體，具有強烈三維形狀的網(wǎng)狀圓圈，提醒我們在行星和氣泡上。

如何使用漸變球體？

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

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

寫在最后

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

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

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

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

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

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

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

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

存在的問題

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

——Robert Bringhurst，著有《印刷風格元素》一書。

• 我們在EHR產(chǎn)品中使用了5px、10px、15px、20px的邊距/填充，但是在何時何種情況下使用這些間距，我們并沒有一個嚴格的規(guī)范。

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

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

解決問題

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

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

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

步驟2：用?？硕珊蛶缀渭墧?shù)來確定間距值

“隨著可選擇數(shù)量的增加，做出決定的難度將會增加?！?/span>

——希克定律

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

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

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

•    我決定使用4點基準網(wǎng)格，因為它提供了更好的視覺可感知區(qū)間，對于層次結(jié)構(gòu)的展示來說非常好，因此間距值應(yīng)該是(2、4、8、16)。

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

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

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

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

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

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

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

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

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

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

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

A）首先解決頭部堆棧

• 如下圖，我通過使用2個選項來獲取標題的行高。

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

視覺探索的過程

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

 

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

 

• 然后我在所有標題（H2、H3、H4、H5）和列表、段落、表格之間進行了間距值0px、2px、4px和8px的實驗。2px和4px的間距相差無多，但是我們在設(shè)計團隊內(nèi)部審查結(jié)果時，2px的視覺感知更好，盡可能的堅持只有一個邊際數(shù)值，因為它簡化了設(shè)計和開發(fā)過程。

標題和葉節(jié)點間距實驗

標頭堆棧 - 間距為2px和4px

B）接下來解決葉節(jié)點堆棧

EHR有4種主要類型的葉節(jié)點：

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

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

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

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

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

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

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

解釋WCAG SC 1.4.8中的段落間隔規(guī)則

在Sketch中多段落排版

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

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

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

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

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

無標簽2個連續(xù)輸入字段之間的間距

無標簽對于可訪問性來說并不是一個好的處理方式。然而在某些情況下，標簽最好不要顯示，這些情況是：

• 當多個輸入字段一起表示1個對象時（例如在下面的地址部分，“地址”字段包括街道地址1，街道地址2，城市，州，郵編）
•   當標簽過于明顯/重復(fù)且無法拼寫時，例如搜索。

 

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

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

2個組件的間距

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

組件內(nèi)部間距

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

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

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

外部圖標與組件間距

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

結(jié)論

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

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

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

看了很多版式技巧仍排不好版？懂得很多套路仍做不好設(shè)計？其實也正常，因為大部分技巧都比較籠統(tǒng)，每個人用起來也會有不同的效果，所以蔥爺特地總結(jié)了7個比較具體的小技巧，算是屬于一學就會且很容易出效果的排版小妙招，希望能幫你解決一些比較具體的問題。

文疊文

該技巧操作起來很簡單，就是在標題或內(nèi)文下面，增加相關(guān)的英文單詞或阿拉伯數(shù)字就可以了。不過在處理下面的文字時要注意：

• 顏色要比上面的文字淡，以免影響其識別性；
• 字體要用粗體，且字號要比上面的文字大；
• 要與上面的文字錯位排版。

之所以這么處理是為了增加版面的層次、對比，以及豐富元素。

給標題增加小色塊

這是增強標題設(shè)計感的另一種處理方式，單純的文字標題難免顯得單調(diào)，我們可以通過增加輔助元素使它變得更豐富一點，比如在文字的基礎(chǔ)上加小色塊。

色塊的高度最好大于筆畫厚度，小于文字的高度，加上去的方式可以是疊加于文字之上，或是置于文字底部，創(chuàng)造出文字的一部分在色塊內(nèi)一部分在色塊外的對比效果。還有，色塊的顏色最好來源于版面中的其他元素。

用斜線或點填充空白

在做設(shè)計的時候常常會遇到這兩種情況，一是版面中會多出一些影響版面平衡的空白，但已經(jīng)沒有合適的內(nèi)容可以填充了，如果硬塞一些裝飾文字或者圖案，很可能會弄巧成拙；二是有的區(qū)域小元素小信息比較多、比較散。怎么辦呢？

這兩種情況都可以通過該方法解決。把斜線或點重復(fù)排列成一個矩形，然后把它填充在空白處就可以平衡版面，且不會造成突兀的感覺，如下圖案例：

要點：線條不宜太粗，點也不宜太大，而且此方法只適合填補小空白，不適合填補大面積的空白。

在比較散的元素下方排一組斜線，可以把各個分散的元素聯(lián)系起來，使其成為一個整體。如下圖：

把背景分成兩個斜切的色塊

背景能很大程度地影響版面的設(shè)計感，這一點應(yīng)該都有體會，常規(guī)的處理方式是把背景作為一整個色塊，而如果把背景分割成兩個幾何色塊時，設(shè)計感立馬就會增加不少。

分割的方式好比用一把刀在背景的黃金分割處，劃一條傾斜的直線貫穿版面，使整個背景一分為二，而這兩個色塊的顏色對比要比較強烈。另外，在橫版中用左右分割，豎版中用上下分割效果會比較好。

給圖片加圓形色塊

增加對比關(guān)系是加強設(shè)計感的最有效技巧，我們也可以用此方式來優(yōu)化圖片。如果版面中的配圖是沒有背景的產(chǎn)品或人物，那么在這些圖片上加一個圓形的色塊，創(chuàng)造出虛與實的對比，通常也能得到不錯的效果。

要點：

• 色塊可以置于圖片底部，也可以采用正片疊底壓在圖片上方；
• 圓形色塊的邊長至少要超出圖片寬或高；
• 圖片與色塊要錯位排列。

給每行文字都加一個色塊

該手法在畫冊和海報設(shè)計中比較多見，與直接在一段文字下方加一個大色塊不同，而是要根據(jù)每行文字不同長度，單獨加一個相應(yīng)長短的色塊，所以這些文字每一行的長短最好是不一樣的。

這種處理方式可以使整段文字看起來更整體，增加文字視覺沖擊力，而且還能使文字與背景區(qū)隔開，加強文字的識別性。

要點：

• 段落文字行數(shù)太多或太少效果都不會很好，3-10行左右為最佳。
• 各個小色塊可以相互連起來，也可以相互隔開，以實際效果為準。

用飄帶裝飾包裝上的文字

如果你看過的食品包裝夠多，你應(yīng)該能發(fā)現(xiàn)，很多包裝上的產(chǎn)品名稱、廣告語或者賣點等信息，都會擺放在一條飄帶上。這么處理的效果通常不錯，因為飄帶具有禮品、贈送的寓意，用在哪里都不會太唐突，而且飄帶的形式簡單、有細節(jié)、變化豐富，很適合用作裝飾元素。

還有一點也很重要，飄帶的形式一般都是柔軟的曲線，這與版面中其他直線元素可以形成鮮明的對比，加強版面的靈活性。

結(jié)語

以上的七個小妙招是不是既簡單又實用，你們在做設(shè)計的時候記得拿出來試試。不過這些也確實只是小技巧而已，只能優(yōu)化局部，不要指望用上這幾招就能做出很好的設(shè)計，而且它們也不一定適合所有情形，在實際操作中一定要具體問題具體分析，靈活運用。

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

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

AR的特點

• 不隔離真實世界，而是將計算機生成的信息和物體疊加到現(xiàn)實場景中。
• 借助AR設(shè)備，用戶可以更自然地與增強現(xiàn)實環(huán)境進行交互，這類交互滿足實時性，例如手勢、語音。
• 計算機生成的物體與真實環(huán)境無縫對接，并且用戶在真實環(huán)境中運動時，也將繼續(xù)維持正確的位置關(guān)系。

放置類AR的場景及類型

AR的場景多種多樣，其中在手機設(shè)備的AR體驗中，有一種基本且常見的場景：通過手機攝像頭，用戶在環(huán)境中放置虛擬物體（模型），用戶與它有一些具體的互動操作，如移動、旋轉(zhuǎn)等。

我們將這類場景統(tǒng)一稱為放置類AR場景：放置對象可以是一扇虛擬場景的任意門，用戶可走入門中互動；也可以是一件家居商品，用戶可預(yù)覽商品是否與室內(nèi)環(huán)境搭配等。針對不同的放置對象和場景，設(shè)計側(cè)重點也會有所不同。

基于真實環(huán)境放置虛擬模型，并與模型進行交互的AR場景。

放置類AR的交互框架及節(jié)點

無論放置的對象類型如何，用戶打開相機，在屏幕中放下具體模型和進行互動的過程具有共性。我們把中間的完整流程拆分為了以下部分：

初始啟動的節(jié)點分析和設(shè)計建議

1. 初始啟動環(huán)節(jié)的作用

用戶打開放置類AR功能后，進入環(huán)境識別前的過程，均屬于初始啟動的范圍。放置類AR為何需要有初始啟動環(huán)節(jié)，用戶不直接進入AR場景進行體驗？

由于技術(shù)和產(chǎn)品的需要，放置類AR初始啟動承載幫助用戶理解、AR素材準備，為用戶帶來更優(yōu)的AR體驗。

初始啟動的流程中，包括啟動頁、引導(dǎo)頁、加載頁三個部分節(jié)點，三個節(jié)點可同時存在，也可只存在一個或兩個節(jié)點，具體需要根據(jù)設(shè)計需求來決定。

啟動頁的定義及設(shè)計形式

在啟動頁游戲AR應(yīng)用中比較常見，只有短暫停留。頁面起到品牌露出的作用，或在啟動APP后渲染氛圍，迅速將用戶帶入。設(shè)計手段包含：音樂、音效、視覺、文字、動效，具體運用根據(jù)實際設(shè)計需求而定?？梢詤⒖家韵聝煞N設(shè)計內(nèi)容：

• 品牌露出。圍繞 logo 進行設(shè)計，給用戶強化品牌的印象。
• 氛圍烘托。圍繞主場景/故事設(shè)計海報式的視覺設(shè)計，讓用戶對之后的AR應(yīng)用的情節(jié)/人物/模型有初步印象。

啟動頁雖然不傳遞明確的含義和信息，但不同的設(shè)計手段可以給用戶傳遞出不同的品牌調(diào)性和場景氛圍感，其中音效和動效形式的應(yīng)用會增加啟動頁設(shè)計的吸引力，下面將結(jié)合案例具體說明。

引導(dǎo)頁的定義及設(shè)計形式

引導(dǎo)頁促進用戶進入后續(xù)的核心體驗流程，傳達有關(guān)體驗的明確內(nèi)容，根據(jù) APP 的類型，引導(dǎo)內(nèi)容有所不同。但不涉及后續(xù)具體細節(jié)操作。常見的引導(dǎo)包含：內(nèi)容介紹、安全警告、體驗建議、環(huán)境要求、玩法介紹、新手引導(dǎo)等。設(shè)計手段包含：語音、音樂、音效、視覺、文字、動效。具體運用根據(jù)實際設(shè)計需求而定?？梢詤⒖家韵挛宸N設(shè)計內(nèi)容：

• 產(chǎn)品介紹式引導(dǎo)。簡明扼要地介紹AR應(yīng)用的主要作用。
• 輔助信息式引導(dǎo)。模型的補充理解信息，引導(dǎo)用戶了解模型背景知識等。
• 體驗建議/要求式引導(dǎo)。簡明扼要地提出會直接影響AR應(yīng)用體驗沉浸感的建議或者要求，以引導(dǎo)用戶照做，獲得后續(xù)最佳體驗。
• 背景故事式引導(dǎo)。通常以豐富的可視化形式展現(xiàn)于產(chǎn)品/模型交互相關(guān)的背景故事。
• 試玩式引導(dǎo)。直接以某個模型舉例，引導(dǎo)用戶一步步進行交互，獲得該模型的完整交互體驗。

引導(dǎo)頁有明確內(nèi)容，根據(jù)設(shè)計需求可以考慮從產(chǎn)品介紹、展示輔助信息、在體驗時的建議或要求等。每種設(shè)計內(nèi)容有各自的適用場景、設(shè)計形式及優(yōu)缺點，將結(jié)合具體的案例進行說明。

加載頁定義及設(shè)計形式

加載頁需要用戶等待，加載時長根據(jù)加載內(nèi)容的大小而變化。過程可能包含素材下載、模型加載、材質(zhì)渲染、界面UI等。設(shè)計手段：文字、視覺、動效、音樂、音效。具體運用根據(jù)實際設(shè)計需求而定?？梢詤⒖家韵挛宸N設(shè)計形式：

• 進度條式。常見的是浮層樣式。感知最弱，通常設(shè)計樣式跟隨移動應(yīng)用的框架樣式。
• 文案式。通過文案傳達加載過程中的信息，讓用戶知道進行到哪個步驟了，后臺正在做什么。但需要注意進程描述的文案不超過3條，且語言需要簡單好理解，避免使用技術(shù)性語言迷惑用戶。
• 轉(zhuǎn)場式。完整的轉(zhuǎn)場頁設(shè)計，視覺需要符合產(chǎn)品的整體調(diào)性，以保證整體的和諧統(tǒng)一。游戲中最常見。
• 下載式。下載式的加載可取消加載，因為模型較大，需要較長時間進行下載體驗。并且通常用戶只對單一模型感興趣，沒有連續(xù)體驗多個模型的需求。必須下載成功，才能進入后續(xù)的AR體驗。
• 靜默式。將模型下載過程并入引導(dǎo)頁，使用戶無感知。該方法適合情節(jié)連貫的AR體驗。

建議使用Jigspace、Lego AR、AliceARQuest等AR應(yīng)用進行體驗。

2. 初始啟動設(shè)計原則及建議

整個初始啟動環(huán)節(jié)包含啟動頁、引導(dǎo)頁和加載頁，整體的設(shè)計原則可總結(jié)為：

初始啟動設(shè)計第一步是根據(jù)應(yīng)用類型選擇設(shè)計內(nèi)容和形式

不管是啟動頁還是引導(dǎo)頁的設(shè)計，都需要根據(jù)應(yīng)用的類型去決定以何種形式給用戶展現(xiàn)必要的信息。例如：游戲類注重用戶的沉浸感，引導(dǎo)以故事介紹+體驗建議為主?？破疹惖男枰ㄟ^界面+三維的形式展示更多信息給用戶，引導(dǎo)以產(chǎn)品介紹和信息補充為主。

啟動頁設(shè)計目標導(dǎo)向，不拖沓不無聊

根據(jù)APP類別選擇恰當?shù)男问?，盡量簡單直接，盡快進入后續(xù)內(nèi)容頁。游戲類可形式豐富，時長稍長。

引導(dǎo)頁設(shè)計簡單直接，使用多維度設(shè)計手段增加引導(dǎo)信息的豐富度

不管引導(dǎo)的內(nèi)容是產(chǎn)品介紹，還是試玩引導(dǎo)，簡單直接始終是目標，不在引導(dǎo)的部分占用用戶過長的時間。另外也不能為了節(jié)約時間而使必要信息缺失，因此可以選擇豐富的設(shè)計手段，讓必要信息充分暴露。

加載頁設(shè)計優(yōu)先考慮無感知加載，否則根據(jù)加載時長使用不同形式

如無法無感知，則根據(jù)加載時長選擇加載的設(shè)計形式。例如：時長較短的加載過程需要簡單明快，不打擾用戶。時長較長的加載過程需要過程明晰，給用戶明確的預(yù)期。盡可能避免阻斷式的加載過程。通過設(shè)計方法增加長時間等待的愉悅感，減少不耐煩。

場景搭建的節(jié)點分析和設(shè)計建議

1. 場景搭建環(huán)節(jié)的作用

AR應(yīng)用啟動后，經(jīng)歷完內(nèi)容引導(dǎo)加載的過程，便正式進入了AR場景搭建環(huán)節(jié)。從技術(shù)的角度來說，想讓模型穩(wěn)定地融合于真實世界，我們首先需要讓手機攝像頭認識周圍的環(huán)境，即為場景搭建的第一環(huán)節(jié)：環(huán)境的感知識別（環(huán)境識別包括平面識別、圖片識別、物體識別等，本文聚焦在環(huán)境中的平面識別）。確定平面之后才能繼續(xù)進行模型放置，直至用戶成功把模型在真實環(huán)境中放下。

2. 平面識別的作用及完整節(jié)點

平面識別指通過對環(huán)境特征的感知，確定一個基于真實環(huán)境的平面。確定放置平面后，即可構(gòu)建虛擬世界的坐標系，在虛擬世界中放置模型。平面識別是放置類AR體驗的第一步，是后續(xù)所有體驗內(nèi)容存在的基石。因此在設(shè)計中我們需要保證平面識別的成功率，保證用戶的順暢體驗。

這個環(huán)節(jié)本質(zhì)上是個技術(shù)驅(qū)動的環(huán)節(jié)。程序啟動后，系統(tǒng)以手機攝像頭為原點建立了3D世界坐標系。相機界面打開后，系統(tǒng)開始識別拍攝到的真實環(huán)境。通過檢測所捕獲的圖像之間的視覺差異點（即特征點），系統(tǒng)可以確立一個平面，并在世界坐標系中賦予平面一個位置信息，自此3D世界坐標系與真實環(huán)境中的平面建立了聯(lián)系。找到平面后，系統(tǒng)仍會持續(xù)進行檢測、更新平面的信息。

平面識別的成功需要用戶將手機攝像頭對準平面并移動手機，從而獲得更多平面的特征點、確定平面。因此在設(shè)計中，首先需要引導(dǎo)用戶做此動作配合；同時在用戶動作中，應(yīng)對識別狀態(tài)給予實時反饋，讓用戶有把控感；識別失敗時，有效的容錯設(shè)計可以減少用戶挫敗感，提升識別成功率。設(shè)計節(jié)點可總結(jié)為以下幾點：

動作引導(dǎo)定義及設(shè)計形式

動作引導(dǎo)需要引導(dǎo)用戶做出配合的動作從而成功識別到平面。主要的引導(dǎo)內(nèi)容是：引導(dǎo)用戶將手機朝向一個平面任意方向移動，從而識別到平面。

表現(xiàn)用戶動作的引導(dǎo)形式有多種，如：文字、圖片、動圖、語音以及這些方式的組合方案等等。每種單提示形式都有其各自的優(yōu)缺點。如文字可準確傳達信息但閱讀時間較長；動圖傳達直觀，但準確性不夠等。因此建議使用組合方案的形式進行動作提示，結(jié)合單提示形式的優(yōu)點，同時規(guī)避其缺點?？梢詤⒖家韵?種：

• 動圖類組合引導(dǎo)。用動圖直觀展示用戶需要配合做的動作，同時輔以文字說明，清晰直觀。
• 語音類組合引導(dǎo)。視覺+聽覺雙通道提示，使信息更有效傳達。

動作引導(dǎo)建議使用組合方案來進行提示，可以根據(jù)產(chǎn)品類型和場景選擇合適的方案。結(jié)合具體案例以說明：

平面識別中的定義及設(shè)計形式

程序識別平面的過程中，所花費時間往往受用戶所處環(huán)境的影響，環(huán)境較復(fù)雜時，識別時間可能較長。因此建議在平面識別的過程中，反饋識別的狀態(tài)，幫助用戶了解系統(tǒng)的行為，知道自己所處的狀態(tài)。狀態(tài)反饋有兩種建議的方式：

• 動效過渡。用特征點閃動、平面延展等動效形式表示平面正在識別中的狀態(tài)。
• 可視化識別進度。通過量化平面識別進度來表示狀態(tài)，讓用戶清晰了解自己所處的狀態(tài)階段。

平面識別中的狀態(tài)反饋可以讓用戶了解系統(tǒng)行為，明晰所屬狀態(tài)。該步驟通常會和下一步合并設(shè)計。結(jié)合案例進行說明：

平面識別成功的定義及設(shè)計形式

平面識別成功后，建議可視化檢測到的平面，給用戶成功的反饋，同時讓用戶知道即將放置模型的平面在哪里。

• 平面可視化。通過UI層直接可視化出識別到的平面，如使用網(wǎng)格等UI形式。
• 模型放置位置的可視化。通過模型放置位置的UI側(cè)面可視化識別到的平面局部，與下一步自然銜接。

平面識別成功的反饋是平面識別環(huán)節(jié)完成的節(jié)點，該步驟可能與之后的模型放置結(jié)合設(shè)計。結(jié)合案例進行說明。

平面識別異常的原因及設(shè)計

前文提到平面識別主要依賴對環(huán)境特征的檢測，在一些情況下會很難識別到平面。當出現(xiàn)異常時，如何引導(dǎo)用戶解決異常也是體驗設(shè)計的重要內(nèi)容之一。經(jīng)過前期技術(shù)調(diào)研，平面識別異常的情況主要有以下幾種：

• 光線過暗，沒有足夠的光。
• 光線過曝，光太強造成畫面過曝。
• 缺少紋理，掃描紋理很少的平面很難成功，例如掃描純白的墻是無法成功識別平面的。
• 圖像模糊 ，如果用戶快速移動手機，就會造成拍攝圖像模糊，導(dǎo)致無法識別或識別不準確。

我們可以對每種異常進行具體的提示，也可以給出綜合提示。這里建議的異常提示策略主要有兩種：

• 針對性提示。在用戶長時間檢測不到平面時，根據(jù)當前具體的異常情況給出針對性提示。如檢測到光線太暗，就提示用戶去光線充足的地方體驗。
• 總結(jié)式提示。若無法獲得具體的異常情況，可總結(jié)、合并4個原因的解決方法進行提示。

進行提示內(nèi)容話術(shù)設(shè)計時需注意：

• 提示話術(shù)不能太技術(shù)，需要用戶可理解；
• 提示內(nèi)容需保證用戶可操作。

另外異常提示的設(shè)計形式也有多種：文字、圖片、動圖、語音、組合方案等等。在設(shè)計時需要結(jié)合「動作引導(dǎo)」的設(shè)計形式進行整體提示的組合方案設(shè)計。例如動作引導(dǎo)是文字+動圖的形式，異常提示就不應(yīng)該出現(xiàn)語音形式；動作引導(dǎo)是文字+語音形式，異常提示同樣使用語音的形式更一致。

平面識別的設(shè)計原則及建議

平面識別的設(shè)計原則及建議：

• 動作引導(dǎo)需要自然、直觀、易學。減少用戶認知成本。
• 識別狀態(tài)實時反饋，形式可以是視覺、聲音甚至震動。給用戶可控感、掌控感。
• 需要有容錯設(shè)計。避免用戶因識別失敗帶來的挫敗感。
• 設(shè)計形式的一致性。動作引導(dǎo)與異常提示的設(shè)計形式需配套，保證設(shè)計的一致性。

模型放置的定義及作用

確定了放置平面后，下一步就是放置模型。模型放置指：通過一定的放置方式，讓模型出現(xiàn)在平面的某個位置上。

在模型放置模塊中，我們需要定義和設(shè)計放置方式以及放置位置。放置方式可以是自動放置，也可以是手動放置。放置位置可以是給用戶體驗效果最好的一個坐標點，即最佳放置位置；也可以是一片區(qū)域的任意一個坐標點，即可放置區(qū)域。

1. 放置方式的定義及設(shè)計形式

模型的放置方式主要有兩大類：

• 識別到平面后系統(tǒng)自動放置模型；
• 經(jīng)用戶操作手動放置模型，可以是點擊屏幕觸發(fā)模型放置或拖拽模型進行放置。

可以參考以下三種設(shè)計形式：

• 自動放置。檢測到平面后，模型自動出現(xiàn)在場景中，用戶無需做任何操作。此方式適合用戶不需走動的AR場景，對模型的位置要求不高。
• 點擊手動放置。檢測到平面后，用戶需要點擊屏幕觸發(fā)模型放置。此方式適合場景互動類應(yīng)用，需要用戶在環(huán)境中走動，對模型位置有一定要求。
• 拖拽手動放置。檢測到平面后，將模型從屏幕的模型庫中拖拽到平面上。

模型的放置方式主要有自動放置與手動放置，可根據(jù)不同場景設(shè)定適宜的放置方式，以下結(jié)合案例具體說明。

2. 放置位置的設(shè)計內(nèi)容及建議

放置模型時，模型即將放置的位置需要根據(jù)具體互動場景進行設(shè)計，以保證用戶的視覺體驗和互動體驗。如果模型放置過近，用戶無法看到模型全貌；過遠，需要用戶走動才能進行互動的應(yīng)用會增加互動難度?？梢詤⒖家韵聝煞N設(shè)計內(nèi)容：

• 最佳位置。自動放置場景和部分點擊觸發(fā)放置場景下，建議給模型設(shè)置一個默認最佳位置（具體的坐標點）。
• 可放置區(qū)域。拖拽放置場景下，建議給模型設(shè)置一個可放置區(qū)域。

在做具體的放置位置設(shè)計時，需要考慮以下幾方面的因素：

• 模型完整呈現(xiàn)。需保證模型初次出現(xiàn)時在屏幕中顯示完整且以最佳視角出現(xiàn)。
• 互動距離適宜。例如在AR任意門體驗中，需要保證用戶走兩三步就能進入虛擬場景。自由放置的模型可以設(shè)置最近以及最遠的互動界線，以免模型過大或過小造成交互困難。
• 場景元素布局符合邏輯。需考慮模型與場景內(nèi)其它元素的關(guān)系，設(shè)計合乎邏輯的位置。例如食物出現(xiàn)在場景中的盤子里等。

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

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

即使是進的技術(shù)，也通常有一個非常原始的起點。從最初的手機到如今大規(guī)模普及的智能電話，其實經(jīng)歷了差不多30年的演變。

隨著硬件設(shè)備和各種技術(shù)的逐步成熟，每個人都想知道技術(shù)的下一個變革在哪里。在諸多被廣泛關(guān)注的革命性技術(shù)當中，AR，也就是現(xiàn)實增強技術(shù)領(lǐng)域所發(fā)生的變化，是最引人矚目的。

隨著蘋果、谷歌和亞馬遜這樣處于排頭的公司開始在 AR 領(lǐng)域發(fā)力，這種技術(shù)正在逐步成為主流。

「AR能夠?qū)⑷说谋憩F(xiàn)力放大，而不是孤立起來」——Tim Cook

雖然 AR 和 VR 經(jīng)常會被混淆，但是兩者其實并不相同。從關(guān)系上來講，AR 和 VR 并非是對立的敵人，更像是血脈相近的堂兄弟。兩者之間的區(qū)別其實很簡單：在 VR 中，我們眼中的物理現(xiàn)實世界被計算機所生成的數(shù)字世界給徹底取代了。相比之下，AR技術(shù)讓數(shù)字信息直接疊加在我們可見的物理世界中。如今很多人都已經(jīng)借助類似 Snapchat 濾鏡之類的東西感受到 AR 在現(xiàn)實生活中的運用。

這種集成于各種攝影和即使通訊類軟件中的AR濾鏡，和如今 iPhone 在設(shè)計和研發(fā)上隱約一脈相承。

Tim Cook 在接受采訪的時候曾經(jīng)提及，AR 在他眼中并非是一種孤立產(chǎn)品，而是一種核心技術(shù)。對于這一技術(shù)，Cook 是這樣評論的：「智能手機是給每一個人的，我們沒有必要將它孤立而片面地放在某一國家、地區(qū)或者某個垂直市場中來看待，它是面向每一個人的。我們認為 AR 是一個宏大的技術(shù)范疇，對此我感到非常振奮，因為在此基礎(chǔ)上可以從方方面面來改善人們的生活?！?

根據(jù) Deloitte 所發(fā)布的一份報告，在年營收超過1億美元的企業(yè)中，近 90% 都已經(jīng)在其業(yè)務(wù)或者APP 中開始應(yīng)用AR或者VR技術(shù)。就目前的數(shù)據(jù)來看，他們這方面的財務(wù)狀況也相當樂觀。到2023年，AR 和 VR 相關(guān)的全球市場估計將會達到944億美元。

當然，另外一方面企業(yè)和品牌也在竭盡全力地挖掘在未來商業(yè)領(lǐng)域的潛力，這也是他們推動AR技術(shù)的諸多原因之一。

接下來，我們可以深入討論一下 AR 的內(nèi)涵外延，以及它會如何改變我們和世界的互動方式。

AR 如何改變我們的世界

我們生活在一個大數(shù)據(jù)所驅(qū)動的世界當中，大型的結(jié)構(gòu)化和非結(jié)構(gòu)化的數(shù)據(jù)，包裹著我們地每一個動作。這些數(shù)據(jù)本身就已經(jīng)是一個很大的話題了。設(shè)計師和技術(shù)革新者們一直在思考如何理解這些信息，并且合理地運用它們。

那么AR 將會如何切入到其中呢？

簡而言之，數(shù)據(jù)是二維的。它存在于計算機屏幕上，而物理世界是三維的，這兩個世界將會怎樣協(xié)調(diào)一致？AR 的作用就在這個時候發(fā)揮出來了。

基本上， AR 技術(shù)所充當?shù)木褪菍?shù)字和物理現(xiàn)實接駁在一起的那個接口。AR 所帶來的是一個全新的技術(shù)范例。在這個新領(lǐng)域當中，數(shù)據(jù)的復(fù)雜性將會被分析和轉(zhuǎn)化，以更加直觀的交互式圖形和動畫所替代，覆蓋在現(xiàn)實世界層以上。

在這一點上，AR同法國哲學家鮑德里亞所夢寐以求的超現(xiàn)實主義在精神內(nèi)核上高度統(tǒng)一。對于有想象力的技術(shù)革新者和科技企業(yè)而言，AR 技術(shù)的潛在應(yīng)用場景是無止境的。這一技術(shù)將會被大規(guī)模普及開來，在未來，你不必像現(xiàn)在這樣僅僅只能在游戲中體會這一技術(shù)。當然，像亞馬遜和 Facebook 這樣的商業(yè)巨頭也開始認真探索如何更有意義、以更有影響力的方式來使用 AR 工具。

而這也是大勢所趨。下面我將會拿出一些更為創(chuàng)新的方式，為你呈現(xiàn) AR 技術(shù)是如何具體地改變我們的生活的。

• AccuVein 使用 AR 技術(shù)幫助醫(yī)生和護士更為精準地判斷患者手臂靜脈的位置，而不用猜測。通過熱成像技術(shù)識別靜脈位置，然后借助 AR 技術(shù)將靜脈位置呈現(xiàn)處得來，從此避免扎漏的情況。
• 波音公司使用 AR 技術(shù)來輔助安裝飛機機翼，避免出錯，這一技術(shù)已經(jīng)非常成功了。
• 通用電器 GE 使用 AR 技術(shù)來幫助員工提升效率。通過使用 Xbox 和 Kinect 運動跟蹤器，員工可以更快完成復(fù)雜的布線，將指令投射到不同零件上，而電子傳感器也能提供實時反饋，確保了這一機制能夠構(gòu)成合理有效的閉環(huán)。

原本在游戲中作為噱頭的 AR 技術(shù)逐漸脫穎而出，在通信、商業(yè)和建筑領(lǐng)域開始展現(xiàn)出無盡的潛力。

而最能感受到AR的這種影響力的，是在品牌和營銷市場上。

為什么品牌需要在意 AR 技術(shù)？

由于 AR 能夠承載復(fù)雜的數(shù)據(jù)，并且將它們轉(zhuǎn)化為可同現(xiàn)實世界進行溝通的交互，身為用戶，我們能夠從中吸收更多的信息。換句話說，AR 將可以更好、更快更加有效地影響用戶的決策機制。我們?nèi)缃癯Ｒ姷纳缃幻襟w和大量的信息，已經(jīng)讓人疲勞了，而 AR 這種全新的切入方式，將可以改變營銷，進而影響世界。品牌能夠在 AR 的協(xié)助下以前所未有的方式來宣傳自己和產(chǎn)品。

舉個簡單的例子。AR 所帶來的體驗并非傳統(tǒng)的二維平面的圖像，它讓用戶可以走進商店，嘗試產(chǎn)品，幫你判斷產(chǎn)品的實際效果，它用 X射線一般的視覺幫你更好地了解眼前的一切，把所有的可能性明明白白地展示在你眼前，甚至提供360度無死角的視覺。

對于品牌而言有什么好處？

• 更強的參與感：互動式的AR能讓品牌更直接地同受眾進行互動，幫助他們體驗產(chǎn)品，并且發(fā)現(xiàn)他們通常無法看到的新功能。
• 品牌知名度提升：通過出色的 AR 體驗，品牌在用戶心目中建立漆良好的口碑，由于 AR 所提供的實時的體驗，因此在品牌價值上的轉(zhuǎn)化也更加即時有效。
• 創(chuàng)新的用戶內(nèi)容產(chǎn)出模式：新的用戶產(chǎn)出模式讓品牌能夠更上一層樓，通過整合用戶提供的實時數(shù)據(jù)，甚至可以讓用戶離開門店之前就能作出相應(yīng)的調(diào)整和反饋。
• 給用戶更強的信心：通過實時的產(chǎn)品互動，用戶將會更加準確地獲得體驗，迎合他們的期待，給用戶決策提供更強的信心。

「在后網(wǎng)絡(luò)時代，AR就是狼來了的故事——大家早已聽說過，但是很少見到足夠優(yōu)秀的呈現(xiàn)形式?！埂狾m Malik

UX設(shè)計師如何應(yīng)對這一挑戰(zhàn)

對于一線的設(shè)計師而言，AR 技術(shù)是一件聽起來非常令人興奮的事情。但是事情的前后邏輯我們確實需要仔細捋一下。Pokemon Go 的成功到底是源于AR技術(shù)的加成，還是源自于品牌本身原有的吸引力？

另一方面，AR 技術(shù)改變生活各方面的巨大潛力直到現(xiàn)在才剛剛顯現(xiàn)。別忘了，移動端設(shè)備的普及和成熟是經(jīng)歷了超過10年的醞釀，直到今天才說得上是比較成熟了。對于 AR 而言，想要立竿見影地看到某種效果，你可能要求有點高。

AR 是一種全新的媒介。設(shè)計師面對的最主要的挑戰(zhàn)，是要進入三維空間進行思考。在接下來用戶要如何同APP進行交互？他們會做出什么樣的動作？附近會有其他的人和物體嗎？這種情況下用戶會做什么？它并非看起來那么簡單，本質(zhì)上這是一次概念上的徹底飛躍。設(shè)計師需要在腦海中開始反思這件事情了。

當然，只有時間能夠最終證明 AR 是否會成為 iPhone 一樣劃時代的產(chǎn)物。一切是會因為 AR 徹底改變嗎？又或者像 Hi-Fi 一樣進入小眾市場，逐漸收縮？可以確信的是，AR 技術(shù)是有相當大潛力的，這就是為什么你會聽到越來越多相關(guān)的傳聞。一旦一項技術(shù)開始每天都被提及，那么一切就皆有可能。我們很可能將會在未來以一種截然不同的方式來體驗這個世界，誰敢輕易否定呢？

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

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

 

 

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

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

 

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

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

 

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

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

 

UI走查表有什么用？

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

01.頁面要表達的意思是否正確

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

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

02.頁面視覺重點

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

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

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

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

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

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

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

01.字體種類的控制

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

02.字號與粗細控制

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

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

03.行距控制

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

04.字體顏色

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

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

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

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

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

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

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

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

強光測試鏈接：https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF

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

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

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

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

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

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

01.視覺比例

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

02.圖標設(shè)計要點

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

面性圖標

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

線性圖標

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

03.圖標尺寸

在app中，功能圖標大致可分成兩種：可以點擊的按鈕；不可點擊的展示圖標。

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

不可點擊的展示圖標常用于信息展示位置（價格走勢/規(guī)格/評論等圖示）常用尺寸為：24x24px 32x32px，如下圖，評論模塊中的展示圖標使用24x24px，價格走勢則使用了32x32px的尺寸。

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

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

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

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

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

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

以"自營"標簽為例

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

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

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

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

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

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

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

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

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

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

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

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

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