«

舒辅医疗应用

舒辅是一款今年下半年参与的一款App,比较矛盾的点是这款app到我手里的时候,代码都已经写好了,也大致有一个雏形只是简陋了点。另外,产品经理的想法相对来说也比较多,在设计的过程中,也常常会有一些新的想法和功能希望我能添加起来,这就会造成在全局上的一个把控问题,而且由于代码已经完成,很多后面添加出来的功能可能不能正常开发。

这款应用包含了医生用和患者用的两套app,是一款帮助患者在线上联系医疗机构或医生的工具,用户可以自行添加所需的医疗服务,通过问卷的形式让医生了解病情,并提供合适的服务。

时间:2016.07-2016.11

角色:GUI设计师

平台:安卓

perspective_shufu

患者用

导航的设计

最开始收到该项目的时候,该应用采用的是底部导航栏加上抽屉导航栏的形式。抽屉一般是用来做导航使用的,在这里抽屉变成了内容输入区域,增加了层级的深度,因此可以考虑将用户账户信息放置到底部导航栏里,在没有必要使用抽屉导航栏的时候,不用勉强。

由于shufu的顶级视图并不多, 采用底部导航栏允许用户在几个顶级视图之间来回切换较为合适。

因此在修改的时候,我直接采用了底部导航栏。

设计布局

互动对话界面

在互动对话界面,最主要的功能就是问卷,因此将其放置在外面便于用户发现,比放在更深一级里要更加方便。

医疗机构界面

医疗机构的列表并没有采用分割线等额外视觉元素,利用了内容自动产生视觉的分割。医疗机构的主页展示采用了顶部标签切换的分段控件,便于分类查看并且给每个分类留出了更多的延展空间。

医疗服务界面

医疗服务采用了卡片的设计模式,将标题,内容,头像等基本信息以及功能键包裹在一起 。

在医疗服务和医疗机构的界面我都使用了Fab键作为添加服务和机构的主按钮,一方面是为了鼓励用户去探索发现更多的医疗机构/医生以及服务,从而丰富他们的分享界面,同时也可能找到更加适合自己的服务模式。

设计中遇到的问题

在对话列表中如何表达对话的已完成状态。

表达已完成这件事可以想到的几种方式是,添加图标,显示已完成,较为直白,但是在狭小的手机屏幕中又略显臃肿,同时对话列表中已经有各种角标了,再添加一种的话会给人感觉更加复杂,难以理解,因此在这里对已完成的对话采用了半透明的处理方式。 用一种较为含蓄的方式来表达。

High-Fidelity Mockup

shufu_intro

医生用

shufu_doctor_intro

设计中遇到的问题

问卷的设计

因为医生每次发送给卷给用户的时候不大可能是每次只发一个问卷,因此在这里使用了复选框,而问题的选项并不需要全部展示出来,通常,医生只要看清问题的题目就可以了,因此我将问题的选项收了起来。从而节约了控件,医生想要单独查看的选项的时候也较为容易。

两款app的统一性

舒辅的这两款app都是一套的,在设计的时候要注意的是患者用和医生用需要有统一感,同时又要有所区别。这次我决定使用Material design的设计语言,从设计规范上着手统一设计。

下面两篇文章是我在学习Material Design时候做的笔记。

Material Design 学习笔记

理解Material Design

整个app的架构上都采用同样的方式,以底部导航栏为主。

在患者用app上选择了蓝色为主色调,橙色辅色调帮助打破蓝色的冷淡感,增加些许的温暖。

在医生用app上,主要用了橙色,和白色。凸显医疗的干净卫生感。

用橙色作为两个app链接的一个纽带,方便辨识。另外在app的图标设计上采用了也基本使用了统一的设计,这是在颜色上以示区别。App的背景用了由多个三角形组成的背景渐变色,增加层次的丰富感,同时也不显得过于复杂,给人较为简洁的感觉。

ic_launcher_XXXHDPIic_launcher_XXXHDPI

Share Comment on Twitter