每次体验一个网站的时候，打动人心往往是那些细节上的体验。在这里做个记号，以便以后查看。

爱护用户的“鼠标手”

一、光标输入焦点初始化

每天受伤较多的除了眼睛就是我的右手， 老是要在键盘和鼠标之间切换，老是要做光标的定位操作，老是… 现在很多网站很贴心的会把鼠标光标默认在某输入框内，以减少该行为的操作步骤。 常用到就是搜索输入框，如各大搜索网站的首页，都会默认把光标定位在输入框内。 还有一种情况就是表单页面，如注册， 登录， 发表日志等页面，会把光标定位在第一项表单元素 。 

如：网易邮箱的登录页面 

二、“就地”解决

曾经“弹窗”让我们可以在同一个页面里解决很多需求，实现了“足不出户”，后来渐渐的被赋予了太多的功能，久而久之“名声”显得很不好。在这里要讨论的是数据操作这一类的弹窗展现形式。如用户提交“删除”请求时，会有个确认的对话框。一般情况下是，对话框会出现在屏幕的正中央，用户的鼠标需要前进一段“道路”才能定位到操作对象。我们的手很多时候就是在做这些“移动”的操作。 

再看看QQ的微薄“确认”操作，显得轻巧很多，更主要是用户几乎不需要再次挪动鼠标，就可以“就地”解决。 

其实这一点在著名的“费茨法则”里也早就提到了。 

“温馨”的提示 

一、必要的“干扰”提示

提示过多，表现形式过于复杂，都会干扰到用户的体验。但有一些提示，如一些没有进行数据提交就离开页面的提示，就显得很有必要，避免了因误操作而给用户带来的损失。

下图是网易邮箱没保存/发表下，离开写信页面的提示。但很多网站都忽略了这点。

二、“动画类”的反馈提示

我们经常用“文字”来传达提示的主要内容，用“颜色”属性来对比突出，但随着技术的发展，更多新颖的交互模式得到广泛应用，“动画类”的提示就是一种。

下面看一下具体的实例：

搜狐白社会的打卡成功提示：

新浪微薄的发表成功后的划出效果：

上面的提示比“文字”类提示显得更形象，更有趣味性。

这次就写到这里，下期再会。

所以

一些过程 

1、学校里的另类：读得专业五花八门， 工业设计， 视觉设计算是比较沾边了。大学里很难学到实际可操作技能，所以“正经”课一般很马虎， 沉静在自己的世界里。

2、实习期的迷茫：能进大公说明你有一定的实力， 运气可能也是一部分。一般是创业公司， 企业建站，批量化生产的需求， 期间更多是加深对美工的认识， 软件技能或许会有质的提高。

3、毕业后的蹉跎：能坚持到现在还在做的话， 应该不是业余爱好者， 会抱着满腔热血，意淫自己能在互联网刻上自己的大名。但理想跟现实总有差距的，拿着糊口的工资，又要设计， 又要切割，还要接受公司各阶层的指导。会怀疑自己的能力，怀疑是否进错了这个行业。

4、转变：工作2-3年后是一个分水岭，你会考虑自己的职业规划，或转行，或就近的转岗，或继续奋斗在设计的路上。 有了一些对设计的沉淀，有了一些自己对产品的看法，有了些对生活的思考，总之在成长。  

以上更多是本人的一些“道听途说 ”请勿联想。

一些变化

 1、称呼变化 ：早期的美工，网页设计师，UI设计师，视觉设计师，交互设计师，最近听到比较多的是用户体验师。很多公司为了跟进时代的变化，名称也会做相应的调整， 但杯具的是更多只是形式。

2、工作内容变化：早期套模板，简单的切图就可以混日子，但现在不行了，你要关注用户，关注产品形态，关注用户体验。 

但很多还没变，如社会认可度（介绍自己是美工比较容易让人理解），薪资待遇（行业整体）…

一些毛病

设计前的功课不到位 

设计师负责的表现层是用户感官上最直接的体验。如果设计师理解有误或有变差，都会造成产品的打折，传达的信息不到位。所以在前期产品的需求分析和规划阶段， 设计师一般都应参与进来，融入到产品的开发流程，而不是自己定位成美工的角色。 

感性的设计 

设计师设计时会不知不觉融入自己的情感，倾向使用个人喜欢的表现形式，慢慢的形成所谓个人风格。但对于产品来说，最终的受众是我们的用户，而不是设计师本人。所以应该时刻做到“心存用户”,感知用户所期待的。 

缺乏产品意识

产品是有生命力，是有情感，是需要满足用户的需求。而设计师会经常陷于单个页面的表现，把所谓潮流的表现形式加强到自己的设计稿里，而忽视用户使用场景，忽视产品所要表达的核心功能，造成形式与功能的脱节。

以上是本人近期在工作中的体会。

如何提高响应速度

其他途径：

 

UI设计模式是针对设计中某类具体问题的的概括性的解决方案。在提高设计效率的同时，也可以减轻用户的认识成本。

这次《实站》主题就是介绍线上比较著名的UI设计模式网站。

1.    理论型  

雅虎设计模式库

网址：http://developer.yahoo.com/ypatterns/

介绍：这个业内比较著名的，也是传播影响较大的设计模式网站之一， 基本每个模式会从“是什么” “什么时候用”“怎么用”“为什么要用”方面进行阐述。 

ui-patterns

网址：http://ui-patterns.com/

介绍：除了基本理论结介绍外，还有图片的举例说明。可以跟雅虎互补浏览一下。

2.    实例型（图片截图为主） 

Pattern Tap

网址：http://patterntap.com/

介绍：网站现有45个模式外，还有页面风格的标签分类，例如简洁，可爱，明亮等。而且更新较快，是设计师的建议浏览网站之一。

UI设计模式库

网址：http://www.dingzhijun.com/pattern

介绍：这是个人自己建立的设计模式库。主要是自己喜欢作品的截图，对其进行了初步分类。由于技术有限，用wordpress进行搭建，体验起来不是很顺畅。目前资源还很少，但会持续更新请关注。。

其他资源

1. 40+ Helpful Resources On User Interface Design Patterns

2. Designing Social Interfaces

3. Patterns in Interaction Design

书籍: 《Web界面设计》     《网站交互设计模式》

上期主题：让你意想不到的搜索

目标越远，鼠标到目标所花费的时间就越长。

目标越小，鼠标到目标所花费的时间就越长。 

所以要让用户比较容易的完成操作，我们在设计界面时应该让目标够大，离鼠标所在位置够近。 

目标距离

较容易操作的示例： 

在新浪微薄的很多细节交互中做的很人性化，比如这个音乐的浮层就在当前鼠标位置的下方，用户无需移动较远的距离就可以把鼠标的光标定位到文本框。 

看看我们19楼编辑器的插入音乐效果，浮层是在浏览器窗口的正中间。用户需要移动较远的距离，这样就显得费劲了。 

在我们导航中公共会所的下拉菜单也存在这样问题，如果用户想要点击最右边的频道就要滑动接近一个屏幕的宽度，如果划出该区域，又要重新单击公共会所的链接。 

目标大小 

在这次大改版中，我们对原来的翻页模块进行了改进，原来让人抓狂的小方块，变得大了，距离也拉开了，操作也就方便多了。 

在一些较小的目标时，也可以用代码建立一个比目标大的<a>链接 。

如果不遵守菲茨法则，也不会给用户的操作带来很大的阻碍。但细节中的交互改进可以让产品更加易用，让用户更加愉悦。

扩展阅读：Windows 设计规范中的鼠标交互

现在的味道还是很重， 整体还是有点乱，但是够宽敞， 离自己住的地方很近了。

放图几张：

在19UED可以查看更多

末尾奉上公司内部爆红的”罩兄”主演的视频—《都市房坚强》

用惯了google, baidu来寻找相关的信息， 但一些小型的，垂直的的搜索或许对你的工作带来很多便利。

第一期的《实站》分享自己平时经常用到的有意思搜索网站：

1.图标搜索: Iconfider

网址：http://www.iconfinder.net/

介绍：输入相应的英文单词 ,你可以检索到不同尺寸的图标, 数量很丰富， 基本可以满足设计师的要求。目前还不支持中文的检索。

ps:网站本身的交互也做得很人性化, 大家可以体验

2.寻找相识网站：SimilarSites.com – Easily Find Similar WebSites

网址:  http://www.similarsites.com/

介绍: 产品开发的前期可能会需要对竞争对手进行分析，在这里你可以输入自己的网站，你的竞争对手就会出现在结果里。

谢谢红茶的分享

3.根据颜色搜索图片:Multicolr Search Lab

网址：http://labs.ideeinc.com/multicolr/#colors=db5758,c48922

介绍：可以选择一种或多种颜色，来搜索相应的图片。你会发现世界在这里确实是丰富多彩。

 4.绿色搜索：The Green Search Engine

网址：http://www.greenplanetsearch.com/

介绍：网站采用flah技术，风格华丽，炫目。能把搜索做成这样是我推荐的原因。

欢迎大家的补充。

备注：《实站》旨在分享那些充满活力创意的实用的网站/应用/设计工具,每期一个主题，希望在这里你能找到有用的信息。

下期主题：设计模式网站介绍

视觉设计是产品开发过程中的一个重要的环节，也是用户最直接感观的。

个人根据设计的过程做了一个简单的分析。

1.设计前

了解产品：你可能是流水式的下单作业， 也有可能是项目制的作业，但对产品的理解是做好设计的前提。

竞品分析：主要是从交互方式、视觉层面的吸取。平时多看，多积累，动手时脑海里才有活跃的思绪。

2.设计中

对于视觉方面，很多公司都有一套自己的规范来维持风格的一致性，来加深品牌识别度和减少用户的认识成本。所以这里对视觉元素的具体表现不加以阐述，主要是写一下自己工作中的体会。

颜色：根据产品的性质，用户的人群定位， 还有所处整个体系的位置等，来筛选确定颜色的方案。如果页面很跳， 不“和谐”，加点灰色或许会有惊喜的改观。分享几个颜色工具：Color scheme    COLOURlovers  

文字：一般是12px、14px宋体来做正文，黑体,微软雅黑来做标题或需突出的信息。数字时可以考虑用英文字体，比中文的舒服。这时需要考虑留白、层次分明、与图片的混排、还有整齐，这些都有利于阅读，信息的摄取。 

按钮：如果需要突出可以考虑与主色相对应的对比色，设计时需作出鼠标的各种交互效果。 

布局的分割：个人是把它分为色块和带标题栏的线框这两种方式。国内的大部分网站很多是带标题栏的线框模式再在局部加点色块来调和。 

整体：个人是理解为各个视觉元素组合在一起形成的页面后感受。如：清爽、大气、简洁、平淡。在选取视觉呈现形式上都要往整体去靠， 才可以体现出中心的关键词印象。“想法”太多页面就会“三不像” 

把页面做成“动”的：我想设计师不仅仅是做美化的任务，应该在设计时考虑到各种交互状态效果：页面加载、鼠标的操作、Tab、反馈、浮层…所以在高保真效果图的交付物里，应该包括交互状态的页面。 

3.设计后

检查html页面是否还原效果图的原貌；

上线后跟踪用户的反馈，配合相关人员进行修改迭代。

最后推荐两本书：

《写给大家看的设计书》    

《Web视觉设计》

或许会有一些收益

 百度百科： 隐喻是在彼类事物的暗示下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为。 不仅仅是一种视觉形象语言， 更重要的是一种视觉设计思维。

 好处：易识别， 易记忆， 通用性强 

 2.       隐喻的分类：   

具体隐喻：从隐喻对象的“物“出发，

举例：图标 

结构性隐喻：信息架构, 交互流程 

19楼：真实、丰富、温暖的网上城市，网上银行， 财富系统，楼层，不动产

全国首创的同时拥有网络公共会所、个人空间、商业区、互助公社等社区功能的全新“网上城市”。 

功能性隐喻： 从隐喻对象的“能”角度出发， 把你在计算机环境下的所作的工作同你在其他环境下所作的工作联系起来。

举例：   

语义：最高的，最上的及最高最上的部分：～点。头～。山～。～巅。～尖。

支持，赞同和欣赏的意思。多见于跟帖，表示对发贴者的观点理解和赞同。 

后来各大论坛逐渐完善了精品帖子置顶的技术，导致“顶”字又具备了一种推荐阅读的意思。

举例：19楼bb大卖场的千金鼎服务 

3.具体的应用(具体的隐喻)

图标：已经被大家认知

现实的事物	图标	表达信息
信封		邮箱， 联系
文件夹		文件
放大镜		搜索
房屋		首页

导航：  

歌唱比赛的专题网站， 运用了舞台的铁架 

唱片公司的网站， 导航借用现实生活中的事物

肌理：

中国元素的水墨

布局(视觉结构)： 

 卖T恤的电子商务网站

4.如何使用

a.选择合适的隐喻对象

根据用户的需求，产品的定位，建立起相应的功能模块, 然后联想现实世界中的事物（包括具体的和抽象的）

b.要遵循一致性的原则

c.避免滥用隐喻

不要为实现某种功能而强制用隐喻这种方法，也不要强制某种隐喻去适应某种功能

   图标被毫无节制的滥用，那些原本有价值的图标被淹没在众多“网页设计素材”中。 把图标当作页面上的装饰元素