?大公司總是試圖簡化他們的支持和開發大型產品組合。 郵件。 俄文組(在俄羅斯這兩個最大的互聯網公司之一,每月有超過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個產品需要大量的時間,所以發射后發現很多問題。 設計趨勢也發生了變化。
以上內容來自網絡，翻譯有限，希望對網站設計的人員有所幫助！轉載請標明來自北京網站建設-m.xinyangweb.com.
