經(jīng)驗分享:為兒童設(shè)計移動應(yīng)用界面的技巧

2013-12-3    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   363858.cn  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

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

本文是愛奇藝無線UED負責(zé)人@曉生 在項目工作中學(xué)習(xí)到的知識,針對兒童的習(xí)慣,從 配色、線條、布局、聲音等都作了圖文分析,如果有設(shè)計師剛好在開發(fā)兒童類產(chǎn)品,這篇小結(jié)會是不錯的學(xué)習(xí)經(jīng)驗唷。

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

如果你鐘情純美的童真,那么這個教程可能非常適合你?。?br /> 《PS教程:利用修飾技術(shù)將照片變?yōu)橛腥さ穆嫛?/span>

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

顏色

兒童移動應(yīng)用界面

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


兒童移動應(yīng)用界面

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


兒童移動應(yīng)用界面

線條


兒童移動應(yīng)用界面



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

字體

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

聲音

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


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

隨意點擊

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


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


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


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

布局

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

小結(jié)

除了以上的內(nèi)容,兒童界面設(shè)計還有很多細節(jié)值得細細推敲,比如:

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

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://363858.cn

存檔