HTML中UL、OL、LI使用整理

ul: unordered lists
ol: ordered lists
li: Lists

ol 有序列表。

  1. ……
  2. ……
  3. ……

  表现为:

1……
2……
3……
  ul 无序列表,表现为li前面是大圆点而不是123

  • ……
  • ……

  很多人容易忽略 dl dt dd的用法
  

dl 内容块
  dt 内容块的标题
  dd 内容
  可以这么写:

标题
内容1
内容2

  dt 和dd中可以再加入 ol ul li和p
  理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

LI代码的格式化:

A).运用CSS格式化列表符:

以下是引用片段:
ul li{
list-style-type:none;
}

B).如果你想将列表符换成图像,则:

以下是引用片段:
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}

C).为了左对齐,可以用如下代码:

以下是引用片段:
ul{
list-style-type:none;
margin:0px;
}

D).如果想给列表加背景色,可以用如下代码:

以下是引用片段:
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}

E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:

以下是引用片段:
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!

F).LI中的元素水平排列,关键FLOAT:LEFT:

以下是引用片段:
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}

  • 的区别

  • 的参数设定(常用):

    例如:

  • type=”square”

    只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type=”disc”:

    以下是引用片段:
    符号 是当 type=”disc” 时的列项符号。
    符号 if” width=10 height=10 border=0> 是当 type=”circle” 时的列项符号。
    符号 是当 type=”square” 时的列项符号。
    value=”4″

    只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。

      称为无序清单标记。

      所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。

      的参数设定(常用):

      例如:

      type=”square”

      设定符号款式,其值有三种,如下,内定为 type=”disc”:

      以下是引用片段:
      符号 是当 type=”disc” 时的列项符号。
      符号 是当 type=”circle” 时的列项符号。
      符号 是当 type=”square” 时的列项符号。

      是项目列表,
    • 是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点,还有一个是
        这个是编号列表,用数字来列的,也是用
      1. 做列表项

      2. 是 list item 即列表项,但列表有很两种,所以外面得有
          或者
            用来区别无序列表(小点点)和有序列表(1,2,3…)。

css 书写规范

/* ~~ 元素/标签选择器 ~~ */
ul, ol, dl { /* 由于浏览器之间的差异,最佳做法是在列表中将填充和边距都设置为零。为了保持一致,您可以在此处指定需要的数值,也可以在列表所包含的列表项(LI、DT 和 DD)中指定需要的数值。请注意,除非编写一个更为具体的选择器,否则您在此处进行的设置将会层叠到 .nav 列表。 */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* 删除上边距可以解决边距会超出其包含的 div 的问题。剩余的下边距可以使 div 与后面的任何元素保持一定距离。 */
padding-right: 15px;
padding-left: 15px; /* 向 div 内的元素侧边(而不是 div 自身)添加填充可避免使用任何方框模型数学。此外,也可将具有侧边填充的嵌套 div 用作替代方法。 */
}
a img { /* 此选择器将删除某些浏览器中显示在图像周围的默认蓝色边框(当该图像包含在链接中时) */
border: none;
}

/* ~~ 站点链接的样式必须保持此顺序,包括用于创建悬停效果的选择器组在内。 ~~ */
a:link {
color:#414958;
text-decoration: underline; /* 除非将链接设置成极为独特的外观样式,否则最好提供下划线,以便可从视觉上快速识别 */
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* 此组选择器将为键盘导航者提供与鼠标使用者相同的悬停体验。 */
text-decoration: none;
}

/* ~~ 此容器包含所有其它 div,并依百分比设定其宽度 ~~ */
.container {
width: 80%;
max-width: 1260px;/* 可能需要最大宽度,以防止此布局在大型显示器上过宽。这将使行长度更便于阅读。IE6 不遵循此声明。 */
min-width: 780px;/* 可能需要最小宽度,以防止此布局过窄。这将使侧面列中的行长度更便于阅读。IE6 不遵循此声明。 */
background: #FFF;
margin: 0 auto; /* 侧边的自动值与宽度结合使用,可以将布局居中对齐。如果将 .container 宽度设置为 100%,则不需要此设置。 */
}

/* ~~ 标题未指定宽度。它将扩展到布局的完整宽度。标题包含一个图像占位符,该占位符应替换为您自己的链接徽标 ~~ */
.header {
background: #6F7D94;
}


12位知名CEO的成功创业经验分享

彼得·科比特(Peter Corbett)是市场战略咨询公司iStrategyLabs的现任CEO,作为一家正在成长的初创公司的年轻管理者,彼得表示自己从其他成功的CEO那里吸取了很多宝贵的见解。日前他便撰文总结了科技界中自己最敬佩的十二位知名CEO以及他们的成功创业经验,分享给想要创业或者正在创业的人们,希望能从中得到一些激励与启发。

Daniel Ek,CEO,Spotify

“明确最重要的五件事,然后专注于此并能不厌其烦毫不动摇地重复下去。少就是多。”

Dennis Crowley,CEO,FourSquare

“不要让别人的否定动摇你对自己想法的坚持。如果你有预感自己所做的事情会成功,那么就义无反顾地做下去,忽视那些否定者。”

Sarah Prevette,创始人,Sprouter

“只管去做,将想法付诸实践,然后吸收反馈意见,进行相应的调整,竭尽全力,持之以恒,永远不要失去你的信念和骄傲。”

Sarah Lacy,CEO,PandoDaily

“跟随你的直觉。它可能是错误的,但如果你因此失败了,自己也不会后悔。但如果你忽略了自己的直觉,失败后才会后悔。”

Craig Newmark,创始人,Craigslist

“想要别人怎样对待自己就得先怎样对待别人,学会把这一点应用到客户服务上。”

Gary Vaynerchuk,CEO,VaynerMedia

“为客户而工作,而不是为了媒体或者VC。从长远角度看,最终用户才是最重要的。”

Jason Goldberg,CEO,Fab.com

“选择一件事,只做这一件事,然后把它做得比其他任何人都要好。”

Alexis Ohanian,CEO,Reddit

“做别人想要的东西,然后比其他人对它有更多的苛求,那么你将做出让别人喜爱的东西来。”

Matt Howard,CEO,ZoomSafer

“初创企业的智慧:一个CEO的首要工作是不要把资金全都用光。”

Brian Wong,CEO,Kiip

“要一直向他人学习。每当你和某人见面时,不要一心希望从他们那里索取什么,而是想着从他们身上学到东西。”

Hooman Radfar,创始人,Clearspring

“学会分享成功,独自承受失败,才能成为伟大的人。”

Alexa Hirschfeld,CEO,Paperless Post

“用户和员工是企业成功的关键预测指标,而媒体和投资者们总是要比他们后知后觉几个月。”


不错的用户心理特征及分析

近半年持续关注了一些用户反馈和客服电话,从一些常见问题中总结出了八点互联网用户常见心理特征,在此共享,希望能共同努力提高用户体验。

1:惯性

用户:“你们的排序按钮为什么没有了?”

客服:“亲,我们把它放在右边了,这样更加的明显哦。”

用户:“你们很闲吗?没事弄这个按钮做什么!”

有一个故事,说的是将奶酪放在了迷宫的第三个格子,然后放一只老鼠进入迷宫,第一次的时候,老鼠先找第一个,再找第二个,最后在第三个格子中找到了,很高兴。第二次的时候,先找第一个,再找第二个,又再第三次的格子中找到了,很高兴。第三次的时候,老鼠直接去了第三个格子,找到奶酪。第四次,第五次,奶酪没有动。第六次的时候,奶酪被移入了第一个格子,老鼠看不到奶酪,于是生气,郁闷,焦躁,原地打转,却放弃了继续寻找。

人和老鼠一样,甚至比老鼠更加的具有惯性,更加的善于总结规律,更加的容易感觉生气和不爽。一旦他学会了用一个按钮,第二次一定会去原地按照原来的方法使用。如果位置或者方法和以前不一样,他会很不习惯,并且认为这是一个非常不爽的改变。所以如果产品经理要改变原有的规律一定要三思再三思,即使你知道你是在让原来的过程更加的美观,更加方便,更加的绚丽,也请考虑到原有老用户的习惯。在吸引新用户的同时如果让老用户少去学习是产品经理需要综合考虑的问题。

2:我就是全部

用户:“你们的平台真烂,我商品的显示全部错了。”

客服:“亲,别人的都是好的。是不是你设置错了?”

用户:“别人和我有什么关系,我的商品显示出来就是错的!”

看上去蛮不讲理,但是每个人都是自己世界的国王,他对他自己全部的负责,所以当我们很轻易的说少数人的时候,也应该去体会这少数人的全部世界,他和我们关心自己的kpi,关心自己的晋升一样关心着自己的小店铺,对我们来说的沧海一粟,对他们来说也许是他们最珍惜的珍珠。承认彼此的平等,也正是这些微不足道给出反馈的用户帮助淘宝一而再再而三用户体验的改进,他们是我们最优秀的不取工资还不断帮我们提交bug的用户测试工程师,对于如此无私的行为,我们是应该感谢了?还是感谢呢?还是感谢呢?

3:第一印象很重要

用户:“你们应该提供一个**的功能。”

客服:“亲,我们有了。在**的链接上可以链接进去。”

用户:“我之前用过,一点都不好用。”

客服:“我们改进了,你再试试。”

用户(一段时间之后):“我就说过不好用,你看看,还有***都不是我想要的。”

第一印象一旦形成,接下来所有的关注力都是为了证明自己的第一印象是正确的。所以,不要责怪你的用户不够宽容,不够拥抱变化,不能理解你持续的努力,是你在之前没有竭尽全力去给他一个好的体验,一个满意的结果。所有单身的同学注意了,别随便糟蹋自己的形象,很可能在某一个你没有准备好的时刻,你的Mr right就出现了,然后你需要很长很长得时间去重塑你的新形象。

4:相信熟人

用户:“我朋友说你们的这件商品很好,我也要一件。”

这是买一件东西最肯定的理由,经常在人多的地方听到一堆的女生在说这样的对话:“你的衣服很漂亮,在哪儿买的?”“在淘宝。”“快把链接发给我。”每次听到这样的言语都忍住不的微笑,因为成为这家有意义公司的一员而骄傲。感谢这些八卦的女生们,她们用言语证明了淘宝的价值,她们是淘宝最佳的代言人。

5:简单

用户:“能不能不要让我回答这么多问题,填这么多信息。我只是想买一件衣服。”

刚开始的时候我们曾经想做成最简单的产品,随着时间的发展,随着需求的深入,随着问题的展开,我们经常看到的是一个复杂不堪的产品。然后用户望而却步:“知道吗,我对你每一步的迈出和深入都需要勇气和热情。但是在得到真相之前,我不确定的我的这种付出是否值得。”所以,别让潜力用户在漫漫长途中放弃。是我们的重重关卡将他们拒之门外。

6:文字图片结合

用户:“能不能在文字上直接给张图片?看着直观漂亮。”

用户:“能不能在图片旁边写上文字,否则不知道是在卖什么,干什么。”

人的头脑分左脑右脑,右脑喜欢图片、直接感觉;左脑喜欢文字,思考。有人喜欢右脑思维,有人喜欢左脑思维,作为产品的设计者,不用纠结,不用分类,让用户的2块头脑都得到充分的享受和利用吧。图片文字合理完美的结合是对不同用户最好的尊重。

7:金钱安全

用户:“我把钱放在你们这儿安全吗?你确定吗?”

用户:“你确定我的退款能成功吗?我把货退还给他了,钱能拿回来吗?”

金钱永远是让人担心的东西,金钱的安全一定是用户的第一考虑,如果我们不能给他们金钱的安全感,我们就无法留住用户,比金钱更加重要的应该是用户的信任和信心,所以在金钱的安全和保障上付出任何的努力应该都值得。

8:搜索准确

用户:“你们的搜索真差,我找不到我想要得商品。”

客服:“能告诉我你想找什么吗?”

用户:“我就想要自己喜欢的东西。”

客服:“。。。”冷汗直冒中

也许我不知道自己想要什么,但是你们应该知道我想要什么。这是很多用户的心理,我也是。永远不要指责用户的无理取闹,就像不要指责女生的善变。如果你足够把她放在心上,你应该会知道她喜欢什么,想要什么,会买什么。她的每一次浏览,每次点击,每次购买都在告诉你她喜欢什么,想要什么,这些都是她给你的机会,不要浪费。

9:保护私隐

用户:“你们太过分了,你们把充气娃娃让我爸爸接收了,然后,然后。。。他还当场打开了。”

每个人都有自己的私隐和不想让人知道的信息,不可以想当然的将这些信息透露出去,信任的建立很困难,需要很长的时间,信任的失去也许只是一瞬间,一个不小心的安全漏洞,一个不合适的需求,一次不小心的透露,我们就可能摧毁我们和用户之前长时间建立的信任关系。珍惜用户包括珍惜他提供给你的一切信息。

我常想,作为产品我们应该把用户放第一,作为员工我们应该把公司放第一,作为主管我们应该把员工放第一,可是这么多第一,谁是真正的第一?问问自己的良心吧,你能坦然面对你所有的客户、员工、团队成员问心无愧,能堂堂正正说出自己所做所为所思所想,应该就是真正的成功了。

作者:霜波

文章来源:ued.taobao.com


基于air 涂鸦式的原型制作软件 Balsamiq Mockups

Axure PR 是目前比较流行的 Web产品原型软件啦。今天无意看到一个涂鸦式的产品原型制作软件-Balsamiq Mockups。 这个软件是基于 adobe air 制作的。想试试的朋友,就要先装一下air了。

桌面版下载安装地址:http://www.balsamiq.com/products/mockups/desktop#download

其相关资源下载:http://www.mockupstogo.net/

注册码:
organization name:leexij@gmail.com
Serial Key:eNrzzU/OLi0odswsqslJTa3IzHJIz03MzNFLzs+tMTQyNrcwsTQyAIEa5xpDAIFxDy8=

Balsamiq Mockups 支持 桌面程序、网站、iphone、等各种软件产品原型的制作。


6个炫酷的CSS按钮制作教程

CSS3的transitions和animations属性都可以用来实现风格渐变的效果。本文即收集了一些非常不错的利用它们来制作Web按钮的教程,希望你会喜欢。

1. Type study: An all CSS button

通过本文介绍的使用box-shadow、text-shadow、border-radius以及CSS gradients(渐变)方法,我们可以设计出一个非常漂亮的界面组件而无需使用图片。

2. Radioactive Buttons

使用CSS animation设计漂亮优雅的按钮,带来跳动的体验哦。

3. Animated Buttons with CSS3

这个教程指导了如何在按钮上设计一些动态链接元素,包括多种风格与悬停效果,非常有创意。

4.CSS3 Animated Bubble Buttons

在本文你将学会如何借助CSS3中的多背景功能来设计一系列相似按钮。

5. Cross Browser Pure CSS3 Button Demo(跨浏览器的纯CSS3按钮实现)

已经在Mca下的Safari 5、Firefox 5、Chrome 12和Opera 11.5中测试过,IE的话就不勉其难了,或者你可以试试。

6. CSS Only Button

此教程只利用CSS和HTML来设计完善的动画按钮,不使用任何JS及图片。

Via iDesignow


移动产品设计之需求分析

需求分析的首要任务就是明确哪些需求是用户的核心需求,在我们的日常工作中,需求搜集是一项很重要的工作,然而面对多方的需求来源(竞品分析、用户反馈、用户研究),究竟该如何抓住用户的核心需求?又有哪些原则可以遵循呢?

反问思考法

面对列出的众多没有章法的需求,我们往往是先一条一条的过,但是往往我们自己心里都没有底,你说这个需求重要,她说这个需求是必须的,当遇到类似的情况时,可以运用“反问思考法”,所谓反问思考法,就是在面对一条功能描述时,首先要反问,增加这个功能对产品来说有意义吗?我不加他对产品有什么损失吗?假如你半天想不出来,那么就可以考虑将他pass掉.

80/20法则

在现有的移动设备领域,关于如何抓住用户的核心需求,两个著名的设计哲学代表HIG和zen of  palm也没给出一个明确的答案,zen of palm只是给出了一个法则:80/20法则,就是用户花80%的时间去解决的问题,构成产品的核心需求;剩下的20%则直接放弃。

少就是多

这个思想来源于包豪斯学派,最初使用在建筑领域,后来被用到工业设计领域,而乔布斯本人也非常推崇,特别是在手机的使用环境中,受天然的屏幕限制,功能越多,产品就显得越繁杂,面对浩瀚的功能,这时用户往往会选择放弃使用。而面对激烈化的手机桌面争夺战,就那么一点空间,保持产品的简洁是不能不考虑的.
遵循少就是多的原则,只关注用户的核心需求,把它做到完美、极致,是留住用户的基本原则.在这方面Apple是个典范 。关于这一点《zen of palm》 里有两个谜语,非常形象.

1.大猩猩如何学会飞?

Image

大猩猩怎么会飞呢?一只会飞的大猩猩还是大猩猩吗?当然不是,所以猩猩就应该做猩猩该做的事情,其他的就交给鹰好了

2.一座山如何放到一个碗里?

Image0.

一座山怎么可能放到一个碗里?我们真的需要那么多泥土吗?当然不需要,所以只要把钻石找出来放到碗里,把石头扔了!要那么多泥土干嘛!

合理的组织

当按照大猩猩原则,我们列出了一个长长的功能列表时,往往会陷入下一个纠结的境地—该如何组织这些功能?这些核心功能里的核心需求又是哪些?在这之前,先看看《zen of palm》提到的一张图:

这张图指出了PC和移动设备上功能和用户体验的利害关系,在产品初期,功能的加入可以提升用户体验,而当功能越加越多,产品就会显得冗余繁杂,这时就单个功能来说它可能很好很有特色,但是对总体的用户体验却是种伤害,既要加这个核心需求又不能对整体的用户体验造成伤害,这真的不简单,有解决办法么?在《简单法则》我找到了答案:合理的组织可以让复杂的产品化繁为简,不仅如此,经过一定的组织更容易让用户关注核心功能。

传统的cd播放机按钮实在太多,一个可能的解决办法就是拿掉快进、快退、上一首、下一首之类的按钮,只剩下:播放/暂停,但是假如这首不是我想要的,需要听下一首怎么办?所以不能将上一首、下一首去掉,但是他们的地位没有播放、暂停高,这时候经过合理的组织,产品的感觉完全就不一样了,例如ipod shuffle 5,将上一首、下一首隐藏在了音量“+”“-”里面,连按两下是下一首,连按三下是上一首,这样不仅合理利用了空间,让产品显得更小、更轻,而每每这些隐藏的功能被发现时,都是惊喜.

所以经过合理的组织,我们还可以总结出一条需求分析原则:即只关注核心功能,去掉不需要的功能,必要的功能将其缩小隐藏.就像多功能刀,当你将所有功能都展开的时候,它什么也做不了,而当你每次只展开一个功能,将其他的隐藏,他才成为一把多功能刀,当然按照大猩猩的哲学,最好就是一把简单的刀,没有其他任何功能,但这对于大多数拥有一定数量级用户的产品来说显然是不现实的.

201082315435825536830副本

要学会平衡

上面提到过功能和用户体验的利害关系,在《zen of palm》里把功能和用户体验的完美平衡点叫做“甜蜜点”,这个甜蜜点是个最佳状态,多加就多了,少加就不够。但是一个问题出来了,当到达这个“甜蜜点”时,是不是所有人的任务都完成不需要再改进了?答案当然是否定的,要知道在IT行业,瞬息万变,竞争是以天数来记的,而这个“甜蜜点”要跟着行业趋势的变化而变化,在不同的阶段“甜蜜点”是不同的,也就是不同的阶段重点不同。

这个变量“甜蜜点”究竟该如何把握?这是最难的一点,它需要大量的实践和明确产品所处的阶段,在配以准确的行业分析才可以.


张小龙的产品设计哲学(笔记)

从Foxmail到Foxmail被腾讯收购,再到QQmail以及现在极为火爆的微信,张小龙做为互联网圈一位极其低调的产品经理,渐渐被揭开面纱,甚至开始被罩上光环为圈内人推崇。尤其是最近和菜头在知乎上一篇文章:腾讯的张小龙是一个什么样的人? 更是让张小龙近乎成为一个传说…

以下是一篇张小龙关于产品方面的经验分享,程苓峰更是把它概括为张的产品心法:说这是张小龙的产品心法。张说的“产品经理的心态”,其实我觉得也是记者的心态:求知,而非任务;辩驳,不为自尊心而战。张说的“产品的人性”,其实也是新闻采写的人性:你说我是错的,那你最好证明你的是对的。张以“我说的都是错的”开头,这也是和菜头和Keso的自我标签。职业有不同,境界无不同。

以下转自互联网:

一个笑话:为什么苹果的手机只有一个按钮?

-Martin:一个按钮容易坏——你懂得

- 小龙:白底+按钮,就是马桶→iPhone的主设计师原来设计厨卫产品

-IOS的哲学思想值得思考

1.为什么简单是美?

- 比如夏天女孩子穿得少(就是美),而windows的多任务切换alt+tab就很不人性。

- 任何一个好功能,不需要任何文字来解释【我们有很多细节可以反思,比如】

- 如果做到最简化,就可以让别人无法超越(和米聊等的竞争为例)

微信摇一摇的设计

- 代号撸一撸

- 来福枪的声音(最早对女生是丁玲声之类,后来发现这个更好)

- 过程动画由“维纳斯”变为“小花”(大家对维纳斯这种艺术有挑战,so花,即菊花)

- 摇的过程可以“插”(即换背景图,很多女生都发现了)

- 这里的体验是最原始的(性),体验要让你很爽

- 在研发一个“摇动能量采集器”的特性,采集后会捐赠做公益

2.PM是站在上帝身旁的人

- 为什么女生愿意用微信——女性会比收到多少个“打招呼”,她们不怕骚扰

-推荐书目:《女人的起源》http://book.douban.com/subject/2222424/

- 上帝建立简单规则,让世界演化

- (让他们)stay hungry,stay foolish

- 满足他们的贪嗔痴(即贪婪嫉妒欲望)

- 对人性的洞察,胜过对管理,对产品的洞察

- 一个字来形容产品体验:爽。两个字:好玩。

- 用户看到的重点和你看到的不一样【对于女生为什么用微信,让小龙很震撼】

- 360“口信”省钱的方向是无法和微信竞争的

- 找到用户心理诉求的本质。微博:炫耀,害怕孤独,害怕利群,有罪感。。。如何化解?

- 一个内心强大的人是不会写微博的http://blog.sina.com.cn/s/blog_4701280b0102dxmp.html(韩寒)

- 一般人做不到自言自语

3.互联网产品和传统工具的区别

《失控》http://book.douban.com/subject/5375620/【小龙说微信的每个PDM都要求读一遍】

- 群体智商低于个体智商(上微博越多智商越低)

- 群体是个完整生命

- 群体反应是难以预测的:实验,而非策划

- 产品规则越简单,越能让群体自发形成互动(摇脑袋实验)——会议室里一起摇微信,所有人都能被发现

- 做让群体产生活力的工作,做加速器

- 让一只蝴蝶引发一场风暴

 案例:人海进去后先问是男是女

4.产品定位

- 功能不等于产品

- 功能是满足需求,定位是满足心理诉求

- 定位是单一的,功能是多元的

- 功能很难取胜,定位可以

- 思考:QQ和微信的区别是什么?

- 小龙:微信不是QQ→微信不是一个聊天工具→微信不仅是一个聊天工具

- 思考:腾讯微博和新浪微博的区别是什么?

- 微信3.5,开始我的“信”生活

- 一般的升级都把用户当成专家了

- 尽可能不要把技术指标暴露给用户,比如不用“下载”【我们有很多细节可以参考,比如】

- 微信做了个很扭摆的创新,即可以抠GIF动画为透明背景

5.设计,而非功能

- 设计围绕定位而作,功能围绕需求而作

- 设计的目标是体验,功能的目标是kpi

- 产品是功能,体验,品味的有机结合(Q,微)

- 产品是个创作过程你在完成kpi,还是在创作?

6.产品的人性

- 有bug也是一种人性的体现

-Jobs:产品是技术和艺术的结合

- 允许人性的缺陷,勿将人机器化。(微信没有做“已读”)

- 人性化用户交流。(微信通知邮件的末位,署名一个真实的产品经理)【我们可以在官方博客和官方邮件时都借鉴下】

- 产品是我们和用户交流的媒介。(找到同类) 自然原则。(看看iOS和windows的区别)

- 腾讯用户低端的辩证:我们本身不是低龄的人,为什么要做成低龄化的产品

7.只做一件事情

- 一个产品只有一个定位

- 一个定位只有一个主线功能

- 一个功能只做一件事情

- 勿将所有功能都罗列在主界面。

- 回顾:微博上有多少功能了?微信(小龙向tony保证两年之内主TAB不超四个)

案例:两行按钮很不好,需要用户思考

8.如何聚焦?

- 如果核心功能没有活力,增加再多辅助功能都于事无补

- 新功能真的有助于提高用户活跃度吗?做之前这么问自己(假如不上,会有什么影响?)

- 新功能会破坏产品架构吗?(滤镜)

- 每增加一个功能,都带来了长期的产品维护成本。

9.如何获取用户心理?

- 研究用户心理,就是研究自我。

- 让自己用得爽起来

- 傻瓜心态来体验产品(Jobs可以马上变为傻瓜,pony可以1分钟,小龙自称5-10分钟)

- 逻辑推理,不如CE用户,感知趋势;数据不一定对,不一定有CE有用

- 习惯决定意识。多用好产品。

-1000,100,10 每周,长期坚持(每周看1000篇帖子或微博、100篇博客,做10个CE)

- 移情:将酣畅淋漓的体验移植到产品中(mj)

 案例:QQ邮箱左侧右下的“我的附件”,这种产品思路是不对的【经典案例】

10.做人人都想用的产品

- 用户是懒惰的:面向懒人做设计(reader,twt,爱看,20篇马桶阅读)

- 用户不愿意想(don‘t make me think)

- 让普通大众用户用起来

- 省钱适用不如花钱时尚

- 找到功能背后的心理驱动力

11.碎片化产品

- “web已死”,app来了

- 每个明星都是一个app

- 用完就走,给用户自由

- 插件,而不是集成

12.要避免的习惯

- 产品之初就开始拉动

- 打通,整合

- 向竞争对手学习(不要把跟随做为一种策略,不要在乎一城一地的得失)【个人理解是不要直接学习国内竞争对手,但可以多学习国外同类产品,比如QQmail高度学习了Gmail 1.0,iPad版也高度学习了Gmail iPad】

- 按规划行事(小龙不知道微信的下下个版本有哪些功能)

- 看重注册用户(Email活跃定义为1个月内登录过三次且发过一封邮件)

- 用户要什么就给什么

- 嘲讽别人抄袭。那只是给自己的平庸找到一个心安理得的理由

- 重视评论家的意见

- 定义复杂的逻辑和形态 (清晰,保留变化)【先把最基础的体验做好,尽量简单】

 案例:漂流瓶web版的当前方向是不对的——事情越来越复杂,变成一个强运营产品,这不是最好的方法,应该把底层规则梳理得越来越清晰简单。【经典案例】

13.产品之美

- 产品是有人流动的建筑

- 系统是由独立的子系统连接而成。一个功能不是简单叠加,是影响整个系统的。

- 可以没有文档,但心中要由架构

- 隐藏技术细节

- 如果不能做得优雅,就放弃

- 你的品位,决定了产品的品位

14.PM的心态

- 求知,而非任务。

- 辩驳,不为自尊心而战

- 可以偏执,前提是你富于远见

- 时刻怀疑自己的偏执,因为那可能是错的

- 实验者心态

- 面向两年后的环境来做设计

- 错的可以证明为对的(启动画面)

- 机会在路上

15.微博案例

- 重点用户是谁?普通人

- 核心需求?自我存在感

- 核心粘性?好友圈

- 好友多少?三五好友

- 如何口碑传播?产品时尚

- 如何滚动?时尚带来的口碑,以及系统推荐

- 如何方便互动?手机,分享生活

- 重点用户群?行业精英

- 你爽了吗?


url文件链接代码

后缀是.url

[InternetShortcut]
URL=http://ued.mobi/
IDList=
IconFile=http://ued.mobi/favicon.ico
IconIndex=1
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,2


关掉PS 拿起铅笔:创作缩略草图

screenshot
在Web UI之前,印刷设计师们使用一种称之为缩略草图(thumbnail sketching)的方法来尝试表达及完善创意。这种方法在现在的PC工具时代似乎已经失传。

这里我们将简要介绍什么是缩略草图,以及一些技巧来帮助把这门技术应用到你的工作之中。

在画线框图之前,先草图

screenshot
线框图(wireframing)的话题由来已久。不需要回避这个话题,许多设计师以及UI/UX专家们认为线框图是一个最基本以及整个项目中第一个步骤,让我们能专注在基础的架构上而不是多余的设计风格上的干扰。

另一种定义说的是线框图帮助我们关注于页面如何在最基本的层面上被构建。实际上,我经常在想为什么大家没有讨论比线框图更久远和成熟的一门兄弟方法:缩略草图。

缩略草图是类似于线框图的方法,只是他比线框图的所谓基础上,更加基础。让我们看看什么是缩略草图。

什么是缩略草图

名字听起来比较有趣,但你仔细去想的话,你会知道缩略(Thumbnail)是完全不搭的一个概念。例如当我提到缩略图相像(Thumbnail Gallery)的时候,你会自然想到这是一个有很多小图片组成的一个相册的概览页,点击之后能看到各种大图。

正是这种含义,你可能能猜到缩略草图可能是一种小尺寸的手绘图。缩略草图的意义正是通过很短的时间在纸上创作大量的创意。简单说他是一种视觉化的脑力风暴的方法,当你不需要担心各种困扰和细节调整的时候,创作尽可能多的可能性。在某种形式上,他很接近线框图,只是更小,更快速一些。一般来说设计师可以创作很多小草图,然后再选择几个最好的继续跟进线框图。

screenshot

如何去做

开始创作的话,只需要拿起一个铅笔先画几个简单的空方块代表你的浏览器外框、页面边框或任何你需要工作的东西。你甚至可以找到一些可以打印的模板来帮助你快速开始。

screenshot

现在起 ,你可以开始你的创意了。这并不需要你专注于你的手头画功,相反你需要专注在如何生成创意。缩略草图是一个快速的甚至可以说是偷懒的作法。使用最基本的形状,不要在单一图形上花太多时间,只要你找到了你想要的基本构图或创意是什么样子,就可以停止继续下一步。

为什么这样更好?

screenshot

你能从纸上的小草图中获得什么呢?你可能会吃惊,作为设计师,我们很容易陷入到狭窄的认知中,在使用电脑创作的过程中,我们太容易创作一个接近完成的事物。

问题在于当你花费时间在一个创意上的时候,你会不自觉的在心理上保护你的创意。不幸的是,你的第一个创意通常来说并不是你最好的。

当你已经把你的主意开始付出实现的时候,放弃他再从事一个新的创意就变得更加困难。你继续在旧的创意上发展因为你的大脑已经卡住了。就算你没有这样的问题,你还是会花很多时间去发展新的创意。

这种方法的缺点是你并没有将发展创意作为一个重要的思考。“重要的思考”是指真正有价值以及逻辑上合理。相反的,你可能只是有三个创意,然后在这三个里面选择。你可能有办法想出10个更好的主意,甚至有机会比这三个更好,但你没有时间去完成。

使用缩略草图方法,你有可能真正发挥你大脑的作用,并强迫你自己开始真正意义上的创意工作,创作更多更丰富的选项。使用这种方法你可以找到更多的创意并仔细评估哪种方法更合适,并继续推进。

节省时间?

有些人可能认为按预定的设计时间表和节奏,已经足够完成最终的设计工作,不需要再花费额外的时间!但如果能成功的实施缩略草图的,学有可能在未来节约更多的时间。

首先,你不需要花一整天做这个工作。有时候生成创意可能只需要花十分钟,二十分钟,三十分钟,这完全取决于你。更重要的是,这个步骤的工作让你有机会在设计最终开始创作前能够审视和评估。你会发现你后面的设计更加快速因为你已经想得足够,而且知道哪个是最好的主意。

并不仅是排版?

screenshot

一般来说,当我提到缩略草图的时候,可能指的是有关排版方面的创意,其实这种方法可以作用于任何类型的设计。例如,LOGO的草图设计在开始可能就是一种很粗略的草图设计方式。

拿起铅笔,开始创作上百种创意似乎是非常自然的一种LOGO设计的方式,所以为什么不这种技术到其它的设计领略呢?

招贴、网页设计、手册、名片、应用程序界面、字体设计,所有这些类型的设计都可以从几分钟的缩略草图开始。

缩略草图的技巧?

screenshot
现在你知道了什么是缩略草图以及如何应用他到你的工作流之中,让我们用一些技巧来帮助你更好的开展。

保持低精度

我们中的一些人非常善于绘画。但有一部分人却非常惧怕铅笔因为无法表达绘制出完整的草图。

但在我们现在的例子中,这些不善于绘画的人也许更有优势。如果你不能画,太好了,你非常适合创作缩略草图。那些非常善于绘画的人们可能会花更多的时间去创作缩略草图因为他们太追求每一条直线是否平直,以及圆是否更圆。

我们只需要知道的是,应用这种技术的关键在于量而不是质。我并不是反对完美的草图,事实上,我非常喜欢看那些顶级艺术家的草稿,但你只需要确定你的目标是将这些创意从你的脑子中转到纸上即可。例如,你只需要画一个长方块,事后你记得这个代表着这上标题文字就好了,而不需要再去逐字字句的写上文字。

向前推进

另一事需要记住的是避免花太多时间去打磨一个创意。如果你画下了一个创意然后你觉得并不喜欢它,千万不要擦掉再重新开始。简单的放在一边继续你的下一个创意。也许几小时后你再回头看的时候会发现这个创意也许不错。

越多越好

当你绘制创意时,不要在5到6个的时候就停止。你是创意专家,你应该有更多的方向。我知道设计专业的教授有时候会让学生每次为同一个项目创作25个或更多的草图。这样的数量会更加激励创作。

不要画同一个东西50次

当我们开始创作更多的草图的时候,你的第一直觉可能会使得你大部分创意看上去都差不多。这种情况非常常见。努力去让大脑发挥 他的作用,去创作更多的独特和不同方向的概念。记住现在这个阶段只是脑力风暴阶段,所有的一切都不一定是不好的创意。更疯狂,出格一些。

完成时注意留存

如果可以,尽量把这些画下的草图留下来供以后参考。当你更深入的进入到项目中的时候,你也许会回头再看看之前的创作。你也许已经失去了专注点你需要看看这些开始的主意来帮你找回来,你的客户也有可能不喜欢你的创意你可以再回到草图中寻寻宝。

screenshot

我常干的一些事情是找一支压感笔在我的iPad上使用像Adobe Ideas或iDraw一类的软件创作一些草图。使用数字产品记录我的草图对我来说非常有帮助,因为可以帮我留存这些记录。然后再导入到Illustrator或Photoshop中进行下一步的处理。

总结

让你最终的想法画成缩略草图也许在一开始比较烦恼,但是一代你这么去做了,你会发现你会非常享受这个过程。对我来说,一个项目中最美妙的阶段就是开始的时候,在我开始为细节烦恼前,去创作无数的可能性。

也许缩略草图并不适用于每一个人。如果你不觉得这个有帮助,那就不用浪费时间。但是,我推荐你在一些项目中做一些尝试。看看你是否能够真正开动脑子发现一些更棒的创意。

如果你使用这个方法,不妨留下链接让我们看看你画的这些草图!

照片版权:Dan Lurie, Tobias Soft (1)(2), nunileJeremy KeithShawn Campbelland CannedTuna.

原文链接:Design shack

翻译:Experience10.com