首页

除了Sora,这8大AI工具值得每个设计师和产品经理尝试!

博博 设计思维

 

 

近日,全球科技圈最火的热点非Sora莫属,它是OpenAI发布的首个文生视频模型Sora,其视频生成能力、效果呈现的成熟度震撼了全世界。有人说,这是视频生成领域的iPhone moment,AGI(通用人工智能)又向前划了一个时代。
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
Sora的使用非常简单,与ChatGPT一样,只需要输入合适的prompt(提示词),它就能跟根据文本指令创建视频。
此前也有一些AI生成视频工具,但大都只能生成10秒以内,还“卡成 PPT”,但 Sora 弯道超车,直接将时长拉到 60 秒。这个突破相当厉害,毕竟时间越长,内容越复杂,想表达准确把控好节奏难上加难。
Sora生成的视频画面截图 | 东京街头的时尚女性
Sora生成的视频画面截图 | 东京街头的时尚女性
Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象
Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象
更厉害的是,根据Sora技术报告的介绍,Sora不仅可以理解用户在提示中所要求的内容,还能理解这些内容在物理世界中的存在方式。因此,它生成的视频不仅逼真,还包含精细复杂的场景、生动的角色表情以及复杂的镜头运动。
Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影
Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影
不少人高呼影视行业变天了,明星即将失业,有网友甚至把美国电影工业的象征Hollywood(好莱坞)改成了这样:
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
其实,不止影视行业,包括教育、营销、互联网甚至所有行业都会或多或少受到影响。
作为在互联网浸润多年的“老油条”来说,笔者最近一直在思考,Sora等AI工具对我们究竟是机会还是挑战?个人认为,机会大于挑战。
比如,对产品经理和UX设计师来说,可以考虑怎么把Sora的能力用到自己的产品上去: 一款社区产品,可以通过Sora快速输出大量视频内容;
一款教育类产品,可以通过Sora生成定制化的教学视频;
一款新闻APP或者视频网站,可以利用Sora进行个性化推荐;
……
 
不过这一切的前提是,你必须掌握AI。
除了上述提到的AI生成视频工具Sora,笔者还总结了很多优秀的AI工具,这些工具能大大帮助我们提升工作效率,生成创意灵感,一起来看看吧~
 
1、小摹AI
小摹AI是一款集成了人工智能技术的产品设计工具,能够根据文本指令轻松生成可编辑的原型图,对产品经理来说可谓解放了生产力!
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
目前有智能原型、智能文本、智能图片、智能翻译和智能表格五大功能,能有效地提升设计效率,没有设计经验也能轻松上手哦。
1)智能原型:根据用户的描述,智能生成一张原型设计页面。
2)智能文本:根据用户的描述,智能生成一段文本内容,对写产品需求文档很有帮助。
3)智能翻译:有“画板翻译”和“输入内容”两项子功能,可以轻松地实现整页内容的翻译,也可以输入内容进行翻译。
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
价格:
现阶段可免费使用
推荐理由:
小摹AI界面简洁,上手非常容易,它最大的亮点是利用AI优化设计流程,快速实现从概念到原型的转变,大幅度提升了产品经理和设计师的工作效率!
推荐评级:
⭐⭐⭐⭐⭐
 
2、Galileo AI
Galileo AI也是一个AI设计工具,它能根据用户的输入智能创建UI设计,生成的界面清晰,间距、字体大小、图片使用等方面都不错。另外,它还有个非常实用的功能,你可以将生成的设计导出到你的 Figma 中继续编辑~
官网:https://www.usegalileo.ai/explore
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)即时设计生成:根据自然语言提示迅速生成复杂的UI设计。
2)AI生成的插图和图像:为设计添加AI生成的艺术元素,增强视觉吸引力。
3)完整的产品文案自动化:利用大型语言模型自动生成产品文案,节省设计师的时间和精力。
价格:
现阶段免费
推荐理由:
如果你想获得一些灵感,想看到一些新鲜的设计,真的可以试试这个工具。
推荐评级:
⭐⭐⭐⭐
 
3、Uizard
Uizard是一个基于Web的设计工具,用户可通过它的AI技术快速创建网站界面,还能快速将手绘草图转换为交互式原型,提高设计效率和创新能力。
官网:https://uizard.io/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)手绘转数字原型:将纸上的草图转换为数字界面原型。
2)用户界面自动化设计:基于用户输入自动生成设计元素和布局。
3)交互式原型创建:快速构建可交互的原型,用于用户测试和演示。
价格:
提供免费试用版本,付费版12美元/月起。
推荐理由:
Uizard是一款设计神器,它的AI功能,丰富的可复用模板和设计元素,能帮你节省大量时间。
推荐评级:
⭐⭐⭐⭐⭐
 
4、Whimsical
Whimsical是一款多功能的在线设计工具,它可以帮助用户完成思维导图、流程图、线框图的制作,成品逻辑清晰,层次分明,还能帮助设计师及时标记灵感,是一款万能的专业辅助设计工具。
官网:https://whimsical.com/home
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)上下文工具栏、可直接用于展示的输出、无限画布以及实时更新;
2)庞大的符号库工具帮助用户更好的完成设计操作;
3)Whimsical的AI功能可以快速生成图表,用以直观展示概念、思维导图和网页等内容。
价格:
提供免费版本,付费版10美元/月起。
推荐理由:
Whimsical是一款全能绘制工具,其中还有非常庞大的符号库工具,能帮助你更好更快地的完成设计。
推荐评级:
⭐⭐⭐⭐
 
5、Khroma AI
Khroma是一款利用人工智能技术来生成配色方案的工具,它能根据你的喜好和需求,提供高效、直观的配色解决方案,并创建无限的调色板让你尽情探索。
官网:https://www.khroma.co/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)AI生成配色方案:根据用户偏好和流行趋势自动生成配色方案。
2)自定义配色选项:允许用户根据自己的需求调整和优化配色。
3)保存和分享功能:用户可以保存自己的配色方案,并与他人分享。
价格:
提供免费版,进阶功能需付费订阅
推荐理由:
Khroma的深度学习算法很厉害,它能够学习用户的配色偏好,并根据流行趋势提供创新的配色方案。
推荐评级:⭐⭐⭐⭐
 
6、AI Colors
AI Colors是一个人工智能色彩调色板生成器,它可以根据你的描述生成贴心的配色方案,同时你也可以参考提供的配色案例,每一种配色方案都有对应的效果展示,让你能够快速找到想要自己的配色方案。
官网:https://aicolors.co/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)提供四种配图案例,分别是移动应用、仪表盘、落地页、作品集;
2)单击复制颜色或者直接导出配色方案,不喜欢的颜色还可以手动修改。
推荐理由:
通过AI Colors,你可以轻松生成调色板,并将其应用于产品界面,查看它们的配色效果,非常适合希望轻松掌握调色板的新手。
推荐评级:
⭐⭐⭐
 
7、Fontjoy
Fontjoy是一个帮助设计师选择最佳字体组合的工具,它可以让用户在一次点击中生成字体组合,还可以混合和匹配不同的字体,达到完美组合效果。
官网:https://fontjoy.com/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)帮助用户调整字体外观,还有字体的类型、大小、颜色等
2)丰富的字体资源:包括中文字体、英文字体、日文字体等;
推荐理由:
只需点击生成,就能看到不同的字体,让字体搭配毫不费力。
推荐评级:
⭐⭐⭐
 
8、Huemint
Huemint是一个内置AI色彩模型的在线配色网站,它通过AI技术帮助用户快速生成吸引人的配色方案,你还可通过调节滑块控制配色方案的对比度,适用于设计师和创意专业人士。
官网:https://huemint.com/brand-intersection/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)AI配色方案生成:根据用户输入和偏好,AI算法生成配色方案。
2)控制配色对比度:用户可以通过调节滑块来控制配色方案的对比度。
3)多样化的配色选项:支持生成等阶色、渐变色和2到11色的配色方案。
价格:
在线免费使用
推荐理由:
Huemint的AI色彩模型能够根据最新的设计趋势和用户偏好提供创新的配色方案,帮助设计师快速找到灵感,轻松提高设计效率。
推荐评级:⭐⭐⭐⭐
 
以上就是笔者的“掏心”分享了,希望读到这里的小伙伴能真正尝试用一下AI。毕竟,现在我们必将和AI一起成长同行,只有了解AI掌握AI才能不落后于时代,也让我们一起期待人工智能下一个“Sora”吧!


作者:摹客设计云
来源:站酷

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

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

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

标签设计的超全分析总结

博博 设计思维

在日常生活中,我们经常会给他人贴上标签。这些标签可能是基于个人特征、行为或经历而形成的,它们可以帮助我们更好地理解和分类他人。例如,当我们初次见到一个人时,我们可能会根据他们的外貌、穿着和言谈举止来给他们贴上一个“自信”、“开朗”或“胆小”、“内向”的标签。我们不可避免地会贴标签或被贴标签,因为这是一种快速且低门槛的有效记忆方式。
设计干货分享|标签设计的超全分析总结
关注不同平台的标签设计,发现平时不太注意的小标签承担了许多重要的作用。在电商类设计中,标签可以强化商品折扣、优惠信息、服务特色等吸引用户。对于偏向浏览和文章发布类产品,标签设计旨在方便读者更好地理解文章内容,平台还可以根据标签聚合同类文章,建立目录索引,引导读者快速查看标签文章。
看似简单的标签却有这么强的作用,以下将根据标签的定义、属性特征及使用场景作出一些思考和探索,帮助大家对标签有一个更清晰的认识。
 
目录:
一、标签的定义
二、标签的组成
三、标签设计的作用
四、标签设计要点
设计干货分享|标签设计的超全分析总结
百度百科对网络标签(Tag)定义是:
一种互联网内容组织方式,是相关性很强的关键字,它帮助人们轻松的描述和分类内容,以便于检索和分享,Tag已经成为web 2.0的重要元素。
 
Ant Design 对标签给出的定义是:用来进行标记和分类。使用场景:1.用于标记事物的属性和维度;2.进行分类。
TDesign对标签给出的定义是:用于表明主体的类目,属性或状态。
设计干货分享|标签设计的超全分析总结
所以标签是什么?
标签是结合产品内容及属性特征经提炼后产出的关键词,是信息的一种集合方式,便于用户查找、定位以及系统识别。
标签可以帮助传达信息、建立可预知操作、产品分类和营销引流、优化搜索等。通过使用标签,方便用户快速识别,提升信息转化的效率,在UI设计中,标签是最常用的设计组件之一。
设计干货分享|标签设计的超全分析总结
标签由容器、文本、图标等元素组成。
三者都是可选的,它们可以随机组合,常见的是这5种组合:文本、图标、容器+文本、容器+图标、容器+文本+图标。
设计干货分享|标签设计的超全分析总结
文本标签:
更直观地表达含义,主要用于抽象的、或分类较多的标签,这种类型标签通常也以#+文字的形式呈现为超链接,主要出现在文字内容较多的列表页面、详情页的开头或结尾。它们也可以被理解为常说的话题标签。通过这些标签,用户可以快速了解到内容的主题和核心,并能够方便地链接到与该内容相关联的信息。
 
图标标签:
更富有设计感且吸引眼球,但这种图标必须是用户熟识的、一看就明白含义的;
 
容器+文本标签:
主要为突出特色、卖点来进行促销,类型及样式比较多元化,且单个产品可能多达 4~5 个标签,以此来吸引用户购买。
 
图标+文本标签:
面积会较大,视觉冲击很强,有的出于交互功能的需要,有的则是用在节日和特别专题。
 
容器+文本+图标标签:
而图标则是为了进一步强调或补充标签文本的信息,增强用户的视觉感知。
设计干货分享|标签设计的超全分析总结
设计干货分享|标签设计的超全分析总结
 
01 标签的颜色
标签的颜色选择和搭配对于信息传递和品牌塑造具有重要影响。不同的颜色和用色的面积/重量会给用户带来不同的感知,比如,绿色代表清新、免费,黄色棕色代表尊贵VIP,红色象征火爆热门。同时也会对品牌形象产生影响。
  • 在白色背景下,我们可以自由地选择任何颜色作为标签的主体色、辅助色和点缀色。当面对同一组信息多个标签时,我们可以通过混合不同颜色来更好地区分它们。例如,我们可以将主要标签设置为红色,次要标签设置为蓝色,然后将它们组合在一起以形成一个更丰富的视觉层次结构。
设计干货分享|标签设计的超全分析总结
  • 在图片背景下,我们的选择受到了很大的限制。由于图片本身已经具有了丰富的颜色和纹理,因此我们需要谨慎选择标签的颜色以避免与图片产生冲突。通常情况下,我们会使用白色/黑色+不透明度或主体色作为标签容器,并将文字设置为黑色或反白处理以确保其可读性。
设计干货分享|标签设计的超全分析总结
总之,无论是白色背景还是图片背景都有其独特的优势和适用场景。在选择背景时应根据具体情况进行权衡并做出最佳决策。
 
02 标签形状
标签的形状设计在信息视觉传达中扮演着重要的角色,不同的形状代表着不同的信息特性和情感色彩。常用的标签形状有圆形、矩形(半圆角、全圆角)、气泡或异形等。
设计干货分享|标签设计的超全分析总结
形状是标签信息传递中的视觉轮廓表现,它作为承载信息的容器,对文字元素的包容性极强,能够使标签信息更加聚焦,让用户在获取内容和进行信息归类时更加专注。
设计干货分享|标签设计的超全分析总结
 
在UI设计中,标签的特征跟生活中的标签也很相似,用以标注内容分类或内容要点,方便用户快速定位自己需要的内容目标。 标签还有满足用户的隐形需求的作用,当用户在犹豫是否要进行下一步操作的时候,标签在一定程度上加强了用户的需求欲望,促进下一步操作。那标签到底有什么作用?
01
传达信息,突出产品特色
 
标签的基本功能是分类和突出内容要点,以方便用户快速定位他们需要的信息或功能。标签常用于传达产品基本信息、折扣信息、优惠信息、产品卖点等。对产品而言,它能优化信息层级,又能简单明确地传达产品特点;对用户而言,可以第一时间获取关键信息,降低用户阅读门槛,所以标签的首要任务就是为满足用户的隐性需求而传达特色信息。
例如,美团天天神劵、折扣信息等,淘宝里的直降低多少钱、同款低价,让用户潜意识地认为能够降低经济成本。
设计干货分享|标签设计的超全分析总结
02
引导用户操作,建立用户操作的预期
 
标签还可以用于建立用户操作的预期,让用户在使用产品之前就知道点击后可能发生的效果,从而增加用户点击的兴趣和满意度。
 
例如:音频标签、视频标签“独播”、“vip”等,让用户在点击前预知点击后的效果。标签还可以用作行为引导,告知某操作的结果,如淘宝里“常逛的店”,让用户提前知悉操作之后得到的结果,加强点击的动机。
设计干货分享|标签设计的超全分析总结
03 传递品牌与可靠性
品牌性质的标签,让消费者对产品产生信任感。同时,标签也是品牌与消费者之间的沟通桥梁,通过简洁明了的文字和视觉元素,传达产品的特点和优势。
 
例如如:“百亿补贴”、“官方店”、“品牌”。许多用户在浏览列表时,会通过标签快速判断是否有必要点击查看详情。此外,标签内展示强公信力的信息(榜单排名/评分等),可以加强内容可靠性及优质性。
设计干货分享|标签设计的超全分析总结
04
方便分类
标签广泛用于用户区分产品内容,进行分类,进而确定关键词,优化搜索。避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。
例如:京东水果蔬菜“时令热卖”标签和淘宝里的评价标签,用户可选择自己感兴趣的标签去查找自己想要的信息,提高浏览效率,节约时间成本。
设计干货分享|标签设计的超全分析总结
05
营销引流
 
为用户打上不同的标签,用于区分不同用户群体,分类精准定向推送产品。标签既能突出产品特色信息、又不会占用太多空间,所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。
如:小红书文末的文字标签、淘宝搜索的“探索发现”
设计干货分享|标签设计的超全分析总结
05
从众心理引导转化
 
在营销中,利用从众心理可以引导用户做出购买决策,这类信息广泛应用在标签设计中,积极引导用户点击和转化。
例如,可以展示其他用户的购买记录或评价,让用户看到其他人对该产品的认可和好评,从而增加他们的信任感和购买欲望。像淘宝里的“多少人回购”,银行理财里的“多少人次购买”等等,都会对当前用户的心理产生极大影响,很多时候,用户的想法和行为受到周围人的影响程度,往往超过理性的认知。 当用户无法决策时,从众心理会成为影响用户决策的重要因素。
设计干货分享|标签设计的超全分析总结
06 告知状态
当内容状态变化且产品希望提示用户知悉时,标签可以作为告知当前状态的提示,如上新的“New”、“直播中”等。
此外,告知当前状态还有营造稀缺性的作用。如“限购多少件”、“即将售罄”,促使用快速决策。
设计干货分享|标签设计的超全分析总结
 
07 营造氛围
标签不仅仅是产品信息的载体,更是营造氛围的重要元素。通过选择适合的色彩、字体和图案,标签可以传达出不同的情感和氛围,吸引消费者的注意力,激发购买欲望。
 
例如:“38换新节”、“上新啦”,有的产品确实是基于热度展示的标签,也有的产品只是为了吸引用户注意力而展示。
设计干货分享|标签设计的超全分析总结
 
 
设计干货分享|标签设计的超全分析总结
在UI设计中,标签是一个不可或缺的元素,那如何设计才能达成业务目标?
01 简洁明了
标签设计的文案(字段)长短尽量简短清晰,具有一定的识别性、易通性,避免使用复杂的词汇和句子。用户在浏览界面时,应该能够快速理解标签的含义。这里所说的精炼并非一味地求短,虽然“短”是标签必备的因素,但有时候过于简短的标签根本没办法给用户传达足够的信息,甚至会导致用户更加疑惑,这也失去了添加标签的初衷。
 
02 一致性与差异性
在不同的页面和场景中,标签的设计应该保持一致的风格和格式。这包括颜色、字体、大小、布局和位置等方面的一致性。这样做有助于用户建立认知模型,提高他们的使用效率。然而,尽管标签设计需要保持一致性,但也需要一定的差异性。这种差异性是针对不同类型和视觉权重的标签,通过不同的视觉样式和色彩来体现信息的层级关系。因此,虽然表面上看起来存在冲突,但实际上并不矛盾。
 
03适当的颜色
标签的颜色应该与背景颜色形成对比,以便用户能够清楚地看到。同时,颜色的选择也应该考虑到品牌的形象和用户的视觉感受。
 
04 适当的位置
标签的位置应该方便用户操作。例如,重要的标签应该放在显眼的位置,而不太重要的标签信息可以放在次要的位置。
 
结语
UI 设计中的标签跟我们日常生活中的标签很相似,它不仅能对产品作分类、特色标记,还能在用户犹豫不决的时候起到一定的推动作用,是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。根据产品的目的和需求,在不同时间和场景下使用合适的标签是至关重要的。通过简单精炼的表达方式,标签能够在有限的空间内提供更多的信息维度,吸引用户的注意并激发他们的好奇心、提升信息转化的效率。
 
作者:满满滴滴
来源:站酷

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

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

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

 

教你一文读懂暗色模式

分享达人 设计思维

暗色模式(Dark Mode)的兴起是一个逐渐发展的过程,它涉及到技术进步、用户体验优化以及设计趋势的变化。
  随着iOS 13在2019年的发布,暗色模式开始成为用户关注的焦点;在用户体验方面,设计者们考虑到了环境光线与屏幕亮度的匹配问题,暗色模式可以有效减少视觉疲劳;在实际使用中,用户发现暗色模式在光线较暗的环境中更为舒适,这也促使了暗色模式的普及和发展。

暗色模式的优势

博博 B端界面设计文章及欣赏

一、用户体验层面
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界面
 
 


作者:阿琳01
来源:站酷

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

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

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

暗色模式的基本概念和发展历程

博博 B端界面设计文章及欣赏

一、定义及其在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


作者:阿琳01
来源:站酷

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

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

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

深度剖析|瓷片区设计指南

博博 B端界面设计文章及欣赏

瓷片区是我们设计师在平时的APP设计中经常遇到的设计需求,虽然只是界面中一块较小的区域,设计看似简单,但它涵盖了用户研究、设计心理、UI设计等多个设计知识点。瓷片区对于产品的推广、品牌的传播等也具有着重要的作用。我通过工作中的一些设计心得进行总结沉淀形成此篇设计指南,从多个维度探讨剖析瓷片区的设计方法,希望能够协助设计师更好的规划设计产品,增强用户的满意度和粘性,为用户带来更为舒适流畅的实用体验。文章若有不妥之处,还望共同交流指正。
 
前言
深度剖析|瓷片区设计指南
 
此篇文章通过讲解关于瓷片区的一些认知以及设计手法的设计指南,来帮助大家更好的理解瓷片区设计的重要性和应用方法。作为产品设计过程中的考虑因素和规则不是一成不变的,希望在未来的设计中能够有更多的方法和技巧指引设计师们完成更好更优秀的设计作品。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
瓷片区是APP应用设计中经常出现的一款引导型组件模块,主要在首页主推内容区进行展示,和Banner区、金刚区并行三大运营板块,其权重较Banner区和金刚区略低,一般放在两者之下。瓷片区从外观上看就像是一块块瓷片一样组合“贴”在页面中,构成一组排列在一起的运营广告位,故统称为“瓷片区”。例如京东商城、美团、携程服务、个人中心等产品都含有瓷片区。
瓷片区可以在一个页面区域内划分出不同的组合,且每个区域内会包含产品主体视觉元素(图片)、标题、介绍文案、标签和背景等信息。瓷片区和banner作用较相似,但相较Banner区和金刚区使用更加灵活,应用场景较多。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
瓷片区本质上就是运营内容区,它更接近于一个功能模块的外部固定广告位。它的展示内容虽然会随着时间场景变化,但是代表的功能模块是保持不变的,每个瓷片就是这个功能模块的窗口,引导用户进入对应功能模块中。瓷片区不仅较多在电商场景应用中,还可能出现在其他所有应用类型中。例如旅游、金融、娱乐生活等多类产品,但在工具类产品中却不太适用。
1.金融类
金融产品如银行应用、投资平台等,往往包含复杂的服务和功能。此类APP中的瓷片区可用于展示金融产品、投资理财建议等。通过专业的图表、数据和解析,运用图形化的方式简洁明了地传达信息,帮助用户帮助用户快速理解产品特点,更好地了解市场动态,从而做出更明智的投资决策。
2.生活服务类
在生活服务类APP中,瓷片区可以展示各类服务入口,如美食、旅游、休闲娱乐等。通过直观的布局、明确的分类以及醒目的图片,吸引用户进行探索和预订,帮助用户快速找到所需服务,提升用户体验。同时根据用户的浏览记录和购买历史,推荐相关的商品或服务。或者根据用户的地理位置和时间信息,推荐附近的餐厅、景点等,通过个性化的推荐方式能够提升用户的满意度和粘性。
3.新闻资讯类
新闻资讯类APP中的瓷片区可用于展示热门新闻、重要事件或专题报道。通过及时更新内容,瓷片区可以帮助用户快速获取最新信息,同时提高用户对APP的依赖度和使用频率。
4.虚拟类
对于软件、游戏或数字内容等虚拟产品,瓷片区能够通过创意插画或图形,增加产品的调性和趣味性,提升用户体验。
5.设计类
设计相关的应用或平台使用瓷片区也可以展示设计作品、设计理念或者设计工具等,通过视觉艺术吸引目标用户群体。
6.电商或商城类
在电商类APP中,瓷片区常被用于展示热门商品、促销活动等,通过精美的高质量产品图片展示和吸引人的文案,直接影响用户的点击率和购买意愿,从而促成交易。
深度剖析|瓷片区设计指南
深度剖析|瓷片区设计指南
 
深度剖析|瓷片区设计指南
 
瓷片区类似于一种产品服务展示,是主要负责流量导流功能,吸引用户注意力,帮助业务推广产品。瓷片区一般都位于用户最容易点击的区域,方便引导用户点击进入,使用户更容易寻找自己所需产品。在现如今的产品设计中,瓷片区具有着十分重要的作用和意义。
1.流量引导与转化
瓷片区是APP设计中不可或缺的组件,它是流量的入口和转化点。通过精心设计的瓷片区,可以有效地吸引用户的注意力,引导他们点击并深入了解相关的内容或功能。这有助于提升用户的参与度,同时增加APP内特定内容或服务的曝光率,从而促进流量的转化。
2.引导用户注意力
瓷片区通过展示商品图、代言人等视觉元素,有效吸引用户的注意力,起到引导用户点击和进一步探索的作用。
3.个性化推荐与用户体验
瓷片区通常也具备个性化推荐的功能,可以根据用户的兴趣和行为习惯,展示符合他们需求的内容。这种个性化的推荐方式不仅可以提高用户的满意度,还能增强用户对APP应用的黏性。同时,通过优化瓷片区的交互设计和视觉呈现,可以提升用户的使用体验,使其更加便捷、舒适地浏览和选择内容。
4.提升转化率
由于瓷片区能够集中展示多个促销信息或功能模块,它通常具有较高的转化率,这对于提升用户的购买行为或参与度是非常有利的。
5.增加产品留存率
良好的瓷片区设计能够提升用户的使用体验,从而提高整个产品的留存率。
6.业务推广与品牌展示
瓷片区是进行业务推广和品牌展示的重要场所。设计瓷片区往往会考虑到美观性和艺术性,这有助于提升产品的整体视觉效果,增强用户对品牌的良好印象。通过出色的视觉展示核心产品或服务,帮助企业有效地传达品牌形象和价值,吸引潜在用户的关注。同时,结合特定的营销活动或促销策略,瓷片区还可以提升用户的购买意愿,促进业务的发展。
7.数据收集与优化
瓷片区的设计和实施还涉及到大量的数据收集和分析工作。通过对用户点击、浏览等行为的追踪和分析,可以了解用户的偏好和需求,为后续的优化工作提供数据支持。这有助于APP不断改进和完善瓷片区的功能和表现,提升整体的用户体验和效果。
深度剖析|瓷片区设计指南
在众多产品中,通过瓷片区的设计能增加对商品、功能的曝光,使用户群更愿意去购买或了解感兴趣的商品、功能。设计师根据瓷片区导流入口-落地页-转化率设计,通过整个流程中收集数据,提升优化设计体验,实现设计价值。
深度剖析|瓷片区设计指南
瓷片区是在一个APP中将一块矩形区域内划分出不同的矩形组合,每个二级矩形内一般会包含标题、介绍文字、主体视觉元素、标签等信息,通过摆放推广相关的内容吸引用户点击进入。
1.瓷片区是具有营销性的功能区域
瓷片区在设计层面上是具体的运营模块,而不是一种单纯的设计形式。瓷片区是对于存在的产品进行流量扩充,是提高产品点击率,是产品存在后方便调整流量使用。下图中遮照区域是产品的核心功能区,不是简单的营销入口,不能被删除,否则会影响用户使用。
深度剖析|瓷片区设计指南
2.瓷片区是静态固定的区域模块
APP软件中常出现功能列表页,它是后台获取数据的入口,是一种整齐排列,一层层叠加的片区,可以以一个单独模块的形式出现,不是像瓷片区类似贴瓷砖组合呈现。在没有产品展示的情况下瓷片区可以显示空状态,区域整体拼接结构不变,以静态固定状态显示。下图中页面本身为功能列表,模块性质本身不属于营销性质。
深度剖析|瓷片区设计指南
3.瓷片区不是金刚区
瓷片区不是设计形式,它的拼接表现形式不是只限定于瓷片区可以用,在任何其他位置和模块都可以采用这种样式进行设计。瓷片区的功能权重较金刚区略低,金刚区较多的为产品核心功能入口,而瓷片区多为运营活动的营销导流入口。
深度剖析|瓷片区设计指南
4.瓷片区不是快速入口
我们经常会看到一些快速入口会像瓷片区一样做成卡片拼贴的样式,但不管样式如何改变,瓷片区和快速入口在内容承载上有着本质的区别。
瓷片区有较强的诱导性,通过展示的信息元素、图片,如商品图片、产品代言人,来诱发用户关注并点击,在删除后不会影响产品的正常使用。快速入口它主要应对的是用户的主动行为,通过把功能入口密集的罗列出来方便用户进行查找和点击。它主要以展示主题入口相关图形为主,可以是图标也可以是图片、图形 ,如果删除会影响产品使用。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
在瓷片区设计中,一般常见的类型分为3种:实物照片类、插画类、淘宝电商类
1.实物照片类
优点:识别度高,不需要明确的文案标注,图片代入感强,带有图片本身属性的名称和样貌、可复用性强,设计效率较高。
缺点:对图片素材要求高,图片显示有细节。
场景:对实物图需求较大的应用产品类型,如外卖、家居、服装、旅游等产品使用较多。
深度剖析|瓷片区设计指南
 
 
2.插画类
优点:可高度描述瓷片区的运营意义,精美的插画有助于提升细腻性,产品的细节品质和趣味,插画本身色彩明度低饱和度高,图形表现活跃,风格可控。
缺点:偏抽象的产品,没有合适的实图可替代,此类产品多以插画的形式去表现。矢量插画类页面对周围环境,所表现的内容需要进行一对一绘制,需要高度的概括主题的图形。由于针对属性比较强,所以难以复用。同时图形构图绘制时间较长,时间成本较高,绘制时需要特别注意对关键信息的提炼以及识别度。
场景:对设计风格有明显要求,如金融、理财、教育、生活等产品。
深度剖析|瓷片区设计指南
 
3.淘宝电商类
优点:根据用户反馈数据提供高频输送内容,与浏览数据时时对应,符合用户心智,转化率更高。
缺点:通过大数据真实反馈内容推动产品营销,每个产品单独以个性化形式展示,其他商家产品难以复制,具有技术实现难度。
场景:对设计千变万化,定制多样,常用产品为电商类等。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
在进行瓷片区设计时,我们往往需要投入更多的精力进行细致化设计。而瓷片区究竟是由哪些元素组成呢?
背景、图片、文字是瓷片区主要构成元素,其中也可以运用插画、图标、标签、装饰等进行搭配使用,作为设计延展元素。背景、图片、文字在瓷片区一般必须出现,他们是对产品展现、描述或对营销目标表达的关键因素,插画、图标、标签、装饰等可根据设计风格、饱满度、产品需求上加以使用,丰富视觉,突出特殊标识。
深度剖析|瓷片区设计指南
 
 
深度剖析|瓷片区设计指南
 
 
瓷片区是一个需要视觉比较突出的组件,拥有较强的视觉感才能起到引导用户点击的效果。如何设计好瓷片区,从了解瓷片区各个元素设计开始。
1.框架布局
要了解瓷片区的设计方法,要先了解瓷片区的布局。在整个产品组件区域内,需要有效分配空间给不同的瓷片。首先在前期设计中,要优先确定瓷片区框架的四周内边距,然后再根据要放置的瓷片数量和重要性进行合理分配,一般可将模块拆分出 2*2、3*2、4*2、4*1的基本网格系统。
深度剖析|瓷片区设计指南
如果各个模块的重要性不同,可以将多个小瓷片按照纵向或横向排列合并为一个大瓷片,或将大瓷片拆分成多个小瓷片,以瓷片区域的大小来形成视觉权重的区分。
深度剖析|瓷片区设计指南
 
布局的结构的划分是整个瓷片区设计的主体,除了以上常用的最基本构图方法外,还有很多不同的瓷片分布方式,要通过不断的积累实验发挥自身创新能力,设计出更丰富的瓷片区展示形式。
2.元素排版
单个瓷片区内的元素一般由背景、文字、图片/图标/标签/装饰构成。常见的排版方式一般有左右排版、上下排版、对角线排版、Z字型排版这四种通用的排版形式。
(1)左右排版
一般在配图为图片、图标时适用,一般一行显示一块或两块瓷片。
深度剖析|瓷片区设计指南
(2)上下排版
采用上文下图的形式,一般在界面的功能入口较多时适用,一般一行显示不少于3块瓷片。这种元素排版,在营销型展示上一般为上图下文,偏功能型的展示则为上文下图。
深度剖析|瓷片区设计指南
 
 


作者:七色荧火
来源:站酷

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

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

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

详解国内外十大设计系统(上)

博博 B端界面设计文章及欣赏

一、腾讯 — TDesign企业级设计体系
详解国内外十大设计系统
TDesign设计系统是由腾讯内部近300名设计师与开发者共同打造的一套完整的企业级设计体系。该系统旨在为企业级应用提供全面、高效的设计解决方案,助力产品经理、设计师和开发者实现产品设计和开发的一致性。
 
TDesign设计系统拥有一致的设计语言和视觉风格,确保了不同界面元素之间的和谐统一。同时,它提供了基于Vue、React、小程序等业界主流技术栈的组件库解决方案,可以构建设计统一、多端覆盖、跨技术栈的企业级前端应用。这些组件库包括桌面端和移动端两套风格统一的组件资源,能够满足不同平台和应用场景的需求。
 
除了组件库,TDesign设计系统还提供了丰富的行业组件。这些组件是基于统一的设计体系,由腾讯多个业务团队共同开发,并提供了多个垂直领域的行业组件库产品。这些组件经过精心设计和测试,能够满足不同业务场景的需求,并提升产品的用户体验。
详解国内外十大设计系统
 
 
 
二、King Design 设计系统
详解国内外十大设计系统
King Design设计系统是由金山云推出的一套企业级设计解决方案。它致力于为企业级产品提供高效、统一和灵活的设计体验。该系统具有一系列显著的特征,使得它能够满足跨平台、多设备操作系统的统一用户体验需求。
 
 
三、Ant Design 设计系统
详解国内外十大设计系统
Ant Design,出自阿里巴巴集团旗下蚂蚁金服之手,是一款全面而通用的设计系统。它旨在为设计师和开发人员提供广泛的用户界面组件、设计指南和工具,以助力团队迅速、轻松地创造出高品质的设计。
详解国内外十大设计系统
总的来说,Ant Design设计系统以其简洁美观的设计风格、丰富的组件库、基于React的开发优势、规则化的视觉样式配置以及TypeScript支持等特征,为前端开发者提供了强大且灵活的设计解决方案。这些特征共同使得Ant Design在前端开发领域具有广泛的应用和认可。
 
 
四、Atlassian设计系统
详解国内外十大设计系统
Atlassian设计系统具有几个显著的特征,这些特征使得它能够在全球范围内为数百万客户提供出色的设计解决方案。以下是Atlassian设计系统的主要特征:
详解国内外十大设计系统
Atlassian设计系统以其革命性的颜色方案、丰富的设计资源、可重用组件、直观的界面以及强调交互和用户体验等特征,为设计师和开发者提供了一个强大的工具平台,帮助他们创造出卓越的产品和体验。
 
 
五、IBM-碳设计系统
详解国内外十大设计系统
IBM碳设计系统是一个综合性的设计平台,旨在为IBM的产品和服务提供一致且高效的设计解决方案。该系统强调以用户为中心的设计理念,注重用户体验和界面美观性的平衡。
 
在IBM碳设计系统中,设计元素和组件都经过精心设计和优化,以确保它们在不同场景和平台下都能提供出色的用户体验。这些组件包括按钮、表单、导航栏、图标等,它们都具有高度的可定制性和可扩展性,以满足不同项目的需求。
详解国内外十大设计系统
 


作者:墨一影
来源:站酷

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

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

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

设计目标、策略、方法、指标的区别与关系

博博 设计思维

 
设计是一种创造性的过程,它涉及到对问题的思考、分析和解决。一个优秀解决方案的产出离不开缜密、科学的策略制定和方法运用,这些概念在实际工作中往往存在模糊界限,本文将探讨这些概念定义、区别、关系以及实际作用。
 
一、概念区分
1、设计目标
设计目标是指设计团队对计划中将要完成的设计工作期望达成的结果的简化描述 。它能够对整体设计工作起到指引作用,即以目标为导向,所有的工作都需朝着完成指定目标而执行。
设计目标、策略、方法、指标的区别与关系
设计目标的核心重点在于结果。在设计过程中,制定清晰、可量化的目标是至关重要的。首先,设计目标需要明确地表达出设计团队希望实现的结果。这有助于项目团队成员理解并共享共同的目标,从而确保整个团队朝着同一个方向努力。同时,设计目标也能够为项目提供明确的指导和方向,帮助团队在实施过程中做出正确的决策。
设计目标、策略、方法、指标的区别与关系
其次,设计目标需要与业务需求紧密对接。在接收到业务需求后,设计团队应该仔细分析需求,并将其转化为具体的设计目标。
设计目标需要承接需求目标,是需求目标的初步具象化呈现,这些目标应该是切实可行且可见的,能够将抽象的需求转化为实际的设计方案所达到的结果。通过这种方式,设计团队可以确保他们的工作目标与业务需求目标保持一致,并且能够满足用户的期望。
设计目标、策略、方法、指标的区别与关系
 
 
此外,设计目标还需要具备可执行性和可量化性。否则,所制定的设计目标将只是空泛的概念吹嘘,无法落地呈现的虚伪目标。没有目标的设计是难以带来实际价值的盲目执行,不仅耗费资源,还容易犯下难以预估的错误。即使是探索性方案也需要有明确的目标,将要达成什么结果或是验证什么结果,否则一切方案都会难以执行。这意味着设计团队需要确定如何衡量目标的达成程度,并且制定相应的行动计划来实现这些目标。例如,一个设计目标可以是提高产品的用户体验,那么团队可以制定一系列的改进措施,并通过用户调研和数据分析来评估改进的效果。这样,团队可以不断优化设计方案,以确保最终达到预期的目标。
设计目标、策略、方法、指标的区别与关系
 
 
最后,设计目标的清晰性和可量化性对于项目的评估和决策也非常重要。当设计方案完成后,团队需要对其进行评估和审查,以确保能够达到预期的目标。如果目标模糊或不可量化,那么评估过程将变得困难,并且难以做出准确的决策。因此,制定清晰、可量化的设计目标是确保项目成功的关键之一。
设计目标、策略、方法、指标的区别与关系
2、设计原则
原则一词在我们的生活和工作中扮演着重要的角色。我们经常听到人们说,做人要有原则,做事要有原则。然而,尽管原则的重要性不言而喻,但具体来说,原则指的是什么?这个概念似乎很难被清晰地描述,我们脑海中的理解也相当模糊。尽管如此,我们都知道原则是某种不能逾越的底线。
设计目标、策略、方法、指标的区别与关系
原则通常指的是我们在言行中所遵循的准则。
它的近义词包括准则、法则、规定和规则等。通过这些近义词的描述,我们可以更清晰地理解原则的定义。设计原则可以被理解为在实现设计目标的过程中需要遵循的行为准则和约束。这里的行为准则指的是设计行为,即所有的设计方案都需要遵循相应的准则并受到相应的约束。除了约束作用,原则还可以帮助我们在设计过程中做出决策,指导我们应该或不应该做什么。它的意义在于使我们能够在复杂的设计过程中保持清醒,确保思维和行动不会偏离目标方向或犯下明显错误。因此,原则的关键在于指导。
设计目标、策略、方法、指标的区别与关系
在设计工作中,设计原则可以是统筹全部设计工作而制定的原则,也可以是根据具体需求制定的原则。两者面向的场景不同,应用范围也不同,因此需要注意区分。通常,专业的设计组织会制定指导全部设计工作的设计原则,以使所有设计人员在意识层面上达成一致,从而更好地约束和指导设计工作的执行。这样可以避免因为个人原因而导致设计行为准则的差异,从而避免产生与预期目标相差较大的方案。然而,由于宏观统筹的设计原则并不能完全满足对所有设计需求的指导,因此可能需要根据实际场景进行针对性的原则制定,以更灵活地满足业务商业化设计需求。
当然也有基础通用性原则,如尼尔森十大可用性原则,其面对的场景和所要解决的问题不同。在工作中制定原则时可以借鉴吸纳基础、通用原则,然后根据差异化需求进行调整。
 
3、设计策略
策略一词在语义上相对直观更容易理解,例如在战争中常见的作战策略,如耳熟能详的诸葛亮,他能够审时度势,根据所处的环境和情况,灵活制定并执行各种策略,以达成最终的作战目标。
设计目标、策略、方法、指标的区别与关系
在更广泛的语境中,策略通常被定义为一套可以实现目标的方案集合,或者是根据当前形势制定的行动计划。这些方案和计划都是为了更好地实现既定的目标或应对未来的挑战。
当我们谈论设计策略时,我们是在讨论如何在不违反设计原则的前提下,找到一种有效的切入方式来实现设计目标。设计策略的核心在于如何开始设计过程,它可以帮助设计师在设计过程中进行多角度的思考、分析和问题解决,避免陷入细节或者迷失方向。
设计目标、策略、方法、指标的区别与关系
 
4、设计方法
方法较为浅显易懂,一般是指为获得某种东西或达到某种目的而采取的手段与行为方式。
设计目标、策略、方法、指标的区别与关系
设计方法则是为了实现设计目标,依托设计策略,遵循设计原则的具体的执行方法,它是设计过程中具体实践的重要环节,将抽象的指导策略具象化的行为方式。
设计目标、策略、方法、指标的区别与关系
设计方则侧重于行为和方式,能够被清晰准确的落地执行,得出关键结论并产出具象化方案。方法通常是通过实践形成的经验总结沉淀,具有较强的实践指导意义,可以帮助在设计过程中更科学的产出解决方案。
常见设计方法论均是通过不断的实践进行的经验总结沉淀,最终形成的可以复用的执行模式,如双钻模型、用户体验地图等。
 
5、设计指标
设计指标是为了验证设计方案的可行性或设计目标的完成度而制定的检验标准和衡量机制。设计指标的侧重点在于检测和验证,能够客观地反映出设计工作的产出质量和目标完成度,并可以辅助制定下一步的设计方向和目标,以实现持续化、可迭代的设计方案优化产出。
设计目标、策略、方法、指标的区别与关系
设计指标通常在过程中对具体产出方案的决策产生较大影响,即使在遵循同一原则和策略的情况下,为了实现同一个目标也会产生多个解决方案,每个方案都有不同的优劣势。因此,在做方案评测和决策时,设计指标也是一个辅助决策依据,使方案决策更贴合目标,更加理性化。
设计目标、策略、方法、指标的区别与关系
设计指标必须具有可量化性,这意味着我们可以通过客观的数据或评价反馈来检验和衡量设计目标的完成程度,以验证解决方案的合理性和设计质量。此外,针对体验相关指标,我们可以协助设计师、产品经理和其他利益相关者了解用户在使用产品或服务过程中的感受,从而优化设计以提高用户满意度和参与度。
以下是一些常见的体验设计指标:
1. 任务完成率:衡量用户在完成任务时的成功程度。例如,在一个电子商务网站上,任务完成率可能包括购买商品、添加到购物车、填写表单等。
2. 用户满意度:通过调查问卷、评分系统等方式收集用户对产品或服务的满意程度。较高的用户满意度意味着更好的用户体验。
3. 用户参与度:衡量用户在产品或服务中的活跃程度,如浏览页面、发表评论、分享内容等。较高的用户参与度意味着更好的用户体验。
4. 转化率:衡量用户从访问网站到采取特定行动(如购买、注册、下载等)的比例。较高的转化率意味着更好的用户体验。
5. 平均会话时长:衡量用户在产品或服务上花费的平均时间。较长的平均会话时长意味着更好的用户体验。
6. 重复使用率:衡量用户在一定时间内重复使用产品或服务的频率。较高的重复使用率意味着更好的用户体验。
7. 推荐指数:衡量用户向其他人推荐产品或服务的意愿。较高的推荐指数意味着更好的用户体验。
通过关注和优化这些体验设计指标,设计师和产品经理可以更好地了解用户需求,提高产品的吸引力和实用性,从而提高整体用户体验。
 
二、总结概述
结合日常设计工作流程可将其之间的关系总结为是层级递进和相互约束的指导关系。
设计目标、策略、方法、指标的区别与关系
 
设计目标:
是设计所要达到的核心目的;
设计原则:
是设计执行所要遵循的必要准则;
设计策略:
是设计目标和设计原则指导形成设计形行动方针;
设计方法:
是依托于设计策略的具象可执行的方式方法;
设计指标:
是用来检验设计方法的有效性和设计目标的完成情况的检验标准和衡量机制;
设计目标、策略、方法、指标的区别与关系
 
 
 
 


作者:预激综合症啊
来源:站酷

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

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

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

如何利用动效打造B端的用户体验

博博 B端界面设计文章及欣赏

说到B端后台产品,我们会想到业务复杂、信息庞大、用户角色多、页面层级深、使用门槛高等特征。这些特征让后台产品在设计时更强调“简单直接”,无需多余的设计元素,相比之下,没有C端产品有趣。而作为B端后台设计师在工作中会面临很多复杂场景的设计需求,有时候需求方未必能理解设计理念,会让设计师陷入“头秃”的状态。 针对B端后台产品某些体验问题,我们可以借助动效的力量去解决。
下面将结合工作经验,以及线上文章,分享如何利用动效来提升B端后台产品的体验。
 
主要分为两大块:
如何利用动效  打造B端的用户体验
 
 
如何利用动效  打造B端的用户体验
使用动效不是为了炫技,而是辅助解决设计中发现的问题。我们要思考的是,眼下的问题结合动效能否达到1+1>2的解决效果。设计方案除了要得到需求方的认可,还要有开发团队的支持。设计师做到从痛点中出发,于可行处落地,才是有效的设计。那什么场景下的问题可以考虑结合动效呢?
 
1、信息量折叠收纳
B端业务的复杂程度决定了产品的信息体量,这也考验着设计师设计页面时,能为用户在有限的空间里获取多少信息。举个例子,用户的办公设备是小型笔记本,它的屏幕小,用户一屏看到的内容有限。这时需求方建议减少留白,压缩空间,信息往上堆积,页面最后会拥挤不堪。庞大的信息体量力求对用户的吸收效率,也对设计造成困扰,针对这种情况我们可运用“折叠收纳”法
 
应用案例1: 按钮折叠
如果一个页面的按钮太多,可“折叠”按钮。以下面的科目树为例,每个科目有若干个功能按钮,如按钮全部展示,不利于用户聚焦重要信息。用户必定是先看科目标题,如有需要才对科目进行操作,基于这个思路可把按钮折叠起来,待用户鼠标悬浮至科目才出现按钮。在恰当的场景下将按钮折叠,有助于精简页面结构。一个页面按区域划分功能区和信息区,信息区被文案铺满了,可简化功能区的表现形式。比如按钮和解释文案,可对解释文案进行收纳,用户鼠标悬浮上去显示。对于用户来说,一个按钮的含义只要使用一次便清楚。
如何利用动效  打造B端的用户体验
应用案例2: 内容折叠
B端后台因信息量大有很多长页面,这时可在用户进行页面滚动浏览时,根据用户滚动的内容进行折叠。如下的筛选项占据了页面头部一定的空间,用户滑到结果列表内容时,已选项固定在顶部精简展示。
如何利用动效  打造B端的用户体验
 
小结:通过“折叠收纳法”优化页面布局,根据用户的操作行为给予内容变化,帮助用户降低信息量过大带来的阅读疲劳,也让设计师在有限的设计空间里“堆积”信息。
 
2、对路径进行引导,及时给与用户反馈,提高效率
B端产品会有极其复杂的功能,这些功能通常用步骤条来拆分,引导用户分步完成。面对复杂功能。需求方希望
在页面的各个位置添加用法提示文案。但用户并不想阅读一串串文字,这时可结合用户的操作行为,及时响应引导下一步操作。
 
应用案例1:
操作响应如下的这个页面需要用户把左边的字段拖拽到右边生成卡片。当用户拖拽时,给予动效反馈让用户感知字段拖拽方向。这种可视可感知的方式帮助用户快速掌握用法,提升效率。
如何利用动效  打造B端的用户体验
 
应用案例2:引导响应
在工作中我们也许会接到类似的修改需求:“按钮不够突出,不够大,要又大又突出”。你看完后心里想:“还不够突出吗,要这么大干什么呢?”这时沉住气,分析修改的根本目的,它想要突出的目的是什么?
1、这个按钮在整个页面中承载极其重要的功能,视觉上用户需立刻注意到2、点击按钮后的内容十分重要,希望增强点击欲。
当用户鼠标悬浮至按钮时,及时响应引导,一个箭头既起到醒目作用,也引导着用户去往下一步。
如何利用动效  打造B端的用户体验
 
小结: B端后台页面信息繁杂,功能多。通过动效帮助用户在使用过程中增强反馈和引导,正确的引导能缩短用户的操作路径,提升效率。
 
3、增加情感化体验
B端后台产品大部分是给专业人员使用的,信息表单居多,页面内容相似,比较单调。加入适当友好的情感化式效可以提升产品的趣味性,减少用户使用的倦怠感。
应用案例1: Loading动效
常规的Loading动效通常是一个圆在转圈,当用户面对长时间加载时,一直盯着一个圈会产生焦虑感。情感化Loading动效可总结为两类:
1、产品本身有一个IP形象,可围绕IP进行创作。例如“加薪猫”,加载的时候猫咪追着钱币奔跑,增加了跑步流汗的细节,提升它已经在努力加载的形象感;
2、根据Loading的文案进行拓展设计,提取文案元素,图形场景化,分散用户等待的焦虑。
如何利用动效  打造B端的用户体验
 
应用案例2:化抽象为形象
有些B端产品的业务背景专业而又抽象,可借助动效的力量化繁为简,化抽象为形象。以下面数据字典为例。用通过该字典进行与业务相关的字段查询。该页结构较简单:搜索栏和热词入口。我结合模块名称,对特征进行具体物化,在页面加入字典和放大镜元素。通过物化让用户快速感知该模块的作用。类似的大入口页面也可以运用3D效果,它能让物化更加立体。
如何利用动效  打造B端的用户体验
 
如何利用动效  打造B端的用户体验
 
比较常用的动效设计工具有: Ae、Principle、ProtoPie。这里分享一下我在工作中常用的并能解决大部分问题的工具。
1、Principle:快速制成交互动效演示Demo
Principle是一款只能用于Mac OS系统的交互设计工具,它的操作界面跟Sketch类似,学习成本较低。它搭配Sketch使用,能对界面做转场过渡动效和一些细节的交与动效。当你想提出某个交互动效提案时,可用Princidle快速制成演示Demo,导出GIF或视频给到需求方,让他们快速明白你的想法及可行性后台界面演示demo可直接选择箭头光标,呈现效果更贴合真实场景。
 
如何利用动效  打造B端的用户体验
 
2、After Effect: 适合各种场景下的动效制作
AE是绝大UI设计师必备的动效制作工具。它支持Mac OS和Windows系统,其自身有着强大而丰富的特效库。现在也能通过AEUX插件,把Sketch里的图层直接导入到AE使用。AE的功能大而全,日堂工作中多用干制作情感化需要的图形动效,比如Loading、lcon点击动效等等。
如何利用动效  打造B端的用户体验
 
小结: 设计师需要学习和掌握的软件很多,软件更新迭代的速度也很快。可选择能解决工作中绝大设计需求的软件精学,其余可在空闲时作为知识技能储备来学习。
 
总结
做适合的动效为B端产品体验赋能
当你在设计一款从0-1或是重构的B端后台产品,你可重新定义设计风格、规范控件。当你是半途介入一款风格规范都已相当成熟的B端产品,通常遇到的问题较为繁琐,可能是对一个按钮、一个颜色、一句文案去精打细磨。这时设计师需提升产品全局观,在设计过程中对遇到的问题层层剖析,洞悉设计的发力点,并在恰当的场景下紧贴产品特性和业务需求,提出恰到好处的动效方案,以小点出发,真正为产品的体验赋能。
如何利用动效  打造B端的用户体验


作者:CNLILY
来源:站酷

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

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

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

弹框关闭的七种交互方式

博博 设计思维

前言:日常设计工作中,我们设计师可能会面临以下设计问题:
  1. 移动端弹框什么时候需要关闭按钮?什么时候不需要关闭按钮?
  2. 界面中间的确认取消警示弹框,是否需要在右上角添加“关闭”icon按钮?
  3. 手势关闭弹框需要注意什么?
  4. iOS和安卓两端关闭弹框有什么区别?
  5. 点击弹框中的任务按钮,弹框是关闭还是不收起?
弹框关闭的七种交互方式
弹框关闭的七种交互方式
弹框关闭的七种交互方式
弹框关闭的七种交互方式
统一使用图标按钮,以icon“x”的形式,显示在底部弹框的右上角,用户通过点击“关闭icon”图标按钮来关闭弹框。
使用场景
当弹框中包含内容和功能操作时,应提供一个关闭icon“x”的图标按钮,以让用户能够主动关闭弹框并进行相应的操作。
何时不需要关闭按钮icon“x”?
1.操作型弹框,需要用户确认或选择操作项,不需要显示关闭按钮,需统一使用文字主按钮,以文本“取消”的按钮形式,显示在弹框面板底部,用户通过点击“取消”按钮来关闭弹框。例如当用户进行删除或提交操作时,弹出的确认框通常只需要“确定”和“取消”按钮,而不需要显示关闭按钮。
2.全局提示toast(自动关闭)。
3.功能入口类型弹框,为了保持界面简洁,不需要“关闭icon”,如智能文档编辑模式的底部悬浮工具栏。
4.警示或通知类型的弹框,不要关闭icon。
弹框关闭的七种交互方式
关闭按钮位置
关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。
关闭按钮icon“x”何时需要展示在左上角?
页面级:当页面层级超过3级时,为了便于用户能快速回到一级页面,无需原路返回,可以将关闭按钮“x” 置于左上角,位于「返回」按钮右侧。
多语言和国际化用户习惯:特定语言和文化习惯,从右向左阅读顺序,遵循用户阅读习惯。例如台湾、日本等。
弹框关闭的七种交互方式
用户点击弹框外部区域,即遮罩层,可关闭弹框。
弹框关闭的七种交互方式
遮罩层不可点击场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,遮罩层不可点击。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
遮罩层展示逻辑
1、非模态弹框,不加遮罩层;模态弹框,加遮罩层;
2、遮罩层统一使用半透明黑色蒙层,色值和不透明度的数值由UI定义;
3、遮罩层可视高度,遵循移动端最小点击区域48dp*48dp高度的交互热区,保证用户可点击
 
遮罩层的覆盖范围
  1. 遮罩层需覆盖标题栏,需遵循iOS、Android、微信小程序平台规范。其中微信小程序端,遮罩层覆盖标题栏,但不可覆盖标题栏右侧胶囊按钮。
  2. 若是内嵌H5页面,因客观条件限制,则弹框之下的遮罩层无需覆盖标题栏。
  3. 以上提到模态弹框和非模态弹框两种弹框模式,要想更清晰理解两种模式弹框的关闭交互方式,需要理解两者之间的交互区别。‍‍
 
模态弹框和非模态弹框的交互区别
模态弹框‍‍‍‍‍‍‍‍‍‍‍‍:
用户只能操作弹框内的交互元素,弹框外部区域不可操作,需要加半透明遮罩层。例如底部操作型弹框。
非模态弹框‍‍‍‍‍‍‍‍‍‍‍
用户可以并行操作弹框内和弹框外部区域的交互元素,不要加半透明遮罩层。例如苹果地图App。
 
弹框关闭的七种交互方式
用户在底部弹框区域向下滑动手指,弹框会随之向下移动,当到达当前弹框高度的1/2位置后,会触发关闭交互,用户继续向下滑动松手则关闭弹框。
弹框关闭的七种交互方式
交互逻辑
1、支持下拉关闭的弹框,头部区域需统一展示水平条icon,样式由UI定义
2、交互热区:底部弹框全部区域
3、手势方向:手指只能向下移动
4、下拉触发关闭弹框阈值:当前底部弹框高度的1/2位置
 
使用场景
长内容类型弹框,需使用下拉关闭交互手势,关闭弹框
 
不可用下拉手势关闭弹框的场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不可下拉关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
弹框关闭的七种交互方式
用户在屏幕上向下滑动(包括左下或右下滑动方向)至任意位置后松手释放,可关闭弹框;当用户手指下滑未松手,继续向上滑动到任意位置后松手释放,则可取消关闭弹框。
弹框关闭的七种交互方式
使用场景
仅图片大图模式场景使用。用户向下滑动屏幕,图片随之向下移动,松手后触发关闭图片查看器,关闭图片弹框
例如:手机相册
弹框关闭的七种交互方式
 
 
用户从弹框区域左边缘向右轻扫,即快速向右滑动后松手,则触发关闭弹框操作,关闭弹框。
弹框关闭的七种交互方式
不可从界面左边缘向右轻扫场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不支持向右轻扫关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
除以上场景外,均需要支持弹框左边缘向右轻扫手势关闭弹框,包括Android、iOS、小程序。
 
特殊场景
1、当同时存在页面向右滑和弹框向右轻扫手势时,在弹框区域向右轻扫,先关闭弹框,再次沿着屏幕左边缘向右滑动,则返回上级页面。
2、键盘展开场景,iOS端不支持左边缘向右轻扫收起键盘,遵循iOS平台规范。
弹框关闭的七种交互方式
 
 
对于安卓设备,用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时,可关闭弹框。
交互用法
1、点击物理按键,需原路逐级返回,不允许跳级返回
2、模态弹框,遮罩层覆盖物理返回按键,不支持左边缘向右轻扫关闭弹框
3、安卓手机将系统导航方式切换到全面屏手势,则不存在物理返回按键
弹框关闭的七种交互方式
  1. 点击弹框中的功能按钮,通常需要立即执行并关闭弹框。一定是先执行再关闭弹框,而不是先关闭弹框再执行。用户执行某功能按钮后,遵循即时响应原则,系统必须要反馈用户在执行用户操作。
  2. 为什么点击执行功能按钮需要关闭弹框?因为弹框是否关闭,和用户目标有关。用户主动触发某操作唤起弹框,首先是有用户目标的,其次,用户通过点击弹框内某功能按钮,执行任务来实现用户目标。
  3. 此外,也存在点击执行功能按钮立即执行不关闭弹框的场景,比如开关选择器,但本质还是围绕当前用户目标来进行决策是否关闭弹框。
 
作者:CNLILY
来源:站酷

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

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档