ui主题图标设计

来源：免费论文网　|　时间：2017-02-11 18:35:30　|　移动端：ui主题图标设计

篇一：图标icon设计的四个基本要点总结

图标icon设计的四个基本要点总结

一：图形样式

Icon最重要的是对其形的把握，因此在定稿前应该多画草图，来诠释自己的创意，在画草图的同时要考虑形的表现形式，在2008-2009年，icon的设计趋势3维样式，自从iphone上市后终端的icon都跟iphone差不多，以二维形式展现。不管三维、二维、文字、像素，要简洁易懂，一目了然主题。好的设计源自生活细节的提炼，icon当然也不例外，当今时代硬件已经不是瓶颈了同事也要更近趋势设计出更人性化的作品出来。（下面作品是800*400分辨率的屏幕，我们可以从像素、颜色、细节上面做的丰富一些）。

通常一套icon要有个统一的外形，这样才能统一UI设计风格，下面的图标都是在一个方形的容器里面去做的，icon的四面要顶到容器。如果你的容器定位是三角，正三角，梯形都是如此，一般我会做2-4px的浮动空间。

另外还要有素描关系，一套icon的透视角度和光源角度要一致，否则会很凌乱，说一下光源角度，如果从45度角照射，要考虑icon的高光、反光、阴影（这里的阴影不是指整个icon的阴影，3D icon会产生阴影2D icon元素之间会产生阴影）。

二：元素组合搭配

图标的组合元素不易过多，最好是1-2

个组合，元素过多导致识别混乱，

即使两个元素的组合也

要有主次，大小区分或者颜色轻重区分。如果一套图标里面有共同的元素，那么就没必要重新设计，只要元素之间组合就可。也有一个特例假如一个元素在同一界面上应用很多，会导致的识别性不高，建议元素可以做一下小的调整。（这套图标“文本”元素应用的比较多，所以最好有应用到文本的元素做一些小调整）。

三：配色方案

1、一个icon的颜色最好控制在三个颜色以内，最好控制在0-2之间（黑白灰不算），如果超出三个icon会很花不稳，这一点跟界面的设计原理一样。

2、整套icon的颜色灰度保持一致，基调一致，这里的一致不是说完全一致，有左右浮动的空间，设计师会凭着感觉取色。

3、控制好icon与背景明暗距离，icon的明暗反差，切记要突出主次关系。

四：视觉体验

质感的确定：质感对于icon设计对用户的视觉体验很重要，通常我们在设计之初要考虑到icon的质感效果或者是要质感定型。比如：金属质感、水晶玻璃、纸质、亚光质感等等，这是大的分类，比如水晶质感还有好几种体现剔透的、只体现高光的。

质感的表现：一套icon在草稿纸上画好后，再用其中最好表现的一个图标做质感的尝试，一般脑子里有几种质感的表现方式，都可以尝试做一下，只要做完一个icon，其它icon的做法都一样。

作品摘自：

/jiaohucn/news/uidesign/2012/1219/4195.html

篇二：华为主题icons图标详解

com.android.browser默认浏览器

com.android.calculator2 计算器

com.android.calendar日历

com.android.contacts联系人

com.android.deskclock时钟，闹钟

com.android.gallery3d 图库，相机

com.android.mediacenter音乐

com.android.mms短信 com.android.phone通话

com.android.settings设置

com.android.soundrecorder录音

com.android.systemui状态栏

com.baidu.tieba百度贴吧

com.example.android.notepad备忘录

com.huawei.android.calendarwidget日历插件

com.huawei.android.FMRadio收音机

com.huawei.android.hwouc系统升级

com.huawei.android.launcher华为桌面

com.huawei.android.mewidget桌面插件

com.huawei.android.thememanager主题

com.huawei.android.totemweather天气

com.huawei.dtseffectDts控制

com.huawei.fans花粉俱乐部

com.huawei.hidisk文件管理器

com.huawei.KoBackup备份

com.huawei.systemmanager手机管家

com.huawei.vassistant语音助手

com.sds.android.ttpod天天动听

com.tencent.mm 微信

com.tencent.mobileqq手机QQ

description.xml 主题描述文件

framework-res 系统框架

framework-res-hwext华为框架

icons【桌面图标】

icons文件夹使用说明

icons用于存放系统图标或第三方图标，图标为136*136尺寸的PNG图片。

dynamic_icons文件夹存放动态图标

com.android.calendar日历动态图标

com.huawei.android.totemweather天气动态图标

我们需要将您制作的图标名称按照下面名称重命名并放入icons文件夹内，如果以下图标名称有多个就说明该图标需要多个相同图标不同名称图标，例如：电话图标对应了三个名称，

我们就需要先将电话图标复制三份，并将三份图标名称分别命名为这三个名称。（主要为了简化操作）

电话图标使用名称： com.android.contacts.activities.CallLogActivity

com.android.contacts.activities.DialtactsActivity

com.android.phone

通讯录图标使用名称：

com.android.contacts

短信图标使用名称：

com.android.mms

浏览器图标使用名称：

com.android.browser

日历图标使用名称：

com.android.calendar

相机图标使用名称：

com.android.hwcamera

设置图标使用名称

com.android.settings

时钟图标使用名称：

com.android.deskclock

email图标使用名称：

com.android.email

文件管理器图标使用名称：

com.huawei.hidisk

应用市场图标使用名称：

com.huawei.appmarket

主题风格图标使用名称：

com.huawei.android.thememanager

图库图标使用名称：

com.android.gallery3d

录音图标使用名称：

com.android.soundrecorder

计算器图标使用的名称：

com.android.calculator2

天气图标使用的名称：

com.huawei.android.totemweather

音乐图标使用的名称：

com.android.mediacenter

备份图标使用的名称：

com.huawei.android.hwouc

视频图标使用的名称：

com.android.hwcamera.VideoCamera

下载内容图标使用的名称：

com.android.providers.downloads.ui

壁纸图标使用的名称：

com.android.wallpaper

备忘录图标使用的名称：

com.example.android.notepad

应用安装图标使用的名称：

com.huawei.android.apkbatchinstall

华为dlna图标使用的名称：

com.huawei.android.dlna

收音机图标使用的名称：

com.mediatek.FMRadio

系统升级图标使用的名称：

com.huawei.android.hwouc

手电筒图标使用的名称：

com.huawei.flashlight

游戏中心图标使用的名称：

com.huawei.gamebox

备份图标使用的名称：

com.huawei.KoBackup

手机服务图标使用的名称：

com.huawei.phoneservice

手机管家图标使用的名称：

com.huawei.systemmanager

语音助手图标使用的名称：

com.huawei.vassistant

驾驶模式图标使用的名称：

com.huawei.vdrive

SIM卡管理图标使用的名称：

com.mediatek.StkSelection

华为商城图标使用的名称： com.vmall.client

一键优化图标并不在这里，在手机管家里边后边会讲到

第三方图标约束图标：

下层（背景层）图标命名：icon_background_01，第三方图标会自动匹配在这个背景层之上。

中间层图标命名：icon_mask，主要约束第三方图标显示范围，超过这个范围的将会被自动切掉。

上层图标命名：icon_border，用于覆盖在第三方图标之上。

快捷方式，第三方软件桌面约束图标：比如uc浏览器的搜索（效果如第三方图标约束图标一样）：

背景层图标命名：icon_shortcut，第三方程序快捷方式图标会自动匹配在这个背景层之上，此图标可与第三方图标约束图标的下层图标相同。

中间层图标命名：icon_shortcut_mask，主要约束第三方图标显示范围，超过这个范围的将会被自动切掉。上层命名图标:icon_shortcut_arrow，用于覆盖在第三方程序快捷方式图标之上，此图标可与第三方图标约束图标的上层图标相同。

注：1.第三方图标约束图标下层 icon_background_01.png 这里可以有很多个，命名规则为 01，02，03 替换对应部分，如 icon_background_05.png，随机显示

portal_ring_inner_holo.png文件夹图标

2.以上第三方图标约束图标和快捷方式约束图标是根据自己设计图标的整体风格自主定义的图形规则，如果你不想约束第三方图标此处的图标可忽略。

篇三：优秀的UI设计师的必备技能

金动力教育UI设计课程 18913530553 051269150953苏州市养育巷151号商务大厦313-404

《ui主题图标设计》由：免费论文网互联网用户整理提供；
链接地址：http://www.csmayi.cn/show/165546.html
转载请保留,谢谢!

推荐专题

相关文章