在线
客服

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

客服
热线

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

?

关注
微信

关注官方微信
TOP

返回
顶部

  • 21

    2020-05
    域名续费知识

    com域名要续费,cn域名也要续费。现在所有域名的价格都是按年算的。原则上在哪儿注册的域名就在哪儿续费。但是用户有域名转出的权利, 转到了哪里就在哪里续费。 有句话说的好,“域名价格贵不贵, 看的是续费”, 域名续费是衡量一一个域名注册价格是否便宜实用的主要依据。所以朋友 们平时在买域名的时候要注意了,在购买域名的时候一定要咨询下域名续费的价格。因为现在不少的域名注册商就是打着超低级域名的幌子,来获得 客户,但是往往这些域名都是首年很便宜,到了续费的时候才发现续费价格可能是首年的好几倍。而且随意转出也会网站造成一定影响, 对于-部分不了解情况的域名注册者来说,可谓是得不偿失!当然了,也是会有一-些良心域名注册商是真的有优惠的,比如耐思尼克的也不错。 说到域名续费,大家知不知道域名到期了没有按时续费会怎么样? 首先当你的域名就快到期的时候,正规的域名注册商都会给你打电话或者通过其他方式联系你,告诉你的域名就要到期了,提醒你续费。 所以当你的电话或其他联系方式有改变的时候,- 定要及时联系你的域名注册商进行修改,以免错过续费通知。但是有些客户不以为然,觉得现 在还可以用啊,就没有把域名续费这件事情放在心上,-拖再拖。等到自己的的网站被暂停或者删除了,才想起续费这个事情,知道事情的严重性。 域名被删除意味着什么?我想一众站长们要比我清楚多 了。网站域名被停了,就说明这个网站之前所做的所有的努力都是白费的,因为这个网站已经 不再存在,就算后面这个域名被你再次注册他也是一个新的老域名而已。 好在现在域名到期了只是被暂停使用而已,被暂停使用后,在一定时间内 是可以正常续费后使用的。-般国内域名保护期-般15天,国际域名保护期-般30天, 这个时间段是一个保护期, 在这个时间段里面,别人不可以注册这 个域名,但是原注册人还可以再续费。在域名注册的现实上,是显示被注册的。如果你在这个时间段还没有进行续费的话,域名就会进入到赎回期, 这时候想要拿回域名就要付出比之前高十倍左右的价钱了。赎回期之后就是我上面说的删除期,这个时候你经没有办法再通过续要的方式拿回域名了, 在待删除期之后域名将会被删除,并开放给公众重新注册。如下图所示: 下面简单介绍下域名续费的步骤: 1.登陆耐思尼克用户管理中心,找到域名管理项。 3.选择续费年限后,点击“确定”进行域名续费。(注:如预付款不足,要先充值哦) 了解下国际域名和国内域名过期没有续费的删除规则: cn结尾的国内英文域名删除规则 1.英文CN域名到期,将进入35天的续费期,续费期间,用户只要支付续费费用即可恢复该域名的正常使用。 2.到期35天后,将会进入高价赎回期。赎回期为15天,赎回期内,原域名持有者可通过域名网赎回该域名,赎回后,有效期将在原域名到期日的基础上增加一年。 3.若赎回期内该域名没有被赎回,赎回期结束后系统将删除该域名。 4.赎回期内域名的状态变为pendingDelete,域名禁止修改信息转移、删除,不提供DNS解析。 com等国际域名删除规则 1.域名过期13天内:域名可正常使用,并可通过域名管理界面自动续费。 2.域名过期14- 30天:域名被hold,解析停止、可以管理,可以自动续费,可通过域名管理界面自动续费,价格与注册域名价格相同。 3.域名过期31 - 70天:域名处于高价赎回期(Redemption), 在此期间域名需要手工续费。 4.赎回期过后5天:域名被彻底删除,可以重新注册了.

    Read more +
  • 15

    2020-05
    域名结构知识点

    -个完整的域名由二个或二个以上部分组成,各部分之间用英文的句号" ."来分隔,例如下列域名: yahoo.com, yahoo.ca.us, yahoo.co.uk。其中第-个域名由 一部分组成,第二个域名和第三个域名由 三部分组成。 在一个完整的域名中,后-个"."的右边部分称为顶级域名或一级域名(TLD) , 在上面的域名例子中,com、 us和uk是顶级域名。最后-个"."的左边部分称为二 级域名(SLD) ,例 如,域名yahoo.com中yahoo是二 级域名 ,域名yahoo.ca.us中ca是二 级域名,而域名yahoo.co.uk中co 是二级域名。二级域名的左边部分称为三级域名,三级域名的左边部分称为四级域名,以此类推。例如, 域名yahoo.ca.us和yahoo.co.uk中yahoo是三级域名。每- 级的域名控制它 下面的域名分配。 例如,顶级域名jp (日本)下定义了acjp和cojp,分别对应于通用顶级域名edu和com,然而顶级域名 ca (加拿大) 下没有定义二级域名,用户可以直接在ca下申请注册二级域名,例如: yahoo.ca。 下面三 个域名都用于大学的计算机科学系: 1. cs.yale.edu (美国耶鲁大学计算机科学系) 2. cs.uottawa.ca (加拿大渥太华大学计算机科学系) 3. cs.tokyo.ac.jp (日本东京大学计算机科学系)顶级域名(TLD) 顶级域名由ICANN定义, 它们 是二个英文字母或三个英文字母的缩写。 顶级域名分为下面三种: 1.通用顶级域名(gTLD, General Top Level Domain)。 下列三个通用顶级域名向所有用户开放: com:适用于商业公司。 org:适用于非赢利机构。 net:适用于大的网络中心。 上述三个通用顶级域名也称为全球域名,因为任何国家的用户都可申请注册它们下面的二级域名。 由于历史原因,下列三个通用顶级域名只向美国专门]机构开放: mil:适用于美国军事机构。 gov:适用于美国联邦政府 2.国际顶级域名(iTLD, International Top Level Domain)。 int:适用于国际化机构。 3.国家代码顶级域名(ccTLD, Country Code Top Level Domain)。 目前有240多个国家代码顶级域名,它们由二个字母缩写来表示。例如uk代表英国, hk代表香港, sg代表新加坡。并非所有的国家顶级代码域名都已投入使用,有的国家还没有接入Internet (例如北朝 鲜)。 在已注册的域名中,最多的是com下的二级域名,其次是net下的二级域名, jp (日本)是注册域名 最多的国家代码顶级域名。据Next Generation Internet在2000年2月12日发布的统计,com下已注册了 24863331个_ _级域名,net 下已注册1685365 5个二级域名, jp下已注册了2636541个三级域名(注:jp下的二级域名由日本互联网管理中心定义)。 由于Internet的飞K速发展,通用顶级域名下可注册的二级域名越来越少, ICANN将在2000年年底前 增加下列通用顶级域名: arts:艺术和文化单位firm:商业公司info: 信息服务nom:个人 rec:娱乐 store:网上商店web: 同Web有关的活动二级域名(SLD) 在一个完整的域名中,最后一个"."的左边部分称为二级域 名,命名规则由相对应的顶级域名管理机构制定,并由这个管理机构来管理。例如,域名yahoo.com中 , 二级域名yaho列在.com顶级域名数据库中。 三级域名 (TLD)在一 个完整的域名中,二级域名的左边部分称为三级域名,由相对应的二级域 名所有人来管理,由于各个顶级域名的政策不- 样,这个管理者可以是专]的域名管理机构,也可以是公 司或个人。例如,域名yahoo.com.cn中, 三级域名yahoo列在 .com.cn二级域名数据库中,而这个数据 库由CNNIC (目前通过中科院网络中心实施)来管理和维护,根据CNNIC的政策,CNNIC定义.cn 下的二二 级域名,户只能注册相应二级域名下的三级域名; cs.uottawa.ca中, 三级域名cs由二级域名 uottawa.ca的所有人渥太华大学来管理,根据加拿大的域名政策,户可以直接在.ca下注册二级域名。 Internet采用域名系统(DNS, Domain Name System)将域名解析为IP地址。DNS是-个分布式的域 名服务系统,分为根服务器、顶级域名服务器和域名所有人的域名服务器。目前全球有13个根服务器, 根 服务器负责找到相应的顶级域名服务器; .com .net .org顶级域名服务器由ICANN管理( 目前委托 Network Solutions公司维护这些服务器),各国家代码域名 服务器由各个国家自己管理;域名所有人可 以建立自己的域名服务器,也可将域名的解析工作放在别人的域名服务器上。 最后,来粉析- www.yahoo.com是怎样被解析成IP地址的? 1.您在浏览器中输www.yahoo.com。 2.您所使用的操作系统www.yahoo.com的解析请求传给ISP的域名服务器(对于拨号上网用户,规范 的ISP都在拨号服务器上配好域名服务器参数,用户没有必要在系统中配置域名服务器的参数)。 3.ISP的域名服务器查找它的数据文件或Cache中是否www.yahoo.com的数据?如有, www.yahoo.com所对应的IP地址传给您的操作系统。如没有,ISP的域名服务器向根服务器发送请求 “.com由谁来解析?”,根服务 器将.com顶级域名服务器的IP地址返回给ISP的域名服务器,ISP的域名 服务器再向.com顶级域名服务器发送请求"yahoo.com由谁来解析? ”,.com顶级 域名服务器根据 yahoo.com所对应的域名服务器记录(这就是为什么每个域名需要指定DNS参数)向ISP的域名服务器传回"yahoo.com由 ns1.yahoo.com (及对应的IP地址)来解析”,ISP的域名服务 器根据传回的参数向ns1.yahoo.com发 送请求www.yahoo.com的IP地址是什么”,ns1.yahoo.com向ISP的域名服务 器传www.yahoo.com的IP 地址,ISP的域名服务器将这个参数写入Cache,并向您所使用的操作系统传回此IP地址。这一系列的工作 通过一个叫UDP的单向传送协议来完成,速度极快。 4.您所使用的操作系统根据所传回的IP地址通过一系列的路由器访问www.yahoo.com。 路由器的工 作就是寻址、保存数据和传递数据(Find the path, store and forward data), Internet就是通过这些分布 在世界各地的路由器连结起来的。

    Read more +
  • 11

    2020-05
    网页设计技巧:网络视频在网页设计中运用

    网页制作Webjx文章简介:推荐!视频在网页开发方面的创新应用。 aber zou:动态的视频比静态的图片更生动,表达的信息更多。但是目前网络上的视频其实跟整个网页的设计是脱离的,它们都被框起来放在特定的区域供浏览者点击观看,视频并没有像图片一样成为一个网站的装饰元素。其中的原因主要就是浏览器的兼容性,网络速度和设计理念的限制。但是网络技术发展到今天,特别是HTML5的不断完善和浏览器的不断进步,视频在网页设计开发方面的潜力越来越被发掘出来了,为提高网页体验和丰富内容呈现提供了新的方向。 那我们怎么把视频元素很好地结合到一个网页设计当中呢?我们首先来看一些例子。一个最常见的典型用法就是网页背景不再使用静态图片而是一个视频。 Dadaab Stories这个网站就很好地运用视频背景来反映网站的内容。这是一个介绍世界最大的难民营的网站,视频的背景很生动地让观众看到难民营的情况。 http://www.dadaabstories.org 下面这个关于一项自行车比赛的网站也运用了视频来增强视觉冲击力,当鼠标悬停在焦点图上,就会呈现low motion的视频,充满运动的张力。 http://www.curadmir.com 最近,微软IE11和亚洲动物基金合作发布的公益网站“月熊志”中也采用了大量的视频(IE居然已经到11了,对HTML5的支持还是挺好的,而且还加入了WebGL的支持,这个网站就用到这个3D技术,呵呵)。除了有的页面的背景是可爱的月熊视频以外,在网站首页的三本精美的书本的封面其实也是视频。这个设计更加增强了这个数字化阅读的感觉,书本的封面是生动而富有变化的。 编者:这个网站实在是让人震惊,强烈推荐!公益网站能做成这样,让人汗颜! http://moonbear.animalsasia.org/ie/ 在网页中加入视频背景是相当简单的,利用HTML5的<video> tag就可以轻松搞定。 首先,要准备好浏览器支持的视频,格式可以是mp4、ogg或者webm,你可以到这里了解更多关于视频格式:http://www.w3schools.com/html/html5_video.asp这里就不对这个话题进行详细叙述了。 其次就是视频嵌入的HTML代码,参考如下: <video id=”video_background” preload=”auto” autoplay=”true” loop=”loop” muted=”muted” volume=”0”> <source src=”videos/xxxx.mp4″ type=”video/mp4”> <source src=”videos/xxxx.webm” type=”video/webm”> Video not supported </video> 接下来就是CSS,这是让嵌入的视频成为背景的关键: #video_background { position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden; z-index: -1000; } 采用绝对定位,而“width: auto; height: auto;”和“min-width: 100%; min-height: 100%” 就是告诉浏览器总是以视频的宽度或者高度的100%来显示,任何大于100%的部分就是“overflow:hidden”被隐藏起来的。这养定义适用于任何比例的视频元素。最后别忘了“z-index: -1000;”,确保视频至于背景置于底层。 当然还有好一些jQuery的plug-in可以用,这里介绍一个做得最好的BIGVIDEO.JS。这个plugin可以轻松让你嵌入全屏的视频背景。 http://dfcb.github.io/BigVideo.js/ 最后,我们总结一下。虽然在网页设计开发中加入视频元素会给人很cool的印象,但是还是有不少地方需要注意的,否则效果可能适得其反。 注意要消除声音,因为一般声音的突然出现会对用户造成困扰,如果一定要音频的话,一定要加上一个“关闭”按钮让用户可以选择关掉。 使用视频背景的时候,注意前景内容的对比,毕竟只是背景,不能喧宾夺主,可以适当地在视频上加一层纹理质感,或者调暗视频的亮度。 提供一张视频第一帧的的清晰截图作为图片背景,以照顾不支持视频背景的浏览器或者在移动设备,另外也可以防止视频没有加载完毕而不至于页面上出现空白。 视频的长短要合适,太短并且不是首尾连贯的视频会给人强烈的重复感,太长就变成叙述了,最佳的长度应该在10’ -30’左右。

    Read more +
  • 11

    2020-05
    快速设计专题:营销类节日专题设计案例分析

    <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">快速制作专题!利用颜色查找快速制造大感觉。</font> </td> </tr></tbody></table> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(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 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> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">第一:观察交互稿,并进行简单的交互稿梳理</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">游戏类的专题,一般没有专门的交互设计师给你去设计交互稿,所以拿到交互后,就需要对交互进行一遍”<strong style="FONT-WEIGHT: bold">审查</strong>“,把不明白的地方和接口人对一遍。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">比如这张交互上,标题有3列,”冰原献礼”"限定皮肤3送1起”"冰原狙击凯特琳 首战正义之地 “这些是出现在头部的文字,一般都属于<strong style="FONT-WEIGHT: bold">最重要的信息传递</strong>。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">所以要特别详细的问接口人,这些文字都是什么意思,是不是已经完全确定采用这些字(因为后面要对这些文字进行设计,如果后面再要修改,就会浪费很多时间)</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">又比如:上面四条”献礼1、2、3、4″是什么意思,放在这里有什么用。等等。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">总结来说,拿到交互后,<strong style="FONT-WEIGHT: bold">一定要对交互的内容进行梳理,分析出内容的主次</strong>(对你后面的设计特别重要)</p> <p><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" border="0" alt="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731060.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">&#160;</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">第二:平铺交互内容</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">由于属于快速专题,并且强调要使用”冰原狙击 凯特琳”这张原画进行设计</p> <p 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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731061.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">1:这里首先对背景进行拼凑,把位置大概放好。</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="快速制作专题!利用颜色查找快速制造大感觉" p="" src="http://www.webjx.com/files/allimg/140106/1731062.jpg"></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">2:接下来把背景进行过渡、融合,这里建议把内容转换为”智能对象”后,用高斯模糊滤镜再添加蒙板来进行局部涂抹,达到一个简单的预期效果,让画面看起来过渡和谐,没有生硬的地方。</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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731063.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">3:然后,就把交互稿里的内容全部平铺在设计稿上,让自己对整个网页的内容有个了解,并且明白内容的区块划分。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">第三:在设计稿上分出主次</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">接下来就要对我们的交互进行主次的划分了。注意:这一步特别重要。这影响你接下来的设计重点将花在哪一块。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731064.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">1:首先我们说标题,标题有<strong style="FONT-WEIGHT: bold">“</strong>冰原献礼”"限定皮肤3送1起”"冰原狙击凯特琳 首战正义之地”,先自己进行简单的分析,”冰原献礼”这个意义不大,只是赋予了这个专题一个名字,因为是快速专题,所以不需要对他进行过多的设计。”冰原狙击凯特琳 首战正义之地”这是活动的slogan,对活动也没有很大的意义,所以也没有必要花时间设计。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">个人认为<strong style="FONT-WEIGHT: bold">最有效的信息</strong>是”限定皮肤3送1起”,最能吸引玩家眼球的就是他,有「限定皮肤、送」这些字眼,这明摆着就是勾引用户嘛,所以我选择把这块文字<strong style="FONT-WEIGHT: bold">进行放大</strong>,吸引用户的眼球!也让头部的文字有的<strong style="FONT-WEIGHT: bold">大小对比</strong>,有了简单的形式感。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">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">3:接下来是第一部分内容,”四重献礼”,交互稿上有四条信息”献礼1、献礼2、献礼3、献礼4″,通过和接口沟通后,这四条信息是下面四个皮肤的领取条件,而下面四个皮肤也是这个专题的主角&#8211;要送的皮肤,所以我们也确定了这一块内容在整个页面的重要关系。那么为了和下面售卖的皮肤有区分,这四个皮肤的区域我采用了「圆形」来进行区分和强调!并且把四条领取信息梳理在了应该出现的位置,领取按钮的下面。</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">4:最后专题下方的”指定冰雪节限定皮肤”售卖区,这个从交互上看没有什么问题,所以我们就不用再此纠结。</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.s.在每一次对一个区块进行主次分析后,最好和接口人对一遍,以免你的判断出错,到最后白费功夫。最后确认你的分析是正确的之后,就可以开始进行视觉设计啦。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">第四:利用”颜色查找”制造大感觉</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">接下来就是今天要说的<strong style="FONT-WEIGHT: bold">“颜色查找”</strong>功能,这个功能之前在”优设网”上有个介绍<a style="TEXT-DECORATION: none; BACKGROUND-IMAGE: none; COLOR: rgb(13,164,211); LETTER-SPACING: 0px; PADDING-RIGHT: 10px; -webkit-transition: all 0.18s ease-out" target="_blank" href="http://www.uisdc.com/photoshop-cs6-new-color">《PHOTOSHOP CS6鲜为人知的一个调色功能》</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" border="0" alt="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731065.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">添加了颜色查找以后,在颜色查找的面板里找到3DLUT文件,下拉就可以看到很多自带的特效样式,可以一个一个尝试。</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">本文附件提供由 @良知塾TaoStudio 提供的更多 查找颜色 样式下载</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这个功能用了之后会立刻给页面制造一些<strong style="FONT-WEIGHT: bold">电影级别的色调</strong>,有冷的,有暖的,诡异的,小清新的,在经过鼠标滚轮的一番滚动后,总有几个颜色会让你灵光一现,如果没有,那你只能绕道而行,换其他的方法了。</p> <p><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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731066.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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731067.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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731068.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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/1731069.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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310610.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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310611.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">因为这个专题是冰原献礼,所以第一感觉想到的是<strong style="FONT-WEIGHT: bold">冷、雪、蓝色、白色</strong>,这些关键词蹦出来。所以在经过”颜色查找”的尝试后,找到了自己满意的一个效果,就是上图 颜色查找效果六 这个蓝色的效果。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310612.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> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">第五:分清主次进行内容刻画。</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这个时候画面的颜色已经是差不多了,有<strong style="FONT-WEIGHT: bold">大调子</strong>,有<strong style="FONT-WEIGHT: bold">冷暖对比</strong>。接下来就是要对内容进行设计了。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310613.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">1:首先给标题挑一个和谐的颜色,并且选择一款看的顺眼的字体!(标题放在光源的后面)然后继续调整文字的排版。</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">2:对页面中的主要区域进行刻画,并且<strong style="FONT-WEIGHT: bold">强调区块的标题</strong>。因为是圣诞节出的专题,这四个皮肤又是主角,所以下功夫好好刻画一下吧,画出来,后面三个重复利用。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">3:限定冰雪节皮肤售卖区域,因为主次关系比上面的”四重献礼”<strong style="FONT-WEIGHT: bold">相对弱一点</strong>,但也是重要的营销区域,所以也不能对这里有怠慢,依然是刻画皮肤的框,但不要比上面”四重献礼”的框精致,画一个就好,后面的重复利用。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">4:最后是活动说明,这里其实也是考验设计师有没有花心思的地方,<strong style="FONT-WEIGHT: bold">将重要的信息用高亮的颜色标出来</strong>,会更利于用户的阅读。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">第六:刻画专题的细节</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">完成第五步后,作为一个快速专题差不多是”完成了”,要是觉得还不错的话,其实已经可以交稿了,但如果你还想继续做下去,那就刻画吧。</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310614.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">1:标题增加纹理,投影等等看着舒服的样式。</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">2:增加雪堆积的效果。(如果时间充裕,最好每个重复的区域堆积的雪不一样)</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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310615.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">3:页面添加飘雪(主要给专题添加气氛,并且制造空间感。)之后还会出一个快速制造有空间感的飘絮物教程</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">4:增加太阳光源射线,不用太明显,一点点就好(对画面空间感也有帮助)</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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310616.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">5:继续润色,加强页面冷暖对比。(润色有很多方法,如本期介绍的”颜色查找”,可以在后期润色的时候反复使用,不过这样会增大你的PSD容量,不过为了美无所谓拉!,还有调整图层里的”可选颜色”"色彩平衡”"对比度”等等,不要吝啬使用这些调整图层,他能在专题收尾润色的时候,给专题带来画龙点睛的效果。)</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="快速制作专题!利用颜色查找快速制造大感觉" src="http://www.webjx.com/files/allimg/140106/17310617.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">6:继续加强页面冷暖,加强饱和度,对比度,刻画雪的细节,至此页面设计完成,开心的交稿去吧。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">结语:</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">这次介绍的快速专题制作技巧,主要是前期利用”颜色查找”制造大感觉,营造出页面初期的大气氛,制定了一个方向,不至于走弯路。但这个方法不一定适合每个专题,你可以搜集这些技巧,在你遇到紧急需求的时候去尝试使用。</p> <p 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 target="_blank" href="http://vdisk.weibo.com/s/dwwRXrCQ16YLB">微盘下载</a></p>

    Read more +
  • 11

    2020-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">优秀手机应用设计需要遵循的8大原则.</font> </td> </tr></tbody></table> <p><span class="wp_keywordlink_affiliate"><font color="#0da4d3">产品设计</font></span>的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机无线设计8原则:</p> <h4>原则1:用户界面应该是基于用户的心里模型,而不是基于工程实现模型</h4> <p>就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点,用户的心理模型抓的越准,界面就会越优秀。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016130.jpg"></p> <p>#左边界面#:大众点评新版的价格的搜索就比之前改得更符合用户心里模型;</p> <p>#右边界面#:食神摇摇的摇动手机找餐厅更加符合大众用户的心里,大家应该都有那种中午不知道去哪家餐厅就餐,那么就摇一摇来随机抽出一个附近的餐厅。</p> <h4>原则2:培养用户使用情景的思维方式做设计</h4> <p>要做到这个原则其实是很难的,需要长期的实战经验才能做到这点。<br>那我们都知道米聊出的比微信早,但后来被微信反超,个人认为不光是QQ帮了微信很大忙,比如用户登录门槛低,用户来源,广告打得响之类的,其实在用户使用情景方面米聊研究的没有微信透彻。</p> <p>对于一个社交即时通讯产品,添加好友的功能是好友汇聚的来源,虽然米聊微信都绑定手机通讯录,但话又说回来,用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友,找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置,在产品前期就会让用户明显的去选择用哪个应用,因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来,看看下面的对比:</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016131.jpg"></p> <p>微信1.0的时候(我这里只截了4.0的图)把添加好友放置主Tab上,方便用户很快的添加好友</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016132.jpg"></p> <p>米聊2.0时还是把添加好友放置在好友列表的第一排,用户很难发现</p> <h4>原则3:尽量少的让用户输入,输入时尽量多给出参考</h4> <p>移动端的虚拟键盘一直是科技界无法解决的一个难题,虚拟键盘的主要缺点:1.输入定位无法反馈,所以无法形成高效的盲打;2.虚拟键盘的空间限制,手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣,所以我们在设计应用程序时,只要遇到Input Box的控件时,首先就要想到尽量让用户少输入,或者智能的给出参考。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016133.jpg"></p> <p>百度音乐的搜索先是把近期最热门的歌曲依次排列在列表中,当有字输入时,会出现歌手的候选词,这里值得称赞的是百度音乐的搜索能根据用户输入的字来判断用户是搜索歌手还是歌名。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016134.jpg"></p> <p>百度地图也是我用得比较顺手的一个地图导航应用,在减少输入方面也做的比较出色,百度地图拥有cookies功能, 另外就是百度搜索的技术应用在地名的匹配中也很让人欣喜,在用户输入到一半的时候,下面的候选列表就出现了目标地址,用户直接停止输入点击列表即可。</p> <h4>原则4:全局导航需要一直存在,最好还能预览其他模块的动态</h4> <p>全局导航在Web<span class="wp_keywordlink_affiliate"><font color="#0da4d3">交互设计</font></span>中比较容易做到,在手机移动端全局导航要看<span class="wp_keywordlink_affiliate"><font color="#0da4d3">产品设计</font></span>的需求,什么功能需要全局导航,社交应用通常是:消息,通知,请求;音乐视频应用通常是:下载,搜索;工具类产品经常是核心工具条(tool bar) 比如浏览器,语音助理,音乐识别应用等等。<br>全局导航的价值在于可以让用户在使用过程中不会丢失信息,减少主页面和次级页面之间的跳转次数,当然全局导航中的info-task要能在当前页面完成,如果需要跳转到新界面,就会失去全局导航的意义,因为当出现多个info-task的时候,就需要用户不停的进入全局导航页面来完成。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016135.jpg"></p> <p>Facebook 的朋友请求,消息,通知都是采用全局导航的方式,就是面板设计的丑了些~</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016136.jpg"></p> <p>米聊的通知中心,里面包含的通知类型蛮多的,显得有点凌乱,希望下面的版本会筛选归类</p> <h4>原则5:提供非模态的反馈,不打断任务流</h4> <p>模态弹出框的书面名称在iphone OS中称作:Alert-box,在Android OS中称:Pop-up box, 我们都知道弹框会打断任务流,所以在有限的屏幕上怎样让这些弹框弱化,或者说优雅、绅士的提醒用户,这个需要设计师来定义。</p> <p>模态是指界面中只有提醒弹框才具有可交互行为,其他一切都不可操作;非模态不会把提醒做成弹框,可能会处理成List Notification, Toast list等方式来提醒用户。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016137.jpg"></p> <p>Gmail是第一个把删除的模态弹框设计成List Notification这种方式的,提醒用户撤销刚才的删除操作,这种非模态的处理,让删除的流程更加顺畅和轻松自如。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016138.jpg"></p> <p>K歌达人第二版的弹框就是模态处理,界面很不友好,用户在K歌过程中要被打断三次才能发表一首自己唱的歌曲,所以降低了用户的参与度。</p> <h4>原则6:不要让用户等待任务完成,用户还要发现更多有意思的地方</h4> <p>移动互联的核心就是给用户带来移动体验的方便和高效,这是 移动互联网Apps需要考虑的,用户在使用你产品在很多情况下都是碎片时间, 所以在设计上尽量让用户在短时间内熟悉我们的产品,知道这个产品的诚意,特别是某些等待界面需要设计,不能把一个很枯燥的等待界面呈现在用户的面前,那用户很快就会换其他apps。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/1016139.jpg"></p> <p>在Instagram 拍完照片后,点击上传后,它的处理方式是回到首页的位置,告诉你的照片正在提交,并不是显示一个上传进度的界面,让用户看那上传百分比。因此,我们在设计米吧上传歌曲文件时也只是告知用户后台正在帮你上传,叫用户放心,用户自然就会去玩其他的功能,没有让用户焦虑的等待,等上传完毕时,我们再用Toast list通知用户已经上传成功,这样把查看上传结果的主动权交给用户。</p> <h4>原则7:自动保存用户的输入成果</h4> <p>在移动端,由于输入面板的复杂性,而且触摸输入没有物理按键的反馈自然,特别是手机上去输入一段文字或者信息,对用户而言本身就是一件很痛苦的事情;对产品而言,用户的在你的产品中输入是一个很值得庆幸的事情,所以设计人员需要让你的apps自动保存用户的输入成果。</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/10161310.jpg"></p> <p>微博官方的手机客户端在用户输入信息后,点击左上角的叉时会弹出Action sheet来询问,确认是否要放弃,或者保存为草稿;path的处理则更为人性化,在处于断网的情景下,用户依然可以发布照片和文字,当然后面联网成功后,系统会自动上传,只是发表时间是连网后发布的时间点;Instagram的评论也很友好,在断网或者网络情况不稳定的情景,用户输入的评论依然可以发布,后面会有一个叹号提醒用户稍后发布或者重试,提升了用户参与的积极行,同时活跃了社区。</p> <h4>原则8:为了程序响应的速度,设计有时候需要担任掩护的作用</h4> <p>科技并不是万能的, 技术依然是移动互联网应用程序最需要优化和完善的,作为技术的盟友我们设计人员也需要辅佐他们,让用户觉得程序原本就应该是这么运行的。特别是程序响应的速度很多时候不光是技术的问题,与网络环境也有很大的关系,这时候设计人员需要考虑这些客观存在的情况,帮助程序来掩护这些瑕疵,让用户感觉到在使用时是流畅的。</p> <p>#随后实现# Instagram帖子“赞” 不管对参与者还是帖子作者都是激发其积极性活跃社区氛围的重要功能,所以在程序的响应方面一定要具有可用,易用的特性,我们看左图中,“赞”的按钮已经现实“已赞”,同时我们看红色框内的“菊花瓣”就知道后台在loading赞的数据,所以这就是设计的巧妙之处,先让用户感知到程序是非常快速的,而不是等loading完之后再显示“已赞”;</p> <p><img alt="" src="http://www.webjx.com/files/allimg/140108/10161311.jpg"></p> <p>#提前传输# Instagram中发布帖子的时候,用户处理完照片点击“上传”按钮就看到中间的界面,这时候界面是让用户去为自己的帖子输入一个主题,或者去设置分享等功能,同时我们可以看到红色框中的“菊花瓣”,很明显后台已经开始传输刚才上传的照片了,所以当用户在点击“完成”时,数据只需要上传剩下的一部分,让用户感知上传很迅速;</p> <p>#边唱边完成# 把伴奏和用户的歌声合成为一首音乐时需要后台处理大量的数据,如果分步做就要让用户等待比较长的合成时间,为了让用户不用枯燥的等待合成,我们需要后台在用户唱歌的同时,后台就已经开始把唱过的伴奏和歌声合成。</p> <p>以上八项原则是我在工作中体会比较深刻的<span class="wp_keywordlink_affiliate"><font color="#0da4d3">交互设计</font></span>原则,希望能对观看到这篇博文的朋友有所帮助。当然设计原则是随着时间的变化而不断变化的,所以也请各位朋友完善和补充,谢谢!</p>

    Read more +
  • 17

    2018-05
    SEO困境突围:摆脱吓死人的网页设计

    <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">在你挖空心思推广优化网站,却又无法获得满意的流量时,是否考虑过:也许不是你的推广方法不对,或许你的优化力度刚刚好。其实一切都刚刚好,除了你的网站设计 ― 因为你的网站设计得“吓死人”了!</font> </td> </tr></tbody></table> <p style='PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'>在你挖空心思推广优化网站,却又无法获得满意的流量时,是否考虑过:也许不是你的推广方法不对,或许你的优化力度刚刚好。其实一切都刚刚好,除了你的网站设计 &#8212; 因为你的网站设计得“吓死人”了!</p> <p style='PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'>那么该如何避免“吓死人”的设计呢?本文将分享7个小心得,让你的网站不再“吓人”!</p> <blockquote> <p style="PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">1.切忌,网页的字体和颜色运用不协调!</p> <p style="PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">2.切忌,胡乱使用突出文字效果!</p> <p style="PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">3.最好不用动态Banner,滚动和闪烁的文字!</p> <p style="PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">4.少用或不用不必要的Flash动画或GIF动图!</p> <p style="PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">5.切勿采用杂乱无章,轻重难分的布局!</p> <p style="PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">6.不要随便设置背景音效,尤其是没有开关键的音效!</p> <p style="PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">7.加载速度千万不能慢呐!</p> </blockquote> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_01" src="http://www.webjx.com/files/allimg/131214/1837500.jpg"></p> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_02" src="http://www.webjx.com/files/allimg/131214/1837501.jpg"></p> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_03" src="http://www.webjx.com/files/allimg/131214/1837502.jpg"></p> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_04" src="http://www.webjx.com/files/allimg/131214/1837503.jpg"></p> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_05" src="http://www.webjx.com/files/allimg/131214/1837504.jpg"></p> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_06" src="http://www.webjx.com/files/allimg/131214/1837505.jpg"></p> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_07" src="http://www.webjx.com/files/allimg/131214/1837506.jpg"></p> <p style='TEXT-ALIGN: center; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'><img style="BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block; BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid" border="0" alt="1_08" src="http://www.webjx.com/files/allimg/131214/1837507.jpg"></p> <p style='PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; MARGIN: 1em 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 14px/26px "Segoe UI", Tahoma, Arial; WHITE-SPACE: normal; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px'>图片来自:花瓣网</p>

    Read more +
  • 17

    2018-05
    网页设计案例分享:黑色风格网页实际案例

    <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">不走寻常路:22款“暗黑系”的网页设计分享.</font> </td> </tr></tbody></table> <p>自从iOS 7推出后,便掀起了扁平化加色彩明亮的设计风潮。如今,色彩明亮的扁平化设计已填满了我们的生活,大家是否有些审美疲劳了呢?在扁平风潮下,依旧有些特立独行的设计师们坚持走自己的路,在他们的作品中采用的多是较为柔和的配色方案,使用的色彩也都趋于深色系!<br><br>&#160;&#160;&#160; 虽然如今“暗黑系”并非大势,但他们的作品依旧充满了另类的吸引力。在黑与白的交错中,扑捉那份独特的情感体验!下面为大家介绍20款“暗黑系”的<a href="http://www.webjx.com/"><u>网页设计</u></a>案例,让你感受光与影的美好!<br><br><strong><a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://www.moresleep.net/">&#160; &#160; &#160; Moresleep</a></strong></p> <p><a class="bPic" style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" href="/files/allimg/131216/2030140.jpg"><img style="BORDER-TOP: rgb(153,153,153) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(153,153,153) 1px solid; WIDTH: 600px; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="MoreSleep" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030140.jpg"></a></p> <p>  <strong><a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://www.apple.com/mac-pro/">Apple Mac Pro</a></strong></p> <p><a class="bPic" style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" href="/files/allimg/131216/2030141.jpg"><img style="BORDER-TOP: rgb(153,153,153) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(153,153,153) 1px solid; WIDTH: 600px; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="Apple Mac Pro" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030141.jpg"></a></p> <p>  <strong>&#160;<a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://www.rook.is/">Rook</a></strong></p> <p><a class="bPic" style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" href="/files/allimg/131216/2030142.jpg"><img style="BORDER-TOP: rgb(153,153,153) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(153,153,153) 1px solid; WIDTH: 600px; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="Rook" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030142.jpg"></a></p> <p>  <strong>&#160;<a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://pliniodidit.com/">Plinio</a></strong></p> <p><a class="bPic" style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" href="/files/allimg/131216/2030143.jpg"><img style="BORDER-TOP: rgb(153,153,153) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(153,153,153) 1px solid; WIDTH: 600px; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="Plinio" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030143.jpg"></a></p> <p> <strong><a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://www.jesters-wild.com/">&#160;JestersWild</a></strong></p> <p><img style="BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="JestersWild" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030144.jpg"></p> <p>  <strong><a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://www.vanschneider.com/">&#160;Tobias van Schneider</a></strong></p> <p><img style="BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="Tobias van Schneider" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030145.jpg"></p> <p>  <strong><a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://www.wearea2b.com/uk">&#160;A2B</a></strong></p> <p><img style="BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="A2B" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030146.jpg"></p> <p>  <strong>&#160;<a style="TEXT-DECORATION: none; COLOR: rgb(28,61,114)" target="_blank" href="http://jackietrananh.com/index.php">Jackie Tran Anh</a></strong></p> <p><img style="BORDER-TOP: rgb(153,153,153) 1px solid; BORDER-RIGHT: rgb(153,153,153) 1px solid; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BORDER-LEFT: rgb(153,153,153) 1px solid; DISPLAY: inline-block" border="0" alt="Jackie Tran Anh" width="720" height="450" src="http://www.webjx.com/files/allimg/131216/2030147.jpg"></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><img alt="1" width="842" height="480" src="http://www.webjx.com/files/allimg/131216/2034290.jpg"></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的设计语言强调了高光、极简,包括所有的按键以及app图标。</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">这个改变使苹果的操作系统更加时尚、简单,同时也影响了人们对扁平化的理解。当然有人欢喜有人愁,一些人对此颇有微词,认为这一改变并没有使IOS系统向好的方面发展。</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的用户都知道,这款操作系统中所有的图标都是简单的线条构成,也正是这种“过于简单化”的设计引起了重大争议。尽管现在这些图标被广泛的应用在手机app上,但是还未被全面接受。它们需要被理解,但是至今好像没有做到。</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">软件设计师Aubrey Johnson写了一篇文章,说他们并不是为了简单而简单:“中空的图标更容易为用户所接受。” Audrey认为复杂的形状用户难以理解,简单的元素用户反而更能接受,并且轻量化的可视元素意味着更快的解析速度,因而用户能快速消化。这一观点看上去似乎非常重要,但是不是每个人都赞同。<br>例如Bobby Solomon,他写了一篇文章说:“你脑袋里的符号没有一千也有一百多个了,中空图标肯定会让你把它们弄混淆。”他认为中空图标缺乏辨识度,不容易与其他的图标区分开。</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">Bobby还指出“中空图标”的也是一种语言,它必须让我们每天使用的时候都能理解,一个简单app的图标绝对不会有这么大的信息量。在交互界面设计中,图标需要易于理解&#8212;&#8212;不管我们是否熟悉。<br>另一位设计师Caesar Wong在这次讨论中强调了“图片是怎样被眼睛接收“这一理念,他个人认为现在的讨论方向跑偏了,更偏向于艺术而不是科学。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span class="wp_keywordlink_affiliate">扁平化设计</span>任重而道远,你觉得呢?哪种图标更容易给人好的第一印象?请在下面的评论里告诉我们吧~</p>

    Read more +
  • 17

    2018-05
    手机APP设计师经验分享: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><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用户体验 通过设计让APP变快" src="http://www.webjx.com/files/allimg/131216/2038390.jpg" width="624" height="201"><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">&#8203;做了设计转眼间也4年多了,从2011年由网页设计师转到手机APP设计师;最近的工作不是很忙,就静下心来去阅读学习下互联网的一些发展趋势来弥补自己在这方面的不足(因为工作的时间大部份都是做设计);之前一直以为<span class="wp_keywordlink_affiliate">用户体验</span>方面的工作是有专门的研究人员去做的,与设计人员没有关系,通过这几天的学习,发现做设计的也可以做到<span class="wp_keywordlink_affiliate">用户体验</span>啊,下面我就给大家一一介绍下,大家互相学习 ^_^</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">一、后台的执行</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">核心思想:</strong>通过在状态栏运行加载的程序的同时,可以使用户可以做其他的事情</p> <p 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="app2013121201" src="http://www.webjx.com/files/allimg/131216/2038391.jpg" width="296" height="525"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">Instagram</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="app2013121202" src="http://www.webjx.com/files/allimg/131216/2038392.jpg" width="296" height="518"><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">&#8203;</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">发微博平台</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">例如:我刚发表了一条评论,右边红色框的区域立马显示在评论列表,但实际上我回复的这句评论,对方不能立即收到消息提醒;是因为在看状态栏的&#8203;,我发的那句话正在后台程序默默的加载运行呢;这样后台执行它的任务,我可以继续查看其他的评论内容,也不耽误事。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">二、在载入前显示内容</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">核心思想:</strong>让用户感觉很快想看到相关产品的信息</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">举例说明:</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="app2013121205" src="http://www.webjx.com/files/allimg/131216/2038393.jpg" width="297" height="525"><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">&#8203;</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">Appstore详情页</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> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">三、充分利用好缓存</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">核心思想:</strong>利用缓存机制,提高页面的打开速度</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">举例说明:</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="app2013121206" src="http://www.webjx.com/files/allimg/131216/2038394.jpg" width="656" height="525"><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">&#8203;</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">蝉游记的“游记”和陌陌的“添加微博好友”等页面,都利用了缓存</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> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">四、界面先行,网络随后</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">核心思想:</strong>对于一些数据量很小,且失败可能性较小的网络交互,或者是在没有网络的情况下,用户也能够顺畅地使用APP</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><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">&#8203;</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="app2013121207" src="http://www.webjx.com/files/allimg/131216/2038395.jpg" width="660" height="528"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">微信朋友圈的“发图片”和微博的“收藏”功能</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">朋友圈即使在没有网络的情况下,也可以发布图片,等有了网络之后自动上传刚发布的内容,这一点体验做的很棒(PS:希望微信可以快点更新ios7扁平化)</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> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">五、预测用户行为,提前开始任务</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">核心思想:</strong>预测用户下一步操作是什么,提前为用户铺好道路</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">举例说明:</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="app2013121208" src="http://www.webjx.com/files/allimg/131216/2038396.jpg" width="657" height="524"><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">&#8203;</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">网易云阅读</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="app2013121209" src="http://www.webjx.com/files/allimg/131216/2038397.jpg" width="295" height="195"><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">&#8203;</span><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">Android的更新提醒</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> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">六、尽量少的让用户输入,输入时尽量多给出参考</strong></h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">核心思想:</strong>移动端的虚拟键盘既有它的优点,又有它的缺点,缺点主要有:<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="app2013121210" src="http://www.webjx.com/files/allimg/131216/2038398.jpg" width="301" height="525"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">百度地图</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">例如:我想找万达国际影城,当在输入框搜索「wand」几个字母的时候就会列出所有关于万达方面的内容,很容易就找到&#8203;,这样避免用户多输入的状况,很贴心。</p>

    Read more +
  • 17

    2018-05
    WEB登陆页面设计技巧:登陆界面表现形式

    <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">拒绝平庸:优秀WEB登录页面设计。</font> </td> </tr></tbody></table> <p><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 14px/25px Tahoma, Verdana, 宋体; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">关于登陆估计大家每天使用的都很频繁了,每次上网都会习惯性登陆下微博,淘宝,邮箱,空间等,在每天进进出出无数门户的时候有谁又曾在密码不错误的情况下停留在WEB登陆页面看一眼呢?下面就谈谈这道不起眼的门。</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">用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的<span class="wp_keywordlink_affiliate">登录页面</span>就相当传统的“门面”。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">从个人博客的角度看</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">个人登陆页面一般只有自己会用到,所以别人基本是看不到的,但也不排除像我一样无聊什么都好奇的人存在,什么都想看看,什么都想改改的。那么个人登陆页面的设计就完全是抒发个人情感,体现自身个性的一个地方,你完全不需要在乎它的交互是否友好等问题。你的地盘你做主。</p> <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">各大网站的WEB登陆</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">现在越来越多的大型网站把登录和首页放在一起设计,由此可见<span class="wp_keywordlink_affiliate">登录页面</span>的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情感化设计,提升<span class="wp_keywordlink_affiliate">用户体验</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">如果说iPad是介于传统电脑和手机之间的产品,那么tumblr则是介于blog和twitter之间的服务。相比twitter,它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖,带来一种全新的视觉体验, 安东尼&#183;德&#183;圣-埃克苏佩里曾说过,“完美就是多一点则太多,少一点则太少。” Tumblr的登录页面没有过多的视觉干扰,优雅大方,一切元素的存在都是为了用户更好的登录,登录过程非常流畅。</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="17" src="http://www.webjx.com/files/allimg/131216/2041520.jpg" width="720" height="436"><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">iCloud是苹果公司所提供的云端同步服务,用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔&#183;瑞茨拉夫回忆说:“乔布斯会一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。他非常重视细节,细致程度居然达到了像素的层面。如果发现问题,乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理,微妙的阴影,精致的质感,完美的细节,金属光泽可以随着鼠标指针移动,底部的图标可以随着分辨率的大小自适应,改变排列方式,确保用户的浏览体验。</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">iCloud给我们上了很好的一课,有句大家都听过却未必做到的话&#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="21" src="http://www.webjx.com/files/allimg/131216/2041521.jpg" width="720" height="347"><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">在<span class="wp_keywordlink_affiliate">网页设计</span>中,插图非常具有表现力,它与绘画艺术关系密切。所以大部分设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与<span class="wp_keywordlink_affiliate">网页设计</span>的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的设计师,将插画运用到<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">163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆,有故事的插图与用户建立情感的联系,唤起用户的心灵共鸣,让用户更有归属感。</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="31" src="http://www.webjx.com/files/allimg/131216/2041522.jpg" width="720" height="484"><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">Vimeo是一家提供高清视频存放服务的网站,在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。</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="41" src="http://www.webjx.com/files/allimg/131216/2041523.jpg" width="720" height="534"><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">天猫和淘宝的话做为中国最大的在线交易平台的话,也是非常注重登陆页面的设计,而且还在登陆窗口下面设置了一个&#160;”登录页面”改进建议 按钮,可以看出淘宝是非常注重<span class="wp_keywordlink_affiliate">用户体验</span>设计的.天猫的话就更多注重品牌化.</p> <p><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="taobao" src="http://www.webjx.com/files/allimg/131216/2041524.jpg" width="700" height="329"><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="tianmao" src="http://www.webjx.com/files/allimg/131216/2041525.jpg" width="700" height="292"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span></p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">人文关怀的品牌传达</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现人文关怀,传播品牌理念的绝佳位置。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">QQ邮箱登陆页面每一次刷新都能看到不同的内容,或用海子的诗,或用迈克尔.杰克逊的歌词,唤起用户的共鸣,设计手法简洁,主体信息突出,引导清晰,并没有多余的元素,界面中最重要的操作“登录”按钮使用了交通中通行的绿色,而没有使用常用的蓝色,细节设计非常考究,对每个细节都注入人文的关怀。</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="52" src="http://www.webjx.com/files/allimg/131216/2041526.jpg" width="720" height="442"><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="sina" src="http://www.webjx.com/files/allimg/131216/2041527.jpg" width="700" height="552"><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">越来越大的输入框设计,让用户输入起来感到心情舒畅,登录过程非常愉悦,在显示器越来越大的今天,mailchimp大输入框显的霸气十足,并且一反常态的可以看到自己的密码,第一次在WEB登录框里见到这种设计,非常贴心.正是这种不拘一格的设计,让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。</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="71" src="http://www.webjx.com/files/allimg/131216/2041528.jpg" width="720" height="409"><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">WEB设计的风格越来越趋向于简洁,登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,砍掉了多余的元素,颜色,形状和纹理,不能使用让人眼前一亮的设计元素,只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味,wordpress后台登陆页面采用适当的投影,灰色的巧妙运用,以及出错的抖动提示,让整个登录页面简约而不简单.堪称典范。</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="81" src="http://www.webjx.com/files/allimg/131216/2041529.jpg" width="720" height="409"><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">随着互联网的高速发展,移动互联网的到来,WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功,但却能为产品加分,为产品注入设计DNA,创造独特的风格和视觉感受, 好了,今天就先侃到这,作为用户使用的入口,希望这篇小文可以让大家对登录页面重视起来,设计出更多精彩的登录页面。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">对于个人来说我也不忘贴出自己的登陆页面展示下,抒发下个人情感。</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">至于表达的是什么就大家自己体会吧,一幅美丽的蒲公英,在黑夜的月光下随风飘荡.看似自由自在,但却身不由己.每一次登陆博客都能提醒着我.</p> <p><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="mrkoki" src="http://www.webjx.com/files/allimg/131216/20415210.jpg" width="800" height="452"><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><br class="Apple-interchange-newline"></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> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">引言:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">提到横版格斗的网络游戏,大家可能最熟悉的就是腾讯代理的2D像素游戏(DNF),从08年上线到现在一直热度不减,可见在中国的游戏市场上格斗类的游戏是多么的受到玩家的热爱。随着电脑硬件的提高,游戏的画面品质得到了进一步提高。创造出高品质的横版格斗游戏成了众多游戏厂商的目标。</p> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">项目背景:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">《暗影之剑》是一款成人横版动作MMORPG。游戏首次将暗黑写实风格与横版动作类型结合,依托源于TVgame的物理引擎与真人捕捉技术,将横版游戏的动作打击感提升到了全新的高度。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046110.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">项目解析:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">作为一款全新的游戏,如何让玩家对游戏产生期待感,成了至关重要的问题了。通过对整个项目进行分析,我们从中提炼出一些关键词这些就是影响玩家期待度的因素。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046111.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">官网改版设计思路:</h4> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046112.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">网站设计执行:</h4> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046113.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span><img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046114.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">职业专题沿用官网的设计风格,在很大程度上保持整套网站的统一。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046115.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">游戏特色专题:通过对市场的竞品游戏进行对比,突出游戏的全新特色,互动的小游戏让玩家提前体验游戏。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046116.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">互动站创意:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">为了让玩家对游戏有足够深刻的认识,我们决定对游戏进行新一轮的宣传;这次的重点是让玩家能够参与进来,这一次官网的改版采用的互动站的形式。让玩家在了解游戏世界观的同时,参与游戏提升认知度。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">经过几次和项目组开会讨论,最终确认了大致的方向,通过回忆录的形式,讲述探险者在探险过程中的遭遇,最终是如何遇到终极BOSS暗影女王的过程。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046117.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">原画素材的提供:</h4> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046118.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <h4 style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(51,51,51); PADDING-BOTTOM: 0px; PADDING-TOP: 25px; FONT: bold 1.5em/1.33em 'microsoft yahei', arial, sans-serif; PADDING-LEFT: 0px; MARGIN: 10px 0px 20px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">设计执行:</h4> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">页面采用了倒叙的手法,所以在前面LOADING的部分,并没有单独设计一个加载页面,而是展示一本古老的书籍、昏暗的灯光、破旧的书桌、斑驳的地图等等,让整个页面代入感变得更强。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/2046119.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">内页的设计,延续昏暗的设计风格、第一人称视角、全程的背景音乐,这一切都旨在为玩家提供一个真实环境氛围,让玩家体验更加真实、刺激。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461110.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">玩家在遇到交互点的时候,通过有声旁白的形式介绍游戏内容,让玩家在体验过程中快速了解游戏。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461111.jpg"><span style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; FLOAT: none; COLOR: rgb(82,82,82); FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"></span> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">为了让故事更加流畅,我们在转场部分设计了塌陷的效果,让前景跟后景有效的结合到一起。</p> <img style="MAX-WIDTH: 100%; BORDER-TOP: rgb(230,230,230) 1px solid; HEIGHT: auto; BORDER-RIGHT: rgb(230,230,230) 1px solid; VERTICAL-ALIGN: middle; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: rgb(230,230,230) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); PADDING-BOTTOM: 16px; TEXT-ALIGN: center; PADDING-TOP: 16px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; PADDING-LEFT: 16px; BORDER-LEFT: rgb(230,230,230) 1px solid; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 16px; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461112.jpg"><h4>最终设计效果:</h4> <img alt="畅游VC-暗影之剑" src="http://www.webjx.com/files/allimg/131216/20461113.jpg"><p>体验地址:<a target="_blank" href="http://db.changyou.com/concept/index.shtml">http://db.changyou.com/concept/index.shtml</a></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">上线效果:</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">上线当天页面超过50W玩家体验网站,并且好评率超过95%。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">总结:</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">首先感谢FLASH和重构同学对页面高度还原,让原本静态的页面变得活灵活现。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span style="COLOR: rgb(128,0,0)">重体验:</span>要站在用户的角度进行设计,了解用户最期待的那个点,快速有效的进行传达。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span style="COLOR: rgb(128,0,0)">重沟通:</span>作为设计师,不是拿到需求就闷头做,多和项目组进行沟通,及时了解彼此的需求,毕竟一个人的想法是片面的,创意经常会在谈话之间迸发。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span style="COLOR: rgb(128,0,0)">重思考:</span>多思考、多分析、让每一次的设计改变都有理有据。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><strong style="FONT-WEIGHT: bold">个人不足:</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">第一次尝试这种互动站,尽管还算顺利,但是还有很多细节需要提升,比如最后定帧画面的细节问题,女BOSS呈现比较仓促等等。希望能下一次设计中避免这些问题。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(82,82,82); FONT: 1.2em/1.8 Tahoma, Verdana, 宋体; MARGIN: 20px 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">作为一款新游戏,在网络游戏发达的今天,要想玩家对游戏产出期待感,确实不是一件容易的事情,只靠游戏原画去宣传游戏已经不能满足玩家了,这时就需要我们运用新的思维,新的技术,新的创意,让玩家接受并能游戏产生期待感!</p>

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 17

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

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

    Read more +
  • 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 +