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

在這篇文章中，我將分享一些我認(rèn)為在日常工作中能幫到大家的方法，但這些方法也并非一成不變。我其實(shí)覺(jué)得，設(shè)計(jì)就是要跳出框框去思考，但先清楚規(guī)則才有可能打破規(guī)則。

1. 針對(duì)像素密度設(shè)計(jì)，而不是像素

在3dp或者4dp下的像素值

如果你不熟悉dp的概念，我也在這里先說(shuō)明一下：像素密度是每一英寸的像素值也叫ppi，單位dp是單詞“density-independent pixel”的縮寫(xiě)，有時(shí)也縮寫(xiě)為“dip”。

在設(shè)計(jì)界面時(shí)，建議不要針對(duì)像素而設(shè)計(jì)，而是針對(duì)設(shè)備的像素密度進(jìn)行設(shè)計(jì)，這樣能確保設(shè)計(jì)元素能在各個(gè)不同設(shè)備上很好的適配。

例如：如果我們?cè)O(shè)計(jì)一個(gè)按鈕元素，大小是200x50dp，那么它在160ppi的屏幕上顯示為200x50dp，在320ppi的屏幕上顯示為400x100px，即原始資源的2倍。

在某些屏幕每英寸的像素要比其他屏幕多，但設(shè)計(jì)資源卻不會(huì)在像素密度高的屏幕上顯得更小，這是因?yàn)樵谶@些屏幕上會(huì)以原始尺寸的2倍，3倍，4倍進(jìn)行渲染。這樣的機(jī)制可以確保所有設(shè)計(jì)資源可以在不同密度和設(shè)備之間保持同樣大小。

例如：iPhone XS Max的屏幕尺寸是414×896，但這不是像素尺寸而是點(diǎn)的數(shù)量，以像素為單位時(shí)是1242x2688px?？紤]到這一點(diǎn)，在設(shè)計(jì)iPhone XS Max時(shí)，我會(huì)將在414×896點(diǎn)下設(shè)計(jì)，然后交付@3x的設(shè)計(jì)資源。

2. 善用8dp增量

為什么設(shè)計(jì)中要用8dp這個(gè)增量規(guī)則？這里有一個(gè)簡(jiǎn)單的解釋：我們使用8而不是5這個(gè)神奇數(shù)字的原因是，如果設(shè)備有1.5倍的分辨率，就很難被整除而出現(xiàn)鋸齒。

此外，絕大多數(shù)的屏幕尺寸都可以被8整除，這就是使得我們的設(shè)計(jì)在這些屏幕上適配變得很簡(jiǎn)單。

通過(guò)在8點(diǎn)網(wǎng)格上以8為增量進(jìn)行設(shè)計(jì)，也讓設(shè)計(jì)變得更加統(tǒng)一。設(shè)計(jì)師不需要更多的猜測(cè)，就能快速做出決策，做到完美適配。

想要更全面地了解這個(gè)規(guī)則，可以去看看Bryn Jackson的8點(diǎn)網(wǎng)格文章（文章鏈接在 https://spec.fm/specifics/8-pt-grid）。

3. 去掉線和邊框

在做設(shè)計(jì)的時(shí)候，應(yīng)該時(shí)不時(shí)的停下來(lái)看看，確定下設(shè)計(jì)出的容器是否會(huì)使得UI變得混亂。通常，用于分隔內(nèi)容的框和線可以用留白代替。

我們以前做設(shè)計(jì)的時(shí)候，喜歡將元素套在盒子里。所以，只需要把這些盒子去掉就能使頁(yè)面看起來(lái)不那么密集，并給元素更多的呼吸空間，整個(gè)界面就能提升一個(gè)檔次。

4. 關(guān)注對(duì)比度

合適的對(duì)比度不僅可以讓用戶看到頁(yè)面上的相關(guān)信息，還可以提高產(chǎn)品的易用性。

設(shè)計(jì)一款產(chǎn)品就類似于建造一個(gè)公共建筑，比如圖書(shū)館或?qū)W校，它需要包容所有人：盲人，色盲或視力受損的用戶。

網(wǎng)頁(yè)可用性標(biāo)準(zhǔn) (WCAG) （https://webaim.org/articles/contrast/ ）規(guī)定對(duì)比度至少要達(dá)到4.5：1。

為了確保你做的設(shè)計(jì)符合標(biāo)準(zhǔn)，建議下載一個(gè)叫“stark （ https://getstark.co/）”的插件，來(lái)檢查設(shè)計(jì)是否OK。

5. 遵循用戶習(xí)慣

某些元素被認(rèn)為是標(biāo)準(zhǔn)的原因有很多。

例如：如果將按鈕設(shè)計(jì)為圓形，那么當(dāng)文本需要為“Start Free Trial”時(shí)，按鈕就會(huì)占用不必要的垂直空間。

除此之外，用戶已經(jīng)開(kāi)始期待類似的產(chǎn)品體驗(yàn)。如果你設(shè)計(jì)出來(lái)的網(wǎng)站，App，軟件功能和用戶所習(xí)慣的不太一樣，那么它就是不直觀的，用戶就可能對(duì)這種體驗(yàn)感到失望。

因此，最好是在現(xiàn)有的設(shè)計(jì)規(guī)范的范圍內(nèi)進(jìn)行創(chuàng)新，而不是去重新發(fā)明輪子。

6. 用顏色深淺構(gòu)建層次結(jié)構(gòu)

每種顏色都有一個(gè)視覺(jué)權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)。通過(guò)使用顏色的深淺，為元素賦予不同的重要性。

這里的經(jīng)驗(yàn)就是，如果一個(gè)元素比另一個(gè)元素更重要，那么它就應(yīng)該具有更高的視覺(jué)權(quán)重。這能讓用戶很容易區(qū)分重要和不重要的信息，從而快速瀏覽頁(yè)面。

更大，更醒目的信息會(huì)首先吸引用戶的眼球，然后才會(huì)看向它下面的次要信息。

7. 避免使用超過(guò)兩種字體

一個(gè)普遍接受的設(shè)計(jì)共識(shí)就是在同一張界面中使用的字體數(shù)量應(yīng)該要有限制。一般來(lái)說(shuō)，兩種不同的字體就足夠了。這不是說(shuō)不能用更多的字體了，而是最好要有合理的理由，否則最好不使用。

解決這個(gè)問(wèn)題的方法是使用字體族。

使用字體族，我們可以在設(shè)計(jì)中使用具有不同變體的相同字體，來(lái)自同一家族的字體被設(shè)計(jì)成可以一起使用，是靈活且一致的。

在選擇字體時(shí)，優(yōu)先選擇具有各種權(quán)重的字體，如細(xì)體，標(biāo)準(zhǔn)體，中粗體，加粗體，超粗體，寬體，擴(kuò)展體和斜體。這將給你更多的發(fā)揮空間，而不需要添加額外的字體。

8. 直接而不是讓用戶思考

直接是產(chǎn)品設(shè)計(jì)的一個(gè)很好策略，因?yàn)?，為什么要讓用戶思考?/p>

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

在付款頁(yè)面上（如果設(shè)計(jì)得好的話），我不需要記住我買(mǎi)的是什么東西，也能夠清楚地識(shí)別出我要買(mǎi)的東西，而不需要喚起我的記憶。

搜索歷史

在我的Gmail收件箱里，我只需要掃一眼，就能確定哪些郵件我讀過(guò)，哪些沒(méi)有讀過(guò)，而無(wú)需多想。或者，如果我登錄到Amazon，我可以快速地從我之前瀏覽過(guò)的地方繼續(xù)看，因?yàn)樗芨嬖V我最近查看的條目。

“通過(guò)使對(duì)象，操作和選項(xiàng)可見(jiàn)來(lái)最小化用戶的閱讀壓力。用戶不必記住從對(duì)話的一個(gè)部分到另一個(gè)部分的信息。在適當(dāng)?shù)臅r(shí)候，系統(tǒng)使用說(shuō)明應(yīng)該是可見(jiàn)的或者易于搜索的?！薄釥柹Z曼

9. 別讓用戶慢下來(lái)

對(duì)于用戶來(lái)說(shuō)，速度和效率是唯一重要的事情。用戶來(lái)用某個(gè)應(yīng)用，目的就是為了解決他的問(wèn)題。

“我想要更快一點(diǎn)?！?/p>

— Ricky Bobby

如果做了很多豐富的功能，那很好，但不要讓你的創(chuàng)造力妨礙我作為用戶的目標(biāo)。

一個(gè)關(guān)于動(dòng)畫(huà)和微交互的經(jīng)驗(yàn)法則是，如果體驗(yàn)增加了不必要的時(shí)間，那么它并不能真正改善體驗(yàn)。

有目的使用動(dòng)畫(huà)可以改善體驗(yàn)，但添加不必要的干擾和移動(dòng)元素卻不會(huì)。

我經(jīng)常在Dribbble上看到著陸頁(yè)設(shè)計(jì)，當(dāng)用戶在頁(yè)面上滾動(dòng)時(shí)，頁(yè)面就會(huì)動(dòng)起來(lái)。它往往過(guò)于活躍，所有的東西都在動(dòng)，反而內(nèi)容本身被忽略了。作為一個(gè)用戶，當(dāng)界面中發(fā)生了這么多事情時(shí)，很難讓其應(yīng)該注意什么，這簡(jiǎn)直是在浪費(fèi)用戶寶貴的時(shí)間。

Sorry to call you out Dribbble user

大量研究發(fā)現(xiàn)，界面動(dòng)畫(huà)的最佳速度在200到500毫秒之間。這些數(shù)字是基于人類大腦的特殊品質(zhì)。任何小于100毫秒的動(dòng)畫(huà)都是即時(shí)的，根本不會(huì)被識(shí)別。而超過(guò)1秒的動(dòng)畫(huà)會(huì)給人一種延遲的感覺(jué)，會(huì)讓用戶覺(jué)得無(wú)聊?！?/p>

——The ultimate guide to proper use of animation in UX

所以，如果你在使用動(dòng)畫(huà)，一定要有目的。如果這些動(dòng)畫(huà)是有目的的，那么不要讓我等待超過(guò)500毫秒。在2019年，惹惱你的用戶只需要一毫秒。

10. 少即是多

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

一個(gè)完美的案例就是著名的谷歌主頁(yè)，而不是像Yahoo一樣淹沒(méi)訪問(wèn)者可能并不需要的信息里，設(shè)計(jì)仍然集中在核心任務(wù)上：搜索。

對(duì)不住了Yahoo，我不得不這么做了

我最喜歡的設(shè)計(jì)格言之一是：“完美，不是因?yàn)闆](méi)有什么可以增加，而是沒(méi)有什么可以減少。”

——Antoine de Saint-Exupery

作者：Danny Sapio

原文：https://uxdesign.cc/10-rules-of-thumb-in-ui-design-aa5f91885444

譯者：彩云sky，公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議