在线
客服

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

客服
热线

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

?

关注
微信

关注官方微信

返回
顶部

17

2018-05
移动网页设计:7种移动页面糟糕的体验

<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">移动端网页在今天虽然已经变得越来越重要,但我们在日常使用中依然会遇到一些糟糕的页面。近日,开发者Umer Mansoor就总结了开发移动网页时应该避免的“七宗罪”。</font> </td> </tr></tbody></table> <p>   </p> <center><img alt="null" src="http://www.webjx.com/files/allimg/140102/2136560.jpg" width="1000" height="650"></center> <p>&#160;</p> <p>  移动端网页在今天虽然已经变得越来越重要,但我们在日常使用中依然会遇到一些糟糕的页面。近日,开发者Umer Mansoor就总结了开发移动网页时应该避免的“七宗罪”。</p> <p>  <strong>页面加载缓慢:</strong>众所周知网页加载速度是网站性能的一项重要衡量指标,毕竟很多时候用户并不总是在WiFi状态下浏览网页,所以加载缓慢无疑是移动页面七宗罪之首。移动网页在设计时应该避免集成过多高分辨率的图片以及累赘的脚本文件。</p> <p>   </p> <center><img alt="null" src="http://www.webjx.com/files/allimg/140102/2136561.png" width="384" height="640"></center> <p>&#160;</p> <p>  <strong>排版凌乱:</strong>当网页映入眼前,凌乱的文字排版当然也是访客难以忍受的。就像人们在现实生活中倾向于和思路清晰的人交流一样,当用户和网页“交流”时也希望能快速找到自己需要的信息。所以杂乱的排版同样是移动网页应该避免的设计误区之一。比如Eurosmartz的移动版完全不像是为移动设备设计的网页。</p> <p>  <strong>导航功能不易使用:</strong>随着移动设备性能的提升,很多移动网页设计者倾向于在移动端堆叠更多的内容,这时导航功能就变得必不可少了。可诸多移动页面在设计导航功能时又没有足够重视其可操控性,比如按钮太过紧密、链接间距过小、菜单过于隐蔽等等。各种社交网站的点赞功能尤其容易在滑动网页时误点击。蹩脚的导航无疑严重影响了用户和网页“互动”的过程,以至于有些用户要“抱怨”自己手指太肥。</p> <p>   </p> <center><img alt="null" src="http://www.webjx.com/files/allimg/140102/2136562.jpg" width="640" height="480"></center> <p>&#160;</p> <p>  <strong>桌面端和移动端页面风格差异巨大:</strong>某些时候我们可能会遇到一些桌面端和移动端页面风格差异巨大的站点,比如Toybox。一些对此站点不熟悉的用户在从Toybox的桌面端跳转到移动端时,也许很难意识到这是同一个网站的两个不同版本。虽然Toybox桌面端的动态效果挺好,但这种会给用户造成极大困惑的设计明显难以得到用户的喜爱。</p> <p>  <strong>弹窗:</strong>网页弹窗在桌面端已经令用户厌烦不已,可不幸的是一些移动端的网页设计者还是把其带到了移动页面上。毫无疑问由于移动设备屏幕尺寸的限制在移动端弹窗明显会有更好的传播效果,但无疑也会遭受到用户更多的厌恶。</p> <p>   </p> <center><img alt="null" src="http://www.webjx.com/files/allimg/140102/2136563.png" width="636" height="507"></center> <p>&#160;</p> <p>  <strong>自动重定向:</strong>当用户使用iPad访问某一个网站时将其自动重定向到适配iPad的版本,这听上去的确是一个好想法,可在实际操作中一样会遇到问题。比如当一个网站的移动版由于以上的种种问题让用户感到难以接受而想切换回桌面版时,自动重定向基本上让用户陷入了死循环。此外由于重定向而导致浏览器无法打开网页的现象也时常出现。所以在使用自动重定向功能时应该三思而行。</p> <p>  <strong>横幅广告:</strong>作为用户当然可以理解网页开发者在页面上设置一些广告,可横幅形式的广告无疑应该被归为“七宗罪”之一。从互联网的发展历程来看,横幅广告的思维好像还停留在1999年,可现在已经是2013年末尾了。</p> <p>  总结看来,Umer Mansoor列举了页面加载缓慢、排版凌乱、导航功能不易使用、桌面端和移动端页面风格差异巨大、弹窗、自动重定向、横幅广告共七种让移动页面体验糟糕的“罪恶”。如果自己设计的页面中包含这其中的某些项,也许是时候考虑做一些改进了。</p> <p>  图片来自:Shutterstock、10kloc  原文链接:http://www.pingwest.com/7-deadly-sins-of-mobile-websites/</p>

Read more+

17

2018-05
网页设计新趋势:3D页面效果成为未来

<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">前在HTML里实现无插件3D内容呈现的技术就是WebGL,这个技术其实并不复杂,但是之前由于缺乏浏览器的支持而一直没能被广发使用,这一切都可能改变,因为微软发布的IE11已经完美支持WebGL,加上Chrome和Firefox,可以说现在是时候在网页设计里加入3D元素了。</font> </td> </tr></tbody></table> <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的世界。2012年末开始到整个2013年,涌现出非常多采用CSS 3D变形和Parallax(视觉差,通过鼠标滑动让网页上不同层次的内容以不同的速率位移而形成一种层次感)效果的网站,让这个2D的网络世界出现了丰富的层次和纵深感。但是真正的3D(除了flash实现的)似乎没有成为网页设计师的工具,不过这种情况应该会在2014年有所改变。</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里实现无插件3D内容呈现的技术就是WebGL,这个技术其实并不复杂,但是之前由于缺乏浏览器的支持而一直没能被广发使用,这一切都可能改变,因为微软发布的IE11已经完美支持WebGL,加上Chrome和Firefox,可以说现在是时候在网页设计里加入3D元素了。</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">谈到WebGL 3D,大家可能第一个想到的就是网页游戏,但其实WebGL在网页设计中也大有可为,我觉得WebGL不仅仅可以运用在大型的全屏体验中,也完全可以作为页面元素和其他内容融合在一起,给用户一种新奇的酷炫的体验,我们来看一些例子。</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">11月底微软IE和亚洲动物基金组织合作的公益网站”月熊志”就采用了WebGL的技术,来宣传IE11在这方面的渲染能力。</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">这个由三本”书”组成的体验,第一本书的第一页就给大家呈现了一个3D的月熊世界,IE创造了一只动态的3D熊,用户可以拖动、旋转这个3D模型来了解更多关于这只熊的信息。这个3D的场景生动有趣,一草一木活灵活现,熊那股可爱劲儿也通过动作栩栩如生地反映出来,除了WebGL技术,很难通过别的方法实现这样的交互效果。</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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://moonbear.animalsasia.org/ie/">moonbear</a></h4> <img class="alignnone size-full wp-image-71616" 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; MARGIN: 0px 0px 1.75em; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; DISPLAY: block; 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="2014网页设计新趋势:3D WebGL的运用" width="610" height="348" src="http://www.webjx.com/files/allimg/140102/2142480.jpg"><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">微软IE推出的另外一个WebGL体验,和红牛(RedBull)合作的网站Rampage对WebGL的运用也相当新颖。这是红牛每年都举办的极限单车比赛,网站通过3D WebGL技术再现了比赛环境,用户可以通过拖动或者点击3D环境上的节点来控制比赛视频的播放。网站不仅仅利用WebGL,也运用了很多CSS 3D Transform来让一些2D元素拥有立体的效果,比如视频。</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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://rampage.redbull.com/">rampage</a></h4> <img class="alignnone size-full wp-image-71617" 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; MARGIN: 0px 0px 1.75em; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; DISPLAY: block; 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="2014网页设计新趋势:3D WebGL的运用" width="610" height="308" src="http://www.webjx.com/files/allimg/140102/2142481.jpg"><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">下面这个网站设计也很好的结合了WebGL,网页设计师Steven Wittens在他的博客里加入了抽象的3D管道所组成的元素,当你打开网页的时候,这些管道会自动交织在一起,形成ACKO几个字母的形状。你还可点击右上方那个播放按钮来看管道的延伸过程。网页上的博文内容和3D的空间很好地结合在一起,充分展现了作者强大的设计开发能力。</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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://acko.net/">acko</a></h4> <img class="alignnone size-full wp-image-71618" 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; MARGIN: 0px 0px 1.75em; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; DISPLAY: block; 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="2014网页设计新趋势:3D WebGL的运用" width="610" height="299" src="http://www.webjx.com/files/allimg/140102/2142482.jpg"><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">一位法国的前端设计师和开发者Yann Kozon在他的个人作品网站中也加入WebGL的3D元素。首页是立体的多面体,并随着音乐有韵律的上下抖动,进入他的作品页你会发现左右作品都是一个个立体的金字塔,内容和立体效果很好地结合在一起。</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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.yannkozon.com/">yannkozon</a></h4> <img class="alignnone size-full wp-image-71619" 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; MARGIN: 0px 0px 1.75em; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; DISPLAY: block; 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="2014网页设计新趋势:3D WebGL的运用" width="610" height="308" src="http://www.webjx.com/files/allimg/140102/2142483.jpg"><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">为了说明3D元素怎样结合到平时的静态页面中,Web设计师GUILLAUME LECOLLINET(他的网站:http://littleworkshop.fr)做了一个WebGL的demo页面。页面上呈现了3个东西:第一个HTML5盾牌,鼠标悬停会进行翻转;第二个框线球会有落下弹起的重力效果;第三个就是美元符号,会跟随鼠标悬停位置呈现不一样角度的阴影。从这个demo当中我们可以看到简单的3D效果完全可以让页面变得生动有趣。</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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://glecollinet.github.io/webgl-demo/">glecollinet</a></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">(建议采用IE11或者Chrome查看)</p> <img class="alignnone size-full wp-image-71620" 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; MARGIN: 0px 0px 1.75em; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; DISPLAY: block; 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="2014网页设计新趋势:3D WebGL的运用" width="610" height="303" src="http://www.webjx.com/files/allimg/140102/2142484.jpg"><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">试想一下,我们现在很多网页的Logo都是图片,但是如果带有一些3D的效果,一定会特别有意思。可能你会问,这能给用户带来多大价值呢?可能实用性上确实没有多少,但很多时候,我们也要讨用户欢心,让用户展现笑容,所谓的”delight”的作用,增加用户好感度。同时,这也可以展现一个网页的性格和技术的前瞻性,这方面是设计师和开发者需要好好考虑的。</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">那怎么在页面中运用3D元素呢?下面跟大家介绍三个好用的工具:</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">1. Three.js</strong><span class="Apple-converted-space">&#160;</span>(<a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://threejs.org/">http://threejs.org</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">目前最好的WebGL library,也是浏览器支持最好最广泛的类库,IE11和Chrome对它的支持都很不错,上面介绍的案例都是运用ThreeJS创建的。</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">2. Blender</strong><span class="Apple-converted-space">&#160;</span>(<a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.blender.org/">http://www.blender.org</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">Blender是一个免费和开源的3D建模编辑应用,可以直接导出ThreeJS可用的代码。当然你也可以在其他3D建模工具如3DMax,然后导入到Blender从而生成ThreeJS可用的文件。</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">3. Voodoojs</strong><span class="Apple-converted-space">&#160;</span>(<a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.voodoojs.com/">http://www.voodoojs.com</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">这是一个全新的JS library让你创建2D和3D有机融合的网页。</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">工具虽好,一个不可回避的问题还是浏览器的支持,虽然IE都已经开始支持WebGL了,但很多用户的浏览器可能还不支持。我建议开发者采用渐进式的支持方法,即给不同的浏览器不同的版本,以确保最先进的浏览器用户获得最好体验,而低版本浏览器用户也能获得良好的效果。以上介绍的网站均对不支持WebGL的浏览器做了适配,拿”月熊志”为例,这个网站的3D场景在不支持WebGL的浏览器变成了360度连续帧的png图片,也能让用户左右滑动来获得模拟3D效果。</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">3D对于网页来说不再是高不可攀的技术,有了浏览器的支持和各种JS库,相信2014年会有更多网站加入3D的元素来丰富用户体验,相信这也是未来网页发展的新方向。<br><strong style="FONT-WEIGHT: bold">作者:</strong>saber zou</p>

Read more+

17

2018-05
WEBJX推荐15个经典的重设计(Redesign)案例

<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">要改版了吗?来看看这15例优秀的重设计。</font> </td> </tr></tbody></table> <p>大家都知道,面对一个设计需求,每个设计师都有不同的领悟和表现手法,同样的,国外会有很多优秀的设计师针对著名的站点来做一些概念设计、重设计(Redesign )。<br>设计是变通的,每一种界面都能有无数的展现。无论是海报、T恤还是网站的设计,设计师总是能找到不同手法来体现同一设计概念。</p> <p>当然,重设计往往不会打优秀案例的“主意”,因为它们确实做的面面俱到,让人无从下手。<br>而不好的设计往往会让富有创意的设计师摩拳擦掌,改进它们并让大家评论赞赏,这是重设计的动力所在。</p> <p>设计师重设计的目的只有一个,无非是想设计的更好。重设计并不容易,重设计比原创设计难。<br>设计师要分析原网站的优缺点,然后再想方设法理解原网站的精要,再加以自己的理解进行设计。<br>那么今天我们要推荐的是15个异常经典的(Redesign )案例,肯定会让您有所收获。推荐收藏:)</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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Pizza-Hut-Website-Redesign/9137373">Pizza Hut</a></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="2013-09-29_112808" width="699" height="338" src="http://www.webjx.com/files/allimg/140102/2201140.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">现在很多餐饮品牌流行重塑标识,重建品牌形象,以便达到更成熟的品牌印象。比如Burger King,Wendy’s以及Taco Bell的转变就很赞,让人感受到这些品牌的成长。</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="2ee430a2f48db11e0bd9727b059790c5 copy" width="750" height="535" src="http://www.webjx.com/files/allimg/140102/2201141.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/AOLcom/8568073">Aol</a></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="2013-09-29_112851" width="699" height="338" src="http://www.webjx.com/files/allimg/140102/2201142.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">现在的Aol似乎不如以前出名了。AOL自身也想极力摆脱困境,但是他们似乎越走越远。<br>这个重设计和AOL的网站有点相似,但是你会发现,设计师非常耐心的清理了页面中杂乱的元素,打造了更加富有阅读性的界面。</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="aol" width="750" height="545" src="http://www.webjx.com/files/allimg/140102/2201143.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Craigslist-Redesign-Concept/9172669">Craigslist</a></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="2013-09-29_113253" width="699" height="338" src="http://www.webjx.com/files/allimg/140102/2201144.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">Craigslist建站的时候肯定没考虑到设计,我猜创立者是撞了大运,没想到这网站会火,而且Craigslist感觉也没有更换视觉设计的意思。<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="craigslist" width="750" height="525" src="http://www.webjx.com/files/allimg/140102/2201145.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/DeviantART-Re-Design/7470957">Deviantart</a></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="2013-09-29_113656" width="699" height="338" src="http://www.webjx.com/files/allimg/140102/2201146.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">Deviantart这个网站,我不得已才会去,从来不会去主动浏览?为何?我非常痛恨这个网站的设计,虽然很实用,很简洁。但是对于很多刚接触此网站的人来说,感觉非常的杂乱、过载、过时。</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">重设计的主页看起来更简约,而且采用了网格线布局。而且贴合Deviantart的理念,不轻易的做出大范围调整。小修小改足矣。</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="deviantart" width="750" height="445" src="http://www.webjx.com/files/allimg/140102/2201147.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Redesign-Dribbble/5964649">Dribbble</a></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="2013-09-29_113931" width="699" height="351" src="http://www.webjx.com/files/allimg/140102/2201148.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">大家都挺喜欢Dribbble,设计的不错,布局也紧凑,非常利于社交。<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="dribbble" width="750" height="619" src="http://www.webjx.com/files/allimg/140102/2201149.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Facebook-Redesign-of-ui-details/9281365">Facebook</a></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="71b713b3a3e59c4e" width="759" height="551" src="http://www.webjx.com/files/allimg/140102/22011410.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">我不喜欢Zuckerberg的原因之一是:这家伙一直在提高FB页面的商业元素,整天琢磨怎么赚钱,用户体验没有放到第一位。<br>而这版的FB非常可爱、成熟,更个性化。</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="facebook" width="750" height="601" src="http://www.webjx.com/files/allimg/140102/22011411.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Google-Mail-UI-Design/9262285">Gmail</a></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="70b21" width="641" height="409" src="http://www.webjx.com/files/allimg/140102/22011412.png"><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">非常简约的收件箱,用户用起来也非常舒服,现在的Gmail非常重视标签功能、gTalk功能以及广告功能,但是用户很少使用这些功能。而此款重设计非常贴心的考虑到用户的需要。</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="gmail" width="725" height="562" src="http://www.webjx.com/files/allimg/140102/22011413.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Google-Play-Alternative-Design/3773246">Google Play</a></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="google_play_store_large" width="640" height="389" src="http://www.webjx.com/files/allimg/140102/22011414.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="googleplay" width="750" height="559" src="http://www.webjx.com/files/allimg/140102/22011415.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Google-Redesigned-Concept/8150671">Google Plus</a></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="google-google-plus-stream" width="900" height="477" src="http://www.webjx.com/files/allimg/140102/22011416.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">设计师重新思考了Google+的设计思路,让设计更有调调&#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="googplus" width="750" height="559" src="http://www.webjx.com/files/allimg/140102/22011417.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/LinkedIn-Redesign/8815195">Linkedin</a></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="2013-09-29_122709" width="1165" height="535" src="http://www.webjx.com/files/allimg/140102/22011418.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">想去又是不想去的,首先界面太复杂,其次信息有点过载,让人感觉非常的拥挤,难以集中注意力。<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="linkedin" width="750" height="511" src="http://www.webjx.com/files/allimg/140102/22011419.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/NBA-com-Concept-UI-Design-(-Personal-Project-)/6310227">NBA</a></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">NBA是我最喜欢的网站之一,NBA最近重设计了他们的网站,但我觉得没以前酷了。<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="nba" width="750" height="473" src="http://www.webjx.com/files/allimg/140102/22011420.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Nokia-responsive-website-concept/7425977">Nokia</a></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">诺基亚的官网看起来更像个博客。<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="nokia" width="750" height="555" src="http://www.webjx.com/files/allimg/140102/22011421.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Tumblrcom-Concept-UI-Design-(Personal-Project)/9031303">Tumblr</a></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="2013-09-29_123531" width="816" height="375" src="http://www.webjx.com/files/allimg/140102/22011422.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">Tumblr是我非常喜欢的站点,可以找到非常有趣的图片。<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="tumblr" width="576" height="406" src="http://www.webjx.com/files/allimg/140102/22011423.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Twitter-Revamp/8848851">Twitter</a></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="1321355554210-33425" width="800" height="552" src="http://www.webjx.com/files/allimg/140102/22011424.png"><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">我个人不是很喜欢Twitter的重设计,没以前简约了。<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="twitter" width="750" height="520" src="http://www.webjx.com/files/allimg/140102/22011425.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.behance.net/gallery/Yahoocom/7385023">Yahoo!</a></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="2013-09-29_123136" width="1165" height="535" src="http://www.webjx.com/files/allimg/140102/22011426.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">雅虎的现界面设计上很努力,不过失败了,杂乱无章。<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="yahoo" width="750" height="435" src="http://www.webjx.com/files/allimg/140102/22011427.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">结论</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">这些重设计让我们大开眼界,原来一些传统网站还可以有这样的外观!<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>这段时间,一直在做印像派的商品设计,如照片书、台历之类。从网页产品设计转行过来的我,时常在想,平面设计和网页都是设计,但区别又是那么大,那不就与大自然中的猫和老虎一样嘛,它们都属于猫科动物,但又不是同一种生物,有着很大的差别。<br>现在就让我们来分析一下同样作为视觉传达设计,她们之间的差异性。</p> <p>  1.视觉元素</p> <p>  在色彩方面平面设计与<a href="http://www.webjx.com/"><u>网页设计</u></a>使用的色彩模式完全不同,平面设计因为后期的实现依赖于印刷,所以采用CMYK的色彩模式,而网页根据其显像方式使用RGB的色彩模式。平面设计时的色彩运用注重视觉的冲击力及视觉流的引导(在这点上与<a href="http://www.webjx.com/"><u>网页设计</u></a>中的BANNER设计相类似),而<a href="http://www.webjx.com/"><u>网页设计</u></a>(产品类)更注重的是信息结构关系的梳理,如果将色彩运用的过多过强,很容易引起视觉的疲劳感。</p> <p>  我们平时在设计过程中,平面设计的字体选用更为自由一些,不用担心后期实现的问题,所有的文字最后都会输出为图形进行印刷,而<a href="http://www.webjx.com/"><u>网页设计</u></a>就需要考虑的更为全面,并且在字体的选用范围上也很小,为了让输出的成品大小不对服务器造成压力,基于html的特性,所有字体都是根据用户操作系统内默认字体而定的,当然近年随着技术的沿革与发展,这个差距也逐步在缩小,目前通过html5的API可以实现个性化字体的使用而不需要将个性化的字体最终输出为图形,在不增加后端压力的同时,大大提升了用户体验,非常赞。</p> <p>  从图形使用上,平面设计比<a href="http://www.webjx.com/"><u>网页设计</u></a>丰富,表现方式也多样化,特别是对于产品类的<a href="http://www.webjx.com/"><u>网页设计</u></a>,模块化的设计思路更为明显,在视觉表现上也是如此,平面对于图形的表现是不需要考虑到后期的实现的,在一点上是有目共睹的。在来说一下咱们设计时使用的尺寸单位问题,平面设计在使用尺寸标注时都用的是物理尺寸的概念,比如英寸,厘米,毫米等,而网页使用的像素。</p> <p>  2.呈现方式</p> <p>   </p> <center><img alt="02" src="http://www.webjx.com/files/allimg/140102/2219270.jpg" width="616" height="300"></center> <p>&#160;</p> <p>  3.信息载体</p> <p>   </p> <center><img alt="03" src="http://www.webjx.com/files/allimg/140102/2219271.jpg" width="616" height="300"></center> <p>&#160;</p> <p>  4.浏览方式</p> <p>  平面设计的属于渐进式的浏览方式,无法对整个浏览的过程进行多样化串联,<a href="http://www.webjx.com/"><u>网页设计</u></a>拥有滚动条下拉、按钮链接跳转等多样化的浏览信息方式,在拥有同样一种信息架构的条件下,信息之间的串联性更为丰富,用户选择信息的自由度更大,但平面设计也自然有其优势所在,比如平时我在设计照片书这类产品的时候,就很明显的发现,这一类的产品在电脑显示器上进行翻阅,不如印刷成为一个真实的书本来翻阅感受要更好一些,并且更具有收藏及纪念意义。</p> <p>  5.信息传播</p> <p>  平面设计属于比较传统的信息媒介设计,一般会通过张贴、销售、邮寄派送等形式进行传播,这样传播的方式范围小且成本较高,相对而言在这方面<a href="http://www.webjx.com/"><u>网页设计</u></a>的信息传播能力却非常的强,但依赖于第三方媒介的支持,平面设计却拥有更为广泛的受众人群,不同的年龄层对于纸张或书本的信息接受能力总是强于网络媒体的,毕竟网络信息获取的将会存在一个学习成本,在今后网络信息的不断普及以及终端媒介用户体验的不断提升,在受众人群方面在我看来差距会越来越小。</p> <p>  这两种设计形式拥有着不同的用户体验,我们应该根据不同设计内容,选择正确的设计形式提升用户体验,以上这些只是个人对平面与<a href="http://www.webjx.com/"><u>网页设计</u></a>的一些粗浅认识,也作为抛砖引玉希望大家能分享出自己对于设计的想法,引用一段平面设计大师陈幼坚的一段话“做创意最重要就是定位清晰,如果定位清楚目标明确,很多创意就会自然创造出来。这就好像你想找一个喜欢的姑娘,就跑到酒吧去张望,这太麻烦了。要先确定你要找什么样的女孩子,到酒吧就指,哦,这个,那个。&#8212;&#8212;多简单!”</p>

Read more+

17

2018-05
登陆表单设计案例:网页和APP登陆表单

<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">网页与APP中那些优美的登陆表单。</font> </td> </tr></tbody></table> <p>我从Dribbble收集了20个漂亮的登陆表单案例。希望你看后能从中受益,并对你以后的登陆表单设计有帮助。设计一个登陆表单看上去非常容易,但大多设计都很糟糕、毫无亮点。无论如何,这篇Dribbble案例集锦绝对走的是另一个极端。希望它们能赢得你的青睐!来一起欣赏吧:)</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">网站与APP中的登陆表单</strong></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="Login Form" src="http://www.webjx.com/files/allimg/140102/2221310.gif"><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">继承了iOS7的精髓,这件登陆界面作品将iOS7微妙的动画背景上升到一个新的层面。此处的背景完全是一张动画图片&#8212;&#8212;甚至可能是GIF。尽管这背景事实上没有那么精致,但这一定是你平时不常见的设计。你几乎很难见到这样的APP,还有如此卖弄的首屏设计。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221311.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">同样秉承着iOS7的精神,这个登陆界面和它的附属界面采用了彩色模糊背景,令一切都保持绝对简洁。我得说这两个界面都相当极简化,实际的输入框被细线所取代。不过美妙的多彩背景增添了个性化色彩,令作品亲切美观。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221312.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">如果说有令人愉悦的设计,那这一件就是了。蓝色背景图与明快的白色LOGO、文字和输入框形成强烈对比。绿色按钮看起来像个真实的按钮&#8212;&#8212;尽管界面的其余部分都是扁平的&#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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221313.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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221314.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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221315.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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221316.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">现在呈现的是一款深色登陆界面,还有非比寻常的红色文字与按钮。我不确定这么多红色是否合适,不过我们暂且继续&#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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221317.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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221318.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">这是个稍微复杂些的登陆界面。像如今大部分平台一样,你可以已有账号来登陆,比如Google、Twitter或者Facebook,而不必在每个新网站上创建新的账号。不过如果你想的话,你也可以注册自己的账号。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/2221319.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">这个界面很有创意&#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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213110.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">我非常欣赏这件自由散漫的设计。没有分散注意力的导航,也没有烦人的其他内容。用户的操作与目标同样简单:选择Platform或Opentag,然后登陆。如果是首次打开,你可以试试底部的”注册账号”链接。我觉得这真是个组织良好且执行到位的登陆界面。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213111.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">这也是我最爱之一,我着迷于它的扁平设计。它也没有多少分散注意力的东西,重点就是登陆。简明的logo效果非凡,如果你没有账号,也能在这注册一个。除此之外,所选的颜色也紧密结合,表现良好。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213112.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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213113.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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213114.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">在你注销登陆前,网站会记住你是谁,这点太赞了。从外观来看,它想营造安全登录的感觉,事实也确实如此,这得益于下面的两个logo&#8212;&#8212;McAfee和VeriSign。我还喜欢它滑稽的头像,使得整个界面体验如此愉悦,虽然它其实很严肃。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213115.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">这是我第三喜爱的作品,因为它好玩的配色。是的,这是扁平设计。如此基本的样式,本应该很单调,它却没有。我发现精心挑选过颜色的扁平设计常常能成功,因为充满了亲切感和个人色彩,这件登陆界面就是如此!我很希望在自己经常使用的app和网站中见到更多这类设计。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213116.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">啊,又是一个蓝色的界面!我对此处使用的绿色持怀疑态度,不过本作品中微妙变化的蓝色,与白色文字结合地很好&#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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213117.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">我相当喜欢这个表单,因为它显然是页面的视觉中心,再没有其他东西分散我的注意力。当然,还有logo和邀请注册链接,不过它们在哪里都无法盖过巨大的登陆界面。与暗调处理的背景图相对比,明亮的输入框吸引力注意力,让你立马就去登陆。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213118.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">这是一件拟物化与扁平结合的UI作品。你怎么想?我觉得它处理的非常好。不用嘲笑拟物元素的阴影效果,它们并没有影响整个设计,此处的设计相当聪明,节制地使用拟物化元素,字体的选择和色彩搭配铸就了这件作品。</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="网页与App中那些优美的登陆表单" src="http://www.webjx.com/files/allimg/140102/22213119.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>

Read more+

17

2018-05
网页设计技巧:网页设计中的F式布局

<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">今天我们来重点介绍网页设计中的F式布局。传统的布局方式,依赖布置视觉线索,“控制”用户的视觉路径,相较之下,F式布局更加自然,更加友好。本文将讲述一些F式布局的规则、原理以及设计方法。</font> </td> </tr></tbody></table> <p>网页设计中的F式布局</p> <p>今天我们来重点介绍网页设计中的F式布局。传统的布局方式,依赖布置视觉线索,“控制”用户的视觉路径,相较之下,F式布局更加自然,更加友好。本文将讲述一些F式布局的规则、原理以及设计方法。</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">F式布局简介</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">F式布局是一种很科学的布局方法,基本原理依据了大量的眼动研究。一般来说,用户浏览网页的视觉轨迹是这样的&#8212;&#8212;先看看顶部,然后看看左上角,然后沿着左边缘顺势直下….而用户往往不太注意右边的信息,这是不是有点像字母F?据此,我们习惯性的把重要元素(诸如品牌Logo,导航,行为召唤控件)放在左边,而右边一般放置一些对用户无关紧要的广告信息。</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">我们来看一下Webdesigntuts+的眼动热点图:</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="QQ图片20131010122812" width="638" height="309" src="http://www.webjx.com/files/allimg/140102/2224050.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="fff" src="http://www.webjx.com/files/allimg/140102/2224051.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">这张眼动热点图展示了用户浏览此网站的视觉轨迹,呈一个F型。热区(途中红色、黄色、橙色部分)代表用户注意力最集中的地方。<br>总结一下用户浏览网页的一般模式:</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">先看看页面的左上角,了解一下这是什么网站(因此此处适合放置Logo)&#8212;&#8212;“知道是什么”<br>然后扫描一下页面的顶部(导航栏,搜索栏)&#8212;&#8212;“了解用法”<br>下一步,用户的视线下移,开始阅读下一行的内容。<br>用户进入“扫描模式”,一旦找到感兴趣的内容便会打开。</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="fff" src="http://www.webjx.com/files/allimg/140102/2224052.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">综上所述,按照逻辑,我们得出以下结论:</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>在内容结构中,图片更容易获得关注<br>用户浏览完图片后,下一个关注点便是标题。<br>用户会大致的浏览文本,但是往往不会通读。</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">将F式布局应用到设计中</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">这里我做了一个小练习,使用线框图方法,对主要元素进行了布局。</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="fff" src="http://www.webjx.com/files/allimg/140102/2224053.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">下图中可以看到,我把网站的主题/宗旨(Mission Statement)放在了导航栏的下面,这样用户浏览完Logo和导航,就能迅速的了解网站的宗旨.两栏布局的好处是信息层级清晰,可方便用户快速扫描内容…主要内容栏+辅助侧边栏</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="fff" src="http://www.webjx.com/files/allimg/140102/2224054.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">导航栏的作用是引导用户,让用户知道如何转至不同的页面。</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">你们浏览这个页面的视觉路径应该是这样的吧?</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="fff" src="http://www.webjx.com/files/allimg/140102/2224055.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">效果还可以是把?完成F式布局后,我们便可以此为基础,加入一些细节性元素。</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">还有一点值得注意的是F式布局中对行与行之间距离的控制。(图中红线部分)</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="f-pattern-3" width="600" height="398" src="http://www.webjx.com/files/allimg/140102/2224056.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">如果页面无限长,老这么浏览下去,用户一定会很烦,感到枯燥,对不对?这里可以稍微做一下调整,加入一点与F式布局规则“不协调”的元素,给阅读节奏带来一些变数。</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="fff" src="http://www.webjx.com/files/allimg/140102/2224057.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"><strong style="FONT-WEIGHT: bold">F式布局原理</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">F式布局能够奏效的原因,在于F式布局符合用户的浏览习惯,更自然。符合“从上到下,从左到右”的阅读模式。</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>文本内容无法有效的引起用户注意,用户甚至连摘要都懒得读,看看标题就“过”了<br>网页过分注重对“标题”和“图像”的包装,无疑不符合内容至上的原则</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">在采用F式布局进行设计师,很多设计师感觉自己不像是设计师,而想是制造噱头的“广告商”。<span class="wp_keywordlink_affiliate">网页设计</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">那么右面的侧边栏该要怎么设计呢?这里给出两点建议:</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; &#160; &#160; 1.呈递相关内容。比如和网站主题相关的链接、广告,相关阅读推荐,社交媒体微件等等。不要为了牟利而放置些低俗的、和内容不相干的广告。<br>&#160; &#160; &#160; 2.可以防止一些内容检索工具,比如过标签、文章检索、最热文章等等。</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">F式布局案例</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">那么实际操作起来应该怎样呢?这里提供了一些标准F式布局的网站,一起来看一下吧。</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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://designsnack.com/">DesignSnack.com</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="fff" src="http://www.webjx.com/files/allimg/140102/2224058.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://latimes.com/">The LAtimes.com</a>&#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="fff" src="http://www.webjx.com/files/allimg/140102/2224059.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://kickstarter.com/">Kickstarter</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="fff" src="http://www.webjx.com/files/allimg/140102/22240510.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://kickstarter.com/"></a><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://photo.tutsplus.com/">Phototuts</a>&#160;&#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="QQ图片20131010133118" width="574" height="371" src="http://www.webjx.com/files/allimg/140102/22240511.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"><a style="TEXT-DECORATION: none; BACKGROUND-POSITION: 100% 0%; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.squarespace.com/">SquareSpace’s Product Tour</a>&#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="fff" src="http://www.webjx.com/files/allimg/140102/22240512.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 class="Apple-converted-space">&#160;</span></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="fff" src="http://www.webjx.com/files/allimg/140102/22240513.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; 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">不管设计趋势怎么变,F式布局暗藏的原理不会过时,因为这是用户长期的习惯。</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">或者说,F式布局只是一个幌子,本文的目的是为了强化大家对用户长期阅读习惯的理解&#8212;&#8212;“从上到下,从左到右”,尽管这有点老生长谈,但是经过本文形象化的剖析,你是否也有所感悟了呢?对于节奏的切分,你又产生了什么新的看法?</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">让布局不仅仅是一种方法,我们可以看的更远,融入一些用户体验设计元素。尝试一下,让你的设计不断“升级”。</p>

Read more+

17

2018-05
让网页设计更现代,2014年网站设计的变化趋势

<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">如何让网页设计更具现代感?2014年网站设计又会有怎样的变化趋势?</font> </td> </tr></tbody></table> <p>如何让网页设计更具现代感?2014年网站设计又会有怎样的变化趋势?</p> <p>12月份对即将过去的一年中网页设计发展进行回顾,总会发现很多让我们感到欣喜的变化。去年我们同样预测了2013年互联网设计出现的10大趋势,比如交互设计、个性化排版、全屏大图吸引浏览者注意力等。其中很多预计的趋势在2013年确实成为设计的主流,并且估计在2014年仍将延续。</p> <p><strong>1. 个性化排版</strong></p> <p style="TEXT-ALIGN: center; TEXT-INDENT: 0px"><img style="MAX-WIDTH: 630px" border="0" src="http://www.webjx.com/files/allimg/140103/1721380.png" alt=""></p> <p>我个人是个性化排版的支持者,自然也希望看到越来越多的网络设计尝试个性化的风格,其中比较突出的一点是个性化字体的增多:用自己独特设计的字体代替标准印刷体,让设计更加独特。比如“Stuff and Nonsense”这个网站提供设计字体服务,让字体在体现个性的同时保留专业印刷风格。我们期待着在2014年设计出的网站能够更多地从细节体现个性。</p> <p><strong>2. 扁平化设计</strong></p> <p style="TEXT-ALIGN: center; TEXT-INDENT: 0px"><img style="MAX-WIDTH: 630px" border="0" src="http://www.webjx.com/files/allimg/140103/1721381.png" alt=""></p> <p>去年的10大趋势中,我们提到了“借壳”设计(skeuomorphism),指模仿现实事物尽可能把手机元素(如图表、背壳等)设计得更加具体、拟物。而“扁平化”的极简主义则是和“拟物性”相背行,在iOS7中明显感到更加简化的图表替代了原本精致的描绘,更加突出应用的实际效果,反应使用应用的感受,而不是局限在某个应用的外在形象上。苹果公司在今年竭力推进扁平化设计,几乎所有可以修改的设计都加入了扁平化的元素。</p> <p>苹果公司向来是电子产品设计的导向标,推动其他产品设计纷纷追随iOS7的设计风格,同时网络设计也开始大批量地采用扁平化思路。预计这种风潮在2014年仍将持续。</p> <p><strong>3.大背景图打败幻灯片动态显示</strong></p> <p style="TEXT-ALIGN: center; TEXT-INDENT: 0px"><img style="MAX-WIDTH: 630px" border="0" src="http://www.webjx.com/files/allimg/140103/1721382.png" alt=""></p> <p>要说网络设计最大的趋势,大概是大背景图片的使用。</p> <p>大型背景图片(large hero areas,是从印刷设计借用到网络设计中的专业名词,通常是铺满整个屏幕的图片,配上几句简介的文字),常出现在网站首页上。大图片背景的清晰度不一,有的配以模糊的背景,有的(如realtii)则采用清晰的图片。大型背景图片迅速取代了曾一度热门的幻灯片图片显示插件,成为网页设计元素中吸引浏览者注意力的主要途径,而幻灯片滚动显示的使用价值已经被否定。预计这种大图片设计的流行趋势在2014年仍将持续。</p> <p><strong>4. 移植手机阅读体验</strong></p> <p style="TEXT-ALIGN: center; TEXT-INDENT: 0px"><img style="MAX-WIDTH: 630px" border="0" src="http://www.webjx.com/files/allimg/140103/1721383.jpg" alt=""></p> <p>交互网页设计越来越普遍,网页设计顺应人们对手机的依赖,变得越来越像手机的交互界面。设计师们更注重网站在手机屏幕上显示的实际效果,手机将成为网络浏览的主要方式,因此屏幕尺寸的差异对用户体验的影响也将被纳入网页设计的考虑范围。</p> <p>此外,融合社交媒体功能,提供订阅邮件,借助滚动条设计浏览的“长”网站,快速加载网页等都将让网站设计的互动性增加,用户界面更加友好。</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>每个人都有自己最喜欢的颜色,在工作以及生活中,当购买产品或进行艺术创作的时候,他们会选择自己喜欢的颜色。对于设计师来说也是同理。设计师偏好在设计中重复使用他们最喜欢的色系。虽然命题是无限的,但是他们还是喜欢遵循自己的审美感觉。</p> <p><img title="Green Concept" 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" width="580" height="400" green="" alt="" src="http://www.webjx.com/files/allimg/140106/1740460.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" bold="">绿色的定义</span>方案。 </p> <p>&#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; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px" target="_blank" rel="nofollow" href="http://www.narhir.com/">Narhir<br><img title="Narhir" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Narhir" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740461.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.theforbiddencorner.co.uk/">The Forbidden Corner</a><br><img title="Theforbiddencorner" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Theforbiddencorner" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740462.jpg"></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" target="_blank" rel="nofollow" href="http://www.mailchimp.com/">Mailchimp<br><img title="Mailchimp" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Mailchimp" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740463.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.juandiegovelasco.com/">Juandiego Velasco</a><br><img title="Juandiego Velasco" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Juandiego Velasco" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740464.jpg"></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" target="_blank" rel="nofollow" href="http://www.evacare.net/">Evacare<br><img title="Evacare" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Evacare" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740465.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.bugworldexperience.co.uk/static/">Bugworldexperience</a><br><img title="Bugworldexperience" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Bugworldexperience" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740466.jpg"></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" target="_blank" rel="nofollow" href="http://www.designheartsme.com/home/">Designheartsme<br><img title="Designheartsme" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Designheartsme" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740467.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.naturestable.com/">Naturestable</a><br><img title="Naturestable" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Naturestable" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740468.jpg"></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" target="_blank" rel="nofollow" href="http://www.webbanneraddesign.com/">Web Banner Ad Design<br><img title="Webbanneraddesign" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Webbanneraddesign" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/1740469.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.blymp.com.br/">Blymp</a><br><img title="Blymp" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Blymp" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404610.jpg"></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" target="_blank" rel="nofollow" href="http://www.nutrifield.com.au/">Nutrifield<br><img title="Nutrifield" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Nutrifield" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404611.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.gbadosenergysolutions.com/">Gbados Energy Solutions</a><br><img title="Gbados energy solutions" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Gbados energy solutions" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404612.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.compograss.com/">Compograss</a><br><img title="Compograss" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Compograss" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404613.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.blossomsvillage.com/">Blossoms Village</a><br><img title="Blossoms Village" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Blossoms Village" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404614.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.aquaadria.com/en/home">Aquaadria</a><br><img title="Aquaadria" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Aquaadria" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404615.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://rcleaners.com/">Rcleaners</a><br><img title="Rcleaners" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Rcleaners" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404616.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://daguia.com.br/">Daguia</a><br><img title="Daguia" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Daguia" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404617.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.geovisionsae.com.br/eng/">Geo Vision</a><br><img title="Geovisionsae" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Geovisionsae" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404618.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.greenglobeideas.com/ideas">Green Globe Ideas</a><br><img title="Green Globe Ideas" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Green Globe Ideas" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404619.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.ecoservice.lt/">Ecoservice</a><br><img title="Ecoservice" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Ecoservice" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404620.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.gbb.org/">Gbb</a><br><img title="Gbb" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Gbb" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404621.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.greenanysite.com/">Greenanysite</a><br><img title="Greenanysite" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Greenanysite" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404622.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.hrasti.com/">Hrasti</a><br><img title="Hrasti" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Hrasti" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404623.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.e-schneider-garten.de/">E Schneider Garten</a><br><img title="E Schneider Garten" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="E Schneider Garten" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404624.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://internet.rbc.ru/ru/ny2008/">Rbc</a><br><img title="Rbc" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Rbc" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404625.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.sleepydog.com.br/">Sleepydog</a><br><img title="Sleepydog" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Sleepydog" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404626.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.biofoolish.com/">Biofoolish</a><br><img title="Biofoolish" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Biofoolish" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404627.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.cobahair.co.uk/">Cobahair</a><br><img title="Cobahair" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Cobahair" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404628.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.shopify.com/">Shopify</a><br><img title="Shopify" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Shopify" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404629.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.sprintbio.com/">Sprintbio</a><br><img title="Sprintbio" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Sprintbio" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404630.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://liptongreenmint.ro/">Liptongreenmint</a><br><img title="Liptongreenmint" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Liptongreenmint" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404631.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.organicsupermarket.ie/">Organic Supermarket</a><br><img title="Organic Supermarket" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Organic Supermarket" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404632.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.reallywildtravel.com/">Reallywildtravel</a><br><img title="Reallywildtravel" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Reallywildtravel" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404633.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.oypro.com/">Oypro</a><br><img title="Oypro" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Oypro" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404634.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.outdooritalia.it/">Outdooritalia</a><br><img title="Outdooritalia" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Outdooritalia" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404635.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.terrasse-concept.com/">Terrasse Concept</a><br><img title="Terrasse Concept" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Terrasse Concept" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404636.jpg"></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" target="_blank" rel="nofollow" href="http://anna-pawelczyk.net/">Anna Pawelczyk<br><img title="Anna Pawelczyk" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Anna Pawelczyk" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404637.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://quadrifolia.de/">Quadrifolia</a><br><img title="Quadrifolia" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Quadrifolia" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404638.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.tylerwebdesign.co.uk/">Tyler Web Design</a><br><img title="Tyler Web Design" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Tyler Web Design" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404639.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://snailbird.com/">Snailbird</a><br><img title="Snailbird" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Snailbird" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404640.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://anandakm.com.np/">Anandakm</a><br><img title="Anandakm" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Anandakm" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404641.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.artist-in-design.de/">Artist in design</a><br><img title="Artist in design" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Artist in design" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404642.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.inspirationbit.com/">Inspirationbit</a><br><img title="Inspirationbit" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Inspirationbit" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404643.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.ladysign.com/">Ladysign</a><br><img title="Ladysign" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Ladysign" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404644.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://paulicio.us/">Paulicio</a><br><img title="Paulicio" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Paulicio" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404645.jpg"></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" target="_blank" rel="nofollow" href="http://www.cgalvin.com/">Cgalvin<br><img title="Cgalvin" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Cgalvin" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404646.jpg"> </h4> <p>&#160;</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.pestovogolf.com/">Pestovo Golf</a><br><img title="Pestovo Golf" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Pestovo Golf" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404647.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.sageblue.com/">Sageblue</a><br><img title="Sageblue" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Sageblue" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404648.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.somoslaperalimonera.com/index.html">Somoslaperalimonera</a><br><img title="Somoslaperalimonera" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Somoslaperalimonera" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404649.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://studio7designs.com/">Studio7designs</a><br><img title="Studio7designs" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Studio7designs" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404650.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.viget.com/extend/">Viget</a><br><img title="Viget" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Viget" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404651.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.blogfullbliss.com/">Blogfullbliss</a><br><img title="Blogfullbliss" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Blogfullbliss" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404652.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://www.ztradycjawnowoczesnosc.pl/">Ztradycja w nowoczesnosc</a><br><img title="Ztradycja w nowoczesnosc" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Ztradycja w nowoczesnosc" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404653.jpg"></p> <p><a title="" rel="nofollow" target="_blank" href="http://growmedia.ca/">Growmedia</a><br><img title="Growmedia" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Growmedia" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404654.jpg"></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"> </h4> <li style="FONT-SIZE: 14px; LINE-HEIGHT: 2.1em"> <a title="" rel="nofollow" target="_blank" href="http://www.colourlovers.com/blog/2007/08/02/best-of-color-inspiration-130-green-color-palettes/">Colourlovers</a>: 有一些非常棒的绿色 </li> <li style="FONT-SIZE: 14px; LINE-HEIGHT: 2.1em"> <a title="" rel="nofollow" target="_blank" href="http://www.colorcombos.com/green-color-schemes.html">Colorcombos</a>: 便捷高效 </li> <li style="FONT-SIZE: 14px; LINE-HEIGHT: 2.1em"> <a title="" rel="nofollow" target="_blank" href="http://www.colorschemer.com/schemes/tags/green">Colorscheme</a>: 在线的组织,用户可以分享自己的绿色主题。 <ul>&#160;</ul> &lt;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; -webki&gt;保护环境&lt;/h4&gt; &lt;p&gt;保护环境人人有责,必须要注意到对环境的保护,资源的合理利用,让自然的循环更加和谐有机。&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</li> <h4>&#160;</h4> <p>绿,是一种颜色,绿色处于光谱中间,波长较短,大约为500~570nm。在减色法中,绿色不是主色,但是可以由黄色和蓝色、或者黄色和青色创造出来的。绿色是加法三原色之一。<br><a title="" rel="nofollow" target="_blank" href="http://en.wikipedia.org/wiki/Green">Green</a><br><img title="Green" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Green" width="580" height="200" src="http://www.webjx.com/files/allimg/140106/17404655.jpg"></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" bold="">行为召唤</h4> <p>WedoXHTML用绿色突出了重要的信息,同时绿色的字体也易于阅读。</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.wedoxhtml.com/">Wedoxhtml</a><br><img title="Wedoxhtml" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Wedoxhtml" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404656.jpg"></p> <p>Pagelime使用绿色,作为一种行为召唤的暗示</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.pagelime.com/">Pagelime</a><br><img title="Pagelime" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Pagelime" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404657.jpg"></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">绿色的作用<br>&#160; </h4> <p>&#160;</p> <p><strong style="FONT-WEIGHT: bold">绿色对人具有显著的心理冲击作用,在很多文化中非常流行。</strong>绿色使人宽心,经常在医疗设施上看到绿色。绿色降低血压,缓解神经紧张,放松大脑,启发创造,但也抑制胃口。绿色的视觉负担很小,以绿色为背景的图像看起来更有深度。</p> <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" bold="">DARK GREEN(深绿色)</h4> <p>通常与金钱和野心联系在一起。对于公司来说很不错。能够给用户一种强力、有名望、踏实的感觉。</p> <p><a title="" rel="nofollow" target="_blank" href="http://www.heineken.com/default.aspx">Heineken</a><br><img title="Heineken" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Heineken" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404658.jpg"></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" target="_blank" rel="nofollow" href="http://yodaa.com/">Yodaa<br><img title="Yodaa" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Yodaa" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404659.jpg"> </h4> <p>&#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; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px" target="_blank" rel="nofollow" href="http://qilady.com/">Qilady<br><img title="Qilady" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Qilady" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404660.jpg"> </h4> <p>&#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; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px" target="_blank" rel="nofollow" href="http://www.pado.com.au/">Pado<br><img title="Pado" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Pado" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404661.jpg"> </h4> <p>&#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; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px" target="_blank" rel="nofollow" href="http://mocapoke.com/">Mocapoke<br><img title="Mocapoke" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Mocapoke" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404662.jpg"> </h4> <p>&#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; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px" target="_blank" rel="nofollow" href="http://www.amitkhera.com/">Amitkhera<br><img title="Amitkhera" 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; BORDER-BOTTOM: rgb(230,230,230) 1px solid; PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246)" alt="Amitkhera" width="580" height="400" src="http://www.webjx.com/files/allimg/140106/17404663.jpg"> </h4> <p>&#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; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px"><a title="查看 配色 中的全部文章" style="TEXT-DECORATION: none; BACKGROUND-IMAGE: none; COLOR: rgb(13,164,211); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 2px; LETTER-SPACING: 0px; PADDING-RIGHT: 2px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.uisdc.com/tag/%e9%85%8d%e8%89%b2">配色</a></h4>

Read more+