UI 設(shè)計(jì)越來越重要，它在直觀塑造企業(yè)形象的同時(shí)，也成為留住用戶的關(guān)鍵。與此同時(shí)，UI 的設(shè)計(jì)風(fēng)格和趨勢(shì)每一年都在發(fā)生變化。那么在2017年UI設(shè)計(jì)領(lǐng)域?qū)⒘餍惺裁礃拥内厔?shì)呢？中培偉業(yè)《高品質(zhì)用戶體驗(yàn)與UI設(shè)計(jì)開發(fā)》培訓(xùn)專家陳老師在這里進(jìn)行了詳細(xì)介紹。

一、有沉浸感的全屏式設(shè)計(jì)

Immersive 沉浸感，說的是一種讓你猶如身臨其境的模擬真實(shí)的效果。就像最初的美術(shù)來自于對(duì)現(xiàn)實(shí)的模擬一樣，這種擬真的設(shè)計(jì)，至今仍然受用。

因而我們能看到像這樣的網(wǎng)頁設(shè)計(jì)，它以全屏式的大幅圖像和視頻為主，以一種簡(jiǎn)單卻有效的方式，迅速把你帶入它所設(shè)定的情境之中。

二、長滾動(dòng)式設(shè)計(jì)

“滾動(dòng)”，并不算是一個(gè)新的設(shè)計(jì)趨勢(shì)。

在過去的幾年內(nèi)，滾動(dòng)式的閱讀體驗(yàn)在小屏幕設(shè)備上的發(fā)展尤為突出。想想你手機(jī)上的 app，一定有很多采取的是這種滾動(dòng)式設(shè)計(jì)。

三、漸變色的運(yùn)用

2013 年開始盛行的扁平化設(shè)計(jì)中，強(qiáng)調(diào)簡(jiǎn)潔的功能界面區(qū)分，拋棄多余的元素。至今，這種設(shè)計(jì)風(fēng)格依然有著借鑒的價(jià)值。

不過，隨著扁平化的流行，它的弊端也開始顯現(xiàn)出來：一時(shí)之間幾乎是所有的平面設(shè)計(jì)都在強(qiáng)調(diào)扁平化，這使得它們趨于雷同，看上去毫無個(gè)性。

想要在扁平化設(shè)計(jì)中，加點(diǎn)不一樣的元素讓它更為生動(dòng)，漸變色不失為一個(gè)好的選擇。

四、插畫的運(yùn)用

插畫可以讓設(shè)計(jì)具有“性格”，比起傳統(tǒng)的攝影，它是一種直觀的與用戶進(jìn)行情感交流的視覺語言。

對(duì)于品牌來說，沒有什么能比用插畫來塑造品牌形象、傳遞品牌性格還要簡(jiǎn)單有效的方式了。作為一種有趣的情感表達(dá)，插畫可以是量身定制的，因而它能幫助獲得用戶的信任，讓人感覺更為親切。

五、打破網(wǎng)格設(shè)計(jì)

對(duì)于大多數(shù)設(shè)計(jì)師而言，網(wǎng)格一直以來都是設(shè)計(jì)的基礎(chǔ)，它能夠保證一致性、平衡性和某種節(jié)奏。

此外，一個(gè)用戶很熟悉的網(wǎng)格，也代表著一個(gè)不會(huì)出錯(cuò)的選擇，起碼用戶在看到這個(gè)設(shè)計(jì)的時(shí)候，可以不用指導(dǎo)地、下意識(shí)地去使用網(wǎng)站或者應(yīng)用程序。

然而，網(wǎng)格也意味著限制。在一個(gè)有限的網(wǎng)格內(nèi)，富有才華的設(shè)計(jì)師，很難去完整地表現(xiàn)他的天馬行空。于是，有些設(shè)計(jì)師正在嘗試突破傳統(tǒng)的數(shù)字體驗(yàn)，打破網(wǎng)格。

六、視差效果

Parallax 視差，說它是長滾動(dòng)設(shè)計(jì)和打破網(wǎng)格的結(jié)合也許更為貼切。

概括說來，視差指的是頁面的背景，以一個(gè)比前景慢的速度移動(dòng)，從而產(chǎn)生一種視覺上的縱深感。它不是一個(gè)新的設(shè)計(jì)概念，只不過，現(xiàn)在有越來越多的品牌在使用這種設(shè)計(jì)理念。

視差可以結(jié)合圖片、文本，以一個(gè)不太嚴(yán)格的頁面布局，帶來一種流暢直觀的瀏覽體驗(yàn)。視差效果的好處顯而易見，它提供了一個(gè)充滿活力的界面，并且讓用戶印象深刻。

七、卡片式設(shè)計(jì)更加流行

一直以來，這種卡片式設(shè)計(jì)都在移動(dòng)用戶界面設(shè)計(jì)中占有重要的位置。

卡片式設(shè)計(jì)是一個(gè)通用的用戶界面模式，小到移動(dòng)端的信息瀏覽，大到重要的會(huì)議演講。它最大的好處大概就是，能在同一個(gè)時(shí)間內(nèi)，盡可能地、分門別類地展示大量的信息。它能夠讓用戶進(jìn)行更為快速的瀏覽并做出選擇。

以卡片為單位，可以形成一套完整的解決方案，處理文本、圖像、視頻之間的關(guān)系。此外，卡片本身也擁有很強(qiáng)的靈活性。想要給這些普通的卡片設(shè)計(jì)多點(diǎn)花樣的話，設(shè)計(jì)師還可以通過翻轉(zhuǎn)、旋轉(zhuǎn)、疊加和過濾等方式，來讓它們發(fā)生變化。

八、微交互設(shè)計(jì)

微交互，指的是小屏幕上的動(dòng)畫形式。

從用戶體驗(yàn)的角度來看，這種微交互通過屏幕上的動(dòng)畫轉(zhuǎn)化，以一種更為明確的視覺反饋，告訴他們，讓他們知道他們的點(diǎn)擊行為引起了什么，以及下一步會(huì)發(fā)生什么。

聰明的設(shè)計(jì)師能夠把微交互設(shè)計(jì)的娛樂性放大，讓用戶獲得更多的樂趣。從好玩的加載動(dòng)畫，到流暢的圖標(biāo)轉(zhuǎn)換，一個(gè)好的微交互設(shè)計(jì)，可以同時(shí)擔(dān)負(fù)娛樂和通知這兩種功能。

九、字體設(shè)計(jì)

字體設(shè)計(jì)被視作是平面設(shè)計(jì)中最基本的單元，它傳遞文本信息，功能非?；A(chǔ)。不過，想讓一個(gè)平淡無奇的設(shè)計(jì)出彩的話，為它設(shè)計(jì)一組創(chuàng)造性的字體，不失為一種簡(jiǎn)單明了的方式。

劉老師指出，字體設(shè)計(jì)的重要性毋庸置疑，你可以看到很多的品牌都在嘗試用更大的、更粗的，以及有著時(shí)髦襯線的字體來吸引用戶。

十、實(shí)驗(yàn)性的導(dǎo)航設(shè)計(jì)

頁面導(dǎo)航和菜單的設(shè)計(jì)一直是一個(gè)頗有爭(zhēng)議的話題。

當(dāng)移動(dòng)端和網(wǎng)頁的設(shè)計(jì)界限越來越模糊的時(shí)候，漢堡包菜單 Left Nav Flyouts，即側(cè)邊欄菜單。最初它作為谷歌設(shè)計(jì)的一個(gè)重要元素，后來被紛紛效仿而成為導(dǎo)航設(shè)計(jì)的主流。