Adobe Preview - Photoshop與手機同步畫面

有一個Adobe的APP,我每天都在使用。
就是Adobe Preview - 可以在iPhone上面輕易跟Photoshop同步畫面的APP。
以前想要在手機上面預覽Photoshop畫面,都得使用第三方的APP,但是穩定度不高,所以經常不能同步畫面而浪費時間。

使用了Adobe Preview幾個月下來,覺得穩定度非常高,可以說是UI或網頁相關工作必備的工具了。

使用方法非常簡單:

Step1:
手機先下載Adobe Preview









iOS:
https://itunes.apple.com/tw/app/adobe-preview-cc/id973272286

Android:
目前還沒有Android版本



Step2:














啟動iPhone的Adobe Preview,並且確定手機跟電腦有用USB連接



Step3:
啟動Photoshop的Device Preview


















成功的話,Device preview上會出現你的手機名字~












Step4:
連線成功,馬上就會在手機上看到Photoshop上的畫面了。














Adobe Preview方便的是,不用註冊就可以用。
所以只要手機上有裝Adobe Preview的話,只要用USB跟電腦一連線,就馬上可以預覽~


Photoshop CC 2015 Artboard功能

Adobe CC上個月有一個重大的更新版本。
而Photoshop也更新為Photoshop CC 2015了。
最吸引我的一點是Photoshop加了Artboard(工作區)功能了!
沒錯,就是像Illustrator那種,可以設定很多工作區,也可以一次把所有工作區域存檔出來。
但是Photoshop的工作區域,有更方便Mobile UI或Web製作的功能。

我因為工作需求,會常常做APP UI或WEBDesign,以前都是在Illustrator排版,再複製到Phtoshop去用Image assets存檔。
但是Photoshop有了Artboard功能的話,應該會考慮連排版都可在Photoshop做,而Illustrator就拿來專門做icon等圖像。

最近很多做UI的人都會用Sketch這個軟體,因為有一些方便UI製作的功能。其實我有使用過,確實有一些方便的功能,但是因為又要學一套軟體,又要適應一個新的環境&邏輯,對我來說實在太麻煩了,所以我摸一下Sketch就放棄了。( 因為其他要學的東西已經夠多啦!)
這次一聽到Photoshop有了Artboard功能,我更確定我可以安心地使用Photoshop就好,不用去學別的軟體了~

詳細的使用教學,請看影片:

用Adobe Brush一分鐘做自製筆刷




曾經常試過自己製作 Illustrator 的筆刷,但是每次看別人的教學,我還是搞不懂製作方法。

但是Adobe Brush這個APP,讓筆刷的製作過程變得好簡單又快速
只要知道流程,很快就可以製作出來一個獨一無二的筆刷了。


我試著用番茄醬,來做做看筆刷,過程直接看影片教學吧~

需要軟體:
1. Adobe illustrator CC
2. Adobe Brush (iOS APP)
3. Adobe Creative Cloud 帳號

video

下載Adobe Brush
https://itunes.apple.com/tw/app/adobe-brush-cc/id911158339?mt=8

[教學]Photoshop CC 的Image Assets功能,讓存檔效率提昇好幾倍

Image Assets

我從Photoshop 3.0就開始在使用,隨著版本更新,也有了很多方便功能。
但是其實很多人即使換成了新版本,還是繼續使用舊的方法,對於新版本的功能不太熟悉。
(包含我自己在內XD)

不過這個Photoshop CC的新功能,可以說是我第一個學會的CC新功能,也是非常愛又常常使用的供能。
把存檔速度大大提昇,工作效率也變快了。
可以說是網頁設計師及UI設計師會感動的功能。

到底Image Assets是什麼功能呢?
簡單地說,就是自動存圖的功能。
過去做網頁的時候,如果要存一個按鈕,你可能會單獨存檔或用Slice功能。
但是有了Image Assets,讓存檔方式多了一個選擇。

Image Assets基本使用法:


我製作了一個簡單的Web首頁。
假設我要將各別圖層,利用Image Aggests功能一口氣存檔。



[插畫]比氣象還要猜不透的冬著之謎


寒流來襲,經常在路上看到這樣的上下強烈衝突的打扮。

黑貓宅急便APP UI 台 v.s.日 微評比

最近看到日本黑貓的APP,覺得很可愛,下載來使用看看。
也跟台版的做了一點比較。





↑ 中間那部黑貓貨車會跑

晚上啟動APP,背景會呈現夜晚的狀態。




























這樣的背景安排,讓人忍不住隨時想進去看看,畫面是否有新變化。

這APP最可愛的一點是,那一部黑貓的貨車。
它會隨著畫面的移動,跟著移動。
而且會隨著移動方向不同而從不同方向出現。

我錄了一小段操作的影片,直接看比較清楚 ↓





























看看跟台灣的黑貓APP做了比較。
這是主頁 :

↑ 雙方的主頁都是「包裹查詢頁面」


預約寄件功能 :

↑ 可能是兩者想強調的功能不同,預約到府收寄件的功能,在日本版本是被排在「其他」裡面,而且還要先加入會員才能使用此功能。台版,只要輸入資料就可以,不必先加入會員,非常方便。



↑ 這個「送り状作成」功能,是線上製作或預約寄貨單的功能。可以在線上填寫資料,到7-11直接列印或是專人會把印好的寄貨單送到你家。

台版UI雖然是走純樸Native APP路線,視覺上沒有華麗的效果,但是基本該有的功能都有。操作上還蠻清楚,較複雜的操作都是按照setp一步一步進行,不會造成迷路的狀態。

而日版的視覺可愛,感覺的出努力在塑造溫馨又親切的形象。而主要功能頁面的UI,有非常明顯的輕重之分,讓第一次使用的人也可以很快就知道下一步要按哪裡。

以搜尋包裹畫面為例:


日版的第一眼比較容易把視覺焦點集中在最主要的「搜尋單一包裹」功能。其它次要功能則用小icon安排在右側,呈現出對比與層次感。
台版的則是主要功能與次要功能的面積都差不多大,所以第一眼看的時候,焦點較容易散開。

但如果要談到次要頁面的設計,日版的設計比較平凡。
例如收件時間的設定:


日版採用傳統的Dropdown menu。台版的則是用很直覺的日曆,一個畫面就可以選擇「收件日期」;「送達日期」;「寄送時段」。台版的選擇日期方式會讓手指移動的次數少很多。(不過我個人認為台版可考慮,在收貨日與指定配達日上有個小tag標示會更好。)

其實一個APP的UI與UX沒有絕對的對或錯,即使事先都做好準備,一旦上架之後都要不斷地改善。
我之前在一間APP遊戲工作時,會被不同Project的團隊抓進去試玩他們的遊戲(都是第一次玩的遊戲),後面有兩個人盯著我的操作。只要我手指做出非他們預期的動作,就會一直逼問我剛剛我為什麼要那樣操作?

但是我個人覺得最重要的是製作Mockup時,就應該套進去程式做UX測試。而不是一剛開始就做的漂漂亮亮,固定形式了才發現有問題,要改又是大工程了。




Kuronekoyamato iOS APP (JP)







網路宅急便 iOS APP (TW)

Mobile APP tutorial screen

這是去年幫一個日本的團隊做的APP walkthrough tutorial 的畫面。
APP中的UI&UX,並不是我負責。



Everydeo APP Store




Pixel game style UI


這是去年幫一間日本公司做的APP DEMO畫面。
客戶需求是希望像點陣RPG風格的介面。
主角的勇者也需要有三種等級的分別。





Zero to One 網頁設計

從0到1,是一本天下雜誌出的書籍。
這個網頁是這本書的介紹網頁。
Parallax效果及Slide show等JS,皆支援到IE6。