用戶界面設(shè)計(jì)

第一章 交互設(shè)計(jì)與用戶界面 001
第一節(jié) 溝通技術(shù)和用戶的操作界面 002
一、從功能面到社群面 003
二、優(yōu)良的交互設(shè)計(jì)系統(tǒng) 003
第二節(jié) 交互設(shè)計(jì)的發(fā)展 005
一、鼠標(biāo)與桌面系統(tǒng)開發(fā) 005
二、個(gè)人計(jì)算機(jī)時(shí)代 009
三、電腦多樣化 011
四、周邊產(chǎn)品開發(fā) 012
五、智能手機(jī)的整合 013
第三節(jié) 實(shí)體用戶界面和虛擬用戶界面 014
一、圖形用戶界面 015
二、物理感知用戶界面 015
第四節(jié) 交互設(shè)計(jì)的程序 016
一、從設(shè)計(jì)師的角度出發(fā)：交互設(shè)計(jì)的標(biāo)準(zhǔn)模式 016
二、理解交互設(shè)計(jì)的角度 017
三、交互設(shè)計(jì)程序 018
第五節(jié) 交互設(shè)計(jì)的核心及領(lǐng)域 019
一、交互設(shè)計(jì)的核心 019
二、隱性知識(shí) 019
三、應(yīng)用領(lǐng)域 020

第二章 提升用戶界面設(shè)計(jì)質(zhì)量的方法 023
第一節(jié) 格式塔原理在用戶界面設(shè)計(jì)中的運(yùn)用 024
一、格式塔原理 024
二、格式塔原理的綜合運(yùn)用 026
第二節(jié) 優(yōu)化視覺結(jié)構(gòu)和層次 030
一、通過結(jié)構(gòu)關(guān)系的建立來(lái)優(yōu)化信息的識(shí)別 030
二、數(shù)據(jù)專用控件有利于信息的高效識(shí)別 030
三、視覺層次的建立有助于信息的高效閱讀 030
第三節(jié) 影響閱讀質(zhì)量的因素分析 032
一、閱讀模式 032
二、影響閱讀質(zhì)量的因素 032
第四節(jié) 認(rèn)識(shí)視覺的原理 034
一、認(rèn)識(shí)我們的色覺 034
二、大腦的減法處理 034
三、區(qū)別顏色的局限性 034
四、色彩使用準(zhǔn)則 035
第五節(jié) 關(guān)注閱讀的黃金區(qū)域：中央與邊界視野比較分析 036
一、中央凹的分辨率與邊界視野的分辨率比較 036
二、邊界視覺的作用 037
三、電腦用戶界面舉例 037
四、信息清晰可見的處理方法 039
五、加重強(qiáng)調(diào)的功能 041
第六節(jié) 記憶力和注意力對(duì)用戶界面設(shè)計(jì)的影響 042
一、記憶力 042
二、注意力 045
第七節(jié) 響應(yīng)度 049
一、響應(yīng)度的定義 049
二、大腦的時(shí)間常量 049
三、響應(yīng)度對(duì)交互設(shè)計(jì)的意義 050
四、高響應(yīng)度的表達(dá)方式 051

第三章 信息的架構(gòu)空間與閱讀 053
第一節(jié) 鏈接帶來(lái)的邏輯關(guān)系 054
一、靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站 054
二、網(wǎng)絡(luò)編程語(yǔ)言 054
第二節(jié) 信息的橫向空間、縱向空間以及相互關(guān)系 056
一、結(jié)構(gòu)與內(nèi)容體系 056
二、超鏈接 056
第三節(jié) 視覺畫面背后的信息技術(shù) 058
一、層疊樣式表 058
二、超文本預(yù)處理器 058
三、JavaScript 編程語(yǔ)言 058
四、矢量動(dòng)畫軟件 058
第四節(jié) 網(wǎng)頁(yè)的建構(gòu)模塊與視覺元素之間的關(guān)系 060
一、網(wǎng)頁(yè)建構(gòu)模塊 060
二、圖片的應(yīng)用 060
三、網(wǎng)絡(luò)中的色彩關(guān)系構(gòu)建 060
四、網(wǎng)絡(luò)安全字體 061
第五節(jié) 樹狀架構(gòu) 062

第四章 承載架構(gòu)的導(dǎo)航欄 065
第一節(jié) 導(dǎo)航欄的位置及類型 066
一、導(dǎo)航欄的角色 066
二、導(dǎo)航欄的類型 066
第二節(jié) 面包屑導(dǎo)航欄 067
一、概述 067
二、面包屑導(dǎo)航欄的分類 067
第三節(jié) 全局性導(dǎo)航欄和區(qū)域性導(dǎo)航欄 068
一、全局性導(dǎo)航欄 068
二、區(qū)域性導(dǎo)航欄 068
第四節(jié) 相關(guān)性導(dǎo)航欄 069
第五節(jié) 導(dǎo)航欄與層次關(guān)系：水平與垂直 070
一、分析比較兩種類型 070
二、在導(dǎo)航欄中表達(dá)層次 070
第六節(jié) 固定導(dǎo)航欄與靈活導(dǎo)航欄 072
一、固定不變的位置 072
二、固定起點(diǎn) 072

第五章 交互的信息結(jié)構(gòu)與視覺表現(xiàn) 075
第一節(jié) 橫向、縱向的空間架構(gòu) 076
一、虛擬的空間關(guān)系 076
二、掌握和理解空間位置關(guān)系 076
三、視覺元素有助于體現(xiàn)頁(yè)面的前后關(guān)系 077
四、利用交互帶給用戶的潛意識(shí)來(lái)定位框架關(guān)系 077
五、框架結(jié)構(gòu)的深度與廣度 077
第二節(jié) 版式設(shè)計(jì)在用戶界面設(shè)計(jì)中的應(yīng)用 080
一、 柵格 080
二、用戶界面中的視覺元素 080
三、分欄及頁(yè)面編排 084
四、信息層次體系 086
五、觀眾閱讀時(shí)的視線變化 086
第三節(jié) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 088
第四節(jié) 交互設(shè)計(jì)的一致性與靈活性 090
一、交互設(shè)計(jì)的一致性 090
二、交互設(shè)計(jì)的靈活性 090
三、一致性與靈活性的整合 091
第五節(jié) 圖示與圖標(biāo) 092
一、矢量圖形 092
二、圖形的概括與簡(jiǎn)化 092
三、圖標(biāo)的形象性 093
四、從單個(gè)元素圖標(biāo)到復(fù)合元素圖標(biāo) 096
五、兩個(gè)元素圖形在固定單元背景中的位置關(guān)系 098
六、發(fā)生重疊關(guān)系的輪廓線特征 099
七、圖標(biāo)表現(xiàn)語(yǔ)言 101
八、圖標(biāo)中圖形構(gòu)成方式 106
九、圖標(biāo)表現(xiàn)風(fēng)格借鑒 108
十、多元圖標(biāo) 114

第六章 用戶界面設(shè)計(jì)中的影響因素 121
第一節(jié) 設(shè)備終端的物理性限制 122
一、屏幕尺寸 122
二、輸入方式 123
第二節(jié) 視覺元素的限制 123
一、文字資料的特性 123
二、圖片的特性 124
三、圖片的矢量化趨勢(shì) 124
第三節(jié) 滾動(dòng)的方向性與翻頁(yè) 128
一、滾動(dòng)的方向性 128
二、頁(yè)面滾動(dòng)與翻頁(yè) 129
第四節(jié) 與設(shè)備互動(dòng)的方式及反饋 130
一、鼠標(biāo)的操作與反饋 130
二、觸摸屏與反饋 130
三、遙控器與反饋 131
第五節(jié) 無(wú)縫界面 131
第六節(jié) 界面銜接的表達(dá)技巧 132
一、滑動(dòng)式界面設(shè)計(jì) 132
二、覆蓋式界面設(shè)計(jì) 133
三、嵌入式界面設(shè)計(jì) 134
四、滾動(dòng)式界面設(shè)計(jì) 136

第七章 交互設(shè)計(jì)體驗(yàn) 139
第一節(jié) 易于理解的、愉快的交互設(shè)計(jì)體驗(yàn) 140
一、二維平面結(jié)構(gòu)與多維交互結(jié)構(gòu) 140
二、運(yùn)用原型進(jìn)行用戶體驗(yàn) 141
三、 真機(jī)測(cè)試 141
第二節(jié) 用戶界面設(shè)計(jì)的評(píng)價(jià)標(biāo)準(zhǔn) 144
一、沒有煩瑣和冗余 144
二、用戶界面自然流暢 144
三、應(yīng)用共識(shí)性的交互準(zhǔn)則 144
四、視覺設(shè)計(jì)的一致性 144
五、色彩的運(yùn)用 147
六、標(biāo)題字體及圖形字體設(shè)計(jì) 149
第三節(jié) 多元的網(wǎng)絡(luò)交互平臺(tái) 150
一、商品類網(wǎng)頁(yè) 150
二、信息類網(wǎng)頁(yè) 151
三、時(shí)尚類網(wǎng)頁(yè) 151
四、趣味性網(wǎng)頁(yè) 152
五、個(gè)性網(wǎng)頁(yè) 152
第四節(jié) 電子讀物 154
第五節(jié) 經(jīng)典案例分析 155
一、Frog 團(tuán)隊(duì)案例分析 155
二、分享未來(lái)“視界” 158

參考文獻(xiàn) 160