北理工19年12月《用户界面设计》作业-刘凯境.doc

智业互联（厦门）健康科技有限公司

智业健康APP登陆界面

用户界面设计说明书

刘凯境

2019/11/22

修订历史记录

日期

版本号

修改说明

修改人

核准人

2019.10.1

1.0

制定大纲及编写正文

2019.10.25

2.0

修改界面设计规范

2019.11.22

3.0

修改主要界面设计

目录

TOC\o1-3\h\u26191、界面设计目的 4

17141.1编写目的 4

175421.2项目背景 4

134611.3定义、缩略词 4

241181.4智业健康APP登陆界面设计理念： 4

206292、应当遵循的界面设计规范 5

219242.1用户界面设计原则 5

297342.2界面一致性? 5

23042.2.1显示信息一致性标准 5

197112.2.2布局合理化原则 6

159492.2.3鼠标与键盘对应原则 6

91393、界面的关系图和工作流程图 6

133113.1健康城市 6

154393.2互联网医院 7

183583.3掌上医院 7

22214、智业健康APP登录界面设计 8

275684.1医生端登陆界面设计 8

88614.2患者端登陆界面设计 9

104705、美学设计 10

1、界面设计目的

1.1编写目的

随着网络技术以及APP登陆界面制作技术方面的日臻成熟人们越来越关注APP登陆界面的美观性，所以当下APP登陆界面制作的一个最主要的出发点就是APP界面的美观和可操作性。在表达一些理念方面东西的时候能更加的形象化与多样化。就全球上网的人数来说，有很多的人正通过个人空间来改变他们的生活方式，同时学生也学习到了?各个方面不同的知识，人们通过自己的文字来传递着不同的信息。作为一个发展迅速的网络空间,个人空间向我们透露着这个信息传递和情感的平台将影响接下来的几代人。

本文档是对系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释哟。

1.2项目背景

a.APP界面项目的名称：智业健康

b.用户：普通的用户

1.3定义、缩略词

智业健康：致力于打造“互联网+健康城市”的领军品牌。依托总公司智业软件承建的省市级人口健康信息平台的优势，面向三师（专科医生、全科医生、健康管理师），打造“互联网+健康城市”平台，为居民提供基于医院、社区、家庭场景下的全程就医、专病管理、健康服务，建立全生命周期的居民“健康云”，并向医、药、险及第三方服务机构开放接入能力，打造“医商圈”，助力健康产业发展。

用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件哟。

GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面哟。

1.4智业健康APP登陆界面设计理念：

登录流程看起来很简单，但实际做下来考虑到细节的地方还是挺多的。

整个交互过程如何减少用户的操作步骤提高注册的效率，以及输入框聚焦后弹出键盘的高度，如何在聚焦的情况下进行设备上的适配，特别是土豪X的出现在适配上又多了一个考量，一个流程做下来，发现不仅要画图还要会算数呢。

考虑实际不同医院的业务模式，在医生端登录页上直接放置“账号登录”“手机验证码登录”和“新用户注册”等三个功能入口，减少多余信息，让用户有效直观的选择自己的操作需求。

2、应当遵循的界面设计规范

2.1用户界面设计原则

本系统坚持图形用户界面（GUI）设计原则，界面直观、对用户透明。用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。?

界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。?界面设计必须经过确认才能完成。

2.2界面一致性?

在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

2.2.1显示信息一致性标准

（1）标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号（10号）；?

（2）日期:正常字体、宋体、白底黑字、3-D?lowered；?

（3）对齐方法：?

左对齐:一般文字、单个数字、日期等?

右对齐:数字、时间、日期加时间。?

（4）分辨率为800*600，增强色16色?

（5）字体缺省为宋体、五号、黑色?

（6）底色缺省采用灰色?

这些信息的排列显示风格供参考,?在同一个应用中,这些信息的表现方式不一致,会使得用户分散注