當今多種設備終端并用的環(huán)境對用戶界面設計提出了更高的要求,用戶界面設計不僅需要考慮不同大小的屏幕尺寸,同時還要呈現(xiàn)出統(tǒng)一的風格和完善、合理的功能需求。本書從信息構架的梳理與建構、界面設計的形式表達、屏幕的物理特性等角度對用戶界面設計的方法進行了梳理。本書將視知覺的基本原理與設計思維、用戶的使用體驗相結合,意在探索更合理、好用的設計方法,使讀者能更全面深入地理解用戶界面設計。
本書適合高等院校藝術設計相關專業(yè)師生閱讀和使用,也可作為設計愛好者的參考用書。
楊兆明,講師,任職于魯迅美術學院大連校區(qū)視覺傳達設計學院。作品曾入選第12屆日本富山國際海報三年展、香港國際海報三年展、第24屆捷克布爾諾國際平面設計雙年展、第七屆首爾—亞洲海報展、“GDC09平面設計在中國”等國際設計賽事;從事專業(yè)教學10余年,主要研究方向為標志與VI視覺系統(tǒng)(涵蓋動態(tài)設計及UI用戶界面設計),版式與書籍設計,圖形與海報設計。
第一章 交互設計與用戶界面 001
第一節(jié) 溝通技術和用戶的操作界面 002
一、從功能面到社群面 003
二、優(yōu)良的交互設計系統(tǒng) 003
第二節(jié) 交互設計的發(fā)展 005
一、鼠標與桌面系統(tǒng)開發(fā) 005
二、個人計算機時代 009
三、電腦多樣化 011
四、周邊產品開發(fā) 012
五、智能手機的整合 013
第三節(jié) 實體用戶界面和虛擬用戶界面 014
一、圖形用戶界面 015
二、物理感知用戶界面 015
第四節(jié) 交互設計的程序 016
一、從設計師的角度出發(fā):交互設計的標準模式 016
二、理解交互設計的角度 017
三、交互設計程序 018
第五節(jié) 交互設計的核心及領域 019
一、交互設計的核心 019
二、隱性知識 019
三、應用領域 020
第二章 提升用戶界面設計質量的方法 023
第一節(jié) 格式塔原理在用戶界面設計中的運用 024
一、格式塔原理 024
二、格式塔原理的綜合運用 026
第二節(jié) 優(yōu)化視覺結構和層次 030
一、通過結構關系的建立來優(yōu)化信息的識別 030
二、數據專用控件有利于信息的高效識別 030
三、視覺層次的建立有助于信息的高效閱讀 030
第三節(jié) 影響閱讀質量的因素分析 032
一、閱讀模式 032
二、影響閱讀質量的因素 032
第四節(jié) 認識視覺的原理 034
一、認識我們的色覺 034
二、大腦的減法處理 034
三、區(qū)別顏色的局限性 034
四、色彩使用準則 035
第五節(jié) 關注閱讀的黃金區(qū)域:中央與邊界視野比較分析 036
一、中央凹的分辨率與邊界視野的分辨率比較 036
二、邊界視覺的作用 037
三、電腦用戶界面舉例 037
四、信息清晰可見的處理方法 039
五、加重強調的功能 041
第六節(jié) 記憶力和注意力對用戶界面設計的影響 042
一、記憶力 042
二、注意力 045
第七節(jié) 響應度 049
一、響應度的定義 049
二、大腦的時間常量 049
三、響應度對交互設計的意義 050
四、高響應度的表達方式 051
第三章 信息的架構空間與閱讀 053
第一節(jié) 鏈接帶來的邏輯關系 054
一、靜態(tài)網站和動態(tài)網站 054
二、網絡編程語言 054
第二節(jié) 信息的橫向空間、縱向空間以及相互關系 056
一、結構與內容體系 056
二、超鏈接 056
第三節(jié) 視覺畫面背后的信息技術 058
一、層疊樣式表 058
二、超文本預處理器 058
三、JavaScript 編程語言 058
四、矢量動畫軟件 058
第四節(jié) 網頁的建構模塊與視覺元素之間的關系 060
一、網頁建構模塊 060
二、圖片的應用 060
三、網絡中的色彩關系構建 060
四、網絡安全字體 061
第五節(jié) 樹狀架構 062
第四章 承載架構的導航欄 065
第一節(jié) 導航欄的位置及類型 066
一、導航欄的角色 066
二、導航欄的類型 066
第二節(jié) 面包屑導航欄 067
一、概述 067
二、面包屑導航欄的分類 067
第三節(jié) 全局性導航欄和區(qū)域性導航欄 068
一、全局性導航欄 068
二、區(qū)域性導航欄 068
第四節(jié) 相關性導航欄 069
第五節(jié) 導航欄與層次關系:水平與垂直 070
一、分析比較兩種類型 070
二、在導航欄中表達層次 070
第六節(jié) 固定導航欄與靈活導航欄 072
一、固定不變的位置 072
二、固定起點 072
第五章 交互的信息結構與視覺表現(xiàn) 075
第一節(jié) 橫向、縱向的空間架構 076
一、虛擬的空間關系 076
二、掌握和理解空間位置關系 076
三、視覺元素有助于體現(xiàn)頁面的前后關系 077
四、利用交互帶給用戶的潛意識來定位框架關系 077
五、框架結構的深度與廣度 077
第二節(jié) 版式設計在用戶界面設計中的應用 080
一、 柵格 080
二、用戶界面中的視覺元素 080
三、分欄及頁面編排 084
四、信息層次體系 086
五、觀眾閱讀時的視線變化 086
第三節(jié) 響應式網頁設計 088
第四節(jié) 交互設計的一致性與靈活性 090
一、交互設計的一致性 090
二、交互設計的靈活性 090
三、一致性與靈活性的整合 091
第五節(jié) 圖示與圖標 092
一、矢量圖形 092
二、圖形的概括與簡化 092
三、圖標的形象性 093
四、從單個元素圖標到復合元素圖標 096
五、兩個元素圖形在固定單元背景中的位置關系 098
六、發(fā)生重疊關系的輪廓線特征 099
七、圖標表現(xiàn)語言 101
八、圖標中圖形構成方式 106
九、圖標表現(xiàn)風格借鑒 108
十、多元圖標 114
第六章 用戶界面設計中的影響因素 121
第一節(jié) 設備終端的物理性限制 122
一、屏幕尺寸 122
二、輸入方式 123
第二節(jié) 視覺元素的限制 123
一、文字資料的特性 123
二、圖片的特性 124
三、圖片的矢量化趨勢 124
第三節(jié) 滾動的方向性與翻頁 128
一、滾動的方向性 128
二、頁面滾動與翻頁 129
第四節(jié) 與設備互動的方式及反饋 130
一、鼠標的操作與反饋 130
二、觸摸屏與反饋 130
三、遙控器與反饋 131
第五節(jié) 無縫界面 131
第六節(jié) 界面銜接的表達技巧 132
一、滑動式界面設計 132
二、覆蓋式界面設計 133
三、嵌入式界面設計 134
四、滾動式界面設計 136
第七章 交互設計體驗 139
第一節(jié) 易于理解的、愉快的交互設計體驗 140
一、二維平面結構與多維交互結構 140
二、運用原型進行用戶體驗 141
三、 真機測試 141
第二節(jié) 用戶界面設計的評價標準 144
一、沒有煩瑣和冗余 144
二、用戶界面自然流暢 144
三、應用共識性的交互準則 144
四、視覺設計的一致性 144
五、色彩的運用 147
六、標題字體及圖形字體設計 149
第三節(jié) 多元的網絡交互平臺 150
一、商品類網頁 150
二、信息類網頁 151
三、時尚類網頁 151
四、趣味性網頁 152
五、個性網頁 152
第四節(jié) 電子讀物 154
第五節(jié) 經典案例分析 155
一、Frog 團隊案例分析 155
二、分享未來“視界” 158
參考文獻 160