中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在產(chǎn)品設(shè)計、界面改版等日常業(yè)務(wù)中，設(shè)計師大多時候還是需要進(jìn)行一遍遍調(diào)整和細(xì)化，而這個過程也需要遵循一定的原則，不能任性更改。那么有哪些UI上的設(shè)計原則是我們可以參考和借鑒的？本文作者便結(jié)合實際案例，對一些設(shè)計原則的應(yīng)用進(jìn)行了解讀，一起來看。

近段時間講了不少AI方面的知識，不過我實際用AI繪畫做UI時，目前還只能用來做參考，很多細(xì)節(jié)還是得手動調(diào)整。今天跟大家分享的這個案例，就是通過16次改版優(yōu)化把它一點點變好的。通過對UI中這些細(xì)節(jié)的不斷打磨，終于讓它在視覺上變得更好了。

這16次優(yōu)化，實際上也是在做UI時所需要遵循的設(shè)計原則，記得收藏并用到自己的項目里，用上才算真正學(xué)到。

設(shè)計一個好的UI界面并不容易，因為有太多細(xì)節(jié)需要考慮，比如布局、間距、字體和顏色等，做出決策會讓人感到無從下手。當(dāng)你還需要考慮到可用性、可訪問性和心理學(xué)等因素時，設(shè)計就變得更加困難了。

幸運的是，UI設(shè)計并不會太難。作為一個產(chǎn)品設(shè)計師，我工作了將近20年，發(fā)現(xiàn)自己大部分的視覺和交互設(shè)計決策都是基于一套簡單的邏輯規(guī)則。跟別的設(shè)計師不一樣的是，我依賴的是規(guī)則而不是藝術(shù)感或者神秘的靈感。

有一個系統(tǒng)性的邏輯規(guī)則可以幫助你更高效地做出設(shè)計決策。如果沒有這個邏輯系統(tǒng)，只是憑感覺胡亂挪動元素，能不能把UI做好貌似就只能靠運氣。

我喜歡規(guī)則和邏輯，但做設(shè)計也絕不是非黑即白。不要把下面的建議看成必須遵守的嚴(yán)格規(guī)則，而是把它們當(dāng)作實用的指導(dǎo)方向，在大多數(shù)情況下都能很好地發(fā)揮作用。

下面就用一個案例來說明這些設(shè)計規(guī)則如何改進(jìn)UI設(shè)計。

下面這2張圖是一款租房應(yīng)用詳情頁面，左邊是優(yōu)化前的，右邊是通過一系列邏輯規(guī)則優(yōu)化后的效果。（彩云注：有指導(dǎo)原則對于做設(shè)計決策會好很多，避免自己的感覺不準(zhǔn)，讓設(shè)計質(zhì)量更加穩(wěn)定。）

即使你沒有太多交互或視覺設(shè)計經(jīng)驗，你可能也會覺得左邊的設(shè)計是雜論無章，復(fù)雜難用的。這些因為界面中有很多設(shè)計細(xì)節(jié)問題沒有處理好，讓界面的可用性大打折扣，你能看出來多少？

讓我們一起根據(jù)下面16條黃金原則優(yōu)化好這個界面吧：

1. 使用留白和分組來劃分元素
2. 保持一致性
3. 確保看起來相似的元素在功能上也是類似的
4. 設(shè)計清晰的視覺層次結(jié)構(gòu)
5. 刪減不必要的樣式
6. 使用有目的的顏色
7. 確保界面中的元素能保持3:1的對比度
8. 確保文本能有4.5:1的對比度
9. 不要只用顏色來表達(dá)信息
10. 使用一種無襯線字體
11. 使用具有較高小寫字母的字體
12. 盡量不要過多地使用大寫字母
13. 只使用正常和粗體這兩種字重
14. 避免使用純黑色的文本
15. 多使用左對齊
16. 使用至少1.5倍的行高來設(shè)置正文文本

一、使用留白和分組來劃分元素

把信息分成幾組相關(guān)元素可以幫助構(gòu)建一個有條理的界面，更易于組織和閱讀信息。這樣做可以讓人更快更容易地理解和記住界面的內(nèi)容。

你可以使用這些方法來對信息分組：

• 把相關(guān)元素放在一個容器里；
• 把相關(guān)元素彼此靠近；
• 讓相關(guān)元素在設(shè)計上相似；
• 將相關(guān)元素對齊在同一條直線上。

使用容器是將界面元素分組的最強視覺表現(xiàn)方式，但它可能會增加不必要的雜亂感。尋找使用其他分組方法的機會，它們通常更微妙，可以幫助簡化設(shè)計。

使用留白是一個非常有效的元素分組方式，你可以同時使用這些方法用以更好的將信息組織起來。

比如在下面的例子中，留白空間不夠讓信息顯得擠在一起難以閱讀，通過增加留白，能幫助更好的對信息進(jìn)行分組，讓整個排版顯得更舒服，更利于閱讀。

二、保持一致性

在UI設(shè)計中，一致性的意思是相似的元素，在外觀和行為上保持相似。這種一致性不僅在你自己設(shè)計的產(chǎn)品中保持，也應(yīng)該與其他已有的產(chǎn)品相類似，以保證用戶的心智統(tǒng)一。這樣可以提高可用性并減少錯誤，用戶不再需要重新學(xué)習(xí)如何使用。

在下面的例子中，圖標(biāo)的風(fēng)格是不統(tǒng)一的，一些圖標(biāo)是填充的一些是描邊的。這會讓用戶感到困惑，填充圖標(biāo)通常會讓用戶覺得是已經(jīng)選擇了。當(dāng)所有圖標(biāo)都用描邊的形式，統(tǒng)一描邊2pt的粗細(xì)和統(tǒng)一的圓角，并設(shè)計相似的視覺重量，那么就可以很好的提高一致性。

文本是用來提升圖標(biāo)的易讀性，以幫助用戶更好的理解它的意思。特別是當(dāng)一些用戶使用讀屏?xí)r（屏幕閱讀器是一種軟件，用于描述界面，并通過語音或盲文向看不到它的人進(jìn)行描述）。

三、確保看起來相似的元素功能也相似

如果元素看起來是類似的，用戶會覺得它們在功能上也是類似的。因此，嘗試確保對于具有相同功能的元素使用一致的視覺設(shè)計。相反，嘗試確保具有不同功能的元素看起來也是不同的。

在我們的例子中，圖標(biāo)區(qū)域的樣式與“Book now”按鈕的樣式非常類似。這使得它們看起來是可以點擊的，但實際上是不可以的。把底部的藍(lán)色背景區(qū)域去掉，避免用戶的誤解。

四、創(chuàng)建一個清晰的層次結(jié)構(gòu)

不是所有在界面上的信息都同等重要，為了讓信息更容易理解，要讓更重要的信息被設(shè)計的更突出一些。

一個清晰的層次關(guān)系，能幫助用戶更快的閱讀內(nèi)容，并能把焦點放到他感興趣的地方。同時，它還可以通過創(chuàng)造秩序來提高美學(xué)效果。你可以通過大小、顏色、對比、間距、位置和深度進(jìn)行優(yōu)化，打造一個清晰的視覺層級。

下面的例子是一個視覺層次不清晰的網(wǎng)站banner示例，在它下面是一個明確的層次結(jié)構(gòu)的案例。

一個非?？烨胰菀椎臋z查你的視覺設(shè)計層次是否清晰的方法是采用“瞇眼測試（ Squint Test）”。只需瞇起眼睛觀察你的設(shè)計，或者遠(yuǎn)離屏幕或使設(shè)計模糊。你仍應(yīng)該能夠看出哪些元素最重要，知道界面的用途。

用“瞇眼測試”看下面的例子，我們可以發(fā)現(xiàn)多個具有類似視覺強度的元素在爭搶用戶的注意力。同時，左下角的主要操作反而沒有凸顯出來。

主要按鈕在界面中通常是最突出的元素。通過給它一個與背景強對比的顏色，并把字體加粗可以實現(xiàn)這一點。這樣做也解決了可讀性的問題，后面會詳細(xì)研究。

再次用上“瞇眼測試”，主要按鈕這次成了頁面中最突出的元素了。

視覺層次現(xiàn)在終于清晰了，但依然還有提升的空間。例如，正文相對于它的層級來說，還是有點太突出了。

五、刪除不必要的樣式

不必要的信息和視覺樣式可能會分散注意力，增加認(rèn)知負(fù)荷。避免使用不必要的線條、顏色、背景和動畫，目的是創(chuàng)建一個更簡單、更專注的界面。

在我們的例子中，圖片周圍的留白和描邊是沒必要的，會增加視覺復(fù)雜度。這些樣式不需要來傳達(dá)信息或?qū)υ剡M(jìn)行分組，因此我們可以安全地將它們刪減以簡化設(shè)計。

六、有目的的使用顏色

有目的地、節(jié)制地使用顏色。盡量避免僅僅因為裝飾而使用顏色，因為這樣會讓人感到混亂和分散注意力。從黑白開始，只在需要傳達(dá)意義時才引入顏色。

一個簡單有效的方式是把品牌顏色應(yīng)用到文字鏈接和按鈕等可交互的元素上。它能幫助用戶理解哪些是可點擊的而哪些不可以。嘗試避免使用品牌顏色在不可交互的元素上。

你也不需要把品牌顏色應(yīng)用到所有可交互的元素上，一些元素其實本身就已經(jīng)給出了可交互的線索。例如，卡片設(shè)計本身給人的隱喻就是全部可點擊的，所以不需要在文字上單獨再加一個藍(lán)色的鏈接。

在我們的例子中，優(yōu)化前的藍(lán)色標(biāo)題可起來還挺好看的，但它讓文字看起來是可交互的。為了幫助避免這種困惑，我們需要把這種藍(lán)色樣式給移除掉。

我們同樣需要把其他不可交互的元素中的藍(lán)色樣式刪除掉，比如藍(lán)色的星星。這樣優(yōu)化后，界面上可點不可點的信息就能一目了然了。

七、確保界面上的元素能保持3:1的對比度

對比是衡量兩種顏色之間感知亮度差異的指標(biāo)。對比度的表達(dá)方式是一個比例，范圍從1:1到21:1不等。例如，在黑色背景上的黑色文本具有最低的1:1對比度比率，而在白色背景上的黑色文本具有最高的21:1比率。

有許多在線工具(https://usecontrast.com/)可以幫助你測量不同顏色之間的對比度比率。通過使用這些工具，你可以輕松地檢查是否符合無障礙標(biāo)準(zhǔn)，并確保所有用戶都可以輕松地使用你的產(chǎn)品。

為了確保視力受損的人能夠清晰地看到界面細(xì)節(jié)，應(yīng)該至少符合[Web內(nèi)容可訪問性指南（WCAG）]https://www.w3.org/TR/WCAG21/ 2.1 AA級別的顏色對比要求。

這意味著用戶界面元素，如表單字段和按鈕，需要至少具有3:1的對比度比率。這是為了確保用戶可以清楚地看到所有的界面元素，從而更容易地使用產(chǎn)品。WCAG還包括許多其他指南和要求，包括對語音識別和屏幕閱讀器的支持等，以確保你的產(chǎn)品具有最佳的無障礙性能。

在我們的例子中，箭頭圖標(biāo)與背景的對比度比率太低。給圖標(biāo)上加投影和在圖片頂部三分之一處加漸變疊加效果，無論圖標(biāo)所在的圖片如何變化，都可以使圖標(biāo)具有足夠的3:1對比度。

這樣可以確保視力受損的人也能夠清晰地看到圖標(biāo)，并能夠更好地使用你的產(chǎn)品。同時，這也是一種設(shè)計技巧，可以使圖標(biāo)在不同背景下都能夠顯得更加醒目和有吸引力。

主要按鈕的對比度在優(yōu)化前的頁面上同樣是對比度太低。在解決視覺層次那里已經(jīng)優(yōu)化了它，但這里也值得再提一下。

低對比度按鈕的風(fēng)險在于視力較差的人可能無法看到這個按鈕。將按鈕的對比度比率提高到3：1以上可以使按鈕易于訪問，同時也有助于糾正視覺層次結(jié)構(gòu)。

將箭頭和按鈕的對比度提高到大于3：1的比率會得到以下設(shè)計。我們離理想效果又近了一步，但我們?nèi)匀挥懈鄦栴}需要解決。

八、確保文本具有4.5：1的對比度比率

為了確保視力受損的人能夠清晰地閱讀文本，文本需要滿足以下WCAG 2.1級AA對比度要求。

• 小字（18px以下）需要最少達(dá)到4.5:1的比率；
• 大字（包括18px粗體或最小24px的正常體）需要最少達(dá)到3:1的比率。

在我們的例子中，小字在照片中的對比度是不夠的。我們把對比度提高到了4.5:1，增加不透明度成深色并增加文字的投影。

位置信息的對比度也是太低了。細(xì)的文字使得它很難閱讀。使用較深的灰色可以幫助文本更易于閱讀。我們很快會對文本進(jìn)行進(jìn)一步優(yōu)化。

九、不要只靠顏色

有許多不同類型的色盲，而且它們主要影響男性。通常，色盲者難以區(qū)分紅色和綠色，有些人甚至根本無法看到任何顏色。

為了確保色盲用戶在使用產(chǎn)品時的可用性，你不能僅依賴顏色作為交互引導(dǎo)，或區(qū)分不同視覺元素。你需要增加更多為UI元素視覺線索。

在我們的例子中，“reviews”文本使用了藍(lán)色表示一個鏈接。如果把顏色去除，鏈接文本就和其他普通文本沒任何區(qū)別了，所以給可點擊的鏈接文字增加一個下劃線是一個正確的做法，這樣就可以很好的做了區(qū)分。

十、使用統(tǒng)一的無襯線字體

字體是一組相關(guān)的具有相似風(fēng)格或美學(xué)特征的字形設(shè)計。Helvetica是一個字體的例子。而字形則是字體中的變體，如字重或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字體中的兩種不同字形。

比較穩(wěn)妥的方式是在一個界面中僅使用一種無襯線字體，因為它們通常是最易讀、最中性、最簡單的。

在我們的例子中，標(biāo)題字使用了細(xì)節(jié)豐富的襯線字體，這種字體可能有些難閱讀，并且可能會對某些人產(chǎn)生干擾。此外，它的風(fēng)格可能與應(yīng)用中的某些照片不匹配。使用簡單的無襯線字體可以提高可用性和美觀度。

十一、使用小寫字母更高的字體

在選擇字體時，要找那些小寫字母比較高，字母間距比較大的，因為這些字體在小字號時更容易閱讀。字體中小寫字母的高度叫做x高度。

在我們的例子中，Gill Sans字體的字母高度相對較矮，把它優(yōu)化為高度更大的字體，像Lato，可以有效地提升可讀性。

在將字體從Gill Sans更改為Lato后，我們的例子像下面這樣。

十六、限制使用大寫

一般來說，如果不是在向別人大喊大叫，就沒有太多使用大寫字母的正當(dāng)理由。因為大寫字母看起來太吵，也不易于閱讀。

因為當(dāng)你閱讀時，你并不是以單個字母去看的，而是會以單詞的字形來看的。

一般來說，我們在閱讀時更容易根據(jù)單詞的形狀來識別它，而不是一個字母一個字母地看。大寫字母的單詞形狀相同，閱讀起來比較費力，不利于快速識別整個單詞。

在我們的例子中，位置信息使用了全大寫。將其改為句子首字母大寫，只有第一個單詞和專有名詞（人名、地名或物品名稱）大寫，有助于提高可讀性。

十三、僅使用常規(guī)和粗體

雖然一個字體中可能有很多字重可供選擇，但并不意味著你需要在設(shè)計中全部使用。過多地使用不同的字重會讓界面顯得嘈雜不清。同時，使用太多不同的字重會讓設(shè)計難以保持一致性。因此，在設(shè)計中只使用常規(guī)和粗體的字重是更好的選擇。

保持界面中只使用常規(guī)和加粗字體，可以讓界面簡單明了。

一些快速使用的技巧：

• 使用粗體字體以強調(diào)標(biāo)題；
• 使用常規(guī)字重來呈現(xiàn)其他比較小的文本；
• 如果你決定使用非常細(xì)或非常粗的字重，最好將它們保留給標(biāo)題和更大的文本，因為它們在較小的尺寸下可能難以閱讀。

在我們的例子中，位置文本用了一個非常細(xì)的字重。即使我們把對比度優(yōu)化到4.5:1，但由于它太細(xì)，其實還是比較難閱讀。增加它的字重，改成常規(guī)字體，可以幫助提升可讀性，讓界面整體上也更簡單。

十四、避免使用純黑色文字

在UI設(shè)計中，比較安全的做法就是別使用純黑色，因為它在一個白色背景上對比度過高了。這種高對比度會導(dǎo)致閱讀文本時眼睛疲勞和不適。

黑色是0%的亮度，白色是100%的亮度，這2者巨大的亮度差異會導(dǎo)致顏色很不舒服。所以，最好避免在白色背景上使用純黑色，改用深灰色會比較好。

在我們的例子中，很多元素都使用了純黑色。將其改為深灰色可以提高可讀性。之前在檢查視覺層次時，會發(fā)現(xiàn)物業(yè)描述文本過于突出。為了確保界面元素按重要性呈現(xiàn)，改為較淺的灰色來減少物業(yè)描述文本的突出程度。

十五、左對齊文本

英語的閱讀方式是從左到右，由上至下呈F形閱讀的，所以最好將文本左對齊以實現(xiàn)最佳閱讀效果。對于長篇正文，最好避免居中對齊或兩端對齊的方式。這種對齊方式難以閱讀，尤其是對于那些認(rèn)知能力較弱的人來說更加困難。

在標(biāo)題和短文本上使用居中對齊會比較好，那樣會比較方便閱讀。但是，對于長文本來說，居中對齊就是災(zāi)難，因為每行的起點都不一樣。你的眼睛需要找每一行的起點，這會讓閱讀變得很困難。

在我們的例子中，描述文本是居中對齊的，改為左對齊后會發(fā)現(xiàn)可讀性好很多。

十六、對于內(nèi)容文本至少要有1.5倍行高

行高是指在垂直高度上的文字間距。每行文字之間的間距有助于防止人們重復(fù)閱讀同一行文字。這樣做也會讓閱讀更加舒適自然。

為了提高可訪問性和可讀性，特別是對于長篇正文，確保行高至少為1.5（150%）。將行高保持在1.5到2之間通常效果良好。

在我們的例子中，行高僅有1（100%），增加行高到1.6（160%）后，可讀性好了很多。

最終效果

我們遵循了幾個簡單但有效的 UI 設(shè)計準(zhǔn)則，很快就發(fā)現(xiàn)并優(yōu)化了例子設(shè)計中的許多問題。

（彩云注：最終優(yōu)化后的效果會比優(yōu)化前的好很多，那么請你再回頭想想，如果再讓你優(yōu)化一遍這個界面，關(guān)掉教程，你還能再優(yōu)化一遍嗎？然后再進(jìn)一步，把這些方法如何用到自己的實際項目中，作品集中，相信會更有幫助。）

希望你已經(jīng)開始意識到，UI設(shè)計并不是那么困難。雖然它看起來像一門神奇的藝術(shù)形式，但其中很大一部分都是由像我們剛學(xué)到的這些邏輯規(guī)則或指導(dǎo)原則所構(gòu)成的。使用客觀的邏輯，而不是主觀的意見，可以更快速、更輕松地設(shè)計出直觀、易用和美觀的界面。