首页

DU会员设计系统建设之路

博博

会员体系建设的价值在于以体系化机制培育用户对产品的忠诚度,同时提供给高价值用户更有价值的权益服务。百度APP DU会员体系搭建整合百度内部资讯专栏、小说、文库、网盘、咨询、生活服务、装扮、工具、小度学堂等多业务权益,多维度满足用户学习、生活服务、效率升级、个性表达、娱乐诉求深度,成为用户留存的关键。

为了将百度体系下众多跨业务权益整合为DU会员权益,搭建百度APP DU会员权益服务体系,设计从建立独特、统一的品牌印记、搭建丰富高价值权益聚合新场域、对用户转化全链路精细设计3个方向开展。

一、通过独特和统一的DU会员品牌设计语言建立品牌印记

1、DU会员LOGO图形与百度体系其他业务会员差异化设计,目标建立明确清晰印象和认知

LOGO图形采用皇冠+V结合100度倾斜角度设计,与其他业务会员LOGO图形差异化。LOGO以用户为中心,百分百为用户提供百度体系丰富优质的权益,提供尊享服务。

2、界面设计以简洁清晰、年轻精致、丰富尊享的设计定位,从色、形、质、构、字多维度渗透年轻化设计语言,增强品牌识别性和记忆点,凸显会员尊享感,搭建全新视觉体验。

色:清透明快、年轻活泼

视觉降噪,以高饱和高明度黄金为主色,搭配白底辅助色,强对比、高明度形成鲜明清晰的视效层次,头部背景采用鎏金渐变色,整体色彩搭配给用户年轻、确定、活泼轻快的视觉感受。

形:温润亲和、直观清晰

ICON图形采用肯定包容的面型,以提升权益辨识度、图形更大、留白更多,帮助用户更直观更高效区分权益类型。ICON图形叠加部分采用毛玻璃质感,品质细腻精致,ICON亲和明确。

质:细腻吸睛、精致尊享

采用高光立体感材质设计,突出会员品质感和吸引力,增强会员权益获得感。

构:简洁突出、清晰统一

卡片、图片、按钮超大圆角,年轻亲和,内容与卡片间距大留白,多模块浏览舒适,提升页面节奏感和呼吸感,白底与内容形成鲜明层级关系,视觉降噪简洁。

字:层次清晰、高辨识度

收敛字号减少层级、标题、数字字体特殊处理展示,辨识度更高、气质更年轻。

二、整合百度高价值权益搭建丰富的权益聚合新场域

搭建联合会员聚合、流畅播等高价值权益聚合场景,权益显性化设计。采用3D元素设计,增强会员权益获得感,突出会员服务品质感和吸引力。


1、联合会员高价值场域视觉强化提吸引

会员中心联合会员模块、联合会员聚合和权益详情,封面运用3D玻璃材质设计,强化联合会员权益高品质和吸引力。

2、会员热门权益场域视觉品牌统一强感知


流畅播、视频备份、装扮(挂件、个人主页背景、头像、换肤)、小度特权等高价值权益,在触点场景入口和开通面板中,DU会员品牌和3D元素设计显性化,强化DU会员权益感知和吸引力,提转化。

3、下沉用户场域视觉显性化设计

针对百度APP极速版下沉用户,会员中心开通前打造省赚看享4大权益,视觉强化大标题突出赚钱,省钱认知,结合极速版任务系统和故事会,丰富权益和省钱感知显性化设计,提升会员转化。

三、对用户转化全链路精细设计促转化

设计驱动前瞻构建会员开通前、中、后支付全链路系统打法,每个环节给用户强感知、易操作、快核销的操作体验,强化会员开通和权益核销引导,提升会员续费率,做好用户激励和转化。


1、开通前认知阶段-强感知


增价值吸引,扩入口规模,增动效强引导提吸引,权益整合大标题突出赚钱、省钱认知。


建规范-规模化拓入口


会员渗透场景持续扩面,统一和规范DU会员导流控件等入口模块视觉语言,开通导流条、会员标签、会员按钮等会员元素在百度APP主端和极速版26场景规模化渗透,强化统一的DU会员认知。

增动效-强引导提吸引


会员中心权益图标、开通会员按钮、运营图增动效提吸引,权益整合大标题突出赚钱、省钱认知,权益区打通动态图标配置能力,图标动态化扩容提升权益感知,周年和节日大促烘托活动氛围,提升吸引力。

2、开通中行动阶段-易操作

减步长强优惠促决策,动效提优惠感知和吸引力,优惠抵扣任务新玩法,提升优惠感知。

支付方式前置,减支付步长

减少用户支付的阻碍,支付渠道前置购买面板中,根据用户操作习惯智能排序显示常用支付方式,缩短支付步长提升转化率。

强化优惠感知,提决策效率


通过突出优惠信息和权益丰富,增强吸引力,让用户买得值。


1)支付面板凸显连续包月套餐和续费信息、外露买就送附赠优惠信息,重要信息动效设计提吸引力。


2)支付面板增优惠抵扣模块,任务余额抵扣会员费用,提升优惠感知。


3)支付增挽留弹窗外露优惠信息,动效提优惠感知促会员转化率。

3、开通后留存阶段-快核销


开通后差异设计引导不同阶段用户核销,突出会员获得感。


新开通用户-引导提核销


仪式感强动效引导热门权益核销,沉浸式动画引导秒杀,给用户会员超值感受,带动会员券使用率提升。

沉默用户 - 唤醒引导使用


从强到弱交叉推送,强动效强视效引导高频权益,唤起使用核销,弱打扰Push产品化设计引导权益核销。 

临期/过期用户-引导促续费


通过用户已使用专属权益与优惠福利到期,在个人中心、挂件商城、会员中心等场景以优惠福利、专属权益强化等多手段引导续费。

作者:百度MEUX
来源:站酷

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

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

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



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


作者:全球设计目录
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

如何让Midjourney变成设计工作中的万能图库

博博

前言

如果你要设计以真实场景为主的banner或者主视觉,往往都会在各大网站图库里找半天,挑挑选选可能都找不到满意的,或是容易和别人用到一样的图片。想要找到一张特别的又独一无二的难上加难,而且自己也没时间建模和拍摄

AI图片的生成为这个痛点找到了更好的解决方案,这篇文章就是要和大家分享一下使用AI制作好用的图库素材照片,我将会按照真实工作场景搭配设计落地方案来和大家分享AI使用经验,让你看了就学会,学会就马上能用



用结构化方式思考咒语


以下需求是我设计中要用到的素材,我希望可以有一张【穿西装并且手提公文包的男士站在摩天大楼前】的写实照片当作首图,首先先想一下我们需要的素材大概画面的呈现,思考的框架可以参考以下,以下内容为了方便关键词我会用中文,但是实际操作中Prompt都必须使用英语





通过结构化思维来描述这样就不会有遗漏,也更能使画面完整,另外像我的英语并不是很好,就会把写好的内容通过Deep L或是chatgpt来进行翻译



关键词的使用

prompt:A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style,the whole body of the figure is presented, —ar16:9

在输入关键词的时候,我通常会把重要的内容放在前面,有时加在后面的关键词不容易被机器人识别。个人的一点小经验,在描述的最后一定要加上需要的参数,为了在后续的设计中更好适配尺寸需求,所以我选择加上尺寸参数16:9,以下就是我通过关键词生成的图片




如果觉得结果都不满意,可以重新用相同的Prompt再生成。AI好玩的地方就是它的随机性,像是Promp就不建议非常详细,因为这样反而会有意想不到的优质图片产出

机器人生成以后就要开始挑选图片了,如果对左上的结果比较满意,就点击v1,让机器人针对这个图片再去生成四张新的图片,虽然左上效果不错,但是手部有些奇怪,所以需要通过在该基础上再次生成,来挑选没有问题的图片




这里说明一下U(upscaler)和V(variation)的区别,U就是选择这张图,然后会放大这张图片画质更加清晰,V则是会针对你选择的图片再生成四张图,与你选择的图片做轻微的调整。1-4的排序为:1是左上,2是右上,3是左下,4是右下

重新生成的左上图可以看到手部还是有问题,但是右上那张就还不错,可以选择这张来用或是再重新生成一遍




prompt:A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style,shot on 16mm, —ar16:9

这里我想要换一个画面角度,所以选择使用【shot on 16mm】,这种通常是电影、纪录片、广告拍摄使用的,所以使用这个关键字去生成图片画面会有一种电影感,角度上我觉得更好一点。



最后说一下,我是用的版本是V5,产出的1024✖️1024高解析图片,但是我个人感觉还是不够清晰,所以会搭配图片放大工具来一起使用。我常用的图片放大工具http://replicate.com/sczhou/codeformer,放大效果清晰度都非常好,而且处理速度也很快,重点是免费!!!直接上传图片无需更改任何参数,使用默认预设清晰度绝对够用,画质太高也没有太大意义,反而会影响网站加载速




 

作者:全球设计目录
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

你知道为什么对话框中的“确定”按钮会在右边吗?

博博

聊聊关于“确认”和“取消”按钮的位置摆放逻辑~

目录

平台一致性的问题

按钮的位置非常重要

为什么"确定"按钮在右侧效果更好

按钮放置在角落还是放在一起?

结论

正文

大家好,我是西瓜~

这次我们聊一个设计知识点,这个知识点平日会被设计师忽视,因为它太过于默许,但我们应该知道的是,很多默认的东西也是有自身的知识结构支撑,久而久之被人忽视了。

大家应该都见到过弹窗、表单里的"确定"和"取消"按钮吧,这两个按钮大家还记得会放在页面中的哪个位置吗?"确定"按钮是完成任务的主要操作,而"取消"按钮是辅助操作,它主要的作用是用于返回到起点屏幕而放弃任务。那么,根据它们的功能,最佳的按钮顺序是什么?"确定"按钮应该放在"取消"按钮之前还是之后呢?

平台一致性的问题

可能这时候很多设计师会按照习惯,选择遵循一致性,采用一些常见的组件样式进行操作。虽然这看起来似乎是解决问题的方法,但实际上并非如此。这并没有回答哪种位置对用户更有效以及为什么,单纯遵循已有组件并不足以让设计师有更好的思维和主动思考的意识。

"一致性"是设计师中常用的一个词。然而,这常常也被用作一个借口,让设计师不深入思考用户面临的设计问题,如果一个设计师都不知道为什么一致性的规则存在,那么遵循这种设计惯例又有什么意义呢?

如果某种设计惯例对用户来说是有害的,那么设计师是否应该盲目遵循它,仅仅因为要追求一致性?体验极差的设计样式和结果是否应该因为设计师希望迎合大家都默认的设计一致性而继续存在?这其实本质就是个问题...

现在网上有很多组建和参考,都被设计师天天借鉴和广泛使用,因为它们适用于用户。但关键在于,设计师永远不应该满足于墨守成规的选择设计的一致性,将其作为做设计的唯一理由,我们关键还是要理解为什么应该以某种方式而不是其他方式来设计用户界面。

按钮的位置非常重要

这时候有的设计师可能会主张通过赋予操作按钮更多的视觉重量和清晰明了的标签来突出界面中的操作按钮,而不是仅关注按钮的位置,虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面,但它们并不是唯一的方面。

真正一名有思想,会独立思考的设计师会综合考虑每个设计方面对用户的影响,而不只是关注其中的一个方面,对于设计师来说,最难的是确定主要操作和次要操作的最佳放置方式。这就是我为什么关于"确定"/"取消"按钮的位置进行说明的原因。

为什么"确定"按钮在右侧效果更好

当我们在使用设计组建框架前进行考虑时,你可能会开始明白哪个位置会对用户效果更好一些,我们可以通过分析设计对用户的影响来解决这个问题。

1、减少视觉注视

有些设计师认为,将主要操作放在左侧,在次要操作之前,对用户来说更好,因为它更近,所以点击所需时间更少,这看起来好像有点道理,但我们不能忽视一个问题,即在选择要执行的操作之前,用户会查看所有选项,这意味着大多数用户不会在不查看旁边的次要操作按钮的情况下盲目地点击主要操作按钮。

他们将首先看到左侧的主要操作,然后再看右侧的次要操作,然后他们会将视线转回主要操作按钮进行点击。这里总共涉及到三个视觉注视点,在多个方向上分散了用户的注意力。

与将主要操作放在左侧相比,将主要操作放在对话框的右侧,将次要操作放在左侧,用户只需注视每个按钮一次,并在主要操作按钮上结束。这样一来,视觉注视的数量就减少了,并且在一个方向上产生了更流畅的视觉流动。

用户只关注每个按钮一次,并最终停留在主要操作按钮上,将主要操作放在左侧可能会使用户更容易点击,但从用户的心理过程和视觉注视速度来看,将主要操作放在对话框的右侧实际上更快。

2、与预期的按钮功能相匹配

当用户点击“取消”操作按钮时,他们期望的是产品不进行任何操作,而是将他们返回到起始屏幕位置,因此,"取消"按钮的功能类似于"返回"按钮。

当用户点击“确定”操作按钮时,他们期望产品进行按钮所表示的操作,并将他们带到下一个屏幕。因此,"确定"按钮的功能类似于"下一步"按钮,将次要操作按钮放在左侧,将主要操作按钮放在右侧,可以与用户期望的"后退"和"下一步"按钮功能相匹配。

这类似于分页按钮的放置方式,将用户带到下一页的按钮位于右侧,将用户带回先前页面的按钮位于左侧。这种按钮位置的安排是有效的,因为它与用户从左到右的阅读和导航方向相吻合,其中右侧是前进方向,左侧是后退方向。

3、"确定"让用户前进到下一个屏幕,"取消"让用户返回到原始屏幕。

对话框中的"确定"和"取消"按钮应该遵循类似的交互模式,因为它们的功能类似于分页按钮,另外这种左右方向模式也是用户熟悉的。将主要操作放在右侧,将次要操作放在左侧,可以使对话框按钮对用户更易于理解和使用。

4、提供更高效的任务流程

将按钮放置在对话框的右下角更容易被用户点击,因为这符合【古腾堡图表】。在古腾堡图表中,右下角区域是终端区域,用户在扫视后的最终目的地。

将按钮放在终端区域可以使用户在视觉扫描时看到他们最后需要执行的主要操作,这不仅改善了视觉流动,还改善了任务流程。用户在扫视过程中不会错过主要操作按钮,当他们经过时,他们的目光会停留在上面,从而可以立即点击它。

扫视对话框并采取行动变得更快更容易,因为用户的目光最终会落在主要操作按钮上。


按钮放置在角落还是放在一起?

我们需要考虑另一个问题,那就是我们应该将按钮放在角落还是放在一起,当将主要操作和次要操作放在对话框的角落时,这与左右导航方向相吻合,这是很好的映射。然而,由于"确定"和"取消"按钮并不是导航按钮,因此并不需要遵循方向映射,有时候这样做可能带来更多的弊端。

较大的视觉分离使得比较操作变得困难,并将一个操作与另一个操作隔离开来 如果产品页面即将执行用户无法撤销的关键操作,那么用户可以看到"取消"按钮和"确定"按钮是很重要的。在这种情况下,"取消"按钮的功能可能类似于"上一步"按钮,但它更重要,因为它充当安全按钮以防止任何更改。

将"取消"按钮放置在最左下角的危险在于,由于两个按钮之间的视觉分离较大,可能会导致用户忽略它。将"取消"按钮与"确定"按钮放在一起可以让用户更轻松地在一次注视中查看和比较这两个操作,以选择最佳操作。  


作者:西瓜聊设计
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

用户心智模型的3运用和3匹配

博博

你听过用户心智模型这个名词吗?设计方案时有考虑过匹配用户心智模型吗?如何匹配?下文将梳理智模型到底是什么以及如何运用。



先问你一个问题。
拼多多、淘宝、京东这三家购物平台,你认为它们的区别是什么?
或者换个方式问你。
买电器你去哪个平台?
买衣服你去哪个平台? 买垃圾袋你去哪个平台?
是不是有了答案了?
没猜错的话, 大部分人的答案是:买电器去京东、买衣服去淘宝、买垃圾袋去拼多多。
你看,这就是一个购物心智模型,你的心里对这三家平台已经产生了固有的心智,如果让你去京东买衣服,你会不会觉得,有些别扭?
没错,这就是心智模型。


百度百科对心智模型的定义是:
“深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。”
关键词是:故事、习惯、局限。


淘宝一开始就我们讲了一个故事,一个万能的集市,我们习惯在上面买衣服,但是也产生了局限性,那就是,当我们想买大额电器的时候,还是会选择京东。
我个人对心智模型的理解是:
我们内心深处对一个事物的看法。
空口聊天多没意思,下面举个例子。
这是一尊陶俑,第一眼你觉得她像什么?


是不是觉得像米老鼠?


为什么?


因为陶俑的头上的发髻和米老鼠标志性的耳朵很像。


如果你从没见过米老鼠,你还会觉得她像米老鼠吗?


一定不会。


这就是心智模型,你对头顶的大圆形的心智是“米老鼠”,所以一旦你看到类似的形状,米老鼠的形象就会浮现出来,这个发髻的形状和你心里对米老鼠的形象产生了匹配。



对心智模型有没有一点印象了?

下面我们接着聊。

我不想用具体的界面来聊,那样的话太散,我认为要想理解一个概念,最好还是从“面”的角度来说,所以下面我会举一些商业上的案例来辅助理解。

心智模型有哪三种运用方式?


第一种:创建新的心智模型


第二种:改变旧的心智模型


第三种:匹配现有的心智模型


可以理解成一件事情的新生、改变和延续。



下面咱们一个个来。
第一种:创建新的心智模型


难度指数:难啊。


记得《盗梦空间》里最难的是什么吗?


最难的不是盗梦,而是植入一个想法。


创建新的心智模型有异曲同工之妙,都是让别人内心接收一个事物,需要刻意培养。


举几个例子。


当年外卖刚开始的时候,家家搞补贴,很多时候几乎不花钱就可以点外卖,后来这些福利没有了,为啥?


因为点外卖的心智已经培养好了,你离不开它了,所以平台可以“不惯着你了”。


还有唯品会的正品低价、瑞幸一开始的星巴克平替,这些都是他们想要植入到用户大脑中的心智。


为什么要费劲植入一个新的想法?


因为一旦植入了,就很难改变。


现在我身边的很多朋友想买一些低价的品牌都会上唯品会,买咖啡会喝瑞幸,一旦用户的习惯养成就很难改变,意味着什么?

意味着留存和转化的成本更低了。


第二种:改变旧的心智模型


难度指数:也难。


《盗梦空间》里小李子的妻子被他植入了一个想法“你不在现实世界里”,当他和他妻子回到现实世界后,他妻子仍旧认为自己不在现实世界里,这个被植入的想法已经根深蒂固,很难改变。


所以改变旧的心智也不简单。


例如小米最初主打极致性价比,后来想往高端路线走,很难,大家心里已经认准了小米就是“性价比之王”,也就是你的产品不仅要好还要便宜。


这就导致小米一涨价,大家就骂他们忘了初心……所以小米拆分出了红米主攻性价比,小米往高端发展,但是仍旧很难。



拼多多的百亿补贴也是一样的道理,一开始的砍一刀深入人心,大家对拼多多的心智已经成型:便宜,质量一般。拼多多想改变这个心智,推出百亿补贴,并承诺假一赔十,就是想告诉大家,我拼多多,也是有正品好货的。不过,效果嘛,见仁见智。

第三种:匹配现有的心智模型


难度指数:相对简单。


其实匹配现有的心智模型,是相对最简单的方法,市场已经帮你把用户习惯培养好了,你直接使用,那肯定事半功倍,省时省力啊。


举个例子,大家最近有关注小米的 13 Ultra 吗?


小米和徕卡联合研发的,主打徕卡调色的相机。


我有一个同事就直接把手里的微单换成了 13 Ultra ,因为拍照足够好看而且便携。


这里不是要推销手机啊,是想让你们了解 13 Ultra 是个什么东西。


然后给大家看看它的手柄(一个配角,可以拆卸)。


是不是有些熟悉?
和相机像不像?


这个手柄就是沿用了相机的心智模式。

小结一下:


心智模型有3种用法:


新建:创建新的心智模型


改变:改变旧的心智模型


延续:匹配现有的心智模型

下面聊聊,咱们怎么做才能更加匹配用户的心智模型?


同样的,我不会拿具体页面来举例,还是希望把思考方式分享给大家,而不是某一个页面的设计。

要想匹配用户的心智模型其实就三步:

了解业务、了解用户、竞品调研。


或者可以这么说, 在懂业务、懂用户的基础上,还要了解行业内的通用做法。



1)了解业务


一定要了解业务,为什么?


因为好的设计方案千千万,但是匹配你的业务的方案才是好方案,如果不了解业务,可能设计出来的方案就是自嗨,例如网上很多的dribble风设计。



又比如说手机浏览器一般都把搜索框放到屏幕顶部,而夸克浏览器却把搜索框放到了下面。


为什么?


因为夸克想推翻传统的浏览器,想打造一款更年轻更好用的浏览器,把搜索框放到下面也是满足他们的业务诉求,现在手机屏幕越来越大,搜索框放在下面手指操作更加方便。
所以,一定要先去了解业务。


拼多多和淘宝同样都是电商平台,可它们的用户心智相差甚大,因为最后方案设计是服务于最初的业务目标的,业务不同,呈现的方案也不一样,最后让用户形成的心智也不同。




2)了解用户

为啥?给老人和小孩设计的界面能一样吗?


就拿颜色和文字来说。


小孩喜欢高饱和、丰富的颜色,而老人则需要考虑在各种场景下都能看得清楚信息的颜色。


小孩喜欢圆润的卡通字体,而老人需要识别度更高的字体,更大的字号。


不同的用户,采用的设计一定是不同的,只有了解了他们的喜好和痛点,才能做出符合他们心智模型的设计。

3)竞品调研
为啥要竞品调研呢?


因为竞品和我们的产品类似,那么意味着用户大概率重合度也高,甚至业务上都有一定相似度,那么意味着,竞品的方案,大概率是经过市场验证的符合用户心智模型的方案。


你看,既然竞品已经给咱们打了个样,为何还要自己闷头造轮子呢?

咱们目的是解决问题,又不是为了证明自己很厉害。


但是,不要误解,我不是说照着竞品抄,而是取长补短,所以不仅要调研,还要分析,分析就是把竞品的优劣势找出来,好的地方咱们可以酌情借鉴,不好的地方,咱们也要避个雷嘛。


好了,小结一下,要想匹配用户的心智模型,一定要了解业务、了解用户,还要做竞品调研了解市场的通识性做法。


以上。


作者:馊面包
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

C4D中隐藏的交互设计思路

博博

从设计“工具类软件本身”思考复杂操作类软件设计时的宏观的思路,希望能反过来帮助应用。希望大家多批评指正,互相交流












作者:younglion0610
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

好设计告诉你什么叫打破常规

博博

一、弧形轮播的 Banner 图设计


在移动端 Banner 图通常以左右轮播居多,也有个别产品会在轮播形式上创新,比如上下轮播、分层轮播、渐隐轮播、Z 轴轮播等。


最近在体验态棒 App 时,其 Banner 图采用弧形轮播的形式。利用弧度的形式展示商品提高了 Banner 位的利用率,有助于展示更多推荐商品,直观的表达也使得商品更加突出。自动轮播类似于滚动的橱窗,表现形式非常新颖,带给用户更好的感官体验。




二、默认头像的多种预设选择


随着产品感官体验的提升,很多产品在默认头像的设计层面变得更丰富,不一定需要用户上传照片,自定义的选择也更灵活。


除了通过 IP 形象强化默认头像的视觉感以外,最近在使用智行火车票 App 时,其默认头像以矢量插画风为主。用户进行头像设置时无需上传照片,产品提供了多个默认头像,方便用户根据自己的喜好作出预设。多种预设让自定义选择更灵活,也能让默认头像更美观,提升用户对产品的好感度。




三、趣味性的心情打卡设计


对于职场人来说压力是难以避免的,总会遇到一些烦心的事或者压力,就会因此影响我们的情绪。我们要试着释放压力,治愈我们的情绪才能迎接美好的明天。


最近体验到一个帮你记录心情,治愈心事的产品-岁岁。整个产品设计风格清新可爱,看着就有种治愈感。可以对自己当前的心情进行打卡,类似于仪表盘一样的心情打卡设计也是趣味性十足,表情设计风格非常可爱,哪怕是不开心也能通过这样趣味性的打卡形式而治愈。设计风格观赏性很高,值得大家体验。




四、五一主题氛围设计


众多产品都会在五一假期期间进行系列主题活动,如何充分利用好当前布局结构,是产品设计师进行设计发挥的关键。


在五一期间使用嘀嗒出行 App 时,多个主界面结合了五一主题氛围设计,青春活泼的插画风渲染出欢快的节奏。整个界面被装扮得非常有氛围感,既传播了主题活动,也带给用户非常新颖的视觉享受。




五、场景化的积分兑换设计


为了提高用户黏性,通过签到积分、消费积分、任务积分等,再结合积分兑换提高用户参与度,是提升黏性转化的有效形式。


麦当劳 App 在积分兑换的设计中结合了兑换套餐的实物照片,让用户对于兑换商品更有直观感受。也可以切换不同积分兑换的差异,提高用户参与积分的积极性。通过场景化的积分兑换设计,不仅提高用户参与度,设计感官度也非常棒。




六、动态卖点强化关注度


需要强化功能的关注度时,除了在视觉表现层体现差异以外,动静结合也能起到突出作用。


比如智行火车票 App 首页设计中,以动效的形式演变卖点,以此突出酒店栏目。动效表达的形式形成动静对比,以差异化的形式突出业务重点,提高用户的关注度。




七、播放按钮的品牌氛围营造


越来越多的产品开始注重立足于品牌的设计,强化品牌曝光度和产品差异化,品牌基因的融入可以一举多得。


最近在使用汽水音乐 App 听歌时,播放按钮暂停状态背景会有气泡漂浮,还原了汽水带给用户的视觉感。通过小小的动效表达不仅强化了品牌感,也提高了播放按钮的点击欲,带给用户不错的感官体验。




八、登录设计中的动态背景


登录已经逐步成为体验产品的必备步骤,很多产品都需要用户登录才可以体验,如何提高用户的登录意愿度变得至关重要。


吃货笔记 App 在登录设计中采用动态背景增强视觉感,有种炫酷的感觉。动态背景结合炫酷的图形设计,营造出不错的氛围感,以此降低登录带来的排斥感,提高用户登录体验产品的意愿度。




九、导航结束的人性化设计


导航算是这个时代最便民的工具之一,让大家的出行更便捷和安全。随着导航产品的不断完善,使用体验也越来越人性化。


五一期间使用高德地图导航时,抵达目的地结束导航的设计中,会根据目的地属性进行场景表达。比如目的地是古镇类景区,会以古镇代表的图标设计替代默认图标,也会显示景区购票信息,方便用户进行购票和了解相关信息。结合场景打造人性化的设计,让用户时刻感受到产品的温度。




十、不一样的点赞设计


点赞设计已经很普遍,通常以伸大拇指和爱心图标为主,点击变化过程中也会结合动效和衍生设计。


最近在体验岁岁 App 时,在树洞栏目中点赞设计采用动效结合卡通形象。点赞时以动效表达卡通形象送爱心的过程,呈现出不一样的点赞效果,带给用户差异化的点赞体验。



作者:黑马青年
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

如何优化交互设计

博博

1.提示栏

1.1 视觉

这个页面第一眼最突兀的地方首先是“知道了”这3个字,因为在这个界面中,橙色产品色,而突然出现的蓝色会让你觉得特别醒目,所以我们第一眼会看到这三个字以及这一行的内容,这里只涉及到了UI层面上的视觉表现就可以将用户的注意力吸引过来,但提示栏的视觉优先级并不应该设计的这么高。

1.2 文案

这里的业务规则是,用户必须将保险内容全部浏览完才可以进入到下一阶段,也就是说一共4页内容,如果你在击下方的checkbox或者下一步时时,内容没有定位在4/4的分页状态时,就会被判定没有阅读完保险内容。但是这里的文案只是告诉用户,请向下滑动浏览全部内容。

2.条款按钮

2.1视觉

底部有3个条款按钮,在视觉表现上是3个统一样式的幽灵按钮,点击后会出现弹窗让用户阅读条款内容,并在一定时间内允许关闭,用户点击阅读完后样式不变,但这里的规则是必须阅读条款且全部阅读。

2.2 交互

必须阅读完三个条款与说明,才可进入下一步。所以这里就会出现多种问题,比如用户阅读完保单内容但没有注意到中间的条款按钮,在视觉没有给出“必读”的意符的情况下,用户会先点击下一步,但是被告知需要阅读条款,用户点击阅读完第一条条款,认为自己已经完成要求后继续点击下一步,但发现需要阅读完三个条款才能完成要求。

这样的交互与信息设计让用户在该页面的操作效率大幅度下降,所以面对这种情况,我们是否可以用一些交互优化的手段来解决这些问题呢?在选择策略和方案之前,我们需要思考一些问题:

1.条款的必读性、风险控制

2.效率与法律责任的权衡

3.面对多文本、文档的操作、阅读的便利性

其实这些问题一部分是业务规则,如果业务上的要求不是必须的那么在效率上的操作空间就会比较大。比如我们经常看到的条款和说明的阅读,几乎没有人会去全部一字不落的看完,但是为了让用户充分了解条款、协议的内容,以防后续带来的风险,现在产品的设计策略就是给用户一个5秒的阅读倒计时,倒计时结束前无法关闭弹窗,但说实话这种设计也是鸡肋的很,不想看的人你给60秒也不会去看,想看的人不设计倒计时也会很仔细的看。所以现在很多产品也做了简化处理,例如在这个保险条款的交互方式中,我们也可以这样设计。在底部直接将条款做成链接的形式,和checkbox一同做在一个栏里方便用户操作,想看自己点,不想看就直接勾选后下一步即可。

关于风险揭示、知晓以及同意协议这个步骤有很多种做法,还有下方的3种例子:

1.将所有风险平铺让用户勾选并同意,这样的方式比做在一个模块里打钩其实形式上是一样的,因为都可以全选后确认,一种同构异型的做法。将风险需知面积展示的更多,希望用户能对其重视,但是为了效率起见还是做了一个全选,也是在形式上尊重了“风险”。

2.用标签选择的形式将合同、条款披露给用户,这种形式在本质上也和上面的差不多,甚至很多用户可能不回去点第二个标签。

3.现在很多产品因为政策的关系都会在登录页面中加上用户协议和隐私政策的说明,需要用户自己去点击,很多用户都觉得在登录前点击该协议非常的麻烦,有时也会忽略,所以一些聪明的产品就在用户点击登录后再弹出弹框让用户同意该协议。

最后,话又说回来,领导非让用户点击完3个按钮,才可以点击下一步,该怎么设计呢?首先在视觉样式层面,用常规的色块、线条样式的按钮肯定是不行的,因为在这里我们要考虑几个点:

1.如何让用户知道这3个条款是必须点击阅读的 

2.让用户知道只有全部阅读完才可以进行下一步。所以做成常规按钮,用户无法知道该点哪个,先点哪个,要点几个。

那可以做成勾选吗?也不行,感觉比做成按钮还要离谱。

那我们可以考虑这样做,在这个步骤中也无法单独将阅读条款列为一个界面,所以只能继续在页面下方用列表的形式让用户去阅读。通过这样的设计可以让用户明确我该点哪个,哪个还没有阅读,当用户没有完成阅读要求时,底部按钮置灰。






作者:应骏
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

用户体验设计流程

雪涛

用户体验设计流程


虽说用户体验是主观的,但对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由研究实验来认识,并通过良好设计去改善的。用户体验设计(User Experience Design,通常简称UX Design)就是以提升用户体验为目标的一套设计流程。为什么用户体验设计如此重要呢?因为随着科技进步,当功能的实现不再成为挑战时,产品的设计和体验就成为了赢得市场竞争的关键因素。



由于系统软件糟糕的UI设计(菜单排布问题)所导致的误操作,美国居民受到导弹袭击的惊吓



· 美国Forester的一项研究发现,针对UX投入的每1美元,能够带来2~100美元的收益。


· Amazon把按钮文字从“注册(register)”改成“继续(continue)”之后,销售增长了3亿元。


· McAfee重新设计UI之后,客服电话减少了90%。· Airbnb的Mike Gebbia认为,公司从接近失败到获得100亿美元市值,最大因素要归功于UX


UX究竟在设计些什么 

广义的用户体验设计,是包含了内容功能设计,信息架构设计,用户界面设计,交互设计,视觉设计,语言设计,动效设计,音效设计,在一定程度上涵盖了产品物理外观设计(工业设计),平面/包装设计,空间设计,服务流程设计等。它意味着一个高度交叉综合的领域,涉及到人与产品系统或服务发生关系并产生体验的所有触点。一般或狭义的UX Design,则主要作为与UI Design区分,多用于互联网软件(或消费电子等)行业基于屏幕的设计,包含信息框架设计,用户交互设计,可用性研究等。这里的UI Design偏重于视觉上的设计。而在现实中我们也经常把UX等同于“交互”。





用户体验设计的核心和本质,就是研究目标用户在特定场景下的思维方式和行为模式,通过设计提供产品或服务的完整流程,去影响用户的主观体验。可见用户研究在整个UX流程当中的重要性。而认知心理学(Cognitive Psychology)则是用户体验设计的理论基础和科学依据。它是一门研究认知及行为背后之心智处理(包括思维、 决定、推理和一些动机和情感的程度)的心理科学。这门科学包括了广泛的研究领域,旨在研究记忆、注意、感知、知识表征、推理、创造力,及问题解决的运作。相关的还有人体工学(Ergonomics)与人因工程学(Human Factors Engineering),是研究人和机器、环境的相互作用及其合理结合,使设计的机器和环境系统适合人的生理及心理等特点,达到提高效率、安全、健康和舒适目的的一门科学。可用性(Usability)的概念最早出现于1979年,远比唐·诺曼在1993年提出的“用户体验”概念要早。可用性的ISO定义是“用户在特定环境下完成指定目标的效果、效率和满意度”(ISO 9241-11),而用户体验指“用户与产品、服务、设备或环境交互时各方面的体验和感受”。可用性的范畴比用户体验窄,它聚焦于任务完成。而用户体验是外观呈现、功能组合、系统性能和交互行为等因素的综合结果。




上图将用户体验细分为工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌体验(Brand Experience),最内部的圆代表最基础的用户体验。


用户体验 / 产品设计的流程与方法


以用户为中心的设计(User-Centered Design,简称UCD)概括了用户体验设计的典型流程和方法学。以用户为中心的设计思想非常简单:在设计开发产品的每一个步骤中,都要把用户列入考虑范围。从前期的用户研究需求挖掘,到后期的用户测试设计验证,都要围绕目标用户群来进行。



在UCD设计流程的每个阶段,都有多种不同的方法来帮助我们达到目的。

用研分析:


· 单独访谈(Individual Interviews):一对一的用户讨论,让你了解某个用户是如何工作,使你知道用户的感受,想要什么和他的经历。


· 焦点小组(Focus Groups):组织一组的用户进行讨论,让你更了解用户的理解、想法、态度和想要什么。


· 关键利益人访谈(Stakeholders Interview)


· 情境访谈(Contextual Inquiry or Field Study):走进用户的现实环境,让你了解你的用户的工作方式,生活环境等等情况。


· 日记研究(Diary Study):日记研究可以让用户记录自己的进程,研究者以非打扰的视角探查用户的体验。


· 问卷调研(Questionnaire Study):利用网上或纸张的问题list对用户进行发放填写,从而收集用户对产品的需求建议。


· 任务分析(Task Analysis):通过任务分析了解用户使用产品时的目标和操作方式,习惯(GOMS模型)。


· 用例分析(Use Case Analysis)


· 卡片分类(Card Sorting)、树形图测试(Tree Testing):观察用户是如何理解内容和组织信息,用来帮助你的产品更合理地组织信息。· 竞品分析(Competitive Analysis)、标杆分析法(Benchmarking)· 桌面研究(Desktop Research)、市场研究(Market Research)· 用户角色模型(Personas):构建一个虚构的人来代表特定目标用户群组,设计团队围绕这个虚拟人物设计开发产品。


· 用户体验旅程图(User/Customer Journey Mapping or Experience Mapping):从用户角度出发,以叙述故事的方式描述用户使用产品或接受服务的体验情况,以可视化图形的方式展示,从中发现用户在整个使用过程中的痛点和满意点,最后提炼出产品或服务中的优化点、设计的机会点。


· 态度研究(Attitudinal Research)和行为研究(Behavioural Research)


· 定性研究(Qualitative Research)和定量研究(Quantitative Research)



设计阶段:


· 脑力风暴(Brainstorming Ideation)


· 概念草图(Concept Sketching)


· 思维导图(Mind Mapping)· 交互流程(User Interaction Flow)


· 信息架构(Information Architecture):对功能内容进行高度概括的统筹规划、设计安排。


· 情景与故事版设计(Scenario & Storyboard Design):情景是指特定用户如何使用产品完成特定目标的简短故事。故事板是连续的一系列草图,用视觉的方式表现用户如何使用产品,形式上类似漫画分镜。


· 线框图(Wireframing)


· 低保真原型与高保真原型(Lo-fi & Hi-fi Prototyping)


· 纸质原型(Paper Prototype)


· 视频原型(Video Prototype):通过视频来演示用户如何与产品系统进行交互。


· 绿野仙踪原型(Wizard of oz Prototype):使用角色扮演来模拟用户如何与产品系统进行交互。


· 可交互原型(Interactive Prototype)


· 视觉设计(Visual Design)


· 设计模式(Design Patterns)、设计语言(Design Language)、设计规范(Design Guidelines)与设计体系(Design System)


· 标注文档(Design Spec)


· 动效设计(Animation Design)


· 参与式设计(Participatory Design):将终端使用者或利益相关者带入设计流程中。


· 共情/移情/同理心设计(Empathic Design):将设计师带入使用者情境中进行观察设计。


· 平行设计(Parallel Design):对同一个产品进行分开的设计,从而比较选择一个最佳方案。



评估验证:


· 启发式评估(Heuristic Evaluation):由一组行内专家依据尼尔森十大原则对产品进行可用性检查。


· 专家评审(Expert Inspection)


· 可用性测试(Usability Testing):邀请用户来试用你的产品,有任务性的完成测试,从而达到评估的目的。分为Moderated和Unmoderated,In-person或Remote。


· 组内测试(Within-Subject Testing)与组间测试(Between-Subject Testing)


· 游击式调研(Guerrilla Research):便宜、快速地得到大致的用户反馈。


· 问卷调查(Surveys):利用网上或纸张的问题list对用户进行发放填写,从而收集用户对产品的反馈意见。


· CSAT(Customer Satisfaction Score)与NPS(Net Promoter Score)


· 眼动追踪(Eye Tracking)和热力图(Heat Map)


· 点击流分析(Clickstream Analysis)


· 产品漏斗(Product Funnel)和使用情况分析(Usage Analytics)


· 统计学分析(Statistical Analysis)


· A/B测试:在同一时间维度,分别让相似的目标人群随机的访问产品的不同版本,收集各群组的用户体验数据和业务数据,最后分析、评估出最好版本,正式采用。




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


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

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

B端-详情页设计指南

博博

详情页向用户展示一个对象的完整信息,主要用于信息浏览,允许对该对象发起编辑等操作。

看完本篇文章,你会学到以下内容:
1、什么是详情页
2、详情页设计原则

3、详情页的构成
4、详情页设计要点拆解


一、什么是详情页?

详情页向用户展示一个对象的完整信息,主要用于信息浏览,允许对该对象发起编辑等操作。如电商的订单详情,OA的审批详情等等。


二、详情页设计原则?

1、直接了当

信息尽量平铺展示,如没有必要不要做隐藏折叠。 

2、层次分明

按照接近原则,对信息分层分组展示,降低单个页面内信息复杂度。

3、化繁为简

减少复杂结构的使用,尽量使用相似的结构和模块,降低结构差异对用户进行干扰,让用户聚焦信息本身。

三、详情页构成

详情页由标题、标签页、图片、文字详情、按钮、可视化、列表、表格、筛选、数据统计、进度轴、标签构成

详情页的特点:1、内容杂,什么元素/模块都可能出现。2、布局多,布局没有套路,核心是做好内容分块和视觉引导。3、差异大,页面与页面巨大差异

四、详情页设计要点拆解

1.容器

由内容由少到多划分为原位展开、气泡卡片、弹窗、抽屉、页面。能优先满足内容收纳的同时,容易尽可能轻量。













2.布局

根据内容从简单到复杂可分为基础样式、标题分组、色块/分割线/卡片分组、锚点定位/标签页、自由布局。核心是做好内容分区、视觉引导符合用户操作习惯。

布局注意事项:把用户最关心的内容放在最显眼的地方







3.交互操作

交互操作可分为编辑(原位/气泡/弹窗/页面),查看详情(内容不多的话可以少用页面容器,减少套娃),业务操作(层级清晰,符合用户操作习惯)。



作者:鲲sky   来源:站酷

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

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

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

探索企业B端设计规范:如何打造无与伦比的用户体验

分享达人

今天和大家分享企业内部建设计系统的方法和实践,也期待大家指正与交流~

企业级B端产品具有行业壁垒高、业务复杂、服务角色多等特点,在大型迭代项目中,如何做好设计协同,把握设计一致性和还原度常常让很多设计团队感觉无从下手,找不到切入点。在长期的项目实践中我们发现,做好设计规范能规范可以帮助个人、团队以及整个企业提高效率和产出质量,保障用户体验统一。

那么,我们该如何做好体验标准化,保障基础体验一致性?下面将和大家分享我们公司在构建设计规范的实践案例。

一、为什么要做设计规范?

以我们设计团队为例,随着业务不断扩大,定制化需求不断增加,大型迭代项目做不好设计和开发协同,导致出现“体验一致性差”“设计效率低”“还原度不可控”等问题如何有效解决这些问题呢?可以通过构建设计规范,以保证一致性,实现工作提效。


从不同角度出发,构建设计规范都能发挥积极的作用。

对企业来说:有利于实现产品经理、设计和研发的输出一致。设计侧主动建立产品设计规范,很大程度上是为了做好设计管控,实现原型、设计稿到线上页面统一的设计语言,从根本上提升设计质量和还原度,提高用户满意度。

对个人来说:当多个设计师共同协作同一项目时,由于设计理解不一致等原因,容易出现设计控件使用混乱等问题。若有详细的设计规范作为引导,有利于实现产品各个模块间的一致性。组件化的工具也能减少机械重复性的工作,让设计师将更多精力投入到用户研究和提升用户体验上。

二、建立设计规范的时机?

产品有不同发展阶段,设计规范同样也有,不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多,保证投入产出比最大化;同时也要构建一个合理的规范迭代思路。

产品探索初期:

该阶段的产品核心目标是「验证产品或商业模型」,业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态,存在着“先满足功能,再优化体验”的情况,导致该阶段的产品体验往往不太过关。

搭建目的:通过定义原则,梳理关键页面和流程,搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断;从页面到流程,又能对应设计参照标准;同时业务可以在规定的框架下发展,不仅让产品体验的根基牢固,而且不会限制功能设计自由。

搭建范围:「全局说明」「页面布局」「通用流程」

产品稳定发展期:

该阶段的产品基本形态已稳定,也形成了初步的模型结构。后续迭代是在现有结构的基础上,进行增加或优化功能。虽然探索期定义了产品原则、布局和流程,但探索期产品的自由生长,会导致不少设计细节不一致,从而影响了产品整体的体验和效率。

搭建目的:通过回溯整理过往设计,沉淀优化成完整的交互规范。再根据规范统一产品体验,进一步优化流程和效率, 让整个产品体验达到相对稳定的状态。

搭建范围:「全局说明」「页面布局」「通用流程」「基础组件」「业务组件」

三、一个好的设计规范是什么样的?

好的设计规范有很多优秀的例子,例如Google、Apple、Microsoft这些引领全球设计风尚的公司,设计规范已经上升为设计语言,指导旗下所有产品的设计。国内做的优秀的案例,比如Ant Design,Element,arco.design等,像这类的产品已经实现了端到端的体验一致,把交互、前端和视觉的事情一并解决了,是值得学习的典范。这些优秀的设计规范都包含以下几个特点:灵活性,可扩展性,系统性和标准性。

一般团队内部构建的设计规范都源于某一产品或者业务,因为主要是团队内部成员使用,追求的是投入产出比最大化。所以可在行业通用设计规范的基础上,适度参考行业设计规范,能复用的直接参考,同时专注于业务本身,具有业务特性的再集合业务综合考虑,使整个规范制定效率更高,科学性、指导性更强。


四、如何制定设计规范?

设计规范的执行和推动主要分为四大步骤:

类型梳理:分析业务场景,整理和归类组件,评估具体组件优先级和迭代计划;

全局说明:统一布局,色板,字体,常用样式,规范设计语言;

抽象设计:将设计共性抽象出来,构建组件通用方案;

效果验证:通过定性/定量数据追踪效果,分析原因,迭代改进;


第一步:类目梳理

收集现有设计页面,分析业务场景,再参考行业通用规范的定义,整理和归类组件,可以先罗列完整,再根据产品实际业务需要进行增删改。

全局说明:明确影响整站各个模块、各个页面设计的原则和规范,指导我们后续各种规范的定义和设计。包括统一布局,色板,字体,样式等设计规则。

基础组件:可参考行业通用规范中的基础组件分类和组成,因为大部分基础组件都具有一定的通用性,站在巨人的肩膀上更高效。这里我们根据实际情况,将基础组件分为导航,通用,数据展示,数据录入,反馈5个大模块,每个模块下再细分各小类,构成基础组件的类目。

业务组件:根据业务需求,可以定义属于自己的业务组件,这也是区别于其他通用行业组件库的一个核心部分。


第二步:全局说明

因为在大体量产品设计中,每个模块都由不同的同学负责,这样全局产品的把握就会降低,需要去补充全局规范说明去维持产品全局通用部分的一致性。包括布局,色彩规范,字体,样式等;


第三步:抽象设计

抽象设计是设计规范中最核心,工作量最大,难度最高的一个环节。我们可以将它拆解成几个部分,先做出基础组件,再基于基础组件和业务需求抽象设计业务组件,最后抽象成页面模板。

基础组件

组件库的搭建,就一定要提到原子思维。道尔顿原子论认为,物质世界的最小单位是原子,原子是单一的,独立的,不可被分割的,在化学变化中保持着稳定的状态。这个原子理论同样适用于设计系统中。

其中,最小单位设计元素就是基础组件。我们在做设计系统的时候希望当你改动任何一个原子,你有自信其他所有依赖于这个原子的部件全部自动更新。只有满足了这一点,设计系统设想中的效率、解放生产力才会真正实现。例如,在sketch中,分享样式和嵌套符号的使用。


业务组件

在构建完基础组件后,可以根据业务需求,将使用频率较高的组件进行评估,抽象成业务组件。

一般业务组件可分成两大类:

一类是由多个基础组件组成的带有业务需求复合组件,如:复合标签,快捷时间选择器等;

另一类是针对特定业务场景的业务组件:如地图,站点等;


页面模版

在完成基础组件和业务组件的构建后,我们可以根据全局说明,利用组件搭建页面模板。页面模版不仅能有效的提升组件的使用效率,也能提供很好的组件使用示范效应,加强设计说明和组件之间的结合。



第四步:效果验证

组件质量评估:从物理到行为层,包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。

系统应用层面的评价:

系统是否帮助业务提效;

当业务不能直接应用系统,能否灵活改动;

系统是否帮助业务变得更有竞争力、更创新;

五、迭代方案和机制提效

迭代机制

当我们完成设计规范的整体构建后,对于新需求,通过评估复用性、通用性和优先级,低级别的走定制设计完成交付。高级别的通过抽象设计、内审、沉淀到组件库中。

机制提效

在完成设计规范的构建后,我们可以联合产品经理和前端工程师,帮助每个环节的人员快速搭建产出物,推动上下游机制提效。

例如,我们会基于设计规范,为产品经理提供符合设计规范的Axure元件库,产品经理使用元件库,可以快速搭建原型,产出prd,与设计师、开发的沟通也更加顺畅。简单的修改可以跳过设计师出图这一步骤,直接和开发沟通,极大加快前期的节奏。甚至通过借助元件库,产品经理可以搭建出高保真原型,用于直接和用户确认或者给客户进行demo的演示。

基于设计规范,推动研发实现组件代码化,通过设计标准化可以达到研发工业化。通过定义标准规范,提高流程、组件的复用率,开发侧就可以制定相应组件,形成前端脚手架,方便后期迭代的组件化使用,有效地避免不必要的分歧点和重复造轮子,同时减少上线前设计走查、测试的工作量,保证落地效果,提升生产力。

以上就是我们在构建自己的企业设计规范的流程,最后,给大家展示一下,我们目前的企业设计规范和部分应用情况。


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

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

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档