中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

截圖 or 縮略圖？

2018年主流智能手機(jī)的屏幕尺寸為5.5英寸，相較于第一代iPone的3.5英寸，增長(zhǎng)了35%的屏幕面積。在設(shè)計(jì)更大的屏幕截圖時(shí)，一種思路是增加文字，但我們觀察到的情況卻截然相反。

長(zhǎng)期觀察中發(fā)現(xiàn)，豎屏模式下只有不到4%的用戶，會(huì)點(diǎn)擊截圖查看；而橫屏模式下只有2%，對(duì)于游戲玩家用戶，這個(gè)比例不到0.5%。用戶可能僅憑截圖縮略圖就可以了解整個(gè)APP。

——Peter Fodor

不少App的設(shè)計(jì)師已經(jīng)注意到4%這個(gè)指標(biāo)，開(kāi)始設(shè)計(jì)無(wú)需點(diǎn)擊即可瀏覽全貌的截圖。2016年，用戶的習(xí)慣可能是點(diǎn)擊截圖縮略圖放大，進(jìn)而查看全部的內(nèi)容；但是隨著App Store的設(shè)計(jì)布局變化和大屏化的趨勢(shì)，用戶已經(jīng)習(xí)慣一掃而過(guò)。

對(duì)比下在2016~2018年重新設(shè)計(jì)過(guò)的APP，幾乎全部采用了更少的文字和更大的字體。

神奇的數(shù)字2

應(yīng)用市場(chǎng)排名前100的APP中，78個(gè)使用了5張截圖，13個(gè)使用了4張截圖，6個(gè)使用了3張截圖，另外2個(gè)僅使用了2張截圖。如果作為一個(gè)開(kāi)發(fā)，你可能錯(cuò)誤地覺(jué)得應(yīng)該放置5張才好，畢竟截圖越多，展示的內(nèi)容越多。

其實(shí)只有9%的用戶會(huì)滑動(dòng)頁(yè)面去查看更多截圖，橫屏模式下的用戶更少，只有5%。所以截圖必需在前兩張就設(shè)法吸引住用戶。第1張截圖可以告訴用戶APP的功能，然后在后續(xù)的截圖內(nèi)展示具體信息。

我們的研究很清晰的指明，豎屏模式下，App必需在前2張截圖(iOS10, Google Play)，或者前3張截圖 (iOS11) 來(lái)展示應(yīng)用的核心功能。而如果是寬屏模式的截圖，你只有第1張截圖有機(jī)會(huì)展示核心功能。

——Peter Fodor

我們可以用一些常用App的前2張截圖驗(yàn)證下：

UI元素突出顯示

用戶通常掃視應(yīng)用截圖并借助文字說(shuō)明去了解APP的功能。但更簡(jiǎn)單的設(shè)計(jì)方案是：APP功能相關(guān)的UI元素突出顯示，而不是過(guò)度依賴文字。

我們來(lái)看一些示例：

學(xué)習(xí)點(diǎn)（敲黑板）

1. 前2張截圖務(wù)必展示核心的用戶故事 ：只有9%的用戶會(huì)去滑動(dòng)查看超過(guò)2張的截圖；
2. 增大字體同時(shí)減少字?jǐn)?shù)：隨著大屏化的趨勢(shì)，用戶越來(lái)越習(xí)慣直接查看截圖，事實(shí)上也只有4%的用戶會(huì)去點(diǎn)擊截圖查看；
3. 功能相關(guān)的UI元素突出顯示 ：可以讓截圖一目了然，增加易讀性。

增強(qiáng)截圖易讀性的方法就是如上三點(diǎn)，現(xiàn)在我們開(kāi)始練習(xí)下這些方法：

Step 1：使用最新的iPhone去截圖

HeyDoctor目前是使用舊版iPhone截圖。并非鼓勵(lì)大家更換手機(jī)，我也很珍惜我的舊iPhone，但是截圖使用最新的iPhone會(huì)更完美。

Step 2：減少文字，增加易讀性

副標(biāo)題和文字說(shuō)明刪掉，同時(shí)字體變大。簡(jiǎn)潔的設(shè)計(jì)模式，用戶故事只會(huì)更易讀。

很明顯，第三張截圖圖文不符。標(biāo)題表明提供醫(yī)療服務(wù)無(wú)需保險(xiǎn)，頁(yè)面截圖卻是設(shè)置功能頁(yè)面。打開(kāi)HeyDoctor，處方服務(wù)功能的第一個(gè)頁(yè)面更符合主題。它間接暗示用戶，無(wú)需保險(xiǎn)也可得到醫(yī)療服務(wù)。

Step3：突出顯示功能相關(guān)的UI元素

如前文所述，功能相關(guān)的UI元素突出顯示，使得文字更有可掃描和易讀性。兩者相輔相成，用戶因此更容易理解截圖內(nèi)容。

（1）聊天界面UI

我們看看Tinder采用什么方法突出UI元素：

它巧妙地使用了個(gè)人頭像，聊天氣泡和品牌顏色來(lái)模仿真實(shí)的聊天用戶界面。:

我們也來(lái)嘗試下：

我們將制作的聊天圖片插入屏幕截圖內(nèi)：

聊天界面設(shè)計(jì)中，聊天氣泡采用HeyDoctor的品牌色。APP的設(shè)計(jì)中，醫(yī)生角色沒(méi)有頭像，因此選擇性的刪掉。

（2）卡片和投影

我們看看Uber采用什么方法突出UI元素：

它做了點(diǎn)細(xì)微的改變，使用卡片和陰影來(lái)突出UI元素，我們也來(lái)嘗試下這種方法：

將標(biāo)題移到屏幕截圖下方，用戶會(huì)在標(biāo)題之前看到突出的UI元素。

Step 4：外觀設(shè)計(jì)變化

針對(duì)屏幕截圖，已經(jīng)總結(jié)了3種不同的優(yōu)化設(shè)計(jì)方法。接下來(lái)從視覺(jué)方面進(jìn)行優(yōu)化，畢竟良好的視覺(jué)設(shè)計(jì)可以很好的吸引用戶。

（1）增加透視屏幕

等距屏幕具有現(xiàn)代感和拋光的高級(jí)感，不論是Apple的廣告，還是Dribble上高度拋光的模型產(chǎn)品，都可以看到它的身影。

因此我做了HeyDoctor的一系列透視屏幕圖：

考慮到常用App 平均放5張屏幕截圖，而目前只設(shè)計(jì)了3張，我把第一張透視模型圖拆分為2張屏幕截圖。

第一張屏幕截圖的標(biāo)題-?“Your personal doctor”，簡(jiǎn)練的總結(jié)了HeyDoctor的所有功能并且易于閱讀。

（2）漸變色背景

個(gè)人覺(jué)得目前的背景色和前景色的色彩對(duì)比太強(qiáng)烈，因此把背景色調(diào)成明度高一點(diǎn)的藍(lán)色。

我們使用新的藍(lán)色做一個(gè)漸變色：

來(lái)看下最后修改好的屏幕截圖：

非常完美！繼續(xù)在標(biāo)題下方添加一道凸紋，可以明顯區(qū)分開(kāi)屏幕透視圖和標(biāo)題文字。

從web網(wǎng)站（https://www.freepik.com/）下載了一張很酷的矢量插畫(huà)，用它做最后一張屏幕截圖。

最終的設(shè)計(jì)

之前：

之后：

總結(jié)

一言以蔽之，屏幕截圖僅僅經(jīng)過(guò)4個(gè)步驟的迭代優(yōu)化，就顯著地增加了閱讀的效率和現(xiàn)代感。而且，任何一個(gè)步驟的優(yōu)化都不需要藝術(shù)天賦，只要學(xué)會(huì)從常用APP里發(fā)現(xiàn)問(wèn)題，并尋找解決方案即可。

感謝閱讀本文！周末寫(xiě)這篇文章很有趣，希望可以給大家一個(gè)設(shè)計(jì)APP屏幕截圖的新思路。

原文：https://medium.com/free-code-camp/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e

作者：Girish Rawat

譯者：Luserry，一個(gè)正在探索期的產(chǎn)品&設(shè)計(jì)，公眾號(hào)：彩云譯設(shè)計(jì)