UX 工具集：从商业分析到产品设计方法论总结

Jan 06, 2018 / 评论(0) / 工作

此文篇幅较长，建议你有足够空闲时间阅读（Ctrl+D 添加浏览器收藏），开篇简单介绍UX设计的大致流程，然后再详细叙述。

一直想整理完整的有关UX设计的文档信息，年中因为工作原因在小组内部进行分享的准备中找到来自 @maitedalila 整理过的资料¹ 。而这些也正式我想整理的有关UX设计、启发式评估，以及产品设计工作流相关的文档。于是抽空做了一点翻译工作，但原文依旧保留，同时建议用户更多的去看原文，毕竟每个人的译述水平有限，理解上也存在偏差。

¹ 本文将收集参考一些国外产品经理、UX等的资料进行整理输出。

当发现自己需求池列表很多时，需要开始反思。上面是其中一个方法：多个用户story经过产品思维消化应该转换成更少的requirement。

设计流程（Design Process）

商业分析（Business Analysis）

1、受益人访谈 Stakeholder Interviews

受益人访谈会给到你一些信息并洞察你将从事的领域，这有助于你理解业务目标。
Stakeholders interviews gives you information and insights about the domain you will be working on and will help you understand the business goals and objectives.

2、数据分析 Data Analysis

Qualitative data is gathered through user research: observing people to understand why they do certain things.
Quantitative data is garnered through analytics: identifying what actions users take when they come to a page, and how many users take those actions.

3、Benchmark

Benchmarking establishes the starting point used to compare how your design iterations impact the user experience. When benchmarking, you might want to add a comparative component to better understand how well your site performs compared to your most important competitors.

4、定义目标 Define Goals

用户体验设计正成为商业差异化对象。有效的用户体验必须指向公司目标。我们须定义用户体验如何可以通过符合商业战略的有效策略帮助公司获得成功。
User experience (UX) design is becoming a business differentiator. Effective user experiences must address company goals. We must identify how user experience can help make companies successful with an effective strategy that is aligned with business strategy.

5、市场研究 Market Research

市场研究本质聚焦人们所说的，而不是所做的。我们可以通过这个定义来区分市场研究与用户体验研究。
The essence of market research focuses on what people say, rather than what they do.We can use this definition to help distinguish market research from user experience (UX) research.

6、竞争分析 Competitive Analysis

竞争分析用语找准市场空白及辨识市场机会。
Competitive analysis is used to spot the gaps in the market and identify opportunities.

7、功能分析 Feature Analysis

Map out existing features in a comparable way in order to identify industry standards and areas where you can innovate

用户研究（User Research）

用户研究侧重于通过观察技术、任务分析及其他反馈来理解用户行为、需求及动机的一种方法。
User research focuses on understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies. The process of understanding the impact of design on an audience.

1、角色 Personas

A persona is a representation of a type of customer. Personas answer the question, “Who are we designing for?” and they help to align strategy and goals to specific user groups.

2、任务分析 Task Analysis

Task analysis is a step-by-step analysis of the users’ task, from their perspective.

3、用户路径 User Journey

用户流程是用户在你的网站完成一项预订、商品购买、订阅等任务的路径。
User Journey is the path a user follows through your website interface to complete a task (make a reservation, purchase a product, subscribe to something).

4、故事看板 Storyboard

UX故事看板是有助于用户视觉预期并发现研究产品体验的工具。
UX Storyboarding is a tool that helps a user visually predict and discover a product experience.

5、优先功能 Prioritize Features

MoSCow（Must、Should、Could、Won’t）方法是一种相当简单的用于排列功能（用户故事）优先级的方法，帮助团队快速理解客户期望什么必须做以及什么不该做。
MoSCoW is a fairly simple way to sort features (or user stories) into priority order – a way to help teams quickly understand the customer’s view of what is essential for launch and what is not. MoSCoW stands for Must have, Should have, Could have and Won’t have.

计划：信息架构（Planning：Information Architecture）

Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks.

1、卡片排序 Card sorting

Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups.

2、站点地图 Sitemap

Sitemaps are a hierarchical diagram showing the structure of a website or application. They are used by User Experience Designers and Information Architects to define the taxonomy through grouping of related content

3、用户流 User Flow

It’s the path a user follows through your website interface to complete a task (make a reservation, purchase a product, subscribe to something).

构思阶段（Ideation Phase）

1、参与性设计 Participatory Design

Write down or sketch all the ideas/solutions as a team that you think will solve a specific problem

2、Design studio method

The Design Studio Method is a creative problem solving process that allows you to quickly generate ideas, evaluate them, and reach consensus, achieving that balancing act.

3、疯狂“八步法” Crazy 8s

It’s a fast sketching exercise that challenges people to sketch 8 ideas in 8 minutes (not 8 variations of one idea or 8 steps of one idea, but 8 distinct ideas). The goal is to push beyond your first idea, which is frequently not the most innovative, and generate a wide variety of solutions

4、Round robin

The “Round robin” option is a technique for generating and developing ideas in a group brainstorming setting. It relies on an iterative process building off consecutive contributions by each participants, conducted in either written or verbal variations.

5、糟糕想法 Worst idea

The Worst Possible Idea or Worst Idea technique is not purely an icebreaker-style technique, though, as insights that may stem from really bad ideas may even be useful in generating really great ideas. On that note, it doubles as a—really fun—process of elimination.

原型阶段（Prototyping Phase）

1、线框图 WIREFRAMES

A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX Designers to define the hierarchy of items on a screen and communicate what the items on that page should be based on user needs.

2、原型 Prototyping

Is a representation of the final product. It’s like an interactive mockup that can have any degree of fidelity. The main purpose of building prototypes is to test whether or not the flow of the product is smooth and consistent.

3、启发式评估 Heuristic Evaluation

启发式评估是一种可用性审查方法，可以帮助定位用户UI设计中的可用性问题。它具体涉及了评估人员测试并判断用户界面是否与可公认的可用性原则相符。
A heuristic evaluation is a usability inspection method that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles (the “heuristics”).

4、可用性测试 Usability Testing

Usability testing is used to evaluate a product by testing it on users.

品牌化阶段（Branding Phase）

1、品牌化 Branding

A brand is more than just a logo. It is the distinct identity and character. It encompasses the experience customers have when interacting with a product and the emotional and tangible attributes that people associate with your name. The brand defines the qualities of a company and clearly articulates a purpose.

2、UX Writing

UX writing is the act of writing copy for user-facing touchpoints and help users achieve their goals. This copy must not only embody the voice of the organization, but must also be considerate and useful for the user.

3、 Voice & Tone

Voice is the distinct personality or style of writing for a product.. A strong voice helps establishes consistency across your product, helps you grab your reader’s’ attention and establish a relationship with them.
If voice is the personality, then tone is the mood. The tone should adapt based on the situation the use is in.

视觉设计（Visual Design）

1、情绪面板 Mood Board

A mood board is a type of collage consisting of images, text, and samples of objects in a composition. They may be physical or digital, and is used to visually illustrate the style they wish to pursue.

2、Style Tile

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

3、Desirability Testing

Desirability testing is used to help inform and guide the process of choosing a visual design. It is a mix of quantitative and qualitative methods that allow you to assess users’ attitudes toward aesthetics and visual appeal.

4、UI设计 UI Design

UI is the look and feel, the presentation and interactivity of a product.

5、风格指导 Style Guide

A style guide is a set of standards for the writing and design of a product in order to ensure consistency and enforce best practice.

开发（Development）

During development the prototype is used to translate the product requirements and functionality to the development team in a way that they can easily understand in order to implement successfully.

Quality assurance impacts the user experience: when things don’t work, users question their understanding and develop superstitions and inefficient workarounds. Quality assurance (QA) and user experience (UX) have a two-way relationship.

战略（Strategy）

UX 策略（UX Strategy）

As UX gains popularity, more companies are understanding the value of it, but there is still a ways to go.
For now, how a company embraces UX is measured in levels of UX maturity.

UX Strategy lies at the intersection of UX design and business strategy.

It is a plan-of-action on how to make sure that the User Experience of a product is aligned with the business’s objectives.

好的产品战略（Good Product Strategy）

Starts with an ambitious, qualitative vision for the customer journey.
Includes the problem that needs to be improved.
Considers the desired outcome and the current state of the project, product, or company.

对于任何产品，设计团队都需要有一个计划、路线图及产品策略——它应该始终从战略开始。
For any product, the design team needs a plan, roadmap and product strategy – it should always start with strategy.

A plan is a list of what’s going to be done and when.
A roadmap is the planned set of features to be built and when.
A strategy is a system of achievable goals and visions that work together to align the team around desired outcomes for the business and the customers

圈定UX范畴（Lean UX Canvas）

Frames a product / service as business problem to solve (rather than a solution to implement) and then dissect that problem into its core assumptions.

We then translate those assumptions into hypotheses. Finally, design experiments to test the riskiest hypotheses.

1、业务问题 Business Problem

What business have you identified that needs help?

Think about the challenge you are currently working on, what business issues have you identified that needs work? Why?

2、业务结果 Business Outcomes

What changes in the customer behaviour will indicate you have solved a real problem in a way that adds value to your customer?

Think about what will the customer gain once they meet their needs.

3、用户与客户 Users & Customers

What types of users and customers should you focus on first?

思考产品定位的主要目标客户。Think about the primary customer you want to target for this product

4、用户利益点 Users Benefits

What are the goals your user is trying to achieve?
What is motivating them?

Users need to attain some kind of goal. They rarely need “features”

5、方案想法 Solution Ideas

List product, features or enhancement ideas that help your target audience achieve the benefits they’re seeking.

6、假设 Hypotheses

Combine the assumptions from 2, 3, 4, & 5 intro the following template

“We believe that [business outcome] will be achieved if [user] attains [benefit] with features.”

7、What’s the most important thing we need to learn first?

For each hypothesis, identify the riskiest assumption. This is the assumption that will cause the entire idea to fail if it’s wrong.

8、What’s the least amount of work we need to do to learn the next more important thing?

Brainstorm the types of experiments you can run to learn whether your riskiest assumption is true or false.

资源参考

UX Strategy by Jaime Levy userexperiencestrategy.com/

商业分析

Why do we do business analysis

以下是分析研究的一部分 IT’S PART OF THE RESEARCH

我们受利益相关者有价值的见解影响。
Stakeholders have valuable insights that we can leverage
Competitors’ sites can tell us what conventions are used in the industry, how we can differentiate
What technical capabilities are availables in order to vet which feature availability

UX IS A BRIDGE BETWEEN BUSINESS AND USERS

成功的设计使商业目标与用户目标对齐。Successful designs align business goals with user goals
Designs must take into account business “users”

DESIGN CONSTRAINTS

Design without constraints is inefficient
Allows us to define and prioritize what we work on

*“成功”的定义 DEFINITION OF “SUCCESS” *

Clear success metrics guide everything
Various KPIs tell us where to focus our efforts

商业分析 Business Analysis

1、预算及时间轴 Budget and Timeline

These are the two most common restraints on any project
The design process must be tailored to maximize results within the limitations that are set

2、利益相关者 Stakeholders

Stakeholders set the business priorities
Usually, there are many in large organizations, they may be hard to seek out

3、客户 Customers

In most cases, the business’ customers are also the users
Marketing may research customers differently than UX
Customer segments may not align with personas

4、竞争要素 Competitive Context

Your product is not one-of-a-kind
Even if it is, you still have competition
What are the other products in your category

5、品牌文化 Brand and Culture

Good products/sites have personality
Values and culture should be reflected in the design

6、业务模型 Business Model

What are the business mechanisms and systems that help your organization achieve its goal?
There are many popular business models used for digital products：Advertising、Marketplace、Affiliate、Subscription

利益相关者访谈 Stakeholder Interviews

When you first start a project, the client always knows a lot more than you.

Often the very first step in a project because stakeholders can reveal:

ssumptions and knowledge gaps
technical requirements or restrictions
tacit business/content requirements

1、访谈对象类型 Types： Executive、Marketing 、Engineering 、Sales

2、准备工作 Preparation

Conduct appropriate secondary research before the interviews.

Review project documents
Review public company information
Know the role of the person you are going to talk to
Have an idea of what they will be ready to discuss
Dress appropriately

3、哪些不应该被讨论 What not to talk about

方案 Solutions
功能 Features
实施细节 Implementation details
配色及字体 Colors and typefaces

以上信息不应该在访谈利益相关者中讨论。

4、哪些需要被讨论 What to talk about

用户 Users
问题 Problems
目标 Goals
文化 Culture

5、避免引导式提问 AVOID LEADING QUESTIONS

A leading question is one that prompts or encourages a particular answer.

Non-leading：Who、What 、When、Where、How
Leading：Would you… If I…. Do you want….

6、小贴士 Tips

Have a plan, but go with the flow
Don’t be too formal
Start general then get detailed
Bring the conversation back if it gets off track
Listen carefully
Take notes (audio not usually recorded)
Watch for inconsistent information between stakeholder
Read the Interviewee, their facial cues and body language, look for emotional resonance

7、获得问题根源 Get to the Root Cause using 5 whys

Is an iterative interrogative technique used to determine the root cause of a problem by repeating the question “Why?” 1、Why；2、Why；3、Why；4、Why；5、Root Cause

8、问题集 Questions

Focus your questions around the stakeholder’s:
- area of expertise
- rank (customer service rep or exec?)
At the very least, have a list of topics to discuss
At the most, have a specific list of questions
Principle: be prepared, but it should still feel like a conversation
Send Questions in advance, allowing stakeholders to prepare .

Interview Checklist boxesandarrows.com/a-stakeholder-interview-checklist/

竞争性分析 Competitive Analysis

WHEN TO DO IT?

When you need to conduct find out what works, what is not working and spot opportunities

KNOW YOUR COMPETITORS

Avoid reinventing the wheel

What else is out there?
What is working?
What isn’t?
What features do the competitors have that our users will expect?
What features are missing in the marketplace?

Clients and business stakeholders can also provide valuable information on their competition

WATCH OUT

Clients/managers saying, “Just copy these guys, they’re the best”—you shouldn’t study only one competitor because

a) this is ripping someone off and
b) there’s probably other things you’ll be missing out on.

原型（Prototyping）

线框图 Wireframe

线框图介绍 Intro to Wireframe

Wireframing lets you plan the layout and interaction of your interface without the distractions of colors, typeface choices or text,

If a user doesn’t know where to go on a plain hand-drawn diagram of your site page, then it is irrelevant what colors or fancy text eventually get used.

A button or call to action needs to be clear to the user even it’s not brightly colored and flashing.

It defines the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information.

It informs how a user will process information and is based on research.

There are 3 types of wireframes:

低保真线框图 Low-Fidelity Wireframes
中保真线框图 Mid-Fidelity Wireframes
高保真现况图 High-Fidelity Wireframes

1、低保真线框图 Low-Fi Wireframes

Resemble a sketch that you can draw with your hand.
Black & white.
Use a single font but you play around with font sizes and

2、中保真线框图 Mid-Fi Wireframes

Are a digitally structured versions of previous sketches
Includes minimal use of color and graphic elements. Only use them if they are essential to convey an idea.
Keep the use of images to a minimum

3、高保真线框图 Hi-Fi Wireframes

Include most of the necessary assets and visual components of the solution.
They are the most realistic wireframes and they’re very close to the final product.

UI 元素 UI Elements

UI Elements are the building blocks of any user interface. There are numerous ways to organize them.

Understanding which elements to use when (and where) will help make the experience intuitive for the user and help with task completion, efficiency, and satisfaction.

A universal interface elements include (but are not limited to):

Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons etc…
Informational Components: tooltips, icons, progress bar, notifications, modal windows, containers, etc…

网格设计布局 Grids / Layouts

当设计网站、移动APP、平板电脑、可穿戴设备时往往会受到技术限制应该考虑并注意所有终端的尺寸。
When designing for Web, Mobile, Tablet, Wearables there are always technical constraints that designers should respect and keep in mind all the sizes.

Grids are used to organize space, information and visuals into a system which is used throughout the design project

Sketch has support for two kinds of grids:

a regular (square) grid
a layout grid.

1、GRIDS ON SKETCH APP

The grid is a typical square grid, that has settings to adjust the size of the blocks, to determine how often thicker lines should appear, as well as the ability to change the color of both options.

It is ideal when you’re designing for the ui elements and icons.

Choose View › Canvas › Show Grid in the menu (or press Control-G) to enable the grid.

To edit the grid, choose View › Canvas › Grid Settings…

2、LAYOUTS ON SKETCH APP

The layout grids lets you define columns and rows, and is ideal when you’re designing for apps and web.

When grids are enabled, any objects will snap to the grid when moved.

Choose View › Canvas › Show Layout in the menu (or press Control-L) to enable the grid.

To edit the grid, choose View › Canvas › Grid Settings…

Column options offers the ability to adjust the total width

Column options offers the ability to adjust the offset / center

Column options offers the ability to adjust the number of columns

Column options offers the ability to adjust the gutter width

3、RULERS ON SKETCH APP

Sketch enables you to display rulers that allow you to visualize coordinates on the Canvas.

Rulers are hidden by default, but you can enable them via the menu. Choose View › Canvas › Show Rulers (or press Control-R)

Because of Sketch’s infinite Canvas, rulers are not fixed; you can click-and-drag a ruler around to define your own zero origin. If you need to reset the ruler origin, just double-click the ruler intersection area.

press Control-R)

3、GUIDES ON SKETCH APP

You can click anywhere on the ruler to add a guide, and they’ll stay visible whenever the ruler is enabled. Once a guide has been added, any layer you move close to the guide in the Canvas will ‘snap’ to it.

3、TERMS

Margins – Buffer zones around the page

Column – Vertical containers which hold type, images, or both.

Row – Horizontal columns, aids with readability and hierarchy

Gutters – Space that separates rows and columns or two facing pages