亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國(guó)推薦設(shè)計(jì)師 (詳情)
//百度統(tǒng)計(jì) 20220402 uicn

您的意見是我們 UI 中國(guó)進(jìn)步的動(dòng)力!
點(diǎn)擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入U(xiǎn)I中國(guó)官方反饋群進(jìn)行反饋!
群號(hào):302892100
備注:反饋問題后@管理員能讓我們及時(shí)了解您的意見

提交需求

賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!

0/20
0/200

設(shè)計(jì)大賽

  • 設(shè)計(jì)大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對(duì)UI中國(guó)的支持和信賴!
兒童產(chǎn)品中的布局使用(下)
0.0°

兒童產(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)品文章

《兒童產(chǎn)品中的布局使用-上》

《兒童產(chǎn)品中的色彩使用-上》

《兒童產(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

更新:2020-05-25

收藏

126人已收藏

焱小玖

念念不忘 必有回響

  • 26

    作品

  • 1916

    粉絲

  • 53

    關(guān)注

  • 學(xué)習(xí)產(chǎn)品能力勛章
  • FM電臺(tái)-少兒英語學(xué)習(xí)
  • FM電臺(tái)-少兒英語學(xué)習(xí)
  • 兒童產(chǎn)品中的布局使用(上)

    猜你喜歡

      兒童產(chǎn)品中的布局使用(下)

      0.0°

      你確定要舉報(bào)兒童產(chǎn)品中的布局使用(下)?

      如果查出惡意舉報(bào),十天內(nèi)禁止提交任何舉報(bào)申請(qǐng)。

      0/200

      上傳證據(jù): 超過10M的附件請(qǐng)使用網(wǎng)盤地址

      點(diǎn)擊上傳附件

      對(duì)誰可見:

      全部設(shè)計(jì)師
      • 全部設(shè)計(jì)師
      • 推薦設(shè)計(jì)師和認(rèn)證設(shè)計(jì)師

      您確認(rèn)要推薦?

      該作品發(fā)布時(shí)間:2020年05月25日

      評(píng)分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      60
      126
      3

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      登錄

      手機(jī)號(hào)

      發(fā)送驗(yàn)證碼 120s 驗(yàn)證碼錯(cuò)誤

      登錄
      第三方賬號(hào)登錄