首页

清晰展现关键信息,助力高效决策——数据图表

ui设计分享达人

合理使用数据图表可以帮助用户更好地理解复杂的数据,提高用户体验和数据的可读性。选择合适的图表类型并遵循最佳设计实践是确保图表有效传达信息的关键。
数据图表是一种非常重要的可视化工具,它能够
帮助用户更直观地理解和分析数据。
借助于图形化的手段,清晰、快捷有效的传达与沟通信息。从用户的角度,数据可视化可以让用户快速抓住要点信息,让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点:准确性、创新性、简洁性。
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
清晰展现关键信息,助力高效决策——数据图表
 
 
 


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

 

当设计遇上AI—百度APP个人中心AI重构

ui设计分享达人

前言
 
AI能力的迅猛发展,为产品设计带来了很多新的可能性和机会。百度作为AI领域的行业先锋,正在不断探索如何将AI技术深度融入到产品中,以赋能改进和提升产品的使用体验。
 
本文将以百度APP个人中心AI重构项目为例,讲述如何运用AI智能推荐和对话能力来解决问题重构体验,将一个传统的固定入口型的个人中心打造成为一个高效智能的AI版个人中心。
 
希望能为读者提供新的视角和思路,激发大家对于AI原生设计的理解和思考。
 
 
个人中心旧版
 
作为百度APP端内业务和基础功能设置的重要回访阵地,个人中心面临着三大核心问题:①功能入口多页面屏效低;②部分功能操作层级深;③资产更新提醒不直观。
 
针对这些问题,我们希望通过精简功能结构、破壳高频功能、强化信息提示,提升用户触达效率,优化整体使用体验。为此,我们计划运用AI能力进行设计重构来解决上述三大问题。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
 
个人中心AI重构设计
 
目前行业内并没有一款运用AI能力对个人中心进行重构的产品,因此,设计师的挑战在于如何从0-1创新重构出“AI个人中心”新形态,来全面提升用户在端内的回访体验。我们依次从「框架、结构、内容、操作、对话」五部分出发定义,逐步搭建功能、丰满细节、拓展深度,创新重构出一个全新的AI版个人中心。
 
1.容器创新设计 打造AI感资产框架
 
基于上述问题和设计目标,首先对个人中心框架进行了重构设计,结合用户行为数据保留常用高频功能入口,去除原来众多类型的内容推荐卡,在页面内实现功能精简提效;其次结合AI智能推荐的能力,开辟出一个承载推荐内容的容器区域,破壳内容便于用户回访。
 
我们共计验证推敲出3种页面框架“嵌入式框架”“分层式框架”“卡片式框架”,选择与AI融合感更强、体验更沉浸的嵌入式框架继续深入,框架头部精简信息,中部保留高频功能便于用户回访,下方区域则通过AI智能推送用户所需内容。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
2.结合用户行为 主动智能推荐
 
在框架下方承载推荐内容的容器区域内,个人中心可以结合用户在百度APP的使用行为数据,通过AI向用户智能推荐内容资源和功能操作。
 
当用户的内容资产有变更时,个人中心能够主动破壳内容,如用户最近下载了一部剧集但未看完,当该剧有更新时,主动提示用户继续观看。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
当用户有设置类潜在需求时,个人中心能够推荐操作功能,如用户的手机经过一段时间使用,有系统垃圾冗余时,会主动推荐用户清理缓存。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
3.构建全业务卡片的内容结构
 
我们将各业务需要展示的信息摘取出来,采用卡片形态进行聚合与承接,以保证AI智能推荐时的灵活性和可拓展性。卡片会采用对话式引导语拉近用户距离,破壳提示内容资源,如向用户主动推荐最近收藏的内容,支持跳转查看并在返回时更新状态;还会在资产变更时进行提醒,如当用户下载视频或备份文件后,对用户实时提醒并提供复访入口;支持用户直接设置功能,支持一键点击并实时反馈状态。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
设计期间,我们从卡片分类方式、模板呈现、交互操作等维度进行了多方案探索,前后迭代实验了3款卡片形态,结合用户访谈测试和实验数据反馈,最终选择使用3.0版本的分卡聚合样式。这一版本采用了统一化模版来精简布局,通过一步操作来前置功能减步长,对功能和内容进行分类聚合来提高页面屏效、使用户更易理解。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
共计为20+业务搭建了10类聚合卡片,定义归纳了3类卡片操作与更新方式,在个人中心选用最符合用户行为的卡片和内容进行智能推荐。目前我们更多业务正在接入推荐卡片体系中,大家敬请期待~
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
4.内容破壳提示 功能操作提效
 
回归用户实际使用场景来看,AI智能推荐卡片形式在用户操作上有了很大的提效。例如查看下载视频的步长由4步缩减为1步,原来用户想继续看视频时,可能会找不到、且寻找入口比较深,现在我们通过推荐卡片破壳了视频等内容,点击卡片即可一键直达视频页,一段时间后返回个人中心时卡片会更新用户的最新观看进度。既减少了用户操作步长,又沉浸式延续了用户在端内的使用行为。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
同样,功能类的操作效率也大幅提升,之前当用户想清理时 ,入口深步骤多、体验非最佳,现在通过推荐卡片将清理缓存功能前置推出在个人中心,用户想清理缓存时,无需翻越层层入口,只需点击“清理”按钮即可一键完成缓存清理,实时告知用户清理进度,大幅提升用户操作效率。除此以外,像深色模式、字体大小等功能也都支持用户在个人中心一键操作。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
5.拓展对话场景 触达用户长尾需求 
 
个人中心不仅可以结合用户行为智能推荐卡片,还支持用户主动发起提问,通过对话形式快捷触达长尾需求。用户点击卡片下方的“去提问”入口或上滑页面,即可从个人中心进入对话页。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
进入对话页后,个人中心AI助手首先会推荐一些快捷指令,让用户快速了解对话提问方式和目前支持提问的功能。当用户发起提问后推出相关功能卡片,如在手机运行卡顿时询问“如何清理缓存”,AI助手会推出“清理缓存”卡片并引导用户前往清理,清理完成会再次回到对话页、为用户展示最新缓存状态。
 
以下是支持对话的部分功能卡片,这些卡片整体延续了推荐区域卡片的内容和体验,结合对话交互流程对卡片模版进行了差异化定制。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
最终基于业务功能特点,结合对话交互规范,共计定义了“跳转操作并返回更新”“跳转查看”“当前操作”“当前操作并追加对话”4种交互操作和更新方式。目前我们接入的场景能力尚有限,后续我们将持续进行迭代与优化,提升用户在个人中心进行AI对话的体验。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
 
AI个人中心实验上线效果
 
AI版本实验上线后,百度APP和个人中心的关键数据都有了显著提升,带来了正向收益,我们也于今年6月底上线全端,期待大家体验并给予反馈。
 
 
思考与展望
 
如今产品AI化已成为市场发展趋势,作为设计师,如何结合自己的业务,运用AI能力重构产品及体验是一个极具挑战和价值的课题。我们从百度APP个人中心AI重构项目中总结出了一些经验和小tips,在此向大家分享:
 
  •  
    在应用AI技术之前,首要任务是明确其能力范围与显著优势,如文中使用的AI智能推荐能力能够同时满足用户的个性化需求、提升信息获取效率,从而全方位提升用户体验和业务价值。
 
  •  
    我们需要大胆突破、勇于创新,在没有可参考借鉴的产品时应当打破惯性思维,尝试从框架、结构、内容等层面进行全新定义,然后通过持续打磨、深度探索等手段来不断完善产品形态。
 
  •  
    无论是否应用AI,设计底层思维是万变不离其宗的,我们需要始终站在用户视角分析并解决问题,而AI将会是每位设计师的一个趁手工具和灵感中心,它可以给我们更多思考问题的角度,日常工作中我们应当多积累总结然后不断迸发新思考,通过AI这个新工具来解决我们业务的已有问题,向用户提供更好的体验。
 
以上是我们的一些小小心得,希望能为同为设计师的你,在面对AI应用与重构设计时提供一些设计思路和借鉴。
后续,我们将持续聚焦提升个人中心的AI智能感知能力,围绕用户的偏好习惯及当前上下文环境,提供更精准的个性化服务,为用户升级更加智能、自然流畅的AI对话体验,通过结合更多场景逐步打造出一个全方位、个性化的百度APP AI助手,让每位用户都能享受到智能化的便捷与乐趣。
 
 


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

 

 

如何从产品角度发起交互设计?

ui设计分享达人

本文从产品角度出发,深入探讨了如何发起交互设计。通过明确产品目标与用户需求、进行用户研究、构建信息架构、设计流程与界面、进行原型测试以及持续优化等关键步骤,阐述了如何打造出满足用户期望、提升用户体验并实现产品目标的交互设计。
 
一、引言
 
在当今数字化的时代,产品的成功不仅仅取决于其功能的强大,更在于能否为用户提供流畅、愉悦且富有价值的交互体验。从产品角度发起交互设计,意味着将用户置于核心,以实现产品的商业目标和用户需求的完美融合。
如何从产品角度发起交互设计?
 
 
 
二、明确产品目标与用户需求
 
(一)定义产品目标
产品目标是交互设计的起点,它决定了设计的方向和重点。产品经理需要与团队共同明确产品的定位、市场需求以及预期的商业成果。例如,是旨在提高用户活跃度,还是增加用户转化率,或者是提升品牌形象。
如何从产品角度发起交互设计?
 
 
 
(二)挖掘用户需求
通过市场调研、用户反馈、竞品分析等手段,深入了解目标用户的行为习惯、痛点和期望。这不仅包括对用户显性需求的捕捉,还包括对潜在需求的挖掘。
如何从产品角度发起交互设计?
 
 
 
三、进行用户研究
 
(一)用户画像创建
基于收集到的数据,构建详细的用户画像,包括用户的年龄、性别、职业、教育背景、使用场景等特征,以便更精准地理解用户的行为和需求。
如何从产品角度发起交互设计?
 
 
 
(二)用户场景分析
模拟用户在不同场景下与产品的交互过程,发现可能存在的问题和优化点。
举例说明:
我们要知道,地铁周边美食,这是一个解决方案。真正的需求是什么?一个字一个字地找需求,地铁=快速方便出行,美食=和朋友一起吃饭/自己一人吃饭。这是一个和线下场景很相关的项目,我们要把不同目的核心用户的主要使用场景写出来。经过分析,我们得出了用户会选择我们产品,且产品未来可能存在的各种场景A、B、C、D、E。如下图所示:
如何从产品角度发起交互设计?
 
 
如果按照目标人群所在场景分类,进行细分,则为下图:
如何从产品角度发起交互设计?
 
 
乘地铁去地铁站和附近地铁站区别:前为用户会乘坐地铁去目的地寻找美食;后为用户不用地铁/吃完后使用地铁,地铁边美食没有其他美食团购产品有竞争力。
上班族和普通大众区别:上班族工作日使用固定地铁站上下班,时间可能紧急,快速获取食物;普通找美食吃的大众不使用固定地铁站,目的是通过地铁快速到达某目的地,就近享受目的地美食。
朋友们和个人区别:朋友们一起吃饭,容易出现喝多、吃过点等异常行为,并且在选择地铁旁吃饭地点时需要考虑朋友们家的位置就近选目的地。个人均不需要考虑以上,较为自由。
 
市场定位
经过领域场景的分析,我们知道了真场景都是用户有目的乘坐地铁去到某地铁站出站口寻找美食的。那么我们对这么一群大众进行用户人口统计学类的细分:
如何从产品角度发起交互设计?
 
 
  •  
    上图为前期定位的目标大众用户群,依靠地铁的工具属性,我们得出了具体的两个影响因素:时间+美食热爱程度。同时我们把直接竞品和间接竞品一同进行用户群比较。可以看到和大美团有相同和不同维度,这就是产品最初冷启动时期的差异化!也就是我们的前、中期场景的主要目标用户类型。
  •  
    红色部分即种子用户群,以这些群体为冷启动阶段,可以更快的向四周扩张。因为他们有使用地铁的时间属性,同时有较高的美食热爱程度,有利于带动其他时间+热爱程度的用户加入产品,实现快速并有质量的拉新、活跃的目标。
  •  
    低端直接竞品即用户群工具属性明显,只是搜地铁站,选择美食的用户,无明显其他行为;高端竞品即注重社交、ugc为起点,逼格高的搜寻美食工具。这部分开始很难,工作量巨大,且较脱离大众主流群体。
 
结合上图和要做的场景,我们得出了产品具体目标用户:乘坐地铁快速到达并寻找目的地美食的大众用户(上班族休息日,大学生,个人或一起),要求在地铁站附近便能方便享受目的地美食。且对美食有一定热爱程度。
 
(三)用户测试
邀请真实用户进行产品试用,观察他们的操作行为,收集反馈意见,为后续的设计提供依据。
1、需求接受
需求很有可能是在线上接到的,并不是面对面交流传递的,并且还会遇到很多坑,例如需求本身不具体,或者自己理解有偏差,因此在接到需求后,最好和交互、产品等同事进行面对面的交流和沟通。
详细了解测试目的和关键点,确定用户配比。
最好是让交互带着跑一下整个程序(半成品demo也好,交互稿也行),这样能在头脑中快速形成操作流程的认知,并把相应关键点对应上去。同时把大致的用户配比情况敲定一下,后续就可以直接招募用户了。
了解demo的完成进度,相应确定具体测试时间。
交互、视觉等完成demo的时间具有太多不确定因素,因此我们需要及时了解整个demo的完成进度,在尽可能快的情况下保险安排测试时间,如果邀请的是外部用户,结果用户到了而demo还没出来,那也是够了。
2、方案撰写和确定
让交互稿帮助自己
。在完成测试方案撰写的过程中demo还未诞生,具体程序细节记忆又很模糊,不好写测试方案,怎么办?不要慌,去看交互稿吧。
及时沟通
。在方案撰写过程中,如果有一些疑问,例如在看交互稿的时候还不是很理解某个具体操作过程,或者自己对产品有疑问的也可以跟交互等沟通,因为自己会遇到的问题,很有可能在测试用用户也会遇到,这样子用户如果问到了,就可以相应作出解释。
核实确定方案
。完成方案后,可以在公司沟通交流工具上和交互及产品等同事再确认一下,是否有什么地方遗漏或有不妥之处。
3、用户招募
这是一个大多数人都头疼的一个过程,希望看完了以下几点,可以稍微缓解一下大家的症状。
 
再次确定测试时间
方案定下来后,再跟交互确认测试时间,了解是否有变动和调整,尽量避免用户来了demo或者测试环境还不ok的情况。
 
撰写招募文案
需要把用户要求、测试日期和地点、报酬、大致的测试时长、用户需要在测试中做什么,以及报名方式等表达清楚。有以下几点可以注意一下,方便我们自己招募:
  •  
    详细列出测试安排的时间段
    。例如10:30-11:15、13:30-14:15,让用户自己挑选合适的时间段,这样就不用事后再协调不同用户测试时间了;
  •  
    优先人力、信息管理、行政等岗位同事
    。尽量避免相关产品人员、设计岗等同事。
  •  
    制作简单的招募海报,并检查。
    可以事先将“海报”用word或者ppt做好,然后保存成图片格式,记得检查核实一下是否有错。因为在公司IM群上直接黏贴确实方便,但是其排版往往不利于阅读,导致用户会遗漏重要信息。而制作成图片格式,可以更好地去避免这个问题,同时还可以显得整个招募过程比较正式,突出了对用户的尊重,也能在一定程度上体现我们用研工作的规范性。
 
多渠道投放招募海报
内部用户可以尝试先在公司IM群组上招募,之前招募样本量比较小,因此很快可以招到,其他途径暂时未尝试,公司论坛应该也可以,不过隐约感觉效率会比较低。外部用户可以在朋友圈试试,效果还不错,大家都很热情帮忙转发,群众的力量大无穷。也可以相应去搜索一些QQ群,加入并发布招募信息。另外还有一些社交论坛什么的,都可以尝试一下。方法很多,针对具体招募情况,大家就尽情发挥吧~
 
用户多了留到下次用
海报发出去后,有时也会出乎意料用户数量超过预期了,这是好事,不要担心,也不要急着拒绝,平和的跟对方说明情况,强调下次还会有测试,把用户相应信息了解一下做个记录,下次招募的时候可以直接先联系这几名用户。当然前提是你真的有下次测试需求,如果没有那还是老老实实说明情况。
 
确保自己和用户能彼此联系上
跟用户强调测试时间和地点,尤其是外部用户,如果招募和正式测试隔了几天,最好在测试前一天再通知一下。给出自己的联系电话,同时询问用户的联系电话。
 
第一个用户尽量安排公司内部同事
很多时候demo的完成情况会出现意外,到了测试时间demo还不能用,内部用户可以方便取消或者更换。另外,在第一次测试前谁都不确定用户会有什么反应,第一个测试是可以起到试水效果,而外部用户成本高,用来试水太奢侈。
4、测试准备
 
材料准备
需要准备的内容有:量表、报酬签收表、记录笔记本、录音笔、会议室借用,以及记录表格,如果是外部用户过来,相应准备一杯水,人家大老远过来也不容易。
 
测试内容准备
其实每次访谈用户自己都会挺紧张的,不知道用户是不是也很紧张(PS:好想当一回用户,体验一下被访的感觉)。为了消除这种紧张,同时也是为了更好的完成访谈,可以有尝试以下几点:
  •  
    尽可能多的去了解所需测试的产品
    。有时候demo出来的晚,下午要测试,demo中午才出来,自己都没玩过,测试还怎么搞?之前也说了,那就使劲去看交互稿吧,虽然比不上实际操作来的真实,但是也能有不小帮助,但也要给自己留足熟悉demo的时间。
  •  
    按照模块来列提纲
    。其实相当于组块策略,把同一个模块的问题放到一起更方便记忆,并且也在访谈中也方便自己和其他同事发现遗漏点。但模块不要太大,如果太大了就相应拆分一下。例如,在考拉新版测试的时候,有“首页”、“活动”、“购物车”等测试,但是光是首页内容也很多,作为一个模块还是太大了,可以拆分成“首页整体感知”、“商品详情”等几个方面来整理提纲。
  •  
    根据任务演练提纲
    。有了提纲后,按照任务大致过一下所有列出来的问题,这个过程会打乱按照模块列好的提纲,有一次这样的排练,在测试的时候更不容易漏掉题目,而且也相当于模拟了一下测试,自己心里会更踏实一点,在实际测试过程中也能有更好的应对。
 
相关人员通知
通知交互和产品的同事具体测试时间和地点,邀请他们一起参与。不建议交互和产品只是后期测试查阅报告,如果他们参与到测试中,能更近距离和用户接触,并能更加深刻感受到产品存在的问题,也能更好的推动产品的改进。
5、正式测试
主持人需要注意的点:
  •  
    划分我们和产品的关系。在测试之前跟用户说明清楚,我们并不是产品的设计者和开发者,我们只是受产品方委托来进行测试,以免用户不好意思当面如实评价产品。
  •  
    强调测试的是产品,而不是用户。要跟用户说明产品尚处于不完善阶段,因此邀请用户过来进行测试,帮助发现问题和改进产品设计,但请注意不是为了评价产品。
  •  
    注意访谈技巧。这个就不用多说了。
  •  
    尽可能深入的去挖掘用户的需求。不要停留在用户话述表面,更进一步去追问,用户为什么会这么说或这么问,例如,很多时候在测试中会碰到用户说“哦,原来这个按钮是xx功能,我还以为是xx功能“,这个时候可以再推进一步,了解用户为什么会这么认为。
  •  
    给其他在场的同时发言的机会。主持人如果觉得自己访谈的差不多了,可以询问一下记录者以及交互、产品等同事,了解他们是否还有问题需要补充。
  •  
    记得量表评分和报酬签收。长时间的测试和访谈后容易忘记量表评分和报酬签收,可以把这两份东西放在显眼的地方,另外可以让记录的同事打个招呼,帮忙提醒自己。
 
记录人员需要注意的点:
  •  
    仔细观察用户行为并记录。记录不仅仅是用户的观点、想法等,更重要的是记录用户的实际行为。
  •  
    按照模块记录。记录者可以按照测试方案中的模块来相应记录用户的行为和言语表述。
  •  
    查漏补缺。主持人可能会遗漏一些点,记录者作为旁观者需要提醒主持人遗漏了什么,或者自己有什么新的内容需要补充。
 
6、测试结束
欢送用户。对用户表示感谢,并开门送一下用户,对于外部用户,最好能送到大楼外面可以看见出口的地方。
测试后及时讨论。这个是重点!
在每一名用户测试后及时和交互、产品等同事快速过一下主要发现的问题点,这样做有以下优点:
  •  
    有效达成共识,确定解决方案。刚访谈结束印象最深刻,因此能快速有效达成对主要问题的共识,并讨论确定相应的解决方案。
  •  
    体现敏捷优势。确定了一些比较严重的问题后,交互和产品的同事就可以相应去改进产品设计,做到了边测边改,加快迭代速度。
  •  
    帮助优化访谈提纲,和测试用户安排。有些问题在事先撰写方案的时候可能没涉及到,在讨论后可以补充进去,而有些问题确定后则不需要再测。另外,也可以通过讨论对事先安排的测试用户进行相应调整,例如增删用户,或者调整新老用户测试顺序等。
  •  
    事后帮助我们自己快速撰写方案。通过讨论确定了关键问题,并且,交互和产品的同事也相应清楚了,因此在最后可以快速形成报告。
再次感谢用户。所有用户测试结束后,可以花几分钟时间简单感谢一下用户。
 
7、报告撰写
针对不同大小项目的用户测试,在完成报告撰写过程中有两种具体方式:
  •  
    小测试项目简单快速撰写报告。对于那些1-2天的小测试项目,由于在每次测试后都有讨论,已对主要问题达成共识,因此在报告撰写的时候就可以快速地将主要的问题和风险点呈现出来。
  •  
    大测试项目每天总结并反馈主要问题。大的测试项目持续时间比较久,针对每天的测试及讨论,简单总结一下主要发现的问题,并反馈给相关人员,如果到了最后再总结,容易遗忘掉一些内容,并且这样子也方便自己最后撰写报告。
 
四、构建信息架构
思考信息架构有三个核心关键词:用户角色、产品价值、使用场景。
1、明确用户角色
用户角色清晰揭示用户目标,帮助我们把握关键需求、关键任务、关键流程,看到产品哪些是主要的事,哪些是次要的事。我们应该尽可能丰富、形象化我们的用户角色,让它在设计决策过程中发挥作用,设计出更符合用户场景的产品。
2、了解产品的目标价值
作为产品的设计师一定要理解产品的价值,知道用户想要什么,把最重要的优先级提到最高,尽量移除无关紧要的信息,或降低其他优先级的权重,以免对用户造成干扰。
3、提炼产品的使用场景
要了解产品的业务流程,比如目标用户是谁、什么场景、如何使用,要把产品业务流程上的节点一个一个梳理出来,还要考虑这个产品对用户的价值是什么,不要仅仅考虑界面的元素规范、设计细节等等,要知道产品的目标价值体系。
4、信息架构优先级
基于三个核心点(用户角色、产品价值、使用场景)分析,把目标用户人群核心价值的功能点业务流程梳理出来,分清主次关系,切忌功能堆砌,具体方法可以把所有功能业务逻辑的主线列出来,然后根据业务的优先级做评级,分清楚这些功能哪些是主要的,哪些是次要的,然后通过数字做排序,这样我们就知道哪些功能设计需要明显,哪些功能设计需要低调。
5、信息归类及整合
从整体上思考信息类产品的分类及整合,比如用户资料相关的产品会有用户信息、资料、等逻辑,这样就要把所有跟用户相关的信息都归在同一个分类菜单下,不要让他们分散在各个页面中。也就是所谓的一级菜单、二级产品的处理逻辑。
6、要定期审视与迭代
随着产品规模与复杂度的提升,要随时关注信息架构是否满足当前的产品框架,不要等需要时候再去孤注一掷的全盘优化,这样会让项目陷入被动的局面,可以逐渐增强,循序渐进的优化,从小的细节对信息架构进行调整,提升产品的易用性。
 
六、进行原型测试
1、制作原型
使用快速原型工具制作可交互的原型,以便更直观地展示设计方案。
 
(二)内部测试
团队内部进行初步测试,检查功能的完整性和流程的合理性。
 
(三)用户测试
邀请外部用户进行测试,收集他们的意见和建议,发现潜在的问题和改进空间。
 
七、持续优化
 
(一)数据分析
通过收集和分析用户的使用数据,了解用户的行为路径和偏好,为优化提供数据支持。
 
(二)用户反馈处理
及时响应用户的反馈,将有价值的建议融入到后续的优化工作中。
 
(三)迭代更新
根据数据分析和用户反馈,不断对交互设计进行迭代更新,以适应市场和用户需求的变化。
 
八、结论
 
从产品角度发起交互设计是一个综合性的过程,需要充分考虑产品目标、用户需求、信息架构、流程界面、测试优化等多个方面。只有以用户为中心,不断追求卓越的用户体验,才能打造出具有竞争力的产品,在激烈的市场竞争中脱颖而出。
 
在未来的产品开发中,随着技术的不断进步和用户需求的不断变化,交互设计也将面临新的挑战和机遇。产品团队应保持敏锐的洞察力和创新精神,持续探索和优化交互设计,为用户创造更多的价值。
 


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

如何抓住用户的眼睛

ui设计分享达人

浏览一个页面或阅读一篇文章时,我们的眼睛并不是随意地扫视,而是遵循一定的模式和规律。这些模式和规律被称为视觉动线。
视觉动线这个概念最初确实起源于室内设计,用来描述人们在室内空间中的移动模式和视线轨迹。通过了解人们的视觉动线,设计师可以更好地规划和优化室内空间的布局,以提供更舒适、便捷和高效的居住环境。
随着人机交互和界面设计的不断发展,视觉动线的概念也被引入到UI设计中。
目录:基本方法/文献信息收集/用户视觉习惯引导/信息层次结构的构建/最后总结
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 
收藏
如何抓住用户的眼睛
 
 


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

教你一文读懂暗色模式

ui设计分享达人

引言
  暗色模式(Dark Mode)的兴起是一个逐渐发展的过程,它涉及到
技术进步、用户体验优化以及设计趋势
的变化。
  随着iOS 13在2019年的发布,暗色模式开始成为用户关注的焦点;在用户体验方面,设计者们考虑到了环境光线与屏幕亮度的匹配问题,暗色模式可以有效减少视觉疲劳;在实际使用中,用户发现暗色模式在光线较暗的环境中更为舒适,这也促使了暗色模式的普及和发展。
  暗色模式在UI设计中的重要性体现在
改善视觉舒适度、节省电量以及提供个性化选择
上,其普及程度随着用户需求和技术发展不断提升。
  本文将从暗色模式的
基本概念、优势、设计原则和应用
三个维度,帮助各位同行更好地学习、理解并完成暗夜模式的UI设计工作。
(如果文中存在任何不准确或遗漏之处,我也非常期待各位专家的指正和建议)
本文目录
本文目录
 
「大厂设计师」教你一文读懂暗色模式
 
 
一、定义及其在UI设计中的表现形式
1.暗色模式的定义
  暗色模式是一种
低光用户界面(UI)设计
,也称为深色模式,是一种用户界面设计选项,它使用较深的颜色方案和背景,通常为黑色或深灰色,以减少屏幕亮度并提供更舒适的视觉体验。
iOS 13 亮色模式(左)与暗色模式(右)的对比
iOS 13 亮色模式(左)与暗色模式(右)的对比
 
2.暗色模式的定义
(1).暗色模式在UI设计中的表现形式
设计师需要为暗色模式
创建一个新的调色板
,这通常意味着降低颜色的饱和度,以适应深色背景。同时,
避免使用纯黑
作为主色调背景,而是选择接近纯黑的深灰色,以确保阅读体验的
舒适性和可读性
亮色/暗色模式下主色需要进行调整
亮色/暗色模式下主色需要进行调整
 
(2).对比度控制
暗色背景与文本颜色之间的对比度应该控制在
WCAG2.0AA级标准
以上,以保证内容的
清晰度和易读性
。对于彩色元素,也需要适当调整饱和度,确保整体色彩之间的对比度符合无障碍标准。
达到/未达到WCAG2.0AA标准的视觉效果对比
达到/未达到WCAG2.0AA标准的视觉效果对比
 
(3).视觉元素区分
在暗色模式下,设计师需要特别注意视觉元素的区分,通过足够的对比度来
保证文字和图形的清晰
可见。这不仅仅是简单的颜色反转,而是一种“弱光”主题的设计思考,旨在优化用户在低光环境下的视觉体验。
亮色模式中的按钮在暗色模式中显得太跳跃
亮色模式中的按钮在暗色模式中显得太跳跃
 
二、历史回顾及发展脉络
1.命令行界面时代
    在早期的计算机系统中,如DOS和Linux,
终端通常使用暗色模式
,这是因为早期的CRT显示器存在闪烁问题,暗色背景能够减少视觉疲劳,并提供较高的对比度。
Linux的终端界面
Linux的终端界面
 
2.个人电脑时代
    随着个人电脑的普及,
图形用户界面(GUI)逐渐成为标准
,此时大多数操作系统和应用程序采用了亮色模式,以模仿纸张的颜色并减少CRT显示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移动设备时代
    智能手机和平板电脑的兴起带来了OLED等先进显示技术,这些设备的
小屏幕和高分辨率
使得暗色模式再次变得实用和流行,特别是在
节省电量和减少眼睛疲劳
方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系统时代
    近年来,
各大操作系统开始正式支持暗色模式
。例如,Windows 10在2018年的更新中引入了暗色应用模式,macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、设计趋势中暗色模式的地位
暗色模式在当前设计趋势中占据重要地位,以其
减轻眼睛疲劳、节省电量和聚焦内容
的优势受到青睐。它不仅适应低光环境,还提供美学上的新探索,响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新,暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序,如WhatsApp、Instagram、Google、Facebook等,都已经引入暗色模式设计,这表明暗色模式已经
成为了一种广泛接受的设计趋势
从左往右依次为:WhatsApp、Instagram、Google、Facebook
从左往右依次为:WhatsApp、Instagram、Google、Facebook
 
「大厂设计师」教你一文读懂暗色模式
 
 
一、用户体验层面
1.提高阅读舒适度
(1).对比度和可读性
在相同的对比度条件下,浅背景上的黑字比深背景上的浅色字
阅读效果更好
。这表明,优化对比度是提高阅读舒适度的关键因素之一。
浅背景上深字与深背景上浅字的视觉对比
浅背景上深字与深背景上浅字的视觉对比
 
(2).用户偏好和满意度
一项针对用户对暗色模式的使用体验的调查显示,与默认的白底模式相比,用户在使用暗色模式时报告了
更低的视觉疲劳和更高的满意度
。斯隆(Sloan)的一项研究在1977年就报告说,如果更多的光线通过混浊的透镜到达眼睛,则出现畸变的可能性更大,即
暗模式对视力障碍者更好
对于长时间从事屏幕工作的人来说,暗色模式对眼睛更加友好
对于长时间从事屏幕工作的人来说,暗色模式对眼睛更加友好
 
2.减少视觉疲劳
(1).人眼生理特性
暗色模式能
减少屏幕发出的光线
,这有利于减少眼睛疲劳和不适,特别是在低光环境下,人眼的虹膜会打开以接受更多光线,而暗色模式提高了减少的光源,
减少了对眼睛的刺激
亮/暗环境下瞳孔大小的变化
亮/暗环境下瞳孔大小的变化
 
(2).蓝光辐射减少
人们通过长期研究发现短波可见光,即紫光和蓝光对眼底视网膜有相当程度的破坏作用, 而人们通常把这种可见光波长中高能量波段(400- 470nm)对视网膜的损坏现象称为
“蓝光伤害现象”
。 还有研究关注了暗色模式对蓝光辐射的影响。由于暗色模式降低了屏幕的整体亮度,因此也
减少了蓝光的辐射
可见光波段分布
可见光波段分布
 
二、设备电池寿命
1.降低屏幕功耗
在OLED屏幕上,每个像素都是独立发光的,当
显示黑色时,相关的像素点会关闭,从而不消耗能量
。这意味着,显示大面积黑色内容的暗色模式能够显著减少屏幕的能量消耗。
OLED屏幕发光原理
OLED屏幕发光原理
 
2.实际省电效果
以 Google 测试数据为例,OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度,手机的
电量消耗下降了 63%
Google的测试数据
Google的测试数据
 
三、降低屏幕功耗
1.促进睡眠
对于晚上喜欢在床上阅读或工作的用户来说,暗色背景有助于降低屏幕亮度,
减少对褪黑素分泌的干扰
,也有助于
减少蓝光对睡眠周期的影响
,从而帮助用户更快入睡并提高睡眠质量。
OPPO手机暗色模式广告
OPPO手机暗色模式广告
 
2.减少眩光
眩光是明亮的屏幕和低光环境之间恼人的对比现象,对眼睛具有一定的影响并造成眼部不适。暗色模式通过使用深色背景和亮色文字,整体降低了屏幕的亮度,这样在光线较亮的环境中,屏幕的亮光
与周围暗环境的对比度降低
从而减少了屏幕反射光线对眼睛的刺激
,降低不适。
有眩光与无眩光的显示器对比
有眩光与无眩光的显示器对比
 
四、打造沉浸式体验
1.减少视觉干扰
暗色模式提高了一种无干扰的工作环境,
有助于他们专注于手头的任务
,特别是在进行写作、编码或其他需要集中注意力的活动时,暗色模式能够减少视觉干扰。
暗色模式为视觉设计提供了更大的对比度,使得界面元素更为突出。这种高对比度不仅有利于内容的战士,也增强了用户的视觉聚焦,让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时,暗色背景能够使色彩更为鲜明,提升用户的视觉体验。
编码软件一般默认暗色界面,有利于专注工作
编码软件一般默认暗色界面,有利于专注工作
 
2.增强视觉聚焦
暗色模式为视觉设计提供了更大的对比度,使得
界面元素更为突出
。这种高对比度不仅有利于内容的战士,也增强了用户的视觉聚焦,
让用户更容易沉浸于应用或游戏的环境中
。特别是在观看视频或进行游戏时,暗色背景能够使色彩更为鲜明,提升用户的视觉体验。
手游王者荣耀UI界面
手游王者荣耀UI界面
 
「大厂设计师」教你一文读懂暗色模式
 
 
一、不同平台的设计原则
「大厂设计师」教你一文读懂暗色模式
 
 
1.WCAG最低标准
(1).WCAG的定义
Web Content Accessibility Guideline,译为
网页内容无障碍指南
,其中包含分为可感知性、可操作性、可理解性、可兼容性和一致性五大类的相关建议,这些建议可使网站内容更容易访问。iOS人机界面准则以及Android平台的Dark Theme都是基于WCGA之上。
WCAG的检测网站:WCAG - Contrast Checker
WCAG的检测网站:WCAG - Contrast Checker
 
(2).最小对比度(AA级)
对于普通的文本和文本图像,要求视觉呈现
至少具有4.5:1的对比度
。这意味着文本的颜色应该与背景颜色有足够的差异,以便用户能够轻松阅读。
(3).加强对比度(AAA级)
对于普通文本与背景的对比度,
要求不低于7:1
。这一级别的要求比AA级更高,提供了更强的视觉清晰度,特别有助于色觉缺陷或低视力用户的阅读。
不同层级的信息使用不同对比度
不同层级的信息使用不同对比度
 
2.Android平台
(1).使用深灰色而不是黑色
深色主题背景通常采用深灰色而非纯黑色,这是因为纯黑色可能会导致对比度过高,而深灰色可以提供
更为舒适的视觉体验。
背景颜色为 #121212
背景颜色为 #121212
 
(2).通过浅色表达深度
在深色主题中,为了构建清晰的视觉层次,通常会使用较浅的颜色来突出界面上的重要元素,如按钮和卡片。Dark Theme通过
浅色遮罩覆盖的形式凸显不同层级
,不同高度层对应不同透明度的规范如下。规范最高层是24dp,覆盖16%透明度的白色。
不同高度层对应的白色遮罩透明度
不同高度层对应的白色遮罩透明度
 
(3).颜色去饱和
在深色主题中,颜色的饱和度通常会降低,这样可以
减少视觉疲劳
,并提供一种更为舒适和专业的外观。
亮色/暗色模式中主色调的对比,降低了饱和度
亮色/暗色模式中主色调的对比,降低了饱和度
 
(4).使用深色及有限色彩
为了保持设计的一致性和专注性,深色主题中应使用有限的色彩,并且这些色彩应当与深色背景协调。
品牌颜色可以在深色主题中以完全饱和度使用,但应用应限于一个或两个品牌元素,例如徽标或品牌按钮。通过谨慎使用品牌颜色,使元素在层次结构中保持突出。不饱和的颜色仍应在黑暗主题UI的其余部分中使用。
背景色也需要有品牌色的颜色倾向
背景色也需要有品牌色的颜色倾向
 
3.iOS平台
(1).保持视觉风格的熟悉感
意味着即使在深色模式下,用户应能立即识别出应用程序的风格和布局,
确保用户体验的连贯性
。iOS 7之后苹果一直崇尚这种
毛玻璃般的透明材质
以映射UI界面与设备屏幕的关系,也可以使用户更好的感知上层元素与下层内容之间的关系,界面也不会过于枯燥乏味。
iOS 13提供了4个层级的材质,由厚重到轻薄,对应的暗色模式也保持了风格一致性
iOS 13提供了4个层级的材质,由厚重到轻薄,对应的暗色模式也保持了风格一致性
 
(2).平台一致性
设计时应遵循iOS的设计规范,确保在不同模式(浅色或深色)下都能
提供一致的用户体验
。这有助于用户在使用各种应用时能够获得统一的操作感受。iOS默认提供了9个彩色色板(TintColor),为了保证深色模式下的对比度效果,
每个颜色都新增了深浅模式两种版本
iOS 13 UI Sketch组件库
iOS 13 UI Sketch组件库
 
(3).清晰明确的信息层级
在深色背景下,原先利用阴影区分界面层次的方法可能不再适用,因此需要通过不同灰度的背景色和阴影来强化层次感。正确的层级关系有助于突出重要内容,引导用户的注意力。
在“通讯录”与“信息”中选择联系人的界面因为信息层级不同,背景颜色不同 左:#000000 右:#1C1C1E
在“通讯录”与“信息”中选择联系人的界面因为信息层级不同,背景颜色不同 左:#000000 右:#1C1C1E
 
(4).清晰明确的信息层级
深色模式应
聚焦于内容展示
,使主要内容突显,而
非核心的界面元素则相对隐退
,这有助于集中用户的注意力于重要信息上。在浅色主题中,我们经常使用大块的明亮颜色,这样最重要的元素可能会更加显眼。但在暗色模式中,这样就不行了,大块的亮颜色会让我们容易忽视更重要的元素。 
在Dark Mode中不能采用大面积的彩色
在Dark Mode中不能采用大面积的彩色
 
二、优秀案例解读
1.国内案例
(1).Ant Design
Ant Design 在其4.0版本中对暗黑模式进行了探索,提供了一套
适用于企业级应用的暗色主题设计
,旨在帮助设计师和开发者快速实现暗色模式的用户界面。
「大厂设计师」教你一文读懂暗色模式
 
 
(2).微信
微信作为国内领先的社交应用,其暗色模式设计不仅减少了屏幕的亮度,还对图标和文字颜色进行了优化,以确保在不同光线条件下的可读性和舒适性。
文字信息的对比度仅大于7:1。更多的是考虑微信的聊天场景
中,用户可能长时间沉浸式使用。这里微信将深色模式与夜间模式进行了兼容,
避免大的对比造成强烈的视觉刺激
,可以在深夜环境下获得更好的感知度。
 
微信文字信息对比度
微信文字信息对比度
 
(3).百度地图
百度地图的暗色模式主要是为了适应
在夜间使用导航时,减少屏幕亮度对驾驶员视觉的影响
避免产生视觉疲劳或短暂的视觉致盲现象
。开启这一模式后,百度地图的界面颜色会变为深色背景,以降低整体亮度,从而提供更舒适的视觉体验。
比亚迪上搭载的百度地图界面
比亚迪上搭载的百度地图界面
 
(4).淘宝
电商类应用上,大量的商品图片和视频都是以浅色背景为主。如果只是把背景变为深色就会十分刺眼,但是如果挨个调整商品图片,则工作量十分巨大。淘宝
通过“语义化颜色”(Semantic Colors)进行适配
。所谓语义化颜色,就是
不再通过某一色值来描述颜色,而是通过用途来描述
,让界面元素可以自动适配当前的外观。
淘宝的深色模式
淘宝的深色模式
 
(5).抖音
界面采用暗色模式是由于暗色背景在低光环境下对眼睛的刺激更小,用户在夜间使用应用时会觉得更加舒适。同时,采用暗色模式可以减少界面干扰,用更简单的交互方式
提高用户沉浸式观看体验
。这
促使用户在晚上更多地使用抖音
,从而延长用户在应用上停留的时间。
抖音的双色模式,默认为暗色模式
抖音的双色模式,默认为暗色模式
 
2.国外案例
(1).Google
Material Design的设计规范中新增了暗色主题,它使用大面积的深色来构成界面,
作为产品默认主题的补充
。这种设计不仅能改善视觉人体工程学,还能在某些情况下节省电池电量,特别是对于配备OLED屏幕的设备来说。
Google Material Design设计规范
Google Material Design设计规范
 
(2).X/Twitter
目前提供了两种深色模式
:分别是“昏暗(Dim)”和“熄灯(Light out)”,前者背景色为深灰色,后者基本是纯黑色。马斯克在X发文宣布,该平台很快将只有“暗黑”模式,它在各个方面都更好,改动后暗黑模式将成为默认且唯一可用的主题。
Dim与Light out的区别
Dim与Light out的区别
 
(3).Youtube
之前在IOS系统上的大量耗电一直被用户诟病,在推出深色模式后,相较于亮色模式
能节约60%的电量
。同时,浅色的留白容易引起视觉疲劳,与内容本身抢夺视觉重点,在深色模式下,
视频内容本身会被突出得更彻底
Youtube的全新暗色模式
Youtube的全新暗色模式
 
(2).E-Trade
在 2018 年的时候,一家客户关系管理(CRM) 软件服务提供商 SalesForce 的设计师想知道开发仪表板功能时采用哪种模式会最好。于是他们采访了许多用户,事实证明,
用户对黑暗主题下的图表反应会更快并且更精准。
这一点在股票交易软件上也得到了验证,目前来看
全世界绝大多数的股票软件采用的都是负极性,也就是暗色底的设计方式
。红色和绿色代表的涨或跌(不同国家颜色表示可能不一样)在这样的深色背景下就会特别显眼。还有一些颜色比如蓝色用于某些数据的走势图。
证券/股票交易类应用通常采用暗色界面
证券/股票交易类应用通常采用暗色界面
 
三、设计工具与资源
1.Sketch插件
(1).Sketch Midnight
Sketch Midnight Mac正式版是款针对Sketch打造的主题插件。Sketch Midnight Mac最新版为你的Sketch增加
精美的替换主题,自定义选择颜色,自定义画布黑暗等
。并且Sketch Midnight Mac中用户还可以设置画布的明度(纯黑或灰色调画布)以得到最佳主题展示效果。
「大厂设计师」教你一文读懂暗色模式
 
 
(2).Sketch Dark Mode Plugin
这是一个
专门用于生成深色模式版本的文档
的插件。它可以加快设计工作流程,并帮助你立即创建出精美的深色模式设计,而且操作简便,没有繁琐的界面。
「大厂设计师」教你一文读懂暗色模式
 
 
(3).Sketch Toolbox
虽然这个工具主要是用来管理和组织Sketch插件的,但它也
提供了一些与暗色模式相关的插件
,可以帮助设计师更好地管理和维护他们的设计项目。
「大厂设计师」教你一文读懂暗色模式
 
 
(4).Frontify
虽然Frontify主要是一个品牌管理工具,但它也提供了一些功能,如基于Web的样式规范和UI设计模式库,这些功能可以
帮助设计师在创建暗色模式设计时保持一致性和标准化
「大厂设计师」教你一文读懂暗色模式
 
 
2.在线工具
(1).Adobe Color
Adobe Color是一个在线工具,它可以
帮助设计师创建和测试色彩方案
,包括暗色模式的配色。您可以使用它来生成、预览和分享配色方案。
「大厂设计师」教你一文读懂暗色模式
 
 
(2).Coolors
Coolors是另一个在线配色方案生成器,它提供了
快速生成和调整配色方案
的功能,非常适合用于暗色模式的设计。
「大厂设计师」教你一文读懂暗色模式
 
 
(3).Material Design Color Tool
由Google提供的Material Design Color Tool可以帮助设计师根据Material Design指南
创建色彩方案,包括暗色主题的配色
「大厂设计师」教你一文读懂暗色模式
 
 
总结
    随着用户对界面设计要求的提高,暗色模式以其减少视觉疲劳和增强内容可读性的优势,在UI设计中越来越受欢迎。它不仅为用户带来了全新的视觉体验,也为设计师提供了创新的空间。
    未来,暗色模式有望成为更多应用和系统的标准配置,设计师们将更加重视其创新和优化,以提供更优质的用户体验。我们应紧跟这一趋势,探索新的色彩搭配和布局,满足用户的需求和偏好。
    总之,暗色模式在UI设计中的应用和优势已经得到了广泛的认可。作为设计师,我们应该把握这一趋势,不断提升自己的设计能力,为用户创造更加美好的数字生活。


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

解锁UI设计新趋势:打造未来感界面的5大技巧

ui设计分享达人

引言
  随着科技的迅猛发展,用户界面(UI)设计作为连接用户与数字世界的桥梁,其重要性和影响力日益凸显。一个优秀的UI设计不仅能够提升用户体验,保持用户的持续参与度,还能助力品牌在激烈的市场竞争中脱颖而出。如今,设计师们面临的挑战是如何
捕捉并应用新兴趋势,打造出具有未来感的界面设计,以满足用户对新鲜感和创新体验的渴望
  在未来感的设计中,每一个小小的细节都可能成为引领潮流的风向标。从
视觉元素的创新运用
智能动效与微交互
的精妙结合,再到
材料设计与空间概念
的深度探索,以及
色彩与字体的新潮流
,都是构建引人入胜的用户界面不可或缺的部分。更进一步,随着
增强现实(AR)和虚拟现实(VR)技术
的融入,UI设计的边界被进一步拓展,为用户带来前所未有的沉浸式体验。
  本文将深入探讨打造未来感界面的5大技巧,并通过实际案例的分析,揭示这些技巧如何在实际设计过程中得以应用,并最终形成具有影响力的产品。无论是刚踏入UI设计领域的新手,还是经验丰富的资深设计师,本文都将提供有价值的见解和灵感,帮助大家解锁新趋势,打造具备未来感的用户界面,共同迈向更加美好的数字生活。
(如果文中存在任何不准确或遗漏之处,期待各位专家的指正和建议)
本文目录
本文目录
 
解锁UI设计新趋势:打造未来感界面的5大技巧
 
 
一、新趋势概览
1.当前UI设计的流行趋势
  在数字设计的世界中,UI设计的趋势如同时尚圈的变迁一样迅速。每一个新趋势都在告诉我们,技术正以前所未有的速度影响着我们的日常生活。作为设计师,理解并把握这些趋势不仅意味着能够创造出引人入胜的作品,更代表着能够预见并塑造未来用户与界面交互的方式。
  当前流行的UI设计趋势包括了
极简主义、扁平化、暗色模式、玻璃模糊效果(Glassmorphism)、以及动态的视觉效果
等。这些趋势往往反映了用户对清晰性、可读性、以及视觉舒适度的需求。例如,暗色模式不仅减少了屏幕发出的光线,减轻了用户眼睛的疲劳,同时也赋予了界面一种时尚和专业的气息。(可阅读我之前的文章《「大厂设计师」教你一文读懂暗色模式》,非常详细)
当前流行的UI设计趋势
当前流行的UI设计趋势
 
2.科技发展如何影响UI设计
  同时,随着人工智能和物联网的普及,UI设计也正在变得更加
智能化和互联
。设备间的无缝连接带来了
统一的用户体验
,而人工智能的引入则让界面能够根据用户的行为和习惯提供个性化的反馈和建议,极大地
提升了用户的粘性
小米已经建立起了涉及12大领域、98项细分领域的技术图谱,涵盖了智能手机、智能汽车、机器人、软件和算法、电商、智能制造、金融等各类小米研发和应用的技术
小米已经建立起了涉及12大领域、98项细分领域的技术图谱,涵盖了智能手机、智能汽车、机器人、软件和算法、电商、智能制造、金融等各类小米研发和应用的技术
 
3.优秀案例解读
  为了具体展示这些趋势在实际中的应用,我们不妨来看一看
苹果公司的UI设计
。苹果一直以来都是工业设计的先驱者,它的UI设计同样引领着潮流。在最新的iOS系统中,我们可以看到
玻璃模糊效果被运用到了极致
,它不仅使界面看起来更加现代和清新,也为用户体验增加了层次感和深度。此外,苹果的
Animoji和Memoji功能
将个性化的动态表情带入了消息交流中,这种结合了
个性化和技术趋势
的设计细节,
增强了用户的互动乐趣,并提高了平台的参与度
苹果公司的玻璃模糊效果及emoji应用
苹果公司的玻璃模糊效果及emoji应用
 
  接下来,我们还可以看到
特斯拉
在其车载用户界面中采用了
极简主义
的设计理念。通过简化界面元素,去除多余的装饰,特斯拉成功地提供了一个
既美观又功能性极强
的控制面板,完美地展示了如何
将复杂信息简洁呈现给用户
特斯拉的极简化HMI设计
特斯拉的极简化HMI设计
 
  总之,
了解并应用这些UI设计的新趋势
对于设计师来说是至关重要的。它们不仅能够帮助设计师创作出符合当下审美的作品,更能让他们预见未来,
打造出具有前瞻性和创新精神的用户界面
。在接下来的章节中,我们将深入探讨如何将这些趋势转化为实际的设计技巧,并通过案例分析来揭示这些技巧的应用方法。
解锁UI设计新趋势:打造未来感界面的5大技巧
 
 
二、5大设计技巧及应用
1.创新的视觉元素运用
  在UI设计中,视觉元素的运用是
建立品牌形象和提升用户体验
的关键。近年来,随着技术的不断进步和设计理念的更新迭代,设计师们已经开始尝试更为创新的视觉元素,以打造具有未来感的用户界面。这些创新元素不仅能够
吸引用户的目光
,还能
提供新颖的交互体验
,从而
增强用户的参与度
(1).抽象图形和动态背景
  首先,
抽象图形和动态背景
成为了流行趋势之一。这些元素通常结合了
复杂的几何形状、微妙的色彩渐变以及动态效果
,用以营造出一种科技感或梦幻般的氛围。例如,一个登录页面可能采用动态的背景,其中包含缓慢旋转的三维几何形体,这不仅给用户带来了
视觉上的享受
,也传达了
品牌对未来科技的追求
图源:https://dribbble.com
图源:https://dribbble.com
 
(2).3D元素
  其次,
3D元素的融合
也是创新视觉元素运用的一个方向。随着3D建模技术的发展,将三维元素集成到二维界面中变得越来越流行。这样的设计不仅
增添了界面的深度和立体感
,还为用户
提供了更为丰富的互动方式
。例如,懂车帝使用了
3D产品预览
,让用户能够从不同角度观察车辆,增加了购物的体验感。
懂车帝的3D看车
懂车帝的3D看车
 
(3).优秀案例解读
  接下来,我们将通过一个具体的案例来进一步理解这一技巧的应用。
AirPano Travel Book
是一款旅游类应用,运用了
视差滚动效果
来模拟用户在旅途中的景深变化,当用户在应用中上下滚动时,不同层次的图像将以不同的速度移动,
营造出一种真实的旅行体验
。同时,在UI中加入
定制化的动态抽象图形
,比如根据用户的目的地展示出具有当地特色的图样,这样既美化了界面,也
提供了个性化的信息
视差滚动效果
视差滚动效果
 
定制化抽象图形
定制化抽象图形
 
  此外,为了更好地展示创新视觉元素的运用,设计师可以利用现代设计工具,如
Adobe XD或Sketch
等,这些工具支持导入和创建复杂的矢量图形,并能够模拟各种动态效果。通过在这些工具中进行快速原型设计和迭代,设计师可以方便地测试和调整视觉元素,直到找到最适合用户和品牌的设计解决方案。
  总之,通过引入创新的视觉元素,设计师不仅可以
打破传统的界面设计局限
,还可以
推动用户体验向更加动态和互动的方向发展
。这种设计技巧要求设计师具备前瞻性的洞察力和扎实的设计技能,以便创造出既美观又实用的用户界面。在接下来的章节中,我们将探讨如何将这些创新的视觉元素与智能动效和微交互结合起来,进一步提升UI设计的吸引力。
2.智能动效与微交互
  在当今的UI设计中,智能动效(Smart Animations)和微交互(Microinteractions)已经成为提升用户体验不可或缺的元素。这些细微但至关重要的设计细节,不仅
使界面更加生动活泼,而且有效引导用户行为,增强应用程序的直观性和易用性
(1).智能动效
  智能动效
是指
根据用户的互动而触发的动画效果
,它能够提供视觉反馈,帮助用户理解他们的行为和应用程序的响应。例如,当用户点击一个按钮时,按钮可能会有颜色渐变或者扩大缩小的动画,这种动效
向用户确认了他们的操作已被系统识别和处理
。此外,智能动效也可以用来
引导用户的注意力
,如通过动画展示来突出重要的信息或者引导用户完成特定的任务流程。
blibili的三连动效
blibili的三连动效
 
(2).微交互
 
  微交互
则是一种细节层面的设计,它关注的是
用户在使用产品过程中的微小时刻
,例如TabBar底部导航栏的选中效果、滑动删除应用通知时的"嗖"的一声提示,或是设置定时器时旋转的拨轮声。这些看似不经心的设计实际上极大地
丰富了用户的体验
,让用户在使用过程中的每一个小步骤都
获得满足感和愉悦感
tabbar动效设计,可通过AE制作
tabbar动效设计,可通过AE制作
 
 (3).优秀案例解读
  为了更好地演示智能动效和微交互的实际应用,我们来看一个具体的案例分析。网易云音乐是一款音乐流媒体应用,我们可以在用户播放一首歌曲时加入一个
从封面图片过渡到播放器界面
的流畅动效,这不仅美观现代,还强化了用户的操作反馈。当用户进行歌曲切换时,唱片机上的
唱针通过拿起放下的动效表示切换唱片
,同时伴随着节奏的跳动,增强了听觉与视觉的联动。
网易云音乐的播放歌曲
网易云音乐的播放歌曲
 
  在微交互方面,如果用户将歌曲添加到收藏列表,有许多类似
心跳般的跳动动画
作为反馈,让用户感受到自己的选择得到了
系统的即时回应
,同时这个动效也可以根据用户的个人喜好进行选择,满足了用户的个性化需求。
网易云音乐的个性化收藏
网易云音乐的个性化收藏
 
  为了实现这些智能动效和微交互,设计师们通常需要掌握一定的动画制作技能,并熟悉如
After Effects、Principle
等动画制作工具。通过这些工具,设计师不仅可以创造复杂的动效,还能将这些动效导入到原型设计中,确保它们在实际应用场景中的可行性和效果。
  总结来说,
智能动效和微交互是提升UI设计吸引力的重要技巧
。它们不仅美化了界面,增加了乐趣,更重要的是提升了用户的实际使用体验。在接下来的章节中,我们将探讨如何利用材料设计和空间概念来进一步增强界面的层次感和深度感。
3.材料设计与空间概念
  在UI设计的世界中,材料设计(Material Design)是由
谷歌
推出的一套设计语言,
旨在通过使用阴影、动画和深度效果来模拟真实世界的材料和质感
。这种设计理念不仅使界面看起来更加直观和一致,而且通过引入空间概念,增强了用户的沉浸感和操作直觉性。
(1).材料设计
  首先,
材料设计
的核心在于其能够
创建一个具有层次感的界面
。设计师利用纸张隐喻来构建出一个可以触摸的虚拟世界,在这个世界中,
每一个元素都像是一张放置在桌面上的纸片
。通过使用
阴影和厚度
,这些纸张般的元素之间建立了明显的
层级关系
,让用户能够清晰地感知到哪些是可以互动的按钮或卡片,哪些是背景信息或次要元素。
将手机屏幕看作纸张,而UI设计师就是在二维平面上创造三维画作
将手机屏幕看作纸张,而UI设计师就是在二维平面上创造三维画作
 
(2).空间概念
  其次,
空间概念
在材料设计中同样至关重要。通过对
Z轴
的利用,设计师可以创造出
元素之间的前后关系
,使得一些元素看起来像是浮动在其他元素的上方或下方。例如,弹出菜单或抽屉式导航会出现在主界面之上,而幻灯片则可能在下方滑动进入视野。这样的设计不仅
增添了视觉上的趣味性
,也
使得用户更容易理解多维的导航结构
不同的界面元素对应不同的视觉层级
不同的界面元素对应不同的视觉层级
 
(3).优秀案例解读
  为了更好地演示材料设计和空间概念的应用,让我们来看一个案例。在
Airbnb爱彼迎
的搜索结果页面中,房源都
以卡片形式展现
,并且有
悬浮效果
,用户可以感受到元素之间的堆叠效果。而房东名片以书本形式展示在界面最上层,点击之后给用户带来
拿起展开信息的体验
。此外,房源图片的高质量和大尺寸也使得用户仿佛能触摸到实际空间,增强了
沉浸感
爱彼迎的搜索界面
爱彼迎的搜索界面
 
  实现这些效果,设计师通常需要掌握如
Sketch、Figma、Adobe XD
等现代UI设计工具,这些工具提供了必要的
组件和动效
支持来实现材料设计的规范。此外,它们也支持跨平台协作,确保设计在不同设备和操作系统中保持一致性和功能性。
  总的来说,材料设计和空间概念赋予了UI设计更多的
立体感和现实感
。通过恰当地运用这些技巧,设计师可以创造出既
美观又富有逻辑性
的用户界面,从而提升用户体验和满意度。在接下来的章节中,我们将深入探讨色彩与字体的新潮流以及它们如何影响用户的情感和行为。
3.色彩与字体的新潮流
  UI设计中,色彩和字体是
塑造品牌形象和传递信息
的关键要素。随着设计风格的不断演变,新的色彩配搭和字体设计趋势也在持续涌现,为设计师提供了更多的选择和创意空间。掌握这些新潮流不仅能够
使设计作品更具时代感
,而且可以深刻
影响用户的情感反应和行为模式
(1).色彩趋势
  新兴的
色彩趋势通
常反映在
年度流行的颜色
上,如
Pantone每年发布的年度色
等。这些流行色往往与文化趋势、社会情绪以及科技发展紧密相连。例如,一种温暖而包容的色彩可能反映了人们对和谐社区的向往,而一种鲜亮且活泼的色彩则可能是对日益增长的数字化生活的回应。在UI设计中运用这些流行色,可以
增强产品的时尚感和相关性
Pantone近四年的流行色
Pantone近四年的流行色
 
(2).字体设计
 
字体设计
同样重要,因为不同的
字体风格和排版
可以直接影响
信息的传达效果和用户的阅读体验
。最新的字体趋势可能包括
无衬线字体
的进一步简化、
手写字体
的个性化使用,或者是
动态字体
的出现,后者在不同的屏幕和设备上能够提供最佳可读性。此外,
响应式排版
也越来越受到重视,它允许字体大小和行距随屏幕尺寸的改变而调整,从而优化移动端和桌面端的阅读体验。
近年流行的字体风格和排版
近年流行的字体风格和排版
 
(3).优秀案例解读
  为了具体展示这些趋势的应用,我们来看一个案例。
QQ
是一款国内的主流社交媒体应用,它的消息界面选择了一种
明亮且具有活力的蓝色作为主题色
,这种颜色既能吸引
年轻用户
群体,又能与应用的
清新现代感
相契合。对于
字体
,用户可以
根据自己的喜好选择
一种简洁的无衬线字体来增强消息的清晰度,同时在用户发送的
个性化签名
中用户也可以选择一款有趣的手写风格字体,以
鼓励用户自我表达和个性化分享
QQ中字体、颜色、主题的应用
QQ中字体、颜色、主题的应用
 
  在实现这些设计时,设计师可以利用多种工具和技术,如
CSS变量和HTML5的@font-face
规则,以确保
色彩和字体的准确展现
和良好性能。此外,设计师还应该考虑到
多语言环境下字体的兼容性
,确保所有用户都能获得一致的体验。
  综上所述,色彩和字体在UI设计中的新潮流不仅
反映了文化的变迁和技术的发展
,而且对于提
升用户体验和满足审美需求
起到了关键作用。通过在设计中融入这些新趋势,设计师能够创造出既
富有表现力又易于使用的界面
。在接下来的章节中,我们将深入探讨如何将增强现实(AR)和虚拟现实(VR)技术融入UI设计中,为用户带来前所未有的交互体验。
5.增强现实(AR)与虚拟现实(VR)的融合
  随着技术的不断进步,
增强现实(AR)和虚拟现实(VR)
已经成为UI设计领域的新趋势,它们为用户提供了
沉浸式和互动式的体验
。这些技术
将现实世界和虚拟世界融合在一起
,创造出
全新的用户界面和交互方式
。在这篇文章的最后部分,我们将探讨如何将AR和VR技术融入UI设计中,以提供独特而前沿的用户体验。
AR与VR的区别
AR与VR的区别
 
(1).增强现实(AR)
  增强现实技术允许用户
在现实世界的环境中看到由计算机生成的图像
。在UI设计中,这意味着设计师可以
创建能够与现实世界相互作用的界面元素
。例如,得物利用了AR技术让用户在自己的家中就能试
穿衣服或鞋子
,从而
消除了线上购物与实体店购物之间的界限
。设计师需要确保这些虚拟对象与现实世界的环境相协调,同时提供直观的用户操作指南和提示。
得物的AR试穿功能
得物的AR试穿功能
 
(2).虚拟现实(VR)
  虚拟现实则创造了一个
完全由计算机生成的环境
,用户可以在其中进行沉浸式的体验。在UI设计中,这通常涉及到
创造一个360度的界面
,用户可以在其中环顾四周,并与之互动。例如,
网易瑶台
可以允许用户在家中就能
探索遥远的目的地
,或是通过虚拟现实体验提前
参观即将举办的活动场地
。其业务范围包括
私域元宇宙、数字文旅、营销活动、展览展厅、企业空间
等多种场景。设计师在这个领域面临的挑战是如何在不引起晕动症的前提下,提供流畅而引人入胜的体验。
网易瑶台的VR服务场景
网易瑶台的VR服务场景
 
(3).优秀案例解读
  为了具体展示AR和VR在UI设计中的应用,我们来看一个案例分析。
如视
是国内一家提供
AR/VR看房
技术的服务公司,其合作对象包括自如、贝壳、华住会、万科等。房地产应用的
目标用户是潜在的房屋买家
,加入AR技术来让用户
在自己的手机上查看房屋的内部布局和外观设计
。当用户指向特定的房屋模型时,屏幕上会显示房屋的实际外观,并允许用户通过手机摄像头在现实世界的背景下查看它。此外,用户还可以通过VR技术进行一次
虚拟参观
,就像亲自走在房屋内一样,从每个角度观察房间的布局和设计。
如视的AR看房功能
如视的AR看房功能
 
  实现这样的设计不仅需要对UI设计有深刻的理解,还需要掌握如
Unity3D、Unreal Engine
等高级开发工具,以及对于AR和VR硬件如
Oculus Rift
Microsoft HoloLens
的熟悉。设计师必须考虑到用户的物理运动和视线变化,以确保界面元素在不同的视角和情境下都能正确显示并提供反馈。
  总结来说,将AR和VR技术融入UI设计是一个
充满挑战但同样充满机遇的领域
。它要求设计师不仅要关注传统的设计原则,还要
对新技术有深入的了解和实验精神
。通过结合这些技术,设计师可以创造出前所未有的体验,将用户带入一个全新的互动维度。
写在最后
  在探索未来感UI设计的旅程中,我们共同穿越了五个关键技巧的门槛,它们分别是
创新的视觉元素运用、智能动效与微交互的精妙结合、材料设计与空间概念的深度利用、色彩与字体的新潮流引领,以及对增强现实(AR)与虚拟现实(VR)技术
的前沿融合。通过这些技巧,设计师们能够打造出不仅具有功能性,而且具有强烈吸引力和未来感的用户界面。
  随着技术的不断进步和用户需求的持续演变,UI设计的未来将继续展开新的可能性。设计师们需要
不断地学习、适应并实验最新的设计技巧和技术
,以确保他们的作品不仅与时俱进,更能引领潮流。在此过程中,设计师们将拓宽自己的创意视野,提高解决问题的能力,并最终为用户带来更加丰富、直观且愉悦的体验。
  这篇文章不仅是对现代UI设计技巧的全面概述,也是一个对未来设计趋势的期待和准备。让我们一起携手进入这个充满创造力和无限可能的设计新时代。
 


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

C端和B端UI设计价值有何差异

ui设计分享达人

 
你是否曾好奇,为什么C端设计师的作品总是那么酷炫吸睛,而B端设计师的界面却显得相对低调内敛?这两者之间,难道真的存在一条不可逾越的鸿沟,让C端设计师对B端设计师产生偏见?
 
C端设计,追求的是极致的用户体验和视觉震撼,每一个细节都力求完美,让人一眼就能被吸引。
而B端设计,更注重的是功能的完善和信息的清晰,它或许没有华丽的外观,但每一个功能、每一个布局都经过深思熟虑,确保用户能够高效、准确地完成工作。
 
今天,让我们一起走进设计圈,深度剖析C端与B端设计师在设计价值上的差异与碰撞!看看这两大阵营的设计师们是如何在各自的领域中发光发热,又是如何相互借鉴、共同进步的!
 
⭐️ 
PART 1
  ——————
UI设计师的价值在哪里?
干货!C端和B端UI设计价值有何差异?
 
 
UI(用户界面)设计师在现代数字产品和服务中的角色至关重要,他们的工作直接影响着用户体验和产品的成功。UI设计师的价值主要体现在以下几个方面:
 
1、用户价值:
· UI设计师创建直观且吸引人的界面,使用户能够轻松、高效地完成任务。
· 优秀的UI设计确保用户界面响应迅速,操作流畅,减少用户困惑和挫败感。
· 设计师通过深入了解用户需求和行为,优化用户体验,提高用户满意度和忠诚度。
 
2、商业价值:
· 优质的设计有助于提高产品的市场竞争力,吸引并留住用户,从而增加销售额和市场份额。
· 通过减少用户流失率和增加用户参与度,UI设计可以降低获客成本,提高转化率。
· 设计师的工作还涉及优化工作流程,提高内部效率,减少开发时间和成本。
 
3、项目价值:
· UI设计师在项目中扮演协调者的角色,确保视觉设计与产品目标、技术限制和用户需求保持一致。
· 他们促进跨团队合作,包括与产品经理、工程师、市场营销人员等协作,以实现共同的项目目标。
 
4、品牌价值:
· UI设计师通过一致的设计语言和视觉风格来塑造和强化品牌形象。
· 他们确保所有数字产品和服务传达出品牌的一致性和专业性,增强品牌的识别度和信誉。
 
5、创新价值:
· UI设计师推动设计趋势和技术的应用,创造新颖的交互模式和视觉效果,提升产品的新颖性和吸引力。
· 他们探索新的设计解决方案,以适应不断变化的技术环境和用户期望。
 
6、沟通价值:
· UI设计师能够清晰地向非设计背景的团队成员解释设计决策,确保所有人都对设计目标有共同的理解。
· 良好的沟通技巧有助于解决冲突,促进项目的顺利进行。
 
综上所述,UI设计师不仅提升了产品的外观和感觉,更重要的是,他们通过设计促进了用户与产品的有效互动,为企业创造了显著的价值。
 
⭐️ 
PART 2
  ——————
B端和C端的差异
干货!C端和B端UI设计价值有何差异?
 
 
什么是B端?什么是C端?
B端是business ,To B 全称“To Business”,即面向企业用户服务,在B端产品的设计中要符合商业组织的战略要求,能满足企业需求的产品,为企业服务,提升效率、降低成本等。例如:OA系统、FIR系统、财务系统、监控运维系统等。
干货!C端和B端UI设计价值有何差异?
 
 
C端是customer,To C 全称“To Consumer”,即面向大众消费者进行服务,主要为了满足大众的生活、娱乐、交流、出行、购物等等一些生活常见需求而产生的产品会承担引流和转化的任务。例如:滴滴、微信、小红书、微博等。
干货!C端和B端UI设计价值有何差异?
 
 
以KPI考核系统和淘宝应用为例,我们可以更直观地看到B端和C端设计价值的实际应用。
干货!C端和B端UI设计价值有何差异?
 
 
KPI考核系统
:提供清晰的绩效衡量标准,帮助组织对齐战略目标与日常运营,通过量化指标促进员工表现的优化,同时支持管理层作出基于数据的决策,增强资源分配的效率和效果。
 
这类后台产品严格意义都属于B端产品。还有最常见的后台产品就是微信公众平台、京东云、阿里云等内部的ERP系统了。
B端产品设计的重心在于提升企业的生产力和竞争力,强调功能的全面性、数据的安全性和系统的稳定性,通过持续的技术支持和服务,帮助企业实现业务目标。
干货!C端和B端UI设计价值有何差异?
 
 
淘宝:
通过精细化的界面设计和智能化的推荐算法,为用户提供了丰富多样的商品选择和个性化的购物体验,成为了中国电商领域的领军企业。
 
C端产品设计的核心是围绕用户需求和体验展开,追求与用户的深度连接,通过不断创新和优化,提供既实用又愉悦的使用体验。C端产品也有着充足的竞品可以进行对比分析,前行的相对平顺。
干货!C端和B端UI设计价值有何差异?
 
 
· B端重视功能轻体验:
设计师应深入了解企业的业务流程和需求,与企业用户保持紧密沟通。在设计过程中注重功能性和实用性的平衡,避免过度追求美观而忽略实际需求。
· C端重视体验轻功能:
设计师应关注用户的心理和行为特点,从用户的角度出发进行设计。注重用户体验和情感共鸣的营造,让用户在使用过程中感受到愉悦和满足。
 
无论是B端还是C端设计,设计师都应注重细节和品质的追求。通过不断学习和实践,提升自己的设计能力和专业素养,为用户带来更好的体验和价值。
 
⭐️ 
PART 3
  ——————
B端与C端的设计价值差异
干货!C端和B端UI设计价值有何差异?
 
 
1、目标用户群体:
· B端设计主要面向企业或组织中的专业用户,如企业员工、管理层或特定业务领域的专家。这些用户通常具有明确的业务目标和流程需求。
· C端设计则主要面向个人消费者,他们的需求更加多样化和个性化,关注产品的易用性、美观性和情感连接。
 
2、设计重点:
· B端设计更注重效率、功能和业务流程的整合。设计师需要深入了解企业的业务逻辑和用户需求,确保产品能够满足企业的核心业务需求,提高工作效率。
· C端设计则更注重用户体验、情感连接和品牌形象。设计师需要关注用户的情感需求和心理体验,通过设计元素和交互方式激发用户的积极情感,同时强化品牌形象和认知。
干货!C端和B端UI设计价值有何差异?
 
 
3、复杂性:
· B端产品往往涉及复杂的业务流程和大量的数据交互,设计师需要处理更多的界面元素和交互逻辑,确保产品在功能性和易用性之间达到平衡。
· C端产品则相对简单,更注重直观性和易用性。设计师需要确保用户能够轻松上手,快速完成目标操作。
 
4、个性化与定制化:
· B端设计通常需要考虑企业的定制化需求,根据企业的业务特点和流程进行个性化设计。设计师需要与企业保持密切沟通,确保设计方案能够满足企业的实际需求。
· C端设计虽然也注重个性化,但更多是通过提供多种选择或自定义选项来满足用户的个性化需求。设计师需要关注用户的偏好和习惯,提供符合用户期望的设计方案。
干货!C端和B端UI设计价值有何差异?
 
 
5、设计迭代与更新:
· B端产品通常需要根据企业的反馈和市场需求进行频繁的迭代和更新。设计师需要密切关注业务变化和用户反馈,及时调整设计方案以满足企业的需求。
· C端产品的迭代和更新则相对较慢,更多是基于市场趋势和用户需求进行逐步优化和改进。设计师需要关注市场变化和用户需求的变化,持续优化设计方案以提升用户体验。
 
6、商业价值:
· B端设计的商业价值主要体现在提高企业的工作效率、降低运营成本、增强业务竞争力等方面。设计师需要通过设计创新帮助企业实现业务目标,提升企业的商业价值。
· C端设计的商业价值则主要体现在提升用户体验、增强品牌认知度、促进销售等方面。设计师需要通过设计创新吸引和留住用户,促进产品的销售和品牌的发展。
 
⭐️ 
PART 4
  ——————
B端和C端设计价值的衡量方法
干货!C端和B端UI设计价值有何差异?
 
 
1、商业属性:
· 销售额:通过统计产品的销售额来衡量产品的市场占有率和收入增长率。
· 新客户数与续费率:新客户数反映了产品的市场吸引力,而续费率则反映了客户忠诚度。
· 客户流失率:客户流失率越低,说明产品设计在保持客户方面越成功。
 
2、工具属性:
· 用户活跃度:通过统计产品的日活、周活、月活等数据来衡量用户活跃度。
· 功能使用频次与渗透率:统计功能的使用频次和渗透率,以了解用户对功能的接受度和使用习惯。
· 稳定性和可靠性:通过统计产品的故障率、响应时间、修复时间等数据来衡量产品的稳定性和可靠性。
干货!C端和B端UI设计价值有何差异?
 
 
3、产品竞争力:
· 功能对比:对比产品与同类产品的功能点、功能优势、功能创新等,以衡量产品的差异化和竞争力。
· 核心数据指标对比:对比产品与同类产品的核心数据指标,如审批效率、审批质量、审批成本等,以衡量产品在业务上的优势和价值。
 
4、用户满意度:
· 用户反馈:收集和分析用户的反馈、评价、建议等,以衡量用户对产品的满意度。
· 用户留存率、转化率与推荐率:计算和分析用户的留存率、转化率、推荐率等数据,以衡量用户对产品的忠诚度和推广度。
干货!C端和B端UI设计价值有何差异?
 
 
1、用户体验:
· 可用性:评估产品是否易于使用、是否符合用户习惯、是否能够快速完成目标。
· 满意度:通过用户反馈、评价等方式了解用户对产品的满意度。
· 忠诚度:通过用户留存率、复购率等指标衡量用户对产品的忠诚度。
 
2、功能吸引力:
· 功能使用率:统计各功能的使用率,以了解用户对功能的偏好和需求。
· 功能创新:评估产品功能是否创新、是否具有市场竞争力。
干货!C端和B端UI设计价值有何差异?
 
 
3、市场表现:
· 下载量与注册量:通过统计产品的下载量和注册量来衡量产品的市场吸引力。
· 活跃用户数与用户粘性:统计产品的活跃用户数以及用户的使用时长和频率,以衡量用户粘性和活跃度。
 
4、商业收益:
· 付费转化率:对于收费产品,统计付费用户的转化率以衡量产品的盈利能力。
· 广告收入:对于依赖广告收入的产品,统计广告点击率和广告收入以衡量产品的商业价值。
 
综上所述,B端和C端设计价值的衡量方法都关注于产品的商业属性、工具属性(或用户体验)、产品竞争力以及用户满意度等方面。但在具体执行时,两者在侧重点和具体指标上可能存在差异。
 
⭐️ 
PART 5
  ——————
如何提升B端C端产品的设计价值
干货!C端和B端UI设计价值有何差异?
 
 
1、用户体验:
· 可用性:评估产品是否易于使用、是否符合用户习惯、是否能够快速完成目标。
· 满意度:通过用户反馈、评价等方式了解用户对产品的满意度。
· 忠诚度:通过用户留存率、复购率等指标衡量用户对产品的忠诚度。
 
2、功能吸引力:
· 功能使用率:统计各功能的使用率,以了解用户对功能的偏好和需求。
· 功能创新:评估产品功能是否创新、是否具有市场竞争力。
 
3、市场表现:
· 下载量与注册量:通过统计产品的下载量和注册量来衡量产品的市场吸引力。
· 活跃用户数与用户粘性:统计产品的活跃用户数以及用户的使用时长和频率,以衡量用户粘性和活跃度。
 
4、商业收益:
· 付费转化率:对于收费产品,统计付费用户的转化率以衡量产品的盈利能力。
· 广告收入:对于依赖广告收入的产品,统计广告点击率和广告收入以衡量产品的商业价值。
 
综上所述,B端和C端设计价值的衡量方法都关注于产品的商业属性、工具属性(或用户体验)、产品竞争力以及用户满意度等方面。但在具体执行时,两者在侧重点和具体指标上可能存在差异。
干货!C端和B端UI设计价值有何差异?
 
 
1、把握用户需求与痛点:
· 用户调研:通过用户调研了解用户的真实需求和痛点。
· 数据分析:利用数据分析工具挖掘用户的行为模式和使用习惯。
 
2、提升用户体验:
· 设计创新:采用时尚、有创意的设计风格,提升产品的吸引力。
· 交互优化:优化产品的交互设计,使其更加符合用户的使用习惯和心理预期。
 
3、提供个性化与社交化服务:
· 个性化推荐:基于用户的行为和偏好提供个性化的推荐服务,提供用户可定制的个性化内容和服务。
· 社交化服务:在产品中融入社交功能,增强用户的互动性和参与感,提升产品粘性和用户忠诚度。
 
4、注重产品易用性:
· 简洁明了:确保产品的功能和操作流程简洁明了,降低用户的学习成本。
· 快速响应:优化产品的响应速度,确保用户在使用产品时能够得到快速、准确的反馈。
 
综上所述,提升B端和C端产品的设计价值需要深入理解目标用户、使用场景、产品功能以及业务需求等多个方面。通过不断优化产品的功能、界面、交互以及服务等方面,提升用户的使用体验和满意度,从而增加产品的竞争力和市场价值。
 
⭐️ 
PART 6
  ——————
了解B端C端差异于设计工作的指导意义
干货!C端和B端UI设计价值有何差异?
 
 
1、明确设计目标:
· B端设计:设计目标通常与提高工作效率、优化业务流程、增强企业竞争力等相关。因此,设计师需要深入了解企业的业务需求和流程,确保设计能够为企业用户带来实际的价值。
· C端设计:设计目标通常与提升用户体验、满足个性化需求、增强用户粘性等相关。设计师需要关注用户的情感需求和使用习惯,通过设计吸引用户并保持用户的活跃度。
 
2、选择适当的设计风格:
· B端设计:通常采用专业、简洁的设计风格,注重信息的清晰度和界面的整洁度。设计师需要避免过于花哨的设计,确保用户能够高效地完成工作任务。
· C端设计:可以采用更加时尚、有创意的设计风格,注重色彩的搭配和动画效果,以吸引用户的注意力并提升用户的情感体验。
 
3、注重用户研究:
· B端设计:需要深入了解企业用户的业务需求和工作流程,与用户进行深入的交流和沟通,以确保设计能够满足用户的实际需求。
· C端设计:同样需要关注用户的研究,但更多地关注用户的个人喜好、使用习惯和情感需求,以便设计出更符合用户期望的产品。
 
4、优化交互体验:
· B端设计:需要注重界面的清晰度和功能的易用性,确保用户能够快速地找到所需的功能并完成工作任务。同时,设计师还需要考虑如何减少用户的操作步骤和降低学习成本。
· C端设计:同样需要优化交互体验,但更多地关注用户在使用过程中的情感体验和娱乐性。设计师可以通过有趣的动画效果、个性化的提示等方式来提升用户的满意度和忠诚度。
 
5、考虑盈利模式:
· B端设计:在设计过程中需要考虑产品的盈利模式,确保设计能够为企业带来实际的经济利益。设计师可以通过提供增值服务、定制服务等方式来增加产品的附加值。
· C端设计:虽然不直接涉及盈利模式的设计,但设计师需要关注如何通过设计吸引用户并保持用户的活跃度,从而为企业的盈利创造有利条件。
 
6、注重行业特性
· B端设计:具有明显的行业特性,设计师需要深入了解所服务行业的业务特点、竞争态势等,以便设计出更符合行业特点的产品。
· C端设计:虽然不直接受行业特性的限制,但设计师也需要关注不同用户群体的需求和偏好,以便设计出更具普适性的产品。
 
⭐️ 
PART 7
  ——————
B端开源组件分享
干货!C端和B端UI设计价值有何差异?
 
 
设计B端后台,必须搞清楚这些组件~
 如果组件库服务的是 B 端或者中后台系统,那其实有很多可参考的开源组件框架:Ant Design、ElemetUI、Layui 等,注意不同的框架用到的前端技术不一样,兼容的浏览器版本也不一样,这要根据你们技术情况做选择。如果觉得开源框架的风格和你们的产品不统一,那就需要二次设计和开发封装。
 
推荐几个官方组件库:
饿了么官方组件库:https://element.eleme.cn/#/zh-CN/component/installation
蚂蚁金服官方组件库:https://ant.design/docs/spec/introduce-cn
layui 官方组件库:https://www.layui.com/admin/std/dist/views/
阿里官方组件库:https://fusion.design/component/doc/102
iviewui官方组件库:https://www.iviewui.com/components/menu
 
做之前大家一定要去多去查看这些大厂做的已成型的开源组件库,然后再结合工作业务特色做出自己公司特有的定制化组件库。有了组件库之后,再接到紧急需求,我们就可以做到事半功倍的效果。先去分析页面的构成,然后花费 80% 的时间去设计需求中 20% 的页面,剩下的通用型页面就可以直接用组件库堆出来了。
 


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

 

 
 

如何用金字塔模型 打造高效的B端信息架构

ui设计分享达人

引言
在当今商业环境中,B端产品(Business-to-Business产品)的信息架构设计尤为关键。这些产品不仅服务于企业的日常运营,更是推动企业战略发展和数字化转型的核心动力。因此,如何构建一个清晰、高效的信息架构,以提升用户体验、优化工作流程、促进业务增长,成为了每一个B端产品设计者必须面对的问题。
金字塔模型作为一种经典的思维工具和结构框架,其在组织管理、市场策略等多个领域中的广泛应用已得到了普遍的认可。这一模型以其层级清晰、逻辑严密的特性,为我们理解和设计B端产品信息架构提供了新的视角和方法。
在B端产品信息架构设计中,金字塔模型的价值在于其能够帮助我们系统地梳理和呈现复杂的信息体系。通过将信息按照重要性、使用频率等因素进行分层,我们可以确保用户能够迅速找到所需信息,同时避免在海量数据中迷失方向。此外,金字塔模型还能够引导我们关注信息的内在逻辑和关联性,从而构建出更加合理、高效的信息结构。
因此,本文将深入探讨金字塔模型在B端产品信息架构设计中的运用,以期为设计师们提供有益的参考和启示。
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
一、B端产品信息架构概述
信息架构(information architecture)是指对某一特定内容里的信息进行统筹、规划、设计、安排等一系列有机处理的想法。
简单来说,对信息架构的理解可以拆分为“信息”和“架构”两部分。信息指的是内容的载体,常见的文字、图像等都是信息;架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织,然后呈现出来。其本质是研究信息的表达与传递。
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
B端产品信息架构是指在企业对企业(Business-to-Business,简称B2B)环境中,对产品或服务的信息进行结构化、系统化的组织和呈现的方式。这种信息架构不仅关乎产品的功能实现和用户体验,更是企业业务逻辑、数据管理和交互设计的核心体现。
在B端产品中,信息架构的重要性不言而喻。首先,它直接影响到用户的工作效率和满意度。一个清晰、合理的信息架构能够使用户快速找到所需信息,减少无效操作,提高工作效率。同时,良好的信息架构还能提升用户体验,增强用户对产品的黏性和忠诚度。
其次,信息架构也是企业业务逻辑和数据管理的重要载体。通过信息架构的设计,企业可以清晰地呈现业务流程、数据结构和关联关系,便于员工理解和操作。并且,信息架构还能帮助企业实现数据的统一管理和共享,提升数据利用效率。
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
然而,B端产品信息架构的设计也面临着诸多挑战。由于B端产品通常服务于复杂的业务场景和多样化的用户需求,信息架构需要具备高度的灵活性和可扩展性。此外,随着企业业务的不断发展和变化,信息架构也需要不断地迭代和优化,以适应新的需求和挑战。
为了应对这些挑战,B端产品信息架构的设计需要遵循一些基本原则:
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
综上所述,B端产品信息架构是B2B环境中产品设计和开发的重要组成部分。它关乎用户体验、业务逻辑和数据管理等多个方面,需要设计师具备深入的理解。在实际设计过程中,我们需要关注用户需求、保持信息的清晰和简洁、注重信息的可访问性和可搜索性,并考虑信息架构的可扩展性和可维护性。
 
二、金字塔模型的基本原理
金字塔模型是一种广泛应用于各种领域中的思维工具和结构框架,它的核心原理在于将复杂的信息或概念按照其重要性或逻辑层次进行分层,从而形成一个层级清晰、逻辑严密的体系。在B端产品信息架构设计中,金字塔模型同样具有极高的应用价值。
金字塔模型的基本原理可以概括为“逐层递进、逻辑清晰”。具体来说,它包含以下几个要点:
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
核心突出
:金字塔的底部宽广而坚实,代表着信息的广泛性和基础性。而在金字塔的顶端,则是最为核心和关键的信息,这部分信息通常是整个体系的核心驱动力,也是用户最为关注的部分。
层级分明
:金字塔模型中的信息被划分为不同的层级,每一层级都包含一定数量的信息点。这些层级之间按照逻辑关系和重要性进行排列,形成一个稳固的结构。用户可以从最基础的层级开始,逐层探索,最后理解整个信息体系的全貌。
逻辑严密
:在金字塔模型中,各个层级之间的信息都是相互关联、相互支持的。上一层级的信息是下一层级信息的基础和前提,而下一层级的信息则是对上一层级信息的具体化和深化。这种逻辑严密的结构使得整个信息体系更加稳定、可靠。
易于理解
:金字塔模型通过层级划分和逻辑关联,将复杂的信息体系简化为一个个相对独立但又相互关联的部分。这种结构使得用户更容易理解整个信息体系,也能够更快地找到所需的内容。
 
在B端产品信息架构设计中,金字塔模型可以帮助我们更好地梳理和呈现产品信息。通过将产品功能、数据、用户需求等信息按照重要性或逻辑层次进行分层,我们可以构建出一个清晰、高效的信息架构,从而提升用户体验和业务价值。同时,金字塔模型还可以帮助我们识别和解决信息架构中的潜在问题,如信息冗余、逻辑混乱等,确保整个信息体系的稳定性和可靠性。
 
三、金字塔模型在B端产品信息架构中的运用策略
在B端产品的信息架构设计中,金字塔模型提供了一个高效且结构化的框架,帮助设计师们更清晰地组织和展示产品内容。以下是金字塔模型在B端产品信息架构中的几个关键运用策略:
 
如何用金字塔模型 打造高效的B端信息架构
 
 
如何用金字塔模型 打造高效的B端信息架构
 
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
通过以上策略的运用,我们可以将金字塔模型有效地融入B端产品的信息架构设计中,构建出一个清晰、高效、易用的信息架构体系,从而提升用户体验和业务价值。
 
四、案例分析
阿里云和腾讯云作为行业内成熟的云服务提供商,为开发者提供丰富的产品、能力和解决方案,其云平台通过高效的信息架构,将海量业务进行整合,帮助用户快速定位目标。以下将结合金字塔模型,对两者进行分析。
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
五、挑战与应对策略
在运用金字塔模型构建B端产品信息架构的过程中,设计师和产品开发团队往往会面临一系列挑战。这些挑战可能来自于用户需求的多样性、技术实现的复杂性、以及市场竞争的激烈性等方面。为了克服这些挑战,需要采取一系列有效的应对策略。
 
挑战一:用户需求的多样性
B端产品的用户群体通常具有多样化的需求和背景,这使得在设计信息架构时需要充分考虑不同用户的需求和习惯。如果信息架构无法满足所有用户的需求,就可能导致用户体验不佳,进而影响产品的使用率和满意度。
应对策略
深入了解用户
:通过用户访谈、问卷调查等方式,深入了解目标用户群体的需求和习惯,确保信息架构能够满足大多数用户的需求。
提供个性化服务
:根据用户的角色、权限和使用习惯,提供个性化的服务和功能,以满足不同用户的特殊需求。
持续优化迭代
:根据用户反馈和数据分析,持续优化信息架构的设计,使其更加符合用户的期望和习惯。
 
如何用金字塔模型 打造高效的B端信息架构
 
 
 
挑战二:技术实现的复杂性
B端产品通常涉及到复杂的技术实现和系统集成,这使得在构建信息架构时需要充分考虑技术的可行性和稳定性。如果技术实现存在问题,就可能导致产品运行不稳定、性能低下等问题。
应对策略
选择合适的技术栈
:根据产品的需求和特点,选择合适的技术栈和框架,确保技术的可行性和稳定性。
加强技术测试
:在产品开发过程中,加强技术测试和验证,确保产品的稳定性和性能。
建立技术支持体系
:建立完善的技术支持体系,及时响应用户的技术问题和反馈,确保产品的正常运行。
 
挑战三:市场竞争的激烈性
在B端产品市场中,竞争对手众多,产品同质化严重。为了在激烈的市场竞争中脱颖而出,需要拿出有竞争力的设计方案,以平衡用户需求和业务需求的关系,并提升用户满意度。
应对策略
关注用户体验
:将用户体验作为设计的核心,通过优化界面设计、交互设计等方面,提升用户的使用体验和满意度。
加强品牌建设
:通过加强品牌建设和推广,提升产品的知名度和美誉度,吸引更多的潜在用户。
 
总结
本文深入探讨了金字塔模型在B端产品信息架构设计中的运用,通过阐述B端产品信息架构的重要性以及金字塔模型的基本原理,提出了将二者结合的具体策略,并讲解了实操案例。
信息架构作为一套系统的设计工具, 在日常工作中充斥着方方面面。我们通过理解金字塔原理并合理运用后,可以更好的满足用户需求,并在未来的设计之路上不断探索和创新。


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

 

 

AI产品体验设计拆解

ui设计分享达人

飞书 AI-产品体验设计拆解
 
 
收藏
飞书 AI-产品体验设计拆解
 
 
收藏
飞书 AI-产品体验设计拆解
 
 
收藏
飞书 AI-产品体验设计拆解
 
 
收藏
飞书 AI-产品体验设计拆解
 
 
收藏
飞书 AI-产品体验设计拆解
 
 
收藏
飞书 AI-产品体验设计拆解
 
 
收藏
飞书 AI-产品体验设计拆解
 
 


作者:肥宅的鱼
链接:https://www.zcool.com.cn/work/ZNjU2NDg1NjA=.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

向产品中注入人工智能的指南-总结20年的人工智能设计

ui设计分享达人

译者推荐 | 作为现在热门的 AI 交互,已经有不少文章进行了设计探讨。而在此篇,设计师总结了过去 20 年间 AI 设计的经验教训,总结出 18 个交互设计指南,为我们提供了设计原则,希望有所裨益。

 

 

 

Photo by Franck V. on Unsplash

 

如今,许多产品都具备了 AI 支持的一些功能。我们每天都在移动设备上以各种形式携带 AI 系统,例如活动跟踪器、邮件过滤器、自动完成和社交网络订阅广告。像 Siri、Google Home 和 Cortana 这样的虚拟助手帮助我们完成简单的任务。推荐系统会为我们建议在亚马逊上的下一次购买,并指引导我们进入下一个喜欢的 Netflix 系列。

 

AI 融合产品的性质

 

AI 融合产品的共同特征是,与其他系统不同,它们依赖于概率,因此涉及不确定性。AI 注入的产品本质上是不一致的,因为它们是随着时间的推移而学习的。它们也可能依据光线环境、环境噪声、人类口音和其他情况有不同的反应。这种不可预测性会让用户感到困惑,降低他们的信任,最终可能导致他们放弃产品。

 

 

AI 交互的设计指南


为了确保良好的设计,Amershi 及其同事推荐了一些人工智能交互指南。这些设计指南融合了该领域 20 多年的经验教训。他们从白皮书、评论、新闻文章、社论和学术论文中收集了 168 个设计建议,并将它们合成为以下 18 个指南。

 

DG1:明确系统可以做什么。

帮助用户了解 AI 系统的功能。例如,在处理用户数据时,对跟踪哪些数据以及如何跟踪数据保持透明。

 

DG2:明确系统能够做得如何。

帮助用户了解 AI 系统可能出错的频率。

 

 

 

 

DG3:基于环境的时间服务。

AI 系统应根据当前任务和环境考虑何时采取行动或何时中断用户。

 

DG4:显示相关信息。

显示与用户当前任务和环境相关的信息。

 

 

 

搜索电影标题 “Weathering With You” 将反馈相关的放映时间和地点。


DG5:符合相关的社会规范。

考虑到用户的社会和文化背景,提供期望的体验。例如,语音助手在与有孩子的家庭交谈时,应该注重用语的健康。


DG6:减轻社会偏见。

防止 AI 系统的语言和行为加强不良的刻板印象和偏见。


DG7:支持高效的调用。

简化向 AI 系统请求服务的方法。

 

 

 

用户可以直接说唤醒词 “Alexa” 开始与 Amazon Echo 互动


DG8:支持有效的忽略。

简化拒绝或忽略不需要的服务的方法。


DG9:支持有效的纠正。

简化编辑或在错误中恢复的方法。例如,通过语音助手设置提醒后,用户可以在手机上找到提醒并且手动编辑它。


DG10:服务范围有疑问时。

当不确定用户的目标时,参与消除歧义或委婉地削弱 AI 系统的服务。

 

 

 

 

自动填充提供可滚动的建议,而不是自动为用户填写单词。

 

DG11:明确系统为什么会这样做。

AI 系统的行为表现应该是透明的,向用户表面它为什么会这样做。

 

 

 

谷歌地图显示“最快路线”是选择特定路径的原因。

 

DG12:记住最近的交互。

保持短期记忆并允许用户有效地引用它。例如,搜索引擎应该基于先前的查询来理解后续查询的内容。

 

DG13:从用户行为中学习。

通过不断学习用户的行为,个性化用户体验。

 

DG14:谨慎更新和调整。

在更新和调整 AI 系统的行为时,不要有破坏性的更改。

 

 

 

 

当用户选择歌曲时,不要突然更新所有的热门推荐。保持顶部稳定并更新其余部分。

 

 

DG15:鼓励细化反馈。

使用户能够在与 AI 系统定期的互动期间提供指示其偏好的反馈。例如,如果AI 系统没有将电子邮件标记为重要的话,用户可以自己标记。

 

DG16:传达给用户行为的后果。

立即更新或传达给用户此操作将如何影响 AI 系统之后的行为。

 

 

 

Instagram 通知用户隐藏广告的操作将帮助他们改善广告未来的质量。

 

DG17:提供全局控制。

允许用户全局定制 AI 系统监控的内容及其行为方式。例如,用户能够打开和关闭位置共享。

 

DG18:通知用户有关更改的信息。

当 AI 系统添加或更新其功能时应该告知用户。例如,AI系统可以提供针对新功能的应用教程。

 

这些指南来自 Amershi 等人在 CHI 2019 年发表的人工智能交互指南。

 



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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

日历

链接

个人资料

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

存档