界面交互設(shè)計(jì).ppt

界面交互設(shè)計(jì) 現(xiàn)代數(shù)字媒體 楊毅 設(shè)計(jì)學(xué)院 學(xué)時(shí)安排 講授 實(shí)驗(yàn) 界面交互設(shè)計(jì) 交互界面設(shè)計(jì)基本定義 交互設(shè)計(jì) 又稱互動(dòng)設(shè)計(jì) 英文InteractionDesign 縮寫IxD或者IaD 是定義 設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域 人造物 即人工制成物品 例如 軟件 移動(dòng)設(shè)備 人造環(huán)境 服務(wù) 可佩帶裝置以及系統(tǒng)的組織結(jié)構(gòu) 交互設(shè)計(jì)在于定義人造物的行為方式 the interaction 即人工制品在特定場景下的反應(yīng)方式 相關(guān)的界面 Wikipedia org 啟發(fā)式交互 讓創(chuàng)新的界面具有教學(xué)功能 什么是交互設(shè)計(jì) 什么樣的人更適合做交互設(shè)計(jì)師 交互設(shè)計(jì)師需要具備憑空想象復(fù)雜行為的能力 交互設(shè)計(jì)應(yīng)當(dāng)在任何代碼編寫之前做 交互設(shè)計(jì)師必須能夠在代碼被寫出來之前 想象它是做什么的 AlanCooper 交互界面設(shè)計(jì)基本定義 如果說設(shè)計(jì) 解決問題的話 那么界面視覺設(shè)計(jì) 就是用視覺語言去解決邏輯問題 色彩選擇 決定了人們在第一眼看到網(wǎng)站時(shí)的感覺 因此 色彩是Web設(shè)計(jì)者手中最普遍 也是最強(qiáng)大的工具 讓色彩更具有可讀性 用最少的顏色表達(dá)最準(zhǔn)確的內(nèi)容 什么是界面視覺設(shè)計(jì) 為什么當(dāng)人們開始喜歡某些界面的時(shí)候 它們事實(shí)上會(huì)變得更可用 積極的情感增強(qiáng)了創(chuàng)造性和廣度優(yōu)先的思考 而負(fù)面的情感集中在認(rèn)知上 增強(qiáng)深度優(yōu)先處理并把干擾降到最少 積極的情感讓人們更能容忍一些困難 在尋找解決方案的時(shí)候變得更靈活而有創(chuàng)造性 DonaldNorman UI設(shè)計(jì) UI設(shè)計(jì) UI如何設(shè)計(jì) UI設(shè)計(jì) UI的應(yīng)用范圍 電腦的軟件界面 比如操作系統(tǒng) 軟件界面 網(wǎng)頁 多媒體光盤 手機(jī)的界面 數(shù)字電視的界面 空調(diào)等家電搖控器上的界面 銀行 移動(dòng)等柜員機(jī)上的界面 UI設(shè)計(jì) UI設(shè)計(jì)在中國的現(xiàn)狀 目前在國內(nèi)UI還是一個(gè)相對陌生的詞 即便是一些設(shè)計(jì)人員也對這個(gè)詞不太了解 我們經(jīng)?？吹揭恍┱衅笍V告寫著 招聘界面美工 界面美術(shù)設(shè)計(jì)師等等 這表明在國內(nèi)對UI的理解還停留在美術(shù)設(shè)計(jì)方面 認(rèn)為UI的工作只是描邊畫線 只是做一些圖標(biāo) 配下顏色等工作 缺乏對用戶交互的重要性的理解 事實(shí)上UI設(shè)計(jì)的工作包括更廣泛的內(nèi)容 另一方面在軟件開發(fā)過程中還存在重技術(shù)而不重應(yīng)用的現(xiàn)象 許多商家認(rèn)為軟件產(chǎn)品的核心是技術(shù) 而UI僅僅是次要的輔助 忽視了良好的UI設(shè)計(jì)是提升用戶體驗(yàn)的主要途徑 是提升產(chǎn)品競爭力的重要法寶 UI的范疇 工作內(nèi)容 研究用戶 我們所開發(fā)的軟件等產(chǎn)品 最終都是為人而做的 所謂以人為本 這不能是句空話 所以我們UI設(shè)計(jì) 必須研究人 研究我們的用戶 要了解我們的用戶想要什么 要利用我們的產(chǎn)品解決什么問題 喜歡什么 不喜歡什么等等 研究用戶與界面的關(guān)系 即人機(jī)交互 研究如何讓用戶更好的更方便的使用軟件 則是我們常說的 易用性 從事該行業(yè)的人 我們稱之為 交互設(shè)計(jì)師 主要做的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程 樹狀結(jié)構(gòu) 軟件的結(jié)構(gòu)與操作規(guī)范等 一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì) 并確立交互模型 交互規(guī)范 研究界面的視覺效果 國內(nèi)目前大部分UI工作者都是從事這個(gè)行業(yè) 也有人稱之為 美工 但實(shí)際上不是單純意義上的美術(shù)工人 而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計(jì)師 從事該行業(yè)的人 我們可以稱之為 軟件圖形設(shè)計(jì)師 UI設(shè)計(jì) 本章節(jié)主要學(xué)哪些 UI設(shè)計(jì)的基本原則與禁忌 UI的視覺效果設(shè)計(jì) 手機(jī)圖標(biāo)設(shè)計(jì)練習(xí)手機(jī)完整界面制作練習(xí)交互設(shè)計(jì)的基本原則與禁忌 使用FLASH或AXURE完成整個(gè)手機(jī)操作系統(tǒng)UI設(shè)計(jì)團(tuán)隊(duì)管理原則與禁忌 根據(jù)進(jìn)度 如果還有時(shí)間 我們再繼續(xù)講網(wǎng)站設(shè)計(jì) UI設(shè)計(jì) UI設(shè)計(jì)的基本原則 可以說 UI設(shè)計(jì)的所有基本原則 都是建立在 易用性 的基礎(chǔ)上 那什么是 易用性 包括三個(gè)方面 按重要程度排列如下 1 產(chǎn)品執(zhí)行用戶所需的功能 快速使用 2 快速安全地執(zhí)行這些功能 相對無錯(cuò) 3 容易掌握使用這些功能 易于學(xué)習(xí) UI設(shè)計(jì) 易用性不佳的例子 UI設(shè)計(jì) 易用性不佳的例子 UI設(shè)計(jì) UI設(shè)計(jì) 用戶身邊充斥著專業(yè)術(shù)語 UI設(shè)計(jì) 萬能軟件 UI設(shè)計(jì) 不良的交互實(shí)例 取款機(jī)上查詢工資余額 但是排隊(duì)的人太多了 不過還有電話銀行嘛 一邊拿出手機(jī) 撥通了電話銀行的號碼 UI設(shè)計(jì) 一個(gè)溫柔禮貌的語音提示 您好 歡迎使用建設(shè)銀行電話銀行系統(tǒng) 1 自動(dòng)語音服務(wù) 2人工服務(wù) vivi把手機(jī)從耳邊拿下來 找到1號鍵 按了一下 1個(gè)人銀行服務(wù) 2公司銀行服務(wù) 3銀證通功能 4個(gè)人外匯買賣服務(wù) 5基金服務(wù) 0退出 UI設(shè)計(jì) 一個(gè)溫柔禮貌的語音提示 您好 歡迎使用招商銀行電話銀行系統(tǒng) 1 自動(dòng)語音服務(wù) 2人工服務(wù) vivi把手機(jī)從耳邊拿下來 找到1號鍵 按了一下 1個(gè)人銀行服務(wù) 2公司銀行服務(wù) 3銀證通功能 4個(gè)人外匯買賣服務(wù) 5基金服務(wù) 0退出 UI設(shè)計(jì) 又按了1 1存折戶 2一卡通戶 3個(gè)人信用卡戶 4新舊卡號查詢0退出 vivi按下了1旁邊的2號鍵 請輸入一卡通卡號 以 號結(jié)束 108080699 vivi連忙輸入了卡號 按 號鍵 請輸入查詢密碼 以 號結(jié)束 UI設(shè)計(jì) 1帳務(wù)查詢 2轉(zhuǎn)賬 3修改密碼 4電話掛失 5通訊業(yè)務(wù) 6自助貸款 7自助繳費(fèi)及一卡通上網(wǎng) 8神州行充值服務(wù) 9憑證式國債 0退出 汗 這都是些什么呀 UI設(shè)計(jì) 好的交互實(shí)例 名片上印相片招商銀行電話語音多功能汽車方向盤 UI設(shè)計(jì) UI從構(gòu)思到修正的例子 修改前 UI設(shè)計(jì) 修改后 UI設(shè)計(jì) 修改后 UI設(shè)計(jì) 課堂小練習(xí) 1 拿出自己的手機(jī) 分析下自己手機(jī)上的UI 列出好的地方與不好的地方 越多越好 越全面越好 2 與同學(xué)交換手機(jī) 按同樣的方法分析 我們可以考慮的方面 僅供參考 欠缺的功能經(jīng)常出錯(cuò)或不好用的功能不方便的操作圖標(biāo)或界面問題除了打電話和發(fā)短信外 最常用的功能最想要的功能 理想的操作方式等等 UI的分類 UI的分類 傳統(tǒng)界面介紹傳統(tǒng)界面是指可視化的實(shí)物界面 比如電視機(jī)的按鈕 電源排插的插孔 鍵盤 汽車飛機(jī)的操控臺(tái) 食堂的打卡機(jī)刷卡界面 相機(jī)的按鈕界面 門上的把手界面 儀器的拆裝提醒界面 交通指示牌 手機(jī)鍵盤界面等 諸如此類的 硬件 界面就是我們所熟知的傳統(tǒng)界面 他們的共同特點(diǎn)是看得見摸得著 不同的是有些界面你可以直接對它進(jìn)行操作 通過正確的程序或者指令去完成操作過程 實(shí)現(xiàn)目的 比如插上插排就可以通電 打開電視機(jī)就可以看電視 有些界面則不行 例如拆裝提醒界面 交通指示牌 這些是不能對它們進(jìn)行直接操作的界面 它們的主要功能是提醒使用者去執(zhí)行某件事情 它是不具有可操作性 UI的分類 圖形用戶界面圖形用戶界面 GUI GraphicsUserInterface 是當(dāng)前用戶界面的主流 廣泛應(yīng)用于各檔臺(tái)式微機(jī)和圖形工作站 比較成熟的商品化系統(tǒng)有Apple的Macintosh IOSIBM的PM PresentationManager Microsoft的Windows當(dāng)前各類圖形用戶界面的共同特點(diǎn)是以窗口管理系統(tǒng)為核心 使用鍵盤和鼠標(biāo)器作為輸入設(shè)備 圖形用戶界面和人機(jī)交互過程極大地依賴視覺和手動(dòng)控制的參與 因此具有強(qiáng)烈的直接操作特點(diǎn) UI的分類 圖形用戶界面圖形用戶界面當(dāng)前最流行的為觸屏系統(tǒng)APPLE的IOS系統(tǒng)谷歌的ANDROID系統(tǒng)微軟的win8系統(tǒng)擺脫傳統(tǒng)的鍵盤以及鼠標(biāo) 從而執(zhí)行更精簡的操作 直觀的交互 UI的分類 UI設(shè)計(jì)決定了交互的方式 界面交互UI用戶體驗(yàn)UE 用戶體驗(yàn)UE設(shè)計(jì) UE體驗(yàn)設(shè)計(jì)基本概念 用戶體驗(yàn)是一個(gè)測試產(chǎn)品滿意度與使用度的詞語 在大多數(shù)情況下 產(chǎn)品軟體測試或是商業(yè)行銷測試時(shí) 會(huì)用到用戶體驗(yàn)這個(gè)詞 有時(shí)在探討設(shè)計(jì)價(jià)值時(shí) 也會(huì)用到此新設(shè)計(jì)是否導(dǎo)出更差的用戶體驗(yàn) 來評估其好壞 除了用戶能完成必須的任務(wù)之外 應(yīng)該還提供積極的體驗(yàn) 而應(yīng)用設(shè)計(jì)和交互流程也應(yīng)令用戶感到愉悅 以用戶為中心設(shè)計(jì) 設(shè)計(jì)必須是滿足用戶需求的 可行的 其次才是可產(chǎn)生商業(yè)價(jià)值的 什么是用戶體驗(yàn) 為什么電子商務(wù)網(wǎng)站用戶體驗(yàn)設(shè)計(jì)師有時(shí)也把用戶體驗(yàn)稱作顧客體驗(yàn) 這里特指用戶訪問一個(gè)網(wǎng)站或者使用一個(gè)產(chǎn)品時(shí)的全部體驗(yàn) 他們的印象和感覺 是否成功 是否享受 是否還想再來 使用 他們能夠忍受的問題 疑惑和BUG的程度 U 用戶體驗(yàn)在交互設(shè)計(jì)中的重要性 從一個(gè)倒霉的一天開始 當(dāng)你醒來時(shí)陽光已經(jīng)照進(jìn)你的窗戶 而你的鬧鐘并沒有響 匆忙起床后打開咖啡機(jī) 卻發(fā)現(xiàn)壺里沒有咖啡 出門開車發(fā)現(xiàn)車沒有了 匆忙加油卻發(fā)現(xiàn)油卡沒用 去排隊(duì)付現(xiàn)滿滿都是人 加油后又因?yàn)槁飞弦黄鹗鹿识萝嚵?千辛萬苦到單位后發(fā)現(xiàn)最終還是遲到 當(dāng)產(chǎn)品滿足人們的需要時(shí) 產(chǎn)品才是真正的稱之為產(chǎn)品 什么是用戶體驗(yàn) 用戶體驗(yàn)在交互設(shè)計(jì)中的重要性 交通事故 事故是一個(gè)司機(jī)為了調(diào)收音機(jī)音量而視線離開了前方 收銀機(jī) 收銀排隊(duì)是因?yàn)槭浙y系統(tǒng)過于復(fù)雜加油機(jī) 插卡插反了 加油機(jī)沒有提示咖啡機(jī) 匆忙中沒有把開關(guān)按到底 自動(dòng)開啟功能始終沒學(xué)會(huì) 鬧鐘 因?yàn)槟愕呢埌胍共攘唆[鐘一腳 當(dāng)產(chǎn)品滿足人們的需要時(shí) 產(chǎn)品才是真正的稱之為產(chǎn)品 什么是用戶體驗(yàn) 分析是不是可以避免這些 UE體驗(yàn)設(shè)計(jì)基本流程 騰訊ISD組織架構(gòu) UE體驗(yàn)設(shè)計(jì)基本流程 騰訊ISD網(wǎng)站組 網(wǎng)站設(shè)計(jì)流程 UE體驗(yàn)設(shè)計(jì)基本流程 阿里巴巴用戶體驗(yàn)部項(xiàng)目流程 UE體驗(yàn)設(shè)計(jì)基本流程 阿里巴巴用戶體驗(yàn)部項(xiàng)目流程 UE體驗(yàn)設(shè)計(jì)交付物標(biāo)準(zhǔn)與原則 為什么要對各階段輸出物的名稱進(jìn)行修正 更加形象化的表達(dá) 體現(xiàn)專業(yè)性 減少歧義 prototype mockup demo 交互原型 視覺稿 前端demo UE體驗(yàn)設(shè)計(jì)交付物標(biāo)準(zhǔn)與原則 分析用戶類型和用戶目標(biāo)以及我們能提供的功能 為各類型用戶目標(biāo)設(shè)計(jì)完整的宏觀通路 分別詳細(xì)進(jìn)行每種用戶的各個(gè)目標(biāo)的流程 交互設(shè)計(jì)師 決策人員 商業(yè)價(jià)值提議 策劃 功能性提議 交互設(shè)計(jì)師 流程圖 說明文檔 交互設(shè)計(jì)師 決策人員 商業(yè)價(jià)值提議 策劃 功能性提議 技術(shù) 是否能實(shí)現(xiàn)判斷 UE體驗(yàn)設(shè)計(jì)交付物標(biāo)準(zhǔn)與原則 設(shè)計(jì)每個(gè)流程中的細(xì)節(jié)流程 進(jìn)行視覺UI設(shè)計(jì) 頁面排版 設(shè)計(jì)部分結(jié)束 交互設(shè)計(jì)師 決策人員 商業(yè)價(jià)值提議 策劃 功能性提議 技術(shù) 是否能實(shí)現(xiàn)判斷 美術(shù)設(shè)計(jì)師 圖標(biāo)設(shè)計(jì) 排版 配色 說明設(shè)計(jì)及思路 交互設(shè)計(jì)師 是否符合用戶習(xí)慣提議 不參與美觀討論 美術(shù)設(shè)計(jì)師 交互設(shè)計(jì)師 決策 策劃 UE體驗(yàn)設(shè)計(jì)交付物標(biāo)準(zhǔn)與原則 進(jìn)行技術(shù)實(shí)現(xiàn) 產(chǎn)品完成上線檢測 技術(shù)支持 開發(fā) 交互設(shè)計(jì)師 技術(shù)與設(shè)計(jì)有沖突的地方隨時(shí)討論 交互設(shè)計(jì)師 技術(shù)人員 調(diào)整修改 其余人員 用戶 參與測試 UE體驗(yàn)設(shè)計(jì)交付物標(biāo)準(zhǔn)與原則 用以表達(dá)交互設(shè)計(jì)內(nèi)容是產(chǎn)品原型設(shè)計(jì)過程中的階段性成果 過渡型交付通過可視化產(chǎn)出使各方對設(shè)計(jì)范圍和內(nèi)容有形象化的 統(tǒng)一的認(rèn)知 輸出物是用以表述觀點(diǎn)和描述設(shè)計(jì)方案 本身不是設(shè)計(jì)的目的 交互輸出物 Prototype 什么時(shí)候提交輸出物 在向視覺設(shè)計(jì)或前端開發(fā)提交需求時(shí) 應(yīng)附帶上傳完整的輸出物文檔 并在變更時(shí)保持附件更新 UE體驗(yàn)設(shè)計(jì)交付物標(biāo)準(zhǔn)與原則 幫助交互設(shè)計(jì)師明確方案需要提供的內(nèi)容及范圍 減少遺漏減少溝通和銜接成本 提高工作效率 標(biāo)準(zhǔn)化是為了 怎樣做好體驗(yàn)設(shè)計(jì)UE 同理心 目標(biāo)明確 高效 優(yōu)雅 同理心 從合乎常理的角度觀察問題 目標(biāo)明確 帶著明確的設(shè)計(jì)目的 高效 主導(dǎo)注重實(shí)效的項(xiàng)目設(shè)計(jì)討論 優(yōu)雅 設(shè)計(jì)出優(yōu)雅統(tǒng)一的用戶界面交互 用戶體驗(yàn)在交互設(shè)計(jì)中的重要性 設(shè)計(jì)者UI用戶UE 關(guān)注體驗(yàn) 注重細(xì)節(jié) 界面交互設(shè)計(jì)與實(shí)例 界面交互設(shè)計(jì)與實(shí)例 界面交互設(shè)計(jì)與實(shí)例 按照軟件運(yùn)行的方式 軟件可以分為兩種類型 桌面軟件和網(wǎng)頁軟件 本次課程主要以網(wǎng)頁軟件為研究的對象 界面交互設(shè)計(jì)與實(shí)例 http www toyota 界面交互設(shè)計(jì)與實(shí)例 福特MyfordTouch車內(nèi)控制系統(tǒng) 界面交互設(shè)計(jì)與實(shí)例 界面交互設(shè)計(jì)與實(shí)例 界面交互設(shè)計(jì)與實(shí)例 圖形用戶界面GUI 1983年 蘋果推出的Macintosh 128K 型電腦獲得成功 很大程度上歸功于其配備了GUI操作系統(tǒng) System1 0 界面交互設(shè)計(jì)與實(shí)例 界面交互設(shè)計(jì)與實(shí)例 界面交互設(shè)計(jì)與實(shí)例 界面設(shè)計(jì)的重要性 界面設(shè)計(jì)的重要性 創(chuàng)造一個(gè)友好 易用的使用環(huán)境 界面設(shè)計(jì)的重要性 創(chuàng)造一個(gè)友好 易用的使用環(huán)境 界面設(shè)計(jì)的重要性 應(yīng)對激烈的競爭 界面設(shè)計(jì)的重要性 應(yīng)對信息結(jié)構(gòu)的日益復(fù)雜 界面設(shè)計(jì)的重要性 課堂練習(xí)對搜狐每戶網(wǎng)站進(jìn)行簡化 但不減少信息類別 界面設(shè)計(jì)的重要性 傳遞正確的信息 以網(wǎng)站為例 企業(yè)建立一個(gè)網(wǎng)站 是要傳遞信息 企業(yè)不同 信息也不同 信息不同 網(wǎng)站的界面設(shè)計(jì)亦會(huì)不同 界面設(shè)計(jì)的重要性 勞力士手表的網(wǎng)站 界面設(shè)計(jì)的重要性 可口可樂的網(wǎng)站 界面設(shè)計(jì)的重要性 傳遞正確的信息 讓我們再來看看Nike和Adidas這兩個(gè)知名的國際運(yùn)動(dòng)品牌的官方網(wǎng)站 界面設(shè)計(jì)的重要性 界面設(shè)計(jì)的重要性 界面設(shè)計(jì)的重要性 你會(huì)發(fā)現(xiàn)即使他們都是運(yùn)動(dòng)時(shí)尚的典范 其網(wǎng)站卻傳遞出彼此不同的文化內(nèi)涵 傳遞正確的信息 這也證明設(shè)計(jì)師已經(jīng)成功的把企業(yè)文化 產(chǎn)品文化通過界面?zhèn)鬟f給了終端客戶 界面設(shè)計(jì)的三要素 界面設(shè)計(jì)的三要素 界面設(shè)計(jì)的三要素 我們要設(shè)計(jì)怎樣的界面 并以何種形式完成它 要回答好這一問題 我們就必須明確 網(wǎng)站建設(shè)的目的 網(wǎng)站信息的內(nèi)容 我們還是以網(wǎng)站為例 網(wǎng)站設(shè)計(jì)形式 界面設(shè)計(jì) 創(chuàng)意 目的策劃 信息文化 設(shè)計(jì)形式 體現(xiàn) 服務(wù) 確定 決定 美化 服務(wù) 確定 擇優(yōu) 確定 決定 服務(wù) 實(shí)現(xiàn) 信息文化 信息 沒有信息就沒有網(wǎng)站 信息的形式不只是文字和圖片 網(wǎng)站的視覺設(shè)計(jì)也是信息內(nèi)容的一部分 信息文化 當(dāng)我們確立了網(wǎng)站建設(shè)的目的之后 就要圍繞這個(gè)目的對信息進(jìn)行篩選與編整 并按照重要程度有秩序地排放在頁面上 瀏覽者可以通過信息的編排 辨析內(nèi)容的重要程度 接收到來自界面?zhèn)鬟_(dá)的視覺信息 這樣 建設(shè)方的目的就達(dá)到了 信息文化 信息文化 http www moma org exhibitions 2004 tallbuildings index f html 信息與信息空間 信息與信息空間 網(wǎng)站即是信息的容器 也是信息的載體 它就像一個(gè)放置信息的立體空間 有著很多的單元格 將信息分門別類的放置其中 從信息的分類 分層 列表 更新可以衍生出網(wǎng)站的欄目 子欄目 文章列表及其它信息功能類別等多種信息屬性 做為信息的載體 網(wǎng)站的立意 設(shè)計(jì) 宣傳 發(fā)展都和信息內(nèi)容息息相關(guān) 信息與信息空間 信息與信息空間 信息量少 網(wǎng)站就簡單 但是設(shè)計(jì)師可以運(yùn)用圖形 文字 多媒體 版式等手段 巧妙地緩解信息過少給瀏覽者帶來的不信任 不確定感 網(wǎng)站的大小體現(xiàn)出信息量的多少 信息內(nèi)容也是建立網(wǎng)站的參考 信息與信息空間 信息與信息空間 信息量多 網(wǎng)站就豐富 但是其信息結(jié)構(gòu)就越復(fù)雜 建設(shè)工程就越浩大 也許會(huì)因?yàn)樾畔⒘窟^于龐大 而無法把幾個(gè)門類的信息放在同一個(gè)網(wǎng)站中 于是 韓國率先推出了以多個(gè)垂直門戶并列 形成的家族系列 將多個(gè)網(wǎng)站通過同一個(gè)品牌形象進(jìn)行門戶墻似的商業(yè)推廣方案 信息與信息空間 信息與信息空間 信息的形式 信息的形式 常見的信息形式主要有 文字 圖形圖像 動(dòng)畫 音樂等 作為傳播信息的載體 文字和圖像承載了90 以上的信息內(nèi)容 在網(wǎng)站界面上 處理信息形式之間的協(xié)調(diào)性和空間感 使它們呈現(xiàn)出一種可讀性高 易被瀏覽者接受的狀態(tài) 是設(shè)計(jì)師最主要的工作 信息之文字 信息之文字 網(wǎng)站的絕大部分信息是使用文字形式進(jìn)行傳達(dá)的 對于信息量較小的網(wǎng)站 頁面格局創(chuàng)意和文字段落排版設(shè)計(jì)可以使界面突破平庸 把文字設(shè)計(jì)與FLASH動(dòng)畫結(jié)合起來 使文字作為視覺元素活用在創(chuàng)意設(shè)計(jì)中 很多精彩的網(wǎng)站就這樣誕生了 除了正文 網(wǎng)站的導(dǎo)航 標(biāo)題等重要元素 主要是由文字組成的 http www gardens 信息之文字 信息之文字 文字設(shè)計(jì)的補(bǔ)充 字體設(shè)計(jì)在商業(yè)美術(shù)設(shè)計(jì)領(lǐng)域 屬于較難的課題 它是圖形設(shè)計(jì)的一支 在界面設(shè)計(jì)中 不需要設(shè)計(jì)者擅長字體設(shè)計(jì) 但是其應(yīng)該掌握字體的使用原則 信息之文字 標(biāo)志及口號性標(biāo)語 信息之文字 文字設(shè)計(jì)的補(bǔ)充 如 以方正字體為例 欄目標(biāo)題是大黑體 文章標(biāo)題是超粗黑體 正文是平黑體 一般情況下 頁面中的字體不要超過三種 如果希望有更多變化 應(yīng)盡量采用字體相同的字族 信息之文字 文字設(shè)計(jì)的補(bǔ)充 除此以外 還可以通過色彩對比 大小對比 疏密對比等方法 加強(qiáng)文字排版的審美效果 單一頁面上的文字要相互協(xié)調(diào) 強(qiáng)弱有致 使其產(chǎn)生和諧的美感 信息之文字 信息文化 信息文化 信息之圖片 圖片是比文字更為直觀的信息類型 也是界面設(shè)計(jì)核心要素 多數(shù)視覺作品多是通過優(yōu)秀的圖形設(shè)計(jì)和圖片取得成功的 信息之圖片 通過運(yùn)用好的圖形或圖片 可以在第一時(shí)間抓住瀏覽者的眼球 信息之圖片 信息文化 信息文化 信息文化 信息文化 信息文化 信息文化 信息文化 信息文化 但是如果只有重視視覺美感 只有精美的圖形或圖片 而忽略了我們建設(shè)網(wǎng)站的核心目標(biāo) 高效準(zhǔn)確地傳遞信息 客戶也是很難認(rèn)可的 信息之圖片 信息之圖片 初稿方案 信息之圖片 信息之圖片 定稿方案 信息之圖片 信息之圖片 信息之圖片 信息之動(dòng)畫 從網(wǎng)站建設(shè)的角度講 動(dòng)畫就是要在有限的空間中 把運(yùn)動(dòng)的文字信息和圖片按一定的邏輯方式組合起來傳達(dá)給瀏覽者 信息之動(dòng)畫 它的作用主要有 吸引眼球 如廣告條 模擬真實(shí) 如產(chǎn)品的360度展示 豐富的視覺形式 如FLASH宣傳首頁 視頻說明書 信息之動(dòng)畫 信息之動(dòng)畫 信息之動(dòng)畫 信息之音樂 信息之音樂 有了動(dòng)畫 自然離不開音樂 信息之音樂 信息之音樂 音樂的魅力在于鋪開了想像的空間 相同的畫面 配合不同的音樂 可以產(chǎn)生不同的解讀 如 紅色的畫面 配合陰森的曲子 自然會(huì)與恐怖的事情聯(lián)系起來 同樣還是紅色畫面 音樂換成敲鑼打鼓的歡快節(jié)奏 誰都會(huì)知道是喜慶的含義 信息之音樂 信息之音樂 馬自達(dá)8 信息之音樂 信息之音樂 但是所有的網(wǎng)站都適合放上音樂嗎 這需要具體情況具體分析 如 一個(gè)生產(chǎn)樂器的企業(yè)網(wǎng)站 其目標(biāo)是推廣企業(yè) 展示產(chǎn)品 產(chǎn)品不多 以電BASS 電吉他等快節(jié)奏的樂器為主 要不要在網(wǎng)站上放一段電吉他的音樂呢 信息之音樂 信息之音樂 設(shè)計(jì)師問了客戶三個(gè)問題 樂器是什么年齡層的消費(fèi)者使用 網(wǎng)站給誰看 網(wǎng)站的目標(biāo)用戶和產(chǎn)品最終消費(fèi)者一致 音樂是必須放的 還是可放可不放 信息之音樂 信息之音樂 客戶是這樣回答的 樂器是給一二十歲的年輕人玩的 網(wǎng)站是給國外的經(jīng)銷商看的 音樂雖然重要 但不是必須放出來 信息之音樂 信息之音樂 于是設(shè)計(jì)師建議不要在網(wǎng)站上放置背景音樂 尤其是快節(jié)奏 嘈雜的音樂 這可能會(huì)影響目標(biāo)用戶的瀏覽 對樹立品牌形象產(chǎn)生消極作用 信息的創(chuàng)建與管理 信息的創(chuàng)建與管理 首先必須明確 網(wǎng)站并非是依靠信息量巨大而取勝 而是需要信息與目的達(dá)成一致才能使網(wǎng)站成功 信息內(nèi)容的創(chuàng)建與管理必須圍繞目的展開工作 信息的創(chuàng)建與管理 信息的排序 信息的排序主要是針對目的而言的 信息的排序表現(xiàn)出了不同信息的重要程度 也就決定了頁面信息的分布位置 強(qiáng)調(diào)方式的不同 為達(dá)到建站目的 哪些信息是必須有的 哪些是希望有的 哪些是可以沒有的 信息的創(chuàng)建與管理 信息空間的結(jié)構(gòu) 信息空間可分為序列模式和樹型模型 信息的創(chuàng)建與管理 序列模式 序列模式通常針對的是文章列表或項(xiàng)目展示 文章與文章 項(xiàng)目與項(xiàng)目間是平等的 信息內(nèi)容的模式比較相似 頁面設(shè)計(jì)的版式也比較接近 設(shè)計(jì)師只需要考慮如何安排它們的布局 整理出相同的模板即可 這種模式常見于信息量非常少的網(wǎng)站 信息的創(chuàng)建與管理 http www madebyjarno nl 信息的創(chuàng)建與管理 信息的創(chuàng)建與管理 樹型模式 樹型模式是針對信息結(jié)構(gòu)的分類分層來說的 它體現(xiàn)除了信息間的邏輯關(guān)系 樹型模型首先分出頻道 頻道內(nèi)再劃分信息塊 信息塊還能進(jìn)一步劃分 依此類推 就形成了樹型的模式 對幾乎所有的網(wǎng)站來說 信息內(nèi)容之間都存在樹型關(guān)系 信息的創(chuàng)建與管理 樹型模式 信息的創(chuàng)建與管理 樹型模式 信息的創(chuàng)建與管理 樹型模式 信息的創(chuàng)建與管理 樹型模式 信息的創(chuàng)建與管理 信息的編輯 營銷領(lǐng)域有一句話 不是說什么 而是怎么說 怎樣讓自己網(wǎng)站的信息從網(wǎng)絡(luò)中脫穎而出 信息標(biāo)題和摘要就成為最重要的一環(huán) 相同的信息 怎樣才能讓瀏覽者更好理解和接受呢 信息的創(chuàng)建與管理 信息的編輯 A減價(jià)50 下面的三條廣告語說得是同一個(gè)促銷行為 你認(rèn)為客戶會(huì)欣然接受哪一種呢 答案是B B買一送一 C打?qū)φ?調(diào)查顯示 這條廣告語的銷售額勝過另兩條40 信息的創(chuàng)建與管理 課堂練習(xí) 為江漢大學(xué)設(shè)計(jì)學(xué)院手繪一套網(wǎng)站模型設(shè)計(jì) 目的與策劃 目的與策劃 目的與策劃 目的與策劃 目的是我們做事情的源頭和動(dòng)力 目的與策劃 明確目標(biāo) 如果我們要對網(wǎng)站進(jìn)行界面設(shè)計(jì) 就必須先明確建設(shè)網(wǎng)站的原因 如 建立網(wǎng)站是為了銷售產(chǎn)品 還是進(jìn)行商業(yè)服務(wù) 你的目標(biāo)用戶是誰 他們能從你的網(wǎng)站上得到什么 你想從網(wǎng)站中獲得怎樣的回報(bào) 即使目標(biāo)相似 具體的設(shè)計(jì)方案也會(huì)根據(jù)客戶的不同情況而有所差別 這些差別反映出網(wǎng)站的特殊性 目的與策劃 WICKEDSUNGLASSES 是一家專賣眼鏡的商務(wù)網(wǎng)站 經(jīng)營多個(gè)品牌的產(chǎn)品 目的與策劃 同樣是眼鏡專賣的網(wǎng)站 BLINDE卻只有5款產(chǎn)品 均來自于電影 駭客帝國2 目的與策劃 那么同樣作為銷售產(chǎn)品為目的的電子商務(wù)網(wǎng)站 如果把WS和BLINDE的界面設(shè)計(jì)形式相互交換 那是否可行呢 目的與策劃 把BLINDE的界面設(shè)計(jì)形式換成WS的框架式 那是否可行呢 目的與策劃 反之 如果WS采用了BLINDE的版式呢 目的與策劃 明確目標(biāo) 明確目標(biāo)的過程 就是找出客戶的優(yōu)勢 特色和行銷方式的過程 如果客戶并不知道提供什么資料比較好 設(shè)計(jì)師可以問以下幾個(gè)問題來引導(dǎo)客戶 目的與策劃 明確目標(biāo) 問題1 你要建設(shè)網(wǎng)站的目的是什么 參考答案 為業(yè)務(wù) 服務(wù)做廣告 電子商務(wù) 銷售產(chǎn)品 事業(yè)宣傳 文化 觀點(diǎn)傳播 為供求雙方建立平臺(tái)式網(wǎng)站 提供公益服務(wù) 這個(gè)問題能夠確定網(wǎng)站媒體的屬性 答案多為多選 目的與策劃 明確目標(biāo) 比如 LENOVO聯(lián)想公司 其網(wǎng)站以介紹產(chǎn)品為主 但也能夠在線購買產(chǎn)品 同時(shí)還沒有忽略對其品牌文化的推廣 目的與策劃 明確目標(biāo) 比如 LENOVO聯(lián)想公司 其網(wǎng)站以介紹產(chǎn)品為主 但也能夠在線購買產(chǎn)品 同時(shí)還沒有忽略對其品牌文化的推廣 目的與策劃 明確目標(biāo) blood 目的與策劃 明確目標(biāo) 問題2 你設(shè)想中的網(wǎng)站規(guī)模是多大 參考答案 很小 現(xiàn)有的資料能放下就行 以后很少添加新內(nèi)容 從最小的規(guī)模開始 然后逐步擴(kuò)大 最終網(wǎng)站內(nèi)容是全面而豐富的 相當(dāng)復(fù)雜 欄目眾多 資源豐富 更新快 積累快 不太好說將來怎么發(fā)展 走著看的 目的與策劃 明確目標(biāo) 問題2 你設(shè)想中的網(wǎng)站規(guī)模是多大 網(wǎng)站的規(guī)模將決定網(wǎng)站設(shè)計(jì)時(shí)選擇怎樣的框架結(jié)構(gòu) 如果網(wǎng)站更新快 積累快 框架設(shè)計(jì)就要針對未來加入的信息多做一些保留 結(jié)構(gòu)要靈活一些 如果網(wǎng)站內(nèi)容多 就很容易想到使用豎分欄式結(jié)構(gòu) 目的與策劃 為展示其豐富的產(chǎn)品系列 聯(lián)想的網(wǎng)站就采取了豎分欄式結(jié)構(gòu) 目的與策劃 讓我們再來看看另外一個(gè)眼鏡品牌RAY BAN的網(wǎng)站 適合隨時(shí)添加新產(chǎn)品 目的與策劃 明確目標(biāo) 問題3 目標(biāo)用戶的統(tǒng)一特征是什么 或者說 誰在看 參考答案 分銷商或是終端用戶 15 20歲之間的青少年或是20 30歲的青年 收入在5000元左右的灰領(lǐng)或是萬