教育需求APP交互设计
1.1 课题研究背景
1.1.1 交互设计背景
1984年,比尔·莫格里奇(Bill Moggridge)首次提出了“交互设计”一词的定义,但在此之前,“交互设计”已经存在并被使用过。 哪里有人,哪里就有互动。 互动的产生与人息息相关。 交互设计最初是工业设计的一个分支,但自人类意识开始以来就已经产生。 人与人之间以及人与物之间可能发生相互作用。
人与人之间的互动是社会学领域的一个问题,与本文无关,因此不再讨论。 事物之间的交互暂时不在本文中。
我们所说的交互设计主要是指人与物之间的交互方式,交互行为和交互方式的设计。
在远古时代,当人们拿着火枪射击时,当人们拿着飞镖投掷猎物时,他们都与“事物”互动。火枪的材料,长度和厚度的选择,穿梭镖的材料,长度和角度以及切割和装订的方法都可以归类为交互式设计的类别。随着人类社会的不断发展和进步,人类可以交互的“事物”已经从最简单的武器和工具变成了具有复杂过程的机器。
在工业革命之前的数千年中,用于衡量用户体验质量的“易用”标准必须让位于“可用”的生存标准,以提高易用性。 一种交互设计需要让位于实现基本功能的目标。 即基于“可用”,可用性被稍微改善。 因此,我们可以发现,耕作机等基本农具的外观在几千年来没有太大变化。
图1-1 早期的农具
随着工业革命浪潮的到来,其伴随产品的标准化,均质化和生产率得到了极大的提高,从而使相同的商品数量上越来越多,随即用户并不仅限于生存需求,使用户可以对其进行挑选成为了可能。此时,产品是否易于使用,即易用性,也已首次提升到与可用性相同的位置,并已成为用户选择商品的标准。这时,作为独立的过程和角色,交互设计迫切需要在产品开发过程中提及。因此,交互问题已经存在并在1984年之前使用,当时比尔·莫格里奇(Bill Moggridge)首次提出“交互设计”的概念,但公众对此一无所知。提出这一概念后,越来越多的公司和行业开始重视交互设计并增加了交互设计的价值将它运用到产品开发过程。
图1-2 交互设计产品
真正使交互设计职位发光的是我们今天仍在进行的信息革命。随着Internet技术的发展,在2000年之后,从传统工业设计中借鉴的交互设计概念开始流行。人们把交互设计视为关键点,这与日益重视用户体验和易用性也非常相关。产品用户体验和易用性的传播者(例如Alan cooper,Donald A Norman等)的激增对于交互设计专业在大型公司和Internet行业引起更多关注非常关键。
在信息革命的最初时期,当个人计算机刚刚发明时,用户体验和交互设计并未得到重视。当然,这在当时还受到技术水平的限制。最初的PC没有鼠标,而用户使用的键盘是几个世纪以来,人们一直熟悉的人机交互方法来与计算机进行交互。(许多人可能认为键盘是信息技术革命的副产品。实际上,这是一种误解。键盘是一组操作“事物”的物理学。键组合具有清晰的外观路径和发展。)
这时候的人和电脑的交互方式是命令行交流互动-CLI(Command Line Interaction),用户在命令行输入区输入指令后按回车键,电脑再根据用户指令给出相应反馈,因为这种交互方式非常的不直观,导致早期的计算机使用用户对易用性和用户体验非常不满。
图1-3早些的电脑交互
这种转变出现在1979年冬天乔布斯的施乐PARC研究中心内。在那次访问中,乔布斯对施乐的图形用户界面和二维定位操作输入设备-鼠标感到震惊,但他也对施乐对超越时代的装置的冷漠感到震惊。然后,他在没有心理压力的情况下使用了这两种技术,并将其应用于个人PC设备。 从认可和接受开始,直到今天,我们一直在使用这种方式与计算机进行交互,这就是键盘和鼠标的交互。
在触摸屏和触摸操作技术尚未成熟之前,鼠标一直充当着人的手指在屏幕上的延伸,并且是现实世界在二维屏幕上的投影。世界上有更多的交互,例如悬停,右键单击等。这些交互在现实世界中没有可比的交互,但是我们完全理解并接受了这些交互。
在iPhone的光芒还没有冲破夜空,键盘和鼠标的交互仍然占据世界主导地位的日子里,当我们制定应用程序设计规范时,最需要考虑的是各种按键的正常状态,悬停状态,活动状态和访问状态与鼠标交互相关的样式的定义。
人机交互的另一个划时代的变化发生在2007年1月9日,即苹果推出第一款iPhone的那一天。 几乎同时,手机的配置越来越接近个人计算机。 手机已经完全超越了通讯工具的底线,成为个人智能终端设备。 它与计算机之间的界限也变得越来越模糊。
在此之前,手机的触摸操作基本上是无意义的复制和模仿鼠标指针的笔针,更具代表性的例如Windows Phone,它失去了悬停交互方法,但是利用长时间按压复制了鼠标的单击右键的功能。乔布斯再次用他的天才眼睛发现了触摸操作的独特性,也就是说,将鼠标上的各种界面和控件用作现实世界的投影,完全抛弃鼠标的使用方法。这种人机交互方法最大程度地简化了终端设备的使用。许多正在学习英语的婴儿可以在没有任何理解压力的情况下使用iPhone和iPad。这就是触控交互。
尽管触控交互开辟了人机交互的新纪元,但它并没有完全取代鼠标交互,而是在某些情况下根据鼠标交互的某些优势(例如像素)精确定位的水平取代了鼠标交互的垄断。右键单击功能的可伸缩性,高功能的可发现性和其他功能在日常办公和其他情况下仍处于主导地位。
在过去的近40年中,我们已经开始并开发了图形用户界面的交互模式,但是技术和人机交互模式的发展不会止步于此。
随着CPU成本的降低,人工智能,物联网和无线网络等技术的发展和普及,普通家用电器和各种硬件设备也有自己的大脑-CPU。 更智能的是,智能家居的概念已经存在了一段时间,但是由于人工智能和其他技术限制,它一直未能找到很好的突破。 真正改变了该行业格局的是亚马逊的智能扬声器ECHO。
ECHO内置了亚马逊的智能语音助手Alexa,用户可以使用语音与之交互,例如唱歌,询问天气。 但是,在Amazon发布了用于为其开发应用程序的界面之后,事情朝着每个人都没想到的方向逐渐发展:我们可以使用语音而不是触摸来命令机器执行任何操作,例如,命令ECHO调节房间温度并切换灯光,调节光源的亮度,订购餐品,预订航班等。这就是VUI(语音用户界面)交互。
随着ECHO SHOW的出现,VUI交互产生了质的改进和飞跃。 基于VUI本身的局限性,有必要使用图形视觉输出来弥补此交互的一些缺点。 在可预见的将来,我们可以预测它访问的设备和为它们开发的应用程序将以指数级的速度出现。
与智能硬件设备同步开发的有AR(增强现实),VR(虚拟现实),MR(混合现实)技术,其代表性的硬件如magicLeap,HTC Vive,微软的Hololens等。
图1-4 手势交互
传统的触摸交互已不能继续满足这些设备的操作要求,而语音交互操作模式只能满足部分操作要求。为了实现并扩展这些设备的技术潜力,迫切需要新的交互方法。引入了一种新的交互方式-手势交互(Gesture Interaction)。
手势交互比触摸交互和语音交互更具可扩展性和多样性。 毕竟,创造者已经用十只灵巧的手指给了人类两只手。 我们可以基于双手创建无穷无尽的交互方法组合。 但是,从严格的意义上讲,这种操作方式与人类的能力和直觉并不相符,并且与事物互动的方式已经存在了数千年。学习这些手势的成本比较高,记住这些手势内容并不容易。
1.1.2教育背景
在1990年代后期,补习在北上广等大城市开始,然后逐渐在全国范围内普及。 随着生活水平的提高和思想道德修养的提高,补习行业逐渐为人们所接受。 大多数父母在学习期间都有各种各样的客观因素,导致他们的学习成绩不理想。因此,在当今稳定的生活环境中,他们开始对孩子的表现抱有更高的期望。 在当前的“ Internet +”背景下,有可以提供个性化和定制化教育的全日制教育机构和兼职导师。 但是,全日制教育机构不如导师有效。 由于大多数全日制教育机构都是大型教学模式,并且如果您要进行个性化教育,则费用通常会更高。考虑到每个孩子的学习条件不同和其他原因,与学生年龄接近,熟悉学习范围,价格便宜的大学生的家庭教师迅速填补了这部分市场空缺。 对于大学生来说,兼职工作也是首选。 空闲时间和补习是大学生更舒适的工作范围,可以有效地减少公司的兼职工资纠纷和业务经验不足。
1.2 设计目的和意义
1.2.1 设计目的
本本次设计是基于上文所研究的背景,从交互设计角度出发,充分了解用户体验基本的运用规则及方法,并结合用户体验,视觉设计的方法,将有用性及易用性作为指导思想,结合用户体验的要素及人机交互分析的五大要素对完整框架、色彩使用、交互方式、界面元素的形状大小等进行分析,并设计出一份完整的APP交互流程,为解决现存的教育需求问题。
1.2.2 设计意义
本次设计并不注重实现设计的工具及技术,而是结合用户体验理论与交互设计方法结合并加以应用,实现两者在APP设计中的结合。为家教信息的发布提供一个良好的平台。
同时,从交互设计的方向出发,以改善APP的用户体验,并获得APP的目标用户的好评,从而增加产品的市场份额。APP是移动互联网时代的产物,社会的需求已经从物理产品的功能需求变为虚拟产品服务需求。 具有各种不同功能的应用程序在业余时间已成为大多数用户的新宠。 新颖的APP将与朋友分享。APP是否能够成功,是否能够为用户带来良好的体验以及是否具有用户忠诚度和信任度,其交互设计起着重要的作用。 开发语言被用作APP设计过程的核心。 尽管可以满足一些基本功能和开发周期要求,但是对用户需求的了解还不是很全面,因此该产品没有相应的市场竞争力,不能为用户提供良好的用户体验不能满足用户的日常运营需求 ,造成极大的资源浪费。 根据用户体验的概念设计应用程序。 在设计教育需求应用程序的过程中,始终将用户放在第一位,并从用户的角度想象用户的实际需求,以使设计的功能和操作更适合目标用户。满足用户的身心需求。
1.3研究现状
当前的补习平台是混杂的,还有“学而思”,“轻轻教育”等在国内比较有名的平台,但是也很难满足我国许多补习的需求。 另外,大多数省市都有面向大学生的在线辅导平台,离线辅导等,这使得家庭成员和大学生难以选择放心的机构,目前的部门平台管理还不规范, 并且信息不及时,导致诸如父母和大学生的信息泄漏或发布的信息不及时等问题。
第2章 APP交互设计与用户体验理论
2.1 APP中的交互设计
APP中的交互设计不是指该代码程序在手机上如何运行的,而是它运用何种形式与用户产生交流互动的过程。这个过程基础在于用户体验设计理论。虽然都是互联网时代产生,APP交互设计与传统电脑端交互设计的区别除了设计标准和设计规范的不同,还存在下几个方面的特点。
使用环境复杂多变,使用APP必须依靠移动设备诸如手机和平板电脑之类的载体,这些载体具有本身的特点,人们可以在地铁,公共汽车,电梯,地铁,地铁中行走以及在床上使用,这就使使用的场景复杂多样。面对如此复杂的场景,人们对APP的设计将有不一样的需求。但是,在传统的电脑端,人们基本上只能坐在计算机旁边,并且只有一个使用场景。
使用时间碎片化,手机作为APP的载体,其最大的优点就是可移动性,人们可以随时随地使用手机APP,可能是在等车的时间,也可能是在吃饭的间隙,更甚至是上洗手间的那化分钟。
相较于电脑端手机屏幕尺寸缩小很多,大部分APP是依赖于移动手机设备的,手机屏幕的尺寸大小会直接的影响用户对APP的使用。在APP的设计中,要对用户所接收信息量的接受程度及手机屏幕的空间利用率做主要的考虑,同一个页面充斥大量的内容会让用户使用上产生不适,然而,信息通过过多层级页面展示会增加操作的复杂程度。所以,在交互设计上掌握好一个"度"非常必要。
2.1.1 APP交互流程设计
流程设计对于用户体验非常重要,好的流程设计会带来非常好的用户体验。这里有三个方便的地方,可以解释什么是流程设计,流程设计中要考虑的问题以及出色的流程设计的好处。
首先理解交互设计设计的是什么——交互设计是设计用户完成任务的方式,交互设计是通过设计出一个个页面和按钮,帮助用户更好的顺利的完成任务。下面我们通过打电话的例子来说明:
原来打电话就是拨号——打电话(拨号键盘)
随着技术发展,可以对电话号码储存——选择目标——找到电话号码——拨打电话(电话簿)
现在也可以,找到通话记录——拨打电话(通话记录)
这就是一个打电话的流程设计。而每一步都是交互方式。
现在我们可以了解什么是流程设计-用户通过某个步骤完成任务,而交互设计师设计用户完成任务的方式,而流程设计是两者的集成。流程设计是根据用户的使用流程进行设计。
流程设计中主要要考虑两个因素,业务需求和用户需求。从业务需求来讲,产品的目的是什么,用过这个产品要达成什么样的目标,这是要考虑的项目需求,其次是用户,用户的体验目的是怎么样的,他们会用什么行为来完成这个目的呢。
用户要完成的任务并不等于产品目标真正要完成的业务任务。例如,在2018年回答问题和共享资金这一非常热门的活动。用户要完成特定的任务来完成答题瓜分的奖品,产品的目标是绑定多张银行卡。其次,有很多东西,例如,每次使用美团时,结束后都会有一个红包要分享,但是决定权在用户手中,并且不会干扰用户的主要流程。在企业中要进行的流程设计不仅要帮助用户完成任务,而且其完整定义应该是它不干扰用户使用流程来满足业务需求的方式。
第一、一个好的任务流程可以增加任务完成率
这个任务可以分为用户任务或产品任务两类,一个适合的任务流程,都可以提高用户的完成率。
第二、就是让用户更加方便的完成任务
新发布的腾讯文档,流程设计足够简单,只有三个简单步骤:回车选择写共享,让用户非常轻松地完成任务,其中最好的例子应该是微信,流程设计是很自然,用户使用起来非常方便。
第三、就是对错误的思考
给予用户二次提醒,防止用户出现错误。
第四、就是带来夸张的业务完成度
微信就是著名的例子,一夜之间完成4亿张银行卡的绑定。我们分析微信是怎么做的,它将这个步骤放在了最后,用户需要花取现实货币的时候,微信并没有去打扰用户的主要流程。
2.1.2 APP交互设计趋势
1.线上+线下的进一步融合
在过去的几年中,纯粹的在线人机交互已经转移到了线下,例如和马鲜生,京东等。在以前的超市互联网化的同时,设计师必须了解更多的线下支付场景和物流交互方法,用户分析和购买动机具有新的意义。我最近看过的“必不可少的商店”还介绍了新的电子商务和商店如何相互制约和调整策略。
2.购买方&销售方同步性更高
在2019年,买卖双方之间的联系将更加频繁,主要制造商的品牌从战略上增加了对运营和运营商的培训。 例如,淘宝和京东都分析了更多的卖家销售数据以及商品展示商品模块的设计方法。 在金融行业中,客户经理可以在线与客户沟通,并可以同时跟踪彼此的进度。 这些是设计师从未遇到过的新项目。
3.故事性与内容优先
在当今信息爆炸的时代,一次使用后约有25%的APP被卸载,吸引用户的注意力已成为一个非常重要的目的。 我认为,交互式视觉和操作手段的有机融合是未来或未来一段时间的主流模式。 在操作中,我们需要提供更好的复制内容,注意操作功能的统一性和连续性,并给用户以沉浸感。
提供更多量身定制的内容来吸引用户的设计。用户不需要太多的学习费用,但是满足此要求的内容将使他们成为忠实的用户。
4.无衬线字体VS衬线字体两极分化
在过去的一年中,大多数大品牌LOGO都采用了新的设计风格,而Sans和Pingfang等sans-serif字体赢得了很多人的认可。 Sans Serif字体具有简洁和简洁的优点。 它们具有绝对的优势,可以在各种显示屏和印刷产品上轻松识别。 现在,这种字体样式将在未来的更多页面设计中继续使用。
另一方面,衬线字体和复古设计有一定的回归趋势,图标也从极简主义回归到准对象,与无衬线字体有相反的对立。经典Bookman字体和手写体再次流行。 衬线字体的优点是个性化样式的显示效果,可在视觉上表达独特的品味和样式。 对于某些特定的人或特定的情况,设计的衬线字体使用户可以加深了解。
5.渐变色依然流行,不对称风格开始流行
渐变色在2018年非常流行,在2019年仍然很流行,并且在颜色使用上更加大胆。 Pantone还发布了Living Coral,这是2019年的旗舰色,发布的配色也跃升了。
在排版中,形状和不对称形状越来越多。在APP界面上使用堆叠效果不仅会给界面带来层次感和乐趣,而且自然会吸引用户点击每个页面。 将来,这种新样式还将为人们带来新的阅读体验。
6.拟物化回潮&插图风格重新热门起来
经过几年的平面设计,APP和网页中的装饰风格开始重新流行,线性图标又开始具有阴影和明暗效果,显得更加有质感。
在电子商务的兴起和潮流品牌的潮流下,许多页面重新开始了插画风格,并且还有许多华丽的2.5D效果,这种设计可以自然地将许多元素组合在一起显示,这比纯平面设计要好得多。 精力充沛。
7.动画效果和界面功能更加自然的结合
从去年到现在,微交互的使用一直在继续,平滑的过渡动画将使APP栩栩如生。 考虑到开发成本和手机性能,有时微动画更容易着陆并产生良好的效果。 例如,最喜欢的添加到收藏夹,喜欢,完成确认等,这些小的优化使用户可以更清楚地获得有关其自身操作的反馈。 这些情感表达使人们微笑。
8.短视频的进一步深度运用
随着硬件性能的提高,短视频在应用程序和网页中的使用激增。除了主要使用短视频的应用程序(例如Douyin和iQiyi)之外,从电子商务应用程序使用短视频显示产品,聊天应用程序以提供短视频秒数来表达表情,还可以使用网页来使用视频动态背景, 增加气氛,我们都可以感受到视频带来的新感觉。 这种类型的短视频丰富了页面的内容,简单地表达了复杂的概念,并给用户带来相同的感觉。
9.AI+AR的落地性运用
近年来,从金融服务的脸部识别到电子商务的智能机器人服务,从GoogleHome,亚马逊Alexa到魅族的Xiaoxi,人工智能一直非常热门。 近来,微信阅读APP还具有模仿语音的阅读功能。 研究表明,从2016年到2022年,生物识别市场估计将以29.3%的复合年增长率增长。人工智能的出现扩大了设计师需要考虑的设计问题,也给设计师带来了新的挑战。
趋势在不断变化,风格与设计一样永存。在我看来,最好的设计是用户不需要学习和自觉感觉,可以指导用户完成他想要实现的目标。最好能够愉快地享受这个过程。良好的协作结果。人体工学只是在20世纪才成为一门独立学科,因为此时我们的设计目标已经从简单的手工制作用品发展到许多工业产品。 因此,设计规范变得越来越严格,设计产品完全像以前一样依赖于设计师的设计灵感和设计经验,并且已经失去了一定的水平,无法满足现代设计的需求。 学科的形成。
2.1.3"以人为本"的交互设计
Bill Mogric在1990年正式提出了交互设计的概念,主张交互设计必须是人与产品之间的互动行为,场景和心理分析为出发点。交互设计是一门关注用户体验的新的出发点,其设计理念是以人为中心。在交互设计中,“以人为中心”是“以用户为中心”。 对“以人为中心”的理解不仅限于从人的自身考虑,还需要考虑产品的可持续性。用户是交互设计系统中的主导者和参与者,并且有许多方法可以对用户进行分类。例如交互中有直接操作者和间接操作者,直接操作者是交互设计中考虑的主要目标用户,而相关操作者是广义操作者,其中包括更多的分类。从各个方面了解用户至关重要。在交互设计中,需要集中用户的注意的点,感知和识别特征之间的不同,以便用户可以快捷地完成系统目标。有非常多的方式可以满足用户的需求。其中,用户的显式需求的识别是基本需求所以就会很轻松,但是识别用户的潜意识需求要困难得多。在确定用户需求时,有必要使用定性或定量研究。
2.2用户体验理论
美国认知心理学家唐纳德·诺曼(Donald A. Norman)对人机交互的用户体验有一个清晰的介绍:“用户体验(User-Experience)是用户使用产品(服务)的纯粹主观过程, 人们使用的每种产品都有用户体验。无论生产哪种产品,用户体验始终体现在微妙之处,但是其非常重要。”
在设计产品或服务时,人们经常专注于产品的功能和内容,而忽视了用户的感受,即用户的体验,而这恰恰决定了产品的成败。对于具有良好用户体验的产品,成功的关键不仅在于外观或功能最主要是在于用户的体验很良好。设计师倡导的“形式遵循功能”完全适用于用户看不到的部分,例如产品的内部结构,以及产品在用户面前呈现的部分,例如产品上的所有用户。APP界面可以看到,被触摸的事物主要取决于用户的同理心和行为,该功能只能用作参考因素。
产品设计与用户体验设计之间的区别在于,由于产品具有相应的功能,因此将其定义为产品,并且在使用产品的过程中带给人们的心理体验就是用户体验。在APP之类的internet平台上,用户体验比产品功能和内容更重要。首次访问是一个让用户很迷惑找不到操作方式的APP平台。 人们是不会对其进行第二次的访问。
越来越多的公司开始意识到高质量的用户体验是最大的竞争优势。以用户为中心的设计理念是在产品开发过程中将用户纳入设计的每个过程。用户体验非常重要,因为对于用户而言最重要的就是对产品的感受,为用户提供优质的体验,可以在无形中将用户引导到产品中去。
2.3用户体验要素
1.战略层:是对产品总体方向的把控,包括产品的商业逻辑,商业价值,商业壁垒等。
当前互联网已进入下半场,大把烧钱野蛮生长的模式已经越来越不可持续。此时无论是投资人还是创业者,更多的都将回归到商业本质,即对产品商业属性的思考。产品经理圈常说不要去创造需求而要去发现需求,真正地去满足目标用户的特定需求,因为这样的产品才能具有商业价值,商业价值的大小可以通过市场规模分析,目标用户价值分析等方式进行衡量。除此之外,对于自身商业壁垒的分析也十分重要,在明确自身优势的同时可以进一步巩固和发展这些优势以提高后来者的准入门槛,以此取得更为有利的发展空间。
成功的用户体验的基本条件必须是明确相关所要表现的战略。了解企业与使用人员对产品的期望和目标可以较快的分析和形成用户体验。产品战略可以通过以下两方面来获取。
根据对使用者群体的定义。首先要确定用户的本身需求,挖掘更深层次的用户需求。对用户需要什么想要什么有一个全方位的了解。有时用户会饥不择食有时也会挑三拣四,确定使用人群才能更好的满足他们的确切需求。
观察市场动态。 “站在风口猪也会飞起来”市场动态是不断变化的,但是总体的方向不一定一直都改变,把握对的方向才能在市场上占据一席之地。
2.范围层:需要进一步讨论产品所包含的具体功能,使产品从一个概念叙事开始转化为功能聚合体。
此时明确不需要做什么要比列出需要做什么更重要,太多的产品一上线便拖着一副臃肿的身躯,夹杂着大量产品经理自以为绝妙确一无是处的功能,最终落得失败的结局。因此需要明确产品范围边界,梳理得到核心功能,以此构成最小可行方案(MVP),并通过落实最小可行方案来验证产品的商业逻辑。此时应该将比较抽象的概念具体到每个功能上。
产品功能的确定需要遵循产品策略,否则产品将面临很大的调整甚至死机。我们如何收集功能要求?功能从何而来?
一些要求适用于整个产品。 如品牌需求或技术需求。 其他要求仅适用于特殊功能。 大多数时候,当人们谈论某种需求时,他们想要对产品必须具备的内容进行简短的简短描述。 用户需求会大相径庭。 理解“人们在想什么”的最好方法是直接问他们。需求的三个主要类别:人们说什么,他们想要什么; 用户的实际需求; 潜在需求。
找到需求后,我们需要定义需求的优先级。 优先级是决定人们建议的相关特征的主要因素。策略-范围的关系是什么?战略确定范围,功能承载产品价值,范围层是实现战略意图。
3.结构层:此时开始进行产品的信息架构和交互设计。
在明确了产品的商业逻辑和核心功能后,我们可以开始搭建产品的业务架构和相应的信息架构,并在此基础上进行交互设计,确定页面之间的层级和跳转关系。此阶段的输出物一般为业务流程图和操作流程图。
在功能产品中,结构层将从范围更改为操作系统如何响应使用者的命令。在信息产品方面,结构层是信息空间中内容元素的分布。
结构层确定要呈现给操作者的各种选项的模式和顺序。主要包括:交互设计:作为软件界面网页,为用户设计结构化的体验;信息架构:作为超文本网页,内容构建通过信息架构建立用户体验;产品关心了解用户,用户如何工作以及他们如何思考。
4.框架层:是在交互设计的基础上进行整个原型设计制作的阶段,包括导航设计、界面设计和交互细节的设计。
确定要实现的形式,主要包括:界面设计:确定框架,“按钮,输入框,界面控件”字段; 导航设计:呈现信息; 信息设计:目前有效的信息交流
成功的界面设计是一种,使用户能够一目了然地看到“最重要的内容”的设计。精心设计的界面将组织用户最常采用的行为,同时允许以最简单的方式获取和使用这些界面元素。为用户想要完成的任务选择正确的界面元素,并以易于理解和易于使用的方式将其放置在页面上。
任何产品的导航设计都必须实现以下三个目标:目标1:必须为用户提供一种在网站之间跳转的方法。 目标二:必须传达这些元素与其包含的内容之间的关系。 目标三:必须传达其内容与用户当前页面之间的关系。
5.表示层:主要是视觉设计,在这一阶段由UI设计师或视觉设计师主导,产品经理为辅助角色。
内容,功能和美学被融合在一起,以形成最终设计,从而达到其他级别的所有目标。“弥补网站框架层的逻辑排列”的视觉表示问题。
如果设计成功,则用户的眼睛在产品上移动的轨迹模式应具有以下两个特征:首先,它们的运行非常平稳。其次,在不怕用户太多细节的前提下,为用户提供一些有效选择的有效“指导”。
第3章教育需求APP设计分析
3.1 交互行为分析
3.1.1用户分析
经过初步调查分析,有四类人群对家教方面有一定的需求,第一类是有补习欲望的中小学生,目前绝大多数的中小学生拥有一部智能手机,然而在找家教方面却不是很熟悉,一般都是由其监护人替他们寻找,这样就暴露出一个问题,学生的性格和知识水平不能和补习人员相匹配,导致学生在家教时事倍功半,对参与家教的多方都是一个挑战。有了这款APP学生就可以随时参与寻找家教的过程,增加授课人员自我介绍功能并且可以随时参与交流,无其他复杂的过程,全面了解对方的性格与知识水平。第二类是想给自己孩子补课的监护人,他们一般都有自己的工作,空余时间有限不能一直关注这方面问题,或者经常被一些中介打扰,他们对家教的考虑方面有很多,首先是家教人员的水平参差不齐,他们只能接受熟悉的人的推荐,他们对价格方面也有一定的考虑,这就需要监护人对复杂的信息进行对比,然而这些信息又非常乱,对比时就会增加难度。人们可以随时随地使用手机,对感兴趣的信息可以特别关注,对骚扰的信息可以进行举报。对关注的人进行特别提醒,人们可以随时拿起手机进行交流,在交流页页面显示出实时状态,可随时关注。第三类是自由兼职的人多数为大学生他们所考虑的的问题是在时间,地点等客观问题是否满足他们的要求,找到一个跟适合自己的家教兼职,另一方面也会考虑对方的诚信问题。在APP中加入地图功能可查看附近信息发布的地址,增加信息筛选功能,可以高效的获得需要的信息。第四类是一些教育机构的招生人员,他们想要快速扩大知名度,找更多的学生,每次开班都需要投入大量的广告费用。APP设有实名和企业认证,保证安全的同时也会提高知名度。
3.1.2场景分析
第一类用户因为是学生,手机的使用时间受到限制,一般在周末或者处于寒暑假期间的家里,第二类用户因为大多数都在繁忙的工作,因此使用的主要场景也是在休息阶段,大多数是在家中。第三类用户大多数为大学生,使用场景也是在休息时间或课余比较轻松的时段。第四类用户是身处于办公环境之中。因为使用这款软件就意味着应聘或者招聘因此这是一件比较严肃的事情,所以使用这款APP的用户一般身处于舒适没有其他事物扰乱的情况,这样才能保证自己判断的准确性。在这种情况下交互动作一般是双手来完成的。
3.1.3目的分析
目的分为三类,第一模糊目的:用户本身是想找一个信息大体的反向有了比如是找家教,但是不知道找教什么的也不知道要找什么价位的,对时间距离等客观因素也不是很敏感。点开一个信息,看看介绍和详情,觉得不感兴趣,就再换一个,进行一个反复的行为;第二明确目的:用户已经知道自己需要的家教信息比如想找一个教数学的价位在200元/小时的离家近的,只要搜索比较联系进行一次单次的线性行为。第三随机目的:用户是想获得什么,但是不知道要什么,更不能明确描述,比如自己发布了信息随手拿出手机来看看附近有没有跟自己有竞争的信息或是有没有联系自己的信息。打开首页随机浏览导致碎片化的不确定行为。
3.1.4行为分析
用户行为与目的有因果关系。为了达到某个目的,必须有一个或几个可预测的行为。一方面,这些行为可以指导设计者如何设计交互过程,另一方面,它们也可以从可以用来创新行为的角度启发设计者。
基于用户的固有习惯的设计可以使用户操作时感到自然快乐,从而满足用户的习惯以获得舒适的体验。 例如,根据“随机浏览内容”的目的,将内容列表制成瀑布流,以便用户只需要滑动即可。只需保持流畅,自然且符合预期的浏览即可。
3.2 现有信息发布类APP分析
由于手机的流行信息发布类APP也变得越来越多,形式也趋于稳定。经调查在家教信息发布方面有两款比较知名的软件“易教网家教”和“轻轻家教”
3.2.1两者信息框架
两款APP的功能都比较复杂,轻轻家教在各个方面都形成了闭环,使用户使用时思路更加清晰而易教网家教功能繁多且比较复杂容易让用户在接下来的点击中比较迷惑,而且易教网家教重复功能的按钮比较多,这给用户使用时造成不小的压力。
图3-1易教网家教框架
图3-2轻轻教育框架
3.2.2功能分析
首页页面两款APP都将科目放在首要位置前者注重功能体验,后者注重信息发布。但两者有一个共同的问题就是页面纵向内容过长容易使用户迷失自我,在轻轻家教中你只能了解到关于老师的信息,只能是单方面的寻找,学生有了解老师的权力,但老师无法选择学生。而易教网家教中两类人都可以发布自己的需求,这也是易教网家教更受欢迎的原因。但是易教网家教由于信息过多并没有一定的梳理导致用户进入首页时无从下手,满眼全是文字。两款APP的颜色都比较醒目,可能会导致视觉疲劳。而且使用者大多数是成年人鲜艳的颜色使APP更显得廉价、不正规。
在两款APP我的页面中可以发现二者都具有自己的货币体系,是因为两款APP都有视频课的售卖,可以通过内部货币体系进行购买,这样的好处是可以使用优惠卷来吸引用户。因为两款APP的侧重点不同,轻轻家教更注重线上教学所以把学习的部分剥离与首页并列,并将我的分级教学、服务、其他三个标签。而易教网家教要面对学员和教员两类人因此在我的页面里最先进行的是教员登录与学员登录的选择,登陆后两者会有一定的改变。
两款APP都采用底部标签式导航栏轻轻家教添加了答疑和学习的标签在中间还有一项邀请卡功能它是舵式,比较吸引用户注意。其主要是为了打响他这款软件的知名度。但是邀请卡功能单一却又不常用弱化了其他标签的视觉效果。易教网家教添加了科目和信息的标签,突出他的核心是信息与交流,但是科目页中有部分功能与首页重复使用户在需要时不知道该选哪个点击,减少用户的信任程度。
两款软件虽然侧重点不一样但是他们的主要功能都是相同的,因为两款软件的表现风格不同使用户在使用时有较大的感觉差异,前者考虑交互感觉多一些,使用户用着比较舒服,代入感比较强。后者缺乏交互内容使各方面的使用感觉比较生硬,而且他的返回按钮是无限循环的像网页一样这样的操作在手机APP上操作很不顺手。但是他比较轻量而且信息比较全面使他的用户量比较多。两款APP在交互方面有长有短,应了那句话“没有更好,只有更适合”
第4章APP初步设计
4.1 信息架构
经过仔细分析将用户所产生的需求使其现实化,形成一个闭环,主要页面有首页、附近、消息、我的和发布。
图4-1信息框架图
4.2 各功能分析
首页:对用户需求进行梳理,吸引用户,页面“黄金区域”放置“找家教”“找学生”“找培训”以及热门的家教学科,前者是为了引导不同类型的用户查看不同的信息,解决用户带着需求进入APP却无从下手。因为使用这款APP的用户多数为找家教,而且比较迫切,所以在首页醒目的位置放置热门学科。
附近:上门的家教最先考虑的内容就是距离问题,在这个页面用户可以以自己的地点为中心查看附近的需求以及详细信息更快的做出选择。
消息:交流也是重要功能之一如果发布的消息满足用户的需求时第一个操作就是与发布信息的人进行交流,了解具体信息后才能确定信息的真实性。具有视频与语音通话功能这样就可以实时交流彼此互相了解,也可以在线试课。支持账号加好友功能。
我的:有自己的信息卡片,可以对自己的信息进行认证使发布的信息更加容易获得别人的信赖。可以在我的收藏里查看自己收藏的发布信息,在我的申请里可以查看自己的发布的信息内容,在草稿箱里可以查看自己未发布但是保存了的信息,可以随时编辑再进行发布。
发布:在发布信息之前必须要经过登录,在登陆过程中需要选择找学生,找家教,找培训三个方面的选择,发布页面在这三个方面所呈现的页面信息不一样。达到一个快速发布的目的。
对比:这是一个隐藏页面,在查看发布的需求信息时会有对比按钮点击后可以对各个方面进行一个横向的对比,让用户寻找更适合自己的。
4.3界面风格及低倍图布局
4.3.1界面风格
经过前面设计趋势的分析本款APP采用扁平化卡片风格设计,使界面更简洁更规范,这也是目前比较流行的设计风格,页面上加入品牌元素,提升用户对APP的认知,避免产生同质化。利用格式塔设计原理,化繁为简,功能更为明显,使用户专注于内容。优化产品设计风格,做出统一组件样式。提升研发和设计的效率,保障风格的一致性。深挖页面使用场景加入恰到好处的微动,以及优化页面间的过度,提升用户产品体验。
4.3.2低倍图展示
图4-2低倍图设计
第5章 最终设计方案及效果图
5.1 设计规范
本设计稿基于iphone x750x1624@2分辨率为72dpi即iphone x二倍图,状态栏88px,home键68px,实际设计页面1468px 。
5.1.1颜色选择
APP的主题颜色在一定程度上决定了APP的整体风格。 主题颜色通常用作列的标题,或页面主要元素的颜色。 颜色的选择具有特定含义。 不同的颜色传达出不同的情感色彩,给人以不同的感受。
蓝色:蓝色非常纯净,通常让人联想到海洋、天空、湖水、宇宙。纯净的蓝色表现出一种美丽、梦幻、冷静、理智、安详与广阔。由于蓝色博大的特性,具有理智、准确的意象,在商业设计中,强调科技、效率的商品或企业形象,大多选用蓝色当常用色、科技色,如电脑、汽车、影印机、摄影器材等等;另外蓝色也代表忧郁,这是受了西方文化的影响,这个意象也运用在文学作品或感性诉求的商业设计中。
红色:节日的暖色。它刺激人,容易产生冲动。它可以用来表达诸如生命,行为和危险之类的信息。
澄色:介于红色和黄色之间的间色。又称橘黄色或橘色。橙色是欢快活泼的热情色彩,是暖色系中最温暖的颜色。因其具有活泼、丰收、华丽、健康、兴奋、温暖、欢乐、热情、以及容易动人的色感,常作为装饰色。
黄色;温暖和阳光代表着希望,幸福和快活的个性,使人们感到光彩照人;它可以用来表达希望,光明,关注和其他信息。
绿色:它是介于冷色调和暖色调之间,安静与和谐之间的一种颜色,给人们健康安全的感觉。它可以用来表达生命,成长,安全和其他信息。
紫色:优雅,高贵,给人一种神秘,压抑的感觉;可以用来表达深奥的,理性的,漫长的,崇高的,冷漠的信息。
黑色:让人感觉到深沉,神秘,给人寂静,悲哀,压抑的感受;同时也体现出现代感、工业感、冷酷等,可用于表现坚硬、沉重、男性、工业等信息。
因为教育需求APP的定位是信息发布,传递一种安全,蓬勃生机,信任与帮助的信息。因此主色调选择绿色更为合理,又因为冷色调会给人以距离感所以搭配一些暖色调为辅色。
图5-1关于颜色
5.1.2字体选择
选择苹方为中文字体Gilroy为数字及英文字体,使页面跟家规范整洁。页面主标题及按钮文字36pt,页面副标题文字34pt,内容标题30pt,内容正文28pt,内容辅助文字24pt,登录页服务文字20pt。
图5-2关于字体
5.1.3图标及按钮规范
按钮图标大小为90x90px,主功能图标大小为44x44px且保持图标视觉感受大小一致。装饰性图标尺寸为40x40px描边2px。
通用主按钮高度为90px,宽度为710px,圆角12px,搜索框宽度为64px。
图5-3关于图标
5.2 高倍交互原型图
结合功能方面将设计好的页面进行关系梳理。明确的标出了各页面内容的跳转关系。
图5-4高倍交互原型图一
1:单击跳转至页面“定位”从左至右滑入
2:单机跳转回上层页面,之后的返回键就不一一赘述
3:点击拖动查看旁边字母分类区域栏内容
4:icon最少五个最多10个,小于5个不显示,当大于5各时用户可以左右滑动查看。
图5-5高倍交互原型图二
1、2:点击跳转至页面“信息搜索”,从左至右滑入
3、4:点击跳转至页面“老师信息”从左至右滑动
图5-6高倍交互原型图三
1:点击跳转页面“地点吉林化工学院”从左至右滑动
2:点击跳转至页面“搜索”其他搜索页面类似只是搜索库不同
3:搜索框,有提示内容,点击后变为输入状态
4:点击打开隐藏栏,缓动
图5-7高倍交互原型图四
1:点击跳转页面“消息小白”,从左至右滑动,左右滑动信息条出现举报置顶等按钮
2:输入信息后点击发送,无内容显示50%透明度并且不可点击
3:右上角有小红点说明有新消息
图5-8高倍交互原型图五
1:点击跳转页面“编辑资料”从左至右滑动
2:点击跳转页面“设置”从左至右滑动
3:点击跳转至系统相册页面,从左至右滑动
4:点击保存后跳出“已保存”系统弹窗
5:点击退出应用
图5-9高倍交互原型图六
1、4:点击跳转至页面“发老师对比”从左至右滑动
2:点击跳转至页面“发表评价”从左至右滑动
3:点击跳转页面“消息小白”从左至右滑动
结论
在本次设计研究中,首先通过网络信息及文献,对教育需求APP的课题背景,研究目的及意义做了详细分析,接下来分析了对APP交互设计流程与趋势进行分析。接下来对用户体验的五个层面进行分析即战略层、范围层、结构层、框架层和表现层。了解了设计方法、设计流程和设计思路,接下来对教育需求APP的使用用户、场景、目的和行为进行具体分析再结合目前教育需求类APP的分析以及未来的设计趋势对教育需求APP在交互设计、视觉设计、功能设计等方面做设计定位,根据设计定位对教育需求APP进行具体的细节交互设计。
手机越来越成为人们生产生活必不可少的工具,随着一些传统的行业与其发生碰撞,出现的问题也越来越多,人们也越来越重视手机端的交互设计,但是国内手机端的交互设计起步的相对较晚,人们还有待对其更深一步的认识,因此我们还有很长一段路要走。
参考文献
[1]张华峥,桂全安.“互联网+”背景下个性化定制家教服务研究[J].通讯世界,2019,26(06):24-25.
[2]周威龙,王蕾,李佳欣.大学生家教平台建设研究[J].对外经贸,2018(11):152-154.
[3]马金鹏. 认知心理学在交互设计中的应用与研究[D].青岛理工大学,2018.
[4]Nathan-Roberts, Liu.Testing Aesthetic and Function Design Preference for Touch Screen and Non–Touch Screen Mobile Phones Using Interactive Genetic Algorithms[J].International Journal of Human-Computer Interaction.2014(04).
[5]马艺珊.交互设计在移动端旅游APP中的应用探究[J].西部皮革,2020,42(01):50-51.
[6]白珂,段嵘.现代人与“情绪化”移动端交互设计探析[J].大众文艺,2019(14):99-100.
[7]孙海洋,吴祐昕.移动应用中的场景交互设计研究[J].设计,2017(10):104-105.
[8]Otto Parra,Sergio España,Jose Ignacio Panach,Oscar Pastor. An empirical comparative evaluation of gestUI to include gesture-based interaction in user interfaces[J]. Science of Computer Programming,2018.
[9]Tomás Alves,Joana Natálio,Joana Henriques-Calado,Sandra Gama. Incorporating personality in user interface design: A review[J]. Personality and Individual Differences,2020,155.
[10]杨海波,杜宇菲.智能手机交互界面设计的认知基础[J].包装工程,2020,41(10):1-6.
[11]韦琳. 加油APP“优品加油”交互设计研究[D].西南交通大学,2016.
[12]Jakub Dostal,Per Ola Kristensson,Aaron Quigley. Estimating and using absolute and relative viewing distance in interactive systems[J]. Pervasive and Mobile Computing,2014,10.
[13]吴琼.交互设计的域与界[J].装饰,2010(01):34-37.
[14]人人都是产品经理
展板