联系信息
ShenZhen
Colin.w@aliyun.com
Ph: 18688414288

产品站的UX设计

⬤ 02. Page Design Guide

一个优秀的
详情页指南

I. 确定你的用户类型

我们首先要确定产品类型,只有这样我们才能开始做设计。通常,我们在数码领域,会把用户按两种方式分类。
首先是购买决策类型。

• 外观用户,也就是颜值导向的用户。
• 品牌用户,在购买决策的时候品牌信任度最强,优先购买认可的品牌,或者需要是品牌产品。

• 功能型用户,通常也是性价比用户,在意功能导向,希望以最少的钱买到最多的功能。
• 口碑型用户,看中别人的推荐,口碑和评价是其主要的决策依据。

以下四种颜色作为决策逻辑的区分。以下是案例:

外观(红色)
品牌(黄色)
功能(蓝色)
口碑(绿色)
这个手机长得好看啊
屏幕显示效果很好诶
我喜欢的Idol代言的
这个手机也太火了吧
天呐! 自拍效果太好看了
拍照效果也太强了吧
居然是和XX品牌联名的
我只买这个品牌的手机
我只买这个价钱的手机
我一可用这个品牌
我只看重这个功能
我习惯了这个系统
就要打游戏快
别浪费我时间
朅伐惠? 行, 就这个
这个栧价比更高
官网买好像更便宜
这个功能对比起来还不错
配置好像差不多
拍照是这个品牌还是那个好?
好贵, 朅点心动
降价好像挺不错的
有赠品, 好像挺划得来
现在在做活动, 最划得来
大家都推荐这个
懒得挑, 随便选了
小红书都说它好
你说买什么就买什么
XXX推荐的哦

😊 注意:不同的场景和品类中,用户各个决策导向占比是会变化的

下图是我们对已有产品的用户占比分析的展示。

II. 设计你的信息结构

我们最重要的环节是确认你产品的主要受众:
比如你的产品非常漂亮,外观设计花费了大量的精力,同时品质又非常的好。那么这个产品的定位必然就是高端类型的设计。
在页面设计中,优先强调其外观,设计获得的奖项,品质的认证。——第一信息优先级是外观+口碑信任类型为主。
不是其他不重要,而是比例占比的优先级。
右图展示了一个页面的各类型占比。比如页面一开始的banner就是红色(外观)为主,在里面同时需要具备品牌信任类信息+核心功能。
接下来后面也是一样,逐渐过渡到参数和外观为主。
这就是一个页面的占比的大致构架。

错误的做法我们非常常见:

• 过多强调功能,强调性能的先进性,然后访客占比较高的是女性。
• 过多的调颜值和服务,但事实是以直男为主的用户。
• 价格较低的青春款,强调高品质和服务的白领为主的用户。

各种错误的示例非常多,做设计的时候,不能只看到好的案例和竞品是这么做,直接拿来主义的使用。而不研究清楚你的目标、受众是怎样的。

😊 我们需要做到的是:产品定位+目标受众,和信息结构与用户动线的绝对匹配!

实在不知道受众的情况下,我建议了一份标准的万金油结构,大部分情况下不会太错误。
  • 外观第一,不管怎么样,先把最漂亮精致的外观放在前面。
  • 其次是信任第二,也就是把品牌认证,实力,安全认证这些作为第二优先级。
  • 功能第三,看详情就是奔着这个来的,所以展示功能非常重要。男性用户为主的话,建议放大参数,和核心文字。女性的话,重点更讲解决方案,场景,代言人这种。
  • 最后,参数和一些其他扩展阅读放在最后面。

 

下面是一个案例图示

😊 有了用户优先级以后,详情页的前2-3屏以内,外观、信任、功能、口碑都必须都要有。

来访问你的页面的用户是一定有多种的,虽然有倾向性,但是还是一定要给各类用户都有喜欢的内容。

后面的体验原则,会更好的说明这一点,尤其是用户是如何浏览页面的。

II. 一定要记死的用户洞察

1. 用户会看多少内容

面对网页,人们只有在对内容真正感兴趣的时候,才会逐字阅读。他们通常会快速地略读(尼尔森),寻找页面中突出的关键词、有用的标题、简短的段落,和易于扫视的列表。因为急着要找到他们想找的特定信息,他们会跳过跟自己无关的内容。

所以,不要指望人们会仔细阅读那些看起来既不易于扫视,又跟他们无关的内容。在网页上应该避免长篇幅文本、冗余说明、营销文案和客套话。
  1. 用户阅读方式: 用户在网页上通常不会逐字阅读,而是通过扫描页面来获取信息。他们会挑选出个别的单词和句子,快速浏览以寻找相关内容。这种行为使得用户对网页的阅读效率提高,但也意味着许多内容可能被忽略。
  2. 扫描行为的稳定性: 根据过去13年的眼动追踪研究,用户的基本扫描行为保持稳定,尽管网页设计不断变化。用户倾向于快速浏览页面,寻找对他们有吸引力的信息。
  3. 阅读时间限制: 在平均的网页访问中,用户通常只能阅读最多28%的文字,实际上更可能只阅读20%。这表明,用户的注意力有限,网页设计需要考虑如何在短时间内传达关键信息。
  4. 内容聚焦实际阅读: 当网页内容能够帮助用户集中注意力在感兴趣的部分时,用户可能会从扫描转变为实际阅读。这种转变需要良好的内容布局和设计,以引导用户的注意力。

用户的阅读少到什么程度?

2. 用户会滚动多少屏幕?

非常多的产品经理或者需求方,都喜欢把所有内容都全部放在第一屏,生怕别人看不到。认为第一屏之后的内容就不会有人看了。 在九十年代中期人们还不习惯滚动页面,但如今滚动页面绝对是很自然的事情。对于连续且篇幅很长的内容,比如一篇文章或一个教程,页面滚动的可用性甚至比分页显示更好。 所以不必把所有的内容都挤到主页的顶部或第一屏。不过为了确保人们会滚动,你需要遵循一定的设计原则,并且要让你的内容可以持续地吸引访问者读下去。同时要记住,第一屏的内容仍然会得到最多的注意力,而且当用户在考虑你的页面是否值得一看的时候,它也是至关重要的。 当前的用户习惯已经非常的习惯滚动。尼尔森的研究表明超过90%的用户会在进入页面后发生滚动。 后面的内容滚动多少和你的设计息息相关。

为了使用户继续往下滚动需要遵循3个原则:

1、避免完整性错觉
这篇文章详细讲述了什么事完整性错觉——Nielsen Norman Group:什么是网页设计中的完整性错觉,如何避免?https://www.jianshu.com/p/73223d86fb7a
设计中一定不要画面铺满屏幕而没有任何指示,实际上指示不如一开始就漏出要滚动的内容。关于滚动设计,本文末尾有相关研究。

2、避免重复错觉
当你的后续的内容,毫无变化且结构一模一样时,用户会很快建立认知,你后面都是这样,没什么好看的了。所以设计师长页面时,一定要出现巧妙的一些变化,不管是结构还是内容本身。最好,在恰当的滚动悬崖处增加兴趣的内。

3、最最重要的一条,就是内容结构吸引用户,在断崖处及时放置好的内容。
如下图所示,内容下跌的非常明显。

因此现在数码页面公式是:第一屏图(外观+价格+核心卖点)+第二屏-第三屏(主要卖点与核心外观)+后续几屏(大标题+参数+外观)。这样的结构基本能很快稳住滚动的下跌。 数码类产品往往都是看中功能性价比和外观为主,上面这个结构非常有效。

你需要依据自己的产品来构建你的滚动策略。

3. 用户对什么内容感兴趣?

以上两点非常系统的介绍了用户行为。
一是,大部分情况下,用户是以略读进行阅读的,只会对自己有兴趣的进行停留。
其次,25%左右的用户会滚动到页面底部。但实际上,毫无意义的内容、对用户没吸力的内容,5%可能都无法达到。
那么需要更加精准的观察用户对哪些内容感兴趣。所以我们必须要还原热力图,以及观察录屏。这些都能更充分的理解和实践用户的行为。
对于数码站,以下是一些兴趣点。
  1. KSP用户会停留并阅读;
  2. 参数会是重点停留区域,如5000mAh容量,100W快充,256GB超大内存;
  3. 颜色切换选择会让大部分用户停留,并点击切换;
  4. 重点关心的外观,如皮质的细节,镜头模组会让用户额外有兴趣;
  5. 展示产品的界面部分,用户会仔细看界面——他想知道里面的功能操作细节;
  6. 信任和真实的内容会更好;

4. 可用性测试一定要做吗

可用性测试实在太重要了,他能让你完全规避掉非常多的,只有上线后才能知道的问题。这样一来,完全能够减少迭代和后期的修改。
而且不仅影响用户的访问体验,还直接关系到网站的成功与目标达成,例如转化率、用户留存率和品牌形象。根据研究,超过 50% 的用户会因网页难以使用而转向竞争对手。
😯 不管多么简陋和简单,可用性测试一定要进行。
那么如何做好详情页的可用性测试?请务必满足以下条件:
  • 客观的事实和观察,比主观的表述更加重要
  • 能够看到热力图和操作录屏是最佳的
  • 对用户进行前期的类别判定
完整版本的可用性测试:
Step1:准备好你的DEMO,模拟越真实越好,在AI的帮助下,写一个HTML太容易了。
Step2:埋入Hotjar或者Clarity的代码,可以远程录屏和复现操作轨迹。
Step3:设计好你的可用性测试方案,包括目标、问题、链接、形式、数量、结果分析方式等等。
Step4:邀请目标用户点开你的测试页面吧
Step5:回收结果,并进行客观分析
以上是5个步骤,如果条件不允许怎么办呢? 你的Figma原型,直接要求你同事里面符合目标用户的对象(且和项目没有利益关系的),然后他浏览一遍操作一遍,并观察下他的操作:
  • 尝试点击了哪里,做了什么操作?
  • 他的滚动速度是怎样的?
  • 他是怎么阅读的?哪些信息进行了停留
  • 他把哪些信息操作了
  • 是不是顺利的完成操作
  • 让他描述下这个详情讲了什么
⬤ 03. Visual Design

视觉设计上
恰当的美学表现

美有各种各样的,的受众是最重要的。
每个画面其实都是在描述你受众的情况。他们会觉得是否喜欢和匹配。画面是在传递的情绪和讲述故事。
在ONEPLUS 7 Pro,是一款完整对称,无打孔的全面屏手机。我们想表达手机的完整美学,一种完美的比例和身体的性感。
强烈的光影、自然、性感、完美的线条。OnePlus 7系列的详情页所表现的就是产品的性感、完美的光影
当我们需要挑战者形象的时候,ONEPLUS的视觉是这样的
⬤ 04. Skills and Tools

工具和
技巧

需要全链路的设计组合

设计需要从用户研究、信息结构、视觉效果、交互效果和动效设计全链路的实现。
我们不需要复杂的效果,那么也要用户行为研究+信息结构+交互动线+视觉设计+简易可用性测试这个流程才算比较完整。
这个组合,只需要UX设计师与视觉设计师既可以完成;
UX设计来完成用研、交互、动线、交互效果的设计;视觉设计师完成风格、主画面、各个模块的视觉UI设计。
由此,1+1组成UXD项目小队,以解决从用户研究,到最终设计实现上,全链路且端到端的设计。

用户旅程和转化漏斗为蓝本

在设计过程中,始终考虑转化漏斗+用户旅程,这样的设计才能兼顾用户体验和业务目标。
我们需要优秀的用户旅程,这个旅程和业务模块高度挂钩,和商业目标贴合,也描述了用户体验和用户目标。

任何项目都会是用户旅程的一环,你解决哪个阶段的问题?会提升哪个商业指标?预估改进什么样的用户体验?设计并不是盲目的设计,而是有依据的设计。

 

使设计保持透明

只有保持高效的沟通,才能不断的优化并解决问题。

  • 和业务方保持沟通,以知晓是否满足转化漏斗,满足业务目标,扫除信息迷雾;
  • 经常和其他设计师保持沟通和让人批评,避免思维盲区;
  • 让其他人员经常来看一遍,随时保持“可用性测试”的状态;

客观的、解决问题、更好的用户体验才是我们的追求,保持对设计的持续开放态度,你会有越来越优秀的设计水平。

熟练的交互式页面设计技巧

交互式设计是指,随着页面走动,设计哪些动态以及让用户进行交互来进行体验。
这其实是视觉动线的升级版本,让用户随着滚动,或者操作,或者浏览,能产生对应的效果变化。

以下是用户印象描点排序:

😈 交互行为 > 动画> 人物图片 > 产品图片 > 文字,
在进行设计时,不要想着一次性到位,可以先是极其简单的效果进行设计。然后逐步的优化到想要的效果。例如左侧的案例。

工具

用户体验理论:ContentsquareUsability blog尼尔森诺曼
交互效果设计:AE+Principle
用户调研工具——Hotjar,Clarity
点击测试工具——Chalkmark;
白模和渲染 —— Keyshot;
Colin

发表回复

本网站针对PC端设计,移动端请不要访问

zh_CNChinese