進(jìn)入2016年后,我們會(huì)發(fā)現(xiàn)行業(yè)在體驗(yàn)設(shè)計(jì)上出現(xiàn)了很多新的元素,從我們平時(shí)經(jīng)常瀏覽的設(shè)計(jì)社區(qū)中,這些新元素出現(xiàn)的頻率越來(lái)越高,比如彩色投影、雙色調(diào)漸變?cè)O(shè)計(jì)等,我們也慢慢開(kāi)始接受這些新變化,并且逐步應(yīng)用到我們的產(chǎn)品中。這篇文章的初衷是希望能更系統(tǒng)更全面地梳理出一份流行趨勢(shì)的分析,能對(duì)我們平時(shí)的工作能產(chǎn)生一定的指導(dǎo)作用。本文作者是蘑菇街的設(shè)計(jì)團(tuán)隊(duì),
一、使用模糊背景 模糊背景和iOS毛玻璃效果非常的相似,也符合時(shí)下流行的扁平化和現(xiàn)代風(fēng)的設(shè)計(jì),設(shè)計(jì)效果十分的賞心悅目,可以很好的和幽靈按鈕以及時(shí)下流行的元素搭配起來(lái),提升用戶(hù)體驗(yàn)。以淘寶電影為例,采用的是虛化電影海報(bào)作為背景,這樣做的好處是每一個(gè)頁(yè)面的頭部效果都不一樣,這樣的排版視覺(jué)效果更佳,同樣也突出電影信息等主要內(nèi)容。從設(shè)計(jì)的角度來(lái)看,這也很容易實(shí)現(xiàn),讓內(nèi)容模塊變的清晰,同時(shí)可以規(guī)避復(fù)雜的設(shè)計(jì),還可以降低設(shè)計(jì)成本,花最少的時(shí)間達(dá)到最大的效果。
二、大字體的使用 每個(gè)APP都希望用戶(hù)停留的時(shí)間更長(zhǎng),從各方面去爭(zhēng)取用戶(hù)的注意力,而更大更醒目的字體運(yùn)用剛好符合這一需求。當(dāng)前的市場(chǎng)情況,大屏手機(jī)是主流,這一點(diǎn)是非常重要的使用背景。大字體在移動(dòng)端上呈現(xiàn),會(huì)賦予界面以層次,提高特定元素的視覺(jué)重量,給用戶(hù)眼前一亮的感覺(jué)。而且現(xiàn)在的界面設(shè)計(jì)趨勢(shì)更有雜志風(fēng)的方向,大字體,模塊化,用圖片替代色塊作為背景。其次字體夠大,夠優(yōu)雅,夠獨(dú)特,同時(shí)也能提升頁(yè)面的氣質(zhì)和特色,很多用戶(hù)會(huì)因?yàn)轫?yè)面好看,符合審美,就會(huì)決定留下來(lái),即使功能并不很滿(mǎn)足需求。這對(duì)很多app提升用戶(hù)粘性是一個(gè)重要發(fā)方向。 以蘑菇街產(chǎn)品uni為例子,文章詳情頁(yè)原來(lái)的標(biāo)題和正文字體分別是36px和28px,改動(dòng)后的大小分別是56px和34px,整體頁(yè)面的信息密度降低了,同時(shí)字體變大閱讀效率也有所提高。
三、用空間來(lái)間隔 通過(guò)線(xiàn)條和分隔符來(lái)進(jìn)行劃分內(nèi)容區(qū)塊是之前所流行的處理方式,但是這樣界面的元素會(huì)很擁擠。通過(guò)空白空間來(lái)劃分區(qū)塊能讓界面更加通透,構(gòu)建更加優(yōu)秀更干凈的界面。移除分割線(xiàn)和分隔符可以為界面提供更加現(xiàn)代化的外觀,專(zhuān)注于功能,比如可以將圖片和字體放大,提供更加清晰的層級(jí)劃分和更優(yōu)的易用性。通過(guò)空間間隔來(lái)劃分區(qū)塊是一種非干擾性的設(shè)計(jì),更匹配時(shí)下流行的風(fēng)格和設(shè)計(jì)的需求。主打圖片社交的網(wǎng)站Pinterest,在最新的一次改版中直接把卡片的背景去掉了,這是一種非常大膽的嘗試,但是效果也是明顯的,整體圖片內(nèi)容更加清晰和通透了。 同樣還是舉uni的例子,為了讓不同模塊之間的區(qū)分更明顯,一般我們會(huì)設(shè)置背景為灰色,內(nèi)容為白色卡片,這樣可以更突出內(nèi)容。新的設(shè)計(jì)我嘗試把灰色背景去掉,同時(shí)加強(qiáng)了模塊的標(biāo)題,通過(guò)間距來(lái)劃分,內(nèi)容元素也并沒(méi)有因?yàn)闆](méi)有灰色背景的區(qū)分而變的混亂,界面的整體感變強(qiáng)。
四、微交互 圍繞特定的用例,通過(guò)微妙細(xì)小的動(dòng)效或者交互強(qiáng)化它的視覺(jué)效果,通常能達(dá)到意想不到的效果,而且也能讓用戶(hù)感受到產(chǎn)品設(shè)計(jì)者的用心。 當(dāng)你完成某個(gè)過(guò)程的時(shí)候,比如收藏某個(gè)條目、彈出提示框,這個(gè)時(shí)候微妙的動(dòng)畫(huà)會(huì)強(qiáng)化這些動(dòng)作,將這些控件同其他的元素區(qū)分開(kāi)來(lái)。這些微交互能夠作為信號(hào)提示,來(lái)提醒用戶(hù)動(dòng)作和任務(wù)的完成,它們不僅簡(jiǎn)單而且自然,有時(shí)候我看到這樣趣味性的交互還會(huì)停留一會(huì)多查看幾次。即刻點(diǎn)擊其中一條沒(méi)有鏈接的內(nèi)容,如果沒(méi)有跳轉(zhuǎn),該條內(nèi)容會(huì)左右晃動(dòng),頂部會(huì)出現(xiàn)提示的文案條,這種設(shè)計(jì)給人的感覺(jué)非常自然,沒(méi)有干擾;豆瓣查看大圖,按住圖片移動(dòng)的時(shí)候會(huì)顯示背景,可以任意滑動(dòng),松開(kāi)的時(shí)候就返回到小圖模式; Uber點(diǎn)擊查看司機(jī)信息的時(shí)候,地點(diǎn)信息會(huì)隱藏,司機(jī)照片和汽車(chē)信息會(huì)分開(kāi)展示,查看完又會(huì)收起來(lái),界面使用效率很高,動(dòng)畫(huà)過(guò)渡很自然。
五、雙色調(diào)設(shè)計(jì) 扁平化設(shè)計(jì)占據(jù)主流的時(shí)候,漸變的設(shè)計(jì)手法就很少出現(xiàn)了,但是看最近的設(shè)計(jì)圈的作品,發(fā)現(xiàn)漸變色被越來(lái)越多的設(shè)計(jì)師們重新啟用了,漸變色設(shè)計(jì)有很多好處,其中可以調(diào)節(jié)過(guò)度使用的圖像和元素,為畫(huà)面添加有趣的元素,幫助完善視覺(jué)表現(xiàn)以吸引更多的用戶(hù)。其次就是雙色調(diào)的使用,雙色漸變是漸變?cè)O(shè)計(jì)中很重要的組成部分,它比同類(lèi)色漸變的視覺(jué)效果更多突出。稍加注意就會(huì)發(fā)現(xiàn),雙色漸變已經(jīng)占據(jù)漸變色的主流了,可以讓頁(yè)面層次感更豐富,突出頁(yè)面更加重要、關(guān)鍵的元素。
六、圖文結(jié)合的排版 圖文結(jié)合的設(shè)計(jì)越來(lái)越流行了,最初在新聞和閱讀類(lèi)應(yīng)用上高頻出現(xiàn),現(xiàn)在隨意打開(kāi)一個(gè)App,只要涉及到圖片排版,設(shè)計(jì)師們都更喜歡這樣的方式,簡(jiǎn)單,節(jié)省空間,文字和圖片配合相得益彰,文字的疊加填補(bǔ)了圖片在畫(huà)面層次上的空白,同時(shí)也讓界面更豐富。
七、為空頁(yè)面趣味化 當(dāng)我們新接觸一個(gè)應(yīng)用的時(shí)候,剛開(kāi)始使用的時(shí)候總會(huì)會(huì)出現(xiàn)很多空白頁(yè)面,在以往的設(shè)計(jì)中,空白頁(yè)面一直都是被邊緣化,并沒(méi)有得到多大的重視,展示的形式往往是一個(gè)圖標(biāo)配一句文案,因?yàn)橹匾圆⒉桓?,只是需要告訴用戶(hù)一個(gè)狀態(tài)即可。但在近些年,為空頁(yè)面的設(shè)計(jì)有所改觀,它的重要程度有所提升,它變的更富趣味性,色彩也更加豐富了。由此看來(lái),設(shè)計(jì)師們正在想辦法,盡可能的讓App的每一個(gè)維度都變的更有趣。 在Q2季度的時(shí)候,團(tuán)隊(duì)對(duì)蘑菇街產(chǎn)品的為空頁(yè)面做了一次系統(tǒng)的整理,把原來(lái)以圖標(biāo)形式為主的空白頁(yè)面調(diào)整了一次,取而代之的是趣味性的插畫(huà),我們希望頁(yè)面即使在沒(méi)有內(nèi)容的情況下也是飽滿(mǎn)的,這樣的形式對(duì)用戶(hù)來(lái)說(shuō)也更加友好。
八、彩色投影的流行 自從Google發(fā)起的長(zhǎng)投影慢慢從人們的視野中淡出后,近期又興起了一種新的投影方式—彩色投影,投影的顏色會(huì)隨著整體背景的色系而改變,這樣的好處是可以把投影融進(jìn)整體的畫(huà)面中,同時(shí)也可以讓界面更突出和飽滿(mǎn)。設(shè)計(jì)的流行趨勢(shì)總是在變化輪回, 扁平化潮流的興起,表達(dá)質(zhì)感擬物的元素退出歷史舞臺(tái),如今代表空間感的彩色投影又回來(lái)了,它和扁平設(shè)計(jì)的相結(jié)合,在視覺(jué)上給人帶來(lái)一種別開(kāi)生面的感覺(jué),也越來(lái)越多的應(yīng)用到產(chǎn)品之中,在最新版的Instagram中,我們也能看到它的影子。 舉一個(gè)uni 頭條頁(yè)面的例子,我把輪播banner做成了投影的樣式,背景用品牌色,每一張banner都會(huì)有一個(gè)投影,我們會(huì)發(fā)現(xiàn)這樣的效果,可以把用戶(hù)的注意力更加的集中在頭部,投影和品牌色的結(jié)合讓對(duì)比更加強(qiáng)烈,也更適合于突出重點(diǎn)內(nèi)容。
結(jié)語(yǔ) 趨勢(shì)的展開(kāi)往往都是從大公司開(kāi)始,頂級(jí)互聯(lián)網(wǎng)公司的產(chǎn)品擁有龐大的用戶(hù)群,這樣更容易向用戶(hù)普及和推廣,從而推動(dòng)整個(gè)行業(yè)的推陳出新。趨勢(shì)的變化很快,今年所流行的可能明年就已經(jīng)消退了,但是趨勢(shì)的大方向是相對(duì)穩(wěn)定的。