0532-88983785 0532-68613670
青島網(wǎng)站建設(shè)|青島網(wǎng)站優(yōu)化|青島微信開發(fā)|青島網(wǎng)站制作

2018UI設(shè)計趨勢提前預(yù)告

時間:2017-12-15 19:52 來源:山東迅優(yōu)傳媒 作者:admin 點擊:2878次

設(shè)計趨勢往往會受到當今主流媒體,技術(shù)的發(fā)展,時尚趨勢等等影響,設(shè)計趨勢一般是慢慢形成的,循序漸進的。當然,隨著時間的交替也會以同樣新舊交替的形式變得落后。


一、扁平化、極簡主義設(shè)計依然大行其道

扁平化相信大家已經(jīng)很熟悉了,概念的核心意義是:去除冗余、厚重和繁雜的裝飾效果,倡導(dǎo)簡單、清晰、空間、留白等,突出核心的設(shè)計元素。目前很多app都開始去除多余的線條,通過間距來拉開關(guān)系;去icon化也是一種趨勢,開始流行;這些設(shè)計行為目的都是為了讓用戶使用時更為直觀和更有目的性,令人滿意的審美趨勢也讓極簡的ui設(shè)計擁有良好的用戶體驗。

2018UI設(shè)計趨勢提前預(yù)告 1510074

2018UI設(shè)計趨勢提前預(yù)告 1513339202484904


二、更大 更粗的字體、留白更多

相信你們很多人已經(jīng)升級了iPhone新系統(tǒng),隨著ios11的發(fā)布,新的設(shè)計趨勢也隨之流行開來。如果你熟悉Material Design(以下簡稱MD)的話,ios和Android在設(shè)計上正慢慢的靠近。在扁平化設(shè)計中,文字排版影響著信息層級展示的清晰與否,通過文字的字號、字重、間距、顏色等對比去建立出清晰的信息層級,而不用太多的裝飾元素。

2018UI設(shè)計趨勢提前預(yù)告 1513339292311199

同樣的,Airbnb也采用了粗標題設(shè)計。大標題文本包含一組帶有圖片和描述的文字,文字之間保持較大的留白,看起來它們互不干擾,又不會令界面看上去顯得松散,因而帶給用戶非常輕松的瀏覽體驗。

2018UI設(shè)計趨勢提前預(yù)告 1513339321363098

(對于一些國內(nèi)的電商App,我個人猜測采用這種設(shè)計方式的可能性較小,因為對于這些應(yīng)用,頁面內(nèi)的位置相對寸土寸金,應(yīng)該不會用大字體來浪費空間)


三、頁面icon的3種設(shè)計趨勢

一、icon圖標的變化,由線轉(zhuǎn)面

自ios7開始,蘋果規(guī)范了2px的線性圖標;到了ios10中,線性圖標的選中狀態(tài)變成背景填充樣式;而在現(xiàn)在的ios11中,采用了面性圖標,未選中和選中狀態(tài)只有顏色上的區(qū)分,并且圖標更加圓潤,目前這種設(shè)計,國外的app用的比較多,國內(nèi)還相對比較少見,采用ios10的樣式較多。

2018UI設(shè)計趨勢提前預(yù)告 1513339609853657

二、給icon圖標加上動效,更加有趣味

目前很多app已經(jīng)給頁面底部標簽欄的icon加上微動效,這類動效起到的是畫龍點睛的作用,不太會被注意,察覺到會讓用戶覺得很有趣味,比如阿里的淘寶、菜鳥裹裹…我覺得鵝廠的QQ做的最有意思,底部標簽欄icon不僅有微動效,而且icon的笑臉會自動轉(zhuǎn)向看向被點擊的一側(cè),并且長按icon移動時它也會根據(jù)手指的方向轉(zhuǎn)動,十分有意思,符合當下95后00后的用戶心態(tài)。

2018UI設(shè)計趨勢提前預(yù)告 1513339618603255

三、icon的細節(jié)刻畫越來越重要

目前icon的設(shè)計已經(jīng)不單單只滿足于簡潔易懂為前提,同時細節(jié)的設(shè)計也十分重要。在色彩上可以加以漸變,線性圖標也可以加以色彩的對比等等,會顯得icon是精心設(shè)計過的,帶給用戶的感受也會上一個檔次。

2018UI設(shè)計趨勢提前預(yù)告 1513339649407714

四、卡片+投影相結(jié)合

ios11中采用了大圓角卡片設(shè)計,它不再像過去MD中的小圓角那樣呆板,大圓角讓設(shè)計更加輕快大氣。相信大家已經(jīng)看到了很多卡片都使用了投影這一手法,輕微的、似有似無的投影,不會被用戶立即察覺,但是會給設(shè)計增加深度,形成層疊的關(guān)系,更加醒目,可以更好的抓住用戶的注意力。

2018UI設(shè)計趨勢提前預(yù)告 1513339658686192

2018UI設(shè)計趨勢提前預(yù)告 1513339666711285

五、漸變色當然依舊十分流行

漸變色是今年最大的趨勢之一,開始于16年,Instagram將自己的logo改變成漸變色,這一趨勢便開始流行,國內(nèi)的app也開始效仿,目前淘寶、QQ等狀態(tài)欄就是使用自己的品牌色進行漸變。在設(shè)計漸變色的時候,要做到色彩的過渡柔和,顏色明快,避免生硬,可以有效的提升用戶體驗。

2018UI設(shè)計趨勢提前預(yù)告 1513339674432284

2018UI設(shè)計趨勢提前預(yù)告 1510110

2018UI設(shè)計趨勢提前預(yù)告 1510111

六、3D效果正流行

今年C4D大熱,相信大家已經(jīng)感受到了,今年雙十一很多商家都使用了3D效果,有的還加上了動效,可以讓你全方位、多角度、更加真實的觀察商品。目前還不會C4D的設(shè)計師們,為了提升你的競爭力,有必要學(xué)起來了,畢竟技多不壓身。

2018UI設(shè)計趨勢提前預(yù)告 1513339705360807

七、插畫風格也是大趨勢

插畫風格運用的越來越廣泛,適用于app當中的啟動頁、缺省頁、banner圖、專題頭圖、彈窗插畫、icon等等,運用時要和app的整體風格搭配,有趣味、富有創(chuàng)意的插畫會讓用戶對app的好感大幅提升。

2018UI設(shè)計趨勢提前預(yù)告 1513339735460933

btw,今年比較流行的孟菲斯風格設(shè)計,我個人也很喜歡,在地鐵站看見各大品牌掛出的海報十分搶眼。該風格色彩比較鮮明、活潑、多采用高飽和色彩,18年估計還會繼續(xù)流行一陣。

2018UI設(shè)計趨勢提前預(yù)告 1513339761776911

八、交互動效一直很重要

交互動效越來越多的使用在ui設(shè)計中,它對于產(chǎn)品設(shè)計的作用包含:傳遞層級和狀態(tài)信息,好的動效應(yīng)該是隱形的,以提高可用性為前提,提升體驗為目的。它的幾點特性:快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果。

2018UI設(shè)計趨勢提前預(yù)告 1510130

2018UI設(shè)計趨勢提前預(yù)告 1513339775797912

2018UI設(shè)計趨勢提前預(yù)告 1513339781231272

2018UI設(shè)計趨勢提前預(yù)告 1510133

九、動態(tài)視頻的應(yīng)用

1.啟動頁的小視頻

一般小視頻使用在啟動頁多用于第一次打開app的場景,對用戶的代入感較強,能夠很好的感染用戶的情緒,但是視頻時間不宜過長。

2.由動態(tài)圖片轉(zhuǎn)變成動態(tài)視頻

自16年開始流行的動態(tài)圖片,即:cinemagraph,17年也流行了一陣,一般常見于微信配圖,核心是圖片中有少量的動態(tài)元素,仿佛賦予圖片生命,比較唯美和貼近現(xiàn)實。

2018UI設(shè)計趨勢提前預(yù)告 1513339800449006

2018UI設(shè)計趨勢提前預(yù)告 1513339807909322

為了吸引更多用戶的注意力,手機banner設(shè)計上采用了動態(tài)視頻進行展現(xiàn),另外淘寶商品詳情頁也會放置動態(tài)視頻效果,方便360度的查看商品,刺激你剁手的欲望。

2018UI設(shè)計趨勢提前預(yù)告 1513339813269652

另外一些網(wǎng)頁的首頁也會放置高質(zhì)量、有故事性的視頻,會讓你的網(wǎng)站與眾不同。

2018UI設(shè)計趨勢提前預(yù)告 1510153

十、響應(yīng)式設(shè)計

隨著移動端的增長,手機已經(jīng)超越了pc機作為日常瀏覽網(wǎng)站的第一選擇,Google推出的MD響應(yīng)式柵格系統(tǒng),由于人力成本過高,國內(nèi)大部分網(wǎng)頁都沒有做,國外采用響應(yīng)式設(shè)計的網(wǎng)站有:Youtube、Spotify、Behance...國內(nèi)的有京東、騰訊視頻等。這種響應(yīng)式設(shè)計確實比較復(fù)雜,但是這個趨勢會一直繼續(xù)下去,對于產(chǎn)品、公司而言,還是需要量力而行的進行升級。

2018UI設(shè)計趨勢提前預(yù)告 1513339826432139

十一、VR/AR/VUI是未來的大趨勢

很多人將2016年稱為VR元年,新年伊始資本投資接踵而至,不管是國際化的大公司,還是仍在四處路演尋求天使投資的創(chuàng)業(yè)團隊,紛紛投入到了 VR 立項的大軍之中??蓛H隔半年,一股裁員倒閉的陰云開始籠罩 VR 行業(yè)。在這一年里,我們并未看到真正具有實際消費價值的 VR 產(chǎn)品出現(xiàn)。
  而與 VR 是讓人在虛擬世界中感受真實的角度不同,AR 技術(shù)讓人們在真實世界中感受虛擬。對于普通的消費者來說,可以使用身邊的數(shù)字設(shè)備,在真實世界中感受不一樣的精彩。還記得Pokemon Go 這個在真實世界中抓精靈寵物的手機游戲么?正是 AR 技術(shù)的運用,讓全世界的人為之癡迷瘋狂。彭博社刊文稱,蘋果計劃在未來型號的iPhone X中采用全新激光傳感器,能繪制用戶周圍環(huán)境的3D地圖,并將這些信息應(yīng)用在增強現(xiàn)實應(yīng)用中。
  AR在移動設(shè)備上的應(yīng)用場景大大超過了需要額外設(shè)備配合的VR在移動端的應(yīng)用可行性,VR的普及仍需時日。
  農(nóng)歷新年前夕,支付寶在新版本更新中,推出了“AR 實景紅包”,融合基于地理信息定位的 LBS,增強顯示技術(shù)的 AR,以及火爆多年的紅白概念,迅速提升了傳統(tǒng)線上紅包的互動性和趣味性。
  技術(shù)愈發(fā)展愈加復(fù)雜,就越能預(yù)測需求解決問題。但是對于普通消費人群來說,技術(shù)將會更加悄無聲息的融入日常生活。你所享受的每一個新產(chǎn)品或者新服務(wù),背后都有著龐大的技術(shù)基礎(chǔ)支持。基于大數(shù)據(jù)和機器學(xué)習,你的淘寶將會為你推薦更符合你的需求的產(chǎn)品,更符合你審美和喜好的搭配;你的音樂播放器會播放更符合你心情和偏好的音樂。感知體驗會逐漸替代屏幕交互體驗,交互是依舊存在,但是,那塊屏幕,可能并不是真實存在的,我們更可以通過聲音、觸摸等與設(shè)備進行互動。

眾所周知,現(xiàn)在VR(虛擬現(xiàn)實)和AR(增強現(xiàn)實)大火,它倆的核心都是計算機視覺。VR目前在娛樂領(lǐng)域被使用,而AR將會真正影響我們的工作和生活,多用于多媒體、市場營銷、教育等方面。

2018UI設(shè)計趨勢提前預(yù)告 1513339833376691

17年春節(jié)支付寶的VR找紅包,美圖秀秀等拍照軟件的功能普及,這類交互方式都是對用戶的代入感比較強烈,體驗感較好。


從Siri、Amazon echo、Google home、小冰等等的發(fā)展來看,VUI(語音用戶界面)與GUI不同,屬于一個新領(lǐng)域,將基于“對話”進行設(shè)計,呈現(xiàn)給用戶的主要是說和聽。VUI是最自然也是最省事的交互方式,但是不會完全取代GUI,而是更好的協(xié)作。

2018UI設(shè)計趨勢提前預(yù)告 1513339844214655

這些領(lǐng)域?qū)τ谠O(shè)計師而言都是比較新穎的,也是發(fā)展初期,我們需要時刻保持學(xué)習的心態(tài),提升自己的競爭力。


  迅優(yōu)傳媒是一家專注于網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站托管代運營、微信開發(fā)、小程序開發(fā)的互聯(lián)網(wǎng)科技公司。我們有完備的建站流程和專業(yè)的開發(fā)、設(shè)計人員,與客戶深度合作并針對不同的客戶提供專屬的網(wǎng)站策劃方案。
(責任編輯:admin)
網(wǎng)站建設(shè)定制

0532-88983785 / 0532-68613670

我要定制網(wǎng)站