‘产品设计’ Category Archives

21

别说我了解用户

作者: boke ,分类: 产品设计

今天在Ray is thinking 看到一篇文章,这样的用户,引来看看。

晚上和无忌聊天时,扯着扯着就说到一些匪夷所思的用户行为上,举几个例子,可能是个例,但是确实在提醒我们,DMMT不能忘。


1.这个例子是听说的[也可能是看blog时看到的,忘记了],某用户电话到淘宝客服说上不去淘宝了,客服说一切正常,问平时怎么上淘宝的,答曰:本地信息港弹出淘宝广告,点一下就进去了,现在没有广告弹出了,就不知道怎么进去了。


2.无忌说的一个例子:“我之前参加过一个会展 就躲在阿里巴巴展台后面看人家是怎么访问网站的,打开百度 搜mp3 从右边的’到阿里巴巴找mp3′进去 然后点首页”


3.自己身边的例子:过年回家时开家里电脑,一打开首页就是hao123[汗一个],然后问老爸平时都上什么网站?答曰:新浪看新闻、优酷看电视剧、东方财富网看股票、百度搜东西。我作为忠诚的G粉丝当然不能容忍这种事情,就向老爸推荐使用google.cn[.com就算了,看不懂],答曰记不住名字,我说可以用g.cn的,输入很快的,答曰从来不输入网址,打开hao123一切搞定。见这个不灵决定继续向他推荐伟大的非死不可,告诉他这是全球最大的交友网站[没敢说SNS],答曰这是吹牛的吧,首页上一个人都没有还交友?看看新浪,一打开就是到处动来动去的多热闹,写博客的人都好几十万呢,这个非死不可上面冷冷清清的,不热闹,我彻底无语。。。次日,老妈要求我帮她申请QQ,我奇怪她要这个干吗?又不打字的和谁聊天去?哪知道申请完后人家一个好友都不加,直接点开QQ游戏开始斗地主,而且我在家的那些天基本上每天必玩几个小时,好忠实的用户,和聊天有什么关系呢?


4.好像当年Yahoo刚出来时,也是发现有很多人在输入框中输入网址的名称然后点搜索,从结果中进入该网站,所以以后Yahoo才会去做directory,那个时候即使在美国,网民的水平也是不高的,可以理解。


这样的用户当然不是我们的目标用户,可是反过来我们想一想,我们自己有时是不是太超前了?推特、非死不可、卖死赔死、的哥、地里学死,看到这篇日志的有多少人和我一样的请排排坐。


眼见为实,还是要多去做做用户调研吧,坐在会议室里空想用户这样用户那样,用户会让你傻眼的。

最近似乎老听人说他了解用户,敢问这样的用户有了解不?上面只是一个特例,我们的用户是由无数个特例组成的。自以为做了几天产品设计,看了几本书就了解用户了?这种心态错的很离谱,这样的人员也很离谱。

目前的我从不敢说我了解用户,也不奢求能了解所有用户。无意批评谁,说的是一种心态。用心观察,停止空想,多做用户调研,书本与实际相结合,这才是王道。

21
6

如何成为一个优秀的设计师,做一个优秀的设计

作者: boke ,分类: 产品设计

From: Aliued

如何成为优秀的设计师,都要具备那些能力,有同学可能有困惑,我把我的想法整理了一下,见下图。

我认为,做一个优秀的设计,要做到以下三点:

  1. 找准问题
  2. 提供多种解决方案
  3. 发布后衡量效果,分析并总结

具体如何来做呢?

第一是找准问题。设计是解决问题,“Design= Problem Solving.”  这是我认为对设计最好的定义。根据这个定义,我可以说,找准了问题,优秀设计的就成功了一半。那么怎么样找准问题呢?首先要搞清楚什么样的用户,遇到了什么样的问题。很多时候设计师认为自己很清楚用户是谁,我想说搞清楚用户是谁,决定了设计的深度。知道自己的设计是给买家用的,是了解用户的一种程度,建一个详细的角色模型和任务假设,也是了解用户的一种程度。具体一点说,我们设计一个注册流程,发布流程或者别的什么,首先要做单步路径分析,搞清楚各个来源的百分比,以及各个来源不同用户的不同状态,这样做设计就有针对性了,就简单很多了。

再说对问题的假设和定义了,其实要解决的问题肯定很多,要搞清楚哪个是主要问题,这点我是凭经验的,同学们有啥好的方法,欢迎分享。针对主要问题的不同定义,我们往往按不同的方向思考,设计的方案往往非常不同。

第二是提供多种解决方案。设计就是在诸多可能性中探究多赢的解决方案,怎么在诸多可能性中探索呢?我的办法常常是穷举的,结构层框架层表现层逐层穷举各种排列组合,列出其优劣,自己就能做出合理判断并说服人家。这里要请设计师们端正心态,常在网上看到自己的设计被否定了就说被强奸了,设计就是要出多种解决方案的,这是老板出钱让你练功力,丫的有啥好抱怨的,很多设计本身就是质量有问题。还要请设计师们深入思考,《用户体验的要素》都出中文版了,设计师不是美工,即使给自己定位为视觉设计师,也不要只停留在表现层做思考,结构层框架层都有很多可能性可供探究。这个也源于各人对设计理解的不同,但用户体验是整体的,很多人对设计师的都有自己不同的理解,我想说,“心有多大,舞台就有多大。” 还要说:“用行动证明价值。”

第三是效果衡量,分析总结。先充实一下对“执行力”的理解,项目发布不是终点,拿到结果才叫“执行力”。设计师最重要的经验积累,就是自己设计成果的数据反馈。如果说出多种解决方案是练内功,数据反馈分析总结就好比是吸星大法,不但可以把自己散去的精力都吸回来,还可以吸收别人的功力。我的体会,很多时候,用户并不按你所设想的那样使用你的设计,搞清楚真实现状和当初设想之间的差异,提升设计。

3

选项卡的设计

作者: boke ,分类: 产品设计

近期要更换公司网站首页,将各项服务以选项卡的样式在首页呈现。第三版设计如下图所示:

pojaa

图中搜索框下部就是要切换的各个选项卡,要求“光标悬停在标题上0.1秒后切换选项卡”,并且“选项卡中存在动态调用内容”。我感觉这种设计并不是很好,通过点击来切换选项卡更合适一些。

这种设计违反了web设计中用户可控性的原则,我认为这是不尊重用户的选择。举个例子,我现在正在看第一个选项卡里的内容,而我的鼠标就恰巧放在“门户”这个选项卡上,那么,0.1秒之后,选项卡切换了,可是我没想看第二个选项卡里的内容啊!

采用鼠标悬停切换选项卡的设计,时间延迟是必须的,但是这个延迟时间是不好把握,不同的用户对时间的敏感度和操作快慢不同。延迟时间长,可能有的用户,在感觉鼠标移上没有反应之后,就接着做了点击操作;延迟时间短,有可能用户只是把鼠标滑过该选项卡,从而发送不必要的请求,造成不必要的加载。

悬停切换这一动作使得用户的关注点集中在选项卡内部,而我们的目的呢?让用户注意搜索框?选项卡?选项卡内部?因此首页这里使用选项卡,悬停还是需要权衡一下的。

通过onmouseover触发事件通常需要配合onmouseout来使用,这就比使用onclick要多出一个事件处理函数。而且各个浏览器对onclick事件的支持要更良性一些。

当然,鼠标悬停切换选项卡也不是完全不可以用,我们来看一下雅虎的应用:

2009-02-04_092324

雅虎首页上有“雅虎关系”和“雅虎邮箱”两个选项卡,通过鼠标悬停的方式进行切换。为什么说这个可以用悬停来切换呢?来看看雅虎的选项卡有什么不同。首先,这里的选项卡数量只有两个,而且这两个选项卡都很大,这样鼠标指针就不容易放在错误的选项卡上。其次,这两个选项卡都是有额外的onclick事件的,当点击鼠标左键之后,会另外打开相应的另外一个页面。

我认为,onmouseover事件还是用来显示提示信息或者某种视觉效果,配合onclick来完成某种功能更为合适一些。

最后,我收集了几个比较优秀的选项卡设计,参考一下。

forgetfoo

 expressionengine

komodomedia

apple

tumblon

qq邮箱

百度知道

20

网页设计趋势之:”勾引”用户的按钮

作者: boke ,分类: 产品设计

所谓”勾引”用户的按钮,其实对于Web设计师来说,就是如何设计出一个能让大多来访的用户都有点击欲望的按钮。通常这些按钮被链接到下载注册购买等功能。

国外设计师 Seth Godin 将按钮比喻成香蕉,而你的用户则会被比喻成可爱的小猴子。我们的目标是能够让小猴子在3秒之内快速找到它们想要的香蕉(也就是在用户放弃并离开你的网站之前)。强迫你自己在设计每个网页的时候都要遵循一个且仅有一个的目标,那就是”香蕉”!让它更大、更醒目、更美观!

网页-按钮-设计

这篇文章将和大家一起讨论如何设计完美”勾引”用户点击的按钮并会为大家展示30个不错的网页按钮设计实例

如何设计完美”勾引”用户点击的按钮

好的按钮设计一定会是醒目且能”勾引”用户眼球的。以下是好的按钮设计必不可少的5个特征:

1.颜色

颜色一定要能与平静的页面相比更加与众不同,因此它要更亮而且有高对比度的颜色。

网页设计-教程

2.位置

它们应当”座落于”用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧…这些都是醒目且不难找到的地方。

网页按钮-设计

3.文字表达

在按钮上使用什么文字表达给用户是非常重要的。它应当简短并切中要点(不罗嗦),并以动词开始,如:注册、下载、创建、尝试等…

如果想切实的达到”勾引”用户点击的按钮,添加“免费″二字的确可以起到诱惑的效果,当然那要真的是免费,不要误导或欺骗用户。

网页设计-按钮

4.尺寸问题

如果它是你最重要的按钮并且你希望更多的用户点击它,那么让它更醒目些是没有坏处的。把这个按钮设计的比其他按钮更大些并让用户在更多的地方找到并点击它。

按钮设计

5.可”呼吸”的空间

你的按钮不能和网页中的其他元素挤在一起。它需要充足的margin(外边距)才能更加突出,也需要更多的padding(内边距)才能让文字更容易阅读。

按钮设计-教程

30个网页按钮设计实例

1.Things

按钮素材

2.WordPress e-Commerce

网页设计-按钮-实例

3.Skype

网页设计-按钮-实例

4. PB Wiki

网页设计-按钮-实例

5.Exceptional

网页设计-按钮-实例

6.PicsEngine

网页设计-按钮-实例

7.InCase

网页设计-按钮-实例

8.GoodBarry

网页设计-按钮-实例

9.Plan HQ

网页设计-按钮-实例

10.TypePad

网页设计-按钮-实例

11.Mozilla Firefox

网页设计-按钮-实例

12.37 Signals

网页设计-按钮-实例

13.Hambo Design

网页设计-按钮-实例

14.Cake PHP

网页设计-按钮-实例

15.Traffik

网页设计-按钮-实例

16.Boag World

网页设计-按钮-实例

17.Donor Tools

网页设计-按钮-实例

18.Luke Larsen

网页设计-按钮-实例

19.Square Space

网页设计-按钮-实例

20.Wu Foo

网页设计-按钮-实例

21.Barack Obama

网页设计-按钮-实例

22.Freshbooks

网页设计-按钮-实例

23.Crazy Egg

网页设计-按钮-实例

24.Web Notes

网页设计-按钮-实例

25.Campaign Monitor

网页设计-按钮-实例

26.Light CMS

网页设计-按钮-实例

27.Litmus

网页设计-按钮-实例

28.Stumble Upon

网页设计-按钮-实例

29.Remember The Milk

网页设计-按钮-实例

30.Ekklesia 360

网页设计-按钮-实例
From:http://blog.bingo929.com/web-design-trends-call-to-action-signup-download-buttons.html

英文原文:Web Design Trends: Call To Action Buttons