element ui 步驟

重點(diǎn) (Top highlight)

What to do when you know how to use the software and know the basics of designing interfaces? There are a few simple things that you can do to take your skills to the next level, and you don’t need to invest in expensive online courses and tutorials.

當(dāng)您知道如何使用軟件并了解界面設(shè)計(jì)基礎(chǔ)時(shí)該怎么辦？ 您可以做一些簡(jiǎn)單的事情，將自己的技能提高到一個(gè)新的水平，并且無(wú)需投資昂貴的在線課程和教程。

Here’s what to try and learn!

這是嘗試和學(xué)習(xí)的方法！

1.學(xué)會(huì)在界面中使用人類感知法則 (1. Learn to use human perception laws in your interfaces)

Is your design following the rules of human perception? It is good to know them quite well, because without this knowledge you can’t really explain the reasoning behind your visual choices. There’s a handful of them, but for know focus on the most crucial ones:

您的設(shè)計(jì)是否遵循人類感知的規(guī)則？ 很好地了解它們是一件好事，因?yàn)闆](méi)有這些知識(shí)，您將無(wú)法真正解釋視覺(jué)選擇背后的原因。 其中有少數(shù)幾個(gè)，但要知道要專注于最關(guān)鍵的幾個(gè):

鄰近法則 (Law of Proximity)

If we have multiple elements present, the ones that are close to each other are perceived as a group (even, if they look different).

如果存在多個(gè)元素，則彼此接近的元素將被視為一個(gè)組(即使它們看起來(lái)不同)。

That’s why it is so important to keep the right distance and margins between the elements and sections. Don’t be afraid of too much whitespace (better too much, than too little) — make sure that whitespace is around 50% of your design. It makes the UI look clean and tidy and it helps to keep the right hierarchy of the elements.

這就是為什么在元素和部分之間保持正確的距離和邊距如此重要的原因。 不要擔(dān)心太多的空格(最好多于少)—確保空格大約占設(shè)計(jì)的50％。 它使UI看起來(lái)干凈整潔，并有助于保持元素的正確層次結(jié)構(gòu)。

雅各布定律 (Jakob’s Law)

“Users spent most of their time on the other sites”. You definitely heard that one before, right? In general, it’s all about making the UI elements look familiar to the user. In many cases, too creative UI design can be overwhelming.

“用戶將大部分時(shí)間都花在了其他站點(diǎn)上”。 您肯定以前聽(tīng)說(shuō)過(guò)，對(duì)吧？ 通常， 所有這些都是關(guān)于使UI元素看起來(lái)對(duì)用戶熟悉的 。 在許多情況下，過(guò)于創(chuàng)新的UI設(shè)計(jì)可能會(huì)讓人不知所措。

We all don’t like what we don’t understand. If you have to choose between standard and unusual visual solution, choose the standard, understandable and well-known one.

我們都不喜歡我們不了解的東西。 如果您必須在標(biāo)準(zhǔn)和不尋常的視覺(jué)解決方案之間進(jìn)行選擇，請(qǐng)選擇標(biāo)準(zhǔn)，易于理解且眾所周知的解決方案。

隔離效果 (The Isolation Effect)

Also called Von Restroff Effect, says that when they are many elements present, the one that differs catches the most attention and it’s easier to remember. For example: That’s why when we design CTA button, we have to make sure that the color of it stands out!

也稱為馮·斯特羅夫效應(yīng)(Von Restroff Effect)，它表示當(dāng)它們存在很多元素時(shí)，不同的元素會(huì)引起最多的關(guān)注，并且更容易記住 。 例如:這就是為什么在設(shè)計(jì)CTA按鈕時(shí)，我們必須確保其顏色突出！

2.嘗試不同的設(shè)計(jì)風(fēng)格和趨勢(shì) (2. Try different design styles and trends)

Your client might want to create a UI for their product in a particular style. It happens quite often. You may not like all the design styles or trends that are happening right now, but it’s good to try at least once and see for yourself if they suit you, and learn how to achieve certain effects just in case.

您的客戶可能想要以特定樣式為其產(chǎn)品創(chuàng)建UI。 它經(jīng)常發(fā)生。 您可能不喜歡目前正在發(fā)生的所有設(shè)計(jì)風(fēng)格或趨勢(shì)，但最好至少嘗試一次，看看自己是否適合您 ，并學(xué)習(xí)如何以防萬(wàn)一。

It will give you a personal perspective!

它將給您個(gè)人的觀點(diǎn)！

3.簡(jiǎn)化字體集合 (3. Simplify your font collection)

Designers often tend to complicate the typography in their designs, and use too many fonts in different pairings. The truth is, you don’t have to own many fonts to create a stunning, useful UI.

設(shè)計(jì)師通常會(huì)使設(shè)計(jì)中的版式復(fù)雜化，并在不同的配對(duì)中使用過(guò)多的字體。 事實(shí)是，您不必?fù)碛性S多字體即可創(chuàng)建令人驚嘆且有用的UI。

Own just a few: two or three sans-serifs, one serif and one decorative (handwritten, but simple enough to be easily readable — it may come in handy sometimes). You won’t drown in hundreds of choices anymore. This is a real game changer and time saver!

僅有幾個(gè):2或3個(gè)無(wú)襯線字體，1個(gè)襯線和1個(gè)裝飾性字體(手寫(xiě)，但足夠簡(jiǎn)單以至于易于閱讀-有時(shí)可能會(huì)派上用場(chǎng))。 您不會(huì)再淹沒(méi)數(shù)百種選擇。 這是真正的改變游戲規(guī)則和節(jié)省時(shí)間的工具！

If you are actually searching for amazing, readable fonts to use that look good in UI, try the free ones: Montserrat, Poppins, Lato or the paid ones (but worth the money - I use them on a daily basis as my main fonts) Sofia Pro, Gilroy, Brandon Grotesque or Proxima Nova. They are also available via Adobe Fonts.

如果您實(shí)際上是在尋找令人驚嘆的可讀字體以在UI中使用好看的字體，請(qǐng)嘗試免費(fèi)的字體: Montserrat ， Poppins ， Lato或付費(fèi)的字體(但物有所值-我每天都將它們用作主要字體) Sofia Pro ， Gilroy ， Brandon Grotesque或Proxima Nova 。 也可以通過(guò)Adobe字體獲得它們。

4.了解認(rèn)知負(fù)荷并嘗試將其最小化 (4. Learn about the Cognitive Load and try to minimize it)

Coco Chanel once said “Before you leave the house, look in the mirror and remove one accessory”.

可可·香奈兒(Coco Chanel)曾經(jīng)說(shuō)過(guò)“離開(kāi)家之前，照鏡子并卸下一個(gè)配件”。

I believe it can also apply to the UI design.

我相信它也可以應(yīng)用于UI設(shè)計(jì)。

When there’s too much going on, it’s hard for the user to focus on the most important elements. Before you end up with the final design, try to remove something that is the most unnecessary.

當(dāng)發(fā)生太多事情時(shí)，用戶很難專注于最重要的元素。 在進(jìn)行最終設(shè)計(jì)之前，請(qǐng)嘗試刪除最不必要的內(nèi)容。

Maybe the button doesn't need all those effects? Maybe the background could be simpler? Maybe you can minimize the number of the font sizes and styles?

也許按鈕不需要所有這些效果？ 也許背景可能更簡(jiǎn)單？ 也許您可以減少字體大小和樣式的數(shù)量？

5.始終檢查可訪問(wèn)性 (5. Always check the accessibility)

I encourage you to learn more about the accessibility in user interfaces, and make your own accessibility checklist.

我鼓勵(lì)您更多地了解用戶界面中的輔助功能，并制作自己的輔助功能清單。

Every time you design an interface, walk through the checklist to make sure that your interface follows the rules. Here are some of them:

每次設(shè)計(jì)界面時(shí)，請(qǐng)遍歷清單以確保界面遵循規(guī)則。 這里是其中的一些:

• Is the contrast between elements right? Try the Contrast Checker tool.

  元素之間的對(duì)比正確嗎？ 嘗試使用“ 對(duì)比度檢查器”工具。

• Does every clickable element has the right touch target? (minimal is around 44x44px).

  是否每個(gè)可點(diǎn)擊元素都具有正確的觸摸目標(biāo)？ (最小值約為44x44px)。

• Is text readable enough? (The minimal font size should be 12p).

  文字是否足夠可讀？ (最小字體應(yīng)為12p)。

Ensuring UI accessibility and readability is often overlooked — make the difference and design simple and friendly products that everyone can use with ease!

確保UI的可訪問(wèn)性和可讀性經(jīng)常被忽略-有所作為，設(shè)計(jì)簡(jiǎn)單友好的產(chǎn)品，每個(gè)人都可以輕松使用！

您想要了解更多嗎？ :nerd_face :: graduation_cap: (Do you want to learn more? 🤓🎓)

Get the “Designing Interfaces” book with over 400 pages of the most important knowledge about designing UI.

獲得“ Designing Interfaces”一書(shū)，其中包含超過(guò)400頁(yè)有關(guān)設(shè)計(jì)UI的最重要知識(shí)。

Only now you can choose the exclusive bundle and get the second book about UI Styles completely for free!

只有現(xiàn)在，您可以選擇獨(dú)家捆綁包，并完全免費(fèi)獲得有關(guān)UI樣式的第二本書(shū)！

I 🖋 write about design and I’m a 👩🏻?🔧 co-founder/lead designer at HYPE4design-driven software agency.

我🖋 寫(xiě)關(guān)于設(shè)計(jì)的文章 ，我是👩🏻?🔧 HYPE4設(shè)計(jì)驅(qū)動(dòng)軟件代理商的聯(lián)合創(chuàng)始人/首席設(shè)計(jì)師。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個(gè)巴西組織，致力于通過(guò)采取行動(dòng)，賦權(quán)和知識(shí)共享的舉措來(lái)促進(jìn)科技行業(yè)中的黑人女性平等。 對(duì)系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

翻譯自: https://uxdesign.cc/5-steps-to-improve-your-ui-skills-69b0de387034

element ui 步驟

總結(jié)

以上是生活随笔為你收集整理的提升UI技能的5个步骤的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。