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

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

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

迪士尼動畫的12條原則是設計師必須要掌握的經典指導性原則，是由Ollie Johnston和Frank Thomas在他們的書《The Illusion of Life》中提出來的觀點（譯者注：這本書在豆瓣的評分有9.3分，值得一看）。這些原則最初是用來為動畫片這種傳統的形式設計的，然而，這些原則也同樣適用于UI設計。所以，我想在這里做一個有趣的嘗試，看能否將這些動畫原則聯系起來。

一、擠壓和拉伸

在動畫中，擠壓和拉伸代表了物體的重力，質量，重量和靈活性。舉例來說，當一個彈球在它撞擊地面時會發生形態變化，就是擠壓和拉伸。

在界面中，擠壓和拉伸很容易就聯想到按鈕。當一個按鈕被按下時，就可以理解為受到了擠壓，通過控制按鈕的擠壓和拉伸，我們可以很輕易的做好一個按鈕的交互動畫。除了按鈕之外，這種原則也可以應用于UI中的任何交互元素上。

按鈕在交互時的擠壓和拉伸

擠壓和拉伸被應用于側邊欄

二、預期動作

讓觀眾能預先知道接下來將會發生什么，它是先于下一步會發生的動作。舉例來說，迪士尼動畫里經常有從高空往下跳躍時會先彎曲膝蓋再跳、正在跑步的人要停止跑步前會逐漸變慢步伐等等。

在界面中，懸停狀態就是很好的例子。當我們把鼠標懸停在元素上時，元素會提供反饋，表明它是可以點擊的，并且在點擊時，又會有一些別的反饋。

懸停的交互通常會暗示這個按鈕是可以點的

在有水平滾動界面里，通常在交互時會顯示下一個元素的部分內容。這其實是一個很好的例子，因為它是在告知用戶下一步的一些信息。

三、時間節奏

在傳統動畫中，時間會決定關鍵幀的繪制方式。幀數越多，動畫就越流暢，同時也更慢，時間能夠給動畫賦予情緒和性格。

時間的節奏感是任何動畫的基礎，速度在元素編排中起著非常重要的作用。速度太慢，用戶會不耐煩，速度太快，用戶又會錯過一些內容。一般來說，大多數UI動畫在200-600ms之間，其中懸停和反饋交互時長大約為300ms，精細的轉場動畫大約在500ms。也可以去參考谷歌的動畫規范（https://material.io/design/motion/speed.html#duration），里面非常詳細的解釋了每種動畫類型的持續時間。

一些設計系統，如Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把運動的節奏感視為一個很重要的方面，并為每種類型的過渡都制定了嚴格的規范。

右邊的過渡動畫顯得太過于漫長，繁瑣。

四、漸快與漸慢

在現實世界中，大多數物體都遵循著緩動運動規律。也就是說，物體的運動并不會瞬間開始或瞬間結束，就像一個物體自由落體，也是一開始很慢后面才變會變快。

左側的卡片是沒有緩動的，右側的是帶有緩動的，看起來會自然很多。

給UI中的元素加上緩動會讓它看起來更加自然，緩動和節奏感都是可以有效的提升動畫的品質。

五、呈現方式

舞臺中的表演需要合適的編排才會精彩。也就是說，對象在場景中如何擺放，每個動畫又如何出現，關乎演出的質量。通過這種編排，能夠將注意力引向最重要的角色。

在界面中，呈現方式能夠決定元素的位置，以及在交互時，它應該如何編排才能將用戶的注意力引向預期的元素。

比如現在有一個基于興趣的音樂APP，對這個應用來說，最重要的事就是讓動畫引導用戶選擇他們所喜歡的音樂。因此，有必要將類似的操作與其他元素分開編排，有目的的引導用戶。

六、弧形軌跡

一個從高處拋出的小球，運動軌跡會做拋物線軌跡運動，弧線能使物體的運動更加自然。

在界面中，沿著對角線的元素沿著弧線軌跡將會使運動變得更加自然。當需要凸顯出元素的運動路徑時，多嘗試使用弧線軌跡。

通過對比，能夠發現右側的弧線運動軌跡會比左側的直線運動軌跡顯得更加自然。

七、附屬動作

在動畫中，次要動作能夠起到烘托主要動作，比如動畫中的角色在走路時，頭部的晃動就是次要動作，卻能夠讓角色行走顯得更加自然。

在界面中，次要操作能夠起到強化關鍵動作，當元素需要向用戶提供反饋時，這個方法非常管用。所有的微交互都是基于這個附屬動作原理。

按鈕邊上的粒子效果強化了主按鈕的點擊效果

八、夸張和吸引力

場景中的重要角色通常會采用一些比較夸張的動作來獲得更多的注意力。

在界面中，重要的交互也會通過一些夸張的動畫來引起用戶的注意。谷歌設計規范中的FAB按鈕就是一個很好的例子，FAB按鈕在不動的時候也比較能引起注意，因為它通常會帶有比較鮮明的顏色，并且是獨立懸浮在界面元素之上的。當它被點擊時，FAB的動畫被放大，把整個界面都占滿，使得它完全占據用戶的注意力。

FAB 夸張的交互形式

對于支付這么重要功能的按鈕，通過夸張的動效引起用戶的注意

九、跟隨動作和重疊動作

想象一只兔子從高處跳下來，當兔子開始起跳時，它的耳朵動作會與身體動作發生錯位。然后當它著陸時，它的身體停下來了，但是耳朵還在動。前者稱之為跟隨動作，后者被稱為重疊動作。其原理說的就是：沒有任何一種物體會突然停止，物體的運動是一個部分接著另一個部分的。

在界面中，可以使元素在停止之前超過它們原本的位置，使得元素運動更加自然。（譯者注：大白話就是我們常說的回彈效果。）

界面有一定的回彈，會顯得更加自然。

當界面滾動時，文字會跟隨圖片的運動，圖片與文字以不同的速度運動會更加自然。（譯者注：像是被拖著走的那種感覺）

總結

界面中的每一次交互都必須在適當的場景中精心設計，讓整個體驗更具沉靜感。在正確的地方使用這些原則能夠確保產品中的交互體驗更加協調自然。

這些原則正在以不同的形式應用于當今的數字產品中，值得敬畏的是，30年前設計的一套規則到今天仍然適用。

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

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

現在市面上的汽車大部分都是過時的，沒有吸引力的用戶界面，正因為如此，很多設計師都在思考未來的汽車用戶界面將會如何改善我們的駕駛體驗。今天這篇譯文，一起來學習特斯拉和Apple Carplay 是怎么設計的！

汽車行業似乎每天都有著新的發展。很多證據都表明在接下來的20年里我們將會看到比上個世紀都要劇烈的變革。因此，頂尖的數字設計師們應該把重點放在對這個行業的關注。那么，到底什么才是車輛用戶界面的未來？它能從根本上改變我們和汽車之間的關系么？

下面是我收集的一些由全世界不同的設計師設計的美麗和未來的汽車抬頭顯示器、用戶界面交互、第三方app控制器。這些設計想法，有一些是真實存在的，有一些還正在發展中。

特斯拉移動控制中心原型

它為什么會讓人震驚？

當你想確定你是否已經鎖好車，關上燈，或者把你的車鑰匙交給剛考完駕照的小屁孩的時候，你是否覺得自己是個偏執狂？

這個移動app可以讓你在不離開座位的時候檢查這一切，有一個柴油混合動力車？你甚至可以在你吃早餐的時候啟動引擎。直觀的動畫會反饋你這個動作是否已經完成。

車載控制面板用戶界面

它為什么會讓人震驚？

這個用戶界面看起來是一個用肌肉記憶和手勢驅動的通用控制模型，不同數目的手指可以觸發不同事件，你可以通過iPad面板，無線鼠標等控制它。你可以通過動作來控制數值的大小等等。

這個用戶界面去掉了所有需要用戶記憶的小控件和視覺元素，從而你可以使用相同的手勢或者它的變體，來完成多個不同種類的任務。

你可以在這里查看整個案例研究：A New Car UI

特斯拉儀表界面概念版

它為什么會讓人震驚？

汽車將會變得更加的智能，為我們的公共場所騰出更多的空間，并且汽車的功能也將變得越來越互相關聯起來。隨著這些發展，數據在我們面前將會變得勢不可擋，試想一下不久之前，我們的手機和其它東西一樣還是一個單一功能的設備。我們在我們看到什么和如何看上有我們的控制權，它應該變得更加自然和方便使用。人工智能和機器學習將會采取直覺控制。這個由Bureau Oberhaeuser制作的原型讓我們提前看到了這一切的到來。

你可以在這里查看整個案例研究：Behance

遠程車輛健康測試與控制

它為什么會讓人震驚？

當汽車所有的零部件都變成電子系統時，你想拿起扳手就能發現問題變得越來越不可能了。這個移動app原型試圖用一種你能理解的語言去描述汽車當前的健康狀況，讓你知道你是否有必要在開啟你的海岸線之旅前修一下它。

輪胎壓力和氣候的用戶界面

它為什么會讓人震驚？

當進行輪胎檢查時，這個界面將會告訴你每個輪胎的壓力范圍并且告訴你它們的極限在哪里。這個用戶界面提供了如此重要的反饋，我覺得它應該被納入常用標準中去。

Hudway增強現實顯示器

它為什么會讓人震驚？

不用說大家都知道司機應該保持視線在路上，但是現在的手機導航都需要司機把注意力來回切換在手機屏幕和路面之間，這個叫Hudway的app把你的第二塊屏幕跟擋風玻璃很好的結合了起來。你面前的那塊擋風玻璃很有可能就是未來的顯示界面。

你可以在這里查看整個案例研究：Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]

城市導覽汽車應用

它為什么會讓人震驚？

這個用戶界面對于勇敢的探險家來說非常完美，如果你想快速的知道你周圍有什么，這個用戶界面可以讓你在有限的路線里來一段自發的旅行。

Apple Carplay

它為什么會讓人震驚？

每個人都在關注它的到來，想都不要想，如果你已經有了一堆蘋果的產品，你也會在你的汽車上裝上它的。Apple Carplay將會是下一代的第二塊屏幕。

數字儀表板集群顯示器

它為什么會讓人震驚？

沒有什么能和發動引擎點亮儀表，汽車轟鳴猶如巡游樂隊組成的和旋一樣。身邊的一切，聲音和延遲的視覺互動，都給與你感官的反饋。儀表會通過動畫直觀的告訴你，合適講切入下個轉彎，油量是否變低，以及胎壓是否過低。

然而，用數字型號在方方面面代替模擬型號也會開始令人擔憂，因為無法人工手動介入賬款車子，當保險絲熔斷，或者電子儀器故障時，汽車很快會失控。

特斯拉 iWatch UI 原型

它為什么會讓人震驚？

當可穿戴設備成為我們設備的一部分時，它很明顯會幫助我們的手持設備分擔掉一部分的操作功能。這個原型很好的說明了它是如何將這一切展示到手腕上來的。

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

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

想必很多前輩都會告訴大家，提高設計水平，最重要的一點就是多看多練多想。這句話，沒有任何毛病。

剛入門的同學肯定都會一直這樣做。特別是在“多看”方面，很熱衷于去收集各種各樣不同的站點，譬如自己碰到最多的問題就是：“米田，你有什么好的設計網站推薦給我們？”這樣的問題，我每周都會被問到數十次之多。

但是當東西真的變得很多的時候，往往會產生很嚴重的問題。不知道從哪里開始找起。特別是關于圖片方面的問題，這點更為嚴重。因為圖片能清楚描述的可能性很小，譬如一張一年前看過的海報，讓你再次清楚描述它是很難的。

所以這里就會引出一個話題，如何讓我們辛辛苦苦收集的圖片。能更好的使用，這是每個設計師必須要面對的問題。

要了解這個問題，最重要的一點是，知道什么東西是適合的。

舉個簡單的例子吧。圖中的這位人物叫盧冠廷，填詞人。或許很多人對這個名字比較陌生，沒關系。你肯定聽過他唱的歌。

是以下這首一生所愛。大話西游里的主題曲，相信華人都聽過他唱的這首歌曲。

那么經典的一首歌，創作時間需要多久呢？

答案是一個晚上。你的眼睛沒看錯，真的就是一個晚上創作出來的。這是我在一次線下分享會的時候。問過盧冠廷先生這個問題，他的回答就是這樣。

那么他是怎么做到的呢？相信每一個人都特別好奇。

和作曲一樣。好的設計創意也不一定需要長時間去思考。很多時候，創意來源于洗澡的時候。相反你花越多時間去思考，卻越想不出來。

這就是做靈感創意的魅力所在。

回到一生所愛這首歌曲的創作過程，盧冠廷先生是怎么做到在一晚時間，創作出經典的歌詞呢？ 

答案就是。答案就是，答案就是，畫重點了。

將他聽過關于愛情最好的十首音，一首一首反復聽。

抽取其中的精華，變成這首歌的主要內容。為什么要選取十首最好的？因為哪怕你創造出來的作品是在這些歌曲里最差的那一首，那也是從最好的結果內得到的最差答案。比單純自己憑空想象，效果要好很多。

那么對于設計同樣如此。我們不是需要填詞，但是要做設計，參考是必不可少的內容。

好的參考流程，找到合適的關鍵字很重要。你就要采用觀看，丟棄和應用這三步將看到的東西，消化吸收。

為了讓我們持續擁有最好的靈感，這時候，就需要建造靈感水庫。

一般建造水庫來說。最重要的就是這四點

● 第一、找到坐標（建造地）。

● 第二、投入魚苗（商品）。

● 第三，保持它的時效性，常常要去維修這個水庫（定期上班）。

● 第四、每條魚苗都標記好（記賬）。

當然，這是比較形象的比喻，其實就是要建立屬于自己的圖庫。坐標系所用的工具。投入的魚苗是圖片。時效指的是定期去刪減圖片。標記為每張圖片打上標簽。

最理想的。圖庫工具應該有這樣一個功能，就能找到類似的圖片。

這不是很復雜的技術，不過卻很有用。有這個功能的工具，能夠一下子推薦相似風格的作品給我們參考，這大大提高了工作效率。

因為這個是圖片類的。整理工具。

三常用的工具如下圖。

● Pinterest

● 花瓣

● Eagle

其中最理想的圖庫工具是Pinterest。它的相關度，聯想功能是最強大。簡單來說，你能用最短的時間找到。最多相似的圖。

對比花瓣。就明白其中的差異。

同樣是一張類似的圖。Pinterest找到的圖片是比較接近的風格，而花瓣找到的圖片風格就比較迥異了。

你或許會說。你這兩個工具我都不一定用到，我常常用的只是百度。那直接通過百度搜到的圖片，能有類似的效果嗎？

但饒可以，所有的搜索引擎都有一個功能叫做“以圖搜圖”。

以谷歌瀏覽器為例吧，就在瀏覽器的紅色箭頭部分上傳你需要尋找的圖片，它就會在顯示結果里自動推薦相似的圖片。

得到的結果類似這樣。

一般谷歌瀏覽器，點擊圖片右鍵的時候。都能發現有一種叫做在Google搜索相關圖片，這也是能達到相同的效果。

嗯，或許你不一定能訪問谷歌搜索，不過以下推薦的這些站點同樣能實現相同的效果。

有興趣可以去看看。

好了，你要儲備自己私人圖庫的工具后，接著就是要將我們看到的圖片一張張放進去。找到坐標，修建水庫后，你需要定期定量的投入魚苗，不然這個水庫也只是空置的水庫，是沒有任何作用的。

舉個簡單的例子，如何保持庭院的整潔？肯定是需要時時打掃。這是日式庭院里面很重要的組成部分。定期的清掃落葉，保持整個庭院是處于相對空靈的狀態。

同樣我們的水庫。也是需要進行這樣的一個修繕工作。一般我自己會將其分為性和臨時性兩種項目大的分類。

● 性：會收藏一些最常用的，而且以后肯定能用到的一些圖片素材。

● 臨時性：會根據每個項目收集有針對性的素材進行放置，可能項目結束之后就會進行封擋或直接刪除處理。

網絡端整理：

通過線上工具，比如chrome花瓣插件通過一個“采集到花瓣”的功能，就能將網絡上的圖片直接轉載到相應的工具里。

本地端：

可能有些項目不太想被人知道的話，本地整理很不錯的方法。譬如這里用到的工具是Eagle。它的分類功能很強大，可以通過顏色、大小、類型進行篩選。

為什么要修建自己的水庫，即整理圖庫呢？

最終目標跟前面那兩課講的很類似，就是要在未來的時候，能通過模糊搜索找到快速相對應的圖片。如果你找不到，那其實整理圖庫意義不大了。

這就好比一個很龐大的圖書館里面沒有任何分類系統的話，你肯定是找不到你需要的東西。

講了比較這么多內容，我覺得應該舉一個案例，會更容易理解。

比如我們要做一款產品。希望薄荷糖去吸引上班族購買，最終設計的成果是一條廣告片或者平面海報。

首先如果按我們普通的思考模型。大概是這樣的，你會思考出一堆薄荷糖的作用或者營銷方案。這種方法不好么？當然不是，只是效率有點低。

現在介紹的辦法就是希望通過技巧，能快速想到十個甚至100個不同的創意方向（關鍵字）。這有什么用呢？就對于最后的在臨時項目里面尋找相對應的參考圖片，就會有非常大的幫助。

簡單來說，先在左邊的三角形內寫下與主題相關的資訊?？梢岳斫鉃?，跟口香糖這個產品有關系的感受，都可以放在這個三角形里呈現。

隨后在右邊的三角形內寫出目標客戶群喜歡的東西。就是年輕的白領，他們最喜歡的是什么東西？可能有以下的這些關鍵詞。

最終我們要做的就是將左側的三角形的關鍵字與右側三角形的關鍵字進行隨機的拼合。

就是這么一個簡單的過程，就能形成很多看上去特別酷炫的關鍵詞。

● 清涼的音樂

● 變態的重金屬

● 頭發豎起來的溫柔

● 甜甜的色瞇瞇

● 透心涼的帥氣

我們循著這些酷炫的關鍵字去尋找相對應的素材參考，就完成了我們最基礎的靈感構思階段，得到以上這些圖片內容。

很多朋友都在問一個問題。老覺得自己構思設計的時候感覺沒有靈感，不知道怎么提高。很重要的原因是看的東西不夠，或者看的東西太過單一。

最后，當看到足夠多的時候。就不會太依賴圖庫，進而能夠將不同的元素進行拆解，形成屬于自己的原創東西。

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

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

在過去幾年當中，插畫開始以一種堅挺的姿勢，站在設計趨勢的最前列。不止是原本身處各個領域的畫手和插畫師開始越來越受追捧，而且連網頁、UI和動效設計師都紛紛學習插畫設計。當然，更顯著的變化，是插畫在網頁和UI中的使用越來越多，越來越頻繁，甚至越來越多樣。

多年來，插畫被廣泛地運用在雜志、圖書、報紙、海報、傳單等不同的傳統載體之上，新的工具和技術使得它更加輕松地植根于數字化媒體當中。

作為設計中，最具有表現力的元素，一張插畫所傳遞的信息比文字更多更豐富。在UI和網頁中，使用插畫來輔助傳達信息，無疑更加直接到位。而插畫的可定制性之強，猶在圖片之上。

插畫在UI界面中的運用，可以說相當廣泛了，它更清晰，更時尚，也可以更加精準，甚至更有表現力，為什么不用呢？就適用范疇而言，我們可以觀察到，它可以運用到這些地方：

• 頁面主題圖

• 網頁首圖和Banner

• 吉祥物和形象插畫

• 博客文章配圖

• 新用戶引導教程

• 工具提示

• 獎勵頁面和成就頁面

• 游戲化設計的頁面

• 通知和系統消息

• 聊天表情

• 講故事的輔助配圖

• 信息圖

• 營銷和廣告圖

• 圖標和裝飾性內容

• 社交媒體頁面

• 支持性內容的頁面

插畫的適用范圍之廣，這些總結出來的使用場景，并不是全部。插畫本身的屬性很有意思，它連接了設計，作為內容呈現，還帶著明顯的藝術化的屬性。今天的文章，我們總結一下在設計中使用插畫的10個理由和注意事項。

無論是印刷品、品牌設計還是UI界面，更加風格化的插畫能夠將不同的風格和創意加入其中，在激烈的競爭中更容易因此脫穎而出。留下用戶才有轉化。

同樣的，在博客、新聞和Banner 中使用插畫，也是看準了插畫可以根據內容進行深度定制的優勢，這種微調能讓內容更加統一一致，更加符合產品目標，借助色彩、角色、環境甚至暗藏的隱喻，來吸引特定的用戶。

我們常說「一圖勝千言」不是沒有道理的。人的視覺感知能力很強，看到圖片的一瞬間，也許還沒有來得及進行邏輯思考，但是大腦已經接收到大量的信息和內容。

• 心理學研究表明，人類只需要大概1/10秒就可以感知到場景中絕大多數的元素和基本視覺信息。

• 視覺信息可以更快傳遞到大腦，而重要的信息，人類也通常會被固化為視覺圖像，而非文本化的記憶。

• 文本需要依托可讀性設計，而圖片和插畫則會被直接識別。

• 圖片和插畫更容易打破文化和語言隔閡，傳遞內容含義。

• 對于視障用戶、閱讀障礙用戶和兒童，圖片插畫更容易被理解。

雖然圖片一瞬間傳遞的信息很多，但是圖片在很多時候是無法提供精準而詳細的內容。用戶依然需要文本來呈現清晰而可以被閱讀和記錄的內容，所以文本依然是不可或缺的。在另外一方面，文本和標題已經具備的情況下，經過定制的插畫能夠輔助用戶理解，更清晰的記憶。

在很多特定的領域，舉個例子比如說金融，插畫能夠借助色彩、圖形和形象來講述故事，讓用戶更清晰的理解復雜的金融功能，甚至強化信任感，而這是文本所不具備的。插畫能帶來強烈的情感連接。

故事是最令人難忘的內容，劇情的走向和起承轉合會給人留下深刻的印象。而插畫則以清晰的形象將文字和意象勾連起來，無論是在網頁、UI設計還是內容和體驗上，都有著足夠突出的體現。

營造氛圍，渲染情緒，描摹環境，呈現角色，插畫讓故事更加鮮活、易于理解。在內容制造上，有著難以替代的作用。

人是情感動物，看似理性的皮囊之下，幾乎每個決定都是在情感和情緒的驅動下完成的。如果某個設計除了能夠幫你達成某個目標，還能讓你感到愉悅，會心一笑，那么通常下一步就是將它收藏起來并且分享給朋友。而在諸多設計因素當中，插畫在撬動用戶情緒這一點上，有著無與倫比的效用——從線條、色彩到面部表情和曲線和動效，都在竭盡全力地為你闡述故事，營造氛圍，將你拉到故事和場景當中去。

即使所有人都在分析和爭論產品的可用性和易用性，大家在對美的追求上，始終保持著一致的態度。一個設計是否具備可取性，是否能夠通過甲方、客戶和實際用戶，是每個設計人都需要面對，都力求做到最好的事情。精心設計的插畫在美學和風格上更加扎實，風格化的設計不弱于現成設計素材所提供的價值。

和文本相比，插畫的視覺化屬性無疑是更強的。圖片插畫所提供的定制化內容能夠從各個方面來貼合品牌的需求，更加到位地表達品牌所需呈現的信息。這也使得插畫不僅僅在品牌宣傳的時候，運用在廣告、海報等顯而易見的地方，而且也成了品牌 APP 中新用戶引導和教程中必不可少的元素。

就像 Perfect Recipes 這個應用的新用戶引導屏中，就借助插畫來呈現。而 Toonie 這個可愛的鬧鐘應用當中，甚至借助游戲化的設計，集成了大量有趣的表情和貼紙，當然，它們都是使用定制化的插畫來呈現的。

數字化的好處就在這里，通過不同的數字軟件，合理的處理之后，不僅能夠變成動態的，運用于視頻當中，還能夠作為微交互，強化產品的整體體驗。

一旦涉及到的動效和短視頻，整個數字插畫就開始具備更多的可能性了，不同的動效能帶來截然不同的感覺和體驗，更不用說這種玩法正貼合時下的流行趨勢。

Whizzly 這個動態圖標就是基于插畫，給一個創意分享社區所準備的。

和藝術一樣，設計中同樣需要借助隱喻來傳達一些相對更有趣、更深刻、更有意思的信息。插畫的獨特性也是借此來構成，包含的隱喻使得其中的價值更加復合，值得反復咂摸，而不是一眼就可以完全看穿。

在這個約會應用的網頁當中，插畫無疑傳遞出了多重的信息，暗含的隱喻告知了用戶產品的功能和屬性。而下面這幅插畫則是為一篇如何找到原創風格的文章所準備的，圖中的金魚指代的則是難以被抓住的靈感和風格。

無論是圖標還是大幅的插畫，都能幫助用戶理解，更加直觀地知道要看哪里，要做什么。面對如今的數字界面，用戶的注意力持續的時間越來越短，而插畫則讓用戶更快、更直接地獲取信息，并且決策下一步要做什么。如果插畫或者圖標內容不能被用戶一眼看出來，那么用戶就只能借助文本標簽來了解功能是什么。設計師可以通過測試來測試圖標和插畫的可用性和識別度。

值得思考的問題

當然，插畫的設計是沒有門檻的，在設計的時候，要求也是比較高的。在使用和設計插畫的時候，需要考慮以下的幾個方面：

• 目標受眾（身體能力，年齡，文化背景，教育水平等）

• 產品的使用環境

• 產品和內容的在全球范圍內和當地的傳播水平

• 所選圖形的隱喻以及是否容易被識別

• 插畫是否會讓人分心

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

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

現在，當你打開 Instagram、Airbnb、Apple Music、Twitter、Dropbox 這些應用的時候，乍一看很難區分清楚彼此的區別：帶有圓潤邊緣、現代感極強的非襯線字體大標題，極簡的黑白色調為主的界面，大量的留白，少量的提亮色甚至沒有提亮色。

這種現代的界面設計風格，乍一看很簡陋。而具有諷刺意味的地方在于，它們出自于最大的公司，是也是受眾最廣的產品，在視覺觀感上，讓人覺得幾乎沒有被設計過。

Instagram 的深藍的頁頭怎么變了？Lyft 中經典的亮粉色元素怎么不見了？這些有著深厚底蘊的品牌是否已經放棄了標識性的設計？又或者是它們開始共享相同的模板了？

問題在于，這不止是 Instagram 和 Lyft 這樣了，有跡象表明，Google 這樣的大廠也有類似的傾向。比如Gmail 中標志性的紅色大幅度減少，白色的背景，白色的交互按鈕，白色的輸入框，其他的Ui控件都很精準到位地保持了這種簡約而一致的風格。

身在硅谷的大型企業，互相之間的借鑒學習是常有的事兒，但是至少保持了足夠的差異化。但是現在的局面則不同，這種高度趨同的趨勢，讓整個事情看起來非常反直覺。

到底是怎么回事？

好吧，我們認為產品設計的一致性是好事情，這里有幾個值得注意的原因。

對于大量APP 的視覺和信息疲勞是誰都無法忽略的真實存在，絕大多數人已經厭倦了在太多應用之間來回切換，每一次下載新的應用都要花費大量的時間來重新了解界面的設計

調研表明，超過四分之一的應用，在首次下載之后，用戶只用過一次就卸載了。絕大多數人日常使用的APP 其實是非常固定的，它們中絕大部分，核心在于幫助人們節省時間和金錢（或者兼而有之），讓生活更輕松。

對，讓生活更輕松。而這需要數字產品具備良好的一致性，而設計師也越來越多地將注意力投注在這一個點上。

正如同我們熟知的UX設計專家唐納德·諾曼所說的：「很多用戶界面所存在的真正的問題，在于它僅僅只是用戶界面。很多用戶界面的設計阻礙了功能。我想努力達成某個目標，而不是將精力耗費在界面上?！?/span>

所有的電商網站基本上都遵循著類似的交互邏輯和視覺元素，你不會搞錯購物車的圖標，也不會錯過任何環節。這些約定俗成的慣例，意味著用戶不再需要重新學習在某個新的平臺上購物，降低學習成本。

絕大多數約定俗成的規則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習慣，而獨特的設計，截然不同的規則，則常常會成為習慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。

以 Snapchat 為例，今年早些時候曾經發布過一個版本，其中包含有一些比較有爭議的設計。這個版本當中，被重新修改過的導航和幾乎隨意堆砌的功能模塊，讓用戶活躍度幾乎立刻下降了73%，甚至直接導致了用戶流失和股票下跌。

正如同 Snapchat 所證明的那樣，新穎的設計是有風險的。一致的設計，確實有一定的機率降低用戶在面對新興事物時候的不安感。

明白用戶的需求和意圖，在不斷探索解決方案的過程中，才能真正創造出偉大的用戶體驗。相比于獨特的外觀，差異化的體驗是更有價值的。

當然，樣式和風格很重要，它們也確實會影響到體驗，當人們感知到有視覺吸引力的設計的時候，即使有一些混亂和無效的設計，也是可以忍受的。

但是設計師的精力是有限的，用戶的也是如此，相比于在色彩和花哨的動畫上反復嘗試，幫助用戶找到更好完成任務的方式，無疑更有價值。設計好的產品，最終能夠給用戶帶來價值的東西，是需要看似無限的測試和迭代，來向著可用和易用的產品更進一步。

奧巴馬、喬布斯和扎克伯格每天穿著相同的衣服，他們的衣服和這種行為同樣出名。心理學家將這種現象稱之為「決策疲勞」，它們每天需要用有限的能量來做大量的決定，而為了給更重要的事情留下足夠的精力，他們穿相對固定的衣服，就可以省心很多。

設計師面對的是同樣的局面。隨著界面設計的趨同化，設計師可以花費更少的時間來決定用什么色彩，而可以將更多的精力投注在更為深入的設計當中，比如更有效的布局，反思為什么要這樣設計，等等。

我想你一定在思考這種設計趨勢之下的缺點，比如這樣的設計是否會顯得缺乏創新，甚至會扼殺創造力。老實說，我覺得這樣的影響是存在的。

但是，即使每個產品設計師都參與到極簡主義設計的運動當中來，仍然有大量的設計工作有待完成，設計的范疇太廣泛了，需要設計的東西遠超用戶界面本身。

事實上，界面中的趨同化在近期看來是頗為有益的，對于長期的影響也是非常巨大的。

首先，最重要的一點，VR、AR 和人工智能的逐漸普及，用戶和數字設備之間的互動可能會變得更加隱形，小屏幕同樣在普及，手勢操作將會成為最基本的交互語言，我們將會越來越多地參與到無屏幕的交互當中去。

即使我們在iPhone 上，人工智能加持下的 Siri 越來越好用，越來越多的用戶開始習慣使用類似的語音助手來創建待辦事項，選擇音樂，發送消息，查看天氣，簡單的功能它們已經可以很好地完成了，復雜的功能和需求也會通過機器學習逐步習慣、越做越好。

在諸如人工智能、機器學習這樣相對高深的概念背后，是軟硬件正在更好地幫助人類完成任務，做對事情。設計師的角色需要更進一步，更深入地參與到產品當中。

如果設計師要改進 Siri 的設計，那么要做的工作遠不止設計界面，已經有很多相關領域的專家討論過這個問題了，設計師所需要了解、掌控的維度越來越多，設計正在變得更加深入和復雜。更通俗的講，設計師需要考慮新的方式，更加富有創造力的策略來吸引用戶的注意力，甚至要深入到情感和感知當中去，而不是單純的視覺。

如果我們僅僅將優秀的設計局限于我們在屏幕上看到的內容，未來更多的可能性，可能就止步于此了。

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

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

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

本文重點梳理以下七大問題：一、令人眼花繚亂的專業術語；二、交互和視覺如何分工；三、工作的流程；四、視覺類UI的自學；五、交互設計需要掌握的知識；六、今天設計什么；七、設計師的薪資

經常有人問我新手如何自學交互設計，我之前也錄過一個視頻給大家，沒想到放到網上后點擊率很高，看來對新人是的確有幫助的。所以今天再次針對這個問題做闡述，修正了第一版的一些內容，也更具有針對性。

編者按：當手機屏幕越來越大時，該如何保持單手操作的便攜性？今天這篇文章提到了兩個新的交互方式，值得一看，說不定有啟發喲。

大屏手機有很多優勢，大屏手機的趨勢未來還會持續下去。但大屏也不是什么都好，更大的顯示屏幕并沒有承載更多的內容。實際尺寸和功能多少對于高、低分辨率顯示是相同的。Steven Hoober 2013年的手機設備研究報告發現：49%的用戶通過單手持機操作，36%的用戶一手拿著手機一手操作，另有15%的用戶雙手持機操作。

2017年，并未有太多改變，單手拇指觸控操作正在成為常態。首先，這樣的操作比較方便；其次，同時使用雙手并不總是太方便。但這里就有一個障礙：單手持握使用限制了你拇指能夠觸控的區域范圍。

最近在做產品的會員中心改版設計，有一些關于會員體系相關設計的思考及分析，紀錄并分享一下。

大多數產品在滿足用戶的基礎需求上，會推出付費會員功能，以滿足用戶更高需求的同時，達到商業層面的收支平衡。那么，會員中心應該怎么做，才能讓用戶感受到自己花的錢很值呢？

設計前，先明確會員中心的設計目的是什么？

1. 會員尊享感（讓用戶感知到付費值得，花了錢就是爺，滿足一部分用戶的虛榮心）

2. 功能特權對比（通過特權的對比，讓用戶選擇更高的等級會員）

3. 突顯核心特權功能（突出核心功能，抓住用戶訴求點，提升用戶購買決策）