優質UI的7條準則(一)

本文原文來自於 Medium:https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda,做者爲:Erik D. Kennedy https://twitter.com/erikdkennedy。程序員

雖然是譯文,可是我在字裏行間裏也會加入本身的一些見解。學習

簡介

首先,這個講義並不適用於全部人,他主要是爲了:ui

  • 那些想要駕輕就熟地製做出漂亮 UI 的程序員
  • 那些想要本身的產品集超出常人的 UX 設計師,或是那些想要設計出優於知名 UI 庫的交互的人。

若是你是一個設計學院的學生或者認爲本身是一個很不錯的 UI 設計師,那麼你也許會以爲這篇文章有點乏味,錯誤甚至是使人反感的。不過,anyway。.net

那這些準則能夠告訴你什麼?設計

首先,我曾經是一個徹底沒有 UI 技術的 UX 設計師。固然,我熱愛設計交互,但我以前並無很重視他直到發現設計一款好的交互有不少的好處。rest

  • 我那時的 portfolio 簡直不堪入目,很難反映出本身的思想和努力
  • 那些 UX 的客戶願意去支付一我的的專業技術而非他塗塗畫畫
  • 有朝一日也許我還想創業,那就必定得搞定這個技術

我和不少人同樣,有一個接口,那就是我對「美」沒有概念。做爲一個工程師、程序員,作一個其醜無比的樣式簡直像是天賦。接口

最後,和學習其餘的創造性工做同樣,我也掌握了一些美學的標準:他們標準化,須要認真的思考。並去借鑑那些展現效果很棒的設計。所以,在被支付1個小時的薪酬下,我用了10個小時來研究一個 UI 項目,而多出的9個小時則是無盡地學習。玩命地在 Google, Pinterest 和 Dribbble 上去搜索、抄襲那些成功的設計。get

而這個文章裏的「準則」就是從這些多餘的學習中總結出來的。@那些「nerds」,若是你以爲我如今作的 UI 設計確實不錯,那是由於我用了好久地時間去思考和分析,而非找到了什麼竅門或是神乎其技的直覺。產品

這篇文章也非理論,而單純的是一些應用層面的指導。因此你絕對看不到啥黃金分割,更不會有什麼配色,惟一須要的就是學習、分析、訓練。it

作個比喻,如本的柔道經歷了幾個世紀的發展,裏面蘊含着武道、哲學的思想。你去上柔道課,除了擊敗對手,也會學到不少關於能力流動、平衡的知識。而這篇文正裏的內容更像是 Krav Maga(一種自衛搏擊術),它發明與1930年代的捷克接頭,用於反抗納粹。這種波技術力沒有任何的「道理」,你所要學的就是用盡一塊兒方法幹掉對手。

準則一:光是從上方照下來的

 陰影能夠很是有效地讓人類大腦去快速分析理解一個 UI 裏的元素。

這也許一個很是重要的、但被人忽視的 UI 準則:光從上天上照射下來。當光從上測照下,物體的上面被照亮,而下面會被映出陰影,於是上端顏色略淺,下端略暗。若是翻轉過來,你可能會回想起那些恐怖電影裏,用手電筒自照的女子。

在 UI 設計裏這是同理。爲全部的頁面元素的底邊加上一點點的陰影,就會讓一切有一種 3D 效果。

1-DTB4xeMLpg0DW6NLOYBehw

例如這個簡單設計過的buttons:

  1. Button 未被按下 時,底邊有一個黑色做爲明暗交界。
  2. Button 表面的顏色也從上到下有一個由淺變深的漸變效果,從而展現出了一個微曲的弧線。
  3. Button 未被按下時下端有一塊明確的陰影,來表示光被遮擋。
  4. Button 被按下時,整個表面夜色加深,但上下淺深不變關係。類比於,當按鍵按下時手會遮擋一部分光線。

這樣的光影效果能夠被應用於不少地方。 1-4FCAIgmJa8BuildjlnsDeA例如 iOS 6 裏的開關設計,你能夠明顯感受到內嵌的按鈕通廣上端的光纖呈現出擬物立體感,而這其中包含着不少不少的效果:

  • 開關上測的邊檐映下來一段小的陰影
  • ON 內嵌留有縫隙
  • ON 呈現凹型,且底測有光線
  • Icons外凸,且邊框內的亮白顯示凸顯了光強
  •  整個內側的分割除有小凹槽,顯示了一個很小的陰影。

一樣的設計也出如今下圖中:

1-gWuSN3QN9dSeVwSP2LZVow

那些內嵌的元素:

  • 字符輸入框
  • 按下的 buttons
  • 滑軌的滑扭
  • 未選中的 radio button
  • 未選中的 checkboxes

那些外凸的元素:

  • 未按下的 buttons
  • 滑軌的 buttons
  • 下拉菜單的按鍵
  • 卡片
  • radio button 的按鍵部分
  • 彈出框

這樣的設計幾乎隨處可見。

那麼問題就來了?Flat Design 是咋搞的?

iOS 7 的非標準扁平化設計轟動了整個技術設計界。在沒有凸起和內嵌的世界裏,只剩下了簡單的直線、幾何圖形和純色。

1-YAB8zDDxCmvegvxCu7d8kw

我一樣喜歡簡單幹淨的設計,可是這可能不是一個長期的潮流,由於抽象出來的類 3D 效果肉眼看起來舒服太多了。而更有可能的是,那種半扁平的設計將會主導設計風格,而這種風格被我稱做 「flatty design」。它維持了乾淨簡單的觀感,可是較爲隱晦的陰影會凸顯那些 點擊、滑動、點觸的效果。

1-gWvCSNxqNjyYaq4IF31ZhQ

當我在寫這篇文章的時候,Google 爲其全產品線推出了他們的設計語言 「Material Design」。這樣一種統一化極高的設計風格其實就是在尋找一種高度抽象的光影色彩來模擬現實世界。

全部的 Material Design 展現、講解中都明確地表達了不一樣高度下風格的特色:

1-TtuBo6cCUTyP8XIYGSrIyg

這種 微妙 的樣式變化,展示了一個全新的但又更貼近現實的設計風格。當日,這和 2006 年的電腦界面不一樣,那時沒有紋路、漸變色和光澤。

Flatty將會引領將來,那扁平設計呢?哈哈,其實早就實現啦:

1-Zqcjyz-oIqZZojyYyWVl2Q

相關文章
相關標籤/搜索