宇宙流星風(fēng)是最近風(fēng)靡歐美的一種插畫風(fēng)格，自從網(wǎng)頁(yè)扁平化以后，元素表現(xiàn)就在各種“形”的方面挖掘新風(fēng)格來推波助瀾，就像我們知道的長(zhǎng)陰影就是其一，這種用圓角表現(xiàn)的流星風(fēng)格的插畫，能表現(xiàn)出色彩更為豐富的層次，圓角的表現(xiàn)又顯得柔和可愛，大多用在太空主題的作品中，傳遞出太空星系的速度感和神秘感。
百葉窗的基底
STEP 01
百葉窗算是一種窗簾嗎？就算吧，你一定記得這種水平橫條帶來的遮光革命。先保留一點(diǎn)記憶，再打開AI，文檔大家可以參考我的參數(shù)。繪制一個(gè)矩形的藍(lán)紫色背景。這里的藍(lán)紫色是為了契合太空的主題，你也可以選用其它的顏色作為背景。
STEP 02
先從繪制一個(gè)圓形開始，這里我們繪制一個(gè)紅色的圓形，關(guān)閉掉描邊。然后再繪制一個(gè)矩形。矩形也同圓形一樣顏色。
STEP 03
現(xiàn)在讓我們?cè)佼嬕粋€(gè)豎直的長(zhǎng)條矩形，然后將矩形復(fù)制成為一排，為了讓它們彼此能無(wú)縫對(duì)齊，我采取移動(dòng)的方式復(fù)制。移動(dòng)的水平方向的距離就是矩形的寬度，這樣能保證它們之間的無(wú)縫銜接。填好數(shù)值后點(diǎn)擊“復(fù)制”，再連續(xù)按“Ctrl+D”,直到矩形鋪滿覆蓋住圓形。這時(shí)選中間隔的矩形，將其填充為紫色。這里的紫色同背景色。
再刪掉紫色。這就剩下我們所需要的“百葉窗”。這些被刪掉的矩形看似多此一舉，其實(shí)它發(fā)揮的是“占位”的作用。
STEP 04
這時(shí)，你會(huì)看到在STEP 02中所畫的一個(gè)圓形和一個(gè)矩形，這一步要做的是，把圓形移動(dòng)到最上一層，矩形與“百葉窗”填充相同顏色放置于圓形的下方，然后將其合并。在合并前，我建議大家最好把百葉窗中的其中一條矩形復(fù)制一個(gè)拿出來放在一邊，用于補(bǔ)充繪制的時(shí)候的備用形。
流星尾巴的拖曳
STEP 05
選中上一步的基礎(chǔ)形，這時(shí)會(huì)看到出現(xiàn)了每一個(gè)錨點(diǎn)。你需要知道的是，這里的“百葉窗”其實(shí)就是類似流星的尾巴，因此尾巴要自然，勢(shì)必需要有點(diǎn)錯(cuò)落有致的感覺。因此，你完全可以利用“直接選擇工具”選中錨點(diǎn)進(jìn)行移動(dòng)。
還記得備用形嗎？這里也可以用上作為尾巴的末端拖曳的形狀。
STEP 06
這類效果如果想表達(dá)得更夢(mèng)幻，我認(rèn)為可以通過這類層層疊疊的方式，比如再來一個(gè)外圍做底。這時(shí)，再畫一個(gè)圓，填充粉紅色。這個(gè)圓的半徑與第一個(gè)圓的半徑的大小差剛好是“備用形”的寬度（這時(shí)你知道備用形的重要性了吧~）。
STEP 07
再畫一個(gè)矩形，讓矩形和圓形都置于最底部。這時(shí)，聰明如你，大概又會(huì)猜到了吧，步驟同上一層，只是這里的矩形更長(zhǎng)一點(diǎn)。最后一步就是把圓形、矩形和百葉窗形狀都合并。
STEP 08
再使用一次STEP 05的方法來制作錯(cuò)落的效果。選擇不同的錨點(diǎn)移動(dòng)它們，表現(xiàn)出不同拖曳的情態(tài)。
STEP 09
最后一個(gè)，也是采用同樣的方式，先畫一個(gè)圓形和一個(gè)矩形，放置于最下方。填充為淺藍(lán)色。然后在此基礎(chǔ)上用條狀矩形添加細(xì)節(jié)。
這里需要注意的是對(duì)于這種自由構(gòu)圖的把握，也就是讓它們盡量疏密均勻。
讓尖銳的變圓滑
STEP 10
如果使用AI版本為CC，你可以在選中所有的矩形的時(shí)候，在其中一個(gè)矩形上利用直接選擇工具拖動(dòng)矩形內(nèi)的四個(gè)圓點(diǎn)，往中心移動(dòng)，就讓矩形變成了圓角。如果是舊版本的AI，則需要你運(yùn)用效果中的“風(fēng)格化>圓角”來處理。
STEP 11
靠邊緣的一個(gè)矩形，把它修整一下，最后的效果就出來了。
STEP 12
再來添加一層圓點(diǎn)，讓整體看上去像是在太空的氛圍。增加文字，讓海報(bào)內(nèi)容豐富起來。最終效果如下。
后記
其實(shí)這類風(fēng)格能做出很多款，我們這一次只學(xué)習(xí)一款，如果你手癢，也可以自己先來試試這個(gè)樣式，如果你還覺得不夠，繼續(xù)關(guān)注我們，我們將和你分享更多最新潮流風(fēng)格的設(shè)計(jì)制作方法。
原文地址：ifeiwu
]]>
Daniel Spatzek
Lily Camera
Five Simple Steps
Made by Few
Neo Innovation
Lunar
For Better Coffee
Make your Odyssey
Adventure Nannies
Pipa Estúdio Digital
Alafco HVAC
QED Group
Windows Phone 8 及 Apple iOS 7 界面。
什么情況？
大家怎么就突然從大愛材質(zhì)、斜面和投射陰影突然轉(zhuǎn)向熱衷扁平化顏色和簡(jiǎn)約字體了？這一轉(zhuǎn)變受到了很多因素的推波助瀾，下面是其中比較顯著的幾項(xiàng)。
信息負(fù)荷過度
在當(dāng)今這個(gè)信息延綿不絕的文化背景下，我們每天要不停地接觸各種信息流，有的重要，有的無(wú)關(guān)緊要。我們要不斷地評(píng)估、過濾并且創(chuàng)造各種內(nèi)容，這一切顯然是很費(fèi)神的。此外，我們所攝入的內(nèi)容中有很多都轉(zhuǎn)移到了小屏幕設(shè)備中，從而更加劇了這種負(fù)荷過度的感覺。所以說人們現(xiàn)在很容易對(duì)過量的信息感到應(yīng)接不暇，而減少用戶界面（UI）中的元素則能夠帶來少許視覺上的寧?kù)o。
雜亂不再：Geckoboard的可視化工具可方便你一眼輕松解讀關(guān)鍵數(shù)據(jù)。
簡(jiǎn)約是金
與上述趨勢(shì)類似，很多具有顛覆意義的Web應(yīng)用和服務(wù)可提供功能高度集中的工具。雖然傳統(tǒng)的軟件開發(fā)商比較喜歡在產(chǎn)品中加入大量功能作為高售價(jià)的借口，但是朝著集中化微應(yīng)用轉(zhuǎn)變的風(fēng)潮卻更傾向于使用簡(jiǎn)單代替多樣化的功能組合。應(yīng)用越簡(jiǎn)單，界面也就越簡(jiǎn)單。
漂亮簡(jiǎn)約：Oak的Blue天氣應(yīng)用。
內(nèi)容為王
每當(dāng)有新設(shè)備和技術(shù)進(jìn)入市場(chǎng)之時(shí)，其功能和推動(dòng)交互發(fā)展的程度總會(huì)讓我們?yōu)橹?。繼界面所帶來的迷亂之后，我們一般都會(huì)將注意力重新集中到內(nèi)容上去。不論是文字、音頻還是視頻，對(duì)媒體內(nèi)容的攝入大概是我們使用設(shè)備時(shí)的最主要活動(dòng)，而在這種情況下，我們需要保證界面不會(huì)影響我們的攝入過程。
技術(shù)精通
隨著智能手機(jī)和平板快速普及各種用戶，業(yè)界對(duì)其控制方式顯見性的顧慮日漸消退。盡管一度曾經(jīng)擔(dān)心用戶會(huì)難以看見不顯眼的按鈕，但現(xiàn)在我們卻更愿意探索較為細(xì)微的交互內(nèi)容。Windows 8和Chrome for Android甚至還支持在沒有視覺提示的情況下通過觸摸命令點(diǎn)亮屏幕。
Fitbit的控制面板界面在視覺上表現(xiàn)明亮、大膽而且簡(jiǎn)單好用。
技術(shù)的影響
大部分軟件都會(huì)受限于所運(yùn)行的平臺(tái)。屏幕尺寸和像素密度是硬件方面的限制因素。較小的界面大大限制了設(shè)計(jì)調(diào)色板的范圍，也就意味著界面上的每個(gè)元素都要具有自己的表現(xiàn)力。文字規(guī)模和字體大小將在很大程度上決定扁平化設(shè)計(jì)的美感和可用性。
如果你的目標(biāo)設(shè)備無(wú)法體現(xiàn)出細(xì)微到這種程度的差別，那算你運(yùn)氣好。隨著移動(dòng)設(shè)備的屏幕尺寸和像素密度不斷提高，以后更薄更小的設(shè)備將能實(shí)現(xiàn)更高的清晰度。當(dāng)然，對(duì)@font-face的支持也大大地提升了極簡(jiǎn)化文字核心設(shè)計(jì)的吸引力。
使用Wallmob進(jìn)行實(shí)時(shí)銷售監(jiān)控：記錄所有帶瀏覽器設(shè)備的銷售數(shù)字。
響應(yīng)式設(shè)計(jì)
隨著各種尺寸可聯(lián)網(wǎng)設(shè)備的普及，UI受大勢(shì)所趨而務(wù)求更加流暢，而與之相應(yīng)的，就是響應(yīng)式設(shè)計(jì)風(fēng)潮。盡管響應(yīng)式設(shè)計(jì)不需要特別的美學(xué)，但也可以說扁平化UI相比其他風(fēng)格來說能夠更易于輔助響應(yīng)式設(shè)計(jì)的美觀。最簡(jiǎn)化設(shè)計(jì)的另一優(yōu)勢(shì)在于能夠降低頁(yè)面重量從而減少加載時(shí)間。
簡(jiǎn)單但一點(diǎn)到位：OnSite.(大圖)
最佳實(shí)踐
好了，理論就說到這。下面我們來看看一下實(shí)際操作上的注意事項(xiàng)。打造有效的最簡(jiǎn)化設(shè)計(jì)難度很高。在層層剝離常規(guī)的一些UI元素（投射陰影、斜面、材質(zhì)等等）的同時(shí)，你就會(huì)發(fā)現(xiàn)所剩下的為數(shù)不多的這些元素多么重要。下面的小提示盡管在很大程度上是通用的，但尤其適用于扁平化UI。
開始之前
任何項(xiàng)目都一樣，第一步是先確保自己選定的樣式合理。在開始進(jìn)行扁平化設(shè)計(jì)之前，要先保證自己的設(shè)計(jì)符合目標(biāo)用戶的感覺以及目標(biāo)平臺(tái)、設(shè)備和應(yīng)用類型。如果不適合你的項(xiàng)目情況，那緊跟潮流也沒有意義。
流程
不管你要采用哪種樣式風(fēng)格，遵循流程都是非常重要的。下面的幾個(gè)建議可以幫助你實(shí)現(xiàn)簡(jiǎn)約效果。
· 在設(shè)計(jì)最簡(jiǎn)化界面時(shí)，我一般會(huì)從PC機(jī)出現(xiàn)前的時(shí)代尋找靈感，那時(shí)的設(shè)計(jì)師和藝術(shù)家往往需要做到“多快好省”。接這個(gè)機(jī)會(huì)你可以重新探訪一下過去的很多優(yōu)秀設(shè)計(jì)，例如Josef Müller-Brockmann 和 Wim Crouwel。另外，我還會(huì)看向Ellsworth Kelly等極簡(jiǎn)主義畫家，Mies van der Rohe等建筑家和Dieter Rams等工業(yè)設(shè)計(jì)師。
· 暫時(shí)脫離工作也很有幫助。扁平化和最簡(jiǎn)化設(shè)計(jì)的核心就在于細(xì)微之處。所以，短暫休息后帶著新的眼光重新回到工作中有時(shí)反而比一味苦心琢磨要更有效用。
· 將不同版本毗鄰比較也很有用。在將一條輸入線上下5個(gè)像素來回倒騰了20分鐘之后，我會(huì)保留下兩個(gè)不同版本進(jìn)行比較，這樣孰優(yōu)孰劣馬上見分曉。
· 由于物體的相對(duì)大小具有著非常關(guān)鍵的意義，因此你需要盡早開始在不同種類的設(shè)備上檢視設(shè)計(jì)理念，以便確定其是否合適。
· 在工作的同時(shí)，經(jīng)常自問：“我是否真的需要這個(gè)？”人總是很容易對(duì)自己鐘意的東西念念不舍，但我們還必須頻繁地找出要砍掉或者簡(jiǎn)化的內(nèi)容。拋棄自己費(fèi)盡心思做出來的東西不容易，但編輯取舍也是必須的。
Global Closet：一款由The Workshop為國(guó)家地理教育打造的互動(dòng)游戲。
網(wǎng)格
網(wǎng)格在界面設(shè)計(jì)中扮演著非常關(guān)鍵的角色，絕無(wú)例外。在你拿著一套受限制的視覺元素，努力想確定其各自順序并讓使用方式更加直觀時(shí)，網(wǎng)格能夠帶來很大幫助。
· 網(wǎng)格所確定的，不僅僅是視覺順序。你還可以用它來界定內(nèi)容和功能組。有時(shí)候要將一組物體分組不一定非要用到線條或者方框。簡(jiǎn)單的對(duì)其和空間調(diào)整往往能幫助用戶理解界面的結(jié)構(gòu)。
· 你也可以嘗試使用具有特定重要意義的元素打破網(wǎng)格來吸引用戶的注意力。如果不使用假3D技巧，尺寸與位置等簡(jiǎn)單基本的布局原則則成為了簡(jiǎn)歷視覺層次感的最佳要素。
· 嘗試使用一下密度比較高的網(wǎng)格。在大幅簡(jiǎn)化視覺調(diào)色板時(shí)，你可能會(huì)發(fā)現(xiàn)你的設(shè)計(jì)能夠支持更為復(fù)雜的結(jié)構(gòu)，同時(shí)看起來也不會(huì)顯得凌亂。你也可以試試看僅通過位置調(diào)整能夠傳達(dá)出哪些額外的訊息。
Live School Rossul Design 開發(fā)的iPad應(yīng)用。
顏色
顏色毫無(wú)疑問是視覺設(shè)計(jì)中的一個(gè)關(guān)鍵組成部分。對(duì)于最簡(jiǎn)化界面來說，其所具有的意義更加關(guān)鍵。
· 考慮更為寬泛的調(diào)色板。個(gè)人來說，我覺得范圍比較窄小的調(diào)色板通常能創(chuàng)造出比較功能化的界面。想創(chuàng)造出讓人眼花繚亂的繽紛色彩非常簡(jiǎn)單。但通過下面這種方法，你可以大大拓展一下選擇范圍；而且，考慮到待設(shè)計(jì)元素的數(shù)量很少，擴(kuò)展調(diào)色板還能給你帶來很良好的感覺。
· 在設(shè)定調(diào)色板時(shí)，可以在一個(gè)比較寬泛的色值范圍內(nèi)對(duì)選定的色調(diào)進(jìn)行測(cè)試，并確保其在亮色和暗色下表現(xiàn)都合適。
· 建議分別試驗(yàn)一下同系配色及鮮明對(duì)比。早期對(duì)調(diào)色板進(jìn)行試驗(yàn)將保證你在接下來能夠掌握微妙和強(qiáng)對(duì)比元素所需的全部配色范圍。
TriplAgent的視覺設(shè)計(jì)采用了絕妙的配色方案。
文字
在扁平化內(nèi)容驅(qū)動(dòng)網(wǎng)站上，文字是主角。
· 襯線體無(wú)疑是個(gè)辦法，但無(wú)襯線字體卻能讓人感到更為簡(jiǎn)潔。
· 你可以找一個(gè)粗細(xì)和樣式種類比較多的字體類型。雖然不一定全用的上，但比較寬泛的選擇范圍有助于更為鮮明地界定層次結(jié)構(gòu)。你也可能會(huì)發(fā)現(xiàn)某個(gè)粗細(xì)度在某個(gè)特定環(huán)境下效果更佳。
· 不要怕使用大小粗細(xì)走極端的字體搭配來構(gòu)建視覺順序。嘗試使用超大超細(xì)的標(biāo)題字體搭配小號(hào)中等粗細(xì)的正文字體。
· 注意字體是否易于辨認(rèn)閱讀。這一點(diǎn)雖然聽起來有點(diǎn)無(wú)厘頭，但你對(duì)自己所選定字體的依仗將是很強(qiáng)烈的，所以一定要保證其在任何尺寸小均易于辨認(rèn)。
Siteleaf上清爽易讀的文字。
交互
在扁平化UI中，要表現(xiàn)出哪些元素可交互是個(gè)有學(xué)問的活。下面是我常用的一些方法。
· 對(duì)比如果布局內(nèi)容中大部分為白色，那可以給交互元素添加一定其他色彩。如果你的設(shè)計(jì)以文字為主，可以使用簡(jiǎn)單的圖標(biāo)表示交互。如果標(biāo)題比較大而且全部為小寫字母，那么鏈接部分可以做小一點(diǎn)并使用大寫字母。你懂的。
· 常規(guī)的位置安放方法也能起到作用。比方說你的后退箭頭使用細(xì)V形表示，可以將其放置到左上角，因?yàn)橛脩粢话銜?huì)到這個(gè)位置找后退按鈕。
· 隨著頁(yè)面上疊加內(nèi)容的增加，我們無(wú)法將所有可交互元素都做成按鈕的樣子。界面應(yīng)盡量直觀。但如果交互過程比較復(fù)雜或有違常規(guī)，則應(yīng)提供方便的錯(cuò)誤恢復(fù)方法。
· 下拉菜單、模擬窗口、彈出式窗口及其他層疊元素對(duì)于扁平化設(shè)計(jì)來說操作起來比較麻煩。你可以采用鮮明的對(duì)比、邊框或著色區(qū)分不同的交互層級(jí)。
所呈現(xiàn)的設(shè)計(jì)要素布局簡(jiǎn)單，對(duì)比度優(yōu)秀：Taasky.
結(jié)尾
在設(shè)計(jì)領(lǐng)域沒有一成不變的規(guī)范。看到各位設(shè)計(jì)師如此熱忱地投入極簡(jiǎn)化用戶界面的設(shè)計(jì)令人歡欣鼓舞。但是，探索扁平化設(shè)計(jì)是否就意味著絕不使用漸變和陰影？當(dāng)然不是。事實(shí)上，我近期看到的幾個(gè)很有意思的作品一方面以巧妙的方式呈現(xiàn)出了內(nèi)容，另一方面也保證了交互的直觀易懂，從而實(shí)現(xiàn)了扁平化和尺寸直接的平衡。
在這個(gè)互聯(lián)互通、信息豐裕、功能豐富的數(shù)字時(shí)代，最簡(jiǎn)化設(shè)計(jì)廣泛的復(fù)興讓人眼前一亮。這自然不會(huì)是無(wú)所不能的解決方案（沒有任何一種風(fēng)格能做到無(wú)所不能），但只要經(jīng)過深思熟慮和恰當(dāng)?shù)膽?yīng)用，其能夠?qū)崿F(xiàn)既好用，有舒適的數(shù)字體驗(yàn)。
原文地址：smashingmagazine
]]>