在线
客服

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

客服
热线

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

?

关注
微信

关注官方微信

返回
顶部

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+