MXDer
2018.5.2
自界面设计诞生的20年间,设计还原度不高的问题一直困扰着设计师们。设计稿高大上,还原出来却面目全非。解决界面还原问题一直是不断考验设计师和开发们眼力和耐心的过程。终于我们的设计师使出洪荒之力,亲自操刀设计了“他山石”APP来解决这个问题。
“他山石”是一款Android端的视觉还原走查工具,可以通过以下视频了解基本功能:
表象的问题是:界面还原度不高,技术思维对同一件事情的解析和出发点不同,导致对同一个问题的不同看法。
技术思维的特性:解耦思维,降低耦合度、代码复杂度,提升代码独立运行能力。
设计思维的特性:本质性思维,通过一系列的问题剥开层层表象,直达问题本质。
底层、框架、代码、界面分离以降低耦合度,保持相互独立以降低代码的复杂度和良好的运行能力。所谓的视觉是MVC(Modeler、Viewer、Controller)中View视觉控件中的一系列的界面参数,技术关注具体的参数相差多少,然后具体调整多少参数。对于类似这样的话“你只要告诉相差多少,加大几号字体,什么颜色值就好”你一定不陌生。
设计思维的本质性思维就是通过一系列的提问,找到解决问题的关键点。
· 我们要解决的问题是什么?
走查还原问题
· 走查的本质是什么?
对比两个界面之间的差异
· 他们都怎么对比?
· 开发为什么对比得没有设计好?
· 思维方式可快速复制给开发?
设计走查的的思维和方式是被验证有效、且一直在设计侧实行的有效解 决方案之一,证明该方式已经具备一定的可行性
· 有无更好的解决方案?
在此基础上,是否有更方便更高效的走查方式,比如智能界面检测对比?我们也就在这个方向的可行性上作了一轮预研,Android手机端的布局信息和Sketch的布局信息完全不一样,如果要统一设计和开发的布局框架信息,对执行标准要求非常严格,最后我们放弃了智能检测对比的方案,出发点是如果不能给出有意义的检测结果和建议,那么对于走查并没有根本上的帮助。但我们在会努力在PC端去尝试更智能的检测方式。
· 什么样的工具可以解决这个问题?
想像一下如果有一款手机端的走查工具,无论你在工位、会议室、外出、家中,你可以随时随地完成走查,那会怎么样?
“他山石”就是这样一款工具
它针对Android移动端的特性,使用悬浮窗菜单的方式,可以在任何界面上方呼出工具栏,通过导入设计稿后,将设计稿覆盖在界面上方,进行详细对比,具体功能一览见下图:
产品定位及功能
· 确定产品定位
· 确定产品功能
· 同类产品分析
· 主界面展示
悬浮菜单及主要功能
取色功能和网格功能
设计反响
目前“他山石”在应用宝内部推行试用,给设计专业以外的人士,提供了一种简单快速的方式来完成走查。在合作中收到很多正面的反馈,界面的整体还原度有较明显的提升,不少开发童鞋整体还原度在90%以上,有些相对简单的页面100%还原,比如下图这种常见的卡片还原,是开发童鞋自己用“他山石”走查的截图,一次通过率较高。
根据我们接的运营后台统计发现,“他山石”在除了应用宝内部,也被用户主动传播,这也给我们更多的信心继续完善他山石的体验。
他山石现在对外开放,发送消息“他山石”即可获得下载链接。