Ubuntu Kylin技术论坛

 找回密码
查看: 726|回复: 7

UKUI桌面环境之UKicon

[复制链接]
  • TA的每日心情
    慵懒
    3 天前
  • 签到天数: 235 天

    [LV.7]常住居民III

    发表于 2019-2-26 09:25:38 | 显示全部楼层 |阅读模式

    1、为什么要设计一套UKicon?

    图标(icon)是具有明确指代含义的计算机图形,一般来说,图标被定义为用于沟通用途的、具备高象征性意义的图像。研究结果表明,大部分人感知图像的速度比感知文字更快,所以使用易于识别的、清晰的图标能很大程度上增强界面导航的有效性,其在用户界面中的作用无法估量,能帮助实现高效的人机交互流程。


    优麒麟设计团队为了给用户提供一个更亲切友好的人机交互环境,形成自己的系统风格与视觉效果,主导设计和开发了UKUI桌面环境,而UKicon就是UKUI设计的重要组成部分。


    2、设计图标需要注意些什么?

    (1)图标设计的第一原则是要表意准确、清晰,图标中不包含非必要的图形元素,用户能够轻松理解图标的含义。


    (2)在设计时还要考虑到图标符号认知延续性,尽量不要去改变用户常年积累的图标记忆。一些约定俗成的代指符号,符合所有用户认知与使用习惯:比如爱心代表喜欢;✓代表确定。


    (3)明确自身的用户定位与用户群体的使用习惯,不同人群对图标语言的识别能力是不一样的。从普及和推广操作系统的定位出发,优麒麟系统的目标用户群体年龄层次跨度较大,人群职业分布广,在设计图标时,比起新颖流行更注重传统与延续。


    (4)图标在不同的尺寸和分辨率下均能保持统一性、完整性。在不同的硬件设备上都能有较好的显示效果。


    (5)Icon设计风格与UKUI系统整体的视觉效果要保持一致性,不能脱离UKUI的整体设计风格。


    3、图标在应用中遇到的问题

    优麒麟系统从13年开始发布第一个版本Ubuntu Kylin 13.04到最新的优麒麟 18.10,设计团队一直在寻找最合适的设计解决方案。系统icon经过了几个版本变化,由摸索阶段的Ubuntu默认图标结合拟物风图标,到尝试以自主设计扁平风图标为主,以开源图标作为补充。在其中也遇到了不少问题:


    (1)部分图标代指含义存在时代滞后性,如iPhone图标还是用固定电话图案;电脑显示器还是用笨重的显像管显示器图案;


    (2)图标包含了自主设计图标、开源图标和软件自带启动图标,猛一眼看过去风格类似,并列摆放时区别就明显了,大小、颜色、阴影、倒角都有细节差别。



    (3)图标包包含图标数量少,无法满足系统图标整体替换的需求,使用后界面反而出现多种不同风格图标混杂的情况。



    (4)个性化、极简风图标,过于追求设计性而弱化了icon的代指表意功能,导致图标的可读性、实用性、功能性不足,在使用中造成误读,用户的使用体验不佳。


    4、制定UKicon设计规范

    为了弥补以上缺陷,我们吸取、分析了各类图标的优缺点,制定了一套统一风格的设计规范:


    (1) UKicon设计用色色板:


    UKicon图标用色色板规范用色共有16组主要用色、3组补充用色和黑白两色,共计113种颜色。其中又分为主题色、描边色和装饰色。主题色为跨上下两组色系的渐变色。


           从色板展示可以看出,UKicon的用色选色明亮、色相跨度大,色彩组合效果多样,整体亮眼醒目。可以更好的与桌面主题和壁纸相呼应。



    (2) UKicon设计尺寸模板:


    UKicon图标的尺寸有16×16、22×22、24×24、32×32、48×48、 64×64、96×96、128×128、256×256、512×512。10个尺寸涵盖了系统使用涉及到的全部尺寸。在使用不同分辨率显示时都能保证图标清晰。



    (3) UKicon设计视觉规范:


    基于视觉特性的分类

    a. 直角线性图标(action、animations、emblems、panel、status文件夹):主要应用在提示性图标和功能性图标中。


    直角线性图标,通过粗细一致的线条绘制,直角画型。高度概括出图标,主体单色,局部使用提示色点缀,直角往往给人以刚毅、果断、准确的感觉。



    b. 直角轻拟物图标(devices、mimetypes、places文件夹):主要应用在PC端的系统图标。


    轻拟物+渐变+直角风格形成的风格。保留拟物图标的“一看即知”图形特点,减轻拟物风的质感、阴影、纹理,在此基础上做直角画型,加上颜色明亮的渐变。介于拟物图形和扁平图形之间,形成一种独特又熟悉的视觉语言。



    c. 半扁平图标(APP文件夹):启动类图标(APP)主要在优麒麟系统pc端程序启动项和移动端应用。


    设计上增加了一个渐变色圆角托底,打破了直角线条带来的锐利感,显得更圆润。大色块底色更适合移动端界面上阵列展示图标的显示效果。颜色上,以不同色系为应用分类,让用户使用体验更友好。



    5. 完成设计成果展示

    (1)完成icon数量统计


    UKicon最终完成图标分为9个文件夹,共计3530个图标,涵盖了系统图标、提示性图标、软件界面功能图标、常用软件的启动图标等。基本满足优麒麟系统的所有界面显示需求,每个图标都有多种尺寸,png和svg两种格式。


    文件夹
    个数
    尺寸
    action
    673
    14x14、16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256、512x512
    animations
    72
    16x16、22x22、24x24、32x32、48x48
    apps
    731
    16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256、512x512
    devices
    243
    16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256、512x512
    emblems
    63
    8x8、16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256
    mimetypes
    625
    16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256、512x512
    panel
    285
    16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256、512x512
    places
    164
    16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256、512x512
    status
    674
    16x16、22x22、24x24、32x32、48x48、64x64、96x96、128x128、256x256、512x512
    合计
    3530


    2)设计成品图展示



    桌面及开始菜单界面设计效果图



    文件管理器界面设计效果图



    控制面板界面设计效果图


    (3)Icon实装图



    优麒麟18.10桌面及控制面板


    怎么样?通过小编的介绍,大家是否对系统图标有了更深刻的了解呢?没想到这小小的图标,也有这么多讲究,欢迎大家提出您宝贵的意见哦!



    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    回复

    使用道具 举报

  • TA的每日心情
    开心
    5 天前
  • 签到天数: 52 天

    [LV.5]常住居民I

    发表于 2019-2-26 18:36:57 | 显示全部楼层
    非常棒,很用心
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2019-4-30 09:54
  • 签到天数: 29 天

    [LV.4]偶尔看看III

    发表于 2019-2-26 20:32:34 | 显示全部楼层
    细微处见大学问
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    3 天前
  • 签到天数: 235 天

    [LV.7]常住居民III

     楼主| 发表于 2019-2-27 08:53:06 | 显示全部楼层

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    3 天前
  • 签到天数: 235 天

    [LV.7]常住居民III

     楼主| 发表于 2019-2-27 08:55:19 | 显示全部楼层

    哈哈
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2019-3-17 09:02
  • 签到天数: 57 天

    [LV.5]常住居民I

    发表于 2019-2-27 11:25:07 | 显示全部楼层
    设计图标时尽量不要去改变用户常年积累的图标记忆这一点我觉得很重要,因为目的是让用户使用的方便、得心应手,而不是刻意追求不同。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    3 天前
  • 签到天数: 531 天

    [LV.9]以坛为家II

    发表于 2019-2-28 10:32:11 | 显示全部楼层
    图标就像一个人的脸面,必须有特色才能被人认出。支持uk,继续优化。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    3 天前
  • 签到天数: 235 天

    [LV.7]常住居民III

     楼主| 发表于 2019-2-28 10:49:03 | 显示全部楼层
    huangyuhhh 发表于 2019-2-27 14:25
    设计图标时尽量不要去改变用户常年积累的图标记忆这一点我觉得很重要,因为目的是让用户使用的方便、得心应 ...

    挺对的,见图识意!
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|Ubuntu Kylin    

    GMT+8, 2019-5-24 22:45 , Processed in 0.171598 second(s), 9 queries , File On.

    Copyright ©2013-2019 Ubuntu Kylin. All Rights Reserved .

    ICP No. 15002470-2 Tianjin

    快速回复 返回顶部 返回列表