海淘科技編者為大家推出，2017年app界面設(shè)計(jì)流行趨勢(shì)。詳情請(qǐng)看下文。最后我們還會(huì)推薦相關(guān)文章，近期設(shè)計(jì)趨勢(shì)。
模糊背景和iOS毛玻璃效果很的相像，也符合時(shí)下流行的扁平化和現(xiàn)代風(fēng)的設(shè)計(jì)，設(shè)計(jì)效果十分的悅目娛心，可以非常好的與幽靈按鈕以及時(shí)下流行的元素搭配起來(lái)，來(lái)提升用戶體驗(yàn)。
IOS毛玻璃效果
解釋一下什么是幽靈按鈕，透明按鈕是“幽靈”，“薄”和“透”是這種設(shè)計(jì)的最大特色。紅色圈住的就是幽靈按鈕。轉(zhuǎn)回話題模糊背景。
我們舉個(gè)栗子，看下面的淘寶電影，它是采用的是模糊電影海報(bào)作為背景，這樣處理的益處是各個(gè)頁(yè)面的頂部做出的效果都不盡相同，排版視覺(jué)效果則是更好，同樣也突出電影信息等主要內(nèi)容。從設(shè)計(jì)的角度來(lái)看，這個(gè)是非常易于實(shí)現(xiàn)，讓內(nèi)容模塊變的清晰，同時(shí)可以避開(kāi)復(fù)雜的設(shè)計(jì)，做出的效率更高。
APP們都希望自己的用戶，在自己的APP中停留更長(zhǎng)的時(shí)間，從各方面去爭(zhēng)取用戶的注意力，而更大更醒目的字體運(yùn)用剛好符合這一需求。當(dāng)前的市場(chǎng)情況，大屏手機(jī)是主流，這一點(diǎn)是非常重要的使用背景。大字體在移動(dòng)端上呈現(xiàn)，會(huì)賦予界面以層次，提高特定元素的視覺(jué)重量，給用戶眼前一亮的感覺(jué)。而且現(xiàn)在的界面設(shè)計(jì)趨勢(shì)更有雜志風(fēng)的方向，大字體，模塊化，用圖片替代色塊作為背景。其次字體夠大，夠優(yōu)雅，夠獨(dú)特，同時(shí)也能提升頁(yè)面的氣質(zhì)和特色，很多用戶會(huì)因?yàn)轫?yè)面好看，符合審美，就會(huì)決定留下來(lái)，即使功能并不很滿足需求。這對(duì)很多APP提升用戶粘性是一個(gè)重要發(fā)方向。
以蘑菇街一個(gè)產(chǎn)品為栗子，看下圖，左邊是原來(lái)文章詳情頁(yè)，它的標(biāo)題與正文字體大小是36px和28px，右邊是改動(dòng)后的，大小分別是56px和34px，整體頁(yè)面的信息密度降低了，同時(shí)字體變大閱讀效率也有所提高。
之前所流行的處理方式是通過(guò)線條與分隔符來(lái)進(jìn)行劃分內(nèi)容區(qū)塊的，但是這樣app界面的元素會(huì)很擁擠。然而通過(guò)空白空間來(lái)劃分區(qū)塊能使界面更加通透、構(gòu)建更加優(yōu)秀、更干凈。移除分割線和分隔符可以為界面提供更加現(xiàn)代化的外觀，專注于功能，比如可以將圖片與字體像素放大，提供更加清晰的層級(jí)劃分和更優(yōu)的易用性。通過(guò)空間間隔來(lái)劃分區(qū)塊是一種非干擾性的設(shè)計(jì)，更匹配現(xiàn)在流行的風(fēng)格與設(shè)計(jì)的需求。主打圖片社交的網(wǎng)站，在最新的一次改版中直接把卡片的背景去掉了，這也是一種流行趨勢(shì)，并且效果也是明顯的，整體圖片內(nèi)容更加清晰和通透了。
同樣還是舉蘑菇街產(chǎn)品的例子，為了讓不同模塊之間的區(qū)分更明顯，一般我們會(huì)設(shè)置背景為灰色，內(nèi)容為白色卡片，這樣可以更突出內(nèi)容。新的設(shè)計(jì)嘗試把灰色背景去掉，同時(shí)擴(kuò)大了板塊的標(biāo)題，通過(guò)間距來(lái)劃分，內(nèi)容元素并沒(méi)有因?yàn)闆](méi)有灰色背景的區(qū)分而變的混亂，而是界面的整體感變強(qiáng)。
微交互這個(gè)概念在2013年底就被Dan Saffer提出了。然而這個(gè)概念被提出后，Don Norman親自回信提出好評(píng)。于是微交互，一下子成了個(gè)挺那么火的buzz word,設(shè)計(jì)師們都要趕個(gè)潮流。為何這個(gè)概念被提出了四年之后，為啥還說(shuō)它要火了呢?之所以怎么說(shuō)，是因?yàn)?1世紀(jì)的我們正在進(jìn)入一個(gè)信息復(fù)雜度超越以往任何年代的紀(jì)元。人腦能處理的信息，是有一定維度的，從今往后我們?cè)O(shè)計(jì)師要做的，不僅僅是考慮用戶的使用體驗(yàn)，更多的是使用設(shè)計(jì)為用戶所接觸到的信息進(jìn)行“降圍”。
圍繞特定的用例，通過(guò)微妙細(xì)小的動(dòng)效或者交互強(qiáng)化它的視覺(jué)效果，通常能達(dá)到意想不到的效果，而且也能讓用戶感受到產(chǎn)品設(shè)計(jì)者的用心。 當(dāng)你完成某個(gè)過(guò)程的時(shí)候，比如收藏某個(gè)條目、彈出提示框，這個(gè)時(shí)候微妙的動(dòng)畫會(huì)強(qiáng)化這些動(dòng)作，將這些控件同其他的元素區(qū)分開(kāi)來(lái)。這些微交互能夠作為信號(hào)提示，來(lái)提醒用戶動(dòng)作和任務(wù)的完成，它們不僅簡(jiǎn)單而且自然，有時(shí)候我看到這樣趣味性的交互還會(huì)長(zhǎng)時(shí)間停留,多看幾遍。
即刻點(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ī)照片和汽車信息會(huì)分開(kāi)展示，查看完又會(huì)收起來(lái)，界面使用效率很高，動(dòng)畫過(guò)渡很自然。
雙色調(diào)漸變?cè)O(shè)計(jì)，這個(gè)我們也是說(shuō)了很多了。在這里我們?cè)谡f(shuō)一下。扁平化設(shè)計(jì)占據(jù)主流的時(shí)候，漸變的設(shè)計(jì)手法就很少出現(xiàn)了，但是看最近的設(shè)計(jì)圈的作品，發(fā)現(xiàn)漸變色被越來(lái)越多的設(shè)計(jì)師們重新啟用了，漸變色設(shè)計(jì)有很多好處，其中可以調(diào)節(jié)過(guò)度使用的圖像和元素，為畫面添加有趣的元素，完善視覺(jué)表現(xiàn)幫助來(lái)吸引更多的用戶。
在網(wǎng)頁(yè)流行趨勢(shì)中，看一篇文章，圖文并茂的更新吸引我們?nèi)プx下去。然而在app界面設(shè)計(jì)中，圖文結(jié)合的設(shè)計(jì)越來(lái)越流行了，最初在新聞和閱讀類應(yīng)用上高頻出現(xiàn)，現(xiàn)在隨意打開(kāi)一個(gè)App，只要涉及到圖片排版，設(shè)計(jì)師們都更喜歡這樣的方式，簡(jiǎn)單，節(jié)省空間，文字和圖片配合相得益彰，文字的疊加填補(bǔ)了圖片在畫面層次上的空白，同時(shí)也讓界面更豐富。
當(dāng)我們新接觸一個(gè)應(yīng)用的時(shí)候，剛開(kāi)始使用的時(shí)候總會(huì)會(huì)出現(xiàn)很多空白頁(yè)面，在以往的設(shè)計(jì)中，空白頁(yè)面一直都是被邊緣化，并沒(méi)有得到多大的重視，展示的形式往往是一個(gè)圖標(biāo)配一句文案，因?yàn)橹匾圆⒉桓撸皇切枰嬖V用戶一個(gè)狀態(tài)即可。但在近些年，為空頁(yè)面的設(shè)計(jì)有所改觀，它的重要程度有所提升，它變的更富趣味性，色彩也更加豐富了。由此看來(lái)，設(shè)計(jì)師們正在想辦法，盡可能的讓App的每一個(gè)維度都變的更有趣。
在第二季度的時(shí)候，團(tuán)隊(duì)對(duì)蘑菇街產(chǎn)品的為空頁(yè)面做了一次系統(tǒng)的整理，把原來(lái)以圖標(biāo)形式為主的空白頁(yè)面調(diào)整了一次，取而代之的是趣味性的插畫，我們希望頁(yè)面即使在沒(méi)有內(nèi)容的情況下也是飽滿的，這樣的形式對(duì)用戶來(lái)說(shuō)也更加友好。
自從谷歌發(fā)起的長(zhǎng)投影逐漸的從人們的視野中淡出后，近期又興起了一種新的投影方式—彩色投影，投影的顏色會(huì)隨著整體背景的色系而改變，這樣的好處是可以把投影融進(jìn)整體的畫面中，同時(shí)也可以讓界面更突出和飽滿。
設(shè)計(jì)的流行趨勢(shì)總是在變化輪回， 扁平化潮流的興起，表達(dá)質(zhì)感擬物的元素退出歷史舞臺(tái)，現(xiàn)今代表空間感的彩色投影又回來(lái)了，彩色投影與扁平設(shè)計(jì)的相結(jié)合，在視覺(jué)上給人帶來(lái)一種別開(kāi)生面的感覺(jué)，并且也越來(lái)越多的應(yīng)用到產(chǎn)品之中，在最新版的Instagram中，我們也能看到它的影子。
舉一個(gè)蘑菇街的產(chǎn)品頭條頁(yè)面的栗子，可先把輪播banner做成了投影的樣式，背景用品牌色，每一張banner都會(huì)有一個(gè)投影，我們會(huì)發(fā)現(xiàn)這樣的效果，可以把用戶的注意力更加的集中在頭部，投影和品牌色的結(jié)合讓對(duì)比更加強(qiáng)烈，也更適合于突出重點(diǎn)內(nèi)容。
趨勢(shì)的流行常常都是從大公司開(kāi)始，超大互聯(lián)網(wǎng)公司的產(chǎn)品擁有很大的用戶群，這樣利于向用戶普及與推廣，從而推動(dòng)整個(gè)行業(yè)的推陳出新。趨勢(shì)的變化之迅速，今年流行趨勢(shì)嗎，有可能明年就會(huì)消退，但設(shè)計(jì)流行趨勢(shì)的大方向是相對(duì)穩(wěn)定的，或者是說(shuō)，用戶體驗(yàn)好的會(huì)留下來(lái)，再或者說(shuō)，在這個(gè)設(shè)計(jì)上，變更的更加符合用戶體驗(yàn)。
以上就是海淘科技編者推出的內(nèi)容了，后面我們將推薦設(shè)計(jì)流行趨勢(shì)。更多app界面設(shè)計(jì)資訊，點(diǎn)擊可查看。
