Project Description

设计方法概述

从设计目标到设计执行全局总览

首先,我们一起来看下整个设计过程的全图。下图的第一行最左端,以用户和商业目标为导向的设计工作过程为第一行字,这是设计的开端和起点、是所有设计的基石。

该图共分为5个步骤:

研究 — 建模 — 构建 — 美学 — 执行,

设计角色参与者包括:用户体验设计师-交互设计师-视觉设计师-动效设计师;

标准产出物有6个阶段:研究产出物-用研产出物-创意设计稿-标准交互稿-视觉设计稿-高保真Demo-设计执行。

这篇文章主要给大家详细讲解以下内容。各位看官,且听我娓娓道来。

 

你的设计目标是??

软件和网站设计大部分都是目标为导向的设计,目标包含两大类:用户目标和商业目标

给大家一个面试标准答案。(对话是不是苍白了一点)

面试官:设计是什么?

我:设计是为了解决问题。

面试官:设计的的目标是什么?

我:解决用户目标和商业目标。

获取设计目标的方法

角色访谈获取商业目标

对涉及到该需求的干系人等进行访谈,比如运营同事、产品经理、项目经理、决策的老板、或者需求的提出方等等。

不要忘记内部的数据部门,漏斗、数据这些都是非常重要的目标分析依据。访谈完这些人后,那么你就能得到一个比较清晰的概念:内部团队对设计的需求,以及非常重要的商业和业务目标

下图是OnePlus线下零售店查询页面的角色诉求图,或者叫干系人诉求图。

用户研究

通过用户研究的三板斧:观察用户、访谈用户、用户调研,得到用研产出物。用户研究产出物是指:用户画像、用户旅行地图、用户情境、用户目标。

至此,目标导向的设计中,最重要的核心的目标,非常清楚了。我们形成文本写出来,同步给团队,这叫设计目标,在整个后面的设计中,设计目标扮演非常重要的角色,解决争议、制定情绪版关键词、进行交互设计、视觉设计等等都完全离不开设计目标。

总结

整个研究阶段:调研文档、角色诉求文档、用户研究产出物(用户定性、用户画像、用户旅行地图、用户情境、用户目标);

简易产出物就是项目背景文档+干系人诉求+用户目标。有资源的项目,按标准产出物来,没资源的项目,一定要保证简易产出物都有。

这里参与的设计角色包括:用户体验设计+交互设计

设计目的
Previous
Next

设计开始

首先,我们要让设计内部达成一致,不能设计出来以后再说。

如果你埋头苦干,自己一个人默默全做完了,找大家一起看看,这时候有趣的事情就发生了。

运营说:“ 我要的是简约点的风格 ,大气一点、你这个不够大气” 

产品经理说:“ 我认为七彩斑斓的黑才是最好的,交互上,我喜欢这个展示在前面的时候也在后面出现 ”,

项目经理说:“ 我认为三星的页面就非常好,你可以参考人家的试试..... ”

意见如此之多,设计师怎么处理大家各抒己见的建议呢?

既然如此,各位,设计开始之前,一起来做个情绪板吧。

情绪板

问:什么是情绪板?

答:简单的说,就是拼贴画。

问:情绪板的作用?

答:用于帮助设计师快速建立审美倾向的有效方式,可以在早期阶段在团队(设计师和非设计师)内部达成一致。可以解决诸如“让设计更大气一点”、“似乎极简一些会更好”、“体现高级感” 等争论。

问:如何制作情绪板?

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

问:哪些人制作?

答:交互设计师和视觉设计师以及动效设计师都需要参与。

问:做完后需要做什么?

答:内部确定几个正确方向之后,叫上全部干系人进行评审,你也可以说这是审美倾向的可用性测试。

下图展示的就是我们的情绪板内容。

交互设计

交互设计重要的是,可用性测试和内容。

依据内容设计信息结构,比如我们需要展示促销活动、用户视频,依据这些内容,我们进行结构的设计。所以说,交互设计与内容高度相关。

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

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

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

问:交互设计师的定义是什么?

答:我们利用内容信息和流程构建心智模型,设计交互策略使用户更快速的达到目标。通俗点来说(请补充??)

问:最先开始做的是什么?

首先,绘制故事版和草图框架,完成之后马上进行可用性测试。可用性测试越早开始越好。

问:怎么进行可用性测试?

先制作故事板,或者Demo,然后观察用户操作+访谈用户,随时记录整个过程哦。详细内容请移步我另一篇文章:

传送门:用户观察、用户访谈

问:标准的交互文档应该有哪些内容?

传送门,走起:一文读懂交互标准产出物

 

视觉设计

视觉设计的大部分内容都与画面相关,也就是与美学相关。在设计研究完成、情绪板评审通过后,需要绘制的就是主画面,和多个设计方案、飞机稿,从其中选取最佳。

问:视觉设计师要做情绪板吗?

答:情绪板的核心角色就是视觉设计师;一定要做情绪板,并组织项目组评审。在这里推荐使用一个小工具“ Eagle ”,整理你的图库很方便,强烈推荐。

问:视觉设计师要进行可用性测试吗?

答:不需要那么严格和专业的可用性测试。更确切的说,是进行美学方向测试。为了达到设计目的,在你绘制完成草图以后,你需要进行专业用户的测试和潜在受众群的测试。

同是视觉设计师给你更好的建议,交互设计师看是否符合交互策略和高保真Demo,动效设计师看如何制作视频素材。

受众群的测试可以快速知道是否理解设计意图,达到设计目标。尤其在有多个设计方案的情况下,更能得到符合用户理解的方案。

高保真Demo

为什么要做高保真的Demo,这就是最终效果的实现。我们画了再多的图,也需要一个样板间或者渲染图才好。

对于是否需要做高保真Demo,这里给出一个标准:

问:所有的设计都需要做高保真的Demo吗?

答:当然不是,对于需要高度依赖效果的页面,才需要做高保真Demo和动效。

问:高保真Demo和动效设计是一样的吗?

答:两点不一样,首先,高保真Demo是交互和视觉方案的合体延伸,其重心还是以用户目的为中心,Demo的效果,是管理用户目光的层级。其次是高保真Demo是可操作可体验的,和用户的互动行为相关。

以下是OnePlus 7Pro的高保真Demo演示

 

设计实现

经历了研究、构建、美学之后,到了最后的实现。如果高保真原型都做好了,对实现上还有两个门槛:一方面是技术的实现,一方面是素材的实现。整个设计,很大程度上依赖于设计链条的控制。

将高保真原型,进行素材部分拆解。

图片部分:

· 购买图库版权、找摄影师拍摄、视觉设计师绘制;

动态素材部分:

动效设计师制作、外部供应商制作;

3D部分:

渲染一些低保真角度放入原型稿中确认,团队有的自己做,团队没有的找外部供应商做。

以下步骤设计师务必进行:

· 检查素材的正确,尤其动态素材;

·对更目录文件进行大小检查和压缩,保证最佳大小和质量之间的平衡。 

 

下图展示了OnePlus 7Pro页面实现时的步骤

结语

以上内容,就是我分享的设计方法。依据这套方法,基本可以保障项目中产出优秀的设计方案。

最终,其实所有的设计流程和方式,都依赖于每家公司的人和制度。

即使我们做好了每一步,产品是否成功犹未可知。但整个设计的过程,会让每个参与其中的人都收获成就感。

勾搭我们

Previous
Next

探索更多

一些专业名词解释:情绪版、可用性....

先给大家来一段专业名词:可用性测试、人种志、情绪板、故事板、应用流、用户画像,是不是看到就很懵了。 让我给大家快速普及下这些知识。 设计调研、用户研究、可用性测试是啥? 任何设计,都离不开研究类的工作,让我们清晰方向、了解用户目标、做好用户画像和分析用户行为、做Demo进行可用性测试。很多人将这一切统称为用研。 实际上,这里有三个阶段:方向调研、用户研究、可用性测试。下图是三者之间的差异描述。 用户体验设计、交互设计、视觉UI设计如何区分? 想必这里很多人又模糊了,到底这些事什么设计??如果我们将设计岗位拆解的非常细的话,应该是这样的: · 用户体验设计师-做规划的人 UX负责调研和用研工作,同时也涵盖一部分可用性测试(主要是已有产品)。其产出物交付给交互设计师。 · 交互设计师-设计房子的人 IXD产出流程、框架、信息结构、制作demo进行可用性测试(主要是设计中的产品),其产出物交付给视觉设计,有时候也需要动效设计师参与。 · 视觉UI设计师-装饰房子的人 Visual/UI负责设计视觉画面,设计UI组件、颜色等美学性工作,其产出物交付给开发人员。

Read More »