admin管理员组文章数量:1530280
2024年5月2日发(作者：)
48
囱魁科技
2020
年•第
7
期
手机
APP
图标设计规范探讨
◊
内江师范学院计算机科学学院卿立兴
伴随智能手机的普及
，
手机
APP
越来越多
。
APP
设计中图
标设计必须遵循一定的规范
。
本文介绍了
APP
图标设计的美学
原理
、
基本流程
，
进而阐述图标设计的基本规范和相关技术
实现
。
在现代社会
，智能手机几乎是人手一部
。
主流智能手机系
统分安卓
、
苹果
、
鸿蒙等。
手机
APP
以其方便
、快捷
、
易用
，
受
到人们的喜爱
。
制作
APP
也成为时下热门计算机行业之一
。
设计
Appa
程中
，
图标的设计尤为重要
，
设计必须遵循一定的规范
。
因手机操作系统不一
，
在开发
APP
时
，
对应不同系统的
APP
图标
设计也略有不同
。
同一手机系统
，
不同手机型号
、
版本，
对应
的
APP
图标设计也有差异
。
本文以
IPhone6,
4.7
英寸
，
750x1334
型号手机为例
，
阐述手
tHAPP
图标设计的斟规范和琳实现
。
该规范对其他手机的
APP
图标设计也有一定的参考价值
。
1
APP
图标设计的美学原理
APP
图标是平面图像
，
属于视觉的艺术范畴
。
另外
，
APP
是
针对特定用户群的
，
其图标也属于
UI
设计的范畴
。
设计图标也
就必须遵循基本的美学原理和
UI
设计原则
。
1.1
构图原理
图标即图形
，
其构图包括点
、
线
、
面三种元素
。
图标设计
中
，
一般都需要将事物具象形态
，
通过点线面等形象元素
，
组
合成传达某种意义和情感的抽象形态
，
即造型
。
点具有吸引视线的作用
。
一个点是视线的集中
，
具有焦点
作用
。
两个点可以形成一个方向
。
三个点形成一个虚面
。
大小
相同等距离排列的多点给人平稳
、
安定的视觉感
；
大小渐变的
点形成集中感或空间感
。
渐变点会产生跳跃性韵律或节奏感
。
线是点的运动轨迹
，
有长度和位置
。
直线给人刚强
、肯
定
、
硬的感觉
。
平行线具有条理，
整齐
、
规整
、
井井有条
。
曲
线富有变化
，
充实
、
饱满
、
圆润
、
流畅
。
面也有很多形态
。
直线的面表现出正直
、
安定
、
刚强
。
曲
线的线表现为有数理性的秩序感
。
随意的面形状自如
，
轻松活
跃
，
富于变化
，
可表现幽雅
、
柔美的特征
。
偶然形的面比较自
然
，
具有个性的图形
，
具有自然的美和较强的趣味性
。
1.2
配色原理
美观的图标必定是有色彩的
。
好的配色
，
对于图标视觉感
提升非常輕
色彩有明度、
色相
、
纯度三大要素
。
色彩的色相包括红橙
黄绿青蓝紫衲
。
各种要素的不同
，
形成对比
，成就万千世界各
色形态
。
色彩对比
，
在图标设计中大量被用到
。
同一光源或不同光源下
，
空间万物或同一物体不同部位受
光距离
、
角度
、
强弱不同，
形成高光、
阴影
。
类似色相对比
，
色相感明确
、
单纯
、
柔和
。
对比色对比，
对比鲜明强烈
，
具有
华丽
、
欢乐
、
活跃的感情特点
。
互补色对比，对比更强烈
，更
富有刺激性
，
可引起视觉的足够重视
，
表达鲜明
、
饱满
、
充
实
、
活跃
、
刺激
。
不同颜色还表达出不同的情感和意义
。
譬如
红色代表欢乐
、
喜庆
、
胜利
；
黄色代表光明
、
辉煌
、
威严
；绿
色命
、希望
、
青春等
。
2APP
图标设计的基本流程
（
1
）
创意
。
根据项目要求
，
确定图标风格样式路线
。
首先
确定要制作哪几个功能图标
，
依据功能需求
，
寻找相关文字资
料
、图像资料
，
展开联想
，
运用发散思维
，
确定设计图标所需
的图形和关键文字元素
。
（
2
）
草图绘制
。
为提高图标制作效率
，
在创意明确之后
，
绘制出素描草图
，
并团队讨论修改
。
最终确定图形基础构图
。
（
3
）
电脑效果图
。
参照素描草图
，
在电脑上利用
AI
、
CDR
等软件绘制出图标图形
。
再将图形导出为
PSD
格式
，
在
PS
软件中进行上色
，
制作出需要的背景色、
纹理
、
高光
、
阴影
等视觉元素
。
3
APP
图标设计的基本规范
（
1
）
简洁易用性原则
。
开发的图标最终是给用户使用的
，
所以图标不能设计得华而不实
。
过分追求画面美观
，
会使得用
户不便于了解图标所要表达的用途，
增大用户错误选择的可能
性
，同时也增加了开发的成本。
图标的设计
，
在满足基本意义
表达的基础上
，
应该尽量简单
、
清晰
。
（
2
）
记忆负担最小原则
。
一个手机
APP
—
般都会有很多的
图标
。
一方面
，
图标与图标之间应该有比较高的可识别度
。
即
用户不会因为两个图标图形相似而出现选择错误
。
另一方面
，
图标上的图案
，应与其要表达的用途或意义有直接的关联
，
减
少用户的记忆负担
。
（
3
）
—
致性原则
。
在一个
APP
的众多图标之间
，
应该保持
设计目的的一致
、
元素外观的一致
、
交互行为的一致
。
尤其在
元素外观一致上
，
要力求图标外形
、
颜色基调一致
。
一致性并
非指完全相同
，
而是在变化中求统一
，
或者是在统一协调的基
础上
，
依据功能的不同而增加可识别的变化
。
（
下转
51
页
）
技术创新
51
准备时间
，
弓
I
导学生小组成员明确角色和
多种教学理论及方法
。
比如
，
结合任务型
生对现实生活中英语交际的切身体验
，
为
英语口语教学提供了颇大的助益
。
因此
，
教师应学习先进的教育思想
，
勤于反思
、
分工
（
比如
leader
；
—辩
）
,
开展辩词的
收集和讨论以及辩论策略的规划活动。
3.3
注意事项
（
1
）
注意创设情景的技巧
：
带入情
教学法
。结合听、
说
、
读
、
写四种语言技
能
，
创设情景
，
为学生提供交际任务
，
学
生完成语言任务后
，
教师与学生讨论语言
的运用过程
，
同时秉承鼓励原则对使用不
当或错误给予恰当的建议或纠正
。
（
3
）
在真实的课堂环境中，
注意依
总结和探索
，
结合情景教学法
，
引导学生
在科学方法的指导下提升自身的英语口语
境
（
包括优化情境
）
一凭借情境
F
展情
境
。
a
、
带入情境
。
充分调动学生的多感
水平及语言综合能力
，
为现代英语教学质
量的提高添砖加瓦
。
据教学过程的变化
，
动态调整情景教学法
的具体应用
。
在自由化的口语交际活动
官
，
使其感受到
“
情境即在眼前
”
、
“
我
即在情境中
”
o
情境的构建方式因教学内
【
参考文献
】
[1]
崔萍
，
沈莉
，
王丽丽.英语情景教学
前
，
设计一些结构性口语交际和半口语交
际性活动
，
使学生在词汇
、
句法
、
语法等
容
、
教学对象等的不同而变化
。
运用多种
方式优化情境，
砂学生形象思维和抽象
思维结合
，
使情景的作用放大
。
主要的情
方面有所准备
，
适当为学生搭建
“
脚手
架
”
-
教师设定片段式的情境
，
限定核心
法的探析
U]
•教育与科技
,2011（
12
）
[2]
何克抗.建构主义的教学模式
、
教
学方法与教学设计口北京师范大学学报
（
社会科学版
）
,1997
⑸
[3]
何广铿.英语教学法教程理论与实
践
[M].
暨南大学出版社
,2011
（4
）
[4]
李吉林.情境课程的操作与案例
[M].
教育科学出版社
,2018
（
1
）
[5]
王蔷.英语教学法教程
[M].
高等教
境构建方式
：
提出问题
，
造成悬念
；
描绘
图画
，
形象呈现
；
展示实物
，
引发思考
；
语言
，让学生操练
、
模仿
、
重复等
。
之
后
，
教师再组织学生参加功能性口语交际
活动和社交性口语互动活动
。
4
结语
联系生活
，
鸣；
观看磁情
感
；
欣赏音乐
，
活跃气氛等
。
b
、
凭借情境
。
巧妙利用情景教学法
中国英语能力等级量表的正式发布体
形真
、
情切
、
意远的特点
，
训练学生的感
现了我国英语教学强化培养学生实际语言
运用能力
、
文化意识和跨文化交际能力的
趋势
。
在核心素养教育备受推崇的背景
觉
，
培养学生的直觉
，
发展学生的创造
。
c
、
拓宽情境
。
凭借情境吸引学生主
育出版社
,2006
⑸
本文系内江师范学院
2019
年大学生科
研项目
，
项目编号为
19NSD-94
O
动认识周围的世界
，
激发学生的潜能
，
鼓
励其在生活中运用课堂所学与人交流
。
（
2
）
运用情景教学法时
，
注意结合
下
，
提升高中英语口语的教学质量显得尤
为
SM
。
情境教学法寓教于乐
，
有利于激
发学习热情
，
其创设情境的方式增强了学
（
上接
48
页
）
（
4
）
表现力
。
图标应该用有感染力的表现方法
，
px;
工和导航栏
44px;
方形图标或
Sffl44
X
44px
（
图
2
）
。
4.2
配色规范
突岀视觉效果
，
完美实现创意和设计风格
。
用户也更愿意接纳
并喜欢
，
把表现力原则放在最后
，
是因为前面三个原则更重
（
1
）
背景颜色
。
部位名称
“
列表表单
、
对话框"
顶部导航栏
、
底割标签栏"
首页背景
、
内页背景"
HSBQ
0,0,10
（
P
RGBQ
ttfafafa^
要
。
要在满足前面三个原则的基础上
，
在力求图标视觉上的表
现力
。
4
APP
图标设计的技术实现
4.1
尺才规范
0,0,98^
0,0,94^
#fOfOf
（
P
手机有不同系统
、
不同尺寸
、
不同分辨率
，
对应的
APP
图标
⑵文字颜色
。
名称"
设计也略有不同
。
下面以
IPhone6,
4.7
英寸
，
750x1334
型号手
HS6Q
0,0,10
（
P
RGBQ
tiffffff*
21
^999994
机为例
。
（
1
）
字体
。
中文字体
：
苹方
ZPingFangSC;
英文字体：
San
主鱼
，
辅肋色按钮文字心
失效
、
稱肪性文字"
提示文字
U
辅助
、
歎认状态文字
Q
标题
、
正文文字
4
Francisco
Pro
o
0,0,60^
0,0,40P
0,0,
20
p
#66666
沖
#333333^
（
2
）
界面尺寸
：
分辨率
750
X
1334
px;
逻辑分辨率
375
x
667
px;
Asset@2x;
尺寸
4.7in;
PPI326x
326
px;
状态栏高度
40
5
结语
px;
导航栏高度
88
px;
标签栏高度
98px
（
图
1
）
。
I
-----
750
px
------
1
伏姦牟
S40px
要设计出符合市场需求
、
用户接受的
APP,
就必须遵循一定
的规则，
针对不同系统、
不同尺寸
、
不同分辨率的手机
，
设计
出对应的
APP
图标
。
有了规范
，
开发者才能更快
、
更好地制作出
符合要求的
APP
图标
。
【
参考文献
】
[1]
罗萍.广告视觉设计基础
[M].
厦门大学出版社
,2013
[2]
任然.
UI
设计一从图标到界面的完美设计
[M].
重庆大学出
图
1
图
2
版社
,2019
⑶
https:/
/
/a65804878
/
（
3
）
图标尺寸:
APP
Storel024
X
1024
px;
应用程序
120
x
120
px;
主屏幕
114x
114
px;
Spotlight®
索
58px;
标签栏
75
版权声明：本文标题：手机APP图标设计规范探讨 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1714635939a415154.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论