在线
客服

在线客服
尊敬的客户,我们24小时竭诚为您服务 公司总机: 0755-83312037 (32条线)

客服
热线

0755-83312037 (32条线)
7*24小时客服服务热线

?

关注
微信

关注官方微信

返回
顶部

17

2018-05
游戏官网设计经验分享:网站设计具体过程

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">内页的设计,延续昏暗的设计风格、第一人称视角、全程的背景音乐,这一切都旨在为玩家提供一个真实环境氛围,让玩家体验更加真实、刺激。</font> </td> </tr></tbody></table> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">引言:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">提到横版格斗的网络游戏,大家可能最熟悉的就是腾讯代理的2D像素游戏(DNF),从08年上线到现在一直热度不减,可见在中国的游戏市场上格斗类的游戏是多么的受到玩家的热爱。随着电脑硬件的提高,游戏的画面品质得到了进一步提高。创造出高品质的横版格斗游戏成了众多游戏厂商的目标。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">项目背景:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">《暗影之剑》是一款成人横版动作MMORPG。游戏首次将暗黑写实风格与横版动作类型结合,依托源于TVgame的物理引擎与真人捕捉技术,将横版游戏的动作打击感提升到了全新的高度。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046110.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">项目解析:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">作为一款全新的游戏,如何让玩家对游戏产生期待感,成了至关重要的问题了。通过对整个项目进行分析,我们从中提炼出一些关键词这些就是影响玩家期待度的因素。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046111.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">官网改版设计思路:</h4> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046112.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">网站设计执行:</h4> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046113.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046114.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">职业专题沿用官网的设计风格,在很大程度上保持整套网站的统一。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046115.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">游戏特色专题:通过对市场的竞品游戏进行对比,突出游戏的全新特色,互动的小游戏让玩家提前体验游戏。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046116.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">互动站创意:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">为了让玩家对游戏有足够深刻的认识,我们决定对游戏进行新一轮的宣传;这次的重点是让玩家能够参与进来,这一次官网的改版采用的互动站的形式。让玩家在了解游戏世界观的同时,参与游戏提升认知度。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">经过几次和项目组开会讨论,最终确认了大致的方向,通过回忆录的形式,讲述探险者在探险过程中的遭遇,最终是如何遇到终极BOSS暗影女王的过程。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046117.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">原画素材的提供:</h4> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046118.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">设计执行:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">页面采用了倒叙的手法,所以在前面LOADING的部分,并没有单独设计一个加载页面,而是展示一本古老的书籍、昏暗的灯光、破旧的书桌、斑驳的地图等等,让整个页面代入感变得更强。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046119.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">内页的设计,延续昏暗的设计风格、第一人称视角、全程的背景音乐,这一切都旨在为玩家提供一个真实环境氛围,让玩家体验更加真实、刺激。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461110.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">玩家在遇到交互点的时候,通过有声旁白的形式介绍游戏内容,让玩家在体验过程中快速了解游戏。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461111.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">为了让故事更加流畅,我们在转场部分设计了塌陷的效果,让前景跟后景有效的结合到一起。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461112.jpg"><h4>最终设计效果:</h4> <img alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461113.jpg"><p>体验地址:<a target="_blank" href="http://db.changyou.com/concept/index.shtml">http://db.changyou.com/concept/index.shtml</a></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">上线效果:</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">上线当天页面超过50W玩家体验网站,并且好评率超过95%。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">总结:</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">首先感谢FLASH和重构同学对页面高度还原,让原本静态的页面变得活灵活现。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span style="COLOR: rgb(128,0,0)">重体验:</span>要站在用户的角度进行设计,了解用户最期待的那个点,快速有效的进行传达。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span style="COLOR: rgb(128,0,0)">重沟通:</span>作为设计师,不是拿到需求就闷头做,多和项目组进行沟通,及时了解彼此的需求,毕竟一个人的想法是片面的,创意经常会在谈话之间迸发。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span style="COLOR: rgb(128,0,0)">重思考:</span>多思考、多分析、让每一次的设计改变都有理有据。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">个人不足:</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">第一次尝试这种互动站,尽管还算顺利,但是还有很多细节需要提升,比如最后定帧画面的细节问题,女BOSS呈现比较仓促等等。希望能下一次设计中避免这些问题。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">作为一款新游戏,在网络游戏发达的今天,要想玩家对游戏产出期待感,确实不是一件容易的事情,只靠游戏原画去宣传游戏已经不能满足玩家了,这时就需要我们运用新的思维,新的技术,新的创意,让玩家接受并能游戏产生期待感!</p>

Read more+

17

2018-05
网页字体设计:精致的字体使用实例

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">这不仅仅关乎你说什么,而是你怎么说,是吧?根据你的目的,我们可以尝试更多,在排版上也更有创意。我们可以大胆的使用大字号,粗体,或是新奇独特的手写体。我们应该始终记得字体要有可读性,因为如果没有人能阅读的话,这样的字体就没什么可以炫耀的。如果设定了韵律</font> </td> </tr></tbody></table> <p><img alt="all_640320" width="640" src="http://www.webjx.com/files/allimg/131217/2151030.png"></p> <p>第一印象通常就是一种持续印象。不管你是否意识到,你的版式能够帮助用户在他们甚至还没有开始读一个字或者点击一个按钮之前建立一个体验。版式不仅仅是讲述一个故事,它告诉用户是这个网站的幕后以及这个背后的人是做什么的。对于字体的处理创造了一种氛围,同时也会像声音的音调一样击起长久的回想。</p> <p>你需要问一问你自己,你想要表达什么以及你想要怎么去表达它?想一想用户:当页面加载的时候你想让他们有什么样的感受和体验?版式建立一个交流的模式,同时,也表达了一个网站的个性。字体的选择将会决定人们对你的网站的反馈。</p> <p>以下的网站有着非常明显的个性,大部分都是通过版式来建立的。诚然,有时候他们并不是很完美(不幸的是,性能常常是个问题),但是他们通过字体来吸引用户来产生兴趣。好的网页版式不仅仅只是一个美好的视觉处理,同时也要注意速度。很多设计师彻底忽视了性能。请注意:这些网站没有在老的浏览器或者移动设备上做过测试。当然这不是这篇文章的主旨。相反的,我们将会近距离的观察有趣的版式处理以及字体的创新使用。</p> <h4><strong>精致的字体使用实例</strong></h4> <p>现在开始跟上字体去私奔,体验一路奇幻的<span class="wp_keywordlink_affiliate">字体设计</span>之旅。</p> <h4><strong><a target="_blank" href="http://thisisplayful.com/">Playful</a></strong></h4> <p><img alt="图-2" width="600" height="498" src="http://www.webjx.com/files/allimg/131217/2151031.png"></p> <p>Wow,这个网站确实很幽默!这个网站的调调不是仅仅根据字体的特征而设计的,而是通过它们的<span class="wp_keywordlink_affiliate">排版</span>方式。它打破了我们的常规交流的顺序。通常你会在印刷海报中看到轴对称的<span class="wp_keywordlink_affiliate">排版</span>,那通常给人印象深刻。在这个网站上,字体的选择并不是非常的有个性的装饰性或者是很好玩的装饰性字体,它就是用的非常简单的无衬线字体。非常棒的背景图案触觉体验,它引导阅读的方向,以及用户阅读网站的文字时头部从一边到另一边的运动。</p> <h4><strong><a target="_blank" href="http://www.lawebdelatelier.com/en">Atelier</a></strong></h4> <p><img alt="图-3" width="600" height="456" src="http://www.webjx.com/files/allimg/131217/2151032.png"></p> <p>这个网站的所有地方都值得关注。整个页面由不同的元素组合在一起有一种动感。网站的logo是用的一种宽的但是很优雅的字体,建立了一种设计基调。运动的感觉是由一条倾斜的线来建立的,这根倾斜的直线跟logo中的首字母“A”的倾斜保持一致,创建了这个网站的节奏。滑动的预览图深深的抓住你的眼球,图片很大让你感觉到无拘无束。然而,这个网站的背景图片居然有:2560*5350像素,2.4MB,哎哟!</p> <h4><strong><a target="_blank" href="http://www.cirq.com/">Cirp</a></strong></h4> <p><img alt="图-4" width="600" height="401" src="http://www.webjx.com/files/allimg/131217/2151033.png"></p> <p>这个为葡萄园设计的网站非常的独特和创新,设计的就像一个老式的海报。这个美丽的网站设计成功的找到了一种葡萄酒的感觉。我喜欢”Russian River”后面的阴影会跟随着你的鼠标的移动而运动从而在一个另外的静态页面创造出动感。这个地方最主要的缺点就是,从某中意义上说,文字是作为图像而嵌入到网站上的,可能会让文字无法复制和粘贴。还有,当然类似的设计被创造出来需要不少于3.4 MB和43次HTTP请求。</p> <h4><strong><a target="_blank" href="http://www.maxdc.co/">max Di Capua</a></strong></h4> <p><img alt="图-5" width="600" height="545" src="http://www.webjx.com/files/allimg/131217/2151034.png"></p> <p>这里的布局和排版混合在一起是通过一套模板的系统建立的,通常是几个部分重叠在一起。这种布局的方法很清新因为它不死板,并且非常容易改变。排版也是同样的感觉,因为他们都有很大的间距,不管是大量的文字还是稠密的文字。标题和说明性文字,以一种很容易阅读的无衬线字体出现在作品的旁边。</p> <h4><strong><a style="TEXT-DECORATION: none; COLOR: rgb(13,164,211); -webkit-transition: all 0.18s ease-out" target="_blank" href="https://www.rijksmuseum.nl/en">Rijksmuseum</a></strong></h4> <p><img alt="图-6" width="600" height="318" src="http://www.webjx.com/files/allimg/131217/2151035.png"></p> <p>一种很常见的字体的巨大的字母在整个屏幕范围之内,还延伸到整个页面。使得“Rijksmuseum”看起来比现实中的大很多。主页就通过循环漂亮的图片来展示博物馆的内容。主导航也很有意思:当你点击的时候,它会下滑然后让你选择子目录。整个网站的体积只有955KB以及31次HTTP请求&#8212;&#8212;优化做的很棒。</p> <p></p>

Read more+

17

2018-05
网页设计创意构图:网站专题构图设计之美

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">构图之美:好的专题都是怎么构图的?</font> </td> </tr></tbody></table> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">一个成功的专题页面,大部分会具有以下几个出彩的要素:色彩、构图、风格创意,细节等。一个页面从无到有,设计师需要对整个页面有全盘的设计和把控,良好的画面分割能够让用户第一眼看到这个页面就能被视觉吸引,甚至不用浏览具体内容就能了解这个页面的很多信息。同样的素材,同样的配色,不同的构图能够让页面出来的效果有天壤之别。如果你还抱着一个专题就是一个出色的头图,下面的内容按部就班的填进去,那你就OUT了。现在的专题设计越来越具有整体画面感,看上去不像网站,更像是精美的杂志或者是精彩的平面设计作品。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">好的页面构图能够让你页面更出彩,也能让你做设计更事半功倍。下面,我们就来看看一些好的专题都是怎么构图的。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">(以下例子均来自互联网)</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><strong style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent">1. 几何切割</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">在现实生活与自然界中,我们随处可见几何图形的存在,简单的三角形、正方形、长方形和圆形甚至几根线条就可以组成很多有趣的图形,也很符合现代审美需求,适当的画面切割能够给页面带来动感与节奏感。加入几根线条,几个块面就能令页面起到意想不到的效果。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">实现的时候需要注意的是素材不适合太过复杂和花哨,一般会是纯色大块搭配渐变,主要突出形状和区块。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><strong style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent">A. 简单切割</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036170.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036171.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036172.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">用一个形状或者素材切分整个页面,画面瞬时变得有趣生动起来,内容区域也能得到有效划分。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">这类构图方式对内容没有过多要求,可随意安排。具体排版可根据内容来处理,也是现在专题页面用得最多,最普遍的一种构图方式。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><strong style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent">B. 对称切割</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036173.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036174.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036175.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">这种构图方式的前提一般是内容分主要两部分,并且这两部分是对立关系的情况下,比如说:对战,男女,冷热等等。页面一分为二,内容划分明确也更加具有视觉冲击力。</p> <p></p>

Read more+

17

2018-05
移动应用UI设计模式:用户友好的导航模式

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">打造用户友好界面:移动UI中的6种主要导航模式。</font> </td> </tr></tbody></table> <p><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">作为一本简易的UI模式参考书,《移动应用UI设计模式》非常适合移动应用开发人员、UI设计师阅读,还没买的同学们可以看看这本书关于</span><span class="wp_keywordlink_affiliate" style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">移动UI</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">设计中导航模式的经验分享。</span></p> <span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">正如精良的设计一样,优秀的导航也大象无形。不管是浏览好友信息,还是租赁汽车,完美的<span class="wp_keywordlink_affiliate">导航设计</span>能让用户根据直觉使用应用程序,也能让用户非常容易地完成 所有任务。一款应用的导航可以被设计成各种样式,但我想着重介绍6种主要的导航模式,也就是主菜单的导航模式。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038560.jpg" width="490" height="397"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">跳板式 跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被称为“快速启动板”(Launchpad)。跳板式导航的特征是,登录界面中 的菜单选项就是进入各个应用的起点。Facebook 应用沿用了iOS 主界面上的跳板式设计,其他应用随之跟风。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038561.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Facebook 的跳板式导航和Ovi Maps 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038562.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Trulia 和LinkedIn 的<span class="wp_keywordlink_affiliate">导航设计</span></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038563.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Palm 手机上的NewsRoom 和Nokia 手机上的Yahoo !</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能,允许用户改变跳板式导航的布局(见图1-5)</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038564.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">PayPal 用户个性化的跳板式导航和Gowalla 应用的早期版本<br>常见的布局形式是3×3、2×3、2×2 和1×2 的网格(见图1-6)。但跳板式导航不一定非要拘泥于网格布局,你可以成比例地放大某些选项,以彰显其重要性。在iPhone的应用Masters 中,VIDEO 选项就是其他菜单选项的2 ~ 3 倍大。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038565.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">跳板式导航的网格布局</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038566.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Norton Mobile 的2×2 网格布局和Masters 的不规则布局。<br>为同等重要的内容项使用网格布局,为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。<br>列表菜单式 列表菜单式导航与跳板式导航的共同点在于,每个菜单项都是进入应用各项功能的入口点。这种导航有很多种变化形式,包括个性化列表菜单 (Personalized List Menu)、分组列表(Grouped List)和增强列表(Enhanced List)等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038567.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">列表菜单:Valspar Paint 和Kayak 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038568.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">列表菜单:Palm 手机上的RadioTime 和Cozi 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/2038569.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">个性化列表:Blackboard 和Zoho CRM 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385610.jpg" width="621" height="485"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">增强列表:Amazon MP3 应用;分组列表:Stratus 应用<br>列表菜单很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项,用来返回菜单列表。通常的做法是在标题栏上显示一个带有列表图标或“菜单”字样的按钮。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">选项卡式</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">选项卡式导航在不同的操作系统上有不同表现,对于选项卡的定位和设计,不同操作系统有不同的规则(见图1-12)。如果要为你的应用选择这种导航模式,就要为不同的操作系统专门定义选项卡的位置。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385611.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">不同操作系统内选项卡的位置<br>iOS、WebOS 和BlackBerry 系统都把选项卡放在了屏幕底端,这样用户就可以用拇指进行操作。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385612.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">位于屏幕底部的选项卡:Jamie Oliver Recipes 和Molome 应</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385613.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">位于屏幕底部的选项卡:BlackBerry 系统的应用World 和WorldMate<br>屏幕底部水平滚动的选项卡是个非常不错的设计,如图1-15 中的Starbucks 和Blue Mobile 应用,它可以在同一屏内提供更多的操作选项。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385614.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">位于屏幕底部的滚动选项卡:Starbucks 和Blue Mobile 应用。<br>Android、Symbian 和Windows 系统都把选项卡定位在屏幕的顶端,这种形式看上去很眼熟,因为它模仿了标准的网站导航模式。Nokia 和Windows 都在屏幕顶端设计了可滚动的选项卡,用户移动选项卡后能看到更多的菜单项。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385615.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">位于屏幕顶端的滚动选项卡:Harvest TimeTractor 应用和Nokia 上的Fring 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385616.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">位于屏幕顶端的选项卡:Foursquare 和HitPost 应用<br>为已选择的菜单项设置不同的视觉效果,用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">陈列馆式</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示(见图1-18 至图1-20)。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385617.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">BBC 和PULSE 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385618.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Flickr 应用和Palm 手机上的PictureIt 应用<br>有时,对这些内容进行分组更易于用户浏览。Dwell 利用侧边选项卡把陈列馆式导航里的内容组织成了可供用户管理的内容块。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385619.jpg" width="312" height="521"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Dwell 应用<br>陈列馆式导航能很好地应用于用户需要经常浏览,频繁更新的内容。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">仪表式</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">仪表式导航提供了一种度量关键绩效指标(Key Performance Indicators,KPI)是否达到要求的方法。经过设计以后,每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385620.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Mint 和Ego 应用中的仪表式导航<br>不要使用过多的仪表式导航。你需要开展研究才能决定应该对哪些关键量度采用仪表式导航。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">隐喻式</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这种导航的特点是用页面模仿应用的隐喻对象。这种导航主要用于游戏,但在帮助导航 人们组织事物(如日记、书籍、红酒等),并对其进行分类的应用中也能看到。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385621.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Awesome Note 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385622.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Cellar 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385623.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">DoItTomorrow 和TripJournal 应用</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385624.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Aldiko Book Reader 应用<br>一定要谨慎地使用隐喻式导航,蹩脚的模仿很可能造成10.1 节出现的反模式(anti-Pattern)。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">超级菜单式</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">移动设备上的超级菜单式导航与网站所用的超级菜单导航类似,它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。RipCurl 网站就利用超级菜单显示服饰的次级类别。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385625.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">WebOS 系统版本的Facebook 利用超级菜单来精简导航,避免了跳板式导航中过多的选项。Walmart 在它们的Android 应用中也采用了超级菜单式。<br>在选择导航模式之前,首先要确定信息架构。如果要导航的对象仅仅是应用中少数主要内容,就可以使用选项卡之类的导航模式。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="navigations" src="http://www.webjx.com/files/allimg/131218/20385626.jpg" width="490"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">WebOS 系统下的Facebook 和Android 系统下的Walmart</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">本文摘自《移动应用UI设计模式》</p> </span> <p>&#160;</p>

Read more+

17

2018-05
认识响应式图标,如何制作响应式图标

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">说实话,第一次听到“响应式图标”我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步。那么今天,我们就来八一八,这到底什么个什么玩意儿。</font> </td> </tr></tbody></table> <p>说实话,第一次听到“响应式图标”我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步。那么今天,我们就来八一八,这到底什么个什么玩意儿。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">他是什么?</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold"><span class="wp_keywordlink_affiliate">响应式</span>图标</strong>并不是说图标大小会随屏幕尺寸的变动而改变,而是意味着图标会根据自己所处何种设备来改变自身大小。这就意味着屏幕尺寸对图标来说不是那么重要了,因为它能自动调节,它可以变大变小&#8212;&#8212;同一时间,同一屏幕。图标的设计上的差别不会太明显,一般都是细节问题。详细请看下图:</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Responsive Icons" src="http://www.webjx.com/files/allimg/131219/2232130.gif" width="600" height="450"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">响应式图标很重要吗?</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">随着字体图标、响应式网页以及微型设计的流行,我们的风格也随着改变,设计里的扁平化图标越来越多。我觉得这个东西有人接受那肯定就有人不愿意接受,不愿改变的不一定就是做的不好的,但是我相信走在改革前沿的肯定比没有动作的人领先一大截。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">响应式图标推动了图标设计的发展,让用户得到了更好的体验,操作性更好,视觉效果更佳。为了让网页更加优秀,我们提出了响应式图标,这也是每个设计师以及用户心里所想、所愿。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Responsive Icons" src="http://www.webjx.com/files/allimg/131219/2232131.png" width="600" height="194"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Iconic?</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">如果你没有听说过iconic,那它可能就是一个产品,但是我觉得你肯定看到过,因为iconic制作了一系列非常流行的图标,几乎人尽皆知。这个团队致力于开发响应式图标,可以说他们是响应式图标背后的男人。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Iconic" src="http://www.webjx.com/files/allimg/131219/2232132.png" width="600" height="285"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">Iconic近期干过最大的一票是成功发起并完成&#160;Kickstarted运动,这让他们获得92624美元的利润,是的你没看错,我也没有忘记小数点,这超出他们预期的15000美元的618%。有了这些钱,他们就可以进行深入研究,让响应式图标变得更好。所以说,有些事情你做了才知道对不对、行不行,就像你不知道他们最初的目的仅仅是对网页图标进行改革。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">如果我想做响应式图标,怎么做?</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">如果你准备开发响应式图标,这里有几种方法供你选择,这些方法是iconic已经摸索到的、可能的方法,供你参考。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">Media queries</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这是迄今为止最简单的方式,其允许我们在不改变内容的情况下,改变页面的布局以适应不同的设备,以此加强体验。但是这种方法也有弊端,它无法将细节处理完美。从表面上看,media queries仍旧是响应式图标设计的核心方法,试试就知道。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Media queries" src="http://www.webjx.com/files/allimg/131219/2232133.png" width="600" height="308"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">polyfills</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">很多人都不知道它是什么,所以我跟大家解释一下:你可以把它想象成media queries,只不过是由元素组成。比如说下面的例子,它的意思是当页脚大于等于250px时,背景变为白色。这种方法比media queries要直接精确一些。</p> <div id="highlighter_82523" style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"> <table style="WIDTH: 730px; BORDER-COLLAPSE: collapse; MARGIN: 0px 0px 1.75em; BORDER-SPACING: 0px" cellspacing="0" cellpadding="0" border="0"><tbody><tr> <td style="VERTICAL-ALIGN: top; BORDER-BOTTOM: rgb(231,231,231) 1px solid; COLOR: rgb(136,136,136); PADDING-BOTTOM: 0.81em; TEXT-ALIGN: left; PADDING-TOP: 0.81em; PADDING-LEFT: 14px; PADDING-RIGHT: 14px"> <div>1</div> <div>2</div> <div>3</div> </td> <td style="VERTICAL-ALIGN: top; BORDER-BOTTOM: rgb(231,231,231) 1px solid; COLOR: rgb(136,136,136); PADDING-BOTTOM: 0.81em; TEXT-ALIGN: left; PADDING-TOP: 0.81em; PADDING-LEFT: 14px; PADDING-RIGHT: 14px"> <div> <div><font size="3"><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">footer[min-width~=”</code><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">250px</code><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">”]{</code></font></div> <div><font size="3"><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</code><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">background</code><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">:<span class="Apple-converted-space">&#160;</span></code><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">#fff</code><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)">;</code></font></div> <div><code style="FONT-SIZE: 0.91em; FONT-FAMILY: Monaco, monospace, Courier, 'Courier New'; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: rgb(255,229,229)"><font size="3">}</font></code></div> </div> </td> </tr></tbody></table> </div> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">元素查询是一个新兴概念,不是所有的浏览器都支持,不过若你使用javascript,它就可以正常工作,详细了解请点击:&#160;here</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Media queries" src="http://www.webjx.com/files/allimg/131219/2232134.png" width="600" height="283"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">SVG窗口</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">SVG窗口这个方法有点儿意思嗬,完完全全意料之外。SVG允许动态控制元素以及图标,这也给图标设计带来了新的方向。试想一下,如果将SVG与media queries相结合,那么图标就可以自己感受屏幕的大小随之改变了~但是这点实现起来有一定的难度…就像SVG窗口很难和DOM相结合一样。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">总结</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">师父领进门,修行在个人,今天我们带你感受了一下响应式图标,对此,你心里的想法是…?请在下方的评论里告诉我们吧~</p>

Read more+

17

2018-05
网页设计技巧:Icon Font制作细节案例

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题,使得大家可以在今后使用的时候可以很快上手并且避免这些问题。</font> </td> </tr></tbody></table> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953430.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">zhaolei:现在在提起<span class="wp_keywordlink_affiliate">Icon Font</span>,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作<span class="wp_keywordlink_affiliate">Icon Font</span>的整个流程整理一下,并且加入了自己在制作中遇到的问题,使得大家可以在今后使用的时候可以很快上手并且避免这些问题。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">一、首先要说的是,什么是Icon Font?</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">我认为,我们现在通常所指的Icon Font,是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">二、知道了什么是Icon Font之后,我们要了解它能干什么,大家是怎么用的</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这是一淘网用到Icon Font的地方</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953431.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这是新浪微博微吧用到Icon Font的地方</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953432.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这里还有我们自己做的小浪人</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953433.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">三、下面我们自然要看看Icon Font都有什么优缺点了,从而决定我们是否要使用它</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">首先它的体积要比图片小的多</strong></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953434.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这是做出来的一组Icon Font字体文件,试想一下如果这是图片的话要有多大,50K?100K?甚至更多?然而现在这个文件的大小仅仅只有13K</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953435.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">不仅体积小,而且还具有更好的可维护性(因为是矢量,所以拉伸不变形;颜色可以自行更换,支持一些CSS3对文字的效果)</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">像这些图片完全可以用Icon Font制作</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953436.jpg"><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953437.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">并且还可以通过base64置于CSS内,从而不产生图片的http请求</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">当然,Icon Font也是有缺点的,由于是字体,所以只支持图片上是纯色的,多种颜色的就不支持了</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953438.jpg"><br style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/1953439.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这其中的表情有多种颜色,因此就没法使用Icon Font了</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">但是在Win8下大量的纯色图标的出现,是否是Icon Font可以普及的一个机会呢?</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/19534310.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">虽然制作Icon Font自然而然要增加重构的成本,但是跟后期维护相比还是值得的</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">四、Icon Font的优点明显要大于缺点,并且有可以使用的空间,因此我们决定使用它之后,就要学会怎么去制作Icon Font</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">在制作之前我们要知道需要什么工具,其实很简单,只需要FontCreator,PS这两个工具即可。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">制作的过程,首先需要我们的设计师给出Icon的矢量图,我们需要在PS中将这个Icon图层栅格化,之后保存为png24,再在FontCreator中通过图片导入到字体中,进行大小的调整(下面会给出字体制作各个值的用处,本人觉得比较重要的就是离左右的宽度以及离baseline的距离,最好一类icon的布局的一样的,这样也方便对齐),最后通过在线工具将字体文件转换成我们需要的多种格式。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/19534311.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这是字体各个值的含义</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">因为不同的浏览器所支持的字体问题时有差别的,因此我们需要将我们制作好的字体转换成多种格式,附上一个比较好的字体转换在线地址:<br>fontsquirrel&#160;我们转换的时候如果没有特殊需要,直接通过basic转换就可以</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">五、制作完成后我们当然是要使用它了</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">首先是字体声明,由于各个浏览器所支持的字体文件不同,因此我们要针对浏览器的这个特点制作多种字体文件以达到兼容的目的</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/19534312.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">要在网页中显示,目前有两种方式,一种是直接在html中输入相应的Icon所代表的字体,好处是兼容所有浏览器,就是在更改Icon的时候需要下游的后端程序员同事协助更改。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/19534313.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">另一种方法是在CSS中通过after伪类添加,这样可以通过CSS直接控制Icon的类别,只是不是所有浏览器都兼容,但是我们必须考虑到IE6的用户。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/19534314.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">通过分析现在开发的流程以及项目,用第一种方法在html中直接输入是比较合适的。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">当然了,我们输入的时候怎么去知道要输入的字符是我要输入的Icon呢?只需要通过查阅Unicode对照表,根据字体制作软件中的Unicode码进行对比即可。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">我们制作Icon Font是为了自己之后使用的,因为一个方便管理并且使用的html组件页面是必不可少的,其中应该包括对Icon的描述、所对应的代码等等这些信息,目的就是在自己或者同事使用的时候可以很方便。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">个人心得:</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">在制作Icon Font的过程中,自己也遇到了一些问题</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">&#160;跨域问题,这个属于老生常谈了,通过配置自己的服务器或者放在同域下都可以解决,还可以使用base64置入CSS中。<br>&#160;制作字体文件的时候一定要记得不要为了是文件过小而瞎删里面的东西</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速上手制作Icon Font" src="http://www.webjx.com/files/allimg/131223/19534315.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这个软件中前面的这几个一定不要删,否则大部分浏览器都读不出来这个字体文件。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">如果从PS导出的PNG24在导入字体文件的时候发生了变形,可以尝试把PS中的矢量图等比拉大后在存成PNG24导入。</p>

Read more+

17

2018-05
网页设计实例分析:日式网页设计案例分析

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">在很多人眼里,日本是一个隐忍、充满禅意的国家。以寺庙、茶道、电子产品而闻名。既传统,又现代。日本的建筑设计、书刊设计受世界瞩目。但是不知怎么的,日本的网页设计风格很怪异。有点像1998年的网页风格。</font> </td> </tr></tbody></table> <p><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px">在很多人眼里,日本是一个隐忍、充满禅意的国家。以寺庙、茶道、电子产品而闻名。既传统,又现代。日本的建筑设计、书刊设计受世界瞩目。但是不知怎么的,日本的</span><span class="wp_keywordlink_affiliate"><a href="http://www.webjx.com/"><u>网页设计</u></a></span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px">风格很怪异。有点像1998年的网页风格。</span></p> <p><strong style="FONT-WEIGHT: bold"><a target="_blank" href="http://www.rakuten.co.jp/">Rakuten</a></strong></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="480" src="http://www.webjx.com/files/allimg/131223/1958330.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><strong style="FONT-WEIGHT: bold"><a target="_blank" href="http://www.nicovideo.jp/">NicoNicoDouga</a></strong></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="613" src="http://www.webjx.com/files/allimg/131223/1958331.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><strong style="FONT-WEIGHT: bold"><a target="_blank" href="http://gigazine.net/">Gigazine</a></strong></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="516" src="http://www.webjx.com/files/allimg/131223/1958332.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p>看看日本这些最流行的网站(比如&#160;<a target="_blank" href="http://www.goo.ne.jp/">Goo</a>,&#160;<a target="_blank" href="http://www.rakuten.co.jp/">Rakuten</a>,&#160;<a target="_blank" href="http://www.yomiuri.co.jp/">Yomiuri</a>,&#160;<a target="_blank" href="http://www.nicovideo.jp/">NicoNico</a>,&#160;<a target="_blank" href="http://okwave.jp/">OKWave</a>,&#160;<a target="_blank" href="http://www.cosme.net/">@cosme</a>),你会发现他们都有共同点:</p> <p>文字排布紧密<br>图像质量偏低<br>网页栏数太多<br>亮的刺眼的色彩和闪动的Banner<br>过度使用一些过时的技术,比如Flash</p> <p>为什么其他设计日本人那么在行,<span class="wp_keywordlink_affiliate"><a href="http://www.webjx.com/"><u>网页设计</u></a></span>这么糟烂呢?原因有很多,如下:</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; Be-width: 0px">语言差异</h4> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Sir, is that a middle finger ?" width="614" height="345" src="http://www.webjx.com/files/allimg/131223/1958333.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p>Photo&#160;by&#160;<a target="_blank" href="http://www.shootjapan.com/">shootjapan.com</a></p> <p><strong style="FONT-WEIGHT: bold">表意文字</strong><span class="Apple-converted-space">&#160;</span>&#8211;&#160;中文和日文都属于表意文字,寥寥数语,但是信息量可以很大。在西方人眼里看来,这些文字可能看上去混杂无比,但是能够让日文使用者在短时间内表达出大量的意思。</p> <p><strong style="FONT-WEIGHT: bold">缺少强调</strong>&#160;&#8211;&#160;日文没有斜体,也没有大写字母,不像拉丁语系,很多通过大小写、倾斜来提供视觉暗示。因此,日文文本的信息层级组织不是特别容易,设计师需要分栏、配图来进行信息分层。</p> <p><strong style="FONT-WEIGHT: bold">语言障碍</strong>&#160;-互联网上大部分编程语言是由西方人和英语使用者设计的。很多的资源、资料都是用英文体现的。因此新的技术、趋势被引入到日本需要一定时间的延迟。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; Be-width: 0px">文化差异</h4> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="614" height="346" src="http://www.webjx.com/files/allimg/131223/1958334.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><strong style="FONT-WEIGHT: bold">危险回避&#160;</strong>&#8211;&#160;在日本文化中,不鼓励冒险和出格的行为。一旦某件事情有了先例,便会有很多人跟随,不管这种先例是不是问题的最佳解决方案。日本的很多流行风格都是如此,略微带一点保守。</p> <p><strong style="FONT-WEIGHT: bold">消费意识</strong>&#8211;&#160;日本人的防范心理很强,往往会仔细阅读技术规格和产品描述,在做出购买决定前,他们不会轻易的被标题和图像诱惑。“少即是多”的理论在这里并不适用,日本人需要详细的产品说明。</p> <p><strong style="FONT-WEIGHT: bold">广告意识</strong>&#8211;&#160;很多日本公司把互联网当成一个推广平台,而没把互联网当成强大的综合工具。在他们眼里,互联网只是类似宣传册,小空间密集信息宣传,而不是一种行之有效的交互工具。</p> <p><strong style="FONT-WEIGHT: bold">城市文化</strong>&#160;-&#160;漫步东京涉谷,你会被无处不在的霓虹灯广告“袭击”,嘈杂的弹球房,喧闹的人群主要由上班族和学生组成。这种繁杂同样体现在互联网上。除此之外,日本国土面积狭小,惜地如金,空间不能有一丝一毫的浪费,因此这种理念体现在<a href="http://www.webjx.com/"><u>网页设计</u></a>中,日本的网站很少采用留白。</p> <p><strong><font color="#525252" size="3" face="Tahoma">岗位要求</font></strong><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px">&#160;-&#160;我们再来看看日本的招聘广告,你会发现往往这么写“招聘网络高手”、“招聘网络管理员”,让我感觉仿佛回到了十多年前,那时候公司招IT人,都是要求编码、运营、设计一手包办&#8212;&#8212;而现在的日本依然有很多公司这么干。所以很多有潜力、有天赋的</span><span class="wp_keywordlink_affiliate">日本网页</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px">设计师选择了另谋高就,去别的地方施展他们的才华。</span></p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; Be-width: 0px">技术差异</h4> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="[Shibuya] Umbrella Bokeh" width="614" height="411" src="http://www.webjx.com/files/allimg/131223/1958335.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p>Photo&#160;by&#160;<a target="_blank" href="http://www.flickr.com/photos/scion02b/3079276821/">scion_cho</a></p> <p><strong style="FONT-WEIGHT: bold">手机后遗症</strong>&#160;-&#160;在iPhone还没流行之前,日本的手机普及率就很客观,那时日本手机以翻盖居多,因此移动互联网专门对翻盖手机进行了优化。所以,现在的<span class="wp_keywordlink_affiliate">日本网页</span>设计深受影响,喜欢把内容塞进狭小的空间里。</p> <p><strong style="FONT-WEIGHT: bold">网络字体</strong>&#8211;&#160;非拉丁语系的字体很少(中文,日本..),主要是因为表意文字跟表音文字不同,每个字都需要重新调节,设计起来非常耗时。因此日本设计师更喜欢用图片,避免使用不标准的字体。</p> <p>Windows&#160;XP&#160;&amp;&#160;IE&#160;6&#160;&#8211;&#160;尽管软硬件迅速发展,但是还有很多人在使用Win&#160;XP和IE6,尤其是在公司中。</p> <p>以上,大致就是这么几点</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Japan - Back to the Future Poster" width="614" height="826" src="http://www.webjx.com/files/allimg/131223/1958336.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p>漫步东京,总是感觉自己身处于“80年代所设想的未来景象”中,主要归功于日本的建筑。</p> <p>一方面,我看到了很多日本设计在大量炮制,很落伍,丝毫不考虑到当前的设计趋势。</p> <p>另一方面我又看到很多能工巧匠,一丝不苟的在做事情,作品难以置信的美丽实用。</p> <p>当然,有一部分的日本<a href="http://www.webjx.com/"><u>网页设计</u></a>还是不错的,像<a target="_blank" href="http://www.uniqlo.com/jp/">UNIQLO</a>,<a target="_blank" href="http://www.muji.net/">MUJI</a>,&#160;<a target="_blank" href="http://cookpad.com/">CookPad</a>&#160;以及<a target="_blank" href="http://www.kinokuniya.co.jp/">Kinokuniya</a>&#160;的网站,功能与形式兼备。我们来看看吧!</p> <p><a target="_blank" href="http://www.uniqlo.com/jp/"><strong style="FONT-WEIGHT: bold">Uniqlo</strong></a></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="482" src="http://www.webjx.com/files/allimg/131223/1958337.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><a target="_blank" href="http://www.ishiyamasenko.co.jp/"><strong style="FONT-WEIGHT: bold">Ishiyama Senkoh</strong></a></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="390" src="http://www.webjx.com/files/allimg/131223/1958338.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><a target="_blank" href="http://www.museum.toyota.aichi.jp/"><strong style="FONT-WEIGHT: bold">Toyota Municipal Museum Of Art</strong></a></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="toyota art" width="710" height="472" src="http://www.webjx.com/files/allimg/131223/1958339.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><a target="_blank" href="http://hanamichiya.jp/"><strong style="FONT-WEIGHT: bold">Hanamichiya</strong></a></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="504" src="http://www.webjx.com/files/allimg/131223/19583310.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><a target="_blank" href="http://swiss.2ngen.jp/"><strong style="FONT-WEIGHT: bold">Swiss</strong></a></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="448" src="http://www.webjx.com/files/allimg/131223/19583311.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><a target="_blank" href="http://taromag.misaquo.org/"><strong style="FONT-WEIGHT: bold">Taromagazine</strong></a></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="401" src="http://www.webjx.com/files/allimg/131223/19583312.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p><a target="_blank" href="http://www.takeopapershow.com/"><strong style="FONT-WEIGHT: bold">Takeo Paper Show</strong></a></p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="Salary Man Street" width="710" height="391" src="http://www.webjx.com/files/allimg/131223/19583313.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; Be-width: 0px"></span></p> <p>原文地址:<a target="_blank" href="http://randomwire.com/why-japanese-web-design-is-so-different/">randomwire</a></p>

Read more+

17

2018-05
交互设计案例分析:银行卡号输入交互设计

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">交互设计:银行卡号 有必要填两遍吗?</font> </td> </tr></tbody></table> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">银行卡号 有必要填两遍吗?设计师觉得这个行为很傻很天真<br>那么 设计师能代表用户吗?<br>用户是怎么认为的呢?<br>有没有更好的办法来解决这个问题</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">开篇,先讲讲我自己的趣事。早上出门后,我总会电梯里拼命回想,做完早饭我是不是关了煤气,没关的话会不会一把大火把家烧了。有时甚至,我会返回再次确认。<br>也许有些男性朋友不太理解这种行为。<br>那么,想想你们的爱车,关车门时是不是也会要反复确认?<br>为了减少意外的发生,我们总会对重要事务反复确认,这应该是一种天性。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">好吧 言归正传!<br>说说我为什么讲这个题目<br>背景&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br>最近我捣鼓提现界面优化。首当其冲优化的,当然是填两遍银行卡。我觉得这是太多余的行为了。和优化小组JS&amp;重构的同事说完以后,他们立刻跳出来反对我。<br>JS&amp;重构同事:“填两遍银行卡当然有必要啊!用户填错了怎么办?”如下图:</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037020.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">大家的看法&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br>是不是应该填两遍?我采访了组里同学们的看法。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037021.png"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">大家都默认觉得,填两遍银行卡是非常愚蠢的行为。这不是明摆着让用户多操作一步吗?反正银行是可以校验姓名和卡号的,<br>即使用户不幸填错,也不会给他造成任何损失呀!<br>可我们不代表用户,用户呢?他们是怎么看这个问题的。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037022.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">对于用户而言,他们不知道银行卡可以验证姓名。他们只会认为,填错卡号,就意味着钱要到别人口袋去了。他们显得异常紧张。<br>即使觉得有点麻烦,但用户对于填两遍银行卡仍然不会反感。他们甚至会觉得,这是一个很有必要的事情。<br>因为 银行卡 钱 支付 这些对于用户而言,都是太敏感的信息</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">小结:显然,填两遍银行卡不是一个好的设计,它增加了用户额外负担。其实用户真正的诉求不是填两遍银行卡,而是怎么样能让“我”的银行卡号不填错。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">解决方案-&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">那么……怎么办?在用户填写银行卡时,我们需要解决两个问题:</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">a 尽可能使用姓名和卡号即时校验,以最短时间告诉用户卡号与姓名是否匹配,卡号是否填写正确。<br>b 心理上,在填写银行卡的过程中给用户心理上的安全感,消除担心会填错卡号的恐惧心理。<br>有什么好的办法,既能不让用户那么麻烦的填写两遍,又能消除用户担心填错的心理呢?</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">下面是我能想到的几个办法,抛砖引玉。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">1. 扫描卡号</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">银行卡会填错,主要是信息在传递过程中出现了错误。用户填写银行卡出现了多次信息传递。用户通过眼睛看到卡号,再将卡号传递给大脑,通过大脑发送指令给手,手再进行输入。<br>如果能减少信息传递的次数,不需要通过用户多次传递,那么就能大大降低用户填错银行卡的几率。也不会给用户的心里造成太大的负担。<br>扫描卡号,就是一个不错的办法。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037023.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">2. 将信息分组也是防止用户填错卡号的有效方式。银行卡号输入后自动分隔显示。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037024.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">3. 银行卡号在输入框上方放大显示。当然,这个方法也有一定的弊端,会让用户在输入时分心,不能把所有注意力放在输入框内。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037025.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">4. 模拟真实银行卡形式输入。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037026.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">5. 再想得远一点,能不能在输入框中加一个小喇叭,点击小喇叭可以将卡号播放一遍。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/131225/2037027.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">大家还有更好的办法么?&#8212;&#8212;&#8212;&#8212;&#8212;-<br>总结: 显然,填两遍银行卡并非是防止用户填错卡号的好办法。它只是为了解决填错而迫不得已的一个解决方案。但设计师是有办法的人,我们可以通过更好的方式来帮助用户解决这个问题,<br>让用户在填写银行卡时有更好的体验。<br>另外还想说的:我们不是用户,就算是,也不是普通用户。永远不要以一个设计师的眼光来看待用户的行为。</p>

Read more+

17

2018-05
互联网思维:谈谈互联网思维

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">告诉你什么是互联网思维.</font> </td> </tr></tbody></table> <p>   </p> <center><img alt="null" src="http://www.webjx.com/files/allimg/140102/2128070.jpg" width="546" height="477"></center> <p>&#160;</p> <p>  最近互联网思维这个词很火,然后展开了激烈的论战。一开始这个词被包装成了高大上,被一群神棍忽悠的浑天黑地,然后又有一群人跑出来正本清源,然后告诉你这个东西不存在之类的,然后这个词又成了臭狗屎。</p> <p>  其实互联网思维肯定存在,但是张嘴闭嘴谈互联网思维的,其实你会发现居然丫都是做电商的,不管卖煎饼果子还是面条、手机,都是电商。电商这个东西,怎么做都是营销居多,他们是不是懂互联网其实还是要打很大的问号的。一个很棒的淘宝店主,你说他是互联网人,估计还是比较有争议的。而这些人喜欢张嘴闭嘴谈互联网思维,只是把自己的一些小花招盖上一个大理论的帽子而已,就好像当年团购一出,活生生的创造了O2O这么一个概念。其实本来线上线下就是结合的不是什么新鲜玩意,再后来中文就改成了本地生活服务。所以,谈互联网思维的,其实并不懂互联网思维,而他们用的那些花招,也许有一点互联网思想,但是我觉得做传销的一点不比他们玩的差。</p> <p>  所以我还是来谈谈互联网思维,希望可以起到一个正本清源的作用。互联网无非就是web和端两种形态,前者阿里百度,后者腾讯360,当然做大了,既有web也有端,也就分不太清楚了。以前web为主,移动互联网端为主。所谓互联网思维其实就是这些产品中一些比较重要的产品思维和运营思维。</p> <p>  <strong>互联网领域,是用户驱动企业,在传统领域,是企业驱动商户。</strong>互联网公司的产品都是为了满足用户需求,少有创造用户需求的。而传统企业往往是自行生产产品,然后配之大量的广告促销等活动,把产品推销给顾客。而随着互联网的越来越发达,用户获得信息的渠道越来越碎片,以及自主意识的增强,传统企业的方式开始慢慢失效。所以这个时候,互联网思维就是淘宝曾经推崇的C2B,用户定制。这种模式虽然从电商角度,我不看好,也不觉得能做大。但这种思想,是正确的,就是根据用户的需求去做产品。所以,第一点的互联网思维,是用户驱动产品。</p> <p>  <strong>第二点互联网思维就是快速迭代。</strong>互联网产品更新很快,采用的方法往往是迅速上线,小批测试,根据反馈然后进行调整,如果好,就继续推,如果不好就改了再推。比如小米就拿这种方法做硬件,当然,一开始的教训也很惨痛。省掉了测试时间,直接卖工程机给用户,在市场发售阶段,领先了其他厂家,占领了市场。在质量方面,就有一个很大的坑。毕竟硬件不是软件,可以直接升级就解决问题了,有些问题是解决不了的。当然,这样的思想是典型的互联网思维,不管怎么样,先推出来一批再说,不断的通过用户的反馈,来调整自己的产品。而不是想一口气憋个大招出来。因为请看第一点,让用户驱动产品。</p> <p>  <strong>第三点免费和增值服务。免费是互联网主基调,所以现在很多厂家做硬件也开始用了这个思想,目前就是成本价出,不赚钱。</strong>以后可能就是联通合约机模式,交服务费就送硬件。京东已经拿了虚拟运营商的牌照,据说很快就要用合约机的方式卖手机了。增值服务是大部分免费的互联网公司赚钱的主要收入,比如腾讯QQ免费,会在上面增加很多诸如游戏、QQ秀之类的收费项目。比如360软件免费,通过导航流量收费,淘宝和百度很像,都是搜索排名付费。所以,主业不赚钱,靠增值服务收费,先靠免费做大量用户,再去寻找盈利模式的方法,也是典型的互联网思维。</p> <p>  <strong>第四点是用户体验,这也是当前牛鬼蛇神们的主打领域,什么超过用户预期,让用户尖叫之类的。</strong>我见过的某手机用户尖叫就是“我操,又重启了。”用户体验这个问题说白了,没那么复杂,特别简单,就是卖什么不吆喝什么。比如卖手机的不说自己信号和通话,天天说什么跑分第一。卖牛肉面的面很难吃但是送双筷子,卖煎饼的也很难吃天天谈在自己门口停车的三种优惠,一开始海底捞的各种话题,也从来没有基于海底捞是不是好吃上,而是服务员的各种服务态度上。这个东西其实你根本不需要去学习细节,自己掌握了这个窍门随便琢磨就可以。比如说,前两天一个做高品质安全套的找我帮忙策划营销,我给他包装了一个“口感最好的安全套”,然后让他组织个安全套品尝大赛,高价募集用户品尝一下杜蕾斯、冈本、杰士邦以及他们家的安全套谁口感比较好,估计一炮能红,这种策划掌握了敲门,一点也不难。当然,也可能是我厉害,不好说。以上策划版权所有,抄袭不给钱必究。</p> <p>  不过不管这些人怎么吹牛逼,我也要告诉大家一件事情,个性化服务和标准化复制永远是两个背道而驰的方向,海底捞大肆扩张后,服务质量也在不断下降。所以不要相信个性化服务还能做出麦当劳肯德基的瞎话。我之所以认可甘其食的包子,就是因为他们sku很少只有四个,就是四种包子,馅料全都是中央厨房集中生产,然后派发到各专卖店,各店只是做物理的包制,这样标准化的建设,才有可能复制成为大型的连锁,创造那么一些奇迹。至于其他的一两个店做的似乎不错的,在扩张的时候很快就会遇到瓶颈。另一个问题就是,餐饮的要命之处在于翻台率,倒不是说你不赚钱,而是说你一定有天花板。最牛逼的投资鼎晖和俏江南也没能做到上市,就不要说其他了。</p> <p>  比较重要的互联网思维,我觉得大概就是上面几个方向,大家有不同意见,就给我留言讨论吧。重视读者体验,也是自媒体和作家不太一样的地方。</p>

Read more+

17

2018-05
用户体验设计:让设计对用户更具有吸引力

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">如何诱惑用户,让你的设计对用户更具有吸引力,也同样需要一些手段的,让我们来一起探讨下吧。</font> </td> </tr></tbody></table> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  用户使用黏性是每一个互联网产品公司都希望得到的东西,但是往往一般的设计是不可能得到预期的效果的,我们这些交互设计师该怎样做才能达到预期的效果呢?</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  还记得和爱人难忘的约会情境么?出门前花时间打扮让自己看起来更动人;见面时做出各种有趣的行为来与对方交流:互相调侃在适当的时候送上美丽的笑容,问卖萌的问题,“意外地”擦到对方的手。这些信号传达着“我对你的感觉不错,和我在一起吧,你一定会开心的”,那么我们的设计呢?</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  如何诱惑用户,让你的设计对用户更具有吸引力,也同样需要一些手段的,让我们来一起探讨下吧。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/140102/2133440.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  <strong style="FONT-SIZE: 16px; COLOR: rgb(220,37,35)">手段1.差异化设计</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  例如:Clear</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  这款应用将“简洁”设计理念实现得恰到好处。吸引用户群体去追寻那份最初使用的心动感,通过创新理念为用户塑造了专属的个性,才会在众多同类产品中脱颖而出。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  Clear最大的特点就是没有一个按钮,通过单指和双指的不同手势实现任务条拖曳、添加删除线、添加新任务、上下级界面等等,几乎所有的操作都可以用手势来完成,这种交互形式成为亮点。使用渐变色让人感受眼前一亮,让颜色作为重要性排序的标记,在主题选项里面还可以改变任务界面的颜色,在这里视觉设计不是仅凭设计师的喜好,更是起到了功能的作用。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  <strong style="FONT-SIZE: 16px; COLOR: rgb(220,37,35)">手段2.情趣化设计</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/140102/2133441.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  例如:比邻</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  这款社区化应用从开始的引导体验到注册时加入诙谐的幽默语言,让用户感觉到与产品间的交流,积极地愿意去完善资料。虽然用户有时清楚这是产品玩的小把戏,但是在如此具有带入感的前戏台词面前,多数用户会觉得非常有趣,正面情绪完全被调动起来。这样的文案比起简单枯燥的提示更易让用户接受。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  如果你的设计无法吸引用户,存在着无法让用户觉得有意义或印象深刻的风险。那么加一点幽默吧,它能使交互更人性化,引导用户产生许多积极的心理效应。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  <strong style="FONT-SIZE: 16px; COLOR: rgb(220,37,35)">手段3.设置奖励机制</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  稳定性和可控感固然是是用户界面的关键原则,不过出乎意料的事物也能带来好处。因为当用户不知道将面对什么的时候,他们的渴望也必然会增强。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  说到这不得不再次提起clear这款应用:</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  用户清空条目之后,提示语会发生变化,这里引用的是一段励志名言。它们出现在用户不可预知的时候,是出乎用户意料之外的。但是它的意图又不是要加强一种特定行为,而是为用户带来喜悦。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 800px; BORDER-TOP: rgb(221,221,221) 1px solid; BORDER-RIGHT: rgb(221,221,221) 1px solid; BORDER-BOTTOM: rgb(221,221,221) 1px solid; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; BORDER-LEFT: rgb(221,221,221) 1px solid; PADDING-RIGHT: 4px; box-shadow: rgb(238, 238, 238) 0px 0px 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px" alt="null" src="http://www.webjx.com/files/allimg/140102/2133442.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  惊喜另一种表现为奖励,就像微博它是一种把奖励带入惊奇中的产品:话说我们为什么会经常沉迷在微博中,原因很简单:如果我因为某个目的关注某人的消息,等待其发布最新的我关注的消息。而这些有用的微博消息中通常会参杂一些不相干的内容,但可能接下来会发两条我真正关注的话题。如此让人着迷的原因就是如果我不继续跟踪信息,我可能会错过一些有用的信息。这种可变奖励真得很管用,或者对个人来说很重要,让人很难从无穷无尽的微博信息流中抽身。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  <strong style="FONT-SIZE: 16px; COLOR: rgb(220,37,35)">手段4.制造兴奋点</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  在消除游戏当中,我们乐于在混沌中找寻模式,实际上通过解决问题,我们大脑得到一种短暂的快感。将一种新想法与你已经形成的关于这个世界的心理模型关联起来时也是这样。例如:你可以利用肢体模式的能力去为你的设计制造兴奋点。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  其实通过碰撞以外的途径也是可以传输信息,图片的。但这并不是产品真正的目的,目的是让你能够体验碰撞的兴奋感,花更多时间去使用这款产品所具有的特色功能,让用户独自攻破所获得的喜悦能创造出更好的体验。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  <strong style="FONT-SIZE: 16px; COLOR: rgb(220,37,35)">手段5.鼓励用户探索</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  信息分已知和未知,我们重视体验清晰度。我们将不确定因素从用户界面中删除,但是一旦按某种套路去掉了所有可用性陷阱,我们又如何将神秘感重新引入用户的操作中去?简单来说“因为在我所知道和我想知道的东西之间存在空缺,设计中可巧用这个空缺给用户制造神秘感,你要设法将已知的信息转换能某种谜题,鼓励人们去进行探索。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  例如:北京西单大悦城的网站-畅游大悦城页面</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  鼓励人们通过点击楼层,鼠标划过楼层去发现和寻找各个店铺的名称。而不是将所有的楼层信息全部展现,用户需要去查找想知道的未知的信息,必然会积极去体验这种查找的过程。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  像许多视频类产品都会开发与之产品配合使用的加速器,下载前会为产品做一个卖点的宣传。实际就是先为用户建立预期:说明这款产品使用后可以获得什么什么样的体验,努力使信息与用户有直接关系,吊起用户的胃口,目前很多手机应用都会在开篇有用户引导画面也会运用这种方式。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  <strong style="FONT-SIZE: 16px; COLOR: rgb(220,37,35)">手段6.让用户表现自己</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  我们出去旅游时乐于拍照片留下属于个人的标记,表明我来过这里,我做过这个或者这就是我。家里装饰成田园风格,日式风格…贴满贴纸的手机…我们喜欢表现自我的个性,感受和想法</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  用户可以自定义个人主页的外观,这就是允许用户自我表现。通过发布自己喜欢的图片,音乐和电影,位置与朋友们分享,允许发表言论和评价,选择跟帖或使用表情符号,这都属于一种允许自我表现的方式。只要将这些评论与个人资料链接起来,用户就有机会在网上表现自己</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  人们如何才能在你的产品上表现自我?那么在你的设计中融入些支持这样自我表现的个性化服务吧, 找机会公布和赞美用户的独特评价,给予用户个性化推荐等等,使自我表现成为用户体验的一部分。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 13px/24px 'microsoft yahei', verdana, arial; PADDING-LEFT: 0px; MARGIN: 11px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">  粘性就是不断的让用户感到喜悦和兴奋,通过你的产品设计这些目的是可以达到的,互联网时代的设计必然是最求效率的设计,用户粘性就是一个移动互联网产品的效率。</p>

Read more+