app设计规范有哪些5点（app设计规范和设计指导原则）

今天给各位分享app设计规范有哪些5点的知识，其中也会对app设计规范和设计指导原则进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、策划007-App界面交互设计规范
• 2、app界面设计尺寸规范大全
• 3、web app 的设计规范和标准有哪些
• 4、浅谈iOS APP设计规范-按照iphone6尺寸
• 5、app界面设计要注意哪些方面？
• 6、APP界面设计注意什么？

策划007-App界面交互设计规范

在上篇 《策划006-APP界面设计风格》 确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！

APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。

APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。

页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议，安卓和ios分别做专门的设计当然更好。在中小型项目来看，设计资源紧张的话可以考虑安卓和ios用同一个稿子，分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。

推荐使用mac矢量设计工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范：

安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件

IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件

PS：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等

标准色规范：重要、一般、弱。标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。标准色一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。标准色较弱：普遍用于背景色和不需要显眼的边角信息。

文字是APP主要信息的表现，尤其新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要。标准字规范重要、一般、弱。这里主要规范标准字的大小，标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息。标准字重要：大字号普遍用于大标题、top导航，较小字号用在分割模块的标题上。标准字一般：主要用在大多数文字，比如正文。标准字弱：普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。

APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距，或者固定某些界面元素的间距，让其他空间留空拉伸。为了满足屏幕分辨率较大的设备，有时甚至需要改变APP界面的页面布局。

五、弹层规范

弹层规范要注意分别设计安卓和ios的弹层，比如ios大多操作弹层由底部弹出，而安卓直接显示操作再页面中央，这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发；提示性弹层：弱提示性的应用系统的token飘字提示即可；需要强提示可以使用取消、确定的模块弹层；更强提示而且弹层需要承载一定操作的使用强引导弹层，右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

页面loading动画是APP界面必不可少的元素，增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc，让APP更生动、活泼；或者使用logo口号加强APP的品牌形象。

图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式：如安卓需要720*1280px标准页面的png图标格式；ios需要3个尺寸320*（1-3）倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。

按钮规范按状态分有：常态、点击态、不可点击态。按钮规范因不同功能和场景需要，设计不同的样式和颜色，在尺寸上也分有：长、中、短；而且按不同手机平台长中短尺寸也注意有所不同。

页面加载失败、页面为空可以统一规范为NPC、文案、按钮。要注意根据不同的场景显示不同的NPC和文案。

......

...

设计规范主要由设计童鞋来梳理，但必须要与前端开发、产品经理达成共识，严格遵守约定的规范，否则这个设计规范就毫无意义了。在制定设计规范过程中，产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范，保证设计规范考虑的更切合实际、更全面、更完整。

app界面设计尺寸规范大全

原型设计尺寸

☆ 状态栏(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等；

web app 的设计规范和标准有哪些

WEB标准设计 ：

网页结构 HTML XHTML XML DIV+CSS XHTML+CSS 表现层

网页表现 (Cascading Style Sheets) 样式表 页面皮肤

网页行为 ECMAScript DOM BOM

用户体验 (User Experience)

搜索引擎优化 (Search Engine Optimization)

App的标准

IOS：界面尺寸、图标尺寸、字体、颜色值

内部设计：1、所有能点击的图片不得小于44px（Retina需要88px）

2、单独存在的部件必须是双数尺寸

3、两倍图以@2x作为命名后缀

4、充分考虑每个控制按钮在4中状态下的样式，如图

Aos：界面尺寸、图表尺寸、字体、颜色值

希望可以帮助你，望采纳，谢谢啦~~~~~~

浅谈iOS APP设计规范-按照iphone6尺寸

现在iOS app 的尺寸也变多了，要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配，以前一般用的是iphone5的尺寸，iPhone6 plus出现后，iPhone6尺寸成了大多数设计师的选择。

一、iPhone6的界面布局是：

屏幕是4.7英寸的，设计稿的大小750x1334px

☆ 状态栏(status bar)：就是电量条，其高度为：40px；

☆ 导航栏(navigation)：就是顶部条，其高度为：88px；

☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；

☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

二、关于iPhone6的图标的尺寸是：

☆导航栏的图标高度为44px（绝大部分功能按钮）左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。

☆关闭按钮34px*34px，返回按钮26px，简单笔画图标40px。

三、常用的可点击高度-登陆框、密码框、功能列表等，统一设成88px。

四、搜索栏、输入框、评论框、地址框的高度，在iPhone6的原型图上，统一设成58px或60px。

五、在iPhone6设计稿中，界面元素之间的常用距离。

常用间距-亲密距离：20px（与边缘距离）；疏远距离：30px；

其它距离-10px，44px等；

区块间隔：30-40px。

A、疏远距离：比如，改图标距离手机屏幕最左边的距离；

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

六、黑白灰颜色常用的数值是：

① 文字黑色#333

② 文字深灰色#666

③ 文字浅灰色#999

④ 边框浅灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

一、注意事项

1、在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。

2、不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。

3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配

二、界面中文字选用的规则

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式，网页中会有常用的几个字体。

以下是在72像素/英寸下的规范

移动端常规字体

IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好， 方正兰亭黑和方正黑体简 、方正中等线也运用的比较多。

三、字体的大小

1、导航栏的文字大小是36-38px；

2、标题字号：32px ，34px；

3、内容区域的正文文字大小是：28px，30px；

4、辅助性文字：20px ， 24px，26px；

5、标签栏（或主菜单栏）的图标下方的文字大小为20px；

6、终极原则：不大于所在要件高度的一半;

7、行间距：字号的1.2-1.5倍。

下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小：

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设计中需要注意的关键点，将会从图片比例、一致性、图片质量与真实性等方面进行分析。

1.1、图片比例有什么讲究？

不同比例的图片所传达的信息主体不尽相同，根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。

通过体验一些主流的APP，我们会发现一些比较常用的图片比例，如 1:1、4:3、16:9、16:10等等；

也会发现一些打破常规比例的设计，我们需要分析它们的性格，结合自身产品的特点，才能在自己的APP设计中合理的加以运用。

1:1 强调主体的存在感

1:1的图片比例是比较常见的一种设计比例，利用此长宽比更容易将构图归整得简单，突出主体的存在感。

常用于产品展示、头像、特写展示等场景，在电商类APP中尤为常见。

4:3 图像紧凑、更易构图

4:3的图片比例可以使图像更紧凑，更易构图，方便设计师发挥。由于手机屏幕容量较小，作为全屏展示时，该比例在App设计布局上面占用空间较大。

16:9 电影场景般的效果

16:9的图片比例可以呈现电影场景般的效果，多用于横向构图，是应用非常广泛的尺寸比例之一，能给用户一种视野开阔的体验。

在很多影视*** 类APP设计中运用广泛，如腾讯视频、网易云音乐等。

16:10 拥抱黄金比例

黄金比例就像金字塔上的明珠，越接近她越有魅力，反之会魅力减弱，16:10的图片比例最为接近。

设计没有绝对的标准，我们可以遵循一些优秀的经验规则，但是也要敢于突破规则，尝试更多的可能性。

X:≤Y 瀑布流设计

X:≤Y代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用于用户没有很明确的目的，只是喜欢获取尽量多的信息的情况下采用这种设计方式。

X:≤Y的图片比例要注意高度的控制，不要超出屏幕可显示区域的范围，如花瓣网在750x1334px的设计中高度最大值为：848 px。

以上列举的仅为部分常用比例的分析与说明，还有更多的比例这里就不一一演示，分享的目的是让大家养成分析的习惯，结合自身产品特点选择适合的图片比例。

图片比例选择方式：

a. 以商品展示效果为准，选择能够充分表现商品特点的图片展示比例；

b. 以产品气质为准，选择符合产品内容气质的图片展示比例；

c. 结合产品特点选择合适的常用比例；

d. 根据版面布局灵活的自定义特殊的比例值；

e. 分析→打破→创新，创造出符合某种规律或者美学概念的比例值。

1.2、图片比例的一致性

当我们结合产品特点确定合适的图片展示比例以后，需要针对整体的布局与图片分布情况，规范出那些布局可以采用相同的图片展示比例。

在保障视觉效果与交互形式的情况下，相同的主体，在不同的页面中最好采用相同的比例呈现，这样的好处不仅可以保持视觉表达的一致性，也能给后期运营维护带来便利。

1.3、提高图片的质量

越来越多的产品对图片质量开始加以重视，比如网易严选对产品图片的拍摄与处理都有严格的规范，目的就是为了提升产品气质和在用户心中的印象。

我们在设计的时候更要以最佳的图片来烘托我们的设计稿，图片的质量影响着整个界面的格调。

很多伙伴儿会觉得图片都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

a. 最佳的设计输出是设计师专业的体现；

b. 把最好的效果呈现给决策者，增加他对你设计能力的印象；

c. 通过制定运营视觉规范来把控图片质量，是可以严格把控你对图片的视觉追求；

d. 你的态度会给你带来好运。

1.4、图片的真实还原

虽然前面提到图片质量的重要性，但是我们不能为了视觉效果选择一些与主题无关的配图，这样也会给决策者一种误导。

我们可以提高配图的质量，但是需要保证图片的真实还原，这样才能让你的设计作品更加真实合理。

在一些本土的产品设计中，对于国外图片素材的运用，需要谨慎对待。如案例中的模特形象，文案信息的传达更加偏向于国内的场景，

如果运用一张国外的模特素材也许逼格更高，可是却无法真实的还原产品场景，会给决策者传达一种错误的认知。

2、文字，我只想知道重点在那里

文字设计的层次感决定了信息的高效传达，通过对文字信息的层次处理可以有效的帮助用户获取信息，提高用户对产品的操作效率。

2.1、对文字信息进行层级区分

当我们拿到交互原型或者别的需求文档时，我们需要对文字的信息层级进行有效的区分，这样才能让用户快速的获取和理解信息传达的内容。

文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时，需要明确的梳理好信息之间的层级关系，提高用户对产品的整体体验。

通过对字体大小、颜色、留白、层级划分等处理，把相同属性的信息归类设计，让整个信息排列主次分明，层级清晰。

设计师在对文字进行视觉表现时，为了达到整体界面的视觉平衡也需要减少对文字样式的运用，不可为了突出文字信息而采用过多的表现样式。

2.2、预估好信息呈现的最大值

当我们在进行界面设计时，初级设计师往往会忽略文字信息的最大值，只是按照自己的习惯进行完美的布局。

最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息，此时就会出现返工的情况，给整体的产品开发进度带来风险。

作为一名合格的UI设计师，我们需要预估好信息呈现的最大值，而不是取最小值或者随意进行设计，这样将会在执行的过程中遇到更多不可控的风险。

2.3、善于利用提示符进行设计

在一些会出现大篇幅文字信息的界面设计中，为了提高用户对信息的获取效率，我们会根据整体视觉效果选择合适的提示符进行设计。

很多初级设计师会过于遵循交互原型，往往对大篇幅文字的处理过于随意，只做着交互原型的美化，缺乏对用户体验的主动性。

在进行产品交互设计时，有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局，我们需要利用自己的专业来优化你觉得可以更好的地方，也能为你在整个产品环节中树立专业性。

关于提示符的设计表现形式主要有数字、字母、图形、色块等等，只要能有效的区分信息层级即可。

3、色彩，如何成为“色”计师

色彩给人的感受是最直观的，不同性格的配色传达不同的情感。关于配色有一些方法可寻，但是也存在一定的感性判断。

作为视觉设计师，我们需要学习理性的方法技巧，也要不断欣赏优秀的作品，提高自身的审美能力。

3.1、色彩基础知识

色彩分为无彩色系和有彩色系，无彩色系是指白色、黑色、各种深浅不同的灰色；有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。

关于色彩的更多理论知识这里不做展开，大家自行脑补色相、纯度、明度、对比、性格等等方面的理论知识。

3.2、建立色彩库

作为初级设计师我们对配色的把控不是很稳定，为了提高工作效率，我们需要通过一些理性的方式建立大量的色彩库，应对不同的需求。

下面列举部分个人比较常用的方式供大家参考，色彩收集的方法有很多，我们只需要掌握几个比较适合自己的即可，只要养成习惯并长期坚持，哪怕只运用一种方式，也是收获颇丰的。

a. 通过各类APP采集色彩

体验不同领域的APP，建立不同领域对APP色彩组合的选择，为后期项目设计奠定基础。根据主色进行分类，

如红色系列：网易云音乐、京东、网易严选、网易考拉等等；也可以根据产品气质分类，如文艺、时尚、科技、可爱等等。

b. 通过Dribbble采集色彩

在Dribbble上面，每一幅作品右侧都有该作品的配色文件，发现优秀的作品要养成这种采集配色文件的习惯。

c. 通过摄影作品采集色彩

通过优秀的摄影作品采集色彩也是常用的方法之一。

采集方式：

Photoshop打开图片 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器

d. 通过马赛克采集色彩

借助Photoshop滤镜将图片进行马赛克处理，可以得到优秀作品或者摄影图片的配色组合，特别适合采集同色系的配色。

采集方式：

Photoshop打开图片 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小

e. 从电影中采集色彩

相信大家都喜欢看大片，这部片子之所以能得到大家的追捧，必定有太多值得大家学习的元素。

作为神经敏感的设计师群体，那些刺激到我们神经元的优秀影片场景总是不能错过的。

3.3、提高审美，增强感性判断力

配色能力虽然可以通过一些理性的方法提高，但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。

我们需要不断的欣赏摄影、绘画、设计作品等等，综合的提高自身的审美，才能不断增强感性的判断力。

作为UI设计师，你不能只关注界面设计，你可以看平面作品、摄影绘画、影视动效，体验手工艺制作、运动*** 、细心的体验生活中的每一次变化。

3.4、养成分析的习惯

要想拥有良好的配色能力，积累的过程是很重要的。当我们看到优秀的作品，要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。

只有不断的分析和总结才能逐步形式自己的思维方式，提高不同配色的把控能力。

分析的习惯不只是运用在色彩上面，对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结，掌握优秀作品的规则才能形成自我的标准习惯。

4、图标，从会画到画好之间有多远

图标是APP设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效的识别。图标也有一定的界面装饰作用，提高界面整体的美观度。

很多初级设计师都会忽略图标的重要性，也养成去素材网站下载复用的习惯，当这样的习惯养成后便会逐步丧失自己动手的驱动力，什么元素都希望能找到素材下载，工作数年之后很快就遇到了自己的瓶颈期。

设计师对图标设计的态度与把控能力，将会是拉开你与其他设计师差距的因素之一。

图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段，你现在属于哪个阶段呢？

4.1、下载复用

下载复用是很多初入行业的设计师习惯的工作方式之一，由于自身对软件技法、设计技巧、创意能力等方面的不足，无法从创意到标准制图完成一个合格的图标设计。

缺点：图标设计风格与细节处理都完全不统一，这样的习惯一旦养成就会逐步丧失自己的动手能力。

4.2、动手设计

对于大部分有设计追求的设计师，都会意识到图标设计的重要性，也会结合产品特点绘制统一风格的图标。

注意事项：图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

无论我们选择何种表现形式，在进行设计的时候都要保持风格的统一性，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡不尽相同，例如相同尺寸的正方形会比圆形显大。

因此，我们需要根据图标的体量对其大小做出相应的调整。

4.3、规范设计

当设计师养成自己动手的习惯以后，恭喜你已经进步了，保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性，运用标准的规范进行图标设计。

在标准设计的基础上面我们可以发挥自己的创意，也不一定要局限在标准里面，但是总体的本质需要符合设计规范。

4.4、融入品牌基因

图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的造型设计也几乎雷同，很多对设计比较讲究的产品，也开始根据自身品牌基因，进行图标定制化。

融入品牌基因的图标设计具有很强的品牌识别性，不仅可以形成独有的视觉差异化，也可以增强用户对产品的记忆。

5、留白，我只想要足够的空间

适当的留白可以让你的界面更有灵性，给信息之间预留更多的空间，也能更好的表达信息之间的层次感，相比拥挤的信息布局更能给人舒适的体验。

当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时，作为设计师我们可以从不同的方向试着表达自己的观点：

a. 设计出对比稿，把产品需要的方案和你觉得完美的方案进行对比；

b. 筛选出这样处理的优秀案例，以成功的案例说服产品接受你的方案；

c. 进行用户测试，选择一些目标用户进行体验，从用户心声入手设计最佳的方案；

d. 更多沟通的方法有待你去挖掘，最终的目的都是希望做出更好的产品。

设计小结

1. 不同的图片比例反应不同的特征，根据产品特点合理的选择；

2. 设计中保持相同的图片比例，不仅使视觉表达一致，也能给后期运营维护带来便利；

3. 通过提高图片的质量来提高设计作品的美感度，但是也要保证图片的真实还原；

4. 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等；

5. 养成不断建立和丰富色彩库的习惯；

6. 提高审美，增强感性判断力，养成分析的习惯；

7. 图标设计经历的几个环节：下载复用 → 动手设计 → 规范设计 → 融入品牌基因；

8. 适当的留白可以给人更加舒适的体验。

关于app设计规范有哪些5点和app设计规范和设计指导原则的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。