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