從IPhone X全面屏管窺2018移動UI視覺風格特色

現在是2017年10月24日 ，距離iPhone X正式發售的日子還有三天。iPhone X是蘋果第一款全面屏產品。由於iphone的基本形狀一直是圓角矩形，所以這次在延續圓角矩形的同時，屏幕勢必也是相同的圓角矩形。在iphone x發布以來，許多UI設計師也做了相關的mockup概念稿。那麼在這篇文章裡面就讓我們以在ui界比較火熱的作品站Dribbble為一個參照體系，通過這些點贊數較高的作品來視圖提取出一些設計趨勢，看看是否這些活躍在一線的人氣設計師是否為適應iPhone x的圓角矩形屏幕做出設計上的改變。

首先讓我們打開dribbble，搜索app，點選recent，這樣就會看到最近提交的與app有關的ui設計作品：

其次讓我們選擇一些點贊數超過100的作品來觀摩：

iphone-x

Xplr App

Photo App Interactions

Hotel Management Dashboard iPhoneX

Information Review

Addiction Recovery App

Trading app - iOS app iPhone x

food exploration

從以上這些dribbble近期的人氣作品來看，有一些可以歸納出來的共性：

1.圓角矩形元素的大量使用：顯然在一個圓角矩形的屏幕上多使用圓角矩形的元素,如按鈕和卡片，能夠和屏幕本身的形狀形成一個統一的風格，至於安卓方面，可以參考目前市面上已有的全面屏安卓手機，如三星s8，小米mix2等也不約而同採用了圓角矩形屏幕。

2.懸浮卡片設計：這可以說是由扁平化像擬物妥協一點的產物，最初來源當然是google的material design，在這兩年的演化中，許多優秀作品裡面出現一種高偏移的陰影，從視覺上拉遠卡片與背景的距離。從交互上來說，這有利於用戶區分內容的分類。

3.相鄰色相漸變色：由於扁平化的風格捨棄了光影變化，那麼為了使得視覺上更豐富，一種比較受設計師們認可的方式就是在一個形狀內添加高純度高飽和度的鄰近色相漸變，最初來源於ios 7對圖標背景的處理。

4.大字型大小標題

綜述：從以上的手機對全面屏的演化和dribbble上近期人氣作品的觀察，我們似乎可以得出這樣的結論：懸浮圓角卡片和鮮艷漸變色塊的設計元素會延續到明年，那麼想做出更潮更有時代感的視覺，不妨從這兩個方面入手。