ITFeed http://www.itfeed.cn 互联网产品设计开发知名博客聚合 ITFeed Fri, 03 Sep 2010 00:40:58 +0800 zh-cn 案例—减少用户的思考 http://www.itfeed.cn/post.asp?id=12590 null

·介绍
QQ空间相册的个性化利器，能对照片进行效果的优化、文字编辑等等。

从设计上使用了创新的手法，尽量减少用户的思考。其中，通过界面的特殊表现，让用户更容易学会使用。在使用的过程中，也避免了复杂的操作方式，降低使用门槛。

·定位

了解用户需求
·用户期望照片编辑工具拥有“玩”照片的成分；
·大多数用户反映，最需要的功能是旋转、裁剪、添加照片的边框；
·能给照片添加文字、装饰品；
·对照片进行颜色或其他效果优化。
…

分析用户需求
null

除了可以对照片进行简单的角度旋转，尺寸裁剪、调整；同时可以给照片添加边框、文字、装饰品；还能够进一步对照片处理亮度、模糊等等…众多功能已经足以让照片编辑工具显得复杂，并且带来的是较高的使用学习成本。

作为相册的照片编辑工具需要易学、易用。甚至只需要一些简单的优化步骤已经足够满足需求。即使是熟练使用Photoshop优化照片的用户，选择照片编辑工具也只是想方便、快速实现一些简单的个性化效果。

·设计
对照片编辑工具的要求，从基础的优化照片，到照片的特效处理，并尽可能多的个性化照片功能。但前提下需要让用户可以很容易找到基础的优化功能，界面需要直观且容易使用。当然，不是一个摆满所有功能的编辑器，并附带一份使用教程。

界面布局能让用户理解
界面设计传达给用户的亲身感受是最直接的。界面的功能太多、复杂，则会让用户在使用照片编辑工具时有很高的学习门槛。从界面布局入手，设计界面的布局结构。

简化并设计布局结构
设计照片编辑工具的界面，尝试将所有功能分布在三个不同的区域：
1.对照片的简单效果优化
2.可添加到照片上的个性化装饰
3.照片预览区

null

把所有的功能呈现在界面上，让用户逐步尝试每一个功能对照片的变动，然后再找到他所需要的功能；或者说在众多的功能下找到需要的某一个功能，也不是一件易事。若对于仅仅只是想把方向颠倒的照片旋转矫正、裁剪尺寸，会把一些多余的功能占据了照片预览区。

如何合理得地归类功能，调整一个合适的布局结构，让界面理解起来更加简单，却不会让更多个性化的功能淹没？

编辑照片，所见即所得、核心的内容则是照片预览区，其次是提供一个固定的编辑照片功能区：把所有功能集中在固定的区域，可以更容易找到。

null

功能区
依据大部分用户朴素的需求，把最常用的功能放置在最容易发现的位置。当需要更个性化照片的时候，同样可以很方便找到入口。

null

可扩展的功能区—添加装饰
考虑到“添加装饰”功能会有很多装饰品，需要一个固定并且明显的位置。照片编辑工具的核心是让用户可以在简单优化照片之余，还可以“玩”照片。所以这个区域的设计是让用户在需要的时候打开使用，通过技术上的特殊处理，同时也能让用户自行控制，切换为固定的可添加装饰的区域。

null

一个有序的学习过程
这样的界面设计让用户在第一次使用照片编辑工具时降低了门槛。界面布局的简化能让用户更容易理解，对照片的编辑、优化、等更多的操作，都能在固定的一个位置，更容易找得到。整个使用过程都是可预知的。

避免复杂操作
众多的功能，如何让用户每一个都能学会使用，也是一个棘手的问题。

例如：常见对照片的优化，都会使用复杂的“模式化对话框”（比如：调整亮度）。
null

模式化对话框“好处”
双重保险，调整到合适的效果后，再确定；不满意，取消。可避免大部分的误操作。

“坏处”
需要完成当前操作，当前的操作若不“确定”或“取消”，则无法进行其他操作，对话框被模式化，挡住了背后的其他操作。
操作越多步骤越多，每个操作都需要确定一次，显然不是每一个操作都需要，甚至会造成用户的困扰。

对于照片编辑工具，我们需要的是更简单，并且便捷的操作过程。尽量避免模式化对话框，成为设计上的禁忌；当然，并非一味想办法把模式化对话框都“cancel”。

在对功能进行归类的同时，把复杂并且容易出错的操作，是更需要“双重保险”的：比如照片裁剪功能。裁剪功能往往不是一步到位的操作，需要多次调整图片的裁剪区域并确认裁剪范围后，才会保存。若有不满意的情况，需要让用户从头再来或放弃。

null

“撤销”操作缓解了误操作
撤销上一步的操作，对发生误操作或操作后不满意的情况下，比起每次操作都需要“确定”，使用过程会更加方便。

比如锐化、对比度、亮度，这些操作都是显而易见，也是比较容易让人可以猜到的。而正当需要使用这些操作的大多数情况都是很直接的。如果对调整的效果不满意，将滑动块移回初始状态即可；由于设计上使用了下拉菜单这类型的轻量操作，在发生了误操作，撤销上一步的操作可以回到原先的效果。

比如：点击模糊功能>展开调整菜单>调整完成后>不小心点击了菜单外其他区域或转到其他功能时>菜单收起，照片效果变了。

那么此时可通过撤销操作来恢复调整前的效果：

null

…

·最后
我们将会在体验这一块不断去思考、尝试，进一步提高易用性。至少，我们的思考能减少用户的思考，会是让产品更有利健康地成长。

体验一把：qzone相册中点击照片编辑器或查看照片时点击编辑打开照片编辑器。

]]> 腾讯ISD Thu, 02 Sep 2010 15:38:01 +0800 HTML布局实战（1）-简单的半透明浮层 http://www.itfeed.cn/post.asp?id=12589 今天在写页面的时候，遇到一个效果，乍一看挺简单的，可实现过程却费了一番周折，最后还不禁完美。年纪大了，脑子也不大好转， 乘着现在还没有忘记，整理下思路赶紧记下来。

其实效果很简单，如图所示：

鼠标触发效果

默认显示的是一张图片和关注信息，当鼠标浮动到图片上时，显示一个半透明的浮层，并且有两个链接。

当时的第一感觉，这个效果可以用a:hover来实现半透明层的显示隐藏。如果层中只是纯文字，那就可以这样写结构，但现在层里是两个操作链接，html嵌套规则是绝对不允许a标签再嵌套a标签的；如果换其他标签用onclick事件来处理，这样又似乎不太语义化，看来这弹出的效果只能用js来实现了。

其实页面的结构很简单：

  1. <div class="user_info">
  2.     <a href="#"><img alt="" src="images/pic.jpg" /></a>
  3.     <p><strong>1234</strong>人关注</p>
  4.     <p><a class="attention" href="#">关注</a></p>
  5.     <div class="operate"><a href="#">TA申请的学校</a><a href="#">TA获得的offer</a></div>
  6. </div>

显示隐藏效果这里就用最简单的方法来实现：

  1. <script type="text/javascript">
  2.     function openVessel(strId)
  3.     {
  4.         document.getElementById(strId).style.display = "block";
  5.     }
  6.     function closeVessel(strId)
  7.     {
  8.         document.getElementById(strId).style.display = "none";
  9.     }
  10. </script>

稍作修改后代码如下：

  1. <div class="user_info"><a onmouseout="closeVessel('operate');" onmouseover="openVessel('operate');" href="#"><img alt="" src="images/pic.jpg" /></a>
  2. <p><strong>1234</strong>人关注</p>
  3. <p><a class="attention" href="#">关注</a></p>
  4. <div id="operate" class="operate" onmouseout="closeVessel('operate');"><a href="#">TA申请的学校</a><a href="#">TA获得的offer</a></div>
  5. </div>

加上css样式后浏览下效果：

提示：你可以先修改部分代码再运行。

这样虽然实现了效果，但感觉很怪，但鼠标触发图片，显示弹出层后，鼠标悬浮在层上的指针有明显的晃动感，点击链接也感觉很不舒服，为什么这样呢？应该是与前面的onmouseover事件有关系。这样肯定不行，如何能改进呢？

对了，还有效果没有实现，浮层是半透明的，这个貌似是很简单的，用现成的代码试试。

  1. .css {...; background:#000; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)"; -moz-opacity:0.5; -khtml-opacity: 0.5; opacity:0.5;...}

透明效果实现了，但有个问题，透明层里面的元素包括文字部分也变成半透明的，这样还是不完美。再想想，如果我们将文字部分和半透明层分开，然后像photoshop中的图层一样将各部分叠加在一起，正好可以实现我们的效果；这样的缺点就是增加了多余的代码，页面结构更复杂了。

鼠标指针晃动感和点击链接困难的问题还是没有很好的解决，不过可以使用个偷懒的方法，将a标签中的onmouseover和onmouseout事件放在最外层的div容器中，当然最根本的原因是自己的js水平太懒，赶紧学习，争取能早日将这个问题解决掉。如果哪位朋友有更好的方法，欢迎指教。

这是完整的代码：

提示：你可以先修改部分代码再运行。

==============================================

后记：

其实这篇东西是在一个月之前的，写到一半没有完成就这样放在草稿箱里一个月过去了。。。今天整理后台的时候才发现，赶紧发出来，真是惭愧。。。

© hzhjun for 大踏步走, 2010. | Permalink | No comment | Post tags: , ,

]]> hzhjun Thu, 02 Sep 2010 16:01:14 +0800 Hello! 404 http://www.itfeed.cn/post.asp?id=12588

1. 什么是404

        404是一个 http 错误代码，即请求的网页不存在。代码404的第一个“4”代表客户端的错误，如错误的网页位址；后两的数字码则代表着特定的错误讯息。就是当用户输入了错误的链接时，返回的页面。这样的目的是告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。


Google简洁的页面与的品牌精神是一致的，包涵基本的出错提示和问题描述

　　
2. 为什么需要404页面

        搜索引擎蜘蛛在请求某个URL时得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除，当然，删除过程有可能需要很长时间；而当搜索引擎得到“200”状态码时，则会认为该URL是有效的，便会去索引，并会将其收录到索引数据库。所以，自定义404错误页面不仅是增强用户体验的好做法，而且对搜索引擎也是相当重要的。
　

3. 良好的404页面应该遵循的理念

①提供简明的问题描述，用轻松的话语消除访客的挫败感，使得访客转到某个地方而不是后退。

②提供合理的解决方案，辅助访客完成访问目标。

③提供个性化的友好界面，提升访问体验。

用幽默的语言和亲切的贴纸画面打消用户的挫败感

http://dict.qq.com/404.html
　

4. NO! 拒绝乏味

        一个拥有良好设计的404错误页面可以帮你避免失去用户的信任，潜在地建立你的用户关系并能留住你的用户，使其在浏览你的网站的时间更长。下面给大家带来一些创意的404界面设计参考，希望你能喜欢它们并能从中获取灵感：

方法① ：整体一致性

404页面同样需要保留本站的基础元素，让它看起来还是你的网站，让用户迷茫的时候能够回想起自己为何身在此处；

 

方法②： 让用户跟你走

给用户有用的链接，避免过于简单和技术，用丰富设计把用户拉回来，报告错误原因或提供联系方式，减少挫败感，减少那些痛苦的、毫无帮助的信息。增加建议让用户跟着你走, 利用转向将用户导入指定的页面；


　

方法③： 用轻松的手绘涂鸦风格

用轻松的手绘，表达放松的心情，404错误并不可怕，请原谅我们美丽的错误；


　

 

方法④： 精致的细节刻画

精致的设计往往可惜吸引用户驻足观看，仔细观察，生怕漏掉细节，当用户被精致打动的时候，对你的网站就会平添更多的怜爱之情；

　

方法⑤： 楚楚可人的道歉

用情感打动用户，挽留它们的关闭和离开；

　

 

方法⑥： 拟物化的场景烘托

用实际物体为元素设计的404页面，可以更好的和本站的主题契合，实物有不可比拟的真实感，是一种很好的表现手段；


　

 

方法⑦： 幽默的手段和趣味情节

老奶奶找不到自己的宠物了！Oh~~原来坐在了屁股底下……

多么可爱的错误啊，看到这一切，您还会为404的小错误生气么？放松一下，给错误带上幽默的情节，原来错误也可以很美……

版权所有 © 2008 - 2010
您看到的文章来自 腾讯CDC博客 http://cdc.tencent.com ，原文链接为 http://cdc.tencent.com/?p=2907 ，转载时请注明出处。 ]]> 腾讯CDC Thu, 02 Sep 2010 12:36:53 +0800 一起游吧: 基于地理位置的移动旅游网络社区 http://www.itfeed.cn/post.asp?id=12581 4947674765 b8eedbbc57 m 一起游吧: 基于地理位置的移动旅游网络社区 By Web2.0 盗盗

一起游吧是国内一家基于地理位置定位的移动旅游网络社区，通过在线社区、WAP、手机软件等各种平台和产品，为用户提供全方位的旅游服务。

一起游吧是国内一家基于地理位置定位的移动旅游网络社区，用户可以通过一起游吧网站或者游吧手机软件，实时关注到全球旅游景点指南、游记攻略、照片视频及网友真实评论。还可以运用游吧定位功能知道自己的当前位置，查找附近的朋友、美食、景点、住宿、酒吧、机票、酒店等地，以及户外用品等旅游用品和服务。在旅途中，通过游吧随时随地用手机上传带有GPS位置定位信息的照片、记录生活足迹，与家人朋友及时分享。

4948263086 d8a45deb07 z 一起游吧: 基于地理位置的移动旅游网络社区 By Web2.0 盗盗

相信这是一个容易被绝大多数人认可的观点，LBS产业链在最近1-2年时间里已经逐步趋于成熟，尤其是Foursquare社会化地理信息分享概念的提出后，LBS产业在国内移动互联网市场增量呈现令人瞠目的井喷状，具备了快速发展的条件。它与旅游产业的充分融合可将“人在旅途”变成为一种随时随地发生的常态，而非工作和生活之余的间态。有理由相信这一技术，对于促进旅游产业的智能化、信息化发展起到推波助澜的作用。

Copyright © 2010 , 本文来自分享网络2.0, 该站内容采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可.
小广告: 1G 国外虚拟主机 149元/年 | 同步控 轻松同步, 便携移动 ]]> showeb20 Wed, 01 Sep 2010 20:25:19 +0800 速递：苹果将首次采用HTML5直播新产品发布会 http://www.itfeed.cn/post.asp?id=12578         苹果今天宣布，将第一次采用HTML5内置的HTTP Live流媒体视频在Apple.com上全程直播直播最新产品发布会，这意味着用户可以用苹果iOS 3以上版本和Mac OS X Snow Leopard观看。

阅读全文

]]> guoshaorui Wed, 01 Sep 2010 10:07:29 +0800 “庸才”其实更受欢迎 http://www.itfeed.cn/post.asp?id=12573 在公司，决策者毕竟是少数，更需要的是基层执行者。在看重集体智慧的外企，通常在决策前，会有一个群策群力的头脑风暴。由于正反方意见的对抗相当激烈，头脑风暴的结果通常相对“中庸”，一些“天才创意”会因为种种质疑而被改得面目全非。

其实正是这种集体智慧的制度，保障了企业的稳健发展。公司决策依靠的是集体智慧和精密的执行，而不是某个天才的灵光乍现。后者意味着，万一这个天才哪天生病了或另起炉灶了，这个公司是不是就得关门大吉了？

因此有创意有想法的人，公司绝对欢迎，但首先，你必须是一个会执行的人，也就是能把领导交待的事情执行到位的人。有个公司的部门主管说：我不要天才，只要一些中等智力并且肯干的人就可以了。这应该也是大部分主管们的心态：就算你绝顶聪明，不服管、不好用，与我何干？

但是很多打工的人并不能完整地认识到这一点，总是披荆斩棘地向决策者的智慧逼进，于是开始与公司、与老板相左。拎得清的人，或许懂得适可而止，退缩到二等智慧上，一切太平;拎不清的人呢，斗个头破血流之后，不仅丢掉原来的位置，还落个一肚子恶气，然后世上多一个怀才不遇的怨夫或怨妇。

在企业求发展，需要被领导和同事认为杰出。对恃才傲物的人来说，如果把自已打扮成勤奋的庸才或细心的庸才，其实也是一种聪明的生存之道。常有一些平时看似唯唯诺诺的副手们被扶正之后，忽然变脸为雷厉风行的改革者。原来不是没有智慧，是时候和机遇未到，先要藏一藏智慧。

庸才如此受欢迎，它是一种精密的执行力，一种绝对的服从精神，一种藏智慧的智慧。庸才通常都有一个转变的过程，他们中很多人都是职场上的老手，从毕业时的菱角分明，到若干年后对公司运作中的恍然大悟。从一开始的工作妥协，到最后的中庸之道。初到深圳的我也有幸在满是天才的公司里呆了一段时间，现在我和很多那时的同事依然是不错的朋友，当时却由于大家的天马行空，又无法说服对方而最终也没能走上正轨。原因除了我以前提到过商业模式的问题，无法有效决策，没有庸才队伍，也是其中一个很重要的方面。回想起来那也是一段难得的创业经历，只是大家都还年轻。

在面对困难时，我们作为庸才的角色时，妥协显然无法避免。要是把握不好也是一种危险的习惯，不要因为妥协就省略或简化必要的工作，长远的考虑问题和分阶段的引导实现是其中很能体现智慧的地方，特别是当职业经理人来领导工作时，他们更注重结果。

Google Buzz]]> Zeroni Thu, 02 Sep 2010 09:11:51 +0800 PHP大图生成缩略图 http://www.itfeed.cn/post.asp?id=12572 原贴地址: http://bbs.blueidea.com/thread-2997569-1-1.html

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
/**
* 生成缩略图
*
* @param string $imagePath 图片路径
* @param string $thumb 生成缩略图名称
* @param integer $width 生成缩略图最大宽度
* @param integer $height 生成缩略图最大高度
* 
* @author Silver 
* @link http://www.zdyi.com
*/
function resizeImage($imagePath, $thumb, $width = 200, $height = 200)
{
    list($imageWidth, $imageHeight) = getimagesize($imagePath);
    $imagePath = imagecreatefromjpeg($imagePath);
    if ($width && ($imageWidth < $imageHeight))
    {
        $width = ($height / $imageHeight) * $imageWidth;
    }
    else
    {
        $height = ($width / $imageWidth) * $imageHeight;
    }
    $image = imagecreatetruecolor($width, $height);
    imagecopyresampled($image, $imagePath, 0, 0, 0, 0, $width, $height, $imageWidth, $imageHeight);
    imagepng($image, $thumb);
    imagedestroy($image);
}
resizeImage('test.jpg', 'test_thumb.jpg');
?>
]]> 银子 Wed, 01 Sep 2010 16:45:42 +0800 视觉大同—Visual similarity http://www.itfeed.cn/post.asp?id=12569

视觉，一个设计师耳熟能详的词，每个人都会有一套自己的理论，可能任何一个非设计出身的都会说，视觉就是能看得见的呗。
确实是这样，视觉广义上讲，是可以包罗所有可见事物，一种与人之间发生的体验，是一种呈现。作为终端视觉设计师的我们更是每天工作中在屏幕里添砖加瓦。想在小小的终端创造一个世界。可是往往我们在过程中，其实还是有蛮多苦恼的，比如在处理需求，交互，视觉，开发之间各种关系的时候。受限过多的我们，总是会遇到如何突破的问题。  

1.视觉效果的趋势

突破，意味着要先去梳理当下，预料趋势，归类总结。那么，我们就先分析一下终端视觉趋势吧。不知道大家是否接触过以下分辨率的产品，

图1.1

上表包含了市场中大部分产品，其实也可以看出一定的规律

图1.2

如图1.2所示，随着产品的发展，移动终端产品的分辨率是越来越高的，形成一定的类别性，功能越多，交互也相对越复杂，并且可以播放当下的720p甚至以上的高清视频。那么随着这些产品的产生，对用户，视觉设计，交互设计等都是有影响的。我们暂且说说用户和视觉设计这两方面。

  • 对用户的影响
图3

图1.3

  • 对视觉设计产生的影响
图4

图1.4

从图1.3和图1.4可以看出，产品硬件的变化，直接影响到体验的变化， 对用户的影响有三个方面

1. 使用内容，

2. 操作方式，

3. 视觉感官.

进而可以得出，视觉设计也跟着这三个方面来变化，

1.由于内容产生变化，则表现出终端板块多，分类多，同一个页面会比以前的产品有更多的内容，那么要求设计师必须有超强的整体把握能力，做到色调统一，区分明确，变化微妙有细节。

2.产品由按键到触摸，更多的操作集中到屏幕，那么对控件的大小，形状，颜色，位置也有了一定的要求，易点击，语意明确变得更加重要。

3.用户对产品直接的视觉变化，就是屏幕变大，精细度高，这就要求设计师做的图形更加深入，一定程度的效仿自然，在屏幕中创造另外一个”真实”世界. 当然，世界总是有两个极端，在自然舒适化的操作下，简约风格，平面化的感觉也是一个大的趋势。

我们看到产品硬件的变化，致使用户体验和视觉设计都有了变化，那么在未来，这一趋势一定会将继续演变。微软surface就是一款致力于NUI的产品，也是这一趋势的推动者。 如果说阿凡达中的全息投影技术的应用会是一个更远的科技未来，那么上面的趋势也是对我们影响最近的把。

从我最开始做UI到现在，其实还是有一种产品让我感受很深的，那就是电纸书。近两年横空出世的它也是一个不小的力量。因为他彻底改变了传统使用数码产品的感官，采用电子喷墨技术，使得页面更加接近于纸张。这种传统的阅读习惯被再一次拿回，返璞归真，也总是人类的一种热望。

图1.5

但由于现在技术和成本等各方面原因，这种屏幕还没有很快的用到各个方面，我们就当这是一个特例吧。

再回到之前所说的，我们最近的视觉效果发展趋势。效仿自然，简约平面两大风格路线。一定意义的指导我们视觉设计的方向。也要求我们做出各种准备，来解决设计上的瓶颈。

2.寻求视觉突破的解决方法

从上面的内容，我们得出视觉效果的发展趋势，那么我们就要摆脱常规的一些想法，来实现设计，提高设计，并设计未来。Iphone当初的面世，可谓划时代。除了人们常说的一些原因，其实从视觉角度讲，就是苹果公司对设计有一种独到的见解，并且有着倔强般的审美，乔布斯多年不变的穿着打扮，可见端倪。

图2.1

从我对设计的理解基本寻求突破有以下几点：

  • 自然演变法

图2.2

对于形体其实我们往往可以从自然寻找突破，这是一个水族馆景观设计，便运用了沙石的堆砌，来形成一种自然的感觉

图2.3

内部的色彩与线条很协调的呈现出水族的样式。

图2.4

挂衣钩的设计，便采取了液体流下的造型，对传统进行突破。我们在进行界面设计很多时候也是可以用到这样的思路的。是一种自然演变法，并有一定的构成性。

  • 生活提炼法

图2.5

工业产品设计中最常见的手法，运用当下科技产生的一些新元素，来呈现到生活中，并实现功用。其实这个方式的逆向思路便是我们把生活中的现实元素，巧妙的提取到界面视觉设计中。在终端屏幕制造一个新世界，同时也是视觉设计过程中最有成就感的结果。也就是生活提炼法。

图2.6

  • 现象调侃法

图2.7

图2.8

往往是有图有真相，图2.7和图2.8中是一种对现象的调侃把，其实这也是设计师应该具备的一种思想。很巧妙的把生活中的一些场景片段，来变成有功用与指示性的东西。如果说斧子砸墙壁当挂钩还不够功用的话，下面不锈钢茶杯映出盘子里的字可谓是韵味十足并有一定的指示性。界面视觉设计也可以在这里打开一些呈现的思路。

  • 环境制约法

所有设计在过程中总是面临种种限制，并且在一个创意实现后，还有一些未很好解决的东西，在限制中寻求完美突破也是必须的，就是我们这里所说的环境制约法。Macbook一直以轻薄著称，但是随身携带的插头却比它还厚，显而易见，这个司空见惯的问题却没有人去考虑与设计。

图2.9

界面视觉设计相信也一定存在这样的问题，司空见惯，可优化不为之，是设计者的最大要害。所以我们平时一定要在限制成习惯中寻求新的出路，这样才能在细节体验上起到革命性的变革。

当然，除了上面所说四种方法，其实还有很多我们可以借鉴的形式与思路，这里就不一一列举了，希望在可以对寻求突破的设计师来点闪亮的火花。

3. 结语

通过上面对视觉趋势的梳理，以及视觉设计中寻求突破的方法点选，我可以看出在未来设计当中，一切视觉都是有相通的思考点的，视觉是大同的，并且在相同的思路下，我们可以实现最好的瓶颈突破，在不同的纬度下服务不同的用户，去更主动的把握设计，来驱动产品的发展。

终端视觉设计，正在以强有力的态势来影响一代人的审美与使用，我们一起努力。

]]> 腾讯WSD Wed, 01 Sep 2010 14:51:31 +0800 用HTML5代替PPT http://www.itfeed.cn/post.asp?id=12564 如果你是前端，如果你要分享。
是不是觉得PPT很难用？
是不是觉得用PPT很不能体现你的身份价值？

本人虽然不是全职前端，但也算半个前端，
也有这样的想法，最近就自己弄了一个。

实现了如下功能：
空格翻页（展示的时候空格是最容易按，也最不容易按错、多按，虚按的。）
滚轮翻页（分享给网上朋友的时候，滚轮才是最方便的）
目录（因为我课件展示的屏幕是宽屏，太长，所以边上留有目录）
点击目录可以跳转（同样是给网上看网页的朋友准备的）
页数（展示时候用）
点开带hash的url可以直接跳转到某一页（便于分享特定页）

尚未实现的功能和bug：
自适应用户分辨率
一页之内逐步显示内容
当前页在目录上高亮
目录暂时有点顺序问题，待解决。

由于我的这个展示屏幕比较大，1920×1080的，所以一般访问请用 ctrl + – 来缩小网页。
Chrome下缩小后有bug，Chrome的问题，Firefox下一切正常。
而Chrome下动画效果比较好，Firefox下有点卡。
推荐用这两个浏览器查看： 展示页面

制作的时候正巧玉伯分享了他的分享，
这个是源自于 google 推广的 HTML5Rocks(需翻墙，项目地址不需要翻墙)
我也借势参考了一些想法，比如url的hash定位，以及部分CSS写法。
当然，我自认为应该比那个好看一点吧，呵呵。
(后来我想想，这个风格应该是潜意识中受到了Flex的影响吧)

]]> Shawphy Wed, 01 Sep 2010 00:18:43 +0800 真的还需要reset.css么？ http://www.itfeed.cn/post.asp?id=12563 我博客浏览量靠前的一直是《打造自己的reset.css》，
然而，我对此的观点也已经有所改变，
所以，我觉得是时候写一篇博客阐述一下目前我的理解了。
注意，这是篇激进的博文，其观点并不客观中立，仅仅表示出我目前的想法。

是否使用*{margin:0;padding:0}

实际上，我现在根本不避讳*{margin:0;padding:0}这种写法了。
我从未看到过真正有关于这个对性能有影响的报告
也不觉得下面Eric的重置样式比起这玩意有多高明之处

  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td {
  10.     margin: 0;
  11.     padding: 0;
  12.     border: 0;
  13.     outline: 0;
  14.     font-size: 100%;
  15.     vertical-align: baseline;
  16.     background: transparent;
  17. }

上面的代码波及面一样很大，难道就不造成性能问题了？
到写具体元素样式代码的时候就不会因此受到reset.css的影响了？
扯淡！
现在回过头来看去年3月写的那篇博客《打造自己的reset.css》，
觉得有些想法是人云亦云，有些想法过于幼稚了。
另外找到了一篇博文支持我这种看法，可以看看
关于CSS RESET，关于*{margin:0;padding:0}

其他表现不同的元素

除此padding和margin之外，如果一个元素在不同浏览器内表现显著不同，
那何不直接在用到的那个页面写css呢？
何必为了少数元素的表现，写到全局的reset中呢？
实际上随着IE6的逐渐老去，这种差异已经越来越小了
而我们关心的依然是主流浏览器，IE6，IE7和IE8，这3个是绝对主流，
以及我们自己会用的Firefox和Chrome或者其他
那么只要这几个主流浏览器测试下来没问题，就没问题了，
有必要花成本关心其他更小众的浏览器么？

另外，我们实际中也很少对页面设计需要对任何元素精确到像素级的还原，
只要整体表现得当，个别元素的出格（更多的是跟操作系统有关）无伤大雅。
实际上我就没看到有人非得把表单按钮重置到让mac系统下的样子跟win下一样。

原汁原味的元素

很多元素浏览器默认样式就都一样（至少大致差不离），并且都很不错
比如 ins 和 del 这种，还有 strong 以及 em 这类。
默认样式不好么？如果到头来也不过就是让strong变成粗体，em变成斜体
那还不如不要重置呢。
如果有自己的想法呢，希望全局都一样呢？不如写 global.css 吧！

reset.css VS global.css

是的，很多网站都要追求全局的一些样式的统一，
为此要用reset.css重置一下，然后再用global.css来定义全局样式。
那我说，为何不直接用global.css取代reset.css的功能？
一样要定义，何不一步到位？
先重置，再定义，难道是带宽富余的没处用了？

举例来说，上面提到的 strong 和 em 元素。
如果希望全局都是加粗的斜体的，个别地方有其他样式，那自然无需重置样式
而如果全局都不要加粗斜体，有统一特殊的强调样式，那简单，直接在global.css里写就好了。
如果全局都不要加粗斜体，但不同地方有不同样式，那也简单，
在global.css写入重置样式，都变成正常字体即可，这就是取代了reset.css的功能了。

于是乎，目前我的观点是：reset.css这种先重置再定义的模式可以放弃了，一步到位，根据不同网站的特点编写不同的global.css，效果会更好。
所以，我很支持 No CSS Reset

]]> Shawphy Wed, 01 Sep 2010 22:51:22 +0800 东拉西扯：百度的框 http://www.itfeed.cn/post.asp?id=12562 去年百度“框计算”发布，我曾写过一篇《框不住的未来》，发表了一些简单的看法。不过，框计算一年来没有太多实际的进展，直到现在。你搜索“豆瓣电台”，现在可以直接在搜索结果页面收听音乐；搜索“植物大战僵尸”，也可以直接在结果页面玩游戏；未来，还会更多。

简单说，通过与特定网站和开发者的合作，百度搜索不仅仅可以读取规定的XML格式的数据，而且可以将产品和服务，封装成一个应用，直接在百度搜索结果页面运行。这样，百度搜索开放平台就不仅是一个数据汇集和流量分发的平台，未来很有可能成为一个面向最终用户的终极应用平台。

前几天跟百度首席产品设计师孙云丰有过一次直接沟通，对于百度应用开放平台将怎样改变产业生态，我表达了我的担忧。

1. 搜索与互联网生态。十多年来，搜索引擎几乎没有发生什么大的形态变化，即使是Google的整合搜索，也只是将图片、视频、新闻、实时内容、博客、论坛、地图等搜索结果，整合到Web搜索中，其最终效果，仍然是将用户导向目标网站，毕竟，搜索只是互联网众多应用形态中的一种，框不能取代其他。而且由于百度框计算太新，对互联网商业生态的影响太大，我们无法提前知道将来会发生什么。在涉及生态环境的问题上，先破坏后治理，基本上是一条不归路。

2. 流量黑洞。随着可以在百度搜索结果页面运行的应用越来越多，百度是否会成为一个只进不出的流量黑洞？用户不再需要通过百度访问目标网站，一旦越来越多的用户形成这样的习惯，百度将成为一个流量终结者。我同意搜索引擎需要与时俱进，需要不断进化，但对搜索引擎的流量分发功能的巨大改变，是否会造成不可逆转的生态灾难，我有疑虑。

3. 马太效应。由于百度的应用审核机制和用户需求匹配机制，以及独特而醒目的应用呈现方式，被百度认可的应用，将获得更高的用户使用率，有可能导致严重的两极分化。比方说，用户搜索佳能数码相机，百度以最好的位置和最佳的呈现方式，给出京东商城的报价和购买链接，对其他电子商务网站来说，就近乎屏蔽。在极端情况下，任何一个细分领域，只有一两家网站能从百度受益，其他的几乎难有出头之日。程苓峰所担心的，中国互联网上出现一个“百度系”，是很有可能的。

4. 技术歧视。有能力按百度要求开发应用的网站，相比那些没有能力的网站，就更“权威”吗？

孙云丰说，应用开放平台最初的，也是惟一的出发点，是用户体验。用户搜索“QQ下载”，大量的假QQ真木马，搜索“海尔售后”，大量的假售后真骗子，搜索“开心网”，大量的假开心真山寨，都是对用户极大的伤害。与其跟恶意SEO长期玩猫捉老鼠的游戏，不如改变规则，突出权威结果。这想法没问题，但“权威”则问题很大。我不知道，一个淘宝卖数码相机的小店，是否就一定不如京东商城权威。

孙云丰还认为，一些互联网商业模式，需要根据用户需求来调整。比如网络小说《斗破苍穹》，每天可以得到百万级别的搜索量，其中九成以上的用户只是搜索免费内容，他们不会选择付费阅读。这时候《斗破苍穹》的广告价值，可能远远超过收费价值。问题是，具有广告价值的网络小说，只占极小的比例，为少数热门产品，改变成型的商业模式，可能性有多大，对盛大文学们来说，是个很大的问题。

孙云丰说，百度应用开放平台，对开发者是完全免费的，跟百度的广告系统无关，但在结果排序上，广告的优先级要高于应用。不过，由于我上面提到的马太效应，未来对应用的争夺将越来越激烈，对很多企业来说，这是个生死问题。这些竞争性应用怎样审核，怎样匹配，怎样排序，也必定会受到越来越多的质疑。

]]> keso Tue, 31 Aug 2010 20:05:29 +0800 传达出设计的“灵魂”——关于交互文档的分析 http://www.itfeed.cn/post.asp?id=12559 张雅秋 Wed, 01 Sep 2010 08:12:23 +0800 2010中国互联网大会全部CEO演讲PPT http://www.itfeed.cn/post.asp?id=12558 共有100多个pdf文件
需要的童鞋请以QQ邮箱发邮件给admin@itfeed.cn
将会回信给你

是以QQ邮箱中转站的方式给大家发送，如果提示下载受限保护，请转到您的QQ中转站，然后就可以下载了。

ITFeed
http://www.itfeed.cn
http://t.sina.com.cn/itfeed
QQ群：14408580

2010梦想者——网络草根创业与就业论坛
2010思想者--国际互联网高层峰会
2010网络文化产业高层论坛
2010中国互联网高层年会
2010中国移动互联网高峰论坛
电子邮件行业发展论坛暨2010中国反垃圾邮件年会
沸点——网络媒体与网络广告高峰论坛
焦点——2010企业核心战略与新品发布平台
支点——中国互联网与网民生活论坛
云计算产业高峰论坛

1-李星.pdf
10-优酷.pdf
11-第一视频.pdf
12-傅承鹏.pdf
13-PPS.pdf
14-王路.pdf
15-光芒星空.pdf
16-香港互联网专业协会.pdf
2-毛伟.pdf
3-微软.pdf
4-Google.pdf
5-阿卡迈.pdf
6-优视科技.pdf
8-聚胜万合.pdf
9-ZOHO 斯瑞达 文布.pdf
1-济南英网.pdf
2-新疆号码百事通.pdf
3-第四方.pdf
5-智能手机个人物联网技术（赛）.pdf
7-易纵互联.pdf
8-康讯卫航.pdf
9-新外汇.pdf
1-4399游戏.pdf
3-麒麟网络.pdf
4-游戏谷.pdf
5-多玩-.pdf
6-178游戏网.pdf
7-数字顽石.pdf
1-天云科技.pdf
10-曙光.pdf
11-百会.pdf
12-阿卡迈.pdf
13-红山.pdf
2-趋势科技.pdf
3-EMC中国实验室.pdf
4-中搜.pdf
5-中国移动通信研究院.pdf
6-中国联通研究院.pdf
8-中国电子学会.pdf
9-blade.pdf
02-阿里巴巴.pdf
03-国航.pdf
04-去哪儿网.pdf
05-易宝支付.pdf
06-天际_.pdf
07-paypal-.pdf
08-拉手网.pdf
09-和讯.pdf
10--永盟健康网.pdf
02-艾瑞集团.pdf
03-人民网.pdf
04--CNTV.pdf
......

]]> ITFeed Thu, 02 Sep 2010 10:03:35 +0800 Android手机应用程序界面设计指南系列（1）——引言 http://www.itfeed.cn/post.asp?id=12554  

大概在2009年中，我有幸加入了公司的移动应用项目，开始前必然是恶补各类手机平台的相关知识，以帮助设计能正确进行。当中就包括了Android。

设计某一个手机平台的应用程序界面时，设计师通常先是了解平台的特性、控件以及界面布局规范。然而我们发现Android官方居然没有一份完整的界面设计规范类的东西。官方的开方文档（http://developer.android.com/guide/practices/ui_guidelines/index.html 需翻墙）提到的几点人机界面指南，也只不过寥寥几笔而已。
这让我们很郁闷，使得我们不得不花更多的时间去琢磨Android手机，从它的原生界面开始细致地观察，试图从中找出设计章法或依据，又或是尝试从中猜测它的设计哲学。

在得到很多朋友的鼓励之后，《Android手机应用程序界面设计指南》从2010年8月20日起正式开始在阿智的博客（http://azero.tsang.blog.163.com）连载了。

这一系列的“指南”，或许称之为我的个人经验累积更为恰当。直至今天，我的个人实验室（数字游牧实验室，Android、iPhone应用程序实验基地）仍然在不断地验证这份指南并保持更新。同样，在博客中我也希望能听到大家关于此方面的讨论。

这一系列指南将带给你…

1、  新的发现——发现Android原生界面更多的设计优点，而不是对它嗤之以鼻。另外，通过对比不同厂商的Android手机，也可以从中发现一些硬件配置的共性。

2、  观念革新——紧记我们设计Android的应用程序，而不是设计新的Android平台。

3、  规范与创新——规范意味着你的应用程序界面可以更容易被Android手机使用者理解，同时也能给你的工作提升效率。另外，你能了解在什么时候创新更为合适。

4、  不断的惊喜——我们总能在志趣相投的圈子中得到不断的惊喜。

必须明白的事情…

这一系列指南，依赖于Android非客制化的界面。

如果你的应用程序是特别为某个客制化的Android界面定制的，比如特别为Lephone定制一款应用程序，可能不适合你。

如果你不是在做第三方应用程序，而是像OMS（ophone）、LEOS（Lephone）那样“自主研发”又一个手机操作平台，也不适合你。

我们必须保持一致的观念：我们接下来所讨论的是设计Android的应用程序界面，而不是设计新的手机操作平台界面。

尽管我们花费了大量的时间去理解Android，但这份指南仍然不具备任何的“官方气味”。不要期待百分百适合你。另外，我们无法预知后续版本的更新所带来的界面革新。

最后，如果你喜欢复制粘贴本指南有关的图文，建议附带以下内容：
作者：阿智  出处：http://azero.tsang.blog.163.com

 

]]> 网易UEDC Tue, 31 Aug 2010 17:35:27 +0800 产品线定位 http://www.itfeed.cn/post.asp?id=12551 小威 Tue, 31 Aug 2010 23:14:03 +0800 Android UI Design Tips http://www.itfeed.cn/post.asp?id=12550 虽然Android的UI不如iPhone平台的标准化，但是Design Tips往往是Common Sense可以参考

Android UI Design Tips

其他你可能感兴趣的:

  • 暂时没有相关文章！

©2010 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎.

. ]]> 耿人杰 Wed, 01 Sep 2010 19:37:52 +0800 第七届中国用户体验行业大会User Friendly 2010 http://www.itfeed.cn/post.asp?id=12549 早上收到朋友忠伟的邮件，UPA2010大会的筹备已经初具形状，官方网站开通，上面有详细的参会指导和日程安排。并且随着报名和嘉宾的到位，信息会逐渐丰富起来。

Donald Norman, Bill Buxton 等行业坐标都会过来，那么11月，我们南京见。

http://www.upachina.org/userfriendly2010/cn/index/index.aspx?MeetingID=2

以下为硬广告：

User Friendly2010暨大中华区第七届用户体验行业交流大会，将于2010年11月12日至14日在江苏南京 “南京国际会议大酒店”举行。这是一个坐落在紫金山下、环山簇拥的幽静圣所。与会人员在学习交流的闲暇之余，也能静心体味一下紫金山麓的优雅与宁静，自然与和谐。 

本届大会主题为“拥抱亚洲文化”。亚洲文化作为世界文化的重要组成部分，一直对人类社会有着深远的影响。用户体验的研究与设计，究其根源还是对各区域性文化的研究和再设计。亚洲文化在近三个世纪不断的融合欧洲主流文化，呈现出多元化的一面。如何去接触和深入了解新时代下的亚洲文化，在透析多元文化的基础上去研究和设计出更适合亚洲人使用习惯的各领域产品，是每一个设计师都应该去关注和学习的。本届年会我们有幸邀请到了用户体验行业的传奇人物DON NORMAN先生和资深行业专家、现任微软首席研究员BILL BUXTON先生作为大会主要演讲嘉宾为大会做精彩演讲。同时组委会邀请了来自美国、德国、英国、日本、韩国、印度、中国香港/台湾以及内地等近40名用户体验、产品设计等领域的资深行业专家。通过大会演讲我们将学习到如何“认识和遵循亚洲文化的特点”制定适应于不同行业和公司的体验设计策略。在工作坊学习中，我们将通过实际的案例分享来学习当下行业最引人关注的“网络社区”“智能终端移动”“网络视频”“电子商务”“线上支付”等领域的体验研究和设计的策略和流程，方法和技术。同时，组委会将在大会期间推出以三网互联为大背景的各产品领域用户体验专家论坛，就目前政府和民众最为关注的体验热点话题进行开放性讨论。大会还将吸引来自用户体验咨询，可用性产品设备，互联网与软件等领域多个公司参展。届时你将看到最新的研究、设计、测试等辅助性设备，设计软件工具以及个别公司的研发成果展示。此外第二届全国大学生用户体验设计大赛终审、展览、颁奖，嘉宾售书签字，年会晚宴、小型Party等活动更将给本届年会增添别样的风采。
]]> 周陟 Wed, 01 Sep 2010 15:19:50 +0800 onlineSchools：互联网色情内容统计报告 http://www.itfeed.cn/post.asp?id=12542 199it Sun, 29 Aug 2010 01:38:42 +0800 对于那些即将创业的设计师和正在创业的设计师而言，一定要看，不看后悔，一定的！ http://www.itfeed.cn/post.asp?id=12527

对于那些即将创业的设计师和正在创业的设计师而言，看了这个视频你会比别人发展的速度提前两年，而没看的，则要比别人慢两年，妈呀，上下可能得隔4年光景..........

一定要看，不看后悔，一定的！

（本期节目包括：设计公司业务成长模式，企业文化以及薪酬制定等）


做人要厚道，看完要回帖！

下期嘉宾邀请：

只要你有故事只要你是设计师的身份，无论你在创业，还是在做职业设计师，若你希望将你的心得和感受跟行业的朋友们分享，都可以跟我们联系（可以选择的方式为：1、访谈 （以嘉宾为主）2、纪录片（记录你的生存状态）），
联系QQ:8150936


]]> 欧阳黎明 Wed, 25 Aug 2010 11:47:19 +0800 MyMova: 在线会议网站管理和营销工具 http://www.itfeed.cn/post.asp?id=12516 4944720293 906bb8517d m MyMova: 在线会议网站管理和营销工具 By Web2.0 盗盗

MyMova（麦魔瓦）是一个专业的会议活动管理系统，提供会议活网站免费搭建、在线报名、在线门票支付、统计分析、会议推广和数据永久存放等功能。

MyMova（麦魔瓦）是一个专业的会议活动管理系统，提供会议活网站免费搭建、在线报名、在线门票支付、统计分析、会议推广和数据永久存放等功能。使用MyMova创建会议网站过程相当简单，在“界面与模板”栏目中通过拖拽功能就能把需要展示的内容放进你的网站，用户并不需要具备任何编程知识便可轻松搭建专业的会议网站，当然，掌握简单的Web开发技巧可以让MyMova的使用更加得心应手。另外，MyMova的统计分析功能可帮助用户实时了解会议动态，掌握会议活动的每一个环节，高级用户还可以申请绑定Google Analytics 账号，对自己的会议网站做到全方位的监控。

[如果您是RSS Reader，您可能无法收看到上面一段视频，请点击这里收看]

Copyright © 2010 , 本文来自分享网络2.0, 该站内容采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可.
小广告: 1G 国外虚拟主机 149元/年 | 同步控 轻松同步, 便携移动 ]]> showeb20 Tue, 31 Aug 2010 16:43:28 +0800