Make your life easier!—— Easy Reminder 易提醒设计小结 - Sheen.Yeung

Make your life easier!—— Easy Reminder 易提醒设计小结

03/3/2012

Easy Reminder易提醒

从2011年7月开始前期试探,历时一个多月的探索与设计,历经各大小的迭代过程,加上跟进界面开发,测试demo,Easy Reminder才完成最终设计。与此同时得出一些经验,也发现了不少可提升之处。在此仅做一次小总结,借此回顾学习,温故知新。

前期准备

常规而言收到产品方需求,在视觉设计之前需要针对即将面对的问题做用研,制定交互流程。而考虑到此次项目的难度较为小,定位也相对明确——小、轻、简的生活助手,故交互流程就不必过多花心思去反复推敲,于是重心在视觉上。

前期搜集了一些出色的iPhone应用UI,从质感上大致区分,有平薄(weico默认皮肤版)、常规(iPhone默认UI,控件默认化)、拟物(camera genius)等层级,也是由抽象到具象的一个递进(关于界面的趋势当前有明显的两个极端方向,有机会可以再开一篇讨论)。除此之外,色彩、布局、图标也是考虑范围。

与此同时,内部也沟通多次产品定位,也提出自己的一些意见。最终这次产品的的定位凝缩为:简单、生活、亲切

视觉探索

有前期的搜集,大致可以把握到手机应用UI的大体方向,至少可以知道什么可以做什么不可以做(因为我刚开始做的时候我手上还没有iPhone 4!)。而经过自己的思维筛选,缩小了风格试探的范围,执行起来后期的修改成本也会比较低。

在布局上,主体区在初段是分为上下区块:今日提醒、列表区。考虑到列表区的处理过于繁复,并且力求简化,故把该区域统一用列表的形式呈现,减少样式数量。

前期考虑使用木纹质感的背景,为了与此配合故顶部bar条也用了较沉的配色,把亮处留给内容区。而后经过试探发现,回归到清新的视觉风格,顶部也是较为夺目之处,故有了以下尝试,并最终确定。

迭代设计

初步确定风格,进入界面延伸设计。其中经过多轮的迭代,包括交互方式、界面布局、视觉细节等多方面。由于人力资源问题,大部分时间需要我一人做决定。尽管因为能力有限最终产品有许多瑕疵,但也省去中间环节使修改成本变得最低,效率最优。

小团队要求人技能全面考虑周到,而大公司倾向于技能专攻深入探索,在这一点有不小差异。而这在我后来到CDC当中也深有体会,但一专多长总是对的。

交互方式的探索主要纠结于添加新提醒时,由于提醒分为“生日”、“纪念日”、“事件”三种,把三种提醒集成在一个“+”按钮上,必须多一个选择。而这个选择是发生在添加之前还是添加之后,是我们考虑的重点。而最终的选择是,将提醒类型的“选择”放置在“添加动作之前”,即进入该种类的列表才有添加。这也是参考了其他类型应用的相关设计,使得在感知上添加提醒的步骤更少,目的性更明确。

视觉设计针对底部导航的当前状态进行了优化,小图标也较先前精致。

色彩暗示

运用色彩来区分提醒类别,较图形与文字更能快速区分开。

生日是整个app充斥最多的类别,故用了topBar条相呼应的蓝色搭配,使得即便是全屏都是生日(这是最常见到的特殊情况)列表项,也不会显得很突兀(即便不是最好的方案,但至少没有一个很明显的理由能够否定它,对么)。

纪念日则偏向与情侣、爱人之间的关系,故采用了有点暧昧意味的紫色来暗示。

事件则是偏向个人事务、办公事务等方面的提醒,我的理解是带有“不求惊喜,但求稳定达成”的意味,所以使用带有些许偏灰的蓝绿色,避免色彩过于跳动。

而后加入了“农历”这一概念,考虑到农历在画面中出现的频率恐怕不高(因为需要独立设置),为了缓和整个画面偏冷淡的意味,所以加入了一个仅有的跳动元素,于是有了这么一个设计。

LOGO设计

logo设计是在UI视觉进行到了后期才进行思考。而这个由于时间也比较紧,采用了一个较为稳定的方案——带有些许拟物设计,又与UI结合。

大家应该也注意到loading界面的大版图标,在此可以说说整个设计顺序,或许能解决一些朋友的疑问。

设计是先从主界面开始,确认了使用横向的信息条,参考了我们读书常用的小便笺。UI当中也采用些许拟物化设计如木纹、标签等等,拉近与用户的距离。而后来由于要设计载入界面,故有了强化logo图标的打算。考虑到画面的空间感,所以有了正视的角度,再加上纸条需要一个物体作为承载,多方考虑认为木盒子比较合适,贴近生活,清新自然。再加上各种细节,所以有了这么一个载入界面的设计。

而后图标设计也沿袭这一方式,在细节上稍作简化,也就顺理成章、水到渠成。

后记

Easy Reminder易提醒的视觉设计也是我完整参与的第一个iPhone APP UI设计,包括后期包装推广也有参与其中,学到了许多。

现在回头看,也会发现自己当初有不少细节还有待提升,有的问题也没有很好地解决,比如布局的合理性,外文的适应性,跨地域的文化差异对设计的影响等,考虑多有不周,今后在进行设计前需要更大局、更周到的思考。

作为一次尝试,不算最好,但也不差。

最后献上展示图,希望你中意。

 

There are 9 comments in this article:

  1. Feather 说道:

    受不了这么华丽的东东。

  2. Jin 说道:

    可见用心,学习

  3. Jin 说道:

    可见用心,学习

  4. Monserrat 说道:

    The honesty of your psoitng shines through

  5. Faaiza 说道:

    That’s a brilliant answer to an interesting qsuetion

  6. MR.feng 说道:

    sheen的提升确实飞快,有缘咱们再一起合作!

Write a comment: