注意:以下文档只适用于TOP接口,请谨慎使用!

文档中心 > 规则中心

应用UI设计规范

更新时间:2023/08/08 访问次数:422231

一、基本要求

要求

说明

表意清晰

1)界面风格统一;

2)清晰;

3)文案表示一致可被理解;

直观

1)操作简洁直观;

2)用户能够快速上手操作;

专业

1)给使用者提供专业引导;

2)可信的使用环境。


二、UI设计的具体规范


具体规范

规范说明

服务图标

定义:淘宝页面图标

淘宝卖家服务平台;

淘宝买家中心;

卖家中心;

点击到达服务页面

详情页面;

购买详情页面;

使用页面;

要求

品牌宣传和视觉效果结合;

简洁;

易辨认;

引人注目;

装修模板缩略图

放置在【淘宝卖家服务】中告诉用户模板长什么样

服务主体UI

服务整体风格设计

服务详情页介绍图

放置在【淘宝卖家服务】详情页,介绍自己服务的图片


1.服务图标设计尺寸


标准尺寸:80×80像素,

缩放要求:在不同的使用场景中允许等比例缩放为60×60像素、50×50像素。

格式:支持jpg和png格式

大小:不超过50K。


2.图案设计


思考

传达什么信息

设计目标

简洁易懂

能够易于用户理解

具有吸引力

能够刺激用户点击,进而促进浏览和购买

具有个性

能够让用户在众多APP中找到你


尽量使您的图标在清晰与个性之间找到平衡点,这样可以使图标美观又能传达该服务的含义。


3.图标设计准则

在您确定了图标的设计之后,请在创建时遵循以下准则:

1)格式。使用jpg、gif或png,不允许有多帧动画。

2)规范。请上传90度直角图片,系统为自动加上圆角,压缩质量不能低于80%

3)请不要添加阴影效果。不要描边因为系统叫上圆角后,会把四个角的描边切除,这样会破坏图标的原有设计质量。

4)使用抗锯齿效果。

当你的图标设计通过我们的审核,我们在程序上做出让每个人做的图标看起来一致的方法,统一的圆角效果使用户主屏幕上的所有图标都具有一致的可点击外观。


具体效果示例:

image

image


4.建议与禁忌


优秀案例

image

image

image


反面案例

image

image

image

image

元素不够清晰 配色问题导致文案不清晰 元素过多 表意不明

FAQ

关于此文档暂时还没有FAQ
返回
顶部