设计思维

252024-3

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

博博设计思维

近日，全球科技圈最火的热点非Sora莫属，它是OpenAI发布的首个文生视频模型Sora，其视频生成能力、效果呈现的成熟度震撼了全世界。有人说，这是视频生成领域的iPhone moment，AGI（通用人工智能）又向前划了一个时代。

Sora的使用非常简单，与ChatGPT一样，只需要输入合适的prompt（提示词），它就能跟根据文本指令创建视频。

此前也有一些AI生成视频工具，但大都只能生成10秒以内，还“卡成 PPT”，但 Sora 弯道超车，直接将时长拉到 60 秒。这个突破相当厉害，毕竟时间越长，内容越复杂，想表达准确把控好节奏难上加难。

Sora生成的视频画面截图 | 东京街头的时尚女性

Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象

更厉害的是，根据Sora技术报告的介绍，Sora不仅可以理解用户在提示中所要求的内容，还能理解这些内容在物理世界中的存在方式。因此，它生成的视频不仅逼真，还包含精细复杂的场景、生动的角色表情以及复杂的镜头运动。

Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影

不少人高呼影视行业变天了，明星即将失业，有网友甚至把美国电影工业的象征Hollywood（好莱坞）改成了这样：

其实，不止影视行业，包括教育、营销、互联网甚至所有行业都会或多或少受到影响。

作为在互联网浸润多年的“老油条”来说，笔者最近一直在思考，Sora等AI工具对我们究竟是机会还是挑战？个人认为，机会大于挑战。

比如，对产品经理和UX设计师来说，可以考虑怎么把Sora的能力用到自己的产品上去：一款社区产品，可以通过Sora快速输出大量视频内容；

一款教育类产品，可以通过Sora生成定制化的教学视频；

一款新闻APP或者视频网站，可以利用Sora进行个性化推荐；

……

不过这一切的前提是，你必须掌握AI。

除了上述提到的AI生成视频工具Sora，笔者还总结了很多优秀的AI工具，这些工具能大大帮助我们提升工作效率，生成创意灵感，一起来看看吧~

1、小摹AI

小摹AI是一款集成了人工智能技术的产品设计工具，能够根据文本指令轻松生成可编辑的原型图，对产品经理来说可谓解放了生产力！

官网：

https://www.mockplus.cn/ai

主要功能及亮点：

目前有智能原型、智能文本、智能图片、智能翻译和智能表格五大功能，能有效地提升设计效率，没有设计经验也能轻松上手哦。

1）智能原型：根据用户的描述，智能生成一张原型设计页面。

2）智能文本：根据用户的描述，智能生成一段文本内容，对写产品需求文档很有帮助。

3）智能翻译：有“画板翻译”和“输入内容”两项子功能，可以轻松地实现整页内容的翻译，也可以输入内容进行翻译。

价格：

现阶段可免费使用

推荐理由：

小摹AI界面简洁，上手非常容易，它最大的亮点是利用AI优化设计流程，快速实现从概念到原型的转变，大幅度提升了产品经理和设计师的工作效率！

推荐评级：

⭐⭐⭐⭐⭐

2、Galileo AI

Galileo AI也是一个AI设计工具，它能根据用户的输入智能创建UI设计，生成的界面清晰，间距、字体大小、图片使用等方面都不错。另外，它还有个非常实用的功能，你可以将生成的设计导出到你的 Figma 中继续编辑~

官网：https://www.usegalileo.ai/explore

主要功能及亮点：

1）即时设计生成：根据自然语言提示迅速生成复杂的UI设计。

2）AI生成的插图和图像：为设计添加AI生成的艺术元素，增强视觉吸引力。

3）完整的产品文案自动化：利用大型语言模型自动生成产品文案，节省设计师的时间和精力。

价格：

现阶段免费

推荐理由：

如果你想获得一些灵感，想看到一些新鲜的设计，真的可以试试这个工具。

推荐评级：

⭐⭐⭐⭐

3、Uizard

Uizard是一个基于Web的设计工具，用户可通过它的AI技术快速创建网站界面，还能快速将手绘草图转换为交互式原型，提高设计效率和创新能力。

官网：https://uizard.io/

主要功能及亮点：

1）手绘转数字原型：将纸上的草图转换为数字界面原型。

2）用户界面自动化设计：基于用户输入自动生成设计元素和布局。

3）交互式原型创建：快速构建可交互的原型，用于用户测试和演示。

价格：

提供免费试用版本，付费版12美元/月起。

推荐理由：

Uizard是一款设计神器，它的AI功能，丰富的可复用模板和设计元素，能帮你节省大量时间。

推荐评级：

⭐⭐⭐⭐⭐

4、Whimsical

Whimsical是一款多功能的在线设计工具，它可以帮助用户完成思维导图、流程图、线框图的制作，成品逻辑清晰，层次分明，还能帮助设计师及时标记灵感，是一款万能的专业辅助设计工具。

官网：https://whimsical.com/home

主要功能及亮点：

1）上下文工具栏、可直接用于展示的输出、无限画布以及实时更新；

2）庞大的符号库工具帮助用户更好的完成设计操作；

3）Whimsical的AI功能可以快速生成图表，用以直观展示概念、思维导图和网页等内容。

价格：

提供免费版本，付费版10美元/月起。

推荐理由：

Whimsical是一款全能绘制工具，其中还有非常庞大的符号库工具，能帮助你更好更快地的完成设计。

推荐评级：

⭐⭐⭐⭐

5、Khroma AI

Khroma是一款利用人工智能技术来生成配色方案的工具，它能根据你的喜好和需求，提供高效、直观的配色解决方案，并创建无限的调色板让你尽情探索。

官网：https://www.khroma.co/

主要功能及亮点：

1）AI生成配色方案：根据用户偏好和流行趋势自动生成配色方案。

2）自定义配色选项：允许用户根据自己的需求调整和优化配色。

3）保存和分享功能：用户可以保存自己的配色方案，并与他人分享。

价格：

提供免费版，进阶功能需付费订阅

推荐理由：

Khroma的深度学习算法很厉害，它能够学习用户的配色偏好，并根据流行趋势提供创新的配色方案。

推荐评级：⭐⭐⭐⭐

6、AI Colors

AI Colors是一个人工智能色彩调色板生成器，它可以根据你的描述生成贴心的配色方案，同时你也可以参考提供的配色案例，每一种配色方案都有对应的效果展示，让你能够快速找到想要自己的配色方案。

官网：https://aicolors.co/

主要功能及亮点：

1）提供四种配图案例，分别是移动应用、仪表盘、落地页、作品集；

2）单击复制颜色或者直接导出配色方案，不喜欢的颜色还可以手动修改。

推荐理由：

通过AI Colors，你可以轻松生成调色板，并将其应用于产品界面，查看它们的配色效果，非常适合希望轻松掌握调色板的新手。

推荐评级：

⭐⭐⭐

7、Fontjoy

Fontjoy是一个帮助设计师选择最佳字体组合的工具，它可以让用户在一次点击中生成字体组合，还可以混合和匹配不同的字体，达到完美组合效果。

官网：https://fontjoy.com/

主要功能及亮点：

1）帮助用户调整字体外观，还有字体的类型、大小、颜色等

2）丰富的字体资源：包括中文字体、英文字体、日文字体等；

推荐理由：

只需点击生成，就能看到不同的字体，让字体搭配毫不费力。

推荐评级：

⭐⭐⭐

8、Huemint

Huemint是一个内置AI色彩模型的在线配色网站，它通过AI技术帮助用户快速生成吸引人的配色方案，你还可通过调节滑块控制配色方案的对比度，适用于设计师和创意专业人士。

官网：https://huemint.com/brand-intersection/

主要功能及亮点：

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开发

评论(0) 浏览(49)

252024-3

标签设计的超全分析总结

博博设计思维

在日常生活中，我们经常会给他人贴上标签。这些标签可能是基于个人特征、行为或经历而形成的，它们可以帮助我们更好地理解和分类他人。例如，当我们初次见到一个人时，我们可能会根据他们的外貌、穿着和言谈举止来给他们贴上一个“自信”、“开朗”或“胆小”、“内向”的标签。我们不可避免地会贴标签或被贴标签，因为这是一种快速且低门槛的有效记忆方式。

关注不同平台的标签设计，发现平时不太注意的小标签承担了许多重要的作用。在电商类设计中，标签可以强化商品折扣、优惠信息、服务特色等吸引用户。对于偏向浏览和文章发布类产品，标签设计旨在方便读者更好地理解文章内容，平台还可以根据标签聚合同类文章，建立目录索引，引导读者快速查看标签文章。

看似简单的标签却有这么强的作用，以下将根据标签的定义、属性特征及使用场景作出一些思考和探索，帮助大家对标签有一个更清晰的认识。

一、标签的定义

二、标签的组成

三、标签设计的作用

四、标签设计要点

百度百科对网络标签(Tag)定义是：

一种互联网内容组织方式，是相关性很强的关键字，它帮助人们轻松的描述和分类内容，以便于检索和分享，Tag已经成为web 2.0的重要元素。

Ant Design 对标签给出的定义是：用来进行标记和分类。使用场景：1.用于标记事物的属性和维度；2.进行分类。

TDesign对标签给出的定义是:用于表明主体的类目，属性或状态。

所以标签是什么?

标签是结合产品内容及属性特征经提炼后产出的关键词，是信息的一种集合方式，便于用户查找、定位以及系统识别。

标签可以帮助传达信息、建立可预知操作、产品分类和营销引流、优化搜索等。通过使用标签，方便用户快速识别，提升信息转化的效率，在UI设计中，标签是最常用的设计组件之一。

标签由容器、文本、图标等元素组成。

三者都是可选的，它们可以随机组合，常见的是这5种组合：文本、图标、容器+文本、容器+图标、容器+文本+图标。

文本标签：

更直观地表达含义，主要用于抽象的、或分类较多的标签，这种类型标签通常也以#+文字的形式呈现为超链接，主要出现在文字内容较多的列表页面、详情页的开头或结尾。它们也可以被理解为常说的话题标签。通过这些标签，用户可以快速了解到内容的主题和核心，并能够方便地链接到与该内容相关联的信息。

图标标签：

更富有设计感且吸引眼球，但这种图标必须是用户熟识的、一看就明白含义的；

容器+文本标签：

主要为突出特色、卖点来进行促销，类型及样式比较多元化，且单个产品可能多达 4~5 个标签，以此来吸引用户购买。

图标+文本标签：

面积会较大，视觉冲击很强，有的出于交互功能的需要，有的则是用在节日和特别专题。

容器+文本+图标标签：

而图标则是为了进一步强调或补充标签文本的信息，增强用户的视觉感知。

01 标签的颜色

标签的颜色选择和搭配对于信息传递和品牌塑造具有重要影响。不同的颜色和用色的面积/重量会给用户带来不同的感知，比如，绿色代表清新、免费，黄色棕色代表尊贵VIP，红色象征火爆热门。同时也会对品牌形象产生影响。

在白色背景下，我们可以自由地选择任何颜色作为标签的主体色、辅助色和点缀色。当面对同一组信息多个标签时，我们可以通过混合不同颜色来更好地区分它们。例如，我们可以将主要标签设置为红色，次要标签设置为蓝色，然后将它们组合在一起以形成一个更丰富的视觉层次结构。

在图片背景下，我们的选择受到了很大的限制。由于图片本身已经具有了丰富的颜色和纹理，因此我们需要谨慎选择标签的颜色以避免与图片产生冲突。通常情况下，我们会使用白色/黑色+不透明度或主体色作为标签容器，并将文字设置为黑色或反白处理以确保其可读性。

总之，无论是白色背景还是图片背景都有其独特的优势和适用场景。在选择背景时应根据具体情况进行权衡并做出最佳决策。

02 标签形状

标签的形状设计在信息视觉传达中扮演着重要的角色，不同的形状代表着不同的信息特性和情感色彩。常用的标签形状有圆形、矩形（半圆角、全圆角）、气泡或异形等。

形状是标签信息传递中的视觉轮廓表现，它作为承载信息的容器，对文字元素的包容性极强，能够使标签信息更加聚焦，让用户在获取内容和进行信息归类时更加专注。

在UI设计中，标签的特征跟生活中的标签也很相似，用以标注内容分类或内容要点，方便用户快速定位自己需要的内容目标。标签还有满足用户的隐形需求的作用，当用户在犹豫是否要进行下一步操作的时候，标签在一定程度上加强了用户的需求欲望，促进下一步操作。那标签到底有什么作用？

传达信息，突出产品特色

标签的基本功能是分类和突出内容要点，以方便用户快速定位他们需要的信息或功能。标签常用于传达产品基本信息、折扣信息、优惠信息、产品卖点等。对产品而言，它能优化信息层级，又能简单明确地传达产品特点；对用户而言，可以第一时间获取关键信息，降低用户阅读门槛，所以标签的首要任务就是为满足用户的隐性需求而传达特色信息。

例如，美团天天神劵、折扣信息等，淘宝里的直降低多少钱、同款低价，让用户潜意识地认为能够降低经济成本。

引导用户操作，建立用户操作的预期

标签还可以用于建立用户操作的预期，让用户在使用产品之前就知道点击后可能发生的效果，从而增加用户点击的兴趣和满意度。

例如：音频标签、视频标签“独播”、“vip”等，让用户在点击前预知点击后的效果。标签还可以用作行为引导，告知某操作的结果，如淘宝里“常逛的店”，让用户提前知悉操作之后得到的结果，加强点击的动机。

03 传递品牌与可靠性

品牌性质的标签，让消费者对产品产生信任感。同时，标签也是品牌与消费者之间的沟通桥梁，通过简洁明了的文字和视觉元素，传达产品的特点和优势。

例如如：“百亿补贴”、“官方店”、“品牌”。许多用户在浏览列表时，会通过标签快速判断是否有必要点击查看详情。此外，标签内展示强公信力的信息（榜单排名/评分等），可以加强内容可靠性及优质性。

方便分类

标签广泛用于用户区分产品内容，进行分类，进而确定关键词，优化搜索。避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。

例如：京东水果蔬菜“时令热卖”标签和淘宝里的评价标签，用户可选择自己感兴趣的标签去查找自己想要的信息，提高浏览效率，节约时间成本。

营销引流

为用户打上不同的标签，用于区分不同用户群体，分类精准定向推送产品。标签既能突出产品特色信息、又不会占用太多空间，所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。

如：小红书文末的文字标签、淘宝搜索的“探索发现”

从众心理引导转化

在营销中，利用从众心理可以引导用户做出购买决策，这类信息广泛应用在标签设计中，积极引导用户点击和转化。

例如，可以展示其他用户的购买记录或评价，让用户看到其他人对该产品的认可和好评，从而增加他们的信任感和购买欲望。像淘宝里的“多少人回购”，银行理财里的“多少人次购买”等等，都会对当前用户的心理产生极大影响，很多时候，用户的想法和行为受到周围人的影响程度，往往超过理性的认知。当用户无法决策时，从众心理会成为影响用户决策的重要因素。

06 告知状态

当内容状态变化且产品希望提示用户知悉时，标签可以作为告知当前状态的提示，如上新的“New”、“直播中”等。

此外，告知当前状态还有营造稀缺性的作用。如“限购多少件”、“即将售罄”，促使用快速决策。

07 营造氛围

标签不仅仅是产品信息的载体，更是营造氛围的重要元素。通过选择适合的色彩、字体和图案，标签可以传达出不同的情感和氛围，吸引消费者的注意力，激发购买欲望。

例如：“38换新节”、“上新啦”，有的产品确实是基于热度展示的标签，也有的产品只是为了吸引用户注意力而展示。

在UI设计中，标签是一个不可或缺的元素，那如何设计才能达成业务目标？

01 简洁明了

标签设计的文案（字段）长短尽量简短清晰，具有一定的识别性、易通性，避免使用复杂的词汇和句子。用户在浏览界面时，应该能够快速理解标签的含义。这里所说的精炼并非一味地求短，虽然“短”是标签必备的因素，但有时候过于简短的标签根本没办法给用户传达足够的信息，甚至会导致用户更加疑惑，这也失去了添加标签的初衷。

02 一致性与差异性

在不同的页面和场景中，标签的设计应该保持一致的风格和格式。这包括颜色、字体、大小、布局和位置等方面的一致性。这样做有助于用户建立认知模型，提高他们的使用效率。然而，尽管标签设计需要保持一致性，但也需要一定的差异性。这种差异性是针对不同类型和视觉权重的标签，通过不同的视觉样式和色彩来体现信息的层级关系。因此，虽然表面上看起来存在冲突，但实际上并不矛盾。

03适当的颜色

标签的颜色应该与背景颜色形成对比，以便用户能够清楚地看到。同时，颜色的选择也应该考虑到品牌的形象和用户的视觉感受。

04 适当的位置

标签的位置应该方便用户操作。例如，重要的标签应该放在显眼的位置，而不太重要的标签信息可以放在次要的位置。

结语

UI 设计中的标签跟我们日常生活中的标签很相似，它不仅能对产品作分类、特色标记，还能在用户犹豫不决的时候起到一定的推动作用，是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。根据产品的目的和需求，在不同时间和场景下使用合适的标签是至关重要的。通过简单精炼的表达方式，标签能够在有限的空间内提供更多的信息维度，吸引用户的注意并激发他们的好奇心、提升信息转化的效率。

作者：满满滴滴
来源：站酷

评论(0) 浏览(60)

252024-3

教你一文读懂暗色模式

分享达人设计思维

暗色模式（Dark Mode）的兴起是一个逐渐发展的过程，它涉及到技术进步、用户体验优化以及设计趋势的变化。

随着iOS 13在2019年的发布，暗色模式开始成为用户关注的焦点；在用户体验方面，设计者们考虑到了环境光线与屏幕亮度的匹配问题，暗色模式可以有效减少视觉疲劳；在实际使用中，用户发现暗色模式在光线较暗的环境中更为舒适，这也促使了暗色模式的普及和发展。

评论(0) 浏览(53)

142024-3

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

博博设计思维

设计是一种创造性的过程，它涉及到对问题的思考、分析和解决。一个优秀解决方案的产出离不开缜密、科学的策略制定和方法运用，这些概念在实际工作中往往存在模糊界限，本文将探讨这些概念定义、区别、关系以及实际作用。

一、概念区分

1、设计目标

设计目标是指设计团队对计划中将要完成的设计工作期望达成的结果的简化描述。它能够对整体设计工作起到指引作用，即以目标为导向，所有的工作都需朝着完成指定目标而执行。

设计目标的核心重点在于结果。在设计过程中，制定清晰、可量化的目标是至关重要的。首先，设计目标需要明确地表达出设计团队希望实现的结果。这有助于项目团队成员理解并共享共同的目标，从而确保整个团队朝着同一个方向努力。同时，设计目标也能够为项目提供明确的指导和方向，帮助团队在实施过程中做出正确的决策。

其次，设计目标需要与业务需求紧密对接。在接收到业务需求后，设计团队应该仔细分析需求，并将其转化为具体的设计目标。

设计目标需要承接需求目标，是需求目标的初步具象化呈现，这些目标应该是切实可行且可见的，能够将抽象的需求转化为实际的设计方案所达到的结果。通过这种方式，设计团队可以确保他们的工作目标与业务需求目标保持一致，并且能够满足用户的期望。

此外，设计目标还需要具备可执行性和可量化性。否则，所制定的设计目标将只是空泛的概念吹嘘，无法落地呈现的虚伪目标。没有目标的设计是难以带来实际价值的盲目执行，不仅耗费资源，还容易犯下难以预估的错误。即使是探索性方案也需要有明确的目标，将要达成什么结果或是验证什么结果，否则一切方案都会难以执行。这意味着设计团队需要确定如何衡量目标的达成程度，并且制定相应的行动计划来实现这些目标。例如，一个设计目标可以是提高产品的用户体验，那么团队可以制定一系列的改进措施，并通过用户调研和数据分析来评估改进的效果。这样，团队可以不断优化设计方案，以确保最终达到预期的目标。

最后，设计目标的清晰性和可量化性对于项目的评估和决策也非常重要。当设计方案完成后，团队需要对其进行评估和审查，以确保能够达到预期的目标。如果目标模糊或不可量化，那么评估过程将变得困难，并且难以做出准确的决策。因此，制定清晰、可量化的设计目标是确保项目成功的关键之一。

2、设计原则

原则一词在我们的生活和工作中扮演着重要的角色。我们经常听到人们说，做人要有原则，做事要有原则。然而，尽管原则的重要性不言而喻，但具体来说，原则指的是什么？这个概念似乎很难被清晰地描述，我们脑海中的理解也相当模糊。尽管如此，我们都知道原则是某种不能逾越的底线。

原则通常指的是我们在言行中所遵循的准则。

它的近义词包括准则、法则、规定和规则等。通过这些近义词的描述，我们可以更清晰地理解原则的定义。设计原则可以被理解为在实现设计目标的过程中需要遵循的行为准则和约束。这里的行为准则指的是设计行为，即所有的设计方案都需要遵循相应的准则并受到相应的约束。除了约束作用，原则还可以帮助我们在设计过程中做出决策，指导我们应该或不应该做什么。它的意义在于使我们能够在复杂的设计过程中保持清醒，确保思维和行动不会偏离目标方向或犯下明显错误。因此，原则的关键在于指导。

在设计工作中，设计原则可以是统筹全部设计工作而制定的原则，也可以是根据具体需求制定的原则。两者面向的场景不同，应用范围也不同，因此需要注意区分。通常，专业的设计组织会制定指导全部设计工作的设计原则，以使所有设计人员在意识层面上达成一致，从而更好地约束和指导设计工作的执行。这样可以避免因为个人原因而导致设计行为准则的差异，从而避免产生与预期目标相差较大的方案。然而，由于宏观统筹的设计原则并不能完全满足对所有设计需求的指导，因此可能需要根据实际场景进行针对性的原则制定，以更灵活地满足业务商业化设计需求。

当然也有基础通用性原则，如尼尔森十大可用性原则，其面对的场景和所要解决的问题不同。在工作中制定原则时可以借鉴吸纳基础、通用原则，然后根据差异化需求进行调整。

3、设计策略

策略一词在语义上相对直观更容易理解，例如在战争中常见的作战策略，如耳熟能详的诸葛亮，他能够审时度势，根据所处的环境和情况，灵活制定并执行各种策略，以达成最终的作战目标。

在更广泛的语境中，策略通常被定义为一套可以实现目标的方案集合，或者是根据当前形势制定的行动计划。这些方案和计划都是为了更好地实现既定的目标或应对未来的挑战。

当我们谈论设计策略时，我们是在讨论如何在不违反设计原则的前提下，找到一种有效的切入方式来实现设计目标。设计策略的核心在于如何开始设计过程，它可以帮助设计师在设计过程中进行多角度的思考、分析和问题解决，避免陷入细节或者迷失方向。

4、设计方法

方法较为浅显易懂，一般是指为获得某种东西或达到某种目的而采取的手段与行为方式。

设计方法则是为了实现设计目标，依托设计策略，遵循设计原则的具体的执行方法，它是设计过程中具体实践的重要环节，将抽象的指导策略具象化的行为方式。

设计方则侧重于行为和方式，能够被清晰准确的落地执行，得出关键结论并产出具象化方案。方法通常是通过实践形成的经验总结沉淀，具有较强的实践指导意义，可以帮助在设计过程中更科学的产出解决方案。

常见设计方法论均是通过不断的实践进行的经验总结沉淀，最终形成的可以复用的执行模式，如双钻模型、用户体验地图等。

5、设计指标

设计指标是为了验证设计方案的可行性或设计目标的完成度而制定的检验标准和衡量机制。设计指标的侧重点在于检测和验证，能够客观地反映出设计工作的产出质量和目标完成度，并可以辅助制定下一步的设计方向和目标，以实现持续化、可迭代的设计方案优化产出。

设计指标通常在过程中对具体产出方案的决策产生较大影响，即使在遵循同一原则和策略的情况下，为了实现同一个目标也会产生多个解决方案，每个方案都有不同的优劣势。因此，在做方案评测和决策时，设计指标也是一个辅助决策依据，使方案决策更贴合目标，更加理性化。

设计指标必须具有可量化性，这意味着我们可以通过客观的数据或评价反馈来检验和衡量设计目标的完成程度，以验证解决方案的合理性和设计质量。此外，针对体验相关指标，我们可以协助设计师、产品经理和其他利益相关者了解用户在使用产品或服务过程中的感受，从而优化设计以提高用户满意度和参与度。

以下是一些常见的体验设计指标：

1. 任务完成率：衡量用户在完成任务时的成功程度。例如，在一个电子商务网站上，任务完成率可能包括购买商品、添加到购物车、填写表单等。

2. 用户满意度：通过调查问卷、评分系统等方式收集用户对产品或服务的满意程度。较高的用户满意度意味着更好的用户体验。

3. 用户参与度：衡量用户在产品或服务中的活跃程度，如浏览页面、发表评论、分享内容等。较高的用户参与度意味着更好的用户体验。

4. 转化率：衡量用户从访问网站到采取特定行动（如购买、注册、下载等）的比例。较高的转化率意味着更好的用户体验。

5. 平均会话时长：衡量用户在产品或服务上花费的平均时间。较长的平均会话时长意味着更好的用户体验。

6. 重复使用率：衡量用户在一定时间内重复使用产品或服务的频率。较高的重复使用率意味着更好的用户体验。

7. 推荐指数：衡量用户向其他人推荐产品或服务的意愿。较高的推荐指数意味着更好的用户体验。

通过关注和优化这些体验设计指标，设计师和产品经理可以更好地了解用户需求，提高产品的吸引力和实用性，从而提高整体用户体验。

二、总结概述

结合日常设计工作流程可将其之间的关系总结为是层级递进和相互约束的指导关系。

设计目标：

是设计所要达到的核心目的；

设计原则：

是设计执行所要遵循的必要准则；

设计策略：

是设计目标和设计原则指导形成设计形行动方针；

设计方法：

是依托于设计策略的具象可执行的方式方法；

设计指标：

是用来检验设计方法的有效性和设计目标的完成情况的检验标准和衡量机制；

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

评论(0) 浏览(76)

132024-3

弹框关闭的七种交互方式

博博设计思维

前言：日常设计工作中，我们设计师可能会面临以下设计问题：

移动端弹框什么时候需要关闭按钮？什么时候不需要关闭按钮？
界面中间的确认取消警示弹框，是否需要在右上角添加“关闭”icon按钮？
手势关闭弹框需要注意什么？
iOS和安卓两端关闭弹框有什么区别？
点击弹框中的任务按钮，弹框是关闭还是不收起？

统一使用图标按钮，以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高度的交互热区，保证用户可点击

遮罩层的覆盖范围

遮罩层需覆盖标题栏，需遵循iOS、Android、微信小程序平台规范。其中微信小程序端，遮罩层覆盖标题栏，但不可覆盖标题栏右侧胶囊按钮。
若是内嵌H5页面，因客观条件限制，则弹框之下的遮罩层无需覆盖标题栏。
以上提到模态弹框和非模态弹框两种弹框模式，要想更清晰理解两种模式弹框的关闭交互方式，需要理解两者之间的交互区别。‍‍

模态弹框和非模态弹框的交互区别

模态弹框‍‍‍‍‍‍‍‍‍‍‍‍：

用户只能操作弹框内的交互元素，弹框外部区域不可操作，需要加半透明遮罩层。例如底部操作型弹框。

非模态弹框‍‍‍‍‍‍‍‍‍‍‍

用户可以并行操作弹框内和弹框外部区域的交互元素，不要加半透明遮罩层。例如苹果地图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、安卓手机将系统导航方式切换到全面屏手势，则不存在物理返回按键

点击弹框中的功能按钮，通常需要立即执行并关闭弹框。一定是先执行再关闭弹框，而不是先关闭弹框再执行。用户执行某功能按钮后，遵循即时响应原则，系统必须要反馈用户在执行用户操作。
为什么点击执行功能按钮需要关闭弹框？因为弹框是否关闭，和用户目标有关。用户主动触发某操作唤起弹框，首先是有用户目标的，其次，用户通过点击弹框内某功能按钮，执行任务来实现用户目标。
此外，也存在点击执行功能按钮立即执行不关闭弹框的场景，比如开关选择器，但本质还是围绕当前用户目标来进行决策是否关闭弹框。

作者：CNLILY
来源：站酷

评论(0) 浏览(75)

122024-3

提高产品的易用性、可用性与无障碍设计概念分享

博博设计思维

一、概念解析与设计思维

本次分享首先对比解析一下两个概念：易用性和可用性

易用性：易用性是指系统或服务的上手难度和便捷程度。优秀的易用性设计方案可以减少学习成本和操作难度，让用户更容易地理解产品功能进而便捷的体验产品服务。

可用性：可用性是指系统或服务的可访问性和可理解性。好的可用性设计可以让用户更容易地使用产品或服务，更好的满足用户需求，提高用户满意度和忠诚度。

二者的区别：个人理解易用性侧重于产品的使用是否便捷，学习成本是否足够小。而可用性侧重于产品或服务是否能够很好的满足用户需求。

当一款产品满足了基本的可用性和易用性之后，该从哪些方面优化设计方案呢？答案是：包容性设计与无障碍设计原则。

二、如何提高产品的易用性和可用性

第一部分首先分享一下提升产品易用性的思路和案例解析

表达层

1、视觉上看起来是可用的。

我们平时使用app时看到的按钮或图标是什么样的呢？如果在页面中我们看到一个按钮是灰色的，对于用户来说该功能是不可访问的，灰色传达给用户的心理暗示是不可点击。只有当某些条件不满足导致该功能不可用时，才会将其功能入口设计为灰色状态。

2、减少负荷

负荷指的是用户完成某一个任务或执行某一交互行为时，大脑需要处理的信息总量。理论上来说，面临的选择越多，做出决定所花费的时间就越长，所带来的认知负荷就越大。根据《简约至上》一书，可以通过以下4种策略减少认知负荷：删除、分层、隐藏、转移。

删除：是指根据交互流程的各个节点，合理删除不必要的内容，降低用户的阅读负荷。

分层：将页面内容按照一定的规律组织分类，把信息分成模块和有机单元来处理复杂问题，提高用户认知效率。

隐藏：从使用频率来讲对内容进行高频和低频的拆分，强化高频内容，对低频内容进行合适的隐藏。

转移：对复杂任务进行巧妙转移，拆成多个步骤来完成，让每一步都容易理解。

3、区分占比权重

当用户不得不面对较多选项和页面内容时，对主要和次要的页面元素通过视觉权重进行区分，做好设计上的归类，能够提升用户做决定的效率。

4、贴合用户使用场景

不同的用户和使用场景会影响信息表达的准确性。如果你的目标用户包含上了年纪或者有视觉障碍的人，可以考虑采用大号字体来提升可读性。

行为层

1、选择代替输入

交互行为中输入操作的成本很高，选择代替输入可以降低用户的交互成本，提高录入效率。所以在表单的设计中，对于可以选择的输入项，优先使用选择进行操作而不是手动输入。

2、降低沉默成本

人们在进行某些行为决策时，不仅看这件事对自己有没有好处，也看过去是不是已经在这件事情上有过投入。在用户进行编辑操作时，允许用户退出并保存已编辑的内容可以有效降低用户的沉默成本。

3、减少重复过程

重复的行为是无效的，用户是懒惰的，都不喜欢进行重复操作。一般来讲，用户初次使用某一功能时，所需要填写的信息是最多的，当用户已经有了一定的行为时，设计者可以根据用户已有的行为数据，通过减少重复过程来提高产品的易用性。

4、行为一致性

在我们使用的产品中有很多交互操作的逻辑本质是相同的，不需要为这些相同的交互操作设计多种逻辑或方案。当用户对某种行为有了一定预期后，就会期望产品按照预期的行为方式执行，因此一致的交互行为可以提高用户的易用感受。

5、基于行为的智能化引导（千人千面）

这是一种基于算法的易用性提升，在大数据、人工智能等技术支持下，产品具备的主动满足用户各种需求的属性。系统会根据用户的行为做出一些个性化引导，合适的引导不仅仅能够提高产品的易用性，还能够帮助产品取得更多转化。

第二部分接下来分享一下怎么提升产品可用性

1、符合用户需求

这里需要设计师深入进行用户研究，挖掘用户真实需求并结合市场趋势针对性地设计产品或服务，从而确保可用性符合用户期望。

2、明确的导航和布局

良好的导航和对信息的布局设计可以提高用户的使用效率和满意度。

3、响应式设计

当用户在不同设备和屏幕尺寸下使用产品或服务时，确保在不同的使用场景上都能获得良好的用户体验。包含响应式布局、自适应界面等方面的内容，让用户在不同设备上都能够顺畅地使用产品或服务。

三、包容性设计与无障碍设计

1、包容性设计（inclusive design）是最广义的设计概念，希望让产品可以被不同用户（包括不同身体能力、语言、文化、性别、年龄、性取向等）使用。例如抖音和TikTok。

2、无障碍设计（accessible design）针对身体能力差异，特针对残障使用场景（包括健全人会遇到的临时性与情境性残障）做出友善的设计。在国内，「无障碍设计」很好地对应技术界的「信息无障碍」概念。

那么什么是无障碍设计呢？无障碍设计是包容性设计中的一个属性，它可以被定义为一组要实现的标准。它主要考虑为残疾人在物理或数字空间中提供同等的体验，比如通过键盘导航、字幕等方法。

3、场景性残疾。残疾是相对的，它不仅仅只是一个健康问题。残疾反映了一个人的身体特征和他/她所生活的社会特征之间的相互作用。如果残疾与环境有关，那么在某种程度上我们都是残疾的。因为环境总是影响我们的日常生活。例如，怀孕的母亲有行动障碍；手部受伤的人在痊愈前只能单手提物；在嘈杂地铁中的乘客有听力障碍等等。针对以上场景我们可以称之为场景性残疾。此时“残疾”可以被更广泛性地理解为人与人、环境和科技产品交互过程中，可能出现的不同程度不同种类的能力缺失。

以下是用户使用产品过程中可能遇到的场景性残疾：

1、当自己手指蜕皮或手指受伤贴上创口贴时无法通过指纹解锁手机。

2、戴口罩或化妆程度较高时无法通过面容ID解锁屏幕。

3、晴天室外因手机亮度不足导致无法看清屏幕。

4、夜间拿出手机扫码骑单车时成功率下降

5、驾驶新能源汽车出隧道时不易看清车载屏幕

6、女生刚做完美甲时打字不方便

针对以上场景性残疾该怎么输出设计方案呢？

一般思路是对同一功能设置多种行为路径来完成。例如针对解锁手机场景，搭配密码解锁可供用户打开手机。当共享单车无法扫码解锁时，支持手动输入开锁。

用户群体包含色盲色弱人群时，对产品界面做针对性调整。

用户需要降低画面蓝光时，使用护眼模式可以满足个性化需求。

用户处于无网络或弱网环境时，产品提供相应功能满足用户需求。

新浪微博会在无网络环境自动保存内容至草稿箱。

微信的处理方案基本对用户无打扰，个人认为更胜一筹。

用户在只能用耳朵听内容，无法观看画面时，将视频服务转化为音频服务。

四、总结

在实际工作中当我们输出体验设计方案时，易用性和可用性是需要时刻关注的设计原则。通过提高产品的易用性和可用性，可以创造出令人愉悦的用户体验，让用户真切地感受到产品的细腻和温度。遵循包容性设计和无障碍设计原则给用户提供更多样的交互方式，以便最好地满足不同情景下的需求。

作者：寂静之间
来源：站酷

评论(0) 浏览(72)

122024-3

10分钟带你快速了解Bento设计风格

博博设计思维

Part.1 起源与流行

Bento风格设计是一种独特且富有创意的设计方式，其灵感主要来源于日式便当盒的布局形式。这种设计方式强调将内容划分为不同的小块，并以网格的形式进行排列组合，以此达到视觉上的和谐与统一。

近几年，Apple引领了设计大趋势，而 Bento 正是其中之一。他们在很多场景开始使用这种设计风格，包括网页设计、APP设计、产品介绍等，随处可见。

Bento设计风格的简约、清新和富有变化的特点也符合了现代审美趋势，特别是在数字产品和互联网应用方面。随着人们对于界面美观性和易用性的要求不断提高，Bento设计风格也逐渐受到了更多设计师和用户的青睐。

与许多其他 UI 设计趋势不同，Bento 实际上不仅仅是一种漂亮的布局风格。它现在已经发展到包括产品演示，与其他一些独特的布局混合，甚至采用新的视觉设计概念进行风格化。

Part.2 风格解析

内容分块与结构化布局

Bento风格设计注重将整体内容分割成一个个小的区块，并通过网格系统来布局这些区块。这种分块化的设计使得内容更加结构化，易于用户理解和浏览。同时，网格系统也确保了设计的整齐和一致性，提升了视觉美感。

视觉层次与优先级

擅长利用不同区块的大小、颜色和位置来创建视觉层次，从而突出内容的优先级。重要的内容通常会被放置在更显眼的位置，或者通过更鲜明的颜色或更大的字体来吸引用户的注意力。

简洁性与清晰度

Bento风格设计追求简洁明了，避免过多的装饰和复杂的元素。这种设计方式不仅使得界面更加清爽，也提高了信息的可读性。同时，清晰的布局和明确的导航也能帮助用户快速找到所需内容。

灵活性与适应性

Bento风格设计具有很高的灵活性和适应性，可以适应不同尺寸和分辨率的屏幕。这使得设计能够在多种设备上保持一致的用户体验，无论是手机、平板还是桌面电脑。

Part.3 布局原理

「形式服从功能」是建筑大师路易斯·沙利文提出的著名设计原则，这一原则强调设计的首要任务是满足功能需求，而形式则应该服务于这一功能目标。

形式要体现功能，更要服务好功能。它也是UI设计进入扁平化时代后，界面设计所一贯遵循的基本原则之一。但时下随着各种3D、拟物风格的再次流行，以及大量的动画、插图等运用，这一原则更难让设计师们把握。

而现在Bento设计风格又恰恰形式感极强，我们该如何把握呢？首先我们可以先了解Bento布局原理逻辑再说，相信能找到答案。

原理分析

假如我们在一个 1440X900 像素的框架内添加 bento 式布局，那首先要有一个下图这样的基础网格：

适合Bento的网格如何得出呢？我们可以基于 4 点网格，把列数和行数皆设为 8（也可以不一致），间隔均设置为 20 像素，列宽和行宽不必设定，在框架内弹性自适应就可以了。

那我们可以分别得出纵向网格及横向网格：

再把横、纵向两套网格交叠就可以得到一开始的基础网格，接下来，你就可以根据需求随意设定 bento 式布局了。

到这里是不是感觉很容易了？是的，原始网格的参数可以根据你的设计需求来定，布局的自由度也很大，可以设计出各种不同组合的Bento。

Bento布局与网格逻辑紧密相连，形成了一种独特且高效的视觉呈现方式。网格在这里不仅是布局的基础，更是实现内容有序排列和组织的关键工具，网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构，将整体内容划分为一个个独立的区块。这些区块在网格的指导下，按照既定的规则进行排列，确保了布局的整齐划一和视觉上的和谐统一。

网格逻辑还使得Bento布局具有高度的可扩展性和适应性。设计师可以根据实际需要调整网格的尺寸、间距和排列方式，以适应不同屏幕尺寸和设备类型。这种灵活性使得Bento布局能够在各种场景下都呈现出良好的视觉效果和用户体验。

Part.4 案例运用

Bento在banner中的运用

Bento布局帮助设计师在banner中合理安排各个元素的位置和大小，确保整体布局的和谐与统一。通过精心设置网格，设计师可以将文字、图片、按钮等元素放置在恰当的位置，使banner看起来整洁有序，易于吸引用户的注意力。

巧妙的把不同的素材的以Bento形式组合在一起

Bento在产品介绍中的运用

Bento强调形式服从功能的设计原则，这在产品介绍中尤为重要。设计师会深入挖掘产品的功能和特点，通过合理的布局和视觉元素，将产品的实用性、易用性和创新性等方面凸显出来。这样的设计不仅能让消费者更好地了解产品，还能增强他们对产品的信任感和购买欲望。

Bento在个人博客中的运用

Bento设计注重色彩搭配和视觉元素的运用。在个人博客中，设计师可以根据个人喜好和博客主题，选择适合的色彩和字体，以及添加适当的图片和图标，从而打造出独特且吸引人的视觉效果。这样的设计不仅能够吸引读者的眼球，还能增强博客的品牌形象和个人特色。

Bento在复杂数据中的运用

Bento设计强调信息的结构化。对于复杂信息，如大量的数据、文本或多种类型的媒体内容，Bento通过网格化的布局和模块化的设计，将信息划分为不同的区块，并依据逻辑关系和重要性进行排列。这种结构化的设计方式使得复杂信息更加有序，用户能够轻松地找到所需的信息，提高了信息获取的效率。

Bento在品牌设计中的运用

Bento在平面设计中的运用主要体现在其独特的布局理念、视觉层次感和设计细节上。这些元素共同为平面设计作品赋予了清晰、专业且富有吸引力的外观。

Bento在移动端设计中的运用

Bento在移动端设计中的运用非常广泛，并且取得了显著的效果。其基于严格网格的布局方式特别适合在移动设备（如手机或平板电脑）的小屏幕上展示内容，这种设计不仅易于浏览，而且使得内容在有限的空间内得以高效展示。

Bento在电商设计中的运用

Bento强调信息的清晰呈现。在电商设计中，这意味着商品信息、价格、促销活动等关键内容需要被突出展示，以便用户快速了解和比较。Bento通过网格化的布局和简洁的视觉效果，将复杂的信息进行有序的组织和分类，使用户能够轻松找到所需信息，提高了浏览和购物的效率。

Part.4 优势总结

ok,我们前面详细分析了Bento设计的原理以及在各个场景中应用，那我们应该如何运用到我们日常工作中去呢？Bento设计切记生搬硬套，一定要根据需求而来，下面就讲讲Bento的优劣势，希望能够帮助到我们更好的理解Bento设计风格。

优势

清晰高效，有效传达信息

基于严格网格的布局使得内容呈现有序且易于理解，Bento设计通过明确的分隔，为界面提供了清晰的结构，使用户可以快速理解和导航。不同的功能和内容被组织在不同的隔层中，有助于提高信息的可读性和可理解性。

形式感强，视觉冲击力足

通过调整内容块的大小、样式和颜色，可以轻松创建出视觉层次感，突出重要信息，提升页面的可读性和吸引力。

设计规范，逻辑有规律可循

网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构，将整体内容划分为一个个独立的区块。这些区块在网格的指导下，按照既定的规则进行排列，确保了布局的整齐划一和视觉上的和谐统一。

包容万象，随意拓展、适配

Bento几乎支持所有主流的媒介，如链接、图片、视频、文字等，甚至还包括地图，这使得用户能够轻松地在平台上展示和分享各种类型的内容。

劣势

一定程度上限制了灵活性和创意性

由于Bento设计强调基于网格的布局，这在一定程度上限制了设计的灵活性和创意性。设计师可能需要在遵循网格规则的同时，努力寻找创新和突破。

图片展示比例限制

由于展示的尺寸样式有限，有时可能无法很好地展示原图的比例和效果，这可能会影响用户对内容的理解和接受度。

作者：墨一影
来源：站酷

评论(0) 浏览(82)

112024-3

新手引导 I 用户体验入门秘籍！

前端达人设计思维

评论(0) 浏览(76)

082024-3

弹框关闭的七种交互方式

前端达人设计思维

前言：日常设计工作中，我们设计师可能会面临以下设计问题：

移动端弹框什么时候需要关闭按钮？什么时候不需要关闭按钮？
界面中间的确认取消警示弹框，是否需要在右上角添加“关闭”icon按钮？
手势关闭弹框需要注意什么？
iOS和安卓两端关闭弹框有什么区别？
点击弹框中的任务按钮，弹框是关闭还是不收起？

统一使用图标按钮，以icon“x”的形式，显示在底部弹框的右上角，用户通过点击“关闭icon”图标按钮来关闭弹框。

使用场景

当弹框中包含内容和功能操作时，应提供一个关闭icon“x”的图标按钮，以让用户能够主动关闭弹框并进行相应的操作。

何时不需要关闭按钮icon“x”？

2.全局提示toast（自动关闭）。

3.功能入口类型弹框，为了保持界面简洁，不需要“关闭icon”，如智能文档编辑模式的底部悬浮工具栏。

4.警示或通知类型的弹框，不要关闭icon。

关闭按钮位置

关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。

关闭按钮icon“x”何时需要展示在左上角？

页面级：当页面层级超过3级时，为了便于用户能快速回到一级页面，无需原路返回，可以将关闭按钮“x” 置于左上角，位于「返回」按钮右侧。

多语言和国际化用户习惯：特定语言和文化习惯，从右向左阅读顺序，遵循用户阅读习惯。例如台湾、日本等。

用户点击弹框外部区域，即遮罩层，可关闭弹框。

遮罩层不可点击场景

1、模态弹框，即“阻断式”，必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。

2、弹框的内容区域，包含表单输入框等需要用户提交数据，为了防止误操作导致用户输入的数据丢失，遮罩层不可点击。

3、有前置限制条件，需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景，必须要用户主动勾选同意协议选项。

遮罩层展示逻辑

1、非模态弹框，不加遮罩层；模态弹框，加遮罩层；

2、遮罩层统一使用半透明黑色蒙层，色值和不透明度的数值由UI定义；

3、遮罩层可视高度，遵循移动端最小点击区域48dp*48dp高度的交互热区，保证用户可点击

遮罩层的覆盖范围

遮罩层需覆盖标题栏，需遵循iOS、Android、微信小程序平台规范。其中微信小程序端，遮罩层覆盖标题栏，但不可覆盖标题栏右侧胶囊按钮。
若是内嵌H5页面，因客观条件限制，则弹框之下的遮罩层无需覆盖标题栏。
以上提到模态弹框和非模态弹框两种弹框模式，要想更清晰理解两种模式弹框的关闭交互方式，需要理解两者之间的交互区别。‍‍

模态弹框和非模态弹框的交互区别

模态弹框‍‍‍‍‍‍‍‍‍‍‍‍：

用户只能操作弹框内的交互元素，弹框外部区域不可操作，需要加半透明遮罩层。例如底部操作型弹框。

非模态弹框‍‍‍‍‍‍‍‍‍‍‍

用户可以并行操作弹框内和弹框外部区域的交互元素，不要加半透明遮罩层。例如苹果地图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、安卓手机将系统导航方式切换到全面屏手势，则不存在物理返回按键

点击弹框中的功能按钮，通常需要立即执行并关闭弹框。一定是先执行再关闭弹框，而不是先关闭弹框再执行。用户执行某功能按钮后，遵循即时响应原则，系统必须要反馈用户在执行用户操作。
为什么点击执行功能按钮需要关闭弹框？因为弹框是否关闭，和用户目标有关。用户主动触发某操作唤起弹框，首先是有用户目标的，其次，用户通过点击弹框内某功能按钮，执行任务来实现用户目标。
此外，也存在点击执行功能按钮立即执行不关闭弹框的场景，比如开关选择器，但本质还是围绕当前用户目标来进行决策是否关闭弹框。

结语：任何设计都有它遵循的规律

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

评论(0) 浏览(65)

072024-3

谈谈设计创意获取的思路

前端达人设计思维

读了一本书，杰夫戴维森的《The 60 sencond Innovation 》，讲的是

创意的获取方式

。因为国外的设计环境与国内还是有很大区别的（所以这本书的微信读书书评并不是很高），我摘选了几个我认为

适合国内现状的创意获取方法，与大家共享

。

一、关于设计趋势

设计创意是符合设计趋势的，我们需要关注设计趋势。

我觉得趋势这个词，书里面有个观点还是可以的：

关注长期趋势

。

为什么这么说呢，因为趋势不是朝三暮四的，往往会保持很长的时间。所以我们在做设计创意的时候可以适当关注长期趋势。

1.1关注社会趋势的重要性

最直接影响的就是职业生涯的发展

。譬如你是一名UI设计师或者即将毕业的学生，在当前的形势下UI设计师已经趋于饱和，你想完成一次职业方向的确定或转变，你会往哪里走？

那么你需要关注设计趋势。

如果你选择的是一个接近饱和的方向，那么你的薪资几年内肯定也得不到提高。有的设计师经常会说我做UI设计5-7年了，但是薪资依然还是1万，我

只能说你现在没有什么竞争力。

所以趁着年轻，你可以考虑换一条细分的赛道。

譬如逐渐趋于饱和的车载HMI设计，即将爆发的类似于Vision Pro的增强现实设计。。。

来自于苹果官网

1.2如何了解设计趋势

首先，最直观的就是设计大事件。

譬如苹果等著名品牌引导的设计承载方式的变革。从罗永浩推出无限屏概念开始，其实类似的空间设计就已经处于慢热状态。直到苹果正式发布了Vision Pro，这种大事件直接将增强空间设计推向了高潮。

我们可以通过苹果的官方网站，去了解Vision Pro的使用方法，以此来感受Vision pro可以改变什么？文本编辑、影视、阅读以及游戏等等用户体验与手机操作的不同点，从而延伸出未来可以商业化的场景方向，可以做预知性的推断。

有兴趣的设计师还可以通过苹果发布的

Vision pro模拟器

，来尝试性地输出一些创新的想法和创意，以此来建立自己在增强空间设计上的设计经验和竞争力。

其次，可以通过设计网站、社区和平台。

譬如优设、站酷、人人都是产品经理等一些设计资讯平台。很多设计师会将国外的一些好的设计趋势的文章翻译，我们可以通过这些文章来获取设计趋势。

再者，可以通过行业内的研究报告。

譬如艾瑞咨询发布的《2023年AIGC场景应用展望研究报告》，里面就阐述了下一年甚至是未来AIGC的发展方向。

二、经验积累促进设计创意输出

2.1经验积累到一定程度的好处

一般设计师在自身发展的同时，也都会留意身边设计师发展的如何，嫉妒和对比是很正常的。有的设计师会觉得为什么他年纪不大却能当领导，为什么他的薪资比我多那么多，为什么每次任务下来后他总是做的又快又好。。。

因为这是工作/设计经验给他带来了各种红利。

为什么经验丰富的设计师创意那么多呢？那就是

尤尼卡效应（灵感的悄然而至）

。有经验的设计师，职业生涯过程中看过无数的案例，想过无数的方案，做过无数的作品。所以，他们可以在看到问题的时候，立马给你输出设计方案。如果你能达到这种地步，你的竞争力也将无可匹敌。

2.2经验积累下的灵感输出

做到两点：

【建立方向】和【埋头苦干】

。

毕业5年内的设计师，可以不用过多的去关注别人与自己的差别，你要做的就是【建立方向】和【埋头苦干】，幸运只光顾有准备的头脑。

那些有经验的设计师也都是摸爬滚打一点一滴练出来的。过年的时候跟大学同学吃饭，设计耕耘10余载，他已经是某设计院的总监了。想想与他一起住过的小黑屋，想想我们打地铺黑灯瞎火的做项目，为了钱么？是因为热爱，想做出更好的作品。再看看他一路走来的工作历程，他基本上在一个垂直方向上深耕细作，从场馆的设计方案到制定预算，从项目投标到施工流程，整个一套流程都驾轻就熟了。

2.3不断尝试后的灵感输出

设计师们都知道，灵感不会轻易上门。

创意是被逼出来的

！这一点设计师们都很有感触。

这里的经验积累不完全是工作年限的意思，也有深度挖掘之意

。

尤尼卡效应要求我们，即使在设计工作中没有灵感的时候，继续尝试着梳理思路不断钻研，肯定会有灵感乍现的那一刻。就像书中说的那样：

因为创新是一个渐进的过程，一次加上一点思考，最终会柳暗花明。

MIdjourny输出：设计师绞尽脑汁

三、创意汇报

3.1高中低方案战略

要想实现创意被大家更好地接受，通常可以准备三种可能的方案：1.最佳方案2.中间方案3.最差方案

领导的决策，也需要有一定的参考。我们给出的方案，尽量涵盖高中低三种维度，以便进行对比。

3.2选择时机进行推荐

创意方案出来后，你可以安排一次会议/宣讲会，阐述一下自己的设计方案。聪明的做法就是在会议召开之前，先私下把方案简单过一下，以获得一定的支持。

3.3学会倾听

你在汇报项目的过程中，别人会有一些想法和建议，麻烦你认真倾听。不要着急去打断，以免造成厌恶性沟通。

3.4不要放弃

创意被否定很正常。

真正能一次通过的创意实属罕见，就好比不能因为拿不到第一就不上场比赛一样，你也不应该因为创意被否一次就永远自暴自弃。

四、创意输出需要心流状态

心流状态是指自己已经完全沉浸在设计创意中了。

心流状态可以很好地帮助设计师提高工作效率，促进设计创意的输出。

4.1如何获得心流状态

环境很重要。

对于设计师而言，通过调整周围的环境，比如说引进一些比较明亮的色彩、图片、标语等，可以大大激发一个人的学习能力。

开放、整洁、平整的表面有助于整理人的思维，所以一般来说，你的桌子越干净，就越容易提高工作效率，应对工作中的各种挑战。

五、创意伙伴日常沟通

众人拾柴火焰高。

5.1与什么样的人沟通

与相同价值的人沟通。

《探寻第一名》(Looking Out for Number One)一书中，作者罗伯特·林格(Robert Ringer)指出，持久的关系——一方为另一方提供相同的价值，双方的利益交织在一起，让这种关系持续下去——非常有价值。

因此

你找的人必定是彼此都珍视的人，可以成为创意伙伴

。你可以每个月找创意伙伴聊聊天喝喝茶充充电，获取一些新的想法，让自己的大脑保持常青常新。马云说过，企业在不缺钱的时候融资，而不是缺钱了再去融资。

设计圈有认识的大佬都很重视沟通，会经常跟身边的朋友聊天，其实这很大程度上

可以让一个人拥有多个人的经验和能力。

所以设计师应该尝试着开放一些，而不是闭门造车。

MIdjourny输出：设计师聊天

六、公司层面：讨论/沟通氛围的重要性

公司层面，应该鼓励设计师在会议上多阐述自己的意见。

很多公司是不是有这样一种现象：开会的时候鸦雀无声，只听到汇报的人胆怯地练着演讲稿或者说着自己的方案，让其他人给意见的时候基本无人举手，只能等领导给一些修改意见，

然后这个设计方案就变成了领导认可的设计方案了。

其实这种工作氛围真的非常糟糕，限制了设计师的创意的发挥，同时也让产品成为了一个片面性的产品。

6.1建立讨论沟通氛围的好处

所以团队的讨论氛围一定要建立起来。

书里这样描述：

1.当一个人感觉自己的想法受人欢迎的时候，他会想出更多有创意的点子来解决眼前的问题——有时可能会在会上发表看法，有时则是在私下里提出建议；

2.如果团队的每个成员都感觉更有满足感，他们的参与热情就会高涨。想想看，如果人人都愿意献计献策，事情将会变得多么容易啊！

6.2好好先生对设计创意的阻碍

讨论沟通，也促进了不同声音的展现。团队需要不同的声音，团队需要谦和而坚定的人来告诉我们事情的本来面目，要听到赤裸裸的现实。

感谢大家阅读。

【阿琦设计日记】，用最接地气的语言，讲述设计师成长道路上的故事。

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

评论(0) 浏览(76)

« 1 2 3 4 5 6 7 ... 189 »

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

设计思维

分类

日历

链接

blogger

存档