本文原文來自於 Medium:https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda,做者爲:Erik D. Kennedy https://twitter.com/erikdkennedy。程序員
雖然是譯文,可是我在字裏行間裏也會加入本身的一些見解。學習
首先,這個講義並不適用於全部人,他主要是爲了:ui
若是你是一個設計學院的學生或者認爲本身是一個很不錯的 UI 設計師,那麼你也許會以爲這篇文章有點乏味,錯誤甚至是使人反感的。不過,anyway。.net
那這些準則能夠告訴你什麼?設計
首先,我曾經是一個徹底沒有 UI 技術的 UX 設計師。固然,我熱愛設計交互,但我以前並無很重視他直到發現設計一款好的交互有不少的好處。rest
我和不少人同樣,有一個接口,那就是我對「美」沒有概念。做爲一個工程師、程序員,作一個其醜無比的樣式簡直像是天賦。接口
最後,和學習其餘的創造性工做同樣,我也掌握了一些美學的標準:他們標準化,須要認真的思考。並去借鑑那些展現效果很棒的設計。所以,在被支付1個小時的薪酬下,我用了10個小時來研究一個 UI 項目,而多出的9個小時則是無盡地學習。玩命地在 Google, Pinterest 和 Dribbble 上去搜索、抄襲那些成功的設計。get
而這個文章裏的「準則」就是從這些多餘的學習中總結出來的。@那些「nerds」,若是你以爲我如今作的 UI 設計確實不錯,那是由於我用了好久地時間去思考和分析,而非找到了什麼竅門或是神乎其技的直覺。產品
這篇文章也非理論,而單純的是一些應用層面的指導。因此你絕對看不到啥黃金分割,更不會有什麼配色,惟一須要的就是學習、分析、訓練。it
作個比喻,如本的柔道經歷了幾個世紀的發展,裏面蘊含着武道、哲學的思想。你去上柔道課,除了擊敗對手,也會學到不少關於能力流動、平衡的知識。而這篇文正裏的內容更像是 Krav Maga(一種自衛搏擊術),它發明與1930年代的捷克接頭,用於反抗納粹。這種波技術力沒有任何的「道理」,你所要學的就是用盡一塊兒方法幹掉對手。
陰影能夠很是有效地讓人類大腦去快速分析理解一個 UI 裏的元素。
這也許一個很是重要的、但被人忽視的 UI 準則:光從上天上照射下來。當光從上測照下,物體的上面被照亮,而下面會被映出陰影,於是上端顏色略淺,下端略暗。若是翻轉過來,你可能會回想起那些恐怖電影裏,用手電筒自照的女子。
在 UI 設計裏這是同理。爲全部的頁面元素的底邊加上一點點的陰影,就會讓一切有一種 3D 效果。
例如這個簡單設計過的buttons:
這樣的光影效果能夠被應用於不少地方。 例如 iOS 6 裏的開關設計,你能夠明顯感受到內嵌的按鈕通廣上端的光纖呈現出擬物立體感,而這其中包含着不少不少的效果:
一樣的設計也出如今下圖中:
那些內嵌的元素:
那些外凸的元素:
這樣的設計幾乎隨處可見。
iOS 7 的非標準扁平化設計轟動了整個技術設計界。在沒有凸起和內嵌的世界裏,只剩下了簡單的直線、幾何圖形和純色。
我一樣喜歡簡單幹淨的設計,可是這可能不是一個長期的潮流,由於抽象出來的類 3D 效果肉眼看起來舒服太多了。而更有可能的是,那種半扁平的設計將會主導設計風格,而這種風格被我稱做 「flatty design」。它維持了乾淨簡單的觀感,可是較爲隱晦的陰影會凸顯那些 點擊、滑動、點觸的效果。
當我在寫這篇文章的時候,Google 爲其全產品線推出了他們的設計語言 「Material Design」。這樣一種統一化極高的設計風格其實就是在尋找一種高度抽象的光影色彩來模擬現實世界。
全部的 Material Design 展現、講解中都明確地表達了不一樣高度下風格的特色:
這種 微妙 的樣式變化,展示了一個全新的但又更貼近現實的設計風格。當日,這和 2006 年的電腦界面不一樣,那時沒有紋路、漸變色和光澤。
Flatty將會引領將來,那扁平設計呢?哈哈,其實早就實現啦: