UI設計報告范文
UI設計報告范文
篇一：UI設計報告.doc兼容
超市會員管理系統(tǒng)UI設計報告
一基于B/S以下特點，設計選用B/S架構(gòu)。
1：主要事務邏輯在服務器端（Server）實現(xiàn)，能大大簡化了客戶端電腦載荷，減輕了系統(tǒng)維護與升級的成本和工作量，降低了用戶的總體成本（TCO）。 2：它是一次性到位的開發(fā)，能實現(xiàn)不同的人員，從不同的地點，以不同的接入方式訪問和操作共同的數(shù)據(jù)庫。
3：它能有效地保護數(shù)據(jù)平臺和管理訪問權(quán)限，服務器數(shù)據(jù)庫也很安全 。特別是在JAVA這樣的跨平臺語言出現(xiàn)之后，B/S架構(gòu)管理軟件更是方便、快捷、高效。 二:要用到的軟件
1平面設計軟件photoshop 2網(wǎng)頁制作軟件dreamweaver 三：Ui設計將遵循以下原則 1：界面美觀而簡單
2：界面風格一致
3：采用分組的方法，將相關控件分組，以體現(xiàn)他們的關系同時顯示相關信息
4：使用強調(diào)，運用分組，層次，大小，顏色等字體來將注意力集中在首先需要看到的界面控件上，盡量以可視化的方式引導用戶進行操作。 四：界面設計圖初稿 1登錄頁面
注：其實藍色為明艷的亮色調(diào)，登錄框與頁面色有顏色上的差別
2會員進入的界面
3管理員進入頁面 主按鈕點擊主按鈕后呈現(xiàn)的分類信息
4銷售者進入的頁面
五：關于網(wǎng)頁的明度配色
1登錄頁面采用整體明度相差較小的高明的構(gòu)成柔和淡雅的弱對比效果，即高短調(diào) 其余頁面整體畫面采用中明度并使用明度差較大的明度對比做頁面主體，容易產(chǎn)生強烈對比
2所有頁面配色均以藍色調(diào)為主，因其給人一種沉穩(wěn)，靜謐感，使瀏覽者獲得視力的舒緩，會提高瀏覽者閱讀頁面的內(nèi)容的判別率
篇二：web ui設計報告
第一部分:實訓目的
21世紀是一個信息時代，Internet已經(jīng)進入人們生活與工作的各方面，而網(wǎng)頁作為Internet信息傳遞的重要載體，其重要也日趨突出。所以實訓的目的就是要我們更好的掌握好這一學期的網(wǎng)頁知識和提高自己的動手能力，并且上傳到網(wǎng)上去，讓更多人認識我，更好的宣傳自己。
個人網(wǎng)站的總體規(guī)劃和步驟
1． 設計的思路
我的個人網(wǎng)站主要是以綠為主，以淡色為輔。主要是希望所有的朋友看到這個空間能一種和諧、安寧、充滿生機的感覺。得到心靈的慰藉！
2． 綠色網(wǎng)站的意義
我設計的這個網(wǎng)站主要是給人輕松舒爽、賞心悅目的感覺，讓人們置身于一種美麗大自然的意境中 ，明快而錯落的綠，讓人仿佛來到青山翠谷。 網(wǎng)站的總體風格
網(wǎng)站的總體風格主要是以綠色為主，以淡色為輔，充滿活力，生機。具有個性色彩。
網(wǎng)站的布局其實很簡單，主要是做好一個模版，模版做好框架了，那網(wǎng)站就初步形成了，雖然主要框架做好了，但是也不要高興得太早哦，但是你也要想清楚怎樣把整個界面搭配得更具有個性化。首先，在框架的最top要插入一個能體現(xiàn)你個人網(wǎng)站的主圖。然后在主圖的下面插入按鈕導航條，之后下面就插入自己想要的風格，雖然用模版做出來的風格都非常相似，但是各個頁面都具有各自的特色，讓我們感受到自己的空間的個性。
綠色網(wǎng)站的內(nèi)容結(jié)構(gòu)也很簡單，分類清楚。頁面鏈接的層次也很明確，訪問者可以很明確的感受到制作網(wǎng)站的人的心情和性格。
綠色網(wǎng)站的主要色調(diào)是以綠色為主。鮮艷的綠色是一種非常美麗、優(yōu)雅的顏色，它生機勃勃，象征著生命。綠色寬容、大度，幾乎能容納所有的顏色。綠色
的用途極為廣闊，無論是童年、青年、中年、還是老年，使用綠色決不失其活潑、大方。以淡色為輔，兩種顏色的結(jié)合更體現(xiàn)出了青春與活力。
淡綠色網(wǎng)站主要采用的是環(huán)型結(jié)構(gòu)，每一個頁面連接另一個頁面，使各個頁面能方便的跳轉(zhuǎn)。
4 網(wǎng)站的分析與設計
設計一個個人網(wǎng)站,主要需要考慮兩個方面的因素:
1.速度:反應出用戶訪問網(wǎng)站頁面的速度。主頁是經(jīng)常被訪問的頁面，最好把每頁的風格統(tǒng)一起來，例如：導航部分最好放在每頁相同的位置，便于在每個頁面中的跳轉(zhuǎn)。
2．布局：是個人網(wǎng)站具有吸引力的根本所在，它主要說的是信息顯示的視覺效果。
5．規(guī)劃站點
站點規(guī)劃是設計站點前的一個重要步驟。合理地規(guī)劃站點對以后站點的設計甚至網(wǎng)站的制作會有事半功倍的效果。
4．1 導航草圖的制作有利于理清思路，避免在制作網(wǎng)站的過程中亂了方寸。如
圖4-1所示就是個人粉色網(wǎng)站的初始導航草圖。
圖4-1 導航圖
在導航草圖中，網(wǎng)站首頁下面有6個二級網(wǎng)頁。各網(wǎng)頁主要內(nèi)容如下：
首頁：總述。
我的簡介：個人資料。
相冊：包括了我自己的相冊，家人相冊、朋友相冊、明星相
冊和漫畫圖片。
留言板： 是訪問我的朋友其中可以寫上姓名、聯(lián)系方式和
對我的網(wǎng)站的看法。讓朋友給我留言，增進彼此的了解與交流。
日記：是用框架素材的，有我的作品，最新自己日記，我收
藏的文章，動畫效果，文字飄動，供訪問者觀賞。
音樂：有我最喜歡的音樂，我收藏的音樂，可以播放，帶歌
詞，下載，有飄動圖片，共訪問者分享。
4．2 創(chuàng)建站點文件夾
合理地創(chuàng)建站點文件夾可將網(wǎng)站文檔分門別類，井井有條地放置其中，這對以后網(wǎng)站的制作是極其有利的。創(chuàng)建“綠色”網(wǎng)站的站點文件夾的具體操作如下：
步驟1 在本地磁E盤創(chuàng)建一個文件夾，該文件夾在創(chuàng)建動態(tài)站點時將作為站點的根目錄。這里在E盤下創(chuàng)建一個名為黃裕福個人網(wǎng)
站的文件夾。
步驟2 在黃裕福個人網(wǎng)站文件夾內(nèi)創(chuàng)建不同功能的文件來，文件夾分別命名為圖片素材庫,按鈕素材，我的主頁，我的檔案，登陸注冊，相冊，日記，音樂8個文件夾，并將對應的素材放到各自的文件夾中。
4．1創(chuàng)建站點
步驟1 進入Dreamweaver 8工作界面后，選擇“站點”/“新建站點”命令彈出“未命名站點1的站點定義為”對話框。
步驟2 在該對話框中的“基本”選項卡中的“ 您打算為您的站點起什么名字？”文本框中輸入 hyfu
步驟2 單擊“下一步”按鈕，在彈出的對話框中選中“是，我想使用服務器技術(shù)”，在“哪種種服務器技術(shù)？”下拉列表中選擇“ASP VBScript”。
步驟3 單擊“下一步”按鈕，在彈出的對話框中選擇在開發(fā)過程中如何使用文件，這里選中“在本地進行編輯和測試”，在“你將把文件存儲在計算機上的什么位置？”文本框中輸入F: index
步驟4 在彈出的對話框的“您應該使用什么URL來瀏覽站點的根目錄？”中輸入http://localhost/index/ ,輸完后，單擊“測試URL”按鈕。如果這時它提醒你URL前綴測試成功，點擊“確定”按鈕，你就可以進入下一步了，否則的話，你再按照前面的步驟檢查站點出現(xiàn)的問題。
步驟5 單擊“下一步”按鈕，在對話框中選擇“否”。
步驟6 單擊“下一步”按鈕，點擊“完成”按鈕即可完成本地站點的創(chuàng)建，這時，創(chuàng)建的站點就顯示在“文件”面板中了
如圖所示
4．4首頁的布局
步驟1 選擇“布局模式”，將頁面布局為
步驟2 在第1行第1列里插入一張主要的圖片。
步驟3 在第2行第2列里面插入導航條。
步驟4 在相應的位置插入相應的圖片的Flash影片。
步驟5 在第2行第1列中插入一個表單，在表單中插入一個4行2列的表格，輸入相應的信息
篇三：UI網(wǎng)頁設計實訓報告
鄭州輕工業(yè)學院 實 訓 報 告
實訓名稱：姓 名：宋得洋院 （系）：
專業(yè)班級： 指導教師： 徐潔趙曉君 成 績：
時間： 20XX年 12月 24日至 20XX年 1月 4日
實訓報告
實訓內(nèi)容：
第一周的時候老師對我們以往學習的知識進行了詳細的了解，對我們以前學習不到的知識進行了總結(jié)，別且勉勵我們在今后學習的道路上不驕不躁。老師對向我們灌輸了網(wǎng)站的搭配技巧和大致結(jié)構(gòu)，這些只能在公司的實踐中才能得到的東西，我們在老師的幫助下得到了大致的了解，感謝老師。前幾天老師主要講解了PS的知識，比如怎么做燈光效果，我們在下午的時候進行了練習。老師說在2個星期的時間里學習到很多的知識是不可能的，但是我們要有信心和勇氣去學習，只有自己不放棄才能得到自己想要的知識。在讓我們得到理論知識灌輸?shù)耐瑫r，老師注重我們的實踐，實踐是根本，沒有實踐的東西是不成形的，也是不可靠的，無論怎么樣的想象，沒有起飛總是會墜毀的。老師對于蒙版效果的使用讓我耳目一新，以前總是不重視這些不太中心的東西，但是通過老師對于蒙板的講解，我了解了那些外觀上的刺激和強悍的作用，往往能讓人耳目一新。
老師對于蒙版的使用以及做出的一些精美的圖片，讓我認識到了蒙版的重要性。因為現(xiàn)在的人們對于美觀的要求性很高，我們需要對此下很大的功夫，這樣做出的東西才能滿足人們的口味。長久經(jīng)驗的積累讓老師在這個行業(yè)走的很遠，以后我會更加努力的實踐，讓自己在走上社會的道路上有一個良好的基礎。
老師講解的PS知識對PS進行了剖析，許多小技巧讓我們在作圖的時候效率有了很大的提高。 大概可以分為以下幾類：1.魔棒、套索、矩形選區(qū)工具、圓形選區(qū)工具、像素選擇工具等等，這一類使用簡單，對規(guī)則圖形和對比度大的圖像進行操作；2.通道選擇法，以不同顏色通道的亮度及對比度為基礎，進行繪制及選擇；3.矢量路徑方法選擇，工具包含繪制的圖形、鋼筆工具、網(wǎng)格工具等；
4.圖像具有相對復雜的背景，前景（即我們要扣取的對象）邊緣細微，例如發(fā)絲毛發(fā)等，可用抽出這類的濾鏡或者用其他第三方濾鏡，如Knockout、Mask Pro、ReMask、蒙娜麗莎等等；5.要扣取的前景具有半透明屬性，例如婚紗、水珠、氣泡、玻璃制品等，最好選用各種第三方濾鏡進行操作（因為功能較強，摳圖效果好），例如Knockout、Mask Pro、ReMask、蒙娜麗莎等；6.圖像復雜，單種工具無法完成摳圖，就要考慮多種工具和濾鏡組合扣取。
他還讓我們記住一些常用的快捷鍵如：比如，按住Ctrl Alt鍵拖動鼠標可以復制當前層或選區(qū)內(nèi)容； 如果你最近拷貝了一張圖片存在剪貼板里，Photoshop在新建文件(Ctrl N)的時候會以剪貼板中圖片的尺寸作為新建圖的默認大小。要略過這個特性而使用上一次的設置，在打開的時候按住Alt鍵(Ctrl Alt N)；如果創(chuàng)作一幅新作品，需要與一幅已打開的圖片有一樣的尺寸、解析度、格式的文件。只要選取“文件”→“New”，點Photoshop菜單欄的Windows選項，在彈出菜單的最下面一欄點擊已開啟的圖片名稱就ok（實在太方便了）；在使用自由變換工
具(Ctrl T)時按住Alt鍵(Ctrl Alt T)即可先復制原圖層(在當前的選區(qū))后在復制層上進行變換；Ctrl Shift T為再次執(zhí)行上次的變換，Ctrl Alt Shift T為復制原圖后再執(zhí)行變換。使用“通過復制新建層(Ctrl J)”或“通過剪切新建層(Ctrl J)”命令可以在一步之間完成拷貝到粘貼和剪切到粘貼的工作；通過復制(剪切)新建層命令粘貼時仍會放在它們原來的地方，然而通過拷貝(剪切)再粘貼，就會貼到圖片(或選區(qū))的中心；若要直接復制圖像而不希望出現(xiàn)命名對話框，可先按住Alt鍵，再執(zhí)行“圖像”→“副本”命令；Photoshop的剪貼板也很好用，但你更希望直接使用Windows系統(tǒng)剪貼板，直接處理從屏幕上截取的圖像。好的，按下Ctrl＋K，在彈出的面板上將“輸出到剪貼板”點中吧！
老師講解的蒙板是將不同灰度色值轉(zhuǎn)化為不同的透明度，并作用到它所在的圖層，使圖層不同部位透明度產(chǎn)生相應的變化。黑色為完全透明，白色為完全不透明。這些優(yōu)點：1.修改方便，不會因為使用橡皮擦或剪切刪除而造成不可返回的遺憾；2.可運用不同濾鏡，以產(chǎn)生一些意想不到的特效；3.任何一張灰度圖都可用來用為蒙板。以及主要的作用：1.用來扣圖；2.做圖的邊緣淡化效果；3.圖層間的溶合；在蒙板上應用不同的濾鏡，便會使淡化的邊緣出現(xiàn)不同的效果。在蒙板和圖層之間的空處有一個鏈接符號，默認是鏈接著的，點擊可解開蒙板與圖層的鏈接。此時如果移動圖層或蒙板，只會移動你選擇的相應圖層或蒙板，這點與圖層間的鏈接是一回事�？郾容^復雜的圖，比喻人的頭發(fā)，植物的枝葉等時，可將圖片轉(zhuǎn)為CMYK或LAB等不同顏色模式，找出一個對比最強，邊緣輪廓最清晰的通道，調(diào)整其色階，然后應用到蒙板，再作進一步修整。這些東西不僅僅教會了我們東西，更加的讓我的態(tài)度得到了端正。老師說態(tài)度很重要，沒有了端正的態(tài)度如何能用自己的心將自己的靈感融入到自己的作品中去，一個良好的態(tài)度是一個好的開端，同時也是自己能在做作品的時候用自己靈感澆筑眼下的作品。
這是老師的作品讓我們網(wǎng)站頁面的設計和圖形視覺的認識有了一個全新的了解，一張圖片有好的顏色和文字的合理設計才會讓被人認同你的作品，所以這一周的ps實訓使我對PS有了全新的認識。而真正的知識是理解和認知，而不是那些瑣碎的篇幅。
第二周的時候這一周老師給我們講了當前最流行的網(wǎng)頁布局的方法Div+css，老師也講了層布局與表格布局的區(qū)別，他們都是網(wǎng)頁布局的方式，一個便于以后的維護、一個便于制作他們各有好處，需要設計人員在制作時自己來取舍的，并且還有一些設計技巧：
1、靈活運用樣式
熟悉網(wǎng)頁設計的網(wǎng)友就知道，調(diào)用Style的方法很多，我們可以單擊鼠標右鍵選擇Custon Style來調(diào)用Style標準，也可以在狀態(tài)欄中的元素列表上單擊右鍵來調(diào)用Style。雖然不同的方法達到的效果看似一樣，但實際上產(chǎn)生的HTML代碼則完全不同。比如用Custon Style來調(diào)用Style標準，在網(wǎng)頁代碼中就生成一個〈span〉標簽，這樣的標簽一多就會使文件十分臃腫而且影響瀏覽器的解析速度，所以我們應盡量使用狀態(tài)欄中的元素列表來調(diào)用Style。
2、要讓Windows（特別是95/NT）使用定制的顯示器 匹配曲線，只需要如下操作：
�。�1）在開始菜單的“啟動”中刪除“Adobe Gamma Loader”。
�。�2）確定ICM曲線的路徑/名稱（基本上是處在C:WinNTSystem32Color中）。
�。�3）運行RegEdit，找到如下項目：
HKEY_LOCAL_MACHINE>Software>Adobe>Color>Monitor>Monitor0
�。�4）創(chuàng)建一個新的項，叫做“Monitor Profile”
�。�5）在這個顯示器曲線的項中輸入步驟2中的路徑/名稱。
注意：在設置了這個曲線后，由于Adobe Gamma已經(jīng)重新配置了Adobe Gamma Loader，因此不要再運行它。
3、同時鏈接到兩個網(wǎng)頁我們都知道超級鏈接一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“Go To URL”JavaScript 行為。打開一個有框架的網(wǎng)頁，選擇文字或圖象，然后從行為面板中選擇“Go To URL”。我們會注意到Dreamweaver會在“Go To URL”對話框中顯示所有可用的框架。選擇其中一個我們想鏈接的框架并輸入相應的URL后再選擇另一個框架并輸入另一個URL。
4、不給文件起中文名稱
大家在制作好了網(wǎng)頁后，通常會給網(wǎng)頁起一個具有代表性的中文名稱，一來能使人一看文件名就能大概了解文件所包含的內(nèi)容，二來能夠方便各個超級鏈接之間的相互調(diào)用。但如果你在Dreamweaver中這樣做，就會發(fā)現(xiàn)Dreamweaver對中文文件名支持得不是太好，經(jīng)常會有頁面調(diào)用不正確的現(xiàn)象發(fā)生，所以我們以后在Dreamweaver中保存網(wǎng)頁的時候，盡量用英文或者數(shù)字作為文件名稱，這樣就可以避免上面的出錯現(xiàn)象。
5、要創(chuàng)建網(wǎng)絡安全顏色，須確保色彩的R、G和B元素都是十六進制數(shù)的33或十進制的51的倍數(shù)，任何以下的值都是可接受的：00 (0)、33 (51)、66 (102)、 99 (153)、CC (204)、FF (255)。
6、巧妙隱藏標簽
如果在網(wǎng)頁中插入了不可見的元素時，Dreamweaver會自動在頁面上添加一個與之相應的元素標簽，以便于我們選擇不可見元素。但這并不全是件好事，比我們在一個有很多層的頁面中的第一行便插入一個表格，就會發(fā)現(xiàn)由于首行排列了太多的層元素標簽而使得表格自動退到了頁面的第二行，雖然在瀏覽時并不影
【UI設計報告】相關文章：
《ui un》優(yōu)秀教學設計10-20
《ai ei ui 》精品教學設計09-06
《ai ei ui特好》教學設計09-07
關于《ai ei ui》教學設計05-24
拼音復韻母ai ei ui教案設計09-18
ui設計師試用期工作總結(jié)范文10-03
ai ei ui 教學反思07-27
《ai ei ui》教學反思08-26