前端开发 新手练习
by Ewa Mitulska-Wójcik
伊娃·米图尔斯卡(EwaMitulska-Wójcik)
5分钟内为新手前端开发人员介绍的用户体验 (User Experience explained in 5 minutes for newbie front end developers)
User-centered front end developers are in demand now.
现在需要以用户为中心的前端开发人员。
User Experience (UX) is the language of business.
用户体验(UX)是业务的语言。
And as User Testing concludes in their annual report from 2015:
In the coming years, companies will invest more heavily in creating products and experiences based on continuous feedback from their customers, and customer experience will become a shared responsibility among all teams in an organization.
在未来的几年中，公司将根据客户的持续反馈，加大对创建产品和体验的投入，客户体验将成为组织中所有团队的共同责任。
The project to stand out from the crowd needs to fit users’ “just right” measure. There are multitude of projects where the role of a UX designer is in the hands of front end developer. Psychology and usability are complimentary to javascript. Sure you can stop at code level, but it’s much more fun and benefits if you go beyond this artificial job title lines. For your clients and their users code is a tool, not a goal in itself.
从人群中脱颖而出的项目需要适应用户的“正确”措施 。 在众多项目中，UX设计人员的角色由前端开发人员掌握。 心理和可用性是javascript的补充。 当然，您可以在代码级停下来，但是如果您超出了人为的职称范围，它会带来更多的乐趣和收益。 对于您的客户及其用户， 代码本身就是一种工具，而不是目标。
Teams you will work in may lack a UX designer, researchers, or a graphic dude. Nobody says you have to become a visual or interaction designer and hopefully you will collaborate in a team with great designers and researchers. However, if you want to make projects you join successful, then you’d better get interested at least in some basics of UX. Perfect projects and teams do not meet each other at every corner.
您将要工作的团队可能没有UX设计人员，研究人员或图形专家。 没有人说您必须成为视觉或交互设计师，而希望您将与出色的设计师和研究人员组成团队。 但是，如果您想使项目成功加入，那么最好至少对UX的一些基本知识感兴趣。 完美的项目和团队不会在每个角落相遇。
Great experience equals happy users. Happy users lead to retention. It makes greater chance for higher revenue. This brings income. That makes everybody happy and your code is really used by millions of people. Then you start being more and more proud of what you code because it solves real problems of the users. Sure code level is extremely important, if the product is buggy nobody wants to use it. Yet the code can pass each test you run, but if users don’t like the results, it has got short legs in business.
丰富的经验等于快乐的用户。 满意的用户带来保留。 这为获得更高的收入提供了更大的机会。 这带来了收入。 那让每个人都开心 您的代码确实被数以百万计的人使用。 然后，您开始对代码编写感到越来越自豪，因为它解决了用户的实际问题 。 确保代码级别非常重要，如果产品有故障，没人愿意使用它。 然而，代码可以通过您运行的每个测试，但是如果用户不喜欢结果，则它的业务范围很短。
Let me introduce you to the few basics of user experience to rise the chances for successful implementations. Here are the 5 short rules to start with.
让我向您介绍一些用户体验的基础知识，以增加成功实施的机会。 这是开始的5条简短规则。
1.该产品适合用户 (1. The product is for users)
If it does not solve their problems, sooner or later the product owner will stop investing in it. Get to know the people who are in the target group. At least understand the basics.
如果它不能解决他们的问题，产品所有者迟早会停止投资。 了解目标群体中的人。 至少了解基本知识。
The whole team should be aware what to build and for whom.
整个团队应该知道该为谁而建。
Ask often, test often, iterate. What’s the problem they want to solve? What’s their goal? What are they anxious about? Is it a teenager girl, or an elderly man (be careful with generalizations)? Is it a backend developer or a hairdresser? When will they come to the product, what they need to find first? How can you make it easier for them? Where should they go next?
经常问，经常测试，重复。 他们想解决什么问题？ 他们的目标是什么？ 他们担心什么？ 是十几岁的女孩还是年长的男人( 对概论要小心 )？ 是后端开发人员还是美发师？ 他们什么时候来产品，首先需要找到什么？ 您如何才能使他们更轻松？ 他们下一步应该去哪里？
What’s the minimum of information that you really need to get from them to help them solve the problem? Make your users feel like home. Take benefit of conventions and best practices.
您真正需要从他们那里获得帮助他们解决问题的最少信息是什么？ 让您的用户有宾至如归的感觉。 利用约定和最佳做法。
A bit of domain knowledge does not hurt, it is an bonus of being a developer. Each project teaches you a new world, isn’t it great? Take benefit of it and observe the world around. It may help you a lot to create products users will love.
一点点领域知识都不会损害，这是成为开发人员的好处。 每个项目都会教会您一个新世界，这不是很好吗？ 充分利用它，观察周围的世界。 它可以帮助您创建用户喜爱的产品。
2.不要让我认为这是第一个可用性规则 (2. Don’t make me think is the first usability rule)
Krug’s book is the condensed bible of usability. Great product is about being clear, taking advantage of conventions and providing the interface that is just in time and place. Front end is not just javascript behind the actions users take. Being consistent, visual hierarchy, getting rid of visual noise and writing human alerts and input labels matters for usability of the product.
克鲁格的书是实用性的简明圣经 。 伟大的产品就是要清晰明了，要利用约定并提供及时且及时的界面。 前端不仅是用户执行动作背后JavaScript。 一致的视觉层次结构，消除视觉噪音以及编写人为警告和输入标签对于产品的可用性至关重要。
Users scan pages to find the information, make it easy for them by the way it looks. Use appropriate headings, font sizes, affordable buttons, meaningful labels, etc.
用户扫描页面以查找信息，使信息看起来更容易。 使用适当的标题，字体大小，负担得起的按钮，有意义的标签等。
If you have any influence on the copy, remember that happy blah blah blah talk is annoying. If your write alerts, use the language the users speak. Be informative and helpful.
如果您对复制品有任何影响，请记住愉快的等等之类的谈话令人讨厌。 如果您有写警报，请使用用户说的语言。 内容丰富且乐于助人。
Make sure the navigation is clear, not overloaded, logical for a user. You may also use breadcrumbs as indicators to show where users are if the site is really complex.
确保导航对于用户而言是清晰的，而不是过载的。 如果站点真的很复杂，您也可以使用面包屑作为指标来显示用户的位置。
Breadcrumbs work best if they are at the top of the page, the > sign is placed between levels, and the last element is bolded. If the menu is visible for a user then the interaction is much bigger than when hidden behind hamburger bar.
如果面包屑位于页面顶部，在两个级别之间放置>符号，并且最后一个元素以粗体显示，则效果最好。 如果菜单对用户可见，则交互作用比隐藏在汉堡栏后面的交互作用大得多。
Be careful and don’t exaggerate with number of items and levels in menu. Your user does not have to see all at once. You can introduce the next items the moment a user is on the right level and really needs it.
要小心，不要过分夸大菜单中的项目和级别。 您的用户不必一次看到所有内容。 您可以在用户处于正确级别并真正需要它时，介绍下一个项目。
3.移动版不是台式机版本，而是缩小了尺寸 (3. Mobile is not a desktop version but squeezed to smaller size)
Imagine you implement a mobile version of an app where you can decide on layout. You don’t have ready designs and you are asked to build it with Bootstrap components. Start mobile first. It makes you focus on the most important elements and interactions first.
想象一下，您实现了一个移动版本的应用程序，您可以在其中决定布局。 您没有现成的设计，需要您使用Bootstrap组件进行构建。 首先启动手机 。 它使您首先专注于最重要的元素和交互。
You can build prototype, wireframe or at least sketch first. The easiest thing to do is pen and paper. You can help yourself with Sketch, Experience Design, or simply google for any other wireframe or prototyping tool. If you are not a visual designer but still have to do the prototype work, go for prototyping tools such as Proto.io where you have ready to use UI library elements.
您可以先构建原型，线框或至少先绘制草图。 最简单的事情是笔和纸。 您可以借助Sketch ， Experience Design或通过谷歌搜索任何其他线框或原型制作工具来帮助自己。 如果您不是视觉设计师，但仍然需要做原型工作，请使用Proto.io之类的原型工具，您可以在其中使用UI库元素。
Mobile means comfortable for fast tap, slide, or tick. So if you want to create a form, use steppers, sliders, radio groups, or switchers instead of old school desktop text inputs.
移动意味着舒适地快速点击，滑动或打勾 。 因此，如果要创建表单，请使用步进器，滑块，单选按钮组或切换器，而不要使用老式的桌面文本输入。
Mobile is touch first. Mobile means horizontal and vertical. Mobile is used usually with one hand with a thumb size. It also means that the most convenient touch area is at the bottom of the screen.
移动是触摸第一。 移动表示水平和垂直。 移动设备通常用一只拇指大小的手来使用。 这也意味着最方便的触摸区域在屏幕底部。
Mobile benefits from variety of device capabilities built in e.g. gallery access, camera, movement sensors, microphone, or GPS. Take benefit of it.
通过内置的各种设备功能(例如画廊通道，摄像头，运动传感器，麦克风或GPS)，移动设备将从中受益。 充分利用它。
When it comes to mobile and UX, let me leave you for the moment with Luke Wroblewski. You can learn a lot from him.
在移动和UX方面，让我暂时与Luke Wroblewski谈谈。 你可以从他那里学到很多东西 。
4.您的代码设置了规则，因此请确保它们是正确的 (4. Your code sets the rules, so make sure they are right)
Don’t ask users for their shoe size during their first visit unless you are a shoe shop. Even if you create a shoe shop, you can provide the info about the range of numbers available, and let users play first with colors, patterns, or occasions.
除非您是鞋店，否则请勿在首次访问时询问用户鞋子的尺码。 即使您创建鞋店，也可以提供有关可用数字范围的信息，并让用户首先使用颜色，图案或场合进行游戏。
A lot of apps start with a sign up wall, which makes drop offs the most visible metric. Have a look at the article I wrote about human form design.
许多应用程序都是从注册墙开始的，这使脱落成为最明显的指标。 看一下我写的有关人形设计的文章 。
Whether you implement a solution for a client or build your own product consider benefits of building a relationship. Give your users a chance to try the product before you serve them a credit card input to fill in during sign up for a free trial. Don’t build walls. You would like your users use what you coded, right? Let them try.
无论是为客户实施解决方案还是构建自己的产品，都要考虑建立关系的好处 。 在为用户提供信用卡输入以在注册免费试用期间为其填充之前，给您的用户试用产品的机会。 不要盖墙。 您希望您的用户使用您的编码，对吗？ 让他们尝试。
Gradual engagement and graceful degradation are your dials.
Make sure your images are optimized. Use minified versions of your code when you push it to production. Run Google page test to optimize. Test on low speed net connection. Take care of those who care about each bite of transfer. Make your product usable both at broadband and GPRS.
确保图像经过优化。 将代码推送到生产环境时，请使用代码的缩小版本。 运行Google页面测试以进行优化 。 在低速网络连接上进行测试。 照顾那些关心转移每一口的人。 使您的产品在宽带和GPRS上均可使用。
5.充满多级动画的像素完美时间已经过去 (5. Pixel perfect times full of multilevel animations are dead)
Great product experience is based on usability and benefits. It’s not a pixel shooting game. The pixel perfectionism went away with desktop only display.
出色的产品体验基于可用性和收益。 这不是像素射击游戏。 像素完美主义在仅台式机显示器上消失了。
It’s great that you can play with complex CSS…
可以使用复杂CSS真是太好了……
...but don’t introduce extra animation noise just to show your skills.
...但是不要为了展示您的技能而引入额外的动画噪音。
If you want show off, practice on CodePen, and keep it for your portfolio. Animation is perfect when it’s meaningful.
如果您想炫耀，请在CodePen上练习，并将其保留在您的作品集中。 有意义的动画是完美的。
UX is much more than that. That was just an intro for those who are new to the subject. If you liked it, click the Medium heart icon and recommend it to others. If you would like to hear more from me about usability, user interaction design, user research, prototyping, etc., let me know in the comments.
UX远不止于此。 对于那些刚接触该主题的人来说，这只是一个介绍。 如果喜欢， 请单击“中等心脏”图标 ， 然后将其推荐给其他人 。 如果您想从我这里获得更多关于可用性，用户交互设计，用户研究，原型设计等方面的信息，请在评论中告诉我。
Happy user-centered coding!
快乐的以用户为中心的编码！
I am a web learner. I am a Free Code Camper. I publish at Medium and tweet about UX and startups at thedoerdoes. I love useful solutions and great collaboration.
我是一名网络学习者。 我是一名免费代码露营者 。 我在Medium上发表了有关UX和thedoerdoes上的创业公司的推文。 我喜欢有用的解决方案和良好的协作。
前端开发 新手练习
1333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
