提升UI技能的5个步骤

element ui 步骤

重点 (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.

当您知道如何使用软件并了解界面设计基础时该怎么办? 您可以做一些简单的事情,将自己的技能提高到一个新的水平,并且无需投资昂贵的在线课程和教程。

Here’s what to try and learn!

这是尝试和学习的方法!

Examples of the usage of perception laws

1.学会在界面中使用人类感知法则 (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:

您的设计是否遵循人类感知的规则? 很好地了解它们是一件好事,因为没有这些知识,您将无法真正解释视觉选择背后的原因。 其中有少数几个,但要知道要专注于最关键的几个:

邻近法则 (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).

如果存在多个元素,则彼此接近的元素将被视为一个组(即使它们看起来不同)。

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.

这就是为什么在元素和部分之间保持正确的距离和边距如此重要的原因。 不要担心太多的空格(最好多于少)—确保空格大约占设计的50%。 它使UI看起来干净整洁,并有助于保持元素的正确层次结构。

雅各布定律 (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.

“用户将大部分时间都花在了其他站点上”。 您肯定以前听说过,对吧? 通常, 所有这些都是关于使UI元素看起来对用户熟悉的 。 在许多情况下,过于创新的UI设计可能会让人不知所措。

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.

我们都不喜欢我们不了解的东西。 如果您必须在标准和不寻常的视觉解决方案之间进行选择,请选择标准,易于理解且众所周知的解决方案。

隔离效果 (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!

也称为冯·斯特罗夫效应(Von Restroff Effect),它表示当它们存在很多元素时,不同的元素会引起最多的关注,并且更容易记住 。 例如:这就是为什么在设计CTA按钮时,我们必须确保其颜色突出!

Different visual styles pictured as buttons

2.尝试不同的设计风格和趋势 (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.

您的客户可能想要以特定样式为其产品创建UI。 它经常发生。 您可能不喜欢目前正在发生的所有设计风格或趋势,但最好至少尝试一次,看看自己是否适合您 ,并学习如何以防万一。

It will give you a personal perspective!

它将给您个人的观点!

Simple and complicated typography examples

3.简化字体集合 (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.

设计师通常会使设计中的版式复杂化,并在不同的配对中使用过多的字体。 事实是,您不必拥有许多字体即可创建令人惊叹且有用的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!

仅有几个:2或3个无衬线字体,1个衬线和1个装饰性字体(手写,但足够简单以至于易于阅读-有时可能会派上用场)。 您不会再淹没数百种选择。 这是真正的改变游戏规则和节省时间的工具!

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.

如果您实际上是在寻找令人惊叹的可读字体以在UI中使用好看的字体,请尝试免费的字体: Montserrat , Poppins , Lato或付费的字体(但物有所值-我每天都将它们用作主要字体) Sofia Pro , Gilroy , Brandon Grotesque或Proxima Nova 。 也可以通过Adobe字体获得它们。

Example of how to simplify the ui design

4.了解认知负荷并尝试将其最小化 (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)曾经说过“离开家之前,照镜子并卸下一个配件”。

I believe it can also apply to the UI design.

我相信它也可以应用于UI设计。

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.

当发生太多事情时,用户很难专注于最重要的元素。 在进行最终设计之前,请尝试删除最不必要的内容。

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?

也许按钮不需要所有这些效果? 也许背景可能更简单? 也许您可以减少字体大小和样式的数量?

Different accessibility examples shown on buttons

5.始终检查可访问性 (5. Always check the accessibility)

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

我鼓励您更多地了解用户界面中的辅助功能,并制作自己的辅助功能清单。

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

每次设计界面时,请遍历清单以确保界面遵循规则。 这里是其中的一些:

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

    元素之间的对比正确吗? 尝试使用“ 对比度检查器”工具。

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

    是否每个可点击元素都具有正确的触摸目标? (最小值约为44x44px)。

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

    文字是否足够可读? (最小字体应为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的可访问性和可读性经常被忽略-有所作为,设计简单友好的产品,每个人都可以轻松使用!

您想要了解更多吗? :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”一书,其中包含超过400页有关设计UI的最重要知识。

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

只有现在,您可以选择独家捆绑包,并完全免费获得有关UI样式的第二本书!

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

我🖋 写关于设计的文章 ,我是👩🏻‍🔧 HYPE4设计驱动软件代理商的联合创始人/首席设计师。

Image for post
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),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

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

element ui 步骤

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274548.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

空降进阿里的 P10 都是什么人

周末见了几个朋友,吃饭时聊到他们前老板郭东白(阿白),对了,我朋友在速卖通,他说阿白是 14 年来的阿里,直接就空降进了他们部门,当上首席架构师,后来又升到了 CTO&#xf…

linux下练习 c++ 关联式容器multimap特性

/* multimap特性 key可以重复 不支持下标访问 */ #include<iostream> #include<string> #include "print.h" #include<map> using namespace std; typedef pair<int,string> pairmp; typedef multimap<string,double> MS;int main() …

一致性设计,而不是一致性

一致性设计重点 (Top highlight)If we ask any design system advocate what are the main reasons to build and maintain a design system, chances are ‘Consistency’ will come up as first or second in their list, together with the ‘A single source of truth’ po…

如何在 React 应用中使用 Hooks、Redux 等管理状态

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系…

长语音识别体验_如何为语音体验写作

长语音识别体验重点 (Top highlight)“Voice User Interface (VUI) Designer” is an increasingly prominent job title in the tech world. A VUI designer typically writes the conversation and designs the flow between a VUI — an invisible interface that communica…

分析了1011个程序员的裁员情况后得出的启示

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系…

定义设计系统

System is “the whole creation, the universe,” from Late Latin systema “an arrangement, system,” from Greek systema “organized whole, a whole compounded of parts”.系统是晚期拉丁语系统的“整体创造物&#xff0c;宇宙”&#xff0c;是希腊语系统的“一种安排…

2w行代码、200个实战项目,助你修炼5大编程基本功。【送书《设计模式之美》】...

大家好&#xff0c;我是若川。之前送了很多书&#xff0c;现在又和异步图书合作再次争取了几本书&#xff0c;具体送书规则看文末。所谓练武不练功&#xff0c;到老一场空&#xff0c;以技术为驱动的程序员同样如此。面向对象编程范式、设计原则、代码规范、重构技巧和设计模式…

C++第10周项目2扩展之2参考——迭代求和

课程首页地址&#xff1a;http://blog.csdn.net/sxhelijian/article/details/7910565【项目2扩展之2&#xff08;选做&#xff09;】计算下面的式子&#xff0c;不能使用求幂函数pow()式一&#xff1a;#include <iostream> using namespace std; int main( ) { int i,m1;…

swift自行车品牌介绍_品牌101:简介

swift自行车品牌介绍Sometimes when I’m around designer friends and there’s a lull in the conversation one of us will blurt out, “What is branding, anyway?” Then we shrug our shoulders and chuckle, knowing that the answer is far too complex to sum up in…

flutter 透明度动画_Flutter中的动画填充+不透明度动画✨

flutter 透明度动画Flutter SDK provides us with many widgets which help us in animating elements on screen easily by implicitly managing the animations i.e. we need not worry about creating and managing intances of AnimationController during the lifecycle o…

阿里 P10 是怎样的存在?

谈起中国顶尖的程序员&#xff0c;很多人首先会想到之前的雷军、张小龙&#xff0c;还有现在的多隆、行癫、道哥等人&#xff0c;但今天我想聊一聊的这位大神&#xff0c;他的技术成就也同样令人瞩目。19 年获得国家技术发明二等奖、20 年获得国家计算机协会颁发的“ CCF 杰出工…

vba交付图表设计_您是在为交付目的而“设计”吗?

vba交付图表设计重点 (Top highlight)It’s a regular Monday morning. All the design team is organizing the tasks for the ongoing week and reviewing requirements and deadlines for the various projects at the studio or company you work at. Suddenly, among the …

前端必读书籍推荐

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系…

window程序设计学会_是时候我们学会设计合适的饼图了

window程序设计学会Pie charts are common in data science — next to the 饼形图在数据科学中很常见- bar chart and the line plot, the pie chart is incredibly standard and simple. A circle is split into several slices, with each slice’s angle representing how…

「非广告」程序员如何才能尽量避免被裁?

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系…

使用css制作三角,兼容IE6,用到的标签divsspan

使用css来制作三角&#xff0c;在日常用得较多。恰好这几天项目中有用到&#xff0c;之前只是从网上copy下来代码直接用&#xff0c;但是今天在用的时候遇到一些问题&#xff0c;于是借此机会把这个css绘制三角好好研究下吧。 我们分别写一个<div>,<s>,<span>…

培训师 每小时多少钱_每个产品设计师需要了解的品牌知识

培训师 每小时多少钱重点 (Top highlight)These days, it pays to know about brand. The rise of startups has created thousands of new brand design opportunities, and people of all disciplines are working to help brands compete in a crowded world. Increasingly,…

Android 绑定远程服务出现 Not Allowed to bind service

E/AndroidRuntime(3783): Caused by: java.lang.SecurityException: Not allowed to bind to service Intent { actcom.lenovo.pleiades.conntek.pad } 主要原因是服务中设有签名保护&#xff0c;该服务上一次是通过A设备中的Eclipse签名的&#xff0c;这一次是通过B设备中的Ec…

axios 发布 v1.1.0 据说导致很多网站瘫痪~那么如何自动提升版本号呢~

- 大家好&#xff0c;我是若川。友情提醒&#xff0c;今天还是周二。就不发长篇技术文了~近日&#xff0c;axios 发布了 v1.1.0 版本&#xff0c;调用 axios.get 时报错&#xff0c;据说导致请求无效很多网站瘫痪。目前官方已发布了 v1.1.1 v1.1.2 修复了该问题。让我想起群友在…