3.7 界面設(shè)計(jì)-網(wǎng)頁視覺設(shè)計(jì)規(guī)范及界面分割方法與優(yōu)化-備課筆記

編號13-01【web產(chǎn)品交互設(shè)計(jì)開發(fā)制作】編號13-01學(xué)習(xí)任務(wù)七、網(wǎng)頁視覺設(shè)計(jì)規(guī)范一、課程說明與要求1.課程說明我們平時(shí)瀏覽網(wǎng)站的時(shí)候會發(fā)現(xiàn)網(wǎng)站由于它的功能不同，在平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、色彩運(yùn)用方面都有所不同。我們在進(jìn)行網(wǎng)頁設(shè)計(jì)的創(chuàng)作過程中，首先要弄清楚網(wǎng)頁設(shè)計(jì)的分類。把網(wǎng)頁設(shè)計(jì)形式進(jìn)行藝術(shù)化的處理，讓網(wǎng)頁看起來更加美觀，更加容易瀏覽和閱讀，增強(qiáng)用戶體驗(yàn)，才能更好的創(chuàng)作出好的網(wǎng)頁交互設(shè)計(jì)作品。2.工具材料準(zhǔn)備說明本課的實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師將以下網(wǎng)頁視覺設(shè)計(jì)規(guī)范需準(zhǔn)備工具材料表格發(fā)到微信群中。軟件工具/插件備注Photoshop每臺電腦安裝cutterman每臺電腦安裝二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)專業(yè)學(xué)生，很多同學(xué)是沒有接觸過網(wǎng)頁交互設(shè)計(jì)的，并不了解它的一些基礎(chǔ)知識，普遍認(rèn)知不強(qiáng)，另一方面，學(xué)生對新興的事物接受比較快，對所選擇的專業(yè)感興趣，獲取知識的主動性較強(qiáng)。2.課程導(dǎo)入我們學(xué)習(xí)網(wǎng)頁交互設(shè)計(jì)的分類，那么什么是網(wǎng)頁設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)時(shí)如何分類的以及設(shè)計(jì)上有什么規(guī)范，比如我們常用的百度、搜狐、京東，都是網(wǎng)頁設(shè)計(jì)類型的一個(gè)體現(xiàn)。本節(jié)課給大家做一些介紹及總結(jié)，同學(xué)們了解之后，在設(shè)計(jì)網(wǎng)頁的時(shí)候就會有一個(gè)大概的方向及定位。三、理論知識講解（一）網(wǎng)頁設(shè)計(jì)分類和設(shè)計(jì)規(guī)范………【難點(diǎn)】1.什么是網(wǎng)頁設(shè)計(jì)通常意義上的網(wǎng)站設(shè)計(jì),即指的是網(wǎng)站中各個(gè)頁面的設(shè)計(jì)。對于設(shè)計(jì)，最先用到的就是網(wǎng)頁的布局。布局是否合理、美觀；2.設(shè)計(jì)分類（1）綜合資訊類以提供信息資訊為主，是目前最普遍的網(wǎng)站形式之一；特點(diǎn)是信息量大，訪問群體廣，功能比較簡單，基本包含檢索、留言等簡單的交互；編號13-02編號13-02（2）企業(yè)品牌類以展示為主，展示企業(yè)綜合實(shí)力、體現(xiàn)企業(yè)品牌理念，對創(chuàng)意、美工、內(nèi)容的組織策劃等的要求較高；利用多媒體交互技術(shù)、視頻、動態(tài)網(wǎng)頁等技術(shù)，達(dá)到品牌營銷傳播的目的。（3）交易類以實(shí)現(xiàn)交易為目的，網(wǎng)站的內(nèi)容基本是商品的展示、訂單的生成、執(zhí)行；編號13-03編號13-03（4）社區(qū)類由同一地區(qū)或同一類型構(gòu)成，把用戶集中在一個(gè)平臺（5）辦公及政府機(jī)構(gòu)類…………【思政融入（感受中國電子政務(wù)，優(yōu)化辦公流程，實(shí)現(xiàn)高效的辦公管理）】辦公及政府機(jī)構(gòu)類包括人力資源系統(tǒng)、辦公事物管理系統(tǒng)等，基本的功能是提供多數(shù)據(jù)接口，實(shí)現(xiàn)業(yè)務(wù)系統(tǒng)的數(shù)據(jù)整合；隨著信息技術(shù)的高速發(fā)展，我國政府信息化程度也越來越高，并且隨著政府信息化進(jìn)程加快和政府知識管理需求的增加，政府知識門戶網(wǎng)站必將成為越來越多政府部門發(fā)展必然選擇；高度重視政府網(wǎng)站建設(shè)是電子政務(wù)領(lǐng)先國家的普遍經(jīng)驗(yàn)，通過訪問這些政府網(wǎng)站，企業(yè)和社會公眾可以24小時(shí)不間斷地，不受任何空間界限影響地與之進(jìn)行信息交互，政府已經(jīng)成為企業(yè)和社會公眾感知和獲取電子政務(wù)公共服務(wù)的平臺。實(shí)踐證明，“以人為本，以用戶為中心”的網(wǎng)站能夠提高用戶對電子政務(wù)編號13-04的認(rèn)知度和滿意度。編號13-04（6）互動游戲類是近年來流行的一種類型（7）有償資訊類與資訊類相似，也是以提供資訊為主，但這類的業(yè)務(wù)模式一般要求訪問者按次、時(shí)間、或按量付費(fèi)編號13-05（8）功能類編號13-05它的主要特征是將一個(gè)具有廣泛需求的功能擴(kuò)展開，開發(fā)一套強(qiáng)大的支撐體系，看似簡單的頁面實(shí)現(xiàn)，卻往往投入很大（9）綜合類特點(diǎn)是提供兩個(gè)以上類型的服務(wù)，比如搜狐、新浪（里面包含新聞資訊類、互動游戲類、交易類（理財(cái)）等等）。【互動，引導(dǎo)學(xué)生感受不同網(wǎng)頁設(shè)計(jì)，教師做分類總結(jié)】3.設(shè)計(jì)規(guī)范（1）網(wǎng)頁尺寸采用1920px的整體大小，這個(gè)數(shù)據(jù)是根據(jù)相關(guān)的統(tǒng)計(jì)網(wǎng)站統(tǒng)計(jì)出來的。市面上占比最多的顯示器的分辨率比例為1920*1080；“百度統(tǒng)計(jì)-流量研究院”，它可以有效的來輔助我們做設(shè)計(jì)，去了解一些用戶的數(shù)據(jù)。編號13-06編號13-06再看“瀏覽器的市場份額”，現(xiàn)在份額最高的是谷歌瀏覽器，這是一些相應(yīng)的占比，基本上設(shè)計(jì)的時(shí)候盡量以這些主流瀏覽器為基準(zhǔn)。不同瀏覽器對交互的實(shí)現(xiàn)方式?jīng)]有統(tǒng)一，如果兼顧起來，實(shí)現(xiàn)會很復(fù)雜，甚至?xí)绊懢W(wǎng)頁的加載，就會影響用戶體驗(yàn)，所以我們還是根據(jù)主流瀏覽器去適配符合它的一些要求，便于通用；安全尺寸：在網(wǎng)頁左右有個(gè)邊界，也就是“留白”，這么做是為了適應(yīng)小屏幕。編號13-07編號13-07（2）字體字號正文宋體居多、思源黑體字體；英文：Arial；Tacoma；Veranda；消除鋸齒的方式為：WindowsLCD行間距盡量保持在1.5-2倍的距離字體顏色不要純黑（#000000）（3）統(tǒng)一性配色盡量保持色相一致要有主色調(diào)除圖片外，盡量不要超過3種顏色編號13-08編號13-08（二）掌握web界面在ps中的切圖方法………【重點(diǎn)】1.為什么要切圖切圖的主要目的是減小文件容量，提高組件的復(fù)用性，讓網(wǎng)頁瀏覽更快。2.切圖方法1）PS手動切圖使用【C】裁剪工具選中我們框選的地方，直接把圖片切出來，存儲為web所用格式；這種方法適用單張圖切圖2）右鍵“快速導(dǎo)出為png文件”選中圖片所在的組或?qū)?，直接右鍵選擇“快速導(dǎo)出為png文件”，選擇文件輸出目錄即可；這種方法存儲的圖片都比較大3）ps切片工具編號13-09工具欄中選擇“切片”工具，選擇我們要存儲的多個(gè)圖像，存儲為web所用格式，對圖片的長寬比做優(yōu)化，然后“存儲”即可編號13-094）PS切圖插件Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動將我們需要的圖層進(jìn)行輸出，以替代傳統(tǒng)的手工"導(dǎo)出web所用格式"以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。點(diǎn)擊【窗口】菜單選擇【擴(kuò)展功能】，【Cutterman】插件，直接選中圖層，然后點(diǎn)擊【導(dǎo)出選中圖層】即可自動切圖編號13-10【課后思考：第一，網(wǎng)頁設(shè)計(jì)分類，二，頁面切圖的幾種方法】編號13-10（三）根據(jù)交互需求進(jìn)行頁面切圖1、圖片及按鈕是需要切圖的；2、文字、純色背景、線條和一些標(biāo)準(zhǔn)的集合圖形是不需要提供切圖的。3、未切圖的元素，需要在標(biāo)注中標(biāo)明尺寸大小、圓角大小、描邊粗細(xì)、色值即可。（四）切圖文件的命名切出圖片的命名要根據(jù)交互設(shè)計(jì)的需要來進(jìn)行命名，這樣可以提高開發(fā)人員的開發(fā)效率和整個(gè)開發(fā)團(tuán)隊(duì)的友好合作；建議要盡可能用最少的字符而又能完整的表達(dá)標(biāo)識符的含義。命名規(guī)范：1、盡量使用拼音或英文2、避免使用無意義字符命名3、盡量使用語義相近的英文或英文簡寫命名；較長的單詞可以取單詞的頭部幾個(gè)字母形成縮寫；4、如果必須使用數(shù)字進(jìn)行描述，在文件名最后加入數(shù)字，如需符號，使用_做分割；5、拼寫為小寫英文字母四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：利用手機(jī)、電腦等工具，搜集不同的網(wǎng)站類型，并進(jìn)行分類。任務(wù)2：嘗試使用多種方法對ps分層的頁面設(shè)計(jì)圖進(jìn)行切圖（二）實(shí)戰(zhàn)項(xiàng)目案例運(yùn)用講解的幾種頁面切圖的方法，以及根據(jù)交互的需求對web端電商平臺的產(chǎn)品設(shè)計(jì)首頁的切圖及命名。教師重點(diǎn)指導(dǎo)：網(wǎng)頁設(shè)計(jì)的分類；設(shè)計(jì)規(guī)范；切圖方法在交互設(shè)計(jì)中的使用?！緦?shí)訓(xùn)指導(dǎo)：學(xué)生初次接觸軟件進(jìn)行設(shè)計(jì)實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生根據(jù)交互需求完成頁面切圖?！课濉⒄n堂總結(jié)今天，我們主要學(xué)習(xí)了網(wǎng)頁設(shè)計(jì)分類、設(shè)計(jì)規(guī)范，web頁面的切圖方法，如何根據(jù)交互需求進(jìn)行切圖及切圖文件如何命名等相關(guān)理論，也結(jié)合交互設(shè)計(jì)案例相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過練習(xí)對網(wǎng)編號13-11頁設(shè)計(jì)分類和頁面的切圖有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對你所接觸到的相關(guān)作品或產(chǎn)品，用專業(yè)的眼光，分析網(wǎng)頁設(shè)計(jì)的分類以及規(guī)范在交互設(shè)計(jì)中的應(yīng)用，這樣有助于你們對知識點(diǎn)的更深入的理解。編號13-11六、課后思考前面我們講到了網(wǎng)頁設(shè)計(jì)的分類和設(shè)計(jì)規(guī)范，認(rèn)識并掌握這些理論對網(wǎng)頁交互設(shè)計(jì)起到了很重要的作用，大家有必要深入了解一下。請同學(xué)們搜集一些有關(guān)