�x���¹�������ֱ�ӳ���
�gӭ���R�ЈD�W(w��ng) Ո | ע��
> >>
�g(sh��)�c��-�Ƅӑ�(y��ng)��UI�O(sh��)Ӌ�����n-��2��

���] �g(sh��)�c��-�Ƅӑ�(y��ng)��UI�O(sh��)Ӌ�����n-��2��

���ߣ������A
�����磺�����]늳���������r�g��2017-05-01
�_���� 32�_ 퓔�(sh��)�� 211
�� �D �r:¥23.1(3.3��) ���r  ¥69.0 ��䛺�ɿ������T�r
����ُ��܇ �ղ�
�_������ ȫ�����]
?�½������س���
��ܰ��ʾ��5�����ˆD����Ҫ�������β؛���󲿷֞�ȫ�£����ܷ�/�o�ܷ⣩�����e�D��Ʒ��8-9���¡��п�
�Є�����(bi��o)ӛ����P�ȸ�����ȫԔ��(x��)Ʒ���f��>>
������Ǖ�����>

�g(sh��)�c��-�Ƅӑ�(y��ng)��UI�O(sh��)Ӌ�����n-��2�� ���(qu��n)��Ϣ

�g(sh��)�c��-�Ƅӑ�(y��ng)��UI�O(sh��)Ӌ�����n-��2�� ������ɫ

Ŀǰ�҇�����(j��ng)�v���Ļ�“(li��n)�W(w��ng)��(chu��ng)�I(y��)����UI�O(sh��)Ӌ����������һ����Ҫ�Ĺ��N���͘I(y��)ǰ���dz��V韡�վ��W(w��ng)���O(sh��)Ӌ�{(di��o)��Y(ji��)���@ʾ����GUI��ƽ�����W(w��ng)퓡��宋�����S���O(sh��)Ӌšλ����Ŀǰ����(n��i)��GUI�O(sh��)Ӌ����������������ܶ��O(sh��)Ӌ��ӿ��UI�O(sh��)Ӌ�@���ИI(y��)��Ը���W(xu��)��(x��)UI�O(sh��)Ӌ֪�R֧�����ƵČW(xu��)�M(f��i)����һ�����|(zh��)�����\�@�׶����Ƅӑ�(y��ng)�Õ�������������Ҫ�ġ� �@��һ��ϵ�y(t��ng)��B�Ƅ��O(sh��)Ӌ֪�R�ĕ����� ȫ���֞����ƒ�ƪ����ƪ���g(sh��)֮ƪ����Ҫ�v�����Ƅӑ�(y��ng)���O(sh��)Ӌ���P(gu��n)�Ļ��A(ch��)֪�R��ͨ�^���A(ch��)֪�R�ČW(xu��)��(x��)��ʹ����˽��֙C(j��)��Ļ�@ʾ��ԭ�������N�֙C(j��)Ӳ���Ă�����ʹ�÷�����ͨ�^�v��������O(sh��)ӋҎ(gu��)�����D��(bi��o)�O(sh��)Ӌ������ʹ�x�߳��������Ƅӑ�(y��ng)���O(sh��)Ӌ֪�R����ƪ���֮ƪ�����M(j��n)�A��(y��ng)���O(sh��)Ӌ֪�R��Ԕ��(x��)�v���ˏ���νM���O(sh��)ӋҎ(gu��)���������N�M���Ĺ��ܽ�B����(y��ng)���O(sh��)Ӌ������ʹ�x�����������Ƅӑ�(y��ng)�õ��O(sh��)Ӌ����������������ͨ�^�����İ�����ʾ��ʹ�x�߿����`���\(y��n)���O(sh��)Ӌ������Փ�� �����m����Ҫ���º��ѽ�(j��ng)����UI�O(sh��)Ӌ�ИI(y��)���P(gu��n)�������x�ߌW(xu��)��(x��)ʹ�ã�Ҳ���������Уƽ���O(sh��)Ӌ�;W(w��ng)��O(sh��)Ӌ�����P(gu��n)���I(y��)�����P(gu��n)��Ӗ(x��n)�C(j��)��(g��u)�Ľ̌W(xu��)��������

�g(sh��)�c��-�Ƅӑ�(y��ng)��UI�O(sh��)Ӌ�����n-��2�� ��(n��i)�ݺ���

վ�����]�O(sh��)Ӌ�������A������2017ȫ�������� վ��W(w��ng)����݋�o(j��)�������� ZCOOLվ�ῂ��(j��ng)����ҫ����UI�Ї�����(j��ng)�����������]�� UI�O(sh��)Ӌ����ƽ���O(sh��)Ӌ���������O(sh��)Ӌ�����a(ch��n)Ʒ��(j��ng)�������P(gu��n)��ʿ�ı��x֮���� Ҏ(gu��)�t����׃�����Ǯa(ch��n)��Ҏ(gu��)�t��ԭ�򲻕���֪�R������������֪�R�����߉݋�����������������߶��ꌦ�O(sh��)Ӌ֪�R��Ҏ(gu��)�t�Ŀ��Y(ji��)���^����е�ÿһ��֪�R�c(di��n)������l(f��)�F(xi��n)��ÿ���������������Լ��Lԇ�����Ⱥ�˼���Ŀ��Y(ji��)�����I(l��ng)���Ŭ��ȥ����ÿһ��Ҏ(gu��)�t�����ԭ�����о��Ƅ�ÿһ���O(sh��)Ӌ׃����߉݋��

�g(sh��)�c��-�Ƅӑ�(y��ng)��UI�O(sh��)Ӌ�����n-��2�� Ŀ�

�g(sh��)֮ƪ



01���A(ch��)֪�R

1.1��ʲô��UI�O(sh��)Ӌ/20

1.1.1��UI�����P(gu��n)����/20

1.1.2��UI�ČW(xu��)��(x��)����/22

1.2��ʲô��App/25

1.2.1��App�ĸ���/25

1.2.2��App���_�l(f��)����/25

1.3�������֙C(j��)����Ļ/26

1.3.1��Ӣ�磨Inch��/27

1.3.2�����أ�Pixel��/27

1.3.3���ֱ��ʣ�Resolution��/28

1.4���W(w��ng)�c(di��n)�ܶ��c�����ܶ�/28

1.4.1���W(w��ng)�c(di��n)�ܶȣ�DPI��/28

1.4.2�������ܶȣ�PPI��/29

1.4.3��DPI�cPPI/29

1.4.4��߉݋�ֱ����c���ر���/30

1.4.5��ҕ�W(w��ng)Ĥ��Ļ/30

1.5����Ҋ�֙C(j��)��ĻҎ(gu��)��/31

1.5.1�����T�֙C(j��)Ҏ(gu��)��/31

1.5.2�����T�֙C(j��)�ֱ���/33

1.6��iPhone 6 Plus����Ļ/34

1.7�������֙C(j��)�Ă�����/37

1.7.1���z���^/37

1.7.2�������L(f��ng)/38

1.7.3��GPS/38

1.7.4������_�P/39

1.7.5�������Б�(y��ng)��/39

1.7.6�����ٶȂ�����/40

1.7.7���⾀������/41

1.7.8�����x������/41

1.7.9���≺������/42

1.7.10�����S���݃x/43

02�O(sh��)Ӌ�L(f��ng)��

2.1���L(f��ng)��/46

2.1.1��ʲô���O(sh��)Ӌ�L(f��ng)��/46

2.1.2����δ_���O(sh��)Ӌ�L(f��ng)��/47

2.2���ɫ/50

2.��2. 1 �J(r��n)�Rɫ��/50

2.��2. 2 RGB�cHSB/50

2.��2. 3 �ɫ������A(ch��)/52

2.3������x���ɫ/53

2.��3. 1 ��ҊApp���ɫ/53

2.��3. 2 �ɫ���Ը�/55

2.4�����w/61

2.��4. 1 �r���w�͟o�r���w/61

2.��4. 2 ϵ�y(t��ng)��(n��i)�����w/62

2.��4. 3 ʲô�r���x���(n��i)Ƕ���w/62

2.��4. 4 ���ʹ�Ã�(n��i)Ƕ���w/63

03�D��(bi��o)�c�DƬ

3.1��App�D��(bi��o)���c(di��n)/66

3.��1. 1 ��(d��)�صĈD��/66

3.��1. 2 �����(zh��n)�_/67

3.��1. 3 ֔(j��n)����ɫ/67

3.��1. 4 ����ʹ�ô�������/68

3.��1. 5 ����ʹ����Ƭ/68

3.��1. 6 �m��(y��ng)��ͬ����/69

3.2��App�D��(bi��o)�O(sh��)Ӌ����/69

3.��2. 1 **���������[��/69

3.��2. 2 �ڶ���������D��/70

3.��2. 3 ����������Ʒ����/71

3.��2. 4 ���IJ����_���L(f��ng)��/71

3.��2. 5 ���岽���{(di��o)����(x��)��(ji��)/72

3.��2. 6 �������������yԇ/73

3.3��App�D��(bi��o)�O(sh��)Ӌ����/74

3.��3. 1 ��ؓ(f��)�νM��/74

3.��3. 2 �ۯB�D��/75

3.��3. 3 �ֲ���ȡ/75

3.��3. 4 ���ԈD��(bi��o)/75

3.��3. 5 ͸���u׃/76

3.��3. 6 ɫ�Kƴ��/76

3.��3. 7 �D�Ώ�(f��)��/76

3.��3. 8 �����M��/77

3.4��iOS�D��(bi��o)Ҏ(gu��)��/77

3.��4. 1 iOS�D��(bi��o)�m��/77

3.��4. 2 iOS�D��(bi��o)��(bi��o)��(zh��n)/78

3.5��Android�D��(bi��o)Ҏ(gu��)��/79

3.��5. 1 Android�D��(bi��o)�m��/79

3.��5. 2 �D��(bi��o)��ҕ�X�y(t��ng)һ/80

3.��5. 3 Android�D��(bi��o)��(bi��o)��(zh��n)/81

3.6���O(sh��)Ӌ���ԈD��(bi��o)/83

3.��6. 1 ���ԈD��(bi��o)���L(f��ng)��/83

3.��6. 2 ���ԈD��(bi��o)���L�Ʒ���/84

3.7�����،��R/87

3.��7. 1 ���؞�ʲôҪ���R/87

3.��7. 2 ������Ό��R/88

3.��7. 3 ���ؿs�ŵČ��R/89

3.��7. 4 ���،��R��΢�{(di��o)/89

3.8���DƬ��ʹ��/89

3.��8. 1 ʸ���D�cλ�D/89

3.��8. 2 �DƬ�ĸ�ʽ/90

3.��8. 3 �DƬ��ʹ��/91

3.��8. 4 �DƬ�Ĵ惦/92

3.��8. 5 �DƬ�ı���/92

04ϵ�y(t��ng)����

4.1����/94

4.��1. 1 ��B(t��i)��/94

4.��1. 2 ��(d��o)����/94

4.��1. 3 ��(bi��o)����/95

4.��1. 4 ���ߙ�/96

4.2����(n��i)��ҕ�D/97

4.��2. 1 ����ҕ�D/97

4.��2. 2 �ı�ҕ�D/99

4.��2. 3 Webҕ�D/99

4.3���R�rҕ�D/100

4.��3. 1 ��Ԓ��/100

4.��3. 2 �����б�/100

05Androidϵ�y(t��ng)����

5.1����(d��o)���C(j��)��/102

5.��1. 1 Ӳ������/102

5.��1. 2 iOS��(d��o)���C(j��)��/102

5.��1. 3 Android��(d��o)���C(j��)��/103

5.2�����沼��/105

5.��2. 1 �Y(ji��)��(g��u)�/105

5.��2. 2 ������/106

5.��2. 3 ���΄�(w��)/107

5.3����Ϣ����/108

5.��3. 1 ���ͷ�ʽ/108

5.��3. 2 ֪ͨ��ʽ/109

5.4��������ʽ/110

5.��4. 1 ��݋/110

5.��4. 2 �x��/111

5.��4. 3 ��(f��)��ճ�N/112

5.��4. 4 �h��/113

5.5��Androidϵ�y(t��ng)�IJ��/114

5.��5. 1 ������/114

5.��5. 2 �O(sh��)Ӌڅ��/114



��֮ƪ



06����Ҏ(gu��)��

6.1���M��Ҏ(gu��)��/116

6.��1. 1 �O(sh��)ӋҎ(gu��)����Ŀ��/116

6.��1. 2 Ҏ(gu��)���ĽM��/116

6.2���ɫҎ(gu��)��/119

6.��2. 1 ��ʲô�x��HSB/119

6.��2. 2 ��(chu��ng)���{(di��o)ɫ��/120

6.��2. 3 �{(di��o)ɫ�呪(y��ng)��/121

6.3������Ҏ(gu��)��/123

6.��3. 1 iOSϵ�y(t��ng)/123

6.��3. 2 Androidϵ�y(t��ng)/123

6.��3. 3 ϵ�y(t��ng)��̖/123

6.4������/125

6.��4. 1 ���/125

6.��4. 2 픲���(d��o)����/126

6.��4. 3 픲���(bi��o)����/126

6.��4. 4 �ײ���(bi��o)����/127

6.5���DƬҎ(gu��)��/127

6.��5. 1 ���^��/127

6.��5. 2 ��Ʒ�DƬ/129

6.��5. 3 �o��(sh��)��(j��)�DƬ/129

07�O(sh��)Ӌ�M��

7.1������Ԫ��/132

7.��1. 1 ���ָʾ��/132

7.��1. 2 �M(j��n)��ָʾ��/132

7.��1. 3 퓴a������/134

7.��1. 4 ˢ�¿ؼ�/134

7.��1. 5 ������/137

7.��1. 6 �_�P(gu��n)/137

7.��1. 7 ���M(j��n)��/137

7.2���Y�x��/138

7.��2. 1 �x����/138

7.��2. 2 ���ڕr�g�x����/138

7.��2. 3 �ֶοؼ�/139

7.��2. 4 �x�(xi��ng)�� /139

7.��2. 5 ����/140

7.��2. 6 �؅^(q��)�x��/140

7.3����οؼ�/141

7.��3. 1 ���x��/141

7.��3. 2 ��(f��)�x��/142

7.��3. 3 �ı���/142

7.��3. 4 ������/143

7.��3. 5 ����/144

7.4�����oҎ(gu��)��/144

7.��4. 1 ���� ����/144

7.��4. 2 ���� �D��(bi��o)/145

7.��4. 3 �D��(bi��o) ����/146

7.��4. 4 ����/146

7.5�������M��/147

7.��5. 1 ���d����/147

7.��5. 2 ��ģ�B(t��i)����/147

7.��5. 3 ģ�B(t��i)����/148

08��(d��o)���O(sh��)Ӌ

8.1����ƽ��(d��o)��/150

8.��1. 1 ��(bi��o)����(d��o)��/150

8.��1. 2 ��ʽ��(d��o)��/151

8.��1. 3 �m��ʽ��(d��o)��/152

8.2����(n��i)������(d��o)ʽ��(d��o)��/153

8.��2. 1 ���ʽ��(d��o)��/153

8.��2. 2 ���D(zhu��n)ľ�Rʽ��(d��o)��/154

8.3���б�ʽ��(d��o)��/155

8.��3. 1 �б�ʽ/155

8.��3. 2 ���ʽ/156

8.4��������(d��o)��/157

8.��4. 1 �c(di��n)��ʽ��(d��o)��/157

8.��4. 2 �ٲ�ʽ��(d��o)��/158

09�����O(sh��)Ӌ

9.1����� /160

9.��1. 1 ������/160

9.��1. 2 ��(bi��o)����/161

9.��1. 3 ��Ƭʽ�O(sh��)Ӌ/161

9.��1. 4 �nj��O(sh��)Ӌ/162

9.2����/163

9.��2. 1 ��Ϣ�б�/163

9.��2. 2 �M��Ƭ/163

9.��2. 3 �ٲ���/164

9.3��Ԕ���/165

9.��3. 1 ȫ�ְ��o/165

9.��3. 2 ����ͨ��/166

9.4����������/167

9.��4. 1 �^��^(q��)��/167

9.��4. 2 ������Ϣ/168

9.��4. 3 ����ģ�K/169

9.5�������/170

9.��5. 1 Ʒ�������/170

9.��5. 2 ��퓘�ʽ�/171

9.��5. 3 �����/172

9.��5. 4 ��(ji��)�շՇ��/173

9.6������(d��o)�/173

9.��6. 1 ���ܽ�B�/173

9.��6. 2 ʹ���f���/176

9.��6. 3 �����/177

10�O(sh��)Ӌ�m��

10.1��iOSϵ�y(t��ng)�m��/180

10.��1. 1 �O(sh��)Ӌ����(zh��n)/180

10.��1. 2 �O(sh��)Ӌ�m��/181

10.��1. 3 �m��Ҏ(gu��)�t/182

10.2��Androidϵ�y(t��ng)�m��/183

10.��2. 1 �ܶȪ�(d��)������/183

10.��2. 2 �O(sh��)Ӌ����(zh��n)/184

10.��2. 3 �m�䷽��/185

10.3��iOSϵ�y(t��ng)�m��Androidϵ�y(t��ng)/185

10.��3. 1 �O(sh��)ӋĿ��/185

10.��3. 2 �Q���P(gu��n)ϵ/185

10.��3. 3 �m�䷽��/186

10.4����(bi��o)ע�O(sh��)Ӌ/186

10.��4. 1 ��(bi��o)ע����(zh��n)/187

10.��4. 2 ��(bi��o)ע����/187

10.5���c(di��n)�ňD/189

10.��5. 1 ʲô���c(di��n)�ňD/189

10.��5. 2 ��������c(di��n)�ňD/191

10.6���ЈD/191

10.��6. 1 �����ЈD/191

10.��6. 2 �D��(bi��o)�ЈD/192

10.��6. 3 ����Ҏ(gu��)�t/192

11�քݑ�(y��ng)��

11.1����ʲôʹ���ք�/194

11.2�������քݲ���/195

11.��2. 1 ��/195

11.��2. 2 �p��/195

11.��2. 3 ���»���/196

11.��2. 4 ���һ���/196

11.��2. 5 ��ҷ/197

11.��2. 6 ���_ / �]��/197

11.��2. 7 �L��/198

11.��2. 8 �u��/198

11.3���ք��O(sh��)Ӌ����/199

11.��3. 1 ʹ�Ø�(bi��o)��(zh��n)�ք�/199

11.��3. 2 ���x��(bi��o)��(zh��n)�ք�/199

11.��3. 3 ʹ�ú����ք�/199

11.��3. 4 �ք�ʹ���f��/199

12�O(sh��)Ӌ�YԴ

12.1���W(w��ng)վ�YԴ/201

12.2���D��(bi��o)�YԴ/202

12.3���DƬ�YԴ/203

���/204

�����īI(xi��n)/211

չ�_ȫ��

�g(sh��)�c��-�Ƅӑ�(y��ng)��UI�O(sh��)Ӌ�����n-��2�� ���ߺ���

�����A��վ�����]�O(sh��)Ӌ��������ʮ����GUI��WUI�O(sh��)Ӌ�ďĘI(y��)�Y�v���ڶ�҇���(n��i)���I(y��)�W(w��ng)վ�l(f��)���^�����O(sh��)Ӌ�о����£����������O(sh��)Ӌ�F(tu��n)�(du��)������(j��ng)�(y��n)��ؓ(f��)؟(z��)�^����ǧ�f������̾W(w��ng)վ�\(y��n)�I�����d���|���ğo���O(sh��)Ӌ�F(tu��n)�(du��)������Ŀǰ�����e�O̽��ҕ�X�O(sh��)Ӌ�ڹ����еČ�(sh��)�`�\(y��n)�ã��������P(gu��n)��Ҏ(gu��)���͘�(bi��o)��(zh��n)��ָ��(d��o)������O(sh��)Ӌ�����L�� ���˘s�u(y��)�� 2011��@��“վ�����]�O(sh��)Ӌ��”�Q̖ 2012�꡶�����䡷App�@���㶹�v�O(sh��)Ӌ������(y��ng)�ê� 2012�꡶91�������}�O(sh��)Ӌ��ِ���� 2013�꡶����Muse UI �׌��֙C(j��)���}�O(sh��)Ӌ���� 2013�꡶�������ͨ����O(sh��)Ӌ���� 2013�꡶�Ї�����֙C(j��)�������֙C(j��)���}�O(sh��)Ӌ�����Ȫ� 2014�꡶���A�f��v��App��Ӌ���d��һ�|���ջ���ǧ�f

��Ʒ�uՓ(0�l)
���o�uՓ����
�������]
��݋���]
����픲�
�ЈD�W(w��ng)
�ھ��ͷ�