APP中,Screenshot的設(shè)計要領(lǐng)和各發(fā)布渠道的要求

2 評論 7371 瀏覽 24 收藏 9 分鐘

screenshot的設(shè)計原則跟APP的跳轉(zhuǎn)流程設(shè)計原則,非常契合,都是從場景出發(fā),還原用戶在某種特定的條件下會產(chǎn)生什么樣的需求,然后幫助用戶去實現(xiàn)。

在APP設(shè)計環(huán)節(jié)中,有一項比較容易漏掉的就是screenshot的設(shè)計,翻譯成中文是“屏幕快照”。它是放在AppStore或者其它各大應(yīng)用商店,進行APP的功能簡介的圖片(如下圖微信的screenshot),目的是為了讓用戶在下載之前,就能通過看這些圖片對APP“是干什么用的”有一個大概的了解,可能也會包括“怎樣用”的教學點在里面,即咱們平時研究事情的what與how原則的介紹。

在各大設(shè)計平臺中很少有人專門說它,一方面是因為,它算是在APP設(shè)計范疇以內(nèi)比較收尾的工作。如果說某款A(yù)PP要從0到1開始設(shè)計的話,這部分工作是要等到設(shè)計師將圖片資源輸出給開發(fā)人員之后才開始有精力集中于這一塊內(nèi)容的設(shè)計。二是,設(shè)計這一塊內(nèi)容的童鞋很可能與設(shè)計APP內(nèi)容的童鞋不是同一個人,而對這一塊內(nèi)容與APP的相關(guān)性沒有過多思考。

如上所述,screenshot的主要作用是通過幾張圖片介紹APP的主要功能。后來又增加了視頻展示的功能。那么在設(shè)計的過程中應(yīng)該怎樣下手,以及有哪些情況需要注意的呢?

1. 圖片數(shù)量控制在3~5張之內(nèi),最好不要超過5張

種類上需要準備iPhone和Apple watch。一般情況下,設(shè)計師拿到進行設(shè)計screenshot的需求時,產(chǎn)品會給出一個character list(功能列表),告訴設(shè)計師需要表達哪些功能點,而設(shè)計師就有個頭緒從哪里開始入手。screenshot有幾種設(shè)計風格,一是直接將APP的界面進行呈現(xiàn)(如下圖微信的方式);二是用簡短的文字描述加上手機場景圖(如下圖QQ的表達方式),這種圖文結(jié)合的表達方式對用戶來說更加清楚,更好理解。

當然,設(shè)計的原則是帶有一種場景思維。嚴格上講,每一張圖片應(yīng)該代表的是一種用戶經(jīng)常使用的場景,告訴用戶產(chǎn)品在何時何地能幫助用戶解決什么樣的問題。不管是咱們以手機模型的呈現(xiàn),還是將APP的頁面進行呈現(xiàn),圖片展示的信息都是某個真實的使用場景。如下圖的微信圖片,模擬的就是在對話中,將聲音變?yōu)槲淖值淖饔靡约坝梅ā?/p>

圖片(包括視頻)可以是橫的,也可以是豎的,尺寸以iPhone兩倍的屏來750x1334px著手設(shè)計比較合適。畢竟橫屏展示信息效率略低,所以這種顯示方式多出現(xiàn)在橫屏的游戲APP中,絕大多數(shù)的情況下圖片以豎屏的方式進行展現(xiàn)。當然也有出現(xiàn)橫豎混排的情況,比較少見而已。

如果考慮多語言表達,則需要導(dǎo)出兩套不同的語言的圖片。(有時候AppStore對于地區(qū)的判斷也會出現(xiàn)一些誤差,比方說英文系統(tǒng)下出現(xiàn)中文圖片,中文系統(tǒng)下出現(xiàn)英文圖片,anyway,這不太影響設(shè)計師的工作)

在UI的風格上有呈獨立設(shè)計的風格,也有比較有趣的類似背景有一定的連續(xù)性,用來引導(dǎo)用戶繼續(xù)看下去。如下圖,將手機屏幕分隔開,北京使用消息彈幕的形式進行展示,勾起了用戶的好奇心,下面的彈幕會是什么。

2. 視頻長度最好不超過30s

超過30s的視頻顯得比較冗余,用戶沒有耐心看下去,所以需要對內(nèi)容進行精簡,原則與圖片一樣,從場景出發(fā),編輯成一個個的串聯(lián)的小故事進行展示。還有一點需要提及的是,視頻上傳通道只有一個,多語言也只能用一個。如果是國際化的APP的話,建議錄制的視頻里面的文字用英文,適用范圍比較廣泛。

3. 安卓相關(guān)發(fā)布渠道

國內(nèi)安卓渠道列表:

  • 應(yīng)用匯:http://http://dev.appchina.com/dev/index
  • 豌豆莢:http://open.wandoujia.com/app/add
  • 應(yīng)用寶:http://op.open.qq.com/mobile_appinfov2/apkinfo?appid=1104845090
  • 百度手機助手:http://app.baidu.com/apps/create
  • 安智:http://dev.anzhi.com/soft_all2.php
  • 360: http://dev.#/mod/createmobile/app?appType=soft
  • 華為:http://developer.huawei.com/cn/consumer/devunion/openPlatform/html/memberCenter.html#appManage#
  • 小米:http://dev.xiaomi.com/app/create?userId=494175390
  • 聯(lián)想開放平臺:http://open.lenovo.com/developer/login_info.jspx
  • 搜狗手機助手:http://zhushou.sogou.com/open/app/add.html
  • 魅族開放平臺:http://developer.meizu.com/console/apps/publish?t=146177931870

基本上安卓導(dǎo)出的screenshot的圖片尺寸比例會變,每個平臺要求不太一樣,所以每個平臺需要檢查一下。最好每個平臺都用一套畫板進行導(dǎo)出,以后在更新版本的時候修改起來也更加方便。需要強調(diào)的是小米要求比較多,除了尺寸規(guī)格為7201280 或 10801920,還要注意的是應(yīng)用截圖中手機外觀素材要為小米手機外觀,素材下載地址(http://dev.xiaomi.com/doc/?p=354)。

總結(jié)

screenshot的設(shè)計原則跟APP的跳轉(zhuǎn)流程設(shè)計原則,非常契合,都是從場景出發(fā),還原用戶在某種特定的條件下會產(chǎn)生什么樣的需求,然后幫助用戶去實現(xiàn)。不同的是APP流程設(shè)計是用戶的操作過程,而screenshot則是展示在這樣的場景下,APP能幫助用戶達到這樣的目的。

當經(jīng)歷過APP設(shè)計所有的環(huán)節(jié)之后,思考方式會發(fā)生一些轉(zhuǎn)變,在設(shè)計功能點的時候,會更有全局觀,將所有相關(guān)聯(lián)的部位都串聯(lián)起來進行考慮。如果進入這一狀態(tài),恭喜你,成功進階了一級,再接再厲!

敬請期待下次更新APP中新手引導(dǎo)的準則~

Sophia的tips:看似瑣碎的事情,一個個都認真完成了,不知不覺就會成為專家!

專欄作家

Sophiallg,微信公眾號:Sophia的玲瓏閣,人人都是產(chǎn)品經(jīng)理專欄作家。一枚愛折騰,愛健身的交互設(shè)計妹紙。

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 認真學習了,謝謝分享

    來自廣東 回復(fù)