Clear——乱花渐欲迷人眼的待办事项工具

标签: 手机产品 | 发表时间:2012-02-19 16:07 | 作者:elya妞
出处:http://elya.cc

一、深泽直人的“无意识设计”

Clear这款产品,无处不萌发着一股无意识设计的味道,用户进来之后,看到一个没有任何按钮的list界面,之后任何下意识的手势操作,都对应着合理的引导,比如点击列表看详情、点击空白新建条目;比如下拉列表之后,会出现pull to creat list的提醒,松手就可以新建list;比如猛拉列表之后,会出现switch to menu的提醒,松手就可以回到menu列表;比如在列表上从左到右滑动完成待办事项,从右到左滑动删除待办事项;比如长按列表项就可以挪动位置……这些,都是用户直觉反应下会去探索和执行的操作。
“无意识设计”(Without Thought),又叫“直觉设计”,是深泽直人首次提出的一种设计理念,即:“将无意识的行动转化为可见之物”。设计是为了满足人的生活需求,而非颠覆,设计是方便人的生活方式,而非复杂。因此,好的设计必须以人为本,注重人的生活细节,方便人的生活习惯,使设计让生活更美好。特别是在手机产品设计高度发达的今天,很多设计师力图否定约定俗成的设计,用自己的思想创造一种新的生活方式,这样就无形中加重了人们的“适应负担”,“无意识设计”并不是一种全新的设计,而是关注一些别人没有意识到的细节,把这些细节放大,注入到原有的产品中,这种改变有时比创造一种新的产品更伟大。

 

二、特殊的层级导航设计

Clear的导航模式很有意思,没有标签页,没有选项卡,没有按钮,完全依赖手势操作。
首先让我们来看看Clear的层级结构——
如图所示,Clear大概分三个层级,Menu——>Lists——>Items,这三个层级分别是三个独立界面,利用手势向下滑动,回到上一层级,利用手势向上滑动,回到上一层级。
如图所示,Clear没有采用iPhone标准的Navigation Bar导航,而是利用手势下拉回到上一层级,这种交互方式比较新颖,也符合心智模型,但是仅仅适合层级关系较少(3个之内),结构清晰简单的应用。

 

三、对移动端特性的充分利用

1.乱花渐欲迷人眼的手势操作

Clear的最大特色,就是“无按钮”,依赖手势完成全部的操作,这在PC端是不可想象的,在按键手机上也是无法实现的,但是在触屏机上,这种交互形式成为可能,成为亮点,甚至成为卖点。让我们来拆解一下Clear对手势的利用——
最基本的点击(Tap)手势,对应查看、编辑和新建;拖拽-滑动(Drag-Flick)手势,对应新建及层级切换;长按拖拽(Touch and Hold-Drag)既可以调整待办事项的顺序;两指捏合(Pinch)手势,对应回到上一级界面;两指扩张(Spread)手势,对应在两个条目中新建事项。
Clear还未用到的手势包括双击(Double Tap)、两指旋转(Rotate)、两指拖拽(2 Finger Drag)等,这些未用到的手势对用户来说学习成本就比较高了,不过相信随着Clear不断完善丰富自己的功能,也会考虑为高端用户提供更复杂更便捷的手势操作。
手势设计,本就具有隐蔽性高、需要学习、需要记忆、预防误操作等等问题,尽管Clear努力将所有的手势与用户的直觉和无意识动作结合起来,某些手势仍然具有一些问题,比如——
  • 轻微下拉和猛力下拉,拉动的距离不可见,比较容易误操作,经常想回到上一级的时候会执行了新建操作
  • 下拉手势与IOS的下拉唤醒System Notification Bar冲突
  • 当列表满了的时候,无法在最下边新建一个条目
这两个问题不能很好的解决的话,还是比较影响用户简洁高效的完成操作的。

2.曼妙可人的声音阶梯

Clear对声音的利用,跟Tweetbot有的一拼了。Tweetbot因为采用金属质感的界面合计,所以对应的声音都是很机械化的金属音,让用户的操作反馈变得更加立体。而Clear因为采用了渐变色、长列表层级结构的设计,所以声音反馈也巧妙的采用了声音阶梯,具体是手风琴,还是口风琴,我的耳朵没听出来,不过真的很曼妙,让人忍不住经常在几个界面之间拉来拉去。
新建的时候是趣味的冒泡音,删除的时候是刷子音;依次选择完成的时候,是六个一组有规律的音阶;依次取消完成的时候,先是四个一组有规律的音阶,之后就是同样的声音反馈了。
我只能说,clear的设计师,很用心,把声音处理的美妙绝伦。

3.用渐变色来体现重要程度

Clear的配色足以让人眼前一亮,渐变色让人感受到色彩的跳跃,比iPhone单一的列表要活泼的多,同时色彩的深浅也对应了事项的重要程度,可谓用心良苦。
默认Lists列表是蓝色渐变,Items列表是红色渐变,用户还可以在设置中改变配色方案,改成粉色、绿色、灰色,装了Tweetbot的用户还可以选择Tweetbot的配色方案。

 

四、空白界面的文艺范

如果用户没有添加任务的时候,Clear会帮你内置一些教程,帮助你快速学习Clear的使用方法,这已经是目前比较常见的一种用户引导方式了。
但当你把吧教程全部删除掉,或者当你新建了一个list,里面还没有任何items的时候,Clear就会精心处理这些界面了。
Clear内置了非常多的名言警句,利用一种随机算法出现在用户会遇到的空白界面上,缓解用户遇到空白界面的挫败感,增强产品性格,提升文艺范。

 

五、Clear的改进建议

1.手势的改良

既然Clear是以手势取胜的,就先说说手势,前文也提到了Clear在手势设计时遇到的一些问题,这里我的设计建议就是:
(1)关于下拉手势的冲突
IOS5的System Notification Bar是可以下拉显示的,当应用默认全屏的时候,IOS5为了预防误操作,是下拉会先显示System bar的小把手,再拉小把手才显示System Notification Bar。那么当用户下拉界面的时候,如果触发了IOS5的System Bar,只要同时触发Clear的新建操作就可以了,这样就算是误操作,也不会影响正确的流程。
(2)关于新建列表最低端的条目
只需要增加一个上拉列表新建最底下的条目就可以了
(3)关于轻微下拉和猛力下拉
建议Clear增加Flick手势的精准判断,Flick Down应该可以直接回到上一级了,而目前Flick Down和Drag Down还会经常误判。只要能清晰的判断Flick和Drag手势,用户只需快速的拨动,就可以做层级切换,而不需要滑动很长一段距离。
(4)增加鼠标手势
其实一些PC浏览器中的鼠标手势,还比较适合手机端,海豚浏览器算是这方面的先行者。Clear可以考虑增加鼠标手势,用户在界面上写个“L”,就可以回到上一级,写个“O”,就可以打开任务详情,写个“E”,就可以编辑任务详情……
甚至可以增加摄像头捕捉手势,这样用户的手都不需要触控屏幕,只需要食指在摄像头前方做一些动作,就可以操控应用跳转,具体例子见“口袋体检”测心率的例子。

2.功能的建议

(1)可以增加时间线
目前的待办事项还没有时间维度,今日待办、明日待办、收集箱、按日历查看,这些都还没有。因为Clear有很好的手势操作,又是一个长列表,增加时间线不是难事。
(2)社会化待办
可以增加关系维度、分享维度,把自己的待办分享到社交网络上,邀请朋友一起完成。可以是任务分配至,一个Lists里有多个Items分别指派给不同的人,就变成了协同待办。

真心喜欢Clear这样敢于吃螃蟹的应用,推荐一下——

该日志未加标签。

相关 [clear 人眼 工具] 推荐:

Clear——乱花渐欲迷人眼的待办事项工具

- - 落花流水——elya妞╰_╯
一、深泽直人的“无意识设计”. “无意识设计”(Without Thought),又叫“直觉设计”,是深泽直人首次提出的一种设计理念,即:“将无意识的行动转化为可见之物”. 设计是为了满足人的生活需求,而非颠覆,设计是方便人的生活方式,而非复杂. 因此,好的设计必须以人为本,注重人的生活细节,方便人的生活习惯,使设计让生活更美好.

偵測 Clear Type

- aoao - O3noBLOG
Windows 上的網頁中文字型一直是很多設計師的痛苦來源,像我這種喜歡黑體字型的,就喜歡微軟正黑體大於新細明體很多,當然如果是蘋果電腦或是有很多 Linux 版本都已經內建字型渲染和預設的中文黑體字型(Linux 部分我比較不確定,有錯誤煩請指正),使用這些平台的看中文網頁比起 Windows 的使用者實在是愉悅很多,因為字型漂亮,網頁看起來就漂亮100倍,然後心情也跟著好起來.

经验分享:CSS浮动(float,clear)通俗讲解

- - 博客园_首页
       很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程.        前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家.        由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解.        如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你.

专访HTML5版Clear应用作者尤雨溪

- - InfoQ cn
Clear是一款非常受欢迎的移动应用,尤雨溪在两天时间内打造了一个 HTML5版的Clear应用,并开放了 源代码,InfoQ中文站对其进行了专访. InfoQ:能否对你自己的经历做一个介绍. 以及为什么会选择HTML5和CSS3技术作为自己的主攻方向. 尤雨溪:我个人的经历其实比较绕. 我从高中就开始玩Flash做设计,但是一直是单纯作为兴趣,那时候也不会编程.

工具小结

- yboren - 博客园-welfear
文档名称:工具小结(Tools Tips) 文档维护:Xuefeng Chang([email protected] @welfear) 文档日期:2010.10.17 find. -name "*.java" | sed 's/.*\///' | \ sort | uniq -c | grep -v "^ *1 " | sort -r 短小精干.

Windows工具集

- - 互联网 - ITeye博客
参考: https://community.rapid7.com/servlet/JiveServlet/downloadBody/2881-102-2-6389/Mitigating%20Service%20Account%20Credential%20Theft%20on%20Windows.pdf.

Geek 漫画:工具

- Yaping - 煎蛋
原作 MANU,由 Oicebot 汉化. 男:我说,与其开车这么大老远过来拍照,我们不如把夏天那张照片在PS里用“色调”选项来改改……. Geek Sexy:旋转木马赛马大赛[v]. 漫画:数码Geek 乱战,他们眼中的对方. Geek Sexy:Cosplay 视频特效大Fight. Geek Sexy:哭泣的PC玩家.

手机:非工具

- 達 - 《商业价值》杂志
手机正在改变世界,因为它正在改变人类本身. 如果有外星人真的在观察人类,他们或许现在正在写下这样的记录:“这个物种正在经历一个剧烈的习性与形态变革期. 其过去100年来的科技爆发已经开始把这个物种带入‘体外进化’阶段——半导体技术正在让这群碳基生命体融合硅基基因,而这种融合已经从被称作‘手机’的沟通设备的‘器官化’开始了.

gdb调试工具

- - CSDN博客系统运维推荐文章
查看帮助一是man 命令,二是进入 www.gnu.org,找到gdb的帮助文档(更详细). gcc -Wall -g main.c -o main,只有这样才能产生调试信息,包括core的调试信息.     run(r)  运行,执行到断点,重新用r,表示重新开始执行.     list(l)  列出源代码,l 2,l main,l 2,16(数字表示行数).

佈署工具 Whiskey_disk

- - ihower { blogging }
(文章是2011年2月的草稿,放著大概也不會更新了,就貼出來吧. 在 舊作 Capistrano 就強調了自動化佈署:. 執行某些 script hook,例如跑 index. 自從 git 主宰之後,一直在找 Capistrano 和 Vald 之外的選擇:. * DeployYML https://github.com/postmodern/deployml 有點像是超簡單版的 whiskey_disk.