演講者：UIPower創(chuàng)始人、勇進(jìn)軟件CEO闕海忠
=========================================================================
《UI的革命》第一部：《UI的思想、方法、工具》，共分三講：
第一講：《UI決定了軟件的成敗》視頻地址：http://www.tudou.com/listplay/c5UXzh4CJD0/HLsYohL_Pno.html
第二講：《傳統(tǒng)的UI開發(fā)》視頻地址：
http://www.tudou.com/listplay/c5UXzh4CJD0/_pW5jHNU0Ho.html
第三講：《革命性的UI開發(fā)》視頻地址：
http://www.tudou.com/listplay/c5UXzh4CJD0/ZlprzEBlC3o.html
=========================================================================
小編的話：時(shí)間一晃已經(jīng)到了2013年的元旦，距過去的2011年10月份UIPower啟動(dòng)的《UI的革命》全國巡回演講已經(jīng)過去了1年多的時(shí)間。在這1年多的時(shí)間里，每天都能接到很多有關(guān)與演講相關(guān)的電話和郵件。為了方便廣大網(wǎng)友在不打開視頻的情況下也可以了解演講的內(nèi)容，本站小編認(rèn)真聆聽并整理了演講的內(nèi)容形成了完整的演講稿?，F(xiàn)在將這些稿件發(fā)到本站的新聞欄目里面來，以供查閱。
1，問候：大家好！
2，內(nèi)容綱要：今天很高興能和大家一起探討UI的革命– 思想、方法和工具。具體按以下三個(gè)部分講解：1.UI的重要性,2.傳統(tǒng)的UI開發(fā)存在的問題3.革命性UI開發(fā)的優(yōu)勢(shì)
好，接下來讓我開始講第一部分：UI的重要性。
1）重要的事情：對(duì)于企業(yè)來說，什么才是重要的事情？凡事在很大程度上決定企業(yè)經(jīng)濟(jì)效益的事情都是重要的事情，否則企業(yè)不以效益為導(dǎo)向來確定事情的輕重緩急就不太符合企業(yè)天生的使命，企業(yè)存在的目的就是在為社會(huì)創(chuàng)造價(jià)值的同時(shí)賺取利潤。
2）利潤公式：我們看這條公式：利潤= 銷售收入– 開發(fā)與運(yùn)營成本。要提升我們的利潤首先我們得提升我們的銷售收入，而且我們希望能幾倍、幾十倍的提升。
3）一般提升銷售收入的途徑：那么我們?nèi)绾巫龅侥?？大家一定?huì)想到通過增加銷售渠道、樹立品牌、采用各種推廣的手段來加大產(chǎn)品的知名度。以上這些手段，我想在座的各位領(lǐng)導(dǎo)一定經(jīng)常在做。我想問一下各位，效果如何？銷售收入成倍增加了嗎？
a) 注重產(chǎn)品本身的投入：為什么效果不明顯呢？對(duì)于用戶來說，他想購買的是您公司的軟件本身，給用戶提供服務(wù)的是軟件的功能。大家在公司企業(yè)網(wǎng)站，公司門面上的投入固然會(huì)增加用戶對(duì)您企業(yè)的好感，但絕對(duì)沒有您對(duì)產(chǎn)品本身進(jìn)行的投入效果來的明顯。
b) 調(diào)查舉例：有個(gè)企業(yè)管理組織曾經(jīng)做過一項(xiàng)調(diào)查，用戶對(duì)產(chǎn)品的關(guān)注程度與對(duì)企業(yè)其他部分的關(guān)注程度的比例分別在86.7% 和13.3%
c) 結(jié)論：由此我們可以看出，作為企業(yè)更應(yīng)該注重對(duì)產(chǎn)品研發(fā)的投入。
a) 讓用戶對(duì)產(chǎn)品產(chǎn)生興趣：而如果我們軟件的功能無法以一種最直接最友好的方式向用戶呈現(xiàn)的話，用戶就沒有辦法在最短的時(shí)間內(nèi)對(duì)您的軟件產(chǎn)生興趣。
b) 舉例說明：經(jīng)常遇到一些找到我們的客戶說，他們的軟件需要看幫助文檔才能知道如何使用，而用戶一般都沒有耐心看完幫助文檔，所以導(dǎo)致用戶的大量流失。強(qiáng)大的功能只有在以一種最合適的方式呈現(xiàn)出來后才可能被用戶接受并認(rèn)可。切忌用戶小看了你的軟件產(chǎn)品，小看了你的軟件也就是低估了你的軟件產(chǎn)品的價(jià)值。
c) 用戶體驗(yàn)坐標(biāo)圖：我們看一下這個(gè)圖（用戶體驗(yàn)坐標(biāo)圖），縱坐標(biāo)是易用性、橫坐標(biāo)是友好性，大家很容易發(fā)現(xiàn)對(duì)于同一款軟件來說，易用性和友好性越是好,用戶量就越高。
d)UI與軟件收益成正相關(guān)的關(guān)系：我們知道易用性可以通過UI的交互設(shè)計(jì)來得到改善與提升，而友好性可以通過UI的視覺設(shè)計(jì)來獲得變革。所以UI與軟件用戶量成正相關(guān)的關(guān)系，而我們又知道軟件用戶量與軟件收益是成正相關(guān)的關(guān)系，所以我們得到如下一個(gè)結(jié)論：UI與軟件收益成正相關(guān)的關(guān)系，
6）UI決定了軟件的成敗：所以UI在很大程度上決定了軟件的收益，所以UI決定了軟件的成??！
7）舉例浩方對(duì)戰(zhàn)平臺(tái)曾總:
曾總舉例說明了問題：
1）曾總運(yùn)行系統(tǒng)，舉例：曾總運(yùn)行了他們研發(fā)的系統(tǒng)，舉了個(gè)例子告訴我：
2）在大廳找不到合適的房間：“你看，如果用戶在大廳里選擇房間時(shí)，卻找不到最適合的，用戶一般會(huì)感覺很納悶，耐心好點(diǎn)的人才可能繼續(xù)一個(gè)一個(gè)地點(diǎn)進(jìn)去。
3）在房間里找不到啟動(dòng)游戲的按鈕：最要命的是，終于找到了房間，卻在房間內(nèi)找不到快速啟動(dòng)游戲的按鈕，而且在房間內(nèi)與別人聊天也不是很容易的操作。
4）房間的視覺風(fēng)格灰突突的：在房間的整個(gè)風(fēng)格上也沒有一點(diǎn)娛樂的感覺，還是Windows 98灰突突的顏色，讓人看了就心煩。
5）對(duì)戰(zhàn)平臺(tái)靠游戲黏住用戶：我們的平臺(tái)就是靠游戲來黏住用戶，如果用戶都不進(jìn)去玩游戲，用戶量自然就下降了。
6）UI是制約對(duì)戰(zhàn)平臺(tái)發(fā)展的障礙：可以說現(xiàn)在的UI就是制約我們發(fā)展的最大障礙了，所以必須在最短的時(shí)間內(nèi)完成他。
7）通過網(wǎng)絡(luò)發(fā)現(xiàn)了Skin++：而且我們?cè)诰W(wǎng)絡(luò)上搜索發(fā)現(xiàn)你的Skin++，經(jīng)過評(píng)估后發(fā)現(xiàn)它比較適合快速的UI改造，所以我們想2周應(yīng)該可以完成。”
聽完曾總的描述，我略有所悟。經(jīng)過我和浩方朋友的2周多的努力終于在2003年8月份發(fā)布出了全新UI的浩方對(duì)戰(zhàn)平臺(tái)。在那之后的1個(gè)月用戶量飆升到400萬。
大家看，目前從他們官網(wǎng)上下載的對(duì)戰(zhàn)平臺(tái)在交互框架上還保持著當(dāng)初我們開發(fā)的樣子。
8）舉例說明Windows界面的三次革命：Windows的成功在很大程度上要?dú)w功于其特別易用和友好的用戶體驗(yàn)。從DOS年代的黑白屏幕命令式驅(qū)動(dòng)到當(dāng)今Windows圖形化用戶事件驅(qū)動(dòng)，無不佐證著微軟以用戶為中心的設(shè)計(jì)思想，Windows的普及也證明了只有關(guān)注用戶體驗(yàn)度產(chǎn)品才可能被廣泛接受。我們看一下這個(gè)圖，Windows98是第一次UI革命，由原來計(jì)算機(jī)專業(yè)的學(xué)生需要背厚厚一本DOS命令，到Windows98 5-6歲的小孩都可以通過點(diǎn)擊鼠標(biāo)來玩電腦游戲。這次是微軟對(duì)操作系統(tǒng)做的最具創(chuàng)新性、最徹底和最系統(tǒng)的用戶交互的革命。這次革命與其他操作系統(tǒng)拉開了距離，徹底改變了微軟的命運(yùn)。Windows XP 是第二次UI革命。Windows 7 是第三次革命。
9）Vista的失敗原因：微軟是非常注重產(chǎn)品的UI，不過也有它失誤的時(shí)候，我們知道Vista是微軟做的非常失敗的一個(gè)版本。大家看一下這個(gè)網(wǎng)頁：http://tech.163.com/07/0820/10/3MB4S4VK000920O4.html
這是國外的NeoWin網(wǎng)站，給Vista總結(jié)的導(dǎo)致失敗的五大錯(cuò)誤。其中就有三項(xiàng)與UI交互有關(guān)的錯(cuò)誤：
1）UAC（用戶賬戶控制）彈出安全提示窗口的次數(shù)實(shí)在太多。某些計(jì)算機(jī)用戶認(rèn)為要使普通用戶覺得Vista是“安全”的方法是提供更多的彈出信息。Vista中實(shí)在會(huì)出現(xiàn)太多的提示，就算是以管理員身份登錄后也經(jīng)常會(huì)收到彈出信息。雖然用戶可以關(guān)閉這個(gè)功能，但這就違背了擁有更高安全性的宗旨了。所以結(jié)果是，有經(jīng)驗(yàn)的用戶把它關(guān)閉了，而一般用戶則學(xué)會(huì)了忍受不斷彈出的對(duì)話框。
2）開始菜單一改XP的樣式，以固定窗口形式出現(xiàn)，對(duì)于那些喜歡嚴(yán)謹(jǐn)?shù)拈_始菜單組織方式的用戶來說，Vista的新開始菜單帶來的是巨大的痛苦。
3）拷貝進(jìn)度對(duì)話框，估計(jì)拷貝所需用時(shí)的對(duì)話框就需要幾秒才能計(jì)算完成，但實(shí)際的文件拷貝時(shí)間可能只需一兩秒。
Vista就是因?yàn)檫@樣的問題最終導(dǎo)致在相當(dāng)長的時(shí)間里沒有很快的普及，最后微軟放棄了該版本，重新發(fā)布了名為Windows 7的版本。在Windows 7中一改Vista的幾大交互上的設(shè)計(jì)錯(cuò)誤，最后很輕松地迅速占領(lǐng)了市場(chǎng)。根據(jù)微軟的官方報(bào)道，平均一秒鐘賣出一套Windows 7。
10）當(dāng)今最流行軟件的用戶體驗(yàn)圖：現(xiàn)在我們來整體看一下當(dāng)今互聯(lián)網(wǎng)最流行的各種軟件UI在我們的體驗(yàn)度坐標(biāo)系中的具體位置。
a) QQ、迅雷,在易用性友好度方面都做的比較好，
b) 綠壩：而綠壩軟件則在以上2個(gè)方面都做的比較差。也難怪綠壩在后面的發(fā)展中就夭折了，從綠壩開發(fā)商對(duì)UI的態(tài)度也可以看出他們做事風(fēng)格，對(duì)于眾所周知的產(chǎn)品發(fā)布如此低劣的產(chǎn)品用戶體驗(yàn)，也著實(shí)證明它失敗的必然性。如果一款軟件連起碼的外在都無法做到令用戶滿意的程度，憑什么向用戶證明企業(yè)的開發(fā)實(shí)力呢？??！
11）總結(jié)并承上啟下：大家對(duì)UI的重要性有了一致認(rèn)識(shí)，UI是軟件開發(fā)中不可忽視的決定成敗的環(huán)節(jié)。那么我們?nèi)绾螌I的易用性和友好度提升到用戶期望的程度呢。我們來看一下的目前軟件開發(fā)企業(yè)是如何進(jìn)行UI開發(fā)的，同時(shí)他們存在的弊端又是什么？請(qǐng)聽下講“傳統(tǒng)的UI開發(fā)”。
這里我們講傳統(tǒng)的UI開發(fā)，就是軟件開發(fā)企業(yè)目前最普遍的UI開發(fā)方式。
1、三大弊端：大家都知道傳統(tǒng)UI開發(fā)存在以下三大弊端：
用一句話概括：花費(fèi)很大的成本開發(fā)出的UI效果不盡人意！也就是說傳統(tǒng)UI開發(fā)方式的性價(jià)比不高。那么究竟是什么原因會(huì)導(dǎo)致傳統(tǒng)UI開發(fā)的那些弊端呢？
首先，讓我們了解一下，要把UI做好必須具備哪些要素，傳統(tǒng)UI在這些要素上面又是如何滿足的呢?
1）三要素與比方：做好UI要滿足以下三個(gè)要素：專業(yè)的設(shè)計(jì)、功能強(qiáng)大的UI開發(fā)工具、富有經(jīng)驗(yàn)的UI開發(fā)人員。我們來打個(gè)比方，樂譜、鋼琴和鋼琴家。樂譜就好比專業(yè)的設(shè)計(jì)、鋼琴好比UI開發(fā)工具、鋼琴家好比富有經(jīng)驗(yàn)的UI開發(fā)人員，而彈奏出來的美妙的音樂就好比滿足要求的UI。
2）沒有專業(yè)的設(shè)計(jì)：如果沒有專業(yè)的設(shè)計(jì)，界面開發(fā)工具再強(qiáng)大，開發(fā)人員再有水平，都不可能做出好的UI。就像沒有樂譜，就不可能彈奏出美妙的音樂。
3）沒有界面開發(fā)工具：如果有了專業(yè)的設(shè)計(jì)，而沒有功能強(qiáng)大的界面開發(fā)工具，那么我們開發(fā)人員實(shí)現(xiàn)各種控件與窗體的效果將會(huì)非常吃力，工期會(huì)大大延長，最終運(yùn)行效果也大打折扣。就像沒有鋼琴，彈奏出來的音質(zhì)也不盡人意。
4）沒有UI開發(fā)人員：如果我們既有專業(yè)的設(shè)計(jì)也有功能強(qiáng)大的界面開發(fā)工具，而沒有富有經(jīng)驗(yàn)的UI開發(fā)人員。這種情況下，一般公司都會(huì)安排原來做業(yè)務(wù)開發(fā)的人員來接手UI開發(fā)的工作。但由于業(yè)務(wù)開發(fā)與UI開發(fā)的思維方式和專業(yè)基礎(chǔ)等存在較大的差別，往往不能開發(fā)出滿足需求的UI。這就像讓一個(gè)不會(huì)樂理不會(huì)彈琴的人去彈琴，結(jié)果可想而知。
2、傳統(tǒng)的UI開發(fā)企業(yè)如何滿足三要素：現(xiàn)在讓我們來看一下，當(dāng)前軟件開發(fā)企業(yè)能否很好地滿足以上三個(gè)條件。
a.1) 舉例說明美工能否做出專業(yè)的設(shè)計(jì)：我先來看第一個(gè)要素：專業(yè)的設(shè)計(jì)。大多數(shù)的軟件開發(fā)企業(yè)都是安排美工來完成設(shè)計(jì)工作。我們來看看美工能否做出專業(yè)UI設(shè)計(jì)？我們來看這道題：art is breaking the rule 藝術(shù)正在打破規(guī)則（這道題來自于互聯(lián)網(wǎng)，作者對(duì)美工和設(shè)計(jì)師的差別分析的比較經(jīng)典，我在這里引用進(jìn)來，現(xiàn)在讓我們一起來看一下美工和設(shè)計(jì)師的具體區(qū)別到底在哪里？）。美工一般會(huì)給出下面的效果。從這個(gè)效果圖中我們發(fā)現(xiàn)美工最容易犯的三大錯(cuò)誤：
第一、設(shè)計(jì)的時(shí)候沒有去理解這句文字想要表達(dá)的內(nèi)容，至少從設(shè)計(jì)作品里不能體現(xiàn)出來他對(duì)內(nèi)容理解了：“art is breaking the rule(藝術(shù)正在打破規(guī)則)”?？梢钥闯鰣D中用了心思去排布文字，體現(xiàn)特殊的平衡感，但是設(shè)計(jì)如果不能服務(wù)于內(nèi)容和主題，這樣的作品一樣是沒有靈魂；
第二、過多地注重文字細(xì)節(jié)特效的表現(xiàn)，未能從全局去平衡設(shè)計(jì)的整體效果，這個(gè)圖雖然沒有很大的錯(cuò)誤或漏洞，但是整個(gè)作品缺乏統(tǒng)一的整體感
第三、對(duì)個(gè)性、風(fēng)格的詮釋，不犯錯(cuò)誤、中規(guī)中矩往往會(huì)落入俗套而缺乏新意，設(shè)計(jì)、特別是視覺設(shè)計(jì)，用什么方式讓欣賞者通過視覺感官留下深刻的印象？
我們?cè)賮砜纯丛O(shè)計(jì)師給出的效果圖，大家仔細(xì)琢磨一下，是不是有很大的不一樣！設(shè)計(jì)師對(duì)rule的破解技巧要顯得專業(yè)和切合主題一些，而且對(duì)排布也有很細(xì)致的構(gòu)思，比較獨(dú)特。
通過效果圖的比較，我們知道要做出專業(yè)的UI設(shè)計(jì)必須由設(shè)計(jì)師而且是UI設(shè)計(jì)師。深諳UI規(guī)則的設(shè)計(jì)師才可以做到。
a.2 ) 結(jié)論：所以基于以上的討論，我們發(fā)現(xiàn)一般軟件開發(fā)企業(yè)都無法做到專業(yè)的設(shè)計(jì)。
a.3) 美工做不好UI的原因：那我們看看美工做不好UI的原因是什么呢？一般企業(yè)里面的美工：
第一，不具備UI背景，基本上都是從廣告設(shè)計(jì)、海報(bào)設(shè)計(jì)、網(wǎng)站設(shè)計(jì)轉(zhuǎn)過來的，接觸UI的機(jī)會(huì)很少；
第二，美工只是會(huì)操作Photoshop等各種制圖軟件的工程師，而對(duì)用戶研究、交互設(shè)計(jì)等都不作關(guān)注。
a.4 ) 美工能否轉(zhuǎn)成UI設(shè)計(jì)師：那么美工能否通過一定的培訓(xùn)與訓(xùn)練培養(yǎng)成UI設(shè)計(jì)師呢？答案是肯定的。
UIPower有一套《三天兩夜打造UI設(shè)計(jì)高手》培訓(xùn)課程，可以在一周內(nèi)將沒有UI背景的美工提升為專業(yè)的UI設(shè)計(jì)師。
以上是我們對(duì)成功UI三要素中的第一個(gè)要素進(jìn)行的討論。接下來，我們討論第二個(gè)要素：功能強(qiáng)大的UI開發(fā)工具。
I) 一般企業(yè)都沒有這樣的工具：由于一般的軟件開發(fā)企業(yè)不具備這樣的工具，自行研發(fā)的代價(jià)都相當(dāng)?shù)拇?，很少有企業(yè)會(huì)投入財(cái)力去開發(fā)。
II）沒有工具還是需要做UI：但是，沒有這樣的工具企業(yè)還是需要做UI的，所以都有業(yè)務(wù)開發(fā)人員兼做UI的開發(fā)工作。
III) 沒有工具效果大打折扣：在沒有工具的情況下，程序員只能通過編寫自定義擴(kuò)展控件來實(shí)現(xiàn)對(duì)界面的改造。由于經(jīng)驗(yàn)和積累不足，往往實(shí)現(xiàn)出來的效果都大打折扣。所以一般的軟件開發(fā)企業(yè)都不具備成功UI的第二個(gè)要素。好，我們?cè)賮砜吹谌齻€(gè)要素：富有經(jīng)驗(yàn)的UI開發(fā)人員。
c) UI開發(fā)人員：目前有一項(xiàng)人才市場(chǎng)的權(quán)威統(tǒng)計(jì)表明：做過1年以上的UI開發(fā)人員非常少。原因是很少有企業(yè)招聘專業(yè)的UI開發(fā)人員，而且UI開發(fā)人員在公司內(nèi)部的地位一般都不高，得不到領(lǐng)導(dǎo)的重視或重用。這樣的后果是市場(chǎng)上真正會(huì)UI開發(fā)的人員非常的稀少。所以一般公司都是安排業(yè)務(wù)程序員臨時(shí)來兼帶著做UI工作。大家想想結(jié)果會(huì)怎么樣？可想而知了。
d) 結(jié)論，效果不盡如人意：從上面的討論中，我們發(fā)現(xiàn)無論是一些大公司還是剛創(chuàng)業(yè)的公司在三個(gè)要素方面都存在不能充分滿足的情況，所以UI最終實(shí)現(xiàn)的效果就不盡人意了。
3、舉例說明飛信在三要素上的滿足程度：我現(xiàn)在舉例說明一下飛信在成功UI三要素上面的滿足程度。
飛信: 飛信是在2011年4月份與我們合作的。在這之前，他們?nèi)鄙賹I(yè)的設(shè)計(jì)和UI開發(fā)工具兩個(gè)要素，合作后我們向他們提供了UI設(shè)計(jì)和DirectUI界面開發(fā)工具，同時(shí)為他們做了為期1周的UI團(tuán)隊(duì)開發(fā)能力的企業(yè)培訓(xùn)。最新的飛信版本可以從它官網(wǎng)下載到。大家親自體驗(yàn)一下飛信在2010年及之前發(fā)布的版本和今天下載到的版本在UI上的巨大變化。目前我們正在與他們打造2012年的V5版本，相信到時(shí)會(huì)給大家更大的一個(gè)震撼，將徹底扭轉(zhuǎn)飛信在即時(shí)聊天領(lǐng)域里面的UI頹勢(shì)。
a) 傳統(tǒng)UI開發(fā)協(xié)作圖：現(xiàn)在我們?cè)賮砜纯创蟛糠值能浖_發(fā)企業(yè)如何進(jìn)行UI開發(fā)的，我們看一下這個(gè)協(xié)作圖。產(chǎn)品部門或市場(chǎng)部門提出UI開發(fā)任務(wù)以后，先由美工理解需求，在后面的幾天內(nèi)給出一套設(shè)計(jì)效果圖，設(shè)計(jì)效果圖提交給程序開發(fā)部門進(jìn)行UI的實(shí)現(xiàn)。
b) 提出問題：大家對(duì)這個(gè)流程有沒有發(fā)現(xiàn)什么不對(duì)的地方？
I) 美工脫離實(shí)現(xiàn)的設(shè)計(jì)易于實(shí)現(xiàn)嗎：大家仔細(xì)想想，美工在不了解程序?qū)崿F(xiàn)能力的情況下去做設(shè)計(jì)，設(shè)計(jì)出來的效果圖讓程序員來實(shí)現(xiàn)，會(huì)遇到什么問題呢？
II）UI程序員的實(shí)現(xiàn)難度高：由于程序員實(shí)現(xiàn)自定義控件需要花費(fèi)很大的時(shí)間與精力，而且對(duì)程序員的能力要求很高，一般程序員很難勝任ＵＩ開發(fā)工作。
III）效果與進(jìn)度的取舍：通常情況下，企業(yè)給ＵＩ開發(fā)小組的時(shí)間非常有限。在面對(duì)要ＵＩ效果還是要時(shí)間進(jìn)度的問題上，一般的程序員都會(huì)選擇犧牲效果來確保開發(fā)進(jìn)度，所以在控件實(shí)現(xiàn)上會(huì)放棄很多靈活的ＵＩ特性而采用相對(duì)比較固化的模式。比如，窗口可拉伸和不可拉伸對(duì)ＵＩ開發(fā)的要求有非常大的差別。所以從這個(gè)流程中遇到是美工設(shè)計(jì)的效果圖，程序員無法在很短的時(shí)間內(nèi)實(shí)現(xiàn)出來。
IV.1) 忙：由于市場(chǎng)的不確定性導(dǎo)致ＵＩ設(shè)計(jì)任務(wù)的不穩(wěn)定性，經(jīng)常會(huì)遇到需求來的時(shí)候特別忙，每天都要加班，
IV.2) 閑：沒有需求的時(shí)候，美工閑的無所事事或安排做別的與ＵＩ無關(guān)的事情。這樣就無法對(duì)ＵＩ設(shè)計(jì)的成果進(jìn)行積累與沉淀。
V）美工職能劃分：由于對(duì)美工的職能劃分存在問題，導(dǎo)致一個(gè)美工既要完成交互又要完成視覺，同時(shí)對(duì)視覺的方方面面也必須由一個(gè)人來全部負(fù)責(zé)，所以就要求美工是一位全才，既能做交互又能對(duì)圖標(biāo)、控件、窗體等都能做到很好。很明顯這樣的人在國內(nèi)非常罕見。
VI)UI程序員手動(dòng)開發(fā)效率底下：由于程序員采用的是手動(dòng)自定義開發(fā)方式，所以只能通過不可見方式來開發(fā)界面，這樣的開發(fā)效率非常低下。
VII）界面與業(yè)務(wù)邏輯無法做到分離：當(dāng)在維護(hù)期間，用戶想要修改UI的某些控件、圖標(biāo)等，必須由美工和程序員的同時(shí)參與才可以完成而且UI的一點(diǎn)小小的變化都會(huì)導(dǎo)致程序的重新編譯。
7）承上啟下：
a) 對(duì)傳統(tǒng)UI革命的必要性：目前UI開發(fā)的需求越來越強(qiáng)烈，而且UI效果的要求也越來越高，如何在最短的時(shí)間內(nèi)開發(fā)出用戶體驗(yàn)度最好的UI？這就急需要我們對(duì)傳統(tǒng)UI開發(fā)方式進(jìn)行一次徹底的革命。
b)分析傳統(tǒng)UI失敗的深層原因：從上面的ＵＩ團(tuán)隊(duì)協(xié)作的討論可以發(fā)現(xiàn)，導(dǎo)致傳統(tǒng)ＵＩ存在諸多弊端最深層的原因是傳統(tǒng)UI在思想、方法和工具上缺乏科學(xué)合理性。所以，在革命性UI開發(fā)一講中，我們將重點(diǎn)對(duì)UI的思想、方法和工具進(jìn)行一次全面的剖析和由此帶來的巨大優(yōu)勢(shì)。
4.0 概述：
a) 傳統(tǒng)UI向革命UI過渡：從傳統(tǒng)的ＵＩ團(tuán)隊(duì)協(xié)作的討論可以發(fā)現(xiàn)，導(dǎo)致傳統(tǒng)ＵＩ不滿足成功UI三要素的最深層原因是傳統(tǒng)UI在思想、方法和工具上缺乏科學(xué)合理性，所以我們必須對(duì)傳統(tǒng)的UI思想、方法和工具進(jìn)行一次徹底的革命！
1）傳統(tǒng)的UI思想:我們來看一下傳統(tǒng)的UI思想，以功能為中心的UI設(shè)計(jì)。在大多數(shù)的公司里一般都重視功能點(diǎn)的展示而輕視軟件的用戶體驗(yàn)。大家想想，最終是誰出錢來購買我們的軟件？對(duì)，是用戶！既然是用戶為何不以他們?yōu)槟繕?biāo)來規(guī)劃和設(shè)計(jì)我們的軟件呢？可能大家要說了，功能也是為用戶考慮的，其實(shí)問題在于大家站的角度不同。以功能為中心的設(shè)計(jì)往往是站在軟件開發(fā)者的角度，而以用戶為中心的設(shè)計(jì)往往是站在用戶的角度。盡管最終達(dá)到的目標(biāo)是一致的，但給用戶的使用感受是極不一樣的。
2) 革命性的UI思想：顯而易見，革命性的UI思想是以用戶為中心，以實(shí)現(xiàn)為目標(biāo)！
a）以實(shí)現(xiàn)為目標(biāo)的重要性：有過UI設(shè)計(jì)經(jīng)驗(yàn)的人，可能經(jīng)常聽說以用戶為中心的設(shè)計(jì)思想，而很少聽到以實(shí)現(xiàn)為目標(biāo)。（這也是我們UIPower區(qū)別與其他UI設(shè)計(jì)公司的最大的一個(gè)地方。）當(dāng)我們拿到一項(xiàng)設(shè)計(jì)任務(wù)后，本著以用戶為中心的設(shè)計(jì)思想可以有很多種設(shè)計(jì)方案，而哪套設(shè)計(jì)方案更加符合軟件的需求和用戶真實(shí)操作時(shí)的需要呢？
b) 舉例說明我們與一般UI設(shè)計(jì)公司的區(qū)別：經(jīng)常聽客戶說，之前找過幾家公司做過UI設(shè)計(jì)，但根本無法用到他們的軟件中來。原因是只以用戶為中心的設(shè)計(jì)不會(huì)去考慮程序如何實(shí)現(xiàn)？而且一般的設(shè)計(jì)公司都不具備UI軟件開發(fā)人員，對(duì)他們來說，這個(gè)可是跨行業(yè)的問題，UI設(shè)計(jì)公司是屬于設(shè)計(jì)行業(yè)，而軟件開發(fā)屬于IT行業(yè)。如何衡量哪套方案或如何設(shè)計(jì)才能滿足用戶要求呢？必須來關(guān)注UI的實(shí)現(xiàn)，也就是UI的程序開發(fā)。只有UI交互設(shè)計(jì)師、視覺設(shè)計(jì)師知道了什么樣的交互與視覺效果可以使用現(xiàn)有的控件可以實(shí)現(xiàn)，而且能夠?qū)崿F(xiàn)到什么樣的程度。那么他們就可以有的放矢地設(shè)計(jì)方案了。這樣的設(shè)計(jì)才不至于返工而浪費(fèi)很多溝通的時(shí)間。
c) 舉例說明用戶失敗的原因:可能在座的想說了,我們之前也安排過美工來熟悉我們的軟件能支持哪些控件，但最后他們還是沒有把設(shè)計(jì)做好。聽到你們這樣問，我很高興，因?yàn)檎f明你們已經(jīng)具備了革命性的UI思想。沒有做好的原因是，你們公司缺少一套UI開發(fā)工具。你讓美工去熟悉本來就不怎么靈活而強(qiáng)大的控件，對(duì)于他們的設(shè)計(jì)創(chuàng)建實(shí)質(zhì)是個(gè)很大的限制。告訴他們這也不能做那也不能，最后美工會(huì)問，那能做什么？一套強(qiáng)大的UI開發(fā)工具是設(shè)計(jì)師和軟件開發(fā)人員協(xié)作的紐帶。
d) 工具的更多信息：關(guān)于工具的討論我們會(huì)在下面的第三點(diǎn)中會(huì)詳細(xì)講解。
4.2 革命性的UI方法：
1) 傳統(tǒng)的UI方法:我們?cè)賮砜纯磦鹘y(tǒng)的UI開發(fā)方法，在上講中我們已經(jīng)講過傳統(tǒng)的UI方法會(huì)導(dǎo)致很多的弊端?，F(xiàn)在讓我們回顧一下：美工完成所有的設(shè)計(jì)工作，角色單一沒有分工，沒有嚴(yán)格區(qū)分交互、視覺。程序員完成所有的控件貼圖工作，控件開發(fā)、窗體開發(fā)功能局限不夠靈活，在實(shí)現(xiàn)上無法做到界面與業(yè)務(wù)邏輯的徹底分離，這樣給開發(fā)與維護(hù)增加了很大的重復(fù)的工作量。
2) 革命性UI開發(fā)的三步曲：革命性UI開發(fā)的三步曲是，交互設(shè)計(jì)->視覺設(shè)計(jì)->界面開發(fā) 。我們先來看第一步，交互設(shè)計(jì)。
1）交互設(shè)計(jì)的重要性：革命性的UI分工更加科學(xué)合理，將UI設(shè)計(jì)劃分成交互與視覺設(shè)計(jì)兩大部分。交互設(shè)計(jì)目標(biāo)就是讓我們的軟件變的更加易用，所以交互設(shè)計(jì)在整個(gè)UI設(shè)計(jì)中起到舉足輕重的作用。如果我們的交互設(shè)計(jì)做的不到位，極有可能會(huì)導(dǎo)致后道工序的返工和達(dá)不到預(yù)期的最終結(jié)果。
2)交互流程：我們一起來看一下UIPower的交互設(shè)計(jì)流程。
3)交互測(cè)試：大家發(fā)現(xiàn)沒有，在這個(gè)流程中我們特別重視交互測(cè)試！一般軟件開發(fā)企業(yè)在形成交互設(shè)計(jì)文檔后交互設(shè)計(jì)的工作就算完成了，但是，革命性的UI交互設(shè)計(jì)卻遠(yuǎn)沒有結(jié)束。我們大家來回答以下幾個(gè)問題:我們討論好的交互設(shè)計(jì)方案怎么證明是符合用戶操作習(xí)慣的？每一個(gè)功能點(diǎn)的交互操作的時(shí)間點(diǎn)是最短的嗎？交互方案給用戶真實(shí)的心理感受是什么？交互方案中選擇的控件是不是最恰當(dāng)?shù)模康鹊?。這樣的問題似乎很難回答。再有經(jīng)驗(yàn)的交互設(shè)計(jì)師設(shè)計(jì)的方案也必須經(jīng)過類似以上幾個(gè)問題的考驗(yàn)。如果我們的方案沒有經(jīng)過實(shí)踐的驗(yàn)證是無法肯定地回到以上諸多問題的。所以我們必須要有交互測(cè)試。而作為交互測(cè)試來說，關(guān)鍵要具備兩個(gè)條件：第一個(gè)是要有可執(zhí)行的交互原型，第二個(gè)是要有眼動(dòng)議。我們先來看第一個(gè)條件，可執(zhí)行的交互原型。
4)可執(zhí)行交互原型：用DirectUI Designer制作的交互原型更具優(yōu)勢(shì)，DirectUI Designer是UIPower特有的一套快速原型開發(fā)工具，也是一套界面開發(fā)工具，只要通過拖拽相應(yīng)的控件與窗口，簡單設(shè)置一些事件與屬性，可以不用寫代碼就可以輕松地將文檔類的交互設(shè)計(jì)稿轉(zhuǎn)化成可執(zhí)行的文件。大家想一想一個(gè)交互方案好不好，只有在執(zhí)行起來后才能體驗(yàn)他的優(yōu)劣。對(duì)一大疊文檔的一百次的討論總沒有運(yùn)行一次來得直觀！我們?cè)賮砜唇换y(cè)試的第二個(gè)條件，眼動(dòng)議。
5)眼動(dòng)儀，上面有了可執(zhí)行的交互原型程序，那我們?nèi)绾螠?zhǔn)確地評(píng)價(jià)呢？這里我們要采用國際上比較先進(jìn)的眼動(dòng)議來對(duì)用戶的眼球軌跡進(jìn)行客觀的記錄。眼動(dòng)儀目前只有國外才有，一個(gè)眼動(dòng)議的價(jià)格在40萬人民幣左右。所以具有這樣設(shè)備的UI設(shè)計(jì)公司不多。測(cè)試操作完畢后收集所有被測(cè)人員的數(shù)據(jù)進(jìn)行統(tǒng)計(jì)學(xué)上分析，最終得出交互修改的建議。以上是革命性UI開發(fā)的三步曲的第一步，交互設(shè)計(jì)。關(guān)于更多的交互設(shè)計(jì)內(nèi)容，大家可以觀看《革命性的交互設(shè)計(jì)》講座。 現(xiàn)在讓我們看看三步曲的第二步，視覺設(shè)計(jì)。
在視覺上根據(jù)人員的不同專業(yè)特長分別安排窗體、控件、圖標(biāo)的設(shè)計(jì)。在傳統(tǒng)UI開發(fā)一講我們提到美工負(fù)責(zé)UI設(shè)計(jì)的所有工作，當(dāng)然也包括窗體、控件和圖標(biāo)的設(shè)計(jì)。在實(shí)踐中發(fā)現(xiàn)，并不是每個(gè)設(shè)計(jì)師同時(shí)擅長三者的設(shè)計(jì)。有些設(shè)計(jì)師擅長整體的把握，對(duì)窗體的設(shè)計(jì)可以做的很到位。而有些設(shè)計(jì)師擅長控件的設(shè)計(jì)，可以對(duì)控件提出很多開拓性的創(chuàng)新。還有些設(shè)計(jì)師特別擅長圖標(biāo)的設(shè)計(jì)，能夠用極少的顏色在極小的空間中創(chuàng)造出各種形象的圖標(biāo)。所以，革命性的UI強(qiáng)調(diào)發(fā)揮每個(gè)設(shè)計(jì)師的特長。另外，革命性視覺設(shè)計(jì)還有一套強(qiáng)大工具PSD主題庫的支撐，可以將我們UI視覺設(shè)計(jì)中遇到的各種風(fēng)格的窗體和控件， 形成一個(gè)倉庫。設(shè)計(jì)師可以直接選用其中已經(jīng)做好的窗體和控件，當(dāng)然也可以根據(jù)自己的需要進(jìn)行PSD文件的修改。這個(gè)革命性視覺設(shè)計(jì)的最核心的一款工具。關(guān)于這個(gè)部分的內(nèi)容，大家可以觀看《革命性的視覺設(shè)計(jì)》講座。以上我們講的是革命性UI開發(fā)三步曲的第二步，視覺設(shè)計(jì)?，F(xiàn)在我們講三步曲的第三步，界面開發(fā)。
1）UI程序?qū)崿F(xiàn)的目標(biāo)：革命性的UI在實(shí)現(xiàn)上要達(dá)到的目標(biāo)是界面與業(yè)務(wù)邏輯的徹底分離。
2）分離的意義：傳統(tǒng)的UI開發(fā)，界面和業(yè)務(wù)之間是一個(gè)緊耦合的關(guān)系。就是只要界面一變化，程序也會(huì)隨之做相應(yīng)的調(diào)整。由此產(chǎn)生設(shè)計(jì)與程序?qū)崿F(xiàn)協(xié)作困難、程序開發(fā)困難、維護(hù)困難等問題。
3）DirectUI分離模型圖：我們看一下DirectUI的界面與業(yè)務(wù)分離的模型圖。
a) 分離精靈：我們對(duì)客戶原有的程序采用分離精靈DetachAgent將原有的業(yè)務(wù)代碼與界面代碼進(jìn)行分離，形成UI抽象層。抽象層將業(yè)務(wù)中用到UI的地方全部生成抽象接口。這樣業(yè)務(wù)就不必關(guān)心UI實(shí)現(xiàn)的細(xì)節(jié)了。
b) UI實(shí)現(xiàn)層：具體的UI實(shí)現(xiàn)細(xì)節(jié)由UI實(shí)現(xiàn)層完成，它派生自UI抽象層，采用DirectUI SDK和DirectUI Designer對(duì)各種抽象的接口進(jìn)行實(shí)現(xiàn)，比如UI中的資源（圖片、文字）、配置信息、UI邏輯等進(jìn)行統(tǒng)一的可視化的管理。
以上我們講的是革命性UI開發(fā)的界面開發(fā)所要達(dá)到的目標(biāo)，關(guān)于更詳細(xì)的內(nèi)容，大家可以觀看《革命性的界面開發(fā)》講座。
4.3 革命性的UI工具：上面我們談到了首先要革命傳統(tǒng)的UI思想，其次是革命傳統(tǒng)的UI方法。最后我們?cè)僬務(wù)勅绾胃锩鼈鹘y(tǒng)的UI工具！
１）傳統(tǒng)的UI工具：先來看看傳統(tǒng)的UI工具在整個(gè)UI設(shè)計(jì)開發(fā)中起到的作用。我們來回顧一下UI設(shè)計(jì)開發(fā)的整體流程：交互設(shè)計(jì)、視覺設(shè)計(jì)、UI的程序編碼實(shí)現(xiàn)、UI調(diào)試與維護(hù)。在交互設(shè)計(jì)階段，一般的公司都采用Axure或Photoshop或Word文檔記錄下交互設(shè)計(jì)的原型。視覺設(shè)計(jì)師通過閱讀交互設(shè)計(jì)文檔來進(jìn)行窗體、控件和圖標(biāo)的設(shè)計(jì)。UI程序員在拿到視覺設(shè)計(jì)效果圖后開始進(jìn)行自定義控件的開發(fā)并進(jìn)行各種控件和窗體的貼圖工作。
２）傳統(tǒng)的UI開發(fā)環(huán)節(jié)的交付物：大家注意到?jīng)]有，這里提到3個(gè)環(huán)節(jié)的交付物：交互設(shè)計(jì)稿、視覺設(shè)計(jì)稿、UI程序。每個(gè)環(huán)節(jié)我們都是通過大量的溝通和理解來對(duì)前一個(gè)環(huán)節(jié)的交付物進(jìn)行消化。而且每個(gè)環(huán)節(jié)的交付物無法重用，這樣就導(dǎo)致了上一個(gè)環(huán)節(jié)向下一個(gè)環(huán)節(jié)過渡的信息誤差。實(shí)踐表明，這樣的信息傳遞非常容易導(dǎo)致信息走樣甚至失真。另外，由于環(huán)節(jié)的交付物的邏輯性，注定了環(huán)節(jié)之間無法并行的工作。無法并行工作也就限定了無法通過增派人員來使得工期縮短。
a) DirectUI介紹：現(xiàn)在讓我們看一下革命性的UI工具是如何解決傳統(tǒng)UI各環(huán)節(jié)交付物信息傳遞的問題？革命性UI工具DirectUI是一套可視化的快速的UI開發(fā)軟件，在視圖區(qū)通過鼠標(biāo)的拖拽即可完成整個(gè)窗體和控件的設(shè)計(jì)與定義?？梢暬c快速是DirectUI最大的特色與亮點(diǎn)。而且革命性UI中將DirectUI工具貫穿與UI設(shè)計(jì)開發(fā)的各個(gè)環(huán)節(jié)。
b) 交互設(shè)計(jì)稿：在交互設(shè)計(jì)階段，交互設(shè)計(jì)師采用DirectUI Builder將討論后的交互原型制作成可執(zhí)行的程序，并在交互測(cè)試階段經(jīng)過反復(fù)迭代后形成交互設(shè)計(jì)交付物。大家發(fā)現(xiàn)沒有，革命性UI早在交互原型出來后就已經(jīng)開始可執(zhí)行程序的測(cè)試。這在傳統(tǒng)UI中是無法想象的。由于交互設(shè)計(jì)是整個(gè)UI的第一階段，后面的階段都是依賴于該階段的工作成果，所以交互設(shè)計(jì)的成功與否直接決定著整個(gè)UI改造的成敗。而且要確保交互設(shè)計(jì)的成功必須要有可執(zhí)行的交互原型來進(jìn)行反復(fù)的測(cè)試，停留在文檔級(jí)別的就根本談不上測(cè)試了。所以交互原型的可執(zhí)行程序的制作就成為整個(gè)UI開發(fā)成敗的關(guān)鍵！
c) 視覺設(shè)計(jì)稿：視覺設(shè)計(jì)階段，設(shè)計(jì)師根據(jù)可執(zhí)行交互原型進(jìn)行整體風(fēng)格、窗體、控件、圖標(biāo)的設(shè)計(jì)，完成后將對(duì)各種效果進(jìn)行切圖，采用DirectUI Builder將切好的圖逐一替換到交互原型的UI皮膚文件中。替換完畢后，我們就可以得到一個(gè)高保真的可執(zhí)行的UI最終程序。在這一步中，大家發(fā)現(xiàn)沒有，視覺設(shè)計(jì)師直接替換交互原型中各種控件的切圖，也是就說沿用了交互設(shè)計(jì)師的工作成果文件。而且視覺設(shè)計(jì)在理解交互原型上也比傳統(tǒng)UI的文檔式交互原型要直觀的多，而且不會(huì)產(chǎn)生歧義。
d) 程序代碼關(guān)聯(lián)：最后，UI程序員在拿到視覺設(shè)計(jì)師的高保真的UI程序后，就可以進(jìn)行UI實(shí)現(xiàn)層的編碼，最終完成界面與業(yè)務(wù)邏輯的集成工作。這里，大家也很容易地發(fā)現(xiàn)，傳統(tǒng)模式的UI程序員需要對(duì)大量的自定義復(fù)雜控件進(jìn)行很長時(shí)間的編碼，而革命模式的UI程序員只需要做一些簡單的事件關(guān)聯(lián)就可以了。這也大大降低了UI程序員的工作難度和復(fù)雜度。
e) Directui總結(jié)：從上面我們可以看出，DirectUI既是一款強(qiáng)大的界面開發(fā)工具也是一款快速的原型開發(fā)工具，更是一款內(nèi)容豐富的PSD主題庫。正是有了像DirectUI這樣的工具，革命性的UI才可能成為現(xiàn)實(shí)。由于在傳統(tǒng)UI的各個(gè)環(huán)節(jié)中沒有采用統(tǒng)一的工具來作為中間的紐帶，所以傳統(tǒng)UI無法做到并行開發(fā)。而革命UI可以做到并行開發(fā)，原因是革命性UI采用DirectUI作為環(huán)節(jié)之間交流的媒介。所以一般在交互設(shè)計(jì)原型完成后，可以同時(shí)進(jìn)行視覺設(shè)計(jì)和程序?qū)崿F(xiàn)。這樣將大大縮短UI開發(fā)的工期。
a) 通過交互設(shè)計(jì)和視覺設(shè)計(jì)可以得到專業(yè)的設(shè)計(jì);
b) DirectUI是功能強(qiáng)大的界面開發(fā)工具；
c) 培訓(xùn)后成為富有經(jīng)驗(yàn)的UI開發(fā)人員：經(jīng)過對(duì)現(xiàn)有的美工和UI程序員進(jìn)行革命性UI思想、方法和工具的培訓(xùn)后，就可以提升他們UI開發(fā)的整體水平，成功富有經(jīng)驗(yàn)的UI開發(fā)人員。
2）革命性的UI存在以下兩大優(yōu)勢(shì)：
a) 大大提高了軟件UI的用戶體驗(yàn)度，從而對(duì)軟件的銷售起到了非常積極的促進(jìn)作用；
b) 大大降低了軟件UI開發(fā)與維護(hù)的成本，從而極大地節(jié)約了開發(fā)與運(yùn)營成本。
從這兩個(gè)優(yōu)勢(shì)來看，UI革命的目的是為了幫助軟件開發(fā)企業(yè)實(shí)現(xiàn)最大程度的“開源”和“節(jié)流“！
3）DirectUI是UI革命的核心：上面我們講到了對(duì)傳統(tǒng)的UI思想、UI方法和UI工具進(jìn)行了革命。可以看出，革命性的UI思想需要由UI方法來支撐，而UI方法則需要UI工具DirectUI的支撐。所以，DirectUI是UI革命的核心！
4）DirectUI是UIPower的核心技術(shù)：DirectUI是UIPower在UI行業(yè)中立于不敗之地的最核心的技術(shù)。關(guān)于DirectUI的詳細(xì)介紹，請(qǐng)看《革命性的界面開發(fā)》講座。
我演講的部分是《UI的革命》的整體介紹，關(guān)于交互設(shè)計(jì)、視覺設(shè)計(jì)、界面開發(fā)三部分的詳細(xì)情況，請(qǐng)看相應(yīng)的視頻講座。我的演講就到這里，謝謝大家！
聯(lián)系客服
