亚博账号登录

莫b

阿里云向全球200多个country和region的企业、开发者和政府机构provide云计算product和service,那么user通常how 去使用this些云product呢看鸢甘通过控制台。控制台是统一查看和管理云product及service的平台,user能够通过图形化界面对云product进行配置操作。this是一个承载着超过100万付费云计算user梦想的平台,We就是this个平台的设计师、造问Α

上百款云product通过控制台为userprovide云计算service,this些云product设计的背后有一个共同的名郑Xconsole—— 为设计师、开发者provide了一站式的设计及开发解决programme。

Xconsole 的诞生是一个不断积累、验证、聚合的过程,是对大型复杂product簇设计方法深度思考后的结果。thisamong有very多值得分享的经验和方法,believe对于想了解B类、企业级、特别是管控类product设计的classmate会有所启发。because信息量会比较多,this里We先以三个不同的维度带everybody初识 Xconsole 设计解决programme,每一个维度的more信息We会stay之后的系列文章后中进一步展开分享。

第一维 核心设计力

1. 设计规范
设计规范是打造设计解决programme的基石。user看到的、使用到的All元素都需要被准确的定义、需要清楚描述它们的使用rule,让规范的使用者感到清晰易懂、不会产生歧义,能够与你一同为user筑造相似的「梦境」。
构成设计规范的元素是逐层聚合的,色彩、字体、Icon、栅格、布局、插画、组件、模块、page面,每一层此萍虻ィ但却都是“牵一发而动全身”的存stay,再微小的变动也probably会不经意间影响user对操作行为的判断,就像撩慰占渲姓通过地毯材质不同的this个小细节find 了own并不是stay现实中,而是stay梦境中。
规范中元素的定义是需要有据可循的,并不是“你觉得被颉我觉得”,more是需要结合classic的设计理论、专业共识、行业背景及brand定位等等。举一个栅格与布局rule的例子,stay管控类product设浦校24列的栅格provide了more的布局组合空间,灵活度也更高,栅格的整体宽度sure通过统计目标user群的屏幕分辨率来确认,而列间距 Gutter、page边距Margin可根据page面的基准单位(比如2px)倍数计算出来,比如16px、24px。
take栅格带入真实场景心慊醘ind still有很多横向、纵向的间距、对齐rule不清晰,Xconsole take斐波那契数列做为重要辅助手段补全整个栅格布局rule,使page面中每一个元素应该how 放置、how 对齐都有据可循。

 

2. 框架结构
We能够依据设计规范构建起user看得见、摸得着的everything谌荩但this并不够,设计师需要从product男畔⒓芄故咏俏猽ser串联起this些元素,provide更好的空间体验、让user不会“迷失”stayWe构建的“梦境”中。We需要通过框架结构的设计为userprovide一种能力,一种能够stay不同功能、page面、product间free切换,但同时又能清楚的感知own所stay信息层级的能力。
信息的层级sure从全局层、product层、功能层、信息模块层逐级递进的拆解,帮助user建立起去相对固定的位置寻找同类信息男闹恰P枰⒁獾氖牵据信息层级确定框架结构的同时,也要保留一定的拓展空间,比如Which强裳〉摹hich是必选的,每一个模块sure有多少类变化等,都需要stay框架的设计初期进行全盘思考,also要takerule与用法向使用者清晰说明。
以阿里云控制台为例,Wetake顶导航做为全局层,任何跳转、切变都不会影响顶导航结梗瞓ecausethis种稳定性,Wetakeproduct的入口、全局型工具的入口也都放置stay顶导航;page面左侧的product功能导航则定位成每个productown的“全局层”,user不论进入哪个product都会很自然的到this里查找所需功能;谌萸ゲ縒eprovide了面包屑层与标题层,通过面包屑让user时谈兄猳wn所stay的page面层级,并能fast速跳转到不同的目标信息层级;标题区则为userprovide了返回“来源地”的能力,userprobablybecauseproduct或功能间的互链来到了另一个信息维度的page面,面包屑仅能告知当前信息维度的层级,userif需回到之前男畔维度,sure通过标题区的返回功能fast速切换。

 

3. 最佳实践
一千personal眼中有一千个哈姆雷特,ifWe仅仅向设计系车氖褂者provide设计规范和框架结梗设计师们probablystill会为user创造出体验差异很大的product,We需要尽量避免this种情况的发生。通过对阿里云近百款云product的设计总结,Wetakeproduct设浦衯eryeasily产生分歧、定义不清的problem进行归纳总结,编写了一系列的设计解决programme最佳实践。比如in the light of错误提示类设计方法的《控制台错误提示信息设计指南》、in the light of各类表单场景的《控制台表单设计指南》等。
除了provide通用类的最佳实践,We男幸迪设计师也不断的总结product线设计programme的最佳实践,比如in the light ofnetworkproduct的《networkproduct接入监控能力》、in the light of流量product的《域名配置指南》,this些行业线类的最佳实践都会成为设计系车谋笞什镏褂者真正的通过设计去解决业务problem。

 

4. 工具化
提升效率最好的方法是provide相应的工具。现实工作中,多数人并不会先仔细阅撩恳惶跎杓乒娣秚hen才startproduct设计,通常是对照线上的同类product界面,先上手搭建原型,遇到problem再看规范。how 让使用者fast速上手是设计规范落地的关键。Xconsole为设计规范使用者provide了规范的Sketch版文件、组件的Sketch Symbol和组件的Axure库,奖悴煌嘈偷氖褂者fast速上郑咝У纳杓瞥龇瞎娣兜膒roduct原型。
但无论是Sketch或是Axure,所生成的设计稿都是无法直接转化为代码的,需要开发者对照设计稿一点点还原;而常见的低代码搭建工具又往往是以开发者的视角provide界面搭建能力,很不符合设计师或product经理的使用预期,为了解决this一系列problem,Xconsole正stay为product设计者们打造一款stay线原型搭建工具,帮助使用者从一个设计师的视角,更轻松、高效完成一个product原型的搭建,而所搭建的product原型未来能够更便捷的转化为代码,真正的为设计者与开发者提效。
对于核心设计力,Wesure通过“更easily被理解”和“更easily被使用”两个坐标轴来构建一个象限。staythis个象限中,ifWe仅provide设计规范,probably会让product设计者不知从何下郑径患郑坏鼻我定义清了框架结梗娣吨械脑赜辛藅o make clear的空间属性,设计者更easilyfast速搭建出可用的product界面,但this时仍然无法为user构建趋同的体验心智;而当Weprovide了设计programme的最佳实践后,Allrule都会“更easily被理解”,We整个设计解决programme也会变得“更easily被使用”。

 

第二维 标准与认证

1. 设计的团体标准
完善的设计解决programme通常强被复制的,能够最大化它男堋etakeXconsole的核心设计力进行了抽象,进一步剥离业务属性,起草并release了云计算行业的首个界面设计团体标准《云计算管控平台界面设计指南》,hopestay更广的范围与everybody携郑萍算product管控平台建立起相近的user体验心智。

 

2. 体验的一致性
阿里云的product是一个系统性product簇,很多云计算product的使用者都强鏿roductuser,ECS、SLB、VPC、OSS等云product同时使是很常见的事,还有一些是混合云user,场景就More复杂,仅日常宋蚿robably会接触数百个不同的操作界面。通过对阿里云核心product设计分析、NPS反馈分析、user访问数据分析find ,大量跨productuser会受到体验不一致的影响,体验的不一致性增加了product的使用、认知成本,提高宋扌Р僮魇背ぁ⒋砦舐剩档土薭rand的归属感、专业感,and体验不一致的差距会随着product迭代越来越大。
体验不一致的成因是多方面的,经过长期的调研,We以Xconsole的核心设计力为基础,结合行业分析、学术分析,总结了一致性度量方法论,并设计了一致性量表工具,通过实践推动more云product体验一致性的提升。We基于一致性评估方法撰写的论文展报,已被ACM收录,并于2019年stayU.S.A奥斯汀ACM CSCW大会scene进行分享。
“this套评估方法Wesure使用吗?”stay大会sceneFacebook、Google Cloud的product专家们也问过We相同的problem,答案是,of coursesure!this套评估方法不仅适用评估product界面的一致性,也sure通过调整问⑵拦辣砣ザ量more领域的一致性!

 

3. 符合性评价
if说团体标准、一致性是设计解决programme中高屋建瓴的“指导建议”,那么符合性评价则是为设计落地质量背书的“official认证”,是对设计解决programme使用水平的认证评价。Xconsole的设计解决programme会被不同的设计、研发team或公司使用,那么everybody对设计解决programme理解、使用的情况需要有相应的评判标准,确保设计programme的落地质量强被预期的。
Wetake核心设计力定义为设计解决programme能力维度,标准与认证则体现了设计解决programmestay不同product、team等的实现结果维度,Wesuretakethis个维度的坐标轴定义为“更好的设浦量”。设计解决programme有可实践的标准与认证体系加持后,We便能够更easily判断:解决programme使用者所搭建的product是否有“更好的设浦量”。

 

第三维 平台与生态

控制台的english叫做console,阿里云的管控类product设计不止于公共云product的console,还包括数据智能设计、企业service设计、GTS、IoT、混合云等多个领域不同的console。而Xconsole的一个重要角色就是承载this些不同领域的设计规范,为theyprovide一个统一的平台,让规范的使用者只跑一次,就能找到与管控类product设计有关的全部信息,让初识管控类product设计user能更轻松高效的了解不同领域的设计规范。
Xconsole 平台中不同领域的设计规范是核心设计力结合各领域的业务场景演变而来的,通过底层组件的打通,形成了基础组件生态,各领域不再重复造轮子。比如按钮this类组件,Westay Xconsole 核心设计力中定义了组件步锹实膔ule为0、2、4、8…的递进,if应用到GTS领域中,because面向的more是政企客户,会使用直角即0px步锹剩鴖tay公共云、混合云领域中,为了体指玫陌菪院凸鄹校崾褂2px步锹剩瑂tay企业service设计领域中则会使用4px步锹省此外,不同领域的设计资产会随着业务的沙ざ欢侠刍恋恚鴅ecause核心设计力的打通,设计资产surefast速形变、复用到其它领域,形成管控类product的设计资产生态。

未完待续

作为一紫低郴管控类product设计解决programme,Xconsole还有很多值得分享的谌荩裎拚习杓啤⒁贫松杓啤⑼急砩杓啤idget设计、设计落地方法等等等等,也请everybody期待后续更精彩实用的干货分享,参与到Xconsole的讨论中,一同思考how 让管控类product设计更简单高效。
后续分享预告
  • Xconsole核心设计力系列 – 色彩
  • Xconsole核心设计力系列 – 步
  • Xconsole核心设计力系列 – 操作与感受
  • Xconsole核心设计力系列 – Icon
  • Xconsole核心设计力系列 – 由杓频酱
  • 标准认证系列 – 无障碍设计
  • 标准认证系列 – 一致性设计
  • 标准认证系列 – 团体标准
  • Xconsole平台与生态

 

原文地址:

author:阿里云设计core

转载请注明:亚博账号登录 » 独家揭秘:Xconsole – 诞生于阿里云的管控类product设计解决programme

登录收藏
 
你probablylike的:
B端设计指南04 —— 弹窗B端设计指南04 —— 弹窗
B端设计指南03 —— 按钮B端设计指南03 —— 按钮
B端设计指南02 — 导航B端设计指南02 — 导航
B端设计指南01 —— 筛选B端设计指南01 —— 筛选
To B设计怎样提高设计师的价值To B设计怎样提高设计师的价值
新零售B端product优化,从product、交互、UI设计的思考新零售B端product优化,从product、交互、UI设计的思考
初做后台界面,该how 下郑初做后台界面,该how 下郑
how 系统性提升中后台product体验how 系统性提升中后台product体验
数据可视化设计浅析与Research(二)数据可视化设计浅析与Research(二)
后台productDashboard设计思考 — 你不know 的折线图后台productDashboard设计思考 — 你不know 的折线图