界面設(shè)計(jì)方案風(fēng)格說(shuō)明

1、界面設(shè)計(jì)風(fēng)格說(shuō)明 TOC o 1-5 h z HYPERLINK l bookmark19 o Current Document 引言1 HYPERLINK l bookmark23 o Current Document 編寫(xiě)目的1 HYPERLINK l bookmark27 o Current Document 文檔范圍1 HYPERLINK l bookmark31 o Current Document 讀者對(duì)象2 HYPERLINK l bookmark35 o Current Document 參考文獻(xiàn)2 HYPERLINK l bookmark39 o Current Docume

2、nt 術(shù)語(yǔ)與縮寫(xiě)解釋2 HYPERLINK l bookmark43 o Current Document 目標(biāo)人群2 HYPERLINK l bookmark47 o Current Document 界面設(shè)計(jì)原則2 HYPERLINK l bookmark51 o Current Document 界面一致性3 HYPERLINK l bookmark60 o Current Document 系統(tǒng)響應(yīng)時(shí)間3 HYPERLINK l bookmark64 o Current Document 出錯(cuò)信息和警告3 HYPERLINK l bookmark72 o Current Documen

3、t 一般交互原則3 HYPERLINK l bookmark87 o Current Document 信息顯示原則4 HYPERLINK l bookmark97 o Current Document 視覺(jué)設(shè)計(jì)4 HYPERLINK l bookmark106 o Current Document 設(shè)計(jì)說(shuō)明4引言編寫(xiě)目的本文檔是對(duì)系統(tǒng)界面設(shè)計(jì)風(fēng)格進(jìn)行描述，文檔范圍本文檔是對(duì)系統(tǒng)界面設(shè)計(jì)風(fēng)格進(jìn)行描述，讀者對(duì)象本文檔的閱讀對(duì)象是智能手機(jī)系統(tǒng)的設(shè)計(jì)人員、開(kāi)發(fā)人員、業(yè)務(wù)規(guī)范設(shè)計(jì)人員、軟件測(cè) 試人員。參考文獻(xiàn)序號(hào)文獻(xiàn)編號(hào)作者文獻(xiàn)名出版單位發(fā)表日期術(shù)語(yǔ)與縮寫(xiě)解釋縮寫(xiě)、術(shù)語(yǔ)解釋目標(biāo)人群追求時(shí)尚，重視娛樂(lè)功

4、能的年輕一族，和高科技從業(yè)人員。界面設(shè)計(jì)原則堅(jiān)持圖形用戶(hù)界面設(shè)計(jì)原則，界面直觀(guān)、對(duì)用戶(hù)透明：用戶(hù)接觸系統(tǒng)后對(duì)界面上對(duì)應(yīng)的功能一目了然。手機(jī)系統(tǒng)是用戶(hù)直接操作和應(yīng)用的主體，用戶(hù)界面是手機(jī)操作系統(tǒng)的人機(jī) 交互的窗口，界面設(shè)計(jì)基于手機(jī)的物理特性，根據(jù)手機(jī)所支持的色彩數(shù)量、圖像格式，做到 最大限度的發(fā)揮手機(jī)的物理特性。界面一致性為減少用戶(hù)的記憶負(fù)擔(dān)和界面的美觀(guān)，在界面中保持界面的一致性，一致性即包括標(biāo) 準(zhǔn)的控件，也指相同的信息表示方法，如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語(yǔ)、顯示錯(cuò)誤信息等 方面確保一致。1）界面樣式的相對(duì)統(tǒng)一，具體界面可結(jié)合具體操作的可用性和可實(shí)施性，對(duì)界面樣式 進(jìn)行合理的調(diào)整，使區(qū)域與區(qū)域

5、之間協(xié)調(diào)統(tǒng)一，主次得當(dāng)。確保用戶(hù)可以方便快捷地進(jìn)行功 能操作，減少記憶負(fù)擔(dān)。2）界面的色彩及風(fēng)格統(tǒng)一，包括圖標(biāo)、按鈕的風(fēng)格及在不同操作狀態(tài)下的視覺(jué)效果的 統(tǒng)一。3）菜單選擇、數(shù)據(jù)顯示以及其它功能使用一致的格式。4）界面的協(xié)調(diào)一致。如手機(jī)界面按鈕排放，肯定、否定擺放位置等。5）同樣功能用同樣的圖形。系統(tǒng)響應(yīng)時(shí)間系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，系統(tǒng)響應(yīng)時(shí)間過(guò)長(zhǎng)，用戶(hù)就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過(guò) 短有時(shí)會(huì)造成用戶(hù)加快操作節(jié)奏，從而導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則：響應(yīng)時(shí)間長(zhǎng)度界面設(shè)計(jì)0-3秒顯示處理動(dòng)畫(huà)3秒以上顯示處理窗口，或顯示進(jìn)度條一個(gè)長(zhǎng)時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息出錯(cuò)信息和警告有清楚

6、的出錯(cuò)信息和警告提示。誤操作后，系統(tǒng)提供有針對(duì)性的提示。對(duì)出錯(cuò)信息和警 告應(yīng)該遵循以下原則：1）信息以用戶(hù)可以理解的術(shù)語(yǔ)描述；2）信息應(yīng)指出錯(cuò)誤可能導(dǎo)致的不良后果，以便用戶(hù)做出判斷或改正；3）信息應(yīng)伴隨著視覺(jué)上的提示，如特殊的圖像、顏色或信息閃爍。4）信息不能帶有判斷色彩，即任何情況下不能指責(zé)用戶(hù)一般交互原則一般交互遵循以下原則：1）一致性：菜單選擇、數(shù)據(jù)顯示以及其它功能都應(yīng)使用一致的格式。2）對(duì)于使有耗時(shí)的操作都給出反饋3）確保具有明顯后果的操作要求用戶(hù)進(jìn)行明確的選擇*用戶(hù)需要完全明確他將要進(jìn) 行危險(xiǎn)性操作或破壞性操作。4）在數(shù)據(jù)錄入上允許取消大多數(shù)操作5）減少在動(dòng)作間必須記憶的信息數(shù)量6）

7、在對(duì)話(huà)中提高效率7）允許用戶(hù)非惡意錯(cuò)誤，系統(tǒng)應(yīng)保護(hù)自己不受致命作物的破壞8）方便退出。9）導(dǎo)航功能。隨時(shí)轉(zhuǎn)移功能，很容易從一個(gè)功能跳到另外一個(gè)功能。10）讓用戶(hù)知道自己當(dāng)前的位置，使其做出下一步行動(dòng)的決定。11）避免水平滾動(dòng)條 與垂直滾動(dòng)條不同，水平滾動(dòng)條并不受歡迎，因?yàn)樗鼤?huì)使項(xiàng)目閱 讀起來(lái)比較困難。信息顯示原則信息顯示遵循以下原則：1）只顯示與當(dāng)前用戶(hù)語(yǔ)境環(huán)境有關(guān)的信息；2）提供適當(dāng)?shù)哪J(rèn)值 提供提供適當(dāng)?shù)哪J(rèn)值來(lái)減少用戶(hù)不必要的操作，從而幫助用 戶(hù)完成工作。3）使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫(xiě)和可預(yù)測(cè)的顏色，顯示信息的含義應(yīng)該非常明確，用戶(hù) 不必再參考其它信息源；4）產(chǎn)生有意義的出錯(cuò)信息；5）使用

8、縮進(jìn)和文本來(lái)輔助理解；6）使用窗口分隔控件分隔不同類(lèi)型的信息；視覺(jué)設(shè)計(jì)1）允許用戶(hù)定制界面。用戶(hù)可以根據(jù)自己的需要來(lái)改變默認(rèn)的系統(tǒng)設(shè)置，選擇一種自 己滿(mǎn)意的個(gè)性化設(shè)置，達(dá)到軟件產(chǎn)品與用戶(hù)之間的協(xié)調(diào)性。2）實(shí)時(shí)幫助設(shè)施。通過(guò)實(shí)時(shí)幫助設(shè)施可以幫助用戶(hù)熟悉系統(tǒng)、縮短獲得幫助的時(shí)間， 增加界面的友好性。進(jìn)行系統(tǒng)交互時(shí)，提供部分幫助功能，即：提供主要操作的幫助。表示 幫助時(shí)采用提示文本，同時(shí)幫助提示文本不影響正常交互方式，觸筆移出相應(yīng)功能區(qū)即自動(dòng) 關(guān)閉幫助文本。3）提供視覺(jué)線(xiàn)索，用圖形符號(hào)幫助用戶(hù)記憶。如用圖標(biāo)表示、下拉菜單列表中的選擇4）使用真實(shí)世界的比喻。如：電話(huà)、地址簿的圖標(biāo)設(shè)計(jì)，尊重用戶(hù)以往的使

9、用經(jīng)驗(yàn)， 不要讓用戶(hù)去猜。5）界面色彩，使用鄰近色或同類(lèi)色進(jìn)行色彩構(gòu)成，采用色彩的弱對(duì)比，整體色調(diào)對(duì)比 不要太強(qiáng)，近似的顏色表示近似的意思。設(shè)計(jì)說(shuō)明做為一款功能實(shí)用型的手機(jī)，我們?cè)诮缑媾渖倪x擇上，以藍(lán)色做為主色調(diào)。藍(lán)色體現(xiàn) 著理性，帶有科技感和時(shí)尚感，給人一種清爽、現(xiàn)代的感覺(jué)，讓人一看就能體會(huì)到舒適與成 功。以深灰藍(lán)色作為基礎(chǔ)色，結(jié)合漸變效果，穩(wěn)重中不失變化。搭配以淺天藍(lán)色，亮麗清新， 形成反差的同時(shí)又做到了統(tǒng)一。輔以白色，與各類(lèi)冷暖色調(diào)和諧搭配，清晰顯示文字信息。 與基礎(chǔ)色相呼應(yīng)，這樣類(lèi)自然天空的色彩搭配，做到整個(gè)屏幕的完美與統(tǒng)一。簡(jiǎn)潔明快的設(shè) 計(jì)理念，體現(xiàn)一種科技時(shí)尚與自然的和諧之美，必然會(huì)受到時(shí)尚青年和高科技從業(yè)人員的喜 愛(ài)。另外提供一系列為女性設(shè)計(jì)的粉色主題，粉紅色基色和白色面板的搭配，從而突出青春 氣息、動(dòng)感活力，在追求可愛(ài)時(shí)尚中又不失穩(wěn)重，能更好的滿(mǎn)足女性用戶(hù)的需求。此外手機(jī) 用戶(hù)還能通過(guò)自定義主題來(lái)滿(mǎn)足對(duì)時(shí)尚的追求、彰顯個(gè)性。在設(shè)計(jì)風(fēng)格上，我們追求簡(jiǎn)約的風(fēng)格，以活潑圓潤(rùn)的