篇一：阿里手机版List页图文排版案例
阿里手机版List页图文排版案例
基础背景介绍
1）据”深圳移动”调研，目前阿里客户的主流手机屏幕分辨率通常是176×220和240×320，考虑到目前手机发展的实际趋势，建议以240×320为主要设计平台；
2）176×220屏幕，通常是我们一般意义上的FeaturePhone，字体尺寸一般为16px，少部分为12px和14px；
3）240×320屏幕，通常为我们所说的中端手机，主流字体尺寸为20px（FeaturePhone）和12px（SmartPhone），少部分为14px和16px；
制约条件设定
1）产品设计要注意符合手机用户的使用习惯，比如，页面整体左对齐、屏幕水平、垂直双向切换等等；
2）经过粗略测试，在现有网络条件下，单页面下载10k耗时在1.6s左右，单页面下载6k耗时在1s以内；一般来说，下载页面等待时间在1s以内，用户不会感觉烦躁和不满；
3）经测算，40×40的图片大小在0.71k，50×50的图片大小为1.11k，60×60的图片大小为1.6k。另外，500中文字需占用1k空间。综上所述，假定单页面中文字在300左右的情况下，如果考虑控制页面大小为6k，页面可以承载的图片数量分别是：7张40×40图片或5张50×50图片或3张60×60的图片；
4）在使用阿里巴巴的搜索时，通常情况下，搜索结果List页面的结果条目数量很多，以产品关键字搜索”mp3″为例，结果条目数为24226条（2008.06.18 19:48搜索结果），如果每页展示20条的话，共计1200多页；
Demo设计及UE分析
1）176×220屏幕下，根据阿里产品展示的实际情况，我们假定的基础设计原则是：1张图片配3行文字；图图之间、文文之间或图文之间必须有至少2px的间隔；设计Demo如下：
从排列美观角度看，40×40的图片，在12px和14px文字配合下效果比较好，而在16px和20px文字配合下，整体比较稀疏，效果一般；50×50的图片，在14px和16px文字配合下效果比较好，在12px和20px文字的配合下，效果一般，但分隔还算比较整体；60×60的图片，在16×16和20×20文字配合下效果比较好，而在12px和14px文字配合下，效果比较差，感觉很稀疏； 从文本显示实用角度看，40×40的排版方式下，四种尺寸文字分别可以显示中文字的数量为33、27、24、18；50×50的排版方式下，四种尺寸文字分别可以显示中文字的数量为30、24、21、18；60×60的排版方式下，四种尺寸文字分别可以显示中文字的数量为27、24、21、15；应该说，三种尺寸的图片对于主流的16px字体来说，在竖屏中展示的文本从数量上来讲相差不大。 从空间利用率上讲，在一屏的空间下，40×40能显示最多5条内容，50×50最多能显示4条内容，而60×60最多能显示3条内容；
所以我们可以得出这样的结论，在176×220的屏幕中，如果选用40×40的图片，在主流的16px文字配合下，最多一页可以显示7张图片，包括页面头尾，大概占用2屏的空间；在12px文字配合下，可以显示7张图片，包括页面头尾，1.5屏的空间；
如果选用50×50的图片，在16px文字配合下，最多可以显示5张图片，包括页面头尾，占用
1.5屏的空间；在12px文字配合下，可以显示5张图片，包括页面头尾，占用1.5屏的空间； 如果选用60×60的图片，在16px文字配合下，可以显示3张图片，包括页面头尾，占用1.5屏的空间；在12px文字配合下，可以显示3张图片，包括页面头尾，占用1.5屏的空间； 综上所述，考虑到用户翻页的效率、每页展示数量的平衡性以及排列美观方面，在176×220屏幕尺寸下，40×40和50×50的图片都比较合适；与此同时，配合主流的16px字体，50×50的图片效果最佳；
2）240×320屏幕下，参考类似上述的分析方法，我们可以从Demo中很容易得出结论；
在240×320分辨率的屏幕中，如果选用40×40的图片，在12px文字配合下，可以显示7张图片，包括页面头尾，大概占用1屏的空间；在20px文字配合下，可以显示7张图片，包括页面头尾，占用1.5屏的空间；
如果选用50×50的图片，在12px文字配合下，可以显示5张图片，包括页面头尾，占用1屏的空间；在20px文字配合下，可以显示5张图片，包括页面头尾，占用1.5屏的空间；
如果选用60×60的图片，在12px文字配合下，可以显示3张图片，包括页面头尾，占用0.8屏的空间；在20px文字配合下，可以显示3张图片，包括页面头尾，占用0.8屏的空间； 综上所述，考虑到用户翻页的效率、每页展示数量的平衡性以及排列美观方面，在240×320屏幕尺寸下，50×50的图片比较合适；
结论及参考比对
考虑到手机用户下载页面效率，我们建议单页面下载容量控制在0.6k左右，同时由于阿里巴巴List页面的结果通常数量很大，每页3条信息的展示明显不符合我们期望提供用户良好体验的初衷。所以，60×60的图片被排除；（ebay手机版使用的图片尺寸，每页仅显示3条信息，下图为220px宽度下的eBay手机版效果）
40×40和50×50的图片从展示数量上看，不存在量级上的差距。但40×40的图片在240×320的屏幕上效果相对较弱，尤其是对于横坐标的比例来说，页面1/6的图片显示效果从清晰度上比较差（尤其在高精度屏幕手机上，40×40的图片占用实际物理面积较小，不适于辨识）。另外，考虑到手机屏幕可能的90°翻转可能，横屏情况下页面1/8的图片显示效果就更加弱化了。（40×40是taobao手机版使用的图片尺寸，下图为220px宽度下的taobao手机版效果）
因此，我们建议在目前的主流手机平台上，我们采用50×50的图片作为List页面的图示尺寸。鉴于项目的实际保密需要，List页的实际排版效果暂时不能公开，请见谅。
篇二：手机配置
诺基亚N95-8GB 规格参数
网络频率： 900/1800/1900/850；GSM/GPRS/WCDMA
/EDGE/HSDPA
可选颜色： 黑色
尺寸体积： 99×53×21mm
重 量：
主屏参数： 128克 16000000色TFT彩色屏幕 240×320像素图
片下载
通话时间： 300分钟※
待机时间： 280小时※
上市时间： 2008年5月
BL-6F锂电池（1200mAh），AC-5C充电器，
标准配置： HS-45耳机，AD-54线控，DKE-2数据线（m
ini usb），CA-75U视频线，光盘，使用手册
铃声格式：
操作系统： Symbian 9.2，FP1平台
Wap上网： 支持飞笺
诺基亚N95 规格参数
网络频率： 900/1800/1900/850/2100；GSM/GPRS/
WCDMA/EDGE
可选颜色： 深李色、金色
尺寸体积： 99×53×21mm；90cm3
重 量：
主屏参数： 120克 16000000色TFT彩色屏幕 240×320像素
图片下载
通话时间： 190-390分钟※
待机时间： 233-228小时※
上市时间： 2007年6月
锂电池（BL-5F 950mAh），及AC-5旅行
充电器，128MBmicro-SD存储卡，CA-75标准配置： U电视线缆，DKE-2USB数据线，HS-45立
体声耳机，AD-4音频适配器，CD光盘等
铃声格式： MP3
软件格式： JAR/
操作系统： 采用Symbian9.2操作系统 S60 V3.0FP1
平台
Wap上网： 支持飞笺
诺基亚N73 规格参数
网络频率： 900/1800/1900/850/2100；GSM/GPRS/W
CDMA/EDGE
可选颜色： 银灰色/深李色、冰莹白/金属红
尺寸体积： 110×49×19mm
重 量：
主屏参数： 115克 260000色TFT彩色屏幕 240×320像素图片
下载
通话时间： 220－270分钟※
待机时间： 218－348小时※
上市时间： 2006年9月
锂电池（BP-6M 1100mAh），充电器 AC-4，
充电器适配器 CA-44，数据线 CA-53，CD-R
OM 光盘：诺基亚 PC 套件和 Adobe Photos标准配置： hop Album Starter Edition，用户文档：《用
户手册》、《快速入门》、《建立连接指南》及
《附加应用指南》
铃声格式： MP3
软件格式： JAR/
操作系统： symbian9.1操作系统和S60第三版软件界面 Wap上网： 支持飞笺
用户手册： 诺基亚N73用户手册
诺基亚N73音乐版 规格参数
网络频率： 900/1800/1900/850；GSM/GPRS/WCDMA 可选颜色： 黑色
尺寸体积： 110×49×19mm
重 量： 116克
主屏参数： 260000色TFT彩色屏幕 240×320像素图片下
载
通话时间： 226分钟WCDMA/246分钟GSM分钟※ 待机时间： 370小时WCDMA/350小时GSM小时※ 上市时间： 2006年
标准配置： 锂电池BP-6M 1100mAh,2G 扩展卡 铃声格式：
操作系统： Symbian 9.1,Series 60第3版
诺基亚5310XM 规格参数
网络频率： 900/1800/1900；GSM/GPRS/EDGE 可选颜色： 黑色
尺寸体积： 103.8×44.7×9.9mm；44.8cm3 重 量： 70.2克
主屏参数： 16000000色TFT彩色屏幕 240×320像素图
片下载
通话时间： 300分钟※
待机时间： 300小时※
上市时间： 2007年11月
锂电池BL-4CT，充电器AC-3，有线耳机 HS-4
标准配置： 5，带有 AD-57（远程控制），USB 数据线，C
D-ROM 光盘，512MB MicroSD 卡
铃声格式： MP3 MID
图片格式： JPG/GIF/
操作系统： S40第五版系统平台
上市地区： 中国
篇三：常用RGB颜色表
R 黑色
G 0
B 值 0
0 #000000
R G B 值
黄色 255 255
0 #FFFF00
R G B 值
浅灰蓝色 176 224 230 #B0E0E6
品蓝 65 105 225 #4169E1 石板蓝 106 90 205 #6A5ACD 天蓝 135 206 235 #87CEEB
青色
0 255 255 #00FFFF
象牙黑 41 36 33 #292421 灰色 192 192 192 #C0C0C0 冷灰 128 138 135 #808A87
香蕉色 227 207 87 #E3CF57 镉黄 255 153 18 #FF9912 dougello 235 142 85 #EB8E55
石板灰 112 128 105 #708069 forum gold 255 227 132 #FFE384 暖灰色 128 128 105 #808069
白色 255 255 255 #FFFFFF
金黄色 255 215 0 #FFD700
黄花色 218 165 105 #DAA569 瓜色 227 168 105 #E3A869 橙色 255 97 镉橙 255 97
0 #FF6100 3 #FF6103
绿土 56 94 15 #385E0F 靛青
8 46 84 #082E54
古董白 250 235 215 #FAEBD7 天蓝色 240 255 255 #F0FFFF 白烟 245 245 245 #F5F5F5 白杏仁 255 235 205 #FFFFCD cornsilk 255 248 220 #FFF8DC 蛋壳色 252 230 201 #FCE6C9 花白 255 250 240 #FFFAF0
gainsboro 220 220 220 #DCDCDC ghostWhite 248 248 255 #F8F8FF
蜜露橙 240 255 240 #F0FFF0 象牙白 250 255 240 #FAFFF0 亚麻色 250 240 230 #FAF0E6
navajoWhite 255 222 173 #FFDEAD
old lace 253 245 230 #FDF5E6 海贝壳色 255 245 238 #FFF5EE
雪白 255 250 250 #FFFAFA
红色 255
0 #FF0000
碧绿色 127 255 212 #7FFFD4 青绿色 64 224 208 #40E0D0 绿色
0 255
0 #00FF00 0 #7FFF00
胡萝卜色 237 145 33 #ED9121
桔黄 255 128
0 #FF8000
黄绿色 127 255
淡黄色 245 222 179 #F5DEB3
棕色 128 42 42 #802A2A
钴绿色 61 145 64 #3D9140 翠绿色
0 201 87 #00C957
森林绿 34 139 34 #228B22 草地绿 124 252
0 #7CFC00
米色 163 148 128 #A39480
锻浓黄土色 138 54 15 #8A360F 锻棕土色 135 51 36 #873324 巧克力色 210 105 30 #D2691E
肉色 255 125 64 #FF7D40 黄褐色 240 230 140 #F0E68C 玫瑰红 188 143 143 #BC8F8F 肖贡土色 199 97 20 #C76114 标土棕 115 74 18 #734A12 乌贼墨棕 94 38 18 #5E2612
赫色 160 82 45 #A0522D 马棕色 139 69 19 #8B4513 沙棕色 244 164 96 #F4A460 棕褐色 210 180 140 #D2B48C
蓝色
0 255 #0000FF
61 89 171 #3D59AB
30 144 255 #1E90FF
11 23 70 #0B1746
3 168 158 #03A89E
25 25 112 #191970
酸橙绿 50 205 50 #32CD32 薄荷色 189 252 201 #BDFCC9 草绿色 107 142 35 #6B8E23 暗绿色 48 128 20 #308014 海绿色 46 139 87 #2E8B57 嫩绿色
0 255 127 #00FF7F
紫色 160 32 240 #A020F0
紫罗蓝色 138 43 226 #8A2BE2 jasoa 160 102 211 #A066D3 湖紫色 153 51 250 #9933FA 淡紫色 218 112 214 #DA70D6 梅红色 221 160 221 #DDA0DD
砖红 156 102 31 #9C661F 镉红 227 23 13 #E3170D 珊瑚色 255 127 80 #FF7F50 耐火砖红 178 34 34 #B22222 印度红 176 23 31 #B0171F 栗色 176 48 96 #B03060
钴色
粉红 255 192 203 #FFC0CB dodger blue 草莓色 135 38 87 #872657 jackie blue 橙红色 250 128 114 #FA8072 蕃茄红 255 99 71 #FF6347
锰蓝 深蓝色
桔红 255 69 深红色 255
0 #FF4500 孔雀蓝 51 161 201 #33A1C9 土耳其玉色
0 255 #FF00FF
0 199 140 #00C78C
品红Magenta（热情）
CMYK：C15 M100 Y20 K0RGB: R207 G0 B112 洋红Carmine（大胆）
CMYK: C0 M100 Y60 K10RGB: R215 G0 B64 宝石红Ruby（富贵）
CMYK: C20 M100 Y50 K0RGB: R200 G8 B82 玫瑰红Rose-red（典雅）
CMYK: C0 M95 Y35 K0RGB: R230 G28 B100 山茶红Camellia（微笑）
CMYK: C0 M75 Y35 K10RGB: R220 G91 B111 玫瑰粉Rose-pink（女人味）
CMYK: C0 M60 Y20 K0RGB：R238 G134 B154 浓粉Spinel-red（娇媚）
CMYK: C0 M55 Y30 K0RGB: R240 G145 B146 紫红色Opera-mauve（优美）
CMYK: C10 M50 Y0 K0RGB: R225 G152 B192 珊瑚粉Coral-pink（温顺）
CMYK：C0 M50 Y25 K0RGB: R241 G156 B159 火烈鸟Flamingo（可爱）
CMYK: C0 M40 Y20 K10RGB: R245 G178 B178 淡粉Pale-pink（雅致）
CMYK: C0 M30 Y10 K0RGB: R247 G200 B207 贝壳粉Shell-pink（纯真）
CMYK:C0 M30 Y25 K0RGB:R248 G198 B181 淡粉，婴儿粉Baby-pink（美丽动人）
CMYK:C0 M15 Y10 K0RGB:R252 G229 B223 鲑鱼粉Salmon-pink（有趣）
CMYK:C0 M50 Y40 K0RGB：R242 G155 B135 朱红Vermilion（积极）
CMYK:C0 M85 Y85 K0RGB:R233 G71 B41 绯红，绛红scarlet（生命力）
CMYK:C0 M100 Y100 K0RGB：R230 G0 B18 深红Strong-red（华丽）
CMYK:C0 M100 Y100 K10RGB:R216 G0 B15 绯红Cardinal-red（威严）
CMYK:C0 M100 Y65 K40RGB:R164 G0 B39 酒红Buraunby（充实）
CMYK:C60 M100 Y80 K30RGB:R102 G25 B45
土红Old-rose（柔软）
CMYK:C15 M60 Y30 K15RGB:R194 G115 B127 橙色Tangerine（生气勃勃）
CMYK:C0 M80 Y90 K0RGB:R234 G85 B32 柿子色Persimmom（开朗）
CMYK:C0 M70 Y75 K0RGB:R237 G110 B61 橘黄色Orange（美好）
CMYK:C0 M70 Y100 K0RGB:R237 G109 B0 太阳橙Sun-orange（丰收）
CMYK:C0 M55 Y100 K0RGB:R241 G141 B0 热带橙Tropical-orange（幻想）
CMYK:C0 M50 Y80 K0RGB:R243 G152 B57 蜂蜜色Honey-orange（轻快）
CMYK:C0 M30 Y60 K0RGB:R249 G194 B112 杏黄色Apricot（无邪）
CMYK:C10 M40 Y60 K0RGB:R229 G169 B107 伪装沙Sandbeige（天真）
CMYK:C0 M15 Y15 K10RGB:R236 G214 B202 浅茶色、米色Beige（纯朴）
CMYK:C0 M15 Y30 K15RGB:R227 G204 B169 浅土色Pale-ocre（温和）CMYK:C20 M30 Y45 驼色Camel（质朴）
CMYK:C10 M40 Y60 K30RGB:R181 G134 B84 椰棕色Coconets-brown（古典）
CMYK:C50 M80 Y100 K40RGB:R106 G51 B21 棕色、茶色Brown（安定）
CMYK:C45 M75 Y100 K40RGB:R113 G59 B18 咖啡Coffee（坚实）
CMYK:C60 M70 Y100 K25RGB:R106 G75 B35 金盏花Marigold（华丽）
CMYK:C0 M40 Y100 K0RGB:R247 G171 B0 铬黄Chrome-yellow（生动）
CMYK:C0 M20 Y100 K0RGB:R253 G208 B0 茉莉Jasmine（柔和）
CMYK:C0 M15 Y60 K0RGB:R254 G221 B120 淡黄色Cream（童话）
CMYK:C0 M10 Y35 K0RGB:R255 G234 B180 象牙色Ivory（简朴）
CMYK:C10 M10 Y20 K0RGB:R235 G229 B209 香槟黄Champagne-yellow（闪耀）
CMYK:C0 M0 Y40 K0RGB:R255 G249 B177 月亮黄Moon-yelloe（智慧）
CMYK:C0 M0 Y70 K0RGB:R255 G244 B99 鲜黄色Canaria-yellow（开放）
CMYK:C0 M0 Y100 K0RGB:R255 G241 B0 含羞草、巴黎金合欢Mimosa（幸福）
CMYK:C10 M15 Y80 K0RGB:R237 G212 B67 芥子Mustard（乡土）
CMYK:C20 M20 Y70 K0RGB:R214 G197 B96 黄土色Ochre（温厚）
CMYK:C0 M35 Y100 K30RGB:R196 G143 B0 卡机色Khaki（田园）
CMYK:C0 M30 Y80 K40RGB:R176 G136 B39 黄绿色Yellow-green（自由）
CMYK:C30 M0 Y100 K0RGB:R196 G215 B0 苹果绿Apple-green（新鲜）
CMYK:C45 M10 Y100 K0RGB:R158 G189 B25 嫩绿Fresh-leaves（快活）
CMYK:C40 M0 Y70 K0RGB:R169 G208 B107 叶绿色Foliage-green（自然）
CMYK:C50 M20 Y75 K10RGB:R135 G162 B86 草绿色Grass-green（成长）
C,YK:C40 M10 Y70 K0RGB:R170 G196 B104 苔绿色Moss-green（柔和）
CMYK:C25 M15 Y75 K45RGB:R136 G134 B55 橄榄绿Olive（诚意）
CMYK:C45 M40 Y100 K50RGB:R98 G90 B5 常青藤Ivy-green（安心）
CMYK:C70 M20 Y70 K30RGB:R61 G125 B83 钴绿Cobalt-green（自然）
CMYK:C60 M0 Y65 K0RGB:R106 G189 B120 翡翠绿Emerald-green（希望）
CMYK:C75 M0 Y75 K0RGB:R21 G174 B103 碧绿Turquoise-green（协调）
CMYK:C70 M10 Y50 K0RGB:R66 G171 B145 灰绿色、青瓷色Celadon-green（潇洒）
CMYK:C55 M10 Y45 K0RGB:R123 G185 B155 孔雀石绿Malachite-green（和平）
CMYK:C85 M15 Y80 K10RGB:R0 G142 B87 薄荷Mint（痛快）
CMYK:C90 M30 Y80 K15RGB:R0 G120 B80 碧色Viridian（温情）
CMYK:C90 M35 Y70 K30RGB:R0 G101 B80 孔雀绿Peacock-green（品格）
CMYK:C100 M30 Y60 K0RGB:R0 G128 B119
地平线Horizon-blue（奇趣）
CMYK:C35 M0 Y20 K0RGB:R176 G220 B213 浅天蓝色Light sky-blue（澄澈）
CMYK:C40 M0 Y10 K0RGB：R161 G216 B230 水蓝Aqua-blue（正义）
CMYK:C60 M0 Y10 K0RGB:R89 G195 B226 蔚蓝Azure-blue（爽快）
CMYK:C70 M10 Y0 K0RGB:R34 G174 B230 天蓝Sky-blue（清凉）
CMYK:C45 M10 Y10 K0RGB:R148 G198 B221 淡蓝Baby-blue（幻想）
CMYK:C30 M0 Y10 K10RGB:R177 G212 B219 浅蓝Pale-blue（温和）
CMYK:C40 M10 Y0 K20RGB:R139 G176 B205 水蓝、浅蓝Saxe-blue（宽容）
CMYK:C60 M15 Y0 K30RGB:R82 G129 B172 蓝绿色、水蓝宝石Aquamarine（纯粹）CMYK:C75 M30 Y10 K15RGB:R41 G131 B177 翠蓝、土耳其玉色Turquoise-blue（平衡）CMYK:C80 M10 Y20 K0RGB:R0 G164 B197 蓝绿Cyan-blue（清楚）
CMYK:C95 M25 Y45 K0RGB:R0 G136 B144 孔雀蓝Peacock-blue（贵重）
CMYK:C100 M50 Y45 K0RGB:R0 G105 B128 天蓝Cerulean-blue（冷静）
CMYK:C100 M35 Y10 K0RGB:R0 G123 B187 钴蓝Cobalt-blue（镇静）
CMYK:C95 M60 Y0 K0RGB:R0 G93 B172 深蓝Ultramarine（深远）
CMYK:C100 M80 Y0 K0RGB:R0 G64 B152 品蓝、宝蓝Royal-blue（格调）
CMYK:C90 M70 Y0 K0RGB:R30 G80 B162 青金石、靛色Lapis lazuli（睿智）
CMYK:C95 M80 Y0 K0RGB:R19 G64 B152 鼠尾草Salvia-blue（洗练）
CMYK:C70 M50 Y10 K0RGB:R91 G119 B175 韦奇伍德蓝Wedgwood-blue（高贵）
CMYK:C55 M30 Y0 K25RGB:R102 G132 B176 青蓝Slate-blue（静寂）
CMYK:C60 M40 Y20 K20RGB:R100 G121 B151 天蓝、宝蓝Sapphire-blue（智慧）
CMYK:C90 M45 Y10 K35RGB:R0 G87 B137 石青Mineral-blue（认真）
《手机壁纸176,220》出自：百味书屋
链接地址：http://www.850500.com/news/135850.html
转载请保留,谢谢!