一个荡涤心灵的设计

seaboard-Ilka-Noggler-Franz-Thomüller-Copyright-©-2013-ROLI-Ltd Seaboard-GRAND-LFE-Standing-Ilka-Noggler-Franz-Thomüller-Copyright-©-2013-ROLI-Ltd

产品:海岸线钢琴

由罗兰·兰姆(Roland Lamb)和Hong-Yeul Eom设计

Seaboard钢琴对键盘进行了改造,把按键重新设计为了柔软的波浪状,以便能够通过三维立体手势,对声音进行不间断的和离散的实时触知控制。

这一设计融合了现代简约主义和传统手工品质。

而我只是觉得,好的设计能触动心灵,哪怕并不这样宣扬

Material Design 设计实践——学车帮App之Redesign

6.pic_hd  –>  Home

Android L 和 Material Design 时Google I/O 2014 上最令人浮想联翩的发布之一了——从MD刚刚发布,在知乎、UI.cn等网站上就有无数相关讨论,大家纷纷发表着自己的各路解析。也幸而有这么多讨论,我们可以马上得到充足的设计资源,去理解这样一种全新的设计语言。

博主不是专业的设计师~连半瓶子的大概也算不上~曾经有专业(职业)的设计师这样评论我的设计——一看就是有美感没理论的

好吧,至少从某个角度肯定了审美方面偶还没有跑偏太多。设计语言真的就像语言,设计语言彼此之间的交流也像不同语言之间的交流——彼此借鉴,引进,但是又不肯轻易就范,总要有自己的特色和内核才行。

学习语言最有效的办法是身临其境地使用它,学习设计语言应该也是,看别人地10篇评论,大概也抵不过自己做一次实践。MD是一套优秀的设计语言,这么说不仅仅是因为它给你足够的设计感、现代感,使你的页面井井有条,更因为它在严谨而又活泼,大胆而又收敛。它把这么多相互矛盾的东西糅合在一起,它注定是难以把握和掌控的。不过也正因为它是一套如此出色的语言,按规矩做设计大概就不会范太大的错误,不知道是设计师们的幸运还是不幸吧,当PM说我要3个FAB的时候怎么办呢。

不过,在设计的过程中,能够明显的感受到的一点问题是,MD这种语言实在是太完整,完整到严格遵从MD设计规范设计出来的App总是让人分不清这是不是Android的原生应用——看起来太像了。从这个角度上讲,从Android 4.0开始的Android Design 总算实现了它的目标,但想必各个公司的PM们不会买账——没有识别度的设计怎么能行呢?

虽然Redesign 的时候已经注意尽量确保自己严格遵循了MD的各个规范,但大概仍有不少地方理解不到位,同时对原App的功能进行了梳理,重新划分了信息和功能的层级,并没有严格遵从原App的设定,所以原有的入口可能不见了,也可能有的功能没有添加上(比如题目讨论)。原App:

5.pic_hd  6.pic_hd  4.pic_hd3.pic_hd  2.pic_hd  1.pic_hd

我不知道App的最近的迭代进度如何,UI和UE有没有进行大幅度的更新,但是这个版本的UI显然还是有不少问题的。

首先是主界面的奇怪设计,在手机小屏幕上拿出一半的面积进行自我宣传是我很不能理解的举动。这个设计大概来自于桌面时代Web设计的遗留——网页需要硕大的Banner来进行自我宣传,因为入口是地址,用户不记住地址,流量就会流失,留不住用户主页的一大功能就失效了。但是今天,无论是网页还是App,其入口流量已经鲜有地址栏的贡献,App当然还是要让大家记住,但是用户安装App之后的持续宣传已经意义不大。

其次是功能和信息层次的混乱。模拟考试类的功能和阅读类的文章杂糅在一起,会对用户造成相当大的困扰——二者占用时间不同,出现的场合不同,用户的精神状态大概也是不同的。它造成的后果就是,用户对任何操作可能产生的反馈无法形成系统的预期——用户的学习成本非常高。只有当用户在“差不多”的地方进行“差不多”的操作,能够返回“差不多”的结果的时候,用户才会有意愿重复先前的操作——才学会了使用这个App。

最后,每一个功能都让我感觉很粗糙,既没有经过良好的设计,也没有对功能的实现形式做改良性的探索——聚焦于功能的有、无之后,没有再思考功能已什么样的形式展现才能带来足够良好的用户体验。整个App作为一个本地应用,很多体验上甚至不如百度转码的手机网站,很难说这是个“有设计感”的产品。

Redesign:

首先是重新梳理功能和流程:

学车帮

 

首先分清功能的层次和逻辑关系,在开始设计。原本是不同阶段的工作,马马虎虎做个补足

  Home  Home 2  Home_Pop

主界面。最主要的特征不在于Material Design,而在于将App重新定位为一款“定位于学车者的在线答题 + todo 应用”。其他相关信息仍然可以保留,但是入口被隐藏或者降级到二级菜单。应用设计上的参考对象也从在线答题网站和百科网站转为新的各类“背单词”“考试”“todo”应用上面。

因此,阅读类的“考试必读”“新手上路”等项目被统一到tips当中去,避免干扰和混淆,同时又保留了二级入口方便用户查阅。

App的主界面,核心列表变成了用户目前的学习项目、进度、以及考试提醒,这即使用户的核心需求,也是App最容易做好的部分。

MD的点睛之笔FAB在这里被用作学习项目的添加按钮,其实他应该既能添加学习项目,也能添加关键考试日期,但是因为添加的选项过多,始终没法做出很好的效果,暂时只设计了学习科目的添加。

弹出菜单中分了3个主要区域——个人主页、二级功能入口、附属功能入口。把考试日程、错题复习、浏览题库、学习记录、其他阅读类信息整合在此处并加以分类,一定程度上算是理顺了UE吧

Practice  Practice_Right  Practice_Wrong

具体的练习界面。设计比较简单,突出的星标漂浮按钮提醒用户经常标记不熟悉的题目,而错题应该自动标记。

Test        Marked

模拟考试和标记题库。模拟考试跟练习的界面基本一致,但在颜色上做出区分,提醒用户“这不是练习”,加上倒计时圆环,营造一定的紧张氛围。

星标题库包含了做错的题目和主动标记的题目,而左侧不同宽度的色带容易想到是在提示做错次数。界面的配色使用了练习界面中FAB的颜色,通过颜色的继承表示功能之间的关联。

目前只做了这几个界面,毕竟只是当练习来做的嘿。虽然只是几个界面,还是感觉很有收获,有一种“绝知此事要躬行”的成就感。

( ´ ▽ ` )ノ

更新一下动效