ProductTour Created By Tickmao
规范论 | ios11设计指南
Sat, 07 April 2018

ios11设计指南(中文版)

HIG(Human Interface Guideline)是apple为确保ios上各类app的用户体验质量和一致性,为产品设计师们公布的一份设计指导。这份设计知道俨然就是一个移动互联网入门者的教科书,非常值得一读。感兴趣的小伙伴不妨看看。英文较好也可选择阅读原文。

过去五年内,扁平化设计是非常普遍的,但在ios7之前并不是那么常见。它的到来形成了如今的设计方式。但是说它没有发展是错误的。ios设计适配了更大的屏幕。与被取代的拟物化设计进行对比,通过渐变、阴影和卡片等方式,扁平化的设计有更多的微妙差别。

ios的发展

让我们从看下面这幅图片开始。最左边是拟物化的设计。在2007年,很少人口袋里会放上一台超级计算机,因此这很有效、很有表达力。中间的图片用单调的颜色,漂亮的文本和高分辨率的内容代替了复杂的装饰。由于我们大部分人对技术越来越感到舒适,用厚重的装饰来设计变得不再必要。最右侧是ios11的屏幕截图。标题略微加粗,结果更加易读。由于屏幕更高了,现如今底部导航栏更加常见了。 如今的设计师不得不去适配诸多的分辨率和像素密度。好消息是我们有了更好的工具,比如Sketch和XCode,这使我们能够应付这些现代技术。 image

更大的标题

ios11比任何时候都接近它开始的时候。到处能看到加粗的文本。标题又大又黑。由于现如今的屏幕比从前高了两倍,大标题是有意义的。使用大字号的另一个原因是可及性。每天每个年龄段加起来总计有几十亿人使用手机,使内容尽可能清晰可读是很重要的。可及性是指允许用户设置很大的字体在app中。在ios11中所有添加的应用支持这一选项。因为这个原因,你会发现用户名很期待ios11。 image

卡片

更大的屏幕意味着内容有更大的空间展示。在大屏iphone出现前,尽量去除容器,给内容最多的空间去展示。但是因为iphone X 和 8, 这不再是一个问题。我们能够更加容易的导航通过状态栏,导航栏和导航条,使用卡片能更好的组织内容。带有圆角的卡片使得内容更加生动形象。你也可以给你的设计增加虚化的背景和添加阴影。 image

ios 设计的形式

设计越来越简单了,让我们能够专注于动画和功能,而不是复杂的视觉效果。在ios7之前,我每天的大部分时间要去处理复杂的效果,例如:木纹、皮革和铬等。如今,我大部分时间花在动画和编程上。这不再是关于静态设计,而是使得设计更加生动,更深层次的吸引用户。这也是这本书很少提及视觉设计的原因。从技术角度讲,动画和编程从未这么重要和可行。这也是为什么我们每周都能见到一个新的原型工具和编程框架。设计变得越来越广阔,但是与此同时,许多科目立刻有了联系。一个设计师变得独立执行,与工程师能更好的合作,他们之间能更好的理解对方的技艺。

我被问过很多次,如何开始设计,如何成为更好的设计师。然而没有“银弹”,但是ios设计有很多的技巧与规则,可以普遍应用到你的设计中。 即使你在为一个完全不同的平台设计,相同的设计理念留下了,你能将你学到的知识应用到web和印刷方面。ios是一个让设计落叶归根的平台。它看起来像一本杂志,有着漂亮的文字和简单的布局。你在这本书中学到的将会非常好的服务你在你的设计之路上。

核心理念

让我们回到基础。ios由3个核心理念驱动: 重点、透明和深度。官方授意的这些设计原则,我已经把它们化成比官方指导更简单可行的内容了。

重点

你的内容应该是主角,其他内容是次要的。使用元素去补充它而不是去分散注意力。例如,使用转场动画,用户不会迷路。虚化的背景使用户仍然专注于内容。如果你感到怀疑,从提供的模版开始,从那里开始工作。

简化

你的用户界面应该精简到符合核心的美学。每次你添加一个元素问问你自己是否是必要的。除非你的应用是一个游戏或者一个特别的主题,减少使用厚重的纹理效果,3D效果和多重阴影。而是专注于功能性的颜色,和谐的渐变和漂亮的文本。image 使用扁平的基调而不是厚重的纹理,合理的使用渐变。 专注于文本和漂亮的图像。典型地,最好让内容获得所有的注意力。 用一个主要的颜色,代表一个状态和可交互的元素。如果有疑问,不要使用超过一种的主要颜色。

重视内容

内容应当铺满屏幕,给予最大的空间。避免嵌套的容器,最大化滚动区域,以允许更多的空间来交互。 image 图片和背景几乎撑满宽度,你的内容是主角。 使文字大而诱人。不要使用颜色除非它是可交互的。 模糊使得提示内容清晰,而不是牺牲按钮的清晰度。

颜色

使用突出的颜色来表示元素被点击了、它是高亮的。选择正确的颜色和中立的基调来设计。蓝色对于按钮和状态来说是安全的选择。并且,白色和额外的浅灰色背景对于起点是推荐的。形成了鲜明的对比,这是完美的、可读的。 image 一个始终如一的颜色表示可交互和高亮的元素。 中立的基调给背景,能够专注于内容和行为。 灰色用户不活跃的状态。灰色用在文字上代表重复或者不重要的,例如分类和标签。

排版是内容

由于简化界面和专注于内容,你的排版将占据屏幕的50%-90%。因此,漂亮的字体,粗细,行高和颜色,来保证在任何尺寸上最佳的阅读体验。默认的San Francisco font字体是不错的选择,它是为易读性所设计。苹果公司把他应用在所有它们的应用上。 image 排版占据了50%-90%的空间,易于阅读很重要。 文字应该大并且对比性强。 合适的空间结构促进了阅读。外边距应该最小为8pt。 对齐文本、图片和按钮,使得设计更吸引人。

实体周围的空间

实体周围的空间能够专注于内容。你看到的越少,你就越能专注于你所看到的。实体周围的空间带来了“可呼吸的空间”。不要讲你的屏幕充满太多的结构和不必要的可视元素。如果你有疑问,就使用XCode的默认外边距。苹果公司通常使用8pt-16pt的外边距离。 image 边界和内容的最小距离建议是8pt。 5pt建议在相同的元素之间使用。 10pt建议使用于划分不同区域。 因为更高的屏幕,不要害怕有太多的实体周围的空间,尽全力去把有趣的内容铺满屏幕。

清晰

使得事物清晰。按钮应该是可以自描述的。排版应当是大的可读的,有舒适的间距的。你的内容应该清楚地表面你的应用是关于什么的。例如,如果你是一个咖啡的应用,你应该想到使用咖啡豆,浓咖啡和咖啡的棕色。

是文字可读

标题应当是大的有对比性的。题注应该是简短的易于浏览的。正文应该有合适的空间,一行不要太长,避免阅读疲劳。 正文应该最小11pt。最理想的阅读字号是17pt-19pt。屏幕标题应该是34pt以上,文本中标题应该是20pt-30pt。让文本与其他元素对其使得更易于浏览。最后,使用黑色或者深灰色而不是浅色的背景来加强对比。 image 给标题应用34pt以上的字号,不要害怕使用中等和特粗的。较少的使用加粗。 给正文17pt字号,这是用户读的最多的部分。 11-14pt使用在状态栏,导航栏和标签上的次要文字。把较小的文字应用在用户不会长时间阅读的地方。 重要的文字要加强对比,就像黑色和白色。

使用明显的图标

图标不应该是模糊不清的;它们应该是清楚地代表符号的意义。只要可以,文字和图标一起使用。一旦你使用了一个图标,不要再使用它的另一个变化的样子了,这会使用户困惑。同样地,使用明确的文字例如:“返回首页”,“注册新账户”来代替“返回”,“提交”。设计清楚的矢量的图标以方便适配不同分辨率的屏幕。保证你的素材能在1倍、2倍和3倍像素密度的屏幕上显示。 image 图标应该是立刻能被是别的。理想状态是伴随着文字一起出现。 有颜色的图标代表是被选择的状态。颜色的选择上应该基于你的主色调。如果你有疑惑,就使用蓝色。 导航栏和标签的最大尺寸建议是30pt * 30pt。

描述屏幕

每一页应该明确表示它是干什么的。通过屏幕标题和高亮的标签栏来品牌化。考虑好使用什么图片来表示这片区域。 image 标题解释了这一页是干嘛的。合适的字号是34pt。 文字应当简短易于理解。

有意义的颜色

颜色是有意义的。使用红色,绿色,蓝色和中立的基调能清晰的表示有破坏性的行为、积极的行为、链接和未激活的状态。避免把颜色使用于不同的目的而使用户困惑。例如,不要使用一个绿色的按钮来代表删除。 image 红色代表了危险的操作和警告。除非它是你的主色调,红色应该有节制的使用。应为它很容易夺取其他颜色的关注度。 蓝色代表一个普通操作。使用加粗代表它是一个特别的操作。灰色用于题注和正文。在图中的场景,用于解释图片将如何被删除。

给触摸做设计

按钮应该是可以轻易点击的。它们的大小应该是30pt-60pt宽。最理想的大小是44pt。很少情况下,给文本中的链接设置22pt,但是慎重使用,因为这样不易点击。甚至文字按钮至少要有30pt的可点击区域。当打开图片时,确保能够通过一只手的手势去缩放图片和滑动图片到上一张或下一张。 image

横向模式

用户通常在使用ipad和大屏iphone时使用横向模式。这种模式下,应用会没有状态栏,更小的导航栏和状态栏。有时,左侧会出现额外的按钮。自适性布局,一种基于屏幕尺寸的布局方式,是非常普遍的实践。多亏了XCode中的自动布局和尺寸类型,基于设备方向的调整布局变得很简单。所以不必在设计时害怕。 image

深度

也许深度是最难理解的部分。这是一个非常抽象的概念,但同时,它是独特和有力的。深度的意思是所有东西是有联系的和有过渡的。生活中,我们经常从一间房间走到另一间,你有前进和距离的感觉。这种方式你不会迷失。同样的概念应该被应用于用户界面。

不关心人与实际的关系是设计的大忌。——迪特尔·拉姆斯

过渡界面

动画是ios最令人激动和独特的特性之一。一屏过渡到另一屏。首页缩小然后应用放大进入。动画过去是很难执行的,但是有了XCode9,它们比以前实现容易的多。你可以在swift章节学到这些技术。 image ps: 这应该是一张gif

虚化的背景

不要让你的背景喧兵夺主,危害到你的内容。虚化背景不仅允许你保持它自然的颜色,而且更能专注于前景。虚化不是什么新发明,它是现实中已经存在的。由于你专注于某物,其他事物便变得模糊。

增加十倍用户想要的。事物在人脑中不会保留超过一天。真确的做法可以记住一辈子。

动画

动画不仅仅给转场服务,也可以增加设计的趣味性。它给元素带来了关注以免被忽略。通知变得更加显而易见,天气更容易被理解通过下雨的动画。 尽管动画是被鼓励的,但也不要过渡使用。不要使用户分心和恶心。 不必要的强势的动画会引起用户不适。代替地,应该是使用户自己去发现操作内容,把动画应用于温柔的直接的目的如进度条。 最后动画要逼真。一个窗口从底部出来也要从底部消失。这样用户能从物理层面上理解,即使它们是电子版的。

手势

随着大屏幕的采用,返回按钮手指已经不容易触碰了。所以,虽然比一个可见的按钮不明显,但是手势已经是一个很好的扩展的交互动作。高级用户会觉得这很容易。我们逐渐成为高级用户,我们不需要很多提示而是需要更多功能。 image ps: 这应该是一张gif

三维触控

三维触控允许用户在应用内外快速操作。想象下,三维触控就是你Mac电脑上的快捷键——它允许用户更快地做重复的任务。但是就像快捷键,功能不能是三维触控独有的。你的用户必须也能够不靠它完成工作。 例如,用户能重按应用的图标来找到常用的选项。应用中,邮件和链接能在进入全屏前被粗略地看到。 image ps: 这应该是一张gif

声音

声音很少在应用中用到。但是一旦应用,它应该把一个普通的任务变为一个值得的体验。用户能不通过通知一样的界面来识别你的应用。声音能用很少的效果来达到令人深刻的效果。

好的设计是很普遍的。你不必用很多文字去解释。用户能够懂得。

延伸阅读

这是一份苹果公司写的高质量高水平的读物。它会保持更新,有着关于特性详尽的内容。我建议先浏览一遍,再阅读你所需要的部分,它十分地详细。 image

相关链接

原文

—ChangLog

2018.04.07

  • 博客初拟

方法论 | Markdown 语法的简要规则
Mon, 05 February 2018

Markdown 语法的简要规则

(一)标题

标题是每篇文章都需要也是最常用的格式,在 Markdown 中,如果一段文字被定义为标题,只要在这段文字前加 # 号即可。

1

# 一级标题

## 二级标题

### 三级标题

以此类推,总共六级标题,建议在井号后加一个空格,这是最标准的 Markdown 语法。

(二)列表

熟悉 HTML 的同学肯定知道有序列表与无序列表的区别,在 Markdown 下,列表的显示只需要在文字前加上 -* 即可变为无序列表,有序列表则直接在文字前加 1. 2. 3. 符号要和文字之间加上一个字符的空格。

1

(三)引用

如果你需要引用一小段别处的句子,那么就要用引用的格式。

> 例如这样

只需要在文本前加入 > 这种尖括号(大于号)即可。

3

(四)图片与链接

插入链接与插入图片的语法很像,区别在一个 !

插入图片的地址需要图床,这里推荐 SM.MS 的服务,生成URL地址即可。

4

(五)粗体与斜体

Markdown 的粗体和斜体也非常简单,用两个 * 包含一段文本就是粗体的语法,用一个 * 包含一段文本就是斜体的语法。

例如:这里是粗体 这里是斜体

(六)表格

表格是我觉得 Markdown 比较累人的地方,例子如下:表头与内容以以下方式隔开。

| ————- |:————-:| —–:|

内容与内容之间以竖线隔开,展示效果如下:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

(七)代码框

如果你是个程序猿,需要在文章里优雅的引用代码框,在 Markdown 下实现也非常简单,只需要用两个 ` 把中间的代码包裹起来,如 code。图例:

5

使用 tab 键即可缩进。

(八)分割线

分割线的语法只需要另起一行,连续输入三个星号 *** 即可。

—ChangLog

2018.02.04

  • 博客初拟

规范论 | 文案风格指南
Sat, 27 January 2018

文案风格指南

听说,打字格式不规范的人,感情路一般都走得比较辛苦。毕竟爱情跟书写都需要适时地留白。

公司及产品名称

公司及产品名称是「lawbat」。注意这是两个单词的合成词,所以中间沒有空格(參考:GitHub)。如作为 URL 的一部分,应该使用全小写的「lawbat」。

文案风格

  • 一定多检查,确保没有错别字。
  • 即使是流行语中故意的谐音错别字也不要使用,比如「墙裂」、「童鞋」等。
  • 我们崇尚精练的文风。请在检查中把对表达意思没有明显作用的字、词、句删除,在不影响表达效果的前提下把文案长度减到最短。

中文、英文、数字混合时空格的使用

  • 英文与非标点的中文之间需要有一个空格,如「使用 LeanCloud 开发移动应用」而不是「使用LeanCloud开发移动应用」。
  • 数字与非标点的中文之间需要有一个空格,如「我们发布了 5 个产品」而不是「我们发布了5个产品」。
  • 尽可能使用中文数词,特别是当前后都是中文时。上面的例子写为「我们发布了五个产品」会更好。
  • 数字与单位之间需要有一个空格,如「5 GB」而不是「5GB」。
  • 注意特殊名词的大小写:Android、iOS、iPhone、Google、Apple,无论是否在句首都应该以同样的方式写。对于有特殊用法的专有名词,如 4K、1080p、iOS 10 等,英文和数字之间是否空格以官方标准为准。
  • 在官方文案中尽量使用中文,避免中英文混合的情况。例如「app」一般应写为「应用」或「移动应用」。品牌、产品名、人名、地名等特殊名词,如果来自英文,请使用英文以避免在不同译法间选择。
  • 一段文字中有超链接的部分,在超链接的前后使用空格。如 博客 了解详情。
  • 英文前后接全角标点符号或者表示单位的角标符号时,不需要加空格。例如:新款屏幕的可视角度为 125°,相比旧款提升了 25%。
  • 每段文字的开头不需要空两格。

标点相关

  • 只有中文或中英文混排中,一律使用中文/全角标点。即全角符号。
  • 中英文混排中如果出现整句英文,则在这句英文中使用英文/半角标点。
  • 中文标点与其他字符间一律不加空格。
  • 中文文案中使用中文引号「」和『』,其中「」为外层引号。Mac 上如「百度输入法」等都可以方便地输入中文引号。
  • 省略号请使用 …… 标准用法,正确输入方法是 shift + 6。不要使用三个句号。。。,也不要使用三个英文句点 …。
  • 不要重复使用标点符号,尤其是在表达强烈情感的时候。例如:这个想法我很喜欢!!

段落

  • 如果是纯文本,段落之间使用一个空行隔开。如果是 HTML 或其他富文本格式,使用额外空白作为段落间的分隔。
  • 段落开头不要留出空白字符。

对第三方内容的引用

  • 如果在正文中部分引用第三方内容,请使用恰当的引用格式并给出出处。如:

    One man’s constant is another man’s variable. — Alan Perlis

  • 如果是全篇转载,请在全文开头显著位置注明出处并链接至原文,若文章为全文翻译,必须在文中注明原作者及原文地址,并添加原文链接。如:

    本文转载自 Tickmao

  • 如果格式不允许超链接,请以文本方式直接给出原文链接。如果原文链接太长影响美观,可以使用短链接服务。如:

    本文转载自 Tickmao:http://www.tickmao.com

图片的使用

  • 图片加载缓慢,经常因为被屏蔽或者加载失败而不能正常显示,并且图片上的文字无法自动适应屏幕大小和分辨率,所以在线上媒介上不要将大段文字放在图片上。Logo 等需要使用特殊字体的局部文字除外。作为文章一部分的各级标题也应该使用通用字体和文本形态。

一些具体用词

  • 「你」和「您」:在不是很正式或没有明确的个体指代对象的时候请用「你」,如文档、博客、群发的邮件等;在指代特定个体时请用「您」,如活动邀请函等。
  • 字体和字号的一致:在富文本格式文档中,特别是 HTML 邮件中,常有人因为从不同来源复制粘贴而导致同一层次的文本字体和字号不一致。这给人不专业的感觉,请避免。
  • App是 application 的缩写,发音为 /ˈæp/,所以要注意不要把三个字母拆开念。App 是一个普通名词而不是多个单词的首字母缩写,所以不应该用全大写的 APP。和其他词一样,大小写规则取决于是否处于句首、标题、或特殊短语(如 App Store)中。大多数情况下应该使用中文「应用」以避免这样的问题。在称呼 app 时,请使用「应用」「应用程序」或「app」,而非「软件」「程序」。
  • 不要称呼用户为「粉丝」,而是使用「用户」。粉丝的说法显得不平等。而且很多人不喜欢这种称呼,这个词往往指比较盲目的人。
  • Android(错误:android、安卓)(补充:SEO 情况下可以使用安卓)
  • Wi-Fi(错误:WiFi、Wifi、Wi-fi)
  • 短信(错误:短信息)
  • 通讯录(指 Contacts 功能时,不应称为联系人)
  • 「USB 调试」开关
  • 账号(错误:帐号,账户,帐户)
  • 登录账号(错误:登陆)
  • 硬盘空间(不建议使用:磁盘)
  • 所有品牌名称以官方网站写法为准,应用名称遵循 Google Play 或 App Store 的命名。若无官方无中文名称,可使用网络上被大家熟知的通用译名,否则请直接使用外文名称,不要自行翻译。
  • 若应用名称过长可在文中自定缩写,但需用括号注明缩写名称,并声明「下同」。

相关链接

参考阅读

—ChangLog

2018.01.28

  • 博客初拟

方法论 | 产品界面设计的黄金法则
Thu, 18 January 2018

产品界面设计的黄金法则

引言

一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。产品也有可总结归纳并适用的方法。学习并归纳整理,未来的路不再遥远。共勉之。

正文

1. 使用单栏布局代替多栏布局

单栏布局能够让用户对全局有更好的掌控,对内容一目了然。而多栏布局可能会分散用户注意力。最好的做法是用一个有逻辑的叙述来引导用户并在末尾放上你的行动按钮。

2. 使用礼品诱惑代替生硬的推销

例如可以给用户提供礼物来表达你的友善姿态。更深层的讲,送礼是一种基于互惠原则的有效说服策略。显而易见的好处是让你在往后的活动进展中更加顺利。

3. 合并重复的功能避免分散

随着时间的推移,不可避免的你增加了很多模块、元素,而且功能相同。碎片化的界面会增加用户的学习曲线,所以需要合并重复的功能,重构你的界面。

4. 用户的评价好过自卖自夸

用户好评是另一个可以提高转化率的说服策略。当潜在客户看到其他人对你的服务给予好评时,项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。

5. 重复你的主行动按钮

多次重复主行动按钮的方法适用于界面很长或者分页的情况。

6. 区分开可点击和已选择的样式

视觉风格,如颜色、深度和对比度都可以当做可靠的线索以帮助人们了解你的导航界面:我在哪里,我能去哪里。为了让用户清晰,可点击元素(链接,按钮)、已选择元素(选择的菜单)、以及纯文本的样式应该是彼此明显不同,而且在界面上要保持一致性原则。在视觉上,我们一般认为蓝色表示可被点击,黑色表示已被选择或是什么。

7. 给出推荐而不是让用户来选择

当列出许多选项时,给出一个重点推荐项是个不错的做法,尽管推荐的设置无法满足所有用户,但这么做是有理论依据的:当面临的选择越多时,用户就越难做出决定(决策瘫痪)。所以你可以高亮某个选项来帮助用户做出选择。

8. 使用恢复功能代替弹出对话框

假设你刚点击了一个链接或者按钮,撤销操作可以让操作流畅自然,也更符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。其实只有极少数情况下才会发生误操作。所以,为了防止误操作而设计的确认窗口其实是不人性化的,用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来提升用户的操作友好度吧。

9. 明确产品适用人群而不是面向所有人

你是想把产品做成大众化的还是有精确的适用人群呢?答案是:在产品定位上你需要更精确些。把产品定位得精确的风险就是可能缩小了目标潜在用户的范围,但这种更专业的精神却反过来会赢得信任、权威。

10. 直接果断而不是犹犹豫豫

你可以通过不确定而颤抖的声音来表达传递自己的意思,也可以通过很自信的方式表达。如果你在界面中的表述多以问号结束,比如” 也许”,” 可能”,” 感兴趣?” 或者” 想要试试么?”,那么你完全可以把语气变得更坚定一些。不过万事无绝对,适当放松措词让用户有自行思考的余地也是可以的。

11. 界面要对比鲜明让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影、渐变等效果让界面富有层次感来张显主题。最后,你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面,以达到突出重心的目的。综合所有这些,最后得到的界面会使你的主要意图与界面其他元素有明显的区分,得到完美的呈现。

12. 个性鲜明胜过普通

介绍你自己或产品时附带上名称、图片或原产地可以让与用户的交流沟通更加的个人化,当你在界面设计中实现这点时,让人觉得非常友好。同时指明区域也会隐形提高产品的声誉,好上加好。

13. 精简表单填写内容

人本性懒惰,没人愿意填写一大堆表单字段。表单中每个字段都会有失去用户的风险。多想想是不是每个字段都是必须的。如果你确实需要一大堆信息让用户填写,试着将它们分散在不同页面,在表单提交后还可以继续补充。

14. 暴露选项而不是隐藏

你使用的任何一个下拉框都会对用户造成信息的隐藏,需要额外的操作才能显示。如果这些信息是贯穿整个操作所必需的,那你最好把它展示出来做得更显而易见一点。下拉框最好用在选择日期,省份等约定俗成的地方。对于程序中重要的选项最好还是不要做成下拉形式。

15. 把界面做得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而放弃继续阅读。单列滚动的长页面是不错的,但是我们应该适当地设置一些小节,并且环环相扣,来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。

16. 不要放太多链接分散用户注意力

为了满足各式用户的需求,在页面上放些链接链到这里、链到那里是常见的做法。如果你的主要目的是想让用户点击页面最后那个下载按扭什么的话,就需要三思了。因为用户可能点击了其他链接离开页面了。所以你需要注意页面的链接数量,把导航和操作链接用样式区分开,尽量移除页面不需要的链接。

17. 将操作的状态或者进度呈现出来

现如今大多界面当中已经呈现了各色样式的进度条或者标明状态的图标,比如邮件有已读或未读的状态,电子帐单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来说是很有必要的。这样用户就可以知道某些操作是否成功,接下来准备进行怎样的操作。

18. 使用获利按钮(好处说明)代替普通的按钮

试想界面上有这样两个按钮:一个是” 帮你省钱”,另一个是” 立即注册”。我敢打赌大多数人会点击第一个,因为第二个按扭让人感觉不到有利可图,并且” 注册” 让人联想到填不完的表单。也就是说让用户感受到获利的按钮更有可能被点击。这种让用户感到好处的文字信息也可放在按钮旁边,不一定要做为按钮的标题。当然,正常的按钮还是有用处的,一般用于重复性操作频繁的地方。

19. 使用直观的操作而不是缺乏上下文关联的菜单

直接在元素身上进行操作是更直观明了的方式。比如在一个列表中,我们想让用户对每个条目进行操作那么就把按钮放到当前条目上,而不要把放到列表之外。再比如就是直接点击元素就进入编辑状态(比如页面上的地址信息点击后可以进行编辑)。这种方式比传统的选中再点击相应的按钮进行操作要简洁省事得多。当然,对于一般性的操作本身就不需要有什么上下文的,就没必要这么做了,比如页面上的前进,后退按扭。

20. 尽量直接显示表单而不要额外页面

在一个足够大的宽屏界面上最好还是直接给出表单,这比点击按钮再弹出表单要好很多。首先减少了点击操作,流程变得简洁也节省了时间。其次,直接呈现出表单可以让用户知道表单有多长,其实也是在告诉用户注册花不了多少时间。当然,这条规则适合注册表单非常简单的情况。

21. 让界面平滑显示而不要死板地呈现

用户进行操作过程中,界面上的元素会经常出现,隐藏,打开,关闭,放大缩小移位等。给这些元素增加些自然的动画,淡入淡出效果不但美观,也更符合实际,本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长,那样会让想尽快完成操作的用户不耐烦。

22. 使用逐步的引导代替突兀的注册

与其让用户马上注册,何不让用户先进行一些体验式的操作呢。这个体验过程可以展示程序的功能,特性等。一旦用户通过简单几步的操作了解了程序的价值所在,那么它会更愿意填写注册表单的。这种循序渐进的引导可以尽量推迟用户注册的时间但又可以让用户在没注册的情况下进行个性化设置等简单操作。

23. 减少边框避免浪费注意力

过程边框会喧宾夺主。不用说,边框确实在划分区域进行版块设置时有很大的作用,但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的,在排版时可以将界面上不同区域的元素通过空白进行分组,用上不同的背景色,将文字对齐方式进行统一,还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时,我们经常在界面上方便地拖出很多区块来,这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐,这样做不会让那些多余的线条来扰乱视觉。

24. 展示产品带来的好处而不要罗列产品特性

市场就是这样的,用户永远只关心自身利益而产品特性对他们来说倒不是那么重要。只有利益才更直观地体现出使用产品所带来的价值。Chris Guillebeau 在他的著作《100 美元起家》中指出,相比压力,冲突,烦心事和未知的未来,人们在乎得更多的是爱,金钱,认同感和自由支配的空闲时间。所以我相信在展示产品特性时回归到利益上是必要的。

25. 要设计好没有数据时的展现

界面上经常需要呈现不同数量的数据,从 0,1,10,100 到 10000+ 等。这里存在个普遍的问题就是:在程序最开始使用的 0 条数据到过度到有数据之前,该如何进行显示界面。这也是我们经常忽视了的地方。当程序初始没有数据时,用户看到的就是一片空白,此时用户可能不知道该进行哪些操作。利用好没有数据的初始界面可以让用户学习和熟悉如何使用程序,在程序中创建数据。力臻完美永远是我们追求的目标,界面设计也不例外。

26. 尝试默认选择

将界面做成默认用户选中想要使用你的产品,意味着如果用户真的需要使用,那么可以直接点击确定而不需要额外点选了。当然,将界面设计成默认选择的样子多少存在点争议,有点强迫用户的感觉。如果你想道德一点,你可以要么把让用户选择的文字写得模棱两可,要么使用双重否定这样不那么直白的描述,这两种方式都可以让用户觉得没有那么强的感觉是被强迫选择使用产品的。

27. 保持界面一致性,不要增加用户的学习成本

自从 Donald Norman 的一系列著作面世后,界面设计中尽量保持一致性成了一个普遍遵循的准则。在设计中保持一致性可以减少用户的学习成本,用户不需要学习新的操作。当我们点击按钮,或者进行拖拽操作,我们期望这样的操作在整个程序的各个界面都是一致的,会得到相似的结果出来。不过在让界面变得一致之前,记住一点,适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对,我们应遵从一致的设计准则,但适当地打破这种常规。

28. 使用合适的默认值,减少用户的额外操作

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面,这是种非常常见的做法,可以帮助用户快速填完表单或者注册信息。

29. 遵循惯例避免重复造轮子

界面设计中遵从惯例跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定,用户用起来会很方便。相反,不一致和没有遵从惯例则会提高学习成本。有了界面设计中这些约定,我们想都不用想就知道界面右上角(大多数情况下)的叉叉是关闭程序用的,或者点击一个按钮后我们能够预测到将会发生什么。当然,惯例是会过时的,随着时间的推移,同样的操作也有可能被赋予新的含义。但要记住,当你在界面中打破这些常规时一定要目的明确,并且出发点是好的。

30. 让用户觉得可以避免失去而不是获得

我们喜欢成功,没有谁愿意失败。根据心理学得到的可靠结论,人们一般更顷向于避免失去拥有的东西而不是获得新的利益。这一结论也适用于产品的设计和推广中。试着说明你的产品会帮助客户维护他的利益,保持健康,社会地位等要好过告诉客户这个产品会带来一些他未曾拥有的东西。比如保险公司,它是在销售我们出事之后可以得到的大笔赔偿呢还是在强调可以帮助我们避免失去拥有的财产?

31. 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小,元素尺寸等。当所有这些调整运用得适当时,可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计,这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行,你可以乘坐高铁快速到达景区(从页面顶部瞟到底部),但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方,而不是对着空白单调的一个屏幕。

32. 将有关联的东西分组避免杂乱无章

将各个功能项分组合并起来可以提高可用性。有点常识的人都知道刀子和叉子,或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。

33. 使用行内即时校验而不是提交后再告诉出错

在处理表单时,最好立即检测出用户所填写内容是否符合要求然后给出验证消息。这样错误一出现能就能得到改正。相反,提交后再检查表单会给出错误消息,会让用户感到不爽又要重复之前的工作。

34. 放宽对用户输入的要求

对用户输入的数据,尽量放宽限制,包括格式,大小写什么的。这样做可以更人性化一点,也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候,用户有很多种输入方式,带括号的,带破折号的,带空格的,带区号和不带区号的等等。如果你在代码中来处理这些格式的问题,代价也只是你一个人多写几行代码而以,却可以减少无数用户的工作量。

35. 让用户感觉需要快速做出响应而不是毫无时间观念

适当的紧迫感是个有效的战术可以让用户立即做出决定而不是等上个十天半个月。重要的是这种战术屡试不爽,因为它暗示了资源的紧缺或者活动的时间有限,今天可以买,但明天可能就无法这么低价了。另一方面,这一战术也让用户感到会错失一次大好的机会,再一次,应用了人们害怕失去的本性。当然,这种战术会被一些人嗤之以鼻,认为是不耿直的做法。不过,这只是种战术而以,并且在保持合法性的前提下应用也无伤大雅。所以请不要为了营销而在界面上制造紧迫的假象。

36. 尝试饥饿营销(制造稀缺感)

物以稀为贵。饥饿营销给出的信息就是东西不多,只剩几件,明天再来,可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看,那些批发商或者大零售商,他们也使用饥饿营销,以获得更好的销量。但在软件行业,我们经常会忘记有饥饿营销这回事。因为数字产品是可以很容易拷贝复制的,不存在缺货的情况。其实,在界面设计中,也可以将其运用起来与现实中的资源紧缺进行联系。想想一次网上研讨会的门票,想想你一个月可以服务的人数限制,这些信息都可以告知用户是有限的。

37. 让用户从已知里选择而不是直接回想

这一界面设计中的经典准则是有心理学依据的,相比要让某人回想想某样东西,从一堆东西中认出某样东西会更容易些。辨识出一样东西只需要我们稍微回忆一下,通过一些线索就可以完成。而回想则需要我们全面搜索自己的大脑。也许这也是为什么试卷上选择题会比简答题做得快的原因。所以试着在界面上展示一些用户之前涉及到的信息让他们进行选择,而不是让他们想半天然后自己填写。

38. 让点击区域更大

像链接,表单的输入框还有按钮等,如果尺寸做得大一点则点击起来更方便容易些。根据费特定律,使用像鼠标这样的外设来点击需要一些时间,特别是元素比较小的情况下,时间会更多。鉴于此,最好还是把你的表单输入框,按钮等做大点。抑或者你可以保持原有的设计不变,只是把元素可点击区域(也就是热区)增大。这样的一个典型例子是手机设备上的文本链接和导航菜单,它们文字不一定很大但背景是拉伸的,在很宽范围内点击都有效。

39. 优化页面加载速度,不要让用户等太久

速度很重要。页面加载速度和 UI 对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条,二是展示其他相关或有趣的东西来吸引用户的注意力(就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧)

40. 除了按扭外,建议增加快捷键支持

当你的程序广为流传,应该考虑下高级用户的感受。人们总是试图为一些重复性的操作找到更快捷的方法,快捷键就应运而生了。相比在界面上点来点去,快捷键无疑大大提高工作效率。一个好的例子就是现今流行于各个主流程序中的 J(后退)K(前进)快捷键组合,比如在 Gmail,Twitter 和 Tumblr 中。按钮固然好,但快捷键会锦上添花。

41. 尝试锚定价格

就像卡尼曼观察到的那样,锚定效应造成的认知偏差是人类很难克服的,我们的决策受最先进入我们大脑的数字的影响,锚定数量也并不一定是一个价格,它可以是一个数。营销人员利用锚定效应最常见的例子是同时显示建议零售价和实际价格。

42. 让进度条预设已经走了一部分

一件事越接近完成我们的动力越强,这被称为目标梯度效应。让人觉得自己已经取得了进展这件事宜早不宜晚。

43. 使用渐进显示而不是全部展开

渐进显示不让大量无关的信息直接暴露出来,而且展现的内容有上下文的关联,更容易让用户理解,不会一下展现太多表单把用户吓跑。

44. 用小的承诺代替大的

使用承诺是一个功能强大的说服策略,充分挖掘人的自我认知一致性原则,一连窜的小问题答案的” 是 “,会得到更大问题的 “是的。” 还有显示月费而不是年费会传达出一种没有合约的感觉,让用户觉得随时可以退出,没有障碍。

45. 替换模态对话框为更温柔的提示方式

虽然模态对话框更吸引用户注意力,但是也会带来一些其他问题,首先阻止了用户操作对话框之外的操作,而且打断了用户之前的操作动作,为什么不尝试行内或滑出等不那么碍眼的提示方式呢?

46. 尝试多功能控制而不是分成很多功能块

例如可以在输入框里实现筛选过滤的功能,而不用增加额外的筛选菜单。打分功能里增加悬停显示功能而不是增加额外的显示模块。但是不要滥用,否则会增加用户的学习曲线难度。

47. 尝试增加图标文本

图标和文字在一起可以减少很多歧义,比如以下下箭头到底是表示往下移?降低优先级还是下载呢?或者” X “图标代表删除?禁止还是关闭呢? 当用户没有时间理解你界面图标表达的意思的时候问题就麻烦了,所以为了理解,最好图标要配上文本,如果空间实在不够,可以用悬停图标显示提示文本的方式展现。

48. 尝试使用更自然的语言代替干瘪的文本

自然语言比简短、严格的短语更方便用户理解。

49. 激发用户的好奇心

提供一个能激发用户好奇心的信息,这可能是一个样章、演示、试用,或做了 XYZ 才能看得到的免费内容。

50. 尝试消除用户顾虑而不是假设一切正常

告诉你的客户支付是安全的、货物免运费而且随时可以退换,没有任何后顾之忧,这是能提高转化率的极佳策略。

51. 尝试价格错觉

改变提示方式让人们完全靠自己判断你的产品的价值,也可以帮助他们做。如果你决定利用人类不理性,就可以用不同价格的显示方式,让你的产品变得视为更有价值。比如在价格前加上 “只”,“实惠” 等词。把价格分解为每单位价格(例如:每天 1 块钱,而不是一月30 块会员费) 另外,可以使用以 9 结尾的数来减少价格位数。

52. 尝试感谢你的用户而不是简单的完成确认

感谢的可以让你的业务,产品或 UI 更加人性化,表达了对用户的欣赏和关心。感谢可以引导出进一步的对话或行动。感谢您阅读这一段。 :)

53. 直接给出有意义的结果不要让用户做数字转换工作

比如显示 3 分钟前就比显示一个时间日期更容易理解,让用户免除一切数学计算。

54. 给予用户再次确认选择的自由

在行动按钮或选择之后告诉用户有自我选择或拒绝的自由。

55. 让奖励变得随机

可变的随机的奖励会让用户上瘾(游戏让人上瘾的原理之一)

56. 抓住用户的注意力

可以用增加尺寸和提高对比度的方式来突出重要行动。其他吸引注意力的方法有:采用不规则形状,自动焦点,高亮,固定跟随(浮动),以及方向箭头等。

57. 让表格对比清晰明确

表格应该显示出最相关的属性差异,有助于用户做出单个决定。

58. 显示一组而不是单独的一项

人有收集东西的癖好,无论是物理的还是虚拟的。收集一整套东西会自然的成为奋斗目标。通常获得一整套东西带来的收益增加(蛋糕比其单独的成分更大、更好)。通过显示过去的收获也会增强以后的行为动机。

59. 让用户有明晰的期望而不是蒙在鼓里

你在 X 步骤中的第一步。你的选择结果在 Y 中。在 Z 之前你会收到 XX,下一个任务将全部完成。这种不断的清晰的提示可以建立与用户之间的信任,而不是让用户两眼摸黑。

60. 用幽默代替严肃

为什么要一直那么严肃呢?在你的 UI 里加入一些幽默的元素有助于与你的用户 / 客户之间建立良好的情感联系,也更容易原谅你的一些错误。

61. 用反馈代替沉默

当我们执行了一个动作,肯定我们希望知道是否成功。比如:当我们发送邮件时候希望知道是否发送成功。什么反馈也没有意味着不确定性:起作用了么?点击了么?按钮按下去了么?是否要重试? 成功提醒是非常有价值的交互。

62. 判断出用户意图

如下图所示,这是亚马逊的一个多级菜单,当第一个菜单展开,用户鼠标往右下角移动路过第二个菜单的时候,之前的展开的菜单并不会消失,他们靠算法预判到用户可能是想点击第一个菜单下的某个子菜单。

63. 使用宽松的间隔避免元素挤在一起

空白的填充可以让内容和表格的可读性更好,广泛适用于列表、表格、段落等元素。

64. 使用讲故事的方式而不是列出事实

讲故事是最古老的传播方式,可以在着页面和各种 UI 交互页使用。一个基本的故事有几个简单的元素,如场景,带着目的的人物,遇到的问题。故事可以引发读者的情感反应,就像自己遇到了同样的处境。这样,故事也可变得更加难忘。这也就是为什么销售长久以来喜欢讲故事,说明这非常有效的。

65. 使用可靠的内容,避免造假

人们可以一眼就看出太假的东西,为了让你的产品更值得信赖,不要造假。股票高高的走势图和网页上开心笑的人没有任何理由和意义。混杂着好和坏的评价,非整数数字让你的网页更真实可靠。

66. 随着用户的进阶而优化

当用户对你的操作界面很熟悉之后,一些给新手显示的东西或者一些经常显示的东西变得不那么重要,可以去掉或者移动其他地方。这样可以让设计更加精简。

67. 以别人为中心

想建立社会影响力的时候就要优先考虑别人的利益,把对话中的” 我 “变成” 你 “。

68. 对于你显而易见的东西可能对于别人不是

有些事情对于我们来说似乎是显而易见的,对于别人却不是。如下图中让用户输入 URL 快捷方式,用户不一定知道指的是什么:

69. 让语言简洁明了,去掉多余的废话

使用更少,更简洁的话,在写完草稿后,看看是否还可以缩减。抓住要点可以避免丢掉用户的注意力。

70. 使用响应式布局避免静态布局

没有什么比出现横纵双滚动条更糟糕的页面了,让页面支持的响应式布局,这样在各种大小的移动设备上都能良好的显示。

71. 让视觉效果清晰明确

让不同的元素成组,使用不同的字号,使用不同的色调,让视觉效果清晰明确。

72. 让你的界面可纠错

出错是难免的,所以用户界面应该允许细微的纠正。如更换账号或更换地址等

73. 让用户尝试社会承诺

人类偏爱一致的自我形象,社会承诺会成为一种自我动机。在这一点上,公开的社会承诺,会让人更有责任去兑现。当我们告诉人们,我们会做一些事情(或者采取公开的行动),那么未来行动的可能性就会更高。

74. 增加重试和重做的功能

例如:当上传图片时候,文件上传失败或者对上传的图片不满意想换一张的时候,重试和重做就很有必要。

75. 把过多的选择去掉

更多的选择让决策越难,甚至还会降低满意度,因为这让后悔和自责倾向增加。著名的果酱研究实验一次次的被验证。

致谢作者,感兴趣的小伙伴不妨看看。

相关链接

原文

—ChangLog

2018.01.18

  • 博客初拟

HyperApp利用iPhone来配置Shadowsocks
Thu, 11 January 2018

HyperApp 利用iPhone来配置Shadowsocks

2017年10月,也就是两个月前开始折腾搭建自己的博客,同时购买了自己的域名。因为博客访问速度太慢,考虑购买自己的服务器,想作为后备支持力量。同时打算给自己搭建ss,用以配和Shadowsocks客户端方便可以浏览油管工,刷一下Pinterest,顺带使用Google搜索引擎来更加精准的应对自己日常的搜索需求。

为了博客更加美观,发表博客后能够有更好的直观感受,所以考虑动手来搭建博客时,在选择方式上踟蹰不前。有同为产品行业的业界人员采用 Wordpress 来搭建博客。如唐杰或者涨汤。也有采用 Jekyll + Github Pages 的来搭建静态博客。还有 Hexo + Github Pages来搭建自己的博客。方式有很多,最终还是选择以内容创造为主,动态效果炫酷反而违背了搭建博客的初衷。至于 Hexo 还是 Jekyll ,只是当时机缘巧合看到了 Hux 的博客,喜欢上他的这个主题,开始有了现在的博客的诞生。当然 Hexo 的 Next 主题也很不错,我也很喜欢,但有所取舍之后还是选择了 Jekyll 。

所有的巧合都是别有用心。

购买服务器

我本意是 2.5 美元/月的,最初想开Linode的 2.5 美元/月或者 5 美元/月的套餐,可因为仅支持Paypal和信用卡,转而选择了 Vutrl 东京机房 5 美元/月,来满足自己日常上网需求,实际我用不了 1T 那么多。

对于半吊子的技术认知水平的我,如果自己去搭建环境进行配置。一步步下去成本太大,毕竟懒,总想找脚本或者相对容易的方式来解决办法,所以发现HyperApp对我而言的确是个意外惊喜。开发者整理了超过几十个常见的应用,简单而又自动化的操作方式让环境布置和管理变得非常简单。

添加服务器

根据相应的信息,进行填写,并保存,即可快速添加到软件列表中进行管理。

包括些主要信息:

  • Name 名称:自己对服务器的备注(多服务器的时候更加实用)
  • Host 主机:域名及服务器IP
  • Port 端口:默认为22
  • User 用户名:root权限的账号
  • Password 密码:登录密码

tianjiafuwuqi.jpg

HyperApp 添加服务器页面

fuwuqiliebiao.jpg

HyperApp 服务器列表页

填写基本信息,服务器设置成功后,即可在服务器列表中看到服务器的运行状态。

安装应用

通过在应用的商店进行选择应用,来搭建相应的服务,目前支持服务众多,可根据自己的需求选择合适的应用来搭建博客,设置ss等。详细设置可以参考官方文档

以配置Shadowsocks账号即ss为例

chuangjianyingyong.jpg

HyperApp 应用列表页

peizhiss.jpg

Shadowsocks信息填写页

选择你想搭建该应用的服务器来创建一个应用。填写基本信息,创建成功后,即可在我的应用中找到对应的App。选择应用进行安装,安装成功过后即可正常使用。

当然使用需要搭配客户端,iPhone上Shadowsocks软件、wingy等均可胜任,懂的人自然懂这里就不多加阐述了。

小结

相信你一定会遇到那个你中意的“她”,就这样悄然出现你的生活里打动你,让你为其打Call,欢呼雀跃。友情也是,爱情亦是!

相关链接

—— ChangeLog

2018.01.11

  • 博客初拟

2017年终总结 我与时光的一次道别
Wed, 10 January 2018

2017 年终总结

总结算是从大学开始养成的习惯,以往每年在年终都会有一定的小结,寓意简单,无非是新的一年新的开始。我们始终对这个世界报以善意。

往年都是发布在个人QQ空间,后来随着自己使用习惯,QQ被微信所替代,空间已经是较为久远的记忆。今年因为开了博客,打算回顾下这一年。

恍恍惚惚,很多事早已想不起来,只能将那些碎片的记忆拼凑起来,不够系统但勉强对我而言的流水账。

工作

这算是我来公司一年零四个月了。

久吗?不久,但也不短。其实创业公司真的很累,不够完善的制度,差强人意的工作环境。从最初的初出茅庐到已是公司较老的员工。带我的领导最后都因为这样那样的原因离开,虽然基本都是自己的摸黑前进。除了被黑暗支配的恐惧和不安,作为产品经理,对我而言这大概是最无奈和备受考验的一年。

年底,公司情况好转,团队的逐渐完善,起码让我觉得不再那么举步维艰。开始有了成长,有了试错和不断尝试的方向。

上手就是一堆项目砸的晕头转向、疲于奔命还像上了发条的机器猫一般,滴滴答答的转个不停。思维在不断的迭代,懂得去更加宏观和站在格局上看待事物。虽然站的也没怎么高。在这之前一直觉得自己方向很明确,风吹雨打依然坚挺的像个小草一样野蛮生长。后来发现,也可能之前做的那都不算是该做的。你在后来还需要去面对更多的问题,难题,披荆斩棘。

竹杖芒鞋轻胜马,谁怕? 一蓑烟雨任平生。

我想花更多的时间去钻研,去尝试来充实自己。于是保持阅读,开始了解 Github 去尝试开源程序,去系统的了解产品的知识点,开通博客尝试去做一些记录,所思所想即可。我不是作家,我是书生,理由很简单就是想记点东西。当然也通过这些了解到了许多有意思的人,神交已久。

来年的计划,我想把自己后来的成果逐渐变为作品,只有这样去要求自己,才能在交作业也好,工作也好给自己一个不错的交代。起码那段时间你不是荒废的,你的成果不是无效的。在不断产出中积累自己的工作流,沉淀自己的方法论。每个人都可以更加高效,如果你愿意的话。

我们不是傀儡,不是生产线上的奴隶,理应靠大脑来换取更多的时间来创造更多有意思的东西。

生活

今年的生活出奇的平淡,也许是因为毕业一段时间,交情好的朋友逐渐不在一个城市,唯一的几次灯火琉璃般的生活还是和同事一起,去迎接这个城市不算那么单调的灯红酒绿。抱着有了设备我就一定会好好学习的心态组建了自己的第一台台式电脑,生产力工具。最后变成承载灰尘的仪器,轻轻一吹,粉尘乱飞。

因为关注了少数派,还有看到了一些有意思的场景。开始逐渐想让自己的生活变得更加精致。俗称“讲究人”?开始尝试时间管理、任务管理、听播客、喝茶、喝咖啡、写日记、读书。毕业一开始设想的情景和决策无比正确,才有了在这个阶段没有为房间小这种问题而显得压抑的情绪。

因为工作的原因去了两次深圳,即使那对我而言不算是很好的记忆。不大的酒店、不断撕扯的对话,现在回顾想想依旧觉得是那么的不值一提。当然如果可以,以后别再靠外包来满足自己本以为可以省事的事情。商业驱动下,利益往来所产出的作品,无情怀、不精致,只剩下不断的撕扯来获取更大的利益。

毕业了反而放下了游戏,还记得大学的时候和室友玩游戏玩到天昏地暗的那个阶段。算什么?无处安放的青春?不算吧。后来偶尔玩玩游戏,就当是为了温暖那些时空距离相隔很远的朋友,言语不多,但确实牵线搭桥般将人串了起来。

明年对于生活这块想组建自己的时光机。日记、博客保持更新,希望不再像今年这般无头苍蝇一样漫无目的。开始准备记账理财,虽然做不到财务自由,但也不想一直沦为奴隶。vlog 和运营博客作为主要任务。既然人丑,那就多读书。

学习

在学习方面,一年算是成果甚微。看了不少相关的学习视频,但是产品确实不是看看教学视频就能真的成长多少。能给的都是让你更加熟悉业务和意识到自己的渺小和无知。

去年给自己安排的是在四年左右的时间起码成长到能独立完成一个项目,无论大小。

  • 一年产品的积累;
  • 一年设计的尝试;
  • 一年程序的运用;
  • 一年运营的认知。

产品的积累对我而言是个长久份工作,那么随之而来的设计。打算保持良好的习惯。

  • 每天刷半小时设计网站;
  • 开始将原型图通过Photoshop而不再是Axure来完成;
  • 尝试去画一些有意思的事情,这是个不大不小的梦想,希望像神笔马良,下笔成一些气候;
  • 准备日常开启拍照,去整理生活中的点点滴滴,做个记录,记录美好的事物,抓拍一些有意思的事情。

关注了很多的效率和开智性的博客,希望玩一些有意思的软件,虽然还没有实现自我的有效管理,但是认知在不断的升级。我是软件爱好者,也是软件收集狂,希望今年变成软件测评狂。打个标签,树个flag,只是希望自己能关注到更深层次的东西,形成自己的工作流和认知。

总结

新的一年,我们所走的每一步都是为了见到那个更好的自己。Getting Things Done。

  • 阅读
  • 写作
  • 绘画
  • 练字
  • 早起
  • 听播客

良好的习惯继续保持,未形成的好习惯逐渐养成。

我知道灯 不会在 任何时候为我开

是好是坏 该不该 还没来的不想猜

有谁能真的看得清楚 哪里是归宿

要怎么组未来的拼图 先走好每一步

——Jony J《不用去猜》

—— ChangeLog

2018.01.10

  • 博客初拟

2018.01.11

  • 部分文字错误修改

Lyle | 一个普通产品经理的数字生活
Wed, 29 November 2017

一个普通产品经理的数字生活

人生在世三万天,趣果有间,孤独无解。

Part 1 介绍下你自己

Hi!我是Tickmao,盘踞在杭州的产品汪,软件收集爱好者。日常喜欢关注互联网动态。

因为个人经常会尝试各种各样的App,接受到最多的信息是:“你知道有什么吧唧吧唧的App,可以实现虾米虾米”。

手机是16G的内存的来驱动我在软件的选择上精益求精,其实就是当时的错误决定,悲伤那么大(经验充分告诉我们,抓关键指标才是真理),天秤座的纠结心理在这个时候完美展现。

之后更换为iPhone 7 128G直到现在。

Part 2 工作中的一天你是怎么度过的?

早起进行晨间仪式,包括阅读写作等。

上班地铁通勤路上听播客,抵达公司工作前进行工作前仪式,查看Thing进行任务清理,日常会议或行程会选择Fantastical。会使用aTimelogger2(随时记录花费时间的主要事项)配合番茄工作法进行时间记录和集中注意力在上午处理重要事情。午间进行微信查看和邮件处理,刷即刻和使用Reader进行RSS阅读,下午会主要进行会议和日常数据的查看以及竞品和市场调研挖掘的工作,下班前进行下班前仪式包括整理归档,邮件查看和日报撰写。回家途中会使用Spotity来舒缓一天的工作。

回到家中进行Instapaper稍后读选择某一感兴趣领域,查找相关的书籍使用Kindle或iPad进行阅读并形成思维导图存储在Evernote,进行晚间仪式,洗漱上床看感兴趣的影视或视频,使用workflow+Airtable进行书籍和影视的记录。使用Day one进行每日回顾,配合Workflow进行每日一记,打开Spotity播放最喜欢的音乐,进入睡眠。

Part 3 哪些软件你的工作/学习/生活最重要?

那时年少,总喜欢装各种各样的应用,一个个挨个研究,尤其是相同性质的App,总会对比来对比去,每个领域选一两个备用的。后来发现,翻了越来越多的App,但日常打开的应用就那么几个。于是开始挑选日常使用顺手的,其他新颖好玩的App只作为尝鲜使用。

大家推荐的不一定是你需要的,大家都用的也不一定是适合你的。只有遇到了什么问题并尝试想要对症下药解决掉,你才能选出合适的。

首屏

  • Moon FM:听播客软件,我常在上班的通勤路上选择用Moon FM来听播客;
  • Spotify:听音乐电台,会在下班的路上选择听听音乐,看着熙熙攘攘的城市逐渐进入黑夜,有时也会选择用网易云音乐来替代;
  • Things:任务管理软件,进行日常的工作任务和生活事物的管理;
  • Due:任务提醒,因为Things更主要的是让人主动查看管理任务,提醒功能较弱,选择Due来进行互补;
  • Reader:RSS阅读器,支持多个平台扩展性强;
  • Instapaper:稍后读软件,通常在Reader中选择较为重要或感兴趣的文章进行稍后阅读;
  • Lighten:思维导图软件,思维导图是可以有效的提升逻辑和灵感的方式;
  • Evernote:知识存储库,会对自己的知识体系和产出物进行存储,方便及时查看;
  • Workflow:效率神器,用了你会知道他远比你想象中还要强大;
  • Day one:每日回顾和复查,进行总结和记事;
  • Moneywiz:记账习惯养成中……

PC

  • Chrome:浏览器和 Google 是我解决问题和获取知识的重要工具;
  • Typora:Markdown编辑PRD和日常写作,插入表格和拖入即可上传图片;
  • Everything:文档查询神器,即使有好的文件管理习惯,依然会选择以这种方式快速查找文件,大大提高办公效率;
  • Mindmanager:思维导图文件,头脑风暴;
  • Riot:图片压缩软件,可以直观地调整压缩参数,同时保持最小文件大小;
  • Smartpdf:PDF查看文件,养成良好的习惯发送给他人的尽量是校验过并不修改的,打开pdf神速;
  • f.lux:护眼神器,自动调节电脑色温,有效保护眼睛,互联网从业者的神器;
  • ccleaner:轻便小巧的清理电脑软件,很安静,无弹窗,有效清除浏览器缓存。

Mac

  • Lanunchbar:mac上必备的启动利器,能节省你想象不到的大量低效率操作;
  • Typora:双平台使用,颜值真的好看,而且我还自制了主题;
  • Reeder:RSS重度患者,使用Mac平台,从未停止RSS的使用;
  • iTerm2 + on my zsh 终端神器,使用之后就完全抛弃了Mac自带终端;
  • Vscode:新的代码编辑器,良好的定制和扩展是使用的主要原因,Github有备份;
  • Chrome :离不开的浏览器,调试及插件可用性极强。

Part 4 那么能否具体说说你是如何使用这些App的呢?

Workflow/捷径

效率神奇,谁用谁知道。可以通过他实现一系列本身很麻烦的操作,但一直很少有自己进行制作,使用的更多是通过少数派和Telegram来获取一部分的动作方便自己。我是用Worflow主要用户书籍及影视记录到Airtable,使用Worflow和Day one进行配合每日日记记录,进行复查和回顾。

即刻

这个一出现就获的大量好评的应用,名副其实。面对信息爆炸的时代,选择一些有意思的事情来关注,可免去很多烦恼,我主要用他来刷一些有意思的事情,来做碎片化知识的补充,打发零散时间。及时提醒并推送你关注的消息。不过,我关闭了手机上基本所有的消息提醒,这里作为主动获取信息的渠道。

Things

选择用他来做工作和生活之间的事物管理,主要是在使用Omnifouce任务反而成了负担,所以决定简单对待任务,任务处理方面对2分钟的任务选择立刻解决,对日常的任务设置Tag+Defer时间,每日保持8-15个To do List,对并未有明确截止的dealine进行合理分配,对有明确时间的任务设置截止时间。软件配合Due进行任务提醒,他会不断跟你弹通知直到你完成任务。

Reader(Tiny Tiny RSS) + Instapaper

使用RSS订阅日常关注的博客和经常逛的网站,找到网站的通过Tiny Tiny RSS配合Reader进行信息的获取,订阅的通常属于每日必看的网站,你不想错过该网站任何一条新闻。选择感兴趣的文章发送到Instapaper进行碎片的化信息重组,用Lighten转换为思维导图存储在Evernote进行资料收集和整理,形成知识储备。

Part 5 你都在使用哪些硬件设备?

  • 电脑:自己组装的PC,8G+256SSD+1T+i5+RX480+Dell P2417H+凯酷 89+蝰蛇鼠标+漫步者音箱,工作游戏两不误,满足我的日常办公要求和娱乐要求。但因为长期面对电脑,在到家之后逐渐转为使用平板。
  • iPad Air 2 (128G)+Logitech k380:随着iOS 11的到来,iPad逐渐成为我的主力生产力工具,配上蓝牙键盘满足我的基本需求,包括阅读、观影、刷新闻、写作等各方面。
  • iPhone 5s(16G)目前在手机上的需求更趋向于任务管理和阅读的需要,16G的内存我存储了大概八九十个App,想想都觉得我使用的方式是不是太过强大,勤俭持家,在考虑购入iPhone X。
  • Kindle pw3:日常阅读使用,纯阅读环境下可以保持专注,睡前阅读逐渐开始替代纸质书。
  • 森海赛尔 IE 80:在使用后发现再也离不开降噪耳机。
  • MUJI文具:包括活页夹、方格纸、笔等,不知在什么时候逐渐成为MUJI粉,简单实用。
  • Lamy 钢笔:吐墨均匀,日常使用,手写利器。

Part 6 你最理想的工作环境?

大大的办公桌,两台27寸 5K显示器,高速的网络无墙限制,安静的环境无人打扰,高层视野开阔,落地窗外阳光微暖。

Part 7 你平时获得工作灵感的方式有哪些?

  • 阅读
  • 音乐
  • 论坛
  • 社交网络

Part 8 推荐一个让生活更美好的物件

降噪耳机

意外在挑选耳机的过程中被朋友安利了降噪耳机,最终选择了森海塞尔IE 80,带上耳机你会发现整个世界都清净了。因为最开始使用苹果的自带耳机,在嘈杂的环境下很难听清耳机里发出的声音,音量过大对耳朵有所影响不说,仍旧在中途会夹杂着噪音影响听感,尤其是我经常会在通勤路上听播客或者音乐。在工作过程中挂着耳机可以有效避免被打扰,人们很少去打扰挂着耳机的人(我的世界你融不进去啊,当然没人知道你在听什么,哪怕是嘻哈摇滚)。看着一个个番茄,成就感爆棚,不得不说是福音。

Part 9 分享一个改善生活的小习惯

早起

人的时间和精力是有限的。所以一定要把有限的时间和精力放在最重要的事情上。

我选择Momentum来进行日常习惯培养打卡包括阅读、写博客等等,感触最深的是早起所能带来的良好效益,你会发觉一天比你晚起长了那么一点,你有更多的精力在人静的时候进行学习阅读和写作。尤其是迎接黎明的那一刻,你会发现,我们见到的都是光啊。有人会说早起很艰难,这里有一个小方法可以尝试,你可以在睡前将你的闹钟放置在你够不到的位置,当第二天闹钟声响起,爬起来关闹钟的那一刻,让自己清醒远比在床上苦苦挣扎来的轻松。我们需对未来抱有希望,即使下一刻就要奔赴战场。

—— ChangeLog

2017.11.29

  • 博客初拟

2018.01.09

  • 内容格式调整

2019.04.29

  • 调整部分新内容