手机app界面模板-如何用sketch制作精致的APP原型

手机界面app制作步骤:

1下载一个app制作的软件

2登入主界面后>点击左侧的>应用管理>再点击右上角的>马上制作您的APP.选择程序启动图片,可以选择系统自带的图片(这个启动图片可以一个半个月到一个月更新一次),也可以自定义图片,上传自己PS的个性图片,点击+号位置>上传界面>选择自己准备好的图片>打开

上传进去后,调整成合适大小的图片,点击保存即可。

1. sketch自带模板

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

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

2. APP原型样式

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

2.1 待选样式

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

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

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

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

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

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

2.2 采用样式

否定了上边提到的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两个页面编成两个大组,同时对每个大组,再根据“页面”和“注释”两部分分别编组,当然层级可以继续下探,比如“注释”组中可以根据“文字”、“箭头”维度继续分组,具体维度的和粒度,可以根据个人习惯而定;

3. 控件使用技巧

讲完了原型样式,下面说一下控件的使用技巧,主要有组件和文本样式两部分

3.1 组件

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

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

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

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

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

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

3.2 文本样式

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

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

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

4. 原型文件维护和导出

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

4.1 原型文件维护

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

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

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

4.2 导出和共享

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

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

一般设计一个app的ui需要多少钱?

设计一个app的ui需要多少钱

如今,不少企业都想拥有属于自己企业或产品的

手机APP

,但其中最困扰企业主的问题就是:开发一款手机APP到底需要多少钱?

简单点来说,要视手机APP的需求及质量而言,价位一般在几千到十几万左右,更高端的价格更高。

今天,我们就来详细分析一下这个问题,请继续往下看吧。

一、APP开发款式分为固定款和定制款,两者的价格均不相同

固定款:是指直接套用已有的、现成的APP固定模板,报价是固定的,所需要的功能也是固定的,缺点就是客户拿不到

源代码

,也不能根据企业需求进行定制,由于源代码是封装的,如果企业以后想进行功能升级或系统维护的话,也不能够实现,只能重新开发一个新的软件。

固定款的APP开发时间短,约2~3日的时间即可完成,费用大约在几千到几万之间。

定制款:定制款是指APP的功能全部重新开发,过程比较繁琐,需要美工、策划、APP开发(前台/客户端/手机端)、后台

程序员

等工种协同完成,大型的、功能复杂的APP甚至需要数十人的团队。

由于APP的功能和设计都是定制的,因此价格会高些。定制款的开发时间与开发价格是成正比的,开发时间长,大约在两三个月甚至不定的周期里才能完成,而费用大概在几万甚至十几万左右。

因此,想要知道开发一款手机APP需要花费多少钱,企业主首先必须把APP的详细需求和功能告知APP开发公司,开发公司才能报出一个合理的价格。

二、手机APP平台不同,制作成本也不一样

现在市面上流行的手机APP制作平台主要有两种一般包括两种系统:

安卓系统

(Android)和苹果系统(IOS)。

一般来说,制作苹果系统的手机APP软件费用要比安卓平台的贵一些,因为

苹果公司

对苹果平台的封闭性和手机APP开发语言Objective-C的难度,都让APP开发者加大了苹果系统手机APP开发的难度。

三、APP制作成本包含参与人员的工资

通常情况下,开发一款APP需要

产品经理

、客户端工程师、

后端工程师

和UI设计师各一名,这已经是制作手机APP应用软件比较精简的配置了,所以这些参与人员的工资也是包含在APP制作成本当中的。这些工作人员的月薪加起来可能都会超过4、5万元。

四、APP开发公司的所在地

需要注意的是,同样实力的APP开发公司,在不同的城市也会导致APP的成本费用高一些

视觉设计(APPUI)规范文档怎么写?

在创业公司工作的这几年中,很多工作都要涉及到视觉设计,但一般公司不会那么细,在我脑海中分为三种:

1.平面设计师:限于2d广告设计,比如名片、海报、宣传画册、单页等等,做出来的UI可执行性很低,很多和原生系统相斥,工程师会很头疼。无规范可言。

2.UI设计师:限于软件UI的设计,一般的工程师拿到设计文件执行起来没有很大难度,但是做出来的平面没有创意,从技术上来看一般,想要让人眼前一亮或是加上营销的想法很难。无规范可言。

3.视觉设计师:有很好的审美观念,有平面设计大作,针对不同场所,不同功能的设计有自己独特的见解与经验;有3D设计经验,一般都有家居、建筑设计经验;对于不同系统的软件UI与UE都有研究,并针对不同功能的应用规划其功能流程让UI的不仅美观并且易于上手。对于每一个公司或项目群都有其规范文档。

然而我就遇到过第一种,请不起第二种和第三种,平面压力很大导致辞职的较多,交接工作时我是来一个又要和他重新说一遍,一直觉得应该出个文档,看完之后能够马上上手的那种,现在才知道原来是叫做视觉设计规范文档

注明使用版本、设计操作系统、与开发时要说明的

1.指导分工协作

2.避免重复工作

3.视觉统一,形象加分

4.让思路更加清晰,工作更加高效

视觉设计师、平面设计师、交互设计师、产品经理、程序员、市场运营人员、前端开发、软件测试

色调:确认主题色、组件色

字号:根据实际用途与场景适配,以实际效果良好为准,确定一个适合值即可。

通用组件样式:将整个UI设计中能够通用的组件统一风格,比如:对话框,提示框,确认信息框等

不同状态下组件样式:不同状态下的组件样式一般为相同的,针对使用场景以实际效果为准

间距:框架中的间距、元素与元素之间的间距

图片规范:不同页面、位置、图片的尺寸、颜色等等参数要求

不同适用版本:平板、手机、电脑等不同版本

整体框架修饰:将整体框架固定,作为模板往里填,有利于掌控整体风格

不同级别子页面风格:不同子界面的设计可以完全放给下个设计师,有需要也可以进行限制

第一步确定清晰的流程与思路

第二步:

适配尺寸:android、ios不同系统、不同设备_表格或结构图表现

可参考_ndroid尺寸等规范参考

要注意的是:

anrdoid要切图,将图标和图片元素切为hdpi、xhdpi、xxhdpi三套,放入三个文件夹中打包

ios要切图,将图标和图片元素切为@2x,@3x两套,放入两个文件夹中打包

第三步:

确认主题色与元素色

在appstyle系统统一默认配色中设置为主题色

在其他元素比如:分割线颜色、卡片阴影颜色深度、重要颜色文字深度等等

第四步:

文字

苹果常用字体点这里!

不同地方、用途中文字的字体、字号

第五步:

图标

统一的尺寸,特殊用途的注明、不同状态的请附加

第六步:

按钮

按钮的样式与不同状态的样式、尺寸

悬浮按钮56dp,普通按钮48dp

第七步:

公共控件

比如对话框

第八步:

模块

确定某个模块的风格

第九步:

布局

确定大致布局风格

一次性不能将规范全都覆盖到位,可以不断的添加并注明添加人和时间,经过设计部审核才能生效发布。

如何用UI设计软件做app页面

第一点:了解你的目标客户群的心态

1、做微任务的目标客户群(如随时随地看看新闻,听听歌,看看电影,聊聊八卦之类):

这类的解决方案是设计的app最好是小而准,不要大而全。越全的功能应用,只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群:比如找地图,看天气,查数据等。

这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群,用来打发消磨时间的:无需求,漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西,帮助客户来打发消磨时光。

第二点:APP原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具:移动APP原型设计神器POP、axure、Foreui等

第三点:APP视觉设计与设计要点

(1)大概设计板块有APP启动页面设计,APP界面设计的尺寸规范,app图标设计等

一般来说,手机屏幕是从上往下布局的,重要的信息会放在上方。但是在操作上,大部分人都是单手拿手机,常用的操作,要放在界面的下方。

另外还有一个原则,最小的触摸单位,一般是44个像素。如果再小,你的拇指难以触碰,或者容易引发误操作。同时,也不要让界面太拥挤。

所以,设计师必须用减法设计,这个过程需要花时间思考、简化元素。

你必须记住:(1)隐藏设计或者减法设计(2)分区或分类(3)帮用户做决策(4)提高交互创新设计(5)让人有爽快感和新奇感(6)在设计中浸入情感,把握用户的心理。(谈谈如何进行产品设计以及产品情感化设计)

一位大师这样说过“真正的简约设计是:作品必须不断的被简化,一改再改,直到设计最终成形。”

2014年APP设计风格趋向扁平化和卡片化。卡片,扁平化都会是移动app设计的趋势!认为卡片设计确实同时兼具了“拟物”和“极简”2种优势!

第四点:APP界面设计流程

(1).设计APP界面时,学会从优秀APP界面设计作品中寻求灵感,以前的艺术大师,用少量的资源做了大量的设计。

(2).放下工作,休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作,带着全新的眼光工作,比长时间冥思苦想更有

(3).并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存,对比两个版式就能很快分清孰好孰坏。

(4).由于实物展示的相对比例至关重要,所以要及早在不同的目标设备上测试。

(5).整个设计过程中不断问自己“真的需要吗?”。支撑项目时候,找一些讨巧的办法,例如,添加一些有趣的元素、样式会这样会很容易也会很吸引人,

但必须始终注意剔除不必要的元素,不断精简。甩掉你费尽心血的部分总是难以割舍,但修改过程必须挑剔。

第五点:APP界面设计测试与预览修正

设计完成之后,我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具:快速在移动终端上预览APP界面设计效果图的方法最后:好的APP界面设计作品必然是要经过不断升级、重复迭代的。一般用axure把appui/ue原型完成了,就交给设计和前端完成了高保真了,具体什么软件,着实不知道。