让酷炫的文字交互效果点亮你的网页
在网页设计中，如果网站主页色彩处理得好，能让整个网站锦上添花。而一些交互效果的巧妙使用，不仅让网页瞬间亮起来，甚至在提升用户感知度和感官体验上可以起到无可替代的作用。
我们这里所说的交互主要是指，用户通过鼠标的悬停、滑动、单击、拖动等交互方式来触发事件，与目标对象产生互动。
本系列文章关于网页文字设计，我们就先分享文字的交互效果。
文字交互过程的场景应该是这样的：
一个用户在浏览一个网页时，注意到某些文字，当他用鼠标悬停、滑过、单击、拖动（交互行为）与文字（交互对象）互动时，看到文字发生了变化（交互反馈）。
这些变化可以是字体大小变化、颜色发生改变，也可能是一些动态效果。好的交互效果能引起用户的好奇心，增加他们浏览网页时长，让他们对你的网页印象深刻。
说到文字颜色的变化，这里分享三个关于网页文字颜色的小规范：
同一个网站需要定出主文字颜色，特殊情况可以有2种左右的辅助文字颜色。
正文的文字颜色为深灰色，建议选用#333333到#666666之间的颜色，若选用其他文字颜色作为正文主色调时，安全起见可采用明度不大于30%的颜色。
蓝色的文字一般会在绝大多数超链接位置使用，其他地方应谨慎使用。
最最重要的一点是，规范可以灵活应用，但一定要考虑网页的整体配色。
下图是常用文字颜色推荐，可做参考：
接着正式介绍几个文字交互效果的案例。
1.文字颜色变化和下划线
鼠标悬停时，文字颜色发生变化和出现下划线很多时候用于网页中的超链接，虽然大部分网站会将超链接文字颜色设置成蓝色带下划线的样式（常规、传统、用户习惯、易读性高），但这并不是唯一的样式。
超链接除了需要在大段文字中脱颖而出，还应该考虑用户的阅读体验。很多网站的超链接设计在提升用户体验上在不断优化创新。
在MM’s的活动网站中，按钮中的小图标本身就有动态效果，很容易吸引人的注意力。
当鼠标悬停在按钮文字上时，文字颜色和图标发生变化，用户能明确这是一个链接。这类效果让用户体验到和网站的互动，同时它还有一种号召力，暗示并鼓励用户去点击尝试。
而在苹果官网中，超链接的效果是鼠标悬停时文字出现下划线。
虽然没有特别设置文字颜色，但文字右侧的小箭头有一个引导作用，让用户明白这里可以点击。当我们把鼠标放到文字上时，文字底部则出现一条和文字同颜色的下划线，强化了链接的特征。
以上两个案例分别采用了超链接的典型特征，即鼠标悬停时文字颜色变化、文字出现下划线，这样的形式可以实现与用户的良好互动。
2.出现新信息
在十年后网站中，这一部分设计展示了各个分类的名称，当我们将鼠标悬停在某个分类下，交互中会出现新的文字信息，然后文字整体向上移动，向用户展示了各个分类的热门程度。
如下图：
当用户第一眼看到这部分时，版块内容干净清晰，他可以直接点击进入自己感兴趣的分类，而当他不知道选择哪个分类时，可以通过鼠标悬停获取新信息，以此了解每个分类的热门程度。
网站显得动感，还为用户提供了一种选择方式。
3.按钮效果
AnyForWeb网站头部“关于我们”的设计为按钮样式，原本是红色线框红色文字，鼠标悬停时则变为白色文字和红色按钮的样式。
这样悬停效果展现了网站上独特的小细节，用户不经意发现后，感受到一种趣味交互的体验。
4.文字悬停动态效果
下面是网上几个典型的文字Hover悬停效果，希望能给设计师一些灵感。
在实际网站设计中，很多酷炫的交互效果都出自国外网站，他们注重交互设计和用户体验，并在这些领域比国内发展得更早。不过目前国内有些公司也开始这一块，一些新的中文网站开始出现很好的文字交互，成功吸引了很多用户。
具备好交互的网站一定会越来越受到用户青睐，也将会成为网页设计的发展趋势。
所以咱们设计师也要赶快行动，通过不断的学习和尝试积累，再用一些些适用的小创意， 让我们设计的网页Bling~Bling~
本文最初由AnyForWeb UED发布，转载请注明出处。
了解更多动态请AnyForWeb和AnyForWeb UED的官方微博微信！
原文作者：尛沫尛沫
站酷
绛旓細涓涓敤鎴峰湪娴忚涓涓綉椤垫椂锛屾敞鎰忓埌鏌愪簺鏂囧瓧锛屽綋浠栫敤榧犳爣鎮仠銆佹粦杩囥佸崟鍑汇佹嫋鍔紙浜や簰琛屼负锛変笌鏂囧瓧锛堜氦浜掑璞★級浜掑姩鏃讹紝鐪嬪埌鏂囧瓧鍙戠敓浜嗗彉鍖栵紙浜や簰鍙嶉锛夈傝繖浜涘彉鍖栧彲浠ユ槸瀛椾綋澶у皬鍙樺寲銆侀鑹插彂鐢熸敼鍙橈紝涔熷彲鑳芥槸涓浜涘姩鎬佹晥鏋溿傚ソ鐨浜や簰鏁堟灉鑳藉紩璧风敤鎴风殑濂藉蹇冿紝澧炲姞浠栦滑娴忚缃戦〉鏃堕暱锛岃浠栦滑瀵浣犵殑缃戦〉鍗拌薄娣卞埢銆
绛旓細榧犳爣鎸変笅鏄竴涓灛闂寸殑鍔ㄤ綔锛屽嵆鏃跺搷搴旓紝鏄疉xure鐨浜や簰鏍峰紡锛涜岄紶鏍囬暱鎸夋槸鏈夋椂闂磋姹傜殑锛岃姹傞紶鏍囨寜涓嬩竴娈垫椂闂村悗鎵嶅仛鍑哄姩浣滃搷搴旓紝鏄疉xure褰撲腑鐨勪氦浜掍簨浠躲傞変腑浣滀负閫夐」琚敤鎴烽夋嫨鍚庢墍鍛堢幇鐨勮瑙夋牱寮忋傚父鐢ㄤ簬鍗曢夈佸閫夈佸鑸佹爣绛剧殑浜や簰璁捐銆傚綋鎴戜滑璁捐鍗曢夌殑閫変腑鏁堟灉鏃讹紝棣栧厛闇瑕佸皢杩欎簺閫夐」璁剧疆鎴愪竴涓粍銆...
绛旓細浠讳綍璁捐浣滃搧閮借浼犺揪淇℃伅浼犺揪鎬濇兂,濡傛灉涓濂楄璁′腑瀛椾綋涔卞暘鍟,鏂囧瓧澶у皬鍜屾枃瀛楃矖缁,闂磋窛琛岃窛閮芥病鏈変竴涓滀富娆￠昏緫鈥,鎴戝緢闅炬寲鎺樺埌鑷繁鎯宠鐨勪俊鎭,涓嶈璁捐鏄閰风偒澶嶆潅鐨勮繕鏄畝娲佹竻鐖界殑,鍏夎兘灞曠幇淇℃伅鏃惰繙杩滀笉澶熺殑,淇℃伅鏂囧瓧鐨姣忎竴涓粏鑺,閮藉喅瀹氫簡涓涓璁¤浼犺揪鐨勬濇兂涓绘,璁颁綇,浣犳槸瑕佸紩瀵煎埆浜哄幓鐪,鑰屼笉鏄埆浜哄紩瀵间綘鍘...
绛旓細寰晢娴锋姤鍒朵綔杞欢鏄竴娆惧勾杞绘椂灏氱殑鍥剧墖缂栬緫宸ュ叿,閫氳繃寰晢娴锋姤鍒朵綔杞欢璁╀綘鐨勭収鐗囨壘鍒拌嚜宸辩殑璁茶堪鏂瑰紡,寰晢娴锋姤鍒朵綔杞欢閰风偒鐨婊戝姩鍔ㄦ佹樉绀鏁堟灉,鐬棿璁╀綘鐨鍒嗕韩楂樺ぇ涓,寰晢娴锋姤鍒朵綔杞欢鏇存湁鏂囧瓧銆侀煶涔愩佽棰戠瓑娼祦鍏冪礌,鍒嗗垎閽熸墦閫犱綘鐨勬晠浜! 鍔熻兘浠嬬粛 1.鏀寔N澶氬湪绾挎按鍗版ā鏉! 2.鏀寔浠庣浉鍐屼笂浼爈ogo浣滀负姘村嵃! 3.涓娆″鐞100...
绛旓細鐣岄潰浜や簰鏁堟灉鏄敤鏉ュ共浠涔堢殑锛熻鐢ㄦ埛娓呮櫚鎰熷彈鍒板綋鍓嶅満鏅拰灞傜骇鍏崇郴.鍚勭UI鍏冪礌涔嬮棿鐨勮浆鎹.缁欑敤鎴峰垱閫犳儕鍠滄劅,璁╃敤鎴峰紑蹇.鐣岄潰浜や簰娉ㄦ剰浜旂偣.閬垮厤杩囦簬鑺卞摠銆閰风偒銆佹柊棰栫殑鎯虫硶.鍦ㄩ珮鏁堢殑搴旂敤涓,杩囧鏃犳剰涔夌殑鍔ㄧ敾鍙細闃诲浠诲姟娴.鍔ㄤ綔鏁堟灉涓嶅緱瓒呰繃1绉.褰撶敤鎴峰叧娉ㄥ唴瀹规椂,涓嶈涓哄惛寮曟敞鎰忓姏鐨勫姩鐢昏岀儲鎭.鍑虹幇楂橀鐜...
绛旓細1銆浜や簰娴佺▼鍥句腑锛屼富瑕佸寘鍚洓绫绘敞瑙ｏ細妯″潡鏍囬銆佺晫闈㈡爣棰樸佺晫闈㈡敞瑙ｃ佹祦绋嬬澶存敞瑙ｃ2銆佹ā鍧楁爣棰橈細涓鑸槸涓诲共娴佺▼鐨勫姛鑳藉悕绉帮紝濡傛柊鐢ㄦ埛娉ㄥ唽娴佺▼銆佸厖鍊兼祦绋嬬瓑銆3銆佺晫闈㈡爣棰橈細鍗虫瘡涓晫闈㈢殑鍚嶇О锛屽鍚姩椤点佺櫥褰曢〉绛夛紝鍙睍绀哄湪姣忎釜鐣岄潰涓婃柟锛屽苟闄勫甫缂栧彿銆4銆佺晫闈㈡敞瑙ｏ細鏄氦浜掑浘涓渶閲嶈鐨勬枃瀛鍐呭锛屼竴鑸睍绀哄湪...
绛旓細璁叉晠浜嬪叾瀹炰篃鏄璁＄殑鍩烘湰鍔熴備娇鐢ㄥ彲闈犵殑鍐呭鍜屾紓浜殑鍥剧墖灏嗙敤鎴蜂粠A鐐瑰紩瀵煎埌B鐐癸紝宸茬粡琚瘉鏄庢湁鍒╀簬缃戠珯鐨勮浆鍖栫巼銆備娇鐢ㄥぇ骞呭浘鐗囧拰瀵屾湁璐ㄦ劅鐨勬枃瀛鑳藉璧嬩簣鏁翠釜椤甸潰浠ョ敓鍛藉姏锛岃瀹冩洿鍔犳湁瓒ｏ紝浠ょ敤鎴锋効鎰忎笌涔嬭繘琛屼簰鍔ㄣ傞殢鐫楂樺垎杈ㄧ巼璁惧鐨勬櫘鍙婏紝杩欎簺鎷ユ湁楂樻竻澶у浘鐨勭綉椤浼氳交鏉捐濂界敤鎴风殑鍙岀溂銆傛俯棣/鍔ㄤ汉/鐪熷疄鐨勬晠浜...
绛旓細澶у皬锛611.80M 璇█锛氫腑鏂 骞冲彴锛氬畨鍗揂PK 鎺ㄨ崘鏄熺骇锛堣瘎鍒嗭級锛氣槄鈽呪槄 娓告垙鏍囩: TOUCH鑸炲姩鍏ㄥ煄 闊充箰娓告垙 360鐗坱ouch鑸炲姩鍏ㄥ煄鎵嬫父鏄竴娆句互闊充箰鎼厤鑸炶箞鏉ヨ揪鍒扮粴鐑鏁堟灉鐨鎵嬫満娓告垙锛屾父鎴忎腑鎷ユ湁浼楀闊充箰锛岀帺瀹跺彲浠ヨ嚜琛岄夋嫨闇瑕佽烦鐨勯煶涔愯繘琛岃垶韫堟搷鎺э紝浼楀鐨勯楠煎姩鐢昏垶韫堬紝璁╀汉搴旀帴涓嶆殗锛岀敾闈㈡晥鏋滄惌閰...
绛旓細寰捣鎶pp鏄竴娆炬墜鏈哄浘鐗囩紪杈戝伐鍏,鍙互鑷繁瀵硅嚜宸辩殑鍥剧墖杩涜缂栬緫,濡傚嚑寮犲浘鐗囨嫾鎺,鎴栬呮坊鍔鏂囧瓧绛夌瓑,璁╃収鐗囨壘鍒拌嚜宸辩殑璁茶堪鏂瑰紡,閰风偒鐨婊戝姩鍔ㄦ佹樉绀鏁堟灉,鐬棿璁╀綘鐨鍒嗕韩楂樺ぇ涓,鏇存湁鏂囧瓧銆侀煶涔愩佽棰戠瓑娼祦鍏冪礌,鍒嗗垎閽熸墦閫犱綘鐨勬晠浜嬨傜畝鍗曠殑娴锋姤璁捐鍒朵綔杞欢鏈夊摢浜 1銆佹捣鎶ュ伐鍘:涓娆剧敱缇庡浘绉绉鍑哄搧鐨勫浘鐗囧鐞...
绛旓細浼氾紝鑰屼笖寰堝ぇ绋嬪害涓婂奖鍝嶃備絾鏄牴鎹綘鐢ㄦ埛纭欢淇℃伅鐨勪笉鍚岋紝浣犲彲浠ヨ璁′笉鍚岀殑鏍峰瓙銆傛瘮濡浣犵殑鐢ㄦ埛閮界敤鑻规灉7鐨勮瘽锛鐐叿涓浜涗篃鍙互锛屼絾鏄鏋滀綘鐨勭敤鎴锋瘮杈冩帴鍦版皵锛屾曟槸瑕佹兂涓涓嬩簡
