【正文】 l 很長的按鈕可能是框架的分解，應該盡量纖細一些，否則頁面會顯得很臃腫。l 有些單調(diào)的頁面，要靠花哨的按鈕來點綴。因為不管你進入到哪個頁面都可以快速跳轉(zhuǎn)到另外的欄目，更加方便自己的操作。l 目前網(wǎng)站中使用較多的欄目是用FLASH制作的網(wǎng)站導航，其體積小，視覺效果強烈。l 雙排導航未必要挨在一起，可以發(fā)揮想象，自由排列。教學步驟及教學內(nèi)容時間分配l 造導航欄目很多的情況下，就可以多排，甚至不規(guī)則的多排（一排個數(shù)不同或者長度不同）.商業(yè)設計或者門戶網(wǎng)站通常會有多個頻道，在設計的時候需要考慮橫向雙排，因為使用豎排會占用太多空間。導航欄的設計主要有一下幾個要點：l 在導航欄目不多的情況下，通常是一排，橫豎都可以。教學步驟及教學內(nèi)容時間分配作業(yè)布置課后反思授課課題界面的整體設計——導航欄和按鈕的設計要點教學目標和要求導航欄和按鈕的設計教學重點和難點重點：掌握導航欄和按鈕的設計要點難點：掌握導航欄和按鈕的設計要點并應用教學方法案例教學教學手段多媒體授課時間第 十一 周課時累計18教 學 過 程教學步驟及教學內(nèi)容時間分配導入：導航欄和按鈕都是我們在網(wǎng)頁設計中經(jīng)?？吹降模沟梦覀兊牟僮鞲臃奖?，接下來了解一下他們的設計要點一導航欄導航欄如果設計得恰到好處，會給網(wǎng)頁增色很多?！　」δ艿膱?zhí)行流程，用戶可以控制。（參考簡單導向原則）　　可控制　　　　可達到的效果也同界面設計有關?！　∫⒁獾氖墙换サ拇螖?shù)會影響可達到的效果。因此交互元素必須可以被用戶控制。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作?！　∪绻荒転橛脩衾斫?，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應的功能。但是我們可以看到這個理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個理念設計，會更加簡化用戶操作流程?！　±纾核行枰脩舸_認操作的對話框都至少包含確認和放棄兩個按鈕。因此需要對目標用戶進行調(diào)查取得反饋。同一個（類）軟件采用一致風格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。　　例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那么該目標需要貫徹軟件（軟件包）整體，而不是局部。一致性原則　　設計目標一致　　軟件中往往存在多個組成部分（組件、元素）。軟件響應用戶的動作和設定的規(guī)則。提示和引導用戶　　軟件是用戶的工具。這種習慣的交互方式往往來源于其原有的針對現(xiàn)實的交互流程、已有軟件工具的交互流程。　　例如：對于科學用戶和對于電腦入門用戶的設計重點就不同。第二節(jié) UI設計的流程確認目標用戶　　在洛可可的UI設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求?！　　　「咝屎陀脩魸M意度是人性化的體現(xiàn)?！　　　『唵蝸碚f就是要讓用戶方便的使用，但不同于上述。　　　　用戶能自由的作出選擇，且所有選擇都是可逆的。如：書籍對比竹簡。用戶總是按照他們自己的方法理解和使用?！　　　∮脩艨赏ㄟ^已掌握的知識來使用界面，但不應超出一般常識。界面的結(jié)構(gòu)必須清晰且一致，風格必須與游戲內(nèi)容相一致。所以對用戶來說，瀏覽信息要比記憶更容易。　　　　人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。UI設計圖片是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。教學方法案例教學教學手段多媒體授課時間第 十 周課時累計16教 學 過 程教學步驟及教學內(nèi)容時間分配導入新課: 第一節(jié) UI設計原則　　　　界面的簡潔教學重點和難點教學重點：掌握UI設計原則、流程。 l 播放器界面：在激烈的市場競爭中，軟件產(chǎn)品僅有強大的功能是遠遠不夠的，將易用性與美觀相結(jié)合，才能適應用戶的需要，從而創(chuàng)造出更高的價值。如下圖的咖啡網(wǎng)站頁面l 手機界面：隨著科技的發(fā)展，手機的功能也越來越強大，手機界面的設計要人性化，不僅要方便使用，還要美觀。網(wǎng)站界面必須具有獨立性和創(chuàng)意性。圖形界面可以分為以下幾類：l 軟件用戶界面：軟件只是一種工具，然而人們與軟件的交互性操作都是通過軟件界面來進行的，所以軟件界面的設計不僅要美觀而且要易用。一．什么是界面設計界面設計是為了滿足專業(yè)化、標準化需求而對軟件的使用界面進行美化、優(yōu)化、規(guī)范化的設計分支，具體包括軟件啟動封面設計、軟件框架設計、按鈕設計、面板設計、菜單設計、標簽設計、圖標設計、滾動條及狀態(tài)欄設計、安裝過程設計、包裝及商品化。界面設計的要求界面設計師瀏覽者瀏覽網(wǎng)頁的第一印象，所以它的設計風格要與整體頁面相一致，顏色的搭配要符合人們的視覺習慣，并與頁面的整體色調(diào)想?yún)f(xié)調(diào)。其次是清楚安全，指在用戶出現(xiàn)危機的選擇時有信息介入系統(tǒng)的提示。界面設計的原則界面設計是瀏覽者與網(wǎng)絡交流的平臺，由于它在網(wǎng)絡中具有特殊位置，所以其設計要遵循一定的原則。教學步驟及教學內(nèi)容時間分配界面設計的重要性界面是用戶與網(wǎng)頁交互的窗口，用戶通過界面想計算機輸入信息進行控制、查詢和操作；網(wǎng)頁則通過界面想用戶提供信息，以供閱讀、分析、判斷。用戶界面的發(fā)展經(jīng)歷了從低級到高級的過程，用戶界面在軟件系統(tǒng)中的價值比重也越來越高，用戶假面設計不僅要美觀，而且要實用。第五節(jié) 系統(tǒng)界面教學步驟及教學內(nèi)容時間分配同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。第三節(jié) 手機界面設計同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。拼音輸入法：　　拼音輸入法是騰訊公司開發(fā)的一種方便人們使用和觀看的輸入法，可下載各種各樣的皮膚來改變自身的皮膚。搜狗拼音輸入法是基于搜索引擎技術的、特別適合網(wǎng)民使用的、新一代的輸入法產(chǎn)品，用戶可以通過互聯(lián)網(wǎng)備份自己的個性化詞庫和配置信息。漢字輸入的編碼方法，基本上都是采用將音、形、義與特定的鍵相聯(lián)系，再根據(jù)不同漢字進行組合來完成漢字的輸入的。同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。 最低： 256x256 （RGB /A） ， 48x48 （RGB /A， 256色） ， 32x32 （RGB /A， 256色） ， 16x16 （RGB /A， 256色）　　可選： 128x128 （的RGB /A）　　Windows Vista?　　 建議： 48x48 （RGB /A， 256色， 16色） ， 32x32 （RGB /A， 256色， 16色） ， 24x24 （RGB /A， 256色， 16色） ， 16x16 （RGB /A， 256色， 16色）　　 建議： 48x48 （ 256色， 16色） ， 32x32 （ 256色， 16色） ， 16x16 （ 256色， 16色）.　　當然，效果就差些了。你必須確保你所設計的圖標中至少含有以上所列的圖像格式來獲得良好的顯示效果?！　∽⒁猓篧indows98/2000對24 x 24格式的圖標不兼容。如果在相同的顯示環(huán)境下，Windows XP操作系統(tǒng)中，這些圖標的圖像格式就是：真彩色（32位色深）、32x32象素大小。象素分辨 操作系統(tǒng)在顯示一個圖標時，會按照一定的標準選擇圖標中最適合當前顯示環(huán)境和狀態(tài)的圖像?！　∫粋€圖標實際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區(qū)域。圖標還有另一個特性：它含有透明區(qū)域，在透明區(qū)域內(nèi)可以透出圖標下的桌面背景。一個圖標就是一套相似的圖片，每一張圖片有不同的格式?！　D標有一套標準的大小和屬性格式，且通常是小尺寸的。圖標也用于在瀏覽器中快速展現(xiàn)內(nèi)容。圖標有助于用戶快速執(zhí)行命令和打開程序文件。狹義　　應用于計算機軟件方面，包括：程序標識、數(shù)據(jù)標識、命令選擇、模式信號或切換開關、狀態(tài)指示等。教學步驟及教學內(nèi)容時間分配圖標分為廣義和狹義兩種：廣義具有指代意義的圖形符號，具有高度濃縮并快捷傳達信息、便于記憶的特性。教學方法案例教學教學手段多媒體授課時間第 十