用戶界面設(shè)計報告

1、精選優(yōu)質(zhì)文檔-傾情為你奉上 用戶界面設(shè)計報告封面：文件狀態(tài)：【】草稿【 】正式發(fā)布【 】正在修改文件標(biāo)識：SD-MODULE當(dāng)前版本：1.0作者：L集團(tuán)全體成員完成日期：2010-12-16目錄： 引 言.1 01文檔介紹1 02項目背景1 03讀者對象1 04參考文獻(xiàn)2 05術(shù)語與縮寫解釋2 06界面設(shè)計規(guī)范2 07界面關(guān)系和工作流程圖2 08主界面3 09子界面4 10美學(xué)設(shè)計5 11網(wǎng)頁配色基本概念.512網(wǎng)頁設(shè)計理念.5引言： 電子商務(wù)網(wǎng)站是人類商業(yè)發(fā)展一種全新模式。而要令這種全新模式真正化去實行和運(yùn)作，則需要進(jìn)行軟件化的設(shè)計制作。對于此類電子商務(wù)網(wǎng)站來說，用戶界面設(shè)計尤其重要。故針對

2、用戶界面得設(shè)計中，此設(shè)計報告能真正的方便于其電子商務(wù)網(wǎng)站的界面開發(fā)。01文檔介紹：該文檔為MP4電子商務(wù)網(wǎng)站用戶界面設(shè)計報告說明文檔。02文檔目的： 此文檔的編寫目的是為了讓界面設(shè)計人員能通過該文檔以明確的界面設(shè)計規(guī)劃來實現(xiàn)項目此方面的要求，方便使客戶、電子商務(wù)網(wǎng)站總軟件設(shè)計人員、軟件開發(fā)人員和整合測試人員了解設(shè)計方案的具體界面分配，方便其他功能的制作。同時也為界面設(shè)計的制作工作提供了直接文檔說明。03項目背景： 針對商務(wù)網(wǎng)站界面設(shè)計需求，以及方便日后買家的審美需要。隨著市面上各風(fēng)格網(wǎng)站的誕生，根據(jù)本公司做的電子網(wǎng)站資料需求用到的界面所在，有必要地對此界面的誕生。04參考文獻(xiàn)：【A】 李梅、鐘

3、陽晶、李冬睿、李振軍、楊穎、廖福保共同編著WEB程序設(shè)計，廣東農(nóng)工商職業(yè)學(xué)院出版，2010-6【B】 李德奇，Windows程序設(shè)計案件教材（C#），大連理工大學(xué)出版社，2008-1【C】郝安林 SQL Server 2005 基礎(chǔ)教程與實驗指導(dǎo) 清華大學(xué)出版社 2008.1105術(shù)語與縮寫解釋：縮寫、術(shù)語 解釋SDUI交互界面06界面設(shè)計規(guī)范： 本界面制作應(yīng)遵循互聯(lián)網(wǎng)電子商務(wù)網(wǎng)站使用標(biāo)準(zhǔn)，界面設(shè)計制作合法化、理性化，既符合大眾的市場所需也做到不侵權(quán)不盜版的原則要求。07界面關(guān)系和工作流程圖：經(jīng)客戶要求及小組討論，本接口學(xué)習(xí)網(wǎng)站各個界面關(guān)系圖如下：主界面分類搜索登陸注冊商品購買注冊用戶在線聊天

4、生成訂單放入購物前臺顯示設(shè)計流程：l 確定網(wǎng)站的整體風(fēng)格：由于我們設(shè)計的是買賣網(wǎng)站，所以采用大方得體的風(fēng)格。l 網(wǎng)頁色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點綴。l 確定網(wǎng)頁設(shè)計的工具：用Dreamweaver來設(shè)計整個網(wǎng)站的界面設(shè)計，用Photoshop來設(shè)計背景、框架等，用Fireworks來對已經(jīng)設(shè)計好的圖片進(jìn)行切割成模塊，以便插入Dreamweaver中，用Flash進(jìn)行美工設(shè)計、網(wǎng)頁配色，制作CI、LOGO、Banner等網(wǎng)頁動畫制作。l 編寫JSP語言 08主界面：為了頁面導(dǎo)航的清晰，本網(wǎng)站采用了框架式頁面設(shè)計。頁面頭放在上框架，課程介紹模塊放中框架，下框架是放接

5、口技術(shù)相關(guān)圖片。功能導(dǎo)航、登陸界面放在右框架。l 課程介紹模塊設(shè)計該模塊利用photoshop軟件制作，制作邊框，結(jié)合圖片文字，對接口技術(shù)課程做個簡單的介紹。09子界面：（后臺界面、登錄界面）后臺界面：登錄界面設(shè)計:進(jìn)入登陸模塊輸入用戶名、密碼注冊新用戶注冊界面 公共用戶界面驗證是否有效注冊成功用戶管理員登陸成功用戶界面效果如下：10美學(xué)設(shè)計：l 確定網(wǎng)站的整體風(fēng)格：由于我們設(shè)計的是學(xué)習(xí)網(wǎng)站，所以采用大方得體的風(fēng)格。l 網(wǎng)頁色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點綴。11網(wǎng)頁配色基本概念 （1）白紙黑字是永遠(yuǎn)的主題，誰都說不出不好來。 （2）網(wǎng)頁最常用流行色 蘭色藍(lán)天白云，

6、沉靜整潔的顏色。 綠色綠白相間，雅致而有生氣。 橙色活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào)。 暗紅寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激的紅色， （3）顏色的忌諱忌臟背景與文字內(nèi)容對比不強(qiáng)烈，灰暗的背景令人沮喪！忌純艷麗的純色對人的刺激太強(qiáng)烈抗議，缺乏內(nèi)涵。忌跳再好看的顏色，也不能脫離整體。脫離群眾是自取其辱！ 忌花要有一種主色貫穿其中，主色并不時面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。 忌粉顏色淺固然顯的干凈，但如果對比過弱，整得蒼白無力了，就象病夫一樣無可救藥。 藍(lán)色忌純，綠色忌黃，紅色忌艷。 （4）幾種固定搭配 藍(lán)白橙：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點綴。 綠白蘭：綠為主調(diào)。白底，綠標(biāo)題欄，蘭色或橙色按鈕或ICON做點綴。 橙白紅：橙為主調(diào)。白底，橙標(biāo)題欄，暗紅或桔紅色按鈕或ICON做點綴。 暗紅黑：暗紅主調(diào)。黑或灰底，暗紅標(biāo)題欄，文字內(nèi)容背景為淺灰色。12網(wǎng)頁設(shè)計理念 （1）內(nèi)容決定形式 先把內(nèi)容充實上，再分區(qū)塊，再定色調(diào)，再處理細(xì)節(jié)。 （2）先整體，后局部，最后回歸到整體。 全局考慮，把能填上的都填上，占位置。然后