*
*
%cu
, ,
B (2
“
90px
f
%*( g
ig
(
,,,,,,
,(
-(
.( c u
i,) f
,
p
X b
B (2
“
*
*
*
30px
*
#,
*
%*( g UTTPOi g
(
,,,,,,
,(
UTTPO
-(
.( c u
i,) f
X b
B (2
b
230px
.
150px
f 345px
%*(t o
(
f_
,(
1
更新频率：每两O月进行一次更新 落地位置：规范e订后更新上传至w9k9； 周知范围：迭代更新后周知组内，x送邮件组：mA7-m1pn1-u5@2194u.3om
规范作为体验一致性d障机o，确d与线上产品d持一致 规范负责人根据规范规范要求，长期d证线上产品的规范性
6D R 描述， i体项目基于所提a规范进行设计。
46px 46px
C
296px
304px
416px
C
220px
220px 170px
232px
%
690px
0.)
a
2)
3
*(
o
(
i
B(
%*( (
,( -(”
PP i
IIIIII h
164px
, #, 219px
%*(
i )% )
(
o*0) …
, #, 170px
, #, 170px
, #,
, #, 334px
IIIIII
,(X
ri
A
c
C
常规页面结构
内容为一整张画布的页面结构
*( (
#* #”
…
X
o
i*
i
d
m
a
l :.
标题栏和组件结合
AC
t域说明图
通用样式
左c操作t2O图标、右c操作t2O 图标
右c操作t#O4字g口
右c操作t2O文字
1. titlebar໏ୗ: (1)ᙧว#ffffff (2)ೲᰵೲӥா#4c4c4c (3)ຽ᷌੷Ӿ҅᪗ᐶૢ‫ݦ‬඙֢ੜԭ30px‫ڞ‬౼ෙ
,(
b c”
-( ≤ i
.(
c
(
i
c i
_g ≤
a
i III
i
B (. C
.
g BP
%*(
i
e
(
,
,,,,,,
b
,(
_
_
“
%i
b
b
i”
B(
C -,
**
164px
219px
100px
134px
C*3*
334px
334px
134px 134px
100px 100px
134px 134px
60px 60px
i
(
c
c
h
… _g
“
%*( o
ec
( c TTH
_g ≤
,(”
bc
-( ≤ i
a
i III
.(
c
i
i
(≤
b#
i* HDHDHD
B (. C
*
*
%*( (
,(
* *
,
,,,,,,
b
222222
i)
* .
x
.
%*(
i
(
c
… _g
,(
i
o g …# g
… fg
og b g t
i* g
*g
“
%*( o
e
( c TTH
次
≤
7DTD P
5(
5*(
)0
5(
*)
6(
6*(
*1
6(
I
SPECIFICATION
1
%
%
%I f
N
1
f
%V
f
%O
f
%
%* f
%
1
A *(*
A *(
%*(
i
b
e
(
P
f
,(
e
-(A97
%*(ie (
,(
be e
A *(,
3
i -) …
i
内容t域通用边距 左/右30px
w片内容mp线左右不 通栏，间距30pxI MAP DESIGN SYSTEM
8 %.
.
H PO RH PRG
…
s
)*0 . *0
)(2
s
HR PO O DR H DOG ND OTHODO H
交互：黄园园 视觉：张坤
规范P如有不理解处责任人i有讲解Sr；如对规范有h它建议邮件抄送至： @母秋u @张坤 @黄园园 @廖毅 @徐濛
%*(
--%*-
(
,( a
OPRND
-(b
i
.( b
4 -g a *)
c
g )
%*(b c (
,
g
n
PRND
%
IIIIII4
RH HG
8 D HG
,
I0 -.,,1.II c
B (,
*
C C
o l*
%*(
ie
o
(
i *,- *))
,(
bc
“
%*(
*)
(
≤ ” ≤b
≤
”a
,(
.g opg
X
-(
bc
B (,
2. ૢ‫׆‬඙֢‫ݝ਻ٖ܄‬ᚆฎᬬࢧ̵‫ى‬ᳮࢶຽ ٌ҅ӾᬬࢧࢶຽଉḦ 3. ‫׆ݦ‬඙֢‫਻ٖ܄‬
(1) ֵአࢶຽ: ս‫ض‬ᘍᡤ๋҅ग़઀ሿ2ӻ (2) ֵአ෈ਁ: ඙֢/‫ݗف‬ᝑ෫ဩአ᭗አࢶຽᤒᐏႴ༩౲ᘏᵱᥝ୩᧣҅‫ֵڞ‬አ෈ਁ໏ୗ̶
· ෈ਁӻහ๋ग़4ӻ҅ᝑӻහ᩻ᬦ2ӻ‫ݝ‬ᚆ઀ᐏ1ӻ඙֢/‫ݗف‬ · ඙֢/‫๋ݗف‬ग़઀઀ሿ2ӻ҅ྯӻ2ӻਁ · ᝑ඙֢/‫ݗف‬᩻ᬦ2ӻ҅‫ڞ‬ත᩸ԅๅग़
AC
对主标题的解释说明 t9tl521@内有n换 t9tl521@内有搜索框
t9tl521@下有搜索框 展开更多样式
AC
t9tl521@和t12组件
选项最多5O，超过5O左右滑s，加 遮罩
#级+2级t12，2级最多6O
*( h h i
,,1.II
(
a“
t9tl521@和筛选组件
))))))
.)
筛选组件展开效果
% _g
b TTH
DR
B (*
,,,,,, I I-I. I0 -.-
222222
HDHDHD
III
IIIIII
I I-I. II0 -.-
,,1.II
,,1.II
%*( (b
,(
.)
g
v
i
av
II2 ,1 ,,,,,,
3
b
HDHDHD 222222
B (*
C
,,,,,,
222222 IIIIII
,,,,,,
n
.
,,,,,,
-g g
b
%*(
to
bc
(
.g
≤
B (2
“
%
to
B (*) ;7
B (*) ;7
B (*) ;7
B (*) ;7
:B
内容w片间m隔距#6px
w片上下无描边
w片底色 #666666
w片内容mp线 ＃515151
9oA页面背景色 #656667 安卓页面背景色 #626262
i0.) …
i i,)
i* - …
.)
A(
,
999999
0
% h
… T T H DR
ba
X
iP
OPRND RH HG
%*(
i,1%,1
(a
*) b
* #* 134px
* #* 100px
. #. 334px
B (0 C
GGGGGG
14px 14px
10px
%*( ( -)
,( -( .(
(
ti GGGGGG
4
-
*
-
“
c
UTTPO *-
oX
n
a“
B (1
Cl
,
%*(
f
(b c u
,
%*( …
-
b
(o
,(
b
-( c u
*
90px
* *
%cu
90px
N
SPECIFICATION
2
% %P
2
N
% % % %* % %, % %. % % 4365
2
B *(*
B *(*
a
HDHDHD
III
IIIIII
%*(
( ,( a
b
*
HDHDHD
a”
i
i IIIIII III
w片内容mp线 ＃515151
w片底色 #666666
w片上下无描边
B *(
B *(
.
a ,,,,,,
a
h b og III
B (,
C
90px