一个工具的设计讨论(一)-方片收集

前言

设计师要找各种素材,比较流行的都是去各种设计社区、资源网站。比如behance、pinterest、dribble……

电影《纽约,我爱你》

设计师不仅要看很多素材,好的素材还要收藏、整理、保存。所以一个好的收集工具还是需要的,对我而言还没有完美的收集工具。pinterest、behance、dribble收集图片很好,但毕竟是国外的,偶尔访问不了、访问速度慢也是很正常的事情,毕竟没有被墙就已经很万幸了。

方片收集

最近发现的一款收集工具,类似于pinterest,可以通过安装浏览器插件、iOS APP、Android APP,从浏览器、手机APP中进行文字、图片、视频的收集。由于刚推出不久,功能还在慢慢完善。值得设计师尝试。

这是国内团队用心设计开发的工具,支持一下国产。不要整天用一堆英文工具来装逼了(说英语,村口的老大妈来听不懂,不如学门方言),好好使用中文工具才是以用户为中心的设计师。

废话不多说,看一下这个工具的设计。大家有兴趣可以使用一下这个工具,帮助这个工具一起完善(官方链接在顶部和底部,或者点击图片也可以打开链接)。

电影《纽约两日情》

APP(iOS)


启动页

启动页采用一个加号按钮,与APP内的加号按钮一致,这样的设计保持了启动页简单、把重要功能预先展示给用户、产生加载的快捷感。这样的设计在其他的APP(instergram)上也采用过,不是什么独创的方式,但是能看出设计的用心和考虑。

从页面本身的简洁上就能看出整个APP的设计追求简洁的用户体验,开场的设计就预示了整个APP的功能和风格,并且很节制、纯粹。

APP启动页

主界面

主界面

没有显示状态栏,没有标题栏(工具栏)。

顶栏使用搜索栏,搜索栏没有使用iOS默认的搜索框样式,而是采用了自行设计的式样。

底栏放置了三个按钮,对应为应用设置、添加记录、历史剪贴板。使用透明度悬浮于内容之上,没有使用标签栏进行导航。

应用设置和历史剪贴板都使用的悬浮窗,使用缩放动画,两个窗口都只能通过窗口的关闭按钮进行关闭回到主界面。所以这两个按钮并不是实现页面的切换,而是呼出主界面上的悬浮窗口。

最近新版本加入了分类功能(后续有详细的使用分析),没有使用悬浮窗。而是使用侧滑边栏,使用左划和右划手势进行展开和关闭。

问题:

1:当我们在谈论模式、规范的时候,想到了要使用标签栏、工具栏。但是方片收集并没有使用这些模式规范,而是使用一种自由设计的方式。底栏的三个按钮对应了三个重要的操作,并且由于不是一般意义上页面导航切换,使用标签栏也不适合。也许随着方片收集以后功能层级和页面的增多,还是会采用标签栏来进行导航,但是现在的功能和页面,使用三个分隔对齐的按钮也不错。

2:三个按钮悬浮于内容之上,理论上这样对浏览内容造成了一定的影响,或许可以使用自动隐藏避免影响。但是在实际的使用中并不会对浏览形成障碍,因为这三个按钮使用了透明效果、颜色使用灰度、并且采用独立分隔形式,虽然不是完整隐藏,但是对浏览的影像基本可以忽略。使用类似Safari这样的自动隐藏和浮现还是使用方片这样的效果存在细微的差别,实际体验好都没问题。

3:切换与叠加的问题。现在都说尽量避免使用模态窗口,在iOS中基本只有弹出警告和重要提示(闹钟)才会使用弹出窗口(控制中心、通知中心使用上拉下拉窗)。在系统应用的和系统设置中基本没有,而是用深入式的页面切换。可以说iOS中使用页面切换而避免使用页面叠加,或者说扁平化的设计是尽量保证在面前的是一个单层的页面,而不是从再这个单层页面上弹出、浮出另一个层的页面。即使要显示额外的内容(菜单)也是使用嵌入式或滑出悬浮窗,而不是悬浮式小窗口的。但是在Android中,基本上那三个小圆点,下意识就认为是要弹出悬浮窗了。

一定要避免弹出悬浮窗吗?微信(iOS)就在添加按钮使用了悬浮窗,体验不好吗?所以理论上的纠结还是要看实际的效果,让用户简单、准确的完成任务即可。至于设计的模式方法,还是看效果。

在方片收集中从历史剪贴板中直接拖入内容即可新建记录,所以浮动也是一种不错的解决方法。但使用嵌入层或者切换到新页面,也不是说不能实现从剪贴板中快速的新建记录。我个人也觉得使用嵌入层或新页面是一种更好的方式,并且不使用拖动手势(老生常谈要避免在智能手机上使用拖动,谁爱在智能手机上拖来拖去吗?游戏除外)。在一个新页面中能够更完整的浏览历史剪贴板,并且没有主页面内容的干扰。通过剪贴板新建新纪录时也可以进行更多的设置,当然也会增加步骤。我这样的设计倾向于慢、完整、准确的操作,而方片收集追求的是快捷、方便。所以这又回到一个关于效率与准确性的矛盾之中。

4:一致性的问题。应用设置和剪贴板使用悬浮窗,而分类目录使用滑动侧栏。并且悬浮窗只能使用关闭按钮进行关闭,侧栏使用手势展开和关闭。看上去,同样是在一个页面上显示内容而使用两种不同的方式破坏了体验的一致性,所以我个人倾向这三个建立在主页面上的页面使用同样的交互方式。和现在的方式有多大的区别吗?没有,只不过满足一下我对于一致性的强迫症吧。

(待续)

新建记录界面

分类功能使用体验

浏览器端收集体验

浏览器端编辑体验

方片收集官方网站:funp.in

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,756评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,727评论 22 665
  • 姓名:巢环环 公司:宁波大发化纤有限公司 期数:第264期六项精进 组名:努力一组 【日精进打卡第13天】共13天...
    巢环环阅读 126评论 0 0
  • php usleep() 函数延迟代码执行若干微秒。 unpack() 函数从二进制字符串对数据进行解包。 uni...
    思梦PHP阅读 1,983评论 1 24
  • 昨天带孩子出去玩,在商场里有个小游乐场,女儿看到里面有很多小朋友也想进去,可是自己又不敢去,最后我陪着她进去,她喜...
    素素如水阅读 128评论 0 0