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

寫在前面

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

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

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

插畫風(fēng)格

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

文字插畫

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

創(chuàng)造一個攝影圖像

藝術(shù)家以照片為素材，以細(xì)膩的細(xì)節(jié)創(chuàng)造出逼真的復(fù)制品。

在現(xiàn)實主義攝影中，藝術(shù)品常常被誤認(rèn)為是照片。繪畫、透視和色彩的選擇對這種藝術(shù)形式至關(guān)重要。藝術(shù)家經(jīng)常使用噴槍，或手畫與丙烯酸或油達(dá)到最終的結(jié)果。

展示歷史或文化的插畫

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

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

超現(xiàn)實主義

這種形式的插畫試圖抹去藝術(shù)和現(xiàn)實之間的界限，被認(rèn)為是對攝影現(xiàn)實主義的一種進(jìn)步。

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

概念插圖

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

圖像順序

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

信息圖形

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

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

抽象或扭曲的設(shè)計

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

手繪數(shù)字圖紙或插畫

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

矢量圖形和插畫

利用矢量圖形，用數(shù)學(xué)方程進(jìn)行設(shè)計。由于矢量圖不像徒手?jǐn)?shù)字繪圖那樣使用筆畫，圖像不像徒手設(shè)計那樣平滑。然而，它們可以在不損失質(zhì)量的情況下被炸毀。這些圖像有清晰的形狀和輪廓，非常受歡迎的網(wǎng)絡(luò)插畫。

兒童插畫

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

社區(qū)書籍和圖形小說插畫

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

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

書籍封面和出版物

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

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

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

標(biāo)志或品牌設(shè)計

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

通常，這個品牌與想象中的品質(zhì)有關(guān)，比如速度、力量或創(chuàng)造力，而商標(biāo)有助于喚起這種情感信息。有時，企業(yè)不僅僅使用一個標(biāo)志來輔助品牌建設(shè)。

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

發(fā)展你的插畫風(fēng)格的技巧

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

然而，如果你經(jīng)常被許多高質(zhì)量的插畫轟炸，你如何發(fā)展自己的風(fēng)格？這里有一些建議：

了解基本原則

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

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

除了向那些已經(jīng)在這個領(lǐng)域內(nèi)的人學(xué)習(xí)，你還會學(xué)到一些哲學(xué)，這些哲學(xué)將使你能夠加入其中，在你這樣做的時候表達(dá)你自己的風(fēng)格。

探索新的插畫風(fēng)格

如如果你覺得自己陷入了風(fēng)格的窠臼，重復(fù)做了很長時間的工作，你可能想學(xué)習(xí)一些新的插畫風(fēng)格或技巧，進(jìn)一步發(fā)展自己的作品。

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

嘗試新媒體

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

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

做真實的自己

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

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

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

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

最后說一下對插畫風(fēng)格的思考

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

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

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

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

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

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

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

案例1 功能入口

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

案例2 列表內(nèi)元素

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

案例3 模塊之間

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

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

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

案例1 虎撲評論點贊

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

案例2 嗶哩嗶哩打賞

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

案例3 微信讀書推薦

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

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

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

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

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

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

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

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

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

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

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

什么是節(jié)日閃屏？

節(jié)日閃屏是指在特定的節(jié)日進(jìn)行情感化設(shè)計，傳遞品牌關(guān)懷的閃屏。優(yōu)秀的節(jié)日閃屏，在內(nèi)容上不僅能夠觸達(dá)用戶的記憶點，也能夠與品牌相融合，這樣既拉近了用戶與產(chǎn)品的距離，也強(qiáng)化了品牌的認(rèn)知和記憶。

確定設(shè)計目標(biāo)

在開始設(shè)計之前，我們期望節(jié)日閃屏能夠達(dá)到以下兩個目標(biāo)：

• 傳達(dá)節(jié)日祝福喚起用戶回憶
• 體現(xiàn)微云品牌調(diào)性

不同的節(jié)日有不同的文化背景和風(fēng)俗習(xí)慣，節(jié)日祝?？梢越Y(jié)合最典型的特征，這樣更有利于喚起用戶回憶，后文會結(jié)合案例進(jìn)行分析。然而，品牌調(diào)性是貫穿所有節(jié)日的，在設(shè)計之初，我們明確微云的品牌調(diào)性，這樣更有利于品牌的傳達(dá)。

1. 品牌調(diào)性研究

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

結(jié)合微云的特征，我們從現(xiàn)有產(chǎn)品的界面和用戶反饋兩個角度進(jìn)行分析，提煉符合微云調(diào)性的詞云。

2. 分析現(xiàn)有產(chǎn)品界面

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

3. 分析用戶反饋

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

4. 提煉微云品牌詞云

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

如何做一個節(jié)日閃屏？

接下來就以勞動節(jié)閃屏為例，從節(jié)日特征和品牌調(diào)性兩個維度來闡述節(jié)日閃屏的設(shè)計過程。

1. 節(jié)日特征

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

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

2. 品牌調(diào)性

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

主題確定之后，就開始進(jìn)行優(yōu)化設(shè)計了。圍繞著關(guān)鍵詞，采用扁平化的設(shè)計手法，在色彩搭配上，由于勞動節(jié)沒有明顯的色彩傾向，故以品牌藍(lán)為主色調(diào)，橙色來源于產(chǎn)品的圖標(biāo)，作為輔助色提亮整體畫面；在頁面排版上，保持大面積的留白，簡約清爽。

3. 小結(jié)

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

4. 其他的節(jié)日閃屏設(shè)計

按照上面的思路，我們完善了其他的節(jié)日閃屏設(shè)計。

母親節(jié)閃屏

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

端午節(jié)閃屏

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

七夕閃屏

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

中秋閃屏&圣誕節(jié)閃屏

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

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

所有節(jié)日閃屏合集

輸出節(jié)日閃屏規(guī)范

節(jié)日閃屏除了故事性的表達(dá)之外，在設(shè)計上我們也輸出了一部分規(guī)范，用來把控風(fēng)格的統(tǒng)一。

1. 配色規(guī)范

色彩作為用戶最容易感知的部分，使用時與品牌相呼應(yīng)，主色與輔助色均來源于產(chǎn)品圖標(biāo)。有明顯色彩屬性的節(jié)日，以節(jié)日固有色為主，比如春節(jié)紅色，中秋黃色等等。無明顯色彩屬性的節(jié)日，可以以品牌藍(lán)為主，強(qiáng)化品牌印記。

2. 角色規(guī)范

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

在設(shè)定好人物細(xì)節(jié)規(guī)范之后，我們也完善了角色資源庫，方便后期在其他場景的應(yīng)用。

3. 場景規(guī)范

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

拓展場景的使用

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

總結(jié)

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

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

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

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

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

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

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

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

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

模型移動的交互定義及設(shè)計形式

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

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

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

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

模型移動并非需要X、Y、Z三個軸均開放，實際是根據(jù)模型位移交互的具體需求去選擇開放維度，并設(shè)計合理的交互方式去響應(yīng)模型的移動?？蓞⒖家韵掳咐?

模型旋轉(zhuǎn)的交互定義及設(shè)計形式

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

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

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

模型縮放的交互定義及設(shè)計形式

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

• 雙指擴(kuò)展/捏合縮放：以模型的中心點等比縮放。
• 拖動滑動條縮放：拖動滑動條在0-100%的范圍內(nèi)進(jìn)行縮放，當(dāng)標(biāo)尺拖動到極限時，則模型不再響應(yīng)縮放。
• 固定縮放倍數(shù)按鈕：倍數(shù)已經(jīng)固定，限定縮放的大小。

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

有一種特殊的情況，當(dāng)支持放置多個模型時，如何設(shè)計呢？此時，需要通過點擊選中模型，模型進(jìn)入選中態(tài)，與其他模型區(qū)分開，選中后進(jìn)行的操作只作用于該模型，并支持刪除模型的功能。

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

模型交互的設(shè)計原則和建議

1. 根據(jù)模型需要定義交互自由度

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

2. 手勢設(shè)計簡單且符合直覺

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

3. 手勢設(shè)計按需搭配且不可沖突

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

異常處理的設(shè)計分析及體驗建議

1. AR中異常情況的定義及設(shè)計內(nèi)容

傳統(tǒng)APP設(shè)計存在異常情況，比如無網(wǎng)絡(luò)加載失敗，登錄發(fā)生錯誤等情況，那在放置類AR 中是否存在異常情況呢？

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

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

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

當(dāng)發(fā)生模型出屏、模型丟棄復(fù)位的異常情況，根據(jù)產(chǎn)品類型和場景選擇合適的設(shè)計手段，解決用戶的困惑。結(jié)合具體案例以說明：

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

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

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

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

2. 異常情況的設(shè)計原則和建議

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

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

建議在設(shè)計游戲類、科普類AR產(chǎn)品時，再次返回APP 需要保留之前的AR場景，保留延續(xù)性。

注意如果進(jìn)入AR場景時無音效和語音，則異常情況引導(dǎo)不能出現(xiàn)音效和語音，避免突兀感。

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

放置類AR的設(shè)計核心原則

以上就是AR放置類交互節(jié)點的分析和設(shè)計建議的詳細(xì)內(nèi)容。我們希望設(shè)計師能圍繞AR應(yīng)用的真實場景，考慮到每個體驗節(jié)點的細(xì)節(jié)，結(jié)合上文提到設(shè)計建議，在設(shè)計過程中關(guān)注以下關(guān)鍵目標(biāo)，為用戶創(chuàng)造更加友好和細(xì)膩的交互流程和體驗過程。

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

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

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

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

這太棒了。

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

UXRen

1、適應(yīng)不舒適的感覺

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

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

UXRen

2、先提問，再做原型

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

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

太早制作原型的風(fēng)險在于，這會把資源投入去回答一個無人問及的問題，同時還忽略了機(jī)會成本。測試原型可以幫助你優(yōu)化好點子，但不會告訴你是否在解決恰當(dāng)?shù)膯栴}，并且，也很容易將原型的亮點誤以為是點子的質(zhì)量。不論如何，研究報告中的亮點也容易被誤認(rèn)為是具有價值的洞察。

提出恰當(dāng)?shù)膯栴}，不會讓不好的點子得到保留和維護(hù)，反而會幫助你更快地將它們識別和清除。你只需要有足夠強(qiáng)大的內(nèi)心去擁抱錯誤。

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

 UXRen

3、了解目標(biāo)

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

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

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

完美絕佳的起點，是把你的目標(biāo)設(shè)置成：“我們需要確定水準(zhǔn)，快速理解他人的觀點?！辈灰谑潞笕我馓砑悠渌繕?biāo)。

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

UXRen

4、在重大問題上達(dá)成一致

“從本質(zhì)上講，所有商業(yè)活動都是在人的行為上下賭注?！?br /> ——《“厚”數(shù)據(jù)的力量》（The Power of ‘Thick’ Data）,《華爾街日報》

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

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

設(shè)計研究總是和用戶研究混淆?；卮鸶邇?yōu)先級研究問題的方式多種多樣，跟有代表性的用戶對話只是其中一種。你所需要知道的，并非都是與用戶相關(guān)。

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

UXRen

5、時間和金錢永遠(yuǎn)是夠用的

當(dāng)研究被定義為設(shè)計之外的一種工作，人們就很容易把收集證據(jù)當(dāng)作額外負(fù)擔(dān)，找理由不做。

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

如果你的目標(biāo)和高優(yōu)先級問題明確直白，不管時間和預(yù)算如何，你都可以了解到一些有用的信息。比如在線研究，午餐時間外出觀察，測試其他產(chǎn)品的可用性，發(fā)揮創(chuàng)意。

只要不是做調(diào)查就行。

UXRen

6、不要指望數(shù)據(jù)能改變想法

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

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

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

因此，在嘗試用數(shù)據(jù)去影響決策之前，你必須了解你的同事和領(lǐng)導(dǎo)的個人特點和他們所處的環(huán)境，了解他們是怎么做決定的。

UXRen

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

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

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

人們希望開展舒適有序、顯得專業(yè)的活動，這導(dǎo)致他們不恰當(dāng)?shù)厥褂媒裹c小組、可用性實驗室、眼球追蹤、調(diào)查和光鮮的報告等方式，但其實，不那么正式的研究可能會更加有效。

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

UXRen

8、致力于合作

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

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

最有效的方法，是讓產(chǎn)品開發(fā)人員直接參與提問和回答。這樣做也很有趣。實現(xiàn)這一點的方法有多種，依具體公司或機(jī)構(gòu)而定。

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

UXRen

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

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

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

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

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

也許，這就叫正確的設(shè)計。

UXRen

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

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

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

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

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

云雷紋

祥云紋

八寶紋

云頭紋

壽字紋

萬字紋

唐草紋

環(huán)帶紋

纏枝紋

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

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

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

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

1、 雙色版的漸變

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

如何使用雙色版的漸變？

你可以像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)容包括文本和插圖。但是，圖中使用的顏色非常謹(jǐn)慎。插圖主要是淺色調(diào)，只是一些色彩鮮艷的細(xì)節(jié)，與背景雙色調(diào)（溫暖）相反（冷）。

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

2、半透明漸變

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

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

如何使用半透明漸變？

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

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

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

三、網(wǎng)格漸變

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

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

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

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

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

4.漸變模糊

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

如何使用漸變模糊？

它們似乎經(jīng)常被用作海報設(shè)計的一部分。抽象的偉大之處在于它可以用來描述各種情感和抽象概念。它可以說明聲音，光線，宇宙，幸?；虮瘋Ｎ覀兏静恢廊绾蚊枋鲞@些單詞中的許多單詞，但精心挑選的模糊彩色形狀可以幫助我們。

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

5.漸變球體

最后的漸變趨勢是漸變球體，具有強(qiáng)烈三維形狀的網(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)。在我的例子中，我使用藍(lán)色/紫色物體與粉紅色/黃色物體形成鮮明對比。這些都是我需要的顏色。任何更多的東西，組成會感到混亂。雖然很容易穿過線，所以如果你不確定，只需要減少顏色和減少形狀。

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

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

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

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

存在的問題

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

——Robert Bringhurst，著有《印刷風(fēng)格元素》一書。

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

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

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

解決問題

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

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

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

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

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

——?？硕?/span>

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

• 間距值是基準(zhǔn)網(wǎng)格的倍數(shù)數(shù)值（如步驟1中確定的4點基準(zhǔn)網(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點基準(zhǔn)網(wǎng)格，因為它提供了更好的視覺可感知區(qū)間，對于層次結(jié)構(gòu)的展示來說非常好，因此間距值應(yīng)該是(2、4、8、16)。

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

我深受Nathan Curtis上面文章中介紹的Insets，Stacks＆Inline等間距詞匯的影響。我決定在其基礎(chǔ)上構(gòu)建一個額外的詞匯組，以便我的團(tuán)隊更容易理解每個詞匯的使用環(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)容包含：

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

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

A）首先解決頭部堆棧

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

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

視覺探索的過程

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

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

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

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

標(biāo)頭堆棧 - 間距為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進(jìn)行驗證，其中規(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作為段落底部的邊距。

解釋W(xué)CAG SC 1.4.8中的段落間隔規(guī)則

在Sketch中多段落排版

如果對計算結(jié)果有疑問，我總是用視覺探索進(jìn)行交叉檢查。與其他可能的值相比，段落之間的16px間距最佳。其實我認(rèn)為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)。

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

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

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

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

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

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

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

2個組件的間距

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

組件內(nèi)部間距

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

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

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

外部圖標(biāo)與組件間距

如果圖標(biāo)與組件關(guān)聯(lián)組合，則其與組件間距為4px以顯示其關(guān)聯(lián)關(guān)系（格式塔的鄰近原則）。但是如果圖標(biāo)與一組組件關(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)容進(jìn)行排查，開發(fā)工程師不再需要花時間檢查Zeplin等其他工具中樣式問題。

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

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

文疊文

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

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

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

給標(biāo)題增加小色塊

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

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

用斜線或點填充空白

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

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

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

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

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

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

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

給圖片加圓形色塊

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

要點：

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

給每行文字都加一個色塊

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

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

要點：

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

用飄帶裝飾包裝上的文字

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

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

結(jié)語

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

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