首頁

為什么在UI設計中,藍色會成為最常用的色彩?

用心設計

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

 

不管你是不是UI設計師,細心的你是否觀察到你所使用的APP中,絕大多數(shù)都采用了藍色。舉個例子,有多少APP軟件的LOGO使用了藍色,大家最熟悉的支付寶、知乎、百度、Facebook、Twitter、Safari均是如此。
為什么這些交互界面會不約而同的使用藍色?唐人設計總結(jié)了以下幾個原因:
一、藍色是被大多數(shù)人能接受的顏色
有研究表明,藍色是絕大多數(shù)的人都喜歡的藍色,藍色是被全球范圍內(nèi)公認的最安全的設計用色。
二、藍色是UI設計師的通用色彩
從UI設計師的角度上來看,藍色是一種泛用的色彩。就我們所認知的常用色彩當中,紅色、黃色、綠色都帶有強烈的情感情緒。紅色代表喜慶,同時也表示警醒;黃色代表活潑,同時也昭示危險的信號;綠色常常關乎安全、健康,而相較于以上三種色彩,藍色所帶給人的情緒就比較模糊或者說是廣泛了。
三、藍色通常代表“創(chuàng)新”和“科技”
還記得唐人設計之前寫過的文章《你發(fā)現(xiàn)了沒?NBA的Logo微調(diào)了!》一文中提到了,NBA的LOGO調(diào)整之一包括LOGO顏色加深了,也就是在原來的藍色背景色基礎上更加加深了藍色色調(diào),這樣調(diào)整的好處在于:更深的藍色,讓NBA聯(lián)盟看起來更公司化。所以說,當一個公司或者一個APP設計采用藍色LOGO的時候,常常會讓人聯(lián)想到技術和創(chuàng)新。
四、藍色讓產(chǎn)品看起來更加值得信賴
更準確的來說,藍色會讓用戶更傾向于覺得“這就是我要的產(chǎn)品”,當這種感覺和品牌本身的運作和特質(zhì)結(jié)合在一起的時候,就能夠形成讓人信任的品牌性格了。戴爾、IBM、英特爾和PayPal都是利用技術來營造品牌信任感。藍色代表冷靜、平衡和智慧,許多金融服務類的企業(yè)也喜歡用這種顏色。
五、藍色對于色盲足夠友好
考慮到用戶群體中不乏有色盲,而占比最大的紅綠色色盲群體都能清晰地分辨出藍色。藍色是Facebook的主要色調(diào),因為它的創(chuàng)始人扎克伯格就是個色盲,如他所說:“于我而言藍色是我最容易辨認的色彩,所有的藍色我都能掌控”
總結(jié):藍色雖然是最安全的設計色,但不要隨便將藍色泛用在你的設計中,最重要的一點還是選擇最適合自己品牌的色彩!

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

用迪士尼動畫原則,提升UI動效體驗

用心設計

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

 

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

用迪士尼動畫原則,提升UI動效體驗

一、擠壓和拉伸

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

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

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

擠壓和拉伸被應用于側(cè)邊欄

二、預期動作

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

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

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

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

三、時間節(jié)奏

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

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

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

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

四、漸快與漸慢

在現(xiàn)實世界中,大多數(shù)物體都遵循著緩動運動規(guī)律。也就是說,物體的運動并不會瞬間開始或瞬間結(jié)束,就像一個物體自由落體,也是一開始很慢后面才變會變快。

左側(cè)的卡片是沒有緩動的,右側(cè)的是帶有緩動的,看起來會自然很多。

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

五、呈現(xiàn)方式

舞臺中的表演需要合適的編排才會精彩。也就是說,對象在場景中如何擺放,每個動畫又如何出現(xiàn),關乎演出的質(zhì)量。通過這種編排,能夠?qū)⒆⒁饬σ蜃钪匾慕巧?

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

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

六、弧形軌跡

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

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

通過對比,能夠發(fā)現(xiàn)右側(cè)的弧線運動軌跡會比左側(cè)的直線運動軌跡顯得更加自然。

七、附屬動作

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

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

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

八、夸張和吸引力

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

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

FAB 夸張的交互形式

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

九、跟隨動作和重疊動作

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

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

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

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

總結(jié)

界面中的每一次交互都必須在適當?shù)膱鼍爸芯脑O計,讓整個體驗更具沉靜感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗更加協(xié)調(diào)自然。

這些原則正在以不同的形式應用于當今的數(shù)字產(chǎn)品中,值得敬畏的是,30年前設計的一套規(guī)則到今天仍然適用。

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

汽車UI界面怎么做?來看特斯拉和Apple Carplay等高手的案例!

用心設計

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


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

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

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

特斯拉移動控制中心原型

uisdc-car-201610133

它為什么會讓人震驚?

當你想確定你是否已經(jīng)鎖好車,關上燈,或者把你的車鑰匙交給剛考完駕照的小屁孩的時候,你是否覺得自己是個偏執(zhí)狂?

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

車載控制面板用戶界面

uisdc-car-201610134

它為什么會讓人震驚?

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

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

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

特斯拉儀表界面概念版

uisdc-car-201610135

它為什么會讓人震驚?

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

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

遠程車輛健康測試與控制

uisdc-car-201610139

它為什么會讓人震驚?

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

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

uisdc-car-201610131

它為什么會讓人震驚?

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

Hudway增強現(xiàn)實顯示器

uisdc-car-201610138

它為什么會讓人震驚?

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

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

城市導覽汽車應用

uisdc-car-201610132

它為什么會讓人震驚?

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

Apple Carplay

uisdc-car-2016101310

它為什么會讓人震驚?

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

數(shù)字儀表板集群顯示器

uisdc-car-201610136

它為什么會讓人震驚?

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

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

特斯拉 iWatch UI 原型

uisdc-car-201610137

它為什么會讓人震驚?

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



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

總被說設計沒新意,如何提升?

用心設計


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




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

剛?cè)腴T的同學肯定都會一直這樣做。特別是在“多看”方面,很熱衷于去收集各種各樣不同的站點,譬如自己碰到最多的問題就是:“米田,你有什么好的設計網(wǎng)站推薦給我們?”這樣的問題,我每周都會被問到數(shù)十次之多。


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


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


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





圖片整理術,合適是什么?



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



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

那么經(jīng)典的一首歌,創(chuàng)作時間需要多久呢?

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

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

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

這就是做靈感創(chuàng)意的魅力所在。



回到一生所愛這首歌曲的創(chuàng)作過程,盧冠廷先生是怎么做到在一晚時間,創(chuàng)作出經(jīng)典的歌詞呢? 

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

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


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

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

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




持續(xù)建造你的靈感水庫




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


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

● 第一、找到坐標(建造地)。

● 第二、投入魚苗(商品)。

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

● 第四、每條魚苗都標記好(記賬)。


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




坐標



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

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

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

三常用的工具如下圖。

● Pinterest

● 花瓣

● Eagle

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

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

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

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

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

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

得到的結(jié)果類似這樣。

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

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

有興趣可以去看看。




投入



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


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




時效


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

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

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


網(wǎng)絡端整理:

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


本地端:

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




標記





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

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

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




案例:一小時10個設計參考



講了比較這么多內(nèi)容,我覺得應該舉一個案例,會更容易理解。


這種方法對快速想到多種關鍵字很有用,因為圖片往往需要通過關鍵字才能找到。這種方法叫做一小時10個設計參考。當然找到十個參考時間可以更短,最快只需要十分鐘就可以了。



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

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

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

簡單來說,先在左邊的三角形內(nèi)寫下與主題相關的資訊??梢岳斫鉃?,跟口香糖這個產(chǎn)品有關系的感受,都可以放在這個三角形里呈現(xiàn)。

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

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

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


● 清涼的音樂

● 變態(tài)的重金屬

● 頭發(fā)豎起來的溫柔

● 甜甜的色瞇瞇

● 透心涼的帥氣


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





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


解決辦法很簡單,當你每天去看100-200張設計參考圖片的時候,再來回答這個問題,相信不用我告訴你答案,你自己也有自己的判斷了。


這百張圖并不是來源于單一的網(wǎng)站,這就需要你根據(jù)自身習慣。篩選過程,與每個人的購物習慣一樣,沒有一個完全的標準的答案。試試這節(jié)課交給大家的創(chuàng)意思考法。做延伸思考時很有幫助。



最后,當看到足夠多的時候。就不會太依賴圖庫,進而能夠?qū)⒉煌脑剡M行拆解,形成屬于自己的原創(chuàng)東西。


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

UI設計中為什么插畫設計越來越流行 ?

用心設計

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

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


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


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



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


  • 頁面主題圖

  • 網(wǎng)頁首圖和Banner

  • 吉祥物和形象插畫

  • 博客文章配圖

  • 新用戶引導教程

  • 工具提示

  • 獎勵頁面和成就頁面

  • 游戲化設計的頁面

  • 通知和系統(tǒng)消息

  • 聊天表情

  • 講故事的輔助配圖

  • 信息圖

  • 營銷和廣告圖

  • 圖標和裝飾性內(nèi)容

  • 社交媒體頁面

  • 支持性內(nèi)容的頁面


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



1. 插畫是設計的原創(chuàng)性和藝術性的基礎


無論是印刷品、品牌設計還是UI界面,更加風格化的插畫能夠?qū)⒉煌娘L格和創(chuàng)意加入其中,在激烈的競爭中更容易因此脫穎而出。留下用戶才有轉(zhuǎn)化。



同樣的,在博客、新聞和Banner 中使用插畫,也是看準了插畫可以根據(jù)內(nèi)容進行深度定制的優(yōu)勢,這種微調(diào)能讓內(nèi)容更加統(tǒng)一一致,更加符合產(chǎn)品目標,借助色彩、角色、環(huán)境甚至暗藏的隱喻,來吸引特定的用戶。


2. 插畫是視覺觸發(fā)器,瞬間傳達大量信息


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


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

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

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

  • 圖片和插畫更容易打破文化和語言隔閡,傳遞內(nèi)容含義。

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

 

3. 插畫是標題和文本的重要支撐


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



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


4. 插畫更適宜呈現(xiàn)故事

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



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



5. 插畫獨有的情感吸引力


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



6. 插畫賦予設計以美學價值,更容易被接受


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



7. 插畫能讓品牌識別度更高


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



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



8. 數(shù)字插畫還能強化交互,應用在短視頻中


數(shù)字化的好處就在這里,通過不同的數(shù)字軟件,合理的處理之后,不僅能夠變成動態(tài)的,運用于視頻當中,還能夠作為微交互,強化產(chǎn)品的整體體驗。


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


Whizzly 這個動態(tài)圖標就是基于插畫,給一個創(chuàng)意分享社區(qū)所準備的。


9. 插畫的獨特性來自于其中的隱喻和引人入勝的視覺


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



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



10. 插畫讓用戶可以更快理解和操作


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

值得思考的問題

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

  • 目標受眾(身體能力,年齡,文化背景,教育水平等)

  • 產(chǎn)品的使用環(huán)境

  • 產(chǎn)品和內(nèi)容的在全球范圍內(nèi)和當?shù)氐膫鞑ニ?/span>

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

  • 插畫是否會讓人分心

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

為什么如今的APP UI設計如此的趨同?這也許是件好事!

用心設計

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




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

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

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

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

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

到底是怎么回事?

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


讓用戶更加關注內(nèi)容和結(jié)果

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

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

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

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


更一致意味著更好的可用性

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

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

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

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


設計不應止步于視覺

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

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

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

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

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


趨同的設計是否會扼殺創(chuàng)造力

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

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

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

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

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

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

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

如果我們僅僅將優(yōu)秀的設計局限于我們在屏幕上看到的內(nèi)容,未來更多的可能性,可能就止步于此了。

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

UI設計中如何配色?

用心設計

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


顏色跟其他事物一樣,使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色,您將獲得更好的效果。將顏色應用于設計項目中,要保持色彩平衡,您使用的顏色越多,越難保持平衡。


顏色不會增加設計品質(zhì) - 它只是加強了設計的品質(zhì)感

                                      --皮埃爾·波納德(Pierre Bonnard)




60–30–10 規(guī)則


室內(nèi)設計規(guī)則是一種永恒的裝飾技術,可以幫助您輕松地將配色方案放在一起。 60%+ 30%+ 10%的比例是為了保持顏色平衡。這個公式非常有用,因為它創(chuàng)造出一種平衡的感覺,并允許眼睛從一個焦點到另一個焦點舒適地移動。 使用也非常簡單。


60%是主色調(diào),30%是副色和10%用于強調(diào)色。


e1f458de0ea5a801219c77abf06a.jpg


墻面漆(60%),家具(30%),配飾(10%)


顏色的含義


幾個世紀以來,科學家已經(jīng)研究出某些顏色的生理效應。 除了美學,顏色也是情感交流的創(chuàng)造者。 顏色的含義可能因文化差異而不同。這就是為什么你看到時裝店鋪的設計是黑白配色。 他們希望看起來優(yōu)雅而高貴。


a18858de0ebca801219c77eecdb0.jpg


Asos采用純黑白配色搭配綠色按鈕設計,這種配色是有原因的。


  • 紅色:激情,愛,危險

  • 藍色:平靜,負責,安全

  • 黑色:神秘,優(yōu)雅,邪惡

  • 白色:純凈,沉默,清潔

  • 綠色:新生,新鮮,自然


首先考慮單色設計


在項目設計初期,我們通常傾向于嘗試不同的顏色進行調(diào)整,但這種行為會很快違背你的初衷,當你發(fā)現(xiàn)的時候,已經(jīng)花費了3個小時調(diào)整基礎色...這確實很誘人,但你應該學會避免這種態(tài)度。

相反,你應當專注于元素的間距和整體布局。它會節(jié)省你很多時間。 這種約束是非常有成效的。從另一方面講,它看起來并不乏味。如果你想讓整個作品看起來更好,嘗試不同的顏色選擇。


43da58de08aaa801219c7791a8c3.jpg


我在追波(dribbble)上的作品之一。簡約單色處理,專注于元素之間的使用。


避免使用灰色和黑色


我學到的最重要的顏色技巧之一是避免使用灰色等不飽和色彩。 在現(xiàn)實生活中,純灰色幾乎不存在。 黑色也是如此。

b6d358de08d0a801219c7750613e.jpg

這張圖片最黑的顏色不是#000,而是#0A0A10


始終記著給你的顏色增加飽和度。潛意識里會顯得更自然,為用戶所熟悉。


667258de08f5a801219c77147ee4.jpg


相信自然


最好的顏色組合來自大自然。 他們看起來總是很自然。 尋找顏色設計的解決方案,最好的辦法是調(diào)色板總是發(fā)生變化。


為了得到設計靈感,我們只需環(huán)顧四周。


975d58de0910a801219c7714bed0.jpg


保持對比


一些顏色相互融合,而其他顏色一起使用會發(fā)生沖突。 有一個明確的規(guī)則,想要了解不同顏色之間如何融合,最好的辦法是觀察一個色輪。 你應該知道這個方法,但是沒有必要動手操作。


f09d58de095fa801219c77f5485c.jpg


獲取靈感


當我們在談論UI參考時,dribbble是最佳選擇。它還具有通過顏色搜索的工具,所以當你想對其他設計師使用特定顏色進行視覺研究時,然后去這里:dribbble.com/colors


5ce458de097ba801219c77aa763e.jpg


視頻,平面廣告設計,室內(nèi)設計,時裝......有這么多鼓舞人心的地方可供收集。如果說根本就沒有配色參考,那一定是懶惰的原因,把那些調(diào)色板保存下來,一切看起來都非常有趣。


通常我喜歡從KPOP(韓國流行音樂)視頻剪輯中選取顏色,他們看起來很華麗。


配色工具推薦


為了方便起見,我搜集了一些最好的配色工具可供選擇,在2017年獲取調(diào)色板,他們會為您節(jié)省大量的時間。



Coolors.co


這個絕對是我最喜歡的取色工具。 您只需鎖定所選顏色并按空格即可生成調(diào)色板。 Coolors還可讓您上傳圖像并從中調(diào)出調(diào)色板。 很酷的事情是,你不僅僅是一個結(jié)果,而是有一個選擇器,允許你修改參考點。


a68a58de0c65a801219c77885e56.jpg



Kuler


這款Adobe旗下的配色工具已經(jīng)和我們在一起了很長時間。它在瀏覽器和桌面版本中都可用。 如果您使用的是桌面版本,則可以將配色方案導出到Photoshop中。


296e58de0c83a801219c77fbb98e.jpg


Paletton


它類似于Kuler,但不同的是,您不僅限于5個色調(diào)。 當您擁有原色并希望使用其他色調(diào)時,您可以使用這款很棒的工具。


92ba58de0c94a801219c77d2592b.jpg




Designspiration.net


試想一下,你有自己的配色的想法,但你要看到幾種顏色組合的例子。 Designspiration是一個偉大的工具。 您可以選擇最多5種顏色,并搜索符合您的查詢的圖像。 真的很好,不僅用于找到具有特定調(diào)色板的圖像,還可以在設計中實現(xiàn)它們。


52a358de09e9a801219c774d8bb5.jpg


ShutterstockLab Spectrum


你可能會問:如果我想用我所選擇的顏色搜索照片? 那么,Shutterstock有一個叫做Spectrum的工具,你可以用特定的語氣搜索照片。 您甚至不需要訂閱,因為具有水印的小預覽圖像將足以生成調(diào)色板。


cc6c58de0a22a801219c77af34c9.jpg


Tineye Multicolr


但是,如果你想搜索照片中的顏色混合,甚至指定每個顏色的數(shù)量,那么Tineye會幫助你。 本網(wǎng)站使用了來自Flickr千萬張共享圖像的數(shù)據(jù)庫。

64dd58de0aa0a801219c77382a00.jpg



最后的想法


掌握配色技巧是一件苦差事,特別是在數(shù)字時代。 上面提到的技巧將會減輕工作中尋找正確顏色方案的困難度。 學習創(chuàng)造令人驚嘆的配色方案,最佳方法是練習,讓自己有所幫助,用玩的心態(tài)去使用顏色。


以上是本篇文章全部內(nèi)容,感謝您的閱讀,希望對您設計產(chǎn)生幫助。



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

UI新手的自我發(fā)展

藍藍設計的小編

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

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

單手操作不方便?來看這兩個新穎的交互方式是怎么做的!

周周

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

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

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

會員中心如何設計,用戶才會買單?

周周

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

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

設計前,先明確會員中心的設計目的是什么?

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

2. 功能特權對比(通過特權的對比,讓用戶選擇更高的等級會員)

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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔