如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

云雷紋

祥云紋

八寶紋

云頭紋

壽字紋

萬字紋

唐草紋

環帶紋

纏枝紋

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

1、 雙色版的漸變

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

如何使用雙色版的漸變？

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

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

總而言之，使用雙色調漸變趨勢的最安全方法是將漸變背景與黑白照片混合，或將它們作為照片疊加層應用。如果你將它們與其他顏色混合，請確保不要過分。多種顏色在設計中可能非常出色，但如果匹配不當，它們也會引入混亂和混亂。如有疑問，請使用較少的顏色。在大多數情況下，少即是多。

2、半透明漸變

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

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

如何使用半透明漸變？

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

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

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

三、網格漸變

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

到目前為止，您可能已經注意到所有漸變如何與黑白照片完美配合，為他們提供增強色彩強度所需的對比度。它還消除了設計中“過多”的混亂和感覺。

如何使用網格漸變？

網格漸變可以用作獨立模式。由于它們通常具有動態外觀，因此可以作為簡約模式應用，并輔以創意印刷術。

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

4.漸變模糊

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

如何使用漸變模糊？

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

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

5.漸變球體

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

如何使用漸變球體？

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

Mirtho Prepont為Asana制作的海報設計中使用的Gradient Sphere的另一個創意示例：

寫在最后

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

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

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

如果你感覺某些東西仍然缺失，請添加中性幾何形狀，如果背景為淺色，則為白色;如果背景為暗，則為黑色。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

Cheatsheet總結了我的方法

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

存在的問題

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

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

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

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

• 相似的組件和內容在產品中看起來不一致，這造成了EHR產品的整體樣式不統一，并且因為數據疏密程度不同，造成了閱讀體驗的不流暢。

解決問題

步驟1：確定文本行高（確定基準網格）

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

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

步驟2：用?？硕珊蛶缀渭墧祦泶_定間距值

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

——?？硕?/span>

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

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

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

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

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

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

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

· 內容規則使用了堆棧的概念（頭部堆棧使用2px，葉節點堆棧使用0、4、8、16px具體取決于內容類型）

· 組件規則使用內聯的概念（大多數情況下使用8px，4px表示關聯關系）

第1C：容器規則

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

第2C：內容規則

• 內容存在于容器內部，內容包含：

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

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

A）首先解決頭部堆棧

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

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

視覺探索的過程

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

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

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

標題和葉節點間距實驗

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

B）接下來解決葉節點堆棧

EHR有4種主要類型的葉節點：

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

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

每個段落內的間距

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

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

兩個連續段落之間的間距

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

解釋WCAG SC 1.4.8中的段落間隔規則

在Sketch中多段落排版

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

列表中列表項內的間距

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

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

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

無標簽2個連續輸入字段之間的間距

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

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

第3C：組件規則

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

2個組件的間距

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

組件內部間距

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

圖標在組件內部間距

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

外部圖標與組件間距

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

結論

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

文疊文

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

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

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

給標題增加小色塊

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

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

用斜線或點填充空白

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

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

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

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

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

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

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

給圖片加圓形色塊

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

要點：

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

給每行文字都加一個色塊

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

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

要點：

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

用飄帶裝飾包裝上的文字

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

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

結語

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

AR的特點

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

放置類AR的場景及類型

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

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

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

放置類AR的交互框架及節點

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

初始啟動的節點分析和設計建議

1. 初始啟動環節的作用

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

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

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

啟動頁的定義及設計形式

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

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

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

引導頁的定義及設計形式

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

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

引導頁有明確內容，根據設計需求可以考慮從產品介紹、展示輔助信息、在體驗時的建議或要求等。每種設計內容有各自的適用場景、設計形式及優缺點，將結合具體的案例進行說明。

加載頁定義及設計形式

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

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

建議使用Jigspace、Lego AR、AliceARQuest等AR應用進行體驗。

2. 初始啟動設計原則及建議

整個初始啟動環節包含啟動頁、引導頁和加載頁，整體的設計原則可總結為：

初始啟動設計第一步是根據應用類型選擇設計內容和形式

不管是啟動頁還是引導頁的設計，都需要根據應用的類型去決定以何種形式給用戶展現必要的信息。例如：游戲類注重用戶的沉浸感，引導以故事介紹+體驗建議為主。科普類的需要通過界面+三維的形式展示更多信息給用戶，引導以產品介紹和信息補充為主。

啟動頁設計目標導向，不拖沓不無聊

根據APP類別選擇恰當的形式，盡量簡單直接，盡快進入后續內容頁。游戲類可形式豐富，時長稍長。

引導頁設計簡單直接，使用多維度設計手段增加引導信息的豐富度

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

加載頁設計優先考慮無感知加載，否則根據加載時長使用不同形式

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

場景搭建的節點分析和設計建議

1. 場景搭建環節的作用

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

2. 平面識別的作用及完整節點

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

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

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

動作引導定義及設計形式

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

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

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

動作引導建議使用組合方案來進行提示，可以根據產品類型和場景選擇合適的方案。結合具體案例以說明：

平面識別中的定義及設計形式

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

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

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

平面識別成功的定義及設計形式

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

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

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

平面識別異常的原因及設計

前文提到平面識別主要依賴對環境特征的檢測，在一些情況下會很難識別到平面。當出現異常時，如何引導用戶解決異常也是體驗設計的重要內容之一。經過前期技術調研，平面識別異常的情況主要有以下幾種：

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

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

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

進行提示內容話術設計時需注意：

• 提示話術不能太技術，需要用戶可理解；
• 提示內容需保證用戶可操作。

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

平面識別的設計原則及建議

平面識別的設計原則及建議：

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

模型放置的定義及作用

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

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

1. 放置方式的定義及設計形式

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

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

可以參考以下三種設計形式：

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

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

2. 放置位置的設計內容及建議

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

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

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

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

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

「AR能夠將人的表現力放大，而不是孤立起來」——Tim Cook

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

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

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

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

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

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

AR 如何改變我們的世界

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

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

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

基本上， AR 技術所充當的就是將數字和物理現實接駁在一起的那個接口。AR 所帶來的是一個全新的技術范例。在這個新領域當中，數據的復雜性將會被分析和轉化，以更加直觀的交互式圖形和動畫所替代，覆蓋在現實世界層以上。

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

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

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

原本在游戲中作為噱頭的 AR 技術逐漸脫穎而出，在通信、商業和建筑領域開始展現出無盡的潛力。

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

為什么品牌需要在意 AR 技術？

由于 AR 能夠承載復雜的數據，并且將它們轉化為可同現實世界進行溝通的交互，身為用戶，我們能夠從中吸收更多的信息。換句話說，AR 將可以更好、更快更加有效地影響用戶的決策機制。我們如今常見的社交媒體和大量的信息，已經讓人疲勞了，而 AR 這種全新的切入方式，將可以改變營銷，進而影響世界。品牌能夠在 AR 的協助下以前所未有的方式來宣傳自己和產品。

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

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

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

「在后網絡時代，AR就是狼來了的故事——大家早已聽說過，但是很少見到足夠優秀的呈現形式。」——Om Malik

UX設計師如何應對這一挑戰

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

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

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

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1.字號的設置

2.根據需求隨意組合 

3.英文的行高

4.英文的行間距

5.中文的行高

6.中文的行間距

7.行高的禁忌

8.標題行高

9.正文行高

10.混合編排

11.字體選擇

1.字號的設置

字號就是字體的大小，文字從大標題H1-H7、小標題、正文、注釋都要配置相對應的字號。頁面的字號我是以4為基數進行遞增的，最好采用偶數。像14號字的正文和13號字的注釋，這種比較小的字可以不以4為基數來做。不管設計師怎么去定義字號，只要視覺上美觀大方并具有關聯性，采用哪種規則去約束它都可以。

另外所有的字體都要調試出深色和淺色兩種配色，并分別應用在白色底色和黑色底色當中。黑色底色展示效果不好就不做展示了。

2.根據需求隨意組合

當我們定義好字號，標題和正文就可以根據實際項目需求進行自由搭配了。在給標題和正文選擇字號時要注意它們之間的對比關系，字號差異越大它們的層級關系就越明顯，但它們之間的差異又不能太大，差異過大會影響整體的視覺平衡性，給人一種不和諧不自然的感覺。

例如：標題字號20px搭配正文字號12px；標題字號24px搭配正文字號16px。選用哪種標題搭配哪種正文也是由設計師的美感決定的。

3.英文的行高

在設置文本行高的之前，需要理解一下“行高”與“行間距”的差別。前端DIV+CSS和設計Affinity Designer等繪圖軟件都是以“行高”來進行定義的。在CSS-Style line-height屬性是行高，值分別以百分比、數值和像素來表示。例如：h1.test {line-height:112px}，那標題h1的行高就是112像素了；繪圖軟件中控制行上下距離的也是行高。好的言歸正傳，中文的行高與英文行高會有一些差異，英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，如下圖所示。

基線是英文字體結構中的概念，先簡單了解一下它吧，以后講到字體的時候再講它吧。我們在繪圖軟件填寫行高的數值時，改變的就是上圖所示的這段距離。

4.英文的行間距

英文的行間距就沒有行高那么復雜，也不用畫基線。英文的行間距跟中文相同，指的是一行英文的底部線與下一行英文的頂部線之間的距離。其實也可以簡單的理解為“行與行之間的距離”并稱之為行間距。另外英文底部和頂部都有對應的專有名詞的，在英文字體結構中最頂部/最底部隱性的兩條線稱為“上沿線/上限線”和“下沿線/下限線”。這塊的知識先了解一下就行，以后在字體結構中會講到。

5.中文的行高

接下來理解下中文的行高。上面講到說英文的行高是由基線決定的，但中文字體與英文字體結構不一樣，中文里沒有基線的概念，那該怎么定義行高呢。中文的結構屬于方塊字沒有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文字體結構中沒有上沿線/上限線和下沿線/下限線的概念，它們只存在于英文字體結構中。

6.中文的行間距

中文的行間距就比較好理解了，跟英文的行間距的道理相同。是指一行中文的最底部與下一行中文的最頂部之間的距離。也可以理解為行與行之間的距離。

雖然說行高與行間距的差別不太好區分，而且還有些繞，但理解它們還是很有必要的。

7.行高的禁忌

不管是標題、正文還是注釋，他們的行高都不宜過高，行高過高會導致內容不易閱讀，文字之間的整體性也會被打散。標題的字號越大行高應該越小，正文的字號越小行高應該越大。當然這些規則都是相對的，行高大小要合理把控，不能太大或過小。那要如何合理設置行高呢，往下看。

8.標題行高

標題的行高由字號決定的。平面設計中有時候可以把行高設置與字號相同，例如120pt的字號設置120pt的行高是沒有問題的。在頁面中行高是這么計算的，字號x倍數=行高。例如下圖所示，大標題H3設置的字號是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字號與行高的倍數是一點點測的，因為字號與行高的比例不會小于1.0（1倍），我就根據自身審美進行測試，從1.0/1.1/1.2/1.3....開始測，直到測出自己滿意的行高。如下圖所示，帶顏色數字的是倍數。

最終的行高還是由設計師直觀判斷決定的。所以做設計要理性中夾雜感性，規則與創意并存才是一個優秀設計師需要兼備的品質。那我就拿中文字號36px和英文字號24px來舉個例子，這樣大家好理解一些。如下圖所示：

從測試結果中找到自己滿意的行高就可以了。字號x倍數=行高，這里也不怕倍數小數位太多的問題。在繪圖軟件中是以像素為單位，但有時候前端代碼會用父繼承單位“em”。例如：大標題H3的字號是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那轉換為前端代碼就是h3.test{line-height: 1.3em}，直接做約等于就行了，差一點點看不出來的。

9.正文行高

來接著往下講。正文行高與標題行高相同，差異就字號的不同選擇的行高也不同。標題行高倍數大概1.0-1.6不等，正文行高倍數大概1.6-2.4不等，這也沒有一定的標準，還是得根據項目情況與實際效果綜合來看。如下圖所示，帶顏色的數字是行高的倍數。

說到這里，經常有人問我正文的行高的值應該怎么設置，大家在做設計時都會采用1.5/2倍關系，但這不是絕對的，行高的倍數也是受字號大小影響的。像新浪新聞的正文，字號是18px，行高設的是32px，即字號（18px）x1.777（倍數）=32px（行高），如果行高倍數設置2倍以上，字與字之間的距離變大，就不太好閱讀了。

10.混合編排

好的，完全理解上述所有知識就可以把標題、正文和注釋進行混合編排了。大標題字號40px、正文字號20px、正文行高40px、注釋字號18px、注釋行高32px、標題與正文的間距88px、正文與注釋的間距64px。

11.字體選擇

選擇字體就沒有什么技術含量了。做頁面常用字體就只有那幾種，微軟雅黑、宋體、Verdana、arial、Times New Roman，就不舉例說明了。中文網站最常用的就是微軟雅黑+Arial，瀏覽器兼容性也最好。讀到這里有人可能就會問了，載入其他字體也可以啊，是的做企業網站可以載入其他字體，但像做功能頁面啊、后臺頁面啊，載入其他字體幾乎就不可能了。所以還是要估計實際項目需求/品牌需求來選擇與其相符的字體樣式。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

最近三星、華為和柔宇各發布了一款折疊屏手機，它可以把一臺8英寸的平板電腦通過折疊的方式變成一臺方便攜帶的6英寸手機。折疊屏手機屬于新的手機品種，也是我目前最看好的手機形態之一（未來手機的形態應該是柔性手機，現在已知有柔性電路板的存在了）。通過幾天的觀察和思考，我認為折疊屏手機有以下好處：

• 更好的閱讀體驗。目前各手機廠商的折疊屏展開態均大于7英寸，我們看視頻時擁有更好地觀看體驗，同時我們再也不用擔心看漫畫時字體太小看不清了。
• 提升效率。在「展開」模式下空間變大了，多窗口操作成為可能，我們可以一邊看世界杯一邊用微信和朋友一起視頻吶喊。
• 易用性。在這里我想到了 ipad 一個不錯的特性，打開多個應用后，并在多個應用之間進行文件管理，例如將相冊里的圖片拖到微信或者郵件里，避免了多個應用之間的來回切換。

以上基于「展開」態的想法，在折疊狀態下還有一些不錯的想法供大家思考。

外折疊設計

華為在MWC2019上演示了一個名叫「鏡像智拍」的功能，它可以讓被拍攝的人實時看到拍攝效果，并調整面部表情與姿勢。用自己最了解的角度及構圖使得拍攝事半功倍，妹子們再也不用擔心自己的男朋友把自己拍得很丑了。

在折疊狀態時可以把背面當做一個附加的交互空間，實現一些簡單的交互操作，例如打吃雞游戲時我們可以考慮在背面屏幕增加一些手勢操作進行8倍鏡的縮放，這種背部觸控方式并不是什么新鮮事，在2011年索尼旗下的掌上型游戲機 PSV 已經在背部增加了電容式多點觸控面板。

除了附加的交互空間，我們真的可以把它當做第二塊屏幕進行使用。在平時我們可以通過兩塊屏幕同時運行兩個不同的應用程序，例如我們可以用主屏幕玩游戲，在加載游戲時翻轉屏幕刷個微博，操作起來十分方便。

折疊屏當然不只有展開和折疊兩個狀態，還有翻折狀態，它區別于傳統手機和平板的獨立狀態。最直接的效果就是它可以不需要支架就立在桌面上，實現中遠距離的自拍；同時它可以進行多角度拍攝，成為制作 VR 內容的利器。在玩法上，翻折狀態可以通過兩面屏幕的不同內容引入多人互動的概念，但這種應用場景比較難想象。

內折疊設計

相比外折疊設計，內折疊設計玩法相對較少，在這里我只想到了任天堂NDS 的概念：在翻折狀態時它就是兩塊獨立屏幕，它可以獨立顯示不同的內容，例如上屏顯示內容，下屏顯示操作區域，打游戲時翻折狀態明顯要比其他狀態舒服。

個人觀點：從以上案例來看，外折疊設計在交互和玩法上都比內折疊設計好，未來很有可能以外折疊設計為主。

折疊屏手機交互設計的改變

1. 響應式布局

當折疊屏從小屏模式轉變成大屏模式時不應該只是畫面的等比例變大，而是要考慮響應式布局設計。

描述響應式設計最著名的一句話就是「Content is like water。如果將屏幕看作容器，那么內容就像水一樣」。在以前響應式設計更多用在PC Web設計上，但現在手機也應該考慮響應式設計，以下是設計時需要考慮的細節。

它不是簡單的響應式設計。從上文得知，「展開」態時要考慮是平板模式還是雙屏幕模式，如果是平板模式，那么內容應該在一個整體里；若是雙屏幕模式則可以考慮不同屏幕展示不同內容。設計時需要根據實際需求和場景進行模式選擇。

考慮通過 Fragment（片段）來設計。Fragment 是 Android3.0提出的 API，出現的初衷是為了 UI 更靈活地適應大屏幕的平板電腦。以下是 Android 對 Fragment 的官方介紹：「Fragment 表示 Activity 中的行為或用戶界面部分。您可以將多個 Fragment 組合在一個 Activity 中來構建多窗格 UI，以及在多個 Activity 中重復使用某個 Fragment。（ Activity 可以理解為一個頁面，Android 開發中最重要的概念之一）」

參考微軟的 UWP 設計概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用應用平臺）。UWP 應用的理念并不是為某一個終端而設計，而是同一套代碼和設計可以在所有 Windows 10設備上運行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。

它的響應式設計的設計技巧包括以下6點：

調整位置：你可以改變 UI 元素在不同屏幕上的位置。比如下面這個例子：為了確保同時展示兩個元素，在手機上我們必須采用縱向滾動界面，而在平板電腦上，我們可以調整框架的位置，變為橫屏滾動界面。如果你用網格設計這些位置，你也可以不改變內容框架，但其他 UI 元素可以使用響應式設計。

調整尺寸：你可以通過調整空白和 UI 元素的尺寸來優化框架，比如下面這個例子，可以通過簡單的增大內容框架尺寸來提升大屏幕的閱讀體驗。

調整順序：通過調整 UI 元素的順序和方向，優化內容顯示效果。舉個例子，在大屏上運行時，可以再添加一欄，并且加入分類列表，這些都是合理的。這個例子展示了在手機上使用一欄縱向滾動，而在平板上使用兩欄橫向滾動的優化。

展現：你可以基于屏幕的真實大小，設備支持的功能，特定的情況或者屏幕方向展示界面。下圖是媒體播放器的例子，小屏幕上這些按鈕通常是被刪減的，但在大屏幕上這些按鈕是被完全保留的。PC 上的媒體播放器比手機上的有更多的功能。

換位：這項技巧是為特定屏幕尺寸或屏幕方向切換特定的界面。下面這個例子是導航菜單：小屏幕上他是隱藏在漢堡菜單中縱向排列的，但是在大屏幕上，更大的 Tab 是更好地選擇。

改變結構：你可以為特定的設備優化特定的結構。下面這個例子就是兩種不同的接合結構。

以上6點引用了Windows 開發人員中心 《Design Basics：Responsive design 101 for UWP apps》

2. 場景化設計

考慮用戶翻轉折疊屏幕時的場景和動機是什么，從而優化現有界面及交互流程，舉幾個例子。

以 RPG 游戲為例。當玩家使用小屏模式時我們可以收起所有功能界面，使游戲的沉浸感更強；當玩家采用大屏模式時，我們可以認為玩家需要獲取更多信息，這時候把聊天、裝備等相關功能界面展示出來。

當用戶在微信里查看定位信息有新消息提醒時，手機變成大屏模式時應該同時存在地圖界面和聊天界面。

相關注意事項

Google 在2018年11月就宣布了對折疊屏的支持，包括多窗口支持、不重啟適配等等。如果想要在折疊屏手機上設計良好的用戶體驗，必須考慮以下兩個方面：生命周期管理以及轉場動效。

生命周期管理

目前大部分手機應用為了有更流暢的體驗會做適量的生命周期管理，例如退出頁面時會釋放相關內存。因此設計師在設計折疊屏交互時要考慮哪些頁面不能被銷毀，一定要讓用戶進行展開、折疊等操作， 應用任務不中斷重啟，產品可以自動適應各種屏幕下的靜態布局規格。

轉場動效

從目前 Google 公布的新版 Android系統來看，已經可以做到當折疊/展開設備的時候，頁面、內容從一個屏幕自然地切換至另一個屏幕。設計師在設計時應該基于 Google 的技術規范考慮內容、組件等模塊的轉場效果。

參考案例：

華為基于HUAWEI Mate X發布的折疊屏官方適配方案，相關鏈接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

類似這種「矛盾」的設計原則還有好幾對，接下來蔥爺要把它們一一理清，讓這些理論知識能真正指導設計實踐。

對齊與變化

對齊是版式設計最基礎的原則之一，具體指版面中的字與字、字與圖、圖與圖要對齊，常用的對齊方式有左對齊、右對齊、上對齊、下對齊、居中對齊、兩端對齊等。對齊的目的是為了使版面更整潔，更便于閱讀，比如下面這些作品都用到了大量的對齊關系。

我們來舉個實例，假設你現在要設計一則手機banner圖，目的是宣傳某款手機的拍照功能，文案如下：

這種圖不難做，你打算直接用一部手機和幾張攝影作品作為畫面的主視覺，于是去圖片網站找了幾張能體現該手機拍照功能好的圖片：

圖片找好后，你把其中一張圖片填充到手機里作為屏幕背景，其余圖片分散在手機周圍，然后你把整個視覺主體放在了版面中央，文字則按主次排在了兩側，大致效果如下：

你盯著畫面，正琢磨著還要加點什么的時候，總監不知何時出現在了你身后，他面無表情地盯著你的電腦，嘴里慢吞吞地吐出幾個字：「太亂了，好LOW」，之后就消失了。你很聰明，立刻明白了總監是想要自己排得更整潔、更有序一點。

在目前的版面中雖然個別元素之間有對齊關系，但是缺乏整體的對齊，且圖片采用了自由式排版，所以會顯得混亂。于是你嘗試把圖片對齊排列，文字則以圖片為基準進行對齊。

△ 左邊的文字部分與右邊的圖片部分保持上下對齊，標題與內文為左右兩端對齊，icon 與文字則是左對齊。

上圖很「完美」地執行了對齊原則，整個版面干凈、整潔了許多，視覺流程也更簡單了。這下總可以了吧，然而事情并沒你想的簡單。因為總監不知何時又出現在了你的身后，他癟著嘴一臉嫌棄地說道：「太呆板了，有點變化好不好？」

變化？難道又要調回改之前那種狀態啊？當然不是，你其實是要在現有的基礎上做一些變化。排版的難點和精妙之處就在這里，既要對齊，又不能機械地對齊；既要整潔有序也要靈活有變化。如何做到這一點呢？我的理解是：要在對齊中制造一點變化，在變化中找到對齊關系。比如下面這些作品：

現在你知道了，上面的方案之所以死板主要是因為文字部分與圖片部分對得太整齊，所以需要改變其中一個版塊。該版面的視覺主體是圖片，所以調整圖片更合適。由于文字是呈水平排列的，那么圖片部分是不是可以傾斜擺放形成一定的反差呢？這樣既可以制造變化還能加強版面的空間感。

△ 除了把圖片傾斜之外，LOGO也與內文錯開移到了左上角，最下邊的直線也可以延伸到了版面之外。

我們現在再回過頭來看看這件作品是否符合前面我說的，「要在對齊中制造一點變化，在變化中找到對齊關系」這一要素。

從上圖中可以看出，圖片雖然做了傾斜，卻是在對齊的基礎上做的變形扭曲。版面中的元素雖然不是都對齊了某條直線，但是沒有哪一個元素是孤立的，每一個元素都與版面中的其他元素有對齊關系。更重要的是，左邊文字版塊的視覺重心與右邊圖片版塊的視覺重心也是呈水平對齊的，所以整個畫面才得以平衡。

統一與對比

雖然設計的構成要素只有文字、圖片、色彩，但是每一個要素都有無數種表現形式，不同的字體、字號、色值、質感、風格、圖片、方向等等。如果在一個版面內含有太多不同的東西，會顯得很雜亂，從而讓人心生厭煩，所以，需要通過某種方式把這些「不同」統一起來，以達到舒適、協調的效果。

以一則運動品牌的輪播圖設計為例，文案如下：

這類設計以運動員作為主體最容易出效果，所以我們需要找一個正在奔跑的人物圖片。

△ 這個人的姿勢不錯，就他了。

運動品牌最重要的是要設計出動感和時尚感，所以我把背景分割成一紅一藍兩個傾斜的色塊，然后把人物放在畫面中央，文字分布在左右兩邊，以制造出強烈的視覺沖擊。

由于有一個動感十足的模特和背景，所以整體看來還是比較符合運動海報的調性，但視覺上有點亂，因為有很多細節沒有統一，比如人物傾斜的角度和背景色塊、標題傾斜的角度不一樣，主要文字的字體風格不一樣（NIKE和JUST DO IT的字體比較硬朗，而蓄勢待發的字體相對較柔），元素的風格也不統一（圓角的了解更多按鈕與整體風格不搭），還有各元素的顏色也缺少聯系等等。

那該怎么辦呢？這里就需要用到統一的原則了，我們可以試著把上面提到的不統一的地方都統一起來，如下圖：

△ 調整后的方案二，字體都是簡潔有力的黑體字，而且把左右兩邊的字體進行了水平對齊、背景色改為單一的漸變色、人物和文字的傾斜角度也統一了，「了解更多」的按鈕也改成了平行四邊形色塊、顏色更是被縮減到了三種。

調整之后確實不亂了，但是也有了新的問題，因為各元素太過統一使得畫面缺乏層次和對比，該突出的信息也沒有得到突出。這時候就需要用到與統一對立的另一個原則——對比。

對比，是把具有明顯差異、矛盾和對立的雙方安排在一起，進行對照比較的表現手法，目的是為了使設計更有層次、增加視覺沖擊力。設計中常見的對比有大小對比、字體對比、色彩對比、空間對比、方向對比、長短對比、粗細對比、曲直對比、輪廓對比、虛實對比等等。

想要處理好統一與對比的關系，需要記住兩個要領：

• 各元素的調性要統一、元素的呈現方式要有對比。
• 要保證畫面中的對比關系不會破壞整體的協調性。

順著這樣的思路，我們來給上圖增加一些對比關系，例如方案二的標題傾斜角度太大，不美觀，所以我干脆把它的傾斜方向改為垂直傾斜，既保留了動感也增強了對比，更加美觀。在文字的字號上，我選擇突出品牌名縮小廣告語，加強了大小對比，并且還恢復了之前把背景一分為二的做法，只是增加了一點空間感，并把人物服裝的顏色與背景色做了統一。調整后的效果如下：

我們可以觀察一下，方案三確實比方案一更協調，比方案二更有層次和視覺沖擊力，且整體調性依然年輕、時尚、有動感，這里就是運用了統一與對比的原則。

簡單與豐富

簡單應該是大家聽得最多的設計原則，簡約、極簡風格的設計也非常受歡迎，但是我們也很困擾，因為自己做的所謂極簡設計經常會被人說太單調、不夠豐富；而那些自我感覺很豐富的設計又會被說成是雜亂。為什么會這樣呢？我們先來正確地認識一下簡單與豐富。

簡單并不是指做設計要用最少的元素、不做任何修飾，而是指設計主旨要簡單，視覺流程要清晰，視覺要聚焦，主次要分明。

△ 上圖的設計雖然元素和色彩都很多，但整體給人的感覺也還是簡單的。

而豐富也不是指畫面中一定要有很多元素或疊加一堆的效果，而是指有細節、有層次、有品質感。

△ 上圖的設計雖然整體看來很簡單，但是并不會顯得單調。

為了方便理解，我們還是來舉個例子：一款農產品冊子的封面設計。該封面的必要元素很簡單，只有一個 Logo 和一句文案，因此，我們很容易想到做個極簡風格的設計。白色背景加一個 Logo 和一行文字，再配一款特種紙，做點工藝，就可以顯得很高大上，很多大品牌也是這么做的。

這也是一種還過得去的解決方案，但表現手法確實太過簡單，既體現不出設計師的設計功底，也沒有體現出農業品牌的調性和特色，且缺乏吸引力，所以我們需要做加法，讓其變得更加豐富。

怎么豐富呢？最直接的辦法就是引入圖片和色塊，由于品類為農產品，且文案重在強調健康和安全，所以我們可以找一張綠色、生態的圖片。

為了與狹長的版面保持統一，我把圖片也裁剪成了豎版的矩形，并與一個同樣大小的綠色色塊結合在一起，組成版面的主視覺，logo放在圖片左側，如下圖：

這么做還是有些設計感的，也增加了品類屬性，不過缺少細節、不耐看，所以還需要加點東西。當然，新增加的元素只能作為輔助，不能太過搶眼，圖片方面我很快想到了葉脈，葉脈與圖片中的葉子元素也能產生關聯，且適合做底紋，于是我又找來了一張葉脈的圖片。

把葉脈圖片放在圖層最底部作為背景處理，這里會遇到三種情況，一是如果把葉脈紋完全平鋪的話，整個版面就沒有留白了，所以會顯得壓抑；二是把整片葉子都顯示出來，但這么處理會顯得很小氣。所以我只用葉脈紋覆蓋了一半左右的版面，與圖片部分形成呼應，這樣的效果看起來是比較舒服的。

圖片部分得到了改善，但現在畫面中還缺少一點小的裝飾元素，增加一點文案是個不錯的思路，所以我把文案和品牌名的英文加了進來。

做完加法后整個畫面變得豐富了不少，層次也拉開了，而且給人的感覺依然比較簡單，既不雜亂也不壓抑，因為各元素主次分明，既有聯系又沒形成干擾。不過做加法的時候也要把握度，例如下圖就有點堆砌過度了，看起來很繁雜、不精致。

想要處理好簡單與豐富的關系，需要注意兩點：

• 要保證主體單一且足夠精致；
• 要保證有簡單的裝飾元素與主體形成互補。

規范與打破

規范與打破是存在于版式設計中的一對矛盾原則，規范是指把版面中的元素要按某種規律，或是在特定的范圍內設計布局，目的是為了讓畫面更有條理和秩序，也更像一個整體。

△ 上圖的主要元素都規范在一個矩形中，然后各個小矩形又組合成一個大矩形，看起來很整體，很有設計感。

與規范對立的是打破，指打破規范、打破束縛、打破平靜，目的是為了使畫面看起來更靈活、更有動感、更具視覺沖擊。

△ 用色塊或圖片來創造束縛感，然后把部分元素沖出色塊，是規范與打破的一個經典組合形式。

可以說經過了嚴格規范而變得很好看的優秀設計很多，而有些設計卻選擇了打破規范，也得到了很驚艷的效果。那什么時候該嚴格遵守規范？什么時候應該打破規范呢？其實在一件完整的設計中最好兩者都要有，而平衡這兩者的要領就是：先規范后打破，即在規范好的基礎上選擇一些局部來打破。

蔥爺還是以一個畫冊的封面設計來作為講解案例。這是一本中國移動云服務平臺方案介紹的冊子，文案如下：

很明顯該封面的視覺調性應該要有科技感，要能體現互聯網、信息、大數據這些關鍵詞，所以我找了一張看起來很有科技感的圖片。

這類畫冊的版式通常應該偏向簡潔、規矩，所以我決定用網格系統來輔助排版。以圖片作為封面的主視覺，除了Logo，所有元素都排列在矩形圖片內，并且所有文字都按照網格的設定保持左對齊，所有元素的高度、寬度，以及各元素之間的間距，都嚴格按照網格來排版。

△ 經過規范的版面整體看起來十分嚴謹。

不過這么做也造成了版面缺少變化、太過規矩等問題，所以我們可以嘗試在此基礎上做一些「打破」。

比如原本的 LOGO 與圖片靠得太近，顯得很壓抑，這里就不必完全按照網格來排版，我們可以根據自己的感覺將 LOGO 與圖片分得更開一些；中文標題、短線、英文標題這三者也太擁擠了，可以挪開一點；文字部分不一定全部都在圖片范圍內，所以我給英文標題加了一個藍色塊，并把色塊移出了圖片區域；以及把最下面的公司名稱排在了圖片下方等。調整后的效果如下：

△ 調整后的方案，構圖也相應發生了變化，之前為上下構圖，現在變成了對角構圖。

在規范的基礎上做了打破之后，我們可以看到，版面的整潔性依然在，整體的調性也依然簡潔、嚴肅，但相比調整之前顯得更靈活、更有設計感。

結語

設計不是簡單的加減法，也不是只要做到對齊、統一這些很簡單，方向很明確的原則就可以了，因為根本不存在什么原則可以讓我們直接通向設計的終點，但是我們的目標是明確的，就是要做有效的設計，所有的設計原則、設計手段都要為這個目標服務。

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