首页

C端产品体验设计走查模型

博博

设计输出质量对于设计团队来说是极为重要的事情,在设计过程中,存在着许多潜在的风险,这些风险可能会导致用户直接流失,甚至是品牌形象受损,且对于C端产品来说更是如此。因此,作为一名用户体验设计师,降低体验设计风险是我们工作中不可或缺的一部分。
当然体验问题可能来自技术、设计、运营等多个环节,本文主要从体验设计师的视角去思考如何降低体验风险。
 
C端产品体验设计走查模型
 
 
一、设计团队如何降低体验风险
1、可以建立一套体验设计走查模型,通过建立走查模型,我们可以对设计过程进行全面检查,及时发现并解决设计中的问题。
2、建立设计内审机制,通过多名设计师和关键项目组角色共同内审,减少出错风险。
3、需要将体验问题的发现和解决纳入设计师工作当中,并且有明确的责任划分,确保产品遗留问题得到有效解决。
C端产品体验设计走查模型
 
 
二、建立适合自己的体验走查模型
走查模型的作用是帮助设计师产出全面的设计方案,尽可能避免有遗漏场景,造成体验事故和不必要的返工。市面上有很多不同的体验走查模型,具体需要根据自身产品情况确定。
所以好的体验走查模型需要符合3个要求。
1、实用性:需要通过模型将主观感受描述成客观的场景、标准,确保大家理解一致,不要造成使用偏差。
2、符合平台自身属性:结合自身产品类型和过往最常见的问题类型,有选择性的制定,不用追求大而全。
3、能够真正纳入工作当中:走查模型建立后,一定要在真实的项目中发挥作用,比如作为设计内审的具体通过标准之一。
C端产品体验设计走查模型
 
那么如何制定出符合平台要求的走查模型?其中比较有效的方法是梳理过往遇到的体验问题,并按照场景归类,梳理出典型的问题,并纳入到走查模型中。
比如在一些偏活动属性的产品设计中,我们发现设计师经常遗漏平台品牌性的信息,于是我们把品牌识别性也纳入到了走查模型当中。
C端产品体验设计走查模型
 
 
三、沉淀体验走查模型
体验走查表确定后,可以打印出来并且以表格的形式进行共享。
C端产品体验设计走查模型
 
四、如何避免流于形式,让走查模型真正发挥作用
一、以走查模型为交付标准。
产品从需求到落地,中间会经历多个环节和角色,体验走查模型一般在2个环节着重使用。
1、需求梳理阶段:帮助设计师围绕具体需求明确设计范围。
2、设计交付前:对照自查表,查漏补缺。
二、作为设计内审通过标准之一
在设计内审阶段,可以将体验走查模型当作通过的标准之一,走查模型可以和设计规范配合使用,确保在设计输出的时候是尽可能完整的。
C端产品体验设计走查模型
 
 
C端产品体验设计走查模型
 
 


作者:微店UED
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

如何巧妙的呈现龙年氛围感

前端达人

龙年春节已结束,回顾一下各大产品是如何营造龙年氛围感的,今天黑马哥精选了部分场景,我们一起来看看吧!
如何巧妙的呈现龙年氛围感
 
 
 
 
一、封面边框营造氛围感
 
通过对主界面配图营造氛围感相对直接,可以针对封面设计进行创意,也可以在边框上面进行装饰。
 
爱奇艺首页推荐的影片封面设计中,在不改变结构布局的基础上,对封面边框进行氛围装饰,简洁直观地呈现出龙年氛围感。通过对封面设计进行创意,可以避免改变产品结构,方便随时更换,灵活性较高。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
二、通过图标配色营造氛围感
 
营造氛围感最直接的表现就是颜色层面,可以通过配色突出主题氛围。
 
马蜂窝 App 首页金刚区图标,春节期间运用红黄渐变进行图标配色,以此强化春节氛围感。不改变图标造型,也能便于用户记忆和适应变化,表现形式简洁有效。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
三、主题活动替换品牌区域
 
利用品牌 Logo 进行主题演变可以是品牌造型层面设计,也可以在品牌区域位置上面替换内容,针对预留的位置发挥性更强。
 
夸克 App 在主页默认展示品牌 Logo,春节期间以主题活动进行替换,不仅突出氛围也能增加活动曝光度。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
四、烟花动效突出顶部视觉区域
 
通过春节元素进行动效表现,可以让氛围感更突出,比如绽放的烟花、鞭炮、祥云、生肖元素等。
 
携程旅行首页顶部视觉区域,春节期间以绽放的烟花动效进行表现,氛围感十足。不仅突出年味,也能让区域视觉感更突出。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
五、主题文案嵌入图标设计
 
金刚区就如同百变金刚一般,更换内容非常便利,灵活性很高。针对图标设计风格、主题风格、主题文案等形式进行设计融入,均可突出各类主题风格。
 
安居客 App 首页金刚区图标设计,在春节期间结合主题文案进行嵌入,氛围感表现得直观清晰。再配合春节氛围的 Banner 展示,新春氛围渲染得非常到位。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
六、按钮设计中的画龙点睛
 
针对主按钮设计进行发挥较为常见,可以在按钮造型、配色、装饰等层面发挥,表现形式丰富多样。
 
携程旅行订票查询按钮设计中,可谓是画龙点睛。将中国龙和春节元素融入到按钮装饰中,不仅突出氛围感,眨眼睛的动效也是点睛之笔。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
七、主题皮肤氛围感拉满
 
在产品的各区域都可以进行主题氛围营造,形成不一样的主题皮肤,带给用户节日的沉浸式体验。
 
嘀嗒出行 App 从不错过每个节日的表达,春节期间在多个场景营造氛围感,使得主题皮肤氛围感拉满。在背景区域、各局部视觉区域、图标、弹窗、按钮、配图等,把春节氛围表现得淋漓尽致。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
八、满屏红包抢不停
 
对于春节而言怎能少得了抢红包的环节,将抢红包的游戏结合到活动中,氛围感和参与度都非常到位。
 
腾讯视频 App 就将抢红包的游戏结合到活动表达中,满屏的红包让你抢不停,用户的参与度瞬间被激活啦!通过游戏化的形式表达活动主题,更能符合年轻用户的需求。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
九、主题化 IP 形象表达
 
针对 IP 形象进行主题换肤,是强化主题氛围最直接的设计形式。
 
自如将主题化 IP 融入到个人中心和头像等表达中,也能突出春节氛围。在金刚区图标设计中也将春节元素进行发挥,整体的氛围营造非常到位。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十、无处不在的云放烟花
 
燃放烟花爆竹才能体现出年味,在产品中的云放烟花也能让用户感受到乐趣。
 
高德地图无处不在的云放烟花,不仅让用户感受到烟花的乐趣,也能让云端年味变得更有氛围感。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十一、突出卡片设计氛围
 
卡片式设计通常较为简单,以白色卡片居多,特殊情况下也会进行局部氛围营造。
 
高德地图个人中心在春节期间,推出了拜年相关的版块,以春节氛围营造卡片设计,氛围感十足。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
十二、营造底部标签栏氛围感
 
底部标签栏图标发挥是营造主题氛围的最佳选择之一,各大产品都会在这个区域进行设计发挥。
 
结合春节元素进行图标设计,或者在背景层面突出氛围等,设计表现形式非常多样化。
如何巧妙的呈现龙年氛围感
 
 
 
 
 
小结
 
营造龙年氛围感的形式和案例非常多,这里仅选择了小部分作为欣赏。希望可以抛砖引玉,和大家一起在体验和积累中不断进步。
 
作者:黑马青年(vx: heimaux)
本文由 @黑马青年 原创发布。未经许可,禁止转载。
 


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTYxMDU5Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

设计规范全方位指南

博博

一、设计规范的目标?
首先需要明确设计规范的目标,也就是为什么建立设计规范,这里包括提高用户体验、降低开发成本、提高团队协作斜率等。这些目标将为后续的规范制定提供方向。
还有就是大家都知道,在做项目时如果没有明确的目标和价值,是很难推动的。
从混沌到有序:设计规范全方位指南
 
 
二、什么时候建立设计规范?
在项目全面进入ui设计之前,先设计几个核心页面的demo,确立整体的基础规范和设计风格,把一些基础的设计规范定义出来,例如命名、尺寸、间距、颜色、字体、核心控件等、这样在开展设计的过程中保持一致性和统一性,当然,在项目设计过程中,UI设计规范也需要根据实际情况去调整补充。
从混沌到有序:设计规范全方位指南
 
 
三、设计规范具体要怎么做?
这里先讲一些基础通用的规范
3.1、间距
在间距部分我们需要把一些页面间距、模块间距、元素间距,这些要定义出来像我平时在工作中通常以8px作为基数,以此衍生出8、16、24、32、48、64
,这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到120、160、200...其他间距数值,例如缺省页、登录页面等。出去这些特殊页面,基本上通用的就上面那6个就足够了
从混沌到有序:设计规范全方位指南
 
3.2、颜色规范
我们要先把主色调和辅助色,通常主色都是根据品牌形象和目标用户的需求选择。
拿在颜色的定义中需要注意以下几点
1、使用色彩心理学:
根据不同的颜色和情感联想,选择适合的颜色来传达品牌形象和用户体验。例如,蓝色通常被认为具有专业、信任和稳定的感觉,而红色则具有激情、活力和创新的联想。
2、建立层次结构:
使用颜色的饱和度和明度来建立层次结构。将重要的设计元素设置为高饱和度和明亮的颜色,使其在页面上突出显示,而将次要的设计元素设置为低饱和度和较暗的颜色。
3、避免使用过多的颜色:
过多的颜色可能会使页面显得混乱和难以聚焦。在设计过程中,尽量使用有限的颜色组合,并且要避免使用过多的对比色或互补色。
从混沌到有序:设计规范全方位指南
 
3.3、文字规范
我们需要把字体、字号、颜色、行距、这些给定义清楚,有规律的大小字号更有利于阅读,(另外要注意一些特殊字体的版权问题)常用的字体大小20px、24px、28px、32px、36px,44px,48px,且都是间隔4px,设计师需要根据具体场景去决定字体大小,以确保用户能够轻松阅读和理解界面信息层级比重。
 
3.4、UI图标规范
图标是UI设计的重要组成部分,它可以使图标看起来更加美观、易用、统一和有吸引力。也传达着整个UI视觉风格调性,和系统功能的作用。在图标设计上一定要简单清晰,定义规范时要对图标的大小、圆角、线条粗细、等有明确的指示,在绘制的时候我们可以制定自己的
网格规范,以便参考。
从混沌到有序:设计规范全方位指南
 
 
3.5、按钮
按钮尺寸:
一般来说,按钮的尺寸应该能够适应不同的屏幕尺寸和分辨率,并且应该能够突出显示。
按钮形状:
应该具有清晰的轮廓和圆润的边角,圆角大小是多少
按钮颜色:
按钮的颜色应该与整体UI设计风格相协调,并且应该能够突出主题和重点信息。一般主按钮大多使用主题色。
按钮文本:
按钮的文本应该简短明了,并且应该能够清晰地表达按钮的功能。还需要定义清楚按钮中限制的字数。
按钮内边距:
按钮的内边距应该能够扩大按钮的可点击范围,并且应该能够提高用户点击按钮的准确性。需要考虑极限情况下,最小应该保持多少内边距。
按钮状态:
按钮的状态应该能够表达按钮的状态和功能。一般来说,按钮的状态包括正常状态、点击状态等。
从混沌到有序:设计规范全方位指南



作者:考思考
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

产品体验改版应该这样做!

前端达人

前言

hi 大家好,最近忙里偷闲,对过去在团队中主导的一次产品改版进行了深入的梳理。现在,来和大家分享这次改版的思路和方法,以及我是如何逐步推动整个过程的。
在这次改版中,我运用了一系列的方法论和思路,以确保我们能够更好地满足用户需求和市场趋势。同时,我也遇到了一些挑战和困难,但通过不断尝试和调整,我们最终成功地完成了改版。
文章内容较长,但相信耐心阅读后,你一定会有所收获。希望通过我的经验总结能够为大家提供一些启示和帮助,让我们在未来的工作中更加顺利和高效。
我将拆分为六个阶段:1.准备、2.探索、3.收拢、4.制定、5.执行、6.成果对大家理解整个流程会更加清晰一些。

 

壹、准备

在执行前我们要做好哪些准备工作呢?并能有效帮助我们提前规避一些问题,且更有序顺利的推进项目,通过后续项目复盘我大概总结了以下三个比较核心点:1.编写SOP文档、2.明确参与人员、3.制定执行策略。

 

一、编写SOP文档

更重要的是明确执行流程,提高工作效率,它能够清晰地展示整个执行过程,让协作者更容易理解和掌握执行步骤,一份详情的SOP大纲可以减少在执行过程中犯错概率,我们可以通过它明确规划过程或任务应该如何执行,包括具体的步骤、方法、所需材料和注意事项等。这有助于我们在执行过程中更好掌握方向避免失焦。

二、明确参与人员

在执行前需要明确参与到整个流程中的角色,我将参与人员分为了两类,固定参与非固定可调配,正如词意固定参与人员指的是在整个流程中起到主要作用,需要长期紧密协作的人员,比如方案制定者、设计师、PM、开发人员等。而非固定可调配人员则是在特定情况下才参与的人员,在项目中起到辅助作用,比如协助进行访谈或上机测试、通过调用内部团队资源组织虚拟小组进行用户体验研究的协调员等。不同的人员在流程中扮演不同的角色和承担不同的职责,总之可以将自己当作成这个项目中的Owner所有事物都由你来制定。

例如1:方案产出后可以邀请公司一线同学,进行测试以验证方案是否解决了用户痛点和方案完整度。通过收集反馈数据可以评估方案的效果和可行性,从而进行调整和优化,较多个维度度量。
例如2:当需要进行头脑风暴或其他研究时可以调用内部团队资源,通过组织虚拟小组的方式进行。这样可以方便我们了解不同用户的反馈声音,使我们更加精准找到方向,提高工作效率。

三、制定执行策略

在执行时需要明确具体的执行策略和计划以确保能够按时按质地完成计划,根据目标和范围、资源和时间等因素,制定具体的执行策略包括任务分解时间表负责人等核心价值观要做到“试试有回应,件件有着落”。

在制定执行策略计划排期时,我总结了五个注意事项:

  1. 任务分解要具体、明确,包括具体的任务名称、工作内容、完成标准等信息。
  2. 时间节点要合理、紧凑,确保任务能够按时完成。
  3. 负责人要明确,并分配合理的工作量和职责。
  4. 风险和问题的预测要全面、准确,并制定相应的应对措施。
  5. 调整和优化要及时、灵活,根据实际情况进行调优。

总之,制定执行策略计划排期是项目或任务成功执行的关键之一。通过合理的任务分解、时间节点安排和负责人分配等措施,可以更好地规划和管理项目或任务的执行过程,确保按时、按质地完成。
小结:以上是我对项目改版前期准备工作总结的心得,做足前期准备工作,可以确保项目改版的方向更加明确,团队之间的合作更加顺畅,从而为后续的执行和推进奠定有利的基础

 

贰、探索

在探索阶段制定明确的策略是至关重要的,以确保能够有效地深入洞察问题并识别出产品中存在的“体验问题”“用户需求”。以下是我制定的策略:

 

一、体验层策略
体验层将通过A.可用性测试B. 数据分析C.竞品分析三大板块进行深入洞察,并识别出产品存在的体验问题。

 

A. 可用性测试:

通过小规模的可用性测试,邀请目标用户参与,以观察他们如何与产品进行交互。通过这种方式,可以发现用户在操作过程中的问题、困扰和需求。对于可性测试网上有很多介绍以及使用方法,这里我就不过多展开讲解了,简单总结一些我在使用过程中制定的流程和方法。

  1. 组织虚拟小组:因为可用性测试需要大量的样本的数据支撑,我们可以调动内部团队资源组建成2人一组或3人一组小团队,并分配角色和职责如:观察员,记录员等。分别进行观察用户上机测试。
  2. 确定测试目的:明确测试的目标,是为了评估产品的可用性、找出问题、改进设计等。
  3. 选择测试对象:可以邀请公司内部具有代表性的用户(外部用户邀请不到情况下)需要考虑不同的用户类型、背景和需求,以便更全面地评估产品的可用性。
  4. 制定测试任务:根据产品的特点和用户需求,设计产品核心关键操作任务,包括对产品界面的浏览、功能的使用、信息的搜索等,最好是可以通过和PM共创共同制定,以免走错方向。
  5. 准备测试环境:选择合适的测试场所如公司会议室,办室,确保测试过程中不会受到干扰和影响,同时准备好测试所需的所有设备和记录工具。
  6. 用户上机测试:让用户在测试环境中完成预设的任务,观察员和开发人员在一旁观察、记录和分析用户的行为、反应和反馈。
  7. 体验问题分类:可将问题分为6大类(功能问题、性能问题、技术异常、布局框架、操作交互、视觉问题)
  8. 体验问题定级:可将问题分为4个等级来评估问题的重要程度(致命、严重、一般、轻微)。
  9. 分析结果总结:根据观察和记录的结果最后进行汇总,对产品进行分析找出问题和改进点。

在可用性测试中,我总结了四个注意事项:

  1. 选取适当的样本:样本应该具有代表性,能够涵盖不同的用户类型和需求,以便更全面地评估产品的可用性。
  2. 设计合理的任务:任务应该与产品的实际使用场景和用户需求相关,同时考虑不同用户的能力和偏好。
  3. 舒适的测试环境:测试环境应该舒适、安静、无干扰,以减少用户的不安和压力,同时提供必要的设备和工具。
  4. 观察用户的行为:观察员应仔细观察和分析用户的行为、反应和反馈,以便更准确地了解产品的问题所在。

B. 数据分析:
通过CSM团队对企业产品购买数据的分析,可以更直观的看到企业在购买过程的问题和机会,从而挖掘企业对产品的诉求最后将数据进行过滤抽取有效信息转化为用户需求,帮助我们明确产品体验优化范围和与竞品拉开差异化机会点,从而更准确地解决用户在使用过程中遇到的问题。

 

在提炼产品问题和用户需求时,我们可以从以下四个维度进行提炼,便于更加准确性的判断问题的根源:

  1. 使用场景卡点:用户在使用产品遇到的具体问题和难点,我们可以针对性地解决用户在使用过程中遇到的实际问题,提高用户的使用体验。
  2. 核心使用场景:用户使用产品核心场景和目的,通过了解核心使用场景,我们可以更好地理解用户的需求和痛点,并针对性地提供解决方案。
  3. 产品核心功能:产品或服务的主要功能和特点,我们还可以了解用户对产品核心功能的认知和满意度,发现潜在的问题和机会。
  4. 客户产品诉求:用户对产品期望和诉求,并针对性地提供解决方案。我们还可以了解用户对产品价值的认知和期望,为产品的定位和营销策略提供参考。

总之,通过从使用场景卡点、核心使用场景、产品核心功能和客户产品诉求这四个维度进行提炼和分析,我们可以更加准确性和全面性地了解用户需求和痛点,为体验升级、开发、功能优化等提供重要的参考依据和支持。

 

C. 竞品分析:

竞品分析有很多方法,这里我采用的是“用户路径分析法”通过观察和了解竞品的功能使用情况,分析竞品的业务模式、用户体验和视觉呈现,从而发现机会点并形成差异化。在进行竞品分析前选择分析对象很是非常关键之一,我们可以从两个维度“使用频率、市场规模”进行选择合适的竞对产品。

  1. 使用频率:这个维度关注的是竞品的使用频率,即用户与竞品交互的频率。通过了解竞品的使用频率,我们可以更好地理解用户对竞品的依赖程度,以及竞品在市场中的活跃度和影响力。在选择竞品时,选择那些使用频率较高的产品可以更好地了解用户的需求和行为,从而发现更多的机会点。
  2. 市场规模:这个维度关注的是竞品的市场规模,即竞品在市场中的销售量和影响力。通过了解市场规模,我们可以更好地了解竞品的竞争地位和市场占有率。在选择竞品时,选择那些市场规模较大、具有代表性的产品可以更好地了解市场的需求和趋势,从而发现更多的机会点。

在进行竞品分析过程中,我总结了两个方法可以帮助我们更有效的了解到竞品信息:

  1. 通过销售代表进行访谈:销售代表是直接与客户沟通的人员,他们非常了解客户对产品的需求和反馈,并且在介绍产品时也会提及其他竞品。通过与销售代表进行访谈,我们可以了解到市场对竞品的反馈和评价,从而更好地选择合适的竞品对象。
  2. 从企业软件购买量中抽样:这种方法可以帮助我们找到那些被广泛使用并且具有代表性的竞品。通过了解企业软件购买量,我们可以选择那些在市场中占据较大份额的竞品进行分析,从而确保我们选择的竞品对象是符合分析需求的。

总之,选择合适的竞品对象是进行竞品分析的关键之一。通过使用“使用频率”和“市场规模”两个维度来选择竞品对象,可以帮助我们更好地了解市场和用户需求,发现更多的机会点并形成差异化。同时,参考销售代表的反馈和从企业软件购买量中抽样也是选择合适竞品对象的可靠方法。

 

二、用户层策略

用户层将通过A.用户访谈B.用户旅程图两大板块进行深入洞察,识别出产品存在的体验问题,从而针对性地优化产品体验。

 

A. 用户访谈:
通过现场对用户one one形式进行访谈了解用户需求和反馈,通过与用户进行交流深入了解用户在使用产品或服务过程中的感受、需求、痛点和期望。最后我们对用户反馈的问题进行梳理、分析和脑暴,洞察出产品功能及服务优化方向。网上有很多关于用户访谈使用介绍这里就不过多介绍了,简单总结了一些我在使用过程中制定的流程和方法。

在进行用户访谈时我总结了七个心得,可以帮助我们在执行时更好的开展。

  1. 确定访谈目标:在开始访谈前,需要明确访谈的目标和目的,以确保访谈的顺利进行和结果的可靠性。
  2. 选择合适的受访对象:选择具有代表性的用户作为受访者,可以更好地了解用户的需求和反馈。
  3. 准备访谈提纲:根据访谈的目标和目的,准备一份访谈提纲,包括要探讨的主题、问题列表等。
  4. 舒适的氛围:在访谈过程中,要营造一个舒适、轻松的氛围,以使受访者能够自由地表达自己的想法和意见。
  5. 关注用户需求:在访谈过程中,要关注用户的需求和痛点,了解用户对产品的期望和要求。
  6. 避免引导性问题:在访谈过程中,要避免提出引导性的问题,以避免影响受访者的回答。
  7. 记录和分析访谈结果:在访谈结束后,要及时记录和分析访谈结果,整理受访者的意见和建议,以帮助我们了解用户需求和反馈,针对性地优化产品体验和服务。

总之,用户访谈是一种非常有效的了解用户需求和反馈的方法,可以帮助我们更好地了解用户的需求和痛点,针对性地优化打磨产品体验和服务。

 

B. 用户旅程图:
通过用户访谈得出来数据结果,我们将采用绘制用户旅程图方式,可以更全面地了解用户在使用产品或服务的过程中所经历的流程和步骤,以及用户的触点、行为、痛点、爽点以及内心OS等元素。通过将用户旅程图与用户访谈得出的数据进行结合,我们可以更有效地识别出用户在使用过程中问题暴露最多的环节从而针对性地优化产品体验

在绘制用户旅程图时,我总结了五个注意事项可以帮助我们在绘制时更准确:

  1. 确定用户旅程图范围和目标:在绘制用户旅程图前,我们需要明确用户旅程图的范围和目标,例如要绘制的是整个产品的用户旅程图还是某个具体功能的用户旅程图。
  2. 收集用户数据:通过用户访谈、调查问卷、观察用户行为等方式收集用户在使用产品体验过程中的数据。
  3. 绘制用户旅程图:根据收集到的数据,将用户在使用产品体验的过程中的触点、行为、痛点、爽点以及内心OS等元素以图形化的方式呈现出来。
  4. 分析用户旅程图:通过分析用户旅程图,可以发现用户在使用产品体验过程中存在的问题和需求,从而针对性地优化产品体验。
  5. 多角色泳道图:在B端业务中,由于涉及多个角色的交互和触发任务,因此多角色泳道图是一个非常有效体现用户链路的,可以帮助我们更好地了解用户的使用行为。

总之,通过绘制用户旅程图,我们可以更全面地了解用户在使用产品体验过程中所经历的流程和步骤,结合用户访谈得出的数据,可以更有效地识别出用户使用的卡点和产品体验问题,从而针对性地优化产品体验。

 

三、探索结果总结

我们通过前期的“体验层和用户层”分析结果提取关键性问题,并与业务方共创、分析、量化当前版本中存在的体验问题,且达成共识共同制定本次产品改版优化目标

总之,在梳理调研结果问题过程中,我们可以以制定优化目标形式进行总结,这样可以帮助后续在制定产品体验优化目标和设计策略时会更加聚焦问题避免走偏方向。
小结:在探索阶段,通过体验层和用户层分析以及其他方法和工具的应用,我们可以更全面地了解用户需求和反馈,明确产品改版的优化目标,为后续的产品设计和开发提供有力的指导和支持。

 

叁、收拢

通过前期的产品体验分析,将制定五个方面的产品体验优化目标,分别为:业务目标、产品目标、用户目标、体验目标和设计目标,可以帮助我们更好地与业务侧进行共创,明确本次产品体验优化的范围和重点。同时,这些目标也可以帮助我们后续更好地度量产品的优化提升效果。

总之,在制定产品体验优化目标时需要确保每个目标都是具体可衡量可实现的,并且与业务需求和用户需求保持一致。同时,还需要根据产品的实际情况和优先级,确定哪些目标是必须达成的,哪些目标是后续通过迭代逐步达成的。这样可以更好地明确工作量,使我们在改版过程更加聚焦优化方向。
在制定产品改版目标时,我总结了四个注意事项可以帮助我们在制定时提前规避一些问题:

  1. 业务目标:是与业务需求和KPI\ORK相关的目标,如提高用户活跃度、增加订单量等。这些目标通常是公司或团队关注的重点,也是产品体验优化的基础。在制定业务目标时,需要与业务侧进行充分沟通和讨论,确保目标与业务需求保持一致。
  2. 产品目标:是与产品功能和特性相关的目标,如增加新功能、优化产品架构等。这些目标可以帮助我们更好地完善和迭代产品,提高产品的质量和竞争力。在制定产品目标时,需要考虑产品的整体架构和功能特性,确保目标与产品的发展方向保持一致。
  3. 用户目标:是与用户需求和反馈相关的目标,如提高用户满意度、解决用户痛点等。这些目标可以帮助我们更好地了解用户需求和反馈,从而针对性地优化产品体验。在制定用户目标时,需要深入了解用户的需求和反馈,并结合用户体验调研数据进行制定。
  4. 体验目标:是与用户体验和交互设计相关的目标,如提高操作的流畅度、优化界面设计等。这些目标可以帮助我们提高产品的用户体验和交互效果,从而使用户更加愿意使用产品。在制定体验目标时,需要结合用户体验数据和用户访谈结果进行制定。
  5. 设计目标:是与产品设计和技术实现相关的目标,如优化视觉质感、提高任务成功率等。这些目标可以帮助我们更好地实现产品的设计和开发,提高产品的质量和体验。在制定设计目标时,需要考虑设计的可行性和技术实现的可能性,确保目标能够得以顺利实现。

小结:在制定共同目标时,需要与相关人员进行清晰、明确的沟通,确保每个目标的具体达成结果和每个人的职责都得到明确。这样可以避免误解和混淆,确保参与人员能够准确、高效地推进项目。

 

肆、制定

通过前期分析的结论并制定改版策略,主要围绕两个方面:1、用户需求分类:针对用户反馈的需求进行过滤,并将功能定性和优先级排序2、制定设计策略:根据用户需求和业务目标及产品目标,制定相应的设计策略,设计策略需确保与用户需求和业务目标及产品目标保持一致。通过用户需求过滤、制定设计策略、明确工作范围、制定开发计划以及产品迭代优化策略,我们可以更好地明确工作范围和推进项目。同时也可以确保项目的顺利进行。以下是我制定策略使用的方法:

 

一、用户需求分类

在前期针对用户访谈和CRM人员提出的用户需求转化为问卷,并使用KANO模型进行需求分类和优先级排序,可以帮助我们更好地了解用户对产品的关注点和期望,明确后续优化时需要重点解决的用户痛点。这样做有助于提高产品的质量和竞争力,并更准确地满足用户的需求。

我们通过KANO模型,将用户需求分为基本需求、期望需求和魅力需求。基本需求是用户认为产品必须具备的需求,需要与PM达成共识确保这些需求得到正确实现并且不能出现问题。期望需求是用户认为产品应该具备的需求,需要在产品改版过程中实现这些需求以增加用户的满意度。魅力需求是用户没有预料到的需求,可以在产品中适当的实现这些需求可以增加用户的满意度和口碑。

总之,KANO模型是一个非常好用的工具,不仅可以帮助我们更好地了解用户的需求和期望,还可以用于日常工作对PM提出的需求进行甄别,明确属于哪一类需求,从而更好地满足用户的需求并提高产品的质量和竞争力。此外,KANO模型还可以用于产品策划、运营策略制定、市场营销等领域,可以帮助团队更好地了解用户需求和痛点,从而制定更精准的策略和措施。

 

二、制定设计策略

制定设计策略是产品改版开发过程中非常重要的一环,可以帮助我们明确设计方向和目标,并制定相应的策略来实现这些目标。通过前期的调研将基于GSM+UES模型制定设计目标与策略,可以更准确地满足用户需求和业务目标及产品目标,并且与调研的结论形成闭环。同时,与业务方进行共创达成目标一致也是非常重要的。我们需要与业务方进行充分的沟通和讨论,确保设计策略与业务目标保持一致,同时也能更好地理解业务方的需求和痛点,为产品的改版提供更贴合实际需求的解决方案。

总之,制定设计策略需要充分考虑用户需求、业务目标、产品目标、产品发展趋势等因素,并与业务方进行充分的沟通和共创,以确保设计策略的可行性和有效性。同时,也需要根据实际的设计结果和用户反馈来不断调整和优化设计策略,提高产品的用户体验和质量。
小结:在进行用户需求分类和制定设计策略的过程中,需要充分地与团队成员进行沟通和讨论,以便更好地理解用户需求和业务目标,并制定相应的设计策略。同时,也需要确保团队成员对设计策略的理解和共识,以避免设计方向失焦。在与团队成员进行沟通和讨论时,可以采用多种方式,如会议、讨论组、头脑风暴等,以便充分发挥团队的智慧和创造力。同时,也需要保持开放的心态,积极听取不同观点和建议,并对问题进行深入的分析和探讨,以找到更优的解决方案。

 

伍、执行

在执行阶段,通过方案探索设计方案产出两个方面来进行方案设计和可行性验证。在执行这两个方面的工作时,团队需要保持紧密的合作和沟通,以确保设计方案的一致性和可行性。同时,团队还需要不断地与业务方和技术团队进行沟通和讨论,以确保设计方案能够得到有效的实现。

 

一、方案探索

方案探索将通过A.竞品框架分析B. 探索方案产出C.MVP方案验证三大板块进行方案探索,并确保方案的可实现性和有效性。

 

A. 竞品框架分析:

在方案设计前我们需要对竞品框架布局进行分析可以帮助我们更好地了解市场需求和用户行为从而更好地指导我们的产品改版方案设计通过对竞品框架布局的分析我们可以了解到用户使用频率较高的竞品是如何布局功能的以及它们的操作路径和交互设计。这些信息可以为我们提供有力的参考,帮助我们在设计改版方案时更好地聚焦方向优化框架布局提高产品的用户体验和基础体验。此外,通过对竞品的分析,我们还可以了解竞品的优势和不足之处,从而更好地改进自己的产品。我们可以借鉴竞品的优点,同时也可以针对竞品的不足之处进行改进,使自己的产品更加符合用户需求和市场需求。

分析完竞品框架后,还需要进行框架的优缺点对比,这里将通过统一性,逻辑性,可拓展性,可预测性4个维度进行对竞品框架分析,得出它们的优缺点有都有哪些,通过最后结论可以定位我们产品框架布局方向。

通过前面竞品框架分析和优缺点对比后,我们需要回顾一下是否符合我们的目标,并且衡量新框架可以解决可用性测试出来的体验问题的数量,同时也需要衡量新框架与目标的匹配程度

在竞品框架分析中,我总结了三点经验:

  1. 首先,我们需要确保新的框架设计能够满足我们的目标。我们的目标可能包括提高用户体验、增加用户满意度、优化操作流程等。通过对比竞品和分析优缺点,我们可以初步确定新的框架设计是否符合这些目标。
  2. 其次,我们需要度量新框架可以解决多少个可用性测试出来的体验问题。可用性测试可以帮助我们发现用户在使用产品过程中遇到的问题和困难,而这些问题和困难往往直接影响到用户体验和产品满意度。如果新的框架设计可以解决这些问题,那么它可能会带来更好的用户体验和产品满意度。
  3. 最后,我们还需要衡量新框架与目标的匹配度。即使新的框架设计符合目标,并且可以解决一些可用性测试出来的体验问题,但我们还需要确保它与目标完全匹配。换句话说,我们需要确保新的框架设计可以最大程度地满足我们的目标,并且能够带来更好的用户体验和产品满意度。

总之,在进行竞品框架分析和优缺点对比后,我们需要回顾一下是否符合我们的目标,并且衡量新框架可以解决可用性测试出来的体验问题的数量,以及新框架与目标的匹配程度。这些步骤可以帮助我们更好地评估新的框架设计是否可行和有效。

 

B. 探索方案产出:

结合着前期的调研与分析将结论融入到产品方案设计中,1、需要围绕现有产品的基础功能和用户期望的需求进行设计。这意味着需要考虑到产品的现有功能以及用户对产品的期望和需求从而制定相应的设计方案2、需要明确新框架的用户核心关键路径。这意味着需要了解用户在使用产品时的主要任务和操作流程并确定新框架如何引导用户完成这些任务和流程。通过明确用户核心关键路径可以更好地优化框架布局和功能设计。3、需要以高保真原型的质量产出方案高保真原型可以帮助我们更好地模拟产品的实际使用场景和用户体验,从而更好地评估方案的可行性和有效性,为后续做方案验证做准备。

总之,结合前期的调研和分析将结论融入到产品方案设计中是非常重要的步骤,可以帮助我们更好地指导方案设计。我们需要围绕现有产品的基础功能和用户期望的需求进行设计,明确新框架的用户核心关键路径,并以高保真原型的质量产出方案,为后续的方案验证做好准备。这样可以确保我们的设计方案更加贴近用户需求和市场趋势,提高产品质量和优势。

 

C. MVP方案验证:

MVP方案验证是产品改版方案的关键步骤,它旨在确保产品改版方案在实际操作中可行和方案落地有效支撑,并能够满足用户需求和解决产品可用性测试体验问题。

在开始前我们还需要准备一些前期工作:

  1. 需要编写一个标准操作流程(SOP)文档详细描述方案验证的所有步骤和操作指南。这包括测试目的、测试人员招募、测试环境、测试数据、测试步骤、结果记录等。这个文档将作为整个验证过程的指导和操作手册。
  2. 需要准备所有必要的材料和资源,包括测试目的、测试人员招募计划、测试环境搭建、测试数据准备、访谈问卷设计等。
  3. 在方案验证前,需要与业务方讨论并明确改版后产品的用户核心操作路径。这可以帮助我们更好地了解用户需求和产品使用场景,以便在方案验证过程中验证这些核心操作路径是否符合用户期望和业务需求。
  4. 需要将方案制作成可操作的Demo,以便在现场访谈中观察用户操作情况,验证方案的可行性和可落地性。Demo应该尽可能地模拟真实的使用场景和用户体验,以便更好地评估方案的可行性和有效性。
  5. 在准备好Demo后,需要邀请目标用户进行现场访谈,观察他们在实际操作中的表现和反馈。通过观察用户的操作过程和反馈,我们可以验证方案的可行性和可落地性,并明确产品改进的方向。
  6. 在访谈结束后,需要对用户的反馈和操作问题进行整理和分析。针对这些问题,我们需要进行深入的讨论和研究,列出问题优先级并逐个解决。
  7. 最后,根据测试结果和问题讨论的结果,需要明确结论,评估方案的可行性和可落地性。如果方案存在不可行或不可落地的问题,我们需要及时调整方案并进行再次验证;如果方案可行且可落地,我们可以进入下一阶段的产品开发。

在MVP方案验证结束后,根据测试结果和问题讨论的结果,我们可以通过以下三个维度“可用性测试问题解决覆盖率、用户体验提升比、产品体验评分”来度量新旧版本产品体验提升效果,并且和前期洞察产品体验问题结论形成闭环,(强调一下:这里的数据不是凭空捏造而是前期我们给自己挖的坑,在执行阶段时需要我们一点一点填补上前期挖的坑,可以理解为是一环套一环的思路哈!数据验证指标可以在前期共同讨论设定的,不仅限于此!)。

以下是我对MVP方案验证的理解和总结:
MVP方案验证的核心目的是什么?
MVP方案验证的核心目的是验证产品改版方案是否符合用户需求、是否能够解决可用性测试体验问题,以及是否能够在实际操作中可行。通过MVP方案验证,我们可以了解用户对产品的反馈和评价,验证产品方案的可行性和有效性,并及时发现和解决问题,确保产品改版的成功。
MVP方案验证的六个步骤:

  1. 准备MVP方案:在开始MVP方案验证之前,我们需要准备好MVP方案,包括产品改版的具体设计、功能实现操作demo、操作流程等。
  2. 招募测试用户:为了获得真实的用户反馈和评价,我们需要招募一定数量的测试用户,这些用户应该是我们的目标用户或者是相关领域的专家,以便更好地代表用户群体的意见和需求。
  3. 设计测试场景和任务:根据产品改版方案和用户需求,我们需要设计相应的测试场景和任务,以便在测试中模拟真实的使用情况,让用户在模拟的环境中进行操作和体验。
  4. 进行测试并收集用户反馈:在测试环境中,让测试用户按照设计的场景和任务进行操作,并收集他们的反馈和评价。这些反馈和评价可以包括用户对产品的使用感受、操作流程是否顺畅、功能是否满足需求等。
  5. 分析测试结果并解决问题:根据收集到的用户反馈和评价,我们需要对测试结果进行分析,找出产品改版方案中存在的问题和不足之处。针对这些问题,我们需要及时进行修正和完善,确保产品改版方案的可行性和有效性。
  6. 重复验证:在修正和完善产品改版方案后,我们需要再次进行MVP方案验证,以确保问题已经得到解决并且方案符合用户需求。重复验证是MVP方案验证的重要环节,以确保产品改版的成功。

总之,MVP方案验证是产品改版的关键步骤之一,它旨在验证产品改版方案是否符合用户需求、是否能够解决可用性测试体验问题、是否能够在实际操作中可行。通过MVP方案验证,我们可以及时发现和解决问题,确保产品改版的成功。

 

二、设计方案产出

在设计方案产出阶段将通过A.探索设计风格B. 明确设计方向C.视觉风格提案三方面进行方案的设计,并确保方案的设计质量和可落地性。

 

A. 探索设计风格:

在开始设计方案之前,首先需要探索和了解产品的设计风格和定位。这涉及对目标用户的研究、市场趋势的洞察,以及竞争对手的分析等。通过了解用户的需求、喜好和行为模式,以及市场上的成功案例,可以初步确定产品的设计风格和基调。

我们可以通过虚拟小组分头进行风格探索,集思广益,从多个角度和思路出发,寻找和探索适合的设计风格。而将分析结论整合,结合情绪板聚焦改版设计风格方向,则可以将这些探索结果进行整合和提炼,明确设计方向,确保方案的可落地性。
具体来说,这个过程可以包括以下步骤:

  1. 组建虚拟小组:将团队成员分成几个虚拟小组,每个小组负责探索不同的设计风格。
  2. 分头进行风格探索:每个虚拟小组可以通过调研、讨论、尝试等方式,探索不同的设计风格,包括色彩、排版、元素、交互方式等。
  3. 收集和分析数据:每个小组收集和分析相关数据,了解用户对不同设计风格的反应和喜好。
  4. 整合分析结论:将各个小组的分析结论进行整合,了解用户对不同设计风格的偏好和需求。
  5. 结合情绪板聚焦改版设计风格方向:根据整合后的分析结论,结合情绪板确定改版设计风格的方向。
  6. 设计方案产出:根据确定的设计风格方向,进行方案的设计和产出,确保方案的可落地性。

 

B. 明确设计方向:

在了解了设计风格的基础上,需要进一步明确设计方向。这包括确定产品的整体设计思路、核心理念和关键元素等。这个阶段需要我们根据前期收集到的用户反馈和市场信息,结合设计专业知识和经验,提出具体的设计方案和实施计划。

比如我们定义了以下三个体验优化策略:
1、STEP 01 简化功能模块。
将方案中的功能进行梳理和整合,去除不必要或冗余的功能,只保留核心和关键的功能,以降低实现的复杂度和成本,并提高用户的使用体验。

a.功能梳理:对方案中的所有功能进行梳理和分类,了解每个功能的作用和重要性。

b.功能整合:将相似或相关的功能进行整合,去除重复或冗余的功能,只保留必要的功能。

c.功能优先级排序:根据功能的重要性和用户需求,对保留的功能进行优先级排序,确定核心功能和次要功能。

d.设计简化方案:根据功能优先级排序结果,设计简化后的方案,确保只包含核心和关键的功能。

e.评估与验证:对简化后的方案进行评估和验证,确保其满足用户需求和业务目标。

 

2、STEP 02 减少信息干扰。
信息干扰通常是指设计元素、颜色、字体、布局等对用户注意力的分散和干扰,它可能会影响用户对产品信息的理解和使用。

a.精简设计元素:在设计方案中,尽量减少不必要的装饰和设计元素,保持界面的简洁和清晰。

b.突出核心信息:通过调整字体大小、颜色、位置等方式,突出显示核心信息,引导用户关注重点内容。

c.一致性的设计语言:在整个产品中,保持设计元素的统一和一致性,避免因设计风格的差异而造成用户的困惑。

d.合理利用空白:通过适当的空白和留白,营造出简洁、清晰的视觉效果,减少信息干扰。

 

3、STEP 03 缩短操作路径。
操作路径是指用户完成某项任务所需经过的步骤和流程。如果操作路径过长,用户可能会感到繁琐和不便,从而影响产品的使用体验。

a.减少操作步骤:优化产品设计,尽可能减少用户完成某项任务所需的步骤和操作。例如,通过整合多个功能或简化操作流程,减少用户需要点击或输入的次数。

b.整合功能:将相关功能进行整合,减少用户在不同页面或模块之间的跳转。例如,将多个相关功能放在同一个页面或模块中,方便用户一次性完成多个操作。

c.提供快捷方式:为用户提供快捷方式或快速入口,使其能够更快地到达目标页面或完成特定操作。例如,通过添加快捷菜单或按钮,使用户能够快速找到所需的功能或信息。

d.优化导航结构:优化产品导航结构,使用户能够更轻松地浏览和查找所需的内容。例如,通过设计清晰的菜单结构和标签页布局,使用户能够快速找到所需的信息或功能。

 

C. 视觉风格提案:

在明确了设计方向后,需要明确改版风格关键词,结合映射出的关键词制定视觉风格提案。这个阶段需要设计师根据产品的定位和目标用户的需求,制定出符合设计方向的视觉元素和风格。视觉风格提案需要包括颜色、字体、图片、布局等方面的具体建议,以便让用户在第一时间感受到产品的特点和风格。

通过提取产品中的核心关键界面,进行风格的尝试和设计探索并围绕“轻量、沉浸、高效”的原则进行设计。同时,与业务方共创明确设计方案风格方向,可以提高产品的用户体验和可用性,为推动产品改版成功打下坚实的基础。

在这个过程中,我们可以采取以下步骤:

  1. 确定核心关键界面:首先,我们需要确定产品中的核心关键界面,这些界面通常是用户使用频率较高、对产品体验影响较大的页面。
  2. 风格尝试:针对每个核心关键界面,我们可以进行多种风格的尝试,包括色彩、排版、图标、交互方式等。通过对比不同风格的呈现效果,我们可以找到最适合的界面风格。
  3. 设计探索:在确定风格后,我们可以在核心关键界面上进行设计探索,尝试不同的布局、交互方式和视觉效果。在这个过程中,我们需要注重轻量、沉浸和高效的设计原则,确保用户能够快速、轻松地完成任务。
  4. 试错打磨:通过试错的方式,我们可以不断调整和优化设计方案,找到最优的呈现样式。在这个过程中,我们需要不断收集用户反馈和评估效果,以便及时调整设计方案。
  5. 与业务方共创:与业务方共创设计方案风格方向是非常重要的。业务方通常更了解产品的业务需求和用户需求,他们的意见和建议可以帮助我们更好地满足用户需求和提高产品的可用性。

小结:在风格尝试阶段,可以大胆地探索不同的设计风格,不必过于考虑产品业务的约束,这样可以让我们寻找到最佳的设计方案。同时,试错打磨也是一个重要的步骤,通过不断地尝试和调整,我们可以提高设计的质量和效果。最后,及时与业务方进行沟通和同步是非常关键的,以确保我们的设计方向与产品业务需求保持一致。只有这样,我们才能确保方案的可落地性和产品的成功改版。

 

陆、结果

最后,我们需要制定两个标准分别为:设计目标度量标准,产品上线打分标准,可以通过这两个标准对设计方案进行量化和评估确保其符合前期制定的目标并具有完整性和可落地性。同时,我们也可以及时发现和解决潜在的问题和挑战,为产品的成功上线提供有力保障。

 

A. 设计目标度量:

设计目标度量是验证设计方案是否符合前期制定目标的关键步骤。我们可以通过灰度测试版本中进行度量,确保设计方案能够在实际操作中可行并能够满足用户需求。
我们可以根据前期制定的设计目标,制定具体的度量标准,包括功能可用性、用户体验、性能等方面。将灰度测试版本提供给一小部分合作企业,收集他们的反馈和数据,对设计方案进行实际验证。对收集到的数据进行分析和评估,包括用户使用行为、错误率、性能指标等,以了解设计方案在实际操作中的表现。根据数据分析结果,对设计方案进行必要的调整和优化,确保其能够更好地满足用户需求和提高产品性能。

在制定设计目标度量标准时,我们可以考虑以下几个方面:

  1. 功能性:评估设计方案是否满足用户需求和产品目标,是否涵盖了所有关键功能和界面。
  2. 可用性:评估设计方案是否符合用户的使用习惯和需求,是否能够提高产品的易用性和用户体验。
  3. 视觉设计:评估设计方案中的视觉元素是否符合产品风格和品牌形象,是否具有吸引力和美感。
  4. 交互设计:评估设计方案中的交互流程是否流畅、自然,是否能够引导用户完成操作任务。
  5. 性能响应速度:评估设计方案是否能够在不同设备和网络环境下保持快速的响应速度。

B. 产品上线打分标准:

产品上线打分标准是一个用于评估产品上线效果和质量的量化指标体系。根据打分结果评估产品的上线效果和质量。需要注意的是,具体的打分标准和权重可以根据实际情况进行调整和优化。同时,在产品上线后,还需要持续关注产品的运行情况和用户反馈,及时发现和解决潜在的问题和挑战,为产品的持续改进和优化提供有力保障。

以下是制定一个打分标准范围参考示例:

  1. 功能完整性:评估产品是否涵盖了所有关键功能和界面,是否满足用户需求和产品目标。
  2. 用户体验:评估产品的易用性、交互流程、视觉设计等方面是否符合用户的使用习惯和需求。
  3. 视觉语言:一致的设计语言、度量设计方案需遵循了标准化组件规范、色彩、弹框、圆角、间距、阴影等。
  4. 性能稳定性:评估产品在上线后的运行稳定性和响应速度,是否能够保持高效的运行效率。
  5. 创新性:评估产品是否具有创新性和前瞻性,是否能够引领产品的发展趋势并提高产品的竞争力。
  6. 用户反馈:评估用户对产品的反应和满意度,了解产品的优点和不足之处。
  7. 数据表现:评估产品上线后的数据表现,包括流量、转化率、ARPU等指标的变化。

C. 项目成果复盘:

最后,我们需要对整个产品改版过程进行详细的梳理和总结,以复盘的形式量化评估做得好和不足的地方。通过这种方式,我们可以沉淀方法论和经验,为团队赋能,避免在未来的工作中重蹈覆辙。(如何做项目复盘网上有很多方法哦,这里就不过讲了)

 

 

感谢阅读。
希望以上的总结能够为大家提供一些启示和帮助,让我们在未来的工作中更加顺利和高效。



作者:Shook舒克
链接:https://www.zcool.com.cn/article/ZMTYwMjc3Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

B端设计——组件库—数据录入&反馈&导航

前端达人

B端设计的文章和资料参考,缺少系统性的说明,这是我总结第五篇。本文主要阐述——数据录入&反馈&导航

 

本文为B端设计组件库的第五篇、也是组件库系列的最后一篇,下一篇将更新B端设计中常见的问题合集来结束本系列。

一、引言

随着企业对于数字化转型的需求日益强烈,B端产品的发展也在加速。而B端组件库,作为产品设计与开发的基础构建模块,其重要性不言而喻。在众多的组件中,“数据录入”、“反馈”和“导航”是三个关键的组成部分,它们在很大程度上决定了产品的用户体验和工作效率。本文将对这三个组件进行深入的研究,探索其最佳的设计与实施策略。

二、B端组件库中的数据录入类组件应该如何搭建?如何进行多样化设计?

2.1“数据录入”类组件搭建过程

 

2.1.1搭建步骤:

需求分析:首先明确数据录入的需求,包括需要录入的数据类型、数据量、频率等。

设计表单:根据需求设计合适的表单,包括输入项的类型(文本、数字、日期等)、布局、标签等。

添加验证:为了确保数据的准确性,需要为表单添加合适的验证规则,如必填项、格式验证等。

考虑用户体验:为了提高数据录入的效率,可以考虑添加一些方便用户的功能,如自动填充、批量导入等。

测试与迭代:完成设计后,进行用户测试,根据反馈进行必要的调整和优化。

2.1.2注意事项:

明确性:确保每个输入项的目的和要求都是清晰的,避免用户产生困惑或误解。

友好性:尽量简化录入流程,减少不必要的步骤和输入。提供友好的提示信息和反馈,帮助用户顺利完成录入。

响应速度:数据录入过程中,系统的响应速度也是一个重要的考虑因素。确保系统在处理大量数据或复杂操作时仍能保持流畅。

安全性:对于敏感数据的录入,需要确保系统的安全性,如使用加密技术、防止SQL注入等。

2.1.3常用场景:

用户注册:在注册新用户时,需要收集用户的基本信息,如姓名、邮箱、密码等。

商品管理:在电商或库存管理系统中,添加或编辑商品信息时需要进行数据录入。

订单处理:处理订单时,需要录入订单的相关信息,如客户信息、商品信息、支付方式等。

数据导入:对于一些已经存在的数据,提供批量导入的功能可以大大提高数据录入的效率。

报表生成:生成报表时,用户可能需要输入一些参数或筛选条件,这也涉及到数据录入的操作。

2.3如何进行多样化设计?

进一步提升B端组件库中“数据录入”类组件的设计和扩展能力:

1. 增强交互与动效设计 使用明显的交互动效,如微动画、过渡效果等,提升用户输入时的体验。 设计清晰的输入状态,如聚焦、失焦、有效、无效等,使用户明确知道当前输入的状态。

2. 提供多种输入格式和单位支持 允许用户选择不同的输入格式,如日期可以选择“年-月-日”或“月/日/年”等格式。 对于数字输入,提供多种单位支持,如百分比、货币、科学计数等。

3. 设计可扩展的验证规则系统 提供内置的常见验证规则,如必填、长度限制、正则匹配等。 允许用户自定义验证规则,以满足特定的业务需求。

4. 支持复杂数据结构输入 设计支持数组、对象等复杂数据结构的输入组件。 提供可视化编辑工具,方便用户直接编辑复杂数据结构。

5. 优化键盘导航和快捷键支持 允许用户使用键盘快速导航和输入数据,如使用Tab键在字段间切换。 提供常用的快捷键支持,如Ctrl+C/V进行复制粘贴。

6. 设计可配置的界面和布局 提供多种预设的界面风格和布局选项。 允许用户自定义界面元素和布局,以满足不同的视觉需求。

7. 集成智能提示和自动补全功能 使用机器学习算法为用户提供输入建议,减少输入错误。 对于重复输入的数据,提供自动补全功能,提高输入效率。

8. 支持多语言和本地化设置 为不同语言和文化背景的用户提供本地化支持。 允许用户自定义显示的语言和格式设置。

9. 建立组件使用分析和反馈系统 收集并分析用户使用数据录入组件的数据,了解用户的真实需求和习惯。 建立用户反馈系统,及时收集和处理用户对组件的意见和建议。

三、B端组件库中的反馈类组件应该如何搭建?有哪些注意事项?常用的场景有哪些?

在B端组件库中,反馈类组件是非常重要的一部分,它们用于在必要时向用户反馈操作结果,做到合理有效的信息传达。

3.1搭建反馈类组件

确定反馈类型:根据需要,确定要使用的反馈类型,如提示、警告、错误、成功等。

设计反馈样式:针对不同类型的反馈,设计相应的视觉样式,如颜色、图标、动画等。

编写组件代码:根据设计好的样式,编写反馈类组件的代码,包括HTML结构、CSS样式和JavaScript交互逻辑。

测试与优化:对编写好的组件进行测试,确保其在不同浏览器和设备上都能正常工作,并根据测试结果进行优化。

3.2注意事项

反馈一致性:对于同一类型的消息反馈,使用同一类型的组件,以确保用户在不同场景下获得一致的体验。

符合场景:不同的场景使用不同的反馈组件,例如系统主动推送消息类型的使用通知提醒框。

描述精确:合理而精确的消息提示文案描述,可以帮助用户高效理解。

可关闭性:对于一些非关键性的反馈,提供用户手动关闭的选项,避免打扰用户。

适应性:确保反馈类组件在不同屏幕尺寸和分辨率下都能正常显示和工作。

3.3常用场景

告警提示:当某个页面需要向用户提供告警信息时,使用告警提示。通常告警提示在页面上不会自己消失,用户可以手动关闭。

全局提示:在当前页面以轻量级提示方式告知用户操作的结果,使用全局提示。通常提示框在页面顶部居中显示并且会自动消失,不打断用户的其他操作行为。

通知提醒框:一般在系统主动推动通知的情况下使用,如服务到期、服务告警等。

加载提示:常用于数据加载中提示、操作中提示,Loading的文案可按照具体场景定义。

对话框:常用于比较强的二次确认弹框提示、或者展示一段比较长的消息。

四、B端组件库中的导航类组件应该如何搭建?有哪些注意事项?常用的场景有哪些?

在B端组件库中,导航类组件的设计和实现对于用户体验和系统效率至关重要。

4.1搭建导航类组件

确定导航结构:根据系统的信息架构和用户需求,确定导航的结构,如全局导航、局部导航、面包屑导航等。

设计导航样式:针对不同类型的导航,设计相应的视觉样式,如颜色、字体、图标等。

编写组件代码:根据设计好的样式和结构,编写导航类组件的代码,包括HTML结构、CSS样式和JavaScript交互逻辑。

测试与优化:对编写好的组件进行测试,确保其在不同浏览器和设备上都能正常工作,并根据测试结果进行优化。

4.2注意事项

清晰的信息架构:确保导航的结构能够清晰地反映系统的信息架构,使用户能够快速找到所需的信息。

易于理解:导航的标签和名称应使用用户熟悉的术语,避免使用过于专业的术语或缩写。

可扩展性:考虑到系统未来的发展,导航结构应具备一定的可扩展性,以便添加新的功能或模块。

响应式设计:确保导航在不同屏幕尺寸和分辨率下都能正常显示和工作,提供良好的用户体验。

遵循设计规范:参考行业通用的设计规范和最佳实践,确保导航的设计符合用户的期望和习惯。

4.3常用场景

全局导航:适用于整个系统的主导航,通常位于页面的顶部或侧边,提供对主要功能和模块的快速访问。

局部导航:适用于特定页面或功能的子导航,帮助用户在该页面或功能内快速找到所需的信息。

面包屑导航:显示用户当前所在的位置,以及从首页到当前页面的路径,方便用户了解自己的位置和返回上一级页面。

下拉菜单:当导航项较多时,可以使用下拉菜单进行收纳,节省页面空间并提高用户体验。

标签页导航:适用于需要同时展示多个内容或功能的场景,用户可以在不同的标签页之间切换以查看或操作不同的内容。

举例说明:公司内部不同系统,可采用的不同种类菜单导航,均可以设计先行。后续使用可进行调整

 

五、如何对“数据录入”、“反馈”、“导航”进行C化设计?

对于数据录入,关键在于简化用户的输入过程,同时提供清晰直观的界面。

例如,可以通过减少不必要的表单字段来简化录入流程,使用智能填充来加速输入过程,并通过即时验证和友好的错误提示来减少用户的输入错误。此外,考虑到移动设备用户的增长,优化表单的移动端设计,确保在小屏幕上也能轻松输入,是至关重要的。这可能意味着增加触摸友好的元素,如更大的点击区域和适应屏幕大小的布局。

在反馈方面,提供即时、直观且情感化的反馈对于增强用户体验至关重要。这包括在用户完成任务或遇到错误时提供明确的视觉和文字提示。

例如,操作成功时可以显示绿色的勾号图标和正面的消息,而错误则可以用红色的叹号和说明性的错误消息来提示。增加动态反馈,如加载动画,也可以提高用户体验,减少等待时的焦虑感。此外,提供易于访问的帮助和支持选项,例如在线聊天或用户论坛,可以帮助用户在遇到问题时快速找到解决方案。

对于导航,设计的重点是确保用户能够直观地理解如何在应用或网站中移动。

这涉及到创建清晰、一致的导航结构,突出显示主要功能,并使用易于理解的图标和标签。在移动设备上,这可能意味着采用汉堡菜单或底部导航条来节省空间。同时,考虑到个性化的重要性,可以提供自定义选项,让用户根据自己的偏好调整导航界面。 综上所述,C化设计强调的是提高易用性和用户体验,使得B端产品在保持专业性和功能性的同时,更贴近最终消费者的使用习惯。

六、结束

后续还有一篇“问题汇总”,之后会整理一些最近两年的B端项目发布,感谢大家支持!!

 

其余篇章,可点击主页观看!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



作者:张阳光Designer
链接:https://www.zcool.com.cn/article/ZMTU5OTM4OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

视觉设计的审美提升

涛涛

设计需要大胆的尝试和创新,日益更新的设计趋势和潮流需要不断地推陈出新

浅谈设计师管理者的发展路径(干货分享)

涛涛

其实人人都是管理者,不管有没有这样的素质,必须得管自己,其次他还得承担责任,一旦承担责任就涉及到管理。

用户体验设计师常用的 9 种自研提效工具

涛涛

工具所要解决设计师的痛点是类似的或是专项的比较容易判断的,细节功能、操作体验、生态系统,是我们设计师们所争相讨论的重点。

小程序ui该怎么做?

涛涛

一款聚合收款平台的小程序界面UI复盘

页面分割设计指南

博博

当你打开一个页面,首先映入眼帘的是丰富多样的内容和信息。如何在有限的空间内,既保证内容的完整性,又让用户能够轻松理解和浏览,这背后的奥秘就在于页面分割。今天,我们就来一起探讨页面分割的艺术与技巧,看看它是如何为你的设计增添魅力,提升用户体验的。
 
在设计中,页面分割不仅仅是一种技术手段,更是一种艺术表现。它如同一位细心的画师,巧妙地运用线条、色彩、空白等元素,
将页面内容划分为一个个清晰、有序的区域。
通过这些分割,用户能够更快速地找到所需信息,更轻松地理解页面内容,从而享受到更加愉悦的阅读体验。
 
页面分割的魅力在于其多样性和灵活性。不同的页面可以采用不同的分割方式,如线条分割、卡片分割、留白分割等,以满足不同的设计需求和用户习惯。同时,页面分割也需要根据内容的实际情况进行合理调整,既要保证信息的完整性,又要避免过度分割带来的混乱感。
 
在本文中,我们将一起探讨页面分割的原则、技巧和应用实例。我们将学习如何运用不同的分割方式来优化页面布局,提升用户体验。同时,我们还将分享一些成功的页面分割案例,以激发你的设计灵感,为你的界面设计注入新的活力。
 
分享目录:
一、分割的常见样式
二、线性分割
三、卡片分割
四、留白分割
五、总结
设计方法论 I 超全面的页面分割设计指南
 
线性分割:
通过使用线条来划分页面的不同区域,以达到组织内容、引导用户视线和提升整体美观度的目的。这种分割方式简单明了,能够清晰地展现出页面内容的层次和结构。
 
卡片分割:
卡片式设计是一种流行的界面分割方法,通过将内容划分为独立的卡片或区块,使用户能够更清晰地理解信息。每个卡片通常包含相关的内容,如文本、图片或按钮,以便用户快速浏览和交互。
 
留白分割:
主要通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然地将信息进行分组。这种留白的方式能够为页面增加呼吸感,降低视觉噪音,使设计看起来更简洁。
设计方法论 I 超全面的页面分割设计指南
 
近年来,设计趋势从“卡片式设计”转向了“去线化设计”,
即倾向于使用留白分割而非过多的线条分割,以实现更为简洁清晰的界面效果。设计师在选择分割方式时,应优先考虑留白分割,其次是线性分割,最后是卡片分割。这个选择顺序反映了设计界的一般原则,即在不影响信息传达的前提下,尽可能保持设计的简洁性。
设计方法论 I 超全面的页面分割设计指南
 
线性分割的定义:
线性分割设计是一种在视觉设计中使用的技巧,它使用线条、边框或细线等元素来划分、区分或连接页面上的不同内容区域。这种设计手法主要用于
提高页面内容的可读性和组织性,帮助用户更好地理解和浏览页面信息。
 
线性分割设计具有以下优势:
 
1.划分区域:
线性分割可以将页面划分为不同的区域或模块,使得每个区域的内容更加清晰、有序。这有助于用户快速定位和浏览所需的信息,提高阅读效率。
 
2.区分内容:
线性分割可以用来区分不同类型的内容,如文本、图片、图表等。通过线性分割,可以将这些内容进行分组或归类,使得页面更加整洁、有序。
 
3.引导视线:
线性分割可以引导用户的视线,帮助他们更好地理解页面内容。通过合理的线性分割设计,可以突出显示重要的信息或元素,引导用户关注到关键内容。
 
4.增强层次感:
线性分割可以增强页面的层次感,使得页面内容更加丰富、有深度。通过不同样式的线性分割,可以区分不同的信息层级,帮助用户更好地理解页面结构和内容关系。
 
使用原则:
在使用分割线时,我们应遵循一些原则,以确保其有效地帮助用户理解页面的组成,同时避免过度使用带来的视觉干扰。
 
1.分割线应当微妙而不过于显眼。
它们在布局中应该容易被用户注意到,但又不应成为焦点,以免分散用户的注意力。
 
2.分割线应被视为次要的元素。
只有在留白等其他设计手法无法有效起到分割作用时,才考虑使用分割线。它们应当是布局中的辅助工具,而不是主导元素。
 
3.谨慎使用分割线。
过度使用分割线可能会导致页面显得混乱和复杂。相反,我们应该用分割线来创建信息分组,而不是简单地分割每一个条目。通过审慎而恰当地使用分割线,我们可以有效地提升页面的可读性和用户体验。
图片来源于参考文章
图片来源于参考文章
 
线性分割三种类型:
通栏分割线、内嵌分割线和中间分割线。
 
1.通栏分割线(Full-bleed Dividers):
通栏分割线通常横跨整个页面宽度,用于分隔彼此完全独立的内容区域。这种分割线在视觉上非常显著,能够清晰地划分出不同的内容区块,使用户能够迅速区分不同部分的信息。通栏分割线通常用于区分文章、产品列表、服务介绍等独立的内容区域。
 
2.内嵌分割线(Inset Dividers):
内嵌分割线通常位于内容区域内部,用于分隔有锚点(如头像、图标等)的相关内容。这些锚点可以是图片、符号或小的图形元素,它们与分割线一起,帮助用户更好地理解和区分内容。内嵌分割线常用于列表、卡片式布局、时间线等场景中,用于展示有关联但不同类别的信息。
 
3.中间分割线(Middle Dividers):
中间分割线位于两个内容区域之间,用于分隔无锚点的相关内容。这种分割线通常比通栏分割线更细,更注重于在视觉上划分空间,而不是强调内容的独立性。中间分割线常用于文本段落之间、列表项之间或不同功能区域之间,以提供清晰的结构和层次。
设计方法论 I 超全面的页面分割设计指南
 
在大多数情况下,当信息层级较为简单(即信息层级≤2)时,使用分割线进行信息分割是一种有效的方法。然而,实际上,如果留白间距足够大,我们也可以使用留白来达到类似的效果。通过增大留白间距,我们可以创造出清晰的视觉区域划分,使得信息之间的界限更加明确。
 
与分割线相比,足够大的留白间距可以避免多余的线性元素干扰,让整体视觉效果更加清爽。这样的设计选择有助于提升用户的阅读体验,使用户更加轻松地理解和消化信息。
 
因此,在信息层级较简单的情况下,我们可以灵活地选择使用分割线或留白来进行信息分割。通过调整留白间距,我们可以达到与分割线相似的效果,同时保持整体设计的简洁和清晰。
设计方法论 I 超全面的页面分割设计指南
 
为了提升屏效,我们希望在一屏内展示尽可能多的信息。在这种情况下,分割线的设计显得尤为重要,因为它们能够有效地划分信息区域,使内容更加清晰、易于理解。
 
通过使用分割线,我们可以将较多的信息条理化,使得用户能够更快速地找到所需的内容。与没有分割线的布局相比,使用分割线能够显著提高信息的可读性和可理解性。
 
在相同的信息布局下,分割线能够将信息区域明确地划分开来,防止信息之间产生混淆或交叉。这种划分不仅使得每个信息块更加独立,而且提高了信息之间的对比度,使用户能够更轻松地识别和区分不同的信息。
 
因此,当我们的目标是提高屏效并展示大量信息时,分割线的设计是一个关键要素。通过合理地使用分割线,我们可以确保信息布局更加清晰、有序,从而提高用户的阅读效率和满意度。(如下图)
设计方法论 I 超全面的页面分割设计指南
 
线性分割在移动端页面设计中的应用场景广泛,尤其是在需要清晰划分信息模块时。如微信的聊天列表中,线性分割被用来区分不同的消息条目。每条消息之间通过一条细线进行分隔,使得每条消息清晰可辨,方便用户快速浏览和定位到特定的消息。
 
线性分割还常用在各类App的信息提示中,如果有多条消息需要展示,线性分割可以用来区分不同的消息组。例如招商银行APP中,当用户收到多条未读消息时,每条消息之间可以通过线性分割进行区分,使得每条消息清晰可辨,方便用户逐一查看和处理。
 
在APP需要用户填写信息和设置的表单页面中,线性分割可以用来区分不同的输入字段或信息区域。这有助于用户更清晰地了解需要填写的信息,提高表单的填写效率和准确性,比如站酷的设置页面(如下图)
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
卡片分割的定义:
卡片分割设计主要通过将内容或功能区域划分成独立的“卡片”来进行信息展示和组织。每个卡片通常包含相关的内容或功能,并且与其他卡片通过一定的间距或线性分隔进行区分。
 
卡片分割设计具有以下优势:
 
1.内容封装:卡片分割设计将相关内容或功能封装在一个独立的卡片内,使得每个卡片成为一个独立的信息单元。这有助于保持页面内容的清晰和整洁,方便用户浏览和理解。
 
2.明确边界:每个卡片通常具有明确的边界,通过边框、阴影或间距等元素来区分不同的卡片。这种边界的存在使得每个卡片在视觉上相对独立,方便用户进行区分和识别。
 
3.灵活布局:卡片分割设计具有很高的灵活性,可以根据需要自由调整卡片的大小、位置和排列方式。这使得设计师可以根据不同的设计需求和用户习惯来灵活调整卡片的布局,以达到最佳的视觉效果。
 
4.强调重点:通过不同的视觉处理手法,如改变卡片的颜色、大小或样式等,可以突出显示重要的卡片或内容。这有助于吸引用户的注意力,引导他们关注到关键信息。
 
卡片的基本构成:
卡片是一个独立的主题性容器,旨在将内容和操作组合在一起。它可以包含多种元素,如容器、缩略图、标题、副标题、富媒体、辅助文字、按钮和图标按钮等。这些元素并非必须全部存在,而是根据具体需求进行选择和配置。无论选择哪些元素,它们都会以易于扫描和操作的形式整齐地放置在卡片上。这种设计使得卡片成为一个灵活且高效的信息展示工具,适用于各种场景和应用。
设计方法论 I 超全面的页面分割设计指南
卡片分割常见的类型:
卡片分割可分为通栏卡片和非通栏卡片
 
1、通栏卡片:
其特点是卡片占据整个页面宽度,没有左右边距。通栏卡片的设计可以提高布局的灵活性,使得页面内容更加宽敞和大气。同时,通栏卡片也可以更好地突出展示单条内容,引导用户的视线,提高阅读效率。
 
2.非通栏卡片:
与通栏卡片相比,它会在卡片的左右两侧留有边距,不完全占据整个页面宽度。这种设计方式可以使得页面内容更加有层次感和组织性,同时也有利于突出显示某些关键信息。
设计方法论 I 超全面的页面分割设计指南
通栏卡片
通栏卡片相较于非通栏卡片,其设计特点在于去除了左右两端的留白,仅保留上下边距,从而提供了更大的展示空间。这种设计使得卡片内的内容能够占据整个页面宽度,进一步增强了内容的视觉冲击力。在通栏卡片中,卡片与背景的关系通常通过一条背景色块来抽象表现,这种简洁的处理方式避免了过多的视觉元素干扰,使得页面整体看起来更加整洁和统一。
 
通栏卡片可以被视为在极简列表式和传统卡片式设计之间的一种折中选择。它继承了卡片式的分层方式和强交互性,使得用户能够轻松地浏览和交互页面内容。如下图微博“关注”、微信“发现”页面。
设计方法论 I 超全面的页面分割设计指南
 
非通栏卡片
通常采用带圆角的设计形式,这种设计不仅赋予卡片一种柔和、圆润的视觉效果,还增强了用户的视觉舒适度。结合阴影效果以及四周的边距,非通栏卡片巧妙地形成页面留白,使得整体设计层次感更加丰富。
 
通过巧妙的投影设计以及前后颜色的精准设定,非通栏卡片成功地让内容与背景之间产生视觉空间感,进一步强化了内容的立体感和层次感。这种设计技巧不仅提升了卡片的视觉吸引力,还使得用户在浏览页面时能够更加轻松地区分和聚焦关键信息。
 
在页面设计中,非通栏卡片的应用范围十分广泛。无论是用于展示文章、产品、图片还是其他类型的内容,非通栏卡片都能够通过其独特的视觉效果和设计元素,为用户带来更加舒适、美观的视觉体验。同时,非通栏卡片还具有良好的适应性和灵活性,可以根据不同的设计需求和用户习惯进行定制和调整,满足不同场景下的应用需求。如下图夸克“夸克日报”、APP Store“首页”
设计方法论 I 超全面的页面分割设计指南
 
选择使用通栏分割线还是卡片分割,主要取决于你的设计目标和内容需求。以下是三个参考建议,帮助你做出更好的选择:
 
1.当内容已有自然分割线时:
如果你的主题内容本身就已经有明确的分割线,比如列表项、段落分隔等,那么采用非通栏分割会是一个好选择。卡片可以清晰地界定每个内容块,使主题信息层次更加分明,提高用户的阅读效率。
 
2.当内容类型多样且占据较大空间时:
如果单个主题内部包含了多种类型的内容,如文字、图片、视频等,且这些内容在垂直方向上占据了较大的空间(例如,内容长度超过屏幕高度的一半),使用非通栏分割会更加合适。卡片能够有效地圈定内容范围,为用户提供一个明确的视觉边界,帮助他们更好地理解和消化信息。
 
3.当需要增强横向空间感时:
如果你希望扩展页面的横向空间,或者暗示用户可以横向滑动页面查看更多内容,那么非通栏卡片会是更好的选择。非通栏卡片的设计能够利用横向内容连续性原则,帮助用户建立页面可以横向滑动的意识,从而提升页面的互动性和用户体验。如下图知乎“发现”、站酷“推荐”。
设计方法论 I 超全面的页面分割设计指南
 
卡片分割更适合图文混排
卡片分割设计以其独特的布局方式,成为图文混排中的理想选择。它能够巧妙地将不同大小、媒介的内容统一呈现在一个界面中,实现了内容的多样性与统一性的结合。这种设计不仅让单屏区域能够显示更多内容,还通过合理的空间划分,确保了文字和图片之间的和谐共存,既维持了视觉的一致性,又巧妙地平衡了文字和图片的视觉强度。因此,在需要同时呈现多种内容和媒介的场景中,卡片分割无疑是一种高效且美观的解决方案。如下图知乎“想法”、站酷“首页”
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
 
留白分割的定义:
留白分割是目前设计的主流趋势,越来越多的产品在使用留白分割设计。留白分割主要通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),将信息进行自然的视觉分组。
 
留白分割具有以下优势:
 
1.突出重点信息:
通过增加间距,可以将关键信息与其他内容区分开来,使用户更容易注意到。
 
2.提高可读性:
适当的留白可以使文字或图形元素之间的界限更清晰,减少视觉干扰,从而提高用户的阅读效率。
 
3.增强设计感:
留白可以为设计增加呼吸感,避免元素过于拥挤,使整体布局更加和谐、美观。
 
当元素之间的间距保持均匀时,整个视觉呈现会显得平衡且协调,大脑默认为一个整体。然而,一旦元素的横向和纵向间距发生变化,我们的大脑会
基于接近性法则,本能地将距离较近的元素视为一个整体或群组,这就是留白分割。(如下图)
设计方法论 I 超全面的页面分割设计指南
 
留白分割在有规律且卡片样式较多
的页面中表现尤为突出,在有大量卡片样式的页面中,每个卡片通常都包含一定的信息。通过留白分割,可以清晰地划分每个卡片的信息区域,使用户更容易区分和阅读每个卡片的内容,增加呼吸感,避免元素过于拥挤,从而提高整体的可读性。例如下图中主流的音乐类App
设计方法论 I 超全面的页面分割设计指南
相反,如果在没有规律且页面内容较多的情况使用留白分割,则会使页面杂乱无章。比如下图咸鱼的“广场”界面feed流中,图片从1~9张都有的情况下,使用留白分割,页面就会变得杂乱,影响视觉效果。而脉脉则采用了卡片式分割样式,页面模块则相对清晰很多。
设计方法论 I 超全面的页面分割设计指南
设计方法论 I 超全面的页面分割设计指南
 
写在最后:
在我们界面设计中,我们应充分考虑信息条目的复杂度。当信息较为简单时,利用留白分割,能够创造出清爽且不受干扰的视觉体验。但随着信息复杂度的增加,留白分割可能不足以清晰地展现信息层次,此时,引入线性分割是一个有效策略,它能提升屏幕的利用效率,使信息条理更加清晰。
 
当信息复杂度进一步升级,例如已经运用了线性分割或涉及更多操作时,我们需要进一步强化信息条目之间的边界感。这时,卡片分割是一个理想的选择,它不仅能增强信息的视觉层次,还能提升条目的可操作性。
 
重要的是,选择信息分割方式时,我们要明确:分割本身不是目的,而是为了构建清晰的版面逻辑
,通过悦目的信息秩序来更好地突出内容,实现最佳的信息传达效果。因此,在决策时,除了考虑上述细节因素,还需全面评估整体版面效果和信息传达效率。感谢阅读,希望对您有用。
设计方法论 I 超全面的页面分割设计指南
 

作者:King_LBJ
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

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

存档