24第五章4-App頁面設計視覺層次結構和視覺引導

APP頁面設計的視覺層次結構及界面設計的視覺引導天津電子信息職業(yè)技術學院知識要點01App頁面視覺層次結構的構建02App界面設計的視覺引導和反饋App頁面視覺層次結構的構建App頁面視覺層次結構的構建

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

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

02視覺層次結構構建的常用元素尺寸顏色字體布局

App頁面視覺層次結構的構建放大主體內容或者標題來突出視覺層次關系，突出主要內容

03視覺層次結構構建的常用元素尺寸大小字體布局

App頁面視覺層次結構的構建顏色

04視覺層次結構構建的常用元素尺寸大小顏色布局

App頁面視覺層次結構的構建字體

05視覺層次結構構建的常用元素尺寸大小顏色字體

App頁面視覺層次結構的構建布局

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

App頁面視覺層次結構的構建App界面設計的視覺引導和反饋第二部分App界面設計的視覺引導視覺引導

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

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

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

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