24第五章4-App頁面設(shè)計(jì)視覺層次結(jié)構(gòu)和視覺引導(dǎo)

APP頁面設(shè)計(jì)的視覺層次結(jié)構(gòu)及界面設(shè)計(jì)的視覺引導(dǎo)天津電子信息職業(yè)技術(shù)學(xué)院知識(shí)要點(diǎn)01App頁面視覺層次結(jié)構(gòu)的構(gòu)建02App界面設(shè)計(jì)的視覺引導(dǎo)和反饋App頁面視覺層次結(jié)構(gòu)的構(gòu)建App頁面視覺層次結(jié)構(gòu)的構(gòu)建

視覺是內(nèi)容的構(gòu)成布局，以便有效地傳達(dá)信息和含義。視覺層次結(jié)構(gòu)以及重要性尺寸、顏色、字重、布局依據(jù)重要性順序排列影響人眼感知正在顯示的信息的順序。

01閱讀模式F型是最常見的瀏覽模式，代表瀏覽的路線順序。人的眼睛通常會(huì)在左上角開始，沿水平線移動(dòng)，然后向下移動(dòng)到另一條水平線，在沒有感興趣的內(nèi)容時(shí)，會(huì)保持沿垂直線移動(dòng)。App頁面視覺層次結(jié)構(gòu)的構(gòu)建紅色區(qū)域代表用戶集中閱讀，黃色代表注意力沒那么集中，藍(lán)色區(qū)域代表一掃而過，灰色區(qū)域代表根本沒注意到。

02視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸顏色字體布局

App頁面視覺層次結(jié)構(gòu)的構(gòu)建放大主體內(nèi)容或者標(biāo)題來突出視覺層次關(guān)系，突出主要內(nèi)容

03視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸大小字體布局

App頁面視覺層次結(jié)構(gòu)的構(gòu)建顏色

04視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸大小顏色布局

App頁面視覺層次結(jié)構(gòu)的構(gòu)建字體

05視覺層次結(jié)構(gòu)構(gòu)建的常用元素尺寸大小顏色字體

App頁面視覺層次結(jié)構(gòu)的構(gòu)建布局

06分組和對(duì)齊常用的方式有：色塊劃分、宮格、線框、列表

App頁面視覺層次結(jié)構(gòu)的構(gòu)建App界面設(shè)計(jì)的視覺引導(dǎo)和反饋第二部分App界面設(shè)計(jì)的視覺引導(dǎo)視覺引導(dǎo)

用戶通常是以掃描的方式快速獲取頁面的信息。

需要我們更精確的抓住用戶的視線,讓用戶更高效更便捷的掃描要瀏覽的內(nèi)容。

把握文字和組件的排版布局，來引導(dǎo)用戶的視線，讓App看起來更加舒適，用戶使用起來更加方便！App界面設(shè)計(jì)的視覺引導(dǎo)視覺引導(dǎo)-圖標(biāo)圖標(biāo)設(shè)計(jì)引導(dǎo)性強(qiáng)、與內(nèi)容貼合；讓內(nèi)容顯得謹(jǐn)慎、專業(yè)；App界面設(shè)計(jì)的視覺引導(dǎo)視覺引導(dǎo)-圖標(biāo)遵循圖標(biāo)尺寸一致性的原則，可以盡量避免產(chǎn)品從視覺上看起來不統(tǒng)一。學(xué)習(xí)實(shí)訓(xùn)出行主要問題在于元素尺寸差異比較大，視覺上顯得不統(tǒng)一、專業(yè)度差些App界面設(shè)計(jì)的視覺引導(dǎo)視覺引導(dǎo)-圖標(biāo)對(duì)比市場成熟的App產(chǎn)品，對(duì)圖標(biāo)進(jìn)行簡單的分析；分析圖標(biāo)元素的設(shè)計(jì)方法、以及遵循的規(guī)則；圖標(biāo)在顏色的構(gòu)成、元素的形狀、豐富的程度等細(xì)節(jié)方面遵循一致性的原則，圖標(biāo)可以顯得更加專業(yè)App界面設(shè)計(jì)的視覺反饋設(shè)計(jì)

確定恰當(dāng)?shù)哪Ｊ皆O(shè)計(jì)清晰的內(nèi)容反饋響應(yīng)及時(shí)告知用戶選擇模態(tài)反饋還是非模態(tài)反饋。信息內(nèi)容符合大眾的認(rèn)知原理要選擇恰當(dāng)?shù)臅r(shí)機(jī)出現(xiàn)或者消失。App界面設(shè)計(jì)的視覺反饋設(shè)計(jì)模態(tài)反饋：強(qiáng)調(diào)反饋信息的重要性非模態(tài)反饋：反饋信息干擾度最小化的傳達(dá)給用戶一、確定合適的模式非模態(tài)（按鈕灰度顯示）模態(tài)反饋（彈窗提示）App界面設(shè)計(jì)的視覺反饋設(shè)計(jì)如何選擇反饋模式獲取流程反饋類型重要程度行業(yè)規(guī)定設(shè)計(jì)規(guī)范一、確定合適的模式App界面設(shè)計(jì)的視覺反饋設(shè)計(jì)如何選擇反饋模式獲取流程反饋類型重要程度行業(yè)規(guī)定設(shè)計(jì)規(guī)范一、確定合適的模式App界面設(shè)計(jì)的視覺反饋設(shè)計(jì)反饋設(shè)計(jì)要遵循人的認(rèn)知心理過程；反饋的內(nèi)容要符合用戶的認(rèn)知結(jié)果。二、從認(rèn)方式出發(fā)App界面設(shè)計(jì)的視覺反饋設(shè)計(jì)反饋信息的及時(shí)性；不能脫離用戶的操作場景；三、反饋響應(yīng)及時(shí)告知用戶App界面設(shè)計(jì)的視覺反饋設(shè)計(jì)1、反饋響應(yīng)及時(shí)2、反饋避免打擾3、為不同類型的反饋?zhàn)霾町惢O(shè)計(jì)4、