92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

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

 

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

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

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

文疊文

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

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

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

給標題增加小色塊

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

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

用斜線或點填充空白

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

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

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

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

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

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

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

給圖片加圓形色塊

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

要點：

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

給每行文字都加一個色塊

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

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

要點：

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

用飄帶裝飾包裝上的文字

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

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

結語

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

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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 的類型，引導內容有所不同。但不涉及后續具體細節操作。常見的引導包含：內容介紹、安全警告、體驗建議、環境要求、玩法介紹、新手引導等。設計手段包含：語音、音樂、音效、視覺、文字、動效。具體運用根據實際設計需求而定。可以參考以下五種設計內容：

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

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

加載頁定義及設計形式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 場景搭建環節的作用

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

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

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

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

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

動作引導定義及設計形式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

模型放置的定義及作用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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

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

 

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

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

 

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

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

 

UI走查表有什么用？

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

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

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

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

02.頁面視覺重點

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

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

02.元素間距符合各層級的關系

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

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

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

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

01.字體種類的控制

一個產品如果字體種類過多，會導致界面的不統一與混亂。通常字體控制盡量在3種以內，中文字體、英文字體以及特殊數字字體。如下圖：

02.字號與粗細控制

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

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

03.行距控制

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

04.字體顏色

字體主要以黑白灰為主：#333333?#666666?#999999；字體顏色深淺有序能讓信息層級主次分明，產品應該根據不同模塊以及同一模塊的層級需要調整不同的灰度值，并在產品中反復使用，統一規范輸出。

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

如何在強光環境下保證產品良好的視覺體驗呢？這也是UI走查表需要注意到的細節點：強光測試(大于4.5:1)。

4.5：1經驗數值參考前輩行業經驗總結：

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

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

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

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

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

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

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

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

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

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

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

01.視覺比例

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

02.圖標設計要點

設計圖標時應注意基礎形狀復用，保持整體識別性。如下圖重復使用矩形、圓形、橢圓形等基礎形狀進行設計，既能統一大小又有整體感。

面性圖標

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

線性圖標

設計時應注意保持良好的線條粗細的統一，案例中使用2px的粗細線條重復使用，所有圖標的粗細與文字粗細一致，和諧統一

03.圖標尺寸

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

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

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

04.標簽的走查規范

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

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

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

標簽呼吸感規律：

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

以"自營"標簽為例

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

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

01.圖片使用的規范

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

第二點：圖片主體的比例大小跟其他圖片保持統一避免出現有些圖片展示局部有些圖片展示整體

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

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

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

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

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

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

壓軸給大家帶來一個小驚喜，我們整理了一個較為完整的設計走查表，希望在實踐中能夠幫到大家。

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