大公司总是试图简化他们的支持和开发大型产品组合。 邮件。 俄文组(在俄罗斯这两个最大的互联网公司之一,每月有超过1亿用户),大约有40个产品——更多的如果您添加移动和平板电脑网站和应用,推广网站,等等。我的团队处理几乎一半的他们,在不同阶段的大约100个正在进行的项目。 我们的目标是这些产品更新和统一周围几个准则。
本文将讨论的转变我们的网站设计过程从经典原型→设计→模型→HTML实现方法为每一个屏幕 现代和高效的基于框架的方法 。
在2012年代中期,我们推出的手机网站mail . ru的新闻。 这是第一个项目的基础上设计和技术平台,我们将内部称为“引导类固醇。 “现在我们有9个产品建立在这个框架和一些即将到来。
截图的产品:答案,汽车、货币、健康、高科技、星座,孩子,夫人,新闻、天气、体育、电视。
这种方法有几个好处:
的 视觉风格、交互设计原则和信息架构是统一的 。 生产一批产品视觉上熟悉的用户以类似的方式和工作的好处。 也是不错的品牌,因为产品线成为整体。
推出新产品和重新设计现有变得更容易 。 框架有所有必要的UI控件,每个需要模式和组件。 它还可以帮助我们建立新的设计真的很快。
控制大量的项目很容易 当他们都以同样的方式建造的。 而不是密切关注一百个独立的项目,你只需要控制的核心准则。
的 现代设计过程 意味着我们正在设计的代码而不是经典原型→模型→HTML→实现方法为每一个屏幕,会产生很多不必要的工件。
有任何有效的产品决策 累积效应 。 例如,我们可以增加体育网站上翻页度量,然后这些增强功能适用于所有其他产品。
我们从大每两年重新设计 不断更新设计 。 大型设计都是需要花费很多的时间和精力,通常失去一千小改进。
总的来说,它已经成为我们的用户体验战略的一个重要部分。 最重要的事情对我们的框架,它也已成为一种实现技术的统一。 我们多次试图统一我们的设计规范,UI工具包、模式库等,但是他们没有帮助我们作为长期的解决方案。 他们的内部交付设计团队,也很少有开发人员的要求。 我们都知道经常设计可以实现从模型到生产时错误。 然而,如果你曾经使实现准确和可重用之后,那么你会更有自信在设计出货产品的质量。 这就是为什么我相信任何努力的关键阶段统一一套产品实现的水平。
我们的框架是如何工作的
第一个版本是背后的主要思想 编译一个巨大的UI工具包在Photoshop 所有UI模式,控制和常见的屏幕。 这是一起在Adobe InDesign线框图模板,外观类似的设计模型。 重要的是让它看起来像一个真正的产品,不仅仅是灰色块。 尽管这些线框模型有小差别,他们足够好现在和与经理和开发人员讨论。 当我们开始一个新项目,我们线框排版软件名称中所有屏幕,容易转换成一个可点击的PDF原型对智能手机的看法。 如果有任何新的UI模式,我们模拟在Photoshop的细节,然后将它们添加到排版软件名称库。
UI工具包在Photoshop的快照。
所有的新模式是包含在统一的代码库。 我们编译完成页面HTML的现成的组件(如评论或相册)工作原型。 此原型设计师审查和有机会增强的视觉和交互设计特定的页面或块。 通过这种方式,我们可以找出许多小问题和想法,没有工作在早期阶段。
这是一个存储库的结构:
--------
touch.news/ blocks/ logotype/ logotype.png /* Compiled from blocks and toolkit. Blocks includes pseudobundle common.css */ bundles/ article toolkit/ blocks/ logotype/ logotype.xml section/ header/
-----------------
我们使用模板引擎来显示一个页面在用户的浏览器中。 它构建一个决赛,有效使用代码和格式良好的HTML页面,图像的资产,一个UI模式的样式和脚本。 每个页面模板都有一组规则 构建页面:块的类型和他们的订单。 值得注意的是,一个模板和数据来构建一个特定页面分离和独立加载。 它帮助我们节省流量,增加速度。 例如,如果一个用户看到一个新闻列表,那么它的模板将在浏览器缓存,因此只有下次下载的内容。
模板引擎的概述。
当我们拿出一个新的设计模式或组件(例如,一个新的方式来显示一个相册),然后我们改变它的原型,原型和代码库。 然后,每个项目从统一存储库更新,几乎像一个应用程序从应用程序商店。 最好的部分是,设计师必须审查只有一个实现统一的代码库,而不是检查每个产品。 他们可以确定最终设计的质量。
当前的设计过程与框架。
我们将重新考虑UI工具包很快。 设计师将代码而不是创建和更新静态比较在Photoshop和排版软件名称。 但到达那里,我们必须通过创建和实现框架的整个过程:
创建一个参考设计平台。
重构的设计过程。
技术方案已经调整和核心产品任务已经解决,所以你可以摆脱大多数设计工件和创建新的屏幕的现成的模块统一的代码库。
重构设计。发布12个产品需要大量的时间,所以发射后发现很多问题。 设计趋势也发生了变化。
以上内容来自网络，翻译有限，希望对网站设计的人员有所帮助！转载请标明来自北京网站建设-www.ccxcn.com.
