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