轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(  www.cqzjtgb.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)  、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、  網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://cued.xunlei.com/log022

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，          請(qǐng)點(diǎn)這里

很多網(wǎng)頁(yè)設(shè)計(jì)師認(rèn)為自己做好設(shè)計(jì)就可以，其他的事可不用理會(huì)和學(xué)習(xí)，那就大錯(cuò)特錯(cuò)了！一個(gè)優(yōu)秀的設(shè)計(jì)師，必須深入了解產(chǎn)品本身、相關(guān)交互結(jié)構(gòu)及用戶(hù)體驗(yàn)等常識(shí)！這樣設(shè)計(jì)師設(shè)計(jì)的東西才能深入產(chǎn)品中去，避免不犯錯(cuò)誤！ 設(shè)計(jì)來(lái)源生活和思考，同樣作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，要不斷地學(xué)習(xí)、思考、分析產(chǎn)品才能設(shè)計(jì)出更好的作品 ！

 

這里主要與迅雷看看 產(chǎn)品為例，談設(shè)計(jì)及用戶(hù)體驗(yàn)的點(diǎn)點(diǎn)滴滴！希望對(duì)剛跨入網(wǎng)頁(yè)設(shè)計(jì)這行的童鞋們有所幫助！

主要兩個(gè)方面講：  

   ●  了解產(chǎn)品需求設(shè)計(jì) （以迅雷看產(chǎn)品為例）

   ●  交互設(shè)計(jì)與視覺(jué)設(shè)計(jì)

 

首先講下第一方面：

   ● 了解產(chǎn)品需求設(shè)計(jì) （以迅雷看產(chǎn)品為例）又 主要從四點(diǎn)來(lái)分析說(shuō)明：

           1. 迅雷看看知多少

           2. 看看設(shè)計(jì)師面對(duì)的用戶(hù)及關(guān)系

           3. 迅雷看看設(shè)計(jì)要求

           4. 迅雷看看具體規(guī)范

 

第一點(diǎn)：迅雷看看知多少

迅雷看看與優(yōu)酷、奇藝、土豆、酷6等視頻類(lèi)網(wǎng)站，技術(shù)上最大的區(qū)別是什么？迅雷看看和優(yōu)酷、土豆、酷6等視頻網(wǎng)站從內(nèi)容上說(shuō)區(qū)別又是什么呢？迅雷看看用戶(hù)使用的電腦分辨率比例是怎樣呢？我們得知后，對(duì)我們?cè)O(shè)計(jì)有什么幫助，該注意什么事項(xiàng)等等都需要設(shè)計(jì)師深入了解產(chǎn)品后，才得到更好的結(jié)論！

 

2011年8月份數(shù)據(jù)：網(wǎng)站排名

權(quán)威數(shù)據(jù)監(jiān)測(cè)機(jī)構(gòu)艾瑞提供

2011年8月份數(shù)據(jù)： 迅雷看看播放器排名

迅雷看看排在所有視頻網(wǎng)站第三位，看看播放器排在第二位！流量和用戶(hù)如此之大，有人會(huì)問(wèn)這關(guān)我們?cè)O(shè)計(jì)師有啥事呢？當(dāng)然有事！這就要求我們?cè)谠O(shè)計(jì)的時(shí)候，嚴(yán)格要求自己，一個(gè)小小錯(cuò)誤或者一個(gè)像素拖動(dòng)都將會(huì)導(dǎo)致有不同的轉(zhuǎn)化率出現(xiàn)，也會(huì)影響網(wǎng)站的用戶(hù)體驗(yàn),所以面向海量的用戶(hù)群，更要求我們?cè)O(shè)計(jì)師本身做設(shè)計(jì)的時(shí)候要更嚴(yán)謹(jǐn)更注重產(chǎn)品細(xì)節(jié)。

 

迅雷看看的架構(gòu)線

了解迅雷看看產(chǎn)品框架線，設(shè)計(jì)師設(shè)計(jì)的時(shí)候才能深入處理好相互之間的關(guān)系及風(fēng)格的統(tǒng)一！

 

還需要了解迅雷看看用戶(hù)分辨率、 瀏覽器、 用戶(hù)操作系統(tǒng)這些數(shù)據(jù)，以便我們更容易做跨平臺(tái)的設(shè)計(jì)。

 

第二點(diǎn)：看看設(shè)計(jì)師面對(duì)的用戶(hù)及關(guān)系

作為一個(gè)設(shè)計(jì)師，不僅需要了解該產(chǎn)品的用戶(hù)群體，設(shè)計(jì)出符合用戶(hù)口味的風(fēng)格，當(dāng)然還要符合產(chǎn)品本身特征的風(fēng)格定位！但更重要的是您了解該產(chǎn)品的產(chǎn)品經(jīng)理想要一個(gè)什么樣的東西，處理好之間的關(guān)系，便于加強(qiáng)溝通，這樣才能設(shè)計(jì)出好的產(chǎn)品！

 

第三點(diǎn)：迅雷看看設(shè)計(jì)要求

主色調(diào)的統(tǒng)一

眾所周知，迅雷看看的主色調(diào)是藍(lán)色，設(shè)計(jì)時(shí)注意保持統(tǒng)一。像新浪是黃色 奇藝是綠色  土豆是黃色，優(yōu)酷的是藍(lán)色一樣等，都有自己的色調(diào)體系！

整體把握

了解整個(gè)互聯(lián)網(wǎng)視頻網(wǎng)站的風(fēng)格定位及方向，結(jié)合自身的特點(diǎn)，做到，內(nèi)容最大，用戶(hù)體驗(yàn)其次，  最后才是視覺(jué)設(shè)計(jì)。

 

第四點(diǎn)： 迅雷看看具體規(guī)范

Logo、字間距、頁(yè)面尺寸、版本間距、每個(gè)像素、鏈接顏色、字體、圖片大小、圖標(biāo)、整體視覺(jué)風(fēng)格等都要受到關(guān)注和有條理的統(tǒng)一。

風(fēng)格的統(tǒng)一，可以說(shuō)就是細(xì)節(jié)的統(tǒng)一， 細(xì)節(jié)決定成敗 ！

 

接下來(lái)第二方面：

●  交互設(shè)計(jì)與視覺(jué)設(shè)計(jì)   主要從四點(diǎn)來(lái)分析說(shuō)明：

        1.什么UED

        2.用戶(hù)體驗(yàn)的重要性

        3.交互與視覺(jué)設(shè)計(jì)間的關(guān)系

        4. 如何提高自己的交互能力

       

第一點(diǎn)：什么是UED

用戶(hù)體驗(yàn)（User Experience Design，簡(jiǎn)稱(chēng)UED）是一種純主觀的在用戶(hù)使用一個(gè)產(chǎn)品（服務(wù)）的過(guò)程中建立起來(lái)的心理感受。因?yàn)樗羌冎饔^的，就帶有一定的不確定因素。

用戶(hù)體驗(yàn)主要是來(lái)自用戶(hù)和人機(jī)界面的交互過(guò)程。

   一句話：以用戶(hù)為中心、以人為本

 

第二點(diǎn)： 用戶(hù)體驗(yàn)的重要性

        1、提高用戶(hù)的回訪率（用戶(hù)黏度）；

        2、增強(qiáng)品牌氣質(zhì)的影響力和用戶(hù)的榮譽(yù)感（口碑）；

        3、提高產(chǎn)品持續(xù)獲取利潤(rùn)的能力

        4、提高產(chǎn)品的用戶(hù)滿(mǎn)意度、為品牌帶來(lái)不可估價(jià)的口碑；

        5、增強(qiáng)用戶(hù)對(duì)品牌的忠誠(chéng)度和信任度；

        6、合理而的促進(jìn)用戶(hù)點(diǎn)擊欲望

        7、是超越競(jìng)爭(zhēng)對(duì)手最有深遠(yuǎn)影響的一個(gè)重要方面

 

第三點(diǎn)： 交互與視覺(jué)設(shè)計(jì)的關(guān)系

用戶(hù)體驗(yàn)以用戶(hù)為中心，交互設(shè)計(jì)是圍繞用戶(hù)體驗(yàn)展開(kāi)設(shè)計(jì)的，而視覺(jué)設(shè)計(jì)是交互設(shè)計(jì)為中心的！

可以說(shuō)，離開(kāi)交互設(shè)計(jì)即用戶(hù)體驗(yàn)的設(shè)計(jì)，必定是一個(gè)失敗的視覺(jué)設(shè)計(jì)，

即使你的視覺(jué)設(shè)計(jì)再好再牛B,那也不過(guò)是畫(huà)蛇添足罷了！

 

交互設(shè)計(jì)與視覺(jué)設(shè)計(jì)成正比，

好的設(shè)計(jì)，離不開(kāi)好的交互設(shè)計(jì)做基石！ 交互設(shè)計(jì)要求我們細(xì)致，視覺(jué)簡(jiǎn)潔清爽，易學(xué)易懂，當(dāng)自己是個(gè)挑剔的、笨的用戶(hù)。

 

第四點(diǎn)： 設(shè)計(jì)師如何提高自己的交互能力

         1.多看，多用，多研究用戶(hù)體驗(yàn)好的網(wǎng)站(如amazon.com、yahoo.com）

         2.做的設(shè)計(jì)時(shí)候，不斷滴思考和推敲是否可以有更好的改進(jìn)，讓視覺(jué)和體驗(yàn)得到完美的釋放！

         3.分析網(wǎng)站的競(jìng)爭(zhēng)對(duì)手，同樣的東西它好在哪里，為什么這樣做等！

         4.設(shè)計(jì)流程圖能力

         5.表達(dá)能力

 

始終明確改善、用戶(hù)及數(shù)據(jù)之間的關(guān)系

“改善”是手段， “用戶(hù)”是核心，“數(shù)據(jù)”是根據(jù).

 

舉例說(shuō)明，設(shè)計(jì)如何提高自己獨(dú)立思考及交互能力

迅雷7上交互和體驗(yàn)上的問(wèn)題

迅雷7“下載完成后關(guān)機(jī)”按鈕設(shè)置完成后，跳出的提示框。當(dāng)您操作的時(shí)候，粗略操作下！你很容易發(fā)現(xiàn)“取消完成后關(guān)機(jī)”與“關(guān)閉”按鈕靠的太近，用戶(hù)容易誤操作；”關(guān)閉“按鈕白色，不明顯，很容易忽略！

接下來(lái)，設(shè)計(jì)師就可以解決這樣的問(wèn)題！如下圖：

我們只要移下位置，關(guān)閉按鈕換成提示框背景色一色系更深的顏色即可，顏色看上不就不會(huì)突兀！” 取消完成后關(guān)機(jī)“文字也可以精煉成”取消開(kāi)啟“即可，用戶(hù)很好理解，它與前句呼應(yīng)的關(guān)系！

當(dāng)你做到這個(gè)時(shí)候，遠(yuǎn)遠(yuǎn)還不夠！試問(wèn)自己能不能更好呢？這時(shí)設(shè)計(jì)師需要去思考！才能用戶(hù)體驗(yàn)更完美！

我們都知道，在網(wǎng)頁(yè)設(shè)計(jì)里黃色一般表示”警示、提示、提醒、告知“的含義，而綠色表示：“通行、健康、環(huán)保、成功”的含義，顧提示框的顏色有問(wèn)題，很容易被人忽略，沒(méi)到達(dá)到告知、提示用戶(hù)的目的！再深入思考，不難發(fā)現(xiàn)，提示框的出現(xiàn)的位置也有問(wèn)題，用戶(hù)粗略一看不知道提示出自哪里！發(fā)現(xiàn)了問(wèn)題，那我們就可以更深入解決！

如下圖：

這樣話，用戶(hù)容易操作，容易發(fā)現(xiàn).也就達(dá)到你設(shè)計(jì)目的！

 

總結(jié)

設(shè)計(jì)師需要思考，做每一步都是講道理的過(guò)程，

設(shè)計(jì)師需要了解，只有了解了產(chǎn)品的特征，才能做出更好的設(shè)計(jì)

設(shè)計(jì)師需要提高自身的交互能力，這樣才能避免犯錯(cuò)誤

設(shè)計(jì)師更需要不斷的學(xué)習(xí)，提高自己的審美能力和動(dòng)手能力.