恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
纯干货!美女设计总监谈国内首个自主设计的移动OS
0.0°
2016-06-28 原创文章 经验/观点 举报 2517 10 17 6

几年的回顾,慢慢都是回忆。还有很多不足,还要继续踏实的做下去。

Image title


本文系元心OS设计总监杜雪的分享文章,转载请注明。

这是一篇关于自己从零设计和开发移动操作系统的分享。


元心OS不是安卓,也不是改自安卓,它是一个基于Linux自主研发的移动OS。其中每个应用、逻辑、标点,均是从零设计。所以,我想向大家介绍设计的过程,分享其中的感悟。


Image title

设计系统是件超有意思的事情,同时也会疯!想象一下,同时设计30多个应用,遵循一样的系统规则,使用相同的系统公共控件,区分所有的差异以及场景并进行处理,并且一切都是从零开始,我们是从先确定系统锁屏、桌面、应用应该怎样打开、关闭开始讨论的,后来确定的是做哪些系统默认App和版块。

Image title

【OS的开始之路】
首先,规划系统结构、手势、层级关系。(这个非常重要,因为这决定信息同时并发时,究竟谁压着谁。最初没有定义层级的时候,通话界面一直显示不出来,因为他一直被改在桌面下面,又或者闹铃类的通知永远被盖在锁屏下面一样,诡异的铃声一直响。)

Image title


Image title

其次,确定系统App究竟做哪些。

系统应用和三方应用的差别是:系统应用受OS控制,每次OTA升级必须和系统强制一起升。三方应用是独立在应用商店里发布,用户手动点击升。

此外,系统应用的权限和使用的模块和三方应用是完全规则不同的。我们最初的IM,是按系统应用做的,但最后又改为了三方应用,这个就是开始没有定义好App的属性而走过的坑。


下面是最初定义的OS默认应用框架,图很糙,几乎和开始设计是同步的。

Image title

下面是系统相关的功能关联模块,这个关联是设计了一年半之后,才能汇总出来的。这个的作用是为了方便修改任何一块,可以快速确定其他关联模块要同时修改。可能涉及的组有6个都不止。所以任意一个看似简单的修改,都需要大量的时间讨论以及人力修改。

Image title

第一个独立办公室——茶水间。一个多月的时间里,我们确定了未来一年要做的框架。最初期,我们的目标希望可以快速做出1.0,寻求用户习惯及共性。大量的工作和紧迫的时间,让每个人心里都绷着弦,希望顺利、少bug地完成1.0。

Image title

Image title

2013年10月-11月,我们的公共控件以及动态设计完成。下面是部分控件列表包:

Image title

2014年2月,一个值得纪念的日子,我们第一次看到了自己的手机!这里要讲个悲伤的故事,在此前6个月的时间里,我们一直使用纸糊的手机ID假装自己的手机,从来没有见过硬件和实际的研发用机。我们的设计稿也是在安卓和iOS上看效果,因为我们系统还不支持看到系统UI。紧张忙碌的前半年,经过我们的底层、中间件和上层人员通力合作,才终于在半年后,看到手机,终于可以run系统啦!不再只是装到其他手机里的图片,不再只是假想的原型,终于可以正式测试了。

最初界面显示和功能bug,基本完全无法看。窗口管理器一片混乱。

测,改,测,改,这个状态差不多持续了一年多时间。整个这段时间,我每天脑子里都是30多个应用和几千个画面以及最少几十份文档,每天看,每天改,每天过……以至于那段时间,只要说一个功能,我脑海里直接飘过的是几十个系统里面出现的界面的样子和文字,然后快速给出确定方案和意见,再让设计师来设计完成。这个过程中时常发现文字的不统一,规则和定义的不明确,所以导致设计师和开发在针对一个问题的时候,经常改来改去,其实最核心的,是模块的用法以及适用场景定义不明确。所以我们在交互规则以及系统规则中,将所有可明确的内容,一遍一遍地修改和定义完整。这个过程也是非常重要的环节。从那之后,我们每遇到一个问题,设计师都可以很快独立定位问题所在,并设计方案。

Image title

Image title

Image title

同时期确定ID,1.0为物理按键,2.0已是软物理按键。

修改模型,打样、修改……

Image title

Image title


设计定版LOGO。

Image title

不断优化补充公共控件。

Image title

Image title


第四版公共控件。V1.5。

Image title

动态标注规范。

Image title

Image title


确定模块UI规则及公共控件。

Image title

Image title

Image title


Image title

Image title


2.0我们将所有App以智能文件方式打包。这样对于App整体的把握和修改以及查找内容都非常方便,也推荐大家尝试。

Image title

撰写系统设计规则。

Image title


撰写公共控件+系统规则。

Image title

撰写动态规则。

Image title

几十套桌面主题及100多张壁纸。

Image title

122份交互原型&文档。

Image title

4093张UI输出图片(仅限元心OS V1.5上线)。

239个动态设计(仅限元心OS V1.5系统上线)这些都是一个动态设计师设计出来的,为自己点赞10000次,每次看到这些过去的文件,当时的辛苦还记忆犹新。

Image title

下面是一些细枝末节的问题记录,细节决定成败,妨碍你成功的永远不是远处的大象,而是脚下的蚂蚁。设计无大小。优质的解决方案,需要更多的专注。

Image title

动态桌面+桌面动态天气。

Image title

摸索出元心2.0风格——红之中国风,科技与中国韵味的融合,流动、融合、包容。

Image title

Image title

Image title


Image title

Image title

延续中国风设计和绘画壁纸主题。

Image title

Image title

下面给大家分享下一些设计系统的小心得:

【设计App和系统的差别】

给大家举个例子,可能更容易理解:设计一个App就像在一个城市里盖一栋楼;设计一套系统,就像规划一个城市。城市的交通、水利、工商、环保、建筑、安保等等均需整体规划。规划好,再说,哪里盖栋楼,楼要符合市政规定及要求。

我将Andriod、iOS和元心比作广州、上海和北京。广州更开放,上海更小资,北京很皇城根儿。嘿嘿~

做系统是个整体的庞大工程,例如芯片、内存、屏控、内核、通信模块、网络模块、媒体模块、数据管理模块等;最上面才是界面开发工具及图形包和开发的各种语言的SDK,最上层是安全云平台及系统Push推送、认证、商店等……所有系统的架构、机制、服务、我们都要独立开发改进。我们所做的或者大家能看到都是上层的东西,其实从整体的系统来说,这些能看到的都只是冰山一角。

我们的系统是针对B端的定制安全解决方案。安全并不是做个安全应用,或者系统做些安全处理即可的事情。安全必须是软硬件一体化设计,安全芯片、通讯、网络、机制等一体化整体规划和实现,才能做出真正的安全手机。

所以很可惜,大家在市面上看不到我们的手机和系统。这也是我不知道该如何写这个文章的原因,希望有朝一日,C端市场可以早日看到我们系统哈~


【元心OS设计理念】

以用户的流畅使用为目标,内容、样式、交互、功能均以此为设计中平衡的标准

完整、一致、统一 —— 设计系统需要更多的理性和强控制

发展可延续的设计 —— 简单、易用、链条短、方便拓展

弱耦合,强控件 —— 减少功能耦合带来的修改,提高控件复用效率

为移动场景设计思维模式 —— 保证系统对多场景的通用及合理性

高效、自动化、为用户记录 —— 为中断场景而设计

一切皆有反馈 —— 无论软件或硬件,要保证用户的操作可感知

强化品牌样式差异,弱化使用差异 —— 越简单的东西,越通用


【系统设计实用十步】

一、确定锁屏、解屏、进入桌面方式、应用打开方式、关闭方式,任务管理器,通知、快捷功能及其他比如桌面搜索、应用快速定位等的操作方式及布局。

二、确定系统一共做哪些应用及板块。

系统级:锁屏、桌面管理、状态栏、通知、快捷方式、任务管理器等。

应用:电话、短信、联系人、浏览器、设置、相机、照片、文件管理、下载、邮件、录音机、音乐、视频、时钟、日历、输入法、记事本、天气、计算器、应用商店、文件管理器、升级等。

业务应用:IM、office、MDM、OA等巴拉巴拉~

三、规划每块功能点,梳理相关功能的系统逻辑。

四、并行所有App的交互设计,并和开发评审、修改及确认。

五、抽取所有交互中的通用模块,规划为公共控件。

(同期公共控件开发,公共控件开发完,修改设计中的模块为公共控件并标注,周知所有App开发使用公共控件。)

六、根据交互设计进行应用、公共控件UI设计,同时进行动态设计。

七、对交互、UI和动态,进行和开发的确认。

(注:动态尽量要和交互一起给开发,因为不同的动态效果会影响整个App开发的架构。)

八、开发,并行同时的各种调整。

九、测试,一定要针对交互和UI有专项测试,以及自动化测试。我们实现的并不理想,所以消耗了设计师大量的时间在找bug和找开发修改上。

十、根据已发布的版本,重新梳理框架、增加和优化公共控件,撰写系统规则,优化工作流程。循环,设计新版本。


【系统设计难点】

一、通用规则和公用控件。最初规划的公共控件,是很难满足各种场景需求,所以我们在1.0边做边完善的过程中,一直持续将通用的和遇到频率高在两个应用里的模块随时记录并抽取出来,规划为新的控件。在后续1.5及2.0不断增加和修改。

二、初期并行设计及开发难统一。最最初,在还没有详细的规范和控件的时候,同时并行设计30个应用,很难让每个应用设计的都体验一致,包括文案、浮层、系统结构,弹toast还是警示浮层,如何定义这些模块的使用范围及使用方法。定义写清楚并让所有设计师及开发理解一致,也是很大的成本。

三、沟通成本巨大。几个设计师对200多个开发,想象一下其中的酸爽……

四、没有产品经理。功能、流程、方案、沟通、决定都是由设计师主导的。所以在这个过程中设计师的思维成长非常迅速。所以现在你问谁对系统所有的逻辑和功能最了解?是设计师。

五、关联功能及强耦合。同样的功能在不同应用中差异的表现,以及一个应用中修改设计方案,要涉及到其他几个不同的地方同期进行调整。

六、系统动画很难做。系统需定义手势、时间、阈值、曲线等规则及参数,并要定义每个模块动态的顺序,以及解决系统动态卡顿以及性能影响问题。

七、输入法很难做。没有字库、没有九宫格,并且因为系统没有多点触碰,我们改了两年的热区……

八、系统声音机制——最复杂,最并发,最交叉,最头疼!

系统声音的类型非常多,通话、闹钟日历提醒+临时声音、语音邀请铃声&语音通话、通知、媒体。其中还包括物理按键声音,以及物理按键对声音及快捷功能的场景设置,比如来电时,点击任何音量键可执行静音功能,点击power键可执行拒接功能等。

系统的声音针对不同场景,要设置并行或前后播放的机制,以及一个声音被临时重要功能打断后,是否自动续播,自动续播也有条件,比如耳机是否连接,是否有蓝牙外设,是否符合续播标准等,比如听音乐过程中,如果你接了一个电话此时铃声响起音乐消失,结束通话后音乐会持续播放;但在此时,你接电话时插入或者拔下耳机,结束通话后,音乐则不会续播。这个规则的标准,是为了保证用户当手动改变场景后,需要自动重启,否则可能出现使用场景上的问题。总之定义问题的时候,一定要进行分类和区分场景,这样才能为更多的场景进行决策支持。


【总结】

设计操作系统,需要更多的大局观和系统思维。要以点触面地来考虑问题,尽量避免只看到眼前的一个界面或者icon或者一个动态。功能、场景、交互方式、内容信息、结构、UI样式、反馈、动态、速度、效率、完成率都是一体化的设计思维。当你把一个界面放到一个流程、放到一个系统里,你会发现,它可能只是这座城市一栋楼的一扇窗户那么大。

所以设计师的思维和眼界需要更多地跳出好不好看、用什么软件做、怎样做完最漂亮这个维度,当然前面说的这是最基本最基本的基功。设计师要更多地了解和观察以及思考。做文档或者设计原型及UI,都是你可能思考了半年后,然后用两个小时完成的结果。所以

前面的半年每天的思考才是你更高的价值。

做了很多年互联网产品设计,这是我觉得最最最爽的三年,也是最煎熬的三年,但非常感谢我的同事和公司,我们一起将它做出来了,虽然还有很多的不足,但从零到一,也是需要坚持的勇气的。非常庆幸我们有个强大的团队,这么多人做如此高关联的事情,且并行,真的需要高度的配合和默契的团队,谢谢我的同事和朋友的支持~真开心有你们。

未来我们还有很多路要走,要不断反思,学习、实践、改进。

路漫漫,我与伙伴将一同继续前行,愿明天更美好!*\^0^/*

Image title

Image title


更新:2016-06-28

收藏

10人已收藏

雪花花

设好玩儿的计儿,做好玩儿的人儿~~~哒哒哒~

  • 8

    作品

  • 35

    粉丝

  • 0

    关注

  • 毛毡内核的冰棍也不是那么冰哈~
  • 设计师撩领导专用表情
  • 系统相关联功能的设计方法
  • 怎样设计出自己风格的操作系统 ——元心OS2.0视觉风格概念

    猜你喜欢

      2016-06-28 原创文章 经验/观点 举报 2517 10 17 6

      纯干货!美女设计总监谈国内首个自主设计的移动OS

      0.0°

      你确定要举报纯干货!美女设计总监谈国内首个自主设计的移动OS

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年06月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      17
      10
      6

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录