專業(yè)實(shí)訓(xùn)_界面設(shè)計(jì)_期中報(bào)告

1、UI設(shè)計(jì)與美化何艷麗何艷麗UI設(shè)計(jì)與美化1.UI和和GUI2.用戶界面設(shè)計(jì)用戶界面設(shè)計(jì)3.界面構(gòu)成要素界面構(gòu)成要素1.頁(yè)面尺寸頁(yè)面尺寸2.視覺順序視覺順序3.布局步驟布局步驟1.色彩的常識(shí)色彩的常識(shí)2.色彩的運(yùn)用色彩的運(yùn)用3.確定網(wǎng)站的主題色確定網(wǎng)站的主題色4.色彩的搭配色彩的搭配. 一一認(rèn)識(shí)認(rèn)識(shí)UIUI 二二網(wǎng)站界網(wǎng)站界面布局面布局 三三色彩色彩應(yīng)用應(yīng)用UI=User + Interface用戶界面用戶界面1.UI和GUIGUI=Graphics+User+Interface圖形用戶界面圖形用戶界面 一一認(rèn)識(shí)認(rèn)識(shí)UIUI三大原則2.用戶界面設(shè)計(jì)1.3.2.置界面于用戶的控制之下置界面于用戶的

2、控制之下減少用戶的記憶負(fù)擔(dān)減少用戶的記憶負(fù)擔(dān)保持界面的一致性保持界面的一致性 一一認(rèn)識(shí)認(rèn)識(shí)UIUI三個(gè)方向2.用戶界面設(shè)計(jì)1.3.2.用戶研究用戶研究交互設(shè)計(jì)交互設(shè)計(jì)界面設(shè)計(jì)界面設(shè)計(jì) 一一認(rèn)識(shí)認(rèn)識(shí)UIUI1.用戶研究用戶用戶 一一認(rèn)識(shí)認(rèn)識(shí)UIUI2.用戶界面設(shè)計(jì)角度角度方向方向使用環(huán)境使用環(huán)境瀏覽習(xí)慣瀏覽習(xí)慣功能期望功能期望目的目的易被接受，使用和記憶易被接受，使用和記憶2.交互設(shè)計(jì)功能齊全功能齊全設(shè)計(jì)粗糙設(shè)計(jì)粗糙繁瑣難用繁瑣難用 一一認(rèn)識(shí)認(rèn)識(shí)UIUI2.用戶界面設(shè)計(jì)問題問題方向方向畫面重心畫面重心心理線索心理線索瀏覽習(xí)慣瀏覽習(xí)慣目的目的取悅瀏覽者，拉攏下一次取悅瀏覽者，拉攏下一次登錄登錄3.

3、界面設(shè)計(jì)用戶感受用戶感受 一一認(rèn)識(shí)認(rèn)識(shí)UIUI2.用戶界面設(shè)計(jì)角度角度方向方向使用者使用者使用環(huán)境使用環(huán)境使用方式使用方式目的目的視覺享受，創(chuàng)造賣點(diǎn)視覺享受，創(chuàng)造賣點(diǎn)3.界面構(gòu)成要素1.3.2.文字文字圖形圖形多媒體多媒體 一一認(rèn)識(shí)認(rèn)識(shí)UIUI3.界面構(gòu)成要素文字文字 一一認(rèn)識(shí)認(rèn)識(shí)UIUI1.內(nèi)容傳達(dá)的主體，占空間小，節(jié)省下載和瀏覽的時(shí)間2.形式：標(biāo)題，信息，文字連接等3.設(shè)計(jì)：大小，字體，顏色，排布等3.界面構(gòu)成要素圖形圖形 一一認(rèn)識(shí)認(rèn)識(shí)UIUI1.生動(dòng)形象直觀，能引起讀者的注意，激發(fā)閱讀興趣2.格式：JPG,GIF,BMP3.元素：標(biāo)題 背景：襯托主題 主圖：突出表現(xiàn)主題 連接圖3.界面構(gòu)

4、成要素多媒體多媒體 一一認(rèn)識(shí)認(rèn)識(shí)UIUI1.是界面構(gòu)成中最吸引人的元素，好的多媒體元素不但可以增加網(wǎng)站的活力還可以有效的提高網(wǎng)站 與瀏覽者之間的互動(dòng)交流2.元素：包括音頻、視頻和動(dòng)畫 二二. .網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局1.頁(yè)面尺寸原則：頁(yè)面寬度不超過一屏，高度不超過三屏影響因素：顯示器分辨率、瀏覽器、操作系統(tǒng)等標(biāo)準(zhǔn)尺寸：1.最保守最有兼容性：779432 ，網(wǎng)頁(yè)寬度778，不會(huì)出現(xiàn)水平滾動(dòng)條 2.1024*768下，網(wǎng)頁(yè)寬1002，滿框顯示高度在612-615之間.不會(huì)出現(xiàn)水平和垂直滾動(dòng)條。 二二. .網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局2.視覺順序方向：各種視覺造型元素之前的距離，位置，面積，視覺流程原

5、則：1.一個(gè)主旋律2.上強(qiáng)下，左強(qiáng)右3.視覺導(dǎo)向自然流暢1. 1.草圖草圖2. 2.粗略布局粗略布局3. 3.布局細(xì)化布局細(xì)化4. 4.點(diǎn)、線、面的應(yīng)用點(diǎn)、線、面的應(yīng)用 二二. .網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局3.布局步驟5. 5.布局原則布局原則 二二. .網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局3.布局步驟粗略布局粗略布局 二二. .網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局3.布局步驟布局細(xì)化布局細(xì)化 二二. .網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局3.布局步驟點(diǎn)的應(yīng)用點(diǎn)的應(yīng)用讓瀏覽者更輕松的找到自己想要的信息 二二. .網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局3.布局步驟線的應(yīng)用線的應(yīng)用線不但起到了頁(yè)面的分割作用，很好的運(yùn)用線條還使網(wǎng)頁(yè)錦上添花 二二.

6、.網(wǎng)站頁(yè)面布局網(wǎng)站頁(yè)面布局3.布局步驟布局原則布局原則-1.平衡原則-2.預(yù)期原則-3.經(jīng)濟(jì)原則-4.順序原則-5.規(guī)則化三.色彩在設(shè)計(jì)中的應(yīng)用色彩的常識(shí)色彩的常識(shí)色彩的應(yīng)用色彩的應(yīng)用確定網(wǎng)站的主題色確定網(wǎng)站的主題色色彩的搭配色彩的搭配色彩的常識(shí)色彩的常識(shí)Retail三原色（基本色）：紅、黃三原色（基本色）：紅、黃、藍(lán)藍(lán)非彩色：黑、白、灰，屬性只有明度彩色：其他，屬性有明度、純度、色相色彩常識(shí)明度明度也叫亮度，指的是色彩的明暗程度的大小，明度越大，也叫亮度，指的是色彩的明暗程度的大小，明度越大，色彩越發(fā)亮，讓人感覺絢麗多姿，生氣勃勃。色彩越發(fā)亮，讓人感覺絢麗多姿，生氣勃勃。適用于：購(gòu)物，兒童類

7、網(wǎng)站適用于：購(gòu)物，兒童類網(wǎng)站色彩常識(shí)純度純度指色彩的鮮艷程度，純度高的色彩純，鮮亮。指色彩的鮮艷程度，純度高的色彩純，鮮亮。適用于：兒童、動(dòng)漫、時(shí)尚、購(gòu)物等適用于：兒童、動(dòng)漫、時(shí)尚、購(gòu)物等色彩常識(shí)色相色相指的是色彩的名稱，是一種色彩區(qū)別于另一種色彩的最指的是色彩的名稱，是一種色彩區(qū)別于另一種色彩的最主要的因素。主要的因素。暖色：跟黑色調(diào)和（購(gòu)物，電子商務(wù)，兒童）暖色：跟黑色調(diào)和（購(gòu)物，電子商務(wù)，兒童）冷色：跟白色調(diào)和（高科技，游戲類冷色：跟白色調(diào)和（高科技，游戲類- -綠色，藍(lán)色）綠色，藍(lán)色）相近色：色環(huán)中相鄰的三種顏色相近色：色環(huán)中相鄰的三種顏色互補(bǔ)色：色環(huán)中相對(duì)的兩種色彩互補(bǔ)色：色環(huán)中相對(duì)的兩種色彩色彩均衡：位置，比例，面積色彩均衡：位置，比例，面積色彩的應(yīng)用色彩的應(yīng)用Retail藍(lán)色：藍(lán)色：現(xiàn)代商務(wù)領(lǐng)域的流行色，現(xiàn)代商務(wù)領(lǐng)域的流行色，webweb安全色安全色黃色，綠色黃色，綠色：與橙色搭配，少用：與橙色搭配，少用紅色：紅色：熱血、激情、沖動(dòng)、勇氣熱血、激情、沖動(dòng)、勇氣、恐怖、暴力、恐怖、暴力確定網(wǎng)站的主題色確定網(wǎng)站的主題色Retail一個(gè)網(wǎng)站必須有一種或兩種主題色一個(gè)網(wǎng)站必須有一種或兩種主題色一個(gè)頁(yè)面盡量不要超過