編者按：什么是無框界面？憑什么斷言它能成為2017年的主流UI 設(shè)計(jì)風(fēng)格？雨涵_Zoe 這篇干貨文章為你揭秘。

什么是無框界面？

縱使幾大設(shè)計(jì)風(fēng)格已形成寡頭壟斷（如蘋果的圓角玻璃、谷歌的層級(jí)、微軟的方塊…），但界面設(shè)計(jì)的進(jìn)化歷程才剛剛開始。

寫過關(guān)于去形式化的話題。在這個(gè)新趨勢(shì)中，界面上的內(nèi)容越來越重要，相對(duì)的，一切與內(nèi)容無關(guān)的都被大大削減。

去形式化是一張非常模糊的全景圖，在演化中一些新的設(shè)計(jì)風(fēng)格逐漸清晰起來，例如——無框界面。

也許你已經(jīng)發(fā)現(xiàn)了，今年來越來越多的網(wǎng)站和應(yīng)用，尤其是那些注重設(shè)計(jì)的，都有這樣的趨勢(shì)。曾經(jīng)用來劃分區(qū)域的邊框和邊線逐漸消失，然而在干凈的界面上，通過距離分割，各區(qū)域的差別依舊清晰可辨。

就重要性而言，在app應(yīng)用中色彩元素扮演的角色僅次于功能。 人與計(jì)算機(jī)的互動(dòng)主要基于與圖形用戶界面元素的交互，而色彩在該交互中起著關(guān)鍵作用。 它可以幫助用戶查看和理解APP內(nèi)容，與正確的元素互動(dòng)，并了解操作。 每個(gè)APP都會(huì)有一套配色方案，并在主要區(qū)域使用其基礎(chǔ)色彩。

@你丫才美工 ：今天要給大家分享的是Behance上的一篇2017設(shè)計(jì)趨勢(shì)總結(jié)，雖然前陣子美丫姐在微博上還吐槽了近段時(shí)間各種設(shè)計(jì)趨勢(shì)總結(jié)追風(fēng)成影，但這篇還是很打動(dòng)我的。因?yàn)樗鼘?shí)在是太全面了，并且案例收集的非常精良。完全可以當(dāng)做一個(gè)龐大的靈感庫(kù)，時(shí)不時(shí)拿出來看看也是極好的！

下面是美丫姐的小伙伴阿昕翻譯的中文版本，希望給大家?guī)韼椭?/span>

你有沒有在夜間使用移動(dòng)設(shè)備的習(xí)慣？你覺得QQ現(xiàn)有的夜間模式亮度在使用時(shí)是否舒適？

為了能夠更科學(xué)的驗(yàn)證我們的設(shè)計(jì)，我們通過對(duì)比度分析、尼特值測(cè)試、色彩亮度和色彩通用性等維度去設(shè)計(jì)界面，并總結(jié)出一套優(yōu)化方法來分享給大家，相互啟發(fā)。

新用戶引導(dǎo)絕對(duì)是個(gè)瓶頸?；ㄙM(fèi)時(shí)間設(shè)計(jì)和開發(fā)，找了用戶測(cè)試調(diào)研，最后上線了，依然攔不住洶涌的用戶流失潮。很多時(shí)候，也許只是新用戶引導(dǎo)沒做好而已。今天的文章，我們來聊聊新用戶引導(dǎo)的設(shè)計(jì)~

讓用戶注冊(cè)本身就不是一件容易的事情。產(chǎn)品團(tuán)隊(duì)需要花費(fèi)大量的時(shí)間、精力、金錢來提升產(chǎn)品的注冊(cè)量，而更嚴(yán)峻的問題在于，許多用戶注冊(cè)完成之后，嘗試一次之后，就再也不用了，來之不易的注冊(cè)用戶就此流失。根據(jù) Andrew Chen的研究表明，平均每個(gè)APP會(huì)在用戶安裝后3天丟失77%的日活用戶。

你絕對(duì)不希望在投入了如此之多、收獲新用戶之后，在幾天之內(nèi)丟失其中的多數(shù)。那么，要怎樣才能做的更好呢？一個(gè)優(yōu)質(zhì)的新用戶引導(dǎo)流程（Onboarding），能幫你的產(chǎn)品獲得良好的第一印象。

這是一個(gè)16年就著手的項(xiàng)目，項(xiàng)目名稱叫怡呼吸，主要是醫(yī)療產(chǎn)品的哮喘細(xì)分領(lǐng)域。拖到現(xiàn)在終于把所有的界面和思考過程整理好。整個(gè)改版流程是獲取需求－需求分析－用戶定位－競(jìng)品分析－信息架構(gòu)整理－wireframe－user
flow－原型圖－視覺設(shè)計(jì)－評(píng)審－優(yōu)化設(shè)計(jì)。從交互到UI，算是對(duì)自己16年的一個(gè)總結(jié)。

2017年剛剛開始，美丫姐已經(jīng)在不同的平臺(tái)看到了不少關(guān)于2017年的設(shè)計(jì)趨勢(shì)分析了。很多會(huì)從設(shè)計(jì)風(fēng)格或是應(yīng)用平臺(tái)等不同的維度進(jìn)行分析，看完之后也是大受啟發(fā)。不過還沒有看到從設(shè)計(jì)師自身的維度來寫的文章，所以今天就想要言簡(jiǎn)意賅的從設(shè)計(jì)師本身出發(fā)，進(jìn)行所謂的趨勢(shì)化的歸納總結(jié)。

畢竟，我們不斷的研究設(shè)計(jì)技法，也是為了成為更好的設(shè)計(jì)師。

廢話少說，近兩年互聯(lián)網(wǎng)的形式趨于平穩(wěn)。各類互聯(lián)網(wǎng)產(chǎn)品不再如雨后春筍一般冒出來，整個(gè)行業(yè)從風(fēng)口也慢慢的退下來，趨于規(guī)范化。簡(jiǎn)單來說就是大家都理智起來，投資人理智了，創(chuàng)業(yè)公司沒辦法像以前那么容易拿到風(fēng)投了；消費(fèi)者也理智了，即使是行業(yè)中壟斷的龍頭們也沒辦法爆發(fā)式的增長(zhǎng)利潤(rùn)了。

一個(gè)完整的App包含很多頁(yè)面，設(shè)計(jì)一個(gè)App是一個(gè)很系統(tǒng)的工程。竹子會(huì)陸續(xù)撰寫教程，帶著大家完整的學(xué)習(xí)設(shè)計(jì)App的過程。我們先從登錄頁(yè)設(shè)計(jì)開始學(xué)習(xí)。

扁平化設(shè)計(jì)在過去的幾年當(dāng)中以驚人的速度發(fā)展起來，并且隨著用戶需求的變化而逐步進(jìn)化。扁平化設(shè)計(jì)看似簡(jiǎn)單，但是其中分支多樣，涉及到的技術(shù)多樣，相關(guān)規(guī)范也都比較系統(tǒng)。

到現(xiàn)在，扁平化設(shè)計(jì)所探討的核心已經(jīng)從最初的標(biāo)準(zhǔn)化設(shè)計(jì)轉(zhuǎn)向如何創(chuàng)造視覺焦點(diǎn)了，所以，目前的扁平化設(shè)計(jì)當(dāng)中，值得注意的要點(diǎn)大多是圍繞著這一需求來的。

編者按：今天的好文，總結(jié)了兩位設(shè)計(jì)師的工作經(jīng)驗(yàn)，內(nèi)容干貨不用多加描述，同為設(shè)計(jì)師，這個(gè)問題的答案，你一定想知道（附神器?。?>>>

酸梅干超人：首先，作為一個(gè)設(shè)計(jì)師，尤其是UI設(shè)計(jì)師，請(qǐng)跟我一起大聲念：必須掌握前端切圖流程！！

這可能意味著你得學(xué)會(huì)HTML+CSS，或者要長(zhǎng)時(shí)間和IOS或者安卓開發(fā)人員交流他們是怎么把圖片和文字排進(jìn)屏幕內(nèi)的。別老是抱怨你是設(shè)計(jì)怎么能去學(xué)碼農(nóng)的東西，設(shè)計(jì)人員對(duì)這些看似高深的源碼有本能的畏懼和厭惡。無論你所在的公司在項(xiàng)目人員配置上如何貼心到位，但如果你自己沒有掌握這些知識(shí)點(diǎn)，就不要妄想最后實(shí)現(xiàn)環(huán)節(jié)上能順利收尾，因?yàn)槟銖某霭l(fā)點(diǎn)開始和程序員的認(rèn)知就不對(duì)稱，這些不對(duì)稱是矛盾和偏差的根源。

讓我們來舉舉例子：