第一篇：如何寫“完”UI設(shè)計(jì)說明書
如何寫“完”UI設(shè)計(jì)說明書.txt男人應(yīng)該感謝20多歲陪在自己身邊的女人。因?yàn)?0歲是男人人生的最低谷，沒錢，沒事業(yè)；而20歲，卻是女人一生中最燦爛的季節(jié)。只要鋤頭舞得好，哪有墻角挖不到？1004*623 如何寫“完”UI設(shè)計(jì)說明書
我們中的大多數(shù)人都寫過UI設(shè)計(jì)說明書（或UI規(guī)格說明書），論壇里也經(jīng)常會有類似的討論，對UI設(shè)計(jì)說明書的框架和結(jié)構(gòu)我就不做過多的說明了。為什么有人寫了上百頁的UI設(shè)計(jì)說明書，別人還是看不懂，或者說忽略了細(xì)節(jié)呢？那今天我們重點(diǎn)討論一下關(guān)于細(xì)節(jié)闡述和表達(dá)的一些經(jīng)驗(yàn)，以免寫出只有自己看得懂的UI設(shè)計(jì)說明書。我先說說我總結(jié)的一些經(jīng)驗(yàn)吧，希望大家積極討論： 我們的目標(biāo)是：（沒有蛀牙，^_^ 玩笑！）
既要清晰描述用戶界面原型中的細(xì)節(jié)和交互方式，又要方便項(xiàng)目組的其他開發(fā)人員、需求人員以及測試人員等角色交流察看的說明文檔。主要內(nèi)容包括：
1.產(chǎn)品的目標(biāo)和成功標(biāo)準(zhǔn)，（例如一個(gè)全新的預(yù)言項(xiàng)目不可能要求用戶滿意度在90%以上，對升級產(chǎn)品要求就會高一些。）2.產(chǎn)品最終用戶群及產(chǎn)品用途（了解用戶的年齡、職業(yè)、產(chǎn)品的使用環(huán)境等都是非常必要的）3.首先滿足基本功能。（例如DVD機(jī)的基本功能是播放影碟，可能還有播放CD的功能等等）4.主要功能（在產(chǎn)品的幾十個(gè)功能中通過用戶驗(yàn)證和項(xiàng)目組篩選，選取用戶最常用到的功能，將其優(yōu)化，以不同層次展現(xiàn)于界面上。）5.用戶界面特性。（每一款界面都有自己的特性，比如觸摸屏的操作界面與手機(jī)的操作界面就算功能完全一樣，結(jié)構(gòu)、布局等特點(diǎn)也不會相同的。）幾點(diǎn)注意事項(xiàng)
1.必須緊貼需求，圍繞功能點(diǎn)展開。
2.描述語言簡短精確（這樣別人看的時(shí)候才不會煩）
3.保持文本的易維護(hù)性，建議使用WORD的大綱視圖編寫，便于更改和查找。4.說明書一定要有版本管理，對每次更新內(nèi)容要做詳細(xì)說明。
5.圖標(biāo)要與名稱一同提交，并說明是什么類型，如桌面圖標(biāo)、列表中的圖標(biāo)、工具欄圖標(biāo)、按鈕圖標(biāo)、屬性框或提示信息框中的圖標(biāo)等等。6.注意紀(jì)錄，包括項(xiàng)目組和用戶以及合作伙伴，如果在解釋某一特性時(shí)令兩人以上會感到困惑，那這一部分就需要更清楚的闡述了。
7.設(shè)計(jì)與實(shí)現(xiàn)同步，這個(gè)時(shí)最難的了，很多設(shè)計(jì)由于程序無法實(shí)現(xiàn)都被“卡”掉，早期程序也無法確定是否可以實(shí)現(xiàn)，傷腦筋！
8.維護(hù)UI設(shè)計(jì)說明書時(shí)不要忘記維護(hù)原型，作為UI設(shè)計(jì)說明書的補(bǔ)充原型是很重要的。UI設(shè)計(jì)中容易被忽略的地方 1.支持錯(cuò)誤提示和撤銷操作 2.簡便的安裝和卸載。3.必要的設(shè)置和幫助。
4.異常處理、錯(cuò)誤消息的描述和問題回應(yīng)提示。
5.除界面上有的圖標(biāo)和按鈕外，還要有快捷鍵、菜單訪問鍵、右鍵菜單、是否支持從其它軟件界面內(nèi)托拽復(fù)制文件等操作的說明。
6.域、菜單和按鈕在什么情況下為不可點(diǎn)擊狀態(tài)。7.狀態(tài)區(qū)，用來描述界面狀態(tài)的區(qū)域，通常位于頁面下方。（PS存儲時(shí)狀態(tài)區(qū)會顯示進(jìn)度條）8.剪貼板行為，用戶在我們產(chǎn)品中拷貝的文字或圖片的局部，是否可以貼入其他程序。9.指針的行為，說明超過多長時(shí)間的等待時(shí)應(yīng)出現(xiàn)沙漏狀態(tài)，在文本輸入?yún)^(qū)光標(biāo)應(yīng)有改變、有鏈接的地方有變?yōu)樾∈值?/p>
10.聲音行為，警示音、按鈕觸發(fā)音等
11.統(tǒng)一消息窗的彈出位置、背景色、大小、布局及特色
12.菜單欄和下拉選項(xiàng)等程序動作的描述，是向下還是向右彈出等。
13.動態(tài)狀態(tài)描述，如果要求窗口漸隱或漸顯，那就要說明漸隱或漸顯過程的時(shí)間以及方式（半透明還是馬賽克）等。
Art Designer作業(yè)規(guī)范書 1定義 2作業(yè)環(huán)境
? Art Designer日常作業(yè)的主要編輯工具： ? 軟件圖標(biāo)主要編輯工具： ? 各種Logo設(shè)計(jì)及印刷設(shè)計(jì)：
其他常用的編輯工具： 2.2 Art Designer 一般作業(yè)要求 ? 各個(gè)產(chǎn)品需求圖檔主要是：
Logo & Symbolic Mark：軟件的識別標(biāo)志象征圖及標(biāo)準(zhǔn)字搭配方案； Autorun：光碟自動執(zhí)行界面；
Splash：軟件激活時(shí)的歡迎及說明畫面； Login：登陸界面；
Banner：顯示版權(quán)信息及系列軟件版本號畫面； Icon：軟件工具欄，應(yīng)用程序配套圖標(biāo)； Source：各類軟件所圖形資源。? 命名規(guī)范：
aaa_bbb.ccc aaa-軟件代號 bbb-圖片類別(splash、sanner、logo等）ccc-文件后綴名（文件類型）? 備份共享方式：
3產(chǎn)品相關(guān)圖文件 編輯規(guī)格 3.1 圖文件編輯規(guī)格
以下為產(chǎn)品圖文件編輯模板的舉例說明： 圖文件編輯規(guī)格（附圖以“XXXXXX”為例）
Logo & Symbolic Mark：軟件的標(biāo)志和象征圖形用于宣傳和視覺記憶。（由于標(biāo)志的范圍很廣，設(shè)計(jì)制作時(shí)必須用適量設(shè)計(jì)軟件完成，以滿足各種不同運(yùn)用的需求）Autorun:軟件CD安裝時(shí)有不同選項(xiàng)在以此圖為基礎(chǔ)添加不同選項(xiàng)的鏈接按鈕。（軟件直接安裝無選項(xiàng)時(shí)以此圖為底圖）軟件執(zhí)行圖標(biāo)(Icon)編輯規(guī)格 應(yīng)用程序圖標(biāo)規(guī)格：
? 64*64 32bit、48*48 32bit、32*32 32bit、24*24 32bit、16*16 32bit ? 48*48 16bit、32*32 16bit、24*24 16bit、16*16 16bit ? 32*32 4bit、16*16 4bit（Windows 2000及以下版本支持16bit圖標(biāo)而Windows xp 支持32bit的圖標(biāo)，全規(guī)格的圖標(biāo)可以在不同系統(tǒng)中自動匹配，4bit的圖標(biāo)主要用于“安全模式”中顯示）Tool Bar 圖標(biāo)規(guī)格： ? 24*24 16bit、16*16 16bit ? 16*16 4bit Menu 圖標(biāo)規(guī)格： ? 16*16 16bit ? 16*16 4bit 4.Art Designer 作業(yè)遵循流程規(guī)范 Art Designer作業(yè)中 Adobe Photoshop 專用層面圖文件命名規(guī)范 6 軟件包裝設(shè)計(jì)的規(guī)范 宣傳頁的設(shè)計(jì)要素及注意事項(xiàng) 8 Art Designer日常學(xué)習(xí)交流
UI設(shè)計(jì)指南 年-月-日 版本:V1.0 作者: *** 審核: *** 批準(zhǔn): *** 年-月-日 更改記錄
日期 被修改的章節(jié) 修改的類型* 修改描述 修改人 年-月-日 全部 A 新建 ** * 修改類型分為 AMODIFIED D-DELETED 1 簡介 1.1 目的
提供UI設(shè)計(jì)流程定義，為交互設(shè)計(jì)提供依據(jù)。1.2 背景
使UI工作整體流程更具規(guī)范化和為這一規(guī)范更具有可視性。1.3 適用范圍
任何具有UI設(shè)計(jì)階段的項(xiàng)目。1.4 縮寫和術(shù)語
1.4.1可用性 usability 以有效性、效率和滿意度為指標(biāo)，產(chǎn)品在特定使用背景下為了特定的目的可為特定用戶使用的程度。1.4.2 用戶 user 與產(chǎn)品交互的個(gè)體。1.4.3 任務(wù) task 實(shí)現(xiàn)目的所必需的活動。1.5 參考資料
（本規(guī)范使用到的參考資料）1.6 本文結(jié)構(gòu)概述
定義UI設(shè)計(jì)流程和角色定義。1.7 流程概述
介紹整個(gè)UI設(shè)計(jì)階段的執(zhí)行過程。2 流程定義 2.1 流程圖劃分 UI設(shè)計(jì)流程圖
在流程圖中其實(shí)是有兩個(gè)緯度，分別是縱向和橫向
2.1.1 縱向：是角色的劃分對于一個(gè)項(xiàng)目來說通常會有三個(gè)角色分別是用戶研究角色、設(shè)計(jì)角色、制作角色
用戶研究角色：主要是讓UI實(shí)現(xiàn)以用戶為中心的設(shè)計(jì)主要工作有兩點(diǎn)
在進(jìn)行界面設(shè)計(jì)前了解整體產(chǎn)品的需求，并針對UI設(shè)計(jì)了解用戶對UI的需求，再把這需求傳達(dá)給設(shè)計(jì)師，即《UI需求分析報(bào)告》，這過程中的主要方法有焦點(diǎn)小組等。
在UI設(shè)計(jì)過程當(dāng)中會不停的要求對設(shè)計(jì)進(jìn)行評價(jià)這是就要求讓用戶來評價(jià)，我們稱這種方法叫使用性測試，在流程圖中的表現(xiàn)是對交互模型的使用性測試和驗(yàn)證性地使用性測試。
設(shè)計(jì)角色：主要是實(shí)現(xiàn)界面的交互設(shè)計(jì)即邏輯設(shè)計(jì)和界面設(shè)計(jì)
在做交互設(shè)計(jì)時(shí)一般是要根據(jù)《UI需求分析報(bào)告》做交互模型，即用一些工具實(shí)現(xiàn)一些交互的動作，讓用戶能直觀的了解界面間的邏輯關(guān)系，來確認(rèn)設(shè)計(jì)的可行性。
在界面設(shè)計(jì)時(shí)主要是設(shè)計(jì)皮膚即界面的布局圖標(biāo)的擺放等，這時(shí)的設(shè)計(jì)也是要遵循需求，并且要寫《UI設(shè)計(jì)說明》。
制作角色：主要是實(shí)現(xiàn)界面的截圖及坐標(biāo)的定義
在這過程中制作角色要和開發(fā)人員溝通，兩個(gè)角色相互配合完成項(xiàng)目的最后階段。
2.1.2橫向：是代表時(shí)間軸和整個(gè)項(xiàng)目開發(fā)的過程是對應(yīng)的：UI的數(shù)據(jù)采集階段實(shí)際上就是項(xiàng)目的啟動階段交互設(shè)計(jì)和使用性測試階段就是項(xiàng)目的細(xì)化階段界面設(shè)計(jì)和美術(shù)制作階段就是項(xiàng)目的構(gòu)造階段。2.2 關(guān)于評審點(diǎn)的說明
在UI流程圖中實(shí)際上可以把UI的工作劃分成四個(gè)部分即數(shù)據(jù)采集、交互設(shè)計(jì)、界面設(shè)計(jì)、美術(shù)制作。
在數(shù)據(jù)采集階段：會有可能是非正式評審主要會有交互設(shè)計(jì)師需求人員等參與；
在交互設(shè)計(jì)階段：也會有評審主要會有用戶研究角色、需求角色和開發(fā)人員角色來評審邏輯關(guān)系的合理性，包括使用合理性和設(shè)計(jì)合理性；
在界面設(shè)計(jì)階段：在設(shè)計(jì)過程中會不斷的和用戶及需求人溝通以達(dá)到以用戶為中心的設(shè)計(jì)，這結(jié)束后會有很正規(guī)的評審活動，這是的評審實(shí)際上是對整個(gè)UI項(xiàng)目的整體評審，包括工作量、質(zhì)量等多項(xiàng)的正規(guī)的評審；
在美術(shù)制作階段：美術(shù)制作階段實(shí)際上就是制作角色和開發(fā)人員的不斷的溝通完成全部開發(fā)工作的階段，因此這過程的評審是由雙方面的協(xié)調(diào)與合作來表現(xiàn)的。2.3 UI設(shè)計(jì)主要流程 時(shí)間1 時(shí)間2 時(shí)間3 UI啟動階段 UI細(xì)化階段 UI構(gòu)造階段
數(shù)據(jù)采集 分析報(bào)告 交互模型 使用性測試 界面原型設(shè)計(jì) 使用性測試 評審 美術(shù)制作 驗(yàn)證性測試
需求分析報(bào)告 需求分析報(bào)告 2.4 UI設(shè)計(jì)時(shí)間表和里程碑：
數(shù)據(jù)采集** 交互模型** 使用性測試** 啟動階段《分析報(bào)告》 細(xì)化階段《需求分析報(bào)告》 細(xì)化階段《需求分析報(bào)告》 驗(yàn)證性測試** 美術(shù)制作 評審 使用性測試** 界面原型設(shè)計(jì) ：表示時(shí)間點(diǎn) “**”：表示可裁減的活動 “《..》”：表示階段生成文檔 2.5 參與人及擔(dān)任角色和工作量 角色 人員 工作量 項(xiàng)目經(jīng)理
交互研究工程師 設(shè)計(jì)角色 制作角色
界面設(shè)計(jì)之圖標(biāo)設(shè)計(jì)規(guī)范 圖標(biāo)樣式應(yīng)該有趣、色彩豐富且充滿活力，因?yàn)楝F(xiàn)在的系統(tǒng)支持圖標(biāo)是32位圖標(biāo)，并且邊緣非常平滑。在矢量程序中繪制完每個(gè)圖標(biāo)后，再用Adobe Photoshop進(jìn)行處理可使圖像更加完美。本規(guī)范是專為設(shè)計(jì)者編寫的。在創(chuàng)建圖像時(shí)，建議您與高水平的圖形設(shè)計(jì)者一起工作，尤其是具有豐富的矢量和3D軟件經(jīng)驗(yàn)的圖形設(shè)計(jì)者。
圖標(biāo)設(shè)計(jì)概述的目的是讓您熟悉WindowsXP的新樣式，為創(chuàng)建圖標(biāo)做好準(zhǔn)備。圖標(biāo)樣式特性
(1)色彩豐富，是對WindowsXP外觀的補(bǔ)充。
(2)不同的角度和透視特性為圖像增添了動態(tài)活力。
(3)元素的邊角十分柔和，并略微有些圓滑。
(4)光源位于圖標(biāo)的左上角，同時(shí)有環(huán)繞光照亮圖標(biāo)的其它部分。
(5)漸變效果使圖標(biāo)具有立體感，進(jìn)而使圖標(biāo)的外觀更加豐滿。
(6)投影使圖標(biāo)更具對比度和立體感。
(7)添加輪廓可使圖像更清晰。
(8)日常對象(如計(jì)算機(jī)和設(shè)備)具有更現(xiàn)代化的個(gè)人外觀。圖標(biāo)尺寸
Windows XP圖標(biāo)有四種尺寸，建議使用以下四種尺寸：
(1)48×48像素
(2)32×32像素
(3)24×24像素
(4)16×16像素 圖標(biāo)色彩深度支持
WindowsXP支持32位圖標(biāo)。32位圖標(biāo)為24位圖像加上8位alpha通道。使圖標(biāo)邊緣非常平滑，且與背景相融合。
每個(gè)WindowsXP圖標(biāo)應(yīng)包含以下三種色彩深度，以支持不同的顯示器顯示設(shè)置：
24位圖像加上8位alpha通道(32位)8位圖像(256色)，加上1位透明色
4位圖像(16色)，加上1位透明色 調(diào)色板
圖標(biāo)中使用的主要顏色。對象的角度和分組
WindowsXP樣式圖標(biāo)使用的透視網(wǎng)格：并非所有對象使用16×16的復(fù)雜圖像都能獲得較好效果。某些對象通常以直觀圖像顯示：文檔圖標(biāo)、符號圖標(biāo)(如警告或信息圖標(biāo))、單一對象圖標(biāo)(如放大鏡)除非創(chuàng)建重疊輔助對象可以更清楚地表達(dá)圖標(biāo)的含義，否則就可讀性和完整性而言，還是應(yīng)使用直觀圖像。還應(yīng)考慮如何按組查看圖標(biāo)，以便確定如何將對象分組。投影
使用投影后，WindowsXP圖標(biāo)將更清晰且更具立體感。可在Photoshop中實(shí)現(xiàn)這種效果，本指南的后面部分將對此進(jìn)行描述。若要為圖像添加投影，請?jiān)?Photoshop中雙擊圖像的圖層，并選擇Drop Shadow。然后將Angle更改為135，Distance更改為 2，Size更改為2。此時(shí)投影為75%不透明黑色。輪廓
繪制XP樣式圖標(biāo)時(shí)，為圖像添加輪廓可使之更清晰，并可保證圖像在不同背景色上都具有較好效果。概念
設(shè)計(jì)圖標(biāo)時(shí)，請考慮以下因素：
使用已有概念以確保真實(shí)表達(dá)了用戶的想法。考慮圖標(biāo)在用戶界面環(huán)境中以何種形式出現(xiàn)，以及如何作為圖標(biāo)集的一部分使用。考慮圖形的文化背景。避免在圖標(biāo)中使用字母、單詞、手或臉。必須用圖標(biāo)表示人或用戶時(shí)，請盡可能使其大眾化。如果圖標(biāo)中的圖像由多個(gè)對象組成，應(yīng)考慮如何使圖像尺寸更小。建議在圖標(biāo)中使用的對象不超過三個(gè)。對于 16×16的尺寸大小，還可考慮刪除某些對象或簡化圖像使之更容易辨認(rèn)。透明工具
將Gif Movie Gear(GMG)打開一個(gè)對話框，其中顯示您的圖標(biāo)。使用吸管工具單擊圖標(biāo)的背景色。此顏色將更改為暗黃綠色(或在 GMG中選作透明背景色的顏色)。重復(fù)所有4位和8位幀。若要保存圖標(biāo)，請選擇 File->Save Icon As...。創(chuàng)建工具欄
Windows工具欄圖標(biāo)除不使用投影之外，使用的樣式與其它圖標(biāo)相同。由于工具欄圖標(biāo)非常小，建議您使用簡單的圖像。如果以直觀方式顯示圖像即可清晰地表達(dá)圖標(biāo)的含義，則不必使用其它復(fù)雜方式。創(chuàng)建AVI
WindowsXP使用8位AVI。創(chuàng)建.avi文件的過程與創(chuàng)建圖標(biāo)的過程相同-在Photoshop中準(zhǔn)備圖像，然后將其拖動到GMG 中。請按以下指導(dǎo)創(chuàng)建8位圖標(biāo)。若要使用GMG保存AVI，請轉(zhuǎn)至File->Export As->AVI file。
創(chuàng)建.avi文件時(shí)，請考慮以下因素：使用品紅(R255 G0 B255)作為背景透明色。在Photoshop中，重要的一點(diǎn)是不要出現(xiàn)雜散像素。
詳細(xì)設(shè)計(jì)說明書編寫規(guī)范
Detailed Design Specification 詳細(xì)設(shè)計(jì)說明書編寫規(guī)范
第1章 引言 1.1 目的
使項(xiàng)目詳細(xì)設(shè)計(jì)說明書的編寫規(guī)范化，從而規(guī)范軟件管理。盡可能詳細(xì)地描述程序的各成份的設(shè)計(jì)考慮，以利于編制程序。
[此處加入編寫目的] 1.2 背景
說明該軟件系統(tǒng)名稱，開發(fā)者，詳細(xì)設(shè)計(jì)原則和方案
[此處加入項(xiàng)目背景資料]
1.3 參考資料
列出有關(guān)的參考資料名稱，作者，發(fā)表日期，出版單位
[此處加入?yún)⒖假Y料]
1.4 定義
列出本文件中專用的術(shù)語，定義和縮寫詞
[此處加入術(shù)語和縮寫詞]
第2章 程序系統(tǒng)的組織結(jié)構(gòu)
2.1 運(yùn)行環(huán)境(編程協(xié)定)
[此處加入運(yùn)行環(huán)境].1.1 操作系統(tǒng)&數(shù)據(jù)庫系統(tǒng)
列出系統(tǒng)運(yùn)行的有關(guān)操作系統(tǒng)&數(shù)據(jù)庫系統(tǒng)的名稱，版本號，對應(yīng)版權(quán)單位
[此處加入操作系統(tǒng)]
[此處加入數(shù)據(jù)庫系統(tǒng)].1.2 編程工具
列出開發(fā)此系統(tǒng)的所需的主要編成工具的名稱，版本號，對應(yīng)版權(quán)單位,并簡述其特點(diǎn)
[此處加入編程工具].1.3 編輯、調(diào)試、聯(lián)接程序
[此處加入編輯、調(diào)試、聯(lián)接程序].1.4 編譯工具
[此處加入編譯工具].1.5 模擬、仿真數(shù)據(jù)
模擬數(shù)據(jù)使用過去的真實(shí)數(shù)據(jù)，數(shù)據(jù)如下：
[此處加入數(shù)據(jù)]
過程如下：
[此處加入過程].1.6 診斷、測試程序
[此處加入診斷、測試程序].1.7 檢測程序
[此處加入檢測程序]
2.2 單元命名規(guī)則
[此處加入單元命名規(guī)則]
2.3 程序邏輯
用圖表列出本程序系統(tǒng)內(nèi)每個(gè)模塊（或子程序）的名稱，標(biāo)識符，以及這些模塊（或子程序）之間的層次關(guān)系
[此處加入程序邏輯]
第3章 單元設(shè)計(jì)說明
[此處加入單元設(shè)計(jì)說明]
3.1 模塊單元（或子程序）（標(biāo)識符）1（名稱）
注明該功能模塊的編號和模塊名稱
3.1.1 程序描述
簡要描述安排本模塊（或子程序）的目的意義，程序的特點(diǎn)
[此處加入程序描述].1.2 功能
(1)功能說明
詳細(xì)描述此模塊（子程序）完成的主要功能
[此處加入功能說明]
(2)功能框圖
[此處加入功能框圖].1.3 輸入項(xiàng)
描述每個(gè)輸入項(xiàng)的特征，如：標(biāo)識符，數(shù)據(jù)類型，數(shù)據(jù)格式，數(shù)值的有效范圍，輸入方式等
[此處加入輸入項(xiàng)].1.4 輸出項(xiàng)
描述每個(gè)輸出項(xiàng)的特征，如：標(biāo)識符，數(shù)據(jù)類型，數(shù)據(jù)格式，數(shù)值的有效范圍，輸出方式等
[此處加入輸出項(xiàng)].1.5 算法
[此處加入算法].1.6 流程邏輯
[此處加入流程邏輯].1.7 接口
分別列出和本模塊（子程序）有調(diào)用關(guān)系的所有模塊（子程序）及其調(diào)用關(guān)系，說明與本模塊（子程序）有關(guān)的數(shù)據(jù)結(jié)構(gòu)
[此處加入接口].1.8 限制條件
說明本模塊（子程序）運(yùn)行中受到的限制條件
[此處加入限制條件]
3.2 模塊單元（或子程序）（標(biāo)識符）2（名稱）
???
第4章 軟件界面設(shè)計(jì)規(guī)范
說明：軟件界面設(shè)計(jì)屬于詳細(xì)設(shè)計(jì)，設(shè)計(jì)人員可根據(jù)項(xiàng)目的規(guī)模及時(shí)間跨度來決定是否單列出來，可靈活掌握
4.1 編寫目的
當(dāng)今軟件界的所有軟件無不是可視化的用戶界面，它的好處不外乎它有美觀、直接、操作者易懂和操作方便等好處。（此處輸入編寫文檔的具體目的）。
4.2 內(nèi)容：.2.1 界面設(shè)計(jì)思想
“為用戶設(shè)計(jì)，而不是設(shè)計(jì)者”。
4.2.2 界面設(shè)計(jì)原則
（1）界面要美觀、操作要方便并能高效率地完成工作。
（2）界面要根據(jù)用戶需求設(shè)計(jì)。
（3）界面要根據(jù)不同用戶的層次設(shè)計(jì)。（有的用戶對計(jì)算機(jī)相當(dāng)了解而有的從來就沒碰過計(jì)算機(jī)）
（4）避免出現(xiàn)嵌套式的界面設(shè)計(jì)。
（5）界面和代碼要相互制約。
（6）界面要通“人性”。即要有引導(dǎo)用戶操作的功能，不能是操作一有誤就卡住什么都做不下去，又無任何提示來幫助用戶如何進(jìn)行操作。
4.2.3 界面設(shè)計(jì)樣式
(1)登錄界面
（此處加入登陸界面圖）
（2）系統(tǒng)功能布局
菜單形式
（此處加入界面圖）
標(biāo)簽欄形式
（此處加入界面圖）
（3）錄入界面
（此處加入界面圖）
（4）查詢界面
（此處加入界面圖）
（5）統(tǒng)計(jì)界面
（此處加入界面圖）.2.4 常見提示信息樣式
（1）當(dāng)操作會帶來嚴(yán)重后果時(shí)（默認(rèn)按鈕為“否“）
（此處加入界面圖）
（2）當(dāng)操作會帶來一定后果時(shí)（默認(rèn)按鈕為“否“）
（此處加入界面圖）
（3）當(dāng)需征求操作者意愿時(shí)（默認(rèn)按鈕為“是“）
（此處加入界面圖）
（4）當(dāng)需提供操作者幫助時(shí)
（此處加入界面圖）
（5）當(dāng)操作者操作有錯(cuò)時(shí)
（此處加入界面圖）
（6）當(dāng)是一般提示時(shí)
（此處加入界面圖）
范例：
（此處加入界面圖）
4.2.5 常見錯(cuò)誤信息樣式
（此處加入界面圖）
4.2.6 其他界面約定
字體：一般界面字體為宋體，字號為9Twip（只要把窗體字體設(shè)為宋體，字號為9twip即可）。
顏色：界面顏色采用默認(rèn)色（除非用戶有特殊要求）。
按鈕：高度375Twip，除“確定”和“取消”外都需含有快捷鍵。
常見按鈕快捷鍵：添加(A)、刪除(D)、查詢(S)、更新(U)、打印(P)、關(guān)閉(C)、重新查詢(R)、統(tǒng)計(jì)(T)、退出(E)。
數(shù)據(jù)：REAL型數(shù)據(jù)一律保留兩位小數(shù)且右對齊。
對齊方式：界面上的標(biāo)題（Label）右對齊，其他控件左對齊。
第5章 編碼標(biāo)準(zhǔn)規(guī)范
5.1 編寫目的：
使用統(tǒng)一編碼約定集的主要原因，是使應(yīng)用程序的結(jié)構(gòu)和編碼風(fēng)格標(biāo)準(zhǔn)化，以便于閱讀和理解這段編碼。好的編碼約定可使源代碼嚴(yán)謹(jǐn)、可讀性強(qiáng)且意義清楚，與其它語言約定相一致，并且盡可能的直觀。
一組通用目的的編碼約定應(yīng)該定義完成上述目的所必需的、能讓程序員自由地創(chuàng)建程序邏輯和功能流程的最小的要求。編碼約定的目的是使程序易于閱讀和理解，而不是用過份的約束和絕對的限制來束縛程序員本身的創(chuàng)造性。
5.2 內(nèi)容：
程序設(shè)計(jì)語言的特性和風(fēng)格會直接影響到軟件的質(zhì)量和可維護(hù)性。
編碼原則：
應(yīng)盡量避免在系統(tǒng)初始化時(shí)運(yùn)行過多的代碼。（此處加入詳細(xì)原則）
（1）選用控制結(jié)構(gòu)只準(zhǔn)許一個(gè)入口和一個(gè)出口。
（2）程序語句組成容易識別的塊，每塊只有一個(gè)入口和一個(gè)出口。
（3）復(fù)雜的結(jié)構(gòu)應(yīng)該用基本控制結(jié)構(gòu)進(jìn)行組合嵌套來實(shí)現(xiàn)。
（4）語句中沒有的控制結(jié)構(gòu)，可用一段等價(jià)的程序段模擬，但要求該程序段在整個(gè)系統(tǒng)應(yīng)前后一致。
（5）嚴(yán)格控制GOTO語句，僅在下列情形才可使用。用一個(gè)非結(jié)構(gòu)化的程序設(shè)計(jì)語言去實(shí)現(xiàn)一個(gè)結(jié)構(gòu)化的構(gòu)造。
?
在某種可以改善而不是損害程序可讀性的情況下。? 5.2.1 對象命名約定
公式：對象名稱=對象前綴+自定義名稱（自定義名稱要有一定的意義且第一個(gè)字母大寫）
說明：如果是不需要對其編碼的對象，那么對象名用默認(rèn)對象名。
應(yīng)該用一致的前綴來命名對象，使人們?nèi)菀鬃R別對象的類型。下面列出了 Delphi 支持的一些推薦使用的對象約定。
（1）推薦使用的項(xiàng)目前綴
控件類型 前綴 例子
Class Module cmdl cmdlCheck
Data Environment dev devPrints
Data Report drt drtEnglish
Form frm frmEntry
MDIForm mfrm mfrmSinoexport
Module mdl mdlConnection
Project pjt pjtCkmis
（2）推薦使用的控件前綴
控件類型 前綴 例子
3D Panel pnl pnlGroup
ADO Data ado adoBiblio
Animated button ani aniMailBox
Check box chk chkReadOnly
Combo box drop-down list box cbo cboEnglish
Command button cmd cmdExit
Common dialog dlg dlgFileOpen
Communications com comFax
Control（當(dāng)特定類型未知時(shí)，在過程中所使用的）ctr ctrCurrent
Data dat datBiblio
Data-bound combo box dbcbo dbcboLanguage
Data-bound grid dbgrd dbgrdQueryResult
xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxx xxxxxxxx（3）推薦使用的數(shù)據(jù)訪問對象的前綴
用下列前綴來指示數(shù)據(jù)訪問對象。
數(shù)據(jù)庫對象 前綴 例子
Connection con conReports
xxx db dbAccounts
一些例子：
（此處加入例子）
（4）推薦使用的菜單前綴
應(yīng)用程序頻繁使用許多菜單控件，對于這些控件具備一組唯一的命名約定很實(shí)用。除了最前面 “mnu” 標(biāo)記以外，菜單控件的前綴應(yīng)該被擴(kuò)展：對每一級嵌套增加一個(gè)附加前綴，將最終的菜單的標(biāo)題放在名稱字符串的最后。下表列出了一些例子。
菜單標(biāo)題序列 菜單處理器名稱
（此處加入標(biāo)題序列及處理器名稱）
當(dāng)使用這種命名約定時(shí)，一個(gè)特定的菜單組的所有成員一個(gè)接一個(gè)地列在 Visual Basic 的“屬性”窗口中。而且，菜單控件的名字清楚地表示出它們所屬的菜單項(xiàng)。
（5）為其它控件選擇前綴
對于上面沒有列出的控件，應(yīng)該用唯一的由兩個(gè)或三個(gè)字符組成的前綴使它們標(biāo)準(zhǔn)化，以保持一致性。只有當(dāng)需要澄清時(shí)，才使用多于三個(gè)字符的前綴。
例如，（此處加入例子）
5.2.2 常量和變量命名約定
公式：常量或變量名稱=常量或變量范圍前綴+常量或變量類型前綴+自定義名稱（自定義名稱要有一定的意義且第一個(gè)字母大寫）
除了對象之外，常量和變量也需要良好格式的命名約定。本節(jié)列出了（此處加入變量列表）。
變量應(yīng)該總是被定義在盡可能小的范圍內(nèi)。全局(Public)變量可以導(dǎo)致極其復(fù)雜的狀態(tài)機(jī)構(gòu)，并且使一個(gè)應(yīng)用程序的邏輯非常難于理解。全局變量也使代碼的重用和維護(hù)更加困難。
Delphi中的變量可以有下列范圍：
范圍 聲明位置 可見位置
過程級（此處加入名稱）
模塊級（此處加入名稱）
全局（此處加入名稱）。
較好的編碼習(xí)慣是盡可能寫模塊化的代碼。例如，如果應(yīng)用程序顯示一個(gè)對話框，就把要完成這一對話任務(wù)所需要的所有控件和代碼放在單一的窗體中。這有助于將應(yīng)用程序的代碼組織在有用的組件中，并減小它運(yùn)行時(shí)的開銷。
除了全局變量（應(yīng)該是不被傳遞的），過程和函數(shù)應(yīng)該僅對傳遞給它們的對象操作。在過程中使用的全局變量應(yīng)該在過程起始處的聲明部分中標(biāo)識出來。
變量范圍前綴
隨著工程大小的增長，劃分變量范圍的工作也迅速增加。在類型前綴的前面放置單字母范圍前綴標(biāo)明了這種增長，但變量名的長度并沒有增加很多。
范圍 前綴 例子
全局 g GstrUserName
模塊級 m MblnCalcInProgress
本地到過程 無 DblVelocity
（此處加入說明）
變量
聲明所有的變量將會（此處加入說明）。
應(yīng)該給變量加前綴來指明它們的數(shù)據(jù)類型。而且前綴可以被擴(kuò)展，用來指明變量范圍，特別是對大型程序。
變量數(shù)據(jù)類型
用下列前綴來指明一個(gè)變量的數(shù)據(jù)類型。
（此處加入說明）
描述變量和過程名
變量或過程名的主體應(yīng)該使用大小寫混合形式，并且應(yīng)該足夠長以描述它的作用。而且，函數(shù)名（此處加入函數(shù)名稱）。
對于頻繁使用的或長的項(xiàng)，推薦使用標(biāo)準(zhǔn)縮略語以使名稱的長度合理化。一般來說，（此處加入特例說明）就困難了。
當(dāng)使用縮略語時(shí)，要確保它們在整個(gè)應(yīng)用程序中的一致性。在一個(gè)工程中，如果一會兒使用（此處加入說明問題），將導(dǎo)致不必要的混淆。
用戶定義的類型
在一項(xiàng)有許多用戶定義類型的大工程中，常常有必要給每種類型一個(gè)它自己的三個(gè)字符的前綴。如果這些前綴是（此處加入前綴名稱）。
5.2.3 結(jié)構(gòu)化編碼約定
（此處加入約定說明）
記住下列幾點(diǎn)：
每一個(gè)重要變量的聲明應(yīng)該包括（此處加入變量名稱）。
（2）格式化代碼
因?yàn)樵S多程序員（此處加入問題）
（此處加入解決問題的說明）
（3）給常量分組
變量和定義的常量應(yīng)該按功能分組，而不是分散到單獨(dú)區(qū)域或特定文件中。
（4）運(yùn)算符
（此處加入運(yùn)算符列表及說明）
（5）為（此處加入問題）查詢創(chuàng)建字符串
（此處加入說明）
5.2.4 數(shù)據(jù)源的約定
（此處加入數(shù)據(jù)源的約定）
5.2.5 數(shù)據(jù)庫訪問約定
訪問數(shù)據(jù)庫用ODBC drivers/ADO，但如果在有的技術(shù)ADO解決不了的情況下可用其他方法。
數(shù)據(jù)庫訪問技術(shù)有：（此處加入說明）
5.2.6 其他約定
（1）當(dāng)日期、時(shí)間型數(shù)據(jù)要求嚴(yán)格時(shí)，（此處加入說明）
（2）記錄集應(yīng)用約束
（此處加入約束）
利用記錄集
（此處加入記錄集說明）
（3）文件命名約定
工程文件和各模塊文件以漢字命名保存，這樣可方便管理和查找。
第二篇：UI設(shè)計(jì)思路
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
UI設(shè)計(jì)思路
UI測試用例設(shè)計(jì)方向[轉(zhuǎn)]
設(shè)計(jì)功能和界面測試用例
1.1 文本框、按鈕等控件測試
1.1.1 文本框的測試
如何對文本框進(jìn)行測試 a,輸入正常的字母或數(shù)字。b,輸入已存在的文件的名稱；
c,輸入超長字符。例如在“名稱”框中輸入超過允許邊界個(gè)數(shù)的字符，假設(shè)最多255個(gè)字符，嘗試輸入
256個(gè)字符，檢查程序能否正確處理；
d,輸入默認(rèn)值，空白，空格；
e,若只允許輸入字母，嘗試輸入數(shù)字；反之；嘗試輸入字母； f,利用復(fù)制，粘貼等操作強(qiáng)制輸入程序不允許的輸入數(shù)據(jù)； g,輸入特殊字符集，例如，NUL及n等；
h,輸入超過文本框長度的字符或文本，檢查所輸入的內(nèi)容是否正常顯示；
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
i,輸入不符合格式的數(shù)據(jù)，檢查程序是否正常校驗(yàn)，如，程序要求輸入年月日格式為yy/mm/dd，實(shí)際輸入yyyy/mm/dd，程序應(yīng)該給出錯(cuò)誤提示
在測試過程中所用到的測試方法： 1,輸入非法數(shù)據(jù)； 2,輸入默認(rèn)值； 3,輸入特殊字符集； 4,輸入使緩沖區(qū)溢出的數(shù)據(jù)； 5,輸入相同的文件名；
--命令按鈕控件的測試
測試方法：
a,點(diǎn)擊按鈕正確響應(yīng)操作。如，單擊確定，正確執(zhí)行操作；單擊取消，退出窗口；
b,對非法的輸入或操作給出足夠的提示說明，如，輸入月工作天數(shù)為32時(shí)，單擊”確定“后系統(tǒng)應(yīng)提示:天數(shù)不能大于31；
c,對可能造成數(shù)據(jù)無法恢復(fù)的操作必須給出確認(rèn)信息，給用戶放棄選擇的機(jī)會；
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
--單選按鈕控件的測試
測試方法：
a,一組單選按鈕不能同時(shí)選中，只能選中一個(gè)。
b,逐一執(zhí)行每個(gè)單選按鈕的功能。分別選擇了“男”“女”后，保存到數(shù)據(jù)庫的數(shù)據(jù)應(yīng)該相應(yīng)的分別為“男”“女”；
c,一組執(zhí)行同一功能的單選按鈕在初始狀態(tài)時(shí)必須有一個(gè)被默認(rèn)選中，不能同時(shí)為空；
---up－down控件文本框的測試
測試方法：
a,直接輸入數(shù)字或用上下箭頭控制，如，在“數(shù)目”中直接輸入10，或者單擊向上的箭頭，使數(shù)目變?yōu)?0；
b,利用上下箭頭控制數(shù)字的自動循環(huán)，如，當(dāng)最多數(shù)字為253時(shí)，單擊向上箭頭，數(shù)目自動變?yōu)?；反之亦適用；
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
c,直接輸入超邊界值，系統(tǒng)應(yīng)該提示重新輸入；
d,輸入默認(rèn)值，空白。如，“插入”數(shù)目為默認(rèn)值，點(diǎn)擊“確定”；或，刪除默認(rèn)值，使內(nèi)容為空，單擊“確定”進(jìn)行測試； e,輸入字符。此時(shí)系統(tǒng)應(yīng)提示輸入有誤。
------組合列表框的測試
測試方法：
a,條目內(nèi)容正確，其詳細(xì)條目內(nèi)容可以根據(jù)需求說明確定； b,逐一執(zhí)行列表框中每個(gè)條目的功能； c,檢查能否向組合列表框輸入數(shù)據(jù)；
------復(fù)選框的測試
測試方法：
a,多個(gè)復(fù)選框可以被同時(shí)選中； b,多個(gè)復(fù)選框可以被部分選中；
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
c,多個(gè)復(fù)選框可以都不被選中； d,逐一執(zhí)行每個(gè)復(fù)選框的功能；
----------列表框控件的測試
測試方法：
a,條目內(nèi)容正確；同組合列表框類似，根據(jù)需求說明書確定列表的各項(xiàng)內(nèi)容正確，沒有丟失或錯(cuò)誤； b,列表框的內(nèi)容較多時(shí)要使用滾動條；
c,列表框允許多選時(shí)，要分別檢查shift選中條目，按ctrl選中條目和直接用鼠標(biāo)選中多項(xiàng)條目的情況；
滾動條控件的測試
要注意一下幾點(diǎn)：
a,滾動條的長度根據(jù)顯示信息的長度或?qū)挾燃皶r(shí)變換，這樣有利于用戶了解顯示信息的位置和百分比，如，word中瀏覽100頁文檔，瀏覽到50頁時(shí)，滾動條位置應(yīng)處于中間；
b,拖動滾動條，檢查屏幕刷新情況，并查看是否有亂碼；
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
c,單擊滾動條； d,用滾輪控制滾動條； e,滾動條的上下按鈕。
各種控件在窗體中混和使用時(shí)的測試
a,控件間的相互作用；
b,tab鍵的順序，一般是從上到下，從左到右； c,熱鍵的使用，逐一測試； d,enter鍵和esc鍵的使用；
在測試中，應(yīng)遵循由簡入繁的原則，先進(jìn)行單個(gè)控件功能的測試，確保實(shí)現(xiàn)無誤后，再進(jìn)行多個(gè)控件的的功能組合的測試。
ps:密碼輸入框測試時(shí)要特別注意進(jìn)行字母大寫輸入的測試。
查找替換操作
案例演示:打開word中的“替換”對話框 測試本功能有通過測試和失敗測試兩種情況 通過測試: 1,輸入內(nèi)容直接查找,或查找全部
2,在組合框中尋找已經(jīng)查找過的內(nèi)容,再次查找并確認(rèn)文檔的內(nèi)容正
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
確,如,已經(jīng)查找過“測試用例”,再次進(jìn)入不用重新輸入查找內(nèi)容,直接在文檔中搜尋就可以.失敗測試: 1,輸入過長或過短的查詢字符串.如,假設(shè)查詢的字符串長度為1到255,那么輸入0,1,2,256,255和254進(jìn)行測試;2,輸入特殊字符集,如,在word中.^g代表圖片,^代表分欄符,可以輸入這類特殊字符測試;
替換測試大體相同.關(guān)于編輯操作窗口的功能測試的用例: 1,關(guān)閉查找替換窗口.不執(zhí)行任何操作,直接退出;2,附件和選項(xiàng)測試.假如,設(shè)定“精確搜尋”,“向后”搜索等附件選項(xiàng)等等來測試;3,控件間的相互作用.如,搜尋內(nèi)容為空時(shí),按鈕“搜尋全部”,“搜尋”,“全部替換”,“替換”都為灰色.4,熱鍵, Tab鍵.回車鍵的使用.插入操作
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
1,插入文件 測試的情況 a,插入文件;b,插入圖像;c,在文檔中插入文檔本身;d,移除插入的源文件;e,更換插入的源文件的內(nèi)容;
2,鏈接文件 測試方法: a,插入鏈接文件;b,在文檔中鏈接文檔本身;c,移除插入的源文件;d,更換插入的源文件的內(nèi)容.3,插入對象 要測試的內(nèi)容
a,插入程序允許的對象,如,在word中插入excel工作表;b,修改所插入對象的內(nèi)容.插入的對象仍能正確顯示;c,卸載生成插入對象的程序,如,在word中插入excel工作表后卸載
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
excel,工作表仍正常使用.編輯操作
編輯操作包括剪切,復(fù)制,粘貼操作.測試剪切操作的方法
a,對文本,文本框,圖文框進(jìn)行剪切;b,剪切圖像 c,文本圖像混合剪切 復(fù)制操作方法與剪切類似.測試時(shí),主要是對粘貼操作的測試,方法是: a,粘貼剪切的文本,文本框及圖文框;b,粘貼所剪切的圖像;c,剪切后,在不同的程序中粘貼
d,多次粘貼同一內(nèi)容,如,剪切后,在程序中連續(xù)粘貼3次;e,利用粘貼操作強(qiáng)制輸入程序所不允許輸入的數(shù)據(jù).精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
界面測試用例的設(shè)計(jì)方法 1,窗體
測試窗體的方法: a,窗體大小,大小要合適,控件布局合理;b,移動窗體.快速或慢速移動窗體,背景及窗體本身刷新必須正確;c,縮放窗體,窗體上的控件應(yīng)隨窗體的大小變化而變化;d,顯示分辨率.必須在不同的分辨率的情況下測試程序的顯示是否正常;進(jìn)行測試時(shí)還要注意狀態(tài)欄是否顯示正確;工具欄的圖標(biāo)執(zhí)行操作是否有效,是否與菜單懶中圖標(biāo)顯示一致;錯(cuò)誤信息內(nèi)容是否正確,無錯(cuò)別字,且明確等等;
2,控件 測試方法: a,窗體或控件的字體和大小要一致;b,注意全角,半角混合 c,無中英文混合.菜單
進(jìn)行測試時(shí)要注意
精心收集
精心編輯
精致閱讀
如需請下載！
演講稿 工作總結(jié) 調(diào)研報(bào)告 講話稿 事跡材料 心得體會 策劃方案
a,選擇菜單是否可以正常工作,并與實(shí)際執(zhí)行內(nèi)容一致;b,是否有錯(cuò)別字: c,快捷鍵是否重復(fù);d,熱鍵是否重復(fù);
精心收集
精心編輯 精致閱讀 如需請下載！
第三篇：UI設(shè)計(jì)教學(xué)
實(shí)用的UI設(shè)計(jì)教程
什么是UI？
UI英文全稱是：USER INTERFACE，中文即是用戶界面 UI包括三大塊，UX用戶體驗(yàn)，GUI視覺表現(xiàn)，HCI人機(jī)交互 零基礎(chǔ)學(xué)員怎么學(xué)習(xí)UI 首先，工欲善其事必先利其器！
先要學(xué)會PS（98%的設(shè)計(jì)師工作中會用到）AI（60%的設(shè)計(jì)師工作中會用到）DW（30%的設(shè)計(jì)師工作中會用到）FLASH（15%的設(shè)計(jì)師工作中會用到）3D視頻（10%的設(shè)計(jì)師工作中會用到）這些軟件的教程，可以在搜索引擎里搜到。
或者在網(wǎng)店買一本帶視頻教學(xué)光盤的PS和AI的書籍，學(xué)習(xí)過程耗時(shí)1-2個(gè)月。
切記，在你軟件基礎(chǔ)不扎實(shí)的情況下，看任何畫圖標(biāo)和畫界面的教程都是枉然的，你也看不懂，只能徒增挫折感！基礎(chǔ)不扎實(shí)，跟著別人教程畫。就是依樣畫瓢，知其然不知其所以然！
學(xué)PS和AI的注意事項(xiàng)：
對UI來說，PS中的路徑、圖層效果、圖層蒙版是UI最常用的功能，務(wù)必重點(diǎn)掌握。AI的話，也是路徑操作、路徑修改要重點(diǎn)掌握。
學(xué)完改課程后，你可試著畫剪影ICON，通過加，減，交等布爾運(yùn)算把圖形拼出來。
再者：圖標(biāo)認(rèn)知，圖標(biāo)主要是識別性
圖標(biāo)是對這個(gè)世界的一個(gè)隱喻，因?yàn)槠鋰H通用性以及形、色、意比文字更有有視覺沖擊力。所以，一個(gè)好的功能圖標(biāo)，首先要有很強(qiáng)的識別性，其次才是美不美，和整體UI界面是否風(fēng)格相符。連功能識別性都不清的圖標(biāo)，只能算作一個(gè)裝飾性的東西。
APP的線框圖，這個(gè)呢就是一個(gè)APP應(yīng)用軟件的每個(gè)頁面的布局結(jié)構(gòu)，一般是由產(chǎn)品交互設(shè)計(jì)師來做線框圖的。但是國外因?yàn)楹芏喙緧徫欢x不明確，所以現(xiàn)在很多PM產(chǎn)品經(jīng)理在兼做產(chǎn)品交互，也有讓GUI視覺設(shè)計(jì)師來做的。
其實(shí)，這個(gè)東西主要就是定義，功能在哪里，具體怎么跳轉(zhuǎn)和應(yīng)用的交互流程和框架。
品創(chuàng)設(shè)計(jì)UI設(shè)計(jì)流程：產(chǎn)品需求-產(chǎn)品定義-產(chǎn)品功能定義-技術(shù)評估-信息架構(gòu)-線框布局-軟件架構(gòu)-數(shù)據(jù)定義-視覺設(shè)計(jì)-切圖開發(fā)-上線測試-問題跟蹤-問題反饋-迭代開發(fā)
第四篇：《UI設(shè)計(jì)》課程標(biāo)準(zhǔn)
《UI設(shè)計(jì)》學(xué)習(xí)領(lǐng)域課程標(biāo)準(zhǔn)
執(zhí)筆：甄珍
審核：
時(shí)間： 2013-5-
5一、學(xué)習(xí)領(lǐng)域定位
“UI”熱是近幾年來興起的潮流，近幾年國內(nèi)很多從事手機(jī)，軟件，網(wǎng)站，增值服務(wù)等企業(yè)和公司都設(shè)立了這個(gè)部門。還有很多專門從事UI設(shè)計(jì)的公司也應(yīng)運(yùn)而生。
正是鑒于目前UI行業(yè)的發(fā)展?fàn)顩r，本專業(yè)第一次開設(shè)計(jì)《UI設(shè)計(jì)》課程。
《UI設(shè)計(jì)》是所有與網(wǎng)絡(luò)通信軟件相關(guān)專業(yè)課程，該課程既可以鞏固前期所學(xué)的設(shè)計(jì)基礎(chǔ)理論知識和設(shè)計(jì)軟件應(yīng)用知識，還重在給學(xué)生開拓新的專業(yè)知識面，認(rèn)知一個(gè)新的設(shè)計(jì)領(lǐng)域，從而拓展職業(yè)能力和就業(yè)選擇面。
二、職業(yè)分析
目前UI即用戶界面設(shè)計(jì)行業(yè)剛剛在全球軟件業(yè)興起，屬于高新技術(shù)設(shè)計(jì)產(chǎn)業(yè)，與國外在同步發(fā)展水平。其次國內(nèi)外眾多大型IT企業(yè)(例如：百度、騰訊、Yahoo、中國移動、Nokia、聯(lián)想、網(wǎng)易、微軟、盛大、淘寶等眾多企業(yè))均已成立專業(yè)的UI設(shè)計(jì)部門，但專業(yè)人才稀缺，人才資源爭奪激烈。但目前全國UI設(shè)計(jì)專業(yè)的系統(tǒng)教學(xué)極其稀少。UI設(shè)計(jì)師的待遇和地位也逐漸上升。
三、學(xué)習(xí)目標(biāo)
知識目標(biāo)：使學(xué)生能熟悉UI設(shè)計(jì)的流程和設(shè)計(jì)方法，并能使用制作有創(chuàng)意的，充滿視覺沖擊力的UI設(shè)計(jì)作品。
技能目標(biāo)：使學(xué)生學(xué)會系統(tǒng)規(guī)劃和全局思維，能夠完成一整套UI系統(tǒng)的設(shè)計(jì)。
素養(yǎng)目標(biāo)：使學(xué)生具備能從事UI系統(tǒng)的開發(fā)與設(shè)計(jì)能力，培養(yǎng)學(xué)生團(tuán)隊(duì)合作、及獨(dú)立思考能力。
四、學(xué)習(xí)內(nèi)容
四、學(xué)習(xí)領(lǐng)域課程設(shè)計(jì)思路
（一）設(shè)計(jì)理念
五、考核方式
學(xué)生成績的評定，以學(xué)生平時(shí)表現(xiàn)和任務(wù)完成情況及最終考核來核定。評分細(xì)則如下表：
其中，平時(shí)成績包括平時(shí)上課的表現(xiàn)和各任務(wù)的完成情況，占總成績的30％；最終考核成績所用考核方式為機(jī)試，占總成績的70％。
第五篇：UI設(shè)計(jì)流程
UI設(shè)計(jì)流程
階段一：分析
1用戶需求分析 2用戶交互場景分析 3競爭產(chǎn)品分析
這兩者可以說是相輔相成的。對于一個(gè)較為正規(guī)的項(xiàng)目而言，必然有對用戶需求的分析內(nèi)容。Tanjurd瑭錦資深UI設(shè)計(jì)師表示其中用戶UI需求是重要的組成部分。如果說UI設(shè)計(jì)原則是所有UI設(shè)計(jì)的出發(fā)點(diǎn)的話，那么用戶UI需求就是本次設(shè)計(jì)的出發(fā)是好的UI設(shè)計(jì)建立在對用戶深刻了解之上。因此用戶交互場景分析就很重要。對于大部分項(xiàng)目組來說也許沒有時(shí)間和精力去實(shí)際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是UI設(shè)計(jì)人員在分析的時(shí)候一定要站在用戶角度思考：如果我是用戶，這里我會需要什么。競爭產(chǎn)品能夠上市并且被UI設(shè)計(jì)者知道，必然有其長處。這就是所謂三人行必有我?guī)煹囊馑肌Ｃ總€(gè)設(shè)計(jì)者的思維都有局限性，看到別人的設(shè)計(jì)會有觸類旁通的好處。當(dāng)然有的時(shí)候可以參考的并不一定是競爭產(chǎn)品。
階段二 設(shè)計(jì)需求：（葉面設(shè)計(jì)前需提給UI頁面組）
1.系統(tǒng)設(shè)計(jì)需求文檔。2.系統(tǒng)結(jié)構(gòu)文檔（例如欄目劃分，目錄結(jié)構(gòu)，導(dǎo)航方式等）。3.較復(fù)雜頁面表現(xiàn)形式草圖（手繪或相關(guān)軟件繪制）。4.較復(fù)雜業(yè)務(wù)流程文檔。5.如有可能提供參考和示例站點(diǎn)。6.與程序員溝通部分頁面實(shí)現(xiàn)方法。
段三：頁面制作：
1.經(jīng)過確認(rèn)的美術(shù)設(shè)計(jì)的方案圖7.系統(tǒng)設(shè)計(jì)需求文檔等，較復(fù)雜務(wù)流程文檔。2.所需頁面腳本需求，與程序員溝通部分頁面實(shí)現(xiàn)方法。3提交給程序
用戶交互case圖（說明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說明交互和事件之間的聯(lián)系）交互功能設(shè)計(jì)圖（說明功能和交互的對應(yīng)關(guān)系）最終得到UI的設(shè)計(jì)產(chǎn)品。
階段四：驗(yàn)證
界面測試：（頁面組提交給測試組包括：1.經(jīng)確認(rèn)的設(shè)計(jì)方案圖。2.靜態(tài)模板頁面。以上二項(xiàng)均為便于查看嵌入程序后的葉面情況。3.常出現(xiàn)的界面錯(cuò)誤：圖片錯(cuò)誤，頁面不美觀，布局不合理，與原先設(shè)計(jì)不符，文字 錯(cuò)誤HTML代碼錯(cuò)誤，頁面程序錯(cuò)誤。4.界面bug測試報(bào)告：
正如Tanjurd瑭錦國際UI交互設(shè)計(jì)原則文中提到的，對于UI產(chǎn)品的驗(yàn)證主要從下面幾個(gè)方面入手：
1、功能性對照UI設(shè)計(jì)的再好，和需求不一致也不可以。
2、實(shí)用性內(nèi)部測試UI設(shè)計(jì)的最重要點(diǎn)就是實(shí)用性。
3、用戶焦點(diǎn)小組UI設(shè)計(jì)是否優(yōu)秀的重要衡量依據(jù)。最后，瑭錦Tanjurd說一點(diǎn)其他的問題。現(xiàn)在往往認(rèn)為交互式設(shè)計(jì)和最終的UI效果設(shè)計(jì)可以截然分開。這就好比說需求可以和設(shè)計(jì)截然分開，是不可能的。
總結(jié)：
1.產(chǎn)品定位與市場分析這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場需求完成的，但UI設(shè)計(jì)師應(yīng)了解產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運(yùn)營方式等。
2.用戶研究與分析這個(gè)過程是非常重要的，設(shè)計(jì)師應(yīng)該找到合適的方法來完成此環(huán)節(jié)。你可以搜集相關(guān)資料分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心里、需求等，提出用戶研究報(bào)告和可用性設(shè)計(jì)建議。這部分工作也可和團(tuán)隊(duì)配合完成。時(shí)間與項(xiàng)目需求允許的情況下，更可以制定實(shí)景用戶分析。
3.架構(gòu)設(shè)計(jì)這里涉及到比較多的界面交互與流程的設(shè)計(jì)，根據(jù)可用性分析結(jié)果制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。
4.原型設(shè)計(jì)我覺得這里應(yīng)該是一個(gè)小的階段標(biāo)志，要對前面所有工作加以設(shè)計(jì)方面的實(shí)施，根據(jù)進(jìn)度與成本，可以把原型控制在“手繪－圖形－FLASH-視頻”幾個(gè)質(zhì)量范圍。原型的本質(zhì)更傾向與一個(gè)DEMO，它不需要有全部的功能，但要體現(xiàn)出設(shè)計(jì)對象的基本特性。
5.界面設(shè)計(jì)如果很傾向于圖形界面設(shè)計(jì)，這兒是你最喜歡的部分。但一定要結(jié)合循環(huán)討論過的分析結(jié)果做設(shè)計(jì)，否則你的作品很難被人信服。色調(diào)、風(fēng)格、界面、窗口、圖標(biāo)、皮膚的表現(xiàn)是本環(huán)節(jié)的關(guān)鍵。
6.界面輸出作為設(shè)計(jì)師，在這一部分的工作就是配合好開發(fā)人員完成相關(guān)的界面結(jié)合。7.完善工作這個(gè)環(huán)節(jié)是很多部門共同參與的，包括可用性的循環(huán)研究、用戶體驗(yàn)回饋、測試回饋。同時(shí)，UI人員也應(yīng)該把一些可行性建議進(jìn)行完善。Tanjurd瑭錦表示很多設(shè)計(jì)師做了東西不喜歡改，這是一個(gè)大忌。
如上的流程，可能會有很多部門共同參與完成，UI設(shè)計(jì)師如何與團(tuán)隊(duì)配合并發(fā)揮自己應(yīng)有的作用非常重要。一名合格的UI設(shè)計(jì)師，應(yīng)該能貫穿整個(gè)UI流程進(jìn)行工作，而并非是單純的圖形界面設(shè)計(jì)。
點(diǎn)擊咨詢 