"如何在Web端設計上傳圖片(1):上傳單張圖片"

圖片是一種常見的數據展現形式,近來接觸到了好幾個關於上傳圖片的設計,本文圍繞“如何在web設計上傳圖片”進行總結。

在Web網頁中常常遇見圖片上傳,上傳圖片的應用場景場景在個人信息中(比如:上傳個人頭像)、信息反饋(比如:淘寶的訂單評價)、社交場景(比如:上傳圖片發朋友圈)。

我們瞭解圖片的基本屬性主要包括:圖片的文件格式、圖片大小、圖片寬和高,以及圖片數量。那下麵就來看看,針對各種場景下的上傳圖片,該如何根據用戶場景進行設計。

一、需求場景

在很多網站中,常常會遇到上傳單張圖片,最典型的場景就是上傳個人頭像,這個屬於個人信息補充的需求場景,該場景只允許上傳一張圖片。例如用戶在網站註冊之後,基本上都會通過個人中心在裡面上傳個人圖片,設置一個用戶喜歡的頭像。

二、案例分析:微博VS QQ上傳個人頭像

在很多社交網站中,常常為了促進用戶的溝通,會鼓勵用戶上傳個人頭像。因為在社交場景中,個人頭像比一個昵稱更加讓人能記住你。

上傳個人頭像是一個常見功能,但是對於頭像的處理確實有很多方式的。常見的方式是上傳一張高清的圖片,但是顯示的是縮略圖。其次社交場景的上傳圖片用戶更多趨向處理圖片,比如對圖片進行濾鏡美顏,目的是通過頭像吸引別人。還有一種上傳頭像之後,是用戶精心挑選的滿意的圖片設置為自己的頭像,支持再次點擊頭像,可以全屏顯示原圖。

我們就來看看微博和QQ中是如何上傳用戶的個人頭像的。

1. 上傳圖片前,告訴用戶圖片規則

在新浪微博的個人主頁,可以看到自己的圖像,註冊賬號之後,都是提供一個默認的圖片。後期是引導用戶上傳頭像。

所以在用戶沒有上傳過圖像,系統使用默認圖片,有一個很醒目的“上傳頭像”,去引導用戶上傳自己的頭像。

用戶點擊“上傳頭像”之後,打開頭像設置窗口。

在這個彈框中,首先就告知用戶上傳圖片的規則:圖片的格式和大小限制。在上傳圖片區域用文案提示:只支持JPG、PNG、GIF,大小不超過5M。

微博的頭像設置這裡,由於上傳的圖片,需要進行裁剪,所以右側還提供了一個預覽效果。由於微博的頭像應用在3個地方:分別是個人頁面的大尺寸頭像、發表微博的中尺寸頭像以及發表評價使用的小尺寸圖像,三個地方都是不同的尺寸,所以這裡的預覽有3個不同尺寸的預覽效果。

2. 在上傳圖片中,引導用戶行為

(1)圖片的格式和大小校驗

點擊“選擇圖片”,彈出選擇文件的窗口,web端支持自定義文件,可根據支持的圖片類型,自定義文件的格式,只能選擇符合規則的圖片格式。

但是web端可以支持查看所有文件類型,若是上傳其他類型的文件,系統會給予引導,告知用戶規則。若是選擇了支持的圖片格式,但是超過文件大小,也是需要校驗,告知用戶支持上傳圖片的最大限制,引導用戶上傳範圍內的圖片。

校驗的優先級:先校驗文件類型,再校驗文件大小,最後才是圖片的高度和寬度。

(2)圖片的裁剪

滿足校驗之後,圖片才會回顯在圖片框中,需要註意:

圖片需要居中顯示在圖片框中,等級壓縮占滿圖片框的寬度或者高度。 圖片的裁剪工具,在圖片框上高亮顯示裁剪圖片的工具,可以等比例放大這個裁剪工具,支持在屏幕任意位置移動,來裁剪圖片。右側時預覽。這個裁剪工具,必須夠明顯,圓圈之外的需要有遮罩影響,高亮中間的圓圈。

4.還有一種圖片裁剪方式,就是QQ上傳圖像,裁剪框是固定的,不可調整。主要是通過移動上傳的圖片,放大、縮小、移動圖片選擇合適的效果進行圖片裁剪。

3. 上傳圖片後,展示信息

在用戶上傳圖像之後因為此時用戶上傳圖像之後,比對後續很多會修改,此時這個入口就不需要特別名稱,只有鼠標移到圖像上面,才會提醒用戶:更換頭像。

總結

任何一種圖片上傳的方式,其實都是根據用戶的需求、操作場景來設計的,讓用戶更加方便。看似一個簡單的上傳照片的功能卻有很多種不同的設計方案,每個設計方案其實滿足的就是用戶的具體需求和場景。

本文由 @瓜子 原創發佈於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *