0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

一张服务卡片,三个设计原则,让HarmonyOS元服务卡片获得更多用户触点

话说科技 来源:话说科技 作者:话说科技 2023-11-17 15:43 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

元服务是一种基于HarmonyOS API的全新服务提供方式,对于开发者来说仅需要开发一次,即可支持多终端设备运行,以鸿蒙万能卡片等多种呈现形态,向用户提供更轻量化的服务。更轻便的开发方式,让广大开发者都跃跃欲试,截至目前也已经有很多开发者开发出了一些爆款元服务,而想要原服务拥有更高的传播范围、更高的用户使用率和更多用户触点,卡片视觉设计就显得十分重要。

众所周知在用户的桌面上,除了应用图标外,另一个存在感极强的元素就是卡片。相较于应用,卡片的展示面积越大,展示的元素也相对更加丰富。想要把图片、文字和按钮更好融合进一张小小的卡片,就要遵循“精致美观、一目了然、一步直达”三个原则。

卡片精致美观,意味着各位开发者在设计时不仅要关注卡片的功能,也要打磨卡片的视觉和动效设计,带给用户预约享受的价值,甚至会单纯为了装饰桌面而将卡片添加到桌面上。

大片信息一目了然,提供更多的有效信息给用户,是让卡片更具有价值的手段之一。类似用户需要复杂操作才能获得的信息以及常常关注的信息,都适合呈现在卡片内,但同时也要谨慎展示广告、优惠券等非用户主动想要获取的内容,过度推送此类信息很容易引起用户反感,降低卡片的添加率。

卡片也可添加按钮,如果此类按钮能够一键帮助用户完成一些复杂操作,也能让卡片价值获得极大提升。以打电话为例,原本用户需要“进入电话应用>选择联系人>找到要拨打电话的联系人>点击拨号键”4步才能完成的操作,通过添加一张该联系人的电话卡片在桌面,即可一步完成操作。所以开发者在设计时需审视自己卡片内的所有按钮,是否真的减少了用户的操作,为用户带来了价值。

HarmonyOS基于“精致美观、一目了然、一步直达”三个设计原则,为用户提供更多有效信息,帮助用户完成一些复杂操作的同时,以最佳视觉效果呈现于桌面。目前用户桌面上的卡片主要分为四个尺寸——微、小、中、大,因在不同设备上卡片的宽高不同,具体大小和效果在开发过程中可以使用IDE工具来预览。当然由于每张卡片的显示面积不同,卡片设计中可以承载的元素数量也有所不同。

微卡片建议最多展示2种元素,小卡片、中卡片最多展示3种元素,大卡片最多展示4种元素。开发者可以根据实际的卡片功能定位选择要展示的元素进行组合。

打磨细节,让卡片更精致美观

精致美观其实是一个较为宽泛的属性,设计过程中并没有一些固定的规则,设计师可以遵守业界通用的设计规范,如画面的平衡、色彩的搭配、元素的统一等;当然其个人审美也会产生一定的影响。但整体来看一张精致美观的卡片,不仅要具备用户常用的功能,还要给用户带来美的享受。卡片整体结构一致性、按钮色彩搭配协调性、配图区与功能区的关联性,都是卡片设计需要考量的一部分。

环境吸色、模糊背板、纯净配图、大字体排版、渐变遮罩等方式都是卡片设计中常用的设计手法。想要设计出优秀的卡片,对细节的打磨将成为脱颖而出的关键所在。

控制元素,让卡片信息一目了然

一目了然是卡片的重要功能属性,能够让用户可以不进入应用就能够在桌面了解到关键信息,这也是卡片价值的重要体现。如果能够在卡片中展示更直观的信息,可直接将数据展示在卡片内,减少“跳转查看”类的按钮。

想让卡片信息一目了然,首先开发者可以根据卡片大小来控制信息数量。不同卡片的尺寸能够容纳的信息量是不同的,开发者在设计过程中可以先将信息按照重要等级进行排序,从大卡片到微卡片,依次将较为不重要的信息去除。比如在展示天气信息的卡片中,微卡片仅保留城市、温度、天气类型信息;而在更大一些的小卡片中,增加了空气质量、最高最低气温等信息。

其次,设计师还可通过不同呈现方式来进行数据展示。因卡片面积有限,所以要避免使用复杂的数据表格,类似大数字、图形、进度条、柱状图等更形式相比之下则更加直观。

设备不同,卡片设计保持协同

目前鸿蒙生态覆盖了海量设别,不同设备的显示面积和宫格布局各不相同,因此当卡片需要在多种设备上呈现时,则需要设计师通过不同设备上的呈现效果一一调试。

卡片是信息的浓缩和品牌的放大,为用户带来价值的同时也能够为开发者带来流量,因而一张好的卡片其美感和实用性缺一不可。想要了解更多HarmonyOS卡片设计规范,可前往华为开发者官方网站进行浏览。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HarmonyOS
    +关注

    关注

    80

    文章

    2157

    浏览量

    36294
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    开发卡片新建卡片

    卡片功能描述:支持智能体以消息卡片的形式发送消息,卡片的所有者支持创建、编辑、查看和删除自己创建的卡片,并将卡片与智能体绑定。 进入小艺开
    发表于 04-17 10:57

    服务交易评价

    功能简介 服务交易评价是服务平台官方提供的,反映用户
    发表于 12-29 10:35

    发布服务配置应用内资费类型和应用内商品

    、设置应用内资费类型,用于标识用户使用服务时需要付费的类型。基于业务场景,支持选择多个类型。 应用内资费类型包括: 激活收费 道具收费 关卡收费 购买虚拟币 部分章节收费(图书阅读
    发表于 11-19 10:18

    服务发布配置开发者服务信息

    您作为开发者的相关信息将面向服务发布区域的用户公开,其中客服联系方式可能会提供给用户,用于咨询相关问题。 登录AppGallery Connect,点击“APP与
    发表于 10-31 17:58

    发布服务配置应用分类、标签和资质信息(仅分发手表设备)

    ,参考华为应用市场应用分类规则,选择服务分类。 5.点击“管理标签”,选择服务的标签。 最多可以选择5标签,且必须设置其中
    发表于 10-30 17:47

    发布服务配置本地化基础信息(应用名称、图标)

    、繁体中文(中国台湾)、繁体中文(中国香港特别行政区)、美式英语、英式英语。 服务名称不能与其他开发者名下、同语言的在架HarmonyOS应用/
    发表于 10-24 17:42

    服务配置支持设备

    发布时,您可以为服务配置分发至多种设备,默认发布设备为您创建元服务用时选择的设备类型,您可以根据实际情况进行修改。您只需发布次,用户即可
    发表于 10-22 16:54

    服务上架自检

    自检未通过,不影响服务提交上架申请,但存在被审核驳回的风险,推荐您基于报告定位和修改问题。 系统异常:表示系统发生错误。点击“报告”可查看详细原因。如不展示“报告”,请点击“启动自检”重试。若还有疑问,请联系客服。 本文主要参考引用自
    发表于 10-21 17:18

    服务发布准备工作

    服务软件包自检,确保您的APP包满足如下要求: 3.提前准备好发布所需的材料、信息。 本文主要从参考引用自HarmonyOS官方文档
    发表于 10-10 15:48

    HarmonyOSAI编程万能卡片生成(二)

    两种方式来触发卡片页面刷新;对于服务工程生成的卡片,数据交互为通过网络请求方式触发卡片页面刷新。 卡片
    发表于 09-09 16:10

    HarmonyOSAI编程万能卡片生成(

    基于AI大模型理解开发者的卡片需求信息,通过对话式的交互智能生成HarmonyOS万能卡片工程。 使用约束 建议从以下维度描述卡片需求: 当前不支持在生成
    发表于 09-08 17:09

    HarmonyOS AI辅助编程工具(CodeGenie)卡片生成

    基于AI大模型理解开发者的卡片需求信息,通过对话式的交互智能生成HarmonyOS万能卡片工程。 、 使用约束 建议从以下维度描述卡片需求
    发表于 08-12 11:04

    FA模型卡片和Stage模型卡片切换

    卡片切换 卡片切换主要包含如下部分: 卡片页面布局:FA模型卡片和Stage模型卡片的布局
    发表于 06-06 08:10

    HarmonyOS NEXT应用开发-Notification Kit(用户通知服务更多系统能力

    NotificationBasicContent = _NotificationBasicContent 描述普通文本通知。 服务API: 从API version 12开始,该接口支持在
    发表于 06-04 15:43

    HarmonyOS5云服务技术分享--ArkTS开发Node环境

    气的方式探索这个功能,结尾还有实用总结和鼓励彩蛋哦~✨ ? HarmonyOS云函数开发:核心能力与价值 HarmonyOS的云函数(Serverless)为开发者提供了​​无服务
    发表于 05-22 17:21