《用户界面设计》大作业要求
<p>打工者之家用户界面设计大作业要求教学站 学号 姓名 成绩 大作业设计一款手机app或桌面app的用户界面，撰写“用户界面设计说明书”。具体要求如下：通用规则1. 撰写认真: 文档应具有统一性（所有内容都指向同一个清晰的主题）、一致性（所有内容的组织清晰合理，符合逻辑）和支持性（有具体的细节或案例）。没有各种文字错误。2. 正确的格式化: 使用标题、列表、留白等机制，让文档适宜阅读。关于用户界面设计说明书是否/如何回答了以下问题?l 项目是什么? l 项目的来源或背景? l 项目的技术细节，比如开发平台、运行平台等？l 是否符合专业文档撰写规范？l 是否包括了以下内容：n 界面设计原则n app工作流程图n 界面设计规范（design specification）：至少包括颜色设计、字体设计、图像设计、布局设计等方案，需包含主要界面的详细设计图。避免抄袭现象：如果发现抄袭或雷同，成绩不及格。答：- 22 -键入公司名称基于互联网技术的打工者服务系统用户界面设计说明书XXX2019/5/7版本记录日期版本号作者备注2019-5-71.0.0-RELEASEXXX初始化所有内容目 录1提纲- 1 -1.1项目简介- 1 -1.2项目背景- 1 -1.3术语释义- 1 -1.4相关网站- 1 -2规范- 1 -2.1 APP界面设计原则- 1 -2.2 界面一致性- 1 -2.2.1显示信息一致性标准- 1 -2.2.2触摸屏的拇指规则- 1 -2.3 APP界面设计规范- 1 -2.3.1字体- 1 -2.3.2图像- 1 -2.3.3 颜色- 1 -2.4 布局设计- 1 -3工作流程图- 1 -4主界面设计图- 1 -4.1 工作- 1 -4.2 广场- 1 -4.3 消息- 1 -4.4 我- 1 -4.4.1子界面注册登录- 1 -4.4.2子界面VIP中心- 1 -4.4.3子界面任务中心- 1 -5品牌提升- 1 -6 界面资源设计- 1 -6.1图标资源- 1 -7 其他- 1 -1 提纲1.1项目简介本项目旨在为社会务工人员、大学生寒暑假兼职工、大学毕业生等待业人员，提供一个求职平台，帮助他们快速、准确的找到合适的工作。1.2项目背景基于互联网前端Flutter + React Native(简称RN)，后端Java技术开发出的打工者服务系统。可运行于阿里云等Linux服务器上，包含了以下内容：(1) 为打工者提供各大城市的岗位信息、多种形式的职位，方便其快速选择符合自己的工作，足不出户，即可找好工作；(2) 客服服务，在线解答各种疑难问题；(3) 为打工者提供交友平台，在工作之余还能认识到很多同事、同乡以及附近的人，结交更多朋友；(4) 为打工者提供社区互动，方便交流工作以及生活中的各种轶事趣闻；(5) 为打工者提供工资条查询功能，使其更深入的了解到自己的收入细节。1.3术语释义Flutter：谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。ReactNative：是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。Java：是一门面向对象编程语言，不仅吸收了C+语言的各种优点，还摒弃了C+里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。本项目采用Java来整合服务端的数据，提供接口，供前端调用。1.4相关网站Flutter官网：https:/flutter.dev/ Flutter中文网：https:/flutterchina.club/RN官网：https:/facebook.github.io/react-native/RN中文网：https:/reactnative.cn/Java官网：https:/www.oracle.com/technetwork/java/index.html2 规范2.1 APP界面设计原则1、 一致性原则APP界面设计的一致性即通过视觉结构、视觉层次、视觉元素等达到设计的统一整体，减少用户认知成本，加深对品牌认识。通过自如地把控好APP在众多移动终端中的视觉效果，对同一设计策略从线下到线上做宏观的统筹，处理好各个系统之间的差异，利用和发挥各平台的优势，让APP能在不同的终端呈现最佳效果，并形成品牌形象的完整与延续。2、 沟通原则沟通原则主要指基于APP的界面互动操作设计。移动端APP的操作界面设计，要考虑效率与时间的因素。满足用户碎片化的沟通时间，用简洁、便利的功能操作，提高互动效率。当下的APP界面操作置于触摸屏之上，用户没有了按键的触感，只能通过视觉和听觉得到操作状态的反馈。如果用户没有很好地被引导以及得到及时的信息反馈，将会导致用户在与界面的交互过程中迷失方向，进而产生挫败感。3、 用户个性体验原则在产品同质化严重的今天，保持与众不同才能从众多产品中脱颖而出，展示自身特色，提升市场竞争力，体现品牌价值。移动互联网环境下，新的传播媒介为品牌提供了重要的媒介手段供用户参与到APP界面体验中。而产品交互系统中可参与性表示用户体验品质高低，可参与性好的系统，会使人难以忘怀，物有所值，并从中感受到使用的乐趣。基于品牌提升的APP界面设计，以用户为中心，需更深入寻求用户的个性体验，满足目标用户个性化的精神参与感、情感需求。4、 环境原则APP界面设计的环境原则包括两种，一种是APP运行的系统应用环境，如IOS操作系统、Android操作系统、Windows操作系统等。另一种是用户操作APP的场景、情景等。本文中的环境原则主要指第二种。品牌要维护与消费者之间良好的关系，给用户带来更好的体验，就要注重APP与用户对话的方式和使用的场景。用户可能会在走路、上班、开会、乘车、与人交谈等多种情景中使用APP，灵活运用移动设备硬件功能，如重力感应器、GPS、摄像头等，提高用户与APP参与度。2.2 界面一致性 2.2.1显示信息一致性标准（1） 导航标题栏字号一般为36px-40px；（2） 主体文字一般为28px；（3） 板块之间的间距一般为20px-24px；（4） 所有内容距离两边的最小间距都要统一，一般为24px-30px；（5） 下方tab标签栏的文字一般为20px；2.2.2触摸屏的拇指规则当我们单手手持手机的时候，无论是左手还是右手，还是双手手持，通常都是以手掌或者除拇指以外的四个手指为依托，用大拇指进行操作。那么实际上手持移动设备变成了拇指与触摸屏的一场“紧密接触”。所以我们最常用的是大拇指，根据拇指的人机工程学和国外交互设计学者的研究：75%的手机交互都是由拇指完成的。移动端设备不断在变化，新的技术也不断涌现。但是只要是触摸屏这种交互模式还在，那么拇指就是设计环节中必须要考虑的一个因素。2.3 APP界面设计规范2.3.1字体1. 默认采用微软雅黑的字体；2. 字号：级别样式字号场景重要文字36号顶部导航重要文字28号主题文字一般文字26号标题名称弱文字20号提示性或描述性文字2.3.2图像 2.3.3 颜色1、背景用色2、主题用色3、分割线用色5、 字体用色2.4 布局设计主要采用列表式布局。列表式布局是移动界面设计中最常见的一种布局方式，特点就是：内容从上向下排列，导航之间的跳转要回到初始点，基于这样的特点， 布局层次展示清晰明了，视线流从上到下，浏览体验快捷，可展示内容较长的菜单或拥有次级文字内容的标题。但这也无疑暴露了其缺点：导航之间的跳转要回到初始点，灵活性不高同级内容过多时，用户浏览容易产生视觉疲劳，只能通过排列顺序、颜色来区分各入口重要程度。3 工作流程图4 主界面设计图4.1 工作此页面即是首页，首次打开APP显示此页面。授权过定位信息后，会显示用户定位城市的工作岗位列表。并且所有的岗位，可以根据用户的需求来筛选条件。点击对应的岗位，即可进入对应你的详情界面。如图所示：4.2 广场广场是菜单中的第二个tab页面。包含了打工者的讨论话题、最近的打工新闻，以及打工者的动态更新。如图所示：4.3 消息第三个菜单项，消息。包含了用户已添加的所有好友。同时具备添加附近的好友、同事、同乡、通讯录好友等功能。如图所示：4.4 我 第四个菜单项，我。是功能最为丰富的一个菜单。提供了注册登录的入口，可累计积分的会员中心，可用于绑卡、提现的钱包，方便实时查看工资的查询工资，可领取工钱的任务中心，可兑换物品的工钱兑换，以及幸运抽奖、动态查询等功能。4.4.1子界面注册登录既可以采用手机号码+验证码快速注册并登录，也可以直接使用第三方（微信、QQ、微博）账号直接登录。如图：4.4.2子界面VIP中心VIP中心，每个用户参与任务后累计工分，基于工分的多少，逐步提升其等级。等级越高，完成任务时，得到的工分、工钱加成就越高。此项功能给予用户更有趣的体验，并提供奖励。4.4.3子界面任务中心通过完成任务，用户可以得到工钱以及工分。使用工分可以提升VIP等级。使用工钱可以兑换礼品。5 品牌提升当下的移动互联网时代，APP的开发与设计是现阶段提升品牌最具竞争力和可塑性的方式。基于品牌提升的APP界面设计通过本文提出的一致性、沟通、用户个性体验、环境等设计原则能将APP界面设计与品牌特色相结合，并从品牌内容展示、品牌信息传递、目标用户了解、品牌影响力扩大等方面提升品牌。6 界面资源设计6.1图标资源 7 其他用户界面清单：代码名称所属子系统描述UI-1jobs.html/工作的tab页，即首页UI-1.1job.html工作岗位详情UI-2socials.html/广场的tab页UII-2.1opinion.html广场说说详情UII-2.2news.html广场新闻详情UII-3messages.html/消息的tab页UII-3.1message.html消息聊天消息详情UII-3.2friends.html消息附近的朋</p>
