分享UI設(shè)計(jì)準(zhǔn)則

作為產(chǎn)品經(jīng)理，了解一定的UI設(shè)計(jì)準(zhǔn)則是十分必要的。
接下來(lái)成都網(wǎng)站建設(shè)科技小編為您選取一些我個(gè)人認(rèn)為十分有用的規(guī)則進(jìn)行講述。
保持一致的原則
定義闡述
讓我們?cè)陧?yè)面同個(gè)結(jié)構(gòu)擺放相同的信息和控件，可以減少用戶的思考時(shí)間，從而利用慣性選擇自己需要的相關(guān)的控件，大大減少操作成本。不同頁(yè)面上提供的相同功能的控件和數(shù)據(jù)顯示應(yīng)該擺放在每一頁(yè)的相同位置，而且應(yīng)該有相同的顏色，字體跟陰影等。這樣子的一致性能讓用戶很快地找到跟識(shí)別他們，減少誤區(qū)。
實(shí)例闡述
例如在一個(gè)網(wǎng)站中，如果其中一個(gè)網(wǎng)頁(yè)的提交按鈕跟其他網(wǎng)頁(yè)的提交的按鈕做得不一樣的話，將會(huì)大大增加用戶去尋找該按鈕的操作成本以及相對(duì)應(yīng)的思考的時(shí)間。
習(xí)慣性原則
人們?cè)趯?duì)于一個(gè)判斷，剛開(kāi)始會(huì)有相對(duì)應(yīng)的抵觸心理，即對(duì)問(wèn)題的題眼會(huì)相對(duì)應(yīng)來(lái)說(shuō)比較敏感，但是越是到了后期人們?cè)饺菀追潘删?，?duì)題目的類型也將不會(huì)那么的敏感。
因此，如果一直點(diǎn)擊某個(gè)位置的具體按鈕，到后期這種對(duì)該按鈕的敏感程度會(huì)逐漸降低。我們可以利用這個(gè)特性將重要的東西放到流程的后面進(jìn)行展示。
比如說(shuō)我們?cè)谙螺d某款產(chǎn)品的時(shí)候，等到下載完成之后，彈出框會(huì)默認(rèn)勾選一些用戶會(huì)有抵觸的東西，如果下載的是瀏覽器該類的產(chǎn)品，則會(huì)彈出默認(rèn)勾選該網(wǎng)頁(yè)為默認(rèn)瀏覽器，或者像用戶注冊(cè)流程的注冊(cè)條款，也是默認(rèn)把一些讓用戶不舒服的元素放在最后的步驟進(jìn)行勾選。
接近性原理
定義闡述
物體之間的相對(duì)距離會(huì)影響我們感知他們是否以及如何組織在一起。互相靠近(相對(duì)于其他物體)的物體他們看起來(lái)像是一組，而那些距離較遠(yuǎn)的就不是。設(shè)計(jì)者們就是利用這一種原理使用分組框或者屏幕上的控件和數(shù)據(jù)顯示分隔開(kāi)來(lái)。從而使得整個(gè)畫(huà)面看起來(lái)會(huì)比較清楚和有條理性。
深淺度原理
兩個(gè)顏色越淺，越不飽和，就越難把他們區(qū)分開(kāi)。比如說(shuō)白色跟米黃色，蒂芙尼藍(lán)跟淺藍(lán)色或者淺綠色，由于這些顏色過(guò)于接近以及飽和度都不高，如果將這些顏色運(yùn)用在選中狀態(tài)和未選中狀態(tài)，當(dāng)前步驟和非當(dāng)前步驟的狀態(tài)，那么用戶就在視覺(jué)上面沒(méi)辦法進(jìn)行一個(gè)明顯的判斷，無(wú)法分清哪個(gè)是在當(dāng)前下進(jìn)行，哪個(gè)不是在當(dāng)下進(jìn)行。
因此，如果跟你共事的UI是半路出家，或者對(duì)自己的專業(yè)沒(méi)有研究很透徹的話，使用這種難以識(shí)別的顏色做流程的話，你作為PM大可硬氣的跟他說(shuō)：根據(jù)色塊深淺度原理，你這樣子做是特別不合理的。
難以辨認(rèn)的書(shū)寫(xiě)和字型
對(duì)比研究表明，有閱讀技巧的人在讀大寫(xiě)文字速度的內(nèi)容比閱讀小寫(xiě)文字內(nèi)容的速度慢10%-15%。當(dāng)前研究表明說(shuō)明，這主要是缺乏閱讀大寫(xiě)字型的訓(xùn)練造成的?？招妮喞€的字型讓特征識(shí)別更加困難。
封閉性原理
我們視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而非分散的碎片。因此，我們將分散的弧形感知為一個(gè)圓：描述一疊對(duì)象構(gòu)成的整體又或者是抽象物體的兩種表現(xiàn)形式。
主體/背景
當(dāng)一個(gè)小的物體與更大的色塊重疊的時(shí)候，我們傾向于認(rèn)為小的物體是主體而大的物體是背景。當(dāng)物體重疊時(shí)，我么我們把小的那個(gè)當(dāng)作是背景之上的主體如彈出toast的時(shí)候，用戶注意力焦點(diǎn)的內(nèi)容臨時(shí)成為新信息的背景，新的信息短暫地作為新的主體。
菲茨定律在設(shè)計(jì)中的應(yīng)用：
目標(biāo)(圖形化按鈕，菜單和鏈接)要足夠大，容易讓人么點(diǎn)到，不要讓實(shí)際可點(diǎn)擊的對(duì)象至少跟看起來(lái)的一樣大，不要展示大的按鈕但只有很小的點(diǎn)擊區(qū)域接受點(diǎn)擊，這邊的例子如在勾選框單選框和切換開(kāi)關(guān)等控件的文字標(biāo)簽中，我們應(yīng)該讓他們像控件本身一樣是可接受點(diǎn)擊，從而擴(kuò)大點(diǎn)擊區(qū)域，使得用戶的體驗(yàn)更好。
將重要的目標(biāo)放置在靠近屏幕邊緣的位置，這樣非常方便人們點(diǎn)擊。如我們的刪除ICON。
引導(dǎo)定律
沿著受限路徑移動(dòng)指針。指針在一直受限的路徑移動(dòng)并移動(dòng)到達(dá)目標(biāo)，那么路徑越寬，你覺(jué)越能越快地將指針移動(dòng)到目標(biāo)。路徑寬意味著不必小心地移動(dòng)指針，就能以迅雷不及掩耳地快速移動(dòng)目標(biāo)。

網(wǎng)站題目：分享UI設(shè)計(jì)準(zhǔn)則
文章分享：http://bm7419.com/article8/sessip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作、域名注冊(cè)、面包屑導(dǎo)航、微信小程序、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)