设计之家 > 靈感 > 網頁UI > 網頁理論 >

移動場景下的圖像處理應用設計

作者:佚名 來源:騰訊ISUX 時間:2015-05-20

那個“興衝衝地在電腦上導入相機剛拍攝的照片,打開PS處理照片,再上傳至圖片社區”的日子仿佛離我們越來越遠。 隨著社交平台移動化,我們更關心是否能及時、快速地分享照片。現在,移動端的圖像處理應用層出不窮,愈加優秀的手機硬件性能為圖像類應用創造了更多可能;新一代的單反、存儲卡自帶wifi可與手機傳輸,也讓圖片分享更快捷;利用手機自帶的硬件傳感器以及一些應用的智能算法,甚至可以在手機上完成數碼相機做不到的功能。

毫無疑問,手機拍攝、移動端處理圖像,已成為社交平台圖片分享的主要路徑。本文將通過一些案例,和大家探討下從PC端轉向移動端,圖像處理體驗將如何更好地適應小屏操作,以及不同類型的圖像處理應用在功能設計上不同的偏重。

一、效果一鍵實現

Photoshop、Lightroom等PC最常用的專業後期軟件在功能上大而全,每個細節調整都可能由不同的工具,分多步實現,滿足精細調整的需要,處理時間較長。而在移動場景要處理複雜任務,就顯得負擔過重了,需要更簡單高效的操作方式。

各圖像APP裏的濾鏡即是打包了曲線、色調、飽和度等調整的預設,在PC裏需要的多步調整簡化為了APP裏的一鍵操作,成為了手機圖像處理裏最常用的功能。

移動場景下的圖像處理應用設計

足跡更是整合了圖像的剪裁、濾鏡、邊框、文字和文案功能,一鍵將普通照片轉換成了電影風。雖然早在足跡前,其他應用通過多步操作也可以實現同樣效果,但足跡的一鍵在效率和效果上的提升為它帶來了用戶的爆發式增長。移動場景下的圖像處理應用設計

以往HDR(即高動態範圍圖像:利用每個曝光時間相對應最佳細節的低動態範圍圖像合成的最終圖像)在PC上的實現需要將圖像的高光壓暗,陰影提亮,調高中間調的對比度來還原圖像中的更多細節。或是將多張同一構圖不同曝光的照片中,每個元素曝光正確的部分選出,合成在一張圖像裏,過程較為複雜。而Snapseed的HDR效果則隻需要一鍵即可完成,在大大提高效率,降低了後期門檻的同時,實現了非常棒的效果。

移動場景下的圖像處理應用設計

二、 使用智能算法,減少手動操作

最早先的人像美容APP更多地依賴用戶的手動調整,Facetune需要手動磨皮,點擊斑點祛痘祛痣,Line Camera(現為Aillis)常常需要手動定位眼鼻口位置。而當人臉識別算法被大量引入人像處理APP後,磨皮瘦臉隻需拉拉滑竿,甚至一鍵美容即可實現。人臉識別的優勢在人像美妝尤為明顯。天天P圖火爆的瘋狂變妝、時尚美妝,自動進行人臉識別五官定位,使得素材妝容完美貼合五官,秒速完成上妝。

移動場景下的圖像處理應用設計

PC上常用的摳圖方法是用鋼筆工具或其他選區工具將主體的輪廓完整地勾勒出來,在移動端受限於屏幕大小和輸入設備,沒辦法用手指輕鬆塗圈出主體的輪廓。在天天P圖的魔法摳圖中,則隻需要塗一下需要摳出的主體,程序會自動根據色彩信息分辨出主體的輪廓,將其選中。

移動場景下的圖像處理應用設計

Anticrop在重新構圖,延伸圖像的使用上非常簡單。在PC上延伸圖像起碼4步,擴展畫布,選中可以複製或延伸的畫面,將其複製到空白處,使用仿製印章等修補工具使複製的圖像與原圖像完美結合。而在Anticrop中,需要複製延展的元素都會直接被計算出來,你所需要做的隻是拖動到你想延展的邊界為止,填補的活兒就交給它吧。

移動場景下的圖像處理應用設計

三、利用手機傳感器,在拍攝時就搞定麻煩的後期

早些時候實現一張全景照片非常費勁。需要三腳架固定機位,以便拍攝的多張照片能保持同一水平。同時需要使用相同的曝光、白平衡、ISO,設置較小的光圈才能拍出方便拚接的原片。還需要使用PS進行後期拚接。

移動場景下的圖像處理應用設計

而iPhone的全景功能則讓全景照片的視線變得非常容易。拍攝全景時,手機自動鎖定曝光,根據你移動的軌跡和速度提醒你調節水平和移動速度,並在拍攝同時完成拚接,整個過程僅需幾秒。

Camera+在拍攝照片時,會記錄下水平儀信息。後期隻需要點一下拉直,即可自動完成水平。

移動場景下的圖像處理應用設計

四、拆分複雜操作

PS中修正圖像畸變是對四個角進行拖拽操作。而在小尺寸屏幕上,對圖像四個角進行拖拽的體驗並不佳,為了給圖像留足夠的拖拽空間,畫面必須縮小,做細微的調整變得很不便。於是Skrwt將透視拆解成兩個緯度,上下透視和左右透視,拖動滑竿來改變透視程度,一次隻調整一個緯度,既便於把控細節,操作上又較為方便。

移動場景下的圖像處理應用設計

而同樣是調整透視和形變的Skew,複製了PC上的交互,操作體驗上大打折扣。

移動場景下的圖像處理應用設計

五、 專業級APP傾向隱藏功能,大眾級APP需要全功能曝光

後期APP如Snapseed,Vscocam是眾多攝影師的心頭好,但對初次接觸的用戶來說門檻較高。由於功能多,為了減少幹擾,讓用戶更聚焦在當下效果的調整,菜單項往往被隱藏。例如Snapseed中,添加某一效果時,需通過左右滑動調整效果程度,上下滑動來切換其他平級菜單,界面上並不會有常駐的滑杆和菜單。

移動場景下的圖像處理應用設計

Vscocam中要調整濾鏡的強度需要二次點擊所選濾鏡,才會出現強度調整滑杆。在它之前很少有APP隱藏滑杆,而當這種方式逐漸被接受時,越來越多的APP也選擇用這樣的方式隱藏滑杆,減少畫面遮擋。

移動場景下的圖像處理應用設計

Skrwt作為圖像畸變糾正APP,面向強迫症更強的專業群體。當對當前調整程度不滿意時,需要兩次點擊滑竿來恢複初始值,隱藏了“還原”按鈕。

移動場景下的圖像處理應用設計

相比之下,Aillis(原為line camera)則是更為大眾的一款圖像處理APP。所有操作都在界面上有對應的按鈕。如下例所示,點擊添加漸暈時,出現了調整程度的“詳細”按鈕,進行程度調整後,出現了取消調整的“重置”按鈕。雖然界面元素較多,但方便用戶找到他們需要的操作。

移動場景下的圖像處理應用設計

六、小眾級APP更聚焦單點功能和社交分享

做大而全的功能需要很大人力投入與技術積累,小團隊要在功能上對齊,吃力,但不一定討好。能夠讓大家眼前一亮的小眾APP多是專注在某個特定功能,將體驗和效果做到獨樹一幟。在推廣上,引導用戶做社交分享,或是專為社交分享設計產品。 Fused是一款專注做重曝(多重曝光:攝影中一種采用兩次或者更多次獨立曝光,然後將它們重疊起來,組成單一照片)的應用,功能專注,界面布局專為多重曝光而設計。底部有選擇前景圖片和背景圖片的操作區域,可以隨時重新選擇前景圖片和背景圖片,也可以方便地進行前後對調。中間的工具可對前景圖片、背景圖片分別進行調整,操作的邏輯清晰。

移動場景下的圖像處理應用設計

而Enlight則是一款多功能應用,重曝在它的操作裏是一個叫“合成器”的工具。Enlight的界面布局是為單圖後期而設計的,在使用“合成器”時,隻能添加前景圖片,對前景圖片做調整,無法修改背景圖片,也無法對調前後圖片,這樣兩圖要充分融合會有一定困難。

移動場景下的圖像處理應用設計

Frontback是一款為社交而生的圖片應用,功能非常簡單。用前置攝像頭拍下你,後置攝像頭拍下你看到的場景,拚成一張圖,敘述了一個完整的“你在幹什麼”的故事,非常適合分享。

移動場景下的圖像處理應用設計

小結

專業的數碼相機和數碼後期在攝影的地位雖無法撼動,但在移動時代,數碼圖像處理的變化已經悄然發生,“手機攝影”已然成為了一種新的標簽。在做移動端的圖像處理APP設計時,要更多地考慮移動場景對效率和分享的追求,充分利用平台優勢,創造更適合的圖像處理體驗。

原文鏈接:騰訊ISUX

相關文章:

推薦設計

最新文章