Mac OS X 鲜为人知的细节设计 TOP 10

随着老罗把「情怀」二字引入到了中国互联网,越来越多的产品设计开始关注这个「情怀」了,更不要说作为开山鼻祖的Apple公司了,这里我们就先来看看在这个历史悠久的MAC操作系统中是如何带给我们「情怀」的。

让我们一起来聊一聊有关 OS X Mountain Lion 的十大细节设计,不过在开篇前先说个题外话。

59451-6c37b56a508a6f7b

1997 年,德国大众启动了一项名为 D1 的项目,目的是打造一台可以与奔驰 S-Class 和宝马 7 Series 相抗衡的高端豪华轿车。众所周知,这辆车就是 Phaeton「辉腾」。鉴于它是一辆挂着 VW 标却最高可以买到 250+ 万的车,所以关于它的段子从来都不缺素材。

某日,一辉腾车主去洗车,旁边一位捷达车主慢悠悠的踱了过来,绕着辉腾看了两圈,然后对辉腾车主说:老兄,你这辆帕萨特是不是才下线的?辉腾车主一脸无奈,点头说了一个「嗯」字。捷达车主又说:样子还凑合,大概要 30 万吧?辉腾车主再次无奈,再次回答「嗯…」

看到这里或许你会奇怪为什么要在一篇 OS X 的文章中讲一辆八杆子打不着的汽车。别急,之所以提到 Phaeton,是因为在我看来它和 OS X 有着一个共同的设计理念,那就是「力求完美,细节制胜」,所以容我再多说几句。

Phaeton 在设计初期,时任大众总裁的皮耶希给他的工程师们在技术参数上提出了十项只许成功不许失败的要求。据说由于太过苛刻,还导致了部分工程师的离职。而传说中的这十项要求也因商业机密的限制而未过多被外界得知,就连 Top Gear 在试驾其 W12 车型的时候也只是拿到了其中的一条,即这款车在环境温度 50°C 的条件下,要具备 300km/h 的全天候巡航能力,并始终保持车内 22°C 的恒定温度。

在这种近乎挑战工程技术极限的高要求下,Phaeton 在细节上的追求也达到了令人惊愕的地步。比如其独特的「无直吹风四区域空调」,不仅在气流的走向上可以让车内人员感觉更自然,而且每个座位间的独立温度调节可以达到 4 度的温差效果。再比如「交替式大灯清洗器」,可以在行车途中对车前灯进行交替式的清洗,即清洗完一边,再清洗另一边。原因是考虑到在光线不好的路段清洗车灯时依然可以保证一定的照明效果,确保行车安全。Phaeton 全车共注册了 100 多项专利,在德累斯顿玻璃工厂通过半机械半手工的方式进行打造。虽然总被人拿帕萨特打趣,但其雷打不动的低调外形和近乎偏执的高水准工艺,使得在豪华车领域始终保持着一种特立独行的高贵品质。

说回到 OS X,其实又何尝不是如此。在其精致却不张扬的 UI 下所蕴藏的是无数对于细节的追求。这些细节下的设计总会在不经意间让你体会到水果对于完美的定义和对用户体验的追求。所以我在 OS X 中选出了自认为「少数派」的十项细节设计。或许这些对于资深老鸟来说可能早就土星了,但我相信对于大部分的 Mac 初学者来说还是有很多是不知道的。当然,我所知有限,如果你有更好的,欢迎补充。

TOP 10

59451-8f0301dfeff12d98

要获取 MacBook / iMac 产品序列号,通常的做法是点击屏幕左上角的苹果图标,然后依次进入「About This Mac」–「More Info…」,但还有一种更便捷的方法,只不过它像彩蛋一样被巧妙的藏了起来。同样是点击左上角的苹果图标,然后选择「About This Mac」,在这个界面中会看到一行浅灰色的系统版本号,把鼠标指针移上去点一下,你会发现它可以在三种不同的信息间进行切换,而其中一项就是当前产品的序列号。

TOP 9

59451-9d590276f236e131

提到 OS X 的「System Prefernces」相信用过 Mac 的人都不陌生,不过要说到其右上角的搜索功能恐怕就不一定了,毕竟设置项都一字排开摆在那里,熟悉之后用到搜索的几率还是很低的。我也是很偶然的一次机会用到了这个搜索,没曾想这个搜索的展示方式被设计的如此巧妙。它采用了类似舞台聚光灯式的效果将搜索结果一一标识出来,并且光圈的亮度与关键词和结果的匹配度成正比,即匹配度越高则越亮,反之亦然。视觉效果很棒,手里有 Mac 的可以试试看。

TOP 8

59451-84438fe79b39d7f3

无论是什么系统,「帮助」都是必须有的一项「重要」功能。之所以给「重要」打上引号,是因为从产品设计的角度去看,无论简单还是复杂,一本说明书总还是要有的;但是从用户需求的角度去看,「帮助」最好是一个不需要有的东西,即便有,也该像搜索引擎那样做到精准快速的让用户找到所需的东西,然后离开。由于 OS X 将所有应用的菜单都集中在了屏幕顶部进行统一管理,所以在其「帮助」功能中,有一项非常特殊的设计。当你突然忘记或想知道某个功能在菜单中位置的时候,只要在应用的「帮助」中搜索该功能的关键词,然后将鼠标指针移到对应的搜索结果上,这时相关的菜单会自动展开,并将目标结果的位置准确的标识出来。

TOP 7

59451-31bdacdbb36e55c9

用过 Windows 的朋友都知道,当多窗口运行时,用户正在操作的窗口通常被称为「当前窗口」,它会较其它「非当前窗口」以高亮的形式展现,并且层叠的位置也在最上。当用户需要对某个「非当前窗口」进行操作时,则必须进行窗口状态的切换才行。而在 OS X 中,「当前窗口」和「非当前窗口」的概念依然存在,不过在对「非当前窗口」的操作中,是可以不进行窗口切换即可完成的。只要将鼠标焦点移至「非当前窗口」即可对其进行滚动操作,如若按住 Command 键,这时鼠标就具有了穿透功能,不管屏幕上叠了几层窗口,只要可以看到就可以操作,点击、滚动,甚至拖动窗口也都不是问题。

TOP 6

59451-007c57654ccfffb0

我们都知道无论是在 Windows 还是 OS X 中,对窗口尺寸进行调节的时,鼠标指针的状态会变为指示相应方向的箭头。但如果你仔细观察过,会发现 OS X 的指针状态在某个时候会与 Windows 有所不同。现在你试着将某窗口贴紧屏幕边缘,然后将鼠标移至靠近屏幕边缘方向的边框,你会发现即便该边框已经无法向屏幕边缘的方向进行拉伸,但在 Windows 中鼠标指针依然显示的是一个双向箭头,而在 OS X 中却显示的只是一个指向可调节方向的单向箭头。

TOP 5

59451-baf145193b450c73

Finder 在「List」视图模式中可以显示更多的文件属性,其中有关「日期」的属性共有四种,分别是「Date Modified」「Date Created」「Date Last Opened」和「Dete Added」。当你改变其中任何一项的属性栏宽度时,会发现显示在其中的日期会随着宽度的变化而改变格式。比如属性栏最窄时只会以短格式显示日期,而属性栏最宽时则日期就会变为文字格式。

TOP 4

59451-63a906d5440726ac

Dock 栏作为 OS X 的标志性设计兼具了 WIndows 中 Start Mene 和 Taskbar 两者的功能。它除了显示常驻在此的应用图标,也会显示当前正在运行中的应用图标。如果你需要将某个应用常驻 Dock 栏,通常的做法是手动将其拖拽至此,或者是在其运行状态下勾选右键菜单中的「Keep in Dock」。不过水果在这里做了一个贴心的小设计,如果某个没有常驻 Dock 栏的应用在运行状态下被手动调整了顺序,那么水果会认为用户有意识将其常驻在 Dock 栏中,所以这种情况下便会「自作主张」的为你勾选「Keep in Dock」选项。

TOP 3

59451-64d00bef38a0edaa

我相信但凡用过 Mac 的人都不会对这句「用过 MacBook 触摸板后发现其它的触摸板都是战五渣」产生丝毫异议。事实上在水果软硬件一手抓的政策下,确实将触摸板和系统的结合在大多数场景下做到了视鼠标如无物的境界。所以在 OS X 的设计中,窗口滚动条在默认状态下都是隐藏的,只有在触摸板上做出滚动手势时才会显示出来。但如果系统检测到有外接鼠标「非水果自家的 Magic Mouse 或 Magic Trackpad」插入时,则会自动将滚动条的状态改为始终显示。

TOP 2

59451-a7ac5b99013bcae1

在对文件进行「重命名」的时候,为防止误修改「扩展名」而导致的文件不可用,Windows 和 OS X 默认都只会自动选中「文件名」的部分。但在 OS X 中水果做得更为极致,在目标文件是已知类型的情况下只会默认选中「文件名」部分,而当目标文件是未知类型时,则会默认同时选中「文件名」和「扩展名」。

TOP 1

59451-3b6789d315bf1535

把它列为 TOP 1 是因为这是一个隐蔽性极高的设计,从中你可以看出水果对细节追求的某种偏执性。而且我相信这个设计对于大部分人来说,甚至是资深老鸟,也不一定有过发现。一来是因为这项功能所使用的频率本就不高,二来是如果使用环境不是足够安静的话很容易被忽视掉。

当你在 OS X 中使用 Dictation & Speech 进行语音输入的时候,其识别率的准确度势必会受到环境音源的影响,即便是在相对安静的室内环境中,笔记本散热风扇的呼呼声也是一个不大不小的干扰,尤其是 MacBook 的金属机身和对 Flash 的痛恨使其在夏天的表现让用过的人都刻骨铭心。但要说这个影响会有多大,还真不好说,毕竟是人都会提高音量来应对这种情况,所以没多少人会去在意这个,可水果不这么想。

现在找一个安静的环境,放一段 Flash 视频把风扇的转速提起来,然后去偏好设置中开启 Dictation & Speech,在可以输入的地方连按两下 Fn 键以开启监听功能。你发现了什么?没错,风扇 TMD 停转了!!!当监听功能关闭后,风扇又立即恢复到之前的转速。我不知道你是什么感觉,反正当时我和我的小伙伴们都惊呆了。

From:http://jianshu.io/p/f1a50f59a4f4

产品生命周期的17个工具

下文来自「超儿」在工作中(iOS产品)的总结,非常不错的工具和工作方法,作为参考,各取所需吧。

 

不敢妄谈Axure教程还是产品教程,只当记录一下在产品上线前,一边考虑下一版更新一边整理下工作思路。

早期:规划

XMind

4e6a5044tw1eg7zs80e5pj20kq0b4dgx

关于脑图软件,写多了又个长篇的血泪史,最后还是回归了免费开源Mac&Win的XMind。不用考虑iOS平台的脑图了,没有那种一目了然的特点了。还是用Clear吧。

  • 模板选学术风格

4e6a5044tw1eg7zo290tjj20fc08wwez

记得选这个,要不看久了眼睛受不了,免费还不支持弄到一半换模板。

  • 放大一下 Command+

放大一下,默认三级的文字太小了。

  • 输入前先空格

Tab是平级,Enter是子类,输入文字之前要先空格一下,否则第一个拼音字母不出来。有点麻烦,习惯就好了。

Clear

4e6a5044tw1eg7ztk0h9jj208w0fs3z0

操作简单,短条目逼你思路要有层次。路上有新想法就用这个快速记下来。

再推荐一个免费分层级的WorkFlowy

如何玩转 WorkFlowy?

纸笔 或 Paper by 53

4e6a5044tw1eg7zyaolsfj20dc0a00te

区别就是逼格和方便的区别嘛。我们这里很多用过的A4纸,翻过来就画,推荐那种多色笔,很方便。

4e6a5044tw1eg7zz8534yj206c08m3yu

还有一些线框图,可以打印出来

史上最完备线框点状模板,包括网页版、ipad、iphone5、android等等

前期:沟通

Keynote & PPT

嗯,从无到有的这个过程,幻灯片是最好用的,如果一个概念连几页幻灯片都说不清楚,那么也就说不清楚了。本来想放个设计图的,但是因为保密的关系,还是算了吧,反正最简单就是拼色块就好了,配上iPad或手机背景素材,是可以做出效果不错的原型介绍的。

  • 用Keynote的动画直接把效果做出来

4e6a5044tw1eg80864vtuj207j05zmx6

配上手势图标,keynote自带了放大弹动的效果,就像单击一样,连交互动作都可以形象的出来。

虽然不能马上真机交互,但是作为给领导和团队介绍概念,是最快速的方法。

真机展示Promotee

4e6a5044tw1eg80myv7eij20m80dwmyj

这个软件主要是用于后期做官网的宣传时可以用,但是通常到了那会都可以找设计师用PSD直接设计了。这个30块钱为了更好的物超所值,可以用在概念期,更直观的展示用户效果,还是挺不错的,因为那会通常还没有设计师支持。

这东西的目标很单纯,你说可以找到很多现成的PSD,但是这个可以秒测多平台多角度,真的很方便啊!

Pop & Blueprint 等等

接下来就可以把一些概念图转化成低保真原型脑补一下,主要是验证一下在真实屏幕上的操作效果。

具体参见此文

带交互的 iOS 产品原型可以用什么软件制作?

这个阶段还是要快,主要是自己看或者小团队沟通一下。

中期:文档

Axrue

终于到了大头了,关于A其实我也是刚刚才开始用没多久,一直觉得自带控件里什么都没有,甚至iPad尺寸都要自己画辅助线,很麻烦。直到看了同事的一个几乎完美的rp文件才茅厕顿开,恍然领悟“自定义控件”才是把A的高自由度转化成高完备度的重要工具。

具体使用方法不再赘述,也没资格赘述。贴图配些小技巧吧。

  • 自定义控件
    4e6a5044tw1eg80ydo1ttj206w0cwdg8

这里其实可以有按钮,导航等常规产品控件,还可以放标题,注释等文字类型,甚至流程控件,甚至一些常用的UI,省的切换库,所有都可以放里面。

操作也不难,编辑,刷新即可。
4e6a5044tw1eg8106bx00j206v0dcwf4

  • 活用流程图

如果你仔细看前面那个图,我有些流程的东西,这个流程图在Axure里很好用,我除了拿它做常规的流程图

4e6a5044tw1eg813w5xvxj209e0b63z2

还可以用来标注!因为A的箭头不好用,而用流程模块是可以把箭头头尾自动连接且形成路线的,一头是透明层一头是注释,很方便。

4e6a5044tw1eg819lqtuzj20j10btq4n
先从Flow库里拖出系统控件,改变透明度和颜色,透明的用来指示


进入连线模式

4e6a5044tw1eg817k9918j20e403ejri
透明的部分用来指示区域,注释用来描述路径或介绍

  • UI转黑白改大小切图

中期和后期都会更新文档,需要把UI结合进来, 这时候为了避免色彩混乱,可以把颜色去掉,但是逐个用PS动作来做太麻烦了,我专门为此研究了解决方法

Tips: Mac快速批量制作黑白图片

为了凑凑字数,我决定摘录下来!

首先打开Automator,选择“服务”。别的也可以,服务更适合这个操作,是可以集成到右键菜单中,更方便。
image10-45-40
在左侧的搜索中搜“将Colorsync描述文件应用到图像”,直接拖拽过来,这时会提醒你需要同时添加一个“拷贝到Finder项目”,点确定就好。
image11-27-44
先看最上面,选择“图像文件”,位于Finder。意思是右键在什么位置点什么文件会出现这个服务选项。注意“拷贝到Finder项目”是处理好的照片要放到的目标文件夹,自己选就好。
image10-48-19
描述文件这个选项很重要,我是需要黑白照片,但是如果你这里选黑白的话,是对比非常强烈的效果,细节消失了,所以我选了灰色调。
image10-50-12
最后取个名字“黑白”保存一下 ,然后如果你在文件夹中选一个或多个图片,右键菜单最下面的服务里看到你刚创建的这个服务。点击后就会在目标文件夹中看到处理好的照片。非常快和方便。
image10-51-06

PS: 还可以附加一个 调整图像大小等其他图片相关的服务,搜索“图”就能看到,可以自己选择需要的替换就可以了,简便操作完全可以替代PS。

  • 自动生成站点地图

即将完成了,还是需要有个树形图能铺开展示所有页面。

4e6a5044tw1eg81i6wgekj209o0a5dgy

在Sitemap区域对准你希望生成树形图的主干点右键,选择“Generate Flow Diagram”,就能自动生成图表形式的站点地图。点击图表上的每个控件,就会去到对应的页面。

另外,你还可以自定义流程图(Flow)控件的链接页面,方法是双击控件,再选择需要链接到的页面。

  • 用它写文档,不做原型

写到这是因为之前那篇里提到

之所以用这个就是为了给开发和写文档,很多标注和逻辑流程,没必要做出交互。所以不考虑用它做交互,你真都做成交互了,难道还要工程师挨个点开才能看到逻辑?

引出的@胡点 的讨论

为什么不要做成交互呢?

我觉得是这样的,这时候所有需要交互或者动画的部分,都应该用逻辑语言说清楚。

前面才是给工程师演示,现在是为了描述逻辑。

“滑动到画面20%触发什么事件”“30%是什么状态”“50%以上发生什么”,并用流程图描述交互或动画的状态。这样工程师在写代码的时候就可以根据这个逻辑来处理,包括网络状态的判断。

所有跳转,层级,页面关系全部平铺开,对他的布局和构建都有帮助。通过a直接做出按钮,跳转,隐藏等形式,容易被工程师忽略,他们又不是测试,怎么会一个个按钮去点开看看什么状态。文档还是逻辑为主,遇到问题有依据。

交互原型主要有两个功能,1是早期快速出来,给工程师和设计师展示思路,有个大概认识。2是后期校对UI时测试用户体验。并不能取代文档的功能。

  • Mac打包

最后涉及到共享了,你用A生成了HTML包,需要传给团队同事一起看了。用mac直接压缩会有乱码,这样谁都看不懂了。用软件太麻烦,这个我也问了团队技术大牛,mac终端一句命令搞定

  • 具体用法:
  • cd到 压缩文件要放到的文件夹去。或者输入
    cd
    然后拖曳要文件夹到终端窗口

     cd /Users/li/sportsipad/docs/UE/ 
  • 输入,doc是为打包文件取的名字
     tar -cvf doc.tar 
  • 后面直接把要打包的文件夹拖拽到终端窗口,就好了
     tar -cvf doc.tar /Users/li/Dropbox/
  • 这个不是压缩,只是打包而已。用tar cavf xxxx.tar.gz … 就能压缩了

详细内容:mac压缩文件兼容win及terminal使用技巧摘录

  • 内网分享

要用到python

(假设我们需要共享我们的目录也就是Axure生成的那个html文件夹 /axure/home 而IP地址是192.168.1.1)

cd /axure/home
python -m SimpleHTTPServer

这就行了,而我们的HTTP服务在8000号端口上侦听。你会得到下面的信息:

Serving HTTP on 0.0.0.0 port 8000 ...

你可以打开你的浏览器(IE或Firefox),然后输入下面的URL:

http://192.168.1.1:8000

就会自动识别到index.html,然后目录列表就会显示出来。

前提是别人看的时候你不要关机……

  • Mac智能文件夹

最后因为大家rp文件ui文件各种文件传来传去,就算都标注版本日期也还是很乱,是的我们有svn但是都懒得用……

没关系用好mac的智能文件夹

4e6a5044tw1eg81y0os4hj20km084dgv

图里都说清楚了。还可以把这个文件夹的预览模式放大,直接在文件夹里就可以预览图片了。对了批量选择然后按一下空格,就可以用方向键浏览图片这个大家都知道吧,我是很久后才知道……

自此Axure相关的我就用到这么多了。

调整UIPSPlay

4e6a5044tw1eg82gfydevj208w0fs74g

以下内容可能会引起设计师或导致你引起设计师的不满,谨慎使用。

ps连移动设备,实时同步预览psd。你可以自己从设计那里要来psd,也可以直接同步他的ps。无论怎样都要谨慎啊……

特点是可以通过ip连接,比如我们公司移动设备和电脑的无线是两个,很多同步软件都瞎了。

动画原型 Quartz Composer & PS时间线

这就不再赘述了,这里都有。

Facebook Paper的动画原型制作工具Origami及实现代码Pop

项目管理OmniPlan

4e6a5044tw1eg82hytn1qj20m80dwmz3

生成资源图甘特图,控制进度。很复杂,我就用了很简单的功能。

共享文件Airdrop

4e6a5044tw1eg82kgwgp5j20mw0mw0w2

iOS7很棒的功能,尤其是和设计师比稿在一个房间里,批量选择图片群发,瞬间全同步。记得在照片里调出airdrop然后开放给全部人即可。

注意 不支持iOS和Mac之间传输,所以就有了后面的DeskConnect

为什么 iOS 7 和 OS X 之间的 AirDrop 不能互传?

文件备份Dropbox

鉴于保密和我们的网速问题,Dropbox作为团队同步盘还是不太现实。但是作为个人工作文档的同步备份还是很不错的,尤其是这个

4e6a5044tw1eg82cn2jeuj208j0523yn

可以查看早期版本,很实用。

接口文档Mou + Markdown + 边栏

情况是这样的,工程师在处理api的时候需要写文档,需要用markdown生成锚点和侧边栏,经过一番折腾,解决方案如下:

4e6a5044tw1eg82pjpc0wj20iw0btjsm

这种侧边栏式的布局最适合写文档看目录用,很快就找到这个

用js实现的侧边栏布局markdown,还能自动编号

我为了减少一点复杂程度,剃掉了其他的东西就保留了js,重新弄了一下。

精简版代码

正文写到[article]里就好了。

后期:测试

Mac&iOS同步DeskConnect

这时UI已经差不多了,需要频繁的更新在手机上查看或者在放到电脑上标注修改的地方,频繁传输就需要一个最简单的通道。

DeskConnect-真正的实现快速简单在Mac和iOS传文件

image14-28-15

功能远不止传个照片那么简单,具体访问官网吧

deskconnect.com

下面简单说下怎么用,因为确实很简单,首先你注册账户好了之后,就会看到所有登陆的设备

image14-29-41

可以传剪贴板或者直接拖照片过来

image14-30-32

然后看到最近的文件,文件保存30天。

image14-30-45

简单设置一下,有个直接打开的很不错,基本就是非常非常快了。

image14-31-57

非常满意!最关键的,全部免费,免费!

mac下载地址

iOS下载地址

  • 看到所有图的小技巧

另外,它只是可以快速预览,但是它会保存30天,那么怎么一次都看到这些文件呢?

打开这个目录

/Users/XXX/Library/Containers/com.deskconnect.mac/Data/Library/Application Support

XXX为你的用户名

放到侧边栏吧

图标测试Icon Striker

icon也是可以很轻量很适合大家同时查看的。

纯html实现 直接进网页连接https://www.flinto.com/strike

4e6a5044tw1efwj7ne30pj20n50rqn0c

Icon Strike+DeskConnect实现快速查看

4e6a5044tw1efwjfl100nj20mm0dh0uo

  • 拖动图标到框里

4e6a5044tw1efwjh0lypcj20la0873zt

  • 可以通过邮件,短信和手工复制连接的方式,把生成的连接发到手机上

4e6a5044tw1efwjjrge1kj20m808w400

  • 复制连接

4e6a5044tw1efwjku50xij206i07iq39

  • 发送到DeskConnect上的设备中。关于DeskConnect请看这里

DeskConnect-真正的实现快速简单在Mac和iOS传文件

下面操作在iPhone或iPad上实现

4e6a5044tw1efwjpn3achj207i0dcaa9

  • 打开连接,点击按钮

4e6a5044tw1efwjqcnva4j207i0dcq3d

  • 添加到主屏

4e6a5044tw1efwjqp4stcj207i0dcdgd

  • 还可以改个名字

4e6a5044tw1efwjr0s1mmj207i0dc3zn

体验测试Tapcase

前面提到过了,用UI再导入一次,走一遍流程就好了。

BUG标注圈点

4e6a5044tw1eg830u285ej20cs090wf5

手机上直接标注或者mac上标注bug就可以了。


史上最大稿写完了,算是对自己最近工作的一个回顾,很多都是解决了小问题。解决的小问题积少成多,也可以提升很多效率。

但是回到最初,思路和技术还是基础。

最后希望我们的即将更新和亮相的两个产品一切顺利大杀四方!

From http://jianshu.io/p/8e4146aa446d

大市场,窄应用 -细分市场永远是王道

满世界都是新产品,用户市场一年比一年大,不论是哪一类的互联网行业,我们看到的都是各种前景,每个人都想做一个创世纪的产品。。可是,怎么做。。。真正让自己作为一个用户深入进去,发现需求,发现细分的市场,做好它。这样做不能保证你能做得惊天地,至少能让你真的做成一个被需要的产品吧。。。 摘自小肥的 博文,讲述应用与市场之间,我们该怎么做,或者说只是吐吐槽吧。。唉。。这就是我们的命。。

有段时间我很迷FourSquare,它被墙之后,渐渐又冷了。再后来玩开开,因为陪我一起玩的人不多,渐渐又冷了。最近两年有几位业内人士(包括我眼中的业界精英)不解问我:签到有个屁的意思啊?解释许久,他们仍难以索解。从数据上来看,纯粹的签到在国内确实是个窄众应用,但并不影响它在业内的名声。

几个月前,一件小事令我印象深刻。有位同行来咨询我,问我对一款主打“图文并茂”的美食分享产品的看法。我看了看说,用户拍摄相片质量这么差,一看就没胃口吖,此产品前景堪忧。这位同行立刻反驳说,不对,我这个吃货一看图片就食指大动,反而是大众点评那种纯文本的用户评价索然无味。

由于他是以用户身份,而非业内人士的身份提出意见,我当时就羞愧了。老纸又主观了。同样一张美食相片,我看了大倒胃口,他看了口水横流,个体差异极其鲜明。既然鸡同鸭讲,我又有什么资格张口即喷呢?

另一个小小例子关于“讲笑话”这款应用,主打“语音笑话UGC”。我一开始极不看好,觉得需求弱,产品个性也不够强,尤其无法直观地辨识内容质量,大大降低了信息甄别获取的效率,恐不长久。结果又过了两三个月一看,嘿,它不仅活着,还涌现出来一大批讲笑话专业户,平均每人讲十几条笑话,质量也不低。虽然远远谈不上大红大紫,至少人家顽强地生长着,有了一定数量的优质内容沉淀。

这时我再去试图分析它的用户心态,很多人并没有原创笑话的本事,但配音效果佳,绘声绘色地讲出来,相当于二次创作,颇有成就感。这批在我预料之外的骨干用户,支撑起了“讲笑话”的血脉。

类似的情景还有很多很多。以前我经常说,老纸看好的项目未必成功,不看好的则一定失败。现在已经不敢再开这种黄腔。只能说,我不看好的项目很难成长为日访问百万级的大产品,不过能捕捉到目标受众的话,生存发展可能也不是问题。所以别人来咨询新产品,我会指出一些显而易见的硬伤,但不再轻言成败,因为他面向的用户群,很可能是我完全陌生,毫无了解的。

互联网的市场很大很大,已有十几亿的人口,其中显而易见的,共性强烈的的用户需求基本已被填满。这时再去追求百万访问级的大产品,难,真难,劝君莫作痴汉。还有什么共性强烈的需求是你能看见,别人看不见,你能满足,别人搞不定的呢?

在互联网蓬勃发展了15年之后,新产品主打的必然是个性,包括产品的个性,需求的个性,用户群的个性。在不断细分的领域内找到并谄媚你的用户。而四亿人口的国内市场,能容纳千百种奇奇怪怪的个性,异想天开的心态,将人类的多样性发挥得淋漓尽致。没有一个human敢说,自己一下子就能看懂市场上1/10的用户需求,恰恰是这参差多态,给予了新产品生存发展的机会。

近来,我越来越认同欧美投资领域流行的一个观点,那些老奸巨猾的投资商跟创业者说:“想清楚了就去做,别问东问西。”试想,当年克罗利如果“虚心听取意见”来判断是否创立FourSquare,哪里还有如今的签到市场。即便在签到发展近3年之后,用户群也不足大盘的10%,这意味着你现在去跟10个人谈地理位置签到,9个人会无情地笑话你,奚落你,打击你。然而FourSquare注册用户今年6月业已突破了1000万大关。

这个案例,也就是“少问,多做”这句创业箴言的本意。在数亿用户的大市场里面,即便是非常窄的应用也有百万级的用户基础。创业者作前期调研的时候,除非确保访谈的一定是目标用户,否则你鸡同鸭讲,所得到的回答便全是误导。即便访谈目标用户吧,如果没有真实的应用情景来启发,全凭脑补,他的回答也很难靠谱。不如快速拿出原型推向市场,让数据告诉你答案。

因此,主观与敏捷已经成为了当下新产品发布的不二法门。不过这条金科玉律完全不适合大中型公司,很容易被滥用,上一大堆烂到无法言说的臭作——反正他照领工资。只有自负其责,个人荣辱完全与项目绑定的创业小队,才有资格讲“主观”,讲“敏捷”。

至于一开始从窄众做起的个性化应用,是否有机会慢慢生长成大树,这很难讲。我们不能将“做大”作为赤裸裸的产品追求——就像同样是个性化应用起家,既有Twitter参天大树,也有消沉的Delicious昔日明星。未必两家产品创始人谁比谁更牛逼,只是Twitter恰恰具备了更强的感染力和流行性罢了。但创始人如果不能追随自己的产品灵感,非要计较天花板的高低,很可能一事无成,蹉跎终老。

说白了,这就是命。你的生活方式与知识结构决定你的灵感,灵感衍生出来的主题与个性又决定了产品的市场前景。创业最顺的路径不是嗅探市场流行风向,而是听从自己的心。当成百上千个项目组都具备强悍的研发能力,足以左右成败的,既不是你的点子多,技术强,资源丰厚;也不是你跑得快,肯加班,笨鸟先飞;比别人更了解某一个“窄众市场需求”(大路货也轮不到你来发现),这才是最关键的竞争因素。

“对窄需求的把握,产品灵感,研发能力”,三者所产生的化学反应决定了新产品的走势。行业里很多人只重视后两条,但我觉得,第一条才是新产品新项目的基石。这更多取决于“你是个什么样的人”——唯有从你的兴趣爱好、人生经历、生活习惯中,才能真正把握好需求。所谓仁者见仁,智者见智,淫者见淫。

叹口气,这就是命。

产品之路

学所谓计算机科学与技术的哦。。由于实在对于编程实现无碍,各种巧合让我第一份工作就开始了现在的产品之路,那时候叫做策划吧。。不小心已经2年了。。做了所谓的产品经理(职责类),却感觉沉淀的东西越来越少。。花费的时间却越来越多。。自己已经是产品热中 数万从业人员中的一粒炮灰了。。

最近公司转型,有机会可以去接触一下游戏行业,想想在消费软件产业也做了一段时间了,可能各种原因都有,自己停滞了。该变动一下了。。对于我这种低调偏懒的人来说,只能依靠所谓的机会来引导自己的变化和更新,哪怕是明明知道自己该变了。。却无法去主动的变化什么。。好吧。。游戏,移动,互联网,一直是我最关注的玩意,现在算不算是重定位呢。。。而且还是回归型。。。现实永远都是残酷和骨感滴,

附上一篇产品人的闷骚文,来自纯银:

有种奇妙的感觉,在我们这个产品行业啊,你很难说自己正在做的不是一件错误的事情,能尽量确保的是,不要去做一件事后看起来很蠢的事情。否则,最后就连你唯一赚来的失败经验,用“别犯蠢”三个字也足以囊括。这多丢人。

我发现行业里有个现象就是,我激动万分地跟你说我的项目计划,你说不行,举一大堆反对理由。接着你激动万分地跟我说你的项目计划,发生同样的遭遇。到最后,可能确实是“都不行”,都是当局者迷。产品成功(甚至存活三年)的概率就是这么低。

今年已过了8个月,给我留下深刻印象的,新推出的互联网产品(非游戏或电商类)只有一款,就是知乎,此外米聊、微信与jjdd亦有赞赏之处。别的不论是全新产品,还是老产品的新功能新分支,都乏善可陈。怀抱着改变这个世界梦想的产品人,环顾四周,洗洗睡吧。未必是你们不行,可机会实在不多。一将功成万骨枯。

如果一年到头,整个国内市场上令我赞赏的互联网新产品,以及老产品的新模块,加一起,还不到10。而这一年来,上万的产品从业人员奋力折腾出了上千个大大小小的新项目。产品市场不足1%的“出头率”是不是太残酷了一点?忽然间心头茫然,不知道自己当年转型产品是对是错。希望能改变世界,结果只是炮灰。转型产品近四年,最痛苦的一点是,自己的才能和努力都沉淀不下来,到最后都发酵成了某种叫做“挫折与教训”的东西。环顾四周,整个行业的成功率不足1%,产品三年存活率不足5%,而年华易逝,我们都留下了什么?还不如我在2002年编报纸,写小说更有人生意义。

有两个很难回答的问题:
1、绝大多数产品失败到底是因为团队不行,尤其带队人不行,还是该项目在该环境下本来就难以成功?
2、靠个人努力找到(创造)有可能成功的项目,这个概率有没有5%?
不论是怎样的回答,产品失败以后会像烈日下的冰激凌那样融化掉,和你的一部分生命一起,在这个世界上不留半点痕迹,像被冲洗过的马路一般干干净净。我经常跟别人说,做什么都好,重要的是人生有沉淀,或者沉淀故事与历练,或者沉淀才能与资历,哪怕是学学游泳,练练拍照都好。可我们这些做产品的人能沉淀下来什么?忽然灰心,觉得还不如当年忍受清贫,坚持写写小说更有意义。翻看10年前的小说,忍不住微笑,再回忆近4年来的产品生涯,则面如死灰。

昨天去看《海洋》,进影城遇到一家三口,小正太欢快地闹着,我们去看蓝精灵,我们去看蓝精灵。我咳嗽一声清唱:“在左腿的右边右腿的左边有一片黑森林,有一片黑森林”。这是鄙人10年前学来的民谣。

[产品相关]免费的线框工具,UI设计工具,PDFs,资源等

自己的工作一直都有做线框图之类的,看到一大堆这类的工具,先收藏备用吧。真的很多很强大

勾勒出一个网站、软件或者其他产品的UI基本的UI元素非常必要,一些线框工具UI设计工具此时就派上了用场。当你想为你的项目做一个草稿模型,你可以使用这些工具,设计出一个你心目中的外形,让你保持较高层次的抽象而不陷入细节之中。

这篇文章,我们为大家概述一些有用的Web或者手机UI设计工具,可获取的PDFs和其他资源,你在你的项目中使用它们。这些经过精心挑选的非常有用的工具让你开始项目的初级设计吧。

Free Mobile GUI PSD


Android GUI PSD

这个Android GUI基于Android 1.5GUI上的元素,用于帮助开源社区进行Android程序开发。大部分元素和实例都是矢量图,方便缩放。字体是Android Sans。

RIM Blackberry PSD

一个完整的图层样式,拥有135个图层。

Android Sketch Stencil Version 1.0

Android OmniGraffle草图模板,这个框线图帮助开发者避免过于关注界面设计,鼓励其聚焦于程序的行为和功能。

All elements of Maemo 5 GUI in PSD

这个可下载的PSD文件包括了提供给Maemo平台的GUI模板。对于开发运行于Maemo平台的GUI原型程序是绝对需要的。

iPhone 4 GUI PSD(视网膜显示)

创新者必备的视网膜显示(640X960)的GUI PSD文件。这个文件非常大,足足有62.7MB,长宽为4074X2986。最大屏幕的电脑只能查看原尺寸的25%-50%。

iPad GUI Kit in PSD

安iPad原始尺寸768X1024制作,绝大部分图形元素使用矢量图形,为高分辨率演示提供很多的放大空间。此版本为PS图层,便于模型设计和客户展示。

Adroid 1.6 Wireframe stencil for Omnigraffle

下载这个漂亮的OmniGraffle 5.x附加线框模板,在1.6 Donut SDK上开发Android程序或者网站吧。

Wireframes-132 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android GUI PSD

矢量版Android GUI元素。

iPad GUI PSD Kit

包括全尺寸的图形界面,256,128,和64像素的图标都有,该包分别包括PSD、PNG、Mac ICNS格式的四种尺寸大小的iPad图形界面。

Uidesignkit55 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android PSD

一套Google Android原型的模板

Uidesignkit54 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Firework template for Android

Firework版模板,矢量重绘Android UI元素。包中的元素模板根据Android部件名称命名。

Uidesignkit52 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sexy Vector Cell Phone

可缩放到任意大小。可轻松添加自己的图片到屏幕上,所有对象都是分层分组标注好的,非常容易定制。

Uidesignkit42 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Stencil for Omnigraffle

包括背景、标题栏、按钮、选择元件等其他iPhone UI元素。列表、标题栏、按钮、滚轮上的文本都是可编辑的。

Uidesignkit28 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone App Wrieframe Template

Uidesignkit45 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mobile-iPhone

Uidesignkit44 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone GUI Elements

一些非常漂亮的iPhone元素,为分层的PS文件。

Uidesignkit5 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad and iPhone Design

非常详尽的模板,用它们设计你的iPhone、iPod Touch和iPad软件吧。所有的模板根据OmniGraffle原型手工制作而成,清晰的分组,可缩放,可调整大小,Graffle中方便导出成其他的矢量格式文件。

Uidesignkit46 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Design Stencil for iPhone and iPad

一个适合正在设计的iPhone、iPod、和iPad系统程序的模板。此模板是针对那些熟悉UIKit提供默认的视图和控件的发开者的。

Wireframes-101 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple iPad fully editable PSD

一个可编辑的PSD格式的Apple iPad。所有图形都是可编辑的,可缩放的矢量蒙版。

Wireframes-102 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Plam Pre PSD

这一套模板包含了一张PSD来帮组设计者使用PhotoShop设计抛光感的界面。

Uidesignkit57 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone UI Vector Elements

绝大部分可是的程序都是首先在AI中先有实体模型的。这里是一些非常酷的iPhone UI矢量元素。还包含一些不错的Phtoshop资源或者OmniGraffle格式的iPhone UI文件,甚至都有。

Wireframes-103 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Vector GUI Elements:tabs buttons menus icons

这套模板几乎包含了所有的iPad UI元素,按钮,标签,菜单,键盘和气泡等等。对设计者和开发者都非常有用,她包含了可编辑可缩放的矢量版本(AI)。

Wireframes-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Social Networking GUI PSD Kits


免费的图形分层Fackbook GUI工具包

为了加快Fackbook应用的UIs或者Fackbook迷页面的开发产生了此工具包,为你节约绘制各种UI组件的时间,可自定义所有文字字、按钮等其他你需要的数据。这个工具集是完全免费的,可用在任何项目之中。

Uidesignkit12 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook GUI Free PSD Resorce

FBGUI,一个Facebook图形界面Photoshop资源,让你工作更加轻松。

Uidesignkit22 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook Applications

可缩放的元素集合,可用来绘制Facebook应用草图。

Uidesignkit23 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Omnigraffle Twitter Widget Stencil

这套工具包含了很多有用的Twitter小工具和徽标。

Uidesignkit21 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframing Kits


Best Practice UX Forms Stencil v1.1

一个全面的遵循UX最佳表单设计实践的模板,提供三种不同方式布局表单,每种布局方式各有千秋。此模板还提供不同布局的按钮控件,进度条,可编码的验证输入字段,label等。

Wireframing-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Form Elements UI Kit

来自Yahoo!设计模式库中的模板设计工具包的表单元素。

Form in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Shapes

为Mac OS X准备的准备的一套制作线框图的图形。它有很多基本元素你在UI设计中一定非常需要。

Wireframing-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wrieframe kit for UI Designers

包含非常多的线框工具,比如产品详情,项目列表,头版页,手机模板等。

Wireframes-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

MBTI sketching pager  for ideation

MBTI构思讨论的草图设计。对理解box的死人格特质有很大帮助。每张纸上描述一个设计的挑战和解决问题的办法。

Wireframes-105 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

A4 sketching paper

在对具体功能有了想法之后使用这种草图纸,根据自己的想法构建初步的界面。

Wireframes-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Magnets(DIY Kit)

这个DIY的磁铁模板基于Konigi线框工具,它包括三张对于白板模型非常有用的元素集。简单把下载的PDFs文件打印为磁铁板,使用干擦标记好,用层压法,然后将它们剪开。

Wireframes-107 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Paper wireframe templates

像PSDs的样子,成品包括七中变化

Wireframes-108 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe template

非常有用的可打印的草图模板,可下载

Wireframes-109 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Idea Sheet

三张图:一张全尺寸(横向),一张70%(竖直),一张50%(横向)。80个小点可以非常方便的分割在屏幕的水平方向和竖直方向上做分割。Wireframes-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Scenario,Taskflow and Grid Shetch Sheets

一套漂亮的可打印的模板,有助于构思和草图设计。

Wireframes-111 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Photoshop browser template

在设计陈述中很需要一个干净的浏览器截图?不用等了!这里有免费的专业的浏览器模板,不同的1024X768,800X600分辨率的都有,以及各种爱好。Wireframes-112 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Interactive Sketching Notation 0.1

这些符号背后的思想是为了可视化与用户交互的状态和更清晰和迅速的明确用户的动作。

Notations2 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mobile Full iPhone GUI

对于WinterBoard的使用者来说,这是个测试版,所以可能存在没有风格化的元素。

Wireframes-116 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android Wireframe Templates(PDF)

Wireframes-118 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Keynote UX Stencils

Wireframes-126 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Advertising Stencil Kit

一套非常有用的广告模板

Wireframes-131 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Dragnet website wireframes kit v 0.9

Dragnet网的草图框架工具集,0.9版本,Adobe Fireworks文件。包含超过25中对象,对于快速构建网站原型非常有用。完全免费,可下载。这个工具集包含可web设计的很多元素,例如滚动条,按钮,菜单,Alerts等。

Wireframes-133 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

User Interface Design Framework

这套全面的非常漂亮的设计框架包含了一个GUI库,有成百上千的矢量元素,可用来做界面设计。小巧的UI图标集包含了260个矢量图形,还包含200个AI样式。Uidesignkit1 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Form Elements PSD

包括两套模板,Mac中Firefox 3和Vista中的IE7

Uidesignkit14 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sketching and Wireframing Kit

一套草图线框元素集,表单元素,图标,指示器,反馈信息,导航元素,图片占位,嵌入式视频,滑块以及普通广告banners应有尽有。

Uidesignkit3 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Photoshop Form Element Templates

包含各种常见的表单域以及鼠标指针,非常易于使用。

Uidesignkit37 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Browser Elements

集中于一个易编辑的PSD文件上,包括一些下拉菜单,输入框,单选框,复选框,按钮,文本域已经滚动条等,很棒,非常易于使用。

Uidesignkit4 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Design Kit

这套 Web UI工具使用 图形对象制作,有些情况下可转化为智能对象,有很好的缩放性。

Uidesignkit7 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Symbols

下载包包括一套符号库以及一套完整的AI文件。所以元素在画图板上都被区分开来。如何使用这个库?简单的将Wireframe Symbols.ai上的元素拖放到AI符号库里。每次你需要的时候,从符号库里拖出来就好了。

Uidesignkit9 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web UI Element Pack

PSD格式,19中web 元素。包括,加载条,默认状态按钮和按下状态按钮,按钮切换,关闭图标,”上一个“,”下一个“按钮,分页图标,以及滑块。

Uidesignkit13 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Kit for Google Drawings

Uidesignkit15 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffile Stencil for Ext JS v3.0

这个Ext JS Omnigraffle模具的升级版包含了很多提高和补充,如以Graffletopia形状以及组重建绝大多数的Ext JS 元素,尤其在对缩放标题,表格等有很大的帮助。Extjs in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex 3 Stencil

包含所有Flex 3样式指南中的所有组件:面板,数据格,按钮,表单域,连接,开关,菜单,滚动条,折叠,标签,列表,日期Picker,Toolstips以及Error等。

Uidesignkit19 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Agua GUI

从GUI设计项目1.2以及Mac OS X界面模板获得灵感,一套基于Aqua,一简化window设计的模板。

Uidesignkit20 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex Darkskin PSD UI

16张PSD,非常漂亮的模板。

Uidesignkit24 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Wireframe Kit

这是一套给设计师的简单布局设计的模板,简单,高效,节约时间。

Uidesignkit27 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Buttons and Icons

包含165个高质量的UI图标和按钮,五种不同颜色。AI,JPEG和SVG格式。

Uidesignkit8 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Quommunication Stencil kit

一套包含草图设计的所需的元素,RSS源,颜色,广告单元以及浏览器框和网格。

Uidesignkit30 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mac OS X Interface 2

一套Leopard-y的交互模板工具,在保证像素表现的前提下最大化的运用table获得最大的灵活性。

Uidesignkit31 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffle UX Template

OmniGraffle Pro(v.5)交互设计模板,包含为基础的UX文档需求提供的共享层(标题页,线框图,和用例面板)。

Uidesignkit32 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Template for Blueprint CSS Comps

这个套模板可以以一个CSS布局框架来进行设计,这套AI文件以24网格分割,可适应一些例如Blueprint的CSS框架。

Uidesignkit33 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple Elements for OmniGraffle

Apple硬件产品以及一些网络设施的模板图。非常适合于制作物理图表。

Uidesignkit36 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

DevianART ID PSD Kit

15个专业设计,完全可定制化,包含迷你型和原始ID模板。

Uidesignkit40 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Screens and Website Elements

一套非常有用矢量资源来帮助你快速搭建客户端程序模型,present你的工作,或者快速布局一个web站点。

Uidesignkit41 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

960 Grid Template for OmniGraffle

Uidesignkit43 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Control of different browsers for designers(下载链接)

PSD库,包括Mozilla Firefox,Opera,IE以及Safari不同浏览器的控件。

Controls in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Useful Articles


一篇全面介绍线框设计扮演了如何重要的角色。

随着web设计下一个十年的到来,重新评价和理解线框图的时候到来了,一个经得起用户体验的产品。

Wireframing-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

线框设计是一种不可或缺的设计思想,一个数字的草图,随时可以修改擦除或者恢复。

Paul Boag是一个线框设计迷,坚信线框设计是设计进程中不可缺少的部分。他在设计中坚持五个牢不可破的规则。

项目开发过程中可能最大的错误就是没有定制计划,这篇文章讨论其原因。

Resources and Round-Ups


一个tumblog专注于线框,原型,实物设计。

在这个网站可以查看一些基于线框设计的网站,可分析学习设计人员是如何将实体模型转化为设计的。因为线框和设计都是由设计者自己上传的,每个线框设计都包含了一个简短的说明。大部分的网站原来是数字实物模型,有容易修改和重新设计的优势。起结果是令人愉快的线框设计。

Wireframing-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

一些互动设计的原则和模式

这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。

20个资源,用于应用程序开发的草图阶段。

这些可打印的草图模板都是特意为web设计人员设计的。附加有浏览器的版本说明(Safari,Chrome甚至Firefox)

当你可以使用一个预制指南来节省时间,更好的发挥你的创造力,为什么还要从头开始设计呢?在这篇文章中,你将得到很多很棒的免费工具,一个笔记集合以及一些要购买的产品来帮助你线下设计。

源地址:Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files

FROM: