如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
五大漸變趨勢是什么？如何在你的工作中有效地使用?
你可能已經注意到，在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>
我們要想出一個可感知的間距系統來簡化設計決策，另外將所需值的數量保持在一個最小范圍內。
間距值是基準網格的倍數數值（如步驟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個選項之間的行高決策，我計算了每個行高比，并決定使用等于1.5或更高的行高。對于選擇哪個行高，我仍然猶豫不決，但是在進行了視覺探索并回顧了設計團隊的結果之后，我們確定了應該采用那個行高選項。
視覺探索的過程
我從頂部的H1開始，嘗試使用2px、4px、8px等的不同間距選項。行高為36px的間距選項都很緊湊，但4px間距與行高40px感覺恰到好處！
然后我在所有標題（H2、H3、H4、H5）和列表、段落、表格之間進行了間距值0px、2px、4px和8px的實驗。2px和4px的間距相差無多，但是我們在設計團隊內部審查結果時，2px的視覺感知更好，盡可能的堅持只有一個邊際數值，因為它簡化了設計和開發過程。
標題和葉節點間距實驗
標頭堆棧 - 間距為2px和4px
B）接下來解決葉節點堆棧
EHR有4種主要類型的葉節點：
我開始為最簡單的內容類型——段落來處理間距。
每個段落內的間距
這非常簡單，只需要清空段落中的所有文本行空間，這樣兩行之間就有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個連續輸入字段之間的間距
無標簽對于可訪問性來說并不是一個好的處理方式。然而在某些情況下，標簽最好不要顯示，這些情況是：
第3C：組件規則
組件有按鈕、輸入字段、圖標等，這些組件通常放置在一起（內聯）。此外所有的組件的尺寸均為4的倍數（也是8的倍數），因此按鈕和輸入域內部有一個24px高度的空間（加上1px 頂部和1px的底部邊框，整體高度為26px）。當組件能完美利用好基準網格，并且按規則設置間距時，整體布局才會完美和諧。
2個組件的間距
我用了一個簡單的規則，即在大多數時候任意2個相鄰組件之間使用8px間距。在少數情況下使用4px來顯示兩個組件之間更緊密的關系（格式塔的接近性原則）。
組件內部間距
我對組件內部的任何左/右填充都使用了8px。
圖標在組件內部間距
根據格式塔的接近性原則，將圖標放在組件內，將他們的間距設置為4px，而不是通常的8px。
外部圖標與組件間距
如果圖標與組件關聯組合，則其與組件間距為4px以顯示其關聯關系（格式塔的鄰近原則）。但是如果圖標與一組組件關聯，那么它與最后一個組件間距8px，以表明它不僅僅是與最后一個組件關聯，而是與整個組件關聯。
結論
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
看了很多版式技巧仍排不好版？懂得很多套路仍做不好設計？其實也正常，因為大部分技巧都比較籠統，每個人用起來也會有不同的效果，所以蔥爺特地總結了7個比較具體的小技巧，算是屬于一學就會且很容易出效果的排版小妙招，希望能幫你解決一些比較具體的問題。
該技巧操作起來很簡單，就是在標題或內文下面，增加相關的英文單詞或阿拉伯數字就可以了。不過在處理下面的文字時要注意：
之所以這么處理是為了增加版面的層次、對比，以及豐富元素。
這是增強標題設計感的另一種處理方式，單純的文字標題難免顯得單調，我們可以通過增加輔助元素使它變得更豐富一點，比如在文字的基礎上加小色塊。
色塊的高度最好大于筆畫厚度，小于文字的高度，加上去的方式可以是疊加于文字之上，或是置于文字底部，創造出文字的一部分在色塊內一部分在色塊外的對比效果。還有，色塊的顏色最好來源于版面中的其他元素。
在做設計的時候常常會遇到這兩種情況，一是版面中會多出一些影響版面平衡的空白，但已經沒有合適的內容可以填充了，如果硬塞一些裝飾文字或者圖案，很可能會弄巧成拙；二是有的區域小元素小信息比較多、比較散。怎么辦呢？
這兩種情況都可以通過該方法解決。把斜線或點重復排列成一個矩形，然后把它填充在空白處就可以平衡版面，且不會造成突兀的感覺，如下圖案例：
要點：線條不宜太粗，點也不宜太大，而且此方法只適合填補小空白，不適合填補大面積的空白。
在比較散的元素下方排一組斜線，可以把各個分散的元素聯系起來，使其成為一個整體。如下圖：
背景能很大程度地影響版面的設計感，這一點應該都有體會，常規的處理方式是把背景作為一整個色塊，而如果把背景分割成兩個幾何色塊時，設計感立馬就會增加不少。
分割的方式好比用一把刀在背景的黃金分割處，劃一條傾斜的直線貫穿版面，使整個背景一分為二，而這兩個色塊的顏色對比要比較強烈。另外，在橫版中用左右分割，豎版中用上下分割效果會比較好。
增加對比關系是加強設計感的最有效技巧，我們也可以用此方式來優化圖片。如果版面中的配圖是沒有背景的產品或人物，那么在這些圖片上加一個圓形的色塊，創造出虛與實的對比，通常也能得到不錯的效果。
要點：
該手法在畫冊和海報設計中比較多見，與直接在一段文字下方加一個大色塊不同，而是要根據每行文字不同長度，單獨加一個相應長短的色塊，所以這些文字每一行的長短最好是不一樣的。
這種處理方式可以使整段文字看起來更整體，增加文字視覺沖擊力，而且還能使文字與背景區隔開，加強文字的識別性。
要點：
如果你看過的食品包裝夠多，你應該能發現，很多包裝上的產品名稱、廣告語或者賣點等信息，都會擺放在一條飄帶上。這么處理的效果通常不錯，因為飄帶具有禮品、贈送的寓意，用在哪里都不會太唐突，而且飄帶的形式簡單、有細節、變化豐富，很適合用作裝飾元素。
還有一點也很重要，飄帶的形式一般都是柔軟的曲線，這與版面中其他直線元素可以形成鮮明的對比，加強版面的靈活性。
以上的七個小妙招是不是既簡單又實用，你們在做設計的時候記得拿出來試試。不過這些也確實只是小技巧而已，只能優化局部，不要指望用上這幾招就能做出很好的設計，而且它們也不一定適合所有情形，在實際操作中一定要具體問題具體分析，靈活運用。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
AR的特點
AR的場景多種多樣，其中在手機設備的AR體驗中，有一種基本且常見的場景：通過手機攝像頭，用戶在環境中放置虛擬物體（模型），用戶與它有一些具體的互動操作，如移動、旋轉等。
我們將這類場景統一稱為放置類AR場景：放置對象可以是一扇虛擬場景的任意門，用戶可走入門中互動；也可以是一件家居商品，用戶可預覽商品是否與室內環境搭配等。針對不同的放置對象和場景，設計側重點也會有所不同。
基于真實環境放置虛擬模型，并與模型進行交互的AR場景。
無論放置的對象類型如何，用戶打開相機，在屏幕中放下具體模型和進行互動的過程具有共性。我們把中間的完整流程拆分為了以下部分：
用戶打開放置類AR功能后，進入環境識別前的過程，均屬于初始啟動的范圍。放置類AR為何需要有初始啟動環節，用戶不直接進入AR場景進行體驗？
由于技術和產品的需要，放置類AR初始啟動承載幫助用戶理解、AR素材準備，為用戶帶來更優的AR體驗。
初始啟動的流程中，包括啟動頁、引導頁、加載頁三個部分節點，三個節點可同時存在，也可只存在一個或兩個節點，具體需要根據設計需求來決定。
啟動頁的定義及設計形式
在啟動頁游戲AR應用中比較常見，只有短暫停留。頁面起到品牌露出的作用，或在啟動APP后渲染氛圍，迅速將用戶帶入。設計手段包含：音樂、音效、視覺、文字、動效，具體運用根據實際設計需求而定?？梢詤⒖家韵聝煞N設計內容：
啟動頁雖然不傳遞明確的含義和信息，但不同的設計手段可以給用戶傳遞出不同的品牌調性和場景氛圍感，其中音效和動效形式的應用會增加啟動頁設計的吸引力，下面將結合案例具體說明。
引導頁的定義及設計形式
引導頁促進用戶進入后續的核心體驗流程，傳達有關體驗的明確內容，根據 APP 的類型，引導內容有所不同。但不涉及后續具體細節操作。常見的引導包含：內容介紹、安全警告、體驗建議、環境要求、玩法介紹、新手引導等。設計手段包含：語音、音樂、音效、視覺、文字、動效。具體運用根據實際設計需求而定?？梢詤⒖家韵挛宸N設計內容：
引導頁有明確內容，根據設計需求可以考慮從產品介紹、展示輔助信息、在體驗時的建議或要求等。每種設計內容有各自的適用場景、設計形式及優缺點，將結合具體的案例進行說明。
加載頁定義及設計形式
加載頁需要用戶等待，加載時長根據加載內容的大小而變化。過程可能包含素材下載、模型加載、材質渲染、界面UI等。設計手段：文字、視覺、動效、音樂、音效。具體運用根據實際設計需求而定?？梢詤⒖家韵挛宸N設計形式：
建議使用Jigspace、Lego AR、AliceARQuest等AR應用進行體驗。
整個初始啟動環節包含啟動頁、引導頁和加載頁，整體的設計原則可總結為：
初始啟動設計第一步是根據應用類型選擇設計內容和形式
不管是啟動頁還是引導頁的設計，都需要根據應用的類型去決定以何種形式給用戶展現必要的信息。例如：游戲類注重用戶的沉浸感，引導以故事介紹+體驗建議為主?？破疹惖男枰ㄟ^界面+三維的形式展示更多信息給用戶，引導以產品介紹和信息補充為主。
啟動頁設計目標導向，不拖沓不無聊
根據APP類別選擇恰當的形式，盡量簡單直接，盡快進入后續內容頁。游戲類可形式豐富，時長稍長。
引導頁設計簡單直接，使用多維度設計手段增加引導信息的豐富度
不管引導的內容是產品介紹，還是試玩引導，簡單直接始終是目標，不在引導的部分占用用戶過長的時間。另外也不能為了節約時間而使必要信息缺失，因此可以選擇豐富的設計手段，讓必要信息充分暴露。
加載頁設計優先考慮無感知加載，否則根據加載時長使用不同形式
如無法無感知，則根據加載時長選擇加載的設計形式。例如：時長較短的加載過程需要簡單明快，不打擾用戶。時長較長的加載過程需要過程明晰，給用戶明確的預期。盡可能避免阻斷式的加載過程。通過設計方法增加長時間等待的愉悅感，減少不耐煩。
AR應用啟動后，經歷完內容引導加載的過程，便正式進入了AR場景搭建環節。從技術的角度來說，想讓模型穩定地融合于真實世界，我們首先需要讓手機攝像頭認識周圍的環境，即為場景搭建的第一環節：環境的感知識別（環境識別包括平面識別、圖片識別、物體識別等，本文聚焦在環境中的平面識別）。確定平面之后才能繼續進行模型放置，直至用戶成功把模型在真實環境中放下。
平面識別指通過對環境特征的感知，確定一個基于真實環境的平面。確定放置平面后，即可構建虛擬世界的坐標系，在虛擬世界中放置模型。平面識別是放置類AR體驗的第一步，是后續所有體驗內容存在的基石。因此在設計中我們需要保證平面識別的成功率，保證用戶的順暢體驗。
這個環節本質上是個技術驅動的環節。程序啟動后，系統以手機攝像頭為原點建立了3D世界坐標系。相機界面打開后，系統開始識別拍攝到的真實環境。通過檢測所捕獲的圖像之間的視覺差異點（即特征點），系統可以確立一個平面，并在世界坐標系中賦予平面一個位置信息，自此3D世界坐標系與真實環境中的平面建立了聯系。找到平面后，系統仍會持續進行檢測、更新平面的信息。
平面識別的成功需要用戶將手機攝像頭對準平面并移動手機，從而獲得更多平面的特征點、確定平面。因此在設計中，首先需要引導用戶做此動作配合；同時在用戶動作中，應對識別狀態給予實時反饋，讓用戶有把控感；識別失敗時，有效的容錯設計可以減少用戶挫敗感，提升識別成功率。設計節點可總結為以下幾點：
動作引導定義及設計形式
動作引導需要引導用戶做出配合的動作從而成功識別到平面。主要的引導內容是：引導用戶將手機朝向一個平面任意方向移動，從而識別到平面。
表現用戶動作的引導形式有多種，如：文字、圖片、動圖、語音以及這些方式的組合方案等等。每種單提示形式都有其各自的優缺點。如文字可準確傳達信息但閱讀時間較長；動圖傳達直觀，但準確性不夠等。因此建議使用組合方案的形式進行動作提示，結合單提示形式的優點，同時規避其缺點。可以參考以下2種：
動作引導建議使用組合方案來進行提示，可以根據產品類型和場景選擇合適的方案。結合具體案例以說明：
平面識別中的定義及設計形式
程序識別平面的過程中，所花費時間往往受用戶所處環境的影響，環境較復雜時，識別時間可能較長。因此建議在平面識別的過程中，反饋識別的狀態，幫助用戶了解系統的行為，知道自己所處的狀態。狀態反饋有兩種建議的方式：
平面識別中的狀態反饋可以讓用戶了解系統行為，明晰所屬狀態。該步驟通常會和下一步合并設計。結合案例進行說明：
平面識別成功的定義及設計形式
平面識別成功后，建議可視化檢測到的平面，給用戶成功的反饋，同時讓用戶知道即將放置模型的平面在哪里。
平面識別成功的反饋是平面識別環節完成的節點，該步驟可能與之后的模型放置結合設計。結合案例進行說明。
平面識別異常的原因及設計
前文提到平面識別主要依賴對環境特征的檢測，在一些情況下會很難識別到平面。當出現異常時，如何引導用戶解決異常也是體驗設計的重要內容之一。經過前期技術調研，平面識別異常的情況主要有以下幾種：
我們可以對每種異常進行具體的提示，也可以給出綜合提示。這里建議的異常提示策略主要有兩種：
進行提示內容話術設計時需注意：
另外異常提示的設計形式也有多種：文字、圖片、動圖、語音、組合方案等等。在設計時需要結合「動作引導」的設計形式進行整體提示的組合方案設計。例如動作引導是文字+動圖的形式，異常提示就不應該出現語音形式；動作引導是文字+語音形式，異常提示同樣使用語音的形式更一致。
平面識別的設計原則及建議
平面識別的設計原則及建議：
確定了放置平面后，下一步就是放置模型。模型放置指：通過一定的放置方式，讓模型出現在平面的某個位置上。
在模型放置模塊中，我們需要定義和設計放置方式以及放置位置。放置方式可以是自動放置，也可以是手動放置。放置位置可以是給用戶體驗效果最好的一個坐標點，即最佳放置位置；也可以是一片區域的任意一個坐標點，即可放置區域。
1. 放置方式的定義及設計形式
模型的放置方式主要有兩大類：
可以參考以下三種設計形式：
模型的放置方式主要有自動放置與手動放置，可根據不同場景設定適宜的放置方式，以下結合案例具體說明。
2. 放置位置的設計內容及建議
放置模型時，模型即將放置的位置需要根據具體互動場景進行設計，以保證用戶的視覺體驗和互動體驗。如果模型放置過近，用戶無法看到模型全貌；過遠，需要用戶走動才能進行互動的應用會增加互動難度。可以參考以下兩種設計內容：
在做具體的放置位置設計時，需要考慮以下幾方面的因素：
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
即使是進的技術，也通常有一個非常原始的起點。從最初的手機到如今大規模普及的智能電話，其實經歷了差不多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 技術的潛在應用場景是無止境的。這一技術將會被大規模普及開來，在未來，你不必像現在這樣僅僅只能在游戲中體會這一技術。當然，像亞馬遜和 Facebook 這樣的商業巨頭也開始認真探索如何更有意義、以更有影響力的方式來使用 AR 工具。
而這也是大勢所趨。下面我將會拿出一些更為創新的方式，為你呈現 AR 技術是如何具體地改變我們的生活的。
原本在游戲中作為噱頭的 AR 技術逐漸脫穎而出，在通信、商業和建筑領域開始展現出無盡的潛力。
而最能感受到AR的這種影響力的，是在品牌和營銷市場上。
由于 AR 能夠承載復雜的數據，并且將它們轉化為可同現實世界進行溝通的交互，身為用戶，我們能夠從中吸收更多的信息。換句話說，AR 將可以更好、更快更加有效地影響用戶的決策機制。我們如今常見的社交媒體和大量的信息，已經讓人疲勞了，而 AR 這種全新的切入方式，將可以改變營銷，進而影響世界。品牌能夠在 AR 的協助下以前所未有的方式來宣傳自己和產品。
舉個簡單的例子。AR 所帶來的體驗并非傳統的二維平面的圖像，它讓用戶可以走進商店，嘗試產品，幫你判斷產品的實際效果，它用 X射線一般的視覺幫你更好地了解眼前的一切，把所有的可能性明明白白地展示在你眼前，甚至提供360度無死角的視覺。
「在后網絡時代，AR就是狼來了的故事——大家早已聽說過，但是很少見到足夠優秀的呈現形式?！埂狾m Malik
對于一線的設計師而言，AR 技術是一件聽起來非常令人興奮的事情。但是事情的前后邏輯我們確實需要仔細捋一下。Pokemon Go 的成功到底是源于AR技術的加成，還是源自于品牌本身原有的吸引力？
另一方面，AR 技術改變生活各方面的巨大潛力直到現在才剛剛顯現。別忘了，移動端設備的普及和成熟是經歷了超過10年的醞釀，直到今天才說得上是比較成熟了。對于 AR 而言，想要立竿見影地看到某種效果，你可能要求有點高。
AR 是一種全新的媒介。設計師面對的最主要的挑戰，是要進入三維空間進行思考。在接下來用戶要如何同APP進行交互？他們會做出什么樣的動作？附近會有其他的人和物體嗎？這種情況下用戶會做什么？它并非看起來那么簡單，本質上這是一次概念上的徹底飛躍。設計師需要在腦海中開始反思這件事情了。
當然，只有時間能夠最終證明 AR 是否會成為 iPhone 一樣劃時代的產物。一切是會因為 AR 徹底改變嗎？又或者像 Hi-Fi 一樣進入小眾市場，逐漸收縮？可以確信的是，AR 技術是有相當大潛力的，這就是為什么你會聽到越來越多相關的傳聞。一旦一項技術開始每天都被提及，那么一切就皆有可能。我們很可能將會在未來以一種截然不同的方式來體驗這個世界，誰敢輕易否定呢？
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
