如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件

從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)信息咨詢部翟天驕2010.08.31從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)信息咨詢部翟天驕12whatwhyhow2whatwhyhow2如果一個(gè)產(chǎn)品很難用，我就不會(huì)經(jīng)常使用如果一個(gè)產(chǎn)品我不需要，我就不會(huì)用如果一個(gè)產(chǎn)品很難用，我就不會(huì)經(jīng)常使用如果一個(gè)產(chǎn)品我不需要，我3Focusontheuser,andallelsewillfollow.以用戶為中心，其他一切紛至沓來(lái)。Focusontheuser,andallels4不同的人

不同的理解不同的人不同的理解5不同的需求不同的設(shè)計(jì)不同的需求不同的設(shè)計(jì)6不同的設(shè)計(jì)不同的效果心理模型表現(xiàn)模型實(shí)現(xiàn)模型容易使用，體驗(yàn)良好記憶負(fù)擔(dān)，體驗(yàn)較差最好的技術(shù)是消失在生活當(dāng)中的技術(shù)不同的設(shè)計(jì)不同的效果心理模型表現(xiàn)模型實(shí)現(xiàn)模型容易使用，體驗(yàn)78whatwhyhow8whatwhyhow8以用戶為中心的Web設(shè)計(jì)的流程和用戶體驗(yàn)的要素“AJAX之父”的JesseJamesGarrett在2000年提出以用戶為中心的Web設(shè)計(jì)的流程和用戶體驗(yàn)的要素“AJAX之父9產(chǎn)品設(shè)計(jì)市場(chǎng)調(diào)研需求分析詳細(xì)設(shè)計(jì)研發(fā)發(fā)產(chǎn)品（軟件、網(wǎng)站）建房子土木工程師裝修設(shè)計(jì)師建筑設(shè)計(jì)師程序設(shè)計(jì)ＵＩ設(shè)計(jì)交互設(shè)計(jì)——《軟件設(shè)計(jì)的藝術(shù)》TerryWinograd(2004年度的ACM人機(jī)交互院士)產(chǎn)品設(shè)計(jì)市場(chǎng)調(diào)研研發(fā)發(fā)產(chǎn)品（軟件、網(wǎng)站）建房子土木工程師裝修10名稱解釋UI（userinterfacedesigner）:用戶界面設(shè)計(jì)人員UE（

UserExperience）：用戶體驗(yàn)

并不是指產(chǎn)品本身是如何工作的，而是指產(chǎn)品如何和外界聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾巍敖佑|“或者“使用”它。是指用戶在訪問(wèn)平臺(tái)的過(guò)程中的全部體驗(yàn)，它包括平臺(tái)是否有用，疑惑或者bug程度，功能是否易用、簡(jiǎn)約，界面設(shè)計(jì)和交互設(shè)計(jì)是否友好等方面。UCD（UserCenteredDesign）

：“以用戶為中心的設(shè)計(jì)名稱解釋UI（userinterfacedesigner1112whatwhyhow12whatwhyhow12如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件13設(shè)計(jì)者怎么想需求集合功能集合出水寫(xiě)字保護(hù)筆芯的筆蓋顏色墨水易擦墨水產(chǎn)品寫(xiě)字長(zhǎng)久的寫(xiě)字標(biāo)識(shí)不同內(nèi)容寫(xiě)新的內(nèi)容用戶能當(dāng)發(fā)簪變形金剛？？？要了解人，從而了解用戶，更要習(xí)慣站在用戶的角度看問(wèn)題。他們要“隨時(shí)隨地變成用戶”設(shè)計(jì)者怎么想需求集合功能集合出水寫(xiě)字保護(hù)筆芯的筆蓋顏色墨水易14產(chǎn)品功能重排產(chǎn)品功能重排15如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件16

口碑相傳的產(chǎn)品設(shè)計(jì)之道

核心能力和速度交互體貼細(xì)致，視覺(jué)簡(jiǎn)潔清爽高端用戶的關(guān)注如何在良好口碑下持續(xù)增加功能要了解人，從而了解用戶，更要習(xí)慣站在用戶的角度看問(wèn)題。他們要“隨時(shí)隨地變成用戶”口碑相傳的產(chǎn)品設(shè)計(jì)之道要了解人，從而了解用戶，更要17如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件18如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件19產(chǎn)品規(guī)劃的流程定義產(chǎn)品規(guī)劃流程對(duì)市場(chǎng)走勢(shì)及客戶需求進(jìn)行分析，創(chuàng)建合理的市場(chǎng)細(xì)分規(guī)則，對(duì)要投資和取得領(lǐng)先地位的細(xì)分市場(chǎng)進(jìn)行選擇和優(yōu)先級(jí)排序，從而制定可執(zhí)行的業(yè)務(wù)計(jì)劃，并驅(qū)動(dòng)新產(chǎn)品包的開(kāi)發(fā)。過(guò)程交付件對(duì)應(yīng)產(chǎn)品階段用戶需求收集產(chǎn)品候選概念用戶需求分析和PK階段市場(chǎng)分析市場(chǎng)評(píng)估報(bào)告制定規(guī)劃產(chǎn)品路標(biāo)規(guī)劃書(shū)制定綜合FeatureList和規(guī)劃PPT例撰寫(xiě)策劃產(chǎn)品需求規(guī)格說(shuō)明書(shū)產(chǎn)品需求說(shuō)明書(shū)例制定業(yè)務(wù)計(jì)劃產(chǎn)品業(yè)務(wù)計(jì)劃書(shū)開(kāi)發(fā)階段？產(chǎn)品規(guī)劃的流程定義產(chǎn)品規(guī)劃流程對(duì)市場(chǎng)走勢(shì)及客戶需求進(jìn)行分析，20用戶需求分析法（例：QQ秀）要素細(xì)分項(xiàng)目對(duì)應(yīng)騰訊產(chǎn)品的元素$價(jià)格設(shè)計(jì)、可生產(chǎn)性、技術(shù)、原材料、生產(chǎn)、供應(yīng)商、制造、元件、人力成本、管理費(fèi)用、裝備付費(fèi)Item的價(jià)格/包月價(jià)格A安全/質(zhì)量行銷(xiāo)、銷(xiāo)售、渠道、分配、交貨期、廣告、配置、定價(jià)、客戶定制客服/投訴的響應(yīng)P性能功能、吸引力、規(guī)格、功率、速度、容量、適應(yīng)性、多功能、尺寸用得爽不爽P包裝風(fēng)格、尺寸、數(shù)量、幾何設(shè)計(jì)、模塊性、體系結(jié)構(gòu)、界面、機(jī)械結(jié)構(gòu)、同一性、圖形、包含的/不包含的頁(yè)面好看不好看E易用用戶友好、操縱控制、顯示、人類(lèi)工程學(xué)、培訓(xùn)、文檔、幫助系統(tǒng)、人為因素、接口、操作UI（界面操作性）A可獲得性可靠性、質(zhì)量、安全性、誤差極限、完整性、強(qiáng)度、適應(yīng)性、動(dòng)態(tài)特性、負(fù)荷量、冗余Q幣購(gòu)買(mǎi)/充值渠道L生命周期成本壽命、正常運(yùn)行/停工時(shí)間、保險(xiǎn)、責(zé)任、可維護(hù)性、服務(wù)、備件、移植通道、標(biāo)準(zhǔn)化、基礎(chǔ)設(shè)施、運(yùn)轉(zhuǎn)成本、安裝成本Item有效期S社會(huì)接受程度間接影響、顧問(wèn)、采購(gòu)代理商、標(biāo)準(zhǔn)組織、政府、社會(huì)認(rèn)可程度、法律關(guān)系、政治、股東、管理層、工人、工作場(chǎng)所同齡人認(rèn)可度/流行度用戶需求分析法（例：QQ秀）要素細(xì)分項(xiàng)目對(duì)應(yīng)騰訊產(chǎn)品的元素$21如何排定產(chǎn)品功能的優(yōu)先級(jí)各個(gè)功能本身并無(wú)“優(yōu)先級(jí)”可言，對(duì)一支筆來(lái)說(shuō)，“寫(xiě)字”和“當(dāng)作發(fā)簪”這兩個(gè)需求是平等的。但是產(chǎn)品在不同的階段有不同的目標(biāo)和不同的現(xiàn)實(shí)情況，這就成為判定產(chǎn)品功能優(yōu)先級(jí)的唯一標(biāo)準(zhǔn)。產(chǎn)品階段首要目標(biāo)功能側(cè)重點(diǎn)$APPEALS新產(chǎn)品上線吸引新用戶、快速占領(lǐng)目標(biāo)市場(chǎng)“好用、方便、便宜”（注意，“便宜”實(shí)際上是運(yùn)營(yíng)的范疇）$價(jià)格、E易用、A可獲得性平臺(tái)期留住用戶、穩(wěn)定收入內(nèi)容翻新、滿足細(xì)分用戶群的需求（例子：高露潔牙膏、飄柔洗發(fā)水）P包裝、A安全/質(zhì)量、P性能產(chǎn)品更新?lián)Q代保留舊產(chǎn)品精髓，加入新的創(chuàng)意元素“時(shí)尚、創(chuàng)新、新新人類(lèi)的需求”（例子：Swatch）S社會(huì)接受、L生命周期成本如何排定產(chǎn)品功能的優(yōu)先級(jí)各個(gè)功能本身并無(wú)“優(yōu)先級(jí)”可言，對(duì)一22市場(chǎng)分析市場(chǎng)分析23用戶分析用戶分析24需求分析需求分析25小案例：用戶需求優(yōu)先級(jí)排序QQ發(fā)布第一個(gè)版本時(shí)，有以下用戶需求：卡通頭像QQ表情聊天記錄管理器看誰(shuí)在線上安全性傳文件很小的.exe文件視頻聊天室語(yǔ)音反應(yīng)速度快請(qǐng)從中選出最重要的三項(xiàng)，發(fā)布QQ1.0。小案例：用戶需求優(yōu)先級(jí)排序QQ發(fā)布第一個(gè)版本時(shí)，有以下用戶需26？？27別讓我思考(Don’tMakeMeThink)網(wǎng)站可用性三大定律別讓我思考(Don’tMakeMeThink)網(wǎng)站可用28人們使用WEB的幾個(gè)事實(shí)不是閱讀，而是掃描①總是很忙②不必閱讀所有的內(nèi)容③善于掃描不做最佳選擇，而是滿意即可①總是很忙碌②如同消防員不追根究底，而是勉強(qiáng)應(yīng)付①如果發(fā)現(xiàn)某個(gè)東西能用，我們會(huì)一直用它人們使用WEB的幾個(gè)事實(shí)不是閱讀，而是掃描29用戶瀏覽網(wǎng)站不是在閱讀，而是掃描用戶瀏覽網(wǎng)站不是在閱讀，而是掃描30注意力是有限的注意力是有限的31過(guò)多的內(nèi)容。。。過(guò)多的內(nèi)容。。。32不追根究底，而是勉強(qiáng)應(yīng)付不追根究底，而是勉強(qiáng)應(yīng)付33Krug可用性三大定律別讓我思考(Don'tmakemethink)要點(diǎn)擊多少次都沒(méi)關(guān)系，只要每次點(diǎn)擊都是無(wú)須思考，明確無(wú)誤的選擇。

去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的文字再去掉一半。Krug可用性三大定律別讓我思考(Don'tmakeme34Krug可用性第一定律別讓我思考(Don'tmakemethink)網(wǎng)頁(yè)應(yīng)該設(shè)計(jì)得不言而喻網(wǎng)頁(yè)避免強(qiáng)迫用戶思考的地方如果做不到一切不言而喻，起碼做到讓頁(yè)面自我解釋Krug可用性第一定律別讓我思考(Don'tmakeme35麥當(dāng)勞兩則麥當(dāng)勞兩則36強(qiáng)迫我們思考的地方(1)強(qiáng)迫我們思考的地方(1)37強(qiáng)迫我們思考的地方(2)強(qiáng)迫我們思考的地方(2)38卓越網(wǎng)和當(dāng)當(dāng)網(wǎng)的搜索框卓越網(wǎng)和當(dāng)當(dāng)網(wǎng)的搜索框39當(dāng)當(dāng)網(wǎng)2006年1月1日首頁(yè)快照當(dāng)當(dāng)網(wǎng)2006年1月1日首頁(yè)快照40什么是頁(yè)面的自我解釋？頁(yè)面的自我解釋即用戶對(duì)頁(yè)面稍加學(xué)習(xí)就可以明白，用戶能夠更加專注于他要做的事情。特別是在進(jìn)行一些嶄新的，開(kāi)拓性或者非常復(fù)雜的頁(yè)面設(shè)計(jì)時(shí)，也許只能做到自我解釋(Self-explanatory)。返回什么是頁(yè)面的自我解釋？頁(yè)面的自我解釋即用戶對(duì)頁(yè)面稍加學(xué)習(xí)就可41Krug可用性第二定律Krug可用性第二定律42如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件43Krug可用性第三定律去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的文字再去掉一半。有力的文字都是簡(jiǎn)潔的。必須消滅歡迎詞，必須消滅指示性文字。Krug可用性第三定律去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的44MicrosoftTechNet

歡迎詞MicrosoftTechNet歡迎詞45中國(guó)建設(shè)銀行反饋表單指示性文字中國(guó)建設(shè)銀行反饋表單指示性文字46可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))主頁(yè)團(tuán)隊(duì)中可用性的討論可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))47可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條作用幫助找到想要的，告訴我們?nèi)绾问褂镁W(wǎng)站給人固定的感覺(jué)告訴我們身在何處注意事項(xiàng)可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條48導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))49Bearlookingatmapofparkwithsign"Youarehere"Bearlookingatmapofparkwi50導(dǎo)航條設(shè)計(jì)時(shí)需要注意網(wǎng)站的每一頁(yè)(表單可能例外)都需要導(dǎo)航次級(jí)導(dǎo)航都應(yīng)該有返回首頁(yè)的鏈接頁(yè)面名稱應(yīng)該醒目(自我解釋)要提供簡(jiǎn)潔，沒(méi)有無(wú)關(guān)選項(xiàng)的搜索框優(yōu)秀的導(dǎo)航條示例:Amazon,B導(dǎo)航條設(shè)計(jì)時(shí)需要注意網(wǎng)站的每一頁(yè)(表單可能例外)都需要導(dǎo)航51Amazon.COM導(dǎo)航條Amazon.COM導(dǎo)航條52B導(dǎo)航條B導(dǎo)航條53可用性實(shí)踐中需要注意的問(wèn)題主頁(yè)主頁(yè)的作用主頁(yè)需要額外考慮的問(wèn)題可用性實(shí)踐中需要注意的問(wèn)題主頁(yè)54主頁(yè)的作用準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象網(wǎng)站的標(biāo)識(shí)和起點(diǎn)內(nèi)容更新導(dǎo)讀服務(wù)以及搜索的入口返回主頁(yè)的作用準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象55準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象主頁(yè)要做到這點(diǎn)必須清晰的回答四個(gè)問(wèn)題這是什么網(wǎng)站？網(wǎng)站上面有什么？我能在這里干什么？為什么我應(yīng)該在這而不是在別的地方？返回準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象主頁(yè)要做到這點(diǎn)必須清晰的回答四個(gè)56主頁(yè)需要額外考慮的問(wèn)題每個(gè)人都想占一席之地想要參與的人太多設(shè)計(jì)要滿足所有人返回主頁(yè)需要額外考慮的問(wèn)題每個(gè)人都想占一席之地57站點(diǎn)的標(biāo)識(shí)和口號(hào)沒(méi)有什么比得上一個(gè)好口號(hào)每天五分鐘，給思想加油。()理性，建設(shè)性。()站點(diǎn)的標(biāo)識(shí)和口號(hào)沒(méi)有什么比得上一個(gè)好口號(hào)58可用性實(shí)踐中需要注意的問(wèn)題團(tuán)隊(duì)中可用性的討論現(xiàn)狀：無(wú)休止的信仰大戰(zhàn)本質(zhì)：浪費(fèi)時(shí)間關(guān)鍵：沒(méi)有什么所謂的普通用戶唯一改變的方法：用戶體驗(yàn)測(cè)試可用性實(shí)踐中需要注意的問(wèn)題團(tuán)隊(duì)中可用性的討論59團(tuán)隊(duì)中可用性的討論團(tuán)隊(duì)中可用性的討論60可用性最佳實(shí)踐提供增大網(wǎng)頁(yè)字體的選項(xiàng)(國(guó)內(nèi)網(wǎng)站…)為每張圖片增加ALT文本用戶不可能在一個(gè)界面中接受過(guò)多信息，而且信息量和頁(yè)面長(zhǎng)度不是正比關(guān)系可用性最佳實(shí)踐提供增大網(wǎng)頁(yè)字體的選項(xiàng)(國(guó)內(nèi)網(wǎng)站…)61為每張圖片增加ALT文本<imgsrc="/logo.gif" alt="鳳凰網(wǎng)網(wǎng)站圖標(biāo)LOGO"/>返回為每張圖片增加ALT文本<imgsrc="http://i62如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件63如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件64交互設(shè)計(jì)—Don'tmakemethink“返回”的位置和做法很重要：這是整個(gè)QQMail的交互的“樞紐”，如同圍棋中的“玉柱”，也定義了郵箱的交互風(fēng)格。幫用戶自動(dòng)選中：在輸入獨(dú)立密碼或加密folder輸入密碼時(shí)錯(cuò)誤后，應(yīng)該把輸入框內(nèi)的內(nèi)容select上，這樣就可以直接打入而不用清除了光標(biāo)定位：之前的點(diǎn)"回復(fù)"時(shí)光標(biāo)focus到正文的問(wèn)題改好了,但卻沒(méi)有注意到點(diǎn)"轉(zhuǎn)發(fā)"時(shí)光標(biāo),反而應(yīng)是在"收件人"處而不是正文處,因?yàn)橐话憧傄顚?xiě)轉(zhuǎn)發(fā)人,而回復(fù)(包括回復(fù)全部)則是直接輸入內(nèi)容.交互設(shè)計(jì)—Don'tmakemethink“返回”的位65交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期類(lèi)Outlook客戶端操作，但比它做得更優(yōu)秀先字母排序，再優(yōu)先顯示最近聯(lián)系人，減少鍵盤(pán)操作。這么細(xì)的體驗(yàn)，但一旦用上，就覺(jué)得別的同類(lèi)產(chǎn)品很粗糙了！VS交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期類(lèi)Outlook客戶端操作，但比66交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期兼容客戶端郵件菜單習(xí)慣在用TT或QQ/TM/RTX截屏后的圖,mail原來(lái)在寫(xiě)信時(shí)用Ctrl-V可以貼出來(lái)，但右鍵則不能。不要隨意去掉用戶正在使用的功能原來(lái)mail在做出了“HTML方式查看”后，去掉了“打開(kāi)”功能符合用戶預(yù)期，點(diǎn)擊其他地方，WEBQQ的浮動(dòng)窗口隱藏到固定位置交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期兼容客戶端郵件菜單習(xí)慣67交互設(shè)計(jì)—適時(shí)的提醒沒(méi)必要的提醒不需要出現(xiàn)而適時(shí)出現(xiàn)的提示或功能，用得好，不但不會(huì)騷擾用戶，還是對(duì)用戶的細(xì)致的關(guān)懷（當(dāng)未讀郵件過(guò)多時(shí)，提示刪除歷史郵件）數(shù)字和字母帳號(hào)不同方式；圖片驗(yàn)證旁提示“不區(qū)分大小寫(xiě)”，細(xì)節(jié)中體現(xiàn)體貼;

修改前修改后交互設(shè)計(jì)—適時(shí)的提醒沒(méi)必要的提醒不需要出現(xiàn)68交互設(shè)計(jì)—操作便利鼠標(biāo)響應(yīng)區(qū)域的大小，靈敏度和精確度，直接影響操作體驗(yàn)示例：QQMail，業(yè)務(wù)導(dǎo)航區(qū)，QQ音樂(lè)QQ影音的快捷播放按鈕：最初的設(shè)計(jì)改為方形擴(kuò)大點(diǎn)擊區(qū)域，考慮性能去掉按鈕顯示

最初的設(shè)計(jì)優(yōu)化后最后鼠標(biāo)動(dòng)作需要精確的判斷，捕捉用戶意圖（如：QQ影音的鼠標(biāo)左鍵點(diǎn)擊的精確判斷）左鍵單擊畫(huà)面可以移動(dòng)窗口沒(méi)有移動(dòng)窗口時(shí)左鍵彈起才暫停畫(huà)面，移動(dòng)范圍少于一定數(shù)值算暫停右鍵菜單出現(xiàn)后的左擊畫(huà)面不執(zhí)行暫停，視為取消右鍵菜單交互設(shè)計(jì)—操作便利鼠標(biāo)響應(yīng)區(qū)域的大小，靈敏度和精確度，直接影69視覺(jué)設(shè)計(jì)—制定規(guī)范，維持統(tǒng)一文字使用要規(guī)范，語(yǔ)法，大小，顏色，大小寫(xiě)都需要注意能用一個(gè)詞表達(dá)的，不用一句話。能用一句話表達(dá)清楚的，不用兩句話每個(gè)概念都只有唯一一種表達(dá)。如”VIP”的概念能用一種字體顏色的，不多用一種顏色能用一種字體大小的，不多用一種大小用標(biāo)準(zhǔn)組件能用標(biāo)準(zhǔn)控件的，不自己畫(huà)控件

（一個(gè)button，就有focused,selected,up/down,enabled/disabled,tab順序等多種狀態(tài)要畫(huà)和處理，不容易的，而且要考慮瀏覽器兼容）能用文字的，不用圖片（加圖片是要申請(qǐng)的）保持盡可能少的格式式樣維持統(tǒng)一就算字體和行間距等小細(xì)節(jié)都應(yīng)該關(guān)注到英文字體Tahoma視覺(jué)設(shè)計(jì)—制定規(guī)范，維持統(tǒng)一文字使用要規(guī)范，語(yǔ)法，大小，顏色70視覺(jué)設(shè)計(jì)—重點(diǎn)突出每個(gè)頁(yè)面（板塊）只有一塊視覺(jué)重點(diǎn)。并且，突出重點(diǎn)，不讓用戶去找。原來(lái)的設(shè)計(jì)排版不對(duì)，有一橫條的壓著的情況黃色塊就不能加框，視覺(jué)會(huì)很繁雜看著不舒服，句號(hào)也是多余的原來(lái)方案目前方案·Pony：在設(shè)置了獨(dú)立密碼的情況下,當(dāng)?shù)顷懙叫枰斎氇?dú)立密碼時(shí),總是先出來(lái)輸入框,此時(shí)已可輸入,我經(jīng)常是立刻輸入,但打了幾個(gè)字母后上面,才瞬間出現(xiàn)上面的黃色提醒"請(qǐng)輸入獨(dú)立保護(hù)密碼",而會(huì)導(dǎo)致輸入框位置立刻下壓,比較影響輸入.最好能改一改html里的結(jié)構(gòu),能夠快速讓人立刻輸入(越快越好)的基礎(chǔ)上,其他顯示的可以慢些load到但不應(yīng)影響其他部件的改變.視覺(jué)設(shè)計(jì)—重點(diǎn)突出每個(gè)頁(yè)面（板塊）只有一塊視覺(jué)重點(diǎn)。并且，突71總結(jié)：需要關(guān)注的用戶體驗(yàn)交互設(shè)計(jì)Don'tmakemethink符合用戶習(xí)慣與預(yù)期做適時(shí)的提醒不強(qiáng)迫用戶選擇最佳方案操作便利視覺(jué)設(shè)計(jì)傳播產(chǎn)品理念大氣成熟，干凈整潔，工具化規(guī)范與統(tǒng)一重點(diǎn)突出防止不恰當(dāng)?shù)牡妄g化產(chǎn)品設(shè)計(jì)口碑傳播少即是多兼容性無(wú)所不用其極關(guān)注性能和速度抓住高端用戶大氣的設(shè)計(jì)滿足用戶個(gè)性化需求尋求差異運(yùn)營(yíng)不穩(wěn)定會(huì)“功虧一簣”跟蹤用戶定位問(wèn)題抗災(zāi)容災(zāi)能力總結(jié)：需要關(guān)注的用戶體驗(yàn)交互設(shè)計(jì)產(chǎn)品設(shè)計(jì)72如何關(guān)注把自己想象成一個(gè)遲鈍、挑剔、易怒的傻瓜來(lái)使用產(chǎn)品抓主要矛盾，重點(diǎn)關(guān)注最常使用的交互點(diǎn)產(chǎn)品經(jīng)理有前臺(tái)和后臺(tái)技術(shù)背景，有助于設(shè)計(jì)的判斷和平衡擅長(zhǎng)體會(huì)和學(xué)習(xí)業(yè)界優(yōu)秀交互案例覺(jué)關(guān)注和決策行動(dòng)，決定準(zhǔn)確和快一秒鍵盤(pán)少敲一下，鼠標(biāo)易于點(diǎn)選，鼠標(biāo)少移一段，操作形成定勢(shì)照顧用戶習(xí)慣如何把新功能引入如何關(guān)注把自己想象成一個(gè)遲鈍、挑剔、易怒的傻瓜來(lái)使用產(chǎn)品73參考推薦著作：《Don’tmakemethink》《InformationArchitecturefortheWorldWideWeb》推薦工具：結(jié)構(gòu)化內(nèi)容：MindjetMindManage原型設(shè)計(jì)：AxureRP參考推薦著作：74謝謝，歡迎交流

電話：87167362飛秋群：2536172943謝謝，歡迎交流

電話：8716736275從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)信息咨詢部翟天驕2010.08.31從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)信息咨詢部翟天驕7677whatwhyhow2whatwhyhow77如果一個(gè)產(chǎn)品很難用，我就不會(huì)經(jīng)常使用如果一個(gè)產(chǎn)品我不需要，我就不會(huì)用如果一個(gè)產(chǎn)品很難用，我就不會(huì)經(jīng)常使用如果一個(gè)產(chǎn)品我不需要，我78Focusontheuser,andallelsewillfollow.以用戶為中心，其他一切紛至沓來(lái)。Focusontheuser,andallels79不同的人

不同的理解不同的人不同的理解80不同的需求不同的設(shè)計(jì)不同的需求不同的設(shè)計(jì)81不同的設(shè)計(jì)不同的效果心理模型表現(xiàn)模型實(shí)現(xiàn)模型容易使用，體驗(yàn)良好記憶負(fù)擔(dān)，體驗(yàn)較差最好的技術(shù)是消失在生活當(dāng)中的技術(shù)不同的設(shè)計(jì)不同的效果心理模型表現(xiàn)模型實(shí)現(xiàn)模型容易使用，體驗(yàn)8283whatwhyhow8whatwhyhow83以用戶為中心的Web設(shè)計(jì)的流程和用戶體驗(yàn)的要素“AJAX之父”的JesseJamesGarrett在2000年提出以用戶為中心的Web設(shè)計(jì)的流程和用戶體驗(yàn)的要素“AJAX之父84產(chǎn)品設(shè)計(jì)市場(chǎng)調(diào)研需求分析詳細(xì)設(shè)計(jì)研發(fā)發(fā)產(chǎn)品（軟件、網(wǎng)站）建房子土木工程師裝修設(shè)計(jì)師建筑設(shè)計(jì)師程序設(shè)計(jì)ＵＩ設(shè)計(jì)交互設(shè)計(jì)——《軟件設(shè)計(jì)的藝術(shù)》TerryWinograd(2004年度的ACM人機(jī)交互院士)產(chǎn)品設(shè)計(jì)市場(chǎng)調(diào)研研發(fā)發(fā)產(chǎn)品（軟件、網(wǎng)站）建房子土木工程師裝修85名稱解釋UI（userinterfacedesigner）:用戶界面設(shè)計(jì)人員UE（

UserExperience）：用戶體驗(yàn)

并不是指產(chǎn)品本身是如何工作的，而是指產(chǎn)品如何和外界聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾巍敖佑|“或者“使用”它。是指用戶在訪問(wèn)平臺(tái)的過(guò)程中的全部體驗(yàn)，它包括平臺(tái)是否有用，疑惑或者bug程度，功能是否易用、簡(jiǎn)約，界面設(shè)計(jì)和交互設(shè)計(jì)是否友好等方面。UCD（UserCenteredDesign）

：“以用戶為中心的設(shè)計(jì)名稱解釋UI（userinterfacedesigner8687whatwhyhow12whatwhyhow87如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件88設(shè)計(jì)者怎么想需求集合功能集合出水寫(xiě)字保護(hù)筆芯的筆蓋顏色墨水易擦墨水產(chǎn)品寫(xiě)字長(zhǎng)久的寫(xiě)字標(biāo)識(shí)不同內(nèi)容寫(xiě)新的內(nèi)容用戶能當(dāng)發(fā)簪變形金剛？？？要了解人，從而了解用戶，更要習(xí)慣站在用戶的角度看問(wèn)題。他們要“隨時(shí)隨地變成用戶”設(shè)計(jì)者怎么想需求集合功能集合出水寫(xiě)字保護(hù)筆芯的筆蓋顏色墨水易89產(chǎn)品功能重排產(chǎn)品功能重排90如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件91

口碑相傳的產(chǎn)品設(shè)計(jì)之道

核心能力和速度交互體貼細(xì)致，視覺(jué)簡(jiǎn)潔清爽高端用戶的關(guān)注如何在良好口碑下持續(xù)增加功能要了解人，從而了解用戶，更要習(xí)慣站在用戶的角度看問(wèn)題。他們要“隨時(shí)隨地變成用戶”口碑相傳的產(chǎn)品設(shè)計(jì)之道要了解人，從而了解用戶，更要92如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件93如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件94產(chǎn)品規(guī)劃的流程定義產(chǎn)品規(guī)劃流程對(duì)市場(chǎng)走勢(shì)及客戶需求進(jìn)行分析，創(chuàng)建合理的市場(chǎng)細(xì)分規(guī)則，對(duì)要投資和取得領(lǐng)先地位的細(xì)分市場(chǎng)進(jìn)行選擇和優(yōu)先級(jí)排序，從而制定可執(zhí)行的業(yè)務(wù)計(jì)劃，并驅(qū)動(dòng)新產(chǎn)品包的開(kāi)發(fā)。過(guò)程交付件對(duì)應(yīng)產(chǎn)品階段用戶需求收集產(chǎn)品候選概念用戶需求分析和PK階段市場(chǎng)分析市場(chǎng)評(píng)估報(bào)告制定規(guī)劃產(chǎn)品路標(biāo)規(guī)劃書(shū)制定綜合FeatureList和規(guī)劃PPT例撰寫(xiě)策劃產(chǎn)品需求規(guī)格說(shuō)明書(shū)產(chǎn)品需求說(shuō)明書(shū)例制定業(yè)務(wù)計(jì)劃產(chǎn)品業(yè)務(wù)計(jì)劃書(shū)開(kāi)發(fā)階段？產(chǎn)品規(guī)劃的流程定義產(chǎn)品規(guī)劃流程對(duì)市場(chǎng)走勢(shì)及客戶需求進(jìn)行分析，95用戶需求分析法（例：QQ秀）要素細(xì)分項(xiàng)目對(duì)應(yīng)騰訊產(chǎn)品的元素$價(jià)格設(shè)計(jì)、可生產(chǎn)性、技術(shù)、原材料、生產(chǎn)、供應(yīng)商、制造、元件、人力成本、管理費(fèi)用、裝備付費(fèi)Item的價(jià)格/包月價(jià)格A安全/質(zhì)量行銷(xiāo)、銷(xiāo)售、渠道、分配、交貨期、廣告、配置、定價(jià)、客戶定制客服/投訴的響應(yīng)P性能功能、吸引力、規(guī)格、功率、速度、容量、適應(yīng)性、多功能、尺寸用得爽不爽P包裝風(fēng)格、尺寸、數(shù)量、幾何設(shè)計(jì)、模塊性、體系結(jié)構(gòu)、界面、機(jī)械結(jié)構(gòu)、同一性、圖形、包含的/不包含的頁(yè)面好看不好看E易用用戶友好、操縱控制、顯示、人類(lèi)工程學(xué)、培訓(xùn)、文檔、幫助系統(tǒng)、人為因素、接口、操作UI（界面操作性）A可獲得性可靠性、質(zhì)量、安全性、誤差極限、完整性、強(qiáng)度、適應(yīng)性、動(dòng)態(tài)特性、負(fù)荷量、冗余Q幣購(gòu)買(mǎi)/充值渠道L生命周期成本壽命、正常運(yùn)行/停工時(shí)間、保險(xiǎn)、責(zé)任、可維護(hù)性、服務(wù)、備件、移植通道、標(biāo)準(zhǔn)化、基礎(chǔ)設(shè)施、運(yùn)轉(zhuǎn)成本、安裝成本Item有效期S社會(huì)接受程度間接影響、顧問(wèn)、采購(gòu)代理商、標(biāo)準(zhǔn)組織、政府、社會(huì)認(rèn)可程度、法律關(guān)系、政治、股東、管理層、工人、工作場(chǎng)所同齡人認(rèn)可度/流行度用戶需求分析法（例：QQ秀）要素細(xì)分項(xiàng)目對(duì)應(yīng)騰訊產(chǎn)品的元素$96如何排定產(chǎn)品功能的優(yōu)先級(jí)各個(gè)功能本身并無(wú)“優(yōu)先級(jí)”可言，對(duì)一支筆來(lái)說(shuō)，“寫(xiě)字”和“當(dāng)作發(fā)簪”這兩個(gè)需求是平等的。但是產(chǎn)品在不同的階段有不同的目標(biāo)和不同的現(xiàn)實(shí)情況，這就成為判定產(chǎn)品功能優(yōu)先級(jí)的唯一標(biāo)準(zhǔn)。產(chǎn)品階段首要目標(biāo)功能側(cè)重點(diǎn)$APPEALS新產(chǎn)品上線吸引新用戶、快速占領(lǐng)目標(biāo)市場(chǎng)“好用、方便、便宜”（注意，“便宜”實(shí)際上是運(yùn)營(yíng)的范疇）$價(jià)格、E易用、A可獲得性平臺(tái)期留住用戶、穩(wěn)定收入內(nèi)容翻新、滿足細(xì)分用戶群的需求（例子：高露潔牙膏、飄柔洗發(fā)水）P包裝、A安全/質(zhì)量、P性能產(chǎn)品更新?lián)Q代保留舊產(chǎn)品精髓，加入新的創(chuàng)意元素“時(shí)尚、創(chuàng)新、新新人類(lèi)的需求”（例子：Swatch）S社會(huì)接受、L生命周期成本如何排定產(chǎn)品功能的優(yōu)先級(jí)各個(gè)功能本身并無(wú)“優(yōu)先級(jí)”可言，對(duì)一97市場(chǎng)分析市場(chǎng)分析98用戶分析用戶分析99需求分析需求分析100小案例：用戶需求優(yōu)先級(jí)排序QQ發(fā)布第一個(gè)版本時(shí)，有以下用戶需求：卡通頭像QQ表情聊天記錄管理器看誰(shuí)在線上安全性傳文件很小的.exe文件視頻聊天室語(yǔ)音反應(yīng)速度快請(qǐng)從中選出最重要的三項(xiàng)，發(fā)布QQ1.0。小案例：用戶需求優(yōu)先級(jí)排序QQ發(fā)布第一個(gè)版本時(shí)，有以下用戶需101？？102別讓我思考(Don’tMakeMeThink)網(wǎng)站可用性三大定律別讓我思考(Don’tMakeMeThink)網(wǎng)站可用103人們使用WEB的幾個(gè)事實(shí)不是閱讀，而是掃描①總是很忙②不必閱讀所有的內(nèi)容③善于掃描不做最佳選擇，而是滿意即可①總是很忙碌②如同消防員不追根究底，而是勉強(qiáng)應(yīng)付①如果發(fā)現(xiàn)某個(gè)東西能用，我們會(huì)一直用它人們使用WEB的幾個(gè)事實(shí)不是閱讀，而是掃描104用戶瀏覽網(wǎng)站不是在閱讀，而是掃描用戶瀏覽網(wǎng)站不是在閱讀，而是掃描105注意力是有限的注意力是有限的106過(guò)多的內(nèi)容。。。過(guò)多的內(nèi)容。。。107不追根究底，而是勉強(qiáng)應(yīng)付不追根究底，而是勉強(qiáng)應(yīng)付108Krug可用性三大定律別讓我思考(Don'tmakemethink)要點(diǎn)擊多少次都沒(méi)關(guān)系，只要每次點(diǎn)擊都是無(wú)須思考，明確無(wú)誤的選擇。

去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的文字再去掉一半。Krug可用性三大定律別讓我思考(Don'tmakeme109Krug可用性第一定律別讓我思考(Don'tmakemethink)網(wǎng)頁(yè)應(yīng)該設(shè)計(jì)得不言而喻網(wǎng)頁(yè)避免強(qiáng)迫用戶思考的地方如果做不到一切不言而喻，起碼做到讓頁(yè)面自我解釋Krug可用性第一定律別讓我思考(Don'tmakeme110麥當(dāng)勞兩則麥當(dāng)勞兩則111強(qiáng)迫我們思考的地方(1)強(qiáng)迫我們思考的地方(1)112強(qiáng)迫我們思考的地方(2)強(qiáng)迫我們思考的地方(2)113卓越網(wǎng)和當(dāng)當(dāng)網(wǎng)的搜索框卓越網(wǎng)和當(dāng)當(dāng)網(wǎng)的搜索框114當(dāng)當(dāng)網(wǎng)2006年1月1日首頁(yè)快照當(dāng)當(dāng)網(wǎng)2006年1月1日首頁(yè)快照115什么是頁(yè)面的自我解釋？頁(yè)面的自我解釋即用戶對(duì)頁(yè)面稍加學(xué)習(xí)就可以明白，用戶能夠更加專注于他要做的事情。特別是在進(jìn)行一些嶄新的，開(kāi)拓性或者非常復(fù)雜的頁(yè)面設(shè)計(jì)時(shí)，也許只能做到自我解釋(Self-explanatory)。返回什么是頁(yè)面的自我解釋？頁(yè)面的自我解釋即用戶對(duì)頁(yè)面稍加學(xué)習(xí)就可116Krug可用性第二定律Krug可用性第二定律117如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件118Krug可用性第三定律去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的文字再去掉一半。有力的文字都是簡(jiǎn)潔的。必須消滅歡迎詞，必須消滅指示性文字。Krug可用性第三定律去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的119MicrosoftTechNet

歡迎詞MicrosoftTechNet歡迎詞120中國(guó)建設(shè)銀行反饋表單指示性文字中國(guó)建設(shè)銀行反饋表單指示性文字121可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))主頁(yè)團(tuán)隊(duì)中可用性的討論可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))122可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條作用幫助找到想要的，告訴我們?nèi)绾问褂镁W(wǎng)站給人固定的感覺(jué)告訴我們身在何處注意事項(xiàng)可用性實(shí)踐中需要注意的問(wèn)題導(dǎo)航條123導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))導(dǎo)航條(頁(yè)頭，頁(yè)尾，頁(yè)內(nèi))124Bearlookingatmapofparkwithsign"Youarehere"Bearlookingatmapofparkwi125導(dǎo)航條設(shè)計(jì)時(shí)需要注意網(wǎng)站的每一頁(yè)(表單可能例外)都需要導(dǎo)航次級(jí)導(dǎo)航都應(yīng)該有返回首頁(yè)的鏈接頁(yè)面名稱應(yīng)該醒目(自我解釋)要提供簡(jiǎn)潔，沒(méi)有無(wú)關(guān)選項(xiàng)的搜索框優(yōu)秀的導(dǎo)航條示例:Amazon,B導(dǎo)航條設(shè)計(jì)時(shí)需要注意網(wǎng)站的每一頁(yè)(表單可能例外)都需要導(dǎo)航126Amazon.COM導(dǎo)航條Amazon.COM導(dǎo)航條127B導(dǎo)航條B導(dǎo)航條128可用性實(shí)踐中需要注意的問(wèn)題主頁(yè)主頁(yè)的作用主頁(yè)需要額外考慮的問(wèn)題可用性實(shí)踐中需要注意的問(wèn)題主頁(yè)129主頁(yè)的作用準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象網(wǎng)站的標(biāo)識(shí)和起點(diǎn)內(nèi)容更新導(dǎo)讀服務(wù)以及搜索的入口返回主頁(yè)的作用準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象130準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象主頁(yè)要做到這點(diǎn)必須清晰的回答四個(gè)問(wèn)題這是什么網(wǎng)站？網(wǎng)站上面有什么？我能在這里干什么？為什么我應(yīng)該在這而不是在別的地方？返回準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象主頁(yè)要做到這點(diǎn)必須清晰的回答四個(gè)131主頁(yè)需要額外考慮的問(wèn)題每個(gè)人都想占一席之地想要參與的人太多設(shè)計(jì)要滿足所有人返回主頁(yè)需要額外考慮的問(wèn)題每個(gè)人都想占一席之地132站點(diǎn)的標(biāo)識(shí)和口號(hào)沒(méi)有什么比得上一個(gè)好口號(hào)每天五分鐘，給思想加油。()理性，建設(shè)性。()站點(diǎn)的標(biāo)識(shí)和口號(hào)沒(méi)有什么比得上一個(gè)好口號(hào)133可用性實(shí)踐中需要注意的問(wèn)題團(tuán)隊(duì)中可用性的討論現(xiàn)狀：無(wú)休止的信仰大戰(zhàn)本質(zhì)：浪費(fèi)時(shí)間關(guān)鍵：沒(méi)有什么所謂的普通用戶唯一改變的方法：用戶體驗(yàn)測(cè)試可用性實(shí)踐中需要注意的問(wèn)題團(tuán)隊(duì)中可用性的討論134團(tuán)隊(duì)中可用性的討論團(tuán)隊(duì)中可用性的討論135可用性最佳實(shí)踐提供增大網(wǎng)頁(yè)字體的選項(xiàng)(國(guó)內(nèi)網(wǎng)站…)為每張圖片增加ALT文本用戶不可能在一個(gè)界面中接受過(guò)多信息，而且信息量和頁(yè)面長(zhǎng)度不是正比關(guān)系可用性最佳實(shí)踐提供增大網(wǎng)頁(yè)字體的選項(xiàng)(國(guó)內(nèi)網(wǎng)站…)136為每張圖片增加ALT文本<imgsrc="/logo.gif" alt="鳳凰網(wǎng)網(wǎng)站圖標(biāo)LOGO"/>返回為每張圖片增加ALT文本<imgsrc="http://i137如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件138如何從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)課件139交互設(shè)計(jì)—Don'tmakemethink“返回”的位置和做法很重要：這是整個(gè)QQMail的交互的“樞紐”，如同圍棋中的“玉柱”，也定義了郵箱的交互風(fēng)格。幫用戶自動(dòng)選中：在輸入獨(dú)立密碼或加密folder輸入密碼時(shí)錯(cuò)誤后，應(yīng)該把輸入框內(nèi)的內(nèi)容select上，這樣就可以直接打入而不用清除了光標(biāo)定位：之前的點(diǎn)"回復(fù)"時(shí)光標(biāo)focus到正文的問(wèn)題改好了,但卻沒(méi)有注意到點(diǎn)"轉(zhuǎn)發(fā)"時(shí)光標(biāo),反而應(yīng)是在"收件人"處而不是正文處,因?yàn)橐话憧傄顚?xiě)轉(zhuǎn)發(fā)人,而回復(fù)(包括回復(fù)全部)則是直接輸入內(nèi)容.交互設(shè)計(jì)—Don'tmakemethink“返回”的位140交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期類(lèi)Outlook客戶端操作，但比它做得更優(yōu)秀先字母排序，再優(yōu)先顯示最近聯(lián)系人，減少鍵盤(pán)操作。這么細(xì)的體驗(yàn)，但一旦用上，就覺(jué)得別的同類(lèi)產(chǎn)品很粗糙了！VS交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期類(lèi)Outlook客戶端操作，但比141交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期兼容客戶端郵件菜單習(xí)慣在用TT或QQ/TM/RTX截屏后的圖,mail原來(lái)在寫(xiě)信時(shí)用Ctrl-V可以貼出來(lái)，但右鍵則不能。不要隨意去掉用戶正在使用的功能原來(lái)mail在做出了“HTML方式查看”后，去掉了“打開(kāi)”功能符合用戶預(yù)期，點(diǎn)擊其他地方，WEBQQ的浮動(dòng)窗口隱藏到固定位置交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期兼容客戶端郵件菜單習(xí)慣142交互設(shè)計(jì)—適時(shí)的提醒沒(méi)必要的提醒不需要出現(xiàn)而適時(shí)出現(xiàn)的提示或功能，用得好，不但不會(huì)騷擾用戶，還是對(duì)用戶的細(xì)致的關(guān)懷（當(dāng)未讀郵件過(guò)多時(shí)，提示刪除歷史郵件）數(shù)字和字母帳號(hào)不同方式；圖片驗(yàn)證旁提示“不區(qū)分大小寫(xiě)”，細(xì)節(jié)中體現(xiàn)體貼;

修改前修改后交互設(shè)計(jì)—適時(shí)的提醒沒(méi)必要的提醒不需要出現(xiàn)143交互設(shè)計(jì)—操作便利鼠標(biāo)響應(yīng)區(qū)域的大小，靈敏度和精確度，直接影響操作體驗(yàn)示例：QQMail，業(yè)務(wù)導(dǎo)航區(qū)，QQ音樂(lè)QQ影音的快捷播放按鈕：最初的設(shè)計(jì)改為方形擴(kuò)大點(diǎn)擊區(qū)域，考慮性能去掉按鈕顯示

最初的設(shè)計(jì)優(yōu)化后