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