第1章移 动 商 务 本章学习目标 掌握移动商务的概念与发展。 了解本书的实践内容。 掌握移动商务创意实践的方法与意义。 1.1移动商务的概念与发展 1.1.1什么是移动商务 广义的移动商务是指通过移动设备可以获得的一切服务,涉及通信、娱乐、商业广告、旅游、紧急救助、农业、金融、学习和商业运营等。狭义的移动商务是指通过移动终端(如手机、平板电脑和PDA等)、围绕货币交易而进行的商务活动。移动商务的应用主要包括移动信息服务、基于位置的服务、移动支付、移动营销、移动娱乐、移动学习、支持企业运作的移动商务等。相对于传统的电子商务来说,移动电子商务具有以下显著特点。 1. 时空无界性 移动用户可以在任何时间、任何地点查询所需的商品或服务信息,启动、协调和完成移动交易。这使得经常出差的用户和经常离开办公桌的用户都不会错过交易机会。 2. 便捷性 不受地域限制,采用便捷的通信方式查看邮箱、收发即时信息和交换文件等,都因移动互联网的普及而变得非常容易和便捷。 3. 位置相关性 采用全球定位系统(GPS)和基于位置的服务技术(LBS),可以帮助服务提供商更准确地识别用户所在位置,从而向用户提供与其位置相关的信息,如附近的旅游景点、酒店和餐厅等。在许多性命攸关的需要位置信息的急救场合,GPS还可以结合地理信息系统(GIS),帮助人们更快、更准确地找到需要帮助的人。 4. 个性化 由于每部移动终端都有唯一的SIM卡(智能卡),关键的移动应用也需要经过实名认证,因此服务提供商可以很方便地通过它收集用户信息。商家通过收集用户的以往数据,包括移动数据和交易偏好等,采用数据分析与数据挖掘工具,帮助用户发现自己的爱好,从而更精确地提供用户所需的服务。 1.1.2移动商务的发展 1. 电商企业布局移动商务 移动互联网将移动通信和互联网两种技术相结合,可以满足用户在任何时间、任何地点,以任何方式获取并处理信息的需求,这使电商企业发现了产业发展的巨大机会,纷纷加快移动互联网布局,不断推动电子商务向移动端发展,移动商务应运而生。移动商务是传统电子商务在移动领域的延伸和扩展,与传统电子商务相比,移动商务主要具有以下优点。 (1) 移动终端可以随时随地进行信息沟通,为移动商务创造更多机会。 (2) 消费者不再局限于坐在计算机前,使电子商务的疆界成倍地扩张。 (3) 通信终端的私有性有助于移动商务供应商精准地与最有希望达成交易的用户进行交互,提高了交易的成功率。 2. “互联网+”促进移动商务发展 2015年的政府工作报告中首次提出“互联网+”行动计划,从此“互联网+”这一概念成为互联网经济甚至是国民经济建设的一个新风口。在“互联网+”时代,传统的产业运营模式正在被打破,新的业务模式正在形成。在中国零售市场线上线下加速融合的大趋势下,消费场景日益多元和分散,移动终端作为连接线上、线下消费场景的核心途径,移动商务得以进一步发展。 2016年移动网络经济首次超过PC端,网络经济已经进入移动化时代。艾瑞咨询在《2017年中国网络经济报告》中分析了2016年的中国互联网经济发展情况: 2016年,中国网络经济营收规模达到14707亿元。其中,PC端网络经济营收规模为6799.5亿元,移动网络经济营收规模为7907.4亿元,移动网络经济首次超过PC端。 3. 移动商务高速发展 近几年,中国移动互联网用户呈爆发式增长,移动互联网用户规模超过传统互联网规模,各类移动应用软件层出不穷,数量持续增长,微博、微信、社交网络、移动购物、手机支付、手机短视频等移动互联网应用发展迅猛,移动商务得以高速发展。中国互联网络信息中心(CNNIC)发布的《中国互联网络发展状况统计报告》显示: (1) 截至2019年6月,中国手机网民规模达8.47亿,较2018年年底增长2984万,网民使用手机上网的比例达99.1%,较2018年年底提升0.5个百分点。 (2) 截至2019年6月,中国网络购物用户规模达6.39亿,较2018年年底增长2871万,占网民整体的74.8%; 手机网络购物用户规模达6.22亿,较2018年年底增长2989万,占手机网民的73.4%。 (3) 截至2018年12月,中国网络支付用户规模达5.83亿,年增长率为10.7%,其中手机网民占71.4%。 (4) 截至2018年12月,中国网民在线下消费时使用手机网络支付的比例由2017年年底的65.5%提升至67.2%。 4. 移动商务规模将再创新高 在2020年新型冠状病毒肺炎疫情爆发期间,人们的工作和生活方式发生了巨大的变化,宅在家成为每个人的生活主旋律,办公、学习、购物消费等习惯都被迫发生改变,生鲜配送、在线教育、短视频、直播带货等移动商务模式出现爆发性增长,并将成为网络消费增长的新亮点。 1) 移动生鲜将打开网络零售新的发展空间 目前,国内网络零售在规模和占比方面,都处于国际领先水平。从用户规模上看,目前国内网络购物人口规模已经突破6亿。生鲜产品作为生活必需品,购买率高,同时由于2020年疫情期间生鲜配送出现爆发式增长,用户通过移动终端购买生鲜产品的习惯逐渐形成,移动生鲜将打开网络零售新的发展空间。以天猫、京东等为代表的商家早已布局生鲜电商。天猫超市的生鲜区整合了数千家品牌商、生产商,为商家和消费者之间提供一站式解决方案; 基于京东自营的配送物流,京东于2016年开始布局生鲜平台,打造一个垂直生鲜平台; 盒马鲜生采用的是“线上电商+线下门店”的生鲜电商O2O模式,门店承载的功能较传统零售门店进一步增加,集“生鲜超市、餐饮体验、线上业务仓储”三大功能于一身。由于对物流配送和仓储要求高,生鲜电商一直不被看好,但是随着2020年疫情期间的爆发式增长,同时年轻一代正逐渐成为生鲜市场的消费主力军,生鲜市场的交易规模将快速增长。 2) 移动在线教育迎来新的发展契机 2020年疫情期间,为了阻断新型冠状病毒肺炎疫情向校园蔓延,教育部提出利用网络平台“停课不停学”,因此开启了人类历史上从未有过的最大规模的在线教学实践,近1500万教师化身“网络主播”进行在线授课,有2亿以上的学生通过手机、计算机、有线电视等途径居家学习; 同时由于疫情在全球的肆虐,许多国家停课停学,教育部高等教育司司长吴岩做了《应对危机、化危为机、主动求变,做好在线教学国际平台及课程资源建设》主题报告,拟推出高校在线国际教学平台,为世界各国大学生提供优质在线课程资源与服务。之前在线教育只是课堂教学的一个辅助手段,但是这次疫情使它成为教学的主要手段,让教师、学生、家长第一次认认真真地体验在线教育,重新审视在线教育。与传统在线教育相比,移动在线教育的优势在于可以利用碎片化时间随时随地进行移动在线学习,经过“疫情加速”后,移动在线教育必将迎来新的发展契机。 3) 短视频、直播带货潜力不断被挖掘 短视频、直播带货是内容富媒体背景下的必然选择,渗透率有极大提升空间。互联网信息的重要属性是碎片化,更加重视内容的价值,因此无论是短视频还是直播,都在用内容重新定义广告,用内容沉淀消费行为,用内容塑造电商的新生态。目前来说,大多数平台兼有直播和短视频业务,且各有侧重。短视频自2016年异军突起,快速收获了大批用户,并且用户群体呈现多元化,而直播带货正在崛起。2020年4 月 1 日,罗永浩直播带货的首秀销售额为1.8亿元,薇娅卖火箭上热搜,将直播带货推向了史诗级的高潮。 短视频、直播带货顺应内容化趋势,通过持续优质的内容输出来提升粉丝活跃度、吸引粉丝。短视频可以通过剪辑、组合等方式,将想要表达的内容集中在几十秒到几分钟之内,符合现代人碎片化的浏览习惯; 但是由于视频时间短,对消费者的预热不足,因此很难将原本有购买意愿的用户实实在在地转化为消费者。而一场两个小时左右的直播中,除了可以对商品进行更加详细的介绍,主播还可以随时与粉丝互动。在线交流极大地提高了沟通效率,并且期间可以通过打造场景,充分调动消费者的积极性,营造出购买氛围,增强粉丝黏性。淘宝直播非常类似“买手模式”,主播在纷繁的产品中选择最适合粉丝的、性价比最高的产品进行推广,因此顶级主播都有非常强的“选品能力”; 而性价比则是淘宝直播的重中之重,类似于拼多多的限时秒杀,主播通过“爆款低价”给粉丝提供优惠、保障商家销量。直播商品聚焦“限时、限量、限价、新品”,一场直播通常有25~30款商品,商品多是5~7折,高性价比更容易获得粉丝们的信任,销量攀升进而带来商家蜂拥而至。“直播+电商”的模式帮助用户更快做出决策、提升产品销售转化率,相比于传统电商0.4%的购买转化率,李佳琦、薇娅等淘宝直播的顶级网红购买转化率高达12%~14%。 种种迹象表明,短视频、直播带货相互融合将产生巨大的消费价值。 1.2移动商务项目实战 移动商务的迅猛发展及其蕴含的巨大经济效益,促使越来越多的公司投入大量的人力、物力、技术、服务等资源从事App、微信小程序等移动应用的设计与开发。本书针对“移动互联网+”的新产品、新应用、新模式,以项目驱动为宗旨,从零开始学习移动商务应用的设计与开发方法,并采用墨刀、AppCan、微信开发者工具进行移动应用原型、App、小程序等移动应用的移动商务项目实战,如图1.1所示。 图1.1移动商务项目实战 1.2.1墨刀 墨刀(Mocking Bot)是一款原型设计与协同工具。使用墨刀,通过简单的拖曳和设置,就可以生成一款可以在手机、平板电脑、台式计算机等多种设备上运行的、可以交互的移动应用原型。墨刀能够快速地设计一个应用原型,但它并不是一个真正的移动应用,而是在移动应用开发之前设计制作的一个用于产品交流沟通的展示模型,因此学习墨刀,并不需要具体的开发技术,只要会使用计算机进行上网操作,就能轻松地掌握墨刀。 通过多个墨刀案例的学习与实践,可以轻松地掌握移动应用原型的设计方法与技巧,并进行移动商务应用设计。 1.2.2AppCan AppCan IDE 4.0.2是正益无线(北京)科技有限公司开发的一款可视化集成开发工具,用于开发App。在AppCan开发工具中,首先使用HTML 5技术开发移动应用,再打包成iOS、Android等多个平台的移动应用,可以实现“一次开发、多平台适配”,在各种分辨率的移动终端上均保持相同的效果。由于采用可视化集成开发环境开发App,很多工作都是通过界面操作,因此需要编写的代码比较少,即便没有编程基础,也完全可以胜任App开发。 通过多个AppCan案例的学习与实践,掌握移动应用界面布局、开发App的方法与技巧,并进行App开发。 1.2.3微信开发者工具 微信开发者工具用于开发微信小程序。微信小程序是一种内嵌在微信内部的、不需要下载安装即可使用的应用,实现了应用“触手可及”的梦想。小程序的特点是无须下载安装、用完即走、随时可用。 本书在介绍小程序的基础知识之后,综合应用小程序技术进行项目实践——“上商外卖”小程序,详细介绍了小程序的设计与实现。 由于App开发采用了可视化集成开发工具,而小程序的开发框架与HTML 5应用类似,因此本书涉及的技术,难度都不大。HTML 5技术,泛指HTML 5标准、CSS 3、JavaScript 以及PHP、AJAX、JSON等技术交叉而成的新技术,HTML 5应用就是Web应用,只要会编写网页,就能快速入门小程序开发。 1.3移动商务创意实践 1.3.1“互联网+”时代的需求 在经济转型升级和创新驱动发展的背景下,创新创业已经成为时代的主题和国家的战略决策。我国正迎来第四波创新创业浪潮,与前几次相比,这一波创业最大的特点是以“互联网+”为鲜明特征,“互联网+”成为推进“大众创业、万众创新”的重要抓手。 “互联网+”战略为大学生创业带来了难得的机遇,移动商务不但具有创业门槛低、投入成本低、发展前景好等优势,而且作为“互联网+”扶助产业将会获得更多的支持。需要注意的是,创新能力是决定大学生创业成功与否的关键因素。创新是创业的基础,没有创新,创业就会像无源之水,无本之木,没有生机活力; 创业是创新的载体和表现形式,创新能力是大学生成功创业的根本保障。 1.3.2提高创新能力 1. 创新能力 创新能力是一个企业的制胜法宝。世界首富比尔·盖茨在一次演讲中说道,可持续竞争的唯一优势来自超过对手的创新能力。创新能力也称为创造力,是一种产生有价值的新构思、新构想的能力,是成功地完成某种创造性活动所必需的能力。可以看出创新能力具有以下三个要素。 (1) 产生新构思、新构想。通过训练创新思维,提高创新能力,不断产生新构思、新构想,获取创意; 这是创新能力的核心要素。 (2) 成功地完成某种创造性活动。创新能力不只是停留在思维层面,而是重在执行。 (3) 创新活动的成果是有价值的。满足人类需要的程度越大,其价值越大。 因此创新能力可以定义为: 创新能力=创意+执行+价值 人类的文明史,实质上就是创新能力的实践结果。人类学会了驾驭马匹以代替步行,当感觉马车仍不够快时,就幻想着能够像鸟一样自由飞翔,于是就有了汽车,有了飞机。人类在不断创新中得到飞速发展。 2. 创新能力是可以提高的 要产生新构思、新构想,获取创意,提高创新能力就要掌握科学的思维方法,因此训练创新思维,可以有效地提高创新能力。通过训练可以提高思考问题、解决问题的能力和技巧,使人们在思考问题时思路更加清晰,在做出决定时更加恰当; 能够迅速而准确地把握问题的症结,并有效地进行问题的剖析与解决; 能够改变习惯性思维定式,自觉地应用创新思维。 有很多人认为创意需要灵感,我们都承认这一点,但与其将创意寄希望于灵光乍现,不如通过教育、训练与实践活动等有意识的学习和锻炼来训练创新思维获得创意,从而最大限度地激发我们的创造力和生命的潜能。 3. 训练创新思维 1) 灵活运用发散思维与聚合思维 (1) 训练发散思维。在思考问题的时候可以尝试多种假设,不局限于自己熟悉的思维模式。尽可能向各个方向扩展,不受已知或现存的方式、方法、规则和范畴的约束,在这种扩散、辐射、求异式的思考中,求得多种不同的解决方案,衍生出各种不同新的设想、答案或方法。发散思维可以分为多向思维、侧向思维、逆向思维等类型。 ① 全面发散进行多向思维的能力。全面发散,使思维具有广阔性和深刻性的品质。例如,尽可能多地列举同一商品的不同使用价值,从而认识到同一商品的使用价值是多样的、发展的。 ② 变换角度进行侧向思维的能力。变换角度,养成举一反三、触类旁通、随机应变的思维习惯。例如,列举商品的用途时,商品既可以满足人们物质生活的需要,也可以满足人们精神文化的需要; 商品既可以满足人们生活的需要,也可以满足人们生产的需要; 商品既可以是有形的,也可以是无形的(如买卖、服务); 既要看到商品具有使用价值,也要看到商品具有交换价值、价值等。 ③ 打破常规进行逆向思维的能力。逆向思维有助于培养思维的独创性和新颖性。例如“商品一定有使用价值,没有使用价值的东西就不是商品”,运用逆向思维思考“有使用价值的东西一定是商品吗?”使用价值虽然是商品的属性,但只是自然属性,不是本质属性。 (2) 训练聚合思维。对发散思维衍生出的众多解决方案进行严格的逻辑论证,找到解决问题的关键、有效的信息对症下药,以达到一击即中的目的。例如,对商品的不同用途进行发散思维,列举食品、棉衣、蔬菜、书籍、交通工具等商品的不同用途,在此基础上归纳、概括,进行聚合思维,认识到商品的有用性,得出“商品能够满足人们某种需要的属性,就是商品的使用价值”的正确结论。 (3) 训练创新思维,创造性地解决问题,要先运用发散思维,再运用聚合思维。发散思维与聚合思维是辩证统一的,这主要体现在以下两个方面。 ① 发散思维与聚合思维既有区别,又有联系,既对立又统一。没有发散思维的广泛收集,多方搜索,聚合思维就没有了加工对象,就无从进行; 反过来,没有聚合思维的认真整理,精心加工,发散思维的结果再多,也不能形成有意义的创新结果,也就成了废料。只有两者协同运作,交替运用,一个创新过程才能圆满完成。 ② 发散思维与聚合思维在思维方向上的互补,以及在思维过程上的互补,是创造性解决问题所必需的。发散思维向四面八方发散,聚合思维向问题的中心聚集; 发散思维是一种求异思维,在广泛的范围内搜索,把各种可能性都设想到,聚合思维是一种求同思维,要聚集各种想法的精华,达到对问题的系统全面地考察,为寻求一种最有实际应用价值的结果而把多种想法理顺、筛选、综合、统一; 在解决问题的早期,发散思维起主要作用,在解决问题的后期,聚合思维则越来越重要。 2) 六顶思考帽 被尊称为“创新思维之父”的爱德华·德·波诺(Edward de Bono)博士开发出一种思维训练模式,或者说是一个全面思考问题的模型——六顶思考帽。很多人开会时都会遇到相似的状况: 会议冗长而极其低效、讨论时争论不休很难达成一致意见、会议议题时常偏离……而六顶思考帽,就是用来帮助我们解决这一问题的思考方法,其目的在于避免思维混乱。按照六顶思考帽的方法,思考者要学会将逻辑与情感、创造与信息等区别开来,一次只戴一顶帽子,一次只用一种方式进行思考。 六顶思考帽的方法用六种颜色的帽子来比喻六种思维方式,如图1.2所示。 图1.2六顶思考帽 由图1.2可知,每一顶思考帽都有不同的含义,具体如下。 (1) 白色思考帽: 白色代表中立而客观,关注的是客观的事实和数据。戴上白色思考帽,客观、全面地收集数据。 (2) 红色思考帽: 红色代表感性、预感、直觉。戴上红色思考帽,直觉、感性地看待问题。 (3) 黄色思考帽: 黄色代表乐观与积极。戴上黄色思考帽,寻找事物的优点及光明面。 (4) 黑色思考帽: 黑色代表冷静、谨慎。戴上黑色思考帽,寻找事物的缺点、隐患,帮助人们控制风险。 (5) 蓝色思考帽: 蓝色代表组织、控制。戴上蓝色思考帽,控制各种思考帽的使用顺序,规划和管理整个思考过程,并负责做出结论。 (6) 绿色思考帽: 绿色代表创新、改变,象征勃勃生机。戴上绿色思考帽,进行创造性思考,寓意创造力和想象力。 六顶思考帽,将会使混乱的思考变得更清晰,使团体中无意义的争论变成集思广益的创造,使每个人变得富有创造性。六顶思考帽已被美、日、英、澳等五十多个国家和地区设为教学课程,同时也被世界许多著名商业组织所采用,作为创造组织力和创造力的通用工具。 3) 头脑风暴法 头脑风暴法是由美国创造学家A.F.奥斯本提出的集体创造性地解决问题的模型。头脑风暴法的基本内容是针对要解决的问题,召开6~12人的会议,与会者按照一定的要求和步骤,在轻松融洽的气氛中展开思考、各抒己见,使创造性思想的火花产生共鸣和撞击,产生大量新创意。为了达到目标,头脑风暴应依照以下原则进行。 (1) 延迟评判。在提出设想阶段,不对任何设想做评价,既不能肯定或者否定某个设想,又不能对某个设想发表评论性的意见。一切评价和判断都要延迟到会议讨论阶段才能进行。 (2) 自由畅谈。参加者不应该受任何条条框框的限制,大胆地展开想象,从不同角度、不同层次、不同方位,尽可能地标新立异,与众不同,提出独创性的想法。 (3) 追求数量,在有限的时间里提出尽可能多的设想。在某种意义上,设想的质量和数量密切相关,产生的设想越多,其中的创造性设想就可能越多。 (4) 取长补短、改进方法。除提出自己的意见外,鼓励参加者对他人已经提出的设想进行补充、改进和综合。 头脑风暴法非常有效。每当一个人提出一个设想,这个人所激发的就不仅是他自己的想象力和创造力,在这个过程中,与会人员的思想也将受到刺激和激荡。头脑风暴法会在每个与会者的头脑中产生震动,并引起一系列连锁反应,这就是这种方法之所以有效的最主要原因。 1.3.3移动商务创意实践的过程 在实施“大众创业、万众创新”国家战略、创新创业已经成为时代主题的背景下,虽然大学生没有足够的资金,难以进入传统的工商业领域,但是可以通过有意识地训练创新思维,不断提高创新能力,通过好的创意进行移动商务创意实践,并参加各种创新创业类竞赛与实践。大学生凭借敏锐的市场嗅觉和新奇的商业创意成功创业的例子并不少见。谷歌公司由斯坦福大学的在校生拉里和佩奇创建,全世界第一家社交网站Facebook由哈佛大学学生扎克伯格创建,中国第一家大型婚恋网站“世纪佳缘”由复旦大学学生龚海燕创建,风靡一时的在线游戏“三国杀”由中国传媒大学学生黄恺和李由开发,以及大家都熟悉的“小黄车”“饿了么”“大疆”都是大学生创业品牌。 究竟如何产生创意呢?世界公认的创意大师詹姆斯·韦伯·扬(James Webb Young,1886—1973)指出,创意的产生其实是有迹可循的,并把它归纳为积聚原材料、研究这些材料、孵化材料、产生创意、对创意进行最后的补充和雕琢五个步骤。那么如何通过本书产生移动商务创意并成功创业呢? 移动商务创意实践的过程如图1.3所示。 图1.3移动商务创意实践 由图1.3可知,移动商务创意实践需要以下六个步骤。 (1) 积累移动应用案例与素材。除了本书开发的移动商务案例与项目之外,书中还引入了墨刀中的大量案例与素材。 (2) 理解、消化案例与素材。总结已有的案例与素材,并进行消化吸收。 (3) 孵化案例与素材。在这个阶段,既要重视有意识的思维活动,也要重视无意识的、创造性的思维; 要从已有的移动商务案例出发,不受已知方式、方法、规则和范畴的约束,在扩散、辐射、求异式的思考中激发创意,发现机会,获得移动商务的新构思、新构想。 (4) 产生创意。经过上述积累与创新思维活动,才能产生创意。 (5) 移动商务创意实践。将创意具体化,通过市场调研分析需求,制定商业计划书,进行移动商务应用的原型设计,进行App开发与小程序开发,进行创业融资等。 (6) 参加创新创业类竞赛与实践,进一步将创意转化为商机。 习题1 一、 多选题 1. 移动创新创业更容易成功的原因有()。 A. 需要宽广的人脉B. 所需的创业资金少 C. 创业门槛低D. 发展前景好 2. 移动应用的类型有()。 A. 小程序B. AppC. Web应用D. 其他 3. 本书引入了大量的移动商务案例,包括()。 A. 墨刀案例B. 应用公园案例 C. 本书开发的项目案例D. 企业公众号案例 4. 本书的实践内容包括()。 A. 移动商务原型设计B. 移动商务App实践 C. 企业公众号实践D. 移动商务小程序实践 二、 判断题 1. 移动创意思维可以通过课程进行训练,在移动商务的案例实践中得到提高。() 2. 创新能力不能通过教育、训练与实践等活动进行提高。() 三、 讨论题 1. 分析移动商务创业的优势。 2. 分析创新思维与创意的重要性。 第2章移动应用原型设计 本章学习目标 熟练掌握墨刀的使用方法。 掌握使用墨刀设计移动原型的方法与技巧。 熟悉墨刀的内置模板。 2.1移动应用原型设计概念 2.1.1原型设计 设计和开发一款移动应用,首先要与用户进行充分的沟通,确定软件的功能以及需求。然而,用户和开发团队的知识领域有很大的差异,用户了解的是业务或者是客户层面的需求,而开发团队懂得的是技术,这导致了双方沟通存在很多问题。无论用户和开发团队进行如何深入细致的沟通,都无法准确全面地表达或定义软件的需求,因此很可能导致已经完成大部分开发工作的移动应用被返工,增加了移动应用开发的时间和成本,而时间和成本在移动开发中最为重要,所以为了避免这种情况发生,提出的解决方案就是移动应用原型设计。 移动应用原型设计的目标就是设计一个移动应用的原型,能够完美地演示移动应用,让用户能够提前体验移动应用、交流设计构想。移动应用原型并不是一个真正意义上的移动应用,只是能够演示移动应用的模型。用户可以对应用原型进行测试或者评定,给出具体的改进意见,进一步细化软件需求。开发团队根据用户的反馈对应用原型进行修改完善,直到用户满意。所以说,移动应用原型设计提供了一种方法,帮助开发团队和用户在产品需求上达成共识,在有效沟通用户需求的基础上,开发出用户满意的移动应用,为其后期的制作和开发以及测试和维护奠定了较好的基础。 2.1.2墨刀的功能与特点 1. 墨刀的功能 使用墨刀,可以快速地制作出可直接在手机上运行的、可交互的高保真原型,使创意得到更直观的呈现。作为一款在线原型设计与协同工具,墨刀支持云端保存、实时预览、一键分享以及多人协作的功能,让产品团队能够快速高效地设计产品原型,完成交互设计。不管是向客户收集产品反馈,向投资人进行应用展示,或是在团队内部协作沟通、文件管理,墨刀都可以大幅提升工作效率,打破沟通壁垒,降低项目风险。 2. 墨刀的特点 (1) 简单易用的原型设计工具。墨刀操作十分简单,通过简单的拖曳和设置,即可把想法或者创意变成一个移动原型。 (2) 可以轻松地搭建全平台设备原型。墨刀支持iPhone、iPad、Android、平板电脑、网络电视、iWatch等多平台设备。 (3) 多种设备完美演示。通过分享链接,墨刀生成的移动应用原型可以在多种设备上演示,并且采用真机设备边框、沉浸感全屏、离线模式等多种演示模式,项目演示效果逼真。这样,开发团队在原型阶段就能够得到产品的反馈,节约开发成本。 (4) 内置丰富的行业案例、设计素材等。墨刀内置了丰富的行业案例和素材,可以激发我们的创意灵感。 (5) 高效的在线团队协同。墨刀支持一键分享给团队成员,团队成员可以共同编辑原型,提升效率,也可以在原型上直接评论,让协同工作更加高效。 墨刀有免费版、个人版和企业版三个版本。其中,免费版功能较少,包括原型设计、原型预览与移动端的展示。免费版限制每一个账户创建的项目不能超过3个。如果想创建3个以上的项目,解决的方法就是删掉一个再建一个,总之账户中的项目不能超过3个。免费版还有一个限制就是每一个项目创建的页面不能超过20个。免费版虽然有诸多的限制,功能也比较简单,但是基本上满足了设计需要。个人版包含免费版所有的功能且没有项目和页面数目限制。企业版包括个人版的所有功能并支持团队协作。 2.1.3使用墨刀 1. 创建项目 墨刀是一款优秀的在线原型设计工具,但是需要联机使用并且官方网站经常更新 本章所有的设计案例、项目均于2020年3月底在墨刀官网上验证实现。墨刀官网的升级,虽然能够引入移动商务的最新发展与技术,但是却带来了使用上的不方便。升级后某些功能入口发生了改变,但是原理、技术都未发生根本改变。。进入墨刀官网(https://modao.cc),可以登录并使用墨刀。需要注意的是,由于墨刀在有些浏览器上不能正常使用,所以推荐使用谷歌浏览器。 使用墨刀之前,需要进行账号注册与登录,如图2.1所示。 图2.1注册与登录页面 图2.1(a)是注册页面,输入姓名、Email地址、密码等信息注册账号; 图2.1(b)是登录页面,如果已经拥有账号,输入登录信息之后,就可以进入墨刀工作区。 进入墨刀工作区后,可以选择已有的项目进行编辑,也可以新建项目,如图2.2所示。 图2.2墨刀工作区 新建项目有两种方式,一种是空白模板,顾名思义,就是什么都没有,需要从头做起; 另一种是从模板中创建项目,应用墨刀里内置的案例模板,快速搭建所需要的应用。新建项目如图2.3所示。 图2.3新建项目 图2.3(a)显示了单击工作区左上角的“新建”时弹出的菜单,此时分为以下两种情况。 (1) 单击“项目”将创建空白项目,在图2.3(b)中输入项目名称等参数便可创建空白项目。 (2) 单击“从模板新建”,将从模板中创建项目,在图2.3(c)中选择合适的模板便可快速搭建自己的项目。 2. 墨刀常用功能模块 要熟练使用墨刀,就要掌握状态、四元标签组以及“新建页面”面板的用法,进行项目的预览与分享,熟悉墨刀的偏好设置。 1) 状态 状态是实现动态特效的基础,在不同的状态下,页面或者组件具有不同的显示效果,如图2.4所示。 图2.4状态 图2.4(a)是状态面板,页面的初始状态是状态1,可以新建、复制状态,当单击“状态”按钮时 将会控制状态面板的显示与隐藏; 图2.4(b)显示了触发状态改变的触摸事件 、鼠标事件 、页面的定时器 事件等; 图2.4(c)是可以通过设置“行为”改变状态,如跳转到其他页面或者切换页面、组件状态等。 2) 四元标签组 在四元标签组中,第一个标签就是内置组件。墨刀提供了数百种内置组件,如图2.5所示。内置组件是墨刀最小的元素,包含界面设计最常使用的组件,用户可以根据自己的需求创建各种各样的界面模块。组件的使用非常简单,只要选择自己需要的组件,按住鼠标左键直接拖动放置在需要的位置即可。组件还可以按照自己的需求放大或者缩小。 有时候墨刀自带的组件并不能完全满足需要,或者需要重复使用某几个组件的组合,这时可以把这些元素组合成“我的组件”,如图2.6所示。 四元标签组的第三个标签是图标,如图2.7所示。墨刀提供了上千种图标,图标的颜色以及大小都是可以调整的。使用图标最典型的例子是制作移动应用里的底部导航栏,可以从四元标签组的“图标”标签页中选择合适的图标拖入底部导航栏,进而实现页面导航的功能。 四元标签组的最后一个标签是母版。母版可以看作是一种特殊的组件,与组件不同的是,母版本身带有一定的功能。母版与组件一样,可以重复利用,其功能也会被重复利用,如图2.8所示。 图2.5内置组件 图2.6我的组件 图2.7图标 图2.8母版 图2.9“新建页面”面板 3) “新建页面”面板 熟练掌握墨刀,还要经常用到“新建页面”面板,这里列出了项目中所有的页面,也可以添加新页面, 如图2.9所示。 在新版的墨刀应用中,在“新建页面”面板的下方增加了“元素”面板,如图2.10所示。当选定了一个页面,“元素”面板上不仅会显示页面上的所有组件,还可以锁定、隐藏页面上的某个组件,如图2.11所示。 4) 项目的预览与分享 掌握了状态、四元标签组以及“新建页面”面板的用法,就可以使用墨刀设计移动应用的原型了。而完成移动应用原型设计之后,即可以进行项目的预览与分享。 图2.10“元素”面板 图2.11锁定、隐藏功能 (1) 单击页面右上角的“运行”按钮,就可以预览移动应用的效果,如图2.12所示。 (2) 单击页面顶部的“分享”按钮,就可以生成移动应用的分享网址与二维码,如图2.13所示。 图2.12项目预览 图2.13项目分享 5) 墨刀的偏好设置 在墨刀的不同版本中,四元标签组与“新建页面”面板在页面中的位置不一样,这将取决于“偏好设置”中的“布局”选项。 (1) 当“布局”设为推荐时,“新建页面”面板在页面的左侧,四元标签组与状态并在一起,处于设计区的右侧,如图2.14所示。 (2) 当“布局”设为怀旧时,四元标签组在页面的左侧,“新建页面”面板在页面的右侧,如图2.15所示。 图2.14推荐布局 图2.15怀旧布局 单击页面右上角的“更多”→“偏好设置”,在弹出的窗口中可以设置不同的布局方式,如图2.16所示。 图2.16偏好设置 2.2快 速 入 门 下面通过四个案例介绍墨刀的使用方法。 2.2.1创建项目 原型设计的所有工作都在一个项目里。可以创建空白项目,也可以从模板中创建项目。 (1) 创建空白项目。单击页面左上角的“新建”→“项目”,如图2.17所示; 在跳转页面中的“空白项目”标签页中输入项目名称,并选择移动设备类型、操作系统与设备型号,单击“创建”按钮创建空白项目,如图2.18所示。 (2) 从模板中创建项目。单击页面左上角的“新建”→“从模板新建”,如图2.17所示; 在跳转页面中的“从模板中创建项目”标签页中选择合适的模板,鼠标悬浮在模板上,单击“使用模板”便可创建项目,如图2.19所示。 经常使用的功能都在四元标签组里,分别是内置组件、我的组件、图标和母版四个标签页,如图2.20所示。经常使用的还有“新建页面”面板,可以新建页面或者添加子页面,如图2.21所示。 图2.17创建项目 图2.18创建“空白项目”