首页

【设计法则】如何精进你的设计知识体系之—古腾堡原则!

清阳 设计思维

“在设计的道路上,若暂时看不清远方,不妨先俯身夯实脚下。兰亭妙微坚信,真正的专业并非灵光一闪的偶然,而是源于严谨知识体系的必然。我们主张让每一个像素的落点都有理可依,让每一次交互的流转都有据可引。只有用逻辑筑起设计的基石,才能让作品在纷繁的视觉中站得稳、立得住,让人不仅看见美,更能看见背后的价值。”

一、什么是古腾堡原则

古腾堡原则是由14世纪西方活字印刷术发明人约翰·古腾堡提出,早在20世纪50年代在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,像读书一样,由左到右,从上到下。

经过研究,他最终得出了被后人熟知的「古腾堡原则」,古腾堡你可能觉得既难懂还陌生,它还有另外一个名字:对角线平衡法则。

这个原则的支撑点为「阅读重心」,由人们一直以来的阅读习惯形成。将页面的设计与阅读的重心相协调,能帮助读者梳理阅读的逻辑。据研究发现,这么做能提高读者阅读的节奏和理解能力。

古腾堡原则指人的阅读方式遵循从左到右的眼动规律,且画面显示的东西都分成四个象限:

1、第一视觉区(Primary Optical Area):处于左上方,读者首先注意到的位置。

无论用户在搜索内容、主动阅读或者快速浏览,这都是用户阅读的第一落点区域。因此在这个区域我们应放置一级内容或者核心功能。

2、最终视觉区(Final Optical Area):处于右下方,视觉流程的终点。

这个区域是用户浏览行为的最终落点区域,当用户浏览到这个部分时需要采取措施,我们可以在这里插入按钮或者行动点。这也就能解释为什么按钮都会在右下角出现。当用户的浏览行为结束后,可以进行操作反馈。

3、强休息区(Strong Follow Area):处于右上方,较少被注意到。

在这个阶段,我们不应该去设置一个重要的行动点,一方面用户容易忽视,另一方面,当用户浏览完中心区域的内容后,再返回到强休息区操作,视线会有个折回过程,用户体验并不太理想。

4、弱休息区(Weak Follow Area):处于左下方,最少被注意到。

用户对这块的注意程度最弱,因此也用来放置最弱的信息提示。

二、古腾堡原则在设计中的应用

遵循古腾堡法则,界面中的左上和右下是用户视觉最为重点关注的位置,设计师应该把界面的关键元素放在主视区,最终视觉区可以放按钮,休息区可以用来放一些相对次要的内容,如辅助图形、文字信息。

比如我们常用的页面弹窗、各种文件和合同文件等等就是采用这种原则进行设计的。

1、古腾堡原则在web端界面布局设计

我们可以根据一般的用户视觉习惯,来放信息权重不同的内容。

第一视觉区是用户浏览网页的起始点,最终视觉区是结束离开网页的终点。整体是根据人们从上到下、从左至右有规律的阅读习惯设计的。

我们可以看到人人都是产品经理网站信息结构的布局

1、根据起点第一视觉区的特性把LOGO和导航放在左上角,推荐的文章也以图片的形式放在这里进行曝光;

2、弱休息区则放一些最新推荐的文章,吸引用户不断往下翻;

3、高闲置区则放文章内容之外的惊喜推送内容;

4、最终视觉区则是提供给用户相关推荐课程或者想要加入的社区入口,也是常见的放置广告的地方。

2、古腾堡原则在移动端页面布局设计

古腾堡图表应用最典型的例子就是商品详情页,在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角则放置最终促成用户交易的购买按钮。

3. 图文类信息

结合古腾堡的视线强弱分析,我们可以得知左侧的首要视觉点一定是强视觉区,但是有时候简单的图片+文字的排列也会有很多设计思考。

比如:第一个图今日头条的布局,光看它的配图我们根本猜不出来整体条目所表达的内容,所以头条的图片元素传达信息的效率远不如文字,所以第一视觉区会留给文字信息;

而第二图中美团列表也图片所传达的信息效率更直观,会一眼告诉用户我这家是西餐还是中餐,是早点还是正餐,所以在美团的条目中图片会被放在第一视觉区。

这两种布局的目的都是让用户可以快速浏览,不让用户在接收信息时受阻造成体验打断。

此处还可以延伸一下,如上图第三个图,头条的视频条目也是先文字后视频,为什么呢?

按理说视频的传达信息效率要远大于配图,猜想一下,头条的设计是想将视频作为终端休息区进行视觉强化,第一,可以强化信息种类的分类让用户更好辨识,第二,让视频条目传达信息效率更快且满足整体使用APP时一致性的用户心智,让用户能快速上手并且顺畅体验浏览。

三、古腾堡原则在按钮设计中的应用

我们还可以依据古腾堡原则来解读关于按钮位置背后所呈现的设计思路。

1、标题和操作按钮

我们都知道引导用户操作的页面中,一般页面按钮都在界面底部是因为离手近,方便操作,但不仅仅如此还因为浏览是用户的第一行为,他们的视线会根据页面元素进行移动,最终停留在底部结尾的地方。

根据古腾堡原则,将标题和内容放在顶部即第一视觉区,引导用户浏览所有内容后注意到底部的按钮作为终端休息区,这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。

2、底部垂直双按钮

按钮的水平布局和垂直布局:

垂直布局下,用户浏览时的眼动路径单纯向下,这种由上自下的浏览效率是最高的。

水平布局时,用户由左至右的浏览效率要明显低于垂直布局,但也同时避免了垂直布局下过快的决策造成风险。

这和表单布局方向类似,那些想要让用户快速浏览并完成的表单往往采用了垂直布局,而需要用户仔细阅读、认真填写的表单往往使用了水平布局。

如果产品希望用户对每个按钮都有足够的关注度,垂直摆放是最佳选择,且【重要按钮应该放在页面最底部】,虽然垂直双按钮在样式上做了区分,但用户同样会停留一段时间将按钮的内容进行对比思考。

那么,按照古腾堡原则,重要的按钮应该放在页面最底部,但是现实我们看到的垂直摆放按钮的主次反而是相反的,主要的CTA 按钮往往被放置在了上方?

观察上图,有没有发现浅色按钮很容易被忽略掉,这样就违背了产品要保证每一个按钮都要有足够关注度的目的,所以我们要违背古腾堡原则来满足业务需求,正如我们所看到的微信授权页面一样。

为了保证「允许」与「拒绝」这两个独立的按钮能够被用户足够的重视,并且其中的任意一个按钮不会被轻易的忽略掉,这里将「允许」按钮颜色加重设定为主按钮,并且放在「拒绝」按钮之上,让眼睛原本垂直向下的运动轨迹产生回流的变化。

“拒绝”按钮能让用户注意到,这样便起到了防错性,缺点是会对用户造成流程上较强的打断性,适用于需要用户思虑、审核信息的场景。

所以,这也提示我在设计中要思考:设计原则虽是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系。

3、水平按钮主次

水平摆放的按钮,最典型的就是电商类型的详情页,【加入购物车】和【立即购买】按钮。

结合古腾堡原则的视觉重点说明,右下角视为视觉终端区域,即视觉最终停留的位置,所以他们将与转化率相关的【立即购买】按钮放在了界面的右下角,让用户更容易关注到。

再比如:比较常见的「确认」和「取消」弹窗样式,通常是在需要让用户确认某种操作行为时出现,有可能是提交表单、确定信息、页面操作引导等等,目的是让用户最快地看到主要操作内容,为用户提高操作效率。

这些按钮的差异不仅仅是位置,还包含按钮的样式、颜色、尺寸等等维度都存在着明显差异。比如上图的,页面引导按钮,支付宝的转入转出按钮位置,都是一样的逻辑,也是我们在设计中的一些设计支持业务转化的一种方式。

为什么要这样设定水平按钮主次关系?

平常我们所看到的弹窗,推荐按钮都是在右侧,那么将推荐按钮放在左侧会怎么样?如下图所示:

当我们在设计表单中的组合按钮时,比如:取消与确认、提现与充值。根据古腾堡法则,用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area),最终停留在结尾的终点区(Terminal Area)。

不难看出推荐按钮放在右侧后,眼睛的运动轨迹会在水平方向轴上来回的往复运动,无形中增加了用户选择时长。

水平多按钮同样存在着反面应用

当业务需求需要用户产生视觉回流,或者想要让用户习惯性的点击右下角终点位置,比如常见的卸载软件提示弹窗。

相比横排按钮,用户点击主操作按钮时会更加顺畅,有利于业务的转化,对于用户体验流程的打断也会比竖向按钮相对弱些,适用于能帮助用户快速完成流程的场景,具体使用哪种布局要权衡体验、用户与业务目标之间的统筹关系。

4、右上角按钮位置

根据古腾堡原则,右上角区域属于强休息区,用户对这块的注意程度最低。

既然如此,为什么页面的“发布”、“编辑”等按钮都在右上角呢?

顶部按钮的设计,关键还在于可编辑内容区域,而不是按钮本身,顶部按钮更适用于「编辑页面」,顶部按钮尺寸较小,它所占空间有限,因此在操作上相对来说不便于点击,需要用户谨慎操作。

而底部按钮的核心在于按钮本身,而不是内容。底部按钮更适合全局最终的确定,提交等操作按钮。

四、应用古腾堡原则需要注意点

1、虽然古腾堡图所揭示的阅读规律是普遍适用的,但是只在信息均匀分布的页面证明古腾堡原则的阅读规律。

若是为了突破常规或达到一种强烈的冲击,古登堡图所揭示的视觉规律经常被设计师所颠覆。常用的颠覆方法为采用特别醒目的形象,或者大小颜色更为鲜明抢眼的元素置于闲置区,从而改变玩家的阅读顺序。

上图banner中,右侧的3D内容第一吸引用户眼球,而后才会看到左边的文字,视觉流程如红色箭头,这就是突破古腾堡常规设计原则的常见设计。

2、语言本身的阅读顺序可能也会产生一定的影响,例如阿拉伯语从右至左的文字顺序可能并不符合古腾堡原则的阅读规律。

3、用户已熟悉,并养成独特阅读习惯的页面也不一定遵循此规律,比如用户自动跳过轮播广告的【轮播图盲视区】现象。

五、总结

古腾堡图贯穿于界面设计的每个角落,只要谨记阅读引力的顺序:从上到下,从左到右,综合阅读流来排布视觉层级,即能做出合理的设计。

但设计师也不能局限于古腾堡图的规律中,要善用规律并结合其他设计知识做出更加完美的设计。

应用建议:

  • 原则是设计的基础,并非一成不变,需要结合设计原则与产品目标之间的关系进行合理运用;
  • 不需要死遵循原则,比如焦点模式下用户将首先查看页面上最主要的元素(视觉重量最大的元素或区域)。顺序将取决于这些焦点的相对权重以及指示下一步要看的任何视觉提示。
  • 想要让用户进行某种操作时,正常情况下主要按钮放在右侧,操作流程畅通,提高效率,需要用户确认思考的场景下,主要按钮可放在左侧,达到反复确认的目的。
  • 创建层次结构和流程会颠覆视觉动线的模型。

转载:人人都是产品经理

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

产品出海设计有哪些细节需要注意?来看滴滴的国际化设计细节!

清阳

设计同学都知道,大多数 “飞机稿” 都会参考一些海外 App 的设计,这类设计往往凭借简洁的视觉呈现与国际化的排版风格,让页面看起来更具高级感。这种 “高级感” 的背后,实则是海外产品设计体系与国内市场需求差异的直观体现。
 
俗话说:“一方水土养一方人”,这一点在 APP 设计中展现得淋漓尽致。不同地区的用户习惯、文化背景与市场环境,直接塑造了产品的设计逻辑。本次调研聚焦 Uber 与滴滴(国际版 / 国内版),从视觉设计、页面结构、功能架构等维度,兰亭妙微ui设计公司结合海外产品设计的通用规律,深入分析国际 APP 与国内 APP 的核心差异,为出海产品设计提供参考。
 

1. 排版:留白艺术与信息密度的平衡

打开 Uber,页面结构呈现出极强的“克制感”——利用大面积留白引导用户视线聚焦核心功能(如叫车入口、目的地输入框),无多余信息干扰,页面整洁度与操作流畅性俱佳。
滴滴国际版同样遵循这一逻辑,功能分区明确,留白充足,用户无需在复杂布局中费力寻找关键入口。

image.png


相比之下,滴滴国内版的内容排版信息密度明显更高:在有限的屏幕空间内,不仅包含叫车功能,还叠加了活动提示、附加服务入口等内容,排版相对紧凑。

image.png

image.png

这种差异背后,是两种设计理念的碰撞:

  • 国际 App:遵循北美、北欧等地区主流的“极简主义”设计原则,通过留白分割区域,弱化次要元素,让核心功能成为视觉焦点,降低用户决策成本。

  • 国内 App:受“一站式服务”需求驱动,需在单页面内承载更多功能与信息,因此通过层级分明的排版(如卡片分区、字体权重区分)提升信息承载量,满足用户“一次打开、多点获取”的使用习惯。


2. 色彩:从“功能导向”到“氛围营造”的差异

色彩是用户对产品的第一感知。国际与国内 App 的色彩运用逻辑,恰好呼应了不同市场的视觉偏好:

 

  • Uber 采用“黑白为主、蓝色点缀”的极简配色——白色背景保证页面清爽,黑色文字确保信息清晰,仅在功能按钮(如“确认叫车”)和关键信息(如预估费用)处用蓝色强调。

  • 滴滴国际版 色彩使用略多于 Uber,但仍以“功能区分”为核心——地图起终点用对比色标识、特殊车型用专属颜色标注,避免多余装饰色造成视觉疲劳。

  • 滴滴国内版 则采用“高饱和度、多色彩分区”策略——橙色代表主叫车业务、绿色代表拼车、蓝色代表巴士服务,同时用不同颜色区分路况(如红色拥堵、绿色畅通),通过强烈的色彩对比吸引用户注意力,贴合国内用户对“热闹感”“明确区分”的视觉偏好。

由此可见,国际 App 在色彩运用上大多偏好简洁、淡雅的色调,有助于降低用户的视觉疲劳,让用户专注于内容本身;而国内 App 则常用丰富鲜艳的色彩组合来区分功能模块,通过强烈的色彩对比营造活力满满的视觉氛围。

为更清晰对比差异,我对 Uber 和滴滴国内版的首页进行了区域划分:

image.png

整体来看,两款软件的首页布局大致可分为五个区域:功能区域、下单区域、更多功能、活动推广、底部 Tab。二者功能分类框架相似,但每个区域的“功能优先级”与“信息承载度”差异显著:

image.png

 

1. 国际 App:核心功能优先,弱化干扰元素
Uber 功能模块与信息层级区分清晰,几乎没有营销广告信息干扰,减少了用户无意义的操作。页面功能聚焦,为用户提供简洁高效的叫车服务,注重专业性,降低页面思考时间。在成熟的海外市场,用户对 App 的使用目的明确(如 Uber = 叫车),因此产品无需通过“附加功能”吸引用户,而是通过优化核心流程提升体验。

2. 国内 App:全能聚合,追求“一站式服务”
滴滴国内版则走“全能聚合”路线,追求一站式服务。除了主要的叫车功能,页面为更多功能留出了近一半空间,整合了搬家、借钱、快送等生活服务,一个 App 就能满足多种需求。在国内庞大的互联网市场,单一功能难以留住用户,因此“全能化”成为主流策略。

image.png


国内与国际 App 设计的差异,并非单纯的“审美不同”,而是由文化语境、价值观念、用户习惯等深层因素共同决定的:

  1. 语境文化:低语境 vs. 高语境的表达差异
    海外(以美国为代表)属于“低语境文化”,人们更习惯“信息直给”——因此 App 设计需减少视觉干扰,用留白和简洁排版让信息清晰易读。
    国内属于“高语境文化”,用户对“信息密度高、多元素叠加”的设计容忍度更高——即使页面包含多个功能入口,用户也能通过上下文(如色彩分区、位置习惯)快速定位需求。

    image.png

  2. 价值观念:个人主义 vs. 集体主义的行为导向
    海外强调个人主义,用户更注重隐私与自主选择权,App 设计也更倾向于简洁、专注,减少不必要的打扰。
    国内强调集体主义,用户更倾向于“从众与热闹氛围”,活动推广、多服务聚合正是为了满足用户“融入集体、获取实惠”的心理需求。

    image.png

  3. 信息获取习惯:专一性 vs. 综合性的使用逻辑
    海外用户习惯“一个 App 对应一个需求”,对功能专一性要求高——因此国际 App 无需整合多余功能,只需打磨核心体验。
    国内用户习惯“一个 App 解决多个问题”(如滴滴 = 叫车 + 搬家 + 快送),对“一站式服务”需求强烈——这也促使国内 App 通过功能聚合来提升用户留存率。

    image.png

  4. 审美习惯:功能性 vs. 意境感的视觉偏好
    海外更注重“功能性审美”——Uber 的黑白配色、简洁排版,本质是“为功能服务的审美”,让用户专注于操作而非视觉装饰。
    国内更注重“意境与氛围营造”(如滴滴国内版用鲜艳色彩营造“活力感”),同时受“从众心理”影响,使“高饱和色 + 多功能”成为主流设计范式。

    image.png


从 Uber 与滴滴的对比可见,国际 App 的“极简风”与国内 App 的“聚合风”并无绝对的优劣之分。前者是成熟市场、低语境文化与个人主义价值的产物,后者则适配国内竞争环境、高语境文化与多元用户需求。

对设计从业者而言,海外 App 的参考价值不在于单纯复制“高级感”的形式,而在于理解其背后“用户需求优先”的设计逻辑。唯有结合目标市场的文化特征、用户习惯与商业需求,才能做出真正适配用户的好设计。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

深度解析|大厂都在用的「选项顺序效应」,如何影响用户决策?

清阳

数字化产品竞争中,「选项顺序效应」被大厂广泛应用,借首因、近因效应调整选项顺序,左右用户决策。深耕UI/UE设计的兰亭妙微(蓝蓝设计)在实践中发现,它是衔接产品目标与用户体验的关键。本文结合大厂案例与兰亭妙微实践,解析其对用户决策的影响,提供落地参考。

什么是选项顺序效应?

选项顺序效应(Order Effect) 指用户面对一系列选项时,选项的呈现顺序会显著影响其决策结果。这种现象主要由两种认知偏差驱动:

  • 首因效应(Primacy Effect):最早出现的选项因获得优先曝光,更容易在用户记忆中留下印象。

  • 近因效应(Recency Effect):最后出现的选项更接近决策时刻,在短时记忆中更为突出。

在认知心理学层面,这与人类有限的注意力资源、工作记忆容量以及信息加工方式密切相关。用户并不会严格比较所有选项,而是依赖顺序线索进行“满意化决策”(Satisficing)。

在UX/交互设计中,该效应常见于:

  • 表单与调查(选项顺序影响回答倾向)

  • 电商与订阅套餐(不同顺序改变选择分布)

  • 导航与推荐系统(前置或置底选项更易被点击)

核心风险:用户的选择可能更多受顺序驱动,而非真实偏好。若在设计或研究中忽视这一点,可能导致数据偏差与不公的用户体验。

image.png

为什么顺序效应如此强大?

1. 注意力分配

用户的视觉焦点通常遵循阅读习惯(从上到下、从左到右),前置位置天然获得更多曝光。

2. 记忆机制

  • 首因效应:最早出现的选项因更多复述与加工,更易转化为偏好。

  • 近因效应:最后出现的选项因处于决策“临界点”,直接影响最终选择。

3. 认知负荷与满意化决策

当选项过多时,用户难以全面比较,会采用“选择第一个合理选项”的启发式策略。

4. UX场景中的放大因素

  • 导航栏或底部菜单:靠前或靠下的功能更易被点击

  • 订阅套餐:首位选项被视为“默认选项”,末位高价套餐因“对比效应”更突出

  • 问卷调研:固定选项顺序可能导致结果偏差

核心洞察:用户的选择并非完全理性,界面排列与信息呈现方式深刻影响着决策路径。

设计场景中的顺序效应应用

1. 导航与功能入口排序

场景:底部导航栏或首页主菜单,常将“消息”“首页”等高頻功能置于最左侧或最上方
逻辑:利用首因效应,确保用户优先接触核心任务,降低操作成本

2. 订阅套餐与付费选项

场景:会员订阅页常见“基础版—推荐版—高阶版”布局,并对中间档进行视觉强化
逻辑:结合顺序效应与折中效应,引导用户选择中间档,提升转化

3. 表单与问卷选项设计

场景:兴趣选择、调研问卷
逻辑:为保证数据客观性,应采用随机化选项顺序,避免结果偏差

4. 产品推荐与信息流排序

场景:推荐列表或信息流
逻辑:前列选项点击率与转化率显著高于后列,基于“认知吝啬”原则,用户倾向于选择思考成本更低的前列结果

5. 专业启示

  • 积极作用:优化排序帮助用户快速定位高频功能、常用选项,提升效率

  • 潜在风险:问卷结果可能偏离真实意图;过度迎合商业目标可能侵蚀用户信任

核心思考:顺序效应既是交互优化的工具,也可能成为操控用户选择的手段。设计师需在效率与公平性间寻求平衡。

案例分析:顺序效应在产品中的实战

案例一:美团外卖商家列表

场景:美团外卖频道中,顶部Tab固定展示「附近商家」与「特价外卖」两个入口。滑动时右侧动态面板偶发提示引导切换至「特价外卖」,底部导航栏左侧按钮由“外卖”动态切换为“刷新”。

设计说明

  • 「附近商家」置于首位,符合用户直觉预期

  • 「特价外卖」虽在次序上处于弱势,但通过动态引导与样式差异获得额外感知加权

  • 底部导航栏的再定义,使用户在滚动后自然转向“实时更新”

启示:顺序效应中,若需突显非首位选项,可借助动态触发、UI再编码、差异化样式打破固有注意力分布。但过度引导可能带来注意力稀释与操作负担。

image.png

案例二:京东外卖首页频道与筛选逻辑

场景

  1. 顶部Tab依次为:精选推荐、品质正餐、咖啡、奶茶果汁、快餐便当……遵循由泛化到具体、主流到小众的排序

  2. 「精选推荐」下设有“外卖百亿补贴”专栏及个性化推荐餐馆列表

  3. 餐馆列表支持多维度筛选(优惠活动、商家特色、品质优选、配送速度)

设计说明

  • 将“精选推荐”置于首位,确保用户第一眼落在平台最想推广的内容

  • 高频需求(品质正餐、咖啡奶茶)置于前列,符合使用概率分布

  • 多维筛选满足理性比较需求,降低选择焦虑

启示:顺序效应不仅体现在Tab排列,更贯穿专栏配置与筛选组合。通过“顺序+补贴+筛选”三层递进,逐步引导用户决策。但过度强调补贴可能导致用户忽视多样化商家,筛选维度过多也可能增加决策成本。

image.png

案例三:Instagram底部导航栏

场景:Tab顺序为:首页、搜索与探索、发布、Reels、个人主页

设计说明

  • 首页首位:确保用户进入应用后立即接触社交动态,增强亲近感

  • 发布按钮居中:强化“内容生产”的战略地位

  • Reels第四位:紧随发布入口,借助邻近性推动短视频增长

  • 个人主页末位:形成“消费→发现→生产→沉浸→展示”的闭环路径

启示:Tab顺序基于用户心理路径引导,逐步塑造行为习惯。但战略倾斜可能稀释社交关系核心,使平台从社交转向纯内容消费。

image.png

顺序效应的边界:何时会失效?image.png

  1. 信息密度过高:选项过多时,首尾优势被削弱,用户更多依赖搜索、筛选或排序功能

  2. 用户目标明确:用户带着特定目的时,顺序效应几乎失效

  3. 习惯与算法干扰

    • 高频使用形成固定操作路径

    • 个性化算法动态排序可能降低用户对首尾推荐的信任

    • 中间选项若使用强烈视觉强调,可能覆盖顺序优势

设计的责任:平衡引导与公平

伦理考量

  • 知情权与透明度:确保用户理解推荐逻辑,避免误导或操控感

  • 避免过度操控:首尾位置与稀缺、优惠叠加可能引发焦虑或后悔

  • 平等呈现:在信息密集型平台,避免无意中造成曝光偏差

  • 长期信任:短期优化若损害信任,将影响品牌长期价值

反向策略:用顺序激发自主选择

image.png

  • 刻意打破首尾优势,将重要选项置于中间或随机排序,迫使用户主动浏览

  • 内容平台可通过交替首尾内容,提升冷门内容曝光率

  • 教育平台:调整习题顺序,避免学生只关注首尾任务

  • 电商平台:将冷门商品穿插中间位置,促成更多探索

反向使用启示:顺序效应不仅能引导用户,也可通过反向策略激发主动性与探索欲。设计师应让心理机制为用户价值服务,而非单纯追求短期转化。

 

设计总结

选项顺序效应揭示了:人们面对多个选项时,先看到或最后看到的选项更容易影响决策。这对设计师而言既是机会,也是责任。

核心洞察

  • 首位和末位天然吸引注意,可用于突出关键动作或推荐内容

  • 当用户目标明确时,顺序影响减弱,需结合视觉层级强化信息

  • 有意识地调整或打乱顺序,可以让用户探索更多中间选项

最终思考:设计不仅是优化行为,更是尊重用户决策的自由。巧妙的顺序安排,既能提升效率,也能保持体验的公平与透明。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

5 种用户浏览模式全解:用科学眼动逻辑优化页面布局

清阳

众所周知,我们大部分用户群体的阅读习惯是从左到右、从上至下,这与西方文化基本一致。下文将从浏览模式、浏览路径、页面布局三个维度展开分析,结合研究成果与实践经验,优化页面布局,提升用户阅读效率与体验。
 
早在 2006 年,尼尔森团队发表《眼睛轨迹的研究》报告,提出了广为人知的F 型浏览模式。除该模式外,经资料梳理,用户浏览网页时还存在多种典型模式,以下为详细总结(兰亭妙微 ui 设计公司)。
 

一、F 型浏览模式:长文本页面的主流轨迹

image.png

F 型是用户浏览长篇内容的核心模式,眼球以扫描为主,而非深度阅读,眼动热图呈现清晰的字母 F 形态。
 
  1. 顶部水平扫视:先聚焦内容区上半部分,形成 F 的顶栏;
  2. 次段短距扫视:向下滑动后,二次水平扫描范围更短,构成 F 的下横线;
  3. 左侧垂直扫描:最后沿页面左侧快速浏览,形成 F 的竖杆。
 
该模式适配 PC 端、手机端所有文本型页面,手机端因屏幕更小,F 型轨迹更紧凑。
 

F 型布局设计要点

 
  1. 头两段内容是核心,直接决定用户是否继续停留;
  2. 关键词前置,放在标题、副标题和段落开头;
  3. 左侧优先放置关键信息,契合用户垂直扫描习惯。
 

二、Z 型浏览模式:轻信息页面的最优选择

image.png

Z 型轨迹遵循从左到右、从上到下的古腾堡原则,眼动路径形成字母 Z,适合无大段文本的展示型页面。
 
用户视线会自然落在 Z 的起点(左上)和终点(右下),这两个位置是放置核心信息、行动按钮的黄金区域。
 

Z 型布局设计要点

 
  1. 重要信息放在左上、右下视觉落点;
  2. 简化中间区域内容,避免干扰视线流动;
  3. 适合落地页、首页、海报型页面设计。
 

三、专注浏览模式:深度阅读的特殊场景

image.png

专注模式是逐字精读状态,用户会投入大量时间阅读全文,不会遗漏信息。
 
仅在任务驱动、强兴趣导向时出现,比如学习资料、工作文档、深度干货文章等场景。
 

设计适配建议

 
  1. 减少干扰元素,保持排版简洁舒适;
  2. 保证文字清晰度、行间距与可读性;
  3. 无需刻意引导视线,聚焦内容本身即可。
 

四、斑点浏览模式:关键词驱动的碎片化浏览

image.png

用户只关注加粗、变色、高亮的关键词,或自身感兴趣的信息,眼动热图呈现零散斑点状。
 
这是用户快速筛选信息的常见方式,核心是只看重点、跳过无关内容
 

设计适配建议

 
  1. 核心信息用加粗、对比色突出;
  2. 控制高亮元素数量,避免视觉混乱;
  3. 关键数据、利益点单独标注。
 

五、分层蛋糕浏览模式:标题导向的高效扫描

image.png

当页面有清晰的标题、副标题、分级加粗时,用户会只看突出层级,快速略过正文,眼动轨迹像分层蛋糕的纹路。
 
这是仅次于专注模式的高效信息获取方式,也是用户最常用的快速阅读逻辑。
 

设计适配建议

 
  1. 建立清晰层级:主标题→副标题→重点句→正文;
  2. 用标题提炼核心,让用户 3 秒读懂内容;
  3. 重点内容加粗,弱化冗余文字。
 

 

关键排版结论:图片与布局的适配逻辑

 
  1. 信息型图片:对齐排版、Z 型排版差异极小,都能吸引用户关注;

    image.png

  2. 装饰型图片:优先用左对齐排版,用户可自动忽略,不干扰文字阅读;Z 型排版会增加图片曝光,但易分散视线;

    image.png

  3. 首图至关重要:决定用户对后续图片的价值判断,避免顶部放无意义装饰图;
  4. 用户浏览习惯:看完页面底部会回滑查看,建议添加「回到顶部」功能。
image.png

 

最终总结

  1. 长文本用F 型,展示页用Z 型,多种模式可嵌套使用;
  2. 信息图优于装饰图,无意义图片会被用户自动忽略;
  3. 核心信息放视觉热点区,层级清晰、关键词前置是通用原则;
  4. 适配用户回滑习惯,优化页面上下交互体验。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 

兰亭妙微设计:UI/UX 设计作品集中的推理分析创作心法

涛涛

在兰亭妙微设计多年的设计服务与人才培养实践中,我们见过无数设计师的作品集 —— 有的靠视觉惊艳出圈,有的凭逻辑深度打动甲方,也有的因盲目堆砌内容沦为 “流水账”。作为深耕 UI/UX 设计领域的专业团队,我们始终认为,作品集的核心从来不是 “要不要写推理分析”,而是 “如何让分析成为设计能力的背书”。

B端数据可视化设计,14个章节带你掌握表单设计(下)

清阳

表单是 B 端产品核心信息载体,优秀的表单设计能直接提升填写效率、降低错误率、减少业务成本,是 B 端体验与数据流转的关键环节。兰亭妙微ui设计公司在上篇基础上,用 14 个可落地章节,帮你掌握高易用性表单设计。

一、先明确:好表单的 5 个核心价值

 
  1. 提升体验:降低填写困惑,让操作更轻松顺畅
  2. 降低错率:清晰指引 + 实时校验,保障数据准确
  3. 提高效率:简化操作、减少重复输入,节省时间
  4. 提升完成率:降低填写门槛,减少用户中途放弃
  5. 降本增效:减少数据纠错与沟通成本,赋能业务
 

 

二、14 个表单设计核心方法(可直接落地)

 

1. 信息降噪:只留关键,简化内容

image.png

  • 极简处理:必填项占绝大多数时,隐藏选填提示符,减少视觉干扰
  • 折叠非必填:用「展示更多」收起次要字段,只保留核心必填项
  • 选填项保留意义:给愿意补充信息的用户选择权,降低填写压力,灵活收集额外数据
 

2. 标签与指引:清晰易懂,不产生歧义

image.png

  • 标签简短直白,不使用专业黑话
  • 填写规则前置提示,比如格式、长度、范围
  • 复杂字段加小问号提示,hover 显示说明,不占主视觉
 

3. 长表单:分步 / 分页,缓解填写压力

image.png

适合注册、认证、发布等流程型长表单:
 
  • 分步填写:按业务逻辑拆步骤,配清晰步骤导航
  • 分页填写:左侧固定导航,用户可快速跳转模块
  • 小缺陷:用户无法一次性看到全部字段,需做好进度提示
 

4. 动态验证:实时反馈,即时纠错

image.png

  • 输入失焦后立即校验,不等到提交才报错
  • 错误提示就近展示,明确错误原因 + 修改建议
  • 避免提交后批量修改,大幅降低用户挫败感
 

5. 默认值 + 自动填充:减少手动输入

image.png

  • 高频选项设默认值,比如常用城市、状态
  • 复用历史数据,自动填入重复信息
  • 关联字段自动联动,比如地址→邮编、身份证→生日
 

6. 智能辅助:让表单 “会思考”

image.png

  1. 上下文自动填充:手机号→姓名、身份证→生日 / 性别
  2. 条件逻辑显隐:选 “是” 展开对应字段,选 “否” 直接隐藏
  3. OCR 智能识别:身份证、发票、营业执照上传后自动提取信息填入
 

7. 响应式适配:多端一致,不崩不乱

image.png

B 端表单必做适配,避免前端自由适配导致体验差:
 
  • 固定适配:字段宽度固定,兼容客户最低屏幕分辨率
  • 间距适配:左右边距固定,组件自适应宽度(适合弹窗 / 抽屉,不建议长表单)
  • 移动端:单独设计,用系统原生输入组件,不直接套用 PC 端
 

8. 字段简洁:用最少文字讲清含义

image.png

  • 标签短、准、无歧义,不堆砌长文案
  • 合并冗余字段,不拆分语义完整的信息
 

9. 长数字不拆分:一个输入框搞定

image.png

手机号、身份证、银行卡、订单号等禁止拆成多框
 
  • 减少点击切换,支持一键复制粘贴
  • 避免分段输入带来的操作繁琐与误操作
 

10. 防错纠错:从源头减少错误

image.png

  • 格式限制:数字框仅输数字,限制长度(手机号 11 位、身份证 18 位)
  • 专用输入:车牌号用专属键盘,屏蔽 I/O 等易混淆字符
  • 范围置灰:时间选择器禁用无效日期,堵死错误操作路径
 

11. 就地编辑:在哪看就在哪改image.png

 
遵循交互之父阿兰・库珀原则:需要在哪里输出,就在哪里输入
 
  • 列表少量编辑:直接在行内修改,不跳转、不弹窗
  • 保持注意力连贯,提升操作效率
 

12. 三重保存:杜绝数据丢失

 

表单保存是 B 端底线,分三类实现:

image.png

  1. 延迟草稿:间隙 / 定时自动保存,无打扰后台运行
  2. 随机草稿:高频自动保存,保留历史版本,支持回退
  3. 条件草稿:触发式保存,异常关闭可恢复
  4. 提示保存:未保存跳转 / 离开时,弹窗确认,防止误操作
 

13. 所见即所得:实时预览最终效果

image.png

  • 表单编辑区 + 预览区联动,即时看到展示效果
  • CMS、物料配置、富文本等场景必加预览
  • 支持多端(PC / 移动端 / 小程序)效果切换查看
 

14. 重视用户反馈:让业务专家帮你优化

image.png

  • B 端用户是一线业务专家,最懂真实痛点
  • 做用户测试、收集操作反馈,持续迭代
  • 案例:贷款审核从 “逐个审” 优化为 “批量审”,效率大幅提升
 

 

三、总结

 
表单是 B 端数据流转核心枢纽,14 个设计要点围绕简洁、清晰、高效、防错、容错展开,从视觉降噪到智能辅助,从实时校验到多重保存,完整构建以用户为中心的表单体系。掌握这套方法,你的表单设计将从 “能用” 升级为 “好用”,真正为业务提效赋能。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

设计知识点 - 盒子模型 | 兰亭妙微设计

涛涛

在 UI 与网页设计的布局体系中,盒子模型是最基础且核心的底层思维模型,也是 CSS 开发中高频使用的界面构建逻辑。兰亭妙微设计认为,掌握盒子模型的设计原理,能有效打通设计师与开发的沟通壁垒,让设计落地的效率与精准度大幅提升,无论是大到整页的布局规划,还是小到按钮、控件的细节设计,都能依托这一模型实现标准化、规范化的设计与开发。

兰亭妙微:10 大设计心理学法则,打造让用户一眼倾心的数字化产品

涛涛

作为深耕 UI/UE 设计领域十余年的专业团队,兰亭妙微始终秉持 “设计优秀,不断超越” 的核心理念,从清华主创团队的专业积淀出发,将用户心理洞察融入每一次数字化产品的设计实践中。我们深知,优秀的设计从不只是视觉上的美感呈现,更要触达用户内心,通过对心理学原则的精准运用,在屏幕端为用户创造兼具实用性与情感共鸣的交互体验。唐・诺曼的情感设计三层理论 —— 本能、行为、反思,是兰亭妙微所有设计工作的底层逻辑,本能层打造视觉吸引力,行为层保障产品可用性,反思层赋予产品深层价值,而这一切的落地,都离不开对设计心理学法则的熟练驾驭。以下便是兰亭妙微在千余次企业信息化、大数据软件、互联网产品设计中,反复验证并沉淀的 10 大设计心理学知识,掌握这些,便能让产品与用户建立第一眼的情感连接。

兰亭妙微设计小课堂:UI 文案排版与视觉优化实用技巧

涛涛

UI 设计中,文案作为信息传递的核心载体,其排版方式与视觉处理直接影响用户的阅读体验和信息接收效率。兰亭妙微设计团队结合日常商业设计实战,提炼出 UI 文案排版与视觉优化的核心实用技巧,聚焦文案对齐方式、投影处理两大高频设计痛点,用简单易懂的方法规避设计误区,让文案设计既美观又实用。

如何设计产品中的反馈|让交互有回应,体验更流畅

清阳

在数字化产品设计愈发注重用户体验的当下,界面反馈早已不是单纯的“操作提示”,而是串联用户行为、产品功能与体验感知的核心纽带,更是决定产品易用性、专业性与用户留存度的关键细节。作为深耕UI/UE全链路设计十余年的专业团队,兰亭妙微UI设计公司(蓝蓝设计)长期聚焦B端后台管理、大数据可视化、工业软件、智能设备界面等多元场景,累计服务数百家中大型企业与行业龙头客户,在各类实战项目中沉淀了一套完整、可落地的反馈设计方法论。

在界面设计中, 反馈(Feedback)是系统对用户操作做出的即时、可感知的回应 。系统通过界面元素、动效、声音或震动等方式,告知当前操作已被识别、系统状态如何,以及后续可采取的行动。

1.反馈设计的重要性
在 Jakob Nielsen 提出的十大交互设计原则中,居于首位的核心准则即为 “系统状态可见性”。该原则强调,系统必须通过及时且恰当的反馈,始终确保用户对当前发生之事、操作结果以及后续预期保持清晰的认知。

image.png

▲ Jakob Nielsen 十大交互设计原则
设想在购物时的场景:当用户点击“购买”按钮后,若界面缺失加载状态、操作确认或视觉反馈,用户将陷入操作不确定性——疑虑系统是否响应、是否需重复操作,甚至因焦虑而放弃交易。

image.png

在页面中添加有效的反馈能够将这种不确定性转化为明确的行动指引,通过状态变化、进度提示和结果确认等机制,让用户清晰感知系统响应,明确知道“发生了什么”以及“接下来该怎么做”,从而提升用户信任度与流程转化率。
2.在项目中如何完整地梳理并设计反馈
反馈设计并非后期补充的简单的提示,而是从产品设计的初期,就作为关键要素进行系统性的规划与设计,接下来,我们将以“创作者音色复刻”项目为例,分享作者在实际项目如何设计反馈。
“创作者音色复刻”功能的诞生,是为提升公众号“听全文”功能的体验。通过此功能,作者仅需朗读一段系统提供文本,AI 即可复刻出作者音色。复刻后,读者就可以在听全文时能听到 AI 模仿作者的专属音色,本文将聚焦的是作者录入并复刻音色的流程。

image.png

复刻原理看似简单,但对于公众号创作者而言,“创作者音色复刻”是陌生的功能,且中间涉及到很多由 AI 模型或用户选择导致的复杂判断逻辑。如果系统没有提供清晰的反馈,容易导致作者困惑或放弃使用此功能。
为了降低用户的使用门槛,在设计页面时,作者将系统的反馈设计作为重点,用以下三个步骤来实现:
Step 1 :梳理反馈节点
在产品设计初期,系统性地梳理反馈节点是构建有效反馈机制的首要环节。通过绘制逻辑流程图,设计师能够将用户与产品的交互路径可视化,清晰呈现用户每一步操作后系统应提供的反馈。
在绘制流程图的时候,需要完整展示一下两点:
  • 用户完成任务所需的关键反馈节点

  • 用户在过程中可能产生的系统判断或用户选择其导致的反馈分支

案例
在“创作者音色复刻”项目中,作者通过“逻辑流程图”系统性梳理用户交互路径,目的是梳理所有反馈节点——包括主流程的 5 个核心反馈节点,以及因系统判断产生的 2 个反馈分支所衍生的额外 2 个反馈节点,从而确保反馈设计覆盖完整交互路径,避免遗漏关键环节。

image.png

▲流程图:正方形代表反馈节点,菱形代表判断节点
Step 2:定位节点的反馈类型
绘制完“逻辑流程图”后,设计师需为每个节点定位反馈类型。我们将常见反馈类型归纳为以下四类,每类都具有明确的界定标准与应用场景:
  • 状态反馈:系统对用户主动操作的即时状态确认,消除用户对操作是否生效的疑虑。

image.png

▲当用户轻触“开始录制”按钮时,按钮颜色加深、形态变化,直观告知用户操作已生效。
  • 进度反馈:当操作无法即时生效且需一定时间处理时,通过进度反馈告知用户当前任务进度。

image.png

▲微信下载大文件时显示的进度条,或加载动画,能够有效管理用户预期,减少等待焦虑。
  • 确认反馈:对可能产生负面后果的操作,可以通过确认反馈向用户提供上下文信息来解释操作的后果,向用户进行确认,从而防止发生错误。

image.png

▲微信删除联系人时,界面会告知用户当前操作所造成的风险,防止用户错误操作。
  • 结果反馈:用户完成任务节点后,系统明确告知操作成功或失败。

image.png

▲用户收藏公众文章后,界面显示“已收藏”并伴随成功动效,明确告知操作结果。
案例
回到“创作者音色复刻”项目中,作者为每个反馈节点匹配了最贴合的类型。例如,“开始录制”节点采用状态反馈确保操作确认,“等待录音处理”节点采用进度反馈管理用户等待预期,“朗读完成”节点采用结果反馈明确操作结果。
通过定位反馈类型,我们能够为每个交互节点建立相应反馈逻辑,确保用户在每个操作环节都能获得正确的系统响应。

image.png

▲初步为流程图中的反馈节点,定位反馈类型 
Stept 3 :设计反馈表现
在明确反馈节点与类型后,就可以聚焦到每个节点,为反馈节点设计最合适的反馈表现形式。这一环节需要将抽象的反馈概念转化为具体界面元素,设计反馈时需要满足三个基本原则:

 

  • 及时:反馈应在操作后即刻发生,让用户感知到系统已响应。

  • 清晰:反馈信息应准确无误,一目了然,明确告知“发生了什么”及“下一步行动”。

  • 适度:反馈强度应与信息重要程度相匹配,避免过度干扰。

当单一反馈形式无法同时满足上述原则时,设计师可采用多通道反馈叠加策略,通过整合不同感知维度的反馈形式,增强反馈效果与用户感知。在移动端交互设计中,常见的反馈通道包括:
  • 视觉反馈:通过界面元素的视觉变化传达系统状态,例如颜色变化、动画效果、图标提示、文字提示及高亮标记。

  • 听觉反馈:通过声音信号增强用户感知,例如系统音效、操作音效及语音提示。

  • 触觉反馈:通过设备震动提供物理层面的反馈,例如短震确认、长震警告。

 

接下来我“创作者音色复刻”项目中以两个具体场景来真实项目中设计反馈表现的应用以上原则的设计与决策过程:

案例一:朗读错误的反馈优化
在音色复刻过程中,用户需要准确朗读文本。当准确率不足 90% 时,系统需要告知用户朗读有误并引导重新录制。
最初期方案评估
初期我们采用了业界通用的反馈样式:Toast 轻提示与弹窗提醒。虽然这两种方案满足了基本的及时性和适度性要求,但在可用性测试中暴露出明显缺陷。用户普遍反馈“无法确定具体错误位置”,导致重复录制时缺乏明确的目标导向,严重影响任务完成效率。

image.png

▲方案 a:Toast 轻提示(左), 方案 b:弹窗提醒(右)。
问题分析
通过用户测试的结论,我们发现有效的错误反馈机制如果要达到“清晰”这一原则,必须构建完整的信息闭环。既要准确指出问题所在,又要提供清晰的修正路径,具体而言,需要同时回答两个核心疑问:
  • 朗读错误的具体位置在哪里?

  • 下一步应该做什么?

方案迭代
基于此认知,我们进行了方案重构:
方案 a:在单次朗读任务完成后,系统立即对识别出的错误文字进行视觉标红处理,并配以明确的重新录制指引。
方案 b:在朗读过程中实时监测发音准确度,对错误内容进行即时标记与提示。

image.png

两个优化方案在“清晰”原则得到了完善,通过精准的文字定位与明确的指引文案,消除了用户的认知不确定性。最后综合用户测试评估结果,发现方案 b 会在录制过程中,会影响用户在阅读时候的专注度且随时造成用户任务中断,违背了“适度”原则,最终选择了方案 a 作为落地实施方案。
案例二:录制状态的多通道反馈设计
在启动音频录制的关键节点,如何确保用户明确感知界面状态切换,并及时开始朗读,是本案例的设计重点。
最初期方案评估
初期方案仅依赖按钮状态的视觉变化作为反馈信号。

image.png

在用户测试过程中,我们观察到由于操作时手指对界面视觉反馈元素的遮挡,超过 40% 的测试者未能及时察觉状态变化,导致录制启动延迟或录入无效音频片段。

image.png

▲操作时手指对界面元素的遮挡
解决方案的探索过程
我们首先尝试强化视觉反馈通道,在界面核心区域增加 Toast 提示组件。然而评估后发现,这种方案虽然提升了状态感知度,但同时也带来了新的体验问题:弹出的提示层遮挡了需要朗读的文本内容,违背了反馈设计的适度性原则。

image.png

最终方案的确立与验证
通过多轮方案迭代,我们最终采用了多通道反馈的设计策略:在保留基础视觉反馈的同时,引入触觉反馈维度。具体实现方式为用户在轻触录制按钮时触发设备的短震动提示。这一设计巧妙地在不增加视觉干扰的前提下,显著提升了状态反馈的感知强度,既确保了操作的明确性,又保证了阅读体验的连贯性。更多关于触觉体验内容详见:用户界面之外:触感体验

image.png

通过这两个案例的完整设计过程,我们认识到反馈的表现形式并不是固定的在组件 toast、弹窗、进度条这几个组件之间进行选择,而是需要设计师在遵循“及时、清晰、适度”这三个原则,深入理解具体场景中,了解用户困境再进行设计与创造。当反馈能够准确预见用户疑惑并提供清晰指引时,它就不再是被动的提示,而是变成了推动任务顺利进行的关键设计要素。
3.反馈的必要性
最后,在“创作者音色复刻”项目中,我们也发现界面设计中的反馈并非越多越好,其存在价值需通过严谨评估来确认——反馈应服务于核心交互目标,有效弥补用户认知与系统状态间的“信息差”。若交互逻辑本身能自然引导用户行为、从源头规避误解,则额外反馈反而会成为冗余干扰。
案例
在“创作者音色复刻”项目的录制按钮的交互设计中,我们就经历了从“增加反馈提示”到“重构交互”的思维转变。
最初期方案评估
在项目初期,我们采用了“长按开始录制”的交互方案。

image.png

然而用户测试显示,受微信语音操作习惯的影响,多数用户在长按时会不自觉地过度贴近设备麦克风,导致录音质量下降,同时因设备倾斜造成朗读文字阅读困难。
最初尝试-提示纠正用户行为
我们首先尝试了增加 Toast 提示的方案,在用户进入录制页面时显示操作指引。但额外增加反馈并没有改变用户的行为,反而影响了用户阅读文字。

image.png

通过系统性分析,我们意识到问题的本质在于交互模型与用户任务目标之间存在内在冲突 :长按动作本身与微信发语音交互类似,易引起贴近设备的心理暗示。

image.png

从提示纠正到优化交互设计
因此,我们改为重构交互框架,尝试将操作改为“轻触录制”。

image.png

新的方案,显著改善了用户的录音姿势——轻触操作自然避免了用户过度靠近设备的行为,同时保持了舒适的阅读角度。通过交互的优化,我们从根源上解决了问题产生的前提条件。
案例启发
这一案例表明,反馈的必要性需置于整体交互系统中审视:当系统自身能通过更优的结构设计实现引导时,反馈应保持克制,而非作为补偿性措施强行添加。
4.最后
界面中有效的反馈可以成为连接系统与用户之间的桥梁。在设计反馈时,可以参考作者在“作者音色复刻”项目中使用的以下流程:首先借助“逻辑流程图”进行整个项目的“反馈节点”梳理,然后定位“反馈类型”,最后在遵循“及时、清晰、适度”的原则进行反馈的表现的设计,从而为产品构建完整而反馈机制。
除此以外我们持续审视每个反馈的必要性,优先通过优化系统交互逻辑来简化反馈需求,从而在提供明确引导与保持交互简洁之间找到平衡
转载:WeDesign

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档