設(shè)計趨勢往往會受到當(dāng)今主流媒體赵颅,技術(shù)的發(fā)展,時尚趨勢等等影響暂刘,設(shè)計趨勢一般是慢慢形成的饺谬,循序漸進(jìn)的。當(dāng)然谣拣,隨著時間的交替也會以同樣新舊交替的形式變得落后募寨。2018年的設(shè)計趨勢將繼續(xù)延續(xù)2017的設(shè)計形式,同時也增加了許多新的方式森缠,下面我們就一起來扯一扯拔鹰。
先來看一下整體目錄:
(聲明:本文展示圖片來源于網(wǎng)絡(luò)和應(yīng)用截圖,如有侵權(quán)贵涵,請聯(lián)系刪除)
一列肢、扁平化、極簡主義設(shè)計依然是主流
扁平化相信大家已經(jīng)很熟悉了独悴,概念的核心意義是:去除冗余、厚重和繁雜的裝飾效果锣尉,倡導(dǎo)簡單刻炒、清晰、空間自沧、留白等坟奥,突出核心的設(shè)計元素树瞭。目前很多app都開始去除多余的線條,通過間距來拉開關(guān)系爱谁;去icon化也是一種趨勢晒喷,開始流行;這些設(shè)計行為目的都是為了讓用戶使用時更為直觀和更有目的性访敌,令人滿意的審美趨勢也讓極簡的ui設(shè)計擁有良好的用戶體驗凉敲。
二、更大 更粗的字體寺旺、留白更多
相信你們很多人已經(jīng)升級了iPhone新系統(tǒng)爷抓,隨著ios11的發(fā)布,新的設(shè)計趨勢也隨之流行開來阻塑。如果你熟悉Material
Design(以下簡稱MD)的話蓝撇,ios和Android在設(shè)計上正慢慢的靠近。在扁平化設(shè)計中陈莽,文字排版影響著信息層級展示的清晰與否渤昌,通過文字的字號、字重走搁、間距独柑、顏色等對比去建立出清晰的信息層級,而不用太多的裝飾元素朱盐。
同樣的群嗤,Airbnb也采用了粗標(biāo)題設(shè)計。大標(biāo)題文本包含一組帶有圖片和描述的文字兵琳,文字之間保持較大的留白狂秘,看起來它們互不干擾,又不會令界面看上去顯得松散躯肌,因而帶給用戶非常輕松的瀏覽體驗者春。
(對于一些國內(nèi)的電商App,我個人猜測采用這種設(shè)計方式的可能性較小清女,因為對于這些應(yīng)用钱烟,頁面內(nèi)的位置相對寸土寸金,應(yīng)該不會用大字體來浪費空間)
三嫡丙、頁面icon的3種設(shè)計趨勢
1.icon圖標(biāo)的變化拴袭,由線轉(zhuǎn)面
自ios7開始,蘋果規(guī)范了2px的線性圖標(biāo)曙博;到了ios10中拥刻,線性圖標(biāo)的選中狀態(tài)變成背景填充樣式;而在現(xiàn)在的ios11中父泳,采用了面性圖標(biāo)般哼,未選中和選中狀態(tài)只有顏色上的區(qū)分吴汪,并且圖標(biāo)更加圓潤,目前這種設(shè)計蒸眠,國外的app用的比較多漾橙,國內(nèi)還相對比較少見,采用ios10的樣式較多楞卡。
2.給icon圖標(biāo)加上動效霜运,更加有趣味
目前很多app已經(jīng)給頁面底部標(biāo)簽欄的icon加上微動效,這類動效起到的是畫龍點睛的作用臀晃,不太會被注意觉渴,察覺到會讓用戶覺得很有趣味,比如阿里的淘寶徽惋、菜鳥裹裹…我覺得鵝廠的QQ做的最有意思案淋,底部標(biāo)簽欄icon不僅有微動效,而且icon的笑臉會自動轉(zhuǎn)向看向被點擊的一側(cè)险绘,并且長按icon移動時它也會根據(jù)手指的方向轉(zhuǎn)動踢京,十分有意思,符合當(dāng)下95后00后的用戶心態(tài)宦棺。
3.icon的細(xì)節(jié)刻畫越來越重要
目前icon的設(shè)計已經(jīng)不單單只滿足于簡潔易懂為前提瓣距,同時細(xì)節(jié)的設(shè)計也十分重要。在色彩上可以加以漸變代咸,線性圖標(biāo)也可以加以色彩的對比等等蹈丸,會顯得icon是精心設(shè)計過的,帶給用戶的感受也會上一個檔次呐芥。
四逻杖、卡片 投影相結(jié)合
ios11中采用了大圓角卡片設(shè)計,它不再像過去MD中的小圓角那樣呆板思瘟,大圓角讓設(shè)計更加輕快大氣荸百。相信大家已經(jīng)看到了很多卡片都使用了投影這一手法,輕微的滨攻、似有似無的投影够话,不會被用戶立即察覺,但是會給設(shè)計增加深度光绕,形成層疊的關(guān)系女嘲,更加醒目,可以更好的抓住用戶的注意力诞帐。
五欣尼、漸變色當(dāng)然依舊十分流行
漸變色是今年最大的趨勢之一,開始于16年景埃,Instagram將自己的logo改變成漸變色媒至,這一趨勢便開始流行,國內(nèi)的app也開始效仿谷徙,目前淘寶拒啰、QQ等狀態(tài)欄就是使用自己的品牌色進(jìn)行漸變。在設(shè)計漸變色的時候完慧,要做到色彩的過渡柔和谋旦,顏色明快,避免生硬屈尼,可以有效的提升用戶體驗册着。
六、3D效果正流行
今年C4D大熱脾歧,相信大家已經(jīng)感受到了甲捏,今年雙十一很多商家都使用了3D效果,有的還加上了動效鞭执,可以讓你全方位司顿、多角度、更加真實的觀察商品兄纺。目前還不會C4D的設(shè)計師們大溜,為了提升你的競爭力,有必要學(xué)起來了估脆,畢竟技多不壓身钦奋。
七、插畫風(fēng)格也是大趨勢
插畫風(fēng)格運(yùn)用的越來越廣泛疙赠,適用于app當(dāng)中的啟動頁付材、缺省頁、banner圖棺聊、專題頭圖伞租、彈窗插畫、icon等等限佩,運(yùn)用時要和app的整體風(fēng)格搭配葵诈,有趣味、富有創(chuàng)意的插畫會讓用戶對app的好感大幅提升祟同。
btw作喘,今年比較流行的孟菲斯風(fēng)格設(shè)計,我個人也很喜歡晕城,在地鐵站看見各大品牌掛出的海報十分搶眼泞坦。該風(fēng)格色彩比較鮮明、活潑砖顷、多采用高飽和色彩贰锁,18年估計還會繼續(xù)流行一陣赃梧。
八、交互動效一直很重要
交互動效越來越多的使用在ui設(shè)計中豌熄,它對于產(chǎn)品設(shè)計的作用包含:傳遞層級和狀態(tài)信息授嘀,好的動效應(yīng)該是隱形的,以提高可用性為前提锣险,提升體驗為目的蹄皱。它的幾點特性:快速且流暢、恰到好處的反饋芯肤、提升操作感受巷折、提供良好的視覺效果。
九崖咨、動態(tài)視頻的應(yīng)用
1.啟動頁的小視頻
一般小視頻使用在啟動頁多用于第一次打開app的場景锻拘,對用戶的代入感較強(qiáng),能夠很好的感染用戶的情緒击蹲,但是視頻時間不宜過長逊拍。
2.由動態(tài)圖片轉(zhuǎn)變成動態(tài)視頻
自16年開始流行的動態(tài)圖片,即:cinemagraph际邻,17年也流行了一陣芯丧,一般常見于微信配圖,核心是圖片中有少量的動態(tài)元素世曾,仿佛賦予圖片生命缨恒,比較唯美和貼近現(xiàn)實。
為了吸引更多用戶的注意力轮听,手機(jī)banner設(shè)計上采用了動態(tài)視頻進(jìn)行展現(xiàn)骗露,另外淘寶商品詳情頁也會放置動態(tài)視頻效果,方便360度的查看商品血巍,刺激你剁手的欲望萧锉。
另外一些網(wǎng)頁的首頁也會放置高質(zhì)量、有故事性的視頻述寡,會讓你的網(wǎng)站與眾不同柿隙。
十、響應(yīng)式設(shè)計
隨著移動端的增長鲫凶,手機(jī)已經(jīng)超越了pc機(jī)作為日常瀏覽網(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)品钥星、公司而言,還是需要量力而行的進(jìn)行升級满着。
十一、VR/AR/VUI是未來的大趨勢
眾所周知贯莺,現(xiàn)在VR(虛擬現(xiàn)實)和AR(增強(qiáng)現(xiàn)實)大火风喇,它倆的核心都是計算機(jī)視覺。VR目前在娛樂領(lǐng)域被使用缕探,而AR將會真正影響我們的工作和生活魂莫,多用于多媒體、市場營銷爹耗、教育等方面耙考。
17年春節(jié)支付寶的VR找紅包,美圖秀秀等拍照軟件的功能普及潭兽,這類交互方式都是對用戶的代入感比較強(qiáng)烈倦始,體驗感較好。
從Siri山卦、Amazon echo鞋邑、Google home、小冰等等的發(fā)展來看账蓉,VUI(語音用戶界面)與GUI不同枚碗,屬于一個新領(lǐng)域,將基于“對話”進(jìn)行設(shè)計铸本,呈現(xiàn)給用戶的主要是說和聽肮雨。VUI是最自然也是最省事的交互方式,但是不會完全取代GUI箱玷,而是更好的協(xié)作怨规。
這些領(lǐng)域?qū)τ谠O(shè)計師而言都是比較新穎的,也是發(fā)展初期锡足,我們需要時刻保持學(xué)習(xí)的心態(tài)椅亚,提升自己的競爭力。
以上內(nèi)容是個人對ui設(shè)計趨勢的一些總結(jié)舱污,歡迎大家進(jìn)行補(bǔ)充呀舔!thanks!
作者:EasonZhang