社交類 APP 圖?上傳功能解析

來自專欄徐徐行設

前言

圖?上傳是移動客戶端 APP 最為常用的功能之?，對於不同類型的產品，它們在圖片上傳的功能設計上也有著許多的差異。

閱讀準備

閱讀時長：大約5分鐘

流量提醒： 多圖預警

什麼是圖片上傳？

我們先來看看 Wiki 對「上傳」的定義

在計算機網路中，上傳是將數據發送到遠程系統（如伺服器或其他客戶端），以便遠程系統可以存儲副本。

也就是說你將美照發布到 Instagram、向微信好友發送剛拍的搞笑圖、將圖片備份到百度網盤、在知乎回答問題時添加表情包… 這些操作都可以被定義為「圖片上傳」。

其中通過手機在社交媒體上發布圖片信息，已然成為「圖片上傳」最常見也是最重要的存在形式。

Instagram 用戶平均每天上傳52,000,000張圖片??

馬化騰稱，微信朋友圈日上傳圖片10億張

今天我們就來聊聊在社交媒體上發布圖片信息這種「圖片上傳」形式，以下簡稱「社交圖片上傳」。

PC端的「社交圖片上傳」

對於廣大的85後和90後的同學來說，第一次使用「社交圖片上傳」功能，應該是這個吧。

QQ空間，這個陪伴90後走過整個青春的「老同學」。初見時，不過是十三四歲的年紀。在那個情竇初開的夏天，有一個少年用非主流的頭像、火星文、暗黑而不知所云的圖片裝扮著理想中的自己 …

用戶在社交媒體上分享圖片，歸根到底是表達自己的情緒。

但是在PC時代，有諸多因素阻礙著用戶如此表達情緒。

首先我們來看一下PC端「社交圖片上傳」基礎流程。

在PC時代「社交圖片上傳」的使用過程中，主要有2個困境和痛點。

• 獲取理想圖片的複雜度較高。
• 上傳過程中系統中斷操作的概率較高，主要原因為系統對上傳圖片的限制過多。

為什麼說獲取理想圖片的複雜度較高呢？

想像一下，如果你還生活在PC時代，想找一張關於自己旅行情緒的圖片，你不得不經歷以下操作。

根據漏斗模型，光是「獲取理想圖片」這一步，就已經把大部分想要分享圖片的用戶給過濾掉了。

那從網路上找圖片呢？

由於通過拍攝設備 > 計算機 > 互聯網的過程過於複雜，導致計算機網路上的圖片存量本身就不多，再則契合用戶此時心境的圖片就更少了。這導致了PC時代，社交網路上的圖片原創性低，重複度高。

彼時，整個社交網路上，圖片不過是文字的附庸罷了。

然後，這個男人改變了這一切…

他給「計算機」裝上了攝像頭，而且這個「計算機」可以放在你的口袋裡??。

手機 APP 的「社交圖片上傳」

智能手機的普及解決了獲取圖片難的痛點，圖片正式成為社交網路的主角。

我們以微信、Instagram 為例看看 APP 端的「社交圖片上傳」主要頁面基礎框架。

微信發布朋友圈的流程圖，當然實際流程要比這複雜許多。

Instagram 圖片上傳核心頁面

作為 Design Pattern 的圖片上傳功能

在 Design Systems 大行其道的今天。我們也需要對「圖片上傳」這個 Pattern 從設計上進?解構，找出其最基本的界面框架。

通過對比了諸多 APP 的圖片上傳功能，可以得出了圖片上傳的基本頁面框架。

如何設計適合產品的「圖片上傳」功能呢？

以「圖片上傳」基本功能和用戶對其基本體驗的認知為基礎，我們就可以創造出對用戶有用且易用的使用體驗。而在這個堅固的基礎上，再根據行業特性和具體的業務特性為用戶構築起獨特、易用、有用的的使用體驗。

舉個例子，比如 Instagram 的圖片上傳功能，相對於基礎框架有著照片編輯的業務特性（重要業務需求），所以 Instagram 在基本頁面框架上額外增加了圖片編輯頁面。

當然核心流程如果過於長，則會不利於用戶完成此功能，所以拉長核心流程需要反覆斟酌。

Instagram 對於照片編輯頁面是可以直接跳過的而非強制編輯，也是考慮到一部分不愛P圖的用戶。

總結

類似的不同案例還有很多，這?我就不一一介紹了。大家可以按照這個思路比較一下市面上擁有圖片上傳功能的不同類型 APP ，找出其在基礎框架上添加了哪些功能，這些功能和它的行業特性、業務特性又有什麼關聯。

推薦閱讀：