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

01 請求系統授權，可以更便捷嗎？

拍攝、錄音工具的授權，是視圖拍攝的前題。

用戶如果未開啟App的設備授權，那么用到相應的功能，就需要臨時提醒用戶。

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

如上圖，點擊“去設置”，則前往手機的【系統設置】界面手動操作。

但是，你發現App只負責告訴用戶：我需要你去【系統設置】中授權，但不支持在當前頁面完成操作。

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

為什么不能在App中一鍵完成授權呢？

這其實與手機操作系統有關系。

以IOS為例，該手機操作系統對設備授權有一個規定：安裝后，首次打開App，App會自動請求用戶幫助完成設備授權。

僅此一下，之后關閉授權，再打開App，操作系統就不會幫忙請求了。

因此，設計方案需摸到操作系統的“屋檐”，適當“低頭”。

才好設計出貼合實際的功能。

02 視頻拍攝窗口的界面形制設定

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

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

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

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

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

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

這種規則的制定有好有壞，屬于A/B選擇的問題，這個選擇，需要產品經理來定。

產品經理可以通過借鑒競品和分析本產品的定位，有理有據地說出自己的理由，支持自己的觀點即可。

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

拍攝完成后，后期制作已經是標配。

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

但是根據調研，多數用戶使用的功能僅僅是選擇貼紙、刪除貼紙和拖動位置。

少數用戶才會花精力在手機上調整貼紙應用的時間段，因為這個操作稍微有點麻煩和難度。

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

看下面兩種方案：

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

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

這個指導思想考慮了復雜性和使用頻率，針對大眾用戶和極致用戶進行功能分離，最終實現完美的效果。

04 本地上傳圖片、視頻的6點細節

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

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

具體可以這樣分析：

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

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

作為產品經理，需要與開發溝通當前的方案選項是否有限制的必要。

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

2. 限制一次上傳的圖片張數

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

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

3. 上傳的圖片限制格式

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

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

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

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

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

5. 多樣展示

若需要該圖片進行小圖標或者展示形式的多樣化應用，則后臺只需要保存原圖。 其余的格式化應用在客戶端進行定義。

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

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

6. 圖片上傳的方式

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

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

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

多用于信息內容的展示，一般都是圖文相結合。

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

（2）第二種文件上傳式

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

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

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

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

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

（4）第四種添加附件

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

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

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

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

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

1. 縮略圖的縮放比例

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

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

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

可以通過研究競品，找近期流行的產品的規律。

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

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

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

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

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

2. 圖片的圓角和直角

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

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

做技術類的或者法律類的比較嚴肅的產品，可以考慮直角。

3. 大圖和縮略圖

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

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

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

06 SDK的調研和選型

接入SDK是明智的選擇。

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

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

1. 參與SDK的初步調研和篩選

先閱讀準供應商的SDK方案文檔，判斷是否滿足產品當前的大致需求，以及未來的擴展。

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

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

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

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

2. 多家的橫向對比，擇優而取

假設我們鎖定了四家SDK，他們的基本版功能都是滿足的。但是實現方案和細節就有差異。

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

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

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

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

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

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

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

SDK結合本地代碼之后，可能出現未曾預見的新問題。

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

這個時候產品經理就需要基于當前的環境，羅列出不同的操作場景下的加載位點，并用文案區分出不同位點的提示文案。

選擇適當的SDK固然能省事，但是一款產品的品質，還在于協調和氣質定位等。

#專欄作家#

唧唧歪歪PM，公眾號：唧唧歪歪PM（ID：jjyypm），人人都是產品經理專欄作家。書籍《后端產品經理寶典》作者，藥學碩士轉行互聯網產品多年；熟悉跨境電商業務，醫藥領域；擅長大型后臺體系，社交APP。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議