短視頻/圖片元素廣泛融入社交、電商等各種產(chǎn)品中，視圖的采集、制作、后期制作等功能也以成熟的SDK形式推向市場。本文圍繞短視頻、圖片類App的產(chǎn)品設(shè)計摘要設(shè)計要點和原理，與大家分享。

01 請求系統(tǒng)授權(quán)，可以更便捷嗎？

拍攝、錄音工具的授權(quán)，是視圖拍攝的前題。

用戶如果未開啟App的設(shè)備授權(quán)，那么用到相應(yīng)的功能，就需要臨時提醒用戶。

比如，點擊【抖音】的拍攝按鈕進(jìn)行視頻拍攝，未授權(quán)情況下，就需要請求攝像機(jī)授權(quán)。

如上圖，點擊“去設(shè)置”，則前往手機(jī)的【系統(tǒng)設(shè)置】界面手動操作。

但是，你發(fā)現(xiàn)App只負(fù)責(zé)告訴用戶：我需要你去【系統(tǒng)設(shè)置】中授權(quán)，但不支持在當(dāng)前頁面完成操作。

而跳出來操作完成，會發(fā)現(xiàn)連個返回App的功能都沒有，需要自己找到App再進(jìn)入一次，是不是很low？

為什么不能在App中一鍵完成授權(quán)呢？

這其實與手機(jī)操作系統(tǒng)有關(guān)系。

以IOS為例，該手機(jī)操作系統(tǒng)對設(shè)備授權(quán)有一個規(guī)定：安裝后，首次打開App，App會自動請求用戶幫助完成設(shè)備授權(quán)。

僅此一下，之后關(guān)閉授權(quán)，再打開App，操作系統(tǒng)就不會幫忙請求了。

因此，設(shè)計方案需摸到操作系統(tǒng)的“屋檐”，適當(dāng)“低頭”。

才好設(shè)計出貼合實際的功能。

02 視頻拍攝窗口的界面形制設(shè)定

授權(quán)完成，即可使用拍攝等功能。在設(shè)計拍攝視頻或圖片功能的時候，需要考慮是否滿屏拍攝，是否限制必須按一定比例拍攝等。

因為有的手機(jī)全屏比例拍攝的效果并不美觀。

一些帶劉海的手機(jī)屏幕，劉海部位必然是看不到拍攝畫面的。

為了避免這個影響，很多產(chǎn)品就會選擇將上方平齊與劉海的高度遮住，設(shè)置成只支持劉海以下拍攝。

也有將底部菜單位置遮住的，只留部分窗口。

還有是只允許拍攝出指定比例的畫面。比如安寬度固定，取16:9的畫面作為視頻窗口，多余的部分在拍攝期間都用黑色背景遮住。

這種規(guī)則的制定有好有壞，屬于A/B選擇的問題，這個選擇，需要產(chǎn)品經(jīng)理來定。

產(chǎn)品經(jīng)理可以通過借鑒競品和分析本產(chǎn)品的定位，有理有據(jù)地說出自己的理由，支持自己的觀點即可。

03 后期處理功能的凸顯與潛藏

拍攝完成后，后期制作已經(jīng)是標(biāo)配。

以貼紙為例，貼紙可以貼在視頻的指定位置，也可以應(yīng)用在視頻的某一時間段上。

但是根據(jù)調(diào)研，多數(shù)用戶使用的功能僅僅是選擇貼紙、刪除貼紙和拖動位置。

少數(shù)用戶才會花精力在手機(jī)上調(diào)整貼紙應(yīng)用的時間段，因為這個操作稍微有點麻煩和難度。

但是，畢竟還是有這么一小部分用戶是希望將自己拍攝的作品精益求精的，對此我們需考慮功能的權(quán)重。

看下面兩種方案：

• 方案一：在選擇貼紙的同時就展示出時間軸，讓用戶選擇貼紙和應(yīng)用的時間軸一次性完成。讓功能集中在一起開始和結(jié)束，干凈利索；
• 方案二：將選擇貼紙、刪除貼紙和拖動位置放在第一層。完成之后，再點擊該貼紙，彈出‘編輯’，這才進(jìn)入時間軸的編輯。

個人覺第二個方案要好一些。一來提高了大部分用戶的操作效率，不被無關(guān)的功能干擾。另外也不會影響發(fā)燒用戶進(jìn)一步挖掘極致。

這個指導(dǎo)思想考慮了復(fù)雜性和使用頻率，針對大眾用戶和極致用戶進(jìn)行功能分離，最終實現(xiàn)完美的效果。

04 本地上傳圖片、視頻的6點細(xì)節(jié)

圖片上傳是APP離不開的功能，比如圖片消息、認(rèn)證頭像等。

也就離不開上傳的規(guī)制、發(fā)送或上傳成功的效果、點擊后的效果、發(fā)布失敗的效果、下載到本地的效果等。

具體可以這樣分析：

1. 上傳的圖片文件大小和尺寸大小的要求

在服務(wù)器承受的壓力之內(nèi)盡量不做限制，必要的時候才給予閾值。

作為產(chǎn)品經(jīng)理，需要與開發(fā)溝通當(dāng)前的方案選項是否有限制的必要。

一般而言，可以由客戶端自行壓縮或調(diào)整后展示。

2. 限制一次上傳的圖片張數(shù)

比如微信是9張，抖音12張。

對于PRD，該需求點雖小，但要交代清楚。

3. 上傳的圖片限制格式

一般盡量不限制格式。但起碼交代清楚動圖和靜圖是否要限制。

4. 上傳圖片后展示的效果

上傳成功后顯示的都是縮略圖，固定顯示的長寬高。

上傳失敗的圖片，支持再次上傳。

點擊上傳成功的圖片，打開大圖。

5. 多樣展示

若需要該圖片進(jìn)行小圖標(biāo)或者展示形式的多樣化應(yīng)用，則后臺只需要保存原圖。 其余的格式化應(yīng)用在客戶端進(jìn)行定義。

比如頭像圖片在后臺存一張大圖，應(yīng)用層面展示的是原型圖。

又比如直播間送禮物的圖標(biāo)：選擇的界面展示的是大圖，發(fā)出去之后的消息通知只是個小圖標(biāo)。

6. 圖片上傳的方式

（1）第一種是九宮格式的

典型的就是微信發(fā)朋友圈的圖片上傳功能。這種圖片上傳功能適合上傳多張圖片，圖片的呈現(xiàn)方式一般都是九宮格的方式。

在社交類、電商類的商品上傳和寫游記的app上多見；

多用于信息內(nèi)容的展示，一般都是圖文相結(jié)合。

交互上是先開啟相冊選取圖片，圖片的點擊順序也一般是最后的呈現(xiàn)順序。

（2）第二種文件上傳式

在聊天界面會用到這個功能居多。點擊qq和微信下方工具欄的加號都會有一個圖片上傳的功能。

這部分圖片上傳功能展開的方式都是半浮窗的樣式，系統(tǒng)會先展示當(dāng)前相冊最近的幾張圖片，會有選擇是否發(fā)原圖的設(shè)計。

（3）第三種嵌入式圖片上傳

嵌入式圖片上傳一般應(yīng)用在文檔撰寫類的應(yīng)用，在編寫文章的時候需要嵌入一些圖片說明；

這種設(shè)計時圖片嵌入屬于一種輔助文檔編輯的功能，一般需要去調(diào)取系統(tǒng)相冊，然后手動從相冊里選取出你所需要的圖片，可一次性上傳多張圖片。

（4）第四種添加附件

這種圖片上傳形式一般圖片會作為附件的形式上傳，也是調(diào)取系統(tǒng)相冊，一般上傳成功后圖片都是縮略圖的形式展示。

例如我們常用的寫周報和百度云盤里就常用到這個功能。

這種設(shè)計的圖片上傳功能適合大批量的圖片上傳。

05 圖片、視頻的比例、圓直角和縮放

App用到圖片的地方很多，每一處又可能有不同狀態(tài)下的不同表現(xiàn)形式。

1. 縮略圖的縮放比例

微信朋友圈的列表中，圖片都是縮略的。

之所以要給出縮小的比例或最終尺寸大小，是因為拍攝的手機(jī)屏幕尺寸和比例不一致，上傳的圖片又可能有各種形狀。

因此，發(fā)布之后要給予統(tǒng)一的規(guī)則和秩序，避免效果模糊、展示不全、圖片過小等不良效果。

可以通過研究競品，找近期流行的產(chǎn)品的規(guī)律。

比如，按圖片或視頻的H:W:

H:W>4/3(高圖）：切上下兩端，保存為4/3，靠左展示；

3/4≤(H:W)<4/3之間(方圖）：切成正方形，靠中間展示；

H:W≤3/4(扁圖）：切成3/4，靠中間展示。

以上并不一定是最好的，但是秩序是要給到開發(fā)的。

2. 圖片的圓角和直角

App的圖片設(shè)置成圓角或是直角，目的只有一個，就是確定這兩種展示方式哪種更符合產(chǎn)品的定位和氣質(zhì)。

一般而言，做社交類的產(chǎn)品，圖片用圓角看著舒服和氣；

做技術(shù)類的或者法律類的比較嚴(yán)肅的產(chǎn)品，可以考慮直角。

3. 大圖和縮略圖

不要忘記在做縮略圖和大圖，這是完整的一套。

舉一個場景：消息發(fā)送成功之后，圖片也是縮略的，并且要設(shè)計發(fā)送失敗的提示圖例。

點擊打開之后，大圖是否鋪滿整個窗口？

06 SDK的調(diào)研和選型

接入SDK是明智的選擇。

功能插件的底層代碼，沒有誰再愿意從石器時代重新造一遍輪子。比如人臉識別、美顏等。

但前提是SDK的加入，在時間、質(zhì)量上靠得住。

1. 參與SDK的初步調(diào)研和篩選

先閱讀準(zhǔn)供應(yīng)商的SDK方案文檔，判斷是否滿足產(chǎn)品當(dāng)前的大致需求，以及未來的擴(kuò)展。

下圖就是某SDK提供商的方案文檔局部截圖：

以拍攝視頻的功能為例，其功能清單如下圖：

通過分析功能，列舉出缺失功能，和自研該功能的成本。

從而得出對該家SDK的基本評分。

2. 多家的橫向?qū)Ρ?，擇?yōu)而取

假設(shè)我們鎖定了四家SDK，他們的基本版功能都是滿足的。但是實現(xiàn)方案和細(xì)節(jié)就有差異。

比如，某SDK沒有編輯時間軸的功能。也就是只能一個貼紙應(yīng)用整個視頻，無法實現(xiàn)在視頻不同時間段使用不同貼紙的需求。

而我們是需要這個時間軸編輯功能的。因此就將這個SDK的該項缺陷登記出來，并評估出自己開發(fā)所需的成本。

使用該方法，輸出一份初步調(diào)研文檔，以便后續(xù)跟蹤調(diào)查，如下圖所示：

3. 輸出基于SDK的需求、UI方案

SDK往往還需要二次開發(fā)，或者自主研發(fā)一些功能加以彌補(bǔ)。

就算代碼不需要寫，UI還是要自己做的。

因此需為開發(fā)人員輸出一份基于SDK的需求文檔。

SDK結(jié)合本地代碼之后，可能出現(xiàn)未曾預(yù)見的新問題。

比如，拍攝視頻到發(fā)布視頻的過程中，會出現(xiàn)多次合成或加載，影響用戶體驗。

這個時候產(chǎn)品經(jīng)理就需要基于當(dāng)前的環(huán)境，羅列出不同的操作場景下的加載位點，并用文案區(qū)分出不同位點的提示文案。

選擇適當(dāng)?shù)腟DK固然能省事，但是一款產(chǎn)品的品質(zhì)，還在于協(xié)調(diào)和氣質(zhì)定位等。

#專欄作家#

唧唧歪歪PM，公眾號：唧唧歪歪PM（ID：jjyypm），人人都是產(chǎn)品經(jīng)理專欄作家。書籍《后端產(chǎn)品經(jīng)理寶典》作者，藥學(xué)碩士轉(zhuǎn)行互聯(lián)網(wǎng)產(chǎn)品多年；熟悉跨境電商業(yè)務(wù)，醫(yī)藥領(lǐng)域；擅長大型后臺體系，社交APP。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議