用戶界面設(shè)計(jì)報(bào)告

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

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

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

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

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

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