如何用sketch制作精致的APP原型

需要先申明的一点,本文不是一篇sketch的入门教程,如果对sketch一点不熟悉的话,建议先看一遍sketch用户手册。

一年前写过一篇文章:如何用Axure快速制作APP交互原型,相对来说还算比较受欢迎。从文章的标题也能看出两点重要信息:工具是「Axure」,主要特点是「快速」。

Axure作为一个老牌的设计工具,算是产品经理入门必备,而最近几年火起来的一个设计软件——sketch,则异军突起,逐渐成为了互联网从业人员的新宠,不仅仅可以拿来画交互,也是UI设计的利器。所以,用sketch产出的内容有一个很大的特点就是颜值高,这篇文章就尝试讲解一下如何用「sketch」制作「精致」的APP原型,当然只要使用熟练,速度也是足够快的。

Sketch做的非常人性化的一点,就是自带了很多模板,而且用来画交互完全够用,省去了从网上各种非正规渠道找资源的麻烦,如果你是sketch的老用户,而不知道自带模板功能的话,真的是要面壁思过了。

其中,APP相关的模板有两个“iOS用户界面设计”和“Material Design”,顾名思义,分别用来设计ios界面和Android界面。以ios为例,模板中包含了常用的各种控件:状态栏、导航栏、弹窗、键盘等等,当我们需要的时候,直接拿过来用,不仅省事而且非常精致,并且如果我们多去研究并拆解一下官方的这些控件的制作过程,能给我们提供很多设计思路,比如如何用各种形状拼合成想要的图形,如何利用填充和阴影达到想要的视觉效果这部分就不展开讲解了,留给你自己去发现。

知道利用sketch自带的APP界面模板之后,我们首先讨论一下APP原型采用哪个样式比较合适。

在Sketch中插入画板的时候,软件会提供一些常用设备的尺寸供用户选择,我们需要用到的是iPhone6(375×667px),为什么一定要采用iPhone6呢?非常重要的一点,是因为上边提到的sketch自带模板,iOS界面的所有控件大小全部是以iPhone6尺寸为基准的,拿过来可以直接使用。如果采用了plus或se的手机型号尺寸,控件大小和画板大小标准不一致,还得需要人为调整,异常的繁琐。

当我们在同一个画布(或称为页面)下插入多个iPhone6画板时,sketch会自动排列所有的画板,间隔100px。然后经过一番设计,在各个画板上填充相关元素之后,大概就形成了这样一份交互稿,如下图:

看上去,整齐划一、非常美观,所以这种样式比较适合从全局的角度来展示APP所有页面的交互样式,但并不适用于作为交付物,提供给开发和测试同学在实际工作中使用,主要的问题有以下两点:

,标注信息包括了“页面之间的跳转关系”和“相关交互逻辑的说明性文案”。在sketch内,由于位于画板之外的元素无法显示并导出,如上,即以一个iPhone6页面为一个画板,造成画板之外的“箭头”或“文字”就无法派上用场;

,上面也提到了,这种形式比较适合进行全局展现,但在实际项目运作中,会拆分成多个相关的独立功能点,并且每个主要功能点,又要分为正常主干流程和多个异常分支流程,同时对于分支流程来说,不一定需要整个页面做信息呈现,很可能局部模块展示就足够了。

针对第1个问题,其实也有专门用来做标注的sketch插件,比如Notebook,直接用插件做标注虽然方便,但是格式太受限,非常的不灵活,尤其是经常需要修改时候,所以在我试用了两次之后,最终还是放弃了。

否定了上边提到的APP原型样式后,我们又该如何通过其它的样式来解决遇到的一些问题呢?

在sketch中,是以画板或切片为单位进行导出的,所以我们可以根据需要,自由把握一个画板的大小,而不是局限于以一个iPhone6页面为一个画板。比如如果需要全局展示APP整体样式,则可以将所有APP页面放在一个画板中,如果只是讲解某个具体的功能点,则可以只将涉及到的APP页面放在一个画板中。

那每个具体的APP页面该怎么体现呢,很简单,通过一个375×667px 的矩形框来表示一个常规的APP页,或许你已经注意到了,这个尺寸正好是sketch默认的iPhone6画板的大小,采用这个尺寸矩形的好处就是,所有自带的控件仍可以继续无缝的使用。

这样做的另一个好处,APP页面之外可以体现更多的元素,比如表示跳转关系的“箭头”,比如解释性“文字”,比如表示分支流程的“局部模块”

,从而帮助阅读者能快速的知道下面的交互针对哪个具体功能,如图中左上角的标题所示,说明这是与“增加在线客服”相关的需求;

可以对每个具体的页面取一个小标题,从而帮助阅读者快速定位这是哪一个页面

,如图中“1.1 个人中心”、“1.2 在线客服”两个页面标题,同时在需要引用其它相关页面的时候,也可以通过1.1、1.2的序号进行快速定位;

,对于颜色选择恐惧症来说,直接从sketch全局颜色库中选择一个即可,另外注释部分放置的位置,可以在相关页面的右侧,也可以在下侧,具体怎么选择可以根据信息多少等实际情况来考虑;

,比如可以将如图所示的1.1和1.2两个页面编成两个大组,同时对每个大组,再根据“页面”和“注释”两部分分别编组,当然层级可以继续下探,比如“注释”组中可以根据“文字”、“箭头”维度继续分组,具体维度的和粒度,可以根据个人习惯而定;

上边提到过,sketch自带模板中包含了很多常用控件,我们可以直接在自带的模板基础上进行设计,也可以自己创建一个新文件作为模板,然后根据情况,将需要使用到的控件复制过来用。我个人倾向于后一种,因为很多时候不需要这么多,按需提取即可,另外除了直接采用自带控件,自己也可以创建,同时可以灵活的维护多套模板,使用在不同的项目中。

无法采用哪种使用形式,控件的使用中都会涉及到了一个非常重要的sketch功能点,那就是“组件/Symbol”,sketch自带模板中的控件实际上就是组件的形式,它能够帮助我们方便的在多个页面和画板中重复运用某组内容,其实类似于Axure中的母版功能。比如APP端常用的cell控件,可以将常用的几种类型维护成组件,需要使用的时候,直接拖过来用,方便快捷。

除了系统层面的“状态栏”、“导航栏”、“键盘”等组件,针对特定的项目,自己也可以将常用的某个模块创建为组件,比如电商项目中常用的商品模板,可以创建“商品/横排”“商品/竖排”两种形式的组件,从而可以不断的快速复用。

并且有个命名的小技巧可以参考一下,通过符号“/ ”进行名称的层级划分,sketch会自动将“/”符号之前名称相同的组件归为一组,分门别类之后,我们在插入组件的时候就能快速定位,尤其是组件比较多的时候。

在使用“组件”功能的时候,我们会经常遇到一种情况,视觉样式都是一样的,但是文案有不同,比如“按钮”控件,和上边提到的“cell”控件。sketch非常完美的解决了这个问题,当我们插入一个组件后,可以用特定的文字去覆盖原有组件的文字,甚至不透明度、混合形式、阴影都可以自定义。如下图所示,我从同一个组件插入了三个按钮,每个都可以配置不同的文案和不透明度。

综上,我们可以直接复制sketch中自带的控件(以组件形式存在),也可以自己把常用的某些模块创建为组件,这些就组合成了针对某个项目的特定组件库,在画交互的时候直接可以复用,并且还支持文案、不透明度等自定义,效率和美观性都得到了保障。

“组件”功能的核心使用场景就是某些元素经常需要复用在不同地方,字体和图层也如此。在一个项目的交互稿中,使用到的样式种类是有限的,如果对每个元素如果都单独维护,会比较繁琐,sketch中的“文本样式”和“图层样式”功能就完美解决了这个问题,针对文字和图形元素,在“检查器”中选择需要共享的样式,能够快速的将颜色、阴影、不透明度等样式配置套用过来,而不再需要做重复性的样式配置,非常的便捷。

可以根据需要,整理一套自己常用的样式规范,比如”正文常规性文字”,统一采用“微软雅黑,色值#ffffff,字号18pt”的样式,在之前提到的“页面注释说明”,统一采用“微软雅黑,色值#5CD600,字号20pt”.将规范维护成共享的样式文本,在需要的地方直接复用即可,不仅仅提高了效率,并且保证了交互稿统一美观性。

熟练使用“组件”和“文本样式”,不仅仅是在创建的时候能提高效率,尤其是在涉及修改时,你会发现只要修改一处,全局同步调整完成,那种快速带来的痛快感更加明显。当然效率的提升是一方面,通过不断复用标准精致的控件,采用统一规范的文本样式,也保障了交互稿整体的美观性。

原型设计的一些思路说的差不多了,那不同项目以及不同版本的原型该怎么维护比较合适,将原型同步给团队成员的方式有哪些呢?

需要注意的一点是,上边提到的“组件”和“文本样式”,它们均保存在某一文件中,并不能在不同文件中共享,并且这两个东西是跟项目有比较大的相关性,所以我比较倾向于一个项目维护一个sketch文件,比如“某某应用APP端原型”文件。

以一个页面(或称为画布)呈现一个版本的原型内容,然后在某个页面/版本内,以一个画板呈现一个功能点模块的原型内容。当然,主体思路是这样的,特殊情况也可以做灵活的调整,比如对应用的第一个版本来说,原型内容会非常多,也可以分成多个页面来呈现。

这样做,不仅仅是“组件”和“文本样式”可以在一个项目内复用,其它相关的元素,比如某个页面,或者某个画板,都可以更加方便的复用。

然后简单说一下导出,对于交互稿来说,基本上以画板为单位进行导出就够了,至于是图片格式,还是PDF等其它格式,以团队内其他成员普遍接受的形式既可。当然也可以用插件,以HTML的格式进行导出,我常用的就是这一种,好处就是以网页形式打开,在左侧可以看到所有画板的列表,也就是某个版本内所有的功能点信息,相互切换也比较方便。

最后推荐一个sketch插件,sketch-measure 下载地址:这块插件功能非常强大,导出只是其中一个(我就是用这块插件来导出html格式原型),更多功能可以自己去探索。

以上,基本就是用sketch设计APP原型的整体思路,产出物从视觉上看会非常精致,完全达到了高保真原型的水准,使用熟练的话,制作效率也非常高。在同样甚至更短的时间内,如果能设计出更精致的原型,何乐而不为呢?

当然,设计思路不仅仅适用APP端,也同样适用于web端项目,只需要将页面大小和相关控件更换一下就可以。

本文由人人都是产品经理专栏作家 @刘鹏(微信公众号:pengideas ) 原创发布于人人都是产品经理 。未经许可,禁止转载。

都是原型设计工具,sketch 更适合 UI 出高保真,但不太适合 PM 做原型设计,使用 sketch 的时候你会很容易陷入icon 的尺寸、圆角直角的纠结中而忽略了产品设计的本质,每个产品都有特点,要用得合适才最重要。

只要做得好,用什么软件只是个工具而已,产品做得好并不是取决于哪个软件用得6啊

用Sketch 做原型图还是不太建议,如果要把交互和UI设计出来的话,用Sketch当然是最方便的

为什么游戏等级会设置得很高,动辄100级,而其他的产品最高等级就比较低,比如网易云,最高10级。这是因为什么呢?

【中秋福利】又是一年中秋节,今年中秋,有没有奇特的新鲜玩法?(获奖名单公布)

人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

下载量第一的银行类 APP 是如何做安全的?

原标题:下载量第一的银行类 APP 是如何做安全的? 雷锋网编者按:近年来,金融机构已然成为网络攻击

雷锋网编者按:近年来,金融机构已然成为网络攻击的重灾区,如堪比好莱坞大戏的“SWIFT惊天大劫案”、银行行长出售征信查询账号的“521侵犯公民个人信息案”等。在12月1日由中治研和梆梆安全承办的金融级应用安全研讨会中,来自中国建设银行广州开发中心的廖敏飞,介绍了建行在移动安全建设方面的情况。雷锋网在不改变原意的基础上做了部分编辑,与读者共飨。

演讲分为四个部分,互联网+金融级移动安全的监管治理;智能的总控架构;应用实践;创新展望。

在移动安全中,根据中国支付清算协会的报告,现在移动金融用户最关心的问题是安全的隐患,包括电信诈骗,二维码被偷,还有信息泄漏等,我们所做的移动安全的事情都是基于《中国金融业信息技术“十三五”发展规划》,里面提出安全保障体系更加完善是我们的重点发展的目标。

其实大家都已经有一个感受,就是外面的用户为什么会用到金融级的移动安全,是因为银行代表了一个比较安全的形象,银行的安全责任是非常重大的,如果有一点点的闪失就会导致客户出现很大的资金还有信息的安全问题。

这边是目标,我们是银行,所以第一点肯定是保障客户的资金安全,还有要保护客户的信息安全,还有保障我们系统的安全运行。

其中有一些技术子目标和安全子目标要说一下,技术子目标比如说国产化,这个我相信大家也是折腾了好多年了;还有利用生物技术、人工智能进行安全防控,安全子目标例如全生命周期的数据保护,抵御网络客户端的攻击,还有我们要精确地识别身份,都是需要做到的一个子目标。

建行在银行类APP的活跃客户量是排名第一的,活跃量超4000万,我们服务领域率也是占第一位,是10.7。

第二个说一下移动安全的智能总控架构,这是总体的图,根据事前防御、事中控制和事后防控,主要的目标是安全与体验并重,这两个都要。

要简化事前,智慧事中和强化事后,这就是总体的内容,这是金融级移动端安全的防护体系。

基于软件生命周期的整个流程,包括从数据分析到开发实施,到投产检测,到安全运营,这里面的每一个环节都会涉及。例如现在看到的加壳、漏洞扫描、安全检测等,其实都是分布在整个生命周期的每一个环节里面。

智能总控架构分为三大模块,有一个终端的中央智能安全云服务作为中央大脑,有各个安全组件提供服务,有后台进行监控,通过这些来进行安全移动端的监控。

特别说明一下,现在建行实施了新一代以后,所有服务都是以组件化提供,会有一个安全的组件专门提供给全渠道所有的系统去进行调用,提供服务和保护,所有移动安全里面的所有的APP,都是通过这个组件来进行统一的调度和服务的。

通过大数据分析,人工智能加上这些因素,是一个统一的平台,进行处理以后,会反馈到相应的交易系统。

下面我就根据上面描述的一些目标、架构,说一下金融级应用安全的应用实践,这些年来究竟做了什么样的工作。

我们希望做到的目标是企业级的安全认证,就是刚才说的组件化,然后智慧认证,是大数据和人工智能的,一定是智慧的,客户不需要自己去选择,希望客户能够自动地感受到我们的安全服务,而且一定是便捷、安全的体验。

这里面总共有三个核心环节,一个是身份识别的认证,一个是证书签名,还有一个是监测管理,这几个要素,因为大家都是专家了,估计大家应该都知道我说的这些技术的核心环节是什么意思。

这里面我跟大家说一下在今年年底华为的发布会上推出了手机盾,这个产品填补了什么东西呢,就是移动端原来在签名这块是比较薄弱的,大家都知道,用一些短信的方式来保证安全,如果根据签名法是需要有更强的一些认证手段,但是客户体验一直以来都是很严重的问题,客户不想带更多的硬件。

比如带一个手机,其它东西丢到家里面不用了,所以我们就创新地推出了手机盾,这个SE的芯片全部植入到华为手机里面,我们直接调用,客户只需要带一台手机就能够完成签名,它是无感的,对客户来说基本上就是相当于普通的一些互联网上的操作,就完事了,但是安全级别就达到了跟以前的盾一样的安全级别。

这里面我挑了重点的跟大家说一下,全流程防控里面有智慧认证,生物技术识别,手机盾和大数据检测平台。

智慧认证是什么意思呢,就是说其实这个东西在好多年前已经开始了,通过学习、挖掘数据以后,希望能够自动地分析客户的安全等级,对客户进行一个标签,然后对客户的行为、数据进行分析。

导入引擎以后,希望能够智能地判别它是否安全。所以在这个基础之上,客户有可能在某一些环节里面,作为一个安全的客户是什么都不需要输入就能够做一些交易。但是在我们认为他有问题的情况下,会对个客户有安全的架构措施,甚至我们会阻断交易,让人工去介入,进行核实和处理,这就是我们智慧认证核心的一个目标。

这套系统其实一直在完善,它是一个全流程的过程,有技术参与、有业务参与,各平台全部参与以后才能达到目标,当然这还需要进一步地完善,但一直都是向这个目标去靠近。

在事前防控方面我们有手机盾和生物特征识别,生物特征这方面是这样的,我们统一个生物技术的组件平台,会把所有的生物技术都融入到一个平台里面去,是企业级的,全行的全部的生物技术都是到这个平台,现在有声纹、虹膜、指纹、人脸,还有正在做的一些击键行为,都是生物识别技术的其中一环。

有一个好处就是从单模态可以变成多模态。举个例子,我可以通过人脸和虹膜的双模态来进行认证,这有什么好处呢,因为人脸距离远也可以识别,但是它的精度可能有问题;虹膜要求距离短才能识别,但它的精度很高,如果这两者结合起来,利用两个认证的各自的好处,就可以提升识别率。

与此同时,所有的算法都是可插拔式的,把它做到同一个平台里面去,现在可以把很多的生物技术算法放在一个平台里面进行处理。

我们做了一个调研,超过70%的用户是接受生物技术进行移动身份识别,支付身份识别和加密认证的,它有安全、便捷、灵活的这几个优点,但建行认为生物技术由于它存在识别率的问题,算法有一些天然的问题,所以把它作为一个辅助安全手段,不是一个主手段,就必须得结合一些主手段来进行同时使用,我们才能使用这个生物技术的识别,或者再加上一些风控的措施。

这里面我给大家截屏的这都是我们已经上线的一些指纹、声纹,还有人脸识别,都是在移动端,手机银行和各种各样的移动 APP 里面都已经开始使用了。这是我们所推的刚才我说的手机盾,这个手机盾的概念将来会扩展到很大的一个方面,它不光是一个手机上的问题,还有SE安全芯片,都是将来能够使用的一个产品。

这里提一下移动安全的监测平台,这也是一个独立的平台,这个平台里面呢,把移动里面所有的数据、行为,包括各种各样的数据都放到这个平台里面去,然后进行一个学习还有分析、建模。这个平台里面充分利用了大数据里面很多的技术,包括一些机器学习,包括实时分析,包括各种各样的可视化的技术这些我们都会用到。

再提一点,这个所谓的移动监测平台并不是意味着我们只处理手机,实际上这个平台是可以马上拓展的,在做的过程之中我们已经预留了可穿戴设备还有物联网,还有其它的各种各样能够采集的地方我们都已经预留了,通过这些所谓的泛指的移动端,把这些数据拿到我们的云里面去以后,就可以进行一个威胁识别监测,各种各样的智能风控的调节,还有攻击的一些潜在工具的预警这些工作。

大家看看这个图,就是现在正在使用的监测平台里面其中一个页,可以对移动客户端的安全,客户的安全,客户的交易安全进行一个监控,这个平台里面的数据是全行全渠道所有的移动APP和刚才我说的将来互联网和设备全部的数据。

刚才说了一些安全上实践的东西,下面想跟大家分享一下在金融级应用安全创新的展望,我们未来会构建以公有云共享安全服务生态,最主要的观念就是共享,希望这些已经成熟的或者正在做的技术,能够共享给第三方,嵌入到各个第三方的平台、渠道,整合各种各样的安全,这些技术上的能力,整合起来,形成一个统一的共享服务。

希望将来身份认证是人工智能化,认证方式应该是无感的,希望客户不需要携带任何东西,不需要按任何按钮,不需要做任何动作就完成了认证,如果客户不是我们所认为的安全客户,会自动进行处理,这是最希望达到的结果。

我们也希望安全系统是人工智能化的,或者所有的东西都是智慧、智能、自动化的。

行长向我们提出的一个要求,就是安全与体验并重,不能为了保安全就把体验搞差了,不能把客户赶跑了,刚才提到了我们的工作的目标就是无感,包括不要携带,不要影响客户。包括刚才我说的人工智能化,其实这些东西都不是为了使用这些工具,是为了达到最后的目标,让客户感到安全的同时,一定要超简操作,一定要便捷交易。