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

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

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

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

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

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

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

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

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

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

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

超過30s的視頻顯得比較冗余，用戶沒有耐心看下去，所以需要對(duì)內(nèi)容進(jìn)行精簡，原則與圖片一樣，從場景出發(fā)，編輯成一個(gè)個(gè)的串聯(lián)的小故事進(jìn)行展示。還有一點(diǎn)需要提及的是，視頻上傳通道只有一個(gè)，多語言也只能用一個(gè)。如果是國際化的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
• 百度手機(jī)助手：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)想開放平臺(tái)：http://open.lenovo.com/developer/login_info.jspx
• 搜狗手機(jī)助手：http://zhushou.sogou.com/open/app/add.html
• 魅族開放平臺(tái)：http://developer.meizu.com/console/apps/publish?t=146177931870

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

總結(jié)

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

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

敬請(qǐng)期待下次更新APP中新手引導(dǎo)的準(zhǔn)則~

Sophia的tips：看似瑣碎的事情，一個(gè)個(gè)都認(rèn)真完成了，不知不覺就會(huì)成為專家！

專欄作家

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

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