21个ui设计技巧，让你的设计不落伍
1、功能性極簡(jiǎn)主義
不少移動(dòng)端APP和網(wǎng)站開(kāi)始基于極簡(jiǎn)主義設(shè)計(jì)風(fēng)來(lái)設(shè)計(jì)，而極簡(jiǎn)主義本身并非關(guān)注所有的信息，而是通過(guò)減少非關(guān)鍵信息來(lái)突出特定的內(nèi)容，它是有著極強(qiáng)的功能性和偏向的。它有著如下的特征：
?
?簡(jiǎn)單明晰
?富有表現(xiàn)力的視覺(jué)層次
?對(duì)比明顯的比例控制
?每個(gè)元素都有功能
?大量的留白
?對(duì)核心細(xì)節(jié)的高關(guān)注度
?優(yōu)秀的排版設(shè)計(jì)
?去除非功能性的裝飾元素
?
?
2、粗野主義風(fēng)格
粗野主義設(shè)計(jì)在2017年非常火爆，采用這種風(fēng)格的UI，致力于使用更加明亮的色彩，質(zhì)樸甚至原始的設(shè)計(jì)元素，借助復(fù)雜的布局和反模式的排版，還原早期網(wǎng)頁(yè)設(shè)計(jì)的特征，甚至制造出上世紀(jì)八九十年代的質(zhì)感。它有著非常明顯的獨(dú)創(chuàng)性，不管你喜歡不喜歡，它都是無(wú)法被忽略的一種流行設(shè)計(jì)風(fēng)格。
?
?
?
3、字體和圖片的融合
大膽地將虛擬的字體和真實(shí)的圖片融為一體的設(shè)計(jì)也是去年流行的設(shè)計(jì)手法，這種設(shè)計(jì)手法讓字體擁有了融入真實(shí)場(chǎng)景的視覺(jué)體驗(yàn)，協(xié)調(diào)而賞心悅目。
?
?
?
4、帶動(dòng)效的首圖Banner
在網(wǎng)頁(yè)中，首圖Banner 是最為吸引用戶的內(nèi)容，他們不僅在視覺(jué)上足夠突出，而且能夠傳遞信息，傳達(dá)情緒，強(qiáng)化主題。動(dòng)效的加入，讓首屏的Banner圖更加吸引人，富有更強(qiáng)的吸引力。
?
5、自定義主題的插畫(huà)
插畫(huà)有著極強(qiáng)的可定制性，這也使得它越來(lái)越多地出現(xiàn)在UI和網(wǎng)頁(yè)設(shè)計(jì)中，它不僅更容易被用戶所感知，可以更好地承載創(chuàng)意，也可以帶來(lái)更加可控的風(fēng)格和調(diào)性。此外，優(yōu)秀的插畫(huà)還能干刪用戶體驗(yàn)，提高可訪問(wèn)性。
?
?
?
6、全屏式布局
如果你仔細(xì)觀察，會(huì)發(fā)現(xiàn)許多設(shè)計(jì)師都熱衷于使用全屏式的布局，讓圖片和視頻等視覺(jué)元素不再受到邊框的限制，這樣的布局更加寬敞，不會(huì)有打破界限的感覺(jué)。
?
?
?
7、多樣的UI動(dòng)效
在動(dòng)效設(shè)計(jì)這件事情上，你會(huì)發(fā)現(xiàn)它在2017年越來(lái)越成熟了，融入交互的動(dòng)效越來(lái)越圓融，用戶體驗(yàn)引人入勝的APP也越來(lái)越多了。接下來(lái)，UI動(dòng)效還會(huì)越來(lái)越優(yōu)秀。
?
?
?
?
8、對(duì)UI友好的品牌設(shè)計(jì)
2017年許多著名的品牌都針對(duì)自家品牌進(jìn)行了重設(shè)計(jì)，被重新設(shè)計(jì)之后，這些品牌的LOGO等元素都得到了不同程度的簡(jiǎn)化，并且針對(duì)數(shù)字化產(chǎn)品進(jìn)行了優(yōu)化，對(duì)于UI更加友好，而且?guī)缀趺總€(gè)品牌都制作了動(dòng)態(tài)版本的LOGO。
?
?
?
9、單色UI
為了讓UI和產(chǎn)品的功能性更強(qiáng)，不少設(shè)計(jì)師傾向于使用單色配色方案，這樣設(shè)計(jì)出來(lái)的UI確實(shí)看起來(lái)更加時(shí)尚，最關(guān)鍵的是單色配色之下，內(nèi)容更加突出，用戶更不容易被分心。不過(guò)，設(shè)計(jì)師需要投入更多的時(shí)間來(lái)打磨設(shè)計(jì)，避免整個(gè)UI變得乏味。
?
?
?
10 、深色系背景
深色系的背景通常能夠創(chuàng)造出更加優(yōu)雅、更具有形式感的設(shè)計(jì)，也能讓設(shè)計(jì)出來(lái)的實(shí)際效果在不同的環(huán)境下有更加一致的體驗(yàn)。相比之下，采用這樣設(shè)計(jì)的大多是數(shù)字產(chǎn)品頁(yè)面，而非以文本為主的網(wǎng)站。
?
?
11、淺色的文本背景
這是和深色系背景相伴出現(xiàn)的一種設(shè)計(jì)趨勢(shì)，通過(guò)白色或者淺色的區(qū)塊來(lái)承載文本，確保文本內(nèi)容的可讀性，還保持了整體的優(yōu)雅。
?
?
?
12、成熟而對(duì)比強(qiáng)烈的字體搭配
越來(lái)越多的新字體進(jìn)入設(shè)計(jì)師的視野，許多經(jīng)驗(yàn)豐富的設(shè)計(jì)師都特別重視字體的搭配。在2017年我們看到了許多優(yōu)秀的襯線體+非襯線體的字體組合，它們不僅創(chuàng)造了良好的對(duì)比度，而且讓整個(gè)排版設(shè)計(jì)的層次感更加顯著。編輯：千鋒UI設(shè)計(jì)
?
?
?
13、實(shí)驗(yàn)性的柵格系統(tǒng)
設(shè)計(jì)師的創(chuàng)意越來(lái)越強(qiáng)了，即使是柵格也能玩出新花樣。通過(guò)自定義創(chuàng)造出實(shí)驗(yàn)性的柵格系統(tǒng)，設(shè)計(jì)師在此基礎(chǔ)上能夠創(chuàng)造出更加靈活原創(chuàng)的布局，創(chuàng)造性地使用各種視覺(jué)元素。不過(guò)，實(shí)驗(yàn)性的柵格系統(tǒng)通常都需要多次迭代和測(cè)試，確保可用性。
?
?
14、多樣的著陸頁(yè)設(shè)計(jì)
在2017年，著陸頁(yè)開(kāi)始以多種多樣的方式呈現(xiàn)出來(lái)，無(wú)論是企業(yè)網(wǎng)站還是電商網(wǎng)站，在著陸頁(yè)的設(shè)計(jì)上也越來(lái)越實(shí)在，開(kāi)始越來(lái)越多地關(guān)注用戶最在意的問(wèn)題，著力提升著陸頁(yè)的轉(zhuǎn)化率。通過(guò)市場(chǎng)調(diào)研和測(cè)試，著陸頁(yè)的設(shè)計(jì)也越來(lái)越友好，靈活的原創(chuàng)近乎隨處可見(jiàn)。
?
?
?
15、創(chuàng)意十足的視差設(shè)計(jì)
視差滾動(dòng)依然在流行，滾動(dòng)畢竟是最省心最自由地交互方式，視差滾動(dòng)本身能夠促進(jìn)用戶持續(xù)不斷地交互，這也使得多樣而富有創(chuàng)意的視差在網(wǎng)頁(yè)和移動(dòng)端APP中大規(guī)模地使用。
?
?
?
16、用視頻內(nèi)容促銷(xiāo)
視頻內(nèi)容的普及是我們大家都有目共睹的大趨勢(shì)，這也使得視頻內(nèi)容成了營(yíng)銷(xiāo)和運(yùn)營(yíng)人員的最?lèi)?ài)，越來(lái)越多的視頻促銷(xiāo)內(nèi)容開(kāi)始出現(xiàn)。視頻內(nèi)容可以結(jié)合視覺(jué)和聽(tīng)覺(jué)對(duì)用戶產(chǎn)生作用，而動(dòng)畫(huà)和平面設(shè)計(jì)的內(nèi)容也同樣可以適當(dāng)?shù)厝谌肫渲?#xff0c;更好地服務(wù)于產(chǎn)品，提升轉(zhuǎn)化率。
?
?
17、UX的游戲化設(shè)計(jì)
游戲化設(shè)計(jì)對(duì)于產(chǎn)品體驗(yàn)的提升是明顯的。不僅僅提升了產(chǎn)品的娛樂(lè)性，而且讓產(chǎn)品更貼合用戶需求和人性。挑戰(zhàn)，獎(jiǎng)勵(lì)，積分，成就系統(tǒng)，徽章，排行榜，社交媒體機(jī)制，等等等等，所有的這些都提升了用戶的參與度，對(duì)于UX的提升是毋庸置疑的。
?
?
?
18、卡片式布局元素
卡片式布局的優(yōu)勢(shì)在于它的自由度，它足以承載各種類(lèi)型不同功能的元素和模塊，擁有著統(tǒng)一的美學(xué)特征和易于閱讀、易于交互的特點(diǎn)，為更為協(xié)調(diào)的設(shè)計(jì)作出了不小的貢獻(xiàn)。
?
?
?
19、風(fēng)格化的幾何元素
幾何元素有著不俗的裝飾性，而且它可以和不同的設(shè)計(jì)風(fēng)格搭配起來(lái)，讓整體設(shè)計(jì)的視覺(jué)飽滿度和體驗(yàn)有所提升，不同的幾何元素還能營(yíng)造不同的情緒和氛圍。
?
?
?
20、實(shí)驗(yàn)性的配色方案
設(shè)計(jì)師對(duì)于色彩的探索從未停止。實(shí)驗(yàn)性的配色方案通常都不會(huì)太完美，但是由于色彩本身會(huì)傳遞出不同類(lèi)型的情緒，實(shí)驗(yàn)性的配色通常由于其獨(dú)特性，而能夠傳遞出更為強(qiáng)烈的情緒和獨(dú)特的體驗(yàn)。
?
?
21、不再使用亂數(shù)假文
現(xiàn)如今對(duì)于UI設(shè)計(jì)的要求越來(lái)越高了，以往在設(shè)計(jì)階段，設(shè)計(jì)師會(huì)用亂數(shù)假文（Lorem Ipsum）來(lái)填充內(nèi)容，但是現(xiàn)在大家已經(jīng)開(kāi)始有意識(shí)地使用真實(shí)的內(nèi)容來(lái)填充界面，確保視覺(jué)到內(nèi)容都有真實(shí)感。
?
?
各種各樣的設(shè)計(jì)趨勢(shì)層出不窮，這一點(diǎn)足見(jiàn)設(shè)計(jì)師們的探索之心。漂亮的視覺(jué)，舒適的體驗(yàn)，流暢的動(dòng)效，自然的聲音，如今的UI設(shè)計(jì)的要求真的是越來(lái)越高。上面所提到的21個(gè)趨勢(shì)當(dāng)中有一些可能會(huì)被淘汰，但是絕大多數(shù)應(yīng)該會(huì)得到保留。為了更好的設(shè)計(jì)，世界范圍內(nèi)的設(shè)計(jì)師都會(huì)不遺余力地前進(jìn)和發(fā)現(xiàn)。
總結(jié)
以上是生活随笔為你收集整理的21个ui设计技巧，让你的设计不落伍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 第一课----色彩构成与色彩模式
- 下一篇： Flex布局实战篇