<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 如何設計豐富友好的應用缺省界面

          2016-11-11    鶴鶴

          如果您想訂閱本博客內容,每天自動發到您的郵箱中,?請點這里 

           

          缺省頁面,是出現在用戶沒有提交任何資料或者網絡連接不通暢的情況下所展現的頁面。通常設計師們習慣用豐富的數據內容把頁面設計得美觀實用,考慮的都是界面展現的“理想狀態”,往往會忽視沒有內容的“缺省狀態”。未經過精心設計的缺省頁面降低了用戶的使用體驗,并可能給用戶帶來困擾,如下圖iOS系統郵件App,無郵件時界面上沒有任何有效反饋信息,用戶不能明確得知到底是網絡問題還是賬號同步出錯亦或者是收件箱內確實一封郵件都沒有。同樣的情況也出現在Pinterest和出發吧的界面里。

          01.webp.jpg 

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

          告訴用戶什么樣的數據將會出現在這里(What)

          首先,用戶很可能是第一次接觸你的產品,他們對于使用還不是很了解,而這正是你可以利用缺省頁面向他們提供說明的好機會。設計時可以使用簡單明了的文案告訴用戶這里將會放置什么樣的內容。花點心思在這里,不要讓空白的缺省頁成為用戶最后看到的狀態。

          下面是一些優秀的范例:

          支付寶錢包的電子券和行程單頁面通過票據圖形+文字清楚地說明該分類下會出現什么內容,并在屏幕下方提供添加票據的按鈕。

          02.webp.jpg

           

           

          Dropbox是筆者非常喜歡的一款網絡文件同步工具,產品面臨的問題是需要引導用戶上傳內容。應用在用戶首次使用收藏、相冊及提醒功能時通過灰階加線條風格的圖示和淺白的文字說明告知用戶如何使用這三個功能,畫面在保持一貫品牌風格的同時也降低了用戶因為列表內空無一物而產生情緒上的挫敗感。

          03.webp.jpg

          除了簡單的圖標加文字說明之外,一些應用還有一種更為快捷直接的方式:預置內容,即讓用戶直接體驗真實的信息內容,或是一些范例信息,而不需要憑空想象。

          Shadow Puppet可以把照片和視頻剪輯結合聲音、貼紙等制作成動畫,制作簡單,被譽為視頻版的PPT。它的首頁預置了展示用的視頻樣本,用戶可以通過觀看視頻案例對Shadow Puppet的視頻制作有感性的認知。

           04.webp.jpg

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

          在了解完信息的內容形態以后,就要提供給用戶一個提交內容的理由。缺省頁的設計應該簡單告訴用戶建立內容的好處,比如你可以認識更多人,可以更有條理也更地管理信息等等,幫助用戶產生使用目的。

          多看閱讀的已購和云空間缺省頁面直接告訴用戶:快來買書并上傳到云空間吧,這樣你就能有跨平臺同步書籍的體驗了。

           

          充滿情感的文案和圖示也可以激發用戶提交內容的興趣。Headspace是由Headspace.com出品的一款專注于教人們怎么冥想并提供語音引導的應用。它在缺省狀態下的朋友頁面就提供給了用戶這樣的理由,通過添加朋友,可以監督和鼓勵彼此的冥想過程看到這樣萌萌噠的缺省頁面,用戶還有什么理由不邀請好友一起來互相監督呢?

          02.webp.jpg

           

          或者可以像興趣社交應用Same一樣,通過俏皮的文案來激勵用戶在自己的頻道添加內容。

          07.webp.jpg

          通過明確的步驟性的操作引導用戶如何提交內容(How)

          給用戶明確的操作指引,在界面中提供明顯的按鈕、箭頭指示用戶操作。指示內容最好在一頁內顯示完畢,如果步驟多,可以拆分到具體使用過程中進行指導。

          “樂動力”的好友排行頁面,在沒有添加過好友的情況下,該頁面展示了一些社交網絡的圖標和大大的添加按鈕提示用戶可以通過綁定社交賬號來找到更多好友一起PK運動量。

           08.webp.jpg

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

          09.webp.jpg

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

          10.webp.jpg

          Orgami是一款折紙風格的記事App,在首次打開應用時,筆記頁面內并不是空空如也,當然這些預置內容不單純是為了美觀,和應用相關的操作指引也包括在這些便簽內。

           

          總結11.webp.jpg

          缺省頁面的狀態多半是用戶剛開始使用應用時才會被看到,這時他們仍然對你的產品有些耐心,設計師應該把握住這個天然的與用戶對話的機會,可以從以下幾點入手設計出空而不空的缺省頁面。

          1. What

          • 明確指出頁面內會出現的數據。

          • 可以試著讓用戶直接體驗范例信息。

          2. Why

          • 激勵用戶提交內容。

          3.How

          • 操作引導。

          • 精簡步驟。

           

          藍藍設計www.sdgs6788.com?)是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計BS界面設計? cs界面設計? ipad界面設計? 包裝設計? 圖標定制? 用戶體驗 、交互設計、?網站建設?平面設計服務 

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.sdgs6788.com

          存檔

          亚洲国产成人精品91久久久| 久久天天躁夜夜躁狠狠躁2022| 久久亚洲AV成人无码| 久久久久亚洲AV无码观看| 欧美亚洲国产精品久久久久| 久久人人爽人人爽人人片AV不| 久久久久久国产精品无码超碰| 成人免费网站久久久| 色婷婷久久久SWAG精品| 无码专区久久综合久中文字幕| 国产福利电影一区二区三区,免费久久久久久久精| 久久久国产精品网站| 免费精品久久天干天干| 久久久噜噜噜久久中文字幕色伊伊 | 亚洲国产成人久久精品99| 狠狠色丁香久久综合五月| 色妞色综合久久夜夜| 色综合久久中文综合网| 三上悠亚久久精品| 久久久久亚洲av成人无码电影| 91麻精品国产91久久久久| 久久精品天天中文字幕人妻| 开心久久婷婷综合中文字幕| 国产精品久久一区二区三区| 东方aⅴ免费观看久久av| 色综合久久久久无码专区| 久久久久国产精品三级网| 日本国产精品久久| 久久久久国产一级毛片高清版| 精品久久人妻av中文字幕| 国内精品久久人妻互换| 久久精品中文无码资源站| 亚洲精品97久久中文字幕无码| 久久97久久97精品免视看| 亚洲伊人久久成综合人影院| 久久亚洲2019中文字幕| 欧美午夜A∨大片久久 | 7777精品久久久大香线蕉| 97精品国产97久久久久久免费| 亚洲国产成人久久综合一区77| 亚洲欧美日韩久久精品|