首页

自适应和响应式|北京蓝蓝UI设计公司

博博

出现原因(Reason):

电脑,平板,智能手机的屏幕尺寸逐渐多样化,设备类型的增长增强了网页的适配需求。
注:屏幕尺寸为浏览器尺寸的上限

自适应(Responsive):

自适应是根据设备分辨率的不同,分别为不同的屏幕进行布局定义,创建多个固定布局,即“多套设计,多套开发”。适用于阅读类交互多的网站,如知乎官网。

响应式(Self-adaptive):

响应式是基于同一套代码、同一套设计语言,能够兼容多尺寸、多终端设备的展示,即“一套设计,一套开发”。 网页根据显示宽度(浏览器宽度)自动调整内容,适用于企业、产品等视觉展示型网站中,信息少图片多,如华为官网。

响应式好处(Advantage):

开发成本更低,一套代码。
设计成本更低,一套设计。
业务迭代更快,一次运营。

响应式适配原则(Principle):

拉伸布局:内容在屏幕显示区域进行相对拉伸,已达到完整布局。
等比缩放:内容在屏幕的相对位置上进行等比例缩放,一般用于图片。
扩展布局:内容可灵活按照屏幕尺寸进行增减,扩展为多行多列等。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 cs界面设计ipad界面设计包装设计图标定制 用户体验交互设计网站建设 平面设计服务UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司UI咨询用户体验公司软件界面设计公司

蓝蓝UI设计随笔:如何做软件产品用户旅程图?|

博博

蓝蓝写
画出用户旅程图是我特别喜欢的一个工作方法,可以与产品、研发、市场团队一起共创,优化产品。
用户旅程图是一种图形化工具,用于详细描述用户在使用产品或服务时所经历的各个阶段和步骤。它能够展示用户的整个使用过程,包括用户的需求、痛点、态度和行为,以及产品或服务如何与用户进行互动。作为产品设计者,我们可以通过用户旅程图更好地理解用户需求,提前发现后续的用户体验问题,并思考如何提升产品或服务的用户体验。
用户旅程图的应用广泛,不仅可以帮助我们进行流程分析,还可以识别痛点,定义问题域。同时,它也可以帮助我们进行用户反馈的收集和整理,为产品或服务的优化提供依据。然而,用户旅程图并不是一种一次性的工具。它需要我们不断地更新和完善,以适应不断变化的市场和用户需求。因此,即使我们所属的团队没有特别完善,也许我们在很长时间内都没有运用的环境,但是不要忘记,它依然是一个威力无比的工具。
现在我们就来重温一下,这是蓝蓝设计的用户旅程图~~~

UI设计公司的用户旅程图

这是乘坐飞机过程的用户旅程图~~~

使用用户旅程图的方法如下:
Step 1:明确用户和划定用户群
首先,我们需要明确研究的目标用户和所属的团队资源情况。在此基础上,我们可以确定需要映射的用户群体,并针对该群体的特定目标和场景进行旅程图的构建。
Step 2:梳理业务场景下用户行为流程
根据目标用户的任务和行为,我们可以梳理出该场景下用户的行为流程。这个流程包括用户需要经历的阶段、环节以及交互方式等。如果涉及主次任务流程,都需要一一梳理出来,并加以归类。这个过程需要深入的剖析,尽可能找出所有用户与软件产品产生交互的接触点,以便进一步拆分出每个阶段的用户目标、操作、接触点位置、用户想法以及用户感受。
Step 3:绘制用户想法和感受曲线
在梳理完用户行为流程之后,我们需要根据调研时记录的用户反馈和情感变化,绘制出用户的想法和感受曲线。这个曲线通常采用情绪曲线的形式来展示用户的情感变化,并标注出用户的痛点和爽点。
为了获取用户数据,我们采用了多元化的数据收集方法,例如:
用户行为观察:直接观察并记录用户在各个阶段中的实际操作行为。
用户测试:通过测试用例执行,评估用户在特定任务中的操作效率、反复性以及清晰度。
用户调查:以问卷或在线访谈的形式,收集用户对于任务完成情况的反馈以及他们的疑问和不满。
热图分析:通过热图工具分析用户在界面上的鼠标移动和点击行为,以评估操作的顺畅程度。
工单与客服反馈:收集并分析用户通过工单或客服途径反馈的问题和意见。
这些数据均应直接来源于真实的用户行为和反馈,而不是团队内部的推测或分析。在整理数据时,我们需要避免主观评价和情绪化的表达,坚持以客观事实为基础,并关注以下几类关键数据:
用户实际操作过程:观察并记录用户在各个阶段的具体操作步骤。
操作效率:通过测试数据评估用户完成特定任务的效率。
操作的反复性:记录用户在操作过程中重复操作的次数和频率。
操作过程的清晰度:通过用户调查或热图分析,了解用户对于当前操作流程的清晰程度和满意度。
任务完成情况:根据用户调查和工单反馈,统计任务完成率以及未完成的原因。
用户疑问:整理并分析用户在各个阶段中遇到的疑问和困惑。
用户不满:收集并分析用户对产品或服务的不满和抱怨。
用户情绪:通过工单、在线访谈或社交媒体分析,了解用户对产品或服务的情绪反应。
Step 4:总结解决方案和新的灵感切入点
在对这些数据进行痛点分析时,我们需要对这些痛点进行系统的梳理、分级以及深度挖掘,以洞察痛点背后用户的真实需求和期望。然后,基于这些痛点和需求,识别出产品或服务优化和改进的关键机会点。

通过回答这些问题,我们可以总结出相应的解决方案和新的灵感切入点,为产品或服务的优化提供参考。
在分析过程中,我们可以采用多种方法来拓宽思路和寻找可能的改进点,例如:
行业内成功做法借鉴:研究同行业其他成功案例,了解他们在解决类似问题时的策略和方法。
项目经验总结:回顾团队历史项目中的类似问题,提炼成功和失败的经验,以便应用于当前问题的解决。
专业判断与经验联想:依靠专业知识和行业经验,提出可能的问题解决方案,并联想类似场景中可能的优化策略。
用户视角思考:换位思考,从用户角度出发,尝试理解他们可能的痛点和需求,以及可能的解决方案。
头脑风暴:组织团队成员进行头脑风暴,鼓励发散性思维,尽可能多地提出可能的解决方案。

我们的目标并非仅仅是为了制作一张漂亮的图形或者报告,而是通过这种结构化的分析方法,尽可能客观地找出产品或服务中用户体验优化的关键机会点,以便为进一步的决策和实施提供明确的方向和依据。通过绘制图表,我们可以清晰地展示整个分析过程以及结果,提供一种可视化的视角以便团队成员更好地理解和评估产品的优势与不足。
多练习~~这是一个很有效的积思广议、从多角度解决问题的一个好方法。
祝大家使用顺利~~

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 cs界面设计ipad界面设计包装设计图标定制 用户体验交互设计网站建设 平面设计服务UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司UI咨询用户体验公司软件界面设计公司

如何让表格页面更具有吸引力和易用性|北京蓝蓝UI设计公司

博博

改版前

改版后

页面框架

1.导航菜单

用于承载同一层级下不同页面或类别的组件,方便用户在同一个页面框架下进行快速切换。

1.1.颜色

导航层和内容层划分明确,从本质上讲,这两个本身就属于不同的业务模块,通过颜色的区分,是最为直接,最简单的一种方式。左侧导航为深色,能够让用户更沉浸的体验,右侧内容区都为浅色,用户在使用时能够真正做到有区分。

1.2.侧边导航

将菜单栏放置在左侧,页面布局上为左右结构,将导航菜单放置左侧固定
优点:
扩展性较强(多级导航可以流畅展示,可以涵盖很多大而全的产品)
展示灵活(侧边导 航可收折,收折过后用户的横向核心空间将会增大大,页面展示效率也会大大提高)
快速定位(视觉启始线统一,用户可以根据首字进行查找,方便查找)

1.3.图标

线性图标是由直线、曲线、点在内等元素组合而成的图标样式,通过线来塑造轮廓。线性图标具有辨识度高,清晰,简约易识别等优点,不会对页面造成太多的视觉干扰。

2.树结构

用于承载有父子关系的结构化内容,提供内容层级的展示。

2.1.组织信息

树形结构可以帮助将信息进行层级分类,清晰地展现出信息之间的从属关系。这样,用户可以快速找到所需内容,降低了在应用中迷失的可能性。

2.2.帮助用户导航

在一个页面上展示多个层级的内容,用户通过点击展开或折叠相关节点,无需频繁地跳转页面。这种设计简化了导航过程,提高了用户满意度和黏性。

2.3.左树右表

根据人的视线流和操作顺序,将树结构放置在表格左侧,先帮助用户定义表格的具体内容,后引导用户进行表格内的操作

3.表格

表格常用于展示同类结构下的多种数据,易于组织、对比和分析等,并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分

3.1.斑马纹表格

斑马纹表格通过交替的数据行背景,可以引导用户的视线,使得大量数据看起来更加和谐和有条理。这使得用户能够更快地找到他们需要的信息,提高了数据的可读性和扫描性。同时可以减少视觉噪音和协助对比,从而帮助用户更加轻松地浏览表格数据,降低视觉疲劳。

3.2.居中对齐

居中对齐的文字和数据在视觉上更加均匀分布,可以让用户更加轻松地浏览和读取数据。特别是在处理包含大量数据的表格时,居中对齐能够减少视觉上的拥堵感,提高数据可读性。可以使整个表格的行高参差不齐的现象得到缓解,给用户一种视觉上的统一感。

3.3.颜色

品牌色用于选中和编辑,红色用于警示和禁止操作,绿色用于积极意义的信息或者操作。控制颜色数量,且不同颜色表达不同的含义,符合用户思维惯性,具有良好的反馈作用。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 cs界面设计ipad界面设计包装设计图标定制 用户体验交互设计网站建设 平面设计服务UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司UI咨询用户体验公司软件界面设计公司

如何利用激励体系提升用户粘性|北京蓝蓝UI设计公司

分享达人

用户激励体系是促进用户增长和活跃的常用手段,无论是节假日的各类运营活动,还是各种等级、积分体系,都称作激励体系。因此很多人会困惑:为什么有的产品有 “积分” 又有“金币” ,好像重复了?其实不然,它们是两套并行的激励体系,各自发挥着重要作用。激励体系复杂多样,因此笔者基于最近的实践经验和理论积累,将论述常见的用户激励方式,以及针对好看视频APP人群分层设计激励体系的思路。

希克定律 | 设计师需要知道的设计原则|北京蓝蓝UI设计公司

博博

一、希克定律的基本认识

1.产生背景
1951年,英国心理学家威廉·埃德蒙·席克(William Edmund Hick)做了一个随机开灯的试验,他以每5秒点亮10盏灯的方式测得反应时间和选择数量之间的对数关系;美国心理学家雷伊·海曼(Ray Hyman)也通过一定的实验确定的信息传输与反应时间的关系,声称这两者的关系应该呈线性。席克、海曼共同认为,人们在多重选项的刺激之下做出选择时、需花费的时间就越长,并且随着这种刺激的逐渐增大、所产生的阻碍就越大,还可能导致人们放弃选择,后续便以他们两人的名字将这种规律命名为「席克海曼定律」。直到如今也是一样,在选项复杂度相等的情况下,无论是对数还是线性,选择数量越多,我们就越难做出决定。

2.基本介绍
希克定律是一种心理物理学定律,我们还可以将其称为“席克定律、西克定律、希克-海曼定律、希克法则”等,本文为方便介绍,将统一称为「希克定律」。希克定律表明,用户面临选择的数量越多、决策时间就越长,并随着可选项的数量和复杂性而增加,运用这一定律的唯一宗旨就是:减少刺激的数量并获得更快的决策过程。该定律有一个数学公式,先由席克首次实验、然后由海曼进行完善,即“RT=a+b log2(n)”。RT:反应时间a:对信息的前期认知和观察时间(信息处理之前)b:对信息的处理时间log:某个数学符号,不做特别理解n:信息的数量

3.生活中的应用
希克定律在我们生活中的使用随处可见,如下图的两个遥控器,你更倾向于使用哪一个?毫无疑问,图2不管是从视觉上、还是操作上都更简单,特别是老少用户,简单地教一下就能快速学会。至于图1,有些图标、颜色、英文,很多年轻的用户也不清楚到底是干什么的,要想搞清楚,则需要更多的时间成本、学习成本以及试错成本,这就是希克定律在遥控器上的作用,以减少选择让用户更快决策。遥控器的这个案例虽然在交互设计四策略中也体现的淋漓尽致,但与希克定律并不冲突,让用户减少选择的方式可以是删除、组合,也可以是隐藏、转移。

4.设计中的应用
用户在界面中看到的选项越多、信息量越大,就意味着需要花费更多的时间与精力去识别和理解,直接延长了用户做决策的时间,在选择困难较大的情况下,一旦用户没有足够的精力或无法做出明确选择(不愿动脑)时可能直接放弃,导致任务失败。当信息/选项减无可减时,也可以通过对其分类分组、层级分布等方式提高用户决策效率,只要选项与选项之间保持着一定的联系,丝毫不会影响用户识别与理解。

二、希克定律在设计中的作用

1.提高选择效率
其实在很多页面中都存在信息过剩的情况,对用户来说,选择太多就等于没有选择,用户很可能会因为犹豫不决,造成时间成本上升而导致放弃当前任务。尽可能避免在用户面前出现过多的选择,根据信息权重删除或隐藏多余选项,只保留用户所需。有“度”的删减可保持内容足够简洁,提升用户对信息的理解以及操作效率。

2.优化版式布局
在设计过程中,如果没有对功能层级进行划分,一股脑地将所有功能入口平铺的话,就需要用户花费大量的时间和精力来查找需要的功能,无疑是一场灾难。我们可以通过希克定律来优化界面功能布局,根据业务的重要性对功能入口进行分类组合,减少用户的认知及理解成本,以便快速达到目的。

3.提升用户体验
通过减少选项以及对信息进行层级划分,不管是视觉浏览还是操作流程上,消耗的成本都会有所降低,用户在使用过程中的心情则更加愉悦,用户体验得到了很大程度的提升。

4.提高转化率
用户所做的选择越少、消耗的成本就越小,好的使用体验让用户心情愉悦,短时间内的流畅、愉悦操作都能让任务变得更简单、更容易完成,还能降低用户的付费感知,间接性的提高了产品转化率。

三、界面中的「希克定律」

1.减少选项、让用户更快选择
对用户来说,选项越多就越复杂,需要的决策时间就越长,尤其是用户在绝大多数情况下所看到的页面都存在信息过剩的情况,这时候,产品需解决的不是选项够不够的问题,而是选项够不够好。当存在大量选项时,可适度减少选项的数量,不仅能降低用户的思考时间,也提高了选项的质量。iPhone用户应该比较清楚,苹果始终在不遗余力的遵循希克定律,APP Store就是最好的例子,从改版前大量的推荐应用堆积到改版后信息量的减少,选择目标瞬间清晰了很多,用户体验得到了大幅度的提升

如果大量的选项无法减少,可将重要选项靠前,将其他的隐藏起来,方便用户决策及降低失误操作的概率。例如腾讯视频顶部分类后面的更多图标、支付宝首页金刚区的更多入口,点开后就会发现,里面隐藏了非常多的功能,这样做能减少用户认知负荷,提高信息筛选的效率。

2.选项分类、信息分层
这里最为典型的例子就是电商平台的分类,它通过一级、二级、甚至三级分类将商品所涉及到的类型合理的控制在有效范围内,这些选项被分类/分组之后,关键信息得到强化,能辅助用户快速作出决策。还有后面的二次筛选功能,帮助用户进一步缩小范围,选择效率明显会更高。当然,这不仅仅是依靠希克定律,还得结合运营需求、用户数据等因素进行合理化分类。

另外,我们在选择地址时,如果将所有城市一股脑平铺在界面上,用户想要选择自身所需,则需要花费大量的时间。对城市进行了分类分层,以及有了搜索历史、热门城市以及右侧的首字母索引后,用户就能通过不同维度快速找到想找的城市,选择效率直线上升。

3.分步骤展示、逐步完成
存在较长的表单页面,能给用户默认值的就不要让其选择、能让用户选择的就不要让其输入,每多给用户一个操作,其时间成本和出错率都将会上升。当表单内容减无可减、输入操作避无可避时,尽量将信息整合分类或分页展示,引导用户逐步操作,遵循一个页面只做一件事的原则,协助用户将注意力聚焦在当前步骤中。面对长长的表单,用户或多或少都有些消极情绪,产品要做的是通过视觉、操作感知来减少用户的负面情绪,以此提升表单完成率。常见的如调查问卷、信用卡申请等,它们并没有将全部信息堆在用户面前,而是进行分步骤或分页的形式,一次只做一件事,避免了其他信息带来的干扰,让用户有种简单的感知错觉,完成起来会更容易。

4.必要的多选项、展开/隐藏
有时候,我们不得不面对较多的选项,例如在线填写简历、功能设置列表、商品的二次筛选或后台管理系统的查找条件等,如此多的选项会给用户带去很大的心理压力,这时设计师需要去思考如何减轻用户的压力,展开/收起也许就是一个不错的解决方案。我们可以将所有选项进行分类,用户在操作当前类别时,其他所有类别暂时隐藏、并设定明确的可点击图标提示用户随时可展开对应的内容,间接的减少了选项,降低干扰。

5.必须平铺时、主次分明
当设计师面对大量选项、却又要必须平铺在当前页面的需求时,一定要做好选项的视觉权重区分。这种需求常见于首页、功能页、个人中心的图标入口,我们可以通过改变图标的大小、色彩(黑白/彩色)、类型(线性/面性/质感/3D)或添加微动效进行主/次权重之分,用户操作起来就不会有太多的疑惑或顾虑。

6.不可操作项、锁定/置灰
在特殊场景中,当页面存在不可删除、不可隐藏、不可降权且不能让用户点击的选项时,与其在用户操作之后提示不可操作,不如在用户操作之前就将选项锁定或置灰,明确告知不可点击,间接缩减选项,减少不必要的操作。

四、与交互四策略的完美结合

“合理删除、分层组织、适时隐藏、巧妙转移”,这一经典理论出自于 Giles Colborne 著名的《交互设计四策略》一书。删除、组织、隐藏、转移每一种方式无疑都是在向用户更好的展示信息,这个观点也完美的诠释了希克定律,那么他们到底是如何对应的呢?

1.合理删除(减少选项)
希克定律中,影响用户决策最主要的原因就是选项数量,虽然「一个页面只做一件事」受到诸多的限制与牵绊,但我们依然可以通过分清功能主次,删除次要、突出主要选项来帮助用户决策,增加效率。

2.分层组织(分类/分层)
分类是希克定律中很好的一种表达方式,虽然选项并没有实质性的减少,但用户可通过分类避开了很多不必要的选项,不管是通过父子及级还是平级,都做到了将大量选项明确区分,用户需要深挖时总会有迹可循。Giles Colborne 说过“不要用过于专业的标准进行分类”,用通俗易懂的组织方式更是促进希克定律加快用户决策效率的一种有效方式。

3.适时隐藏(展开/隐藏)
与删除不同的是,隐藏并没有删减选项的数量,只展示部分常用、高频的选项,去除其他信息的干扰,方便用户快速做出决策,而将其他不常用、低频选项隐藏起来,在需要时系统自动展示、或用户手动唤出。其实,不管是交互四策略中的隐藏、还是希克定律中的隐藏,其作用都是通过暂时性地减少信息数量来提升用户操作效率。

4.巧妙转移(分页/分步)
面对本身就较为复杂的产品,页面信息在无法删除、组织、隐藏的情况下,且需要用户无遗漏的去完成,使用交互四策略中的「转移」或可解决这一难题,将整个任务拆分成多个步骤,让用户逐步完成。大部分信息的转移,可避免不同步骤的信息相互干扰,认知负荷得以减轻,这一策略与希克定律分步骤、分页面展示大有相似之处。

五、常见问题处理

1.选项不要减到只剩一个
希克定律要做的是通过减少用户做决定的时间,来提升转化率以及用户体验,但不管在什么情况下,用户都希望自己还拥有选择的权利,如果设计师自作聪明的将选项减到只剩一个,就相当于告知用户必须接受,那么用户就有种被强制、绑架的感觉,只会存在两个结果:①被你的产品拿捏、②离开你的产品,笔者相信第一种可能性的概率极低,毕竟同类型的产品并不是只有你一家(垄断除外)。如下图的弹窗,用户即便不愿意进入任务流程,可别无选择,只能进入后再返回才能回到原位,这种做法无端增加用户的操作成本,极易引起反感情绪。不管产品如何希望用户转化,切不可强制他们接受,需要给用户留一条返回的“路”,即便不那么起眼,至少还有选择的权利。

2.极端场景要克制使用
任何定律都有其自身的使用局限,所以也不要极度推崇希克定律而简化到抽象的地步。大部分情况下,希克定律都是用在可交互界面中的元素,对于那些需要高度搜索、阅读或学习刷题类的功能并不适用,因为设计师只能决定信息呈现的视觉效果,并不能决定内容的质量、类型与数量。例如,刷题类应用,面对海量的选择题,希克定律虽然失去价值,但并不影响设计师结合其他方法论将界面设计的更好,总不能强行使用希克定律,将选择题删减到只剩两个(变成判断题)选项吧。

3.逆向使用-刻意增加操作成本
有时候,出于商业化的目的,同一个选项在二次操作时,产品会刻意增加用户操作成本,以降低选择效率,看似希克定律的反向操作,却一定程度地降低了用户退出率,实则对产品有益。例如,在关注微信公众号之前,非常醒目的关注按钮触手可及,可关注之后,弱化的幽灵按钮及文案,很难一眼看出这就是取消关注入口,需要用户花费额外的时间去理解或试错方可取关,这么做能降低公众号粉丝的取关量。为公众号留住粉丝,更是对内容认可的一种支持,后面的良性循环无需多讲。

作者:大漠飞鹰CYSJ
来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 cs界面设计ipad界面设计包装设计图标定制 用户体验交互设计网站建设 平面设计服务UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司UI咨询用户体验公司软件界面设计公司

不做画图工具人,3步成为懂业务的设计师!|北京蓝蓝UI设计公司

博博

1.盈利模式和运作

最重要也是最先要搞清楚的就是公司的盈利模式和运作,它就像一个人的心脏一样重要,毕竟,活着很重要。其实盈利模式及运作可以用一句话来理解。公司用了什么策略,给谁,解决了什么问题,获得了什么收益

先简单举个例子,稍后我会用一个产品来详细拆解。就拿小红书来举例子,大家应该都用过小红书吧,这两年很火的“搜索引擎”。
首先看小红书用了什么策略?小红书做了一个UGC APP
小红书目标群体主要是谁?90后高学历女性数据来源于2021年小红书官方数据,有点过时,只是拿来举个例子
解决了她们什么问题?分享和记录生活
获得了什么收益?广告分成、商城收益

梳理后你会发现,小红书的盈利模式和运作方式你就大概了解了,当然啊,是否能真正盈利咱另说。目前小红书在转型中,毕竟大部分人都把它当搜索引擎,搜完了就去红色软件下单了,钱都给别人挣了……话说回来,我们用这样的方法就能了解一个公司的盈利模式和运作方式。这时候你可能会问了:“小红书这种产品大家都在用,我当然很容易获取它的一些信息啦。”“B端的产品更复杂,我要怎样快速获取并理解信息?”别担心,有3个方法帮助你了解。
第一:看战略战略是一个公司为了实现一个目标而制定的一系列计划和决策,它是变化的,它很重要。小红书15年~18年的战略定位于“社区”,当时的目标更多的是先搭台子唱戏,把人引进来。而近两年,从它的布局来看,战略里一定包含了直播电商。
那么就意味着,假如你在小红书工作。2015年的时候,社区是它的核心业务。而在2023年,直播才是它的核心业务。
为啥要了解核心业务呀?因为越是核心业务,资源投入越多,你的可操作空间就越大。战略去哪里看?官网、搜索引擎或者Chat GPT。

第二:看官网尤其是B端产品的官网,一般都会把公司的产品介绍得很清晰。
可以着重看几个地方:顶部导航、关于我们、新闻中心
顶部导航:先对公司的产品、案例和客户有个印象
关于我们:了解公司的发展历程
新闻中心:了解公司在所在行业的地位和最新的资讯
看完了这些内容,其实你对这家公司就已经有了一个比较初步的了解了,这时候让你介绍这家公司,恐怕你都能说出个一二三来。第三:看定价定价是我们最直接能够获取到的公司的盈利方式,所以一定要看。

到此先做个小结:① 了解公司盈利和运作的公式:公司用了什么策略,给谁,解决了什么问题,获得了什么收益
② 深入了解的方法看战略、看官网、看定价现在咱们已经了解了公司的盈利和运作,以及公司发展历程,相当于相亲时了解了对方的家庭背景,下面就可以开始进一步深入了解了。

** 2.产品线**

一个发展了几年了B端产品一般都会有多条产品线,你大概率只负责其中的一部分,但是建议最好全面地了解一下产品线。避免只盯着手上的那点活儿,眼光也可以横向拓展看看,个人的竞争力就是这么来的。
去哪里了解呢?一般企业官网都会把自家产品列出来,方便客户查看,咱们也可以顺着这条路线去走。就拿飞书举例,从导航栏的“产品功能”我们可以看到,主要是四条线,咱们不用把每条线都挖得很细致,但是起码要有大概的认知,知道这是个什么东西,做什么的,最好上手体验体验。

这时候你可能会问了。这么多功能,哪条线才是重点啊?

问到点子上了。一般官网都会把自己主推的产品着重拎出来。
例如飞书在未登录用户的首页黄金位置,把重点功能单独强调,在登录用户的导航栏和头部的位置都做了这些功能的露出。反复强调和露出,重要程度不用我多说了吧。

到这一步,我们就已经是公司半个娘家人了,下面可以开始拆解公司的产品了。前面的步骤都是了解的阶段,第三步可是真正要动手实操了,光看可没用。
千万别懒,这时候要把公司产品的信息架构和关键流程做出来。首先,梳理信息架构,对功能模块有清晰的认知没啥技巧,就是耐心二字。一个界面一个界面走,用脑图把框架理出来,有手就会。
是不是觉得很麻烦?确实麻烦,而且费时,考验耐心,但是一定要做。不要想着靠眼睛去看,靠记忆力去记,一定要落到纸面上。

然后,梳理关键流程,了解产品的运作和流动怎么梳理,截图,一张张拼,把路线画出来,别看这招简单粗暴,但是很有用。不仅能帮我们快速理解产品链路,说不定还能发现产品中的一些体验槽点,找到优化机会。

** 4.案例拆解**

下面,上案例。还是看完整的案例更加清晰。就用一款我前段时间用的电子签名和电子合同的产品“法大大”为例。咱们一步步走。
第一步,了解盈利模式及运作公司用了什么策略,给谁,解决了什么问题,获得了什么收益

策略:一个电子签名和电子合同的PC网页产品
目标用户:有线上签名和线上合同需求的企业、政府和个人
解决的问题:远程签合同,电子签名
收益:签署套餐费

第二步,了解产品线

第三步,梳理信息架构和关键流程

作者:馊面包
来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 cs界面设计ipad界面设计包装设计图标定制 用户体验交互设计网站建设 平面设计服务UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司UI咨询用户体验公司软件界面设计公司

设计链路拆解用户旅程图|北京蓝蓝UI设计公司

博博

通常设计团队的设计链路大致可以分成四个步骤:需求分析->用研交互->UI视觉->验收迭代。在不同的阶段,需要团队中的交互/UI/视觉...设计师各司其职,每位设计师要解决的核心问题不同:

这里引入一个结构化的设计方法——“双钻”模型

“双钻设计模型”已经被很多设计师或设计机构做过概念变体和衍生,所以可能经常会看到各种各样类似的“设计模型”,有的是“三钻”的,有的是三角形的或是正方形的。不过,不要太在意这些模型是叫做“双钻模型”、“三钻模型”还是“两个四边形模型”,其核心都是在讲
一套使用设计思维来解决问题的思路和方法,这套思路和方法适用于
从产品需求定义到设计成果产出的整个过程。

在这个过程中,“设计模型”能够分别帮助设计师达到三个目的:

  1. 洞察和挖掘产品真正的问题
    也就是模型中第一个“钻”的核心目的:为正确的事情做设计(Designing the right thing),即“做正确的事”。

  2. 通过恰当方法找到设计最优解
    也就是模型中第二个“钻”的核心目的:用正确的方法做设计(Designing things right),即“将设计做正确”。

  3. 复盘并验证问题设计的结果
    也就是模型中第三个“钻”的核心目的:验证做的设计是否正确(Verify Desig Effectiveness),即“验证设计的效果”。

  4. 链路1-需求分析

可能有人会说:“分析需求不是产品经理的事情吗?”

确实,在产品需求阶段产品经理会起主导角色,产品经理的需求分析:侧重于从商业维度考虑产品目标,考虑用户的需求是什么,以及用什么样的功能去满足用户需求。
但同时,设计师会协助产品参与需求挖掘工作,可以更直观了解产品的背景和设计目标,同时会协助产品经理分析用户的使用场景和各个接触点,使得产品在需求阶段可以更好的与后续交互设计衔接。

设计师的需求分析侧重点:基于对产品需求的正确理解,通过运营与用户层面考虑,平衡业务与用户之间的诉求,让设计在达到用户体验的情况下更大化的发挥商业价值。

  1. 链路2-用研交互

在提出需求目标后,需要精准定位目标用户,将假设与用户诉求进行验证。

交互设计师会采用用户画像/体验地图/用户移情图等方法构建用户使用情景,将抽象的业务目标在用户层面进行价值试验后的故事转译。通过前期调研和用户故事还原体验情景,最终分析验证前期方案的假设,并为方案原型交互设计提供客观数据支撑。

通过用研及数据结果分析验证后,就到了原型设计阶段,最终修正的需求文档会交由交互设计师转化交互原型文档。

交互文档主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容,大致会包含:基础信息(项目简介、需求分析),交互说明(信息架构思维导图、任务流程图),页面交互流程原型图(包含交互设计的方案阐述界面布局、操作手势、反馈效果、元素的规则定义、以及异常页面和异常情况的说明)。

  1. 链路3-UI视觉

建立设计规范

UI即User Interface(用户界面),而UI设计规范通俗来说,是围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。 UI组件库则是是基于用户界面产品而制定的一套可复用设计库,也是为了方便设计师、开发和测试人员共同协作,而遵循的规律和法则。
其中色彩范围、图标设计方案、插画配图以及动效等,这些都可以在定义视觉风格的阶段进行思考,并有所结论。而字体的选择且通常情况下会使用iOS和Android系统的模型字体作为规范字体,因为系统字体更为匀称,显示效果更为舒适,醒目利于阅读,更利于视觉信息的传达。

搭建设计组件库

搭建组件库,其实是利用组件库型思维,产品需求场景化、视觉表达模块化并最终将解决方案进行封装。

通过标准的规范组合方式来构建整个设计方案,从而提升设计效能。一方面使团队的每位设计师和开发都能通过组件库直观了解产品设计规范,通过组件的复用性原理提升设计与开发的协同效率。另一方面通过清晰有规律样式布局,保证产品界面视觉及体验性的一致性。

  1. 链路4-验收迭代

设计走查验收

设计界面交付后就算完成设计任务了吗?

设计交付不等于设计任务的结束,在产品正式版发布之前,交互设计师和视觉设计师需要对线上测试版本进行走查。有些团队内部协作习惯于直接口头或是简单文字沟通,面对简单且量少的问题时可能会相对比较快速。但是一定会存在信息遗漏、沟通误差等问题。

产品设计迭代
虽然有些公司的产品真的过硬,可能会具备较长的生命周期,但它们始终会被更加优秀、好用、新颖的竞品所取代。
因此产品设计的持续优化迭代,是能保持发挥产品优势,不断找到用户痛点的关键,而做好产品迭代不仅是产品经理的职能, 也是设计师的职能所在。

写在最后,我们来梳理一下整个设计链路的结构

作者:7V_Kevin
来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 cs界面设计ipad界面设计包装设计图标定制 用户体验交互设计网站建设 平面设计服务UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司UI咨询用户体验公司软件界面设计公司

如何取替无尽流?UX设计师该如何权衡“易用性”和“人性化”?|北京蓝蓝UI设计公司

博博

在现在的社交媒体应用中,无尽流已经成为了一种主流。例如在抖音上,除了容易忽视或令人恼火的插入性广告推广能够鼓励用户休息一下以外,它的内容流几乎无法停止。但是抖音是否真的想让用户放下手机呢?如果这款App真的想限制用户的使用时长,为什么他要用精细的推荐算法迎合用户的确切品味提供永无止境的内容流?

曾经,大部分社交媒体App的内容流允许用户滑到页面的底端或到达已阅读过的内容。Facebook和Instagram上的内容流会根据时间来排序,用户在查看完好友的近期动态后便会转移到其他App上。而现在由于“无尽流”的出现,用户能够看到永无止境的内容,其中包含好友的更新以及算法推荐的与其兴趣相关的帖子,甚至跳出更旧的内容来填充持续性内容。

逐渐,无尽流的产品策略逐渐被广大用户及用户体验设计师们所接纳,我们基本上都认为这是一种正常且优秀的做法,在“注意力经济”掌权的生活中,能吸引用户停留时长越长越好吗?我认为可能相反,也许无尽流所带来的技术和社会问题远比它能解决的更多。

什么是无尽流?

分页与连续

据我所知,无限流是由播客《Your Undivided Attention》的联合主持人Aza Raskin发明的。他在2006年为一家名为“人性化”的用户界面公司工作,那个时候人们还在使用“分页”的设计,而他则想创建一种能够取替分页的方法。分页是将内容切割成几个页面,通过底部的导航栏页签选择可以跳转的页面,我们现在仍然能在一些电商网页版中看到这种设计的踪影,如下图所示。

分页式设计的主要问题在于用户必须主动点击页面,起初人们认为点击几次并不是什么大问题。然而在界面交互中,“滚动”这种操作方式远比“点击”更容易,并且用户不需要花费太多时间等待内容的加载,无限滚动在触摸屏手机端中获得了最佳的体验。当用户被蒙蔽在一个不知道多长的内容流中,则会逐渐淡化对浏览时间的感知。

尼尔森·诺曼集团通过验证发现,“无限滚动可以最大限度降低交互成本,增加用户参与度”。无限滚动的操作方式可以让用户持续保持对页面的关注,因为这个页面永远不会终结。无限流给用户一种“总有更多内容要看,即便弹出一个广告,只需一键划走就可以忽略”的感觉,非常的方便。

无限流的优点

  1. 无缝、连续的内容供给
  2. 最小化内容中断=更低的页面跳失率
  3. 更贴合移动端的内容供给表达
  4. 大大降低了用户的交互成本
  5. 提升了用户参与度

无限流的缺点

  1. 难以重新查找内容
  2. 页面过长影响性能
  3. 页面完整性差
  4. 用户无法结束下划

为什么用户无法结束下划?

我们在前面从技术和体验层面分析了无尽流的利弊,下面我们来看一下它的社会影响。无尽流的创始人Aza Raskin曾在2019年的一条推文中推翻了自己的创作,他是这样说的:

我从无限滚动中学到了一点:优化产品的易用性并不意味着对用户体验来说就是最好的。

当时在推特上有一些挑战社交媒体交互行为的标签出现,例如“社交媒体成瘾”,有人使用这个标签对无尽流做出挑战,他说:“无尽流的创建者Aza Raskin在设计这一功能的本意是好的,但根据他的说法,我们的无限滚动操作每天都会浪费20万人一生的时间。”

成瘾设计

其实不论是否有无尽流的存在,社交媒体都会让人上瘾。
每个用户研究领域的人都应该知道心理学家B.F.Skinner和他的“斯金纳盒子”理论。他把老鼠放在密闭的盒子里研究了它们滑稽的行为,在几十年后斯金纳的研究成果被应用到世界各地的商业实践中。

心理学家斯金纳做的实验是使用惩罚或奖励手段来鼓励小鼠按下杠杆,当小鼠按下杠杆时给予食物奖励,小鼠便会持续按压杠杆;当小鼠按压杠杆受到了电击时,小鼠便不去碰杠杆了,这个行为虽然现在听起来很简单,但在当时这项简单的实验却是理解人类行为的基础。

斯金纳的实验启发了许多社媒app,用户就像实验中的老鼠一样,当用户沉浸在无尽流的内容时,即使并不是所有的内容都能引起用户的高度兴趣,但我们依然会下意识地继续滚动寻找有趣的内容。

上瘾与焦虑

社交媒体给人的感觉就像赌博,我们就像上瘾一样不断点按刷新按钮,查看是否能够得到有趣帖子的奖励。我们逐渐在不可预测的回报中越陷越深,更可怕的是这种行为还会潜在改变我们的大脑结构。

研究表明,社交媒体不仅可以让用户上瘾,还会导致焦虑和抑郁情绪的增加。用户在查看内容流时的几个小时里,难免会看到一些负向的社会纪实内容,例如火灾、枪击案、犯罪和其他不幸的新闻,在用户被动获取这些视、图像时会潜意识产生负面的心理作用,并且经过社媒的推荐算法,这些负面的新闻会随着用户的观看而不断出现,引发用户的悲观情绪。如果你持续观看负向内容,负向内容就会持续找上你,有人将这种现象称为“末日滚动”。

对商业有益,对用户不利

“如果你没有为产品买单,那么你就会成为产品。” ——Jaron Lanier

随着用户花在社交媒体时间上的增多,对于抖音或Facebook的利益相关者来说是件不可否认的好事,但这真的对用户有利吗?这种交互方式真的人性化吗?我们是否应该停止无尽流呢?

作为设计师,我们需要考虑的是设计该如何影响用户。设计应该首要服务于用户体验而非商业利润,我们必须要在“有利可图”和“合乎道德”之间走钢丝,设计若想以人为本,首先我们可以反思以下几个问题。

  1. 花在无尽流内容上的时间对用户的心理产生了哪些影响?
  2. 如果无限滚动导致用户在平台上花费的时间过长,我们该如何阻止用户过度使用?

如何停止无限滚动
对于不健康、上瘾的无限滚动操作,有以下几个UX解决方式:

加载更多按钮

“加载更多”按钮并不是用来自动填充页面底部内容,而是阻隔无限流并对内容进行翻页的交互方式。这个操作的交互成本很低,只需一个按钮就为用户提供了一个自然的停靠点。

  1. 全都刷完啦!

这个交互方式在互联网领域是有争议的,当用户刷新完一定内容后,告知用户“你已经全部刷完啦!” 这个操作赋予用户浏览其他app的机会,鼓励用户走出手机,去外面看看真实的世界。

  1. 限制观看时间的通知

以抖音为例,抖音通过一些方法让用户理解和控制自己花在app上的时间。
尽管我在整篇文章中都对抖音的交互方式持怀疑态度,但我不得不赞扬它为用户提供了一种限制app使用时间的工具,用户可以通过这个工具来设置屏幕时间限制。大部分的操作系统也都有类似的工具来限制屏幕时间。

多想想如何对用户有益,而不仅仅是对产品有益。这些时间,本可以花在更有价值的事情上面。

总结

自2006年问世以来,无尽流已经成为了社交媒体的标准。无缝的内容供给大大增加了用户参与度,抓住用户的眼球就等于抓住了成功,因此抖音、Instagram、Facebook等平台都获得了巨大的成功。然而无尽流也有它相应的技术壁垒,由于无限滚动不适用于搜索引擎优化和查找内容,用户很容易在跳失后难以找到原先的内容。
无尽流所带来的潜在心理影响就像是上文中所说的,过度沉迷社交网络所导致的负向反馈循环,引发用户心理上的焦虑和抑郁。而作为体验设计师,我们应该用批判性的目光审视当今流行的交互方式,参与不断的创新,更多的以人为本来做设计。

作者:ZoeyWangDesign
来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 cs界面设计ipad界面设计包装设计图标定制 用户体验交互设计网站建设 平面设计服务UI设计公司界面设计公司UI设计服务公司数据可视化设计公司UI交互设计公司高端网站设计公司UI咨询用户体验公司软件界面设计公司

搜索金融精细化体验设计|北京蓝蓝UI设计公司

分享达人

精细化设计是可被复用标准化方法,通过精细化分析深入理解用户需求/痛点,制定有效的设计策略写在前面

为什么要做精细化设计

1)不同圈层用户需求不同,如股票小白、一般散户、专业用户群体,特点不同,需求也不同,充分对用户进行挖掘、细分才能更好的理解用户。

2)在产品同质化严重背景下,精细化设计是一条能持续产生创新收益路径。

3)互联网新流量获取困难,比起抢占流量,当下更重要的,是提升用户粘性、更好的服务用户、打造精细化服务体系。

UI设计体验如何提升?|北京蓝蓝UI设计公司

分享达人

SaaS 产品体验要求越来越高,用户体验已经成为产品竞争力的重要组成部分,怎样在多业务线的产品环境中做好体验设计,本文从贴合业务线的设计规范、敏捷易用的前端组件库、产品研发协作流程保障、UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验过程中方法论和实践经验。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档