《
网页中的“复制链接”该如何设计》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234H32013.htm
（图5：google文档）
<script type=”text/javascript”>
document.getElementById(’foo’).onfocus = function() {this.select();}
</script>,网页中框架、布局、模块、列表和数据块的表现技巧;
让我们开端第一个故事吧——
2.相相似的功能拥有雷同的视觉权重
设计“复制链接”功能时候，首先思考用户的使用场景以及用户可能会用它做什么，其次必定要让用户理解这个功能可以用来做什么的。最后，优良的设计还应该给用户一个惊喜。在我收集例子的过程中，photobucket的“复制地址”设计确实给了我不小的惊喜。
我个人以为“复制链接”属于情境式链接，Peter Morville在《web信息架构》中提到“情境式链接必需十分直接而有意思……假如你点选下去，就晓得会看到什么货色。这样高度有代表性的标签，会通过它们的情景而更加清楚：存在阐明性的文字、明白的题目，以及网站自身就有的直接明了的用法。”
当你细心斟酌过用户的应用场景，你应当就很明白怎么设计复制链接了。像图6一样将内容主题包括在分享信息里对那些通过IM来分享的用户确切不错。
设计它的进程，要记得让用户留神得到，或者是在用户想寻找的时候知道在哪里寻找，这一点很主要。举个例子，如果是一篇blog页面，不要让“复制链接”的 文字大小超过blog注释内容，也不要让复制链接区域太显著，甚至于干扰了最中心的文章内容。
3.帮用户想的更多：
不要使用什么词语
当你想将一个网页（或网页中的主体内容)分享给别人的时候，这时它的呈现可以节俭用户的时间。
（图6：新浪博客 ）
我个人认为在不同的情景中应该用不同的中文词语，然而界面上不要有其它词语干扰了用户的懂得，图4是某博客一篇文章的局部截图，你能立即说出来，高低两个“分享”有什么差别吗？
我们冀望通过用户研究角度的思考，带给设计师一点点启示，并且将我们在研讨中发现的问题，固化在设计模式库中，以便今后不再出现同样的问题。当然，作为休会剖析师，我们对交互设计和视觉设计懂得得不够高深，还不能像设计师一样掌握名目中的种种束缚，所以，这个系列的内容可能还比拟浅显，更着重于“贸易-技巧-用户”三者中“用户”这个角色的直接主意。
有一个网页上典范的细节，它如斯轻微以至有时设计师在项目标最后时刻才记得挤一个地位给它，但它又如此常见，在不少网站的详情页面不经意就出现了；咱们在软件中不常见到它，但在超文本世界里，在互联了朋友的世界里，它却时而闪现——它就是“复制链接”，英文别号是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL（如图1）。作为设计师，你曾经注意过它吗？
2.某些情形下，缺少明确含义的词语：
使用它时注意什么
点击它之后，会出现什么？
《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、视察用户的操作之后，作为体验分析师的我们总是会感叹：“为什么有些细节设计看似已经很背眼了，用户就是没有注意到？”、“为什么用户偏偏要那样去理解？”、“用户在那个流程中为什么陷入迷惑，甚至不能完成任务了？”，然后，我们会思考这界面背地的起因，分析用户当时详细说了什么，是什么原因导致用户那样理解……这个过程需要异常谨严的思考，因为向设计师反馈的任何一个词语都会导致不同的设计。同时，这个过程也令我们无比享受，如果说设计就是解决问题，在可用性测试之后的分析时间就是分析师的“设计”时间。
（图9：photobucket.com ） 总结
（例1）
图3是淘宝社区的一个反例，输入框和按钮多在表单中出现，这个组件老是比一般文字要显明的，它出当初社区内容的底部，可能会烦扰用户对后几段文字的浏览。
举个例子，如果用户想把文章分享给朋友看，那么将这个功能放置在文章的邻近而不是评论的附近更适合。可能这么说，有些人会想“那当然是文章附近更好了，谁会把它设计到评论四周呢”，但有时在文章下面参加了一个横幅广告之后，它就与评论而不是文章更相近了。
（图4：某门户博客）
另外，在使用输入框复制的设计中，是不是可以考虑当用户点击了输入框，用脚本自动全选了全部输入框的内容（例1），而不是让用户从左至右按住左键拖动鼠标，进行全选。 <input type=”text” id=”foo” />,
网页中层的固定实现代码;
Tag：复制链接 复制链接
另外，我们的思考起源于淘宝或其余网站各位设计师的设计，所以，有时可能会拿来作为反例，还请各位设计师见谅。我们尽可能拿本人网站的例子作为背面教材，如果在反例中波及了你的网站，还请多多包涵。
我想，不最佳谜底，文字跟你的网站气质以及用户使用处景非亲非故，文字亦是设计师的利器之一。
（图3：淘宝社区）
（图2：某视频网站 ）
“复制链接”只是这篇文章中我对这类链接的称呼，而不提议直接采取这个名称，仅仅用4个汉字很难表白出来复制之后要做什么，用户会想“我为什么不能直接复制地址栏或是点击鼠标右键复制呢？”，“我点击它可认为我带来什么？”。在某些情境下，“复制图片链接发送给挚友”也许是更直接、清晰。更进一步，如果你通过考察，发明良多用户是通过淘宝旺旺传递图片地址的，那么，更好的抒发方式可能是“复制图片地址发给旺旺挚友”。
翻翻看你的网站人物角色（或是网站的点击日志），他们常用什么分享给朋友——是通过IM、Email仍是其它，那么请凸起最重要的那一个，如果将多个类似的功能平铺在一起，恐怕会违反“别让我思考”的准则。看图2中播放器下面第二排前几个链接：“站外援用”、“发送聊友&rdquo,网页中CSS样式切换的实现;、“转发”，三个功能都具备分享的含义，并混淆在9个链接中，我不得不停下来想想，“我要点击哪一个呢？”
3.不要让它本身显得太喧嚣
1.“共享”：
用什么中文词语来描写它？
1.不用在一个页面屡次出现
（图7：flickr网站 ，用户点击分享之前）
（图8：用户点击分享之后）
它出现在页面的哪个位置？ 在可用性测试的筹备阶段，我们这么带着这样的问题去察看：“用户对某个东西感兴趣的时候，他知道去哪里找它吗？”和“用户点击了它之后，他清楚在做（复制或分享）什么吗？”，前一个问题意味着它的可寻性（findability）是否足够好，后一个问题象征着这个位置能不能与他想做的事件接洽起来。
通常，它出现在一个网站的内容详情页面，比方视频网站的播放视频页面、博客网站的博客文章页面、照片网站的照片详情页面、购物网站的商品页面等等。就拿博客网站为例，它的出现仿佛在说，“兴许你的友人会对这篇文章感兴致哦，点击我，而后分享给朋友看看吧！”
1.要考虑“复制链接”的内容
（图1：youtube ） 它什么时候出现更合适？
设计师既要在设计过程记着它，但也别太惦记它了。只在需要的时候提供它，即便页面很长，也没有必要像“立刻购买”按钮那样在页面的第一屏和最后一屏出现两次，由于“破刻购买”可以让用户进入到下一个步骤实现购置，而“复制链接”只是一个次要的义务，大部门为对它感兴趣的人使用。
共享含有共享编纂的含意，常在wiki中使用。所以使用它可能会发生歧义。
2.让分享中的内容满意用户的须要：
如果用户对复制链接有多种需要，那么不妨设计多种复制道路。学习一下flickr的设计（图7、图8），它如何在多种复制链接中，坚持了清晰的逻辑关联。（当然，其中默认第一项通过邮件分享可能对美国人更常用，对中国用户就另当别论了 ）
分享一个photobucket的例子（图9），当鼠标上移到图片时，就会出现灰色的浮动层（这是改进过的设计，底本是灰色层始终存在），让用户复制。鼠标点击到包含地址的输入框里，体系会主动复制好其中的链接，并在输入框前涌现多少秒钟的“copied”提醒。这种方法既能做到供给反馈,网页中 返回顶部链接 的人性化设计，又不会有alertbox的僵硬感。
我想你已经猜出来了，上面的“分享”是名词，下面的“分享”是动词，所以在使用一个既能够是动词也可以是名词的词语时候，要谨严一些。另外，我倡议设计师时刻考虑到“此时此刻”那个时点， 设想用户是从搜寻引擎过来的，他不清晰你的网站的构造、功效,网页tab（标签）使用注意事项，他一下子来到了你设计的某个页面，他来了、他时光有限、他可不乐意思考太多，你的网站能通过那一刻就让他高深莫测吗？
--> [
网站建设之]网页中的“复制链接”该如何设计
你还发现了哪些更好的例子呢，欢送告知我！
(责任编辑：网站建设)
网页中的“复制链接”该如何设计相关文章