APP首页设计思路总结
最近我服务于某品牌CRM项目,做一个健康类APP,真的挺兴奋的。目前此APP 1.1版本已上线,从平台策略到最终测试上线,中间也是充满坎坷和痛苦,抉择与妥协呀。2.0版本已在规划中。由于功能和互动体验进一步完善,此版本增加了首页,就想写写对APP首页设计的一些思考和总结。
APP首页和网站首页一样,需要告知用户“我”(APP)是谁,“我”(APP)能为“你”(用户)提供什么服务、内容、产品...“你”(用户)能够通过“我”(APP)提供的服务、内容达到什么样的目的。不同APP类型,首页设计也是因平台而异的。比如内容资讯类的APP,多数在首页采用无限加载的形式,通过个性化的内容推荐,吸引用户深度阅读、评论互动、分享转发...总之,要增加用户停留时间;高频使用的工具类APP,首页大多就是主要功能界面或突出功能Action,简单直接,用完即走...
今天,我们从首页目的的角度,总结APP首页的设计思路。
首页是用户消费内容最主要的场景。典型的方式即在首页进行瀑布流设计,无限加载内容。比如时尚电商APP、内容类APP以及Twitter、Facebook和pinterest等依赖Feeds的社交类APP,都会选择这种设计思路。这类首页要考量产品运营的能力,若要考虑内容的个性化推送,规则算法可又是一“坑”。
导流型的首页,一般提供频道、品类、搜索等入口,将用户尽快引入二级页面。也就是说,首页不再是消费内容的主场景,而是更多起到导流作用。比如电商类产品(天猫、京东)、旅行产品(携程、去哪儿)等。
首页即功能/体验界面,用户在进入首页即进行功能操作或深度互动。第三种与第一种消费内容比较相似,但第三种类型的设计大多集中在工具型、交通类或游戏类产品。
暂时想到这么多,欢迎补充。
思来想去,我们的APP是工具及游戏类的结合,核心栏目中都有用户关心且和自己息息相关的数据,如果散落在各个栏目中,层级较深,也势必会增加用户操作成本,因此想将这些信息更扁平化的集中呈现。初步考虑,会将APP首页作为集合页,并做个性化体验设计,露出用户最为关心的数据信息,并向一级/底级页面导流,同时在页面底部做官方内容的推荐。
还是要谨记,平台产品的规划,要结合品牌商业目标、产品类型、用户需求综合考量。
参考文章:
<从运营角度来看首页设计>
移动端产品设计的难点在于在很小的屏幕上展示所有的业务。屏幕限制和移动端的客户碎片化阅读的习惯和高流失率。对于业务复杂的App产品设计难度更高。电商产品就是典型的复杂业务产品之一,是要展示内容最多、最难做的一类App。
电商APP首页设计结构
电子商务网站的首页是网站的形象页面,一个网站能否吸引浏览者留在该站中漫游,全凭首页设计效果的好坏。所以,首页设计对于任何网站都是至关重要的。
首页从根本上说,就是全站内容的目录,也是一个索引。一般的电商app都有页头、页中和页尾这3 个设计区:
l 页头: 包括网站名称、搜索组件、焦点广告、导航等版块。
页头首先要体现网站主题。用企业名称、标语、徽号或图像概括地反映企业形象、经营理念和服务定位。搜索、导航提供了对关键页面的浏览链接,通过图标和文字表明产品其他页面载有的主要信息;用户能够在最短时间、最便捷的操作迅速地到达他们所需信息的其他页面中。
l 页中: 包括公告、最新活动、个性化产品推荐、友情链接等版块。
在首页上公告信息,到达率非常高。同时,产品中在进行的各种活动信息,也是吸引用户停留并购买的重要手段。随着互联网产品设逐步创新,数字化,原来千人一面的首页分类产品列表由简单罗列,变成了根据用户喜好和行为习惯进行个性化的商品推荐,产品变得更了解用户也更能触发用户购买行业发生了。
l 页尾: 包括版权、联络方式、计数器等版块。
版权的常见做法是在首页底部标示简短的声明,再用链接附带一个有详细使用条款的说明页面,既避免首页的杂乱又把重要内容说清楚了。页面底部的联系方式,方便用户与产品相关人员取得联系,让产品所属企业获得用户反馈。
页尾的内容在web端界面设计中是不可缺少的区域,但在移动端首页基本都被移到了”设置”中进行展示,这是由于移动端界面空间实在太少,而且移动端多以手式向上不断滑动查看新内容,造成页尾信息如果放在页面尾端查看十分不方便。
首页设计组件介绍
一、搜索栏
大多数用户发生购买行为有明确的目的性。我知道我想要买什么,所以我需要快速的搜到商品。因此App把最显眼的位置留给搜索栏。
一个完整的搜索组件设计应该由三个阶段组成:
1.找到搜索框
2.录入关键词
3.搜索结果展示
搜索框的设计需要注意:
电商App的搜索框通常放在界面的最上面,明显、惹眼,用户可以直接进入信息录入阶段。
电商App的首页搜索框,即使用户需要查找的内容属于不同类别,在设计上也最好给用户最简单的全站内容搜索组件。
搜索框的设计风格应该和整体产品风格保持一致
信息录入的设计需要注意:
提供多种信息录入方式,最常见的文字录入当然还是主流,除此之外最好可以提供语音、图片录入搜索等方式。
除了多样录入方式,还应配套提供信息录入提醒设计,如:用户历史搜索记录、搜索关键词热榜、录入关键词时联想响应
搜索结果的设计需要注意:
搜索结果设计重点在于展示不同类型和级别的内容。例如在淘宝搜索账单,结果包括账单相关信息,店铺和资讯等,不同独立应用加图标展示。不同内容类别以tab切换的形式展示。
搜索结果过多,可以加检索组件帮助用户在搜索结果中进行二次查找,减少花时间翻页或滑动查询。另外搜索结果为零的时的空页面,给用户设计合适的说明界面。
二、导航
电商App中,必不可少的两个导航:
l产品主导航
l商品分类导航
产品主导航
电商App中的主导航设计为用户提供了跳转相对独立的信息内容的路径。例如:
淘宝的主导航项:淘首页、逛逛、消息、购物车、我的淘宝
京东的主导航项:首页、分类、发现、购物车、我的
发现、消息、购物车、我的这些内容之间没有很强的关联,但又是用户在电商平台购物过程中必不可少要查看的信息。
京东、淘宝主导航
同时,从“商品买卖”的业务角度来看,有几个重要的业务信息,无论做任何电商产品,都应该让用户可以快速、方便的查找到是毋庸置疑的。它们是:
1.用户的购物车---购物车模块
2.用户在产品的中的个人信息---我的模块
3.用户买卖过程中的交流信息---消息模块
这些重要的业务信息,多数都放在了电商App的主导航中,即使没有放在主导航,也一定能够在首页的副导航中看到。
商品分类导航
不同类型的电商平台,商品分类导航有一些区别。
如下图中淘宝、京东平台,这两个平台是成熟的综合电商平台,在平台中不但有各类第三方商品销售,而且平台也有自营的品牌和独立应用在平台内销售,如淘宝的天猫商城、饿了么、天猫超市;京东的京东超市、就东到家等。
因此,商品分类导航中的商品分类覆盖十分广泛,尤其商品分类导航的C位往往加入了平台自营的品牌和应用。
垂直类的电商App,商品分类导航中的内容覆盖面窄很多,以商品类型分类引导用户查找商品的特点更明显示。
例如下图中唯品会的商品分类导航,因为唯品会的产品定位在折扣女士用品,所以导航中的分类都集中在服装、鞋帽、箱包等商品类别。
另外,在设计上不像主导航设计需要控制导航项数量,商品分类导航中的分类项数量往往大于5个,因此使用双排、可左右滑动的拖拽导航几乎成为最常见的商品分类导航样式。
三、活动
电商产品中的活动类型很多,最常见的有16种:
1. 打折
2. 秒杀
3. 免单
4. 满减
5. 满送
6. 满返
7. 买送/捆绑
8. 搭售
9. 包邮
10. 好评晒图
11. 试用
12. 抽奖
13. 积分/会员
14. 团购
15. 预售
16. 众筹
在电商App首页,见到最多的是前两种活动:打折、秒杀。而且,首页的活动往往都带有极强的时效性表示,例如在规定的时间才可以享受更加优惠的商品价格。
因此,活动在首页上的设计要向用户传达三个要素,即用户最关心的:
什么时间有活动
有什么活动商品
活动的价格有多优惠。
如下图的“京东秒杀”的设计就非常完整的呈现了这3个要素。当然,并不是所有的活动表达都一定要遵循这一规律,淘抢购的设计就打破了3要素传达的规则,隐去了商品促销价格。
京东秒杀与淘抢购
四、商品推荐
个性化的商品推荐现在在电商App设计中己经十分成熟,推存商业最先被用户接触到的地方就是首页。
用户在电商App或有意、或无意浏览的商品,都会被产品记录下来。再由商品推荐模块根据你最近的浏览记录,推荐一些相关的商品、分享或者店铺。由于每个人关注的商品都不一样。所以产品对于每个人呈现的界面内容也都是不一样的。
例如下图,淘宝通过性别判断,如果产品发现你是男性用户,默认推荐“男神范”;如果判断你是女性用户,则默认推荐“爱逛街”。
淘宝内容推荐
不仅仅如此,用来展示电商平台每个细分商品品类推荐商品的区域,也都引入了个性化商品推荐的设计。
在使用全品类商品展示+优惠价格来打动用户进行消费的同时,现在的电商App往往会再融合情感因素、参考用户的特点、喜好展示各品类中最可能吸引用户的商品,促使用户在产品中“逛街、购物”。
例如京东精选中集合了全品类的商品推荐,以用户行为进行时实的个性化推荐。
案例:主流电商App首页分析
一、淘宝
首页内容:
1.搜索,淘宝把搜索二级页面关键词直接展示在一级搜索位置下方,相当于关键词搜索功能层级上升;
2.banner;
3.8个平台型导航,主要是从淘宝诞生,已经可以独立运营的产品;
4.活动广告位,占据banner大小的位置,平台活动快捷入口;
5.淘宝头条,根据分类滚动推荐产品的文章;
6.二级购物功能区,展示各个频道,如天天特卖,每日好店。
7.商品列表,安卓和苹果展示不一样。安卓每个版块半屏往下铺开。苹果是上方做了分类导航,下方列表。
二、京东
首页内容:
1.搜索;
2.8个banner;
3.活动广告位;
4.平台型功能区,有部分是独立的应用如京东生鲜,还有部分是京东的商品类别频道;
5.京东快报;
6.二级购物频道,放了些主推的购物板块;
7.活动板块,铺开了活动的每个类别;
8.频道推荐,把频道纳入到10个标签里,每个频道都有超过5个二级标签。
三、苏宁易购
首页内容:
1.搜索;
2.8个banner;
3.活动广告位;
4.平台型功能区,这一块主要是频道和分类,分类有16个。
5.苏宁头条;
6.二级购物频道;
7.活动板块,展开了活动的每个类别;
8.频道推荐,展示很多二级频道,分的特别细。
四、小米有品
首页内容:
1.搜索;
2.活动板块,动画展示活动的交互很新颖;
3.平台型功能区, 5个功能频道,销售榜单作为一个推荐功能很实用;
4.banner,共5张;
5.活动板块推荐,分了各活动分类的专场;
6.特色频道推荐,含榜单(把榜单部分商品展示出来)、限时购、年货节热卖、小米众筹、有货集市、品味生活,和功能区呼应,以商品展示为主;
7.类别频道推荐,每个展示一屏,以商品展示为主。
五、网易严选(自营平台)
首页内容:
1.搜索和导航;
2.Banner;严选没有功能区,直接开始推荐商品或者频道。
3.推荐标签的商品,焦点位给了个性化推荐,非常重视更精准得来个性化推荐;
4.VIP会员的服务特权,网易重点突出了这一块;
5.二级功能频道,只放了三个频道;
6.猜你喜欢。
六、网易考拉(垂直综合平台)
首页内容:
1.搜索;
2.banner;
3.品类场馆,像商场的楼层一样,逻辑清晰;
4.活动板块;
5.特色频道推荐,标签下面细分了很多相关的功能频道;
6.用户专享;
7.精选活动,以每个板块商品列表来展示;
8.个性化推荐,以三个角度列表展示。第一个角度是个性化商品,第二个角度度是商品推荐清单类文章;第三个角度是品质商品推荐。
七、拼多多(综合平台)
首页内容:
1.Banner;
2.功能区,所有的平台频道和分类功能都在这里面了,有16个,偏重社交分享,如拼团;
3.活动板块推荐;
4.商品列表展示,分商品和店铺两个角度推荐商品,穿插了一排品牌馆推荐。
一、流量分发
流量是互联网公司一切业务的起点。通过主页做好流量分发,给到各业务线合理的流量,这通常是主页的最重要任务。大部分公司的业务都是多元化的。
二、浏览途径引导
互联网公司海量日活的背面,是特征差异巨大的用户集体。主页的又一个关键方针,是为不同风格不同诉求的用户铺设合理的“逛”的途径。差异化的“逛街”途径,以完成交心的购物过程,完成与爱好高度匹配的沉浸式浏览,大幅提升购买几率。主页,类似于商场布局,是铺设导购途径的源头,承载用户千变万化的“逛街”诉求。
三、打造企业形象
每家企业都有明确的商业定位。比方有的出售高端轻奢精品,有的出售跨境大牌,有的出售超市产品和百货,有的售卖健康生鲜,有的则是小产品集散地。
四、发明直接收益
移动端主页无疑是流量最大的页面,因此也是发明直接营收的黄金方位。比方,广告位、爆品陈列、品牌合作、向某个重要活动引流,这些都是发明直接营收的重要手段。
关于APP首页设计的核心目标是什么,环球青藤小编今天就和您暂时分享到这里了。如果您对网站设计、页面排版、图海报设计中,几何元素运用技巧有哪些像处理方面比较感兴趣,希望分享的这篇文章可以给您的学习或工作提供帮助。如若您还想了解更多关于平面设计的素材及技巧等内容,可以点击本站的其他文章进行学习。
是采用宫格布局设计的,比如什么九宫格、六宫格、四宫格、八宫格等等。如下图:支付宝的首页就是采用了APP宫格设计。
第一部分:APP的首页肯定是APP宫格设计泛滥的地方。也是我们最常见的宫格设计的地方。
比如下面的这些APP界面设计:途牛旅游APP首页设计
为什么大家喜欢采用APP宫格界面设计,或者宫格布局,主要是原因在于,这样的界面设计简单明了、而且也符合APP导航入口等要求。
第二部分常见的APP界面是频道页 或者栏目界面;比如优酷的频道页
第三个地方就是筛选界面:
第四部分:我的页面 或者相关的界面
将入口放在页面的底部,形成标签导航。目前这种导航的设计方式在app设计中非常常见,其优点十分明显,即用户可以非常直接的看到该app的功能结构。而缺点是这些功能并没有非常清晰的主次关系,同时扩展性差。因此目前标签导航建议底部的标签不超过5个,如果超过5个建议使用其他方式。
该类导航与标签导航相似,不同的是中间的导航标签会蕴含更多的操作选项,即该标签中包含了更多的二级导航。以小红书为例,其底部导航就是典型的舵式导航,点击“+”标签会直接唤醒相机并可以导入图片/视频等内容
对于舵式导航里的扩展二级标签,这些二级标签可以形成一种单独的导航- 点聚导航 ,从Bilibili的底部导航可以看出,点击中间的导航会弹出4个二级标签:开直播、拍摄、上传和模板创作。舵式和点聚导航的方式往往适用于产品需要特殊引导或者是凸显核心功能的场景。其缺点是功能之间无主次,扩展性差,不利于后期的功能拓展。
将标签放到界面的上方,就会形成tab标签导航,这种导航适用于类目较多的APP作为二级导航梳理页面逻辑,布局清晰。作为一个二级导航,顶部标签导航应用于多种情境下,可以固定数量,展示有限的几个标签。也可以扩大一定的数量,变成向左滑动展现更多标签,十分灵活,但是因为在手机中左右滑动不如上下滑动方便,因此,个人认为还是不要展开太多标签。以微博和下厨房为例,这两个APP都采用了Tab页导航。
抽屉导航是将菜单隐藏在当前页面后,点击导航入口即可像拉抽屉一样拉出菜单。抽屉导航一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,优点是可以节省页面空间,比较适合于不那么需要频繁切换内容的应用,例如对设置、关于、个人信息等内容的隐藏。以网易云音乐为例,其采用了非常标准的抽屉式导航,目前更多APP会采用抽屉导航的变式,即点击导航入口以后,以向右滑动的方式,整个抽屉页将滑动出现并且占据整个屏幕,例如小红书app的抽屉导航。
一般位于产品顶部,通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层,可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置。但由于是位于屏幕上方,相对隐蔽而且不能结合手势操作,所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。下拉导航还有一种变式,就是下来菜单中展示两级甚至多级,一般在电商产品中比较常见,因为品类和筛选条件众多。
主要功能入口全部聚合在页面,让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作,用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务,从而选择自己所需要的那个服务。这种导航于一些提供的服务较多或者类目较多的APP,例如支付宝、淘宝等。
宫格导航的应用很广泛,也产生了很多变种,以百度贴吧为例,其在应用宫格导航的时候,将功能进行了分类并且用标题加以区分,使用户更容易从众多功能中找到需要使用的功能。
还有一种变式,是可滑动的宫格,这种设计适合于宫格内容较多,但是不想占用太多屏幕空间,于是用户可以左右滑动来查看功能内容。以小米app为例,由于功能较多,但是不希望占用较多屏幕面积,因此导航只放了两行功能,但是用户可以向右滑动找到更多的功能。在宫格区域下方采用了指示器来告知客户滑动的范围。
通过列表指示类目,在右侧显示箭头表示有二级内容,列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。
同样可以对列表进行分类产生变式,这样逻辑会更清晰,不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。
每一个页面就代表一个导航入口,这就是轮播导航,适用于比较简单或者结构比较扁平的APP。轮播导航能够最大程度的保证应用的页面简洁性,操作也是最方便的,只需要手指左右滑动。缺点也很明显:承载入口的数量有限,超过10个可能就多了。这种导航常见于查看图片,也经常与其他导航模式结合,作为banner广告呈现。
看到这种提问,内心一般是抗拒的,因为产品设计是一个系统工程,单独拧出来其中一个流程来讲,都是割裂的,但在实际中又必须割裂出来,因为只有割裂出每个流程,把每个流程都想通想透,才能组成完整的产品设计的知识体系。那怎么来权衡整体和局部,系统和部件,也是一门大学问。
1.明确页面设计在整个产品设计中的位置
互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期,所以前期必须去和产品经理或者用研人员反复沟通,明确产品定位、明确需求、了解业务流程,然后再梳理信息架构、产品的导航形式、任务流程和页面流。不管产品经理还是交互或UI,都要去了解这些,并反复沟通,这是基础,所有的设计脱离了用户和需求都是耍流氓。
其实这也是我在以前文章中反复强调的,只要你从事的是产品设计的工作(目前涉及到的分工主要有产品经理、交互设计师、视觉设计师),都要从产品设计整体去思考问题,产品经理不要只想着需求,交互也不能只想着体验,视觉也不能仅仅思考美不美观,这种眼界的提升,会直接影响到设计方案。
如果你已经建立了整个产品设计的知识体系,这只是第一步,下一步你还有考虑产品运营,考虑商务、考虑资本,这些都是需要设计师去了解的。周末和朋友聊天的时候,他打了个很好的比喻,把公司比作一个人,那么不同的职位就相当于每个人的感官和外在,产品相当于一个人的大脑,视觉相当于一个人的衣品,商务相当于一个人的沟通能力...。你如果只了解人的一个部分,就永远没办法理解这个人。
我目前就在深耕产品设计的基础上,在学习产品运营的知识。
2.确定页面目的和目标
明确了页面设计的上游的流程,接下来要做的,是确定页面的目的和目标。
目的和目标是两个概念,目的是你为什么要设计这个页面,目标是设计这个页面想要达成什么。例如,电商的商品详情页目的是介绍商品、帮助用户进行购买决策,目标就是提高用户下单的转化率。
作为同样的商品详情页面,不同的目的和目标,直接影响到设计形式。例如京东是自营商品,用户一次性购买的越多,其客单价会更高、运营成本也会更低,所以它的商品详情页的主要目标是提高加入购物车的转化率。而淘宝作为一个平台,单独购买一件商品和一次性购买多件商品都很重要,所以它的加入购物车和立即购买的优先级是同等重要的。
记住:明确页面目的和目标,这是你设计一个页面的指导思想。
3.确定页面的来源和去处
任何单独的页面都只是用户完成某个任务的其中一环,这个页面从哪来?能去哪?影响着页面的导航设计、以及工具栏上按钮的摆放。
为了延续性,继续拿淘宝详情页来举例。
返回页面按照设计规范,基本会放在标题栏的左侧,也有一些小众APP考虑到单手操作放在页面底部,其它如分享和更多一般会放在标题栏的右侧。另外针对当前页面的一些操作会放在工具栏上,例如淘宝的客服、店铺、收藏、加入购物车、立即购买;例如资讯类APP的留言、点赞、收藏等。
在考虑页面的去处的时候,一般有二级页面的形式和临时框的形式,临时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态临时框,而没有采用二级页面,这能减少用户在完成一个任务时的跳转步骤,提高转化率。
4.确定页面内容和优先级
经过前面三个步骤,页面框架基本成型,现在就要往这个框架填充内容。根据信息架构设计,基本会确定这个页面需要包含哪些内容(关于信息架构设计,可以参考 《90%的设计师都不知道的信息架构知识》 )。
其次就要确定页面信息的优先级,确定优先级的判定依据就是第一步所说的当前页面的目的和目标,以及在做需求分析的时候,公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点:
①用对比的手法,明确信息层级,优先级越高信息表现越突出。例如上图格和销量字段的对比;
②优先级最高的放在用户第一眼能看到的位置(页面的第一屏)。例如将商品图片、标题、价格放在第一屏的位置,评论则放在第二屏的位置;
③优先级低的要弱化、甚至是隐藏或删除。客服、店铺和收藏的按钮相对于加入购物车和立即购买,很弱,消息、帮助、我要反馈则更弱,所以被收起在右上角更多的icon中。
5.考虑技术的局限性
上次在做阅读APP的时候(pad平台),需要在E-Ink屏上的阅读页面增加竖屏模式,这种模式会更利于用户进行阅读的,类似于kindle的阅读体验。但是因为下屏没有做G-senser,所以是不支持竖屏的,只好放弃。如果我实现不去了解这点,做出来的方案只是浪费时间。
现实做设计的过程中还有很多类似的例子,不管是交互还是视觉,总是会想到一些创新好玩的设计形式,每当这个时候一定要去和相关技术人员沟通,确保设计方案的可行性。此外还要考虑项目周期,如果上线时间紧迫,其实是不允许设计师把设计形式做得很重的,只需要出一个简单的保底方案即可。
我自己就有在做设计之前和相关技术沟通想法的习惯,真的帮助很大。
还是文章前面的那句话,页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环,也不要只站需求、只站在交互、只站在视觉上思考问题,这样你永远是个美工,而不是一个设计师。设计师是一个能用设计语言提供系统性解决方案的人,而不是简单画图的人。
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界面设计作品必然是要经过不断升级、重复迭代的。