<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 如何設(shè)計(jì)豐富友好的應(yīng)用缺省界面

    2016-11-11    鶴鶴

    如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,?請(qǐng)點(diǎn)這里 

     

    缺省頁(yè)面,是出現(xiàn)在用戶沒(méi)有提交任何資料或者網(wǎng)絡(luò)連接不通暢的情況下所展現(xiàn)的頁(yè)面。通常設(shè)計(jì)師們習(xí)慣用豐富的數(shù)據(jù)內(nèi)容把頁(yè)面設(shè)計(jì)得美觀實(shí)用,考慮的都是界面展現(xiàn)的“理想狀態(tài)”,往往會(huì)忽視沒(méi)有內(nèi)容的“缺省狀態(tài)”。未經(jīng)過(guò)精心設(shè)計(jì)的缺省頁(yè)面降低了用戶的使用體驗(yàn),并可能給用戶帶來(lái)困擾,如下圖iOS系統(tǒng)郵件App,無(wú)郵件時(shí)界面上沒(méi)有任何有效反饋信息,用戶不能明確得知到底是網(wǎng)絡(luò)問(wèn)題還是賬號(hào)同步出錯(cuò)亦或者是收件箱內(nèi)確實(shí)一封郵件都沒(méi)有。同樣的情況也出現(xiàn)在Pinterest和出發(fā)吧的界面里。

    01.webp.jpg 

    那什么內(nèi)容可以被添加進(jìn)入缺省頁(yè)面從而使其“豐富友好”呢?Nathan Barry 在 Designing Web Application 中提出了“WWH”的概念來(lái)幫助產(chǎn)品設(shè)計(jì)師解決此類問(wèn)題。

    告訴用戶什么樣的數(shù)據(jù)將會(huì)出現(xiàn)在這里(What)

    首先,用戶很可能是第一次接觸你的產(chǎn)品,他們對(duì)于使用還不是很了解,而這正是你可以利用缺省頁(yè)面向他們提供說(shuō)明的好機(jī)會(huì)。設(shè)計(jì)時(shí)可以使用簡(jiǎn)單明了的文案告訴用戶這里將會(huì)放置什么樣的內(nèi)容。花點(diǎn)心思在這里,不要讓空白的缺省頁(yè)成為用戶最后看到的狀態(tài)。

    下面是一些優(yōu)秀的范例:

    支付寶錢包的電子券和行程單頁(yè)面通過(guò)票據(jù)圖形+文字清楚地說(shuō)明該分類下會(huì)出現(xiàn)什么內(nèi)容,并在屏幕下方提供添加票據(jù)的按鈕。

    02.webp.jpg

     

     

    Dropbox是筆者非常喜歡的一款網(wǎng)絡(luò)文件同步工具,產(chǎn)品面臨的問(wèn)題是需要引導(dǎo)用戶上傳內(nèi)容。應(yīng)用在用戶首次使用收藏、相冊(cè)及提醒功能時(shí)通過(guò)灰階加線條風(fēng)格的圖示和淺白的文字說(shuō)明告知用戶如何使用這三個(gè)功能,畫面在保持一貫品牌風(fēng)格的同時(shí)也降低了用戶因?yàn)榱斜韮?nèi)空無(wú)一物而產(chǎn)生情緒上的挫敗感。

    03.webp.jpg

    除了簡(jiǎn)單的圖標(biāo)加文字說(shuō)明之外,一些應(yīng)用還有一種更為快捷直接的方式:預(yù)置內(nèi)容,即讓用戶直接體驗(yàn)真實(shí)的信息內(nèi)容,或是一些范例信息,而不需要憑空想象。

    Shadow Puppet可以把照片和視頻剪輯結(jié)合聲音、貼紙等制作成動(dòng)畫,制作簡(jiǎn)單,被譽(yù)為視頻版的PPT。它的首頁(yè)預(yù)置了展示用的視頻樣本,用戶可以通過(guò)觀看視頻案例對(duì)Shadow Puppet的視頻制作有感性的認(rèn)知。

     04.webp.jpg

    告訴用戶為什么要在這里提交內(nèi)容(Why)

    在了解完信息的內(nèi)容形態(tài)以后,就要提供給用戶一個(gè)提交內(nèi)容的理由。缺省頁(yè)的設(shè)計(jì)應(yīng)該簡(jiǎn)單告訴用戶建立內(nèi)容的好處,比如你可以認(rèn)識(shí)更多人,可以更有條理也更地管理信息等等,幫助用戶產(chǎn)生使用目的。

    多看閱讀的已購(gòu)和云空間缺省頁(yè)面直接告訴用戶:快來(lái)買書并上傳到云空間吧,這樣你就能有跨平臺(tái)同步書籍的體驗(yàn)了。

     

    充滿情感的文案和圖示也可以激發(fā)用戶提交內(nèi)容的興趣。Headspace是由Headspace.com出品的一款專注于教人們?cè)趺蹿は氩⑻峁┱Z(yǔ)音引導(dǎo)的應(yīng)用。它在缺省狀態(tài)下的朋友頁(yè)面就提供給了用戶這樣的理由,通過(guò)添加朋友,可以監(jiān)督和鼓勵(lì)彼此的冥想過(guò)程看到這樣萌萌噠的缺省頁(yè)面,用戶還有什么理由不邀請(qǐng)好友一起來(lái)互相監(jiān)督呢?

    02.webp.jpg

     

    或者可以像興趣社交應(yīng)用Same一樣,通過(guò)俏皮的文案來(lái)激勵(lì)用戶在自己的頻道添加內(nèi)容。

    07.webp.jpg

    通過(guò)明確的步驟性的操作引導(dǎo)用戶如何提交內(nèi)容(How)

    給用戶明確的操作指引,在界面中提供明顯的按鈕、箭頭指示用戶操作。指示內(nèi)容最好在一頁(yè)內(nèi)顯示完畢,如果步驟多,可以拆分到具體使用過(guò)程中進(jìn)行指導(dǎo)。

    “樂(lè)動(dòng)力”的好友排行頁(yè)面,在沒(méi)有添加過(guò)好友的情況下,該頁(yè)面展示了一些社交網(wǎng)絡(luò)的圖標(biāo)和大大的添加按鈕提示用戶可以通過(guò)綁定社交賬號(hào)來(lái)找到更多好友一起PK運(yùn)動(dòng)量。

     08.webp.jpg

    Pocket是一個(gè)可以讓用戶把內(nèi)容(文字、圖片甚至視頻)一鍵保存下來(lái),用于其他時(shí)間完成閱讀的工具。在初次使用時(shí)它的列表頁(yè)面內(nèi)沒(méi)有內(nèi)容時(shí),會(huì)顯示一個(gè)“了解如何保存”的按鈕,點(diǎn)擊可以詳細(xì)了解添加列表的各種方法。

    09.webp.jpg

    Taasky和Clear作為兩款交互優(yōu)秀的任務(wù)應(yīng)用,都擁有非常豐富手勢(shì)操作,它們沒(méi)有像別的軟件一樣在界面上加遮罩、標(biāo)注做出冗長(zhǎng)的用戶教育頁(yè),而是直接將操作指引嵌在一條條的任務(wù)里,用戶只要跟著當(dāng)前任務(wù)的簡(jiǎn)單描述滑動(dòng)屏幕就能了解全部手勢(shì)操作,即充實(shí)了原本空白的缺省頁(yè)面又很自然地指導(dǎo)用戶如何使用該軟件。

    10.webp.jpg

    Orgami是一款折紙風(fēng)格的記事App,在首次打開(kāi)應(yīng)用時(shí),筆記頁(yè)面內(nèi)并不是空空如也,當(dāng)然這些預(yù)置內(nèi)容不單純是為了美觀,和應(yīng)用相關(guān)的操作指引也包括在這些便簽內(nèi)。

     

    總結(jié)11.webp.jpg

    缺省頁(yè)面的狀態(tài)多半是用戶剛開(kāi)始使用應(yīng)用時(shí)才會(huì)被看到,這時(shí)他們?nèi)匀粚?duì)你的產(chǎn)品有些耐心,設(shè)計(jì)師應(yīng)該把握住這個(gè)天然的與用戶對(duì)話的機(jī)會(huì),可以從以下幾點(diǎn)入手設(shè)計(jì)出空而不空的缺省頁(yè)面。

    1. What

    • 明確指出頁(yè)面內(nèi)會(huì)出現(xiàn)的數(shù)據(jù)。

    • 可以試著讓用戶直接體驗(yàn)范例信息。

    2. Why

    • 激勵(lì)用戶提交內(nèi)容。

    3.How

    • 操作引導(dǎo)。

    • 精簡(jiǎn)步驟。

     

    藍(lán)藍(lán)設(shè)計(jì)www.skdbbs.com?)是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì)? cs界面設(shè)計(jì)? ipad界面設(shè)計(jì)? 包裝設(shè)計(jì)? 圖標(biāo)定制? 用戶體驗(yàn) 、交互設(shè)計(jì)、?網(wǎng)站建設(shè)?平面設(shè)計(jì)服務(wù) 

    日歷

    鏈接

    個(gè)人資料

    存檔

    主站蜘蛛池模板: 精品一区二区三区东京热| 亚洲2022国产成人精品无码区| 亚洲精品国自产拍在线观看| 国产成人精品福利网站在线| 亚洲国产婷婷综合在线精品| 亚洲精品高清视频| 精品一区二区三区东京热 | 亚洲AV日韩精品久久久久久久| 99久久免费只有精品国产| 国产精品国产亚洲精品看不卡| 野狼精品社区| 久久久精品人妻无码专区不卡| 亚洲欧美日韩精品| 国产精品久久久久影院嫩草| 国产午夜精品无码| 久久久久99精品成人片直播| 中文字幕乱码中文乱码51精品| 久久激情亚洲精品无码?V| 93精91精品国产综合久久香蕉| 6一12呦女精品| 精品久久8x国产免费观看| 亚洲欧洲成人精品香蕉网| 亚洲精品456播放| 色哟哟国产精品免费观看| 精品国产香蕉伊思人在线在线亚洲一区二区 | 精品久久人人妻人人做精品| 97久视频精品视频在线老司机| 精品国产品香蕉在线观看75| 99re这里只有精品国产精品| 99精品无人区乱码在线观看| 精品一区二区三区波多野结衣| 久久精品欧美日韩精品| 蜜芽亚洲av无码精品色午夜| 区亚洲欧美一级久久精品亚洲精品成人网久久久久 | 久久精品三级视频| 精品视频一区二区三区| 久久久久一级精品亚洲国产成人综合AV区| 国产精品综合专区中文字幕免费播放 | 99精品视频在线观看re| 国产精品成熟老女人视频| 国产成人精品高清在线观看93|