1、網(wǎng)站應(yīng)用界面設(shè)計(jì)規(guī)范，部門：R&D中心演講者：軟件界面規(guī)范的重要性和目的為什么用戶體驗(yàn)如此重要網(wǎng)站規(guī)范系統(tǒng)介紹了界面設(shè)計(jì)和開(kāi)發(fā)過(guò)程應(yīng)該遵循的基本原則。界面設(shè)計(jì)規(guī)范，軟件界面規(guī)范的重要性和目的，產(chǎn)品設(shè)計(jì)通過(guò)標(biāo)準(zhǔn)化的方式達(dá)到以用戶為中心的目的。這樣最終設(shè)計(jì)的界面風(fēng)格是一致的，開(kāi)發(fā)人員和編碼人員可以更容易地相互開(kāi)發(fā)，遵循統(tǒng)一的操作規(guī)范，以標(biāo)準(zhǔn)化的方式設(shè)計(jì)界面，提高工作效率。減少和改變職責(zé)任務(wù)不清、信息溝通不暢、重復(fù)修改、重復(fù)勞動(dòng)、效率低下的現(xiàn)象。軟件界面規(guī)范的重要性和目的為什么用戶體驗(yàn)如此重要網(wǎng)絡(luò)規(guī)范系統(tǒng)介紹了在界面設(shè)計(jì)和開(kāi)發(fā)過(guò)程中應(yīng)該遵循的基本原則界面設(shè)計(jì)規(guī)范，用戶體驗(yàn)用戶體驗(yàn)和軟件應(yīng)用的要素是什

2、么記住你的用戶，早上醒來(lái)發(fā)現(xiàn)鬧鐘沒(méi)有按原來(lái)設(shè)定的那樣響。燒開(kāi)水的時(shí)候，我穿上衣服，走之前我去喝水，卻發(fā)現(xiàn)水還沒(méi)有燒開(kāi)。當(dāng)我到達(dá)地鐵站時(shí)，我發(fā)現(xiàn)公交卡沒(méi)錢了。無(wú)奈之下，我只好排隊(duì)買票。經(jīng)過(guò)三趟地鐵，我終于到了公司，但是你遲到了。結(jié)果：雖然你很努力，但還是遲到了。那么，讓我們來(lái)看看這一系列不好的事情。是什么讓我們?nèi)绱藢擂危繛槭裁从脩趔w驗(yàn)如此重要？什么是用戶體驗(yàn)？用戶體驗(yàn)是以用戶為中心的設(shè)計(jì)中最重要的部分，強(qiáng)調(diào)過(guò)程，也就是說(shuō)，軟件對(duì)用戶行為的反應(yīng)應(yīng)該盡可能與用戶期望一致。1.過(guò)度使用各種奇怪和豐富多彩的控制。表達(dá)式2:接口元素不成比例。例如，按鈕太大了，甚至超過(guò)了顯示重要內(nèi)容的文本框的界面。表達(dá)式3

3、:界面元素很混亂。例如，按鈕和文本框是隨機(jī)放置的，對(duì)齊的控件沒(méi)有對(duì)齊。表現(xiàn)4:違反使用習(xí)慣。當(dāng)您按F1時(shí)，它不會(huì)彈出幫助，但它會(huì)做一些絕對(duì)意想不到的事情。表達(dá)5:消息框是模糊和混亂的。例如，軟件彈出一個(gè)消息框。將原來(lái)的“確定”和“取消”寫(xiě)成“是”和“否”，這樣用戶就不知道這意味著什么。性能6:還有一個(gè)糟糕的用戶界面，乍看起來(lái)非常強(qiáng)大，但實(shí)際上這完全是缺乏規(guī)劃的結(jié)果。該軟件本身確實(shí)提供了更復(fù)雜的功能，但它缺乏對(duì)哪些是常用功能，哪些是很少使用的高級(jí)功能的評(píng)估。所有的功能都擠進(jìn)了界面，如果用戶不占據(jù)空間，他們會(huì)感到厭煩，如果他們不好，他們會(huì)被嚇跑。為什么用戶體驗(yàn)如此重要？體驗(yàn)好的用戶界面，差的用戶界

4、面性能，差的用戶界面，為什么用戶體驗(yàn)如此重要？用戶體驗(yàn)元素、表示層、視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)、信息架構(gòu)、界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、功能描述、內(nèi)容需求、用戶需求、產(chǎn)品目標(biāo)、框架層、結(jié)構(gòu)層、范圍層、策略層、具體、抽象、表示層視覺(jué)設(shè)計(jì)，在這五層結(jié)構(gòu)的頂層，我們將注意力轉(zhuǎn)向用戶會(huì)注意到的系統(tǒng)?？蚣軐拥慕缑嬖O(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)開(kāi)始在概念結(jié)構(gòu)層形成大量需求，這些需求都來(lái)自我們的戰(zhàn)略目標(biāo)。在框架層次上，我們應(yīng)該進(jìn)一步細(xì)化這些結(jié)構(gòu)，確定詳細(xì)的界面外觀、導(dǎo)航和信息設(shè)計(jì)，使結(jié)構(gòu)更加逼真。結(jié)構(gòu)層交互設(shè)計(jì)與信息架構(gòu)。在收集用戶需求并對(duì)它們進(jìn)行優(yōu)先級(jí)排序后，我們對(duì)最終邊界將包含哪些特性有了一個(gè)清晰的了解。然而，這些要求并不能解

5、釋如何將這些分散的碎片整合成一個(gè)整體。這是范圍層的上層：為產(chǎn)品創(chuàng)建概念結(jié)構(gòu)。，范圍層功能規(guī)范和內(nèi)容描述，有了對(duì)“我們想要什么”和“我們的用戶想要什么”的清晰理解，我們就可以弄清楚如何實(shí)現(xiàn)所有這些戰(zhàn)略目標(biāo)。當(dāng)您將用戶需求和系統(tǒng)目標(biāo)轉(zhuǎn)化為系統(tǒng)應(yīng)該向用戶提供的內(nèi)容和功能時(shí)，策略就變成了范圍。戰(zhàn)略層面的產(chǎn)品目標(biāo)和用戶需求，成功的用戶體驗(yàn)，其基礎(chǔ)是明確表達(dá)的“戰(zhàn)略”。了解企業(yè)和用戶對(duì)產(chǎn)品的期望和目標(biāo)有助于建立用戶體驗(yàn)各方面的策略。面對(duì)大量的選擇，用戶只能找到方法來(lái)決定哪些軟件系統(tǒng)功能將滿足她的要求。企業(yè)開(kāi)始意識(shí)到提供高質(zhì)量的用戶體驗(yàn)是一項(xiàng)重要且可持續(xù)的競(jìng)爭(zhēng)優(yōu)勢(shì)。用戶體驗(yàn)形成了客戶對(duì)企業(yè)的總體印象，定義了

6、企業(yè)與競(jìng)爭(zhēng)對(duì)手之間的差異，并決定了客戶何時(shí)會(huì)再次訪問(wèn)。為什么用戶體驗(yàn)如此重要？用戶體驗(yàn)和軟件應(yīng)用，為什么用戶體驗(yàn)如此重要？記住你的用戶，以用戶為中心的設(shè)計(jì)在產(chǎn)品開(kāi)發(fā)的每一步，用戶都應(yīng)該被考慮在內(nèi)?？紤]用戶體驗(yàn)，把它分成幾個(gè)部分，從不同的角度去理解它。只有通過(guò)這些，你才能確保你控制了所有由決定引起的結(jié)果。用戶體驗(yàn)非常重要。最大的原因是它對(duì)你的用戶非常重要。協(xié)調(diào)、直觀甚至令人愉快的體驗(yàn)“一次”體驗(yàn)，一切都以正確的方式運(yùn)作。軟件接口規(guī)范的重要性及其目的為什么用戶體驗(yàn)如此重要？網(wǎng)絡(luò)規(guī)范系統(tǒng)介紹了界面設(shè)計(jì)和開(kāi)發(fā)過(guò)程應(yīng)該遵循的基本原則。界面設(shè)計(jì)規(guī)范、產(chǎn)品/項(xiàng)目協(xié)議、界面框架規(guī)范、基本界面元素規(guī)范、產(chǎn)品VI

7、 LOGO系統(tǒng)框架視覺(jué)風(fēng)格根據(jù)業(yè)務(wù)需求，商定交互模式和頁(yè)面流程。整體界面框架結(jié)構(gòu)界面模式靈活優(yōu)化多語(yǔ)言、多瀏覽器、換膚、構(gòu)件庫(kù)、可擴(kuò)展性等。接口組件及其組合基于應(yīng)用模板Web標(biāo)準(zhǔn)編碼、優(yōu)化的結(jié)構(gòu)、強(qiáng)大的代碼可重用性、Web規(guī)范系統(tǒng)介紹、軟件接口規(guī)范的重要性及其目的、用戶體驗(yàn)為何如此重要、接口設(shè)計(jì)和開(kāi)發(fā)過(guò)程應(yīng)遵循的基本原則介紹、接口設(shè)計(jì)規(guī)范、生命周期、軟件接口設(shè)計(jì)和實(shí)現(xiàn)過(guò)程、相關(guān)活動(dòng)、要求、 PM:需求計(jì)劃討論p-spec準(zhǔn)備Ui草圖，以根據(jù)P-spec提供對(duì)接口工作結(jié)果的審查和確認(rèn)，PM:根據(jù)P-spec rd3360審查和確認(rèn)接口工作結(jié)果，準(zhǔn)備pdd，設(shè)計(jì)，開(kāi)發(fā)和測(cè)試，PM:根據(jù)P-spec

8、修訂解釋要求RD3360進(jìn)行編碼，而PM:解釋要求QA:測(cè)試RD3360以糾正錯(cuò)誤，從PM輸入，1。 p-規(guī)格2。用戶界面草圖，經(jīng)項(xiàng)目經(jīng)理確認(rèn)，1。分析規(guī)劃文件2。低保真度模擬原型圖片，經(jīng)項(xiàng)目經(jīng)理確認(rèn)，主界面的高保真度圖形用戶界面設(shè)計(jì)，經(jīng)項(xiàng)目經(jīng)理確認(rèn)，模板頁(yè)面html css，每個(gè)原型頁(yè)面html css的html組件，界面設(shè)計(jì)和開(kāi)發(fā)過(guò)程，軟件界面規(guī)范的重要性及其目的，為什么用戶體驗(yàn)如此重要，網(wǎng)站規(guī)范系統(tǒng)介紹了界面設(shè)計(jì)和開(kāi)發(fā)過(guò)程應(yīng)遵循的基本原則，界面設(shè)計(jì)規(guī)范，應(yīng)遵循的基本原則，面向用戶的原則，易用性原則， 鼠標(biāo)和鍵盤一致性原則、系統(tǒng)響應(yīng)時(shí)間原則、錯(cuò)誤信息和警告原則、信息顯示原則、數(shù)據(jù)輸入原則、

9、合理性原則、美觀性和協(xié)調(diào)性原則、顯示信息一致性原則、是否控制使用、提示信息的措辭、顏色、窗口布局風(fēng)格，遵循統(tǒng)一標(biāo)準(zhǔn)，實(shí)現(xiàn)真正的一致性。 界面直觀，對(duì)用戶透明：用戶觸摸軟件后，可以在界面上一目了然地看到相應(yīng)的功能，無(wú)需太多培訓(xùn)就可以方便地使用應(yīng)用系統(tǒng)。這樣做的優(yōu)點(diǎn)是，用戶在使用時(shí)可以建立一個(gè)精確的心臟模型，在熟練使用一個(gè)系統(tǒng)界面后，切換到另一個(gè)系統(tǒng)界面可以很容易地推斷出各種功能。降低培訓(xùn)和支持成本，支持人員無(wú)需逐一指導(dǎo)。給用戶一種統(tǒng)一的感覺(jué)，不要感到困惑，感到快樂(lè)，并增加應(yīng)該遵循的基本原則是，用戶是所有系統(tǒng)處理的核心，不應(yīng)該有應(yīng)用程序來(lái)決定處理過(guò)程，所以用戶應(yīng)該控制用戶界面應(yīng)該如何工作以及如何響

10、應(yīng)，而不是開(kāi)發(fā)人員根據(jù)自己的意愿將操作過(guò)程強(qiáng)加給用戶。應(yīng)遵循基本原則，面向用戶的原則，用戶無(wú)需咨詢幫助就可以了解界面的功能并進(jìn)行相關(guān)的正確操作。應(yīng)遵循基本原則，用框架完成相同或相似功能的按鈕，常用按鈕支持快捷鍵。完成相同功能或任務(wù)的元素被放在一個(gè)集中的位置，減少了鼠標(biāo)移動(dòng)的距離。根據(jù)功能將接口劃分為本地塊，用框架將它們括起來(lái)，并有功能描述或標(biāo)題。界面應(yīng)支持鍵盤的自動(dòng)瀏覽按鈕功能，即按Tab鍵的自動(dòng)切換功能。應(yīng)該首先在界面上輸入的重要信息的控件應(yīng)該按照Tab鍵的順序放在前面，并且這個(gè)位置也應(yīng)該放在窗口的顯眼位置。最好不要在同一個(gè)界面上有超過(guò)10個(gè)控件。如果有10個(gè)以上的控件，可以考慮使用分頁(yè)界面

11、來(lái)顯示它們。易用性規(guī)則：易用性原則，應(yīng)遵循的基本原則，易用性規(guī)則：分頁(yè)界面應(yīng)支持頁(yè)面之間的快速切換，常用的快捷鍵組合Ctrl Tab默認(rèn)按鈕應(yīng)支持回車操作，即按回車后自動(dòng)執(zhí)行默認(rèn)按鈕的相應(yīng)操作?？蓪?xiě)控件應(yīng)該給出指令，并在檢測(cè)到非法輸入后自動(dòng)獲得焦點(diǎn)。復(fù)選框和選項(xiàng)框根據(jù)最高選擇概率排列。復(fù)選框和選項(xiàng)框應(yīng)該有默認(rèn)選項(xiàng)，并支持選項(xiàng)卡選擇。專業(yè)軟件應(yīng)該使用相關(guān)的專業(yè)術(shù)語(yǔ)，而通用接口提倡使用通用詞匯。盡量遵循無(wú)鼠標(biāo)的原則：應(yīng)用程序中的功能只能通過(guò)鍵盤來(lái)完成。但是，許多鼠標(biāo)操作，如雙擊和拖動(dòng)對(duì)象，不能簡(jiǎn)單地用鍵盤來(lái)模擬，可以適當(dāng)?shù)靥砑硬僮靼粹o。應(yīng)該遵循的基本原則，鼠標(biāo)和鍵盤之間的一致性原則，以及系統(tǒng)響應(yīng)時(shí)

12、間應(yīng)該適中。如果反應(yīng)時(shí)間過(guò)長(zhǎng)，用戶會(huì)感到不安和沮喪，而反應(yīng)時(shí)間過(guò)快也會(huì)影響用戶的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此，在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持以下原則：0-5秒鼠標(biāo)顯示變成沙漏；顯示處理窗口或顯示進(jìn)度條超過(guò)5秒鐘；當(dāng)長(zhǎng)期治療完成時(shí)，應(yīng)給出完成警告信息。應(yīng)遵循的基本原則、系統(tǒng)響應(yīng)時(shí)間原則、錯(cuò)誤信息和警告是指系統(tǒng)出現(xiàn)問(wèn)題時(shí)給出的壞消息。錯(cuò)誤信息和警告應(yīng)遵循以下原則：信息以用戶能夠理解的術(shù)語(yǔ)描述；信息簡(jiǎn)明扼要，指出錯(cuò)誤的原因，并提供解決方法的提示。應(yīng)遵循的基本原則、錯(cuò)誤信息和警告原則以及信息顯示遵循以下原則：僅顯示與當(dāng)前用戶上下文環(huán)境相關(guān)的信息；不要用數(shù)據(jù)包圍用戶，以方便用戶快速吸收信息的方式表達(dá)信息；使用一

13、致的標(biāo)記、標(biāo)準(zhǔn)縮寫(xiě)和顏色，顯示信息的含義應(yīng)該非常清楚，用戶不需要參考其他信息源；生成有意義的錯(cuò)誤信息；使用縮進(jìn)和文本幫助理解；用窗口分隔符控件分隔不同類型的信息；有效利用顯示器的顯示空間，但避免過(guò)度擁擠。應(yīng)該遵循的基本原則、信息顯示原則和數(shù)據(jù)輸入遵循以下原則：最小化用戶輸入動(dòng)作的數(shù)量；保持信息顯示和數(shù)據(jù)輸入的一致性；交互應(yīng)該靈活，支持鍵盤和鼠標(biāo)輸入的靈活性；使不適當(dāng)?shù)拿钤诋?dāng)前操作的上下文中無(wú)效；讓用戶控制交互流程，用戶可以跳過(guò)不必要的操作，改變所需操作的順序(如果允許)，并在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)；為所有輸入操作提供幫助；消除冗余輸入。如果可能的話，公關(guān)，應(yīng)遵循基本原則，數(shù)據(jù)輸入

14、原則，應(yīng)遵循基本原則，合理性原則，屏幕對(duì)角線相交的位置是用戶直接看的地方，正好在四分之一以上就容易吸引用戶的注意力，放置表單時(shí)注意這兩個(gè)位置的使用。應(yīng)遵循的基本原則、合理性原則、合理性細(xì)則、父窗體或主窗體的中心應(yīng)在對(duì)角線焦點(diǎn)附近。子窗體的位置應(yīng)該在主窗體的左上角或中間。當(dāng)多個(gè)子窗體彈出時(shí)，它們應(yīng)該依次移到右下角以顯示窗體的標(biāo)題。重要的命令按鈕和常用按鈕應(yīng)放在界面的顯眼位置。應(yīng)該屏蔽與正在進(jìn)行的操作無(wú)關(guān)的按鈕(它們是灰色的，不能使用)。必須為可能導(dǎo)致數(shù)據(jù)不可恢復(fù)的操作提供確認(rèn)信息，讓用戶有機(jī)會(huì)放棄他們的選擇。非法輸入或操作應(yīng)給出足夠的提示。在操作過(guò)程中，對(duì)因問(wèn)題而出現(xiàn)錯(cuò)誤的地方應(yīng)給予提示，以便用

15、戶了解錯(cuò)誤的來(lái)源，避免不確定的等待。提示、警告或錯(cuò)誤描述應(yīng)該清晰、清晰和適當(dāng)。應(yīng)遵循基本原則，美觀與協(xié)調(diào)的原則，界面尺寸應(yīng)適合美學(xué)觀點(diǎn)，感覺(jué)和諧舒適，能在有效范圍內(nèi)吸引用戶的注意力。長(zhǎng)寬接近黃金分割比例，應(yīng)避免長(zhǎng)寬比例失衡或?qū)挾瘸^(guò)長(zhǎng)度。布局要合理，不要太密也不要太空，空間要合理利用。按鈕在大小上基本相似，所以避免使用太長(zhǎng)的名稱，以免占據(jù)太多的界面位置。按鈕的大小應(yīng)該與界面的大小和空間相協(xié)調(diào)。避免在空界面上放置大按鈕。放置控件后，接口不應(yīng)有大的空白位置。字體大小應(yīng)該與界面大小比例相協(xié)調(diào)。常用的字體是宋調(diào)9-12，比較漂亮，比12號(hào)大的字體很少使用。應(yīng)遵循的基本原則，美與協(xié)調(diào)的原則，美與協(xié)調(diào)的細(xì)

16、則，前景與背景顏色的搭配應(yīng)合理協(xié)調(diào)，對(duì)比度不應(yīng)過(guò)大。常見(jiàn)顏色考慮使用窗口界面色調(diào)。如果使用其他顏色，主色應(yīng)該是柔和的，有親和力的，粗糙的顏色應(yīng)該堅(jiān)決消除。大型系統(tǒng)中常用的主色有“#”E1E 1“、“# efeef”、“#C0C0C0”等。界面風(fēng)格應(yīng)一致，文字的大小、顏色和字體應(yīng)一致，除非是需要藝術(shù)處理或有特殊要求的地方。如果表單支持最小化和最大化或放大，則表單上的控件也應(yīng)該隨表單縮放；永遠(yuǎn)不要放大表單，忽略控件的縮放。通常，當(dāng)父窗體支持縮放時(shí)，子窗體沒(méi)有必要縮放。最好給用戶提供一個(gè)自定義的界面樣式，用戶可以選擇自己的顏色和字體。軟件接口規(guī)范的重要性及其目的為什么用戶體驗(yàn)如此重要網(wǎng)絡(luò)規(guī)范系統(tǒng)介紹

17、了在接口設(shè)計(jì)和開(kāi)發(fā)過(guò)程中應(yīng)該遵循的基本原則。界面設(shè)計(jì)規(guī)范，所有界面參考字體為9pt。不考慮特殊字體(隸書(shū)、草書(shū)等)，在特殊情況下可以用圖片代替)，以保證每個(gè)用戶在使用時(shí)都能正常顯示。所有字體屬性的設(shè)置都應(yīng)該在CSS中完成。除了特殊的提示信息和增強(qiáng)的顯示外，所有控件都試圖使用統(tǒng)一大小的字體屬性。避免使用粗體和斜體：用粗體來(lái)吸引人們的注意力，用斜體來(lái)強(qiáng)調(diào)，但要少用。避免混合字體：最多包含兩種不同的字體。界面設(shè)計(jì)規(guī)范，功能名稱字體功能簡(jiǎn)述所有頁(yè)面必須使用統(tǒng)一的字體樣式規(guī)范要求，非標(biāo)準(zhǔn)示例：所有字體大小均為“pt”，對(duì)象和線條的大小均為“px”。界面設(shè)計(jì)規(guī)范，功能名稱維度單元功能簡(jiǎn)述每頁(yè)必須使用統(tǒng)一的維度單元規(guī)范要求，界面設(shè)計(jì)規(guī)范，并盡量選擇合適的主題顏色或系統(tǒng)顏色。不要混合顏色類型。也就是說(shuō)，主題顏色應(yīng)該總是與如果必須使用主題或系統(tǒng)顏色以外的顏色，最好從主題或系統(tǒng)顏色派生，而不是對(duì)顏色值進(jìn)行硬編碼。如果不是為了顯示逼真的圖形和