?大公司總是試圖簡化他們的支持和開發(fā)大型產品組合。 郵件。 俄文組(在俄羅斯這兩個最大的互聯網公司之一,每月有超過1億用戶),大約有40個產品——更多的如果您添加移動和平板電腦網站和應用,推廣網站,等等。我的團隊處理幾乎一半的他們,在不同階段的大約100個正在進行的項目。 我們的目標是這些產品更新和統一周圍幾個準則。
本文將討論的轉變我們的網站設計過程從經典原型→設計→模型→HTML實現方法為每一個屏幕?現代和高效的基于框架的方法?。
在2012年代中期,我們推出的手機網站mail . ru的新聞。 這是第一個項目的基礎上設計和技術平臺,我們將內部稱為“引導類固醇。 “現在我們有9個產品建立在這個框架和一些即將到來。
截圖的產品:答案,汽車、貨幣、健康、高科技、星座,孩子,夫人,新聞、天氣、體育、電視。
這種方法有幾個好處:
的?視覺風格、交互設計原則和信息架構是統一的?。 生產一批產品視覺上熟悉的用戶以類似的方式和工作的好處。 也是不錯的品牌,因為產品線成為整體。
推出新產品和重新設計現有變得更容易?。 框架有所有必要的UI控件,每個需要模式和組件。 它還可以幫助我們建立新的設計真的很快。
控制大量的項目很容易?當他們都以同樣的方式建造的。 而不是密切關注一百個獨立的項目,你只需要控制的核心準則。
的?現代設計過程?意味著我們正在設計的代碼而不是經典原型→模型→HTML→實現方法為每一個屏幕,會產生很多不必要的工件。
有任何有效的產品決策?累積效應?。 例如,我們可以增加體育網站上翻頁度量,然后這些增強功能適用于所有其他產品。
我們從大每兩年重新設計?不斷更新設計?。 大型設計都是需要花費很多的時間和精力,通常失去一千小改進。
總的來說,它已經成為我們的用戶體驗戰(zhàn)略的一個重要部分。 最重要的事情對我們的框架,它也已成為一種實現技術的統一。 我們多次試圖統一我們的設計規(guī)范,UI工具包、模式庫等,但是他們沒有幫助我們作為長期的解決方案。 他們的內部交付設計團隊,也很少有開發(fā)人員的要求。 我們都知道經常設計可以實現從模型到生產時錯誤。 然而,如果你曾經使實現準確和可重用之后,那么你會更有自信在設計出貨產品的質量。 這就是為什么我相信任何努力的關鍵階段統一一套產品實現的水平。
我們的框架是如何工作的
第一個版本是背后的主要思想?編譯一個巨大的UI工具包在Photoshop?所有UI模式,控制和常見的屏幕。 這是一起在Adobe InDesign線框圖模板,外觀類似的設計模型。 重要的是讓它看起來像一個真正的產品,不僅僅是灰色塊。 盡管這些線框模型有小差別,他們足夠好現在和與經理和開發(fā)人員討論。 當我們開始一個新項目,我們線框排版軟件名稱中所有屏幕,容易轉換成一個可點擊的PDF原型對智能手機的看法。 如果有任何新的UI模式,我們模擬在Photoshop的細節(jié),然后將它們添加到排版軟件名稱庫。
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模式的樣式和腳本。?每個頁面模板都有一組規(guī)則?構建頁面:塊的類型和他們的訂單。 值得注意的是,一個模板和數據來構建一個特定頁面分離和獨立加載。 它幫助我們節(jié)省流量,增加速度。 例如,如果一個用戶看到一個新聞列表,那么它的模板將在瀏覽器緩存,因此只有下次下載的內容。
模板引擎的概述。
當我們拿出一個新的設計模式或組件(例如,一個新的方式來顯示一個相冊),然后我們改變它的原型,原型和代碼庫。 然后,每個項目從統一存儲庫更新,幾乎像一個應用程序從應用程序商店。 最好的部分是,設計師必須審查只有一個實現統一的代碼庫,而不是檢查每個產品。 他們可以確定最終設計的質量。
當前的設計過程與框架。
我們將重新考慮UI工具包很快。 設計師將代碼而不是創(chuàng)建和更新靜態(tài)比較在Photoshop和排版軟件名稱。 但到達那里,我們必須通過創(chuàng)建和實現框架的整個過程:
創(chuàng)建一個參考設計平臺。?
重構的設計過程。?
技術方案已經調整和核心產品任務已經解決,所以你可以擺脫大多數設計工件和創(chuàng)建新的屏幕的現成的模塊統一的代碼庫。?
重構設計。發(fā)布12個產品需要大量的時間,所以發(fā)射后發(fā)現很多問題。 設計趨勢也發(fā)生了變化。
以上內容來自網絡，翻譯有限，希望對網站設計的人員有所幫助！轉載請標明來自北京網站建設-js-hbsb.cn.
