我们中的一些人只是在UI设计的软方面遇到了困难(尤其是我自己)。“后端编码器”注定只设计业务逻辑和数据层吗?我们是否可以做些什么来重新训练我们的大脑,使其更有效地设计出令人愉悦和有用的演示层?

同事们给我推荐了《网站设计》、《不要让我思考》、《为什么软件很糟糕》等几本书,但我想知道其他人在这方面做了什么来弥补他们的不足?


当前回答

UI设计很难

对于这个问题:

为什么UI设计对大多数开发者来说如此困难?

试着问相反的问题:

为什么编程对大多数UI设计师来说如此困难?

编写UI和设计UI需要不同的技能和不同的心态。UI设计对于大多数开发人员来说是困难的,就像编写代码对于大多数设计师来说是困难的一样。

编码很难。设计也很难。很少有人两者都做得很好。优秀的UI设计师很少编写代码。他们甚至不知道怎么做,但他们仍然是优秀的设计师。那么,为什么优秀的开发者觉得自己要对UI设计负责呢?

了解更多关于UI设计的知识会让你成为更好的开发人员,但这并不意味着你应该对UI设计负责。对于设计师来说,情况正好相反:知道如何编写代码将使他们成为更好的设计师,但这并不意味着他们应该负责编写UI代码。

如何更好地进行UI设计

对于那些想要更好地进行UI设计的开发者,我有3条基本建议:

Recognize design as a separate skill. Coding and design are separate but related. UI design is not a subset of coding. It requires a different mindset, knowledge base, and skill group. There are people out there who focus on UI design. Learn about design. At least a little bit. Try to learn a few of the design concepts and techniques from the long list below. If you are more ambitious, read some books, attend a conference, take a class, get a degree. There are lot of ways to learn about design. Joel Spolky's book on UI design is a good primer for developers, but there's a lot more to it and that's where designers come into the picture. Work with designers. Good designers, if you can. People who do this work go by various titles. Today, the most common titles are User Experience Designer (UXD), Information Architect (IA), Interaction Designer(ID), and Usability Engineer. They think about design as much as you think about code. You can learn a lot from them, and they from you. Work with them however you can. Find people with these skills in your company. Maybe you need to hire someone. Or go to some conferences, attend webinars, and spend time in the UXD/IA/ID world.

这里有一些具体的事情你可以学习。不要什么都学。如果你了解以下所有内容,你就可以称自己为交互设计师或信息架构师。从清单顶部的事情开始。专注于特定的概念和技能。然后向下延伸。如果你真的喜欢这些东西,就把它当做职业道路吧。许多开发人员转向管理,但用户体验设计是另一种选择。

Learn fundamental design concepts. You should know about affordances, visibility, feedback, mappings, Fitt's law, poka-yokes, and more. I recommend reading The Design of Everyday Things (Don Norman) and Universal Principles of Design (Lidwell, Holden, & Butler) Learn about user experience. This is becoming the umbrella term for the human-centered design of web sites, applications, and any other digital artifact. The classic primer here is The elements of User Experience (Jesse James Garrett). You can get an overview and the first few chapters from the author's site. Learn to sketch designs. Sketching is fast way to explore design options and find the right design, whereas usability testing is about getting the design right. Paper prototyping is fast, cheap, and effective during the early design stages. Much faster than coding a digital prototype. The key text here is Sketching User Experience: Getting the design right and the right design (Bill Buxton). Sketching is a particularly useful skill when working with IA/ID/UX designers. Your collaboration will be more effective. For a good primer on how and why designers sketch, watch the presentation How to be a UX team of one by Leah Buley from the 2008 IA Summit. Learn paper prototyping. The fastest way to iteratively test an interface before you write code. Different from sketching and usability testing. The definitive book here is Paper Prototyping (Carolyn Snyder). You can get a good DVD on this from the Nielsen Norman Group. Learn usability testing. Discount testing is easy and effective. But for many UIs, usability is hard to do well. You can learn the basics quickly, but good usability people are invaluable. If you want a book, the classic is The Handbook of Usability Testing (Jeffrey Rubin). It's older but offers thorough coverage of lab-based testing. The famous starter book is Don't Make Me Think (2nd Ed) (Steve Krug). I caution people about this one: Krug makes it sound easier than it is. But it is a good starting point. The user research books listed in the next point also cover this topic. And you can find piles about it online. Learn about information architecture. The main book here is Information Architecture for the World Wide Web (3rd) (Louis Rosenfeld & Peter Morville). A good starter book is Information Architecture: Blueprints for the Web (Christina Wodtke). For more, visit the Information Architecture Institute or attend the annual Information Architecture Summit. Learn about interaction design. The main book here is The Essentials of Interaction Design (3rd) (Alan Cooper, et al). A good starter book is Designing for interaction (Dan Saffer). For more, visit the Interaction Design Association (IxDA) or attend the annual Interaction Design conference. Learn fundamentals of graphic design. Graphic design is not UI design, but concepts from graphic design can improve an interface. Graphic design introduces design principles for the visual presentation of information, such as proximity, alignment, and small multiples. I recommend reading The non-designer's design book (Robin Williams) and Envisioning Information (Edward Tufte) Learn to do user research. Where usability tests an interface, user research tries to model users and their tasks through personas, scenarios, user journeys, and other documents. It's about understanding users and what they do, then using that to inform the design instead of guessing. Some techniques are interviews, surveys, diary studies, and cart sorting. Good books on this are Observing the User Experience (Mike Kuniavsky) and Understanding Your Users (Courage & Baxter) Learn to do field research. Watching people in the lab under artificial conditions helps (ie: usability), but there is nothing like watching people use your code in context: their home, their office, or wherever they use it. Goes by various names, including ethnography, field studies, and contextual inquiry. Here is a good primer on field research. Two of the better known books here are Rapid Contextual Design (Karen Holtzblatt et al) and User and task analysis for interface design (Hackos & Redish). Read UX design web sites. Some of the big ones are Boxes & Arrows, UX Mag, UX Matters, and Digital Web magazine. Use UI pattern libraries. There are patterns for interfaces. For web sites, I recommend The Design of Sites, 2nd ed (Van Duyne, et al) and Homepage usability: 50 websites deconstructed (Jakob Nielsen & Marie Tahir). For desktop applications I recommend Designing interfaces (Jennifer Tidwell), and for web applications I recommend Designing Web Interfaces: Principles and Patterns for Rich Interactions (Bill Scott & Theresa Neil). Online you should check Welie pattern library, UI patterns, and Web UI patterns. Attend UX design conferences. Some good annual conferences are: Information Architecture Summit, Interaction '09 (IxDA), User Interface, and UX week. Attend a workshop or webinar. You can take workshops, webinars, and online courses. This is far from a comprehensive list, but you might try the UIE virtual seminars, Adaptive Path virtual seminars, and UX webinars from Rosenfeld Media. Get a degree. A graduate degree in HCI is one approach, but these programs are mostly about writing coding. If you want to learn about the design of digital artifacts and devices, then you want a graduate program that's not in CS. Some options include Interaction Design at Carnegie Mellon, the d-School at Stanford, the ITP program at NYU, and Information Architecture & Knowledge Management at Kent State (disclosure: I'm on faculty at Kent; we are seeing more and more people with CS degrees moving into UX design instead of management, which is interesting, because management is the traditional path for developers who want to move away from writing code while staying in their field). There are many more programs. Each has their own perspective, areas of emphasis, and technical expectations. Some come out of the arts and visual design, others out of library and information science, and some from CS. Most are hybrids, but every hybrid has deeper roots in one or more fields. If this interests you, look around and try to understand the differences between these programs. Some offer online courses and certificate programs in addition to full-fledged degrees.

为什么UI设计很难

优秀的UI设计很难,因为它涉及到两种截然不同的技能:

A deep understanding of the machine. People in this group worry about code first, people second. They have deep technological knowledge and skill. We call them developers, programmers, engineers, and so forth. A deep understanding of people and design: People in this group worry about people first, code second. They have deep knowledge of how people interact with information, computers, and the world around them. We call them user experience designers, information architects, interaction designers, usability engineers, and so forth.

这就是这两个群体——开发者和设计师之间的本质区别:

Developers make it work. They implement the functionality on your TiVo, your iPhone, your favorite website, etc. They make sure it actually does what it is supposed to do. Their highest priority is making it work. Designers make people love it. They figure out how to interact with it, how it should look, and how it should feel. They design the experience of using the application, the web site, the device. Their highest priority is making you fall in love with what developers make. This is what is meant by user experience, and it's not the same as brand experience.

此外,编程和设计需要不同的心态,而不仅仅是不同的知识和技能。优秀的UI设计需要两种心态、两种知识基础和两种技能。而掌握其中任何一种都需要数年时间。

开发人员会发现UI设计很难,就像UI设计师会发现写代码很难一样。

其他回答

我认为这是因为一个好的UI是不符合逻辑的。好的UI是直观的。

软件开发人员通常在“直观”方面表现不佳

说程序在UI设计方面很糟糕是没有抓住重点。问题的关键在于,大多数开发人员所接受的正式培训深入了技术。人机交互不是一个简单的话题。这不是我可以通过提供简单的一行语句让您意识到“哦,如果我使用x而不是y,用户将更有效地使用这个应用程序”来“思想融合”的东西。

这是因为你忽略了UI设计的一部分。人类的大脑。为了理解如何设计UI,你必须理解人的思想如何与机器交互。我在明尼苏达大学上过一门关于这个话题的很棒的课程,是一位心理学教授教的。它被命名为“人机交互”。这描述了UI设计如此复杂的许多原因。

因为心理学是基于相关性而不是因果关系,你永远无法证明UI设计方法总是适用于任何给定的情况。你可以认为许多用户会发现某个特定的UI设计很吸引人或高效,但你不能证明它总是具有普遍性。

此外,UI设计中有两个部分似乎被许多人忽略了,那就是美学吸引力和功能工作流。如果你追求100%的美感,人们肯定会买你的产品。但我非常怀疑美学能否减少用户的挫败感。

有几本关于这个主题的好书和课程可供选择(如Bill Buxton的《素描用户体验》和Edwin Hutchins的《野外认知》)。许多大学都开设了人机交互的研究生课程。

这个问题的总体答案在于如何教授个人计算机科学。这一切都是基于数学和逻辑,而不是基于用户体验。要做到这一点,你需要的不仅仅是一个普通的4年计算机科学学位(除非你的4年计算机科学学位副修心理学,并强调人机交互)。

与流行的神话相反,在UI设计中实际上没有软方面,至少不需要设计一个好的后端。

考虑以下几点;优秀的后端设计是基于任何优秀开发者都熟悉的原则和元素:

低耦合 高内聚 架构模式 行业最佳实践 等

好的后端设计通常是通过一系列交互产生的,基于测试或实际使用期间获得的可测量反馈,初始蓝图会逐渐改进。有时候,你需要对后端较小的方面进行原型设计,然后单独进行测试等等。

优秀的UI设计是基于以下合理的原则:

可见性 功能可见性 反馈 宽容 简单 一致性 结构

UI也是通过测试和试验,通过迭代诞生的,但不是用编译器+自动化测试套装,而是人。与后端类似,有行业最佳实践、测量和评估技术、考虑UI的方法,并根据用户模型、系统图像、设计师模型、结构模型、功能模型等设定目标。

设计UI所需的技能与设计后端是完全不同的,因此不要指望不先学习就能做出好的UI。然而,这两种活动的共同之处是设计过程。我相信只要花点时间学习,任何能设计好软件的人都有能力设计好UI。

我建议你选一门人机交互的课程,比如在MIT和耶鲁的网站上找一些在线资料:

麻省理工学院用户界面设计与实现课程

结构模型和功能模型的理解和使用

Thorsten79之前的一篇出色的文章提出了软件开发专家和用户之间的话题,以及他们对软件的理解是如何不同的。人类学习专家区分了功能思维模式和结构思维模式。找到去朋友家的路是两者区别的一个很好的例子:

First approach includes a set of detailed instructions: take the first exit of the motorway, then after 100 yards turn left etc. This is an example of functional model: list of concrete steps necessary to achieve a certain goal. Functional models are easy to use, they do not require much thinking just a straight forward execution. Obviously there is a penalty for the simplicity: it might not be the most efficient route and any any exceptional situation (i.e. a traffic diversion) can easilly lead to a complete failure. A different way to cope with the task is to build a structural mental model. In our example that would be a map that conveyes a lot of information about the internal structure of the "task object". From understanding the map and relative locations of our and friend's house we can deduct the functional model (the route). Obviously it's requires more effort, but much more reliable way of completing the task in spite of the possible deviations.

通过UI传递功能模型或结构模型(例如,向导模式还是高级模式)之间的选择并不像Thorsten79的帖子中看起来那样简单。高级和频繁的用户可能更喜欢结构模型,而偶尔或缺乏经验的用户-功能。

谷歌地图就是一个很好的例子:它们包括功能和结构模型,许多卫星导航也是如此。

问题的另一个方面是,通过UI呈现的结构模型不能映射到软件的结构,而应该自然地映射到手头的用户任务或涉及的任务对象的结构。

这里的困难在于,许多开发人员对他们的软件内部有一个良好的结构模型,但只有软件旨在协助的用户任务的功能模型。要构建好的UI,你需要理解任务/任务对象结构,并将UI映射到该结构。

无论如何,我仍然强烈建议参加一个正式的HCI课程。这涉及到很多东西,比如启发式,源自格式塔心理学的原则,人类的学习方式等等。

归根结底,这真的是关于同理心——你能站在用户的角度考虑问题吗?

当然,有一件事是有帮助的,那就是“吃你自己的狗粮”——以真正的用户身份使用你的应用程序,看看什么是令人讨厌的。

另一个好主意是找到一种方法来观察使用应用程序的真实用户,这可能是一个复杂的可用性实验室,有单向反射镜、屏幕视频捕捉、用户身上的摄像机等,也可能是简单的纸上原型,使用下一个碰巧走过大厅的人。

如果所有这些都失败了,请记住,UI过于简单总是比过于复杂要好。我们很容易说“哦,我知道如何解决这个问题,我只要添加一个复选框,这样用户就可以决定他们喜欢哪种模式”。很快你的UI就太复杂了。选择一个默认模式,并使首选项设置为高级配置选项。或者干脆不提。

如果你读了很多关于设计的书,你很容易就会被阴影和圆角等问题所困扰。那不是重要的东西。简单性和可发现性非常重要。

我相信所有CS程序员都有能力做出好的可用性设计,因为可用性设计要求开发人员按照特定的路径和规则进行思考。然而,对于一些程序员来说,开发一个好的“有吸引力的”设计几乎是不可能的。这并不意味着两者是不可避免地联系在一起的。这就像莫扎特能写出美妙的音乐,却不擅长足球。