黃油相機(jī)（下面簡(jiǎn)稱黃油）原名《食日談》，是一款可以添加豐富字體的攝影類 App，而這兩個(gè)名字都是因?yàn)樽髡咚谷障壬粌H是個(gè)代碼高手，更是一個(gè)廚房愛好者。我第一次在 UI 中國(guó)上看到黃油設(shè)計(jì)稿的時(shí)候就深深愛上了這個(gè) app，當(dāng)時(shí)它只支持 iPhone 5及以上機(jī)型，而我手里只有一個(gè) 4S，因此直到一個(gè)月后才在朋友的 iPhone6 上體驗(yàn)到了這款一見鐘情的 App。最開始的界面交互設(shè)計(jì)和現(xiàn)在的樣式有不少的區(qū)別，當(dāng)時(shí)的設(shè)計(jì)雖然吸引人，但是實(shí)際使用起來卻有很多不合理的地方（不常規(guī)的導(dǎo)航結(jié)構(gòu)，很多操作的可見性較差等），因此我在 UI 中國(guó)上試著給斯日先生留言簡(jiǎn)要說明了一些問題，后來也沒有再關(guān)注。直到最近自己也更新了設(shè)備，作為一個(gè)從來沒有玩過相機(jī) App 的用戶，才在新版的黃油上開始了我的手機(jī)攝影之旅。

此版本的黃油相比其他攝影類 App 是要來得復(fù)雜的，主要原因在于其不僅提供了添加多個(gè)文字、圖形的功能，還允許對(duì)它們做豐富的編輯——這對(duì)圖層管理、操作提出了很高的要求。目前黃油為了解決這些復(fù)雜的操作，同時(shí)又希望保證界面的簡(jiǎn)潔，采用了大量的手勢(shì)操作。眾所周知，手勢(shì)操作的可見性較差，除去主流的手勢(shì)以外，其他手勢(shì)學(xué)習(xí)成本較高，誤操作概率大，因此在體驗(yàn)上有許多可以改良之處。我作為一個(gè)還沒出道的新人，就針對(duì)黃油的幾個(gè)交互問題嘗試進(jìn)行一些設(shè)計(jì)和改良。

讓我們先來看一下目前黃油關(guān)于取圖編輯功能的流程：

如果沒有用過產(chǎn)品的話看界面圖可能不太明晰，那么再來看一個(gè)流程圖：

如圖，其中『選擇濾鏡』的環(huán)節(jié)還有改變圖片橫寬比（1:1，4:3）、局部虛化等功能，同時(shí)提供了9種濾鏡供選擇；模板選擇部分提供了7種默認(rèn)模板，并且允許創(chuàng)建新模板和使用收藏的模板；預(yù)編輯功能下只允許修改文字內(nèi)容和調(diào)整元素的大小、位置，編輯模板功能中才允許添加元素、修改字體等復(fù)雜調(diào)整。最后，紅色標(biāo)記的節(jié)點(diǎn)是本文著重進(jìn)行的幾個(gè)改進(jìn)之處。

改進(jìn)一：『切換濾鏡』操作與『局部虛化圈移動(dòng)』操作手勢(shì)沖突。

在相機(jī)拍攝過程中和相冊(cè)取圖完成后，都能夠?qū)Ξ嬅孢M(jìn)行濾鏡選擇和背景虛化的處理，添加背景虛化會(huì)在界面中出現(xiàn)如下圖所示的虛化圈，并且在大約2秒不操作后自動(dòng)消失。同時(shí)，調(diào)整虛化圈的位置需要用手指點(diǎn)擊看不見的虛化圈并且進(jìn)行拖動(dòng)。此時(shí)，如果進(jìn)行的是左右方向的拖動(dòng)，即會(huì)有可能與左右滑動(dòng)切換濾鏡的操作沖突，引發(fā)誤操作。同時(shí)，當(dāng)前版本的虛化圈是不能調(diào)整大小的。

改進(jìn)方法：當(dāng)虛化圈所在區(qū)域被點(diǎn)擊（無(wú)論是否可見）后，鎖定濾鏡切換功能；點(diǎn)擊非虛化圈區(qū)域后，虛化圈轉(zhuǎn)為不可見，濾鏡切換功能重新開放；增加通過手指縮放的虛化圈大小調(diào)整功能。（有朋友反饋說是可以把虛化圈放大縮小的，但是我還特意去試了好幾次都沒有成功，如果是有此功能的，可能操作方式也需要進(jìn)行改變和提升。）

如下圖所示，只有單擊虛化圈所在區(qū)域才能激活虛化圈的編輯，在區(qū)域內(nèi)左右輕掃是不會(huì)激活的。同時(shí)，在虛化圈的激活狀態(tài)下，取消了原本的2秒自動(dòng)消失設(shè)置，只有在點(diǎn)擊區(qū)域外的部分時(shí)，才會(huì)使圈消失，并且重新激活濾鏡切換功能（下部的白色圓點(diǎn)存在與否表示濾鏡切換功能是否開啟）。

改進(jìn)二：默認(rèn)模板選擇界面與模板預(yù)編輯功能的手勢(shì)沖突，并對(duì)此處邏輯進(jìn)行改良。

完成濾鏡的選擇后，進(jìn)入默認(rèn)模板選擇界面，此時(shí)點(diǎn)擊默認(rèn)模板內(nèi)的元素是允許進(jìn)行簡(jiǎn)要編輯的，主要包括文字內(nèi)容編輯（雙擊），元素位置、角度與尺寸調(diào)整，不包含字體調(diào)整、添加元素和圖層順序調(diào)整，我把這個(gè)環(huán)節(jié)稱為預(yù)編輯功能。

目前，在預(yù)編輯功能下，盡管底部的幾個(gè)圓圈會(huì)消失，但是默認(rèn)模板選擇的功能依然是開放的。也就是說，當(dāng)我左右移動(dòng)元素的時(shí)候，極易引發(fā)模板切換，導(dǎo)致當(dāng)前所做的操作丟失。同時(shí)，返回『被消失』的模板后，前面所做的調(diào)整也都不復(fù)存在，模板又回到初始狀態(tài)。

改進(jìn)方法：取消預(yù)編輯功能，默認(rèn)模板選擇界面內(nèi)點(diǎn)擊任何元素即進(jìn)入『編輯模板』模式，同時(shí)取消原本默認(rèn)模板頂部的『編輯模板』按鈕。在『編輯模板』模式下點(diǎn)擊無(wú)元素區(qū)域，則返回默認(rèn)模板選擇頁(yè)面。先看下面一張圖：

這樣做可以避免上述所提到的誤操作，但是引入了一個(gè)新的問題，即在編輯模式下點(diǎn)擊空白區(qū)域后，當(dāng)前的模板放到什么地方？為此，我在默認(rèn)模板選擇界面上增加了一個(gè)位置存放新的模板，如下圖所示：

新增加的『存放位』用矩形來表示，區(qū)別于默認(rèn)模板的圓形。此處可以設(shè)置矩形存放位的個(gè)數(shù)，比如一個(gè)、三個(gè)等，最后編輯的模板存入最后一個(gè)位子，不足的則不顯示，超出的則刪除最早的一個(gè)模板。新增存放位的個(gè)數(shù)我不想直接拍腦袋決定，最好根據(jù)用戶反饋和用戶研究測(cè)試再設(shè)置精確個(gè)數(shù)比較妥當(dāng)。另外，原本的編輯模式下才有的『返回提醒』則放置到了如上圖所示的位置，離開此界面后，只有重新從默認(rèn)模板開始編輯。

最后，我取消了原本默認(rèn)模板選擇最后一個(gè)選項(xiàng)『新建模板』，由于當(dāng)前提供的幾個(gè)默認(rèn)模板都比較簡(jiǎn)單，新建模板后立即生成一個(gè)文本，和直接修改前面簡(jiǎn)單模板并沒有本質(zhì)區(qū)別，不如減少用戶的選擇成本。

改進(jìn)三：元素旋轉(zhuǎn)時(shí)難以保持水平或垂直方向。

這個(gè)功能其實(shí)很常見，在大多數(shù)的軟件中都提供了，我挺奇怪為什么黃油這個(gè)版本沒有。簡(jiǎn)而言之，當(dāng)我們對(duì)元素進(jìn)行旋轉(zhuǎn)后，其即脫離了原本的水平垂直位置，而我們希望它進(jìn)入一個(gè)新的水平垂直位置時(shí)，往往難以通過目測(cè)判定是否真的水平或垂直。因此我在旋轉(zhuǎn)角度的判定上加入了一個(gè)小的規(guī)則改動(dòng)，即可解決這個(gè)問題——增加角度附著，如下圖所示。

這個(gè)改進(jìn)很簡(jiǎn)單，但是提供的體驗(yàn)提升卻很大。

非常重要但是依然沒有想到好辦法的第四點(diǎn)：

黃油在編輯界面提供了比較復(fù)雜的功能，而為了保持界面的簡(jiǎn)潔，大多通過手勢(shì)來完成。

• 連續(xù)點(diǎn)擊兩下：圖層順序調(diào)整與重疊圖層的選擇；
• 雙指旋轉(zhuǎn)：元素旋轉(zhuǎn)，并且此操作可以在非元素所在區(qū)域執(zhí)行；
• 雙指縮放：元素縮放，并且此操作可以在非元素所在區(qū)域執(zhí)行；

在同時(shí)提供了元素右下角旋轉(zhuǎn)按鈕的同時(shí)又提供雙指旋轉(zhuǎn)的功能，會(huì)使得用戶被可視的前者所吸引而忽略后者。很多用戶在很長(zhǎng)的時(shí)候時(shí)間后依然不清楚上面這些功能的用法，而抱怨某些需求無(wú)法完成。其實(shí)，這些功能在第一次進(jìn)入 App 后都會(huì)有一個(gè)小的說明和提醒，但我就和大部分用戶一樣，只想快點(diǎn)開始使用黃油，對(duì)于這些暫時(shí)還沒有遇到的問題提醒置之不理。

接下來幾天我會(huì)著重再寫一篇文章，討論這些『不可見操作的可見性提升』問題，也思考一下這類操作如何提升他們的可見性，降低用戶學(xué)習(xí)成本。

黃油相機(jī)的設(shè)計(jì)真的非常棒，我在視覺層面沒有資格對(duì)它提出什么有價(jià)值的意見，考慮到小團(tuán)隊(duì)出品，有這些交互上的小紕漏也是在所難免，斯日先生和團(tuán)隊(duì)也正在抓緊迭代。我的這些小改進(jìn)、小方案都是從身邊用戶中很淺地調(diào)研出來，僅供開發(fā)者簡(jiǎn)單參考，最主要還是自己學(xué)習(xí)、思考的一個(gè)過程。

希望黃油做的越來越好。

作者：鎮(zhèn)雷

來源：簡(jiǎn)書