如果說(shuō)有什么可以隨時(shí)隨地記錄生活的點(diǎn)滴，那一定非手機(jī)莫屬了。手機(jī)的看家本領(lǐng)就是移動(dòng)性，再加上卡片機(jī)似的成像效果，通過(guò)手機(jī)拍照、處理、分 享的需求在日益增長(zhǎng)。去年圣誕季上線(xiàn)的QQ影像?for iPhone（以下簡(jiǎn)稱(chēng)iPhone影像）應(yīng)運(yùn)而生，跟在了經(jīng)過(guò)一段時(shí)間試水的QQ影像?for iPad之后。經(jīng)過(guò)幾個(gè)版本的迭代，先是濾鏡的精細(xì)打磨，再是交互流程上的陪伴式圖片編輯的改版，iPhone影像逐漸從編輯工具為重心轉(zhuǎn)換到圖片感情表 達(dá)為重心上來(lái)，清晰了一切為了圖片記錄的生活的app理念。

接下來(lái)選取一些iPhone影像在視覺(jué)、交互和產(chǎn)品創(chuàng)意上的點(diǎn)滴與大家分享。

影像環(huán)境：

營(yíng)造一個(gè)具有帶入感的影像處理環(huán)境是視覺(jué)處理的首要目標(biāo)。

首頁(yè)的變遷是體現(xiàn)影像環(huán)境營(yíng)造的代表。最初的首頁(yè)利用擬物的手法搭建生活中處理圖片的場(chǎng)景達(dá)到沉浸的目的，但在可擴(kuò)展和清晰表義上仍有欠缺。隨 后，圖標(biāo)+文字這種可用性較強(qiáng)的設(shè)計(jì)占據(jù)了較長(zhǎng)時(shí)間的首頁(yè)，盡管表義清晰、擴(kuò)展性也有一定的保證，但此種導(dǎo)航工具感強(qiáng)。因此在最近的版本中，將首頁(yè)進(jìn)一步 發(fā)展為編輯生活瞬間的入口，將功能入口融入生活場(chǎng)景，增強(qiáng)影像處理帶入感。

為了將影像處理工具融入影像處理的大環(huán)境，工具欄舍棄了常規(guī)的不透明背景，代替以半透明甚至漸變透明的工具承載背景，使工具與圖片相得益彰。同時(shí)，為了賦予圖片以盡可能大的視覺(jué)空間，將普通（3：4比例圖片如相機(jī)拍攝照片）圖片以系統(tǒng)相冊(cè)般全屏呈現(xiàn)。

整體界面UI采用暗環(huán)境突出圖片主體。經(jīng)過(guò)一系列對(duì)比實(shí)驗(yàn)，暗環(huán)境最廣泛適合各種照片的編輯，也在一定程度上提升app的專(zhuān)業(yè)感。

影像本身：

濾鏡作為便捷的一步見(jiàn)效圖像處理操作，特別適合在調(diào)節(jié)空間有限的移動(dòng)設(shè)備上應(yīng)用。經(jīng)過(guò)文藝范濾鏡處理過(guò)的圖片可以增強(qiáng)互動(dòng)性，評(píng)論積極性也更高，在sns時(shí)代更是如此，因此圖像處理類(lèi)app都爭(zhēng)相加入濾鏡。

經(jīng)過(guò)對(duì)幾十款圖像處理app的分析，總結(jié)出濾鏡的8個(gè)維度：

在以上8個(gè)維度基礎(chǔ)上，將原創(chuàng)濾鏡在軸線(xiàn)上做了可視化排布。從中可以看出，iPhone影像濾鏡在顏色傾向上已經(jīng)覆蓋到冷、暖色調(diào)，個(gè)別特效也 涉及了紅色、紫色傾向；一些軸線(xiàn)如顏色飽和度、復(fù)古做舊、攝影膠片等從弱到強(qiáng)分布均勻；繪畫(huà)藝術(shù)化緯度在項(xiàng)目初期沒(méi)有深入嘗試，主要靠引進(jìn)Q拍的濾鏡補(bǔ) 齊，后續(xù)版本則進(jìn)行了更符合iPhone影像產(chǎn)品氣質(zhì)的優(yōu)化；失焦和扭曲這兩緯度上均未深入，只有柔光、移軸、魚(yú)眼等比較保守的特效。

在濾鏡縮略圖的選擇上，經(jīng)歷了固定圖像縮略圖?->?當(dāng)前圖像濾鏡后縮略圖?->?固定圖像縮略圖的回歸性調(diào)整?？偨Y(jié)出，用實(shí)時(shí)處 理出的當(dāng)前圖像做縮略圖，盡管在一定程度上反映濾鏡用于該圖像后的效果，但這種效果一般并不顯著，不能全面詮釋濾鏡本身的特色，因此，給出一個(gè)最能平衡反 映各濾鏡特色的縮略圖成為最終選擇。下圖即為在固定圖像縮略圖上的iPhone影像原創(chuàng)濾鏡。

貫穿始終的圖片：

圖片是影像處理的核心，怎么讓它成為陪伴全程的主線(xiàn)、怎么給它以最大的展示空間是需要思考的問(wèn)題。

為了讓圖片自身提起選擇->編輯->分享的功能主線(xiàn)，為用戶(hù)營(yíng)造影像處理的掌控感，時(shí)時(shí)可見(jiàn)圖片算是一種解決方案，而動(dòng)畫(huà)就成為該 方案的最佳載體。在分享部分，改進(jìn)了較早版本的單獨(dú)分享頁(yè)面，代之以畫(huà)板抽動(dòng)露出功能的動(dòng)畫(huà)方式。在該主線(xiàn)的最后一步，加入從畫(huà)板拿下圖片并分享的動(dòng)畫(huà)， 使圖片作為生活印記的存在感一氣呵成。

在最大空間展示圖片上，如“影像環(huán)境”中所述，將普通圖片全屏呈現(xiàn)，并讓其具有系統(tǒng)相冊(cè)的基本操作。只有在進(jìn)入具體編輯功能時(shí)，才在導(dǎo)航區(qū)隱去的同時(shí)動(dòng)態(tài)縮小顯示，盡量保證圖片的最大化。

手指的點(diǎn)擊和手勢(shì)：

在移動(dòng)觸屏的使用場(chǎng)景中，拇指的點(diǎn)擊最常見(jiàn)，因此iPhone影像專(zhuān)門(mén)針對(duì)拇指輻射的點(diǎn)擊區(qū)域做了優(yōu)化；手勢(shì)則為主要操作提供了便捷自然的入口，靈動(dòng)所有的手指。

對(duì)應(yīng)點(diǎn)擊的是觸發(fā)位置和觸發(fā)區(qū)域大小。位置設(shè)定，如模態(tài)化的編輯功能界面中，確定或取消是必須操作，將其置于下部方便拇指點(diǎn)擊的區(qū)域，而非通常 位于屏幕上部的導(dǎo)航欄，這一調(diào)整也省出了導(dǎo)航欄區(qū)域，給圖片更大的展示空間；大小設(shè)定，如在拼圖選擇時(shí)的圖片籃子里，可點(diǎn)擊刪除圖片的區(qū)域擴(kuò)大至整個(gè)縮略 圖大小，而非僅僅刪除按鈕的大小。很大程度上方便了拇指的單指操作。

手勢(shì)作為自然的觸屏交互方式，用于喚出某些主要操作再合適不過(guò)。如特效、拼圖部分的切換濾鏡和版式等就是該功能點(diǎn)的常用操作，用手勢(shì)實(shí)現(xiàn)它們還會(huì)滿(mǎn)足用戶(hù)“換換試試”的心理需求。拼接中對(duì)滑動(dòng)手勢(shì)的力度、利于上下圖片參考的動(dòng)畫(huà)放縮反饋都做了更貼近自然交互的優(yōu)化。

其他，諸如搖一搖的隨機(jī)切換拼圖版式的動(dòng)作則帶有趣味的隨機(jī)感。

吹一吹：

吹一吹是由CDC提出創(chuàng)意并推動(dòng)產(chǎn)品化的一次嘗試，其初衷是創(chuàng)造一種全新、有趣的圖片處理方式。

腦暴過(guò)程中暢想了iPhone傳感器可能與圖像處理的結(jié)合點(diǎn)，受到一些吹奏類(lèi)音樂(lè)app的啟發(fā)，又聯(lián)系了哈哈鏡、吹氣球等生活中的趣味點(diǎn)，得出 了吹出胖臉的創(chuàng)意。其后經(jīng)過(guò)與產(chǎn)品及開(kāi)發(fā)的探討，細(xì)化到利用人臉識(shí)別和音頻檢測(cè)等技術(shù)，做到動(dòng)態(tài)檢測(cè)并裁切人臉區(qū)域、根據(jù)氣息大小球形放縮人臉的實(shí)現(xiàn)方 向。

為了讓用戶(hù)快速準(zhǔn)確地了解這一功能，在視覺(jué)上營(yíng)造了吹氣的擬物化場(chǎng)景，交互上則從適應(yīng)場(chǎng)景的動(dòng)作（吹氣-插入吸管；放氣-多種嘗試如扯開(kāi)膠帶和 抽出吸管）和 輔助元素（加入用戶(hù)操作的反饋元素如蕩開(kāi)的波紋、提示可挪動(dòng)操作的半透明圓周、提示吹氣和吹足的聲音）兩方面將用戶(hù)帶入吹一吹的場(chǎng)景。

該功能上線(xiàn)后收到良好的反饋，這一創(chuàng)新的作圖方式也申請(qǐng)了相關(guān)專(zhuān)利。

后記：

經(jīng)過(guò)一段時(shí)間打磨的iPhone影像得到了用戶(hù)的認(rèn)可，并數(shù)次進(jìn)入App Store推薦榜。融入生活的iPhone影像正在為KANO魅力產(chǎn)品而努力。

來(lái)源：騰訊CDC