UI設(shè)計(jì)的原則和注意事項(xiàng)
2021-11-23點(diǎn)擊量：328
UI設(shè)計(jì)是針對(duì)用戶的設(shè)計(jì)，一切活動(dòng)的目的都是完成用戶溝通。那么設(shè)計(jì)中就必須遵循一些原則，從而實(shí)現(xiàn)目標(biāo)。1.人性化：高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級(jí)和初級(jí)玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。2.簡(jiǎn)易性：界面的簡(jiǎn)潔，UI設(shè)計(jì)圖片是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯(cuò)誤選擇的可能性。保持簡(jiǎn)潔上乘的設(shè)計(jì)中，你看不到華而不實(shí)的UI修飾，或是用不到的設(shè)計(jì)元素。換而是，其必須的元素一定是簡(jiǎn)潔且有意義的。3.界面清晰重要：界面清晰是UI設(shè)計(jì)的第一步，要想讓用戶喜歡你設(shè)計(jì)的UI，首先必須讓用戶認(rèn)可它、知道怎么樣使用它。讓用戶在使用時(shí)預(yù)期會(huì)發(fā)生什么，并方便地與它交互。4、全力維護(hù)用戶的注意力：在閱讀的時(shí)候，總是會(huì)有事物分散我們的注意力。因此，在設(shè)計(jì)界面的時(shí)候，能夠吸引用戶的注意力很關(guān)鍵，千萬不要將界面的周圍設(shè)計(jì)得亂七八糟。5、讓界面處于用戶的掌控之中：人類往往對(duì)能夠掌控自己和周圍的環(huán)境感到舒服，不考慮用戶感受的設(shè)計(jì)往往會(huì)讓這種舒適感消失。確保界面處于用戶的掌控之中，讓用戶自己感受主動(dòng)權(quán)。6、界面過渡自然：界面的交互都是關(guān)聯(lián)的，所以要認(rèn)真地考慮到下一步的交互是怎樣的，并且通過設(shè)計(jì)將其實(shí)現(xiàn)。當(dāng)用戶已經(jīng)完成該做的步驟，不要讓他們不知所措，給他們自然而然繼續(xù)下去的方法，以達(dá)成目的。7、顏色不是決定性因素：物體的顏色會(huì)隨著光線的變化而變化，顏色是一個(gè)變化的性質(zhì)，不應(yīng)該在界面上起決定性作用。它可以用于提醒，但是不應(yīng)該是罕有的的區(qū)分元素。8、零狀態(tài)的界面：第一次訪問界面是重要的，但經(jīng)常被設(shè)計(jì)者忽視。為了幫助用戶適應(yīng)，應(yīng)該提供啟動(dòng)的方向和引導(dǎo)。UI設(shè)計(jì)中應(yīng)回避的一些細(xì)節(jié)：A、易用性原則：按鈕名稱應(yīng)該易懂，用詞要準(zhǔn)確，屏棄那些模楞兩可的字眼，要與同一界面上的其它按鈕易于區(qū)分，能望文知意比較好。理想的情況是用戶不用查閱說明書就能知道該界面的功能并進(jìn)行相關(guān)的正確操作。易用性原則的一些細(xì)些要求：（1）、相同或相近功能的按鈕用Frame框起來，以便于操作。（2）、常用按鈕要支持快捷方式和硬件操作，如按Tab鍵或者是其它鍵能夠?qū)崿F(xiàn)的切換功能。（3）、按功能將界面劃分局域塊，用Frame框括起來,并要有功能說明或標(biāo)題。B、規(guī)范性：（1）、常用命令要有快捷方式。（2）、菜單前的圖標(biāo)能直觀的代表要完成的操作。（3）、菜單深度一般要求多控制在三層以內(nèi)。（4）、工具欄要求可以根據(jù)用戶的要求自己定制一些內(nèi)容。C、合理性原則：（1）、父窗體或主窗體的中心位置應(yīng)該在對(duì)角線焦點(diǎn)附近。（2）、多個(gè)子窗體彈出時(shí)應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜。（3）、錯(cuò)誤使用容易引起界面退出或關(guān)閉的按鈕不應(yīng)該放在易點(diǎn)位置。（4）、與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該加以屏蔽。（5）、對(duì)可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)信息,給用戶放棄選擇的機(jī)會(huì)。（6）、對(duì)運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的地方要有提示，讓用戶明白錯(cuò)誤出處，避免形成無限期的等待。設(shè)計(jì)時(shí)候要注意的要點(diǎn)如下：1、每一個(gè)模塊的邊框，標(biāo)題，按鈕(如果有的話)，“更多”“詳細(xì)”功能，這些元素的顏色、大小尺寸、位置、對(duì)齊方式、字體、字號(hào)、行距等都要一致。2、整個(gè)頁面的基調(diào)顏色要一致，不同的模塊除非有很大意義的差別，顏色應(yīng)該一致。3、可以點(diǎn)擊的文字、按鈕、圖片，鼠標(biāo)應(yīng)該呈現(xiàn)出統(tǒng)一的可點(diǎn)擊樣式，區(qū)別于不可點(diǎn)擊區(qū)域。4、呈現(xiàn)的日期格式的統(tǒng)一，比如都用長日期格式“2007-2-1”或者都用短日期格式“07-3-1”，樣式不同的日期呈現(xiàn)方式還不如不呈現(xiàn)。5、可以點(diǎn)擊的圖片比較好用不同的樣式顯示，比如鼠標(biāo)滑過時(shí)候的輝亮效果。因?yàn)榫W(wǎng)頁會(huì)大量的使用圖片做修飾效果，區(qū)分可以點(diǎn)擊和不可以點(diǎn)擊的圖片是值得去做的。6、有沒有不必要的彈出窗口。(從netscape開始這個(gè)設(shè)計(jì)真的很糟糕，ie也完全繼承了，解決的辦法是用js方式來呈現(xiàn)彈出窗口。)7、文字描述。很多時(shí)候會(huì)忽略這個(gè)問題，在我們做demo的這個(gè)項(xiàng)目中有很多的文字描述，各有其用，統(tǒng)一描述的方式，統(tǒng)一人稱，統(tǒng)一語氣，都是給用戶帶來良好體驗(yàn)的途徑。8、圖片風(fēng)格。我不是這方面的專家，從欣賞的角度，圖片應(yīng)該是盡可能的統(tǒng)一風(fēng)格，素描樣式和點(diǎn)陣樣式共存總不是太好的事情。9、圖標(biāo)。很多時(shí)候會(huì)用圖標(biāo)來描述功能，漂亮的帶點(diǎn)陰影和倒影的圖標(biāo)是非常搶眼的，使用圖標(biāo)的話要注意風(fēng)格、透視角度、分辨率、辨識(shí)度的一致性。本文由培訓(xùn)無憂網(wǎng)長沙牛耳教育課程顧問老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無憂網(wǎng)UI設(shè)計(jì)培訓(xùn)或添加老師微信：15033336050...
人氣：5818五三教育廊坊市
人氣：29512咸陽海文考研咸陽市渭城區(qū)文林路1號(hào)咸陽師范學(xué)院大學(xué)生服務(wù)中心2樓東側(cè)
人氣：4624寶雞海文考研寶雞市渭濱區(qū)寶光路44號(hào)寶雞文理學(xué)院老區(qū)大門口東側(cè)20米
人氣：9536西安海文考研西安市雁塔區(qū)小寨嘉匯漢唐書城寫字間9樓海文考研(長安中路111號(hào))
人氣：28804深圳思學(xué)佳教育深圳市寶安區(qū)寶安中心創(chuàng)業(yè)一路宏發(fā)領(lǐng)域3樓（寶安中心地鐵站B出口30米）
人氣：7059溫州海文考研浙江省溫州市甌海區(qū)茶山街道中心東路茶山創(chuàng)榮廣場(chǎng)2棟
人氣：6661金華海文考研浙江省金華市婺城高村瓦云路77號(hào)（浙江師范大學(xué)北門右側(cè)20米）
人氣：6135寧波海文考研浙江省寧波市江北區(qū)孔浦街道風(fēng)華路928弄云創(chuàng)小鎮(zhèn)C4號(hào)樓
人氣：6366紹興海文考研浙江省紹興市越城區(qū)城南大道835號(hào)
人氣：6298嘉興海文考研培訓(xùn)浙江省嘉興市南湖區(qū)中環(huán)南路2608號(hào)福地廣場(chǎng)
