哈哈哈,henmei

UX设计概述

Colin

本文讲述的是狭义的UX设计概述,指网站与APP的交互设计,且是商业型的交互设计,并不包括广义的设备和设施类的交互设计。

首先需要明确的是,商业性质的交互设计,均是具有目标导向的设计,即商业目标和用户目标导向的设计。在设计过程中,需要满足用户目标、业务目标、甚至是具有上线时间限制的项目目标。

 

首先,我们一起来看下整个设计过程的全图。

该图共分为5个步骤:

研究阶段 — 建模阶段 — 内容构建阶段 — 创意与美学 — 设计执行阶段。

在这5个阶段,每个阶段的目标均不一样。设计角色参与者包括:用户体验设计师-交互设计师-视觉设计师-动效设计师;标准产出物有6个阶段:研究产出物-用研产出物-创意设计稿-标准交互稿-视觉设计稿-高保真Demo-设计执行。

 

初始阶段的研究阶段,我称之为扫盲,扫除盲点。该阶段尽可能的获取各方信息,做好基础的人文背景研究,做好一些用户访谈,诉求弄清楚对内部角色(如领导、产品经理、代理与地区运营等等),这样在设计的时候不会出现方向性错误,不会设计出违背目标用户人群的习惯、触犯禁忌。

第二个阶段是用研建模阶段,也就是做好用户画像、用户旅程、故事版、用户情境、审美方向等。这个阶段是为交互设计的操作流程、信息构架、内容框架做准备的。

第三个阶段就是进入落地性的交互设计阶段,上下游一般情况下只在意接收这个稿件。无论是用户旅程还是画像或者其他,实际都是为了交互设计稿,交互设计的一切都与内容相关,将内容信息进行有效的组织,以操作流程、整体信息构架、页面内容框架、状态等的形式展现出来。

一、研究阶段

没有做好研究的设计项目是非常可怕的,在过去的经验中,我们有过数次的血泪教训。OnePlus的用户以男性群为主,当时我们想突破女性用户市场,因此做了一次整合营销活动,最终以巨大的公关危机而收藏。链接报道

OnePlus asks women to participate in degrading contest to get a smartphone

造成这个的原因是文化的差异与不能理解其Lady first的含义。我们在做印尼开斋节的时候,也同样遇到不能理解他们审美和文化节日上的问题。如6:00pm是结束斋戒,很饿急着去吃饭的时候,我们却在这个时间点做0元抢购的活动等。

而这个问题,应该是可以通过研究而避免大部分的。做好充分的调研是避免这个问题的重要方式。另外在方案产出,需要当地用户参与测试是必要的步骤,可以测地避免方案出现重大的文化、方向问题。

这个阶段需要做如下工作:

· 人文背景研究,包含基础的民族语言地理人口收入节日衣食住行生活方式、互联网发展水平、高频APP与网站、当地APP与网站、审美偏好,你所在品类的垂直研究、机会点等等。

· 竞品分析,依据上面的研究,体验期主要APP与网站,主要品牌的设计等等。

· 角色诉求,公司高层对项目的期望、决策者的支持力度、产品的商业目标和业务目标、产品经理、运营、客服等等干系人的诉求等都是需要了解的,从各专家的角度来看待需要解决的问题和产品的方向。

· 用户目标,可以进行一些访谈、问券等,获取潜在用户的目标和诉求。

经过以上,研究,基本上你清晰的知道了背景、商业目标和用户目标。

这个时候,你需要的就是去解决问题和思考设计策略。

下轮播图为印度OPPO Store时所做的基础研究部分,可以看出,我们从数据、社媒、问券、访谈、人文与互联网都进行了研究。避免出现设计上的问题。

Previous
Next

二、建模阶段

这个阶段重要的产出物是,用户旅程、用户画像、故事版、用户情境、审美方向等。这个阶段是为交互设计的操作流程、信息构架、内容框架做准备的。

尤其是用户旅程,基本整个信息构架和操作流程均来自用户旅程。

三、交互设计阶段(构建)

经过早期的研究,和用户旅程画像等的构建,我们已经非常清楚的知道了自己的设计策略。下图是一种设计策略的展示图,点击数字与卡片可查看详情。

 

一般而言,交互设计师交付出的产出物应该包含应用流、信息框架、页面内容结构、组件状态、可交互原型(Demo)。

交互设计重要的是内容的组织和进行可用性测试。

依据内容设计信息结构,将内容组织为Wireframe/操作流程/页面原型等。

其次是可用性,以让用户最优的达到目的,对设计方案进行可用性测试,当完成一个页面构架、一个APP的流程,或多或少,你必须要做一些用户测试,以证明的你可用性程度、还存在哪些问题,而后进一步完善直到达到设计目标。

交互设计就是:以内容构建应用流、信息框架、页面内容结构和组件状态,制作Demo以进行可用性测试。

可以这么说交互设计的一切都与内容相关,都与可用性测试相关。

下图是内容模型,从这里就可以快速看出整个APP要包含哪些内容与功能,整个APP的结构应该是怎样的。

流程是可以快速的表达出来的。

实际上,在设计中,早期的方案不一定要很精细,都是由粗到细的过程,这样修改和测试成本均很低。可以在设计阶段快速迭代改进。

标准的交付稿如下,这样的状态开发和视觉都可以以此为基础进行设计。实际上,形式可以是下图的,也可以是动态demo的。

但是,千万别忘记了做成Demo进行可用性测试。

四、美学的定义

为什么会把美学放在这里呢,事实证明,美学是体验无比重要的一环,尤其让人惊艳的设计。如下图的OnePlus 7Pro,若美学很差,体验将不复存在。

定义这个最佳的方案是情绪版的确认。如何进行有效的美学方式,我们在《全方位设计共创:HeyTap Store的设计》中有仔细的讲过。

先依据商业目标和用户目标或者品牌性格,提取出设计关键点,以此构成一些描述,如20岁的年轻用户、热爱滑板运动、喜欢拍照,等等,基于此,找出一些图片以符合描述风格的。在此基础上,在次深入的做拼贴画;形成几种风格方向,每种风格是一个情绪版。让团队干系人或者使用者来感受每种风格的Yes Or No,以得到最终的审美倾向。

情绪版本质上就是拼贴画,速度快的话,半个小时可以产出一个。如下图就是个简易的情绪版。

五、随时的用户测试

我们如何决策设计?

当然是用户至上的原则,即使我们做了很多很多的工作,也可能会出现“Lady first”那种问题,最好的办法就是随时和用户沟通,建立用户反馈群,随时可以参与到你的设计中,定期的进行用户测试是最好的防范方式。

如果条件不允许,你的同事们也是用户,你的区域办公室也用户。

Colin的UX设计概述

本文系统的讲述网站与APP的UX交互设计的过程和环节。主要分为研究-构建-交互设计-创意与美学-用户测试几个环节。

UX设计案例—OnePlus Store APP

在设计上,我们规划了3条用户路线,4个核心点。构建一个聚合内容 + UCG内容 + 购买旅程 + 独家售后模块构成的OnePlus APP