女神必備-川普也能變萌妹: 美圖秀秀 (上)

 

trump-e1484896156543

App intro based on play store
Installs: 10,000,000 – 50,000,000
User review:4.5, 401,710 total
Download link: https://play.google.com/store/apps/details?id=com.mt.mtxx.mtxx&hl=en

忘了遮瑕,沒擦口紅,眼線暈開,還是不上道的男友總是抓錯拍照角度…. 沒關係,只要手機裝有美圖秀秀,連川普都能變萌妹!

美圖秀秀在Google Play上的評價一項不錯,在UIUX上的設計也是不斷持續進步。目前在兩大應用平台上,也依循著各自的設計規範,做出兩種Flat design 以及 Material Deisgn不同感覺的介面設計。今天我們要來看的就是發佈在Android版本中的美圖秀秀。

普遍而言,介面設計和2d空間的平面設計不同。介面設計中,不同的物件會有不同的互動方式。像是說,導覽的物件是不太需要滑動的,如App Bar, Bottom Navigation Bar基本上是不會跟著內容頁面一起轉動。
為了要傳達這個概念,因此在Material Design中,就是在除了XY軸以外,每個物件都有自己的Z 軸(深度軸)。當介面創造出深度空間,使用者自然就會發現每個元件都是獨立不同的物件,對於不同的互動模式就不會太過驚訝。

在新版的美圖秀秀中,可以看出來中,App Bar就有疊上一層淡淡的陰影。

當在滑動內容頁面的時候,當內容頁面從App Bar後穿過的時候,一切都是這麼的自然~

而下一個是Material Design中也很重要的動畫效果。雖然說網路上對於動畫的效果有褒有貶,但個人覺得在使用動畫的分寸只要拿捏得好,其實就像陰影一樣,可以讓整個體驗更為優雅,但是過頭的話就是讓人想到PPT中那些可怕的過場動畫呀!(抖)

新的美圖秀秀中,一進首頁也是用了絢麗的動畫效果(畢竟人家的TA是女子較多)個人覺得在這頁面中,有些動畫做得好又些又稍嫌多於一些。要用動畫一定要知道為什麼要使用動畫,個人喜歡的部份是在最上面小小的”Drag down to selfie”的提示文字,他只有在一開始進來的時候會顯示大概兩次,也可以讓使用者在一片相似的按鈕中,找到下一步行動的明燈~

很多中國的APP首頁設計都會在首頁,放了很多很像的按鈕,這種Dashboard pattern 設計常常會讓使用者無所適從,(想像進到一個房間中,裡面又有六扇門在你面前,有完沒完)。雖然說美圖秀秀首頁設計還是有這種Dashoboard pattern 設計,但是新版有些新的改變,把使用者最常使用的 Camera做了較為突出的設計。

Screenshot_20170723-192145.png

還有一個也是蠻喜歡的設計,就是在按下按鈕進到下一個頁面,和退出頁面的動畫是一致的,這些小小的細節讓整體的體驗更為細緻。

最後一個比較不懂的是,每次進到首頁的動畫由右滑到左邊,淡入的效果好像和整體不太搭嘎。當使用者急著拍照的時候,多那兩秒的動畫反而會造成反效果。最後,最無法理解的是背景那位衝浪客在那邊幹嘛.. (待續)

 

女神必備-川普也能變萌妹: 美圖秀秀 (上)

 

trump-e1484896156543

App intro based on play store
Installs: 10,000,000 – 50,000,000
User review:4.5, 401,710 total
Download link: https://play.google.com/store/apps/details?id=com.mt.mtxx.mtxx&hl=en

忘了遮瑕,沒擦口紅,眼線暈開,還是不上道的男友總是抓錯拍照角度…. 沒關係,只要手機裝有美圖秀秀,連川普都能變萌妹!

美圖秀秀在Google Play上的評價一項不錯,在UIUX上的設計也是不斷持續進步。目前在兩大應用平台上,也依循著各自的設計規範,做出兩種Flat design 以及 Material Deisgn不同感覺的介面設計。今天我們要來看的就是發佈在Android版本中的美圖秀秀。

當美圖遇上Material Design

普遍而言,介面設計和2d空間的平面設計不同。介面設計中,不同的物件會有不同的互動方式。像是說,常常需要被點擊的導覽欄,如App Bar, Bottom Navigation Bar基本上是不會跟著內容頁面一起轉動。
為了要傳達每個物件都是各自運轉的概念,在Material Design中,就是在除了XY軸以外,每個物件都有自己的Z 軸(深度軸)。當介面創造出深度空間,使用者自然就會發現每個元件都是獨立不同的物件,對於不同的互動模式就不會太過驚訝。

在新版的美圖秀秀中,可以看出來中,App Bar就有疊上一層淡淡的陰影。

當在滑動內容頁面的時候,當內容頁面從App Bar後穿過的時候,一切都是這麼的自然~

ezgif-1-410f4528dc.gif

拍照軟體中的動畫效果

而下一個是Material Design中也很重要的動畫效果。雖然說網路上對於動畫的效果有褒有貶,但個人覺得在使用動畫的分寸只要拿捏得好,其實就像陰影一樣,可以讓整個體驗更為優雅,但是過頭的話就是讓人想到PPT中那些可怕的過場動畫呀!(抖)

新的美圖秀秀中,一進首頁也是用了絢麗的動畫效果(畢竟人家的TA是女子較多)個人覺得在這頁面中,有些動畫做得好又些又稍嫌多於一些。要用動畫一定要知道為什麼要使用動畫,個人喜歡的部份是在最上面小小的”Drag down to selfie”的提示文字,他只有在一開始進來的時候會顯示大概兩次,也可以讓使用者在一片相似的按鈕中,找到下一步行動的明燈~

ezgif-1-04e4ecc585.gif

很多中國的APP首頁設計都會在首頁,放了很多很像的按鈕,這種Dashboard pattern 設計常常會讓使用者無所適從,(想像進到一個房間中,裡面又有六扇門在你面前,有完沒完)。雖然說美圖秀秀首頁設計還是有這種Dashoboard pattern 設計,但是新版有些新的改變,把使用者最常使用的 Camera做了較為突出的設計。

還有一個也是蠻喜歡的設計,就是在按下按鈕進到下一個頁面,和退出頁面的動畫是一致的,這些小小的細節讓整體的體驗更為細緻。

ezgif-1-eb5cded7bb.gif

最後一個比較不懂的是,每次進到首頁的動畫由右滑到左邊,淡入的效果好像和整體不太搭嘎,也不太理解為什麼背景那位衝浪客在那邊幹嘛.. (待續)