提交需求
賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!
兒童產(chǎn)品有哪些典型布局,分別又都有什么特點(diǎn),一起來看看吧~
文章上篇內(nèi)容著重對(duì)兒童產(chǎn)品布局的特點(diǎn)進(jìn)行了分析,可概括為內(nèi)容組織層面需簡(jiǎn)潔、聚焦、控制信息;交互操作上需注意簡(jiǎn)單、防誤觸和可拓展性;視覺情感則需考慮易懂、有趣和親和力。
上篇傳送門《兒童產(chǎn)品中的布局使用-上》
根據(jù)這些特點(diǎn),下篇內(nèi)容將整理兒童產(chǎn)品中常見典型的布局類型,從內(nèi)容量、易操作、趣味性、拓展性四個(gè)方面,結(jié)合案例逐一分析其特性和優(yōu)缺點(diǎn)。
下文中講到的布局類型有:跳板式、地圖式、路徑式、轉(zhuǎn)盤式、宮格卡片式、整屏內(nèi)容式。
跳板式
跳板式常用于一級(jí)頁面,是主要功能和內(nèi)容的入口聚合,以圖文展示,形式簡(jiǎn)單直接,讓孩子能夠快速選擇感興趣的內(nèi)容并進(jìn)入,滑動(dòng)查看更多內(nèi)容,但會(huì)對(duì)后續(xù)內(nèi)容模塊的曝光度產(chǎn)生一定影響,作為入口聚合,雖然布局方式上不受限制,可以無限增加,但也不適宜過多內(nèi)容的展示,需要注意控制精簡(jiǎn)。
相比于宮格式,跳板式形式更加靈活多變,尺寸與形狀可以靈活調(diào)整,比如選擇更大尺寸來支持主推內(nèi)容等。
當(dāng)然也可以根據(jù)不同功能內(nèi)容,設(shè)計(jì)相應(yīng)的視覺效果,為設(shè)計(jì)師提供更大的發(fā)揮空間,讓頁面更加生動(dòng)有趣,以圖形輔助孩子理解。如愛奇藝奇巴布,繪本的板塊使用了繪本的外形,聽力的版塊是唱片的形式。
地圖式
地圖式通常與場(chǎng)景故事、背景設(shè)定等相關(guān)聯(lián),是比較擬物化、場(chǎng)景化的一種布局方式,有利于兒童理解,特別是對(duì)與年齡較小的孩子來說,地圖式親切有趣的視覺效果很具吸引力。
如ABCmouse的產(chǎn)品首頁,以英語樂園的形式,地圖上的建筑代表不同功能,除了主陸地,還有連接的小島,以支持后續(xù)拓展。
但地圖式的拓展性是有一定局限的,不宜承載需要經(jīng)常變動(dòng)、數(shù)量不穩(wěn)定的內(nèi)容,適合較為固定的內(nèi)容。在使用地圖式布局時(shí),最好能有較為長(zhǎng)期、整體的規(guī)劃,以保證頁面結(jié)構(gòu)一段時(shí)間內(nèi)都可以不用做出大幅調(diào)整或是改動(dòng)。
比如實(shí)際工作中產(chǎn)品規(guī)劃往往都超前于設(shè)計(jì)和開發(fā),線上頁面可能只有5個(gè)功能模塊,但后續(xù)版本還會(huì)有3個(gè)模塊增加。這種情況下,我們?cè)谝婚_始就可以以8個(gè)模塊來考慮設(shè)計(jì),預(yù)留出位置,后續(xù)開發(fā)只需增加、開放內(nèi)容即可,頁面無需有大的調(diào)整。若開始只規(guī)劃了5個(gè)功能模塊,沒有預(yù)留內(nèi)容區(qū),后續(xù)還需要擴(kuò)充地圖與位置,對(duì)于開發(fā)來說則需要較大的調(diào)整和改動(dòng),工期也隨之增長(zhǎng)。
路徑式路徑式常用于學(xué)習(xí)內(nèi)容、課程的頁面,以路徑和節(jié)點(diǎn)圖形化表達(dá)學(xué)習(xí)過程與課程內(nèi)容,可視化當(dāng)前學(xué)習(xí)進(jìn)度,幫助孩子理解。根據(jù)內(nèi)容,可配置不同主題場(chǎng)景插畫,讓頁面更加多變有趣。
拓展性良好,設(shè)計(jì)時(shí)可提供S+N1、N2+E的適配方案,做到隨意增減變化,適合內(nèi)容數(shù)量多、數(shù)量閾值大的內(nèi)容。S(Start)指路徑開始,N為路徑中間段(一般設(shè)計(jì)2-3段,根據(jù)所需數(shù)量循環(huán)使用即可),E(End)為路徑結(jié)束。若內(nèi)容增加,只需向后直接延長(zhǎng)增加,不會(huì)因?yàn)檎n程數(shù)量的變化影響頁面結(jié)構(gòu)。
需注意的是內(nèi)容較多的情況下,要為用戶提供起點(diǎn)與當(dāng)前進(jìn)度的快捷跳轉(zhuǎn)方式,避免因長(zhǎng)路徑帶來的操作不便。
轉(zhuǎn)盤式
轉(zhuǎn)盤式布局分轉(zhuǎn)盤區(qū)和內(nèi)容區(qū),轉(zhuǎn)盤區(qū)通常以圖標(biāo)或文字的形式,顯示當(dāng)前所選及內(nèi)容圖標(biāo)以提供預(yù)覽。內(nèi)容區(qū)通常面積較大或滿屏顯示,有較強(qiáng)的視覺表現(xiàn)力。
通過左右滑動(dòng)切換,一般會(huì)采用page形式,也就是每滑動(dòng)一次則切換一頁,而不是無限滑動(dòng)。這種形式下設(shè)計(jì)師可以為場(chǎng)景適當(dāng)增加一些有趣動(dòng)效,讓當(dāng)前內(nèi)容更生動(dòng)呈現(xiàn),增加頁面的吸引力。
轉(zhuǎn)盤式布局常用于大類目的分類、入口頁等,為頁面帶來整體場(chǎng)景的塑造,烘托主題氣氛。需注意的是數(shù)量不宜太多,如分類控制在2-7個(gè)較為合理。若分類過多,則切換效率太低,且不利于用戶記憶。
宮格卡片式宮格卡片式常用于內(nèi)容的展示頁,宮格卡片可以較好的承載圖文信息,相比于純文字列表,更直觀更能吸引孩子注意力。除了常規(guī)的圓角矩形卡片形式,兒童產(chǎn)品中也經(jīng)常打破單調(diào),發(fā)揮創(chuàng)意讓卡片擁有更多有趣形式。
此外,每屏展示的卡片數(shù)不宜過多,數(shù)量控制為4-9是兒童較為理想的接受范圍。
整屏內(nèi)容式整屏內(nèi)容式,顧名思義是屏幕為一個(gè)整體的內(nèi)容和操作區(qū)域,適用于內(nèi)容、操作目的較為集中的頁面,用整體場(chǎng)景給孩子帶來強(qiáng)烈的沉浸式體驗(yàn)視覺沖擊,交互形式與場(chǎng)景結(jié)合,多變自由,常用于內(nèi)容頁。
因?yàn)閮?nèi)容的整體性,這種布局需要格外注意頁面適配,確保場(chǎng)景能滿足與多機(jī)型尺寸的需要,以及內(nèi)容操作區(qū)的完整顯示。
比如產(chǎn)品主要設(shè)備為pad和PC,通常設(shè)計(jì)輸出稿的尺寸有iOS1024*768、安卓1280*800、PC1366*768、1920*1080(同比例最大適配尺寸)。則可以選擇1024*768為原始設(shè)計(jì)尺寸,內(nèi)容區(qū)域960*620,延展至1280*800、1366*768(其他布局涉及到整屏背景的處理也可參考以上尺寸)。
橫屏VS豎屏
通過分析市面上現(xiàn)有產(chǎn)品,可以發(fā)現(xiàn)相比于成人產(chǎn)品常用的豎屏結(jié)構(gòu),兒童產(chǎn)品更多都選擇使用橫屏,其中原因主要有3方面:
· 內(nèi)容
兒童產(chǎn)品常見的類型如課程學(xué)習(xí)類、繪本讀物類、語言學(xué)習(xí)類、認(rèn)知百科類等,其中很多都會(huì)涉及視頻內(nèi)容,視頻多為橫版,因此使用橫版設(shè)計(jì)可以減少屏幕旋轉(zhuǎn)和pad的移動(dòng),為孩子提供一個(gè)較為穩(wěn)定的使用環(huán)境。
· 視覺
人們視覺聚焦區(qū)域的水平范圍大于垂直范圍,呈橫版長(zhǎng)方形。因此橫屏與視覺聚焦區(qū)更加貼合,能夠充分利用聚焦區(qū)讓內(nèi)容更好的展示。
· 設(shè)備
手機(jī)應(yīng)用豎屏居多,pad應(yīng)用則橫屏居多。而兒童產(chǎn)品中更主流設(shè)備為pad,相應(yīng)的橫屏應(yīng)用也更多。手機(jī)的屏幕尺寸小,操作要求精準(zhǔn),pad的大尺寸不僅保證了內(nèi)容的清晰呈現(xiàn),操作熱區(qū)加大也降低了對(duì)操作精度的要求,減少誤操作可能。
更多兒童產(chǎn)品文章
參考引文
《兒童心理學(xué)手冊(cè)》第六版
《APP導(dǎo)航設(shè)計(jì)模式與信息布局設(shè)計(jì)模式》
《基于用戶體驗(yàn)的兒童教育類APP交互設(shè)計(jì)研究》
《基于視知覺理論的3-6歲兒童教育類型應(yīng)用軟件UI分析與設(shè)計(jì)》
《藝術(shù)與視知覺》
Powered by Froala Editor
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)