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

寫在前面

什么是插畫呢？或者藝術中插畫的定義是什么？插畫的樣式有哪些？

插畫是指藝術家將一段文字，甚至是社會意義翻譯成一幅圖畫。

插畫是用來創造情感或傳達信息的。它在風格上很有表現力，不需要注意。插畫用于書籍，雜志，廣告，漫畫書，漫畫，時裝設計，故事板和視頻游戲。沒有單一的方法來說明，有很多的說明風格。

插畫風格

雖然有許多不同的插圖風格，但這些可以分為以下幾組：

文字插畫

文字插畫風格以與非小說類書籍相似的方式描繪現實。這幅畫描繪了一個可信的場景，即使使用幻想或戲劇。我們來舉一些文字說明的例子：

創造一個攝影圖像

藝術家以照片為素材，以細膩的細節創造出逼真的復制品。

在現實主義攝影中，藝術品常常被誤認為是照片。繪畫、透視和色彩的選擇對這種藝術形式至關重要。藝術家經常使用噴槍，或手畫與丙烯酸或油達到最終的結果。

展示歷史或文化的插畫

這種類型的插畫用于描述歷史或文化事件。通常被一種文化用來描述場景或環境，這種形式的插畫也可以用來描述情緒或增加戲劇感，甚至在攝影的時代。

雖然有時用來美化或貶低文化或人物，這些插圖是現實的，足以被視為文字圖像。

超現實主義

這種形式的插畫試圖抹去藝術和現實之間的界限，被認為是對攝影現實主義的一種進步。

有時，一些額外的功能被添加到一個代表或藝術家可能與單色鉛筆工作，以創建一個社交信息。然而，我們的目標是創造一個盡可能接近現實的形象。這種形式的插畫試圖抹去藝術和現實之間的界限，被認為是對攝影現實主義的一種進步。

概念插圖

概念插畫是隱喻性的，以思想或意象取代了現實主義。雖然這部作品可能包含現實的元素，但其目的是傳達情緒、隱喻和主觀性。這種形式的插畫可以與小說相比，在任何地方。我們來舉幾個例子:

圖像順序

按順序排列的圖像講述一個故事，可以用于卡通、漫畫小說，甚至是電影場景的規劃。風格可能有所不同，從快速素描，以噴槍的細節微調圖紙。根據信息的不同，一幅圖像可以使用清新干凈的顏色，也可以使用墨水、鋸齒狀的線條和混亂的布局來描述政治的混亂事務。

信息圖形

這些是知識的圖形表示。它們通常用于幫助理解復雜的信息。 

雖然它們向觀眾展示了他們正在看的內容，但這通常以包含其他見解的方式表示。有些可能看起來像文字插畫。

抽象或扭曲的設計

一種表現形式的說明，從現實中分離出來，從想象中顯現出來。因為它是如此主觀，兩個抽象的藝術品看起來會非常不同。

手繪數字圖紙或插畫

在這種類型的插畫中，藝術家在一個數字畫板上作畫，允許光影之間的平滑過渡。藝術家可以使用圖像層來創建復雜的背景和添加精細的細節。許多這樣的圖像使用柵格(或點)格式，限制了它們在失去質量之前可以放大到的大小。

矢量圖形和插畫

利用矢量圖形，用數學方程進行設計。由于矢量圖不像徒手數字繪圖那樣使用筆畫，圖像不像徒手設計那樣平滑。然而，它們可以在不損失質量的情況下被炸毀。這些圖像有清晰的形狀和輪廓，非常受歡迎的網絡插畫。

兒童插畫

兒童插畫講述一個故事，或給予一個故事，甚至一個虛構的存在的視覺表現。插圖的風格取決于孩子的年齡。有些可能是復雜和現實的，而另一些可能是天真的。許多兒童插畫色彩豐富，包含許多動作或活動。人物通常是明亮的，豐富多彩的和友好的。

社區書籍和圖形小說插畫

漫畫書或超級英雄通常會讓角色參與到行動中。樣式通常很復雜，從線條圖到噴繪圖像都有。然而，漫畫通常是漫畫中最常用的風格之一。

漫畫圖片通常以小組形式出現，并經常涉及到對話框或敘事。有些詞可能與動作結合在一起，比如POW!面板的大小以及它們出現的頻率有助于設定故事的節奏。

書籍封面和出版物

在許多舊書中，例如那些側重于地理或自然歷史的書，插圖都是手工設計的，然后再版。然而，現在，書籍插畫被設計成許多不同的方式，然后印刷。

插畫家經常被用來設計書籍的封面，以便使他們在書店中脫穎而出。封面常常暗示書中的內容，并給人以幽默、嚴肅、文化或運動的印象。

書籍插畫從卡通風格的圖畫到歷史或文化形象。雖然“不要以貌取人”這句話經常被重復，但它實際上是能賣書的封面，并能幫助書吸引正確的讀者。

標志或品牌設計

logo是一種非常特殊的插畫風格。通常他們的目標是提供有關產品的信息，使用顏色、字體或圖像。流行的和容易辨認的標志包括耐克勾或與麥金塔相關的蘋果。標識通常很簡單，但卻能抓住人們對產品的注意力，將其定義為屬于某個特定品牌。

通常，這個品牌與想象中的品質有關，比如速度、力量或創造力，而商標有助于喚起這種情感信息。有時，企業不僅僅使用一個標志來輔助品牌建設。

許多公司使用吉祥物或員工形象來傳達信息。這有助于超越鞋子這樣的產品，讓它在顧客心中有更深的含義。

發展你的插畫風格的技巧

使用互聯網，我們經常被介紹到插畫在網上新聞文章，我們可以下載的音樂，漫畫書，廣告，甚至電子郵件。這向我們展示了廣泛的樣式，這是一件好事，因為它創建了廣泛的示例供我們借鑒。

然而，如果你經常被許多高質量的插畫轟炸，你如何發展自己的風格？這里有一些建議：

了解基本原則

雖然可以通過實踐來學習插畫，但這往往意味著要模仿其他已經形成自己風格的插畫家的風格。釋放你自己的創造潛力是非常重要的，這樣你才能建立和成長，發展你自己的才能和分享你自己的信息。

沒有復制，你可能會問“什么是插畫師?”“正規的教育將教會你插畫的基本原則、動機和技巧，這樣你就可以用這些積木來創造你自己的設計?！?

除了向那些已經在這個領域內的人學習，你還會學到一些哲學，這些哲學將使你能夠加入其中，在你這樣做的時候表達你自己的風格。

探索新的插畫風格

如如果你覺得自己陷入了風格的窠臼，重復做了很長時間的工作，你可能想學習一些新的插畫風格或技巧，進一步發展自己的作品。

然而，請記住，沒有理由強迫自己進入不舒服的空間。如果你覺得停滯不前，或者不喜歡你正在嘗試的工作，請記住，沒有一個藝術家能夠做所有的事情，如果有些事情感覺不太好，準備好繼續前進。

嘗試新媒體

如果你因為你的鋼筆畫而出名，試試丙烯酸樹脂怎么樣?轉換你使用的媒介可能會給你的工作帶來一個新的維度，專注于一個新的氛圍，顏色或閃光。如果您已經使用多種介質，您可以嘗試紋理、蝕刻、模板甚至金屬。

您可以將您的格式從小型繪圖更改為大型畫布，或者從大型繪畫更改為漫畫書大小的圖像。盡管一開始你的結果可能并不出眾，但探索新的媒介會讓你走出舒適區，走出你的風格窠臼。你的實驗是值得的。

做真實的自己

當定義你的插畫風格時，不要圍繞當前市場上銷售的東西來設計它。你的第一個委托是一個巨大的成就，從藝術中賺錢是值得的。

然而，在市場上分享你自己的風格，這樣你才能發展自己的藝術身份。隨著市場的不斷變化，試圖模仿或模仿當前的趨勢會讓你落后一步。

通過發展你自己的風格，你將不斷地在你自己的技術上工作，改進和發展他們，而不是保持一個二流版本的插畫家你欽佩。發展你自己的風格意味著分享你自己的意思，把你自己的想象帶到前臺。

沒有這些，你就不會有創造性的能量來幫助你定義你的工作和保持你的動力。沒有這些，你可能會失去你對插畫的熱愛。

最后說一下對插畫風格的思考

有許多不同的插畫風格或技術。有些是重復的。然而，理解不同的風格和它們所使用的技術使您能夠了解每種不同設計背后的原則，使您能夠探索和擴展您的插圖實踐。

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

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

這種現象被稱作為梵雷斯托夫效應（相對于普通事件或物體，要記得獨特、有特色的事件或物體可能性會大增）。梵雷斯托夫效應有兩個觸發條件：背景不同以及經驗不同。背景不同是指一個刺激物與周圍的刺激物不同，比如在一串字母中突然出現了一個數字，那個數字就會讓人印象深刻；

經驗不同則是指一個刺激物與記憶中的經驗不同，比如一些經常被我們誤讀的成語，因為與平時的經驗相悖，所以看到正確解釋的時候印象特別深刻。

我們在了解了這兩個觸發條件之后，就可以利用它們來觸發梵雷斯托夫效應，從而幫助我們做出令用戶印象深刻的設計。下面就結合實際案例來看看如何利用它們。

前面說過，背景不同是指一個刺激物與周圍的刺激物不同。具體到界面中，我們可以理解為在一堆相同類型的元素/模塊中，對其中需要突出的做特殊化處理。

案例1 功能入口

京東金融底部導航中的“信用”以及保險頁面中金剛區的“1元購”，都采用了與同類型元素不同的視覺樣式。前者采用了色塊+動效，后者采用了3D視角，分別讓它們在底部導航和金剛區中“脫穎而出”，引起用戶的關注。

案例2 列表內元素

愛奇藝的首頁推薦中，其中一個視頻內容的封面是采用動圖的形式，在其他靜態封面的襯托下，就顯得格外醒目。飛豬的首頁推薦中，則是把專題欄目的信息部分（彩色底白字）設計得與其他商品（白底黑字）差異較大，來吸引用戶關注點擊。

案例3 模塊之間

美團外賣的個人中心將一些常用功能至于一個單獨的模塊中，并且將其中的圖標設計成與其他模塊內的圖標所不同的樣式（黃色填充），如此即突出了常用功能模塊。另一邊愛奇藝的個人中心，“會員服務”與“我的泡泡”則是直接從下面的宮格式布局中脫離出來，并且將各自的一些功能外置，布局交互完全不同于下面的其他模塊，以達到突出這兩個模塊的目的。

以上三個就是典型的“背景不同”觸發梵雷斯托夫效應，從而讓用戶印象深刻的案例。不難發現，對于“背景不同”，已經應用的比較廣泛，并且大家也較為熟知了，接下來看看“經驗不同”。

經驗不同需要顛覆過去的認知，我們可以理解為在一些已經被大家所熟知的視覺/交互中，對其進行“改革創新”。

案例1 虎撲評論點贊

虎撲中的評論點贊不同于我們看到的其他產品，它采用的是一個燈泡ICON來表達該評論“亮了”，更貼合用戶對有趣評論贊賞認同的真實場景。與眾不同的方式也加強了用戶的印象，提升了用戶的黏度。

案例2 嗶哩嗶哩打賞

嗶哩嗶哩中的打賞采用了“馬里奧踩蘑菇”游戲的形式，不同的磚塊代表不同的打賞數額，選擇完數額，滑動馬里奧頂一下磚塊就完成了打賞的整個過程。相比于普通的宮格式菜單選擇，是不是有意思多了呢？

案例3 微信讀書推薦

微信讀書的書城中有一個“搖一搖”的功能，搖動一下手機或者點擊一下“搖一搖”ICON，就會隨機推薦一本書給你。每一次搖動背后的不確定性就像搶紅包一樣，滿足了用戶的獵奇心理，提升了體驗的趣味性。相比于普通的推薦版塊，不僅能讓用戶印象深刻，更會讓他們對此愛不釋手。

其實這些“經驗不同”的案例也不完完全全是創新，比如搖一搖之前就是微信中的一個社交功能。大家可以將平時看到的有意思的設計記錄下來，并思考一下可以復用在哪些地方，說不定下次功能更新就能用上了哦～

在利用“背景不同”時，需要注意避免出現處處都強調的情況。每個元素/模塊都突出了，也就失去了重點，如下圖。

而“經驗不同”需要注意的是，避免為了創新而創新，讓“驚喜”變成“驚嚇”。如下圖，

“清音”作為一個標簽指示，顯然與我們平時所看到的那些標簽樣式大不相同，足以讓我們印象深刻。但是，在知道它是一個標簽之前，我曾誤以為它是一個按鈕。在觸擊無反饋并且右滑屏幕發現后面還有“濁音”之后，我才知道原來這是一個標簽……這樣的“經驗不同”只會造成“負面”的印象深刻。

相對于普通的事物，特殊化的事物更容易讓人印象深刻，我們稱這為梵雷斯托夫效應。觸發梵雷斯托夫效應有兩個條件：背景不同和經驗不同，我們可以利用這兩個條件來做出令用戶印象深刻的設計。

“背景不同”：對需要突出的元素/模塊做特殊化處理，在同類型元素/模塊中脫穎而出。需要注意的是，避免到處都強調，從而失去強調的意義。

“經驗不同”：對過去所熟悉的視覺/交互進行“創新”，從其他不同類型的產品中復用、移植過來。需要注意的是，避免讓“驚喜”變成“驚嚇”。

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

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

微云在不斷完善基礎功能的同時，還基于用戶行為，增加了許多情感化的體驗，比如往年今日、人臉相冊等。在情感化運營上，微云在2018年開始了較為完整的節日閃屏設計，希望向用戶傳達節日的祝福，拉近產品與用戶的距離。

什么是節日閃屏？

節日閃屏是指在特定的節日進行情感化設計，傳遞品牌關懷的閃屏。優秀的節日閃屏，在內容上不僅能夠觸達用戶的記憶點，也能夠與品牌相融合，這樣既拉近了用戶與產品的距離，也強化了品牌的認知和記憶。

確定設計目標

在開始設計之前，我們期望節日閃屏能夠達到以下兩個目標：

• 傳達節日祝福喚起用戶回憶
• 體現微云品牌調性

不同的節日有不同的文化背景和風俗習慣，節日祝?？梢越Y合最典型的特征，這樣更有利于喚起用戶回憶，后文會結合案例進行分析。然而，品牌調性是貫穿所有節日的，在設計之初，我們明確微云的品牌調性，這樣更有利于品牌的傳達。

1. 品牌調性研究

Alan Cooper在《About face 4》中提到，在傳達品牌調性時，可以用一組形容詞來描述產品及體驗，這些詞可以組成詞云，用來指導視覺設計。如何創建這組詞云呢？Allan Cooper 提供了四個方法：從品牌大綱提煉關鍵詞、分析現有產品的界面和服務、分析競品的界面和服務、收集用戶反饋。

結合微云的特征，我們從現有產品的界面和用戶反饋兩個角度進行分析，提煉符合微云調性的詞云。

2. 分析現有產品界面

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

3. 分析用戶反饋

微云用戶在職業分布上，白領用戶占最大。結合使用場景分析，用戶反饋最多的詞是：輕量、方便、下載快速。

4. 提煉微云品牌詞云

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

如何做一個節日閃屏？

接下來就以勞動節閃屏為例，從節日特征和品牌調性兩個維度來闡述節日閃屏的設計過程。

1. 節日特征

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

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

2. 品牌調性

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

主題確定之后，就開始進行優化設計了。圍繞著關鍵詞，采用扁平化的設計手法，在色彩搭配上，由于勞動節沒有明顯的色彩傾向，故以品牌藍為主色調，橙色來源于產品的圖標，作為輔助色提亮整體畫面；在頁面排版上，保持大面積的留白，簡約清爽。

3. 小結

勞動節閃屏上線后，我們進行了復盤，我們希望微云的節日閃屏給用戶傳達的是「你的珍貴回憶微云幫你記錄」這樣的小心思，而不是「我們有xx功能」之類的廣告，所以在以后的節日閃屏中，我們會更加傾向節日故事性的表達。視覺風格則采用簡約、干凈、留白的方式，重點突出人物故事，不在場景上過多渲染。

4. 其他的節日閃屏設計

按照上面的思路，我們完善了其他的節日閃屏設計。

母親節閃屏

母親節是一個西方的節日，在這一天，孩子給母親送康乃馨，來表達自己的愛意。在節日故事上選擇了最具代表性的孩子給母親送花的場景。

端午節閃屏

一提到端午節，就會想起粽子的「甜咸之戰」，可見粽子在端午節的重要地位，所以端午節的節日故事就圍繞粽子開展，三個好友齊心協力包粽子。

七夕閃屏

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

中秋閃屏&圣誕節閃屏

中秋節故事主題是合家團圓、賞月吃餅。圣誕節故事則以父女二人齊心協力裝飾圣誕樹為主題。

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

所有節日閃屏合集

輸出節日閃屏規范

節日閃屏除了故事性的表達之外，在設計上我們也輸出了一部分規范，用來把控風格的統一。

1. 配色規范

色彩作為用戶最容易感知的部分，使用時與品牌相呼應，主色與輔助色均來源于產品圖標。有明顯色彩屬性的節日，以節日固有色為主，比如春節紅色，中秋黃色等等。無明顯色彩屬性的節日，可以以品牌藍為主，強化品牌印記。

2. 角色規范

我們希望重點展示的是人物的珍貴回憶，基于此，我們設計了一批角色，講述角色的故事，讓用戶產生代入感。為了保證統一性，我們制定了人物的細節規范，包括角色頭身比=1 : 9、服裝款式以休閑為主、服飾顏色與品牌色呼應等。

在設定好人物細節規范之后，我們也完善了角色資源庫，方便后期在其他場景的應用。

3. 場景規范

在場景設計上，我們以簡潔，明確為主，場景主要起烘托人物故事的作用，而不進行過多的渲染。

拓展場景的使用

做了一系列閃屏之后，這些插圖和角色并沒有閑置，我們在線下挖掘了一些新的使用場景。這些素材被重新利用起來，變身為辦公室的裝飾掛畫，營造出一個充滿品牌氣氛的辦公環境。

總結

2018年微云希望通過節日閃屏的情感化運營，給用戶傳達節日關懷的同時也強化微云的品牌認知。在后續的規劃中，我們希望節日閃屏不僅僅是單方面的給用戶傳遞關懷，還能夠和用戶互動，實現更深層次的情感交流，比如點擊節日閃屏，跳轉到往年今日，幫助用戶回憶起以往的美好回憶，增加用戶粘性。2019年微云會繼續給大家傳遞節日的祝福，也會不斷探索新的閃屏設計風格，敬請大家期待。

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

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

模型交互的設計分析及體驗建議模型交互的作用范圍及交互特點

當用戶在真實環境的場景中穩定放下物體模型后，會有與模型進行進一步互動的需求。這類模型交互，通常會改變模型本身的物理屬性。例如：

• 移動：改變物體在環境中的位置。
• 縮放：改變物體的大小。
• 旋轉：旋轉物體便于用戶不改變自身位置觀察物體。
• 刪除/重置：讓模型在環境中消失或出現。

基于目前的 AR技術和手機設備限制，目前的模型交互主要是通過屏幕利用二維交互驅動 AR 三維場景中的模型，從而與模型進行互動。屏幕二維交互設計，主要是利用二維手勢和界面控件去達到交互的目的。例如：

• 按鈕/搖桿：在手機界面中設計按鈕、搖桿。
• 手勢：目前技術支持的瞬間的手勢操作、連續的手勢操作。比如單指點擊、單指長按、雙指縮放、雙指旋轉等等，我們在日常使用APP常用的手勢操作。

通過進行合理的分析設計，賦予這些手勢和界面控件具體的功能，去控制三維場景中模型的移動、旋轉、縮放。

模型移動的交互定義及設計形式

用戶會與模型進行互動，移動是最為常見的一種操作行為。通過在手機屏幕的手勢操作或按鈕操作，控制模型在現實場景中的位移。

我們需要通過設計用戶使用常用并熟知的手勢與模型進行交互，利用二維手勢驅動三維空間中的模型在X軸、Y軸、Z軸的位移。

放置模型后根據移動范圍X軸、Y軸、Z軸，與在現實環境的虛擬模型進行移動互動操作，設計手段包括手勢、搖桿的方式?？梢詤⒖家韵挛宸N設計內容：

• 單指按住左右移動：模型移動以屏幕有效的外側邊沿為限。
• 單指按住前后移動：縱深移動遵循近大遠小的透視效果。
• 單指按住上下移動：模型以中軸線上下移動，實際為改變模型所在平面位置，投影以暗示高度。（需注意，單指按住前后和上下移動不會同時出現。）
• 點哪去哪：模型從原位置向目標位置移動。
• 界面搖桿：若屏幕手勢交互有可能對控制對象造成持續遮擋，或者無法很好的完成復雜操作要求，可以通過屏幕控件滿足需求。

模型移動并非需要X、Y、Z三個軸均開放，實際是根據模型位移交互的具體需求去選擇開放維度，并設計合理的交互方式去響應模型的移動。可參考以下案例：

模型旋轉的交互定義及設計形式

在現實場景中除了移動模型的位置，還可以通過旋轉360°來觀察模型細節，不僅控制模型還能把玩模型，賦予模型生命感，讓用戶更好地與模型進行互動。設計手段主要是針對手勢的設計?？梢詤⒖家韵氯N設計內容：

• 雙指順/逆時擰：一只手雙指順時/逆時擰旋轉模型。
• 雙指向左/向右滑動：一只手雙指左右滑動。
• 單指向左/向右滑動：一只手單指左右滑動。

旋轉模型是為了全方位觀察模型，讓用戶更好地把玩模型。通過以下案例來進行說明：

模型縮放的交互定義及設計形式

移動模型、旋轉模型都是與模型互動，如果想深入了解模型則需要對模型進行縮放操作。設計手段包括手勢、滑動條、縮放倍數的按鈕?？梢詤⒖家韵氯N設計內容：

• 雙指擴展/捏合縮放：以模型的中心點等比縮放。
• 拖動滑動條縮放：拖動滑動條在0-100%的范圍內進行縮放，當標尺拖動到極限時，則模型不再響應縮放。
• 固定縮放倍數按鈕：倍數已經固定，限定縮放的大小。

雙指擴展/捏合縮放是在二維手機界面被大家熟知的手勢操作，而滑動條、固定縮放倍數按鈕的縮放形式，在AR場景多用于游戲類產品，一般在模型放置時固定模型大小，進入游戲后不支持手持操作?？梢詤⒖家韵掳咐?

有一種特殊的情況，當支持放置多個模型時，如何設計呢？此時，需要通過點擊選中模型，模型進入選中態，與其他模型區分開，選中后進行的操作只作用于該模型，并支持刪除模型的功能。

為了增加模型交互時體驗的豐富和細膩程度，模型交互（過程中、成功后）會有相應的反饋設計。包括：模型自身的動效、符合真實世界的視覺表現、音效、震動、語音反饋等。

模型交互的設計原則和建議

1. 根據模型需要定義交互自由度

模型的交互程度，需根據特定模型的自身屬性/產品的類型去定義，并非所有可交互類型都需要涉及。跟核心模型體驗無關的交互可禁止或增加操作難度。例如科普類模型固定放置在平面后，需要便捷地旋轉以查看模型細節，但Y軸移動查看的需求不大，部分場景可考慮禁止Y軸操作。又例如游戲類 AR 模型位置相對固定，更多的體驗在于與固定模型進行的細部交互。

2. 手勢設計簡單且符合直覺

手勢設計優先使用通用的方式，若沒有通用的方式，則盡可能使用簡單和符合用戶直覺的方式進行設計。若違反該原則可能造成用戶的理解和記憶障礙，需要加重用戶引導，避免給用戶造成操作困難。

3. 手勢設計按需搭配且不可沖突

在設定模型的交互自由度后，可選擇合適的手勢進行搭配使用。但一種操作方式只可匹配一個交互結果，不可出現手勢沖突。手勢的搭配需要成套考慮。例如以下搭配：

異常處理的設計分析及體驗建議

1. AR中異常情況的定義及設計內容

傳統APP設計存在異常情況，比如無網絡加載失敗，登錄發生錯誤等情況，那在放置類AR 中是否存在異常情況呢？

在放置類AR 場景中體驗時，由于使用者操作不當，導致模型出屏或模型丟失，無法與其再進行交互，我們統稱為異常情況。還有一種情況比較特殊，當正在體驗放置類AR時，其它應用突然被喚起，再重新返回放置類AR 場景的處理。所以我們從交互設計層面需要對異常情況進行及時處理，正確引導用戶解決困惑，給使用者一個良好的 AR 體驗。

在與模型互動過程中，會出現異常情況，需要通過一些設計形式可以及時地幫助使用者解決異常問題，設計手段包括：文字、動圖、語音、輔助圖形、重置、復位，具體運用根據實際設計需求而定?？梢詤⒖家韵略O計內容：

• 模型出屏：模型出屏后視覺線索引導用戶找到模型，可以搭配文字、動圖、語音等形式，按照設計場景來自由組合。
• 模型丟失：當視覺線索引導未找到模型時，通過點擊按鈕將模型復位。按鈕可以常駐或非常駐。

當發生模型出屏、模型丟棄復位的異常情況，根據產品類型和場景選擇合適的設計手段，解決用戶的困惑。結合具體案例以說明：

在異常情況中有一些相對特殊的情況，第一種情況：體驗放置類AR時，手機來電后不得不離開，當再次返回時，根據技術能力來進行交互設計引導，保留場景及模型或引導用戶重新獲取平面建立AR場景。第二種情況：當進入AR場景后，模型是固定大小尺寸，在設計時，需要考慮讓用戶可以重新放置模型在新的位置，提供重置按鈕。

游戲類、科普類設計時需要保留之前AR場景，有延續性的體驗，技術做不到保留，則需要重新識別平面再次建立AR場景進行體驗，如果支持放置多個模型的場景，建議不保留。當進入AR場景后，模型是固定大小尺寸，在設計時，要考慮界面上需要重置按鈕，讓用戶可以重新放置模型在新的位置。下面結合案例具體說明：

此外，在AR內容體驗中也會發生丟失平面的異常情況。這里的異常處理可以使用話術準確告知用戶原因，還可以配以圖片、動圖、語音，更具象更清晰引導用戶解決問題。需注意與平面識別引導的設計形式保持一致性，若平面識別未使用語音，則識別失敗提示也不能使用語音，避免突兀感?？梢詤⒖家韵略O計內容：

• 純文字話術：通過簡單明了的文字正確引導用戶操作。
• 圖片/動圖+文字話術：圖片/動圖詮釋文字的含義，幫助用戶理解如何操作。
• 語音+文字話術：語音輔助文字，使信息更有效傳達，從而引導用戶操作。

2. 異常情況的設計原則和建議

模型出屏后需要及時引導用戶找到模型，避免焦慮感。

模型丟失后需要通過設計形式的組合搭配，以操作便捷的交互引導用戶。

建議在設計游戲類、科普類AR產品時，再次返回APP 需要保留之前的AR場景，保留延續性。

注意如果進入AR場景時無音效和語音，則異常情況引導不能出現音效和語音，避免突兀感。

平面識別失敗后需要及時反饋用戶如何操作，需注意設計形式保持前后一致。

放置類AR的設計核心原則

以上就是AR放置類交互節點的分析和設計建議的詳細內容。我們希望設計師能圍繞AR應用的真實場景，考慮到每個體驗節點的細節，結合上文提到設計建議，在設計過程中關注以下關鍵目標，為用戶創造更加友好和細膩的交互流程和體驗過程。

• 清晰：傳達的內容清晰明了，不會產生疑惑或歧義。
• 有效：能幫助用戶成功達到交互目標。
• 流暢：無停頓感，過程一氣呵成。
• 愉悅：用戶感覺愉快、無壓力。
• 可控：可自主交互，過程反饋清晰，給用戶盡在掌握中的感受。

希望通過我們提出的設計內容、設計原則建議能幫助到作為閱讀的設計師、開發者們，在日后的產品設計、交互設計中能讓用戶在放置類AR場景有更好的體驗，這也是我們編寫的目的所在，為AI科技盡綿薄之力。

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

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

這太棒了。

我也反復聽過不少錯誤和模棱兩可的說法被反復提起。因此，為了幫助大家——因為我確實喜歡幫助人——我在這里介紹一份簡單易學的糾正理解偏差的小清單，希望能夠廣泛傳播（我很有信心，因為研究表明，讀者喜歡簡單易學的清單）。

UXRen

1、適應不舒適的感覺

“我只知道一件事，就是我一無所知。”—蘇格拉底（Socrates）

我們在重視回答和害怕提問的環境中長大。在學校里，我們因為回答正確而得到獎勵；在工作中，我們因為提出好的點子而得到獎勵。難怪很多人會找理由避免做研究，特別是定性研究。顯得無知所產生的焦慮在心中滋長。定量的東西至少有標準化測試所帶來的熟悉感，令人舒適。保持研究型思維模式意味著要認識到偏差無處不在，確定性只是一種錯覺，任何答案的有效期都是短暫的。因此從長遠來看，好的問題更有價值得多。只有你承認自己沒有答案，才能問出好問題—也才會了解更多。

UXRen

2、先提問，再做原型

“如果我們只測試開瓶器，可能永遠不會意識到客戶更喜歡螺旋蓋的瓶子。”
—維克多·隆巴迪（Victor Lombardi），《設計敗道：來自著名用戶體驗案例的教訓》（Why We Fail）

我們理所當然會急于制作原型，測試原型。原型就是答案，可觸可摸，即使只是紙上的草圖。這樣做很舒服，比只是問問題舒服多了，即便這無異于燒錢。對于任何想要立竿見影地證明自己價值的人來說，只問問題，就像那只洗棉花糖的浣熊一樣，事與愿違。

太早制作原型的風險在于，這會把資源投入去回答一個無人問及的問題，同時還忽略了機會成本。測試原型可以幫助你優化好點子，但不會告訴你是否在解決恰當的問題，并且，也很容易將原型的亮點誤以為是點子的質量。不論如何，研究報告中的亮點也容易被誤認為是具有價值的洞察。

提出恰當的問題，不會讓不好的點子得到保留和維護，反而會幫助你更快地將它們識別和清除。你只需要有足夠強大的內心去擁抱錯誤。

（如果你正在想“嘿！這對我的團隊會有幫助”，我們會非常樂意去你的辦公室呆一天，確定你是否準備和Mule Design Studio合作。）

 UXRen

3、了解目標

除非你事先知道做某項研究的動機，否則提問就是浪費時間。你必須公開發誓：你的動機不是“為了證明自己是正確的”。這是每個人內心隱藏的目標。參看第一點。

通常，出于對研究的一腔熱情，團隊往往會在目標不明確、不一致時就開始跟客戶對話。然后，他們會感覺花了寶貴的時間，但卻不知道怎么去應用自己了解到的東西來提供解決方案，因而沒有什么可供展示的。于是就有了這樣的說法：“我們去年做了研究，但卻是浪費時間。”于是，又回到了建立原型和測試原型的舒適圈。又或者，他們對聽到的內容有不同的理解，結果又因誰對誰錯更加爭論不休。

在大公司、大機構中，有時大家都有心照不宣的目標：“表現出我們在盡力做研究，不過還是讓產品負責人做他想做的事吧?！边@聽起來可能有點嘲諷意味，但通過跟許多在資金充足的研究部門的資深研究者交談，我了解到，盡管他們撰寫的報告相當精彩，但對決策的影響卻為零。承認這個事實，是阻止它發生的第一步。

完美絕佳的起點，是把你的目標設置成：“我們需要確定水準，快速理解他人的觀點?！辈灰谑潞笕我馓砑悠渌繕恕?

只有當你確定了目標，才知道自己需要了解什么。而在你選擇怎么回答之前，你必須知道自己的問題是什么。

UXRen

4、在重大問題上達成一致

“從本質上講，所有商業活動都是在人的行為上下賭注。”
——《“厚”數據的力量》（The Power of ‘Thick’ Data）,《華爾街日報》

問題的質量決定了結果的用處。提出錯誤的問題跟用原型解決錯誤的問題如出一轍，它們都會給你一些你不想要的東西。從優先級最高的問題開始。確定這類問題的辦法是：如果你在這些問題上的假設搞錯了或忽略了，風險會最大。

最重要的研究問題是你想要知道什么，而不是你在訪談中要問什么。事實上，直接拋出你的研究問題往往是最糟糕的方式。人們往往不知道或者不愿承認他們真實的行為，但人人都很擅長編造答案。

設計研究總是和用戶研究混淆。回答高優先級研究問題的方式多種多樣，跟有代表性的用戶對話只是其中一種。你所需要知道的，并非都是與用戶相關。

通常，最關鍵的問題是：“基于證據，我們對客戶、競爭、內部能力真正了解些什么？”問法各有不同。這可能是一個非常難以完全誠實作答的問題，但又得在短時間內回答。

UXRen

5、時間和金錢永遠是夠用的

當研究被定義為設計之外的一種工作，人們就很容易把收集證據當作額外負擔，找理由不做。

通常，團隊必須獲得權威人士的許可，才能進行研究工作。提問本質上是對權威的挑戰。如果你曾經和一位不同意為百萬美元項目開展定性研究的領導合作，那么問問自己，這位領導購買一輛價值5萬美元的汽車前會不會自己做做研究？口頭上提出反對意見，心里面往往是害怕自己的主意被破壞，被證明錯誤，或者不那么行之有效。

如果你的目標和高優先級問題明確直白，不管時間和預算如何，你都可以了解到一些有用的信息。比如在線研究，午餐時間外出觀察，測試其他產品的可用性，發揮創意。

只要不是做調查就行。

UXRen

6、不要指望數據能改變想法

“當一個人要靠著對某件事的不理解來拿薪水時，要讓他理解這件事是很困難的?！薄蚱疹D·辛克萊（Upton Sinclair）

即使研究已經證明了這一點，但訓練有素的專業研究者還是往往很難接受。如果你習慣和重視某種特定數據類型的同事一起工作，那你可能很難去說服那些不假思索就否定這種觀點的人。而且，可能會因為數據不足而讓某人覺得自己的專業能力受到了侮辱。

收集證據的全部意義在于基于證據做出決定。如果這些證據破壞或者反駁了決策者所信奉的想法，他們就會找理由去否定或忽視這些證據。這也是定性研究者在一些工程師驅動的組織中處境艱難的核心原因。即使問題需要的是更具描述性的答案，熟悉且擅長數字的人卻想要用數字表達的答案。

因此，在嘗試用數據去影響決策之前，你必須了解你的同事和領導的個人特點和他們所處的環境，了解他們是怎么做決定的。

UXRen

7、接受混亂帶來的不完美

“我們善變，愚蠢，記憶力差，且有自我毀滅的天賦?！?br /> ——蘇珊·柯林斯（Suzanne Collins）,《饑餓游戲：嘲笑鳥》（ Mockingjay）

人類的生活是混亂的。人類如果沒有遇到問題，就不需要產品和服務，我們也就不會有工作。在真實、混亂的世界中為人們找出解決問題的最佳途徑需要一些時間，并在一定程度上放開控制。雖然有必要采取一種合乎道德的、足夠嚴格的方法，但并不存在絕對純凈的定性環境。明確的目標和好的問題可以承受各種不可預知的情況的考驗。

人們希望開展舒適有序、顯得專業的活動，這導致他們不恰當地使用焦點小組、可用性實驗室、眼球追蹤、調查和光鮮的報告等方式，但其實，不那么正式的研究可能會更加有效。

將證據納入設計決策，本身就是一個增強了解的過程。你永遠不會找到正確的答案并解決問題。如果過程行之有效，你就會在做決策時信心備增。

UXRen

8、致力于合作

每個從事相同工作的人面對的都是相同的現實。做出產品決策的人需要對信息完全知情。如果知識只存在于一個人的頭腦中（除非你在倫敦，而那個人是你的出租車司機），那么知識本身有多好并不重要。

一組人制作報告，而另一組人收到報告后置若罔聞，便是沒有合作的研究。如果這樣工作，即使是最用心的團隊也會讓知識溜走。而如果合作中缺乏證據，則意味著每個人都心照不宣地默認：勝出的是個人偏好。這兩種方法都不是最有效的。

最有效的方法，是讓產品開發人員直接參與提問和回答。這樣做也很有趣。實現這一點的方法有多種，依具體公司或機構而定。

提問關鍵在于建立一個共享的決策框架，以便做出更快更好的決策。我曾經就此召開了一場研討會，它帶來了改變。

UXRen

9、找到糾正你的偏差的伙伴

“我們可能對顯而易見的事情視而不見，也可能對自己的盲目視而不見?！?br /> ——丹尼爾·卡尼曼（Daniel Kahneman), 《思考，快與慢》（Thinking Fast and Slow）

你做了一些工作，找到了一些答案?，F在你需要確定它們的意義。在解釋研究結果時，合作變得尤為重要。每個人都被偏差所困擾，而且自己還無從察覺。我們所看到的是最符合我們現有信念的。因此，我們必須參考外部標準（包括預先設定的目標和問題），一起工作，互相檢查。

這與你有多聰明或消息多靈通無關。一旦你接受了這一點，只要你在一個心理上有安全感和相互尊重的團隊中工作，識別出偏差就會是一場有趣的游戲。

維基百科（https://en.wikipedia.org/wiki/List_of_cognitive_biases）提供了不錯的認知偏差清單，可以和認知偏差圖（ Cognitive Bias Codex  ）一起打印出來貼在墻上。

也許，這就叫正確的設計。

UXRen

總之，當我們在討論設計研究時，實際上是在討論基于證據的設計。創作、批評和探究都是設計過程中不可分割的一部分。將它們分裂開來，就會因無知、自負或恐懼而錯上加錯。

設計是一種價值的轉換。在實現任何產出之前，你必須先問問人們真正需要什么、看重什么，問問你希望從中得到什么樣的商業價值回報。

只要你采取道德的方法，誠實對待你的所見所聞，朝著富有價值的目標前進，那么，你所提出的問題和你找到答案的方式都無關緊要。正確的方法并非只有一種，正確的答案也并非只有一個。享受不確定性吧！它永無止境。

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

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

云雷紋

祥云紋

八寶紋

云頭紋

壽字紋

萬字紋

唐草紋

環帶紋

纏枝紋

藍藍設計( 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>

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

• 間距值是基準網格的倍數數值（如步驟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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。