本文是愛奇藝無線UED負責人@曉生?在項目工作中學習到的知識,針對兒童的習慣,從?配色、線條、布局、聲音等都作了圖文分析,如果有設計師剛好在開發兒童類產品,這篇小結會是不錯的學習經驗唷。

@曉生?:最近處于項目需要,開始研究兒童產品的界面設計。在此之前,對兒童如何使用移動產品和如何設計知之甚少。優質的移動應用,為兒童帶來樂趣的同時可以幫助兒童認知事物。越來越多的兒童使用移動設備,接觸虛擬社區的時間甚至早于真實世界,如何設計兒童產品是一個非常值得深入研究的課題。

如果你鐘情純美的童真,那么這個教程可能非常適合你唷:
《PS教程:利用修飾技術將照片變為有趣的漫畫》

本文簡單地從視覺、界面層級關系和交互等方面分析兒童與成人界面之間的差異性。

顏色

經驗分享:為兒童設計移動應用界面的技巧

細心的朋友會發現兒童家具明顯有別于其他家具,最明顯的特征就是顏色,這是因為兒童視力到8歲才能發育完全,對色彩的認知也是從簡單的三原色開始,兒童偏向于喜歡高純度和高明度的原色。

經驗分享:為兒童設計移動應用界面的技巧

iPad版奇藝動畫片的啟動界面以品牌綠為主,配合多種紅藍黃等顏色,整體寫實藍天綠草地的真實意境,營造輕松有趣的氛圍。

經驗分享:為兒童設計移動應用界面的技巧

線條

經驗分享:為兒童設計移動應用界面的技巧
經驗分享:為兒童設計移動應用界面的技巧
經驗分享:為兒童設計移動應用界面的技巧

兒童家具一般有保護措施,避免兒童在缺乏自我保護意識的情況下被誤傷,界面設計同樣如此。避免繁雜的細節,邊緣通常使用圓角處理。

字體

經驗分享:為兒童設計移動應用界面的技巧

家長通常擔心兒童使用電子設備影響視力,界面中很少使用小號字體,電子書字號通常比成人界面大2-4號。而奇藝動畫片以圖片和視頻為主,兒童通過卡通形象可以輕松識別內容,相比較故事書而已,文字并不是那么重要。

聲音

經驗分享:為兒童設計移動應用界面的技巧

個別界面無法避免使用文字時,奇藝動畫片增加了聲音提示,巧妙地降低兒童的閱讀難度。

經驗分享:為兒童設計移動應用界面的技巧

故事書通常有閱讀聲音,一方面是兒童的識字并不多,另一方面是兒童注意力通常只能集中20分鐘左右,有趣的界面輔以聲音可以吸引兒童注意力。

隨意點擊

經驗分享:為兒童設計移動應用界面的技巧

兒童對于界面是否可以操作沒有明確的概念,以探索性操作為主,在既定的任務中需要避免兒童隨意點擊導致界面跳出或者誤觸發其他操作。奇藝動畫片在播放時可以鎖屏,退出播放需要較高成本兒童不易學會的長按操作。

經驗分享:為兒童設計移動應用界面的技巧

個別電子書在設計時不是有意地避免這個問題,而是利用兒童的探索性操作觸發動畫效果,鼓勵兒童點擊界面中的物體,增加的界面的趣味性,但這種設計的實現成本很高。

經驗分享:為兒童設計移動應用界面的技巧

如不需要兒童點擊操作也能正常執行的任務,比如電子書,界面中的按鈕通常采用半透明設計,避免吸引兒童去點擊。

經驗分享:為兒童設計移動應用界面的技巧

如可能,操作盡量放置界面上方,有效地防止兒童的誤點擊操作。

布局

經驗分享:為兒童設計移動應用界面的技巧

經驗分享:為兒童設計移動應用界面的技巧

兒童應用的界面設計比其他簡單的很多,故事書是線性的按頁碼播放,奇藝動畫片的主要界面只有播放器和選擇動畫片,層級關系簡單。

小結

除了以上的內容,兒童界面設計還有很多細節值得細細推敲,比如:

強化點擊反饋
增加進度條的趣味性
過于顯眼吸引兒童點擊但容易遭家長反感的廣告
避免搜索
對于低年齡兒童避免界面的滾動操作

不再一一以界面案例舉例說明,這些只是基礎知識,最重要是掌握兒童的操作行為規律,更多內容請關注iPad版奇藝動畫片的界面設計。

原文地址:daichuanqing
作者:@曉生
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊:網頁設計師必須修煉的內功技法,更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/
設計微博:擁有粉絲量58萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

經驗分享:為兒童設計移動應用界面的技巧
 

收藏 10
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。