规则中心
一、基本要求
要求 |
说明 |
表意清晰 |
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）使用抗锯齿效果。
当你的图标设计通过我们的审核，我们在程序上做出让每个人做的图标看起来一致的方法，统一的圆角效果使用户主屏幕上的所有图标都具有一致的可点击外观。
具体效果示例：
4.建议与禁忌
优秀案例 |
||||
反面案例 |
||||
| 元素不够清晰 | 配色问题导致文案不清晰 | 元素过多 | 表意不明 |
