APP设计规范:图标和按钮视觉设计规范

   手机APP设计规范指对整套APP界面进行视觉设计UI风格的统一,对界面元素的样式、颜色、图标按钮和大小设定统一的规范和使用原则。方便以后协调合作和APP视觉迭代。

  第一部分:APP界面里面的图标(iCON)设计规范

  我们在绘制APP UI界面设计里面的图标,在PS里面尽可能用形状来绘制。保证图标和按钮是矢量图。切图的时候的格式都是PNG。而且是图标和按钮的尺寸大小必须为偶数。

  App 里的图标还应该根据不同的功能需求设计不同的状态:如常态、选中态、点击态等。而且每一个图标除了英文的命名以为,还需要一个中文名字的备注下图标所代表的含义。让开发和其他同事看得懂。这也是我们做APP视觉规范的最终目的。

  每一个手机APP设计师的整理自己的APP图标视觉规范是不一样的。25学堂就跟大家推荐2种图标视觉设计规范分类方法。

  1、按照界面位置和模块来分类。如下图:


  2、按照功能模块来分类:分为功能型图标和示意型图标。如下图


  当然你也可以有自己的APP图标视觉规范规则。只要你们自己可以看得明白就行。

  以上2种APP界面里面的图标(iCON)设计规范分类方式,仅供参考。

  第二部分:APP界面里面的按钮(Button)设计规范

  App 里的按钮拥有 4 种属性:分別为一般、点击、不能点击、选中

  按钮规范因不同功能和场景需要,设计不同的样式和颜色,在尺寸上也分有:长、中、短;而且按不同手机平台长中短尺寸也注意有所不同。

  按钮切图一般以.9.png切图为最佳,无论是ios和andorid平台。切记

  常见的图标和按钮视觉设计规范信息图如下:


  APP里面的按钮也分为:重要按钮、一般按钮和软弱按钮

  重要按钮:一般是指在整个界面当中比较大,醒目的位置,通常是指执行重要操作以及吸附在底部的按钮。比如下单、搜索、确定、提交等等操作。

  一般按钮:不是特别重要操作的按钮。比如清空、退出、说明性的等按钮。

  重要按钮和一般按钮都是文字是在按钮上的,而且占的面积比较大。

  软弱按钮:这里指优先级最低的一种按钮,这类案例主要是文字和图标一起搭配出现的。比如筛选、排序等按钮。

时间: 2024-10-06 12:16:31

APP设计规范:图标和按钮视觉设计规范的相关文章

WCF服务编程设计规范(2):序言、通用设计规范和要点

WCF服务编程设计规范(2):序言.通用设计规范和要点.主要翻译整理,序言.WCF设计通用设计规范.设计要点.并给出注释.注释内容于括号内.下一部分会整理,服务契约.数据契约.实例管理的内容.这里放出的是中英文对照版.方便大家学习.最后翻译结束,我会整理一个纯中文版放出.如有错误,请批评指正.欢迎留言交流. 序言 对于一次成功的产品交付来说,完整编码规范至关重要.这个规范可以帮助强化一些通用的最佳实践准则,并避免犯错,方便整个团队理解这些知识.通常,编码规范都是相当的繁琐,动辄上百页,内容详细叙

PhotoShop绘制简单的小铃铛APP Icon图标制作教程

本PS教程教大家用PhotoShop绘制简单的小铃铛APP Icon图标.简单的东西,其实别小看一个小小的Icon,它里面包含的知识是非常多的, 这个比较简单,高手路过-- 最终效果: 1.新建文件,新建空白图层,按Ctrl+R调出标尺,利用钢笔工具绘制路径,并转换成选区(Ctrl+Enter). 2.使用渐变工具,为选区填充径向渐变,颜色代码如图. 3.新建图层,用椭圆选框工具,绘制选区,并再为其制作径向渐变,颜色如图: 分类: PS鼠绘教程 ps图标制作教程

工具栏图标的按钮鼠标悬浮怎么得到当前指向的按钮图标?

问题描述 工具栏图标的按钮鼠标悬浮怎么得到当前指向的按钮图标? 工具栏图标的按钮鼠标悬浮怎么得到当前指向的按钮图标?怎么根据工具栏的按钮图标加载对应的工具提示信息? 解决方案 http://www.zhishizhan.net/seckw-aHRtbOS4rem8oOagh-aCrOa1rgZ388e.html

JS点击某个图标或按钮弹出文件选择框的实现代码_javascript技巧

下面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下 具体代码如下所示: <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> <script type='text/javascript'> function selectFile(){

关于一个App的背景音乐以及按钮控制背景音乐播放开关的问题

问题描述 关于一个App的背景音乐以及按钮控制背景音乐播放开关的问题 我正在为语言障碍的小朋友们做一个app,要求有几个模块,每个模块有几个Activity,每个模块的背景音乐不同,同一个模块下的Activity背景音乐相同,但是每个Activity都有一个button可以控制整个app的背景音乐的关闭和开启.请问大神门该怎么做这个App的背景音乐结构,求求大家了,我快急死了,没多少时间了. 解决方案 可以参考http://blog.csdn.net/imyang2007/article/det

app桌面图标的添加方法

问题描述 app桌面图标的添加方法 求添加一个app手机桌面图标,代码怎么打-------------------------- 解决方案 http://www.cnblogs.com/CoolPigs/p/3317234.html

ios-IOS App上线图标尺寸,最大尺寸为2048 x 2732

问题描述 IOS App上线图标尺寸,最大尺寸为2048 x 2732 APP上线需要许多图标,那些图标怎么制作,图标分2种,一种为图标,另一种为启动界 面,根据https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html上面的,需要iphone/ipad的,App Store还需要,最大尺寸为2048 x 2732,这么大的尺寸上哪找去,我安装了

Photoshop天气主题APP应用图标制作教程

给各位Photoshop软件的使用者们来说一下天气主题APP应用图标的制作教程. 教程分享: 1.背景填充渐变如图,再花正圆矩形大小,适当就行.   2.图层样式为径向渐变,渐变色如图(自己看着调).   3.绘制阴影,用椭圆工具在图标下层绘制一个形状如图的椭圆,在属性面板里进行羽化,效果如图.然后建立图层蒙版擦出多余部分.   4.椭圆工具如上图画上第一层云朵的阴影黑色,不透明度为12%.   5.Ctrl + J 复制一层云朵上移动,图层样式:斜面和浮雕,渐变叠加上浅下深都是灰度的.下面颜色

Android如何动态改变App桌面图标

时不时的我们就会发现,一些我们常见的应用,比如某宝,某东,在一些特殊的日子中,比如双十一,元旦,为了迎合这样一个日子的气氛,在桌面的应用图标就会发生改变,其实对于这样的一个桌面图标更换,Android中为我们提供了AndroidManifest.xml里的<activity-alias>标签实现方式(更多文章请关注我的微信公众账号,左边二维码). 我们知道,我们每写一个 Activity就要在AndroidManifest进行配置一下,我们才可以正常的启动它,除此之外,我们还可以对它设置一个别