建材秒知道
登录
建材号 > 设计 > 正文

如何做APP界面设计

爱撒娇的向日葵
含糊的耳机
2022-12-30 19:11:23

如何做APP界面设计?

最佳答案
壮观的秀发
动听的柚子
2026-03-31 05:14:30

第一点:了解你的目标客户群的心态\x0d\x0a1、做微任务的目标客户群(如随时随地看看新闻,听听歌,看看电影,聊聊八卦之类):\x0d\x0a这类的解决方案是设计的app最好是小而准,不要大而全。越全的功能应用,只能代表着这个应用在各方面的都很平庸\x0d\x0a2、喜欢当工具来使用的目标客户群:比如找地图,看天气,查数据等。\x0d\x0a这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。\x0d\x0a3、无聊的客户群,用来打发消磨时间的:无需求,漫无目的的\x0d\x0a这类的解决方案是尽可能展示用户感兴趣的东西,帮助客户来打发消磨时光。\x0d\x0a\x0d\x0a第二点:APP原型图的制作和设计讨论\x0d\x0a这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。\x0d\x0a常用的APP原型图工具:移动APP原型设计神器POP、axure、Foreui等\x0d\x0a\x0d\x0a第三点:APP视觉设计与设计要点\x0d\x0a(1)大概设计板块有APP启动页面设计,APP界面设计的尺寸规范,app图标设计等\x0d\x0a一般来说,手机屏幕是从上往下布局的,重要的信息会放在上方。但是在操作上,大部分人都是单手拿手机,常用的操作,要放在界面的下方。\x0d\x0a另外还有一个原则,最小的触摸单位,一般是44个像素。如果再小,你的拇指难以触碰,或者容易引发误操作。同时,也不要让界面太拥挤。\x0d\x0a所以,设计师必须用减法设计,这个过程需要花时间思考、简化元素。\x0d\x0a你必须记住:(1)隐藏设计或者减法设计(2)分区或分类(3)帮用户做决策(4)提高交互创新设计(5)让人有爽快感和新奇感(6)在设计中浸入情感,把握用户的心理。(谈谈如何进行产品设计以及产品情感化设计)\x0d\x0a一位大师这样说过“真正的简约设计是:作品必须不断的被简化,一改再改,直到设计最终成形。”\x0d\x0a2014年APP设计风格趋向扁平化和卡片化。卡片,扁平化都会是移动app设计的趋势!认为卡片设计确实同时兼具了“拟物”和“极简”2种优势!\x0d\x0a\x0d\x0a第四点:APP界面设计流程\x0d\x0a\x0d\x0a(1).设计APP界面时,学会从优秀APP界面设计作品中寻求灵感,以前的艺术大师,用少量的资源做了大量的设计。\x0d\x0a(2).放下工作,休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作,带着全新的眼光工作,比长时间冥思苦想更有\x0d\x0a效。\x0d\x0a(3).并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存,对比两个版式就能很快分清孰好孰坏。\x0d\x0a(4).由于实物展示的相对比例至关重要,所以要及早在不同的目标设备上测试。\x0d\x0a(5).整个设计过程中不断问自己“真的需要吗?”。支撑项目时候,找一些讨巧的办法,例如,添加一些有趣的元素、样式会这样会很容易也会很吸引人,\x0d\x0a但必须始终注意剔除不必要的元素,不断精简。甩掉你费尽心血的部分总是难以割舍,但修改过程必须挑剔。\x0d\x0a\x0d\x0a第五点:APP界面设计测试与预览修正\x0d\x0a设计完成之后,我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具:快速在移动终端上预览APP界面设计效果图的方法最后:好的APP界面设计作品必然是要经过不断升级、重复迭代的。

最新回答
舒心的爆米花
激情的楼房
2026-03-31 05:14:30

现在做设计,如果说你是平面设计师,不足为奇,如果说你是网页设计师,哎哟,不错哦,如果是你是设计APP界面设计师的,那也许听着就有点不让人明白了,后来看看他们手机上安装的各种应用,才明白,移动APP界面设计师是做什么的。

本文不讲述移动界面设计师的介绍,总体来说是针对移动端APP应用做的界面设计,但是很多人不清楚移动APP界面设计师的工作流程是怎样的,在此,北大青鸟ui培训老师带你一步一步了解。

第一步:交互流程设计

APP的交互流程设计,简单来说就是构造框架,像造房子一样,有了清楚的平面图纸才可以增砖添瓦,设计交互流程时应该对应用的功能需求有清晰的把握。

第二步:风格定位

比如说图片分享类应用图片是最重要的视觉元素,应用的设计风格应当符合视觉流程,table需要引导用户操作。

第三步:功能icon设计

功能图标即在你的应用中,充当表达某一操作或功能示意的图形,功能图标设计应极可能形象,简洁,以准确表达其代表的功能。

第四步:界面视觉效果整体优化

选用图片的时候,应该尽量按照应用的风格选取,比如这APP主打是图片分享,那么可以选取视觉靓丽,有冲击力的图片添加分享。

第五步:应用icon设计

对这款APP进行最终的icon设计,能够最优化的,最靓丽的代表这款APP的特色,品牌等形象。

第六步:完稿交接软件工程师

我们做移动界面设计,做的是各个页面的形象,具体功能实现是需要与软件工程师沟通的,在能够完成软件开发的情况下,进行一步步的界面设计,最大化增加用户体验,吸引用户,最终完美的完成这份设计。

以上内容是作者对我们学习UID培训课程的同学在以后的移动界面工作当中的一个工作流程的简单介绍,以后学员如果在UID培训课程当中学习到第三阶段的界面设计课程的话,一定要好好研究,老师对于界面设计的操作流程一定会更加的细致讲解。

优美的枫叶
稳重的中心
2026-03-31 05:14:30
一 背景

1.纯色背景

整体上看起来非常的干净

2.毛玻璃效果

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

3.渐变色

4.蒙版背景图片

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

二 上半部分(即输入框的上面)

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

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

三 输入框和登录按钮

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

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

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

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

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

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

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

四 注册

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

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

五 忘记密码

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

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

六 联合登录

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

外向的绿茶
彩色的小笼包
2026-03-31 05:14:30
原型设计尺寸

☆ 状态栏(status bar):就是电量条,其高度为:20px;

☆ 导航栏(navigation):就是顶部导航,有线其高度为:45px;没有线高度就是44px;

☆ 主菜单栏(submenu,tab):就是标签栏,底部导航,其高度为:46px;

☆ 信号格:5 * 5

☆ wifi 图片:11 * 9

☆ 锁:11 * 11

☆ 导航:8 * 8

☆ 电量:22 * 9

☆ 闪电:5 * 8

☆ 状态栏中的文字:10px

☆ 顶部导航栏的图标尺寸为16x16px左右,底部标签栏的图标尺寸为23 x 23px左右。

☆ 导航栏的文字大小最大值是14px,底部标签栏的图标下方的文字大小为10px。

☆ 内容区域的文字大小是:10px, 12px,14px,16px。

① 文字黑色:#282828

② 文字深灰色:#656565

③ 文字浅灰色:#989898

④ 边框浅灰色:#C3C3C3

⑤ 背景淡灰色:#f2f2f2

⑥ 按钮背景纯白色:#ffffff

A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。

B、亲密距离:比如,左边图标与右边文字之间的距离。

1、iPhone6手机模型尺寸:429x881px

2、界面尺寸布局:满屏尺寸375x667px

3、高度电量条高度20px,导航栏高度44px,标签栏高度46px;

4、各区域图标大小导航栏图标16px,底部标签栏图标23px;

5、各区域文字大小电量条-文字10px,导航栏-文字14px,标签栏-文字10px;

6、常用的文字大小:16px,14px,12px,10px;

7、常用的颜色:背景浅灰色:#f2f2f2, 文字深黑色: #323232,边框色深灰:#CCCCCC;

8、常用可点击区域的高度(比如搜索区域):28px;

9、单行文字的背景框的高度:44px,双行则为:88px,三行则为:132px;

10、常用间距:亲密距离:10px;疏远距离:15px,其它距离:5px,22px等;

辛勤的盼望
刻苦的啤酒
2026-03-31 05:14:30
第一步:用户分析

通过对市场分析、竞品分析、用户分析等过程,确定APP整体的开发方案,明确用户使用这款APP的需求什么?如何满足用户这方面的需求?需要怎么设计功能模块等问题。

可以先从大的功能模块入口,然后细分小的功能,再梳理业务流程、用户体验流程等等,对功能模块的重要性、时序进行排序。

第二步:制作草图

按照前期规划的APP功能模块、时序图、用户体验流程等,通过线框的形式,制作出的APP的草稿图。自己可以用纸画,也可以使用办公软件。

第三步:制作原型图利用专业的原型设计软件,对草图进行细节完善,设计出整体的APP原型图。

第四步:风格设计

每个人都有着不同的个性,APP设计也是如此,我们需要为APP打造出独具特色的风格。

这可以寻找同行的APP作为参考,然后设计出几套不同风格的样品提供选择。

第五步:页面设计

根据确定好的风格、原型图,对APP的页面进行效果图的设计。

包括logo、启动页、内页、页面元素、填充页、动态的产品页、活动页等等,完成APP界面设计。

同时也要给出切图标准,方便后续的编程开发。