如何提升UI設(shè)計(jì)的高級(jí)感

1衡便、視覺(jué)元素

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天,你會(huì)發(fā)現(xiàn)所有的App越來(lái)越像口蝠,似乎是同一套模版設(shè)計(jì)出來(lái)的產(chǎn)品。而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重津坑,使得設(shè)計(jì)不精致妙蔗,產(chǎn)品沒(méi)有氣質(zhì)和品牌感喊巍。一個(gè)App設(shè)計(jì)是否精致夹孔,是否富有設(shè)計(jì)感,在于它的細(xì)節(jié)猎提,這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候穆役,要從細(xì)微之處著手寸五,從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。本節(jié)總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)耿币,一起來(lái)學(xué)習(xí)梳杏。


1.1 使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候,最常見(jiàn)的錯(cuò)誤莫過(guò)于過(guò)度依賴字體大小差異來(lái)營(yíng)造對(duì)比。單純使用字體大小對(duì)比十性,所營(yíng)造的對(duì)比并不夠叛溢,嘗試結(jié)合色彩和字重來(lái)營(yíng)造更好的對(duì)比效果。

每種顏色都有一個(gè)視覺(jué)權(quán)重劲适,這有助于在內(nèi)容中建立層次結(jié)構(gòu)楷掉。通過(guò)使用顏色的深淺,為元素賦予不同的重要性霞势。如果可以的話烹植,你甚至可以采用兩到三種顏色:

1.主要內(nèi)容使用深灰色(諸如標(biāo)題,但是不要用純黑)

2.次要內(nèi)容使用灰色(比如商品介紹)

3.輔助性內(nèi)容采用淺灰色(比如發(fā)布日期)

類似的愕贡,在UI設(shè)計(jì)的時(shí)候刊橘,通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感:

1.大多數(shù)的文本采用正常的字重(400到500,具體取決于字體)

2.對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重(600到700颂鸿,具體取決于字體)

▲主標(biāo)題字重為600,其他標(biāo)綠點(diǎn)的文字字重都為400

應(yīng)當(dāng)盡量不要讓正文部分字重低于400攒庵,因?yàn)檫@一部分字體本身尺寸已經(jīng)較小嘴纺,低于400會(huì)使得可讀性不佳。如果你依然需要降低字重浓冒,那么不妨讓字體色彩更淺一點(diǎn)栽渴,或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體稳懒。

灰色文字在無(wú)彩/彩色背景下要分開(kāi)處理

不要在有色背景上使用灰色的文本闲擦,在白色背景下,將黑色的文本改成灰色(或者在黑色背景下使用灰色文本)场梆,是不錯(cuò)的淡化其視覺(jué)效果的做法墅冷。

但是在彩色背景下,想要降低和背景色之間的對(duì)比或油,通常有兩種方法:

一是降低白色文本的不透明度寞忿;二是讓文本逐步接近背景色,而不是改為灰色顶岸。

▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度腔彰,右圖為和背景同色相高明度的顏色

其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí),大面積的深色粗體字會(huì)給人一種沉重感辖佣,而且很跳躍霹抛。通過(guò)選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個(gè)問(wèn)題,使文字更容易被識(shí)別卷谈。


1.2 統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色杯拐,再調(diào)整色調(diào)和顏色深淺來(lái)增加均衡。設(shè)計(jì)時(shí)避免用過(guò)多的顏色。如果項(xiàng)目允許藕施,只需使用固定的色板寇损,通過(guò)調(diào)整基礎(chǔ)色的飽和度和明度,利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性裳食。


1.3 干凈的陰影

陰影是UI設(shè)計(jì)中最常見(jiàn)的視覺(jué)表現(xiàn)手法矛市,它可以增加元素的深度,使其從背景中脫穎而出诲祸,引起用戶的注意力浊吏,同時(shí)也能增強(qiáng)畫面的視覺(jué)層次感。相比于采用大范圍的擴(kuò)散模糊陰影救氯,使用微妙的垂直偏移陰影效果更明顯找田,更自然,它模擬了最常見(jiàn)的光源特征着憨,光線從上往下照下來(lái)所營(yíng)造的陰影效果墩衙。

這種輕柔的陰影呈現(xiàn)出的干凈,增加了畫面的精致甲抖。如果陰影的范圍太小或顏色太深漆改,位置也沒(méi)有偏移,而是聚集在元素的四周准谚,就會(huì)讓畫面更加扁平挫剑,讓視覺(jué)變得厚重,呈現(xiàn)出不精致的畫面感柱衔。

陰影不一定是黑色的樊破,還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調(diào)一致唆铐,因此呈現(xiàn)出十分融洽的畫面感哲戚。在UI設(shè)計(jì)中,這種手法不宜過(guò)多使用艾岂,否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂惫恼。


1.4 個(gè)性的圖標(biāo)設(shè)計(jì)

合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo),而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)澳盐。我們能否在追求大小一致祈纯,圓角一致,線寬一致和配色一致的同時(shí)叼耙,為它的視覺(jué)表現(xiàn)力加入更多的創(chuàng)意呢腕窥?例如下面這組圖標(biāo)設(shè)計(jì),無(wú)論是在圖形上的創(chuàng)新筛婉,還是顏色搭配上都呈現(xiàn)出無(wú)與倫比的創(chuàng)意簇爆。

標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用癞松,它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺(jué)風(fēng)格。通常入蛆,大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式(默認(rèn)灰色响蓉,選中填充品牌色),這樣的設(shè)計(jì)太普通哨毁,太常見(jiàn)了枫甲。要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性,可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺(jué)表現(xiàn)扼褪,例如給圖標(biāo)加上背景和表情想幻,即顯得生動(dòng)有趣,又增加了用戶的好感话浇,給人留下深刻的印象脏毯。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來(lái)的流行趨勢(shì),看上去十分精致幔崖、華麗食店,但是看久了會(huì)讓人產(chǎn)生輕微的視覺(jué)疲勞,同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本赏寇。一般在外賣美食類應(yīng)用中比較常見(jiàn)吉嫩。


1.5 Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見(jiàn)的控件之一,它源自Material Design的設(shè)計(jì)規(guī)范√6現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開(kāi)始使用這種導(dǎo)航欄樣式來(lái)進(jìn)行設(shè)計(jì),而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見(jiàn)了刻伊。

在視覺(jué)表現(xiàn)形式上露戒,Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài),它的設(shè)計(jì)較為簡(jiǎn)單捶箱,通常是使用一組文字標(biāo)簽智什,通過(guò)顏色或在標(biāo)簽下加上小長(zhǎng)條來(lái)區(qū)分兩者的狀態(tài)。因?yàn)樗?jiǎn)單丁屎,卻越難設(shè)計(jì)出彩荠锭,要發(fā)揮極大的設(shè)計(jì)想象力,跳脫出設(shè)計(jì)規(guī)范的限制晨川,才能找到完美的方案证九。例如蝦米音樂(lè)的Tab選中態(tài)是一段音頻波線,再配合文字的大小對(duì)比共虑,一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來(lái)了愧怜。

我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個(gè)絕佳的來(lái)源妈拌。從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺(jué)富豪作為Tab選中態(tài)的小長(zhǎng)條拥坛,這樣就建立起視覺(jué)上的聯(lián)系,讓用戶產(chǎn)生由內(nèi)而外的一致感受。例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上猜惋,既讓界面視覺(jué)獨(dú)一無(wú)二丸氛,又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。


1.6 無(wú)框設(shè)計(jì) 去繁從簡(jiǎn)

在UI設(shè)計(jì)中著摔,有許多的裝飾元素缓窜,如卡片的邊框、列表的分割線等梨撞,雖然邊框雹洗,分割線是分隔兩個(gè)元素的好辦法,但是它不是唯一的方法卧波,使用過(guò)多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低时肿,或多或少都會(huì)干擾用戶瀏覽的視線,讓信息內(nèi)容失去注意力港粱,因此可以減少不必要的裝飾元素螃成。我們可以通過(guò)以下幾個(gè)方法來(lái)劃分元素的視覺(jué)層次,讓畫面變得干凈查坪,整齊:


使用陰影

陰影同樣可以營(yíng)造出邊界感寸宏,而且相比邊框分割線更加微妙,并不會(huì)顯得突兀偿曙,不會(huì)分散用戶的注意力氮凝,讓內(nèi)容更聚焦。


使用不同的背景色來(lái)區(qū)分

通常望忆,相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分罩阵。所以,你所需要做的就是在不同的區(qū)塊采用不同的背景色启摄,并且嘗試刪除分割線稿壁,因?yàn)槟愀静恍枰?/p>


增加額外的留白

創(chuàng)建元素之間的分離效果,并不一定要通過(guò)線框來(lái)表現(xiàn)歉备,只要增加留白傅是,讓它們分隔開(kāi)就行了。通過(guò)留白和間距來(lái)實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法蕾羊。


1.7 統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素喧笔,那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影龟再,它代表著用戶溃斋,因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。如果圖形擁有獨(dú)特的外觀吸申,如橢圓矩形梗劫,也可以作為視覺(jué)符號(hào)的一種享甸,延續(xù)到其他界面中,成為圖形或按鈕的外觀梳侨。這樣蛉威,整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來(lái)了,給用戶始終如一的一致感走哺。


1.8 符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體蚯嫌,可以與產(chǎn)品的定位相吻合,傳遞給用戶正確的情感意識(shí)丙躏。雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求择示。但會(huì)出現(xiàn)一個(gè)問(wèn)題就是,系統(tǒng)字體的普適性并沒(méi)有什么特色晒旅,在一些特定的情境下就顯得收效甚微栅盲。例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來(lái)傳遞力量、爆發(fā)力废恋、速度的感覺(jué)谈秫,換成系統(tǒng)字體后,整體感覺(jué)在氣勢(shì)上就變?nèi)趿撕芏唷?/p>


1.9 第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸鱼鼓,他可以減輕用戶注冊(cè)的時(shí)間成本拟烫。通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口,這也是設(shè)計(jì)師最常忽略的內(nèi)容迄本,往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置硕淑,沒(méi)有針對(duì)它們?cè)僭O(shè)計(jì)。一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過(guò)任何的細(xì)節(jié)嘉赎,我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)置媳,對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。


1.10 圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì)曹阔,能帶給用戶如沐春風(fēng)的視覺(jué)享受半开,它非常重要隔披。我們經(jīng)吃叻荩看到文字疊加在圖片背景上的設(shè)計(jì)樣式,為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾奢米,通常的做法是疊加半透明度的黑色蒙版抓韩,讓白色文字清晰可見(jiàn),但這不是最優(yōu)的辦法鬓长。我們可以從圖片中提取主色調(diào)用于疊加背景的填充色谒拴,這樣就使文字、色塊和圖片融入到一起了涉波,畫面變得高級(jí)和富有設(shè)計(jì)感英上。


1.11 提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒炭序,高品質(zhì)的圖片給人愉悅的視覺(jué)享受,產(chǎn)生美好的聯(lián)想苍日。而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感惭聂。在App設(shè)計(jì)中,一張漂亮的圖片從收集到上線相恃,需要經(jīng)過(guò)裁剪辜纲,調(diào)色等過(guò)程才能被使用。即使是普通的商品圖片拦耐,我們將它摳圖后調(diào)整成統(tǒng)一大小耕腾,再加上干凈的背景,就能立刻提升商品的美感杀糯,界面視覺(jué)也會(huì)變得美觀扫俺、整潔。


1.12 卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中火脉,卡片式設(shè)計(jì)已經(jīng)是一種非常常見(jiàn)的設(shè)計(jì)形式牵舵,它有利于信息分層和整合,劃分出更加清晰的組織結(jié)構(gòu)倦挂,實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理畸颅,提高空間利用率。同時(shí)卡片式設(shè)計(jì)通常很依賴視覺(jué)元素方援,很強(qiáng)的視覺(jué)元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)没炒,也是提升設(shè)計(jì)品質(zhì)感的良方。


2犯戏、情感化設(shè)計(jì)

心理學(xué)認(rèn)為送火,情感是人對(duì)客觀事物是否滿足自己的需求而產(chǎn)生的態(tài)度體驗(yàn)。只有當(dāng)產(chǎn)品觸及到用戶的內(nèi)心時(shí)先匪,使他產(chǎn)生情感的變化种吸,那么產(chǎn)品便不再冷冰冰,他透過(guò)眼前的東西呀非,看到的是設(shè)計(jì)師為了他的使用體驗(yàn)坚俗,對(duì)每一個(gè)魔鬼細(xì)節(jié)的用心琢磨,人們會(huì)產(chǎn)生愉快岸裙、喜愛(ài)和幸福的情感猖败。情感化設(shè)計(jì)并不是轟轟烈烈,有時(shí)候僅僅一句文案降允、一幅插圖恩闻、一個(gè)動(dòng)畫就能打動(dòng)人心,使用戶獲得愉悅的使用體驗(yàn)剧董。讓設(shè)計(jì)變得高級(jí)不僅僅是視覺(jué)層面幢尚,這些簡(jiǎn)單而美好的設(shè)計(jì)細(xì)節(jié)充滿了積極情緒破停,它是滿足產(chǎn)品的功能性和易用性之后,追求更高層次的目標(biāo)尉剩。


2.1 提示性文字

語(yǔ)言是情感化設(shè)計(jì)最直接的利器辱挥,擬人化的對(duì)白相比冰冷的話語(yǔ)更能獲得用戶的好感,賦予產(chǎn)品的新的生命力边涕。例如App那些push推送通知晤碘,因?yàn)橛脩裘刻焓盏降腜USH實(shí)在是太多了,早已心如止水功蜓!這個(gè)時(shí)候园爷,你就需要一條成本低、效率高的PUSH文案式撼,去撩動(dòng)用戶主子們的心童社。將原本對(duì)用戶的打擾變成一種逗趣,讓人看到會(huì)心一笑著隆。


2.2 下拉刷新

下拉刷新是用戶在App使用中經(jīng)常進(jìn)行的操作扰楼,常見(jiàn)的下拉刷新設(shè)計(jì)是圖標(biāo)加文字的形式,這種設(shè)計(jì)簡(jiǎn)單美浦、直觀弦赖,但毫無(wú)設(shè)計(jì)感,不能引發(fā)用戶任何的情緒浦辨。

下拉刷新是一種臨時(shí)狀態(tài)蹬竖,豐富它的設(shè)計(jì)細(xì)節(jié)不會(huì)造成與產(chǎn)品界面的格格不入,相反流酬,一個(gè)富有設(shè)計(jì)感的下拉刷新設(shè)計(jì)能讓產(chǎn)品獲得用戶的好感币厕。例如uc頭條在下拉刷新時(shí)會(huì)蹦出一只奔跑的小鹿,暗示正在快馬加鞭的加載新內(nèi)容芽腾,小鹿形象延續(xù)了品牌logo旦装。作為資訊類產(chǎn)品,內(nèi)容更新速度至關(guān)重要摊滔,奔跑的小鹿正好隱喻了這一點(diǎn)阴绢。用戶也在這種快樂(lè)的情緒中對(duì)產(chǎn)品產(chǎn)生好感,瞬間就讓下拉刷新變得生動(dòng)有趣惭载。


2.3 頭像設(shè)計(jì)

個(gè)人中心頁(yè)與用戶信息密切相關(guān)旱函,用戶的虛擬形象在這里得以展現(xiàn)响巢,常見(jiàn)的設(shè)計(jì)是一個(gè)用戶頭像加登陸文字的形式描滔,這種默認(rèn)的頭像設(shè)計(jì)無(wú)法得到用戶的認(rèn)同感。

現(xiàn)在很多的產(chǎn)品已經(jīng)放棄了死板的默認(rèn)頭像踪古,給用戶更多的選擇含长。賦予產(chǎn)品一些人格魅力券腔,可以讓產(chǎn)品富有生命力,消除人機(jī)界面的冰冷交互拘泞,幫助用戶和產(chǎn)品建立友好的聯(lián)系纷纫。例如美團(tuán)外賣和躺平,它們各自的身份都代表了產(chǎn)品的氣質(zhì)和用戶的屬性陪腌,讓用戶產(chǎn)生一種身份的認(rèn)同感辱魁。


2.4 缺省頁(yè)化解負(fù)面情緒

通常狀態(tài)是,當(dāng)前頁(yè)面沒(méi)有內(nèi)容或無(wú)網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁(yè)面诗鸭。常見(jiàn)的設(shè)計(jì)是圖標(biāo)加提示文字的形式染簇,這種簡(jiǎn)陋的設(shè)計(jì)會(huì)給用戶心理造成很大的落差,陷入負(fù)面情緒中强岸。情感化設(shè)計(jì)在此時(shí)就可發(fā)揮巨大的作用锻弓,它通過(guò)設(shè)計(jì)手段來(lái)減輕用戶在看到一個(gè)毫無(wú)內(nèi)容的界面時(shí)所產(chǎn)生的挫敗感。 設(shè)計(jì)師可發(fā)揮的空間很大蝌箍,根據(jù)產(chǎn)品屬性和品牌延展圖形青灼,結(jié)合動(dòng)效或插畫等情感化設(shè)計(jì),可以很好的豐富頁(yè)面內(nèi)容妓盲。例如躺平的空白頁(yè)呈現(xiàn)出一種賤萌的場(chǎng)景杂拨,讓用戶會(huì)心一笑,使產(chǎn)品充滿了趣味性悯衬。


2.5 標(biāo)簽欄微動(dòng)效

情感化設(shè)計(jì)變得越來(lái)越豐富扳躬,圖標(biāo)設(shè)計(jì)上升至可以展示動(dòng)畫效果。通過(guò)動(dòng)效的使用甚亭,標(biāo)簽欄切換變得不再死板贷币。用戶在頻繁切換頁(yè)面時(shí),不再覺(jué)得單調(diào)亏狰。精心設(shè)計(jì)的動(dòng)態(tài)效果役纹,能夠緩解用戶等待時(shí)焦躁的心情,從心理上縮短用戶等待時(shí)長(zhǎng)暇唾,讓品牌更加深入人心促脉。


2.6 模擬用戶行為

如果一個(gè)產(chǎn)品可以模擬用戶的行為,將用戶代入真實(shí)的情境中策州,用戶就會(huì)對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感瘸味。例如「潮汐」會(huì)根據(jù)時(shí)間場(chǎng)景和季節(jié)變化,播放不同的背景音樂(lè)來(lái)營(yíng)造氛圍够挂。雨聲旁仿、雷聲、風(fēng)聲孽糖、潮水聲等讓人時(shí)刻感受到身臨其境的情境枯冈。

情感化設(shè)計(jì)可以拉近用戶與產(chǎn)品之間的距離毅贮,在更深的層面體現(xiàn)出對(duì)人性的關(guān)懷,為人們帶去情感上的愉悅和感動(dòng)尘奏。洞悉用戶的行為滩褥,換位思考去滿足用戶的需求,情感交流就產(chǎn)生了炫加。例如當(dāng)你截屏了一張圖片瑰煎,打開(kāi)微信對(duì)話框時(shí)就會(huì)自動(dòng)顯示這張圖片,提前預(yù)知了你發(fā)截圖的需求俗孝。

再例如很多觀眾都習(xí)慣了在電影結(jié)尾等彩蛋的習(xí)慣丢间,因?yàn)楹芏鄷r(shí)候坐在影院等彩蛋卻等來(lái)沒(méi)有彩蛋的結(jié)果只能白白浪費(fèi)了時(shí)間。在「淘票票」上購(gòu)買電影票時(shí)驹针,你會(huì)發(fā)現(xiàn)影片詳情頁(yè)會(huì)有彩蛋提醒烘挫,告知你電影是否有彩蛋且彩蛋會(huì)出現(xiàn)在影片的什么位置。有了這個(gè)提示信息柬甥,就不必再為了不確定的彩蛋期待浪費(fèi)時(shí)間啦饮六。


2.7 有趣的細(xì)節(jié)設(shè)計(jì)

俗話說(shuō):有趣的靈魂萬(wàn)里挑一,可見(jiàn)有趣是可以引發(fā)交流進(jìn)而讓人們產(chǎn)生積極的情緒苛蒲。 在UI設(shè)計(jì)中卤橄,有些有趣的設(shè)計(jì)是隱形的,需要用戶自己去發(fā)現(xiàn)臂外,當(dāng)用戶找到這顆彩蛋時(shí)窟扑,就會(huì)獲得一份喜悅和樂(lè)趣,增強(qiáng)用戶對(duì)產(chǎn)品的探知欲漏健。例如在電腦端打開(kāi)B站的鬼畜區(qū)長(zhǎng)按這個(gè)返回圖標(biāo)10秒左右嚎货,你會(huì)打開(kāi)鬼畜區(qū)的新世界(⊙o⊙)(友情提示:記得戴上耳機(jī)或調(diào)小音量)其實(shí)長(zhǎng)按「返回」10秒后網(wǎng)頁(yè)下方會(huì)出現(xiàn)一條黑框提示「嘗試輸入字母,發(fā)現(xiàn)鬼畜秘密」蔫浆。按照提示乖乖輸入字母就會(huì)出現(xiàn)鬼畜明星劃過(guò)你的屏幕殖属!

有些有趣的設(shè)計(jì)又是顯性的,目的是讓用戶與產(chǎn)品引發(fā)交流從而產(chǎn)生積極的情緒瓦盛。例如成為優(yōu)酷視頻會(huì)員洗显,不僅可以尊享豐富的影視資源,還能讓自己的ID在發(fā)彈幕時(shí)使用劇集相關(guān)角色的頭像原环。帶角色扮演頭像的彈幕挠唆,讓發(fā)言更有劇集代入感。這個(gè)彩蛋的設(shè)置一方面強(qiáng)化了會(huì)員身份的尊貴感與特權(quán)性嘱吗,一方面也豐富了彈幕區(qū)的多樣化玄组,可謂一舉兩得了。

總的來(lái)說(shuō):UI設(shè)計(jì)的“高級(jí)感”意味著在視覺(jué)層面要從細(xì)微之處著手,創(chuàng)造出精致富有設(shè)計(jì)感的畫面巧勤;另一方面要從情感化設(shè)計(jì)出發(fā),使用戶與產(chǎn)品產(chǎn)生情感上的共鳴弄匕,獲得更高層次的使用體驗(yàn)颅悉。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市迁匠,隨后出現(xiàn)的幾起案子剩瓶,更是在濱河造成了極大的恐慌,老刑警劉巖城丧,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件延曙,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡亡哄,警方通過(guò)查閱死者的電腦和手機(jī)枝缔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蚊惯,“玉大人愿卸,你說(shuō)我怎么就攤上這事〗匦停” “怎么了趴荸?”我有些...
    開(kāi)封第一講書人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)宦焦。 經(jīng)常有香客問(wèn)我发钝,道長(zhǎng),這世上最難降的妖魔是什么波闹? 我笑而不...
    開(kāi)封第一講書人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任酝豪,我火速辦了婚禮,結(jié)果婚禮上精堕,老公的妹妹穿的比我還像新娘寓调。我一直安慰自己,他們只是感情好锄码,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布夺英。 她就那樣靜靜地躺著,像睡著了一般滋捶。 火紅的嫁衣襯著肌膚如雪痛悯。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 50,084評(píng)論 1 291
  • 那天重窟,我揣著相機(jī)與錄音载萌,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛扭仁,可吹牛的內(nèi)容都是我干的垮衷。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼乖坠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼搀突!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起熊泵,我...
    開(kāi)封第一講書人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤仰迁,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后顽分,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體徐许,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年卒蘸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了雌隅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缸沃,死狀恐怖澄步,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情和泌,我是刑警寧澤村缸,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布,位于F島的核電站武氓,受9級(jí)特大地震影響梯皿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜县恕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一东羹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧忠烛,春花似錦属提、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至师坎,卻和暖如春恕酸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背胯陋。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工蕊温, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留袱箱,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓义矛,卻偏偏與公主長(zhǎng)得像发笔,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子凉翻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • 一了讨、使用顏色深淺構(gòu)建層次結(jié)構(gòu) 在使用文本進(jìn)行樣式控制時(shí),除了僅僅依靠字體大小差異來(lái)營(yíng)造層次結(jié)構(gòu)以外噪矛。還可以結(jié)合字重...
    老麻線閱讀 680評(píng)論 0 5
  • 品牌基因圖標(biāo)設(shè)計(jì)技巧 提取品牌圖形: 使用一個(gè)讓人印象深刻的品牌圖形作為首頁(yè)標(biāo)簽圖標(biāo)是最能讓人感知的 提取設(shè)計(jì)語(yǔ)言...
    suzimu蘇蘇閱讀 594評(píng)論 0 0
  • 對(duì)于每個(gè)網(wǎng)頁(yè)設(shè)計(jì)師而言艇挨,在設(shè)計(jì)過(guò)程中總會(huì)碰到需要作出設(shè)計(jì)決策的時(shí)候。也許你的公司并沒(méi)有全職設(shè)計(jì)師韭赘,而需求上則要求設(shè)...
    藍(lán)夢(mèng)UI設(shè)計(jì)閱讀 428評(píng)論 0 1
  • 推薦指數(shù): 6.0 書籍主旨關(guān)鍵詞:特權(quán)缩滨、焦點(diǎn)、注意力泉瞻、語(yǔ)言聯(lián)想脉漏、情景聯(lián)想 觀點(diǎn): 1.統(tǒng)計(jì)學(xué)現(xiàn)在叫數(shù)據(jù)分析,社會(huì)...
    Jenaral閱讀 5,705評(píng)論 0 5
  • 昨天袖牙,在回家的路上侧巨,坐在車?yán)镉圃沼圃盏乜粗摹度龉衬墓适隆罚冶焕锩娴膬?nèi)容深深吸引住了鞭达,盡管上學(xué)時(shí)...
    夜闌曉語(yǔ)閱讀 3,783評(píng)論 2 9