當(dāng)前位置：首頁(yè) >問答首頁(yè) >UI設(shè)計(jì)

ui設(shè)計(jì)的基本原則

2023-06-01 20:53:01

移動(dòng)UI設(shè)計(jì)進(jìn)階班游戲UI設(shè)計(jì)師班軟裝方案設(shè)計(jì)班平面設(shè)計(jì)速成班 CG設(shè)計(jì)速成班室內(nèi)設(shè)計(jì)研修班

精選回答

來自

超級(jí)不萬寶路的回答 2023-11-29 17:58:55

UI設(shè)計(jì)的基本原則有：1、設(shè)計(jì)密度，而不是像素；2、使用8的倍數(shù)；3、去掉線框；4、注意對(duì)比；5、使用標(biāo)準(zhǔn)元素；6、使用顏色建立層次結(jié)構(gòu)；7、避免使用2種以上的字體；8、認(rèn)可而不是回憶；9、速度要快；10、少即是多。

1、設(shè)計(jì)密度，而不是像素

密度是屏幕或PPI每一英寸的像素?cái)?shù)量。“dp”單位是“density-independent pixel”的縮寫，有時(shí)也縮寫為“dip”。

在設(shè)計(jì)UI時(shí)，不要根據(jù)像素尺寸來設(shè)計(jì)，而應(yīng)根據(jù)設(shè)備的像素密度設(shè)計(jì)。這樣可以確保UI元素正確縮放以適配不同的設(shè)備尺寸。

2、使用8的倍數(shù)

我們使用8而不是5的原因是，如果設(shè)備的分辨率為1.5倍，則無法正確呈現(xiàn)奇數(shù)。此外，絕大多數(shù)設(shè)備屏幕尺寸都可以被8整除，從而可以輕松地在這些設(shè)備上適當(dāng)?shù)卣{(diào)整UI設(shè)計(jì)。

通過在網(wǎng)格上以8的倍數(shù)進(jìn)行UI設(shè)計(jì)，可以保持設(shè)計(jì)的一致性。所有內(nèi)容都與我們定義的間距約定完全一致。

3、去掉線框

通常，用于分隔內(nèi)容的線框可以用空白代替。我們?cè)O(shè)計(jì)的大多數(shù)UI元素都包含在線框中，因此，只需刪除那些容器，它可以使頁(yè)面看起來不那么密集，并提供更多的呼吸空間。

4、注意對(duì)比

使用對(duì)比不僅可以吸引用戶的注意力，而且可以提高產(chǎn)品的可訪問性。設(shè)計(jì)產(chǎn)品類似于在圖書館或?qū)W校之類的公共建筑中建造建筑-它必須包含所有人。其中包括盲人，色盲和視力障礙的用戶。

Web內(nèi)容可訪問性指南（WCAG）[2]規(guī)定至少需要4.5：1的對(duì)比度。

5、使用標(biāo)準(zhǔn)元素

將某些元素視為標(biāo)準(zhǔn)的原因有很多。如果將按鈕設(shè)計(jì)為圓形，則當(dāng)文本較長(zhǎng)時(shí)，將占用不必要的垂直空間。

除此之外，用戶已經(jīng)熟悉在整個(gè)網(wǎng)絡(luò)上獲得類似的體驗(yàn)。如果你的網(wǎng)站，應(yīng)用程序或軟件的功能與用戶習(xí)慣不同，那么它就不會(huì)很直觀，用戶可能會(huì)感到沮喪。

因此，最好僅在當(dāng)前設(shè)計(jì)規(guī)范的范圍內(nèi)進(jìn)行創(chuàng)新。不要重新造輪子。

6、使用顏色建立層次結(jié)構(gòu)

每種顏色都有視覺上的分量，可以在內(nèi)容之間建立層次結(jié)構(gòu)。通過使用不同深淺的顏色，我們可以為元素分配不同的重要性級(jí)別。

如果一個(gè)元素比另一個(gè)元素更重要，則它應(yīng)具有更高的視覺重量。這使用戶易于快速瀏覽頁(yè)面并區(qū)分重要和次要信息。

更大，更粗體的信息是首先吸引用戶眼球的內(nèi)容，然后他們將繼續(xù)瀏覽下方的支持信息。

7、避免使用2種以上的字體

通常，兩種不同的字體就足夠了。這并不意味著不能使用更多，但是除非有充分的理由，否則通常最好不要使用。

解決此問題的方法是使用字體系列。

通過使用字體系列，我們可以在設(shè)計(jì)中使用具有不同變體的相同字體。同一家族的字體共同工作，因此它們既靈活又一致。

選擇字體時(shí)，請(qǐng)找到具有不同權(quán)重的字體，例如細(xì)，常規(guī)，中等，粗體，超粗體以及壓縮，擴(kuò)展和斜體等樣式。這將提供更多空間來探索不同的樣式，而無需添加其他字體。

8、認(rèn)可而不是回憶

為什么要讓用戶思考？

結(jié)帳頁(yè)面，電子郵件收件箱，搜索歷史記錄，后退按鈕等都是很好的例子。

在結(jié)帳頁(yè)面（如果設(shè)計(jì)得當(dāng)）上，我不必記住要付款的商品。我顯然應(yīng)該能夠識(shí)別出我要購(gòu)買的商品，而不必記憶。

在Gmail收件箱中，我可以一目了然地確定已閱讀郵件和沒有閱讀的郵件?；蛘?，如果登錄到Amazon，我可以快速?gòu)纳洗瓮Ｏ聛淼牡胤嚼^續(xù)，因?yàn)樗鼤?huì)告訴我最近查看的商品。

9、速度要快

作為用戶，速度和效率是唯一重要的事情。

對(duì)于動(dòng)畫和微交互的一條經(jīng)驗(yàn)法則是，如果體驗(yàn)增加了不必要的等待時(shí)間，那么它就不是在改善體驗(yàn)。

有目的性地使用動(dòng)畫可以改善體驗(yàn)，但是不要增加干擾和等待。

許多研究發(fā)現(xiàn)，UI動(dòng)畫的最佳速度在200-500毫秒之間。這些數(shù)字基于人腦的特質(zhì)。任何短于100毫秒的動(dòng)畫都是瞬時(shí)的，根本不會(huì)被識(shí)別。而動(dòng)畫時(shí)間超過1秒將產(chǎn)生一種延遲感，從而使用戶感到無聊。

10、少即是多

每次我們向頁(yè)面添加其他信息：按鈕，文本，圖像，動(dòng)畫，插圖等，它就會(huì)與相關(guān)信息競(jìng)爭(zhēng)。如果頁(yè)面上的內(nèi)容過多，則元素的重要性會(huì)降低。

硬件型號(hào)： Apple Macbook Pro 13.3

系統(tǒng)版本：MacOS Big Sur11.0.1

軟件版本：Sketch Mac版 V70.3