400-999-6558
廈門UI設計培訓:優雅的UI設計7條準則
作者:   來源:    時間:2017-06-07   字體:[大] [中] [小]

  廈門UI設計培訓:優雅的UI設計7條準則

  給菜鳥的良言:如果你在UI設計上不夠好,那是因為你更善于分析,而不是在美和平衡上沒有天賦。

  這篇文章不是理論,而是實踐。這里沒有黃金分割,也沒有配色寶典,只有我的一些經驗教訓和一直以來的練習。

  舉例來說,柔道因為日本尚武的傳統思想一直延續到現在。可是學習柔道的時候,除了演練,你也會聽到關于力量、流派以及和睦這類的東西。

  上個世紀三十年代,在(前)捷克斯洛伐克,一些同納粹斗爭的猶太人發明了近身格斗術。在這種不優雅的格斗術課上,你會學到如何用一支鋼筆或者一本書來刺瞎敵人的眼睛。

  UI是顯示屏上的近身格斗術。

  下面來介紹設計優雅UI的幾條準則:

  讓光影自然

  層次優先

  充分留白

  學習圖文堆疊

  使用多種文本樣式

  選擇適合的字體

  像藝術家一樣尋找靈感

  第一條:讓光影自然

  陰影是最自然的暗示,它可以突出我們想讓用戶注意到的界面元素。

  “讓光影自然”——這可能是學習UI設計最重要卻最容易忽視的準則。因為光總是天上射下來,所以一旦它反著從下而上,我們就會覺得非常別扭。

  當光從天空中射下來,會照亮最上面的事物,并且向下投射出它們的影子。所以頂部最亮,而底部最暗。

  你平常不會看到下眼瞼陰影很重的人,所以如果有人在臉的下方打光,然后站在你的門前,你肯定會被嚇個半死。

  沒錯,這對UI來說也是一樣。在用戶界面中,所有的元素都有陰影和所有的元素都沒有陰影效果其實是一樣的。我們的屏幕是二維的,但是我們給元素加入了很多效果,讓它們看起來像是三維的。

  我最喜歡這個按鈕被圈出來的右下方的部分

  拿按鈕來說,就算是這種扁平化的按鈕也會有一些光影細節。

  沒有按下去的按鈕(第一個),底邊有深色的投影。

  第一個按鈕會有一個從上到下,從淺到深的漸變,這是因為它在模仿微凸的效果。就像你照鏡子的時候會把鏡子稍稍傾斜來采光,按鈕也是如此,表面的微凸會增加光澤質感。

  第一個按鈕的投影非常精致,放大看會更明顯。

  按下狀態的按鈕雖然仍舊有從上到下,從淺到深的漸變,但是整體明度較低。這是因為光一般很難到達向下凹陷的面。在現實生活中也是如此,因為我們在按下按鈕時手會擋住光。

  這僅僅是一個按鈕,但是仍然會有四種光的微效果。我們可以通過下面這個例子來了解一下。

  雖然iOS6的風格已經有點過時了,但是它在光的質感表現方面做的非常好。

  這是一對iOS6的設置按鈕——“請勿打擾”和“通知”。你是不是覺得這沒什么特別的?那我們現在來看看這兩個按鈕上有多少光影效果吧。

  “請勿打擾”所在的控制面板有微弱的投影。

  “ON”的滑塊軌道有微凹感。

  “ON”的滑塊軌道的凹面的底部有反光。圖標是微微向外突出的,有看到他們上邊的高光嗎?他們的光是從上方垂直投射下來的,所以你可以看到很大塊的高光。

  離邊角越遠,光的層次越豐富,反之則越單一。

  是一個分界線的細節圖,來自于我很早以前的“Hubster”概念。

  大多數凹面感覺的元素:

  文本輸入區域

  下壓的按鈕

  滑塊軌道

  單選按鈕(不可恢復得)

  復選框

  大多數凸面感覺的元素:

  按鈕(自然狀態)

  滑塊按鈕

  下拉控制菜單

  選項卡

  部分單選按鈕

  彈出窗口

  現在你了解了,以后就可以全面的賞析光影效果了。伙計們,不用太感謝我。

  等等,扁平化設計的光影效果又是怎樣的呢?

  iOS7因為“扁平化設計”轟動一時,正如其名,它的設計風格就是“扁平”。它形狀沒有擬物化,也沒有刻意追求材料質感,只是用了線條、形狀和純色塊來進行設計。

  盡管我非常喜歡簡潔風,但是我并不認為這種風格能一直流行。反而在界面設計中,那種看起來很逼真的擬物化風格是我們無法完全拋棄的。

  更有可能的是,半扁平化的界面設計可能會在未來更受歡迎,與君共勉,希望你能在以后熟練掌握這種風格。雖說要保持簡潔,但是你還是得應用光影來增加用戶觸摸,滑動,點擊的交互欲望。

福建愛達華

學習加微信
快3遗漏