设计思维

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

博博 设计思维

瓷片区是我们设计师在平时的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开发

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

博博 设计思维

一、腾讯 — 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开发

B端产品的C化该怎么去做?

前端达人 设计思维

B端C化由来已久,概念化的东西怎么变为现实?阿鱼带你一步一步来...(ps:纯干货,有图有真相)
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?
 
 
B端产品的C化该怎么去做?

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

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

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



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

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

博博 设计思维

 
设计是一种创造性的过程,它涉及到对问题的思考、分析和解决。一个优秀解决方案的产出离不开缜密、科学的策略制定和方法运用,这些概念在实际工作中往往存在模糊界限,本文将探讨这些概念定义、区别、关系以及实际作用。
 
一、概念区分
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端后台产品,我们会想到业务复杂、信息庞大、用户角色多、页面层级深、使用门槛高等特征。这些特征让后台产品在设计时更强调“简单直接”,无需多余的设计元素,相比之下,没有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开发

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

博博 设计思维

一、概念解析与设计思维
本次分享首先对比解析一下两个概念:易用性和可用性
易用性:易用性是指系统或服务的上手难度和便捷程度。优秀的易用性设计方案可以减少学习成本和操作难度,让用户更容易地理解产品功能进而便捷的体验产品服务。
可用性:可用性是指系统或服务的可访问性和可理解性。好的可用性设计可以让用户更容易地使用产品或服务,更好的满足用户需求,提高用户满意度和忠诚度。
提高产品的易用性、可用性与无障碍设计概念分享
 
二者的区别:个人理解易用性侧重于产品的使用是否便捷,学习成本是否足够小。而可用性侧重于产品或服务是否能够很好的满足用户需求。
当一款产品满足了基本的可用性和易用性之后,该从哪些方面优化设计方案呢?答案是:包容性设计与无障碍设计原则。
 
提高产品的易用性、可用性与无障碍设计概念分享
 
二、如何提高产品的易用性和可用性
第一部分首先分享一下提升产品易用性的思路和案例解析
表达层
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、女生刚做完美甲时打字不方便
 
针对以上场景性残疾该怎么输出设计方案呢?
一般思路是对同一功能设置多种行为路径来完成。例如针对解锁手机场景,搭配密码解锁可供用户打开手机。当共享单车无法扫码解锁时,支持手动输入开锁。
提高产品的易用性、可用性与无障碍设计概念分享
 
用户群体包含色盲色弱人群时,对产品界面做针对性调整。
 
提高产品的易用性、可用性与无障碍设计概念分享
用户需要降低画面蓝光时,使用护眼模式可以满足个性化需求。
 
提高产品的易用性、可用性与无障碍设计概念分享
 
用户处于无网络或弱网环境时,产品提供相应功能满足用户需求。
 
提高产品的易用性、可用性与无障碍设计概念分享
 
新浪微博会在无网络环境自动保存内容至草稿箱。
 
提高产品的易用性、可用性与无障碍设计概念分享
 
微信的处理方案基本对用户无打扰,个人认为更胜一筹。
 
提高产品的易用性、可用性与无障碍设计概念分享
 
用户在只能用耳朵听内容,无法观看画面时,将视频服务转化为音频服务。
 
提高产品的易用性、可用性与无障碍设计概念分享
 
四、总结
在实际工作中当我们输出体验设计方案时,易用性和可用性是需要时刻关注的设计原则。通过提高产品的易用性和可用性,可以创造出令人愉悦的用户体验,让用户真切地感受到产品的细腻和温度。遵循包容性设计和无障碍设计原则给用户提供更多样的交互方式,以便最好地满足不同情景下的需求。


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

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

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

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

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

博博 设计思维

Part.1 起源与流行
 
Bento风格设计是一种独特且富有创意的设计方式,其灵感主要来源于日式便当盒的布局形式。这种设计方式强调将内容划分为不同的小块,并以网格的形式进行排列组合,以此达到视觉上的和谐与统一。
10分钟带你快速了解Bento设计风格
 
近几年,Apple引领了设计大趋势,而 Bento 正是其中之一。他们在很多场景开始使用这种设计风格,包括网页设计、APP设计、产品介绍等,随处可见。
 
Bento设计风格的简约、清新和富有变化的特点也符合了现代审美趋势,特别是在数字产品和互联网应用方面。随着人们对于界面美观性和易用性的要求不断提高,Bento设计风格也逐渐受到了更多设计师和用户的青睐。
 
与许多其他 UI 设计趋势不同,Bento 实际上不仅仅是一种漂亮的布局风格。它现在已经发展到包括产品演示,与其他一些独特的布局混合,甚至采用新的视觉设计概念进行风格化。
 
10分钟带你快速了解Bento设计风格
 
Part.2 风格解析
10分钟带你快速了解Bento设计风格
 
内容分块与结构化布局
Bento风格设计注重将整体内容分割成一个个小的区块,并通过网格系统来布局这些区块。这种分块化的设计使得内容更加结构化,易于用户理解和浏览。同时,网格系统也确保了设计的整齐和一致性,提升了视觉美感。
 
视觉层次与优先级
擅长利用不同区块的大小、颜色和位置来创建视觉层次,从而突出内容的优先级。重要的内容通常会被放置在更显眼的位置,或者通过更鲜明的颜色或更大的字体来吸引用户的注意力。
 
简洁性与清晰度
Bento风格设计追求简洁明了,避免过多的装饰和复杂的元素。这种设计方式不仅使得界面更加清爽,也提高了信息的可读性。同时,清晰的布局和明确的导航也能帮助用户快速找到所需内容。
 
灵活性与适应性
Bento风格设计具有很高的灵活性和适应性,可以适应不同尺寸和分辨率的屏幕。这使得设计能够在多种设备上保持一致的用户体验,无论是手机、平板还是桌面电脑。
10分钟带你快速了解Bento设计风格
 
Part.3 布局原理
10分钟带你快速了解Bento设计风格
 
「形式服从功能」是建筑大师路易斯·沙利文提出的著名设计原则,这一原则强调设计的首要任务是满足功能需求,而形式则应该服务于这一功能目标。
 
形式要体现功能,更要服务好功能。它也是UI设计进入扁平化时代后,界面设计所一贯遵循的基本原则之一。但时下随着各种3D、拟物风格的再次流行,以及大量的动画、插图等运用,这一原则更难让设计师们把握。
 
而现在Bento设计风格又恰恰形式感极强,我们该如何把握呢?首先我们可以先了解Bento布局原理逻辑再说,相信能找到答案。
 
原理分析
假如我们在一个 1440X900 像素的框架内添加 bento 式布局,那首先要有一个下图这样的基础网格:
10分钟带你快速了解Bento设计风格
 
适合Bento的网格如何得出呢?我们可以基于 4 点网格,把列数和行数皆设为 8(也可以不一致),间隔均设置为 20 像素,列宽和行宽不必设定,在框架内弹性自适应就可以了。
 
那我们可以分别得出纵向网格及横向网格:
10分钟带你快速了解Bento设计风格
 
 
10分钟带你快速了解Bento设计风格
 
再把横、纵向两套网格交叠就可以得到一开始的基础网格,接下来,你就可以根据需求随意设定 bento 式布局了。
 
10分钟带你快速了解Bento设计风格
 
到这里是不是感觉很容易了?是的,原始网格的参数可以根据你的设计需求来定,布局的自由度也很大,可以设计出各种不同组合的Bento。
10分钟带你快速了解Bento设计风格
 
Bento布局与网格逻辑紧密相连,形成了一种独特且高效的视觉呈现方式。网格在这里不仅是布局的基础,更是实现内容有序排列和组织的关键工具,网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构,将整体内容划分为一个个独立的区块。这些区块在网格的指导下,按照既定的规则进行排列,确保了布局的整齐划一和视觉上的和谐统一。
 
网格逻辑还使得Bento布局具有高度的可扩展性和适应性。设计师可以根据实际需要调整网格的尺寸、间距和排列方式,以适应不同屏幕尺寸和设备类型。这种灵活性使得Bento布局能够在各种场景下都呈现出良好的视觉效果和用户体验。
 
Part.4 案例运用
 
Bento在banner中的运用
Bento布局帮助设计师在banner中合理安排各个元素的位置和大小,确保整体布局的和谐与统一。通过精心设置网格,设计师可以将文字、图片、按钮等元素放置在恰当的位置,使banner看起来整洁有序,易于吸引用户的注意力。
巧妙的把不同的素材的以Bento形式组合在一起
巧妙的把不同的素材的以Bento形式组合在一起
 
Bento在产品介绍中的运用
Bento强调形式服从功能的设计原则,这在产品介绍中尤为重要。设计师会深入挖掘产品的功能和特点,通过合理的布局和视觉元素,将产品的实用性、易用性和创新性等方面凸显出来。这样的设计不仅能让消费者更好地了解产品,还能增强他们对产品的信任感和购买欲望。
10分钟带你快速了解Bento设计风格
 
Bento在个人博客中的运用
Bento设计注重色彩搭配和视觉元素的运用。在个人博客中,设计师可以根据个人喜好和博客主题,选择适合的色彩和字体,以及添加适当的图片和图标,从而打造出独特且吸引人的视觉效果。这样的设计不仅能够吸引读者的眼球,还能增强博客的品牌形象和个人特色。
10分钟带你快速了解Bento设计风格
 
Bento在复杂数据中的运用
Bento设计强调信息的结构化。对于复杂信息,如大量的数据、文本或多种类型的媒体内容,Bento通过网格化的布局和模块化的设计,将信息划分为不同的区块,并依据逻辑关系和重要性进行排列。这种结构化的设计方式使得复杂信息更加有序,用户能够轻松地找到所需的信息,提高了信息获取的效率。
10分钟带你快速了解Bento设计风格
 
Bento在品牌设计中的运用
Bento在平面设计中的运用主要体现在其独特的布局理念、视觉层次感和设计细节上。这些元素共同为平面设计作品赋予了清晰、专业且富有吸引力的外观。
10分钟带你快速了解Bento设计风格
 
Bento在移动端设计中的运用
Bento在移动端设计中的运用非常广泛,并且取得了显著的效果。其基于严格网格的布局方式特别适合在移动设备(如手机或平板电脑)的小屏幕上展示内容,这种设计不仅易于浏览,而且使得内容在有限的空间内得以高效展示。
10分钟带你快速了解Bento设计风格
 
Bento在电商设计中的运用
Bento强调信息的清晰呈现。在电商设计中,这意味着商品信息、价格、促销活动等关键内容需要被突出展示,以便用户快速了解和比较。Bento通过网格化的布局和简洁的视觉效果,将复杂的信息进行有序的组织和分类,使用户能够轻松找到所需信息,提高了浏览和购物的效率。
10分钟带你快速了解Bento设计风格
 
Part.4 优势总结
ok,我们前面详细分析了Bento设计的原理以及在各个场景中应用,那我们应该如何运用到我们日常工作中去呢?Bento设计切记生搬硬套,一定要根据需求而来,下面就讲讲Bento的优劣势,希望能够帮助到我们更好的理解Bento设计风格。
 
优势
 
清晰高效,有效传达信息
基于严格网格的布局使得内容呈现有序且易于理解,Bento设计通过明确的分隔,为界面提供了清晰的结构,使用户可以快速理解和导航。不同的功能和内容被组织在不同的隔层中,有助于提高信息的可读性和可理解性。
 
形式感强,视觉冲击力足
通过调整内容块的大小、样式和颜色,可以轻松创建出视觉层次感,突出重要信息,提升页面的可读性和吸引力。
 
设计规范,逻辑有规律可循
网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构,将整体内容划分为一个个独立的区块。这些区块在网格的指导下,按照既定的规则进行排列,确保了布局的整齐划一和视觉上的和谐统一。
 
包容万象,随意拓展、适配
Bento几乎支持所有主流的媒介,如链接、图片、视频、文字等,甚至还包括地图,这使得用户能够轻松地在平台上展示和分享各种类型的内容。
 
劣势
一定程度上限制了灵活性和创意性
由于Bento设计强调基于网格的布局,这在一定程度上限制了设计的灵活性和创意性。设计师可能需要在遵循网格规则的同时,努力寻找创新和突破。
 
图片展示比例限制
由于展示的尺寸样式有限,有时可能无法很好地展示原图的比例和效果,这可能会影响用户对内容的理解和接受度。
 


作者:墨一影
来源:站酷

蓝蓝设计(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
链接:https://www.zcool.com.cn/article/ZMTYxMTQzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档