Ux

Don’t Make Me Think. A Common Sense Approach to Web Usability.早些年从后端逐步迈入前端，也没有什么艺术细菌，也多是从技术角度考虑而忽略了产品、交互以及视觉。在产品经理必读书单以及年度总结中，都会有想要逐步培养些产品思维，无论是自己平日工作中拧紧的螺丝钉还是手工做的小产品，都想赋予些设计而不仅仅是功能的堆叠。Don’t Make Me Think 成书较早，提供的一些交互设计事例或者具体的交互方式可能有些成就，但是贯穿全书的简单至上的理念也是让我在某些方面有了更深刻的认识；也可以前往 Awesome-CS-Books-Warehouse 浏览更多产品、交互、软件工程方面的书籍。Here are a few things you won’t find in this book:Hard and fast usability rulesPredictions about the future of technology and the WebBad-mouthing of poorly designed sites and apps.You’ll find a lot of different definitions of usability often breaking it down into attributes like:Useful: Does it do something people need done?Learnable: Can people figure out how to use it?Memorable: Do they have to relearn it each time they useEffective: Does it get the job done?Efficient: Does it do it with a reasonable amount of time and effort?Desirable: Do people want it?Delightful: Is using it enjoyable, or even fun?Person of average (or even below average) ability and experience can figure out how to use the thing [i.e., it’s learnable] to accomplish something[effective] without it being more trouble than it’s worth [efficient].Chapter 1. Dont make me thinkWhat’s the most important thing I should do if i want to make sure my site or app is easy to use? It’s not “Nothing important should ever be more than two clicks away” or “Speak the user’ s language” or “Be consistent.” It’s Dont make me think.All kinds of things on a Web page can make us stop and think unnecessarily. Your goal should be for each page or screen to be self-evident, so that just by looking at it the average user. Here’s the rule: If you can t make something self-evident, you at least need to make it self-explanatory.On a self-explanatory page, it takes a little thought to get it, but only a little. The appearance of things (like size, color, and layout), their well-chosen names, and the small amounts of carefully crafted text should all work together to create a sense of nearly effortless understanding.Chapter 2. How we really use the WebWhen we’re creating Sites, we act as though people are going to pore over each page, reading all of our carefully crafted text, figuring out how we’ve organized things, and weighing their options before deciding which link to click.What they actually do most of the time (if were lucky is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for.FACT OF LIFE #1: We dont read pages. We scan themFACT OF LIFE #2: We dont make optimal choices. We satisfice.FACT OF LIFE #3: We don’t figure out how things work. We muddle through.Chapter 3. Billboard Design 101DESIGNING FOR SCANNING, NOT READINGTake advantage of conventionsLike Stop signs, Given how crucial it is that drivers see and recognize them at a glance at a distance, in all kinds of weather and lighting conditions, it’s a really good thing that all stop signs look the same.Create effective visual hierarchiesThe more important something is, the more prominent it is.Things that are related logically are related visually.Things are"nested visually to show what’s part of whatBreak pages up into clearly defined areasWeb page scanning suggest that users decide very quickly in their initial glances which parts of the page are likely to have useful information and then rarely look at the other parts.Banner blindness-the ability of users to completely ignore areas they think willcontain ads–is just the extreme case.Make it obvious what’s clickableAs we scan a page, we’re looking for a variety of visual cues that identify things as clickable(or tappable?‘on touch screens )-things like shape(buttons, tabs, etc.), location(in a menu bar, for instance), and formatting(color and underlining).Eliminate distractions/noiseOne of the great enemies of easy-to-grasp pages is visual noise. There are really three different kinds of noise:Shouting: Automated slideshows, animation, pop-ups, and the never-ending array of new attention-grabbing ad formats! Shouting is usually the result of a failure to make tough decisions about which elements are really the most important and then create a visual hierarchy that guides users to them first.Disorganization: This is a sure sign that the designer doesn’t understand the importance of using grids to align the elements on a page.Clutter: It’s hard to find and focus on the messages you actually care about.A good idea to start with the assumption that everything is visual noise (the “presumed guilty until proven innocent” approach) and get rid of anything that’s not making a real contribution.Format content to support scanningUse plenty of headings.Keep paragraphs short.Use bulleted lists.Highlight key terms.Chapter 4. Animal, Vegetable, or Mineral? WHY USERS LIKE MINDLESS CHOICESIt doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous. But over time I’ve come to think that what really counts is not the number of clicks it takes me to get to what I want (although there are limits), but rather how hard each click is—the amount of thought required and the amount of uncertainty about whether I’m making the right choice.Some assistance may be requiredThis guidance works best when it’sBrief: The smallest amount of information that will help meTimely: Placed so I encounter it exactly when I need itUnavoidable: Formatted in a way that ensures that I’ll notice itChapter 5. Omit needless wordsGet rid of half the words on each page, then get rid of half of what’s left.Happy talk must die: It’s the introductory text that’s supposed to welcome us to the site and tell us how great it is or to tell us what we’re about to see in the section we’ve just entered. Happy talk is like small talk—content-free, basically just a way to be sociable. But most Web users don’t have time for small talk; they want to get right to the point. You can—and should—eliminate as much happy talk as possible.Instructions must die: Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible.Chapter 6. Street signs and BreadcrumbsWeb Navigation 101In many ways, you go through the same process when you enter a Web site.You’re usually trying to find something.You decide whether to ask first or browse first. The difference is that on a Web site there’s no one standing around who can tell you where things are. The Web equivalent of asking directions is searching—typing a description of what you’re looking for in a search box and getting back a list of links to places.Some people (Jakob Nielsen calls them “search-dominant” users) will almost always look for a search box as soon as they enter a site. Other people (Nielsen’s “link-dominant” users) will almost always browse first, searching only when they’ve run out of likely links to click or when they have gotten sufficiently frustrated by the site.Web experience is missing many of the cues we’ve relied on all our lives to negotiate spaces. Consider these oddities of Web space:No sense of scale.No sense of direction.No sense of location.This lack of physicality is both good and bad. On the plus side, the sense of weightlessness can be exhilarating and partly explains why it’s so easy to lose track of time on the Web—the same as when we’re “lost” in a good book.On the negative side, If you look up navigation in a dictionary, it’s about doing two things: getting from one place to another, and figuring out where you are.Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for and to tell us where we are.Persistent navigationJust having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you’re still in the same site.Persistent navigation should include the four elements you most need to have on hand at all times:On pages where a form needs to be filled in, the persistent navigation can sometimes be an unnecessary distraction.One of the ways navigation can counteract the Web’s inherent “lost in space” feeling is by showingme where I am in the scheme of things.PagesThere are four things you need to know about page names:Every page needs a name. Just as every corner should have a street sign, every page should have a name.The name needs to be in the right place. In the visual hierarchy of the page, the page name should appear to be framing the content that is unique to this pageThe name needs to be prominent.The name needs to match what I clicked.BreadcrumbsLike “You are here” indicators, Breadcrumbs show you where you are. They’re called Breadcrumbs because they’re reminiscent of the trail of crumbs Hansel dropped in the woods so he and Gretel could find their way back home.Breadcrumbs show you the path from the Home page to where you are and make it easy to move back up to higher levels in the hierarchy of a site.Put them at the top.Use > between levels.Boldface the last item.TabsTabs are one of the very few cases where using a physical metaphor in a user interface actually works. Here’s why I like them:They’re self-evident.They’re hard to miss.They’re slick.If the page is well designed, when your vision clears you should be able to answer these questions without hesitation:What site is this? (Site ID)What page am I on? (Page name)What are the major sections of this site? (Sections)What are my options at this level? (Local navigation)Where am I in the scheme of things? (“You are here” indicators)How can I search?Here’s how you perform the trunk test:Step 1: Choose a page anywhere in the site at random, and print it.Step 2: Hold it at arm’s length or squint so you can’t really study it closely.Step 3: As quickly as possible, try to find and circle each of these items:Site IDPage nameSections (Primary navigation)Local navigation“You are here” indicator(s)SearchChapter 7. The Big Bang Theory of Web DesignTHE IMPORTANCE OFGETTING PEOPLE OFFON THE RIGHT FOOT.As quickly and clearly as possible, the Home page needs to answer the four questions I have in myhead when I enter a new site for the first time:This is what I call the Big Bang Theory of Web Design. Like the Big Bang Theory, it’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical.Everything on the Home page can contribute to our understanding of what the site is. But there arethree important places on the page where we expect to find explicit statements of what the site isabout.The tag lineOne of the most valuable bits of real estate is the space right next to the Site ID. When we see a phrase that’s visually connected to the ID, we know it’s meant to be a tagline, and so we read it as a description of the whole site. We’ll look at taglines in detail in the next section.The Welcome blurb.The Welcome blurb is a terse description of the site, displayed in aprominent block on the Home page, usually at the top left or center of the content space so it’s the first thing that catches your eye.The “Learn more.”Innovative products and business models tend to require a fair amount ofexplanation, often more than most people have the patience for. But people have become accustomed to watching short videos on their computers and mobile devices. As a result, people have now come to expect a short explanatory video on most sites and are often willing to watch them.Chapter 8. “The Farmer and the Cowman Should Be Friends” | 论内部协作Left to their own devices, Web teams aren’t notoriously successful at making decisions about usability questions. Most teams end up spending a lot of precious time rehashing the same issues over and over.The point is, it’s not productive to ask questions like “Do most people like pull-down menus?” The right kind of question to ask is “Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?”And there’s really only one way to answer that kind of question: testing. You have to use the collective skill, experience, creativity, and common sense of the team to build some version of the thing (even a crude version), then watch some people carefully as they try to figure out what it is andhow to use it.Chapter 9. Usability testing on 10 cents a dayUsability testing has been around for a long time, and the basic idea is pretty simple: If you want to know whether something is easy enough to use, watch some people while they try to use it and note where they run into problems. Testing one user is 100 percent better than testing none. Testing one user early in the project is better than testing 50 near the end.Repeat after me: Focus groups are not usability testsHere’s the difference in a nutshell:In a focus group, a small group of people (usually 5 to 10) sit around a table and talk about things, like their opinions about products, their past experiences with them, or their reactions to new concepts. Focus groups are good for quickly getting a sampling of users’ feelings and opinions about things.Usability tests are about watching one person at a time try to use something (whether it’s a Web site, a prototype, or some sketches of a new design) to do typical tasks so you can detect and fix the things that confuse or frustrate them.The main difference is that in usability tests, you watch people actually use things, instead of justlistening to them talk about them.Do-it-yourself usability testingThe purpose of this kind of testing isn’t to prove anything. You don’t need to find all of the problems. In fact, you’ll never find all of the problems in anything you test. And it wouldn’t help if you did, because of this fact:You can find more problems in half a day than you can fix in a month.A typical one-hour test would be broken down something like this:Welcome (4 minutes). You begin by explaining how the test will work so the participant knows what to expect.The questions (2 minutes). Next you ask the participant a few questions about themselves. This helps put them at ease and gives you an idea of how computer-savvy and Web-savvy they are.The Home page tour (3 minutes). Then you open the Home page of the site you’re testing and ask the participant to look around and tell you what they make of it. This will give you an ideaof how easy it is to understand your Home page and how much the participant already knows your domain.The tasks (35 minutes). This is the heart of the test: watching the participant try to perform a series of tasks (or in some cases, just one long task). Again, your job is to make sure the participant stays focused on the tasks and keeps thinking aloud.If the participant stops saying what they’re thinking, prompt them by saying—wait for it — “What are you thinking?” (For variety, you can also say things like “What are you looking at?” and “What are you doing now?”)During this part of the test, it’s crucial that you let them work on their own and don’t do or say anything to influence them. Don’t ask them leading questions, and don’t give them any clues or assistance unless they’re hopelessly stuck or extremely frustrated. If they ask for help, just say something like “What would you do if I wasn’t here?”Probing (5 minutes). After the tasks, you can ask the participant questions about anything that happened during the test and any questions that the people in the observation room would likeyou to ask.Wrapping up (5 minutes). Finally, you thank them for their help, pay them, and show them to the door.The debriefing: Deciding what to fixHere are some of the types of problems you’re going to see most often:Users are unclear on the concept.The words they’re looking for aren’t there.There’s too much going on.FOCUS RUTHLESSLY ON FIXING THE MOST SERIOUS PROBLEMS FIRSTChapter 10. Mobile: It’s not just a city in Alabama anymoreSo, what’s different about usability when you’re designing for use on a mobile device?In one sense, the answer is: Not much. The basic principles are still the same. If anything, people aremoving faster and reading even less on small screens. Most of the challenges in creating good mobile usability boil down to making good tradeoffs.Which parts do you leave out? One approach was Mobile First. Instead of designing a full-featured (and perhaps bloated) version of your Web site first and then paring it down to create the mobile version, you design the mobile version first based on the features and content that are most important to your users. Then you add on more features and content to create the desktop/full versionBreeding chameleonsIf there are two things I can tell you about scalable design (a/k/a dynamic layout, fluid design, adaptive design, and responsive design), they’re these:It tends to be a lot of work.It’s very hard to do it well.In the meantime, here are three suggestions:Allow zooming.Don’t leave me standing at the front door. You tap on a link in an email or a social media site and instead of taking you to the article in question it takes you to the mobile Home page, leaving you to hunt for the thing yourself.Always provide a link to the “full” Web site.Be careful that your responsive design solutions aren’t loading up pages with huge amounts of code and images that are larger than necessary for the user’s screen.Don’t hide your affordances under a bushelAffordances are visual clues in an object’s design that suggest how we can use it.[](https://ww1.sinaimg.cn/large/...This is not to say that all affordances need to hit you in the face. They just have to be visible enoughthat people can notice the ones they need to get their tasks done.Flat design has a tendency to take along with it not just the potentially distracting decoration but also the useful information that the more textured elements were conveying.Delightful & LearnableDelightful apps usually come from marrying an idea about something people would really enjoy being able to do, but don’t imagine is possible, with a bright idea about how to use some new technology to accomplish it.One of the biggest problems with apps is that if they have more than a few features they may not be very easy to learn.That’s not to say that no one in the real world learns how to use it. It gets great reviews and isconsistently a best seller. But I have to wonder how many people who bought it have never masteredit, or how many more sales they could make if it were easier to learn.There’s one more attribute that’s important: memorability. Once you’ve figured out how to use an app,will you remember how to use it the next time you try or will you have to start over again fromscratch?Usability testing on mobile devicesHere are some of the issues you have to deal with:Do you need to let the participants use their own devices?Do they need to hold the device naturally, or can it be sitting on a table or propped up on a stand?What do the observers need to see (e.g., just the screen, or both the screen and the participant’s fingers so they can see their gestures)? And how do you display it in the observation room?How do you create a recording?Until better technology-based solutions come along, here’s what I’d lean toward:Use a camera pointed at the screen instead of mirroring.Attach the camera to the device so the user can hold it naturally.Don’t bother with a camera pointed at the participant.Chapter 11. Usability as common courtesy(绅士)Here are a few of the things that tend to make users feel like the people publishing a site don’t have their best interests at heart(避免做以下的事):Hiding information that I want. The most common things to hide are customer support phone numbers, shipping rates, and prices.Punishing me for not doing things your way. I should never have to think about formatting data: whether or not to put dashes in my Social Security number, spaces in my credit card number, or parentheses in my phone number.Asking me for information you don’t really need.Shucking and jiving me. We’re always on the lookout for faux sincerity, and disingenuous attempts to convince me that you care about me can be particularly annoying.Putting sizzle in my way. Having to wade through pages bloated with feel-good marketing photos makes it clear that you don’t understand—or care—that I’m in a hurry.Your site looks amateurish. You can lose goodwill if your site looks sloppy, disorganized, or unprofessional, like no effort has gone into making it presentable.The good news is that even if you make mistakes, it’s possible to restore my goodwill by doing things that convince me that you do have my interests at heart. Most of these are just the flip side of the other list:Know the main things that people want to do on your site and make them obvious andeasTell me what I want to know.Save me steps wherever you can. ...

用户体验（User Experience，简称UX 或是UE），它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。初衷写这篇文章的初衷呢是因为前段时间的项目重构，作为前端工程师（本人专业前端划水）发现原项目以前不是很注重产品的用户体验，UI设计比较糟糕、交互及交互反馈也没有考虑，响应速度也有待提高。总之，就是就是能用，好不好用用户知道。第二个原因是自己也没有涉猎这块的书籍或文章，直到看到网易UEDC的网站网易UEDC，里面有很多关于UI设计、交互设计及用户体验的文章，走马观花式的看了十来篇，有些文章还是说的很好的（剩下的个人觉得不算干货，也可能是自己菜看不懂，其实干货的文章也有所保留，有些精华人家当然不会分享了，点到为止），再加上平时生活中用的网易的产品或游戏从产品文案到UI到交互到性能都是非常棒的~（码字的时候正在使用网易云音乐，多一句嘴，网易云音乐最好的地方就是产品内容，喜欢那些推荐的歌单）所以希望自己做的东西也能像别人家的那样，于是就想写这样一篇文章，写文章的过程会不断的查阅相关书籍和网络资源来提升自己，文章完成也能分享给大家，希望读者能从这微不足道的言语中获得一些东西。但是这类文章容易写着写着写成假大空，也没有所以我文字尽量精简，多举证。推荐书籍《破茧成蝶：用户体验设计师的成长之路》《写给大家看的设计书》重要说明：本人职业是前端划水，本文只是一些学习心得或者个人经验，可适用于一些UX不是很好的网站获得一些建议，不能拔高，并非专业一、用户体验核心是用户1. 用户心理学首先，用户体验是围绕用户来说的，如果对用户一无所知，谈何做出用户喜欢的产品。比如我要做一款针对小学生的产品，我自己对00后的小学生可以说是一无所知了，那我第一步不是去做产品，而是去研究00后，研究他们的行为习惯、心理特征、消费心理等等。【用户习惯】习惯在用户体验中是必须考虑的因素，因为，习惯几乎是每个人都会有的，比如浏览网页（个人偏向PC端，这里以PC端网页为例）的习惯，著名的F型浏览模式：图一（图片来源百度）首先：通过点击链接或地址栏输入网址打开一个网页，从空白页到DOM元素渲染完成（一般情况都是同时渲染完成，这里不考虑极端情况），页面印入眼帘，习惯性的目光聚焦在第一行，这是为什么？因为一般人的阅读习惯都是自上而下，这种习惯具体追溯到哪，我也不知道，就我或者说大多数人而言，上学的时候书本内容是自上而下、自左而右的。另外，很多网站都有导航栏，而且一般都在网页顶部，这种设计也是迎合用户阅读习惯的，久而久之，导航栏在顶部也成了约定成俗的设计。后来者的设计也会参考前者的习惯，假如世界上首个网页导航栏在右侧，久而久之，导航栏在右侧才是现在的主流设计。图二（图片来源：为什么喜欢运用F型浏览模式来设计网站界面）从图二看，① 跟 ③被阅读到的可能性大于2、4，而1又大于3，一般情况下，1的位置放什么内容，logo，答对啦，你真聪明。比较成功的logo设计很容易让人一眼就铭记于心的，就像迪丽热巴的脸，过目不忘。这个例子就不说了，某东、某宝大部分网站都是这样的。然后1->3的位置出现菜单的也相对算多，尤其是那种管理类网站，这种布局不要太经典，经典到好用，没有审美疲劳…说是F，第二横的话一般指一些具体内容,如图一。正文内容的话，出现网格排布的list也是很多的，比如百度图片、某东、宝具体商品，以图片流式布局或网格线排布。但整个网页无导航无菜单的纯流式或网格排布的网站平常见的相对较少。这里只是说习惯性的设计，倒不是说非习惯性设计就是失败的作品。人是有惰性的，你要驱使他改变，你就要付出代价。威逼利诱这个词，emmmmmm，比如说你家儿子（嗯，祝你生个儿子然后给他买房，而我选择生女儿）习惯用铅笔写字，后来升学了得用钢笔写，他写不习惯不想写，你可以给他糖或者揍他让他学着用钢笔。用户也是一样的，什么？看完这篇文章答对几个问题就能拿奖金？虽然内容是自下而上的，自右而左的，但是老夫看的心甘情愿啊。或者高考试卷倒过来看？没问题啊，我看还不行吗…所以说，创新设计一定要做好权衡利弊然后判断设计是否得当，甚至可以搜集用户感受以便改变这里废话有点多，担待…内容参考及推荐阅读：什么是F型浏览模式？从F型网页浏览看用户对网页的浏览习惯比如：无法想象体验者的心情…但是，创新的东西有时候会需要打破习惯，如果打破这种习惯仍然能正常使用该产品，权衡之后，利大于弊则可以算是过关的创新，具体效果当然得看具体设计。比如：跟普通热水壶整体相差不大，握把设计略有差别，一般情况下使用区别不大，如果烧水位置比较高需要手举放上去，会不如普通握把方便，一般也没谁烧个水会放在比自己个子还高的地方。然后形象比较活泼可爱像大象，出水口够高没有生活常识的人装满烧水都不容易喷溅【用户目标】小时候都知道写作文要突出中心思想，这个快节奏年代，直入主题很重要，尤其是功能性网站（展示类另说），没人跟你墨迹，精简才是王道。（精简之上可以辅助美化细节）举个反例：前段时间看世界杯大家没少看广告，有一款黄轩代言的马某窝，全程就几句台词循环，关键是最后也没说一些产品重点，原词大概是这样的：A：旅游之前B: 为什么要上马某窝A：旅游之前B: 为什么要上马某窝A：旅游之前B: 为什么要上马某窝A：旅游之前B: 嗷嗷嗷我真的，无力吐槽，只能感叹你们真是钱多的没地方花，有本事来拿钱羞辱我啊（滑稽）。旅游相关的产品不要太多，你倒是说你的优点、特性什么的啊，嗷个jer…，到底还是有钱了再举个正面例子：记忆力有限，平时看到广告偶尔会思考下，还是看到过很多设计非常棒的广告的，奈何没有用小本本记下来，记忆力也不好。就记得彩虹糖有一款鹿吃彩虹拉彩虹糖的，记忆犹新。广告词叫：遇上彩虹，吃定彩虹（大概）还有我女神桂纶镁和男神彭于晏一起演的益达口香糖。（暴露年龄了）广告词：饭后嚼两粒（大概），故事性很强，比较有意思同时直入主题，饭后吃益达口香糖有益健康。还有一种，循环三遍，也是一句话X3的，但是人家目的明确，虽不美观，但也达到目的了，洗脑式植入，有时候莫名就记住了。【产品目标用户信息收集】说实话，之前做项目都是顺带考虑UX的，最多的就是换位思考，站在用户的角度考虑问题，揣摩用户的心思。总体来说就是没有一个严格又标准的流程，比较业余。书里(破茧成蝶)说道，揣摩用户的心思远远不够，你不可能完整的想到别人在想什么，所以还需要去体验用户的生活。当然，这个用户是我们产品的目标用户，不然你的产品是给学生用的，你去体验老大爷喝茶下象棋的生活（舒服啊老公）收集信息比较常见的方式就是问卷了，以前是纸质问卷，现在网页问卷不要太方便。很多产品用户第一次使用的时候会有一个是否加入用户体验优化计划的，勾选的用户会在一些产品阶段收到UX问卷调查（机制的我从来不勾-懒）其他方式我就不介绍了，请自行思考…然后把收集到的信息分析整合到需求中，错误的分析得到错误的结果后果很严重啊，直接影响产品质量…（比如我，一般问卷我是懒得填的，有时候需要应付就随便写写，你认真分析的对象都是假的，慎重…）【关于用户的一些事要权衡好利弊】（字数好像有点多，后面精简精简我不是写书我是写文章，阿弥陀佛）关于一个交互，A说单击好B说单击不好，C说了一些鸡毛蒜皮或者不相关的小事，D提了一条天马行空的建议，EFG…其实可能有些比较靠谱的建议，也不要一下就肯定，还需要考虑一些开发周期开发成本等问题，付出全组程序员三个月全部精力改善了产品某出体验，产品质量提升千分之一（比方里的数据都是随意捏造，为了表达意思可能夸张，真实数据我会说明，下同）所以说需要权衡2. 人接收信息的方式既然研究好了目标用户，那么我们需要了解下如何把我们的表达传递给用户。谷歌了下人接收信息的途径及使用占比，数据都是别人调研的，具体多少权威我不敢说，配合我们自己的生活工作体验该数据仅供参考，如图：最主要的就是视觉了，83的占比可以说是绝对地位了，我又要打比方了，比如两个小说网站，A的界面比较杂乱，字体、字体大小、字体颜色、模块背景颜色都很乱，不方便获得信息，B网站主题色，各级字体及大小都设计的赏心悦目，UX很直观的不在一个档次了。所以，从我上小学的时候看到的接近0css的网页到现在所想即所得的网页效果，网页的‘脸’也是越来越好看了。然后听觉也占了一定比例，给我印象最多的就是web或H5的背景音乐，还有交互时候的声音，还有音乐网站、视频网站类的。从声音能想到跟UX有关的就是是否需要声音、声音大小、声音是否应景（一个可爱风格的运营活动H5 你放一首DJ，霓虹风格的运营活动界面你放山歌，合适吗对吧）等关于嗅觉、触觉、味觉，目前跟网页好像没啥关系，相信在以后会应用到，比如餐厅的订餐系统网页，不仅提供菜肴的图片还能闻到菜肴的香味（真香警告）二、从UI提升UX从第一章我们可以了解到，人接收信息有百分之83是通过视觉来获得的，那么你的网页就有83%左右的信息是通过视觉传递给用户的（这里不要咬文嚼字啊，83只是一个网络调研数值，还是广义上的，意义在于视觉是一个绝对地位需要高度重视的点，如果你要具体到你的产品，啊，我们的产品网站是做音乐的，80%信息都是通过听觉传递给用户，你这瞎说不靠谱。我只想说，你怕是在刁难我小猪佩奇）根据从业经验及相关书籍我从以下几个方面简单说明下：1. 产品文案我不确定把产品文案划分到UI类中会不会有点不妥，我理解的是产品文案是直观、直接的形式把信息分享给用户，而其他几个方面都是间接的传递，比如背景高亮，用户能观察到这个元素跟其他不一样，自然会提高关注度或者说用户可以很快知道自己当前选中的元素等等。我这里说的文案指文字内容，不是指字体表现形式，字体属于单独一个模块。产品文案不仅是网站中很常见的元素之一，而且是生活中随处可见的，没错，就是广告了，上面我也举例说了文案相关的。我想说的几点有篇文章已经概括的很好了，而且举证很多，比较有说服力UI设计师对广告文案的思考：我们，真的不需要懂文案吗？2. 颜色颜色也是构成网站重要的元素之一。颜色有独立的象征、寓意我们常见的网站比如思否、京东、网易等等有一个共同点，就是有主题色，包括我自己在做的，也有主题色。多次的使用同一种颜色符合【重复】的设计原则（Bootstrap、element-ui等一些UI库也有）(图片来自《写给大家看的设计书》截图)首先这种颜色一定是要让人觉得舒适，因为会频繁使用，比如黄色这种，太艳、刺眼，当主题色很容易让人不舒服（当然，如果你的网站定位就是很燥的前卫的也可以，但是会筛选掉一批用户，这批用户大多数都不是你们的目标用户），然后主题色基本就定格了你的网站的风格，比如你是一家低调奢华的XX公司，主题色选了个粉色，效果就不言而喻了。而主题色选的好的，很容易形成特点让人记住主题色配上辅色，会让网站更有层次感，主题色的内容会更突出。然后颜色不要太多，如果你的网站用了七八上十重颜色，用户一眼看去肯定不会觉得：哇，彩虹哎 ， 而是觉得： 卧槽、好乱~ 颜色分深色浅色，经常会见到浅色搭配深色类似这种的。效果还不错。而且还有很多字体颜色的深浅可以体现出想表达的权重，浅灰色的字体常常用作辅助文字（用书里的话说叫亮色暗色）亮色暗色3. 字体这块我是盲的，有点高深。推荐两篇网易uedc说字体的文章，我只能懂一点点。字体图形化设计小谈、字体的性格更多的请阅读《写给大家看的设计书》字体篇，写的很详细。4. 布局常见的布局什么的，其实都是上中下左中右的搭配，比如XXX管理系统：（图片来自百度图片）比较符合习惯性的阅读方式也就是F型浏览模式，也有叫F型布局的，这一看就能看到个F，也是比较符合大众’审美’的布局（习惯）。不过这种XXX系统的网站基本都是相关人员在操作的，保持页面逻辑清晰就好了，一般做这种系统的项目他们也不会太care UX。然后还有一些诸如：对称布局、几何图形布局、网格线布局等等这是整体上的布局，没什么好说的，看UI组的能力了，再往细看，就具体到模块的【对齐】：模块内布局左对齐这一块没啥好说的，基本上的网站都能遵循到这一原则，如果一个内容较多的网站连一处对齐都没有，这个网站简直没法看。就连CMS建站工具都能做到。【亲密性】：红线标记的是一块内容，一篇文章的一些属性：标签、标题、配图、内容、点赞、作者、发布时间等信息好了，让我这个小恶魔来搞点事情这样看，你知道这个点赞这个标签是哪篇文章的吗？这就是违反亲密性原则的反例。反例是强有力的证明手段，我喜欢举反例。违反亲密性原则的网站会让用户感到迷惑，从而降低用户体验，不能匹配去找对应元素的相关信息。上面的列表例子，模块内间距等于甚至大于模块间间距的时候，这就很容易让用户对应错信息，之前的视频列表我有考虑到此原则。【重复】：说颜色的时候说到了，主题色符合重复性的设计原则，重申一次（图片来自《写给大家看的设计书》）形状（圆角）的重复使用，刚毕业那年第一次来到SF社区就觉得，啊这个主题色我喜欢，这个UI风格我喜欢，于是就定居于SF了，偶尔写写东西看看别人的分享。后来SF的app端UI风格大改，很难看，原来的好看多了。后来app就用的少了。这个的反例不是很容易想到，大家有推荐的可以评论区说出来 我补上…感谢~【对比】：加了一段css后* { font-size: 15px!important; color: #666 !important; font-family: ‘微软雅黑’!important; background: #fff !important; font-weight: normal !important;}对比前面一张图片来看，去掉了字体大小种类颜色粗细的对比、改变了背景色对比，显然，这样的网站一眼望去，抓不到重点，而且样式太单调，让人审美疲劳，想找个需要的内容都不能很快找到，这里涉及到一个速度问题，速度分两类，一是视觉反馈速度（比如页面渲染、用户操作后的事件处理及反馈）这个会在后面单独一个章节说到、二是用户获取信息速度（用户是带着目的或者潜意识都带着目的来的，通过他们的感官获取需要的感兴趣的信息，这个读取信息的过程的快慢）这是设计类的书籍（《写给大家看的设计书》），关于用户获取信息的速度而影响到主观感受是我做的延伸。对比可以让UI具有一定丰富性，防止页面太多相同处、主观感受略压抑，可以突出重点方便用户获取所需信息，从而降低消耗时间长带来的负面情绪。关于UI这块强烈推荐《写给大家看的设计书》，通俗易懂很实用。就算你要设计一些很酷有创意的东西，应用到这本书上的东西肯定会更出色的。三、关于速度1. 首次渲染速度人们的生活节奏是越来越快了，小时候感觉日子很长可以无忧无虑的玩，后来上了大学后，日子呲溜一下就跑过去了。小时候上网是件新鲜事，能看就不错了，现在上网几乎跟呼吸一样正常，因为快节奏的生活和频繁的上网，导致用户对网页的要求越来越高，不管是好看层面的还是时间层面的，大家都希望愉快又节省时间的在网站上搞定自己的需求。首页或者说首屏是打开网页的第一印象，如果这个首屏姗姗而来，让你等半天，再美的网页也没那么美了吧。关于性能优化这些都是向BAT和类BAT看齐，因为大多数网站都不会有这类公司需求高。他们一个网站信息量这么大，依然可以做到首页秒开。网上关于他们的首页或首屏加载方案有很多，大家可以自行搜索查阅，我就不再赘述了，再多写字我都发现我在写书了，手动滑稽。2. 动画速度还记得小时候只有HTML没有css的网页吗，基本上只有一些线条和间距围绕内容的网页，慢慢的，技术在发展，到如今各种炫酷的网站。css3、canvas、three.js等等这类已经很常见了。但是，关于动画，我想说，不管你是做什么动画，都要考虑时间问题（展示类网站除外），这是用户的成本，效果固然重要，但绝不能以消耗过多成本为代价。另外一点，人的肉眼有视觉停留，只能观察到0.1s及以上的动画，如果你的动画时间低于0.1s，可以说是多余的了。做过的动画有很多，经常会在各个时间值之间切换尝试，寻找一个视觉上过渡的最佳时间同时节约用户时间成本。当然，我选的也并不一定就是最佳的。只能说我尽量往这个无标准的最佳靠近。举个例子，比如我点击SF的右上角的创建>写文章，他给我来个3、5秒的酷炫动画，然后我才能开始码字，你说我气不气，嗯，可以说是很气了。尤其是频繁的操作，如果夹杂很长的动画，应该会让人抓狂吧。所以，动画的时间需要花时间斟酌好，既能表现你想表现的效果同时兼顾用户的时间成本。为什么精简的设计风格在任何设计领域始终占有一席之地，首先，精简风格有它的美，另外，节约时间绝对是它吸引人的优点之一，可能很多人自己都没意识到这一点，喜欢简单直接，这可以是潜意识的也可以是有意识的。tips：当你页面信息量很大时，一定要注重好UI设计尤其是布局。对于非专业的设计，我们前端只是辅助设计将网页更好的呈现，如果部分公司没有设计需要自己动手的话，看一些设计类的书籍加上模仿的话应该也能应付的过去。区分一下抄袭和模仿，把别人的框架布局拿来然后往里面填充自己的内容叫抄袭，学习别人的设计优点之处、融合到自己的设计，融合的得当，符合自己的内容及风格可以算是模仿。（个人理解）3. 用户操作的视觉反馈及响应速度当用户进行一些页面上的操作，需要我们给出视觉反馈。比如：鼠标悬停的时候对应按钮下会出现背景色且鼠标指针变成小手（截图截不到这个代替下见谅哈），反馈给用户的信息就是：你当前处在首页按钮上，点击会跳转到首页而不是问答页。而且背景色块和小手给人一种心理暗示：这是一个按钮，可以点击的。如果没有这些视觉反馈，当用户移动到首页跟问答按钮中间的时候（如上图红色方框），他以为（没有像素眼的用户）点击可以去到首页，结果事与愿违去到了问答页，这可能是属于用户操作失误类的，但是你没有利用代码或者其他手段尽量去帮助用户更好的操作。希望你正确的去做视觉反馈而不是这样：悬浮前：悬浮后：说实话，很尴尬。如果说hover的效果把颜色改掉应该好很多。这样去掉样式不知道什么样的脑瓜子想出来的。有一些操作可能确实没有任何需要反馈的，可以考虑是否需要一些tips去提升他的操作是成功还是失败的状态。然后还有，比如，点击某个按钮切换展示不同的模块，JS要处理逻辑、页面要局部重新渲染，或者有什么需要去后台请求才能拿到的东西。这个响应分两类：发请求和不发请求不发请求的情况下：理想的响应时间是100ms内，这个在《高性能JavaScript》书中快速响应的用户界面章节有说到，如果懒得找书可以参考我之前的文章高性能JavaScript整理总结发请求的情况下：遵循2、5、10原则，相关文章请自行搜索。四、用户体验地图当我了解到有用户体验地图这一块的时候，我才发现UX这类看似没有衡量标准的东西，在专业的人手里是有标准有规范有流程的，后来才知道有专业的UX书籍，比如《破茧成蝶》，所以觉得UX这个东西我不能只停留在主观上去想一些办法优化而没有具体手段具体流程，当然，写这篇文章我也只是阅读并参考部分内容。暂时没精力去了解太多。交互设计知识点——用户体验地图我觉得这篇文章把用户体验地图说的很好了，可以看下。（图片来自上文）五、前端er可以用到的一些方法（建议）可能对于上面那些叽叽歪歪的废话而言，这章应该是目的性很强的读者比较愿意一看的内容了，所以我也尽量整理好分享给大家： 1. 一个有辨识度设计得当的标签页icon，如果是经常访问的用户这样容易培养感情容易记住，好感度+1 2. 一个目录直观清晰、层次分明的导航条可以带领用户更好的玩转你的网站，好感度+1 3. 一个高亮的背景色块让用户自己自己处于什么位置，好感度+1 4. 鼠标悬停时高亮当前元素背景色，颜色浅于已选中背景色色值，有助于区分，好感度+1 5. 图片不要忘记设置alt属性，当资源丢失时，可以进行这张图片的文字说明，好感度+1 6. 能用css或者图标字体实现的效果就避免使用图片，性能+1，速度+1，流量+1，好感度+1 7. 用心推敲你的产品文案，表达清晰、通俗易懂不晦涩、贴近环境风格、幽默，好感度+1 8. 避免使用过多的颜色，同样避免颜色单一单调，好感度+1 9. 颜色的亮色暗色搭配使用，对比突出亮色，容易抓住重点，好感度+1 10. 布局得当，方便阅读，千万不要做些反人类的设计，好感度+1 11. 巧妙、合理的使用对齐原则，不要乱用，网页内需要相同也需要不同，好感度+1 12. 遵循亲密性原则，逻辑单元内亲近，单元之间保持距离以示区分，好感度+1 13. 重复使用一些字体以增加条理性和统一性，用非重复字体突出特殊文字的特殊性。方便抓住重点。好感度+1 14. 把握好每个动画的时间，效果得当且节约用户时间成本，好感度+1 15. 使用的图片像素大小准确，避免图片模糊效果不佳或者浪费带宽浪费时间浪费性能，好感度+1 16. 一个表意清晰、大小、空间得当的logo（如果需要的话），跟标签页icon类似，好感度+1 17. 在需要的地方设置title属性，尤其是使用了css的三个点属性的地方（正文除外），进行友好提示，好感度+1 18. 同样可以使用字号大小的对比来实现已选中状态，避免当色块对比过多的情况，好感度+1 19. 当一些图片或内容可能有些晦涩难懂时，在旁边注上小小的浅色的文字说明，好感度+1 20. 检查代码逻辑，优化复杂逻辑代码，减少js执行时间，减少用户等待时间，好感度+1 21. 针对比较慢的请求，建议后端人员进行SQL优化，减少等待时间，好感度+1 22. 简化复杂的操作流程，不要把用户想的太聪明，简单的操作更适合用户，好感度+1 23. 处理浏览器兼容性问题，避免用户遇到异常情况，好感度+1 24. 不要忽视颜色的默认寓意，比如绿色常常代表成功，黄色警告，红色错误等等，切记不要用混，好感度+1 25. 适当的替用户做主，减少用户操作，好感度+1六、一些设计、交互细节值得借鉴的网站推荐个网站：一些不错的网站汇总永远保持学习的心态，别人做的好的地方去观摩去学习去借鉴。总结：UX看起来好像跟代码关系不是很多，但是想做好是需要花时间花心思的，当然也离不开代码技术的支持。但是，很多公司很多项目都只追求数量，不停的需求迭代，开发新功能，开发时间有限。所以开发计划里面没有排UX的时间，他们的时间只够你开发功能的。这个时候希望大家在开发功能的时候可以顺手做一些能做到的UX优化的事，至于更多的，时间不允许的话，我们也只能just so so了，尽力就好。【注】：内容有不当或者错误处请指正转载请注明出处谢谢合作！ ...