赞助商
立即赞助

如何从零开始设计一款产品?来看这篇超全面的教程!

UI设计3年前 (2021)更新 流光
2.1K 0 0

当产品发展到一阶段,优秀的用户体验设计对于产在激烈的商竞争中保持核心竞争是至重要的。一个产否效地帮助户成任务,这直接决定着户留存和口碑。这时,户体验就成为了商机。

我们作产品的设者,需清楚认识到产品从 0 到 1 的设过程,对每阶段深入的思考能形一清晰的认知。吸收用户体验要素的精髓就必须在实践中断地习户体验,了解户体验,总结户体验。

如何从零开始设计一款产品?来看这篇超全面的教程!

用户体验为什么如此重要?

用户验是指产品何与外界生联系并挥用,也就是人们何「接触」它、「使用」它、人与产品互动的舒适感、人与产品的有效沟通。

户体验设计通要解决的是应环境的综合问题,兼顾视觉和功两个方面的因素,同时解决产面的他问题。产越复杂,确定如何向户供良好的使体验就越困难,如 B 端产在设计上就有很多限性。任何在户体验上做的努,目的都是为了易性和易通性,就是使效率。这里可分两种形式体现:「帮助户工作得更快」和「减户犯错的几率」。

影响用户体验的因素很多,内决了产品能对用户提供什么、技决了产品能给用户什么样的稳性、交互决了用户完任务的舒度、视觉决了产品用户中的印象及否愿意点击,其中内技重的因素。产品发过程中,我们都类似的历,时常关注产品将什么、如何实出高效,用户体验却常常被忽略,甚至义优先级不高,当这些「优先级不高」的需求积累到一时,会变决产品体验败的关键。除了这两因素外,影响用户体验的就下面这五素:战略层,范围层,结构层,框架层,表层。如尺高也需从整体构思到结构设再到细节构造一样。所以这五素贯穿整产品的始终。

如何从零开始设计一款产品?来看这篇超全面的教程!

了方便具体阐述各层面的内,我们把产品分两类:功能型产品信息型产品。功能型产品从传统的桌面客户端软件的角度出发,主关注的核任务。所的操作都被纳入一过程,去思考用户如何完这过程。信息型产品从信息的发布组合角度出发,主关注的内,产品应该提供哪些内,这些内信息对用户的意义什么。

下,我们来具体阐述这五个层含义。

战略层

论是功能型品是信息型品,在战略层所关心内容都是样:我们为什么要开发这个品?可以分解为两个问题。

1. 用户需求(品用户带来了什么?)

我们必须抛弃自己立场,从用户度新审视品,不能把自己成用户,所以做产品设计提到多的就「同理」,忌讳的就闭门造车。我们需熟知用户选择我们的产品得到什么、解决什么问题,并且解决用户核问题之后,他还能我们的产品中获得什么。这时我们解决的如何获取用户需求。

为了了解用户需求,我们要用户进调研分析,找到品真正目标用户群(有哪几类、几用户色,比如卖品有商家、骑手、消费者三类),再用户群进场景化分析(他们在什么场景下使用品),以确定品真正可能覆盖到使用场景有哪些。

常见的用研方法有:问卷调查、用户访谈、焦点组等,最适用于收集用户的普遍观点需求。其研究工(如用户测或体验程图)则更适用于理解用户体行为及用户和产品交互的表现。通过前期的调研,可以得出一个用户画像,既代表了目标用户有哪类人、有哪些行为目标,这可以让队成员在「产品给谁用」的概念,清晰地知道用户是「谁」。

2. 产品目标(企业通过产品得什?)

用户需求相对应的,是对产品的期望价值,也就是产品目标,其实就是对产品总体方向的把控,包括产品的商业逻辑、商业价值、商业壁垒、品牌传播等。当前互网已进入下半,大把烧钱野蛮生长的模式已经越来越不可持续。此无论是投资人还是创业者,更多的都将回归商业本质,即对产品商业属性的思考。互网圈常说不要去创造需求而要去发掘需求,真正去足目标用户的定需求,因为这的产品才能有商业价值,商业价值的大可以通过市规模析、目标用户价值析等方式进行衡量。除此之外,对于身商业壁垒的析也十重要,在确身优势的同可以进一步巩固和发展这些优势以提高后来者的准入门槛,以此取得更为有利的发展空间。

在项目开始初期,团的成就要对此有清晰的认识。对战略有清晰的认识在设计程中提供一把标尺,引导我们按照正确方向前进。因为我们越是明确道用户想从我们里获取什么,我们就能够更的服务他们。最,内容(用户研、战略定位)最做成文档,并同步到团成,以供大家进行讨论,让大家道 BOSS 或高对产品现状及未来的看法。需要注意的是,战略面虽是整个产品的根基,但不意味着在项目开始之前你的战略要完确定下来,也以在程中逐步完善,因为随着产品逐渐展、成熟,也随着业市场生变化。

3. 阶段目标

产品目标在行一段时间,最需要复盘,也就是之前要设立一个阶段目标,它以是一追踪的指标,在产品上以,用来显示他是否满我们自己的目标和用户的需求,阶段目标与产品身和用户何使用产品有着紧密的关系。同时,指标和视化数据有关联,所以产品经理需要观察产品数据,我人也是非常提倡设计师主动去观察数据,也是你检验设计成果的一项标准。:用户平均停留时长、单月登录次数、改版的数据变化、活动页的跳出率减少 30%、Banner 图的转化率等。

可看,阶性目标和可视数据是分开的,任何成了产访问降低、粘降低、跳率增等行为是可通过数据分析来得到结论的。

范围层

带着「产给户带来了么」、「企通过产得到么」的明确认识,我们才搞清楚如何满足这些战略目标。当你把户需求和产目标转变成产应该供给户么样的容和功时,战略就变成了范围。这里是产经需要重点专注的层面。

1. 你正在设计么?

详细记录你正在设计的容,知道这个项目的目标是么,么时候成这个迭代,本次迭代需要上线么东西,当前进是怎样的,善于记录这些你把责任分配得更清晰,可大大协作效率,工作中我们要考虑面个维。

自己的作流程:明确如何行背调,如何行需求审,每一的流程否清晰,否还优化的空间,尤其当出错误的时候,复盘自己,一会可优化的环节。

品迭代流程:品会从个 demo 进入到完迭代环节,个过程,品应该以什么样进度和来进迭代,也是需要思考,在体过程尤其考验了品决策把控和需求优先级管理能力。

队的工作流程:比如定义产品的候是某个部门还是全部,迭代产品的候是只要考虑需求方,还是其产品同事一起,开发资源是否需要协调,队应该如何配并且透地了解产品成长进度等,这些都需要在迭代前后有所思考。

么管理项,总要有工具协助你录吧,在里推荐几款我在工中常用的团、项目、需求管理工具:Xmind、Jira、TAPD、Merlin Project Express(甘特图)。

2. 你不需要设计什么?

里需要进一步讨论产品所包含的具功能,使产品从一个概念转化为功能聚合。此时明确不需要做什么要比列出需要做什么更重要,太的产品一上便拖着一副臃肿的身躯,许功能听上去相当诱人,但是它们对项目的战略目标并不是必需且紧急的,最终落得失败的结局。因此需要明确产品范围边界,梳理得到核心功能。C 端产品通常只有一个核心功能决个人用户的一个核心问题,而 B 端产品则有个核心功能来满企业用户个使用场。被决的问题即是需求,需求从何而来?

需求来源:需求来源一般来说分为和外,大多是职门的一些务性需求或受到战略上的决策影响,而外可是和竞、户反馈的需求,无论是哪些需求,一定是在战略性角看,即,这些需求否满足户或企值,更接地气地说,这个需求否起到实际作,还是伪需求,或者紧急的。

产品落可以提考虑潜的冲突产品中的粗略点,可以划界限什么功能内可以,什么功能内不能,什么功能内暂时不需,什么功能内后。也就我们规划(功能设)的时候先加法,然后减法。比如根据「四象限法则」的思,出优先级、排、不需的。

如何从零开始设计一款产品?来看这篇超全面的教程!

当然,些产品团队的 PM 会输出一份《功能规格明书》或《PRD文档》,这也范围层面的产出,文档起到义功能的作用,他不需包含产品的每一细节(不交互文档那样细致),只需包含设或发过程中出可能混淆的功能义。

如何从零开始设计一款产品?来看这篇超全面的教程!

接下我们看,喜马拉APP 6.3.60.3 版本哪些功能需求内需求,一产品从 0 到 1 制范围层时可能不会这么详细,后续的结构层框架层设中偶尔也会反过对范围层行补充。

如何从零开始设计一款产品?来看这篇超全面的教程!

结构层

定义好功范围,并列好优先级之后,我们对最终的产模包含么特性会有一个清晰地认识,然后这些需求并没有说明如何将分散的片组成一个整体。这就是在范围层之上的结构层:为产创建一个功架构,设计户如何到达某个页面,并且要思考他们成事情之后够哪里,就是确定页面各种特性和功最适合的组合方式,并在流程上形成一个闭环。从这里往后就是我们交互设计师该重点专注的层面了:将抽象的需求逐渐整成一个具象的产原。

1. 评判标准

结构是否有质量的评判标准:

  • 以各种方式将产品信息合理并有意义地呈现给用户,让用户更容易找到最有用的信息;
  • 是整个过程需要多步成,而是户是否认为每个步骤都是合的;
  • 一高效结构的优点具备「可包」「可扩展」的能力。
2. 结构层的定义

根据用户的使用场、行为、思考等方式将范围中的功能和内容建立一种有序的排列结构,让用户在使用产品时能够高效顺畅地现需求。就比你把在范围确定的一个个功能点,整理成一个次清晰的脑图,称为:功能架构图。

如何从零开始设计一款产品?来看这篇超全面的教程!

有功能架构图之,就相当罗列出功能级和抽象的页面局,接下来要对每个功能点、任务点输出一个完整的流程图。流程图对产品经理和互设计师是非常重要的工具,它能够帮助你梳理产品逻辑,通画流程图以清晰地看到产品与用户、角与角、行为与反馈、页面与页面之间的互关系。

3. 常用的流程图分类

功能流程图

描述一个功能或任,从开始结束的行为过程,中间有什殊情况、异常情况,流程,遇见这些情况该如何理,功能点功能点之间的逻辑关系是怎的,当前步骤或流程是不是最理的,切勿为了减少步骤而盲目压缩流程,这要先保证易通性,即让使用者通俗易懂,能够快速了解面的运作模式。

通常用介绍产品功能模块的相互关系或某个功能模块的具组成,产品经理需要向开人介绍某个新增功能模块时,以在原型图宣讲之前使用功能流程图让其对功能的轮廓和走向胸。绘功能流程图能够有效地帮助我们快速梳理产品逻辑和互流程,用 Axure 画流程图非常方便。图:

如何从零开始设计一款产品?来看这篇超全面的教程!

业流程图

业流程图也可以叫「泳道图」,它是描述整个产品业或个业模块是如何运转的,包含了角色角色、前后、模块模块之间的流程关系,比如外产品的消费者、骑、商家三种角色是如何交互的。通常用于介绍产品业,如产品经理需要向 boss、户、队成员介绍产品业,用流程图辅助讲解的效果,相较于纯语言或文字表达要好得多。同,绘制业流程图能帮助快速了解产品业及角色关系,如图:

如何从零开始设计一款产品?来看这篇超全面的教程!

页流程图

这个是大家最常见,是把各个原型页用页流串联起来,APP、H5、PC 这些都是由个个页组成,页流描述了用户完成个任务需要经过哪些页。也是我在哪,经过什么操作。般由交互设计师进绘制,其过程能够帮助交互设计师确定品页跳转序以及交互状态,时能帮助我们检查是否有遗漏页和设计。画页流时,主要描述用户正常路径,异常流程则在正常流程附近画出异常流程即可,如图:

如何从零开始设计一款产品?来看这篇超全面的教程!

品设计从 0 到 1,从需求分析到信息/功能架构→再到业务流程→任务流程→页流程→再到最后原型图(线框图),是个从抽象到具象过程,也是从概况到细分过程。经过步步分析,逐步将想法变成实实在在品,这是品设计魅力所在。而这其流程设计起到举足轻作用,千不可忽视。

框架层

将功能和流程梳理楚后,我们要开始设计功能里具体细节,也是让广大设计师又爱又恨原型图。在充满概念结构层形成了大量需求,这些需求都是来自战略目标需求。在框架层里,我们要更进步提炼这些结构,输出详细界雏形、导航及信息设计,也是将结构层东西变更加晰、实在。「交互设计文档」是在该阶段生。

1. 注意事项

让设尽符合用户的使用习惯

不出一些「奇葩」的交互方式「自以」创新的组件,一旦违背了使用习惯用户认知,都会影响操作效率,然,我们体验设不就了提高操作效率舒度吗?举例:消息列表中出比较多的删除方式左滑删除,这已形了普遍的使用习惯,如果非创新到「按→移动→删除」,这不就提高了学习本么,随之的就吐槽产品易用性差。

所以做界设计要选择正确界元素,这些界元素要能帮助用户完成他们任务,要过适让它们容易被感知到和容易使用。这里最忌讳是不要为了所有所有偏好做设计,为个设计不可能适应所有用户,我们要考虑是符合「目标用户」使用习惯,贴近「目标用户」认知即可。比如我们做主打 90 后视频社交品,难要考虑到 70 后认知习惯吗,显然不需要,这没有价值,此我们在做案决策时,需考虑目标用户大部分群即可。

要注意突出,让用户眼看到核心内容

这里需要考虑交互元素和体页布局,可能有些懒惰原型设计者把这个阶段完全丢 UI 设计师了,认为布局是他们事情,前提是 UI 设计师如何快速理解你交互原型,这考验了交互设计师在输出原型时,内容层有没有区分,哪些需要屏内展示,哪些需要弱化,这些注意事项有没有在原型里体现或者说明。

除此之外,这些布局也不能凭觉构建,需要有理有据,比如是否考虑目标用户的浏览习惯。举例:「订阅号消息列表」页面为什是文字在前,缩略图在后,那是因为在该景下,用户在找一条内容或浏览页面,主要通过文章标题来判断是否是想要的内容,而不是图片。

为息做计,将产品息呈现出来并且让用户容易理解

除了上一条说的如何根据浏览习惯组织息之外,还要将这些息再次理,就是如何让用户德舒服、有代入,这是一种促进理解的表达方式。之前在琢磨「长表如何计」,总结出了一句话「息是界面的嘴巴,它需要友好的用户聊,而不是审问用户」。事实就是如此,大家都有共同的经历,在录入多项息,情绪上是抵触的,这个抵触点可能来源于:表交互不智能、组件没有记住之前输入的、宁愿让输入也不让做选择、提示反馈不及、文字引导不友好,文案既死板啰嗦等情况。这就体现了息表达是多重要。

举例,之前我帮朋设计「豆芽文」时,有一个在反馈口,我准备用「图标+在反馈」的文字描述来呈现,来现种方式不太玩、太传统,不能彰显产品,而且我们的用户是中小学生、家长、老师,是一群活泼阳光的群,因此我根据际场,把「在反馈」的文案换成「打小报告」,增加表达趣味,上的口点击件也明显比之前要,目标用户看到里得符合他们的生活场,想点进去看看,不就达到我们设立该口的一个目的吗。希望有人点击,降低用户对「在反馈」的忽略感。

如何从零开始设计一款产品?来看这篇超全面的教程!

在适的地方权衡利弊,使用适的组件

多组件的功能类似,同可适用于多个景,所以在做交互或 UI 计,一定也经历过类似的纠结点,不知道如何选择计方案,觉 A 和 B 组件都能足需求。这推一个方法给大家,比如要做一个选择器,在该选择器内可以对选项进行选,但这考虑备的兼容性和开发成本,所以准备采用系统生的选择器和动作菜,如图:

如何从零开始设计一款产品?来看这篇超全面的教程!

可以 AB 组件都能足选的需求,那如何选择最适的呢?

在排除不影响用户认和使用习惯的条件下,我们以选择当前兼容强且操成低的组件,比 A 组件,它是滑动选择的,假设未来能要加更的选项,就需要考虑到组件的延展和包容,所以我选择使用它。

但如果项是定量的,我会择 B 组件,因为量的项,需要我做滑的作就将项清晰地呈现在我眼前,并且点击项后够直接闭弹且生效,而 A 组件却要中后,再点击「确认」,考虑到容因素和操作成本,B 组件更合适。

所以,设方案并不凭感觉的,结合内呈使用场景决策,这也求设师动手之一使用场景。

理性的错误处理

一聪明的系统应该考虑到异常况特殊况,记得刚入行时,我曾责怪过「什么还这么笨的用户」,后发用户始终都无辜的,我们的产品把防错机制完善。「用户错误」这词似乎暗示用户错了某些事,但不仅如此,产品设者也犯下了错误,因他们让用户轻易的出了错的行。所以,解决用户错误的方法不责怪用户,不指导用户如何用,应该设立一套防错规则提高错性,也就「防御设」,让犯错变得困难。比如通过一些手段避免错误:默认、建议、限制(约束)、及时反馈、逆操作方法。

下过 3 个为维度来分析:

如何从零开始设计一款产品?来看这篇超全面的教程!

2. 操作前,提醒防错

详尽的说明字,突显示

要是针对户或谨慎的操作说明,目的是为了正确引导户习使。引导和示的位置要突,从而户容易感知到(如离标题或输入区一些),确保户在操作前注意到引导或示信息。如图,如果进行示户就知道这个位置的录入机制和字数极限值是怎样的,等输入再示或者点击交再示是否有输入的时候已经晚了,这时户就会认为系统反应迟钝,严重影响了他的工作效率。

如何从零开始设计一款产品?来看这篇超全面的教程!

当结果不逆时,询问用户让其道操的果

在用户操前及时给出正确且有效地引导和提示,有助减少错误生的能。对比重要的操,需要通二次确认减少错误的生,里指的二次确认有几种程度以参考,我把它分为:轻度防错、中度防错、重度防错,图:

如何从零开始设计一款产品?来看这篇超全面的教程!

选项比输入更简,并提供默认选项

用户出错的因无非就是这 4 种:系统性能差、被界面误导、粗心大、操作复杂的功能。就拿「操作复杂的功能」来,用户操作的间越长犯错的率就越高,所以,在做一些组件的候,能让用户选择的就不让用户输入,宁可让点击完成任,也不让输入完成任,因为输入比点击的失误概率要大得多,操作成本也相对较高。其次就是选项给用户提供默认值,尤其是用户需要做重复的动作,或者需要确数字的候,先提供一个默认值,然后让用户再修改它。

如何从零开始设计一款产品?来看这篇超全面的教程!

3. 操作中,实时感知

对用户的操作行视觉化呈,并及时回馈

对用户输入的信息行实时检验,下面这案例中,当用户输入自己的邮件信息之后,即被告知用户这动作的含义,到底输入确还输入错误,不全部输入完毕点击「确认」后提示,实时状态能将错误扼杀摇篮中,用户感知会认系统敏感的,不迟钝的。

如何从零开始设计一款产品?来看这篇超全面的教程!

适当限制户的某些交互操作

对一些可成错误的操作入口设置约束或直接禁止操作,从而避免错误的发生。举个例子:操作一个模容,展开另一模的同时收起上一个模。填写过程限制户某些操作,这样始终焦点聚集在当前容,在操作者的角会因为容过多而导致情绪波。

如何从零开始设计一款产品?来看这篇超全面的教程!

4. 操作后,及时反馈&友好引导

错误发生,及反馈错误并提供纠错帮助

及的错误反馈就能保证用户每个阶段的操作都能得回应,避免因为一个的错误就要修改关的一系列内容的情况,提高完成任的效率。反馈不仅要指出有错,还要指出错在哪,反馈文案要准确、友好,这便于用户了解错误的因,方便下一步的修改。另外在用户提交操作之后,也需要及反馈是正确 or 错误,因为这有种叫「心理犯错」的因素,是用户对操作不的表现,你不及告诉操作结果,可能会担心一会呢。

如何从零开始设计一款产品?来看这篇超全面的教程!

允许用户犯,并支持操作可逆(即撤销以前指令)

iPhone 手原功能,可以在用户出时将多功能设快速原到原始状态。有常见有删除相片、删除邮件、异常情况退出文稿编辑等,这些极端操作都有应草稿箱、垃圾箱、下进入提醒是否原等逆操作来挽回用户误。

如何从零开始设计一款产品?来看这篇超全面的教程!

表现层

整产品的形态不清晰很多了,就需的孩子设貌了,的,提高他的颜气质。表层这五层模型的顶端,也用户会首先注意到的方:感知设。这里将品牌、内、功能学汇集到一起的界面设。框架层,我们主解决组件置元素布局的问题,表层则解决并弥补「产品框架层的逻辑排布」的感知呈问题。通过视觉设,我们决这些内界面应该如何呈。人类五感知:视觉、听觉、触觉、嗅觉、觉。

嗅觉和味觉更多是体现在实体品上,如物、香、酒等用户可以过闻和吃接获取到信息。而互联网品是属于工业设计领域再创作,我们不可能让个虚拟品发出香味,所以下来谈谈视觉、触觉、听觉。

1. 触觉

最观体现是手本身了,量、质感、薄厚以及材质等。而体现在应用交互上是动反馈,像键盘短,充电、长按时候,关时候长,甚至有打游戏、收到要消息、操作失误等场景都有震动,虽然这些震动几乎没什么,是身体是敏感,用户能楚地感觉到系统在和我「话」。出于使用手本能,不用查看都知现在在进什么样操作,有时触觉会比视觉先感知到,合理利用触觉反馈,形也完善了「及时反馈」制。

2. 听觉

声音在很多品上是作为提示来用,虽然这是很不友好提示,是不能否认它比动、视觉效来更观(手在身边情况下)。而些品来说,声音这环显至关要了,比如音乐、音频、视频、游戏、播类品音质保障。儿童教育类和少儿拓展类品在音频上引导会比文信息更观,这类品音频质量接影响着品沉浸体验。在小朋友眼里,品有了声音才显更可爱,更符合他们心理模型。好比我们读小学时,师家长天天唠叨我们写作业,等进入社会以后,学习完全靠自律,基本没有再去监督你,所以他们心理模型是:「这里需要有说话来引导」,在他们眼里这是好玩、有趣、学习品成本也是最低。

3. 视觉

由于我们互联网品特性,视觉权是最多,这也是用户体验设计师最心应手领域。为几乎所有互联网品都会涉及界视觉设计,出于这个原,下主要讲视觉设计如何支持功能设计。

引导用户

评估个品视觉设计简单法,是「视线首先落在什么地」、「哪个设计元素在第时吸引了用户注意力」、「这个元素是偏于品目标是用户诉求」。

一来说,用户视线的移动方式遵循着相当一致的模式。如果你的计是成功的,用户眼球的移动轨迹一有以下个重要的点:

  • 首先,它们是条流畅视线流。如用户评论个设计是拥挤、复杂时,表示这个设计没能利地引导视线在页上有序移动。他们眼睛在各各样元素跳来跳去,所有元素都在试图引起他注意。
  • 其次,在不需要多花胡哨的计吓用户的前提下,它能否为用户提供某种视觉上的「引导」,这些引导应该支持用户去完成某个目标或任,且不应该散用户的注力。

对比一致性

对比:当一元素众多元素中显得与众不同时,用户就会注意到,这就对比。用于吸引用户注意的一主设手段,把用户的注意力吸引到界面中的关键部分,帮用户理解页面导航元素之间的关系,传达信息设中的概念群组。

比手段般有:空比、大小比、体比、颜色比、虚实比、动静比、稀疏比、比、图文比、立体与扁平比、局部与体比等,这些比手法是自于版设计,然在界设计也是用,本篇主要是分享品设计,此在这里不做细化。如元素没有比性,那个界将显常平庸,没有视觉落,缺乏应有活力,最主要是不能有效地引导用户视线,不能实现传信息目。

如何从零开始设计一款产品?来看这篇超全面的教程!

致性原则,是另个要组成部分,可分为:视觉致性、交互致性。

视觉一致性:例如通过工将视觉素、模块的大、空间保持一致性。基于栅格线的方法是通过使用模板来确保计的一致性,栅格系统在页面排版布局、尺寸定方面给了计直观的参考,它让页面计变得有规律,从而减少了计决策成本,栅格化提高了页面布局的一致性和可复用性,避免了计开发者在细节上的反复沟通和查,从而提升了整个计开发流程的效率,并能帮助开发者实现较为理想的计还。各种布局也都可以套用这个模板来创建,最后并纳入「UI计规范」中。

如何从零开始设计一款产品?来看这篇超全面的教程!

交互一致性:在不断迭代的历程中,多模块为了「功能先行」对交互规则做了一些修改,这些的修改积累一定量就会对产品整体的一致性方面提出挑战。产品中的功能点在不断完善的过程中,涉及业流程的景也会丰起来,多的组件适用于不同景也成为产品中必不可少的一部。

B 端产品相对来说,要比 C 端更注重互一致原则,因为 B 端产品的组件复用面积要比 C 端更泛,比表单组件在 B 端产品中最常见,基每个模块、每个任务流使用,果每个模块的互方式不一致,导致复的 B 端产品更复,因此需要定一套互规则。其次从开角度来讲,定统一的互规则能够帮助开在工中直接用,从而减少开成。推荐几个常用的 PC 端和移动端组件库:Element-UI、Ant Design、Vant。

方案

在表现最能让用户形成直观感受的就是颜,人是视动物,颜也表达产品,树立用户一次打开产品的心理印象。核心的方案就是使用品牌,以有效地向外界传递品牌形象,使用品牌并不是让你直接吸,而是根据情况进行饱和度节,里也需要考虑你的目标用户是什么属,他们是否能接受种方案。

需要注意的是,我们设计师因为追赶潮流而忽略了产调性,如说我们的产是 B 端,他面向企户,有特定的职属性,那在配色方面就需要更冷静、性一些,整得里胡哨的。可有些设计师会问「如果都采性的配色,那就打破差异了」,实我个人对这句话是非同的,从产角看差异是从配色发,而是从功发,你解决户需求的方法和竞有么同,或者说务点有哪些优势,视觉设计永远都是务于功、务于商的,脱离了商的设计就变成了「艺术」,而是解决问题的设计。只有从功上打破差异了,你的配色方案才有更大的意义,如入牌元素、合搭配辅助色等。

如果 C 端产品则会一些,因面对的人用户,视觉注重设趋势品牌化,使整产品看起独特,这样用户使用的时候会眼一亮。一些运营、活动、专题类设,视觉设就显得尤重,它直接了引流具,能帮产品提高转化率。

在个完品设计流程里,会要求设计师将表现层东西理出套「UI、交互设计规范」,也可以叫「定义设计语言」。这个规范确定了表现层设计各个,从最大到最小范围内所有元素。影响到品个局部标准,比如:跳转逻辑、色系统、体系统、栅格系统、组件规则、图标、投影等原则。做设计规范好处是显而易见:

  • 对内:可保证设团队产出的一致性,尤其多人协作设、跨部门协作、岗交接、设传承、提升设发效率方面,这些方面好了,产品交付到用户手中,也能用户体验的一致性,降低学习本;
  • :统品符号,有助于加深品在用户心印象,让我们品看起来是个协调致体,而不是堆乱七八糟碎片,为公司品宣传和文化设保驾护航。

所以互联网产品设中,合理利用视觉、触觉、听觉,能使产品变得动。

回顾

实际这五层面,就我们产品设的作流程注意点:

  • 战略层:确定产目标和户需求,为产将来的方向做场调研、户研究,这是产经设计产的根源,是做一个产的开端。
  • 范围层:当我们获取到用户需求、明确好产品目标后,就始研究提供什么解决方案满足用户的需求,这些解决方案对应的功能哪些,内由什么组,这时一般会产出《PRD文档》、《功能规格明书》记录,一般包含:版本记录、产品规划图、功能清单、业务流程图、需求列表、发资源、其他相关规范……
  • 结构层:功能和内容范围确定后,交互设计师开始根据品需求设计解决案,过架构图和流程图,将这些打散需求串联起来,形成个可以闭环流程,并罗列出功能架构:这些需求会有几个页组成、个页含什么东西。然有些团队可能没有交互设计师岗位,那是 PM 和 UI 共担任。
  • 框架层:有了架构图和流程图之后,就开始计体界面雏形(型图、线框图),体这些页面如何跳转、用什组件、交互规则是怎的、页面素怎组等,这候通常会产出《交互计文档》,一包含:版本记录、需求背景、流程图、架构图、页面型、交互说、页面demo……
  • 表现:UI 设计对功能设计进行支持的节,基原型图将产品呈现出来,颜、元素、品牌、内容怎么通视设计来定义,取决 UI 设计师何把控产品特、功能理及目标用户的,最将设计稿(高)付给开工程师,并产出《UI、互设计规范》和组件库,方便开用及期复用。

在这还是非常提倡 UI 计去参产品和交互的工作,并且行业趋势也是如此。最近和一位在滴滴工作的体验计交流发现,在滴滴是专家计管理岗,除了管理队之外还参了产品的工作,同也负责交互、视觉、用研等多项工作。

所以,一位优的设计师不是只把界面做的看而已,他一定是具备界面设计之外的项目推动能力和团建设能力。总而言之,我们要从观的角度去看待设计位,假你未来想成为一名 UED 或 UXD,甚至是栈设计师,从现在开始就应该把「设计做视」的心态,转变为「设计是用来决产品问题」的心态。

掉开发的工作之后,这就是把一个户需求,或者一个点子,变成最终的产。每一层都是环环相扣的,涉及到各种决策,我们做么、做么、么组件、放么位置。每一个流程上的每一个决策,都会影响到产最终的样子和户使产的样子。

以我站用户体验五素的维度对产品设从 0 到 1 的梳理,希望家一些启发。

欢迎关注作者微信公众号:「UXD笔记」

如何从零开始设计一款产品?来看这篇超全面的教程!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

“咳咳咳”——QQ老网民对这个音效一定不陌生。这个音效背后的QQ“在线状态”功能,曾经乃是各大网友们游走冲浪的日常标配。但这个...
QQ
想了解什么是购物车吗?想了解购物车在电商场景扮演着什么样的角色?承载着什么样的定位吗?今天,带你一起了解购物车的前世...
体验设计
一直在做金融行业产品的用户体验设计,深刻地意识到用户的金融行为习惯和观念正在发生变化。 曾经,办理银行业务我们依赖的...
交互设计
步入职场,成为一名交互设计师快满三年,文章谈谈我今年成长的关键词,以及分享一些心得。 1. 实战 今年一整年我都在学习人...
交互设计师
当你在做饭的时候,发现油盐酱醋被放到了东南西北5米外的桌子上,你会怎么想? 当你发现从家走到超市的路被堵住了,你必须要...
用户体验设计
多年以前,当我们刚刚开始频繁听到「大数据」这个词的时候,很多企业和团队的负责人开始认为,这是他们所缺少的东西,是让产...
App设计
作为交互设计师或用户体验设计师。都需要对整个产品的数据情况有清晰的掌握,这将为设计提供更好的支持。 当设计师对产品数...
交互设计
很多人说看过很多设计道理却依然做不好设计,还不如直接看设计案例来的简单粗暴。今天为大家找到一篇实战好文,一个人,3天时...
APP 设计