2018移動(dòng)應(yīng)用及網(wǎng)頁(yè)UI設(shè)計(jì)趨勢(shì)

image

設(shè)計(jì)趨勢(shì)往往會(huì)受到當(dāng)今主流媒體涯贞、技術(shù)辜纲、時(shí)尚趨勢(shì)等等影響,設(shè)計(jì)趨勢(shì)一般是慢慢形成的,循序漸進(jìn)的颗胡。當(dāng)然理郑,隨著時(shí)間的交替也會(huì)以同樣新舊交替的形式變得落后悲敷。2018年的設(shè)計(jì)趨勢(shì)將繼續(xù)延續(xù)2017的設(shè)計(jì)形式馁龟,同時(shí)也增加了許多新的方式,下面我們就一起來(lái)扯一扯傀缩。

趨勢(shì)一:扁平化那先、極簡(jiǎn)主義設(shè)計(jì)依然是主流

扁平化相信大家已經(jīng)很熟悉了,概念的核心意義是:去除冗余扑毡、厚重和繁雜的裝飾效果胃榕,倡導(dǎo)簡(jiǎn)單、清晰瞄摊、空間勋又、留白等,突出核心的設(shè)計(jì)元素换帜。目前很多app都開(kāi)始去除多余的線條楔壤,通過(guò)間距來(lái)拉開(kāi)關(guān)系;去icon化也是一種趨勢(shì)惯驼,開(kāi)始流行蹲嚣;這些設(shè)計(jì)行為目的都是為了讓用戶(hù)使用時(shí)更為直觀和更有目的性递瑰,令人滿(mǎn)意的審美趨勢(shì)也讓極簡(jiǎn)的ui設(shè)計(jì)擁有良好的用戶(hù)體驗(yàn)。

image
image

趨勢(shì)二:更大隙畜、更粗的字體抖部,留白更多

相信你們很多人已經(jīng)升級(jí)了iPhone新系統(tǒng),隨著ios11的發(fā)布议惰,新的設(shè)計(jì)趨勢(shì)也隨之流行開(kāi)來(lái)慎颗。如果你熟悉Material Design(以下簡(jiǎn)稱(chēng)MD)的話(huà),ios和Android在設(shè)計(jì)上正慢慢的靠近言询。在扁平化設(shè)計(jì)中俯萎,文字排版影響著信息層級(jí)展示的清晰與否,通過(guò)文字的字號(hào)运杭、字重夫啊、間距、顏色等對(duì)比去建立出清晰的信息層級(jí)辆憔,而不用太多的裝飾元素撇眯。

image

同樣的,Airbnb也采用了粗標(biāo)題設(shè)計(jì)躁愿。大標(biāo)題文本包含一組帶有圖片和描述的文字叛本,文字之間保持較大的留白沪蓬,看起來(lái)它們互不干擾彤钟,又不會(huì)令界面看上去顯得松散,因而帶給用戶(hù)非常輕松的瀏覽體驗(yàn)跷叉。

image

(對(duì)于一些國(guó)內(nèi)的電商App逸雹,采用這種設(shè)計(jì)方式的可能性較小,因?yàn)閷?duì)于這些應(yīng)用云挟,頁(yè)面內(nèi)的位置相對(duì)寸土寸金梆砸,應(yīng)該不會(huì)用大字體來(lái)浪費(fèi)空間)

趨勢(shì)三:icon圖標(biāo)的變化,由線轉(zhuǎn)面

自ios7開(kāi)始园欣,蘋(píng)果規(guī)范了2px的線性圖標(biāo)帖世;到了ios10中,線性圖標(biāo)的選中狀態(tài)變成背景填充樣式沸枯;而在現(xiàn)在的ios11中日矫,采用了面性圖標(biāo),未選中和選中狀態(tài)只有顏色上的區(qū)分绑榴,并且圖標(biāo)更加圓潤(rùn)哪轿,目前這種設(shè)計(jì),國(guó)外的app用的比較多翔怎,國(guó)內(nèi)還相對(duì)比較少見(jiàn)窃诉,采用ios10的樣式較多杨耙。

image

****趨勢(shì)四:給icon圖標(biāo)加上動(dòng)效,更加有趣味

image

趨勢(shì)五:icon的細(xì)節(jié)刻畫(huà)越來(lái)越重要

目前icon的設(shè)計(jì)已經(jīng)不單單只滿(mǎn)足于簡(jiǎn)潔易懂為前提飘痛,同時(shí)細(xì)節(jié)的設(shè)計(jì)也十分重要珊膜。在色彩上可以加以漸變,線性圖標(biāo)也可以加以色彩的對(duì)比等等宣脉,會(huì)顯得icon是精心設(shè)計(jì)過(guò)的辅搬,帶給用戶(hù)的感受也會(huì)上一個(gè)檔次。

image

趨勢(shì)六:卡片脖旱、投影相結(jié)合

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

image

趨勢(shì)七:漸變色當(dāng)然依舊十分流行

漸變色是今年最大的趨勢(shì)之一占遥,開(kāi)始于16年俯抖,Instagram將自己的logo改變成漸變色,這一趨勢(shì)便開(kāi)始流行瓦胎,國(guó)內(nèi)的app也開(kāi)始效仿芬萍,目前淘寶、QQ等狀態(tài)欄就是使用自己的品牌色進(jìn)行漸變搔啊。在設(shè)計(jì)漸變色的時(shí)候柬祠,要做到色彩的過(guò)渡柔和,顏色明快负芋,避免生硬漫蛔,可以有效的提升用戶(hù)體驗(yàn)。

image
image
image

趨勢(shì)八:3D效果正流行

今年C4D大熱旧蛾,相信大家已經(jīng)感受到了莽龟,今年雙十一很多商家都使用了3D效果,有的還加上了動(dòng)效蚜点,可以讓你全方位轧房、多角度、更加真實(shí)的觀察商品绍绘。目前還不會(huì)C4D的設(shè)計(jì)師們奶镶,為了提升你的競(jìng)爭(zhēng)力迟赃,有必要學(xué)起來(lái)了,畢竟技多不壓身厂镇。

image

趨勢(shì)九:插畫(huà)風(fēng)格也是大趨勢(shì)

插畫(huà)風(fēng)格運(yùn)用的越來(lái)越廣泛纤壁,適用于app當(dāng)中的啟動(dòng)頁(yè)、缺省頁(yè)捺信、banner圖酌媒、專(zhuān)題頭圖、彈窗插畫(huà)迄靠、icon等等秒咨,運(yùn)用時(shí)要和app的整體風(fēng)格搭配,有趣味掌挚、富有創(chuàng)意的插畫(huà)會(huì)讓用戶(hù)對(duì)app的好感大幅提升雨席。

image

btw,今年比較流行的孟菲斯風(fēng)格設(shè)計(jì)吠式,我個(gè)人也很喜歡陡厘,在地鐵站看見(jiàn)各大品牌掛出的海報(bào)十分搶眼。該風(fēng)格色彩比較鮮明特占、活潑糙置、多采用高飽和色彩,18年估計(jì)還會(huì)繼續(xù)流行一陣是目。

image

趨勢(shì)十:交互動(dòng)效一直很重要

交互動(dòng)效越來(lái)越多的使用在ui設(shè)計(jì)中谤饭,它對(duì)于產(chǎn)品設(shè)計(jì)的作用包含:傳遞層級(jí)和狀態(tài)信息,好的動(dòng)效應(yīng)該是隱形的胖笛,以提高可用性為前提网持,提升體驗(yàn)為目的宜岛。它的幾點(diǎn)特性:快速且流暢长踊、恰到好處的反饋、提升操作感受萍倡、提供良好的視覺(jué)效果身弊。

image

趨勢(shì)十一:響應(yīng)式設(shè)計(jì)

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

image

趨勢(shì)十二:VR/AR/VUI是未來(lái)的大趨勢(shì)

眾所周知备籽,現(xiàn)在VR(虛擬現(xiàn)實(shí))和AR(增強(qiáng)現(xiàn)實(shí))大火舶治,它倆的核心都是計(jì)算機(jī)視覺(jué)。VR目前在娛樂(lè)領(lǐng)域被使用车猬,而AR將會(huì)真正影響我們的工作和生活霉猛,多用于多媒體、市場(chǎng)營(yíng)銷(xiāo)珠闰、教育等方面韩脏。

image

以上內(nèi)容是對(duì)ui設(shè)計(jì)趨勢(shì)的一些總結(jié),歡迎大家進(jìn)行補(bǔ)充铸磅。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末赡矢,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子阅仔,更是在濱河造成了極大的恐慌吹散,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件八酒,死亡現(xiàn)場(chǎng)離奇詭異空民,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)羞迷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)界轩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人衔瓮,你說(shuō)我怎么就攤上這事浊猾。” “怎么了热鞍?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵葫慎,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我薇宠,道長(zhǎng)偷办,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任澄港,我火速辦了婚禮椒涯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘回梧。我一直安慰自己废岂,他們只是感情好铡溪,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著泪喊,像睡著了一般棕硫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上袒啼,一...
    開(kāi)封第一講書(shū)人閱讀 49,071評(píng)論 1 285
  • 那天哈扮,我揣著相機(jī)與錄音,去河邊找鬼蚓再。 笑死滑肉,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的摘仅。 我是一名探鬼主播靶庙,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼娃属!你這毒婦竟也來(lái)了六荒?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤矾端,失蹤者是張志新(化名)和其女友劉穎掏击,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體秩铆,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡砚亭,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了殴玛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捅膘。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖滚粟,靈堂內(nèi)的尸體忽然破棺而出寻仗,到底是詐尸還是另有隱情,我是刑警寧澤坦刀,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布愧沟,位于F島的核電站,受9級(jí)特大地震影響鲤遥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜林艘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一盖奈、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧狐援,春花似錦钢坦、人聲如沸究孕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)厨诸。三九已至,卻和暖如春禾酱,著一層夾襖步出監(jiān)牢的瞬間微酬,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工颤陶, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留颗管,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓滓走,卻偏偏與公主長(zhǎng)得像垦江,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子搅方,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 設(shè)計(jì)趨勢(shì)往往會(huì)受到當(dāng)今主流媒體比吭,技術(shù)的發(fā)展,時(shí)尚趨勢(shì)等等影響姨涡,設(shè)計(jì)趨勢(shì)一般是慢慢形成的梗逮,循序漸進(jìn)的。當(dāng)然绣溜,隨著時(shí)間...
    懶貓_42f0閱讀 504評(píng)論 0 1
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,515評(píng)論 25 707
  • 對(duì)羸弱者來(lái)說(shuō)怖喻,任何力都是破壞力 強(qiáng)有力者才能借到力
    農(nóng)爸爸閱讀 107評(píng)論 0 0
  • 文:耳雙生 一個(gè)人在旅途,隨著南下動(dòng)車(chē)的起伏哗蜈,不禁想起兩年前的某個(gè)晚上前标,在那個(gè)廣場(chǎng),遇到的一位拉二胡的大叔距潘。 當(dāng)然...
    耳雙生閱讀 1,849評(píng)論 2 8
  • 【餐廳 燈光 人臉 】 自助餐 火鍋 真是最適合這群年少又瘋狂的人們炼列。不會(huì)讓人想起 失敗 邋遢 ,盡管桌上的餐碟與...
    張小北閱讀 212評(píng)論 0 0