案例背景

医疗app是一一个提供线上问诊、预约挂号、医、患互动、知识分享，健康科普、在线购药等“互联网医院"。利用短视频传播快的特性普及健康知识，让用户提高自身健康意识，通过直播、杜群互动等方式提供医患、医医、患惠互动的联系渠道，从而达到共享医疗，有改善当下紧张的医惠关系的目的。

目前就医环节中存在的“三长-短"现象，即挂号排长队、就诊排长队、繳费排长队、看病时间短，对行业和患者来说是共同的难题医疗卫生资源供需矛盾仍然突出，再加上医患之间缺乏信任和理解，医患关系日趋紧张。互联网技术赋能的医疗作为一个独立赛道，如何利用互联网跨时空的优势，解决应对线下医疗日渐突出的现实问题才是关键。

设计流程

产品分析：根据产品调研数据，结合已有的医疗app以及医疗数据报告进行需求分析

功能梳理：结合前期产品分析文档，进行用户画像、用户体验地图设计，从寻求核心功能，再进行头脑风暴，得到相关功能。

原型设计：对功能点进行原型设计，根据可用性交互流程测试、调整，得到最警交互原型。

界面设计：梳理原型，充分理解产品理念再用SWTO法进行竟品分析，结合设计情绪版设计页面规范、风格。

草图绘制

草图做为一种工具和技巧，草图在设计过程中扮演着很重要的角色。在大量的时间和精力设入到某个方案之前,先画出草图呈现给客户，得到方向上的认可。通过草图快速集成概念设置基本元素布局用于与客户交流视觉探索。

功能框架

思维导图的建立有利于人们对其所思考的问题进行全方位和系统的描述与分析，非常有助于人们对所研究的问题进行深刻的和富有创造性的思考，从而有利于找到解决问题的关键因素或关键环节。

设计分析

形、色、字、构、质

形、色、字、构、质是组成一个app视觉语言最基本的五个维度，正确的定义一个产品风格以及品牌调性。

头脑风暴

先利用头脑风暴确定设计的大方向。

色

根据设计关键词寻找相对应的情感化图片，提取其中的相关颜色，唤起设计情感。健康、生命力

根据情感化图片提取绿色、黄色、蓝色，整体配色比例使用“631”法则，即60%主色、30%辅助色、10%的点缀色。

形

根据头脑风暴关键词，提取其中的关键元素确定app的启动图标。

字

中文用苹方，数字用DIN,文字对比采用粗细、大小、颜色对比，在2x的设计稿上，每个字号的对比至少为4px,使它们层次更明显 常用子号: 48、40、36、32、28、24、20px。

构

卡片的间距以及圆觉都采用d (d=8px)的倍数，构图都比较简单，没有复杂的内容，空间感很强，大留白，大标题具有呼吸感、通透感。

质

页面组件质感与风格、界面风格，投影数值等。

登录注册页

登录注册一步完成，减少操作步骤，优化交互流程。同时上面增加问候语，让用户感到服务的优越感。

在手机号不完整的情况下，按钮为本科点击状态，按钮放在中上部位置，防止用户键盘遮挡操作按钮，方便用户操作。