app登录界面设计,请问一下,APP界面设计的流程是什么

app登录界面设计,请问一下,APP界面设计的流程是什么详细介绍

本文目录一览： 如何设计APP的登录页

登录页的设计开发需要先列出一个流程的操作，在根据设计流程开发出登录页。
移动应用分类：
直接使用的功能应用，属于工具类型的。
非强制登录
主要是一些资讯、生活类应用，第一次启动的时候既可以选择立即注册，也可以选择不注册，直接进入主界面，用户无须登录可以使用部分功能。
这类应用具有很强的个人隐私熟悉，为了用户的安全隐私保护，需要强制登录。
登录页面设计流程：
先选择登录的模式。
整个界面背景填充颜色。
多效果混合模式。
选择图片的填充。
视觉设计前先理清楚界面的逻辑，界面中每个元素的点击从哪里来到哪里去。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界面设计作品必然是要经过不断升级、重复迭代的。

app软件开发如何做界面设计

本文由北京锐智互动软件公司原创发表，转载请保留版权，谢谢！
app软件开发界面设计需要考虑以下几个方面：1、app软件开发界面设计-功能权限
未登录：app在未登录的情况下，可以浏览app的信息，但不可以进行其他操作，进行浏览以外的操作时，系统会自动跳转到登录注册页面。登录：可以进行任意操作。
1）页面名称
登录/注册页面。
2）页的入口
未登录的情况下，操作点赞、评论、分享、回答、私信，发布动作和问题；咨询和查看我的、个人信息动态、消费信息、顾客服务等以上操作后，将自动跳转到登录画面。
3）页面功能
用三种方式登录，输入手机号码/邮箱地址号码/用户名和密码登录，输入手机号码和验证码登录，允许第三方登录。
4）页面的逻辑内容和交互的详细说明：
a、注册账户
单击“注册帐户”，进入“注册登录”页面，用手机号码验证码注册帐户
界面内容手机号码输入框、验证码输入框、验证码获取按钮、注册登记按钮。跳转到右上角的密码登录画面，第三方登录门户
手机号码为默认值86，输入限制为11位。输入非数字内容时，输入界面中什么也不显示。如果输入大于11位的数字，则不显示超过部分，未注册的手机号码在输入正确的验证码后，默认注册成功；
验证码框限制输入4位或者6位数字，其他字符输入无效。
b、输入手机号码/邮箱地址号码/用户名和密码进行登录
界面内容包括手机号码、邮件地址、用户名和密码的输入框、基于手机验证码的登录、忘记密码按钮、登录按钮
手机号码或邮件地址号码、用户名输入框默认为+86，字符数限制为6~16个字符；
输入密码到密码输入框中后，可以单击右侧的可见性图标切换密码的的隐藏/展示状态；输入完成后，单击登录，验证登录是否成功完成，并跳转到登录前的画面；若忘记密码，点击“忘记密码”通过手机号、验证码输入新密码重新设置；
c、允许第三方登录
在登录画面中，在登录按钮的下方显示“第三方账户登录”按钮
按钮包括QQ/微信/苹果登录，选择对应的按钮进入此社交平台授权登录界面；授权完后登录结束并跳转到登录前的页面。
2、app软件开发界面设计-键盘操作
登录操作时，点击手机号码输入框，从页面下部弹出数字键；单击搜索框,编辑框和评论框，然后在底部弹出字母键盘。
3、app软件开发界面设计-其他一般相互作用的说明
没网的情况下打开APP，在页面中央提示：网络错误请重新加载网络，然后重试；
单击底部标签导航中的“问诊”、“社区”和“我”三个选项卡，切换到相应的页面；在页面内下拉时更新页面；上拉时加载内容；二级界面后的页面，不仅可以单击左上角返回，还可以将页面向右划，返回到上一页，在其他用户的动态中，不仅可以点击点赞按钮，还可以通过快速双击详情页来点赞
限制值：用户输入字符时，文本框限制为200个字，如果超过限制，文本框将无法再输入，系统将显示toast提示符，已超出限制200字，没有写内容的时候不能发送。

登录页插画-如何设计APP的登录页

怎么设计WEB登录页面，让页面不平庸
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的“门面”。
现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情感化设计,提升用户体验,拉近与用户之间距离的兵家必争之地,本文不谈趋势,不讲交互大道理,不涉及技术,就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。
优雅大方
如果说iPad是介于传统电脑和手机之间的产品,那么tumblr则是介于blog和twitter之间的服务。相比twitter,它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖,带来一种全新的视觉体验,安东尼·德·圣-埃克苏佩里曾说过,“完美就是多一点则太多,少一点则太少。”Tumblr的登录页面没有过多的视觉干扰,优雅大方,一切元素的存在都是为了用户更好的登录,登录过程非常流畅。
精致的质感表现
iCloud是苹果公司所提供的云端同步服务,用户有5GB的免费存储空间。负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说:“乔布斯会一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。他非常重视细节,细致程度居然达到了像素的层面。如果发现问题,乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求,细致的纹理,微妙的阴影,精致的质感,完美的细节,金属光泽可以随着鼠标指针移动,底部的图标可以随着分辨率的大小自适应,改变排列方式,确保用户的浏览体验。
iCloud给我们上了很好的一课,有句大家都听过却未必做到的话——细节决定成败,丰富的细节可以提升设计的价值,也是判断一个设计高下的一条很重要的标准之一,精致舒适的质感纹理,给用户一种沉浸式,充满惊喜的登录体验,是一种很棒的表现方式。
小清新的插图
在网页设计中,插图非常具有表现力,它与绘画艺术关系密切。所以大部分设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的设计师,将插画运用到网页设计中来,生动有趣温情的清新插图,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力,
163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆,有故事的插图与用户建立情感的联系,唤起用户的心灵共鸣,让用户更有归属感。
Vimeo是一家提供高清视频存放服务的网站,在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。
人文关怀的品牌传达
设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现人文关怀,传播品牌理念的绝佳位置。
QQ邮箱登陆页面每一次刷新都能看到不同的内容,或用海子的诗,或用迈克尔.杰克逊的歌词,唤起用户的共鸣,设计手法简洁,主体信息突出,引导清晰,并没有多余的元素,界面中最重要的操作“登录”按钮使用了交通中通行的绿色,而没有使用常用的蓝色,细节设计非常考究,对每个细节都注入人文的关怀。
新浪微博将登录框设计成一条围脖的样式,用户的每一次登录都是一次品牌传达的过程,切合新浪力推的围脖品牌理念,织围脖的概念深入人心。
越来越大的登录框
越来越大的输入框设计,让用户输入起来感到心情舒畅,登录过程非常愉悦,在显示器越来越大的今天,mailchimp大输入框显的霸气十足,并且一反常态的可以看到自己的密码,第一次在WEB登录框里见到这种设计,非常贴心.正是这种不拘一格的设计,让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。
简约而不简单
WEB设计的风格越来越趋向于简洁,登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,砍掉了多余的元素,颜色,形状和纹理,不能使用让人眼前一亮的设计元素,只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味,wordpress后台登陆页面采用适当的投影,灰色的巧妙运用,以及出错的抖动提示,让整个登录页面简约而不简单.堪称典范。
参考:
如何设计APP的登录页
登录页的设计开发需要先列出一个流程的操作,在根据设计流程开发出登录页。
移动应用分类:
直接使用的功能应用,属于工具类型的。
非强制登录
主要是一些资讯、生活类应用,第一次启动的时候既可以选择立即注册,也可以选择不注册,直接进入主界面,用户无须登录可以使用部分功能。
这类应用具有很强的个人隐私熟悉,为了用户的安全隐私保护,需要强制登录。
登录页面设计流程:
先选择登录的模式。
整个界面背景填充颜色。
多效果混合模式。
选择图片的填充。
视觉设计前先理清楚界面的逻辑,界面中每个元素的点击从哪里来到哪里去。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界面设计作品必然是要经过不断升级、重复迭代的。
常见的几种网站设计风格
极简风:
越少,越经典“这是不少设计大师遵循的设计风格。
“好的设计是尽可能少的设计”这条原则也同样适用于网页设计中。
除非必要的信息,页面中每增加一个元素,都会引起用户过多的小,甚至成为用户完成目标任务的阻碍。
极简设计的好处就在于它能最大化节约用户的时间成本。
无边框风:
这里的边框是指任何类型的装饰性容器。
通过去掉装饰性的容器,加强基本内容的设计感。
提升图片质量和排版布局,从而改变整体因无装饰性容器的视觉表现。
插画风:
除了使用大量图片作为背景或主体元素外,
图形插画的运用也是一种很好的方式。
网页Banner可以运用插画来表达网站主题,同时加上插画图标的点缀,使网页看起来清新有趣,加强网站本身的独特性。
扁平风:
扁平化设计可以说是时下最常用的网页设计风格了,它弱化了材质、渐变、阴影,去除了冗余信息的图形元素、排版。这种风格设计可以使画面显得更加平滑,提升了网站内容信息的视觉层级,更加方便用户快速寻找自己需要的内容。同时扁平化的界面能更好实现不同尺寸的转化。这也是现在互联网公司较长采用的一种风格。
3D风格:
这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境,而是那些运用少量3D效果使整个网页显得更加灵动,通过扁平化的基础上,添加一些生动的非扁平元素,给网站带来了原本缺乏的纵深感,同时提升主体视觉吸引力。
纵向分割:
这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境,而是那些运用少量3D效果使整个网页显得更加灵动,通过扁平化的基础上,添加一些生动的非扁平元素,给网站带来了原本缺乏的纵深感,同时提升主体视觉吸引力。

APP界面设计分析——抖音，快手

APP界面设计
1.桌面图标：
抖音：以上浅下深的渐变灰色为底，中间是深灰色为主的音符形状，音符外围用红色和蓝色做出了立体的感觉，整体很低调。
快手：以橙黄色为底，中间是手的形状，在手的中间有视频播放暂停的三角形符号，整体比较亮眼。
2.启动页：
抖音：整体以黑色为主，中间LOGO采用与桌面图标相似的音符形状，在颜色上采用一层白色二层为红色，两种颜色叠在一起做出了正片叠底的蓝，白，红三种颜色来表达出立体的感觉，在图标下方有“抖音”二字。
快手：整体以白色为主，中间LOGO用橙色的8和摄影机的图形上下结合，给人一种老式放映机的感觉。
3.首页：
抖音：打开直接播放短视频，页面最上方的Tab栏，有更多，世界杯（热点新闻类），附近，关注，商城，推荐，搜索。在这个主页面中我们可以看到作者的头像、红心、评论、分享、作者名称、作品标语及画面信息等。在这个页面之中，可以自由发挥，比如点赞、评论、分享、关注等。附近：一般是出现在视频列表之中，也就是后台根据你填写的信息进行地区分发与推荐，将同地区的用户作品推荐于你。
关注：在首页页面假设你有关注的作者，你可以在此页面直接看到关注者的动态消息、作品更新情况等等，亦可以第一时间浏览品鉴。还可以看到关注博主的直播。
推荐：一般是根据经常刷视频点赞、评论的类别视频，然后根据此类视频来为受众进行同类别视频推荐。
快手：页面最上方的Tab栏，有更多，发现，同城，放映厅，直播，搜索。整个页面的视频需要自己进行选择点击进入，在每个视频的封面上，可以看到作者和点赞量，也会标注是否为朋友或已关注。
关注：在首页页面假设你有关注的作者，你可以在此页面直接看到关注者的动态消息、作品更新情况等等，亦可以第一时间浏览品鉴。
发现：一般是根据经常刷视频点赞、评论的类别视频，然后根据此类视频来为受众进行同类别视频推荐。同城：后台根据你填写的信息进行地区分发与推荐，将同地区的用户作品推荐于你。放映厅：可以看电视剧，电影，动画片，快手短剧，部分需要购买观影卡（同VIP）。
4.内容项：
抖音：在底部有首页，朋友，制作，消息，我五项内容。朋友：两人互相关注称为朋友，朋友发布的抖音时刻，短视频，直播，图文都可以在这里集合起来，方便用户观看朋友发布的内容。制作：可以拍摄并发布视频或者图文。消息:@，或者私信，在线状态等都在此页面显示。我：显示受众展示的个人信息，发布完成的作品等。
快手：在底部有首页，精选，制作，消息，我五项内容。精选：一般是根据经常刷视频点赞、评论的类别视频，然后根据此类视频来为受众进行同类别视频推荐。制作：可以拍摄并发布视频或者图文。消息：@，或者私信等都可看到。我：显示受众展示的个人信息，发布完成的作品等。
5.登录页面：
抖音：可登录的方式有：手机号登录，今日头条登录，QQ登录，微信登录，微博登录。
快手：可登录的方式有：手机号登陆，密码登录，微信登录，QQ登录，微博登录，邮箱登录。

如何设计简单易用又引人注目的app界面

这涉及到APP的交互设计，与用户需求、用户体验有关。
一、如何设计简单易用的app界面
1. 遵循用户习惯和社会常理
2. 多利用图片解释，图文并用
3. 建立正确的匹配关系。
a:操作意图与可能的操作行为之间的关系。
b:操作行为与操作效果之间的关系。
c:系统实际状态与用户通过视觉、听觉和触觉所感知到的系统状态这两者间的关系.
d:所感知到的系统状态与用户的需求、意图和期望之间的关系。
4. 提供适当的解释
5. 新用户感受：免登录免选择，无需引导即可浏览所有频道内容
6. 登陆后自我表达体验
建议：针对第一次注册的用户，在注册后第一次进入到发现页面的时候，出现醒目提示告知用户开始创建频道的第一次尝试，且这次尝试不占用当日名额。发言类型不用作为整个频道的规范，而是在每次用户发言时可以自由选择。
二：如何使得app界面设计引人注目
1. 必须要有指示性设计
2. 让你的APP设计对于用户来说有熟悉感。
3. 简约而扁平化的设计。
三：如何将简单易用与引人注目相结合
就好比如，在设计引入注目的app界面设计，可以利用炫酷的文字设计。如果在app界面设计上使用简单的排版设计，其实，这两者是可以融合。就是说，炫酷的文字设计并不影响排版的简约。界面设计，这是一个永恒的话题，所谓设计简单又引人注目，貌似简单，其实非常非常难，十来年的艺术设计课程学习下来，也未必能做好这个设计。
最简单的方法呢，就是参考已经成型的技术设计方案，然后进行一些调整。当然这也容易沦为抄袭。
再看看别人怎么说的。展开全部
界面设计，这是一个永恒的话题，所谓设计简单又引人注目，貌似简单，其实非常非常难，十来年的艺术设计课程学习下来，也未必能做好这个设计。
最简单的方法呢，就是参考已经成型的技术设计方案，然后进行一些调整。当然这也容易沦为抄袭。

App登录界面的设计

一 背景

1.纯色背景

整体上看起来非常的干净

2.毛玻璃效果

要控制好效果，注意颜色搭配，否则会看来有点“脏”

3.渐变色

4.蒙版背景图片

要注意背景图片的选择及蒙版的透明度，否则容易造成输入框和按钮辨识度降低

二 上半部分（即输入框的上面）

当前主流的App登录界面一般不显示标题栏，界面整体显示大方，空间感强，

上半部分一般展示图片（可能是应用的logo）、文字（应用的名称或一个体现App的短句）或者图片加文字的方式

三 输入框和登录按钮

1.纯输入框，里面有输入内容的提示文字

2.输入框增加一个小图标，用来标识需要输入的内容

3.输入框前或输入框中带title

这种方式用的越来越少，因为icon和引导文字足以说明需要输入的内容，加上title纯属多次一举

输入按钮一般紧跟在输入框下面，用户输入完成后可直接点击按钮登录。

登录按钮的长度可以和输入框长度一致或者小于输入框的长度，一般使用有背景色的按钮。

有些App登录按钮会采用其他形式

四 注册

只要两种表现形式：按钮和文字。位置一般在登录按钮下方。

个人更倾向于按钮，因为使用频率比较高。

五 忘记密码

大都采用文字展示，毕竟这个功能的使用频率较低，相对于登录和注册是最不重要的功能

一般会放在登录按钮的下方，部分App会放到登录按钮和文字框之间，居左放。

六 联合登录

一般会放在登录界面的最底部，有些App会放在登录按钮之下，注册按钮的上方（毕竟联合登录也属于登录）

androidapp界面设计按什么尺寸

android app 界面设计是按720*1280的，切图上可以点9切图做到所有手机的适配。
状态栏、导航栏和主菜单栏，以720*1280的尺寸来设计，那么状态栏的高度应为50px，导航栏的高度96px，主菜单栏的高度96px，因为是开源的系统，这里的数值也只能作为参考。
Android为了区别于IOS，从4.0开始提出了一套HOLO的UI风格设计风格，鼓励将底部的主菜单栏放到导航栏下面，从而避免点击下方材料误点虚拟按键，很多APP的新版中也采用了这一风格。
扩展资料：
注意事项：
1、通常情况要定位一个Icon只需给出 上/下边距，左/右边距，标注图标距离只需标到可点击范围外
通用型颜色、字体单独标明一份，通用型模块只需单独标明一份，如导航栏。
2、手机可视区域通常为宽度固定，长度超出边界可滑动，所以标注物体宽度时可按比例说明，如果要标注内容上下居中，左右居中，或等比可不标注。
3、当交付的是一张完整图片时，不需做机型适配，只需给高清图(1920*1080)即可，注意进行压缩。
4、若图标在不同页面重复出现，且尺寸相差不大，直接给出最大一份切图，并在圆形图标明尺寸，程序会根据需求缩放。
5、当背景是纯色时只需给出色值，Android使用16进制色值。

app设计中，常用的界面布局方式有哪些？

您已经对如何使用网格有了基本的了解，您可能想知道如何将其应用于您在网络上看到的布局。响应式网格是一种系统地调整您的设计，分配命令，建立层次结构和“逻辑”设计的方法。它使事情看起来不那么浮动，您通常可以分辨出谁在使用网格以及谁没有使用网格。随着人们成为更好的设计师，他们的眼睛不断在各处绘制水平和垂直线，以创建这种顺序和对齐方式。
在该注释上，我经常会遇到诸如“等等，粘性面板如何在网格布局中工作?”之类的问题。或“您对端到端的Web应用程序做什么?”我们将研究响应式网格的一些应用程序，以及它们如何按比例缩小到移动设备。更重要的是，我想教您如何混合和匹配布局以适应您的设计需求。
如果不确定如何在响应式设计中使用网格，请阅读第一部分：响应式网格以及如何实际使用它们。还是顺其自然，一切都很好。
免责声明：我不在这些公司中任职，也不知道他们如何建立自己的网格。这纯粹是一个学习练习，我仅以这些网站为例。
单列布局
又名全页布局。这是最简单的布局，用于登录页面。您有足够的空间来显示大图像，以创建可增强您的产品或品牌的声明。一栏式布局中的事物充当单独的模块，并且易于在移动设备上扩展，因为事物已经按照您希望它们显示的顺序进行了堆叠。因为它在激发情绪方面非常强大，所以这是主页，简介，操作指南或新产品等的通用布局。即使在模块中，也有可能将事物分成不同的网格列，整体而言正在利用12列作为主要内容。
网格使用
您可以清楚地看到，WeWork在其设计中使用了网格，因为尽管每一行都划分了所有内容，但它们仍然排列在一起。一个简单的赠品是元素之间的填充量是一致的(在4张卡片和两个客户成功案例之间)，并且外部边缘的宽度相同，这使此设计非常令人赏心悦目。我也喜欢这个示例，因为它表明您仍然可以在执行基于行的模块的同时以有趣的方式分解页面。
例子
这是一列布局的其他一些示例。请注意，父元素内的元素可能如何划分为不同的列，但整个父元素位于一个主容器下。
两列布局
这可能是最常见的布局之一，只是因为您不希望文本的宽度超过6_8列。另一个好处是您可以将其他元素置于折叠上方，并使用此侧栏进行导航，广告，号召性用语，类似清单等。您应将8栏用作主要内容，并将4栏用作侧面内容。这样，您的两面都是偶数，如果需要，您可以将主要内容切成两半，以很好地并排显示内容。
“但是等等，有8列?然后我的设计空间就大大减少了!”你可能会说。在网络上，切勿让文本使用全部12列。这是一个基本的排版原则，舒适的阅读宽度在16px处约为60_80个字符，而在桌面上恰好不超过8列。其实8列是真正推动它，因为你必须要考虑那些谁使用了大量的桌面，所以我不会设计的东西多比。即使在单列主页布局中，内容也居中并具有最大宽度。因此，“更少的空间”确实是没有问题的，甚至可以使您的设计更好。
这种布局用途广泛，适用于网站的内页，例如，当您有大量文本要阅读时。一些页面示例是博客，说明，常见问题解答，操作方法，您希望在其中使导航或其他方便用户使用的内容。
移动
在移动设备上，这是一个简单的层次结构问题。您需要根据侧面板中的内容做出堆叠决策。如果侧面板是导航或关于FAQ的一系列问题，则应将其放在主要内容之前。如果侧面板是“阅读更多”或“其他建议”，则应将其堆叠在主要内容的底部。
三列布局
由于您要处理三列，因此您可以选择如何分配它们。让我们先来看一个简单的示例-均匀的4_4_4分布。
4_4_4分布
当您需要发布大量图像时，这对于布局很有用。如果设计将不使用最大宽度，则可以由您选择。我在下面显示了两个示例。
分布不均(3_6_3)
分布不均匀是一种布局，用于当您拥有可以处理较长内容的产品时，您还希望突出显示用户可以做的其他事情。当主要内容不需要很多水平空间时，这是最合适的。
这是Dribble设计工作板上3_6_3布局的示例。紫色轮廓指示内容位于网格上的位置，紫色块指示它们为元素提供的其他填充。我非常喜欢这个示例，因为它提醒您可以按自己的喜好分解页面。在这里，标题和大号的CTA是一个模块，用作三列之前的标题语句。但是，如果仔细看，它实际上仍在中间的6列之内。
就像两列布局一样，您需要决定如何显示内容，而这取决于信息的重要性。使用相同的Dribbble示例，在平板电脑上，左面板完全消失。在移动设备上，右侧面板会塞入过滤器按钮。单击过滤器按钮可展开该部分并将内容推入下面。仅出于理论上的考虑，如果左侧是导航，则可以将其堆叠在主要内容的顶部，放在抽屉中，尝试水平滚动的锚点，或者创建带有导航元素的粘性页脚。
Dribble的3列布局更改为平板电脑上的2列(左)。在移动设备上，右侧面板会塞入过滤器按钮(中间)。单击过滤器按钮可展开该部分，并将内容推入下方(右)。
分布不均(2_5_3)
Facebook和Twitter使用这种布局，其中主要内容是供稿的长滚动区域。您可能会注意到左侧和右侧的列数不均。他们的左侧面板是导航栏，右侧是一列较宽的栏，其中包含生日，精彩集锦，提醒和趋势等杂项。
如果您回想起我以前的文章，则12列是台式机上最基本和最标准的列，但这并不意味着您需要使用它。不同的页面可能需要不同的网格设置，具体取决于您的产品。在这里，布局之所以有用，是因为提要不需要太宽，而且分布不均匀也使提要具有层次结构和注意力。
基本上，您可以按自己的喜好分割网格，只需要认真考虑站点的用途以及削减层次结构将如何支持该目的。UI设计网格布局有哪些如果站点的目的是主要阅读长篇小说或查看大图像，则我不会使用散列布局，因为我想使用更多的水平空间。取而代之的是，我将导航放在顶部，并使用两列布局。或者，如果我需要一个介于图像和文本之间的不错的选择，那也将是使用两列布局的一个很好的理由，例如Reddit的当前设计。
粘板
粘性面板是指您的区域具有粘性，或者在用户向下滚动页面时“跟随”用户。粘性面板中的信息可以是静态的，例如带有号召性用语的警告消息，也可以是动态面板，该面板会在您更改信息时进行更新。布局本身与两列布局相同，但粘性内容要短得多。它之所以非常有效，是因为它可用于反映用户在非粘性方面所做的事情，并始终吸引号召性用语。使号召性用语保持一致很重要，因为它可以提醒用户下一步应该做什么，从而增加转化次数。与滚动两列布局相比，当您要突出显示用户可以执行的单个操作时，最好使用粘性列，而对于多个操作则最好使用不粘滞。
如果使用网格系统进行设计，则面板应位于网格内部。在台式机上，面板将占用外部3或4列。其余的，无论是右侧还是左侧，将是滚动的8列或9列。
重要：如果您决定设计粘性面板，则该面板必须足够短，以使其在所有桌面屏幕上都可见。因此，它必须简明扼要，如果它是动态的或具有伸缩性，则应确保内容未在其最大高度处被剪切。
移动
您是否注意到台式机与两栏式布局相同，但侧面板较短?区别在于移动设备，面板被压入了一个粘性页脚。另一个选择是，它也可以是包含在内容中间的另一个模块。
在移动体验上，Airbnb会将粘性的右面板变成粘性的底部页脚。当用户单击“预订”时，将显示带有预订详细信息的模式。通常，粘性页脚会非常汇总，如果用户单击粘性页脚，则可能会显示一个模态或您可以像抽屉一样将其拉起。在移动网络上，与抽屉相比，该模式更易于开发，但是抽屉将模仿更近的桌面体验。
网络应用
某些站点具有持久的导航功能，该导航功能通常会粘在屏幕边缘，通常在屏幕的顶部和左侧。这些粘性导航菜单可帮助用户感觉就像他们在使用应用程序，并且对于基于动作的UI(用户需要在不同目标之间进行切换)非常有用。由于这样的设计意味着导航始终存在，因此您可以利用它来简化内容。
对于Web应用程序设计，粘性导航实际上不属于网格。它留在它外面，因为它将一直存在。网格将成为您的内容，其外部还有粘性导航。通常，此粘性导航的大小也是固定的。在此示例中，Spotify的左侧面板和底部面板具有粘性，并且在拉伸浏览器时，只有网格中的内容会动态更改大小。大多数网络应用程序都保持网格流畅以填充浏览器。
移动
通常，Web应用程序倾向于具有实际的移动应用程序(从应用程序商店下载应用程序)。与移动网络相比，有了移动应用程序，您可以做更多的事情(在手机上以chrome打开页面)。在移动体验中，由于菜单项很多，导航项往往会塞入汉堡菜单。如果在桌面上有一个顶部导航充当总体导航，则它在移动设备上可能仍会粘在顶部或底部。为什么是底部?它离您的手更近，因此更容易接近。因此，现在有几家公司不再将导航放在其应用程序的顶部。
Slack的移动应用程序将导航隐藏在左上角的图标中。将导航隐藏在移动应用程序的汉堡菜单中，但还引入了新的即时贴按钮来创建新的便笺。Youtube的移动网络版本具有导航功能，可作为页脚。
这还不是全部。您还可以利用许多其他很酷的方法来利用网格进行出色的设计。有时您不必使用装订线，有时甚至不必在桌面上做12列。您的三列布局甚至不需要从页面的开始处开始。这仅仅是设计中如何使用网格的开始。最后，它可以帮助您思考层次结构。希望本文能够在技术方面为您提供帮助，但更重要的是，在如何考虑设计并提供适合页面目的的可视化解决方案方面，您会有所帮助。良好的可用性不仅取决于外观，还取决于有效的，可扩展的和可转换的。
UI设计网格布局有哪些

请问一下,APP界面设计的流程是什么

APP的界面设计采用 window(窗口) + Frame (子窗口)/Frame Group(子窗口组)+页面 结构，前端UI 交互 使用原生 UI 控件 或 Web javaScript 控制界面交互效果，要明确开发的APP 使用什么框架，什么平台，要是单纯只是做美工设计，一般出效果图就可以，其余的交给 APP开发人员
开发原生App软件需要针对不同智能手机的操作系统来选择不同的App开发语言，如安卓App是Java开发语言、IOS APP是Objective-C语言、Windows Phone的APP开发是C##语言。

手机界面设计的三大原则

移动APP里面的每一个UI界面都是这个App的门面，尤其是主界面，看上去干净整洁清爽宜人容易操作，那么你的App就成功了一半。这也反映出了你这个开发团队的基本审美素质和设计理念。
图片
我们都知道，设计一套完整的APPUI界面其实是比较复杂的，从需求分析到市场定位，从草稿到拟方案，从创意元素的组合到想法沉淀，从设计规范到突破传统，从纸上到电脑上，从个人到团队，或者从团队到个人，从素材收集到素材处理，从0思路到偶然等等，其实设计一个APP会碰到太多太多的问题，
所以要求我们移动APP设计者必须按照下面的三大准则和八项标准来设计。
【手机APPUI界面设计】三大准则：
（1）不乱用颜色。一个页面内不要超过3种颜色
（2）不乱用大图片当背景。你是想让用户看你的背景图片呢，还是看你的内容？
（3）不乱填充内容。页面元素如果太满，给读者压抑感，无所适从。
图片
【手机APPUI界面设计】八项交互标准：
1.色彩舒适度
一个第一眼看上去就杂七杂八色彩，或者完全没有主次之分的简洁，或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩，我想它已经没法继续长久看下去了。因为人第一眼看到的，就是一个事物的颜色，才是形状。
2.文字的主次
任何设计作品都要传达信息传达思想，如果一套设计中字体乱啪啪，文字大小和文字粗细，间距行距都没有一个“主次逻辑”，我很难挖掘到自己想要的信息，不论设计是酷炫复杂的还是简洁清爽的，光能展现信息时远远不够的，信息文字的每一个细节，都决定了一个设计要传达的思想主次，记住，你是要引导别人去看，而不是别人引导你去设计。这世上没有一个真正定死的文字标准，但是最基本的，至少让别人看清你的文字是写的什么吧，所以，文字之间的不同色彩，也是能让文字主次突出的方面
3.信息可读性
有了文字基础，处理好每个模块的布局，色块，插图，背景等方面，会让你的信息有较强的可读性。别跟着你的爱好走：我喜欢酷炫，我喜欢简洁，我喜欢优雅，我喜欢二货。把设计作品中你最想传达的信息传达出去，就算某些信息被别人忽略了，你依然是成功的。如果用户连看都不想看，连最基本的信息都没法传达，那作品的任何风格，都只是口头吹嘘。你要定好你的目标用户，你想吃遍全中国乃至全世界，全行业？除非，没有除非了。
4.UI识别性
这一点在图标上味道非常浓，不论你这一点在图标上味道非常浓，不论你设计的是扁平化还是拟物化还是梵高风格，不一定要3秒看出图标的意思，也要让人欣赏这个图标美感的同时，大概“心里知道”，这个图标要传达个什么。一个网站banner的设计，一个页面的导航设计，都要考虑到识别性，你想传达这个图像的什么内涵？你这个图形的意图是什么？都是设计者需要考虑的。
图片
5.交互性与易用性
上面的工作都做得差不多了，剩下的就是使用了。不论是手机主题还是网站设计还是APP还是游戏，要让别人快速上手，能玩，能用，甚至用的简单，玩的简单，就算你采用银河系都没有的酷炫交互，或者采用地球上已经濒临灭绝的土逼设计，达到方便使用的优良品质，你的作品再牛逼到没法看，也有牛逼的地方能看。
6.思想，生活的传达
作品是什么样，一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态，所以别小看一个作品的力量，它可能就是传达你自己真实内心的一个媒介，可能你并未发现，但是旁观者已经发现你了。
所以说，融入生活得设计是比较难的，同时，也是最容易的，你是否把你最粗心最让人厌倦的一面暴露到设计作品中？是否把你最细致入微最耐人寻味的一面传达到用户心里？一张图就可以看出（当然这不代表全部啊，某些设计师的作品看几天你也看不出他是什么人过着什么生活的）
7.微小的细节和微小的创意
别说这个东西就是你创造的，因为上帝比你创造的还早。UI设计中一根线，一像素，色彩饱和度的细微差别，一个小渐变，一个字体的选择，画布的大小，用笔的粗细，这些小细节，虽然不是人人都能说得出，但是能第一眼“看在心里，感觉到骨子里”，所以就算不说，细节也是能让任何人第一时间感觉到的，别忽视每一个小细节，它说不定就是你成功的堡垒，也是一有机会就让你失败的利箭。
细节中，你就能诞生一些微小的创意，小创意创造大创意，没有细节，何谈创意？那就只是纸上谈兵，口说无凭。
8.生活中表现手法的引用
一个简单的视差，一个简单的坠落，一个简单的玻璃破碎，一个简单的树叶飘落，一张纸简单的角度摆设，一盆植物简单的远近拍摄，这些东西，都能创造你无穷的表现手法，当然，这也是比较难的，能将生活融入设计，是需要积攒的，不是一两天能体会到的。