首页 » 智能家居 » 解析!界面图标设计

解析!界面图标设计

上海市建筑装饰工程集团通讯 2025-02-06 0

扫一扫用手机浏览

文章目录 [+]

图标设计原则

图标设计的基本原则包括:辨识度高、风格统一、视觉都雅、图标的辨识度高,表意准确,能让用户一眼就明白图标的含义;图标的风格统一,使全体界面具有很好的整体感;图标的视觉都雅,能提高用户的关注度,利用户得到良好的体验感。

解析!界面图标设计 解析!界面图标设计 智能家居

为了提高图标的辨识度,图标设计不能过于个性化,让用户难以理解。
常日做设计之前,会参考同行业成熟产品的共性和特性。
图标的风格统一从图标的尺寸、线面类型、色彩、圆角 大小、透明度、倾斜角度、投影、渐变样式、风格等方面动手。

解析!界面图标设计 解析!界面图标设计 智能家居
(图片来自网络侵删)

图标设计步骤

制作一个好图标,既要考虑图标的辨识度、都雅性和统一度,也要考虑图标运用界面的文化、未来显示的载体以及不同产品的分外哀求等。

图标设计过程大致分为三个步骤:借鉴线上产品尺寸, 确定图标的尺寸大小,如 Tab 栏图标大小 48px× 48px,首页图标大小 56px×56px,金刚区图标大小 90px× 90px;利用现实图库提炼实物图的共性形状,参考借鉴成熟的图标库。

在设计制作完成图标后,还得做任务测试,进行设计细节自查,如设计的统一度、呼吸感、色彩感情、业务联系是否符合哀求;开展辨识度测试,遮住图标笔墨描述字段,做基于无背景的和有背景的图标可识别测试,看用户能否理解图标的含义。

金刚区图标设计

金刚区是 APP 首页的主图标区, 位于页面中上部, Banner 栏下面,其内容每每随公司活动须要随时灵巧调度。
因此,金刚区图标具有需求层次高、色彩丰富、以面性图标为主的特点。

在设计之初,确定金刚区图标尺寸等根本规范:多借鉴成功产品的布局及尺寸,大多数产品金刚区图标尺寸为 90px 旁边;设计图标良好的呼吸感,设计图标内部的呼吸感知足黄金分割比,图标和笔墨间隔统一,图标四周间隔统一为图文间隔的倍数。

在绘制图标形状前,还需进行造型再设计,紧张考虑担保造型表意 的准确性及造型的简洁性。
颜色方面,金刚区图标色彩丰富,图标的配色紧张考虑 色彩感情对图标辨识度的影响。

配色过程常日为:确定主题色,选取主题色的临近色和比拟色,结合图标的功能表 达及色彩感情,从主题色及其临近色和比拟色中选取得当的色彩。
在配色中把稳掌握各色相的饱和度和明度在统一比例, 以担保各图标色调的和谐统一。

Tab栏图标设计

相对付金刚区图标的设计,Tab栏图标在形状设计和样式设计上要大略很多。
Tab栏图标设计尺寸常日为 48px。
Tab栏图标设计根据用户群体及APP主题表达确定图标风格。

例如:如金融类 APP的给人端庄可靠感,Tab栏图标做成 4px的线性图标,90 度直角棱角分明, 选中图标为面性图标;电商类 APP的用户宽泛,设计必须迎合不同年事层次的用户,采取简约图标设计风格,Tab栏图标采取 3px 线性图标,4px圆角,选中图标有错层阴影和色彩变革。

总的来说,好的设计既要好看又要好用。
图标布局以业务、功能和需求为出发点,安排主要功能图标 靠前放置,勾引用户利用干系功能;有良好的预见性,利用有效的图标辨识度完美展示其功能内容,利用色彩感情唤起用户精确的感情。

(此处已添加圈子卡片,请到今日头条客户端查看)

标签:

相关文章

淮安人留心!接到0517-95588电话不要信

淮安有工行信用卡的朋友请把稳,如接到(0517 -95588的电话来电审核银行卡异地消费,莫上当!加区号的95588不可信,工行做...

智能家居 2025-02-06 阅读0 评论0

这一次京东杀向低价腹地

01 力排众议,低价撕扯枪声密集、炮声隆隆,京东在打一场持久战。2022年冬天,京东重启低价的旗子暗记,通过群邮件、会议等形式不断...

智能家居 2025-02-06 阅读0 评论0